/* ==========================================================================
   OVERBERG SUZUKI — hand-coded rebuild by X Digital
   Suzuki CI theme (from the approved v1 palette + official lockup):
   white/light surfaces, Suzuki blue #003399 action colour, deep blue
   #002a80, Suzuki red var(--red) reserved for the brand, amber stars.
   ========================================================================== */

:root{
  --bg:#f5f7fa;
  --bg-2:#e4edfc;
  --panel:#ffffff;
  --panel-2:#f8fafd;
  --ink:#101724;
  --muted:#5b6675;
  --line:rgba(16,23,36,.12);
  --line-soft:rgba(16,23,36,.07);
  --blue:#003399;
  --blue-deep:#002a80;
  /* Suzuki blue lifted by exactly as much as --blue-deep drops it, so a
     180deg --blue-lift -> --blue-deep gradient averages to #003399 */
  --blue-lift:#003cb2;
  --blue-bright:#1f57d6;
  --blue-tint:#e7eeff;
  --navy:#0a1430;
  /* both match the red inside the Suzuki mark exactly */
  --red:#fe020f;
  --red-bright:#fe020f;
  --amber:#f3a900;
  --font-display:"Archivo","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --header-h:68px;
  /* watermark size + the gap it keeps from the ticker */
  --wm-size:clamp(3rem,min(12.2vw,25vh),15rem);
  --wm-gap:clamp(10px,1.2vw,22px);
  /* vertical rhythm: three deliberate steps instead of one uniform gap */
  --pad-tight:clamp(54px,6.5vw,78px);
  --pad-base:clamp(66px,8vw,100px);
  --pad-wide:clamp(82px,9.5vw,128px);
  --radius:18px;
  --wrap:1180px;
  --shadow-lift:0 16px 40px rgba(16,35,80,.12);
  --shadow-soft:0 6px 22px rgba(16,35,80,.08);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:clip}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

section[id]{scroll-margin-top:calc(var(--header-h) + 20px)}

/* ---------- Background field ---------- */
.bg-field{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  repeating-linear-gradient(115deg,rgba(0,51,153,.022) 0 1px,transparent 1px 90px),
  var(--bg)}
.bg-glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.55}
.bg-glow-a{width:640px;height:640px;top:-220px;left:-160px;background:radial-gradient(circle,rgba(114,183,255,.28),transparent 65%);animation:drift-a 26s ease-in-out infinite alternate}
.bg-glow-b{width:560px;height:560px;bottom:-200px;right:-140px;background:radial-gradient(circle,rgba(0,51,153,.14),transparent 65%);animation:drift-b 32s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate(70px,50px)}}
@keyframes drift-b{to{transform:translate(-60px,-40px)}}

/* ---------- Layout helpers ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-left:clamp(18px,4.5vw,32px);
  padding-right:clamp(18px,4.5vw,32px);
}
.section{padding-top:var(--pad-base);padding-bottom:var(--pad-base);position:relative}
/* Feature sections breathe; signpost sections tighten. Gives the page a pulse
   instead of seven identically spaced blocks. */
.start   {padding-top:var(--pad-tight);padding-bottom:var(--pad-base)}
.bikes   {padding-top:var(--pad-wide); padding-bottom:var(--pad-wide)}
.parts   {padding-top:var(--pad-tight);padding-bottom:var(--pad-tight)}
.about   {padding-top:var(--pad-wide); padding-bottom:var(--pad-base)}
.reviews {padding-top:var(--pad-base); padding-bottom:var(--pad-tight)}
.contact {padding-top:var(--pad-base); padding-bottom:var(--pad-wide)}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--font-display);font-stretch:125%;text-wrap:balance}
h2{
  font-size:clamp(1.7rem,4.6vw,2.9rem);
  font-weight:850;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:1.04;
  color:var(--ink);
}
/* Desktop one-liners must fit at every width ≥960: sized to the longest heading */
@media (min-width:960px){
  h2{font-size:clamp(1.7rem,4vw,2.85rem)}
  /* the lead intro spans the full column, so its heading can run larger */
  .section-head.lead h2{font-size:clamp(1.9rem,4.6vw,3.15rem)}
  .about-copy h2{font-size:clamp(1.4rem,3.1vw,2.35rem)}
  .contact-info h2{font-size:clamp(1.4rem,2.85vw,2.15rem)}
}
h2 em{font-style:italic;color:var(--blue)}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-stretch:110%;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;white-space:nowrap;
}
.eyebrow i{width:26px;height:2px;background:var(--red);transform:skewX(-30deg);flex:none}
.section-head{margin-bottom:clamp(30px,5vw,52px)}
.section-head.split{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.section-copy{color:var(--muted);max-width:56ch}

/* Intro variants — so consecutive sections do not all open the same way.
   .center = short signpost sections · .lead = oversized stacked heading */
.section-head.center{text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .section-copy{margin-inline:auto}
.section-head.lead{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.section-head.lead .eyebrow{margin-bottom:0}
.section-head.lead .section-copy{max-width:54ch}
.chip-dot{width:7px;height:7px;border-radius:50%;background:#1fae52;display:inline-block;flex:none;box-shadow:0 0 8px rgba(31,174,82,.7);
  /* capitals have no descenders, so their ink centre sits below the line-box
     centre — nudge the dot down to match it optically */
  transform:translateY(.05em)}

/* ---------- Arrows ----------
   One drawing used everywhere, rotated for direction. Drawn as SVG because
   the arrow characters fall back to different system fonts (Segoe UI vs
   Segoe UI Symbol vs Inter), which is why they used to look mismatched. */
.arw{
  width:1.05em;height:1.05em;flex:none;
  vertical-align:-.16em;
  transition:transform .25s;
}
.arw-ne  {transform:rotate(-45deg)}
.arw-left{transform:rotate(180deg)}
.arw-up  {transform:rotate(-90deg)}
.stars{color:var(--amber);letter-spacing:.12em}

/* ---------- Buttons ---------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-stretch:110%;font-weight:750;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 26px;border-radius:999px;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s;
  white-space:nowrap;
}
.button:hover .arw{transform:translateX(3px)}
.button:hover .arw-ne{transform:rotate(-45deg) translateX(3px)}
.button-primary{
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  color:#fff;
  box-shadow:0 10px 26px rgba(0,51,153,.28);
}
.button-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,51,153,.36)}
.button-ghost{
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  background:rgba(10,20,48,.28);
  backdrop-filter:blur(8px);
}
.button-ghost:hover{transform:translateY(-2px);border-color:#fff;background:rgba(10,20,48,.45)}

/* ---------- Lockup (brand colours: red S, Suzuki-blue SUZUKI, red OVERBERG) ---------- */
.lockup{display:inline-flex;align-items:center;gap:clamp(8px,2.4vw,12px);flex:none;min-width:0}
.lockup-mark{width:clamp(26px,6.6vw,36px);height:clamp(26px,6.6vw,36px);flex:none}
.lockup-text{
  display:flex;gap:7px;align-items:baseline;
  font-family:var(--font-display);font-stretch:118%;font-style:italic;font-weight:880;
  font-size:clamp(.95rem,3.55vw,1.38rem);letter-spacing:.01em;text-transform:uppercase;line-height:1;
  white-space:nowrap;
}
.lockup-suzuki{color:var(--blue)}
.lockup-overberg{color:var(--red)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .35s;
}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(16,35,80,.08)}
.header-inner{
  max-width:var(--wrap);margin-inline:auto;
  padding-left:clamp(18px,4.5vw,32px);padding-right:clamp(18px,4.5vw,32px);
  height:var(--header-h);
  display:flex;align-items:center;gap:18px;
}
/* auto margins split the leftover space evenly, so the menu sits between the
   logo and the CTA with equal gaps on both sides */
.site-nav{margin-inline:auto}
.header-end{display:flex;align-items:center;gap:12px}
.scroll-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--red);
  transform-origin:0 50%;transform:scaleX(0);
}
.site-nav{display:none;align-items:center;gap:26px}
.site-nav a:not(.nav-cta){
  font-family:var(--font-display);font-stretch:110%;font-weight:650;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
  transition:color .25s;position:relative;padding:6px 0;
}
.site-nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s;
}
.site-nav a:not(.nav-cta):hover{color:var(--ink)}
.site-nav a:not(.nav-cta).is-active{color:var(--blue)}
.site-nav a:not(.nav-cta).is-active::after{transform:scaleX(1)}
.nav-cta{
  display:none;align-items:center;gap:8px;
  font-family:var(--font-display);font-stretch:110%;font-weight:750;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:linear-gradient(180deg,var(--blue-lift),var(--blue-deep));
  padding:10px 18px;border-radius:999px;
  box-shadow:0 8px 20px rgba(0,51,153,.28);
  transition:transform .25s,box-shadow .25s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,51,153,.32)}

