/* =============================================================================
   GlobalGate Homes — main.css
   Design direction "Redline" (see DESIGN.md). One CSS file, no frameworks.
   Sections:
     00 Tokens            06 Header & drawer        12 Forms
     01 Fonts             07 Footer                 13 Tables
     02 Reset             08 Signature motifs       14 Accordion (details)
     03 Base typography   09 Buttons & links        15 Page sections & bands
     04 Layout            10 Ledger, steps, bridge  16 Motion & reveal
     05 Utilities         11 Figures, quotes, doc   17 Reduced motion
                                                    18 Refinements
                                                    19 Referral flow
   Rules that are easy to break (grep before shipping):
     - Oxide (#9A3B2A) is drawn only as border / outline / text-decoration /
       color. Never a background, never on Slate.
     - border-radius is 0 or 2px. No shadows, no colour ramps, no blur effects.
     - Nothing is centered by default. No text on photographs.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   00 TOKENS
   --------------------------------------------------------------------------- */
:root{
  /* colour — nine tokens, one alpha */
  --limewash:#F4F0E8;   /* page ground */
  --chalk:#FBF9F4;      /* elevated surface: fields, sample report, hovered rows */
  --plaster:#ECE6DA;    /* tinted band, image box while loading */
  --ink:#1C1B18;        /* text, structural rules, primary button */
  --graphite:#4A4843;   /* muted text, control borders */
  --oxide:#9A3B2A;--logo:#12423A;      /* accent: hairlines, numeral rules, underlines, stamp, errors ONLY */
  --slate:#34413D;      /* the single dark surface: footer + International band */
  --rule:#CFC8BA;       /* decorative 1px hairlines */
  --verdigris:#276B5C;  /* focus ring, success, "Approved" */
  --focus:var(--verdigris); /* focus-ring colour; .band--slate swaps it to Limewash */
  --rule-dark:rgba(244,240,232,0.20); /* hairlines on Slate */
  --surface:var(--limewash); /* current section ground; bands override */

  /* type families (metric-adjusted fallbacks in 01) */
  --f-serif:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  --f-sans:"Schibsted Grotesk","Schibsted Fallback",Arial,Helvetica,sans-serif;

  /* type scale — fluid between 480px and 1280px */
  --fs-display:clamp(2.75rem,1.2rem + 4.2vw,5.25rem);
  --fs-h1:clamp(2.5rem,1.6rem + 2.4vw,3.5rem);
  --fs-h2:clamp(2rem,1.5rem + 1.3vw,2.5rem);
  --fs-h3:clamp(1.375rem,1.25rem + .3vw,1.5rem);
  --fs-lead:clamp(1.125rem,1.05rem + .3vw,1.25rem);
  --fs-body:clamp(1.0625rem,1.03rem + .15vw,1.125rem);
  --fs-body-sm:1rem;   /* secondary prose: bridge, paths, case stories — 16px on the 24px baseline */
  --fs-small:0.875rem;
  --fs-eyebrow:0.75rem;
  --fs-ui:0.9375rem;
  --fs-caption-label:0.8125rem;
  --fs-numeral-lg:clamp(3rem,2rem + 2.5vw,4rem);
  --fs-numeral:clamp(2.5rem,2rem + 1.2vw,3rem);
  --fs-quote:clamp(1.5rem,1.25rem + .7vw,1.75rem);
  --fs-wordmark:1.375rem;
  --fs-drawer:2rem;

  --lh-display:1.02; --lh-h1:1.08; --lh-h2:1.1; --lh-h3:1.3;
  --lh-lead:1.6; --lh-body:1.55; --lh-small:1.43; --lh-eyebrow:1.33;
  --lh-numeral:1; --lh-quote:1.3; --lh-ui:1;

  --ls-display:-0.02em; --ls-h1:-0.015em; --ls-h2:-0.01em; --ls-h3:0;
  --ls-body:0; --ls-small:0.005em; --ls-eyebrow:0.14em; --ls-ui:0.01em;
  --ls-stamp:0.16em;

  --measure-prose:34em; --measure-lead:30em;
  --measure-display:14ch; --measure-h1:16ch; --measure-h2:22ch; --measure-quote:26em;

  /* spacing — 4px baseline, vertical space in multiples of 8 */
  --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; --s-10:128px; --s-11:160px;

  /* grid */
  --container:1280px;
  --gutter:24px;
  --pad:clamp(20px,5vw,64px);
  --col:calc((var(--container) - 11 * var(--gutter)) / 12);
  --section-y:var(--s-8);
  --header-h:88px;

  /* shape — the contract allows exactly two radii and no shadows */
  --r-0:0;
  --r-1:2px;

  /* layers */
  --z-header:50;
  --z-drawer:60;
  --z-skip:70;

  /* motion */
  --ease:cubic-bezier(0.2,0.6,0.2,1);
  --d-ui:150ms;     /* buttons, rows, nav rule */
  --d-fast:200ms;   /* links, header height, drawer, plus glyph */
  --d-text:400ms;   /* text and figure fades */
  --d-rule:500ms;   /* dimension rules */
  --d-image:600ms;  /* image wipes and hover scale */
}
@media (max-width:767px){:root{--gutter:16px}}
@media (max-width:1023px){:root{--header-h:64px}}
@media (min-width:768px){:root{--section-y:var(--s-9)}}
@media (min-width:1280px){:root{--section-y:var(--s-10);--lh-body:1.5556}} /* 18px body → 28px lines */
/* Phones: the display measure is relaxed and the floor lowered so the hero headline
   sets in four lines rather than six and the CTA stays near the fold. */
@media (max-width:639px){:root{--fs-display:clamp(2.125rem,1rem + 5vw,2.75rem);--measure-display:18ch;--lh-display:1.08}}

/* ---------------------------------------------------------------------------
   01 FONTS — metric-adjusted local fallbacks so the page does not jump
   --------------------------------------------------------------------------- */
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Schibsted Fallback";src:local("Arial");size-adjust:98%;ascent-override:94%;descent-override:22%;line-gap-override:0%}

/* ---------------------------------------------------------------------------
   02 RESET
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 16px);
  background:var(--limewash);
}
body{
  min-height:100vh;
  background:var(--surface);
  color:var(--ink);
  font:400 var(--fs-body)/var(--lh-body) var(--f-sans);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;color:inherit}
ul[class],ol[class]{list-style:none;padding:0}
a{color:inherit}
address{font-style:normal}
figure{margin:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
summary{cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------------------------------------------------------------------------
   03 BASE TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1,h2,h3,h4,.display{
  font-family:var(--f-serif);
  font-optical-sizing:auto;
  font-weight:400;
  color:var(--ink);
  text-wrap:balance;
  margin:0 0 .5em;
}
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);max-width:var(--measure-display)}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);max-width:var(--measure-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);max-width:var(--measure-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:500}
h4{font-size:var(--fs-lead);line-height:var(--lh-h3);font-weight:500}
p{text-wrap:pretty}
p + p{margin-top:1em}
.prose{max-width:var(--measure-prose)}
.prose > * + *{margin-top:1em}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--graphite);max-width:var(--measure-lead)}
.small{font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);color:var(--graphite)}
.serif-italic{font:italic 400 1.0625rem/1.4118 var(--f-serif);font-optical-sizing:auto}
.tabular{font-variant-numeric:tabular-nums}
strong,b{font-weight:500}
em,i{font-style:italic}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s-6) 0}
::selection{background:var(--plaster);color:var(--ink)}
.band--slate ::selection{background:var(--limewash);color:var(--slate)}

/* Prose links: Ink text, 1px Oxide underline → 2px + Oxide text on hover */
a:not([class]),.link{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--oxide);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:text-decoration-thickness var(--d-fast) var(--ease),color var(--d-fast) var(--ease);
}
a:not([class]):hover,.link:hover{text-decoration-thickness:2px;color:var(--oxide)}
.band--slate a:not([class]),.band--slate .link{color:var(--limewash);text-decoration-color:var(--rule-dark)}
.band--slate a:not([class]):hover,.band--slate .link:hover{color:var(--limewash);text-decoration-color:var(--limewash)}

/* Text inversion on the single dark surface */
.band--slate,.band--slate h1,.band--slate h2,.band--slate h3,.band--slate h4{color:var(--limewash)}
.band--slate .lead,.band--slate .small{color:var(--plaster)}

/* ---------------------------------------------------------------------------
   04 LAYOUT — container, 12-column grid, bleed grid, stack, cluster
   --------------------------------------------------------------------------- */
.container{
  max-width:calc(var(--container) + 2 * var(--pad));
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* 12-column composition grid. Children place themselves with .col-A-B
   (grid columns A through B inclusive). Below 1024 every child is full width. */
.cols{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--gutter);row-gap:var(--s-7)}
.cols > *{min-width:0}
@media (min-width:1024px){
  .cols{grid-template-columns:repeat(12,minmax(0,1fr))}
  .col-1-12{grid-column:1 / 13}
  .col-1-1{grid-column:1 / 2}
  .col-2-12{grid-column:2 / 13}
  .col-2-4{grid-column:2 / 5}
  .col-2-5{grid-column:2 / 6}
  .col-2-6{grid-column:2 / 7}
  .col-2-7{grid-column:2 / 8}
  .col-2-8{grid-column:2 / 9}
  .col-5-8{grid-column:5 / 9}
  .col-6-12{grid-column:6 / 13}
  .col-7-12{grid-column:7 / 13}
  .col-8-12{grid-column:8 / 13}
  .col-9-12{grid-column:9 / 13}
  .cols--tight{row-gap:var(--s-6)}
}

