/* =========================================================
   MotoForAll — Original design language
   Industrial / performance brand · Barlow Condensed · sharp
   ========================================================= */

:root {
  --black:#0d0d14;
  --deep:#13131f;
  --card:#1a1a2a;
  --card2:#1f1f30;
  --border:#2e2e44;
  --border2:#3a3a55;
  --red:#E8241A;
  --red-hot:#ff3b30;
  --red-dim:rgba(232,36,26,.13);
  --red-glow:rgba(232,36,26,.05);
  --white:#f0eef8;
  --muted:#7a7a9a;
  --muted2:#5a5a7a;
  --green:#2ecc71;
  --amber:#f39c12;
  --warn:#e74c3c;

  --header-h: 76px;
  --container: 1320px;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

a { color: var(--white); text-decoration: none; }
a:hover { color: var(--red); }
img { max-width: 100%; display: block; }

/* =========================================================
   Typography
   ========================================================= */
h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 9vw, 126px);
  line-height: .88;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
h1 .acc, h1 .r { color: var(--red); display: block; }
h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 5vw, 60px);
  line-height: .95;
  text-transform: uppercase;
  margin-bottom: 14px;
}
h2 .r { color: var(--red); }
h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 9px;
}
h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
h5 {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 400;
}
p { color: var(--white); margin-bottom: 12px; line-height: 1.65; }
p.muted, .text-muted { color: var(--muted); }

.sec-tag, .eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--red);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sec-tag::before, .eyebrow.dash::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--red);
}
.eyebrow.red { color: var(--red); }
.text-red { color: var(--red); }

.hl { color: var(--red); }

/* =========================================================
   Layout
   ========================================================= */
.container { max-width: 100%; padding: 0; }
section { padding: 90px 60px; }
section.dim { background: var(--deep); }
@media (max-width: 900px) {
  section { padding: 60px 24px; }
}
.row { display: flex; flex-wrap: wrap; gap: 24px; }
.center { text-align: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.flex-wrap { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   Top header nav
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 13, 20, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  padding: 0 32px;
  max-width: 1600px;
  margin: 0 auto;
}
.site-header .logo-wrap { flex-shrink: 0; display: flex; align-items: center; height: 100%; }
.site-header .logo-img { width: auto; height: 56px; max-width: 160px; }

.site-header .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.site-header .nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-header .nav-links a:hover { color: var(--white); border-bottom-color: var(--red); }
.site-header .nav-links a.active { color: var(--red); border-bottom-color: var(--red); }

.site-header .header-cta {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.site-header .header-signin {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  padding: 10px 16px;
  border: 1px solid var(--border2);
  background: transparent;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.site-header .header-signin:hover { border-color: var(--red); color: var(--red); background: rgba(232,36,26,.06); }
.site-header .header-admin {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 6px 10px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}
.site-header .header-admin:hover { color: var(--red); }
@media (max-width: 1100px) {
  .site-header .header-signin span.lbl { display: none; }
  .site-header .header-signin::before { content: '👤'; font-size: 14px; }
}
@media (max-width: 980px) {
  .site-header .header-signin, .site-header .header-admin { display: none; }
}
.site-header .header-cta .sn-cta {
  background: var(--red);
  color: #fff !important;
  padding: 10px 22px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background .15s ease;
}
.site-header .header-cta .sn-cta:hover { background: var(--red-hot); color: #fff !important; }

.menu-btn {
  display: none;
  background: var(--card); border: 1px solid var(--border);
  color: var(--white); width: 40px; height: 40px;
  font-size: 18px; cursor: pointer;
  align-items: center; justify-content: center;
}
@media (max-width: 980px) {
  .site-header .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .site-header .logo-img { height: 44px; }
  .site-header .nav-inner { padding: 0 20px; }
}

/* =========================================================
   Legacy sidebar styles (left in place but visually hidden so
   any old markup not yet migrated still doesn't break layout)
   ========================================================= */
.side-nav, .mobile-header { display: none; }
.side-nav .sn-logo {
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--border);
}
.logo-wrap { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img {
  display: block;
  width: 160px;
  height: auto;
  max-width: 100%;
}
.logo-img.sm { width: 110px; }
.logo-img.xs { width: 80px; }
/* Legacy text-logo fallbacks (kept in case any inline markup still references them) */
.logo-icon {
  width: 38px; height: 38px;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  flex-shrink: 0;
}
.logo-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: 2px;
  color: var(--white);
  text-transform: uppercase;
  margin-left: 11px;
}
.logo-text span { color: var(--red); }

.side-nav .sn-links { display: flex; flex-direction: column; padding: 16px 0; }
.side-nav .sn-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 24px;
  border-left: 2px solid transparent;
  transition: all .15s ease;
  display: flex; align-items: center; gap: 12px;
}
.side-nav .sn-links a:hover { color: var(--white); background: var(--card); }
.side-nav .sn-links a.active { color: var(--red); border-left-color: var(--red); background: var(--red-dim); }
.side-nav .sn-cta {
  margin: 8px 24px 0;
  background: var(--red);
  color: #fff !important;
  text-align: center;
  padding: 12px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background .15s ease;
}
.side-nav .sn-cta:hover { background: var(--red-hot); color: #fff !important; }
.side-nav .sn-bottom {
  margin-top: auto;
  padding: 24px;
  border-top: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
}
.side-nav .sn-bottom a { color: var(--muted); display: block; padding: 4px 0; }
.side-nav .sn-bottom a:hover { color: var(--red); }

/* Mobile header (replaces sidebar on small screens) */
.mobile-header {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: 60px;
  background: var(--deep);
  border-bottom: 1px solid var(--border);
  z-index: 60;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.mobile-header .menu-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--white);
  width: 38px; height: 38px;
  font-size: 16px;
  cursor: pointer;
}
.mobile-nav-drawer {
  display: none;
  position: fixed; inset: 0;
  background: rgba(13,13,20,.97);
  z-index: 70;
  padding: 80px 32px 32px;
  flex-direction: column;
}
.mobile-nav-drawer.open { display: flex; }
.mobile-nav-drawer a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.mobile-nav-drawer a:hover { color: var(--red); }
.mobile-nav-drawer .close {
  position: absolute; top: 18px; right: 18px;
  background: var(--card); border: 1px solid var(--border);
  width: 38px; height: 38px; color: var(--white); cursor: pointer;
}
@media (max-width: 900px) {
  .side-nav { display: none; }
  .mobile-header { display: flex; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn,
.btn-primary,
.btn-ghost,
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .1s;
  white-space: nowrap;
  border-radius: 0;
}
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: var(--red-hot); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,36,26,.4); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--border2); }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.btn-secondary { background: var(--card); color: var(--white); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--red); color: var(--red); }
.btn-sm { padding: 8px 16px; font-size: 12px; }
.btn-lg { padding: 16px 36px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }

