/* =========================================================================
   BUILD BUSY · "Always Booked" conversion-site template  ·  VISUAL LAYER
   -------------------------------------------------------------------------
   DESIGN WORLD v3 "DARK FIELD" (2026-07-27, see waas-sites/DESIGN.md):

     - FIELD. Near-black neutral ground (#131313) carrying a visible DOT GRID.
       Chrome and panels float ON the field at depth. A stage, not a document.
     - TYPE. ONE superfamily, Archivo variable. WIDTH contrast (62-125) is the
       signature: wide heavy display, normal body, system-mono micro-labels.
     - ACCENT. Per-client hue stays (clone_site.py swaps the ember literals).
       The field itself is grayscale so the CLIENT's colour is the only hue.
     - MOTION. One authored moment. Not an entrance on every section.
     - COMPOSITION. Hairlines and margin hangs, never a repeated card recipe.

   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 font (latin subset woff2, zero network calls) ----
   ONE superfamily, Archivo variable: width 62-125 AND weight 100-900 in a
   single 88KB file. Width contrast is the type signature of this world.
   It replaced Space Grotesk + Space Mono (two faces, three files), both of
   which sit on impeccable's "you stopped looking" list. Micro-labels now use
   the system mono stack, so no mono file ships at all. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("assets/fonts/archivo-var-latin.woff2") format("woff2-variations");
}

/* ---- Design tokens ---- */
:root{
  /* Warm-dark ground (warm-tinted near-black, NOT flat black, NOT SaaS-navy) */
  --bg:        #131313;   /* the field: near-black, neutral, carries the dot grid */
  --bg-2:      #181818;   /* raised band, opaque. kept for anything that must hide what is under it */
  /* The SAME raised band, but translucent. Section bands must use this one.
     Four of the banded sections compute to position:relative, so they paint
     ABOVE the fixed body::before dot field and an opaque fill blanked the
     field across roughly half the page. .02 white over #131313 lands on
     #181818, so the band is visually identical and the field now shows
     through it. Keeping the band matters: it is the section rhythm. */
  --band:      rgba(255,255,255,.02);
  --panel:     #1D1D1C;   /* panel surface */
  --panel-2:   #242423;   /* raised panel / hover */
  --line:      rgba(237,237,234,.13);   /* hairline: the depth system */
  --line-2:    rgba(237,237,234,.26);   /* stronger hairline */

  /* Warm cream text */
  --cream:        #EDEDEA;   /* primary text */
  --cream-bright: #FFFFFC;   /* strong / headings */
  --cream-soft:   #A5A29B;   /* body paragraphs on the field */
  --cream-mute:   #8A8780;   /* meta / muted, clears AA on the field */

  /* ONE hot accent (Baunfire / Zajno ember red-orange) */
  --ember:        #E8912A;
  --ember-bright: #ECA34C;
  --ember-press:  #C87D24;
  --ember-soft:   rgba(232,145,42,.13);   /* wash for chips/icons */
  --ember-line:   rgba(232,145,42,.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(.62rem, .59rem + .16vw, .7rem);
  --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(232,145,42,.34);

  --font-display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

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

/* ---- THE FIELD ----
   A dot grid across the whole ground so the page never reads as flat colour.
   Researched off lamalama.com, one of Jason's own six references: this is the
   single device that separates a designed field from a stacked document. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:22px 22px;
}


/* ---- 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); }


.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(232,145,42,.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(232,145,42,.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:60;background:transparent;border:0;padding:13px 0}
.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{background:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:0 14px 34px -22px rgba(0,0,0,.9);padding-inline:20px}
.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:transparent; }
.hero-media{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(70% 60% at 8% -10%, rgba(232,145,42,.30), transparent 55%),
    radial-gradient(60% 55% at 100% 12%, rgba(232,145,42,.12), transparent 60%),
    radial-gradient(90% 90% at 50% 120%, rgba(0,0,0,.5), transparent 60%),
    linear-gradient(170deg, #1A1A1A 0%, var(--bg) 55%, #0E0E0E 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(232,145,42,.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(232,145,42,.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 */
.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.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(--band); 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:transparent; }
.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: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(--band); 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,#232323,#0E0E0E);
  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(232,145,42,.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:transparent; 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(232,145,42,.14), transparent 60%); }
.proof .wrap{ position:relative; z-index:1; }
.proof .section-h2{ color:var(--cream-bright); }
.proof .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(--band); 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: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:transparent; }
.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(232,145,42,.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 .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:transparent; 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(--band); 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:transparent; }
.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: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,#232323,#0E0E0E);
  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(232,145,42,.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.
   ========================================================================= */
/* Sized by the CONTAINER, not the viewport. The old rule forced repeat(3,1fr)
   from 760px viewport up, but this grid lives inside .wrap.narrow (~672px of
   content), so three tracks plus gaps overflowed it and squeezed each card to
   ~150px: the name and meta then wrapped one word per line. auto-fit means it
   runs 1 / 2 / 3 columns when there is genuinely room for them. */
.testimonials{
  margin-top:44px; display:grid; gap:16px; text-align:left;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 248px), 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(232,145,42,.16), transparent 60%),
    var(--bg-2);
}
.midcta .section-h2{ margin-bottom:14px; }
.midcta .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:transparent; }
.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(--band); border-block:1px solid var(--line); text-align:center; }
.area .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:1;transform:none}
.reveal.is-in{ opacity:1; transform:none; }
/* staggered children */
.stagger > *{opacity:1;transform:none}
.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;transform:none}
  .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,#232323,#0E0E0E); 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(232,145,42,.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); }

/* =========================================================================
   WORLD: mobile-detailing  —  "Coachline & gold leaf"
   Spec: template/DESIGN.md. Applied by clone_site.py via body.world-* when the
   client data file carries trade:"mobile-detailing".

   THESIS  Automotive sign-painting, not a detailing template. Refuses the
           category rut (glossy car at night, blue gradient, three icon cards)
           and its opposite (white luxury-spa minimalism, thin serif).
   RULE    Coachlines are the component language and they REPLACE card borders.
           A coachline is a hairline PAIR, one heavy and one fine with a gap,
           exactly as a striper pulls it. Nothing here is a rounded box.
   GUARD   No cream ground, no gradient text, no glow. Leaf is thin metal on
           dark lacquer, never a yellow gradient.
   ========================================================================= */
