/* ==========================================================================
   Bradford Legend Detailing
   Mobile-first stylesheet. Tokens inherited from the brand design system.
   Radius rule: controls = pill, cards = 14px, media = 8px. Applied everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, self-hosted from assets/fonts/.
   Both families are variable, so one file covers every weight the site uses
   (Montserrat 400-900, Playfair 400-700) instead of one file per weight.
   Served from our own origin: no Google Fonts request, no third-party
   connection on first paint, and nothing about visitors leaves the site.
   Montserrat and Playfair Display are both SIL Open Font License 1.1, which
   permits self-hosting and redistribution. See assets/fonts/OFL.txt.
   latin-ext is listed first so latin wins for the characters they share.
   -------------------------------------------------------------------------- */

@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(assets/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat'; font-style:italic; font-weight:400 900; font-display:swap;
  src:url(assets/fonts/montserrat-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat'; font-style:italic; font-weight:400 900; font-display:swap;
  src:url(assets/fonts/montserrat-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(assets/fonts/playfair-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(assets/fonts/playfair-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(assets/fonts/playfair-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(assets/fonts/playfair-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Brand palette */
  --navy-900:#0B0A07;
  --navy-800:#0A1723;
  --navy-700:#0E1F31;
  --navy-600:#132B44;
  --navy-500:#1B3A5B;
  --gold-400:#D4B671;
  --gold-300:#E3CE9C;
  /* Darkened from #8F7332, which measured 3.77:1 on the off-white page and
     failed WCAG AA for body text. This is the same hue, 14% darker: 4.80:1 on
     the page background and 5.73:1 on cards. It is the link colour, so it sits
     on both surfaces and has to clear AA on the worse of the two. */
  --gold-600:#7B632B;
  --blue-400:#68B2CB;
  --neutral-500:#9F9E9A;
  --offwhite-100:#E9ECE5;
  --white:#FFFFFF;

  /* Surfaces */
  --surface-page:var(--offwhite-100);
  --surface-card:var(--white);
  --surface-muted:#DFE3DA;
  --surface-inverse:var(--navy-700);
  --surface-inverse-deep:var(--navy-900);

  /* Text. Muted is tuned to clear 4.5:1 on all three light surfaces. */
  --text-heading:var(--navy-700);
  --text-body:#39444F;
  --text-muted:#555F6C;
  --text-on-inverse:var(--offwhite-100);
  --text-on-inverse-soft:#B9BFB6;
  --text-on-inverse-strong:var(--white);
  --text-on-gold:var(--navy-900);

  /* Lines */
  --border-hairline:rgba(14,31,49,.14);
  --border-strong:rgba(14,31,49,.30);
  --border-on-inverse:rgba(233,236,229,.20);

  /* Overlays */
  --scrim-media:linear-gradient(180deg,rgba(11,10,7,0) 0%,rgba(11,10,7,.86) 82%);

  /* Elevation. Every shadow carries offset + blur, tinted to the surface hue. */
  --shadow-sm:0 1px 2px rgba(14,31,49,.10);
  --shadow-card:0 8px 24px rgba(14,31,49,.10);
  --shadow-raised:0 16px 44px rgba(14,31,49,.18);
  --shadow-media:0 22px 56px rgba(11,10,7,.34);
  --focus-ring:0 0 0 3px rgba(104,178,203,.55);

  /* Type */
  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-body:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-ui:"Montserrat","Helvetica Neue",Arial,sans-serif;

  --size-display-1:clamp(2.6rem,10vw,5.75rem);
  --size-display-2:clamp(2.1rem,7.6vw,4rem);
  --size-display-3:clamp(1.7rem,5.4vw,2.5rem);
  --size-heading:clamp(1.2rem,3.4vw,1.5rem);
  --size-body-lg:clamp(1rem,2.4vw,1.125rem);
  --size-body:1rem;
  --size-body-sm:.9375rem;
  --size-label:.75rem;
  --size-label-sm:.6875rem;

  --lh-display:.94;
  --lh-heading:1.12;
  --lh-body:1.62;

  --track-display:-.022em;
  --track-label:.15em;
  --track-nav:.05em;

  /* Spacing */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:44px; --space-8:64px; --space-9:88px;

  --gutter:clamp(20px,5vw,40px);
  --section-y:clamp(56px,9vw,104px);
  --container-max:1240px;
  --header-h:60px;

  /* Radii */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-xl:22px;
  --radius-pill:999px;
  --radius-card:var(--radius-lg);
  --radius-media:var(--radius-md);
  --radius-control:var(--radius-pill);

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:150ms;
  --dur-base:260ms;
  --dur-slow:520ms;
  --transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}

@media (min-width:768px){ :root{ --header-h:72px; } }

/* ---------- Reset ---------- */

*,*::before,*::after{box-sizing:border-box}

/* The browser's own [hidden]{display:none} is only as specific as a class, so
   any rule here that sets `display` silently beats it and `el.hidden = true`
   stops working. That is what left the booking spinner turning on top of a
   calendar that had already loaded. Make the attribute win everywhere. */
[hidden]{display:none!important}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--gold-600) var(--navy-900);
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:900;
  color:var(--text-heading);
  letter-spacing:var(--track-display);
  line-height:var(--lh-heading);
  text-transform:uppercase;
  text-wrap:balance;
  margin:0;
}
h1{font-size:var(--size-display-2);line-height:var(--lh-display)}
h2{font-size:var(--size-display-3)}
h3{font-size:var(--size-heading)}

p{margin:0;text-wrap:pretty}

a{color:var(--gold-600);text-decoration:none;text-underline-offset:.18em}
a:hover{color:var(--text-heading)}

img,video{display:block;max-width:100%;-webkit-user-drag:none;-webkit-touch-callout:none}

input,select,textarea,button{font-family:var(--font-ui);font-size:1rem}
button{color:inherit}

::selection{background:var(--gold-400);color:var(--navy-900)}

:focus-visible{
  outline:2px solid var(--blue-400);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--navy-900)}
::-webkit-scrollbar-thumb{background:var(--gold-600);border-radius:var(--radius-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-400)}

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

.skip-link{
  position:absolute;top:-100px;left:var(--space-4);z-index:200;
  display:inline-flex;align-items:center;min-height:44px;
  background:var(--gold-400);color:var(--navy-900);
  padding:12px 20px;border-radius:var(--radius-pill);
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:var(--space-3);color:var(--navy-900)}

/* ---------- Layout primitives ---------- */

.container{width:100%;max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section-tight{padding-block:clamp(40px,7vw,72px)}

.lede{
  font-family:var(--font-body);
  font-size:var(--size-body-lg);
  line-height:var(--lh-body);
  color:var(--text-body);
  max-width:62ch;
}
.lede-inverse{color:var(--text-on-inverse)}
.body-sm{font-size:var(--size-body-sm);line-height:var(--lh-body);color:var(--text-muted);max-width:62ch}

/* Inline text button that reads as a link inside body copy. */
.link-inline{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--gold-600);
  text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;
  transition:color var(--dur-fast) var(--ease-out);
}
.link-inline:hover{color:var(--text-heading)}

.stack-4 > * + *{margin-top:var(--space-4)}
.stack-5 > * + *{margin-top:var(--space-5)}
.stack-6 > * + *{margin-top:var(--space-6)}

.accent{color:var(--gold-400)}
.accent-dark{color:var(--gold-600)}

.section-head{max-width:44ch}
.section-head h2{margin:0}
.section-head p{margin-top:var(--space-4)}

/* ---------- Motion ---------- */

@keyframes blRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blFade{from{opacity:0}to{opacity:1}}
@keyframes blDrift{from{transform:scale(1.04)}to{transform:scale(1.13)}}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Content is visible by default; only JS-enabled sessions stage the entrance. */
.js [data-reveal]{opacity:0}
.js [data-reveal].in{animation:blRise 620ms var(--ease-out) var(--reveal-delay,0ms) both}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;animation:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:44px;
  font-family:var(--font-ui);font-weight:700;letter-spacing:var(--track-nav);
  text-transform:uppercase;text-decoration:none;white-space:nowrap;line-height:1;
  border:1px solid transparent;border-radius:var(--radius-control);
  cursor:pointer;transition:var(--transition-control);
}
.btn-sm{font-size:var(--size-label-sm);padding:10px 18px}
.btn-md{font-size:var(--size-label);padding:13px 24px}
.btn-lg{font-size:var(--size-body-sm);padding:16px 30px;min-height:52px}
.btn-full{width:100%}

/* A button never sets the width of the page. `white-space:nowrap` above keeps
   labels on one line where there is room, but on the narrowest phones a long
   label ("Leave a Google review" at large size is 284px) would otherwise push
   the whole document wider and create a horizontal scroll. Below that width
   the label wraps instead. */
.btn{max-width:100%}
@media (max-width:400px){
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .btn-lg{padding-inline:20px}
}

.btn-primary{background:var(--gold-400);color:var(--text-on-gold)}
.btn-primary:hover{background:var(--gold-300);color:var(--text-on-gold)}
.btn-secondary{background:var(--navy-700);color:var(--text-on-inverse-strong)}
.btn-secondary:hover{background:var(--navy-600);color:var(--text-on-inverse-strong)}
.btn-outline{background:transparent;color:var(--navy-700);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--navy-700);background:var(--navy-700);color:var(--offwhite-100)}
.btn-ghost-inverse{background:rgba(11,10,7,.28);color:var(--text-on-inverse-strong);border-color:var(--border-on-inverse)}
.btn-ghost-inverse:hover{border-color:var(--gold-400);color:var(--gold-400);background:rgba(11,10,7,.45)}
.btn:active{transform:scale(.975)}

/* ---------- Badge ---------- */

.badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;
  padding:7px 14px;border-radius:var(--radius-pill);border:1px solid transparent;
}
.badge-gold{background:var(--gold-400);color:var(--navy-900)}
.badge-navy{background:var(--navy-900);color:var(--offwhite-100)}
.badge-outline{background:transparent;color:var(--navy-700);border-color:var(--border-strong)}
.badge-outline-gold{background:rgba(11,10,7,.35);color:var(--gold-400);border-color:var(--gold-400)}

