/* ==========================================================================
   INAUTEC GmbH — styles
   Themes via [data-theme] custom properties; maroon #842842 family from
   resources/colors.css.
   ========================================================================== */

/* ---------- self-hosted fonts ----------
   Archivo + Inter as local variable woff2 (latin + latin-ext) under css/fonts/.
   Served from our own origin, so no visitor IP is sent to Google on page load.
   To refresh: re-download the woff2 files Google's css2 API returns for
   "Archivo:wght@400..800" and "Inter:wght@400..600" and overwrite css/fonts/. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --maroon: #842842;
  --maroon-deep: #5e1c30;
  --maroon-darker: #471523;
  --maroon-soft: #97606f;
  --maroon-mist: #a2818a;
  --rose-light: #d4a3b2;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1180px;
  --container-wide: 1380px;
  --radius: 18px;
  --radius-sm: 12px;
  --header-h: 76px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #faf8f9;
  --bg-elev: #ffffff;
  --bg-tint: #f4edf0;
  --ink: #232323;
  --ink-2: #4e4e4e;
  --ink-3: #6f676b;
  --accent: #842842;
  --accent-text: #842842;        /* small text/labels: 8.0:1 on #faf8f9 */
  --accent-hover: #5e1c30;
  --line: rgba(35, 35, 35, 0.12);
  --card-bg: #ffffff;
  --card-shadow: 0 2px 6px rgba(35, 35, 35, 0.05), 0 18px 44px -18px rgba(132, 40, 66, 0.22);
  --card-shadow-hover: 0 4px 10px rgba(35, 35, 35, 0.06), 0 28px 60px -20px rgba(132, 40, 66, 0.35);
  --glass: rgba(250, 248, 249, 0.82);
  --glow-opacity: 0.1;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171317;
  --bg-elev: #221c21;
  --bg-tint: #1e171c;
  --ink: #f3eef0;
  --ink-2: #c8c0c3;
  --ink-3: #a59ba0;
  --accent: #842842;
  --accent-text: #d8a4b4;        /* small text/labels: 7.6:1 on #171317 */
  --accent-hover: #9c3350;
  --line: rgba(243, 238, 240, 0.14);
  --card-bg: #221c21;
  --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 44px -18px rgba(0, 0, 0, 0.55);
  --card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.35), 0 28px 60px -20px rgba(132, 40, 66, 0.5);
  --glass: rgba(23, 19, 23, 0.78);
  --glow-opacity: 0.22;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }
[data-theme="dark"] a:hover { color: var(--rose-light); }

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

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - 2.5rem, var(--container-wide)); margin-inline: auto; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--accent); color: #fff;
  padding: 0.6rem 1.1rem; border-radius: 8px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; color: #fff; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2em; height: 2px;
  background: linear-gradient(90deg, var(--accent-text), transparent);
  vertical-align: middle;
  margin-right: 0.8em;
  border-radius: 2px;
}
.eyebrow--on-dark { color: var(--rose-light); }
.eyebrow--on-dark::before { background: linear-gradient(90deg, var(--rose-light), transparent); }

.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
.section--tint { background: var(--bg-tint); }

.section-title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.section-title--xl { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-intro { color: var(--ink-2); font-size: 1.1rem; }

/* gradient seam between flat and tinted sections */
.section-divider {
  height: clamp(56px, 8vw, 110px);
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg) 35%, var(--bg-tint) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 38%);
  margin-bottom: -1px;
  position: relative;
}
.section-divider::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(132, 40, 66, var(--glow-opacity)) 75%, transparent 95%);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.95em 1.8em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn-arrow { transition: transform 0.25s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-primary {
  background: linear-gradient(120deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 28px -10px rgba(132, 40, 66, 0.55);
}
.btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(132, 40, 66, 0.7);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; transform: translateY(-2px); }

.btn-block { width: 100%; justify-content: center; }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.site-header.scrolled {
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px -16px rgba(0, 0, 0, 0.25);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; margin-right: auto; }
.brand-logo { height: 34px; width: auto; }

/* over the hero (not scrolled): white logo + white nav, any theme */
.brand-logo--light { display: none; }
.site-header:not(.scrolled) .brand-logo--dark { display: none; }
.site-header:not(.scrolled) .brand-logo--light { display: block; }
[data-theme="dark"] .site-header.scrolled .brand-logo--dark { display: none; }
[data-theme="dark"] .site-header.scrolled .brand-logo--light { display: block; }

.main-nav { display: flex; gap: 1.75rem; align-items: center; }
.main-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-2);
  position: relative;
  padding: 0.3rem 0;
}
.main-nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.main-nav a:hover { color: var(--accent-text); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--accent-text); }

