/* ==========================================================================
   ANEM Consulting LLC / Design System
   Direction: Clinical Authority. Navy + instrument teal, hairline rules,
   tabular data, restrained motion. Light mode only (brochure site).

   PALETTE IS TOKENISED. When the logo arrives, edit ONLY the :root block
   below. No rule anywhere else references a raw colour value.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand: swap these to the logo palette */
  --navy-950:#0A1128;
  --navy-900:#101B38;
  --navy-800:#16244A;
  --navy-700:#24356B;
  /* Sampled from the logo gradient: #23EDF7 (cyan, top) -> #2F45AF (blue, base) */
  --brand-700:#2F45AF;   /* logo base blue, 7.9:1 on --paper */
  --brand-600:#2E6BD6;
  --brand-100:#C9DCF7;
  --brand-50:#EDF3FD;
  --brand-cyan:#23EDF7;  /* logo top stop: dark surfaces only, never on white */

  /* Neutrals */
  --slate-600:#4A5D70;
  --slate-500:#5E6E7E;
  --slate-400:#93A2AF;
  --slate-300:#C7D0D8;
  --slate-200:#E1E7EC;
  --slate-100:#EFF3F6;
  --surface-alt:#EBF0FA;   /* brand-tinted alt surface, not neutral grey */
  --paper:#FBFCFD;
  --white:#FFFFFF;

  /* Signal: hazard callouts only, never decoration */
  --amber-700:#8A5106;
  --amber-100:#F7E6C8;
  --amber-50:#FDF6EA;
  --red-700:#A32020;
  --red-50:#FBEDED;
  --green-700:#1E6B4B;

  /* Semantic */
  --bg:var(--paper);
  --surface:var(--white);
  --fg:var(--navy-900);
  --fg-muted:var(--slate-600);
  --fg-subtle:var(--slate-500);
  --border:var(--slate-200);
  --border-strong:var(--slate-300);
  --accent:var(--brand-700);
  --ring:var(--brand-600);

  /* Spacing: 4/8 rhythm */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Radius: minimal, crisp */
  --r-sm:2px; --r-md:4px; --r-lg:8px;

  /* Elevation: consistent scale, used sparingly */
  --shadow-1:0 1px 2px rgba(8,15,24,.05);
  --shadow-2:0 2px 8px rgba(8,15,24,.06),0 1px 2px rgba(8,15,24,.04);
  --shadow-3:0 12px 32px rgba(8,15,24,.10),0 2px 8px rgba(8,15,24,.05);

  /* Layers */
  --z-sticky:40; --z-overlay:100;

  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:150ms; --dur:220ms; --dur-slow:320ms;


  /* Type scale: nine steps, no ad-hoc sizes. Headings use the display face,
     everything else uses Inter. */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;

  --fs-2xs:.69rem;        /* 11px  uppercase micro-labels */
  --fs-xs:.8rem;          /* 13px  captions, table meta, keys */
  --fs-sm:.9rem;          /* 14px  small body, dense UI */
  --fs-md:1rem;           /* 16px  compact body */
  --fs-base:1.0625rem;    /* 17px  default body */
  --fs-lg:1.1875rem;      /* 19px  lead paragraphs */
  --fs-xl:clamp(1.2rem,1.1rem + .45vw,1.4rem);
  --fs-2xl:clamp(1.6rem,1.25rem + 1.5vw,2.3rem);
  --fs-3xl:clamp(2rem,1.38rem + 2.3vw,3.05rem);

  /* Layout */
  --container:1180px;
  --measure:68ch;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:1.65;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden on body/html would break the sticky header */
  overflow-x:clip;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:600;text-wrap:balance}

/* Display face on the two largest levels only. Inter carries every piece of
   UI text; the serif exists to give the page a voice, not to be decorative. */
.t-display,.t-h1,.t-h2,.t-h3{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.012em;
}
p{margin:0}
ul,ol{margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--brand-100);color:var(--navy-900)}

/* ---------- 3. Type scale ---------- */
.t-display{font-size:var(--fs-3xl);line-height:1.08}
.t-h1{font-size:var(--fs-3xl);line-height:1.1}
.t-h2{font-size:var(--fs-2xl);line-height:1.16}
.t-h3{font-size:var(--fs-xl);letter-spacing:-.008em;font-weight:600}
.t-lead{font-size:var(--fs-lg);line-height:1.6;color:var(--fg-muted)}
.t-body{font-size:var(--fs-md);line-height:1.7;color:var(--fg-muted)}
.t-small{font-size:var(--fs-sm);line-height:1.6;color:var(--fg-subtle)}
.t-mono{font-variant-numeric:tabular-nums}
.measure{max-width:var(--measure)}
.stack-3 > * + *{margin-top:var(--s-3)}
.stack-4 > * + *{margin-top:var(--s-4)}
.stack-5 > * + *{margin-top:var(--s-5)}
.stack-6 > * + *{margin-top:var(--s-6)}

/* Eyebrow: numbered section marker, the signature device */
.eyebrow{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s-4);
}
.eyebrow::before{content:attr(data-num);font-variant-numeric:tabular-nums;color:var(--slate-400);font-weight:500}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--border);max-width:56px}