/* ---------- Header ---------- */

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(11,10,7,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-on-inverse);
  padding-top:env(safe-area-inset-top);
}
@supports not (backdrop-filter:blur(1px)){ .site-header{background:var(--navy-900)} }

.header-inner{
  max-width:var(--container-max);margin:0 auto;
  padding-inline:var(--gutter);
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}

.brand{
  display:flex;align-items:center;gap:10px;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
}
.brand-mark{
  width:36px;height:36px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--navy-900);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(212,182,113,.35);
}
.brand-mark img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.brand-mark-lg{width:52px;height:52px}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{
  font-family:var(--font-display);font-weight:900;font-size:.8rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--offwhite-100);
}
.brand-sub{font-family:var(--font-body);font-style:italic;font-size:.72rem;color:var(--gold-400)}

.nav-desktop{display:none}

/* header-actions: on mobile this shows just the Book button (a persistent,
   low-friction CTA next to the hamburger); the phone link joins it at
   desktop width, where there's room for both. */
.header-actions{display:flex;align-items:center;gap:var(--space-3)}
.nav-phone{display:none}

.nav-toggle{
  display:grid;place-items:center;
  width:44px;height:44px;flex:none;margin-right:-8px;
  background:transparent;border:1px solid var(--border-on-inverse);
  border-radius:var(--radius-pill);color:var(--offwhite-100);
  cursor:pointer;transition:var(--transition-control);
}
.nav-toggle:hover{border-color:var(--gold-400);color:var(--gold-400)}