/* Bleed grid: text in cols 2–6, image cols 7–12 bleeding to the right edge.
   .is-mirrored flips to 7+5 bleeding left. An optional third child .below
   sits under the text column (used by the hero ledger so words come before
   the picture on mobile). */
.bleed{
  display:grid;
  column-gap:var(--gutter);
  /* every content column line is named "c": "c 2" is the line before column 2 */
  /* the outer tracks lose one gutter each so bleed content lines up with .container */
  grid-template-columns:[full-start] minmax(max(0px,calc(var(--pad) - var(--gutter))),1fr) [content-start] repeat(12,[c] minmax(0,var(--col))) [content-end] minmax(max(0px,calc(var(--pad) - var(--gutter))),1fr) [full-end];
}
.bleed > *{min-width:0}
.bleed > .text{grid-column:c 2 / span 5}
.bleed > .media{grid-column:c 7 / full-end}
.bleed > .below{grid-column:c 2 / span 5}
.bleed.is-mirrored > .text{grid-column:c 8 / span 5}
.bleed.is-mirrored > .media{grid-column:full-start / c 7}
.bleed.is-mirrored > .below{grid-column:c 8 / span 5}
/* with a .below child the media spans both rows; row 1 is sized to the text so .below follows it directly */
.bleed:has(> .below){grid-template-rows:auto 1fr}
.bleed:has(> .below) > .text{grid-row:1}
.bleed:has(> .below) > .media{grid-row:1 / span 2}
.bleed:has(> .below) > .below{grid-row:2;align-self:start}
.bleed > .media .fig figcaption{padding-right:var(--pad)}
.bleed.is-mirrored > .media .fig figcaption{padding-right:0;padding-left:var(--pad)}
/* Row pin. .text precedes .media in the DOM so words come first below 1024; in
   the mirrored variant .media then starts at full-start, behind the placement
   cursor left by .text, and sparse auto-placement would drop it to a second
   row. Pin both to row 1 (a .below child keeps its own rows via :has() above). */
@media (min-width:1024px){
  .bleed > .text{grid-row:1}
  .bleed:not(:has(> .below)) > .media{grid-row:1}
}
@media (max-width:1023px){
  .bleed > :is(.text,.media,.below),
  .bleed.is-mirrored > :is(.text,.media,.below){grid-column:full-start / full-end;grid-row:auto;padding-inline:var(--pad)}
  .bleed > .media,.bleed.is-mirrored > .media{padding-inline:0}
  .bleed:has(> .below){grid-template-rows:none}
  .bleed:has(> .below) > :is(.text,.media,.below){grid-row:auto}
  .bleed > .media .fig figcaption,.bleed.is-mirrored > .media .fig figcaption{padding-inline:var(--pad)}
}

/* Stack: vertical rhythm helper. Cluster: inline items that wrap. */
.stack{display:flex;flex-direction:column;gap:var(--s-5)}
.stack--sm{gap:var(--s-3)}
.stack--lg{gap:var(--s-7)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6)}
@media (max-width:479px){
  .actions{flex-direction:column;align-items:flex-start}
  .actions > .btn{width:100%}
}

/* Section shell: every section owns its vertical padding */
.section{padding-block:var(--section-y)}
.section--flush-top{padding-top:0}

/* Section header rhythm: dim-rule (64 below, built in) → H2 → 24 → lead → 48 → content */
.section-head{margin-bottom:var(--s-7)}
.section-head h1,.section-head h2{margin:0}
.section-head .lead{margin-top:var(--s-5)}
.section-head--tight{margin-bottom:var(--s-6)}
/* an H2 that is itself a .cols child inherits the 48px row-gap; pull it back to the specified 32px */
.cols > .section-head--tight{margin-bottom:calc(var(--s-6) - var(--s-7))}
/* a full section-head (H2 + lead) as a .cols child already gets the specified 48px from the row-gap */
.cols > .section-head:not(.section-head--tight){margin-bottom:0}

/* ---------------------------------------------------------------------------
   05 UTILITIES
   --------------------------------------------------------------------------- */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:8px;left:8px;z-index:var(--z-skip);
  padding:12px 16px;background:var(--ink);color:var(--limewash);
  font:500 var(--fs-ui)/1 var(--f-sans);text-decoration:none;border-radius:var(--r-1);
  transform:translateY(-200%);
}
.skip-link:focus{transform:none;outline:2px solid var(--focus);outline-offset:3px}
.measure{max-width:var(--measure-prose)}
.mt-0{margin-top:0}.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}.mt-8{margin-top:var(--s-8)}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)}.mb-6{margin-bottom:var(--s-6)}.mb-7{margin-bottom:var(--s-7)}
.hide-below-md{display:none}
@media (min-width:768px){.hide-below-md{display:initial}.hide-from-md{display:none}}
.hide-below-lg{display:none}
@media (min-width:1024px){.hide-below-lg{display:initial}.hide-from-lg{display:none}}

/* Inline glyphs — 16×16, 1.5px currentColor strokes, square caps. No circles. */
.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.icon--arrow{transition:transform var(--d-fast) var(--ease)}
.icon--plus{transition:transform var(--d-fast) var(--ease)}

