/* ==========================================================================
   Tuvalu Gaming Licensing: editorial grid system
   ---------------------------------------------------------------------------
   The previous build failed for a structural reason, not a stylistic one: every
   section was a centred container in a vertical stack, with text/image splits
   alternating sides. That rhythm is the tell, whatever the styling.

   This system is built on a 12-column editorial grid instead. Content is placed
   asymmetrically and differently in each section, elements break full-bleed,
   metadata pins to the margin, and photography is duotoned into the palette so
   stock images read as art direction rather than decoration.

   Platform features used deliberately: OKLCH colour, container queries, :has(),
   subgrid, cross-document view transitions, scroll-driven progress, field-sizing,
   text-wrap balance/pretty, dynamic viewport units.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* OKLCH: perceptually uniform, so tints and mixes stay even. */
  /* Two colours carry the site — deep ocean blue and white — with gold kept for
     accents only: the seal, the current item, the rule under an active link.
     The blue is the flag's ground taken down to ocean depth so it holds white
     text at full contrast; the gold is the gold of the nine stars. */
  --ink:      oklch(0.268 0.072 243);   /* deep ocean blue — the primary */
  --ink-2:    oklch(0.398 0.058 243);
  --ink-3:    oklch(0.500 0.046 243);
  --ink-4:    oklch(0.538 0.040 243);   /* measured against white and the tint */

  --paper:    oklch(1 0 0);             /* white */
  --paper-2:  oklch(0.973 0.010 240);
  --paper-3:  oklch(0.944 0.016 240);

  --rule:     oklch(0.893 0.014 240);
  --rule-2:   oklch(0.815 0.020 240);
  --rule-ink: oklch(1 0 0 / 0.22);

  --accent:   oklch(0.512 0.108 74);    /* gold, dark enough to set text on white */
  --accent-2: oklch(0.845 0.148 88);    /* the star gold, for use on the blue */
  --accent-fg: oklch(0.22 0.060 243);
  --sky:      oklch(0.62 0.085 235);    /* the flag's ground, used sparingly */

  --alert:    oklch(0.46 0.15 30);

  --f-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-2xs: 0.6875rem;
  --t-xs:  0.75rem;
  --t-sm:  0.8125rem;
  --t-base: 0.9375rem;
  --t-md:  1.0625rem;
  --t-lg:  clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  --t-xl:  clamp(1.3rem, 1.16rem + 0.6vw, 1.625rem);
  --t-2xl: clamp(1.5rem, 1.28rem + 1.05vw, 2.25rem);
  --t-3xl: clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem);

  --gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  --pad: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --maxw: 1560px;

  /* Height of the sticky header, rewritten by main.js from the measured box.
     Anchor offsets and the mobile menu both depend on it. */
  --hh: 5.5rem;
}

/* The small end of the scale is set for a desktop reading distance. On a phone
   held at arm's length the same values fall below 12px, so the bottom four
   steps move up one notch. Measured, not eyeballed: the mono meta line was
   rendering at 11px on every page. */
@media (max-width: 900px), (pointer: coarse) {
  :root {
    --t-2xs: 0.75rem;
    --t-xs:  0.8125rem;
    --t-sm:  0.875rem;
    --t-base: 1rem;
  }
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hh) + 1rem); }
body {
  font-family: var(--f-sans);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img, svg { display: block; max-width: 100%; height: auto; }
/* Russian compounds are long enough to blow out a narrow grid column. */
body { overflow-wrap: break-word; }
h1, h2, h3, h4 { overflow-wrap: anywhere; hyphens: auto; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.05; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

.skip { position: absolute; left: -9999px; z-index: 999; background: var(--ink); color: var(--paper); padding: .75rem 1.25rem; }
.skip:focus { left: 0; top: 0; }

/* Cross-document view transitions — page changes read as one continuous surface. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
.site-header { view-transition-name: header; }
.site-footer { view-transition-name: footer; }

/* ------------------------------------------------------------- the grid */
/* One 12-column field spans the whole page. Every block places itself into it
   explicitly, so no two sections share the same shape. */
.field {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
/* Column 1 is the first *content* column: the page gutter is padding, not a
   grid track, so the numbered spans below mean what they say. */
.field > * { grid-column: 1 / -1; min-width: 0; }
.bleed, .all { grid-column: 1 / -1; }
.bleed { margin-inline: calc(var(--pad) * -1); }

/* Named spans. Asymmetry is declared, not accidental. */
.c1-2  { grid-column: 1 / 3; }
.c1-3  { grid-column: 1 / 4; }
.c1-4  { grid-column: 1 / 5; }
.c1-5  { grid-column: 1 / 6; }
.c1-6  { grid-column: 1 / 7; }
.c1-7  { grid-column: 1 / 8; }
.c1-8  { grid-column: 1 / 9; }
.c1-9  { grid-column: 1 / 10; }
.c1-12 { grid-column: 1 / 13; }
.c2-5  { grid-column: 2 / 6; }
.c2-6  { grid-column: 2 / 7; }
.c2-7  { grid-column: 2 / 8; }
.c2-8  { grid-column: 2 / 9; }
.c2-12 { grid-column: 2 / 13; }
.c3-9  { grid-column: 3 / 10; }
.c4-10 { grid-column: 4 / 11; }
.c4-12 { grid-column: 4 / 13; }
.c5-12 { grid-column: 5 / 13; }
.c6-12 { grid-column: 6 / 13; }
.c7-12 { grid-column: 7 / 13; }
.c8-12 { grid-column: 8 / 13; }
.c9-12 { grid-column: 9 / 13; }

@media (max-width: 900px) {
  .c1-3, .c1-4, .c1-5, .c1-6, .c1-7, .c1-8, .c1-9,
  .c1-2, .c2-5, .c2-6, .c2-7, .c2-8, .c2-12, .c3-9,
  .c4-10, .c4-12, .c5-12, .c6-12, .c7-12, .c8-12, .c9-12 { grid-column: 1 / 13; }

  /* Columns that sat next to each other are now on top of each other, and the
     field only ever declared a column gap — so without this the second column
     starts flush against the bottom of the first and reads as part of it. */
  .field > aside { margin-top: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
  .pinned + * { margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
}

/* Section rhythm is set by full-bleed rules, not by padding alone. */
.band { padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); position: relative; }
.band-sm { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); }
.hr { grid-column: 1 / -1; margin-inline: calc(var(--pad) * -1); height: 1px; background: var(--rule); }
.hr-heavy { grid-column: 1 / -1; height: 2px; background: var(--ink); }

/* Anything placed on ink must restate its colour: every component below is
   authored for paper, so inheriting silently produces dark-on-dark text. */
.ink { background: var(--ink); color: oklch(0.895 0.020 240); }
.ink h1, .ink h2, .ink h3, .ink h4 { color: var(--paper); }
.ink .meta, .site-footer .meta { color: oklch(0.760 0.035 240); }
.ink .lede { color: oklch(0.910 0.018 240); }
.ink .copy p, .ink .copy { color: oklch(0.895 0.020 240); }
.ink .copy strong { color: var(--paper); }
.ink .copy a { color: var(--paper); }
.ink .copy-2col { column-rule-color: var(--rule-ink); }
.ink .note { border-left-color: var(--rule-ink); color: oklch(0.870 0.022 240); }
.ink .index { border-top-color: var(--rule-ink); }
.ink .index li { border-bottom-color: var(--rule-ink); }
.footer-brand .brand-sub { color: oklch(0.735 0.035 240); }
.tint { background: var(--paper-2); }

/* --------------------------------------------------------------- type */
.d1 { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -.035em; line-height: .95; font-stretch: 105%; }
.d2 { font-size: var(--t-2xl); font-weight: 500; letter-spacing: -.028em; line-height: 1.0; }
.d3 { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.018em; line-height: 1.12; }
.d4 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }

.lede { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-2); font-weight: 400; }

.meta {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.meta-accent { color: var(--accent); }

.copy > * + * { margin-top: .9em; }
.copy p { max-width: 62ch; color: var(--ink-2); }
.copy a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.copy a:hover { text-decoration-thickness: 2px; }
.copy strong { font-weight: 600; color: var(--ink); }

/* Broadsheet setting — used once, where the text is long enough to earn it. */
.copy-2col { columns: 2; column-gap: var(--gap); column-rule: 1px solid var(--rule); }
.copy-2col p { max-width: none; break-inside: avoid-column; }
.copy-2col > * + * { margin-top: 0; margin-bottom: .9em; }
@media (max-width: 900px) { .copy-2col { columns: 1; } }

/* ------------------------------------------------------------ section head */
/* Number pins to the margin; the heading owns the field. */
/* One left edge for the whole page. The section number sits ABOVE the heading
   rather than in a margin column — hanging it beside the heading pushed every
   heading one column right while its content stayed at column 1, which read as
   two competing left edges on every section. */
.shead { grid-column: 1 / -1; }
.shead-kicker { display: block; margin-bottom: .55rem; }
.shead-body { max-width: 60ch; }
.shead-body .lede { margin-top: .75rem; max-width: 52ch; }

/* --------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .95rem 1.5rem;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .01em; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn::after { content: "↗"; font-family: var(--f-mono); font-size: .9em; }
/* Hover lights the button to the star gold and drops the label to ink. Muddy
   bronze-on-navy was the previous behaviour and it read as a disabled state
   rather than as a response. */
.btn:hover, .btn:focus-visible { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink); }
.btn:active { background: oklch(0.775 0.135 88); border-color: oklch(0.775 0.135 88); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-line:hover, .btn-line:focus-visible { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--paper); border-color: oklch(1 0 0 / .45); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--accent-2); color: var(--ink); border-color: var(--accent-2); }
.btn-invert { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-invert:hover, .btn-invert:focus-visible { background: var(--accent-2); color: var(--ink); border-color: var(--accent-2); }
.btn-sm { padding: .65rem 1.05rem; font-size: var(--t-xs); }
.btn-sm::after { content: none; }

.tlink {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid currentColor; padding-bottom: .25rem;
}
.tlink::after { content: "→"; }
.tlink:hover { color: var(--accent); }

/* ---------------------------------------------------------- art direction */
/* Every photograph is duotoned into the palette, so supplied stock reads as a
   deliberate system rather than as whatever was to hand. */
.duo { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.duo img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
/* Both layers must paint ABOVE the image. ::before is a child of .duo, so by
   default it renders under in-flow content and the photo hides it — the tint
   silently degrades to plain greyscale. */
.duo::before, .duo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* lighten/darken only clamp the ends of the range, so a mid-tone photograph
   passes through as plain greyscale. multiply(highlight) then screen(shadow)
   remaps the whole tonal range and gives an actual duotone. */
.duo::before { z-index: 1; background: oklch(0.955 0.022 240); mix-blend-mode: multiply; }
.duo::after  { z-index: 2; background: oklch(0.315 0.080 243); mix-blend-mode: screen; }
.duo-full { aspect-ratio: 21 / 8; }
.duo-tall { aspect-ratio: 4 / 3; }
.duo-wide { aspect-ratio: 16 / 10; }
@media (max-width: 900px) { .duo-tall { aspect-ratio: 16 / 10; } }

figure figcaption {
  margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4);
}
.ink figcaption { border-top-color: var(--rule-ink); color: oklch(0.775 0.030 240); }

/* ---------------------------------------------------------------- header */
.utility {
  background: var(--ink); color: oklch(0.800 0.028 240);
  font-family: var(--f-mono); font-size: var(--t-2xs);
  letter-spacing: .07em; text-transform: uppercase;
}
.utility-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; grid-column: 1 / -1; }
.utility a { display: inline-flex; align-items: center; min-height: 1.75rem;
             color: var(--paper); border-bottom: 1px solid var(--rule-ink); }
