/* =========================================================
   LONGBOW - Featherweight Electric Sports Cars
   Brand: Speed of Lightness™
   ========================================================= */

@import url('ds/colors_and_type.css');

:root{
  /* === LEGACY ALIASES - remap onto Longbow design system tokens === */
  /* Accent (sole) */
  --gold:        var(--brass);        /* #9D895C */
  --gold-soft:   var(--tan);          /* #B49A6E */
  --gold-deep:   #7E6D45;             /* darker brass for light-bg use */

  /* Heritage greens (kept for product photography references; rare in chrome) */
  --green:       var(--moss);
  --green-deep:  var(--racing-green);
  --bronze:      #6E5F46;

  /* Bone family */
  --sand:        var(--bone);         /* #E3DED0 */
  --sand-warm:   var(--parchment);
  --sand-deep:   #C7C2B4;
  --offwhite:    var(--bone);

  /* Inks */
  --black:       var(--jet);          /* #161614 */
  --black-pure:  #0E0E0C;
  --charcoal-dark: var(--graphite);   /* #1F1F1D */
  --charcoal:    var(--ink);          /* #30302E */
  --charcoal-mid: var(--slate);

  /* Greys */
  --grey:        var(--pewter);
  --grey-light:  var(--silver);

  /* Type - drop Playfair entirely. Cormorant Garamond is the rare display fallback. */
  --serif:       var(--font-sans);    /* All headings now Montserrat. */
  --display-italic: var(--font-display); /* Cormorant Garamond - used sparingly for italic accents. */
  --sans:        var(--font-sans);
  --ease-brand:  cubic-bezier(.16,1,.3,1);

  /* Layout */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 80px);
  --rail: 56px;
}

/* ============ MULTI-PAGE: page chrome ============ */
.page-hero{
  position: relative;
  min-height: 72vh;
  padding: 180px var(--gutter) 100px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--jet);
}
.page-hero__bg{
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}
.page-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(22,22,20,.5) 0%, rgba(22,22,20,.2) 40%, rgba(22,22,20,.95) 100%);
}
.page-hero__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.page-hero__crumbs{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.page-hero__crumbs a{ color: var(--silver); }
.page-hero__crumbs a:hover{ color: var(--bone); }
.page-hero__crumbs .sep{ opacity: .4; }
.page-hero h1{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 110px);
  line-height: .98;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0 0 22px;
  max-width: 900px;
}
.page-hero h1 em{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}
.page-hero__lede{
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--silver);
  max-width: 640px;
  line-height: 1.5;
  margin: 0;
}

/* Page section */
.page-section{
  padding: 110px var(--gutter);
  background: var(--jet);
}
.page-section--alt{ background: var(--graphite); }
.page-section--bone{ background: var(--bone); color: var(--jet); }
.page-section--bone .eyebrow{ color: var(--brass); }
.page-section--bone h2,
.page-section--bone h3{ color: var(--jet); }
.page-section__inner{
  max-width: var(--maxw);
  margin: 0 auto;
}
.page-section__head{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  margin-bottom: 70px;
  align-items: end;
}
@media (max-width: 880px){
  .page-section__head{ grid-template-columns: 1fr; gap: 24px; }
  .page-hero{ min-height: 56vh; padding: 130px 20px 70px; }
}

/* Two-column row */
.split-row{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.split-row--reverse{ direction: rtl; }
.split-row--reverse > *{ direction: ltr; }
.split-row + .split-row{ margin-top: 110px; }
.split-row__media{
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--graphite);
}
/* For artwork shot on the vertical, where a 4/3 crop would cut the car in half. */
.split-row__media--square{ aspect-ratio: 1/1; }
/* For a wide render where the car sits hard left and the right is empty backdrop:
   anchor the crop left so the tail stays in frame instead of the dead space. */
.split-row__media--left img{ object-position: left center; }
.split-row__media img{
  width: 100%; height: 100%; object-fit: cover;
}
.split-row__copy h3{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 16px 0 22px;
  color: var(--bone);
}
.split-row__copy h3 em{ font-family: var(--font-display); color: var(--brass); }
.split-row__copy p{
  font-size: 16px;
  line-height: 1.65;
  color: var(--silver);
  margin: 0 0 16px;
  max-width: 56ch;
}
@media (max-width: 880px){
  .split-row, .split-row--reverse{ grid-template-columns: 1fr; gap: 30px; direction: ltr;}
  .split-row + .split-row{ margin-top: 70px; }
}

/* Stat strip */
.stat-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(180,154,110,.25);
  border-bottom: 1px solid rgba(180,154,110,.25);
}
.stat-strip > div{
  padding: 32px 24px;
  border-right: 1px solid rgba(180,154,110,.18);
}
.stat-strip > div:last-child{ border-right: none; }
.stat-strip .v{
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 42px;
  letter-spacing: -.02em;
  color: var(--bone);
  line-height: 1;
}
.stat-strip .v sup{ font-size: 14px; color: var(--brass); margin-left: 3px; vertical-align: top;}
.stat-strip .l{
  display: block;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
  margin-top: 12px;
}
@media (max-width: 720px){
  .stat-strip{ grid-template-columns: repeat(2, 1fr); }
  .stat-strip > div:nth-child(2){ border-right: none; }
}

/* CTA block */
.cta-block{
  text-align: center;
  padding: 90px 20px;
  background: var(--graphite);
  border-top: 1px solid rgba(180,154,110,.2);
}
.cta-block h3{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 56px);
  letter-spacing: -.02em;
  margin: 14px 0 28px;
  color: var(--bone);
}
.cta-block h3 em{ font-family: var(--font-display); color: var(--brass); }
.cta-block .ctas{
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Contact form */
.contact-form{
  display: grid;
  gap: 18px;
  max-width: 640px;
}
.contact-form .row-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label{
  display: grid;
  gap: 8px;
}
.contact-form .label{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tan);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(180,154,110,.35);
  padding: 12px 0;
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 16px;
  outline: none;
  transition: border-color .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{ border-bottom-color: var(--brass); }
.contact-form textarea{ resize: vertical; min-height: 120px; }
@media (max-width:560px){
  .contact-form .row-2{ grid-template-columns: 1fr; }
}

/* Tech list (Technology page) */
.tech-list{
  display: grid;
  gap: 1px;
  background: rgba(180,154,110,.18);
  border-top: 1px solid rgba(180,154,110,.18);
  border-bottom: 1px solid rgba(180,154,110,.18);
}
.tech-list__item{
  background: var(--jet);
  display: grid;
  grid-template-columns: 80px 1fr 380px;
  padding: 36px 0;
  gap: 40px;
  align-items: start;
}
.tech-list__item .num{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 20px;
  color: var(--brass);
  letter-spacing: .04em;
}
.tech-list__item h4{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.005em;
  margin: 0 0 12px;
  color: var(--bone);
}
.tech-list__item p{
  font-size: 15px;
  line-height: 1.6;
  color: var(--silver);
  margin: 0;
  max-width: 60ch;
}
.tech-list__item .pill{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
  border: 1px solid rgba(180,154,110,.3);
  padding: 8px 14px;
  display: inline-block;
  margin-top: 12px;
}
@media (max-width: 880px){
  .tech-list__item{ grid-template-columns: 60px 1fr; padding: 28px 0; }
  .tech-list__item .pill{ grid-column: 1/-1; }
}

/* Spec table (model pages) */
.spec-table{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(180,154,110,.2);
}
.spec-table > div{
  padding: 22px 0;
  border-bottom: 1px solid rgba(180,154,110,.15);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  align-items: baseline;
}
.spec-table > div:nth-child(odd){ padding-right: 30px; border-right: 1px solid rgba(180,154,110,.15); }
.spec-table > div:nth-child(even){ padding-left: 30px; }
.spec-table .l{ color: var(--tan); letter-spacing: .12em; text-transform: uppercase; font-size: 11px;}
.spec-table .v{ color: var(--bone); font-weight: 400; }
@media (max-width: 720px){
  .spec-table{ grid-template-columns: 1fr; }
  .spec-table > div:nth-child(odd){ padding-right: 0; border-right: none; }
  .spec-table > div:nth-child(even){ padding-left: 0; }
}

/* Page card grid (links between pages) */
.page-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.page-card{
  display: block;
  background: var(--graphite);
  text-decoration: none;
  color: inherit;
  transition: transform .4s ease, background .3s;
  overflow: hidden;
}
.page-card:hover{ background: #2a2a27; }
.page-card:hover .page-card__media img{ transform: scale(1.05); }
.page-card__media{
  aspect-ratio: 4/3;
  overflow: hidden;
}
.page-card__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.page-card__body{
  padding: 28px;
}
.page-card .label{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
}
.page-card h4{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -.01em;
  margin: 14px 0 10px;
  color: var(--bone);
}
.page-card p{
  font-size: 14px;
  line-height: 1.55;
  color: var(--silver);
  margin: 0 0 18px;
}
.page-card .arrow-cta{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
}
@media (max-width: 880px){
  .page-cards{ grid-template-columns: 1fr; }
}

/* Timeline (Our Story) */
.timeline{
  position: relative;
  padding-left: 30px;
  border-left: 1px solid rgba(180,154,110,.3);
}
.timeline__item{
  padding: 0 0 50px 24px;
  position: relative;
}
.timeline__item::before{
  content:"";
  position: absolute;
  left: -34px;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--brass);
}
.timeline__item .year{
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--brass);
  text-transform: uppercase;
}
.timeline__item h4{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 26px;
  margin: 8px 0 10px;
  color: var(--bone);
}
.timeline__item p{
  font-size: 15px;
  line-height: 1.6;
  color: var(--silver);
  margin: 0;
}

/* Active nav state */
.nav__menu a.active{ color: var(--brass); }

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--sans);
  background: var(--black);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

