/* Thermal case v7.1: large unmasked image, copy on the right. */
.thermal-feature { position:relative; min-height:1600px; height:1600px; margin:0 0 clamp(110px,14vw,210px); overflow:visible; isolation:isolate; }
.thermal-feature > img { animation:none!important; clip-path:none!important; opacity:1!important; }
.thermal-feature > img { position:absolute; z-index:0; top:0; left:var(--gutter); right:auto; width:auto; height:1600px; max-width:none; max-height:none; object-fit:contain; object-position:left top; transform:translate3d(0,var(--thermal-shift,0px),0); filter:none; will-change:transform; }
.thermal-copy { position:absolute; z-index:1; top:0; left:calc(50% + 40px); width:min(560px,38vw); padding:clamp(120px,10vw,220px) 0 0; }
.thermal-copy h2 { margin:18px 0 25px; font:400 clamp(32px,4vw,68px)/1.16 LongPixel,monospace; overflow-wrap:normal; }
.thermal-copy p { max-width:520px; font-size:clamp(16px,1.3vw,21px); line-height:1.55; color:#c7c7c3; }
@media(min-width:701px) {
 .thermal-feature { margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); }
 .thermal-feature > img { left:var(--gutter); }
}
@media(max-width:700px) {
 .thermal-feature { min-height:980px; height:980px; margin:25px 0 90px; overflow:hidden; }
 .thermal-feature > img { top:260px; left:50%; right:auto; width:auto; height:1000px; transform:translate3d(-50%,var(--thermal-shift,0px),0); }
 .thermal-copy { position:relative; top:0; left:0; width:auto; padding:35px var(--gutter) 0; }
 .thermal-copy h2 { font-size:clamp(27px,7.5vw,40px); line-height:1.28; }
 .thermal-copy p { font-size:15px; line-height:1.48; }
}
.pixel-title,.glitch-title { position:relative; isolation:isolate; }
.pixel-title.pixel-active,.glitch-title.pixel-active { animation:v7-pixel-text .72s steps(7,end) both; }
.pixel-title.pixel-active::after,.glitch-title.pixel-active::after { content:""; position:absolute; z-index:2; inset:-.08em -.04em; pointer-events:none; background:var(--bg,#202020); animation:v7-pixel-mask .72s steps(7,end) both; }
@keyframes v7-pixel-text { 0% { opacity:.12; filter:blur(3px); } 45% { opacity:.72; filter:blur(1px); } 100% { opacity:1; filter:none; } }
@keyframes v7-pixel-mask { 0% { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); opacity:1; } 100% { clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%); opacity:0; } }
@media(min-width:701px) {
 .thermal-feature { margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); }
 .thermal-feature > img { right:0; }
}

/* v7.1 final overrides: keep the Figma composition after legacy rules. */
.thermal-feature { height:1600px!important; min-height:1600px!important; overflow:visible!important; }
.thermal-feature::after { display:none!important; content:none!important; background:none!important; }
.thermal-feature > img { top:0!important; left:var(--gutter)!important; right:auto!important; width:auto!important; height:1600px!important; max-width:none!important; max-height:none!important; object-fit:contain!important; transform:translate3d(0,var(--thermal-shift,0px),0)!important; rotate:none!important; filter:none!important; opacity:1!important; clip-path:none!important; }
.thermal-copy { position:absolute!important; top:0!important; left:calc(50% + 40px)!important; width:min(560px,38vw)!important; padding:clamp(120px,10vw,220px) 0 0!important; }
@media(max-width:700px) {
 .thermal-feature { height:980px!important; min-height:980px!important; overflow:hidden!important; }
 .thermal-feature > img { top:260px!important; left:50%!important; right:auto!important; width:auto!important; height:1000px!important; max-width:none!important; max-height:none!important; transform:translate3d(-50%,var(--thermal-shift,0px),0)!important; }
 .thermal-copy { position:relative!important; top:0!important; left:0!important; width:auto!important; padding:35px var(--gutter) 0!important; }
}

