/* ==========================================================================
   Torque & Tread — Motorcycle Service & Repair Workshop
   Main stylesheet (no framework dependency)

   Scrolling note: neither <html> nor <body> sets `overflow` to hidden/auto.
   Setting overflow on both creates a second scroll container, which is what
   produced the "double scrollbar" on the previous version. Horizontal
   overflow is contained with `overflow-x: clip` on body only, which does
   not create a scroll container.
   ========================================================================== */

:root {
  /* Brand */
  --red: #d9041a;            /* buttons, links, accents on light surfaces */
  --red-hover: #b80316;
  --red-bright: #fb0216;     /* logo red, used on dark surfaces only */
  --graphite: #17191c;       /* header, footer, dark bands */
  --graphite-2: #212429;
  --graphite-3: #2c3036;

  /* Surfaces (light theme) */
  --bg: #ffffff;
  --concrete: #eef0f1;       /* workshop-floor grey for alternating bands */
  --surface: #ffffff;
  --text: #1b1d21;
  --muted: #555b64;
  --line: #d8dbde;

  --on-dark: #ffffff;
  --on-dark-muted: #b4b9c0;
  --line-dark: #363a41;

  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', Roboto, Arial, sans-serif;

  --container: 100%;
  --gutter: 20px;
  --section-y: clamp(64px, 8vw, 112px);

  /* One hero height for every page */
  --hero-h: clamp(560px, 78svh, 740px);

  --radius: 6px;
  --shadow: 0 18px 40px -24px rgba(15, 17, 20, 0.45);
  --header-h: 84px;
}


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 600; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.35rem, 1.6vw, 1.6rem); }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 2000; background: var(--red); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* Full-width layout: all page sections, header and footer span the viewport. */
.site-header, .site-footer, .topbar { width: 100%; }
.site-header .container, .site-footer .container, .topbar .container { max-width: none; }
.section { padding-block: var(--section-y); }
.section--concrete { background: var(--concrete); }
.section--dark { background: var(--graphite); color: var(--on-dark); }
.section--dark .muted, .section--dark p { color: var(--on-dark-muted); }
.section-head { max-width: 680px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head p { color: var(--muted); font-size: 1.125rem; margin: 0; }
.section--dark .section-head p { color: var(--on-dark-muted); }
.section-head--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.section-head--row > div { max-width: 640px; }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 26px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em;
  border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-hover); }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--light:hover { background: #fff; color: var(--graphite); border-color: #fff; }
.btn--outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn--outline:hover { background: var(--text); color: var(--bg); }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .65; pointer-events: none; }

