/* Editorial rhythm and native scroll sequences. */
:root { --sticky-top:0px; }
html { scroll-padding-top:var(--sticky-top); }
.scene { container-type:inline-size; }
.scene > *, .case-copy, .split-half, .cards-copy, .editorial-copy { min-width:0; }
.scene h1,.scene h2,.scene h3,.contact h2 { line-height:1.04;letter-spacing:.005em;text-wrap:balance; }
.scene .eyebrow,.scene .kicker { line-height:1.6; }
.scene p { overflow-wrap:break-word; }
.grain { opacity:.105; }
.timeline-item { flex-shrink:0; }
.timeline-item.active { height:var(--year-space,220px); }
.year { letter-spacing:.005em;gap:.03em;line-height:1; }
.timeline { gap:clamp(5px,1vh,12px); }
.rail { padding-block:22px; }
.rail-links,.coordinates { font-size:10px; }
.scene--hero { display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:center;align-content:center;padding-block:90px;min-height:100svh; }
.hero-copy { align-self:center; }
.hero-copy h1 { font-size:clamp(5rem,13cqw,15rem);line-height:.99;max-width:100%;margin:22px 0; }
.hero-meta { flex-wrap:wrap;gap:10px 24px;margin-top:28px;line-height:1.5; }
.media-frame--hero { position:relative;right:auto;bottom:auto;width:100%;height:clamp(350px,66vh,820px); }
.media-frame--hero img { object-position:48% 50%; }
.media-frame { clip-path:none;box-shadow:10px 10px 0 var(--accent); }
.scene--case { gap:clamp(24px,4vw,64px);padding-block:90px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.case-copy h2 { font-size:clamp(2.5rem,5.5cqw,6rem);margin:22px 0; }
.case-copy>p:last-of-type { font-size:clamp(1rem,1.4cqw,1.15rem);line-height:1.7; }
.case-media { min-width:0; }
.scene--duo { padding-block:85px; }
.duo-title h2 { font-size:clamp(3rem,7.4cqw,8rem); }
.duo-title { align-items:center;justify-content:space-between; }
.project-brief { position:relative;z-index:4;align-self:center;padding:clamp(20px,2.4vw,34px);border-left:6px solid var(--accent);background:rgba(184,184,177,.92); }
.project-brief > span { display:block;font:700 .72rem/1.5 var(--mono);letter-spacing:.08em; }
.project-brief h3 { max-width:12ch;margin:14px 0;font:900 clamp(2rem,3.5cqw,3.8rem)/1.02 var(--display);letter-spacing:.005em; }
.project-brief p { max-width:42ch;margin:0;font-size:clamp(1rem,1.14cqw,1.1rem);line-height:1.58; }
.project-brief > div { display:flex;flex-wrap:wrap;gap:6px;margin-top:20px; }
.project-brief b { padding:7px 9px;border:1px solid var(--ink);font:700 .66rem/1 var(--mono);letter-spacing:.06em; }
.scene--micro-profile { grid-template-columns:1.16fr .84fr; }
.scene--micro-profile .duo-figure { grid-column:1;grid-row:2;height:52vh; }
.scene--micro-profile .project-brief { grid-column:2;grid-row:2; }
.scene--green-squat .project-brief { grid-column:1;grid-row:2;max-width:640px; }
.split-half { padding:clamp(26px,4vw,65px); }
.split-half h3 { font-size:clamp(2.5rem,5.6cqw,6rem); }
.poster-copy h2 { font-size:clamp(3rem,9cqw,9rem);max-width:84%; }
.process-head h2 { font-size:clamp(3rem,6.5cqw,7rem); }
.editorial-title h2 { font-size:clamp(4rem,13cqw,14rem); }
.seo-stack span { line-height:1.06;letter-spacing:.015em;font-size:clamp(4rem,13cqw,13rem); }
.rank-copy h2 { font-size:clamp(5rem,13cqw,14rem); }
.signature-copy h2 { font-size:clamp(4rem,12cqw,12rem); }
.scene--signature { padding-bottom:95px; }
.campaign-copy h2 { font-size:clamp(4rem,10cqw,10rem); }
.campaign-stack { width:47%;right:4%; }
.ca-system-head h2 { font-size:clamp(3rem,6.5cqw,7rem); }
.cards-copy h2 { font-size:clamp(3rem,6cqw,6rem); }
.scene--cards { grid-template-columns:minmax(260px,.66fr) minmax(0,1.34fr); }
.tactimon-card { width:clamp(155px,17cqw,235px); }
.scene--koloro { display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center;align-content:center;padding-block:90px; }
.koloro-copy h2 { font-size:clamp(5rem,14cqw,15rem); }
.koloro-frame { position:relative;right:auto;bottom:auto;width:100%;height:55vh;min-height:300px; }
.final-project-copy h2 { font-size:clamp(3rem,8cqw,8rem); }
.contact { padding-block:110px; }
.contact h2 { font-size:clamp(3.5rem,9vw,10rem);max-width:100%; }
.outline-title { font-size:clamp(4rem,10cqw,10rem); }
.scene--manifesto { padding-block:100px; }
.mandralmier-head h2 { font-size:clamp(4rem,7vw,8rem);line-height:1.05; }
.holocorp-head h2 { line-height:1.03; }
.scene--holo-system { position:relative;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(30px,5vw,84px);align-items:center;overflow:hidden; }
.scene--holo-system::after { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.9%,rgba(15,15,15,.16) 50%,transparent 50.1%);background-size:72px 100%;opacity:.28; }
.holo-system-head { position:relative;z-index:2; }
.holo-system-head h2 { font:900 clamp(3rem,6.4cqw,6.8rem)/1.02 var(--display);letter-spacing:.005em;margin:18px 0 25px; }
.holo-system-head > p:last-child { max-width:39ch;font-size:clamp(1rem,1.15cqw,1.12rem);line-height:1.65; }
.holo-system-flow { position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:0;margin:0;list-style:none;background:var(--ink);border:1px solid var(--ink); }
.holo-system-flow li { position:relative;min-height:390px;padding:24px 20px;display:flex;flex-direction:column;background:var(--paper);transition:background .35s,color .35s; }
.holo-system-flow li::after { content:'→';position:absolute;z-index:3;right:-17px;top:50%;width:32px;height:32px;display:grid;place-items:center;background:var(--accent);color:var(--ink);font:900 1rem/1 var(--mono); }
.holo-system-flow li:last-child::after { display:none; }
.holo-system-flow b,.holo-system-flow span { font:700 .72rem/1.4 var(--mono);letter-spacing:.08em; }
.holo-system-flow b { width:32px;height:32px;display:grid;place-items:center;margin-bottom:auto;border:1px solid currentColor; }
.holo-system-flow strong { font:900 clamp(1.5rem,2.7cqw,3rem)/.98 var(--display);overflow-wrap:anywhere;margin:42px 0 20px; }
.holo-system-flow p { font-size:.9rem;line-height:1.55;margin:0; }
.holo-system-flow li:hover { background:var(--ink);color:var(--white); }
.holo-system-signal { position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:30px;display:flex;gap:6px;align-items:center;border-top:1px solid var(--ink);padding-top:12px; }
.holo-system-signal i { width:8px;height:8px;background:var(--accent);animation:signalPulse 1.4s ease-in-out infinite alternate; }
.holo-system-signal i:nth-child(2) { animation-delay:.2s; }.holo-system-signal i:nth-child(3) { animation-delay:.4s; }
.holo-system-signal span { margin-left:auto;font:700 .68rem/1 var(--mono);letter-spacing:.1em; }
@keyframes signalPulse { to { transform:scale(1.8);background:var(--ink); } }
.metric-block strong { position:relative;z-index:2;line-height:1;letter-spacing:0; }
.metric-block { min-height:370px; }
.metric-graph,.metric-bars { opacity:.6; }
.metrics-head h2 { font-size:clamp(3rem,6cqw,6rem); }
.metrics-head { gap:24px; }
.metrics-head .eyebrow { max-width:35ch; }
.metric-label { line-height:1.55; }
.rank-seal { margin:40px auto; }
.rank-seal span { font-family:var(--mono);font-size:clamp(2.4rem,4cqw,4rem);letter-spacing:-.03em; }
.duo-figure.reveal { clip-path:inset(0 0 calc((1 - var(--vis,1))*65%) 0); }
.process-track li { transition:background .4s,color .4s; }
.process-track li:hover { background:var(--ink);color:var(--white); }
.motion-pin:not(.is-pinned) .motion-navigation { display:none; }
.is-pinned { height:var(--sequence-height);position:relative; }
.is-pinned .motion-stage { position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink); }
.is-pinned .motion-track { height:100%; }
.motion-pin--horizontal.is-pinned .motion-track { display:flex;will-change:transform; }
.is-pinned .motion-track > .scene { flex:0 0 100%;width:100%;min-height:100%;height:100%;padding-block:80px 105px; }
.is-pinned .reveal,.is-pinned .reveal--late { opacity:1;transform:none; }
.motion-pin--horizontal.is-pinned .motion-track > .scene { --panel-in:0;isolation:isolate; }
.motion-pin--horizontal.is-pinned .duo-title,
.motion-pin--horizontal.is-pinned .split-half,
.motion-pin--horizontal.is-pinned .seo-stack,
.motion-pin--horizontal.is-pinned .editorial-title,
.motion-pin--horizontal.is-pinned .editorial-grid,
.motion-pin--horizontal.is-pinned .rank-copy,
.motion-pin--horizontal.is-pinned .case-copy,
.motion-pin--horizontal.is-pinned .metrics-head,
.motion-pin--horizontal.is-pinned .metrics-dashboard,
.motion-pin--horizontal.is-pinned .koloro-copy,
.motion-pin--horizontal.is-pinned .final-project-copy,
.motion-pin--horizontal.is-pinned .hero-copy,
.motion-pin--horizontal.is-pinned .cards-copy,
.motion-pin--horizontal.is-pinned .rules-head,
.motion-pin--horizontal.is-pinned .rules-grid,
.motion-pin--horizontal.is-pinned .rules-flow,
.motion-pin--horizontal.is-pinned .poster-copy,
.motion-pin--horizontal.is-pinned .process-head,
.motion-pin--horizontal.is-pinned .process-intro,
.motion-pin--horizontal.is-pinned .process-track,
.motion-pin--horizontal.is-pinned .channel-metrics,
.motion-pin--horizontal.is-pinned .signature-copy,
.motion-pin--horizontal.is-pinned .campaign-copy,
.motion-pin--horizontal.is-pinned .ca-system-head,
.motion-pin--horizontal.is-pinned .format-selector,
.motion-pin--horizontal.is-pinned .holo-system-head,
.motion-pin--horizontal.is-pinned .holo-system-flow,
.motion-pin--horizontal.is-pinned .holo-system-signal {
  opacity:clamp(.15,var(--panel-in),1);
  transform:translate3d(calc((1 - var(--panel-in))*54px),0,0);
}
.motion-pin--horizontal.is-pinned .duo-figure,
.motion-pin--horizontal.is-pinned .uscreen-product-shot,
.motion-pin--horizontal.is-pinned .koloro-frame,
.motion-pin--horizontal.is-pinned .final-image,
.motion-pin--horizontal.is-pinned .media-frame--hero,
.motion-pin--horizontal.is-pinned .case-media,
.motion-pin--horizontal.is-pinned .card-system--fan,
.motion-pin--horizontal.is-pinned .poster-image,
.motion-pin--horizontal.is-pinned .signature-video,
.motion-pin--horizontal.is-pinned .campaign-stack {
  opacity:clamp(.22,var(--panel-in),1);
  clip-path:inset(0 calc((1 - var(--panel-in))*46%) 0 0);
}
.motion-pin--horizontal.is-pinned .process-track li,
.motion-pin--horizontal.is-pinned .channel-metrics > span,
.motion-pin--horizontal.is-pinned .rule-module {
  transform:translateY(calc((1 - var(--panel-in))*28px));
  opacity:clamp(.18,var(--panel-in),1);
}
.motion-pin--horizontal.is-pinned .rank-bars i {
  transform-origin:bottom;
  transform:scaleY(clamp(0,calc(var(--panel-in)*1.45 - .18),1));
}
.motion-pin--horizontal.is-pinned .search-orbit {
  opacity:clamp(.15,var(--panel-in),1);
  transform:translate3d(calc((1 - var(--panel-in))*80px),calc((1 - var(--panel-in))*-35px),0) rotate(calc((1 - var(--panel-in))*-18deg));
}
.motion-navigation { position:absolute;z-index:25;left:var(--pad);right:var(--pad);bottom:24px;display:flex;gap:8px;align-items:center;color:var(--white);background:var(--ink);padding:12px 16px;border:1px solid rgba(244,244,238,.4); }
.motion-navigation::before { content:'';position:absolute;left:-1px;top:-2px;height:3px;background:var(--accent);width:calc(var(--sequence-progress,0)*100%); }
.motion-navigation > span { margin-right:auto;font-size:12px;letter-spacing:.08em; }
.motion-navigation button { border:1px solid #666;background:transparent;padding:8px 14px;cursor:pointer;font-size:12px; }
.motion-navigation button[aria-current=step],.motion-navigation button:hover { background:var(--accent);color:var(--ink);border-color:var(--accent); }
.is-pinned .scene--ca-system { align-content:center; }
.panel-current .color-register span,.panel-current .campaign-stack img { filter:grayscale(0);transition:filter 1s ease; }
.is-pinned .ca-system-head { gap:12px 32px; }
.is-pinned .ca-system-head h2 { font-size:clamp(3rem,5cqw,5.5rem); }
.is-pinned .ca-system-head p:last-child { font-size:1rem;line-height:1.55; }
.is-pinned .case-copy h2 { font-size:clamp(2.5rem,4.7cqw,5rem); }
.is-pinned .case-copy>p:last-of-type { font-size:1rem;line-height:1.6; }
.is-pinned .scene--cards { min-height:100%; }
.is-pinned .card-system--fan { min-height:min(66vh,650px); }
.is-pinned .tactimon-fan .tactimon-card:not(.is-selected) { transform:translateX(calc(-50% + var(--x)*var(--fan,0))) translateY(calc((1 - var(--fan,0))*58px + var(--y)*var(--fan,0))) rotate(calc(var(--rot)*var(--fan,0))); }
.is-pinned .scene--express-metrics .metric-block { transform:translateY(calc((1 - var(--metric-progress,1))*35px));border-color:rgba(234,255,0,var(--metric-progress,1)); }
.is-pinned .scene--express-metrics .metric-trace { stroke-dashoffset:calc(1 - var(--metric-progress,1)); }
.is-pinned .scene--express-metrics .metric-bars i { transform:scaleY(var(--metric-progress,1)); }
.is-pinned .scene--express-metrics .rank-seal { transform:rotate(calc((1 - var(--metric-progress,1))*-65deg)) scale(calc(.8 + var(--metric-progress,1)*.2)); }
.is-pinned .scene--express-metrics { align-content:start;padding-top:44px;padding-bottom:104px; }
.is-pinned .scene--express-metrics .metrics-head { margin-bottom:16px; }
.is-pinned .scene--express-metrics .metrics-head h2 { font-size:clamp(2.6rem,5cqw,4.8rem); }
.is-pinned .scene--express-metrics .metric-block { min-height:300px; }
.is-pinned .scene--express-metrics .metric-block strong { margin-top:20px; }
.is-pinned .scene--process { grid-template-rows:auto auto auto;gap:16px 34px;align-content:center;padding-top:62px; }
.is-pinned .scene--process .process-head h2 { font-size:clamp(3rem,5.2cqw,5.2rem);margin:10px 0; }
.is-pinned .scene--process .process-intro { font-size:1rem;line-height:1.48; }
.is-pinned .scene--process .process-track { margin-top:4px; }
.is-pinned .scene--process .process-track li { min-height:92px;padding-block:14px 9px; }
.is-pinned .scene--process .process-track b { font-size:1.75rem;margin-bottom:12px; }
.is-pinned .scene--process .channel-metrics { margin-top:0; }
.is-pinned .scene--process .channel-metrics span { min-height:70px; }
.is-pinned .scene--holo-system { align-content:center; }
.is-pinned .holo-system-flow li { min-height:350px; }
@media(max-width:959px) {
  .motion-pin--horizontal:not(.is-pinned):not(.motion-pin--complex) .motion-stage { overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none; }
  .motion-pin--horizontal:not(.is-pinned):not(.motion-pin--complex) .motion-stage::-webkit-scrollbar { display:none; }
  .motion-pin--horizontal:not(.is-pinned):not(.motion-pin--complex) .motion-track { display:flex;width:100%; }
  .motion-pin--horizontal:not(.is-pinned):not(.motion-pin--complex) .motion-track > .scene { flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always; }
  .motion-pin--horizontal:not(.is-pinned) .duo-title,
  .motion-pin--horizontal:not(.is-pinned) .split-half,
  .motion-pin--horizontal:not(.is-pinned) .seo-stack,
  .motion-pin--horizontal:not(.is-pinned) .editorial-title,
  .motion-pin--horizontal:not(.is-pinned) .editorial-grid,
  .motion-pin--horizontal:not(.is-pinned) .rank-copy,
  .motion-pin--horizontal:not(.is-pinned) .case-copy,
  .motion-pin--horizontal:not(.is-pinned) .metrics-head,
  .motion-pin--horizontal:not(.is-pinned) .metrics-dashboard,
  .motion-pin--horizontal:not(.is-pinned) .koloro-copy,
  .motion-pin--horizontal:not(.is-pinned) .final-project-copy { opacity:clamp(.2,var(--panel-in),1);transform:translate3d(calc((1 - var(--panel-in))*38px),0,0); }
  .motion-pin--horizontal:not(.is-pinned) .duo-figure,
  .motion-pin--horizontal:not(.is-pinned) .uscreen-product-shot,
  .motion-pin--horizontal:not(.is-pinned) .koloro-frame,
  .motion-pin--horizontal:not(.is-pinned) .final-image { opacity:clamp(.25,var(--panel-in),1);clip-path:inset(0 calc((1 - var(--panel-in))*35%) 0 0); }
}
@media(max-width:1099px) {
  .scene--cards { grid-template-columns:1fr;min-height:1100px; }
  .cards-copy { max-width:600px; }
  .metrics-dashboard { grid-template-columns:1fr; }
  .scene--express-metrics { padding-block:85px; }
  .rank-seal { width:190px; }
  .metrics-head { display:block; }
  .metric-block strong { font-size:6rem; }
}
@media(max-width:820px) {
  :root { --sticky-top:76px; }
  .is-pinned .motion-stage { top:76px;height:calc(100svh - 76px); }
  .is-pinned .motion-track>.scene { min-height:100%!important;height:100%;overflow:hidden;padding-bottom:74px!important; }
  .motion-navigation { left:12px;right:70px;bottom:10px;min-height:54px;padding:7px 8px;gap:6px; }
  .motion-navigation>span { display:none; }
  .motion-navigation button { flex:1 1 0;min-width:0;padding:8px 5px;font-size:11px; }
  .rail { padding:12px 16px; }
  .timeline-item.active { height:42px;width:max(60px,var(--year-space,60px)); }
  .timeline-item { width:13px; }
  .timeline { gap:3px; }
  .year { font-size:1.35rem; }
  .scene { min-height:100svh;padding-block:75px; }
  .scene--hero,.scene--koloro { grid-template-columns:1fr;gap:32px; }
  .hero-copy h1 { font-size:clamp(5rem,23cqw,9rem); }
  .media-frame--hero { width:100%;height:52vh;min-height:300px; }
  .scene--case { grid-template-columns:1fr;gap:35px; }
  .case-copy h2,.cards-copy h2 { font-size:clamp(2.5rem,10cqw,4.8rem); }
  .duo-title h2 { font-size:clamp(2.5rem,12cqw,5rem); }
  .scene--micro-profile { grid-template-columns:1fr;min-height:1050px;align-content:start; }
  .scene--micro-profile .duo-title,.scene--micro-profile .duo-figure,.scene--micro-profile .project-brief { grid-column:1;grid-row:auto; }
  .scene--micro-profile .duo-figure { height:34vh;min-height:240px; }
  .scene--green-squat { min-height:1180px;align-content:start; }
  .scene--green-squat .project-brief { grid-column:1;grid-row:3; }
  .project-brief h3 { font-size:clamp(2.2rem,10cqw,3.6rem); }
  .split-half h3 { font-size:clamp(2.4rem,11cqw,4rem); }
  .scene--split-copy { padding:0; }
  .split-half { padding:65px 26px; }
  .scene--campaign { min-height:1000px; }
  .campaign-stack { width:80%;right:5%; }
  .campaign-copy h2 { font-size:clamp(3.5rem,15cqw,6rem); }
  .scene--ca-system { min-height:0; }
  .ca-system-head h2 { font-size:clamp(2.5rem,11cqw,4rem); }
  .scene--cards { min-height:0; }
  .poster-copy h2 { max-width:100%;font-size:clamp(3rem,12cqw,6rem); }
  .play-mark { display:none; }
  .editorial-title h2 { font-size:clamp(3.4rem,16cqw,7rem); }
  .process-head h2 { font-size:clamp(3rem,12cqw,5rem); }
  .rank-copy h2,.signature-copy h2 { font-size:clamp(4rem,16cqw,7rem); }
  .koloro-copy h2 { font-size:clamp(5rem,23cqw,9rem); }
  .final-project-copy h2 { font-size:clamp(3rem,13cqw,5rem); }
  .contact h2 { font-size:clamp(3rem,11vw,6rem); }
  .contact-top,.contact-bottom { font-size:10px;line-height:1.6; }
  .outline-title { font-size:clamp(3rem,14cqw,6rem); }
  .scene--mandralmier,.scene--holocorp { padding:0; }
  .scene--mandralmier { min-height:260svh; }
  .scene--holocorp { min-height:300svh; }
  .mandralmier-head h2 { font-size:clamp(3rem,13vw,5rem); }
  .holocorp-head h2 { font-size:clamp(3rem,13vw,5rem); }
  .scene--holo-system { grid-template-columns:1fr;gap:32px;align-content:start;min-height:1180px;padding-top:92px; }
  .holo-system-head h2 { font-size:clamp(3rem,13cqw,5rem); }
  .holo-system-flow { grid-template-columns:1fr; }
  .holo-system-flow li { min-height:210px; }
  .holo-system-flow li::after { right:24px;top:auto;bottom:-17px;transform:rotate(90deg); }
  .holo-system-flow strong { margin:25px 0 14px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;transition:none!important; }
  .scene--mandralmier,.scene--holocorp { min-height:100svh; }
  .holo-system-signal i { animation:none; }
}

@media(max-width:959px) and (prefers-reduced-motion:no-preference), (max-height:619px) and (prefers-reduced-motion:no-preference) {
  .motion-pin:not(.is-pinned) .motion-track>.scene {
    opacity:clamp(.35,var(--vis,1),1);
    transform:translate3d(0,calc((1 - var(--vis,1))*34px),0);
    transition:opacity .12s linear,transform .12s linear;
  }
}