/* FONTS:BEGIN — generated by build/fonts-fetch.mjs; do not edit by hand */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('/assets/fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('/assets/fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/inter-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/inter-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/raleway-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/raleway-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/raleway-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/raleway-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/raleway-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/raleway-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/raleway-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/raleway-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
/* FONTS:END */

/* ═══════════════════════════════════════════════════════════════════════════
   terrahillsdevelopments.ca — site stylesheet
   ═══════════════════════════════════════════════════════════════════════════

   HOW THIS FILE IS ORGANISED

   §0  Design tokens — the ONLY place raw colours, fonts, shadows, gradients,
       easings and z-indexes are written. To restyle the site, edit §0.
   §1  Base / reset            §9   Article layouts (post, resource, project,
   §2  Layout primitives              expertise, spec table)
   §3  Typography              §10  Sidebars, meta boxes, contents, CTA box
   §4  Buttons                 §11  Forms (contact, combo, checkboxes)
   §5  Navigation              §12  FAQ, CTA band, company stats, contact
   §6  Heroes and banners      §13  Footer
   §7  Marquee                 §14  Overlays (lightbox, toast, back-to-top,
   §8  Cards                          reading bar, custom cursor)
                               §15  Motion (reveal, keyframes, reduced motion)
                               §16  Responsive
                               §17  Utilities (replace inline styles; last so
                                    they win)
       + the build appends a generated `min-width:0` guard for every grid
         container (see build.mjs), which is why no such rules appear here.

   RULES OF THE FILE — enforced by build/verify.mjs
   1. Outside §0 there are no hex/rgb colour literals and no font-family
      literals. Colours are var(--…) or rgba(var(--rgb-…), alpha).
   2. HTML carries no style="" attributes except background-image for content
      photos. Spacing and colour come from classes in this file (§17).
   3. One definition per selector. The SPA-era file had layered patch blocks
      redefining .reveal, the cursor, the nav underline and others; each is
      resolved here to the declarations that actually won the cascade.
   4. Section order is cascade order. Do not move a rule across sections
      without checking what it used to beat.

   Values are the originals from the SPA stylesheet (archive/styles.original.css),
   verified pixel-equivalent by computed-style fingerprint at 1280px and 390px.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   §0  DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* — Colour: paper & neutrals ————————————————————————————————————————— */
  --white:        #FAFAF7;   /* page ground ("paper") */
  --white-pure:   #FFFFFF;   /* text and UI on dark imagery */
  --text:         #1A1814;   /* default ink */
  --body:         #4C4840;   /* running copy */
  --body-2:       #565250;   /* resource article copy */
  --body-3:       #5C5850;
  --muted:        #6F6A64;   /* secondary labels, placeholders — 5.4:1 on white, 4.7:1 on the form panel */
  --deep:         #0E0C09;   /* headings, near-black */
  --sage:         #67736B;   /* combo group headers — 4.9:1 on white */

  /* — Colour: slate surfaces (meta boxes, sidebars, tinted sections) ————
     Lightened so running copy (--body) clears 4.5:1 on every slate gradient
     stop; the old #9CABAE/#96A8AB put body text at 3.7:1. */
  --off:          #B9C5C7;
  --cream:        #5E6E71;   /* large display numerals — 5.1:1 on paper */
  --rule:         #C2CBCD;   /* hairlines, card borders */
  --slate-2:      #B0C3C7;
  --slate-3:      #B4C1C3;
  --slate-4:      #AEBBBD;
  --slate-5:      #B2C5C9;

  /* — Colour: brand green ————————————————————————————————————————————— */
  --green:        #1D3D28;   /* primary brand green */
  --green2:       #142B1C;
  --green-deep:   #0D2A18;   /* headings on mint surfaces */
  --green-mid:    #1D5C35;   /* italic accents on mint surfaces */
  --green-soft:   #243B2E;   /* copy on mint surfaces */
  --green-dim:    #2C4A38;   /* footer links, form notes */
  --green-lt:     #9DBFAC;
  --green-bg:     #EBF0EC;

  /* — Colour: mint surfaces (the "dark" sections are mint, not dark) ———— */
  --dark:         #AEEFC5;   /* legacy name, kept: section-dark, cta-band */
  --dark2:        #A0E3BA;   /* footer */
  --dark3:        #B8F5D2;
  --mint:         var(--dark);
  --mint-2:       var(--dark2);
  --mint-3:       var(--dark3);

  /* — Colour: gold ———————————————————————————————————————————————————— */
  --gold:         #806438;   /* primary action colour — 5.3:1 on paper, 5.5:1 as a button ground for white text */
  --gold2:        #66502C;   /* action hover */
  --gold-bg:      #F6F1E8;
  --gold-lt:      #C8B490;
  --gold-hero:    #FFD97D;   /* hero eyebrow and italic */
  --brown:        #7A5E2E;   /* hero primary button */
  --brown-2:      #6A4E20;

  /* — Colour: status ——————————————————————————————————————————————————— */
  --red:          #8B1F1F;
  --amber:        #7A5C1E;

  /* — Colour channels for rgba(var(--rgb-x), alpha) —————————————————— */
  --rgb-white:    255,255,255;
  --rgb-black:    0,0,0;
  --rgb-ink:      9,12,8;      /* banner / post-hero scrims */
  --rgb-ink-2:    10,18,10;    /* project-card scrims */
  --rgb-ink-3:    10,9,7;      /* home hero scrim */
  --rgb-forest:   15,80,35;    /* hairlines on mint */
  --rgb-forest-2: 15,60,30;
  --rgb-forest-3: 15,50,28;
  --rgb-slate:    110,130,135; /* hairlines on slate */
  --rgb-slate-1:  156,171,174; /* hover tints */
  --rgb-gold:     196,154,82;
  --rgb-green:    29,61,40;
  --rgb-mint:     174,239,197;
  --rgb-cursor:   44,95,62;
  --rgb-rule:     194,203,205;

  /* — Composite surfaces ————————————————————————————————————————————— */
  --grad-slate:         linear-gradient(105deg, var(--off) 0%, var(--slate-2) 100%);
  --grad-slate-wide:    linear-gradient(105deg, var(--off) 0%, var(--slate-2) 50%, var(--slate-3) 100%);
  --grad-slate-section: linear-gradient(105deg, var(--off) 0%, var(--slate-2) 40%, var(--slate-3) 100%);
  --grad-slate-form:    linear-gradient(105deg, var(--off) 0%, var(--slate-2) 60%, var(--slate-3) 100%);
  --grad-stat:          linear-gradient(105deg, var(--off) 0%, var(--slate-5) 100%);
  --overlay-banner:     linear-gradient(to top, rgba(var(--rgb-ink),.93) 0%, rgba(var(--rgb-ink),.55) 55%, rgba(var(--rgb-ink),.18) 100%);
  --overlay-hero:       linear-gradient(180deg, rgba(var(--rgb-ink-3),.08) 0%, rgba(var(--rgb-ink-3),.18) 40%, rgba(var(--rgb-ink-3),.55) 75%, rgba(var(--rgb-ink-3),.75) 100%);
  --overlay-pcard:      linear-gradient(to top, rgba(var(--rgb-ink-2),.9) 0%, transparent 100%);
  --overlay-pdet:       linear-gradient(180deg, rgba(var(--rgb-ink-2),.55) 0%, rgba(var(--rgb-ink-2),.1) 35%, rgba(var(--rgb-ink-2),.2) 60%, rgba(var(--rgb-ink-2),.85) 100%);
  --overlay-post:       linear-gradient(180deg, rgba(var(--rgb-ink),.55) 0%, rgba(var(--rgb-ink),.1) 35%, rgba(var(--rgb-ink),.3) 60%, rgba(var(--rgb-ink),.9) 100%);
  --border:             1px solid var(--rule);
  --border-slate:       1px solid rgba(var(--rgb-slate),.25);
  --border-forest:      1px solid rgba(var(--rgb-forest),.15);
  --border-forest-2:    1px solid rgba(var(--rgb-forest),.2);
  --border-mint-line:   1px solid rgba(var(--rgb-forest-2),.35);

  /* — Type: families ————————————————————————————————————————————————— */
  --font-sans:    'Inter', sans-serif;               /* body copy, forms */
  --font-ui:      'Raleway', sans-serif;             /* labels, buttons, nav */
  --font-display: 'Cormorant Garamond', serif;       /* headlines, numerals */

  /* — Type: scale ———————————————————————————————————————————————————— */
  --xs:   .72rem;  --sm: .875rem;  --base: .98rem;  --lg: 1.12rem;  --xl: 1.3rem;
  --2xl:  1.8rem;  --3xl: 2.6rem;
  --4xl:  clamp(2.8rem, 5vw, 4.6rem);
  --hero: clamp(3.4rem, 6.5vw, 7rem);
  --fs-label:      .7rem;    /* UI labels, card meta */
  --fs-label-sm:   .68rem;   /* eyebrows, tag pills, footer */
  --fs-label-xs:   .62rem;
  --fs-btn:        .76rem;
  --fs-ui:         .78rem;
  --fs-caption:    .85rem;
  --fs-lead:       1.15rem;
  --fs-card:       1.55rem;  /* card titles */
  --fs-box:        1.9rem;   /* form / CTA box titles */
  --fs-stat:       3.2rem;
  --fs-stat-lg:    3.5rem;
  --fs-numeral:    5rem;     /* expertise section numerals */
  --fs-hl-med:     clamp(2rem, 3.5vw, 3.2rem);
  --fs-hl-sm:      clamp(2rem, 3.5vw, 3rem);
  --fs-hl-xs:      clamp(1.75rem, 3vw, 2.5rem);   /* sub-section headings */
  --fs-title-pdet: clamp(2.4rem, 5.5vw, 5rem);
  --fs-title-post: clamp(2.4rem, 5vw, 4.5rem);

  /* — Type: weight, tracking, leading ——————————————————————————————— */
  --fw-light: 300;  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;
  --ls-10: .1em;  --ls-12: .12em;  --ls-14: .14em;  --ls-16: .16em;  --ls-18: .18em;
  --ls-20: .2em;  --ls-22: .22em;  --ls-28: .28em;  --ls-tight: -.01em;  --ls-hero: -.02em;
  --lh-display: 1.05;  --lh-heading: 1.1;  --lh-snug: 1.52;  --lh-body: 1.76;
  --lh-list: 1.82;     --lh-loose: 1.9;    --lh-prose: 1.92;

  /* — Layout ————————————————————————————————————————————————————————— */
  --container:   1340px;
  --gutter:      2.5rem;   --gutter-sm: 1.5rem;
  --section:     7rem;     --section-sm: 5rem;   --section-md: 5.5rem;   --section-lg: 9rem;
  --grid-gap:    1.5rem;   --col-gap: 5rem;      --col-gap-wide: 7rem;
  --nav-h:       80px;     --nav-h-scrolled: 66px;
  --sticky-top:  90px;

  /* — Shape ——————————————————————————————————————————————————————————— */
  --radius:    10px;   --radius-sm: 4px;   --radius-md: 8px;   --radius-lg: 12px;

  /* — Elevation —————————————————————————————————————————————————————— */
  --shadow-nav:   0 1px 24px rgba(var(--rgb-black),.07);
  --shadow-soft:  0 8px 32px rgba(var(--rgb-black),.06);
  --shadow-card:  0 8px 36px rgba(var(--rgb-black),.08);
  --shadow-lift:  0 16px 48px rgba(var(--rgb-black),.14);
  --shadow-pop:   0 10px 34px rgba(var(--rgb-black),.14);
  --shadow-modal: 0 28px 72px rgba(var(--rgb-black),.18);
  --shadow-btn:   0 8px 28px rgba(var(--rgb-gold),.28);

  /* — Motion ————————————————————————————————————————————————————————— */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);
  --t-fast: .2s;   --t-base: .28s;   --t-slow: .65s;   --t-reveal: .75s;
  --lift: translateY(-3px);

  /* — Layers ————————————————————————————————————————————————————————— */
  --z-mobnav: 899;  --z-nav: 900;  --z-progress: 2000;  --z-lightbox: 3000;
  --z-toast: 4000;  --z-cursor: 99999;

  /* Breakpoints (for reference — CSS cannot read tokens inside @media):
     1100px desktop→two-column · 768px tablet→single column · 640px · 620px
     (spec table) · 480px (form rows) */
}


