:root {
  --bmw-blue: #0066B1;
  --bmw-darkblue: #003B75;
  --bmw-red: #E51937;
  --bg: #ffffff;
  --text: #0a0c0f;
  --muted: #5c6b80;
  --accent: var(--bmw-blue);           /* BMW Blue */
  --accent-strong: #004f89;    /* Hover */
  --card: #ffffff;
  --card-border: rgba(10,12,15,0.12);
  --header: rgba(255,255,255,0.92);
  --header-height: 72px;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(10,12,15,0.05);
  --shadow: 0 8px 24px rgba(10,12,15,0.08);
  --surface-1: #0c1118;             /* deep tech background */
  --surface-2: #0f1520;             /* hero panel */
  --glass: rgba(255,255,255,0.06);  /* frosted panels on dark */
  --ring: color-mix(in oklab, var(--accent) 55%, white);
  --ring-soft: color-mix(in oklab, var(--accent) 20%, transparent);
  --idrive-red: #c21f2c;
}

/* -------- Dark theme (optional) -------- */
body.bmw-theme.bmw-dark {
  --bg: #0b0f14;
  --text: #e6ecf7;
  --muted: #a7b3c6;
  --card: #0f1520;
  --card-border: rgba(230,236,247,0.08);
  --header: rgba(6,10,16,0.75);
}
body.bmw-theme.bmw-dark::before {
  background:
    linear-gradient(180deg, #0b0f14, #0c1118),
    radial-gradient(800px 400px at 85% 8%, color-mix(in oklab, var(--bmw-blue) 22%, transparent), transparent 60%),
    radial-gradient(700px 380px at 10% -4%, color-mix(in oklab, var(--bmw-red) 18%, transparent), transparent 60%),
    linear-gradient(to right, rgba(230,236,247,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230,236,247,0.06) 1px, transparent 1px);
}
body.bmw-theme.bmw-dark .bmw-footer { background: #08101d; color: #dfe8f6; }

/* -------- Base -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.bmw-theme {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
body.bmw-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #ffffff, #f8fafc),
    radial-gradient(800px 400px at 85% 8%, color-mix(in oklab, var(--bmw-blue) 12%, transparent), transparent 60%),
    radial-gradient(700px 380px at 10% -4%, color-mix(in oklab, var(--bmw-red) 10%, transparent), transparent 60%),
    linear-gradient(to right, rgba(10,12,15,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,12,15,0.035) 1px, transparent 1px);
  background-size: auto, auto, auto, 24px 24px, 24px 24px;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-weight: 800; line-height: 1.15; margin: 0 0 0.75rem; }
.bmw-display { font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem); letter-spacing: -0.025em; font-weight: 900; line-height: 1.04; margin: 0 0 .6rem; }
.bmw-lead { font-size: 1.125rem; color: var(--muted); max-width: 60ch; }
.bmw-accent { color: var(--accent); }

/* -------- Header -------- */
.bmw-header { position: fixed; inset: 0 0 auto 0; height: var(--header-height); background: var(--header); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--card-border); z-index: 1000; box-shadow: 0 8px 24px rgba(10,12,15,0.06); }
.bmw-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--bmw-blue), var(--bmw-darkblue), var(--bmw-red));
}
.bmw-header__inner { max-width: 1280px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }

.bmw-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .2px; }
.bmw-logo__ring { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent); display: inline-block; position: relative; }
.bmw-logo:hover .bmw-logo__ring { box-shadow: 0 0 0 4px var(--ring-soft); }
.bmw-logo__ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid var(--card-border); }
.bmw-logo__type { font-size: 1.1rem; color: var(--text); }

.bmw-nav { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 22px); }
.bmw-nav a { font-weight: 600; opacity: 0.9; transition: opacity .2s ease, color .2s ease; position: relative; }
.bmw-nav a:hover { opacity: 1; color: var(--accent); }
.bmw-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: linear-gradient(90deg, var(--bmw-blue), var(--bmw-darkblue), var(--bmw-red)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; border-radius: 2px; }
.bmw-nav a:hover::after, .bmw-nav a:focus-visible::after { transform: scaleX(1); }

