/* ==========================================================================
   Emmanuel Carpet Cleaning — shared stylesheet
   Token-driven. Every page uses this file and nothing else.

   Deliberately LIGHT and warm. Every benchmark in this category (Zerorez,
   Stanley Steemer, Chem-Dry, Goettl) opens dark and photographic; opening on
   warm paper is the cheapest way to not look like them, and it suits a family
   operation better than a franchise-grade black scrim.
   ========================================================================== */

/* ---------- Fonts (self-hosted — no third-party request, keeps the CSP tight) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin-var.woff2') format('woff2-variations'),
      url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin-var.woff2') format('woff2-variations'),
      url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

/* ---------- Tokens ---------- */
:root{
  /* Warm neutral ground. Never pure white, never pure black — both read cold. */
  --paper:#FBF8F3; --band:#F0EBE1; --card:#FFFFFF; --line:#E2DACB;
  --ink:#17150F; --ink-soft:#2C2921; --muted:#5A5348;

  /* ONE accent, used everywhere. #2F7D16 measures 5.17:1 on white and 4.83:1
     on --paper, so it clears AA for body-size text as a link colour AND as a
     button fill with white on top. A brighter lime would not. */
  --green:#2F7D16; --green-dark:#245F11; --green-tint:#EAF3E6;
  --inv:#FBF8F3; --inv-muted:#C9C2B4;

  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
  --section:clamp(4rem,8vw,7.5rem);
  --container:1180px; --gutter:1.5rem;

  --radius:6px; --radius-card:16px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgb(23 21 15/.04),0 10px 28px rgb(23 21 15/.07);
  --shadow-lift:0 2px 6px rgb(23 21 15/.06),0 20px 46px rgb(23 21 15/.12);

  --ease:cubic-bezier(.22,1,.36,1);
  --dur-micro:200ms; --dur-reveal:420ms;
  --header-h:76px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;margin:0;color:var(--ink);letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,1.5rem + 3.4vw,4rem);font-weight:700}
h2{font-size:clamp(1.75rem,1.3rem + 2vw,2.6rem);font-weight:600}
h3{font-size:clamp(1.2rem,1.08rem + .7vw,1.5rem);font-weight:600;letter-spacing:-.005em}
/* h4 needs an explicit size or it inherits 1em at heading weight — smaller AND
   heavier than the h3 above it, which runs the type scale backwards. */
h4{
  font-family:var(--font-display);
  font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1.4;margin:0 0 var(--s2);
}
p{margin:0 0 var(--s4);max-width:68ch}
a{color:var(--green);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
ul,ol{margin:0 0 var(--s4);padding-left:1.25rem}
li{margin-bottom:var(--s2);max-width:66ch}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}

:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:var(--radius)}
.section--ink :focus-visible,.site-footer :focus-visible,.nav.is-open :focus-visible{outline-color:#9BD97F}
::selection{background:var(--green);color:#fff}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:800px}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(3rem,5vw,4.5rem)}
.section--band{background:var(--band)}
.section--ink{background:var(--ink);color:var(--inv)}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--inv)}
.section--ink p{color:var(--inv-muted)}
.section--ink h4{color:#9BD97F}

.skip-link{
  position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--ink);color:var(--inv);
  padding:var(--s3) var(--s5);border-radius:var(--radius);
  font-family:var(--font-display);font-weight:600;text-decoration:none;
  transition:top var(--dur-micro) var(--ease);
}
.skip-link:focus{top:var(--s4);color:var(--inv)}

