/*
Theme Name: Saniservice
Theme URI: https://www.saniservice.com
Author: Saniservice (Francois B. Larsen / Ninad)
Description: Hand-coded custom theme. Design source: Francois mockups. Pixel-faithful; Rank Math owns all SEO output.
Version: 0.5.18
*/


  @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=Archivo:wght@300;400;500;600&display=swap');

  :root {
    --ink:        #16191c;   /* near-black, warm */
    --ink-soft:   #3d4248;
    --paper:      #f4f1ea;   /* warm off-white, the colour of good paper */
    --paper-deep: #ebe6db;
    --line:       #d2ccbf;
    --accent:     #6b4f2e;   /* a single, disciplined bronze */
    --accent-2:   #2c3a33;   /* deep evergreen, used almost never */
    --night:      #211a12;   /* warm espresso — the dark sections */
    --night-text: #b3a78f;
    /* Fixed #nav occupied height: padding 26+26 + logo svg 34 = 86px unscrolled
       (70px when .scrolled). Vertical height is constant across breakpoints
       (only horizontal gutters change on phones). Use the taller value so any
       in-page anchor target clears the bar in both nav states. */
    --nav-height: 86px;
    /* Shared hero type scale — ONE source of truth for every hero (homepage .hero
       AND service/new-page header.ac-hero). Heading capped lower than the masters
       (DELIBERATE deviation, extends the homepage hero deviation) so it's
       comfortable on laptop and not oversized on iPad-landscape. */
    --hero-h1:  clamp(2.2rem, 1.5rem + 2.3vw, 4rem);
    --hero-sub: clamp(1.05rem, 0.95rem + 0.55vw, 1.18rem);
    --hero-em:  1.06em;   /* gold-italic accent, relative to the h1 */
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* Offset every in-page anchor jump so the target clears the fixed #nav
     (shared rule for all anchors site-wide: #what-the-lab-tests, #book, #how,
     #method, #proof, #filter, #index, ...). */
  html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Archivo', -apple-system, sans-serif;
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* subtle paper grain */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

  /* HEADINGS — the engineered dialect: precise, light, tightly set */
  h1, h2, h3, .display {
    font-family: 'Archivo', sans-serif;
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  /* SERIF ACCENT — reserved for single charged words and the manifesto's soul */
  .serif {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.01em;
  }

  .eyebrow {
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* ---------- NAV ---------- */
  #nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 26px 40px;
    transition: background 0.5s ease, padding 0.5s ease, border-color 0.5s ease;
    border-bottom: 1px solid transparent;
  }
  #nav.scrolled {
    background: rgba(244,241,234,0.96);   /* opaque-enough so --ink links stay legible over dark sections */
    backdrop-filter: blur(12px);
    padding: 18px 40px;
    border-bottom: 1px solid var(--line);
  }
  .logo {
    font-family: 'Archivo', sans-serif;
    font-size: 1.45rem; font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--night);
    text-decoration: none;
  }
  .logo span { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; color: var(--accent); letter-spacing: -0.01em; }
  .logo svg { display: block; height: 34px; width: auto; }
  .foot-top .logo svg { height: 40px; }
  /* Logo colour adapts to context (single currentColor SVG): white on the dark .ac-hero un-scrolled nav; dark --night on the scrolled nav, the footer, and the homepage's light hero. */
  #nav:not(.scrolled) .logo { color: var(--paper); }
  body.home #nav:not(.scrolled) .logo,
  body.light-hero #nav:not(.scrolled) .logo { color: var(--night); }

  /* Adaptive nav items — follow the logo's scheme so the BAR's top-level links,
     trigger, chevron (currentColor), hamburger and CTA outline never wash out.
     Un-scrolled over a dark hero (service pages) -> light --paper.
     body.home un-scrolled (light hero) and any scrolled state -> dark.
     SCOPED to `.nav-links > a` (direct bar links only) so these state rules can
     NOT reach into the .mega panel — its contents live on --paper and keep their
     own static dark colours (see "open menu surfaces" below). */
  #nav:not(.scrolled) .nav-links > a,
  #nav:not(.scrolled) .mega-trigger { color: var(--paper); }
  #nav:not(.scrolled) .nav-cta { color: var(--paper) !important; border-color: var(--paper); }
  #nav:not(.scrolled) .nav-toggle span { background: var(--paper); }
  body.home #nav:not(.scrolled) .nav-links > a,
  body.home #nav:not(.scrolled) .mega-trigger,
  body.light-hero #nav:not(.scrolled) .nav-links > a,
  body.light-hero #nav:not(.scrolled) .mega-trigger { color: var(--ink-soft); }
  body.home #nav:not(.scrolled) .nav-cta,
  body.light-hero #nav:not(.scrolled) .nav-cta { color: var(--ink) !important; border-color: var(--ink); }
  body.home #nav:not(.scrolled) .nav-toggle span,
  body.light-hero #nav:not(.scrolled) .nav-toggle span { background: var(--ink); }
  /* mobile panel open: top-level links sit on the light --paper panel -> force dark */
  body.nav-open #nav .nav-links > a,
  body.nav-open #nav .mega-trigger { color: var(--ink-soft); }
  body.nav-open #nav .nav-cta { color: var(--ink) !important; border-color: var(--ink); }
  body.nav-open #nav .nav-toggle span { background: var(--ink); }
  body.nav-open #nav .logo { color: var(--night); }  /* legible on the open --paper panel (service pages: un-scrolled logo is --paper) */

  /* ---- Opened menu surfaces: STATIC ink, decoupled from nav scroll/hero state ----
     The .mega panel and the mobile nav panel never change background (always
     --paper), so their text is ALWAYS dark and must never follow the bar's
     adaptive colour. Anchored on the containers; item titles, descriptions,
     foot link and the close X keep their designed dark tokens (which now win,
     since the adaptive rules above are scoped to `.nav-links > a`). */
  .mega { color: var(--ink); }
  body.nav-open #nav .nav-links { color: var(--ink); }
  .nav-links { display: flex; gap: 38px; align-items: center; }
  .nav-links a {
    font-size: 0.82rem; font-weight: 400; letter-spacing: 0.04em;
    color: var(--ink-soft); text-decoration: none;
    transition: color 0.3s;
  }
  .nav-links a:hover { color: var(--accent); }
  .nav-solo-link { display: none; }  /* JS-built mobile-only Stewardship link (image-8 layout); inert on desktop */
  .nav-cta {
    font-size: 0.78rem !important; letter-spacing: 0.1em !important;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    padding: 11px 22px;
    color: var(--ink) !important;
    transition: background 0.35s ease, color 0.35s ease !important;
  }
  .nav-cta:hover { background: var(--ink); color: var(--paper) !important; }
  /* The context rules above set the resting CTA colour with id-level !important
     (e.g. body.home #nav:not(.scrolled) .nav-cta). The hover must out-specify them
     in every state, or the bg goes dark while the text stays dark (invisible hover).
     Consistent dark-fill + light-text shift, matching the other primary buttons. */
  #nav:not(.scrolled) .nav-cta:hover,
  body.home #nav:not(.scrolled) .nav-cta:hover,
  body.nav-open #nav .nav-cta:hover {
    background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important;
  }
  .nav-cta:active { transform: translateY(1px); }
  @media (max-width: 720px){ .nav-links a:not(.nav-cta){ display:none; } }

  /* ---------- HERO / MANIFESTO ---------- */
  .hero {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 160px 0 100px;
    position: relative;
  }
  .hero .eyebrow {
    opacity: 0;
    animation: rise 1.1s cubic-bezier(.2,.7,.3,1) 0.2s forwards;
  }
  .hero h1 {
    font-size: var(--hero-h1);   /* shared hero scale (see :root) */
    margin: 30px 0 0;
    max-width: 16ch;
  }
  .hero h1 .l { display: block; opacity: 0; animation: rise 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
  .hero h1 .l:nth-child(1){ animation-delay: .35s; }
  .hero h1 .l:nth-child(2){ animation-delay: .5s; }
  .hero h1 .l:nth-child(3){ animation-delay: .65s; }
  .hero h1 em {
    font-family: 'Fraunces', serif;
    font-style: italic; font-weight: 300;
    color: var(--accent);
    font-size: var(--hero-em);
  }
  .hero-sub {
    margin-top: 42px;
    max-width: 46ch;
    font-size: var(--hero-sub);
    color: var(--ink-soft);
    opacity: 0;
    animation: rise 1.1s cubic-bezier(.2,.7,.3,1) 0.85s forwards;
  }
  .hero-meta {
    margin-top: 64px;
    display: flex; gap: 48px; flex-wrap: wrap;
    opacity: 0;
    animation: rise 1.1s ease 1.05s forwards;
  }
  .hero-meta div { border-left: 1px solid var(--line); padding-left: 18px; }
  .hero-meta .n { font-family:'Archivo',sans-serif; font-weight: 400; font-size: 1.55rem; letter-spacing: -0.02em; color: var(--ink); }
  .hero-meta .t { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

  .scroll-hint {
    position: absolute; bottom: 40px; left: 40px;
    font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-soft);
    display: flex; align-items: center; gap: 12px;
    opacity: 0; animation: fade 1s ease 1.6s forwards;
  }
  .scroll-hint::before { content:""; width: 40px; height: 1px; background: var(--accent); animation: line 2s ease-in-out infinite; }

  @keyframes rise { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform:none;} }
  @keyframes fade { to { opacity: 1; } }
  @keyframes line { 0%,100%{ transform: scaleX(1); opacity:1;} 50%{ transform: scaleX(0.4); opacity:0.4;} }

  /* ---------- THE REFUSAL (dark manifesto block) ---------- */
  .refusal {
    background: var(--night);
    color: var(--night-text);
    padding: 150px 0;
    margin-top: 40px;
  }
  .refusal .eyebrow { color: #c79a5e; }
  .refusal .big {
    font-family:'Archivo',sans-serif; font-weight:300;
    font-size: clamp(1.7rem, 3.4vw, 2.9rem);
    line-height: 1.34;
    letter-spacing: -0.02em;
    max-width: 24ch;
    margin: 36px 0;
    color: #efe4d2;
  }
  .refusal .big em {
    font-family:'Fraunces',serif; font-style: italic; font-weight: 300;
    color: #d9b783; font-size: 1.08em;
  }
  .refusal p { max-width: 52ch; color: #a89c84; font-size: 1.08rem; }
  .refusal .rule { width: 60px; height: 1px; background:#4a3d2a; margin-top: 48px; }

  /* ---------- THREE DOMAINS ---------- */
  .domains { padding: 150px 0 60px; }
  .section-head { max-width: 40ch; margin-bottom: 80px; }
  .section-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 22px 0; }
  .section-head p { color: var(--ink-soft); font-size: 1.1rem; max-width: 50ch; }

  .domain {
    display: grid; grid-template-columns: 0.8fr 1.2fr;
    gap: 60px; align-items: start;
    padding: 64px 0;
    border-top: 1px solid var(--line);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .domain:last-child { border-bottom: 1px solid var(--line); }
  .domain-index {
    font-family:'Fraunces',serif; font-style: italic;
    font-size: 1.1rem; color: var(--accent);
    text-decoration: none;
  }
  .domain h3 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 8px 0 0; }
  .domain h3 .q { font-family:'Fraunces',serif; color: var(--ink-soft); font-style: italic; font-weight: 300; }
  .domain-body p { color: var(--ink-soft); max-width: 48ch; margin-bottom: 26px; font-size: 1.05rem; }
  .domain-lines { display: flex; flex-direction: column; }
  .domain-lines a {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    color: var(--ink); text-decoration: none;
    transition: padding 0.4s ease, color 0.4s ease;
  }
  .domain-lines a:hover { padding-left: 14px; color: var(--accent); }
  .domain-lines a .name { font-size: 1.05rem; font-weight: 400; }
  .domain-lines a .arrow { font-family:'Fraunces',serif; opacity: 0.4; transition: opacity .4s; }
  .domain-lines a:hover .arrow { opacity: 1; }
  @media (max-width: 820px){ .domain{ grid-template-columns: 1fr; gap: 28px; } }

  /* ---------- PHOTOGRAPHY BAND ---------- */
  .photoband {
    position: relative;
    min-height: 78vh;
    display: flex; align-items: flex-end;
    overflow: hidden;
    margin-top: 60px;
  }
  .photoband img.bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 28%;
  }
  .photoband .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(33,26,18,.85) 0%, rgba(33,26,18,.52) 40%, rgba(33,26,18,.05) 72%);
  }
  .photoband .pb-content { position: relative; padding: 0 0 80px; max-width: 30ch; }
  .photoband .eyebrow { color: #d9b783; }
  .photoband h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 18px 0 16px; }
  .photoband h2 em { font-family:'Fraunces',serif; font-style: italic; font-weight: 300; color: #e8c79a; font-size: 1.06em; }
  .photoband p { color: rgba(255,255,255,.84); font-size: 1.1rem; max-width: 34ch; }
  .proof-photo { width: 100%; display:block; box-shadow: 0 30px 60px -34px rgba(20,17,12,0.4); }


  /* ---------- LAB BAND (real photo split) ---------- */
  .labband { display:grid; grid-template-columns: 1.25fr .75fr; min-height: 560px; }
  .labband .lb-img { position:relative; overflow:hidden; }
  .labband .lb-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  /* warm wash tying the lab photo to the brown .lb-txt panel: reuses --night (the panel bg), light so the microscope still reads through */
  .labband .lb-img::after { content:""; position:absolute; inset:0; background:var(--night); opacity:.35; pointer-events:none; }
  .labband .lb-txt { background:var(--night); display:flex; flex-direction:column; justify-content:center; padding:70px 56px; }
  .labband .lb-txt .eyebrow { color:#c79a5e; }
  .labband .lb-txt h2 { color:#efe4d2; font-size:clamp(1.7rem,3vw,2.6rem); margin:18px 0; }
  .labband .lb-txt h2 em { font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:#d9b783; }
  .labband .lb-txt p { color:#a89c84; max-width:40ch; font-size:1.05rem; }
  @media(max-width:780px){ .labband{ grid-template-columns:1fr; } .labband .lb-img{ min-height:340px; } }

  /* ---------- THE PROOF (science) ---------- */
  .proof {
    background: var(--paper-deep);
    padding: 150px 0;
    margin-top: 60px;
  }
  .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .proof-text h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); margin: 22px 0 30px; }
  .proof-text p { color: var(--ink-soft); max-width: 46ch; margin-bottom: 22px; font-size: 1.08rem; }
  .lab-card {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 0;
    box-shadow: 0 30px 60px -30px rgba(20,17,12,0.25);
  }
  .lab-card .head {
    padding: 22px 28px; border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
  }
  .lab-card .head .t { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
  .lab-card .head .id { font-family: 'Archivo'; font-size: 0.72rem; color: var(--accent); }
  .lab-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 28px; border-bottom: 1px solid var(--line);
  }
  .lab-row:last-child { border-bottom: none; }
  .lab-row .label { font-size: 0.92rem; color: var(--ink-soft); }
  .lab-row .val { font-family:'Archivo',sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: -0.02em; }
  .lab-row .val.good { color: var(--accent-2); }
  .oli {
    padding: 28px; background: var(--night); color: var(--night-text);
    display:flex; align-items:center; justify-content:space-between;
  }
  .oli .label { font-size: 0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:#c79a5e; }
  .oli .num { font-family:'Archivo',sans-serif; font-weight: 500; font-size: 3.4rem; color:#efe4d2; line-height:1; letter-spacing: -0.04em; }
  .oli .num small { font-size: 1rem; color:#a89c84; }
  /* Onward link under the OLI result card. Sits on .lab-card paper (after the dark
     .oli band, not inside it), so --accent on --paper reads ~6.7:1 (AA). Existing
     tokens only, no new hex. Mirrors the subtle uppercase accent-link pattern (.mega-foot a). */
  .oli-more { display:inline-block; margin:16px 28px 22px; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); text-decoration:none; }
  .oli-more:hover { color:var(--ink); }
  @media (max-width: 820px){ .proof-grid{ grid-template-columns: 1fr; gap: 50px; } }

  /* ---------- CREDENTIALS STRIP ---------- */
  .creds { padding: 110px 0; text-align:center; }
  .creds .eyebrow { display:block; margin-bottom: 44px; }
  .creds-row { display:flex; justify-content:center; flex-wrap:wrap; gap: 0; }
  .creds-row div {
    padding: 14px 44px;
    border-right: 1px solid var(--line);
    font-family:'Archivo',sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: 0.02em;
  }
  .creds-row div:last-child { border-right: none; }
  .creds-row div span { display:block; font-family:'Archivo'; font-size: 0.7rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-soft); margin-top: 4px; }
  @media (max-width: 720px){ .creds-row div{ border-right:none; border-bottom:1px solid var(--line); padding: 18px; } }

  /* ---------- THE FILTER (price/positioning) ---------- */
  .filter {
    background: var(--night); color: var(--night-text);
    padding: 150px 0;
  }
  .filter .wrap { max-width: 880px; text-align: center; }
  .filter .eyebrow { color:#c79a5e; }
  .filter h2 {
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    color:#efe4d2; margin: 30px auto;
    max-width: 20ch; line-height: 1.18;
  }
  .filter h2 em { font-family:'Fraunces',serif; font-style: italic; font-weight: 300; color:#d9b783; font-size: 1.06em; }
  .filter p { max-width: 50ch; margin: 0 auto 40px; color:#a89c84; font-size:1.12rem; }
  .filter .cta {
    display:inline-block;
    font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--night); background:#d9b783;
    padding: 18px 40px;
    text-decoration:none;
    transition: background 0.4s ease, transform 0.4s ease;
  }
  .filter .cta:hover { background:#efe4d2; transform: translateY(-2px); }
  .filter .cta:active { transform: translateY(0); }

  /* ---------- Homepage CTA buttons: primary + ghost (hero + filter foot) ----------
     .btn-primary/.btn-ghost are service-page classes (not loaded on the homepage),
     so define the homepage's own pair from theme tokens. Primary matches .filter .cta. */
  .cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
  .hero .cta-row { margin-top: 42px; }
  .filter .cta-row { justify-content: center; }
  /* Primary + ghost buttons: ONE source for the homepage (.cta/.cta-ghost) AND the
     service/new pages (.btn-primary/.btn-ghost, whose per-sheet defs were removed),
     so hero + final-CTA buttons are identical across every page. */
  .cta, .btn-primary {
    display: inline-block;
    font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--night); background: #d9b783;
    padding: 18px 40px; text-decoration: none;
    transition: background 0.4s ease, transform 0.4s ease;
  }
  .cta:hover, .btn-primary:hover { background: #efe4d2; transform: translateY(-2px); }
  .cta:active, .btn-primary:active { transform: translateY(0); }
  .cta-ghost, .btn-ghost {
    display: inline-block;
    font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent); background: transparent;
    border: 1px solid var(--accent);
    padding: 17px 39px;   /* 1px less than the primary to offset the border: equal box */
    text-decoration: none;
    transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
  }
  .cta-ghost:hover, .btn-ghost:hover { background: var(--accent); color: var(--paper); transform: translateY(-2px); }
  .cta-ghost:active, .btn-ghost:active { transform: translateY(0); }
  /* On the FLAT --night sections (homepage filter foot, service final) the ghost
     must read on dark: gold, not the dark accent. */
  .filter .cta-ghost, .filter .btn-ghost,
  .final .cta-ghost, .final .btn-ghost { color: #d9b783; border-color: #d9b783; }
  .filter .cta-ghost:hover, .filter .btn-ghost:hover,
  .final .cta-ghost:hover, .final .btn-ghost:hover { background: #d9b783; color: var(--night); }
  /* The service hero sits on a PHOTOGRAPH (.ac-hero img.bg + scrim), not flat --night —
     gold reads low-contrast there. Per the updated/ master (saniservice-ac-cleaning.html:
     .btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff} / :hover{background:
     rgba(255,255,255,.1);border-color:#fff}) the hero ghost is WHITE. Partial-revert of
     c8e9f6d, which over-grouped .ac-hero with .filter/.final. */
  .ac-hero .cta-ghost, .ac-hero .btn-ghost,
  .contact-hero .cta-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
  .ac-hero .cta-ghost:hover, .ac-hero .btn-ghost:hover,
  .contact-hero .cta-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
  /* Final-CTA primary goes full-width on phones (matches the homepage .filter CTA,
     which is full-width via .cta-row). The service .final button is a bare anchor. */
  @media (max-width: 600px){ .final .cta, .final .btn-primary { display: block; width: 100%; text-align: center; } }
  /* Final-CTA section TYPE + SPACING unified to the homepage .filter (each page keeps
     its own palette colours + heading max-width/line-length). section.final (0,1,1)
     out-specifies the per-page .final / .final h2/p (0,1,0|0,1,1) so no per-sheet edit.
     The homepage .filter rules above are untouched — these only lift the service/new
     .final to the same scale + rhythm:
       section padding  120px -> 150px 0   (vertical padding)
       h2 cap 3.4 -> 3.6rem, margin 22 -> 30 (eyebrow->h2 + h2->p gaps), em 1 -> 1.06em
       p 1.12rem, margin-bottom 36 -> 40px  (paragraph->button gap) */
  section.final { padding: 150px 0; }
  section.final h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); margin: 30px auto; line-height: 1.18; }
  section.final h2 em { font-size: 1.06em; }
  section.final p { font-size: 1.12rem; margin: 0 auto 40px; }

  /* ---------- MEGA MENU ---------- */
  .has-mega { position: static; }
  .mega-trigger { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 0.82rem; font-weight: 400; letter-spacing: 0.04em; }  /* match .nav-links a (was inheriting 1rem -> looked larger) */
  .mega-trigger .chev { width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .35s ease; opacity:.7; }
  /* chevron flip is tied to the SAME open conditions as the mega (hover gated
     below + #nav.mega-open) so it resets on every close path — no stuck-up
     chevron from a sticky touch :hover after closing via the X. */

  .mega {
    position: fixed; left: 0; right: 0; top: 0;
    background: var(--paper);   /* opaque — links never sit on bare page content */
    border-bottom: 1px solid var(--line);
    box-shadow: 0 36px 70px -28px rgba(20,17,12,.5);
    padding: 96px 0 40px;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    /* exit: quick, so dismissing the panel feels immediate */
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 90;
  }
  /* enter: slightly longer, ease-out — grows in calmly.
     Gated to true hover/fine-pointer devices so touch (iPad) never sticky-opens
     it; on touch the JS click-toggle (#nav.mega-open) is the only open path. */
  @media (hover:hover) and (pointer:fine){
    .has-mega:hover .mega, .mega:hover {
      opacity: 1; visibility: visible; transform: none;
      transition: opacity .35s cubic-bezier(.2,.7,.3,1), transform .35s cubic-bezier(.2,.7,.3,1), visibility .35s;
    }
    .has-mega:hover .mega-trigger .chev{ transform: rotate(-135deg) translateY(-2px); }
    /* the close X must show on HOVER-open too (not only click-open #nav.mega-open),
       so the open desktop mega always has a visible close affordance. */
    .has-mega:hover .mega-close, .mega:hover .mega-close{ display:block; }
    /* clicking the X adds .has-mega.shut (JS); force the mega closed even while the
       cursor is still over it (defeats the :hover-open rule above). Cleared on
       mouseleave of .has-mega so hover-open works again. */
    .has-mega.shut .mega, .has-mega.shut .mega:hover{
      opacity:0 !important; visibility:hidden !important; transform:translateY(-12px) !important;
    }
  }
  .mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .mega-col { display: flex; flex-direction: column; }
  .mega-col .col-head { display:flex; align-items:baseline; gap:8px; margin-bottom: 4px; }
  .mega-col .idx { font-family:'Fraunces',serif; font-style:italic; font-size:.85rem; color:var(--accent); }
  .mega-col h4 { font-family:'Archivo',sans-serif; font-weight:500; font-size:1.12rem; letter-spacing:-.01em; color:var(--ink); margin:0; }
  /* division-hub label links: inherit the h4's font/size/weight/spacing (so .nav-links a does
     not shrink them; they read identical to the SMART label) + the .svc hover (ink -> accent) */
  .mega-col h4 a { color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; transition: color .3s; }
  .mega-col h4 a:hover { color: var(--accent); }
  .mega-col .tag { font-family:'Fraunces',serif; font-style:italic; font-size:.84rem; color:var(--ink-soft); margin-bottom:14px; line-height:1.4; }
  .mega-col a.svc { display:block; padding:8px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:.9rem; transition: color .3s, padding-left .3s; }
  .mega-col a.svc:hover { color:var(--accent); padding-left:6px; }
  .mega-col a.svc .s-sub { display:block; font-size:.71rem; color:var(--ink-soft); margin-top:1px; }
  /* SMART's honest "Engineering" tag: keeps the 4th column distinct without setting it apart */
  .mega-col .kind { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); padding:2px 7px; margin-left:auto; align-self:center; }
  /* mini shelf: the narrow dropdown body for Stewardship, The Lab and About, inside the full-width .mega surface */
  .mega-mini { max-width: 440px; }
  .mega-mini .mini-head { font-family:'Fraunces',serif; font-style:italic; color:var(--ink-soft); font-size:.92rem; margin-bottom:12px; }
  .mega-mini a.svc { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:.95rem; transition:color .3s, padding-left .3s; }
  .mega-mini a.svc:hover { color:var(--accent); padding-left:6px; }
  .mega-mini a.svc .r { font-size:.71rem; color:var(--ink-soft); white-space:nowrap; }
  .mega-foot { margin-top: 30px; padding-top: 20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
  .mega-foot .note { font-family:'Fraunces',serif; font-style:italic; color:var(--ink-soft); font-size:.96rem; }
  .mega-foot .note b { font-style:italic; font-weight:500; color:var(--accent); }
  .mega-foot a { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); text-decoration:none; white-space:nowrap; }
  @media (max-width: 1100px){ .mega-grid{ grid-template-columns: repeat(2,1fr);} .mega{ overflow-y:auto; max-height:100vh; } }

  /* ---- Tablet-portrait band: keep the desktop horizontal nav, reclaim row width ----
     Above the 860px hamburger breakpoint but below full desktop, the horizontal nav shares a narrow
     row with the logo + CTA and was colliding (the Air/Water/Surfaces trigger wrapped into the logo,
     its chevron detaching above the label). Reclaim width with the least-disruptive levers: tighter
     side padding, smaller inter-item gap, one-line trigger labels (so the chevron stays inline), and
     trimmed CTA padding (the CTA may still wrap to two centered lines at the narrow end of the band).
     No font shrink needed. <=860px keeps the hamburger (unchanged); >1100px is the unchanged full
     desktop. Real-world hit: iPad Pro 12.9" portrait = 1024px; smaller iPads (<=834px) are already
     on the hamburger, so the desktop nav never renders at 768-834. */
  @media (min-width:861px) and (max-width:1100px){
    #nav, #nav.scrolled{ padding-left:24px; padding-right:24px; }   /* 40 -> 24 each side, both scroll states */
    .nav-links{ gap:16px; }                                          /* 38 -> 16 */
    .nav-links > a:not(.nav-cta),
    .mega-trigger{ white-space:nowrap; }                             /* labels stay one line; chevron inline */
    .mega-trigger{ gap:5px; }                                        /* 7 -> 5 (trigger label-to-chevron) */
    .nav-cta{ padding:11px 16px; text-align:center; }                /* 22 -> 16 horizontal; centered if it wraps */
  }
  /* (removed: @media(max-width:720px){.mega{display:none}} — it hid the service
     columns on phones. The ≤860 block below renders the full set stacked.) */

  /* ---------- CAPABILITY BAND (Sciences + SMART) ---------- */
  .capability { padding: 30px 0 110px; }
  .cap-head { max-width: 52ch; margin-bottom: 44px; }
  .cap-head .eyebrow { color: var(--accent); }
  .cap-head p { color: var(--ink-soft); font-size: 1.05rem; margin-top: 14px; }
  .cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .cap-card { border: 1px solid var(--line); padding: 36px 38px; background: var(--paper-deep); display:flex; flex-direction:column; }
  .cap-card .idx { font-family:'Fraunces',serif; font-style:italic; color:var(--accent); font-size:.9rem; }
  .cap-card h3 { font-size: 1.5rem; margin: 8px 0 14px; }
  .cap-card p { color: var(--ink-soft); font-size:.98rem; max-width:42ch; }
  .cap-card .role { margin-top:18px; font-family:'Archivo'; font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
  @media(max-width:760px){ .cap-grid{ grid-template-columns:1fr; } }

  /* ---------- MEMBERSHIP (flagship summit) ---------- */
  .member { background: var(--night); color: var(--night-text); padding: 130px 0; }
  .member .eyebrow { color:#c79a5e; }
  .member .m-head { max-width: 820px; margin-bottom: 56px; }
  .member h2 { color:#efe4d2; font-size: clamp(2rem,4.4vw,3.4rem); margin: 22px 0; }
  .member h2 em { font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:#d9b783; }
  .member .lead { color:#a89c84; font-size:1.15rem; max-width:62ch; }
  .member .ladder { display:grid; grid-template-columns: 1fr 1fr; gap:1px; background:#3a2f20; border:1px solid #3a2f20; margin-bottom: 44px; }
  .rung { background: var(--night); padding: 34px 30px; }
  .rung .step { font-family:'Fraunces',serif; font-style:italic; color:#c79a5e; font-size:.85rem; }
  .rung h4 { color:#efe4d2; font-family:'Archivo'; font-weight:500; font-size:1.2rem; margin:10px 0 12px; letter-spacing:-.01em; }
  .rung p { color:#a89c84; font-size:.92rem; line-height:1.6; }
  .rung.summit { background: linear-gradient(180deg,#2a2014,#211a12); }
  .rung.summit h4 { color:#e8c79a; }
  .member-promise { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; padding-top:36px; border-top:1px solid #3a2f20; }
  .member-promise .pledge { font-family:'Fraunces',serif; font-style:italic; font-size:1.25rem; color:#efe4d2; max-width:34ch; }
  .member-promise a { display:inline-block; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--night); background:#c9a673; padding:16px 34px; text-decoration:none; transition:background .4s, transform .4s; white-space:nowrap; }
  .member-promise a:hover { background:#efe4d2; transform:translateY(-2px); }
  .member-promise a:active { transform:translateY(0); }
  @media(max-width:760px){ .member .ladder{ grid-template-columns:1fr; } }

  /* ---------- FOOTER ---------- */
  footer { padding: 90px 0 50px; }
  .foot-top { display:flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
  .foot-top .logo { font-size: 2rem; }
  .foot-line { font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; color: var(--ink-soft); max-width: 24ch; }
  .foot-bottom { display:flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-top: 30px; font-size: 0.8rem; color: var(--ink-soft); }
  .foot-bottom a { color: var(--ink-soft); text-decoration: none; }

  /* reveal on scroll */
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(.2,.7,.3,1), transform 1s cubic-bezier(.2,.7,.3,1); }
  .reveal.in { opacity: 1; transform: none; }

  /* ============================================================
     NAV TOGGLE — desktop explicit-close + working mobile menu
     (punch-list #2 mobile menu, #3 cramped phone header)
     ============================================================ */

  /* hamburger — hidden on desktop, shown ≤860px */
  .nav-toggle{
    display:none;
    width:44px; height:44px; padding:11px;
    background:none; border:0; cursor:pointer;
    flex-direction:column; justify-content:center; gap:5px;
    z-index:210;
  }
  .nav-toggle span{
    display:block; width:100%; height:1px;
    background:var(--ink); border-radius:2px;
    transition:transform .35s ease, opacity .2s ease;
  }

  /* close "X" inside the mega — drawn from two strokes (no text glyph) so the
     weight matches the other thinned icons; currentColor, ~1.5px. */
  .mega-close{
    display:none;
    position:absolute; top:24px; right:40px;
    width:40px; height:40px;
    background:none; border:0; padding:0; cursor:pointer;
    color:var(--ink);   /* --ink on the --paper mega = ~15.6:1, consistent with the mobile X */
    transition:color .3s ease; z-index:5;
  }
  .mega-close span{
    position:absolute; top:50%; left:50%;
    width:22px; height:1.5px; background:currentColor; border-radius:2px;
  }
  .mega-close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
  .mega-close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
  .mega-close:hover{ color:var(--accent); }

  /* Click/tap-open — the ONLY open path on touch (iPad), and an explicit
     open on hover devices too. Raise the panel ABOVE the nav bar (z>100) so the
     close-X isn't intercepted by the nav/CTA painted beneath it, and drop the
     nav's backdrop-filter so the fixed mega isn't trapped in the scrolled nav's
     containing block (keeps it full-width at the top — scrolled-state safe). */
  /* ---- Unified "menu surface open" state ----
     ANY open menu — the phone panel (body.nav-open) OR the desktop mega
     (.mega-open click, or hover via :has) — strips the nav of EVERY property
     that would make it a containing block for its fixed children
     (backdrop-filter, filter, transform). So the fixed panel always escapes to
     the viewport at full size instead of being clipped to the nav band, at any
     scroll position. Each open surface is itself opaque --paper (mega bg above;
     phone panel bg below) and full-viewport. The :has() arm is a SEPARATE rule
     so a browser without :has can't invalidate the core (nav-open/mega-open) one. */
  body.nav-open #nav,
  #nav.mega-open{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    filter:none !important; transform:none !important;
  }
  #nav:has(.has-mega:hover){
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    filter:none !important; transform:none !important;
  }
  .has-mega.tap-open .mega{ opacity:1; visibility:visible; transform:none; z-index:110;
    transition: opacity .35s cubic-bezier(.2,.7,.3,1), transform .35s cubic-bezier(.2,.7,.3,1), visibility .35s; }
  .has-mega.tap-open .mega-close{ display:block; }
  .has-mega.tap-open .mega-trigger .chev{ transform: rotate(-135deg) translateY(-2px); }

  /* ---------- MOBILE NAV (≤860px) ---------- */
  @media (max-width:860px){
    .nav-toggle{ display:flex; }

    /* the link cluster becomes a FULL-SCREEN overlay panel (slides in from the
       right, covers everything beneath; opaque --paper). */
    #nav .nav-links{
      position:fixed; inset:0; width:100vw; height:100dvh;
      background:var(--paper);
      flex-direction:column; align-items:stretch; justify-content:flex-start;
      gap:0; padding:96px 30px 48px;
      transform:translateX(100%);
      transition:transform .45s cubic-bezier(.2,.7,.3,1);
      overflow-y:auto; z-index:200;
    }
    body.nav-open #nav .nav-links{ transform:none; }
    body.nav-open{ overflow:hidden; }

    /* The scrolled nav uses backdrop-filter, which makes #nav a containing block
       and traps the fixed panel to the nav band (narrow strip; and re-traps it
       mid-close once body.nav-open is removed). Drop it at mobile so the panel is
       always viewport-fixed and animates full-screen both ways; keep the bar opaque. */
    #nav.scrolled{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--paper); }

    /* reveal the links inside the panel (overrides the desktop hide) */
    #nav .nav-links a:not(.nav-cta){
      display:block; font-size:1rem; padding:15px 0;
      border-bottom:1px solid var(--line); letter-spacing:.02em;
    }
    #nav .nav-cta{ margin-top:26px; text-align:center; }

    /* mega trigger becomes a static section label; services stack open */
    .has-mega{ width:100%; }
    .mega-trigger{
      width:100%; justify-content:space-between; cursor:default;
      padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem;
    }
    .mega-trigger .chev{ display:none; }

    .mega{
      position:static; opacity:1; visibility:visible; transform:none;
      display:block; background:transparent; box-shadow:none;
      border:0; padding:8px 0 0; max-height:none; overflow:visible;
    }
    .mega .wrap{ padding:0; }
    .mega-grid{ grid-template-columns:1fr; gap:0; }
    /* UNIFORM HAIRLINES: exactly one 1px var(--line) per seam. Columns no longer carry their own
       border-bottom (the previous column's last service link supplies the boundary line), and
       service links drop their desktop border-top so two adjacent links don't stack 1px+1px into a
       2px seam. Every remaining divider is a single border-bottom (from line ~676 / .mega-trigger). */
    .mega-col{ padding:18px 0; border-bottom:0; }
    .mega-col a.svc, .mega-mini a.svc{ border-top:0; }
    /* phone tap targets + readable type for the stacked service list */
    .mega-col h4{ font-size:1.1rem; }
    /* Eyebrow hub links (Air/Water/Surfaces): the global mobile a-reset (~line 676) gives them
       display:block + 15px padding + a narrow border-bottom that SMART's plain <h4> never gets,
       which drew a stray part-width line under the eyebrow AND made those three eyebrows taller than
       SMART's. Strip it so all four eyebrows sit tight, directly above their tagline, identical
       rhythm. ID-bearing to beat ~line 676 (specificity 1,2,1). */
    #nav .nav-links .mega-col h4 a{ display:inline; padding:0; border-bottom:0; }
    .mega-col .tag{ font-size:.78rem; margin-bottom:10px; }
    .mega-col a.svc{ padding:11px 0; font-size:.98rem; }
    .mega-col a.svc .s-sub{ font-size:.76rem; }
    /* SMART (last) column closes with the 1px hairline under its last link (Maintenance): the same
       border-bottom every column's last link gets from line ~676, so it closes like the others. The
       line-free 2-line spacer stays BELOW it (.mega-foot border-top:0 + its margin/padding), so it
       reads hairline, then spacer, then note (one line, no double-seam). No override needed here;
       Maintenance keeps the line ~676 border-bottom. */

    /* --- hybrid mega-menu: accordions + uniform hairlines (mobile only) --- */
    /* Uniform 1px hairlines (the per-trigger / per-column / per-link border-bottoms) do all the
       separating: no heavier between-section rule, and nothing above the first (Air/Water/
       Surfaces) row. */
    /* Multi-link minis (The Lab, About) are tap-to-expand accordions: collapsed by default; the
       header toggles. Child links stay in the served HTML, so they remain crawlable + reachable;
       with JS off nothing collapses (everything stays open). The header is a pure expander (these
       sections have no landing page of their own). */
    .has-mega.nav-acc > .mega-trigger{ cursor:pointer; }
    .has-mega.nav-acc > .mega-trigger::after{ content:'+'; margin-left:auto; color:var(--accent); font-size:1.3rem; font-weight:300; line-height:1; }
    .has-mega.nav-acc.expanded > .mega-trigger::after{ content:'\2013'; }
    /* smooth expand/collapse: longer + ease-in-out for a glide (not a snap). JS sets the exact open
       height (scrollHeight) inline so the motion runs the full duration with no early stop/clip; the
       .expanded max-height below is a no-JS-toggle fallback (the inline value wins when JS runs).
       no-JS = .mega stays at its open default (the .nav-acc class is never added). */
    .has-mega.nav-acc > .mega{ max-height:0; overflow:hidden; transition:max-height .55s ease-in-out; }
    .has-mega.nav-acc.expanded > .mega{ max-height:600px; }
    /* The Lab + About expanded children only: step the link TITLE down 1px so it reads as a
       sub-item. The title font-size resolves to 1rem from the ID-bearing rule #nav .nav-links
       a:not(.nav-cta) (~line 676, specificity 1,2,1), NOT from .mega-mini a.svc's .95rem (0,2,1,
       which loses to that ID); the prior plain-class override (0,4,1) also lost to ~676 and never
       landed. This selector is ID-bearing (1,5,1) so it beats ~676, scoped to .nav-acc .mega-mini
       so the always-open .mega-col columns and Stewardship (.nav-solo) are excluded. The inline
       description (.r) keeps its own .71rem, untouched. */
    #nav .nav-links .has-mega.nav-acc .mega-mini a.svc{ font-size:calc(1rem - 1px); }
    /* Single-link mini (Stewardship): show the JS-built image-8 link (section name + its italic
       descriptor wrapped in one /membership/ link, name shown once); hide the original trigger +
       dropdown. The original /membership/ link stays in the DOM (display:none) for crawlers. */
    /* Spacing before Stewardship: reuse the footer note's mobile spacer construction exactly
       (margin-top:18px + padding-top:20px) so Stewardship sits the same ~2-line, line-free gap below
       the SMART footer note as the note sits below the services. Draws no line (the note above has
       no border; the solo link carries only its border-bottom). */
    .has-mega.nav-solo{ margin-top:18px; padding-top:20px; }
    .has-mega.nav-solo > .mega-trigger,
    .has-mega.nav-solo > .mega{ display:none; }
    .has-mega.nav-solo > .nav-solo-link{ display:block; padding:15px 0; text-decoration:none; }
    .has-mega.nav-solo .nsl-ttl{ display:block; font-size:1rem; color:var(--ink-soft); letter-spacing:.02em; }
    /* font-weight:300 matches the footer note's resolved weight (body is 300); .nsl-desc was 400 via
       .nav-links a, so it read heavier than the note. Italic / color / size / link wrap unchanged. */
    .has-mega.nav-solo .nsl-desc{ display:block; font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:var(--ink-soft); font-size:.9rem; line-height:1.45; margin-top:6px; }
    /* mobile foot: drop the desktop border-top so the note has no line above it (line-free spacer,
       matched before Stewardship); keep its margin-top + padding-top spacing. */
    .mega-foot{ flex-direction:column; align-items:flex-start; gap:10px; margin-top:18px; border-top:0; }
    /* dedup: the mega-foot "Request an inspection" link duplicates the .nav-cta
       button in the stacked phone panel. Suppress it here (keep the .note); the
       primary CTA button is the single request link in the open phone menu. */
    /* dedup: the mega-foot "Request an inspection" link duplicates the .nav-cta
       button in the stacked phone panel. The previous plain `.mega-foot a`
       (0,2,0) was out-specified by `#nav .nav-links a:not(.nav-cta){display:block}`
       (1,2,1, line ~614), so it stayed visible. Match that specificity and add
       !important so it actually hides. Keeps the "Three domains..." tagline and
       the bottom .nav-cta button. */
    #nav .nav-links .mega-foot a{ display:none !important; }
    .mega-close{ display:none !important; }  /* mobile closes via the hamburger-X */

    /* hamburger morphs to an X when the panel is open */
    body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
    body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
    body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  }

  /* ---------- HERO + STATS share one viewport (service pages) ---------- */
  .hero-unit{ display:flex; flex-direction:column; min-height:100vh; }
  .hero-unit > .ac-hero{ flex:1 1 auto; min-height:0; }   /* fills leftover space above the stats */
  .hero-unit > .stats{ flex:0 0 auto; }                   /* sits at the bottom of the same screen */

  /* (phone-panel backdrop/transform escape is now handled by the unified
     "menu surface open" rule near the mega section above.) */

  /* ---------- FAQ component (homepage company FAQ + service pages) ----------
     Native details/summary, zero JS; answers always in served HTML.
     Identical to the per-page sheets' .faq block, promoted to global so the
     homepage (which loads only style.css) renders it too. Uses global tokens. */
  .faq{padding:120px 0;border-top:1px solid var(--line);}
  .faq .eyebrow{color:var(--accent);}
  .faq h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:18px 0;max-width:24ch;}
  .faq h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .faq-list{margin-top:2.5rem;border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{cursor:pointer;list-style:none;padding:1.5rem 2.5rem 1.5rem 0;position:relative;font-family:'Archivo',sans-serif;font-weight:500;color:var(--ink);font-size:1.125rem;}
  .faq-q::-webkit-details-marker{display:none;}
  .faq-q::after{content:'+';position:absolute;right:0;top:1.35rem;color:var(--accent);font-size:1.5rem;font-weight:300;line-height:1;}
  .faq-item[open] .faq-q::after{content:'\2013';}
  .faq-a{padding:0 0 1.75rem;color:var(--ink-soft);max-width:65ch;}
  .faq-a p{margin:0;}
  @keyframes faqAnswerIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  .faq-item[open] .faq-a{animation:faqAnswerIn .25s cubic-bezier(.2,.7,.3,1);}
  @supports (interpolate-size: allow-keywords){
    :root{ interpolate-size: allow-keywords; }
    .faq-item::details-content{
      block-size:0; overflow:clip;
      transition: block-size .18s ease, content-visibility .18s ease;
      transition-behavior: allow-discrete;
    }
    .faq-item[open]::details-content{
      block-size:auto;
      transition: block-size .25s cubic-bezier(.2,.7,.3,1), content-visibility .25s;
      transition-behavior: allow-discrete;
    }
    @media (prefers-reduced-motion: reduce){
      .faq-item::details-content,.faq-item[open]::details-content{ transition:none; }
    }
  }

  /* ---------- In-body prose links (content paragraphs) ----------
     Anchors inside .sec paragraphs get the house accent treatment instead of
     the browser default (blue/purple underline). visited == unvisited. Existing
     service pages carry no .sec p links, so this is additive. */
  .sec p a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .2s ease, color .2s ease; }
  .sec p a:visited{ color:var(--accent); }
  .sec p a:hover{ border-bottom-color:var(--accent); }
  /* On --night content sections keep prose links legible (gold, not dark accent). */
  .index p a, .gran p a, .wallet p a, .stats p a, .final p a{ color:#d9b783; border-bottom-color:rgba(217,183,131,.4); }
  .index p a:visited, .gran p a:visited, .wallet p a:visited, .stats p a:visited, .final p a:visited{ color:#d9b783; }
  .index p a:hover, .gran p a:hover, .wallet p a:hover, .stats p a:hover, .final p a:hover{ border-bottom-color:#d9b783; }

  /* ---------- GENERIC LAYER: utility band, listing cards, pagination, search ----------
     Serves page.php, 404.php, search.php and the index.php archive fallback. Global
     (not per-sheet) because 404/search/archives load only style.css + responsive. */

  /* Compact dark utility band (NOT a 100vh hero — this is chrome for generic pages). */
  .page-hero{position:relative;background:var(--night);overflow:hidden;}
  .page-hero .scrim{position:absolute;inset:0;background:radial-gradient(120% 120% at 72% 8%,rgba(107,79,46,.32) 0%,rgba(33,26,18,.7) 48%,rgba(33,26,18,.96) 100%);}
  .page-hero .inner{position:relative;padding-top:150px;padding-bottom:56px;}
  .page-hero .eyebrow{color:#c79a5e;}
  .page-hero h1{color:#efe4d2;font-size:clamp(1.9rem,3.8vw,2.8rem);margin-top:14px;max-width:26ch;}
  .page-hero h1 em{font-family:'Fraunces',serif;font-style:italic;color:#d9b783;font-size:1.04em;}
  .page-hero .count{color:#a89c84;font-size:1rem;margin-top:14px;}
  @media(max-width:860px){ .page-hero .inner{padding-top:120px;padding-bottom:44px;} }

  /* Listing-card grid: the shared .cs-card system (image-top thumb / title / excerpt /
     meta / read link), promoted here from page-case-studies.css so the archives and the
     single.php Further reading block render the SAME card. 3-col to 2-col at 900 to 1-col
     at 600. The /case-studies/ index keeps only its .cs-hide filter state + .cs-sec padding
     in page-case-studies.css; the base card lives here now. */
  .cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:54px 36px;}
  .cs-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
  .cs-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper-deep);border:1px solid var(--line);}
  .cs-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);display:block;}
  .cs-card:hover .thumb img{transform:scale(1.045);}
  .cs-card h3{font-size:1.3rem;margin:22px 0 12px;line-height:1.22;}
  .cs-card p{color:var(--ink-soft);font-size:.98rem;flex-grow:1;}
  .cs-card .meta{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-soft);display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
  .cs-card .meta .auth{color:var(--ink);}
  .cs-card .meta .auth b{font-weight:400;}
  .cs-card .more{margin-top:14px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
  .cs-card:hover .more{text-decoration:underline;}
  @media(max-width:900px){.cs-grid{grid-template-columns:1fr 1fr;gap:44px 30px;}}
  @media(max-width:600px){.cs-grid{grid-template-columns:1fr;}}
  @media(prefers-reduced-motion:reduce){
    .cs-card .thumb img{transition:none;}
    .cs-card:hover .thumb img{transform:none;}
  }

  /* Pagination (the_posts_pagination): flat, letter-spaced, gold current/hover. Restored to the
     original look; two minimal fixes only: the hairline separator between numbers is removed (it
     drew a stray vertical line), and a mobile-only rule bumps each link to a >=44px tap target.
     Renders only on the listing templates (the_posts_pagination is called nowhere else), so
     single posts, case studies, and contact are never affected. */
  nav.pagination{margin-top:50px;border-top:1px solid var(--line);padding-top:26px;}
  /* Left-align + own the gap: .nav-links is shared with the site-header nav, whose global
     .nav-links{gap:38px} (style.css ~155) leaks in and spreads the numbers out. flex-start
     keeps them at the grid's left edge; 8px is the inter-number gap (separators were removed). */
  nav.pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;}
  nav.pagination .page-numbers{
    font-family:'Archivo',sans-serif;font-size:.8rem;font-weight:400;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:6px 14px;
    transition:color .25s ease;
  }
  nav.pagination .page-numbers.current{color:var(--accent);}
  nav.pagination a.page-numbers:hover{color:var(--accent);}
  /* Mobile only: each link becomes a >=44px tap target; desktop visual is unchanged. */
  @media(max-width:600px){
    nav.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;}
  }

  /* Search form: the underline-field treatment + flat .cta submit. */
  .searchform{display:flex;gap:18px;align-items:flex-end;max-width:560px;}
  .searchform label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
  .searchform input[type=search]{
    flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line);
    border-radius:0;padding:12px 0;font-family:'Archivo',sans-serif;font-weight:300;
    font-size:1rem;color:var(--ink);line-height:1.5;transition:border-color .25s ease,box-shadow .25s ease;
  }
  .searchform input[type=search]::placeholder{color:var(--ink-soft);opacity:.55;}
  .searchform input[type=search]:focus{outline:0;border-bottom-color:var(--accent);box-shadow:0 1px 0 0 var(--accent);}
  .searchform .cta{border:0;cursor:pointer;}
  @media(max-width:600px){
    .searchform{flex-direction:column;align-items:stretch;}
    .searchform .cta{width:100%;text-align:center;}
  }

  /* Band sub-line (category description, author bio, blog standfirst). */
  .page-hero .desc{color:#a89c84;font-size:1rem;margin-top:14px;max-width:60ch;line-height:1.65;}

  /* Category quick-link strip (blog index): horizontal hairline index. */
  .cat-strip{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:50px;}
  .cat-strip a{
    font-family:'Archivo',sans-serif;font-size:.78rem;font-weight:400;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
    padding:16px 22px 16px 0;margin-right:22px;transition:color .25s ease;
  }
  .cat-strip a + a{border-left:1px solid var(--line);padding-left:22px;}
  .cat-strip a:hover{color:var(--accent);}

  /* 404 / empty-state quick links: hairline index rows, whole row a link. */
  .lost-links{margin-top:50px;border-bottom:1px solid var(--line);max-width:560px;}
  .lost-links a{
    display:block;border-top:1px solid var(--line);padding:16px 0;
    font-family:'Archivo',sans-serif;font-size:.82rem;font-weight:400;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .25s ease;
  }
  .lost-links a:hover{color:var(--accent);}

  /* ===========================================================================
     CASE-STUDY ARTICLE LAYOUT (Step-1 lift, moved verbatim from single-case-study.css)
     Promoted to the generic layer so single.php can adopt the article template in a later
     step. The markup (.cs-single/.cs-head/.byline/.cs-feat/.cs-body/.cs-foot/.back) appears
     only on case-study posts today, so these selectors are inert on every other page. */
  .cs-single .wrap{max-width:760px;}

  /* header + byline */
  /* top padding clears the 86px fixed header (un-scrolled nav: 26 + 34 logo + 26). 60px did not, so
     the "Case study . The Lab" eyebrow collided with the logo/nav. 150px (mobile 120px below) reuses
     the standard content-page header clearance: .page-hero .inner padding-top:150px/120px (the
     case-studies index hero) and 404's .domains padding:150px. */
  .cs-head{padding:150px 0 36px;border-bottom:1px solid var(--line);}
  .cs-head .eyebrow{display:block;margin-bottom:18px;}
  .cs-head h1{font-size:clamp(2rem,4.4vw,2.9rem);margin-bottom:18px;line-height:1.18;}
  .cs-head h1 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .byline{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);}
  .byline .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,#3a2e1e,#1c1610);color:#e8c79a;display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-style:italic;font-size:1.1rem;flex-shrink:0;}
  .byline .who b{font-weight:500;}
  .byline .who b a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
  .byline .who b a:hover{border-color:var(--accent);}
  .byline .who span{display:block;font-size:.82rem;color:var(--ink-soft);}
  .ai-flag{display:inline-block;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--paper-deep);border:1px solid var(--line);color:var(--ink-soft);padding:2px 8px;margin-left:4px;}

  /* featured image lead (natural aspect so figures/charts are not cropped; bordered frame
     also serves as a placeholder where the staging install lacks the attachment file). */
  .cs-feat{padding:36px 0 0;}
  .cs-feat .frame{border:1px solid var(--line);background:var(--paper-deep);min-height:60px;}
  .cs-feat img{width:100%;height:auto;display:block;}

  /* body: the post's own the_content() */
  .cs-body{padding:40px 0 12px;}
  .cs-body p{margin-bottom:16px;color:var(--ink-soft);}
  .cs-body p b,.cs-body p strong{color:var(--ink);font-weight:500;}
  .cs-body em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .cs-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);}
  .cs-body a:hover{border-color:var(--accent);}
  .cs-body h2{font-size:1.5rem;margin:38px 0 12px;font-weight:300;letter-spacing:-.02em;line-height:1.18;}
  .cs-body h2:first-child{margin-top:0;}
  .cs-body h3{font-size:1.2rem;margin:30px 0 10px;font-weight:400;}
  /* Imported fact-sheet content uses an h1 (a duplicate of the page title) and h5 section labels,
     which .cs-body did not style, so they fell to oversized browser defaults. Bring every heading
     level into the .cs-body prose scale (h2 1.5 / h3 1.2 are already set above). */
  .cs-body h1{font-size:1.7rem;font-weight:300;letter-spacing:-.02em;line-height:1.18;margin:36px 0 14px;}
  .cs-body h1:first-child{margin-top:0;}
  .cs-body h4{font-size:1.1rem;font-weight:500;letter-spacing:-.01em;margin:24px 0 8px;}
  .cs-body h5,.cs-body h6{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:30px 0 10px;}
  .cs-body ul,.cs-body ol{margin:0 0 18px 22px;color:var(--ink-soft);}
  .cs-body li{margin-bottom:8px;}
  .cs-body img{max-width:100%;height:auto;display:block;margin:24px 0;border:1px solid var(--line);}
  /* In-content inline SVGs (e.g. the imported fact-sheet FAQ icons: viewBox-only, no width/height)
     render huge once Elementor's CSS is gone; constrain them to text size. */
  .cs-body svg{width:1.1em;height:1.1em;vertical-align:-0.15em;}
  .cs-body figure{margin:24px 0;}
  .cs-body figure img{margin:0;}
  .cs-body figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:8px;}
  .cs-body blockquote{border-left:2px solid var(--accent);padding-left:22px;margin:24px 0;font-family:'Fraunces';font-style:italic;color:var(--ink-soft);}
  /* AIAB posts emit bare wide <table>s (many columns) that overrun the 760px reading column and clip
     off-screen. Contain them WITHOUT editing post HTML: display:block + overflow-x:auto makes the
     table its own scroll container, so a wide table scrolls within the column instead of overflowing
     the page; max-width:100% keeps it inside the column. border-collapse is inherited by the anonymous
     inner table, so the grid still renders; font-size unchanged (no shrink-to-fit). Scoped to .cs-body
     (the case-study post content area) only; the redesign's own data-viz are divs/grids, not <table>,
     so this never touches them. */
  .cs-body table{display:block;overflow-x:auto;max-width:100%;border:0;border-collapse:collapse;margin:24px 0;font-size:.92rem;}
  /* AIAB tables emit border="1" + a bare <th> header row (no <thead>) and sometimes an empty
     trailing cell: kill the element border (a phantom column in block-scroll mode), reset empty
     cells, and give the header row the paper-deep treatment, matching the old .post-body look. */
  .cs-body th:empty,.cs-body td:empty{border:0;padding:0;background:none;}
  .cs-body th,.cs-body td{border:1px solid var(--line);padding:10px 14px;text-align:left;color:var(--ink-soft);vertical-align:top;line-height:1.5;}
  .cs-body th{background:var(--paper-deep);font-family:'Archivo',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
  .cs-body tbody tr:nth-child(even){background:rgba(210,204,191,.22);}

  /* footer: disclosure + endnote + back */
  .cs-foot{padding:0 0 70px;}
  .disclosure{background:var(--paper-deep);border:1px solid var(--line);border-left:3px solid var(--accent);padding:18px 22px;margin:30px 0;font-size:.9rem;color:var(--ink-soft);}
  .disclosure b{color:var(--ink);font-weight:500;}
  .endnote{padding:26px 0 0;border-top:1px solid var(--line);margin-top:8px;font-size:.86rem;color:var(--ink-soft);}
  .back{padding:40px 0 0;}
  .back a{display:inline-block;margin-right:24px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--accent);}
  .back a:hover{text-decoration:underline;}

  /* mobile header clearance: match .page-hero .inner's 120px (style.css @media max-width:860px) so
     the case-study head clears the fixed header the same way as the standard content pages. */
  @media(max-width:860px){ .cs-head{padding-top:120px;} }

  /* ===========================================================================
     CTA DARK-BAND BASE (Step-1 lift, moved verbatim from page-case-studies.css)
     Promoted so archives + the blog index can reuse <section class="final">. Every existing
     per-page sheet still declares its own .final and overrides this by load order, so only
     the case-studies index (whose local .final was removed) now reads from here. */
  .final{background:var(--night);color:var(--night-text);text-align:center;padding:120px 0;}
  .final .eyebrow{color:#c79a5e;}
  .final h2{color:#efe4d2;font-size:clamp(2rem,4.4vw,3.2rem);margin:22px auto;max-width:24ch;}
  .final h2 em{font-family:'Fraunces';font-style:italic;color:#d9b783;}
  .final p{color:#a89c84;max-width:48ch;margin:0 auto 30px;}

  /* ===========================================================================
     LIGHT HEADER BAND (Step-1 generic TWIN of .contact-hero in page-contact-us.css)
     A paper band with a faint warm radial and a big dark title, for archives to swap onto in a
     later step. Deliberately NOT named .light-hero: that is already a body class (body.light-hero
     set for paper-hero pages), and a bare .light-hero rule would style the body. .contact-hero is
     left in place in its own sheet, so /contact-us/ is unaffected. */
  .light-header{padding:190px 0 70px;background:radial-gradient(90% 90% at 85% 0%, rgba(201,166,115,.10), rgba(201,166,115,0) 55%);}
  .light-header .eyebrow{margin-bottom:22px;display:block;}
  .light-header h1{font-size:clamp(2.6rem,6vw,5rem);max-width:15ch;margin-bottom:24px;}
  .light-header h1 em{font-family:'Fraunces';font-style:italic;color:var(--accent);font-size:1.02em;}
  .light-header .sub{color:var(--ink-soft);font-size:1.22rem;max-width:54ch;}
  /* archive header support: the category/tag listings carry a count line and an optional
     description under the title. Dark text for the paper band (the .page-hero versions are
     light text for the old brown band). */
  .light-header .desc{color:var(--ink-soft);font-size:1rem;margin-top:14px;max-width:60ch;line-height:1.65;}
  .light-header .count{color:var(--ink-soft);font-size:1rem;margin-top:14px;}
  /* Archive listings use the tighter case-study h1 scale (.cs-head h1), not the big contact
     hero clamp. Shared by body.archive and body.page-template-page-document (the Document
     template) so both match; the generic .light-header base and /contact-us/ (its own
     .contact-hero) are untouched. */
  body.archive .light-header h1, body.page-template-page-document .light-header h1{font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.18;margin-bottom:10px;}
  /* Document template only: the title shares the body's 760 reading column (left edge aligns with
     the prose) and uses a smaller one-line scale. The contact 15ch cap is dropped so a full title
     fits on one line; long titles still wrap within the column (no nowrap). Archives keep their
     full-width band + larger title. */
  body.page-template-page-document .light-header .wrap{max-width:760px;}
  body.page-template-page-document .light-header h1{font-size:clamp(1.7rem,3.2vw,2.1rem);max-width:none;}
  /* Archive header polish (category.php / archive.php): match the .cs-head frame with tighter
     padding + a closing hairline (the warm radial is already on the .light-header base, the
     contact-hero twin). The count recomposes as a small uppercase companion tight under the
     title. Shared by body.archive and body.page-template-page-document (the Document template);
     /contact-us/ (.contact-hero) stays untouched. */
  body.archive .light-header, body.page-template-page-document .light-header{padding:150px 0 36px;border-bottom:1px solid var(--line);}
  body.archive .light-header .eyebrow, body.page-template-page-document .light-header .eyebrow{margin-bottom:18px;}
  body.archive .light-header .desc{margin-top:0;}
  body.archive .light-header .count{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px;}
  /* Mobile: trim the archive header top-gap (still clears the 86px nav) and the listing top gap
     under the header. single.php is .cs-single (not .sec), so posts are never touched. */
  @media(max-width:600px){
    body.archive .light-header, body.page-template-page-document .light-header{padding-top:108px;}
    body.archive .sec{padding-top:56px;}
  }

  /* Generic section rhythm for the archive listings (category/tag/blog index/search/author),
     which load style.css only and so never receive service.css's .sec padding. Every $pmap
     page and page.php declare their own .sec and override this by load order, so it lands only
     on the style.css-only listings. single.php no longer uses .sec (it is .cs-single now). */
  .sec{padding:120px 0;}

  /* ---------- Single-post overflow guard (2026-07-03) ----------
     Elementor-built post CONTENT (the ~18 posts pending migration) can include a 100vw
     full-bleed that overflows the mobile reading column, pushing the page canvas off-screen
     and disrupting the fixed nav panel at <=600px. Clip horizontal overflow to the single-post
     article containers (post_type=post only, via body.single; pages use body.page, unaffected).
     Interim band-aid; the real fix is the Elementor-post migration. */
  body.single .cs-single,
  body.single .cs-body,
  body.single .cs-body .wrap { overflow-x: clip; }