/* APEX ONE - apexone.app. Built to brand guidelines v6.0, not to taste.

   TYPE (locked): Raleway for headers, Semi-bold standard and BOLD for headers. Nothing heavier -
   the previous build reached for 800/900, which is off-guideline. Cabin Regular for body. Mono is
   a utility face and carries machine-generated values only.

   COLOUR (locked): APEX Red is the SINGLE striking accent, never modified, never gradiented. The
   ground is COOL WHITE, because the guideline reads "high contrast, typographically led ... red as
   the single striking accent on CLEAN BACKGROUNDS" - an all-dark page was off-brand. Charcoal and
   Dusty Blue are deliberate accent BANDS, not the world. Metal Blue stays subordinate to red.

   MOTIFS (locked, used sparingly as the guideline insists): hairline LINES that compose the frame
   and guide the eye; the four-DOT system carrying the palette in miniature; the cornerpiece SHAPE
   taken from the logo's angles.

   LAYOUT (R1332): the page is a two-column editorial grid, not a single left rail. Every section
   opens with a SECTION HEAD (.shead) that puts the heading left and its standfirst right, so the
   full measure is used and the eye has somewhere to go. Bands are sized to their content - the
   previous build padded every band identically and left 200px of empty ground under the short ones.
   ZERO SCRIPTS: the deployed _headers CSP is default-src 'none' with no script-src, so nothing here
   may depend on JS. Every interaction below is CSS or a native anchor. */

*{box-sizing:border-box;}
:root{
  /* THE PALETTE IS THE GUIDELINE'S, AND NOTHING ELSE (v6.0 section 05). Six colours exist:
     APEX Red, Charcoal Black, Dusty Blue, Pure Black, Cool White, Pure White, Metal Blue.
     THERE IS NO GREY IN THIS BRAND. Every "grey" below is Charcoal or Cool White at an opacity -
     which the guideline permits on Lights and Darks - never an invented hue. The build this
     replaced had #3A3644, #6E6879, #E4E0EA, #CFC9D8 and #F4F1F8 (all off-palette, all lilac-cast),
     plus #FF6470 (a LIGHTENED red - forbidden outright: "Accent colours cannot be modified"),
     #8FB6C4 and #7FCF9E. All eight are gone. */
  --red:#DD2734; --red-dark:#C41F2B;
  --charcoal:#0A090C; --dusty:#061826; --black:#000000; --metal:#0F4761;
  --cool:#FBF9FF; --pure:#FFFFFF;

  /* TEXT ON LIGHT - Charcoal at opacity. Measured, not guessed: .88 gives 15.5:1, .78 gives
     11.9:1. The old --mute carried nearly all body copy at 5.36:1, which is what "grey small
     words, hard to see" meant. */
  --ink:#0A090C;
  --ink-1:rgba(10,9,12,.88);
  --ink-2:rgba(10,9,12,.78);

  /* TEXT ON DARK - Cool White at opacity. Nothing readable sits below .72. */
  --on-dark:rgba(251,249,255,.96);
  --on-dark-2:rgba(251,249,255,.91);
  --on-dark-3:rgba(251,249,255,.85);

  /* HAIRLINES + WASHES - motif 4.1 says thin lines guide the eye. Charcoal / Cool White at low
     opacity: a line, not type, so contrast rules do not apply to it. */
  --rule:rgba(10,9,12,.13); --rule-2:rgba(10,9,12,.28); --wash:rgba(10,9,12,.045);
  --hair-dark:rgba(251,249,255,.16);

  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Raleway',Segoe UI,sans-serif; --bodyf:'Cabin',-apple-system,Segoe UI,sans-serif;
  --max:1180px;
}
html{scroll-behavior:smooth;}
/* The header is sticky, so an anchor jump must clear it or the heading lands underneath. */
:target{scroll-margin-top:78px;}
body{background:var(--cool);color:var(--ink);font-family:var(--bodyf);font-size:19px;line-height:1.62;margin:0;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--disp);text-wrap:balance;margin:0;letter-spacing:-.02em;}
p{margin:0;} a{color:inherit;}
img{max-width:100%;}
::selection{background:var(--red);color:var(--pure);}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--red);color:var(--pure);
  font-family:var(--disp);font-weight:600;font-size:15px;padding:12px 20px;text-decoration:none;}
