*{box-sizing:border-box}
:root{color:#222d2a;background:#f8f6f0;font:16px/1.5 system-ui,sans-serif}
body{margin:0}
a{color:inherit}
header,footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px clamp(16px,5vw,80px)}
header a{text-decoration:none;font-size:.9rem}
.brand{letter-spacing:.06em;font-weight:700}
.brand span{margin-right:6px;color:#54715d}
.brand b{font-weight:400}
.skip{position:absolute;left:12px;top:-100px;z-index:2;background:white;padding:10px}
.skip:focus{top:12px}
.hero{position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(420px,64vw,675px);color:#fff;background:#2c3731}
.hero img,.hero:after{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero img{object-fit:cover;object-position:center}
.hero:after{content:"";z-index:-1;background:linear-gradient(90deg,#102019ee,#102019b0 38%,#10201915 85%)}
.hero-copy{max-width:670px;padding:52px clamp(20px,6vw,96px)}
.hero-copy p:not(.eyebrow){max-width:39ch}
.eyebrow{font-size:.75rem;letter-spacing:.16em;font-weight:800}
h1,h2{font:500 clamp(2.25rem,5.5vw,5rem)/1.02 Georgia,serif;margin:.22em 0}
h2{font-size:clamp(2rem,4vw,3.5rem)}
.cta{display:inline-flex;gap:20px;align-items:center;margin-top:14px;padding:12px 17px;background:#e8f0e2;color:#193125;border-radius:6px;text-decoration:none;font-weight:750}
.hero small{position:absolute;right:12px;bottom:12px;background:#17251de8;border-radius:4px;padding:4px 8px}
.experience{max-width:1450px;margin:auto;padding:40px clamp(14px,5vw,74px)}
.intro{margin-bottom:20px}
.viewer{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);border:1px solid #d5dcd4;border-radius:16px;overflow:hidden;background:white}
#stage{min-width:0;height:clamp(470px,54vw,620px);background:#d2e1e4}
canvas{display:block;touch-action:none;cursor:grab}
.controls{padding:20px}
label,legend{font-weight:700}
select,button{font:inherit;color:inherit;background:#fff;border:1px solid #8e9a92;border-radius:7px;min-height:44px;padding:6px 8px}
select{width:100%;margin-top:6px}
button{cursor:pointer}
button[aria-pressed=true]{color:white;background:#244639;border-color:#244639}
:focus-visible{outline:3px solid #1b8479;outline-offset:3px}
fieldset{margin:14px 0;border:1px solid #d0d9d1;border-radius:8px;padding:8px}
.choices{display:flex;gap:5px}
.choices button{flex:1}
#system-description,#status,.note{font-size:.875rem;color:#46564c}
footer{border-top:1px solid #d5dcd4;font-size:.85rem}
@media(max-width:720px){.viewer{grid-template-columns:1fr}#stage{height:clamp(300px,78vw,480px)}.hero:after{background:#102019a8}.controls{padding:14px}}
@media(max-width:360px){header a{font-size:.76rem}.choices button{font-size:.85rem}}