body.world-mobile-detailing{
  /* Ground is deep automotive lacquer tinted by THIS client's own accent, so
     the world is shared but the finish is theirs. Flat fallback first for any
     engine without color-mix. */
  --lacquer:#120A09;
  --lacquer:color-mix(in srgb, var(--ember) 10%, #0A0707);
  --lacquer-2:#181010;
  --lacquer-2:color-mix(in srgb, var(--ember) 14%, #0E0A0A);

  --bg:var(--lacquer);
  --bg-2:var(--lacquer-2);
  --band:rgba(255,255,255,.022);
  --panel:var(--lacquer-2);
  --panel-2:color-mix(in srgb, var(--ember) 18%, #120D0D);

  /* Leaf. Warm metal, used sparingly: the name, the numerals, the coachlines. */
  --leaf:#D8B25A;
  --leaf-hi:#F0D9A0;
  --leaf-dim:rgba(216,178,90,.40);
  --leaf-faint:rgba(216,178,90,.18);

  --line:rgba(216,178,90,.20);
  --line-2:rgba(216,178,90,.38);

  /* Signwriting has no rounded cards. Kill the radii at the token, so every
     component that reads a radius flattens at once rather than one by one. */
  --radius-sm:0px;
  --radius:0px;
  --radius-lg:0px;
}

/* ---- the coachline itself: heavy line, gap, fine line ---- */
body.world-mobile-detailing .service-card,
body.world-mobile-detailing .faq-item,
body.world-mobile-detailing .step,
body.world-mobile-detailing .tcard{
  position:relative;
  background:transparent;
  border:0;
  padding-top:26px;
}
body.world-mobile-detailing .service-card::before,
body.world-mobile-detailing .faq-item::before,
body.world-mobile-detailing .step::before,
body.world-mobile-detailing .tcard::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(to bottom,
    var(--leaf-dim) 0 2px,
    transparent    2px 3px,
    var(--leaf-faint) 3px 4px);
}

/* Section divisions are pulled, not boxed. */
body.world-mobile-detailing .turn,
body.world-mobile-detailing .showcase,
body.world-mobile-detailing .services,
body.world-mobile-detailing .trustbar,
body.world-mobile-detailing .area{
  border-block:0;
  border-top:2px solid var(--leaf-dim);
  border-bottom:1px solid var(--leaf-faint);
}

/* ---- the name in leaf: thin metal, dark keyline, one highlight above.
       Deliberately NOT gradient text, which is the tell this world is trying
       to avoid and which the craft floor refuses. ---- */
body.world-mobile-detailing .brand-name{
  color:var(--leaf);
  -webkit-text-stroke:.4px rgba(0,0,0,.55);
  text-shadow:0 -1px 0 rgba(240,217,160,.42);
  letter-spacing:.005em;
}
body.world-mobile-detailing .brand-mark{
  background:var(--leaf);
  border-radius:0;
}

/* ---- painted numerals: phone, price, ratings. Tabular and slightly narrowed,
       the way hand-painted figures sit on a panel. ---- */
body.world-mobile-detailing .price-unit,
body.world-mobile-detailing .rev-badge,
body.world-mobile-detailing .area-pin{
  font-variant-numeric:tabular-nums;
  font-stretch:92%;
  color:var(--leaf);
  border-radius:0;
}

/* ---- the primary action is a struck panel with a coachline, not a pill ---- */
body.world-mobile-detailing .btn{ border-radius:0; }
body.world-mobile-detailing .btn-primary{
  background:var(--ember);
  color:var(--on-accent);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), 0 0 0 1px var(--leaf-dim);
}
body.world-mobile-detailing .btn-primary:hover,
body.world-mobile-detailing .btn-primary:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), 0 0 0 2px var(--leaf);
}

/* ---- RAKING LIGHT, grafted from the losing daylight-section direction.
       Swirl marks and gloss only reveal at a low angle: that is the one
       physical truth of this trade, so proof imagery is lit that way.
       Its topology (rooms, sun angles, dates) was deliberately discarded. ---- */
body.world-mobile-detailing .shot::after,
body.world-mobile-detailing .film-card::after,
body.world-mobile-detailing .ba::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(102deg,
    rgba(255,247,230,.16) 0%,
    rgba(255,247,230,.04) 22%,
    transparent 46%,
    rgba(0,0,0,.30) 100%);
  mix-blend-mode:screen;
}
body.world-mobile-detailing .shot,
body.world-mobile-detailing .film-card,
body.world-mobile-detailing .ba{ position:relative; border-radius:0; }

/* ---- STRUCTURAL PASS: the card GRID is replaced, not re-skinned -------------
   A coachline drawn on top of a card grid is still a card grid. In this world
   the services are a painted SERVICE BOARD: ruled lines of lettering, the way
   a signwriter letters the board outside a shop. Four bare labels never wanted
   four equal tiles, and the generic rounded icon tile is the exact device the
   craft floor refuses. Lettering carries it instead.
   Done entirely in CSS so the markup stays shared: the trades with no world
   derived yet keep the base look untouched. ---------------------------------*/
body.world-mobile-detailing .service-grid{
  display:block;
  border-top:2px solid var(--leaf-dim);
}
body.world-mobile-detailing .service-card{
  display:flex; align-items:baseline; gap:18px;
  padding:clamp(14px,2.2vw,22px) 0;
  border-bottom:1px solid var(--leaf-faint);
}
/* the row rule IS the coachline, so the per-card one is retired here */
body.world-mobile-detailing .service-card::before{ content:none; }

/* no generic icon tiles in a signwriting world. the lettering is the device. */
body.world-mobile-detailing .svc-ico,
body.world-mobile-detailing .step-ico{ display:none; }

