/* =========================================================================
   BUILD BUSY · "Always Booked" conversion-site template  ·  VISUAL LAYER
   -------------------------------------------------------------------------
   LOCKED DESIGN DIRECTION (warm-dark, distilled from 6 Awwwards references,
   see vault: "WaaS - Master Design Direction.md"):

     · PALETTE. Warm near-black ground (#15120E), warm cream text (#F5EFE6),
       ONE hot ember accent (#00B894), a gold micro-accent (#F4D88C) for trust.
       "Premium detailing bay at night." The deliberate opposite of light-generic.
     · TYPE. A big, confident, tight-tracked grotesk (Space Grotesk, self-hosted)
       for display + body, paired with a mono (Space Mono, self-hosted) for the
       eyebrows / labels / meta. Extreme size + weight contrast.
     · MOTION. Light, smooth, restrained. Scroll reveals + ONE signature moment
       (the glowing booking-card mock). No WebGL, no scroll-jacking.
     · COMPOSITION. Editorial, asymmetric, huge type, generous negative space,
       a photo-forward before/after gallery (ships zero-photo-safe).

   Zero external dependencies. Fonts are self-hosted woff2 (latin subset) in
   assets/fonts/. No CDN, no network fetch. Deploys free on Cloudflare Pages.
   Copy + merge tokens are LOCKED; this file is the visual system only.
   8px spacing rhythm throughout.
   ========================================================================= */

/* ---- Self-hosted fonts (latin subset woff2, zero network calls) ---- */
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:300 700;            /* variable range: one file, all weights */
  font-display:swap;
  src:url("assets/fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Space Mono";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/space-mono-400-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Space Mono";
  font-style:normal; font-weight:700; font-display:swap;
  src:url("assets/fonts/space-mono-700-latin.woff2") format("woff2");
}

/* ---- Design tokens ---- */
:root{
  /* Warm-dark ground (warm-tinted near-black, NOT flat black, NOT SaaS-navy) */
  --bg:        #15120E;   /* deepest warm near-black page ground */
  --bg-2:      #1C1813;   /* raised band */
  --panel:     #221D16;   /* card surface */
  --panel-2:   #2A2419;   /* raised card / hover */
  --line:      rgba(245,239,230,.10);   /* warm hairline */
  --line-2:    rgba(245,239,230,.17);   /* stronger hairline */

  /* Warm cream text */
  --cream:        #F5EFE6;   /* primary text */
  --cream-bright: #F9F4EB;   /* strong / headings */
  --cream-soft:   #C7BCA9;   /* body paragraphs on dark */
  --cream-mute:   #93897A;   /* meta / muted */

  /* ONE hot accent (Baunfire / Zajno ember red-orange) */
  --ember:        #00B894;
  --ember-bright: #29C3A5;
  --ember-press:  #009E7F;
  --ember-soft:   rgba(0,184,148,.13);   /* wash for chips/icons */
  --ember-line:   rgba(0,184,148,.34);
  /* Text color that sits ON the accent fill. Near-black clears WCAG AA on the
     default ember (5.3:1) and on bright client accents. clone_site.py should
     override --on-accent to #F9F4EB for a DARK client accent (luminance too low
     for dark text); see the accent-swap step. */
  --on-accent:    #15120E;

  /* Gold micro-accent (Nectar warm gold) - trust + premium, used sparingly */
  --gold:      #F4D88C;
  --gold-soft: rgba(244,216,140,.14);

  /* Booking-card is a bright cream product-UI surface (the signature glow) */
  --card-bg:    #F9F4EB;
  --card-ink:   #1C1813;
  --card-soft:  #6E6456;
  --card-line:  #E5DAC6;
  --card-tint:  #EFE7D7;

  /* Fluid type scale (bigger + tighter than a default) */
  --fs-eyebrow: clamp(.7rem, .66rem + .22vw, .8rem);
  --fs-body:    clamp(1rem, .97rem + .3vw, 1.14rem);
  --fs-lead:    clamp(1.16rem, 1.03rem + .7vw, 1.5rem);
  --fs-h3:      clamp(1.14rem, 1.02rem + .55vw, 1.38rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.7vw, 3.4rem);
  --fs-h1:      clamp(2.7rem, 1.6rem + 4.6vw, 5.2rem);

  --wrap: 1160px;
  --wrap-narrow: 720px;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;

  /* Elevation: deep black shadows + ember glow for actions */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --shadow:     0 10px 26px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:  0 30px 70px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.4);
  --glow-ember: 0 12px 34px rgba(0,184,148,.34);

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body:    "Space Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset-ish ---- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.62;
  color:var(--cream);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
p{ margin:0; }
h1,h2,h3{ margin:0; }
strong{ font-weight:700; color:var(--cream-bright); }

/* Whisper of warm grain over the whole page (subtle texture, kills the flat
   digital cleanliness). Inline SVG noise = zero network requests. */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site-header, main, .site-footer, .sticky-bar{ position:relative; z-index:2; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.narrow{ max-width:var(--wrap-narrow); }
.center{ text-align:center; }

/* Eyebrow / label / meta: the editorial MONO signature */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-mute);
}

/* Accessible keyboard focus everywhere */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:8px;
}

/* ---- Buttons + micro-interactions ---- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-mono); font-weight:700; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:0; border-radius:999px;
  padding:.92rem 1.6rem; line-height:1.1;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  will-change:transform;
}
/* sheen sweep on hover */
.btn::after{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); transition:left .55s var(--ease); pointer-events:none;
}
.btn:hover::after{ left:160%; }
.btn:active{ transform:translateY(1px) scale(.992); }
.btn-lg{ padding:1.06rem 1.95rem; font-size:1.02rem; }
.btn-xl{ padding:1.2rem 2.3rem; font-size:1.06rem; }
.btn .ico{ width:1.15em; height:1.15em; flex:none; }