.menu-toggle{
  width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);border-radius:12px;background:#fff;
}
.menu-toggle span{width:18px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s;display:block}
.menu-toggle.is-open span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle.is-open span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:70;
  background:rgba(248,250,253,.96);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  display:flex;flex-direction:column;
  padding:calc(var(--header-h) + 20px) clamp(24px,7vw,48px) 40px;
  /* auto margins centre the menu when there is room, but collapse when there
     is not — `justify-content:center` would push the first link out of reach
     above the scroll start on short screens (landscape phones) */
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.mobile-nav{margin-top:auto}
.mobile-menu-foot{margin-bottom:auto}
.mobile-menu.is-open{opacity:1;visibility:visible}
.mobile-nav{display:flex;flex-direction:column;gap:4px}
.mobile-nav a{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--font-display);font-stretch:120%;font-style:italic;font-weight:850;
  font-size:clamp(1.7rem,7.5vw,2.6rem);text-transform:uppercase;line-height:1.25;
  color:var(--ink);
  opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s,color .25s;
}
.mobile-menu.is-open .mobile-nav a{opacity:1;transform:none}
.mobile-menu.is-open .mobile-nav a:nth-child(2){transition-delay:.05s}
.mobile-menu.is-open .mobile-nav a:nth-child(3){transition-delay:.1s}
.mobile-menu.is-open .mobile-nav a:nth-child(4){transition-delay:.15s}
.mobile-menu.is-open .mobile-nav a:nth-child(5){transition-delay:.2s}
.mobile-menu.is-open .mobile-nav a:nth-child(6){transition-delay:.25s}
.mobile-nav a:active{color:var(--blue)}
.mobile-nav a i{
  font-family:var(--font-display);font-style:normal;font-weight:700;
  font-size:.8rem;color:var(--red);letter-spacing:.1em;
  /* baseline-aligned numerals read as sitting low against the big label —
     lift them to sit with the cap height instead */
  position:relative;top:-.55em;
}
.mobile-menu-foot{margin-top:34px;display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateY(14px);transition:opacity .4s .28s,transform .4s .28s}
.mobile-menu.is-open .mobile-menu-foot{opacity:1;transform:none}
.mobile-menu-foot .button{width:100%}
.mobile-menu-foot p{color:var(--muted);font-size:.82rem;text-align:center}
.menu-social{display:flex;justify-content:center;gap:12px;margin-top:2px}
.menu-social a{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--muted);background:#fff;
  transition:color .25s,border-color .25s,background .25s,transform .25s;
}
.menu-social a:hover,.menu-social a:active{
  color:var(--blue);border-color:var(--blue);background:var(--blue-tint);transform:translateY(-2px);
}
body.menu-open{overflow:hidden}

/* ---------- Hero (photo stays cinematic; scrims tuned Suzuki-blue) ---------- */
.hero{
  position:relative;
  /* height is pinned so the watermark peeks by the same amount no matter how
     tall the copy is — content changes must not drag the watermark around */
  min-height:calc(100svh + var(--wm-size) + var(--wm-gap) - 60px);
  display:flex;align-items:center;
  padding-top:calc(var(--header-h) + 58px);
  padding-bottom:calc(max(110px, .38 * var(--wm-size) + 24px) + .62 * var(--wm-size) + var(--wm-gap));
  overflow:clip;
  color:#fff;
}
.hero-media{position:absolute;inset:0;z-index:-1;background:var(--navy)}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:62% 50%;
  animation:kenburns 9s cubic-bezier(.16,.84,.28,1) both;
}
@keyframes kenburns{from{transform:scale(1.28)}to{transform:scale(1)}}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(4,12,36,.62) 0%,rgba(4,12,36,.18) 34%,rgba(4,12,36,.45) 66%,
    rgba(0,44,133,.75) 88%,var(--blue) 100%)}
