/* Keep the composition together on wide screens while colour fills the viewport. */
@media(min-width:1000px){
 .page-hero{padding-inline:max(5vw,calc((100vw - 1600px)/2));padding-bottom:clamp(48px,4vw,76px)}
 .page-hero>.breadcrumb{margin-bottom:clamp(28px,3vw,52px)}
 .page-hero>.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);max-width:1600px;margin-inline:auto;align-items:center;height:auto}
 .page-hero h1{font-size:clamp(84px,7.6vw,144px)}
 .page-hero .hero-description{max-width:540px;font-size:clamp(18px,1.12vw,21px)}
 .page-hero .hero-side{min-width:0;padding-top:0}
 .page-hero .hero-media,.page-hero .kinetic-figure .sessions-film,.page-hero .kinetic-figure .schematic,.page-hero .kinetic-figure canvas{height:clamp(340px,31vw,540px);min-height:0}
 .page-hero .kinetic-figure canvas.illustration-alpha{height:100%}
 .page-hero .hero-side>p{max-width:390px;margin:12px auto 0;font-size:16px;line-height:1.6}
 .page-tabs{padding-inline:max(5vw,calc((100vw - 1600px)/2))}
 main>.journey>.hero{padding:clamp(32px,3vw,64px) max(5vw,calc((100vw - 1500px)/2))}
 main>.journey .hero-grid{max-width:1500px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
 main>.journey .copy{padding:10px 0 24px}
 main>.journey h1{font-size:clamp(90px,7.6vw,140px)}
 main>.journey .sculpture{width:112%;margin-left:-8%;height:clamp(460px,43vw,720px);min-height:0}
 main>.journey .hero-details{max-width:540px}
 #home.shell{width:90%;max-width:1600px;margin-inline:auto;padding-inline:0}
}
@media(min-width:1800px){
 .page-hero{padding-top:38px}
 .page-hero .hero-side{transform:translateX(-12px)}
}

.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The card group shares the page surface, without an inset dark panel. */
#home.shell{background:transparent;padding-top:0}
#home .portal::after{display:none}
#home .portal .illustration-alpha,#home .portal canvas{mask-image:none;-webkit-mask-image:none}
#home .portal .sessions-film{top:32px;left:3%;width:94%;height:51%;overflow:visible}
.illustration-alpha{mask-image:none!important;-webkit-mask-image:none!important;object-fit:contain}

