/* ==========================================================================
   Details Matter — Mobile Detailing
   Design system
   Palette is drawn from real automotive paint names:
     Obsidian (ground) · Nardo Grey (neutral) · Alpine White (inverted)
     Guards Red (accent, used sparingly) · Sunburst (rating stars only)
   Type: Archivo (display, expanded/heavy) · IBM Plex Sans (body)
         IBM Plex Mono (spec labels, codes, data)
   ========================================================================== */

:root{
  /* dark scrollbars and dark native controls (the date picker in the booking
     form), instead of the OS light default against a near-black page */
  color-scheme:dark;
  /* --- ground + surfaces --------------------------------------------- */
  --obsidian:#0B0D0F;
  --graphite:#111417;
  --slate:#171B20;
  --slate-2:#1E242A;
  --line:#262D34;
  --line-soft:#1B2126;

  /* --- inverted (light) sections -------------------------------------- */
  --alpine:#F1F2F0;
  --alpine-2:#E4E6E3;
  --alpine-line:#CFD2CE;

  /* --- type ----------------------------------------------------------- */
  --chalk:#EDEFEF;
  --nardo:#98A0A5;
  --nardo-dim:#6C7479;
  --ink:#14181B;
  --ink-2:#4A5257;

  /* --- accents --------------------------------------------------------- */
  --guards:#D6182B;
  --guards-hot:#F02338;
  --guards-deep:#8C0F1C;
  --sun:#E9B84A;

  /* --- metrics ---------------------------------------------------------- */
  --wrap:1220px;
  --gut:clamp(20px,5vw,56px);
  --rule:1px solid var(--line);
  --rule-light:1px solid var(--alpine-line);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

}

/* ==========================================================================
   Base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
/* the ground is painted on <html> too, so a transparent body during the
   intro handoff can never expose the browser's default white */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--obsidian);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--obsidian);
  color:var(--chalk);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,canvas{display:block;max-width:100%;}
[hidden]{display:none !important;}
a{color:inherit;}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:112%;
  line-height:0.98;
  letter-spacing:-0.012em;
  text-wrap:balance;
  margin:0;
}

/* the vw term keeps 'Every surface.' on one line down to ~320px */
h1{font-size:clamp(1.7rem,8.4vw,3.72rem);font-weight:900;font-stretch:113%;letter-spacing:-0.022em;text-transform:uppercase;}
h2{font-size:clamp(1.7rem,3.1vw,2.5rem);text-transform:uppercase;letter-spacing:-0.015em;}
h3{font-size:clamp(1.12rem,1.7vw,1.32rem);font-stretch:104%;letter-spacing:0.002em;}
p{margin:0;}

::selection{background:var(--guards);color:#fff;}

:focus-visible{
  outline:2px solid var(--guards-hot);
  outline-offset:3px;
  border-radius:1px;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}

.section{border-top:var(--rule);position:relative;}
.section > .wrap{padding-block:clamp(64px,8vw,116px);}

/* inverted (Alpine White) sections */
.section--light{background:var(--alpine);color:var(--ink);border-top-color:var(--alpine-line);}
.section--light h1,.section--light h2,.section--light h3{color:var(--ink);}

.stack{display:flex;flex-direction:column;}

/* --- section header: mono spec label + expanded headline ------------------ */
.sechead{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
  padding-bottom:clamp(34px,4.4vw,56px);
}
@media (min-width:900px){
  .sechead{grid-template-columns:190px minmax(0,1fr);gap:0 40px;align-items:start;}
}
.sechead__tag{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--nardo-dim);
  padding-top:.55em;
  display:flex;align-items:baseline;gap:.6em;
}
.section--light .sechead__tag{color:var(--ink-2);}
.sechead__tag::before{
  content:"";width:26px;height:1px;background:var(--guards);
  display:inline-block;transform:translateY(-.28em);flex:none;
}
.sechead__lede{
  max-width:56ch;margin-top:20px;color:var(--nardo);font-size:1.03rem;
}
.section--light .sechead__lede{color:var(--ink-2);}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  --btn-bg:var(--guards);
  --btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-mono);
  font-size:.775rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:500;
  padding:1.03em 1.6em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bg);
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--guards-hot);border-color:var(--guards-hot);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--chalk);border-color:var(--line);}
.btn--ghost:hover{background:transparent;border-color:var(--chalk);color:var(--chalk);}
.section--light .btn--ghost{--btn-fg:var(--ink);border-color:var(--alpine-line);}
/* the shared ghost hover sets a near-white text colour, which vanishes here —
   fill the button instead, which also reads as a stronger affordance */
.section--light .btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--alpine);}
/* a dark panel inside a light section would otherwise inherit the rule above
   and paint near-black text on near-black */
.section--light .plan__main .btn--ghost,
.section--light .coating__price .btn--ghost{--btn-fg:var(--chalk);border-color:var(--line);}
.section--light .plan__main .btn--ghost:hover,
.section--light .coating__price .btn--ghost:hover{background:transparent;border-color:var(--chalk);color:var(--chalk);}
/* and .notice paints a light panel on whichever ground it sits on, so a ghost
   button inside one always wants the light treatment, dark section or not */
.notice .btn--ghost{--btn-fg:var(--ink);border-color:var(--alpine-line);}
.notice .btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--alpine);}

.btn--wide{width:100%;}
/* a third weight: present, but clearly behind the two real actions */
.btn--quiet{
  --btn-bg:transparent;--btn-fg:var(--nardo);border-color:transparent;
  padding-inline:1.05em;
}
.btn--quiet:hover{background:transparent;border-color:transparent;color:var(--chalk);}

.btn__dot{width:6px;height:6px;background:currentColor;border-radius:50%;flex:none;opacity:.85;}

/* ==========================================================================
   Header
   ========================================================================== */

.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(11,13,15,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.hdr.is-stuck{border-bottom-color:var(--line);background:rgba(11,13,15,.93);}
.hdr__in{
  display:flex;align-items:center;gap:clamp(24px,3vw,44px);
  height:88px;
}
@media (max-width:600px){.hdr__in{height:78px;}}
/* --- brand lockup ---------------------------------------------------------
   The supplied artwork, white on transparent. The header carries a compact
   crop (car + wordmark) so the wordmark stays legible at nav size; the footer
   carries the full lockup including the tagline.
   -------------------------------------------------------------------------- */
.brand{
  display:block;flex:none;line-height:0;
  transition:opacity .18s ease;
}
.brand img{width:196px;height:auto;}
@media (max-width:600px){.brand img{width:158px;}}
@media (max-width:380px){.brand img{width:136px;}}

.brand--lg{margin-right:0;margin-bottom:6px;}
.brand--lg img{width:286px;}

.nav{display:none;align-items:center;gap:clamp(22px,2.2vw,32px);margin-inline:auto;}
@media (min-width:1000px){.nav{display:flex;}}
.nav a{
  font-family:var(--f-mono);font-size:.735rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--nardo);text-decoration:none;padding:6px 0;position:relative;
  transition:color .16s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--guards);
  transition:right .22s ease;
}

.hdr__cta{display:none;align-items:center;gap:12px;}
@media (min-width:1000px){.hdr__cta{display:flex;}}
.hdr .btn{padding:.82em 1.25em;}