/* Type system */
.eyebrow{
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before{
  content:"";
  width: 32px;
  height: 1px;
  background: var(--brass);
  display: inline-block;
}
.eyebrow.no-rule::before{display:none}

.display{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(44px, 7vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.025em;
}
.display em{
  font-family: var(--display-italic);
  font-style: italic;
  color: var(--brass);
  font-weight: 400;
}
.h-section{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h-section em{
  font-family: var(--display-italic);
  font-style: italic;
  color: var(--brass);
  font-weight: 400;
}
.h-functional{
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}
.lead{
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--grey-light);
  max-width: 56ch;
  text-wrap: pretty;
}
.body{
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey-light);
}
.label{
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.ticker{
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Buttons */
.btn{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  transition: background .24s var(--ease-brand), border-color .24s var(--ease-brand), color .24s var(--ease-brand);
  position: relative;
  overflow: hidden;
}
.btn .arrow{
  width: 18px; height: 1px; background: currentColor; position: relative;
  transition: width .35s ease;
}
.btn .arrow::after{
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow{ width: 26px; }
.btn-primary{
  background: var(--brass);
  border-color: var(--brass);
  color: var(--black);
}
.btn-ghost{ color: var(--bone); border-color: rgba(248,246,241,.35); }
.btn-ghost:hover{ border-color: var(--brass); color: var(--brass); }
.btn-dark{ color: var(--black); border-color: var(--black); }
.btn-dark:hover{ background: var(--black); color: var(--sand); }

/* Hairlines & utilities */
.rule{ height: 1px; background: rgba(248,246,241,.12); }
.rule-dark{ height: 1px; background: rgba(14,14,14,.12); }
.gold-rule{ height: 1px; background: var(--brass); width: 48px; }

.container{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ==============  NAV  ============== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .4s var(--ease-brand), padding .4s var(--ease-brand), border-color .4s var(--ease-brand);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(22,22,20,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding-top: 14px; padding-bottom: 14px;
  border-bottom: var(--border-hairline);
}
.nav__brand{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.32em;
  color: var(--bone);
}
.nav__brand svg{ height: 28px; width: auto; }
.nav__menu{
  display: flex;
  gap: 38px;
  list-style: none; padding: 0; margin: 0;
}
.nav__menu a{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  padding: 8px 0;
  transition: color .3s;
}
.nav__menu a::after{
  content:""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--brass);
  transition: width .35s ease;
}
.nav__menu a:hover{ color: var(--brass); }
.nav__menu a:hover::after{ width: 100%; }
.nav__cta{
  display: flex; gap: 14px; align-items: center;
}
.nav__lang{
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--grey-light);
}
.nav__lang strong{ color: var(--bone); font-weight: 600; }

@media (max-width: 960px){
  .nav__menu{ display: none; }
}

/* ==============  HERO  ============== */
.hero{
  position: relative;
  min-height: 100vh;
  background: var(--black-pure);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 80px;
}
.hero__media{
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__media::after{
  content:""; position: absolute; inset: 0;
  /* Single image-protection scrim only - bottom 50% only, per brand. */
  background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(22,22,20,0.7) 100%);
}
.hero__bg{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: contrast(1.05) saturate(.92);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{ transform: scale(1.04) translateX(-1%); }
  to  { transform: scale(1.08) translateX(1%); }
}
.hero__overlay-marks{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
/* corner brackets */
.bracket{
  position: absolute;
  width: 24px; height: 24px;
  border: 1px solid var(--brass);
  opacity: .55;
}
.bracket.tl{ top: 100px; left: var(--gutter); border-right: none; border-bottom: none; }
.bracket.tr{ top: 100px; right: var(--gutter); border-left: none; border-bottom: none; }
.bracket.bl{ bottom: 30px; left: var(--gutter); border-right: none; border-top: none; }
.bracket.br{ bottom: 30px; right: var(--gutter); border-left: none; border-top: none; }

.hero__content{
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
}
.hero__lead{ max-width: 820px; }
.hero__eyebrow{ margin-bottom: 28px; }
.hero__title{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  color: var(--bone);
}
.hero__title em{
  font-family: var(--display-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}
.hero__title .line{ display:block; overflow: hidden; }
.hero__title .line span{
  display: inline-block;
  animation: lineRise 1.1s cubic-bezier(.2,.7,.1,1) both;
}
.hero__title .line:nth-child(1) span{ animation-delay: .15s; }
.hero__title .line:nth-child(2) span{ animation-delay: .32s; }
.hero__title .line:nth-child(3) span{ animation-delay: .49s; }
@keyframes lineRise{
  from{ transform: translateY(110%); opacity: 0; }
  to  { transform: translateY(0); opacity: 1; }
}
.hero__sub{
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 22px;
}
.hero__sub .lead{ max-width: 520px; margin: 0; }
.hero__cta{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* hero meta column */
.hero__meta{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  min-width: 280px;
}
.hero__stat{
  display: flex; flex-direction: column; gap: 6px;
  border-left: 1px solid rgba(154,138,98,.4);
  padding-left: 18px;
}
.hero__stat .v{
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 200;
  color: var(--bone);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero__stat .v sup{ font-size: 14px; color: var(--brass); margin-left: 4px; }
.hero__stat .l{
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--grey-light);
}

/* hero ticker bottom */
.hero__ticker{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  border-top: var(--border-hairline);
  background: rgba(22,22,20,0.85);
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--silver);
}
.hero__ticker .dot{
  display: inline-block; width: 6px; height: 6px; background: var(--brass);
  border-radius: 50%; margin-right: 10px; vertical-align: middle;
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .4; transform: scale(.7); }
}
.hero__ticker .scroll{
  display: flex; align-items: center; gap: 10px;
}
.hero__ticker .scroll-line{
  width: 1px; height: 24px; background: var(--brass);
  animation: scrollLine 2s infinite;
  transform-origin: top;
}
@keyframes scrollLine{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  51%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 880px){
  .hero__content{ grid-template-columns: 1fr; }
  .hero__meta{ grid-template-columns: repeat(2, 1fr); }
}

/* ==============  MARQUEE  ============== */
.marquee{
  background: var(--black);
  border-block: 1px solid rgba(248,246,241,.08);
  overflow: hidden;
  padding: 22px 0;
}
.marquee__track{
  display: flex;
  gap: 80px;
  white-space: nowrap;
  animation: scroll 38s linear infinite;
}
.marquee__item{
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--grey-light);
  display: inline-flex;
  align-items: center;
  gap: 80px;
}
.marquee__item::after{
  content: "✦";
  color: var(--brass);
  font-style: normal;
  font-size: 14px;
}
@keyframes scroll{
  to{ transform: translateX(-50%); }
}

/* ==============  PHILOSOPHY  ============== */
.philosophy{
  background: var(--black);
  padding: clamp(80px, 12vw, 180px) 0;
  position: relative;
  overflow: hidden;
}
.philosophy__bg{
  position: absolute;
  font-family: var(--display-italic);
  font-style: italic;
  font-size: clamp(280px, 40vw, 640px);
  font-weight: 400;
  color: rgba(154,138,98,.04);
  line-height: 1;
  bottom: -10%; right: -8%;
  pointer-events: none;
  user-select: none;
}
.philosophy__grid{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
  position: relative;
  z-index: 1;
}
.philosophy__head .h-section{ margin: 18px 0 0; }
.philosophy__body p{
  font-family: var(--font-sans);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-wrap: pretty;
}
.philosophy__body p em{
  font-family: var(--display-italic);
  font-style: italic;
  color: var(--brass);
}
  color: var(--bone);
  margin: 0 0 28px;
  font-weight: 400;
  text-wrap: balance;
}
.philosophy__body p em{ color: var(--brass); font-style: italic; }
.philosophy__signature{
  display: flex; align-items: center; gap: 16px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid rgba(248,246,241,.1);
}
.philosophy__signature .name{
  font-family: var(--display-italic); font-style: italic;
  font-size: 22px; color: var(--brass);
}
.philosophy__signature .title{
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--grey-light);
}
.philosophy__signature .v{
  height: 32px; width: 1px; background: rgba(154,138,98,.4);
}

@media (max-width: 880px){
  .philosophy__grid{ grid-template-columns: 1fr; }
}

/* DNA principles row */
.principles{
  background: var(--charcoal-dark);
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid rgba(248,246,241,.05);
  position: relative;
}
.principles__head{
  text-align: center;
  margin-bottom: clamp(60px, 8vw, 100px);
}
.principles__head .h-section{ margin-top: 18px; }
.principles__grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(154,138,98,.18);
  border-bottom: 1px solid rgba(154,138,98,.18);
}
.principle{
  padding: 50px 28px;
  border-right: 1px solid rgba(154,138,98,.18);
  position: relative;
  transition: background .4s;
}
.principle:last-child{ border-right: none; }
.principle:hover{ background: rgba(154,138,98,.06); }
.principle__num{
  font-family: var(--display-italic); font-style: italic;
  color: var(--brass); font-size: 14px; margin-bottom: 24px;
  display: block;
}
.principle__title{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--bone);
}
.principle__body{
  font-size: 13px; line-height: 1.65; color: var(--grey-light);
  margin: 0;
}

@media (max-width: 880px){
  .principles__grid{ grid-template-columns: repeat(2, 1fr); }
  .principle{ border-bottom: 1px solid rgba(154,138,98,.18); }
  .principle:nth-child(2n){ border-right: none; }
}

/* ==============  MODELS  ============== */
.models{
  background: var(--black);
  padding: clamp(80px, 10vw, 140px) 0 0;
}
.models__head{
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px;
  gap: 40px;
  flex-wrap: wrap;
}
.models__head .h-section{ margin-top: 14px; max-width: 780px; }

/* Showcase: each model is a full-bleed scene */
.showcase{
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  border-top: 1px solid rgba(248,246,241,.08);
  border-bottom: 1px solid rgba(248,246,241,.08);
  background: var(--black);
}
.showcase__media{
  position: absolute; inset: 0;
}
.showcase__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 6s ease;
}
.showcase:hover .showcase__media img{
  transform: scale(1.04);
}
.showcase__media::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(22,22,20,0.85) 0%, rgba(22,22,20,0.4) 50%, rgba(22,22,20,0) 80%);
}
.showcase__inner{
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 80px var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.showcase__copy{
  max-width: 540px;
}
.showcase__name{
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(56px, 7vw, 108px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--bone);
  margin: 0 0 14px;
}
.showcase__name em{ font-family: var(--display-italic); color: var(--brass); font-style: italic; font-weight: 400; }
.showcase__tag{
  font-family: var(--display-italic); font-style: italic;
  font-size: 22px; color: var(--tan);
  margin: 0 0 28px;
  line-height: 1.3;
  letter-spacing: 0;
}
.showcase__desc{
  font-size: 15px; line-height: 1.7; color: var(--grey-light);
  margin: 0 0 36px; max-width: 460px;
}
.showcase__specs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(22,22,20,0.92);
  border-top: var(--border-hairline);
  padding: 26px var(--gutter);
  z-index: 3;
}
.spec-item{
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid rgba(154,138,98,.18);
  padding-right: 22px;
}
.spec-item:last-child{ border-right: none; }
.spec-item .v{
  font-family: var(--font-sans); font-size: 28px; color: var(--bone);
  line-height: 1; font-weight: 200; letter-spacing: -0.02em;
}
.spec-item .v small{ font-size: 12px; color: var(--brass); margin-left: 4px; font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
.spec-item .l{
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--grey-light);
}
.showcase__cta{ display: flex; gap: 12px; flex-wrap: wrap; }

.showcase__index{
  position: absolute;
  top: 36px; right: var(--gutter);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--brass);
  z-index: 3;
}

@media (max-width: 880px){
  .showcase__inner{ grid-template-columns: 1fr; padding-top: 120px; }
  .showcase__specs{ grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .spec-item{ border-right: none; }
}

/* Family lineup (5 models) */
.family{
  background: var(--charcoal-dark);
  padding: clamp(80px, 10vw, 140px) 0;
}
.family__head{
  display: flex; justify-content: space-between; align-items: end;
  gap: 40px; flex-wrap: wrap;
  margin-bottom: 60px;
}
.family__head .h-section{ margin-top: 14px; max-width: 720px; }

.family__grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(154,138,98,.18);
  border: 1px solid rgba(154,138,98,.18);
}
.family__card{
  background: var(--charcoal-dark);
  padding: 32px 26px 36px;
  display: flex; flex-direction: column;
  position: relative;
  transition: background .4s;
  cursor: pointer;
  min-height: 380px;
}
.family__card:hover{ background: #16191c; }
.family__card .num{
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  color: var(--brass); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.family__card .name{
  font-family: var(--font-sans);
  font-size: 36px;
  margin: 14px 0 10px;
  color: var(--bone);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.family__card .role{
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 24px;
}
/* ===== Founders ===== */
.founders{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 56px;
}
@media (max-width: 900px){ .founders{ grid-template-columns: 1fr; } }
.founder{
  margin: 0;
  background: #161513;
  border: 1px solid #232220;
  display: flex; flex-direction: column;
}
.founder__portrait{
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #0d0c0b;
}
.founder__portrait img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.15) contrast(1.05);
  transition: filter .6s ease, transform .8s ease;
}
.founder:hover .founder__portrait img{ filter: none; transform: scale(1.03); }
.founder figcaption{ padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.founder h4{
  font-family: var(--display-italic);
  font-size: 28px; font-weight: 500;
  color: var(--bone);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.founder__role{
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 16px;
}
.founder__bio{
  font-size: 14px; line-height: 1.7;
  color: var(--silver);
  flex: 1;
  margin: 0 0 18px;
}
.founder__sig{
  height: 38px; width: auto;
  align-self: flex-start;
  opacity: .85;
  filter: brightness(0) invert(1) opacity(.7);
}

.pedigree{
  grid-template-columns: repeat(6, 1fr) !important;
  margin-top: 48px;
}
@media (max-width: 900px){ .pedigree{ grid-template-columns: repeat(2, 1fr) !important; } }

/* ===== Press logos ===== */
.press__logos{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: #232220;
  border: 1px solid #232220;
  margin-top: 56px;
}
@media (max-width: 900px){ .press__logos{ grid-template-columns: repeat(3, 1fr); } }
.press__logos img{
  background: var(--bg);
  width: 100%;
  height: 100px;
  object-fit: contain;
  padding: 26px 22px;
  filter: brightness(0) invert(1) opacity(.55);
  transition: filter .4s ease, opacity .4s ease;
}
.press__logos img:hover{ filter: brightness(0) invert(1) opacity(1); }

.family__grid--two{ grid-template-columns: repeat(2, 1fr) !important; gap: 32px; }
@media (max-width: 760px){ .family__grid--two{ grid-template-columns: 1fr !important; } }

/* ============================================
   TECHNOLOGY · horizontal rail (De Tomaso style)
   ============================================ */
.engineering__headline{
  align-self: start;
  padding-top: 8px;
}
.engineering__headline .label{
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass);
  display: inline-block; margin-bottom: 24px;
}
.engineering__headline h3{
  font-family: var(--display-italic);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 28px;
}
.engineering__headline p{
  font-size: 16px; line-height: 1.75;
  color: var(--silver);
  margin: 0 0 18px;
  max-width: 460px;
}
.engineering__headline p.quiet{
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tan);
  margin-top: 36px;
}

.tech{
  background: #0a0908;
  padding: 140px 0 120px;
  border-top: 1px solid #1a1917;
  border-bottom: 1px solid #1a1917;
  overflow: hidden;
  position: relative;
}
.tech::before{
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(154,138,98,0.08), transparent 70%);
  pointer-events: none;
}
.tech__head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
  position: relative;
}
@media (max-width: 900px){
  .tech__head{ grid-template-columns: 1fr; gap: 32px; }
}