.skip:focus{left:8px;top:8px;}

/* MOTIF - the four-dot system */
.dots{display:flex;gap:7px;align-items:center;}
.dots i{width:7px;height:7px;border-radius:50%;display:block;}
.dots i:nth-child(1){background:var(--metal);}
.dots i:nth-child(2){background:var(--dusty);}
.dots i:nth-child(3){background:var(--charcoal);}
.dots i:nth-child(4){background:var(--red);}

/* MOTIF - cornerpiece, from the logo angles */
.corner{position:absolute;top:0;right:0;width:56px;height:56px;pointer-events:none;z-index:2;}
.corner::before,.corner::after{content:"";position:absolute;background:var(--red);}
.corner::before{top:0;right:0;width:56px;height:2px;}
.corner::after{top:0;right:0;width:2px;height:56px;}

/* ============================ HEADER ============================
   The nav used to vanish entirely below 880px, which left a phone visitor with a logo, an
   oversized red button and no way to reach any section. It is now a scrollable strip at every
   width - a horizontally scrollable ancestor IS reachable, which is why the overflow gate is
   read with that exception in mind. */
.top{position:sticky;top:0;z-index:30;background:rgba(251,249,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);}
.top-in{max-width:var(--max);margin:0 auto;padding:10px clamp(16px,4vw,40px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;flex:0 0 auto;}
.brand img{display:block;height:auto;width:clamp(104px,14vw,140px);}

.top nav{order:3;flex:1 1 100%;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  border-top:1px solid var(--rule);margin:0 clamp(-16px,-4vw,-40px);padding:0 clamp(16px,4vw,40px);
  /* The strip scrolls where it cannot fit. Fade the right edge so that reads as scrollable
     rather than as a control clipped off the screen - the R1296 distinction, made visible. */
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);}
.top nav::-webkit-scrollbar{display:none;}
.top nav a{font-family:var(--disp);font-size:14px;font-weight:600;text-transform:uppercase;
  letter-spacing:normal;color:var(--ink);text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center;min-height:44px;padding:0 11px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.top nav a:hover,.top nav a:focus-visible{color:var(--red);border-bottom-color:var(--red);}
@media(min-width:900px){
  .top-in{flex-wrap:nowrap;gap:16px;padding-top:8px;padding-bottom:8px;}
  .top nav{order:0;flex:0 1 auto;margin:0 0 0 auto;border-top:0;padding:0;overflow:visible;
    mask-image:none;-webkit-mask-image:none;}
}
/* STAFF LOGIN -> the Amarok hub. Deliberately NOT the red CTA: the page has one primary action
   (start a conversation) and this is a utility door for people who already work here. */
.top nav a.login{color:var(--ink);font-weight:600;font-family:var(--disp);}
.top nav a.login::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-right:8px;}
.top nav a.login:hover,.top nav a.login:focus-visible{color:var(--red);}
.mobile-menu{display:none;}
@media(min-width:900px){
  .top nav a.login{border:1px solid var(--rule-2);padding:0 16px;margin-left:10px;font-size:14px;
    border-bottom:1px solid var(--rule-2);transition:border-color .16s,background .16s,color .16s;}
  .top nav a.login:hover,.top nav a.login:focus-visible{border-color:var(--ink);background:var(--pure);color:var(--ink);}
}
@media(max-width:899px){
  .top nav a.login{margin-left:auto;padding-left:16px;}
}
.cta-sm{margin-left:auto;font-family:var(--disp);font-weight:600;font-size:14px;
  text-transform:uppercase;color:var(--pure);
  background:var(--red);padding:0 clamp(14px,3vw,20px);min-height:44px;display:inline-flex;
  align-items:center;text-decoration:none;white-space:nowrap;transition:background .16s;}
