/* =====================================================================
   EES, SITE LANGUAGE v2 · "REFINED EDITORIAL" (2026-08-26)
   ---------------------------------------------------------------------
   A new, art-directed homepage language layered ON TOP of styles.css
   (loaded only on the homepage for now; re-skins the rest in later passes).

   FROZEN by client direction:
     · the #hero-video element + its scroll-scrub animation (untouched here)
     · the colour scheme, near-black #0E0D0C, orange #F26A21, warm paper.
       Reproportioned: paper-dominant reading canvas, dark cinematic
       punctuation, orange as a precise accent (never a fill-everything).

   NEW:
     · Type, Fraunces (editorial display, mixed case), Hanken Grotesk
       (UI + body), IBM Plex Mono (indices, labels, coordinates, metadata).
     · Layout, editorial grid, wide margins, hairlines, generous rhythm.
     · Motion, restrained kinetic: soft reveals, count-ups, an interactive
       service sequence, light parallax (home.js). Reduced-motion respected.

   Day / night is preserved: paper sections are constant; .s-night sections
   flip light under [data-theme="light"]; hero / header / footer stay dark.
   ===================================================================== */

/* ============================ TOKENS ============================ */
:root{
  --f-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --f-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* paper (dominant) */
  --v-paper:#F3EEE4;
  --v-paper-2:#EBE4D6;      /* alt band / raised */
  --v-ink:#17130E;          /* warm near-black text */
  --v-ink-2:#585045;        /* secondary text (on paper ≈ 7.4:1) */
  --v-ink-3:#8A8073;        /* mono labels / tertiary (on paper ≈ 3.4:1, large/label only) */
  --v-hair:#DBD2C1;         /* warm hairline */
  --v-hair-2:#C8BDA8;

  /* night (punctuation) */
  --v-night:#100E0C;
  --v-night-2:#191512;
  --v-night-hair:#2C2721;
  --v-cream:#F5F0E6;        /* text on night */
  --v-cream-2:#ADA598;      /* muted on night (≈ 6.2:1) */

  --v-orange:#F26A21;
  --v-orange-2:#FF8A44;
  --v-orange-ink:#17130E;   /* text on orange */

  --v-maxw:1280px;
  --v-wide:1560px;
  --v-gutter:clamp(1.25rem, .7rem + 2.6vw, 3.75rem);
  --v-sy:clamp(4.75rem, 3.2rem + 6.2vw, 9.5rem);
  --v-ease:cubic-bezier(.16,1,.3,1);
  --v-ease-out:cubic-bezier(.22,1,.36,1);
}

/* map the current surface's fg/bg so children can theme from one place */
.sec--paper{ --fg:var(--v-ink); --fg2:var(--v-ink-2); --fg3:var(--v-ink-3); --line:var(--v-hair); --line2:var(--v-hair-2); --bg:var(--v-paper); }
.sec--paper.sec--alt{ --bg:var(--v-paper-2); }
.sec--night{ --fg:var(--v-cream); --fg2:var(--v-cream-2); --fg3:var(--v-cream-2); --line:var(--v-night-hair); --line2:var(--v-night-hair); --bg:var(--v-night); }

/* night sections lighten in day mode (palette stays; only the surface flips) */
:root[data-theme="light"] .sec--night{ --fg:var(--v-ink); --fg2:var(--v-ink-2); --fg3:var(--v-ink-3); --line:var(--v-hair); --line2:var(--v-hair-2); --bg:var(--v-paper); }

/* ============================ BASE (homepage) ============================ */
body[data-page]{
  background:var(--v-paper);
  font-family:var(--f-sans);
  color:var(--v-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body[data-page] ::selection{ background:var(--v-orange); color:#fff; }
body[data-page]{ scrollbar-color:var(--v-hair-2) transparent; }
body[data-page] *:focus-visible{ outline:2px solid var(--v-orange); outline-offset:3px; }

/* ============================ PRIMITIVES ============================ */
.sec{ position:relative; background:var(--bg); color:var(--fg); padding-block:var(--v-sy); }
.wrap{ width:100%; max-width:var(--v-maxw); margin-inline:auto; padding-inline:var(--v-gutter); }
.wrap--wide{ max-width:var(--v-wide); }

/* mono kicker + running index */
.kick{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--f-mono); font-weight:500;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg3); margin:0; }
.kick::before{ content:""; width:1.6rem; height:1px; background:currentColor; opacity:.6; }
.kick .idx{ color:var(--v-orange); }

/* Fraunces editorial display, mixed case, optical sizing */
.dsp{ font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0; line-height:1.0; letter-spacing:-.018em;
  color:var(--fg); margin:0; text-wrap:balance; }
.dsp em{ font-style:italic; font-weight:400; }
.dsp .amp{ color:var(--v-orange); font-style:italic; }
.dsp--xl{ font-size:clamp(2.7rem, 1.5rem + 5.4vw, 6.2rem); }
.dsp--lg{ font-size:clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem); }
.dsp--md{ font-size:clamp(1.8rem, 1.3rem + 2.2vw, 3rem); line-height:1.05; }

/* body copy */
.lede{ font-family:var(--f-sans); font-weight:400; color:var(--fg2);
  font-size:clamp(1.12rem, 1.02rem + .5vw, 1.42rem); line-height:1.5; margin:0; max-width:40ch; }
.body{ font-family:var(--f-sans); font-weight:400; color:var(--fg2); font-size:1.05rem; line-height:1.65; margin:0; max-width:62ch; }
.muted{ color:var(--fg3); }
.mono{ font-family:var(--f-mono); font-weight:500; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule--ink{ background:var(--fg); opacity:.9; }

/* editorial CTAs */
.cta{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-sans); font-weight:600;
  font-size:1rem; letter-spacing:.01em; color:var(--fg); position:relative; padding-block:.3rem;
  transition:gap .35s var(--v-ease), color .3s ease; }
.cta::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:var(--v-orange);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--v-ease); }
.cta:hover{ text-decoration:none; gap:1rem; }
.cta:hover::after,.cta:focus-visible::after{ transform:scaleX(1); }
.cta svg{ width:1.05em; height:1.05em; transition:transform .4s var(--v-ease); }
.cta:hover svg{ transform:translateX(4px); }

.cta-fill{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-sans); font-weight:600;
  font-size:1rem; padding:.95rem 1.5rem; background:var(--v-orange); color:var(--v-orange-ink);
  border:1px solid var(--v-orange); border-radius:2px; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--v-ease), box-shadow .4s var(--v-ease); }
.cta-fill::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--v-orange-2);
  transform:translateY(101%); transition:transform .5s var(--v-ease); }
.cta-fill:hover{ text-decoration:none; box-shadow:0 14px 30px -14px rgba(242,106,33,.6); }
.cta-fill:hover::before{ transform:translateY(0); }
.cta-fill svg{ width:1.05em; height:1.05em; transition:transform .4s var(--v-ease); }
.cta-fill:hover svg{ transform:translateX(4px); }
.cta-line{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-sans); font-weight:600;
  font-size:1rem; padding:.9rem 1.5rem; background:transparent; color:var(--fg); border:1px solid var(--line2);
  border-radius:2px; transition:border-color .35s ease, background .35s ease; }
.cta-line:hover{ text-decoration:none; border-color:var(--fg); }

/* reveal, soft, refined (overrides the legacy .reveal transition on the homepage) */
body[data-page] .reveal{ opacity:0; transform:translateY(18px); filter:blur(6px);
  transition:opacity 1s var(--v-ease-out), transform 1s var(--v-ease-out), filter 1s var(--v-ease-out); will-change:opacity,transform; }
body[data-page] .reveal.in{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){
  body[data-page] .reveal{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ============================ HEADER / CHROME (restyle for home) ============================ */
body[data-page] .proto-ribbon{ font-family:var(--f-mono); font-weight:400; font-size:.68rem; letter-spacing:.04em; }
body[data-page] .site-header{ background:rgba(16,14,12,.72); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.08); }
body[data-page] .site-header.scrolled{ background:rgba(16,14,12,.92); }
body[data-page] .brand .wm b{ font-family:var(--f-serif); font-weight:500; font-size:1.12rem;
  text-transform:none; letter-spacing:-.01em; line-height:1; }
body[data-page] .brand .wm span{ font-family:var(--f-mono); font-weight:400; font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--v-cream-2); }
body[data-page] .nav a{ font-family:var(--f-sans); font-weight:500; font-size:.95rem;
  text-transform:none; letter-spacing:0; color:var(--v-cream); }