.tech__nav{
  display: flex; align-items: center;
  gap: 28px;
}
.tech__counter{
  font-family: var(--display-italic);
  font-size: 28px;
  color: var(--bone);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
}
.tech__counter .sep{
  margin: 0 6px;
  color: var(--tan);
  font-style: italic;
}
.tech__counter span#techTotal{ color: var(--tan); font-size: 18px; vertical-align: 6px; }
.tech__progress{
  width: 180px;
  height: 1px;
  background: #2a2826;
  position: relative;
  overflow: hidden;
}
.tech__progress span{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 16.66%;
  background: var(--brass);
  transition: width .55s cubic-bezier(.7,0,.2,1);
}
@media (max-width: 600px){ .tech__progress{ width: 100px; } }
.tech__buttons{ display: flex; gap: 10px; }
.tech__btn{
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid #2e2c2a;
  color: var(--bone);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .35s ease;
}
.tech__btn:hover{
  background: var(--brass);
  border-color: var(--brass);
  color: var(--bg);
}
.tech__btn:disabled{ opacity: .25; cursor: not-allowed; }

.tech__rail{
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-left: max(40px, calc((100vw - 1280px) / 2));
  padding-right: 30vw;
  padding-bottom: 12px;
}
.tech__rail::-webkit-scrollbar{ display: none; }
.tech__rail:active{ cursor: grabbing; }
.tech__rail:focus-visible{ outline: 1px solid var(--brass); outline-offset: 4px; }

.tech__track{
  display: flex;
  gap: 28px;
}
.tech__card{
  flex: 0 0 min(720px, 80vw);
  scroll-snap-align: start;
  background: #131210;
  border: 1px solid #1f1e1c;
  display: grid;
  grid-template-rows: 360px 1fr;
  position: relative;
  overflow: hidden;
}
@media (max-width: 700px){
  .tech__card{ flex-basis: 86vw; grid-template-rows: 240px 1fr; }
  .tech__rail{ padding-left: 24px; padding-right: 12vw; }
}
.tech__media{ overflow: hidden; position: relative; }
.tech__media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(11,10,9,.55) 100%);
}
.tech__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.1,1);
}
.tech__card:hover .tech__media img{ transform: scale(1.04); }

.tech__body{
  padding: 40px 44px 44px;
  display: flex; flex-direction: column;
  position: relative;
}
@media (max-width: 700px){ .tech__body{ padding: 28px 26px 32px; } }

.tech__num{
  position: absolute;
  top: -54px; right: 32px;
  font-family: var(--display-italic);
  font-size: 88px;
  color: var(--brass);
  line-height: 1;
  font-style: italic;
  text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.tech__tag{
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}
.tech__body h3{
  font-family: var(--display-italic);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0 0 14px;
  line-height: 1.15;
}
.tech__body > p{
  font-size: 14.5px; line-height: 1.75;
  color: var(--silver);
  margin: 0 0 24px;
}
.tech__stats{
  list-style: none;
  margin: 0; padding: 24px 0 0;
  border-top: 1px solid #232220;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tech__stats li{ display: flex; flex-direction: column; gap: 6px; }
.tech__stats .v{
  font-family: var(--display-italic);
  font-size: 26px;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.tech__stats .v small{
  font-size: 13px; color: var(--tan);
  margin-left: 2px; letter-spacing: 0;
}
.tech__stats .l{
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--silver);
  line-height: 1.5;
  text-transform: none;
}

.tech__hint{
  margin-top: 36px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  text-align: center;
}

.family__card .silhouette{
  flex: 1;
  margin: 18px -26px;
  overflow: hidden;
  position: relative;
  min-height: 160px;
}
.family__card .silhouette img{
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  filter: grayscale(.2) contrast(1.05);
  transition: transform .8s ease, filter .6s ease;
}
.family__card:hover .silhouette img{ transform: scale(1.06); filter: none; }
.family__card .meta{
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--grey-light);
  padding-top: 18px;
  border-top: 1px solid rgba(248,246,241,.08);
}
.family__card .meta strong{ color: var(--bone); font-weight: 600; }

@media (max-width: 880px){
  .family__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ==============  ENGINEERING  ============== */
.engineering{
  background: var(--sand);
  color: var(--black);
  padding: clamp(80px, 12vw, 180px) 0;
  position: relative;
  overflow: hidden;
}
.engineering .eyebrow{ color: var(--brass); }
.engineering .eyebrow::before{ background: var(--brass); }
.engineering__head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 120px);
  margin-bottom: clamp(60px, 8vw, 100px);
  align-items: end;
}
.engineering__head .h-section{
  font-size: clamp(40px, 5.5vw, 84px);
  color: var(--black);
  margin-top: 22px;
}
.engineering__head .h-section em{ color: var(--brass); font-style: italic; }
.engineering__head .lead{
  color: var(--charcoal-mid);
  font-size: 16px;
}

.engineering__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

/* Big weight comparison chart */
.weight-chart{
  background: #fff;
  padding: 48px 40px;
  position: relative;
}
.weight-chart h3{
  font-family: var(--sans);
  font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 8px; font-weight: 700;
}
.weight-chart .subtitle{
  font-family: var(--serif); font-size: 22px;
  color: var(--black); margin: 0 0 36px;
}
.weight-row{
  display: grid;
  grid-template-columns: 110px 1fr 90px;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  font-size: 13px;
}
.weight-row .car{
  font-weight: 600; color: var(--charcoal);
  letter-spacing: 0.04em;
}
.weight-row .car small{
  display:block; font-weight: 400; color: var(--grey);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 2px;
}
.weight-row .bar{
  height: 6px;
  background: rgba(0,0,0,.06);
  position: relative;
}
.weight-row .bar .fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--charcoal);
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
  width: 0;
}
.weight-row.us .bar .fill{ background: var(--brass); height: 14px; top: -4px; }
.weight-row.us .car{ color: var(--brass); font-weight: 800; letter-spacing: 0.06em; }
.weight-row.us .v{ color: var(--brass); font-weight: 800; }
.weight-row .v{
  font-family: var(--serif);
  font-size: 18px;
  color: var(--charcoal);
  text-align: right;
  font-weight: 600;
}
.weight-chart .footnote{
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 11px; color: var(--grey); letter-spacing: 0.04em;
  line-height: 1.6;
}

/* Engineering stories */
.eng-story{
  margin-bottom: 42px;
  padding-bottom: 42px;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.eng-story:last-child{ border-bottom: none; }
.eng-story .label{ color: var(--brass); }
.eng-story h3{
  font-family: var(--serif);
  font-size: 32px;
  margin: 12px 0 16px;
  color: var(--black);
  font-weight: 400;
  line-height: 1.1;
}
.eng-story p{
  font-size: 15px; line-height: 1.65;
  color: var(--charcoal-mid);
  margin: 0;
}

/* ==============  TEAM  ============== */
.team{
  background: var(--black);
  padding: clamp(80px, 10vw, 140px) 0;
}
.team__head{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; margin-bottom: 70px; align-items: end;
}
.team__head .h-section{ margin-top: 18px; }

.pedigree{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(154,138,98,.2);
  border: 1px solid rgba(154,138,98,.2);
  margin-bottom: 80px;
}
.pedigree__cell{
  background: var(--black);
  padding: 36px 28px;
  text-align: left;
  transition: background .4s;
}
.pedigree__cell:hover{ background: #111; }
.pedigree__cell .from{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 18px;
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pedigree__cell .role{
  font-family: var(--serif); font-style: italic;
  color: var(--brass); font-size: 13px;
  margin-top: 6px;
}

.advisory{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(154,138,98,.2);
  border: 1px solid rgba(154,138,98,.2);
}
.advisor{
  background: var(--black);
  padding: 40px 36px;
  display: flex; align-items: center; gap: 24px;
}
.advisor__mark{
  width: 56px; height: 56px;
  border: 1px solid var(--brass);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  color: var(--brass); font-size: 22px;
  flex-shrink: 0;
}
.advisor h4{
  font-family: var(--sans); font-weight: 700;
  font-size: 16px; margin: 0; letter-spacing: 0.02em;
}
.advisor p{
  margin: 6px 0 0;
  font-size: 12px; color: var(--grey-light);
  letter-spacing: 0.04em;
}
.advisor p strong{ color: var(--brass); font-weight: 600; }

@media (max-width: 880px){
  .team__head{ grid-template-columns: 1fr; }
  .pedigree{ grid-template-columns: repeat(2,1fr); }
  .advisory{ grid-template-columns: 1fr; }
}

/* ==============  OWNERSHIP / GUILD + BOWYER  ============== */
.ownership{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--black);
}
.ownership__panel{
  position: relative;
  padding: clamp(60px, 8vw, 120px) clamp(40px, 6vw, 80px);
  min-height: 700px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.ownership__panel.guild{
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85)),
    radial-gradient(circle at 30% 30%, var(--green-deep), var(--charcoal-dark));
  border-right: 1px solid rgba(154,138,98,.25);
}
.ownership__panel.bowyer{
  background:
    linear-gradient(180deg, rgba(20,18,12,.55), rgba(20,18,12,.85)),
    radial-gradient(circle at 70% 30%, var(--bronze), var(--charcoal-dark));
}
.ownership__bg{
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(180px, 28vw, 420px);
  color: rgba(154,138,98,.05);
  bottom: -10%; right: -10%;
  pointer-events: none; user-select: none;
  line-height: 1;
}
.ownership__content{ position: relative; z-index: 1; max-width: 540px; }
.ownership__panel h2{
  font-family: var(--serif);
  font-size: clamp(48px, 5vw, 80px);
  font-weight: 400; line-height: 0.98;
  margin: 18px 0 28px;
}
.ownership__panel h2 em{ color: var(--brass); font-style: italic; }
.ownership__panel p{
  font-size: 17px; line-height: 1.65; color: var(--grey-light);
  margin: 0 0 28px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.ownership__list{
  list-style: none; padding: 0; margin: 0 0 36px;
  display: flex; flex-direction: column; gap: 14px;
}
.ownership__list li{
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 13px; letter-spacing: 0.06em;
  color: var(--bone);
}
.ownership__list li::before{
  content: "-"; color: var(--brass); flex-shrink: 0;
}
.ownership__cta{ position: relative; z-index: 1; }

@media (max-width: 880px){
  .ownership{ grid-template-columns: 1fr; }
  .ownership__panel.guild{ border-right: none; border-bottom: 1px solid rgba(154,138,98,.25); }
}

/* ==============  PRESS  ============== */
.press{
  background: var(--charcoal-dark);
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid rgba(248,246,241,.05);
  border-bottom: 1px solid rgba(248,246,241,.05);
}
.press__head{ text-align: center; margin-bottom: 70px; }
.press__head .h-section{ margin-top: 18px; max-width: 760px; margin-inline: auto; }

.press__quote{
  max-width: 1100px;
  margin: 0 auto 80px;
  text-align: center;
  position: relative;
  padding: 0 40px;
}
.press__quote .mark{
  font-family: var(--serif); font-style: italic;
  color: var(--brass); font-size: 80px; line-height: 0;
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  opacity: .35;
}
.press__quote blockquote{
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.25;
  margin: 0 0 32px;
  color: var(--bone);
  font-weight: 400;
  text-wrap: balance;
}
.press__quote cite{
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass);
}

.press__logos{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid rgba(248,246,241,.1);
  border-bottom: 1px solid rgba(248,246,241,.1);
}
.press__logo{
  padding: 36px 24px;
  text-align: center;
  border-right: 1px solid rgba(248,246,241,.08);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--grey-light);
  transition: color .3s;
}
.press__logo:last-child{ border-right: none; }
.press__logo:hover{ color: var(--brass); }
.press__logo strong{ font-style: normal; font-weight: 700; font-family: var(--sans); letter-spacing: 0.04em; }

@media (max-width: 880px){
  .press__logos{ grid-template-columns: repeat(3, 1fr); }
  .press__logo{ border-bottom: 1px solid rgba(248,246,241,.08); }
}

/* ==============  RESERVE  ============== */
.reserve{
  background: var(--sand);
  color: var(--black);
  padding: clamp(80px, 12vw, 160px) 0;
  position: relative;
}
.reserve__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.reserve .eyebrow{ color: var(--brass); }
.reserve .eyebrow::before{ background: var(--brass); }
.reserve h2{
  font-family: var(--serif);
  font-size: clamp(44px, 5.5vw, 84px);
  font-weight: 400;
  margin: 18px 0 28px;
  line-height: 0.98;
  color: var(--black);
}
.reserve h2 em{ color: var(--brass); font-style: italic; }
.reserve .lead{
  color: var(--charcoal-mid); font-size: 17px; max-width: 480px;
}

.reserve__flow{
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 40px;
}
.reserve__step{
  display: flex; gap: 22px; align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid rgba(0,0,0,.12);
}
.reserve__step:last-child{ border-bottom: 1px solid rgba(0,0,0,.12); }
.reserve__step .num{
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--brass); min-width: 32px;
}
.reserve__step h4{
  margin: 0 0 4px;
  font-family: var(--sans); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
}
.reserve__step p{
  margin: 0; font-size: 13px; color: var(--charcoal-mid);
  line-height: 1.55;
}