@media(min-width:900px){ .cta-sm{margin-left:6px;} }
.cta-sm:hover{background:var(--red-dark);}
.cta-sm:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* ============================ BANDS + SECTION HEADS ============================ */
.band{padding:clamp(56px,6.4vw,94px) clamp(20px,4vw,40px);position:relative;}
.in{max-width:var(--max);margin:0 auto;} .narrow{max-width:760px;}
.eyebrow{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-bottom:16px;}
.hero .eyebrow,.principle .eyebrow,footer .eyebrow{color:var(--cool);
  display:inline-flex;align-items:center;gap:10px;}
.hero .eyebrow::before,.principle .eyebrow::before{content:"";width:22px;height:2px;
  background:var(--red);display:inline-block;flex:0 0 auto;}
.lead{font-size:clamp(19px,1.7vw,21px);line-height:1.6;color:var(--ink-1);max-width:60ch;}

/* THE EDITORIAL GRID. Heading left, standfirst right - the fix for a page that was one long
   left-hand column with the right half of every screen empty. */
.shead{display:grid;grid-template-columns:1fr;gap:20px;align-items:end;}
@media(min-width:900px){
  .shead{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);}
  .shead .lead{padding-bottom:6px;}
}
h2.sec{font-weight:700;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.028em;line-height:1.08;max-width:18ch;}
h2.sec em{font-style:normal;color:var(--red);}

/* ============================ HERO ============================
   align-items:stretch + a flexing ledger. Under the old `start` the ledger stopped short and left
   a slab of empty charcoal at the foot of the opener - the single biggest piece of dead space on
   the page. */
.hero{background:var(--charcoal);color:var(--cool);overflow:hidden;position:relative;padding-bottom:0;}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(251,249,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(251,249,255,.05) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(76% 64% at 12% 8%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(76% 64% at 12% 8%,#000,transparent 74%);}
.hero .in{position:relative;z-index:1;}
.hgrid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4.2vw,54px);align-items:stretch;
  padding-bottom:clamp(48px,5.4vw,76px);}
@media(min-width:1000px){ .hgrid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);} }
.hcopy{display:flex;flex-direction:column;align-items:flex-start;}

/* The worked example outgrew the hero's right-hand column: at nine beats the panel stood 1192px
   against 458px of copy, and centring the copy to split the gap pushed the H1 below the fold.
   So it runs full width beneath the copy instead, and the beats sit two-up. No gap left to manage. */
.exwrap{margin-top:clamp(34px,4.2vw,54px);padding-bottom:clamp(48px,5.4vw,76px);}
h1{font-weight:700;font-size:clamp(36px,5.4vw,64px);line-height:1.04;letter-spacing:-.034em;max-width:14ch;color:var(--cool);}
.claim{font-size:clamp(18.5px,1.7vw,20.5px);line-height:1.5;color:var(--cool);font-weight:600;margin-top:24px;padding-left:16px;border-left:3px solid var(--red);max-width:44ch;}
.hero .lead{color:var(--on-dark);margin-top:22px;}
.hero .lead a{color:var(--cool);text-decoration-color:var(--on-dark-3);text-underline-offset:3px;}
.hero .lead a:hover{text-decoration-color:var(--red);}
.agency-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:18px;
  padding:0 18px;border:1px solid rgba(251,249,255,.52);color:var(--cool);font-family:var(--disp);
  font-size:14px;font-weight:600;text-transform:uppercase;text-decoration:none;transition:border-color .16s,background .16s;}
.agency-link:hover,.agency-link:focus-visible{border-color:var(--cool);background:rgba(251,249,255,.08);}
.agency-link:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.hero .dots{margin-top:30px;}
.hero .dots i:nth-child(3){background:var(--on-dark-2);}
.ledger{background:rgba(251,249,255,.045);border:1px solid var(--hair-dark);display:flex;flex-direction:column;}
.lhead{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--hair-dark);position:relative;overflow:hidden;flex:0 0 auto;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;}
@media(prefers-reduced-motion:no-preference){
  .dot{animation:pulse 2.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.8);}}
}
.lhead span{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-2);}
/* OUTCOMES - what the system changed on client work, counted from the action ledgers. These sit
   ABOVE the entries because a reader wants the result before the evidence for it. */
