/* ==========================================================================
   Qingling Motors Singapore — EQ2 landing page
   Design direction: premium dark automotive-technical. Deep graphite canvas,
   one electric-teal accent, industrial condensed numerals, generous rhythm.
   Everything below composes from the tokens in :root — change a token, the
   whole page follows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Surfaces (dark canvas) */
  --bg:            #0A0D10;
  --bg-2:          #0E1317;
  --surface:       #141A20;
  --surface-2:     #1B232B;
  --border:        rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.20);

  /* Ink on dark */
  --text:   #F3F6F8;
  --muted:  #A9B4BF;   /* 8.4:1 on --bg */
  --faint:  #7C8792;   /* 5.1:1 on --bg — labels only */

  /* Light sections */
  --l-bg:      #F5F7F9;
  --l-surface: #FFFFFF;
  --l-text:    #0F151A;
  --l-muted:   #55636F;  /* 6.6:1 on --l-bg */
  --l-border:  #E2E7EC;

  /* Accent — electric teal, taken from the EQ2 body colour */
  --accent:      #2ED3D8;
  --accent-600:  #16B6BC;
  --accent-700:  #0E8F95;
  --accent-soft: rgba(46,211,216,.14);
  --accent-ink:  #04262A;   /* ink on accent fills */

  /* Brand red — reserved for the Qing Ling roundel only */
  --brand-red: #D9232E;

  /* Semantic */
  --success: #3FD98A;
  --danger:  #FF6B6B;

  /* Type */
  --font-body: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --font-display: var(--font-body);

  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;

  /* Space — 4px rhythm */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Radius */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Elevation — soft, low opacity */
  --sh-sm: 0 1px 2px rgba(0,0,0,.28);
  --sh-md: 0 10px 24px -12px rgba(0,0,0,.55);
  --sh-lg: 0 28px 64px -24px rgba(0,0,0,.65);
  --glow:  0 0 0 1px rgba(46,211,216,.35), 0 12px 40px -14px rgba(46,211,216,.45);

  /* Motion */
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Layout */
  --wrap: 1240px;
  --nav-h: 72px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
/* Any author-level `display` outranks the UA rule for [hidden]; without this,
   hiding an element that also has a display rule silently does nothing. */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:700; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

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

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s-5); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-100px; left:var(--s-4); z-index:200;
  background:var(--accent); color:var(--accent-ink);
  padding:var(--s-3) var(--s-4); border-radius:var(--r-sm); font-weight:600;
  transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{ top:var(--s-4); }

/* --------------------------------------------------------------------------
   3. Shared typographic patterns
   -------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-12); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--s-4);
}
.eyebrow::before{
  content:""; width:24px; height:1px; background:currentColor; opacity:.7;
}
.section-title{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
  font-size:clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
  line-height:1.1;
}
/* The introduction copy is set to the same measure as its heading so both
   share a right edge, per the review. */
.intro-copy{ margin-top:var(--s-4); }
.intro-copy .lede{ max-width:75ch; margin-top:0; }
.intro-copy .lede + .lede{ margin-top:var(--s-4); }
.intro-copy strong{ color:inherit; font-weight:700; }
.section--light .intro-copy strong{ color:var(--l-text); }

