/* ============================================================
   INSAR V3 — RESPONSIVE
   Designed at 1920 / 1440 / 1024 / 768 / 390.
   Mobile is composed, not merely stacked.
   ============================================================ */

/* ---------- ≤1200px — nav collapses ------------------------ */
@media (max-width:1200px){
  .nav{ display:none; }
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .pillar:nth-child(2){ border-right:0; }
  .pillar-panel{ grid-column:1 / -1; min-height:300px; }
  .hero__copy{ max-width:min(40rem,66vw); }
}

/* ---------- ≤1024px — tablet (fleet rules live in fleet.css) --- */
@media (max-width:1024px){
  :root{ --header-h:70px; }

  .hero__inner{ grid-template-columns:1fr; align-items:end; }
  .hero__trust{ display:none; }
  .hero__copy{ max-width:100%; }
  .hero__lead{ max-width:44ch; }

  .story__grid{ grid-template-columns:1fr; gap:2.8rem; }
  .story__scrim{
    background:
      linear-gradient(180deg,rgba(8,8,7,.72) 0%,rgba(8,8,7,.58) 40%,rgba(8,8,7,.94) 100%);
  }

  .flagship{ grid-template-columns:1fr; gap:1.8rem; }
  .flagship--reverse .flagship__media{ order:0; }
  .flagship__media{ aspect-ratio:16/10; }

  /* Three cards stay three-up here — a 2-column grid would leave
     a lone orphan on the second row. Below 768px they become a rail. */
  .cards{ gap:1.2rem; }

  .enq__grid{ grid-template-columns:1fr; gap:2.6rem; }
  .enq h2{ max-width:none; }

  .bespoke{ grid-template-columns:1fr; gap:1.8rem; }
  .bespoke .act .btn{ width:100%; }

  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__grid > :first-child{ grid-column:1 / -1; }
}

/* ---------- ≤880px ----------------------------------------- */
@media (max-width:880px){
  .gens{ grid-template-columns:1fr; gap:2.2rem; }
  .collection__head{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .collection__head h2{ max-width:none; }
}

/* ---------- ≤768px — phone / small tablet ------------------ */
@media (max-width:768px){
  :root{ --header-h:64px; --header-h-sm:58px; }

  body{ padding-bottom:0; }

  /* Mobile hero is composed, not stacked: a full-bleed image band
     that fades into a solid black copy panel, so the vehicle is
     never buried underneath the headline. */
  .hero{
    display:grid;
    /* Reset the desktop flex alignment — in a grid context
       `justify-content:flex-end` would shrink-wrap the column. */
    grid-template-columns:100%;
    grid-template-rows:52svh auto auto;
    justify-content:stretch;
    align-content:start;
    min-height:100svh;
    padding-top:0;
  }
  .hero__slides{ position:relative; grid-area:1 / 1; }
  .hero__scrim{
    position:relative; grid-area:1 / 1; z-index:2;
    background:linear-gradient(180deg,
      rgba(8,8,7,.72) 0%,
      rgba(8,8,7,.10) 30%,
      rgba(8,8,7,.50) 76%,
      var(--black) 100%);
  }
  .hero__slide .media img{ object-position:50% 58%; }
  .hero__slide .media::after{ display:none; }
  .hero__inner{ grid-area:2 / 1; padding-block:1.6rem 1rem; }
  .hero__bar{ grid-area:3 / 1; }
  .hero__hr{ margin-block:1.5rem; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .hero__caption{ display:none; }
  .hero__bar{ padding-bottom:1.4rem; }

  .pillars{ grid-template-columns:1fr; }
  .pillar{ border-right:0; border-bottom:1px solid var(--ivory-07); }
  .pillar p{ margin-bottom:1.5rem; }

  .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; padding-top:1.8rem; }
  .stat:nth-child(odd){ border-left:0; }
  .stat:nth-child(n+3){ padding-top:1.8rem; border-top:1px solid var(--ivory-07); }

  /* Swipeable experience cards */
  .cards{
    display:grid; grid-auto-flow:column;
    grid-auto-columns:76%;
    grid-template-columns:none;
    gap:.9rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut); padding-bottom:.5rem;
    scrollbar-width:none;
  }
  .cards::-webkit-scrollbar{ display:none; }
  .card{ scroll-snap-align:start; }

  .footer__grid{ grid-template-columns:1fr; gap:2.4rem; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:.6rem; }

  /* Sticky enquiry bar replaces the floating bubble */
  .sticky-cta{ display:flex; }
  .wa{ display:none; }
  .sticky-cta .wa-inline{
    width:52px; flex:none; display:grid; place-items:center;
    background:transparent; border:1px solid var(--gold-dim); color:var(--gold-2);
  }
  .sticky-cta .wa-inline svg{ width:20px; height:20px; }
}

/* ---------- ≤430px — iPhone 390/414 ------------------------ */
@media (max-width:430px){
  h1{ font-size:clamp(2.5rem,10.5vw,3.2rem); }
  h2{ font-size:clamp(1.95rem,8.5vw,2.5rem); }

  .eyebrow{ font-size:.6rem; letter-spacing:.22em; gap:.65rem; margin-bottom:1.1rem; }
  .eyebrow::before{ width:22px; }

  .header__act .btn{ display:none; }
  .logo__mark{ width:38px; height:38px; }
  .logo__name{ font-size:1.14rem; }
  .logo__since{ display:none; }

  .hero__count{ font-size:1.3rem; }
  .hero__count .bar{ width:38px; }
  .hero__arrows button{ width:38px; height:38px; }

  .cards{ grid-auto-columns:84%; }
  .panel{ padding:1.6rem 1.3rem; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .bespoke{ padding:2rem 1.4rem; }
  .trust{ padding:1.5rem 1.1rem; }
}

/* ---------- Wide desktop 1920+ ----------------------------- */
@media (min-width:1800px){
  :root{ --container:1480px; }
  .hero__lead{ max-width:38ch; }
}

/* ---------- Reduced motion --------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .rule::after{ transform:scaleX(1) !important; }
  .hero__block{ transition:none; }
  .hero__slide .media img{ transform:scale(1) !important; }
}

/* ---------- Print ------------------------------------------ */
@media print{
  .header,.drawer,.wa,.sticky-cta,.hero__arrows{ display:none !important; }
  body{ background:#fff; color:#000; }
}