/* Form card */
.reserve__card{
  background: #fff;
  padding: 48px 44px;
  position: relative;
}
.reserve__card .label{ color: var(--brass); margin-bottom: 24px; display: block; }
.reserve__card h3{
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; margin: 8px 0 28px;
  color: var(--black);
}
.reserve__field{
  display: block; margin-bottom: 22px;
}
.reserve__field > span{
  display: block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--charcoal-mid); margin-bottom: 8px;
}
.reserve__field input,
.reserve__field select{
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.2);
  font-family: var(--sans);
  font-size: 15px;
  background: transparent;
  color: var(--black);
  transition: border-color .25s;
  outline: none;
  border-radius: 0;
}
.reserve__field input:focus,
.reserve__field select:focus{ border-bottom-color: var(--brass); }
.reserve__field input::placeholder{ color: var(--grey); }

.reserve__row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.reserve__model{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 26px;
}
.reserve__model button{
  padding: 12px 6px;
  border: 1px solid rgba(0,0,0,.2);
  background: transparent;
  color: var(--charcoal);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all .25s;
}
.reserve__model button:hover{ border-color: var(--brass); color: var(--brass); }
.reserve__model button.active{
  background: var(--brass);
  border-color: var(--brass);
  color: var(--black);
}
.reserve__deposit{
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(0,0,0,.12);
  margin: 18px 0 26px;
}
.reserve__deposit .l{
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--charcoal-mid);
}
.reserve__deposit .v{
  font-family: var(--serif); font-size: 28px; color: var(--black);
}
.reserve__submit{
  width: 100%;
  justify-content: center;
}
.reserve__fine{
  font-size: 11px; color: var(--grey);
  margin: 22px 0 0; text-align: center;
  letter-spacing: 0.04em;
}

@media (max-width: 880px){
  .reserve__inner{ grid-template-columns: 1fr; }
}

/* ==============  MODEL PICKER MODAL  ============== */
.model-picker__inner{
  background: var(--sand);
  color: var(--black);
  max-width: 1080px; width: 100%;
  padding: 64px 56px 48px;
  position: relative;
  max-height: 92vh; overflow-y: auto;
  animation: modalUp .38s cubic-bezier(.2,.7,.1,1);
}
.model-picker__head{ text-align: center; margin-bottom: 44px; }
.model-picker__head .label{ display:block; margin-bottom: 14px; }
.model-picker__head h3{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4vw, 56px); margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.model-picker__head h3 em{ color: var(--brass); font-style: italic; }
.model-picker__head p{
  margin: 0 auto; max-width: 480px;
  font-size: 14px; color: var(--charcoal-mid);
}
.model-picker__grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.model-picker__grid--four{
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.mp-card--auto{
  background: linear-gradient(180deg, #15140f 0%, #0e0d09 100%);
  color: var(--bone, #ece6d8);
}
.mp-card--auto .mp-card__body h4{ color: var(--bone, #ece6d8); }
.mp-card--auto .mp-card__body h4 em{ color: var(--brass); font-style: italic; }
.mp-card--auto .mp-card__stats{ border-color: rgba(255,255,255,.12); }
.mp-card--auto .mp-card__stats li{ border-right-color: rgba(255,255,255,.08); }
.mp-card--auto .mp-card__stats b{ color: var(--bone, #ece6d8); }
.mp-card--auto .mp-card__stats sub,
.mp-card--auto .mp-card__stats span{ color: rgba(236,230,216,.55); }
.mp-card--auto .mp-card__price{ color: var(--bone, #ece6d8); }
.mp-card--auto .mp-card__chip{
  background: var(--brass); color: #0e0d09;
}
.model-picker__fine a{
  color: var(--brass); text-decoration: none; border-bottom: 1px solid currentColor;
}
.mp-card{
  display: block;
  background: #fff;
  color: var(--black);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.mp-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.35);
}
.mp-card__media{
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--charcoal-dark);
}
.mp-card__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.1,1);
}
.mp-card:hover .mp-card__media img{ transform: scale(1.04); }
.mp-card__chip{
  position: absolute; top: 16px; left: 16px;
  background: rgba(14,14,14,.78); color: var(--sand);
  padding: 7px 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  }
.mp-card__body{ padding: 28px 30px 30px; }
.mp-card__body .label{
  color: var(--brass); display:block; margin-bottom: 10px;
}
.mp-card__body h4{
  font-family: var(--serif); font-weight: 400;
  font-size: 36px; margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.mp-card__stats{
  list-style: none; padding: 0; margin: 0 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(0,0,0,.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.mp-card__stats li{
  padding: 16px 0;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(0,0,0,.08);
}
.mp-card__stats li:last-child{ border-right: none; }
.mp-card__stats b{
  font-family: var(--serif); font-weight: 400;
  font-size: 28px; line-height: 1;
}
.mp-card__stats sub{
  font-size: 11px; color: var(--charcoal-mid); margin-left: 2px;
  vertical-align: baseline;
}
.mp-card__stats span{
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--charcoal-mid); margin-top: 6px;
}
.mp-card__foot{
  display: flex; justify-content: space-between; align-items: center;
}
.mp-card__price{
  font-family: var(--serif); font-size: 22px;
}
.mp-card__cta{
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass);
  display: inline-flex; align-items: center; gap: 10px;
}
.mp-card__cta .arrow{
  display: inline-block; width: 28px; height: 1px; background: currentColor;
  position: relative; transition: width .3s;
}
.mp-card__cta .arrow::after{
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.mp-card:hover .mp-card__cta .arrow{ width: 40px; }
.model-picker__fine{
  text-align: center; margin: 36px 0 0;
  font-size: 11px; color: var(--charcoal-mid);
  letter-spacing: 0.06em;
}
@media (max-width: 880px){
  .model-picker__inner{ padding: 48px 24px 32px; }
  .model-picker__grid{ grid-template-columns: 1fr; }
}

/* ==============  NEWSLETTER  ============== */
.newsletter{
  background: var(--black);
  padding: clamp(51px, 6.4vw, 90px) var(--gutter);
  position: relative;
  overflow: hidden;
}
.newsletter__inner{
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.newsletter h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 3.6vw, 52px);
  margin: 18px 0 20px;
  line-height: 1.05;
  color: var(--bone);
}
.newsletter h2 em{ color: var(--brass); font-style: italic; }
.newsletter .lead{
  margin: 0 auto 44px;
}
.newsletter__form{
  display: flex;
  gap: 0;
  max-width: 540px;
  margin: 0 auto;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 6px;
}
.newsletter__form input{
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 0;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
}
.newsletter__form input::placeholder{ color: var(--grey-light); }
.newsletter__form button{
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; padding: 0 16px;
}
.newsletter__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(154,138,98,.06), transparent 60%);
}

/* ==============  FOOTER  ============== */
.footer{
  background: var(--black-pure);
  padding: 80px var(--gutter) 36px;
  border-top: 1px solid rgba(248,246,241,.08);
}
.footer__bottom{
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--grey);
  text-transform: uppercase;
}
.footer__mark{ height: 28px; width: auto; }
/* The brand line and the statutory identity are sentences, not labels, so they drop
   the uppercase and tracking the rest of the footer carries. */
.footer__line{
  margin: 0; max-width: 62ch;
  font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--grey-light); line-height: 1.6;
}
/* C-01 in COMPLIANCE.md: company number, place of registration, registered office and
   VAT on every page that carries a footer. It moved here when the address column went. */
.footer__identity{
  margin: 0; max-width: 82ch;
  font-size: 11px; letter-spacing: 0; text-transform: none;
  color: rgba(248,246,241,.42); line-height: 1.7;
}
.footer__bottom .social{
  display: flex; gap: 22px;
}
.footer__bottom .social a:hover{ color: var(--brass); }

/* ==============  RESERVATION MODAL  ============== */
.modal{
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(5,5,5,.75);
  display: none;
  align-items: center; justify-content: center;
  padding: 40px 20px;
}
.modal.open{ display: flex; }
.modal__inner{
  background: var(--sand);
  color: var(--black);
  max-width: 580px; width: 100%;
  padding: 56px 48px;
  position: relative;
  max-height: 90vh; overflow-y: auto;
  animation: modalUp .38s cubic-bezier(.2,.7,.1,1);
}
@keyframes modalUp{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: translateY(0); }
}
.modal__close{
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--charcoal);
}
.modal__close:hover{ color: var(--brass); }
.modal h3{
  font-family: var(--serif);
  font-size: 32px; margin: 0 0 14px;
  font-weight: 400;
}
.modal p{
  font-size: 14px; color: var(--charcoal-mid);
  margin: 0 0 32px;
}
.modal .check{
  width: 56px; height: 56px;
  border: 1.5px solid var(--brass); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  color: var(--brass);
}

/* tiny scroll-reveal. The hiding lives on [data-reveal] further down, which chrome.js
   sets at runtime, so copy is never hidden by CSS the script cannot undo. `.reveal` is
   just the marker that tells chrome.js this block should fade in. */

/* ==========================================================================
   MOBILE NAV + COOKIE BANNER + SHARED A11Y
   Appended in v2. Hamburger hidden on desktop, drawer slides in from right.
   ========================================================================== */

.nav__burger{
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(248,246,241,.18);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  cursor: pointer;
  padding: 0;
  transition: border-color .25s ease, background .25s ease;
}
.nav__burger:hover{ border-color: var(--brass); }
.nav__burger span{
  display: block;
  width: 18px; height: 1px;
  background: var(--bone);
}
.nav.scrolled .nav__burger{ border-color: rgba(248,246,241,.22); }

@media (max-width: 960px){
  .nav__burger{ display: inline-flex; }
  .nav__cta{ display: none; }
  /* Nav becomes: brand on left, burger on right. */
  .nav{ padding-left: 20px; padding-right: 20px; }
  .nav__brand img:last-child{ height: 14px; }
}

.lb-scrim{
  position: fixed; inset: 0;
  background: rgba(8,8,7,.6);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  z-index: 198;
}
.lb-scrim.open{ opacity: 1; pointer-events: auto; }

.lb-drawer{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  background: rgba(22,22,20,.9);
  border-left: 1px solid rgba(248,246,241,.08);
  transform: translateX(102%);
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
  z-index: 199;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.lb-drawer.open{ transform: translateX(0); }

.lb-drawer__head{
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(248,246,241,.08);
}
.lb-drawer__brand{
  grid-column: 2; justify-self: center;
  display: inline-flex; align-items: center;
}
.lb-drawer__close{
  grid-column: 3; justify-self: end;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  color: var(--bone);
  transition: color .25s ease;
}
.lb-drawer__close:hover{ color: var(--brass); }

.lb-drawer__menu{
  display: flex; flex-direction: column;
  padding: 12px 0;
}
.lb-drawer__menu a{
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--bone);
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(248,246,241,.06);
  display: flex; align-items: center; justify-content: space-between;
  transition: color .25s ease, background .25s ease;
}
.lb-drawer__menu a::after{
  content: "→";
  color: var(--brass);
  opacity: .5;
  font-family: var(--font-sans);
  font-size: 14px;
  transition: transform .25s ease, opacity .25s ease;
}
.lb-drawer__menu a:hover,
.lb-drawer__menu a.active{ color: var(--brass); background: rgba(154,138,98,.04); }
.lb-drawer__menu a:hover::after{ transform: translateX(4px); opacity: 1; }
.lb-drawer__menu a.active::after{ opacity: 1; }

.lb-drawer__foot{
  margin-top: auto;
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.lb-drawer__foot .eyebrow{
  margin-bottom: 8px;
}
.lb-drawer__foot .btn{
  width: 100%;
  justify-content: space-between;
  padding: 14px 22px;
}

/* ==========================================================================
   TECHNOLOGY BAND
   Lifted out of index.html's own style block when the Speedster and Roadster
   pages started using it too. One definition, three pages.
   ========================================================================== */
.beast{position:relative;overflow:hidden;background:var(--black-pure);padding:clamp(90px,11vw,170px) var(--gutter);display:flex;justify-content:center}
.beast__bg{position:absolute;inset:0}
.beast__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.beast::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.72),rgba(10,10,9,.55) 45%,rgba(10,10,9,.88))}
.beast__inner{position:relative;z-index:2;max-width:min(720px,100%);text-align:center;display:grid;justify-items:center;gap:0}
.beast__inner .h-section{margin:16px 0 22px}
.beast__inner p{margin:0 0 14px;max-width:56ch;font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:rgba(248,246,241,.76);text-wrap:pretty}
.beast__inner .btn{margin-top:22px}

/* ==========================================================================
   SLIDE-OUT SHEET
   FAQ and Contact open here instead of taking the reader off the page, the
   same gesture as the FAQ drawer on the reservation pages. The pages
   themselves are untouched and stay the source of the content.
   ========================================================================== */
.lb-sheet-scrim{
  position: fixed; inset: 0;
  background: rgba(8,8,7,.6);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  z-index: 200;
}
.lb-sheet-scrim.open{ opacity: 1; pointer-events: auto; }