/* v8 final editorial adjustments */
.shade { display:none!important; }
.portfolio { padding-top:clamp(28px,3vw,48px)!important; }
.portfolio-kicker { display:none!important; }
.thermal-feature { margin-top:0!important; margin-bottom:clamp(28px,3vw,48px)!important; }
.thermal-copy { left:calc(50% + 40px)!important; padding-top:clamp(260px,18vw,340px)!important; font-family:LongPixel,monospace!important; }
.thermal-copy h2 { color:#f1f1ef!important; font-family:LongPixel,monospace!important; font-size:clamp(34px,3.6vw,60px)!important; line-height:1.16!important; }
.thermal-copy p { color:#a8a8a5!important; font-family:LongPixel,monospace!important; font-size:clamp(16px,1.25vw,21px)!important; line-height:1.55!important; }
@media(max-width:700px) {
  .portfolio { padding-top:28px!important; }
  .thermal-feature { margin-top:0!important; margin-bottom:28px!important; }
  .thermal-copy { padding-top:35px!important; }
}

/* Align the case copy with the right-hand carousel heading column. */
.thermal-copy { left:auto!important; right:var(--gutter)!important; width:min(500px,38vw)!important; padding-top:clamp(300px,20vw,380px)!important; font-family:LongPixel,monospace!important; }
.thermal-copy h2,.thermal-copy p { font-family:LongPixel,monospace!important; }
@media(max-width:700px) {
  .thermal-copy { left:0!important; right:0!important; width:auto!important; padding-top:35px!important; }
}

/* v12: full-width featured cases */
.section-case { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:#202020; }
.section-case figure { margin:0; position:relative; }
.section-case img { display:block; width:100%; height:auto; object-fit:cover; }
.section-case figcaption { padding:12px var(--gutter) 0; color:#d7d7d4; font:400 14px/1.4 LongPixel,monospace; text-transform:uppercase; }
.case-arena { margin-bottom:clamp(44px,6vw,110px); }
.case-zolotoy { margin-top:clamp(60px,9vw,150px); }
.section-logo-band { height:clamp(150px,18vw,320px); display:grid; place-items:center; background:transparent; overflow:hidden; }
.section-logo-band img { width:min(68vw,920px); height:auto; opacity:.36; filter:brightness(.34); }
@media(prefers-reduced-motion:no-preference) {
 .section-logo-band img { animation:logo-approach 1.2s steps(9,end) both; animation-timeline:view(); animation-range:entry 0% cover 60%; }
}
@keyframes logo-approach { from {transform:scale(.82) translateY(22px);opacity:0} to {transform:scale(1);opacity:.36} }
/* The final case caption is on the image and follows the carousel heading right grid. */
.case-zolotoy figcaption { position:absolute; z-index:2; top:clamp(24px,5vw,90px); right:var(--gutter); width:min(480px,36vw); box-sizing:border-box; padding:18px; margin:0; color:#f1f1ef; font:400 clamp(20px,2.1vw,32px)/1.35 LongPixel,monospace; background:rgba(23,23,23,.72); }
/* One and only one black blinking arrow in the navigation band. */
.next-direction { position:relative; }
.next-direction strong { display:inline; }
.next-direction strong::after { content:'↗'; color:#101c17; display:inline-block; margin-left:.24em; font:inherit; animation:next-arrow 1s steps(2,end) infinite; }
@keyframes next-arrow { 0%,49% {opacity:1} 50%,100% {opacity:0} }
@media(prefers-reduced-motion:reduce) {.next-direction strong::after { animation:none; }}
/* Project index and about */
.case-index { padding:0; margin:42px 0 0; list-style:none; }
.case-index li { border-top:1px solid #535350; }
.case-index a { display:grid; grid-template-columns:minmax(88px,130px) minmax(0,1fr) auto; align-items:center; gap:clamp(12px,2vw,35px); padding:14px 0; text-decoration:none; color:inherit; }
.case-index img { width:100%; height:74px; object-fit:cover; }
.case-index .case-name { font:clamp(16px,1.6vw,25px)/1.3 LongPixel,monospace; overflow-wrap:anywhere; }
.case-index a:hover .case-name,.case-index a:focus-visible .case-name {color:#abd2be;}
.case-index .case-arrow {font:30px/1 LongPixel,monospace;}
.case-index h2 {font:clamp(28px,3vw,48px)/1.25 LongPixel,monospace; margin:50px 0 18px;}
.about-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,36px); margin:65px 0; }
.about-stat { border-top:1px solid #aaa; padding:22px 0; font-family:LongPixel,monospace; }
.about-stat strong { display:block; color:#d4eadb; font:clamp(46px,7vw,110px)/1 LongPixel,monospace; }
.about-stat span { display:block; margin-top:15px; font:clamp(14px,1.3vw,20px)/1.4 LongPixel,monospace; }
@media(prefers-reduced-motion:no-preference) { .about-stat strong {animation:stats-pixel .8s steps(8,end) both;animation-timeline:view();animation-range:entry 15% cover 45%;} }
@keyframes stats-pixel {from {opacity:0;filter:blur(5px);transform:translateY(20px)}to{opacity:1;filter:none;transform:none}}
.about-clients {margin:55px 0;}
.about-clients h2 {font:clamp(27px,3vw,48px)/1.25 LongPixel,monospace;}
.about-clients ul {display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;}
.about-clients li {border:1px solid #777;padding:12px 18px;font:clamp(15px,1.3vw,20px)/1.25 LongPixel,monospace;}
@media(max-width:700px) {
 .case-arena img {min-height:800px;object-position:center;}
 .case-zolotoy img {min-height:2000px;object-position:center;}
 .case-zolotoy figcaption {top:30px;right:var(--gutter);width:min(82vw,370px);font-size:clamp(18px,5vw,26px);}
 .section-logo-band {height:180px;}
 .section-logo-band img {width:84vw;}
 .case-index a {grid-template-columns:84px minmax(0,1fr) auto;gap:10px;}
 .case-index img {height:64px;}
 .case-index .case-name {font-size:15px;}
 .about-stats {grid-template-columns:1fr;gap:7px;margin:35px 0;}
 .about-stat strong {font-size:58px;}
}

/* v13: predictable animations that start on visibility, not scroll-timeline. */
.section-logo-band { position:relative; isolation:isolate; overflow:hidden; }
.section-logo-band > img:not(.logo-fragment) { position:relative; z-index:2; filter:none; opacity:.52; }
.section-logo-band > .logo-fragment { position:absolute; inset:auto; width:min(68vw,920px); height:auto; opacity:0; pointer-events:none; filter:none; }
.section-logo-band .fragment-1 { clip-path:inset(0 0 68% 0); }
.section-logo-band .fragment-2 { clip-path:inset(34% 0 32% 0); }
.section-logo-band .fragment-3 { clip-path:inset(69% 0 0 0); }
.section-logo-band img { animation:none!important; }
@media (prefers-reduced-motion:no-preference) {
 .nau-motion .section-logo-band:not(.is-visible) > img { opacity:0; }
 .nau-motion .section-logo-band.is-visible > img:not(.logo-fragment) { animation:logo-solid-v13 1.65s steps(13,end) both!important; }
 .nau-motion .section-logo-band.is-visible > .fragment-1 { animation:logo-shard-1 1.45s steps(7,end) both!important; }
 .nau-motion .section-logo-band.is-visible > .fragment-2 { animation:logo-shard-2 1.6s steps(9,end) both!important; }
 .nau-motion .section-logo-band.is-visible > .fragment-3 { animation:logo-shard-3 1.8s steps(9,end) both!important; }
 .nau-motion .about-stat { opacity:0; transform:translateY(24px); filter:blur(5px); transition:opacity .65s steps(9,end), transform .9s steps(12,end), filter .9s steps(12,end); transition-delay:calc(var(--stat-order) * 230ms); }
 .nau-motion .about-stats.is-visible .about-stat { opacity:1; transform:translateY(0); filter:none; }
 .nau-motion .about-stat strong { animation:none!important; text-shadow:3px 3px 0 #345348; }
 .nau-motion .about-stats.is-visible .about-stat strong { animation:stat-flicker-v13 2.65s steps(18,end) both!important; animation-delay:calc(var(--stat-order) * 230ms); }
}
@keyframes logo-solid-v13 {0%{clip-path:inset(0 100% 0 0);opacity:0;transform:scale(.93)} 25%{opacity:.55} 78%{clip-path:inset(0 0 0 0);transform:scale(1.02)} 100%{clip-path:inset(0);opacity:.52;transform:none}}
@keyframes logo-shard-1 {0%{opacity:0;transform:translate(52px,-9px)} 15%,46%{opacity:.53} 80%{opacity:0;transform:translate(0,0)} 100%{opacity:0}}
@keyframes logo-shard-2 {0%{opacity:0;transform:translate(-65px,5px)} 20%,55%{opacity:.48} 88%{opacity:0;transform:none}100%{opacity:0}}
@keyframes logo-shard-3 {0%{opacity:0;transform:translate(42px,12px)} 30%,60%{opacity:.5} 95%,100%{opacity:0;transform:none}}
@keyframes stat-flicker-v13 { 0%,6%{opacity:.2} 9%,13%{opacity:1} 16%,23%{opacity:.5} 30%,100%{opacity:1} }
@media(max-width:700px) { .section-logo-band > .logo-fragment { width:84vw; } }
@media(prefers-reduced-motion:reduce) { .section-logo-band > img:not(.logo-fragment){opacity:.52!important} .section-logo-band > .logo-fragment{display:none!important} .nau-motion .about-stat{opacity:1!important;transform:none!important;filter:none!important} }

/* Layer identical SVG fragments in the same grid cell: no layout shift. */
.section-logo-band > img:not(.logo-fragment),.section-logo-band > .logo-fragment { grid-area:1 / 1; }
.section-logo-band > .logo-fragment { position:relative; inset:auto; margin:0; }