/* hero copy width for this page */
.hl2{max-width:72ch}
/* compact hero: no fullscreen, matches News/Contact/Legal */
/* ===== ABOUT: STORY / AUTOMOTIVE HERITAGE ===== */
.story-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(440px,1fr);
  gap:clamp(40px,5.5vw,88px);
  align-items:center;
}
.story-copy{min-width:0}
.story-copy .sec-head{
  margin:0;
  padding-top:0;
}
.story-copy .sec-head .fill{
  max-width:13ch;
  margin-bottom:clamp(24px,2.8vw,38px);
}
.story-copy .lead{max-width:58ch}
.story-copy .lead:last-child{margin-top:clamp(20px,2.2vw,30px)}
.story-gallery{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.25vw,18px);
  align-self:center;
}
.story-shot{
  position:relative;
  display:block;
  margin:0;
  overflow:hidden;
  border-radius:clamp(15px,1.55vw,24px);
  aspect-ratio:3/2;
  background:#e7ebf1;
  border:1px solid rgba(9,20,39,.12);
  box-shadow:none;
  isolation:isolate;
}
.story-shot:first-child{
  grid-column:1/-1;
  aspect-ratio:16/10;
}
.story-shot::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:none;
}
.story-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.006);
  transition:transform .7s var(--ease),filter .7s var(--ease);
}
.story-shot:first-child img{object-position:center 54%}
.story-shot:nth-child(2) img{object-position:center 54%}
.story-shot:nth-child(3) img{object-position:center 50%}
@media (hover:hover) and (pointer:fine){
  .story-shot:hover img{transform:scale(1.035);filter:saturate(1.04) contrast(1.02)}
}
@media(max-width:1100px){
  .story-layout{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(38px,6vw,64px);
  }
  .story-copy .sec-head{max-width:820px}
  .story-copy .sec-head .fill{max-width:18ch}
  .story-copy .lead{max-width:72ch}
  .story-gallery{
    width:100%;
    max-width:900px;
    margin-inline:auto;
  }
}
@media(max-width:600px){
  .story-layout{gap:34px}
  .story-copy .sec-head .fill{max-width:15ch;margin-bottom:22px}
  .story-gallery{gap:9px}
  .story-shot{border-radius:14px}
}
@media(max-width:400px){
  .story-gallery{gap:7px}
  .story-shot{border-radius:12px}
}

/* ===== about-cta-center ===== */
/* center fix: absolute .ltop spans full line width and inherits center alignment,
   so the bright layer lines up with the .lbase ghost layer (no doubling) */
.cta-center .shell{max-width:720px}
.cta-center .cta-copy{max-width:60ch}

/* ===== about-values-3col ===== */
/* Our Values (3 cards). Force 3-col layout + internal dividers regardless of the
   shared 4-card breakpoints. */
#values .meta{grid-template-columns:repeat(3,minmax(0,1fr))}
#values .mg-vl{display:block;left:0}
#values .mg-v{display:block;left:33.333%}
#values .mg-v2{display:block;left:66.666%}
#values .mg-v3{display:none}
/* desktop 3-col: no per-card row-divider glow (vertical mg lines handle it) */
#values .meta > div::before{display:none}
#values .meta > div:nth-of-type(n+3){border-top:0}

/* pre-mobile: shared forces 2col + a stray left vertical line at 641-1020.
   Override to keep clean single-column-like behavior is done at 768 below;
   for 769-1020 we keep 3 columns (handled above) so nothing extra needed. */

/* mobile: single column with glowing horizontal dividers between cards (2nd, 3rd) */
@media(max-width:768px){
  #values .meta{grid-template-columns:1fr}
  #values .mg-vl,#values .mg-v,#values .mg-v2,#values .mg-v3{display:none}
  #values .meta > div{border-left:0;border-top:0;padding:24px 0}
  #values .meta > div + div{border-top:1px solid var(--border)}
  /* glowing fill on top border of 2nd and 3rd card, driven by scroll vars */
  #values .meta > div + div::before{content:"";display:block;position:absolute;top:-1px;left:0;height:2px;
    border-radius:2px;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(60,99,255,.55),rgba(60,99,255,.95));
    box-shadow:0 0 14px 1px rgba(60,99,255,.7),0 0 5px rgba(60,99,255,.85)}
  #values .meta > div:nth-of-type(2)::before{width:var(--mgv,0%)}
  #values .meta > div:nth-of-type(3)::before{width:var(--mgv2,0%)}
}

/* Inside .closing the Values section runs straight into the CTA band, which
   brings its own generous top padding. Two lots of it left a dead gap. */
.closing #values{padding-bottom:0}