/* The first screen is photography, with a small amount of copy on the image. */
.site-header{position:absolute;inset:0 0 auto;z-index:10;height:88px;background:rgba(248,249,246,.94);backdrop-filter:blur(12px);border-bottom:1px solid #ffffff4d}
.hero.immersive-hero{display:block;position:relative;height:100vh;height:100svh;min-height:620px;max-height:1100px;overflow:hidden;color:white;background:#172822;isolation:isolate}
.immersive-hero .hero-media{position:absolute;inset:0;display:block;background:none}
.immersive-hero .hero-media picture{display:block;width:100%;height:100%}
.immersive-hero .hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.immersive-hero .hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(9,24,17,.88),rgba(9,24,17,.55) 27%,transparent 66%);pointer-events:none}
.immersive-hero .hero-copy{position:absolute;z-index:2;inset:auto 6% 74px;padding:0;max-width:650px;color:#fff}
.immersive-hero .hero-copy .eyebrow{color:#fff;font-size:.7rem;letter-spacing:.16em;margin-bottom:14px}
.immersive-hero h1{color:#fff;font-size:clamp(2.8rem,4.6vw,5rem);line-height:1.04;letter-spacing:-.045em;margin:0 0 18px;text-shadow:0 2px 14px #10231a55}
.immersive-hero .hero-copy>p:not(.eyebrow){color:#fff;font-size:1rem;line-height:1.6;max-width:470px;margin:0 0 17px}
.immersive-hero .hero-copy>.hero-price{font-size:.92rem;line-height:1.4;margin:0 0 20px}
.immersive-hero .hero-price strong{font-size:1.18rem;white-space:nowrap}
.immersive-hero .hero-price span{display:inline;color:#fff;font-size:.78rem;margin:0 0 0 8px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-actions .button{min-height:49px;padding:13px 20px;font-size:.88rem}
.hero-actions .button.outline-light{background:#ffffff12;color:#fff;border-color:#ffffffa6}
.hero-actions .button.outline-light:hover{background:#ffffff2b}
.immersive-hero .hero-foot{position:absolute;z-index:2;inset:auto 6% 24px;display:block;border:0;padding:0;margin:0;color:#fff;font-size:.66rem;letter-spacing:.12em}
.hero-foot a{display:inline-flex;gap:16px;align-items:center;min-height:32px}
@media(max-width:760px){
 .site-header{height:72px;padding-inline:20px;gap:12px}
 .site-header nav{display:none}
 .site-header .brand{width:128px;height:64px}
 .site-header .brand-logo{width:156px;height:156px;left:-15px;top:-41px}
 .site-header .button.small{min-height:42px;font-size:.8rem;padding:10px 15px}
 .hero.immersive-hero{height:100vh;height:100svh;min-height:540px;max-height:none}
 .immersive-hero .hero-media img{object-position:50% 42%}
 .immersive-hero .hero-shade{background:linear-gradient(0deg,rgba(9,24,17,.9),rgba(9,24,17,.58) 24%,transparent 51%)}
 .immersive-hero .hero-copy{inset:auto 23px 28px;max-width:500px;padding:0}
 .immersive-hero .hero-copy .eyebrow{font-size:.61rem;margin-bottom:10px;letter-spacing:.12em}
 .immersive-hero h1{font-size:clamp(2.2rem,9.5vw,3.4rem);line-height:1.04;margin:0 0 12px}
 .immersive-hero .hero-copy>p:not(.eyebrow){font-size:.88rem;line-height:1.55;margin:0 0 12px;max-width:340px}
 .immersive-hero .hero-copy>.hero-price{font-size:.85rem;margin:0 0 15px}
 .immersive-hero .hero-price strong{font-size:1.08rem}
 .immersive-hero .hero-price span{display:block;margin:3px 0 0;font-size:.72rem}
 .hero-actions{gap:9px}
 .hero-actions .button{padding:12px 16px;min-height:45px;font-size:.8rem}
 .immersive-hero .hero-foot{display:none}
 .collection.section{padding-top:38px}
}
@media(max-height:640px) and (max-width:760px){
 .immersive-hero .hero-copy .eyebrow,.immersive-hero .hero-description{display:none}
 .immersive-hero .hero-copy{bottom:20px}
 .immersive-hero h1{font-size:2rem}
 .immersive-hero .hero-price span{display:inline;margin-left:6px}
}