.hero-scrim-side{position:absolute;inset:0;background:
  linear-gradient(94deg,rgba(3,10,32,.93) 0%,rgba(3,10,32,.74) 30%,rgba(3,10,32,.4) 55%,transparent 76%);
  /* fade the left-hand darkening out before the base so the blue hand-off to
     the ticker is even right across the width instead of muddied on the left */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 92%);}
.hero-content{position:relative;z-index:2}

/* ultra-narrow (folded phones ~280px): pull the lockup in so the menu button
   always has room */
@media (max-width:1119px){
  /* nav is hidden here, so push the menu button to the right edge */
  .header-end{margin-left:auto}
}

@media (max-width:340px){
  .ws-head{gap:8px}
  .ws-icon{width:24px;height:24px}
  .header-inner{padding-left:12px;padding-right:12px}
  .lockup-mark{width:22px;height:22px}
  .lockup-text{font-size:.8rem}
}

/* short screens (landscape phones): shrink the menu so it fits without scrolling */
@media (max-height:560px){
  .mobile-menu{padding-top:calc(var(--header-h) + 10px);padding-bottom:20px}
  .mobile-nav a{font-size:clamp(1.15rem,4.6vh,1.6rem);line-height:1.1}
  .mobile-nav{gap:2px}
  .mobile-menu-foot{margin-top:16px;gap:10px}
  .mobile-menu-foot .button{padding:11px 22px}
  .mobile-menu-foot p{font-size:.74rem}
  .menu-social a{width:38px;height:38px}
  .menu-social{gap:9px}
}

/* letter-spacing pushes the comma away from the word; pull it back */
.chip-text{display:inline}
.chip-extra{margin-left:-.15em}
.hero-chip{
  /* fixed even height + line-height:1 keeps the caps optically centred at any
     browser zoom (padding + fractional line-height rounded unevenly) */
  display:inline-flex;align-items:center;gap:9px;
  height:31px;line-height:1;
  font-family:var(--font-display);font-stretch:110%;font-weight:650;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#e4ebfa;
  border:1px solid rgba(255,255,255,.32);border-radius:999px;
  padding:0 15px;margin-bottom:22px;
  background:rgba(6,14,38,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero-title{
  font-size:clamp(2.2rem,min(7.1vw,9.2vh),5.1rem);
  font-weight:880;font-style:italic;text-transform:uppercase;
  line-height:.94;letter-spacing:-.015em;
  margin-bottom:0;
  text-shadow:0 6px 44px rgba(2,8,26,.7);
}
/* SLIPSTREAM: each line is uncovered by an edge travelling left to right, raked
   to the same -30deg the hero rule uses. clip-path does the masking, so the
   wrapper must NOT also clip -- overflow:hidden here would cut the glyphs.
   padding-right/margin-right stays: it is the italic overhang, not the wipe. */
.line-mask{display:block;padding-right:.12em;margin-right:-.12em}
.line{
  display:block;
  clip-path:polygon(0% -20%,0% -20%,-16% 120%,-16% 120%);
  animation:slip 2.3s cubic-bezier(.22,.72,.2,1) both;
}
/* stagger is short relative to the 2.3s travel, so the three wipes overlap
   into one sweep across the block instead of three separate events */
.line-mask:nth-child(1) .line{animation-delay:.12s}
.line-mask:nth-child(2) .line{animation-delay:.56s}
.line-mask:nth-child(3) .line{animation-delay:1s}
.line-accent{color:#fff}
/* one deliberate accent — draws itself in after the lines land, then holds */
.hero-rule{
  display:block;height:4px;width:clamp(50px,5.4vw,84px);
  margin:22px 0 20px;background:var(--red);
  transform:skewX(-30deg) scaleX(0);transform-origin:0 50%;
  animation:rule-in 1s cubic-bezier(.16,.84,.28,1) 2.84s forwards;
}
@keyframes rule-in{to{transform:skewX(-30deg) scaleX(1)}}

@keyframes slip{
  from{clip-path:polygon(0% -20%,0% -20%,-16% 120%,-16% 120%);transform:translateX(-2.2%)}
  to{clip-path:polygon(0% -20%,132% -20%,116% 120%,-16% 120%);transform:none}
}
.hero-sub{color:#d9e2f5;max-width:46ch;margin-bottom:24px;font-size:.94rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:32px}
/* hero buttons run slightly tighter than the site default */
.hero-actions .button{padding:12px 22px;font-size:.74rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 30px}
.hero-trust span{display:flex;flex-direction:column;gap:2px;font-size:.7rem;color:#b9c5de}
.hero-trust strong{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--font-display);font-stretch:115%;font-weight:800;
  font-size:.9rem;color:#fff;letter-spacing:.02em;
}
.hero-word{
  /* sits mostly below the fold — only the tops of the letters peek out, and
     they dissolve as the blue gradient strengthens */
  position:absolute;left:50%;bottom:var(--wm-gap);transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 28%,rgba(0,0,0,.6) 58%,rgba(0,0,0,.18) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 28%,rgba(0,0,0,.6) 58%,rgba(0,0,0,.18) 82%,transparent 100%);
  z-index:1;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-stretch:125%;font-style:italic;font-weight:900;
  font-size:var(--wm-size);line-height:1;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(160,185,235,.38);
}
@supports not (-webkit-text-stroke:1px black){.hero-word{color:rgba(160,185,235,.14)}}

/* ---------- Marquee ---------- */
/* The ticker sits flush on the blue band below — same flat blue, no seam */
.marquee{
  position:relative;overflow:clip;
  background:var(--blue);
  padding:22px 0;
  /* overlap the neighbours by 1px: at fractional browser zoom a boundary can
     land mid-pixel and let the page background show as a hairline */
  margin-top:-1px;margin-bottom:-1px;
}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee-group{display:flex;align-items:center;flex:none}
.marquee-group span{
  font-family:var(--font-display);font-stretch:125%;font-style:italic;font-weight:900;
  font-size:clamp(1.7rem,3.6vw,2.7rem);text-transform:uppercase;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);
  padding:0 26px;white-space:nowrap;
}
@supports not (-webkit-text-stroke:1px black){.marquee-group span{color:rgba(255,255,255,.3)}}
.marquee-group i{color:var(--red-bright);font-style:normal;font-size:.6rem;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Start here ---------- */
.start{background:var(--bg-2)}
.start-grid{display:grid;gap:16px}
.start-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--panel);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:26px 24px 24px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.start-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px 200px at 20% 0%,rgba(0,51,153,.07),transparent 70%);
}
.start-card:hover{transform:translateY(-5px);border-color:rgba(0,51,153,.3);box-shadow:var(--shadow-lift)}
.start-card:hover::before{opacity:1}
.start-num{
  font-family:var(--font-display);font-stretch:120%;font-style:italic;font-weight:850;
  font-size:.82rem;color:var(--red);letter-spacing:.12em;
}
.start-card h3{
  font-size:1.28rem;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.01em;
  color:var(--ink);
}
.start-card p{color:var(--muted);font-size:.92rem;flex:1}
.start-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-stretch:110%;font-weight:750;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
}
.start-cta .arw{color:var(--blue)}
.start-card:hover .arw{transform:translateX(4px)}
.start-card:hover .arw-ne{transform:rotate(-45deg) translateX(4px)}