@media (min-width:940px){
  .nav-toggle{display:none}
  .nav-desktop{display:flex;align-items:center;gap:var(--space-6)}
  .header-actions{gap:var(--space-4)}
  .nav-phone{display:inline-flex}
  .brand-name{font-size:.9rem}
  .brand-sub{font-size:.78rem}
  .brand-mark{width:40px;height:40px}
}

.nav-link{
  position:relative;background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--font-ui);font-weight:700;font-size:.78rem;
  letter-spacing:var(--track-nav);text-transform:uppercase;
  color:var(--text-on-inverse);transition:color var(--dur-fast) var(--ease-out);
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold-400);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav-link:hover{color:var(--gold-400)}
.nav-link[aria-current="page"]{color:var(--gold-400)}
.nav-link[aria-current="page"]::after,.nav-link:hover::after{transform:scaleX(1)}

.nav-phone{
  /* display is set responsively above (none on mobile, inline-flex from 940px) */
  align-items:center;gap:7px;min-height:32px;
  font-family:var(--font-ui);font-weight:700;font-size:.78rem;
  letter-spacing:var(--track-nav);color:var(--text-on-inverse-soft);
}
.nav-phone:hover{color:var(--gold-400)}

/* ---------- Mobile drawer ---------- */

.nav-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(11,10,7,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:blFade var(--dur-base) var(--ease-out) both;
}

.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(88vw,360px);
  background:var(--navy-900);
  border-left:1px solid var(--border-on-inverse);
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + var(--space-5)) var(--space-5) calc(env(safe-area-inset-bottom) + var(--space-6));
  transform:translateX(102%);
  transition:transform var(--dur-base) var(--ease-out);
  visibility:hidden;
}
.nav-drawer.open{transform:none;visibility:visible}

.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.nav-drawer-title{
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-on-inverse-soft);
}
.nav-close{
  display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;
  background:transparent;border:1px solid var(--border-on-inverse);
  border-radius:var(--radius-pill);color:var(--offwhite-100);cursor:pointer;
  transition:var(--transition-control);
}
.nav-close:hover{border-color:var(--gold-400);color:var(--gold-400)}

.nav-drawer-links{display:flex;flex-direction:column}
.nav-drawer-links button{
  background:none;border:0;border-bottom:1px solid var(--border-on-inverse);
  padding:var(--space-5) 0;text-align:left;cursor:pointer;
  font-family:var(--font-display);font-weight:900;font-size:1.35rem;
  letter-spacing:var(--track-display);text-transform:uppercase;
  color:var(--offwhite-100);transition:color var(--dur-fast) var(--ease-out);
}
.nav-drawer-links button:hover,.nav-drawer-links button[aria-current="page"]{color:var(--gold-400)}

.nav-drawer-foot{margin-top:auto;padding-top:var(--space-6);display:grid;gap:var(--space-4)}
.drawer-phone{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--font-display);font-weight:900;font-size:1.05rem;
  letter-spacing:var(--track-display);color:var(--offwhite-100);
}
.drawer-phone:hover{color:var(--gold-400)}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:clamp(560px,86svh,780px);
  display:flex;align-items:flex-end;
  background:var(--navy-900);
  overflow:hidden;
  padding-top:calc(var(--header-h) + env(safe-area-inset-top));
}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media video,.hero-media img{
  width:100%;height:100%;object-fit:cover;
  animation:blDrift 22s var(--ease-out) both alternate infinite;
}
@media (prefers-reduced-motion:reduce){ .hero-media video,.hero-media img{animation:none} }

.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,10,7,.72) 0%,rgba(11,10,7,.30) 32%,rgba(11,10,7,.88) 100%),
    linear-gradient(96deg,rgba(11,10,7,.80) 0%,rgba(11,10,7,.32) 62%,rgba(11,10,7,.10) 100%);
}
.hero-inner{position:relative;width:100%;padding-block:var(--space-8)}
.hero-copy{max-width:min(100%,32rem)}
.hero-badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hero h1{
  color:var(--text-on-inverse-strong);
  font-size:var(--size-display-2);
  margin-top:var(--space-5);
}
.hero-lede{
  margin-top:var(--space-5);
  font-family:var(--font-body);font-size:var(--size-body-lg);line-height:var(--lh-body);
  color:var(--text-on-inverse);max-width:34ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7)}
.hero-actions .btn{flex:1 1 auto;min-width:11rem}
@media (min-width:600px){ .hero-actions .btn{flex:0 0 auto} }

.js .hero-stage > *{animation:blRise 760ms var(--ease-out) both}
.js .hero-stage > *:nth-child(1){animation-delay:80ms}
.js .hero-stage > *:nth-child(2){animation-delay:180ms}
.js .hero-stage > *:nth-child(3){animation-delay:280ms}
.js .hero-stage > *:nth-child(4){animation-delay:380ms}

/* ---------- Marquee ticker (one per page) ---------- */

.ticker{
  background:var(--navy-900);
  border-block:1px solid var(--border-on-inverse);
  overflow:hidden;
}
.ticker-track{display:flex;width:max-content;animation:marqueeScroll var(--marquee-dur,30s) linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .ticker{overflow-x:auto}
}
.ticker-group{display:flex;align-items:center}
.ticker-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) 0;white-space:nowrap}
.ticker-value{
  font-family:var(--font-display);font-weight:900;font-size:.95rem;
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--gold-400);
}
.ticker-label{
  font-family:var(--font-ui);font-weight:600;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-on-inverse-soft);
}
.ticker-rule{width:34px;height:1px;background:var(--border-on-inverse);margin-inline:var(--space-5);flex:none}

/* ---------- Before / after ---------- */