/* Hairline plan / elevation glyphs (services) — 56×56 drawings, never in a shape */
.glyph{display:block;width:48px;height:48px;color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.band--slate .glyph{color:var(--limewash)}

/* ---------------------------------------------------------------------------
   06 HEADER & MOBILE DRAWER
   --------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  height:var(--header-h);
  background:var(--limewash);
  border-bottom:1px solid var(--rule);
  transition:height var(--d-fast) var(--ease);
}
.site-header[data-compact="true"]{height:64px}
.site-header__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);height:100%}

.brand{display:inline-flex;align-items:center;min-height:44px;color:var(--logo);text-decoration:none;flex:none}
.brand__logo{height:28px;width:auto;flex:none;color:currentColor}
@media (min-width:768px){.brand__logo{height:30px}}
/* Tres petits ecrans : on resserre la barre plutot que de rapetisser la marque. */
@media (max-width:359px){
  .site-header .container{padding-inline:14px}
  .site-header__row{gap:2px}
}
.brand__logo--inverse{color:var(--limewash)}
.wordmark{font:500 var(--fs-wordmark)/1 var(--f-serif);font-optical-sizing:auto;letter-spacing:-0.01em;white-space:nowrap;color:inherit}

/* Primary nav — desktop only; the drawer handles < 1024 */
.nav{display:none}
.nav ul{display:flex;align-items:center;gap:var(--s-6);margin:0;padding:0;list-style:none}
.nav a{
  position:relative;display:inline-block;padding:8px 0;
  font:500 var(--fs-ui)/var(--lh-ui) var(--f-sans);letter-spacing:var(--ls-ui);
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:0;
  border-top:1px solid var(--graphite);opacity:0;transition:opacity var(--d-ui) var(--ease);
}
.nav a:hover::after{opacity:1}
.nav a[aria-current="page"]::after{opacity:1;border-color:var(--oxide)}

.utilities{display:flex;align-items:center;gap:var(--s-5)}
.lang{display:inline-flex;align-items:center;gap:var(--s-2);font:500 .8125rem/1 var(--f-sans);letter-spacing:.08em;color:var(--graphite)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:44px;padding:10px 2px;color:var(--graphite);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.lang a:hover{color:var(--ink);text-decoration-color:var(--oxide)}
.lang .lang__current{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:44px;padding:10px 2px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:4px}
.lang span[aria-hidden]{color:var(--graphite)}

.site-header .btn--outline{display:none}
.menu-toggle{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--s-1);
  font:500 var(--fs-ui)/1 var(--f-sans);letter-spacing:var(--ls-ui);color:var(--ink);
}
.menu-glyph{display:block;width:16px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}

/* Below the tablet breakpoint the header carries the brand, both language links and the
   Menu control with no room to spare, so the row tightens and the decorative separators
   (aria-hidden middots) are dropped. */
@media (max-width:767px){
  .site-header__row{gap:var(--s-3)}
  .utilities{gap:var(--s-2)}
  .site-header .lang{gap:var(--s-1)}
  .site-header .lang span[aria-hidden]{display:none}
}
@media (max-width:479px){
  .site-header .wordmark{font-size:1.125rem}
}
/* Smallest phones: FR and ES are the only entry point an owner abroad has in the header,
   and without JS the drawer never opens — so the language group stays and the wordmark,
   the language padding and the Menu gap give up the room instead. */
@media (max-width:359px){
  .site-header__row{gap:var(--s-1)}
  .site-header .wordmark{font-size:1rem}          /* the Newsreader floor; never smaller */
  .site-header .brand{gap:var(--s-2)}
  .site-header .lang{gap:0}
  .site-header .lang a,.site-header .lang .lang__current{min-width:20px;padding-inline:0}
  .site-header .menu-toggle{gap:6px;font-size:.8125rem}
}

/* NOTE: nothing hides FR and ES below 1024 any more. They are the only entry point an owner
   abroad has in the header, and without JS the drawer that used to carry them never opens. */
@media (max-width:1023px){
  /* No-JS: the desktop nav renders inline under the brand row, and the header stops being
     sticky so a two-row header does not occupy a quarter of a phone screen. */
  html:not(.js) .site-header{height:auto;position:static}
  html:not(.js){scroll-padding-top:16px}
  html:not(.js) .site-header__row{flex-wrap:wrap;padding-block:var(--s-3);gap:var(--s-2) var(--s-4)}
  html:not(.js) .nav{display:block;order:3;flex-basis:100%}
  html:not(.js) .nav ul{flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
  html:not(.js) .nav a{padding:4px 0}
  html:not(.js) .menu-toggle{display:none}
}
/* Narrow phones keep the two actionable languages and drop the inert current one */
@media (max-width:479px){.site-header .lang .lang__current{display:none}}
@media (min-width:1024px){
  .nav{display:block}
  .menu-toggle{display:none}
}
/* The nav gap closes as the row fills up: six labels, the brand and the utilities have to
   fit inside .container without stealing the page gutter (measured at each step). */
@media (min-width:1024px) and (max-width:1279px){.nav ul{gap:var(--s-4)}}
@media (min-width:1280px) and (max-width:1439px){.nav ul{gap:var(--s-5)}}
/* The header CTA shows wherever the row has room for it: 768–1023 (no desktop nav) and
   ≥1280. On scroll it shrinks rather than disappearing, so the action is always present. */
@media (min-width:768px) and (max-width:1023px){.site-header .btn--outline{display:inline-flex}}
@media (min-width:1280px){.site-header .btn--outline{display:inline-flex}}
.site-header[data-compact="true"] .btn--outline{padding:0 var(--s-3);font-size:var(--fs-caption-label)}

/* Drawer: full-height Limewash panel, pages as a ledger */
.drawer{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:var(--limewash);color:var(--ink);
  padding:var(--s-5);overflow-y:auto;
  opacity:0;transition:opacity var(--d-fast) var(--ease);
}
.drawer.is-open{opacity:1}
.drawer__inner{min-height:100%;display:flex;flex-direction:column;gap:var(--s-6)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:40px}
.drawer__close{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--s-1);font:500 var(--fs-ui)/1 var(--f-sans);letter-spacing:var(--ls-ui)}
.drawer__pages{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.drawer__pages li{display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:baseline;column-gap:var(--s-4);border-bottom:1px solid var(--rule)}
.drawer__pages .ledger__no{font:400 1rem/1 var(--f-serif);color:var(--graphite);font-variant-numeric:tabular-nums}
.drawer__pages a{
  display:block;padding:var(--s-3) 0;
  font:400 var(--fs-drawer)/1.25 var(--f-serif);font-optical-sizing:auto;letter-spacing:-0.01em;
  color:var(--ink);text-decoration:none;
}
.drawer__pages a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:6px}
.drawer__foot{margin-top:auto;display:grid;gap:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--rule)}
.drawer__foot .lang .lang__current{display:inline-flex}
.drawer__contact{display:grid;gap:var(--s-2)}
.drawer__contact a{font:500 1.0625rem/1.4118 var(--f-sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:4px}
/* the published telephone number, styled with the surrounding text */
.tel-link{color:inherit}
.drawer__contact .tel-link{font:500 1.0625rem/1.4118 var(--f-sans)}
.drawer__foot .btn{justify-self:start}
@media (max-width:479px){.drawer__foot .btn{justify-self:stretch;width:100%}}
html.drawer-open{overflow:hidden}

/* ---------------------------------------------------------------------------
   07 FOOTER — Slate ground; the footer is always the last numbered block
   --------------------------------------------------------------------------- */
.site-footer{
  --surface:var(--slate);
  background:var(--slate);color:var(--limewash);
  padding:var(--s-9) 0 var(--s-7);
  font-size:var(--fs-ui);line-height:1.6;
}
@media (max-width:767px){.site-footer{padding:var(--s-8) 0 var(--s-6)}}
.footer-grid{display:grid;gap:var(--s-7) var(--gutter)}
@media (min-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.footer-grid{grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,2fr) minmax(0,3fr)}}
.footer-col > * + *{margin-top:var(--s-4)}
.footer-col .eyebrow{margin-bottom:var(--s-2)}
.footer-col .brand{margin-bottom:var(--s-5);color:var(--limewash)}
.footer-col p{max-width:36em}
.footer-list{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.footer-list a,.footer-col address a,.footer-col p a{
  color:var(--limewash);text-decoration:underline;text-decoration-color:var(--rule-dark);
  text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere;transition:text-decoration-color var(--d-fast) var(--ease);
}
.footer-list a{display:inline-block;padding-block:6px}
.footer-list a:hover,.footer-col a:hover{text-decoration-color:var(--limewash)}
.footer-bottom{
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3) var(--s-6);
  font-size:.8125rem;line-height:20px;color:var(--rule);
}
.footer-bottom__links{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:0;padding:0;list-style:none}
.footer-bottom__links a{display:inline-block;padding-block:10px;margin-block:-10px}
.footer-bottom a{color:var(--rule);text-decoration:underline;text-decoration-color:var(--rule-dark);text-underline-offset:4px;text-decoration-thickness:1px;transition:color var(--d-fast) var(--ease)}
.footer-bottom a:hover{color:var(--limewash);text-decoration-color:var(--limewash)}
.site-footer .link-arrow{color:var(--limewash)}
.site-footer .link-arrow > span{text-decoration-color:var(--rule-dark)}
.site-footer .link-arrow:hover > span{text-decoration-color:var(--limewash)}

/* ---------------------------------------------------------------------------
   08 SIGNATURE MOTIFS — dimension rule, eyebrow, corner marks, stamp, note
   --------------------------------------------------------------------------- */
/* Dimension-line rule: every section except the hero opens with one */
.dim-rule{position:relative;height:1px;background:var(--ink);margin-bottom:var(--s-8)}
.dim-rule::before,.dim-rule::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--ink)}
.dim-rule::before{left:0}
.dim-rule::after{right:0}
.dim-rule__label{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  padding:0 8px;background:var(--surface);
  font:500 var(--fs-eyebrow)/1 var(--f-sans);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--graphite);white-space:nowrap;
}
.dim-rule__no{font:400 1rem/1 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}
/* small screens: a long label is clipped with an ellipsis rather than pushing past the viewport */
@media (max-width:479px){.dim-rule__label{max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;letter-spacing:.1em}}
.band--slate .dim-rule,.band--slate .dim-rule::before,.band--slate .dim-rule::after{background:var(--limewash)}
.band--slate .dim-rule__label{color:var(--plaster)}
.band--slate .dim-rule__no{color:var(--limewash)}
/* vertical variant (mobile process timeline) */
.dim-rule--v{width:1px;height:100%;margin:0;background:var(--ink)}
.dim-rule--v::before,.dim-rule--v::after{top:auto;left:-4px;width:9px;height:1px}
.dim-rule--v::before{top:0}
.dim-rule--v::after{bottom:0}

/* Eyebrow: uppercase label with a 24px Oxide hairline before it */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font:500 var(--fs-eyebrow)/var(--lh-eyebrow) var(--f-sans);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--graphite);
}
.eyebrow::before{content:"";flex:none;width:24px;height:0;border-top:1px solid var(--oxide)}
.eyebrow__no{font:400 1rem/1 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}
.eyebrow--plain::before{display:none}
.band--slate .eyebrow{color:var(--plaster)}
.band--slate .eyebrow::before{border-color:var(--limewash)}
.band--slate .eyebrow__no{color:var(--limewash)}

