/* =========================================================
   Mehmood Trading LTD & MOT Centre — Design System
   Palette, type and component shapes mirror the live site at
   mehmoodtradingltd.com (Inter + Playfair Display, navy/blue,
   rounded-full buttons and pills) — verified directly against
   that site's rendered CSS custom properties.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap');

:root{
  --ink:#121721;         /* foreground — main body text */
  --ink-soft:#2B3342;
  --deep:#171C26;        /* primary — dark navy for header/hero/footer */
  --deep-2:#1F2635;
  --steel:#676F7E;       /* muted-foreground — secondary text */
  --paper:#F6F7F9;       /* background */
  --paper-2:#EDEFF2;     /* muted — alt section fill / card fill */
  --line:#DCDFE5;        /* border */
  --line-dark:rgba(255,255,255,.14);
  --amber:#61A6FA;       /* accent blue — primary CTA colour */
  --amber-dark:#3D86E0;  /* accent hover */
  --white:#FFFFFF;
  --good:#16A34A;
  --danger:#EF4444;
  --danger-bg:#FEECEC;
  --danger-border:#F7C9C9;

  --font-head:'Playfair Display', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-s:8px;
  --radius-m:14px;
  --radius-full:999px;
  --container:1180px;
  --shadow-1: 0 1px 2px rgba(18,23,33,0.05), 0 10px 28px rgba(18,23,33,0.08);
}

*,*::before,*::after{box-sizing:border-box;}
/* overflow-x:hidden here matters specifically because of .main-nav below:
   it's position:fixed AND uses a transform (translateX) to slide off-canvas
   on mobile. That combination is a known browser quirk — a fixed element
   that also has a transform stops being sized purely against the viewport
   for scrollable-area purposes, so even fully off-screen (translateX(100%))
   it was still widening the whole page's scrollable area to roughly double
   the viewport width on every page (confirmed: e.g. 375px viewport measuring
   750px of scrollWidth), letting the entire site be dragged sideways on
   phones and pushing the hamburger button out toward the hidden edge. This
   clips that phantom width without touching the menu's own animation or any
   intentionally horizontal-scrolling strip elsewhere (those use their own
   overflow-x:auto on a narrower child, which this doesn't affect). */
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;
  overflow-x:clip;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-head);margin:0 0 .5em;line-height:1.12;font-weight:800;letter-spacing:-0.01em;}
p{margin:0 0 1em;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--radius-full);font-weight:600;font-size:15.5px;
  border:1.5px solid transparent;transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-amber{background:var(--amber);color:#fff;border-color:var(--amber);}
.btn-amber:hover{background:var(--amber-dark);border-color:var(--amber-dark);}
.btn-dark{background:var(--deep);color:var(--white);border-color:var(--deep);}
.btn-dark:hover{background:var(--deep-2);border-color:var(--deep-2);}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45);}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08);}
.btn-outline-dark{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-outline-dark:hover{border-color:var(--ink);background:var(--paper-2);}
.btn-block{width:100%;}
.btn-sm{padding:10px 20px;font-size:14px;}

/* ---------- Top bar ---------- */
.topbar{background:var(--deep-2);color:#C7D0D6;font-size:13.5px;}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:40px;}
.topbar a{color:#C7D0D6;}
.topbar-call{font-weight:700;color:var(--amber) !important;}
.topbar-left{display:flex;gap:22px;align-items:center;}
.topbar-left span{opacity:.85;}
@media (max-width:720px){ .topbar-left span:not(.topbar-hours){display:none;} }

/* ---------- Header ---------- */
/* No backdrop-filter here on purpose: it (like `filter`/`perspective`)
   creates a new CSS containing block for any position:fixed element
   nested inside it, no matter how deep — which was trapping the mobile
   .main-nav drawer below and sizing its "full screen" height against this
   76px header bar instead of the real viewport (it opened as a ~50px
   sliver). Background is already 96% opaque, so the blur added almost
   nothing visually; dropping it fixes the drawer with no visible change
   to the header itself. */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(23,28,38,.96);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
/* flex-shrink:0 + nowrap: the logo/brand block must NEVER get squeezed
   narrower than its own content — that's what was forcing "Mehmood Trading"
   to break into "Mehmood" / "Trading" / "LTD & MOT CENTRE" across three
   lines and spill out of the fixed-height header. It now always gets its
   full natural width; it's the nav/actions around it that adapt instead. */
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--white);flex-shrink:0;white-space:nowrap;}
.brand-mark{
  width:42px;height:42px;border-radius:50%;background:var(--amber);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:15px;flex-shrink:0;
}
.brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:11.5px;color:#9AA7AF;letter-spacing:.04em;white-space:nowrap;}
.main-nav{display:flex;align-items:center;gap:26px;}
/* nowrap so a two-word link like "About Us" breaks cleanly to the mobile
   menu below a certain width instead of splitting itself across two lines
   in place — a link either fits on one line or the whole nav goes to the
   hamburger menu; it never wraps mid-item. */
.main-nav a{font-weight:500;font-size:15px;color:#C7D0D6;position:relative;padding:6px 0;white-space:nowrap;}
.main-nav a:hover{color:var(--white);}
.main-nav a.active{color:var(--white);}
.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--amber);border-radius:2px;}
.header-actions{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.nav-toggle{display:none;background:none;border:none;padding:8px;}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--white);margin:5px 0;border-radius:2px;}