.ba{
  position:relative;width:100%;max-width:520px;margin-inline:auto;
  aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-media);
  box-shadow:var(--shadow-media);
  cursor:ew-resize;
  touch-action:pan-y;              /* vertical scroll stays with the page */
  user-select:none;-webkit-user-select:none;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0);will-change:clip-path}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:var(--offwhite-100);pointer-events:none;
  box-shadow:0 0 12px rgba(11,10,7,.5);
}
.ba-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:var(--offwhite-100);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;gap:2px;
  box-shadow:var(--shadow-media);
}
.ba-tag{position:absolute;top:var(--space-4);pointer-events:none}
.ba-tag-before{left:var(--space-4)}
.ba-tag-after{right:var(--space-4)}
.ba-hint{
  margin-top:var(--space-4);text-align:center;
  font-family:var(--font-ui);font-weight:600;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-on-inverse-soft);
}

/* ---------- Media tiles ---------- */

.media-frame{position:relative;overflow:hidden;border-radius:var(--radius-media);background:var(--navy-800)}
.media-frame img,.media-frame video{width:100%;height:100%;object-fit:cover}
@media (hover:hover){
  .media-frame img,.media-frame video{transition:transform var(--dur-slow) var(--ease-out)}
  .media-frame:hover img,.media-frame:hover video{transform:scale(1.04)}
}

.split-panel{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.split-panel > div{position:relative;overflow:hidden}
.split-panel img{width:100%;height:100%;object-fit:cover}
.split-rule{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--offwhite-100);z-index:2}

.video-tile{position:relative;border-radius:var(--radius-media);overflow:hidden;background:var(--navy-800)}
.video-tile video{width:100%;height:100%;object-fit:cover}
.sound-toggle{
  position:absolute;right:8px;bottom:8px;z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--border-on-inverse);
  background:rgba(11,10,7,.6);color:var(--offwhite-100);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  cursor:pointer;transition:var(--transition-control);
}
.sound-toggle:hover,.sound-toggle[data-on="true"]{border-color:var(--gold-400);color:var(--gold-400)}

.media-caption{
  margin-top:var(--space-3);
  font-family:var(--font-ui);font-weight:600;font-size:var(--size-label-sm);
  letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--text-muted);
}
.media-caption-inverse{color:var(--text-on-inverse-soft)}

/* ---------- Pricing ---------- */

.pricing-grid{display:grid;gap:var(--space-5)}
@media (min-width:860px){
  .pricing-grid{grid-template-columns:repeat(3,1fr);align-items:center;gap:var(--space-4)}
}

.tier{
  position:relative;height:100%;
  display:flex;flex-direction:column;gap:var(--space-5);
  background:var(--surface-card);color:var(--text-heading);
  border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  padding:var(--space-6);box-shadow:var(--shadow-card);
  text-align:left;width:100%;cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
@media (hover:hover){ .tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised)} }
.tier:active{transform:scale(.99)}

.tier-featured{
  background:var(--navy-700);color:var(--text-on-inverse-strong);
  border-color:var(--gold-400);
  box-shadow:0 0 0 1px rgba(212,182,113,.35),var(--shadow-raised);
}
@media (min-width:860px){
  .tier-featured{transform:scale(1.045)}
  @media (hover:hover){ .tier-featured:hover{transform:scale(1.045) translateY(-4px)} }
}

.tier-ribbon{
  position:absolute;top:0;left:var(--space-6);transform:translateY(-50%);
  background:var(--gold-400);color:var(--navy-900);
  font-family:var(--font-ui);font-weight:800;font-size:.62rem;
  letter-spacing:var(--track-label);text-transform:uppercase;
  padding:6px 14px;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);
}

.tier-name{
  font-family:var(--font-display);font-weight:900;font-size:1.05rem;
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--text-heading);
}
.tier-featured .tier-name{color:var(--gold-400)}
.tier-blurb{font-family:var(--font-body);font-size:var(--size-body-sm);line-height:1.55;color:var(--text-muted)}
.tier-featured .tier-blurb{color:var(--text-on-inverse)}

.tier-price{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.tier-price b{
  font-family:var(--font-display);font-weight:900;font-size:2.6rem;line-height:1;
  color:var(--navy-700);letter-spacing:var(--track-display);
}
.tier-featured .tier-price b{color:var(--gold-400)}
.tier-price span{
  font-family:var(--font-ui);font-weight:600;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);
}
.tier-featured .tier-price span{color:var(--text-on-inverse-soft)}

.tier-scale{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--border-hairline);border-radius:var(--radius-md);overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.tier-featured .tier-scale{border-color:rgba(212,182,113,.34)}
.tier-scale div{
  padding:10px 6px;text-align:center;display:flex;flex-direction:column;gap:3px;
  border-right:1px solid var(--border-hairline);
}
.tier-scale div:last-child{border-right:0}
.tier-featured .tier-scale div{border-right-color:rgba(212,182,113,.34)}
.tier-scale dt{
  font-family:var(--font-ui);font-weight:700;font-size:.6rem;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);margin:0;
}
.tier-featured .tier-scale dt{color:var(--text-on-inverse-soft)}
.tier-scale dd{
  margin:0;font-family:var(--font-display);font-weight:900;font-size:1rem;color:var(--navy-700);
}
.tier-featured .tier-scale dd{color:var(--gold-400)}

.tier-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tier-list li{
  display:flex;gap:10px;align-items:flex-start;
  font-family:var(--font-body);font-size:var(--size-body-sm);line-height:1.5;
}
.tier-list svg{flex:none;margin-top:3px;stroke:var(--gold-600)}
.tier-featured .tier-list svg{stroke:var(--gold-400)}

.tier-save{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-weight:700;font-size:.7rem;
  letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--gold-400);
}
.tier-save svg{flex:none;stroke:currentColor}

.tier-cta{
  margin-top:auto;text-align:center;
  background:var(--navy-700);color:var(--offwhite-100);
  border-radius:var(--radius-pill);padding:14px 20px;
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  transition:var(--transition-control);
}
.tier-featured .tier-cta{background:var(--gold-400);color:var(--navy-900)}
.tier:hover .tier-cta{background:var(--gold-400);color:var(--navy-900)}
.tier-featured:hover .tier-cta{background:var(--gold-300)}

