/* A dedicated widescreen composition. The mobile stylesheet stays independent. */
:root {
  --pad: clamp(36px, 4.5vw, 100px);
  --content-pad: max(var(--pad), calc((100% - 1560px) / 2));
}

html, body, main {
  width: 100%;
  min-width: 0;
}

html { scroll-padding-top: 112px; }

.site-header {
  position: fixed;
  padding-block: clamp(18px, 2.5dvh, 28px);
  border-bottom-color: #ffffff1c;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}

.has-scrolled .site-header {
  background: #111916de;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: #ffffff17;
}

.brand-caption { letter-spacing: 1.8px; }
.site-header nav { gap: clamp(26px, 3vw, 56px); }

/* Fit the actual browser height, including on shallow laptop windows. */
.hero {
  width: 100%;
  height: calc(100dvh + clamp(300px, 60dvh, 680px));
  min-height: 0;
}

.hero-stage {
  width: 100%;
  height: 100dvh;
  min-height: 0;
}

.hero-title {
  top: clamp(112px, 17dvh, 190px);
  left: 48%;
  right: var(--pad);
  text-align: left;
  padding: 0;
}

.hero-eyebrow {
  justify-content: flex-start;
  font-size: .75rem;
  letter-spacing: 1.65px;
  margin-bottom: clamp(16px, 2.4dvh, 30px);
}

.hero-title h1 {
  font-size: clamp(4rem, min(7.3vw, 14.5dvh), 10.25rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-shadow: 0 2px 36px #15212255;
}

.hero-title h1 em {
  display: inline-block;
  white-space: nowrap;
}

.scene-shade {
  background: linear-gradient(180deg, #0e1b294a, #10202b14 30%, transparent 60%);
}

.scene-vignette {
  background: linear-gradient(180deg, transparent 54%, #1118131c 70%, #111813a6 92%, #171a19);
}

.hero-bottom {
  bottom: clamp(68px, 9dvh, 106px);
  align-items: flex-end;
}

.hero-intro { gap: 18px; }
.hero-intro p:first-child { font-size: clamp(1.25rem, 1.5vw, 1.625rem); }
.hero-intro p + p { font-size: 1rem; line-height: 1.6; }
.intro-line { width: 32px; margin-top: 15px; }
.scroll-prompt { gap: 24px; }
.scroll-circle { width: 60px; height: 60px; }
.scene-caption { bottom: 25px; letter-spacing: 1.9px; }

/* Full-width section backgrounds, with a readable editorial grid inside. */
.section-pad { padding-inline: var(--content-pad); }
.section-label { padding-bottom: 42px; }
.about { padding-top: 96px; }
.about-grid {
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(72px, 9vw, 160px);
  padding-block: 26px 96px;
}

h2 { font-size: clamp(4.5rem, 6.5vw, 7.5rem); }
.about-copy { max-width: 520px; }
.about-copy .lead { font-size: clamp(1.5rem, 1.9vw, 1.875rem); }
.about-copy p { font-size: 1.0625rem; }
.principles { padding-block: 32px; }

.explore {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  column-gap: clamp(50px, 6vw, 120px);
  padding-block: 12px 120px;
  align-items: start;
}

.explore > .section-label { grid-column: 1 / -1; margin-bottom: 24px; }
.explore .section-heading {
  display: block;
  position: sticky;
  top: 130px;
  margin: 0;
}
.explore h2 { font-size: clamp(4rem, 5.6vw, 6.5rem); }
.section-heading > p { margin-top: 32px; font-size: 1rem; }
.interest-list { min-width: 0; }
.interest summary {
  grid-template-columns: 28px minmax(0, 1fr) 32px;
  gap: 16px;
  padding: 27px 0;
}
.interest-number { grid-column: 1; grid-row: 1 / 3; align-self: start; padding-top: 9px; }
.interest-name { grid-column: 2; font-size: clamp(1.4rem, 1.9vw, 2rem); letter-spacing: -.025em; }
.interest-tag { grid-column: 2; grid-row: 2; font-size: .75rem; letter-spacing: 1.4px; }
.expand-icon { grid-column: 3; grid-row: 1 / 3; }
.interest-body { padding: 0 38px 32px 44px; }
.interest-body p { font-size: 1rem; }
.interest-footnote { margin-top: 20px; }

.outlook { height: 72dvh; min-height: 500px; max-height: 880px; }
.outlook-content > p { font-size: clamp(5rem, 8vw, 9rem); }
.outlook-sub { font-size: 1rem; }
.note { padding-top: 90px; }
.note-content { grid-template-columns: 1.05fr 1fr; gap: clamp(72px, 9vw, 160px); }
.note-content p { font-size: 1.0625rem; }

.motion-off .hero { height: 100dvh; min-height: 0; }
.motion-off .hero-stage { position: relative; }

@media (max-height: 650px) {
  .site-header { padding-block: 16px; }
  .brand { font-size: 32px; }
  .hero-title { top: 105px; }
  .hero-eyebrow { font-size: .75rem; letter-spacing: 1px; margin-bottom: 14px; }
  .hero-bottom { bottom: 58px; }
  .hero-intro p:first-child { font-size: 1.125rem; margin-bottom: 5px; }
  .hero-intro p + p { font-size: .875rem; }
  .scroll-circle { width: 48px; height: 48px; }
  .scene-caption { bottom: 18px; font-size: .75rem; }
}

@media (min-width: 2100px) {
  .hero-title { left: 49%; }
}