/* The brand and nav links no longer shrink or wrap (see above), so once the
   full nav genuinely doesn't fit, the menu collapses cleanly to the
   hamburger rather than squeezing/overlapping. That threshold is set well
   above the old 980px — nine links plus the brand were still cutting it
   close between roughly 980-1150px, which was the exact "disturbed" zone
   reported — so the collapse now happens earlier, before that zone is ever
   reached, on both common laptop widths (1024/1280/1366px) and this one. */
@media (max-width:1300px){
  .main-nav{gap:16px;}
  .main-nav a{font-size:14px;}
  .header-inner{gap:14px;}
}

@media (max-width:1140px){
  /* .main-nav stays in its normal spot in the header markup (brand -> nav
     -> actions), matching the desktop layout — it only becomes a
     full-screen fixed drawer below this breakpoint. z-index:170 is scoped
     to .site-header's own stacking context (that ancestor has position:
     sticky + z-index:60), so on its own it can't out-rank the sticky-cta
     bar (150) or floating book button (140) which sit later in the page,
     outside the header. Instead, body.nav-open (toggled by script.js
     whenever the drawer opens) hides both of those so nothing floats on
     top of the open menu; see the body.nav-open rules further down. */
  .main-nav{position:fixed;inset:76px 0 0 0;background:var(--deep);flex-direction:column;align-items:flex-start;
    padding:26px 24px;gap:2px;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;z-index:170;}
  .main-nav.open{transform:translateX(0);}
  .main-nav a{width:100%;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:17px;white-space:normal;}
  .nav-toggle{display:block;}
  body.nav-open .sticky-cta,body.nav-open .float-book{display:none;}
}

/* Below ~480px, the brand block's fixed natural width (see the flex-shrink:0
   note above) plus the "Get a Quote" button and the hamburger no longer fit
   side by side even with .main-nav already off-canvas — the header itself
   overflows the viewport, which drags the WHOLE PAGE into horizontal scroll
   on every page (they all share this header) and pushes the hamburger off
   the right edge, out of reach. Rather than let the brand shrink/wrap again
   (the exact bug the flex-shrink:0 rule above was written to prevent), this
   scales the header's own chrome down instead, so the full-size brand still
   fits in the narrower space available. */
@media (max-width:480px){
  .header-inner{gap:8px;height:68px;}
  .brand{font-size:15px;gap:8px;}
  .brand-mark{width:32px;height:32px;font-size:12px;}
  .brand small{font-size:9px;}
  .header-actions{gap:6px;}
  .header-actions .btn-sm{padding:8px 12px;font-size:12.5px;}
  .nav-toggle{padding:6px;}
  .nav-toggle span{width:20px;}
}
/* The smallest common phone widths (iPhone SE/older Android, ~320-360px)
   still don't leave quite enough room even with the 480px tier above, so
   this trims the container's own side gutters too (16px instead of 24px,
   applied everywhere at this width, not just the header, which is standard
   practice on very small screens) plus a further pass on the header chrome. */
@media (max-width:360px){
  .container{padding:0 16px;}
  .header-inner{gap:6px;}
  .brand{font-size:13.5px;gap:6px;}
  .brand-mark{width:28px;height:28px;font-size:11px;}
  .header-actions{gap:4px;}
  .header-actions .btn-sm{padding:7px 10px;font-size:12px;}
  .nav-toggle{padding:4px;}
}

/* ---------- Hero ---------- */
/* z-index:0 here (on top of position:relative) is what actually matters:
   without it .hero doesn't establish its own stacking context, so the
   negative z-index below on .hero-bg escapes to whatever context contains
   .hero itself and can end up painted behind .hero's own background —
   i.e. the photo becomes completely invisible no matter what it is. */
.hero{position:relative;z-index:0;background:var(--deep);color:var(--white);overflow:hidden;}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:0;}
/* The second background layer here used to be a fully OPAQUE gradient
   (var(--deep) to var(--deep-2), no alpha) stacked on top of the
   translucent one below it — since it's a solid layer covering the whole
   box, it hid the photo completely no matter how transparent the first
   layer was. Confirmed live: removing it is what actually reveals the
   photo. Keeping only the translucent gradient still darkens the left
   side for text contrast while letting the photo show through. */