/* ---------- Bikes ---------- */
.bikes{background:
  radial-gradient(900px 480px at 85% 8%,rgba(114,183,255,.14),transparent 70%),#fff}
.bike-stage{display:flex;flex-direction:column;gap:18px}
.bike-rail{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:none;
}
.bike-rail::-webkit-scrollbar{display:none}
/* fade on the right edge while more pills are hidden off-screen */
/* Soften whichever edge actually has pills hidden behind it, so a part-visible
   pill fades out instead of being sliced mid-word. */
.bike-rail.has-more:not(.has-prev){
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 52px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 52px),transparent);
}
.bike-rail.has-prev:not(.has-more){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42px,#000 100%);
  mask-image:linear-gradient(90deg,transparent,#000 42px,#000 100%);
}
.bike-rail.has-prev.has-more{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 52px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 52px),transparent);
}
.bike-tab{
  flex:none;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-stretch:112%;font-weight:700;
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:11px 18px;
  background:#fff;
  transition:color .25s,border-color .25s,background .25s;
  white-space:nowrap;
}
.bike-tab span{color:var(--red);font-style:italic;font-weight:850;font-size:.68rem}
.bike-tab:hover{color:var(--ink);border-color:rgba(0,51,153,.35)}
.bike-tab.is-active{
  color:#fff;background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  border-color:transparent;
}
.bike-tab.is-active span{color:rgba(255,255,255,.75)}

.rail-hint{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-stretch:110%;font-weight:650;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:#98a3b5;
  margin:-6px 0 2px 4px;
}
.rail-hint .arw{width:1.15em;height:1.15em}

.bike-view{position:relative}
.bike-slides{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.bike-slides::-webkit-scrollbar{display:none}
.bike-slide{
  position:relative;flex:0 0 100%;scroll-snap-align:start;
  /* scroll-snap-stop defaults to `normal`, which lets a fast flick carry
     momentum straight past a snap point and land two cards along. `always`
     forces the scroll to stop at every card, so one swipe = one card. */
  scroll-snap-stop:always;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--blue-deep);
  box-shadow:var(--shadow-soft);
}
.bike-slide img{width:100%;aspect-ratio:16/10;object-fit:cover}
.bike-ghost{
  position:absolute;top:10px;right:14px;z-index:2;pointer-events:none;
  font-family:var(--font-display);font-stretch:125%;font-style:italic;font-weight:900;
  font-size:clamp(2.2rem,7vw,5.4rem);line-height:1;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.62);
  mix-blend-mode:screen;
}
@supports not (-webkit-text-stroke:1px black){.bike-ghost{color:rgba(255,255,255,.3)}}
.bike-info{
  position:relative;z-index:2;color:#fff;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:20px 20px 22px;
  background:linear-gradient(180deg,rgba(0,40,124,.5),rgba(0,33,102,.95));
}
.bike-model{
  display:inline-flex;
  font-family:var(--font-display);font-stretch:110%;font-weight:700;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8fc0ff;
}
/* sized so the longest title ("Adventure & dual purpose") holds one line
   on every card at every width — measured, not guessed */
.bike-info h3{font-size:clamp(.78rem,3.9vw,1.2rem);font-weight:820;font-style:italic;text-transform:uppercase}
.bike-info p{color:#c5d2ea;font-size:.92rem;max-width:44ch}
.bike-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-family:var(--font-display);font-stretch:110%;font-weight:750;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;border-bottom:2px solid var(--red);padding-bottom:3px;
  transition:color .25s;
}
.bike-cta:hover{color:#8fc0ff}
.bike-meta{
  display:flex;align-items:center;gap:16px;margin-top:14px;
  font-family:var(--font-display);font-stretch:112%;font-weight:700;
  font-size:.72rem;letter-spacing:.14em;color:var(--muted);
}
.bike-count b{color:var(--ink);font-weight:850}
.bike-bar{flex:1;max-width:220px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.bike-bar i{display:block;height:100%;width:0;background:var(--red)}

/* ---------- Workshop ---------- */
.workshop{background:var(--bg-2)}
.workshop-console{display:flex;flex-direction:column;gap:22px}
.ws-intro{margin-bottom:26px}
.ws-item{border-bottom:1px solid var(--line)}
.ws-item:first-child{border-top:1px solid var(--line)}
.ws-head{
  width:100%;display:flex;align-items:center;gap:16px;
  padding:20px 4px;text-align:left;
}
.ws-num{
  font-family:var(--font-display);font-stretch:120%;font-style:italic;font-weight:850;
  font-size:.8rem;color:var(--muted);letter-spacing:.1em;flex:none;
  transition:color .3s;
}
.ws-head h3{
  /* sized from the longest title ("Mechanical & electrical") so every header
     holds one line at the same size, right down to small phones */
  flex:1;font-size:clamp(.66rem,calc((100vw - 112px) * .0505),1.32rem);
  font-weight:820;font-style:italic;
  text-transform:uppercase;letter-spacing:.01em;color:var(--muted);transition:color .3s;
  min-width:0;line-height:1.25;
}
.ws-icon{position:relative;width:30px;height:30px;flex:none;border:1px solid var(--line);border-radius:50%;transition:border-color .3s,background .3s}
.ws-icon::before,.ws-icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--muted);
  transition:transform .35s,background .3s;
}
.ws-icon::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.ws-icon::after{width:2px;height:12px;transform:translate(-50%,-50%)}
.ws-item.is-open .ws-icon{border-color:var(--blue);background:var(--blue-tint)}
.ws-item.is-open .ws-icon::before{background:var(--blue)}
.ws-item.is-open .ws-icon::after{transform:translate(-50%,-50%) scaleY(0);background:var(--blue)}
.ws-item.is-open .ws-num,.ws-item.is-open .ws-head h3{color:var(--ink)}
.ws-item.is-open .ws-num{color:var(--red)}
.ws-body{
  display:grid;grid-template-rows:0fr;grid-template-columns:100%;
  transition:grid-template-rows .45s cubic-bezier(.3,.7,.2,1);
}
.ws-body>*{overflow:hidden;min-height:0}
.ws-body p{color:var(--muted);max-width:54ch;padding-bottom:0;transition:padding .45s}
.ws-item.is-open .ws-body{grid-template-rows:1fr}
.ws-item.is-open .ws-body p{padding-bottom:20px}
.ws-mobile-img{border-radius:12px;margin-bottom:0;transition:margin .45s}
.ws-item.is-open .ws-mobile-img{margin-bottom:20px}
.ws-book{margin-top:26px;align-self:flex-start}

