/* Fluid page shell. Component styles own the demonstrations inside these layouts. */
:root{--page-gutter:clamp(20px,3.2vw,88px);--section-space:clamp(40px,4vw,64px)}
.wrap{width:calc(100% - var(--page-gutter)*2);max-width:2160px;margin-inline:auto}
.nav{height:80px;gap:clamp(20px,2vw,38px)}
.hero{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(22px,2.5vw,52px);min-height:0;padding-block:32px 24px}
.hero-copy,.hero-art,.section-heading>*{min-width:0}
.hero h1{font-size:clamp(44px,4.1vw,72px);margin-top:22px}
.hero-lead{max-width:440px;font-size:clamp(15px,1vw,18px)}
.hero-actions{gap:18px 24px;margin-top:28px}
.byline{margin-top:30px}
.hero-art{height:auto;aspect-ratio:1.49;max-height:600px;min-height:0;margin:0}
.hero-sculpture{padding:0}
.engine{height:100%;width:100%}
.art-top,.art-foot{left:12px;right:12px}
.art-top{top:0}.art-foot{bottom:8px}
.intro{white-space:normal}
.section-heading,.projects .section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:24px 48px;align-items:end;margin-bottom:28px}
.section-heading>p,.projects .section-heading>p,.nd-intro{max-width:460px;justify-self:start}
.section-heading>p{padding:0}
.solutions,.projects,.nodarya-section{padding-block:var(--section-space)}
.solutions{padding-top:24px;padding-bottom:44px}
.section-heading h2,.solutions .section-heading h2,.approach .section-heading h2,.projects .section-heading h2,.nodarya-section>.section-heading h2{font-size:clamp(30px,2.4vw,44px)}
.solution-grid{gap:clamp(24px,3vw,56px);padding-top:26px}
.solution-grid article{min-width:0}
.solution-grid p,.delivery p{max-width:42ch}
.approach{padding-block:var(--section-space)}
.about{padding-block:48px 56px;grid-template-columns:clamp(210px,17vw,300px) minmax(0,1fr) 160px;gap:clamp(32px,4vw,72px)}
.about-copy>p:not(.section-label){max-width:65ch}
.portrait{height:auto;aspect-ratio:3/4}
.signature-mark{justify-self:end}
.contact-section{padding-block:56px}
.contact{grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:48px}
.contact-actions{justify-self:start}
.contact h2{font-size:clamp(42px,3.5vw,60px)}
/* Wide screens use a compact project rail, keeping the working area close to the navigation. */
@media(min-width:1200px){
 .project-browser{display:grid;grid-template-columns:clamp(190px,13vw,252px) minmax(0,1fr);gap:24px;align-items:start}
 .project-list{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;padding:0;margin:0;overflow:visible}
 .project-list button{flex-direction:row;justify-content:flex-start;align-items:center;gap:13px;width:100%;min-height:62px;padding:13px 15px;text-align:left;font-size:13px;line-height:1.4}
 .project-list button svg{width:22px;height:22px}
 .project-list button span{min-width:0;overflow-wrap:break-word}
 .project-panel{min-width:0}
 .lab-header,.lab-brief{padding-inline:clamp(22px,2vw,38px)}
 .live-workspace{padding-inline:clamp(22px,2vw,38px)}
 .live-message{max-width:min(88%,440px)}
 .lab-brief h4{max-width:32ch;font-size:clamp(17px,1.15vw,21px)}
 .lab-brief p{max-width:42ch;font-size:12px}
}
@media(min-width:1101px){
 .nd-scene{height:clamp(610px,33vw,660px)}
 .nd-map-layout{grid-template-columns:minmax(0,1fr) clamp(250px,18vw,360px)}
 .nd-map{max-height:480px}
 .nd-map-shell{padding:22px 30px}
 .nd-sources-layout{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);padding:36px clamp(36px,4vw,80px)}
 .nd-extraction{padding-left:20px}
 .nd-excerpt p{max-width:48ch}
 .nd-document-layout{grid-template-columns:clamp(220px,22vw,340px) minmax(0,1fr);gap:36px;padding:24px 36px}
 .nd-document-sidebar{justify-self:start}
 .nd-procedure{max-width:none;margin:0}
 .nd-procedure h4{font-size:22px}
 .nd-doc-objective{font-size:11px;max-width:66ch}
 .nd-procedure li{padding:6px 0}
 .nd-procedure li strong{font-size:12px}
 .nd-procedure li p{font-size:10px;max-width:75ch}
 .nd-procedure li em,.nd-doc-meta,.nd-doc-bottom,.nd-procedure footer{font-size:9px}
}
@media(min-width:761px) and (max-width:1100px){
 .hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:18px;padding-top:30px}
 .hero h1{font-size:clamp(40px,4.8vw,53px)}
 .hero-lead{font-size:15px;max-width:32ch;padding:0}
 .hero-art{aspect-ratio:1.25;min-height:0}
 .art-top,.art-foot{font-size:8px}
 .hero-actions{gap:16px;margin-top:24px}.hero-actions .button{font-size:12px;gap:16px;padding:12px 16px}
 .byline{margin-top:24px}.intro{font-size:10px}
 .section-heading,.projects .section-heading{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:28px}
 .about{grid-template-columns:210px minmax(0,1fr);gap:32px}.signature-mark{display:none}
}
@media(min-width:701px) and (max-width:1100px){
 .nd-intro{margin-top:0}
 .nd-sources-layout{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);padding:28px}
}
@media(min-width:761px) and (max-width:900px){
 .nav nav{gap:17px}.nav nav a,.nav-contact{font-size:12px}
 .live-workspace{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);padding:0 18px}
 .live-source{padding:19px 12px 20px 0}.live-result{padding:19px 0 20px 12px}
 .live-transfer{height:auto;border-inline:1px solid #624a352e}
 .live-transfer:before{top:50%}.live-transfer i{top:50%}
 .live-chat-stream{height:293px}.live-result-body{height:400px}
 .live-pane-title small{display:none}
 .live-context{grid-template-columns:repeat(3,minmax(0,1fr))}
 .live-task{padding:16px}.live-task h4{font-size:23px}
 .task-fields{gap:15px}.task-contact{gap:7px}
 .task-contact>span:last-child{display:none}
 .live-product{gap:12px;padding:12px}.live-product h4{font-size:23px}.live-product-art{height:190px}
}
@media(max-width:760px){
 .nav{height:72px;gap:14px}.nav nav{top:72px}
 .hero{display:flex;gap:0;padding:28px 0 12px}
 .hero h1{font-size:clamp(40px,8.8vw,62px);margin-top:18px}
 .hero-lead{font-size:15px;max-width:38ch;margin-top:18px}
 .hero-actions{margin-top:22px;gap:16px 20px}.byline{margin-top:24px}
 .hero-art{width:100%;height:auto;aspect-ratio:1.45;min-height:0;max-height:none;margin:20px 0 0}
 .art-top,.art-foot{left:0;right:0;font-size:8px}.art-foot{bottom:0;padding-top:8px}
 .section-heading,.projects .section-heading{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:24px}
 .section-heading>p,.projects .section-heading>p{font-size:13px;max-width:44ch;margin-top:0}
 .section-heading>p br{display:none}
 .solutions{padding-block:28px 40px}.solution-grid{gap:24px}
 .projects,.nodarya-section,.approach{padding-block:40px}
 .about{grid-template-columns:120px minmax(0,1fr);gap:24px;padding-block:36px 44px;align-items:start}
 .portrait{margin-top:26px;height:auto;aspect-ratio:2/3}.signature-mark{display:none}
 .about h2{font-size:clamp(25px,4vw,32px)}
 .contact-section{padding-block:40px}.contact{grid-template-columns:1fr;gap:28px}
 .contact h2{font-size:44px}
 .nd-intro{margin-top:0;max-width:44ch}
 .live-source,.live-result,.live-result-body{min-width:0}
}
@media(max-width:380px){
 .nav{gap:10px}.brand{gap:9px}.brand b{font-size:15px}.brand small{font-size:6px}
 .nav-contact{gap:7px;font-size:10px}.menu-toggle{width:30px;padding:5px}
 .hero-actions .button{padding:12px 15px;gap:18px}
 .about{grid-template-columns:95px minmax(0,1fr);gap:18px}
 .lab-header{flex-wrap:wrap}.lab-heading{min-width:150px}.playback-controls{margin-left:auto}
 .live-context{grid-template-columns:repeat(3,minmax(0,1fr))}
 .live-fact{padding:7px 6px}.live-fact>strong{overflow-wrap:anywhere}
 .footer{gap:12px}.footer>span{max-width:115px;text-align:right}
}

/* A tablet gives the illustration its own row, with compact copy above it. */
@media(min-width:600px) and (max-width:1000px){
 .hero{display:block;padding-top:28px}
 .hero-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px}
 .hero-copy .intro{grid-column:1/-1}
 .hero h1{font-size:clamp(40px,5.6vw,56px);margin-top:22px}
 .hero-summary{padding-top:24px;min-width:0}
 .hero-lead{margin-top:0;max-width:36ch}
 .hero-actions{margin-top:20px;gap:14px}
 .hero-actions .button{font-size:12px;gap:16px;padding:12px 16px}
 .byline{margin-top:20px}.byline-rule{display:none}
 .hero-art{width:100%;aspect-ratio:1.8;max-height:420px;margin:18px 0 0}
 .art-top,.art-foot{font-size:9px}
}
@media(max-width:700px){
 .nd-map-shell{min-height:0}
 .nd-document-layout{padding:14px 12px;gap:12px}
 .nd-document-sidebar .nd-finished{display:none}
}

@media(max-width:350px){
 .nd-procedure{padding:12px}
 .nd-procedure li{padding:7px 0}
}