.lb-sheet{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(760px, 96vw);
  background: var(--jet);
  border-left: 1px solid rgba(248,246,241,.08);
  transform: translateX(102%);
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
  z-index: 201;
  display: flex; flex-direction: column;
}
.lb-sheet.open{ transform: translateX(0); }
.lb-sheet__head{
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 32px;
  border-bottom: 1px solid rgba(248,246,241,.08);
}
.lb-sheet__head h2{
  margin: 0;
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.01em;
  color: var(--bone);
}
.lb-sheet__close{
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(248,246,241,.18);
  color: var(--bone);
  transition: border-color .25s ease, color .25s ease;
}
.lb-sheet__close:hover{ border-color: var(--brass); color: var(--brass); }
/* A sheet whose content carries its own heading does not need the chrome to repeat it. */
/* With the heading hidden, space-between would strand the close control on the left,
   and the head's own padding pushed the content down for nothing. */
.lb-sheet--bare .lb-sheet__head{ justify-content: flex-end; border-bottom: 0; padding: 14px 24px 0; }
.lb-sheet--bare .lb-sheet__head h2{ display: none; }
.lb-sheet--bare .lb-sheet__body{ padding-top: 0; }
/* The heading carries its margins inline on the page, which the sheet does not want. */
.lb-sheet--bare .lb-sheet__body .h-section{ margin-top: 0 !important; margin-bottom: 24px !important; }
/* Tighter in the panel so more of the form is in view. The field padding is left alone:
   at 12px it keeps the inputs near the 44px touch target the rest of the site holds to,
   so the space comes out of the gaps and the textarea instead. */
.lb-sheet__body .contact-form{ gap: 12px; }
.lb-sheet__body .contact-form .row-2{ gap: 12px; }
.lb-sheet__body .contact-form label{ gap: 5px; }
.lb-sheet__body .contact-form textarea{ min-height: 84px; }
.lb-sheet__body .contact-aside{ margin-top: 32px; padding-top: 24px !important; }
.lb-sheet__body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 32px 56px;
  overscroll-behavior: contain;
}
.lb-sheet__note{ padding: 40px 0; color: var(--grey); font-size: 13px; }

/* The imported sections were written for a full page, so their own framing
   comes off and the sheet supplies the padding. */
.lb-sheet__body .page-section,
.lb-sheet__body .faq-page{ padding: 0; background: none; }
.lb-sheet__body .page-section__inner,
.lb-sheet__body .faq-page__inner{ max-width: none; margin: 0; padding: 0; }
.lb-sheet__body .faq-page__group + .faq-page__group{ margin-top: 44px; }
/* Contact ships its two columns as an inline style, so this has to outrank it. */
.lb-sheet__body .contact-grid{ display: block !important; }
.lb-sheet__body .contact-aside{
  border-left: 0 !important;
  padding-left: 0 !important;
  margin-top: 44px;
  padding-top: 32px !important;
  border-top: 1px solid rgba(180,154,110,.18);
}
@media (max-width: 720px){
  .lb-sheet__head{ padding: 18px 20px; }
  .lb-sheet__body{ padding: 4px 20px 44px; }
}
@media (prefers-reduced-motion: reduce){
  .lb-sheet{ transition: none; }
  .lb-sheet-scrim{ transition: none; }
}

/* ==========================================================================
   COOKIE BANNER
   The first-visit banner is a blocking modal: the wall dims and intercepts
   the whole page, scroll is locked via html.lb-consent-open, and the card
   keeps its bottom-sheet look on top of the scrim. Reject sits beside
   Accept at equal weight, so blocking never becomes coercing.
   ========================================================================== */