.workshop-visual{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);display:none;box-shadow:var(--shadow-lift)}
.ws-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.ws-img.is-active{opacity:1}
.ws-badge{
  position:absolute;left:18px;bottom:18px;z-index:2;
  display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);border-radius:14px;padding:12px 18px;
  font-size:.72rem;color:var(--muted);
}
.ws-badge strong{
  font-family:var(--font-display);font-stretch:115%;font-style:italic;font-weight:850;
  font-size:.95rem;color:var(--blue);text-transform:uppercase;letter-spacing:.03em;
}

/* ---------- Parts ---------- */
.parts{background:
  radial-gradient(760px 420px at 12% 100%,rgba(114,183,255,.12),transparent 70%),#fff}
.parts-grid{display:grid;gap:26px}
/* grid children default to min-width:auto, so a nowrap button inside the
   panel set a floor wider than the phone screen and clipped the section */
.parts-grid>*{min-width:0}
/* long label in a narrow panel: allow wrapping so it can never widen the grid */
.parts-panel .button{white-space:normal;text-align:center}
.parts-main .section-copy{margin-bottom:22px}
.parts-tags{display:flex;flex-wrap:wrap;gap:10px}
.parts-tags li{
  font-family:var(--font-display);font-stretch:110%;font-weight:650;
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:10px 17px;
  background:#fff;
  transition:border-color .25s,color .25s,transform .25s,background .25s;
}
.parts-tags li:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);background:var(--blue-tint)}
.parts-panel{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  border-radius:var(--radius);padding:30px 26px;
  color:#fff;
  background:
    radial-gradient(420px 260px at 85% -10%,rgba(114,183,255,.35),transparent 70%),
    linear-gradient(165deg,var(--blue),var(--blue-deep));
  border:1px solid rgba(0,42,128,.4);
  box-shadow:0 18px 44px rgba(0,42,128,.3);
}
.parts-glyph{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  margin-bottom:6px;
}
.parts-panel-kicker{
  font-family:var(--font-display);font-stretch:110%;font-weight:700;
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:#b9dcff;
}
.parts-panel strong{
  font-family:var(--font-display);font-stretch:115%;font-style:italic;font-weight:830;
  font-size:1.35rem;line-height:1.2;text-transform:uppercase;
}
.parts-panel p{color:#d5e3fb;font-size:.92rem;margin-bottom:10px}
.parts-panel .button-primary{
  background:#fff;color:var(--blue);
  box-shadow:0 10px 26px rgba(2,10,40,.3);
}
.parts-panel .button-primary:hover{box-shadow:0 16px 34px rgba(2,10,40,.4)}

/* ---------- About ---------- */
.about{background:var(--bg-2)}
.about-grid{display:grid;gap:34px;align-items:center}
.about-photo{position:relative;max-width:440px;margin-inline:auto;width:100%}
.about-photo img{
  border-radius:var(--radius);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-lift);
}
.about-photo::before{
  content:"";position:absolute;inset:-10px;z-index:-1;
  border-radius:calc(var(--radius) + 6px);
  background:linear-gradient(160deg,rgba(0,51,153,.3),rgba(254,2,15,.22));
  opacity:.45;filter:blur(10px);
}
.about-photo figcaption{
  position:absolute;left:50%;transform:translateX(-50%);bottom:16px;
  white-space:nowrap;max-width:calc(100% - 24px);
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);border-radius:999px;padding:9px 16px;
  font-family:var(--font-display);font-stretch:110%;font-weight:700;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  box-shadow:var(--shadow-soft);
}
.about-copy{display:flex;flex-direction:column;gap:16px}
.about-copy>p{color:var(--muted);max-width:56ch}
/* Stats: stacked rows on mobile, three divided columns on desktop */
.about-stats{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--line)}
/* Stack the caption under the number on mobile, the same way the >=720 layout
   already does. Side by side, a longer caption ("Service & repairs") wrapped
   to two lines against the nowrap number. */