.main-nav .nav-cta {
  border: 1.5px solid var(--accent-text);
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  color: var(--accent-text);
}
.main-nav .nav-cta::after { display: none; }
.main-nav .nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.site-header:not(.scrolled) .main-nav a { color: rgba(255, 255, 255, 0.92); }
.site-header:not(.scrolled) .main-nav a:hover { color: #fff; }
.site-header:not(.scrolled) .main-nav .nav-cta { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.site-header:not(.scrolled) .main-nav .nav-cta:hover { background: rgba(255, 255, 255, 0.15); }

/* solutions dropdown */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 0.34rem; }
.nav-dropdown-caret {
  width: 11px; height: 11px;
  flex: none;
  transition: transform 0.3s var(--ease-out);
}
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  z-index: 10;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  padding: 0.45rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
}
/* invisible bridge so hover survives the gap between toggle and menu */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -0.6rem; left: 0; right: 0; height: 0.6rem;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.main-nav .nav-dropdown-menu a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  white-space: nowrap;
}
.main-nav .nav-dropdown-menu a::after { display: none; }
.main-nav .nav-dropdown-menu a:hover,
.main-nav .nav-dropdown-menu a:focus-visible {
  background: var(--bg-tint);
  color: var(--accent-text);
}
/* keep menu legible while the header is transparent over the hero */
.site-header:not(.scrolled) .main-nav .nav-dropdown-menu a { color: var(--ink); }
.site-header:not(.scrolled) .main-nav .nav-dropdown-menu a:hover { color: var(--accent-text); }

.header-actions { display: flex; align-items: center; gap: 0.9rem; }

.lang-switch {
  display: flex;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-switch button, .drawer-langs button {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--ink-2);
  border: 0;
  border-radius: 999px;
  padding: 0.32rem 0.62rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.lang-switch button:hover { color: var(--accent-text); }
.lang-switch button[aria-pressed="true"], .drawer-langs button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
.site-header:not(.scrolled) .lang-switch { border-color: rgba(255, 255, 255, 0.4); }
.site-header:not(.scrolled) .lang-switch button { color: rgba(255, 255, 255, 0.9); }
.site-header:not(.scrolled) .lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.95); color: var(--maroon); }

.theme-toggle {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.4s var(--ease-out);
}
.theme-toggle:hover { color: var(--accent-text); border-color: var(--accent-text); transform: rotate(20deg); }
.theme-toggle svg { width: 19px; height: 19px; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: none; }
.site-header:not(.scrolled) .theme-toggle { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.4); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.site-header:not(.scrolled) .nav-toggle span { background: #fff; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  display: none;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.35);
  padding: 1rem 1.5rem 1.5rem;
}
.mobile-drawer.open { display: block; animation: drawerIn 0.3s var(--ease-out); }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } }
.mobile-drawer nav { display: flex; flex-direction: column; }
.mobile-drawer nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.mobile-drawer nav a.drawer-sublink {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink-2);
  padding-left: 1.5rem;
  position: relative;
}
.mobile-drawer nav a.drawer-sublink::before {
  content: "";
  position: absolute;
  left: 0.2rem; top: 50%;
  width: 0.7rem; height: 1px;
  background: var(--accent-text);
  opacity: 0.6;
}

.drawer-langs { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.drawer-langs button { border: 1.5px solid var(--line); font-size: 0.85rem; padding: 0.4rem 0.9rem; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--maroon-darker);
}

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(35, 20, 26, 0.5) 0%, rgba(35, 20, 26, 0.18) 52%, transparent 75%),
    linear-gradient(165deg, rgba(132, 40, 66, 0.48) 0%, rgba(71, 21, 35, 0.36) 42%, rgba(23, 16, 20, 0.8) 100%),
    radial-gradient(120% 90% at 80% 10%, rgba(132, 40, 66, 0.3), transparent 60%);
}
/* fade the bottom edge into the page background */
.hero-overlay::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 22vh;
  background: linear-gradient(to bottom, transparent, var(--bg));
  opacity: 0.96;
}

.cta-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: calc(var(--header-h) + 3rem) 0 6rem;
  color: #fff;
}

