/* Two proportional canvases. Only the main homepage opts into viewport fitting. */
.site-header[data-hero-aligned] .header-inner{
  width:var(--hero-header-width);max-width:none;padding-inline:0;margin-inline:auto;
  container-type:inline-size;container-name:hero-nav;
}
/* Collapse based on the aligned content width, including short landscape windows. */
@container hero-nav (max-width:900px){
  .menu-toggle{display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;width:35px;height:40px}
  .menu-toggle span{width:20px;height:1px;background:white}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  #main-nav{display:none;position:absolute;top:var(--header-height);left:0;right:0;height:auto;padding:15px max(24px,calc((100% - var(--hero-header-width))/2)) 24px;flex-direction:column;gap:0;align-items:stretch;background:#151714}
  #main-nav.is-open{display:flex}
  #main-nav a{font-size:15px;padding:10px 0;border:0}
}
.hero-opening[data-hero-layout]{
  display:block;position:relative;height:calc(100vh - var(--header-height));
  height:calc(100dvh - var(--header-height));min-height:0;padding:0;overflow:clip;
}
.hero-opening[data-hero-layout]>.wrap{
  position:absolute;left:50%;top:var(--hero-offset-top,24px);width:1600px;max-width:none;
  margin:0;transform:translateX(-50%) scale(var(--hero-fit-scale,1));transform-origin:top center;
}
.hero-opening[data-hero-layout] .hero-heading{
  display:grid;grid-template-columns:620px 932px;gap:16px 48px;align-items:start;margin:0 0 48px;
}
.hero-opening[data-hero-layout] .hero-heading>div:first-child{
  grid-column:1;grid-row:1;display:block;align-self:start;min-width:0;transform:none;padding-top:0;
}
.hero-opening[data-hero-layout] h1{margin:0;line-height:1.02}
.hero-opening[data-hero-layout] .hero-wordmark{font-size:152px;line-height:1;letter-spacing:-.055em}
.hero-opening[data-hero-layout] .hero-positioning{
  font-size:56px;line-height:1.06;margin-top:21px;white-space:nowrap;
}
.hero-opening[data-hero-layout] .hero-action-area{
  display:block;width:100%;max-width:none;margin:0;padding-top:36px;
}
.hero-opening[data-hero-layout] .hero-plan-flow{
  width:max(426px,var(--hero-controls-width,426px));max-width:100%;margin:0;gap:10px;font-size:14px;
}
.hero-opening[data-hero-layout] .hero-plan-node{min-height:36px;padding:6px 8px}
.hero-opening[data-hero-layout] .hero-plan-flow strong{gap:7px}
.hero-opening[data-hero-layout] .hero-plan-flow svg{width:25px;height:19px}
.hero-opening[data-hero-layout] .hero-copy{
  max-width:none;width:max-content;margin:22px 0 0;font-size:18px;line-height:1.6;
}
.hero-opening[data-hero-layout] .hero-copy>span{white-space:nowrap}
.hero-opening[data-hero-layout] .hero-media{grid-column:2;grid-row:1;align-self:start;min-width:0}
/* Paint over trailing video-compositor seams, including just outside the box.
   A fractional clip can itself leave an antialiased edge in Chromium on Windows. */
.hero-opening[data-hero-layout] .hero-video{position:relative;isolation:isolate;overflow:visible;background:#fff}
.hero-opening[data-hero-layout] .hero-video::after{
  content:"";position:absolute;inset:-1px;z-index:1;pointer-events:none;
  border-right:3px solid #fff;border-bottom:3px solid #fff;
}
.hero-opening[data-hero-layout] .hero-heading>.project-links{
  grid-column:1;grid-row:2;justify-self:start;align-self:center;width:max-content;
  display:flex;flex-wrap:nowrap;gap:10px;margin:0;padding:0;transform:none;
}
.hero-opening[data-hero-layout=wide] .hero-heading>.project-links{grid-row:1;align-self:end}
.hero-opening[data-hero-layout] .project-links .button{font-size:13px;padding:11px 19px;min-height:44px;gap:14px}
.hero-opening[data-hero-layout] .hero-heading>.teaser-chapters{
  grid-column:2;grid-row:2;align-self:center;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;
}
.hero-opening[data-hero-layout] .teaser-chapters button{font-size:14px;line-height:1.4;min-height:44px;padding:8px 0 12px;white-space:nowrap}
.hero-opening[data-hero-layout] .hero-evidence{display:block;border:0;padding:0}
.hero-opening[data-hero-layout] .hero-evidence>.eyebrow{font-size:12px;margin:0 0 17px}
.hero-opening[data-hero-layout] .hero-values{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hero-opening[data-hero-layout] .hero-value-link{padding:18px 0 0}
.hero-opening[data-hero-layout] .hero-values h2{display:block;font-size:23px;line-height:1.25;min-height:0;white-space:nowrap}
.hero-opening[data-hero-layout] .hero-values p{font-size:17px;line-height:1.65;margin-top:4px;white-space:nowrap}
.hero-opening[data-hero-layout] .hero-scroll-cue{
  display:inline-flex;align-items:center;gap:10px;position:absolute;bottom:12px;left:50%;
  transform:translateX(-50%);font-size:12px;line-height:1.5;white-space:nowrap;
}

/* Tall/narrow screens: title, flow, copy, buttons, video, chapters, then a 2×2 summary. */
.hero-opening[data-hero-layout=stacked]>.wrap{width:720px}
.hero-opening[data-hero-layout=stacked] .hero-heading{grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:30px}
.hero-opening[data-hero-layout=stacked] .hero-heading>div:first-child{padding-top:0}
.hero-opening[data-hero-layout=stacked] .hero-wordmark{font-size:112px}
.hero-opening[data-hero-layout=stacked] .hero-positioning{font-size:50px;margin-top:14px}
.hero-opening[data-hero-layout=stacked] .hero-action-area{padding-top:28px}
.hero-opening[data-hero-layout=stacked] .hero-plan-flow{width:max(560px,var(--hero-controls-width,560px));font-size:20px;gap:16px}
.hero-opening[data-hero-layout=stacked] .hero-plan-node{min-height:48px;padding:8px 14px}
.hero-opening[data-hero-layout=stacked] .hero-plan-flow svg{width:32px;height:24px}
.hero-opening[data-hero-layout=stacked] .hero-copy{font-size:20px;margin-top:16px}
.hero-opening[data-hero-layout=stacked] .hero-heading>.project-links{grid-column:1;grid-row:2;gap:12px}
.hero-opening[data-hero-layout=stacked] .project-links .button{font-size:20px;min-height:56px;padding:12px 22px}
.hero-opening[data-hero-layout=stacked] .project-links .resource-icon{width:24px;height:24px}
.hero-opening[data-hero-layout=stacked] .hero-media{grid-column:1;grid-row:3}
.hero-opening[data-hero-layout=stacked] .hero-heading>.teaser-chapters{grid-column:1;grid-row:4;margin-top:-10px;gap:12px}
.hero-opening[data-hero-layout=stacked] .teaser-chapters button{font-size:18px;min-height:48px}
.hero-opening[data-hero-layout=stacked] .hero-evidence>.eyebrow{font-size:16px;margin-bottom:14px}
.hero-opening[data-hero-layout=stacked] .hero-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.hero-opening[data-hero-layout=stacked] .hero-values h2{font-size:25px}
.hero-opening[data-hero-layout=stacked] .hero-values p{font-size:18px}
.hero-opening[data-hero-layout=stacked] .hero-value-link{padding:14px 0 0}