/* ---------- 4. Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-4)}
@media(min-width:480px){.container{padding-inline:var(--s-5)}}
@media(min-width:768px){.container{padding-inline:var(--s-7)}}
.section{padding-block:clamp(44px,8vw,112px)}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.section--dark{background:var(--navy-900);color:var(--white)}
.section--dark .t-lead,.section--dark .t-body{color:rgba(255,255,255,.72)}
.section--dark .t-small{color:rgba(255,255,255,.6)}
.section--dark .eyebrow,.hero .eyebrow{color:var(--brand-100)}
.section--dark .eyebrow::before,.hero .eyebrow::before{color:rgba(255,255,255,.45)}
.section--dark .eyebrow::after,.hero .eyebrow::after{background:rgba(255,255,255,.2)}
.section--alt{background:var(--surface-alt)}
/* Consecutive paper sections were indistinguishable; a hairline gives the
   scroll a beat without adding another block of colour. */
.section--ruled{border-top:1px solid var(--border)}
.rule{height:1px;background:var(--border);border:0;margin:0}

.grid{display:grid;gap:var(--s-5)}
.grid > *,.split > *,.steps > *{min-width:0}
@media(min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
/* Stat blocks and the do/don't lists are short enough to pair up on a phone,
   which removes a lot of scrolling without squeezing any prose. */
@media(min-width:360px){
  .grid-4{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
  .grid--pair{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
}
@media(min-width:1024px){
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid{gap:var(--s-6)}
}
/* Asymmetric editorial split: the layout signature */
.split{display:grid;gap:var(--s-6);align-items:start}
@media(min-width:1024px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8)}
  .split--sticky > :first-child{position:sticky;top:104px}
}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:0 var(--s-5);
  border-radius:var(--r-md);
  font-size:var(--fs-md);font-weight:600;letter-spacing:-.005em;
  cursor:pointer;text-align:center;
  border:1px solid transparent;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--navy-900);color:var(--white);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--brand-700);box-shadow:var(--shadow-2)}
.btn-accent{background:var(--brand-700);color:var(--white);box-shadow:var(--shadow-1)}
.btn-accent:hover{background:var(--navy-900);box-shadow:var(--shadow-2)}
.btn-outline{background:transparent;color:var(--navy-900);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--navy-900);background:var(--white)}
.section--dark .btn-outline,.hero .btn-outline,.callbar .btn-outline{color:var(--white);border-color:rgba(255,255,255,.3)}
.section--dark .btn-outline:hover,.hero .btn-outline:hover,.callbar .btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

/* Text link with underline reveal */
.link{
  display:inline-flex;align-items:center;gap:var(--s-2);
  color:var(--accent);font-weight:600;font-size:var(--fs-md);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color var(--dur) var(--ease-out),gap var(--dur) var(--ease-out);
}
.link:hover{border-color:currentColor;gap:var(--s-3)}
.link svg{width:16px;height:16px;transition:transform var(--dur) var(--ease-out)}
.link:hover svg{transform:translateX(2px)}

/* ---------- 6. Pending-value placeholder ---------- */
.pending{
  background:var(--amber-50);color:var(--amber-700);
  border-bottom:1px dotted var(--amber-700);
  padding:0 3px;border-radius:var(--r-sm);
  font-weight:500;
}
.section--dark .pending,.hero .pending,.footer .pending{
  background:rgba(247,230,200,.16);color:#F3D8A8;border-bottom-color:#F3D8A8;
}

/* ---------- 7. Header ---------- */
.skip{
  position:absolute;left:var(--s-4);top:var(--s-4);z-index:1000;
  transform:translateY(-200%);
  background:var(--navy-900);color:var(--white);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-md);font-weight:600;font-size:var(--fs-sm);
  transition:transform var(--dur) var(--ease-out);
}
.skip:focus{transform:none}

.header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(251,252,253,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.header[data-scrolled="true"]{border-bottom-color:var(--border);box-shadow:var(--shadow-1)}
.header__inner{display:flex;align-items:center;gap:var(--s-3);min-height:72px}
@media(min-width:480px){.header__inner{gap:var(--s-5)}}
.brand{display:flex;align-items:center;gap:var(--s-3);flex:0 1 auto;min-width:0;min-height:44px}
.brand__mark{
  width:38px;height:38px;flex:none;display:block;
  /* transparent PNG, reads correctly on both the light header and dark footer */
}
.brand__text{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.brand__name,.brand__tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand__name{font-size:var(--fs-md);font-weight:700;letter-spacing:-.02em;color:var(--navy-900)}
.brand__tag{font-size:var(--fs-2xs);font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle)}
@media(max-width:419px){.brand__tag{font-size:var(--fs-2xs);letter-spacing:.04em}}

.nav{display:none;margin-left:auto}
@media(min-width:1024px){.nav{display:flex;align-items:center;gap:var(--s-1)}}
.nav a{
  position:relative;padding:var(--s-2) var(--s-3);border-radius:var(--r-md);
  font-size:var(--fs-md);font-weight:500;color:var(--fg-muted);
  transition:color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.nav a:hover{color:var(--navy-900);background:var(--slate-100)}
.nav a[aria-current="page"]{color:var(--navy-900);font-weight:600}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:var(--s-3);right:var(--s-3);bottom:2px;
  height:2px;background:var(--accent);border-radius:1px;
}
.header__actions{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;flex:none}
@media(min-width:1024px){.header__actions{margin-left:var(--s-4)}}
.header__cta{display:none}
@media(min-width:640px){.header__cta{display:inline-flex}}

/* Language toggle: one button showing the language you switch TO */
.lang{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 var(--s-2);flex:none;
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  color:var(--fg-subtle);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
.lang:hover{background:var(--slate-100);color:var(--navy-900);border-color:var(--navy-900)}

/* Mobile menu */
.menu-btn{
  display:inline-grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--border-strong);border-radius:var(--r-md);flex:none;
  transition:background var(--dur) var(--ease-out);
}
.menu-btn:hover{background:var(--slate-100)}
@media(min-width:1024px){.menu-btn{display:none}}
.menu-btn span{
  display:block;width:17px;height:1.5px;background:var(--navy-900);border-radius:2px;
  transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.menu-btn span + span{margin-top:4px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:72px 0 0;z-index:var(--z-overlay);
  background:var(--paper);
  padding:var(--s-6) var(--s-5) var(--s-8);
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),visibility var(--dur);
}
.mobile-nav[data-open="true"]{opacity:1;visibility:visible;transform:none}
@media(min-width:1024px){.mobile-nav{display:none}}
.mobile-nav a{
  display:flex;align-items:center;min-height:56px;
  padding:var(--s-3) var(--s-2);
  font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em;
  border-bottom:1px solid var(--border);
}
.mobile-nav a[aria-current="page"]{color:var(--accent)}
.mobile-nav .btn{margin-top:var(--s-6)}

/* ---------- 8. Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy-900);color:var(--white)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 78% 12%,rgba(35,237,247,.16),transparent 62%),
    radial-gradient(ellipse 70% 50% at 8% 92%,rgba(36,53,107,.55),transparent 60%);
}
/* Hairline measurement grid: reads as instrument, not decoration */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  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(ellipse 90% 80% at 50% 30%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 78%);
}
.hero__inner{position:relative;z-index:3;padding-block:clamp(40px,5vw,64px)}
/* Fill most of the first screen without ever pushing the credentials past the
   fold. svh (not vh) so mobile browser chrome does not cause overflow. The
   gap left below is deliberate: a sliver of the next section signals scroll. */