body[data-page] .header-phone{ font-family:var(--f-mono); font-weight:500; font-size:.82rem; letter-spacing:.04em; text-transform:none; }
body[data-page] .header-cta .btn--primary{ font-family:var(--f-sans); font-weight:600; text-transform:none;
  letter-spacing:0; border-radius:2px; background:var(--v-orange); color:var(--v-orange-ink); border:0; }
body[data-page] .header-cta .btn--primary:hover{ background:var(--v-orange-2); }
body[data-page] .mobile-menu a{ font-family:var(--f-sans); text-transform:none; letter-spacing:0; }

/* ============================ HERO (video frozen; text layer restyled) ============================ */
body[data-page] .hero--video .hero-overlay{
  background:linear-gradient(180deg, rgba(12,10,9,.34) 0%, rgba(12,10,9,.20) 30%, rgba(12,10,9,.62) 78%, rgba(12,10,9,.86) 100%); }
body[data-page] .hero-media-note{ font-family:var(--f-mono); font-weight:400; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:.7; }

.h2v{ position:relative; z-index:3; width:100%; max-width:var(--v-maxw); margin-inline:auto; padding-inline:var(--v-gutter);
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(3rem,2rem + 5vh,7rem); color:var(--v-cream); box-sizing:border-box; }
.h2v__title{ max-width:18ch; }
@media (max-width:600px){ .h2v__title{ font-size:clamp(2.05rem,1.3rem + 4vw,3rem); } }
.h2v__kick{ font-family:var(--f-mono); font-weight:500; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--v-cream); display:inline-flex; align-items:center; gap:.8rem; margin:0 0 1.5rem; }
.h2v__kick::before{ content:""; width:2rem; height:1px; background:var(--v-orange); }
.h2v__title{ font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; font-variation-settings:"opsz" 144;
  font-size:clamp(2.9rem, 1.4rem + 6.4vw, 6.6rem); line-height:.98; letter-spacing:-.02em; color:#fff; margin:0; max-width:16ch; text-wrap:balance; }
.h2v__title em{ font-style:italic; color:#fff; }
.h2v__title .u{ color:var(--v-orange-2); font-style:italic; }
.h2v__lede{ font-family:var(--f-sans); font-weight:400; font-size:clamp(1.08rem, 1rem + .5vw, 1.35rem);
  line-height:1.5; color:rgba(245,240,230,.9); margin:1.6rem 0 0; max-width:52ch; }
.h2v__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.h2v__actions .cta-fill{ color:var(--v-orange-ink); }
.h2v__actions .cta-line{ color:#fff; border-color:rgba(255,255,255,.35); }
.h2v__actions .cta-line:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.h2v__proof{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; margin-top:2.6rem;
  font-family:var(--f-mono); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,240,230,.72); }
.h2v__proof li{ display:flex; align-items:center; gap:1.4rem; }
.h2v__proof li:not(:last-child)::after{ content:""; width:4px; height:4px; background:var(--v-orange); transform:rotate(45deg); }
.h2v__cue{ position:absolute; right:var(--v-gutter); bottom:clamp(3rem,2rem + 5vh,7rem); display:flex; flex-direction:column;
  align-items:center; gap:.7rem; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(245,240,230,.6); }
.h2v__cue .bar{ width:1px; height:46px; background:linear-gradient(180deg,var(--v-orange),transparent); }
@media (prefers-reduced-motion:no-preference){ .h2v__cue .bar{ animation:cuePulse 2.4s var(--v-ease) infinite; transform-origin:top; } }
@keyframes cuePulse{ 0%,100%{ transform:scaleY(.4); opacity:.5 } 50%{ transform:scaleY(1); opacity:1 } }

/* floating service labels (ride the video timeline; restyled subtle mono) */
body[data-page] .hero3d-label{ font-family:var(--f-mono); font-weight:500; text-transform:uppercase;
  letter-spacing:.16em; font-size:.8rem; color:rgba(245,240,230,.85); }

/* ============================ 01 · THESIS, the ground comes first ============================ */
.thesis__grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.8rem,1.2rem + 3vw,3.5rem); }
.thesis__head{ max-width:none; }
.thesis__head .dsp{ max-width:14ch; }
.thesis__lead-h{ margin-top:1.4rem; }
.thesis__body{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.8rem,1rem + 4vw,5rem); align-items:end; margin-top:clamp(1.5rem,1rem + 2vw,2.5rem); }
.thesis__note{ align-self:end; }
.thesis__note p + p{ margin-top:1.1rem; }
.thesis__seq{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .55rem; margin-top:2rem;
  font-family:var(--f-mono); font-weight:500; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--fg3); }
.thesis__seq b{ color:var(--fg); font-weight:600; }
.thesis__seq .arrow{ color:var(--v-orange); }
.thesis__figure{ position:relative; margin:0; overflow:hidden; aspect-ratio:5/4; background:var(--v-paper-2); }
.thesis__figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.thesis__cap{ position:absolute; left:0; bottom:0; padding:.6rem .8rem; background:rgba(16,14,12,.82);
  color:var(--v-cream); font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; }

/* ============================ 02 · SEQUENCE, five services, one operation ============================ */
.seq__head{ margin-bottom:clamp(2rem,1.4rem + 3vw,3.5rem); max-width:none; }
.seq__head .dsp{ max-width:16ch; }
.seq__head .body{ max-width:34ch; }
.seq{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,1rem + 4vw,5.5rem); align-items:start; }
.seq__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.seq__item{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.4rem;
  padding:clamp(1.5rem,1rem + 1.6vw,2.4rem) 0; min-height:clamp(200px,27vh,300px);
  border-bottom:1px solid var(--line); color:var(--fg2);
  transition:padding-left .5s var(--v-ease), color .35s ease; }
.seq__item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--v-orange);
  transform:scaleY(0); transform-origin:top; transition:transform .5s var(--v-ease); }
.seq__n{ font-family:var(--f-mono); font-weight:500; font-size:.8rem; color:var(--fg3); font-variant-numeric:tabular-nums; transition:color .35s ease; }
.seq__name{ font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; font-variation-settings:"opsz" 90;
  line-height:1; letter-spacing:-.01em; font-size:clamp(1.7rem,1.2rem + 2vw,2.9rem); color:var(--fg); }
.seq__go{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg3);
  display:inline-flex; align-items:center; gap:.5rem; opacity:0; transform:translateX(-6px); transition:opacity .35s ease, transform .35s var(--v-ease); }
.seq__item.is-active,.seq__item:hover{ color:var(--fg); padding-left:1.1rem; }
.seq__item.is-active::before,.seq__item:hover::before{ transform:scaleY(1); }
.seq__item.is-active .seq__n,.seq__item:hover .seq__n{ color:var(--v-orange); }
.seq__item.is-active .seq__go,.seq__item:hover .seq__go{ opacity:1; transform:none; }
.seq__item:hover{ text-decoration:none; }
.seq__thumb{ display:none; }

.seq__stage{ position:sticky; top:96px; }
.seq__media{ position:relative; width:100%; height:min(64vh, calc(100vh - 120px)); aspect-ratio:auto;
  overflow:hidden; background:var(--v-night-2); }
@media (max-width:1024px){ .seq__media{ height:auto; aspect-ratio:4/3; } }
.seq__layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transform:scale(1.06); transition:opacity .8s ease, transform 1.6s var(--v-ease); }
.seq__layer.is-active{ opacity:1; transform:scale(1); }
.seq__media::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  background:linear-gradient(180deg,transparent 58%,rgba(12,10,9,.55)); }
.seq__meta{ position:absolute; left:1rem; bottom:1rem; z-index:2; font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(245,240,230,.85); }
.seq__meta b{ color:var(--v-orange); font-weight:600; }
.seq__desc{ margin-top:1.4rem; color:var(--fg2); max-width:44ch; line-height:1.6; min-height:3.2em;
  transition:opacity .4s ease, transform .5s var(--v-ease); }
.seq__desc.swap{ opacity:0; transform:translateY(8px); }

/* ============================ 03 · PROOF band (count-ups + credentials) ============================ */
.proof{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,1rem + 2vw,3rem); align-items:start; }
.proof__cell{ border-top:1px solid var(--line); padding-top:1.2rem; }
.proof__n{ font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; font-variation-settings:"opsz" 144;
  font-size:clamp(2.8rem,1.8rem + 3.4vw,4.6rem); line-height:.9; letter-spacing:-.02em; color:var(--fg); }
