/* ==========================================================================
   GXG Corp — navy / red / lavender
   Light ground with lavender-tinted bands, deep navy for the hero and CTA,
   brand red for actions. Designed around photography: every .ph block has a
   styled fallback so the page holds together before the images are added.
   ========================================================================== */

:root{
  --navy:#141A33;
  --navy-2:#1C2444;          /* one step up, for cards sitting on navy */
  --tint:#ECEFF9;            /* deepened: the old #F2F3FA was a 3% step off white */
  --tint-2:#DFE4F3;
  --card:#FFFFFF;
  --bg:#FFFFFF;

  --ink:#131629;
  --ink-2:#565D7A;
  --ink-3:#666D8A;
  --line:#DEE1EE;
  --line-2:#C9CEE2;          /* stronger hairline, for dividers that must read */

  --red:#C00000;
  --red-2:#A00000;
  --red-soft:#FCEEEE;
  --on-red:#FFFFFF;

  /* Success / on-time. Red was previously carrying accents, actions AND
     positive states, which made every checkmark read like a warning.
     Two values: one legible on light ground, one on navy. */
  --good:#0F7A55;
  --good-soft:#E4F4EC;
  --good-bright:#7BE3A4;

  /* Sharpened from 12/22/30. A middle radius is the detail that dates a
     layout fastest; crisp corners suit a practice selling precision. The
     pill buttons keep their 100px on purpose — the contrast is the point. */
  --r-sm:8px;
  --r-lg:12px;
  --r-xl:18px;
  --pad:clamp(18px,3.4vw,44px);
  --max:1300px;

  --sh:0 1px 2px rgba(19,22,41,.05), 0 6px 20px rgba(19,22,41,.07);
  --sh-2:0 14px 44px rgba(19,22,41,.14);

  /* Three roles. Display carries the voice, body carries the reading,
     mono carries anything that is a figure, a code or a step — the things
     this firm is actually judged on. */
  /* ── Type scale ──────────────────────────────────────────────────────
     Ten steps, named by role. The file previously held 46 distinct
     font-sizes with 24 of them inside an 11px range — seven separate
     steps between 13px and 15.5px alone, and a lone 14.8px that was
     almost certainly a typo. Every step below is within 0.5px of a value
     already in use, so adopting it moves nothing visibly.
     Display sizes stay as clamp() — they are responsive by design. */
  --fs-micro:10px;      /* dot labels, calendar weekday initials */
  --fs-label:11px;      /* uppercase mono labels, eyebrows */
  --fs-meta:12px;       /* footnotes, timestamps, chip text */
  --fs-caption:13px;    /* captions, table cells, dense UI */
  --fs-sm:14px;         /* secondary copy */
  --fs-ui:15px;         /* buttons, nav links, form fields */
  --fs-body:16.5px;     /* body copy — the reading size */
  --fs-lead:19px;       /* standfirsts, lead paragraphs */
  --fs-h3:21px;         /* sub-headings, icon glyphs */
  --fs-h2:24px;         /* section headings */

  /* ── Spacing ─────────────────────────────────────────────────────────
     Eight atoms, replacing 51. Use these for gap, margin and padding;
     --pad stays for the page gutter because it is fluid. */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;

  /* ── Layering ────────────────────────────────────────────────────────
     Named steps, replacing eight ad-hoc numbers where #intro sat at
     9000 and .prog and .fab both claimed 80. */
  --z-raised:1;
  --z-sticky:10;
  --z-float:20;
  --z-dropdown:30;
  --z-drawer:40;
  --z-overlay:50;

  --f-display:'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f); font-size:var(--fs-body); line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}

.shell{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad); }
.sec{ padding-block:clamp(48px,6.4vw,120px); }
.tint{ background:var(--tint); border-block:1px solid var(--line); }

/* Full-bleed navy section. Used once mid-page to give the scroll a spine,
   so the page is not eight variations of white. */