body.world-mobile-detailing .service-card h3{
  font-size:clamp(1.35rem,1rem + 2.1vw,2.5rem);
  line-height:1.06;
  font-stretch:112%;
  font-weight:800;
  letter-spacing:-.012em;
  color:var(--leaf);
  margin:0;
}
/* the striper's lozenge: hand ornament between items, drawn not imported */
body.world-mobile-detailing .service-card::after{
  content:""; flex:none; width:7px; height:7px; margin-left:auto;
  background:var(--leaf-dim); transform:rotate(45deg);
}

/* ---- how-it-works: ruled panels with painted numerals, not cards.
       Numbers stay because these ARE a sequence and the order is the
       information; that is the one case the craft floor allows them. ---- */
body.world-mobile-detailing .step{
  padding:22px 0 20px;
  border-bottom:1px solid var(--leaf-faint);
}
body.world-mobile-detailing .step::before{
  left:0; right:0;
  background:linear-gradient(to bottom,
    var(--leaf-dim) 0 2px, transparent 2px 3px, var(--leaf-faint) 3px 4px);
}
body.world-mobile-detailing .step-num{
  display:block; margin-bottom:10px;
  color:var(--leaf);
  font-variant-numeric:tabular-nums;
  font-stretch:88%;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
body.world-mobile-detailing .step h3{ color:var(--cream-bright); }

/* ---- flatten the last of the box affordances ---- */
body.world-mobile-detailing .chip,
body.world-mobile-detailing .area-pin,
body.world-mobile-detailing .rev-badge{
  border-radius:0;
  background:transparent;
  border:1px solid var(--leaf-faint);
}

/* =========================================================================
   LAYOUT CUTS
   The spine decides which sections and in what order. The cut decides how the
   page is SET: alignment, display scale, and which sections carry the raised
   band. Two shops with the same evidence get the same spine, so without this
   second axis they would still render identically.
   A cut makes no factual claim, so it is derived from the slug rather than
   earned by evidence, and it is deterministic so rebuilds stay reproducible.
   ========================================================================= */

/* ---- PLATE: centred, generous measure, alternating bands. The composed,
        symmetrical setting: quiet and formal. ---- */
body.cut-plate .section-h2,
body.cut-plate .section-head{ text-align:center; }
body.cut-plate .section-head p{ margin-inline:auto; }
body.cut-plate .what,
body.cut-plate .hiw,
body.cut-plate .faq{ background:var(--band); }

/* ---- RAIL: everything hangs off a left rule, tighter measure, bands pulled
        back to just two sections so the page reads as one continuous column. ---- */
body.cut-rail .section-h2,
body.cut-rail .section-head{ text-align:left; }
body.cut-rail .section-head{ position:relative; padding-left:22px; }
body.cut-rail .section-head::before{
  content:""; position:absolute; left:0; top:.24em; bottom:.24em; width:2px;
  background:var(--line-2);
}
body.cut-rail .section-head p{ max-width:58ch; margin-inline:0; }
body.cut-rail .turn,
body.cut-rail .what,
body.cut-rail .hiw,
body.cut-rail .faq{ background:transparent; }
body.cut-rail .services{ background:var(--band); }

/* ---- SHOUT: oversized display, left-set, NO bands at all. Rules alone carry
        the divisions, so the page reads as a poster rather than a document. ---- */
body.cut-shout .section-h2{
  text-align:left;
  font-size:clamp(2.1rem, 1.3rem + 3.6vw, 4rem);
  line-height:1.02;
  letter-spacing:-.035em;
}
body.cut-shout .section-head{ text-align:left; }
body.cut-shout .section-head p{ max-width:62ch; margin-inline:0; }
body.cut-shout .turn,
body.cut-shout .what,
body.cut-shout .hiw,
body.cut-shout .faq,
body.cut-shout .services,
body.cut-shout .showcase,
body.cut-shout .trustbar,
body.cut-shout .area{ background:transparent; }
body.cut-shout .section{ border-top:1px solid var(--line); }

/* =========================================================================
   WORLD: tint-ppf  —  "Step wedge"
   Roll key 75c1625a, index 6: photographic darkroom / neutral-density filters.
   Window film IS a neutral-density filter and VLT percentages are literally
   photographic stops, so the trade's own numbers become the type signature.
   MATERIAL vs mobile-detailing: neutral graphite instead of warm lacquer,
   safelight amber instead of gold leaf, graduated density steps instead of
   hand-pulled lines, NUMERALS instead of lettering.
   ========================================================================= */
body.world-tint-ppf{
  --graphite:#0E0E0F; --graphite-2:#141416;
  --bg:var(--graphite); --bg-2:var(--graphite-2);
  --band:rgba(255,255,255,.028);
  --panel:#17171A; --panel-2:#1E1E22;
  --safelight:#E8A33D;
  --cream:#E8E8E9; --cream-bright:#FFF; --cream-soft:#9C9CA1; --cream-mute:#83838A;
  --line:rgba(232,232,233,.14); --line-2:rgba(232,232,233,.30);
  --radius-sm:0px; --radius:0px; --radius-lg:0px;
}
/* the step wedge: a graduated bar of densities dividing every section */
body.world-tint-ppf .section{ position:relative; }
body.world-tint-ppf .section::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(to right,
    rgba(232,232,233,.03) 0 12.5%, rgba(232,232,233,.07) 12.5% 25%,
    rgba(232,232,233,.12) 25% 37.5%, rgba(232,232,233,.19) 37.5% 50%,
    rgba(232,232,233,.28) 50% 62.5%, rgba(232,232,233,.40) 62.5% 75%,
    rgba(232,232,233,.55) 75% 87.5%, rgba(232,232,233,.74) 87.5% 100%);
}
/* density plates, not cards: hard-edged, graded, numbered by the trade's own scale */
body.world-tint-ppf .service-card,
body.world-tint-ppf .step,
body.world-tint-ppf .faq-item,
body.world-tint-ppf .tcard{
  background:var(--panel); border:0; border-left:3px solid var(--safelight);
  border-radius:0; padding-left:18px;
}
body.world-tint-ppf .svc-ico,
body.world-tint-ppf .step-ico{
  border-radius:0; background:transparent; color:var(--safelight);
}
body.world-tint-ppf .step-num,
body.world-tint-ppf .price-unit,
body.world-tint-ppf .rev-badge{
  font-variant-numeric:tabular-nums; font-stretch:78%; letter-spacing:.05em;
  color:var(--safelight);
}
body.world-tint-ppf .btn{ border-radius:0; }
body.world-tint-ppf .brand-name{ letter-spacing:.02em; font-stretch:84%; }
body.world-tint-ppf .brand-mark{ border-radius:0; background:var(--safelight); }

