/* Shared display scale. Reading columns and product layouts opt in separately. */
:root{
 --wide-content:clamp(1440px,calc(70vw + 32px),2560px);
 --wide-edge:max(80px,calc((100vw - var(--wide-content))/2));
 --wide-title:clamp(64px,3.5vw,120px);
 --wide-heading:clamp(42px,2.2vw,78px);
 --wide-body:clamp(18px,.72vw,25px);
 --wide-small:clamp(14px,.48vw,18px);
}

/* Let the original silver, gold and copper show through. Protect the copy locally. */
body.home-gateway .hero .footage video{filter:none}
body.home-gateway .hero .shade{
 background:linear-gradient(90deg,#0a0a0a99 0%,#0a0a0a59 32%,#0a0a0a0d 66%,#0a0a0a00 100%),linear-gradient(0deg,#0a0a0ab8 0%,#0a0a0a33 38%,#0a0a0a00 72%);
}
body.home-gateway .hero :is(h1,.lead,.eyebrow){text-shadow:0 2px 20px #0008}
body.home-gateway.home-hero-active>header{background:linear-gradient(#0a0a0ad9,#0a0a0a73)}
body.home-gateway .hero h1{word-break:keep-all}
@media(max-width:700px){
 body.home-gateway .hero .shade{background:linear-gradient(0deg,#0a0a0af0 0%,#0a0a0ac4 24%,#0a0a0a4d 52%,#0a0a0a0d 80%)}
}

/* Visible keyboard navigation, without adding decoration to pointer use. */
body>header #nav>a:focus-visible,body>footer a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}

@media(min-width:1800px) and (min-height:800px){
 :root{--header-height:clamp(84px,3.5vw,112px);--family-edge:var(--wide-edge)}
 html:has(body.home-gateway){scroll-padding-top:var(--header-height)}
 body>header{height:var(--header-height);padding-inline:var(--wide-edge)}
 body>header.family-header{height:var(--header-height)!important}
 body>header.journal-site-header{height:var(--header-height);padding-inline:var(--wide-edge)}
 body>header .brand img.brand-lockup{width:clamp(190px,7.5vw,280px)}
 body>header #nav{gap:clamp(30px,1.25vw,48px);font-size:var(--wide-small)}
 body>header #nav>a,body>header #nav .suite-nav>summary{min-height:48px}
 body>header #nav .nav-cta{min-height:clamp(44px,2vw,64px);padding-inline:clamp(18px,.8vw,30px)}
 body>header #nav .suite-panel{width:clamp(352px,15vw,480px);padding:28px;top:calc(100% + 16px)}
 body>header #nav .suite-panel>p,body>header #nav .suite-panel small{font-size:clamp(13px,.44vw,16px)}
 body>header #nav .suite-panel strong{font-size:clamp(17px,.6vw,22px)}
 body>header #nav .suite-panel>a{min-height:clamp(76px,2.8vw,104px)}

 body.home-gateway .hero .content{padding:180px var(--wide-edge) clamp(132px,12vh,200px)}
 body.home-gateway .hero h1{max-width:1500px;font-size:clamp(72px,3.5vw,136px);line-height:1.2;letter-spacing:-.05em}
 body.home-gateway .hero .lead{font-size:clamp(19px,.74vw,28px);max-width:34em;margin:clamp(26px,1.1vw,42px) 0 clamp(32px,1.3vw,50px)}
 body.home-gateway .hero .eyebrow{font-size:var(--wide-small);margin-bottom:clamp(28px,1.2vw,46px)}
 body.home-gateway .hero .actions{gap:clamp(18px,.8vw,32px)}
 body.home-gateway .hero .scene-bottom{left:var(--wide-edge);right:var(--wide-edge);font-size:clamp(11px,.43vw,16px);bottom:32px}
 body.home-gateway .journey-heading a{font-size:var(--wide-small)}

 body :is(.button,.text-link,.motion-button.text-link),body main :is(.button,.text-link,.motion-button.text-link){width:clamp(248px,10vw,360px);min-width:0;height:clamp(64px,2.5vw,88px);min-height:64px;padding-inline:clamp(28px,1.1vw,42px);font-size:var(--wide-small);gap:24px}
 body.cinematic-detail main .eyebrow,body.suite-page main .eyebrow{font-size:var(--wide-small)}
 body>footer{padding:clamp(48px,2vw,76px) var(--wide-edge);gap:24px 36px}
 body>footer .brand img.brand-lockup{width:clamp(250px,9vw,340px)}
 body>footer :is(p,small,a,.view-switch),body>footer .company-info :is(p,a){font-size:clamp(13px,.47vw,18px);line-height:1.8}
 body>footer .company-info{width:100%;padding-top:28px;gap:12px 32px}

 body #consultation-dialog{width:min(1440px,calc(100vw - 128px));max-width:1440px}
 body #consultation-dialog .consultation-bar{padding:16px 28px 16px 48px;font-size:16px}
 body #consultation-dialog .consultation-brand>img{width:170px}
 body #consultation-dialog .consultation-scroll{padding:clamp(40px,2vw,72px);gap:clamp(48px,2vw,76px);max-height:calc(100dvh - 156px)}
 body #consultation-dialog .consultation-intro h2{font-size:clamp(38px,1.55vw,54px)}
 body #consultation-dialog .consultation-intro>p:not(.eyebrow){font-size:18px;max-width:30em}
 body #consultation-dialog :is(label,input,textarea){font-size:18px}
 body #consultation-dialog :is(.consultation-email,.eyebrow){font-size:16px}
 body #consultation-dialog :is(.required,form small){font-size:14px}
 body #consultation-dialog .consent{font-size:16px}
 body #consultation-dialog textarea::placeholder{font-size:16px}
 body #consultation-dialog :is(.form-privacy-link,.field-error,.form-guidance){font-size:15px}
 body dialog#privacy-dialog{width:min(1200px,calc(100% - 128px));height:min(1100px,calc(100dvh - 80px))}
 body dialog#privacy-dialog .privacy-dialog-content{padding:48px 64px 64px;font-size:clamp(18px,.62vw,22px)}
 body #privacy-dialog :is(.privacy-dialog-bar strong,.privacy-close){font-size:18px}
 body #privacy-dialog .privacy-modal-title{font-size:48px}
 body #privacy-dialog .privacy-content h2:not(.privacy-modal-title){font-size:30px}
 body #privacy-dialog .privacy-content dd{font-size:clamp(18px,.62vw,22px)}
 body #privacy-dialog .privacy-content :is(dt,.privacy-date){font-size:16px}
}

/* Keep the hero controls in view on a shallow ultrawide window. */
@media(min-width:1800px) and (min-height:800px) and (max-height:999px){
 body.home-gateway .hero h1{font-size:min(3.5vw,11vh)}
 body.home-gateway .hero .content{padding-block:150px 110px}
 body.home-gateway .hero .eyebrow{margin-bottom:24px}
 body.home-gateway .hero .lead{margin-block:24px 28px}
}