.utility a:hover { border-bottom-color: var(--paper); }
/* The badge is repeated in the hero, the footer and the page copy. On a phone
   it wrapped to two lines above the fold and pushed everything down, so it is
   dropped rather than shrunk. */
@media (max-width: 900px) { .utility-right { display: none; } .utility-in { justify-content: center; } }
@media (max-width: 760px) { .utility { display: none; } }

.site-header { position: sticky; top: 0; z-index: 100; isolation: isolate; background: var(--paper); border-bottom: 1px solid var(--rule); }
.header-in { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.7vw, 2rem); min-height: 4.5rem; }
@media (max-width: 1023px) { .header-in { min-height: 3.875rem; } }

.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; min-width: 0; }
.brand img { width: 30px; height: 30px; flex: none; object-fit: cover; object-position: left center; }
.brand-name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.brand-sub { display: block; font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: clamp(0.95rem, 0.1rem + 1.1vw, 1.75rem); }
.nav > li { position: relative; }
.nav > li > a {
  display: block; padding-block: 1.6rem;
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
  border-bottom: 1px solid transparent; margin-bottom: -1px;
}
.nav > li > a:hover { color: var(--ink); }
.nav > li > a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.submenu {
  position: absolute; top: 100%; left: -1rem; min-width: 17rem;
  background: var(--paper); border: 1px solid var(--rule); padding: .35rem 0; z-index: 30;
  opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility .14s;
}
.nav li:hover > .submenu, .nav li:focus-within > .submenu { opacity: 1; visibility: visible; }
.submenu a { display: block; padding: .6rem 1rem; font-size: var(--t-base); color: var(--ink-2); }
.submenu a:hover { background: var(--paper-2); color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 1.25rem; flex: none; }
/* ---------------------------------------------------- language selector */
/* A two-letter code is an abbreviation of a word the reader may not know. The
   control names each language in that language — Русский, not RU — with the
   code kept as a sub-label for scanning. One list markup serves the header
   dropdown, the mobile menu and the footer. */
.langsel { position: relative; }
.langsel-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding-inline: .7rem;
  border: 1px solid var(--rule); cursor: pointer; list-style: none;
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
  transition: border-color .16s ease, color .16s ease;
}
.langsel-btn::-webkit-details-marker { display: none; }
.langsel-btn:hover { border-color: var(--ink); color: var(--ink); }
.langsel[open] > .langsel-btn { border-color: var(--ink); color: var(--ink); }
.ls-caret {
  width: .45rem; height: .45rem; margin-left: .1rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  rotate: 45deg; translate: 0 -2px; transition: rotate .18s ease, translate .18s ease;
}
.langsel[open] .ls-caret { rotate: 225deg; translate: 0 1px; }
/* Room for the full name on a wide header, the code alone once it is tight. */
.ls-full { display: none; }
@media (min-width: 1240px) { .ls-full { display: inline; } .ls-abbr { display: none; } }

.langsel-panel {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
  min-width: 13.5rem; background: var(--paper);
  border: 1px solid var(--ink); padding: .55rem 0 .35rem;
  box-shadow: 0 12px 28px oklch(0.255 0.065 243 / .10);
}
.langsel-head {
  padding: 0 .9rem .5rem; margin-bottom: .35rem; border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}

