/* Desktop proportions only. The approved mobile design stays unchanged. */
@media (min-width:761px) {
 html body #header{min-height:96px;padding:16px max(4%,calc((100vw - 1560px)/2));gap:22px;flex-wrap:nowrap}
 html body .hero-stage{aspect-ratio:auto;min-height:600px;height:auto;max-width:1800px;margin:0 auto;padding:0;align-items:center}
 html body .hero-photo{min-height:0;height:100%;width:100%;object-fit:cover;object-position:center 15%}
 html body .hero-content{width:51%;max-width:760px;margin-left:0;padding:54px 28px 54px 4%;flex-shrink:0}
 html body .hero-content>.eyebrow{font-size:14px;letter-spacing:4px;margin-bottom:18px}
 html body .hero-content h1{font-size:clamp(42px,4.6vw,70px);margin:20px 0 25px;max-width:none}
 html body .hero-content>p{font-size:18px;line-height:1.7;max-width:500px;margin:0 0 28px}
 html body .hero-actions{gap:14px;margin-top:0;flex-wrap:wrap}
 html body .hero-actions .button{font-size:15px;padding:13px 23px;min-height:50px;gap:18px}
 html body .hero-values{font-size:14px;letter-spacing:.6px;gap:24px;margin-top:30px;flex-wrap:wrap}
 html body .hero-shade{background:linear-gradient(90deg,rgba(250,241,224,.94),rgba(250,241,224,.82) 32%,rgba(250,241,224,.35) 46%,transparent 60%)}
 html[data-theme=dark] body .hero-shade{background:linear-gradient(90deg,rgba(23,29,34,.96),rgba(23,29,34,.86) 32%,rgba(23,29,34,.4) 46%,transparent 62%)}
 html body .journey-section{padding-top:44px}
 html body .journey-grid{max-width:1440px;padding:0 4% 48px;gap:28px}
 html body .journey-portrait{position:relative;top:auto}
 html body .journey-portrait img{aspect-ratio:4/3;object-position:center 30%}
 html body .journey-intro h2{font-size:36px}
 html body #nav{top:100%;background:var(--iv-surface);z-index:30}
 html:lang(km) body .hero-content h1{font-size:clamp(28px,3vw,44px)}
}
@media (min-width:1550px) {
 html body #nav{display:flex;position:static;flex-direction:row;align-items:center;padding:0;box-shadow:none;background:transparent;gap:15px;font-size:14px;flex:1;justify-content:center}
 html body #nav>a{padding:8px 0;border:0;white-space:nowrap}
 html body #header .menu{display:none}
 html body .brand>span{font-size:20px;letter-spacing:4px}
 html body .header-settings{flex-shrink:0}
}
@media (min-width:761px) and (max-width:1549px) {
 html body #nav{display:none}
 html body #nav.open{display:flex;position:absolute;left:0;right:0;flex-direction:column;align-items:stretch;padding:20px 5%}
 html body #header .menu{display:block;margin-left:auto}
 html body .hero-content{width:55%;padding:44px 24px 44px 4%}
 html body .hero-content h1{font-size:clamp(37px,4.6vw,57px)}
 html body .hero-content>p{font-size:17px}
 html body .hero-actions .button{font-size:14px;padding:12px 18px}
 html body .hero-values{gap:16px}
 html body .hero-photo{object-position:62% center}
}