/* ───────────────────────────────────────────────────────────────────────────
   §1  BASE / RESET
   ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden }
body {
  background: var(--white); color: var(--text);
  font-family: var(--font-sans); font-weight: var(--fw-regular); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; word-break: break-word;
}
::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: var(--off) }
::-webkit-scrollbar-thumb { background: var(--gold) }

/* The SPA navigated with onclick handlers on <div>/<button>, so it never
   styled `a`. Everything is a real anchor now; keep them looking as before. */
a { color: inherit; text-decoration: none }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px }
/* Skip link: first tab stop on every page, visible only while focused. */
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: var(--z-toast); background: var(--green); color: var(--white-pure);
  padding: .8rem 1.25rem; font-family: var(--font-ui); font-size: var(--fs-ui); letter-spacing: var(--ls-10); text-transform: uppercase;
  font-weight: var(--fw-semibold); border-radius: var(--radius-sm); transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; outline-offset: 2px }
/* Screen-reader-only text (visible to assistive technology, not on screen). */
.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 }
/* Cards that were clickable <div>s need their block box back — only those
   whose class does not already set display (a.sector is flex, so not here). */
a.pcard, a.bcard, a.hm-card { display: block }
/* Links inside running prose still read as links, in the brand green. */
.exp-body a:not(.btn), .pdet-text p a:not(.btn), .post-article p a:not(.btn), .post-article li a:not(.btn), .res-article p a:not(.btn), .res-article li a:not(.btn) {
  color: var(--green); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; transition: color var(--t-fast) ease;
}
.exp-body a:not(.btn):hover, .pdet-text p a:not(.btn):hover, .post-article p a:not(.btn):hover, .post-article li a:not(.btn):hover,
.res-article p a:not(.btn):hover, .res-article li a:not(.btn):hover { color: var(--gold) }
/* An image is never wider than the card holding it. */
.sector-img, .bcard-img, .hm-card-img, .pcard img, .gallery-img, .rel-img, .post-hero-img, .pdet-hero-img { max-width: 100% }


/* ───────────────────────────────────────────────────────────────────────────
   §2  LAYOUT PRIMITIVES
   ─────────────────────────────────────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) }
.section { padding: var(--section) 0 }
.section-sm { padding: var(--section-sm) 0 }
.section-md { padding: var(--section-md) 0 }
.section-white { background: var(--white) }
.section-dark { background: var(--dark) }
.section-off { background: var(--grad-slate-section) }
.ruled { border-top: var(--border) }

.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap-wide); align-items: center }
.sectors-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4.5rem }
.svcs-header { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: end; margin-bottom: 5rem }
.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap-wide); align-items: start; min-width: 0 }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap-wide); align-items: start }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--container); margin: 0 auto }
.faq-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 6rem; align-items: start }
.post-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 5.5rem; align-items: start }
.pdet-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--col-gap); align-items: start }

.filter-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3.5rem; flex-wrap: wrap; gap: var(--grid-gap) }
.filter-row-sm { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--grid-gap) }
.blog-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; flex-wrap: wrap; gap: var(--grid-gap) }
.blog-filter-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem }
.blog-cats { display: flex; gap: .4rem; flex-wrap: wrap }
.proj-filter { display: flex; gap: .5rem; flex-wrap: wrap }
.res-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 3rem }


/* ───────────────────────────────────────────────────────────────────────────
   §3  TYPOGRAPHY
   ─────────────────────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-28);
  text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--gold);
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold) }
/* on banner imagery: the same gold as the home hero eyebrow (the SPA's value here
   was a dark green, unreadable on the scrim; on mint sections .section-dark .eyebrow
   below still wins and keeps those green) */
.eyebrow.light { color: var(--gold-hero) }
.eyebrow.light::before { background: var(--gold-hero); opacity: .8 }
.eyebrow.green { color: var(--green) }
.eyebrow.green::before { background: var(--green) }
/* eyebrows on mint and slate surfaces read in green (gold is 3.1:1 on slate) */
.section-dark .eyebrow, .cta-band .eyebrow, .marquee-wrap .eyebrow, .gallery-section .eyebrow, .related-section .eyebrow, .section-off .eyebrow, .surface-slate .eyebrow { color: var(--green) }
.section-dark .eyebrow::before, .cta-band .eyebrow::before, .gallery-section .eyebrow::before, .related-section .eyebrow::before, .section-off .eyebrow::before, .surface-slate .eyebrow::before { background: var(--green) }

h2.hl {
  font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--4xl);
  line-height: var(--lh-display); color: var(--deep); letter-spacing: var(--ls-tight);
}
h2.hl em { font-style: italic; font-weight: var(--fw-light); color: var(--green); letter-spacing: 0 }
h2.hl.white, .gallery-section h2.hl, .related-section h2.hl { color: var(--green-deep) }
h2.hl.white em { color: var(--green-mid) }
/* .sh is a display sub-heading at whatever level the outline needs (h2 on the
   contact page, where it follows the banner h1 directly) */
.sh {
  font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--3xl);
  line-height: var(--lh-heading); color: var(--deep); letter-spacing: var(--ls-tight);
}
.sh em { font-style: italic; font-weight: var(--fw-light); color: var(--green) }
.lead { font-size: var(--fs-lead); color: var(--body); line-height: var(--lh-loose); font-weight: var(--fw-light); max-width: 58ch }
.body-t { font-size: var(--base); color: var(--body); line-height: var(--lh-prose); font-weight: var(--fw-regular) }
.tag-pill {
  font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-12); text-transform: uppercase;
  color: var(--gold2); padding: .3rem .8rem; border: 1px solid var(--gold-lt); background: var(--gold-bg);
}
.back-link {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-size: var(--xs);
  letter-spacing: var(--ls-14); text-transform: uppercase; color: var(--muted); cursor: pointer;
  padding: 1.25rem 0; border: none; background: none; transition: color var(--t-fast);
}
.back-link:hover { color: var(--gold) }
.back-link::before { content: '←' }


/* ───────────────────────────────────────────────────────────────────────────
   §4  BUTTONS
   ─────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-size: var(--fs-btn);
  letter-spacing: var(--ls-18); text-transform: uppercase; font-weight: var(--fw-semibold); cursor: pointer;
  text-decoration: none; transition: all .25s ease; border: none; border-radius: var(--radius-sm);
}
.btn-dark { background: var(--gold); color: var(--white-pure); padding: .9rem 2.4rem }
.btn-dark:hover { background: var(--gold2); transform: translateY(-1px); box-shadow: var(--shadow-btn) }
.btn-out { background: transparent; color: var(--deep); padding: .88rem 2.2rem; border: 1.5px solid var(--deep) }
.btn-out:hover { background: var(--deep); color: var(--white-pure) }
.btn-ghost {
  background: transparent; color: var(--gold); padding: 0; border: none; font-family: var(--font-ui);
  font-size: .74rem; letter-spacing: var(--ls-18); text-transform: uppercase; font-weight: var(--fw-semibold);
}
.btn-ghost::after { content: ' →' }
.btn-ghost:hover { color: var(--gold2) }
.btn-danger { background: var(--red); color: var(--white-pure); padding: .6rem 1.2rem; font-size: var(--xs) }
.btn-sm { padding: .5rem 1.1rem; font-size: var(--xs) }
/* sheen that slides across filled/outlined buttons on hover */
.btn-dark, .btn-out { position: relative; overflow: hidden }
.btn-dark::before, .btn-out::before {
  content: ''; position: absolute; inset: 0; background: rgba(var(--rgb-white),.08);
  transform: translateX(-100%); transition: transform .35s ease;
}
.btn-dark:hover::before, .btn-out:hover::before { transform: translateX(0) }
/* hero buttons (on imagery) */
.btn-hw {
  background: var(--brown); color: var(--white-pure); padding: .95rem 2.4rem; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--fs-btn); letter-spacing: var(--ls-18); text-transform: uppercase;
  font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: .5rem; transition: all .25s;
  cursor: pointer; border: none;
}
.btn-hw:hover { background: var(--brown-2) }
.btn-ho {
  background: transparent; color: rgba(var(--rgb-white),.75); padding: .93rem 2.4rem; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--fs-btn); letter-spacing: var(--ls-18); text-transform: uppercase;
  font-weight: var(--fw-semibold); border: 1.5px solid rgba(var(--rgb-white),.25); display: inline-flex;
  align-items: center; gap: .5rem; transition: all .25s; cursor: pointer;
}
.btn-ho:hover { border-color: rgba(var(--rgb-white),.65); color: var(--white-pure) }
/* filter chips */
.pf-btn {
  font-family: var(--font-ui); font-size: var(--xs); letter-spacing: var(--ls-12); text-transform: uppercase;
  font-weight: var(--fw-medium); padding: .38rem 1rem; border: var(--border); background: var(--white);
  color: var(--muted); cursor: pointer; transition: all var(--t-fast);
}
.pf-btn.active, .pf-btn:hover { background: var(--gold); color: var(--white-pure); border-color: var(--gold) }