.langsel-list li + li { border-top: 1px solid var(--rule); }
.langsel-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: 2.75rem; padding: .5rem .9rem;
  font-size: var(--t-base); color: var(--ink-2);
}
.langsel-list a:hover { background: var(--paper-2); color: var(--ink); }
.ls-name { letter-spacing: -.01em; }
.ls-tag {
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em;
  color: var(--ink-4);
}
/* The current language is marked with a rule and a tick, not colour alone. */
.langsel-list a[aria-current] { color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.langsel-list a[aria-current] .ls-tag { color: var(--accent); }
.langsel-list a[aria-current] .ls-name::after {
  content: "\2713"; margin-left: .55rem; color: var(--accent); font-weight: 400;
}
.langsel-panel .langsel-list li:first-child { border-top: 0; }

/* menu variant: full-width rows, already inside a panel */
.m-langs { margin-top: .1rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.m-langs a { padding-inline: 0; min-height: 3.25rem; font-size: var(--t-md); }
.m-langs a:hover { background: transparent; }
.m-langs a[aria-current] { box-shadow: none; }

/* footer variant: on ink */
.footer-langs .langsel-list { display: flex; gap: 0; flex-wrap: wrap; }
.footer-langs .langsel-list li + li { border-top: 0; border-left: 1px solid var(--rule-ink); }
.footer-langs .langsel-list a {
  min-height: 2.75rem; padding: .35rem .9rem; gap: .6rem;
  font-size: var(--t-sm); color: oklch(0.800 0.028 240);
}
.footer-langs .langsel-list li:first-child a { padding-left: 0; }
.footer-langs .langsel-list li:last-child a { padding-right: 0; }
.footer-langs .langsel-list a:hover { background: transparent; color: var(--paper); }
.footer-langs .ls-tag { color: oklch(0.755 0.032 240); }   /* 4.9:1 on ink — measured */
.footer-langs .langsel-list a[aria-current] { color: var(--paper); box-shadow: none; }
/* Wrapped onto a second line, a left rule has nothing to its left — so on the
   narrowest screens the row becomes a ruled column instead. */
@media (max-width: 560px) {
  .footer-langs .langsel-list { flex-direction: column; }
  .footer-langs .langsel-list li + li { border-left: 0; border-top: 1px solid var(--rule-ink); }
  .footer-langs .langsel-list a { padding-left: 0; }
}
.footer-langs .langsel-list a[aria-current] .ls-name::after { content: none; }
.footer-langs .langsel-list a[aria-current] .ls-name {
  border-bottom: 1px solid var(--accent-2); padding-bottom: .15rem;
}
.footer-langs .langsel-list a[aria-current] .ls-tag { color: var(--accent-2); }

.burger { display: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--rule); background: transparent; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.burger span { display: block; width: 16px; height: 1px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--ink); transition: transform .2s ease, top .2s ease; }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
/* Full navigation returns at 1024, so a tablet held in landscape gets the real
   menu instead of a burger. Below that the header keeps brand, language and
   burger only. */
@media (max-width: 1023px) { .nav, .header-cta { display: none; } .burger { display: inline-flex; } }
@media (max-width: 420px) { .brand-sub { display: none; } }

/* --- mobile navigation ---------------------------------------------------
   The panel is anchored to the header's measured bottom edge (--hh, written by
   main.js at open time). It was previously a full-screen overlay with a guessed
   6rem of top padding, and because the header floats above it at z-index 100
   the first menu item was sitting underneath the header bar. */
.mobile-nav {
  position: fixed; left: 0; right: 0; top: var(--hh, 3.875rem); bottom: 0;
  z-index: 95; background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: none;
}
.mobile-nav.open { display: block; }
/* Fade only. The panel used to slide down 8px on open, which meant that for the
   length of the animation — and for good, if the animation did not run — its
   top edge sat 8px above the header and a sliver of the page showed through. */
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav.open { animation: mnav-in .16s ease-out both; }
  @keyframes mnav-in { from { opacity: 0; } to { opacity: 1; } }
}
.mnav-in { padding: .5rem var(--pad) 3rem; max-width: var(--maxw); margin-inline: auto; }
.mnav-list > li { border-bottom: 1px solid var(--rule); }
.mnav-list > li > a {
  display: flex; align-items: center; min-height: 3.5rem; padding-block: .8rem;
  font-size: var(--t-xl); font-weight: 500; letter-spacing: -.02em; color: var(--ink);
}
.mnav-list > li > a[aria-current] { color: var(--accent); }
.mnav-list .sub { padding: .1rem 0 .9rem .95rem; margin-left: .05rem; border-left: 1px solid var(--rule); }
.mnav-list .sub a {
  display: flex; align-items: center; min-height: 2.75rem;
  font-size: var(--t-base); color: var(--ink-3);
}
.mnav-list .sub a[aria-current] { color: var(--accent); }
.btn-block { display: flex; width: 100%; justify-content: center; }
.m-cta { margin-top: 1.75rem; }
.m-foot { margin-top: 2.25rem; padding-top: 1.35rem; border-top: 1px solid var(--rule); }
.m-langs-label {
  display: block; margin-bottom: .65rem;
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
.m-note {
  margin-top: 1.6rem; font-family: var(--f-mono); font-size: var(--t-2xs);
  line-height: 1.65; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4);
}
html:has(body.nav-open) { overflow: hidden; }
body.nav-open { overflow: hidden; overscroll-behavior: none; }
/* Locking the page with overflow takes the root out of the scroll chain, and a
   sticky element inside a root that no longer scrolls falls back to its static
   position — so on a scrolled page the header, and with it the close button,
   jumped off the top of the screen the instant the menu opened. Pin the header
   for as long as the menu is up. */
body.nav-open .site-header { position: fixed; top: 0; left: 0; right: 0; }

/* -------------------------------------------------------------- cover */
/* The masthead sits on the photograph. The image is darkened by its own duotone
   rather than by a scrim gradient, so the type has a flat, measurable backdrop. */
.cover-img { position: relative; isolation: isolate; background: var(--ink); color: oklch(0.915 0.018 240); }
.cover-bg { position: absolute; inset: 0; z-index: 0; }
.cover-bg .duo { width: 100%; height: 100%; }
.cover-img > .field { position: relative; z-index: 1; }
.cover-img h1 { color: var(--paper); }
.cover-img .lede { color: oklch(0.930 0.016 240); }
.cover-img .meta { color: oklch(0.845 0.024 240); }
.cover-img .meta-bright { color: var(--paper); }
.cover-img .cover-strip { border-bottom-color: var(--rule-ink); }
.cover-credit { margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); text-align: right; }
.duo-dark::before { background: oklch(0.470 0.030 240); }
.duo-dark::after  { background: oklch(0.175 0.055 243); }

.cover { padding-top: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.cover-strip {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--ink); flex-wrap: wrap;
}
.cover h1 { grid-column: 1 / 12; margin-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0; }
@media (max-width: 900px) { .cover h1 { grid-column: 1 / 13; } }

