/* Shared fluid grid: navigation, hero copy, controls and sections share edges. */
:root{--site-gutter:clamp(24px,5vw,128px);--site-width:1600px}
@media(min-width:721px){
 .wrap,.carousel-controls{width:calc(100% - 2 * var(--site-gutter));max-width:var(--site-width)}
 .nav{width:calc(100% - 2 * var(--site-gutter));max-width:var(--site-width);padding:0;min-height:96px}
 .narrow{max-width:820px}
 .carousel-hero{min-height:680px;height:clamp(680px,76svh,860px);max-width:2200px;margin-inline:auto}
 .carousel-hero .wrap{padding-top:48px;padding-bottom:152px}
 .carousel-hero h1{font-size:clamp(40px,3.25vw,68px);max-width:850px;line-height:1.5}
 .carousel-hero .lead{font-size:clamp(17px,1.1vw,21px);max-width:640px}
 .carousel-hero .eyebrow{font-size:clamp(13px,.8vw,16px)}
 .carousel-hero .actions{margin-top:26px}
 .carousel-hero .hero-invitation{margin-top:26px}
 .carousel-controls{bottom:28px}
 .section{padding-block:clamp(72px,5vw,112px)}
 .section-heading p,.split p{max-width:65ch}
 .journey-grid,.split{gap:clamp(36px,5vw,90px)}
 .scenario-card{min-height:clamp(440px,29vw,580px)}
 .journey-visual{height:clamp(440px,32vw,620px)}
 .course-cover{height:clamp(210px,17vw,300px)}
}
@media(min-width:1600px){
 .carousel-hero .carousel-photo{left:auto;right:0;width:72%;max-width:1584px;object-position:70% center}
 .carousel-hero:after{background:linear-gradient(90deg,#03213d 0%,#03213df5 21%,#03213da8 39%,#03213d25 64%,transparent 84%)}
 .carousel-hero{background:#03213d}
 .nav .logo{width:210px}
 .links{font-size:16px;gap:30px}
 .carousel-themes span{font-size:17px}
 .carousel-hero .wrap,.carousel-controls{max-width:1600px}
 .discovery-grid{grid-template-columns:1fr 1.15fr}
 .quiz-shell{max-width:760px;width:100%;justify-self:end}
 .fq-section .split{grid-template-columns:.8fr 1.2fr}
}
/* Tablet headings should not collide with portrait subjects or controls. */
@media(min-width:721px) and (max-width:1050px){
 .carousel-hero h1{font-size:clamp(34px,4vw,42px);max-width:680px}
 .nav{gap:10px}.nav .logo{width:145px}.links{gap:12px;font-size:13px}
 .links .button{padding:10px 12px;gap:10px}
 .carousel-controls{gap:18px}.carousel-themes span{font-size:14px}
}
@media(min-width:721px) and (max-height:800px){
 .carousel-hero{height:auto;min-height:650px}
 .carousel-hero .wrap{padding-top:38px;padding-bottom:142px}
 .carousel-hero h1{font-size:clamp(38px,3.1vw,56px);margin-bottom:18px}
 .carousel-hero .eyebrow{margin-bottom:16px}
 .carousel-hero .lead{font-size:17px;margin-bottom:12px}
 .carousel-hero .hero-invitation{margin-top:20px}
}
@media(min-width:2201px){
 .carousel-hero .wrap,.carousel-controls{width:calc(100% - 160px)}
}
@media(min-width:1600px){.carousel-hero .carousel-photo{mask-image:linear-gradient(90deg,transparent 0%,#000 25%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%)}}