/* Primary = solid ember (the one hot action color) */
.btn-primary{ background:var(--ember); color:var(--on-accent); box-shadow:var(--glow-ember); }
.btn-primary:hover{ background:var(--ember-bright); transform:translateY(-2px); box-shadow:0 18px 42px rgba(0,184,148,.46); }

/* "Turn it on" = also ember-solid (the money action); differentiated by context */
.btn-turnon{ background:var(--ember); color:var(--on-accent); box-shadow:var(--glow-ember); }
.btn-turnon:hover{ background:var(--ember-bright); transform:translateY(-2px); box-shadow:0 18px 42px rgba(0,184,148,.46); }

/* Ghost = cream outline on dark */
.btn-ghost{ background:transparent; color:var(--cream); border:1.5px solid var(--line-2); }
.btn-ghost:hover{ background:rgba(245,239,230,.06); border-color:var(--cream); transform:translateY(-2px); }

/* Header CTA = ember pill */
.btn-header{ background:var(--ember); color:var(--on-accent); min-height:44px; padding:.6rem 1.05rem; font-size:.82rem; letter-spacing:.02em; }
.btn-header:hover{ background:var(--ember-bright); transform:translateY(-1px); box-shadow:var(--glow-ember); }
.btn-header .btn-txt{ white-space:nowrap; }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.center-row{ justify-content:center; }

/* ---- Sticky header (hide on scroll down / show on scroll up via JS) ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(21,18,14,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease), background-color .32s var(--ease);
}
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header.is-scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.4); border-bottom-color:var(--line); background:rgba(21,18,14,.9); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:13px; gap:12px; }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,.92rem + .6vw,1.3rem); letter-spacing:-.02em; color:var(--cream-bright); }
.brand-mark{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--ember),#b52c14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), var(--shadow-sm);
}

/* =========================================================================
   HERO  ·  asymmetric editorial: copy left, glowing booking-card mock right
   ========================================================================= */
.hero{ position:relative; color:var(--cream); overflow:hidden; isolation:isolate; background:var(--bg); }
.hero-media{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(70% 60% at 8% -10%, rgba(0,184,148,.30), transparent 55%),
    radial-gradient(60% 55% at 100% 12%, rgba(0,184,148,.12), transparent 60%),
    radial-gradient(90% 90% at 50% 120%, rgba(0,0,0,.5), transparent 60%),
    linear-gradient(170deg, #1B1712 0%, var(--bg) 55%, #100D0A 100%);
}
/* licensed/real photo drop-in slot (kept subtle so it never fights the copy) */
.hero-media::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:url("assets/hero.svg");
  background-size:cover; background-position:center; opacity:.5; mix-blend-mode:screen;
}
.hero-inner{
  display:grid; grid-template-columns:1fr; gap:44px;
  padding-block:clamp(76px,10vw,138px) clamp(88px,11vw,156px);
  align-items:center;
}
.hero-copy{ max-width:660px; }
.hero .eyebrow{ color:var(--ember); margin-bottom:24px; display:inline-block; }
.hero-h1{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-h1); line-height:.98; letter-spacing:-.035em;
  margin-bottom:24px; text-wrap:balance; color:var(--cream-bright);
}
.hero-h1 em{ font-style:normal; color:var(--ember); }
.hero-tag{ font-size:clamp(1.16rem,1rem + .85vw,1.6rem); font-weight:500; color:var(--cream); margin-bottom:18px; text-wrap:balance; letter-spacing:-.01em; }
.hero-sub{ font-size:var(--fs-lead); color:var(--cream-soft); max-width:600px; margin-bottom:8px; line-height:1.5; }
.hero-sub strong{ color:var(--cream-bright); }
.hero-trust{
  margin-top:32px; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--cream-mute);
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
}
.hero-trust .dot{ width:5px; height:5px; border-radius:50%; background:var(--ember); opacity:.85; }

/* Booking-card MOCK: a bright product-UI surface that literally shows the
   promise ("a schedule that fills itself"). THE signature moment: it glows
   against the warm-dark ground like a phone screen at night. Pure CSS. */
