/* Accessible static composition; scroll choreography is enabled by motion.js. */
.hero{display:block;min-height:0;padding:100px var(--pad) 50px;background:var(--intro-color,#fff)}
.hero-stage{display:flex;flex-direction:column;align-items:center;gap:44px}
.hero-brand{width:min(84vw,900px);max-width:none;height:auto;padding:12px 28px;flex-shrink:0;box-shadow:none;background:#fff}
.hero-brand img{width:100%;height:auto}
.hero-words{text-align:center;width:100%}
.hero h1{font-size:clamp(48px,9.4vw,150px);line-height:1.04;letter-spacing:-.055em}
.hero-promise{font-size:clamp(16px,1.8vw,24px);margin:26px auto 0}
.hero-person{display:flex;gap:36px;align-items:center;justify-content:center;max-width:100%;padding:30px 0}
.hero-person>img{width:150px;height:150px;object-fit:cover;box-shadow:10px 10px 0 var(--green)}
.hero-person h2{font-size:clamp(52px,8.5vw,132px);line-height:1.01;margin:16px 0 25px}
.hero-person h2 em{font-family:Georgia,serif;font-weight:400}
.person-quote{font-size:clamp(18px,2vw,27px);max-width:23em;line-height:1.4}
.intro-progress{display:none}
.motion-on .hero{height:350svh;padding:0}
.motion-on .hero-stage{position:sticky;top:0;height:100svh;display:block;overflow:clip;background:var(--intro-color,#fff)}
.motion-on .hero-brand{position:fixed;top:0;left:0;z-index:12;transform-origin:0 0;will-change:transform}
.motion-on .hero-words{position:absolute;top:var(--pay-y,73svh);left:5%;width:90%;transform:translateY(-50%) scale(var(--pay-scale,.54));opacity:var(--pay-alpha,0);will-change:transform,opacity;pointer-events:none}
.motion-on .hero-person{position:absolute;inset:16% 8% 12%;padding:0;opacity:var(--person-alpha,0);transform:scale(var(--person-scale,.78));will-change:transform,opacity;pointer-events:none}
.motion-on .intro-skip{position:absolute;bottom:34px;right:var(--pad);z-index:2;font-size:15px}
.motion-on .intro-progress{display:block;position:absolute;bottom:0;left:0;right:0;height:3px;background:#17191615}
.intro-progress span{height:100%;display:block;background:var(--ink);transform:scaleX(var(--intro-progress,0));transform-origin:left}
@media(max-width:600px){
 .hero{padding:85px 24px 35px}.hero-stage{gap:30px}
 .hero-brand{padding:8px 14px;width:92vw}
 .hero h1{font-size:12vw}.hero-promise{font-size:17px;margin-top:22px}
 .hero-person{flex-direction:column;gap:25px;text-align:center}
 .hero-person>img{width:110px;height:110px;box-shadow:6px 6px 0 var(--green)}
 .hero-person h2{font-size:14vw;margin:12px 0 20px}.hero-person .label{font-size:12px}
 .person-quote{font-size:18px;max-width:19em}
 .motion-on .hero{height:310svh}.motion-on .hero-person{inset:18% 7% 14%}
 .motion-on .intro-skip{bottom:24px;right:24px;font-size:14px}
}
@media(max-height:620px) and (min-width:601px){.hero-brand{width:60vw;max-width:680px}.hero h1{font-size:10vh}.hero-person h2{font-size:12vh}.hero-person>img{width:110px;height:110px}.person-quote{font-size:18px}}
@media(prefers-reduced-motion:reduce){.hero{background:#fff}.hero-brand{transform:none!important}}
@media print{.motion-on .hero{height:auto;padding:30px}.motion-on .hero-stage{position:static;height:auto;display:flex;overflow:visible}.motion-on .hero-brand,.motion-on .hero-words,.motion-on .hero-person{position:static;transform:none!important;opacity:1}.intro-progress,.intro-skip{display:none!important}.hero-brand{width:250px}}

/* Keep the supporting line readable even at the smallest opening scale. */
.motion-on .hero-promise{font-size:30px}
@media(max-width:600px){.motion-on .hero-promise{font-size:27px}}
@media(max-height:620px) and (max-width:600px){.hero-person>img{width:76px;height:76px}.hero-person{gap:16px}.hero-person h2{font-size:min(14vw,11vh)}.person-quote{font-size:16px}.motion-on .hero-person{inset:16% 7% 12%}}