@media(min-width:1024px){
  .hero:not(.hero--page) .hero__inner{
    min-height:min(calc(100svh - 72px - 84px),860px);
    display:flex;flex-direction:column;justify-content:center;
    padding-bottom:clamp(72px,9vh,116px);
  }
}
.hero__grid{display:grid;gap:var(--s-6);align-items:center;width:100%}
@media(min-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--s-6)}
  .hero .container{max-width:1340px}
}
.hero h1{color:var(--white)}
.hero__art{width:100%;max-width:700px;margin-inline:auto}
@media(max-width:1023px){.hero__art{max-width:300px}}
@media(max-width:767px){.hero__art{max-width:240px}}
/* The text column ends with the actions and credentials, so centring
   on the whole column left the art sitting 25px below the summary
   paragraph. Lift it so the two read as level. Measured, not guessed. */
@media(min-width:1024px){.hero__art{transform:translateY(-21px)}}
/* 720p laptops: claw back padding so the whole hero, credentials
   included, still clears the fold without scrolling. */
@media(min-width:1024px) and (max-height:780px){
  .hero:not(.hero--page) .hero__inner{padding-top:26px;padding-bottom:70px}
  .creds{margin-top:var(--s-5);padding-top:var(--s-4)}
  .hero__fade{height:56px}
}
@media(min-width:1024px) and (max-height:700px){
  .hero:not(.hero--page) .hero__inner{padding-top:18px;padding-bottom:60px}
  .hero__fade{height:46px}
  .creds{margin-top:var(--s-4);padding-top:var(--s-4)}
  /* Short AND narrow: the text column wraps to more lines, so step the
     headline down rather than let the credentials fall past the fold. */
  .hero .t-display{font-size:clamp(1.7rem,1.1rem + 1.7vw,2.3rem)}
  .hero__sub{font-size:var(--fs-md);margin-top:var(--s-3)}
  .hero__actions{margin-top:var(--s-4)}
  /* Give the copy more width so it wraps to fewer lines; the art gives up
     the space rather than the credentials dropping below the fold. */
  .hero:not(.hero--page) .hero__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:var(--s-6)}
  .hero__art{transform:translateY(-58px)}
}

/* Soft hand-off into the section below instead of a hard navy/paper edge.
   Sits above the background texture but beneath .hero__inner (z-index 3),
   and the hero's bottom padding keeps copy clear of it. */
.hero__fade{
  position:absolute;left:0;right:0;bottom:-1px;z-index:2;
  height:clamp(64px,9vh,120px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(16,27,56,0) 0%,rgba(16,27,56,.55) 45%,var(--paper) 100%);
}
/* Subpage heroes hand off to a white section too, so they get the same fade. */
.hero--page .hero__fade{height:clamp(48px,6vh,80px)}
.hero__sub{color:rgba(255,255,255,.76);max-width:54ch;margin-top:var(--s-4);
  font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.58}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.hero__actions .btn{flex:1 1 auto;min-width:200px}
@media(min-width:520px){.hero__actions .btn{flex:0 0 auto}}
.hero--page .hero__inner{padding-block:clamp(32px,4.5vw,58px)}