.rent-btn {
  background: var(--red-dim);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 7px 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
}
.rent-btn:hover { background: var(--red-hot); color: #fff; border-color: var(--red-hot); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding: 90px 60px 90px;
  position: relative;
  background: var(--black);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  background: radial-gradient(circle at 80% 30%, rgba(232,36,26,.12), transparent 60%);
  pointer-events: none;
}
.hero-inner, .hero-content { position: relative; z-index: 1; max-width: 860px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(232,36,26,.1);
  border: 1px solid rgba(232,36,26,.3);
  padding: 6px 16px;
  margin-bottom: 28px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--red);
  letter-spacing: 2px;
}
.hero-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.hero-sub, .lead {
  font-size: 17px;
  color: var(--muted);
  max-width: 540px;
  line-height: 1.65;
  margin-bottom: 38px;
}
.hero-btns, .hero-actions {
  display: flex; gap: 13px; flex-wrap: wrap;
}
.hero-stats {
  display: flex; gap: 0;
  margin-top: 52px;
  padding-top: 52px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.hero-stat {
  padding: 0 36px 0 0;
  margin-right: 36px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.hero-stat:last-child { border-right: none; margin-right: 0; }
.hero-stat .num, .hero-stat-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 42px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.hero-stat .label, .hero-stat-l {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 3px;
}

/* =========================================================
   Subhero (inner pages)
   ========================================================= */
.subhero {
  padding: 70px 60px 50px;
  background: var(--deep);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.subhero::before {
  content: ''; position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40%;
  background: radial-gradient(circle at 90% 50%, rgba(232,36,26,.08), transparent 60%);
  pointer-events: none;
}
.subhero > * { position: relative; }
.crumbs {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--red); }
@media (max-width: 900px) {
  .hero, .subhero { padding-left: 24px; padding-right: 24px; }
}

/* =========================================================
   Section head helper
   ========================================================= */
.section-head { max-width: 820px; margin: 0 0 44px; }
.section-head h2 { margin-bottom: 10px; }
.section-head p { color: var(--muted); font-size: 15px; }

/* =========================================================
   Grids — sectional 1px-border look
   ========================================================= */
.grid { display: grid; gap: 24px; }
.grid-tight { display: grid; gap: 1px; background: var(--border); margin-top: 8px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-tight { background: transparent; gap: 12px; }
}

/* =========================================================
   Service cards / feature cards
   ========================================================= */
.svc, .feature-card {
  background: var(--card);
  padding: 46px 38px;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid transparent;
  transition: background .3s, border-color .3s;
}
.svc:hover, .feature-card:hover {
  background: var(--card2);
  border-bottom-color: var(--red);
}
.svc-n, .feature-num {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--red);
  letter-spacing: 2px;
  margin-bottom: 18px;
  display: block;
}
.svc-ico, .feature-icon {
  font-size: 36px;
  margin-bottom: 16px;
  display: block;
  width: auto; height: auto;
  background: none;
  color: var(--red);
}
.ess-card .ess-thumb {
  width: 100%; height: 132px;
  border-radius: 12px;
  background-size: cover; background-position: center;
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.ess-card:hover .ess-thumb { transform: scale(1.03); }
.svc h3, .feature-card h3 { margin-bottom: 9px; }
.svc p, .feature-card p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; }
.svc::after, .feature-card::after {
  content: '→';
  position: absolute;
  bottom: 30px; right: 30px;
  color: var(--border2);
  font-size: 18px;
  transition: all .2s;
}
.svc:hover::after, .feature-card:hover::after {
  color: var(--red);
  transform: translateX(4px);
}

/* =========================================================
   Cards
   ========================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 28px;
  transition: border-color .2s;
}
.card.hi { background: var(--card2); }
.card.interactive:hover {
  border-color: var(--red);
  transform: translateY(-3px);
  transition: transform .25s, border-color .2s, box-shadow .3s;
  box-shadow: 0 12px 36px rgba(232,36,26,.1);
}
.card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* =========================================================
   Badges & chips
   ========================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  background: var(--card2);
  color: var(--muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid var(--border);
}
.badge.red { background: var(--red); color: #fff; border-color: var(--red); }
.badge.green { background: rgba(46,204,113,.85); color: #000; border-color: var(--green); }
.badge.amber { background: rgba(243,156,18,.85); color: #000; border-color: var(--amber); }

.chip {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--white);
  cursor: pointer;
  transition: all .2s;
}
.chip:hover { border-color: var(--border2); color: var(--white); }
.chip.active { background: var(--red); border-color: var(--red); color: #fff; }

/* =========================================================
   Tabs (brand tabs)
   ========================================================= */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 38px;
  overflow-x: auto;
}
.tabs button, .brand-tab {
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 28px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
}
.tabs button:hover { color: var(--white); }
.tabs button.active, .brand-tab.active {
  color: var(--red);
  border-bottom-color: var(--red);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =========================================================
   Bike / listing cards
   ========================================================= */
.bike-card {
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color .3s, transform .25s, box-shadow .3s;
}
.bike-card:hover {
  border-color: var(--red);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(232,36,26,.12);
}
.bike-img {
  position: relative;
  height: 200px;
  background: var(--black);
  overflow: hidden;
}
.bike-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: filter .4s, transform .5s;
}
.bike-card:hover .bike-img img {
  filter: grayscale(0%);
  transform: scale(1.06);
}
.bike-img .badge {
  position: absolute; top: 10px; left: 10px;
}
.bike-body { padding: 18px; display: flex; flex-direction: column; flex-grow: 1; }
.bike-body .brand-tag {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--red);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.bike-body h3 {
  font-size: 19px;
  margin: 4px 0 9px;
}
.bike-body .specs {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
  font-family: 'Space Mono', monospace;
  letter-spacing: .5px;
}
.bike-body .price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.bike-body .price .per {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: 1px;
}
.bike-body .actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}

/* =========================================================
   Steps (How it works)
   ========================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 38px 28px;
  border-right: 1px solid var(--border);
}
.step:last-child { border-right: none; }
.step-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 88px;
  font-weight: 900;
  color: rgba(232,36,26,.10);
  line-height: 1;
  margin-bottom: 14px;
}
.step h3 { font-size: 21px; }
.step p { color: var(--muted); font-size: 13px; margin: 0; }

/* =========================================================
   Reviews
   ========================================================= */