/* ───────────────────────────────────────────────────────────────────────────
   §5  NAVIGATION
   ─────────────────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); background: transparent;
  border-bottom: 1px solid transparent; height: var(--nav-h);
  transition: height .3s, box-shadow .3s, background .35s, border-color .35s;
}
nav.scrolled {
  height: var(--nav-h-scrolled); background: rgba(var(--rgb-white),.97); backdrop-filter: blur(12px);
  border-bottom: var(--border); box-shadow: var(--shadow-nav);
}
.nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter-sm); height: 100%; display: flex; align-items: center; justify-content: space-between }
.nav-logo { display: flex; align-items: center; gap: .65rem; cursor: pointer; text-decoration: none }
.nav-logo-img { height: 42px; width: auto; display: block; transition: filter .35s ease }
#nav-logo-img { filter: brightness(0) invert(1) }
nav.scrolled #nav-logo-img { filter: none }
.nav-links { display: flex; align-items: center; gap: 0 }
.nav-links a {
  font-family: var(--font-ui); font-size: var(--xs); letter-spacing: var(--ls-18); text-transform: uppercase;
  font-weight: var(--fw-medium); color: rgba(var(--rgb-white),.92); padding: .45rem .8rem; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  text-decoration: none; transition: color var(--t-fast); position: relative; overflow: hidden;
  text-shadow: 0 1px 3px rgba(var(--rgb-black),.45);   /* keeps the bar legible over light patches of the hero photo */
}
.nav-links a:hover, .nav-links a.active { color: var(--white-pure) }
nav.scrolled .nav-links a { color: var(--muted); text-shadow: none }
nav.scrolled .nav-links a:hover, nav.scrolled .nav-links a.active { color: var(--deep) }
.nav-links a::after {
  content: ''; display: block; position: absolute; bottom: 0; left: .8rem; right: .8rem; height: 1.5px;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1) }
/* the "Get a Quote" pill keeps its colours in every nav state */
.nav-links a.nav-cta { background: var(--gold); color: var(--white-pure); margin-left: .5rem; padding: .45rem 1.4rem; letter-spacing: .15em; text-shadow: none }
.nav-links a.nav-cta:hover { background: var(--gold2) }
nav.scrolled .nav-links a.nav-cta, nav.scrolled .nav-links a.nav-cta:hover { color: var(--white-pure) }
.nav-links a.nav-cta::after { display: none }
/* — Sectors menu: plain HTML, opens on hover and keyboard focus — */
.nav-item { position: relative; display: flex; align-items: center }
.nav-item.has-menu .nav-parent .caret { display: inline-block; font-size: .7em; margin-left: .35rem; transition: transform var(--t-fast) }
.nav-item.has-menu:hover .caret, .nav-item.has-menu:focus-within .caret { transform: translateY(1px) }
.nav-menu { position: absolute; top: 100%; left: 0; padding-top: .6rem; display: none; z-index: var(--z-nav) }
.nav-item.has-menu:hover .nav-menu, .nav-item.has-menu:focus-within .nav-menu { display: block }
.nav-menu-panel { min-width: 300px; background: var(--white); border: var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: .5rem 0; display: flex; flex-direction: column }
.nav-links .nav-menu-panel a, nav.scrolled .nav-links .nav-menu-panel a {
  color: var(--deep); padding: .6rem 1.1rem; overflow: visible; text-transform: none;
  font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--sm); letter-spacing: 0;
}
.nav-links .nav-menu-panel a::after { display: none }
.nav-links .nav-menu-panel a:hover, .nav-links .nav-menu-panel a.active,
nav.scrolled .nav-links .nav-menu-panel a:hover, nav.scrolled .nav-links .nav-menu-panel a.active { background: var(--green-bg); color: var(--green) }
/* a real <button>, so the menu opens from the keyboard */
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 10px; background: none; border: 0; min-width: 44px; min-height: 44px; justify-content: center; align-items: center }
.hamburger span { width: 22px; height: 1.5px; background: var(--white-pure); display: block; transition: background .35s }
nav.scrolled .hamburger span { background: var(--deep) }
/* Get a Quote stays in the bar on small screens, like the desktop pill */
.nav-cta-mobile {
  display: none; margin-left: auto; margin-right: .5rem; font-family: var(--font-ui); font-size: var(--xs); letter-spacing: .12em;
  text-transform: uppercase; font-weight: var(--fw-semibold); background: var(--gold); color: var(--white-pure); padding: .55rem .95rem;
  border-radius: var(--radius-sm); white-space: nowrap; text-decoration: none;
}
.nav-cta-mobile:hover { background: var(--gold2) }
/* Mobile menu: fills the viewport below the bar and scrolls, so every item
   is reachable on a short screen; generated by build.mjs from the same list
   as the desktop bar */
.mob-nav {
  display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--white); border-top: var(--border);
  padding: .5rem var(--gutter-sm) 2.5rem; z-index: var(--z-mobnav); flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
nav.scrolled ~ .mob-nav { top: var(--nav-h-scrolled) }
.mob-nav.open { display: flex }
body.menu-open { overflow: hidden }
.mob-nav a {
  font-family: var(--font-ui); font-size: .9rem; letter-spacing: var(--ls-14); text-transform: uppercase;
  font-weight: var(--fw-medium); color: var(--text); cursor: pointer; padding: .9rem 0; border-bottom: var(--border); text-decoration: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mob-nav a.active { color: var(--green); font-weight: var(--fw-semibold) }
.mob-nav a.active::after { content: '●'; font-size: .5rem; color: var(--gold) }
/* the Sectors group mirrors the desktop menu panel: sans, sentence case */
.mob-group { display: flex; flex-direction: column; border-bottom: var(--border) }
/* the group collapses (eight hubs plus the overview is a long list on a phone);
   it opens by itself on sector pages, where the current page is inside it */
.mob-heading {
  display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-ui); font-size: .9rem; letter-spacing: var(--ls-14); text-transform: uppercase; color: var(--text); font-weight: var(--fw-medium); padding: .9rem 0;
}
/* larger than the desktop caret: on a phone it is the only hint the row expands */
.mob-heading .caret { font-size: 1.5rem; line-height: 1; color: inherit; opacity: .8; transition: transform var(--t-fast) }
.mob-group.open .mob-heading .caret { transform: rotate(180deg) }
.mob-group.open .mob-heading { color: var(--green) }
.mob-group-list { display: none; flex-direction: column; padding: 0 0 .5rem 1rem; border-top: var(--border) }
.mob-group.open .mob-group-list { display: flex }
.mob-group-list a:last-child { border-bottom: none }
.mob-group a { font-family: var(--font-sans); font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: var(--fw-regular); padding: .7rem 0 }
.mob-group a.mob-all { color: var(--green); font-weight: var(--fw-semibold) }
.mob-nav a.nav-cta { margin-top: 1.25rem; background: var(--gold); color: var(--white-pure); justify-content: center; padding: 1rem; border: 0; border-radius: var(--radius-sm); letter-spacing: .15em }
.mob-nav a.nav-cta.active::after { display: none }


/* ───────────────────────────────────────────────────────────────────────────
   §6  HEROES AND BANNERS
   ─────────────────────────────────────────────────────────────────────────── */
.page-banner { padding-top: 70px; min-height: 52vh; position: relative; display: flex; align-items: flex-end; overflow: hidden }
.pb-bg { position: absolute; inset: 0; background-size: cover; background-position: center }
.pb-bg::after { content: ''; position: absolute; inset: 0; background: var(--overlay-banner) }
.pb-content { position: relative; z-index: 2; max-width: var(--container); width: 100%; margin: 0 auto; padding: 4rem var(--gutter) }
.pb-content h1, .pb-content h2 {
  font-family: var(--font-display); font-size: var(--4xl); font-weight: var(--fw-regular); color: var(--white-pure);
  line-height: var(--lh-display); margin: .75rem 0 1rem;
}
.pb-content h1 em, .pb-content h2 em { font-style: italic; font-weight: var(--fw-light); color: rgba(var(--rgb-gold),.88); letter-spacing: 0 }
.pb-desc { font-size: var(--base); color: rgba(var(--rgb-white),.55); max-width: 52ch; line-height: 1.86 }

.hero { position: relative; min-height: 115vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding-top: 100px }
.hero-bg { position: absolute; inset: 0; background: url('https://assets.terrahillsdevelopments.ca/terrahills%20pics/6820dc_5b9be3726ad045e6bf87553ec483717d.webp') center/cover no-repeat }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: var(--overlay-hero) }
.hero-content { position: relative; z-index: 2; max-width: var(--container); width: 100%; margin: 0 auto; padding: 0 var(--gutter) 7rem }
.hero-ey {
  font-family: var(--font-ui); font-size: var(--xs); letter-spacing: var(--ls-22); text-transform: uppercase; color: var(--gold-hero);
  margin-bottom: 1.5rem; display: flex; align-items: center; gap: .8rem; animation: fu .8s .1s ease both;
  text-shadow: 0 1px 8px rgba(var(--rgb-black),.7), 0 0 20px rgba(var(--rgb-black),.5);
}
.hero-ey::before { content: ''; width: 28px; height: 1px; background: var(--gold-hero); opacity: .8 }
.hero h1 {
  font-family: var(--font-display); font-size: var(--hero); font-weight: var(--fw-light); line-height: 1.02; color: var(--white-pure);
  letter-spacing: var(--ls-hero); margin-bottom: 2.25rem; max-width: 920px; animation: fu .9s .2s ease both;
}
.hero h1 em { font-style: italic; font-weight: var(--fw-light); color: var(--gold-hero); letter-spacing: 0; text-shadow: 0 2px 16px rgba(var(--rgb-black),.65), 0 0 32px rgba(var(--rgb-black),.4) }
.hero-bot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2rem; animation: fu .8s .4s ease both }
.hero-desc { font-size: var(--base); color: rgba(var(--rgb-white),.82); max-width: 46ch; line-height: var(--lh-loose); font-weight: var(--fw-regular) }
.hero-acts { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center }
.hero-stats { display: flex; animation: fu .8s .55s ease both; margin-top: 4rem; border-top: 1px solid rgba(var(--rgb-white),.08); padding-top: 2rem; flex-wrap: wrap; gap: 3rem }
.hstat-n { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: var(--fw-regular); line-height: 1; color: var(--white-pure) }
.hstat-l { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--ls-18); text-transform: uppercase; color: rgba(var(--rgb-white),.65); margin-top: .3rem }
.hstat + .hstat { padding-left: 3rem; border-left: 1px solid rgba(var(--rgb-white),.08) }
.hero .reveal, .hero-stats .hstat { opacity: 1; transform: none; transition: none }