.booking-card{
  position:relative; width:100%; max-width:400px; justify-self:start;
  background:var(--card-bg); color:var(--card-ink);
  border-radius:var(--radius-lg); padding:22px;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.5);
}
.booking-card::before{ /* ember ambient glow behind the card */
  content:""; position:absolute; inset:-26px; z-index:-1; border-radius:40px;
  background:radial-gradient(60% 60% at 50% 28%, rgba(0,184,148,.5), transparent 70%);
  filter:blur(14px);
}
.bc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.bc-biz{ display:flex; align-items:center; gap:10px; min-width:0; }
.bc-avatar{ width:34px; height:34px; border-radius:10px; flex:none; background:linear-gradient(135deg,var(--ember),#b52c14); }
.bc-biz b{ font-family:var(--font-display); font-size:1rem; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a6d1f; background:var(--gold-soft); border-radius:999px; padding:.28rem .55rem; white-space:nowrap; }
.bc-live .pulse{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(244,216,140,.6); animation:pulse 2s var(--ease) infinite; }
.bc-days{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:14px; }
.bc-day{ text-align:center; border-radius:10px; padding:7px 0; background:var(--card-tint); font-family:var(--font-mono); font-size:.62rem; font-weight:700; color:var(--card-soft); }
.bc-day span{ display:block; font-size:.9rem; color:var(--card-ink); font-family:var(--font-display); }
.bc-day.on{ background:var(--ember); color:#fff; }
.bc-day.on span{ color:#fff; }
.bc-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.bc-slot{ text-align:center; font-family:var(--font-mono); font-size:.76rem; font-weight:700; padding:9px 0; border-radius:10px; border:1px solid var(--card-line); color:var(--card-soft); }
.bc-slot.take{ background:var(--ember); color:#fff; border-color:transparent; }
.bc-toast{
  display:flex; align-items:center; gap:9px;
  background:var(--ember-soft); border:1px solid var(--ember-line);
  border-radius:12px; padding:10px 12px; font-family:var(--font-mono); font-size:.76rem; font-weight:700; color:var(--ember-press);
}
.bc-toast .ico{ width:18px; height:18px; flex:none; color:var(--ember); }

@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(244,216,140,.6);} 70%{ box-shadow:0 0 0 8px rgba(244,216,140,0);} 100%{ box-shadow:0 0 0 0 rgba(244,216,140,0);} }

@media (min-width:900px){
  .hero-inner{ grid-template-columns:1.15fr .85fr; gap:56px; }
  .booking-card{ justify-self:end; margin-bottom:-84px; } /* overlap into next band = depth */
}

/* =========================================================================
   HERO VARIANTS  ·  photo (full-bleed real photo + scrim + inline form) vs
   editorial (booking-card). Zero-photo-safe: no photo -> branded fallback.
   ========================================================================= */
/* new background stack: gradient(-3) < photo(-2) < scrim(-1) < copy */
.hero-media{ z-index:-3; }
.hero-photo{
  position:absolute; inset:0; z-index:-2; display:none;
  background-size:cover; background-position:center;
}
.hero-scrim{ position:absolute; inset:0; z-index:-1; display:none; }

/* editorial (default): show booking-card, hide the form + photo layers */
.hero-form{ display:none; }

/* --- PHOTO VARIANT --- */
.hero--photo .hero-photo{ display:block; }
.hero--photo .hero-media::after{ display:none; }        /* real photo replaces the svg texture */
.hero--photo .hero-scrim{
  display:block;
  background:
    linear-gradient(180deg, rgba(21,18,14,.40) 0%, rgba(21,18,14,.28) 34%, rgba(16,13,10,.86) 100%),
    linear-gradient(90deg, rgba(21,18,14,.80) 0%, rgba(21,18,14,.34) 48%, rgba(21,18,14,.06) 100%),
    radial-gradient(120% 85% at 16% -12%, rgba(0,184,148,.22), transparent 55%);
}
.hero--photo .booking-card{ display:none; }
.hero--photo .hero-form{ display:flex; flex-direction:column; }
.hero--photo .hero-copy{ max-width:640px; }
.hero--photo .hero-h1{ font-size:clamp(2.7rem,1.6rem + 4.6vw,4.9rem); }
.hero--photo .hero-inner{ align-items:center; gap:36px; padding-block:clamp(88px,12vw,150px) clamp(72px,9vw,124px); }
@media (min-width:900px){
  .hero--photo .hero-inner{ grid-template-columns:1.02fr .98fr; gap:52px; }
}
/* photo-mode has no card overlap into the next band, so drop the compensating pad */
.hero-photo-mode .turn{ padding-top:clamp(60px,8vw,110px); }

/* Bigger, bolder "shout" display headline (still Space Grotesk, warm-dark) */
.hero-h1.is-shout{ text-transform:uppercase; letter-spacing:-.005em; line-height:.94; }
.hero--photo .hero-h1.is-shout{ font-size:clamp(3rem,1.5rem + 7vw,6.2rem); }

/* =========================================================================
   ABOVE-THE-FOLD REVIEW BADGES  ·  compliant Google + Facebook (rating only)
   ========================================================================= */
.hero-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.rev-badge{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:rgba(245,239,230,.05); border:1px solid var(--line-2); border-radius:13px;
  padding:.5rem .82rem .5rem .5rem;
  font-family:var(--font-mono); font-weight:700; font-size:.74rem; letter-spacing:.01em; color:var(--cream-soft);
  transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.rev-badge:hover{ transform:translateY(-2px); background:rgba(245,239,230,.09); border-color:var(--ember-line); box-shadow:0 12px 26px rgba(0,0,0,.4); }
.rev-ico{
  width:26px; height:26px; border-radius:7px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.95rem; line-height:1;
  background:rgba(245,239,230,.1); color:var(--cream-bright); border:1px solid var(--line-2);
}
.rev-txt{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.rev-txt b{ color:var(--cream-bright); margin-inline:1px; }
.rev-badge .stars{ color:var(--gold); letter-spacing:1px; font-size:.82rem; }
/* over a photo, add contrast so badges stay legible on any hero shot */
.hero--photo .rev-badge{
  background:rgba(8,6,4,.46); border-color:rgba(245,239,230,.2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
@media (max-width:520px){ .rev-txt{ white-space:normal; } }

/* =========================================================================
   INLINE QUICK-QUOTE FORM  ·  hero lead-capture (photo variant right element)
   Premium warm-dark card, ember accent, clean fields. Native HTML, zero JS.
   ========================================================================= */
.hero-form{
  width:100%; max-width:460px; gap:12px;
  background:linear-gradient(180deg, rgba(34,29,22,.96), rgba(28,24,19,.97));
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:22px; box-shadow:var(--shadow-lg);
}
.hero--photo .hero-form{
  background:linear-gradient(180deg, rgba(28,24,19,.86), rgba(20,17,13,.9));
  border-color:rgba(245,239,230,.16);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
@media (min-width:900px){ .hero--photo .hero-form{ justify-self:end; } }
.hf-head{ display:flex; flex-direction:column; gap:7px; margin-bottom:4px; }
.hf-title{ font-family:var(--font-display); font-weight:700; font-size:1.36rem; letter-spacing:-.02em; color:var(--cream-bright); line-height:1.1; }
.hf-promise{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--font-mono); font-weight:700; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-soft); border:1px solid rgba(244,216,140,.32);
  border-radius:999px; padding:.34rem .7rem;
}
.hf-promise .pulse{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(244,216,140,.6); animation:pulse 2s var(--ease) infinite; }
.hf-field{ display:flex; flex-direction:column; gap:5px; }
.hf-label{ font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-mute); }
.hf-opt{ color:var(--cream-mute); opacity:.75; letter-spacing:.04em; }
.hf-input{
  width:100%; font-family:var(--font-body); font-size:1rem; font-weight:500; color:var(--cream-bright);
  background:rgba(8,6,4,.5); border:1px solid var(--line-2); border-radius:12px;
  padding:.76rem .85rem; line-height:1.3;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.hf-input::placeholder{ color:var(--cream-mute); }
.hf-input:focus, .hf-input:focus-visible{ outline:none; border-color:var(--ember); box-shadow:0 0 0 3px var(--ember-soft); background:rgba(8,6,4,.72); }
.hf-select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393897A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center;
}
.hf-select option{ color:var(--card-ink); }
.hf-submit{ width:100%; margin-top:4px; }
.hf-fine{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.02em; text-transform:none; color:var(--cream-mute); line-height:1.5; }

/* =========================================================================
   SECTIONS  ·  warm-dark throughout, editorial numbered-tick headings
   ========================================================================= */
.section{ padding-block:clamp(60px,8vw,110px); position:relative; }
.section-h2{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2);
  line-height:1.02; letter-spacing:-.03em; margin-bottom:18px; text-wrap:balance;
  color:var(--cream-bright);
}
/* editorial ember tick above every section heading (design signature) */
.section-h2::before{
  content:""; display:block; width:48px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--ember),var(--gold)); margin-bottom:22px;
}
.section-h2.center::before{ margin-inline:auto; }
.section-kicker{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--cream-mute); margin-bottom:40px; font-size:.78rem; }
.lead{ font-size:var(--fs-lead); color:var(--cream-soft); margin-bottom:22px; line-height:1.55; }
.lead strong{ color:var(--cream-bright); font-weight:700; }

/* The "turn" band: raised warm panel */
.turn{ background:var(--bg-2); border-block:1px solid var(--line); }
.turn .narrow{ position:relative; }
.turn .section-h2{ font-size:clamp(1.75rem,1.25rem + 2vw,2.85rem); max-width:20ch; }
@media (min-width:900px){ .turn{ padding-top:clamp(126px,13vw,186px); } } /* room for hero card overlap */

/* =========================================================================
   BENEFITS  ·  sticky heading (left) + editorial numbered list (right)
   ========================================================================= */
.what{ background:var(--bg); }
.what-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
.what-aside .section-h2{ margin-bottom:16px; }
.what-aside .section-kicker{ margin-bottom:0; }
.benefits{ list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:b; }
.benefits li{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 26px 24px 78px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.benefits li::before{
  counter-increment:b; content:counter(b,decimal-leading-zero);
  position:absolute; left:24px; top:22px;
  font-family:var(--font-mono); font-weight:700; font-size:1.15rem;
  color:var(--ember); line-height:1;
}
.benefits li:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--ember-line); background:var(--panel-2); }
.benefits strong{ color:var(--cream-bright); }