.lede{
  color:var(--muted);
  font-size:var(--fs-18);
  max-width:64ch;
  margin-top:var(--s-4);
}
.section{ padding-block:clamp(64px, 8vw, 128px); }
.section--light{ background:var(--l-bg); color:var(--l-text); }
.section--light .lede{ color:var(--l-muted); }
.section--light .eyebrow{ color:var(--accent-700); }
.section--tint{ background:var(--bg-2); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:48px; padding:0 var(--s-5);
  border-radius:var(--r-pill); border:1px solid transparent;
  font-size:var(--fs-14); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover{ background:var(--accent-600); box-shadow:var(--glow); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.section--light .btn--ghost{ color:var(--l-text); border-color:#C9D2DA; }
.section--light .btn--ghost:hover{ color:var(--accent-700); border-color:var(--accent-700); }
.btn--lg{ min-height:56px; padding:0 var(--s-6); font-size:var(--fs-16); }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn .arrow{ transition:transform var(--dur-2) var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             backdrop-filter var(--dur-2) var(--ease);
}
.site-header.is-stuck{
  background:rgba(10,13,16,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--border);
}
.site-header .wrap{ display:flex; align-items:center; gap:var(--s-5); }
.brand{ display:flex; align-items:center; gap:var(--s-3); margin-right:auto; }
.brand img{
  height:40px; width:auto;
  /* The roundel is white-on-red artwork drawn for light backgrounds; on the
     dark header it needs its own plate or the fine white strokes disappear. */
  background:#fff; padding:5px 10px; border-radius:12px;
}
.brand-text{
  font-family:var(--font-display); font-size:var(--fs-14); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding-left:var(--s-3); border-left:1px solid var(--border);
}
.nav{ display:flex; align-items:center; gap:var(--s-1); }
.nav a{
  padding:var(--s-2) var(--s-3);
  font-size:var(--fs-14); font-weight:500; color:var(--muted);
  border-radius:var(--r-sm);
  transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav a:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.nav a.is-active{ color:var(--accent); }
.header-cta{ display:inline-flex; }

.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border-strong); border-radius:var(--r-sm);
  cursor:pointer;
}
.nav-toggle span{ position:relative; display:block; width:18px; height:1.5px; background:currentColor; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:currentColor;
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate;
  padding-top:calc(var(--nav-h) + 48px);
  padding-bottom:var(--s-8);
  overflow:hidden;
  background:
    radial-gradient(1100px 620px at 70% 18%, rgba(46,211,216,.16), transparent 62%),
    radial-gradient(760px 520px at 12% 80%, rgba(46,211,216,.07), transparent 60%),
    linear-gradient(180deg, #0A0D10 0%, #0C1115 55%, #0A0D10 100%);
}
.hero::after{           /* subtle grid, keeps the dark field from going flat */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(circle at 50% 35%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 35%, #000 10%, transparent 72%);
}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:var(--s-7); align-items:center;
}
.hero__badge{
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-2) var(--s-4);
  border:1px solid var(--border-strong); border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  font-size:var(--fs-12); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--s-5);
}
.hero__badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.hero h1{
  /* Client direction: italic, sentence case, same size as before. */
  font-family:var(--font-display); font-weight:700; font-style:italic;
  text-transform:none;
  font-size:clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
  line-height:1.04; letter-spacing:-.02em;
}
.hero h1 .accent{
  background:linear-gradient(100deg, var(--accent) 10%, #7FE9C2 55%, #6FB6FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{ color:var(--muted); font-size:var(--fs-18); max-width:52ch; margin-top:var(--s-5); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.hero__price{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-3);
  margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:1px solid var(--border);
}
.hero__price .label{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-12); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
}
.hero__price .label::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:currentColor; box-shadow:0 0 0 4px var(--accent-soft);
}
.hero__price .figure{ font-family:var(--font-display); font-size:var(--fs-40); font-weight:600; line-height:1; }
.hero__price .note{ font-size:var(--fs-14); color:var(--muted); }

.hero__media{ position:relative; }
.hero__media img{ width:120%; max-width:none; margin-inline:-10%; filter:drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
.hero__media::before{
  content:""; position:absolute; left:50%; bottom:6%; translate:-50% 0;
  width:82%; height:60px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(46,211,216,.28), transparent 70%);
  filter:blur(18px);
}
.hero__scroll{
  display:inline-flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-5);
  font-size:var(--fs-12); letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.hero__scroll .line{
  display:block; width:1px; height:34px;
  background:linear-gradient(var(--accent), transparent);
  animation:scrollCue 2.2s var(--ease) infinite;
}
@keyframes scrollCue{ 0%,100%{ opacity:.3; transform:scaleY(.6); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); } }

/* --------------------------------------------------------------------------
   6b. Inner-page header
   -------------------------------------------------------------------------- */
.pagehead{
  position:relative; isolation:isolate;
  padding-top:calc(var(--nav-h) + clamp(48px, 6vw, 88px));
  padding-bottom:clamp(48px, 6vw, 88px);
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(900px 460px at 78% 10%, rgba(46,211,216,.14), transparent 62%),
    linear-gradient(180deg, #0A0D10 0%, #0C1115 100%);
}
.pagehead h1{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem, 1.35rem + 2.4vw, 3.25rem); line-height:1.08; letter-spacing:-.01em;
}
.pagehead .lede{ margin-top:var(--s-5); }
.crumb{
  margin-bottom:var(--s-5);
  font-size:var(--fs-12); letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--accent); }
.crumb span[aria-hidden]{ margin-inline:var(--s-2); opacity:.5; }

/* --------------------------------------------------------------------------
   6c. On-page jump rail (product page only)
   -------------------------------------------------------------------------- */
.jumprail{ background:var(--bg-2); border-bottom:1px solid var(--border); }
.jumprail ul{
  display:flex; gap:var(--s-2); overflow-x:auto;
  padding-block:var(--s-4); scrollbar-width:none;
}
.jumprail ul::-webkit-scrollbar{ display:none; }
.jumprail a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 var(--s-4);
  border:1px solid var(--border); border-radius:var(--r-pill);
  font-size:var(--fs-12); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  transition:all var(--dur-2) var(--ease);
}
.jumprail a:hover{ border-color:var(--accent); color:var(--accent); }