.cover-foot { grid-column: 1 / -1; display: grid; column-gap: var(--gap); grid-template-columns: subgrid; align-items: end; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); row-gap: 1.5rem; }
.cover-lede { grid-column: 1 / 6; }
.cover-actions { grid-column: 8 / 13; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
@media (max-width: 900px) { .cover-lede, .cover-actions { grid-column: 1 / 13; justify-content: flex-start; } }

/* The register: full-bleed key/value strip, container-queried. */
.register { grid-column: 1 / -1; margin-inline: calc(var(--pad) * -1); border-bottom: 1px solid var(--rule); container-type: inline-size; }
.register dl { display: grid; grid-template-columns: repeat(4, 1fr); }
.register .row { padding: 1rem var(--pad) 1.15rem; border-left: 1px solid var(--rule); }
.register .row:first-child { border-left: 0; }
.register dt { margin-bottom: .6rem; }
.register dd { margin: 0; font-size: var(--t-lg); font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.register dd small { display: block; margin-top: .35rem; font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); letter-spacing: 0; line-height: 1.45; }
@container (max-width: 900px) {
  .register dl { grid-template-columns: repeat(2, 1fr); }
  .register .row:nth-child(odd) { border-left: 0; }
  .register .row:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@container (max-width: 520px) { .register dl { grid-template-columns: 1fr; } .register .row { border-left: 0; border-top: 1px solid var(--rule); } .register .row:first-child { border-top: 0; } }

/* ------------------------------------------------------------- page head */
.page-head { padding-top: clamp(1rem, 0.75rem + 1.2vw, 1.75rem); }
/* Photographic masthead: the crumb rule and the muted crumb colours have to be
   re-stated against ink, otherwise they inherit the paper palette and vanish. */
.page-head-img .crumbs { border-bottom-color: var(--rule-ink); }
.page-head-img .crumbs a { color: oklch(0.860 0.022 240); }
.page-head-img .crumbs a:hover { color: var(--paper); }
.page-head-img .crumbs .sep { color: oklch(0.735 0.035 240); }
.page-head-img .crumbs .meta-accent { color: var(--paper); }
.page-head-img .page-head { padding-block: clamp(1.25rem, 1rem + 1.6vw, 2.5rem); }
.page-head-img .cover-credit { margin-top: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem); }
.crumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .75rem .5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.crumbs a, .crumbs > span { display: inline-flex; align-items: center; min-height: 1.75rem; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { color: var(--ink-4); }
.page-head h1 { grid-column: 1 / 11; font-size: var(--t-2xl); margin-block: clamp(1rem, 0.75rem + 1.2vw, 1.75rem) 0; }
.page-head .lede { grid-column: 1 / 7; margin-top: 1rem; }
@media (max-width: 900px) { .page-head h1, .page-head .lede { grid-column: 1 / 13; } }

/* ---------------------------------------------------------------- panels */
/* Long passages set as an indexed matrix rather than a column of prose.
   Divided by hairlines and sharing edges — no radius, no shadow, no lift. */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.panel {
  padding: 1.15rem 1.75rem 1.35rem 0; border-bottom: 1px solid var(--rule);
}
.panel:nth-child(even) { border-left: 1px solid var(--rule); padding-left: 1.75rem; }
.panel p { color: var(--ink-2); font-size: var(--t-base); }
.panel:first-child p { font-size: var(--t-md); color: var(--ink); }
.panel a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.ink .panels { border-top-color: var(--rule-ink); }
.ink .panel { border-bottom-color: var(--rule-ink); }
.ink .panel:nth-child(even) { border-left-color: var(--rule-ink); }
.ink .panel p { color: oklch(0.895 0.020 240); }
.ink .panel:first-child p { color: var(--paper); }
.ink .panel a { color: var(--paper); }
@media (max-width: 780px) {
  .panels { grid-template-columns: 1fr; }
  .panel:nth-child(even) { border-left: 0; padding-left: 0; }
}

/* Opening sentence lifted out of a single long paragraph, set against the
   remainder rather than stacked above it — otherwise half the row sits empty. */
.statement-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start;
}
@media (max-width: 860px) { .statement-grid { grid-template-columns: 1fr; } }
.lead-line {
  font-size: var(--t-xl); font-weight: 500; letter-spacing: -.015em; line-height: 1.25;
  color: var(--ink); text-wrap: balance; padding-top: .9rem; border-top: 1px solid var(--ink);
}
.statement-grid .copy { padding-top: .9rem; border-top: 1px solid var(--rule); }
.ink .lead-line { color: var(--paper); border-top-color: var(--rule-ink); }
.ink .statement-grid .copy { border-top-color: var(--rule-ink); }

/* ------------------------------------------------------------ pinned meta */
/* A label that stays with you while the column beside it scrolls. */
.pinned { position: sticky; top: 7rem; align-self: start; }
@media (max-width: 900px) { .pinned { position: static; } }

/* -------------------------------------------------------------- register table */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .8rem 1.25rem .8rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table thead th { border-bottom: 1px solid var(--ink); padding-bottom: .75rem; }
.table tbody th { font-weight: 500; color: var(--ink); font-size: var(--t-md); width: 30%; }
.table td { color: var(--ink-3); font-size: var(--t-base); }
.table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.ink .table :is(th, td) { border-bottom-color: var(--rule-ink); }
.ink .table thead th { border-bottom-color: var(--rule-ink); }
.ink .table tbody th { color: var(--paper); }
.ink .table td { color: oklch(0.845 0.024 240); }

/* -------------------------------------------------------------- index rows */
/* Directory pattern: bulleted rows, the rule above each one animating on hover. */
.index { border-top: 1px solid var(--ink); }
.index li { border-bottom: 1px solid var(--rule); }
.index .row {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--gap); align-items: baseline; padding: 1.1rem 0;
  transition: padding-left .28s cubic-bezier(.2,.7,.3,1);
}
.index .row:hover { padding-left: 1rem; }
.index .row:hover .d3 { color: var(--accent); }

.index .row-meta { display: flex; flex-wrap: wrap; gap: .7rem 1.25rem; margin-top: .6rem; }
@media (max-width: 640px) {
  .index .row { grid-template-columns: 1.5rem minmax(0, 1fr); }
  /* The row's action moved from a text link to a button; without naming it here
     it inherits the third column, which no longer exists at this width, and the
     label is crushed into ~34px. */
  .index .tlink, .index .row > .btn { grid-column: 2; margin-top: .9rem; }
  .index .row > .btn { justify-self: start; }
}

/* ------------------------------------------------------------ plain lists */
.cols { columns: 4; column-gap: var(--gap); }
.cols li { padding: .45rem 0; border-bottom: 1px solid var(--rule); font-size: var(--t-base); color: var(--ink); break-inside: avoid; }
.ink .cols li { border-bottom-color: var(--rule-ink); color: var(--paper); }
/* A short list of named things — covered activities, restricted markets. Laid
   out as a row that wraps, so four entries do not become three tall columns of
   mostly nothing. */
.taglist { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.taglist li { display: flex; align-items: baseline; gap: .55rem;
              padding: .5rem .95rem .55rem .8rem; border: 1px solid var(--rule-2);
              font-size: var(--t-base); color: var(--ink-2); }
.ink .taglist li { border-color: var(--rule-ink); }

/* One bullet shape for every list that used to be numbered: a small square in
   the accent, set on the text baseline rather than centred in its box. */
.bullet { display: block; width: .375rem; height: .375rem; background: var(--accent);
          margin-top: .55em; }
.ink .bullet, .cover-img .bullet { background: var(--accent-2); }

.cols-2 { columns: 2; }
@media (max-width: 860px) { .cols, .cols-2 { columns: 2; } }
@media (max-width: 560px) { .cols, .cols-2 { columns: 1; } }

.spec-sub {
  margin-top: 1.6rem; font-size: var(--t-md); font-weight: 600;
  letter-spacing: -.012em; color: var(--ink);
}
.spec-sub + .spec { margin-top: .9rem !important; }
.spec { border-top: 1px solid var(--ink); columns: 2; column-gap: var(--gap); }
@media (max-width: 700px) { .spec { columns: 1; } }
.spec li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); padding: .6rem 0; border-bottom: 1px solid var(--rule); font-size: var(--t-base); color: var(--ink-2); break-inside: avoid; }
@media (max-width: 760px) { .spec { columns: 1; } }

