/* Photo-led opening: no remote video or animation library required. */
body{border-top:0!important}
.site-header{max-width:none;padding-block:16px}
.hero{max-width:none;margin:0;min-height:520px;height:calc(100svh - var(--header-height, 100px));max-height:none;overflow:hidden;display:block;background:#153f32}
.hero-slides,.hero-slide{position:absolute;inset:0;width:100%;height:100%}
.hero-slide{object-fit:cover;opacity:0;transition:opacity 1.5s ease;object-position:center 55%}
.hero-slide:first-child{object-position:65% center}
.hero-slide.is-current{opacity:1}
.hero.is-running .hero-slide.is-current{animation:drift 8.5s ease-out both}
.hero.is-paused .hero-slide{animation-play-state:paused}
.hero::after{display:block;background:linear-gradient(0deg,rgba(3,22,14,.96),rgba(3,22,14,.62) 30%,rgba(3,22,14,.08) 78%);z-index:0}
.hero-copy{position:absolute;top:auto;bottom:100px;left:var(--gutter);right:var(--gutter);padding:0;max-width:900px;z-index:1;animation:opening-text 2.4s ease-out both}
.hero h1{font-size:clamp(44px,5.2vw,80px);line-height:1.03;text-shadow:0 2px 20px #0003}
.hero .eyebrow{margin-bottom:16px}
.opening-description{max-width:730px;margin-top:24px;font-size:clamp(20px,1.7vw,26px);line-height:1.5;color:#fff}
.hero-explore{display:inline-flex;align-items:center;min-height:48px;margin-top:16px;gap:32px;color:#e4f1b8;font-weight:600}
.opening-controls{position:absolute;bottom:24px;right:var(--gutter);left:var(--gutter);z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:20px;color:#fff}
.opening-controls[hidden]{display:none}
.opening-controls button{font:inherit;font-size:16px;font-weight:600;line-height:1.4;min-height:48px;padding:10px 18px;border:1px solid #ffffff80;border-radius:5px;color:#fff;background:#09281dcc;cursor:pointer}
.opening-controls button:hover{background:#285540}
.opening-controls button:focus-visible{outline:3px solid #e4f1b8;outline-offset:4px}
.slide-count{font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.12em}
.stories{max-width:none;padding-inline:0}
.story{padding:40px var(--gutter);gap:clamp(28px,4vw,64px);max-width:1456px;margin:auto}
.story .pic-frame{border-radius:4px}
.story .pic-frame img{aspect-ratio:4/3;max-height:620px}
.story-goals{max-width:none;margin:0;padding-inline:max(var(--gutter),calc((100vw - 1312px)/2))}
.story-snapshot .pic-frame{align-self:center}
.tools{padding-block:48px}
.connect{padding-block:48px}
@keyframes drift{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes opening-text{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.hero{height:calc(100svh - var(--header-height, 165px));min-height:620px}.site-header{padding-block:12px}.hero h1{font-size:clamp(44px,6vw,66px)}}
@media(max-width:820px){.hero{min-height:680px}.hero-copy{bottom:108px}.story{padding:36px var(--gutter);gap:24px}.story-goals{margin:0}.story .pic-frame img{aspect-ratio:16/10}.hero .eyebrow{font-size:13px}}
@media(max-width:540px){.site-header{padding:14px 20px 6px}.hero{height:calc(100svh - var(--header-height, 195px));min-height:640px;max-height:none}.hero-copy{left:24px;right:24px;bottom:96px}.hero h1{font-size:clamp(37px,9vw,48px)}.opening-description{font-size:20px;margin-top:20px}.hero .eyebrow{font-size:12px}.opening-controls{left:20px;right:20px;gap:10px;justify-content:space-between;bottom:20px}.opening-controls button{font-size:14px;padding:10px 12px}.slide-count{font-size:12px}.story{padding-block:30px}.tools{padding-block:36px}}
@media(prefers-reduced-motion:reduce){.hero-copy,.hero.is-running .hero-slide.is-current{animation:none}.hero-slide{transition:none}}
.hero-slide:nth-child(2){object-position:center 70%}
@media(max-width:360px){.site-header nav{gap:12px;font-size:14px}.opening-controls{gap:8px}.opening-controls button{padding-inline:10px}}

/* Upcoming improvement resources. */
.tools h2{margin-bottom:16px}
.tools-intro{max-width:760px;margin:0 auto 32px}

/* Give the brand more presence without squeezing the navigation. */
.site-header{padding-block:22px}
.site-header .brand{flex:0 0 420px;max-width:100%;min-width:0}
@media(min-width:1600px){.site-header .brand{flex-basis:480px}}
@media(max-width:1100px){.site-header .brand{flex-basis:360px}}
@media(max-width:700px){
    .site-header{justify-content:center;padding-block:20px 10px}
    .site-header .brand{flex:0 1 420px;width:100%}
    .site-header .header-join{width:100%}
}

/* Supporting studies: secondary size, readable contrast and link targets. */
.story .research-links{font-size:16px;line-height:1.6;margin-top:8px;color:var(--green)}
.research-links a{display:inline-block;padding-block:6px;text-decoration:underline;text-underline-offset:3px}