.hero-shell { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.hero-shell > .hero-content { display: flex; flex: 1 0 auto; flex-direction: column; }
.hero { background: var(--paper); display: flex; flex: 1 0 auto; flex-direction: column; min-height: 100svh; }
.hero-stage { position: relative; flex: 1 0 auto; height: clamp(720px, calc(100svh - 100px), 900px); min-height: 720px; overflow: hidden; background: #e3edf4; }
.hero-scenery, .hero-wash { position: absolute; inset: 0; pointer-events: none; }
.hero-background { position: absolute; width: 88%; height: 100%; right: -12%; top: 0; object-fit: cover; object-position: 50% 30%; opacity: .9; filter: saturate(.95); }
.hero-wash { background: linear-gradient(90deg, #f9fbfd 0%, #f9fbfdf0 20%, #f4f8fbad 39%, #ecf3f71f 66%, #ecf3f700 100%); }
.hero-inner { position: relative; max-width: 1680px; height: 100%; margin: auto; padding: 0 var(--page-gutter); }
.hero-copy { position: relative; z-index: 5; padding-top: clamp(160px, 21vh, 230px); width: 56%; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.hero-eyebrow { display: flex; flex-direction: column; gap: 4px; margin: 0 0 32px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #3e6487; }
.hero h1 { margin: 0 0 24px -3px; font-family: var(--font-display); font-size: clamp(80px, 8.6vw, 144px); font-weight: 600; letter-spacing: -.015em; line-height: .88; text-transform: uppercase; }
.hero h1 span, .hero h1 strong { display: block; }
.hero h1 strong { font-weight: 700; }
.hero-tagline { margin: 0; text-transform: uppercase; font-size: clamp(9px, .87vw, 13px); font-weight: 500; letter-spacing: .29em; }
.hero-description { margin: 34px 0 25px; padding-top: 21px; position: relative; font-size: 14px; color: var(--muted); line-height: 1.65; }
.hero-description::before { content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 34px; background: var(--pink); }
.hero-description span { display: block; }
.hero-cta { display: inline-flex; gap: 28px; align-items: center; padding: 17px 21px; background: var(--navy); color: white; border: 1px solid var(--navy); border-radius: 4px; font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; transition: background .2s, transform .2s; }
.hero-cta:hover { background: #274d70; transform: translateY(-2px); }
.driver-signoff { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.driver-signoff img { width: 93px; height: 66px; object-fit: contain; mix-blend-mode: multiply; }
.driver-signoff p { display: flex; flex-direction: column; gap: 7px; margin: 0; text-transform: uppercase; font-size: 9px; letter-spacing: .2em; color: #416282; }
.hero-portrait { position: absolute; z-index: 4; bottom: -50px; right: 0; width: min(58vw, 960px); height: auto; display: block; pointer-events: none; }
.hero-portrait img { display: block; width: 100%; height: auto; }
.hero-fc43 { position: absolute; z-index: 2; width: 39%; height: auto; right: 3%; top: 38%; opacity: .14; transform: rotate(-8deg); }
.hero-brand { position: absolute; width: 180px; height: auto; bottom: 32px; right: 6%; z-index: 6; filter: brightness(0) invert(1); }
.hero-footer { border-top: 1px solid #d4e0e9; background: #fbfcfe; }
.hero-footer-inner { max-width: 1680px; min-height: 100px; padding: 20px var(--page-gutter); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.origin { display: flex; align-items: center; gap: 16px; }
.origin img { width: 28px; height: 21px; }
.origin p { margin: 0; font-family: var(--font-display); font-size: 23px; font-weight: 600; }
.origin p span { display: block; margin-top: 5px; font-family: var(--font-body); font-size: 8px; font-weight: 400; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
.footer-fan-link { display: flex; gap: 22px; align-items: center; padding: 12px 0; font-size: 9px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.footer-fan-link:hover { color: var(--blue); }
@media (min-width: 1681px) { .hero-background { width: 82%; right: -3%; } }
@media (min-width: 1024px) and (max-height: 800px) {
  .hero-stage { height: 700px; min-height: 700px; }
  .hero-copy { padding-top: 158px; }
  .hero-eyebrow { margin-bottom: 26px; }
  .driver-signoff { margin-top: 20px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .hero-copy { width: 64%; padding-top: 176px; }
  .hero h1 { font-size: 9vw; }
  .hero-tagline { font-size: 9px; letter-spacing: .23em; }
  .hero-portrait { width: 65vw; right: 0; bottom: -30px; }
  .hero-background { width: 105%; right: -26%; }
  .hero-footer-inner { flex-wrap: wrap; gap: 18px; }
  .footer-fan-link { display: none; }
}
@media (max-width: 900px) {
  .hero-stage { height: auto; min-height: 0; }
  .hero-inner { min-height: 900px; padding-top: 123px; }
  .hero-copy { width: 100%; padding-top: 0; }
  .hero-eyebrow { font-size: 9px; gap: 3px; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(68px, 17vw, 104px); line-height: .88; margin-bottom: 20px; letter-spacing: -.015em; }
  .hero-tagline { font-size: 9px; letter-spacing: .17em; }
  .hero-description { margin-top: 27px; margin-bottom: 21px; font-size: 13px; padding-top: 18px; }
  .hero-cta { padding: 15px 18px; font-size: 9px; gap: 25px; }
  .driver-signoff { margin-top: 16px; gap: 15px; }
  .driver-signoff img { width: 76px; height: 54px; }
  .driver-signoff p { font-size: 8px; letter-spacing: .14em; gap: 5px; }
  .hero-background { top: 43%; bottom: auto; right: -40%; height: 100%; width: 210%; max-width: none; opacity: .9; object-position: 50% top; }
  .hero-wash { background: linear-gradient(180deg, #f9fbfd 0%, #f9fbfd 32%, #f9fbfded 45%, #e7f0f675 63%, #e7f0f600 100%); }
  .hero-portrait { width: 640px; max-width: 130%; right: -14%; bottom: -100px; }
  .hero-fc43 { width: 65%; top: 61%; right: 2%; opacity: .17; }
  .hero-brand { width: 135px; bottom: 25px; right: 8%; }
  .hero-footer-inner { justify-content: center; flex-direction: column; padding-top: 22px; padding-bottom: 18px; gap: 14px; }
  .origin p { font-size: 23px; }
  .footer-fan-link { display: none; }
}
@media (min-width: 500px) and (max-width: 900px) {
  .hero-inner { min-height: 1090px; }
  .hero-portrait { right: -4%; max-width: 100%; }
}
@media (max-width: 380px) {
  .hero-inner { min-height: 870px; }
  .hero h1 { font-size: 18vw; }
  .hero-tagline { font-size: 8px; letter-spacing: .1em; }
}