.note { border-left: 1px solid var(--ink-4); padding-left: 1.25rem; font-size: var(--t-base); color: var(--ink-3); max-width: 62ch; }
.note-alert { border-left-color: var(--alert); }
.note .meta { display: block; margin-bottom: .4rem; }


/* ------------------------------------------------------------ statute quote */
.lawquotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 860px) { .lawquotes { grid-template-columns: 1fr; } }
.lawquote { border-top: 1px solid var(--rule-ink); padding-top: 1.1rem; }
.lawquote blockquote p {
  font-size: var(--t-lg); line-height: 1.42; color: var(--paper);
  letter-spacing: -.008em; text-wrap: pretty;
}
.lawquote figcaption {
  margin-top: 1rem; padding-top: 0; border-top: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.25rem;
}
.lawquote cite {
  font-family: var(--f-mono); font-size: var(--t-2xs); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; color: oklch(0.800 0.028 240);
}
.lawquote .tlink { color: var(--paper); border-bottom-color: oklch(1 0 0 / .4); }
.lawquote .tlink:hover { color: var(--paper); border-bottom-color: var(--paper); }
.lawref-note { grid-column: 1 / -1; margin-top: 1.25rem; }

/* Record table: label column tighter, values allowed to breathe. */
.table-rec tbody th { width: 34%; vertical-align: top; }
.table-rec td { color: var(--ink-2); }
.table-rec code { font-family: var(--f-mono); font-size: .95em; }

/* Auto table layout lets a long unbroken word set the column width, which on a
   360px screen pushed the Russian license table past the viewport. Fixing the
   layout makes the columns obey the table instead of the content. */
@media (max-width: 620px) {
  .table { table-layout: fixed; }
  .table :is(th, td) { padding-right: .85rem; overflow-wrap: anywhere; }
  .table tbody th, .table-rec tbody th { width: 42%; }
}

/* --------------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: 1rem; padding: 1.05rem 0; cursor: pointer; list-style: none; font-size: var(--t-lg); font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--ink-4); justify-self: end; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { color: var(--accent); }
.faq .answer { padding-bottom: 1.2rem; color: var(--ink-3); max-width: 68ch; font-size: var(--t-base); }

/* ------------------------------------------------------------- legal text */
/* Reading progress, driven by scroll position with no script at all. */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: 0 50%; z-index: 200; scale: 0 1; animation: progress linear both; animation-timeline: scroll(root block); }
@keyframes progress { to { scale: 1 1; } }
@supports not (animation-timeline: scroll()) { .progress { display: none; } }

.law-toc { position: sticky; top: calc(var(--hh) + 1rem); align-self: start; max-height: calc(100dvh - var(--hh) - 2rem); overflow-y: auto; max-width: 12rem; }
@media (min-width: 1400px) { .law-toc { max-width: 13.5rem; } }
@media (max-width: 900px) { .law-toc { position: static; max-height: none; max-width: none; margin-bottom: 2rem; } }
.toc-head {
  padding-bottom: .7rem; border-bottom: 1px solid var(--ink);
  list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.toc-head::-webkit-details-marker { display: none; }
/* The chevron only appears where the disclosure actually does something. */
.toc-head::after { content: ""; }
/* Above the sidebar breakpoint the index is always open and the summary is a
   heading, not a control — say so, so a pointer never targets it. */
@media (min-width: 901px) { .toc-head { pointer-events: none; } }
@media (max-width: 900px) {
  .toc-head { cursor: pointer; min-height: 2.75rem; }
  .toc-head::after {
    content: "+"; font-family: var(--f-mono); font-size: 1.1em; color: var(--ink-4); line-height: 1;
  }
  .toc-d[open] > .toc-head::after { content: "\2212"; }
}
.toc-foot { padding-top: .7rem; }
.toc-list li { border-bottom: 1px solid var(--rule); }
.toc-list a {
  display: block; padding: .65rem .4rem .7rem .7rem; margin-left: -.7rem;
  border-left: 2px solid transparent;
  transition: border-color .18s ease, background .18s ease;
}
.toc-title { font-size: var(--t-sm); line-height: 1.3; color: var(--ink-2); }
.toc-list a:hover { background: var(--paper-2); border-left-color: var(--rule-2); }
.toc-list a:hover .toc-title { color: var(--ink); }
.toc-list a.is-current { border-left-color: var(--accent); background: var(--paper-2); }
.toc-list a.is-current .toc-title { color: var(--accent); font-weight: 600; }

.lawdoc { max-width: 70ch; }
.law-head { border-top: 2px solid var(--ink); padding-top: 1.25rem; margin-bottom: 2.5rem; }
.law-title { margin-top: 1rem; font-size: var(--t-lg); line-height: 1.4; color: var(--ink); }
.law-part { margin-top: 2.25rem; padding-top: 1rem; border-top: 1px solid var(--ink); scroll-margin-top: calc(var(--hh) + 1rem); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.law-part:first-of-type { margin-top: 0; }
.law-sec { margin-top: 1.4rem; scroll-margin-top: calc(var(--hh) + 1rem); }
.law-sec :is(h2, h3) { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem; font-size: var(--t-lg); font-weight: 600; letter-spacing: -.012em; }
.law-sec :is(h2, h3) .law-n { font-family: var(--f-mono); font-weight: 400; color: var(--ink-4); font-size: var(--t-base); padding-top: .18rem; }
.law-sec > :is(p, ol, dl) { margin-left: 3rem; }
.law-sec p { margin-top: .65rem; color: var(--ink-2); }
@media (max-width: 560px) { .law-sec :is(h2, h3) { grid-template-columns: 2.25rem minmax(0, 1fr); } .law-sec > :is(p, ol, dl) { margin-left: 0; } }
/* ------------------------------------------------ plain legal document
   The privacy policy. Set as ordinary prose — no section-number gutter, which
   is the one thing that separates it from .law-sec above. */
.legaldoc { max-width: 68ch; }
.legaldoc > .legal-sec:first-child { margin-top: 0; }
.legal-sec { margin-top: 2.4rem; }
.legal-sec h2 {
  font-size: var(--t-lg); font-weight: 600; letter-spacing: -.014em;
  line-height: 1.25; color: var(--ink);
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule);
}
.legal-sec p { margin-top: .9rem; color: var(--ink-2); line-height: 1.65; }
.legal-sec a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.legal-sec a:hover { color: var(--ink); }
@media (max-width: 700px) {
  .legaldoc { max-width: none; }
  .legal-sec { margin-top: 2rem; }
}

.law-list { margin-top: .8rem; counter-reset: li; }
.law-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); margin-top: .5rem; color: var(--ink-2); counter-increment: li; }
.law-list li::before { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink-4); }
.law-alpha li::before { content: "(" counter(li, lower-alpha) ")"; }
.law-num li::before { content: "(" counter(li) ")"; }
.law-defs dt { font-weight: 600; color: var(--ink); margin-top: 1rem; }
.law-defs dd { margin: .2rem 0 0; color: var(--ink-2); }