/* ---------- Vehicle picker (interactive pricing by vehicle type) ---------- */

.vehicle-picker{margin-top:var(--space-8)}

/* ---------- Vehicle picker ----------
   A native select, deliberately. On a phone it opens the operating system's
   own wheel or list, which is faster and more familiar than anything that
   could be built here, needs no JavaScript to render, and costs one row of
   height instead of a third of the screen. */

.vehicle-select-row{
  display:grid;gap:var(--space-3);
  margin-bottom:var(--space-6);
}
@media (min-width:600px){
  .vehicle-select-row{
    grid-template-columns:auto minmax(0,320px);
    align-items:center;gap:var(--space-4);
  }
}

.vehicle-select-label{
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);
}

.vehicle-select-wrap{position:relative;display:block}

.vehicle-select{
  appearance:none;-webkit-appearance:none;
  width:100%;min-height:52px;
  padding:14px 46px 14px 20px;
  background:var(--surface-card);
  border:1px solid var(--border-strong);border-radius:var(--radius-pill);
  color:var(--text-heading);cursor:pointer;
  font-family:var(--font-ui);font-weight:700;font-size:.95rem;
  letter-spacing:var(--track-nav);
  transition:var(--transition-control);
}
.vehicle-select:hover{border-color:var(--navy-700)}
.vehicle-select:focus-visible{border-color:var(--blue-400);box-shadow:var(--focus-ring);outline:none}

/* Sits above the select and must not swallow the click that opens it. */
.vehicle-select-chevron{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  color:var(--gold-600);pointer-events:none;
}

.vehicle-panel .pricing-grid{
  transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);
}
.vehicle-panel .pricing-grid.is-swapping{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){
  .vehicle-panel .pricing-grid{transition:none}
}

/* How long the job takes, next to what it costs. */
.tier-time{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:var(--space-2);
  font-family:var(--font-ui);font-weight:700;font-size:.78rem;
  letter-spacing:var(--track-nav);color:var(--text-muted);
}
.tier-time svg{flex:none;color:var(--gold-600)}
.tier-featured .tier-time{color:var(--text-on-inverse-soft)}
.tier-featured .tier-time svg{color:var(--gold-400)}

/* ---------- Condition surcharges ---------- */

.addons{
  list-style:none;margin:var(--space-5) 0 0;padding:0;
  display:grid;gap:0;max-width:44rem;
  border-top:1px solid var(--border-hairline);
}
.addons li{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) 0;border-bottom:1px solid var(--border-hairline);
}
.addon-name{
  font-family:var(--font-ui);font-weight:700;font-size:.84rem;
  letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--text-heading);
}
.addon-price{
  font-family:var(--font-display);font-weight:900;font-size:1.1rem;
  color:var(--gold-600);font-variant-numeric:tabular-nums;
}

/* ---------- Meet the owner ---------- */

.who-grid{display:grid;gap:var(--space-7)}
@media (min-width:820px){
  .who-grid{
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    gap:var(--space-8);align-items:center;
  }
}
/* The source photo is a phone snapshot, so it is capped rather than stretched:
   blown up past its own resolution it would look worse, not bigger. */
.who-portrait{aspect-ratio:3/4;max-width:420px;width:100%}
@media (min-width:820px){ .who-portrait{max-width:none} }

.who-name{
  margin-top:var(--space-6);
  font-family:var(--font-display);font-weight:900;font-size:.8rem;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-heading);
}
.who-role{font-family:var(--font-body);font-style:italic;color:var(--text-muted)}

/* ---------- Reasons (no cards: hairlines and space) ---------- */

.reasons{display:grid;gap:0;margin-top:var(--space-7)}
@media (min-width:760px){ .reasons{grid-template-columns:1fr 1fr;column-gap:var(--space-8)} }

.reason{padding-block:var(--space-6);border-top:1px solid var(--border-hairline)}
.reason h3{
  display:flex;align-items:center;gap:10px;
  font-size:1rem;font-weight:800;color:var(--text-heading);
}
.reason h3 svg{flex:none;stroke:var(--gold-600)}
.reason p{margin-top:10px;font-family:var(--font-body);font-size:var(--size-body-sm);line-height:1.6;color:var(--text-muted)}

/* ---------- Reviews ---------- */

.review{
  display:flex;flex-direction:column;gap:var(--space-4);
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-card);padding:var(--space-6);box-shadow:var(--shadow-card);
}
.stars{display:flex;gap:3px;color:var(--gold-400)}
.review blockquote{
  margin:0;font-family:var(--font-body);font-style:italic;
  font-size:1.02rem;line-height:1.55;color:var(--text-body);
}
.review figcaption{margin-top:auto;display:flex;flex-direction:column;gap:3px}
.review-name{
  font-family:var(--font-ui);font-weight:700;font-size:.82rem;
  letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--text-heading);
}
.review-meta{font-family:var(--font-body);font-size:var(--size-body-sm);color:var(--text-muted)}

/* Two reviews side by side on the home page, stacked on a phone. Equal height
   so the attributions line up, which is why .review uses margin-top:auto on
   the figcaption. */
.review-pair{display:grid;gap:var(--space-4);margin-top:var(--space-6)}
@media (min-width:860px){ .review-pair{grid-template-columns:1fr 1fr;gap:var(--space-5)} }

/* Full reviews on the reviews page: one column, generous measure, because
   these run to several paragraphs and readability beats density. */
.review-stack{display:grid;gap:var(--space-5);margin-top:var(--space-6)}

/* A review given room to hold the space on its own, with a larger quote than
   a card in a tight row would carry. */
.review-featured{
  max-width:64ch;
  padding:var(--space-6);
}
@media (min-width:700px){ .review-featured{padding:var(--space-7)} }
.review-featured blockquote{font-size:1.1rem;line-height:1.6}
@media (min-width:700px){ .review-featured blockquote{font-size:1.2rem} }
.review-full blockquote p + p{margin-top:var(--space-4)}