/* ───────────────────────────────────────────────────────────────────────────
   §7  MARQUEE
   ─────────────────────────────────────────────────────────────────────────── */
.marquee-wrap { position: relative; background: var(--dark); border-top: var(--border-forest); border-bottom: 1px solid rgba(var(--rgb-forest),.1); padding: 1rem 0; overflow: hidden; white-space: nowrap }
.marquee-inner { display: inline-flex; animation: mq 36s linear infinite }
.marquee-wrap:hover .marquee-inner, .marquee-wrap.paused .marquee-inner { animation-play-state: paused }
/* WCAG 2.2.2: moving content that runs longer than five seconds needs a pause control */
.marquee-toggle {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  border: 1px solid rgba(var(--rgb-forest),.4); background: var(--dark3); color: var(--green); font-size: .6rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-sans);
}
.marquee-toggle:hover { background: var(--white) }
.mi { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--ls-20); text-transform: uppercase; color: var(--green); padding: 0 var(--gutter); font-weight: var(--fw-medium) }
.mi::before { content: '◆ '; color: rgba(var(--rgb-forest),.5); font-size: .5rem; vertical-align: middle }


/* ───────────────────────────────────────────────────────────────────────────
   §8  CARDS
   ─────────────────────────────────────────────────────────────────────────── */
/* — sector tiles — */
.sectors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); border: none }
/* eight sector cards: four aligned columns */
.sectors-grid.cols-4 { grid-template-columns: repeat(4, 1fr) }
.sector { padding: 2.25rem 2rem; background: var(--white); border: var(--border); border-radius: var(--radius); cursor: pointer; transition: all var(--t-base); display: flex; flex-direction: column }
.sector:hover { background: rgba(var(--rgb-white),.6); transform: var(--lift); box-shadow: var(--shadow-soft) }
/* card numerals share the site's display numeral voice (see .pn) */
.sector-n { font-family: var(--font-display); font-size: var(--xl); color: var(--gold); margin-bottom: 1.75rem; font-style: italic; line-height: 1 }
.sector-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; margin-bottom: 1.5rem; filter: grayscale(20%); transition: filter .4s }
.sector:hover .sector-img { filter: grayscale(0%) }
.sector-name { font-family: var(--font-display); font-size: var(--fs-card); font-weight: var(--fw-medium); color: var(--deep); line-height: 1.22; margin-bottom: .7rem; letter-spacing: var(--ls-tight) }
.sector-body { font-size: var(--sm); color: var(--body); line-height: var(--lh-body); flex: 1; margin-bottom: 1.5rem }
/* a stage card without a page behind it has no button, so no bottom gap */
.sector.stage { cursor: default }
.sector.stage .sector-body { margin-bottom: 0 }
.sector.stage:hover { transform: none; box-shadow: none; background: var(--white) }
/* mint variant (areas page hand-off tile) */
.sector.sector-mint { background: var(--dark); border-color: rgba(var(--rgb-green),.2) }
.sector-mint .sector-n { color: var(--green) }
.sector-mint .sector-name { color: var(--green-deep) }
.sector-mint .sector-body { color: var(--green-soft) }
.sector-mint .btn-ghost { color: var(--green) }

/* — service blocks — */
.svcs-italic { font-family: var(--font-display); font-size: var(--2xl); font-weight: var(--fw-light); font-style: italic; color: var(--muted); line-height: 1.4; margin-top: .75rem }
.svcs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 }
.svc { padding: 2.5rem 2.25rem; border: var(--border); border-radius: var(--radius); margin: .75rem; transition: all var(--t-base) }
.svc:hover { background: rgba(var(--rgb-slate-1),.2) }
.svc-n { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: var(--fw-regular); color: var(--gold); line-height: 1; margin-bottom: 1rem; font-style: italic }
.svc-title { font-family: var(--font-ui); font-size: .8rem; letter-spacing: var(--ls-10); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--deep); margin-bottom: 1.5rem }
.svc-list { list-style: none }
.svc-list li { font-size: var(--sm); color: var(--body); padding: .42rem 0; border-bottom: var(--border); display: flex; align-items: baseline; gap: .65rem; line-height: var(--lh-snug) }
.svc-list li::before { content: '—'; color: var(--rule); flex-shrink: 0; font-size: .6rem }
.svc-list li:last-child { border-bottom: none }
.svc-list li a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; transition: color var(--t-fast) }
.svc-list li a:hover { color: var(--gold) }
.svc-full-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap) }
.svc-full-item { padding: 3rem; border: var(--border); transition: background .25s; border-radius: var(--radius); overflow: hidden }
.svc-full-item:hover { background: rgba(var(--rgb-slate-1),.15) }
.svc-img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; margin-bottom: 1.5rem; border: var(--border); border-radius: var(--radius-md) }

/* — delivery pillars — */
.m-pillars { display: flex; flex-direction: column; margin-top: 2rem }
.m-pill { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.25rem 0; border-top: var(--border) }
.m-pill:last-child { border-bottom: var(--border) }
.pn { font-family: var(--font-display); font-size: var(--xl); color: var(--gold); flex-shrink: 0; font-weight: var(--fw-regular); font-style: italic; padding-top: .05rem }
/* on slate the gold numeral is 3.1:1; the pillar numerals read in green there, like the eyebrows */
.section-off .pn, .surface-slate .pn { color: var(--green) }
.pt { font-family: var(--font-ui); font-size: var(--fs-ui); letter-spacing: var(--ls-12); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--deep); margin-bottom: .3rem }
.pt a { color: inherit; transition: color var(--t-fast) }
.pt a:hover { color: var(--gold) }
.pd { font-size: var(--sm); color: var(--body); line-height: 1.7 }
.mission-media { position: relative }
.mm-a { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: var(--radius) }
.mm-b { position: absolute; bottom: -2.5rem; right: -2.5rem; width: 52%; aspect-ratio: 4/3; object-fit: cover; display: block; border: 5px solid var(--white); box-shadow: var(--shadow-lift); border-radius: var(--radius) }

/* — project cards — */
.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap) }
.related-proj-grid { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap) }
.pcard { position: relative; overflow: hidden; cursor: pointer; background: var(--dark); border-radius: var(--radius) }
.pcard img { width: 100%; height: 320px; object-fit: cover; display: block; transition: transform .6s, opacity .4s; opacity: .88 }
.pcard:hover img { transform: scale(1.04); opacity: 1 }
.pcard.span2 { grid-column: span 2 }
.pcard.span2 img { height: 460px }
.pcard-meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.75rem 2.25rem; background: var(--overlay-pcard) }
.pcard-cat { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--ls-18); text-transform: uppercase; color: rgba(var(--rgb-white),.48); margin-bottom: .35rem }
.pcard-title { font-family: var(--font-display); font-size: var(--2xl); font-weight: var(--fw-regular); color: var(--white-pure); line-height: 1.12; letter-spacing: var(--ls-tight) }
.pcard-arr {
  position: absolute; top: 1.5rem; right: 1.5rem; width: 38px; height: 38px; background: rgba(var(--rgb-white),.1);
  display: flex; align-items: center; justify-content: center; color: rgba(var(--rgb-white),.55);
  opacity: 0; transform: translateY(4px); transition: all .3s;
}
.pcard:hover .pcard-arr { opacity: 1; transform: translateY(0) }
.pcard-status {
  position: absolute; top: 1.5rem; left: 1.5rem; font-family: var(--font-ui); font-size: .65rem; letter-spacing: var(--ls-14);
  text-transform: uppercase; padding: .3rem .85rem; background: rgba(var(--rgb-ink-2),.82); backdrop-filter: blur(6px);
  color: var(--dark); font-weight: var(--fw-semibold); border: 1px solid rgba(var(--rgb-mint),.25);
}

/* — blog cards — */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap) }
.bcard { background: var(--white); border: var(--border); cursor: pointer; transition: all var(--t-base); overflow: hidden; border-radius: var(--radius) }
.bcard:hover { border-color: var(--gold-lt); box-shadow: var(--shadow-card); transform: var(--lift) }
.bcard-img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform .5s }
.bcard:hover .bcard-img { transform: scale(1.03) }
.bcard.featured { grid-column: span 3; display: grid; grid-template-columns: 1.4fr 1fr }
.bcard.featured .bcard-img { height: 100%; min-height: 300px }
.bcard.featured .bcard-body { padding: 2.5rem }
.bcard.featured .bcard-title { font-size: var(--2xl); line-height: 1.2 }
.bcard.featured .bcard-excerpt { -webkit-line-clamp: 4 }
.bcard-body { padding: 1.75rem }
.bcard-cat { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-18); text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; font-weight: var(--fw-semibold) }
.bcard-title { font-family: var(--font-display); font-size: var(--fs-card); font-weight: var(--fw-medium); color: var(--deep); line-height: 1.22; margin-bottom: .75rem; letter-spacing: var(--ls-tight) }
.bcard-excerpt { font-size: var(--sm); color: var(--body); line-height: var(--lh-body); margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.bcard-meta {
  display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-10); text-transform: uppercase; color: var(--muted); border-top: var(--border); padding-top: 1rem; margin-top: auto;
}