/* Corner marks: registration ticks at the corners of an image box */
.marks{position:relative;display:block}
.marks::before,.marks::after,.marks__br::before,.marks__br::after{content:"";position:absolute;width:12px;height:12px;pointer-events:none;z-index:1}
.marks::before{top:-8px;left:-8px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.marks::after{top:-8px;right:-8px;border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
.marks__br::before{bottom:-8px;left:-8px;border-bottom:1px solid var(--ink);border-left:1px solid var(--ink)}
.marks__br::after{bottom:-8px;right:-8px;border-bottom:1px solid var(--ink);border-right:1px solid var(--ink)}
.band--slate .marks::before,.band--slate .marks::after,.band--slate .marks__br::before,.band--slate .marks__br::after{border-color:var(--limewash)}
@media (max-width:767px){.marks::before,.marks::after,.marks__br::before,.marks__br::after{display:none}}
/* On a plate that bleeds to the viewport edge the outer tick would land outside the viewport
   and be clipped, so on that side it is inset to the image edge instead. */
@media (min-width:768px){
  .bleed > .media .marks::after,.bleed > .media .marks__br::after{right:0}
  .bleed.is-mirrored > .media .marks::before,.bleed.is-mirrored > .media .marks__br::before{left:0}
}

/* Approval stamp — at most one per page, always inside the Chalk .doc */
.stamp{
  position:absolute;top:16px;right:16px;display:grid;gap:2px;padding:6px 10px;
  border:1px solid var(--oxide);outline:1px solid var(--oxide);outline-offset:3px;
  transform:rotate(-3deg);
  font:500 .6875rem/1.3 var(--f-sans);letter-spacing:var(--ls-stamp);text-transform:uppercase;
  color:var(--oxide);background:var(--chalk);max-width:220px;
}
@media (max-width:767px){.stamp{position:static;display:inline-grid;transform:none;margin:0 0 var(--s-4)}}

/* Marginal note — column 1 at ≥1280; a small italic paragraph above the text below that */
.margin-note{
  font:italic 400 1.0625rem/1.4118 var(--f-serif);font-optical-sizing:auto;
  color:var(--graphite);max-width:30em;margin:0;
}
.margin-note::before{content:"";display:block;width:24px;border-top:1px solid var(--oxide);margin-bottom:var(--s-3)}
.band--slate .margin-note{color:var(--plaster)}
.band--slate .margin-note::before{border-color:var(--limewash)}
@media (min-width:1024px) and (max-width:1279px){.cols > .margin-note{grid-column:2 / 13}}
@media (min-width:1280px){.cols > .margin-note{grid-column:1 / 2;max-width:18ch;margin-right:calc(-1 * var(--gutter))}} /* may use the gutter: column 1 is narrower than a long italic word */

/* Report states — meaning carried by the words, colour is secondary */
.state{display:inline-flex;align-items:center;gap:8px;font:500 var(--fs-eyebrow)/1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.state::before{content:"";width:8px;height:8px;border:1px solid currentColor}
.state--approved{color:var(--verdigris)}
.state--approved::before{background:currentColor}
.state--pending{color:var(--graphite)}

/* ---------------------------------------------------------------------------
   09 BUTTONS & LINKS
   --------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:48px;padding:0 22px;
  border:1px solid var(--ink);border-radius:var(--r-1);
  font:500 var(--fs-ui)/1 var(--f-sans);letter-spacing:var(--ls-ui);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--d-ui) var(--ease),color var(--d-ui) var(--ease),border-color var(--d-ui) var(--ease);
}
.btn .icon{width:16px;height:16px}
.btn--primary{background:var(--ink);color:var(--limewash)}
.btn--primary:hover{background:var(--graphite);border-color:var(--graphite)}
.btn--primary:active{background:var(--slate);border-color:var(--slate)}
.btn--primary:disabled,.btn--primary[aria-disabled="true"]{background:var(--rule);color:var(--graphite);border-color:var(--rule);cursor:not-allowed}
.btn--outline{background:transparent;color:var(--ink)}
.btn--outline:hover{background:var(--chalk)}
.btn--outline:active{background:var(--plaster)}
.btn--outline:disabled,.btn--outline[aria-disabled="true"]{border-color:var(--rule);color:var(--graphite);cursor:not-allowed}
.btn--sm{height:40px;padding:0 16px;font-size:.8125rem}
.band--slate .btn--primary{background:var(--limewash);color:var(--ink);border-color:var(--limewash)}
.band--slate .btn--primary:hover{background:var(--chalk);border-color:var(--chalk)}
.band--slate .btn--primary:active{background:var(--plaster);border-color:var(--plaster)}
.band--slate .btn--outline{border-color:var(--limewash);color:var(--limewash)}
.band--slate .btn--outline:hover{background:var(--limewash);color:var(--ink)}
.band--slate .btn--outline:active{background:var(--plaster);color:var(--ink)}

/* Arrow link: label underlined in Oxide, arrow glyph slides 4px on hover */
.link-arrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding-block:11px;margin-block:-11px;
  font:500 var(--fs-ui)/1.4 var(--f-sans);letter-spacing:var(--ls-ui);
  color:var(--ink);text-decoration:none;
}
.link-arrow > span{text-decoration:underline;text-decoration-color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-thickness var(--d-fast) var(--ease)}
.link-arrow:hover > span{text-decoration-thickness:2px}
.link-arrow:hover .icon--arrow{transform:translateX(4px)}
.band--slate .link-arrow{color:var(--limewash)}
.band--slate .link-arrow > span{text-decoration-color:var(--rule-dark)}
.band--slate .link-arrow:hover > span{text-decoration-color:var(--limewash)}

/* ---------------------------------------------------------------------------
   10 LEDGER ROWS, NUMBERED STEPS, TRUST BRIDGE — lists instead of cards
   --------------------------------------------------------------------------- */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ledger__row{
  position:relative;display:grid;grid-template-columns:5rem minmax(0,1fr) auto;
  column-gap:var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--rule);
  align-items:baseline;transition:background-color var(--d-ui) var(--ease);
}
@media (max-width:767px){.ledger__row{padding:20px 0}}
.ledger__row:has(a):hover,.ledger__row:focus-within{background:var(--chalk)}
.ledger__row:focus-within{outline:2px solid var(--focus);outline-offset:-2px}
.ledger__no{font:300 1.25rem/1 var(--f-serif);font-optical-sizing:auto;color:var(--graphite);font-variant-numeric:tabular-nums}
.ledger__body{min-width:0}
.ledger__body p{margin:0;max-width:var(--measure-prose)}
.ledger__title{font:500 var(--fs-h3)/var(--lh-h3) var(--f-serif);font-optical-sizing:auto;margin:0 0 var(--s-1);max-width:none}
.ledger__title a{color:inherit;text-decoration:none}
.ledger__title a::after{content:"";position:absolute;inset:0}   /* whole row clickable */
.ledger__meta{color:var(--graphite);align-self:center}
.ledger__row:hover .icon--arrow{transform:translateX(4px)}
.ledger__after{margin-top:var(--s-5)}
@media (max-width:479px){
  .ledger__row{grid-template-columns:1fr;row-gap:var(--s-2)}
  .ledger__no{font-size:1rem}
  .ledger__meta{display:none}
}
/* Slate inversion */
.band--slate .ledger,.band--slate .ledger__row{border-color:var(--rule-dark)}
.band--slate .ledger__no,.band--slate .ledger__meta{color:var(--plaster)}
.band--slate .ledger__row:has(a):hover{background:transparent}
.band--slate .ledger__row:focus-within{background:transparent}

/* Label / value variant — <dl class="ledger ledger--kv"> with <div class="ledger__row"> */
.ledger--kv .ledger__row{grid-template-columns:minmax(0,10rem) minmax(0,1fr);align-items:baseline}
.ledger--kv .ledger__row:has(a):hover{background:transparent}
.ledger__label{
  margin:0;font:500 var(--fs-eyebrow)/var(--lh-eyebrow) var(--f-sans);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--graphite);
}
.ledger__value{margin:0;font-size:1rem;line-height:1.5;color:var(--ink);max-width:var(--measure-prose);overflow-wrap:anywhere}
.ledger__value .state{margin-left:var(--s-3);vertical-align:middle}
.ledger--kv.ledger--tight .ledger__row{padding:var(--s-4) 0}
.band--slate .ledger__label{color:var(--plaster)}
.band--slate .ledger__value{color:var(--limewash)}
@media (max-width:479px){.ledger--kv .ledger__row{grid-template-columns:1fr;row-gap:var(--s-1)}}

/* Feature | cadence variant (international program) */
.ledger--cadence .ledger__row{grid-template-columns:5rem minmax(0,1fr) minmax(0,12rem)}
.ledger__cadence{font:italic 400 1.0625rem/1.4118 var(--f-serif);font-optical-sizing:auto;color:var(--graphite)}
.band--slate .ledger__cadence{color:var(--plaster)}
@media (max-width:767px){.ledger--cadence .ledger__row{grid-template-columns:5rem minmax(0,1fr)}.ledger--cadence .ledger__cadence{grid-column:2}}
@media (max-width:479px){.ledger--cadence .ledger__row{grid-template-columns:1fr}.ledger--cadence .ledger__cadence{grid-column:1}}

/* Services index rows: numeral at ≥1024, plan glyph below that */
.ledger--index .glyph{display:none}
@media (max-width:1023px){
  .ledger--index .ledger__row{align-items:start}
  .ledger--index .ledger__no{display:none}
  .ledger--index .glyph{display:block;margin-top:-2px}
}

/* Jump ledger (services index): section numeral AND plan glyph share the first column at every width */
.ledger--jump .ledger__row{grid-template-columns:8.5rem minmax(0,1fr) auto;align-items:start}
.ledger--jump .ledger__index{display:flex;align-items:flex-start;gap:var(--s-4)}
.ledger--jump .ledger__no{padding-top:var(--s-1)}
.ledger--jump .ledger__title{margin-top:var(--s-1)}
@media (max-width:767px){
  .ledger--jump .ledger__row{grid-template-columns:6.5rem minmax(0,1fr) auto}
  .ledger--jump .glyph{width:40px;height:40px}
}
@media (max-width:479px){
  .ledger--jump .ledger__row{grid-template-columns:1fr}
  .ledger--jump .ledger__index{align-items:center}
  .ledger--jump .glyph{width:32px;height:32px}
  .ledger--jump .ledger__title{margin-top:0}
}

/* Numbered steps — the process timeline */
.steps{list-style:none;margin:0;padding:0;position:relative;counter-reset:none}
.step{position:relative;min-width:0}
.step__no{display:block;font:300 var(--fs-numeral)/var(--lh-numeral) var(--f-serif);font-optical-sizing:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.step h3{margin:0 0 var(--s-4);max-width:none}
.step p{margin:0;font-size:1rem;line-height:1.5}
.step__deliverable{margin-top:var(--s-4) !important;font-size:var(--fs-small) !important;line-height:var(--lh-small) !important;color:var(--graphite)}
.step__deliverable .eyebrow{display:flex;margin-bottom:var(--s-1)}
@media (min-width:1024px){
  .steps{display:grid;grid-template-columns:repeat(var(--steps,5),minmax(0,1fr));column-gap:var(--gutter)}
  .steps::before{content:"";position:absolute;left:0;right:0;top:calc(var(--fs-numeral) + var(--s-4));height:1px;background:var(--ink)}
  .step::before{content:"";position:absolute;left:0;top:calc(var(--fs-numeral) + var(--s-4) - 6px);width:1px;height:12px;background:var(--ink)}
  .step h3{margin-top:var(--s-7)}
}
@media (max-width:1023px){
  .steps{padding-left:40px;display:grid;row-gap:var(--s-7)}
  .steps::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:1px;background:var(--ink)}
  .steps::after{content:"";position:absolute;left:8px;bottom:0;width:9px;height:1px;background:var(--ink)}
  .step::before{content:"";position:absolute;left:-34px;top:calc(var(--fs-numeral) / 2);width:12px;height:1px;background:var(--ink)}
  .step__no{margin-bottom:var(--s-3)}
}
/* Wrapped timeline (eleven steps as rows of five at ≥1024): each step draws its
   own rule segment so the dimension line continues under every row */
