/*
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.6.33
*/


  @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;
    --gold:       #c9a673;   /* testimonial stars + summary bars */
    /* 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.light-hero #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 / small-laptop band: hamburger ≤1000, compressed horizontal nav 1001–1366 ----
     Adding a 6th top-level item ("What the Founder Uses") pushed the bar past the width it can hold on
     tablets: the full-desktop nav needs ~1274px to fit on one line (measured, real Archivo metrics), so
     1180 wrapped and the old 861–1100 compression (gap only, no font shrink) still overflowed into the
     logo at 1024. Fix = MIX (least-invasive that fits the WHOLE band including the 900px sweep case,
     which no in-cap font shrink can fit with 6 items): the hamburger now covers ≤1000 (raised from 860;
     see the mobile block + main.js isMobile), and 1001–1366 keeps the horizontal bar but compressed —
     font 0.82→0.70rem (~0.85x), gap 38→14, side padding 40→20, one-line (nowrap) labels+triggers+CTA,
     and flex-shrink:0 on the logo so items can never collide it. Compressed bar fits from ~966px, so it
     clears 1001 with margin (1024/1180/1280/1366 all fit, no wrap, no overlap). >1366px = unchanged full
     desktop nav. ID-bearing (#nav …) so later-loaded sheets can't override (the standing lesson). Both
     hero modes inherit via the shared .nav-links > a / .mega-trigger rules — no mode work, no new tokens. */
  @media (min-width:1001px) and (max-width:1366px){
    #nav, #nav.scrolled{ padding-left:20px; padding-right:20px; }              /* 40 -> 20 each side, both scroll states */
    #nav .logo{ flex-shrink:0; }                                              /* logo keeps full width; never overlapped */
    #nav .nav-links{ gap:14px; min-width:0; }                                 /* 38 -> 14 */
    #nav .nav-links > a:not(.nav-cta),
    #nav .mega-trigger{ white-space:nowrap; font-size:0.70rem; }              /* one line always; 0.82 -> 0.70 (~0.85x) */
    #nav .mega-trigger{ gap:5px; }                                            /* 7 -> 5 (trigger label-to-chevron) */
    #nav .nav-cta{ font-size:0.70rem !important; padding:11px 14px; white-space:nowrap; }  /* 0.78->0.70; 22->14; never 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 ≤1000px */
  .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 (≤1000px) — hamburger raised from 860 so the 6-item bar never cramps on tablets ---------- */
  @media (max-width:1000px){
    .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;}
  /* FAQ-answer links: the FAQ sections are section.faq (NOT .sec), so the in-body prose-link rule
     (.sec p a) never reached these anchors and they fell back to browser default blue/purple.
     Same house treatment, visited == unvisited. Global: every FAQ page shares .faq-a. */
  .faq-a a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .2s ease, color .2s ease; }
  .faq-a a:visited{ color:var(--accent); }
  .faq-a a:hover{ border-bottom-color:var(--accent); }
  /* ---- Accordion open/close animation: ONE mechanism, site-wide (every .faq-item + .fu-deep) ----
     Native <details> block-size transition via ::details-content + interpolate-size - the exact
     technique the service-page FAQs (residential-ac etc.) were already smooth with; the per-page
     copies were consolidated here and extended to the founder .fu-deep family. Animates BOTH open
     AND close at 0.3s ease-in-out; the answer/panel also fades in (faqAnswerIn). CSS-only: works
     with JS off; the founder readmore anchor just sets [open] (main.js) which rides this same
     transition. prefers-reduced-motion, and browsers without interpolate-size, fall back to native
     instant - matching the service pages' existing behaviour. This is the sole animation path;
     the earlier grid-rows/.js-acc technique + JS measuring were fully removed. */
  @keyframes faqAnswerIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  .faq-item[open] .faq-a, .fu-deep[open] .fu-reason{animation:faqAnswerIn .3s cubic-bezier(.2,.7,.3,1);}
  @supports (interpolate-size: allow-keywords){
    :root{ interpolate-size: allow-keywords; }
    .faq-item::details-content, .fu-deep::details-content{
      block-size:0; overflow:clip;
      transition: block-size .3s ease-in-out, content-visibility .3s ease-in-out;
      transition-behavior: allow-discrete;
    }
    .faq-item[open]::details-content, .fu-deep[open]::details-content{
      block-size:auto;
      transition: block-size .3s ease-in-out, content-visibility .3s ease-in-out;
      transition-behavior: allow-discrete;
    }
    @media (prefers-reduced-motion: reduce){
      .faq-item::details-content, .fu-deep::details-content,
      .faq-item[open]::details-content, .fu-deep[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;}
  }

  /* WordPress core's visually-hidden utility. The theme never defined it, so every core
     output that relies on it rendered as visible body copy - most obviously
     <h2 class="screen-reader-text">Posts pagination</h2> above the_posts_pagination() on
     every listing. The heading is KEPT for assistive tech and hidden visually only.
     Same clip/clip-path declarations as .searchform label below, which is the theme's
     existing instance of this pattern.
     NB this is a shared fix, not a /blog one: root emits the identical markup and shows
     the same stray heading on its own category archives. There is no CSS-only way to scope
     it to one install - the class, the element and the surrounding markup are identical on
     both - so root's archives are corrected too. Served HTML is unchanged either way.
     The :focus / :focus-visible reveal is the standard WP pattern, so a keyboard user can
     still reach anything focusable that carries the class (skip links). */
  .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0;}
  .screen-reader-text:focus,.screen-reader-text:focus-visible{position:static;width:auto;height:auto;
    overflow:visible;clip:auto;clip-path:none;white-space:normal;margin:0;}

  /* 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), as PILLS - the same treatment as the
     case-studies filter row (assets/page-case-studies.css .filters/.filter): outlined by
     default, filled for the current view. Declarations are copied from that component, but
     the selector is scoped to .cat-strip rather than reusing the .filter class, because
     .filter is ALREADY TAKEN in this sheet by the dark full-width "THE FILTER" CTA section
     (front-page.php:335). Hoisting the pill rules under that name would restyle that
     section on the homepage. Square corners are the donor's, not an oversight.
     These are links to category archives, not the JS-filtered buttons of case-studies. */
  .cat-strip{display:flex;flex-wrap:wrap;gap:10px 8px;margin:0 0 50px;}
  .cat-strip a{
    font-family:'Archivo',sans-serif;font-size:.78rem;font-weight:400;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
    background:none;border:1px solid var(--line);padding:10px 20px;
    transition:color .3s ease,border-color .3s ease,background-color .3s ease;
  }
  .cat-strip a:hover{border-color:var(--accent);color:var(--accent);}
  .cat-strip a.is-current{background:var(--ink);border-color:var(--ink);color:var(--paper);}
  @media(prefers-reduced-motion:reduce){ .cat-strip a{transition:none;} }

  /* ---------- /blog: ONE table of contents ----------------------------------------
     Posts carry up to three. The keeper is the table-of-contents-plus plugin's
     #toc_container, which is generated for all 973 posts and is the only consistent one.
     The other two are AIAB boilerplate baked into post_content and are hidden here -
     CSS only, no post_content is edited, so this is reversible by deleting these rules.
       style A  <h2><span id="Table_of_Contents">…</span></h2> + <nav class="toc">   118 posts
       style B  <div class="wp-block-table-of-contents"><nav class="ez-toc-container">  717 posts
     Scoped to .cs-body (single.php's content wrapper). NB the theme has no .entry-content -
     a rule scoped to that class would silently match nothing.
     The style-A heading is a bare sibling with no class of its own, so :has() is the only
     way to hide it from CSS; without it 117 posts would show a stranded "Table of Contents"
     heading over nothing. Every post that has that heading also has the nav (verified), so
     the adjacency never leaves a real heading hidden.
     Easy Table of Contents is NOT active, so style B is already unstyled markup. */
  .cs-body nav.toc{display:none;}
  .cs-body h2:has(+ nav.toc){display:none;}
  .cs-body .wp-block-table-of-contents{display:none;}

  /* The kept TOC, in the theme's language, spanning the article measure (.cs-single .wrap,
     760px) so it lines up with the paragraphs above and below.
     TWO things narrowed it before, both now handled:
       1. assets/screen.min.css sets #toc_container{display:table}, which shrink-to-fits
          regardless of any width. Overridden with display:block below.
       2. the plugin emitted an inline `div#toc_container{width:50%}` - note the TYPE
          qualifier, specificity (0,1,0,1), which outranks a bare #toc_container (0,1,0,0)
          whatever the source order. That rule is now gone at source: the plugin's width
          option is set to 'Auto', and Frontend.php::get_custom_css() then emits no
          div#toc_container block at all.
     Scoped .cs-body #toc_container (0,1,1,0) anyway, so the theme wins even if the plugin
     option is ever reset in the admin UI. */
  .cs-body #toc_container{display:block;width:auto;max-width:none;box-sizing:border-box;
    background:var(--paper-deep);border:1px solid var(--line);
    border-radius:6px;padding:22px 26px;margin:0 0 34px;font-family:'Archivo',sans-serif;}
  #toc_container p.toc_title{font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-soft);text-align:left;font-weight:500;margin:0 0 14px;}
  #toc_container ul.toc_list{margin:0;padding:0;}
  #toc_container ul.toc_list li{margin:0 0 8px;line-height:1.5;}
  #toc_container ul.toc_list ul{margin:8px 0 0 18px;}
  #toc_container a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;
    transition:color .2s ease,border-color .2s ease;}
  #toc_container a:hover{color:var(--accent);border-bottom-color:var(--accent);}
  #toc_container .toc_number{color:var(--ink-soft);}
  @media(max-width:600px){ .cs-body #toc_container{padding:18px 20px;} }

  /* 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,3.4rem);max-width:15ch;margin-bottom:14px;}
  .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.blog .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.blog is the posts index (/blog/, home.php). It joins the archive group so the index
     and the category archives a reader moves between share one header frame and scale. On the
     ROOT install the front page carries body.home WITHOUT body.blog (its posts page 2321 is
     shadowed by the physical /blog directory), so this selector never reaches root. */
  body.archive .light-header, body.blog .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.blog .light-header .eyebrow, body.page-template-page-document .light-header .eyebrow{margin-bottom:18px;}
  body.archive .light-header .desc, body.blog .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.blog .light-header, body.page-template-page-document .light-header{padding-top:108px;}
    body.archive .sec, body.blog .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; }

  /* ---- Testimonials: shared card component + homepage band ----
     The .t-card component is shared by /experiences/ (page-experiences.css holds
     the page-specific chrome) and the homepage band (template-parts/testimonials-band.php),
     so it lives here where every page's style.css can reach it. --gold is in :root above. */
  .t-card{ background:var(--paper-deep); border:1px solid var(--line); border-radius:6px;
    padding:26px 24px 22px; display:flex; flex-direction:column; }
  .t-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
  .stars{ font-size:.95rem; letter-spacing:3px; color:var(--gold); line-height:1; }
  .stars .off{ color:var(--line); }
  .t-service{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-align:right; }
  .t-quality{ display:inline-block; align-self:flex-start; margin-bottom:13px; font-size:.68rem;
    letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:rgba(107,79,46,.07);
    border:1px solid var(--line); border-radius:3px; padding:4px 10px; }
  .t-quote{ font-family:'Fraunces',serif; font-size:1.06rem; line-height:1.5; color:var(--ink); flex:1; }
  .t-foot{ margin-top:20px; padding-top:15px; border-top:1px solid var(--line); }
  .t-name{ font-weight:600; font-size:.92rem; }
  .t-meta{ font-size:.79rem; color:var(--ink-soft); margin-top:2px; }
  .t-tags{ margin-top:11px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .t-crew{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
    border:1px solid var(--line); border-radius:3px; padding:4px 9px; }
  .t-src{ font-size:.72rem; color:var(--ink-soft); }
  .t-src.g{ color:var(--accent); font-weight:500; }
  .t-fill{ color:var(--accent); font-style:italic; }

  /* Long-quote clamp + expand toggle. SHARED, and that is why it lives here rather than
     in page-experiences.css: /experiences/ (.wall) and the homepage band (.t-grid) render
     the same testimonial-card partial, so the same .t-quote needs the same treatment on
     both, and the homepage loads only style.css. (0,2,0) beats the base .t-quote (0,1,0)
     above without touching it. The FULL quote is always in the DOM - this hides lines
     visually, nothing more. assets/experiences-readmore.js injects the button on the
     quotes whose text exceeds its character threshold, on both surfaces. */
  .wall .t-quote, .t-grid .t-quote{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:12; overflow:hidden; }
  .wall .t-quote.is-expanded, .t-grid .t-quote.is-expanded{ display:block; -webkit-line-clamp:none; overflow:visible; }
  .wall .t-more, .t-grid .t-more{ align-self:flex-start; margin-top:10px; font-family:'Archivo',sans-serif;
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
    background:transparent; border:0; border-bottom:1px solid var(--line); padding:3px 0; cursor:pointer; }
  .wall .t-more:hover, .t-grid .t-more:hover{ border-bottom-color:var(--accent); }
  .wall .t-more:focus-visible, .t-grid .t-more:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  /* homepage band wrapper */
  .testimonials{ background:var(--paper); padding:96px 24px; }
  .t-wrap{ max-width:1120px; margin:0 auto; }
  .t-head{ margin:14px 0 12px; font-family:'Fraunces',serif; font-weight:300;
    font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.1; color:var(--ink); }
  .t-head em{ font-style:italic; color:var(--accent); }
  .t-intro{ max-width:660px; color:var(--ink-soft); font-size:1.02rem; }
  .t-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
  @media(max-width:860px){ .t-grid{ grid-template-columns:1fr; gap:18px; } }
  .t-cta{ margin-top:44px; font-size:.92rem; color:var(--ink-soft); }
  .t-cta a{ color:var(--accent); text-decoration:none; font-weight:600; border-bottom:1px solid var(--line); }
  .t-cta a:hover{ border-color:var(--accent); }


/* Locality post additions - Al Barari series (2026-08-03) */
.cs-body hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}

.cs-body p.attribution-note{color:var(--ink-soft);font-size:0.9rem;font-style:normal;border-top:1px solid var(--line);padding-top:16px;margin-top:24px}
.cs-body p.attribution-note strong{color:var(--ink);font-weight:500}