/* ---------- Service map ---------- */

.map-wrap{position:relative;border-radius:var(--radius-media);overflow:hidden;box-shadow:var(--shadow-raised)}
#service-map{height:clamp(340px,52vw,520px);width:100%;background:var(--navy-600);font-family:var(--font-ui)}
.map-gate{
  position:absolute;inset:0;z-index:500;display:grid;place-items:center;
  background:rgba(11,10,7,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  border:0;width:100%;cursor:pointer;
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--offwhite-100);
}
.map-gate span{
  background:var(--navy-900);border:1px solid var(--gold-400);color:var(--gold-400);
  padding:13px 22px;border-radius:var(--radius-pill);
}
/* Service-area key sits ABOVE the map so it never covers it on small screens. */
.map-key{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.map-key-dot{width:12px;height:12px;border-radius:50%;background:var(--gold-400);flex:none;border:2px solid var(--navy-900)}
.map-key-label{
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold-400);
  margin-right:var(--space-2);
}
.map-key-town{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-ui);font-weight:600;font-size:.78rem;
  letter-spacing:var(--track-nav);color:var(--text-on-inverse);
  border:1px solid var(--border-on-inverse);border-radius:var(--radius-pill);
  padding:6px 16px;
}
.leaflet-tooltip.map-town{
  background:var(--navy-900);color:var(--offwhite-100);border:1px solid var(--gold-400);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
  font-family:var(--font-ui);font-weight:700;font-size:.66rem;
  letter-spacing:var(--track-nav);text-transform:uppercase;padding:3px 8px;
}
.leaflet-tooltip.map-town::before{border-top-color:var(--gold-400)}
.leaflet-control-zoom a{
  color:var(--navy-700)!important;
  width:40px!important;height:40px!important;line-height:40px!important;
  font-size:20px!important;
}
.leaflet-control-attribution{font-family:var(--font-ui);font-size:10px}

/* ---------- Steps ---------- */

.steps{display:grid;gap:0;margin-top:var(--space-7);counter-reset:step}
@media (min-width:820px){ .steps{grid-template-columns:repeat(4,1fr);gap:var(--space-6)} }
.step{
  position:relative;padding-block:var(--space-5);
  border-top:1px solid var(--border-hairline);
}
@media (min-width:820px){ .step{padding-block:var(--space-5) 0} }
.step-n{
  font-family:var(--font-display);font-weight:900;font-size:.7rem;
  letter-spacing:var(--track-label);color:var(--gold-600);
  font-variant-numeric:tabular-nums;
}
.step h3{margin-top:10px;font-size:.95rem;font-weight:800}
.step p{margin-top:8px;font-family:var(--font-body);font-size:var(--size-body-sm);line-height:1.55;color:var(--text-muted)}
.step-inverse{border-top-color:var(--border-on-inverse)}
.step-inverse h3{color:var(--text-on-inverse-strong)}
.step-inverse p{color:var(--text-on-inverse-soft)}
.step-inverse .step-n{color:var(--gold-400)}

/* ---------- Services page rows ---------- */

.svc-row{border-top:1px solid var(--border-hairline)}
.svc-row:first-child{border-top:0}
.svc-inner{display:grid;gap:var(--space-6);padding-block:var(--section-y)}
@media (min-width:900px){
  .svc-inner{grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}
  .svc-row:nth-child(even) .svc-media{order:2}
}
.svc-media{position:relative;aspect-ratio:4/3;border-radius:var(--radius-media);overflow:hidden;box-shadow:var(--shadow-card)}
.svc-prices{display:grid;gap:var(--space-3);margin-top:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.svc-price{
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-card);padding:var(--space-4);font-variant-numeric:tabular-nums;
}
.svc-price dt{
  margin:0;font-family:var(--font-ui);font-weight:700;font-size:.62rem;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);
}
.svc-price dd{
  margin:6px 0 0;font-family:var(--font-display);font-weight:900;font-size:1.5rem;color:var(--navy-700);
}
.svc-includes{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:10px}
.svc-includes li{
  display:flex;gap:10px;align-items:flex-start;
  font-family:var(--font-body);font-size:var(--size-body);line-height:1.5;color:var(--text-body);
}
.svc-includes svg{flex:none;margin-top:4px;stroke:var(--gold-600)}

/* ---------- Gallery ---------- */

.gallery-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .gallery-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-4)} }
.gallery-grid .media-frame{aspect-ratio:3/4}
.gallery-grid .g-wide{grid-column:span 2;aspect-ratio:3/2}
@media (min-width:760px){ .gallery-grid .g-wide{aspect-ratio:16/9} }

.video-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .video-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-4)} }
.video-grid .video-tile{aspect-ratio:3/4}
/* The gallery carries six clips rather than four, so three across leaves two
   even rows instead of a row of four and an orphaned pair. */
@media (min-width:900px){ .video-grid-3{grid-template-columns:repeat(3,1fr)} }

/* ---------- Booking form ---------- */

.book-layout{display:grid;gap:var(--space-8)}
@media (min-width:940px){ .book-layout{grid-template-columns:1fr 1.05fr;gap:var(--space-9);align-items:start} }

.book-card{
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
  padding:var(--space-6);
}
@media (min-width:600px){ .book-card{padding:var(--space-7)} }

.field-label{
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);
}

/* The embed container. Height is normally driven by Calendly's own
   page_height message. These values are the fallback for when that message
   never arrives, so they are sized to fit the LONGEST step (the booking form:
   name, email, phone and five questions) rather than the calendar. Slightly
   too tall costs some whitespace; too short makes the form scroll inside
   itself, which on a phone is miserable. */
.cal-embed{
  position:relative;margin-top:var(--space-6);
  min-height:1450px;height:1450px;
  background:#fff;border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card);
}
@media (min-width:700px){ .cal-embed{min-height:1050px;height:1050px} }
@media (min-width:1000px){ .cal-embed{min-height:820px;height:820px} }
.cal-embed iframe{display:block;width:100%;height:100%;border:0}