.burger{
  display:grid;place-items:center;width:42px;height:42px;margin-left:auto;
  background:none;border:1px solid var(--line);color:var(--chalk);cursor:pointer;flex:none;
}
@media (min-width:1000px){.burger{display:none;}}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;position:relative;transition:background .2s;}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor;transition:transform .24s ease;
}
.burger span::before{top:-5.5px;}
.burger span::after{top:5.5px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg);}

/* The panel animates its height in JS, on the same curve as the FAQ. The
   padding lives on an inner wrapper so a collapsed panel is genuinely zero
   high — padding on the panel itself would leave a strip showing when shut. */
.mnav{display:block;overflow:hidden;height:0;}
.mnav__in{
  border-top:var(--rule);background:var(--graphite);
  padding:8px var(--gut) 26px;
}
.mnav a{
  display:block;padding:15px 0;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:var(--chalk);
  font-family:var(--f-display);font-weight:800;font-stretch:112%;
  text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em;
  transition:color .18s ease,padding-left .28s cubic-bezier(.25,.8,.3,1);
}
.mnav .btn{margin-top:22px;}

/* each row lifts in just behind the panel opening */
.mnav__in > *{opacity:0;transform:translateY(-8px);}
.mnav.is-open .mnav__in > *{
  opacity:1;transform:none;
  transition:opacity .34s ease,transform .38s cubic-bezier(.25,.8,.3,1);
}
.mnav.is-open .mnav__in > :nth-child(1){transition-delay:.06s;}
.mnav.is-open .mnav__in > :nth-child(2){transition-delay:.10s;}
.mnav.is-open .mnav__in > :nth-child(3){transition-delay:.14s;}
.mnav.is-open .mnav__in > :nth-child(4){transition-delay:.18s;}
.mnav.is-open .mnav__in > :nth-child(5){transition-delay:.22s;}
.mnav.is-open .mnav__in > :nth-child(6){transition-delay:.26s;}
.mnav.is-open .mnav__in > :nth-child(7){transition-delay:.30s;}
.mnav.is-open .mnav__in > :nth-child(8){transition-delay:.34s;}
@media (prefers-reduced-motion:reduce){
  .mnav__in > *{opacity:1;transform:none;}
  .mnav.is-open .mnav__in > *{transition:none;}
}

/* ==========================================================================
   Hero — full bleed, layers drifting on scroll. The photograph is a crop of
   one of our own cars, cut by the BACKDROPS table in build/photos.py; change
   the source there and both the hero and the coming-soon splash follow.
   ========================================================================== */

.hero{
  position:relative;overflow:hidden;border-bottom:var(--rule);
  min-height:min(84vh,820px);
  display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;
}

.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
/* No vertical overscan. The parallax only ever moves these layers DOWN while
   the hero itself scrolls UP faster, so they can't uncover an edge — and any
   overscan here would be paid for in crop, since `cover` fills the taller box
   by throwing away the sides of the photograph. */
.hero__bg > *{position:absolute;inset:0;will-change:transform;}

.hero__art{background:var(--obsidian) url("../img/bg-hero.jpg?v=a4e75205") 55% 50%/cover no-repeat;}
@media (max-width:820px){
  /* `cover` on a narrow screen crops to the busiest part of the frame */
  .hero__art{background-position:36% 50%;}
}

.hero__gleam{
  background:
    radial-gradient(30% 26% at 82% 10%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(44% 30% at 8% 84%, rgba(214,24,43,.14) 0%, rgba(214,24,43,0) 70%);
  mix-blend-mode:screen;
}
.hero__grain{
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) .5px,transparent .5px);
  background-size:3px 3px;opacity:.3;
}
.hero__veil{
  inset:0;
  background:
    /* a soft pool behind the copy column, so the rest of the frame can stay open */
    radial-gradient(44% 54% at 25% 52%,rgba(7,9,11,.60) 0%,rgba(7,9,11,.22) 62%,rgba(7,9,11,0) 100%),
    linear-gradient(92deg,rgba(7,9,11,.92) 0%,rgba(7,9,11,.86) 30%,rgba(7,9,11,.72) 50%,rgba(7,9,11,.36) 74%,rgba(7,9,11,.18) 90%,rgba(7,9,11,.44) 100%),
    linear-gradient(180deg,rgba(7,9,11,.74) 0%,rgba(7,9,11,.26) 24%,rgba(7,9,11,.34) 58%,rgba(7,9,11,.92) 100%);
}
@media (max-width:820px){
  .hero__veil{background:linear-gradient(180deg,rgba(8,10,12,.90) 0%,rgba(8,10,12,.74) 42%,rgba(8,10,12,.94) 100%);}
}

.hero__in{
  position:relative;z-index:2;
  padding-block:clamp(76px,13vw,150px) clamp(48px,7vw,92px);
  flex:1;display:flex;align-items:center;
}
.hero__copy{max-width:min(680px,100%);will-change:transform,opacity;}

.eyebrow{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--nardo-dim);display:flex;align-items:center;gap:.85em;margin-bottom:26px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--guards);flex:none;}

.hero h1 em{font-style:normal;color:var(--guards);}
/* over a photograph, the smaller copy needs a little more weight than --nardo
   and a shadow soft enough to read as separation rather than as a shadow */
.hero__lede{
  margin-top:26px;max-width:41ch;color:#B4BBBF;font-size:clamp(1rem,1.35vw,1.11rem);
  text-shadow:0 1px 22px rgba(5,7,9,.85);
}
.hero .eyebrow,.hero__areas{text-shadow:0 1px 18px rgba(5,7,9,.8);}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}

/* The strip is a cell grid like the one in the section below, so its outer
   edges and inner text line up with everything further down the page. */
.hero__strip{
  position:relative;z-index:2;
  border-top:var(--rule);border-left:var(--rule);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:820px){.hero__strip{grid-template-columns:repeat(4,minmax(0,1fr));}}
.hero__stat{
  border-right:var(--rule);border-bottom:var(--rule);
  padding:20px clamp(20px,2.7vw,34px) 22px;
}
.hero__stat b{
  display:block;font-family:var(--f-display);font-weight:900;font-stretch:114%;
  font-size:1.28rem;letter-spacing:-.01em;color:var(--chalk);
}
.hero__stat > span{
  display:block;margin-top:6px;font-family:var(--f-mono);font-size:.65rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--nardo-dim);line-height:1.5;
}
.stars{color:var(--sun);display:inline-block;line-height:1;white-space:nowrap;}
.stars svg{display:inline-block;width:1em;height:1em;fill:currentColor;vertical-align:-.12em;margin-right:1px;}
.review .stars{font-size:.92rem;}
.sechead__lede .stars{font-size:.95em;margin-right:.3em;}

@media (prefers-reduced-motion:reduce){
  .hero__bg > *{transform:none !important;}
  .hero__copy{transform:none !important;opacity:1 !important;}
}

/* you are here */
.nav a[aria-current="page"]{color:var(--chalk);}
.nav a[aria-current="page"]::after{right:0;}
.mnav a[aria-current="page"]{color:var(--guards-hot);}

/* ==========================================================================
   Sub-page hero — shorter than the home page's, same materials
   ========================================================================== */