/* ---------- Eyebrow / section heads ---------- */
.eyebrow{
  font-family:var(--font-display);font-size:.8125rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green);
  margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s3);
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--green);flex:none}
.section--ink .eyebrow{color:#9BD97F}
.section--ink .eyebrow::before{background:#9BD97F}
.section-head{max-width:60ch;margin-bottom:var(--s7)}
.lead{font-size:clamp(1.08rem,1rem + .45vw,1.3rem);line-height:1.6;color:var(--muted)}
.section--ink .lead{color:var(--inv-muted)}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--green); --btn-fg:#fff; --btn-bd:var(--green);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:50px;padding:0 var(--s5);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  border-radius:var(--radius-pill);
  font-family:var(--font-display);font-size:1rem;font-weight:600;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease),
             border-color var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease);
}
.btn:hover{--btn-bg:var(--green-dark);--btn-bd:var(--green-dark);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* WCAG 1.4.11 wants 3:1 on a UI boundary. A --line border measures ~1.4:1 and
   reads as framed text rather than a button, so ghost gets a real edge. */
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:#8A8078}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink)}
.btn--on-ink{--btn-bg:transparent;--btn-fg:var(--inv);--btn-bd:rgb(251 248 243/.45)}
.btn--on-ink:hover{--btn-bg:var(--inv);--btn-fg:var(--ink);--btn-bd:var(--inv)}
.btn--lg{min-height:56px;padding:0 var(--s6);font-size:1.0625rem}
.btn--block{width:100%}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:border-color var(--dur-micro) var(--ease);
}
/* The blur MUST live on a pseudo-element, never on .site-header itself:
   backdrop-filter makes an element a containing block for position:fixed
   descendants, which collapses the full-screen mobile nav to header height. */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgb(251 248 243/.90);backdrop-filter:saturate(1.4) blur(12px);
}
.site-header.is-stuck{border-bottom-color:var(--line)}
.site-header__inner{display:flex;align-items:center;gap:var(--s5);min-height:var(--header-h)}

.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;margin-right:auto;min-width:0}
/* 56px, not 44: the mark has three elements (wand, sweep, roll) and below
   roughly 50px they smear together into a grey blob on a 1x display. The
   76px header absorbs it with room to spare. */
.brand__mark{width:56px;height:56px;flex:none;border-radius:var(--radius)}
.brand__text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;color:var(--ink);letter-spacing:-.01em}
.brand__sub{font-family:var(--font-display);font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Desktop shows the number in the nav; on a phone the nav is behind a hamburger,
   so a persistent call button lives outside it or click-to-call is buried. */
.header-call{display:none}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  flex:none;                        /* must never shrink below the 44px target */
  width:48px;height:48px;margin-right:calc(var(--s3) * -1);
  background:none;border:0;color:var(--ink);cursor:pointer;
}
.nav-toggle svg{width:26px;height:26px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
/* While the menu is open the overlay behind the toggle is --ink. Without this
   the X keeps color:var(--ink) and is invisible against it. */
.nav-toggle[aria-expanded="true"]{color:var(--inv)}

.nav{display:flex;align-items:center;gap:var(--s5)}
.nav__link{
  font-family:var(--font-display);font-size:.9375rem;font-weight:600;
  color:var(--ink);text-decoration:none;padding:var(--s2) 0;position:relative;
  transition:color var(--dur-micro) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-micro) var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--green)}