.cal-loading{
  position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--space-4);
  padding:var(--space-6);text-align:center;pointer-events:none;
}
.cal-spinner{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--border-strong);border-top-color:var(--gold-600);
  animation:cal-spin .9s linear infinite;
}
@keyframes cal-spin{to{transform:rotate(360deg)}}
.cal-loading p{font-family:var(--font-ui);font-weight:600;font-size:.85rem;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){ .cal-spinner{animation-duration:2.4s} }

/* Shown only if the scheduler cannot load at all. */
.cal-fallback{
  margin-top:var(--space-5);padding:var(--space-5);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  background:var(--surface-card);
}

/* ---------- Footer ---------- */

.site-footer{background:var(--navy-900);color:var(--text-on-inverse);padding-bottom:env(safe-area-inset-bottom)}
.footer-grid{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--section-y) var(--gutter) var(--space-7);
  display:grid;gap:var(--space-7);
}
@media (min-width:680px){ .footer-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--space-8)} }

.footer-id{display:flex;align-items:center;gap:var(--space-3)}
.footer-name{
  display:block;font-family:var(--font-display);font-weight:900;font-size:1rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--offwhite-100);
}
.footer-sub{display:block;font-family:var(--font-body);font-style:italic;font-size:.85rem;color:var(--gold-400)}
.footer-desc{margin-top:var(--space-5);font-family:var(--font-body);font-size:var(--size-body-sm);line-height:1.6;color:var(--text-on-inverse-soft);max-width:34ch}

.footer-heading{
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold-400);
  margin:0 0 var(--space-4);
}
.footer-links{display:grid;gap:var(--space-1);justify-items:start}
.footer-links a,.footer-links button{
  background:none;border:0;padding:10px 0;cursor:pointer;min-height:44px;
  font-family:var(--font-ui);font-weight:600;font-size:.88rem;text-decoration:none;
  color:var(--text-on-inverse);transition:color var(--dur-fast) var(--ease-out);
}
.footer-links a:hover,.footer-links button:hover{color:var(--gold-400)}
.footer-area,.footer-hours{font-family:var(--font-body);font-size:var(--size-body-sm);line-height:1.75;color:var(--text-on-inverse-soft)}
.footer-hours{margin-top:var(--space-4);max-width:30ch}
.footer-phone{
  display:inline-block;min-height:44px;
  font-family:var(--font-display);font-weight:900;font-size:1.2rem;
  letter-spacing:var(--track-display);color:var(--offwhite-100);
}
.footer-phone:hover{color:var(--gold-400)}
/* An email address is one unbreakable word. At 320px it is wider than the
   column it sits in, and a word that cannot break widens the whole page.
   This applies wherever the address appears, not just the footer. */
a[href^="mailto:"]{overflow-wrap:anywhere}

/* Standalone contact address on the booking page: a real tap target rather
   than a 20px line of text, matching the phone number above it. */
.book-email{
  display:inline-flex;align-items:center;min-height:44px;margin-top:6px;
  font-family:var(--font-ui);font-weight:700;font-size:.92rem;
  color:var(--navy-700);
}
.book-email:hover{color:var(--gold-600)}

.footer-email{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-ui);font-weight:600;font-size:var(--size-body-sm);
  color:var(--text-on-inverse-soft);overflow-wrap:anywhere;
}
.footer-email:hover{color:var(--gold-400)}
/* "Find us on Google" sits alone in the footer, so it is a standalone target
   and needs the full 44px, unlike a link inside a sentence. */
.site-footer a[data-maps-link]{display:inline-flex;align-items:center;min-height:44px}

/* Any other link in the footer (e.g. "Find us on Google") - the site-wide
   a:hover uses a dark navy that is nearly invisible on this dark background. */
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--gold-400)}

.footer-bottom{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-5) var(--gutter) var(--space-8);
  border-top:1px solid rgba(233,236,229,.12);
  display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;
  font-family:var(--font-body);font-size:.82rem;color:var(--text-on-inverse-soft);
}

/* ---------- Page header band ---------- */

.page-head{
  background:var(--navy-700);color:var(--text-on-inverse);
  padding-top:calc(var(--header-h) + env(safe-area-inset-top) + var(--space-8));
  padding-bottom:var(--space-8);
}
/* Page titles carry keywords, so they run long. Slightly tighter scale than
   the home hero keeps them to two or three lines on a phone. */
.page-head h1{color:var(--text-on-inverse-strong);font-size:clamp(1.85rem,6.2vw,3.4rem)}

/* Package name above a service-page heading. The H1 keeps the searchable
   phrase; this names the product the page is actually selling. */
.package-tag{
  margin-bottom:var(--space-3);
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(.72rem,2.2vw,.85rem);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--gold-400);
}
.page-head p{margin-top:var(--space-5);max-width:52ch}

/* Pages that begin with their own full-bleed hero manage their own offset. */
.page-offset{padding-top:calc(var(--header-h) + env(safe-area-inset-top))}

/* ---------- Breadcrumbs ---------- */

.breadcrumb{padding-top:var(--space-5)}
.breadcrumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-ui);font-weight:600;font-size:.74rem;
  letter-spacing:var(--track-nav);text-transform:uppercase;
}
.breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--text-on-inverse-soft)}
/* Standalone links need a real tap area on a phone. Links sitting inside a
   sentence are exempt (WCAG 2.5.5 inline exception) and are left alone, since
   padding them would wreck the line spacing of the paragraph. */
.standalone-link{display:inline-flex;align-items:center;min-height:44px}
.price-table tbody th a{display:inline-flex;align-items:center;min-height:44px}
.breadcrumb a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--text-on-inverse-soft);text-decoration:none;
}
.breadcrumb a:hover{color:var(--gold-400)}
.breadcrumb li + li::before{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg);opacity:.7}
.breadcrumb [aria-current]{color:var(--gold-400)}

