/* Compact hero: retain the larger body type and animation, reveal more below. */
.header{height:80px}
.hero{height:clamp(560px,calc(100svh - 170px),680px)}
.hero-copy{padding-top:30px;width:49%;max-width:670px}
.hero h1{font-size:clamp(86px,7.5vw,112px);line-height:.91;letter-spacing:-3.5px;margin:14px 0 20px}
.hero h1 br:first-of-type{display:none}
.hero-description{font-size:17px;line-height:1.55;max-width:420px}
.hero .button{margin-top:18px;padding:13px 22px;min-height:48px}
.hero-values{margin-top:22px;max-width:365px;gap:22px}
.hero-values svg{width:25px;height:25px;margin-bottom:5px}
.hero-values span{font-size:8px;line-height:1.6}
.motion-toggle{left:auto;right:4%;top:18px;bottom:auto;background:#f6f2ecd9}
.hero-story{bottom:26px;padding:10px 15px}
.hero-concept{bottom:8px}
@media(min-width:1700px){.hero-copy{padding-top:38px}.hero h1{font-size:120px}}
@media(min-width:701px) and (max-width:1100px){.hero-copy{width:51%;padding-left:5%}.hero h1{font-size:clamp(72px,8.5vw,94px)}.hero-description{font-size:16px}.hero-values{max-width:315px;gap:16px}.hero-values span{font-size:7px}.hero-shade{background:linear-gradient(90deg,#f6f2ecf2,#f6f2ecb5 35%,transparent 66%)}}
@media(max-width:700px){
 .header{height:70px}.header nav{top:69px}.header .wordmark{width:150px}
 .hero{height:710px}.hero-copy{padding:24px 6% 0;width:100%;max-width:none}
 .hero h1{font-size:clamp(68px,18.7vw,92px);line-height:.91;letter-spacing:-2.5px;margin:13px 0 17px}
 .hero-description{font-size:15px;line-height:1.6;max-width:380px}
 .hero .button{margin-top:17px;min-height:46px;padding:12px 18px}
 .hero-values{margin-top:19px;max-width:330px;gap:18px}
 .hero-values svg{width:22px;height:22px;margin-bottom:4px}
 .hero-values span{font-size:6px;line-height:1.6}
 .hero-image{height:280px;object-position:73% center}
 .hero-shade{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 52%,#f6f2ec00 64%)}
 .hero-sunlight{inset:45% -30% -15%}
 .motion-toggle{top:auto;bottom:22px;left:6%;right:auto;font-size:10px;padding:8px 11px}
 .hero-story{right:6%;bottom:22px;font-size:7px;padding:9px 10px}
 .hero-concept{font-size:6px;bottom:6px}
}
@media(max-width:360px){.hero{height:720px}.hero h1{font-size:64px}.hero-description{font-size:14px}.hero-values{gap:12px}.hero-values span{font-size:5.5px}.motion-toggle{font-size:9px}.hero-story{font-size:6px}}

/* Readable brand benefits with distinct icon badges. */
.hero-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:440px;gap:14px;margin-top:24px}
.hero-values>div{padding:12px 7px 13px;border:1px solid #3b304324;background:#f6f2eceb;border-radius:5px;color:var(--brand)}
.hero-values svg{display:block;width:44px;height:44px;margin:0 auto 9px;padding:8px;background:#e8dfd9;border:1px solid #3b304319;border-radius:50%;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-values span{font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.1px}
@media(max-width:1100px) and (min-width:701px){.hero-values{gap:8px;max-width:390px}.hero-values span{font-size:12px}.hero-values>div{padding-inline:4px}}
@media(max-width:700px){.hero-values{max-width:380px;gap:8px;margin-top:18px}.hero-values>div{padding:9px 3px 10px}.hero-values svg{width:38px;height:38px;padding:7px;margin-bottom:6px}.hero-values span{font-size:11px;line-height:1.4;letter-spacing:0}.hero-story{bottom:20px}}
@media(max-width:360px){.hero-values{gap:6px}.hero-values span{font-size:10px}.hero-values svg{width:35px;height:35px}}