.lb-cookies-wall{
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(10,10,9,.55);
  backdrop-filter: blur(2px);
  animation: cookiesWallIn .3s ease both;
}
@keyframes cookiesWallIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lb-cookies-wall.out{
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
html.lb-consent-open,
html.lb-consent-open body{
  overflow: hidden;
}
.lb-cookies{
  position: fixed;
  left: 20px; right: 20px;
  /* Clears the fixed bottom nav bar (--navh + its own bottom offset). */
  bottom: calc(clamp(52px, 4.6vw, 62px) + clamp(14px, 2vh, 26px) + 28px);
  z-index: 150;
  max-width: 560px;
  background: rgba(22,22,20,.96);
  border: 1px solid rgba(154,138,98,.3);
  color: var(--bone);
  padding: 22px 24px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px;
  animation: cookiesIn .38s cubic-bezier(.2,.7,.1,1) both;
  backdrop-filter: blur(8px);
}
@keyframes cookiesIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lb-cookies.out{
  opacity: 0; transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease;
}
.lb-cookies p{
  flex: 1 1 280px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--silver);
  margin: 0;
}
.lb-cookies p strong{
  color: var(--bone);
  font-weight: 600;
}
.lb-cookies p a{
  color: var(--brass);
  border-bottom: 1px solid currentColor;
}
.lb-cookies__actions{
  display: flex; gap: 10px;
  margin-left: auto;
}
.lb-cookies button{
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid rgba(248,246,241,.22);
  color: var(--bone);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.lb-cookies button:hover{ border-color: var(--brass); color: var(--brass); }
.lb-cookies button[data-cookie="accept"]{
  background: var(--brass); border-color: var(--brass); color: var(--jet);
}
.lb-cookies button[data-cookie="accept"]:hover{
  background: var(--tan); border-color: var(--tan); color: var(--jet);
}
@media (max-width: 560px){
  .lb-cookies{ left: 12px; right: 12px; bottom: calc(54px + 14px + 20px); padding: 18px; }
  .lb-cookies__actions{ width: 100%; }
  .lb-cookies button{ flex: 1; }
}

/* ==========================================================================
   FOCUS STATES (a11y) - visible without changing layout
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 0;
}

/* ==========================================================================
   MOBILE FIXES - showcase specs flow on small screens, FAQ single column,
   contact aside collapses cleanly.
   ========================================================================== */
@media (max-width: 880px){
  /* Showcase specs strip becomes flow content instead of pinned bottom. */
  .showcase{
    height: auto;
    min-height: 0;
    padding-bottom: 0;
  }
  .showcase__inner{
    min-height: 72svh;
    align-content: end;
    padding: 140px 20px 44px;
  }
  .showcase__specs{
    /* Relative, not static. The bar keeps its z-index: 3 from the base rule, and
       z-index is ignored on a static box, which let the absolutely positioned
       .showcase__media paint straight over the figures. They were always there,
       at full opacity and the right size, simply buried under the image. */
    position: relative;
    grid-template-columns: 1fr 1fr;
    padding: 24px 20px;
    background: rgba(22,22,20,0.92);
  }
  .showcase__index{ top: 24px; right: 20px; }

  /* Ownership FAQ grid collapses to single column. */
  .ownership-faq{ grid-template-columns: 1fr !important; gap: 0 !important; }

  /* Contact split layout. */
  .contact-grid{ grid-template-columns: 1fr !important; gap: 48px !important; }
  .contact-aside{ border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid rgba(180,154,110,.18); padding-top: 36px; }
}

/* Reservation model picker: wrap on small screens. */
@media (max-width: 720px){
  .reserve__model{ grid-template-columns: 1fr 1fr; }
}

/* Marquee: quieter on mobile. */
@media (max-width: 720px){
  .marquee__item{ font-size: 16px; gap: 40px; }
  .marquee__track{ gap: 40px; }
}

/* ==========================================================================
   v2: extra typography + reserve picker cards
   ========================================================================== */
.hero__title .tm{
  font-size: 0.28em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
  color: var(--brass);
  vertical-align: top;
  margin-left: 6px;
  letter-spacing: 0;
  font-feature-settings: "sups";
}

.principles__grid--three{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px){
  .principles__grid--three{ grid-template-columns: 1fr; }
  .principles__grid--three .principle{
    border-right: none;
    border-bottom: 1px solid rgba(154,138,98,.18);
  }
  .principles__grid--three .principle:last-child{ border-bottom: none; }
}

/* Reserve right column: picker cards routing to the reserve flow */
.reserve__card--picker{
  background: #fff;
  padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column;
  gap: 18px;
}
.reserve__card--picker h3{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.015em;
  margin: 4px 0 6px;
  color: var(--black);
}
.reserve__pickerLede{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--charcoal-mid);
  max-width: 56ch;
}
.reserve__pickCard{
  display: grid;
  grid-template-columns: 130px 1fr;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  overflow: hidden;
}
.reserve__pickCard:hover{
  transform: translateY(-2px);
  border-color: var(--brass);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.18);
}
.reserve__pickMedia{
  background-size: cover;
  background-position: center;
  background-color: var(--charcoal-dark);
  min-height: 100%;
}
.reserve__pickBody{
  padding: 22px 22px 22px 24px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.reserve__pickBody .label{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
}
.reserve__pickBody h4{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
  color: var(--black);
}
.reserve__pickBody h4 em{
  color: var(--brass);
  font-family: var(--font-display);
  font-style: italic;
}
.reserve__pickBody p{
  font-size: 13px;
  color: var(--charcoal-mid);
  margin: 0 0 12px;
  line-height: 1.5;
}
.reserve__pickCta{
  margin-top: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.reserve__pickCta .arrow{
  display: inline-block;
  width: 24px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width .3s ease;
}
.reserve__pickCta .arrow::after{
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.reserve__pickCard:hover .reserve__pickCta .arrow{ width: 36px; }
@media (max-width: 560px){
  .reserve__pickCard{ grid-template-columns: 100px 1fr; }
  .reserve__pickMedia{ min-height: 130px; }
}

/* ==========================================================================
   MOBILE AUDIT PASS
   Targeted fixes from a full 320-768px sweep.
   - Engineering chart collapses
   - Stat strips and press grids step down sensibly
   - Showcase media gets a vertical scrim so copy stays readable
   - Tech list image becomes inline on mobile, not orphaned
   - Hero ticker, footer-legal and breadcrumbs handle wrap gracefully
   - Touch targets >= 44px, font sizes >= 16px on inputs (no iOS zoom)
   ========================================================================== */

/* Engineering: chart over headline on mobile. */
@media (max-width: 880px){
  .engineering__head{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
  }
  .engineering__grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .engineering__headline{
    padding-top: 0;
  }
  .weight-chart{
    padding: 32px 24px;
  }
  .weight-row{
    grid-template-columns: 92px 1fr 64px;
    gap: 12px;
    font-size: 12px;
  }
  .weight-chart .subtitle{ font-size: 18px; }
}

/* Stat strip: step at 880 first (instead of jumping 4 → 2 only below 720). */
@media (max-width: 880px){
  .stat-strip{ grid-template-columns: repeat(2, 1fr); }
  .stat-strip > div{ padding: 24px 18px; }
  .stat-strip > div:nth-child(2){ border-right: none; }
  .stat-strip > div:nth-child(1),
  .stat-strip > div:nth-child(2){ border-bottom: 1px solid rgba(180,154,110,.18); }
}

/* Tech list: image inline below copy on mobile. */
@media (max-width: 880px){
  .tech-list__item{
    grid-template-columns: 60px 1fr;
    gap: 24px;
    padding: 32px 0 36px;
  }
  .tech-list__item > div:last-child{
    grid-column: 1 / -1;
    margin-top: 6px;
  }
  .tech-list__item h4{ font-size: 20px; }
}

/* Press logos: 6 → 3 (default) → 2 on narrow. */
@media (max-width: 520px){
  .press__logos{ grid-template-columns: repeat(2, 1fr); }
  .press__logos img{ height: 80px; padding: 18px 16px; }
}

/* Showcase: add a vertical scrim on mobile so copy stays legible
   without depending on the desktop horizontal gradient. */
@media (max-width: 880px){
  .showcase__media::after{
    background: linear-gradient(180deg,
      rgba(22,22,20,0.55) 0%,
      rgba(22,22,20,0.25) 35%,
      rgba(22,22,20,0.85) 100%);
  }
  .showcase__copy{ max-width: none; }
  .showcase__name{ font-size: clamp(40px, 11vw, 60px); }
  /* Both buttons take the width of the longer label rather than the whole column,
     so they read as a pair and not as two full-bleed bars. minmax(0, max-content)
     keeps them from overflowing a narrow screen. */
  .showcase__cta{
    display: grid;
    grid-template-columns: minmax(0, max-content);
    gap: 10px;
  }
  .showcase__cta .btn{ width: auto; justify-content: space-between; }
  .showcase__index{ font-size: 10px; }
}

/* Hero on small screens. */
@media (max-width: 720px){
  .hero{
    min-height: auto;
    padding-top: 110px;
    padding-bottom: 110px;
  }
  .hero__content{ gap: 30px; padding-bottom: 8px; }
  .hero__title{
    font-size: clamp(44px, 12vw, 68px);
    margin-bottom: 22px;
  }
  .hero__title .tm{ font-size: 0.32em; margin-left: 4px; }
  .hero__sub{ gap: 18px; margin-top: 14px; }
  .hero__sub .lead{ font-size: 15px; line-height: 1.55; }
  .hero__cta{ margin-top: 24px; gap: 10px; flex-direction: column; }
  .hero__cta .btn{ width: 100%; justify-content: space-between; }
  .hero__meta{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 18px;
    padding-top: 20px;
    border-top: 1px solid rgba(154,138,98,.18);
  }
  .hero__stat .v{ font-size: 30px; }
  .hero__stat .l{ font-size: 9px; letter-spacing: 0.22em; }
  .hero__eyebrow{ margin-bottom: 18px; font-size: 10px; }
}

/* Hero ticker: collapse the scroll cue on very narrow widths. */
@media (max-width: 560px){
  .hero__ticker{
    font-size: 9.5px;
    letter-spacing: 0.18em;
    gap: 12px;
    padding: 12px 16px;
  }
  .hero__ticker > span:first-child{
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hero__ticker .scroll{ display: none; }
}

/* Marquee height a touch smaller. */
@media (max-width: 560px){
  .marquee{ padding: 16px 0; }
  .marquee__item{ font-size: 14px; gap: 32px; }
  .marquee__track{ gap: 32px; }
}

/* Philosophy on mobile: ease the gigantic L watermark down so it doesn't
   overrun visible text. */
@media (max-width: 720px){
  .philosophy{ padding: clamp(60px, 14vw, 100px) 0; }
  .philosophy__bg{ font-size: clamp(220px, 60vw, 360px); bottom: -8%; right: -22%; }
  .philosophy__body p{ font-size: clamp(17px, 4.2vw, 22px); }
  .philosophy__signature{ flex-wrap: wrap; gap: 12px; }
  .philosophy__signature .v{ display: none; }
}

/* Principles row at narrow widths. */
@media (max-width: 640px){
  .principles__grid{ grid-template-columns: 1fr; }
  .principle{
    border-right: none !important;
    border-bottom: 1px solid rgba(154,138,98,.18);
    padding: 36px 20px;
  }
  .principle:last-child{ border-bottom: none; }
}

/* Engineering section on mobile: light section, big bg L same as philosophy. */
@media (max-width: 720px){
  .engineering{ padding: clamp(64px, 14vw, 120px) 0; }
  .engineering__head .h-section{ font-size: clamp(34px, 8vw, 56px); }
}

/* Page hero: more controlled mobile padding and crumb wrap. */
@media (max-width: 720px){
  .page-hero{
    min-height: 50vh;
    padding: 110px 20px 60px;
  }
  .page-hero h1{
    font-size: clamp(40px, 11vw, 68px);
    margin-bottom: 18px;
  }
  .page-hero__lede{ font-size: 16px; line-height: 1.55; }
  .page-hero__crumbs{ flex-wrap: wrap; gap: 8px; font-size: 10px; }
}

/* Page sections: tighter on narrow screens. */
@media (max-width: 720px){
  .page-section{ padding: 70px 20px; }
  .page-section__head{ margin-bottom: 40px; }
  .split-row + .split-row{ margin-top: 50px; }
  .split-row__copy h3{ font-size: clamp(24px, 6.5vw, 36px); }
  .split-row__copy p{ font-size: 15px; line-height: 1.6; }
}

/* CTA blocks: full-width buttons on mobile. */
@media (max-width: 560px){
  .cta-block{ padding: 60px 20px; }
  .cta-block h3{ font-size: clamp(28px, 8vw, 44px); }
  .cta-block .ctas{ flex-direction: column; width: 100%; gap: 10px; }
  .cta-block .btn{ width: 100%; justify-content: space-between; }
}

/* Reserve section padding + buttons on mobile. */
@media (max-width: 560px){
  .reserve{ padding: clamp(60px, 16vw, 120px) 0; }
  .reserve h2{ font-size: clamp(40px, 10vw, 60px); }
  .reserve__card{ padding: 32px 24px; }
  .reserve__step{ gap: 14px; padding: 18px 0; }
  .reserve__step h4{ font-size: 13px; }
  .reserve__step p{ font-size: 12.5px; }
}

/* Reserve picker cards: stack vertically on the narrowest devices. */
@media (max-width: 380px){
  .reserve__pickCard{ grid-template-columns: 1fr; }
  .reserve__pickMedia{ aspect-ratio: 16/9; min-height: 0; }
}

/* Tech rail: nav buttons land above cards on narrow. */
@media (max-width: 600px){
  .tech{ padding: 90px 0 80px; }
  .tech__nav{ flex-wrap: wrap; gap: 16px; }
  .tech__progress{ width: 72px; }
  .tech__btn{ width: 48px; height: 48px; }
  .tech__body h3{ font-size: 24px; }
  .tech__stats{ grid-template-columns: 1fr 1fr; }
  .tech__stats li:nth-child(3){ grid-column: 1 / -1; border-top: 1px solid #232220; padding-top: 14px; }
}

/* Models section spacing. */
@media (max-width: 880px){
  .models{ padding: 60px 0 0; }
  .models__head{ margin-bottom: 32px; padding: 0 20px; }
}

/* Ownership panels: tighter padding, more compact list. */
@media (max-width: 720px){
  .ownership__panel{ min-height: 0; padding: 64px 24px; }
  .ownership__panel h2{ font-size: clamp(36px, 10vw, 60px); margin-bottom: 20px; }
  .ownership__panel p{ font-size: 15px; }
  .ownership__list li{ font-size: 12px; }
}

/* Newsletter: stack form on narrow. */
@media (max-width: 560px){
  .newsletter{ padding: clamp(38px, 8.8vw, 64px) 20px; }
  .newsletter h2{ font-size: clamp(28px, 7.5vw, 40px); }
  .newsletter__form{
    flex-direction: column;
    gap: 12px;
    border-bottom: 0;
  }
  .newsletter__form input{
    border-bottom: 1px solid var(--brass);
    width: 100%;
    text-align: left;
  }
  .newsletter__form button{
    align-self: flex-start;
    padding: 12px 18px;
    border: 1px solid var(--brass);
  }
}

/* Footer: cleaner mobile shape. */
@media (max-width: 720px){
  .footer{ padding: 56px 20px 28px; }
  .footer__bottom{
    gap: 16px;
    font-size: 10px;
  }
  .footer__bottom .social{ flex-wrap: wrap; justify-content: center; gap: 14px; }
  .footer__legal{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px 8px;
    line-height: 1.6;
  }
  .footer__legal .sep{ opacity: .35; }
}
/* Page-cards (Speedster/Roadster/Technology/etc. cross-links). */
@media (max-width: 720px){
  .page-cards{ gap: 20px; }
  .page-card__body{ padding: 22px 22px 24px; }
  .page-card h4{ font-size: 22px; }
}

/* Spec table compact at 880 not just 720. */
@media (max-width: 880px){
  .spec-table > div{ padding: 18px 0; font-size: 13px; }
}

/* Forms: keep input font >= 16px so iOS doesn't auto-zoom. */
.reserve__field input,
.reserve__field select,
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-size: 16px;
}

/* Larger tap targets on mobile drawer + cookie. */
@media (max-width: 720px){
  .nav__burger{ width: 48px; height: 48px; }
  .lb-drawer__menu a{ padding: 20px 24px; font-size: 17px; }
  .lb-cookies button{ padding: 14px 18px; min-height: 44px; }
}

/* Hero overlay brackets: pull closer on narrow so they don't feel marooned. */
@media (max-width: 720px){
  .bracket{ width: 16px; height: 16px; opacity: .35; }
  .bracket.tl, .bracket.tr{ top: 86px; }
  .bracket.bl, .bracket.br{ bottom: 60px; }
}

/* Portal hero stats: stack at narrow. */
@media (max-width: 560px){
  .portal__heroStats{ grid-template-columns: 1fr 1fr !important; }
  .portal__heroStat:nth-child(3){ grid-column: 1 / -1; }
}

/* Pedigree (About): collapse to single column on phones so the cells
   don't force-min-content-grow past the viewport. */
@media (max-width: 480px){
  .pedigree{ grid-template-columns: 1fr !important; }
  .pedigree__cell{ padding: 24px 22px; min-width: 0; }
  .pedigree__cell .role{ font-size: 12px; }
}
/* Universal guard: prevent any flex/grid child from forcing parent wider. */
.pedigree__cell{ min-width: 0; }
.tech-list__item > *{ min-width: 0; }
.portal__grid,
.portal__grid > *,
.portal__grid .card,
.portal__grid .summary__media{ min-width: 0; }

/* Portal: tighter padding at very narrow widths, summary media margin shrinks. */
@media (max-width: 480px){
  .portal__hero,
  .portal__grid{ padding: 28px 16px !important; }
  .card{ padding: 24px !important; }
  .summary__media{ margin: -24px -24px 20px !important; }
}

/* prefers-reduced-motion: pause heavy animations. */
@media (prefers-reduced-motion: reduce){
  .marquee__track,
  .hero__bg,
  .hero__title .line span,
  .hero__ticker .dot,
  .hero__ticker .scroll-line { animation: none !important; }
  *{ scroll-behavior: auto !important; }
}

/* ============ PRESS & MEDIA ============ */
.quote-wall{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(180,154,110,.18);
  border-top: 1px solid rgba(180,154,110,.18);
  border-bottom: 1px solid rgba(180,154,110,.18);
}
.quote-wall__item{
  background: var(--jet);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.quote-wall__item .mark{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: .6;
  color: var(--brass);
}
.quote-wall__item blockquote{
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 21px;
  line-height: 1.45;
  color: var(--bone);
  text-wrap: pretty;
  flex: 1;
}
.quote-wall__item cite{
  font-style: normal;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
}
@media (max-width: 880px){
  .quote-wall{ grid-template-columns: 1fr; }
}

.kit-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.kit-card{
  display: block;
  background: var(--graphite);
  text-decoration: none;
  color: inherit;
}
.kit-card__media{
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--jet);
}
.kit-card__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.kit-card:hover .kit-card__media img{ transform: scale(1.04); }
.kit-card__meta{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(180,154,110,.18);
  border-top: none;
}
.kit-card__meta .name{
  font-size: 13px;
  color: var(--bone);
}
.kit-card__meta .dl{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}
@media (max-width: 880px){
  .kit-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .kit-grid{ grid-template-columns: 1fr; }
}

.logo-sheet{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.logo-sheet__cell{
  border: 1px solid rgba(180,154,110,.22);
  display: grid;
  grid-template-rows: 1fr auto;
}
.logo-sheet__swatch{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 36px;
}
.logo-sheet__swatch--dark{ background: var(--jet); }
.logo-sheet__swatch--bone{ background: var(--bone); }
.logo-sheet__cell .cap{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid rgba(180,154,110,.22);
  font-size: 12px;
  color: var(--silver);
}
.logo-sheet__cell .cap .dl{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 880px){
  .logo-sheet{ grid-template-columns: 1fr; }
}

.press-kit-note{
  font-size: 13px;
  line-height: 1.7;
  color: var(--silver);
  max-width: 64ch;
}
.press__kitlink{
  margin: 42px 0 0;
  font-size: 14px;
  color: var(--silver);
  text-align: center;
}
.press__kitlink a{
  color: var(--brass);
  border-bottom: 1px solid var(--brass);
  text-decoration: none;
}

/* ============ JOURNAL ============ */
.journal-feature{
  max-width: 760px;
  margin: 0 auto;
}
.journal-feature__date{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
  display: block;
  margin-bottom: 18px;
}
.journal-feature h2{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--bone);
  margin: 0 0 34px;
}
.journal-feature h2 em{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass);
}
.journal-feature p{
  font-size: 17px;
  line-height: 1.8;
  color: var(--silver);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.journal-feature p:first-of-type::first-letter{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.1em;
  line-height: .8;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--brass);
}
.journal-feature .sig{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(180,154,110,.25);
}
.journal-feature .sig img{ height: 44px; width: auto; opacity: .9; }
.journal-feature .sig .who{ font-size: 13px; color: var(--bone); }
.journal-feature .sig .who small{ display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); margin-top: 4px; }

.journal-list{
  border-top: 1px solid rgba(180,154,110,.25);
}
.journal-list details{
  border-bottom: 1px solid rgba(180,154,110,.18);
}
.journal-list summary{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 28px;
  align-items: baseline;
  padding: 30px 6px;
  transition: background .25s;
}
.journal-list summary::-webkit-details-marker{ display: none; }
.journal-list summary:hover{ background: rgba(180,154,110,.05); }
.journal-list .no{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
}
.journal-list .t{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--bone);
  letter-spacing: -.01em;
}
.journal-list .t em{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass);
}
.journal-list .chev{
  font-size: 18px;
  color: var(--brass);
  transition: transform .3s ease;
}
.journal-list details[open] .chev{ transform: rotate(45deg); }
.journal-list .journal-body{
  max-width: 70ch;
  padding: 0 6px 40px calc(110px + 28px + 6px);
}
.journal-list .journal-body p{
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--silver);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.journal-list .journal-body .byline{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
  margin-top: 24px;
}
@media (max-width: 720px){
  .journal-list summary{ grid-template-columns: 1fr auto; }
  .journal-list .no{ grid-column: 1 / -1; }
  .journal-list .journal-body{ padding-left: 6px; }
}