.rev-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
  margin-top: 40px;
}
@media (max-width: 900px) { .rev-grid { grid-template-columns: 1fr; } }
.rev {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--red-dim);
  padding: 28px;
  position: relative;
  transition: border-color .2s;
}
.rev:hover { border-top-color: var(--red); }
.rev-stars { color: var(--red); margin-bottom: 12px; font-size: 13px; letter-spacing: 2px; }
.rev-text { color: #ccc; font-size: 14px; line-height: 1.7; margin-bottom: 16px; font-style: italic; }
.rev-name { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.rev::before {
  content: '"';
  position: absolute; top: 10px; right: 18px;
  font-size: 88px;
  color: rgba(232,36,26,.05);
  font-family: serif;
  line-height: 1;
}

/* =========================================================
   Platforms
   ========================================================= */
.plat-links { display: flex; gap: 16px; flex-wrap: wrap; }
.plat-link {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 16px 36px;
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  transition: all .2s;
}
.plat-link:hover { border-color: var(--red); color: var(--red); background: rgba(232,36,26,.06); }

/* =========================================================
   Forms
   ========================================================= */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
label, .flbl {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
  display: block;
  font-weight: 400;
}
label .opt { color: var(--muted2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], input[type="url"], input[type="search"],
select, textarea, .finp, .fsel {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 12px 14px;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus, .finp:focus, .fsel:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(232,36,26,.12);
}
textarea { resize: vertical; min-height: 98px; }
input::placeholder, textarea::placeholder { color: var(--muted2); }

.form-success {
  display: none;
  padding: 12px 14px;
  background: rgba(46,204,113,.08);
  border: 1px solid var(--green);
  border-left-width: 3px;
  color: var(--green);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.form-success.show { display: block; }
.form-error {
  display: none;
  padding: 12px 14px;
  background: rgba(231,76,60,.08);
  border: 1px solid var(--warn);
  border-left-width: 3px;
  color: var(--warn);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.form-error.show { display: block; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  border-left: 2px solid transparent;
  transition: border-color .2s;
}
.faq-item.open { border-left-color: var(--red); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--white);
  text-align: left;
  padding: 20px 24px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-q .icon { color: var(--red); font-size: 18px; font-weight: 400; transition: transform .2s; }
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a {
  display: none;
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.faq-item.open .faq-a { display: block; }

/* =========================================================
   Tables
   ========================================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 13px;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.data-table th {
  background: var(--card2);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.data-table tbody tr:hover { background: var(--card2); }
.data-table code {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}

/* =========================================================
   Modal
   ========================================================= */
.modal-bg {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(5px);
  z-index: 400;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 48px 16px;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--deep);
  border: 1px solid var(--border);
  border-top: 2px solid var(--red);
  padding: 40px;
  width: 100%;
  max-width: 530px;
  position: relative;
}
.modal-lg { max-width: 720px; }
.modal h2 {
  font-size: 28px;
  margin-bottom: 4px;
}
.modal h2 .r { color: var(--red); }
.modal-close, .mx {
  position: absolute; top: 12px; right: 12px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 0;
  transition: all .2s;
}
.modal-close:hover { border-color: var(--red); color: var(--red); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--deep);
  border-top: 1px solid var(--border);
  padding: 40px 60px;
}
@media (max-width: 900px) { .site-footer { padding: 32px 24px; } }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h5 { margin-bottom: 16px; }
.footer-col a {
  display: block;
  color: var(--white);
  font-size: 13px;
  padding: 5px 0;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.footer-col a:hover { color: var(--red); }
.footer-about {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 320px;
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}
.socials { display: flex; gap: 9px; }
.social-btn, .soc {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  transition: all .2s;
}
.social-btn:hover, .soc:hover { border-color: var(--red); color: var(--red); background: transparent; }

/* =========================================================
   CTA strip
   ========================================================= */
.cta-strip {
  background: linear-gradient(135deg, var(--red), #B0150C);
  padding: 60px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.15), transparent 60%);
}
.cta-strip h2, .cta-strip p, .cta-strip > * { position: relative; color: #fff; }
.cta-strip h2 { font-size: clamp(28px, 4vw, 48px); margin-bottom: 12px; }
.cta-strip p { color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto 28px; }
.cta-strip .btn-primary { background: #fff; color: var(--red); border-color: #fff; }
.cta-strip .btn-primary:hover { background: rgba(255,255,255,.92); color: var(--red); }
.cta-strip .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.cta-strip .btn-ghost:hover { border-color: #fff; color: #fff; }

/* =========================================================
   Cookie banner
   ========================================================= */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  padding: 16px 24px;
  z-index: 250;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.cookie-banner.show { display: flex; }
.cookie-banner p {
  margin: 0;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}
.cookie-banner .actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   Maps
   ========================================================= */
.map-wrap {
  border: 1px solid var(--border);
  aspect-ratio: 16/9;
  background: var(--card);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg); }

/* =========================================================
   Reveal
   ========================================================= */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   Utility
   ========================================================= */
.divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.spacer-sm { height: 16px; } .spacer-md { height: 32px; } .spacer-lg { height: 64px; }
.hidden { display: none !important; }
.no-scroll { overflow: hidden; }
.dim { background: var(--deep); }

/* Make the brand bar (home) feel original-style */
.brand-bar {
  display: flex; gap: 60px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.brand-bar a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .15s;
}
.brand-bar a:hover { color: var(--red); }
.dot-sep { color: var(--red); margin: 0 4px; }

/* =========================================================
   Commercial intro (#commercialHero)
   ========================================================= */
#commercialHero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  cursor: pointer;
  background: var(--black);
}
#commercialHero .grid-overlay {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(232,36,26,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,36,26,.04) 1px, transparent 1px);
  background-size: 80px 80px;
}
#commercialHero .scanline {
  position: absolute; top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(232,36,26,.05), transparent);
  animation: scanline 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes scanline {
  from { transform: translateX(-100%); }
  to   { transform: translateX(220%); }
}

.comm-scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.comm-scene.active { opacity: 1; pointer-events: auto; }

.bike-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(8%) brightness(.82);
  transform: scale(1.08);
  transition: transform 9s ease;
}
.comm-scene.active .bike-bg { transform: scale(1); }
.bike-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,20,.3) 0%, rgba(13,13,20,.65) 70%, rgba(13,13,20,.85) 100%),
              radial-gradient(circle at 30% 50%, rgba(232,36,26,.10), transparent 60%);
}