.subhero{position:relative;overflow:hidden;border-bottom:var(--rule);isolation:isolate;}
.subhero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.subhero__bg > *{position:absolute;inset:0;}
.subhero__art{background:var(--obsidian) url("../img/bg-coating.jpg?v=b07112fc") 50% 50%/cover no-repeat;}
.subhero__veil{
  background:
    radial-gradient(46% 60% at 26% 52%,rgba(7,9,11,.72) 0%,rgba(7,9,11,.28) 62%,rgba(7,9,11,0) 100%),
    linear-gradient(92deg,rgba(7,9,11,.95) 0%,rgba(7,9,11,.88) 32%,rgba(7,9,11,.62) 58%,rgba(7,9,11,.28) 84%,rgba(7,9,11,.5) 100%),
    linear-gradient(180deg,rgba(7,9,11,.7) 0%,rgba(7,9,11,.3) 26%,rgba(7,9,11,.34) 62%,rgba(7,9,11,.88) 100%);
}
@media (max-width:820px){
  .subhero__art{background-position:40% 46%;}
  .subhero__veil{background:linear-gradient(180deg,rgba(7,9,11,.9) 0%,rgba(7,9,11,.74) 40%,rgba(7,9,11,.94) 100%);}
}
.subhero__in{
  position:relative;z-index:2;
  padding-block:clamp(64px,9vw,112px) clamp(56px,8vw,96px);
  max-width:min(860px,100%);
}
.subhero h1{font-size:clamp(2rem,5.2vw,3.4rem);}
.subhero h1 em{font-style:normal;color:var(--guards);}
.subhero .hero__lede{max-width:56ch;text-shadow:0 1px 22px rgba(5,7,9,.85);}

/* ==========================================================================
   The standard we work to — a list of rows, not a grid of cards. The add-ons
   below are already a card grid; running the same shape twice on one page made
   the two sections read as the same thing said twice.
   ========================================================================== */

/* Two across on wide screens. Six full-width rows plus a photograph made this
   taller than its weight on the page; the same information reads in half the
   height and the eye takes it in as one block. */
.std{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);
  border-top:var(--rule);border-left:var(--rule);
}
@media (min-width:820px){.std{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* three items sit as thirds; as halves the last one leaves a hole */
@media (min-width:820px){.std--three{grid-template-columns:repeat(3,minmax(0,1fr));}}
.std__row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  column-gap:clamp(16px,1.6vw,22px);row-gap:6px;
  align-items:start;
  padding:22px clamp(18px,2vw,26px) 24px;
  border-right:var(--rule);border-bottom:var(--rule);
  position:relative;overflow:hidden;
  transition:background .26s ease;
}
.std__ico{grid-column:1;grid-row:1 / span 3;}
.std__code,.std__row h3,.std__body{grid-column:2;}

/* the same rule that draws across a card, run along a row */
.std__row::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--guards);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.25,1);
}

.std__ico{
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--nardo);
  transition:color .26s ease,border-color .26s ease,background .26s ease;
}
.std__ico svg{
  width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}

.std__code{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nardo-dim);padding-top:.35em;transition:color .26s ease;
}
.std__row h3{font-size:clamp(1.02rem,1.5vw,1.14rem);}
.std__body{color:var(--nardo);font-size:.94rem;line-height:1.62;}

/* ==========================================================================
   Packages
   ========================================================================== */

/* Desktop and tablet get three columns side by side. Below that they don't
   stack — three tall cards in a row vertically buries the third one — they
   become a snap-scrolling row, the same pattern as the reviews. */
.tiers{
  display:grid;grid-auto-flow:column;grid-auto-columns:86%;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;
  border-top:var(--rule-light);border-left:var(--rule-light);
  scrollbar-width:none;
  /* run past the page gutter on the right: the row is scrollable, so cutting
     it off at the text margin reads as clipped rather than as "there's more" */
  margin-right:calc(var(--gut) * -1);
}
.tiers::-webkit-scrollbar{display:none;}
.tiers > *{scroll-snap-align:start;}
@media (min-width:560px){.tiers{grid-auto-columns:56%;}}
@media (min-width:900px){
  .tiers{
    grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;
    margin-right:0;
  }
}

/* --- the scrolling layout: discrete cards, and a lot less tall -----------
   At 375px a card ran 673px, 83% of the screen, so you could never see one
   whole card and its neighbour at once. Tightening the type and the price
   rows brings it to roughly two thirds of that without dropping a single
   line of content. */
@media (max-width:899px){
  .tiers{gap:14px;border:0;padding-bottom:2px;}
  .tier{
    border:1px solid var(--alpine-line);
    padding:22px 20px 24px;gap:15px;
  }
  .tier--feature{border-color:var(--guards);box-shadow:0 10px 30px -22px rgba(20,24,27,.5);}

  .pricelist > div{padding:8px 12px 9px;}
  .pricelist dt{font-size:.55rem;letter-spacing:.09em;}
  .pricelist dd{font-size:1.18rem;}

  .tier__meta{font-size:.6rem;gap:.4em .6em;}
  .tier__list{gap:7px;}
  .tick{font-size:.87rem;line-height:1.45;gap:.6em;}
  .tick::before{margin-top:.34em;}
  .tier__foot{padding-top:2px;}
  .tier .btn{padding:.9em 1.2em;}
}

/* a nudge that this row moves, shown only while it actually scrolls */
.tiers__hint{
  display:flex;align-items:center;gap:.7em;margin-top:16px;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-2);
}
.tiers__hint svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
@media (min-width:900px){.tiers__hint{display:none;}}
.tier{
  border-right:var(--rule-light);border-bottom:var(--rule-light);
  padding:clamp(26px,2.8vw,38px);
  display:flex;flex-direction:column;gap:20px;
  background:var(--alpine);
}
/* Marked out by a red frame and a lift rather than by inverting to black —
   the inverted version was a hard contrast jump mid-section, and grey body
   text on it was genuinely hard to read. */
.tier--feature{
  background:#FBFBFA;min-width:0;border-color:var(--guards);
  box-shadow:0 1px 0 var(--guards) inset,0 -1px 0 var(--guards) inset,
             0 18px 40px -24px rgba(20,24,27,.45);
  position:relative;z-index:1;
}
.tier--feature h3{color:var(--ink);}

.tier__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.tier__badge{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  background:var(--guards);color:#fff;padding:.42em .7em;white-space:nowrap;
}
.tier__price{
  font-family:var(--f-display);font-weight:900;font-stretch:118%;
  font-size:clamp(2.4rem,4.4vw,3.2rem);line-height:1;letter-spacing:-.025em;
  color:var(--ink);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.22em;
}
.tier__price small{
  font-family:var(--f-mono);font-size:.62rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.tier--feature .tier__price small{color:var(--nardo-dim);}
.tier__meta{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:.5em .8em;
}
.tier__meta span:first-child{
  border:1px solid var(--alpine-line);padding:.32em .6em;color:var(--ink);
}
.tier--feature .tier__meta span:first-child{border-color:var(--guards);color:var(--guards-deep);}
.tier__list{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none;}

/* A spec list should look like a spec list. The class was on the markup from
   the start but never had a marker, so the inclusions read as loose prose
   rather than as the list of what you are buying. The check is drawn from two
   borders rather than set as a glyph, so it lines up the same in every font. */
.tick{display:flex;align-items:flex-start;gap:.7em;}
.tick::before{
  content:"";flex:none;
  width:.62em;height:.33em;margin-top:.42em;
  border-left:2px solid var(--guards);
  border-bottom:2px solid var(--guards);
  transform:rotate(-45deg);
}
.tier__foot{margin-top:auto;padding-top:8px;}


/* --- add-ons: a priced grid rather than a price list. The number leads,
   because that is what people are scanning for. -------------------------- */
.addons{
  display:grid;gap:0;border-top:var(--rule);border-left:var(--rule);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:620px){.addons{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1040px){.addons{grid-template-columns:repeat(4,minmax(0,1fr));}}
.addon{
  border-right:var(--rule);border-bottom:var(--rule);
  padding:clamp(22px,2.4vw,28px);
  display:flex;flex-direction:column;gap:9px;
  position:relative;overflow:hidden;
  transition:background .26s ease;
}
.addon::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--guards);
  transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.2,.7,.25,1);
}
.addon__price{transition:color .26s ease;}
.addon__price{
  font-family:var(--f-display);font-weight:900;font-stretch:116%;
  font-size:1.9rem;line-height:1;letter-spacing:-.025em;color:var(--chalk);
  font-variant-numeric:tabular-nums;
}
.addon__price sup{
  font-size:.44em;vertical-align:.85em;margin-left:.12em;color:var(--guards);font-weight:700;
}
.addon h3{font-size:1rem;font-stretch:104%;font-weight:700;}
.addon h3 em{font-style:normal;font-weight:400;color:var(--nardo-dim);}
.addon__note{color:var(--nardo);font-size:.88rem;line-height:1.55;margin-top:auto;padding-top:6px;}
.addon--ask{background:#101418;}
.addon__kicker{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--guards);padding:.5em 0 .3em;
}