@media (min-width:900px){
  .what-grid{ grid-template-columns:.82fr 1.18fr; gap:60px; align-items:start; }
  .what-aside{ position:sticky; top:104px; }
}

/* =========================================================================
   SHOWCASE GALLERY  ·  photo-forward, asymmetric, real-photo drop-in
   -------------------------------------------------------------------------
   ZERO-PHOTO-SAFE default: each figure is a branded before/after frame that
   looks intentional while empty. At go-live, drop a real image INTO the
   figure:   <figure class="shot span-2"><img src="assets/work-1.webp" alt="">
             <figcaption>...</figcaption></figure>
   The <img> auto-covers the frame; remove nothing else. See assets/README.
   ========================================================================= */
.showcase{ background:var(--bg-2); border-block:1px solid var(--line); }
.showcase-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:36px; }
.showcase-head .section-h2{ margin-bottom:6px; }
.gallery{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:150px;
}
.shot{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(150deg,#2A2118,#100D0A);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow); isolation:isolate;
}
.shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
/* zero-photo placeholder art: a branded before/after split that reads on purpose */
.shot .ph{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px;
  background:
    radial-gradient(85% 100% at 0% 0%, rgba(0,184,148,.24), transparent 58%),
    repeating-linear-gradient(135deg, rgba(245,239,230,.035) 0 12px, transparent 12px 24px);
}
.shot .ph::before{ /* diagonal before/after divider */
  content:""; position:absolute; top:-10%; bottom:-10%; left:50%; width:2px;
  background:linear-gradient(rgba(245,239,230,.5),rgba(245,239,230,.04)); transform:rotate(9deg); transform-origin:center;
}
.shot .tag{
  position:relative; z-index:2; display:inline-flex; gap:8px; align-items:center;
  font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream);
}
.shot .tag b{ background:rgba(245,239,230,.1); border:1px solid rgba(245,239,230,.22); border-radius:999px; padding:.26rem .6rem; backdrop-filter:blur(3px); font-weight:700; }
.shot .tag b:last-child{ background:var(--ember); border-color:transparent; color:#fff; }
.shot figcaption{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:14px 16px;
  font-family:var(--font-mono); font-size:.74rem; font-weight:700; letter-spacing:.03em; color:#fff;
  background:linear-gradient(transparent, rgba(8,6,4,.86));
  transform:translateY(101%); transition:transform .3s var(--ease);
}
.shot:hover figcaption{ transform:none; }
.shot img + .ph{ display:none; } /* if a real photo is present, hide the placeholder art */
.shot::after{ content:""; position:absolute; inset:0; z-index:2; box-shadow:inset 0 0 0 1px rgba(245,239,230,.05), inset 0 -40px 60px rgba(8,6,4,.35); pointer-events:none; }
/* editorial asymmetry: a couple of tiles break the grid */
.shot.span-2{ grid-column:span 2; }
.shot.tall{ grid-row:span 2; }
.showcase-note{ margin-top:24px; font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cream-mute); }
@media (min-width:760px){
  .gallery{ grid-template-columns:repeat(4,1fr); grid-auto-rows:172px; }
  .shot.feature{ grid-column:span 2; grid-row:span 2; }
}