.hero-eyebrow {
  color: #f4d2dd;
  text-shadow: 0 1px 12px rgba(23, 16, 20, 0.5);
  animation: heroFade 0.9s var(--ease-out) 0.15s both;
}
.hero-eyebrow::before { background: linear-gradient(90deg, #f4d2dd, transparent); }

.hero-title {
  font-size: clamp(2.5rem, 1.6rem + 5.2vw, 5.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 1.4rem;
  max-width: 14em;
}
.hero-line { display: block; animation: heroRise 0.9s var(--ease-out) both; }
.hero-line:nth-child(1) { animation-delay: 0.3s; }
.hero-line:nth-child(2) { animation-delay: 0.45s; }
.hero-line:nth-child(3) { animation-delay: 0.6s; }
.hero-line--accent {
  background: linear-gradient(95deg, #f2c7d4 0%, var(--rose-light) 45%, var(--maroon-mist) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes heroRise { from { opacity: 0; transform: translateY(0.6em); } }
@keyframes heroFade { from { opacity: 0; } }

.hero-punchline {
  min-height: 2.2em;
  font-size: clamp(1.02rem, 0.9rem + 0.7vw, 1.3rem);
  color: rgba(255, 255, 255, 0.88);
  max-width: 38em;
  animation: heroFade 0.9s var(--ease-out) 0.8s both;
}
#punchline { display: inline-block; transition: opacity 0.45s ease, transform 0.45s var(--ease-out); }
#punchline.swap { opacity: 0; transform: translateY(8px); }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
  animation: heroFade 0.9s var(--ease-out) 1s both;
}

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.85;
}
.scroll-cue-track {
  display: block;
  width: 26px; height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  position: relative;
}
.scroll-cue-dot {
  position: absolute;
  left: 50%; top: 7px;
  width: 4px; height: 8px;
  margin-left: -2px;
  background: #fff;
  border-radius: 4px;
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(14px); opacity: 0; }
}

/* ---------- about ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-text p { color: var(--ink-2); }

.about-media { margin: 0; position: relative; }
.about-media img {
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.about-media::before {
  content: "";
  position: absolute;
  inset: -16px -16px auto auto;
  width: 45%; height: 60%;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--maroon), var(--maroon-soft));
  opacity: 0.18;
  z-index: -1;
}
.about-media figcaption {
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-top: 0.8rem;
}

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.stat {
  background: var(--card-bg);
  padding: 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-text);
  line-height: 1;
}
.stat-label { font-size: 0.92rem; color: var(--ink-2); line-height: 1.4; }

/* ---------- solutions / ride cards ---------- */

.rides-heading {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1rem + 1.8vw, 2.05rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

.ride-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.ride-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.ride-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); }
.ride-card--bare { background: transparent; box-shadow: none; }
.ride-card--bare:hover { transform: none; }

.ride-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-tint);
}
.ride-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.ride-card:hover .ride-media img { transform: scale(1.06); }
.ride-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.ride-media video.playing { opacity: 1; }
.ride-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(132, 40, 66, 0.28), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.ride-card:hover .ride-media::after { opacity: 1; }

.ride-card--bare .ride-media {
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.5);
}

.ride-body { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.ride-body h3 { font-size: 1.28rem; font-weight: 700; margin-bottom: 0.45em; }
.ride-body > p { color: var(--ink-2); font-size: 0.97rem; flex: 1; }

.ride-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 1rem;
  background: transparent;
  border: 0;
  padding: 0.2rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent-text);
  cursor: pointer;
}
.ride-more svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }
.ride-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.ride-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}
.ride-details > p {
  overflow: hidden;
  min-height: 0;
  color: var(--ink-3);
  font-size: 0.92rem;
  margin: 0;
}
.ride-more[aria-expanded="true"] + .ride-details { grid-template-rows: 1fr; }
.ride-more[aria-expanded="true"] + .ride-details > p { padding-top: 0.7rem; }

/* ---------- monorail feature band ---------- */

.feature-band {
  position: relative;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  background:
    linear-gradient(150deg, var(--maroon-darker) 0%, var(--maroon-deep) 45%, var(--maroon) 120%);
  color: #fff;
  overflow: hidden;
}
.feature-glow {
  position: absolute;
  width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 163, 178, 0.22), transparent 65%);
  top: -25%; right: -15%;
  animation: glowDrift 14s ease-in-out infinite alternate;
}
@keyframes glowDrift {
  to { transform: translate(-8%, 12%) scale(1.12); }
}