/* Credential strip */
.creds{display:grid;gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.14)}
@media(min-width:560px){.creds{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}}
.cred__label{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cred__value{font-size:var(--fs-md);font-weight:600;color:var(--white);margin-top:var(--s-2);font-variant-numeric:tabular-nums}

/* Breadcrumb */
.crumb{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;font-size:var(--fs-xs);
  color:rgba(255,255,255,.55);margin-bottom:var(--s-5)}
.crumb a:hover{color:var(--white)}
.crumb span[aria-hidden]{opacity:.5}

/* ---------- 9. Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
.card--link:hover{border-color:var(--border-strong);box-shadow:var(--shadow-3);transform:translateY(-3px)}
.card__icon{
  width:44px;height:44px;border-radius:var(--r-md);flex:none;
  display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand-700);margin-bottom:var(--s-2);
}
.card__icon svg{width:22px;height:22px}
.card__foot{margin-top:auto;padding-top:var(--s-4)}

/* Bulleted list used inside cards and prose */
.ticks{list-style:none;display:flex;flex-direction:column;gap:var(--s-3)}
.ticks li{display:flex;gap:var(--s-3);font-size:var(--fs-md);line-height:1.55;color:var(--fg-muted)}
.ticks li::before{content:"";flex:none;width:6px;height:6px;margin-top:.58em;border-radius:50%;background:var(--brand-600)}
.section--dark .ticks li{color:rgba(255,255,255,.75)}
.section--dark .ticks li::before{background:var(--brand-100)}
.ticks--x li::before{background:var(--slate-400)}

/* Big pillar card (Lead / Radon) */
.pillar{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.pillar:hover{border-color:var(--border-strong);box-shadow:var(--shadow-3)}
.pillar__fig{background:var(--navy-900);padding:var(--s-4);position:relative}
.pillar__art{width:100%;height:auto;display:block}
@media(max-width:767px){
  .pillar__fig{padding:var(--s-3)}
  .pillar__art{width:auto;max-height:132px;margin-inline:auto}
  .pillar__body{padding:var(--s-5)}
}

.pillar__fig svg{width:100%;height:auto}
.pillar__body{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);flex:1}

/* ---------- 9b. Radon pCi/L scale ---------- */
/* Markers are placed with left:var(--at), where --at is (value / 8) * 100%.
   Sits on the dark .pillar__fig, so every colour here is tuned for navy. */
.scalewrap{
  max-width:860px;margin:clamp(36px,4.5vw,56px) auto 0;
  padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,.14);
}
.scale{position:relative;padding-top:var(--s-2)}

