/* ==========================================================================
   Infinity Customs — TheWayUp build
   Palette: ink/navy + royal blue (from the script logo) + chrome white
   Fonts: Barlow Condensed (display) / Cinzel (micro-labels, the CUSTOMS role) /
          Lobster (brand accent) / Inter (body) — self-hosted woff2
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-400-normal.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-latin-700-normal.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}


/* Metric-matched fallbacks — the swap from system font to the webfonts must not
   reflow the page (this was worth 0.27 of CLS on mobile before it was added).
   Every number below was measured in-browser, not guessed. */
@font-face{font-family:'Barlow Fallback';src:local('Arial Narrow'),local('Helvetica Neue Condensed'),local('Liberation Sans Narrow'),local('DejaVu Sans Condensed'),local('Arial');
  size-adjust:76.1%;ascent-override:131.5%;descent-override:26.3%;line-gap-override:0%}
@font-face{font-family:'Cinzel Fallback';src:local('Georgia'),local('Times New Roman'),local('Liberation Serif'),local('DejaVu Serif');
  size-adjust:112.8%;ascent-override:86.6%;descent-override:33.0%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:106.1%;ascent-override:91.4%;descent-override:22.6%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --ink:#04101E;
  --navy:#0A1B33;
  --navy-2:#0F2547;
  --navy-3:#173663;
  --royal:#2F58AB;
  --royal-2:#4A7BE0;
  --royal-soft:#7EA6F6;

  --chrome:#F5F7FB;
  --chrome-2:#E9EEF7;
  --line:#D7E0EE;
  --line-dark:rgba(255,255,255,.13);

  --text:#141E36;
  --text-mute:#57678A;
  --inv:#FFFFFF;
  --inv-mute:#AEBFDA;

  --err:#C0392B;
  --err-dark:#FF9083;
  --ok:#1F7A57;
  --ok-dark:#5FD8A8;

  --f-display:'Barlow Condensed','Barlow Fallback','Arial Narrow',Impact,sans-serif;
  --f-label:'Cinzel','Cinzel Fallback',Georgia,'Times New Roman',serif;
  --f-ui:'Inter','Inter Fallback',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Inter','Inter Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r-s:8px; --r-m:14px; --r-l:22px; --r-pill:100px;
  --shadow-s:0 2px 8px rgba(9,24,48,.07);
  --shadow-m:0 12px 34px rgba(9,24,48,.12);
  --shadow-l:0 26px 70px rgba(4,16,30,.30);
  --ease:cubic-bezier(.4,0,.2,1);
  --pad:clamp(18px,5vw,28px);
  --maxw:1180px;
  --header-h:74px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--chrome);color:var(--text);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
picture{display:contents}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.08;letter-spacing:-.022em;margin:0 0 .5em;overflow:visible}
h1{font-size:clamp(2.2rem,7.4vw,4.05rem)}
h2{font-size:clamp(1.85rem,5vw,2.9rem)}
h3{font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1.05em}
ul{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.4em}
:focus-visible{outline:3px solid var(--royal-2);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1380px}
.sec{padding:clamp(56px,9vw,110px) 0;position:relative}
.sec-tight{padding:clamp(40px,6vw,72px) 0}
.dark{background:var(--navy);color:var(--inv)}
.dark h1,.dark h2,.dark h3{color:var(--inv)}
.ink{background:var(--ink);color:var(--inv)}
.ink h2,.ink h3{color:var(--inv)}
.light-2{background:var(--chrome-2)}
.dark p,.ink p{color:var(--inv-mute)}
.lede{font-size:clamp(1.03rem,2vw,1.22rem);color:var(--text-mute);max-width:62ch}
.dark .lede,.ink .lede{color:var(--inv-mute)}
.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}

/* chrome hairline divider */
.hairline{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.dark .hairline,.ink .hairline{background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}

/* eyebrow (not the banned location/hours format) */
.eyebrow{
  font-family:var(--f-display);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--royal);margin:0 0 .9rem;display:block
}
.dark .eyebrow,.ink .eyebrow{color:var(--royal-soft)}