/* the footnote the asterisks point at */
.footnote{
  margin-top:22px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.05em;
  line-height:1.8;color:var(--nardo-dim);max-width:82ch;
}
.footnote span{color:var(--guards);font-weight:700;}
.section--light .footnote{color:var(--ink-2);}

/* ==========================================================================
   Before / after
   ========================================================================== */

.results{display:grid;gap:clamp(18px,2vw,26px);}
@media (min-width:860px){.results{grid-template-columns:repeat(2,minmax(0,1fr));}}

.ba{border:var(--rule);background:var(--graphite);}
.ba__stage{
  position:relative;aspect-ratio:3/2;overflow:hidden;user-select:none;
  touch-action:auto;cursor:default;
}
.ba__layer{position:absolute;inset:0;}
.ba__layer img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;}
.ba__layer--after{clip-path:inset(0 0 0 var(--split,50%));}

.ba__tag{
  position:absolute;top:12px;z-index:4;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.4em .62em;background:rgba(8,9,11,.72);color:var(--chalk);
  backdrop-filter:blur(3px);
}
.ba__tag--l{left:12px;}
.ba__tag--r{right:12px;color:var(--guards-hot);}

/* only this grabs: the bar plus its knob, with the gesture claimed outright
   so a drag on it never doubles as a page scroll */
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;
  background:var(--chalk);z-index:5;transform:translateX(-1px);
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
  touch-action:none;cursor:ew-resize;
}
.ba__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:var(--chalk);
  transition:transform .18s ease,box-shadow .18s ease;
  display:grid;place-items:center;color:var(--obsidian);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;
  box-shadow:0 2px 14px rgba(0,0,0,.5);
}
/* a comfortable thumb target, and a nudge that it is the thing to grab */
.ba__knob::after{content:"";position:absolute;inset:-11px;border-radius:50%;}
.ba__handle:hover .ba__knob{transform:translate(-50%,-50%) scale(1.08);}
.ba__handle.is-held .ba__knob{transform:translate(-50%,-50%) scale(.94);box-shadow:0 2px 20px rgba(0,0,0,.65);}

/* Snap gently on touch. Mandatory snapping would grab a mostly-vertical swipe
   that drifted sideways and yank the row to the next card. */
@media (pointer:coarse){
  .tiers,.carousel__track{scroll-snap-type:x proximity;}
}

.ba__cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,2vw,22px) 18px;border-top:var(--rule);
}
.ba__cap b{font-family:var(--f-display);font-weight:800;font-stretch:110%;font-size:1.02rem;text-transform:uppercase;}
.ba__cap span{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nardo-dim);white-space:nowrap;}

/* ==========================================================================
   Process — a real sequence, so it is numbered, and the numbers sit on a line
   that runs through them. On a light ground, which breaks up the long dark
   middle of the page.
   ========================================================================== */

/* Ground-aware. This was written for the light section on the home page and
   hard-coded its colours, so on the ceramic page the headings came out dark on
   near-black and the numbers were light boxes floating in the dark. */
.flow{
  --flow-ink:var(--chalk);
  --flow-body:var(--nardo);
  --flow-line:var(--line);
  --flow-numbg:var(--graphite);
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;gap:34px 0;grid-template-columns:minmax(0,1fr);
}
.section--light .flow{
  --flow-ink:var(--ink);
  --flow-body:var(--ink-2);
  --flow-line:var(--alpine-line);
  --flow-numbg:var(--alpine);
}
@media (min-width:880px){
  .flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
}
.flow__step{
  display:flex;flex-direction:column;gap:12px;position:relative;
  padding-left:74px;
}
@media (min-width:880px){
  /* Centred in the column: symmetric padding so the numbers sit on the column
     centres, which spaces the runs evenly and splits the leftover room either
     side of the row instead of dumping it all after the last box. */
  .flow__step{padding:0 clamp(18px,2vw,28px);align-items:center;text-align:center;}
  .flow__step p{max-width:32ch;}
}
.flow__num{
  width:54px;height:54px;flex:none;display:grid;place-items:center;
  border:1px solid var(--flow-line);background:var(--flow-numbg);
  font-family:var(--f-mono);font-size:.86rem;letter-spacing:.05em;color:var(--guards);
  position:absolute;left:0;top:0;
  transition:border-color .3s ease,background .3s ease,color .3s ease;
}
@media (min-width:880px){.flow__num{position:relative;margin-bottom:24px;}}
.flow__step h3{color:var(--flow-ink);}
.flow__step p{color:var(--flow-body);font-size:.94rem;}
/* --- the connector is drawn, step to step, on a curve -------------------- */
.flow__line{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:0;
}
.flow__track{fill:none;stroke:var(--flow-line);stroke-width:1;}
.flow__draw{
  fill:none;stroke:var(--guards);stroke-width:1.6;stroke-linecap:round;
  transition:stroke-dashoffset 560ms cubic-bezier(.37,0,.24,1);
}
.flow__step{opacity:0;transform:translateY(12px);}
.flow__step.is-on{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.72,.25,1);
}
.flow__num{z-index:2;}

@media (prefers-reduced-motion:reduce){
  .flow__step{opacity:1;transform:none;}
  .flow__draw{transition:none;}
}

/* ==========================================================================
   Coverage
   ========================================================================== */

.zones{display:grid;gap:0;border-top:var(--rule);border-left:var(--rule);}
@media (min-width:700px){.zones{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1020px){.zones{grid-template-columns:repeat(4,minmax(0,1fr));}}
.zone{border-right:var(--rule);border-bottom:var(--rule);padding:clamp(26px,2.7vw,34px);}
.zone h4{
  font-family:var(--f-display);font-weight:900;font-stretch:114%;
  font-size:clamp(1.3rem,2.1vw,1.72rem);line-height:1.04;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--chalk);
  margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--line);
  display:block;
}
/* the count sits above the name — "Hillsborough" is long enough that putting
   them on one line pushed it into the cell border */
.zone h4 span{
  display:block;margin-bottom:9px;
  font-family:var(--f-mono);font-size:.6rem;font-weight:400;font-stretch:normal;
  letter-spacing:.18em;color:var(--guards);
}
.zone ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;}
.zone li{color:var(--nardo);font-size:.92rem;}
.zone li::before{content:"";display:inline-block;width:4px;height:4px;background:var(--guards);vertical-align:.24em;margin-right:.7em;}