/* Row above the track: the EPA benchmark chip */
.scale__top{position:relative;height:42px;margin-bottom:var(--s-1)}
/* Same treatment as the Illinois flag below the track, caret pointing down. */
.scale__chip{
  position:absolute;left:var(--at);bottom:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;line-height:1.25;white-space:nowrap;
}
.scale__chip-name{
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.scale__chip b{font-size:var(--fs-sm);font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.scale__chip::after{
  content:"";border:5px solid transparent;border-top-color:rgba(255,255,255,.66);
  margin-top:3px;
}

/* The track. Cool below the action level, warming above it. */
.scale__track{
  position:relative;height:14px;border-radius:7px;
  background:linear-gradient(90deg,#2E6BD6 0%,#41B6E6 38%,#EBC15A 56%,#E58A3C 76%,#E0574E 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
/* EPA 4.0 divider */
.scale__action{
  position:absolute;left:var(--at);top:-5px;bottom:-5px;width:3px;
  transform:translateX(-50%);border-radius:2px;
  background:var(--white);box-shadow:0 0 0 1.5px rgba(16,27,56,.55);
}
/* Illinois average band */
.scale__il{
  position:absolute;left:var(--from);right:calc(100% - var(--to));top:-4px;bottom:-4px;
  min-width:8px;border-radius:3px;
  background:var(--white);box-shadow:0 0 0 1.5px rgba(16,27,56,.55),0 0 12px rgba(255,255,255,.45);
}
/* Unlabelled reference pins, spelled out in the key below */
.scale__pin{
  position:absolute;left:var(--at);top:50%;width:2px;height:20px;
  transform:translate(-50%,-50%);border-radius:1px;
  background:rgba(255,255,255,.55);
}

/* Axis */
.scale__axis{position:relative;height:20px;margin-top:var(--s-2)}
.scale__axis span{
  position:absolute;left:var(--at);top:0;transform:translateX(-50%);
  font-size:var(--fs-2xs);font-weight:500;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.55);
}
.scale__axis span:first-child{transform:none}
.scale__axis span:last-child{transform:translateX(-100%)}

/* Illinois flag, pointing up at the band */
.scale__flags{position:relative;min-height:38px}
.scale__flag{
  position:absolute;left:var(--at);top:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;line-height:1.25;white-space:nowrap;
}
.scale__flag::before{
  content:"";border:5px solid transparent;border-bottom-color:var(--brand-cyan);
  margin-bottom:3px;
}
.scale__flag-name{
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-cyan);
}
.scale__flag b{font-size:var(--fs-sm);font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.scale__unit{
  position:absolute;left:0;top:8px;
  font-size:var(--fs-2xs);font-style:normal;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}

/* Key: the two pins that carry no on-track label */
.scale__key{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.14);
}
.scale__key li{
  display:flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);color:rgba(255,255,255,.72);
}
.scale__key li::before{
  content:"";width:2px;height:12px;border-radius:1px;background:rgba(255,255,255,.55);
}
.scale__key b{color:var(--white);font-weight:600;font-variant-numeric:tabular-nums}

/* Narrow cards: the flag would collide with the right edge, so pin it
   left-of-centre and let the key carry the Illinois figure instead. */
@media(max-width:479px){
  .scale__chip{font-size:var(--fs-2xs);padding:4px var(--s-2)}
  .scale__flag{font-size:.9em}
  .scale__flag-name{font-size:var(--fs-2xs)}
}

/* ---------- 9c. Lead: housing-age chart + federal limits ---------- */
/* Built for a LIGHT surface (.section--alt), unlike the radon scale opposite
   it. One gradient spans each full track and an opaque cover hides the
   remainder, so 87% genuinely reaches the warm end and 24% stays cool.
   Plain layout widths, which measure reliably. */
.agewrap{max-width:860px;margin:clamp(32px,4vw,48px) auto 0}
.agescale{display:flex;flex-direction:column;gap:var(--s-3)}
.agescale__title{
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-subtle);margin-bottom:var(--s-4);
}
.agescale__row{display:grid;grid-template-columns:104px 1fr 56px;align-items:center;gap:var(--s-4)}
.agescale__era{
  font-size:var(--fs-sm);font-weight:500;color:var(--fg-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.agescale__track{
  position:relative;height:14px;border-radius:7px;overflow:hidden;
  background:linear-gradient(90deg,#2E6BD6 0%,#41B6E6 30%,#EBC15A 60%,#E58A3C 80%,#E0574E 100%);
}
/* The unfilled remainder. A distinct trough colour, NOT the section
   background, so the full extent of every bar is visible. */
.agescale__track::after{
  content:"";position:absolute;top:0;bottom:0;right:0;z-index:1;
  width:calc(100% - var(--pct) * 1%);
  background:#D3DCEE;
  border-radius:0 7px 7px 0;
  border-left:1px solid rgba(16,27,56,.20);
}
/* Outline sits ABOVE the trough. On the element itself it would be painted
   under ::after and disappear across the empty half. */
.agescale__track::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(16,27,56,.28);
}
.agescale__val{
  font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;
  color:var(--navy-900);text-align:right;font-variant-numeric:tabular-nums;
}
.agescale__rule{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-2);padding-top:var(--s-3);
  border-top:2px solid var(--navy-900);
  font-size:var(--fs-xs);color:var(--fg-muted);
}
.agescale__rule b{font-family:var(--font-display);color:var(--navy-900);font-size:var(--fs-md);font-weight:600}

/* Bars fill left to right on arrival, staggered like the radon markers.
   The wipe covers only the filled portion and collapses toward the fill
   boundary, so the gradient is revealed from the left. Same trough colour,
   so before it runs the bar simply reads as empty. */
.agescale__wipe{
  position:absolute;left:0;top:0;bottom:0;z-index:1;
  width:calc(var(--pct) * 1%);
  background:#D3DCEE;
  transform:scaleX(1);transform-origin:100% 50%;
  transition:transform 900ms var(--ease-out);
}
[data-visible="true"] .agescale__wipe{transform:scaleX(0)}
.agescale__row:nth-child(1) .agescale__wipe{transition-delay:140ms}
.agescale__row:nth-child(2) .agescale__wipe{transition-delay:280ms}
.agescale__row:nth-child(3) .agescale__wipe{transition-delay:420ms}

.agescale__val{opacity:0;transition:opacity 420ms var(--ease-out)}
[data-visible="true"] .agescale__val{opacity:1}
.agescale__row:nth-child(1) .agescale__val{transition-delay:720ms}
.agescale__row:nth-child(2) .agescale__val{transition-delay:860ms}
.agescale__row:nth-child(3) .agescale__val{transition-delay:1000ms}

.agescale__rule{opacity:0;transition:opacity 420ms var(--ease-out)}
[data-visible="true"] .agescale__rule{opacity:1;transition-delay:1120ms}

/* Federal limits: three media, three unit systems, so they are grouped rather
   than forced onto one axis the way the radon figures are. */
.limits{max-width:860px;margin:clamp(36px,4.5vw,56px) auto 0;
  padding-top:var(--s-6);border-top:1px solid var(--border-strong)}
.limits__title{
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-subtle);margin-bottom:var(--s-5);
}
.limits__grid{display:grid;gap:var(--s-4)}
@media(min-width:620px){.limits__grid{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}}
.limit{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-5);
}
.limit__medium{
  display:block;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-4);
}
.limit dl{display:flex;flex-direction:column;gap:var(--s-4);margin:0}
.limit dl > div + div{padding-top:var(--s-4);border-top:1px solid var(--border)}
.limit dt{
  font-family:var(--font-display);font-size:var(--fs-xl);font-weight:600;
  color:var(--navy-900);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.limit dt em{
  font-family:var(--font-sans);font-style:normal;font-size:var(--fs-sm);font-weight:600;
  color:var(--fg-muted);margin-left:3px;letter-spacing:0;
}
.limit dd{margin:var(--s-1) 0 0;font-size:var(--fs-xs);line-height:1.5;color:var(--fg-subtle)}

/* The closing statement, on a light surface this time. */
.statement.statement--onlight{color:var(--fg-muted)}
.statement.statement--onlight .statement__lead{color:var(--navy-900)}

/* ---------- 10. Stat / data ---------- */
.stat{border-top:2px solid var(--navy-900);padding-top:var(--s-4);display:flex;flex-direction:column}
.section--dark .stat{border-top-color:var(--brand-600)}
.stat__num{font-family:var(--font-display);
  font-size:clamp(2rem,1.5rem + 1.8vw,2.9rem);font-weight:600;letter-spacing:-.015em;
  line-height:1}
.stat__unit{font-size:.5em;font-weight:600;color:var(--fg-subtle);margin-left:3px}
.section--dark .stat__unit{color:rgba(255,255,255,.55)}
.stat__label{font-size:var(--fs-sm);line-height:1.5;color:var(--fg-muted);margin-top:var(--s-3)}
.stat__src{font-size:var(--fs-xs);color:var(--fg-subtle);margin-top:var(--s-2)}
.section--dark .stat__label{color:rgba(255,255,255,.72)}
.section--dark .stat__src{color:rgba(255,255,255,.5)}

/* Hazard callout */
.callout{
  display:flex;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-md);
  background:var(--amber-50);border:1px solid var(--amber-100);
  border-left:3px solid var(--amber-700);
}
.callout svg{width:20px;height:20px;flex:none;color:var(--amber-700);margin-top:2px}
.callout p{font-size:var(--fs-md);line-height:1.6;color:#6B4205}
.callout strong{color:var(--amber-700)}
.callout--info{background:var(--brand-50);border-color:var(--brand-100);border-left-color:var(--brand-700)}
.callout--info svg{color:var(--brand-700)}
.callout--info p{color:#152C63}
.callout--info strong{color:var(--brand-700)}

/* Standalone statement: a boxed callout looked like a pasted-on panel inside
   the dark section, so this carries the same weight typographically instead. */
.statement{
  max-width:70ch;margin:var(--s-5) auto 0;text-align:center;
  font-family:var(--font-display);
  font-size:var(--fs-base);line-height:1.6;font-weight:500;letter-spacing:.002em;
  color:rgba(255,255,255,.76);
}
.statement__lead{font-weight:600;color:var(--white)}

/* ---------- Mobile density ---------- */
/* Phones stack by necessity, so the saving has to come from rhythm and
   padding rather than from columns. Nothing here removes content. */
@media(max-width:767px){
  .section{padding-block:38px}
  .section--tight{padding-block:32px}
  .card{padding:var(--s-5);gap:var(--s-2)}
  .grid{gap:var(--s-4)}
  .split{gap:var(--s-5)}
  .stack-6 > * + *{margin-top:var(--s-5)}
  .step{padding:var(--s-4) 0 var(--s-4) var(--s-7)}
  .svc{padding-block:32px}
  .faq summary{padding:var(--s-4) 0}
  .contact-item{padding-block:var(--s-4)}
  /* Footer link lists are thumb targets on a phone; 18px of text is not. */
  .footer ul{gap:var(--s-1)}
  .footer ul li > a{display:inline-flex;align-items:center;min-height:40px}
  .footer__legal a{display:inline-flex;align-items:center;min-height:40px}
  /* Tapping the phone number to call is a primary mobile action; 20px is not
     a thumb target. Same for the standalone arrow links. */
  .link{min-height:44px}
  /* "What we offer" restates the Services page, which is one tap away. On a
     phone the cards keep icon + title only and link straight through. */
  .cards--compact{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
  .cards--compact .card{padding:var(--s-4);gap:var(--s-2);justify-content:flex-start}
  .cards--compact .card p{display:none}
  .cards--compact .card__icon{width:36px;height:36px;margin-bottom:0}
  .cards--compact .card__icon svg{width:19px;height:19px}
  .cards--compact .card .t-h3{font-family:var(--font-sans);
    font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em;line-height:1.3}
  /* two credentials pair up; coverage keeps the full width below them */
  .creds{grid-template-columns:repeat(2,1fr);gap:var(--s-4) var(--s-5)}
  .creds > :last-child{grid-column:1 / -1}
}

/* ---------- 11. Process steps ---------- */
.steps{counter-reset:step;display:grid;gap:0}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{counter-increment:step;padding:var(--s-5) 0 var(--s-5) var(--s-7);
  border-top:1px solid var(--border);position:relative}
.step::before{
  content:"0" counter(step);
  position:absolute;left:0;top:calc(var(--s-5) + 2px);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
@media(min-width:900px){
  .step{padding:var(--s-6) var(--s-5) var(--s-5) 0}
  .step + .step{border-left:1px solid var(--border);padding-left:var(--s-5)}
  .step::before{position:static;display:block;margin-bottom:var(--s-4)}
}
.section--dark .step{border-top-color:rgba(255,255,255,.16)}
.section--dark .step + .step{border-left-color:rgba(255,255,255,.16)}
.section--dark .step::before{color:var(--brand-100)}
.step h3{font-size:var(--fs-base);margin-bottom:var(--s-2)}
.step p{font-size:var(--fs-sm);line-height:1.6;color:var(--fg-muted)}
.section--dark .step p{color:rgba(255,255,255,.7)}

/* ---------- 12. Service detail ---------- */
.svc{scroll-margin-top:100px;padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--border)}
.svc:first-of-type{border-top:0;padding-top:0}
.svc__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.tag{
  display:inline-flex;align-items:center;padding:3px var(--s-3);border-radius:100px;
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100);
}
.tag--radon{background:var(--slate-100);color:var(--navy-700);border-color:var(--border-strong)}

/* Jump rail */
.jump{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.jump a{
  padding:var(--s-2) var(--s-4);border:1px solid var(--border-strong);border-radius:100px;
  font-size:var(--fs-sm);font-weight:500;color:var(--fg-muted);min-height:44px;display:inline-flex;align-items:center;
  transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.jump a:hover{border-color:var(--navy-900);color:var(--navy-900);background:var(--white)}

/* Spec table: tabular figures, hairline rules, no zebra */
.spec{width:100%;border-collapse:collapse;font-size:var(--fs-md);min-width:440px}
.spec caption{text-align:left;font-size:var(--fs-xs);color:var(--fg-subtle);padding-bottom:var(--s-3)}
.spec th,.spec td{padding:var(--s-4) var(--s-4) var(--s-4) 0;text-align:left;
  border-bottom:1px solid var(--border);vertical-align:top}
.spec th{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-subtle);border-bottom-color:var(--border-strong);padding-block:var(--s-3)}
.spec td:first-child{font-weight:600;color:var(--navy-900)}
.spec tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Dark-context overrides. .jump and .spec default to a light surface but are
   also used inside .hero / .section--dark, where they inherited unreadable
   dark-on-dark colours (.spec td:first-child was literally 1:1). */
.hero .jump a{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.24)}
.hero .jump a:hover{color:var(--white);border-color:var(--white);background:rgba(255,255,255,.08)}
.section--dark .spec caption{color:rgba(255,255,255,.62)}
.section--dark .spec th{color:rgba(255,255,255,.62);border-bottom-color:rgba(255,255,255,.26)}
.section--dark .spec td{border-bottom-color:rgba(255,255,255,.12)}
.section--dark .spec td:first-child{color:var(--white)}

/* ---------- 13. FAQ ---------- */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;cursor:pointer;list-style:none;min-height:44px;
  font-size:var(--fs-base);font-weight:600;letter-spacing:-.015em;
  transition:color var(--dur) var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;margin-top:8px;
  border-right:1.5px solid var(--slate-400);border-bottom:1.5px solid var(--slate-400);
  transform:rotate(45deg);transform-origin:60% 60%;
  transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.faq__body{padding:0 0 var(--s-5);max-width:var(--measure)}
.faq__body p{font-size:var(--fs-md);line-height:1.7;color:var(--fg-muted)}
.faq__body p + p{margin-top:var(--s-3)}

/* ---------- 14. Forms ---------- */
.form{display:flex;flex-direction:column;gap:var(--s-5)}
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--navy-900)}
.field .req{color:var(--red-700);margin-left:2px}
.field .hint{font-size:var(--fs-xs);color:var(--fg-subtle);line-height:1.5}
.field input:not([type="checkbox"]),.field select,.field textarea{
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4);
  font:inherit;font-size:16px; /* 16px prevents iOS auto-zoom */
  color:var(--fg);background:var(--white);
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
  appearance:none;-webkit-appearance:none;
}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6E7E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;background-size:18px;
  padding-right:var(--s-8);cursor:pointer;
}
.field input:not([type="checkbox"]):hover,.field select:hover,.field textarea:hover{border-color:var(--slate-400)}
.field input:not([type="checkbox"]):focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(46,107,214,.18);
}
.field input:not([type="checkbox"])::placeholder,.field textarea::placeholder{color:var(--slate-500)}
.field[data-invalid="true"] input:not([type="checkbox"]),.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--red-700)}
.field[data-invalid="true"] input:not([type="checkbox"]):focus,.field[data-invalid="true"] textarea:focus{box-shadow:0 0 0 3px rgba(163,32,32,.14)}
.field__error{display:none;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);font-weight:500;color:var(--red-700)}
.field__error svg{width:14px;height:14px;flex:none}
.field[data-invalid="true"] .field__error{display:flex}
.form__row{display:grid;gap:var(--s-5)}
@media(min-width:640px){.form__row{grid-template-columns:1fr 1fr}}
.form__status{display:none;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-radius:var(--r-md);
  font-size:var(--fs-md);line-height:1.55}