.hero::before{
  content:"";position:absolute;inset:0;
  background: linear-gradient(120deg, rgba(23,28,38,.85), rgba(23,28,38,.55) 55%, rgba(23,28,38,.25));
  z-index:1;
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;padding:76px 24px 96px;align-items:end;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(97,166,250,.14);border:1px solid rgba(97,166,250,.4);color:var(--amber);
  font-weight:600;font-size:13px;padding:7px 16px;border-radius:var(--radius-full);margin-bottom:22px;letter-spacing:.02em;}
.hero-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);}
.hero-badge-2{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#E7EBF0;
  font-weight:500;font-size:13.5px;padding:7px 16px;border-radius:var(--radius-full);margin:18px 0 30px;}
.hero-badge-2::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);}
.hero h1{font-size:clamp(36px,5vw,58px);max-width:16ch;}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero-sub{font-size:18px;color:#B9C2CC;max-width:46ch;margin-bottom:8px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px;}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;}
.hero-stats div strong{display:block;font-family:var(--font-head);font-size:26px;color:var(--white);}
.hero-stats div span{font-size:13px;color:#9AA7AF;}

/* Quick-quote card (feature not on the live site, kept but restyled to match its component language) */
.plate-card{background:var(--white);color:var(--ink);border-radius:20px;padding:28px;box-shadow:var(--shadow-1);}
.plate-card h3{font-size:20px;margin-bottom:4px;}
.plate-card .sub{color:var(--steel);font-size:14px;margin-bottom:18px;}
.plate-input-wrap{display:flex;border:1.5px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--paper);margin-bottom:14px;}
.plate-gb{background:var(--deep);color:#fff;font-weight:800;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px;line-height:1;}
.plate-gb span{font-size:9px;margin-top:3px;opacity:.7;}
.plate-input-wrap input{
  flex:1;border:none;background:transparent;font-family:var(--font-body);font-weight:700;font-size:20px;letter-spacing:.06em;
  padding:12px 10px;text-transform:uppercase;color:var(--ink);min-width:0;
}
.plate-input-wrap input:focus{outline:none;}
.plate-card select, .plate-card input[type=text]{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-s);font-size:15px;margin-bottom:12px;font-family:inherit;background:var(--white);
}
.plate-note{font-size:12.5px;color:var(--steel);margin-top:10px;}

/* ---------- Section basics ---------- */
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--paper-2);}
.section-dark{background:var(--deep);color:var(--white);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--amber-dark);font-size:13px;margin-bottom:10px;letter-spacing:.06em;text-transform:uppercase;}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);}
.section-dark .eyebrow{color:var(--amber);}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);}
.section-head p{color:var(--steel);font-size:17px;}
.section-dark .section-head p{color:#B9C2CC;}

/* ---------- Trust strip ---------- */
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;}
.trust-item{background:var(--white);padding:26px 22px;display:flex;gap:14px;align-items:flex-start;}
.trust-item .ic{width:40px;height:40px;flex-shrink:0;border-radius:var(--radius-full);background:rgba(97,166,250,.12);display:flex;align-items:center;justify-content:center;color:var(--amber-dark);font-weight:700;}
.trust-item strong{display:block;font-size:15.5px;margin-bottom:2px;}
.trust-item span{font-size:13.5px;color:var(--steel);}
@media (max-width:900px){.trust-strip{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.trust-strip{grid-template-columns:1fr;}}

/* ---------- Service cards ----------
   Flexbox rather than a fixed grid: the service count isn't always a clean
   multiple of the column count (e.g. 7 cards), and with a plain CSS grid an
   incomplete last row leaves an awkward empty cell. Flex-wrap + a computed
   basis gives the same four-column (then two, then one) layout, but a
   partial last row just centers itself instead of leaving a gap. */
.grid-services{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.svc-card{flex:1 1 240px;max-width:calc(25% - 18px);}
@media (max-width:1080px){.svc-card{max-width:calc(50% - 12px);}}
@media (max-width:600px){.svc-card{max-width:100%;}}
.svc-card{
  --accent:var(--amber); --accent-2:var(--amber-dark);
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:30px 26px 26px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(18,23,33,.04);
  transition:border-color .2s ease, box-shadow .3s ease, transform .3s ease;
}
/* Per-service accent colour — gives each card its own identity instead of
   seven identical navy badges, while staying inside a tasteful, cohesive
   palette (no clashing rainbow). */
.svc-card.acc-blue{--accent:#3B82F6;--accent-2:#2563EB;}
.svc-card.acc-teal{--accent:#14B8A6;--accent-2:#0D9488;}
.svc-card.acc-amber{--accent:#F59E0B;--accent-2:#D97706;}
.svc-card.acc-red{--accent:#F0553F;--accent-2:#DC3B24;}
.svc-card.acc-purple{--accent:#8B5CF6;--accent-2:#7C3AED;}
.svc-card.acc-cyan{--accent:#06B6D4;--accent-2:#0E7490;}
.svc-card.acc-sky{--accent:#38BDF8;--accent-2:#0284C7;}
.svc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:100%;
  background:transparent;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 120px);
  pointer-events:none;
}
.svc-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.svc-card:hover{
  border-color:transparent;transform:translateY(-6px);
  box-shadow:0 16px 36px -12px rgba(18,23,33,.35);
  box-shadow:0 16px 36px -12px color-mix(in srgb, var(--accent) 45%, rgba(18,23,33,.35));
}
.svc-card:hover::after{transform:scaleX(1);}
.svc-card .ic{
  position:relative;z-index:1;
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:24px;
  transition:transform .3s ease, box-shadow .3s ease;
  box-shadow:0 8px 18px -4px rgba(18,23,33,.35);
  box-shadow:0 8px 18px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.svc-card:hover .ic{transform:scale(1.08) rotate(-4deg);}
.svc-card h3{position:relative;z-index:1;font-size:19.5px;margin-bottom:8px;letter-spacing:-.01em;}
.svc-card p{position:relative;z-index:1;color:var(--steel);font-size:14.5px;flex:1;}
.svc-price{position:relative;z-index:1;font-size:13px;color:var(--ink-soft);font-weight:600;background:var(--paper-2);border-radius:var(--radius-s);padding:9px 11px;margin:8px 0 14px;border:1px solid var(--line);}
.svc-note{position:relative;z-index:1;font-size:11.5px;color:var(--steel);font-style:italic;margin-top:-10px;margin-bottom:10px;}
.svc-card .svc-link{position:relative;z-index:1;font-weight:700;font-size:14.5px;color:var(--accent-2);display:inline-flex;align-items:center;gap:6px;margin-top:auto;transition:gap .2s ease, color .2s ease;}
.svc-card .svc-link:hover{color:var(--deep);gap:10px;}

.svc-highlight{background:var(--deep);color:var(--white);border-radius:var(--radius-m);padding:32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px;}
.svc-highlight h3{margin-bottom:4px;color:#fff;}
.svc-highlight p{color:#B9C2CC;margin:0;}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-top:8px;}
.step .num{font-family:var(--font-head);font-size:44px;font-weight:800;color:var(--line);line-height:1;margin-bottom:10px;}
.step h3{font-size:17px;margin-bottom:6px;}
.step p{color:var(--steel);font-size:14.5px;margin:0;}

/* ---------- Why choose us ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){.why-grid{grid-template-columns:1fr;gap:32px;}}
.why-list{display:flex;flex-direction:column;gap:18px;margin-top:24px;}
.why-item{display:flex;gap:14px;align-items:flex-start;}
.why-item .tick{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--amber);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.why-item strong{display:block;font-size:15.5px;}
.why-item span{font-size:14px;color:var(--steel);}
.why-photo{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-1);position:relative;}
.why-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
.why-photo .badge{position:absolute;bottom:18px;left:18px;background:var(--white);border-radius:var(--radius-s);padding:12px 16px;box-shadow:var(--shadow-1);}
.why-photo .badge strong{display:block;font-family:var(--font-head);font-size:22px;}
.why-photo .badge span{font-size:12px;color:var(--steel);}

/* ---------- Online-exclusive same-day promo (matches the live site's offer band) ---------- */
.promo-band{background:var(--deep);color:#fff;}
.promo-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.promo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(97,166,250,.14);border:1px solid rgba(97,166,250,.4);color:var(--amber);
  font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:var(--radius-full);margin-bottom:16px;}
.promo-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);}
.promo-head h2{color:#fff;}
.promo-head p{color:#B9C2CC;font-size:16.5px;}
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.promo-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}}
.promo-card{position:relative;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.14);border-radius:20px;padding:30px 26px;text-align:center;}
.promo-card.popular{border-color:var(--amber);background:rgba(97,166,250,.08);}
.promo-card .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;padding:5px 16px;border-radius:var(--radius-full);white-space:nowrap;}
.promo-card .engine-label{font-size:12px;color:#9AA7AF;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.promo-card .engine-size{font-family:var(--font-head);font-size:26px;font-weight:800;color:#fff;margin-bottom:14px;}
.promo-card .price-label{font-size:12.5px;color:#9AA7AF;}
.promo-card .price{font-family:var(--font-head);font-size:48px;font-weight:800;color:#fff;line-height:1;margin:2px 0 20px;}
.promo-card .price sup{font-size:18px;}
.promo-features{list-style:none;padding:0;margin:0 0 24px;text-align:left;display:flex;flex-direction:column;gap:9px;}
.promo-features li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:#D6DBE1;}
.promo-features li::before{content:"✓";color:var(--amber);font-weight:800;flex-shrink:0;}
.promo-card .promo-actions{display:flex;gap:10px;}
.promo-card .promo-actions .btn{flex:1;padding:11px 14px;font-size:14px;}
.promo-footnote{text-align:center;font-size:12.5px;color:#8B98A0;margin-top:32px;}

/* ---------- MOT band ---------- */
.mot-band{background:var(--deep);color:#fff;border-radius:20px;padding:48px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;overflow:hidden;}
@media (max-width:900px){.mot-band{grid-template-columns:1fr;padding:34px 26px;}}
.mot-band h2{color:#fff;}
.mot-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:22px 0;}
.mot-checks li{font-size:14.5px;color:#C7D0D6;display:flex;gap:8px;align-items:flex-start;}
.mot-checks li::before{content:"✓";color:var(--amber);font-weight:800;}
.mot-price-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-m);padding:26px;}
.mot-price-card table{width:100%;border-collapse:collapse;font-size:14.5px;}
.mot-price-card td{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.mot-price-card td:last-child{text-align:right;font-weight:700;color:var(--amber);}

/* ---------- Reviews (dark band, like the live Google Reviews section) ---------- */
#reviews.section{background:var(--deep);color:#fff;}
#reviews .eyebrow{color:var(--amber);}
#reviews .section-head p, #reviews .reviews-head p{color:#B9C2CC;}
.reviews-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px;}
.google-badge{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-m);padding:16px 20px;}
.google-badge .score{font-family:var(--font-head);font-size:30px;font-weight:800;color:#fff;}
.stars{color:var(--amber);letter-spacing:2px;font-size:15px;}
.google-badge small{color:#9AA7AF;display:block;font-size:12.5px;}
.review-track-wrap{position:relative;}
.review-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;}
.review-track::-webkit-scrollbar{display:none;}
.review-card{scroll-snap-align:start;flex:0 0 320px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:24px;}
.review-card .stars{margin-bottom:10px;display:block;color:var(--amber-dark);}
.review-card p{font-size:14.5px;color:var(--ink-soft);min-height:80px;}
.review-foot{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--steel);border-top:1px solid var(--line);padding-top:12px;margin-top:6px;}
.review-foot strong{color:var(--ink);font-size:14px;}
.review-nav{display:flex;gap:10px;margin-top:18px;}
.review-nav button{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;}
.review-nav button:hover{border-color:#fff;}

/* ---------- Categories (vehicles for sale) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:800px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{border:1px solid var(--line);border-radius:var(--radius-m);padding:24px;background:var(--white);}
.cat-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.03em;background:var(--deep);color:var(--amber);padding:4px 12px;border-radius:var(--radius-full);margin-bottom:12px;}
.cat-card h3{font-size:17px;margin-bottom:6px;}
.cat-card p{color:var(--steel);font-size:14px;margin:0;}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:20px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:16.5px;font-weight:600;font-family:var(--font-body);}
.faq-q .plus{font-size:22px;color:var(--amber-dark);transition:transform .2s ease;flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 4px 20px;color:var(--steel);font-size:15px;max-width:70ch;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--deep);color:#fff;border-radius:20px;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.cta-band h2{color:#fff;margin-bottom:8px;font-size:clamp(24px,3vw,32px);}
.cta-band p{color:#B9C2CC;margin:0;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Location ---------- */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;}
@media (max-width:900px){.loc-grid{grid-template-columns:1fr;}}
.loc-map{border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line);min-height:340px;}
.loc-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;}
.loc-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:30px;}
.loc-card h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--steel);font-family:var(--font-body);font-weight:700;margin-bottom:6px;}
.loc-card .big{font-size:17px;font-weight:600;margin-bottom:22px;}
.hours-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;}
.hours-row:last-of-type{border-bottom:none;}

/* ---------- Contact / booking form ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow-1);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;}
.field label .req{color:var(--danger);margin-left:2px;}
.field input, .field select, .field textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius-s);font-size:15px;font-family:inherit;background:var(--paper);
}
.field textarea{resize:vertical;min-height:100px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--amber);background:var(--white);}
.field input.invalid, .field select.invalid, .field textarea.invalid{border-color:var(--danger);background:var(--danger-bg);}
.chip-group{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:9px 16px;border:1.5px solid var(--line);border-radius:var(--radius-full);font-size:13.5px;font-weight:600;background:var(--white);}
.chip input{display:none;}
.chip:has(input:checked){background:var(--deep);color:#fff;border-color:var(--deep);}
.form-note{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:12px 14px;font-size:12.5px;color:var(--steel);margin-top:6px;}

/* ---------- Multi-step modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(18,23,33,.62);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--white);border-radius:20px;width:100%;max-width:620px;max-height:92vh;overflow-y:auto;position:relative;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--white);z-index:2;border-radius:20px 20px 0 0;}
.modal-head h3{margin:0;font-size:18px;font-family:var(--font-head);}
.modal-close{background:none;border:none;font-size:22px;color:var(--steel);line-height:1;padding:4px;}
.modal-body{padding:26px;}
.step-pane{display:none;}
.step-pane.active{display:block;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- Numbered stepper (Vehicle / Service / Details / Book) ---------- */
.wizard-stepper{display:flex;align-items:flex-start;margin-bottom:28px;}
.wizard-stepper .ws-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;width:64px;}
.wizard-stepper .ws-circle{width:30px;height:30px;border-radius:50%;background:var(--paper-2);border:2px solid var(--line);color:var(--steel);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;transition:all .2s ease;flex-shrink:0;}
.wizard-stepper .ws-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--steel);text-align:center;}
.wizard-stepper .ws-connector{flex:1 1 auto;height:2px;background:var(--line);margin-top:15px;transition:background .2s ease;}
.wizard-stepper .ws-step.done .ws-circle{background:var(--amber);border-color:var(--amber);color:#fff;}
.wizard-stepper .ws-step.done .ws-label{color:var(--ink);}
.wizard-stepper .ws-step.done .ws-circle::before{content:"✓";}
.wizard-stepper .ws-step.current .ws-circle{background:var(--deep);border-color:var(--deep);color:#fff;}
.wizard-stepper .ws-step.current .ws-label{color:var(--ink);}
.wizard-stepper .ws-connector.done{background:var(--amber);}

/* ---------- Service selection: icon card grid ---------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:560px){.service-grid{grid-template-columns:1fr 1fr;}}
.service-card{border:1.5px solid var(--line);border-radius:var(--radius-m);padding:18px 14px;text-align:center;background:var(--white);
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color .15s ease, background .15s ease, transform .15s ease;}
.service-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-1);}
.service-card input{display:none;}
.service-card:has(input:checked){border-color:var(--amber);background:rgba(97,166,250,.07);}
.service-card .svc-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--amber-dark);margin-bottom:6px;}
.service-card .svc-icon svg{width:30px;height:30px;}
.service-card .svc-name{font-weight:700;font-size:13.5px;color:var(--ink);}
.service-card .svc-desc{font-size:11.5px;color:var(--steel);line-height:1.35;}
.not-sure-box{margin-top:18px;border:1.5px solid var(--line);border-radius:var(--radius-m);padding:16px 18px;background:var(--paper-2);text-align:center;font-size:13.5px;color:var(--steel);}
.not-sure-box strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:4px;}
.not-sure-box a{color:var(--amber-dark);font-weight:700;text-decoration:underline;}

/* ---- Service detail step: tabs across the top + a priced/quote list underneath ---- */
.detail-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:16px;border-bottom:1.5px solid var(--line);-webkit-overflow-scrolling:touch;}
.detail-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-full);border:1.5px solid var(--line);background:var(--white);color:var(--steel);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s ease;}
.detail-tab svg{width:16px;height:16px;flex-shrink:0;}
.detail-tab:hover{border-color:var(--amber);color:var(--ink);}
.detail-tab.active{background:var(--deep);border-color:var(--deep);color:#fff;}
.detail-panel{display:none;}
.detail-panel.active{display:block;animation:detailFadeIn .15s ease;}
@keyframes detailFadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.detail-panel-desc{font-size:13.5px;color:var(--steel);margin-bottom:14px;}
.line-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--line);border-radius:var(--radius-m);padding:14px 16px;margin-bottom:10px;background:var(--white);}
.line-item .li-info{flex:1 1 auto;min-width:0;}
.line-item .li-name{display:block;font-weight:700;font-size:14.5px;color:var(--ink);}
.line-item .li-desc{display:block;font-size:12.5px;color:var(--steel);margin-top:2px;line-height:1.35;}
.line-item .li-price{flex:0 0 auto;font-weight:800;font-size:15px;color:var(--ink);white-space:nowrap;}
.line-item .li-select{flex:0 0 auto;}
.quote-panel{border:1.5px solid var(--line);border-radius:var(--radius-m);padding:16px 18px;background:var(--paper-2);}
.quote-panel .quote-rate{display:inline-block;font-weight:700;font-size:13.5px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--radius-full);padding:6px 14px;margin-bottom:12px;}
.quote-panel textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius-s);font-size:14.5px;font-family:inherit;background:var(--white);resize:vertical;min-height:90px;margin-bottom:12px;}
.quote-panel textarea:focus{outline:none;border-color:var(--amber);}
.modal-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px;}
.summary-box{background:var(--paper-2);border-radius:var(--radius-s);padding:16px 18px;font-size:14px;margin-bottom:18px;}
.summary-box div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line);}
.summary-box div:last-child{border-bottom:none;}
.confirm-icon{width:60px;height:60px;border-radius:50%;background:var(--good);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px;}
.form-msg{display:none;padding:12px 14px;border-radius:var(--radius-s);font-size:14px;margin-top:12px;}
.form-msg.success{display:block;background:#E7F7EC;color:var(--good);border:1px solid #BFE8CE;}
.form-msg.error{display:block;background:var(--danger-bg);color:#B42318;border:1px solid var(--danger-border);}

/* ---------- Booking wizard additions (vehicle lookup step) ---------- */
.loading-spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--amber);margin:0 auto;animation:bk-spin .8s linear infinite;}
@keyframes bk-spin{to{transform:rotate(360deg);}}
.vehicle-card{border:1.5px solid var(--line);border-radius:var(--radius-m);padding:20px;background:var(--paper-2);margin-bottom:6px;}
.vehicle-card-title{font-family:var(--font-head);font-size:20px;font-weight:800;margin-bottom:10px;}
.vehicle-card-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px;}
.vehicle-card-row:last-child{border-bottom:none;}
.vehicle-card-row span:first-child{color:var(--steel);}
.vehicle-card-note{font-size:12px;color:var(--steel);margin-top:10px;font-style:italic;}
.field-error{color:#B42318;font-size:12.5px;margin-top:-10px;margin-bottom:10px;display:none;}
.field-error.show{display:block;}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--white);border-top:1px solid var(--line);
  display:none;gap:10px;padding:10px 14px;box-shadow:0 -6px 18px rgba(0,0,0,.08);}