.law-scans { margin-top: 3.5rem; border-top: 1px solid var(--ink); }
.law-scans summary { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; cursor: pointer; list-style: none; }
.law-scans summary::-webkit-details-marker { display: none; }
.law-scans summary::after { content: "+"; font-family: var(--f-mono); color: var(--ink-4); }
.law-scans[open] summary::after { content: "−"; }
.docviewer { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--gap); padding-bottom: 2rem; }
.docpage { border: 1px solid var(--rule); cursor: zoom-in; position: relative; background: var(--paper); }
.docpage:hover { border-color: var(--ink); }
.docpage img { width: 100%; }
.docpage .pno { position: absolute; right: 0; bottom: 0; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: var(--t-2xs); padding: .15rem .4rem; }

.lightbox { position: fixed; inset: 0; z-index: 300; background: oklch(0.255 0.065 243 / .97); display: none; place-items: center; padding: clamp(1rem, 0.4rem + 2.4vw, 2rem); }
.lightbox.open { display: grid; }
.lightbox img { max-width: min(100%, 860px); max-height: 82dvh; }
.lightbox button {
  position: absolute; display: grid; place-items: center;
  background: oklch(0.255 0.065 243 / .6); border: 1px solid var(--rule-ink); color: var(--paper);
  width: 2.75rem; height: 2.75rem; cursor: pointer; font-family: var(--f-mono); font-size: 1.15rem;
}
.lightbox button:hover { background: var(--paper); color: var(--ink); }
.lightbox .lb-close { top: 1rem; right: 1rem; }
.lightbox .lb-prev { left: .75rem; top: 50%; translate: 0 -50%; }
.lightbox .lb-next { right: .75rem; top: 50%; translate: 0 -50%; }
.lightbox .lb-count { position: absolute; bottom: 1.5rem; left: 50%; translate: -50% 0; font-family: var(--f-mono); font-size: var(--t-xs); color: oklch(0.790 0.030 240); }

/* -------------------------------------------------------------------- form */
.form-block { border-top: 2px solid var(--ink); padding-top: 2rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.f { margin-bottom: 1.15rem; }
.f label { display: block; margin-bottom: .5rem; }
.form-block :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea, select) {
  width: 100%; padding: .8rem 0; background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  font-family: inherit; font-size: var(--t-md); color: var(--ink);
  transition: border-color .18s ease;
}
.form-block :is(input, textarea, select):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
  border-bottom-color: var(--accent);
}
.form-block :is(input, textarea, select):focus { border-bottom-color: var(--accent); }
.form-block textarea { min-height: 6rem; resize: vertical; field-sizing: content; }
.form-block label, .form-block .srfm-block label {
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4);
}
.form-block :is(button[type="submit"], input[type="submit"], .srfm-button) {
  display: inline-flex; align-items: center; gap: .75rem; padding: .95rem 1.5rem;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0;
  font-family: inherit; font-size: var(--t-sm); font-weight: 500; line-height: 1; cursor: pointer; box-shadow: none;
  transition: background .18s ease, border-color .18s ease;
}
.form-block :is(button[type="submit"], input[type="submit"], .srfm-button):hover { background: var(--accent); border-color: var(--accent); }
.form-block :is(.srfm-error-message, .srfm-error) { color: var(--alert); font-size: var(--t-sm); }
.form-note { margin-top: 1rem; font-size: var(--t-sm); color: var(--ink-4); }

.aside-block + .aside-block { margin-top: 2.5rem; }
.aside-block h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.015em; margin-bottom: .85rem; }
.aside-list { margin-top: 1.25rem; border-top: 1px solid var(--rule); }
.aside-list li { padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.aside-list b { display: block; font-weight: 600; color: var(--ink); font-size: var(--t-base); }
.aside-list span { font-size: var(--t-sm); color: var(--ink-3); }
.colophon { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: oklch(0.800 0.028 240); font-size: var(--t-base); }
.footer-top { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--gap); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 3rem; row-gap: 2.5rem; }
.footer-brand { grid-column: 1 / 4; }
.footer-nav { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .footer-brand { grid-column: 1 / 13; } .footer-nav { grid-column: 1 / 13; } }
@media (max-width: 560px) { .footer-nav { grid-template-columns: 1fr; gap: 2rem; } }