/* — resource cards — */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap) }
.res-grid.cols-4 { grid-template-columns: repeat(4, 1fr) }
.rcard { background: var(--white); border: var(--border); cursor: pointer; transition: all var(--t-base); overflow: hidden; display: flex; flex-direction: column; border-radius: var(--radius) }
.rcard:hover { border-color: var(--gold-lt); box-shadow: var(--shadow-card); transform: var(--lift) }
.rcard-type { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-18); text-transform: uppercase; font-weight: var(--fw-bold); padding: .28rem .75rem; display: inline-block; margin: 1.5rem 1.5rem 0 }
.rcard-type.case { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-lt) }
.rcard-type.guide { background: var(--gold-bg); color: var(--gold2); border: 1px solid var(--gold-lt) }
.rcard-body { padding: 1rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column }
.rcard-title { font-family: var(--font-ui); font-size: var(--xl); font-weight: var(--fw-medium); color: var(--deep); line-height: 1.28; margin-bottom: .75rem }
.rcard-title em, .sector-name em, .bcard-title em, .hm-card-title em { font-style: inherit }
.rcard-excerpt { font-size: var(--sm); color: var(--body); line-height: 1.72; flex: 1; margin-bottom: 1.25rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.rcard-footer span:first-child { white-space: nowrap; margin-right: .75rem }
.rcard-footer {
  display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ui); font-size: var(--fs-label);
  letter-spacing: var(--ls-10); text-transform: uppercase; color: var(--muted); border-top: var(--border); padding-top: 1rem;
}

/* — home media cards — */
.home-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: 3.5rem }
.hm-card { border: var(--border); cursor: pointer; transition: all var(--t-base); overflow: hidden; background: var(--white); border-radius: var(--radius) }
.hm-card:hover { border-color: var(--gold-lt); box-shadow: var(--shadow-card); transform: var(--lift) }
.hm-card-img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform .6s var(--ease-soft), filter .5s }
.hm-card:hover .hm-card-img { transform: scale(1.04) }
.hm-card-body { padding: 1.5rem }
.hm-card-cat { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-18); text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; font-weight: var(--fw-semibold) }
.hm-card-title { font-family: var(--font-display); font-size: 1.42rem; font-weight: var(--fw-medium); color: var(--deep); line-height: 1.25; margin-bottom: .6rem; letter-spacing: var(--ls-tight) }
.hm-card-date { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-10); text-transform: uppercase; color: var(--muted) }

/* — value cards — */
.val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap) }
.val { padding: 2.5rem 2.25rem; background: var(--white); border: var(--border); border-radius: var(--radius); transition: all var(--t-base); overflow: hidden }
.val:hover { background: var(--white); border-color: var(--gold-lt); box-shadow: var(--shadow-card); transform: var(--lift) }
.val-n { font-family: var(--font-display); font-size: var(--fs-stat-lg); color: var(--cream); line-height: 1; margin-bottom: 1.25rem; font-style: italic }
.val-title { font-family: var(--font-ui); font-size: var(--fs-ui); letter-spacing: var(--ls-14); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--deep); margin-bottom: .75rem }
.val-text { font-size: var(--sm); color: var(--body); line-height: var(--lh-list) }

/* — related items (sidebar) — */
.related-posts { margin-top: 4rem; padding-top: 3rem; border-top: var(--border) }
.related-posts h4, .post-article .related-posts h4, .res-article .related-posts h4 { font-family: var(--font-ui); font-size: var(--xs); letter-spacing: var(--ls-18); text-transform: uppercase; color: var(--deep); margin-bottom: 2rem; opacity: .55 }
.related-list { display: flex; flex-direction: column; gap: 1rem }
.rel-item { display: flex; gap: 1.25rem; align-items: flex-start; cursor: pointer; padding: 1rem; border: 1px solid transparent; transition: all .22s }
.rel-item:hover { border-color: rgba(var(--rgb-slate-1),.5); background: rgba(var(--rgb-slate-1),.18) }
.rel-img { width: 72px; height: 56px; object-fit: cover; flex-shrink: 0 }
.rel-type { font-family: var(--font-ui); font-size: .65rem; letter-spacing: var(--ls-14); text-transform: uppercase; color: var(--gold); margin-bottom: .25rem; font-weight: var(--fw-semibold) }
.rel-title { font-family: var(--font-ui); font-size: var(--sm); font-weight: var(--fw-medium); color: var(--deep); line-height: 1.35 }

/* hover transitions shared by the lifting cards */
.pcard:hover, .bcard:hover, .sector:hover { transition: transform .3s var(--ease-soft), box-shadow .3s ease, border-color .25s }


/* ───────────────────────────────────────────────────────────────────────────
   §9  ARTICLE LAYOUTS
   ─────────────────────────────────────────────────────────────────────────── */
/* — project detail — */
.pdet-hero { position: relative; height: 72vh; min-height: 500px; overflow: hidden; padding-top: 0 }
.pdet-hero-img { width: 100%; height: 100%; object-fit: cover; display: block }
.pdet-hero::after { content: ''; position: absolute; inset: 0; background: var(--overlay-pdet) }
.pdet-hero-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 3rem var(--gutter) }
.pdet-cat { font-family: var(--font-ui); font-size: var(--xs); letter-spacing: var(--ls-18); text-transform: uppercase; color: rgba(var(--rgb-white),.48); margin-bottom: .5rem }
.pdet-title { font-family: var(--font-display); font-size: var(--fs-title-pdet); font-weight: var(--fw-regular); color: var(--white-pure); line-height: 1.04 }
.pdet-body { padding: var(--section-md) 0; background: var(--white) }
/* the static build promotes project-body headings one level (h2 is the
   display heading, h3 the label), exactly as in the post and resource articles */
.pdet-text h2 { font-family: var(--font-display); font-size: var(--2xl); font-weight: var(--fw-medium); color: var(--deep); margin: 2.75rem 0 1rem; letter-spacing: var(--ls-tight) }
.pdet-text h2:first-child { margin-top: 0 }
.pdet-text h3 { font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: var(--ls-10); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--deep); line-height: 1.6; margin: 2rem 0 .75rem }
.pdet-text p { font-size: var(--base); color: var(--body); line-height: var(--lh-loose); margin-bottom: 1rem }
.pdet-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.25rem }
.gallery-section { padding: var(--section-sm) 0; background: var(--grad-slate-wide); border-top: var(--border-slate) }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: 2rem }
/* each gallery image sits in a <button> so the lightbox opens from the keyboard */
.gallery-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius) }
.gallery-btn:focus-visible { outline-offset: -3px }
.gallery-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: pointer; transition: opacity .3s; border-radius: var(--radius) }
.gallery-btn:hover .gallery-img { opacity: .84 }
.gallery-grid .gallery-btn:first-child { grid-column: span 2 }
.gallery-grid .gallery-btn:first-child .gallery-img { aspect-ratio: 16/9 }
.related-section { padding: var(--section-sm) 0; background: var(--grad-slate-wide); border-top: var(--border-slate) }

/* — blog post — */
.post-hero { padding-top: 0; position: relative; height: 62vh; min-height: 420px; overflow: hidden }
.post-hero-img { width: 100%; height: 100%; object-fit: cover; display: block }
.post-hero::after { content: ''; position: absolute; inset: 0; background: var(--overlay-post) }
.post-hero-cnt { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 3rem var(--gutter) }
.post-cat-lbl { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--ls-20); text-transform: uppercase; color: rgba(var(--rgb-gold),.75); margin-bottom: .5rem; font-weight: var(--fw-semibold) }
.post-title-lbl { font-family: var(--font-display); font-size: var(--fs-title-post); font-weight: var(--fw-regular); color: var(--white-pure); line-height: 1.06; max-width: 780px }
/* heading levels: the static build promotes article headings one level, so h2
   carries the display style the SPA gave h3, and h3 the label style it gave h4 */
.post-article h2:not(.hl), .res-article h2:not(.hl) { font-family: var(--font-display); font-size: var(--2xl); font-weight: var(--fw-medium); color: var(--deep); line-height: 1.2; letter-spacing: var(--ls-tight); margin: 3rem 0 1.1rem }
.post-article h2:not(.hl):first-child, .res-article h2:not(.hl):first-child { margin-top: 0 }
.post-article h3, .res-article h3 { font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: var(--ls-10); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--deep); line-height: 1.6; margin: 2rem 0 .75rem }
.post-article p { font-size: var(--base); color: var(--body); line-height: var(--lh-prose); margin-bottom: 1.25rem }
/* a deck paragraph opening an article keeps its lead size and leading — the
   article's own p rule outranks .lead, so it has to be restated here */
.post-article p.lead, .res-article p.lead { font-size: var(--fs-lead); line-height: var(--lh-loose) }
.post-article blockquote { border-left: 3px solid var(--gold); padding: .5rem 0 .5rem 1.75rem; margin: 2.25rem 0; font-size: var(--xl); font-style: italic; color: var(--deep); line-height: var(--lh-snug) }
.post-article ul, .post-article ol { margin: 1rem 0 1.5rem 1.25rem }
.post-article ul li, .post-article ol li { font-size: var(--base); color: var(--body); line-height: var(--lh-list); margin-bottom: .5rem }
.post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.75rem }
.tag-row { margin-top: 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap }

/* — resource / guide — */
.res-article h4 { font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: var(--ls-10); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--deep); margin: 2rem 0 .75rem }
.res-article p { font-size: var(--base); color: var(--body-2); line-height: var(--lh-prose); margin-bottom: 1.25rem }
.res-article ul, .res-article ol { margin: 1rem 0 1.5rem 1.25rem }
.res-article li { font-size: var(--base); color: var(--body-2); line-height: var(--lh-list); margin-bottom: .55rem }
.res-article blockquote { border-left: 3px solid var(--gold); padding: .5rem 0 .5rem 1.75rem; margin: 2.25rem 0; font-family: var(--font-ui); font-size: var(--xl); font-style: italic; color: var(--deep); line-height: var(--lh-snug) }

/* — expertise sections — */
.exp-list { display: flex; flex-direction: column }
.exp-item { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: var(--border) }
.exp-item:nth-child(even) .exp-text { order: 2 }
.exp-item:nth-child(even) .exp-media { order: 1 }
.exp-text { padding: 5rem 3.5rem; display: flex; flex-direction: column; justify-content: center }
.exp-media { overflow: hidden }
.exp-media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block }
.exp-n { font-family: var(--font-display); font-size: var(--fs-numeral); color: var(--cream); line-height: 1; margin-bottom: .75rem; font-style: italic }
.exp-name { font-family: var(--font-ui); font-size: var(--2xl); font-weight: var(--fw-medium); color: var(--deep); line-height: 1.18; margin-bottom: 1.25rem }
.exp-body { font-size: var(--sm); color: var(--body); line-height: 1.85; margin-bottom: 1.75rem }
.exp-tags { display: flex; flex-wrap: wrap; gap: .4rem }