/* ==========================================================================
   Reviews — a scroll-snap carousel. Native scrolling does the work, so it
   drags, flicks and keyboard-scrolls for free; the buttons and dots are a
   layer on top of it rather than a reimplementation.
   ========================================================================== */

.carousel{position:relative;}
.carousel__track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc(100% - 44px);
  gap:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* the loop is seamless, so there is no first or last card to butt against */
  border-top:var(--rule);border-left:var(--rule);
  scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{display:none;}
@media (prefers-reduced-motion:reduce){.carousel__track{scroll-behavior:auto;}}
@media (min-width:700px){.carousel__track{grid-auto-columns:50%;}}
@media (min-width:1040px){.carousel__track{grid-auto-columns:33.3333%;}}

.review{
  margin:0;scroll-snap-align:start;min-width:0;
  border-right:var(--rule);border-bottom:var(--rule);
  padding:clamp(28px,3vw,38px);
  display:flex;flex-direction:column;gap:18px;
  position:relative;min-height:100%;
  transition:background .3s ease;
}

/* the quote mark is the card's texture, not an ornament stuck on the front */
.review__mark{
  position:absolute;top:6px;right:16px;
  font-family:var(--f-brand),Georgia,serif;font-size:6rem;line-height:.72;
  color:var(--guards);opacity:.14;pointer-events:none;user-select:none;
}
.review blockquote{
  margin:0;font-family:var(--f-display);font-weight:600;font-stretch:104%;
  font-size:1.08rem;line-height:1.4;letter-spacing:-.006em;color:var(--chalk);
  position:relative;
}
.review blockquote::before{content:"\201C";}
.review blockquote::after{content:"\201D";}

.review figcaption{
  margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:13px;
}
.review__who{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:rgba(214,24,43,.12);border:1px solid rgba(214,24,43,.4);color:var(--guards-hot);
  font-family:var(--f-display);font-weight:800;font-size:.94rem;
}
.review__id{display:flex;flex-direction:column;gap:4px;min-width:0;}
.review__id b{font-size:.93rem;font-weight:600;}
.review__id > span{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nardo-dim);
}

/* --- photographs ---------------------------------------------------------
   These are phone photographs, and phone photographs are portrait. Rather than
   crop them into a landscape card, the row sets a height and lets each card be
   as wide as its own picture: nothing is cut, and the one landscape frame in
   the set simply takes more of the row.

   Snapping fights a continuous drift, and scroll-behavior:smooth would turn
   every per-frame nudge into its own animation. */
.carousel--shots .carousel__track{
  grid-auto-columns:max-content;scroll-snap-type:none;scroll-behavior:auto;
}

.shot{
  position:relative;margin:0;overflow:hidden;
  border-right:var(--rule);border-bottom:var(--rule);background:var(--graphite);
}
.shot img{
  display:block;height:clamp(275px,44vw,400px);width:auto;max-width:none;
}
/* The name sits on the photograph. In a strip below it, the length of
   "Aston Martin Vantage Roadster" set the width of the card, the picture was
   stretched to match, and the car came out subtly the wrong shape. */
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;padding:30px 15px 13px;
  background:linear-gradient(180deg,rgba(7,9,11,0) 0%,rgba(7,9,11,.85) 74%);
}
.shot__cap b{
  font-family:var(--f-display);font-weight:600;font-size:.9rem;
  letter-spacing:-.004em;color:#fff;
}
@media (hover:hover) and (pointer:fine){
  .shot img{transition:transform .6s cubic-bezier(.25,.8,.3,1);}
  .shot:hover img{transform:scale(1.035);}
}

/* --- the gallery page ----------------------------------------------------
   Its own page rather than a drawer under the reel: thirty-eight photographs
   is a scroll, and making somebody do it on the way to the booking form is a
   toll rather than a portfolio. The tiles load their own 620px file, a quarter
   of the reel's width, and the full-size frame only arrives if one is opened. */
/* Columns rather than a grid of equal cells. A photograph keeps its own shape
   and the column takes whatever height that comes to; one cell size would mean
   cropping, which is what was wrong with this in the first place. */
.gallery{columns:2;column-gap:2px;}
@media (min-width:700px){.gallery{columns:3;}}
@media (min-width:1040px){.gallery{columns:4;}}

.tile{
  position:relative;display:block;width:100%;padding:0;margin:0 0 2px;border:0;
  background:var(--graphite);cursor:pointer;overflow:hidden;
  font:inherit;color:inherit;text-align:left;
  break-inside:avoid;-webkit-column-break-inside:avoid;
}
.tile img{display:block;width:100%;height:auto;}

/* The name sits on the photograph rather than under it. Thirty-eight captions
   in their own strips turned the grid into a table of contents. */
.tile__cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 13px 11px;
  font-family:var(--f-display);font-weight:600;font-size:.83rem;letter-spacing:-.003em;
  color:#fff;
  background:linear-gradient(180deg,rgba(7,9,11,0) 0%,rgba(7,9,11,.82) 72%);
  opacity:0;transition:opacity .25s ease;
}
.tile:focus-visible{outline:2px solid var(--guards);outline-offset:-2px;}
.tile:focus-visible .tile__cap{opacity:1;}
@media (hover:hover) and (pointer:fine){
  .tile img{transition:transform .6s cubic-bezier(.25,.8,.3,1);}
  .tile:hover img{transform:scale(1.05);}
  .tile:hover .tile__cap{opacity:1;}
}
/* No hover on a touch screen, so the name is simply always there. */
@media (hover:none){.tile__cap{opacity:1;}}

/* The gallery and the coating page both use .subhero, so without this they
   open on the same photograph. */
.subhero--tight .subhero__art{background-image:url("../img/bg-gallery.jpg?v=b068f126");background-position:50% 54%;}
.subhero--tight .subhero__in{padding-block:clamp(52px,7vw,88px) clamp(40px,5vw,64px);}

/* --- lightbox ------------------------------------------------------------ */
.lightbox{
  border:0;padding:0;margin:auto;background:transparent;
  width:max-content;max-width:96vw;max-height:94vh;overflow:visible;
  color:var(--chalk);
}
.lightbox::backdrop{background:rgba(5,7,9,.96);}
.lightbox[open]{display:block;position:relative;}
.lightbox__fig{
  margin:0;min-width:0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(4px,1.4vw,18px);
}
.lightbox__fig figcaption{grid-column:1/-1;}
.lightbox__fig img{
  display:block;max-height:82vh;max-width:100%;width:auto;height:auto;
  background:var(--graphite);
}
.lightbox__fig figcaption{
  padding-top:13px;text-align:center;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--nardo);
}
.lightbox__nav,.lightbox__x{
  display:grid;place-items:center;cursor:pointer;
  background:rgba(20,24,27,.72);border:1px solid var(--line);color:var(--chalk);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.lightbox__nav{width:clamp(38px,5vw,52px);height:clamp(60px,9vw,84px);}
.lightbox__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.lightbox__x{
  position:absolute;top:-46px;right:0;width:38px;height:38px;
  font-size:1.5rem;line-height:1;padding-bottom:4px;
}
@media (hover:hover) and (pointer:fine){
  .lightbox__nav:hover,.lightbox__x:hover{border-color:var(--guards);color:var(--guards-hot);background:rgba(214,24,43,.12);}
}
/* On a phone the two arrows either side were taking a fifth of the width off
   the photograph, which is the one thing the screen is there to show. They move
   on top of it instead. */
@media (max-width:760px){
  .lightbox[open]{display:block;position:relative;}
  .lightbox__fig{position:relative;}
  .lightbox__nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    height:64px;width:40px;background:rgba(11,13,15,.72);
  }
  .lightbox__nav--prev{left:0;}
  .lightbox__nav--next{right:0;}
  .lightbox__x{top:-44px;}
}