/* =========================================================================
   PROOF  ·  deepest band + rating badge + one restrained auto-scroll marquee
   ========================================================================= */
.proof{ background:var(--bg); position:relative; overflow:hidden; }
.proof::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 80% at 50% -20%, rgba(0,184,148,.14), transparent 60%); }
.proof .wrap{ position:relative; z-index:1; }
.proof .section-h2{ color:var(--cream-bright); }
.proof .section-h2::before{ margin-inline:auto; }
.rating-badge{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  background:rgba(245,239,230,.05); border:1px solid var(--line-2);
  border-radius:999px; padding:.62rem 1.2rem; font-family:var(--font-mono); font-weight:700; font-size:.82rem; letter-spacing:.03em; color:var(--cream);
  transition:transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.rating-badge:hover{ transform:translateY(-2px); background:rgba(245,239,230,.09); border-color:var(--ember-line); box-shadow:0 14px 30px rgba(0,0,0,.4); }
.stars{ color:var(--gold); letter-spacing:2px; }

.marquee{ margin-top:40px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.marquee-track{ display:inline-flex; gap:14px; white-space:nowrap; animation:scrollx 36s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.chip{
  flex:none; display:inline-flex; align-items:center; gap:9px;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:.62rem 1.25rem; font-family:var(--font-mono); font-weight:700; font-size:.78rem; letter-spacing:.02em; color:var(--cream-soft);
}
.chip .ico{ width:15px; height:15px; color:var(--ember); flex:none; }
@keyframes scrollx{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================================
   SERVICES  ·  editorial grid, custom SVG icon, hover elevation
   ========================================================================= */
.services{ background:var(--bg-2); border-block:1px solid var(--line); }
.service-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.service-card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 26px; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.service-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--ember),var(--gold)); transform:scaleY(0); transform-origin:top; transition:transform .25s var(--ease); }
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--ember-line); background:var(--panel-2); }
.service-card:hover::before{ transform:scaleY(1); }
.svc-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius:14px; margin-bottom:18px;
  background:var(--ember-soft); color:var(--ember); border:1px solid var(--ember-line);
}
.svc-ico .ico{ width:24px; height:24px; }
.service-card h3{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:-.02em; color:var(--cream-bright); }
.services .foot-note{ margin-top:32px; font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cream-mute); }

/* =========================================================================
   GUARANTEE  ·  gold trust seal + numbered promises
   ========================================================================= */
.guarantee{ background:var(--bg); }
.seal{
  width:84px; height:84px; margin:0 auto 24px; display:block; color:var(--gold);
  filter:drop-shadow(0 8px 20px rgba(244,216,140,.24));
}
.guarantee-list{ counter-reset:g; list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.guarantee-list li{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 28px 26px 78px; box-shadow:var(--shadow-sm);
}
.guarantee-list li::before{
  counter-increment:g; content:counter(g);
  position:absolute; left:24px; top:24px;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-soft); color:var(--gold); border:1px solid rgba(244,216,140,.4);
  font-family:var(--font-mono); font-weight:700; font-size:1rem;
}
.guarantee-list strong{ color:var(--cream-bright); }

/* =========================================================================
   CLOSE  ·  rich ember-lit dark section
   ========================================================================= */