.form__status[data-state="success"]{display:flex;background:#EAF6F0;border:1px solid #BFE0CF;color:var(--green-700)}
.form__status[data-state="error"]{display:flex;background:var(--red-50);border:1px solid #EFC9C9;color:var(--red-700)}
.form__status svg{width:20px;height:20px;flex:none;margin-top:1px}
.consent{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--s-3);align-items:flex-start}
.consent input[type="checkbox"]{appearance:auto;-webkit-appearance:checkbox;
  width:20px;height:20px;min-height:20px;flex:none;margin-top:2px;
  accent-color:var(--brand-700);cursor:pointer;padding:0}
.consent label{flex:1;font-size:var(--fs-sm);font-weight:400;line-height:1.55;color:var(--fg-muted);cursor:pointer}
.consent .field__error{flex-basis:100%}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 15. Contact rail ---------- */
.contact-list{display:flex;flex-direction:column}
.contact-item{display:flex;gap:var(--s-4);padding-block:var(--s-5);border-bottom:1px solid var(--border)}
.contact-item:last-child{border-bottom:0}
.contact-item__icon{width:38px;height:38px;flex:none;border-radius:var(--r-md);display:grid;
  place-items:center;background:var(--brand-50);color:var(--brand-700)}
.contact-item__icon svg{width:19px;height:19px}
.contact-item dt{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle)}
.contact-item dd{margin:var(--s-2) 0 0;font-size:var(--fs-base);font-weight:600;letter-spacing:-.015em}
.contact-item dd a{display:inline-flex;align-items:center;min-height:44px}
.contact-item dd a:hover{color:var(--accent)}
.contact-item .t-small{font-weight:400;margin-top:var(--s-1)}