/* --- controls ------------------------------------------------------------ */
.carousel__ui{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:22px;
}
.carousel__hint{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--nardo-dim);
}
.carousel__nav{display:flex;gap:8px;}
.carousel__btn{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--chalk);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.carousel__btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.carousel__btn:hover:not(:disabled){border-color:var(--guards);color:var(--guards-hot);background:rgba(214,24,43,.07);}


/* ==========================================================================
   FAQ — the height animation is driven in JS (see site.js) so it can ease on
   a real curve; everything here is the resting state it animates between.
   ========================================================================== */

.faq{border-top:var(--rule);}
.faq details{border-bottom:var(--rule);}
.faq summary{
  list-style:none;cursor:default;padding:24px 56px 24px 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-stretch:108%;
  font-size:clamp(1rem,1.5vw,1.14rem);letter-spacing:-.004em;
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{display:none;}

/* a plus that becomes a minus, rather than a chevron that spins */
/* the +/- is the control; give it a thumb-sized target around it */
.faq__sign{
  position:absolute;right:2px;top:50%;width:26px;height:26px;margin-top:-13px;
  border:1px solid var(--line);display:block;cursor:pointer;
  transition:border-color .34s cubic-bezier(.2,.7,.25,1),background .34s cubic-bezier(.2,.7,.25,1);
}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--guards);
  transition:transform .42s cubic-bezier(.3,.85,.25,1),opacity .3s ease;
}
.faq__sign::before{width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;}
.faq__sign::after{width:1.5px;height:11px;margin:-5.5px 0 0 -.75px;}
/* a 44px tap target centred on the 26px box */
.faq__sign i{position:absolute;inset:-10px;display:block;}
.faq details[open] .faq__sign::after{transform:rotate(90deg) scaleX(0);opacity:0;}
.faq details[open] .faq__sign::before{transform:rotate(180deg);}

.faq__body{overflow:hidden;}
.faq__body p{
  padding:0 clamp(0px,6vw,80px) 28px 0;color:var(--nardo);max-width:74ch;margin:0;
}

/* ==========================================================================
   Forms (shared by the booking dialog)
   ========================================================================== */

.form{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));}
.field{display:flex;flex-direction:column;gap:7px;grid-column:span 2;min-width:0;}
@media (min-width:600px){.field--half{grid-column:span 1;}}
.field label,.checks legend{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:var(--nardo-dim);
}
.field label i{font-style:normal;color:var(--guards);margin-left:.5em;}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:.96rem;color:var(--chalk);
  background:var(--slate);border:1px solid var(--line);
  padding:.86em .9em;width:100%;max-width:100%;border-radius:0;
  transition:border-color .16s ease,background .16s ease;
}
.field textarea{min-height:96px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:#5E666B;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#39424A;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--guards);background:var(--slate-2);
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--nardo) 50%),linear-gradient(135deg,var(--nardo) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;
}
/* --- one dialog, three forms ---------------------------------------------
   The mode lives on the form and the sets that do not match it are taken out
   of the layout. display:contents rather than block: the fields have to stay
   direct children of the form's grid or a half-width field stops being half a
   width the moment it sits inside a wrapper. */
.modal__in [data-when]{display:none;}
.modal__in[data-mode="detail"]  [data-when="detail"],
.modal__in[data-mode="ceramic"] [data-when="ceramic"],
.modal__in[data-mode="other"]   [data-when="other"]{display:contents;}

.modal__in [data-label]{display:none;}
.modal__in[data-mode="detail"]  [data-label="detail"],
.modal__in[data-mode="ceramic"] [data-label="ceramic"],
.modal__in[data-mode="other"]   [data-label="other"]{display:inline;}

/* Says why a form asks what it asks, where a legal-weight footnote would be
   read as boilerplate and skipped. */
.form__aside{
  grid-column:span 2;margin:0;
  border-left:2px solid var(--guards);padding:2px 0 2px 15px;
  font-size:.87rem;line-height:1.6;color:var(--nardo);
}

/* Off-screen rather than display:none — a field that is not rendered at all is
   one a bot can see is a trap. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}

.form__note{
  grid-column:span 2;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.05em;
  color:var(--nardo-dim);line-height:1.75;margin:0;
}
.form__note:empty{display:none;}
#formerr{color:var(--guards-hot);}

.checks{grid-column:span 2;border:1px solid var(--line);padding:6px 18px 18px;margin:0;min-width:0;}
.checks legend{padding:0 8px;}
.checks__grid{display:grid;gap:11px 20px;grid-template-columns:minmax(0,1fr);margin-top:8px;}
@media (min-width:620px){.checks__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.check{display:flex;gap:.65em;align-items:flex-start;font-size:.9rem;color:var(--nardo);cursor:pointer;}
.check input{
  appearance:none;-webkit-appearance:none;position:relative;
  width:18px;height:18px;flex:none;margin:.15em 0 0;
  border:1px solid var(--line);background:var(--slate);cursor:pointer;
  /* no transition: these sit inside a .field, which gives text inputs a 160ms
     background fade, and on a checkbox that reads as the tap not registering */
  transition:none;
}
.check input:checked{background:var(--guards);border-color:var(--guards);}
/* centred on the box rather than offset from its top-left corner */
.check input:checked::after{
  content:"";position:absolute;left:50%;top:50%;
  width:9px;height:5px;margin:-4px 0 0 -5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.check:hover{color:var(--chalk);}

/* ==========================================================================
   Booking dialog
   ========================================================================== */

/* The dialog itself is the scroll container. It used to be a flex column with
   a flex:1 child, which iOS Safari resolved to zero height inside an
   auto-height <dialog> — the backdrop dimmed the page and the dialog rendered
   as a one-pixel line. No flex, no min-height:0, nothing that can collapse. */
.modal{
  width:min(940px,calc(100vw - 24px));
  max-height:min(90vh,940px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0;border:1px solid var(--line);background:var(--graphite);color:var(--chalk);
  margin:auto;
}
/* Five fields do not need the width of the booking form; at 940px the labels
   sat marooned either side of a very short column. */
.modal--slim{width:min(620px,calc(100vw - 24px));}

.modal[open]{display:block;}
.modal::backdrop{background:rgba(4,5,6,.8);}
.modal__in{display:block;}
.modal__hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px clamp(18px,3vw,32px);border-bottom:var(--rule);
  position:sticky;top:0;background:var(--graphite);z-index:2;
}
.modal__tag{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--guards);margin-bottom:9px;
}
.modal__hd h2{font-size:clamp(1.25rem,2.4vw,1.8rem);}
.modal__x{
  flex:none;width:38px;height:38px;display:grid;place-items:center;
  background:none;border:1px solid var(--line);color:var(--nardo);font-size:1.4rem;line-height:1;cursor:pointer;
  transition:color .16s ease,border-color .16s ease;
}
.modal__x:hover{color:var(--chalk);border-color:var(--chalk);}
.modal__body{padding:clamp(20px,3vw,28px) clamp(18px,3vw,32px);}