.text-link {
  font-weight: 600; color: var(--red); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.text-link:hover { color: var(--red-hover); }

/* ---------- Top bar + header ---------- */
.topbar { background: #0f1113; color: var(--on-dark-muted); font-size: .92rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--red-bright); }
.topbar__group { display: flex; gap: 24px; align-items: center; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar svg { width: 16px; height: 16px; color: var(--red-bright); }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--graphite); color: #fff;
  border-bottom: 3px solid var(--red-bright);
  transition: box-shadow .25s;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 62px; width: auto; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__list > li { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  color: #e9ebee; text-decoration: none; background: none; border: 0; cursor: pointer;
  border-radius: var(--radius);
}
.nav__link:hover, .nav__link[aria-current='page'] { color: #fff; }
.nav__link[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--red-bright); border-radius: 0; }
.nav__link svg { width: 14px; height: 14px; transition: transform .2s; }
.nav__sub {
  position: absolute; top: 100%; inset-inline-start: 0; min-width: 220px; list-style: none;
  background: var(--graphite-2); border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 8px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.nav__sub a { display: block; padding: 10px 12px; color: #e9ebee; text-decoration: none; border-radius: 4px; font-weight: 500; }
.nav__sub a:hover, .nav__sub a[aria-current='page'] { background: var(--graphite-3); color: #fff; }
.has-sub:hover .nav__sub, .has-sub:focus-within .nav__sub, .has-sub.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover .nav__link svg, .has-sub.is-open .nav__link svg { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center; flex: none;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); cursor: pointer;
}
.icon-btn:hover { border-color: var(--red-bright); color: var(--red-bright); }
.icon-btn svg { width: 20px; height: 20px; }
.dir-toggle {
  height: 44px; min-width: 56px; padding: 0 12px; flex: none; display: inline-grid; place-items: center;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .85rem; letter-spacing: .08em;
}
.dir-toggle:hover, .dir-toggle[aria-pressed='true'] { border-color: var(--red-bright); color: var(--red-bright); }
.dir-toggle:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.theme-toggle .icon-moon { display: none; }
.nav-toggle { display: none; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: background .2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform .2s; }
.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); }
.nav__cta-mobile { display: none; }

/* ---------- Hero (shared height on every page) ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: var(--hero-h);
  display: flex; align-items: center;
  background: var(--graphite); color: #fff;
  padding-block: 56px;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(14,15,17,.94) 0%, rgba(14,15,17,.82) 38%, rgba(14,15,17,.35) 72%, rgba(14,15,17,.15) 100%),
    linear-gradient(0deg, rgba(14,15,17,.55) 0%, rgba(14,15,17,0) 35%);
}
.hero__inner { width: 100%; }
.hero__content { max-width: 660px; }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero__lede { font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: #d7dbe0; max-width: 560px; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); }
.hero__facts li { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.hero__facts svg { width: 20px; height: 20px; color: var(--red-bright); flex: none; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-bottom: 18px; font-weight: 600; font-size: .98rem; color: var(--on-dark-muted); }
.breadcrumb a { color: #fff; text-decoration: none; }
.breadcrumb a:hover { color: var(--red-bright); }
.breadcrumb li + li::before { content: '/'; margin-inline-end: 8px; color: #7d838b; }

/* Home 1 hero: job-ticket panel (the signature element) */
.hero--home .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: center; }
.job-ticket {
  position: relative; background: #fff; color: var(--graphite); border-radius: 10px;
  padding: 26px 26px 22px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  --notch: 12px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 128px, transparent 98%, #000) , radial-gradient(circle var(--notch) at 100% 128px, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.job-ticket__head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.job-ticket__title { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1; margin: 0; }
.job-ticket__no { white-space: nowrap; font-family: var(--font-display); font-weight: 600; color: var(--red); font-size: 1.05rem; }
.job-ticket__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; color: #1e7a4f; font-size: .98rem; }
.job-ticket__status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #1fa463; box-shadow: 0 0 0 4px rgba(31,164,99,.18); }
.job-ticket__perf { border-top: 2px dashed #c9cdd2; margin: 22px -26px 18px; }
.job-ticket ul { list-style: none; display: grid; gap: 12px; margin-bottom: 20px; }
.job-ticket li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.job-ticket li .tick { width: 22px; height: 22px; flex: none; border-radius: 4px; background: var(--red); color: #fff; display: grid; place-items: center; }
.job-ticket li .tick svg { width: 14px; height: 14px; }
.job-ticket__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .95rem; color: #555b64; margin-bottom: 16px; }
.job-ticket__foot strong { display: block; color: var(--graphite); font-size: 1.05rem; }

/* Home 2: split hero */
.hero.hero--split { padding: 0; align-items: stretch; background: var(--graphite); }
.hero--split h1, .hero--home h1 { font-size: clamp(2.5rem, 4.4vw, 4.2rem); }
.hero--split::before { display: none; }
.hero--split .split-hero { display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: var(--hero-h); }
.split-hero__text {display: flex; flex-direction: column; justify-content: center; padding: px clamp(24px, 5vw, 72px); padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); position: relative; }
.split-hero__text::after { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-end: -1px; width: 8px; background: var(--red-bright); }
.split-hero__media { position: relative; }
.split-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-hero__badge {
  position: absolute; inset-inline-start: 28px; bottom: 96px; background: rgba(23,25,28,.9); backdrop-filter: blur(4px);
  color: #fff; padding: 16px 20px; border-radius: var(--radius); border-inline-start: 4px solid var(--red-bright); max-width: 300px;
}
.split-hero__badge strong { font-family: var(--font-display); font-size: 1.4rem; display: block; line-height: 1.1; }
.split-hero__badge span { color: var(--on-dark-muted); font-size: .95rem; }

/* ---------- Brand strip (logo plates) ---------- */
.brand-strip { background: var(--graphite-2); color: #fff; padding-block: 28px; border-bottom: 1px solid var(--line-dark); }
.brand-strip .container { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.brand-strip__label { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.1; max-width: 170px; }
.brand-strip__label span { display: block; color: var(--on-dark-muted); font-family: var(--font-body); font-weight: 500; font-size: .92rem; margin-top: 4px; }
.logo-row { display: grid; grid-template-columns: repeat(9, minmax(0,1fr)); gap: 10px; list-style: none; }
.logo-plate { height: 76px; display: grid; place-items: center; padding: 10px 12px; background: var(--graphite); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.logo-plate img { max-height: 54px; max-width: 100%; width: auto; object-fit: contain; }
.logo-plate--text { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: #fff; text-align: center; line-height: 1.05; }

/* ---------- Service cards (photo-led) ---------- */
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; list-style: none; }
.service-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.service-card:hover { border-color: var(--red); box-shadow: var(--shadow); }
.service-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--concrete); }
.service-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.service-card:hover .service-card__img img { transform: scale(1.05); }
.service-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.service-card h3 { margin-bottom: 8px; }
.service-card h3 a { text-decoration: none; }
.service-card h3 a::after { content: ''; position: absolute; inset: 0; }
.service-card p { color: var(--muted); font-size: 1rem; margin-bottom: 16px; }
.service-card__meta { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--muted); }
.service-card__meta strong { color: var(--text); font-weight: 700; }

/* ---------- Split (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--wide-media { grid-template-columns: 1.1fr 1fr; }
.split__media { position: relative; }
.split__media > img { width: 100%; height: 630px; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }
.split__medias > img { width: 100%; height: 380px; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }
.media-stack { position: relative; padding-bottom: 60px; padding-inline-end: 60px; }
.media-stack > img:first-child { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.media-stack > img:nth-child(2) { position: absolute; inset-inline-end: 0; bottom: 0; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 6px solid var(--bg); }
.since-badge {
  position: absolute; top: 20px; inset-inline-start: -14px; background: var(--red); color: #fff; padding: 14px 18px; border-radius: var(--radius);
  font-family: var(--font-display); line-height: 1; box-shadow: var(--shadow);
}
.since-badge strong { display: block; font-size: 2.6rem; font-weight: 600; }
.since-badge span { display: block; font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin: 32px 0; border-block: 1px solid var(--line); }
.stats > div { padding: 18px 16px 18px 0; }
.stats > div + div { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.stats dt { color: var(--muted); font-size: .95rem; line-height: 1.3; }
.stats dd { order: -1; margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; line-height: 1; }
.stats > div { display: flex; flex-direction: column; }
.section--dark .stats, .stats--dark { border-color: var(--line-dark); }
.stats--dark { max-width: 540px; margin-bottom: 0; }
.stats--dark > div + div { border-color: var(--line-dark); }
.stats--dark dt { color: var(--on-dark-muted); }
.stats--dark dd { color: #fff; }
.section--dark .stats > div + div { border-color: var(--line-dark); }
.section--dark .stats dt { color: var(--on-dark-muted); }

.check-list { list-style: none; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list svg { width: 20px; height: 20px; color: var(--red); flex: none; margin-top: 3px; }
.section--dark .check-list svg { color: var(--red-bright); }

/* ---------- Process steps (real sequence, so numbered) ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 18px; list-style: none; counter-reset: step; }
.step { position: relative; }
.step__img { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.step__img img { width: 100%; height: 100%; object-fit: cover; }
.step__num {
  position: absolute; top: 12px; inset-inline-start: 12px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--red-bright); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
}
.step h3 { font-size: 1.4rem; margin-bottom: 6px; }
.step p { font-size: 1rem; margin: 0; }
.steps-rail { position: relative; }

/* ---------- Reasons (why choose us) ---------- */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 36px; list-style: none; margin-top: 28px; }
.reasons li { padding-top: 16px; border-top: 3px solid var(--red); }
.reasons h3 { font-size: 1.35rem; margin-bottom: 6px; }
.reasons p { color: var(--muted); margin: 0; font-size: 1rem; }

.reason-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; list-style: none; }
.reason-tile { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.reason-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.reason-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14,15,17,.92) 0%, rgba(14,15,17,.55) 45%, rgba(14,15,17,.05) 100%); }
.reason-tile:hover img { transform: scale(1.05); }
.reason-tile__body { padding: 22px; }
.reason-tile h3 { color: #fff; margin-bottom: 6px; }
.reason-tile p { color: #d7dbe0; margin: 0; font-size: 1rem; }

/* ---------- Testimonials ---------- */
.testimonials { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; list-style: none; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; height: 100%; }
.stars { display: flex; gap: 3px; color: #f2a900; margin-bottom: 14px; }
.stars svg { width: 18px; height: 18px; }
.review blockquote { margin: 0 0 22px; font-size: 1.08rem; line-height: 1.55; }
.review__who { margin-top: auto; display: flex; gap: 14px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); }
.review__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; }
.review__who strong { display: block; }
.review__who span { color: var(--muted); font-size: .95rem; }
.review__bike { display: inline-block; margin-top: 2px; font-weight: 600; color: var(--red) !important; }

.quote-feature { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.quote-feature img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--radius); }
.quote-feature blockquote { margin: 0 0 24px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.2; color: #fff; }
.quote-feature cite { font-style: normal; color: var(--on-dark-muted); }
.quote-feature cite strong { color: #fff; display: block; font-size: 1.15rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; isolation: isolate; color: #fff; padding-block: clamp(64px, 8vw, 100px); overflow: hidden; background: var(--graphite); }
.cta-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,15,17,.95) 0%, rgba(14,15,17,.8) 50%, rgba(14,15,17,.45) 100%); }
.cta-band .container { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; max-width: 620px; }
.cta-band p { color: #d7dbe0; max-width: 560px; margin: 0; font-size: 1.125rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.phone-big { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; }
.phone-big svg { width: 26px; height: 26px; color: var(--red-bright); }

/* ---------- Home 2 pieces ---------- */
.callback { position: relative; z-index: 2; margin-top: -54px; }
.callback__card { background: var(--surface); border-radius: 10px; box-shadow: 0 24px 50px -24px rgba(15,17,20,.5); border: 1px solid var(--line); padding: 24px 28px; display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; }
.callback__card h2 { font-size: 1.9rem; margin: 0 0 4px; }
.callback__card p { margin: 0; color: var(--muted); font-size: 1rem; }
.callback__form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: start; }
.callback__success { grid-column: 1 / -1; }

