/* ---------- Tokens ---------- */
  :root{
    /* Same reasoning as dark mode: the old paper leaned warm/green, which sat
       oddly against the navy. These are cooled to the same blue family. */
    --paper:#edeff3;
    --paper-2:#e1e6ed;
    --card:#ffffff;
    --ink:#101a26;
    --ink-soft:#4d5a68;
    /* Brand palette sampled straight from the logo artwork:
       navy #0e1b2b, orange #ef9a2b. */
    --navy:#0e1b2b;
    --navy-2:#1b3049;
    --navy-ink:#eef1f5;
    --accent:#ef9a2b;
    --accent-strong:#d4821a;
    --accent-text:#96570d;
    --accent-hover-ink:#12202f;
    --accent-ink:#12202f;
    --go:#3b7a57;
    --go-text:#326a4c;
    --error-text:#b42318;
    --line:rgba(16,26,38,0.14);
    --line-strong:rgba(16,26,38,0.28);
    --shadow:0 1px 2px rgba(16,26,38,0.06), 0 8px 24px -12px rgba(16,26,38,0.25);
    /* Layout tokens — one consistent grid across the whole site */
    --container:1120px;
    --gutter:clamp(20px,4vw,24px);
    --section-y:clamp(56px,7.5vw,88px);
    --radius:8px;
    --radius-lg:14px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      /* Neutrals are tinted from the brand navy, not neutral grey. A grey body
         against navy sections is what made the seams read as two palettes. */
      --paper:#0d1927;
      --paper-2:#111f30;
      --card:#16273b;
      --ink:#e9eef4;
      --ink-soft:#a7b4c3;
      --navy:#08131f;
      --navy-2:#12263a;
      --navy-ink:#eef1f5;
      --accent:#f0a03a;
      --accent-strong:#f7b358;
      --accent-text:#f3a845;
      --accent-hover-ink:#0e1b2b;
      --accent-ink:#0e1b2b;
      --go:#5aab7d;
      --go-text:#5aab7d;
      --error-text:#ff8a80;
      --line:rgba(233,238,244,0.14);
      --line-strong:rgba(233,238,244,0.26);
      --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="light"]{
    --paper:#edeff3; --paper-2:#e1e6ed; --card:#ffffff; --ink:#101a26; --ink-soft:#4d5a68;
    --navy:#0e1b2b; --navy-2:#1b3049; --navy-ink:#eef1f5; --accent:#ef9a2b; --accent-strong:#d4821a;
    --accent-text:#96570d; --accent-hover-ink:#12202f; --accent-ink:#12202f; --go:#3b7a57; --go-text:#326a4c; --error-text:#b42318;
    --line:rgba(16,26,38,0.14); --line-strong:rgba(16,26,38,0.28);
    --shadow:0 1px 2px rgba(16,26,38,0.06), 0 8px 24px -12px rgba(16,26,38,0.25);
  }
  :root[data-theme="dark"]{
    --paper:#0d1927; --paper-2:#111f30; --card:#16273b; --ink:#e9eef4; --ink-soft:#a7b4c3;
    --navy:#08131f; --navy-2:#12263a; --navy-ink:#eef1f5; --accent:#f0a03a; --accent-strong:#f7b358;
    --accent-text:#f3a845; --accent-hover-ink:#0e1b2b; --accent-ink:#0e1b2b; --go:#5aab7d; --go-text:#5aab7d; --error-text:#ff8a80;
    --line:rgba(233,238,244,0.14); --line-strong:rgba(233,238,244,0.26);
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.6);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:100px;}
  [hidden]{display:none !important;}
  :root{color-scheme:light;}
  @media (prefers-color-scheme:dark){:root{color-scheme:dark;}}
  :root[data-theme="light"]{color-scheme:light;}
  :root[data-theme="dark"]{color-scheme:dark;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  .skip-link{
    position:fixed; top:10px; left:10px; z-index:1000;
    padding:10px 14px; border-radius:3px;
    background:var(--accent); color:var(--accent-ink);
    font-weight:700; text-decoration:none;
    transform:translateY(-160%); transition:transform .15s ease;
  }
  .skip-link:focus{ transform:translateY(0); }
  main:focus{ outline:none; }

  h1,h2,h3,.display{
    font-family:"Bahnschrift","Oswald","Arial Narrow",Arial,sans-serif;
    font-stretch:condensed;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:1.05;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  .on-navy{ color:var(--navy-ink); }

  .num{ font-family:Consolas,"SF Mono","Cascadia Code",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

  a{ color:inherit; }
  img,svg{ display:block; max-width:100%; }

  .wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
  section{ padding:var(--section-y) 0; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:Consolas,"SF Mono",ui-monospace,monospace;
    font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--accent-text); font-weight:700; margin-bottom:14px;
  }
  .eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }
  .on-navy .eyebrow{ color:var(--accent); }

  /* Lane-stripe divider used exactly twice: below header, above footer CTA.
     Slanted to echo the "///" marks in the logo's RENTAL banner. */
  .lane-stripe{
    height:7px;
    background-color:var(--navy);
    background-image:repeating-linear-gradient(115deg, var(--accent) 0 16px, transparent 16px 38px);
  }

  /* Content is visible even if JavaScript or IntersectionObserver fails. */
  .reveal{opacity:1;}
  @media (prefers-reduced-motion:no-preference){
    .reveal.is-visible{animation:sectionIn .35s ease both;}
    @keyframes sectionIn{from{opacity:.8;transform:translateY(6px);}to{opacity:1;transform:none;}}
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--navy);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .headbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px var(--gutter); max-width:var(--container); margin:0 auto; gap:16px;
  }
  /* Knockout (reversed) logo: the artwork's navy is remapped to light so it
     reads on the navy header. Width comes from the intrinsic ratio, so the
     header reserves the right space before the image loads. */
  .logo{ display:flex; align-items:center; text-decoration:none; flex:none; }
  .logo img{ height:48px; width:auto; display:block; }
  @media (max-width:1024px){ .logo img{ height:38px; } }
  nav.mainnav{ display:flex; gap:26px; }
  nav.mainnav a{
    color:var(--navy-ink); text-decoration:none; font-size:0.92rem;
    opacity:0.85; padding:6px 2px; border-bottom:2px solid transparent;
  }
  nav.mainnav a:hover{ opacity:1; border-color:var(--accent); }
  .call-btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--accent); color:var(--accent-ink); text-decoration:none;
    font-weight:700; padding:10px 18px; border-radius:3px; white-space:nowrap;
    font-size:0.92rem; transform:translateY(0);
    box-shadow:0 3px 0 var(--accent-strong);
    transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  }
  .call-btn:hover{ background:var(--accent-strong); color:var(--accent-hover-ink); }
  .call-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--accent-strong); }
  .blinker{
    width:9px; height:9px; border-radius:50%; background:var(--accent-ink);

  }
  @keyframes blink{ 50%{ opacity:0.15; } }
  .menu-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,0.3); color:var(--navy-ink); padding:8px 10px; border-radius:3px; }

  @media (max-width:1024px){
    nav.mainnav{
      position:absolute; top:100%; left:0; right:0; background:var(--navy);
      flex-direction:column; padding:8px 24px 18px; gap:4px;
      border-bottom:1px solid rgba(255,255,255,0.08);
      display:none;
    }
    nav.mainnav.open{ display:flex; }
    nav.mainnav a{ padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
    .menu-toggle{ display:inline-flex; }
    .headbar .call-btn span.full{ display:none; }
  }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 26px; border-radius:3px; text-decoration:none;
    font-weight:700; font-size:0.98rem; border:1px solid transparent;
    transform:translateY(0);
    transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn-primary{
    background:var(--accent); color:var(--accent-ink);
    box-shadow:0 4px 0 var(--accent-strong), 0 8px 16px -8px rgba(0,0,0,0.4);
  }
  .btn-primary:hover{ background:var(--accent-strong); color:var(--accent-hover-ink); }
  .btn-primary:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--accent-strong), 0 3px 8px -4px rgba(0,0,0,0.35); }
  .btn-ghost{
    border-color:rgba(255,255,255,0.35); color:var(--navy-ink);
    box-shadow:0 3px 0 rgba(255,255,255,0.16);
  }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
  .btn-ghost:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(255,255,255,0.1); }

  /* ---------- Sections generic ---------- */
  .section-alt{ background:var(--paper-2); }
  .section-head{ max-width:640px; margin-bottom:44px; }
  .section-head h2{ font-size:clamp(1.7rem,2.8vw,2.35rem); text-transform:none; letter-spacing:-.015em; line-height:1.15; }
  .section-head p{ color:var(--ink-soft); margin-top:10px; max-width:60ch; }
  .section-head .eyebrow{color:var(--accent-text);}

  /* ---------- Featured vehicle ----------
     Content is populated from the featuredVehicle object in main.js —
     this CSS just lays out whatever lands in these elements, so swapping
     the car never needs a CSS change. Reuses .car-photo/.car-pill (fleet
     photo treatment), .eyebrow, .btn and .cta-row rather than new
     one-off components. Kept modest in height by design. */
  .featured-grid{
    display:grid; grid-template-columns:minmax(240px,340px) 1fr;
    gap:clamp(28px,4vw,56px); align-items:center;
  }
  .car-photo.featured-photo{ width:100%; aspect-ratio:3/4; height:auto; border-radius:var(--radius-lg); }
  .featured-photo .featured-img{ object-position:center 30%; }
  .featured-body{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
  .featured-name{
    font-size:clamp(1.5rem,2.6vw,2.1rem); text-transform:none; letter-spacing:-.01em;
    line-height:1.15; margin-bottom:8px;
  }
  .featured-price{ font-size:1.6rem; font-weight:700; color:var(--accent-text); margin:0 0 14px; }
  .featured-price small{ font-size:.85rem; font-weight:400; color:var(--ink-soft); text-transform:uppercase; }
  .featured-desc{ color:var(--ink-soft); font-size:1rem; max-width:52ch; margin:0 0 20px; }
  .featured-features{
    list-style:none; margin:0 0 26px; padding:0;
    display:flex; flex-direction:column; gap:10px; width:100%; max-width:360px;
  }
  .featured-features li{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--ink); }
  .featured-features li svg{ width:16px; height:16px; margin-top:2px; flex:none; color:var(--go); }
  .featured .cta-row{ margin-bottom:0; }
  /* Generic .btn-ghost assumes a dark backdrop (it is only otherwise used
     on the navy hero/final-cta). This section sits on --paper-2, so the
     secondary CTA needs ink-toned borders/text instead of white-toned. */
  .featured .btn-ghost{
    border-color:var(--line-strong); color:var(--ink);
    box-shadow:0 3px 0 var(--line);
  }
  .featured .btn-ghost:hover{ border-color:var(--accent); color:var(--accent-text); }
  @media(max-width:760px){
    .featured-grid{ grid-template-columns:1fr; gap:24px; }
    .featured-photo{ max-width:320px; margin:0 auto; }
    .featured-body{ align-items:flex-start; text-align:left; }
  }

  /* Discreet "Featured" chip injected onto the matching fleet card — see
     main.js. Sits opposite the type pill (top-left) so nothing collides. */
  .featured-badge{
    position:absolute; top:10px; right:10px; z-index:2;
    background:var(--accent); color:var(--accent-ink);
    font-family:Consolas,monospace; font-size:.66rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:2px;
  }

  /* ---------- How it works ---------- */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
  .step{
    background:var(--card); border:1px solid var(--line); border-radius:6px;
    padding:26px; box-shadow:var(--shadow); position:relative;
  }
  .step .mile{
    font-family:Consolas,monospace; font-size:0.78rem; color:var(--accent-text);
    font-weight:700; letter-spacing:0.08em; margin-bottom:10px; display:block;
  }
  .step h3{ font-size:1.15rem; margin-bottom:8px; }
  .step p{ color:var(--ink-soft); font-size:0.94rem; margin:0; }

  /* ---------- Fleet ---------- */
  .fleet-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
  .car-card{
    background:var(--card); border:1px solid var(--line); border-radius:8px;
    overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .car-card:hover{ box-shadow:0 2px 4px rgba(20,24,28,0.1), 0 20px 36px -16px rgba(20,24,28,0.35); }
  .car-photo{
    position:relative; height:196px; overflow:hidden; background:var(--paper-2);
    display:block; width:100%; border:0; margin:0; padding:0; cursor:pointer; font:inherit;
  }
  .car-photo img{
    width:100%; height:100%; object-fit:cover; object-position:center 32%;
    transition:transform .5s ease;
  }
  .car-card:hover .car-photo img{ transform:scale(1.015); }
  .car-photo::after{
    content:""; position:absolute; inset:auto 0 0 0; height:50%;
    background:linear-gradient(180deg, transparent, rgba(14,27,43,0.5)); pointer-events:none;
  }
  .car-photo:focus-visible{ outline:2px solid #fff; outline-offset:-3px; box-shadow:inset 0 0 0 5px #0e1b2b; }
  .car-pill{
    position:absolute; top:10px; left:10px; z-index:2;
    background:rgba(14,27,43,0.75); color:#fff;
    font-family:Consolas,monospace; font-size:0.66rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase; padding:5px 9px; border-radius:2px;
    backdrop-filter:blur(3px);
  }
  .car-photo-count{
    position:absolute; bottom:10px; right:10px; z-index:2;
    display:flex; align-items:center; gap:4px;
    background:rgba(14,27,43,0.75); color:#fff;
    font-family:Consolas,monospace; font-size:0.68rem; font-weight:700;
    padding:4px 9px; border-radius:20px; backdrop-filter:blur(3px);
  }
  .car-photo-count svg{ width:12px; height:12px; flex:none; }
  .car-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .car-body h3{ font-size:1.08rem; text-transform:none; letter-spacing:0; font-family:"Bahnschrift","Oswald",sans-serif; font-stretch:condensed; }
  .car-body p{ color:var(--ink-soft); font-size:0.88rem; margin:0; flex:1; }
  .car-badge{
    align-self:flex-start; font-size:0.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; background:rgba(59,122,87,0.14); color:var(--go-text);
    padding:3px 8px; border-radius:2px;
  }
  .car-foot{
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid var(--line); padding-top:12px; margin-top:4px;
  }
  .car-price{ font-size:1.3rem; font-weight:700; }
  .car-price small{ font-size:0.7rem; font-weight:400; color:var(--ink-soft); text-transform:uppercase; }
  .book-link{
    font-size:0.82rem; font-weight:700; color:var(--accent-text); text-decoration:none;
    display:inline-flex; align-items:center; gap:4px;
  }
  .book-link:hover{ text-decoration:underline; }

  /* ---------- Pricing board ---------- */
  .board{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
  @media (max-width:820px){ .board{ grid-template-columns:1fr; } }
  .price-card{
    background:var(--card); border:1px solid var(--line); border-radius:6px; padding:28px;
    box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px;
  }
  .price-card.featured{ border-color:var(--accent); border-width:2px; position:relative; }
  .price-card.featured::before{
    content:"Own insurance"; position:absolute; top:-12px; left:24px;
    background:var(--accent); color:var(--accent-ink); font-size:0.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.08em; padding:4px 10px; border-radius:2px;
  }
  .price-card .label{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); font-weight:700; }
  .price-card .amount{ font-size:2.5rem; font-weight:700; }
  .price-card .amount small{ font-size:1rem; font-weight:400; color:var(--ink-soft); }
  .price-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:0.9rem; color:var(--ink-soft); }
  .price-card li{ display:flex; gap:8px; align-items:flex-start; }
  .price-card li svg{ width:14px; height:14px; margin-top:3px; flex:none; color:var(--go); }

  .price-breakdown{ display:flex; flex-direction:column; }
  .price-breakdown .row{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:9px 0; border-bottom:1px dashed var(--line-strong);
    font-size:0.92rem; color:var(--ink-soft);
  }
  .price-breakdown .row span:last-child{ font-family:Consolas,"SF Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; color:var(--ink); }
  .price-breakdown .row.total{ border-bottom:none; padding-top:12px; font-weight:700; }
  .price-breakdown .row.total span{ color:var(--ink); font-size:1.05rem; }
  .price-breakdown .row.total span:last-child{ color:var(--accent-text); font-size:1.3rem; }
  .price-card .tax-note{ font-size:0.78rem; color:var(--ink-soft); margin:-6px 0 0; }

  /* ---------- Care tip ---------- */
  .care{
    background:var(--navy); color:var(--navy-ink); border-radius:6px;
    padding:32px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:flex-start;
  }
  @media (max-width:600px){ .care{ grid-template-columns:1fr; } }
  .care svg{ width:40px; height:40px; color:var(--accent); }
  .care h2{ font-size:1.15rem; margin-bottom:8px; }
  .care p{ opacity:0.85; margin:0; max-width:60ch; font-size:0.94rem; }
  .care .src{ display:block; margin-top:10px; font-size:0.76rem; opacity:0.6; font-family:Consolas,monospace; text-transform:uppercase; letter-spacing:0.06em; }

  /* ---------- FAQ ---------- */
  .faq{ display:flex; flex-direction:column; gap:12px; max-width:760px; }
  .faq details{
    background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 20px;
  }
  .faq summary{
    cursor:pointer; padding:16px 0; font-weight:700; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:16px;
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; font-size:1.3rem; color:var(--accent-text); flex:none; }
  .faq details[open] summary::after{ content:"–"; }
  .faq p{ margin:0 0 18px; color:var(--ink-soft); font-size:0.94rem; }
  .faq a{ color:var(--accent-text); font-weight:700; }
  .faq summary:focus-visible, a:focus-visible, button:focus-visible{
    outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 4px #0e1b2b;
  }

  /* ---------- Final CTA ---------- */
  .final-cta{
    background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
    background-color:var(--navy-2);
    color:var(--navy-ink); text-align:center; padding:72px 0;
  }
  .final-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:14px; }
  .final-cta > .wrap > p:not(.form-status):not(.reserve-note){ max-width:62ch;margin:0 auto 30px; }
  .final-cta .cta-row{ justify-content:center; margin-bottom:0; }

  /* ---------- Footer ---------- */
  footer{ background:var(--navy); color:var(--navy-ink); padding:48px 0 100px; }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
  @media (max-width:700px){ .foot-grid{ grid-template-columns:1fr; } }
  .foot-logo{ height:60px; width:auto; display:block; margin-bottom:6px; }
  footer .tagline{ opacity:0.6; font-size:0.88rem; margin-top:8px; max-width:38ch; }
  footer h3{ font-size:0.76rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.55; margin-bottom:14px; font-weight:700; color:var(--navy-ink); }
  footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:0.9rem; }
  footer a{ color:#fff; opacity:0.82; text-decoration:none; }
  footer a:hover{ opacity:1; text-decoration:underline; }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,0.12); margin-top:36px; padding-top:20px; font-size:0.78rem; opacity:0.5; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

  /* ---------- Sticky mobile bar ---------- */
  .mobile-bar{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:var(--navy); border-top:1px solid rgba(255,255,255,0.12);
    padding:10px 14px; gap:10px;
  }
  .mobile-bar a{
    flex:1; text-align:center; padding:12px 0; border-radius:3px; text-decoration:none;
    font-weight:700; font-size:0.9rem;
  }
  .mobile-bar .primary{ background:var(--accent); color:var(--accent-ink); }
  .mobile-bar .secondary{ border:1px solid rgba(255,255,255,0.3); color:var(--navy-ink); }
  @media (max-width:700px){
    .mobile-bar{ display:flex; }
    body{ padding-bottom:66px; }
    .headbar .call-btn{ display:none; }
  }

  /* ---------- Reserve form (native) ---------- */
  .reserve-form{
    max-width:560px; margin:34px auto 20px; background:var(--card);
    border-radius:10px; padding:32px; text-align:left;
    box-shadow:0 24px 60px -24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
    display:flex; flex-direction:column; gap:18px;
  }
  .reserve-form-head{
    display:flex; align-items:center; gap:8px; margin:-4px 0 2px;
    font-family:Consolas,"SF Mono",ui-monospace,monospace;
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
    color:var(--accent-text);
  }
  .reserve-form-head svg{ width:14px; height:14px; color:var(--go); flex:none; }
  .form-field{ display:flex; flex-direction:column; gap:6px; }
  .form-field label{ font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); }
  .form-field input, .form-field textarea, .form-field select{
    border:1px solid var(--line-strong); border-radius:5px; padding:12px 14px;
    font-family:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .form-field input:focus, .form-field textarea:focus, .form-field select:focus{
    outline:none; border-color:var(--accent-text); box-shadow:0 0 0 3px rgba(239,154,43,0.22);
  }
  .form-field textarea{ resize:vertical; min-height:96px; font-family:inherit; }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:520px){ .form-grid{ grid-template-columns:1fr; } }
  .reserve-form .btn{ justify-content:center; width:100%; border:none; cursor:pointer; font-size:1rem; }
  .reserve-form .btn:disabled{ opacity:0.6; cursor:not-allowed; }
  /* display:flex above beats the UA [hidden] rule, so state it explicitly */
  .reserve-form[hidden]{ display:none; }

  /* Two ways to send: text (opens the visitor's own Messages app) or email. */
  .reserve-actions{ display:flex; flex-direction:column; gap:10px; }
  .reserve-form .btn-alt{
    background:transparent; color:var(--accent-text);
    border:1px solid var(--line-strong); box-shadow:none; font-size:0.92rem;
    padding:12px 20px;
  }
  .reserve-form .btn-alt:hover{ border-color:var(--accent); background:rgba(239,154,43,0.09); }
  .reserve-form .btn svg{ width:16px; height:16px; flex:none; }
  .send-hint{
    margin:0; text-align:center; font-size:0.8rem; color:var(--ink-soft);
  }
  /* Shown only when the sms: hand-off didn't take (typically desktop), so the
     visitor still has the composed text and somewhere to send it. */
  .sms-fallback{
    display:flex; flex-direction:column; gap:10px;
    padding:16px; border-radius:8px;
    background:var(--paper-2); border:1px solid var(--line);
  }
  .sms-fallback[hidden]{ display:none; }
  .sms-fallback p{ margin:0; font-size:0.86rem; color:var(--ink-soft); }
  .sms-fallback a{ color:var(--accent-text); font-weight:700; }
  .sms-fallback textarea{
    width:100%; min-height:132px; resize:vertical;
    border:1px solid var(--line-strong); border-radius:5px; padding:11px 13px;
    font-family:inherit; font-size:0.88rem; color:var(--ink); background:var(--card);
  }
  .form-field input:invalid.is-flagged, .form-field textarea:invalid.is-flagged{
    border-color:var(--error-text); box-shadow:0 0 0 3px rgba(180,35,24,0.14);
  }
  .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  /* Lives outside the form so it stays visible once the form is hidden on success */
  .form-status{
    max-width:560px; margin:34px auto 20px; text-align:left;
    font-size:0.95rem; padding:16px 18px; border-radius:8px;
  }
  .form-status[hidden]{ display:none; }
  .form-status.success{ background:rgba(59,122,87,0.14); color:var(--go-text); }
  .form-status.error{ background:rgba(217,67,44,0.12); color:var(--error-text); }
  .reserve-note{
    max-width:560px; margin:0 auto; display:flex; justify-content:center;
    flex-wrap:wrap; gap:6px 18px; font-size:0.82rem; opacity:0.75;
  }
  .reserve-note a{ color:var(--accent); font-weight:700; text-decoration:none; }
  .reserve-note a:hover{ text-decoration:underline; }

  /* ---------- Video ---------- */
  /* Two self-hosted videos, presented as one matched pair — same frame, same
     16:9 media box, same badge/caption treatment — so neither reads as an
     afterthought next to the other. */
  .video-rail{
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
    max-width:var(--container); margin:0 auto;
  }
  @media (max-width:700px){ .video-rail{ grid-template-columns:1fr; } }

  .video-card{ margin:0; display:flex; flex-direction:column; }
  .video-frame{
    padding:12px; background:var(--card);
    border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  }

  /* Positioning context for the badge; the navy fill covers the brief gap
     before the poster paints, so the frame never flashes empty. */
  .video-media{
    position:relative; border-radius:10px; overflow:hidden;
    background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  }
  .video-media > .car-pill{ z-index:2; }
  .video-player{
    width:100%; aspect-ratio:16 / 9; height:auto; display:block;
    border-radius:10px; background:#08131f;
  }

  .video-label{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:12px 0 0; font-family:Consolas,"SF Mono",ui-monospace,monospace;
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    font-weight:700; color:var(--accent-text);
  }
  .video-label svg{ width:12px; height:12px; flex:none; }

  /* ---------- Vehicle gallery lightbox ---------- */
  .lightbox{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
  .lightbox[hidden]{ display:none; }
  .lightbox-backdrop{ position:absolute; inset:0; background:rgba(14,27,43,0.86); backdrop-filter:blur(3px); }
  .lightbox-panel{
    position:relative; z-index:1; width:100%; max-width:720px; max-height:92vh;
    overflow-y:auto; background:var(--card); border-radius:12px;
    box-shadow:0 40px 80px -20px rgba(0,0,0,0.6);
    animation:lightboxIn .25s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes lightboxIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
  .lightbox-close{
    position:absolute; top:12px; right:12px; z-index:3;
    width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
    background:rgba(14,27,43,0.6); color:#fff; font-size:1.4rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .lightbox-close:hover{ background:rgba(14,27,43,0.85); }
  .lightbox-media{ position:relative; background:#08131f; }
  .lightbox-media img{
    width:100%; max-height:60vh; object-fit:contain; display:block; background:#08131f;
  }
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
    background:rgba(14,27,43,0.55); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .lightbox-nav:hover{ background:rgba(14,27,43,0.8); }
  .lightbox-nav svg{ width:18px; height:18px; }
  .lightbox-nav.prev{ left:12px; }
  .lightbox-nav.next{ right:12px; }
  .lightbox-nav[hidden]{ display:none; }
  .lightbox-counter{
    position:absolute; bottom:10px; right:12px; z-index:2;
    background:rgba(14,27,43,0.65); color:#fff; font-family:Consolas,monospace;
    font-size:0.72rem; font-weight:700; padding:3px 9px; border-radius:20px;
  }
  .lightbox-thumbs{
    display:flex; gap:8px; padding:12px; overflow-x:auto; background:var(--paper-2);
  }
  .lightbox-thumbs[hidden]{ display:none; }
  .lightbox-thumbs button{
    flex:none; width:56px; height:56px; padding:0; border-radius:6px; overflow:hidden;
    border:2px solid transparent; cursor:pointer; opacity:0.6; transition:opacity .15s ease, border-color .15s ease;
  }
  .lightbox-thumbs button.is-active{ opacity:1; border-color:var(--accent); }
  .lightbox-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
  .lightbox-info{ padding:22px 24px 26px; }
  .lightbox-info-top{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .lightbox-info h3{ font-size:1.3rem; text-transform:none; letter-spacing:0; font-family:"Bahnschrift","Oswald",sans-serif; font-stretch:condensed; margin-bottom:8px; }
  .lightbox-info p{ color:var(--ink-soft); font-size:0.94rem; margin:0 0 18px; }
  .lightbox-info .car-foot{ border-top:1px solid var(--line); }
  .lightbox-info .btn{ width:auto; }
  @media (max-width:640px){
    .lightbox{ padding:0; }
    .lightbox-panel{ max-width:100%; max-height:100%; height:100%; border-radius:0; }
    .lightbox-info .car-foot{ flex-direction:column; align-items:stretch; gap:12px; }
    .lightbox-info .btn{ width:100%; justify-content:center; }
  }


  /* ---------- Navigation, comparison and accessible interaction ---------- */
  .menu-toggle{min-height:44px;min-width:64px;align-items:center;justify-content:center;font:inherit;font-size:.875rem;cursor:pointer;}
  .fleet-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-14px 0 26px;flex-wrap:wrap;}
  .fleet-filters{display:flex;flex-wrap:wrap;gap:8px;}
  .filter-btn{min-height:44px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:30px;background:var(--card);color:var(--ink-soft);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;}
  .filter-btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
  .fleet-count{font-size:.82rem;color:var(--ink-soft);margin:0;}
  .car-photo-count{padding:6px 10px;border-radius:4px;}
  .book-link{min-height:44px;justify-content:flex-end;padding-left:8px;font-size:.8rem;}
  .car-body h3{font-family:inherit;font-size:1.05rem;line-height:1.3;}
  .car-foot{gap:10px;flex-wrap:wrap;}
  .price-card{display:flex;flex-direction:column;gap:14px;}
  .price-card .label{line-height:1.5;min-height:2.4em;}
  .price-choice{margin-top:auto;padding:12px 14px;min-height:48px;justify-content:space-between;font-size:.82rem;line-height:1.4;border:1px solid var(--line-strong);color:var(--accent-text);}
  .price-choice:hover{background:var(--paper-2);border-color:var(--accent-text);}
  .price-card.featured .price-choice{background:var(--accent);color:var(--accent-ink);border-color:transparent;}
  .care-link{display:inline-block;margin-top:16px;color:var(--accent);font-size:.85rem;text-underline-offset:4px;}
  .final-cta h2{text-transform:none;letter-spacing:-.02em;}
  .final-cta > .wrap > p a{text-underline-offset:4px;}
  .reserve-form{max-width:700px;border-top:3px solid var(--accent);padding:32px;gap:20px;}
  .reserve-form-head{font-size:.8rem;}
  .form-field{min-width:0;}
  .form-field input,.form-field select,.form-field textarea{width:100%;min-width:0;min-height:48px;}
  .form-field label{text-transform:none;letter-spacing:0;font-size:.875rem;color:var(--ink);line-height:1.5;}
  .form-field label span{font-size:.75rem;font-weight:400;color:var(--ink-soft);}
  .form-field input::placeholder,.form-field textarea::placeholder{color:var(--ink-soft);opacity:1;}
  .request-summary{margin:0;padding:12px 14px;border-left:3px solid var(--accent-text);background:var(--paper);color:var(--ink-soft);font-size:.82rem;line-height:1.6;}
  .privacy-note{font-size:.75rem;color:var(--ink-soft);line-height:1.6;margin:0;}
  .send-hint{line-height:1.6;text-align:left;}
  .form-status{background:var(--card);max-width:700px;}
  .form-status.success{background:var(--card);border-left:4px solid var(--go-text);color:var(--go-text);}
  .form-status.error{background:var(--card);border-left:4px solid var(--error-text);color:var(--error-text);}
  .reserve-note{opacity:1;color:var(--navy-ink);}
  .lightbox-close,.lightbox-nav{width:44px;height:44px;background:#0e1b2bef;}
  .lightbox-panel{max-height:92dvh;}
  .lightbox-counter{background:#0e1b2bef;}
  .lightbox-info .btn{justify-content:center;}
  .foot-bottom{opacity:.75;}
  footer h3{opacity:.8;}
  footer a{overflow-wrap:anywhere;}
  .mobile-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom));}
  :focus-visible{scroll-margin-block:110px;}
  @media(max-width:700px){
    body{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
    .hero .btn-ghost{display:none;}
    .hero-contact{margin:18px 0;}
    .hero .trust-chip{font-size:.68rem;padding:4px 7px;}
    .wrap{padding-inline:20px;}
    .fleet-grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));}
    .reserve-form{padding:22px 18px;border-radius:12px;}
    .filter-btn{padding:9px 13px;}
    .lightbox-panel{max-height:100dvh;}
    footer{padding-bottom:44px;}
  }
  @media(prefers-reduced-motion:reduce){
    .car-card:hover .car-photo img{transform:none;}
    *,*::before,*::after{animation:none !important;transition:none !important;}
  }


  /* ============================================================
     Hero — premium refinements (visual only; no markup/JS hooks
     changed). Inspired by the restrained, gallery-like feel of
     the reference site: more air, quieter type, slow cinematic
     motion. All motion is gated behind prefers-reduced-motion.
     ============================================================ */
  .hero-copy{padding:clamp(64px,10vh,120px) 6vw 40px;}
  .hero .eyebrow{letter-spacing:.28em;margin-bottom:34px;opacity:.9;}
  .hero h1{letter-spacing:-.055em;margin-bottom:32px;}
  .hero-sub{max-width:46ch;line-height:1.85;color:#eef2f7;}
  .hero .cta-row{gap:14px;}
  .hero .btn{letter-spacing:.06em;padding:16px 26px;}
  /* deeper, more cinematic scrim + soft corner vignette for depth */
  .hero::before{
    background:
      radial-gradient(120% 90% at 78% 20%, transparent 40%, rgba(4,11,19,.55) 100%),
      linear-gradient(90deg, rgba(5,13,22,.90), rgba(5,13,22,.68) 40%, rgba(5,13,22,.10) 78%),
      linear-gradient(0deg, rgba(5,13,22,.94), transparent 44%);
  }

  @media (prefers-reduced-motion:no-preference){
    /* slow Ken Burns on each scene, staggered durations so they
       never move in lockstep — kept very subtle to stay sharp */
    .hero-scene img{will-change:transform;}
    .hero-scene-front img{animation:heroKenA 26s ease-in-out infinite alternate;transform-origin:60% 58%;}
    .hero-scene-rear img{animation:heroKenB 31s ease-in-out infinite alternate;transform-origin:45% 40%;}
    .hero-scene-interior img{animation:heroKenA 35s ease-in-out infinite alternate;transform-origin:40% 50%;}
    @keyframes heroKenA{from{transform:scale(1.03);}to{transform:scale(1.11);}}
    @keyframes heroKenB{from{transform:scale(1.05);}to{transform:scale(1.12);}}

    /* graceful staggered entrance for the copy on load */
    .hero .eyebrow{animation:heroRise .8s .05s cubic-bezier(.2,.7,.2,1) both;}
    .hero h1{animation:heroRise .9s .16s cubic-bezier(.2,.7,.2,1) both;}
    .hero-sub{animation:heroRise .9s .30s cubic-bezier(.2,.7,.2,1) both;}
    .hero .cta-row{animation:heroRise .9s .44s cubic-bezier(.2,.7,.2,1) both;}
    .hero-contact{animation:heroRise .85s .56s cubic-bezier(.2,.7,.2,1) both;}
    .hero .trust-strip{animation:heroRise .85s .66s cubic-bezier(.2,.7,.2,1) both;}
    .hero-feature{animation:heroFade 1.1s .78s ease both;}
    @keyframes heroRise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
    @keyframes heroFade{from{opacity:0;}to{opacity:1;}}
  }

  /* Hero — remove the harsh white seams slicing the imagery (mosaic grid
     gaps + the vertical divider) for a clean, full-bleed premium look;
     soften the remaining bottom-bar hairlines to a quiet tone. */
  .hero-mosaic{gap:0;background:#0e1b2b;}
  .hero::after{display:none;}
  .hero-feature{border-top:1px solid rgba(255,255,255,.14);}
  .hero-photo{border-left:1px solid rgba(255,255,255,.14);}
  .hero .peek-detail{border-left:1px solid rgba(255,255,255,.14);}
  @media(max-width:700px){
    .hero-photo{border-left:0;border-top:1px solid rgba(255,255,255,.14);}
  }

  /* Hero — single full-bleed front photo (replaces the 3-image mosaic) */
  .hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0e1b2b;}
  .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;}
  @media (prefers-reduced-motion:no-preference){
    .hero-bg img{will-change:transform;animation:heroKenA 30s ease-in-out infinite alternate;transform-origin:60% 55%;}
  }
  @media(max-width:700px){ .hero-bg img{object-position:60% 60%;} }

  /* Premium line-art arrows (replaced the generic → / ↗ glyphs) */
  .ico-arrow,.ico-ne{width:1.05em;height:1.05em;flex:none;display:inline-block;vertical-align:-.16em;margin-left:.45em;transition:transform .25s cubic-bezier(.2,.7,.2,1);}
  .btn .ico-arrow,.btn .ico-ne{margin-left:0;}
  a:hover .ico-arrow,button:hover .ico-arrow,.btn:hover .ico-arrow{transform:translateX(3px);}
  a:hover .ico-ne,button:hover .ico-ne,.btn:hover .ico-ne{transform:translate(2px,-2px);}
  .hero-photo-label span .ico-ne{margin:0;width:18px;height:18px;}

  /* Cinematic hero and featured films. Original booking/gallery hooks remain intact. */
  .hero .hero-grid{min-height:calc(100svh - 84px);}
  .hero-bg img{object-position:70% center;animation:none;transform:none;will-change:auto;}
  .hero::before{background:linear-gradient(90deg,#06111ff2 0%,#06111fbc 36%,#06111f26 75%),linear-gradient(0deg,#06111fe8,transparent 50%);}
  .hero-copy{padding:clamp(46px,7vh,90px) 6vw 34px;}
  .hero .eyebrow{color:#ffc779;opacity:1;letter-spacing:.19em;margin-bottom:24px;}
  .hero h1{font-weight:500;font-size:clamp(3.8rem,6.7vw,7.6rem);letter-spacing:-.065em;line-height:1.03;margin-bottom:24px;}
  .hero h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.065em;color:#f7e5ca;}
  .hero-sub{max-width:43ch;line-height:1.75;}
  .hero .btn{padding:17px 26px;font-size:.85rem;letter-spacing:.02em;}
  .hero .btn-primary{background:#f2a23f;color:#101a26;}
  .hero .btn-primary:hover{background:#ffba60;}
  .hero .hero-contact{margin:8px 0 22px;}
  .hero-watch{display:flex;align-items:center;gap:14px;text-decoration:none;font-size:.8rem;font-weight:600;margin:0 0 28px;min-height:48px;}
  .hero-watch-play{display:grid;place-items:center;width:46px;height:46px;border:1px solid #ffffff70;border-radius:50%;font-size:.8rem;}
  .hero-watch small{display:block;font-weight:400;color:#d8dee6;font-size:.67rem;margin-top:3px;}
  .hero-watch > span:last-child{margin-left:12px;color:#ffc779;}
  .hero-watch:hover .hero-watch-play{background:#f2a23f;color:#101a26;border-color:#f2a23f;}
  .hero-feature{background:#06111fc9;}
  .stories{padding:var(--section-y) 0;background:var(--paper);color:var(--ink);}
  .stories > .wrap{max-width:var(--container);padding-inline:var(--gutter);}
  .stories-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:36px;}
  .stories .eyebrow{color:var(--accent-text);margin:0 0 18px;font-size:.65rem;}
  .stories h2{font-family:"Segoe UI",Arial,sans-serif;color:#182437;font-size:clamp(2.25rem,3.6vw,3.7rem);font-weight:500;letter-spacing:-.055em;text-transform:none;line-height:1.08;color:var(--ink);}
  .stories h2 em{font-family:Georgia,serif;font-weight:400;}
  .stories-head > p{font-size:.86rem;line-height:1.8;color:var(--ink-soft);margin:0 0 4px;}
  .stories-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
  .story-card{margin:0;min-width:0;}
  .story-media{background:#0e1b2b;box-shadow:0 16px 32px -24px #15233580;}
  .story-media video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#0e1b2b;}
  .story-card figcaption{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);}
  .story-number,.story-duration{font-family:Consolas,monospace;color:var(--ink-soft);font-size:.7rem;}
  .story-card h3{font-family:inherit;color:var(--ink);text-transform:none;font-size:1rem;font-weight:600;letter-spacing:-.02em;line-height:1.4;}
  .story-duration{margin-left:auto;white-space:nowrap;}
  .stories-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:28px;font-size:.78rem;}
  .stories-footer p{color:var(--ink-soft);margin:0;}
  .stories-footer a{min-height:44px;display:inline-flex;align-items:center;gap:28px;color:var(--ink);font-weight:600;text-underline-offset:5px;}
  @media(max-width:700px){
    .hero .hero-grid{min-height:calc(100svh - 80px);}
    .hero-bg img{height:58%;object-position:62% center;}
    .hero::before{background:linear-gradient(0deg,#06111f 33%,#06111fe0 51%,#06111f33 80%,#06111f22);}
    .hero-copy{padding:190px 24px 26px;}
    .hero .eyebrow{font-size:.53rem;letter-spacing:.1em;margin-bottom:20px;}
    .hero h1{font-size:clamp(2.65rem,10.8vw,4.3rem);margin-bottom:20px;}
    .hero-sub{font-size:.85rem;}
    .hero-watch{margin-bottom:24px;}
    .hero .trust-strip{gap:10px 14px;}
    .stories{padding:var(--section-y) 0;}
    .stories > .wrap{padding-inline:24px;}
    .stories-head{display:block;margin-bottom:26px;}
    .stories-head > p{margin-top:20px;}
    .stories-grid{grid-template-columns:1fr;gap:28px;}
    .story-card figcaption{gap:12px;padding:16px 0;}
    .story-card h3{font-size:.88rem;}
    .stories-footer{align-items:flex-start;flex-direction:column;gap:8px;}
  }

  /* Cinematic hero video (autoplay/muted/loop) with a static poster fallback.
     Reduced-motion users get the still frame; no JS required. */
  .hero-bg{background:#0e1b2b url("../../images/story-1-poster.jpg") center 60%/cover no-repeat;}
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block;}
  @media (prefers-reduced-motion:reduce){ .hero-video{display:none;} }

  /* Premium icons for the "watch the films" affordance */
  .hero-watch{width:max-content;max-width:100%;}
  .hero-watch-play .ico-play{width:13px;height:13px;margin-left:2px;}
  .hero-watch .ico-down{width:18px;height:18px;color:#ffc779;flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1);}
  .hero-watch:hover .ico-down{transform:translateY(3px);}
  .stories-footer a .ico-ne{margin-left:0;}

  @media(max-width:700px){
    /* Full-bleed video on mobile with a scrim strong enough for the copy */
    .hero-video{height:100%;object-position:60% center;}
    .hero::before{background:linear-gradient(0deg,#06111ff5 0%,#06111fcc 46%,#06111f70 78%,#06111f40 100%);}
    .hero-copy{padding:clamp(120px,20vh,170px) 24px 26px;}
  }

  /* ==========================================================================
     HERO — cinematic video redesign (2026-09)
     Self-contained and appended last so it supersedes the earlier hero rules
     via source order. Layer order (back→front): video → directional scrim →
     soft red ambient glow → vignette → film grain → content.
     Left-aligned copy; the Hyundai stays visible center/right. Motion is all
     transform/opacity and gated behind prefers-reduced-motion.
     ========================================================================== */
  .hero{position:relative;isolation:isolate;overflow:hidden;background:#0b1520;color:#fff;padding:0;}
  .hero::before,.hero::after{content:none;display:none;}
  .hero-stage{position:absolute;inset:0;z-index:0;overflow:hidden;}
  .hero-stage>*{position:absolute;inset:0;}
  .hero-media{transform:translate3d(0,var(--sy,0px),0) scale(1.08);will-change:transform;}
  .hero-video{width:100%;height:100%;object-fit:cover;object-position:62% 42%;display:block;}
  .hero-scrim{pointer-events:none;background:
    linear-gradient(90deg,rgba(6,17,28,.94) 0%,rgba(6,17,28,.74) 30%,rgba(6,17,28,.30) 58%,rgba(6,17,28,.05) 100%),
    linear-gradient(0deg,rgba(6,17,28,.86) 0%,rgba(6,17,28,.12) 42%,transparent 62%),
    linear-gradient(180deg,rgba(6,17,28,.55),transparent 20%);}
  .hero-glow{pointer-events:none;background:radial-gradient(38% 52% at 76% 44%,rgba(232,66,40,.28),rgba(232,66,40,.06) 60%,transparent 74%);mix-blend-mode:screen;will-change:transform;}
  .hero-vignette{pointer-events:none;background:radial-gradient(130% 120% at 50% 42%,transparent 52%,rgba(3,9,15,.5) 100%);}
  .hero-grain{pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-size:150px 150px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  .hero-inner{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 24px;min-height:calc(100svh - 84px);display:flex;align-items:center;}
  .hero-copy{flex:none;justify-content:flex-start;align-items:flex-start;max-width:min(660px,94%);padding:clamp(40px,7vh,96px) 0;display:flex;flex-direction:column;}
  .hero .eyebrow{color:#ffd7a1;font-size:.66rem;letter-spacing:.24em;margin:0 0 26px;}
  .hero .eyebrow::before{width:38px;height:1px;background:linear-gradient(90deg,#f2a23f,transparent);}
  .hero h1{font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;font-weight:600;font-stretch:normal;font-size:clamp(3rem,6vw,6.4rem);text-transform:none;letter-spacing:-.045em;line-height:1.02;margin:0 0 26px;color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.4);text-wrap:balance;}
  .hero h1 em{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:#f6e3c6;letter-spacing:-.03em;}
  .hero-sub{font-size:clamp(.95rem,1.05vw,1.08rem);line-height:1.75;color:#eef2f7;max-width:46ch;margin:0 0 30px;text-shadow:0 1px 14px rgba(0,0,0,.4);}
  .hero-sub strong{color:#ffc06a;font-weight:600;}
  .hero .cta-row{gap:14px;margin:0 0 22px;flex-wrap:wrap;}
  .hero .btn{border-radius:6px;box-shadow:none;font-size:.9rem;font-weight:600;letter-spacing:.01em;padding:16px 26px;}
  .hero .btn-primary{background:#f2a23f;color:#0e1b2b;box-shadow:0 12px 30px -12px rgba(242,162,63,.7),0 2px 0 #d4821a;}
  .hero .btn-primary:hover{background:#ffb659;color:#0e1b2b;transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(242,162,63,.85),0 2px 0 #d4821a;}
  .hero .btn-primary:active{transform:translateY(0);}
  .hero .btn-ghost{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;box-shadow:none;}
  .hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.15);color:#fff;transform:translateY(-2px);}
  .hero .btn-ghost:active{transform:translateY(0);}
  .hero-contact{margin:0 0 26px;font-size:.82rem;}
  .hero-contact a{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:600;white-space:nowrap;}
  .hero-contact a:hover{color:#ffc06a;}
  .hero-contact .ico-phone{width:16px;height:16px;color:#f2a23f;flex:none;}
  .hero .trust-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;}
  .hero .trust-chip{font-size:.66rem;letter-spacing:.03em;border:0;border-radius:0;padding:0;color:#dfe6ee;text-transform:uppercase;display:inline-flex;align-items:center;}
  .hero .trust-chip::before{content:"";display:inline-block;width:5px;height:5px;margin-right:9px;background:#f2a23f;transform:rotate(45deg);}

  /* Staggered load-in: opacity + rise + blur → sharp. Visible by default so
     reduced-motion / no-JS users never see a blank hero. */
  .hero-in{opacity:1;}
  @media (prefers-reduced-motion:no-preference){
    .hero .hero-copy .hero-in{opacity:0;animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 90ms + 60ms);}
    @keyframes heroIn{from{opacity:0;transform:translateY(20px);filter:blur(8px);}to{opacity:1;transform:none;filter:blur(0);}}
    .hero-media,.hero-glow,.hero-copy{transition:transform .35s cubic-bezier(.2,.7,.2,1);}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-video{display:none;}
    .hero-media{transform:none;background:#0b1520 url("../../images/hero-current-poster.jpg") center/cover no-repeat;}
  }

  @media(max-width:700px){
    .hero-inner{min-height:calc(100svh - 72px);align-items:flex-end;padding-inline:20px;}
    .hero-video{object-position:66% 48%;}
    .hero-media{transform:translate3d(0,var(--sy,0px),0) scale(1.12);}
    .hero-scrim{background:
      linear-gradient(0deg,rgba(6,17,28,.97) 0%,rgba(6,17,28,.85) 32%,rgba(6,17,28,.42) 60%,rgba(6,17,28,.14) 100%),
      linear-gradient(180deg,rgba(6,17,28,.6),transparent 22%);}
    .hero-glow{background:radial-gradient(65% 28% at 60% 26%,rgba(232,66,40,.22),transparent 72%);}
    .hero-copy{max-width:100%;padding:clamp(64px,12vh,110px) 0 84px;}
    .hero .eyebrow{font-size:.56rem;letter-spacing:.14em;margin-bottom:14px;}
    .hero h1{font-size:clamp(2.4rem,9.2vw,3.3rem);margin-bottom:14px;}
    .hero-sub{font-size:.88rem;line-height:1.65;margin-bottom:18px;max-width:100%;}
    .hero .cta-row{width:100%;gap:10px;flex-direction:column;align-items:stretch;margin-bottom:16px;}
    .hero .cta-row .btn{width:100%;justify-content:center;}
    .hero .cta-row .btn-ghost{display:inline-flex;}
    .hero-contact{margin-bottom:16px;}
    .hero .trust-strip{gap:8px 16px;}
  }