.footer-brand .brand-name { display: block; color: var(--paper); font-size: var(--t-lg); }
.footer-brand p { margin-top: 1rem; max-width: 32ch; line-height: 1.55; }
.footer-designation { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule-ink); color: var(--paper); max-width: 32ch; }
.site-footer h3 { font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: oklch(0.735 0.035 240); padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1px solid var(--rule-ink); }
.site-footer li + li { margin-top: .55rem; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.footer-colophon { grid-column: 1 / -1; border-top: 1px solid var(--rule-ink); padding-block: 1.75rem; }
.footer-colophon p { font-size: var(--t-xs); line-height: 1.7; color: oklch(0.735 0.035 240); max-width: 96ch; }
.footer-bottom { grid-column: 1 / -1; border-top: 1px solid var(--rule-ink); padding-block: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

.devbar { background: var(--alert); color: var(--paper); text-align: center; font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase; padding: .5rem 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}

@media print {
  .site-header, .site-footer, .utility, .devbar, .law-scans, .progress { display: none; }
  body { color: #000; background: #fff; font-size: 10.5pt; }
  .duo::before, .duo::after { display: none; }
}

@media (pointer: coarse) {
  .form-block :is(button[type="submit"], input[type="submit"], .srfm-button) { font-size: 1rem; }
}

/* ------------------------------------------------------- touch ergonomics */
/* Keyed to the pointer, not the viewport: a tablet in landscape is 1180px wide
   and still driven by a fingertip. Everything a finger aims at gets to 44px,
   the small ones by growing their hit area rather than their type. */
@media (pointer: coarse) {
  .crumbs { padding-bottom: .35rem; }
  .crumbs a, .crumbs > span { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .crumbs .sep { min-height: 0; }
  .brand { min-height: 2.75rem; }
  .utility a { min-height: 2.75rem; }
  .btn-sm { padding-block: .95rem; }
  .tlink { padding-block: .6rem .45rem; }
  .index .row { padding-block: 1.25rem; }
  .faq summary { padding-block: 1.25rem; }
  .toc-list a { padding-block: .7rem; }
  .site-footer li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  /* Hover-revealed submenus cannot be opened by touch, and tapping the parent
     already goes to the section that lists the same children. */
  .submenu { display: none; }
}

/* ------------------------------------------------- statute reading aids */
/* Every section is addressable. The mark stays out of the way until the
   heading is hovered or the link is focused, so the page still reads as a
   document rather than a wiki. */
.sec-link {
  /* Padding grows the hit area to the 24px minimum; the matching negative
     margins keep the heading's metrics exactly where they were. */
  display: inline-block; padding: .35rem .45rem; margin: -.35rem -.35rem -.35rem .25rem;
  color: var(--rule-2); font-weight: 400;
  opacity: 0; transition: opacity .14s ease, color .14s ease;
}
.law-sec:hover .sec-link, .sec-link:focus-visible { opacity: 1; }
.sec-link:hover { color: var(--accent); }
@media (pointer: coarse) { .sec-link { display: none; } }
.law-sec:target { background: oklch(0.512 0.108 74 / .07); box-shadow: -0.75rem 0 0 oklch(0.512 0.108 74 / .07), 0.75rem 0 0 oklch(0.512 0.108 74 / .07); }

/* The regulation runs to 91 sections — roughly 27 screens on a phone. Once the
   reader is past the index there is otherwise no way back to it. */
.to-contents {
  position: fixed; right: var(--pad); bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 80; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 1rem;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 6px 20px oklch(0.255 0.065 243 / .22);
}
.to-contents[hidden] { display: none; }
.to-contents:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.ttc-arrow {
  width: .45rem; height: .45rem;
  border-left: 1px solid currentColor; border-top: 1px solid currentColor;
  rotate: 45deg; translate: 0 1px;
}
/* On a wide screen the contents are already pinned in the margin. */
@media (min-width: 901px) { .to-contents { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .to-contents { animation: ttc-in .18s ease-out both; }
  @keyframes ttc-in { from { opacity: 0; } to { opacity: 1; } }
}

/* A link inside a sentence that leaves the site says so, rather than surprising
   the reader with a new tab. Buttons and index rows already carry their own
   arrow, so they are excluded. */
:is(p, li, dd, td) a[target="_blank"]:not(.btn):not(.tlink):not(.row):not(.fw-row)::after {
  content: "\2197";
  display: inline-block; margin-left: .25em;
  font-family: var(--f-mono); font-size: .82em; vertical-align: baseline;
  color: var(--ink-4); text-decoration: none;
}
.ink :is(p, li, dd, td) a[target="_blank"]:not(.row):not(.fw-row)::after { color: oklch(0.790 0.030 240); }

/* ==========================================================================
   Lead-generation sections
   The regulatory register stays dominant: hairline rules, mono metadata,
   numbered sections. The marks are line drawings in the same weight as the
   rules, so they read as part of the document rather than as icon decoration.
   ========================================================================== */
.mark { width: 2rem; height: 2rem; color: var(--accent); }
.ink .mark, .cover-img .mark { color: var(--accent-2); }

/* --- four claims -------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); border-top: 1px solid var(--ink); }
.pillars > li { padding-top: 1.4rem; }
.pillars > li + li { border-left: 1px solid var(--rule); padding-left: var(--gap); }
.pillar-mark { display: block; margin-bottom: 1.1rem; }
.pillars h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.012em; margin-bottom: .55rem; }
.pillars p { font-size: var(--t-base); color: var(--ink-3); line-height: 1.55; }
@media (max-width: 1080px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .pillars > li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pillars > li:nth-child(n+3) { border-top: 1px solid var(--rule); padding-top: 1.4rem; } }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; row-gap: 0; }
  .pillars > li { border-left: 0 !important; padding-left: 0 !important; padding-block: 1.4rem; }
  .pillars > li + li { border-top: 1px solid var(--rule); } }

/* --- license types ------------------------------------------------------ */
/* One register, three columns. The article spans every row of the parent grid
   and inherits its rows through subgrid, so each band — designation, audience,
   scope, coverage, action — shares a baseline across all three columns and the
   rules read as continuous lines rather than as three separate cards. */
.ltypes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gap);
}
.ltype {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  border-top: 2px solid var(--ink);
  transition: border-color .18s ease;
}
.ltype > * { min-width: 0; }

.lt-head { display: flex; align-items: baseline; gap: .75rem; padding: 1.15rem 0 1.25rem; }
.lt-name { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.018em; color: var(--ink); }

/* Client copy is prose, not a spec sheet: paragraphs, then the button on a
   line shared with the other two columns — subgrid keeps that line straight. */
.lt-body { padding: .1rem 0 1.4rem; }
.lt-body p { font-size: var(--t-base); color: var(--ink-3); line-height: 1.6; }
.lt-body p + p { margin-top: .8rem; }

.lt-cta { padding: 1.3rem 0 .3rem; border-top: 1px solid var(--rule); }
.lt-cta .btn { width: 100%; justify-content: center; font-weight: 600; }

.ltype:hover { border-top-color: var(--accent); }

.types-note { margin-top: 1.75rem; color: var(--ink-4); }

/* Subgrid is what holds the three columns on one baseline. Without it, fall
   back to the old flex column so the section still reads correctly. */
@supports not (grid-template-rows: subgrid) {
  .ltype { display: flex; flex-direction: column; }
  .lt-body { flex: 1; }
  .lt-cta { margin-top: auto; }
}

@media (max-width: 980px) {
  .ltypes { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 2.5rem; }
  .ltype { grid-row: auto; grid-template-rows: none; }
}

/* ------------------------------------------------------------- CTA band
   One centred column. The previous split put the claim and its supporting
   sentence in two columns that shared no baseline and read as unrelated. */
.ctaband { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ctaband .d2 { max-width: 26ch; text-wrap: balance; }
.ctaband-text {
  margin-top: 1rem; max-width: 58ch;
  font-size: var(--t-md); line-height: 1.55; color: oklch(0.895 0.020 240);
  text-wrap: pretty;
}
.ctaband .btn { margin-top: 2rem; }
@media (max-width: 560px) {
  .ctaband .btn { width: 100%; justify-content: center; }
}

/* --- the five stages ---------------------------------------------------- */
.process { border-top: 1px solid var(--ink); }
.pstep {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 9rem;
  gap: var(--gap); align-items: start;
  padding: 1.35rem 0; border-bottom: 1px solid var(--rule);
}
.pstep h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.012em; margin-bottom: .4rem; }
.pstep p { font-size: var(--t-base); color: var(--ink-3); line-height: 1.55; max-width: 62ch; }
.pstep-dur {
  justify-self: end; text-align: right;
  font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink);
  padding-top: .3rem; white-space: nowrap;
}
/* A duration the client has not supplied is shown as an obvious blank, never
   as a plausible-looking number. */
.pstep-dur.is-blank { color: var(--ink-4); border-bottom: 1px dashed var(--rule-2); padding-bottom: .1rem; }
.process .pstep:last-child { border-bottom: 0; }
.pstep-total { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; border-top: 1px solid var(--rule); border-bottom: 2px solid var(--ink); }
.pstep-total b { font-family: var(--f-mono); font-weight: 500; }
.process-cta { margin-top: 1.75rem; }
@media (max-width: 780px) {
  .pstep { grid-template-columns: 1.5rem minmax(0, 1fr); row-gap: 1rem; }
  .pstep-dur { grid-column: 2; justify-self: start; text-align: left; padding-top: 0; }
}

/* --- why the jurisdiction ----------------------------------------------- */
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.why-list { border-top: 1px solid var(--rule-ink); }
.why-list li { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--gap); padding: .95rem 0; border-bottom: 1px solid var(--rule-ink); }
.why-list b { font-weight: 500; color: var(--paper); }
.why-list span { color: oklch(0.870 0.022 240); font-size: var(--t-base); line-height: 1.55; }
.why-mark { color: var(--accent-2); }
.why-mark .cst { width: 100%; height: auto; }
.why-mark figcaption { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--rule-ink); }
@media (max-width: 980px) { .why-grid { grid-template-columns: 1fr; }
  .why-list li { grid-template-columns: 1fr; gap: 1rem; padding-block: 1.2rem; }
  .why-mark { max-width: 12rem; } }