.about-stats div{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.about-stats div:last-child{border-bottom:0}
.about-stats strong{
  font-family:var(--font-display);font-stretch:120%;font-style:italic;font-weight:880;
  font-size:1.3rem;color:var(--blue);text-transform:uppercase;line-height:1.1;
  flex:none;white-space:nowrap;
}
.about-stats div>span{font-size:.82rem;color:var(--muted)}
.about-stats strong span{font-size:inherit;color:inherit}
@media (min-width:720px){
  .about-stats{flex-direction:row;border-top:1px solid var(--line);padding-top:22px;margin-top:16px}
  .about-stats div{
    flex:1;flex-direction:column;align-items:flex-start;gap:5px;
    padding:0 18px;border-bottom:0;border-left:1px solid var(--line);
  }
  .about-stats div:first-child{border-left:0;padding-left:0}
  .about-stats strong{font-size:clamp(1.15rem,1.6vw,1.45rem)}
}

/* ---------- Reviews ---------- */
.reviews{background:
  radial-gradient(820px 460px at 90% 100%,rgba(114,183,255,.12),transparent 70%),#fff}
.reviews-score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.reviews-score strong{
  font-family:var(--font-display);font-stretch:122%;font-style:italic;font-weight:900;
  font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--blue);
}
.reviews-score small{color:var(--muted);font-size:.82rem}
.reviews-slider{position:relative}
.reviews-track{
  display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  /* the scroller clips on both axes — headroom so the hover lift isn't cut */
  padding:10px 4px 8px;margin:-10px -4px 0;
  scrollbar-width:none;cursor:grab;
}
.reviews-track::-webkit-scrollbar{display:none}
.reviews-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.review-card{
  flex:0 0 min(86%,340px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:14px;
  background:var(--panel);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:24px 22px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  box-shadow:var(--shadow-soft);
}
.review-card:hover{transform:translateY(-4px);border-color:rgba(0,51,153,.25);box-shadow:var(--shadow-lift)}
.review-card .stars{font-size:.8rem}
.review-card p{color:#333d4d;font-size:.94rem;flex:1}
.review-card footer{display:flex;align-items:center;gap:12px}
.review-avatar{
  width:40px;height:40px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--blue-bright),var(--blue-deep));
  font-family:var(--font-display);font-stretch:115%;font-weight:800;font-size:.78rem;
  color:#fff;letter-spacing:.04em;
}
.review-card footer strong{display:block;font-size:.9rem;font-weight:600;color:var(--ink)}
.review-card footer small{color:var(--muted);font-size:.74rem}
.reviews-controls{display:flex;align-items:center;gap:18px;margin-top:18px}
.reviews-progress{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.reviews-progress i{display:block;height:100%;width:0;background:var(--red);transition:width .25s}
.reviews-arrows{display:flex;gap:10px}
.reviews-arrows button{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink);font-size:1rem;
  background:#fff;
  transition:border-color .25s,background .25s,transform .25s,color .25s;
}
.reviews-arrows button:hover{border-color:var(--blue);background:var(--blue-tint);color:var(--blue);transform:translateY(-2px)}

/* ---------- Contact ---------- */
.contact{background:var(--bg-2)}
.contact-grid{display:grid;gap:30px}
.contact-info{display:flex;flex-direction:column;gap:26px}
.contact-info h2{margin-bottom:14px}
.contact-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.contact-tiles a,.contact-tiles div{
  display:flex;flex-direction:column;gap:4px;
  background:var(--panel);
  border:1px solid var(--line-soft);border-radius:14px;
  padding:16px;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  min-width:0;
  box-shadow:var(--shadow-soft);
}
.contact-tiles a:hover{transform:translateY(-3px);border-color:rgba(0,51,153,.35);box-shadow:var(--shadow-lift)}
.contact-tiles span{
  font-family:var(--font-display);font-stretch:110%;font-weight:700;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}
.contact-tiles strong{font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.35}
.footer-mail{
  font-size:.9rem;color:var(--blue);font-weight:600;
  border-bottom:1px solid rgba(0,51,153,.3);align-self:flex-start;
  transition:color .25s,border-color .25s;
}
.footer-mail:hover{color:var(--blue-deep);border-bottom-color:var(--blue-deep)}
.contact-social{display:flex;gap:10px}
.contact-social a{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--muted);
  background:#fff;
  transition:color .25s,border-color .25s,transform .25s,background .25s;
}
.contact-social a:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-tint);transform:translateY(-3px)}

.contact-form{
  position:relative;
  display:flex;flex-direction:column;gap:15px;
  background:var(--panel);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:28px 24px;
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.form-head span{
  font-family:var(--font-display);font-stretch:115%;font-style:italic;font-weight:830;
  font-size:1.05rem;text-transform:uppercase;color:var(--ink);
}
.form-head small{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.72rem}
.contact-form label{
  display:flex;flex-direction:column;gap:7px;
  font-family:var(--font-display);font-stretch:110%;font-weight:700;
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.contact-form input,.contact-form select,.contact-form textarea{
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;
  transition:border-color .25s,box-shadow .25s,background .25s;
  width:100%;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(91,102,117,.5)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,51,153,.12);
}
.contact-form select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px;background-repeat:no-repeat}
.contact-form textarea{resize:vertical;min-height:96px}
.form-submit{margin-top:6px}

.map-frame{
  position:relative;height:clamp(260px,56vw,340px);
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
.map-open{
  position:absolute;right:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-stretch:110%;font-weight:750;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  border:1px solid rgba(0,42,128,.4);border-radius:999px;padding:10px 16px;
  transition:box-shadow .25s,transform .25s;
  box-shadow:0 8px 22px rgba(0,42,128,.3);
}
.map-open:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,42,128,.4)}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;background:#fff;
  border-top:1px solid var(--line-soft);
  padding-top:54px;
  padding-bottom:calc(86px + env(safe-area-inset-bottom));
}
.footer-top{display:flex;flex-direction:column;gap:30px;align-items:flex-start}
.footer-brand{display:flex;flex-direction:column;gap:16px;max-width:380px}
.footer-brand p{color:var(--muted);font-size:.9rem}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-nav a{
  font-family:var(--font-display);font-stretch:110%;font-weight:650;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  transition:color .25s;padding:4px 0;
}
.footer-nav a:hover{color:var(--blue)}
.footer-bottom{
  display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--line-soft);
  margin-top:34px;padding-top:22px;
  font-size:.78rem;color:var(--muted);
}
.footer-bottom a{color:var(--blue);transition:color .25s}
.footer-bottom a:hover{color:var(--blue-deep)}

/* ---------- Mobile action bar ---------- */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid var(--line-soft);
  box-shadow:0 -6px 24px rgba(16,35,80,.08);
}
.action-bar a{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--font-display);font-stretch:110%;font-weight:750;
  font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--line);border-radius:999px;
  padding:12px 8px;min-height:46px;
  background:#fff;
}
.action-bar .action-wa{
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  color:#fff;border-color:transparent;
  box-shadow:0 8px 22px rgba(0,51,153,.28);
}

/* ==========================================================================
   Blue bands — .section-blue turns a section into a full Suzuki-blue field
   (white cards keep their light styling; loose text flips to light-on-blue)
   ========================================================================== */
