/* Youth's Online 1.8 — deliberate wide layout and restrained interactive CTAs. */
:root{--yo-wide-gutter:clamp(16px,2.35vw,44px)}
body .container{width:calc(100% - (var(--yo-wide-gutter) * 2));max-width:1760px;margin-inline:auto}
/* Stretch the visual composition without stretching text into unreadable lines. */
.hero{padding-block:clamp(28px,3.1vw,54px) clamp(30px,3.2vw,56px)}
.hero .hero-grid{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:clamp(26px,3.8vw,70px)}
.hero .hero-copy{min-width:0}
.hero .hero-copy h1{font-size:clamp(40px,4.15vw,76px);line-height:1.15;max-width:17ch;margin-block:15px 18px}
.hero .hero-copy .lead{max-width:65ch;line-height:1.65;font-size:clamp(16px,1.22vw,21px)}
.hero .trust-tags{margin-block:13px}
.hero .hero-actions{margin-top:20px;gap:12px}
.hero .hero-note{margin-top:18px}
.hero .hero-stats{margin-top:20px}
.hero .hero-visual{width:100%;min-width:0}
.hero .glow-card{max-width:100%;padding:clamp(12px,1.5vw,22px)}
.hero .poster-frame{height:clamp(360px,31vw,540px)}
.section{padding-block:clamp(46px,5vw,76px)}
.section .section-head{margin-bottom:22px}
.center-head{margin-bottom:30px}
#services .yo-services-slider .yo-slider-card{flex-basis:clamp(270px,24.5%,390px)}
#services .yo-services-slider{gap:clamp(14px,1.3vw,23px)}
/* Navigation and horizontal bands inherit the wider page width. */
.site-header .navrow{gap:clamp(12px,1.35vw,26px)}
/* Magnetic movement is extremely subtle; JS supplies the pointer offsets on capable devices. */
a.yo-magnetic,button.yo-magnetic{--yo-mag-x:0px;--yo-mag-y:0px;position:relative;transform:translate3d(var(--yo-mag-x),var(--yo-mag-y),0);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,background-color .24s ease;will-change:transform}
a.yo-magnetic:hover,button.yo-magnetic:hover{transform:translate3d(var(--yo-mag-x),calc(var(--yo-mag-y) - 2px),0)}
a.yo-magnetic:active,button.yo-magnetic:active{transform:translate3d(0,1px,0) scale(.985)}
/* Existing 3D SVG-style button decoration remains intact. */
a.yo-3d-button.yo-magnetic:hover{transform:translate3d(var(--yo-mag-x),calc(var(--yo-mag-y) - 2px),0)}
/* A tasteful light pass over other button surfaces, without affecting their text. */
a.yo-magnetic:not(.yo-3d-button){overflow:hidden;isolation:isolate}
a.yo-magnetic:not(.yo-3d-button)::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(112deg,transparent 25%,rgba(255,255,255,.28) 48%,transparent 70%);transform:translateX(-165%) skewX(-14deg);transition:transform .62s cubic-bezier(.2,.7,.2,1);z-index:0}
a.yo-magnetic:not(.yo-3d-button):hover::after,a.yo-magnetic:not(.yo-3d-button):focus-visible::after{transform:translateX(165%) skewX(-14deg)}
a.yo-magnetic:focus-visible,button.yo-magnetic:focus-visible{outline:3px solid #ffb44f;outline-offset:4px}
/* Tablet/mobile: readability and tap targets matter more than dense layouts. */
@media(max-width:1100px){
 .hero .hero-grid{gap:clamp(18px,3vw,36px)}
 .hero .hero-copy h1{font-size:clamp(38px,4.5vw,55px)}
 .hero .poster-frame{height:clamp(330px,40vw,450px)}
}
@media(max-width:850px){
 .hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
 .hero .hero-copy{text-align:center}
 .hero .hero-copy h1{max-width:23ch;margin-inline:auto;font-size:clamp(34px,6vw,53px)}
 .hero .hero-copy .lead{margin-inline:auto}
 .hero .trust-tags,.hero .hero-actions,.hero .hero-stats{justify-content:center}
 .hero .hero-visual{max-width:690px;margin-inline:auto}
 .hero .poster-frame{height:clamp(330px,60vw,490px)}
 .hero{padding-block:35px 44px}
}
@media(max-width:600px){
 :root{--yo-wide-gutter:14px}
 .hero .hero-grid{gap:23px}
 .hero .hero-copy h1{font-size:clamp(32px,8.7vw,43px);line-height:1.19}
 .hero .hero-copy .lead{font-size:16px;line-height:1.6}
 .hero .poster-frame{height:clamp(290px,89vw,405px)}
 .hero .hero-actions .btn{max-width:100%}
 .section{padding-block:46px}
 #services .yo-services-slider .yo-slider-card{flex-basis:min(83vw,330px)}
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
 a.yo-magnetic,button.yo-magnetic,a.yo-magnetic:hover,button.yo-magnetic:hover,a.yo-3d-button.yo-magnetic:hover{transform:none!important;will-change:auto}
 a.yo-magnetic:not(.yo-3d-button)::after{display:none}
}