.outcomes{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair-dark);
  border-bottom:1px solid var(--hair-dark);flex:0 0 auto;}
@media(min-width:520px){ .outcomes{grid-template-columns:repeat(3,1fr);} }
.outcomes>div{background:rgba(251,249,255,.03);padding:16px 18px;display:flex;flex-direction:column;gap:6px;}
.outcomes b{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.4vw,38px);line-height:1;
  letter-spacing:-.03em;color:var(--cool);font-variant-numeric:tabular-nums;}
.outcomes span{font-size:14.5px;line-height:1.42;color:var(--on-dark-2);}
.lrows{flex:1 1 auto;display:flex;flex-direction:column;}
.row{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:13px 18px;border-top:1px solid rgba(251,249,255,.1);
  transition:background .16s;}
.row:first-child{border-top:none;}
.row:hover{background:rgba(251,249,255,.035);}
@media(min-width:420px){ .row{grid-template-columns:74px 1fr;gap:14px;} }
.ts{font-family:var(--mono);font-size:12px;color:var(--on-dark-3);white-space:nowrap;padding-top:3px;font-variant-numeric:tabular-nums;line-height:1.45;}
.ev{font-size:16.2px;line-height:1.5;color:var(--on-dark);}
.ev b{color:var(--cool);font-weight:600;}

/* THE VERDICT TAG. What the system DID, in one word, before the sentence explaining it - so the
   column can be skimmed for behaviour rather than read line by line. Two colours only: RED for a
   catch or a correction, METAL for restraint (it held, it declined, it asked). Red stays the
   single striking accent; a third tag colour would spend it. */
.ev .tag{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:1px 7px;margin-right:9px;
  vertical-align:1px;white-space:nowrap;}
/* SOLID CHIPS, UNMODIFIED ACCENTS. The previous build tinted the tag with #FF6470 - a LIGHTENED
   APEX Red, which guideline 2.4 forbids outright ("Accent colours cannot be modified", and a
   washed red "reads dirty and pinkish"). Cool White on the true red is both on-guideline and far
   more legible than tinted type on a tinted ground. Metal Blue carries restraint and stays
   subordinate to red, exactly as section 05 requires. */
.ev .tag.tr{color:var(--pure);background:var(--red);}
.ev .tag.tb{color:var(--cool);background:var(--metal);}

.lfoot{padding:13px 18px;border-top:1px solid var(--hair-dark);font-family:var(--mono);font-size:12px;
  color:var(--on-dark-3);line-height:1.6;flex:0 0 auto;display:grid;gap:6px;}
.lfoot b{color:var(--on-dark);font-weight:600;}

/* THE PRODUCT INDEX - names what is below at the foot of the opener, and gives the hero a
   payoff line instead of trailing off into empty ground. */
.index{position:relative;z-index:1;max-width:var(--max);margin:0 auto;border-top:1px solid var(--hair-dark);
  display:flex;overflow-x:auto;scrollbar-width:none;}
.index::-webkit-scrollbar{display:none;}
.index a{flex:1 0 auto;display:inline-flex;align-items:baseline;gap:9px;min-height:56px;
  padding:16px clamp(14px,2vw,22px);text-decoration:none;font-family:var(--disp);font-weight:600;
  font-size:16.5px;color:var(--on-dark-2);border-left:1px solid var(--hair-dark);
  white-space:nowrap;transition:background .16s,color .16s;}
.index a:first-child{border-left:0;padding-left:0;}
.index a:hover,.index a:focus-visible{color:var(--cool);background:rgba(251,249,255,.05);}
.index b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--red);}
@media(min-width:1000px){ .index a{flex:0 0 auto;} }

/* THE BRAND SPINE. Kept when the pillars went (R1340): it is positioning, not a service list.
   The line above this one used to be the orphaned tail of the deleted .tagline rule - a
   line-oriented delete on a MULTI-LINE rule leaves its continuation behind, and CSS fails
   SILENTLY: the parser discards tokens until it recovers, which swallowed .spine entirely. It
   rendered at 17px/400 with no rule above it and nothing errored. Delete rules whole. */