/* One typographic voice for the home opening. */
main>.journey .home-intro-label{font:500 11px/1.4 'DM Sans',sans-serif;letter-spacing:.19em;color:#b1b1aa;margin:0 0 26px}
main>.journey #headline{font-family:'Barlow Condensed',sans-serif;font-size:clamp(72px,8.5vw,148px);line-height:.94;letter-spacing:-.025em;text-transform:uppercase;margin:0}
main>.journey #headline>span{display:block}
main>.journey #headline em{display:block;font:inherit;font-size:.72em;font-style:normal;letter-spacing:-.02em;line-height:1.08;margin:12px 0 0;white-space:nowrap}
main>.journey .hero-details{margin-top:32px;max-width:510px}
main>.journey .team-description{font-size:17px;line-height:1.65;max-width:440px;margin:0 0 28px;color:#c4c4be}
main>.journey .service-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
main>.journey .service-list .service-row{display:block;padding:0;border:0;font-size:15px}
main>.journey .service-list .service-row span{display:block;margin-top:4px;font-size:12px;color:#a7a7a2}
main>.journey .hero-contact{margin-top:30px}
@media(max-width:600px){
 main>.journey .home-intro-label{grid-row:1;margin-bottom:18px}
 main>.journey #headline{grid-row:2;font-size:clamp(62px,16vw,94px)}
 main>.journey .sculpture{grid-row:3}
 main>.journey .hero-details{grid-row:4;margin-top:0}
 main>.journey .team-description{font-size:15px}
 main>.journey .service-list{gap:18px 14px}
}

/* The page begins directly with its content, below the shared header. */
.page-hero{padding-top:clamp(32px,4vw,64px)}

/* Keep the pinned opening and its progress line visible on shorter desktops. */
@media(min-width:801px) and (max-height:800px){
 main>.journey>.hero{padding-top:20px;padding-bottom:20px}
 main>.journey .sculpture{height:calc(100svh - 136px);min-height:0}
 main>.journey .copy{padding:0}
 main>.journey #headline{font-size:clamp(60px,7vw,92px)}
 main>.journey .hero-details{margin-top:20px}
 main>.journey .team-description{font-size:15px;margin-bottom:20px}
 main>.journey .service-list{gap:12px 24px}
 main>.journey .hero-contact{margin-top:20px}
}

/* Fit the complete mobile opening beneath the navigation during the scroll turn. */
@media(max-width:800px){
 main>.journey>.hero{position:sticky;top:var(--hero-pin-top,78px);padding-top:14px;padding-bottom:18px}
 main>.journey .copy{display:contents}
 main>.journey .hero-grid{grid-template-columns:minmax(0,1fr);height:calc(100svh - 110px);min-height:0;grid-template-rows:auto minmax(100px,1fr) auto;gap:8px}
 main>.journey #headline{grid-row:1;font-size:clamp(40px,10vw,64px)}
 main>.journey #headline em{margin-top:5px}
 main>.journey .sculpture{grid-row:2;height:100%;min-height:0;margin:0;align-self:stretch}
 main>.journey .hero-details{grid-row:3;margin:0}
 main>.journey .team-description{font-size:13px;line-height:1.45;margin-bottom:12px}
 main>.journey .service-list{gap:8px 14px}
 main>.journey .service-list .service-row{font-size:13px}
 main>.journey .service-list .service-row span{font-size:11px;margin-top:2px}
 main>.journey .hero-contact{margin-top:12px}
 main>.journey .inquiry-button{padding:9px 16px;font-size:12px}
}
.journey .progress{display:none!important}
@media(prefers-reduced-motion:reduce){main>.journey>.hero{position:relative;top:0}}
.still main>.journey>.hero{position:relative;top:0}

/* A small local progress track belongs to the logo, never to the section edge. */
.journey .logo-progress{position:absolute;left:50%;bottom:12px;width:112px;height:3px;transform:translateX(-50%);background:rgba(242,240,231,.15);border-radius:3px;overflow:hidden;pointer-events:none;opacity:var(--progress-visibility,0)}
.journey .logo-progress span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff713d 0%,#f65ca4 33%,#b7e66d 66%,#779cff 100%);transform:scaleX(var(--progress,0));transform-origin:left}
@media(max-width:800px){
 main>.journey #headline{font-size:clamp(40px,10vw,56px);line-height:.94}
 main>.journey #headline em{margin-top:3px;line-height:1}
 .journey .logo-progress{width:88px;height:2px;bottom:12px}
 main>.journey .team-description{margin-top:6px}
}
.still .logo-progress{display:none}
@media(prefers-reduced-motion:reduce){.journey .logo-progress{display:none}}

/* Desktop cards are already present; only the opening logo controls the scroll pause. */
@media(min-width:801px){
 #home .portals,#home.enter .portal,body.enter #home .portals{animation:none!important}
 #home .portals.motion-waiting,#home .portal.motion-waiting{opacity:1;translate:0}
}


/* Cards share the opening's scroll hold instead of approaching from below. */
#home.shell{position:relative;transition:none}

/* A single native sticky surface holds the opening and cards together. */
main>.journey{position:sticky;top:96px;height:auto}
main>.journey>.hero{position:relative;top:0}
.still main>.journey{position:relative;top:0!important}
@media(prefers-reduced-motion:reduce){main>.journey{position:relative;top:0!important}}

.journey .service-list button.service-row{appearance:none;-webkit-appearance:none;text-align:left;font-family:inherit;cursor:pointer;width:100%;color:inherit;pointer-events:auto;border-radius:0}