/* Static illustrated landscape. */
.landscape-home { --paper:#e2e5cd; --line:#b9c5ab; background:var(--paper) }
.landscape-home .site-header { position:absolute; z-index:5; top:0; left:0; right:0; color:#fff6de; height:90px }
.landscape-home .brand-period { color:#ffd47b }
.landscape-home .nav-cta { border-color:#ffffff65; background:#10313c55 }
.landscape-hero { position:relative; isolation:isolate; min-height:850px; height:min(1000px,100svh); overflow:hidden; color:#fff6de; background:#064252 }
.landscape-art,.hero-shade { position:absolute; inset:0; pointer-events:none }
.landscape-art { background:url('/assets/gloom-landscape.png') center 58% / cover no-repeat; z-index:-4 }
.hero-shade { z-index:-2; background:linear-gradient(90deg,#052e3dba 0%,#052e3d80 32%,transparent 68%),linear-gradient(0deg,#0b252b70,transparent 30%) }
.landscape-hero .hero-copy { padding-top:155px; position:relative }
.landscape-hero h1 { font-size:clamp(54px,5.8vw,88px); line-height:1.04; letter-spacing:-.055em; max-width:750px; margin:22px 0 }
.landscape-hero h1 em { font-family:Georgia,serif; font-weight:400; color:#ffdb8c; letter-spacing:-.045em }
.landscape-hero .eyebrow { color:#d1e8e5; font-size:12px }
.landscape-hero .hero-description { color:#fff6de; font-size:22px; margin:22px 0 12px; max-width:430px }
.hero-detail { max-width:365px; color:#e0e9e1; font-size:16px; margin-bottom:28px }
.landscape-hero .button-dark { background:#ffda85; color:#173a3b; border-radius:7px }
.hero-explore { display:block; width:fit-content; margin-top:20px; font-size:14px; color:#fff6de }
.landscape-caption { position:absolute; bottom:36px; left:4%; font:italic 15px Georgia,serif; color:#fff3d9 }
.flow-demo { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:70px }
.flow-copy p:not(.eyebrow) { max-width:400px; color:var(--muted) }
.landscape-home .trust-section { border-top:1px solid var(--line) }
.landscape-home .style-card { background:#eff0dc }
.landscape-home .feature-card { background:#edf0db }
@media (min-width:1600px) { .landscape-hero .hero-copy { padding-top:175px } }
@media (max-width:900px) {
 .landscape-hero { min-height:850px; height:100svh; max-height:1100px }
 .landscape-art { background-position:63% center }
 .landscape-hero h1 { font-size:64px }
 .flow-demo { grid-template-columns:1fr; gap:32px }
 .flow-copy p:not(.eyebrow) { max-width:600px }
}
@media (max-width:600px) {
 .landscape-home .site-header { height:78px }
 .landscape-home .site-header nav { gap:16px }
 .landscape-home .site-header nav a:first-child { display:none }
 .landscape-home .site-header .nav-cta { padding:9px 11px; font-size:11px }
 .landscape-hero { min-height:870px; height:auto }
 .landscape-art { background-size:auto 650px; background-position:66% bottom; background-repeat:no-repeat }
 .hero-shade { background:linear-gradient(#063b49 0%,#063b49ee 25%,#063b4933 56%,transparent 74%,#0b252b66) }
 .landscape-hero .hero-copy { padding-top:110px }
 .landscape-hero h1 { font-size:49px; max-width:100%; margin:18px 0 }
 .landscape-hero .hero-description { font-size:18px }
 .hero-detail { font-size:14px; max-width:310px }
 .landscape-hero .eyebrow { font-size:9px; letter-spacing:.1em }
 .hero-explore { margin-top:14px }
 .landscape-caption { bottom:77px; font-size:12px }
}

/* Scroll-linked backdrop: the landscape stays still as the page rises over it. */
.landscape-backdrop { position:absolute; inset:0; z-index:-1; pointer-events:none; background:#064252 }
.landscape-backdrop .landscape-art { z-index:0 }
.landscape-backdrop .hero-shade { z-index:1 }
.scroll-scene-enabled { isolation:isolate }
.scroll-scene-enabled .landscape-hero { isolation:auto; overflow:visible; background:transparent }
.scroll-scene-enabled .landscape-backdrop {
 position:fixed; inset:0 0 auto; height:var(--scene-height,100svh); z-index:-1;
 opacity:var(--scene-opacity,1); will-change:opacity;
}
.content-surface { position:relative; background:var(--paper); z-index:1; display:flow-root }
.landscape-home .site-footer { position:relative; background:var(--paper); z-index:1 }
@media (prefers-reduced-motion:reduce) {
 .scroll-scene-enabled .landscape-backdrop { position:absolute; height:auto; inset:0; opacity:1; will-change:auto }
 .scroll-scene-enabled .landscape-hero { isolation:isolate; overflow:hidden }
 html { scroll-behavior:auto }
}