.spine{margin-top:clamp(34px,4vw,48px);padding-top:26px;border-top:2px solid var(--red);
  font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.2vw,26px);line-height:1.3;
  letter-spacing:-.02em;color:var(--ink);}
.spine b{font-weight:700;color:var(--red);}

/* ============================ STATEMENT BAND ============================ */
.statement{background:var(--pure);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}

/* THREE-UP AND FOUR-UP - one bordered vocabulary. The governance/why-it-matters columns used to
   float as loose text while the failure points sat in a bordered grid; two treatments for the
   same job read as an accident. */
.gov{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(34px,4vw,52px);}
.gov>div{background:var(--pure);padding:26px 22px;transition:background .18s;position:relative;}
.gov>div:hover{background:var(--wash);}
.statement .gov>div{background:var(--pure);}
.statement .gov>div:hover{background:var(--wash);}
.gov h3{font-family:var(--disp);font-weight:600;font-size:17.5px;margin:10px 0 8px;}
.gov p{color:var(--ink-2);font-size:16.8px;line-height:1.55;}
.gov h3{margin-top:0;}
.gov h3::before{content:"";display:block;width:24px;height:2px;background:var(--red);margin-bottom:14px;}

/* WHAT IT DOES NOT DO - a bounded block, not four lines trailing off the left edge. */
.limitwrap{margin-top:clamp(30px,3.4vw,44px);border-top:2px solid var(--red);padding-top:26px;}
.limithead{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px;}
.limits{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:12px 40px;}
@media(min-width:820px){ .limits{grid-template-columns:1fr 1fr;} }
.limits li{position:relative;padding-left:26px;color:var(--ink-1);font-size:17.6px;line-height:1.55;max-width:52ch;}
.limits li::before{content:"";position:absolute;left:0;top:.68em;width:12px;height:1px;background:var(--red);}

/* ============================ PRINCIPLE - Dusty Blue, the one other dark moment ============================ */
.principle{background:var(--dusty);color:var(--cool);text-align:center;overflow:hidden;}
.principle .in{display:flex;flex-direction:column;align-items:center;}
/* NOT red here. Measured 3.78:1 on Dusty Blue - a fail. Red is the brand's most STRIKING colour,
   not its most legible; on a dark band it carries the rule beside the label, never the label. */
.principle .dots{margin-bottom:22px;}
.principle .dots i:nth-child(3){background:var(--on-dark-2);}
.principle h2{color:var(--cool);font-weight:700;font-size:clamp(27px,3.8vw,48px);line-height:1.12;letter-spacing:-.03em;max-width:20ch;}
.principle h2 em{font-style:normal;color:var(--red);}
.principle .lead{color:var(--on-dark);margin-top:22px;max-width:56ch;}
.enforced{margin-top:24px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  color:var(--on-dark-2);border-top:1px solid var(--hair-dark);padding-top:20px;}

/* ============================ PRODUCT FAMILY ============================ */
.prod2{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(34px,4vw,52px);}
@media(min-width:760px){ .prod2{grid-template-columns:1fr 1fr;} }
.prod3{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-top:0;}
@media(min-width:760px){ .prod3{grid-template-columns:1fr 1fr 1fr;} }
.prod{background:var(--pure);padding:30px 26px;display:flex;flex-direction:column;position:relative;transition:background .18s;}
.prod::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
.prod:hover{background:var(--wash);}
.prod:hover::before,.prod:focus-within::before{transform:scaleX(1);}
.prod .pn{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--red);text-transform:uppercase;}
.prod h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.3vw,24px);margin:13px 0 0;letter-spacing:-.015em;}
.prod .plede{color:var(--ink);font-size:17.6px;font-weight:600;line-height:1.45;margin-top:11px;padding-bottom:14px;border-bottom:1px solid var(--rule);}
.prod p{color:var(--ink-1);font-size:16.9px;line-height:1.56;margin-top:14px;}
.prod .pwho{margin-top:auto;padding-top:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-bottom:0;}
.prod2 .prod{padding:34px 30px;}
.prod2 .prod:hover{background:var(--wash);}
.prod2 .prod h3{font-size:clamp(23px,2.8vw,29px);}