.newsletter__archive{
  margin: 26px 0 0;
  font-size: 13px;
  color: var(--silver);
}
.newsletter__archive a{
  color: var(--brass);
  border-bottom: 1px solid var(--brass);
  text-decoration: none;
}

/* ============ MARQUE ============ */
.marque-stage{
  display: grid;
  place-items: center;
  padding: 90px 20px;
  border: 1px solid rgba(180,154,110,.22);
  background:
    radial-gradient(60% 80% at 50% 45%, rgba(154,138,98,.10), transparent 70%),
    var(--jet);
}
.marque-stage img{ height: clamp(160px, 24vw, 260px); width: auto; }
.marque-stage figcaption{
  margin-top: 36px;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tan);
  text-align: center;
}
.marque-places{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(180,154,110,.18);
  border: 1px solid rgba(180,154,110,.18);
}
.marque-places > div{
  background: var(--jet);
  padding: 34px 28px;
}
.marque-places .n{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--brass);
  margin-bottom: 14px;
}
.marque-places h4{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  color: var(--bone);
  margin: 0 0 10px;
}
.marque-places p{
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--silver);
  margin: 0;
}
@media (max-width: 880px){
  .marque-places{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .marque-places{ grid-template-columns: 1fr; }
}

/* Italic display text set 20% larger than its surrounding copy for optical balance. */
em, .display em, .h-section em, .hero__title em, .philosophy__body p em, .split-row__copy h3 em, .showcase__name em, .journal-feature h2 em, .page-hero h1 em{font-size:1.2em}
.philosophy__bg{font-size:clamp(280px,40vw,640px)}

/* ==============  BOTTOM NAV BAR (all pages)  ============== */
.nav{top:auto;bottom:clamp(14px,2vh,26px);left:50%;right:auto;transform:translateX(-50%);width:min(80%,var(--maxw));display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);--navh:clamp(52px,4.6vw,62px);height:var(--navh);padding:0;background:rgba(20,20,18,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid transparent;border-radius:999px;box-shadow:0 20px 50px rgba(0,0,0,.5);transition:border-color .4s var(--ease-brand),box-shadow .4s var(--ease-brand)}
.nav.scrolled{background:rgba(20,20,18,.9);height:var(--navh);padding:0;border-color:transparent}
.nav__brand{flex:0 0 auto;width:calc(var(--navh) + 2px);height:calc(var(--navh) + 2px);margin:-1px 0 -1px -1px;padding:0;display:grid;place-items:center;line-height:0;border:0;border-radius:999px}
.nav__brand img{display:block}
.nav__menu{display:contents}
/* Items hug their labels so the optical gap between links is identical;
   auto margins at both ends centre the whole run between mark and CTA. */
.nav__menu li{display:flex;align-items:center;flex:1 1 auto;min-width:0;justify-content:center}
.nav__menu a{display:flex;align-items:center;justify-content:center;line-height:1;font-size:clamp(10.5px,.78vw,12px);letter-spacing:.15em;padding:4px 0;white-space:nowrap}
.nav__cta{flex:0 0 auto;gap:0;align-self:stretch;display:flex;align-items:stretch;margin:-1px -1px -1px 0}
.nav__burger{align-self:center;flex:0 0 auto}
.nav__reserve{display:inline-flex;align-items:center;line-height:1;gap:9px;height:auto;align-self:stretch;margin:0;padding:0 clamp(20px,1.8vw,30px);border-radius:999px;background:var(--brass);color:#0E0E0E;font-family:var(--sans);font-size:clamp(10.5px,.78vw,12px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;transition:background .3s var(--ease-brand),color .3s}
/* Reserve is an outlined gold pill inside the bar, hard right. */
.nav__cta{position:static;margin:-1px -1px -1px 0;align-items:stretch}
.nav__reserve{justify-content:center;text-align:center;background:none;background-image:linear-gradient(to right,var(--brass) 0 50%,transparent 50% 100%);background-size:200.5% 100%;background-position:100% 0;background-repeat:no-repeat;border:1px solid var(--brass);color:var(--brass);box-shadow:none;transition:background-position .5s var(--ease-brand),color .3s var(--ease-brand)}
.nav__reserve:hover{color:#0E0E0E;background-position:0 0;border-color:var(--brass)}
@media (max-width:1400px){.nav{gap:clamp(9px,1.3vw,20px)}}
@media (max-width:1180px){.nav{width:min(92%,var(--maxw));gap:10px}.nav__menu a{letter-spacing:.1em}}
@media (max-width:960px){
.nav{--navh:54px;width:min(94%,var(--maxw));gap:8px}
.nav__menu{display:none}
/* Hamburger left, logo centred, short "Reserve" pill on the right. */
.nav__burger{order:1;position:static;margin:0 0 0 4px}
.nav__brand{order:2;position:absolute;left:50%;transform:translateX(-50%);margin:0;flex:0 0 auto}
.nav__cta{order:3;display:flex;margin:-1px -1px -1px auto}
.nav__reserve{padding:0 18px;white-space:nowrap;font-size:10.5px;letter-spacing:.14em}
.nav__reserve-word,.nav__reserve span[aria-hidden]{display:none}
}

/* ==============  HAMBURGER (mobile)  ============== */
.nav__burger{border:0;background:none;box-shadow:none}
.nav.scrolled .nav__burger{border:0}
@media (max-width:960px){
.nav__burger{width:52px;height:52px;gap:7px}
.nav__burger span{width:26px;height:2px;background:var(--brass)}
}
@media (max-width:720px){.nav__burger{width:52px;height:52px}}


/* Page heroes fill the viewport above the fold on every page */
.page-hero{height:100svh;min-height:100svh;max-height:100svh;overflow:hidden;padding:clamp(100px,13vh,170px) var(--gutter) clamp(130px,16vh,190px);justify-content:flex-end}
.page-hero__inner{max-height:100%}
@media (max-width:880px){.page-hero{padding:96px 20px 150px}}
@media (max-width:720px){.page-hero{padding:90px 20px 140px}}
/* Short viewports: scale hero type so the content fits the capped height */
@media (max-height:820px){.page-hero{padding-top:clamp(80px,10vh,120px);padding-bottom:clamp(112px,14vh,150px)}.page-hero h1{font-size:clamp(34px,5.6vw,68px);margin-bottom:16px}.page-hero__lede{font-size:clamp(14px,1.4vw,17px)}.page-hero__crumbs{margin-bottom:18px}}
@media (max-height:640px){.page-hero{padding-top:72px;padding-bottom:104px}.page-hero h1{font-size:clamp(28px,4.6vw,46px)}.page-hero__lede{font-size:13.5px;line-height:1.55}}


/* ==============  SPLIT RESERVE (pop-up dialog + static band, one source)  ============== */
/* Dialog shell */
.rsv{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.rsv.open{display:flex}
.rsv__scrim{position:absolute;inset:0;background:rgba(8,8,7,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rsv__close{position:absolute;top:14px;right:16px;z-index:3;width:34px;height:34px;display:grid;place-items:center;border-radius:999px;border:1px solid rgba(248,246,241,.28);background:rgba(10,10,9,.45);color:var(--bone);font-size:17px;line-height:1;transition:border-color .25s,color .25s}
.rsv__close:hover{border-color:var(--brass);color:var(--brass)}
@keyframes rsvIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* Static band shell */
.rsv-band{padding:clamp(70px,7vw,110px) 20px;background:#101010;border-top:1px solid rgba(180,154,110,.2)}
.rsv-band__inner{max-width:var(--maxw,1320px);margin:0 auto}
.rsv-band__head{text-align:center;margin-bottom:clamp(28px,3.4vw,46px)}
.rsv-band__head h2{font-family:var(--font-sans);font-weight:300;font-size:clamp(30px,3.6vw,52px);line-height:1.06;letter-spacing:-.01em;margin:0;color:var(--bone)}
.rsv-band__head h2 em{font-family:var(--font-display);font-style:italic;color:var(--brass);font-size:1.2em}
/* Shared split geometry - 8/3 overall so each half is 4:3 */
.rsv__panel,.rsv-band__grid{position:relative;width:min(984px,94vw);margin:0 auto;aspect-ratio:3/1;display:grid;grid-template-columns:1fr 1fr;background:#141412;border:1px solid rgba(157,137,92,.3);border-radius:18px;overflow:hidden}
.rsv__panel{box-shadow:0 30px 80px rgba(0,0,0,.6);animation:rsvIn .35s var(--ease-brand)}
.rsv-band__grid{box-shadow:0 40px 90px rgba(0,0,0,.6)}
.rsv__opt,.rsv-band__opt{position:relative;display:block;text-align:left;overflow:hidden;text-decoration:none}
.rsv__body,.rsv-band__body{position:absolute;left:33.33%;bottom:33.33%;transform:translate(-50%,50%);z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:80%}
.rsv__opt+.rsv__opt,.rsv-band__opt+.rsv-band__opt{border-left:1px solid rgba(157,137,92,.22)}
.rsv__opt img,.rsv-band__opt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .4s}
.rsv__opt::after,.rsv-band__opt::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 8%,rgba(10,10,9,.52) 46%,rgba(10,10,9,.92))}
.rsv__opt:hover img,.rsv-band__opt:hover img{transform:scale(1.05);opacity:.78}
.rsv__body>*,.rsv-band__body>*{position:relative;z-index:2}
.rsv__name,.rsv-band__name{font-family:var(--font-display);font-style:italic;font-size:clamp(38px,4.4vw,64px);line-height:1;letter-spacing:0;text-transform:none;color:var(--brass);text-shadow:0 2px 18px rgba(8,8,7,.7)}
.rsv__btn,.rsv-band__btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border-radius:999px;background:var(--brass);color:#0E0E0E;font-family:var(--font-sans);font-size:clamp(10.5px,.8vw,12px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1;transition:background .3s}
/* Stack the two panels the moment a half panel is too narrow to carry
   "Reserve your Speedster" on one line. Measured at 10.5px with the brand
   letter spacing the label needs 258.5px; a half panel gives it that at 825px
   of viewport, and between there and about 900px the button sits flush to the
   panel frame. So 900px is the switch: above it the label always fits with a
   gutter, below it the panels go one above the other. */
@media (max-width:900px){
  .rsv__panel,.rsv-band__grid{aspect-ratio:auto;grid-template-columns:1fr}
  .rsv__opt,.rsv-band__opt{aspect-ratio:3/2;min-height:0}
  .rsv__opt+.rsv__opt,.rsv-band__opt+.rsv-band__opt{border-left:none;border-top:1px solid rgba(157,137,92,.22)}
  /* The body is centred on 33% of the panel, so a wide button pushes its left edge
     almost to the frame. Anchor it a fixed distance in instead, and the gap stays the
     same whatever the label says. */
  .rsv__body,.rsv-band__body{left:28px;transform:translate(0,50%);max-width:calc(100% - 56px)}
  /* Stacked, the chooser modal is twice as tall as it was wide. Let it scroll,
     and centre it with auto margins rather than align-items, which would put
     the top of an oversized panel out of reach. */
  .rsv{align-items:flex-start;overflow-y:auto}
  .rsv__panel{margin:auto}
}
/* Just "Reserve" on phones, where a full width panel is still narrow. */
@media (max-width:640px){
  .rsv__word{display:none}
}

/* Spec bars size to however many figures a car lists */
.showcase__specs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media (max-width:880px){.showcase__specs{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}}
/* Two columns leaves the Speedster's fifth figure orphaned on a row of its own, and
   .spec-item keeps a right padding it no longer needs once the dividers are dropped.
   On a phone each figure becomes its own row, value left and label right, which reads
   evenly whether a car lists four figures or five. */
@media (max-width:880px){
  .showcase__specs{ grid-template-columns:1fr; gap:0; padding:18px var(--gutter); }
  .spec-item{
    flex-direction:row; align-items:baseline; justify-content:space-between;
    gap:16px; padding:13px 0;
    border-right:none; border-bottom:1px solid rgba(154,138,98,.18);
  }
  .spec-item:last-child{ border-bottom:none; }
  .spec-item .v{ font-size:22px; }
  .spec-item .l{ text-align:right; }
}

/* Hero CTA pair (model pages) */
.page-hero__ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(26px,3vw,38px)}
@media (max-width:560px){.page-hero__ctas{flex-direction:column;gap:10px}.page-hero__ctas .btn{width:100%;justify-content:space-between}}

/* Standalone showcase sections on model pages sit flush against neighbours */
.models--flush{padding:0}

/* Technology page: model figure pair */
.tech-figures{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,70px)}
.tech-figures__car h3{font-family:var(--font-display);font-style:italic;font-size:clamp(30px,3vw,44px);color:var(--brass);margin:0 0 20px;line-height:1}
.tech-figures__car .spec-table{margin-bottom:26px}
@media (max-width:760px){.tech-figures{grid-template-columns:1fr}}

/* Scroll reveal (applied by chrome.js so no-JS pages stay visible) */
/* Everything settles the same way: half a second of stillness, then a two
   second dissolve. chrome.js sets the transition delay per element, adding
   the 500ms to its stagger, so the pause survives the stagger. */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 2s var(--ease-brand) .2s,transform 2s var(--ease-brand) .2s}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* Text dissolve. Runs of text that no block reveal already covers fade in on
   the same half second pause and two second curve. The class is added by
   chrome.js, never in the markup, so a script that never runs cannot leave
   text permanently invisible. The reserve pages and the footer are exempt. */
.lb-fade{opacity:0;transition:opacity 2s var(--ease-brand) .2s}
.lb-fade.is-lit{opacity:1}
.page-reserve .lb-fade,.footer .lb-fade,.lb-sheet .lb-fade,.lb-drawer .lb-fade{opacity:1}
@media (prefers-reduced-motion:reduce){.lb-fade{opacity:1;transition:none}}


/* ==========================================================================
   RESPONSIVE + LEGIBILITY POLISH (audit pass)
   Floors micro-type at 10px, keeps interactive text at 11px+, and gives every
   tappable item a 44px target on touch widths.
   ========================================================================== */
.mp-card__stats span,.reserve__pickBody .label,.hero__stat .l{font-size:10px}
.nav__menu a{font-size:clamp(10.5px,.78vw,12px)}
.nav__reserve{font-size:clamp(10.5px,.78vw,12px)}
.rsv__btn,.rsv-band__btn{font-size:clamp(10.5px,.8vw,12px)}
.footer__bottom{font-size:11px}
.page-hero__crumbs{font-size:10.5px}

@media (max-width:900px){
  /* Touch targets */
  .lb-drawer__menu a{min-height:48px;display:flex;align-items:center}
  .lb-drawer__brand{min-height:44px;display:inline-flex;align-items:center}
  .footer__legal a,.footer__bottom .social a{display:inline-block;padding:9px 0;min-height:44px}
  .footer__legal,.footer__bottom .social{row-gap:0}
  .page-hero__crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .contact-aside p a{display:inline-flex;align-items:center;min-height:44px}
  .auth__back,.auth__brand,.auth__tab{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .arrow-cta{display:inline-flex;align-items:center;min-height:44px}
  .kit-card__meta .dl,.logo-sheet__cell .cap .dl{min-height:44px;display:inline-flex;align-items:center}
  .btn,.btn-primary,.btn-ghost{min-height:48px}
  /* Nothing scrolls sideways */
  html,body{overflow-x:hidden}
}
@media (max-width:560px){
  .footer__bottom{gap:14px}
}

/* Gold buttons: white wipes in from the left on hover, text stays black.
   One rule set for every gold CTA on the site. */
.btn-primary,.rsv__btn,.rsv-band__btn{background-color:var(--brass);background-image:linear-gradient(to right,var(--bone) 0 50%,var(--brass) 50% 100%);background-size:200.5% 100%;background-position:100% 0;background-repeat:no-repeat;border-color:var(--brass);color:#0E0E0E;transition:background-position .5s var(--ease-brand),border-color .35s var(--ease-brand),color .3s var(--ease-brand)}
.btn-primary:hover,.rsv__btn:hover,.rsv-band__btn:hover,.rsv__opt:hover .rsv__btn,.rsv-band__opt:hover .rsv-band__btn{background-position:0 0;background-color:var(--bone);background-image:linear-gradient(to right,var(--bone) 0 50%,var(--brass) 50% 100%);border-color:var(--bone);color:#0E0E0E}
@media (prefers-reduced-motion:reduce){.btn-primary,.nav__reserve,.rsv__btn,.rsv-band__btn{transition-duration:.01ms}}
.btn-primary .arrow{transition:transform .35s var(--ease-brand)}
.btn-primary:hover .arrow{width:18px;transform:translateX(5px)}

/* ==============  FAQ (shared, appended above the footer)  ============== */
.lb-faq{padding:clamp(70px,8vw,120px) var(--gutter) clamp(80px,9vw,130px);background:#141412;border-top:1px solid rgba(157,137,92,.16)}
.lb-faq__inner{max-width:min(920px,var(--maxw));margin:0 auto}
.lb-faq__head{text-align:center;margin-bottom:clamp(34px,4vw,56px)}
.lb-faq__head h2{font-family:var(--font-display);font-size:clamp(32px,4vw,54px);line-height:1.05;margin:14px 0 0;color:var(--bone)}
.lb-faq__head h2 em{font-style:italic;color:var(--brass)}
.lb-faq__head p{margin:16px auto 0;max-width:52ch;font-size:14px;line-height:1.6;color:rgba(248,246,241,.62);text-wrap:pretty}
.lb-faq__list{display:grid;gap:0;border-top:1px solid rgba(248,246,241,.12)}
.lb-faq__item{border-bottom:1px solid rgba(248,246,241,.12)}
.lb-faq__item summary{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:clamp(20px,2.2vw,28px) 2px;cursor:pointer;list-style:none}
.lb-faq__item summary::-webkit-details-marker{display:none}
.lb-faq__q{font-family:var(--font-sans);font-size:clamp(14px,1.15vw,17px);font-weight:500;letter-spacing:.005em;color:var(--bone);transition:color .3s var(--ease-brand);text-wrap:pretty}
.lb-faq__item summary:hover .lb-faq__q,.lb-faq__item[open] .lb-faq__q{color:var(--brass)}
.lb-faq__mark{position:relative;flex:0 0 auto;width:16px;height:16px}
.lb-faq__mark::before,.lb-faq__mark::after{content:"";position:absolute;inset:50% 0 auto;height:1px;background:var(--brass);transition:transform .35s var(--ease-brand),opacity .35s}
.lb-faq__mark::after{transform:rotate(90deg)}
.lb-faq__item[open] .lb-faq__mark::after{transform:rotate(0deg);opacity:0}
.lb-faq__a{padding:0 clamp(30px,4vw,64px) clamp(22px,2.4vw,30px) 0}
.lb-faq__a p{margin:0;font-size:14px;line-height:1.7;color:rgba(248,246,241,.66);text-wrap:pretty}
.lb-faq__foot{margin:clamp(30px,3.4vw,44px) 0 0;text-align:center;font-size:12px;letter-spacing:.02em;color:rgba(248,246,241,.5)}
.lb-faq__foot a{color:var(--brass)}
.lb-faq__foot a:hover{color:var(--bone)}
@media (max-width:640px){.lb-faq__a{padding-right:0}}

/* ==============  CONTACT HEADER (no hero image)  ============== */
.contact-head{padding:clamp(70px,8vw,120px) var(--gutter) clamp(26px,3vw,44px);background:var(--jet,#141412)}
.contact-head__inner{max-width:var(--maxw);margin:0 auto}
.contact-head h1{margin:18px 0 0;font-family:var(--font-display);font-size:clamp(38px,5.4vw,78px);line-height:1.02;letter-spacing:-.02em;color:var(--bone)}
.contact-head h1 em{font-style:italic;color:var(--brass)}
.contact-head .page-hero__lede{margin:22px 0 0;max-width:56ch}
.contact-head + .page-section{padding-top:clamp(28px,3vw,44px)}

/* ==============  FAQ PAGE  ============== */
.faq-page{padding:clamp(40px,4vw,60px) var(--gutter) clamp(90px,10vw,140px);background:#141412}
.faq-page__inner{max-width:min(920px,var(--maxw));margin:0 auto}
.faq-page__group+.faq-page__group{margin-top:clamp(44px,5vw,72px)}
.faq-page__gtitle{margin:0 0 6px;font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}
.faq-page__list{border-top:1px solid rgba(248,246,241,.12)}
.faq-page__foot{margin:clamp(40px,4.4vw,60px) 0 0;font-size:12.5px;line-height:1.7;color:rgba(248,246,241,.5)}
.faq-page__foot a{color:var(--brass)}
.faq-page__foot a:hover{color:var(--bone)}

/* ==============  CONSENT PANEL  ============== */
.lb-cookies__actions button{white-space:nowrap}
.lb-cp{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.lb-cp__scrim{position:absolute;inset:0;background:rgba(10,10,9,.72);backdrop-filter:blur(3px)}
.lb-cp__box{position:relative;width:min(560px,100%);max-height:min(86vh,760px);overflow:auto;background:var(--jet,#141412);border:1px solid rgba(157,137,92,.35);padding:clamp(22px,3vw,34px);color:var(--bone)}
.lb-cp__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.lb-cp__head h2{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em}
.lb-cp__x{background:none;border:0;color:rgba(248,246,241,.55);font-size:26px;line-height:1;cursor:pointer;padding:0 2px}
.lb-cp__x:hover{color:var(--brass)}
.lb-cp__lede{margin:12px 0 22px;font-size:12.5px;line-height:1.65;color:rgba(248,246,241,.62);text-wrap:pretty}
.lb-cp__cat{border-top:1px solid rgba(248,246,241,.12)}
.lb-cp__row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:14px 0;cursor:pointer}
.lb-cp__row b{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.lb-cp__desc{display:block;margin-top:4px;font-size:11.5px;line-height:1.55;color:rgba(248,246,241,.5)}
.lb-cp__row input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--brass)}
.lb-cp__foot{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(248,246,241,.12)}
.lb-cp__foot button{flex:1 1 140px;font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:13px 16px;min-height:44px;border:1px solid rgba(248,246,241,.28);background:none;color:var(--bone);cursor:pointer;transition:border-color .25s ease,color .25s ease,background .25s ease}
.lb-cp__foot button:hover{border-color:var(--brass);color:var(--brass)}
.lb-cp__foot button[data-consent-act="save"]{background:var(--brass);border-color:var(--brass);color:var(--jet)}
.lb-cp__foot button[data-consent-act="save"]:hover{background:var(--tan);border-color:var(--tan);color:var(--jet)}
.lb-cp__legal{margin:18px 0 0;font-size:11px;line-height:1.6;color:rgba(248,246,241,.45)}
.lb-cp__legal a{color:var(--brass)}
.lb-cp__legal a:hover{color:var(--bone)}
@media (max-width:560px){.lb-cp{padding:12px}.lb-cp__foot button{flex:1 1 100%}}
.newsletter__consent{display:flex;align-items:flex-start;gap:10px;max-width:60ch;margin:16px auto 0;text-align:left;font-size:11.5px;line-height:1.55;color:var(--grey-light,rgba(248,246,241,.55));cursor:pointer}
.newsletter__consent input{flex:0 0 auto;width:16px;height:16px;margin-top:1px;accent-color:var(--brass)}
.newsletter__consent a{color:var(--brass)}
.newsletter__consent a:hover{color:var(--bone)}
.contact-form label.newsletter__consent{display:flex;align-items:flex-start;gap:10px}


/* ---- Opening splash ------------------------------------------------------
   The first load of a session on the home page only: the mark flashes on a
   dark ground, the film restarts as the ground lifts, and the nav pill rises
   into place from the bottom edge. Driven by CSS animations that finish in
   visibility:hidden, so a script that never runs cannot leave the curtain
   down. The inline gate in index.html adds .lb-splash-on for one load. ----- */
.lb-splash{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:#161614;animation:lbSplashOut .7s var(--ease-brand) 2.2s both}
/* Symmetric easing here, not the brand curve: --ease-brand is a strong
   expo-out and front-loads the fade so hard that a slow breath reads as a
   flash. This one rises and falls evenly. */
.lb-splash__mark{width:clamp(44px,4.6vw,62px);height:auto;animation:lbSplashBreath 2.2s cubic-bezier(.45,0,.55,1) both}
html:not(.lb-splash-on) .lb-splash{display:none}
/* One slow breath: in, a short hold, out. Then the ground goes. */
@keyframes lbSplashBreath{
  0%{opacity:0;transform:scale(.97)}
  40%{opacity:1;transform:scale(1)}
  60%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.02)}
}
@keyframes lbSplashOut{0%{opacity:1}99%{opacity:0;visibility:visible}100%{opacity:0;visibility:hidden}}
.lb-splash-on .nav{animation:lbNavRise .95s var(--ease-brand) 2.5s both}
@keyframes lbNavRise{0%{transform:translate(-50%,150%);opacity:0}30%{opacity:1}100%{transform:translateX(-50%);opacity:1}}
.lb-splash-on .hero__bg{animation:lbHeroWake 2.8s var(--ease-brand) 2.2s both}
@keyframes lbHeroWake{0%{transform:scale(1.05)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .lb-splash{animation:lbSplashOut .3s linear both}
  .lb-splash__mark{animation:none}
  .lb-splash-on .nav,.lb-splash-on .hero__bg{animation:none}
}