.section-blue{
  background:
    radial-gradient(760px 360px at 85% 0%,rgba(114,183,255,.2),transparent 70%),
    linear-gradient(180deg,var(--blue) 0%,#002d8f 55%,var(--blue-deep) 100%);
  color:#fff;
}
/* Start band opens flat so the ticker above merges into it seamlessly */
.start.section-blue{
  background:linear-gradient(180deg,var(--blue) 0%,var(--blue) 8%,#002d8f 60%,var(--blue-deep) 100%);
}

.section-blue .eyebrow{color:#aaccff}
.section-blue .eyebrow i{background:var(--red-bright)}
.section-blue h2{color:#fff}
.section-blue h2 em{
  color:#fff;
  background:linear-gradient(var(--red-bright),var(--red-bright)) 0 100%/100% .09em no-repeat;
  padding-bottom:.12em;
}
.section-blue .section-copy{color:#ccd9f2}

/* workshop console on blue */
.section-blue .ws-item{border-color:rgba(255,255,255,.22)}
.section-blue .ws-item:first-child{border-top-color:rgba(255,255,255,.22)}
.section-blue .ws-num{color:#8fb3e8}
.section-blue .ws-head h3{color:#b9cbe9}
.section-blue .ws-item.is-open .ws-head h3{color:#fff}
.section-blue .ws-item.is-open .ws-num{color:var(--red-bright)}
.section-blue .ws-icon{border-color:rgba(255,255,255,.35)}
.section-blue .ws-icon::before,.section-blue .ws-icon::after{background:#cdd9f2}
.section-blue .ws-item.is-open .ws-icon{border-color:var(--red-bright);background:rgba(255,59,68,.16)}
.section-blue .ws-item.is-open .ws-icon::before,
.section-blue .ws-item.is-open .ws-icon::after{background:#fff}
.section-blue .ws-body p{color:#ccd9f2}
.section-blue .ws-book{background:#fff;color:var(--blue);box-shadow:0 10px 26px rgba(2,10,40,.35)}
.section-blue .ws-book span{color:var(--red)}
.section-blue .ws-book:hover{box-shadow:0 16px 34px rgba(2,10,40,.45)}
.section-blue .workshop-visual{border-color:rgba(255,255,255,.2)}

/* about on blue */
.section-blue .about-copy>p{color:#ccd9f2}
.section-blue .about-stats{border-top-color:rgba(255,255,255,.25)}
.section-blue .about-stats div{border-bottom-color:rgba(255,255,255,.18)}
.section-blue .about-stats div::before{
  content:"";width:16px;height:3px;flex:none;align-self:flex-start;margin-bottom:3px;
  background:var(--red-bright);transform:skewX(-30deg);
}
.section-blue .about-stats strong{color:#fff}
.section-blue .about-stats strong span{color:inherit}
.section-blue .about-stats div>span{color:#b9cbe9}
@media (min-width:720px){
  .section-blue .about-stats div{border-left-color:rgba(255,255,255,.18)}
  .section-blue .about-stats div::before{width:24px;align-self:flex-start;margin-bottom:5px}
}
.section-blue .about-photo img{border-color:rgba(255,255,255,.3)}
.section-blue .about-photo::before{
  background:linear-gradient(160deg,rgba(114,183,255,.55),rgba(254,2,15,.32));opacity:.6;
}

/* contact on blue (form + tiles stay white cards) */
.section-blue .contact-tiles span{color:var(--red)}
.section-blue .contact-social a{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);color:#dbe6fa;
}
.section-blue .contact-social a:hover{background:#fff;color:var(--blue);border-color:#fff}
.section-blue .map-frame{border-color:rgba(255,255,255,.28)}

/* ---------- Floating back-to-top ---------- */
.to-top{
  position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:55;
  width:46px;height:46px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--blue);
  font-size:1.05rem;box-shadow:var(--shadow-lift);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,visibility .3s,transform .3s,background .25s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--blue-tint)}
@media (min-width:960px){
  .to-top{right:22px;bottom:22px}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.25,.7,.3,1),transform .7s cubic-bezier(.25,.7,.3,1)}
/* Hero only: the headline is the one thing that MOVES. Supporting content
   arrives in place on a barely-there 8px lift, staggered into a cascade
   instead of the single 26px slab all four used to share. Site-wide
   .reveal is deliberately untouched. */
.hero .reveal{transform:translateY(8px);transition-duration:1.1s}
.hero .hero-chip{transition-delay:0s}
.hero .hero-sub{transition-delay:3.08s}
.hero .hero-actions{transition-delay:3.32s}
.hero .hero-trust{transition-delay:3.56s}
.reveal.is-visible{opacity:1;transform:none}
.start-grid .start-card:nth-child(2){transition-delay:.08s}
.start-grid .start-card:nth-child(3){transition-delay:.16s}

/* ==========================================================================
   ≥720px
   ========================================================================== */
@media (min-width:720px){
  .start-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .parts-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start;gap:44px}
  /* stretch the copy column and pin the stats low, so both columns finish
     on the same line instead of leaving a hole under the text */
  .about-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:stretch}
  /* the figure must hug its image, otherwise it stretches to the row height and
     the caption (bottom:16px) detaches and floats below the photo */
  .about-photo{align-self:start}
  .about-stats{margin-top:auto}
  /* contact: form spans the right; map slots under the info/socials on the left */
  .contact-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    gap:30px 40px;align-items:start;
  }
  .contact-info{grid-column:1;grid-row:1}
  .contact-form{grid-column:2;grid-row:1 / span 2}
  /* min-height:0 so it stretches to the row exactly and bottom-aligns with the form */
  .contact-grid .map-frame{grid-column:1;grid-row:2;height:auto;min-height:0;align-self:stretch}
  .footer-top{flex-direction:row;justify-content:space-between;align-items:flex-start}
  .footer-bottom{flex-direction:row;justify-content:space-between;gap:18px}
  .review-card{flex-basis:calc((100% - 16px)/2)}
}

/* ==========================================================================
   ≥960px — desktop pillar
   ========================================================================== */
@media (min-width:960px){

  .oneline{white-space:nowrap}
  .hero-sub{font-size:.97rem}

  /* Bikes: cinematic stage — rail wide enough that every pill holds one line */
  .bike-stage{display:grid;grid-template-columns:340px minmax(0,1fr);gap:26px;align-items:start}
  .bike-rail{flex-direction:column;overflow:visible;padding-bottom:0;gap:8px}
  .bike-rail.has-more,.bike-rail.has-prev{-webkit-mask-image:none;mask-image:none}
  .rail-hint{display:none}
  .bike-tab{
    display:flex;align-items:center;gap:14px;width:100%;
    border-radius:14px;padding:15px 18px;font-size:.78rem;
    border:1px solid var(--line);
    background:#fff;
    white-space:nowrap;text-align:left;line-height:1.3;
  }
  .bike-tab.is-active{
    background:linear-gradient(120deg,var(--blue-tint),#fff 70%);
    border-color:var(--blue);color:var(--ink);
  }
  .bike-tab.is-active span{color:var(--red)}
  .bike-slides{display:block;overflow:visible;position:relative;border-radius:var(--radius)}
  .bike-slide{
    position:absolute;inset:0;flex:none;
    opacity:0;transform:scale(1.02);
    transition:opacity .6s,transform .6s;
    pointer-events:none;
  }
  .bike-slide.is-active{position:relative;opacity:1;transform:none;pointer-events:auto}
  .bike-slide img{aspect-ratio:auto;height:520px}
  .bike-info{
    position:absolute;left:24px;bottom:24px;right:auto;max-width:440px;
    border-radius:16px;border:1px solid rgba(255,255,255,.16);
    background:rgba(0,36,112,.78);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    padding:22px 24px;
  }
  .bike-info h3{font-size:1.14rem}
  .bike-ghost{top:18px;right:24px}
  .bike-meta{margin-top:16px}

  /* Workshop: console + sticky visual */
  .workshop-console{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:54px;align-items:start}
  .workshop-visual{display:block;height:520px}
  .ws-mobile-img{display:none}
  .ws-head{padding:23px 6px}
  .ws-head h3{white-space:nowrap}
}


/* The header nav only fits alongside the full-size logo from ~1120px up;
   below that the hamburger + bottom action bar take over. */
@media (min-width:1120px){
  .site-nav{display:flex}
  .nav-cta{display:inline-flex}
  .menu-toggle,.mobile-menu{display:none}
  .action-bar{display:none}
  .site-footer{padding-bottom:34px}
}

/* ==========================================================================
   ≥1100 / ≥1200px
   ========================================================================== */
@media (min-width:1100px){
  .review-card{flex-basis:calc((100% - 32px)/3)}
}
@media (min-width:1200px){
  .bike-stage{grid-template-columns:360px minmax(0,1fr)}
  .hero-sub{max-width:50ch}
}

/* ==========================================================================
   ≤959px / ≤600px polish
   ========================================================================== */
@media (max-width:959px){
  .contact-info h2{font-size:clamp(1.3rem,5.6vw,2.1rem)}
}
/* short laptop screens: pull the hero's spacing in so everything, including
   the ratings row, stays above the fold */
@media (min-width:760px) and (max-height:820px){
  .hero{padding-top:calc(var(--header-h) + 42px);padding-bottom:calc(max(64px, .38 * var(--wm-size) + 24px) + .62 * var(--wm-size) + var(--wm-gap))}
  .hero-chip{margin-bottom:14px}
  .hero-rule{margin:14px 0 14px}
  .hero-sub{margin-bottom:18px}
  .hero-actions{margin-bottom:20px}
}

/* the oversized OVERBERG watermark is a desktop-only flourish */
@media (max-width:959px){
  .hero-word{display:none}
}

@media (max-width:600px){
  /* the drag rail's pills, 10% down (Theo, mobile review) */
  .bike-tab{font-size:.666rem;letter-spacing:.063em;gap:9px;padding:9.9px 16.2px}
  .bike-tab span{font-size:.612rem}

  /* ---- mobile fixes 2026-08-26 (Theo's phone review) ----------------------
     .eyebrow is white-space:nowrap, so a long one sets the min-content width of
     its whole grid column and drags the section off-screen. That is what pushed
     the About copy, photo and pill ~38px past the viewport at 360px. Scale the
     eyebrows down so even the longest ("Family-run in the Overberg since 2000")
     fits inside .wrap, and add min-width:0 so a nowrap child can never widen a
     column again. */
  .eyebrow{font-size:.58rem;letter-spacing:.1em;gap:8px;margin-bottom:12px}
  .eyebrow i{width:20px}
  .about-grid>*{min-width:0}

  /* headings: one size down across the board so "the right Suzuki." holds two
     lines like its siblings instead of three */
  h2{font-size:clamp(1.3rem,6.4vw,1.75rem)}

  /* parts pills sized down */
  .parts-tags li{font-size:.68rem;padding:8px 13px;letter-spacing:.04em}

  /* parts panel CTA on a single line */
  .parts-panel .button{font-size:.72rem;letter-spacing:.05em;padding:14px 18px;white-space:nowrap}

  /* owners caption: a compact pill that sits on the photo, not a full-width bar */
  .about-photo figcaption{font-size:.58rem;letter-spacing:.07em;padding:7px 12px;bottom:12px}

  /* contact tiles: keep label and value each on one line */
  .contact-tiles span{white-space:nowrap;font-size:.6rem}
  .contact-tiles strong{white-space:nowrap;font-size:.82rem}

  /* tighter furniture leaves room for the title to stay on one line */
  .ws-head{gap:10px;padding:18px 2px}
  .ws-icon{width:26px;height:26px}
  .ws-num{font-size:.72rem}
  .hero{padding-bottom:96px}
  .hero-title{max-width:none;font-size:clamp(2rem,9.6vw,2.5rem)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .button{width:100%}
  .hero-trust{gap:10px 22px}
  .chip-extra{display:none}
  .hero-chip{font-size:.66rem}
  .about-photo::before{inset:-7px}
  .bike-info{padding:18px 16px 20px}
  .form-head{flex-direction:column;align-items:flex-start;gap:6px}
  /* footer nav: all six links on one line, even at 360px */
  .footer-nav{gap:6px 8px;flex-wrap:nowrap}
  .footer-nav a{font-size:.58rem;letter-spacing:.06em}
  /* contact tiles: single-column rows, label left / value right */
  .contact-tiles{grid-template-columns:1fr}
  .contact-tiles a,.contact-tiles div{
    flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
    padding:14px 16px;
  }
  .contact-tiles strong{text-align:right}
}

@media (max-width:380px){
  .action-bar{gap:6px;padding-left:10px;padding-right:10px}
  .action-bar a{font-size:.62rem;gap:5px;padding:12px 4px;white-space:nowrap}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .line{transform:none;animation:none;clip-path:none}
  .hero-rule{animation:none;transform:skewX(-30deg) scaleX(1)}
  .hero-media img{animation:none;transform:none}
  .marquee-track{animation:none}
  .reveal{opacity:1;transform:none}
  .hero .reveal{transform:none;transition-delay:0s}
}