/* =========================================================================
   WORLD: auto-glass  —  "Work authorization"
   Roll key 33b65fbc, index 7: the insurance claim / work-authorization form.
   Lowest on the resonance list and the roll took it anyway, which is the point
   of rolling. It is product-true: auto glass runs on claims, and "we handle
   the claim" is the real sell. The page IS the form, filled in.
   LIGHT ground chosen from the use scene: someone standing outside next to a
   cracked windshield in daylight. Deliberately NOT cream-plus-serif, which is
   the named AI cluster: this is carbon-copy stock, heavy rules, grotesk only.
   ========================================================================= */
body.world-auto-glass{
  --paper:#EFECE3; --paper-2:#E6E2D6;
  --bg:var(--paper); --bg-2:var(--paper-2);
  --band:rgba(0,0,0,.028);
  --panel:#F7F5EF; --panel-2:#FFFFFF;
  --carbon:#B0566B;                       /* the second-copy ink */
  --cream:#16181A; --cream-bright:#000; --cream-soft:#3F4348; --cream-mute:#5C6167;
  --line:rgba(20,22,24,.26); --line-2:rgba(20,22,24,.55);
  --radius-sm:0px; --radius:0px; --radius-lg:0px;
}
body.world-auto-glass .dot,
body.world-auto-glass .site-footer{ color:inherit; }
/* boxed fields with a caption in the corner, the way a form is set */
body.world-auto-glass .service-card,
body.world-auto-glass .step,
body.world-auto-glass .faq-item,
body.world-auto-glass .tcard{
  background:var(--panel);
  border:1.5px solid var(--line-2);
  border-radius:0;
  padding:22px 20px 18px;
  box-shadow:none;
}
body.world-auto-glass .svc-ico,
body.world-auto-glass .step-ico{ display:none; }
body.world-auto-glass .step-num{
  display:inline-block; background:var(--carbon); color:#fff;
  padding:3px 9px; font-variant-numeric:tabular-nums; letter-spacing:.12em;
}
body.world-auto-glass .section{ border-top:2px solid var(--line-2); }
body.world-auto-glass .trustbar{ border-block:2px solid var(--line-2); }
body.world-auto-glass .btn{ border-radius:0; }
body.world-auto-glass .btn-ghost{ border:1.5px solid var(--line-2); color:var(--cream); }
body.world-auto-glass .brand-name{ font-stretch:96%; letter-spacing:.01em; }
body.world-auto-glass .brand-mark{ border-radius:0; }
/* the stamp: the one place the carbon ink shouts */
body.world-auto-glass .guarantee{ position:relative; }
body.world-auto-glass .guarantee::after{
  content:""; position:absolute; right:6%; top:14%;
  width:96px; height:96px; border:3px solid var(--carbon); border-radius:50%;
  opacity:.22; transform:rotate(-14deg); pointer-events:none;
}

/* =========================================================================
   WORLD: full-service  —  "Fleet livery"
   Roll key ae850530, index 6: fleet livery and door lettering.
   HELD APART from mobile-detailing on material, deliberately, because both are
   vehicle lettering: coachline is THIN, METALLIC and hand-pulled on lacquer;
   livery is FLAT vinyl, hard-edged, two-colour, with a hard offset shadow and
   no metal anywhere. If they ever read as cousins, re-roll rather than tweak.
   ========================================================================= */
body.world-full-service{
  --body-color:#101B26; --body-2:#16242F;
  --bg:var(--body-color); --bg-2:var(--body-2);
  --band:rgba(255,255,255,.03);
  --panel:#1A2A36; --panel-2:#22343F;
  --vinyl:#F2F4F6;                        /* the flat lettering colour */
  --cream:#F2F4F6; --cream-bright:#FFF; --cream-soft:#A9B6C0; --cream-mute:#8B98A3;
  --line:rgba(242,244,246,.16); --line-2:rgba(242,244,246,.34);
  --radius-sm:0px; --radius:0px; --radius-lg:0px;
}
/* door panels: flat blocks with a hard offset shadow in the accent, no blur */
body.world-full-service .service-card,
body.world-full-service .step,
body.world-full-service .faq-item,
body.world-full-service .tcard{
  background:var(--panel); border:2px solid var(--vinyl); border-radius:0;
  box-shadow:6px 6px 0 0 var(--ember);
}
body.world-full-service .svc-ico,
body.world-full-service .step-ico{ display:none; }
body.world-full-service .service-card h3,
body.world-full-service .section-h2{
  text-transform:uppercase; font-stretch:118%; font-weight:800;
  letter-spacing:-.005em;
}
/* the unit number, the way a fleet vehicle carries one */
body.world-full-service .step-num{
  font-variant-numeric:tabular-nums; font-stretch:118%; font-weight:800;
  font-size:1.5rem; color:var(--ember); letter-spacing:0;
}
body.world-full-service .btn{ border-radius:0; }
body.world-full-service .btn-primary{ box-shadow:5px 5px 0 0 var(--vinyl); }
body.world-full-service .brand-name{ text-transform:uppercase; font-stretch:118%; font-weight:800; }
body.world-full-service .brand-mark{ border-radius:0; }

/* The dot field is white-on-dark by default. On the LIGHT auto-glass world it
   has to invert or the ground reads as flat paper with nothing in it. */
body.world-auto-glass::before{
  background-image:radial-gradient(rgba(20,22,24,.11) 1px, transparent 1px);
}