@media (min-width:1024px){
  .steps--wrap{--steps:5;row-gap:var(--s-8)}
  .steps--wrap::before{display:none}
  .steps--wrap .step::after{content:"";position:absolute;left:0;right:calc(-1 * var(--gutter));top:calc(var(--fs-numeral) + var(--s-4));height:1px;background:var(--ink)}
  .steps--wrap .step:nth-child(5n)::after{right:0}
  .steps--wrap .step:last-child::after{right:0}
  /* A last step alone on a new row would otherwise draw a one-column stub that stops in
     mid-air; it runs the full grid width instead, so every row carries the same rule. */
  .steps--wrap .step:nth-child(5n+1):last-child::after{right:calc(-4 * (100% + var(--gutter)))}
}
/* 1024–1279: five columns run 149–215px, too narrow for a 24px serif heading */
@media (min-width:1024px) and (max-width:1279px){.step h3{font-size:var(--fs-lead)}}

/* Trust bridge — three text columns divided by hairlines */
.bridge{display:grid}
.bridge__col{padding:var(--s-6) 0;border-top:1px solid var(--rule);min-width:0}
.bridge__col:first-child{border-top:0;padding-top:0}
.bridge__no{display:inline-block;font:300 var(--fs-numeral-lg)/var(--lh-numeral) var(--f-serif);font-optical-sizing:auto;color:var(--graphite);font-variant-numeric:tabular-nums;margin-bottom:var(--s-4)}
.bridge__no::after{content:"";display:block;width:24px;border-top:2px solid var(--oxide);margin-top:var(--s-3)}
.bridge__col .eyebrow{display:flex;margin-bottom:var(--s-3)}
.bridge__col h3{margin:0 0 var(--s-4);max-width:none}
.bridge__col p{margin:0;font-size:var(--fs-body-sm);line-height:1.5}
/* 768–1023: two columns with the third full width — three columns here run 19–27 characters */
@media (min-width:768px) and (max-width:1023px){
  .bridge:not(.bridge--4){grid-template-columns:1fr 1fr;column-gap:var(--gutter)}
  .bridge:not(.bridge--4) .bridge__col:nth-child(3){grid-column:1 / -1;border-left:0;border-top:1px solid var(--rule);padding-top:var(--s-6)}
}
@media (min-width:1024px){
  .bridge{grid-template-columns:3fr 4fr 4fr}
  .bridge__col{border-top:0;padding:0 var(--s-6)}
  .bridge__col:first-child{padding-left:0}
  .bridge__col:last-child{padding-right:0}
  .bridge__col + .bridge__col{border-left:1px solid var(--rule)}
  .bridge--equal{grid-template-columns:repeat(3,minmax(0,1fr))} /* three equal columns (language bridge) */
}
/* Four commitments read as two rows of two, never as four slivers. Declared after the
   three-column rules above so it wins at every width from 768 up. */
@media (min-width:768px){
  .bridge--4{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
  .bridge--4 .bridge__col{border-top:0;padding:var(--s-6) var(--s-6) 0}
  .bridge--4 .bridge__col:nth-child(odd){padding-left:0;border-left:0}
  .bridge--4 .bridge__col:nth-child(even){padding-right:0;border-left:1px solid var(--rule)}
  .bridge--4 .bridge__col:nth-child(-n+2){padding-top:0}
  .bridge--4 .bridge__col:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ---------------------------------------------------------------------------
   11 FIGURES, PREVIEW LAYER, QUOTES, SAMPLE REPORT, SPEC LIST, FILTER ROW
   --------------------------------------------------------------------------- */
/* Numbered figures: "Fig. 01 —" typeset captions via CSS counters */
main{counter-reset:fig}
.fig{counter-increment:fig;margin:0;min-width:0}
.fig img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio,4/3);object-fit:cover;object-position:var(--pos,50% 50%);background:var(--plaster)}
.fig__box{display:block;overflow:hidden;background:var(--plaster)}
.fig a.fig__link,.fig a.marks{display:block;color:inherit;text-decoration:none}
.fig a img{transition:transform var(--d-image) var(--ease)}
.fig a:hover img,.fig a:focus-visible img{transform:scale(1.02)}
.fig a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.fig figcaption{
  border-top:1px solid var(--rule);margin-top:var(--s-3);padding-top:var(--s-3);
  font:400 var(--fs-small)/var(--lh-small) var(--f-sans);letter-spacing:var(--ls-small);color:var(--graphite);
}
.fig figcaption::before{content:"Fig. " counter(fig,decimal-leading-zero) " — ";font-weight:500;font-size:var(--fs-caption-label);letter-spacing:.02em;color:var(--ink)}
.fig__line{display:block}
.fig__line:first-of-type{display:inline}
.fig__k{font-weight:500;color:var(--ink)}
.band--slate .fig a:hover ~ figcaption .fig__k,.fig a:focus-visible ~ figcaption .fig__k{text-decoration:underline;text-decoration-color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:3px}
.fig--bordered img,.fig--bordered .fig__box{border:1px solid var(--rule)}
.band--slate .fig figcaption{border-color:var(--rule-dark);color:var(--plaster)}
.band--slate .fig figcaption::before,.band--slate .fig__k{color:var(--limewash)}
.band--slate .fig--bordered img,.band--slate .fig--bordered .fig__box{border-color:var(--rule-dark)}
/* ratios and object-position (classes, so no percent sign appears in the HTML) */
.ratio-4-5{--ratio:4/5}.ratio-3-2{--ratio:3/2}.ratio-4-3{--ratio:4/3}.ratio-16-10{--ratio:16/10}.ratio-1-1{--ratio:1/1}
.pos-50-40{--pos:50% 40%}.pos-50-50{--pos:50% 50%}.pos-50-60{--pos:50% 60%}.pos-50-70{--pos:50% 70%}.pos-30-50{--pos:30% 50%}.pos-70-50{--pos:70% 50%}
/* Portrait plates beside text: 4:3 while stacked, 4:5 once they sit beside a text column;
   a 4:5 page plate reads 3:2 while stacked below 1280 (the same switch the hero makes) */
@media (min-width:1024px){.plate--tall img{--ratio:4/5}}
@media (max-width:1279px){.page-plate .fig img.ratio-4-5{--ratio:3/2}}
/* Plaster typographic block — used where a photograph would have to be invented (about: the
   team plate; contact: the drawn site plan). Never a stock face, never a promissory caption. */
.plate-placeholder{position:relative;display:flex;align-items:flex-end;aspect-ratio:var(--ratio,4/5);background:var(--plaster);border:1px solid var(--rule);padding:var(--s-5)}
.plate-placeholder__line{margin:var(--s-3) 0 0;font:400 var(--fs-h3)/var(--lh-h3) var(--f-serif);color:var(--ink);max-width:24ch}

/* Services index preview — two stacked layers that cross-fade; not a figure */
.index-preview{display:none}
@media (min-width:1024px){
  .index-preview{
    display:block;position:sticky;top:calc(var(--header-h) + 32px);
    margin-top:var(--s-7);aspect-ratio:4/3;background:var(--plaster);overflow:hidden;
  }
  .index-preview__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 300ms var(--ease)}
  .index-preview__layer.is-active{opacity:1}
}

/* Pull quotes — Newsreader italic with an Oxide opening mark.
   RESERVED: no element uses .quote today. The placeholder testimonials were removed
   (see DESIGN.md §7.9); this component is kept so real, owner-approved quotes can be
   dropped straight back into index.php §07 and projects.php §03. */
.quote{position:relative;margin:0;max-width:var(--measure-quote)}
.quote::before{content:"\201C";display:block;font:400 4rem/1 var(--f-serif);font-optical-sizing:auto;color:var(--oxide);margin-bottom:var(--s-3)}
.quote p{margin:0;font:italic 400 var(--fs-quote)/var(--lh-quote) var(--f-serif);font-optical-sizing:auto;color:var(--ink);text-wrap:pretty}
.quote cite{
  display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);
  font:500 var(--fs-eyebrow)/var(--lh-eyebrow) var(--f-sans);font-style:normal;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--graphite);
}
.quote cite::before{content:"";flex:none;width:24px;border-top:1px solid var(--oxide)}
@media (min-width:768px){
  .quote::before{position:absolute;left:-40px;top:-8px;margin:0}
}

/* Sample weekly report document */
.doc{
  --surface:var(--chalk);
  position:relative;background:var(--chalk);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-0);padding:var(--s-5);
}
.band--slate .doc{border:0}
.doc__head{padding-bottom:var(--s-4);border-bottom:1px solid var(--rule)}
.doc__head .eyebrow{color:var(--graphite)}
.doc__head .eyebrow::before{border-color:var(--oxide)}
.doc .ledger{border-top:0}
.doc .ledger__row{padding:var(--s-4) 0;border-color:var(--rule)}
.doc .ledger__row:last-child{border-bottom:0;padding-bottom:0}
.doc .ledger__label{color:var(--graphite)}
.doc .ledger__value{color:var(--ink)}
.doc .dim-rule,.doc .dim-rule::before,.doc .dim-rule::after{background:var(--ink)}
.doc .dim-rule__label{color:var(--graphite)}
.doc .dim-rule__no{color:var(--ink)}
.doc .eyebrow{color:var(--graphite)}
.doc .eyebrow::before{border-color:var(--oxide)}
.doc .eyebrow__no{color:var(--ink)}
.doc p{color:var(--ink)}
.doc .fig figcaption{border-color:var(--rule);color:var(--graphite)}
.doc .fig figcaption::before{color:var(--ink)}
.doc__thumbs{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:var(--s-4)}