/* ---------- Rating summary + review CTA ---------- */

.rating-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  padding:var(--space-5);border:1px solid var(--border-hairline);
  border-radius:var(--radius-card);background:var(--surface-card);
}
.rating-score{
  font-family:var(--font-display);font-weight:900;font-size:2.4rem;line-height:1;
  color:var(--navy-700);font-variant-numeric:tabular-nums;
}
.rating-meta{display:flex;flex-direction:column;gap:4px}
.rating-meta .stars{color:var(--gold-400)}
.rating-count{font-family:var(--font-body);font-size:var(--size-body-sm);color:var(--text-muted)}

.review-cta{
  display:grid;gap:var(--space-5);align-items:center;
  background:var(--navy-700);border:1px solid var(--gold-400);
  border-radius:var(--radius-card);padding:var(--space-6);
  box-shadow:0 0 0 1px rgba(212,182,113,.28),var(--shadow-raised);
}
@media (min-width:800px){ .review-cta{grid-template-columns:1fr auto;gap:var(--space-8)} }
.review-cta h2,.review-cta h3{color:var(--text-on-inverse-strong);margin:0}
.review-cta p{margin-top:var(--space-3);color:var(--text-on-inverse);font-family:var(--font-body);font-size:var(--size-body-sm);line-height:1.6;max-width:52ch}
/* Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their content and silently widen the page. */
.review-cta > *{min-width:0}
.review-cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);min-width:0}

.google-mark{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-on-inverse-soft);
}

/* ---------- FAQ accordion ---------- */

.faq{display:grid;gap:0;margin-top:var(--space-6)}
.faq details{border-top:1px solid var(--border-hairline)}
.faq details:last-child{border-bottom:1px solid var(--border-hairline)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-5) 0;cursor:pointer;list-style:none;min-height:44px;
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  letter-spacing:var(--track-display);color:var(--text-heading);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;margin-top:6px;
  border-right:2px solid var(--gold-600);border-bottom:2px solid var(--gold-600);
  transform:rotate(45deg);transition:transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--gold-600)}
.faq-answer{padding:0 0 var(--space-5);font-family:var(--font-body);font-size:var(--size-body);line-height:var(--lh-body);color:var(--text-body);max-width:68ch}
.faq-answer p + p{margin-top:var(--space-3)}

/* ---------- Service areas ---------- */

.area-grid{display:grid;gap:var(--space-4);margin-top:var(--space-7)}
@media (min-width:640px){ .area-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .area-grid{grid-template-columns:repeat(3,1fr)} }
.area{
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-card);padding:var(--space-5);
}
.area h3{font-size:1.05rem;font-weight:800}
.area p{margin-top:10px;font-family:var(--font-body);font-size:var(--size-body-sm);line-height:1.6;color:var(--text-muted)}
.area-drive{
  display:inline-block;margin-top:var(--space-4);
  font-family:var(--font-ui);font-weight:700;font-size:.68rem;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold-600);
}

/* ---------- Key facts table (AEO: quotable, machine-readable) ---------- */

.facts{margin-top:var(--space-6);border-top:1px solid var(--border-hairline)}
.facts div{
  display:grid;gap:2px var(--space-5);padding:var(--space-4) 0;
  border-bottom:1px solid var(--border-hairline);
}
@media (min-width:600px){ .facts div{grid-template-columns:14rem 1fr;align-items:baseline} }
.facts dt{
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);
}
.facts dd{margin:0;font-family:var(--font-body);font-size:var(--size-body);line-height:1.55;color:var(--text-body)}
.facts-inverse{border-top-color:var(--border-on-inverse)}
.facts-inverse div{border-bottom-color:var(--border-on-inverse)}
.facts-inverse dt{color:var(--text-on-inverse-soft)}
.facts-inverse dd{color:var(--text-on-inverse)}

/* ---------- Related links ---------- */

.related{display:grid;gap:var(--space-3);margin-top:var(--space-6)}
@media (min-width:700px){ .related{grid-template-columns:repeat(3,1fr)} }
.related a{
  display:flex;flex-direction:column;gap:6px;min-height:44px;
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-card);padding:var(--space-5);
  transition:var(--transition-control);
}
.related a:hover{border-color:var(--gold-400);box-shadow:var(--shadow-card)}
.related b{
  font-family:var(--font-display);font-weight:800;font-size:.95rem;
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--text-heading);
}
.related span{font-family:var(--font-body);font-size:var(--size-body-sm);color:var(--text-muted)}

/* ---------- Price table ---------- */

.price-table{
  width:100%;min-width:34rem;border-collapse:collapse;
  font-variant-numeric:tabular-nums;background:var(--surface-card);
  border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  overflow:hidden;
}
.price-table th,.price-table td{padding:var(--space-4) var(--space-5);text-align:left}
.price-table thead th{
  background:var(--navy-700);color:var(--text-on-inverse);
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;
}
.price-table tbody th{
  font-family:var(--font-display);font-weight:800;font-size:.95rem;
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--text-heading);
}
.price-table tbody th a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--gold-400)}
.price-table tbody th a:hover{color:var(--gold-600)}
.price-table tbody td{
  font-family:var(--font-display);font-weight:900;font-size:1.15rem;color:var(--navy-700);
}
.price-table tbody tr + tr th,.price-table tbody tr + tr td{border-top:1px solid var(--border-hairline)}
.price-table tbody tr.is-featured{background:rgba(212,182,113,.14)}
.price-table tbody tr.is-featured td{color:var(--gold-600)}

/* ---------- Hours strip ---------- */

.hours{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  font-family:var(--font-ui);font-weight:700;font-size:var(--size-label-sm);
  letter-spacing:var(--track-label);text-transform:uppercase;
}
.hours-open{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold-400);
}
.hours-open::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--gold-400);
  box-shadow:0 0 0 3px rgba(212,182,113,.22);
}
.hours-detail{color:var(--text-on-inverse-soft)}