/* -------- Sections -------- */
.bmw-section { padding: calc(var(--header-height) + 2.5rem) 20px 4.5rem; max-width: 1280px; margin: 0 auto; scroll-margin-top: var(--header-height); }
.bmw-section + .bmw-section { border-top: 1px solid color-mix(in oklab, var(--card-border) 70%, #fff); padding-top: 3.5rem; }
.bmw-section__head { margin-bottom: 1.2rem; }
.bmw-section__head h2 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem); position: relative; padding-bottom: .55rem; letter-spacing: -0.01em; }
.bmw-section__kicker { color: var(--muted); font-weight: 600; }
.bmw-section__head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 2px; background: linear-gradient(90deg, var(--bmw-blue), var(--bmw-darkblue), var(--bmw-red)); border-radius: 2px; }

/* -------- Hero -------- */
.bmw-hero {
  margin: 0;
  padding: calc(var(--header-height) + 4rem) 0 5.5rem;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: url('assets/hero-bmw.jpg') no-repeat right center / cover;
  background-position: 60% center;
  display: flex;
  align-items: center;
}
.bmw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,12,18,0.82) 0%, rgba(8,12,18,0.62) 32%, rgba(8,12,18,0.30) 58%, rgba(8,12,18,0.06) 82%),
    radial-gradient(900px 500px at 110% 0%, color-mix(in oklab, var(--bmw-red) 18%, transparent), transparent 66%);
  z-index: 0;
}

/* Hide fallback hero inline image if present */
.bmw-hero__bg { display: none !important; }
.bmw-hero__grid { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: center; }
.bmw-hero__col--text { max-width: 760px; background: rgba(255,255,255,0.06); backdrop-filter: blur(12px) saturate(120%); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 1.2rem 1.25rem 1.25rem; box-shadow: 0 12px 40px rgba(0,0,0,0.25); margin: 0 auto; }
body:not(.bmw-dark) .bmw-hero__col--text { background: rgba(255,255,255,0.75); border-color: rgba(10,12,15,0.12); }
.bmw-hero__col--media, .bmw-hero__img { display: none; }

.bmw-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.bmw-badges { list-style: none; display: flex; gap: 10px 16px; flex-wrap: wrap; color: var(--muted); font-size: .98rem; margin-top: .5rem; }
.bmw-spec { margin-top: 1rem; }
.bmw-badges li { position: relative; padding-left: 14px; }
.bmw-badges li::before { content: '\2022'; position: absolute; left: 0; top: -1px; color: var(--card-border); }

/* -------- Buttons -------- */
.bmw-btn { display: inline-block; padding: .7rem 1.2rem; border-radius: 10px; border: 1px solid var(--card-border); background: transparent; font-weight: 700; transition: transform .02s ease, background-color .2s ease, border-color .2s ease, color .2s ease; cursor: pointer; }
.bmw-btn:active { transform: translateY(2px); }
.bmw-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 8px 20px var(--ring-soft); }
.bmw-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 14px 28px var(--ring-soft); }
.bmw-btn--ghost { color: var(--text); background: rgba(10,12,15,0.02); border-color: rgba(10,12,15,0.18); }
.bmw-btn--ghost:hover { background: rgba(10,12,15,0.06); }
.bmw-btn--ghost:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring-soft); }
.bmw-btn--link { background: none; border: none; padding: 0; color: var(--accent); font-weight: 700; }

/* -------- Cards / Services -------- */
.bmw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 1rem; }
.bmw-card { background: color-mix(in oklab, var(--card) 92%, #f7f9fc); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.4rem 1.4rem; box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .25s ease, transform .12s ease; position: relative; }
.bmw-card:hover { border-color: color-mix(in oklab, var(--accent) 24%, var(--card-border)); box-shadow: var(--shadow); transform: translateY(-2px) scale(1.01); }
.bmw-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--bmw-blue), var(--bmw-darkblue), var(--bmw-red)); opacity: 0; transition: opacity .25s ease; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.bmw-card:hover::before { opacity: 1; }
.bmw-card h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.bmw-card p { color: var(--muted); }