/* The photo hero paints a dark image + scrim, but this world flipped text to
   ink for the light paper body. Dark ink on a dark photo is unreadable and the
   gate cannot see it (C9 only checks the primary button pair), so the photo
   hero keeps light text here. Scoped to hero-photo-mode ONLY: an editorial
   hero in this world sits on light paper, where ink is correct.
   A dark cover over a light body is native to the world anyway, since a work
   authorization carries a dark header block. */
body.world-auto-glass.hero-photo-mode .hero,
body.world-auto-glass.hero-photo-mode .hero h1,
body.world-auto-glass.hero-photo-mode .hero .hero-h1,
body.world-auto-glass.hero-photo-mode .hero .hero-tag,
body.world-auto-glass.hero-photo-mode .hero p{ color:#F4F2EC; }
body.world-auto-glass.hero-photo-mode .hero .hero-tag strong,
body.world-auto-glass.hero-photo-mode .hero h1 em{ color:#FFF; }

/* =========================================================================
   PER-WORLD FIRST VIEWPORTS
   Everything above lived BELOW the fold, so all four worlds shipped the same
   hero: pill nav, kicker, Archivo headline with one accent clause, dark car
   photo, identical booking-card mock bottom-right. Only the hue changed.
   The first viewport is the whole first impression, so the world has to be
   decided there or it is not a world. Each trade now differs in WHAT IS IN
   the hero, not only what colour it is.
   ========================================================================= */

/* ---- mobile-detailing: the hero IS the painted sign board. No photograph,
        no widget. A signwriter's board is lettering between pulled lines. ---- */
body.world-mobile-detailing .hero-media,
body.world-mobile-detailing .booking-card{ display:none; }
body.world-mobile-detailing .hero{ padding-block:clamp(56px,9vw,120px); }
body.world-mobile-detailing .hero-copy{ max-width:none; }
body.world-mobile-detailing .hero-h1{
  color:var(--leaf);
  font-size:clamp(2.6rem,1.4rem + 6.4vw,6.4rem);
  line-height:.96; font-stretch:114%;
  padding-block:clamp(18px,2.4vw,30px);
  border-top:3px solid var(--leaf-dim);
  border-bottom:1px solid var(--leaf-faint);
  -webkit-text-stroke:.5px rgba(0,0,0,.5);
  text-shadow:0 -1px 0 rgba(240,217,160,.30);
}
body.world-mobile-detailing .hero-h1 em{ color:var(--cream-bright); }
body.world-mobile-detailing .hero-tag{ max-width:52ch; }

/* ---- tint-ppf: the hero is a DENSITY SCALE. The photograph stays, but it is
        stepped through eight densities, which is the trade's own instrument. -- */
body.world-tint-ppf .hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right,
    rgba(14,14,15,.06) 0 12.5%, rgba(14,14,15,.20) 12.5% 25%,
    rgba(14,14,15,.34) 25% 37.5%, rgba(14,14,15,.48) 37.5% 50%,
    rgba(14,14,15,.62) 50% 62.5%, rgba(14,14,15,.74) 62.5% 75%,
    rgba(14,14,15,.85) 75% 87.5%, rgba(14,14,15,.94) 87.5% 100%);
}
body.world-tint-ppf .hero-h1{
  font-stretch:76%; font-size:clamp(2.4rem,1.3rem + 5.6vw,5.6rem);
  line-height:1.0; letter-spacing:-.01em; text-transform:uppercase;
}
body.world-tint-ppf .hero-h1 em{ color:var(--safelight); }
body.world-tint-ppf .booking-card{
  border-radius:0; border:0; border-left:4px solid var(--safelight);
  box-shadow:none;
}
body.world-tint-ppf .bc-avatar,
body.world-tint-ppf .bc-day{ border-radius:0; }

/* ---- auto-glass: the hero is the TOP OF THE FORM. No photograph at all: a
        work authorization is paper, and the light ground is the point. ------- */
body.world-auto-glass .hero-media{ display:none; }
body.world-auto-glass.hero-photo-mode .hero,
body.world-auto-glass.hero-photo-mode .hero h1,
body.world-auto-glass.hero-photo-mode .hero .hero-h1,
body.world-auto-glass.hero-photo-mode .hero .hero-tag,
body.world-auto-glass.hero-photo-mode .hero p{ color:var(--cream); }
body.world-auto-glass .hero{
  border-bottom:2px solid var(--line-2);
  padding-block:clamp(44px,6vw,86px);
}
body.world-auto-glass .hero-h1{
  font-size:clamp(2.2rem,1.3rem + 4.4vw,4.4rem);
  line-height:1.02; letter-spacing:-.022em;
}
body.world-auto-glass .hero-h1 em{ color:var(--carbon); }
/* the copy block is a boxed field, captioned in the corner like a form */
body.world-auto-glass .hero-copy{
  position:relative; border:2px solid var(--line-2);
  padding:clamp(22px,3vw,34px); background:var(--panel); max-width:none;
}
body.world-auto-glass .hero-copy::before{
  content:"WORK AUTHORIZATION"; position:absolute; top:-.62em; left:16px;
  background:var(--panel); padding:0 8px;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em;
  color:var(--cream-mute);
}
body.world-auto-glass .booking-card{
  border-radius:0; border:2px solid var(--line-2); box-shadow:none;
}
body.world-auto-glass .bc-avatar,
body.world-auto-glass .bc-day{ border-radius:0; }

/* ---- full-service: the hero is a DOOR PANEL. Flat vinyl lettering with a
        hard offset shadow, the way a name sits on the side of a truck. ------- */
body.world-full-service .hero-h1{
  text-transform:uppercase; font-stretch:120%; font-weight:800;
  font-size:clamp(2.4rem,1.3rem + 5.8vw,5.8rem);
  line-height:.94; letter-spacing:-.02em;
  color:var(--vinyl);
  text-shadow:6px 6px 0 var(--ember);
}
body.world-full-service .hero-h1 em{ color:var(--vinyl); }
body.world-full-service .hero-media::after{
  content:""; position:absolute; inset:0; background:rgba(16,27,38,.62);
}
body.world-full-service .booking-card{
  border-radius:0; border:2px solid var(--vinyl);
  box-shadow:8px 8px 0 0 var(--ember);
}
body.world-full-service .bc-avatar,
body.world-full-service .bc-day{ border-radius:0; }