/* --------------------------------------------------------------------------
   7. Spec strip
   -------------------------------------------------------------------------- */
.specbar{ background:var(--bg-2); border-block:1px solid var(--border); }
.specbar__grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  padding-block:var(--s-6);
}
.spec{ padding:var(--s-3) var(--s-4); border-left:1px solid var(--border); }
.spec:first-child{ border-left:0; padding-left:0; }
.spec__value{
  font-family:var(--font-display); font-weight:600; line-height:1;
  font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
}
.spec__value .unit{ font-size:.5em; color:var(--muted); margin-left:2px; letter-spacing:.02em; }
.spec__label{ margin-top:var(--s-2); font-size:var(--fs-12); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }

/* --------------------------------------------------------------------------
   8. Incentive banner
   -------------------------------------------------------------------------- */
.incentive{
  background:linear-gradient(100deg, var(--accent-700) 0%, var(--accent-600) 45%, #2FA8E0 100%);
  color:#031B1E;
}
.incentive__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5);
  padding-block:var(--s-6);
}
.incentive__figure{
  font-family:var(--font-display); font-size:clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  font-weight:600; line-height:1; letter-spacing:0;
}
.incentive__body{ flex:1 1 340px; }
.incentive__body h3{ font-size:var(--fs-20); font-weight:700; }
.incentive__body p{ font-size:var(--fs-14); opacity:.85; margin-top:var(--s-1); max-width:70ch; }
.incentive .btn--ghost{ color:#031B1E; border-color:rgba(3,27,30,.35); }
.incentive .btn--ghost:hover{ background:#031B1E; color:#fff; border-color:#031B1E; }

/* --------------------------------------------------------------------------
   9. Feature rows (alternating image / copy)
   -------------------------------------------------------------------------- */
.feature{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,80px); align-items:center;
}
.feature + .feature{ margin-top:clamp(64px,8vw,120px); }
.feature--flip .feature__media{ order:2; }
.feature__media{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--sh-lg);
}
.section--light .feature__media{ border-color:var(--l-border); background:var(--l-surface); box-shadow:var(--sh-md); }
.feature__media img{ width:100%; }
.feature__media--pad{ padding:var(--s-5); display:grid; place-items:center; }
.feature__media--pad img{ max-width:560px; }
.feature__media--light{ background:#fff; padding:var(--s-5); }

.certstrip{
  margin:var(--s-8) 0 0; padding:var(--s-5);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
}
.certstrip img{ width:100%; border-radius:var(--r-sm); }
.certstrip figcaption{
  margin-top:var(--s-4); font-size:var(--fs-12); letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); text-align:center;
}
.feature__body h3{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.375rem, 1rem + 1.2vw, 2rem); font-weight:700; line-height:1.15; }
.feature__body p{ margin-top:var(--s-4); color:var(--muted); max-width:60ch; }
.section--light .feature__body p{ color:var(--l-muted); }

.factlist{ margin-top:var(--s-6); display:grid; gap:var(--s-3); }
.factlist li{
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-3) 0; border-top:1px solid var(--border);
  font-size:var(--fs-14);
}
.section--light .factlist li{ border-top-color:var(--l-border); }
.factlist li:last-child{ border-bottom:1px solid var(--border); }
.section--light .factlist li:last-child{ border-bottom-color:var(--l-border); }
.factlist .k{ color:var(--faint); min-width:150px; letter-spacing:.08em; text-transform:uppercase; font-size:var(--fs-12); padding-top:2px; }
.section--light .factlist .k{ color:var(--l-muted); }
.factlist .v{ font-weight:600; }

/* --------------------------------------------------------------------------
   10. Gallery
   -------------------------------------------------------------------------- */
.gallery{
  margin-top:var(--s-7);
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-4);
}
.gallery figure{
  margin:0; position:relative; overflow:hidden;
  border-radius:var(--r); border:1px solid var(--border); background:var(--surface);
}
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-3) var(--ease); }
.gallery figure:hover img{ transform:scale(1.04); }
.gallery figcaption{
  position:absolute; left:var(--s-4); bottom:var(--s-4);
  font-size:var(--fs-12); letter-spacing:.12em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.9);
}
.gallery .g-wide{ grid-column:span 4; aspect-ratio:16/9; }
.gallery .g-tall{ grid-column:span 2; }
.gallery .g-half{ grid-column:span 3; aspect-ratio:16/10; }
.gallery .g-third{ grid-column:span 2; aspect-ratio:4/3; }
.gallery .g-wide2{ grid-column:span 6; aspect-ratio:24/7; }