/* ============================ CLOSE - the call and the jurisdiction note, one band ============================
   These were two separate full-height bands, each holding a short paragraph, each padded as though
   it held a section. Together they fill one. */
.close{background:var(--pure);border-top:1px solid var(--rule);}
.closegrid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4.6vw,64px);align-items:start;}
@media(min-width:900px){ .closegrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);} }
.close h2.sec{font-size:clamp(30px,4.2vw,52px);max-width:15ch;}
.close .lead{margin-top:22px;}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.cta{display:inline-flex;align-items:center;min-height:54px;padding:0 34px;background:var(--red);color:var(--pure);font-family:var(--disp);font-weight:700;font-size:16px;text-decoration:none;transition:background .16s,transform .16s;}
.cta:hover{background:var(--red-dark);transform:translateY(-1px);}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.cta-alt{display:inline-flex;align-items:center;min-height:54px;padding:0 30px;background:transparent;color:var(--ink);border:1px solid var(--rule-2);font-family:var(--disp);font-weight:600;font-size:15.5px;text-decoration:none;transition:border-color .16s,background .16s;}
.cta-alt:hover{background:var(--wash);border-color:var(--ink);}
.cta-alt:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.jurisdiction{background:var(--wash);border-left:2px solid var(--red);padding:28px 26px;}
.jurisdiction h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.2vw,24px);line-height:1.16;letter-spacing:-.02em;margin-bottom:14px;}
.jurisdiction p{color:var(--ink-1);font-size:17.4px;line-height:1.58;}

/* ============================ FOOTER ============================ */
footer{background:var(--charcoal);color:var(--on-dark-2);padding:44px clamp(20px,4vw,40px) 52px;}
.fgrid{display:grid;grid-template-columns:1fr;gap:34px;max-width:var(--max);margin:0 auto;}
@media(min-width:760px){ .fgrid{grid-template-columns:1fr 1fr;gap:36px 40px;} }
@media(min-width:1000px){ .fgrid{grid-template-columns:1.5fr 1fr 1.15fr .9fr;gap:40px;} }
.fbrand img{display:block;width:clamp(140px,20vw,178px);height:auto;}
.fbrand p{margin-top:16px;max-width:34ch;}
.fcol h4{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cool);margin:0 0 6px;}
.fcol a,.fcol span{font-size:16px;line-height:1.6;min-height:40px;display:flex;align-items:center;text-decoration:none;}
.fcol a{transition:color .15s;}
.fcol a:hover{color:var(--cool);}
/* The footer is the reliable staff door: on a phone the header's login chip sits at the end of a
   scrollable strip - reachable, but not findable, which is no use to someone arriving to work. */
.fcol a.flogin{font-family:var(--disp);font-weight:600;color:var(--cool);}
.fcol a.flogin::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-right:9px;flex:0 0 auto;}
.fcol a.flogin:hover{color:var(--red);}
.fnote{font-size:15px;line-height:1.55;color:var(--on-dark-3);min-height:0 !important;
  display:block !important;max-width:26ch;}
.fsoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.fsoc a{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;border:1px solid rgba(251,249,255,.34);padding:0 14px;min-height:40px;display:inline-flex;align-items:center;text-decoration:none;transition:border-color .16s,color .16s;}
.fsoc a:hover{border-color:var(--red);color:var(--cool);}
.fbase{max-width:var(--max);margin:38px auto 0;padding-top:22px;border-top:1px solid var(--hair-dark);display:grid;gap:10px;}
@media(min-width:760px){ .fbase{grid-template-columns:1fr auto;align-items:center;} }
.fbase p{font-size:15px;line-height:1.6;}
footer p{font-size:16px;line-height:1.66;}
footer b{color:var(--cool);font-weight:600;}
footer a{color:var(--on-dark);}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* Two-up beats. MUST live after the base .lrows{display:flex} rule - a media query does not beat a
   later declaration of the same property, so placing this earlier left display:flex winning while
   grid-template-columns applied to nothing. */