.feature-services { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; list-style: none; }
.feature-service { display: grid; grid-template-columns: 44% 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: relative; min-height: 240px; transition: border-color .2s; }
.feature-service:hover { border-color: var(--red); }
.feature-service__img { position: relative; }
.feature-service__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-service__body { padding: 24px; display: flex; flex-direction: column; }
.feature-service h3 a { text-decoration: none; }
.feature-service h3 a::after { content: ''; position: absolute; inset: 0; }
.feature-service p { color: var(--muted); font-size: 1rem; }
.price-from { margin-top: auto; font-weight: 600; color: var(--muted); font-size: .98rem; }
.price-from strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--text); margin-inline-start: 4px; }

.timeline { list-style: none; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; position: relative; padding-bottom: 26px; }
.timeline li:not(:last-child)::before { content: ''; position: absolute; top: 48px; bottom: 6px; inset-inline-start: 23px; width: 2px; background: var(--line); }
.timeline .n { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; background: var(--bg); }
.timeline li:last-child .n { background: var(--red); color: #fff; }
.timeline h3 { font-size: 1.35rem; margin: 10px 0 4px; }
.timeline p { color: var(--muted); margin: 0; font-size: 1rem; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; list-style: none; align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; }
.plan__img { aspect-ratio: 16 / 7; overflow: hidden; }
.plan__img img { width: 100%; height: 100%; object-fit: cover; }
.plan__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.plan h3 { font-size: 1.8rem; margin-bottom: 6px; }
.plan__desc { color: var(--muted); font-size: 1rem; }
.plan__price { font-family: var(--font-display); font-weight: 600; font-size: 3.2rem; line-height: 1; margin: 8px 0 4px; }
.plan__price small { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--muted); }
.plan__meta { font-size: .95rem; color: var(--muted); margin-bottom: 18px; }
.plan .check-list { margin-bottom: 24px; font-size: 1rem; }
.plan .btn { margin-top: auto; }
.plan--popular { border: 2px solid var(--red); }
.plan__flag { position: absolute; top: 14px; inset-inline-end: 14px; background: var(--red); color: #fff; font-weight: 700; font-size: .9rem; padding: 5px 12px; border-radius: 999px; }

.rate-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rate-table th, .rate-table td { padding: 16px 20px; text-align: start; border-bottom: 1px solid var(--line); }
.rate-table thead th { background: var(--graphite); color: #fff; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.rate-table td:last-child, .rate-table th:last-child { text-align: end; white-space: nowrap; font-weight: 700; }
.rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table td a { text-decoration: none; font-weight: 600; }
.rate-table td a:hover { color: var(--red); }
.fine-print { color: var(--muted); font-size: .95rem; margin-top: 16px; }

/* ---------- Services page: service picker ---------- */
.picker { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }
.picker__list { list-style: none; display: grid; gap: 8px; position: sticky; top: calc(var(--header-h) + 20px); }
.picker__tab {
  width: 100%; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; text-align: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; cursor: pointer;
  transition: border-color .2s, background-color .2s; text-decoration: none; color: inherit;
}
.picker__tab img { width: 64px; height: 52px; object-fit: cover; border-radius: 4px; }
.picker__tab strong { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; }
.picker__tab span { font-size: .9rem; color: var(--muted); }
.picker__tab:hover { border-color: var(--red); }
.picker__tab[aria-selected='true'] { background: var(--graphite); color: #fff; border-color: var(--graphite); box-shadow: inset 4px 0 0 var(--red-bright); }
.picker__tab[aria-selected='true'] span { color: var(--on-dark-muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 20px); }
.js .panel[hidden] { display: none; }
.no-js-panels .panel + .panel { margin-top: 24px; }
.panel__media { position: relative; aspect-ratio: 21 / 9; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; }
.panel__media .panel__price { position: absolute; bottom: 16px; inset-inline-start: 16px; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; padding: 8px 14px; border-radius: var(--radius); }
.panel__body { padding: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: 1fr 280px; gap: 32px; }
.panel__body h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.panel__body > div > p { color: var(--muted); }
.panel h3 { font-size: 1.3rem; margin: 22px 0 12px; }
.spec { background: var(--concrete); border-radius: var(--radius); padding: 20px; align-self: start; }
.spec dl { margin: 0 0 18px; display: grid; gap: 14px; }
.spec dt { font-size: .9rem; color: var(--muted); }
.spec dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.spec .btn + .btn { margin-top: 10px; }

/* ---------- Service details ---------- */
.detail { display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.detail__gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 36px; }
.detail__gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.detail__gallery img:first-child { grid-row: span 2; aspect-ratio: auto; }
.detail h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.detail p { color: var(--muted); }
.detail .spec { position: sticky; top: calc(var(--header-h) + 20px); background: var(--surface); border: 1px solid var(--line); padding: 26px; }
.detail .spec h2 { font-size: 1.7rem; }
.check-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 24px 0 36px; counter-reset: cs; }
.check-steps li { background: var(--concrete); border-radius: var(--radius); padding: 18px; counter-increment: cs; }
.check-steps li::before { content: counter(cs); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 600; margin-bottom: 10px; }
.check-steps strong { display: block; font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 4px; }
.check-steps span { color: var(--muted); font-size: .98rem; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; list-style: none; }

/* ---------- About ---------- */
.facilities { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; list-style: none; }
.facility img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: 16px; }
.facility h3 { font-size: 1.35rem; margin-bottom: 6px; }
.facility p { color: var(--muted); font-size: 1rem; margin: 0; }
.cert-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cert-list li { padding: 24px; }
.cert-list li + li { border-inline-start: 1px solid var(--line); }
.cert-list strong { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; margin-bottom: 6px; }
.cert-list span { color: var(--muted); font-size: .98rem; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; list-style: none; }
.member { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; }
.member img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.member__body { padding: 20px 22px 24px; }
.member h3 { margin-bottom: 2px; }
.member__role { color: var(--red); font-weight: 700; margin-bottom: 10px; display: block; }
.member p { color: var(--muted); font-size: 1rem; margin: 0; }
.standards { list-style: none; display: grid; gap: 0; counter-reset: sd; }
.standards li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); counter-increment: sd; }
.standards li::before { content: counter(sd, decimal-leading-zero); font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: var(--red-bright); line-height: 1; }
.standards strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: #fff; }
.standards span { color: var(--on-dark-muted); }