/* chrome gloss text */
.gloss{
  background:linear-gradient(96deg,#fff 8%,#cddcf5 34%,#ffffff 52%,#9fb8e0 72%,#fff 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:50px;padding:0 1.5em;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:700;font-size:.97rem;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--royal);color:#fff;box-shadow:0 8px 22px rgba(47,88,171,.34)}
.btn-primary:hover{background:var(--royal-2);box-shadow:0 14px 30px rgba(47,88,171,.42)}
.btn-ghost{border-color:var(--line);color:var(--text);background:#fff}
.btn-ghost:hover{border-color:var(--royal);color:var(--royal)}
.dark .btn-ghost,.ink .btn-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.dark .btn-ghost:hover,.ink .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn-lg{min-height:58px;padding:0 1.9em;font-size:1.05rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* text link with animated underline */
.tlink{
  font-family:var(--f-display);font-weight:700;text-decoration:none;color:var(--royal);
  display:inline-flex;align-items:center;gap:.4em;position:relative;padding-bottom:2px;min-height:28px
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.tlink:hover::after{transform:scaleX(1)}
.tlink svg{transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}
.dark .tlink,.ink .tlink{color:var(--royal-soft)}

/* ==========================================================================
   HEADER — §6a Layer 1, variant H3: nav left / script logo centred / CTA right
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:80;
  background:rgba(10,27,51,0);backdrop-filter:none;
  transition:background-color .3s var(--ease),backdrop-filter .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.solid,.hdr.on-light{
  background:rgba(8,22,42,.92);backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:rgba(255,255,255,.1);box-shadow:0 6px 26px rgba(4,16,30,.28)
}
.hdr-in{
  /* auto 1fr auto. Two alternatives were measured and both were worse:
     1fr auto 1fr squeezed the nav until "Paint Correction" wrapped to two lines,
     and an absolutely centred logo landed dead centre but had the nav running
     straight over it above 1024px. The logo sits ~31px right of true centre at
     1440px as a result. Closing that last gap means splitting the nav either
     side of the logo — a different header, not a CSS tweak. */
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;
  min-height:var(--header-h);
}
.hdr-logo{justify-self:center;display:block;line-height:0}
.hdr-logo img{width:132px;height:auto;aspect-ratio:720/387}
@media (min-width:1024px){.hdr-logo img{width:158px}}
.hdr-nav{display:none}

/* Logo on the left (homepage). The middle column carries the desktop nav or,
   below 1024px, the menu button — only one of the two is ever visible, so they
   never collide and the grid stays three columns at every width. */
.hdr-in.logo-left .hdr-logo{justify-self:start}
.hdr-in.logo-left .hdr-nav{justify-self:start;margin-left:1.4rem}
.hdr-in.logo-left .menu-btn{justify-self:end}
.hdr-right{display:flex;align-items:center;gap:.6rem;justify-self:end}
.hdr-phone{display:none}
.hdr .btn{min-height:42px;padding:0 1.1em;font-size:.87rem}

.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-width:46px;min-height:44px;padding:0 .6em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:.98rem;letter-spacing:.05em;cursor:pointer;
  transition:background-color .2s var(--ease)
}
.menu-btn:hover{background:rgba(255,255,255,.16)}
.menu-btn > span:not(.burger){display:none}
@media (min-width:480px){.menu-btn > span:not(.burger){display:inline}}
.burger{width:17px;height:12px;position:relative;display:inline-block}
.burger i{position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:5px}.burger i:nth-child(3){top:10px}
body.nav-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.nav-open .burger i:nth-child(2){opacity:0}
body.nav-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (min-width:1024px){
  .hdr-nav{display:flex;align-items:center;gap:1.6rem;justify-self:start}
  .hdr-nav a{
    font-family:var(--f-display);font-weight:600;font-size:.9rem;color:rgba(255,255,255,.86);
    text-decoration:none;position:relative;padding:.5rem 0;transition:color .2s var(--ease)
  }
  .hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--royal-2);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .hdr-nav a:hover,.hdr-nav a[aria-current="page"]{color:#fff}
  .hdr-nav a:hover::after,.hdr-nav a[aria-current="page"]::after{transform:scaleX(1)}
  .menu-btn{display:none}
  .hdr-phone{
    display:inline-flex;align-items:center;gap:.45em;color:#fff;text-decoration:none;
    font-family:var(--f-display);font-weight:700;font-size:.9rem;padding:.4rem .2rem;min-height:44px
  }
  .hdr-phone:hover{color:var(--royal-soft)}
}

/* The laptop squeeze. With the logo on the left, the nav, the phone number and
   the button all have to share what's left, and between 1024px and 1200px there
   isn't room — the nav wrapped onto a second line and doubled the header height.
   Tighten the nav and drop the phone number through that band only; it comes
   back at 1200px, and the Book Now button carries the call to action either way. */
@media (min-width:1024px) and (max-width:1199.98px){
  .hdr-nav{gap:1.05rem}
  .hdr-nav a{font-size:.82rem;letter-spacing:.12em}
  .hdr-phone{display:none}
}

/* Consumer Guarantees Act note under the coating comparison. Deliberately quiet
   — a bordered card, not a warning banner. It is context for the durability
   figures directly above it, so it sits with them rather than in a footer where
   nobody reads it. */
.cga{
  margin-top:1.8rem;padding:1.3rem 1.5rem;border:1px solid var(--line,#D7E0EE);
  border-left:3px solid var(--royal-2);border-radius:var(--r-lg,16px);
  background:rgba(255,255,255,.04);max-width:72ch
}
.cga h3{font-size:1rem;margin:0 0 .7rem}
.cga p{font-size:.88rem;line-height:1.65;margin:0 0 .7rem}
.cga p:last-child{margin-bottom:0}

/* /manage — the change-and-cancel page. Reuses the booking page's card, review
   table, option and slot styles; these are only the bits that page doesn't have:
   the two-column split and padding inside a .bk-card used as a panel. */
.mg-pad{padding:clamp(20px,3vw,28px)}
.mg-grid{display:grid;gap:1.4rem;align-items:start}
@media (min-width:900px){.mg-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:2rem}}
.mg-grid aside{position:sticky;top:calc(var(--header-h) + 1rem)}
@media (max-width:899px){.mg-grid aside{position:static}}
.mg-note{
  margin-top:1rem;padding:.85rem 1rem;border-radius:var(--r-m,12px);
  border:1px solid #E7C98F;background:#FFFBF2;color:var(--text);font-size:.88rem;line-height:1.55
}
.mg-note.ok{border-color:#BFE3D0;background:#F3FBF7}

/* overlay nav */
.navov{
  position:fixed;inset:0;z-index:90;background:var(--ink);
  display:flex;flex-direction:column;padding:calc(var(--header-h) + 12px) var(--pad) 32px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s
}
body.nav-open .navov{opacity:1;visibility:visible;transform:none}
body.nav-open{overflow:hidden}
.navov-close{position:absolute;top:16px;right:var(--pad);min-width:46px;min-height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.3rem;cursor:pointer;line-height:1}
.navov a.navov-link{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.55rem,7vw,2.3rem);color:#fff;text-decoration:none;
  padding:.42em 0;border-bottom:1px solid rgba(255,255,255,.09);letter-spacing:-.02em
}
.navov a.navov-link:hover{color:var(--royal-soft)}
.navov-foot{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:.7rem}
.navov-foot a{color:var(--inv-mute);text-decoration:none;font-size:.95rem}
.navov-foot a strong{color:#fff}

/* ==========================================================================
   HERO — §6a Layer 2, variant HE6: embedded functional element (coating picker)
   ========================================================================== */
.hero{position:relative;margin-top:calc(var(--header-h) * -1);background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,16,30,.55) 0%,rgba(4,16,30,.16) 30%,rgba(4,16,30,.66) 72%,rgba(4,16,30,.94) 100%),
    linear-gradient(90deg,rgba(4,16,30,.62) 0%,rgba(4,16,30,.18) 55%,rgba(4,16,30,0) 100%);
}
/* chrome sweep */
.hero::before{
  content:"";position:absolute;z-index:-1;inset:-20% -10% auto -10%;height:70%;
  background:radial-gradient(60% 60% at 30% 0%,rgba(74,123,224,.30),transparent 70%);
  pointer-events:none
}
.hero-in{
  padding-block:calc(var(--header-h) + clamp(40px,7vw,72px)) clamp(34px,5vw,64px);
  min-height:clamp(560px,84svh,860px);display:flex;align-items:flex-end;
}
@supports not (height:1svh){.hero-in{min-height:clamp(560px,84vh,860px)}}
.hero-copy{max-width:44rem}
.hero h1{margin-bottom:.42em;font-size:clamp(2.05rem,5.6vw,3.5rem);max-width:16ch}
.hero h1 .l2{display:block;color:var(--royal-soft)}
.hero-sub{font-size:clamp(1.03rem,2.1vw,1.2rem);color:#DCE6F7;max-width:44ch;margin-bottom:1.6rem;text-shadow:0 2px 12px rgba(4,16,30,.7)}
.hero-marks{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:1.7rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14)}
.hero-marks span{display:inline-flex;align-items:center;gap:.45em;font-size:.87rem;color:#BACBE6;font-weight:500}
.hero-marks svg{flex:none;color:var(--royal-soft)}

/* ---------- trust strip ---------- */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust-in{display:grid;gap:1px;background:var(--line);grid-template-columns:1fr}
@media (min-width:640px){.trust-in{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.trust-in{grid-template-columns:repeat(4,1fr)}}
.trust-i{background:#fff;padding:1.25rem 1.15rem;display:flex;gap:.8rem;align-items:flex-start}
.trust-i svg{flex:none;color:var(--royal);margin-top:2px}
.trust-i b{display:block;font-family:var(--f-display);font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.trust-i span{display:block;font-size:.83rem;color:var(--text-mute);line-height:1.45}
.stars{color:#E8A317;letter-spacing:1px;font-size:.9rem}

/* ==========================================================================
   §6 pattern C — long-form narrative chapters (coatings)
   ========================================================================== */
.chapter{display:grid;gap:clamp(24px,4vw,52px);align-items:center}
@media (min-width:900px){
  .chapter{grid-template-columns:1fr 1fr}
  .chapter.flip .chapter-media{order:-1}
}
.chapter + .chapter{margin-top:clamp(48px,8vw,96px)}
.chapter-media{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-m)}
.chapter-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
.chapter-media:hover img{transform:scale(1.03)}
.chapter-num{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--f-display);font-weight:800;font-size:.8rem;letter-spacing:.1em;
  background:rgba(4,16,30,.72);color:#fff;border:1px solid rgba(255,255,255,.2);
  padding:.42em .85em;border-radius:var(--r-pill);backdrop-filter:blur(4px)
}
.chapter-body h3,.chapter-body h2{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:800}

/* price line */
.price-line{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.price-line b{font-family:var(--f-display);font-weight:800;font-size:clamp(1.7rem,4.4vw,2.3rem);letter-spacing:-.03em}
.price-line .from{font-family:var(--f-display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.dark .price-line .from,.ink .price-line .from{color:var(--inv-mute)}
.price-line .after{font-size:.85rem;color:var(--text-mute)}
.dark .price-line .after,.ink .price-line .after{color:var(--inv-mute)}

.ticks{list-style:none;padding:0;margin:0 0 1.3rem}
.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.55rem;font-size:.97rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;
  border-left:2.5px solid var(--royal);border-bottom:2.5px solid var(--royal);transform:rotate(-45deg)
}
.dark .ticks li::before,.ink .ticks li::before{border-color:var(--royal-soft)}

/* ==========================================================================
   §6 pattern E — split screen (paint correction)
   ========================================================================== */
.split{display:grid;gap:0;align-items:stretch;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-m);background:#fff}
@media (min-width:880px){.split{grid-template-columns:1fr 1fr}}
.split-media{position:relative;min-height:290px;background:var(--navy)}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-body{padding:clamp(26px,4.5vw,52px)}
.split.inverse .split-body{background:var(--navy);color:#fff}
.split.inverse .split-body h3{color:#fff}
.split.inverse .split-body p{color:var(--inv-mute)}

/* ==========================================================================
   §6 pattern B — bento (detailing services)
   ========================================================================== */
.bento{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.bento{grid-template-columns:repeat(6,1fr)}}
.bcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(18px,2.6vw,26px);display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)
}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:#BCCDE8}
.bcard h3{margin-bottom:.35rem}
.bcard p{font-size:.93rem;color:var(--text-mute);margin-bottom:1rem}
.bcard .bprice{margin-top:auto;font-family:var(--f-display);font-weight:800;font-size:1.32rem;letter-spacing:-.02em}
.bcard .bprice small{font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute);display:block;margin-bottom:.1rem}
@media (min-width:1000px){
  .b-6{grid-column:span 6}.b-4{grid-column:span 4}.b-3{grid-column:span 3}.b-2{grid-column:span 2}
}
.bcard-feat{background:linear-gradient(160deg,var(--navy-3),var(--navy));border-color:transparent;color:#fff;min-height:250px;justify-content:flex-end}
.bcard-feat h3,.bcard-feat .bprice{color:#fff}
.bcard-feat p{color:var(--inv-mute)}
.bcard-feat .bprice small{color:#93A9CC}
.bcard-media{position:absolute;inset:0;z-index:0;opacity:.42;border-radius:inherit;overflow:hidden}
.bcard-media img{width:100%;height:100%;object-fit:cover}
.bcard-media img{width:100%;height:100%;object-fit:cover}
.bcard-feat > *:not(.bcard-media){position:relative;z-index:1}
.bcard-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,20,38,.94),rgba(6,20,38,.3));z-index:0}

/* ==========================================================================
   §6 pattern F — horizontal scroll rails (gallery)
   ========================================================================== */
.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.rail-head h2{margin:0;font-size:clamp(1.3rem,3vw,1.7rem)}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,74vw);gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:2px 2px 16px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  /* snap targets align to the scrollport edge, which sits inside the padding —
     without this the rail scrolls itself by exactly --pad on load and the first
     photo ends up flush against the side of the screen */
  scroll-padding-inline:var(--pad);
  scrollbar-width:thin
}
@media (min-width:700px){.rail{grid-auto-columns:minmax(300px,38vw)}}
@media (min-width:1100px){.rail{grid-auto-columns:minmax(340px,30vw)}}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.dark .rail::-webkit-scrollbar-thumb,.ink .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.rail figure{margin:0;scroll-snap-align:start;border-radius:var(--r-m);overflow:hidden;position:relative;background:var(--navy-2)}
.rail figure img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.rail figure:hover img{transform:scale(1.04)}
.rail figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.9rem .95rem .8rem;font-size:.85rem;color:#fff;
  background:linear-gradient(0deg,rgba(4,16,30,.9),transparent);font-weight:500
}

/* ---------- process steps ---------- */
.steps{display:grid;gap:16px;counter-reset:s}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step-c{
  border:1px solid var(--line-dark);border-radius:var(--r-l);padding:clamp(20px,3vw,28px);
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));position:relative
}
.step-c b{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--royal);color:#fff;font-family:var(--f-display);font-weight:800;font-size:.92rem;margin-bottom:.9rem
}
.step-c h3{font-size:1.12rem;margin-bottom:.4rem}
.step-c p{margin:0;font-size:.93rem}

/* ---------- reviews ---------- */
.revs{display:grid;gap:16px}
@media (min-width:760px){.revs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,3vw,26px);display:flex;flex-direction:column}
.rev .stars{margin-bottom:.6rem}
.rev blockquote{margin:0 0 1rem;font-size:.96rem;line-height:1.62}
.rev cite{margin-top:auto;font-style:normal;font-size:.86rem;color:var(--text-mute)}
.rev cite b{display:block;color:var(--text);font-family:var(--f-display);font-weight:700;font-size:.94rem}

/* ---------- info / contact ---------- */
.info-grid{display:grid;gap:clamp(20px,3.5vw,40px)}
@media (min-width:900px){.info-grid{grid-template-columns:1fr 1fr}}
.dl{display:grid;gap:1.1rem;margin:0}
.dl > div{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:start}
.dl > div > svg{grid-row:1 / span 2}
.dl svg{flex:none;color:var(--royal);margin-top:3px}
.dl dt{font-family:var(--f-display);font-weight:700;font-size:.83rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);margin-bottom:.15rem}
.dark .dl dt,.ink .dl dt{color:var(--inv-mute)}
.dl dd{margin:0;font-size:1rem}
.dl dd a{text-decoration:none;font-weight:600;color:var(--royal)}
.dl dd a:hover{text-decoration:underline}
.dark .dl svg,.ink .dl svg{color:var(--royal-soft)}
.dark .dl dd a,.ink .dl dd a{color:var(--royal-soft)}
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours th,.hours td{text-align:left;padding:.5rem 0;border-bottom:1px solid var(--line)}
.hours th{font-weight:500;color:var(--text-mute)}
.hours td{text-align:right;font-weight:600}
.hours tr.closed td{color:#4A5875;font-weight:500}
.dark .hours th,.ink .hours th,.dark .hours td,.ink .hours td{color:var(--inv-mute)}
.dark .hours tr.closed td,.ink .hours tr.closed td{color:#8FA3C4}
.dark .hours th,.dark .hours td,.ink .hours th,.ink .hours td{border-bottom-color:var(--line-dark)}
.map{border:0;width:100%;height:340px;border-radius:var(--r-l);display:block;filter:saturate(.9)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 0;padding:0;list-style:none}
.chips li{margin:0}
.chips a,.chips span{
  display:inline-block;padding:.42em .95em;border-radius:var(--r-pill);
  background:var(--chrome-2);border:1px solid var(--line);font-size:.86rem;font-weight:600;
  text-decoration:none;color:var(--text);transition:all .2s var(--ease)
}
.chips a:hover{background:var(--royal);border-color:var(--royal);color:#fff}
.dark .chips a,.dark .chips span,.ink .chips a,.ink .chips span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.dark .chips a:hover,.ink .chips a:hover{background:var(--royal)}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 100% at 50% 0%,rgba(47,88,171,.42),transparent 70%)}
.cta-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,120%);height:auto;aspect-ratio:720/387;opacity:.05;pointer-events:none}
.cta-in{position:relative;z-index:1}
.cta h2{max-width:18ch;margin-inline:auto}
.cta p{max-width:52ch;margin-inline:auto}
.cta .btn-row{justify-content:center}