/* .hero-photo and .hero-scrim are SIBLINGS of .hero-media, not children, so
   hiding the media alone left the photograph rendering. Both worlds that
   deliberately have no photograph have to hide all three. */
body.world-mobile-detailing .hero-photo,
body.world-mobile-detailing .hero-scrim,
body.world-auto-glass .hero-photo,
body.world-auto-glass .hero-scrim{ display:none; }

/* the em on the form world reads as the carbon second copy, not as pale ink */
body.world-auto-glass .hero-h1 em{ color:var(--carbon); }

/* Retires the light-on-dark hero rule written while this world still had a
   photograph. Hiding the photo made it obsolete, but its specificity kept
   winning and left the emphasised clause pure white on paper at 1.18:1.
   ship_check passed it: C9 only measures the primary button pair, never
   display copy against the ground it actually sits on. */
body.world-auto-glass.hero-photo-mode .hero h1 em,
body.world-auto-glass .hero-h1 em{ color:var(--carbon); }
body.world-auto-glass.hero-photo-mode .hero .hero-tag strong{ color:var(--cream-bright); }

/* =========================================================================
   tint-ppf SIGNATURE MECHANIC: the VLT slider.
   The first viewport is not a styled hero, it is the product demo. Tint is
   sold by visible light transmission, so the page answers the customer's
   actual question (how dark will my glass look) instead of asserting it.
   FULL-BLEED on purpose: escaping the shared 1240px centred canvas is half of
   why the other worlds still read as one framework.
   ========================================================================= */
body.world-tint-ppf .hero--vlt{
  display:grid; grid-template-columns:1fr; gap:0;
  padding:0; min-height:auto; max-width:none;
}
@media (min-width:940px){
  body.world-tint-ppf .hero--vlt{ grid-template-columns:1.15fr .85fr; align-items:stretch; }
}
/* the stage: the glass you are looking through */
body.world-tint-ppf .vlt-stage{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(320px,52vh,620px);
  background:#0B0B0C;
}
body.world-tint-ppf .vlt-photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
body.world-tint-ppf .vlt-film{
  position:absolute; inset:0; background:#07070A;
  opacity:var(--film,.62);
  transition:opacity .28s cubic-bezier(.16,1,.3,1);
}
body.world-tint-ppf .vlt-readout{
  position:absolute; left:clamp(16px,3vw,34px); bottom:clamp(14px,3vw,30px);
  display:flex; align-items:baseline; gap:.28rem; z-index:2;
  color:var(--safelight); text-shadow:0 2px 14px rgba(0,0,0,.7);
}
body.world-tint-ppf .vlt-num{
  font-variant-numeric:tabular-nums; font-stretch:74%; font-weight:800;
  font-size:clamp(3.4rem,3rem + 6vw,8rem); line-height:.82; letter-spacing:-.03em;
}
body.world-tint-ppf .vlt-unit{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream-soft);
}
body.world-tint-ppf .vlt-cap{
  position:absolute; right:clamp(14px,3vw,28px); top:clamp(14px,3vw,26px); z-index:2;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(232,232,233,.62);
}

/* the panel: the decision, set against the demo */
body.world-tint-ppf .vlt-panel{
  padding:clamp(26px,4vw,54px) clamp(20px,4vw,52px);
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  border-top:1px solid var(--line);
}
@media (min-width:940px){
  body.world-tint-ppf .vlt-panel{ border-top:0; border-left:1px solid var(--line); }
}
body.world-tint-ppf .vlt-control{ margin:6px 0 4px; }
body.world-tint-ppf .vlt-label{
  display:block; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cream-mute); margin-bottom:12px;
}
body.world-tint-ppf .vlt-range{
  -webkit-appearance:none; appearance:none; width:100%; height:34px;
  background:transparent; cursor:pointer; display:block;
}
body.world-tint-ppf .vlt-range::-webkit-slider-runnable-track{
  height:6px; border-radius:0;
  background:linear-gradient(to right,
    rgba(232,232,233,.62) 0%, rgba(232,232,233,.30) 45%, rgba(232,232,233,.08) 100%);
}
body.world-tint-ppf .vlt-range::-moz-range-track{
  height:6px; border-radius:0;
  background:linear-gradient(to right,
    rgba(232,232,233,.62) 0%, rgba(232,232,233,.30) 45%, rgba(232,232,233,.08) 100%);
}
body.world-tint-ppf .vlt-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:28px; margin-top:-11px; border-radius:0;
  background:var(--safelight); border:0; box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
body.world-tint-ppf .vlt-range::-moz-range-thumb{
  width:16px; height:28px; border-radius:0;
  background:var(--safelight); border:0;
}
body.world-tint-ppf .vlt-range:focus-visible{ outline:2px solid var(--safelight); outline-offset:4px; }
body.world-tint-ppf .vlt-stops{
  display:flex; justify-content:space-between; margin-top:2px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em;
  color:var(--cream-mute); font-variant-numeric:tabular-nums;
}
body.world-tint-ppf .vlt-out{ margin-top:12px; color:var(--cream-soft); font-size:.98rem; }
body.world-tint-ppf .vlt-out b{ color:var(--safelight); font-variant-numeric:tabular-nums; }
body.world-tint-ppf .vlt-note{
  margin-top:6px; font-size:.82rem; color:var(--cream-mute); max-width:46ch;
}
@media (prefers-reduced-motion:reduce){
  body.world-tint-ppf .vlt-film{ transition:none; }
}

/* The world's display scale is right for a standard hero and far too big here:
   it pushed the slider and the readout below the fold, so the signature
   mechanic was not in the first viewport at all. The demo outranks the
   headline on this surface. */
