/* Responsive content frames, shared across the public site. */
:root{--site-header:72px;--site-gutter:max(32px,calc((100% - 1280px)/2));--section-space:48px}
html{scroll-padding-top:var(--site-header);scroll-snap-type:none;scroll-behavior:auto}
body{overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
header{height:var(--site-header);padding:0 var(--site-gutter);gap:20px}
header .brand{flex:0 0 auto;min-width:0;width:132px;height:44px}
header .brand img{width:132px;height:auto;max-height:44px;object-fit:contain}
header>nav{display:flex;gap:clamp(14px,2vw,30px);min-width:0}
header>nav a{font-size:14px;white-space:nowrap}
.header-end{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.header-end .lang,.case-language a{min-width:36px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.header-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;background:#237f51;color:white;white-space:nowrap;font-size:14px}
.header-whatsapp svg{width:20px;height:20px;flex:none}
.nav-popup{display:none;position:relative}
.nav-popup>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px;cursor:pointer;list-style:none;color:#234892;font-size:13px}
.nav-popup>summary::-webkit-details-marker{display:none}
.nav-popup svg{width:20px;height:20px}
header .nav-popup nav{position:absolute;top:calc(100% + 12px);right:0;display:grid;gap:0;width:min(340px,88vw);padding:8px;background:white;border:1px solid #dce5f3;box-shadow:0 12px 32px #17243a20}
header .nav-popup nav a{padding:14px;font-size:15px;white-space:normal}
a,button,summary{touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #5eac74;outline-offset:4px}
main>section[id]{scroll-margin-top:0;scroll-snap-align:none}
.assembly{height:220svh;min-height:0}
.assembly .sticky{height:100svh;min-height:0}
.assembly .hero-copy{top:var(--site-header);bottom:156px;left:var(--site-gutter);width:min(560px,calc((100% - 96px)/2));display:flex;flex-direction:column;justify-content:center}
.assembly .hero-copy h1{font-size:clamp(42px,5vw,80px);line-height:1.06;margin:16px 0}
.assembly .hero-copy .eyebrow{margin:0;font-size:11px}
.assembly .hero-copy .intro{display:block;max-width:440px;font-size:16px;line-height:1.5;margin:16px 0 10px}
.production-geography{max-width:430px;font-size:14px;line-height:1.5;color:#234892;margin:10px 0 16px;font-weight:600}
.assembly .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:16px}
.assembly .hero-actions .button{padding:13px 18px;font-size:14px;min-height:46px}
.assembly .hero-actions .text-link{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.assembly #scene{top:var(--site-header);bottom:94px;right:var(--site-gutter);width:min(660px,calc((100% - 48px)/2))}
.assembly .scene-controls,#home .scene-controls{left:var(--site-gutter);right:auto;bottom:100px;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;max-width:44%;z-index:6}
.assembly .scene-controls button,#home .scene-controls #play,#home .scene-controls #skip-assembly{display:inline-flex;min-height:44px;padding:9px 12px;font-size:12px;align-items:center;justify-content:center}
.assembly .stage-caption{padding:14px var(--site-gutter);min-height:78px;gap:20px}
.assembly .stage-panel{left:var(--site-gutter);width:min(520px,calc((100% - 96px)/2));top:45%}
.stage-name{font-size:clamp(28px,3.4vw,52px);margin-bottom:12px}
.stage-text{font-size:17px}
.assembly .scroll-note{display:none}
.section,#projects.work-section{padding:var(--section-space) var(--site-gutter);scroll-margin-top:0}
.section-heading{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:24px;margin-bottom:28px}
.section-heading h2,.process-intro h2,.work-heading h2{font-size:clamp(28px,3vw,44px);line-height:1.15;margin:0}
.section-heading .eyebrow,.process-intro .eyebrow,.work-heading .eyebrow{margin:0 0 12px}
.section-desc{font-size:15px;line-height:1.55;margin:0}
.service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#e5eaf3}
.service-row,.service-row:nth-child(n+4),.service-row:last-child{padding:24px;min-height:0;border:0;display:block;grid-column:auto}
.service-row:last-child{grid-column:span 2}
.service-row summary{list-style:none;display:flex;gap:12px;align-items:center;cursor:pointer}
.service-row summary::-webkit-details-marker{display:none}
.service-row .service-icon{width:28px;height:28px;min-width:28px;margin:0}
.service-row h3{font-size:18px;line-height:1.3;margin:0;flex:1}
.service-chevron{width:16px;height:16px;flex:none;transition:transform 160ms ease}
.service-row[open] .service-chevron{transform:rotate(180deg)}
.service-row p{font-size:14px;line-height:1.5;margin:12px 0 0;max-width:none}
.service-contact{display:inline-flex;align-items:center;gap:8px;font-size:13px;min-height:36px;margin-top:8px;color:#234892;text-decoration:underline;text-underline-offset:4px}
.service-row:last-child .service-contact{color:white}
.feature-scene{height:min(640px,calc(100svh - var(--site-header)));min-height:0;padding:28px var(--site-gutter)}
.feature-copy{width:43%;max-width:520px}
.feature-copy h2{font-size:clamp(32px,3.7vw,54px);margin:18px 0}
.feature-copy p:not(.eyebrow){font-size:16px;line-height:1.55}
.feature-controls{margin-top:18px}
.work-heading{margin-bottom:24px;gap:24px}
.work-heading p:not(.eyebrow){font-size:15px;line-height:1.5}
.work-toolbar{margin:24px 0;gap:16px}
.work-filter{font-size:13px;padding:10px 12px;min-height:40px}
.work-picture{aspect-ratio:1.7}
.work-track{overflow-y:hidden;overscroll-behavior-y:auto}
.work-name{font-size:18px}
.work-bottom{margin-top:24px}
.process-intro{column-gap:30px}
.process-intro .eyebrow{margin-bottom:12px}
.process-intro>p:not(.eyebrow){font-size:15px;line-height:1.55}
.process-intro .text-link{margin-top:12px;min-height:36px}
.steps{padding-top:36px;gap:32px}
.step,.step:first-child,.step:nth-child(even),main>.process .step{min-height:0;padding:0}
.step>span{font-size:40px;letter-spacing:0;margin:0 0 16px}
.step h3{font-size:20px;margin:0 0 12px}
.step p{font-size:15px;line-height:1.5;margin:0}
.contact h2{font-size:clamp(24px,3vw,38px);line-height:1.15;margin:12px 0 32px;text-wrap:balance}
.contact>h2,.contact>.eyebrow,.contact-layout{max-width:1280px;margin-inline:auto}
main>.contact{margin-top:0}
.contact>.eyebrow{margin:0 auto}
.contact-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:stretch}
.contact-grid{gap:18px}
.contact-grid>div>p{font-size:15px;line-height:1.5;margin:0 0 16px}
.contact-details{gap:12px}
.contact-details>a:not(.instagram){font-size:clamp(18px,2vw,25px);overflow-wrap:anywhere}
.contact-grid .contact-details .small{font-size:14px;line-height:1.5}
.contact-grid p{margin:0}
.contact .button{min-height:46px;padding:12px 18px;font-size:15px}
.map-toggle{min-width:0}
.map-toggle .map-block,.contact-layout>.map-block{margin:0;display:flex;flex-direction:column}
.contact-layout>.map-block{grid-column:1;grid-row:1;align-self:stretch;min-width:0}
.map-toggle>summary{display:none}
.map-block iframe{height:250px;min-height:250px;flex:1}
.map-heading{padding:12px 16px;font-size:12px}
.map-route{padding:12px 16px;font-size:13px}
.instagram{font-size:14px}
footer{padding:20px var(--site-gutter);gap:16px;flex-wrap:wrap}
.portfolio-main{padding:calc(var(--site-header) + var(--section-space)) var(--site-gutter) var(--section-space)}
.portfolio-intro{gap:24px;margin-bottom:20px}
.portfolio-intro h1{font-size:clamp(32px,4vw,58px)}
.portfolio-breadcrumb{margin-bottom:16px}
.work-viewer{max-height:calc(100svh - 24px);overflow-y:auto}
.work-viewer-top{position:sticky;top:0;z-index:2;background:#10294b;padding:10px 16px}
.work-stage{height:min(52svh,540px)}
.work-viewer-info{padding:16px;gap:16px}
.work-viewer-info h2{font-size:24px}
.work-viewer-actions{padding:0 16px 18px;gap:16px;flex-wrap:wrap}
.project-page main{max-width:none;margin:0;padding:calc(var(--site-header) + var(--section-space)) var(--site-gutter) var(--section-space)}
.case-main .case-back{display:inline-flex;align-items:center;gap:8px;line-height:1.5}
/* Content is visible before JavaScript and never waits for an observer. */
[data-reveal],[data-reveal].is-revealed{opacity:1;transform:none;transition:none}
.contact [data-reveal],header a{opacity:1;visibility:visible}
@media(min-width:901px) and (min-height:651px){.service-row summary{cursor:default;min-height:32px}.service-row p{min-height:4.5em}.service-chevron{display:none}}
@media(max-width:1100px){
 header>nav{display:none}.nav-popup{display:block}
 .header-end{margin-left:auto}
}
@media(max-width:900px),(max-height:650px){
 .section-heading{display:block}.section-heading .eyebrow{margin-bottom:8px}
 .section-heading h2{font-size:28px}.section-desc{margin-top:10px}
 .service-list{display:block;background:white}
 .service-row,.service-row:nth-child(n+4),.service-row:last-child{padding:0;border-bottom:1px solid #dce5f3;grid-column:auto}
 .service-row summary{padding:12px 14px;min-height:48px}
 .service-row h3{font-size:16px}
 .service-row p{padding:0 14px;margin:0 0 4px}
 .service-contact{margin:0 14px 10px}
 .service-row .service-icon{width:24px;height:24px;min-width:24px}
}
@media(max-width:700px){
 :root{--site-header:64px;--site-gutter:20px;--section-space:32px}
 header{gap:8px}.header-end{gap:4px}
 header .brand{width:108px}header .brand img{width:108px}
 .header-whatsapp{padding:10px;min-width:44px}
 .header-whatsapp span{display:none}
 .nav-popup>summary{padding:8px;min-width:40px}
 .nav-popup .menu-label{display:none}
 .header-end .lang,.case-language a{min-width:32px;font-size:12px}
 .assembly{height:200svh;min-height:0}
 .assembly .hero-copy{top:calc(var(--site-header) + 18px);bottom:auto;display:block;width:calc(100% - 40px);left:20px}
 .assembly .hero-copy h1{font-size:clamp(32px,8vw,48px);margin:10px 0}
 .assembly .hero-copy .eyebrow{font-size:9px}
 .assembly .hero-copy .intro{display:block;max-width:none;font-size:14px;line-height:1.45;margin:12px 0 8px}
 .production-geography{font-size:13px;line-height:1.4;margin:8px 0 12px;max-width:none}
 .assembly .hero-actions{gap:8px 14px;margin-top:10px}
 .assembly .hero-actions .button{font-size:13px;padding:11px 14px;min-height:44px}
 .assembly .hero-actions .text-link{font-size:13px}
 .assembly #scene{top:390px;bottom:122px;width:100%;left:0;right:0}
 .assembly .scene-controls,#home .scene-controls{left:20px;bottom:80px;max-width:calc(100% - 40px);gap:8px}
 .assembly .stage-caption{min-height:64px;padding:10px 20px;gap:12px}
 .assembly .stage-caption p{font-size:11px}.stage-caption .eyebrow{font-size:9px}
 .assembly .stage-panel{top:calc(var(--site-header) + 24px);width:calc(100% - 40px);left:20px;transform:translateY(-12px)}
 .assembly.is-building .stage-panel{transform:none}
 .stage-name{font-size:28px}.stage-text{font-size:15px}
 .section,#projects.work-section{padding:var(--section-space) var(--site-gutter)}
 .section-heading{margin-bottom:24px}.section-heading h2{font-size:27px}
 .feature-scene{height:min(620px,calc(100svh - var(--site-header)));padding:24px 20px;align-items:flex-end}
 .feature-copy{width:100%;max-width:none}.feature-copy h2{font-size:30px;margin:12px 0}
 .feature-copy p:not(.eyebrow){font-size:14px;line-height:1.5;max-width:100%}
 .feature-images{inset:0 0 120px}.feature-scene:after{background:linear-gradient(180deg,transparent,#112649 65%)}
 .feature-controls{margin-top:12px}
 .work-heading{display:block}.work-heading h2{font-size:28px;margin:0}.work-heading p:not(.eyebrow){margin-top:10px;font-size:14px}
 .work-toolbar{margin:20px 0}.work-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:6px;padding-bottom:6px}.work-filter{flex:none;font-size:12px;padding:8px 10px;min-height:44px;white-space:nowrap}
 .work-picture{aspect-ratio:1.6}.work-card{flex-basis:85%}.work-name{font-size:17px}
 .work-track{gap:14px}.work-bottom{margin-top:20px;flex-direction:row;align-items:center;gap:8px}.work-bottom .work-status{font-size:11px}.work-bottom .work-link{font-size:13px;padding:10px 0;white-space:nowrap}
 .work-arrows{left:-10px;right:-10px}
 .process-intro{display:block}.process-intro h2{font-size:28px;margin:10px 0 14px}
 .process-intro>p:not(.eyebrow){font-size:14px}.process-intro .text-link{margin-top:10px;font-size:14px}
 main>.process .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-top:28px}
 .step>span{font-size:30px;margin-bottom:8px}.step h3{font-size:17px;margin-bottom:8px}.step p{font-size:13px;line-height:1.45}
 .contact h2{font-size:clamp(23px,5.5vw,32px);margin:12px 0 18px;white-space:normal;text-wrap:wrap}
 .contact-layout{display:flex;flex-direction:column;gap:16px}.contact-grid{width:100%;gap:16px}
 .contact-grid>div>p{font-size:14px;margin-bottom:12px}
 .contact-details{gap:10px}.contact-details>a:not(.instagram){font-size:21px}
 .contact-grid .contact-details .small{font-size:13px}
 .map-toggle{width:100%;border:1px solid #ffffff40}
 .map-toggle>summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;min-height:44px;list-style:none;cursor:pointer}
 .map-toggle>summary::-webkit-details-marker{display:none}
 .map-toggle>summary:after{content:'⌄'}
 .map-toggle[open]>summary:after{content:'⌃'}
 .map-block iframe{height:220px;min-height:0;flex:none}
 footer{font-size:11px;padding:18px 20px}
 .portfolio-main{padding:calc(var(--site-header) + var(--section-space)) var(--site-gutter) var(--section-space)}
 .portfolio-intro{display:block}.portfolio-intro h1{font-size:32px}.portfolio-intro p{font-size:14px;margin-top:12px}
 .portfolio-grid{gap:24px 14px}.portfolio-grid .work-name{font-size:17px}
 .work-stage{height:38svh}.work-viewer-info{display:block}.work-viewer-nav{margin-top:12px;flex-direction:row}.work-viewer-info h2{font-size:21px}.work-viewer-info p{font-size:14px}
}
@media(max-height:700px) and (min-width:701px){
 :root{--section-space:40px}
 .assembly .hero-copy{top:var(--site-header)}
 .assembly .hero-copy h1{font-size:clamp(36px,4.6vw,62px);margin:10px 0}
 .assembly .hero-copy .intro{font-size:14px;line-height:1.45;margin:10px 0 6px}
 .production-geography{font-size:13px;margin:8px 0}
 .assembly .hero-actions{margin-top:10px}
 .section,#projects.work-section{padding-top:var(--section-space);padding-bottom:var(--section-space)}
 .contact h2{font-size:36px;margin-bottom:16px}.contact-layout{gap:24px}
 .map-block iframe{height:210px}.contact-grid>div>p{font-size:14px}
 .contact-details{gap:8px}.contact-grid{gap:12px}
 .work-filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:6px}.work-filter{flex:none;white-space:nowrap}
 #projects .work-picture{aspect-ratio:2}
}
@media(max-height:500px) and (min-width:701px){
 .assembly .hero-copy{top:var(--site-header);bottom:82px;width:48%}.assembly .hero-copy h1{font-size:28px;margin:6px 0}
 .assembly .hero-copy .eyebrow{font-size:9px}.assembly .hero-copy .intro{font-size:12px;line-height:1.35;margin:6px 0}
 .production-geography{font-size:11px;line-height:1.35;margin:6px 0}.assembly .hero-actions{gap:8px;margin-top:6px}
 .assembly .hero-actions .button{font-size:12px;min-height:40px;padding:10px}.assembly .hero-actions .text-link{font-size:12px}
 .assembly .scene-controls,#home .scene-controls{left:auto;right:var(--site-gutter);bottom:82px;max-width:44%}
 .assembly #scene{width:48%;bottom:130px}.assembly .stage-caption{min-height:64px}
}
@media(max-height:650px) and (max-width:700px){
 :root{--section-space:28px}
 .assembly .hero-copy{top:76px}
 .assembly .hero-copy h1{font-size:30px}
 .assembly .hero-copy .intro{font-size:12px;line-height:1.4;margin:8px 0}
 .production-geography{font-size:12px;margin:6px 0}
 .assembly #scene,html[lang="kk"] .assembly #scene{top:380px;bottom:118px}
 .section,#projects.work-section{padding-top:var(--section-space);padding-bottom:var(--section-space)}
 .section-heading h2,.process-intro h2{font-size:24px}
 .service-row summary{padding:8px 10px;min-height:44px}
 .service-row h3{font-size:14px}.service-row p{font-size:13px;line-height:1.4}
 .service-contact{min-height:30px;font-size:12px;margin-bottom:6px}
 main>.process .steps{gap:24px 16px;padding-top:24px}.step>span{font-size:28px;margin-bottom:12px}.step h3{font-size:16px;margin-bottom:10px}.step p{font-size:13px}
 .contact-grid{gap:12px}.contact-details{gap:8px}.contact h2{margin:8px 0 14px}
 .contact-grid>div>p{font-size:13px;margin-bottom:10px}.contact .button{min-height:42px}
}
@media(max-width:350px){
 .section-heading{margin-bottom:20px}.section-desc{font-size:14px;line-height:1.5}
 .process-intro h2{margin:6px 0 8px}.process-intro>p:not(.eyebrow){font-size:12px;line-height:1.4}
 .process-intro .text-link{margin-top:6px;min-height:32px}
 .contact-layout{gap:10px}.contact-grid{gap:10px}.contact-details{gap:6px}
 .contact-grid .contact-details .small{font-size:12px;line-height:1.4}
 .work-heading p:not(.eyebrow){font-size:13px;line-height:1.4}
 #projects .work-card{flex-basis:80%}#projects .work-picture{aspect-ratio:1.9}.work-track{min-height:0}
 .step p{line-height:1.35}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}*,*::before,*::after{scroll-behavior:auto!important}.service-chevron{transition:none}}
/* Portrait phones: while building, the stella starts under the tallest stage caption (set by scene-assembly.js). */
@media(max-width:700px){html[lang] .assembly.is-building #scene{top:min(calc(var(--stage-bottom,380px) + 12px),380px)}}