/* ==========================================================================
       DESIGN TOKENS — "Judicial Record" system
       ========================================================================== */
    :root {
      --font-display: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, sans-serif;
      --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
      --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

      /* Surfaces — cool institutional paper */
      --paper: #f5f7fa;
      --surface: #ffffff;
      --surface-2: #eef2f7;
      --surface-3: #e3eaf3;

      /* Ink — all pairs verified ≥ 4.5:1 on --paper */
      --ink: #0f172a;
      --ink-2: #3f4b5f;
      --ink-3: #5b6b80;

      --rule: #dce3ec;
      --rule-strong: #c1ccdb;

      /* Authority navy — institution, primary actions */
      --primary: #1e3a8a;
      --primary-hover: #172e6e;
      --primary-wash: #edf1fb;
      --on-primary: #ffffff;

      /* Judicial crimson — restraint, warning, alerts */
      --alert: #d90429;
      --alert-hover: #a80320;
      --alert-wash: #ffe9ee;
      --on-alert: #ffffff;

      /* Seal gold — certification marks */
      --gold: #9a6408;

      /* Legacy aliases */
      --crimson: var(--alert);
      --crimson-deep: var(--alert-hover);
      --crimson-wash: var(--alert-wash);

      --focus: #1e3a8a;
      --shadow-sm: 0 2px 6px rgba(15, 23, 42, .05);
      --shadow-md: 0 10px 28px -12px rgba(15, 23, 42, .16);
      --shadow-lg: 0 28px 60px -24px rgba(15, 23, 42, .3);
      --glow-alert: 0 6px 18px rgba(217, 4, 41, .3);
      --glow-primary: 0 6px 18px rgba(30, 58, 138, .28);

      --r: 12px;
      --r-lg: 18px;
      --r-pill: 999px;
      --gutter: 20px;
      --maxw: 1180px;
      --ease: cubic-bezier(.22, .61, .36, 1);
      --sticky-h: 64px;
    }

    html.dark {
      --paper: #0b0f16;
      --surface: #111723;
      --surface-2: #161e2c;
      --surface-3: #1c2636;

      --ink: #e9eef7;
      --ink-2: #b7c2d4;
      --ink-3: #8d9bb0;

      --rule: #222c3d;
      --rule-strong: #33405a;

      --primary: #8fb0f5;
      --primary-hover: #a9c2f8;
      --primary-wash: rgba(143, 176, 245, .12);
      --on-primary: #0b0f16;

      --alert: #ff5c72;
      --alert-hover: #ff7a8c;
      --alert-wash: rgba(255, 92, 114, .12);
      --on-alert: #0b0f16;

      --gold: #d7ab52;

      --focus: #8fb0f5;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, .55);
      --shadow-md: 0 12px 34px -18px rgba(0, 0, 0, .85);
      --shadow-lg: 0 30px 70px -34px rgba(0, 0, 0, .95);
      --glow-alert: 0 6px 20px rgba(217, 4, 41, .45);
      --glow-primary: 0 6px 20px rgba(59, 92, 176, .5);
    }

    /* ==========================================================================
       RESET & BASE
       ========================================================================== */
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; padding: 0; }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: 124px;
    }

    body {
      font-family: var(--font-sans);
      font-size: 16.5px;
      line-height: 1.68;
      color: var(--ink-2);
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
      overscroll-behavior-y: contain;
      touch-action: manipulation;
      /* Reserves exactly the height of the fixed advisory bar (measured at runtime) */
      padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom));
    }

    h1, h2, h3, h4 {
      font-family: var(--font-display);
      color: var(--ink);
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.02em;
    }

    a { color: inherit; text-decoration: none; }
    img, svg { display: block; max-width: 100%; }
    button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
    strong { color: var(--ink); font-weight: 600; }
    ::selection { background: var(--primary); color: var(--on-primary); }

    :focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 3px;
      border-radius: 1px;
    }

    .container {
      width: 100%;
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

    .skip-link {
      position: absolute; left: -9999px; top: 0; z-index: 9999;
      background: var(--ink); color: var(--paper);
      padding: 12px 20px; font-size: 14px; font-weight: 600;
    }
    .skip-link:focus { left: 12px; top: 12px; }

    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* ==========================================================================
       SHARED TYPOGRAPHY PRIMITIVES
       ========================================================================== */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--font-sans);
      padding: 7px 15px 7px 12px;
      border-radius: var(--r-pill);
      background: linear-gradient(135deg, #d90429, #8d0801);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
      line-height: 1;
      box-shadow: 0 4px 12px rgba(217, 4, 41, .28);
    }
    .eyebrow--alert { background: linear-gradient(135deg, #d90429, #8d0801); }
    .eyebrow .icon { width: 14px; height: 14px; stroke-width: 1.8; }

    .cite {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .01em;
      color: var(--ink-3);
    }

    .section { padding: 44px 0; }
    .section--tight { padding-top: 0; }

    .section-head { margin-bottom: 30px; max-width: 720px; }
    .section-head h2 {
      font-size: clamp(1.5rem, 4.6vw, 2.15rem);
      margin-top: 13px;
    }
    .section-head p {
      margin-top: 12px;
      font-size: 15.5px;
      color: var(--ink-3);
      max-width: 62ch;
    }

    .rule-top { border-top: 1px solid var(--rule); }

    /* ==========================================================================
       BUTTONS
       ========================================================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: .008em;
      padding: 13px 24px;
      min-height: 48px;              /* ≥ 44px touch target */
      border-radius: var(--r-pill);
      border: 1px solid transparent;
      transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
      text-align: center;
      cursor: pointer;
    }
    .btn .icon { width: 17px; height: 17px; }
    .btn:active { transform: scale(.98); }

    .btn--primary {
      background: linear-gradient(135deg, #24449c, #16295f);
      color: #fff;
      box-shadow: var(--glow-primary);
    }
    .btn--primary:hover { filter: brightness(1.12); transform: translateY(-1px); }

    .btn--alert {
      background: linear-gradient(135deg, #d90429, #8d0801);
      color: #fff;
      box-shadow: var(--glow-alert);
    }
    .btn--alert:hover { filter: brightness(1.1); transform: translateY(-1px); }

    .btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .btn--ink:hover { background: var(--ink-2); border-color: var(--ink-2); }

    .btn--ghost { border-color: var(--rule-strong); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
    .btn--ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-wash); transform: translateY(-1px); }

    .btn--sm { padding: 9px 17px; font-size: 13.5px; min-height: 44px; }
    .btn--block { width: 100%; }

    /* ==========================================================================
       ALERT STRIP + HEADER
       ========================================================================== */
    .alert-strip {
      background: linear-gradient(90deg, #8d0801, #d90429, #8d0801);
      color: #fff;
      position: relative;
      z-index: 60;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    }
    html.dark .alert-strip { background: linear-gradient(90deg, #4d0509, #a80320, #4d0509); }

    .alert-strip__inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 11px var(--gutter);
      max-width: 980px;
      margin-inline: auto;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      line-height: 1.55;
      text-align: center;
      text-wrap: balance;
    }
    .alert-strip .icon { width: 14px; height: 14px; opacity: .85; }

    .masthead {
      position: sticky;
      top: 0;
      z-index: 50;
      background: color-mix(in srgb, var(--paper) 88%, transparent);
      -webkit-backdrop-filter: saturate(180%) blur(14px);
      backdrop-filter: saturate(180%) blur(14px);
      border-bottom: 1px solid var(--rule);
      transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    @supports not (background: color-mix(in srgb, red 50%, blue)) {
      .masthead { background: var(--paper); }
    }
    .masthead.is-stuck { box-shadow: var(--shadow-sm); }

    /* Mobile: brand row + wrapped nav row. Explicit top padding keeps the brand
       seal clear of the alert strip above (the wrapped flex box has no implicit
       vertical centring to rely on). */
    .masthead__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding-top: 13px;
    }

    .brand { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 44px; }
    .brand__seal {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #d90429, #8d0801);
      color: #fff;
      display: grid;
      place-items: center;
      flex: none;
      box-shadow: 0 3px 10px rgba(217, 4, 41, .3);
    }
    .brand__seal .icon { width: 20px; height: 20px; stroke-width: 1.5; }
    .brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
    .brand__name {
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .13em;
      color: var(--ink);
    }
    .brand__sub {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .06em;
      color: var(--ink-3);
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Mobile: nav wraps to a scrollable second row so every section stays reachable */
    .nav {
      order: 3;
      flex: 1 0 100%;
      min-width: 0;
      margin-top: 1px;
      border-top: 1px solid var(--rule);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .nav::-webkit-scrollbar { display: none; }
    /* No horizontal padding on mobile so the first link's text lines up exactly
       with the brand seal and the page gutter; spacing comes from gap instead. */
    .nav ul {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
      margin-left: -6px;
    }
    /* Only when the links genuinely overflow (very narrow phones) do we fade the
       trailing edge, so a clipped item reads as "scrollable", not "broken". */
    .nav.is-scrollable {
      -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
      mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    }
    .nav a {
      display: block;
      padding: 13px 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-2);
      position: relative;
      white-space: nowrap;
      transition: color .18s var(--ease), background-color .18s var(--ease);
    }
    .nav a:hover { color: var(--ink); }
    .nav a.is-active { color: var(--alert); font-weight: 700; }
    .nav a.is-active::after {
      content: "";
      position: absolute;
      left: 6px; right: 6px; bottom: 0;
      height: 2.5px;
      border-radius: 2px 2px 0 0;
      background: var(--alert);
    }

    .masthead__actions { display: flex; align-items: center; gap: 10px; flex: none; }

    .icon-btn {
      width: 44px; height: 44px;
      border: 1px solid var(--rule);
      border-radius: var(--r);
      display: grid;
      place-items: center;
      color: var(--ink-2);
      background: var(--surface);
      transition: border-color .18s var(--ease), color .18s var(--ease);
    }
    .icon-btn:hover { border-color: var(--rule-strong); color: var(--ink); }
    .icon-btn .icon { width: 17px; height: 17px; }
    .icon-btn .icon--sun { display: none; }
    html.dark .icon-btn .icon--sun { display: block; }
    html.dark .icon-btn .icon--moon { display: none; }

    .masthead__cta { display: none; }

    /* ==========================================================================
       HERO
       ========================================================================== */
    .hero { padding: 34px 0 40px; position: relative; }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 420px;
      background:
        radial-gradient(720px 300px at 8% -12%, var(--primary-wash), transparent 70%),
        radial-gradient(640px 280px at 96% -8%, var(--alert-wash), transparent 68%);
      pointer-events: none;
    }
    .hero__grid { position: relative; display: grid; gap: 36px; }

    .status-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px 8px 13px;
      background: linear-gradient(135deg, #d90429, #8d0801);
      color: #fff;
      border-radius: var(--r-pill);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .09em;
      text-transform: uppercase;
      line-height: 1;
      animation: pulse-glow 2.2s infinite;
    }
    .status-tag .icon { width: 14px; height: 14px; }

    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 10px rgba(217, 4, 41, .35); }
      50% { box-shadow: 0 0 22px rgba(217, 4, 41, .65); }
    }

    .hero h1 {
      font-size: clamp(1.9rem, 5.8vw, 3.15rem);
      line-height: 1.12;
      letter-spacing: -0.022em;
      margin-top: 16px;
    }
    .hero h1 .case-name {
      display: block;
      color: var(--alert);
      margin-top: 8px;
      font-size: .86em;
      line-height: 1.18;
    }
    .hero h1 .subline {
      display: block;
      margin-top: 16px;
      font-family: var(--font-sans);
      font-size: clamp(.95rem, 2.4vw, 1.1rem);
      font-weight: 700;
      letter-spacing: .01em;
      color: var(--ink-2);
    }

    .hero__lede {
      margin-top: 20px;
      font-size: 16.5px;
      line-height: 1.75;
      color: var(--ink-2);
      max-width: 60ch;
      border-left: 3px solid var(--primary);
      padding-left: 20px;
    }

    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 26px;
    }
    .hero__actions .btn { flex: 1 1 240px; }

    .stat-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 28px;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }
    .stat {
      padding: 18px 14px 18px 0;
      border-right: 1px solid var(--rule);
    }
    .stat:last-child { border-right: none; padding-right: 0; }
    .stat:not(:first-child) { padding-left: 18px; }
    .stat__num {
      font-family: var(--font-display);
      font-size: clamp(1.55rem, 4.8vw, 2.1rem);
      font-weight: 700;
      color: var(--alert);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }
    .stat__label {
      margin-top: 9px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-3);
      line-height: 1.35;
    }

    /* ---------- Docket card ---------- */
    /* Accent is a clipped pseudo-element, not a thick border-top: mixing a 4px
       top with 1px sides miters diagonally through the corner radius and flares
       at both ends. */
    .docket {
      position: relative;
      background: linear-gradient(155deg, var(--surface) 55%, var(--alert-wash));
      border: 1px solid color-mix(in srgb, var(--alert) 28%, var(--rule));
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      align-self: start;
    }
    .docket::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--alert);
      z-index: 2;
    }
    @supports not (background: color-mix(in srgb, red 50%, blue)) {
      .docket { border-color: var(--rule-strong); }
    }
    .docket__head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 20px;
      background: var(--surface-2);
      border-bottom: 1px solid var(--rule);
    }
    .docket__head .icon { width: 17px; height: 17px; color: var(--alert); }
    .docket__head h2 {
      font-family: var(--font-sans);
      font-size: 12.5px;
      font-weight: 900;
      letter-spacing: .11em;
      text-transform: uppercase;
      color: var(--ink);
    }
    /* Horizontal padding lives on the rows, not the body, so the highlighted
       row can span full width without its own padding knocking its label and
       value out of the column grid the other rows share. */
    .docket__body { padding: 0; }

    .docket dl { display: block; }
    .docket .row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 15px 20px;
      border-bottom: 1px solid var(--rule);
    }
    .docket .row:last-of-type { border-bottom: none; }

    /* The restrained party is the card's key fact — banded full-bleed. The 3px
       accent plus 17px padding equals the 20px the other rows indent by, so
       every label still starts on one axis. */
    .docket .row--flag {
      padding: 16px 20px 16px 17px;
      border-bottom: none;
      border-left: 3px solid var(--alert);
      background: var(--alert-wash);
    }
    .docket dt {
      font-family: var(--font-sans);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--alert);
    }
    .docket dd {
      font-size: 15.5px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.5;
    }
    /* Case number reads as a reference code, so present it as one */
    .docket dd.mono {
      display: inline-block;
      justify-self: start;
      font-family: var(--font-mono);
      font-size: 13.5px;
      font-weight: 500;
      letter-spacing: -0.01em;
      padding: 6px 11px;
      border: 1px solid var(--rule-strong);
      border-radius: 8px;
      background: var(--surface-2);
    }
    .docket__foot { padding: 18px 20px 20px; }

    /* ==========================================================================
       VERBATIM ORDER DOCUMENT
       ========================================================================== */
    .doc {
      max-width: 820px;
      margin-inline: auto;
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    .doc__head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 14px 20px;
      background: var(--surface-2);
      border-bottom: 1px solid var(--rule);
    }
    .doc__stamp {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .doc__stamp .icon { width: 14px; height: 14px; }
    .doc__meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }

    .doc__body { padding: 28px 22px 26px; position: relative; }
    @media (min-width: 900px) {
      .doc__body { padding: 34px 44px 34px 64px; }
      .doc__body::before {
        content: "";
        position: absolute;
        top: 0; bottom: 0; left: 44px;
        width: 1px;
        background: color-mix(in srgb, var(--crimson) 26%, transparent);
      }
    }

    .doc__body > h2 {
      font-size: clamp(1.4rem, 4.2vw, 1.9rem);
      margin-bottom: 14px;
    }
    .doc__intro { font-size: 15.5px; color: var(--ink-2); max-width: 72ch; }

    .verbatim {
      position: relative;
      margin: 26px 0 4px;
      padding: 24px 20px 24px 22px;
      background: var(--alert-wash);
      border: 1px solid color-mix(in srgb, var(--alert) 18%, transparent);
      border-left: 4px solid var(--alert);
      border-radius: 8px var(--r) var(--r) 8px;
      font-family: var(--font-serif);
      font-size: clamp(15.5px, 2.4vw, 17.5px);
      line-height: 1.78;
      color: var(--ink);
    }
    .verbatim strong {
      font-weight: 700;
      color: var(--alert-hover);
    }
    html.dark .verbatim strong { color: var(--alert); }
    .verbatim::after {
      content: "";
      display: none;
      position: absolute;
      right: 18px; bottom: 16px;
      width: 46px; height: 46px;
      border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
      border-radius: 50%;
      opacity: .55;
      pointer-events: none;
      background:
        radial-gradient(circle at center, transparent 58%, color-mix(in srgb, var(--gold) 14%, transparent) 59%);
    }
    @media (min-width: 900px) {
      .verbatim { padding: 30px 96px 30px 30px; }
      .verbatim::after { display: block; }
    }
    @supports not (background: color-mix(in srgb, red 50%, blue)) {
      .verbatim::after { display: none !important; }
    }

    .particulars {
      display: grid;
      gap: 0;
      margin-top: 26px;
      border: 1px solid var(--rule);
      border-radius: var(--r);
      overflow: hidden;
    }
    .particulars > div { padding: 16px 18px; background: var(--surface); }
    .particulars > div + div { border-top: 1px solid var(--rule); }
    .particulars .k {
      display: block;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--alert);
      margin-bottom: 6px;
    }
    .particulars .v { font-size: 15.5px; color: var(--ink); line-height: 1.6; }

    .doc__foot { margin-top: 26px; }

    /* ==========================================================================
       SCANNED PAGES
       ========================================================================== */
    .scans { display: grid; gap: 22px; }

    .scan {
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      transition: box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
    }
    .scan:hover { box-shadow: var(--shadow-lg); border-color: var(--rule-strong); transform: translateY(-3px); }

    /* Fixed-height mount board: predictable card size, no CLS, full page in the
       lightbox. Height is capped rather than driven by the scan's own ratio. */
    .scan__frame {
      position: relative;
      display: block;
      width: 100%;
      height: 340px;
      background: var(--surface-3);
      border-bottom: 1px solid var(--rule);
      overflow: hidden;
      cursor: zoom-in;
      padding: 14px 14px 0;
    }
    .scan__frame img {
      width: 100%; height: 100%;
      object-fit: contain;
      object-position: center top;
      background: #fff;
      box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .5);
      transition: transform .5s var(--ease);
    }
    .scan:hover .scan__frame img { transform: scale(1.015); }

    .scan__overlay {
      position: absolute;
      inset: auto 0 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 34px 14px 14px;
      background: linear-gradient(to top, rgba(13, 15, 18, .82), transparent);
      color: #fff;
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: .05em;
      opacity: 0;
      transition: opacity .22s var(--ease);
    }
    .scan__frame:hover .scan__overlay,
    .scan__frame:focus-visible .scan__overlay { opacity: 1; }
    .scan__overlay .icon { width: 15px; height: 15px; }

    .scan__seq {
      position: absolute;
      top: 12px; left: 12px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: .1em;
      color: #fff;
      background: rgba(13, 15, 18, .78);
      padding: 5px 9px;
      border-radius: 2px;
    }

    .scan__caption {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 16px 18px;
    }
    .scan__caption h3 { font-size: 16.5px; }
    .scan__caption .cite { display: block; margin-top: 4px; }

    /* ---------- Lightbox ---------- */
    .lightbox[hidden] { display: none; }
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(9, 11, 14, .93);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .22s var(--ease), visibility .22s var(--ease);
    }
    .lightbox.is-open { opacity: 1; visibility: visible; }
    .lightbox__inner { position: relative; max-width: min(940px, 100%); width: 100%; }
    .lightbox__inner img {
      width: 100%;
      max-height: 84vh;
      object-fit: contain;
      background: #fff;
      border-radius: 2px;
    }
    .lightbox__bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      color: rgba(255, 255, 255, .82);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .lightbox__close {
      width: 34px; height: 34px;
      display: grid; place-items: center;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: var(--r);
      color: #fff;
      transition: background-color .18s var(--ease);
    }
    .lightbox__close:hover { background: rgba(255, 255, 255, .12); }
    .lightbox__close .icon { width: 16px; height: 16px; }

    /* ==========================================================================
       PARTY / ADVISORY / DOCUMENTS / FAQ
       ========================================================================== */
    .party {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      padding: 28px 22px 26px;
      box-shadow: var(--shadow-md);
      max-width: 900px;
      overflow: hidden;
    }
    .party::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--alert);
    }
    .party__role {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--crimson);
    }
    .party__role .icon { width: 15px; height: 15px; }
    .party__name {
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 3.6vw, 1.5rem);
      font-weight: 700;
      color: var(--alert-hover);
      margin: 14px 0 16px;
      line-height: 1.25;
    }
    html.dark .party__name { color: var(--alert); }
    .party__body { font-size: 16px; line-height: 1.78; color: var(--ink-2); max-width: 70ch; }
    .party__body strong { color: var(--ink); }

    .advisories { display: grid; gap: 18px; }
    .advisory {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      padding: 26px 22px 26px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
    }
    .advisory::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--alert);
    }
    .advisory:hover {
      border-color: var(--rule-strong);
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
    .advisory__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 16px;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--rule);
    }
    .advisory__mark {
      width: 42px; height: 42px;
      display: grid; place-items: center;
      border: none;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(135deg, #d90429, #8d0801);
      box-shadow: 0 3px 10px rgba(217, 4, 41, .28);
    }
    .advisory__mark .icon { width: 19px; height: 19px; }
    .advisory__idx {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .12em;
      color: var(--ink-3);
    }
    .advisory h3 { font-size: 1.12rem; margin-bottom: 10px; }
    .advisory p { font-size: 14.5px; line-height: 1.72; }

    .docs { display: grid; gap: 14px; max-width: 880px; }
    .doc-row {
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      padding: 18px;
      box-shadow: var(--shadow-sm);
      transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
    }
    .doc-row:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .doc-row__main { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
    .doc-row__icon {
      width: 44px; height: 44px;
      flex: none;
      display: grid; place-items: center;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #d90429, #8d0801);
      color: #fff;
      box-shadow: 0 3px 10px rgba(217, 4, 41, .28);
    }
    .doc-row__icon .icon { width: 20px; height: 20px; }
    .doc-row h3 { font-size: 16.5px; margin-bottom: 5px; }
    /* Prose reads better in the UI face; mono is reserved for citations */
    .doc-row .cite {
      display: block;
      font-family: var(--font-sans);
      font-size: 13.5px;
      line-height: 1.55;
    }

    .faq {
      max-width: 900px;
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      background: var(--surface);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }
    .faq__item + .faq__item { border-top: 1px solid var(--rule); }
    .faq__q {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 18px;
      min-height: 60px;
      text-align: left;
      font-family: var(--font-sans);
      font-size: 15.5px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.45;
      transition: background-color .2s var(--ease);
    }
    .faq__q:hover { background: var(--surface-2); }
    .faq__sign {
      flex: none;
      width: 28px; height: 28px;
      display: grid; place-items: center;
      border: 1px solid var(--rule-strong);
      border-radius: 50%;
      color: var(--primary);
      margin-top: 2px;
      transition: transform .28s var(--ease), background-color .2s var(--ease);
    }
    .faq__sign .icon { width: 14px; height: 14px; }
    .faq__item.is-open .faq__sign { transform: rotate(45deg); background: var(--primary-wash); }
    .faq__a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .34s var(--ease);
    }
    .faq__a p {
      padding: 0 18px 22px;
      font-size: 16px;
      line-height: 1.75;
      color: var(--ink-2);
      max-width: 74ch;
    }

    /* ==========================================================================
       STICKY ADVISORY + FOOTER
       ========================================================================== */
    /* Fixed advisory bar. Single row on every viewport; its measured height is
       written back to --sticky-h so body padding always clears it exactly. */
    .sticky-bar {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 90;
      background: #8d0801;
      color: #fff;
      border-top: 1px solid rgba(255, 255, 255, .16);
      box-shadow: 0 -6px 22px -10px rgba(0, 0, 0, .5);
      padding-bottom: env(safe-area-inset-bottom);
    }
    html.dark .sticky-bar { background: #5c0a10; }

    .sticky-bar__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px var(--gutter);
      max-width: var(--maxw);
      margin-inline: auto;
      text-align: left;
    }
    .sticky-bar__text {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: .005em;
    }
    .sticky-bar .icon { width: 15px; height: 15px; flex: none; }
    .sticky-bar__text .icon { display: none; }
    .sticky-bar a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      flex: none;
      min-height: 44px;
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      padding: 8px 13px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .42);
      border-radius: 2px;
      transition: background-color .18s var(--ease);
      white-space: nowrap;
    }
    .sticky-bar a:hover { background: rgba(255, 255, 255, .22); }
    .sticky-bar a:focus-visible { outline-color: #fff; }
    .sticky-bar[hidden] { display: none; }
    .sticky-bar__close {
      flex: none;
      width: 40px; height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
      transition: background-color .18s var(--ease);
    }
    .sticky-bar__close:hover { background: rgba(255, 255, 255, .18); }
    .sticky-bar__close:focus-visible { outline-color: #fff; }
    .sticky-bar__close .icon { width: 15px; height: 15px; }

    /* Recall pill — restores the advisory bar after it is minimised */
    .sticky-recall {
      position: fixed;
      right: 12px;
      bottom: calc(12px + env(safe-area-inset-bottom));
      z-index: 89;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 46px;
      padding: 11px 16px 11px 14px;
      border-radius: var(--r-pill);
      background: linear-gradient(135deg, #d90429, #8d0801);
      color: #fff;
      font-family: var(--font-sans);
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
      line-height: 1;
      border: 1px solid rgba(255, 255, 255, .26);
      box-shadow: 0 12px 28px -10px rgba(217, 4, 41, .65);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px) scale(.94);
      transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease), filter .18s var(--ease);
    }
    .sticky-recall.is-shown { opacity: 1; visibility: visible; transform: none; }
    .sticky-recall:hover { filter: brightness(1.12); }
    .sticky-recall:active { transform: scale(.97); }
    .sticky-recall:focus-visible { outline-color: #fff; }
    .sticky-recall .icon { width: 17px; height: 17px; }

    .site-footer {
      background: #0f172a;
      color: #a8b3c7;
      border-top: 3px solid #1e3a8a;
      padding: 50px 0 42px;
    }
    html.dark .site-footer { background: #070b12; }
    .footer__top {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 22px;
      border-bottom: 1px solid #1f2a3f;
    }
    .footer__seal {
      width: 36px; height: 36px;
      border-radius: var(--r);
      display: grid; place-items: center;
      border: 1px solid #2c3a52;
      color: #dbe3f0;
      flex: none;
    }
    .footer__seal .icon { width: 20px; height: 20px; stroke-width: 1.5; }
    .footer__top h2 {
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #f2f5fa;
    }
    .footer__disclaimer {
      margin-top: 24px;
      font-size: 14.5px;
      line-height: 1.78;
      max-width: 78ch;
    }
    .footer__disclaimer strong { color: #eaf0f8; }
    .footer__legal {
      margin-top: 26px;
      padding-top: 20px;
      border-top: 1px solid #1f2a3f;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .04em;
      color: #8b98ae;
    }

    /* ==========================================================================
       MOTION
       ========================================================================== */
    html.js .reveal {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .6s var(--ease), transform .6s var(--ease);
    }
    html.js .reveal.is-in { opacity: 1; transform: none; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
      }
      html.js .reveal { opacity: 1; transform: none; }
    }

    /* ==========================================================================
       BREAKPOINTS
       ========================================================================== */
    /* Very narrow phones: reclaim width for the advisory text so it wraps to
       fewer lines and the bar stays short. */
    @media (max-width: 400px) {
      .sticky-bar__inner { gap: 9px; padding: 8px var(--gutter); }
      .sticky-bar__text { font-size: 11.5px; }
      .sticky-bar a { padding: 8px 11px; font-size: 11.5px; }
      .sticky-bar__close { width: 38px; height: 38px; }
    }

    @media (min-width: 600px) {
      .scan__caption { flex-direction: row; align-items: center; justify-content: space-between; }
      .doc-row { flex-direction: row; align-items: center; justify-content: space-between; }
      .doc-row .btn { flex: none; }
      .particulars { grid-template-columns: 1fr 1fr; }
      .particulars > div + div { border-top: none; border-left: 1px solid var(--rule); }
      .docket .row { grid-template-columns: 92px 1fr; gap: 12px; align-items: start; }
      .docket dt { padding-top: 4px; }
    }

    @media (min-width: 768px) {
      :root { --gutter: 32px; }
      .section { padding: 60px 0; }
      /* Re-assert after the shorthand above, which would otherwise reset it */
      .section--tight { padding-top: 0; }
      .alert-strip__inner { font-size: 12px; padding: 10px var(--gutter); }
      .scans { grid-template-columns: repeat(2, 1fr); gap: 28px; }
      .scan__frame { height: 460px; padding: 20px 20px 0; }
      .advisories { grid-template-columns: repeat(3, 1fr); }
      .hero { padding: 44px 0 48px; }
      .hero__actions .btn { flex: 0 1 auto; }
      .sticky-bar__inner { justify-content: center; gap: 18px; padding: 11px var(--gutter); }
      .sticky-bar__text { font-size: 14px; }
      .sticky-bar__text .icon { display: block; }
      .sticky-bar a { font-size: 13px; }
    }

    @media (min-width: 1024px) {
      .masthead__cta { display: inline-flex; }
      .masthead__inner { flex-wrap: nowrap; min-height: 74px; padding-top: 0; gap: 20px; }
      .nav { order: 0; flex: 0 1 auto; margin-top: 0; border-top: none; overflow: visible; }
      .nav ul { gap: 4px; }
      .nav a { padding: 9px 13px; font-size: 14px; border-radius: var(--r-pill); }
      .nav a:hover { background: var(--surface-2); }
      .nav a.is-active::after { left: 13px; right: 13px; bottom: 2px; }
      html { scroll-padding-top: 100px; }
      .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 56px; align-items: start; }
      .hero { padding: 38px 0 56px; }
    }

    /* ==========================================================================
       PRINT — legal notices get filed on paper
       ========================================================================== */
    @media print {
      .masthead, .sticky-bar, .sticky-recall, .lightbox, .hero__actions, .doc__foot,
      .scan__overlay, .doc-row .btn, .docket__foot, .icon-btn { display: none !important; }
      body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
      .section { padding: 14pt 0; page-break-inside: avoid; }
      .doc, .docket, .party, .advisory, .scan { box-shadow: none; border: 1px solid #999; }
      .faq__a { max-height: none !important; }
      .faq__a p { padding-bottom: 12pt; }
      a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
    }