/* — specification table (vertical pages) — */
.spec-cap { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-28); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--gold); margin: 2.25rem 0 .9rem }
.spec-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border: var(--border); border-radius: var(--radius); margin: 0 0 .9rem }
.spec-tbl { border-collapse: collapse; width: 100%; min-width: 620px; background: var(--white) }
.spec-tbl th, .spec-tbl td { text-align: left; padding: .85rem 1.15rem; border-bottom: var(--border); vertical-align: top; font-size: var(--sm); line-height: 1.62; color: var(--body) }
.spec-tbl thead th { font-family: var(--font-ui); font-size: .66rem; letter-spacing: var(--ls-16); text-transform: uppercase; color: var(--green); font-weight: var(--fw-semibold); background: var(--grad-slate) }
.spec-tbl tbody tr:last-child td { border-bottom: none }
/* the label column keeps a real width so long prose in the value column wraps
   instead of squeezing the labels to one letter per line */
.spec-tbl th:first-child, .spec-tbl td:first-child { width: 30% }
.spec-tbl td:first-child { color: var(--deep); font-weight: var(--fw-semibold) }
.spec-tbl td:nth-child(2) { font-variant-numeric: tabular-nums; color: var(--green); font-weight: var(--fw-semibold) }
.spec-note { font-size: var(--sm); line-height: 1.72; color: var(--muted); max-width: 70ch; margin: 0 0 2rem }


/* ───────────────────────────────────────────────────────────────────────────
   §10  SIDEBARS, META BOXES, CONTENTS, CTA BOX
   ─────────────────────────────────────────────────────────────────────────── */
.post-sidebar { position: sticky; top: var(--sticky-top) }
.res-sidebar { position: sticky; top: var(--sticky-top); display: flex; flex-direction: column; gap: var(--grid-gap) }
.pdet-meta-box { background: var(--grad-slate); border: var(--border-slate); padding: 2.25rem; position: sticky; top: var(--sticky-top); border-radius: var(--radius) }
.pdet-meta-row { display: flex; flex-direction: column; padding: .95rem 0; border-bottom: var(--border) }
.pdet-meta-row:last-child { border-bottom: none }
.pdet-meta-label { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--ls-16); text-transform: uppercase; color: var(--green); margin-bottom: .28rem }
.pdet-meta-val { font-size: var(--sm); font-weight: var(--fw-semibold); color: var(--green-deep) }
.post-meta-box { background: var(--grad-slate); border: var(--border-slate); padding: 2rem; border-radius: var(--radius) }
.post-meta-box h4 { font-family: var(--font-ui); font-size: var(--xs); letter-spacing: var(--ls-18); text-transform: uppercase; color: var(--green); margin-bottom: 1.25rem; font-weight: var(--fw-semibold) }
.post-meta-item { display: flex; flex-direction: column; padding: .8rem 0; border-bottom: var(--border) }
.post-meta-item:last-child { border-bottom: none }
.post-meta-label { font-family: var(--font-ui); font-size: .66rem; letter-spacing: var(--ls-16); text-transform: uppercase; color: var(--green); margin-bottom: .22rem }
.post-meta-val { font-size: var(--sm); color: var(--green-deep); font-weight: var(--fw-semibold) }
.res-meta-box { background: var(--grad-slate); border: var(--border-slate); padding: 2rem; border-radius: var(--radius) }
.res-meta-box h4 { font-family: var(--font-ui); font-size: var(--xs); letter-spacing: var(--ls-18); text-transform: uppercase; color: var(--green); margin-bottom: 1.25rem; font-weight: var(--fw-semibold) }
.res-toc { background: var(--grad-slate); border: var(--border-slate); padding: 2rem; border-radius: var(--radius) }
.res-toc h4 { font-family: var(--font-ui); font-size: var(--xs); letter-spacing: var(--ls-18); text-transform: uppercase; color: var(--green); margin-bottom: 1.25rem; font-weight: var(--fw-semibold) }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: .5rem }
.toc-list li a { font-size: var(--sm); color: var(--text); text-decoration: none; display: flex; align-items: baseline; gap: .5rem; transition: color var(--t-fast) }
.toc-list li a::before { content: '—'; color: rgba(var(--rgb-forest-2),.4); font-size: .6rem; flex-shrink: 0 }
.toc-list li a:hover { color: var(--green-deep) }
.res-cta-box { background: var(--dark); border: var(--border-forest-2); padding: 2.5rem; margin-top: 3rem; border-radius: var(--radius-lg) }
.res-cta-box h4 { font-family: var(--font-display); font-size: var(--fs-box); font-weight: var(--fw-regular); text-transform: none; color: var(--green-deep); margin-bottom: .75rem; letter-spacing: var(--ls-tight) }
.res-cta-box h4 em { font-style: italic; font-weight: var(--fw-light); color: var(--green-mid) }
.res-cta-box p { font-size: var(--sm); color: var(--green-soft); line-height: var(--lh-list); margin-bottom: 1.5rem }


/* ───────────────────────────────────────────────────────────────────────────
   §11  FORMS
   ─────────────────────────────────────────────────────────────────────────── */
.form-panel { background: var(--grad-slate-form); padding: 3rem; border: 1px solid rgba(var(--rgb-slate),.3); border-radius: var(--radius-lg) }
.fp-title { font-family: var(--font-display); font-size: var(--fs-box); font-weight: var(--fw-regular); color: var(--deep); margin-bottom: 2rem; letter-spacing: var(--ls-tight) }
.form-group { margin-bottom: 1.25rem }
.form-label { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-16); text-transform: uppercase; color: var(--text); display: block; margin-bottom: .5rem; font-weight: var(--fw-semibold) }
.form-input, .form-select, .form-textarea {
  width: 100%; background: rgba(var(--rgb-white),.7); border: var(--border); padding: .82rem 1rem; font-family: var(--font-sans);
  font-size: var(--sm); color: var(--deep); transition: border-color var(--t-fast); -webkit-appearance: none;
}
/* the focus ring comes from the shared :focus-visible rule in §1; the border darkens with it */
.form-fieldset { border: 0; padding: 0; margin: 0; min-width: 0 }
.form-fieldset legend { padding: 0 }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231b3d29'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.form-textarea { height: 140px; resize: vertical }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--green) }
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted) }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
.form-note { font-size: var(--xs); color: var(--green-dim); margin-top: 1rem; text-align: center; line-height: 1.6 }
.form-hint { font-family: var(--font-sans); font-size: var(--fs-label-sm); letter-spacing: .04em; text-transform: none; color: var(--body); font-weight: var(--fw-regular) }
.form-success { background: var(--green); color: var(--white-pure); padding: 1rem 1.25rem; font-size: var(--sm); text-align: center; display: none; margin-bottom: 1rem }
.form-success.show { display: block }
.form-error { background: var(--red); color: var(--white-pure); padding: 1rem 1.25rem; font-size: var(--sm); text-align: center; display: none; margin-bottom: 1rem; line-height: 1.6 }
.form-error.show { display: block }
.form-error a, .form-success a { color: inherit; text-decoration: underline }
/* privacy consent line above the submit button */
.form-consent { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--xs); color: var(--text); line-height: 1.6; margin: .25rem 0 1.25rem; cursor: pointer }
.form-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .2rem; accent-color: var(--green); cursor: pointer }
.form-consent a { color: var(--green); text-decoration: underline; text-underline-offset: 2px }
/* searchable combo (municipality picker) */
.combo-src { display: none }
.combo { position: relative }
.combo-input { padding-right: 2.4rem; cursor: text }
.combo::after {
  content: ''; position: absolute; right: 1rem; top: 50%; width: 10px; height: 6px; margin-top: -3px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231b3d29'/%3E%3C/svg%3E") no-repeat center;
  transition: transform var(--t-fast);
}
.combo.open::after { transform: rotate(180deg) }
.combo-list {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; max-height: 19rem; overflow-y: auto;
  overscroll-behavior: contain; background: var(--white-pure); border: var(--border); box-shadow: var(--shadow-pop); -webkit-overflow-scrolling: touch;
}
.combo.open .combo-list { display: block }
.combo-group {
  font-family: var(--font-ui); font-size: var(--fs-label-xs); letter-spacing: var(--ls-16); text-transform: uppercase; font-weight: var(--fw-semibold);
  color: var(--sage); padding: .7rem 1rem .35rem; background: var(--white-pure); position: sticky; top: 0; border-bottom: 1px solid rgba(var(--rgb-rule),.5);
}
.combo-opt { font-family: var(--font-sans); font-size: var(--sm); color: var(--deep); padding: .6rem 1rem; cursor: pointer; line-height: 1.4 }
.combo-opt:hover, .combo-opt.active { background: var(--green-bg); color: var(--green) }
.combo-opt mark { background: transparent; color: var(--gold2); font-weight: var(--fw-semibold) }
.combo-empty { font-family: var(--font-sans); font-size: var(--sm); color: var(--muted); padding: .9rem 1rem; font-style: italic }
/* checkbox grid */
.check-err { display: none; font-family: var(--font-sans); font-size: var(--xs); color: var(--red); margin-top: .5rem }
.check-err.show { display: block }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem }
.check-opt {
  display: flex; align-items: flex-start; gap: .55rem; background: rgba(var(--rgb-white),.7); border: var(--border); padding: .7rem .8rem;
  font-family: var(--font-sans); font-size: var(--sm); color: var(--deep); line-height: 1.4; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.check-opt:hover { border-color: var(--gold-lt) }
.check-opt:focus-within { outline: 2px solid var(--gold); outline-offset: 2px }
.check-opt input {
  appearance: none; -webkit-appearance: none; flex: 0 0 15px; width: 15px; height: 15px; margin-top: .15rem; border: var(--border);
  background: var(--white-pure); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.check-opt input:checked { background: var(--green); border-color: var(--green) }
.check-opt input:checked::after { content: ''; display: block; width: 4px; height: 8px; margin: 1px auto 0; border: solid var(--white-pure); border-width: 0 2px 2px 0; transform: rotate(45deg) }
.check-opt:has(input:checked) { border-color: var(--green); background: var(--green-bg) }
/* contact details */
.contact-dets { margin-top: 2.5rem; display: flex; flex-direction: column; gap: var(--grid-gap) }
.cdet-label { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-18); text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; font-weight: var(--fw-semibold) }
.cdet-val { font-size: var(--base); color: var(--deep); font-weight: var(--fw-regular) }
.cdet-key { color: var(--deep); letter-spacing: .05em }
.check-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: .65rem }
.check-item { display: flex; gap: .75rem; align-items: center; font-size: var(--sm); color: var(--body) }
.check-item::before { content: '✓'; color: var(--gold); font-size: var(--xs); flex-shrink: 0; font-weight: var(--fw-bold) }