@media (max-width:1040px){
  /* z-index 100 beats the overlay's 99: without it the close (X) paints under
     the open menu and taps land on the overlay, trapping touch users. */
  .nav-toggle{display:inline-flex;position:relative;z-index:100}
  .header-call{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:48px;height:48px;margin-right:var(--s2);
    background:var(--green);color:#fff;border-radius:var(--radius-pill);
    text-decoration:none;
  }
  .header-call svg{width:20px;height:20px}

  .nav{
    position:fixed;inset:0;z-index:99;
    flex-direction:column;align-items:stretch;justify-content:center;gap:var(--s2);
    background:var(--ink);padding:var(--s8) var(--gutter) var(--s6);
    transform:translateY(-100%);visibility:hidden;
    /* visibility flips only AFTER the slide, so links are never focusable
       while off-screen */
    transition:transform var(--dur-reveal) var(--ease),
               visibility 0s linear var(--dur-reveal);
    overflow-y:auto;
  }
  .nav.is-open{
    transform:translateY(0);visibility:visible;
    transition:transform var(--dur-reveal) var(--ease),visibility 0s;
  }
  .nav__link{
    color:var(--inv);font-size:1.4rem;
    padding:var(--s4) 0;border-bottom:1px solid rgb(251 248 243/.14);
  }
  .nav__link::after{display:none}
  .nav__link[aria-current="page"]{color:#9BD97F}
  .nav .btn{margin-top:var(--s5)}
  body.nav-open{overflow:hidden}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3rem,7vw,5.5rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__copy{max-width:38rem}
.hero h1 em{font-style:normal;color:var(--green);display:block}
.hero__lead{margin-top:var(--s5);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero__media{position:relative;isolation:isolate}
.hero__media img{width:100%;height:auto;border-radius:var(--radius-card);box-shadow:var(--shadow-lift)}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s7);
  padding-top:var(--s5);border-top:1px solid var(--line);
  font-family:var(--font-display);font-size:.8125rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.hero__trust span{display:flex;align-items:center;gap:var(--s2)}
.hero__trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
@media (min-width:900px){
  .hero{min-height:min(84svh,820px);display:flex;align-items:center}
  .hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(2.1rem,1.4rem + 3.6vw,2.8rem)}
  .hero__actions .btn{width:100%}
  .hero__trust{margin-top:var(--s5);padding-top:var(--s4);gap:var(--s1) var(--s4);font-size:.6875rem}
}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:var(--s5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

.card{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease);
}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card__media{background:var(--band)}
.card__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card__body{padding:var(--s5)}
.card__body h3{margin-bottom:var(--s3)}
.card__body p{color:var(--muted);margin-bottom:0;font-size:.9375rem}
.card__more{
  display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
  font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--green);
}
.card__more svg{width:16px;height:16px;transition:transform var(--dur-micro) var(--ease)}
a.card:hover .card__more svg{transform:translateX(3px)}

/* ---------- Work grid (uniform squares) ----------
   Mixing portrait and landscape photos in a masonry reads as scattered. Every
   card is the same square instead, so the set looks deliberate. */
.workgrid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.workgrid figure{margin:0}
.workgrid img{
  display:block;width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--radius-card);background:var(--band);
}
.workgrid figcaption{font-size:.8125rem;color:var(--muted);padding-top:var(--s3);line-height:1.5}
.section--ink .workgrid figcaption{color:var(--inv-muted)}