@media (max-width:760px){.sticky-cta{display:flex;} body{padding-bottom:68px;}}
.sticky-cta a{flex:1;}

/* ---------- Floating "Book MOT" pill (desktop), mirrors the live site's persistent CTA ---------- */
.float-book{position:fixed;right:22px;bottom:22px;z-index:140;background:var(--amber);color:#fff;border-radius:var(--radius-full);
  padding:14px 22px 14px 16px;display:none;align-items:center;gap:10px;font-weight:700;font-size:14.5px;box-shadow:0 10px 24px rgba(97,166,250,.4);}
.float-book:hover{background:var(--amber-dark);}
.float-book .dot{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:14px;}
@media (min-width:761px){.float-book{display:inline-flex;}}

/* ---------- Footer ---------- */
.site-footer{background:var(--deep);color:#B9C2CC;padding:64px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h4{color:#fff;font-family:var(--font-body);font-size:14.5px;margin-bottom:16px;}
.site-footer ul li{margin-bottom:10px;font-size:14px;}
.site-footer a:hover{color:#fff;}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;color:#fff;font-size:18px;margin-bottom:14px;}
.foot-desc{font-size:14px;max-width:32ch;color:#9AA7AF;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:22px 0;font-size:13px;color:#8B98A0;}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap;}

/* ---------- Misc ---------- */
.skip-link{position:absolute;left:-999px;top:0;background:var(--deep);color:#fff;padding:10px 16px;z-index:999;}
.skip-link:focus{left:10px;top:10px;}
.badge-flag{display:inline-flex;align-items:center;gap:6px;background:var(--danger-bg);color:#B42318;border:1px solid var(--danger-border);font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--radius-full);}
.page-hero{position:relative;z-index:0;background:var(--deep);color:#fff;padding:64px 0;overflow:hidden;}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;z-index:0;}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(23,28,38,.92), rgba(23,28,38,.72) 55%, rgba(23,28,38,.45));
  z-index:1;
}
.page-hero .container{position:relative;z-index:2;}
.page-hero .eyebrow{color:var(--amber);}
.page-hero h1{color:#fff;font-size:clamp(30px,4vw,44px);max-width:22ch;}
.page-hero p{color:#B9C2CC;max-width:60ch;font-size:17px;}
.breadcrumb{font-size:13px;color:#9AA7AF;margin-bottom:16px;}
.breadcrumb a{color:#C7D0D6;}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:48px;}
@media (max-width:900px){.two-col{grid-template-columns:1fr;}}
.sidebar-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:26px;margin-bottom:20px;}
.sidebar-card h3{font-size:16px;}
.included-list li{display:flex;gap:10px;padding:8px 0;font-size:14.5px;border-bottom:1px solid var(--line);}
.included-list li::before{content:"✓";color:var(--good);font-weight:800;}
.included-list li:last-child{border-bottom:none;}

/* =========================================================
   Admin-managed content (prices, reviews, WhatsApp) — added with the
   Services & Prices / Website Settings / Reviews features.
   ========================================================= */

/* One-line price disclaimer ({{price-note}} in the pages, and the booking wizard) */
.price-note{position:relative;z-index:1;font-size:12px;line-height:1.45;color:var(--steel);margin:-6px 0 12px;display:flex;gap:6px;align-items:flex-start;}
.price-note::before{content:"ⓘ";font-style:normal;flex-shrink:0;opacity:.8;}
.promo-band .price-note{justify-content:center;color:#B7C1C8;margin:26px auto 0;max-width:640px;text-align:center;}
.cat-card .price-note{margin:10px 0 0;}
.sidebar-card .price-note{margin:12px 0 0;}
.detail-panel .price-note{margin:14px 0 0;}
.two-col > div > .price-note{margin:-4px 0 14px;}

/* Reviews rendered from the admin-managed list */
.reviews-all-link{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.review-foot strong a{color:inherit;}
.review-foot strong a:hover{text-decoration:underline;}
.review-no-text{color:var(--steel);font-style:italic;}
.review-card-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}

/* Floating WhatsApp button — bottom-left (the Book MOT pill is bottom-right) */
.wa-float{position:fixed;left:22px;bottom:22px;z-index:145;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(37,211,102,.38),0 2px 6px rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
.wa-float:hover{background:#1EBE5A;transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.45),0 2px 6px rgba(0,0,0,.14);}
.wa-float:focus-visible{outline:3px solid var(--amber);outline-offset:3px;}
.wa-float svg{width:30px;height:30px;}
.wa-tooltip{position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-4px,-50%);white-space:nowrap;
  background:var(--deep);color:#fff;font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;
  box-shadow:var(--shadow-1);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;}
.wa-tooltip::before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:var(--deep);}
.wa-float:hover .wa-tooltip,.wa-float:focus-visible .wa-tooltip{opacity:1;transform:translate(0,-50%);}
/* On phones the Call / Get a Quote bar sits along the bottom, so lift the button above it */
@media (max-width:760px){
  .wa-float{left:14px;bottom:82px;width:52px;height:52px;}
  .wa-float svg{width:28px;height:28px;}
  .wa-tooltip{display:none;}
}
body.nav-open .wa-float{display:none;}
@media print{.wa-float{display:none !important;}}

/* Booking wizard — time step availability note */
.bk-time-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--steel);}
.bk-time-note.is-error{background:var(--danger-bg);border:1px solid var(--danger-border);color:#B42318;border-radius:var(--radius-s);padding:10px 12px;font-weight:600;}
#bk-time:disabled{opacity:.65;}

/* =========================================================
   Hero — tablet & mobile only. Desktop (>900px) is unchanged. Below 900px
   the two-column grid (text | quote card) stacks into one column so the
   quote card is no longer squeezed off the right edge.
   ========================================================= */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:32px;padding:56px 24px 64px;align-items:start;}
  .hero h1{max-width:18ch;}
  .hero-sub{max-width:52ch;}
  .hero .plate-card{max-width:520px;width:100%;}
  .hero-bg{object-position:60% center;}
}
@media (max-width:600px){
  .hero::before{background:linear-gradient(180deg, rgba(23,28,38,.9), rgba(23,28,38,.72) 60%, rgba(23,28,38,.88));}
  .hero-inner{padding:32px 16px 40px;gap:26px;}
  .hero-eyebrow{font-size:12px;padding:6px 12px;margin-bottom:14px;}
  .hero h1{font-size:clamp(30px, 9vw, 40px);line-height:1.08;max-width:none;margin-bottom:12px;}
  .hero-sub{font-size:16px;line-height:1.55;max-width:none;}
  .hero-badge-2{font-size:12.5px;padding:6px 12px;margin:12px 0 20px;}
  .hero-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:26px;}
  .hero-ctas .btn{width:100%;padding:13px 12px;font-size:15px;white-space:normal;text-align:center;}
  .hero-ctas .btn:first-child{grid-column:1 / -1;}
  .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);}
  .hero-stats div strong{font-size:20px;line-height:1.15;overflow-wrap:anywhere;}
  .hero-stats div span{display:block;font-size:11.5px;line-height:1.35;margin-top:2px;}
  .hero .plate-card{padding:20px;border-radius:16px;}
  .hero .plate-card h3{font-size:18px;}
  .hero .plate-card .sub{font-size:13.5px;margin-bottom:14px;}
}
@media (max-width:360px){
  .hero-inner{padding:26px 14px 34px;}
  .hero h1{font-size:29px;}
  .hero-ctas{grid-template-columns:1fr;}
  .hero-stats{grid-template-columns:1fr 1fr;}
  .hero-stats div:last-child{grid-column:1 / -1;}
  .hero-stats div strong{font-size:18px;}
}

/* Contact form: spam honeypot (hidden from people) + inline field errors */
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}
#contact-form .field-error{margin-top:6px;margin-bottom:0;}
#contact-form .form-note a{text-decoration:underline;}
/* Booking wizard — booked / unavailable time slots stay listed but disabled */
#bk-time option:disabled,#bk-time option.slot-booked{color:#9AA3AE;background:#F1F3F6;}
#bk-time option.slot-booked{font-weight:600;}