.close{ position:relative; color:var(--cream); overflow:hidden; isolation:isolate;
  background:
    radial-gradient(70% 80% at 50% -10%, rgba(0,184,148,.26), transparent 58%),
    linear-gradient(170deg, #1E1913 0%, var(--bg) 60%, #0F0C09 100%);
  border-top:1px solid var(--line); }
.close::before{ content:""; position:absolute; inset:0; z-index:-1;
  background-image:url("assets/hero.svg"); background-size:cover; background-position:center; opacity:.4; mix-blend-mode:screen; }
.section-h2.light{ color:var(--cream-bright); }
.close .section-h2::before{ margin-inline:auto; }
.close-sub{ font-size:var(--fs-lead); color:var(--cream-soft); max-width:600px; margin:0 auto 8px; }
.close-sub strong{ color:var(--cream-bright); }
.close-fine{ margin-top:32px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.03em; color:var(--cream-mute); }
.close-call{ margin-top:10px; color:var(--cream-soft); }
.close-call a{ color:var(--ember); font-weight:700; text-decoration:none; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background:#100D0A; color:var(--cream-mute); padding-block:44px; border-top:1px solid var(--line); }
.footer-inner{ text-align:center; display:grid; gap:6px; }
.foot-name{ font-family:var(--font-display); font-weight:700; color:var(--cream-bright); font-size:1.3rem; letter-spacing:-.02em; }
.foot-meta{ font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; }
.foot-contact a{ color:var(--ember); font-weight:700; text-decoration:none; }
.foot-credit{ margin-top:14px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:#6c6152; }

/* =========================================================================
   STICKY MOBILE CALL / TEXT / BOOK BAR
   ========================================================================= */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:1px;
  background:var(--line-2);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -8px 24px rgba(0,0,0,.5);
}
.sbar-btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:15px 8px; text-decoration:none; font-family:var(--font-mono); font-weight:700;
  font-size:.86rem; letter-spacing:.03em; background:var(--panel); color:var(--cream);
}
.sbar-btn .ico{ width:18px; height:18px; }
.sbar-book{ background:var(--ember); color:var(--on-accent); }
.sbar-btn:active{ filter:brightness(1.1); }

@media (max-width:760px){ body{ padding-bottom:66px; } }
@media (min-width:761px){ .sticky-bar{ display:none; } }

/* =========================================================================
   TRUST BAR  ·  thin customer credibility strip (licensed/insured, years,
   rating, guarantee). High-impact, low-space. Customer-facing.
   ========================================================================= */
.trustbar{ background:var(--bg-2); border-block:1px solid var(--line); }
.trustbar-inner{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:12px 26px; padding-block:20px; text-align:center;
}
.trust-item{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-weight:700; font-size:.8rem;
  letter-spacing:.02em; color:var(--cream-soft); white-space:nowrap;
}
.trust-item .ico{ width:17px; height:17px; color:var(--ember); flex:none; }
.trust-item .stars{ color:var(--gold); letter-spacing:1px; font-size:.86rem; }
.trust-item b{ color:var(--cream-bright); }
.trust-sep{ width:5px; height:5px; border-radius:50%; background:var(--line-2); flex:none; }
@media (max-width:640px){ .trust-sep{ display:none; } }

/* =========================================================================
   HOW IT WORKS  ·  3-step customer booking process (kills booking friction)
   ========================================================================= */
.hiw{ background:var(--bg); }
.hiw-grid{ display:grid; gap:16px; grid-template-columns:1fr; margin-top:10px; }
@media (min-width:760px){ .hiw-grid{ grid-template-columns:repeat(3,1fr); } }
.step{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 26px 28px; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--ember),var(--gold)); transform:scaleY(0); transform-origin:top; transition:transform .25s var(--ease); }
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--ember-line); background:var(--panel-2); }
.step:hover::before{ transform:scaleY(1); }
.step-num{ font-family:var(--font-mono); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); display:block; margin-bottom:14px; }
.step-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius:14px; margin-bottom:16px;
  background:var(--ember-soft); color:var(--ember); border:1px solid var(--ember-line);
}
.step-ico .ico{ width:24px; height:24px; }
.step h3{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:-.02em; color:var(--cream-bright); margin-bottom:8px; }
.step p{ color:var(--cream-soft); font-size:1rem; line-height:1.5; }
.step p strong{ color:var(--cream-bright); }

/* =========================================================================
   BEFORE / AFTER SLIDER  ·  the #1 detailing proof element. Interactive drag.
   Zero-photo-safe (branded halves); drop real WebP into .ba-before/.ba-after
   <img> at go-live. Keyboard-accessible via the range input. Degrades to a
   static 50/50 split with JS off.
   ========================================================================= */
.ba{
  position:relative; width:100%; aspect-ratio:16/10; margin-bottom:16px;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg); background:linear-gradient(150deg,#2A2118,#100D0A);
  isolation:isolate; touch-action:pan-y;
}
.ba-half{ position:absolute; inset:0; }
.ba-half img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-after{ z-index:1; }
.ba-before{ z-index:2; clip-path:inset(0 calc(100% - var(--ba-pos,50%)) 0 0); }
.ba-fill{ position:absolute; inset:0; }
.ba-fill.b{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(140,128,110,.45), transparent 60%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.28) 0 11px, transparent 11px 22px),
    linear-gradient(160deg,#3a342b,#1d1a14);
  filter:grayscale(.5) brightness(.72);
}
.ba-fill.a{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(0,184,148,.30), transparent 58%),
    linear-gradient(160deg,#2c2920,#14110c);
}
.ba-lbl{
  position:absolute; top:14px; z-index:6; font-family:var(--font-mono);
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:rgba(8,6,4,.6); border:1px solid rgba(245,239,230,.25);
  padding:.3rem .6rem; border-radius:999px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.ba-lbl.b{ left:14px; }
.ba-lbl.a{ right:14px; background:var(--ember); border-color:transparent; }
.ba-range{ position:absolute; inset:0; z-index:7; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--ba-pos,50%); z-index:5; width:2px; background:var(--cream); transform:translateX(-1px); pointer-events:none; }
.ba-handle::after{
  content:""; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--cream);
  box-shadow:var(--shadow), 0 0 0 4px rgba(245,239,230,.18);
}
.ba-handle .chev{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; font-family:var(--font-mono); font-weight:700; color:var(--card-ink); font-size:.9rem; letter-spacing:-1px; }
.ba-cap{ margin-top:0; }