/* ---------- Brands page ---------- */
.categories { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; list-style: none; }
.category { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 240px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.category img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.category::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14,15,17,.92) 0%, rgba(14,15,17,.5) 55%, rgba(14,15,17,.1) 100%); }
.category__body { padding: 22px; }
.category h3 { color: #fff; margin-bottom: 4px; }
.category p { color: #d7dbe0; margin: 0; font-size: 1rem; }
.category__count { position: absolute; top: 16px; inset-inline-end: 16px; background: rgba(23,25,28,.85); color: #fff; font-weight: 700; padding: 5px 12px; border-radius: 999px; font-size: .92rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-bar button { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; cursor: pointer; }
.filter-bar button:hover { border-color: var(--red); }
.filter-bar button[aria-pressed='true'] { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.brand-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; list-style: none; }
.brand-card { background: var(--graphite); border-radius: var(--radius); overflow: hidden; color: #fff; display: flex; flex-direction: column; }
.brand-card[hidden] { display: none; }
.brand-card .logo-plate { height: 130px; border: 0; border-radius: 0; background: var(--graphite); }
.brand-card .logo-plate img { max-height: 84px; max-width: 78%; }
.brand-card__body { padding: 14px 16px 16px; border-top: 1px solid var(--line-dark); background: var(--graphite-2); flex: 1; }
.brand-card h3 { font-size: 1.25rem; margin: 0 0 2px; color: #fff; }
.brand-card p { margin: 0; color: var(--on-dark-muted); font-size: .92rem; line-height: 1.4; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 380px 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.contact-card { background: var(--graphite); color: #fff; border-radius: var(--radius); overflow: hidden; }
.contact-card > img { width: 100%;height: 400px; aspect-ratio: 16 / 9; object-fit: cover; }
.contact-card__body { padding: 26px; display: grid; gap: 22px; }
.contact-item { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.contact-item .ic { width: 40px; height: 40px; border-radius: var(--radius); background: var(--graphite-3); display: grid; place-items: center; color: var(--red-bright); }
.contact-item .ic svg { width: 20px; height: 20px; }
.contact-item h3 { font-size: 1.2rem; margin: 0 0 2px; color: #fff; }
.contact-item p, .contact-item a { margin: 0; color: var(--on-dark-muted); text-decoration: none; }
.contact-item a:hover { color: #fff; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; background: var(--bg); color: var(--text);
  border: 1px solid #b9bec4; border-radius: var(--radius);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(217,4,26,.18); }
.field .hint { font-size: .9rem; color: var(--muted); margin-top: 4px; }
.field .error { display: none; font-size: .92rem; color: var(--red); margin-top: 4px; font-weight: 600; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--red); }
.field.is-invalid .error { display: block; }
.form-success { display: none; align-items: center; gap: 12px; background: #e6f5ec; color: #145c38; border: 1px solid #9dd3b5; padding: 14px 16px; border-radius: var(--radius); font-weight: 600; margin-bottom: 18px; }
.form-success.is-visible { display: flex; }
.form-success svg { width: 22px; height: 22px; flex: none; }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 21 / 8; background: var(--concrete); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Simple pages (404 / coming soon) ---------- */
.hero--simple .hero__content { max-width: 640px; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 96px)); gap: 12px; margin: 8px 0 28px; list-style: none; }
.countdown li { background: rgba(23,25,28,.85); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 14px 8px; text-align: center; }
.countdown strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; line-height: 1; }
.countdown span { color: var(--on-dark-muted); font-size: .9rem; }
.notify { display: flex; gap: 10px; max-width: 520px; flex-wrap: wrap; }
.notify .field { flex: 1 1 260px; }
.notify .field label { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--graphite); color: var(--on-dark-muted); border-top: 3px solid var(--red-bright); }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 64px 48px; }
.footer-brand img { height: 92px; width: auto; margin-bottom: 18px; }
.site-footer h2 { font-size: 1.35rem; color: #fff; margin-bottom: 16px; }
.footer-links { list-style: none; display: grid; gap: 10px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-contact { list-style: none; display: grid; gap: 14px; }
.footer-contact li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.footer-contact svg { width: 20px; height: 20px; color: var(--red-bright); margin-top: 3px; }
.footer-contact a { text-decoration: none; color: #fff; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: var(--radius); color: #fff; }
.socials a:hover { background: var(--red); border-color: var(--red); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid var(--line-dark); padding-block: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .95rem; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
.footer-bottom nav { display: flex; gap: 20px; }

/* Mobile sticky call/book bar */
.mobile-cta { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .logo-row { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .brand-strip .container { grid-template-columns: 1fr; gap: 16px; }
  .brand-strip__label { max-width: none; }
  .brand-strip__label span { display: inline; margin-inline-start: 6px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .brand-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .callback__card { grid-template-columns: 1fr; gap: 16px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .topbar__hide-md { display: none; }
  .nav-toggle { display: inline-grid; }
  .nav {
    position: fixed; top: var(--nav-top, 124px); inset-inline: 0; bottom: 0; z-index: 999;
    background: var(--graphite); flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) 32px; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility .28s;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line-dark); }
  .nav__link { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 1.4rem; }
  .nav__link[aria-current='page'] { box-shadow: none; color: var(--red-bright); }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 12px 12px; display: none; }
  .has-sub.is-open .nav__sub { display: block; }
  .has-sub:hover .nav__link svg { transform: none; }
  .has-sub.is-open .nav__link svg { transform: rotate(180deg); }
  .nav__sub a { font-size: 1.1rem; padding: 10px 12px; }
  .nav__cta-mobile { display: flex; margin-top: 24px; }
  .header-actions .btn { display: none; }
  html.nav-open { overflow: hidden; }

  .hero--home .hero__inner { grid-template-columns: 1fr; }
  .job-ticket { display: none; }
  .split, .split--wide-media { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .picker { grid-template-columns: 1fr; }
  .picker__list { position: static; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .picker__list > li { scroll-snap-align: start; }
  .panel__body { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
  .detail .spec { position: static; }
  .facilities { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cert-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cert-list li:nth-child(3) { border-inline-start: 0; }
  .cert-list li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { display: grid; grid-template-columns: 1fr 1fr; }
  .contact-card > img { height: 100%; aspect-ratio: auto; }
  .callback__form { grid-template-columns: 1fr 1fr; }
  .callback__form .btn { grid-column: 1 / -1; }
  .hero--split .split-hero { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .split-hero__media { position: absolute; inset: 0; }
  .split-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,15,17,.94) 0%, rgba(14,15,17,.72) 60%, rgba(14,15,17,.4) 100%); }
  .split-hero__text {position: relative; z-index: 1; padding-inline: var(--gutter); }
  .split-hero__text::after, .split-hero__badge { display: none; }
}

@media (max-width: 860px) {
  .testimonials, .plans, .related, .categories, .team { grid-template-columns: 1fr 1fr; }
  .reason-mosaic { grid-template-columns: 1fr 1fr; }
  .feature-services { grid-template-columns: 1fr; }
  .check-steps { grid-template-columns: 1fr; }
  .quote-feature { grid-template-columns: 200px 1fr; }
  .brand-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .section--dark .stats > div:nth-child(n+3), .stats--dark > div:nth-child(n+3) { border-color: var(--line-dark); }
  .panel__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  :root { --header-h: 70px; }
  body { font-size: 1rem; padding-bottom: 68px; }
  .topbar .container { justify-content: center; }
  .topbar__hide-sm { display: none; }
  .brand img { height: 50px; }
  .theme-toggle { width: 40px; height: 40px; }
  .dir-toggle { height: 40px; min-width: 48px; padding: 0 8px; }
  .nav-toggle { width: 44px; height: 44px; }
  .hero { padding-block: 44px; }
  .hero__facts { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .logo-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .logo-plate { height: 64px; }
  .logo-plate img { max-height: 44px; }
  .service-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-card { flex-direction: row; }
  .service-card__img { aspect-ratio: auto; width: 38%; flex: none; }
  .service-card__body { padding: 14px 16px; }
  .service-card h3 { font-size: 1.3rem; }
  .service-card p { font-size: .95rem; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .service-card__meta { flex-direction: column; gap: 2px; padding-top: 10px; font-size: .9rem; }
  .steps { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 8px; }
  .step { scroll-snap-align: start; }
  .step__img { aspect-ratio: 4 / 3; }
  .reasons { grid-template-columns: 1fr; gap: 20px; }
  .reason-mosaic, .testimonials, .plans, .related, .categories, .team, .facilities { grid-template-columns: 1fr; }
  .reason-tile { min-height: 240px; }
  .quote-feature { grid-template-columns: 1fr; }
  .quote-feature img { max-width: 180px; aspect-ratio: 1; border-radius: 50%; }
  .brand-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .brand-card .logo-plate { height: 100px; }
  .cert-list { grid-template-columns: 1fr; }
  .cert-list li + li { border-inline-start: 0; border-top: 1px solid var(--line); }
  .contact-card { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .callback { margin-top: -36px; }
  .callback__card { padding: 20px; }
  .callback__form { grid-template-columns: 1fr; }
  .feature-service { grid-template-columns: 1fr; }
  .feature-service__img { aspect-ratio: 16 / 9; }
  .media-stack { padding-bottom: 40px; padding-inline-end: 30px; }
  .since-badge { inset-inline-start: 10px; top: 10px; }
  .since-badge strong { font-size: 2rem; }
  .map { aspect-ratio: 4 / 3; }
  .detail__gallery { grid-template-columns: 1fr 1fr; }
  .detail__gallery img:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .rate-table th, .rate-table td { padding: 14px 12px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
  .footer-bottom { flex-direction: column; }
  .countdown { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .countdown strong { font-size: 1.7rem; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 100%; }

  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; inset-inline: 0; bottom: 0; z-index: 900;
    background: var(--graphite); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark);
  }
  .mobile-cta .btn { min-height: 48px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Home 2: move banner content to the left */
.hero.hero--split .split-hero__text {
  padding-left: 20px;
  padding-right: 40px;
  text-align: left;
}

.hero.hero--split .split-hero__text h1,
.hero.hero--split .split-hero__text .hero__lede,
.hero.hero--split .split-hero__text .hero__actions {
  text-align: left;
}

@media (max-width: 1024px) {
  .hero.hero--split .split-hero__text {
    padding-left: 20px;
    padding-right: 30px;
  }
}

@media (max-width: 640px) {
  .hero.hero--split .split-hero__text {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Home 1 banner: match Home 2 banner height exactly */
.hero.hero--home {
  height: var(--hero-h);
  min-height: var(--hero-h);
  padding-block: 0;
  box-sizing: border-box;
}

.hero.hero--home .hero__media,
.hero.hero--home .hero__media img {
  height: 100%;
}

@media (max-width: 640px) {
  .hero.hero--home {
    height: var(--hero-h);
    min-height: var(--hero-h);
  }
}


/* ==========================================================================
   Creative header — "race-day" look
   - slanted red wedge behind the logo
   - slanted (skewed) hover / active pill on nav links
   - parallelogram Book-a-service button
   - scroll progress "ride meter" along the bottom edge of the header
   ========================================================================== */
.site-header {
  border-bottom: 0;
  background:
    linear-gradient(112deg, rgba(251,2,22,.20) 0, rgba(251,2,22,.20) clamp(150px, 20vw, 290px), transparent clamp(150px, 20vw, 290px)),
    linear-gradient(100deg, #0f1113 0%, var(--graphite) 45%, #1f2226 100%);
}
.site-header::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--red-bright) var(--ride, 0%), rgba(255,255,255,.14) var(--ride, 0%));
}

/* Nav links: slanted pill that slides in */
.nav__list > li > .nav__link { position: relative; isolation: isolate; letter-spacing: .03em; text-transform: uppercase; font-size: 1.1rem; padding: 12px 16px; }
.nav__list > li > .nav__link::before {
  content: ''; position: absolute; inset-block: 7px; inset-inline: 2px; z-index: -1;
  background: var(--red); border-radius: 3px;
  transform: skewX(-16deg) scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav__list > li > .nav__link:hover::before,
.nav__list > li > .nav__link:focus-visible::before,
.has-sub.is-open > .nav__link::before { transform: skewX(-16deg) scaleX(1); }
.nav__list > li > .nav__link[aria-current='page'] { box-shadow: none; color: #fff; }
.nav__list > li > .nav__link[aria-current='page']::before { transform: skewX(-16deg) scaleX(1); background: transparent; box-shadow: inset 0 -3px 0 var(--red-bright); border-radius: 0; }
.nav__list > li > .nav__link[aria-current='page']:hover::before { background: var(--red); box-shadow: none; border-radius: 3px; }
.nav__sub { border-top: 3px solid var(--red-bright); }
.nav__sub a { border-inline-start: 3px solid transparent; }
.nav__sub a:hover, .nav__sub a[aria-current='page'] { border-inline-start-color: var(--red-bright); }

/* Header buttons */
.header-actions .btn--primary {
  border: 0; border-radius: 0; padding-inline: 30px; letter-spacing: .05em; text-transform: uppercase;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow: none;
}
.icon-btn, .dir-toggle { border-radius: 4px 14px; background: rgba(255,255,255,.04); }
.icon-btn:hover, .dir-toggle:hover { background: rgba(251,2,22,.12); }

@media (max-width: 1080px) {
  /* Mobile menu: numbered, oversized links */
  .nav { counter-reset: nv; background: linear-gradient(180deg, var(--graphite) 0%, #101215 100%); }
  .nav__list > li { counter-increment: nv; }
  .nav__list > li > .nav__link {
    text-transform: uppercase; letter-spacing: .04em; font-size: 1.6rem; padding: 18px 4px; justify-content: flex-start; gap: 0;
  }
  .nav__list > li > .nav__link::before,
  .nav__list > li > .nav__link:hover::before,
  .nav__list > li > .nav__link[aria-current='page']::before,
  .nav__list > li > .nav__link[aria-current='page']:hover::before,
  .has-sub.is-open > .nav__link::before {
    content: counter(nv, decimal-leading-zero); position: static; inset: auto; z-index: auto;
    background: none; box-shadow: none; border-radius: 0; transform: none;
    color: var(--red-bright); font-size: .95rem; letter-spacing: .1em; min-width: 38px; display: inline-block; text-align: start;
  }
  .nav__list > li > .nav__link svg { margin-inline-start: auto; }
  .nav__cta-mobile { clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); border-radius: 0; text-transform: uppercase; letter-spacing: .05em; }
}
@media (max-width: 640px) {
  .header-actions { gap: 8px; }
  .dir-toggle, .theme-toggle, .nav-toggle { height: 40px; }
  .dir-toggle { min-width: 46px; }
  .theme-toggle, .nav-toggle { width: 40px; }
}

/* ==========================================================================
   "Your bike's journey through our bay" — mobile alignment & padding
   Root cause: scroll-snap-align:start pinned the first card to the very edge
   of the scroller and ignored the side padding, so cards did not line up with
   the heading. scroll-padding-inline restores the gutter.
   ========================================================================== */
@media (max-width: 640px) {
  :root { --section-y: 52px; }
  .section-head { margin-bottom: 26px; }
  .section-head h2 { font-size: clamp(2rem, 9vw, 2.4rem); line-height: 1.05; }
  .section-head p { font-size: 1.05rem; line-height: 1.55; }
  .steps {
    grid-auto-columns: 78%; gap: 14px;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter); padding-bottom: 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step { scroll-snap-align: start; scroll-snap-stop: always; }
  .step__img { aspect-ratio: 4 / 3; margin-bottom: 14px; }
  .step__num { top: 10px; width: 40px; height: 40px; font-size: 1.25rem; }
  .step h3 { font-size: 1.35rem; margin: 0 0 4px; }
  .step p { font-size: .98rem; line-height: 1.5; }
}

/* Phone numbers and emails keep their left-to-right order in RTL */
.topbar a[href^='tel:'], .topbar a[href^='mailto:'], a[href^='tel:'], a[href^='mailto:'] { direction: ltr; unicode-bidi: isolate; }


/* ==========================================================================
   Inner-page banners on tablet (About, Services, Brands, Pricing, Contact,
   Service details): the shared --hero-h resolves to 740px on portrait tablets,
   far taller than the banner content (~250–420px). Use one shorter, shared
   height for all of these pages. Home pages and 404 / coming-soon are untouched.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 900px) {
  .hero:not(.hero--home):not(.hero--split):not(.hero--simple) {
    height: 440px; min-height: 440px; padding-block: 48px; box-sizing: border-box;
  }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .hero:not(.hero--home):not(.hero--split):not(.hero--simple) {
    height: 520px; min-height: 520px; padding-block: 44px; box-sizing: border-box;
  }
}


/* ==========================================================================
   Scroll reveal — smooth fade-in-up for page content (not header / footer)
   Driven by main.js. Uses the individual `translate` property so it never
   conflicts with hover `transform`s. Only active when JS runs and the visitor
   has not asked for reduced motion; otherwise content is simply visible.
   ========================================================================== */
:root { --reveal-distance: 36px; --reveal-duration: .9s; --reveal-ease: cubic-bezier(.22, 1, .36, 1); }
@keyframes fade-in-up {
  from { opacity: 0; translate: 0 var(--reveal-distance); }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; translate: 0 var(--reveal-distance); will-change: opacity, translate; }
  .js .reveal.is-visible { animation: fade-in-up var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0ms) both; }
}
@media (max-width: 640px) { :root { --reveal-distance: 24px; } }


/* ==========================================================================
   Pricing plans on tablet (641–860px): the grid drops to two columns, which
   left the third plan stranded alone in the left column. When the last plan
   lands on its own row, stretch it across both columns and lay it out
   horizontally (image beside content) so the row reads as intentional.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 860px) {
  .plans > .plan:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .plans > .plan:last-child:nth-child(odd) .plan__img {
    flex: 0 0 40%;
    aspect-ratio: auto;
  }
  .plans > .plan:last-child:nth-child(odd) .plan__body { min-width: 0; }
  .plans > .plan:last-child:nth-child(odd) .check-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
}


/* ==========================================================================
   Tablet alignment: "How it works" steps + testimonials
   - Steps (641–1200px): five steps in a 3-column grid left the last two
     hanging on the left. Use a 6-track grid (each step spans 2 tracks) and
     centre the final pair under the row above: 3 on top, 2 centred below.
   - Testimonials (641–860px): three reviews in a 2-column grid left the
     third alone. Stretch a lone last review across both columns.
   Both follow the text direction automatically, so RTL needs no extra rules.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1200px) {
  .steps { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .steps > .step { grid-column: span 2; }
  .steps > .step:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .steps > .step:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .testimonials > .review:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .testimonials > .review:last-child:nth-child(odd) blockquote { max-width: 62ch; }
}

/* ==========================================================================
   Review fixes
   ========================================================================== */

/* 7. Typography weights: headings 600, paragraphs 400–550 */
h1, h2, h3, h4 { font-weight: 600; }
body, p { font-weight: 400; }
.hero__lede, .section-head p, .cta-band p { font-weight: 500; }

/* 2. Centre all h2s and hero text (footer column titles stay left-aligned) */
h2 { text-align: center; }
.site-footer h2 { text-align: start; }
.section-head, .section-head--row > div { margin-inline: auto; text-align: center; }
.section-head--row { flex-direction: column; align-items: center; justify-content: center; }
.callback__card h2, .callback__card p { text-align: center; }

.hero__content, .hero--simple .hero__content, .split-hero__text { margin-inline: auto; text-align: center; }
.hero .breadcrumb, .hero__actions, .hero__facts { justify-content: center; }
.hero__lede { margin-inline: auto; }
.hero.hero--split .split-hero__text,
.hero.hero--split .split-hero__text h1,
.hero.hero--split .split-hero__text .hero__lede,
.hero.hero--split .split-hero__text .hero__actions { text-align: center; }
.hero.hero--split .split-hero__text { align-items: center; }
.hero.hero--split .split-hero__text .hero__actions { justify-content: center; }
.countdown, .notify { margin-inline: auto; }
.notify { justify-content: center; }

/* 1. Tighter gap between hero text and buttons */
.hero h1 { margin-bottom: 14px; }
.hero__lede { margin-bottom: 22px; }
.hero__facts { margin-top: 28px; padding-top: 20px; }

/* 4. CTA band: centred stack with even spacing (h2 / text / buttons) */
.cta-band .container { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 24px; }
.cta-band .container > div:first-child { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cta-band h2 { margin: 0; max-width: 720px; }
.cta-band p { margin: 0; max-width: 620px; }
.cta-band__actions { justify-content: center; gap: 14px; }
.cta-band::before { background: linear-gradient(0deg, rgba(14,15,17,.88) 0%, rgba(14,15,17,.8) 100%); }

/* 6. About page: comfortable side padding that scales with screen width */
.page-about main .container { padding-inline: clamp(20px, 5vw, 80px); }
.page-about .media-stack { padding-inline-end: clamp(24px, 4vw, 60px); }

@media (max-width: 640px) {
  .hero__actions { justify-content: center; }
  .cta-band .container { align-items: center; }
  .cta-band__actions { justify-content: center; }
}