.comm-inner {
  position: relative;
  z-index: 2;
  padding: 0 60px;
  max-width: 920px;
  width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.comm-tagline {
  font-family: 'Space Mono', monospace;
  font-size: clamp(10px, 1.1vw, 12px);
  color: var(--red);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.comm-tagline::before, .comm-tagline::after {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--red);
}
.comm-scene.active .comm-tagline { animation: fadeUp .8s .2s both; }

.comm-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 9vw, 130px);
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -1px;
  color: var(--white);
  margin: 0;
}
.comm-headline .r { color: var(--red); display: inline !important; }
.comm-headline .acc { color: var(--red); display: inline !important; }
.comm-scene.active .comm-headline { animation: fadeUp .9s .35s both; }

.comm-redline {
  height: 3px;
  background: var(--red);
  margin: 22px auto;
  width: 0;
}
.comm-scene.active .comm-redline { animation: lineGrow 1s .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes lineGrow {
  from { width: 0; }
  to   { width: 160px; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.comm-body {
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.4vw, 17px);
  color: rgba(240,238,248,.78);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}
.comm-scene.active .comm-body { animation: fadeUp .9s 1.1s both; }

.comm-stats {
  display: flex; gap: 36px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.comm-stat .num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.comm-stat .lbl {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.comm-scene.active .comm-stats { animation: fadeUp .9s 1.3s both; }

.comm-brands {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 28px;
  justify-content: center;
}
.comm-brand-pill {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 18px;
  border: 1px solid var(--border2);
  color: var(--white);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.comm-scene.active .comm-brands { animation: fadeUp .9s 1.4s both; }

.comm-cta {
  margin-top: 36px;
  display: inline-flex;
  background: var(--red);
  color: #fff;
  padding: 16px 36px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 1px solid var(--red);
  box-shadow: 0 8px 28px rgba(232,36,26,.35);
  transition: background .2s, transform .15s;
  align-items: center; gap: 10px;
  cursor: pointer;
}
.comm-cta:hover { background: var(--red-hot); color: #fff; transform: translateY(-2px); }
.comm-scene.active .comm-cta { animation: fadeUp .9s 1.5s both; }

/* Tiny floating controls */
.comm-skip {
  position: absolute;
  top: 16px; right: 20px;
  z-index: 4;
  background: rgba(13,13,20,.65);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 14px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.comm-skip:hover { color: var(--red); border-color: var(--red); }

.comm-dots {
  position: absolute;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  display: flex; gap: 8px;
}
.comm-dot {
  width: 22px; height: 3px;
  background: rgba(255,255,255,.18);
  transition: background .3s;
  cursor: pointer;
}
.comm-dot.active { background: var(--red); }

.comm-hint {
  position: absolute;
  bottom: 60px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  pointer-events: none;
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1;  }
}

@media (max-width: 700px) {
  #commercialHero { min-height: 520px; }
  .comm-inner { padding: 0 24px; }
  .comm-stats { gap: 20px; }
}


/* =========================================================
   Rounded edges override
   Softens every sharp corner across the site. Keeps the
   clip-path notched logo as the one intentionally-sharp shape.
   ========================================================= */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
}

/* Buttons */
.btn, .btn-primary, .btn-ghost, .btn-secondary,
.rent-btn,
.site-header .header-cta .sn-cta,
.site-header .header-signin,
.menu-btn,
.comm-cta,
.comm-skip,
.cta-strip .btn,
.cta-strip .btn-primary,
.cta-strip .btn-ghost,
.modal-close, .mx,
.mobile-nav-drawer .close {
  border-radius: var(--radius-sm) !important;
}

/* Cards & containers */
.card, .card.hi, .card.interactive,
.feature-card, .svc,
.bike-card,
.modal,
.kpi,
.faq-item,
.cta-strip,
.cookie-banner,
.map-wrap,
.data-table,
.plat-link,
.rev,
#commercialHero {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

/* Bigger panels */
.modal,
.modal-lg,
.cta-strip {
  border-radius: var(--radius-lg) !important;
}

/* Inputs */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], input[type="url"], input[type="search"],
select, textarea, .finp, .fsel {
  border-radius: var(--radius-sm) !important;
}

/* Pills */
.badge,
.chip,
.comm-brand-pill,
.social-btn, .soc,
.brand-mark,
.hero-tag,
.comm-tagline {
  border-radius: var(--radius-pill) !important;
}

/* Tabs underline indicators stay sharp (they're lines) but tab buttons round */
.tabs button, .brand-tab {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

/* Tables — round outer corners, inner cells stay flat */
.data-table thead tr:first-child th:first-child { border-top-left-radius:  var(--radius-md); }
.data-table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-md); }
.data-table tbody tr:last-child  td:first-child { border-bottom-left-radius:  var(--radius-md); }
.data-table tbody tr:last-child  td:last-child  { border-bottom-right-radius: var(--radius-md); }

/* Mobile nav drawer — keep edge-to-edge (full-screen overlay), but round its
   internal action buttons if any */
.mobile-nav-drawer .btn { border-radius: var(--radius-sm) !important; }

/* Admin sidebar nav links — keep slight rounding for nicer hover */
.side-link { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

/* Form success / error banners */
.form-success, .form-error {
  border-radius: var(--radius-sm) !important;
}

/* Bike card image: keep top corners rounded with the card */
.bike-img { border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* Commercial dots stay tiny pills */
.comm-dot { border-radius: var(--radius-pill) !important; }

/* =========================================================
   Flat headline typography (3D extrusion removed per request)
   Light text-shadow only for readability on busy backgrounds.
   ========================================================= */
h1, h2,
.hero h1, .subhero h1,
.comm-headline,
.top-bar h1 {
  text-shadow: none;
  letter-spacing: normal;
}

/* "RIDE" word stays slightly lighter than body text but no extrusion */
h1 .ride, .comm-headline .ride,
.hero h1 .ride, .subhero h1 .ride {
  color: #b5b5c4;
  text-shadow: none;
}

/* Red accent words: solid red, no extrusion */
h1 .acc, h1 .r,
.comm-headline .acc, .comm-headline .r,
.hero h1 .accent {
  text-shadow: none;
}


/* =========================================================
   Workshop visual treatment for commercial scenes
   Scene 1 (Service) and Scene 2 (Parts) get a warm, slightly
   desaturated treatment so they read as "shop interior" vs
   the glossy fleet photos in the rental scene.
   ========================================================= */
.comm-scene[data-scene="1"] .bike-bg,
.comm-scene[data-scene="2"] .bike-bg {
  filter: saturate(0.85) brightness(0.78) sepia(0.10) contrast(1.04);
}
.comm-scene[data-scene="1"] .bike-bg::after,
.comm-scene[data-scene="2"] .bike-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(232,36,26,.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(20,12,6,.35) 0%, rgba(8,4,2,.6) 100%);
  pointer-events: none;
}

.comm-scene[data-scene="3"] .bike-bg {
  filter: saturate(0.9) brightness(0.82);
}

/* Rental scene 4 keeps full color — it's the "premium fleet" moment */
.comm-scene[data-scene="4"] .bike-bg {
  filter: saturate(1.05) brightness(0.88);
}

.comm-scene[data-scene="5"] .bike-bg {
  filter: brightness(0.82) contrast(1.04);
}


/* =========================================================
   EMIL-STYLE POLISH PASS
   Custom easings + button feedback + hover gating + stagger
   ========================================================= */

:root {
  /* Strong custom easings (built-in CSS easings are too weak) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 1. Press feedback on every pressable element ----
   Scale(0.97) on :active makes the UI feel like it's listening.
   Subtle scale + fast 140ms ease-out = instant tactile feedback. */
.btn,
.btn-primary,
.btn-ghost,
.btn-sm,
.btn-lg,
.btn-block,
.chip,
.comm-cta,
.sn-cta,
.header-signin,
.header-admin,
.feature-card,
.card.interactive,
.bike-card .actions a,
button[type="submit"] {
  transition: transform 140ms var(--ease-out),
              background-color 160ms var(--ease-out),
              border-color 160ms var(--ease-out),
              color 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out);
}

.btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn-sm:active,
.btn-lg:active,
.btn-block:active,
.chip:active,
.comm-cta:active,
.sn-cta:active,
.header-signin:active,
.header-admin:active,
button[type="submit"]:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

/* Subtler press for cards (they're bigger, smaller scale feels right) */
.feature-card:active,
.card.interactive:active,
.bike-card:active {
  transform: scale(0.985);
  transition-duration: 100ms;
}

/* ---- 2. Gate hover transforms behind (hover: hover) ----
   Without this, mobile taps trigger hover state and get stuck. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover {
    transform: translateY(-1px);
  }
  .feature-card:hover,
  .card.interactive:hover,
  .bike-card:hover {
    transform: translateY(-2px);
  }
  .chip:hover {
    border-color: var(--red);
  }
}

/* Mobile / touch: kill the hover translates entirely */
@media (hover: none), (pointer: coarse) {
  .btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .feature-card:hover,
  .card.interactive:hover,
  .bike-card:hover {
    transform: none;
  }
}

/* ---- 3. Reveal-on-scroll: start from scale(0.97), not 0 ----
   Nothing in the real world appears from nothing.
   Use ease-out so the user sees immediate movement. */
.reveal {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 480ms var(--ease-soft),
              transform 480ms var(--ease-soft);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- 4. Stagger the feature cards on entry ---- */
.grid-4 .feature-card.reveal {
  transition-delay: 0ms;
}
.grid-4 .feature-card.reveal:nth-child(1) { transition-delay: 0ms;   }
.grid-4 .feature-card.reveal:nth-child(2) { transition-delay: 60ms;  }
.grid-4 .feature-card.reveal:nth-child(3) { transition-delay: 120ms; }
.grid-4 .feature-card.reveal:nth-child(4) { transition-delay: 180ms; }

.grid-3 > .reveal:nth-child(1) { transition-delay: 0ms;   }
.grid-3 > .reveal:nth-child(2) { transition-delay: 70ms;  }
.grid-3 > .reveal:nth-child(3) { transition-delay: 140ms; }

/* Hero stats stagger */
.hero-stats .hero-stat { transition: opacity 400ms var(--ease-soft) calc(var(--i, 0) * 40ms),
                                     transform 400ms var(--ease-soft) calc(var(--i, 0) * 40ms); }
.hero-stats .hero-stat:nth-child(1) { --i: 0; }
.hero-stats .hero-stat:nth-child(2) { --i: 1; }
.hero-stats .hero-stat:nth-child(3) { --i: 2; }
.hero-stats .hero-stat:nth-child(4) { --i: 3; }

/* ---- 5. Replace `transition: all` patterns on key elements ----
   Override the over-broad transitions with specific properties.
   Browsers treat `all` as expensive — and animating layout properties
   kills the off-main-thread performance benefit. */
.btn,
.btn-primary,
.btn-ghost {
  transition: transform 140ms var(--ease-out),
              background-color 160ms var(--ease-out),
              border-color 160ms var(--ease-out),
              color 160ms var(--ease-out),
              box-shadow 200ms var(--ease-out) !important;
}

.feature-card,
.card.interactive,
.bike-card {
  transition: transform 220ms var(--ease-out),
              border-color 200ms var(--ease-out),
              box-shadow 220ms var(--ease-out) !important;
}

/* ---- 6. transform-origin for popovers (origin-aware) ----
   Modals stay centered. Sign-in modal etc. */
.modal {
  transform-origin: center;
}

/* ---- 7. Commercial scene transitions: stronger curve, snappier feel ---- */
.comm-scene {
  transition: opacity 480ms var(--ease-soft);
}

/* ---- 8. Form input focus: better feedback ---- */
input,
select,
textarea {
  transition: border-color 160ms var(--ease-out),
              box-shadow 200ms var(--ease-out) !important;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232,36,26,.16);
}

/* ---- 9. Header nav: instant hover, no laggy transitions ----
   These get hovered constantly. Keep them fast. */
.nav-links a {
  transition: color 120ms var(--ease-out) !important;
}

/* ---- 10. Chips: snap-on for instant feedback (filter UI) ---- */
.chip {
  transition: background-color 140ms var(--ease-out),
              border-color 140ms var(--ease-out),
              color 140ms var(--ease-out),
              transform 140ms var(--ease-out) !important;
}

/* ---- 11. Service-animation HUD: stronger easings ---- */
.svc-hud {
  transition: opacity 200ms var(--ease-out);
}

/* ---- 12. Reduce motion: keep opacity transitions, kill movement ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in,
  .feature-card,
  .card.interactive,
  .bike-card,
  .btn,
  .btn-primary,
  .btn-ghost,
  .hero-stat,
  .comm-scene {
    transition: opacity 200ms ease !important;
    transform: none !important;
    animation: none !important;
  }
  .reveal { opacity: 0; }
  .reveal.in { opacity: 1; }
}


/* =========================================================
   EMIL POLISH v2 — modals + drawer + form feedback
   ========================================================= */

/* ---- Modal: backdrop + dialog enter/exit ---- */
.modal-bg {
  display: flex !important;          /* always present, opacity-controlled */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease-out),
              visibility 0ms linear 200ms;
}
.modal-bg.open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms var(--ease-out),
              visibility 0ms linear 0ms;
}
.modal-bg.closing {
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms var(--ease-out),
              visibility 0ms linear 150ms;
}

.modal {
  opacity: 0;
  transform: scale(0.97) translateY(8px);
  transform-origin: center;
  transition: transform 220ms var(--ease-out),
              opacity 200ms var(--ease-out);
  will-change: transform, opacity;
}
.modal-bg.open .modal {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.modal-bg.closing .modal {
  opacity: 0;
  transform: scale(0.97) translateY(8px);
  transition: transform 160ms var(--ease-out),
              opacity 140ms var(--ease-out);
}

/* ---- Mobile drawer: right-side slide ---- */
.mobile-nav-drawer {
  display: flex !important;          /* always rendered for slide */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 340ms var(--ease-drawer),
              visibility 0ms linear 340ms;
  will-change: transform;
}
.mobile-nav-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 340ms var(--ease-drawer),
              visibility 0ms linear 0ms;
}
.mobile-nav-drawer.closing {
  transform: translateX(100%);
  visibility: visible;
  transition: transform 220ms var(--ease-out),
              visibility 0ms linear 220ms;
}

/* Stagger drawer links — each link slides in slightly after the previous */
.mobile-nav-drawer a {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 260ms var(--ease-out),
              transform 260ms var(--ease-out);
}
.mobile-nav-drawer.open a {
  opacity: 1;
  transform: translateX(0);
}
.mobile-nav-drawer.open a:nth-child(2) { transition-delay: 60ms;  }
.mobile-nav-drawer.open a:nth-child(3) { transition-delay: 95ms;  }
.mobile-nav-drawer.open a:nth-child(4) { transition-delay: 130ms; }
.mobile-nav-drawer.open a:nth-child(5) { transition-delay: 165ms; }
.mobile-nav-drawer.open a:nth-child(6) { transition-delay: 200ms; }
.mobile-nav-drawer.open a:nth-child(7) { transition-delay: 235ms; }
.mobile-nav-drawer.open a:nth-child(8) { transition-delay: 270ms; }
.mobile-nav-drawer.open a:nth-child(9) { transition-delay: 305ms; }

/* ---- Hero entry stagger (uses --i index pattern) ---- */
.hero .reveal {
  transition-delay: calc(var(--i, 0) * 70ms);
}
.hero h1.reveal               { --i: 1; }
.hero p.lead.reveal           { --i: 2; }
.hero .hero-actions.reveal    { --i: 3; }
.hero .hero-stats.reveal      { --i: 4; }

/* ---- Form submit button: loading spinner state ---- */
button[type="submit"].submitting {
  pointer-events: none;
  position: relative;
  color: transparent !important;
  text-shadow: none !important;
}
button[type="submit"].submitting::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  /* Fast spin = perceived performance */
  animation: emilSpin 0.6s linear infinite;
}
@keyframes emilSpin {
  to { transform: rotate(360deg); }
}

/* ---- prefers-reduced-motion override for new bits ---- */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal-bg,
  .mobile-nav-drawer,
  .mobile-nav-drawer a {
    transition: opacity 150ms ease !important;
    transform: none !important;
  }
  button[type="submit"].submitting::after { animation: none !important; }
}