/* ---------- Proof band ---------- */
.proof{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.proof__v{font-family:var(--font-display);font-size:1.75rem;font-weight:700;margin:0 0 var(--s1);letter-spacing:-.02em}
.proof__k{font-size:.9375rem;color:var(--muted);margin:0}
.section--ink .proof__v{color:var(--inv)}
.section--ink .proof__k{color:var(--inv-muted)}

/* ---------- Testimonials ---------- */
.tgrid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.tcard{
  margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:var(--s5);
}
.tcard blockquote{margin:0}
.tcard blockquote p{font-size:1rem;margin-bottom:var(--s4)}
.tcard blockquote p:last-child{margin-bottom:0}
.tcard figcaption{
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:.9375rem;
}
.tcard figcaption span{display:block;font-weight:400;font-size:.8125rem;color:var(--muted);margin-top:2px}
.stars{color:var(--green);letter-spacing:.1em;font-size:.9375rem;margin-bottom:var(--s3)}

/* ---------- Split ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:860px){ .split{grid-template-columns:repeat(2,minmax(0,1fr))} }
.split__media{position:relative;isolation:isolate}
.split__media img{width:100%;height:auto;border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
/* Tall portraits eat a whole phone screen before any copy, and the media comes
   first in DOM order. Cap the height rather than force a ratio — some split
   images are landscape and a blanket ratio would make those taller. */
@media (max-width:859px){
  .split__media img{max-height:56vh;max-height:56svh;object-fit:cover;object-position:50% 40%}
}

/* ---------- Steps ---------- */
.step__n{
  font-family:var(--font-display);font-size:.8125rem;font-weight:700;
  letter-spacing:.14em;color:var(--green);margin:0 0 var(--s2);
}
.step h3{margin-bottom:var(--s3)}
.step p{color:var(--muted);margin-bottom:0}
.section--ink .step__n{color:#9BD97F}
.section--ink .step p{color:var(--inv-muted)}

/* ---------- Before / after wipe ----------
   The "after" image is the one in normal flow, so it sets the height and the
   figure never collapses if the "before" fails to load. The "before" is laid
   over it and revealed with clip-path rather than by shrinking a wrapper —
   a width-based wrapper squashes the image as the handle moves.
   touch-action:pan-y lets a vertical swipe still scroll the page; the JS
   handles horizontal dragging on the figure itself. */
.ba{
  --pos:50%;
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--band);touch-action:pan-y;cursor:ew-resize;isolation:isolate;
}
/* pointer-events:none is load-bearing, not tidiness. An <img> is a native HTML5
   drag source on desktop: press on one and move, and the browser starts
   dragging the picture, which fires pointercancel and tears down our pointer
   capture mid-gesture. The handle then only follows the first click and the
   slider degrades to click-to-jump. Touch never starts a native image drag,
   which is why that failure shows up on a computer and not on a phone.
   user-select:none does NOT cover this — it governs text selection only. */
.ba img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.ba__before{position:absolute;inset:0;height:100%;object-fit:cover;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;
  margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgb(0 0 0/.25);pointer-events:none}
.ba__grip{
  position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;
  border-radius:50%;background:#fff;box-shadow:0 2px 10px rgb(0 0 0/.3);
  display:grid;place-items:center;color:var(--ink);
}
.ba__grip svg{width:22px;height:22px}
/* The range is the keyboard and screen-reader surface ONLY. pointer-events:none
   keeps the native widget out of the way of the drag: left live, it would take
   the press itself and apply its own click-the-track-to-jump behaviour on top
   of ours, so two things would fight over one gesture. Dragging is handled by
   the JS on the figure; arrow keys, Home/End and the slider role still work. */
.ba__range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none;
  pointer-events:none;
}
.ba__range:focus-visible{opacity:1;outline:3px solid var(--green);outline-offset:2px}
.ba__tag{
  position:absolute;top:var(--s3);z-index:2;pointer-events:none;
  font-family:var(--font-display);font-size:.6875rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgb(0 0 0/.55);padding:.35rem .6rem;border-radius:var(--radius-pill);
}
.ba__tag--b{left:var(--s3)}
.ba__tag--a{right:var(--s3)}
.ba figcaption{
  margin-top:var(--s3);font-size:.875rem;color:var(--muted);
}
@media (pointer:coarse){ .ba__grip{width:56px;height:56px;margin:-28px 0 0 -28px} }

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq summary{
  cursor:pointer;list-style:none;position:relative;padding-right:2.5rem;
  font-family:var(--font-display);font-weight:600;font-size:1.0625rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:.45em;width:10px;height:10px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(45deg);transition:transform var(--dur-micro) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > div{padding-top:var(--s3)}
.faq p{color:var(--muted);margin-bottom:0}

/* ---------- Forms ---------- */
.field{margin-bottom:var(--s5)}
.field label{
  display:block;margin-bottom:var(--s2);
  font-family:var(--font-display);font-size:.875rem;font-weight:600;letter-spacing:.02em;
}
.field .req{color:var(--green-dark)}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;min-height:50px;padding:var(--s3) var(--s4);
  background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--font-body);
  /* 16px minimum or iOS zooms the whole page on focus */
  font-size:1rem;line-height:1.5;
  transition:border-color var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease);
}
textarea{min-height:130px;resize:vertical}
select{
  appearance:none;padding-right:2.5rem;background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A5348' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgb(47 125 22/.16)}
.field-error{display:block;margin-top:var(--s2);color:#A32F1E;font-size:.875rem;font-weight:500}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#A32F1E}
.form-note{font-size:.8125rem;color:var(--muted);margin-top:var(--s4)}
/* Off-screen, never display:none — a display:none honeypot is also absent from
   the accessibility tree, and the same trap applies to the status region below. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:var(--s4);font-size:.9375rem}
.form-status:not(:empty){padding:var(--s4);border-radius:var(--radius);border:1px solid var(--line);background:var(--band)}
.form-status--ok{border-color:#2F6B45;background:#EAF3ED;color:#1D4A2E}
.form-status--err{border-color:#A32F1E;background:#FBEDEA;color:#7A2314}

/* ---------- Page head / prose ---------- */
.page-head{background:var(--band);border-bottom:1px solid var(--line);padding-block:clamp(2.5rem,5vw,4.5rem)}
.page-head h1{margin-bottom:var(--s4)}
.page-head .lead{max-width:56ch;margin:0}
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;
  margin:0 0 var(--s4);font-size:.875rem;
}
.breadcrumb li{margin:0;display:flex;align-items:center;gap:var(--s2)}
.breadcrumb li + li::before{content:"/";color:var(--line)}
.breadcrumb a{color:var(--muted);text-decoration:none;display:inline-block;padding-block:.6rem}
.breadcrumb a:hover{color:var(--green);text-decoration:underline}
.prose{max-width:72ch}
.prose h2{margin:var(--s8) 0 var(--s4)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:var(--s6) 0 var(--s3)}
.prose__meta{color:var(--muted);font-size:.9375rem;margin-bottom:var(--s7)}
.prose a[href^="tel:"]{display:inline-block;padding-block:.5rem;font-weight:600}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--inv-muted);padding-block:var(--s8) var(--s6)}
.footer__grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.site-footer .brand__name{color:var(--inv)}
.site-footer .brand__sub{color:var(--inv-muted)}
.footer__h{font-family:var(--font-display);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9BD97F;margin:0 0 var(--s4)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:var(--s1)}
.site-footer a{color:var(--inv-muted);text-decoration:none;display:inline-block;padding-block:.6rem}
.site-footer a:hover{color:#9BD97F;text-decoration:underline}
.footer__tagline{color:var(--inv-muted);font-size:.9375rem;margin-top:var(--s4);max-width:34ch}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid rgb(251 248 243/.14);
  font-size:.875rem;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s4);list-style:none;padding:0;margin:0 0 0 auto}
.footer__legal li{margin:0}

/* ---------- Reveals ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:70ms}
.reveal[data-delay="2"]{transition-delay:140ms}
.reveal[data-delay="3"]{transition-delay:210ms}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Utilities ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack > * + *{margin-top:var(--s4)}
.text-center{text-align:center}
.mt-0{margin-top:0}

/* ---------- Phone refinements ---------- */
@media (max-width:640px){
  /* the closing CTA needs the same full-width treatment the hero buttons get,
     or both buttons wrap to their own shrink-to-fit row */
  .cta-actions .btn{width:100%}
}
@media (max-width:600px){
  .proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
  .proof__v{font-size:1.35rem}
  .prose h2{margin-top:clamp(2.25rem,9vw,4rem)}
}
@media (max-width:520px){
  .site-header__inner{gap:var(--s3)}
  .header-call{margin-right:0}
  .brand__sub{display:none}
  .brand__text{overflow:hidden}
  .brand__name{font-size:.9375rem;letter-spacing:0;white-space:nowrap}
  /* the call button and the toggle both have to fit beside the brand here,
     so the mark gives back the width it took on desktop */
  .brand__mark{width:44px;height:44px}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.nav,.skip-link{display:none!important}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}