/* Six-up detail montage — already carries its own captions, so it runs
   full width on its own light plate rather than being cropped into the grid.
   Same treatment as .feature__media--light, for consistency. */
.detailstrip{
  margin:var(--s-4) 0 0; padding:0; overflow:hidden;
  border-radius:var(--r); border:1px solid var(--border); background:#fff;
}
.detailstrip img{ width:100%; }

/* --------------------------------------------------------------------------
   11. Body configurations (tabs)
   -------------------------------------------------------------------------- */
.configs{ margin-top:var(--s-7); }
.tabs{
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  padding-bottom:var(--s-5); border-bottom:1px solid var(--l-border);
}
.tab{
  appearance:none; background:transparent; cursor:pointer;
  border:1px solid var(--l-border); border-radius:var(--r-pill);
  padding:var(--s-3) var(--s-5); min-height:44px;
  font-size:var(--fs-14); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--l-muted);
  transition:all var(--dur-2) var(--ease);
}
.tab:hover{ border-color:var(--accent-700); color:var(--accent-700); }
.tab[aria-selected="true"]{ background:var(--l-text); border-color:var(--l-text); color:#fff; }
.tabpanel{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,64px); align-items:center; padding-top:var(--s-7); }
.tabpanel[hidden]{ display:none; }
.tabpanel__media{
  border-radius:var(--r-lg); background:var(--l-surface);
  border:1px solid var(--l-border); padding:var(--s-5);
  display:grid; place-items:center;
  aspect-ratio:5/4;
}
.tabpanel__media img{ width:100%; max-width:520px; max-height:100%; object-fit:contain; }
.tabpanel h3{ font-family:var(--font-display); text-transform:uppercase; font-size:var(--fs-32); font-weight:600; }
.tabpanel p{ margin-top:var(--s-4); color:var(--l-muted); max-width:52ch; }
.taglist{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5); }
.tag{
  font-size:var(--fs-12); letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding:6px var(--s-3); border-radius:var(--r-pill);
  background:rgba(46,211,216,.16); color:#0B7C82;
}

/* --------------------------------------------------------------------------
   11b. Configuration grid + detail dialog
   -------------------------------------------------------------------------- */
.cfg-grid{
  margin-top:var(--s-7);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-4);
}
.cfg{
  appearance:none; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-4);
  background:var(--l-surface); border:1px solid var(--l-border); border-radius:var(--r-lg);
  transition:border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.cfg:hover{ border-color:var(--accent-700); transform:translateY(-4px); box-shadow:var(--sh-md); }
.cfg__img{ display:block; aspect-ratio:4/3; display:grid; place-items:center; }
.cfg__img img{ max-width:100%; max-height:100%; object-fit:contain; }
.cfg__name{
  font-size:var(--fs-18); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--l-text);
}

