/* ===== Hero: video (left) + model nav & info (right) ===== */
.hero{background:var(--beige)}

/* RTL: the first column renders on the right. Tracks are capped rather than
   fixed so the hero scales below 1920 without pushing the video off the left
   edge; at the design width the geometry is identical (440 / 128 / 670). */
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
  column-gap:var(--hero-gap);
  align-items:start;
  padding:48px var(--gutter-r) 48px var(--gutter-l);
}
.hero__nav{grid-column:1;grid-row:1}
.hero__video{
  grid-column:2;grid-row:1 / span 2;
  width:100%;max-width:670px;aspect-ratio:670/518;
  margin-inline-start:auto;   /* flush to the left edge of its track */
  border-radius:16px;overflow:hidden;background:var(--black);
}
.hero__video video,
.hero__video img{width:100%;height:100%;object-fit:cover;display:block}
/* base.css sets img/video to display:block, which would defeat the hidden
   attribute used to swap the hero video for a still image. */
.hero__video [hidden]{display:none}

.model-info{
  grid-column:1;grid-row:2;
  width:100%;max-width:440px;margin-top:72px;padding-inline-start:24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
}
.model-info__logo{width:245px;height:30px}
.model-info__text{align-self:stretch;display:flex;flex-direction:column;gap:20px}
.model-info__title{
  font-size:64px;line-height:70.4px;font-weight:700;color:var(--navy);
}
.model-info__sub{
  font-size:22px;line-height:33px;font-weight:300;color:var(--navy);
  white-space:pre-line;   /* a \n in the subtitle becomes a real line break */
}
.model-info__price{display:flex;align-items:baseline;gap:20px}
.model-info__price-from{
  font-size:44px;line-height:55px;font-weight:700;color:var(--navy);white-space:nowrap;
}
.model-info__price-from span{font-size:26px;font-weight:400}
.model-info__price-before{
  font-size:20px;line-height:26px;font-weight:400;color:var(--muted);
  text-decoration:line-through;white-space:nowrap;
}

/* ===== Mobile: nav, then video, then text ===== */
@media (max-width:1024px){
  .hero__inner{
    display:flex;flex-direction:column;padding:0;gap:0;
  }
  .hero__nav{order:1}
  /* Figma mobile: 343×193 inset 16px from both edges, 12px corners. */
  .hero__video{
    order:2;width:auto;max-width:none;height:auto;
    margin:32px 16px 0;aspect-ratio:343/193;border-radius:12px;
  }
  .model-info{
    order:3;width:auto;max-width:none;margin-top:0;padding:24px 16px 32px;gap:15px;
  }
  .model-info__logo{width:171px;height:21px;align-self:flex-start}
  .model-info__text{gap:0}
  .model-info__title{font-size:40px;line-height:44px}
  .model-info__sub{font-size:16px;line-height:24px}
  .model-info__price{gap:12px}
  .model-info__price-from{font-size:26px;line-height:39px}
  .model-info__price-from span{font-size:16px}
  .model-info__price-before{font-size:14px;line-height:18.3px}
}