/* Unwired-form notice — the same Chalk document as the sample report, given the heavier Ink
   rule that marks a statement the reader is not meant to skip past. Sits above the form it
   describes, before the first field, never in a footer. */
.unwired-notice{border-color:var(--ink);margin:var(--s-6) 0 var(--s-7)}
.unwired-notice .doc__head{border-bottom-color:var(--ink)}
.unwired-notice .doc__head .eyebrow{color:var(--ink)}
.unwired-notice__lead{margin:var(--s-5) 0 var(--s-5);font:400 var(--fs-h3)/var(--lh-h3) var(--f-serif);color:var(--ink);max-width:var(--measure-lead)}
.unwired-notice .prose{max-width:var(--measure-prose)}
@media (min-width:768px){.unwired-notice{padding:var(--s-6)}}
.doc .state{margin-left:0}
/* The stamp is absolutely positioned over the document's top-right corner, so the head
   has to own that band in both directions: the reservation is proportional to the doc
   width, and min-height keeps the stamp from hanging into the first report row. */
.doc--has-stamp .doc__head{padding-right:min(240px,45%)}
@media (min-width:768px){.doc--has-stamp .doc__head{min-height:72px}}
@media (max-width:767px){.doc--has-stamp .doc__head{padding-right:0}}
.doc__success{color:var(--verdigris);font-size:var(--fs-lead);line-height:var(--lh-lead)}

/* Dot-leader specification list */
.spec{margin:0;display:grid;row-gap:var(--s-3)}
.spec > div{display:flex;align-items:baseline;gap:var(--s-3)}
.spec dt{display:flex;flex:1 1 auto;align-items:baseline;gap:var(--s-3);font-weight:500;color:var(--ink);min-width:0}
.spec dt::after{content:"";flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-5px);min-width:24px}
.spec dd{margin:0;flex:0 1 auto;max-width:55%;color:var(--graphite)}
.band--slate .spec dt{color:var(--limewash)}
.band--slate .spec dd{color:var(--plaster)}
.band--slate .spec dt::after{border-color:var(--rule-dark)}
@media (max-width:479px){
  .spec > div{flex-direction:column;gap:var(--s-1)}
  .spec dt::after{display:none}
  .spec dd{max-width:none}
}

/* Filter row (projects) — text links styled as eyebrows */
.filter{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin:0;padding:0;list-style:none}
.filter__btn{
  display:inline-flex;align-items:center;min-height:44px;padding:12px 0;
  font:500 var(--fs-eyebrow)/var(--lh-eyebrow) var(--f-sans);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--graphite);border-bottom:1px solid transparent;transition:color var(--d-ui) var(--ease),border-color var(--d-ui) var(--ease);
}
.filter__btn:hover{color:var(--ink)}
.filter__btn[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--oxide)}
.js [data-filter-item].is-filtered-out{display:none}
html:not(.js) .filter,html:not(.js) [data-filter-count]{display:none} /* without JS the row cannot act, so it is not shown; every item is visible */

/* ---------------------------------------------------------------------------
   12 FORMS — labels above, Chalk fields with a single Graphite baseline
   --------------------------------------------------------------------------- */
.form{display:grid;gap:var(--s-5);min-width:0}
.form__intro{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--graphite)}
.form__row{display:grid;gap:var(--s-5)}
@media (min-width:480px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:var(--s-2);min-width:0;align-content:start}
.field__label{display:inline-flex}
.req{color:var(--oxide);font-weight:500;margin-left:2px}
.input{
  display:block;width:100%;height:48px;
  background:var(--chalk);color:var(--ink);
  border:0;border-bottom:1px solid var(--graphite);border-radius:var(--r-0);
  padding:12px 0;
  font:400 1.0625rem/1.4118 var(--f-sans);letter-spacing:0;
  transition:border-color var(--d-ui) var(--ease);
}
.input::placeholder{color:var(--graphite);opacity:1}
.input:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-bottom:2px solid var(--verdigris);padding-bottom:11px}
.input--select{
  appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%234A4843' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;background-size:16px 16px;
}
.input--area{height:auto;min-height:calc(5 * 1.5em + 24px);resize:vertical}
.field__hint{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--graphite);margin:0}
.field__error{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--oxide);margin:0}
.field__error:empty{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.field.is-invalid .input{border-bottom-color:var(--oxide)}
.field.is-invalid .input:focus-visible{border-bottom-color:var(--verdigris)}
/* The two required controls that are not .input carry the same Oxide border as the text fields,
   so every invalid control is marked and not only the message beneath it. The :not(:checked)
   guard hands the box straight back to .check input:checked below the moment it is ticked. */
.segmented.is-invalid .segmented__options{border-color:var(--oxide)}
.segmented.is-invalid .segmented__option + .segmented__option{border-left-color:var(--oxide)}
.field.is-invalid .check input:not(:checked){border-color:var(--oxide)}

/* Checkbox: 20px square, Ink fill with a Limewash check drawn in CSS */
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s-3);align-items:start;font-size:1rem;line-height:1.5;color:var(--ink);cursor:pointer;padding:2px 0}
.check input{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:2px;
  border:1px solid var(--graphite);border-radius:var(--r-0);background:var(--chalk);
  display:grid;place-content:center;cursor:pointer;transition:background-color var(--d-ui) var(--ease);
}
.check input::after{content:"";width:5px;height:10px;border-right:2px solid var(--limewash);border-bottom:2px solid var(--limewash);transform:translateY(-1px) rotate(45deg);opacity:0}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{opacity:1}
/* Checkbox group: <fieldset class="field check-set"><legend class="eyebrow field__label">…</legend><div class="check-group">.check×N</div></fieldset> */
.check-set legend{display:inline-flex;margin-bottom:var(--s-2)}
.check-group{display:grid;gap:var(--s-2) var(--s-5)}
@media (min-width:480px){.check-group{grid-template-columns:1fr 1fr}}

/* Segmented control — fieldset with real radios */
.segmented{display:grid;gap:var(--s-2)}
.segmented legend{display:inline-flex;margin-bottom:var(--s-2)}
.segmented__options{display:inline-grid;grid-template-columns:1fr 1fr;height:44px;max-width:100%;border:1px solid var(--ink);border-radius:var(--r-0);justify-self:start;min-width:min(100%,320px)}
.segmented__option{position:relative;display:flex;align-items:center;justify-content:center;padding:0 var(--s-5);font:500 var(--fs-ui)/1 var(--f-sans);letter-spacing:var(--ls-ui);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color var(--d-ui) var(--ease),color var(--d-ui) var(--ease)}
.segmented__option + .segmented__option{border-left:1px solid var(--ink)}
.segmented__option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.segmented__option:has(input:checked){background:var(--ink);color:var(--limewash)}
.segmented__option:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px;z-index:1}
@media (max-width:479px){.segmented__options{width:100%;justify-self:stretch}}

/* Honeypot — off-canvas, never display:none so bots still see a field */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Status containers.
   .form__status is the form's own live region (role="status" aria-live="polite"), sitting
   directly under .form__intro in the markup of all four pages that carry a form. main.js
   writes three things into it: the validation summary, the "Sending…" announcement while a
   submission is in flight, and the "not sent" announcement. A 1px Rule hairline above it,
   small Schibsted Grotesk, Graphite; Oxide only for the pending state. No shadow, no radius.
   It is empty for most of a visit, and is clipped rather than display:none'd - a hidden live
   region leaves the accessibility tree and its next message is never announced. */
.form__status{border-top:1px solid var(--rule);padding-top:var(--s-3);margin:0;font:400 var(--fs-small)/var(--lh-small) var(--f-sans);letter-spacing:var(--ls-small);color:var(--graphite)}
.form__status--pending{color:var(--oxide)}
.form__status:empty{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.form__after{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--graphite);margin:0}
.form-success{--surface:var(--chalk)}
.form-success .dim-rule{margin-bottom:var(--s-5)}
.form-success p + p{margin-top:var(--s-3)}

/* Delivery notice — shown when the form did NOT send. It borrows the error register
   (Oxide hairline border, Oxide eyebrow and lead) and never the success one, and it is
   inserted ABOVE the form so the form and everything typed into it stay on the page. */
.form-notice{border-color:var(--oxide)}
.form-notice .doc__head{border-bottom-color:var(--oxide)}
.form-notice .doc__head .eyebrow{color:var(--oxide)}
.form-notice__lead{margin:var(--s-4) 0 0;font-size:1rem;line-height:1.5;color:var(--oxide)}
.form-notice .ledger{margin-top:var(--s-5)}
.form-notice .ledger__row:last-child{border-bottom:0;padding-bottom:0}
.form-notice__foot{margin:var(--s-4) 0 0}
.form-notice + .form{margin-top:var(--s-6)}

/* No JavaScript AND no endpoint wired yet. The delivery address lives in data-endpoint and never
   in an action attribute, so a form with nothing wired to it posts to its own URL and no path —
   no JS, failed JS, no CSS — can carry a visitor's name, email, phone or message off this site.
   This rule is the second belt: where JS is off the fields are withheld as well, and the
   <noscript> block inside the form (phone, email, hours) is shown in their place. It matches only
   the placeholder, so it stops applying by itself once a real form ID is in data-endpoint, and a
   no-JS visitor gets the form back — main.js copies the endpoint into action for the one path
   (no fetch) that needs the browser to post it. */