/* ---------- footer ---------- */
.ftr{background:#061426;color:var(--inv-mute);font-size:.93rem}
.ftr-in{display:grid;gap:2rem;padding-block:clamp(44px,6vw,68px) 1.6rem}
@media (min-width:820px){.ftr-in{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.ftr h2{font-family:var(--f-display);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 .95rem}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.5rem}
.ftr a{color:var(--inv-mute);text-decoration:none;transition:color .2s var(--ease)}
.ftr a:hover{color:#fff}
.ftr-logo img{width:150px;height:auto;aspect-ratio:720/387;margin-bottom:1rem}
.ftr-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:1.2rem 2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.83rem}
.ftr-bottom a{text-decoration:none}
.ftr-nap{font-style:normal;line-height:1.6}

/* sticky mobile CTA */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:.55rem;
  padding:.55rem var(--pad) calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(6,20,38,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(105%);transition:transform .32s var(--ease)
}
.stickybar.show{transform:none}
/* With the keyboard up, a position:fixed bar does not stay at the bottom of
   the window on iOS — it ends up floating over whatever you are filling in,
   which is where Harry found it, sitting across the Size options. Nobody
   needs "Book online" while they are typing into the booking form. */
body.typing .stickybar{transform:translateY(105%)}
/* And out of the way while a photo is being checked — a 'Book online'
   button floating under the photo you are looking at is just noise. */
body.ph-viewing .stickybar{transform:translateY(105%)}
/* And gone for good once a booking is under way.
   'BOOK ONLINE' on the booking page is a link to the page you are already
   on, so tapping it reloads and throws away everything typed so far —
   Harry did it to himself twice while testing, and a customer who does it
   on step 4 loses their car details, their day and their photos. There is
   nothing it can usefully offer someone mid-booking. 'Call us' is still in
   the header and the footer. */
body.bk-started .stickybar{transform:translateY(105%);pointer-events:none}
.stickybar .btn{flex:1;min-height:48px;font-size:.92rem}
@media (min-width:1024px){.stickybar{display:none}}
body{padding-bottom:0}
/* How much room the bar needs at the bottom of the page.
   70px was a flat guess, and it was short. The bar is 48px of button plus
   its own .55rem top and bottom, plus whatever the phone reserves for the
   home indicator — which on an iPhone is another ~34px that 70px never
   knew about. The result was the bar sitting across the last two lines of
   the footer, hiding "Site by TheWayUp", which is the only credit the site
   carries for who built it.

   --sticky-h is measured from the real element by main.js, so a wrapped
   button or a different phone cannot get this wrong again. The calc is
   what holds until that runs, and it is deliberately generous. */
@media (max-width:1023px){
  body.has-sticky{
    padding-bottom:var(--sticky-h, calc(48px + 1.1rem + 18px + env(safe-area-inset-bottom)))
  }
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.83rem;color:var(--text-mute);padding-top:1.1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:0}
.crumbs a{color:var(--text-mute);text-decoration:none}
.crumbs a:hover{color:var(--royal);text-decoration:underline}
.crumbs li[aria-current]{color:var(--text);font-weight:600}
.dark .crumbs,.ink .crumbs{color:var(--inv-mute)}
.dark .crumbs a,.ink .crumbs a{color:var(--inv-mute)}
.dark .crumbs li[aria-current],.ink .crumbs li[aria-current]{color:#fff}

/* ---------- page header (interior pages) ---------- */
.phead{position:relative;background:var(--navy);color:#fff;margin-top:calc(var(--header-h) * -1);padding-top:var(--header-h);overflow:hidden;isolation:isolate}
.phead-media{position:absolute;inset:0;z-index:-2}
.phead-media img{width:100%;height:100%;object-fit:cover}
.phead-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,16,30,.86) 0%,rgba(4,16,30,.62) 40%,rgba(4,16,30,.88) 78%,rgba(10,27,51,.97) 100%)}
.phead-in{padding-block:clamp(38px,7vw,80px) clamp(34px,6vw,66px);max-width:44rem}
/* .phead sits on a photo but isn't .dark/.ink, so it was inheriting the
   light-ground text colours — unreadable on mobile where the crop is dark. */
.phead .lede{color:#DCE6F7;text-shadow:0 2px 12px rgba(4,16,30,.75)}
.phead .crumbs,.phead .crumbs a{color:#B6C7E3}
.phead .crumbs a:hover{color:#fff}
.phead .crumbs li[aria-current]{color:#fff;font-weight:600}
.phead h1{text-shadow:2px 3px 0 rgba(4,16,30,.5)}
.phead-media img{object-position:center 52%}
.phead h1{margin-bottom:.35em}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:var(--r-m);background:#fff;margin-bottom:.65rem;overflow:hidden}
.faq details[open]{border-color:#B9CBE9;box-shadow:var(--shadow-s)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.2rem;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:1.01rem;min-height:56px;display:flex;align-items:center
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--royal);border-bottom:2.5px solid var(--royal);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .faq-body{padding:0 1.2rem 1.2rem;color:var(--text-mute);font-size:.96rem}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- scroll reveal ---------- */
/* only hide when JS is running — never leave content invisible without it */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
}

/* ---------- 404 ---------- */
.e404{min-height:66vh;display:flex;align-items:center;text-align:center;background:var(--ink);color:#fff}
.e404 .lede{color:var(--inv-mute)}
.e404 .chips a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.e404 .chips a:hover{background:var(--royal);border-color:var(--royal)}
.e404 .big{font-family:var(--f-display);font-weight:800;font-size:clamp(4.5rem,20vw,11rem);line-height:.9;letter-spacing:-.05em;margin:0 0 .1em}

/* ==========================================================================
   §7b — FORMS. Everything branded: no native select, no browser validation UI,
   no alert(). Custom dropdown, custom radios, branded errors + toasts.
   ========================================================================== */
.form{display:grid;gap:1.05rem}
.field{display:grid;gap:.4rem}
.field > label,.fset > legend{
  font-family:var(--f-display);font-weight:700;font-size:.84rem;letter-spacing:.02em;color:var(--text)
}
.dark .field > label,.dark .fset > legend,.ink .field > label,.ink .fset > legend{color:#fff}
.field .hint{font-size:.8rem;color:var(--text-mute);line-height:1.45}
.dark .field .hint,.ink .field .hint{color:var(--inv-mute)}
.inp,.ta{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--text);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-m);padding:.82rem .95rem;min-height:50px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);appearance:none
}
.ta{min-height:118px;resize:vertical}
.inp::placeholder,.ta::placeholder{color:#5D6C89}
.inp:hover,.ta:hover{border-color:#B9C7DE}
.inp:focus,.ta:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 3px rgba(47,88,171,.15)}
.dark .inp,.dark .ta,.ink .inp,.ink .ta{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.dark .inp::placeholder,.ink .inp::placeholder{color:#8296B5}
.dark .inp:focus,.ink .inp:focus,.dark .ta:focus,.ink .ta:focus{border-color:var(--royal-2);box-shadow:0 0 0 3px rgba(74,123,224,.25)}

.row2{display:grid;gap:1.05rem}
@media (min-width:620px){.row2{grid-template-columns:1fr 1fr}.row2.r3{grid-template-columns:1fr 1fr 1fr}}

/* errors */
.err-msg{display:none;font-size:.83rem;color:var(--err);font-weight:600;line-height:1.4}
.dark .err-msg,.ink .err-msg{color:var(--err-dark)}
.field.invalid .inp,.field.invalid .ta,.field.invalid .dd-btn{border-color:var(--err);box-shadow:0 0 0 3px rgba(192,57,43,.13)}
.dark .field.invalid .inp,.ink .field.invalid .inp,.dark .field.invalid .dd-btn,.ink .field.invalid .dd-btn{border-color:var(--err-dark)}
.field.invalid .err-msg{display:block}
.fset.invalid .err-msg{display:block}

/* custom dropdown (replaces <select>) */
.dd{position:relative}
.dd-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-family:var(--f-body);font-size:1rem;text-align:left;color:var(--text);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-m);padding:.82rem .95rem;min-height:50px;cursor:pointer;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.dd-btn:hover{border-color:#B9C7DE}
.dd-btn[aria-expanded="true"]{border-color:var(--royal);box-shadow:0 0 0 3px rgba(47,88,171,.15)}
.dd-btn.placeheld{color:#5A6884}
.dd-btn .caret{flex:none;width:9px;height:9px;border-right:2px solid var(--royal);border-bottom:2px solid var(--royal);transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.dd-btn[aria-expanded="true"] .caret{transform:translateY(2px) rotate(-135deg)}
.dd-list{
  position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;max-height:260px;overflow:auto;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-m);
  padding:.35rem;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s
}
.dd.open .dd-list{opacity:1;visibility:visible;transform:none}
.dd-list li{margin:0}
.dd-list button{
  width:100%;text-align:left;background:none;border:0;border-radius:var(--r-s);cursor:pointer;
  padding:.62rem .7rem;font-family:var(--f-body);font-size:.96rem;color:var(--text);min-height:44px;
  display:flex;justify-content:space-between;gap:.7rem;align-items:center
}
.dd-list button:hover,.dd-list button.active{background:var(--chrome-2)}
.dd-list button[aria-selected="true"]{background:var(--royal);color:#fff}
.dd-list button small{color:var(--text-mute);font-size:.8rem}
.dd-list button[aria-selected="true"] small{color:#D6E2F8}
.dark .dd-btn,.ink .dd-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.dark .dd-list,.ink .dd-list{background:var(--navy-2);border-color:rgba(255,255,255,.2)}
.dark .dd-list button,.ink .dd-list button{color:#fff}
.dark .dd-list button:hover,.dark .dd-list button.active,.ink .dd-list button:hover,.ink .dd-list button.active{background:rgba(255,255,255,.1)}

/* custom radio / checkbox cards */
.fset{border:0;padding:0;margin:0;display:grid;gap:.55rem}
.fset > legend{padding:0;margin-bottom:.2rem}
.opt-grid{display:grid;gap:.55rem}
@media (min-width:560px){.opt-grid.c2{grid-template-columns:1fr 1fr}.opt-grid.c3{grid-template-columns:repeat(3,1fr)}}
.opt{
  position:relative;display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;border-radius:var(--r-m);padding:.85rem .9rem;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)
}
.opt:hover{border-color:#B0C4E4;transform:translateY(-1px)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .mark{
  flex:none;width:21px;height:21px;border:2px solid #C3CFE3;border-radius:50%;margin-top:1px;
  transition:border-color .2s var(--ease);position:relative
}
.opt.cb .mark{border-radius:6px}
.opt input:checked ~ .mark{border-color:var(--royal)}
.opt input:checked ~ .mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--royal)}
.opt.cb input:checked ~ .mark{background:var(--royal)}
.opt.cb input:checked ~ .mark::after{inset:0;border-radius:0;background:none;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;width:10px;height:6px;transform:rotate(-45deg);top:5px;left:4px}
.opt input:checked ~ .otxt{color:var(--text)}
.opt:has(input:checked){border-color:var(--royal);background:#F2F6FF;box-shadow:0 0 0 3px rgba(47,88,171,.1)}
.opt input:focus-visible ~ .mark{outline:3px solid var(--royal-2);outline-offset:3px}
.otxt{flex:1;min-width:0;font-size:.95rem;line-height:1.4}
.otxt b{display:block;font-family:var(--f-display);font-weight:700;font-size:.97rem}
.otxt span{display:block;font-size:.82rem;color:var(--text-mute);margin-top:.1rem}
.otxt .pr{float:right;font-family:var(--f-display);font-weight:800;font-size:.95rem;margin-left:.5rem}

/* Turnstile */
.turnstile-wrap{display:flex;flex-direction:column;gap:.4rem}
.turnstile-wrap .hint{font-size:.78rem;color:var(--text-mute);display:flex;align-items:center;gap:.4em}
.turnstile-wrap .hint svg{color:var(--royal);flex:none}
.dark .turnstile-wrap .hint,.ink .turnstile-wrap .hint{color:var(--inv-mute)}
.cf-turnstile{min-height:0}

/* loading button */
.btn .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.loading .spin{display:inline-block}
.btn.loading .lbl{opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}

/* toast */
.toasts{position:fixed;z-index:120;left:50%;transform:translateX(-50%);top:14px;display:flex;flex-direction:column;gap:.5rem;width:min(420px,calc(100vw - 24px));pointer-events:none}
@media (min-width:820px){.toasts{left:auto;right:20px;top:auto;bottom:20px;transform:none}}
.toast{
  pointer-events:auto;display:flex;gap:.7rem;align-items:flex-start;
  background:var(--navy-2);color:#fff;border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--royal-2);
  border-radius:var(--r-m);padding:.85rem 1rem;box-shadow:var(--shadow-l);font-size:.92rem;
  opacity:0;transform:translateY(-8px);transition:opacity .28s var(--ease),transform .28s var(--ease)
}
@media (min-width:820px){.toast{transform:translateY(10px)}}
.toast.in{opacity:1;transform:none}
.toast.ok{border-left-color:var(--ok-dark)}
.toast.bad{border-left-color:var(--err-dark)}
.toast svg{flex:none;margin-top:2px}
.toast b{display:block;font-family:var(--f-display);font-size:.94rem;margin-bottom:.1rem}
.toast span{color:var(--inv-mute);font-size:.86rem;line-height:1.45}

/* modal */
.modal{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:var(--pad);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.modal.open{opacity:1;visibility:visible}
.modal-bd{position:absolute;inset:0;background:rgba(4,16,30,.72);backdrop-filter:blur(5px)}
.modal-panel{
  position:relative;background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow-l);
  width:min(560px,100%);max-height:86vh;overflow:auto;padding:clamp(22px,4vw,34px);
  transform:translateY(12px) scale(.985);transition:transform .28s var(--ease)
}
.modal.open .modal-panel{transform:none}
.modal-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1.2rem;line-height:1;color:var(--text-mute)}
.modal-x:hover{background:var(--chrome-2);color:var(--text)}

/* ==========================================================================
   BOOKING FLOW
   ========================================================================== */
.bk{background:var(--chrome);min-height:60vh}
.bk-shell{display:grid;gap:clamp(18px,3vw,32px)}
@media (min-width:1000px){.bk-shell{grid-template-columns:1fr 330px;align-items:start}}
.bk-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-s);overflow:hidden}
.bk-steps{display:flex;gap:.35rem;padding:1rem clamp(16px,3vw,26px);border-bottom:1px solid var(--line);overflow-x:auto;background:#FBFCFE}
.bk-steps li{list-style:none;display:flex;align-items:center;gap:.45rem;flex:none;font-size:.78rem;font-weight:600;color:var(--text-mute);padding-right:.35rem}
.bk-steps li b{
  width:24px;height:24px;border-radius:50%;background:var(--chrome-2);color:var(--text-mute);
  display:grid;place-items:center;font-family:var(--f-display);font-size:.74rem;flex:none;
  transition:background-color .25s var(--ease),color .25s var(--ease)
}
.bk-steps li.done b{background:var(--ok);color:#fff}
.bk-steps li.cur b{background:var(--royal);color:#fff;box-shadow:0 0 0 4px rgba(47,88,171,.14)}
.bk-steps li.cur{color:var(--text)}
.bk-steps li span{display:none}
@media (min-width:720px){.bk-steps li span{display:inline}}
.bk-pane{padding:clamp(20px,3.6vw,32px);display:none}
.bk-pane.active{display:block;animation:fadeUp .38s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bk-pane.active{animation:none}}
.bk-pane h2{font-size:clamp(1.35rem,3.4vw,1.75rem);margin-bottom:.3em}
.bk-pane > .lede{margin-bottom:1.4rem;font-size:1rem}
.bk-nav{display:flex;gap:.65rem;justify-content:space-between;margin-top:1.7rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.bk-nav .btn{min-width:120px}

/* service group accordion in step 1 */
.svc-group + .svc-group{margin-top:1.1rem}
.svc-group > h3{font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:var(--royal);font-family:var(--f-display);font-weight:700;margin-bottom:.6rem}
.svc-group.hero-group > h3{color:var(--royal)}
.svc-group.hero-group .opt{border-color:#C9D8F2;background:linear-gradient(180deg,#F7FAFF,#fff)}

/* summary rail */
.bk-sum{background:var(--navy);color:#fff;border-radius:var(--r-l);padding:clamp(18px,3vw,24px);position:sticky;top:calc(var(--header-h) + 14px)}
.bk-sum h3{font-size:1.02rem;margin-bottom:.9rem;color:#fff}
.bk-sum dl{display:grid;gap:.7rem;margin:0 0 1rem}
.bk-sum dl > div{display:flex;justify-content:space-between;gap:.9rem;font-size:.88rem;align-items:baseline}
.bk-sum dt{color:#9DB2D3;flex:none}
.bk-sum dd{margin:0;text-align:right;font-weight:600}
.bk-sum .est{border-top:1px solid rgba(255,255,255,.16);padding-top:.9rem;margin-top:.2rem}
.bk-sum .est .big{font-family:var(--f-display);font-weight:800;font-size:1.55rem;letter-spacing:-.02em}
.bk-sum .est .qnote{font-size:.78rem;color:#9DB2D3;margin-top:.4rem;line-height:1.5}
.bk-sum .empty{font-size:.87rem;color:#9DB2D3}
.badge-quote{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(232,163,23,.18);border:1px solid rgba(232,163,23,.45);color:#F0C46A;padding:.22em .6em;border-radius:var(--r-pill);margin-top:.5rem}

/* location toggle */
.locwrap{margin-top:1.1rem}
.loc-panel{display:none;margin-top:1rem;border:1px dashed var(--line);border-radius:var(--r-m);padding:1rem;background:#FAFCFF}
.loc-panel.show{display:block;animation:fadeUp .3s var(--ease)}
.loc-panel h4{font-family:var(--f-display);font-size:.95rem;margin:0 0 .5rem}
.loc-panel p{font-size:.9rem;color:var(--text-mute);margin:0}

/* calendar */
.cal{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:#fff}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .8rem;background:#FBFCFE;border-bottom:1px solid var(--line)}
.cal-top b{font-family:var(--f-display);font-size:1rem}
.cal-nav{display:flex;gap:.35rem}
.cal-nav button{width:40px;height:40px;border-radius:var(--r-s);border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--text);display:grid;place-items:center;transition:all .2s var(--ease)}
.cal-nav button:hover:not(:disabled){border-color:var(--royal);color:var(--royal)}
.cal-nav button:disabled{opacity:.35;cursor:not-allowed}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:.5rem .5rem 0;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);text-align:center;font-weight:700}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:.5rem}
.cal-cell{border:0;background:none;border-radius:var(--r-s);font-family:var(--f-body);font-size:.92rem;font-weight:600;color:var(--text);cursor:pointer;position:relative;min-height:46px;height:46px;transition:background-color .18s var(--ease),color .18s var(--ease)}
.cal-cell:hover:not(:disabled){background:var(--chrome-2)}
.cal-cell.sel{background:var(--royal);color:#fff}
.cal-cell.today::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--royal)}
.cal-cell.sel.today::after{background:#fff}
.cal-cell:disabled{color:#BCC6D8;cursor:not-allowed;text-decoration:line-through;text-decoration-color:#DDE4EF}
.cal-cell.blocked{color:#BCC6D8;cursor:not-allowed;background:repeating-linear-gradient(135deg,#F5F7FB,#F5F7FB 4px,#EBEFF7 4px,#EBEFF7 8px)}
.cal-cell.empty{visibility:hidden;pointer-events:none}
.cal-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;padding:.2rem .8rem .8rem;font-size:.76rem;color:var(--text-mute)}
.cal-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.35em;vertical-align:-1px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.5rem;margin-top:1rem}
.slot{
  border:1.5px solid var(--line);background:#fff;border-radius:var(--r-m);padding:.6rem .4rem;min-height:52px;
  font-family:var(--f-display);font-weight:700;font-size:.92rem;cursor:pointer;color:var(--text);
  transition:all .2s var(--ease);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem
}
.slot small{font-weight:600;font-size:.68rem;color:var(--text-mute);font-family:var(--f-body)}
/* A tap on a phone leaves :hover stuck on the element afterwards, and
   .slot:hover:not(:disabled) (0,3,0) outranked .slot[aria-pressed] (0,2,0) —
   so the chosen time was painted royal on a royal background and simply
   disappeared. Nobody saw it on a desktop because the mouse moves away.
   Hover only where there is a pointer, and the chosen slot wins either way. */
@media (hover:hover){
  .slot:hover:not(:disabled){border-color:var(--royal);color:var(--royal)}
}
.slot[aria-pressed="true"],
.slot[aria-pressed="true"]:hover{background:var(--royal);border-color:var(--royal);color:#fff}
.slot[aria-pressed="true"] small{color:#D6E2F8}
.slot:disabled{opacity:.42;cursor:not-allowed;background:var(--chrome-2)}
.slot:disabled small{color:#96A2B8}
.slot-note{font-size:.85rem;color:var(--text-mute);margin-top:.9rem;display:flex;gap:.5rem;align-items:flex-start}
.slot-note svg{flex:none;color:var(--royal);margin-top:2px}

/* img,svg,video{display:block} up at the top is right for a photo and wrong
   for an icon leading a sentence. Every other icon on the site happens to
   sit in a flex row, which blockifies it anyway — so the only two that do
   not, the pin on step 3 and the padlock under the photo field, dropped onto
   a line by themselves. Both are inline text, so they go back to inline. */
.bk-where svg,
.field:not(.turnstile-wrap) > .hint svg{
  display:inline-block;vertical-align:-4px;color:var(--royal);margin-right:.12em
}

/* confirm / review */
.rev-table{width:100%;border-collapse:collapse;font-size:.94rem;margin-bottom:1.2rem}
.rev-table th{text-align:left;font-weight:500;color:var(--text-mute);padding:.6rem 0;width:42%;vertical-align:top;font-size:.88rem}
.rev-table td{text-align:right;font-weight:600;padding:.6rem 0;border-bottom:1px solid var(--line)}
.rev-table tr:last-child td,.rev-table tr:last-child th{border-bottom:0}
.emails{display:grid;gap:.8rem;margin-top:1.2rem}
@media (min-width:760px){.emails{grid-template-columns:1fr 1fr}}
.email-card{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:#fff;font-size:.83rem}
.email-card header{background:var(--chrome-2);padding:.6rem .8rem;font-family:var(--f-display);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);border-bottom:1px solid var(--line)}
.email-card .body{padding:.85rem .9rem;color:var(--text-mute);line-height:1.55}
.email-card .body b{color:var(--text)}
.done-mark{width:64px;height:64px;border-radius:50%;background:rgba(31,122,87,.1);color:var(--ok);display:grid;place-items:center;margin:0 auto 1.1rem}
.done-ref{margin:1.1rem auto 0;font-size:.92rem;color:var(--text-mute)}
.done-ref b{font-family:var(--f-mono,monospace);letter-spacing:.04em;color:var(--text)}

/* demo ribbon */
.demo-note{
  background:linear-gradient(90deg,var(--navy),var(--navy-3));color:#fff;font-size:.82rem;
  padding:.6rem var(--pad);text-align:center;line-height:1.5
}
.demo-note b{font-family:var(--f-display)}

/* ---------- 320px safety ---------- */
@media (max-width:360px){
  :root{--pad:14px}
  .cf-turnstile{max-width:100%;overflow:hidden}
  .info-grid,.form,.row2{min-width:0}
  .field,.fset,.dd{min-width:0}
  .inp,.ta,.dd-btn{max-width:100%}
}
.info-grid > *{min-width:0}
.form,.field,.row2,.row2 > *{min-width:0}
.map{max-width:100%}

/* ==========================================================================
   SHOP-STICKER LAYER
   The logo is a heavy brush script with a black outline and a royal-blue
   offset. Everything below rebuilds that construction as a system: script
   accents, hard offset shadows instead of soft blur, outlined numerals,
   slanted bands and sticker-framed photos.
   ========================================================================== */
@font-face{font-family:'Lobster';src:url('../fonts/lobster-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lobster Fallback';src:local('Georgia'),local('Times New Roman');
  size-adjust:96.9%;ascent-override:103.2%;descent-override:25.8%;line-gap-override:0%}

:root{
  --f-script:'Lobster','Lobster Fallback',cursive;
  --off:6px;                                   /* the logo's offset distance */
  --sh-off:6px 6px 0 var(--royal);
  --sh-off-sm:4px 4px 0 var(--royal);
  --sh-off-ink:5px 5px 0 var(--ink);
}

/* ---------- script accents (signature moments only, never body copy) ---- */
.script{
  font-family:var(--f-script);font-weight:400;line-height:1.42;letter-spacing:0;
  text-transform:none;display:inline-block;transform:rotate(-2.2deg);transform-origin:left center;
  padding:.06em .18em .1em;overflow:visible;
}
.script-kick{
  font-size:clamp(1.3rem,3.5vw,2.15rem);color:var(--royal);  /* 6.4:1 on the light ground */
  line-height:1.1;margin:0 0 .18em;
}
.dark .script-kick,.ink .script-kick,.hero .script-kick,.cta .script-kick,
.phead .script-kick,.split.inverse .script-kick{color:var(--royal-soft)}
/* the logo's own construction: white fill, dark edge, blue offset */
.script-badge{
  font-family:var(--f-script);font-size:clamp(1.7rem,5vw,3rem);color:#fff;line-height:1.6;
  display:inline-block;transform:rotate(-3deg);padding:.12em .26em .3em;margin-bottom:-.14em;
  -webkit-text-stroke:4px var(--ink);paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--royal);
}
@supports not (paint-order:stroke){ .script-badge{-webkit-text-stroke:0;text-shadow:2px 2px 0 var(--ink),var(--off) var(--off) 0 var(--royal)} }

/* ---------- hard offset shadows replace soft blur on the key surfaces --- */
.btn-primary{box-shadow:var(--sh-off-ink)}
.btn-primary:hover{box-shadow:8px 8px 0 var(--ink);background:var(--royal-2)}
.btn-primary:active{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}
.dark .btn-ghost,.ink .btn-ghost,.hero .btn-ghost{box-shadow:var(--sh-off-sm)}
.dark .btn-ghost:hover,.ink .btn-ghost:hover,.hero .btn-ghost:hover{box-shadow:6px 6px 0 var(--royal)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:var(--sh-off-sm)}
.btn-ghost:hover{box-shadow:6px 6px 0 var(--royal);border-color:var(--ink);color:var(--ink)}

/* ---------- slanted sticker strip ---------- */
.strip-wrap{overflow:hidden;padding-block:clamp(18px,3.4vw,34px)}
.strip{
  background:var(--royal);color:#fff;overflow:hidden;position:relative;
  transform:rotate(-1.6deg) scale(1.05);
  border-block:3px solid var(--ink);
}
.strip-track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}}
@keyframes slide{to{transform:translateX(-50%)}}
.strip-track > span{
  display:inline-flex;align-items:center;gap:1.1rem;padding:.7rem 1.1rem;white-space:nowrap;
  font-family:var(--f-display);font-weight:800;font-size:clamp(.82rem,1.9vw,1rem);
  letter-spacing:.06em;text-transform:uppercase;
}
.strip-track img{height:1.5em;width:auto;opacity:.95}
.strip-track i{width:7px;height:7px;background:#fff;border-radius:50%;display:inline-block;flex:none}

/* ---------- oversized outlined chapter numerals ---------- */
.big-num{
  position:absolute;z-index:0;top:-.36em;right:-.02em;pointer-events:none;
  font-family:var(--f-display);font-weight:800;font-size:clamp(6rem,15vw,11rem);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(126,166,246,.34);letter-spacing:-.05em;
}
.sec:not(.dark):not(.ink) .big-num{-webkit-text-stroke-color:rgba(47,88,171,.18)}
.chapter-body{position:relative}
.chapter-body > *{position:relative;z-index:1}

/* ---------- sticker cards ---------- */
.bcard{border-width:2px;border-color:var(--ink);box-shadow:var(--sh-off-sm);border-radius:18px}
.bcard:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--royal);border-color:var(--ink)}
.bcard:not(.bcard-feat)::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.55) 48%,transparent 60%);
  transition:opacity .45s var(--ease),transform .7s var(--ease);transform:translateX(-40%)
}
.bcard:not(.bcard-feat):hover::after{opacity:1;transform:translateX(40%)}
.bcard-feat{border-color:var(--ink)}
.bcard-feat:hover{box-shadow:8px 8px 0 var(--royal-2)}
.dark .bcard,.ink .bcard{border-color:rgba(255,255,255,.28);box-shadow:4px 4px 0 rgba(47,88,171,.55)}
.dark .bcard:hover,.ink .bcard:hover{box-shadow:8px 8px 0 var(--royal-2);border-color:#fff}

/* ---------- sticker price tag ---------- */
.tag-price{
  display:inline-flex;align-items:baseline;gap:.35em;transform:rotate(-2deg);
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-pill);
  padding:.34em .95em;box-shadow:var(--sh-off-sm);
  font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;color:var(--ink)
}
.tag-price small{font-size:.58em;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--royal)}
.bcard .bprice{margin-top:auto;padding-top:.4rem}
.bcard .bprice small{display:inline;margin:0}

/* ---------- sticker photo frames ---------- */
.chapter-media,.split-media,.rail figure{
  border:3px solid var(--ink);border-radius:18px;box-shadow:var(--sh-off);background:var(--navy)
}
.dark .chapter-media,.ink .chapter-media,.dark .rail figure,.ink .rail figure{
  border-color:#fff;box-shadow:6px 6px 0 var(--royal)
}
.split{border:3px solid var(--ink);box-shadow:var(--sh-off);border-radius:20px}
.split-media{border:0;border-radius:0;box-shadow:none}

/* ---------- eyebrow becomes a sticker chip ---------- */
.eyebrow{
  display:inline-block;background:var(--royal);color:#fff;border:2px solid var(--ink);
  border-radius:var(--r-pill);padding:.3em .85em;box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-1.4deg);margin-bottom:1.1rem;font-size:.72rem
}
.dark .eyebrow,.ink .eyebrow,.hero .eyebrow{background:var(--royal);color:#fff;border-color:#fff;box-shadow:3px 3px 0 rgba(255,255,255,.35)}

/* ---------- trust strip: sticker chips, not a flat table ---------- */
.trust{background:var(--chrome-2);border-bottom:0;padding:clamp(18px,3vw,26px) 0}
.trust-in{background:transparent;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.trust-in{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.trust-in{grid-template-columns:repeat(4,1fr)}}
.trust-i{
  border:2px solid var(--ink);border-radius:16px;box-shadow:var(--sh-off-sm);
  background:#fff;transition:transform .22s var(--ease),box-shadow .22s var(--ease)
}
.trust-i:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--royal)}

/* ---------- step cards ---------- */
.step-c{border:2px solid rgba(255,255,255,.3);box-shadow:5px 5px 0 rgba(47,88,171,.5);border-radius:18px}
.step-c b{border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);width:38px;height:38px;font-size:1rem}

/* ---------- reviews as stuck-on cards ---------- */
.rev{border:2px solid var(--ink);box-shadow:var(--sh-off-sm);border-radius:18px}

/* ---------- angled section edges ---------- */
.sec-slant-t{clip-path:polygon(0 2.2vw,100% 0,100% 100%,0 100%);margin-top:-2.2vw;padding-top:calc(clamp(56px,9vw,110px) + 2.4vw);position:relative;z-index:1}
.sec-slant-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 2.2vw),0 100%);padding-bottom:calc(clamp(56px,9vw,110px) + 2vw)}

/* ---------- hero gets the sticker treatment ---------- */
.hero h1{text-shadow:3px 3px 0 rgba(4,16,30,.55)}
.hero-marks span{
  background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.24);
  border-radius:var(--r-pill);padding:.35em .8em
}
.hero-marks{border-top:0;padding-top:0;gap:.5rem}

/* ---------- FAQ ---------- */
.faq details{border:2px solid var(--ink);box-shadow:var(--sh-off-sm);border-radius:16px}
.faq details[open]{box-shadow:6px 6px 0 var(--royal);border-color:var(--ink)}

/* ---------- CTA ---------- */
.cta-wm{opacity:.08}
.cta h2{text-shadow:4px 4px 0 rgba(4,16,30,.6)}

/* ---------- chips ---------- */
.chips a,.chips span{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-weight:700}
.chips a:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}
.dark .chips a,.ink .chips a,.e404 .chips a{border-color:#fff;box-shadow:2px 2px 0 rgba(255,255,255,.4)}

/* ---------- forms pick it up too ---------- */
.opt{border-width:2px;border-color:#C3CFE3}
.opt:has(input:checked){box-shadow:3px 3px 0 var(--royal)}
.bk-card{border:3px solid var(--ink);border-radius:20px;box-shadow:var(--sh-off)}
.bk-sum{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--royal)}
.slot[aria-pressed="true"]{box-shadow:3px 3px 0 var(--ink)}
.cal{border:2px solid var(--ink);border-radius:16px}

/* keep the rotations from ever pushing a scrollbar */
.wrap,.trust-in,.revs,.bento{overflow:visible}
html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}

/* ==========================================================================
   HARD EDGE PASS
   The pills, bubbles and soft tiles read playful — wrong for a wordmark that
   is a heavy brush script with a black outline. Everything below squares the
   corners off, thickens the black, tightens the offsets and swaps the display
   face for Cinzel — the engraved Roman caps that sit inside the wordmark.
   This block is last in the file so it wins.
   ========================================================================== */
:root{
  --r-s:2px; --r-m:3px; --r-l:4px; --r-pill:3px;
  --off:5px;
  --sh-off:5px 5px 0 var(--ink);
  --sh-off-sm:4px 4px 0 var(--ink);
  --edge:2.5px solid var(--ink);
}

/* ---------- type ---------- */
h1,h2{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.012em;line-height:.98;
}
h3,h4{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.08}
h1{font-size:clamp(2.3rem,6.2vw,4.3rem)}
h2{font-size:clamp(1.9rem,4.9vw,3.2rem)}
h3{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.hero h1{font-size:clamp(2.3rem,6vw,4.2rem);max-width:19ch;text-shadow:4px 4px 0 rgba(4,16,30,.55)}
.hero h1 .l2{display:block;color:var(--royal-soft)}

/* small UI text stays in Inter — Cinzel at 12px is unreadable */
.btn,.eyebrow,.tlink,.hdr-nav a,.hdr-phone,.otxt b,.card .lab,.trust-i b,
.bk-steps li,.field > label,.fset > legend,.rev cite b,.ftr h2,
.dl dt,.hours th,.hours td,.slot,.chips a,.chips span{font-family:var(--f-ui)}

.eyebrow{
  font-family:var(--f-display);font-weight:700;font-size:.76rem;letter-spacing:.2em;
  background:var(--royal);color:#fff;border:2.5px solid var(--ink);border-radius:0;
  box-shadow:4px 4px 0 var(--ink);transform:none;padding:.34em .9em .28em;
}
.dark .eyebrow,.ink .eyebrow,.hero .eyebrow,.phead .eyebrow{border-color:#fff;box-shadow:4px 4px 0 rgba(255,255,255,.28)}

/* ---------- everything squares off ---------- */
.btn,.chips a,.chips span,.tag-price,.trust-i,.bcard,.rev,.step-c,.faq details,
.inp,.ta,.dd-btn,.dd-list,.opt,.bk-card,.bk-sum,.cal,.slot,.split,.chapter-media,
.split-media,.rail figure,.picker,.modal-panel,.toast,.hdr .btn,.menu-btn,
.navov-close,.cal-cell,.hero-marks span,.chapter-num{border-radius:2px}

.btn{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.045em;
  font-size:1.05rem;border-width:2.5px;padding:0 1.45em;
}
.btn-lg{font-size:1.18rem;padding:0 1.75em}
.btn-primary{background:var(--royal);color:#fff;border-color:var(--ink);box-shadow:var(--sh-off)}
.btn-primary:hover{background:var(--royal-2);box-shadow:7px 7px 0 var(--ink);transform:translate(-1px,-1px)}
.btn-primary:active{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:var(--sh-off)}
.btn-ghost:hover{background:#fff;box-shadow:7px 7px 0 var(--royal);transform:translate(-1px,-1px);color:var(--ink)}
.dark .btn-ghost,.ink .btn-ghost,.hero .btn-ghost,.cta .btn-ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:5px 5px 0 var(--royal)}
.dark .btn-ghost:hover,.ink .btn-ghost:hover,.hero .btn-ghost:hover,.cta .btn-ghost:hover{background:#fff;color:var(--ink);box-shadow:7px 7px 0 var(--royal)}

.bcard,.rev,.trust-i,.faq details{border:var(--edge);box-shadow:var(--sh-off-sm)}
.bcard:hover{transform:translate(-2px,-2px) !important;box-shadow:7px 7px 0 var(--royal)}
.dark .bcard,.ink .bcard{border-color:#fff;box-shadow:4px 4px 0 var(--royal)}
.dark .bcard:hover,.ink .bcard:hover{box-shadow:7px 7px 0 var(--royal-2)}
.step-c{border:2.5px solid rgba(255,255,255,.5);box-shadow:5px 5px 0 var(--royal)}
.step-c b{border-radius:0;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--f-display);font-weight:400;font-size:1.1rem}
.chapter-media,.split-media,.rail figure,.split{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.dark .chapter-media,.ink .chapter-media,.dark .rail figure,.ink .rail figure{border-color:#fff;box-shadow:6px 6px 0 var(--royal)}
.chips a,.chips span{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:700;text-transform:uppercase;font-size:.76rem;letter-spacing:.06em}

.tag-price{
  border:2.5px solid var(--ink);border-radius:2px;box-shadow:4px 4px 0 var(--ink);transform:none;
  font-family:var(--f-display);font-weight:400;font-size:1.5rem;letter-spacing:.01em;padding:.18em .6em .1em;
}
.tag-price small{font-family:var(--f-ui);font-size:.44em;font-weight:800;letter-spacing:.12em}

/* ---------- prices + stats in the display face ---------- */
.price-line b,.card .num,.bk-sum .est .big{font-family:var(--f-display);font-weight:400;letter-spacing:.01em}
.bcard .bprice{font-family:var(--f-display);font-weight:400}

/* ---------- trust strip: no jaunty angles ---------- */
.trust-i:nth-child(odd),.trust-i:nth-child(even){transform:none}
.trust-i:hover{transform:translate(-2px,-2px) !important;box-shadow:7px 7px 0 var(--royal)}

/* ==========================================================================
   HEADER — solid bar, smaller wordmark, wider menu control
   Was transparent over the hero and floating over content on scroll, which is
   what made it look broken. Now it is a real bar with a hard bottom edge.
   ========================================================================== */
:root{--header-h:68px}
html{scroll-padding-top:calc(var(--header-h) + 12px)}

.hdr,.hdr.solid,.hdr.on-light{
  background:var(--ink);backdrop-filter:none;
  border-bottom:3px solid var(--royal);box-shadow:none;
}
.hdr-in{min-height:var(--header-h);gap:1rem}
.hdr-logo img{width:104px}
@media (min-width:1024px){.hdr-logo img{width:118px}}

.menu-btn{
  border-radius:2px;background:transparent;border:2.5px solid rgba(255,255,255,.55);
  box-shadow:3px 3px 0 var(--royal);min-height:42px;padding:0 1.05em;gap:.6em;
  font-family:var(--f-display);font-weight:400;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;
}
.menu-btn:hover{background:rgba(255,255,255,.1);border-color:#fff}
.menu-btn > span:not(.burger){display:inline}
.burger{width:19px;height:13px}
.burger i{height:2.5px}
.burger i:nth-child(2){top:5.5px}.burger i:nth-child(3){top:11px}

.hdr .btn{
  min-height:40px;padding:0 1.05em;font-size:.95rem;letter-spacing:.05em;
  box-shadow:3px 3px 0 rgba(255,255,255,.3);border-color:#fff;
}
.hdr .btn-primary:hover{box-shadow:5px 5px 0 rgba(255,255,255,.45);transform:translate(-1px,-1px)}
.hdr-phone{font-family:var(--f-ui);font-weight:700;letter-spacing:.01em}
@media (min-width:1024px){
  .hdr-nav{gap:1.5rem}
  .hdr-nav a{
    font-family:var(--f-display);font-weight:400;font-size:.95rem;
    text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.82);
  }
  .hdr-nav a::after{height:3px;background:var(--royal-2)}
}
/* the hero no longer tucks under a transparent bar */
.hero,.phead{margin-top:0;padding-top:0}
.phead{padding-top:0}
.hero-in{padding-block-start:clamp(46px,7vw,86px)}
.hero-in{min-height:clamp(520px,calc(84svh - var(--header-h)),820px)}
@supports not (height:1svh){.hero-in{min-height:clamp(520px,calc(84vh - var(--header-h)),820px)}}

/* ==========================================================================
   NAV — side drawer, not a fullscreen takeover, and always scrollable
   ========================================================================== */
.navov{
  inset:0 0 0 auto;width:min(400px,88vw);border-left:3px solid var(--royal);
  padding:22px var(--pad) 26px;transform:translateX(100%);opacity:1;
  overflow-y:auto;overscroll-behavior:contain;box-shadow:-18px 0 50px rgba(0,0,0,.5);
  /* explicit longhands as well as the shorthand — older iOS is unreliable with inset */
  top:0;right:0;bottom:0;left:auto;
  transform:translate3d(100%,0,0);will-change:transform;isolation:isolate;
  -webkit-overflow-scrolling:touch;
}
body.nav-open .navov{transform:translate3d(0,0,0)}
/* .navov::before is deliberately gone. It was a position:fixed pseudo with a
   negative z-index living inside a transformed, scrolling, fixed container —
   a reliable way to make iOS Safari drop the whole layer and paint an empty
   panel. The scrim below already does the dimming, so it was redundant too. */
.navov-scrim{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:89;background:rgba(4,16,30,.72);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
body.nav-open .navov-scrim{opacity:1;visibility:visible}
.navov-close{
  border-radius:2px;position:relative;margin-left:auto;margin-bottom:.4rem;
  width:44px;height:44px;background:transparent;border:2.5px solid rgba(255,255,255,.5);
  display:grid;place-items:center;flex:none;
}
.navov-close:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.navov a.navov-link{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.5rem,5.2vw,1.95rem);padding:.5em 0;
  border-bottom:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between;
}
.navov a.navov-link::after{content:"→";color:var(--royal-soft);font-size:.8em;opacity:0;transform:translateX(-6px);transition:all .22s var(--ease)}
.navov a.navov-link:hover::after{opacity:1;transform:none}
.navov a.navov-link.is-cta{
  background:var(--royal);border:2.5px solid #fff;box-shadow:4px 4px 0 rgba(255,255,255,.3);
  justify-content:center;margin-top:1.1rem;padding:.55em 0;border-bottom:2.5px solid #fff;
}
.navov a.navov-link.is-cta::after{display:none}
.navov-foot{margin-top:1.6rem;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.navov-foot a{display:flex;gap:.6rem;align-items:center;padding:.35rem 0}
@media (min-width:1024px){.navov,.navov-scrim{display:none}}

/* ==========================================================================
   FOOTER — the repeated "service + suburb" list read badly
   ========================================================================== */
.ftr h2{
  font-family:var(--f-display);font-weight:400;font-size:1rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:1rem;
}
.areas{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem .8rem}
.areas a{
  display:block;border:2px solid rgba(255,255,255,.22);padding:.5rem .7rem;
  font-family:var(--f-display);font-weight:400;font-size:.95rem;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;transition:all .2s var(--ease);
}
.areas a:hover{border-color:#fff;background:var(--royal);box-shadow:3px 3px 0 rgba(255,255,255,.3)}
.areas a small{display:block;font-family:var(--f-ui);font-size:.68rem;letter-spacing:.04em;color:var(--inv-mute);text-transform:none;margin-top:.1rem}
.areas a:hover small{color:#DDE7F8}

/* ---------- Google rating badge ---------- */
.g-rating{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  border:2.5px solid var(--ink);background:#fff;padding:.4rem .8rem;box-shadow:4px 4px 0 var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);color:var(--ink);
}
.g-rating:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--royal)}
.g-rating .g-mark{flex:none}
.g-rating b{font-family:var(--f-display);font-weight:400;font-size:1.15rem;line-height:1;letter-spacing:.02em}
.g-rating .g-stars{color:#E8A317;font-size:.82rem;letter-spacing:1px;line-height:1}
.g-rating span.g-txt{font-family:var(--f-ui);font-size:.74rem;color:var(--text-mute);display:block;margin-top:.1rem}
.dark .g-rating,.ink .g-rating,.hero .g-rating,.cta .g-rating{background:rgba(255,255,255,.06);border-color:#fff;color:#fff;box-shadow:4px 4px 0 var(--royal)}
.dark .g-rating span.g-txt,.ink .g-rating span.g-txt,.hero .g-rating span.g-txt{color:var(--inv-mute)}

/* ---------- hero marks read as hard tags ---------- */
.hero-marks span{
  background:rgba(4,16,30,.5);border:2px solid rgba(255,255,255,.4);border-radius:2px;
  font-family:var(--f-ui);font-weight:600;font-size:.83rem;padding:.4em .75em;
}

/* ---------- inline chapter numerals ---------- */
.big-num{display:none}
.chapter-body h3{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.num-tag{
  font-family:var(--f-display);font-weight:400;font-size:.62em;line-height:1;
  color:var(--royal);border:2.5px solid var(--royal);padding:.16em .38em .1em;flex:none;
}
.dark .num-tag,.ink .num-tag{color:var(--royal-soft);border-color:var(--royal-soft)}

/* ---------- misc squaring ---------- */
.stickybar{border-top:3px solid var(--royal)}
.stickybar .btn{box-shadow:3px 3px 0 var(--ink)}
.sec-slant-t,.sec-slant-b{clip-path:none;margin-top:0;padding-top:clamp(56px,9vw,110px);padding-bottom:clamp(56px,9vw,110px)}
.gloss{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
.e404 .big{-webkit-text-stroke:3px var(--royal);color:transparent}

/* Google badge sits inside the trust tile */
.trust-i.trust-g{flex-direction:column;align-items:flex-start;gap:.6rem}
.trust-i.trust-g > span{font-size:.83rem;color:var(--text-mute);line-height:1.45}
.trust-i.trust-g .g-rating{box-shadow:3px 3px 0 var(--royal)}
.hero-marks{align-items:center}
.hero-marks .g-rating{padding:.45rem .8rem}

/* ---------- hero headline: Barlow is condensed, so it takes a wider measure ---------- */
.hero h1{max-width:20ch;font-size:clamp(2.25rem,5.6vw,4rem)}
.hero-sub{max-width:48ch}
/* primary button needs a visible offset on dark grounds */
.dark .btn-primary,.ink .btn-primary,.hero .btn-primary,.cta .btn-primary,.stickybar .btn-primary{
  border-color:#fff;box-shadow:5px 5px 0 rgba(255,255,255,.32)
}
.dark .btn-primary:hover,.ink .btn-primary:hover,.hero .btn-primary:hover,.cta .btn-primary:hover{
  box-shadow:7px 7px 0 rgba(255,255,255,.45)
}
/* the compact Google badge must not wrap */
.g-rating{white-space:nowrap}
.trust-i.trust-g .g-rating{white-space:normal}
.trust-i.trust-g .g-rating > span{min-width:0}
.g-rating span.g-txt{white-space:normal}

/* the hero-mark tag styling was hitting the spans *inside* the Google badge */
.hero-marks span{background:none;border:0;padding:0}
.hero-marks > span{
  background:rgba(4,16,30,.5);border:2px solid rgba(255,255,255,.4);border-radius:2px;
  font-family:var(--f-ui);font-weight:600;font-size:.83rem;padding:.4em .75em;
  display:inline-flex;align-items:center;gap:.45em;
}
/* inside a trust tile the badge doesn't need its own box */
.trust-i.trust-g .g-rating{border:0;box-shadow:none;padding:0;background:none}
.trust-i.trust-g .g-rating:hover{transform:none}
.trust-i.trust-g{gap:.45rem;padding:1.15rem}

/* script counterpoint under a caps headline wants more presence */
.script-badge{font-size:clamp(2.1rem,6vw,3.6rem)}
.script-kick{font-size:clamp(1.38rem,3.7vw,2.3rem);line-height:1.1}

/* footer contact + socials get real icons */
.ftr-nap{display:grid;gap:.55rem}
.ftr-nap a,.ftr-nap span{display:flex;gap:.6rem;align-items:flex-start;text-decoration:none}
.ftr-nap svg{flex:none;margin-top:2px;color:var(--royal-soft)}
.socials{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.socials li{margin:0}
.socials a{
  display:inline-flex;align-items:center;gap:.45rem;border:2px solid rgba(255,255,255,.24);
  padding:.4rem .7rem;font-family:var(--f-ui);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;transition:all .2s var(--ease);
}
.socials a:hover{border-color:#fff;background:rgba(255,255,255,.08);box-shadow:3px 3px 0 var(--royal)}

/* Horizontal rails: browsers treat everything in the row as "in viewport" and
   eagerly fetch it. Deferring off-screen figures keeps the gallery LCP down. */
.rail figure{content-visibility:auto;contain-intrinsic-size:auto 320px auto 240px}


/* ---------- the CUSTOMS layer ----------------------------------------------
   The wordmark pairs a loud brush script with a small, wide-tracked engraved
   serif. Lobster covers the first half; this covers the second. Cinzel is kept
   strictly to small tracked caps — the job that serif does inside the logo —
   and never touches a heading, a button or a paragraph, where its hairlines
   fall apart and it stops reading like a workshop.
   -------------------------------------------------------------------------- */
.eyebrow,
.hdr-nav a,
.ftr h2,
.dl dt,
.price-line .from,
.card .lab,
.fset > legend,
.hours th,
.num-tag,
.chapter-num,
.bcard .btag{
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;
}
.eyebrow{font-size:.7rem;letter-spacing:.2em;padding:.42em .95em .36em}
.hdr-nav a{font-size:.78rem;letter-spacing:.17em}
.ftr h2{font-size:.78rem;letter-spacing:.19em}
.dl dt{font-size:.72rem;letter-spacing:.17em}
.price-line .from{font-size:.66rem;letter-spacing:.19em}
.card .lab{font-size:.68rem;letter-spacing:.18em}
.fset > legend{letter-spacing:.14em}
.hours th{font-size:.74rem;letter-spacing:.14em;font-weight:700}
.num-tag{font-size:.56em;letter-spacing:.08em;padding:.3em .45em .24em}


/* ==========================================================================
   MOTION
   Everything here is additive to .rv and lives behind the same two gates:
   a .js class (so nothing is ever hidden without JS) and
   prefers-reduced-motion (so anyone who asked for stillness gets it).
   Every reveal fires once — main.js unobserves — because motion that
   replays on scroll-back is what makes animated sites exhausting.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* --- 02 squeegee wipe: headings pull in like a blade across glass ------- */
  .js .rv-wipe > .wipe-i{
    display:block;
    clip-path:inset(-14px 100% -14px -6px);   /* negative insets keep the offset shadow */
    transition:clip-path .78s cubic-bezier(.22,.68,.32,1);
  }
  .js .rv-wipe.in > .wipe-i{clip-path:inset(-14px -14px -14px -6px)}

  /* --- 04 stagger: grid children dealt out rather than dropped ------------ */
  .js .rv-stagger > *{
    opacity:0;transform:translateY(20px) scale(.985);
    transition:opacity .5s var(--ease),transform .5s var(--ease);
  }
  .js .rv-stagger.in > *{opacity:1;transform:none}
  .js .rv-stagger.in > :nth-child(1){transition-delay:0ms}
  .js .rv-stagger.in > :nth-child(2){transition-delay:70ms}
  .js .rv-stagger.in > :nth-child(3){transition-delay:140ms}
  .js .rv-stagger.in > :nth-child(4){transition-delay:210ms}
  .js .rv-stagger.in > :nth-child(5){transition-delay:280ms}
  .js .rv-stagger.in > :nth-child(6){transition-delay:350ms}

  /* --- 08 process rail: the line draws, the steps slide in --------------- */
  .js .steps.steprail{position:relative;padding-left:26px}
  .js .steps.steprail::before{
    content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;background:var(--royal);
    transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.22,.68,.32,1);
  }
  .js .steps.steprail.in::before{transform:scaleY(1)}
  .js .steps.steprail > .step-c{opacity:0;transform:translateX(-18px);
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js .steps.steprail.in > .step-c{opacity:1;transform:none}
  .js .steps.steprail.in > :nth-child(1){transition-delay:60ms}
  .js .steps.steprail.in > :nth-child(2){transition-delay:200ms}
  .js .steps.steprail.in > :nth-child(3){transition-delay:340ms}
}
/* the rail is a vertical device — on a 3-up desktop grid it makes no sense */
@media (min-width:820px){.js .steps.rail{padding-left:0}.js .steps.steprail::before{display:none}}

/* --- 05 counters: reserve the width so the roll-up cannot shift layout --- */
.g-rating b,.count-n{font-variant-numeric:tabular-nums}

/* ---------- reviews: Google mark on every card, linked to the listing ------ */
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.6rem}
.rev-g{
  display:inline-flex;align-items:center;gap:.34em;text-decoration:none;flex:none;
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.6rem;color:var(--text-mute);border:2px solid var(--line-dark);
  padding:.28em .5em .22em;background:#fff;transition:border-color .2s var(--ease),color .2s var(--ease)
}
.rev-g svg{width:13px;height:13px;flex:none}
.rev-g:hover{border-color:var(--ink);color:var(--ink)}
.rev-g:focus-visible{outline:3px solid var(--royal);outline-offset:2px}
.revs-all{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.2rem;text-decoration:none;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.98rem;color:var(--ink);border:2.5px solid var(--ink);padding:.55em 1.1em;
  background:#fff;box-shadow:4px 4px 0 var(--ink);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)
}
.revs-all svg{width:17px;height:17px;flex:none}
.revs-all:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--royal)}
.revs-all:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.dark .revs-all,.ink .revs-all{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--royal)}
.dark .revs-all:hover,.ink .revs-all:hover{background:#fff;color:var(--ink)}
.dark .rev-g,.ink .rev-g{background:transparent}

/* ---------- booking: category chooser ------------------------------------- */
.cat-grid{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:640px){.cat-grid{grid-template-columns:1fr 1fr}}
.cat{
  display:block;text-align:left;width:100%;cursor:pointer;font:inherit;
  border:2.5px solid var(--ink);background:#fff;color:var(--text);
  padding:.85rem 1rem;box-shadow:4px 4px 0 var(--ink);min-height:64px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease)
}
.cat b{display:block;font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.015em;line-height:1.1}
.cat span{display:block;font-size:.86rem;color:var(--text-mute);margin-top:.15rem}
.cat:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--royal)}
.cat:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.cat:focus-visible{outline:3px solid var(--royal);outline-offset:3px}
.cat.on{background:var(--royal);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.cat.on span{color:rgba(255,255,255,.82)}
.fset.cats.invalid .cat{border-color:var(--bad)}
/* The cards cast a 4px offset shadow (7px on hover), and box-shadow reserves
   no layout space for it. Both fieldsets have margin:0, so the service list's
   heading sat directly under the bottom row and the shadow printed straight
   through it. Enough room for the hover shadow and a readable break. */
.fset.cats + .fset{margin-top:1.5rem}

/* ---------- the script, in the line with the heading ----------------------
   Eyebrow above, script kicker, then the heading was three faces on three
   stacked lines. The script now sits inside the heading itself, so a section
   opens on two lines instead of three.
   ------------------------------------------------------------------------ */
.script-in{
  font-family:var(--f-script);font-style:normal;text-transform:none;
  color:var(--royal);font-size:.62em;letter-spacing:0;line-height:1;
  white-space:nowrap;
}
.script-in.lead{margin-right:.42em}
.dark .script-in,.ink .script-in,.hero .script-in,.cta .script-in,
.phead .script-in,.split.inverse .script-in{color:var(--royal-soft)}
/* a long heading should still be able to break away from its kicker */
@media (max-width:560px){
  /* nowrap is fine mid-line on a wide screen, but a long kicker on its own line
     just runs off the side — and the hero clips overflow, so it fails silently */
  .script-in.lead{display:block;margin:0 0 .1em;font-size:.66em;white-space:normal}
}
.hero h1 .script-in.lead{white-space:normal}

/* rearming a reveal must be instant — otherwise removing .in animates the
   element backwards, and a quick scroll up shows it running in reverse */
.rv-reset,.rv-reset *{transition:none !important;animation:none !important}

/* ---------- package comparison ---------------------------------------------
   A four-column table cannot survive a 390px screen. It used to be a 560px-wide
   table in a horizontal scroller, which showed one column and gave no hint the
   rest existed. Below 760px the same markup reflows into one card per package,
   so nothing is hidden and there is nothing to scroll.
   -------------------------------------------------------------------------- */
.cmp{margin-top:1.8rem}
.cmp-t{width:100%;border-collapse:collapse}
.cmp-t th,.cmp-t td{padding:.7rem .5rem;border-bottom:1px solid rgba(255,255,255,.14);text-align:right}
.cmp-t thead th{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.66rem;color:#fff;vertical-align:bottom}
.cmp-t tbody th{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.66rem;color:var(--inv-mute);text-align:left}
.cmp-t td{font-size:.95rem;color:#fff}
.cmp-t tbody tr:last-child th,.cmp-t tbody tr:last-child td{border-bottom:0}

@media (max-width:759px){
  .cmp-t,.cmp-t thead,.cmp-t tbody,.cmp-t tr,.cmp-t th,.cmp-t td{display:block}
  .cmp-t thead{display:none}                    /* the labels move onto each cell */
  .cmp-t{display:grid;gap:14px}
  .cmp-t tbody{display:grid;gap:14px}
  .cmp-t tr{border:2.5px solid #fff;padding:14px 16px;background:rgba(255,255,255,.04)}
  .cmp-t tbody th{
    font-size:.68rem;letter-spacing:.16em;color:var(--royal-soft);
    border-bottom:1px solid rgba(255,255,255,.18);padding:0 0 .5rem;margin-bottom:.55rem
  }
  .cmp-t td{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    padding:.32rem 0;border-bottom:0;text-align:right
  }
  .cmp-t td::before{
    content:attr(data-l);font-family:var(--f-label);font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;font-size:.62rem;color:var(--inv-mute);text-align:left;flex:none
  }
}

/* ---------- mobile: show less, not smaller --------------------------------
   The homepage is meant to be a quick read and it ran to nearly 15 screens on
   a phone. Cutting words barely touched that — the height is cards, not copy.
   So on small screens each section shows a short list and the button under it
   (which was always there) does the rest. Everything stays in the markup, so
   nothing is hidden from search or from anyone on a wider screen.
   ------------------------------------------------------------------------- */
@media (max-width:700px){
  .sec{padding-block:44px}
  .home-brief .bento > :nth-child(n+4){display:none}
  .home-brief .revs > :nth-child(n+3){display:none}
}

/* ═══════ BOOKING: rego, photos, consents ═══════ */
.opt-lbl{font-weight:400;color:var(--text-mute)}
.field.half{max-width:220px}
.ph-drop{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  border:1px dashed var(--line-strong);border-radius:10px;padding:.85rem 1rem;background:var(--surface-2)}
.ph-drop.over{border-color:var(--brand);background:var(--brand-tint)}
.ph-note{font-size:.84rem;color:var(--text-mute);flex:1 1 12rem;min-width:0}
.btn-sm{padding:.45rem .9rem;font-size:.86rem}
.ph-list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.6rem}
.ph-list li{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line)}
.ph-list img{width:100%;height:100%;object-fit:cover;display:block}
.ph-list .ph-x{position:absolute;top:4px;right:4px;width:22px;height:22px;border:none;cursor:pointer;
  border-radius:50%;background:rgba(15,17,20,.72);color:#fff;font-size:14px;line-height:1;
  display:grid;place-content:center;padding:0}
.ph-list .ph-x:hover{background:rgba(15,17,20,.9)}
.ph-list .ph-sz{position:absolute;left:0;right:0;bottom:0;font-size:.66rem;letter-spacing:.02em;
  padding:2px 5px;background:rgba(15,17,20,.62);color:#fff;text-align:right;pointer-events:none}

/* The thumbnail is a button now, so it can be reached by keyboard and says
   what it is to a screen reader. It has to look like exactly what it looked
   like before. */
.ph-list .ph-open{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  padding:0;margin:0;border:0;background:none;cursor:zoom-in;font:inherit
}
.ph-list .ph-open:focus-visible{outline:3px solid var(--royal);outline-offset:-3px}

/* ---------- checking a photo before it is sent --------------------------
   84px of a 4:3 crop does not tell you which wheel you photographed, and
   the whole point of sending one is that it shows the right thing. */
.ph-view{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;padding:var(--pad)}
.ph-view[hidden]{display:none}
.ph-view-bd{position:absolute;inset:0;background:rgba(4,16,30,.88);backdrop-filter:blur(6px);border:0;cursor:zoom-out}
.ph-view-fig{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem;min-height:0}
.ph-view-fig img{max-width:min(900px,100%);max-height:70vh;object-fit:contain;
  border-radius:4px;background:#0b1626;display:block}
.ph-view-fig figcaption{color:rgba(255,255,255,.76);font-size:.84rem}
.ph-view-bar{position:relative;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.ph-view-bar .btn{background:#fff;border-color:#fff;color:var(--ink)}
.ph-view-bar .ph-view-del{background:none;color:#fff;border-color:rgba(255,255,255,.5)}
.ph-view-bar .ph-view-del:hover{background:rgba(255,255,255,.12)}
/* Nothing behind it scrolls while it is open. */
body.ph-viewing{overflow:hidden}
.consents{display:grid;gap:.7rem}
.consents .opt.cb{align-items:flex-start}
.consents .otxt span{display:block;font-size:.84rem;color:var(--text-mute);margin-top:.2rem;line-height:1.45}
#optMarketing{border-style:dashed}
@media (max-width:520px){ .field.half{max-width:none} }

/* ═══════ BOOKING: enquiry-only services ═══════ */
.enq-panel{padding:.2rem 0 .4rem}
.enq-panel h2{margin:0 0 .5rem}
.enq-panel p{max-width:60ch}
.bk-nav-enq{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.bk-pane.enquiry > :not(.enq-panel):not(.bk-nav-enq){display:none}
.bk-pane.enquiry .enq-panel{display:block}

/* ═══════ Durability + CGA note ═══════ */
.durability-note{margin:2.4rem 0 0;padding:1.3rem 1.5rem;background:var(--chrome-2);
  border-left:4px solid var(--royal);border-radius:var(--r-s)}
.durability-note h3{margin:0 0 .55rem;font-size:1.05rem}
.durability-note p{margin:0 0 .7rem;font-size:.92rem;line-height:1.62;color:var(--text-mute);max-width:70ch}
.durability-note p:last-child{margin-bottom:0}

/* /booking-return — the page Stripe sends people back to after a deposit.
   Deliberately plain: one card, one message, nothing to click by mistake
   while somebody is working out whether their money went where they meant. */
.rt-spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--royal);
  border-radius:50%;animation:spin .8s linear infinite}
.rt-tick{width:46px;height:46px;border-radius:50%;background:var(--royal);color:#fff;
  display:grid;place-items:center}
.rt-tick svg{width:24px;height:24px}
@media (prefers-reduced-motion:reduce){.rt-spin{animation-duration:2.4s}}