/* --- regulatory framework ----------------------------------------------- */
.framework { border-top: 1px solid var(--ink); }
.framework li { border-bottom: 1px solid var(--rule); }
.fw-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--gap); align-items: center; padding: 1.3rem 0; }
.fw-mark { display: block; }
.fw-title { display: block; font-size: var(--t-lg); font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.fw-meta { display: block; margin-top: .3rem; }
.fw-go { white-space: nowrap; color: var(--ink); }
.fw-row:hover .fw-title { color: var(--accent); }
.fw-row:hover .fw-go { color: var(--accent); }
@media (max-width: 620px) {
  .fw-row { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: 1rem; }
  .fw-go { grid-column: 2; }
}

/* --------------------------------------------------------- standing offer */
/* The strongest fact the client has plus the action it leads to, docked once
   the hero has scrolled away. Ink and gold so it reads as part of the
   masthead rather than as an advertisement stuck to the page. */
.cta-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: .75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--accent-2);
}
.cta-dock[hidden] { display: none; }
.dock-line { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dock-line b { font-weight: 500; font-size: var(--t-base); letter-spacing: -.01em; }
.dock-line .meta { color: var(--accent-2); }
.cta-dock .btn { flex: none; background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-fg); }
.cta-dock .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.fw-row:hover .fw-title, .fw-row:hover .fw-go { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .cta-dock { animation: dock-in .2s ease-out both; }
  @keyframes dock-in { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
}
/* The statute pages already dock a contents control in that corner. */
body:has(.to-contents:not([hidden])) .cta-dock { display: none; }
@media (max-width: 520px) { .dock-line .meta { display: none; } }

/* ==========================================================================
   Enquiry form
   Nine questions, shown three at a time. The visible cost is one short screen;
   the progress bar and the count tell the truth about the rest so nothing
   feels hidden. The payoff sits alongside the whole way down.
   ========================================================================== */
/* The form now runs on its own, full width of the field, with the offer stated
   once above it. The sticky reassurance column was removed at the client's
   request; the promise it carried is the line below. */
.enq-wrap { max-width: 46rem; }
.enq-payoff { display: block; padding: 1rem 1.25rem; margin-bottom: 1.75rem;
              background: var(--ink); color: var(--paper);
              border-left: 3px solid var(--accent-2); }
.enq-payoff b { display: block; font-size: var(--t-md); font-weight: 500; letter-spacing: -.012em; }
.enq-payoff span { display: block; margin-top: .35rem; font-size: var(--t-sm); color: var(--accent-2); }

.enq-top { margin-bottom: 1.75rem; }
.enq-bar { height: 2px; background: var(--rule); overflow: hidden; }
.enq-bar-fill { display: block; height: 100%; width: var(--p, 33%); background: var(--accent-2); transition: width .32s cubic-bezier(.4, 0, .2, 1); }
.enq-meter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; }
.enq-dots { display: flex; gap: .35rem; }
.enq-dot { width: .4rem; height: .4rem; background: var(--rule-2); border-radius: 50%; transition: background .2s ease; }
.enq-dot.is-done { background: var(--accent); }

.enq-step { border: 0; padding: 0; margin: 0; display: none; }
.enq-step.is-current { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .enq-step.is-current { animation: enq-in .22s ease-out both; }
  @keyframes enq-in { from { opacity: 0; translate: 0 .5rem; } to { opacity: 1; translate: 0 0; } }
}
.enq-legend { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.02em; color: var(--ink); margin-bottom: 1.5rem; }
.enq-fields { display: grid; gap: 1.6rem; }

.enq-f { display: block; }
.enq-label { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .55rem; font-size: var(--t-base); font-weight: 500; color: var(--ink); }
/* Set as a parenthetical in the label's own type rather than a mono tag, so it
   reads as part of the question — "Company (optional)" — not as a badge. */
.enq-opt { margin-left: .4em; color: var(--ink-4); font-weight: 400; }
/* Mandatory fields are marked once in the label and explained once above the
   form. The control itself carries aria-required, so the asterisk is hidden
   from assistive technology rather than read out as punctuation. */
.enq-req { margin-left: .3em; color: var(--accent); font-weight: 600; }
.enq-reqnote { color: var(--ink-4); }
.enq-hint { margin-top: .5rem; font-size: var(--t-sm); color: var(--ink-4); }

.enq :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea) {
  width: 100%; padding: .95rem 1rem; background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 0;
  font-family: inherit; font-size: var(--t-md); color: var(--ink);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.enq :is(input, textarea)::placeholder { color: var(--ink-4); }
.enq :is(input, textarea):hover { border-color: var(--rule-2); }
.enq :is(input, textarea):focus-visible {
  outline: none; background: var(--paper);
  border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent);
}
.enq textarea { resize: vertical; min-height: 5.5rem; field-sizing: content; }
/* A field the reader has filled shows it, so the form reads as progress made. */
.enq :is(input, textarea):not(:placeholder-shown) { background: var(--paper); border-color: var(--rule-2); }

/* --- chips: a choice you tap once, not a menu you open --- */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0 1.1rem;
  background: var(--paper-2); border: 1px solid var(--rule);
  font-size: var(--t-base); color: var(--ink-2); cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.chip:hover span { border-color: var(--ink); color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:checked + span {
  background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500;
}
.chip input:checked + span::before {
  content: ""; width: .5rem; height: .28rem; margin-right: .6rem;
  border-left: 1.5px solid var(--accent-2); border-bottom: 1.5px solid var(--accent-2);
  rotate: -45deg; translate: 0 -.12rem;
}

.enq-nav { display: flex; gap: .75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.enq-nav .btn { flex: none; }
.enq-nav .enq-next, .enq-nav .enq-send { min-width: 12rem; justify-content: center; }
.enq-nav [hidden] { display: none; }
.enq-privacy { margin-top: 1rem; color: var(--ink-4); }
/* Shown only while the enquiry has no real endpoint, so a reviewer who presses
   Send is told the truth instead of watching the page reload empty. */
.enq-note { margin-top: 1.15rem; padding: .9rem 1.05rem; border-left: 2px solid var(--accent);
            background: var(--paper-2); color: var(--ink-2); font-size: var(--t-sm);
            max-width: 60ch; text-wrap: pretty; }

/* The honeypot: a real field, off-screen and out of the tab order, that only a
   bot fills in. display:none would be ignored by the crude ones. */
.bt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.enq-done { border-top: 2px solid var(--accent); padding-top: 1.75rem; }
.enq-done h3 { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.02em; margin-bottom: .75rem; }
.enq-done p { color: var(--ink-3); max-width: 52ch; }
.colophon-note { border-top: 1px solid var(--rule); padding-top: 1.15rem; }
@media (max-width: 560px) {
  .enq-nav { flex-direction: column-reverse; }
  .enq-nav .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------- the flag */
/* Drawn, not fetched — so it is sharp at any size and adds no request. It
   appears where it means something: the standing claim in the utility strip,
   the jurisdiction section, the footer designation, and the head of each
   statute. Nowhere decorative. */
.flag { display: block; flex: none; box-shadow: 0 0 0 1px oklch(0 0 0 / .10); }
.ink .flag, .utility .flag, .site-footer .flag { box-shadow: 0 0 0 1px oklch(1 0 0 / .22); }

.utility-badge { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; }
.utility-badge > span { min-width: 0; }

.footer-designation { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; }
.fd-flag { flex: none; padding-top: .1rem; }

/* The jurisdiction section is where the mark is explained: the flag above, the
   same nine points below it. The stars are the islands, and the flag turns the
   map a quarter — east up, north to the left. */
.why-mark { display: grid; gap: 1.1rem; }
.why-flag .flag { width: 100%; height: auto; }
.why-cst { padding-top: 1.1rem; border-top: 1px solid var(--rule-ink); }
.why-cst .cst { width: 100%; height: auto; }
.why-mark figcaption { margin-top: 0; padding-top: .75rem; border-top: 1px solid var(--rule-ink); }
@media (max-width: 980px) { .why-mark { grid-template-columns: 1fr 1fr; align-items: start; }
  .why-mark figcaption { grid-column: 1 / -1; }
  .why-cst { border-top: 0; padding-top: 0; } }
@media (max-width: 520px) { .why-mark { grid-template-columns: 1fr; max-width: 15rem; } }

.law-head { display: flex; align-items: center; gap: .85rem 1rem; flex-wrap: wrap; }
.law-flag { flex: none; }