/* -------- Why / Ticks -------- */
.bmw-ticks { list-style: none; margin-top: .5rem; display: grid; gap: .5rem; }
.bmw-ticks li { position: relative; padding-left: 24px; }
.bmw-ticks li::before { content: '✔'; color: var(--accent); position: absolute; left: 0; top: 0; }

/* -------- FAQ -------- */
.bmw-faq details { border: 1px solid var(--card-border); border-radius: 10px; padding: .9rem 1rem; background: var(--card); box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.bmw-faq details + details { margin-top: .6rem; }
.bmw-faq details[open] { border-color: color-mix(in oklab, var(--accent) 22%, var(--card-border)); box-shadow: var(--shadow); }
.bmw-faq summary { font-weight: 700; cursor: pointer; list-style: none; }
.bmw-faq summary::-webkit-details-marker { display: none; }
.bmw-faq summary::after { content: "›"; float: right; transform: rotate(0deg); transition: transform .2s ease; font-weight: 800; }
.bmw-faq details[open] summary::after { transform: rotate(90deg); }

/* -------- Process / Steps -------- */
.bmw-steps { counter-reset: step; list-style: none; display: grid; gap: .75rem; margin-top: .5rem; }
.bmw-steps li { position: relative; padding-left: 42px; min-height: 32px; display: flex; align-items: center; }
.bmw-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; }

/* -------- Pricing -------- */
.bmw-price-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 1rem; }
.bmw-price-item { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 1.2rem 1.25rem; box-shadow: var(--shadow-sm); }
.bmw-price { font: 800 1.2rem/1 Inter, sans-serif; color: var(--accent); margin-top: .25rem; }
.bmw-note { margin-top: .8rem; font-size: .95rem; color: var(--muted); }

/* -------- Contact -------- */
.bmw-contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 1rem; }
.bmw-contact__card { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 1.2rem 1.25rem; box-shadow: var(--shadow-sm); }
.bmw-contact__list { list-style: none; padding-left: 0; display: grid; gap: .35rem; margin: .4rem 0 0; }

.bmw-map iframe { width: 100%; height: clamp(220px, 24vw, 320px); border: 0; margin-top: .4rem; border-radius: 8px; }

