/* POPOCA HOME v1.2 — surgical changes over the approved v1.1. */
html,body,button,a,h1,h2,h3,p,em,strong,span,q,blockquote{font-style:normal}
/* 0–1.45s phrase one; .25s breath; 1.70–3.40s phrase two; hero at 3.80s. */
.intro{animation:intro-out .4s 3.4s both}.intro span{animation:intro-v12-first 1.45s both;font-size:clamp(12px,1.2vw,17px);letter-spacing:.16em}.intro span+span{animation:intro-v12-second 1.7s 1.7s both}
@keyframes intro-v12-first{0%{opacity:0}20%,77%{opacity:1}100%{opacity:0}}
@keyframes intro-v12-second{0%{opacity:0}18%,79%{opacity:1}100%{opacity:0}}
/* One fullscreen plane; original photo reused on both sides of the type layer. */
.prestage{height:100vh;height:100svh;width:100%;min-height:0;max-height:none;padding:110px 4vw 35px;background:#000000;isolation:isolate;overflow:clip}
.prestage-frame{position:absolute!important;inset:0!important;z-index:0;background:#000000!important;border:0;min-height:0}
.prestage-frame img,.prestage .subject-layer img{width:100%;height:100%;object-fit:cover;object-position:67% 43%;filter:grayscale(1) brightness(.76)}
.hero-depth{z-index:1;inset:0;isolation:isolate}.hero-depth .mega{font-size:32vw;line-height:.95;letter-spacing:-.03em;left:-1.8vw;top:44%;margin:0;transform:translateY(-15%);z-index:1}
.prestage .subject-layer{inset:0;z-index:2;pointer-events:none}.masked-subject{mask-image:var(--subject-mask);-webkit-mask-image:var(--subject-mask);mask-size:cover;-webkit-mask-size:cover;mask-position:67% 43%;-webkit-mask-position:67% 43%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-mode:alpha}
.hero-top,.hero-bottom{z-index:4;position:relative}.hero-top{font-size:11px;color:#eee}.hero-top>span:first-child{visibility:hidden}.hero-bottom{padding-top:0;gap:24px;align-items:end}.hero-bottom p{font-size:13px;text-shadow:0 1px 10px #000}.hero-bottom span{color:#eee}.hero-bottom .scroll-link{font-size:11px;text-shadow:0 1px 10px #000}
/* The descriptors are part of the composition; K receives an optical adjustment. */
.stat{gap:clamp(20px,3vw,48px)}.stat p{font-family:var(--human);font-size:clamp(26px,5vw,76px);font-weight:600;letter-spacing:-.035em;line-height:1.13;text-align:center;margin:0 4vw}
.stat:nth-child(2) p{font-size:clamp(30px,5.7vw,86px)}.stat:nth-child(3) p{font-size:clamp(30px,5.5vw,82px)}
.metric-k{font-size:.89em;display:inline-block;vertical-align:baseline;margin-left:-.035em;letter-spacing:-.04em}
/* Reduce the authored black bridge from 80svh to 40svh (desktop). */
.numbers{padding-bottom:20svh}.people-answer>.meta{height:20svh;font-size:clamp(12px,1.2vw,17px)}
.manifesto .quote-line:nth-child(2){margin-bottom:0}.manifesto footer{margin-top:75px}.quote-close{font-family:var(--human);font-size:.32em;vertical-align:top;display:inline}
@media(min-aspect-ratio:2/1){.prestage-frame img,.prestage .subject-layer img{object-position:67% 43%}.masked-subject{mask-position:67% 43%;-webkit-mask-position:67% 43%}.hero-depth .mega{font-size:29vw;top:43%}.hero-top{padding-top:0}}
@media(max-width:899px){.prestage{padding:110px 5vw 30px}.hero-depth .mega{font-size:33vw;top:47%;left:-2.6vw}.hero-bottom{gap:18px}.hero-bottom p{font-size:12px}.hero-top{font-size:10px}}
@media(max-width:600px){.prestage{padding:100px 5vw 27px}.hero-depth .mega{font-size:35vw;top:48%;left:-3.4vw;letter-spacing:-.035em}.prestage-frame img,.prestage .subject-layer img{object-position:67% 43%}.hero-bottom{display:block}.hero-bottom p{font-size:12px;line-height:1.8}.hero-bottom span{font-size:11px}.hero-bottom .scroll-link{font-size:10px;margin-top:20px}.hero-top>span+span{max-width:120px;margin-left:auto}.stat{gap:24px}.stat p{font-size:7vw;line-height:1.2;margin:0 5vw}.stat:nth-child(2) p{font-size:9.2vw}.stat:nth-child(3) p{font-size:8.6vw}.metric-k{font-size:.88em;margin-left:-.025em}.numbers{padding-bottom:12.5svh}.people-answer>.meta{height:17.5svh}.manifesto footer{margin-top:55px}.quote-line strong>span:last-child{font-size:1.24em}}
@media(max-height:500px) and (orientation:landscape){.prestage{padding:75px 4vw 20px}.hero-top{display:none}.hero-bottom p{font-size:11px}.hero-depth .mega{font-size:27vw;top:38%}.hero-bottom .scroll-link{margin-top:0}}
.stat:first-child p{font-size:clamp(28px,7.3vw,104px)}.stat:last-child{min-height:88svh}
@media(max-width:600px){.stat:first-child p{font-size:8.5vw}.stat:last-child{min-height:55svh}}
body.hero-in-view .header{mix-blend-mode:normal;color:var(--paper);text-shadow:0 1px 5px #000}
@media(min-aspect-ratio:2/1) and (min-height:501px){.hero-depth .mega{top:30%}}
.stat strong{letter-spacing:-.015em}.metric-k{margin-left:.015em;letter-spacing:0}