body.world-tint-ppf .hero--vlt .hero-h1{
  font-size:clamp(1.9rem,1.1rem + 2.6vw,3.1rem);
  line-height:1.03; margin-bottom:2px;
}
body.world-tint-ppf .hero--vlt .hero-tag{
  font-size:clamp(.95rem,.9rem + .25vw,1.06rem); line-height:1.5; max-width:44ch;
}
body.world-tint-ppf .hero--vlt .eyebrow{ margin-bottom:2px; }
body.world-tint-ppf .vlt-panel{ gap:10px; }

/* =========================================================================
   auto-glass SIGNATURE MECHANIC: the damage picker.
   The first viewport answers the customer's actual first question instead of
   asserting how good the shop is. Native to the world: a work authorization
   is filled in, so choosing the damage completes a field and the answer
   arrives as a determination box.
   GEOMETRY is deliberately unlike the tint world's full-bleed split: a
   document SHEET on paper, narrower than the site wrap, so the two mechanics
   cannot read as the same layout wearing different colours.
   ========================================================================= */
body.world-auto-glass .hero--claim{
  padding:clamp(22px,4vw,54px) 18px clamp(28px,4vw,56px);
  display:flex; justify-content:center;
}
body.world-auto-glass .claim-sheet{
  width:100%; max-width:980px;
  background:var(--panel);
  border:2px solid var(--line-2);
  padding:clamp(20px,3.4vw,42px);
  display:flex; flex-direction:column; gap:clamp(16px,2.2vw,26px);
}
body.world-auto-glass .claim-form-no{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em;
  color:var(--cream-mute); border-bottom:1.5px solid var(--line-2);
  padding-bottom:8px; margin-bottom:4px;
}
body.world-auto-glass .claim-head .eyebrow{ margin-bottom:6px; }
body.world-auto-glass .hero--claim .hero-h1{
  font-size:clamp(1.7rem,1.1rem + 2.2vw,2.9rem); line-height:1.05; margin:0;
}

/* the picker: a real radio fieldset, so keyboard and screen readers work */
body.world-auto-glass .claim-pick{ border:0; margin:0; padding:0; }
body.world-auto-glass .claim-legend,
body.world-auto-glass .claim-out-label{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cream-mute); padding:0; margin-bottom:10px;
}
body.world-auto-glass .claim-opts{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr));
}
body.world-auto-glass .claim-radio{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
body.world-auto-glass .claim-opt{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  border:1.5px solid var(--line); background:var(--bg);
  padding:13px 13px 12px; cursor:pointer;
  transition:border-color .16s, background .16s;
}
body.world-auto-glass .claim-opt svg{
  width:38px; height:38px; stroke:var(--cream-soft); stroke-width:2.4;
  fill:none; stroke-linecap:round; margin-bottom:2px;
}
body.world-auto-glass .claim-opt b{ font-size:.95rem; color:var(--cream); }
body.world-auto-glass .claim-opt span{ font-size:.76rem; color:var(--cream-mute); }
body.world-auto-glass .claim-opt:hover{ border-color:var(--line-2); }
body.world-auto-glass .claim-radio:checked + .claim-opt{
  border-color:var(--carbon); background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--carbon);
}
body.world-auto-glass .claim-radio:checked + .claim-opt svg{ stroke:var(--carbon); }
body.world-auto-glass .claim-radio:focus-visible + .claim-opt{
  outline:2px solid var(--carbon); outline-offset:3px;
}

/* the determination: the box a form stamps its answer into */
body.world-auto-glass .claim-out{
  border:2px solid var(--line-2); border-left:6px solid var(--carbon);
  padding:16px 18px; background:var(--bg);
}
body.world-auto-glass .claim-out-verdict{
  font-family:var(--font-display); font-weight:800; font-stretch:104%;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem); color:var(--cream-bright);
  letter-spacing:-.015em; margin-bottom:6px;
}
body.world-auto-glass .claim-out-body{ color:var(--cream-soft); max-width:70ch; margin:0; }
body.world-auto-glass .claim-note{
  font-size:.82rem; color:var(--cream-mute); max-width:60ch; margin:0;
}
@media (prefers-reduced-motion:reduce){
  body.world-auto-glass .claim-opt{ transition:none; }
}

/* =========================================================================
   mobile-detailing SIGNATURE MECHANIC: the drag-to-reveal.
   For a detailer the before/after IS the product, so the first viewport is the
   work and dragging it is the pitch.
   THIRD distinct geometry: edge-to-edge, lettering ON the work. Not a split
   (tint), not a document sheet (auto-glass).
   THIRD distinct interaction: a direct drag wipe. The handle is a COACHLINE,
   which keeps the mechanic inside the world's own vocabulary.
   Drives the template's existing --ba-pos, so no new JS ships.
   ========================================================================= */
body.world-mobile-detailing .hero--wipe{ padding:0; }
body.world-mobile-detailing .wipe-stage{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(430px,74vh,760px);
  background:var(--lacquer-2);
}
body.world-mobile-detailing .wipe-half{ position:absolute; inset:0; }
body.world-mobile-detailing .wipe-after{ z-index:1; }
body.world-mobile-detailing .wipe-before{
  z-index:2; clip-path:inset(0 calc(100% - var(--ba-pos,54%)) 0 0);
}
body.world-mobile-detailing .wipe-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
/* The "before" is deliberately NOT photographic. A branded plate cannot be
   mistaken for this shop's real work, which is the point until real pairs
   arrive. Hatched, flat, obviously a stand-in. */
body.world-mobile-detailing .wipe-img-before{
  background:
    repeating-linear-gradient(58deg,
      rgba(0,0,0,.34) 0 12px, rgba(0,0,0,.16) 12px 24px),
    var(--lacquer-2);
}
body.world-mobile-detailing .wipe-half::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(94deg, rgba(9,5,4,.82) 0%, rgba(9,5,4,.52) 42%, rgba(9,5,4,.14) 78%);
}
body.world-mobile-detailing .wipe-lbl{
  position:absolute; top:clamp(14px,2.4vw,24px); z-index:4;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--leaf);
  border:1px solid var(--leaf-faint); padding:.3rem .6rem;
}
body.world-mobile-detailing .wipe-lbl-b{ left:clamp(14px,2.4vw,24px); }
body.world-mobile-detailing .wipe-lbl-a{ right:clamp(14px,2.4vw,24px); }