.bmw-booking label { display: block; margin-bottom: .9rem; font-size: .95rem; font-weight: 600; }
.bmw-booking input, .bmw-booking textarea { width: 100%; padding: .78rem .9rem; margin-top: .35rem; border-radius: 10px; border: 1px solid var(--card-border); background: #fff; color: var(--text); line-height: 1.45; transition: border-color .2s ease, box-shadow .2s ease; }

/* Improve placeholder contrast (light theme) */
.bmw-booking input::placeholder,
.bmw-booking textarea::placeholder {
  color: #5c6b80;  /* darker gray for readability on white */
  opacity: 1;      /* ensure visible in Firefox */
}

/* Better contrast in dark theme for inputs and placeholders */
body.bmw-theme.bmw-dark .bmw-booking input,
body.bmw-theme.bmw-dark .bmw-booking textarea {
  background: #0f1520;
  color: #e6ecf7;
  border-color: rgba(230,236,247,0.18);
}
body.bmw-theme.bmw-dark .bmw-booking input::placeholder,
body.bmw-theme.bmw-dark .bmw-booking textarea::placeholder {
  color: #b7c3d6;  /* lighter gray on dark bg */
  opacity: 1;
}
.bmw-booking input:focus, .bmw-booking textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring-soft); }
.bmw-booking input:invalid, .bmw-booking textarea:invalid { border-color: #e83b46; }
.bmw-booking input:invalid:focus, .bmw-booking textarea:invalid:focus { box-shadow: 0 0 0 4px color-mix(in oklab, #e83b46 25%, transparent); }
.bmw-btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.bmw-form-note { font-size: .92rem; color: var(--muted); margin-top: .4rem; }

/* -------- Footer -------- */
.bmw-footer { text-align: center; padding: 3rem 1.5rem; background: #0a1220; color: #cbd3df; font-size: .98rem; position: relative; }
.bmw-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--bmw-blue), var(--bmw-darkblue), var(--bmw-red)); }
.bmw-footer a { color: #e6ecf7; }

/* -------- Cookie Bar -------- */
.bmw-cookie { position: fixed; left: 0; right: 0; bottom: 0; background: #f5f7fb; color: #0a0c0f; padding: .9rem 1.2rem; border-top: 1px solid var(--card-border); display: flex; justify-content: center; gap: .5rem; z-index: 1000; box-shadow: 0 -10px 24px rgba(10,12,15,0.06); }

/* -------- Utilities / Media -------- */
@media (max-width: 960px) {
  .bmw-hero { padding-top: calc(var(--header-height) + 2rem); min-height: 520px; background-position: 70% center; }
  .bmw-hero__col--text { max-width: none; margin: 0 10%; }
  .bmw-hero__col--media { justify-content: center; }
  .bmw-hero__img { width: 100%; max-width: 620px; }
  .bmw-header__inner { padding: 0 16px; }
}

/* -------- Mobile optimization (≤600px) -------- */
@media (max-width: 600px) {
  /* Layout & spacing */
  .bmw-section { padding: calc(var(--header-height) + 1rem) 14px 2.2rem; }
  .bmw-section + .bmw-section { padding-top: 2.2rem; }

  /* Hero */
  .bmw-hero { padding-top: calc(var(--header-height) + 1.6rem); min-height: 520px; background-position: 70% center; }
  .bmw-hero__grid { padding: 0 14px; }
  .bmw-display { font-size: clamp(2.1rem, 1.7rem + 3.2vw, 3.1rem); line-height: 1.06; }
  .bmw-lead { font-size: 1rem; }
  .bmw-hero__col--text { padding: .9rem 1rem; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
  /* Increase contrast on image background */
  .bmw-hero__col--text { background: rgba(8,12,18,.5); border-color: rgba(255,255,255,.18); color: #eef3fb; }
  body:not(.bmw-dark) .bmw-hero__col--text { background: rgba(255,255,255,.88); border-color: rgba(10,12,15,.12); color: var(--text); }

  /* CTA buttons as full-width for better tap targets */
  .bmw-cta { gap: 10px; }
  .bmw-cta .bmw-btn { width: 100%; padding: .9rem 1rem; }

  /* Badges stack */
  .bmw-badges { flex-direction: column; gap: 6px; }

  /* Cards tighter */
  .bmw-cards { gap: 14px; }
  .bmw-card { padding: 1rem 1rem; }

  /* Cookie bar safe-area and readability */
  .bmw-cookie { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); font-size: .95rem; }

  /* Header nav spacing on narrow screens */
  .bmw-header__inner { padding: 0 12px; }
}
@media (max-width: 768px) {
  .bmw-section { padding: calc(var(--header-height) + 1.2rem) 16px 3rem; }
  .bmw-nav { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (min-width: 1440px) {
  .bmw-hero { min-height: 680px; }
  .bmw-hero__col--text { max-width: 820px; }
}

/* -------- Small phones (≤480px) -------- */
@media (max-width: 480px) {
  .bmw-display { font-size: clamp(1.9rem, 1.6rem + 3.4vw, 2.7rem); }
  .bmw-hero { min-height: 480px; background-position: 72% center; }
  .bmw-hero__col--text { padding: .85rem .9rem; }
  .bmw-nav { gap: 10px; }
}

/* -------- Extra small (≤360px) -------- */
@media (max-width: 360px) {
  .bmw-hero { min-height: 440px; background-position: 74% center; }
  .bmw-cta .bmw-btn { padding: .8rem .9rem; }
}

/* -------- Touch optimization -------- */
@media (hover: none) and (pointer: coarse) {
  .bmw-btn { transform: none; }
  .bmw-card:hover { transform: none; }
}

/* -------- A11y utilities -------- */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; }


/* -------- Mobile nav (hamburger, clean) -------- */
.bmw-burger__checkbox{position:absolute;left:-9999px;}

.bmw-burger{
  display:none;width:42px;height:42px;border-radius:10px;
  border:1px solid var(--card-border);
  align-items:center;justify-content:center;gap:5px;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.bmw-burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s;}
body.bmw-theme.bmw-dark .bmw-burger span{background:#e6ecf7;}
.bmw-burger:hover{background:rgba(10,12,15,.04);}

/* ===== Drawer (desktop clone) ===== */
@media (max-width:960px){
  /* Drawer panel */
  .bmw-drawer{
    position:fixed; top:var(--header-height); right:0; bottom:0; width:min(90vw, 380px); /* default for tablets (narrower) */
    background: var(--header);
    backdrop-filter: saturate(140%) blur(14px);
    border-left: 1px solid var(--card-border);
    box-shadow: -24px 0 60px rgba(0,0,0,.18);
    padding: 14px; margin:0;
    transform: translateX(100%);
    transition: transform .36s cubic-bezier(.2,.8,.2,1);
    z-index: 3000; overflow:auto; -webkit-overflow-scrolling:touch;
  }
  .bmw-drawer__inner{ min-height:100%; display:block; }

  /* Page tilt when open (reuse existing effect) */
  .bmw-hero, .bmw-section, .bmw-footer{ transition: transform .36s cubic-bezier(.2,.8,.2,1), filter .26s ease; transform-origin: right center }
  body:has(#navToggle:checked) .bmw-hero,
  body:has(#navToggle:checked) .bmw-section,
  body:has(#navToggle:checked) .bmw-footer{ transform: perspective(1200px) translateX(-8px) scale(.985); filter: saturate(.94) brightness(.96) }

  /* Overlay behind drawer */
  .bmw-drawer__overlay{ display:block; position:fixed; inset:var(--header-height) 0 0 0; background: radial-gradient(140% 100% at 100% 0%, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.2) 70%, rgba(0,0,0,0) 100%); z-index:2999; pointer-events:none; opacity:0; transition:opacity .22s ease; }
  .bmw-burger__checkbox:checked ~ .bmw-drawer__overlay{ pointer-events:auto; opacity:1 }

  /* Open state */
  body:has(#navToggle:checked) .bmw-drawer{ transform: translateX(0); }

  /* Drawer nav = desktop nav, stacked */
  .bmw-nav--drawer{ display:flex; flex-direction:column; gap:10px; }
  .bmw-nav--drawer a{ padding:.6rem .4rem; margin:0 6px; font-weight:700; position:relative; }
  .bmw-nav--drawer a::after{ bottom:10px; }

  /* Narrower drawer on phones */
  @media (max-width: 768px){
    .bmw-drawer{ width:min(84vw, 320px); padding: 12px; }
    .bmw-nav--drawer{ gap:12px; text-align:center; }
    .bmw-nav--drawer a{ margin:0 4px; padding:.55rem .2rem; font-size:1.02rem; }
    .bmw-nav--drawer a::after{ left:14%; right:14%; }
  }
  /* Extra small phones */
  @media (max-width: 420px){
    .bmw-drawer{ width:min(88vw, 300px); }
    .bmw-nav--drawer a{ font-size:1rem; }
  }
}

/* Visual active state */
.bmw-burger__checkbox:checked ~ .bmw-burger{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring-soft);}


/* ===== Visibility split: desktop vs mobile nav ===== */
/* Hide burger checkbox visually but keep it functional */
.bmw-burger__checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

@media (min-width: 901px){
  /* Desktop: show header menu, hide mobile drawer & hamburger */
  .bmw-nav{display:flex}
  .bmw-drawer{display:none !important}
  .bmw-burger{display:none !important}
  .bmw-drawer__overlay{display:none !important}
}
@media (max-width: 900px){
  /* Mobile: hide header menu, show hamburger */
  .bmw-nav{display:none}
  .bmw-nav--drawer{display:flex; flex-direction:column; gap:10px}
  .bmw-nav--drawer a{color:var(--text)}
  .bmw-burger{display:inline-flex}
  .bmw-drawer{display:block}
}
  }