html:not(.js) form[data-endpoint$="REPLACE_ME"] > *:not(noscript){display:none}

/* Pre-submit disclosure above an unwired form. Its contact rows sit on the same rhythm as the
   delivery notice that appears after a submit attempt. */
.unwired-notice .ledger{margin-top:var(--s-5)}
.unwired-notice + .form{margin-top:var(--s-6)}
/* Without JS the notice has no job and could be wrong: main.js is what retires it once an
   endpoint is wired, and the rule above has already withheld the fields, leaving the <noscript>
   block with the same phone number, email address and hours in their place. */
html:not(.js) [data-unwired-notice]{display:none}

/* ---------------------------------------------------------------------------
   13 TABLES — no vertical rules, hairlines between rows
   --------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.table{width:100%;border-collapse:collapse;border-spacing:0;font-variant-numeric:tabular-nums}
.table caption{text-align:left;padding-bottom:var(--s-3);font:500 var(--fs-eyebrow)/var(--lh-eyebrow) var(--f-sans);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--graphite)}
.table th{text-align:left;vertical-align:bottom;padding:0 0 var(--s-3);border-bottom:1px solid var(--ink);font:500 var(--fs-eyebrow)/var(--lh-eyebrow) var(--f-sans);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--graphite)}
.table td{padding:16px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:1rem;line-height:1.5}
.table th:first-child,.table td:first-child{padding-right:var(--s-5)}
.table th + th,.table td + td{padding-left:var(--s-4)}
.table .num{text-align:right}
.table tbody tr:has(a):hover{background:var(--chalk)}
.table a{position:relative}
.band--slate .table th{border-color:var(--limewash);color:var(--plaster)}
.band--slate .table td{border-color:var(--rule-dark)}

/* ---------------------------------------------------------------------------
   14 ACCORDION — <details class="ledger__row acc">
   --------------------------------------------------------------------------- */
.acc{display:block;padding:0}
.acc summary{
  list-style:none;display:grid;grid-template-columns:5rem minmax(0,1fr) 16px;column-gap:var(--s-5);
  align-items:baseline;padding:var(--s-5) 0;cursor:pointer;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::marker{content:""}
.acc summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* an <h3> so the question appears in the heading outline; margin:0 keeps the summary grid on its baseline */
.acc__title{font:500 var(--fs-h3)/var(--lh-h3) var(--f-serif);font-optical-sizing:auto;color:var(--ink);margin:0;max-width:none}
.acc .icon--plus{align-self:center}
.acc[open]{background:var(--chalk)}
.acc[open] .icon--plus{transform:rotate(45deg)}
.acc__body{padding:0 0 var(--s-5) 5rem}
.acc__body > * + *{margin-top:1em}
.acc__body p{max-width:var(--measure-prose);font-size:1rem;line-height:1.5}
@media (max-width:767px){.acc summary{padding:20px 0}}
@media (max-width:479px){
  .acc summary{grid-template-columns:minmax(0,1fr) 16px}
  .acc .ledger__no{display:none}
  .acc__body{padding-left:0}
}
.band--slate .acc[open]{background:transparent}
.band--slate .acc__title{color:var(--limewash)}

/* ---------------------------------------------------------------------------
   15 PAGE SECTIONS & BANDS — hero, inner-page title block, tinted bands
   --------------------------------------------------------------------------- */
.band{--surface:var(--plaster);background:var(--surface)}
.band--plaster{--surface:var(--plaster)}
.band--slate{--surface:var(--slate);--focus:var(--limewash);background:var(--slate);color:var(--limewash)}

/* Hero (index): 5+7 bleed, words before picture on mobile */
.hero{padding-top:var(--s-7);padding-bottom:var(--section-y);min-height:640px}
.hero .text{align-self:start}
.hero__title{margin-top:var(--s-5);margin-bottom:0}
.hero__lead{margin:var(--s-5) 0 var(--s-6)}
.hero__ledger{margin-top:var(--s-6)}
.hero .fig img{--ratio:3/2;--pos:50% 60%}
/* Measured at 360×780 and 360×640: the headline sets in four 34px lines; trimming the hero's
   own top padding keeps the primary CTA in view on the shorter of the two visual viewports. */
@media (max-width:639px){.hero{padding-top:var(--s-6)}}
@media (min-width:1024px){
  .hero{padding-top:var(--s-8)}
  .hero .text{padding-top:var(--s-9)}
  .hero__ledger{margin-top:var(--s-7)}
}
@media (min-width:1280px){.hero .fig img{--ratio:4/5}}

/* Inner-page title block: eyebrow with page index → H1 → lead */
.page-head{padding-top:var(--s-8);padding-bottom:var(--s-8)}
.page-head h1{margin-top:var(--s-5);margin-bottom:0}
.page-head .lead{margin-top:var(--s-5)}
.page-plate{padding-bottom:var(--section-y)}
/* text column beside the page plate: eyebrow → ledger or prose → link / actions */
.page-plate .text > .eyebrow{display:flex;margin-bottom:var(--s-4)}
.page-plate .text p{max-width:var(--measure-prose)}
.page-plate .text > .link-arrow{margin-top:var(--s-5)}
.page-plate .text > .actions{margin-top:var(--s-6)}

/* Closing "Start a conversation" section on inner pages */
.closing .actions{margin-top:var(--s-6)}

/* ---------------------------------------------------------------------------
   16 MOTION & REVEAL — only under html.js; no-JS users see everything at once
   --------------------------------------------------------------------------- */
@keyframes ggh-rise{to{opacity:1;transform:none}}
@keyframes ggh-wipe{to{clip-path:inset(0)}}

/* Load: hero text rises in sequence; the plate wipes in from the left */
.js .hero .rise{opacity:0;transform:translateY(8px);animation:ggh-rise var(--d-text) var(--ease) forwards}
.js .hero .rise-1{animation-delay:80ms}
.js .hero .rise-2{animation-delay:140ms}
.js .hero .rise-3{animation-delay:200ms}
.js .hero .rise-4{animation-delay:260ms}
.js .hero .rise-5{animation-delay:320ms}
.js .hero .fig img{clip-path:inset(0 100% 0 0);animation:ggh-wipe var(--d-image) var(--ease) 120ms forwards}

/* Scroll: section[data-reveal] gains .is-in once */
.js [data-reveal] .dim-rule{clip-path:inset(-8px 100% -8px 0);transition:clip-path var(--d-rule) var(--ease)}
.js [data-reveal].is-in .dim-rule{clip-path:inset(-8px 0 -8px 0)}
.js [data-reveal] .dim-rule__label{opacity:0;transition:opacity var(--d-fast) var(--ease) 300ms}
.js [data-reveal].is-in .dim-rule__label{opacity:1}
.js [data-reveal] .fig{opacity:0;transform:translateY(12px);transition:opacity var(--d-text) var(--ease),transform var(--d-text) var(--ease)}
.js [data-reveal].is-in .fig{opacity:1;transform:none}
.js [data-reveal] .ledger__row{opacity:0;transition:opacity var(--d-text) var(--ease) var(--delay,0ms),background-color var(--d-ui) var(--ease)}
.js [data-reveal].is-in .ledger__row{opacity:1}
.js [data-reveal] .ledger__row:nth-child(2){--delay:40ms}
.js [data-reveal] .ledger__row:nth-child(3){--delay:80ms}
.js [data-reveal] .ledger__row:nth-child(4){--delay:120ms}
.js [data-reveal] .ledger__row:nth-child(5){--delay:160ms}
.js [data-reveal] .ledger__row:nth-child(6){--delay:200ms}
.js [data-reveal] .ledger__row:nth-child(7){--delay:240ms}
.js [data-reveal] .ledger__row:nth-child(8){--delay:280ms}
.js [data-reveal] .step::before{opacity:0;transition:opacity var(--d-fast) var(--ease) var(--delay,0ms)}
.js [data-reveal].is-in .step::before{opacity:1}
.js [data-reveal] .step:nth-child(2){--delay:60ms}
.js [data-reveal] .step:nth-child(3){--delay:120ms}
.js [data-reveal] .step:nth-child(4){--delay:180ms}
.js [data-reveal] .step:nth-child(5){--delay:240ms}
.js [data-reveal] .step:nth-child(6){--delay:300ms}
.js [data-reveal] .step:nth-child(7){--delay:360ms}

/* ---------------------------------------------------------------------------
   17 REDUCED MOTION — everything visible, nothing moves
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  .js [data-reveal] *,.js .hero *{opacity:1 !important;transform:none !important;clip-path:none !important}
  .js [data-reveal] .dim-rule{clip-path:none !important}
  .js .hero .rise{opacity:1 !important;transform:none !important;animation:none !important}
  .js .hero .fig img{clip-path:none !important;animation:none !important}
  .site-header{transition:none}
  .drawer{transition:none}
}

/* ---------------------------------------------------------------------------
   18 REFINEMENTS — small rules that depend on several components above
   --------------------------------------------------------------------------- */
/* Margin note stacked above the text below 1280: a tighter row gap */
@media (max-width:1279px){.cols:has(> .margin-note){row-gap:var(--s-5)}}

/* Services index: numeral + glyph share the first column via .ledger__index */
.ledger__index{min-width:0}

/* Language group in the footer: Limewash links, all three visible, no Oxide */
.site-footer .lang{color:var(--plaster)}
.site-footer .lang a{color:var(--plaster)}
.site-footer .lang a:hover{color:var(--limewash)}
.site-footer .lang .lang__current{color:var(--limewash);text-decoration-color:var(--limewash)}
.site-footer .lang span[aria-hidden]{color:var(--rule)}

/* Drawer language group: all three visible */
.drawer .lang .lang__current{display:inline-flex}

/* Contact ledger on the homepage: values may hold links */
.ledger__value a{color:var(--ink)}
.band--slate .ledger__value a{color:var(--limewash)}

/* ---------------------------------------------------------------------------
   19 REFERRAL FLOW — steps, recipient list, outcome, directory, disclosure

   The components driven by assets/js/referral.js, plus the two pieces of page
   furniture the repositioning added: the availability statement in the hero and
   the required disclosure line in the footer.

   Ink, Rule, Graphite, Chalk, Oxide-as-hairline and Plaster only. No new colour,
   no radius beyond 2px, no shadow, no gradient, nothing centred.

   Two rules run through the whole section:
     - a region that has nothing true to say is not on the page. Every block
       referral.js fills is display:none while it is empty, so the layout never
       shows an empty rule or an empty box waiting to be filled;
     - the live region is the exception: it is clipped, never display:none'd, so
       it stays in the accessibility tree and its next message is announced.
   --------------------------------------------------------------------------- */

/* Plain hairline list — the "what we do / do not do" ledgers, and the recipient
   list referral.js writes into [data-confirm]. Rows, not bullets. */
.plain{margin:0;border-top:1px solid var(--rule)}
.plain > li{padding:var(--s-4) 0;border-bottom:1px solid var(--rule);font-size:1rem;line-height:1.5;color:var(--ink);max-width:var(--measure-prose)}
.band--slate .plain,.band--slate .plain > li{border-color:var(--rule-dark)}
.band--slate .plain > li{color:var(--limewash)}

/* Stacked lines inside a single ledger value (partner directory rows) */
.block{display:block}
.block + .block{margin-top:var(--s-1)}

/* ---- The four-step flow ---------------------------------------------------
   Exactly one [data-step] is visible at a time; referral.js sets the hidden
   attribute on the others, which [hidden] in the reset already enforces. */
[data-referral-flow]{display:grid;gap:var(--s-5);min-width:0}
[data-step]{display:grid;gap:var(--s-5);min-width:0}
[data-step] > :is(h2,h3){margin:0}
/* referral.js moves focus to the step heading when a step opens: the ring shows. */
[data-step] :is(h2,h3):focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* Step counter — the eyebrow register, with the dimension line's hairline under it */
.flow__counter{
  display:flex;align-items:center;gap:var(--s-3);margin:0;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--rule);
  font:500 var(--fs-eyebrow)/var(--lh-eyebrow) var(--f-sans);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--graphite);font-variant-numeric:tabular-nums;
}
.flow__counter::before{content:"";flex:none;width:24px;height:0;border-top:1px solid var(--oxide)}