/* 5/7 asymmetric split: copy rail + slider. Deliberate off-balance ratio (not
   50/50, not thirds) - the "somebody chose this" moment the section was missing.
   Mobile stacks to one column, so the proof image keeps full width where most
   of the traffic actually is. */
.ba-split{ display:grid; grid-template-columns:1fr; gap:26px; align-items:center; }
@media (min-width:960px){
  .ba-split{ grid-template-columns:5fr 7fr; gap:40px; }
}
.ba-copy{ display:flex; flex-direction:column; gap:16px; }
.ba-copy .section-kicker{ margin-bottom:0; }
.ba-lead{ color:var(--cream-soft); font-size:1.02rem; line-height:1.55; text-wrap:balance; }
.ba-lead strong{ color:var(--cream-bright); }
.ba-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.ba-split .ba{ margin-bottom:0; }

/* =========================================================================
   TESTIMONIALS  ·  named, real reviews (client-provided, NEVER scraped).
   Lives inside the PROOF section, above the marquee.
   ========================================================================= */
.testimonials{ margin-top:44px; display:grid; gap:16px; grid-template-columns:1fr; text-align:left; }
@media (min-width:760px){ .testimonials{ grid-template-columns:repeat(3,1fr); } }
.tcard{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.tcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--ember-line); }
.tcard .stars{ color:var(--gold); letter-spacing:2px; font-size:.9rem; }
.tquote{ color:var(--cream); font-size:1.02rem; line-height:1.5; }
.tquote strong{ color:var(--cream-bright); }
.twho{ display:flex; align-items:center; gap:11px; margin-top:auto; }
.tavatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--ember),#b52c14);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#fff; font-size:.98rem;
}
.tname{ font-family:var(--font-display); font-weight:700; color:var(--cream-bright); font-size:.95rem; }
.tmeta{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cream-mute); }

/* =========================================================================
   MID-PAGE CTA  ·  breaks the one-CTA-at-top problem + honest weekly-slot urgency
   ========================================================================= */
.midcta{
  text-align:center; border-block:1px solid var(--line);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(0,184,148,.16), transparent 60%),
    var(--bg-2);
}
.midcta .section-h2{ margin-bottom:14px; }
.midcta .section-h2::before{ margin-inline:auto; }
.midcta-sub{ font-size:var(--fs-lead); color:var(--cream-soft); max-width:560px; margin:0 auto 6px; }
.urgency{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  font-family:var(--font-mono); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-soft); border:1px solid rgba(244,216,140,.32);
  border-radius:999px; padding:.42rem .95rem;
}
.urgency .pulse{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(244,216,140,.6); animation:pulse 2s var(--ease) infinite; }

/* =========================================================================
   FAQ  ·  objection-handling accordion (zero-JS <details>)
   ========================================================================= */
.faq{ background:var(--bg); }
.faq-list{ max-width:var(--wrap-narrow); margin:8px auto 0; display:grid; gap:12px; }
.faq-item{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .2s var(--ease), background-color .2s var(--ease); }
.faq-item[open]{ border-color:var(--ember-line); background:var(--panel-2); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:-.01em; color:var(--cream-bright);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--font-mono); color:var(--ember); font-size:1.6rem; line-height:1; flex:none; transition:transform .22s var(--ease); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-a{ padding:0 24px 24px; color:var(--cream-soft); font-size:1.02rem; line-height:1.58; }
.faq-a strong{ color:var(--cream-bright); }
.faq-a a{ color:var(--ember); font-weight:700; text-decoration:none; }

/* =========================================================================
   SERVICE-AREA CUE  ·  "we serve your town" reassurance strip
   ========================================================================= */
.area{ background:var(--bg-2); border-block:1px solid var(--line); text-align:center; }
.area .section-h2::before{ margin-inline:auto; }
.area-pins{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:6px; }
.area-pin{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-weight:700; font-size:.8rem; letter-spacing:.02em; color:var(--cream-soft);
  background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:.5rem 1.05rem;
}
.area-pin .ico{ width:14px; height:14px; color:var(--ember); flex:none; }
.area-note{ margin-top:22px; font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cream-mute); }

/* =========================================================================
   SCROLL-REVEAL (progressive enhancement; fully visible if JS off)
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
/* staggered children */
.stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.stagger.is-in > *{ opacity:1; transform:none; }
.stagger.is-in > *:nth-child(2){ transition-delay:.07s; }
.stagger.is-in > *:nth-child(3){ transition-delay:.14s; }
.stagger.is-in > *:nth-child(4){ transition-delay:.21s; }
.stagger.is-in > *:nth-child(5){ transition-delay:.28s; }
.stagger.is-in > *:nth-child(6){ transition-delay:.35s; }

/* =========================================================================
   ACCESSIBILITY: respect reduced motion
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal, .stagger > *{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none; }
  .btn::after{ display:none; }
  .shot figcaption{ transform:none; position:static; background:rgba(8,6,4,.9); }
}

/* =========================================================================
   GALLERY VARIANT · "filmstrip"  (data `gallery_variant:"filmstrip"`)
   -------------------------------------------------------------------------
   An alternate "Work you can see" arrangement to the asymmetric grid: a single
   horizontal, snap-scrolling reel led by the before/after slider (feature card),
   then branded before/after frames tagged with the real {{service_N}} tokens.
   Thumb-native on mobile, zero new assets (same warm-dark placeholder art), and
   the edge fades + peeking next card are the "there is more" affordance. Both
   arrangements ship in the master; clone_site.py keeps only the selected one.
   ========================================================================= */