/* A running estimate, sitting where the review would be. It answers "what is
   this going to cost" without asking anyone to walk through a second screen,
   and it is labelled an estimate because that is what the business quotes. */
.quote{
  grid-column:span 2;border:1px solid var(--line);background:#12161A;
  padding:18px clamp(16px,2vw,22px) 20px;margin-top:6px;
}
.quote__hd{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--guards);margin-bottom:12px;
}
.quote__lines{margin:0;display:flex;flex-direction:column;gap:8px;}
.quote__lines > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.quote__lines dt{color:var(--nardo);font-size:.9rem;min-width:0;}
.quote__lines dd{
  margin:0;flex:none;font-family:var(--f-mono);font-size:.82rem;color:var(--chalk);
  font-variant-numeric:tabular-nums;
}
.quote__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
}
.quote__total span{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nardo-dim);
}
.quote__total b{
  font-family:var(--f-display);font-weight:900;font-stretch:116%;
  font-size:1.5rem;line-height:1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;
}
.quote__note{
  margin-top:11px;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.05em;
  line-height:1.7;color:var(--nardo-dim);
}

/* The actions were left without a rule when the dialog was restructured. The
   primary leads and takes the width; cancel stays out of its way. */
.modal__ft{
  grid-column:span 2;
  display:grid;gap:10px;grid-template-columns:minmax(0,1fr);
  margin-top:24px;padding-top:22px;border-top:var(--rule);
}
@media (min-width:520px){.modal__ft{grid-template-columns:minmax(0,1fr) auto;}}
.modal__ft .btn{width:100%;justify-content:center;}