@media(min-width:900px){
  .lrows{display:grid;grid-template-columns:1fr 1fr;}
  .lrows .row{border-top:1px solid rgba(251,249,255,.1);}
  .lrows .row:nth-child(-n+2){border-top:none;}
  .lrows .row:nth-child(odd){border-right:1px solid rgba(251,249,255,.1);}
}

/* The layer under the worked example: what the process actually is, not what it produced. */
/* 12.5px, not 11.5: the 12px legibility floor is the one type rule with a number, and the
   mobile pass caught this heading under it at both 390 and 768. */
.dhead{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cool);margin-bottom:15px;display:flex;align-items:center;gap:9px;}
.dhead::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;}
.dgrid{display:grid;grid-template-columns:1fr;gap:17px 28px;}
.dgrid b{display:block;font-size:15.6px;font-weight:600;color:var(--cool);margin-bottom:4px;}
.dgrid span{display:block;font-size:15.4px;line-height:1.5;color:var(--on-dark-2);}
@media(min-width:700px){ .dgrid{grid-template-columns:1fr 1fr;} }
@media(min-width:1050px){ .dgrid{grid-template-columns:repeat(3,1fr);} }

/* Six governance cards. auto-fit minmax(210px) lays five across at desktop and orphans the sixth,
   so pin the count. After the base .gov rule - a media query does not beat a later declaration. */
@media(min-width:900px){ .gov{grid-template-columns:repeat(3,1fr);} }

/* R1445: "Underneath it" left the hero panel for its own band at the foot of the page. It was
   styled for a dark panel (light type on charcoal), so the band carries that ground with it rather
   than the type being re-coloured - moving a block should not mean rewriting how it reads. */
.deepband{background:var(--charcoal);}
.deepband .eyebrow{color:var(--cool);}
.deepband h2.sec{color:var(--cool);}
.deepband .lead{color:var(--on-dark-2);}
.deepband .dgrid{margin-top:clamp(30px,3.6vw,46px);}

/* R1612: phones get a complete navigation and a single-column decision record. The previous
   mobile treatment hid the later navigation items beyond a horizontal strip, while the record
   kept a desktop-style number rail and nowrap labels. That combination clipped meaningful copy
   even though the hero's overflow:hidden concealed the page-level overflow signal. */
@media(max-width:519px){
  .top-in{gap:8px;padding-left:14px;padding-right:14px;}
  .brand img{width:108px;}
  .cta-sm{font-size:12.5px;padding:0 13px;}
  .top-in>nav{display:none;}
  .mobile-menu{display:block;order:3;flex:1 1 100%;margin:0 -14px -10px;border-top:1px solid var(--rule);}
  .mobile-menu summary{min-height:44px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;
    color:var(--ink);font-family:var(--disp);font-size:12px;font-weight:600;text-transform:uppercase;cursor:pointer;list-style:none;}
  .mobile-menu summary::-webkit-details-marker{display:none;}
  .mobile-menu summary::after{content:"+";font-family:var(--mono);font-size:18px;font-weight:500;color:var(--red);}
  .mobile-menu[open] summary::after{content:"-";}
  .top .mobile-menu nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
    margin:0;padding:0 8px;border-top:1px solid var(--rule);overflow:visible;mask-image:none;-webkit-mask-image:none;}
  .top .mobile-menu nav a{min-width:0;min-height:48px;padding:5px 4px;font-size:12px;line-height:1.2;
    text-align:center;white-space:normal;}
  .top .mobile-menu nav a.login{margin-left:0;padding-left:4px;}
  .top .mobile-menu nav a.login::before{display:none;}
  :target{scroll-margin-top:112px;}

  .band{padding-left:18px;padding-right:18px;}
  .row{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px;}
  .ts{padding-top:0;}
  .ev{min-width:0;overflow-wrap:anywhere;}
  .ev .tag{display:table;margin:0 0 7px;max-width:100%;white-space:normal;line-height:1.35;}

  .index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;}
  .index a{min-width:0;padding:13px 10px;font-size:14px;white-space:normal;}
  .index a:first-child{padding-left:10px;}
}