.cfg-modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:var(--s-5); }
.cfg-modal__backdrop{ position:absolute; inset:0; background:rgba(6,9,11,.72); backdrop-filter:blur(4px); }
.cfg-modal__panel{
  position:relative; z-index:1; width:min(880px, 100%);
  display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden;
  background:var(--l-surface); color:var(--l-text);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
}
.cfg-modal__media{ background:#fff; display:grid; place-items:center; padding:var(--s-6); }
.cfg-modal__media img{ width:100%; max-width:360px; }
.cfg-modal__body{ padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; justify-content:center; gap:var(--s-3); }
.cfg-modal__body h3{ font-size:var(--fs-24); font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.cfg-modal__body p{ color:var(--l-muted); }
.cfg-modal__x{
  position:absolute; top:10px; right:12px; z-index:2;
  width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(15,21,26,.08); color:var(--l-text); font-size:24px; line-height:1;
}
.cfg-modal__x:hover{ background:rgba(15,21,26,.16); }
@media (max-width:900px){
  .cfg-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cfg-modal__panel{ grid-template-columns:1fr; }
}
@media (max-width:600px){ .cfg-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   12. Why-EV cards
   -------------------------------------------------------------------------- */
.cards{
  margin-top:var(--s-7);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4);
}
.card{
  position:relative; padding:var(--s-6);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  transition:border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.card:hover{ border-color:var(--accent); transform:translateY(-4px); background:var(--surface-2); }
.cards--tight{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.cards--tight .card{ padding:var(--s-5); }
.cards--tight .card h3{ margin-top:0; font-size:var(--fs-18); }

.card__num{
  font-family:var(--font-display); font-size:var(--fs-14); font-weight:600;
  letter-spacing:.2em; color:var(--accent);
}
.card h3{ margin-top:var(--s-4); font-size:var(--fs-20); font-weight:700; letter-spacing:-.01em; }
.card p{ margin-top:var(--s-3); color:var(--muted); font-size:var(--fs-14); }

/* Cards inherit the theme of the section they sit in — without this the
   heading takes the light section's near-black ink onto a dark card. */
.section--light .card{ background:var(--l-surface); border-color:var(--l-border); box-shadow:var(--sh-sm); }
.section--light .card:hover{ background:#fff; border-color:var(--accent-700); }
.section--light .card h3{ color:var(--l-text); }
.section--light .card p{ color:var(--l-muted); }
.section--light .card__num{ color:var(--accent-700); }

/* --------------------------------------------------------------------------
   12b. History timeline
   -------------------------------------------------------------------------- */
.timeline-title{
  margin-top:var(--s-8);
  font-size:var(--fs-14); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
}
.timeline{
  margin-top:var(--s-5);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-4);
}
.tl{
  position:relative; padding:var(--s-5);
  background:linear-gradient(180deg, #C4222C 0%, #A81B24 100%);
  color:#fff; border-radius:var(--r-lg);
}
.tl__year{
  font-size:var(--fs-24); font-weight:700; line-height:1.2;
  letter-spacing:.02em; text-align:center;
}

/* The connector: each card draws its own segment, extended past both edges by
   the grid gap so the segments meet across the gutter and read as one line. */
.tl__mark{ position:relative; display:block; height:9px; margin-top:var(--s-3); }
.tl__mark::before{
  content:""; position:absolute; top:50%; left:calc(-1 * var(--s-5)); right:calc(-1 * var(--s-5));
  height:1px; background:rgba(255,255,255,.45);
}
.tl__mark::after{
  content:""; position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:9px; height:9px; border-radius:50%; background:#fff;
}
.tl:first-child .tl__mark::before{ left:0; }
.tl:last-child  .tl__mark::before{ right:0; }
.tl h4{ margin-top:var(--s-3); font-size:var(--fs-14); font-weight:700; text-align:center; }
.tl p:last-child{ margin-top:var(--s-3); font-size:var(--fs-12); line-height:1.55; text-align:center; opacity:.92; }
@media (max-width:900px){
  .timeline{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tl:nth-child(2n) .tl__mark::before{ right:0; }
  .tl:nth-child(2n+1) .tl__mark::before{ left:0; }
}
@media (max-width:600px){
  .timeline{ grid-template-columns:1fr; }
  .tl .tl__mark::before{ left:50%; right:50%; }
}

/* --------------------------------------------------------------------------
   12c. Footnote
   -------------------------------------------------------------------------- */
.footnote{
  margin-top:var(--s-4);
  font-size:var(--fs-12); line-height:1.5; color:var(--muted);
}
.section--light .footnote{ color:var(--l-muted); }

/* --------------------------------------------------------------------------
   13. Ownership / warranty
   -------------------------------------------------------------------------- */
.owncols{ margin-top:var(--s-7); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); }
.owncard{
  padding:var(--s-6); border-radius:var(--r-lg);
  background:var(--l-surface); border:1px solid var(--l-border);
}
.owncard h3{ font-size:var(--fs-14); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-700); }
.owncard ul{ margin-top:var(--s-4); display:grid; gap:var(--s-3); }
.owncard li{ display:flex; justify-content:space-between; gap:var(--s-4); font-size:var(--fs-14); padding-bottom:var(--s-3); border-bottom:1px dashed var(--l-border); }
.owncard li:last-child{ border-bottom:0; padding-bottom:0; }
.owncard li b{ font-family:var(--font-display); font-size:var(--fs-18); font-weight:600; white-space:nowrap; }
.owncard .hotline{ font-family:var(--font-display); font-size:var(--fs-32); font-weight:600; display:block; margin-top:var(--s-3); }
.owncard .hotline:hover{ color:var(--accent-700); }

/* --------------------------------------------------------------------------
   14. FAQ accordion
   -------------------------------------------------------------------------- */
.faq{ margin-top:var(--s-6); max-width:900px; border-top:1px solid var(--border); }
.faq__item{ border-bottom:1px solid var(--border); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-5) 0; background:transparent; border:0; cursor:pointer; text-align:left;
  font-size:var(--fs-18); font-weight:600; letter-spacing:-.01em;
  transition:color var(--dur-1) var(--ease);
}
.faq__q:hover{ color:var(--accent); }
.faq__icon{ position:relative; flex:0 0 auto; width:20px; height:20px; }
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor;
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.faq__icon::after{ transform:rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform:rotate(0deg); opacity:0; }
.faq__a{ overflow:hidden; height:0; transition:height var(--dur-3) var(--ease); }
.faq__a p{ color:var(--muted); padding-bottom:var(--s-5); max-width:80ch; }

/* --------------------------------------------------------------------------
   15. Enquiry form
   -------------------------------------------------------------------------- */
.contact__grid{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(32px,5vw,72px); align-items:start; }
.form{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px); box-shadow:var(--sh-lg);
}
.field{ margin-bottom:var(--s-4); }
.field label{ display:block; font-size:var(--fs-12); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:var(--s-2); }
.field .req{ color:var(--accent); }
.field input,.field textarea,.field select{
  width:100%; min-height:48px; padding:var(--s-3) var(--s-4);
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-sm);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#5D6873; }
.field input:hover,.field textarea:hover,.field select:hover{ border-color:var(--border-strong); }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); background:var(--surface-2);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field .error{ display:none; margin-top:var(--s-2); font-size:var(--fs-12); color:var(--danger); }
.field.is-invalid input,.field.is-invalid textarea{ border-color:var(--danger); }
.field.is-invalid .error{ display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.check{ display:flex; gap:var(--s-3); align-items:flex-start; margin:var(--s-5) 0; font-size:var(--fs-14); color:var(--muted); }
.check input{ width:18px; height:18px; min-height:0; margin-top:3px; accent-color:var(--accent); flex:0 0 auto; }
.form__note{ margin-top:var(--s-4); font-size:var(--fs-12); color:var(--faint); }
.form__status{
  display:none; margin-top:var(--s-4); padding:var(--s-4);
  border-radius:var(--r-sm); border:1px solid rgba(63,217,138,.4);
  background:rgba(63,217,138,.10); color:var(--success); font-size:var(--fs-14);
}
.form__status.is-visible{ display:block; }

.infocard{
  padding:var(--s-6); border:1px solid var(--border); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.infocard + .infocard{ margin-top:var(--s-4); }
.infocard h3{ font-size:var(--fs-14); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.infocard dl{ margin:var(--s-4) 0 0; display:grid; gap:var(--s-4); }
.infocard dt{ font-size:var(--fs-12); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.infocard dd{ margin:var(--s-1) 0 0; font-size:var(--fs-14); color:var(--text); }
.infocard a:hover{ color:var(--accent); }

/* Google Maps embed. The iframe renders Google's own light map, so it gets a
   plate of its own rather than fighting the dark surface around it. */
.mapcard{
  margin-top:var(--s-4); overflow:hidden;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
}
.mapcard iframe{
  display:block; width:100%; aspect-ratio:4/3; border:0;
}
.mapcard figcaption{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4);
  align-items:center; justify-content:space-between;
  padding:var(--s-4);
  font-size:var(--fs-12); letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  border-top:1px solid var(--border);
}
.mapcard figcaption a{ color:var(--accent); letter-spacing:.08em; }
.mapcard figcaption a:hover{ text-decoration:underline; }
@media (max-width:900px){ .mapcard iframe{ aspect-ratio:3/2; } }

/* --------------------------------------------------------------------------
   15b. Closing call-to-action band
   -------------------------------------------------------------------------- */
.ctaband{
  padding-block:clamp(64px, 8vw, 112px);
  border-top:1px solid var(--border);
  background:
    radial-gradient(760px 340px at 50% 0%, rgba(46,211,216,.13), transparent 66%),
    var(--bg-2);
  text-align:center;
}
.ctaband .eyebrow::before{ display:none; }
.ctaband .lede{ margin-inline:auto; }
.ctaband__actions{
  display:flex; flex-wrap:wrap; gap:var(--s-3);
  justify-content:center; margin-top:var(--s-6);
}

/* --------------------------------------------------------------------------
   15c. Simple checklist
   -------------------------------------------------------------------------- */
.checklist{
  margin-top:var(--s-6);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-3);
}
.checklist li{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-4); font-size:var(--fs-14); font-weight:600;
  background:var(--l-surface); border:1px solid var(--l-border); border-radius:var(--r);
}
.checklist li::before{
  content:""; flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 2px var(--accent-700);
}

/* --------------------------------------------------------------------------
   15d. Error page
   -------------------------------------------------------------------------- */
.errpage{
  position:relative; isolation:isolate;
  padding-top:calc(var(--nav-h) + clamp(56px, 8vw, 112px));
  padding-bottom:clamp(64px, 8vw, 120px);
  background:
    radial-gradient(900px 460px at 70% 8%, rgba(46,211,216,.13), transparent 62%),
    linear-gradient(180deg, #0A0D10 0%, #0C1115 100%);
}
.errpage__code{
  font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(4rem, 2rem + 9vw, 9rem); letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px var(--border-strong);
  margin-bottom:var(--s-4);
}
.errpage h1{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height:1.1;
}
.errpage .lede{ margin-top:var(--s-4); }
.errpage__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }

.errpage__links{ margin-top:var(--s-8); padding-top:var(--s-6); border-top:1px solid var(--border); }
.errpage__links h2{
  font-size:var(--fs-12); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
.errpage__links ul{
  margin-top:var(--s-5);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-4);
}
.errpage__links li{
  display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  transition:border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.errpage__links li:hover{ border-color:var(--accent); transform:translateY(-3px); }
.errpage__links a{ font-size:var(--fs-18); font-weight:600; letter-spacing:-.01em; }
.errpage__links li:hover a{ color:var(--accent); }
.errpage__links span{ font-size:var(--fs-14); color:var(--muted); }
.errpage__help{ margin-top:var(--s-7); font-size:var(--fs-14); color:var(--muted); }
.errpage__help a{ color:var(--accent); }
.errpage__help a:hover{ text-decoration:underline; }

@media (max-width:900px){ .errpage__links ul{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .errpage__links ul{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer{ background:#07090B; border-top:1px solid var(--border); padding-block:var(--s-8) var(--s-5); }
.footer__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:var(--s-6); }
.footer__brand img{ height:44px; background:#fff; padding:6px 11px; border-radius:12px; }
.footer__brand p{ margin-top:var(--s-4); color:var(--faint); font-size:var(--fs-14); max-width:34ch; }
.footer h4{ font-size:var(--fs-12); letter-spacing:.16em; text-transform:uppercase; color:var(--text); font-weight:600; }
.footer__col ul{ margin-top:var(--s-4); display:grid; gap:var(--s-3); font-size:var(--fs-14); color:var(--muted); }
.footer__col a:hover{ color:var(--accent); }
.socials{ display:flex; gap:var(--s-2); margin-top:var(--s-5); }
.socials a{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--border); border-radius:50%; color:var(--muted);
  transition:all var(--dur-2) var(--ease);
}
.socials a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.footer__bottom{
  margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
  font-size:var(--fs-12); color:var(--faint);
}
.footer__bottom a:hover{ color:var(--accent); }

/* --------------------------------------------------------------------------
   17. Floating & sticky CTAs
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#062B12;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);
  transition:transform var(--dur-2) var(--ease);
}
.wa-float:hover{ transform:scale(1.06); }
.mobile-cta{ display:none; }

/* --------------------------------------------------------------------------
   18. Reveal-on-scroll
   -------------------------------------------------------------------------- */
/* Content is visible by default and only hidden once JS has confirmed it will
   reveal it (main.js sets .js-reveal on <html>). A failed script, a blocked
   observer or a zero-size viewport therefore shows the page rather than a
   blank column. */
.reveal{ transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.js-reveal .reveal{ opacity:0; transform:translateY(20px); }
.js-reveal .reveal.is-in{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .nav a{ padding:var(--s-2); font-size:var(--fs-14); }
  .brand-text{ display:none; }
  .specbar__grid{ grid-template-columns:repeat(3,1fr); row-gap:var(--s-5); }
  .spec:nth-child(3n+1){ border-left:0; padding-left:0; }
  .cards,.cards--tight,.owncols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,13,16,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    padding:var(--s-3) var(--s-5) var(--s-5);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav a{ padding:var(--s-4) 0; border-bottom:1px solid var(--border); border-radius:0; font-size:var(--fs-16); }
  .header-cta{ display:none; }
  .hero__grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .hero__media{ order:-1; }
  .feature,.tabpanel,.contact__grid{ grid-template-columns:1fr; }
  .feature--flip .feature__media{ order:0; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery .g-wide,.gallery .g-wide2,.gallery .g-half,.gallery .g-third,.gallery .g-tall{ grid-column:span 1; aspect-ratio:4/3; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .checklist{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  body{ padding-bottom:72px; }
  .wa-float{ bottom:84px; }
  .mobile-cta{
    display:flex; gap:var(--s-3); position:fixed; inset:auto 0 0 0; z-index:95;
    padding:var(--s-3) var(--s-4);
    background:rgba(10,13,16,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--border);
  }
  .mobile-cta .btn{ flex:1; }
}
@media (max-width:600px){
  .specbar__grid{ grid-template-columns:repeat(2,1fr); }
  .spec{ border-left:0; padding-left:0; }
  .cards,.cards--tight,.owncols,.field-row,.footer__grid,.checklist{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .incentive__inner{ flex-direction:column; align-items:flex-start; }
  .incentive__body{ flex:0 0 auto; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header,.wa-float,.mobile-cta,.hero__scroll{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ==========================================================================
   20. Booking — date picker, slot grid, confirmation
   ========================================================================== */
.booking{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,4vw,64px); align-items:start; }
.bstep{ margin-bottom:var(--s-7); }
/* The details column stays in view while the customer works through the
   calendar and slot list on the left. */
#detailsStep{ position:sticky; top:calc(var(--nav-h) + var(--s-5)); }
@media (max-width:900px){ #detailsStep{ position:static; } }
.bstep__head{ display:flex; align-items:baseline; gap:var(--s-3); margin-bottom:var(--s-4); }
.bstep__n{
  flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font-family:var(--font-display); font-size:var(--fs-14); font-weight:600;
}
.bstep__t{ font-size:var(--fs-18); font-weight:600; letter-spacing:-.01em; }
.bstep__hint{ font-size:var(--fs-14); color:var(--muted); margin-left:auto; }

/* Month grid */
.cal{ border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); padding:var(--s-5); }
.cal__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-5); }
.cal__month{ font-family:var(--font-display); font-size:var(--fs-20); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cal__nav{ display:flex; gap:var(--s-2); }
.cal__nav button{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text);
  transition:all var(--dur-2) var(--ease);
}
.cal__nav button:hover:not([disabled]){ border-color:var(--accent); color:var(--accent); }
.cal__nav button[disabled]{ opacity:.3; cursor:not-allowed; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal__dow{
  text-align:center; padding-bottom:var(--s-2);
  font-size:var(--fs-12); letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}
.cal__day{
  position:relative; aspect-ratio:1; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--bg-2); border:1px solid transparent; border-radius:var(--r-sm);
  font-size:var(--fs-14); font-weight:600; color:var(--text); cursor:pointer;
  transition:all var(--dur-1) var(--ease);
}
.cal__day--pad{ background:transparent; cursor:default; }
.cal__day[disabled]{ color:var(--faint); background:transparent; cursor:not-allowed; opacity:.55; }
.cal__day:hover:not([disabled]){ border-color:var(--accent); }
.cal__day[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.cal__dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.cal__day[disabled] .cal__dot{ background:var(--faint); }
.cal__day[aria-pressed="true"] .cal__dot{ background:var(--accent-ink); }
.cal__legend{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-5); font-size:var(--fs-12); color:var(--faint); }
.cal__legend span{ display:inline-flex; align-items:center; gap:var(--s-2); }

/* Slot buttons */
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:var(--s-3); }
.slot{
  padding:var(--s-3) var(--s-4); cursor:pointer; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  transition:all var(--dur-1) var(--ease);
}
.slot:hover:not([disabled]){ border-color:var(--accent); }
.slot[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.slot[disabled]{ opacity:.4; cursor:not-allowed; }
.slot b{ display:block; font-family:var(--font-display); font-size:var(--fs-18); font-weight:600; }
.slot span{ font-size:var(--fs-12); color:var(--muted); }
.slot[aria-pressed="true"] span{ color:var(--accent-ink); opacity:.8; }

.bnote{
  padding:var(--s-4); border-radius:var(--r-sm); font-size:var(--fs-14);
  background:var(--surface); border:1px solid var(--border); color:var(--muted);
}
.bnote--warn{ border-color:rgba(255,107,107,.4); background:rgba(255,107,107,.08); color:#FFB4B4; }

/* Confirmation */
.confirm{
  padding:clamp(24px,3vw,40px); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid rgba(63,217,138,.4);
  box-shadow:var(--sh-lg);
}
.confirm__tick{
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:rgba(63,217,138,.14); color:var(--success); margin-bottom:var(--s-5);
}
.confirm h2{ font-family:var(--font-display); font-size:var(--fs-32); text-transform:uppercase; font-weight:600; }
.confirm dl{ margin:var(--s-6) 0 0; display:grid; gap:var(--s-4); }
.confirm dt{ font-size:var(--fs-12); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.confirm dd{ margin:var(--s-1) 0 0; font-size:var(--fs-18); font-weight:600; }
.confirm .ref{ font-family:var(--font-display); font-size:var(--fs-32); color:var(--accent); letter-spacing:.04em; }

.skeleton{
  height:44px; border-radius:var(--r-sm); background:var(--surface);
  animation:pulse 1.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{opacity:.5} 50%{opacity:.9} }

@media (max-width:900px){
  .booking{ grid-template-columns:1fr; }
  .slots{ grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); }
}

/* Seven 44px day cells plus gaps and card padding need ~394px, which is wider
   than a 375px phone minus the wrap gutters — the month grid was forcing the
   whole page to scroll sideways. Tighten the cell and the padding just enough
   to fit; 40px still clears the WCAG 2.2 target-size minimum. */
@media (max-width:420px){
  .cal{ padding:var(--s-3); }
  .cal__grid{ gap:3px; }
  .cal__day{ min-height:40px; }
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }