/* Home page */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Intro curtain ---------- */
.intro { position: fixed; inset: 0; z-index: 200; }
.intro.is-open { pointer-events: none; }
.intro__half {
  position: absolute; left: 0; right: 0; height: 50.5%; background: var(--gs-black);
  transition: transform 1300ms cubic-bezier(.77,0,.18,1);
}
.intro__half--top { top: 0; }
.intro__half--bottom { bottom: 0; }
.intro.is-open .intro__half--top { transform: translateY(-101%); }
.intro.is-open .intro__half--bottom { transform: translateY(101%); }
.intro__line {
  position: absolute; left: 50%; top: 50%; height: 1px; width: 0; transform: translateX(-50%);
  background: var(--accent); box-shadow: 0 0 24px 2px rgba(181,84,28,.7); opacity: 0;
  transition: width 900ms var(--ease-out), opacity 400ms;
}
.intro__mark {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  opacity: 0; transform: scale(.92);
  transition: opacity 700ms var(--ease-out), transform 1400ms var(--ease-out);
}
.intro__mark img { width: 84px; height: auto; margin-bottom: 56px; }
.intro__name {
  font: 800 clamp(28px,4vw,48px)/1 var(--font-display); font-stretch: 125%; letter-spacing: .02em; color: #fff;
  white-space: nowrap; transition: letter-spacing 1600ms var(--ease-out);
}
.intro__tag { font: 500 11px/1 var(--font-mono); letter-spacing: .32em; color: var(--gs-gold-400); }
.intro.is-lit .intro__line, .intro.is-open .intro__line { width: 100%; }
.intro.is-lit .intro__line { opacity: 1; }
.intro.is-lit .intro__mark { opacity: 1; transform: scale(1); }
.intro.is-lit .intro__name, .intro.is-open .intro__name { letter-spacing: .32em; }
.intro.is-open .intro__mark { opacity: 0; transform: scale(1.08); }

/* ---------- Hero: brand film + numbers strip ---------- */
/* Wide screens: the film fills the first screen (cover-cropped) with the numbers strip at its foot.
   Upright screens (phones, tablets): the film shows in full at 16:9 under the header, numbers below. */
.home-hero {
  position: relative; height: 100vh; height: 100svh; min-height: 680px;
  display: flex; flex-direction: column; background: var(--gs-black); color: #fff;
}
.home-hero__film { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--gs-black); }
.home-hero__shade {
  position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,11,13,.65), rgba(10,11,13,0));
}
.film-pill {
  position: absolute; z-index: 2; right: var(--container-pad); bottom: 24px;
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: rgba(10,11,13,.45); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 500 11px/1 var(--font-mono); letter-spacing: .16em; color: #fff;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.film-pill:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.film-pill .fa-solid { font-size: 12px; }
@media (max-aspect-ratio: 11/10) {
  .home-hero { height: auto; min-height: 0; padding-top: var(--nav-height); }
  .home-hero__film { flex: none; aspect-ratio: 16 / 9; }
  .film-pill { bottom: 10px; padding: 8px; }
  .film-pill span { display: none; }
}

.home-hero__stats { position: relative; border-top: 1px solid rgba(255,255,255,.14); background: var(--gs-black); }
.home-hero__stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.home-hero__stat { padding: 26px 24px; border-left: 1px solid rgba(255,255,255,.14); }
.home-hero__stat:first-child { padding-left: 0; border-left: 0; }
.home-hero__stat-v { font: 800 30px/1 var(--font-display); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.home-hero__stat-l { font: 400 13px/1.4 var(--font-body); color: rgba(255,255,255,.62); margin-top: 10px; }
@media (max-width: 760px) {
  .home-hero__stats-grid { grid-template-columns: 1fr 1fr; }
  .home-hero__stat { padding: 20px 16px 20px 0; border-left: 0; }
  .home-hero__stat-v { font-size: 24px; }
}

/* ---------- Executive summary ---------- */
.summary__eyebrow { color: var(--accent); margin-bottom: 24px; }
.summary__text {
  margin: 0; font: 300 clamp(28px,3vw,44px)/1.25 var(--font-display); font-stretch: 112%;
  color: var(--text-strong); text-wrap: pretty;
}
.summary__text span { color: var(--accent); font-weight: 600; }
.summary__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; padding-top: 8px; }

/* ---------- Capability cards ---------- */
.cap-card {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden;
  color: #fff; background: var(--gs-ink-900); --glare: .28;
  transform: perspective(1000px); transition: transform 250ms var(--ease-out), box-shadow 250ms;
}
.cap-card:hover { color: #fff; }
.cap-card.is-tilting { box-shadow: 0 40px 80px -30px rgba(13,22,40,.6); }
.cap-card__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,11,13,.1) 30%, rgba(10,11,13,.92) 100%); }
.cap-card__text { position: absolute; left: 32px; right: 32px; bottom: 32px; pointer-events: none; }
.cap-card__num { font: 500 13px/1 var(--font-mono); color: var(--gs-gold-400); margin-bottom: 14px; }
.cap-card__title { margin: 0 0 16px; font: 800 30px/1 var(--font-display); font-stretch: 125%; text-transform: uppercase; }
.cap-card p { margin: 0; font: 400 15px/1.55 var(--font-body); color: rgba(255,255,255,.78); }

/* ---------- Band ---------- */
.band__content--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px; }

/* ---------- Track record ---------- */
.brand-wall { margin-top: 64px; background: var(--gs-ink-200); border: 1px solid var(--gs-ink-200); border-radius: var(--radius-md); overflow: hidden; }
.brand-wall > div { background: #fff; height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.brand-wall img { height: 96px; width: auto; max-width: 70%; object-fit: contain; }
.brand-wall span { font: 600 11px/1 var(--font-body); letter-spacing: .22em; color: var(--text-muted); }
.track-points { margin-top: 48px; }
.track-points > div { display: flex; gap: 16px; align-items: flex-start; }
.track-points .icon { font-size: 22px; color: var(--accent); }
.track-points p { margin: 0; font: 400 16px/1.6 var(--font-body); color: var(--text-body); }

/* ---------- Journey timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); }
.timeline li { position: relative; padding: 36px 24px 8px 0; }
.timeline li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); }
.timeline__y { font: 800 24px/1 var(--font-display); font-stretch: 125%; color: #fff; margin-bottom: 16px; white-space: nowrap; }
.timeline p { margin: 0; font: 400 14px/1.6 var(--font-body); color: rgba(255,255,255,.72); text-wrap: pretty; }
.timeline li.is-next::before { background: var(--gs-gold-400); }
.timeline li.is-next .timeline__y { color: var(--gs-gold-400); }

/* ---------- Why Golden Stef ---------- */
.why__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.why__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 28px;
  background: linear-gradient(180deg, rgba(10,11,13,0), rgba(10,11,13,.85));
  font: 500 11px/1.5 var(--font-mono); letter-spacing: .14em; color: rgba(255,255,255,.85); text-transform: uppercase;
}
.why__list { margin-top: 48px; display: flex; flex-direction: column; }
.why__row { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0; border-top: 1px solid var(--gs-ink-200); }
.why__n { font: 500 14px/1.6 var(--font-mono); color: var(--accent); }
.why__row h3 { margin: 0 0 8px; font: 700 20px/1.2 var(--font-display); font-stretch: 112%; color: var(--text-strong); }
.why__row p { margin: 0; font: 400 15px/1.6 var(--font-body); color: var(--text-muted); }

/* ---------- EV chapter ---------- */
.ev-chapter { position: relative; background: var(--gs-black); color: #fff; overflow: hidden; }
.ev-chapter__bg { position: absolute; inset: 0; background: url(../img/p37.webp) center / cover; opacity: .55; }
.ev-chapter__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,13,.95) 0%, rgba(10,11,13,.7) 50%, rgba(10,11,13,.3) 100%); }
.ev-chapter__content { position: relative; padding-top: clamp(96px,12vw,176px); padding-bottom: clamp(96px,12vw,176px); }
.ev-chapter__title { margin: 24px 0 20px; font: 800 clamp(40px,5vw,72px)/1.02 var(--font-display); font-stretch: 125%; letter-spacing: -.02em; text-transform: uppercase; }
.ev-chapter__lead { margin: 0 0 40px; font: 400 20px/1.5 var(--font-body); color: rgba(255,255,255,.72); }