.filmstrip-wrap{ position:relative; margin-top:26px; }
.filmstrip{
  display:flex; gap:16px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:4px 2px 18px; scrollbar-width:thin; scrollbar-color:var(--ember-line) transparent;
}
.filmstrip::-webkit-scrollbar{ height:8px; }
.filmstrip::-webkit-scrollbar-track{ background:transparent; }
.filmstrip::-webkit-scrollbar-thumb{ background:var(--ember-line); border-radius:999px; }
/* edge fades: overlay gradients (not a CSS mask) so the scroller focus ring is never clipped */
.filmstrip-wrap::before,.filmstrip-wrap::after{
  content:""; position:absolute; top:0; bottom:18px; width:56px; z-index:3; pointer-events:none;
}
.filmstrip-wrap::before{ left:0; background:linear-gradient(90deg,var(--bg-2),transparent); }
.filmstrip-wrap::after{ right:0; background:linear-gradient(270deg,var(--bg-2),transparent); }

.film-card{
  scroll-snap-align:start; flex:0 0 auto; position:relative; margin:0; overflow:hidden;
  width:min(78vw,300px); aspect-ratio:4/5; border-radius:var(--radius);
  background:linear-gradient(150deg,#2A2118,#100D0A); border:1px solid var(--line-2);
  box-shadow:var(--shadow); isolation:isolate;
}
.film-card.is-feature{ width:min(90vw,520px); aspect-ratio:16/11; }
.film-card .ba{ margin:0; height:100%; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none; }
.film-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.film-card .ph{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px;
  background:
    radial-gradient(85% 100% at 0% 0%, rgba(0,184,148,.24), transparent 58%),
    repeating-linear-gradient(135deg, rgba(245,239,230,.035) 0 12px, transparent 12px 24px);
}
.film-card .ph::before{ content:""; position:absolute; top:-10%; bottom:-10%; left:50%; width:2px;
  background:linear-gradient(rgba(245,239,230,.5),rgba(245,239,230,.04)); transform:rotate(9deg); transform-origin:center; }
.film-card img + .ph{ display:none; }
.film-card::after{ content:""; position:absolute; inset:0; z-index:2; box-shadow:inset 0 0 0 1px rgba(245,239,230,.05), inset 0 -46px 66px rgba(8,6,4,.4); pointer-events:none; }
/* solid accent work-type tag = the filmstrip's signature tell (uses the real service tokens) */
.film-tag{
  position:absolute; top:14px; left:14px; z-index:4; max-width:calc(100% - 28px);
  font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-accent); background:var(--ember); border-radius:999px; padding:.3rem .66rem;
}
.film-cap{
  position:absolute; z-index:4; left:0; right:0; bottom:0; padding:16px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.03em; color:#fff;
  background:linear-gradient(transparent, rgba(8,6,4,.88));
}
.film-cap span{ display:block; color:var(--cream-mute); font-size:.62rem; margin-top:3px; }
.filmstrip-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:6px; }
.film-hint{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-mute);
}
.film-hint .ico{ width:15px; height:15px; color:var(--ember); flex:none; }

/* =========================================================================
   PROOF VARIANT · "spotlight"  (data `proof_variant:"spotlight"`)
   -------------------------------------------------------------------------
   An alternate testimonials arrangement to the three equal cards: one review
   set large in display type with the gold trust ornaments (gold quote mark +
   gold stars), backed by a compact column of named secondary reviews. Uses the
   same {{testimonial_1..3}} tokens; gold stays on trust surfaces only. Both
   arrangements ship in the master; clone_site.py keeps only the selected one.
   ========================================================================= */
.spotlight{ display:grid; gap:34px; grid-template-columns:1fr; margin-top:8px; text-align:left; }
@media (min-width:900px){ .spotlight{ grid-template-columns:1.35fr .65fr; gap:56px; align-items:start; } }
.spot-quote{ position:relative; padding-top:8px; }
.spot-mark{
  font-family:var(--font-display); font-weight:700; font-size:5rem; line-height:.7;
  color:var(--gold); opacity:.9; display:block; margin-bottom:6px; height:.5em;
}
.spot-q{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.55rem,1.05rem + 2.4vw,2.7rem); line-height:1.18; letter-spacing:-.025em;
  color:var(--cream-bright); text-wrap:balance; margin-bottom:26px;
}
.spot-q em{ font-style:normal; color:var(--ember); }
.spot-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; }
.spot-who{ display:flex; align-items:center; gap:13px; }
.spot-av{
  width:52px; height:52px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--ember),#b52c14);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.15rem;
}
.spot-name{ font-family:var(--font-display); font-weight:700; color:var(--cream-bright); font-size:1.06rem; letter-spacing:-.01em; }
.spot-meta{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cream-mute); }
.spot-stars{ color:var(--gold); letter-spacing:3px; font-size:1.05rem; }
.spot-mini-list{ display:grid; gap:14px; }
.spot-mini{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.spot-mini:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--ember-line); }
.spot-mini .stars{ font-size:.82rem; letter-spacing:2px; }
.spot-mini p{ color:var(--cream); font-size:.98rem; line-height:1.5; margin:9px 0 12px; }
.spot-mini-who{ display:flex; align-items:center; gap:9px; }
.spot-mini-av{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--ember),#b52c14);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#fff; font-size:.8rem;
}
.spot-mini-name{ font-family:var(--font-display); font-weight:700; color:var(--cream-bright); font-size:.88rem; }
.spot-mini-meta{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cream-mute); }