/* ---------- 16. Footer ---------- */
.footer{background:var(--navy-950);color:rgba(255,255,255,.68);padding-block:var(--s-8) var(--s-6);font-size:var(--fs-sm)}
.footer__grid{display:grid;gap:var(--s-7)}
@media(min-width:768px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr}}
@media(min-width:1024px){.footer__grid{grid-template-columns:2fr 1fr 1fr 1.3fr;gap:var(--s-6)}}
.footer h3{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.52);margin-bottom:var(--s-4)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--s-3)}
.footer a{transition:color var(--dur) var(--ease-out)}
.footer a:hover{color:var(--white)}
.footer .brand__name{color:var(--white)}
.footer .brand__tag{color:rgba(255,255,255,.52)}
.footer__bottom{
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-5);align-items:center;justify-content:space-between;
  font-size:var(--fs-sm);color:rgba(255,255,255,.58);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.footer__disclaimer{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--fs-xs);line-height:1.65;color:rgba(255,255,255,.52);max-width:92ch}
.social{display:flex;gap:var(--s-2);margin-top:var(--s-4)}
.social a{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.16);
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.social a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32)}
.social svg{width:19px;height:19px}

/* Sticky mobile call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);
  padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom));
  background:rgba(15,30,46,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-out);
}
.callbar[data-visible="true"]{transform:none}
.callbar .btn{flex:1;min-height:46px;font-size:var(--fs-sm);padding-inline:var(--s-3)}
@media(min-width:1024px){.callbar{display:none}}
@media(max-width:1023px){body[data-has-callbar="true"]{padding-bottom:78px}}

/* ---------- 17. Motion ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
[data-reveal][data-visible="true"]{opacity:1;transform:none}
[data-reveal-group] > *{opacity:0;transform:translateY(16px);
  transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
[data-reveal-group][data-visible="true"] > *{opacity:1;transform:none}
[data-reveal-group][data-visible="true"] > *:nth-child(1){transition-delay:0ms}
[data-reveal-group][data-visible="true"] > *:nth-child(2){transition-delay:70ms}
[data-reveal-group][data-visible="true"] > *:nth-child(3){transition-delay:140ms}
[data-reveal-group][data-visible="true"] > *:nth-child(4){transition-delay:210ms}
[data-reveal-group][data-visible="true"] > *:nth-child(5){transition-delay:280ms}
[data-reveal-group][data-visible="true"] > *:nth-child(6){transition-delay:350ms}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-reveal],[data-reveal-group] > *{opacity:1 !important;transform:none !important}
  .hero__grid > div > *,.hero__art,.hero--page .hero__inner > *{animation:none !important}
  .scale__wipe{transform:scaleX(0) !important}
  .scale__il,.scale__action,.scale__pin,.scale__chip,.scale__flag{
    opacity:1 !important;translate:none !important}
  .agescale__wipe{transform:scaleX(0) !important}
  .agescale__val,.agescale__rule{opacity:1 !important}
}

/* ---------- 17b. Choreography ---------- */
/* Uses the `translate` property rather than `transform` so it composes with
   elements that already carry a transform (the hero artwork's alignment nudge).
   Everything here is switched off by the reduced-motion block below. */