.feature-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature-text .section-title { color: #fff; }
.feature-text p { color: rgba(255, 255, 255, 0.85); }

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.feature-list li {
  position: relative;
  padding-left: 1.9rem;
  color: rgba(255, 255, 255, 0.92);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.48em;
  width: 1.1rem; height: 0.55rem;
  border-left: 2.5px solid var(--rose-light);
  border-bottom: 2.5px solid var(--rose-light);
  transform: rotate(-45deg);
}

/* ---------- safety ---------- */

.strengths-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
}
.strength {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease, border-color 0.4s ease;
}
.strength:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
  border-color: transparent;
}
.strength-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-soft));
  color: #fff;
  margin-bottom: 1.2rem;
}
.strength-icon svg { width: 28px; height: 28px; }
.strength h3 { font-size: 1.08rem; font-weight: 700; }
.strength p { color: var(--ink-2); font-size: 0.94rem; }

/* ---------- services ---------- */

.services {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.service-tabs { display: flex; flex-direction: column; gap: 0.6rem; }
.service-tabs [role="tab"] {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-2);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.05rem 1.3rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.service-tabs [role="tab"]:hover { border-color: var(--accent-text); color: var(--accent-text); }
.service-tabs [role="tab"][aria-selected="true"] {
  background: linear-gradient(120deg, var(--maroon), var(--maroon-deep));
  border-color: transparent;
  color: #fff;
  transform: translateX(6px);
  box-shadow: 0 14px 32px -14px rgba(132, 40, 66, 0.6);
}
.tab-num {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.55;
  letter-spacing: 0.08em;
}

.service-panels {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  min-height: 100%;
}
.service-panel h3 { font-size: 1.35rem; }
.service-panel p { color: var(--ink-2); }
.service-panel .service-detail {
  font-size: 0.92rem;
  color: var(--ink-3);
  border-left: 3px solid var(--maroon-mist);
  padding-left: 1rem;
  margin-top: 1.2rem;
}
.service-panel:not([hidden]) { animation: panelIn 0.45s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- our work ---------- */

.section-work { padding-bottom: clamp(4.5rem, 9vw, 7.5rem); }

.work-scroller {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  padding: 0.5rem max(calc((100vw - var(--container)) / 2), 1.25rem) 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--maroon-mist) transparent;
}

.work-card {
  position: relative;
  flex: 0 0 clamp(270px, 32vw, 420px);
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: center;
  box-shadow: var(--card-shadow);
}
.work-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.work-card:hover img { transform: scale(1.05); }
.work-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem 1.4rem 1.3rem;
  background: linear-gradient(to top, rgba(23, 16, 20, 0.88), rgba(71, 21, 35, 0.45) 60%, transparent);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.work-card figcaption strong { font-family: var(--font-display); font-size: 1.08rem; }
.work-card figcaption span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.78); }

/* ---------- customers & partners (logo marquees) ----------
   Each row is a fixed-width "window" exactly as wide as that category's unique
   cards — the count is set per row in --cards (see js/main.js). The track holds
   two copies of the unique set; translating it -50% scrolls exactly one set, so
   only the unique logos are ever on screen and the loop is seamless. A symmetric
   edge fade (mask) makes the wrapping card fade out one edge and in at the other.
   --pcard-w / --pgap MUST match the card width and group gap below so the window
   lands precisely on whole cards. */

.section-partners {
  --pcard-w: 190px;   /* card width */
  --pgap: 1.1rem;     /* gap between cards (and at the wrap) */
  --pfade: 80px;      /* edge fade-out / fade-in distance */
  --pcard-bg: #e7ccd5;   /* lighter tint of the solutions-bullet rose (--rose-light #d4a3b2) */
}

.partner-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.partner-row-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin: 0 0 1rem;
}