/* the handle IS a coachline: heavy line, gap, fine line */
body.world-mobile-detailing .wipe-handle{
  position:absolute; top:0; bottom:0; left:var(--ba-pos,54%); z-index:5;
  width:5px; transform:translateX(-2px); pointer-events:none;
  background:linear-gradient(to right,
    var(--leaf) 0 2px, transparent 2px 3px, var(--leaf-faint) 3px 5px);
}
body.world-mobile-detailing .wipe-range{
  position:absolute; inset:0; z-index:6; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize;
}
body.world-mobile-detailing .wipe-range:focus-visible{
  opacity:1; outline:2px solid var(--leaf); outline-offset:-4px;
  background:transparent;
}

/* the lettering sits ON the work. pointer-events stay off so the whole stage
   drags, except the buttons themselves. */
body.world-mobile-detailing .wipe-copy{
  position:relative; z-index:8; pointer-events:none;
  max-width:min(640px,84%);
  padding:clamp(26px,5vw,64px) clamp(20px,4vw,58px) clamp(14px,2vw,24px);
  display:flex; flex-direction:column; gap:12px;
}
body.world-mobile-detailing .wipe-copy .btn{ pointer-events:auto; }
body.world-mobile-detailing .hero--wipe .hero-h1{
  border:0; padding:0;
  font-size:clamp(2.2rem,1.3rem + 4.4vw,4.6rem);
  line-height:.98; margin:0;
}
body.world-mobile-detailing .hero--wipe .hero-h1 em{ color:var(--cream-bright); }
body.world-mobile-detailing .hero--wipe .hero-tag{ max-width:46ch; }
body.world-mobile-detailing .wipe-flag{
  position:absolute; left:clamp(20px,4vw,58px); bottom:clamp(12px,2vw,20px);
  z-index:8; margin:0; max-width:52ch;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
  color:var(--cream-mute);
}

/* With no real photos on file BOTH halves rendered near-black, so a working
   mechanic looked broken. The demo has to demonstrate, so the "after" side
   gets a branded gloss plate as its fallback. Neither plate is photographic,
   which is the point: a stand-in cannot be mistaken for this shop's real work,
   and a real {{hero_photo_style}} overrides it inline the moment one exists. */
body.world-mobile-detailing .wipe-img-after{
  background:
    radial-gradient(130% 96% at 74% 16%, rgba(255,247,235,.20), transparent 62%),
    linear-gradient(198deg, #33201A 0%, #241612 46%, var(--lacquer-2) 100%);
}
/* the before half carries the extra weight, so the wipe reads at a glance */
body.world-mobile-detailing .wipe-before::after{
  background:linear-gradient(94deg, rgba(6,3,3,.90) 0%, rgba(6,3,3,.74) 46%, rgba(6,3,3,.56) 100%);
}
body.world-mobile-detailing .wipe-after::after{
  background:linear-gradient(94deg, rgba(9,5,4,.86) 0%, rgba(9,5,4,.42) 44%, rgba(9,5,4,.06) 82%);
}

/* =========================================================================
   MOBILE RESCUE FOR THE MECHANICS
   Audited at 390x844: the two newest mechanics pushed the PRIMARY ACTION far
   below the fold on the viewport most of this traffic actually uses.
     tint      hero 1083px, book CTA at 989
     auto-glass hero 1257px, book CTA at 1143
   Nothing overflowed and nothing was ugly, which is why it was invisible from
   a desktop window. A demo whose booking button is 300px below the fold on a
   phone is not converting, and converting is the job.
   The mechanic stays; it just stops eating the screen.
   ========================================================================= */
@media (max-width:939px){

  /* ---- tint: shorter stage, tighter panel ---- */
  body.world-tint-ppf .vlt-stage{ min-height:clamp(200px,30vh,260px); }
  body.world-tint-ppf .vlt-num{ font-size:clamp(2.6rem,2rem + 5vw,4rem); }
  body.world-tint-ppf .vlt-panel{ padding:20px 18px 24px; gap:8px; }
  body.world-tint-ppf .hero--vlt .hero-tag{ font-size:.95rem; }
  body.world-tint-ppf .vlt-control{ margin:2px 0; }
  body.world-tint-ppf .vlt-out{ margin-top:8px; font-size:.9rem; }
  body.world-tint-ppf .vlt-note{ font-size:.78rem; }

  /* ---- auto-glass: the picker becomes compact rows, not tall tiles ---- */
  body.world-auto-glass .claim-sheet{ padding:18px 16px 20px; gap:14px; }
  body.world-auto-glass .claim-opts{ grid-template-columns:1fr 1fr; gap:8px; }
  body.world-auto-glass .claim-opt{
    flex-direction:row; align-items:center; gap:9px; padding:9px 10px;
  }
  body.world-auto-glass .claim-opt svg{ width:24px; height:24px; margin:0; flex:none; }
  body.world-auto-glass .claim-opt b{ font-size:.85rem; }
  body.world-auto-glass .claim-opt span{ display:none; }   /* the label carries it */
  body.world-auto-glass .claim-out{ padding:12px 13px; }
  body.world-auto-glass .claim-out-body{ font-size:.92rem; }

  /* both: the action must never be the thing that falls off the screen */
  body.world-tint-ppf .hero--vlt .cta-row,
  body.world-auto-glass .hero--claim .cta-row{ gap:8px; }
}

/* =========================================================================
   NICHE BACKGROUND ANIMATION
   Present only on the six animated variants of each niche; the six clean
   variants ship no canvas element at all, so "clean" costs nothing rather
   than hiding a node.
   The device is always the NICHE'S OWN, never the agency's. Borrowing the
   agency's field animation is what made every client site read as a Build
   Busy variant, and that is not repeated here.
   ========================================================================= */
#niche-fx{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
@media (prefers-reduced-motion:reduce){
  /* the script refuses to start under reduce; this is the belt to that brace */
  #niche-fx{ display:none; }
}