/* ───────────────────────────────────────────────────────────────────────────
   §12  FAQ, CTA BAND, COMPANY STATS
   ─────────────────────────────────────────────────────────────────────────── */
.faq-item { border-bottom: var(--border); transition: background var(--t-fast) }
.faq-item.open { background: rgba(var(--rgb-slate-1),.18) }
/* the question is a <button> (aria-expanded) so the answer opens from the keyboard */
.faq-q {
  display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 1.4rem 0; cursor: pointer;
  font-family: inherit; font-size: var(--base); color: var(--deep); gap: 1rem; transition: color var(--t-fast); font-weight: var(--fw-medium);
  background: none; border: 0; line-height: var(--lh-snug);
}
.faq-q:focus-visible { outline-offset: -2px }
.faq-q:hover, .faq-item.open .faq-q { color: var(--gold) }
.faq-icon { flex-shrink: 0; font-size: 1.1rem; color: var(--muted); transition: all .25s; font-family: var(--font-sans) }
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--gold) }
.faq-a { display: none; padding: 0 0 1.4rem; font-size: var(--sm); color: var(--text); line-height: 1.86 }
.faq-item.open .faq-a { display: block }

.cta-band { padding: 6rem 0; background: var(--dark); border-top: var(--border-forest-2); border-bottom: var(--border-forest); text-align: center }
.cta-band h2 { font-family: var(--font-display); font-size: var(--fs-hl-med); font-weight: var(--fw-regular); color: var(--green-deep); margin-bottom: 1rem; letter-spacing: var(--ls-tight) }
.cta-band h2 em { font-style: italic; font-weight: var(--fw-light); color: var(--green-mid) }
.cta-band p { font-size: var(--base); color: var(--green-soft); max-width: 52ch; margin: 0 auto 2.75rem; line-height: var(--lh-loose) }
.cta-band p span { color: var(--white-pure) }
.cta-band .eyebrow.center { justify-content: center; color: var(--green) }
.cta-acts { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap }
.cta-cities { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(var(--rgb-forest-3),.1) }
.city-tag { font-family: var(--font-ui); font-size: .64rem; letter-spacing: var(--ls-12); text-transform: uppercase; color: var(--green); padding: .28rem .82rem; border: var(--border-mint-line); background: transparent; transition: all var(--t-fast) }
.city-tag:hover { color: rgba(var(--rgb-forest-3),.85); border-color: rgba(var(--rgb-forest),.4) }

.company-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: var(--border); margin-top: 3.5rem; border-radius: var(--radius); overflow: hidden }
.cstat { background: var(--grad-stat); padding: 1.75rem; text-align: center; border-radius: 0; min-width: 0; overflow: hidden }
.cstat-n { font-family: var(--font-display); font-size: var(--fs-stat-lg); font-weight: var(--fw-regular); color: var(--green-deep); line-height: 1; white-space: nowrap }
.cstat-l { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--ls-14); text-transform: uppercase; color: var(--green); margin-top: .4rem }
/* slate info panel (company page) */
.info-panel { margin-top: 1.5rem; padding: 2rem; background: var(--grad-slate); border: var(--border-slate); border-radius: var(--radius) }
.surface-slate { background: var(--grad-slate-wide); border-top: var(--border-slate) }
.pad-aside { padding: 5rem 3.5rem 5rem 2.5rem }
.map-frame { border: 0; display: block; border-radius: var(--radius-md) }


/* ───────────────────────────────────────────────────────────────────────────
   §13  FOOTER
   ─────────────────────────────────────────────────────────────────────────── */
footer { background: var(--dark2); border-top: var(--border-forest); padding: 5.5rem 0 2.25rem }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 4rem }
.f-logo { font-family: var(--font-ui); font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--green-deep); letter-spacing: .01em; margin-bottom: 1rem; display: flex; align-items: center; gap: .65rem }
.f-logo-img { height: 44px; width: auto; display: block }
.f-tag { font-size: var(--sm); color: var(--green); line-height: var(--lh-body); max-width: 30ch; margin-bottom: 1.5rem }
.f-social { display: flex; gap: 1rem; margin-top: 1rem }
.f-social a {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(var(--rgb-forest-2),.3);
  border-radius: 50%; color: var(--green); text-decoration: none; font-size: var(--fs-caption); transition: all var(--t-fast); font-family: var(--font-sans);
}
.f-social a:hover { background: var(--green); color: var(--mint); border-color: var(--green) }
.f-contact-block { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem }
.f-contact-item { display: flex; flex-direction: column; gap: .2rem }
.f-contact-item .f-contact-label { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-18); text-transform: uppercase; color: var(--green); font-weight: var(--fw-semibold); opacity: .8 }
.f-contact-item span, .f-contact-item a { font-size: var(--sm); color: var(--green); line-height: 1.6; text-decoration: none; transition: color var(--t-fast) }
.f-contact-item a:hover { color: var(--green-deep) }
.f-link-dim, .f-contact-item a.f-link-dim { color: var(--green-dim); text-decoration: none }
.f-badges { display: flex; flex-wrap: wrap; gap: .45rem }
.f-badge { font-family: var(--font-ui); font-size: .6rem; letter-spacing: var(--ls-14); text-transform: uppercase; color: var(--green); padding: .22rem .65rem; border: var(--border-mint-line) }
.f-col h4, .f-col-heading { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-18); text-transform: uppercase; color: var(--green); margin-bottom: 1.5rem; font-weight: var(--fw-semibold) }
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: .75rem }
.f-col ul li a { font-size: var(--sm); color: var(--green-dim); cursor: pointer; text-decoration: none; transition: color var(--t-fast) }
.f-col ul li a:hover { color: var(--green-deep) }
.f-bottom { border-top: 1px solid rgba(var(--rgb-forest-2),.25); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem }
.f-copy { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: .08em; color: var(--green-dim) }
.f-legal { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center }
.f-legal a, .f-legal button { font-family: var(--font-ui); font-size: var(--fs-label-sm); letter-spacing: var(--ls-10); color: var(--green-dim); cursor: pointer; text-decoration: none; transition: color var(--t-fast); background: none; border: 0; padding: 0 }
.f-legal a:hover, .f-legal button:hover { color: var(--green-deep) }


/* ───────────────────────────────────────────────────────────────────────────
   §14  OVERLAYS
   ─────────────────────────────────────────────────────────────────────────── */
/* lightbox: a dialog with a close button; Escape and the backdrop also close it */
.lightbox { position: fixed; inset: 0; background: rgba(var(--rgb-black),.93); z-index: var(--z-lightbox); display: none; align-items: center; justify-content: center }
.lightbox.open { display: flex }
.lb-img { max-width: 90vw; max-height: 90vh; object-fit: contain; display: block }
.lb-close {
  position: absolute; top: 1.25rem; right: 1.25rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(var(--rgb-white),.4); background: rgba(var(--rgb-black),.55); color: var(--white-pure); font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-sans);
}
.lb-close:hover { background: var(--gold); border-color: var(--gold) }
.lb-close:focus-visible { outline-color: var(--white-pure) }
/* cookie consent banner: analytics loads only after "Accept" */
.consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 560px; margin: 0 auto; z-index: var(--z-toast);
  background: var(--white-pure); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-modal);
  padding: 1.5rem 1.75rem; font-size: var(--sm); color: var(--body); line-height: 1.65;
}
.consent-title { font-family: var(--font-ui); font-size: var(--fs-ui); letter-spacing: var(--ls-14); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--deep); margin-bottom: .5rem }
.consent p { margin-bottom: 1.1rem }
.consent p a { color: var(--green); text-decoration: underline; text-underline-offset: 2px }
.consent-acts { display: flex; gap: .75rem; flex-wrap: wrap }
.read-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--gold); z-index: var(--z-progress); width: 0%; transition: width .1s linear; pointer-events: none }
.btt {
  position: fixed; bottom: 2rem; left: 2rem; width: 40px; height: 40px; background: var(--green-deep); color: rgba(var(--rgb-white),.85);
  border: 1px solid rgba(var(--rgb-white),.15); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  opacity: 0; transform: translateY(8px); transition: all .3s; z-index: var(--z-nav); font-family: var(--font-sans);
}
.btt.visible { opacity: 1; transform: translateY(0) }
.btt:hover { background: var(--gold); color: var(--white-pure); border-color: var(--gold) }
.toast {
  position: fixed; bottom: 2rem; right: 2rem; background: var(--green-deep); color: var(--white-pure); padding: 1rem 1.5rem; font-family: var(--font-ui);
  font-size: var(--fs-ui); letter-spacing: var(--ls-10); z-index: var(--z-toast); transform: translateY(100px); opacity: 0; transition: all .35s; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1 }
/* custom cursor — pointer devices only; touch devices keep the native cursor, and so
   does anyone who has asked for reduced motion (that setting travels with the
   large / high-contrast pointer options people rely on) */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  * { cursor: none !important }
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--z-cursor); will-change: transform; transform: translate(-50%, -50%) }
  .cursor-dot { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; margin: -3.5px 0 0 -3.5px; transition: width .18s ease, height .18s ease, opacity .18s ease, margin .18s ease }
  .cursor-ring { width: 32px; height: 32px; border: 1.5px solid rgba(var(--rgb-cursor),.55); border-radius: 50%; margin: -16px 0 0 -16px; opacity: .4; transition: width .22s ease, height .22s ease, margin .22s ease, border-color .22s ease, opacity .22s ease }
  body.cursor-hover .cursor-dot { width: 0; height: 0; margin: 0; opacity: 0 }
  body.cursor-hover .cursor-ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: rgba(var(--rgb-cursor),.75); opacity: .25 }
  body.cursor-click .cursor-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; opacity: .6 }
  body.cursor-click .cursor-ring { width: 20px; height: 20px; margin: -10px 0 0 -10px; opacity: .7 }
}
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important } }