.modal__done{padding:clamp(34px,5vw,60px) clamp(20px,4vw,56px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.modal__doneart{
  width:64px;height:64px;border:1.5px solid var(--guards);margin-bottom:6px;position:relative;
}
.modal__doneart::after{
  content:"";position:absolute;left:19px;top:20px;width:24px;height:12px;
  border-left:2px solid var(--guards);border-bottom:2px solid var(--guards);transform:rotate(-45deg);
}
.modal__done h2{font-size:clamp(1.5rem,3vw,2.1rem);}
.modal__donemsg{color:var(--chalk);max-width:52ch;}
.modal__donesub{color:var(--nardo);font-size:.93rem;max-width:56ch;}
.modal__donesub b{color:var(--chalk);}
.modal__done .btn{margin-top:12px;}

/* ==========================================================================
   Closing CTA — a photograph behind it, drifting as the band crosses the viewport.
   This one does need vertical overscan (the layer has to travel), which costs
   only vertical crop on a photo this wide.
   ========================================================================== */

.close{
  position:relative;overflow:hidden;border-top:var(--rule);
  text-align:center;background:var(--obsidian);isolation:isolate;
}
.close__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.close__bg > *{position:absolute;inset:-22% 0;}
.close__art{
  background:var(--obsidian) url("../img/bg-cta.jpg?v=ca1a7683") 50% 52%/cover no-repeat;
  will-change:transform;
}
.close__grain{
  inset:0;background-image:radial-gradient(rgba(255,255,255,.05) .5px,transparent .5px);
  background-size:3px 3px;opacity:.3;
}
.close__veil{
  inset:0;
  background:
    radial-gradient(58% 72% at 50% 50%,rgba(7,9,11,.90) 0%,rgba(7,9,11,.72) 52%,rgba(7,9,11,.42) 100%),
    linear-gradient(180deg,rgba(7,9,11,.72) 0%,rgba(7,9,11,.34) 30%,rgba(7,9,11,.36) 66%,rgba(7,9,11,.80) 100%);
}
.close .wrap{position:relative;z-index:2;padding-block:clamp(78px,10vw,132px);}
.close h2{font-size:clamp(2.1rem,5.4vw,3.6rem);}
.close p{margin:22px auto 0;max-width:52ch;color:#B4BBBF;text-shadow:0 1px 22px rgba(5,7,9,.85);}
.close .eyebrow{text-shadow:0 1px 18px rgba(5,7,9,.8);}
.close .hero__acts{justify-content:center;}
/* On a phone this stays a photo background rather than a banner above the
   copy. A 2.67:1 frame in a portrait band only ever shows a slice of itself,
   so the crop sits on the wet front wing and the scrim carries most of the
   weight: it reads as texture behind the words, which is its job here. */
@media (max-width:820px){
  .close__bg > *{inset:-8% 0;}
  .close__art{transform:none !important;background-position:62% 48%;}
  .close__veil{
    background:
      radial-gradient(78% 56% at 50% 46%,rgba(7,9,11,.86) 0%,rgba(7,9,11,.70) 60%,rgba(7,9,11,.62) 100%),
      linear-gradient(180deg,rgba(7,9,11,.80) 0%,rgba(7,9,11,.52) 34%,rgba(7,9,11,.56) 62%,rgba(7,9,11,.88) 100%);
  }
  .close .wrap{padding-block:clamp(64px,15vw,92px);}
  .close p,.close .eyebrow{text-shadow:0 1px 18px rgba(5,7,9,.9);}
}

@media (prefers-reduced-motion:reduce){.close__art{transform:none !important;}}

/* --- the ceramic band: same treatment as the closing call to action, on a
   different photograph and a little shorter, so the two read as a pair
   rather than a repeat ---------------------------------------------------- */
.close--band .wrap{padding-block:clamp(60px,7.5vw,96px);}
.close--band h2{font-size:clamp(1.9rem,4.6vw,3rem);}
.close__art--ceramic{
  background:var(--obsidian) url("../img/bg-band.jpg?v=241228f6") 50% 50%/cover no-repeat;
}
@media (max-width:820px){.close__art--ceramic{background-position:46% 45%;}}

/* --- comparison table ----------------------------------------------------- */
.compare{overflow-x:auto;border:1px solid var(--alpine-line);}
.compare table{border-collapse:collapse;width:100%;min-width:620px;}
.compare th,.compare td{
  text-align:left;padding:14px clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--alpine-line);font-size:.93rem;color:var(--ink-2);
}
.compare thead th{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:#EAEBE8;border-bottom:1px solid var(--alpine-line);
}
.compare tbody th{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;white-space:nowrap;
}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0;}
/* the column the page is actually about */
.compare .is-lead{background:#FBFBFA;color:var(--ink);font-weight:600;}
.compare thead .is-lead{background:var(--obsidian);color:#fff;}

.notice__acts{display:flex;flex-wrap:wrap;gap:10px;padding-top:16px;}

/* --------------------------------------------------------- coating price --
   One price and three lengths, rather than three packages. The figure sits on
   the dark panel so it reads as the headline it is, and the lengths sit beside
   it as a choice you make after you have accepted the price. */
.coating{display:grid;gap:0;border-top:var(--rule-light);border-left:var(--rule-light);}
@media (min-width:900px){.coating{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}}
.coating__price,.coating__opts{
  border-right:var(--rule-light);border-bottom:var(--rule-light);
  padding:clamp(26px,2.8vw,38px);
}
.coating__price{
  background:var(--obsidian);color:var(--chalk);border-color:var(--obsidian);
  display:flex;flex-direction:column;gap:15px;
}
.coating__cta{margin-top:auto;padding-top:10px;display:grid;gap:10px;}
@media (min-width:520px){.coating__cta{grid-template-columns:1fr 1fr;}}

.coating__opts{background:#FBFBFA;margin:0;list-style:none;}
.coating__opts li{padding:17px 0;border-bottom:var(--rule-light);}
.coating__opts li:first-child{padding-top:0;}
.coating__opts li:last-child{padding-bottom:0;border-bottom:0;}
.coating__len{
  font-family:var(--f-display);font-weight:700;font-size:1.06rem;color:var(--ink);
  display:flex;align-items:center;gap:10px;margin-bottom:6px;
}
.coating__len span{
  font-family:var(--f-mono);font-size:.57rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:var(--guards);border:1px solid var(--guards);padding:3px 7px;
}
.coating__note{color:var(--ink-2);font-size:.94rem;line-height:1.58;}

/* ==========================================================================
   Monthly maintenance
   ========================================================================== */

.plan{display:grid;gap:0;border-top:var(--rule-light);border-left:var(--rule-light);}
@media (min-width:900px){.plan{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}}
.plan__main,.plan__perks{
  border-right:var(--rule-light);border-bottom:var(--rule-light);
  padding:clamp(26px,2.8vw,38px);
  display:flex;flex-direction:column;gap:16px;
}
.plan__main{background:var(--obsidian);color:var(--chalk);border-color:var(--obsidian);}
.plan__main .tick{color:var(--nardo);}
.plan__perks{background:#FBFBFA;}

.plan__kicker{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--guards);
}
.plan__price{display:flex;align-items:baseline;gap:.5em;}
.plan__price b{
  font-family:var(--f-display);font-weight:900;font-stretch:118%;
  font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;letter-spacing:-.025em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.plan__price span{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nardo-dim);
}
.plan__was{color:var(--nardo);font-size:.95rem;}
.plan__was s{color:var(--nardo-dim);}
.plan__main .tier__foot{margin-top:auto;padding-top:8px;}

.plan__perksnote{color:var(--ink-2);font-size:.93rem;}
.plan__list{margin:0;display:flex;flex-direction:column;gap:0;border-top:var(--rule-light);}
.plan__list > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:var(--rule-light);
}
.plan__list dt{color:var(--ink);font-size:.94rem;}
.plan__list dd{
  margin:0;flex:none;font-family:var(--f-mono);font-size:.8rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.plan__extra{
  margin-top:auto;padding-top:6px;color:var(--ink-2);font-size:.94rem;
}
.plan__extra b{color:var(--ink);}

/* ==========================================================================
   Footer
   ========================================================================== */

.ftr{border-top:var(--rule);background:var(--obsidian);}
.ftr__top{
  display:grid;gap:36px;padding-block:clamp(48px,6vw,72px) 42px;
}
@media (min-width:820px){.ftr__top{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px;}}
.ftr__blurb{color:var(--nardo);font-size:.94rem;max-width:38ch;margin-top:18px;}
.ftr h5{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nardo-dim);margin:0 0 16px;font-weight:500;
}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.ftr ul li{color:var(--nardo);font-size:.92rem;}
.ftr ul a{color:var(--nardo);text-decoration:none;font-size:.92rem;}
.ftr ul a:hover{color:var(--chalk);}
.ftr__bar{
  border-top:var(--rule);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--nardo-dim);
}
.ftr__bar a{text-decoration:none;}
.ftr__bar a:hover{color:var(--chalk);}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.rv{opacity:0;transform:translateY(14px);transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1);}
.rv.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ==========================================================================
   Additions — hero coverage, split pricing, callout, review gallery,
   service-area band
   ========================================================================== */

/* --- hero: the three counties, stated up front --------------------------- */
.hero__areas{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:28px;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
}
.hero__areas span{color:var(--nardo-dim);margin-right:2px;}
.hero__areas b{
  color:var(--chalk);font-weight:500;border:1px solid var(--line);padding:.46em .78em;
}

/* --- sedan / SUV split price -------------------------------------------- */
/* --- price by vehicle size ------------------------------------------------ */
.pricelist{margin:0;border:1px solid var(--alpine-line);}
.tier--feature .pricelist{border-color:#D8CFCF;}
.pricelist > div{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 15px 12px;min-width:0;
}
.pricelist > div + div{border-top:1px solid var(--alpine-line);}
.tier--feature .pricelist > div + div{border-top-color:#D8CFCF;}
.pricelist dt{
  font-family:var(--f-mono);font-size:.585rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.45;min-width:0;
}
.tier--feature .pricelist dt{color:var(--ink-2);}
.pricelist dd{
  margin:0;flex:none;
  font-family:var(--f-display);font-weight:900;font-stretch:116%;
  font-size:1.42rem;line-height:1;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.tier--feature .pricelist dd{color:var(--guards-deep);}

/* --- callout ------------------------------------------------------------- */
.notice{
  margin-top:40px;border:1px solid var(--alpine-line);background:var(--alpine-2);
  padding:24px clamp(20px,2.4vw,30px);
}
.notice__hd{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--guards);margin-bottom:11px;
}
.notice p{color:var(--ink-2);max-width:80ch;font-size:.95rem;}
.notice em{font-style:normal;color:var(--ink);font-weight:600;}

/* --- three-county coverage grid ------------------------------------------ */
@media (min-width:700px){.zones--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1020px){.zones--3{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* --- service-area band, sitting directly above the footer ---------------- */
.areaband{border-top:var(--rule);background:var(--graphite);}
.areaband__in{
  padding-block:clamp(38px,4.5vw,58px);
  display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;
}
.areaband__lbl,.areaband__sub{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--nardo-dim);
}
.areaband__names{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.2em .55em;
  font-family:var(--f-display);font-weight:900;font-stretch:113%;text-transform:uppercase;
  font-size:clamp(1.35rem,3.4vw,2.35rem);line-height:1.05;letter-spacing:-.012em;color:var(--chalk);
}
.areaband__names i{color:var(--guards);font-style:normal;}

/* --- buttons that live inline in text ------------------------------------ */
.linkbtn{
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  letter-spacing:inherit;text-transform:inherit;
}
.linkbtn:hover{color:var(--chalk);}
.callbar button{
  padding:15px 8px;text-align:center;border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  background:var(--guards);color:#fff;
}

/* ==========================================================================
   Hover states, real pointers only
   A tap on a touch screen fires :hover and leaves it stuck, so a card
   or a heading sits there highlighted long after you've moved on and
   reads as a rendering fault. Buttons keep their hover everywhere;
   these are the ones that linger.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--chalk);}
  .nav a:hover::after{right:0;}
  .mnav a:hover{color:var(--guards-hot);padding-left:6px;}
  .brand:hover{opacity:.82;}
  .faq summary:hover{color:var(--guards-hot);}
  .faq summary:hover .faq__sign{border-color:var(--guards);background:rgba(214,24,43,.07);}
  .std__row:hover{background:#12161A;}
  .std__row:hover::before{transform:scaleX(1);}
  .std__row:hover .std__ico{color:var(--guards-hot);border-color:var(--guards);background:rgba(214,24,43,.07);}
  .std__row:hover .std__code{color:var(--guards);}
  .addon:hover{background:#12161A;}
  .addon:hover::before{transform:scaleX(1);}
  .addon:hover .addon__price{color:#fff;}
  .addon--ask:hover{background:#151A1F;}
  .carousel__track:hover .review:hover{background:#12161A;}
  .flow__step:hover .flow__num{border-color:var(--guards);background:var(--guards);color:#fff;}
}