/* The flow's own live region (role="status" aria-live="polite"). Empty for most of
   a visit; clipped rather than hidden, for the reason given at the top. */
.flow__status{border-top:1px solid var(--rule);padding-top:var(--s-3);margin:0;font:400 var(--fs-small)/var(--lh-small) var(--f-sans);letter-spacing:var(--ls-small);color:var(--graphite)}
.flow__status:empty{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Back / continue row. On a phone the buttons stack and the forward action is on
   top, so the thumb is never sent backwards by default. */
.flow__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-2)}
@media (max-width:479px){
  .flow__actions{flex-direction:column-reverse;align-items:stretch}
  .flow__actions > .btn{width:100%}
}

/* ---- Recipient list -------------------------------------------------------
   referral.js builds .checks > label.check for every eligible match, with every
   box unticked. The rows are hairline-separated so the list reads as a choice
   to be made rather than as a set of results already accepted. */
.checks{display:grid;gap:0;margin-top:var(--s-5);border-top:1px solid var(--rule)}
.checks > .check{padding:var(--s-4) 0;border-bottom:1px solid var(--rule)}
.check__text{display:grid;gap:var(--s-1);min-width:0}
.check__text > strong{font-weight:500;color:var(--ink)}
.check__legal{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--graphite)}
.check__reg{
  font:500 var(--fs-eyebrow)/var(--lh-eyebrow) var(--f-sans);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--graphite);font-variant-numeric:tabular-nums;
}
.checks .check input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---- No-match, confirmation and outcome -----------------------------------
   Two Chalk documents and one plain block, all three invisible until they hold
   something. [data-confirm] carries no box of its own: it is a summary of what
   the visitor already typed, not a notice. */
[data-partner-list],[data-no-match],[data-confirm],[data-outcome]{min-width:0}
[data-partner-list]:empty,[data-no-match]:empty,[data-confirm]:empty,[data-outcome]:empty{display:none}
[data-no-match],[data-outcome]{
  margin-top:var(--s-5);padding:var(--s-5);
  background:var(--chalk);border:1px solid var(--rule);border-radius:var(--r-0);
}
[data-no-match] > .eyebrow,[data-outcome] > .eyebrow{display:flex;margin-bottom:var(--s-3)}
[data-no-match] > .lead,[data-outcome] > .lead{color:var(--ink);max-width:var(--measure-prose)}
[data-no-match] > .small,[data-outcome] > .small{margin-top:var(--s-4)}
[data-outcome] .ledger{margin-top:var(--s-5);border-top:0}
[data-outcome] .ledger__row:last-child{border-bottom:0;padding-bottom:0}
[data-partner-list] > .eyebrow{display:flex;margin-bottom:var(--s-3)}
[data-partner-list] > .lead{max-width:var(--measure-prose)}
[data-confirm] > .eyebrow{display:flex;margin:var(--s-6) 0 var(--s-3)}
[data-confirm] > .eyebrow:first-child{margin-top:0}
[data-confirm] .ledger{border-top:1px solid var(--rule)}
[data-confirm] > p:last-child{margin-top:var(--s-3);font-size:1rem;line-height:1.5;max-width:var(--measure-prose)}

/* ---- Partner directory (Find a professional) ------------------------------
   Filled from data/partners.json. While that list is empty — which is the case
   today, because no partner agreement exists — referral.js writes the pre-launch
   statement here instead, so the page is never an empty grid. */
[data-partner-directory]{min-width:0}
[data-partner-directory]:empty{display:none}
[data-partner-directory] > .eyebrow{display:flex;margin-bottom:var(--s-3)}
[data-partner-directory] > .lead{max-width:var(--measure-prose)}
[data-partner-directory] .ledger{margin-top:var(--s-5)}

/* ---- Availability statement in the hero -----------------------------------
   The Chalk document, set at reading size rather than caption size, because it
   is the one thing on the home page a visitor must not skim past. */
.hero__notice{margin-top:var(--s-6)}
.notice__lead{margin:var(--s-4) 0 0;font-size:1rem;line-height:1.5;color:var(--ink);max-width:var(--measure-prose)}
.notice__lead + .small{margin-top:var(--s-4)}

/* ---- Required disclosure line ---------------------------------------------
   Real page text in the footer of every page: hairline above, small Schibsted
   Grotesk, Graphite. On the footer's Slate ground Graphite is unreadable, so the
   same muted role is played by Plaster, exactly as .small does at line 191. */
.footer-disclosure{
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--rule);
  font:400 var(--fs-small)/var(--lh-small) var(--f-sans);letter-spacing:var(--ls-small);
  color:var(--graphite);max-width:var(--measure-prose);
}
.band--slate .footer-disclosure{border-top-color:var(--rule-dark);color:var(--plaster)}
.footer-disclosure + .footer-bottom{margin-top:var(--s-5)}

/* Print: plain document, everything visible */
@media print{
  .site-header,.drawer,.skip-link,.index-preview{display:none !important}
  .js [data-reveal] *,.js .hero *{opacity:1 !important;transform:none !important;clip-path:none !important}
  .band--slate{background:transparent;color:var(--ink);--surface:#fff}
  /* the descendant rules that colour content for the dark ground would otherwise print white on white */
  .band--slate h1,.band--slate h2,.band--slate h3,.band--slate h4,.band--slate a,
  .site-footer,.footer-list a,.footer-col address a,.footer-col p a,.footer-bottom a,.site-footer .lang a,
  .site-footer .link-arrow,.band--slate .ledger__value,.band--slate .acc__title{color:var(--ink) !important}
  .band--slate .lead,.band--slate .small,.band--slate .eyebrow,.band--slate .ledger__label,
  .band--slate .ledger__cadence,.band--slate .margin-note,.band--slate .fig figcaption,
  .band--slate .ledger__no,.band--slate .spec dd,.footer-bottom,
  .band--slate .footer-disclosure{color:var(--graphite) !important}
  .band--slate .dim-rule,.band--slate .dim-rule::before,.band--slate .dim-rule::after{background:var(--ink) !important}
  .band--slate .dim-rule__no,.site-footer .lang .lang__current,.band--slate .dim-rule__label,.site-footer .lang,.site-footer .lang span[aria-hidden]{color:var(--graphite) !important}
  .band--slate .eyebrow::before,.band--slate .margin-note::before{border-color:var(--oxide) !important}
  .band--slate .ledger,.band--slate .ledger__row,.band--slate .fig figcaption,
  .band--slate .fig--bordered img,.footer-bottom,.band--slate .footer-disclosure{border-color:var(--rule) !important}
  .band--slate .btn--primary{background:transparent;color:var(--ink);border-color:var(--ink)}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}