.dark{ background:var(--navy); color:#fff; border-block:1px solid rgba(255,255,255,.10); position:relative; overflow:hidden; }
.dark h2,.dark h3,.dark b{ color:#fff; }
.dark .eyebrow{ color:#fff; opacity:.85; }
.dark .eyebrow::before{ background:var(--red); }
.dark .lede,.dark p{ color:#B9C0DA; }
.dark > *{ position:relative; z-index:1; }
.dark .flow__s{ background:var(--navy-2); border-color:rgba(255,255,255,.13); }
.dark .flow__s p{ color:#A9B1CE; }
.dark .flow__s b{ background:rgba(255,255,255,.09); color:#fff; }

/* Ruled texture. Navy fields read as flat blocks with nothing in them;
   a 1px grid at 4% gives the surface something to catch without becoming
   a pattern anyone notices. */
.dark::before,.hero::before,.band::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}

h1,h2,h3{ margin:0; line-height:1.12; text-wrap:balance; }
/* Display serif for the two levels that carry voice; the sans stays on h3
   and below, where the page is being used rather than read. */
h1,h2{
  font-family:var(--f-display); font-weight:600;
  letter-spacing:-0.015em; font-optical-sizing:auto;
}
h1{ font-size:clamp(2.6rem,6.2vw,5.25rem); line-height:1.02; letter-spacing:-0.028em; }
h2{ font-size:clamp(2.05rem,4vw,3.5rem); line-height:1.06; letter-spacing:-0.022em; }
h3{ font-family:var(--f); font-weight:700; font-size:clamp(1.1rem,1.5vw,1.375rem); letter-spacing:-0.02em; }
p{ margin:0 0 1em; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:6px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:var(--fs-meta); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin-bottom:16px;
}
.eyebrow::before{ content:''; width:16px; height:2px; background:currentColor; border-radius:2px; }
/* Scaled with the headings — 17.6px read small against a 5rem h1. */
.lede{ font-size:clamp(1.08rem,1.35vw,1.3rem); color:var(--ink-2); max-width:56ch; }
.mid{ text-align:center; margin:0 auto clamp(34px,4vw,58px); max-width:44rem; }
.mid .eyebrow{ justify-content:center; }
.num{ font-variant-numeric:tabular-nums; }

/* Photography ------------------------------------------------------------- */
/* The fallback is a tinted panel — a missing file reads as a deliberate
   block rather than a broken-image icon. */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:
    linear-gradient(135deg, rgba(192,0,0,.06), rgba(20,26,51,.11)),
    var(--tint-2);
}
/* A ruled panel with a monogram rather than a plain gradient: while the
   photography is still missing, an empty slot reads as a deliberate block
   instead of a gap. The image, when present, covers it. */
.ph::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    repeating-linear-gradient(-45deg, rgba(20,26,51,.05) 0 1px, transparent 1px 11px);
}
.ph::after{
  content:'GXG'; position:absolute; inset:0; z-index:0;
  display:grid; place-items:center;
  font-family:var(--f-mono); font-size:clamp(20px,3.2vw,34px);
  letter-spacing:.28em; text-indent:.28em;
  color:rgba(20,26,51,.13);
}
/* <picture> wraps every content image now (WebP with a JPEG fallback).
   display:contents keeps it out of the layout entirely, so every rule
   written against `.ph img` still applies unchanged. */
.ph picture,.hero__bg picture{ display:contents; }
.ph img{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; }
.ph--4x3{ aspect-ratio:4/3; }
.ph--1x1{ aspect-ratio:1/1; }

/* Icons ------------------------------------------------------------------- */
/* Every icon is an inline SVG on currentColor. The page previously used
   HTML entities (checkmark, envelope, telephone, hamburger), which render
   as a different glyph — sometimes a colour emoji — on every platform. */
.i{
  width:1em; height:1em; flex:none; display:inline-block;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-0.125em;
}

/* Buttons ----------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:var(--fs-ui); font-weight:700; white-space:nowrap;
  padding:15px 28px; border-radius:100px; border:1.5px solid var(--red);
  background:var(--red); color:var(--on-red); text-decoration:none; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
.btn:hover{ background:var(--red-2); border-color:var(--red-2); }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--line:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.arw{
  display:inline-grid; place-items:center; width:48px; height:48px; flex-shrink:0;
  border-radius:50%; background:var(--red); color:#fff; text-decoration:none;
  font-size:var(--fs-lead); line-height:1; border:none; cursor:pointer;
  transition:transform .18s, background .18s;
}
.arw:hover{ background:var(--red-2); transform:rotate(45deg); }
.arw--ghost{ background:transparent; border:1.5px solid rgba(255,255,255,.35); color:#fff; }
.arw--ghost:hover{ background:#fff; color:var(--ink); }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* Utility strip ----------------------------------------------------------- */
.util{ background:var(--navy); color:#B9C0DA; font-size:var(--fs-sm); }
.util__in{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:9px 0; }
.util a{ text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.util a .i{ font-size:var(--fs-ui); opacity:.7; }
.util a:hover .i{ opacity:1; }
.util__num{ font-family:var(--f-mono); font-size:var(--fs-caption); letter-spacing:-0.01em; }
.util a:hover{ color:#fff; }
.util__r{ display:flex; gap:22px; flex-wrap:wrap; }
@media (max-width:700px){ .util__in{ justify-content:center; } .util__l{ display:none; } }

/* Header ------------------------------------------------------------------ */
.nav{ position:sticky; top:0; z-index:70; background:rgba(255,255,255,.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav__in{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; height:74px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:30px; width:auto; }
.brand b{ font-size:var(--fs-lead); font-weight:800; letter-spacing:-0.04em; }
.links{ display:flex; gap:4px; justify-content:center; }
.links a,.drop__t{
  font-family:inherit; font-size:var(--fs-ui); font-weight:600; color:var(--ink-2);
  /* Buttons don't inherit line-height — they get `normal` from the browser.
     The links inherit 1.65, so with identical padding the two dropdown
     triggers came out 36px tall against the links' 42.8px, sitting ~3.4px
     higher than everything beside them. Stating it once fixes both. */
  line-height:1.65;
  background:none; border:none; cursor:pointer; text-decoration:none;
  padding:9px 15px; border-radius:100px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; transition:background .16s,color .16s;
}
.links a:hover,.drop__t:hover,.drop.open .drop__t,.links a[aria-current],.drop__t[aria-current]{ background:var(--tint); color:var(--ink); }
.nav__act{ display:flex; align-items:center; gap:10px; }
.nav .btn{ padding:11px 22px; font-size:var(--fs-ui); }
.burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:none; color:inherit; cursor:pointer; font-size:var(--fs-h3); }
@media (max-width:1080px){ .links,.nav .btn--line{ display:none; } .burger{ display:grid; place-items:center; } }

.drop{ position:relative; }
.caret{ display:inline-flex; font-size:var(--fs-sm); opacity:.6; transition:transform .18s; }
.drop.open .caret{ transform:rotate(180deg); }
.drop__m{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:320px; padding:8px; z-index:90; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transition:opacity .16s, transform .16s, visibility .16s;
}
.drop.open .drop__m{ opacity:1; visibility:visible; transform:translateX(-50%); }
.drop__m a{ display:block; padding:11px 14px; border-radius:12px; text-decoration:none; }
.drop__m a b{ display:block; font-size:var(--fs-ui); font-weight:700; }
.drop__m a span{ display:block; font-size:var(--fs-caption); color:var(--ink-3); margin-top:2px; }
.drop__m a:hover{ background:var(--tint); }
.drop__m a:hover b,.drop__m a[aria-current] b{ color:var(--red); }

.drawer{ position:fixed; inset:0; z-index:95; background:#fff; padding:20px var(--pad); display:none; flex-direction:column; overflow:auto; }
.drawer.open{ display:flex; }
.drawer a{ font-family:var(--f-display); font-size:var(--fs-h2); font-weight:600; letter-spacing:-0.015em; text-decoration:none; padding:15px 0; border-bottom:1px solid var(--line); }
.drawer__x{ display:grid; place-items:center; align-self:flex-end; background:none; border:none; color:inherit; font-size:var(--fs-h2); cursor:pointer; padding:6px; }

/* Hero -------------------------------------------------------------------- */
.hero{ position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; }
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--navy) 10%, rgba(20,26,51,.80) 44%, rgba(20,26,51,.30) 100%);
}
.hero::before{ z-index:1; }
.hero__in{
  position:relative; z-index:2;
  /* Asymmetric: the nav already provides air above, so the top needs
     less than the bottom. */
  padding-block:clamp(36px,4vw,68px) clamp(56px,7vw,120px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,468px);
  gap:clamp(28px,3.6vw,52px); align-items:center;
}
.hero__c{ max-width:38rem; }

/* Hero visuals ------------------------------------------------------------ */
/* One chart carries the point — valuation compounding — with the compliance
   figure hung off its corner as the reason it compounds. Everything animates
   from the .go class the hero script toggles, so the sequence can replay.    */
.viz{ position:relative; }

.viz__card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl);
  padding:24px 24px 16px;
  box-shadow:0 26px 60px rgba(6,9,24,.42);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  animation:viz-float 7s ease-in-out infinite;
}
@supports not (backdrop-filter:blur(2px)){ .viz__card{ background:rgba(22,28,56,.84); } }
@keyframes viz-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -9px; } }

.viz__head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:6px; }
.viz__t b{ display:block; font-size:var(--fs-ui); font-weight:700; letter-spacing:-0.02em; }
.viz__t span{ display:block; font-size:var(--fs-caption); color:#A7AFCE; margin-top:2px; }
.viz__mx{
  margin-left:auto; flex:none; display:inline-flex; align-items:center;
  font-size:var(--fs-caption); font-weight:700; letter-spacing:-0.01em;
  color:#7BE3A4; background:rgba(74,222,128,.14); border-radius:100px; padding:5px 11px;
}
.viz__mx .i{ margin-right:5px; }
.viz__mx b{ font-weight:800; font-variant-numeric:tabular-nums; }

/* Filing calendar ---------------------------------------------------------
   Replaces the valuation chart. The old graphic drew bars and a line over
   the same series — two encodings of one number — and claimed a 4.2x
   valuation multiple directly beneath copy promising that nothing reaches
   you the week it's due. A compliance firm's characteristic artifact is the
   statutory calendar, and that is also the claim it can actually stand
   behind, so the calendar is the graphic now. Dates are computed from the
   current date in the hero script; nothing here goes stale. */
.led{ list-style:none; margin:20px 0 0; padding:0; display:grid; }
.led__r{
  display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:14px; padding:12px 4px;
}
.led__r + .led__r{ border-top:1px solid rgba(255,255,255,.09); }

.led__f{ display:flex; align-items:baseline; gap:8px; min-width:0;
  font-size:var(--fs-ui); font-weight:700; letter-spacing:-0.01em; color:#fff; }
.led__f i{
  font-style:normal; font-family:var(--f-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:#8E96B8; flex:none;
}
.led__d{
  font-family:var(--f-mono); font-size:var(--fs-caption); color:#A7AFCE;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.led__s{
  display:inline-flex; align-items:center; gap:6px; justify-self:end;
  font-family:var(--f-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:5px 11px 5px 8px; border-radius:100px; white-space:nowrap;
}
.led__s .i{ font-size:var(--fs-caption); }
/* Filed and Ready are both good outcomes — the point of the card is that no
   row ever reads Pending — so Ready is a quieter neutral, not a warning. */
.led__s--filed{ color:#7BE3A4; background:rgba(123,227,164,.15); }
.led__s--ready{ color:#C4CAE2; background:rgba(255,255,255,.09); }
.led__s--filed .led__i--r,.led__s--ready .led__i--f{ display:none; }

.led__foot{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
  margin:15px 0 0; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
}
/* Label in mono, message in the body face. The rows above are codes and
   dates, which mono suits; this line is a sentence, which it does not. */
.led__lbl{
  font-family:var(--f-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:#8E96B8;
}
.led__val{
  font-family:var(--f); font-size:var(--fs-sm); font-weight:600;
  letter-spacing:-0.01em; color:#fff;
}
.led__dot{
  width:7px; height:7px; border-radius:50%; flex:none; align-self:center;
  background:#7BE3A4; box-shadow:0 0 0 3px rgba(123,227,164,.18);
}

/* Rows arrive in date order, and each status chip lands just after its row —
   the sequence reads as the month being worked through, top to bottom. */
.led__r{ opacity:0; transform:translateX(-12px); }
.go .led__r{ animation:led-row .5s cubic-bezier(.22,1,.36,1) forwards; }
.led__s{ opacity:0; transform:scale(.86); }
.go .led__s{ animation:led-chip .34s cubic-bezier(.22,1,.36,1) forwards; }
.led__foot{ opacity:0; }
.go .led__foot{ animation:led-foot .5s 1.5s ease forwards; }

.led__r:nth-child(1){ animation-delay:.10s } .led__r:nth-child(1) .led__s{ animation-delay:.34s }
.led__r:nth-child(2){ animation-delay:.22s } .led__r:nth-child(2) .led__s{ animation-delay:.46s }
.led__r:nth-child(3){ animation-delay:.34s } .led__r:nth-child(3) .led__s{ animation-delay:.58s }
.led__r:nth-child(4){ animation-delay:.46s } .led__r:nth-child(4) .led__s{ animation-delay:.70s }
.led__r:nth-child(5){ animation-delay:.58s } .led__r:nth-child(5) .led__s{ animation-delay:.82s }
.led__r:nth-child(6){ animation-delay:.70s } .led__r:nth-child(6) .led__s{ animation-delay:.94s }

@keyframes led-row { to{ opacity:1; transform:none; } }
@keyframes led-chip{ to{ opacity:1; transform:none; } }
@keyframes led-foot{ to{ opacity:1; } }

@media (max-width:1000px){
  .hero__in{ grid-template-columns:1fr; gap:44px; }
  .viz{ max-width:460px; }
  .viz__card{ animation:none; }
}
@media (max-width:420px){
  /* The footer line wraps to two rows here, so the dot aligns to the first
     line rather than floating in the middle of the block. */
  .led__foot{ align-items:flex-start; }
  .led__dot{ margin-top:5px; }
  .led__r{ grid-template-columns:1fr auto; row-gap:6px; padding:11px 2px; }
  .led__d{ grid-row:2; grid-column:1; font-size:var(--fs-meta); }
  .led__s{ grid-row:1 / span 2; grid-column:2; align-self:center; }
}
/* Nothing moves: every row sits at its finished state. */
@media (prefers-reduced-motion:reduce){
  .viz__card{ animation:none; }
  .led__r,.led__s,.led__foot{ opacity:1; transform:none; animation:none; }
}

.hero .eyebrow{ color:#fff; background:rgba(255,255,255,.13); padding:7px 15px; border-radius:100px; }
.hero .eyebrow::before{ background:var(--red); }
.hero h1{ margin-bottom:20px; }

/* Rotating headline word ---------------------------------------------------
   .rot is a masked, width-animated box. JS measures the next word and
   transitions the width, so the rest of the line glides instead of snapping.
   Descender room comes from padding-bottom + a matching negative margin, so
   the mask never clips the 'p' in Startups.                                  */
.rot{
  position:relative; display:inline-block; vertical-align:bottom;
  overflow:hidden; white-space:nowrap;
  padding-bottom:.16em; margin-bottom:-.16em;
  transition:width .5s cubic-bezier(.65,.02,.28,1);
}
.rot__w{
  display:inline-block; color:#FF7D7D;
  transition:transform .4s cubic-bezier(.33,0,.2,1), opacity .32s linear;
}
.rot__w.out{ transform:translateY(-.85em); opacity:0; }   /* leaving upward */
.rot__w.in { transform:translateY(.85em);  opacity:0; }   /* arriving from below */
.rot__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* No JS, or reduced motion: the first word simply sits there. */
@media (prefers-reduced-motion:reduce){
  .rot{ transition:none; }
  .rot__w{ transition:none; }
}
.hero p{ color:#C4CAE2; max-width:46ch; font-size:clamp(1.08rem,1.35vw,1.3rem); line-height:1.6; }
.hero .row{ margin-top:32px; }

/* Split with photo -------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.4vw,72px); align-items:center; }
/* Where one column is much shorter, centring leaves it floating. */
.split--top{ align-items:start; }
@media (max-width:940px){ .split{ grid-template-columns:1fr; } }
.stack-ph{ position:relative; padding-bottom:34px; }
.stack-ph .ph--main{ width:88%; }
.stack-ph .ph--sub{ position:absolute; right:0; bottom:0; width:46%; border:6px solid #fff; box-shadow:var(--sh-2); }
@media (max-width:640px){ .stack-ph{ padding-bottom:0; } .stack-ph .ph--main{ width:100%; } .stack-ph .ph--sub{ display:none; } }
.seal{
  position:absolute; left:-14px; bottom:56px; width:100px; height:100px; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center; font-size:var(--fs-h3);
  box-shadow:var(--sh-2); z-index:2;
}
@media (max-width:640px){ .seal{ display:none; } }

/* Feature rows ------------------------------------------------------------ */
.frow{ display:flex; gap:16px; align-items:flex-start; background:var(--tint); border-radius:var(--r-lg); padding:20px; margin-bottom:12px; }
.frow{ transition:border-color .18s, transform .18s; border:1px solid transparent; }
.frow:hover{ border-color:var(--line-2); }
.frow__ic{ width:46px; height:46px; border-radius:var(--r-sm); background:var(--card); color:var(--red); display:grid; place-items:center; font-size:var(--fs-h3); flex-shrink:0; box-shadow:var(--sh); }
.frow h3{ margin-bottom:5px; }
.frow p{ font-size:var(--fs-ui); color:var(--ink-2); margin:0; }

/* Cards ------------------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,22px); }
@media (max-width:1040px){ .cards,.cards--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cards,.cards--4{ grid-template-columns:1fr; } }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,32px); display:flex; flex-direction:column;
  text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s, border-color .2s;
}
a.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:transparent; }
/* Numeric variant: an index, not a badge. Ghosted mono numeral in the
   corner reads as a reference mark rather than a fake icon. */
.card__ic{
  font-family:var(--f-mono); font-size:34px; font-weight:300;
  line-height:1; letter-spacing:-0.03em;
  margin-bottom:16px;                    /* colour: --card-ic, see THEME */
  transition:color .2s;
}
/* Two variants, two hovers. The icon tile fills and the glyph flips to the
   button's on-red pair; the numeral index has no tile, so it just warms up.
   Previously a single blanket rule set both the tile and the glyph to --red,
   which painted the icon out of existence. */
a.card:hover .card__ic--i{ background:var(--red); color:var(--on-red); }
a.card:hover .card__ic:not(.card__ic--i){ color:var(--red); }

/* Icon variant: real pictogram in a tinted tile. */
/* Red: the brand accent. Green stays reserved for "handled" states — the
   pill ticks, the team list marks, the Filed chips. */
.card__ic--i{
  width:52px; height:52px; border-radius:var(--r-sm);
  background:var(--red-soft); color:var(--red);
  display:grid; place-items:center; font-size:var(--fs-h2);
  margin-bottom:20px; transition:background .2s,color .2s;
}
.card h3{ margin-bottom:10px; }
.card p{ font-size:var(--fs-ui); color:var(--ink-2); margin:0; }
.card__go{ margin-top:18px; font-size:var(--fs-sm); font-weight:700; color:var(--red); display:inline-flex; align-items:center; gap:8px; }
.card__go .i{ font-size:var(--fs-body); transition:transform .2s; }
a.card:hover .card__go .i{ transform:translateX(4px); }

/* Inline stats ------------------------------------------------------------ */
.stats{ display:flex; justify-content:center; gap:clamp(24px,4vw,64px); flex-wrap:wrap; margin-bottom:clamp(30px,3.4vw,52px); }
.stat{ display:flex; align-items:center; gap:12px; }
.stat b{
  font-family:var(--f-mono); font-size:clamp(1.85rem,2.9vw,2.5rem); font-weight:600;
  letter-spacing:-0.05em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat b::after{ content:'+'; color:var(--red); font-weight:400; margin-left:1px; }
.stat span{ font-size:var(--fs-caption); color:var(--ink-2); line-height:1.3; max-width:12ch; }

/* Practice index -----------------------------------------------------------
   A firm lists its practice areas rather than selling them, so this is an
   index: a group rule, then full-width rows of name / what it covers /
   where it goes. Presence comes from scale and air — no fill, no shadow,
   no radius anywhere in this section.

   ONE size and ONE colour per role, used by every row in both groups:

     name          clamp(24px,2.3vw,32px)   display serif, --ink
     description   --fs-body                --ink-2
     group label   --fs-caption             --red   (matches .eyebrow)
     group intro   --fs-ui                  --ink-2
     icon          26px                     --red
     arrow         22px                     --ink-3, --red on hover

   Advisory is distinguished by where it sits and what its label says, not
   by a bigger type size or a second accent colour. */

/* Header runs asymmetric — heading left, standfirst right — so this
   section does not open the same way as every other one. */
.ix__hd{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,72px); align-items:end;
  margin-bottom:clamp(36px,4.6vw,72px);
}
.ix__hd h2{ margin:0; }
.ix__lede{
  margin:0 0 6px; font-size:var(--fs-lead); line-height:1.55;
  color:var(--ink-2); max-width:44ch;
}

/* Group: a mono label with a rule running out to the full width. */
.ix__g{ display:grid; }
.ix__gh{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(16px,3vw,48px); align-items:baseline;
  padding-bottom:14px; border-bottom:2px solid var(--ink);
}
.ix__g + .ix__g{ margin-top:clamp(48px,5.4vw,88px); }
.ix__gl{
  margin:0; font-family:var(--f-mono); font-size:var(--fs-caption); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
}
.ix__gd{ margin:0; font-size:var(--fs-ui); color:var(--ink-2); line-height:1.5; }

/* Cards: four-up under Statutory compliance, two-up (wider) under Advisory.
   Replaces the old stacked index rows — a grid reads as "here is the whole
   menu" at a glance, where a tall list made the sixth item a scroll away. */
.ix__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px; }
.ix__grid--2{ grid-template-columns:repeat(2,1fr); }
.ix__card{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,28px); text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.ix__card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:transparent; }

/* Icon tile: solid red fill with a white glyph, same pairing as .btn, so
   the icon reads as an accent rather than a thin line lost on navy/tint. */
.ix__ic{
  width:48px; height:48px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--red); color:var(--on-red); display:grid; place-items:center;
  transition:background .2s;
}
.ix__ic .i{ width:23px; height:23px; }
.ix__card:hover .ix__ic{ background:var(--red-2); }

.ix__n{
  font-family:var(--f-display); font-weight:600; color:var(--ink);
  font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.01em;
}
.ix__d{ margin:0; font-size:var(--fs-ui); line-height:1.5; color:var(--ink-2); flex-grow:1; }
.ix__go{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-sm); font-weight:700; color:var(--red);
}
.ix__go .i{ width:18px; height:18px; transition:transform .2s; }
.ix__card:hover .ix__go .i{ transform:translateX(4px); }

@media (max-width:1024px){
  .ix__hd{ grid-template-columns:1fr; align-items:start; gap:18px; }
  .ix__lede{ max-width:60ch; font-size:var(--fs-body); }
  .ix__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .ix__grid,.ix__grid--2{ grid-template-columns:1fr; }
  .ix__gh{ grid-template-columns:1fr; gap:8px; }
}

/* Trust strip ---------------------------------------------------------------
   Sits directly under the hero, where the brief puts credibility. A tinted
   band (rather than a bare border-bottom) so it reads as its own step, with
   each figure in a small iconed card. The previous version set a negative
   letter-spacing on a bold mono numeral, which overlaps adjacent glyphs
   instead of kerning them — fixed by letting the numerals sit at their
   natural spacing. */
.trust{ background:var(--tint); border-block:1px solid var(--line); }
.trust__in{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:center; gap:clamp(24px,3vw,48px);
  padding-block:clamp(28px,3.2vw,40px);
}
.trust__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.2vw,16px);
}
.trust__f{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 16px;
}
.trust__ic{
  flex-shrink:0; width:38px; height:38px; border-radius:var(--r-sm);
  background:var(--red-soft); color:var(--red); display:grid; place-items:center;
}
.trust__ic .i{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.trust__t{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.trust__f b{
  font-family:var(--f-mono); font-size:20px; font-weight:600;
  line-height:1.2; font-variant-numeric:tabular-nums; color:var(--ink);
}
.trust__f span{ font-size:var(--fs-caption); color:var(--ink-2); line-height:1.3; }
.trust__n{
  margin:0; font-size:var(--fs-caption); color:var(--ink-2); line-height:1.6;
  border-left:1px solid var(--line); padding-left:clamp(20px,3vw,32px); max-width:46ch;
}

@media (max-width:1024px){
  .trust__in{ grid-template-columns:1fr; gap:20px; }
  .trust__n{ border-left:0; padding-left:0; padding-top:18px; border-top:1px solid var(--line); max-width:none; }
}
@media (max-width:640px){
  .trust__stats{ grid-template-columns:1fr; }
}

/* Hero: the secondary action and the trust line under the buttons --------- */
/* .btn--onnavy is the hero's outline button. The hero is navy in both
   themes, so it does not follow the page tokens. */
.btn--onnavy{
  background:transparent; border-color:rgba(255,255,255,.34); color:#fff;
}
.btn--onnavy:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.58); }

/* Why: pills either side of a photo ---------------------------------------- */
.why{ display:grid; grid-template-columns:1fr minmax(0,1.1fr) 1fr; gap:clamp(16px,2.4vw,34px); align-items:center; }
@media (max-width:940px){ .why{ grid-template-columns:1fr; } }
.pills{ display:grid; gap:14px; }
/* Navy surface, green mark. The tick carries the meaning — each line is a
   thing that has been confirmed — so the colour lives there rather than
   flooding the whole pill, which would shout over the photo between them.
   The border is not decoration: on the dark theme every surface separates
   by its edge rather than its fill, and this was the one component still
   relying on fill alone, so it collapsed into the page background.
   Each pill now carries a supporting line under its title, so the shape
   moved from a fully-rounded capsule (built for one line) to a softer
   rounded rect that can hold two without looking stretched. */
.pill{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--pill-bg); color:#fff;
  border:1px solid var(--pill-line);
  border-radius:var(--r-lg); padding:16px 20px;
  box-shadow:var(--sh);
  transition:background .18s, border-color .18s, transform .18s;
}
.pill i{
  width:26px; height:26px; border-radius:50%; margin-top:1px;
  background:rgba(123,227,164,.18); color:var(--good-bright);
  display:grid; place-items:center; font-size:var(--fs-caption); font-style:normal; flex-shrink:0;
  transition:background .18s, color .18s;
}
.pill__t{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.pill__t b{ font-size:var(--fs-ui); font-weight:700; line-height:1.3; }
.pill__t span{ font-size:var(--fs-caption); font-weight:400; color:rgba(255,255,255,.68); line-height:1.45; }
/* Hover: the mark fills in and the edge picks up the same green. */
/* One hover motion, not two. The slide-right documented above used to be
   unreachable on desktop: the motion layer added a translateY lift for
   .pill under (hover:hover), at equal specificity and later in the file,
   so it won on every mouse and trackpad. .pill is out of that list now. */
.pill:hover{ background:var(--pill-hover-bg); border-color:var(--pill-hover-line); transform:translateX(4px); }
.pill:hover i{ background:var(--good-bright); color:var(--pill-hover-ic); }
@media (max-width:940px){ .pills{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); } }

/* Closing line under the pills/photo grid — gives the section a floor
   instead of running out into blank padding, and bridges to "How we work". */
.why__cta{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:clamp(40px,5vw,64px); flex-wrap:wrap; text-align:center;
}
.why__cta p{ margin:0; font-size:var(--fs-ui); color:var(--ink-2); }
@media (max-width:940px){ .pill{ padding:14px 18px; } }

/* Team -------------------------------------------------------------------- */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px); }
@media (max-width:900px){ .team{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .team{ grid-template-columns:1fr; } }
.member{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.member .ph{ border-radius:0; }
.member__b{ padding:20px 22px 24px; }
.member b{ display:block; font-family:var(--f-display); font-size:1.3rem; font-weight:600; letter-spacing:-0.015em; }
.member small{ display:block; font-family:var(--f-mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-top:5px; }
.member ul{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }
.member li{ position:relative; padding-left:20px; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.5; }
.member li::before{
  content:''; position:absolute; left:0; top:8px;
  width:7px; height:7px; border-radius:50%; border:1.5px solid var(--good);
}
.member{ transition:box-shadow .2s, transform .2s; }
.member:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }

/* CTA band ---------------------------------------------------------------- */
.band{ position:relative; overflow:hidden; background:var(--navy); color:#fff; border-radius:var(--r-xl); padding:clamp(28px,3.6vw,56px); display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
.band > *{ position:relative; z-index:1; }
@media (max-width:900px){ .band{ grid-template-columns:1fr; } }
.band h2{ color:#fff; }
.band .eyebrow{ color:#fff; }
.chips{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.1); border-radius:100px; padding:12px 22px 12px 12px; text-decoration:none; }
.chip{ transition:background .18s; }
.chip:hover{ background:rgba(255,255,255,.18); }
.chip i{ width:40px; height:40px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-style:normal; font-size:var(--fs-lead); }
.chip span{ display:block; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:#A9B1CE; }
.chip b{ display:block; font-family:var(--f-mono); font-size:var(--fs-ui); font-weight:500; letter-spacing:-0.01em; margin-top:2px; }

/* Flow / FAQ / quotes ----------------------------------------------------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,20px); }
.flow--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1040px){ .flow,.flow--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .flow,.flow--3{ grid-template-columns:1fr; } }
.flow__s{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.2vw,30px); }
.flow__s{ position:relative; transition:border-color .2s; }
.flow__s:hover{ border-color:var(--line-2); }
.flow__s b{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--red-soft); color:var(--red);
  font-family:var(--f-mono); font-size:var(--fs-caption); font-weight:500; letter-spacing:.02em;
  margin-bottom:16px;
}
.flow__s h3{ margin-bottom:8px; }
.flow__s p{ font-size:var(--fs-ui); color:var(--ink-2); margin:0; }

.faq{ display:grid; gap:10px; max-width:54rem; margin:0 auto; }
.faq details{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:20px 24px; display:flex; gap:20px; justify-content:space-between; align-items:flex-start; font-size:1.02rem; font-weight:700; }
.faq summary::-webkit-details-marker{ display:none; }
/* Rotating chevron rather than a +/– character pair, which changed metrics
   between the two states and made the row jump. */
.faq summary::after{
  content:''; flex:none; width:20px; height:20px; margin-top:2px;
  background:currentColor; color:var(--red);
  -webkit-mask:var(--chev) center/20px 20px no-repeat;
          mask:var(--chev) center/20px 20px no-repeat;
  transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(180deg); }
.faq details[open]{ border-color:var(--line-2); }
.faq summary:hover{ background:var(--tint); }
.faq p{ padding:0 24px 22px; margin:0; color:var(--ink-2); font-size:var(--fs-ui); }

/* Testimonials scroll continuously. The track holds two copies of the set and
   translates by exactly -50%, so the loop is seamless. Edges fade out via a
   mask rather than a gradient overlay, which would break on the tinted band. */
.says{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.says__t{ display:flex; gap:clamp(12px,1.5vw,22px); width:max-content; animation:sayScroll 48s linear infinite; }
.says:hover .says__t,.says:focus-within .says__t{ animation-play-state:paused; }
@keyframes sayScroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){
  /* No auto-scroll — becomes a normal swipeable row. */
  .says{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; scroll-snap-type:x mandatory; }
  .says__t{ animation:none; }
  .say{ scroll-snap-align:start; }
}
.say{ flex:0 0 clamp(280px,30vw,400px); margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,2.4vw,30px); display:flex; flex-direction:column; }
.say p{ font-size:var(--fs-ui); color:var(--ink-2); margin:0 0 20px; }
.say footer{ margin-top:auto; display:flex; align-items:center; gap:11px; }
.say{ position:relative; }
.say::before{
  content:'\201C'; position:absolute; top:6px; right:20px;
  font-family:var(--f-display); font-size:76px; line-height:1;
  color:var(--tint-2); pointer-events:none;
}
.say > *{ position:relative; }
.say .av{ width:40px; height:40px; border-radius:50%; background:var(--good-soft); color:var(--good); display:grid; place-items:center; font-family:var(--f-mono); font-size:var(--fs-meta); font-weight:600; letter-spacing:.02em; }
.say b{ display:block; font-size:var(--fs-ui); font-weight:700; }
.say small{ font-size:var(--fs-caption); color:var(--ink-3); }

/* Footer ------------------------------------------------------------------ */
.foot{ background:var(--navy); color:#A9B1CE; padding-block:clamp(36px,4.2vw,60px) 24px; }
.foot__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px; }
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
/* h3, not h4: the last heading before the footer is an h2 on every page,
   so h4 skipped a level for anyone navigating by heading. */
/* h3, not h4: the last heading before the footer is an h2 on every page,
   so h4 skipped a level for anyone navigating by heading. h4 inherited
   body's 1.65 line-height; h3 is caught by the h1,h2,h3 reset, so the
   value is restored explicitly to keep the footer metrics identical. */
.foot h3{ line-height:1.65; text-wrap:auto; font-family:var(--f-mono); font-size:var(--fs-meta); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.foot a{ display:block; padding:5px 0; font-size:var(--fs-ui); color:#A9B1CE; text-decoration:none; }
.foot a:hover{ color:#fff; }
/* `.foot a{display:block}` outranks `.brand{display:flex}`, so the footer
   lockup lost its row: the mark and the wordmark sat flush and 8px out of
   vertical alignment. Restating it at matching specificity fixes both. */
.foot .brand{ display:inline-flex; align-items:center; gap:10px; }
.foot .brand b{ color:#fff; }
.foot__bar{ border-top:1px solid rgba(255,255,255,.13); margin-top:38px; padding-top:20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:var(--fs-caption); }

/* Intro ------------------------------------------------------------------- */
#intro{
  position:fixed; inset:0; z-index:9000; background:var(--navy);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  transition:opacity .7s ease, visibility .7s ease;
}
#intro.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-logo{ width:88px; height:auto; animation:introLogo 1s cubic-bezier(.22,1,.36,1) both; }
.intro-name{ font-family:var(--f); font-size:clamp(2rem,4.6vw,3rem); font-weight:800; letter-spacing:-0.04em; color:#fff; animation:introName .9s .2s cubic-bezier(.22,1,.36,1) both; }
.intro-line{ width:0; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--red),transparent); animation:introLine .8s .6s ease forwards; }
.intro-tag{ font-family:var(--f-mono); font-size:var(--fs-meta); color:#8189A5; letter-spacing:.24em; text-transform:uppercase; opacity:0; animation:introTag .7s .9s ease both; }
@keyframes introLogo{ from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
@keyframes introName{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes introLine{ to{ width:min(220px,50vw) } }
@keyframes introTag{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ #intro{ display:none !important; } }

/* Reveal ------------------------------------------------------------------ */
.rise{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.rise.on{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rise{ opacity:1; transform:none; } }

/* Form -------------------------------------------------------------------- */
.fld{ margin-bottom:14px; }
.fld2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .fld2{ grid-template-columns:1fr; } }
.fld label{ display:block; font-family:var(--f-mono); font-size:var(--fs-meta); font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); margin-bottom:7px; }
.fld label span{ color:var(--red); }
.fld input,.fld select,.fld textarea{
  width:100%; font-family:inherit; font-size:var(--fs-ui); color:var(--ink);
  background:var(--tint); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; outline:none; transition:border-color .16s, box-shadow .16s;
}
.fld textarea{ resize:vertical; min-height:100px; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
.fld input::placeholder,.fld textarea::placeholder{ color:var(--ink-3); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ferr{ background:var(--red-soft); color:var(--red); font-size:var(--fs-sm); border-radius:12px; padding:11px 14px; margin:0 0 12px; }
.fnote{ font-size:var(--fs-caption); color:var(--ink-3); text-align:center; margin:12px 0 0; }
#fdone{ text-align:center; padding:12px 0; }
.fdone__ic{ width:54px; height:54px; border-radius:50%; background:var(--good-soft); color:var(--good); display:grid; place-items:center; font-size:var(--fs-h2); margin:0 auto 18px; }
#fdone p{ color:var(--ink-2); font-size:var(--fs-ui); margin:10px 0 0; }

/* ==========================================================================
   Added layer — icon assets, surface polish, dark theme
   ========================================================================== */

/* Chevron used by the FAQ marker, as a mask so it inherits colour. */
:root{
  --chev:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Surface polish ---------------------------------------------------------- */
::selection{ background:var(--red); color:#fff; }
.hero ::selection,.band ::selection,.dark ::selection,.foot ::selection{ background:#fff; color:var(--navy); }

/* Firefox */
html{ scrollbar-color:var(--line-2) transparent; scrollbar-width:thin; }
/* WebKit */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:100px; border:3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:var(--ink-3); }

/* Scroll progress: a 2px red rule under the sticky header. Nothing is
   animated on scroll except this, so it stays cheap. */
.prog{
  position:fixed; top:0; left:0; height:2px; z-index:80;
  width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:var(--red); pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .prog{ display:none; } }

/* The sub-photo's border is a print mount: its job is to separate one
   photograph from the photograph behind it, so it has to stay light in both
   themes. Pointing it at --card made it near-black on the dark theme and it
   disappeared into the image underneath. */
.stack-ph .ph--sub{
  /* .ph img carries z-index:1 (it has to cover the placeholder pattern), so
     the MAIN photo was painting in the positive-z layer while the sub-photo
     sat at z:auto. Its own image still won on DOM order, but its border did
     not — which is why the white showed only where the sub overhangs onto
     the page and vanished wherever the two photos overlap. Lift the whole
     sub element, border included, above the main image. */
  z-index:2;
  border-color:rgba(255,255,255,.55);
  /* The border box would otherwise be filled by .ph's own background, so a
     translucent border would show that rather than the photo behind it.
     padding-box keeps the fill inside the frame. */
  background-clip:padding-box;
  /* A hairline outside the white keeps the mount from glaring where it
     overhangs the main photo onto the dark page. */
  outline:1px solid rgba(10,14,30,.22);
  outline-offset:-7px;
}

/* Numbers anywhere should line up. */
.num,.stat b,.chip b,time{ font-variant-numeric:tabular-nums; }

/* Links inside body copy get a real underline rather than colour alone. */
.lede a,.card p a,.faq p a{ text-underline-offset:3px; text-decoration-thickness:1px; }

/* ==========================================================================
   THEME
   --------------------------------------------------------------------------
   One source of truth per colour. The dark palette is declared once, as
   --d-* values on :root, and the two selectors that can turn dark on
   (the OS preference and the explicit toggle) only re-point the live
   tokens at it. Previously both selectors carried a full copy of the
   palette — forty declarations kept in sync by hand — so a value changed
   in one place and not the other made the OS-driven and toggle-driven
   dark themes silently diverge.

   Nothing below styles a component. If a component needs to look
   different in dark, it gets a token here and reads it unconditionally.
   ========================================================================== */

:root{
  /* -- dark palette: declared, not applied ------------------------------- */
  --d-bg:#0D1122;
  --d-card:#151A30;
  --d-tint:#111629;
  --d-tint-2:#1B2240;
  --d-navy:#080B18;
  --d-navy-2:#141A33;

  --d-ink:#EDEFF7;
  --d-ink-2:#A2A9C6;
  --d-ink-3:#8A91B0;
  --d-line:#252C48;
  --d-line-2:#39416A;

  --d-red:#FF6B6B;
  --d-red-2:#FF8787;
  --d-red-soft:#2A1620;
  --d-on-red:#1A0A0E;

  --d-good:#7BE3A4;
  --d-good-soft:#12301F;

  --d-sh:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.35);
  --d-sh-2:0 14px 44px rgba(0,0,0,.55);

  /* -- component tokens, light values ------------------------------------
     Each of these replaced a rule that existed twice, once under each dark
     selector. The component now reads the token and never asks which
     theme it is in. */
  --nav-bg:rgba(255,255,255,.93);
  --nav-line:var(--line);
  --band:#1E2749;                    /* full-width navy section fill */
  --band-step:#28325C;               /* a panel sitting on that band */
  --band-line:rgba(255,255,255,.15);

  /* .dark is the full-bleed process band; .band is the rounded panel. Both
     used to be declared across seven layers — a base rule, two dark
     selectors and two light selectors — with the bodies duplicated. Now
     one rule each, driven by these. */
  --dark-bg:#1E2749;
  --dark-img:linear-gradient(180deg, #1A2242 0%, #1E2749 24%, #1E2749 76%, #1A2242 100%);
  --dark-edge:rgba(255,255,255,.10);   /* the .dark base hairline */
  --band-bg:#1E2749;
  --band-img:linear-gradient(168deg, #26325E 0%, #1E2749 58%, #1A2242 100%);
  --band-edge:rgba(255,255,255,.07);
  --band-shadow:none;

  --card-ic:var(--ink-2);            /* ghosted numeral index; --line-2
                                        measured 1.57:1 and was invisible */
  --card-hover-line:var(--line-2);

  --pill-bg:var(--navy-2);
  --pill-line:rgba(255,255,255,.14);
  --pill-hover-bg:var(--navy);
  --pill-hover-line:var(--good-bright);
  --pill-hover-ic:var(--navy);

  --ph-wash:linear-gradient(135deg, rgba(192,0,0,.06), rgba(20,26,51,.11));
  --ph-hatch:rgba(20,26,51,.05);
  --ph-glyph:rgba(20,26,51,.13);
  --say-mark:var(--line-2);

  --foot-line:none;                  /* dark-only hairline; see THEME dark */
  --drawer-bg:#FFFFFF;

  /* Focus ring. Previously written as var(--red-a, <literal>) with --red-a
     never defined anywhere, so the light-theme literal fired in both
     themes and the dark focus ring did not match --red. */
  --red-a:rgba(192,0,0,.12);

  /* -- text and accent on navy -------------------------------------------
     These twelve values were hard-coded literals repeated across the file:
     #A7AFCE nine times, #B9C0DA six, #8E96B8 five. Navy is navy in both
     themes, so these do not change with the theme. */
  --on-navy:#B9C0DA;
  --on-navy-2:#A7AFCE;
  --on-navy-3:#8E96B8;
  --accent-navy:#FF7D7D;

  /* Calendar day states. The hero calendar sits on navy in both themes, so
     these follow the navy sub-palette rather than the page tokens. */
  --day-on:var(--navy);
  --day-on-edge:var(--navy);
  --day-today-edge:#EDEFF7;
}

/* Dark, by OS preference — unless the reader has explicitly chosen light. */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --bg:var(--d-bg);
    --card:var(--d-card);
    --tint:var(--d-tint);
    --tint-2:var(--d-tint-2);
    --navy:var(--d-navy);
    --navy-2:var(--d-navy-2);

    --ink:var(--d-ink);
    --ink-2:var(--d-ink-2);
    --ink-3:var(--d-ink-3);
    --line:var(--d-line);
    --line-2:var(--d-line-2);

    --red:var(--d-red);
    --red-2:var(--d-red-2);
    --red-soft:var(--d-red-soft);
    --on-red:var(--d-on-red);

    --good:var(--d-good);
    --good-soft:var(--d-good-soft);

    --sh:var(--d-sh);
    --sh-2:var(--d-sh-2);

    --nav-bg:rgba(13,17,34,.90);
    --band:#1B2445;
    --band-step:#242E56;
    --dark-bg:#1B2445;
    /* Starts at the page colour exactly and drops the hairline, so the
       full-bleed band arrives over ~90px instead of at a visible seam. */
    --dark-img:linear-gradient(180deg, var(--bg) 0%, #1B2445 15%, #1B2445 85%, var(--bg) 100%);
    --dark-edge:transparent;
    /* Transparent fill so the panel takes whatever section it sits in —
       seamless on the plain page and the tinted service pages alike. The
       interior lift is alpha, for the same reason. */
    --band-bg:transparent;
    --band-img:radial-gradient(farthest-side ellipse at 50% 44%,
      rgba(112,134,220,.17) 0%, rgba(84,104,182,.11) 42%,
      rgba(52,66,132,.045) 74%, transparent 100%);
    --band-edge:var(--line-2);
    --band-shadow:none;
    --card-ic:var(--ink-3);
    --card-hover-line:var(--line-2);
    --pill-bg:var(--card);
    --pill-line:var(--line-2);
    --pill-hover-bg:var(--tint-2);
    --pill-hover-line:var(--good-bright);
    --pill-hover-ic:#0D1122;
    --ph-wash:linear-gradient(135deg, rgba(255,107,107,.06), rgba(255,255,255,.04));
    --ph-hatch:rgba(255,255,255,.045);
    --ph-glyph:rgba(255,255,255,.11);
    --say-mark:var(--line);
    --foot-line:1px solid var(--line);
    --drawer-bg:var(--bg);
    --red-a:rgba(255,107,107,.16);

    /* --navy is darker than --card here, so a selected day was punching a
       hole in the grid instead of lifting out of it. */
    --day-on:#2E3A6B;
    --day-on-edge:#3D4C87;

    color-scheme:dark;
  }
}

/* Dark, by explicit choice — independent of the OS setting. Same
   assignments; the values themselves live once, above. */
html[data-theme="dark"]{
  --bg:var(--d-bg);
  --card:var(--d-card);
  --tint:var(--d-tint);
  --tint-2:var(--d-tint-2);
  --navy:var(--d-navy);
  --navy-2:var(--d-navy-2);

  --ink:var(--d-ink);
  --ink-2:var(--d-ink-2);
  --ink-3:var(--d-ink-3);
  --line:var(--d-line);
  --line-2:var(--d-line-2);

  --red:var(--d-red);
  --red-2:var(--d-red-2);
  --red-soft:var(--d-red-soft);
  --on-red:var(--d-on-red);

  --good:var(--d-good);
  --good-soft:var(--d-good-soft);

  --sh:var(--d-sh);
  --sh-2:var(--d-sh-2);

  --nav-bg:rgba(13,17,34,.90);
  --band:#1B2445;
  --band-step:#242E56;
  --dark-bg:#1B2445;
  /* Starts at the page colour exactly and drops the hairline, so the
     full-bleed band arrives over ~90px instead of at a visible seam. */
  --dark-img:linear-gradient(180deg, var(--bg) 0%, #1B2445 15%, #1B2445 85%, var(--bg) 100%);
  --dark-edge:transparent;
  /* Transparent fill so the panel takes whatever section it sits in —
     seamless on the plain page and the tinted service pages alike. The
     interior lift is alpha, for the same reason. */
  --band-bg:transparent;
  --band-img:radial-gradient(farthest-side ellipse at 50% 44%,
    rgba(112,134,220,.17) 0%, rgba(84,104,182,.11) 42%,
    rgba(52,66,132,.045) 74%, transparent 100%);
  --band-edge:var(--line-2);
  --band-shadow:none;
  --card-ic:var(--ink-3);
  --card-hover-line:var(--line-2);
  --pill-bg:var(--card);
  --pill-line:var(--line-2);
  --pill-hover-bg:var(--tint-2);
  --pill-hover-line:var(--good-bright);
  --pill-hover-ic:#0D1122;
  --ph-wash:linear-gradient(135deg, rgba(255,107,107,.06), rgba(255,255,255,.04));
  --ph-hatch:rgba(255,255,255,.045);
  --ph-glyph:rgba(255,255,255,.11);
  --say-mark:var(--line);
  --foot-line:1px solid var(--line);
  --drawer-bg:var(--bg);
  --red-a:rgba(255,107,107,.16);

  /* --navy is darker than --card here, so a selected day was punching a
     hole in the grid instead of lifting out of it. */
  --day-on:#2E3A6B;
  --day-on-edge:#3D4C87;

  color-scheme:dark;
}

/* Components, written once, reading the tokens above. */
.nav{ background:var(--nav-bg); }
.drawer{ background:var(--drawer-bg); }
.btn--line:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.ph{ background:var(--ph-wash), var(--tint-2); }
.ph::before{ background-image:repeating-linear-gradient(-45deg, var(--ph-hatch) 0 1px, transparent 1px 11px); }
.ph::after{ color:var(--ph-glyph); }
.say::before{ color:var(--say-mark); }
.card__ic:not(.card__ic--i){ color:var(--card-ic); }
a.card:hover{ border-color:var(--card-hover-line); }
.foot{ border-top:var(--foot-line); }
*::-webkit-scrollbar-thumb{ border-color:var(--bg); }

/* Corrections ------------------------------------------------------------- */
/* .chip span sets uppercase for the label; the address underneath must opt out. */
.chip b{ text-transform:none; letter-spacing:-0.01em; }

/* On the dark theme --red lightens, so a hard-coded white glyph on it loses
   contrast. Both of these follow the button's on-red pair instead. */
.arw{ color:var(--on-red); }
.chip i{ color:var(--on-red); }

.card__ic--i{ font-size:var(--fs-h2); }

/* The wordmark was breaking across two lines next to the header CTA. */
.brand b{ white-space:nowrap; }
@media (max-width:480px){
  .nav__in{ gap:12px; }
  .nav .btn{ padding:10px 16px; font-size:var(--fs-sm); }
  .brand b{ font-size:var(--fs-body); }
}

/* Below ~480px the wordmark, the header CTA and the burger together exceed
   the viewport, which forced a horizontal scroll on the whole page. The
   logo is already a wordmark, so the text lockup is redundant here. */
@media (max-width:480px){
  .brand b{ display:none; }
  .nav__in{ gap:10px; }
}

/* Grid items default to min-width:auto, so a wide form control inside a
   1fr track can push the whole track past the viewport. Contact ran 28px
   over at 320px for this reason. */
.split > *,.why > *,.band > *,.fld2 > *,.hero__in > *{ min-width:0; }
.fld input,.fld select,.fld textarea{ min-width:0; }

/* .btn is nowrap by design so labels don't break mid-phrase, but the long
   "Prefer to call? +91 89396 11550" link on the contact page then ran 28px
   past a 320px viewport. Allow wrapping only where it has to. */
@media (max-width:480px){
  .btn{ white-space:normal; text-align:center; }
}

/* Contrast corrections ----------------------------------------------------
   Found by measuring every text and icon colour against its painted
   background, idle and on hover, in both themes. */

/* 2. The earlier .arw fix pointed the glyph at --on-red so it stayed legible
      on the red disc. .arw--ghost has no disc — it sits directly on the navy
      hero — so in dark mode it inherited a near-black arrow on navy: 1.02:1,
      invisible on every page. */
.arw:not(.arw--ghost){ color:var(--on-red); }
.arw--ghost{ color:#fff; }
/* Its hover fills white, so the glyph must go dark regardless of theme. */
.arw--ghost:hover{ background:#fff; color:#141A33; }

/* 3. Utility-strip icons were sitting at .7 opacity and reading as smudges. */
.util a .i{ opacity:.85; }

/* .card__ic, .card__ic--i, a.card:hover and .pill are all tokenised in the
   THEME section now — they used to appear twice here, once under each dark
   selector, with identical bodies. */

/* Lightened bands -----------------------------------------------------------
   Two named sections only — "How we work" and "Schedule your free
   consultation". Both sat at --navy, the same depth as the hero, which made
   the lower half of the page read as heavy. Lifting just these two also
   gives the page a hierarchy it didn't have: the hero stays deepest, and the
   mid-page bands sit a step above it. Everything else is untouched, and this
   applies in both themes. */
.dark,.band{ background:var(--band); }
.dark .flow__s{ background:var(--band-step); border-color:var(--band-line); }
.chip{ background:rgba(255,255,255,.12); }
.chip:hover{ background:rgba(255,255,255,.20); }

/* Team portraits ------------------------------------------------------------
   These were sharing the generic .ph--4x3 landscape frame. A headshot source
   is portrait, so object-fit:cover had to discard roughly half its height —
   taking the crown of the head off the top and the torso off the bottom.
   A portrait frame for portrait photography. */
/* 4/5 gave a tall portrait that dominates the card, especially while the
   photos are still placeholders. 1/1 keeps a head-and-shoulders crop
   without the frame running the height of the viewport. */
.member .ph{ aspect-ratio:1/1; }
/* Mild upward bias: if anything still has to go, lose the waist rather than
   the top of the head. */
.member .ph img{ object-position:50% 28%; }

/* CTA band: dissolve the edge -----------------------------------------------
   The band was a flat rectangle of one colour dropped onto a flat page of
   another, so its outline was the first thing the eye caught. Two changes:
   the fill is now a gradient rather than a single value, and the block casts
   a wide, very soft glow in its OWN colour instead of black — so the page
   ramps up to the band across ~90px rather than stepping to it at a hard
   line. The radius carries the glow, so it stays a rounded shape. */
/* Colour and image both: a bare `background:linear-gradient(...)` clears
   background-color, which would leave white type on nothing if the
   gradient failed to paint. */
.band{
  background-color:var(--band-bg);
  background-image:var(--band-img);
  border:1px solid var(--band-edge);
  box-shadow:var(--band-shadow);
}

/* The full-bleed process band meets the page top and bottom. */
.dark{
  background-color:var(--dark-bg);
  background-image:var(--dark-img);
  border-block-color:var(--dark-edge);
}

/* On the light theme the band is a dark card on white, where a crisp edge
   is correct — that is the --dark-* default in the THEME section, so the
   two light-theme clones that used to live here are gone. */

/* The CTA now continues the FAQ's tinted band on the service pages, so the
   two sit flush. Without this the pair would draw two hairlines back to
   back at the join — the very seam the merge was meant to remove. */
.tint + .tint{
  border-top:0;
  /* Dropping the second band's top border isn't enough — the FIRST band's
     bottom border still draws at the join. Pulling up 1px lets the second
     section's own background paint over it. */
  margin-top:-1px;
}


/* Service hero: one uniform height ------------------------------------------
   Five of the six titles fit on one line; "Accounting & MIS Services" wraps
   to two, which made that hero 67px taller at desktop and 40px at mobile.
   Rather than pin a pixel height — which would need a different value at
   every breakpoint and break the moment a title is edited — the h1 simply
   reserves two lines. The flex centring means a one-line title sits in the
   middle of that box, so the reserved space reads as spacing rather than a
   gap under the heading. */
.hero--svc h1{
  min-height:2.12em;          /* 2 lines at the h1's 1.06 line-height */
  display:flex;
  align-items:center;
}
@media (max-width:1000px){
  /* Titles wrap more readily in the single-column layout, so allow the box
     to grow past two lines instead of clipping. */
  .hero--svc h1{ display:block; min-height:2.12em; }
}

/* Floating actions ----------------------------------------------------------
   WhatsApp is permanent; back-to-top only appears once there is something to
   go back up from. Both slots always occupy space, so revealing the top
   button never nudges the WhatsApp one — the target stays where the thumb
   last found it. */
.fab{
  position:fixed; z-index:80;
  right:clamp(14px,2.2vw,26px);
  bottom:clamp(14px,2.2vw,26px);
  /* Clear of the iOS home indicator on phones. */
  padding-bottom:env(safe-area-inset-bottom, 0px);
  display:grid; gap:12px; justify-items:center;
}
.fab__btn{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  border:none; cursor:pointer; text-decoration:none;
  box-shadow:0 6px 22px rgba(6,9,24,.34);
  transition:transform .18s, background .18s, opacity .25s, visibility .25s;
}
.fab__btn:active{ transform:scale(.94); }

.fab__wa{ background:#25D366; color:#06331B; }
.fab__wa:hover{ background:#1EB755; transform:translateY(-3px); }
.fab__wa-i{ width:28px; height:28px; fill:currentColor; stroke:none; }

.fab__top{
  background:var(--navy-2); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  font-size:var(--fs-h3);
  opacity:0; visibility:hidden; transform:translateY(10px);
}
.fab__top.on{ opacity:1; visibility:visible; transform:none; }
.fab__top:hover{ background:var(--red); border-color:var(--red); transform:translateY(-3px); }

@media (max-width:520px){
  .fab__btn{ width:48px; height:48px; }
  .fab__wa-i{ width:26px; height:26px; }
}
@media (prefers-reduced-motion:reduce){
  /* Moved to the end of the MOTION section — see the note there. */
  .fab__btn:hover{ transform:none; }
}

/* Compliance calendar -------------------------------------------------------
   A public reference page. It reuses the ledger vocabulary from the hero
   card — mono for dates and codes, sans for prose — so the two read as one
   system rather than two different tables. */
.fchips{ display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 20px; }
.fchip{
  font:600 13.5px/1 var(--f); letter-spacing:-0.01em;
  padding:11px 18px; border-radius:100px; cursor:pointer;
  background:var(--card); color:var(--ink-2);
  border:1px solid var(--line);
  transition:background .16s, color .16s, border-color .16s;
}
.fchip:hover{ border-color:var(--line-2); color:var(--ink); }
.fchip.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }

.cal__count{
  font-family:var(--f-mono); font-size:var(--fs-meta); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 24px;
}
.cal__note{
  margin:32px 0 0; padding:16px 20px; border-radius:var(--r-sm);
  background:var(--tint); border:1px solid var(--line);
  font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2);
}
.cal__none{ color:var(--ink-2); font-size:var(--fs-ui); }

.cmo{ margin:0 0 30px; }
.cmo__h{
  font-family:var(--f-mono); font-size:var(--fs-meta); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
  margin:0 0 6px; padding-bottom:10px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:9px;
}
.cmo__h i{ font-style:normal; color:var(--ink-2); letter-spacing:.1em; }

.cmo__l{ list-style:none; margin:0; padding:0; }
.cmo__r{
  display:grid; grid-template-columns:56px 1fr auto;
  gap:16px; align-items:center; padding:14px 0;
}
.cmo__r + .cmo__r{ border-top:1px solid var(--line); }
/* Dates already gone stay listed — the year has a shape, and hiding half of
   it makes the page less useful — but they recede. */
.cmo__r.is-past{ opacity:.42; }

.cmo__d{
  display:grid; place-items:center; padding:7px 0;
  border-radius:var(--r-sm); background:var(--tint); border:1px solid var(--line);
}
.cmo__d b{
  font-family:var(--f-mono); font-size:var(--fs-lead); font-weight:600;
  line-height:1; letter-spacing:-0.03em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cmo__d i{
  font-style:normal; font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-top:3px;
}

.cmo__b{ min-width:0; }
.cmo__b b{ display:block; font-size:var(--fs-ui); font-weight:700; letter-spacing:-0.01em; }
.cmo__b span{ display:block; font-size:var(--fs-sm); line-height:1.5; color:var(--ink-2); margin-top:3px; }

.cmo__a{ display:flex; align-items:center; gap:12px; }
.cmo__t{
  font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  padding:5px 10px; border-radius:100px; background:var(--tint);
  border:1px solid var(--line); white-space:nowrap;
}
.cmo__ics{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; font-size:var(--fs-lead);
  background:none; color:var(--ink-3); border:1px solid var(--line);
  transition:background .16s, color .16s, border-color .16s;
}
.cmo__ics:hover{ background:var(--good-soft); color:var(--good); border-color:var(--good); }

@media (max-width:720px){
  .cmo__r{ grid-template-columns:48px 1fr; row-gap:10px; }
  .cmo__a{ grid-column:2; justify-content:flex-start; }
  .cmo__b span{ font-size:var(--fs-caption); }
}

/* Calendar reminder signup --------------------------------------------------
   Sits between the dates and the closing note: the moment someone has just
   scrolled a year of deadlines is the moment they most want them pushed. */
.sub{
  margin:36px 0 0; padding:clamp(22px,3vw,34px);
  border-radius:var(--r-lg);
  background:var(--tint); border:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(20px,3vw,40px); align-items:center;
}
.sub__c h2{ font-size:clamp(1.4rem,2.1vw,1.85rem); margin-bottom:9px; }
.sub__c p{ margin:0; font-size:var(--fs-ui); line-height:1.6; color:var(--ink-2); }

.sub__lb{
  display:block; font-family:var(--f-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2); margin-bottom:8px;
}
.sub__row{ display:flex; flex-wrap:wrap; gap:9px; }
.sub__row input,.sub__row select{
  flex:1 1 190px; min-width:0;
  padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:400 15px/1.2 var(--f);
}
.sub__row select{ flex:0 1 165px; cursor:pointer; }
.sub__row input:focus-visible,.sub__row select:focus-visible{
  outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);
}
.sub__row .btn{ flex:0 0 auto; }

.sub__msg{ margin:12px 0 0; font-size:var(--fs-sm); line-height:1.5; }
.sub__msg.is-ok{ color:var(--good); }
.sub__msg.is-err{ color:var(--red); }
.sub__fine{ margin:10px 0 0; font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }

@media (max-width:860px){
  .sub{ grid-template-columns:1fr; }
  .sub__row .btn{ flex:1 1 100%; }
}

/* Credential access log (admin) --------------------------------------------- */
.alog__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px; }
.alog__bar .cal__count{ margin:0; }
.alog{ list-style:none; margin:0; padding:0; }
.alog__r{
  display:grid; grid-template-columns:76px 1fr auto; gap:16px;
  align-items:center; padding:13px 0; border-top:1px solid var(--line);
}
.alog__t{
  font-family:var(--f-mono); font-size:var(--fs-caption); color:var(--ink-2);
  font-variant-numeric:tabular-nums; display:grid; gap:2px;
}
.alog__t i{ font-style:normal; font-size:var(--fs-label); color:var(--ink-3); }
.alog__w b{ display:block; font-size:var(--fs-ui); font-weight:700; letter-spacing:-0.01em; }
.alog__w span{ display:block; font-size:var(--fs-sm); color:var(--ink-2); margin-top:2px; }
/* A bulk reveal exposes every credential at once, so it is flagged rather
   than listed identically to a single lookup. */
.alog__b{
  font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red); background:var(--red-soft);
  border:1px solid var(--red); border-radius:100px; padding:5px 11px; white-space:nowrap;
}
.alog__r.is-bulk .alog__w b{ color:var(--red); }
@media (max-width:600px){
  .alog__r{ grid-template-columns:64px 1fr; row-gap:8px; }
  .alog__b{ grid-column:2; justify-self:start; }
}

/* Legal pages ---------------------------------------------------------------
   Narrower measure than the marketing pages: this is text to be read
   carefully, not scanned. */
.leg{ max-width:760px; }
.leg h1{ margin-bottom:14px; }
.leg .lede{ margin:0 0 6px; }
.leg__d{
  font-family:var(--f-mono); font-size:var(--fs-meta); letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 8px;
}
.leg__s{ padding-top:30px; margin-top:30px; border-top:1px solid var(--line); }
.leg__s h2{ font-size:clamp(1.25rem,1.9vw,1.6rem); margin-bottom:12px; }
.leg__s p{ margin:0 0 14px; font-size:var(--fs-ui); line-height:1.72; color:var(--ink-2); }
.leg__s p:last-child{ margin-bottom:0; }
.leg__s b{ color:var(--ink); font-weight:700; }
.leg__s a{ color:var(--red); text-underline-offset:3px; }
.leg__s ul{ margin:0 0 14px; padding-left:20px; }
.leg__s li{ font-size:var(--fs-ui); line-height:1.72; color:var(--ink-2); margin-bottom:7px; }

/* Resource tools ------------------------------------------------------------
   Calculators are read in one pass and adjusted repeatedly, so inputs sit in
   a plain grid with no card chrome, and the answer is the loudest thing on
   the page. Everything recalculates on input — no submit button, because
   there is nothing to submit. */
.tool{ max-width:900px; }
.tool__f{ margin:0 0 30px; }
.tool__g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px; }
.tool__sub{
  margin:26px 0 14px; padding-top:20px; border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-2);
}
.tool__sub b{ color:var(--ink); }

.tool__f .fld{ display:block; }
.tool__f .fld > span{
  display:block; font-family:var(--f-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); margin-bottom:7px;
}
.tool__f input,.tool__f select{
  width:100%; padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:400 15.5px/1.2 var(--f);
}
.tool__f input{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.tool__f input:focus-visible,.tool__f select:focus-visible{
  outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);
}

.tool__checks{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px; }
.chk{ display:flex; align-items:center; gap:9px; font-size:var(--fs-ui); color:var(--ink-2); cursor:pointer; }
.chk input{ width:18px; height:18px; accent-color:var(--red); cursor:pointer; }

.tool__out{ margin-top:6px; }
.tool__count{
  font-family:var(--f-display); font-size:clamp(1.25rem,2.1vw,1.7rem); font-weight:600;
  letter-spacing:-0.015em; color:var(--ink); margin:0 0 18px;
}
.tool__hint{ margin:16px 0 0; font-size:var(--fs-sm); line-height:1.65; color:var(--ink-2); }
.tool__note{
  margin:28px 0 0; padding:16px 20px; border-radius:var(--r-sm);
  background:var(--tint); border:1px solid var(--line);
  font-size:var(--fs-sm); line-height:1.65; color:var(--ink-2);
}
.tool__note b{ color:var(--ink); }
.tool__note a{ color:var(--red); }

/* Threshold checker results */
.res{ list-style:none; margin:0; padding:0; }
.res__r{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; padding:14px 0; }
.res__r + .res__r{ border-top:1px solid var(--line); }
.res__b{
  font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 0; border-radius:100px; text-align:center;
  border:1px solid transparent;
}
.res__r.is-yes   .res__b{ color:var(--red);  background:var(--red-soft);  border-color:var(--red); }
.res__r.is-no    .res__b{ color:var(--ink-2); background:var(--tint);      border-color:var(--line-2); }
.res__r.is-maybe .res__b{ color:var(--good); background:var(--good-soft); border-color:var(--good); }
.res__c b{ display:block; font-size:var(--fs-ui); font-weight:700; letter-spacing:-0.01em; }
.res__c span{ display:block; font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2); margin-top:3px; }
.res__r.is-no .res__c b{ color:var(--ink-2); }

/* Regime comparison */
.cmp{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cmp__c{
  padding:22px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line);
}
/* The cheaper regime is the answer, so it gets the emphasis. */
.cmp__c.is-best{ border-color:var(--good); background:var(--good-soft); }
.cmp__tag{
  display:inline-block; min-height:22px;
  font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--good);
}
.cmp__tag--x{ opacity:0; }
.cmp__c h3{ margin:4px 0 6px; font-size:1.05rem; }
.cmp__big{
  margin:0 0 16px; font-family:var(--f-mono); font-weight:600;
  font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.cmp__l{ margin:0; display:grid; gap:8px; }
.cmp__l > div{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.cmp__l dt{ font-size:var(--fs-sm); color:var(--ink-2); }
.cmp__l dd{ margin:0; font-family:var(--f-mono); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }

/* TDS result rows */
.tds{ display:grid; gap:0; }
.tds__r{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:13px 0; }
.tds__r + .tds__r{ border-top:1px solid var(--line); }
.tds__r dt{ font-size:var(--fs-ui); color:var(--ink-2); }
.tds__r dd{ margin:0; font-family:var(--f-mono); font-size:var(--fs-ui); font-weight:600; font-variant-numeric:tabular-nums; }
.tds__flag{
  font-size:var(--fs-micro); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); background:var(--red-soft); border:1px solid var(--red);
  border-radius:100px; padding:4px 9px; margin-left:8px;
}

@media (max-width:620px){
  .cmp{ grid-template-columns:1fr; }
  .res__r{ grid-template-columns:1fr; row-gap:8px; }
  .res__b{ justify-self:start; padding:6px 12px; }
}

/* Office map ----------------------------------------------------------------
   Sits in the second hero column, which was empty on this page. Same card
   treatment as the filing calendar on the homepage, so the two heroes read
   as one system. */
.map{
  align-self:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); overflow:hidden;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-2);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .map{ background:rgba(22,28,56,.86); }
}
.map__hd{ padding:16px 20px 14px; border-bottom:1px solid rgba(255,255,255,.12); }
.map__hd b{ display:block; font-size:var(--fs-ui); font-weight:700; color:#fff; }
.map__hd span{
  display:block; font-family:var(--f-mono); font-size:var(--fs-meta); color:#A7AFCE; margin-top:4px;
}

.map__f{ position:relative; aspect-ratio:4/3; background:rgba(0,0,0,.22); }
#mapCanvas{ position:absolute; inset:0; }
.map__ns{
  position:absolute; inset:0; margin:0; display:grid; place-items:center;
  padding:24px; text-align:center; font-size:var(--fs-sm); color:#A7AFCE;
}

/* Leaflet chrome, retuned to the site rather than left at its defaults —
   the whole reason for leaving the Google embed behind. */
.leaflet-container{ background:#12172B; font-family:var(--f); }
.leaflet-control-zoom a{
  background:rgba(20,26,51,.92); color:#fff;
  border:1px solid rgba(255,255,255,.16); border-radius:8px;
  width:30px; height:30px; line-height:28px; font-size:var(--fs-body);
}
.leaflet-control-zoom a:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.leaflet-control-zoom a:first-child{ margin-bottom:4px; }
.leaflet-bar{ border:0; box-shadow:none; }
.leaflet-control-attribution{
  background:rgba(12,16,32,.78) !important; color:#8E96B8;
  font-family:var(--f-mono); font-size:var(--fs-micro); padding:3px 7px;
  border-radius:8px 0 0 0;
}
.leaflet-control-attribution a{ color:#B9C0DA; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:var(--navy-2); color:#fff; box-shadow:var(--sh-2);
}
.leaflet-popup-content-wrapper{ border-radius:12px; border:1px solid rgba(255,255,255,.16); }
.leaflet-popup-content{ margin:12px 15px; font-size:var(--fs-sm); line-height:1.5; }
.leaflet-popup-close-button{ color:#A7AFCE !important; }

.map__pin svg{
  width:34px; height:34px; display:block;
  fill:var(--red); stroke:#fff; stroke-width:1.4;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.map__pin circle{ fill:#fff; stroke:none; }

.map__ft{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 20px; border-top:1px solid rgba(255,255,255,.12);
}
.map__ft span{ font-family:var(--f-mono); font-size:var(--fs-meta); color:#A7AFCE; }
.map__ft .btn--line{ border-color:rgba(255,255,255,.35); color:#fff; padding:10px 18px; font-size:var(--fs-sm); }
.map__ft .btn--line:hover{ background:#fff; color:var(--navy); border-color:#fff; }

@media (max-width:1000px){ .map{ max-width:460px; } }

/* Map label -----------------------------------------------------------------
   Sits above the pin and stays open: the name and address are what the map is
   there to say, so they should not be behind a click. */
.map__lbl{
  background:rgba(20,26,51,.94); border:1px solid rgba(255,255,255,.20);
  border-radius:12px; padding:9px 13px; box-shadow:0 6px 20px rgba(6,9,24,.5);
  /* An absolutely-positioned box with white-space:normal shrink-wraps to
     whatever space it thinks it has — which came out at 105px, one word per
     line. max-content sizes it to the text, then max-width caps it. */
  white-space:normal; width:max-content; max-width:min(240px, 62vw);
  text-align:left;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.map__lbl b{
  display:block; font:700 13px/1.35 var(--f); letter-spacing:-0.01em; color:#fff;
}
.map__lbl span{
  display:block; font-family:var(--f-mono); font-size:var(--fs-label); line-height:1.5;
  color:#A7AFCE; margin-top:3px;
}
/* Leaflet draws the tooltip arrow with a border colour it picks itself. */
.map__lbl.leaflet-tooltip-top::before{ border-top-color:rgba(20,26,51,.94); }
.leaflet-tooltip.map__lbl{ font-family:var(--f); }

/* Month calendar ------------------------------------------------------------
   A grid reads a month faster than a list does — you see the shape of the
   month, where the clusters are, how long the gap is. The list stays for the
   full-year view, where a grid would be twelve grids. */
.segt{
  display:inline-flex; gap:4px; padding:4px; margin:0 0 20px;
  background:var(--tint); border:1px solid var(--line); border-radius:100px;
}
.segt__b{
  font:600 13.5px/1 var(--f); letter-spacing:-0.01em;
  padding:10px 18px; border-radius:100px; cursor:pointer;
  background:none; border:0; color:var(--ink-2);
  transition:background .16s, color .16s;
}
.segt__b:hover{ color:var(--ink); }
.segt__b.is-on{ background:var(--navy); color:#fff; }

.cal2{ max-width:620px; }
.cal2__hd{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 4px 14px; border-bottom:1px solid var(--line);
}
.cal2__hd b{ font-family:var(--f-display); font-size:1.35rem; font-weight:600; letter-spacing:-0.015em; }
.cal2__nav{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; font-size:var(--fs-lead);
  background:none; color:var(--ink-2); border:1px solid var(--line);
  transition:background .16s, color .16s, border-color .16s;
}
.cal2__nav:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }

.cal2__w{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:14px 0 6px;
}
.cal2__w span{
  text-align:center; font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}

.cal2__g{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal2__c{
  position:relative; aspect-ratio:1; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:var(--r-sm); cursor:pointer;
  background:var(--card); border:1px solid var(--line);
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  transition:background .14s, border-color .14s, color .14s;
}
.cal2__c.is-pad{ background:none; border-color:transparent; cursor:default; }
.cal2__n{ font-size:var(--fs-ui); font-weight:500; color:var(--ink); line-height:1; }
.cal2__c:hover:not(.is-pad){ border-color:var(--line-2); }
/* Days already gone stay visible — the month has a shape — but recede. */
.cal2__c.is-past{ opacity:.45; }
.cal2__c.is-today{ border-color:var(--ink); }
.cal2__c.is-today .cal2__n{ font-weight:700; }
.cal2__c.is-on{
  background:var(--navy); border-color:var(--navy);
  /* A selected day is never dimmed, even when it is in the past — the
     .is-past fade was turning the navy fill to grey. */
  opacity:1;
}
.cal2__c.is-on .cal2__n{ color:#fff; }

.cal2__dots{ display:flex; gap:3px; height:5px; }
.cal2__dots i{ width:5px; height:5px; border-radius:50%; background:var(--red); }
.cal2__c.is-on .cal2__dots i{ background:#FF7D7D; }

.cal2__d{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.cal2__hint{ margin:0; font-size:var(--fs-sm); color:var(--ink-2); }
.cal2__dh{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.cal2__dh b{ font-family:var(--f-display); font-size:1.15rem; font-weight:600; letter-spacing:-0.015em; }
.cal2__dh span{
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.cal2__dl{ list-style:none; margin:0; padding:0; }
.cal2__dl li{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0;
}
.cal2__dl li + li{ border-top:1px solid var(--line); }
.cal2__di{ min-width:0; display:block; }
.cal2__di b{ display:block; font-size:var(--fs-ui); font-weight:700; letter-spacing:-0.01em; }
.cal2__di > span:first-of-type{
  display:block; font-size:var(--fs-sm); line-height:1.55; color:var(--ink-2); margin-top:3px;
}
.cal2__di .cmo__t{ display:inline-block; margin-top:8px; }

@media (max-width:560px){
  .cal2__c{ border-radius:6px; gap:4px; }
  .cal2__n{ font-size:var(--fs-caption); }
  .cal2__dots i{ width:4px; height:4px; }
  .cal2__dl li{ flex-wrap:wrap; }
}


.cal2__c.is-on{ background:var(--day-on); border-color:var(--day-on-edge); }
.cal2__c.is-today{ border-color:var(--day-today-edge); }
.segt__b.is-on{ background:var(--day-on); }

/* Month calendar in the hero -------------------------------------------------
   Same glass card as the office map on the contact page. The hero is navy in
   both themes, so everything inside is styled for a dark ground rather than
   following the page tokens — otherwise the light theme would put a white
   grid on navy. */
.hcal{
  align-self:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:18px 18px 16px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-2);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hcal{ background:rgba(22,28,56,.88); }
}
.hcal .cal2{ max-width:none; }

.hcal .cal2__hd{ padding:0 2px 12px; border-bottom-color:rgba(255,255,255,.12); }
.hcal .cal2__hd b{ font-size:1.05rem; color:#fff; }
.hcal .cal2__nav{
  width:32px; height:32px; font-size:var(--fs-body);
  color:#B9C0DA; border-color:rgba(255,255,255,.18);
}
.hcal .cal2__nav:hover{ background:#fff; border-color:#fff; color:var(--navy); }

.hcal .cal2__w{ margin:11px 0 5px; gap:3px; }
.hcal .cal2__w span{ font-size:var(--fs-micro); color:#8E96B8; }

.hcal .cal2__g{ gap:3px; }
.hcal .cal2__c{
  border-radius:6px; gap:3px;
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09);
}
.hcal .cal2__c.is-pad{ background:none; border-color:transparent; }
.hcal .cal2__n{ font-size:var(--fs-caption); color:#DDE1EF; }
.hcal .cal2__c:hover:not(.is-pad){ border-color:rgba(255,255,255,.30); }
.hcal .cal2__c.is-past{ opacity:.38; }
/* White in both themes. A page-theme rule used to out-specify this one and
   tint it #EDEFF7 in dark, which contradicted the note above: the hero
   calendar sits on navy either way and should not follow page tokens. */
.hcal .cal2__c.is-today{ border-color:#fff; }
.hcal .cal2__c.is-on{
  background:#fff; border-color:#fff; opacity:1;
}
.hcal .cal2__c.is-on .cal2__n{ color:var(--navy); font-weight:700; }
.hcal .cal2__dots i{ width:4px; height:4px; background:#FF7D7D; }
.hcal .cal2__c.is-on .cal2__dots i{ background:var(--red); }

.hcal .cal2__d{ margin-top:14px; padding-top:12px; border-top-color:rgba(255,255,255,.12); }
.hcal .cal2__hint{ font-size:var(--fs-caption); color:#A7AFCE; }
.hcal .cal2__dh b{ font-size:1rem; color:#fff; }
.hcal .cal2__dh span{ color:#8E96B8; }
/* The card is narrow, so the day list is capped and scrolls rather than
   stretching the hero to whatever the busiest date happens to need. */
.hcal .cal2__dl{ max-height:168px; overflow-y:auto; }
.hcal .cal2__dl li{ padding:10px 0; gap:10px; }
.hcal .cal2__dl li + li{ border-top-color:rgba(255,255,255,.10); }
.hcal .cal2__di b{ font-size:var(--fs-sm); color:#fff; }
.hcal .cal2__di > span:first-of-type{ font-size:var(--fs-meta); color:#A7AFCE; margin-top:2px; }
.hcal .cal2__di .cmo__t{
  margin-top:6px; color:#B9C0DA;
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16);
}
.hcal .cmo__ics{
  width:32px; height:32px; font-size:var(--fs-body);
  color:#B9C0DA; border-color:rgba(255,255,255,.18); background:none;
}
.hcal .cmo__ics:hover{ background:#fff; border-color:#fff; color:var(--navy); }

@media (max-width:1000px){ .hcal{ max-width:460px; } }

/* Month navigation above the list -------------------------------------------
   Duplicates the hero card's controls at the point where you are actually
   reading the dates, so you never have to scroll back up to change month. */
.mnav{
  display:flex; align-items:center; gap:14px;
  margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.mnav__t{ margin-right:auto; }
.mnav__t b{
  display:block; font-family:var(--f-display); font-size:1.35rem;
  font-weight:600; letter-spacing:-0.015em;
}
.mnav .cal__count{ display:block; margin:3px 0 0; }
.mnav__today{
  font:600 12.5px/1 var(--f); letter-spacing:-0.01em;
  padding:10px 16px; border-radius:100px; cursor:pointer;
  background:none; color:var(--ink-2); border:1px solid var(--line);
  transition:background .16s, color .16s, border-color .16s;
}
.mnav__today:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.mnav__today[hidden]{ display:none; }

@media (max-width:520px){
  .mnav{ flex-wrap:wrap; gap:10px; }
  .mnav__t{ order:-1; width:100%; margin-right:0; }
  .mnav__today{ margin-left:auto; }
}

/* Access log tools ---------------------------------------------------------- */
.alog__bar{ flex-wrap:wrap; }
.alog__tools{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.alog__tools input{
  padding:9px 13px; border-radius:var(--r-sm); min-width:min(240px, 46vw);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:400 14px/1.2 var(--f);
}
.alog__tools input:focus-visible{ outline:2px solid var(--red); outline-offset:1px; border-color:var(--red); }
.alog__tools .btn--line{ padding:9px 15px; font-size:var(--fs-caption); }
.alog__note{
  margin:14px 0 0; padding:12px 16px; border-radius:var(--r-sm);
  background:var(--tint); border:1px solid var(--line);
  font-size:var(--fs-caption); line-height:1.6; color:var(--ink-2);
}
.alog__note[hidden]{ display:none; }
@media (max-width:640px){
  .alog__tools{ width:100%; margin-left:0; }
  .alog__tools input{ flex:1; min-width:0; }
}


/* Theme toggle --------------------------------------------------------------
   The site followed the OS and offered no way to override it. Three states —
   system, light, dark — because "follow my device" is a real preference and
   not the same as picking one. */
.thm{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; font-size:var(--fs-lead);
  background:none; color:inherit; border:1px solid var(--line);
  transition:background .16s, border-color .16s, color .16s;
}
.thm:hover{ border-color:var(--line-2); }
.nav__act .thm{ color:var(--ink-2); }
.nav__act .thm:hover{ color:var(--ink); }
.thm .i{ width:19px; height:19px; }
/* One icon shows at a time, chosen by the resolved theme. */
.thm [data-ico]{ display:none; }
/* Two states only. Before a choice is stored the script resolves the device
   preference and sets the attribute, so one icon always matches. */
html[data-theme="light"] .thm [data-ico="light"],
html[data-theme="dark"]  .thm [data-ico="dark"]{ display:block; }
html:not([data-theme]) .thm [data-ico="dark"]{ display:block; }
@media (prefers-color-scheme:light){
  html:not([data-theme]) .thm [data-ico="dark"]{ display:none; }
  html:not([data-theme]) .thm [data-ico="light"]{ display:block; }
}

@media (max-width:900px){
  .nav__act .thm{ display:none; }
  .drawer .thm{ display:grid; margin-top:14px; }
}

/* The header toggle is hidden below 900px, so the drawer carries its own. */
.thm--drawer{ display:none; }
@media (max-width:900px){
  .thm--drawer{ display:grid; margin-top:16px; border-color:var(--line); }
}

/* Print ---------------------------------------------------------------------
   The compliance calendar is the page people actually print — a year of
   statutory dates pinned above a desk, or attached to an email for a client
   without a login. Screen chrome has no business on paper, and a navy hero
   costs a cartridge. Everything here is inert until Ctrl+P. */
@media print{
  /* Anything that exists to be clicked, tapped or scrolled past. */
  .util,.nav,.prog,.drawer,.fab,.thm,.arw,.btn,.hero__bg,.foot,
  .band,.chips,.seal,#intro,.cmo__ics,.map,.sub,.segt,.cal2__nav,
  .mnav__today,.fchips,.hero__cta,.card__go{
    display:none !important;
  }

  /* Reveal animations never run in print, so anything still waiting to
     fade in would print blank. */
  .rise,.rise.on,.led__r,.led__s,.led__foot,*{
    /* transition:none matters as much as opacity:1 — printing mid-reveal
       would otherwise capture an element part-way through its fade. */
    transition:none !important; animation:none !important;
  }
  .rise,.rise.on,.led__r,.led__s,.led__foot{
    opacity:1 !important; transform:none !important;
  }

  html,body{
    background:#fff !important; color:#000 !important;
    font-size:11pt;
  }
  .hero{
    background:#fff !important; color:#000 !important;
    padding-block:0 !important; min-height:0 !important;
  }
  .hero h1,.hero p,.hero .eyebrow{ color:#000 !important; }
  .hero .eyebrow{ background:none !important; padding-left:0 !important; }
  .shell{ max-width:none !important; padding-inline:0 !important; }
  .sec{ padding-block:12pt !important; }

  /* Keep a month, a card or a table row from splitting across a page. */
  .cmo,.cmo__r,.cal2,.cal2__c,.card,.member,.res__r,.tds__r,.cmp__c,.leg__s{
    break-inside:avoid; page-break-inside:avoid;
  }
  .cmo__h{ break-after:avoid; page-break-after:avoid; }

  /* Flatten the surfaces: fills and shadows are ink for no information. */
  .card,.cmo__d,.cal2__c,.tool__note,.cal__note,.res__b,.cmo__t,.sub,
  .tint,.dark,.cmp__c,.led{
    background:#fff !important; box-shadow:none !important;
    border-color:#bbb !important;
  }
  .dark h2,.dark h3,.dark p,.dark .lede,.tint *{ color:#000 !important; }
  .cal2__c.is-on{ background:#fff !important; }
  .cal2__c.is-past{ opacity:1 !important; }
  .cmo__r.is-past{ opacity:.55 !important; }
  /* The dot is the only mark saying a date has something due, so it stays. */
  .cal2__dots i{ background:#000 !important; }

  a{ color:#000 !important; text-decoration:none !important; }
  /* A printout is a dead end unless it says where it came from. */
  main::after{
    content:"gxgcorp.com — dates are the standard statutory deadlines and can change. Confirm before relying on them.";
    display:block; margin-top:14pt; padding-top:8pt;
    border-top:1px solid #bbb; font-size:8.5pt; color:#444;
  }

  /* The hero cards (month calendar, office map) are styled for a navy
     ground — white text on translucent white. With backgrounds off for
     print that renders as pale grey on white, i.e. nothing. */
  .hcal,.hcal .cal2__c,.viz__card,.led{
    background:#fff !important; border-color:#bbb !important;
    box-shadow:none !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .hcal *,.viz__card *,.hcal .cal2__hd b,.hcal .cal2__n{ color:#000 !important; }
  .hcal .cal2__w span,.hcal .cal2__hint,.hcal .cal2__dh span,
  .viz__card .led__d,.viz__card .led__f i{ color:#555 !important; }
  .hcal .cal2__c.is-on{ background:#fff !important; border-color:#000 !important; }
  .hcal .cal2__c.is-past{ opacity:.5 !important; }
  /* The dot is the whole point of the grid: it marks a day with a filing. */
  .hcal .cal2__dots i,.led__dot{ background:#000 !important; }
  .led__s{ border:1px solid #bbb !important; background:#fff !important; color:#000 !important; }

  @page{ margin:14mm; }
}

/* Careers ------------------------------------------------------------------- */
/* A hero with only a text column should not reserve space for a second one. */
.hero__in--solo{
  grid-template-columns:minmax(0,1fr);
  /* A single-column hero has no tall card to balance, so the generous
     bottom padding just reads as dead space before the next section. */
  padding-block:clamp(44px,5vw,80px) clamp(40px,4.6vw,72px);
}
.hero__in--solo .hero__c{ max-width:44rem; }
/* Four cards in a three-up grid leaves an orphan; two-up pairs them evenly. */
@media (min-width:900px){ .cards--2{ grid-template-columns:1fr 1fr; } }

/* File input + field hint ---------------------------------------------------- */
.fld input[type="file"]{
  width:100%; padding:11px 13px; border-radius:var(--r-sm);
  border:1px dashed var(--line-2); background:var(--tint); color:var(--ink-2);
  font:400 13.5px/1.3 var(--f); cursor:pointer;
}
.fld input[type="file"]:hover{ border-color:var(--red); }
.fld input[type="file"]:focus-visible{ outline:2px solid var(--red); outline-offset:1px; }
.fld input[type="file"]::file-selector-button{
  margin-right:12px; padding:7px 13px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  font:700 12.5px/1 var(--f);
}
.fld input[type="file"]::file-selector-button:hover{ background:var(--red); border-color:var(--red); color:var(--on-red); }
.fhint{ display:block; margin-top:6px; font-size:var(--fs-meta); color:var(--ink-3); }

/* Tool export + error fallback ---------------------------------------------- */
.tool__dl{ margin-top:18px; display:inline-flex; align-items:center; gap:9px; }
.tool__dl .i{ width:17px; height:17px; }
.tool__dl[disabled]{ opacity:.55; cursor:progress; }
/* The vanilla equivalent of an error boundary: a calculator that throws
   should say so and offer a way out, not leave a dead form. */
.tool__err{
  display:grid; gap:8px; justify-items:start;
  margin:0 0 20px; padding:16px 20px; border-radius:var(--r-sm);
  background:var(--red-soft); border:1px solid var(--red); color:var(--ink);
}
.tool__err b{ font-size:var(--fs-ui); }
.tool__err span{ font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2); }
.tool__err a{ color:var(--red); }
.tool__err code{
  font-family:var(--f-mono); font-size:.92em;
  background:var(--card); border:1px solid var(--line); border-radius:5px; padding:1px 5px;
}

/* ── Touch target sizing ─────────────────────────────────────────────
   Footer links rendered at 22px tall and the burger at 42px, both under
   the 44px a thumb needs (and the footer links under WCAG 2.5.8's 24px
   floor). Padding only — nothing moves on desktop. */
.burger{ width:44px; height:44px; }
@media (max-width:720px){
  .foot a{ padding:11px 0; }
  .foot .brand{ padding:7px 0; }
}
/* Images now carry width/height so the browser reserves the right box
   before the bytes land; these keep them fluid inside it rather than
   rendering at the intrinsic pixel size. */
.hero__bg img,.ph img{ max-width:100%; }

/* The utility bar carries the phone number and email — the two things a
   visitor most often reaches for on a phone, and the smallest targets on
   the page at 22px. Padding only; the bar's own height is unchanged on
   desktop. */
@media (max-width:720px){
  .util__r a{ display:inline-block; padding:11px 2px; }
  .util__in .brand{ padding:7px 0; }
}

/* ══ MOTION ═══════════════════════════════════════════════════════════
   One vocabulary shared with the dashboard: same curve, same durations,
   so a press feels identical on the marketing site and inside the app.
   The global prefers-reduced-motion guard near the top of this file
   already flattens everything below to 0.01ms — nothing here needs its
   own opt-out. ─────────────────────────────────────────────────────── */
:root{
  --ease:cubic-bezier(.2,.8,.3,1);
  --t-press:90ms;
  --t-fast:160ms;
  --t-mid:240ms;
}

/* ── Press ────────────────────────────────────────────────────────────
   The whole stylesheet previously held a single :active rule. A phone
   has no hover, so until now a tap produced no acknowledgement at all
   between finger-down and the page changing. */
/* `transition` is a shorthand: writing it here at the same specificity as
   the component's own rule discarded everything that rule was animating.
   .btn lost its hover colour fade, .links a its hover pill, .chip its
   background, and .fab__btn the opacity/visibility pair that .fab__top's
   reveal depends on. The longhands add transform and leave the rest. */
.btn,.btn--line,.burger,.chip,.pill,.tab,.acc__q,.fab__btn,
.links a,.util__r a,.card__go{
  transition-property:transform;
  transition-duration:var(--t-press);
  transition-timing-function:var(--ease);
}
.btn:active,.btn--line:active,.burger:active,.chip:active,.tab:active{ transform:scale(.965); }
.links a:active,.util__r a:active{ transform:scale(.94); }
a.card:active{ transform:translateY(-2px) scale(.995); }
.acc__q:active{ transform:scale(.995); }

/* Keep the pressed state legible when the finger is still down and the
   browser has not yet fired the navigation. */
.btn:active{ filter:brightness(.94); }

/* ── Hover lift ───────────────────────────────────────────────────────
   a.card already lifts; these are the surfaces that were static. */
/* Same shorthand trap as above — .pill keeps its own background and
   border-color transitions, this only extends the list. */
.pill,.stat,.say,.step,.tool-card{
  transition-property:transform, box-shadow, border-color, background;
  transition-duration:var(--t-fast);
  transition-timing-function:var(--ease);
}
@media (hover:hover){
  /* .pill is deliberately absent: it has its own documented slide-right
     hover. Listing it here overrode that with a lift, at equal
     specificity and later in the file, so the slide never rendered on
     any mouse or trackpad. */
  .stat:hover,.step:hover,.tool-card:hover{ transform:translateY(-3px); }
  .say:hover{ transform:translateY(-2px); }
}

/* ── Staggered reveal ────────────────────────────────────────────────
   .rise already fades a block in on scroll; grouping children with
   .rise--stack makes them arrive in reading order rather than as one
   slab. Capped at eight so a long list never crawls. */
.rise--stack > *{ opacity:0; transform:translateY(14px);
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.rise--stack.on > *{ opacity:1; transform:none; }
.rise--stack.on > *:nth-child(1){ transition-delay:0ms }
.rise--stack.on > *:nth-child(2){ transition-delay:55ms }
.rise--stack.on > *:nth-child(3){ transition-delay:110ms }
.rise--stack.on > *:nth-child(4){ transition-delay:165ms }
.rise--stack.on > *:nth-child(5){ transition-delay:220ms }
.rise--stack.on > *:nth-child(6){ transition-delay:275ms }
.rise--stack.on > *:nth-child(7){ transition-delay:330ms }
.rise--stack.on > *:nth-child(n+8){ transition-delay:385ms }

/* ── Form feedback ───────────────────────────────────────────────────*/
.fld input,.fld textarea,.fld select{
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.fld input:focus,.fld textarea:focus,.fld select:focus{ box-shadow:0 0 0 3px var(--red-a); }

/* A submit button that is working should say so, and refuse a second
   click while it does. */
.btn[data-busy]{ pointer-events:none; opacity:.75; }
.btn[data-busy]::after{
  content:''; width:14px; height:14px; margin-left:9px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:gxSpin .7s linear infinite;
}
@keyframes gxSpin{ to{ transform:rotate(360deg) } }

/* The intro was dismissable by clicking, but nothing said so. The control
   fades in a beat late so it never competes with the animation itself. */
.intro-skip{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  padding:9px 20px; border-radius:100px; cursor:pointer;
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase;
  color:#8189A5; background:transparent; border:1px solid rgba(255,255,255,.16);
  opacity:0; animation:introSkip .5s 1.5s ease forwards;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             transform var(--t-press) var(--ease);
}
.intro-skip:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.intro-skip:active{ transform:translateX(-50%) scale(.94); }
@keyframes introSkip{ to{ opacity:1 } }

/* .rise already had a reduced-motion override; the staggered variant needs
   its own, or a reader with motion turned down sees an empty grid whenever
   the reveal observer does not fire. */
@media (prefers-reduced-motion:reduce){
  /* transition-delay genuinely needs !important: it has to beat the
     .rise--stack.on > *:nth-child(n) chain, which is three classes deep.
     opacity and transform do not — .rise--stack.on > * already sets the
     same values earlier at equal specificity — so they are plain now. */
  .rise--stack > *{ opacity:1; transform:none; transition-delay:0s!important; }
  .intro-skip{ opacity:1; animation:none; }

  /* Last word on .fab__btn. The press rule in this section is
     unconditional and sits later in the file at equal specificity, so the
     opt-out that used to live up in the FAB block never applied — it was
     masked only by the global *{transition-duration:.01ms} guard near the
     top. Stated here, after everything that could override it. */
  .fab__btn{ transition-duration:.01ms; }
  .fab__btn:hover{ transform:none; }
}