.marquee {
  position: relative;
  /* window = exactly --cards slots wide, but never wider than the row */
  width: min(100%, calc(var(--cards, 3) * (var(--pcard-w) + var(--pgap))));
  margin-inline: auto;
  /* clip the off-window cards horizontally, but let the hover lift bleed out
     vertically so the raised card + shadow aren't cut off */
  padding-block: 12px;
  overflow-x: clip;
  overflow-y: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pfade), #000 calc(100% - var(--pfade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--pfade), #000 calc(100% - var(--pfade)), transparent 100%);
  /* Grab-to-scroll: the JS runtime (js/main.js) drives the auto-scroll AND lets
     you drag/swipe the track. pan-y keeps vertical page scrolling on touch;
     horizontal gestures are captured as a drag. */
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
}
.marquee.dragging { cursor: grabbing; }
.marquee-track {
  display: flex;
  width: max-content;
  /* The drift is a compositor-driven CSS animation (smooth even when the main
     thread is busy with the WebGL canvas). While you drag, js/main.js adds
     .dragging to switch it off and drives transform directly, then resumes the
     animation from the released position via a negative animation-delay. */
  animation: marquee var(--speed, 44s) linear infinite;
  will-change: transform;
}
.marquee-track[data-dir="ltr"] { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track.dragging { animation: none; }
.marquee-group { display: flex; align-items: center; flex: none; gap: var(--pgap); padding-right: var(--pgap); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partner-logo {
  flex: none;
  width: var(--pcard-w);
  height: 108px;
  display: grid;
  place-items: center;
  /* Dusty-rose tile (--pcard-bg). At rest the grayscale logo is blended into
     the tile with multiply, so the logos' white backgrounds don't show as
     bright rectangles. Hovering pops the tile to white with the logo in full
     colour — multiply on white is a no-op, so brand colours stay true. */
  background: var(--pcard-bg, #fff);
  border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow);
  padding: 1.35rem;
  isolation: isolate;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, background-color 0.35s ease;
}
.partner-logo img {
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  mix-blend-mode: multiply;
  transition: filter 0.4s ease, opacity 0.4s ease;
  /* never let the browser start its own image-drag ghost while swiping */
  -webkit-user-drag: none;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}
.partner-logo:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); background: #fff; }
.partner-logo:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 768px) {
  .section-partners { --pcard-w: 150px; --pgap: 0.8rem; --pfade: 56px; }
  .partner-logo { height: 92px; padding: 1.1rem; }
  .partner-logo img { max-height: 46px; }
}

/* ---------- quote band ---------- */

.quote-band {
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  background:
    radial-gradient(90% 120% at 15% 10%, rgba(132, 40, 66, calc(var(--glow-opacity) * 1.4)), transparent 55%),
    var(--bg-tint);
}

.quote-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.quote-photo { margin: 0; position: relative; }
.quote-photo img {
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.quote-photo::after {
  content: "";
  position: absolute;
  inset: auto auto -14px -14px;
  width: 55%; height: 45%;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--maroon), var(--maroon-soft));
  opacity: 0.2;
  z-index: -1;
}

.quote-text { margin: 0; }
.quote-mark { width: 44px; color: var(--maroon-mist); margin-bottom: 1.2rem; }
.quote-text p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.quote-text footer { margin-top: 1.6rem; display: flex; flex-direction: column; }
.quote-text footer strong { font-family: var(--font-display); font-size: 1.05rem; }
.quote-text footer span { color: var(--accent-text); font-size: 0.92rem; }

/* ---------- final CTA / contact ---------- */

.cta-band {
  position: relative;
  padding: clamp(5rem, 10vw, 8rem) 0;
  background:
    radial-gradient(110% 100% at 85% 0%, rgba(151, 96, 111, 0.35), transparent 55%),
    linear-gradient(160deg, var(--maroon-darker) 0%, var(--maroon-deep) 55%, var(--maroon) 130%);
  color: #fff;
  overflow: hidden;
}
.cta-band .section-title { color: #fff; }
.cta-band .section-intro { color: rgba(255, 255, 255, 0.85); }
.cta-band .container { position: relative; z-index: 2; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: stretch;
}

.contact-form {
  display: flex;
  flex-direction: column;
  /* more opaque + stronger blur so the bright CTA animation behind doesn't
     glow through as much (still translucent glass, still lighter than inputs) */
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: clamp(1.5rem, 3vw, 2.3rem);
}

/* Let the message field absorb extra height so the form matches the
   taller contact card when the two sit side by side. */
.form-field--message { flex: 1 1 auto; }
.form-field--message textarea { flex: 1 1 auto; min-height: 7.5rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.form-field label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.92);
}
.form-field input, .form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #fff;
  background: rgba(23, 16, 20, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  resize: vertical;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: #fff;
  background: rgba(23, 16, 20, 0.5);
}
.form-note { font-size: 0.83rem; color: rgba(255, 255, 255, 0.65); margin-top: 0.9rem; text-align: center; }