/* =========================================================
   Under-construction banner (toggle from /admin/settings.php)
   ========================================================= */
.mf-construction-banner {
  position: fixed;
  bottom: 16px; right: 16px; left: 16px;
  max-width: 480px;
  margin-left: auto;
  z-index: 350;
  background: var(--deep, #13131f);
  border: 1px solid var(--red, #E8241A);
  border-left: 4px solid var(--red, #E8241A);
  border-radius: var(--radius-md, 12px);
  padding: 16px 20px 16px 18px;
  font-family: 'Barlow', sans-serif;
  color: var(--white, #fff);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  pointer-events: none;
  transition: opacity 320ms var(--ease-out, cubic-bezier(0.23,1,0.32,1)),
              transform 320ms var(--ease-out, cubic-bezier(0.23,1,0.32,1));
  display: none;
}
.mf-construction-banner.show {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mf-construction-banner.closing {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}
.mf-construction-banner .mf-cb-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red, #E8241A);
  display: flex; align-items: center; gap: 8px;
}
.mf-construction-banner .mf-cb-msg {
  font-size: 14px; line-height: 1.55;
  margin: 6px 0 0; color: rgba(255,255,255,.85);
}
.mf-construction-banner .mf-cb-close {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; color: rgba(255,255,255,.55);
  width: 28px; height: 28px; cursor: pointer;
  font-size: 18px; line-height: 1;
  border-radius: 50%;
  transition: color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.mf-construction-banner .mf-cb-close:hover {
  color: var(--white); background: rgba(255,255,255,.08);
}
@media (max-width: 540px) {
  .mf-construction-banner { left: 12px; right: 12px; bottom: 12px; padding: 14px 36px 14px 16px; }
}


/* =========================================================
   Services-page brand layout (new BMW/KTM specialist pages)
   ========================================================= */

/* Subhero meta badges */
.hero-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.badge-loc, .badge-open {
  display: inline-flex; align-items: center;
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  color: var(--white, #fff);
}
.badge-open { color: #7fd47f; border-color: rgba(127,212,127,.35); }

/* Breadcrumb */
.breadcrumb {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted, #888);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--red, #E8241A); }
.breadcrumb span { color: var(--white); }

/* Content block sections (alternating light/dark) */
.content-block {
  padding: 80px 0;
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
}
.content-block.light { background: var(--deep, #13131f); }
.content-block.dark  { background: var(--black, #0d0d14); }

.block-eyebrow {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red, #E8241A);
  margin-bottom: 16px;
}
.block-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -.5px;
  color: var(--white, #fff);
  margin: 0 0 24px;
  text-transform: none;
}
.block-desc {
  max-width: 720px;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}
.block-desc p { margin: 0 0 14px; }
.block-desc em { font-style: italic; color: var(--white, #fff); }

.block-divider {
  border: none;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
  margin: 36px 0 24px;
  max-width: 720px;
  margin-left: 0;
}

.examples-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted, #888);
  margin-bottom: 14px;
}

.examples-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 720px;
  font-family: 'Barlow', sans-serif;
}
.examples-list li {
  display: grid;
  grid-template-columns: 16px 200px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
  align-items: baseline;
}
.examples-list li:last-child { border-bottom: none; }
.ex-bullet { color: var(--red, #E8241A); font-family: monospace; }
.ex-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--white, #fff);
  text-transform: uppercase;
}
.ex-detail {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .examples-list li {
    grid-template-columns: 16px 1fr;
  }
  .ex-detail { grid-column: 2; padding-top: 4px; }
}

/* CTA block */
.cta-block {
  padding: 96px 0;
  background: var(--deep, #13131f);
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
  text-align: center;
}
.cta-block .block-title { text-align: center; }
.cta-desc {
  font-family: 'Barlow', sans-serif;
  font-size: 17px;
  color: rgba(255,255,255,.7);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Standalone red and outline button styles (used on brand pages) */
.btn-red {
  display: inline-flex; align-items: center;
  background: var(--red, #E8241A);
  color: var(--white, #fff);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--radius-md, 10px);
  text-decoration: none;
  transition: transform 140ms var(--ease-out, ease-out),
              background-color 160ms var(--ease-out, ease-out);
}
.btn-red:hover { background: #d11d12; }
.btn-red:active { transform: scale(0.97); }

.btn-outline {
  display: inline-flex; align-items: center;
  background: transparent;
  color: var(--white, #fff);
  border: 1px solid rgba(255,255,255,.25);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--radius-md, 10px);
  text-decoration: none;
  transition: transform 140ms var(--ease-out, ease-out),
              border-color 160ms var(--ease-out, ease-out),
              background-color 160ms var(--ease-out, ease-out);
}
.btn-outline:hover { border-color: var(--white, #fff); background: rgba(255,255,255,.06); }
.btn-outline:active { transform: scale(0.97); }

/* Brand-selector cards (override inline duplicates so they animate properly) */
.brand-card {
  transition: border-color 180ms var(--ease-out, ease-out),
              transform 180ms var(--ease-out, ease-out),
              box-shadow 180ms var(--ease-out, ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
  }
}
.brand-card:active { transform: scale(0.99); }

/* Logo image: smaller version for footer */
.logo-img.sm { width: 140px; height: auto; }


/* =========================================================
   BMW / KTM brand pages — centered content blocks
   ========================================================= */
.content-block .container { text-align: center; }
.content-block .block-title,
.content-block .block-desc { margin-left: auto; margin-right: auto; }
.content-block .block-divider { margin-left: auto; margin-right: auto; }
.content-block .examples-list { margin-left: auto; margin-right: auto; text-align: left; }
.content-block .examples-label { text-align: center; }

/* CTA block was already centered, keep it explicit */
.cta-block .container { text-align: center; }
.cta-block .cta-btns { justify-content: center; }

/* =========================================================
   ALT DESIGN — Animated hero title
   Per-word clip-wipe rise with stagger. Runs once on load.
   ========================================================= */
.hero-title-anim {
  /* keep the base h1 sizing from .hero h1 */
  overflow: visible;
}
.hero-title-anim .line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;   /* keep descenders visible during rise */
  margin-bottom: -0.08em;
}
.hero-title-anim .w {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: altWordRise 700ms var(--ease-soft, cubic-bezier(0.16,1,0.3,1)) forwards;
  animation-delay: calc(180ms + var(--wi, 0) * 90ms);
  will-change: transform, opacity;
}
@keyframes altWordRise {
  0%   { transform: translateY(110%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0);   opacity: 1; }
}
/* Red underline sweep under "a specialist." after words land */
.hero-title-anim .line:last-of-type {
  position: relative;
}
.hero-title-anim .line:last-of-type::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 4px;
  width: 100%;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: altUnderline 600ms var(--ease-out, cubic-bezier(0.23,1,0.32,1)) forwards;
  animation-delay: 950ms;
}
@keyframes altUnderline {
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title-anim .w { animation: none; transform: none; opacity: 1; }
  .hero-title-anim .line:last-of-type::after { animation: none; transform: scaleX(1); }
}


/* =========================================================
   ALT DESIGN — Instagram carousel (horizontal scroll-snap)
   ========================================================= */
.ig-carousel-wrap {
  position: relative;
}
.ig-scroller {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.ig-scroller:active { cursor: grabbing; }
.ig-scroller::-webkit-scrollbar { height: 6px; }
.ig-scroller::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 3px; }
.ig-scroller::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }

.ig-card {
  flex: 0 0 320px;
  max-width: 320px;
  scroll-snap-align: start;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.ig-card .instagram-media { width: 100% !important; min-width: 0 !important; }

/* Placeholder teaser card (until real reel URLs are added) */
.ig-placeholder {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--card);
  border: 1px solid var(--border);
  text-decoration: none;
}
.ig-ph-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(.8) brightness(.55);
  transition: transform 400ms var(--ease-out, ease-out), filter 400ms var(--ease-out, ease-out);
}
.ig-ph-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%);
}
.ig-ph-overlay svg { opacity: .9; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
@media (hover: hover) and (pointer: fine) {
  .ig-placeholder:hover .ig-ph-bg { transform: scale(1.05); filter: saturate(1) brightness(.7); }
}

/* Follow card */
.ig-follow-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
}
.ig-follow-icon { line-height: 0; }

/* Scroll arrows */
.ig-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(13,13,20,.85);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 140ms var(--ease-out, ease-out),
              background-color 140ms var(--ease-out, ease-out),
              transform 140ms var(--ease-out, ease-out);
}
.ig-arrow:hover { border-color: var(--red); background: rgba(232,36,26,.15); }
.ig-arrow:active { transform: translateY(-50%) scale(0.94); }
.ig-arrow-left  { left: -12px; }
.ig-arrow-right { right: -12px; }
@media (max-width: 700px) {
  .ig-arrow { display: none; }   /* touch scrolling on mobile */
  .ig-card { flex-basis: 280px; max-width: 280px; }
}

/* Cards are clickable — make that obvious and ensure they sit above the scroller */
.ig-placeholder { cursor: pointer; }
.ig-card a, a.ig-card { -webkit-user-drag: none; user-select: none; }

/* =========================================================
   ALT DESIGN — Hover-to-play video cards
   ========================================================= */
.ig-video-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: #0a0a10;
  overflow: hidden;
  text-decoration: none;
}
.ig-video-card video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85) brightness(.75);
  transition: filter 300ms var(--ease-out, ease-out),
              transform 400ms var(--ease-out, ease-out);
}
.ig-video-card .ig-video-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.5) 100%);
  transition: opacity 250ms var(--ease-out, ease-out);
  pointer-events: none;
}
.ig-video-card.playing video { filter: saturate(1) brightness(1); transform: scale(1.02); }
.ig-video-card.playing .ig-video-overlay { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ig-video-card video { transition: none; }
}

/* =========================================================
   SHOP HOME — structure cloned from /mfa/ main-home
   ========================================================= */
.shop-hero { position: relative; min-height: 64vh; overflow: hidden; }
.shop-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  display: flex; align-items: center;
  opacity: 0; transition: opacity 600ms var(--ease-soft, ease);
  pointer-events: none;
}
.shop-slide::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(13,13,20,.86) 0%, rgba(13,13,20,.55) 55%, rgba(13,13,20,.25) 100%);
}
.shop-slide.active { opacity: 1; pointer-events: auto; position: relative; }
.shop-slide-inner { position: relative; z-index: 2; padding: 72px 0; }
.shop-slide-price {
  font-family:'Space Mono',monospace; color: var(--red); font-size: 15px;
  letter-spacing: 2px; margin-bottom: 8px;
}
.shop-slide-kicker {
  font-family:'Space Mono',monospace; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px;
}
.shop-slide-title {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size: clamp(44px, 6vw, 76px); line-height:.98; color: var(--white);
  margin: 0 0 24px; text-transform: uppercase;
}
.shop-hero-dots {
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:5;
}
.shop-dot {
  width:10px; height:10px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); background:transparent; cursor:pointer;
  transition: background-color 150ms var(--ease-out, ease), transform 150ms var(--ease-out, ease);
}
.shop-dot.active { background: var(--red); border-color: var(--red); transform: scale(1.2); }

/* Vehicle search */
.veh-search { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.veh-search select, .veh-search input {
  background: var(--black); border:1px solid var(--border); color: var(--white);
  padding: 12px 14px; border-radius: var(--radius-sm, 6px);
  font-family:'Barlow',sans-serif; font-size: 14px; min-width: 150px;
}
.veh-search select:focus, .veh-search input:focus { border-color: var(--red); outline:none; }

/* Category tiles */
.cat-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:12px;
}
.cat-tile {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 22px 12px; text-decoration:none;
  color: var(--white);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px;
  letter-spacing:1px; text-transform:uppercase; text-align:center;
  transition: border-color 160ms var(--ease-out, ease), transform 160ms var(--ease-out, ease);
}
.cat-tile .cat-ic { font-size: 28px; }
@media (hover:hover) and (pointer:fine) {
  .cat-tile:hover { border-color: var(--red); transform: translateY(-2px); }
}
.cat-tile:active { transform: scale(.98); }
.cat-all { border-style: dashed; color: var(--red); }

/* Promo banners */
.promo-banner {
  position:relative; display:block; min-height:230px;
  background-size:cover; background-position:center;
  border-radius: var(--radius-md, 12px); overflow:hidden; text-decoration:none;
}
.promo-banner::after { content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(13,13,20,.85) 0%, rgba(13,13,20,.25) 100%); }
.promo-inner { position:relative; z-index:2; padding:30px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.promo-kicker { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.promo-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:30px; color:var(--white); margin:0; text-transform:uppercase; }
.promo-price { font-family:'Space Mono',monospace; color:var(--red); font-size:15px; margin-bottom:10px; }

/* Essentials price tag */
.ess-price { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.3rem; color:var(--red); margin-top:10px; }

/* Brand strip */
.brand-strip-item {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.6rem;
  color: var(--muted); text-decoration:none; letter-spacing:1px;
  transition: color 150ms var(--ease-out, ease);
}
.brand-strip-item:hover { color: var(--red); }

/* Bundle spotlight */
.bundle-spot {
  position:relative; border-radius: var(--radius-lg, 16px); overflow:hidden;
  background-size:cover; background-position:center; min-height:340px;
  display:flex; align-items:center;
}
.bundle-spot::after { content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(13,13,20,.92) 0%, rgba(13,13,20,.55) 60%, rgba(13,13,20,.2) 100%); }
.bundle-inner { position:relative; z-index:2; padding: 44px; }
.bundle-price { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:2.4rem; color:var(--red); margin:12px 0 18px; }

/* Blog post image */
.post-img { aspect-ratio: 16/9; background-size:cover; background-position:center; border-radius: var(--radius-sm, 8px); }


/* =========================================================
   Subhero background slideshow (per-page crossfade)
   ========================================================= */
.subhero { position: relative; overflow: hidden; }
.subhero > .container { position: relative; z-index: 2; }
.subhero-slides { position: absolute; inset: 0; z-index: 0; }
.subhero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
  transform: scale(1.04);
}
.subhero-slide.on { opacity: 1; }
.subhero::after {
  /* dark gradient overlay so title text stays legible over photos */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,13,20,.82) 0%, rgba(13,13,20,.72) 45%, rgba(13,13,20,.88) 100%),
              radial-gradient(circle at 25% 40%, rgba(232,36,26,.10), transparent 62%);
  pointer-events: none;
}
.subhero.has-slides { padding-top: 56px; padding-bottom: 56px; }

/* ==================================================================
   MOBILE-FRIENDLY REFINEMENTS  (appended — wins in cascade order)
   ================================================================== */
@media (max-width: 760px){
  /* Inline grid-template-columns set via style="" can't be collapsed by
     class-based media queries, so force single-column on phones. Fixes
     about / contact / marketplace / services spec grids overflowing. */
  [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }

  /* Inputs >=16px so iOS doesn't auto-zoom the page on focus */
  input, select, textarea{ font-size: 16px !important; }

  /* Comfortable edge padding on every section */
  .container{ padding-left: 20px !important; padding-right: 20px !important; }

  /* Stack any horizontal flex rows that would otherwise overflow */
  .flex-wrap{ gap: 20px !important; }
}

/* Photo/feature card grids: 2-up on tablets & phones, single on tiny screens */
@media (max-width: 900px){ .grid-4{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 460px){ .grid-4{ grid-template-columns: 1fr !important; } }

/* Guard against stray horizontal scrolling site-wide */
html, body{ max-width: 100%; }
img, video, iframe{ max-width: 100%; }