/* Jai's story unfolds behind the car; the products follow in normal flow. */
.home-about {
  --about-space:clamp(40px,4vw,70px);
  --about-column-gap:clamp(24px,3.4vw,65px);
  --about-column-width:calc((100% - var(--gutter) * 2 - var(--about-column-gap)) / 2.05);
  --about-leading-space:var(--about-second-top,clamp(440px,42vw,690px));
  position:relative; isolation:isolate; padding:var(--about-space) var(--gutter); background:var(--surface-dark);
}
/* One continuous wall passes behind the slower reading surfaces. Its wash is
   local to the opening, not repeated along the length of the story. */
.about-backdrop { position:absolute; z-index:0; inset:0; top:calc(-1 * var(--about-wall-inset,0px)); pointer-events:none; overflow:hidden; background:var(--surface-dark); }
.about-backdrop::before { content:''; position:absolute; inset:0; background:url('/assets/images/about-wall.webp') center / 100% 100% no-repeat; opacity:.65; }
.about-backdrop::after { content:''; position:absolute; top:calc(var(--about-wall-inset,0px) + var(--about-space) + var(--about-leading-space) / 2); right:calc(var(--gutter) - var(--about-column-width) * .4); width:calc(var(--about-column-width) * 1.8); height:clamp(520px,48vw,900px); transform:translateY(-50%); background:radial-gradient(ellipse at 50% 50%,#0046ff99 0%,#073dba66 22%,#10234f70 43%,transparent 70%); }
.about-backdrop h2 { position:absolute; z-index:1; top:calc(var(--about-wall-inset,0px) + var(--about-space) + var(--about-leading-space) / 2); right:var(--gutter); width:var(--about-column-width); margin:0; transform:translateY(-50%); text-align:center; font-size:clamp(32px,3.3vw,58px); font-weight:var(--weight-heading,500); line-height:1.1; letter-spacing:var(--tracking-display,-.035em); color:var(--background-main); }
.about-backdrop h2:focus { outline:none; }
.about-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; grid-template-rows:auto 1fr; align-items:start; column-gap:var(--about-column-gap); row-gap:clamp(44px,4vw,76px); }
.about-wing { min-width:0; }
.about-wing--left { grid-column:1; }
.about-wing--right { grid-column:2; grid-row:1 / 3; margin-top:var(--about-leading-space); }
.about-wing--last { grid-row:2; }
.about-panel { position:relative; isolation:isolate; padding:clamp(28px,3.5vw,64px); color:var(--text-main); translate:0 var(--about-lift,0px); }
.about-panel::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--background-main); }
.about-panel .eyebrow { color:#454a52; margin-bottom:18px; }
.about-panel h3 { font-size:clamp(25px,2.1vw,36px); line-height:1.15; }
.about-panel--intro h3 { font-size:clamp(36px,3.8vw,64px); }
.about-panel p:not(.eyebrow) { max-width:43ch; font-size:clamp(14px,1.05vw,17px); line-height:1.8; color:#34383f; }
.about-panel h3 + p { margin-top:20px; }
.about-panel--intro { display:flex; flex-direction:column; gap:30px; min-height:520px; padding-bottom:clamp(46px,5vw,88px); }
.about-panel--intro::before { clip-path:polygon(30px 0,100% 0,100% calc(100% - 80px),calc(100% - 80px) 100%,0 100%,0 52px); }
.about-introduction { margin-block:0; }
.about-panel > .about-story { margin-top:24px; }
.about-panel--intro > .about-story { margin-top:0; }
.about-panel .about-story p { max-width:54ch; font-size:clamp(15px,1.12vw,18px); line-height:1.75; }
.about-story p + p { margin-top:18px; }
.about-spark { width:clamp(72px,6vw,105px); height:auto; align-self:flex-start; margin-top:auto; }
/* The long upper arm and swept lower notch echo the spark without clipping
   copy into the narrow points of the actual mark. The surface alone is cut. */
.about-panel--spark { display:flex; flex-direction:column; justify-content:center; padding-block:62px 72px; min-height:295px; }
.about-panel--spark::before { clip-path:polygon(0 50px,66% 50px,100% 0,87% 88px,100% 88px,100% calc(100% - 64px),40% calc(100% - 64px),13% 100%,23% calc(100% - 64px),0 calc(100% - 64px)); }
.about-panel--spark h3 + p { margin-top:14px; }
.about-panel--blue { color:var(--background-main); padding-block:clamp(34px,3vw,54px); }
.about-panel--blue::before { background:linear-gradient(110deg,#10234f 0%,#073dba 60%,#0046ff 100%); clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px); }
.about-panel--blue .eyebrow { color:#d9e5ff; }
.about-panel--blue p:not(.eyebrow) { color:#f5f5f2; }
.about-panel h2:focus { outline:none; }

/* The foreground travels continuously at 44% of native scroll. Natural card
   heights determine the spacing; there are no separate holds or snap points. */
.is-reading .about-backdrop { bottom:auto; height:calc(var(--about-reading-distance) + var(--hero-panel-height) + var(--about-wall-inset,0px)); transform:translate3d(0,var(--about-wall-offset,0px),0); }
.is-reading .about-panel { filter:brightness(calc(.62 + var(--about-focus,1) * .38)); }
.is-reading .about-panel--blue { filter:brightness(calc(.76 + var(--about-focus,1) * .24)); }
.is-reading .about-panel:focus-within { filter:none; }

/* A native scroll track supplies touch momentum, keyboard reachability and a
   working no-script version. Only desktop dragging needs an enhancement. */
.lineup-carousel { padding-inline:0; padding-block:clamp(65px,7vw,120px); }
.lineup-carousel > .section-heading { margin-inline:var(--gutter); }
.lineup-track {
  position:relative; display:flex; gap:clamp(22px,3vw,56px); width:100%;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter); scrollbar-width:none;
  padding:8px var(--gutter) 12px; -webkit-overflow-scrolling:touch;
}
.lineup-track::-webkit-scrollbar { display:none; }
.lineup-track:focus-visible { outline-offset:-4px; }
.lineup-track > .preview-product {
  display:grid; grid-template-columns:1.22fr 1fr; flex:0 0 min(78vw,1200px);
  scroll-snap-align:start; min-width:0; border:1px solid #373737;
  background:var(--surface-dark); touch-action:pan-x pan-y;
}
.lineup-track .preview-media { aspect-ratio:1.4; min-height:100%; }
.lineup-track .preview-media img { user-select:none; -webkit-user-drag:none; }
.lineup-track .preview-caption {
  flex-direction:column; align-items:flex-start; justify-content:center;
  gap:0; margin:0; padding:clamp(26px,3.1vw,56px);
}
.lineup-track .preview-caption > .eyebrow { color:var(--soft-grey); font-size:10px; margin-bottom:25px; }
.lineup-track .preview-caption h3 { font-size:clamp(28px,2.7vw,46px); line-height:1.15; }
.lineup-track .preview-caption .label-reserve { white-space:normal; }
.preview-description { max-width:32ch; font-size:clamp(13px,1vw,16px); line-height:1.8; margin-top:23px; color:var(--soft-grey); }
.lineup-track .preview-caption > .preview-concept { font-size:10px; margin-top:32px; color:#b6b6b6; }
.lineup-toolbar { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; margin:30px var(--gutter) 0; }
.lineup-browse { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.lineup-browse > p { color:#b6b6b6; font-size:11px; }
.lineup-controls { display:flex; gap:10px; }
.lineup-control { min-width:88px; }
.lineup-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.lineup-track.is-draggable { cursor:grab; }
.lineup-track.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.lineup-track.is-dragging * { cursor:grabbing; }

@media (max-width:1100px) {
  .about-panel { padding:32px; }
  .about-panel--intro { min-height:520px; padding-bottom:62px; }
  .about-panel--spark { padding-block:70px 82px; min-height:330px; }
  .lineup-track > .preview-product { flex-basis:85vw; }
  .lineup-track .preview-caption { padding:28px; }
}
@media (max-width:767px) {
  .home-about { --about-space:35px; --about-leading-space:112px; }
  .about-grid { grid-template-columns:1fr; grid-template-rows:none; gap:70px; padding-top:var(--about-leading-space); }
  .about-wing--left,.about-wing--right,.about-wing--last { grid-column:auto; grid-row:auto; margin-top:0; }
  .about-backdrop h2 { left:var(--gutter); right:var(--gutter); width:auto; font-size:34px; }
  .about-backdrop::after { right:-20%; width:140%; height:580px; }
  .about-panel { padding:28px; }
  .about-panel--intro { min-height:0; gap:28px; padding-bottom:55px; }
  .about-panel--intro::before { clip-path:polygon(24px 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%,0 24px); }
  .about-panel .eyebrow { font-size:10px; margin-bottom:13px; }
  .about-panel h3 { font-size:26px; }
  .about-panel--intro h3 { font-size:38px; }
  .about-panel p:not(.eyebrow) { font-size:14px; line-height:1.75; }
  .about-panel .about-story p { font-size:15px; line-height:1.75; }
  .about-panel > .about-story { margin-top:20px; }
  .about-panel--intro > .about-story { margin-top:0; }
  .about-spark { position:absolute; width:38px; right:28px; top:27px; }
  .about-panel--intro > div:first-child { padding-right:35px; }
  .about-panel--spark { min-height:290px; padding-block:62px 78px; }
  .about-panel--blue { padding-block:36px; }
  .about-panel h3 + p { margin-top:14px; }
  .lineup-carousel { padding-block:58px; }
  .lineup-track { gap:18px; }
  .lineup-track > .preview-product { grid-template-columns:1fr; flex-basis:calc(100vw - var(--gutter) * 2 - 20px); }
  .lineup-track .preview-media { aspect-ratio:1.28; min-height:0; }
  .lineup-track .preview-caption { padding:25px; }
  .lineup-track .preview-caption > .eyebrow { margin-bottom:15px; }
  .lineup-track .preview-caption h3 { font-size:29px; }
  .preview-description { font-size:13px; margin-top:14px; }
  .lineup-track .preview-caption > .preview-concept { margin-top:22px; }
  .lineup-toolbar { align-items:stretch; flex-direction:column; gap:23px; margin-top:24px; }
  .lineup-browse { justify-content:space-between; gap:16px; }
  .lineup-browse > p { max-width:10ch; line-height:1.6; }
  .lineup-toolbar > .button { align-self:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .about-panel { translate:none; filter:none !important; }
  .about-backdrop { transform:none !important; }
}
@media (forced-colors:active) { .about-panel { filter:none !important; } .about-backdrop::before,.about-backdrop::after { display:none; } }
@media print {
  .about-panel { translate:none; filter:none !important; }
  .about-backdrop { position:static; transform:none !important; height:auto !important; }
  .about-backdrop::before,.about-backdrop::after { display:none; }
  .about-backdrop h2 { position:static; width:auto; transform:none; color:inherit; margin-bottom:24px; }
  .about-grid { display:block; padding-top:0; }
  .about-wing,.is-reading .about-wing--right { margin:0 0 22px; }
  .lineup-track { display:grid; overflow:visible; padding:0; }
  .lineup-track > .preview-product { break-inside:avoid; }
  .lineup-controls,.lineup-browse > p { display:none; }
}