.cta-band .btn-primary {
  background: #fff;
  color: var(--maroon);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45);
}
.cta-band .btn-primary:hover { color: var(--maroon-deep); }

.contact-card {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: clamp(1.5rem, 3vw, 2.3rem);
}
.contact-card h3 { font-size: 1.25rem; color: #fff; }
.contact-card address { font-style: normal; color: rgba(255, 255, 255, 0.88); }
.contact-card a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.contact-card a:hover { color: var(--rose-light); }

.map-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none !important;
}
.map-thumb-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  border-radius: 14px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s var(--ease-out);
  will-change: transform;
}
.map-thumb-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.map-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.map-link:hover .map-thumb-wrap { transform: translateY(-2px); }
.map-link:hover .map-thumb-wrap::after { opacity: 1; }
.map-link-label { display: inline-flex; align-items: center; gap: 0.5em; }
.map-link-label svg { width: 18px; height: 18px; }

/* ---------- footer ---------- */

.site-footer {
  background: #15110f;
  color: #cfc8cb;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-size: 0.95rem;
}
[data-theme="dark"] .site-footer { background: #110d10; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand img { height: 38px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { color: #a39ba0; max-width: 32em; }

.footer-nav { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-nav a, .footer-contact a { color: #cfc8cb; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--rose-light); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
}
.footer-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: #cfc8cb;
  margin: 0;
}
.footer-legal { color: #8d8489; margin: 0; }
.footer-legal a { color: #a39ba0; }
.footer-legal a:hover { color: var(--rose-light); }

/* ---------- legal / privacy pages ----------
   Standalone English documents (legal.html, privacy.html). The header is
   rendered permanently in its `.scrolled` state, so the page content needs a
   fixed-header offset and a narrow reading column. */

.legal-back {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: inherit;
  white-space: nowrap;
}
.legal-back:hover { color: var(--accent-text); }

.legal-main { padding: calc(var(--header-h) + 3.25rem) 0 5rem; }

.legal-doc { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.legal-doc h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem); margin: 0.2em 0 0.4rem; }
.legal-doc .legal-updated { color: var(--ink-3); font-size: 0.95rem; margin: 0 0 1rem; }
.legal-doc .legal-lead { color: var(--ink-2); font-size: 1.1rem; }

.legal-doc section {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
}
.legal-doc section:first-of-type { margin-top: 1.8rem; padding-top: 0; border-top: 0; }
.legal-doc h2 { font-size: 1.4rem; margin: 0 0 0.8rem; }
.legal-doc h3 { font-size: 1.05rem; margin: 1.5rem 0 0.4rem; }
.legal-doc p { color: var(--ink-2); }
.legal-doc ul { margin: 0 0 1.1em; padding-left: 1.25rem; }
.legal-doc li { color: var(--ink-2); margin-bottom: 0.35em; }
.legal-doc a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc address { font-style: normal; color: var(--ink); line-height: 1.7; }

.legal-doc .legal-data {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.5rem;
}
.legal-doc .legal-data dt { color: var(--ink-3); }
.legal-doc .legal-data dd { margin: 0; color: var(--ink); }

@media (max-width: 560px) {
  .legal-doc .legal-data { grid-template-columns: 1fr; gap: 0.1rem; }
  .legal-doc .legal-data dd { margin-bottom: 0.6rem; }
}

/* ---------- reveal-on-scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .ride-grid { grid-template-columns: repeat(2, 1fr); }
  .strengths-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .brand-logo { height: 28px; }
  .lang-switch { display: none; }

  .about-grid, .feature-grid, .quote-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; }
  .quote-photo { max-width: 280px; }

  .services { grid-template-columns: 1fr; }
  .service-tabs { flex-direction: row; flex-wrap: wrap; }
  .service-tabs [role="tab"] { flex: 1 1 calc(50% - 0.6rem); padding: 0.85rem 1rem; font-size: 0.92rem; }
  .service-tabs [role="tab"][aria-selected="true"] { transform: none; }

  .hero-ctas .btn { width: 100%; justify-content: center; }
  .scroll-cue { display: none; }
}

@media (max-width: 560px) {
  .ride-grid { grid-template-columns: 1fr; }
  .strengths-grid { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .service-tabs [role="tab"] { flex-basis: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- reduced motion ---------- */

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