/* ───────────────────────────────────────────────────────────────────────────
   §15  MOTION
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes fu { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: translateY(0) } }
@keyframes mq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.reveal-group > * { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) ease, transform var(--t-slow) ease }
.reveal-group.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s }
.reveal-group.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .1s }
.reveal-group.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .18s }
.reveal-group.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .26s }
.reveal-group.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .34s }
.reveal-group.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .42s }
.reveal-group.visible > *:nth-child(n+7) { opacity: 1; transform: none; transition-delay: .48s }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out) }
.reveal.visible { opacity: 1; transform: none }
.stagger-child { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out) }
.stagger-child.visible { opacity: 1; transform: none }
/* Reveal parks elements at opacity:0 until an observer fires. Without JS the
   page must still read, so the hidden state applies only once html.js is set. */
html:not(.js) .reveal, html:not(.js) .reveal-group > *, html:not(.js) .stagger-child { opacity: 1 !important; transform: none !important }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .reveal, .reveal-group > *, .stagger-child { opacity: 1 !important; transform: none !important; transition: none !important }
  .hero-ey, .hero h1, .hero-bot, .hero-stats { animation: none !important }
  .cursor-dot, .cursor-ring { display: none !important }
  /* the ticker starts paused; its own button can still start it */
  .marquee-inner { animation-play-state: paused }
  .marquee-wrap.playing:not(.paused) .marquee-inner { animation-play-state: running }
}


/* ───────────────────────────────────────────────────────────────────────────
   §16  RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */
/* the bar needs about 920px; below that the hamburger takes over */
@media (max-width: 980px) {
  .nav-links { display: none }
  .nav-cta-mobile { display: inline-flex }
  .hamburger { display: flex }
  /* the three hero stats no longer fit in one row: stack them flush left,
     and the divider between them becomes a rule above instead of beside */
  .hero-stats { flex-direction: column; gap: 1.5rem; margin-top: 3rem }
  .hstat + .hstat { padding-left: 0; border-left: 0; padding-top: 1.5rem; border-top: 1px solid rgba(var(--rgb-white),.08) }
}
@media (max-width: 1100px) {
  .mission-grid, .sectors-intro, .svcs-header, .contact-layout, .company-grid, .faq-layout, .post-layout, .pdet-layout { grid-template-columns: 1fr; gap: 3.5rem }
  /* a sidebar that follows the article in one column has nothing to stick beside */
  .post-sidebar, .res-sidebar, .pdet-meta-box { position: static }
  .location-grid { grid-template-columns: 1fr }
  .sectors-grid, .svcs-grid, .val-grid, .blog-grid, .res-grid, .home-media-grid { grid-template-columns: 1fr 1fr }
  .sectors-grid.cols-4, .res-grid.cols-4 { grid-template-columns: 1fr 1fr }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem }
  .exp-item { grid-template-columns: 1fr }
  .exp-item:nth-child(even) .exp-text, .exp-item:nth-child(even) .exp-media { order: unset }
  .exp-media img { min-height: 300px }
  .mm-b { display: none }
  .bcard.featured { grid-column: span 2; grid-template-columns: 1.2fr 1fr }
  .svc-full-grid { grid-template-columns: 1fr }
  .svc-full-item { padding: 2rem; width: 100% }
}
@media (max-width: 768px) {
  .container { padding: 0 var(--gutter-sm) }
  .hero-content { padding: 0 var(--gutter-sm) 4rem }
  .hero h1 { font-size: 3.2rem }
  .section { padding: var(--section-sm) 0 }
  .section-sm { padding: 3.5rem 0 }
  .sectors-grid, .sectors-grid.cols-4, .svcs-grid, .val-grid, .proj-grid, .related-proj-grid, .blog-grid, .res-grid, .res-grid.cols-4, .home-media-grid, .footer-grid, .pdet-layout, .post-layout { grid-template-columns: 1fr }
  .pcard.span2 { grid-column: span 1 }
  .pcard.span2 img { height: 320px }
  .f-bottom { flex-direction: column; text-align: center }
  .bcard.featured { grid-column: span 1; grid-template-columns: 1fr; display: block }
  .bcard.featured .bcard-img { height: 220px; min-height: unset }
  .svc-full-grid { grid-template-columns: 1fr; display: block }
  .svc-full-item { padding: 1.5rem; width: 100%; box-sizing: border-box; margin-bottom: .75rem }
  .svc-img { margin-bottom: 1rem; aspect-ratio: 16/9; height: auto; max-height: 220px }
  .pdet-body { padding: 3.5rem 0 }
  .exp-text { padding: 3rem var(--gutter-sm) }
  .mm-a { aspect-ratio: 16/9; max-height: 280px }
  .svc { padding: 1.5rem 1.25rem }
  .cstat-n { font-size: 2.5rem }
  .company-stats { margin-top: 2rem }
  /* the desktop side padding of the contact map panel and the project gallery's three columns do not fit a phone */
  .pad-aside { padding: 3rem var(--gutter-sm) }
  .gallery-grid { grid-template-columns: 1fr 1fr }
  /* touch targets: ghost links, filter chips and footer links get room to tap */
  .btn-ghost { padding: .35rem 0 }
  .pf-btn { min-height: 36px }
  .f-col ul { gap: .5rem }
  .f-col ul li a { display: inline-block; padding: .2rem 0 }
  .f-legal { gap: 1rem 1.5rem }
  .f-legal a, .f-legal button { padding: .3rem 0 }
}
@media (max-width: 640px) {
  .combo-list { max-height: 15rem }
  .combo-opt { padding: .8rem 1rem }
  .check-grid { grid-template-columns: 1fr }
  .form-panel { padding: 1.5rem 1.25rem }
  .pdet-hero { height: 58vh; min-height: 380px }
  .post-hero { height: 52vh; min-height: 340px }
  .page-banner { min-height: 44vh }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr }
  .gallery-grid .gallery-btn:first-child { grid-column: span 1 }
}
@media (max-width: 620px) {
  .spec-tbl { min-width: 520px }
  .spec-tbl th, .spec-tbl td { padding: .7rem .85rem }
}
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr } }


/* ───────────────────────────────────────────────────────────────────────────
   §17  UTILITIES — the classes that replaced inline styles. Last, so they win.
   ─────────────────────────────────────────────────────────────────────────── */
.mt-xs { margin-top: 1rem }      .mt-sm { margin-top: 1.5rem }     .mt-md { margin-top: 2rem }
.mt-ml { margin-top: 2.5rem }    .mt-lg { margin-top: 3rem }
.mt-2xs { margin-top: .4rem }    .mt-1x { margin-top: 1.25rem }    .mt-1h { margin-top: 1.75rem }
.mb-xs { margin-bottom: .75rem } .mb-sm { margin-bottom: 1.25rem } .mb-md { margin-bottom: 2rem }
.mb-ml { margin-bottom: 2.5rem } .mb-lg { margin-bottom: 4rem }    .mb-1s { margin-bottom: 1rem }
.mb-1h { margin-bottom: 1.5rem } .mb-0h { margin-bottom: .5rem }   .mb-2xl { margin-bottom: 5rem }
.my-md { margin: 2.25rem 0 }     .my-band { margin: 1.5rem 0 2rem }
.mx-auto { margin-left: auto; margin-right: auto }
.text-center { text-align: center }
.measure { max-width: 52ch }     .measure-lg { max-width: 58ch }   .measure-doc { max-width: 820px }
.measure-sm { max-width: 56ch }
.measure-article { max-width: 780px }   /* the article column's width in .post-layout */
.copy { color: var(--body); margin-bottom: 1.75rem }
.copy-md { color: var(--body); margin-bottom: 2rem }
.copy-plain { color: var(--body) }
.hl.hl-med { font-size: var(--fs-hl-med) }
.hl.hl-sm { font-size: var(--fs-hl-sm) }
.hl.hl-xs { font-size: var(--fs-hl-xs) }
.sh.hl-2xl { font-size: var(--2xl) }
.sig { font-family: var(--font-ui); font-size: var(--sm); color: var(--body); line-height: 2 }
.btn-block { width: 100%; justify-content: center; padding: 1.1rem }
.img-frame { width: 100%; display: block; border: var(--border); border-radius: var(--radius) }
.icon-lg { font-size: 1.6rem; opacity: .45 }
.icon-md { font-size: 1rem; opacity: .45 }
.center { justify-content: center }
.bg-off { background: var(--off) }
.link-inherit { color: inherit; text-decoration: underline }
.toc-link { display: block; padding: .85rem 0; text-decoration: none }
.lh-snug { line-height: 1.4 }
.strong-green, .toc-list li a.strong-green { color: var(--green); font-weight: var(--fw-semibold) }
/* legal documents (privacy, terms, accessibility): h2 sections under the banner h1 */
.measure-doc h2 { font-family: var(--font-display); font-size: var(--2xl); font-weight: var(--fw-medium); color: var(--deep); line-height: 1.2; letter-spacing: var(--ls-tight); margin-top: 2.5rem }
.measure-doc h3 { font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: var(--ls-10); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--deep); margin: 1.5rem 0 .6rem }
.measure-doc ul, .measure-doc ol { margin: 0 0 1.75rem 1.25rem; color: var(--body); line-height: var(--lh-list) }
.measure-doc li { margin-bottom: .45rem }
.measure-doc p a, .measure-doc li a { color: var(--green); text-decoration: underline; text-underline-offset: 2px }
.measure-doc .spec-wrap { margin-bottom: 1.75rem }



/* --- generated: grid items must be able to shrink (see build.mjs) --- */
.bcard.featured > *,
.blog-grid > *,
.check-grid > *,
.company-grid > *,
.company-stats > *,
.contact-layout > *,
.exp-item > *,
.faq-layout > *,
.footer-grid > *,
.form-row > *,
.gallery-grid > *,
.home-media-grid > *,
.location-grid > *,
.mission-grid > *,
.pdet-layout > *,
.post-layout > *,
.proj-grid > *,
.res-grid > *,
.sectors-grid > *,
.sectors-intro > *,
.svc-full-grid > *,
.svcs-grid > *,
.svcs-header > *,
.val-grid > *{min-width:0}