.proof__n .suf{ color:var(--v-orange); }
.proof__l{ margin-top:.6rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); }
.proof__creds{ margin-top:clamp(2.2rem,1.4rem + 2vw,3.2rem); display:flex; flex-wrap:wrap; gap:.6rem 1.6rem;
  border-top:1px solid var(--line); padding-top:1.4rem; font-family:var(--f-mono); font-weight:500; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg2); }
.proof__creds li{ display:flex; align-items:center; gap:1.6rem; }
.proof__creds li::before{ content:""; width:5px; height:5px; background:var(--v-orange); transform:rotate(45deg); flex:0 0 auto; }

/* ============================ 04 · BEFORE / AFTER (slider hooks preserved) ============================ */
.ba2__head{ max-width:48ch; margin-bottom:clamp(1.8rem,1.2rem + 2vw,2.8rem); }
.ba2{ position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--v-night-2);
  --pos:50%; user-select:none; touch-action:none; }
.ba2 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba2 .ba-before{ clip-path:inset(0 0 0 var(--pos)); }
.ba2 .ba-tag{ position:absolute; top:1rem; z-index:4; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; background:rgba(16,14,12,.7); padding:.35rem .6rem; }
.ba2 .ba-tag.before{ right:1rem; } .ba2 .ba-tag.after{ left:1rem; }
.ba2 .ba-divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--v-orange); z-index:5; transform:translateX(-1px); }
.ba2 .ba-handle{ position:absolute; top:50%; left:var(--pos); z-index:6; width:52px; height:52px; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--v-orange); color:var(--v-orange-ink); border:0; cursor:ew-resize; display:grid; place-items:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6); }
.ba2 .ba-handle svg{ width:22px; height:22px; }
.ba2__hint{ margin-top:1rem; }

/* ============================ 05 · GALLERY ============================ */
.gal__head{ margin-bottom:clamp(1.8rem,1.2rem + 2vw,2.8rem); max-width:48ch; }
.gal{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(160px,15vw,250px); gap:clamp(.6rem,.4rem + .6vw,1rem); }
.gal figure{ position:relative; margin:0; overflow:hidden; background:var(--v-night-2); }
.gal figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.6s var(--v-ease); }
.gal figure:hover img{ transform:scale(1.05); }
.gal figcaption{ position:absolute; left:0; bottom:0; padding:1rem; font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:#fff; background:linear-gradient(0deg,rgba(12,10,9,.8),transparent);
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s var(--v-ease); width:100%; }
.gal figure:hover figcaption{ opacity:1; transform:none; }
.gal .g-a{ grid-column:span 7; grid-row:span 2; aspect-ratio:auto; }
.gal .g-b{ grid-column:span 5; }
.gal .g-c{ grid-column:span 5; }
.gal .g-d{ grid-column:span 6; }
.gal .g-e{ grid-column:span 6; }

/* ============================ 06 · PROCESS ============================ */
.proc__head{ margin-bottom:clamp(2rem,1.4rem + 3vw,3.5rem); max-width:40ch; }
.proc{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.proc__step{ padding:clamp(1.4rem,1rem + 1.4vw,2.2rem) clamp(1.2rem,.8rem + 1vw,1.8rem) 0 0; border-right:1px solid var(--line); }
.proc__step:last-child{ border-right:0; }
.proc__num{ font-family:var(--f-mono); font-weight:500; font-size:.72rem; letter-spacing:.16em; color:var(--v-orange); }
.proc__step h3{ font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; font-variation-settings:"opsz" 72;
  font-size:clamp(1.3rem,1.05rem + 1vw,1.7rem); line-height:1.08; letter-spacing:-.01em; color:var(--fg); margin:1rem 0 .6rem; }
.proc__step p{ color:var(--fg2); line-height:1.6; font-size:.98rem; margin:0; }

/* ============================ 07 · SERVICE AREA ============================ */
.area{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; }
.area__list{ list-style:none; margin:1.6rem 0 2rem; padding:0; border-top:1px solid var(--line); }
.area__list li{ display:flex; align-items:center; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--line);
  font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; font-size:clamp(1.2rem,1rem + 1vw,1.7rem);
  color:var(--fg); transition:padding-left .4s var(--v-ease); }
.area__list li::before{ content:""; width:6px; height:6px; background:var(--v-orange); transform:rotate(45deg); flex:0 0 auto; }
.area__list li:hover{ padding-left:.5rem; }
.area__coord{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; color:var(--fg3); margin-left:auto; text-transform:none; }
.area__map{ position:relative; margin:0; overflow:hidden; aspect-ratio:4/3; }
.area__map img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================ 08 · FAQ ============================ */
.faq{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:start; }
.faq__head{ position:sticky; top:96px; }
.faq__list{ border-top:1px solid var(--line); }
.faq__list details{ border-bottom:1px solid var(--line); }
.faq__list summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.3rem 0; font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; font-variation-settings:"opsz" 72;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem); color:var(--fg); line-height:1.2; }
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary .pm{ position:relative; width:16px; height:16px; flex:0 0 auto; }
.faq__list summary .pm::before,.faq__list summary .pm::after{ content:""; position:absolute; background:var(--v-orange); }
.faq__list summary .pm::before{ left:0; right:0; top:7.5px; height:1.5px; }
.faq__list summary .pm::after{ top:0; bottom:0; left:7.5px; width:1.5px; transition:transform .4s var(--v-ease); }
.faq__list details[open] summary .pm::after{ transform:scaleY(0); }
.faq__ans{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--v-ease); }
.faq__list details[open] .faq__ans{ grid-template-rows:1fr; }
.faq__ans > div{ overflow:hidden; }
.faq__ans p{ color:var(--fg2); line-height:1.65; margin:0 0 1.3rem; max-width:62ch; }
.faq__ans a{ color:var(--v-orange); }

/* ============================ 09 · ESTIMATE (hooks preserved) ============================ */
.est2{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:start; }
.est2__aside{ position:sticky; top:96px; }
.est2__aside .lede{ margin-top:1.3rem; max-width:38ch; }
.est2__alt{ margin-top:2rem; border-top:1px solid var(--line); }
.est2__alt a{ display:flex; align-items:center; gap:.9rem; padding:1.1rem 0; border-bottom:1px solid var(--line);
  color:var(--fg); transition:padding-left .35s var(--v-ease); }
.est2__alt a:hover{ text-decoration:none; padding-left:.5rem; }
.est2__alt a svg{ width:20px; height:20px; color:var(--v-orange); flex:0 0 auto; }
.est2__alt b{ display:block; font-family:var(--f-sans); font-weight:600; font-size:1rem; }
.est2__alt small{ display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; color:var(--fg3); text-transform:uppercase; margin-top:.15rem; }
.est2__form .form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.est2__form .field{ margin-top:1.2rem; }
.est2__form .field:first-child{ margin-top:0; }
.est2__form label{ display:block; font-family:var(--f-mono); font-weight:500; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg2); margin-bottom:.5rem; }
.est2__form label.consent{ text-transform:none; letter-spacing:0; font-family:var(--f-sans); font-size:.9rem; color:var(--fg2);
  display:flex; gap:.6rem; align-items:flex-start; font-weight:400; }
.est2__form .req{ color:var(--v-orange); }
.est2__form .hint{ color:var(--fg3); }
.est2__form input:not([type=checkbox]):not([type=file]),.est2__form select,.est2__form textarea{
  width:100%; font-family:var(--f-sans); font-size:1rem; color:var(--fg); background:transparent;
  border:0; border-bottom:1px solid var(--line2); padding:.7rem 0; border-radius:0; transition:border-color .3s ease; }