@keyframes riseIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Hero entrance: copy leads, artwork follows. */
.hero__grid > div > *{animation:riseIn 640ms var(--ease-out) both}
.hero__grid > div > *:nth-child(1){animation-delay:60ms}
.hero__grid > div > *:nth-child(2){animation-delay:130ms}
.hero__grid > div > *:nth-child(3){animation-delay:200ms}
.hero__grid > div > *:nth-child(4){animation-delay:270ms}
.hero__art{animation:fadeIn 900ms var(--ease-out) 240ms both}
.hero--page .hero__inner > *{animation:riseIn 560ms var(--ease-out) both}
.hero--page .hero__inner > *:nth-child(2){animation-delay:70ms}
.hero--page .hero__inner > *:nth-child(3){animation-delay:140ms}

/* The pCi/L scale draws itself: the track wipes in, then the markers land.
   This is the most persuasive moment on the page, so it earns the motion. */
.scale__wipe{
  position:absolute;inset:0;z-index:1;border-radius:7px;
  background:var(--navy-900);
  transform:scaleX(1);transform-origin:100% 50%;
  transition:transform 1000ms var(--ease-out) 120ms;
}
[data-visible="true"] .scale__wipe{transform:scaleX(0)}
.scale__il,.scale__action,.scale__pin{opacity:0;transition:opacity 420ms var(--ease-out)}
[data-visible="true"] .scale__pin{opacity:1;transition-delay:640ms}
[data-visible="true"] .scale__action{opacity:1;transition-delay:820ms}
[data-visible="true"] .scale__il{opacity:1;transition-delay:1000ms}
.scale__chip,.scale__flag{opacity:0;translate:0 6px;
  transition:opacity 420ms var(--ease-out),translate 420ms var(--ease-out)}
[data-visible="true"] .scale__chip{opacity:1;translate:0 0;transition-delay:900ms}
[data-visible="true"] .scale__flag{opacity:1;translate:0 0;transition-delay:1080ms}

/* FAQ answers ease in rather than snapping. Closing stays instant because
   <details> removes the content from the box tree immediately. */
.faq details[open] .faq__body{animation:riseIn 260ms var(--ease-out)}

/* Nav underline grows from the centre instead of just appearing. */
.nav a[aria-current="page"]::after{animation:navUnderline 420ms var(--ease-out) both}
@keyframes navUnderline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 18. Print ---------- */
@media print{
  .header,.callbar,.mobile-nav,.skip{display:none !important}
  .hero,.section--dark,.footer{background:#fff !important;color:#000 !important}
  .hero::before,.hero::after{display:none}
  .hero h1,.section--dark h2,.cred__value{color:#000 !important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:16pt}
}