.est2__form input:focus,.est2__form select:focus,.est2__form textarea:focus{ outline:0; border-bottom-color:var(--v-orange); }
.est2__form textarea{ min-height:120px; resize:vertical; }
.est2__form select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--fg3) 50%),linear-gradient(135deg,var(--fg3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 1.35rem,calc(100% - 8px) 1.35rem; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.est2__form .file{ display:flex; align-items:center; gap:.7rem; padding:.8rem 0; border-bottom:1px dashed var(--line2);
  color:var(--fg2); cursor:pointer; font-size:.95rem; }
.est2__form .file svg{ width:20px; height:20px; color:var(--v-orange); }
.est2__form .file.has-files{ color:var(--fg); }
.est2__form input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; }
.est2__form .field-error{ display:block; color:#c0341d; font-size:.82rem; margin-top:.4rem; min-height:1em; }
.est2__form .hp{ position:absolute; left:-9999px; }
.est2__form .form-note{ display:flex; gap:.6rem; align-items:flex-start; margin-top:1.4rem; font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.06em; color:var(--fg3); line-height:1.5; }
.est2__form .form-note svg{ width:16px; height:16px; flex:0 0 auto; color:var(--fg3); }
.est2__submit{ display:flex; width:100%; align-items:center; justify-content:space-between; margin-top:1.8rem;
  padding:1.15rem 1.4rem; background:var(--v-orange); color:var(--v-orange-ink); border:0; border-radius:2px;
  font-family:var(--f-sans); font-weight:600; font-size:1.05rem; cursor:pointer; overflow:hidden; position:relative; isolation:isolate;
  transition:box-shadow .4s var(--v-ease); }
.est2__submit::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--v-orange-2); transform:translateY(101%); transition:transform .5s var(--v-ease); }
.est2__submit:hover::before{ transform:translateY(0); }
.est2__submit:hover{ box-shadow:0 16px 34px -16px rgba(242,106,33,.6); }
.est2__submit svg{ width:20px; height:20px; transition:transform .4s var(--v-ease); }
.est2__submit:hover svg{ transform:translateX(5px); }
.est2__submit:disabled{ cursor:wait; opacity:.72; box-shadow:none; }
.est2__form .form-submit-error{ margin-top:.8rem; }
.est2 .form-success{ display:none; border:1px solid var(--v-orange); background:#fff1e7; color:#24150d; padding:1.4rem; margin-bottom:1.4rem; box-shadow:0 12px 28px -24px rgba(23,19,14,.5); }
.est2 .form-success.show{ display:block; }
.est2 .form-success strong{ display:block; color:inherit; font-family:var(--f-serif); font-weight:600; font-size:1.2rem; }
.est2 .form-success p{ color:#4f382b; line-height:1.5; }
.est2 .form-success.is-partial{ border-left-width:5px; background:#fff8e5; color:#2b1d08; }
:root[data-theme="dark"] .est2 .form-success{ background:#2b1c14; color:#fff7ef; }
:root[data-theme="dark"] .est2 .form-success p{ color:#ead8cb; }
:root[data-theme="dark"] .est2 .form-success.is-partial{ background:#2b2412; color:#fff8df; }
.est2 .form-success a{ color:var(--v-orange); }

/* ---- tablet device frame around the estimate form ---- */
.est2 .tablet{ position:relative; border-radius:38px; padding:20px 20px 26px;
  background:linear-gradient(158deg,#33302b 0%,#1b1815 42%,#0d0b0a 100%);
  box-shadow:
     inset 0 1px 0 rgba(255,255,255,.10),
     inset 0 0 0 1px rgba(0,0,0,.55),
     0 2px 4px rgba(0,0,0,.6),
     0 44px 90px -34px rgba(0,0,0,.85); }
/* thin machined highlight ring just inside the bezel */
.est2 .tablet::before{ content:""; position:absolute; inset:7px; border-radius:31px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none; }
.est2 .tablet__cam{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:7px; height:7px;
  border-radius:50%; background:radial-gradient(circle at 38% 34%,#4a453d 0%,#15120f 62%,#000 100%);
  box-shadow:0 0 0 2px rgba(0,0,0,.5), 0 0 0 3px rgba(255,255,255,.04); }
.est2 .tablet__home{ position:absolute; left:50%; bottom:11px; transform:translateX(-50%);
  width:96px; height:4px; border-radius:4px; background:rgba(255,255,255,.14); }
.est2 .tablet__screen{
  /* paper surface tokens: the form reads as a light screen inside the dark tablet */
  --fg:var(--v-ink); --fg2:var(--v-ink-2); --fg3:var(--v-ink-3);
  --line:var(--v-hair); --line2:var(--v-hair-2); --bg:var(--v-paper);
  position:relative; background:var(--v-paper); color:var(--fg);
  border-radius:20px; padding:clamp(1.5rem,1rem + 1.8vw,2.4rem);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.5); }
@media (max-width:600px){
  .est2 .tablet{ border-radius:30px; padding:14px 14px 20px; }
  .est2 .tablet::before{ border-radius:24px; }
  .est2 .tablet__screen{ border-radius:16px; }
  .est2 .tablet__home{ width:74px; }
}

/* ============================ 10 · CLOSING ============================ */
.close2{ text-align:center; }
.close2 .dsp{ margin:1.2rem auto 0; max-width:18ch; }
.close2__sub{ margin:1.2rem auto 0; max-width:46ch; }
.close2__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.4rem; }

/* ============================ FOOTER restyle ============================ */
body[data-page] .site-footer h4{ font-family:var(--f-mono); font-weight:500; font-size:.68rem; letter-spacing:.16em; }
body[data-page] .site-footer .brand .wm b{ font-family:var(--f-serif); font-weight:500; text-transform:none; letter-spacing:-.01em; }
body[data-page] .site-footer .brand .wm span{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; }
body[data-page] .site-footer a,body[data-page] .site-footer p{ font-family:var(--f-sans); }
body[data-page] .footer-legal-note{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.02em; line-height:1.7; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  .seq{ grid-template-columns:1fr; gap:2.5rem; }
  .seq__stage{ position:static; order:-1; }
  .est2,.faq{ grid-template-columns:1fr; gap:2.5rem; }
  .est2__aside,.faq__head{ position:static; }
}
@media (max-width:880px){
  .thesis__body{ grid-template-columns:1fr; align-items:start; }
  .proof{ grid-template-columns:1fr; }
  .proc{ grid-template-columns:1fr 1fr; }
  .proc__step{ border-right:0; border-bottom:1px solid var(--line); padding-bottom:1.4rem; }
  .proc__step:nth-child(odd){ border-right:1px solid var(--line); }
  .area{ grid-template-columns:1fr; }
  .gal .g-a,.gal .g-b,.gal .g-c,.gal .g-d,.gal .g-e{ grid-column:span 6; grid-row:auto; aspect-ratio:4/3; }
  .seq__head{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .est2__form .form-row.two{ grid-template-columns:1fr; }
  .proc{ grid-template-columns:1fr; }
  .proc__step{ border-right:0 !important; }
  .gal .g-a,.gal .g-b,.gal .g-c,.gal .g-d,.gal .g-e{ grid-column:span 12; }
  .close2__actions{ flex-direction:column; }
  .close2__actions .cta-fill,.close2__actions .cta-line{ justify-content:center; }
  .h2v__actions{ flex-direction:column; align-items:flex-start; }
}

/* interactive service index: mobile shows thumbs inline instead of sticky stage */
@media (max-width:1024px){
  .seq__item{ grid-template-columns:auto 1fr; }
  .seq__go{ display:none; }
}
/* phones: no sticky-lock sequence here (JS is desktop-only >900px), so the tall
   rows that give the desktop image its lock travel would just be empty space. */
@media (max-width:900px){
  .seq__item{ min-height:auto; }
}

/* flat capture: cap the hero text layer so full-page headless shots flow */
.flat-shot .h2v{ min-height:520px; padding-bottom:2.2rem; }
.flat-shot .h2v__cue{ display:none; }

/* base styles.css uppercases all h1/h2/h3, the new editorial voice is mixed case
   (mono kickers/labels keep their own explicit uppercase) */
body[data-page] h1,
body[data-page] h2,
body[data-page] h3{ text-transform:none; }
.dsp,.h2v__title,.seq__name{ text-transform:none; }

/* base h1/h2/h3 set overflow-wrap:break-word (breaks display type mid-word) */
body[data-page] h1,body[data-page] h2,body[data-page] h3,
.dsp,.h2v__title,.seq__name,.area__list li,.faq__list summary{ overflow-wrap:normal; word-break:normal; hyphens:none; }

/* FAQ: neutralise the legacy .faq/details dark panel bleeding from styles.css */
.faq__list details,.faq__list summary,.faq__list details[open]{ background:transparent; border-top:0; }
.faq__list details{ border-bottom:1px solid var(--line); }

/* estimate form on a dark section: legacy night hairline is near-invisible for field underlines */
.sec--night .est2__form input:not([type=checkbox]):not([type=file]),
.sec--night .est2__form select,
.sec--night .est2__form textarea{ border-bottom-color:rgba(255,255,255,.26); }
.sec--night .est2__form .file{ border-bottom-color:rgba(255,255,255,.24); }
.sec--night .est2__form input:focus,
.sec--night .est2__form select:focus,
.sec--night .est2__form textarea:focus{ border-bottom-color:var(--v-orange); }
.sec--night .est2__alt a,.sec--night .est2__alt{ border-color:rgba(255,255,255,.14); }

/* legacy .faq summary forces uppercase + display font, keep the editorial mixed case */
.faq__list summary{ text-transform:none; }

/* the featured image is sticky — align the columns to the top so it pins from the top */
.seq{ align-items:start; }

/* ============================ FIXES (2026-08-27) ============================ */

/* FAQ: kill the legacy 4px left / 1px right box border, clean hairline rows only */
.faq__list{ border-left:0; border-right:0; border-bottom:0; }
.faq__list details{ border:0 !important; border-bottom:1px solid var(--line) !important; }
.faq__list details[open]{ border-bottom:1px solid var(--line) !important; }

/* PROCESS: remove full-height vertical dividers that dangle below short columns */
.proc{ column-gap:clamp(1.6rem,1rem + 2vw,3.2rem); }
.proc__step{ border-right:0 !important; padding-right:0; }
@media (max-width:880px){
  .proc__step{ border-right:0 !important; border-bottom:1px solid var(--line); padding-bottom:1.6rem; }
  .proc__step:nth-child(odd){ border-right:0 !important; }
  .proc__step:last-child{ border-bottom:0; }
}

/* ESTIMATE FORM: fully re-scope controls so legacy .field/.file styling can't
   bleed through in EITHER theme (was: white input boxes + black photo button in light mode) */
body[data-page] .est2__form input:not([type=checkbox]):not([type=file]),
body[data-page] .est2__form select,
body[data-page] .est2__form textarea{
  background-color:transparent; border:0; border-bottom:1px solid rgba(245,240,230,.28);
  border-radius:0; color:var(--fg); box-shadow:none;
}
:root[data-theme="light"] .est2__form input:not([type=checkbox]):not([type=file]),
:root[data-theme="light"] .est2__form select,
:root[data-theme="light"] .est2__form textarea{ border-bottom-color:rgba(23,19,14,.28); color:var(--v-ink); }
body[data-page] .est2__form input:focus,
body[data-page] .est2__form select:focus,
body[data-page] .est2__form textarea:focus{ border-bottom-color:var(--v-orange); outline:0; }
body[data-page] .est2__form input::placeholder,
body[data-page] .est2__form textarea::placeholder{ color:var(--fg3); }
body[data-page] .est2__form .file{
  background-color:transparent; border:0; border-bottom:1px dashed rgba(245,240,230,.28); color:var(--fg2);
}
:root[data-theme="light"] .est2__form .file{ border-bottom-color:rgba(23,19,14,.28); }
body[data-page] .est2__form .file.has-files{ color:var(--fg); }
body[data-page] .est2__form .consent{ color:var(--fg2); }

/* estimate form: legacy theme rules out-specify us (5 classes), force the reset */
body[data-page] .est2__form input:not([type=checkbox]):not([type=file]),
body[data-page] .est2__form select,
body[data-page] .est2__form textarea{
  background-color:transparent !important; border:0 !important;
  border-bottom:1px solid rgba(245,240,230,.28) !important; border-radius:0 !important;
  color:var(--fg) !important; box-shadow:none !important;
}
:root[data-theme="light"] .est2__form input:not([type=checkbox]):not([type=file]),
:root[data-theme="light"] .est2__form select,
:root[data-theme="light"] .est2__form textarea{
  border-bottom-color:rgba(23,19,14,.30) !important; color:var(--v-ink) !important;
}
body[data-page] .est2__form input:focus,
body[data-page] .est2__form select:focus,
body[data-page] .est2__form textarea:focus{ border-bottom-color:var(--v-orange) !important; }
/* restore the custom select chevron over the transparent background */
body[data-page] .est2__form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--fg3) 50%),linear-gradient(135deg,var(--fg3) 50%,transparent 50%) !important;
  background-position:calc(100% - 14px) 1.35rem,calc(100% - 8px) 1.35rem !important;
  background-size:6px 6px,6px 6px !important; background-repeat:no-repeat !important;
}

/* ============ READABILITY + FORM ALIGNMENT + SERVICES SPOTLIGHT (2026-08-27) ============ */

/* --- larger, more readable text across the page --- */
.kick{ font-size:.8rem; letter-spacing:.18em; }
.mono{ font-size:.82rem; }
.body{ font-size:1.1rem; line-height:1.68; }
.lede{ font-size:clamp(1.18rem, 1.05rem + .5vw, 1.5rem); }
.h2v__kick{ font-size:.82rem; }
.h2v__lede{ font-size:clamp(1.14rem, 1.02rem + .5vw, 1.4rem); }
.h2v__proof{ font-size:.8rem; }
.seq__n{ font-size:.92rem; }
.seq__go{ font-size:.7rem; }
.seq__desc{ font-size:1.08rem; }
.proof__l{ font-size:.82rem; }
.proof__creds{ font-size:.86rem; }
.proc__num{ font-size:.8rem; }
.proc__step p{ font-size:1.05rem; }
.area__coord{ font-size:.78rem; }
.thesis__seq{ font-size:.74rem; }
.thesis__cap,.gal figcaption,.seq__meta,.ba2 .ba-tag{ font-size:.7rem; }
.faq__ans p{ font-size:1.06rem; }

/* estimate form: larger labels, inputs and helper text */
.est2__form label{ font-size:.8rem; letter-spacing:.1em; }
body[data-page] .est2__form input:not([type=checkbox]):not([type=file]),
body[data-page] .est2__form select,
body[data-page] .est2__form textarea{ font-size:1.08rem !important; }
.est2__form .file{ font-size:1rem; }
.est2__form .form-note{ font-size:.72rem; letter-spacing:.04em; }
.est2__alt b{ font-size:1.06rem; }
.est2__alt small{ font-size:.72rem; }
.est2 .form-success strong{ font-size:1.35rem; }
.est2__form .consent{ font-size:.98rem; }

/* --- FORM FIELD ALIGNMENT: paired fields must top-align (2nd field was pushed down 1.2rem) --- */
.est2__form .field{ margin-top:0; }
.est2__form .form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.5rem; align-items:start; }
.est2__form .form-row.two .field{ margin-top:0; }
#estimate-form > *{ margin-top:1.6rem; }
#estimate-form > *:first-child{ margin-top:0; }
@media (max-width:560px){ .est2__form .form-row.two{ grid-template-columns:1fr; } }

/* ============================ COMPLETION: FORMS + BOOKING ============================ */
/* Keep every form control on the active theme surface, including browser autofill and
   native select menus. The homepage tablet now follows day/night instead of forcing white. */
.sec--night{ --form-surface:var(--v-night); }
:root[data-theme="light"] .sec--night{ --form-surface:var(--v-paper); }
:root:not([data-theme="light"]) .est2 .tablet__screen{
  --fg:var(--v-cream); --fg2:var(--v-cream-2); --fg3:var(--v-cream-2);
  --line:var(--v-night-hair); --line2:rgba(245,240,230,.3); --bg:var(--v-night-2);
  --form-surface:var(--v-night-2);
  background:var(--v-night-2); color:var(--fg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.04);
}
:root[data-theme="light"] .est2 .tablet__screen{
  --form-surface:var(--v-paper); background:var(--v-paper); color:var(--v-ink);
}
body[data-page] .est2__form select option{ background:var(--form-surface); color:var(--fg); }
body[data-page] .est2__form input:-webkit-autofill,
body[data-page] .est2__form input:-webkit-autofill:hover,
body[data-page] .est2__form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--fg) !important;
  -webkit-box-shadow:0 0 0 1000px var(--form-surface) inset !important;
  caret-color:var(--fg);
}
body[data-page] .est2__form input[type="checkbox"],
body[data-page] .est2__form input[type="radio"]{ accent-color:var(--v-orange); }
body[data-page] .est2__form .field-error{ color:#ff9f80; font-weight:600; }
:root[data-theme="light"] body[data-page] .est2__form .field-error{ color:#a62917; }
body[data-page] .est2__form .field-help{ margin:.55rem 0 0; color:var(--fg3); font-size:.86rem; line-height:1.45; }
body[data-page] #consultation-booking{ scroll-margin-top:110px; }

body[data-page] .form-secondary{
  margin-top:.85rem; padding:.72rem 1rem; border:1px solid var(--line2); border-radius:8px;
  background:transparent; color:var(--fg); font:600 .92rem var(--f-sans); cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
body[data-page] .form-secondary:hover,
body[data-page] .form-secondary:focus-visible{ border-color:var(--v-orange); background:rgba(242,106,33,.1); }
body[data-page] .form-secondary:disabled{ cursor:wait; opacity:.65; }
body[data-page] .appointment-slots{ margin-top:1rem; }
body[data-page] .booking-calendar{
  display:block; padding:1rem; border:1px solid var(--line2); border-radius:12px;
  background:color-mix(in srgb,var(--form-surface) 94%,var(--v-orange) 6%);
}
body[data-page] .booking-calendar__status{ margin:0 0 .9rem; color:var(--fg2); font-size:.88rem; line-height:1.45; }
body[data-page] .booking-calendar__header{ display:grid; grid-template-columns:2.4rem 1fr 2.4rem; gap:.5rem; align-items:center; margin-bottom:.7rem; }
body[data-page] .booking-calendar__header h3{ margin:0; color:var(--fg); font:600 1rem var(--f-sans); text-align:center; }
body[data-page] .booking-calendar__nav{
  width:2.4rem; height:2.4rem; border:1px solid var(--line2); border-radius:8px;
  background:transparent; color:var(--fg); font:600 1.5rem/1 var(--f-sans); cursor:pointer;
}
body[data-page] .booking-calendar__nav:hover:not(:disabled),
body[data-page] .booking-calendar__nav:focus-visible{ border-color:var(--v-orange); background:rgba(242,106,33,.1); }
body[data-page] .booking-calendar__nav:disabled{ opacity:.28; cursor:not-allowed; }
body[data-page] .booking-calendar__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.3rem; }
body[data-page] .booking-calendar__weekday{
  padding:.25rem 0; color:var(--fg3); font:500 .63rem var(--f-mono); letter-spacing:.04em; text-align:center; text-transform:uppercase;
}
body[data-page] .booking-calendar__blank{ min-height:2.5rem; }
body[data-page] .booking-calendar__day{
  position:relative; min-width:0; min-height:2.5rem; padding:.35rem .15rem; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--fg); font:600 .88rem var(--f-sans); cursor:pointer;
}
body[data-page] .booking-calendar__day:disabled{
  background:color-mix(in srgb,var(--fg) 5%,transparent); color:var(--fg3); opacity:.45; cursor:not-allowed; text-decoration:line-through;
}
body[data-page] .booking-calendar__day.is-available{ border-color:rgba(242,106,33,.55); background:rgba(242,106,33,.1); color:var(--fg); }
body[data-page] .booking-calendar__day.is-available:hover,
body[data-page] .booking-calendar__day.is-available:focus-visible{ border-color:var(--v-orange); background:rgba(242,106,33,.18); }
body[data-page] .booking-calendar__day.is-selected{ border-color:var(--v-orange); background:var(--v-orange); color:var(--v-orange-ink); box-shadow:0 0 0 1px var(--v-orange); }
body[data-page] .booking-calendar__day.is-today::after{
  content:""; position:absolute; left:50%; bottom:.18rem; width:4px; height:4px; border-radius:50%; background:var(--v-orange); transform:translateX(-50%);
}
body[data-page] .booking-calendar__day.is-selected::after{ background:var(--v-orange-ink); }
body[data-page] .booking-times{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
body[data-page] .booking-times h4{ margin:0 0 .7rem; color:var(--fg); font:600 .92rem var(--f-sans); }
body[data-page] .booking-times__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
body[data-page] .booking-times__empty{ margin:0; color:var(--fg2); font-size:.88rem; line-height:1.5; }
body[data-page] .appointment-slot{ margin:0; }
body[data-page] .appointment-slot input{ position:absolute; width:1px; height:1px; opacity:0; }
body[data-page] .appointment-slot span{
  display:block; min-height:100%; padding:.8rem .9rem; border:1px solid var(--line2); border-radius:8px;
  color:var(--fg2); font:500 .85rem/1.4 var(--f-sans); cursor:pointer; text-transform:none; letter-spacing:0;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
body[data-page] .appointment-slot input:checked + span{
  border-color:var(--v-orange); background:rgba(242,106,33,.14); color:var(--fg);
  box-shadow:0 0 0 1px var(--v-orange);
}
body[data-page] .appointment-slot input:focus-visible + span{ outline:2px solid var(--v-orange); outline-offset:3px; }
body[data-page] .est2__form .file{
  border:1px dashed var(--line2) !important; border-radius:8px; padding:.9rem 1rem;
  transition:border-color .2s ease,background .2s ease;
}
body[data-page] .est2__form .file:hover,
body[data-page] .est2__form .file:focus-within,
body[data-page] .est2__form .file.has-files{ border-color:var(--v-orange) !important; background:rgba(242,106,33,.08); }

@media (max-width:600px){
  body[data-page] .booking-calendar{ padding:.8rem; }
  body[data-page] .booking-calendar__grid{ gap:.2rem; }
  body[data-page] .booking-calendar__day{ min-height:2.25rem; font-size:.82rem; }
  body[data-page] .booking-times__grid{ grid-template-columns:1fr; }
  body[data-page] .form-secondary{ width:100%; }
}

/* --- SERVICES SPOTLIGHT, type-forward composition copied from services.html, restyled --- */
.svch2__lead h2{ max-width:14ch; margin-top:.9rem; }
.svch2__body{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(1.75rem, 1rem + 4vw, 5rem);
  align-items:start; margin-top:clamp(1.6rem, 1rem + 3vw, 3.2rem); }
.svch2__inset{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--v-paper-2); margin:0; }
.svch2__inset img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.6s var(--v-ease); }
.svch2:hover .svch2__inset img{ transform:scale(1.04); }
.svch2__ticks{ list-style:none; margin:1.7rem 0 0; padding:0; border-top:1px solid var(--line); }
.svch2__ticks li{ display:flex; gap:.9rem; align-items:flex-start; padding:.9rem 0; border-bottom:1px solid var(--line);
  color:var(--fg2); line-height:1.55; font-size:1.06rem; }
.svch2__ticks .ico{ width:18px; height:18px; flex:0 0 auto; margin-top:.2rem; color:var(--v-orange); }
.svch2 .cta{ margin-top:1.9rem; }
@media (max-width:880px){ .svch2__body{ grid-template-columns:1fr; gap:1.9rem; } }

/* orange CTA band, closing (copied from services rs--closing, restyled) */
.sec--accent{ background:var(--v-orange); --fg:var(--v-orange-ink); --fg2:rgba(23,19,14,.84);
  --fg3:rgba(23,19,14,.72); --line:rgba(23,19,14,.22); --line2:rgba(23,19,14,.4); }
.sec--accent .kick{ color:var(--v-orange-ink); }
.sec--accent .kick::before{ background:var(--v-orange-ink); opacity:.65; }
.sec--accent .close2__sub{ color:rgba(23,19,14,.84); }
.sec--accent .cta{ color:var(--v-orange-ink); font-family:var(--f-sans); font-weight:600; font-size:1.05rem; }
.sec--accent .cta::after{ background:var(--v-orange-ink); }
.sec--accent .cta svg{ width:1.1em; height:1.1em; }

/* gallery heading: let it sit on one line (was capped at 48ch, forcing a 2-line wrap) */
.gal__head{ max-width:none; }
.gal__head .body{ max-width:52ch; }
.gal__head .dsp{ white-space:nowrap; }
@media (max-width:560px){ .gal__head .dsp{ white-space:normal; } }

/* ============ STANDARD CTA (2026-08-27), one line+arrow style, larger, white on hover ============ */
.cta{ font-size:1.2rem; padding-block:.45rem; gap:.75rem; }
.cta::after{ bottom:-2px; height:2px; background:currentColor; }
.cta svg{ width:1.15em; height:1.15em; }
.cta:hover{ color:#fff; gap:1.15rem; }
.cta:hover::after,.cta:focus-visible::after{ transform:scaleX(1); background:#fff; }
.cta:hover svg{ transform:translateX(6px); }

/* closing (orange band): ink at rest, noticeably larger, white text + white underline on hover */
.sec--accent .cta{ font-size:1.4rem; color:var(--v-orange-ink); font-weight:600; }
.sec--accent .cta::after{ background:currentColor; }
.sec--accent .cta:hover{ color:#fff; }
.close2__actions{ gap:1.4rem 2.6rem; margin-top:2.8rem; }

/* hero: two white line+arrow CTAs (was fill + outline) */
.h2v__actions{ gap:1.3rem 2.6rem; align-items:center; }
.h2v__actions .cta{ color:#fff; font-size:1.2rem; }
.h2v__actions .cta::after{ background:#fff; }
.h2v__actions .cta:hover{ color:#fff; }

/* header CTA → the same line+arrow style (homepage), sized for the header bar */
body[data-page] .header-cta .btn--primary{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  color:#fff !important; padding:.4rem 0 !important; min-height:0 !important; box-shadow:none !important;
  font-family:var(--f-sans); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:.5rem; position:relative; transition:gap .35s var(--v-ease); }
body[data-page] .header-cta .btn--primary::before{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#fff;
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--v-ease); }
body[data-page] .header-cta .btn--primary::after{
  content:""; width:1.05em; height:1.05em; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .4s var(--v-ease); }
body[data-page] .header-cta .btn--primary:hover{ gap:.8rem; }
body[data-page] .header-cta .btn--primary:hover::before{ transform:scaleX(1); }
body[data-page] .header-cta .btn--primary:hover::after{ transform:translateX(4px); }

/* header CTA: use the real arrow SVG (mask was unreliable) */
body[data-page] .header-cta .btn--primary::after{ content:none; }
body[data-page] .header-cta .btn--primary svg{ width:1.05em; height:1.05em; flex:0 0 auto;
  transition:transform .4s var(--v-ease); }
body[data-page] .header-cta .btn--primary:hover svg{ transform:translateX(4px); }

/* ============ LIVE SERVICE-AREA MAP (Leaflet) ============ */
.area__map--live{ position:relative; overflow:hidden; aspect-ratio:4/3; min-height:300px;
  background:var(--v-night-2); outline:1px solid rgba(255,255,255,.06); }
.area__map--live .leaflet-container{ width:100%; height:100%; background:var(--v-night-2);
  font-family:var(--f-sans); outline:none; }
.area__map--live .leaflet-control-attribution{ background:rgba(16,14,12,.72); color:rgba(245,240,230,.55);
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.02em; padding:1px 6px; }
.area__map--live .leaflet-control-attribution a{ color:rgba(245,240,230,.72); }
/* orange teardrop pins with mono labels */
.ee-pin{ overflow:visible; }
.ee-pin__dot{ position:absolute; left:0; top:0; width:16px; height:16px; background:var(--v-orange);
  border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 3px 7px rgba(0,0,0,.55); }
.ee-pin__dot::after{ content:""; position:absolute; top:4.5px; left:4.5px; width:7px; height:7px;
  border-radius:50%; background:#100E0C; }
.ee-pin__label{ position:absolute; left:22px; top:-1px; white-space:nowrap; font-family:var(--f-mono);
  font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:rgba(16,14,12,.85); padding:.22rem .5rem; border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.4); }

/* ============ CTA v3, ORANGE PARALLELOGRAM (2026-08-27) ============
   Orange fill, no border, parallelogram (clip-path keeps the text straight).
   Text: dark mode = white → black on hover; light mode = black → white on hover. */
.cta{ --slant:.85em; display:inline-flex; align-items:center; gap:.55rem;
  background:var(--v-orange); color:#fff; border:0; border-radius:0; padding:.92rem 1.9rem;
  font-family:var(--f-sans); font-weight:700; font-size:1.1rem; letter-spacing:.01em; line-height:1;
  clip-path:polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transition:color .3s ease, transform .3s var(--v-ease), box-shadow .3s var(--v-ease); }
.cta::after{ content:none !important; display:none !important; }
.cta svg{ width:1.02em; height:1.02em; transition:transform .35s var(--v-ease); }
.cta:hover{ color:#000; gap:.75rem; transform:translateY(-2px); text-decoration:none;
  box-shadow:0 12px 26px -12px rgba(242,106,33,.7); }
.cta:hover svg{ transform:translateX(4px); }
:root[data-theme="light"] .cta{ color:#000; }
:root[data-theme="light"] .cta:hover{ color:#fff; }

/* hero (dark video): follows the same mode rule */
.h2v__actions{ gap:1.1rem 1.4rem; }
.h2v__actions .cta{ color:#fff; }
.h2v__actions .cta:hover{ color:#000; }
:root[data-theme="light"] .h2v__actions .cta{ color:#000; }
:root[data-theme="light"] .h2v__actions .cta:hover{ color:#fff; }

/* closing (orange band): an orange button would vanish → ink parallelogram for contrast */
.sec--accent .cta{ background:var(--v-orange-ink); color:#fff; font-size:1.2rem; }
.sec--accent .cta:hover{ color:var(--v-orange); box-shadow:0 12px 26px -12px rgba(0,0,0,.5); }
:root[data-theme="light"] .sec--accent .cta{ background:var(--v-orange-ink); color:#fff; }
:root[data-theme="light"] .sec--accent .cta:hover{ color:var(--v-orange); }

/* header CTA → orange parallelogram (overrides the earlier line style) */
body[data-page] .header-cta .btn--primary{
  background:var(--v-orange) !important; color:#fff !important; border:0 !important; border-radius:0 !important;
  padding:.62rem 1.35rem !important; min-height:0 !important; box-shadow:none !important;
  clip-path:polygon(.75em 0, 100% 0, calc(100% - .75em) 100%, 0 100%);
  font-family:var(--f-sans); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:.45rem; }
body[data-page] .header-cta .btn--primary::before,
body[data-page] .header-cta .btn--primary::after{ content:none !important; display:none !important; }
body[data-page] .header-cta .btn--primary svg{ width:1em; height:1em; transition:transform .35s var(--v-ease); }
body[data-page] .header-cta .btn--primary:hover{ color:#000 !important; gap:.6rem; }
body[data-page] .header-cta .btn--primary:hover svg{ transform:translateX(3px); }
:root[data-theme="light"] body[data-page] .header-cta .btn--primary{ color:#000 !important; }
:root[data-theme="light"] body[data-page] .header-cta .btn--primary:hover{ color:#fff !important; }

/* form submit: same orange fill + parallelogram + mode-based text */
.est2__submit{ clip-path:polygon(.7em 0, 100% 0, calc(100% - .7em) 100%, 0 100%); color:#fff; border-radius:0; }
.est2__submit:hover{ color:#000; }
:root[data-theme="light"] .est2__submit{ color:#000; }
:root[data-theme="light"] .est2__submit:hover{ color:#fff; }
.est2__submit,.est2__submit *{ color:inherit; }

/* ============ GOOGLE SERVICE-AREA MAP (locked embed + projected pins) ============ */
.area__map--live .ee-gmap{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  pointer-events:none; filter:grayscale(.15) contrast(1.02); }
.ee-gmap__pins{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.ee-pin--abs{ position:absolute; left:0; top:0; transform:translate(-8px,-16px); }

/* taller map so zoom-8 fits Citrus→Tampa Bay→Sarasota with margin */
.area__map--live{ aspect-ratio:auto; height:clamp(440px, 34vw, 560px); min-height:440px; }

/* ============ CTA v4, ROUNDED parallelogram + shadow (skewed pseudo bg) ============
   Replaces the sharp clip-path: a skewed ::before carries the orange fill, rounded
   corners and the drop shadow, while the button text stays upright. */
.cta{ --slant:11deg; position:relative; isolation:isolate;
  background:transparent !important; clip-path:none !important; box-shadow:none !important;
  padding:.95rem 2.15rem; overflow:visible; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--v-orange);
  transform:skewX(calc(-1 * var(--slant))); border-radius:9px;
  box-shadow:0 16px 30px -12px rgba(242,106,33,.6), 0 5px 12px -5px rgba(0,0,0,.4);
  transition:transform .35s var(--v-ease), box-shadow .35s var(--v-ease), background .3s ease; }
.cta:hover{ box-shadow:none !important; }
.cta:hover::before{ transform:skewX(calc(-1 * var(--slant))) translateY(-2px);
  box-shadow:0 22px 38px -12px rgba(242,106,33,.72), 0 7px 16px -6px rgba(0,0,0,.45); }

/* closing (orange band): ink fill + darker shadow for contrast */
.sec--accent .cta::before{ background:var(--v-orange-ink);
  box-shadow:0 18px 34px -12px rgba(0,0,0,.55), 0 5px 12px -5px rgba(0,0,0,.45); }
.sec--accent .cta:hover::before{ box-shadow:0 24px 42px -12px rgba(0,0,0,.62), 0 7px 16px -6px rgba(0,0,0,.5); }

/* header CTA: rounded skewed pseudo + shadow */
body[data-page] .header-cta .btn--primary{ clip-path:none !important; background:transparent !important;
  box-shadow:none !important; overflow:visible; position:relative; isolation:isolate; }
body[data-page] .header-cta .btn--primary::before{ content:"" !important; display:block !important;
  position:absolute; inset:0; z-index:-1; background:var(--v-orange); transform:skewX(-11deg); border-radius:7px;
  box-shadow:0 10px 20px -10px rgba(242,106,33,.6), 0 3px 7px -3px rgba(0,0,0,.35);
  transition:transform .3s var(--v-ease), box-shadow .3s var(--v-ease); }
body[data-page] .header-cta .btn--primary:hover::before{ transform:skewX(-11deg) translateY(-1px); }

/* form submit: rounded + shadow (kept full-width, no skew on a wide bar) */
.est2__submit{ clip-path:none !important; border-radius:10px !important; overflow:hidden;
  box-shadow:0 16px 30px -12px rgba(242,106,33,.5), 0 5px 12px -5px rgba(0,0,0,.35); }

/* ============ INNER-PAGE PRIMITIVES (services / about / contact / docs) ============ */
/* intro/page header */
.pghead{ }
.pghead .crumb{ font-family:var(--f-mono); font-weight:500; text-transform:uppercase; letter-spacing:.18em;
  font-size:.7rem; color:var(--fg3); margin:0 0 1.3rem; }
.pghead .crumb a{ color:inherit; text-decoration:none; }
.pghead .crumb a:hover{ color:var(--v-orange); }
.pghead .lede{ margin-top:1.4rem; max-width:56ch; }

/* alternating service rows */
.svc-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; }
.svc-row--rev .svc-row__media{ order:2; }
.svc-row__media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--v-paper-2); margin:0; }
.svc-row__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.6s var(--v-ease); }
.svc-row:hover .svc-row__media img{ transform:scale(1.04); }
.svc-row .kick{ margin-bottom:.9rem; }
.svc-row h2{ margin-top:.4rem; }
.svc-row .lede{ margin-top:1.2rem; }
.svc-ticks{ list-style:none; margin:1.6rem 0 0; padding:0; border-top:1px solid var(--line); }
.svc-ticks li{ display:flex; gap:.9rem; align-items:flex-start; padding:.85rem 0; border-bottom:1px solid var(--line);
  color:var(--fg2); line-height:1.55; font-size:1.05rem; }
.svc-ticks .ico{ width:18px; height:18px; flex:0 0 auto; margin-top:.2rem; color:var(--v-orange); }
.svc-cred{ margin-top:1.5rem; font-family:var(--f-mono); font-weight:600; font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--fg3); }
.svc-cred span{ color:var(--v-orange); }
.svc-row .cta{ margin-top:1.9rem; }
@media (max-width:860px){ .svc-row{ grid-template-columns:1fr; } .svc-row--rev .svc-row__media{ order:0; } }

/* generic credential/feature list + about layout */
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,1rem + 2vw,3rem); }
.feat__cell{ border-top:1px solid var(--line); padding-top:1.2rem; }
.feat__cell h3{ font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; font-variation-settings:"opsz" 72;
  font-size:clamp(1.3rem,1.05rem + 1vw,1.7rem); line-height:1.1; color:var(--fg); margin:0 0 .5rem; }
.feat__cell p{ color:var(--fg2); line-height:1.6; margin:0; }
@media (max-width:800px){ .feat{ grid-template-columns:1fr; } }

/* about split */
.aboutrow{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; }
.aboutrow__media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--v-paper-2); margin:0; }
.aboutrow__media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:800px){ .aboutrow{ grid-template-columns:1fr; } }

/* doc pages (privacy / terms), editorial legal type */
.docwrap{ max-width:74ch; }
.docwrap h2{ font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; text-transform:none;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); line-height:1.12; color:var(--fg); margin:2.6rem 0 .9rem; }
.docwrap h3{ font-family:var(--f-sans); font-weight:700; text-transform:none; font-size:1.1rem; color:var(--fg); margin:1.8rem 0 .6rem; }
.docwrap p,.docwrap li{ color:var(--fg2); line-height:1.7; font-size:1.05rem; }
.docwrap p{ margin:0 0 1rem; }
.docwrap ul,.docwrap ol{ margin:0 0 1.2rem 1.2rem; }
.docwrap li{ margin:.4rem 0; }
.docwrap a{ color:var(--v-orange); }
.docwrap strong{ color:var(--fg); }
.doc-meta{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg3); margin-bottom:2rem; }

.feat--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .feat--4{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .feat--4{ grid-template-columns:1fr; } }
.feat__cell .ico{ width:22px; height:22px; color:var(--v-orange); margin-bottom:.8rem; display:block; }
.arealist{ list-style:none; margin:1.6rem 0 2rem; padding:0; border-top:1px solid var(--line); max-width:36rem; }
.arealist li{ display:flex; align-items:center; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--line);
  font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; font-size:clamp(1.2rem,1rem + 1vw,1.7rem); color:var(--fg); }
.arealist li::before{ content:""; width:7px; height:7px; background:var(--v-orange); transform:rotate(45deg); flex:0 0 auto; }

.docwrap h1{ font-family:var(--f-serif); font-optical-sizing:auto; font-weight:400; text-transform:none;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem); line-height:1.1; color:var(--fg); margin:0 0 1rem; }
.docwrap blockquote{ margin:1.2rem 0; padding:1rem 1.2rem; border-left:2px solid var(--v-orange);
  background:rgba(242,106,33,.05); color:var(--fg2); }
.docwrap blockquote p{ margin:0; }
.docwrap hr{ border:0; border-top:1px solid var(--line); margin:2rem 0; }
.docwrap code{ font-family:var(--f-mono); font-size:.86em; background:var(--v-paper-2); padding:.1em .35em; border-radius:3px; color:var(--fg); }
.draft-banner{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.02em; line-height:1.6; color:var(--fg2);
  border:1px solid var(--line2); border-left:3px solid var(--v-orange); padding:1rem 1.2rem; margin-bottom:2.4rem; border-radius:0 6px 6px 0; }
.draft-banner strong{ color:var(--fg); }

.draft-banner{ background:var(--v-paper-2) !important; }

/* ============ CTA bg fix + GLASS HEADER (2026-08-27) ============
   The orange fill was a z-index:-1 ::before; a backdrop-filter ancestor (glass
   header) renders negative-z pseudos behind the blur, hiding it. Use normal
   paint order instead (::before sits under the text, above a transparent bg). */
.cta{ isolation:auto; }
.cta::before{ z-index:auto; }
.cta > *{ position:relative; z-index:1; }
body[data-page] .header-cta .btn--primary{ isolation:auto; }
body[data-page] .header-cta .btn--primary::before{ z-index:auto; }
body[data-page] .header-cta .btn--primary > *,
body[data-page] .header-cta .btn--primary svg{ position:relative; z-index:1; }

/* glass header */
body[data-page] .site-header{
  background:rgba(18,15,12,.55);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.12); }
body[data-page] .site-header.scrolled{ background:rgba(18,15,12,.74); }

/* header CTA: kill the leftover height:2px from the old underline ::before so the orange fills */
body[data-page] .header-cta .btn--primary::before{
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:auto !important; height:auto !important; }

/* correct layering: contain the skewed ::before with isolation and drop it below the
   text (z-index:-1). isolation keeps the negative-z pseudo from falling behind the glass. */
.cta{ isolation:isolate !important; }
.cta::before{ z-index:-1 !important; }
.cta > *{ z-index:auto; }
body[data-page] .header-cta .btn--primary{ isolation:isolate !important; }
body[data-page] .header-cta .btn--primary::before{ z-index:-1 !important; height:auto !important; top:0 !important; bottom:0 !important; }
body[data-page] .header-cta .btn--primary > *,
body[data-page] .header-cta .btn--primary svg{ z-index:auto; }