/* ========================================================================
   ZAZA — inner pages
   ======================================================================== */
body.inner-page{
  --page-bg:#0a0a0a;
  --page-fg:#f0ede7;
  --page-muted:rgba(240,237,231,.48);
  --page-line:rgba(240,237,231,.15);
  --page-accent:#f0ede7;
  background:var(--page-bg);
  color:var(--page-fg);
  min-height:100%;
}
body.inner-page.stage-light{
  --page-bg:#f0ede7;
  --page-fg:#080808;
  --page-muted:rgba(8,8,8,.48);
  --page-line:rgba(8,8,8,.14);
}
.inner-page .global-stage{background:var(--page-bg)}
.inner-page .site-header{color:var(--page-fg)}
.inner-page .site-header__edge{display:block}
.inner-page .site-dock-shell{z-index:410}
.inner-page .menu-overlay{z-index:800}
.inner-page main{position:relative;z-index:2}
.page-kicker{font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--page-muted)}
.page-wrap{width:min(100%,1800px);margin:0 auto;padding-inline:var(--pad)}
.page-hero{min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:calc(var(--header-h) + 6vh) var(--pad) 8vh;position:relative;overflow:hidden}
.page-hero__main{align-self:center;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:7vw;align-items:end}
.page-hero h1{margin:0;font-size:clamp(108px,18vw,330px);font-weight:610;letter-spacing:-.092em;line-height:.70;max-width:8ch}
.page-hero__aside{padding-bottom:2.2vh;display:grid;gap:26px;max-width:520px;justify-self:end}
.page-hero__aside p{margin:0;font-size:clamp(22px,2vw,34px);line-height:1.02;letter-spacing:-.04em}
.page-hero__meta{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--page-line);padding-top:14px;font:500 8px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--page-muted)}
.page-hero__ghost{position:absolute;right:-3vw;top:11vh;font-size:32vw;line-height:.7;letter-spacing:-.1em;opacity:.025;pointer-events:none;user-select:none}
.page-section{position:relative;padding:14vh var(--pad);border-top:1px solid var(--page-line)}
.page-section__head{display:grid;grid-template-columns:minmax(120px,.28fr) 1fr;gap:5vw;margin-bottom:8vh;align-items:start}
.page-section__head h2{margin:-.08em 0 0;font-size:clamp(64px,8vw,150px);line-height:.79;letter-spacing:-.078em;font-weight:610;max-width:12ch}
.page-section__head p{max-width:520px;margin:8px 0 0;justify-self:end;font-size:clamp(16px,1.35vw,23px);line-height:1.2;letter-spacing:-.025em;color:var(--page-muted)}
.page-link{display:inline-flex;align-items:center;gap:12px;border-bottom:1px solid currentColor;padding:0 0 7px;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;text-transform:uppercase}

/* About */
.about-intro{min-height:120svh;display:grid;align-items:center;padding:12vh var(--pad)}
.about-intro__copy{display:grid;gap:2vh;max-width:1500px}
.about-intro__copy p{margin:0;font-size:clamp(68px,9.5vw,172px);line-height:.82;letter-spacing:-.075em;font-weight:580}
.about-intro__copy p:nth-child(2){padding-left:10vw}.about-intro__copy p:nth-child(3){padding-left:22vw}
.about-timeline{height:300svh;position:relative;border-top:1px solid var(--page-line)}
.about-timeline__stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:10vh var(--pad) 8vh;display:grid;grid-template-rows:auto 1fr}
.about-timeline__title{display:flex;justify-content:space-between;align-items:end}
.about-timeline__title h2{margin:10px 0 0;font-size:clamp(72px,10vw,190px);line-height:.75;letter-spacing:-.082em}
.about-timeline__track{align-self:end;display:flex;width:max-content;gap:3vw;transform:translate3d(var(--timeline-x,0),0,0);will-change:transform;padding-bottom:5vh}
.timeline-card{width:min(58vw,900px);min-height:42vh;border-top:1px solid var(--page-line);padding:18px 0 0;display:grid;grid-template-columns:100px 1fr;gap:3vw}
.timeline-card small{font:500 9px/1 ui-monospace,monospace;letter-spacing:.12em;color:var(--page-muted)}
.timeline-card strong{font-size:clamp(42px,5vw,84px);line-height:.88;letter-spacing:-.06em;font-weight:580;max-width:10ch}
.timeline-card p{grid-column:2;margin:20px 0 0;max-width:480px;font-size:18px;line-height:1.25;color:var(--page-muted)}
.what-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--page-line)}
.what-row{min-height:28vh;padding:28px 0;border-bottom:1px solid var(--page-line);display:grid;grid-template-columns:60px 1fr auto;gap:2vw;align-items:center}
.what-row:nth-child(odd){padding-right:3vw;border-right:1px solid var(--page-line)}.what-row:nth-child(even){padding-left:3vw}
.what-row span,.what-row em{font:500 8px/1 ui-monospace,monospace;letter-spacing:.13em;color:var(--page-muted);font-style:normal}
.what-row strong{font-size:clamp(40px,5vw,86px);line-height:.86;letter-spacing:-.065em;font-weight:580}
.responsive-lab{height:330svh;position:relative;border-top:1px solid var(--page-line)}
.responsive-lab__stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:9vh var(--pad) 8vh;display:grid;grid-template-columns:.72fr 1.28fr;gap:6vw;align-items:center}
.responsive-lab__copy h2{font-size:clamp(70px,9vw,160px);line-height:.76;letter-spacing:-.08em;margin:12px 0 22px}.responsive-lab__copy p{font-size:20px;max-width:420px;color:var(--page-muted)}
.lab-browser{justify-self:end;width:var(--lab-w,92%);height:68vh;border:1px solid var(--page-line);background:#f5f1e9;color:#080808;border-radius:var(--lab-r,0);overflow:hidden;box-shadow:0 35px 100px rgba(0,0,0,.24);transition:border-radius .2s linear;will-change:width,height}
.lab-browser__bar{height:38px;border-bottom:1px solid rgba(0,0,0,.15);display:flex;align-items:center;gap:6px;padding:0 14px;font:8px ui-monospace,monospace}.lab-browser__bar i{width:6px;height:6px;background:#111;border-radius:50%;opacity:.25}.lab-browser__bar b{margin-left:auto;font-weight:500}.lab-browser__body{height:calc(100% - 38px);padding:24px;display:grid;grid-template-rows:auto 1fr auto;gap:18px}.lab-browser__nav{display:flex;justify-content:space-between;font:8px ui-monospace,monospace}.lab-browser__hero{align-self:center;font-size:clamp(44px,6vw,100px);line-height:.76;letter-spacing:-.075em;font-weight:620}.lab-browser__grid{display:grid;grid-template-columns:repeat(var(--lab-cols,3),1fr);gap:8px}.lab-browser__grid i{height:54px;background:#111}.lab-browser__grid i:nth-child(2){background:#c97143}.lab-browser__grid i:nth-child(3){background:#d9d3c8}
.backstage{background:#080808;color:#b4c3d9}.backstage .page-kicker,.backstage .page-section__head p{color:rgba(180,195,217,.52)}.backstage__screen{border:1px solid rgba(180,195,217,.18);padding:28px;min-height:64vh;background:linear-gradient(180deg,#0a0f16,#080808);display:grid;grid-template-columns:.6fr 1.4fr;gap:4vw}.backstage__index{display:grid;align-content:start;gap:16px;font:10px ui-monospace,monospace;letter-spacing:.1em;color:rgba(180,195,217,.45)}.backstage__index b{color:#b4c3d9;font-weight:500}.backstage__log{font:11px/1.75 ui-monospace,monospace;white-space:pre-line;color:#8fa7c6;overflow:hidden}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--page-line)}.process-step{padding:24px 28px 40px 0;border-right:1px solid var(--page-line);min-height:36vh}.process-step:not(:first-child){padding-left:28px}.process-step:last-child{border-right:0}.process-step span{font:9px ui-monospace,monospace;color:var(--page-muted)}.process-step h3{font-size:clamp(36px,4vw,64px);line-height:.9;letter-spacing:-.06em;margin:8vh 0 20px}.process-step p{font-size:15px;line-height:1.3;color:var(--page-muted);max-width:260px}.tools-line{overflow:hidden;border-block:1px solid var(--page-line);padding:22px 0;white-space:nowrap}.tools-line__track{display:inline-flex;gap:4vw;font-size:clamp(36px,5vw,82px);line-height:1;letter-spacing:-.05em;animation:toolsMove 24s linear infinite}@keyframes toolsMove{to{transform:translateX(-50%)}}

/* Projects */
.projects-hero h1{max-width:7ch}.projects-browser{min-height:100svh;padding:9vh var(--pad) 14vh;border-top:1px solid var(--page-line)}
.projects-toolbar{position:sticky;top:var(--header-h);z-index:20;display:flex;justify-content:space-between;align-items:center;gap:28px;padding:15px 0;background:color-mix(in srgb,var(--page-bg) 88%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--page-line)}
.view-switch,.filter-switch{display:flex;gap:7px;flex-wrap:wrap}.view-switch button,.filter-switch button{border:1px solid var(--page-line);background:transparent;color:inherit;padding:9px 12px;font:500 8px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}.view-switch button.is-active,.filter-switch button.is-active{background:var(--page-fg);color:var(--page-bg)}
.project-stage{padding-top:6vh}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8vw 2vw}.project-card{position:relative;display:grid;gap:14px}.project-card__media{aspect-ratio:16/10;overflow:hidden;background:#111}.project-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s ease}.project-card:hover img{transform:scale(1.035)}.project-card__meta{display:grid;grid-template-columns:50px 1fr auto;gap:16px;align-items:baseline}.project-card__meta span,.project-card__meta small{font:8px ui-monospace,monospace;letter-spacing:.11em;color:var(--page-muted)}.project-card__meta strong{font-size:clamp(34px,4vw,68px);line-height:.85;letter-spacing:-.06em}.project-card__meta small{text-align:right}
.project-stage[data-view="list"] .project-grid{display:block}.project-stage[data-view="list"] .project-card{grid-template-columns:70px minmax(260px,.9fr) 1fr;gap:2vw;align-items:center;border-bottom:1px solid var(--page-line);padding:20px 0}.project-stage[data-view="list"] .project-card__media{order:2;aspect-ratio:16/8}.project-stage[data-view="list"] .project-card__meta{order:1;display:contents}.project-stage[data-view="list"] .project-card__meta span{grid-column:1}.project-stage[data-view="list"] .project-card__meta strong{grid-column:2;font-size:clamp(36px,4vw,70px)}.project-stage[data-view="list"] .project-card__meta small{grid-column:3;text-align:left}.project-stage[data-view="list"] .project-card__media{grid-column:3;width:100%;height:24vh}
.project-map{display:none;min-height:70vh;border:1px solid var(--page-line);position:relative;overflow:hidden;background:radial-gradient(circle at 67% 43%,rgba(255,255,255,.08),transparent 13%),linear-gradient(145deg,#10151b,#080808)}.project-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:5vw 5vw}.map-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:14px;height:14px;border:1px solid #fff;border-radius:50%;background:#111;box-shadow:0 0 0 8px rgba(255,255,255,.05);transition:transform .3s ease}.map-pin:hover{transform:translate(-50%,-50%) scale(1.6)}.map-pin span{position:absolute;left:18px;top:-2px;white-space:nowrap;font:8px ui-monospace,monospace;letter-spacing:.1em}.map-legend{position:absolute;left:22px;bottom:20px;font:9px ui-monospace,monospace;line-height:1.7;color:rgba(255,255,255,.5)}
.project-play{display:none;position:relative;min-height:74vh;overflow:hidden;border:1px solid var(--page-line)}.play-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}.play-slide.is-active{opacity:1}.play-slide img{width:100%;height:100%;object-fit:cover}.play-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}.play-slide div{position:absolute;z-index:2;left:4vw;right:4vw;bottom:4vw;display:flex;justify-content:space-between;align-items:end;color:#fff}.play-slide strong{font-size:clamp(64px,9vw,150px);letter-spacing:-.08em;line-height:.75}.play-slide span{font:9px ui-monospace,monospace;letter-spacing:.12em}.project-stage[data-view="map"] .project-grid,.project-stage[data-view="map"] .project-play{display:none}.project-stage[data-view="map"] .project-map{display:block}.project-stage[data-view="play"] .project-grid,.project-stage[data-view="play"] .project-map{display:none}.project-stage[data-view="play"] .project-play{display:block}.project-card.is-filtered-out{display:none!important}

/* Contact */
.contact-hero h1{max-width:5ch}.contact-hero__aside a{font-size:clamp(18px,1.5vw,25px)}.contact-compose{min-height:150svh;padding:14vh var(--pad);border-top:1px solid var(--page-line);display:grid;align-content:center}.contact-type{display:flex;gap:8px;margin-bottom:7vh;flex-wrap:wrap}.contact-type button{border:1px solid var(--page-line);background:transparent;color:inherit;padding:10px 14px;font:8px ui-monospace,monospace;letter-spacing:.1em}.contact-type button.is-active{background:var(--page-fg);color:var(--page-bg)}.sentence-form{font-size:clamp(48px,7vw,128px);line-height:1.02;letter-spacing:-.065em;max-width:1600px}.sentence-form label{display:inline}.sentence-form input,.sentence-form textarea{font:inherit;letter-spacing:inherit;color:inherit;background:transparent;border:0;border-bottom:2px solid var(--page-line);outline:0;min-width:4ch;width:clamp(220px,25vw,520px);padding:0 .04em .04em}.sentence-form textarea{display:block;width:100%;height:1.25em;resize:none;margin-top:.18em;overflow:hidden}.sentence-form input:focus,.sentence-form textarea:focus{border-color:currentColor}.sentence-form__small{display:flex;justify-content:space-between;gap:24px;margin-top:8vh;align-items:end}.sentence-form__small p{font-size:14px;line-height:1.35;letter-spacing:0;color:var(--page-muted);max-width:420px}.send-contact{width:130px;height:130px;border-radius:50%;border:1px solid var(--page-line);background:transparent;color:inherit;font:9px ui-monospace,monospace;letter-spacing:.11em;transition:transform .5s cubic-bezier(.16,1,.3,1),background .25s ease,color .25s ease}.send-contact:hover{transform:rotate(8deg) scale(1.06);background:var(--page-fg);color:var(--page-bg)}.contact-success{min-height:100svh;display:grid;place-items:center;text-align:center;border-top:1px solid var(--page-line);padding:10vh var(--pad)}.contact-success h2{font-size:clamp(90px,17vw,320px);line-height:.7;letter-spacing:-.09em;margin:0}.contact-success p{font-size:20px;color:var(--page-muted)}.contact-success__mark{width:min(44vw,520px);margin:5vh auto 0}.contact-success__mark svg{width:100%;fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke}

/* Case study */
.case-page{--case-accent:#f0ede7}.case-hero{min-height:100svh;padding:calc(var(--header-h) + 5vh) var(--pad) 5vh;display:grid;grid-template-rows:auto 1fr auto;gap:3vh;overflow:hidden}.case-hero__top,.case-hero__bottom{display:flex;justify-content:space-between;gap:20px;font:8px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--page-muted)}.case-hero__body{display:grid;grid-template-columns:.7fr 1.3fr;gap:4vw;align-items:end}.case-hero h1{font-size:clamp(86px,13vw,240px);line-height:.72;letter-spacing:-.088em;margin:0;max-width:6ch}.case-hero__media{height:72vh;overflow:hidden}.case-hero__media img{width:100%;height:100%;object-fit:cover}.case-summary{display:grid;grid-template-columns:.65fr 1.35fr;gap:8vw;padding:13vh var(--pad);border-top:1px solid var(--page-line)}.case-summary h2{font-size:clamp(48px,6vw,110px);line-height:.84;letter-spacing:-.07em;margin:0}.case-summary__copy{font-size:clamp(24px,3vw,48px);line-height:1.02;letter-spacing:-.04em}.case-summary__copy p{margin:0 0 5vh}.case-facts{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--page-line)}.case-fact{padding:26px var(--pad);border-right:1px solid var(--page-line)}.case-fact:last-child{border-right:0}.case-fact span{font:8px ui-monospace,monospace;letter-spacing:.12em;color:var(--page-muted)}.case-fact strong{display:block;margin-top:14px;font-size:24px;letter-spacing:-.035em}.case-systems{padding:13vh var(--pad)}.case-systems__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--page-line);border:1px solid var(--page-line);margin-top:7vh}.case-system{background:var(--page-bg);padding:26px;min-height:26vh;display:flex;flex-direction:column;justify-content:space-between}.case-system span{font:8px ui-monospace,monospace;color:var(--page-muted)}.case-system strong{font-size:clamp(34px,4vw,64px);line-height:.88;letter-spacing:-.055em}.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--page-line);border-block:1px solid var(--page-line)}.case-gallery figure{margin:0;background:#111;min-height:60vh;overflow:hidden}.case-gallery figure.wide{grid-column:1/-1;min-height:80vh}.case-gallery img{width:100%;height:100%;object-fit:cover}.case-next{min-height:90svh;padding:10vh var(--pad);display:grid;align-content:center;border-top:1px solid var(--page-line)}.case-next span{font:8px ui-monospace,monospace;color:var(--page-muted)}.case-next a{display:block;font-size:clamp(90px,16vw,300px);line-height:.7;letter-spacing:-.09em;margin-top:5vh}

.inner-footer{padding:10vh var(--pad) max(14vh,130px);border-top:1px solid var(--page-line);display:grid;grid-template-columns:1fr auto;align-items:end;gap:3vw}.inner-footer strong{font-size:clamp(74px,11vw,190px);letter-spacing:-.085em;line-height:.75}.inner-footer div{display:flex;gap:22px;font:8px ui-monospace,monospace;color:var(--page-muted);text-transform:uppercase;letter-spacing:.1em}
.page-loader{position:fixed;inset:0;z-index:9999;background:#050505;color:#f0ede7;display:grid;place-items:center;transition:opacity .55s ease,visibility .55s ease}.page-loader.is-done{opacity:0;visibility:hidden}.page-loader__mark{width:74px}.page-loader__mark svg{width:100%;fill:none;stroke:currentColor;stroke-width:2}.page-loader__line{position:absolute;left:var(--pad);right:var(--pad);bottom:7vh;height:1px;background:rgba(255,255,255,.15)}.page-loader__line i{display:block;height:1px;background:#fff;transform-origin:left;animation:pageLoad 1s cubic-bezier(.16,1,.3,1) forwards}@keyframes pageLoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}.reveal.is-visible{opacity:1;transform:none}

@media(max-width:980px){
  .page-hero__main,.responsive-lab__stage,.case-hero__body,.case-summary{grid-template-columns:1fr}.page-hero__aside{justify-self:start;max-width:620px}.page-hero h1{font-size:clamp(92px,24vw,220px)}
  .page-section__head{grid-template-columns:1fr}.page-section__head p{justify-self:start}.what-grid{grid-template-columns:1fr}.what-row:nth-child(odd){border-right:0;padding-right:0}.what-row:nth-child(even){padding-left:0}
  .responsive-lab__stage{align-content:center}.lab-browser{justify-self:center;height:50vh}.process-grid{grid-template-columns:1fr 1fr}.process-step:nth-child(2){border-right:0}.project-grid{grid-template-columns:1fr}.case-hero__media{height:52vh}.case-facts{grid-template-columns:1fr 1fr}.case-fact:nth-child(2){border-right:0}.case-system{min-height:22vh}.case-systems__grid{grid-template-columns:1fr 1fr}.case-gallery figure,.case-gallery figure.wide{min-height:48vh}
}
@media(max-width:560px){
  .inner-page .site-header__edge{display:none}.page-hero{padding-top:calc(var(--header-h) + 8vh)}.page-hero h1{font-size:28vw}.page-hero__meta{flex-direction:column}.about-intro__copy p{font-size:18vw}.about-intro__copy p:nth-child(2),.about-intro__copy p:nth-child(3){padding-left:0}.about-timeline__stage{padding:9vh 18px 7vh}.timeline-card{width:84vw;grid-template-columns:50px 1fr}.page-section{padding:11vh 18px}.page-section__head h2{font-size:17vw}.what-row{grid-template-columns:45px 1fr;min-height:22vh}.what-row em{grid-column:2}.responsive-lab__stage{padding:9vh 18px 12vh}.lab-browser{height:45vh}.backstage__screen{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}.process-step{border-right:0;border-bottom:1px solid var(--page-line);padding:24px 0}.process-step:not(:first-child){padding-left:0}.project-grid{gap:12vh}.projects-toolbar{top:58px;align-items:flex-start;flex-direction:column}.project-stage[data-view="list"] .project-card{grid-template-columns:45px 1fr}.project-stage[data-view="list"] .project-card__media{grid-column:1/-1;grid-row:2;height:26vh}.project-stage[data-view="list"] .project-card__meta small{display:none}.project-play{min-height:65vh}.sentence-form{font-size:14vw}.sentence-form input,.sentence-form textarea{width:100%;display:block}.sentence-form__small{align-items:start;flex-direction:column}.send-contact{width:104px;height:104px}.case-hero{padding-inline:18px}.case-hero h1{font-size:22vw}.case-hero__media{height:42vh}.case-summary{padding:10vh 18px}.case-facts{grid-template-columns:1fr}.case-fact{border-right:0;border-bottom:1px solid var(--page-line);padding:24px 18px}.case-systems{padding:10vh 18px}.case-systems__grid{grid-template-columns:1fr}.case-gallery{grid-template-columns:1fr}.case-gallery figure,.case-gallery figure.wide{grid-column:auto;min-height:42vh}.case-next{padding-inline:18px}.inner-footer{padding-inline:18px;grid-template-columns:1fr;gap:5vh}.inner-footer strong{font-size:27vw}.inner-footer div{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.tools-line__track{animation:none}.reveal{transition:none}.page-loader__line i{animation:none;transform:scaleX(1)}}

/* ========================================================================
   ZAZA v23 — inner pages become worlds, not documents
   ======================================================================== */

/* shared cinematic layer */
.inner-page main{overflow:clip}
.inner-page .page-hero{isolation:isolate}
.inner-page .page-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(circle at var(--px,72%) var(--py,24%),rgba(255,255,255,.065),transparent 28%);
  opacity:.8;
}
.inner-page .page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:6vw 6vw;mask-image:linear-gradient(to bottom,#000,transparent 75%);opacity:.42;
}

/* ABOUT — identity field */
.about-hero{min-height:115svh}
.about-identity-field{
  position:absolute;right:5vw;top:17vh;width:min(42vw,660px);aspect-ratio:1;z-index:-1;
  transform-style:preserve-3d;perspective:1000px;pointer-events:none;
}
.about-identity-field::before,.about-identity-field::after{content:"";position:absolute;inset:12%;border:1px solid var(--page-line);border-radius:50%}
.about-identity-field::after{inset:26%;opacity:.5}
.about-identity-field__mark{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(120px,17vw,300px);line-height:.7;letter-spacing:-.12em;font-weight:560;opacity:.075;transform:rotateX(var(--about-rx,0deg)) rotateY(var(--about-ry,0deg));transition:transform .15s linear}
.about-identity-field>span{position:absolute;left:50%;top:50%;font:500 8px/1 ui-monospace,monospace;letter-spacing:.16em;color:var(--page-muted);transform:rotate(calc(var(--i)*60deg)) translateX(17vw) rotate(calc(var(--i)*-60deg));animation:aboutOrbit 22s linear infinite;animation-delay:calc(var(--i)*-1.7s)}
@keyframes aboutOrbit{from{margin-left:-1.2vw;transform:rotate(calc(var(--i)*60deg)) translateX(17vw) rotate(calc(var(--i)*-60deg))}to{margin-left:-1.2vw;transform:rotate(calc(var(--i)*60deg + 360deg)) translateX(17vw) rotate(calc(var(--i)*-60deg - 360deg))}}
.about-signal{height:280svh;position:relative;border-top:1px solid var(--page-line);background:#f0ede7;color:#080808}
.about-signal__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);overflow:hidden}
.about-signal__sticky .page-kicker{position:absolute;left:var(--pad);top:9vh;color:rgba(0,0,0,.42)}
.about-signal__line{font-size:clamp(64px,9.5vw,180px);line-height:.78;letter-spacing:-.08em;display:flex;gap:.18em;flex-wrap:wrap;align-items:baseline;white-space:nowrap;transform:translate3d(var(--signal-x,0),0,0)}
.about-signal__line:nth-child(3){justify-content:flex-end;margin-top:3vh;transform:translate3d(calc(var(--signal-x,0)*-1),0,0)}
.about-signal__line span{font-weight:350;opacity:.32}.about-signal__line b{font-weight:620}
.about-signal__cursor{position:absolute;left:var(--signal-cx,50%);top:var(--signal-cy,50%);padding:8px 11px;background:#080808;color:#f0ede7;border-radius:999px;font:500 7px/1 ui-monospace,monospace;letter-spacing:.12em;transform:translate(-50%,-50%);transition:left .12s linear,top .12s linear}

/* PROJECTS — spatial deck before browser */
.projects-hero{min-height:120svh}
.projects-hero .page-hero__main{position:relative;z-index:5}
.projects-hero-deck{position:absolute;right:3vw;top:14vh;width:min(48vw,800px);height:68vh;z-index:1;perspective:1200px;pointer-events:none;transform-style:preserve-3d}
.projects-hero-deck figure{--dx:calc((var(--i) - 1.5)*4.2vw);--dy:calc((var(--i) - 1.5)*3.2vh);position:absolute;inset:12% 8%;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 80px rgba(0,0,0,.3);transform:translate3d(calc(var(--dx) + var(--deck-x,0px)),calc(var(--dy) + var(--deck-y,0px)),calc(var(--i)*-58px)) rotateZ(calc((var(--i) - 1.5)*-2.2deg)) rotateX(var(--deck-rx,0deg)) rotateY(var(--deck-ry,0deg));transition:filter .45s ease;will-change:transform}
.projects-hero-deck figure:nth-child(1){z-index:4}.projects-hero-deck figure:nth-child(2){z-index:3}.projects-hero-deck figure:nth-child(3){z-index:2}.projects-hero-deck figure:nth-child(4){z-index:1}
.projects-hero-deck img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.04)}
.projects-hero-deck__cross{position:absolute;left:50%;top:50%;width:62px;height:62px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.3);border-radius:50%;mix-blend-mode:difference}
.projects-hero-deck__cross::before,.projects-hero-deck__cross::after{content:"";position:absolute;left:50%;top:50%;background:#fff;opacity:.5;transform:translate(-50%,-50%)}.projects-hero-deck__cross::before{width:92px;height:1px}.projects-hero-deck__cross::after{width:1px;height:92px}
.projects-pressure{height:260svh;position:relative;background:#f0ede7;color:#080808;border-top:1px solid rgba(0,0,0,.15)}
.projects-pressure__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);overflow:hidden}
.projects-pressure__sticky span,.projects-pressure__sticky strong,.projects-pressure__sticky em{display:block;font-style:normal;font-size:clamp(62px,10.5vw,200px);line-height:.72;letter-spacing:-.085em;white-space:nowrap;transform:translate3d(var(--pressure-x,0),0,0)}
.projects-pressure__sticky span{font-weight:320;opacity:.28}.projects-pressure__sticky strong{font-weight:620}.projects-pressure__sticky em{font-weight:620;text-align:right;color:#b84d2d}
.projects-browser{background:#080808;color:#f0ede7;position:relative}
.project-card{transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.project-card:hover{transform:translateY(-10px) rotateX(.8deg)}
.project-card__media{position:relative}
.project-card__media::after{content:"OPEN";position:absolute;right:15px;bottom:15px;padding:8px 10px;border-radius:999px;background:rgba(0,0,0,.7);color:white;font:500 7px/1 ui-monospace,monospace;letter-spacing:.12em;opacity:0;transform:translateY(7px);transition:.3s ease}.project-card:hover .project-card__media::after{opacity:1;transform:none}

/* CONTACT — signal field + narrative prelude */
.contact-hero{min-height:120svh}
.contact-field{position:absolute;right:4vw;top:16vh;width:min(42vw,680px);aspect-ratio:1;pointer-events:none;z-index:-1;transform:rotateX(var(--contact-rx,0deg)) rotateY(var(--contact-ry,0deg));transform-style:preserve-3d;transition:transform .12s linear}
.contact-field::before,.contact-field::after{content:"";position:absolute;inset:6%;border:1px solid var(--page-line);border-radius:50%}.contact-field::after{inset:30%;opacity:.55}
.contact-field__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(90px,13vw,220px);font-weight:600;letter-spacing:-.1em;opacity:.07}
.contact-field>span{position:absolute;left:50%;top:50%;padding:8px 10px;border:1px solid var(--page-line);border-radius:999px;font:500 7px/1 ui-monospace,monospace;letter-spacing:.11em;color:var(--page-muted);transform:rotate(var(--a)) translateX(16vw) rotate(calc(var(--a)*-1));animation:contactOrbit 18s linear infinite}
@keyframes contactOrbit{to{transform:rotate(calc(var(--a) + 360deg)) translateX(16vw) rotate(calc(var(--a)*-1 - 360deg))}}
.contact-field>i{position:absolute;left:50%;top:50%;height:1px;width:35%;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent);transform-origin:left center;opacity:.22}.contact-field>i:nth-of-type(1){transform:rotate(15deg)}.contact-field>i:nth-of-type(2){transform:rotate(135deg)}.contact-field>i:nth-of-type(3){transform:rotate(255deg)}
.contact-openline{height:270svh;position:relative;background:#f0ede7;color:#080808}
.contact-openline__sticky{position:sticky;top:0;height:100svh;padding:10vh var(--pad);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.contact-openline__sticky .page-kicker{position:absolute;top:9vh;color:rgba(0,0,0,.45)}
.contact-openline h2{font-size:clamp(68px,10vw,185px);line-height:.73;letter-spacing:-.084em;margin:0;font-weight:610;transform:translate3d(0,var(--openline-y,0),0)}
.contact-openline p{align-self:flex-end;max-width:420px;margin:5vh 0 0;font-size:clamp(18px,1.5vw,26px);line-height:1.1;opacity:.46}
.contact-compose{background:#080808;color:#f0ede7}
.sentence-form input,.sentence-form textarea{transition:background .25s ease,color .25s ease,transform .25s ease}.sentence-form input:focus,.sentence-form textarea:focus{background:#f0ede7;color:#080808;transform:translateY(-2px)}

/* CASE STUDIES — each project gets a different physical language */
.case-page{--case-world-bg:#080808;--case-world-fg:#f0ede7}
.case-page .case-hero{position:relative;isolation:isolate;border-bottom:0}
.case-page .case-hero__media{border-radius:18px;box-shadow:0 30px 100px rgba(0,0,0,.24);transform:perspective(1200px) rotateX(var(--case-rx,0deg)) rotateY(var(--case-ry,0deg));transition:transform .12s linear}
.case-world{height:330svh;position:relative;background:var(--case-world-bg);color:var(--case-world-fg);overflow:clip}
.case-world__sticky{position:sticky;top:0;height:100svh;overflow:hidden}

.case-ayamen{--case-world-bg:#eee8df;--case-world-fg:#0f2430;--page-accent:#dc6b35}
.case-ayamen .case-hero{background:#eee8df;color:#0f2430}.case-ayamen .case-hero__top,.case-ayamen .case-hero__bottom{color:rgba(15,36,48,.48)}
.ayamen-world__panels{position:absolute;inset:11vh 7vw;perspective:1400px}
.ayamen-world__panels img{position:absolute;width:68%;max-height:78vh;object-fit:contain;filter:drop-shadow(0 30px 45px rgba(30,20,10,.13));will-change:transform}
.ayamen-world__en{left:0;top:2%;transform:translate3d(var(--aye-x,0),var(--aye-y,0),0) rotateY(-7deg) rotateZ(-1.4deg)}
.ayamen-world__ar{right:-4%;bottom:0;transform:translate3d(var(--aya-x,0),var(--aya-y,0),60px) rotateY(7deg) rotateZ(1.4deg)}
.ayamen-world__copy{position:absolute;z-index:4;left:var(--pad);right:var(--pad);top:8vh;display:flex;justify-content:space-between;align-items:baseline;color:#0f2430}.ayamen-world__copy span,.ayamen-world__copy em{font:500 8px/1 ui-monospace,monospace;letter-spacing:.14em;font-style:normal}.ayamen-world__copy strong{font-size:clamp(64px,10vw,188px);line-height:.74;letter-spacing:-.085em}
.ayamen-world__orbit{position:absolute;width:34vw;aspect-ratio:1;border:1px solid rgba(220,107,53,.28);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--ayamen-orbit,1))}.ayamen-world__orbit::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;background:#dc6b35;border-radius:50%;animation:ayOrbit 8s linear infinite;transform-origin:0 calc(17vw + 5px)}@keyframes ayOrbit{to{transform:rotate(360deg)}}

.case-td{--case-world-bg:#071d2b;--case-world-fg:#f4f1eb;--page-accent:#ff6a2b}.case-td .case-hero{background:#071d2b}
.td-world__copy{position:absolute;left:var(--pad);top:10vh;z-index:3}.td-world__copy span{font:500 8px/1 ui-monospace,monospace;letter-spacing:.15em;opacity:.5}.td-world__copy strong{display:block;margin-top:15px;font-size:clamp(78px,12vw,220px);line-height:.72;letter-spacing:-.09em}
.td-world__rig{position:absolute;left:50%;top:-4vh;width:min(52vw,840px);height:94vh;transform:translateX(-50%);perspective:1100px}
.td-world__cable{position:absolute;left:50%;top:0;width:1px;height:31vh;background:linear-gradient(#e4edf5,rgba(228,237,245,.08))}
.td-world__container{position:absolute;left:50%;top:28vh;width:88%;height:auto;transform-origin:50% 0;transform:translateX(-50%) rotate(var(--td-world-angle,0deg)) rotateY(var(--td-world-yaw,0deg)) translateY(var(--td-world-y,0px));filter:drop-shadow(0 42px 36px rgba(0,0,0,.35));will-change:transform}
.td-world__horizon{position:absolute;left:-10%;right:-10%;bottom:17vh;height:1px;background:rgba(255,255,255,.22);transform:rotate(-3deg)}.td-world__horizon::before{content:"GLOBAL ROUTE / 24.7136 N 46.6753 E";position:absolute;right:8%;top:12px;font:500 7px/1 ui-monospace,monospace;letter-spacing:.15em;opacity:.5}

.case-refcon{--case-world-bg:#bfe0ef;--case-world-fg:#10293a;--page-accent:#1d5f8a}.case-refcon .case-hero{background:#bfe0ef;color:#10293a}.case-refcon .case-hero__top,.case-refcon .case-hero__bottom{color:rgba(16,41,58,.5)}
.refcon-world__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(16,41,58,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(16,41,58,.09) 1px,transparent 1px);background-size:6vw 6vw;transform:perspective(800px) rotateX(62deg) scale(1.3);transform-origin:50% 100%;opacity:.42}
.refcon-world__media{position:absolute;left:50%;top:50%;width:min(62vw,1040px);height:62vh;object-fit:cover;transform:translate(-50%,-50%) scale(var(--refcon-scale,.9));clip-path:circle(var(--refcon-clip,16%) at var(--refcon-x,50%) var(--refcon-y,50%));filter:saturate(.82) contrast(1.05);box-shadow:0 40px 90px rgba(10,35,50,.15)}
.refcon-world__scan{position:absolute;z-index:4;left:var(--refcon-left,50%);top:var(--refcon-top,50%);width:18vw;aspect-ratio:1;border:1px solid rgba(16,41,58,.5);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.refcon-world__scan::before,.refcon-world__scan::after{content:"";position:absolute;left:50%;top:50%;background:#10293a;opacity:.28;transform:translate(-50%,-50%)}.refcon-world__scan::before{width:125%;height:1px}.refcon-world__scan::after{width:1px;height:125%}
.refcon-world__copy{position:absolute;z-index:5;left:var(--pad);bottom:8vh;color:#10293a}.refcon-world__copy span{font:500 8px/1 ui-monospace,monospace;letter-spacing:.15em}.refcon-world__copy strong{display:block;margin-top:16px;font-size:clamp(64px,9vw,165px);line-height:.75;letter-spacing:-.08em}

.case-one{--case-world-bg:#000;--case-world-fg:#f3f0ea;--page-accent:#c8ff00}.case-one .case-hero{background:#000}
.one-world__depth{position:absolute;inset:0;perspective:900px;overflow:hidden;transform-style:preserve-3d}
.one-world__depth img{position:absolute;left:50%;top:50%;width:min(24vw,370px);aspect-ratio:4/5;object-fit:cover;transform:translate(-50%,-50%) translate3d(var(--one-x,0),var(--one-y,0),var(--one-z,0)) rotateZ(var(--one-r,0deg));opacity:var(--one-o,.5);filter:saturate(.85) contrast(1.08);will-change:transform,opacity}
.one-world__copy{position:absolute;z-index:10;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}.one-world__copy span{position:absolute;top:9vh;font:500 8px/1 ui-monospace,monospace;letter-spacing:.16em;opacity:.5}.one-world__copy strong{font-size:clamp(78px,13vw,240px);line-height:.7;letter-spacing:-.09em;text-shadow:0 10px 50px #000}

/* richer common case system behavior */
.case-systems__grid{overflow:hidden}.case-system{position:relative;transition:background .35s ease,color .35s ease,transform .6s cubic-bezier(.16,1,.3,1)}.case-system::after{content:"↗";position:absolute;right:18px;top:18px;font-size:18px;opacity:.18;transition:transform .4s ease,opacity .4s ease}.case-system:hover{transform:translateY(-6px);background:var(--page-fg);color:var(--page-bg)}.case-system:hover::after{opacity:1;transform:translate(3px,-3px)}
.case-gallery figure{position:relative}.case-gallery figure::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}.case-gallery img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}.case-gallery figure:hover img{transform:scale(1.025)}

@media(max-width:900px){
  .about-identity-field,.contact-field{width:72vw;right:-25vw;top:19vh;opacity:.7}
  .about-identity-field>span{transform:none!important;animation:none;display:none}.contact-field>span{display:none}
  .projects-hero-deck{width:68vw;right:-18vw;top:23vh;height:52vh;opacity:.7}
  .projects-pressure__sticky span,.projects-pressure__sticky strong,.projects-pressure__sticky em{white-space:normal}
  .about-signal__line{white-space:normal;font-size:14vw}
  .case-world{height:260svh}
  .ayamen-world__panels{inset:18vh 4vw}.ayamen-world__panels img{width:92%}.ayamen-world__ar{bottom:8vh}
  .ayamen-world__copy strong{font-size:14vw}
  .td-world__rig{width:90vw}.td-world__copy strong{font-size:16vw}
  .refcon-world__media{width:90vw;height:58vh}.refcon-world__scan{width:42vw}.refcon-world__copy strong{font-size:13vw}
  .one-world__depth img{width:42vw}.one-world__copy strong{font-size:18vw}
}
@media(max-width:620px){
  .about-signal,.projects-pressure,.contact-openline{height:220svh}
  .contact-openline h2{font-size:15vw}
  .projects-hero-deck{width:84vw;right:-34vw}
  .projects-hero-deck figure{inset:18% 4%}
}

/* ========================================================================
   ZAZA v25 — ABOUT / DISASSEMBLY, PERSONAL HISTORY, STABLE STICKY RUNTIME
   ======================================================================== */
body.about-page{
  --about-vh:100vh;
  --about-dark:#07090d;
  --about-dark-2:#0a0d12;
  --about-bone:#f0ede7;
  --about-metal:#c8d0d8;
  --about-blue:#b9d5ff;
  --about-orange:#d96d49;
  --about-px:0;
  --about-py:0;
  background:var(--about-dark);
}
.about-story{position:relative;isolation:isolate;background:var(--about-dark)}
.about-chapter{position:relative;min-height:var(--about-vh);border:0!important;isolation:isolate}
.about-sticky{position:sticky!important;top:0!important;height:var(--about-vh)!important;min-height:var(--about-vh)!important;overflow:hidden;box-sizing:border-box;isolation:isolate}
.about-chapter::before,.about-chapter::after{content:"";position:absolute;left:0;right:0;height:min(18vh,170px);z-index:3;pointer-events:none}
.about-chapter::before{top:0;background:linear-gradient(to bottom,var(--mix-from,transparent),transparent)}
.about-chapter::after{bottom:0;background:linear-gradient(to top,var(--mix-to,transparent),transparent)}
.about-machine{height:calc(var(--about-vh)*4.9);background:var(--about-dark);color:var(--about-bone);--mix-to:#f0ede7}
.about-signal{height:calc(var(--about-vh)*2.8)!important;background:var(--about-bone)!important;color:#080808!important;--mix-from:#07090d;--mix-to:#07090d}
.dual-system{height:calc(var(--about-vh)*5.2);background:var(--about-dark);color:var(--about-bone);--mix-from:#f0ede7}
.career-tape{height:calc(var(--about-vh)*5.6);background:var(--about-dark-2);color:#dce5f0}
.detail-problem{height:calc(var(--about-vh)*5.4);background:var(--about-bone);color:#090909;--mix-from:#0a0d12;--mix-to:#080b10}
.proof-room{height:calc(var(--about-vh)*4.8);background:#080b10;color:#dce5f0;--mix-from:#f0ede7;--mix-to:#f0ede7}
.human-part{height:calc(var(--about-vh)*4.1);background:var(--about-bone);color:#080808;--mix-from:#080b10;--mix-to:#07090d}
.reassembly{height:calc(var(--about-vh)*4.8);background:var(--about-dark);color:var(--about-bone);--mix-from:#f0ede7}

.about-machine__stage{display:grid;place-items:center;padding:8vh var(--pad);perspective:1600px;background:radial-gradient(circle at var(--about-glow-x,50%) var(--about-glow-y,48%),rgba(185,213,255,.09),transparent 28%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:auto,6vw 6vw,6vw 6vw}
.about-machine__top,.dual-system__head,.career-tape__head,.detail-problem__head,.proof-room__head,.reassembly__top{position:absolute;left:var(--pad);right:var(--pad);top:8.2vh;display:flex;justify-content:space-between;z-index:30}
.about-machine__copy{position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);z-index:20;pointer-events:none}
.about-machine__copy p{position:absolute;left:0;top:0;margin:0;max-width:13ch;font-size:clamp(62px,8.7vw,164px);font-weight:560;letter-spacing:-.078em;line-height:.77;opacity:0;filter:blur(8px);transform:translate3d(0,38px,0) scale(.985);will-change:opacity,transform,filter}
.about-machine__copy p small{display:block;margin-top:20px;max-width:52ch;font:500 9px/1.45 ui-monospace,monospace;letter-spacing:.12em;color:rgba(240,237,231,.5)}
.about-machine__readout{position:absolute;left:var(--pad);right:var(--pad);bottom:7vh;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.14);padding-top:12px;font:500 8px/1 ui-monospace,monospace;letter-spacing:.13em;color:rgba(240,237,231,.44);z-index:25}
.za-apparatus{position:absolute;right:6vw;top:50%;width:min(43vw,720px);aspect-ratio:1;transform:translateY(-50%) rotateX(var(--about-rx,0deg)) rotateY(var(--about-ry,0deg));transform-style:preserve-3d;z-index:8;will-change:transform}
.za-apparatus__halo{position:absolute;inset:8%;border:1px solid rgba(200,208,216,.22);border-radius:50%;transform-style:preserve-3d}.halo-b{inset:22%}.za-apparatus__axis{position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,rgba(185,213,255,.32),transparent);transform-origin:center}.axis-x{width:120%;height:1px;transform:translate(-50%,-50%)}.axis-y{width:1px;height:120%;background:linear-gradient(transparent,rgba(185,213,255,.32),transparent);transform:translate(-50%,-50%)}
.za-apparatus__piece,.za-apparatus__core{position:absolute;left:50%;top:50%;display:grid;place-items:center;transform-style:preserve-3d;will-change:transform,opacity}.za-apparatus__piece{width:30%;aspect-ratio:1;border:1px solid rgba(200,208,216,.32);background:rgba(7,9,13,.34);backdrop-filter:blur(6px);box-shadow:0 28px 70px rgba(0,0,0,.2)}.za-apparatus__piece span{font-size:clamp(52px,6vw,100px);letter-spacing:-.1em}.za-apparatus__piece i{position:absolute;bottom:10px;font:500 7px ui-monospace,monospace;letter-spacing:.13em;color:rgba(240,237,231,.45);font-style:normal}.za-apparatus__core{font-size:clamp(90px,11vw,190px);font-weight:560;letter-spacing:-.12em;color:#f0ede7;text-shadow:0 0 70px rgba(185,213,255,.12)}

/* 02 — retained Operating System, only viewport runtime corrected */
.about-signal__sticky{position:sticky!important;top:0!important;height:var(--about-vh)!important;min-height:var(--about-vh)!important;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);overflow:hidden;background:linear-gradient(180deg,#f0ede7,#ece8df)}
.about-signal__sticky .page-kicker{position:absolute;left:var(--pad);top:9vh;color:rgba(0,0,0,.42)}
.about-signal__line{font-size:clamp(64px,9.5vw,180px);line-height:.78;letter-spacing:-.08em;display:flex;gap:.18em;flex-wrap:wrap;align-items:baseline;white-space:nowrap;transform:translate3d(var(--signal-x,0),0,0)}
.about-signal__line:nth-child(3){justify-content:flex-end;margin-top:3vh;transform:translate3d(calc(var(--signal-x,0)*-1),0,0)}
.about-signal__line span{font-weight:350;opacity:.32}.about-signal__line b{font-weight:620}
.about-signal__cursor{position:absolute;left:var(--signal-cx,50%);top:var(--signal-cy,50%);padding:8px 11px;background:#080808;color:#f0ede7;border-radius:999px;font:500 7px/1 ui-monospace,monospace;letter-spacing:.12em;transform:translate(-50%,-50%)}

/* 03 — engineering and visual practice physically merge */
.dual-system__stage{perspective:1800px;background:radial-gradient(circle at 50% 50%,rgba(185,213,255,.07),transparent 32%),#07090d}
.dual-system__plane{position:absolute;top:15vh;bottom:14vh;width:47vw;padding:5.5vh 4.5vw;border:1px solid rgba(240,237,231,.16);background:rgba(10,13,18,.72);backdrop-filter:blur(10px);transform-style:preserve-3d;will-change:transform,opacity,filter;overflow:hidden}
.dual-system__plane::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent)}
.dual-system__plane--left{left:var(--pad);transform-origin:right center}.dual-system__plane--right{right:var(--pad);transform-origin:left center}
.dual-system__plane small,.dual-system__facts{position:relative;z-index:2;font:500 8px/1.4 ui-monospace,monospace;letter-spacing:.12em;color:rgba(240,237,231,.45)}
.dual-system__plane h2{position:relative;z-index:2;margin:7vh 0 0;font-size:clamp(66px,8vw,148px);line-height:.76;letter-spacing:-.08em;font-weight:570;max-width:7ch}.dual-system__plane--right h2{color:#cbd9ec}
.dual-system__facts{position:absolute;left:4.5vw;right:4.5vw;bottom:5vh;display:grid;gap:9px}.dual-system__facts span{border-top:1px solid rgba(240,237,231,.12);padding-top:8px}
.dual-system__seam{position:absolute;left:50%;top:9vh;bottom:9vh;width:1px;background:linear-gradient(transparent,rgba(240,237,231,.42),transparent);box-shadow:0 0 28px rgba(185,213,255,.18);will-change:transform,opacity}
.dual-system__merge{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;z-index:20}.dual-system__merge p,.dual-system__merge strong{margin:0;opacity:0;will-change:opacity,transform,filter}.dual-system__merge p{font:500 clamp(12px,1.05vw,18px)/1 ui-monospace,monospace;letter-spacing:.16em;color:rgba(240,237,231,.5);margin-bottom:14px}.dual-system__merge strong{font-size:clamp(74px,11vw,204px);line-height:.72;letter-spacing:-.085em;font-weight:610}
.dual-system__meter{position:absolute;left:var(--pad);right:var(--pad);bottom:7vh;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;font:500 8px/1 ui-monospace,monospace;letter-spacing:.12em;color:rgba(240,237,231,.4)}.dual-system__meter i{height:1px;background:linear-gradient(90deg,#b9d5ff 0 var(--mix,50%),rgba(240,237,231,.15) var(--mix,50%))}

/* 04 — real history, not generic process cards */
.career-tape__stage{background:radial-gradient(circle at 65% 45%,rgba(185,213,255,.06),transparent 34%),#0a0d12;perspective:1600px}
.career-tape__title{position:absolute;left:var(--pad);top:17vh;margin:0;font-size:clamp(68px,10vw,184px);line-height:.73;letter-spacing:-.085em;font-weight:570;color:#dce5f0;opacity:.18;z-index:2}
.career-tape__rail{position:absolute;left:0;top:42vh;display:flex;gap:3vw;width:max-content;padding-left:var(--pad);padding-right:18vw;will-change:transform;transform:translate3d(var(--career-x,0),0,0);z-index:10}
.career-card{width:min(58vw,900px);height:42vh;min-height:340px;padding:24px 28px;border:1px solid rgba(220,229,240,.16);background:rgba(9,12,17,.86);backdrop-filter:blur(8px);display:grid;grid-template-columns:130px 1fr;grid-template-rows:auto auto 1fr;gap:18px 3vw;transform-origin:center;will-change:transform,opacity}.career-card>span,.career-card>small{font:500 8px/1.4 ui-monospace,monospace;letter-spacing:.12em;color:rgba(220,229,240,.45)}.career-card>small{grid-column:2}.career-card h3{grid-column:2;margin:0;font-size:clamp(42px,5vw,84px);line-height:.86;letter-spacing:-.06em;font-weight:570;max-width:12ch}.career-card p{grid-column:2;margin:0;align-self:end;max-width:560px;font-size:clamp(15px,1.15vw,20px);line-height:1.28;color:rgba(220,229,240,.52)}.career-card--last h3{color:#c8d8ef}
.career-tape__yearline{position:absolute;left:var(--pad);right:var(--pad);bottom:8vh;height:1px;background:rgba(220,229,240,.12)}.career-tape__yearline i{display:block;height:100%;width:var(--career-progress,0%);background:#c8d8ef;box-shadow:0 0 18px rgba(185,213,255,.28)}

/* 05 — detail inspection */
.detail-problem__stage{padding:8vh var(--pad);background:radial-gradient(circle at var(--loupe-x,72%) var(--loupe-y,54%),rgba(9,9,9,.035),transparent 19%),linear-gradient(180deg,#f0ede7,#ebe7de)}
.detail-problem__head .page-kicker{color:rgba(0,0,0,.42)}.detail-problem__words{position:absolute;left:var(--pad);top:17vh;z-index:5}.detail-problem__words h2{margin:0;font-size:clamp(76px,11vw,208px);line-height:.73;letter-spacing:-.09em;font-weight:600}.detail-problem__words p{margin:3vh 0 0;font-size:clamp(26px,3vw,48px);letter-spacing:-.04em;color:rgba(0,0,0,.55)}
.inspection-bench{position:absolute;left:38vw;right:var(--pad);top:18vh;bottom:12vh;perspective:1200px}.inspection-card{position:absolute;inset:0;padding:26px;border:1px solid rgba(0,0,0,.18);background:rgba(240,237,231,.84);box-shadow:0 36px 120px rgba(40,30,20,.08);opacity:0;filter:blur(10px);transform:translate3d(12vw,4vh,-180px) rotateY(-8deg) scale(.94);will-change:opacity,transform,filter}.inspection-card>span{font:500 8px ui-monospace,monospace;letter-spacing:.12em;color:rgba(0,0,0,.45)}.inspection-card>em{position:absolute;right:25px;bottom:22px;font-style:normal;font-size:clamp(22px,2vw,34px);letter-spacing:-.04em}.inspection-demo{position:absolute;left:8%;right:8%;top:20%;bottom:18%;border:1px solid rgba(0,0,0,.12);overflow:hidden}.demo-align{display:flex;flex-direction:column;justify-content:center;padding:8%}.demo-align b{font-size:clamp(28px,4vw,70px);line-height:.82;letter-spacing:-.06em}.demo-align b:nth-child(2){transform:translateX(3px)}.demo-align i{position:absolute;top:0;bottom:0;left:8%;width:1px;background:#d35d3b}.demo-ease{display:flex;align-items:center;justify-content:space-around}.demo-ease i{width:42px;aspect-ratio:1;border-radius:50%;background:#080808}.demo-ease i:nth-child(2){transform:translateY(-20vh)}.demo-rtl{display:grid;place-items:center;font-size:clamp(36px,5vw,80px);font-weight:650}.demo-mobile{display:grid;place-items:center}.demo-mobile>div{width:48%;height:82%;border:1px solid #111;border-radius:22px;padding:20px;display:flex;flex-direction:column;justify-content:space-between}.demo-mobile strong{font-size:13px}.demo-mobile p{font-size:clamp(28px,3vw,56px);line-height:.82;letter-spacing:-.06em;margin:0;transform:translateX(3px)}
.inspection-loupe{position:absolute;left:var(--loupe-x,72%);top:var(--loupe-y,54%);width:150px;aspect-ratio:1;border:1px solid rgba(0,0,0,.55);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:26;box-shadow:0 0 0 9999px rgba(240,237,231,.12),inset 0 0 0 8px rgba(255,255,255,.3)}.inspection-loupe::after{content:"";position:absolute;width:65%;height:1px;background:#111;right:-49%;bottom:-16%;transform:rotate(42deg);transform-origin:left}.inspection-loupe span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 8px ui-monospace,monospace;letter-spacing:.12em}
.detail-problem__end{position:absolute;left:var(--pad);bottom:8vh;margin:0;font-size:clamp(52px,7vw,126px);line-height:.77;letter-spacing:-.075em;font-weight:590;opacity:0;transform:translateY(26px);will-change:opacity,transform}.detail-problem__end small{display:block;margin-top:16px;font:500 9px/1 ui-monospace,monospace;letter-spacing:.1em;color:rgba(0,0,0,.45)}

/* 06 — credentials become a moving evidence room */
.proof-room__stage{padding:8vh var(--pad);background:radial-gradient(circle at 50% 48%,rgba(185,213,255,.08),transparent 30%),linear-gradient(rgba(185,213,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(185,213,255,.025) 1px,transparent 1px),#080b10;background-size:auto,48px 48px,48px 48px,auto;perspective:1500px}
.proof-room__stage>h2{position:absolute;left:var(--pad);top:18vh;margin:0;font-size:clamp(74px,11vw,200px);line-height:.72;letter-spacing:-.088em;font-weight:570;opacity:.16}.proof-room__cards{position:absolute;inset:0;transform-style:preserve-3d}.proof-room__cards article{position:absolute;left:50%;top:50%;width:min(52vw,820px);min-height:36vh;padding:28px;border:1px solid rgba(220,229,240,.2);background:rgba(8,11,16,.88);backdrop-filter:blur(12px);box-shadow:0 40px 120px rgba(0,0,0,.22);opacity:0;display:grid;align-content:space-between;transform:translate(-50%,-50%) translateZ(-250px) scale(.84);will-change:opacity,transform,filter}.proof-room__cards small,.proof-room__cards span{font:500 8px/1.4 ui-monospace,monospace;letter-spacing:.12em;color:rgba(220,229,240,.45)}.proof-room__cards strong{font-size:clamp(54px,7vw,126px);line-height:.78;letter-spacing:-.075em;font-weight:580;color:#e3ebf5}.proof-room__aside{position:absolute;right:var(--pad);bottom:8vh;text-align:right;font-size:clamp(18px,1.7vw,28px);line-height:1.05;color:rgba(220,229,240,.42)}.proof-room__orbit{position:absolute;left:50%;top:50%;width:min(62vw,980px);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(185,213,255,.08);border-radius:50%}.proof-room__orbit i{position:absolute;inset:14%;border:1px solid rgba(185,213,255,.06);border-radius:50%}.proof-room__orbit i:nth-child(2){inset:29%}.proof-room__orbit i:nth-child(3){inset:43%}

/* 07 — actual biography, deliberately quiet */
.human-part__stage{padding:8vh var(--pad);background:linear-gradient(180deg,#f0ede7,#ece8df)}.human-part__stage>.page-kicker{position:absolute;left:var(--pad);top:8.2vh;color:rgba(0,0,0,.4)}.human-part__copy{position:absolute;inset:0;padding:8vh var(--pad)}.human-part__copy h2{position:absolute;left:var(--pad);top:17vh;margin:0;font-size:clamp(92px,16vw,300px);line-height:.68;letter-spacing:-.095em}.human-part__copy p{position:absolute;margin:0;font-size:clamp(26px,3.45vw,62px);line-height:.99;letter-spacing:-.05em;opacity:.1;filter:blur(7px);transform:translateY(36px);will-change:opacity,transform,filter}.human-part__copy p:nth-of-type(1){left:43vw;top:23vh;max-width:13ch}.human-part__copy p:nth-of-type(2){left:10vw;top:53vh;max-width:18ch}.human-part__copy p:nth-of-type(3){right:var(--pad);top:56vh;max-width:12ch}.human-part__copy p:nth-of-type(4){left:35vw;top:76vh;max-width:12ch}

/* 08 — reassembly */
.reassembly__stage{display:grid;place-items:center;padding:8vh var(--pad);perspective:1500px;background:radial-gradient(circle at 50% 48%,rgba(185,213,255,.08),transparent 28%),#07090d}.reassembly-object{position:absolute;left:50%;top:49%;width:min(48vw,760px);aspect-ratio:1;transform:translate(-50%,-50%);transform-style:preserve-3d}.reassembly-piece,.reassembly-core{position:absolute;left:50%;top:50%;font-size:clamp(110px,18vw,310px);line-height:.65;letter-spacing:-.13em;font-weight:520;will-change:transform,opacity}.reassembly-piece{color:rgba(200,208,216,.38);text-shadow:0 0 50px rgba(169,199,255,.05)}.reassembly-core{transform:translate(-50%,-50%) scale(.72);opacity:0;color:#f0ede7}.reassembly-copy{position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);z-index:10}.reassembly-copy>*{position:absolute;left:0;top:0;margin:0;font-size:clamp(72px,11vw,208px);line-height:.72;letter-spacing:-.087em;font-weight:560;opacity:0;filter:blur(7px);transform:translateY(34px);will-change:opacity,transform,filter}.reassembly-copy a{color:#f0ede7;border-bottom:0;max-width:9ch}.reassembly-copy a::after{content:" →";font-weight:300}.reassembly-copy p:nth-child(2){font-size:clamp(60px,9vw,170px)}

body.about-on-light .site-header{color:#080808}body.about-on-light .site-header .brand__mark{stroke:#080808}

@media(max-width:900px){
  .za-apparatus{right:-16vw;width:70vw;opacity:.72}.about-machine__copy p{font-size:clamp(54px,11vw,112px)}
  .dual-system__plane{width:54vw}.dual-system__plane--left{left:18px}.dual-system__plane--right{right:18px}.dual-system__plane h2{font-size:9vw}
  .career-card{width:72vw}.inspection-bench{left:31vw;right:18px}.detail-problem__words{left:18px}.proof-room__cards article{width:72vw}.human-part__copy p:nth-of-type(2){left:5vw}.human-part__copy p:nth-of-type(3){right:18px}
}
@media(max-width:560px){
  body.about-page{--pad:18px}.about-chapter::before,.about-chapter::after{height:11vh}
  .about-machine{height:calc(var(--about-vh)*4.5)}.about-signal{height:calc(var(--about-vh)*2.45)!important}.dual-system{height:calc(var(--about-vh)*4.6)}.career-tape{height:calc(var(--about-vh)*5)}.detail-problem{height:calc(var(--about-vh)*4.9)}.proof-room{height:calc(var(--about-vh)*4.3)}.human-part{height:calc(var(--about-vh)*4)}.reassembly{height:calc(var(--about-vh)*4.2)}
  .about-machine__top,.dual-system__head,.career-tape__head,.detail-problem__head,.proof-room__head,.reassembly__top{left:18px;right:18px;top:9vh}.about-machine__top span:last-child,.dual-system__head span:last-child,.career-tape__head span:first-child,.detail-problem__head span:first-child{max-width:48%;line-height:1.35;text-align:right}
  .about-machine__copy{left:18px;right:18px}.about-machine__copy p{font-size:14.5vw;max-width:11ch}.about-machine__copy p small{font-size:7px;max-width:36ch}.za-apparatus{right:-34vw;width:105vw;opacity:.34}.about-machine__readout{left:18px;right:18px;bottom:12vh;gap:9px;flex-wrap:wrap}
  .about-signal__sticky{padding:18px}.about-signal__sticky .page-kicker{left:18px}.about-signal__line{font-size:14vw;white-space:normal}.about-signal__line:nth-child(3){justify-content:flex-start}
  .dual-system__plane{top:18vh;bottom:18vh;width:78vw;padding:28px 22px}.dual-system__plane--left{left:-34vw}.dual-system__plane--right{right:-34vw}.dual-system__plane h2{font-size:13.5vw}.dual-system__facts{left:22px;right:22px;bottom:26px;font-size:6px}.dual-system__merge strong{font-size:15vw}.dual-system__merge p{font-size:7px}.dual-system__meter{left:18px;right:18px;bottom:12vh}
  .career-tape__title{left:18px;top:17vh;font-size:16vw}.career-tape__rail{top:40vh;padding-left:18px;gap:14px}.career-card{width:84vw;height:45vh;min-height:330px;padding:20px;grid-template-columns:80px 1fr}.career-card h3{font-size:9vw}.career-card p{font-size:13px}.career-tape__yearline{left:18px;right:18px;bottom:13vh}
  .detail-problem__words{left:18px;top:15vh}.detail-problem__words h2{font-size:16vw}.detail-problem__words p{font-size:6vw}.inspection-bench{left:18px;right:18px;top:39vh;bottom:15vh}.inspection-card{padding:16px}.inspection-loupe{width:100px}.detail-problem__end{left:18px;bottom:14vh;font-size:11vw}.demo-mobile>div{width:60%;height:82%}
  .proof-room__stage>h2{left:18px;top:17vh;font-size:15vw}.proof-room__cards article{width:88vw;min-height:38vh;padding:20px}.proof-room__cards strong{font-size:12.5vw}.proof-room__aside{right:18px;bottom:13vh;font-size:14px}.proof-room__orbit{width:120vw}
  .human-part__stage>.page-kicker{left:18px;top:9vh}.human-part__copy{padding:0}.human-part__copy h2{left:18px;top:16vh;font-size:23vw}.human-part__copy p{font-size:7.2vw}.human-part__copy p:nth-of-type(1){left:18px;top:39vh;max-width:16ch}.human-part__copy p:nth-of-type(2){left:18px;top:56vh;max-width:17ch}.human-part__copy p:nth-of-type(3){left:18px;right:auto;top:72vh;max-width:15ch}.human-part__copy p:nth-of-type(4){left:18px;top:84vh;max-width:13ch}
  .reassembly-object{width:96vw;opacity:.72}.reassembly-copy{left:18px;right:18px}.reassembly-copy>*{font-size:16vw}.reassembly-copy p:nth-child(2){font-size:14vw}
}
@media(prefers-reduced-motion:reduce){.inspection-loupe{display:none}.about-machine__copy p,.dual-system__plane,.career-card,.inspection-card,.proof-room__cards article,.human-part__copy p,.reassembly-copy>*{filter:none!important;transition:none!important}}

/* ========================================================================
   ZAZA v26 — ABOUT / sticky containment fix + origin sequence refinement
   ======================================================================== */
/* Sticky chapters were inside the generic inner-page overflow:clip wrapper.
   That clipping is useful on normal inner pages but breaks long native sticky
   chapters in WebKit/Safari and can make a stage appear to release early. */
body.about-page main,
body.about-page .about-story,
body.about-page .about-chapter{
  overflow:visible!important;
  overflow-x:visible!important;
  contain:none!important;
}
body.about-page .about-story{clip-path:none!important;transform:none!important}
body.about-page .about-chapter{transform:none!important}
body.about-page .about-sticky{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:0!important;
  height:var(--about-vh)!important;
  min-height:var(--about-vh)!important;
  max-height:var(--about-vh)!important;
  overflow:hidden!important;
  transform:none;
}

/* 04 / I DIDN'T START IN A BROWSER — one evolving machine, not resume cards */
.career-tape{height:calc(var(--about-vh)*7.2)!important}
.career-tape__stage{background:
  radial-gradient(circle at 73% 48%,rgba(185,213,255,.085),transparent 30%),
  linear-gradient(rgba(185,213,255,.021) 1px,transparent 1px),
  linear-gradient(90deg,rgba(185,213,255,.021) 1px,transparent 1px),
  #080b10!important;background-size:auto,5vw 5vw,5vw 5vw,auto!important}
.career-tape__title{top:15.5vh!important;font-size:clamp(72px,9.4vw,174px)!important;opacity:.13!important;max-width:7.8ch;z-index:1!important}
.career-evolution{position:absolute;inset:0;z-index:10}
.career-evolution__copy{position:absolute;left:var(--pad);top:35vh;width:min(38vw,650px);height:48vh;z-index:20}
.career-step{position:absolute;inset:0;margin:0;display:grid;grid-template-columns:115px 1fr;grid-template-rows:auto auto 1fr;gap:12px 24px;align-content:start;opacity:0;filter:blur(8px);transform:translate3d(0,28px,-100px) scale(.98);will-change:opacity,transform,filter;pointer-events:none}
.career-step>span,.career-step>small{font:500 8px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:rgba(220,229,240,.42)}
.career-step>small{grid-column:2}.career-step h3{grid-column:2;margin:2vh 0 0;font-size:clamp(42px,4.7vw,82px);line-height:.82;letter-spacing:-.068em;font-weight:570;color:#e4ebf4;max-width:11ch}.career-step p{grid-column:2;margin:2.6vh 0 0;max-width:520px;font-size:clamp(14px,1.05vw,19px);line-height:1.34;color:rgba(220,229,240,.52)}.career-step--last h3{color:#c8d8ef}
.career-evolution__machine{position:absolute;right:var(--pad);top:22vh;width:min(50vw,860px);height:61vh;border:1px solid rgba(220,229,240,.14);background:rgba(6,9,13,.68);box-shadow:0 45px 130px rgba(0,0,0,.22);perspective:1400px;overflow:hidden;z-index:12}
.career-evolution__machine::before{content:"ORIGIN / SYSTEM → IMAGE → INTERACTION";position:absolute;left:18px;top:16px;z-index:20;font:500 7px/1 ui-monospace,monospace;letter-spacing:.13em;color:rgba(220,229,240,.32)}
.career-evolution__machine::after{content:"";position:absolute;inset:0;z-index:19;pointer-events:none;background:linear-gradient(90deg,transparent 49.9%,rgba(220,229,240,.08) 50%,transparent 50.1%),linear-gradient(transparent 49.9%,rgba(220,229,240,.08) 50%,transparent 50.1%)}
.career-visual{position:absolute;inset:0;opacity:0;filter:blur(8px);transform:translate3d(0,20px,-130px) scale(.96);will-change:opacity,transform,filter;overflow:hidden}

/* machine learning / node field */
.career-visual--ml{background:radial-gradient(circle at 50% 50%,rgba(185,213,255,.07),transparent 42%)}
.ml-matrix{position:absolute;left:12%;right:12%;top:18%;bottom:20%}
.ml-matrix::before,.ml-matrix::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(220,229,240,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(220,229,240,.06) 1px,transparent 1px);background-size:12.5% 16.66%}
.ml-matrix i{position:absolute;width:10px;height:10px;border:1px solid #c8d8ef;border-radius:50%;box-shadow:0 0 18px rgba(185,213,255,.2)}
.ml-matrix i:nth-child(1){left:7%;top:18%}.ml-matrix i:nth-child(2){left:28%;top:42%}.ml-matrix i:nth-child(3){left:45%;top:16%}.ml-matrix i:nth-child(4){left:61%;top:55%}.ml-matrix i:nth-child(5){left:82%;top:27%}.ml-matrix i:nth-child(6){left:17%;top:76%}.ml-matrix i:nth-child(7){left:48%;top:78%}.ml-matrix i:nth-child(8){left:74%;top:78%}.ml-matrix i:nth-child(9){left:90%;top:61%}
.ml-axis{position:absolute;left:5%;right:5%;bottom:7%;display:flex;justify-content:space-between;border-top:1px solid rgba(220,229,240,.14);padding-top:11px;font:500 7px/1 ui-monospace,monospace;letter-spacing:.13em;color:rgba(220,229,240,.4)}

/* industrial / live sensor */
.career-visual--industrial{background:linear-gradient(180deg,rgba(13,25,31,.82),rgba(6,9,13,.9))}
.sensor-wave{position:absolute;left:7%;right:7%;top:19%;height:56%;display:flex;align-items:center;gap:1.3%;border-block:1px solid rgba(220,229,240,.09)}
.sensor-wave::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(220,229,240,.15)}
.sensor-wave i{flex:1;height:calc(8% + (var(--career-local, .5) * 0%));background:#c8d8ef;opacity:.48;transform-origin:center}
.sensor-wave i:nth-child(1){height:18%}.sensor-wave i:nth-child(2){height:42%}.sensor-wave i:nth-child(3){height:26%}.sensor-wave i:nth-child(4){height:68%}.sensor-wave i:nth-child(5){height:34%}.sensor-wave i:nth-child(6){height:84%}.sensor-wave i:nth-child(7){height:31%}.sensor-wave i:nth-child(8){height:61%}.sensor-wave i:nth-child(9){height:22%}.sensor-wave i:nth-child(10){height:72%}.sensor-wave i:nth-child(11){height:46%}.sensor-wave i:nth-child(12){height:24%}
.sensor-readout{position:absolute;left:7%;right:7%;bottom:8%;display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:end}.sensor-readout span,.sensor-readout small{font:500 7px/1.2 ui-monospace,monospace;letter-spacing:.12em;color:rgba(220,229,240,.4)}.sensor-readout b{font-size:clamp(34px,4vw,70px);font-weight:520;letter-spacing:-.055em;color:#dce5f0}

/* OCR / scanner */
.career-visual--ocr{background:#0b0e13}.ocr-document{position:absolute;left:20%;top:16%;width:60%;height:68%;border:1px solid rgba(220,229,240,.2);padding:28px;color:#dce5f0;background:rgba(220,229,240,.035)}.ocr-document>span{font:500 8px ui-monospace,monospace;letter-spacing:.13em}.ocr-document p{margin:12vh 0 0;font:500 clamp(12px,1.15vw,18px)/1.8 ui-monospace,monospace;color:rgba(220,229,240,.48)}.ocr-document i{position:absolute;border:1px solid rgba(217,109,73,.75)}.ocr-document i:nth-of-type(1){left:12%;top:31%;width:43%;height:8%}.ocr-document i:nth-of-type(2){left:12%;top:44%;width:67%;height:9%}.ocr-document i:nth-of-type(3){left:12%;top:58%;width:52%;height:9%}.ocr-scan{position:absolute;left:18%;right:18%;top:calc(19% + var(--career-local,0)*56%);height:1px;background:#d96d49;box-shadow:0 0 22px rgba(217,109,73,.5)}

/* ATS / ranked system */
.career-visual--ats{background:linear-gradient(150deg,#0b0e13,#080b10)}.ats-window{position:absolute;left:9%;right:9%;top:16%;bottom:12%;border:1px solid rgba(220,229,240,.17);padding:22px}.ats-window header{display:flex;justify-content:space-between;border-bottom:1px solid rgba(220,229,240,.12);padding-bottom:14px;font:500 7px ui-monospace,monospace;letter-spacing:.13em;color:rgba(220,229,240,.4)}.ats-window>i{position:relative;display:block;height:13%;margin-top:5%;border-bottom:1px solid rgba(220,229,240,.1);font:500 8px ui-monospace,monospace;letter-spacing:.1em;color:#dce5f0;font-style:normal}.ats-window>i::after{content:"";position:absolute;left:0;bottom:-1px;width:var(--score);height:1px;background:#c8d8ef}

/* camera / composition */
.career-visual--camera{background:radial-gradient(circle at 50% 50%,rgba(240,237,231,.08),transparent 30%),#08090c}.camera-frame{position:absolute;inset:12%;border:1px solid rgba(240,237,231,.3)}.camera-frame::before,.camera-frame::after{content:"";position:absolute;background:rgba(240,237,231,.17)}.camera-frame::before{left:50%;top:0;bottom:0;width:1px}.camera-frame::after{top:50%;left:0;right:0;height:1px}.camera-frame i{position:absolute;width:34px;height:34px;border-color:#f0ede7}.camera-frame i:nth-child(1){left:16px;top:16px;border-left:1px solid;border-top:1px solid}.camera-frame i:nth-child(2){right:16px;top:16px;border-right:1px solid;border-top:1px solid}.camera-frame i:nth-child(3){left:16px;bottom:16px;border-left:1px solid;border-bottom:1px solid}.camera-frame i:nth-child(4){right:16px;bottom:16px;border-right:1px solid;border-bottom:1px solid}.camera-frame span{position:absolute;bottom:18px;font:500 7px ui-monospace,monospace;letter-spacing:.12em;color:rgba(240,237,231,.48)}.camera-frame span:nth-of-type(1){left:18px}.camera-frame span:nth-of-type(2){left:50%;transform:translateX(-50%)}.camera-frame span:nth-of-type(3){right:18px}.camera-aperture{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;border:1px solid rgba(240,237,231,.2);border-radius:50%;transform:translate(-50%,-50%) rotate(calc(var(--career-local,0)*90deg));box-shadow:inset 0 0 0 32px rgba(0,0,0,.22)}

/* browser / final synthesis */
.career-visual--browser{background:#f0ede7;color:#080808}.browser-origin{position:absolute;inset:10%;border:1px solid rgba(0,0,0,.25);background:#f6f2ea;box-shadow:0 30px 80px rgba(0,0,0,.16)}.browser-origin header{height:38px;border-bottom:1px solid rgba(0,0,0,.16);display:flex;align-items:center;gap:7px;padding:0 12px}.browser-origin header i{width:6px;height:6px;border:1px solid #080808;border-radius:50%}.browser-origin header span{margin-left:auto;font:500 7px ui-monospace,monospace;letter-spacing:.1em;opacity:.45}.browser-origin main{position:absolute;inset:38px 0 0;padding:7%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden!important}.browser-origin small{font:500 7px ui-monospace,monospace;letter-spacing:.13em}.browser-origin strong{font-size:clamp(72px,8vw,150px);line-height:.69;letter-spacing:-.09em}.browser-origin b{position:absolute;width:34%;aspect-ratio:1;right:-4%;bottom:-19%;background:#d96d49;border-radius:50%}

/* Keep the quiet biography readable. Earlier absolute placements allowed the
   copy to collide when every line had revealed. One line now owns the reading
   area at a time, which also makes the chapter feel conversational. */
.human-part__copy h2{left:var(--pad)!important;top:17vh!important;font-size:clamp(86px,13vw,242px)!important;max-width:4.8ch;z-index:1}
.human-part__copy p{left:48vw!important;right:var(--pad)!important;top:34vh!important;max-width:15ch!important;font-size:clamp(28px,3.15vw,56px)!important;line-height:.98!important;z-index:3}

/* Reassembly: text and object are separate actors, not layers fighting for the
   same center point. */
.reassembly-object{left:auto!important;right:5vw!important;top:50%!important;width:min(39vw,650px)!important;transform:translateY(-50%)!important}
.reassembly-copy{left:var(--pad)!important;right:auto!important;width:52vw!important;top:50%!important}
.reassembly-copy>*{max-width:7ch}

@media(max-width:900px){
  .career-evolution__copy{left:18px;width:43vw}.career-evolution__machine{right:18px;width:50vw}.career-step{grid-template-columns:82px 1fr}.career-step h3{font-size:5.8vw}
  .human-part__copy p{left:47vw!important;font-size:4.1vw!important}.reassembly-copy{width:56vw!important}.reassembly-object{right:-3vw!important;width:46vw!important}
}
@media(max-width:560px){
  .career-tape{height:calc(var(--about-vh)*6.8)!important}.career-tape__title{left:18px!important;top:15vh!important;font-size:14vw!important}.career-evolution__copy{left:18px;right:18px;top:31vh;width:auto;height:30vh}.career-step{grid-template-columns:72px 1fr;gap:8px 12px}.career-step h3{font-size:8.5vw;margin-top:1vh}.career-step p{font-size:12px;margin-top:1.5vh}.career-evolution__machine{left:18px;right:18px;top:auto;bottom:14vh;width:auto;height:31vh}.sensor-readout b{font-size:7vw}.ocr-document{left:13%;top:12%;width:74%;height:76%;padding:16px}.browser-origin{inset:8%}.browser-origin strong{font-size:14vw}
  .human-part__copy h2{left:18px!important;top:15vh!important;font-size:20vw!important}.human-part__copy p{left:18px!important;right:18px!important;top:48vh!important;font-size:7.4vw!important;max-width:15ch!important}
  .reassembly-object{left:50%!important;right:auto!important;top:38%!important;width:78vw!important;transform:translate(-50%,-50%)!important;opacity:.34}.reassembly-copy{left:18px!important;right:18px!important;top:68%!important;width:auto!important}.reassembly-copy>*{font-size:15vw!important;max-width:8ch}
}

/* ========================================================================
   ZAZA v27 — ABOUT / persistent stage + self-correcting detail scene
   ======================================================================== */
/* About now behaves like the homepage: chapters themselves are transparent.
   The persistent global stage owns the colour and only changes when the next
   chapter actually becomes active. This prevents future chapter colours from
   showing as stacked blocks before the visitor reaches them. */
body.about-page{
  --about-stage-bg:#07090d;
  --about-stage-fg:#f0ede7;
  --page-bg:var(--about-stage-bg);
  --page-fg:var(--about-stage-fg);
  --page-muted:rgba(240,237,231,.48);
  --page-line:rgba(240,237,231,.15);
  background:transparent!important;
  color:var(--about-stage-fg);
  transition:color .85s var(--ease-film);
}
body.about-page .global-stage{
  background:var(--about-stage-bg)!important;
  transition:background-color .9s var(--ease-film)!important;
}
body.about-page .about-story,
body.about-page .about-chapter,
body.about-page .about-sticky{
  background-color:transparent!important;
}
body.about-page .about-machine,
body.about-page .about-signal,
body.about-page .dual-system,
body.about-page .career-tape,
body.about-page .detail-problem,
body.about-page .proof-room,
body.about-page .human-part,
body.about-page .reassembly{background:transparent!important}
body.about-page .about-machine__stage{background:
  radial-gradient(circle at var(--about-glow-x,50%) var(--about-glow-y,48%),rgba(185,213,255,.09),transparent 28%),
  linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px)!important;
  background-size:auto,6vw 6vw,6vw 6vw!important}
body.about-page .about-signal__sticky{background:transparent!important}
body.about-page .dual-system__stage{background:radial-gradient(circle at 50% 50%,rgba(185,213,255,.07),transparent 32%)!important}
body.about-page .career-tape__stage{background:
  radial-gradient(circle at 73% 48%,rgba(185,213,255,.085),transparent 30%),
  linear-gradient(rgba(185,213,255,.021) 1px,transparent 1px),
  linear-gradient(90deg,rgba(185,213,255,.021) 1px,transparent 1px)!important;
  background-size:auto,5vw 5vw,5vw 5vw!important}
body.about-page .proof-room__stage{background:
  radial-gradient(circle at 50% 48%,rgba(185,213,255,.08),transparent 30%),
  linear-gradient(rgba(185,213,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(185,213,255,.025) 1px,transparent 1px)!important;
  background-size:auto,48px 48px,48px 48px!important}
body.about-page .human-part__stage{background:transparent!important}
body.about-page .reassembly__stage{background:radial-gradient(circle at 50% 48%,rgba(185,213,255,.08),transparent 28%)!important}

/* 05 / I NOTICE THINGS — the composition itself contains the mistakes. */
.detail-problem{height:calc(var(--about-vh)*5.15)!important;color:#080808}
.detail-problem__stage{
  padding:0 var(--pad)!important;
  background:
    radial-gradient(circle at 76% 43%,rgba(0,0,0,.035),transparent 24%),
    linear-gradient(rgba(0,0,0,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.032) 1px,transparent 1px)!important;
  background-size:auto,8vw 8vw,8vw 8vw!important;
}
.detail-problem__head .page-kicker{color:rgba(0,0,0,.42)!important}
.detail-selftest{position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);z-index:8}
.detail-selftest h2{margin:0;font-size:clamp(92px,15vw,278px);line-height:.67;letter-spacing:-.097em;font-weight:600;max-width:7ch;white-space:nowrap}
.detail-skew-i{display:inline-block;transform-origin:50% 92%;transform:translateY(var(--detail-i-y,7px)) rotate(var(--detail-i-r,-6deg));will-change:transform}
.detail-callout{position:absolute;margin:0;font-size:clamp(24px,2.5vw,44px);line-height:1;letter-spacing:-.045em;font-weight:450;opacity:0;filter:blur(5px);will-change:opacity,transform,filter}
.detail-callout--one{left:min(61vw,960px);top:8%}
.detail-callout--two{right:2vw;bottom:7%}
.detail-axis{position:absolute;right:var(--pad);top:19vh;width:min(33vw,560px);height:min(42vh,410px);opacity:.18;z-index:5;will-change:opacity,transform}
.detail-axis__h,.detail-axis__v{position:absolute;display:block;background:rgba(0,0,0,.32);transform-origin:center}
.detail-axis__h{left:0;right:0;top:54%;height:1px;transform:translateY(var(--detail-axis-y,7px)) rotate(var(--detail-axis-r,-.62deg))}
.detail-axis__v{top:0;bottom:0;left:58%;width:1px;transform:translateX(var(--detail-axis-x,8px))}
.detail-axis b{position:absolute;left:58%;top:54%;width:8px;height:8px;border:1px solid rgba(0,0,0,.62);border-radius:50%;transform:translate(calc(-50% + var(--detail-axis-x,8px)),calc(-50% + var(--detail-axis-y,7px)));background:var(--about-stage-bg)}
.detail-axis span{position:absolute;right:0;bottom:0;font:500 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:rgba(0,0,0,.38)}
.detail-expense{position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);z-index:14;pointer-events:none}
.detail-expense p{margin:0;max-width:10ch;font-size:clamp(74px,11vw,208px);line-height:.70;letter-spacing:-.09em;font-weight:600;opacity:0;filter:blur(8px);transform:translateY(34px);will-change:opacity,transform,filter}
.detail-expense small{display:block;margin-top:3vh;font:500 clamp(14px,1.25vw,21px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;opacity:0;filter:blur(5px);transform:translateY(16px);will-change:opacity,transform,filter}

@media(max-width:900px){
  .detail-selftest h2{font-size:16vw}.detail-axis{width:38vw;right:18px}.detail-callout--one{left:55vw}.detail-callout--two{right:0}
}
@media(max-width:560px){
  .detail-problem{height:calc(var(--about-vh)*4.8)!important}
  .detail-selftest{left:18px;right:18px;top:45%}.detail-selftest h2{font-size:20.5vw;white-space:normal;max-width:5.7ch}.detail-skew-i{--detail-i-y:4px}
  .detail-axis{right:18px;top:19vh;width:54vw;height:28vh}.detail-callout{font-size:5.5vw}.detail-callout--one{left:auto;right:0;top:-8%}.detail-callout--two{right:0;bottom:-14%}
  .detail-expense{left:18px;right:18px}.detail-expense p{font-size:16vw;max-width:8ch}.detail-expense small{font-size:11px}
}

/* ========================================================================
   ZAZA v28 — ABOUT / continuous stage, practical technical routing, seam
   ======================================================================== */

/* No chapter boundaries. About is one continuous stage, like Home. */
body.about-page .about-chapter::before,
body.about-page .about-chapter::after{display:none!important}
body.about-page .about-chapter,
body.about-page .about-sticky{border:0!important;box-shadow:none!important}
body.about-page .about-machine__readout{border-top:0!important;padding-top:0!important}
body.about-page .inner-footer{border-top:0!important;background:transparent!important}
body.about-page .about-story{background:transparent!important}

/* Safe viewport composition. The old absolute text containers had zero height,
   which let supposedly centered copy grow below the viewport. Every major
   conversation beat now owns the true visual center and is capped by height. */
.about-machine__copy{left:var(--pad)!important;right:auto!important;top:0!important;bottom:0!important;width:min(58vw,980px)!important;transform:none!important}
.about-machine__copy p{top:50%!important;width:100%;max-width:9.2ch!important;font-size:clamp(48px,min(7.5vw,11vh),138px)!important;line-height:.78!important}
.about-machine__copy p small{font-size:clamp(8px,.55vw,10px)!important;line-height:1.5!important;max-width:48ch!important}
.about-signal__line{font-size:clamp(48px,min(6.9vw,10vh),126px)!important;line-height:.80!important;white-space:normal!important;max-width:100%!important}
.dual-system__plane h2{font-size:clamp(48px,min(6.6vw,9.5vh),118px)!important;line-height:.80!important}
.career-tape__title{font-size:clamp(58px,min(8.3vw,12vh),148px)!important;line-height:.75!important}
.career-step h3{font-size:clamp(36px,min(4.4vw,6.6vh),76px)!important;line-height:.86!important}
.career-step p{font-size:clamp(13px,min(1.02vw,2.3vh),18px)!important;line-height:1.34!important}

/* 05 — second error is a real UI problem: button content is vertically off. */
.detail-axis{display:none!important}
.detail-selftest h2{font-size:clamp(72px,min(12.2vw,18vh),214px)!important;line-height:.70!important;max-width:7ch!important}
.detail-control{position:absolute;right:var(--pad);top:48%;width:clamp(220px,24vw,390px);height:clamp(58px,7vh,76px);border:1px solid rgba(0,0,0,.42);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,1.6vw,28px);z-index:7;opacity:0;transform:translateY(-50%);will-change:opacity,transform}
.detail-control::before{content:"";position:absolute;inset:5px;border:1px solid rgba(0,0,0,.055);pointer-events:none}
.detail-control__label,.detail-control i{position:relative;display:block;font:600 clamp(9px,.7vw,12px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;font-style:normal;transform:translateY(var(--detail-control-y,6px));will-change:transform}
.detail-control i{font-size:clamp(18px,1.5vw,25px);letter-spacing:0;font-family:Arial,sans-serif;font-weight:300}
.detail-callout--two{right:var(--pad)!important;bottom:auto!important;top:calc(48% + 68px)!important}
.detail-expense p{font-size:clamp(64px,min(10vw,15vh),178px)!important;line-height:.73!important}

/* 06 — Technical skills as a routing system, not badges/certificates. */
.skill-router{height:calc(var(--about-vh)*6.4);color:#dce5f0;background:transparent!important}
.skill-router__stage{padding:0 var(--pad);perspective:1500px;background:radial-gradient(circle at 72% 45%,rgba(185,213,255,.065),transparent 30%),linear-gradient(rgba(185,213,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(185,213,255,.018) 1px,transparent 1px)!important;background-size:auto,5vw 5vw,5vw 5vw!important}
.skill-router__head{position:absolute;left:var(--pad);right:var(--pad);top:8.2vh;display:flex;justify-content:space-between;z-index:30}
.skill-router__stage>h2{position:absolute;left:var(--pad);top:16vh;margin:0;max-width:6.2ch;font-size:clamp(58px,min(8.6vw,12vh),154px);line-height:.74;letter-spacing:-.085em;font-weight:570;color:#dce5f0;opacity:.12;z-index:1}
.skill-router__aside{position:absolute;left:var(--pad);top:36vh;margin:0;max-width:25ch;font-size:clamp(15px,1.2vw,20px);line-height:1.2;color:rgba(220,229,240,.42);z-index:3}
.skill-router__cases{position:absolute;left:var(--pad);top:45vh;width:min(35vw,590px);height:38vh;z-index:14}
.skill-router__cases article{position:absolute;inset:0;margin:0;opacity:0;filter:blur(8px);transform:translate3d(0,28px,-90px) scale(.98);will-change:opacity,transform,filter;pointer-events:none}
.skill-router__cases small{font:500 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:rgba(220,229,240,.4)}
.skill-router__cases h3{margin:2vh 0 0;max-width:8ch;font-size:clamp(42px,min(5.7vw,8.2vh),98px);line-height:.78;letter-spacing:-.072em;font-weight:580;color:#e3ebf5}
.skill-router__cases p{margin:2.4vh 0 0;max-width:34ch;font-size:clamp(13px,min(1.05vw,2.2vh),18px);line-height:1.32;color:rgba(220,229,240,.52)}
.skill-router__bank{position:absolute;right:var(--pad);top:17vh;bottom:15vh;width:min(51vw,900px);display:grid;align-content:center;gap:clamp(12px,1.6vh,20px);z-index:13}
.skill-group{display:grid;grid-template-columns:minmax(95px,.23fr) 1fr;gap:18px;align-items:start}
.skill-group>b{padding-top:6px;font:500 7px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:rgba(220,229,240,.32)}
.skill-group>div{display:flex;flex-wrap:wrap;gap:6px}
.skill-group span{display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border:1px solid rgba(220,229,240,.09);font:500 clamp(7px,.48vw,9px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.075em;color:rgba(220,229,240,.22);background:rgba(7,10,14,.14);transition:color .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s var(--ease-film)}
.skill-group span.is-hot{color:#eaf2fc;border-color:rgba(185,213,255,.46);background:rgba(185,213,255,.07);box-shadow:0 0 26px rgba(185,213,255,.07);transform:translateY(-1px)}
.skill-router__flow{position:absolute;left:var(--pad);right:var(--pad);bottom:7vh;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:12px;font:500 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:rgba(220,229,240,.34)}
.skill-router__flow i{height:1px;background:linear-gradient(90deg,rgba(185,213,255,.1),rgba(185,213,255,.62),rgba(185,213,255,.1));transform:scaleX(var(--skill-flow,.12));transform-origin:left;transition:transform .18s linear}

/* 07 — one conversational thought owns the viewport at a time. */
.human-part{height:calc(var(--about-vh)*5.2)!important}
.human-part__copy{position:absolute!important;inset:0!important;padding:0!important}
.human-part__copy h2{left:50%!important;top:50%!important;width:min(86vw,1500px)!important;max-width:none!important;margin:0!important;font-size:clamp(72px,min(13vw,18vh),230px)!important;line-height:.72!important;text-align:center;transform:translate(-50%,-50%);will-change:opacity,transform,filter}
.human-part__copy p{left:50%!important;right:auto!important;top:50%!important;width:min(76vw,1120px)!important;max-width:22ch!important;margin:0!important;font-size:clamp(28px,min(3.35vw,6.2vh),58px)!important;line-height:1!important;letter-spacing:-.05em;text-align:left;opacity:0;transform:translate(-50%,-50%);will-change:opacity,transform,filter}

/* 08 — THE SEAM. About physically opens to reveal the project world. */
.about-seam{height:calc(var(--about-vh)*5.2);color:#f0ede7;background:transparent!important}
.about-seam__stage{position:sticky!important;top:0!important;height:var(--about-vh)!important;min-height:var(--about-vh)!important;overflow:hidden!important;background:transparent!important;isolation:isolate}
.about-seam__top{position:absolute;left:var(--pad);right:var(--pad);top:8.2vh;display:flex;justify-content:space-between;z-index:40}
.seam-world{position:absolute;inset:0;z-index:1;background:#07090d;overflow:hidden;opacity:var(--seam-world-o,0);will-change:opacity,filter}
.seam-world::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.46)),radial-gradient(circle at 50% 48%,transparent 15%,rgba(0,0,0,.38) 78%);z-index:8;pointer-events:none}
.seam-world figure{position:absolute;inset:7vh 5vw 11vh;margin:0;opacity:0;transform:scale(1.08);filter:saturate(.82) contrast(1.06);will-change:opacity,transform,filter;overflow:hidden}
.seam-world img{width:100%;height:100%;object-fit:cover}
.seam-curtain{position:absolute;top:0;bottom:0;width:50.12%;z-index:15;background:var(--about-stage-bg,#07090d);will-change:transform;display:flex;align-items:flex-end;padding:0 var(--pad) 7vh;color:rgba(240,237,231,.28);font:500 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em}
.seam-curtain--left{left:0;justify-content:flex-start;transform:translateX(calc(var(--seam-open,0)*-100%))}
.seam-curtain--right{right:0;justify-content:flex-end;transform:translateX(calc(var(--seam-open,0)*100%))}
.seam-core{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:18;background:rgba(240,237,231,.35);box-shadow:0 0 calc(12px + var(--seam-open,0)*50px) rgba(185,213,255,.28);opacity:calc(1 - var(--seam-open,0)*.72);transform:translateX(-50%)}
.seam-copy{position:absolute;inset:0;z-index:28;pointer-events:none}
.seam-copy p{position:absolute;left:var(--pad);top:50%;margin:0;max-width:8ch;font-size:clamp(68px,min(11vw,17vh),196px);line-height:.72;letter-spacing:-.087em;font-weight:570;opacity:0;filter:blur(7px);transform:translateY(-50%);will-change:opacity,transform,filter}
.seam-copy__work{max-width:7.4ch!important}
.seam-copy small{position:absolute;left:var(--pad);bottom:11vh;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:rgba(240,237,231,.55);opacity:0;will-change:opacity}
.seam-pointer{position:absolute;inset:0;width:100%;height:100%;z-index:32;overflow:visible;pointer-events:none;color:rgba(240,237,231,.7);opacity:0;will-change:opacity}
.seam-pointer path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.site-dock .dock-app.is-seam-target{background:rgba(240,237,231,.13)!important;box-shadow:inset 0 0 0 1px rgba(240,237,231,.32),0 0 34px rgba(240,237,231,.12)!important}
.site-dock .dock-app.is-seam-target .dock-app__label{opacity:1!important;transform:translateY(0)!important}

@media(max-width:900px){
  .about-machine__copy{width:58vw!important}.about-machine__copy p{font-size:min(8vw,10vh)!important}
  .detail-control{width:29vw}.skill-router__cases{width:38vw}.skill-router__bank{width:52vw}.skill-group{grid-template-columns:84px 1fr}
}
@media(max-width:560px){
  .about-machine__copy{left:18px!important;right:18px!important;width:auto!important}.about-machine__copy p{font-size:min(15.5vw,10.5vh)!important;max-width:8.5ch!important}.about-machine__copy p small{font-size:7px!important}
  .about-signal__line{font-size:min(11.5vw,8.8vh)!important;line-height:.84!important}
  .dual-system__plane h2{font-size:min(11vw,8vh)!important}
  .career-tape__title{font-size:min(14vw,10vh)!important}.career-evolution__copy{top:29vh!important;height:30vh!important}.career-evolution__machine{bottom:12vh!important;height:29vh!important}.career-step h3{font-size:min(8.4vw,5vh)!important}.career-step p{font-size:11px!important;line-height:1.28!important}
  .detail-selftest{top:43%!important}.detail-selftest h2{font-size:min(19vw,13vh)!important}.detail-control{right:18px;top:61%;width:min(68vw,300px);height:58px}.detail-callout--two{right:18px!important;top:calc(61% + 62px)!important}.detail-expense p{font-size:min(15vw,11vh)!important}
  .skill-router{height:calc(var(--about-vh)*6)!important}.skill-router__head{left:18px;right:18px;top:8.5vh}.skill-router__stage>h2{left:18px;top:14vh;font-size:min(13vw,9vh);opacity:.1}.skill-router__aside{left:18px;top:28vh;font-size:12px}.skill-router__cases{left:18px;right:18px;top:32vh;width:auto;height:23vh}.skill-router__cases h3{font-size:min(10vw,6.5vh)}.skill-router__cases p{font-size:11px;max-width:30ch;margin-top:1.2vh}.skill-router__bank{left:18px;right:18px;top:55vh;bottom:12vh;width:auto;gap:7px}.skill-group{grid-template-columns:66px 1fr;gap:8px}.skill-group>b{font-size:5.5px}.skill-group>div{gap:3px}.skill-group span{min-height:19px;padding:3px 5px;font-size:5.8px;letter-spacing:.04em}.skill-router__flow{left:18px;right:18px;bottom:7vh;font-size:5.5px;gap:5px}
  .human-part__copy h2{font-size:min(20vw,13vh)!important;width:92vw!important}.human-part__copy p{width:86vw!important;max-width:17ch!important;font-size:min(7.3vw,5.2vh)!important}
  .about-seam__top{left:18px;right:18px;top:8.5vh}.seam-world figure{inset:9vh 18px 13vh}.seam-curtain{padding-inline:18px}.seam-copy p{left:18px;font-size:min(15vw,11vh);max-width:7.8ch}.seam-copy small{left:18px;bottom:15vh}.about-seam{height:calc(var(--about-vh)*4.7)}
}

/* ========================================================================
   ZAZA v29 — ABOUT / typography, conversational titles, technical board
   ======================================================================== */

/* Supporting information is deliberately readable now. These are labels,
   not decorative dust. Keep the chapter geometry intact while increasing
   their optical presence. */
body.about-page .page-kicker{font-size:clamp(10px,.72vw,13px)!important;line-height:1.15!important;letter-spacing:.14em!important}
body.about-page .about-machine__readout{font-size:clamp(9px,.62vw,12px)!important;line-height:1.15!important;letter-spacing:.12em!important}
body.about-page .about-machine__copy p small{font-size:clamp(10px,.68vw,13px)!important;line-height:1.45!important;letter-spacing:.1em!important}
body.about-page .dual-system__plane small,
body.about-page .career-step>span,
body.about-page .career-step>small,
body.about-page .skill-router__cases small,
body.about-page .seam-curtain{font-size:clamp(9px,.62vw,12px)!important;line-height:1.2!important}
body.about-page .dual-system__facts{font-size:clamp(10px,.72vw,13px)!important;line-height:1.35!important}
body.about-page .skill-router__flow{font-size:clamp(9px,.58vw,11px)!important}
body.about-page .seam-copy small{font-size:clamp(11px,.72vw,14px)!important}

/* 01 — give the opening statement a real composition instead of pinning
   three heavy lines to the exact same left edge. */
.about-machine__intro{width:min(79vw,1420px)!important;max-width:none!important;font-size:clamp(52px,min(6.9vw,10.4vh),128px)!important;line-height:.80!important}
.about-machine__intro span{display:block;width:max-content;max-width:100%;white-space:nowrap}
.about-machine__intro span:nth-child(1){margin-left:0}
.about-machine__intro span:nth-child(2){margin-left:clamp(54px,8vw,150px)}
.about-machine__intro span:nth-child(3){margin-left:clamp(16px,2.6vw,52px)}

/* 04 — title is now a scroll conversation, and disappears completely
   before the history begins. */
.career-tape__intro{position:absolute;inset:0;z-index:22;pointer-events:none}
.career-tape__intro p{position:absolute;left:var(--pad);top:50%;margin:0;max-width:10ch;font-size:clamp(64px,min(9.2vw,14vh),166px);line-height:.74;letter-spacing:-.088em;font-weight:580;color:#dce5f0;opacity:0;filter:blur(8px);transform:translateY(-50%);will-change:opacity,transform,filter}
.career-evolution{will-change:opacity,filter,transform}

/* 06 — same rule: chapter title speaks, exits, then the technical system
   owns the screen. */
.skill-router{height:calc(var(--about-vh)*7.35)!important}
.skill-router__intro{position:absolute;inset:0;z-index:26;pointer-events:none}
.skill-router__intro p{position:absolute;left:var(--pad);top:50%;margin:0;max-width:9ch;font-size:clamp(64px,min(9.4vw,14vh),170px);line-height:.73;letter-spacing:-.09em;font-weight:580;color:#e3ebf5;opacity:0;filter:blur(8px);transform:translateY(-50%);will-change:opacity,transform,filter}
.skill-router__intro p:nth-child(3){font-size:clamp(76px,min(12vw,18vh),220px);max-width:6ch}
.skill-router__intro p:nth-child(4){max-width:8ch}
.skill-router__aside{top:17vh!important;font-size:clamp(16px,1.12vw,21px)!important;max-width:31ch!important;color:rgba(220,229,240,.55)!important;opacity:0;will-change:opacity,transform,filter}
.skill-router__cases{top:26vh!important;width:min(34vw,620px)!important;height:54vh!important}
.skill-router__cases small{font-size:clamp(10px,.66vw,12px)!important}
.skill-router__cases h3{margin-top:2.2vh!important;font-size:clamp(48px,min(6vw,9vh),108px)!important;max-width:8ch!important}
.skill-router__cases p{font-size:clamp(15px,min(1.12vw,2.35vh),20px)!important;line-height:1.34!important;max-width:34ch!important}
.skill-router__bank{right:var(--pad)!important;top:16vh!important;bottom:12vh!important;width:min(57vw,1080px)!important;gap:clamp(14px,1.8vh,24px)!important;align-content:center!important;transform-style:preserve-3d;will-change:transform}
.skill-group{grid-template-columns:minmax(110px,.2fr) 1fr!important;gap:20px!important}
.skill-group>b{padding-top:9px!important;font-size:clamp(9px,.58vw,11px)!important;line-height:1.25!important;letter-spacing:.13em!important}
.skill-group>div{gap:8px!important}
.skill-group span{min-height:36px!important;padding:9px 12px!important;font-size:clamp(10px,.64vw,13px)!important;letter-spacing:.065em!important;border-color:rgba(220,229,240,.11)!important;background:rgba(7,10,14,.2)!important;cursor:pointer;transform-style:preserve-3d}
.skill-group span.is-hot{border-color:rgba(196,222,255,.68)!important;background:rgba(185,213,255,.105)!important;box-shadow:0 0 34px rgba(185,213,255,.1),inset 0 0 0 1px rgba(255,255,255,.025)!important;transform:translateY(-2px) translateZ(12px)!important}
.skill-group span:hover,.skill-group span.is-hover{color:#fff!important;border-color:rgba(255,255,255,.75)!important;background:rgba(255,255,255,.11)!important;transform:translateY(-4px) translateZ(22px) scale(1.025)!important;box-shadow:0 12px 38px rgba(0,0,0,.28),0 0 28px rgba(185,213,255,.15)!important}
.skill-router__links{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;overflow:visible;opacity:.82}
.skill-router__links path{fill:none;stroke:rgba(185,213,255,.25);stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(185,213,255,.1))}
.skill-router__links path.is-primary{stroke:rgba(217,234,255,.72);stroke-width:1.25}
.skill-router__inspector{position:absolute;left:var(--pad);bottom:13vh;width:min(31vw,520px);display:grid;grid-template-columns:auto 1fr;gap:7px 14px;align-items:baseline;z-index:18;color:rgba(220,229,240,.5);opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .45s var(--ease-film)}
.skill-router__inspector.is-visible{opacity:1;transform:none}
.skill-router__inspector small{grid-column:1/-1;font:500 clamp(9px,.58vw,11px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:rgba(220,229,240,.32)}
.skill-router__inspector strong{font-size:clamp(19px,1.55vw,30px);font-weight:520;letter-spacing:-.04em;color:#edf5ff}
.skill-router__inspector span{font-size:clamp(12px,.82vw,15px);line-height:1.2;color:rgba(220,229,240,.48)}
.skill-router__flow{bottom:6.3vh!important}

/* 08 — once LOOK AT THE WORK has pointed at the dock, continue the same
   visual guide through the lower edge so the direction remains legible while
   the user continues into the footer. */
.seam-footer-guide{position:fixed;left:var(--seam-guide-x,50%);top:var(--seam-guide-y,90vh);bottom:0;width:1px;z-index:3900;pointer-events:none;opacity:0;transition:opacity .3s linear;color:rgba(240,237,231,.52)}
.seam-footer-guide.is-visible{opacity:1}
.seam-footer-guide i{position:absolute;inset:0;background:linear-gradient(180deg,currentColor,rgba(240,237,231,.14));box-shadow:0 0 8px rgba(240,237,231,.08)}
.seam-footer-guide span{position:absolute;right:9px;bottom:10px;writing-mode:vertical-rl;transform:rotate(180deg);font:500 clamp(8px,.52vw,10px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:rgba(240,237,231,.42)}

@media(max-width:900px){
  .about-machine__intro{font-size:min(7.7vw,10vh)!important;width:76vw!important}
  .skill-router__bank{width:55vw!important}.skill-router__cases{width:36vw!important}.skill-group{grid-template-columns:90px 1fr!important}.skill-group span{font-size:9px!important;padding:7px 9px!important;min-height:31px!important}
}
@media(max-width:560px){
  body.about-page .page-kicker{font-size:9px!important}.about-machine__readout{font-size:8px!important}
  .about-machine__intro{width:91vw!important;font-size:min(13.7vw,9.2vh)!important;line-height:.82!important}.about-machine__intro span{white-space:normal;width:auto}.about-machine__intro span:nth-child(2){margin-left:8vw}.about-machine__intro span:nth-child(3){margin-left:2vw}
  .career-tape__intro p,.skill-router__intro p{left:18px;right:18px;font-size:min(15vw,10vh);max-width:8.5ch}
  .skill-router{height:calc(var(--about-vh)*7.2)!important}.skill-router__aside{left:18px!important;top:15vh!important;font-size:12px!important}.skill-router__cases{left:18px!important;right:18px!important;top:23vh!important;width:auto!important;height:27vh!important}.skill-router__cases h3{font-size:min(10vw,6.3vh)!important}.skill-router__cases p{font-size:11px!important}.skill-router__bank{left:18px!important;right:18px!important;top:51vh!important;bottom:11vh!important;width:auto!important;gap:6px!important}.skill-group{grid-template-columns:68px 1fr!important;gap:7px!important}.skill-group>b{font-size:6.5px!important;padding-top:5px!important}.skill-group>div{gap:4px!important}.skill-group span{min-height:22px!important;padding:4px 6px!important;font-size:6.5px!important}.skill-router__inspector{display:none}.skill-router__flow{font-size:6px!important;bottom:6vh!important}
  .seam-footer-guide span{display:none}
}

/* ZAZA v30+ — About opening conversation refinements */
/* The opening is a conversation now, not a three-line poster. */
.about-machine__intro{width:min(49vw,850px)!important;max-width:10.5ch!important;font-size:clamp(58px,min(7vw,10.2vh),126px)!important;line-height:.80!important;letter-spacing:-.075em!important}
.about-machine__intro span{display:block!important;width:max-content!important;max-width:100%!important;white-space:nowrap!important;margin-left:0!important}
.about-machine__intro span:nth-child(2){margin-top:.09em!important;margin-left:clamp(22px,2.6vw,52px)!important;color:rgba(240,237,231,.96)}
.about-machine__explain{max-width:10.2ch!important;font-size:clamp(56px,min(6.6vw,9.6vh),120px)!important;line-height:.82!important}

@media(max-width:900px){
  .about-machine__intro{width:57vw!important;font-size:min(8.2vw,9.6vh)!important}
}
@media(max-width:560px){
  .about-machine__intro{width:84vw!important;max-width:10ch!important;font-size:min(14vw,9vh)!important}.about-machine__intro span{white-space:normal!important}.about-machine__intro span:nth-child(2){margin-left:4vw!important}
  .about-machine__explain{font-size:min(13.2vw,8.7vh)!important}
}

/* ========================================================================
   ZAZA v33 — PROJECTS / ONE CONTINUOUS WORK EXPERIENCE
   ======================================================================== */
.projects-page-v33{
  --work-vh:100vh;
  --page-bg:#080808;
  --page-fg:#f0ede7;
  --page-muted:rgba(240,237,231,.56);
}
.projects-page-v33 main{overflow:visible!important}
.projects-page-v33 .global-stage{background:#080808}
.projects-page-v33 .site-header{mix-blend-mode:difference;color:#f3efe8}
.projects-page-v33 .site-header__meta{color:inherit}
.projects-v33{position:relative;background:#080808;color:#f0ede7}
.projects-v33 a{color:inherit;text-decoration:none}
.work-label{font:600 clamp(10px,.72vw,13px)/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}

/* Hero — no controls, no filter UI. */
.work-hero-v33{
  min-height:calc(var(--work-vh)*1.35);
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(420px,1.28fr);
  align-items:center;
  gap:4vw;
  padding:calc(var(--header-h) + 7vh) var(--pad) 9vh;
  background:#080808;
  color:#f0ede7;
  isolation:isolate;
}
.work-hero-v33::before{
  content:"";position:absolute;inset:-18%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at var(--hero-x,69%) var(--hero-y,45%),rgba(255,255,255,.065),transparent 22%);
}
.work-hero-v33__copy{align-self:center;position:relative;z-index:4;max-width:670px;padding-top:4vh}
.work-hero-v33__copy .work-label{color:rgba(240,237,231,.48)}
.work-hero-v33__copy h1{margin:3.6vh 0 4vh;font-size:clamp(104px,13.8vw,252px);line-height:.66;letter-spacing:-.1em;font-weight:620}
.work-hero-v33__copy p{margin:0;max-width:520px;font-size:clamp(20px,1.58vw,30px);line-height:1.05;letter-spacing:-.035em;color:rgba(240,237,231,.62)}
.work-hero-v33__stack{height:min(69vh,760px);position:relative;perspective:1400px;transform-style:preserve-3d;z-index:2}
.hero-plate{position:absolute;inset:6% 5%;margin:0;overflow:hidden;background:#111;box-shadow:0 35px 110px rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.12);transform-style:preserve-3d;will-change:transform;transform:translate3d(calc((var(--plate) - 1.5)*var(--fan-x,3.8vw) + var(--stack-x,0px)),calc((var(--plate) - 1.5)*var(--fan-y,2.7vh) + var(--stack-y,0px)),calc((3 - var(--plate))*-72px)) rotateZ(calc((var(--plate) - 1.5)*-2.25deg)) rotateX(var(--stack-rx,0deg)) rotateY(var(--stack-ry,0deg))}
.hero-plate img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.84) contrast(1.04)}
.hero-plate--ayamen{z-index:4}.hero-plate--td{z-index:3}.hero-plate--refcon{z-index:2}.hero-plate--one{z-index:1}
.work-hero-v33__index{position:absolute;right:-2px;bottom:-38px;display:flex;gap:17px;font:600 10px/1 ui-monospace,monospace;letter-spacing:.12em;color:rgba(240,237,231,.42)}
.work-hero-v33__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:4.5vh;display:flex;justify-content:space-between;gap:20px;font:600 9px/1 ui-monospace,monospace;letter-spacing:.13em;color:rgba(240,237,231,.42)}

/* Four project worlds share one pinned viewport. No section dividers. */
.work-runway-v33{height:calc(var(--work-vh)*5.8);position:relative;background:#080808}
.work-runway-v33__sticky{position:sticky;top:0;height:var(--work-vh);overflow:hidden;isolation:isolate;background:#080808}
.work-runway-v33__hud{position:absolute;left:var(--pad);right:var(--pad);top:max(24px,4.8vh);z-index:30;display:flex;justify-content:space-between;gap:18px;font:600 clamp(9px,.68vw,12px)/1 ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--world-muted,rgba(240,237,231,.52));pointer-events:none;transition:color .35s ease}
.work-world-v33{--world-o:0;--world-y:12vh;--world-s:.965;position:absolute;inset:0;display:grid;grid-template-columns:minmax(300px,.67fr) minmax(0,1.33fr);gap:5vw;align-items:center;padding:11vh var(--pad) 8vh;opacity:var(--world-o);transform:translate3d(0,var(--world-y),0) scale(var(--world-s));filter:blur(var(--world-blur,8px));pointer-events:none;will-change:opacity,transform,filter;background:var(--world-bg);color:var(--world-fg);overflow:hidden}
.work-world-v33.is-current{pointer-events:auto}
.work-world-v33__ghost{position:absolute;left:-.045em;bottom:-.18em;font-size:clamp(170px,25vw,470px);font-weight:650;line-height:.67;letter-spacing:-.11em;white-space:nowrap;color:var(--ghost);pointer-events:none;user-select:none}
.work-world-v33__copy{position:relative;z-index:6;align-self:center;min-width:0}
.work-world-v33__copy .work-label{display:block;color:var(--world-muted);margin-bottom:3.2vh}
.work-world-v33__copy h2{margin:0;font-size:clamp(72px,9.15vw,176px);line-height:.69;letter-spacing:-.09em;font-weight:620;max-width:8ch}
.work-world-v33__copy p{margin:4.2vh 0 3.2vh;max-width:520px;font-size:clamp(17px,1.35vw,24px);line-height:1.13;letter-spacing:-.025em;color:var(--world-muted)}
.work-world-v33__facts{display:flex;gap:8px;flex-wrap:wrap;max-width:600px;margin-bottom:4vh}
.work-world-v33__facts span{padding:8px 10px;border:1px solid var(--world-line);font:600 clamp(8px,.58vw,10px)/1 ui-monospace,monospace;letter-spacing:.1em;color:var(--world-muted)}
.work-enter-v33{display:inline-flex;align-items:center;gap:15px;font:650 clamp(11px,.76vw,14px)/1 ui-monospace,monospace;letter-spacing:.1em;border-bottom:1px solid currentColor;padding-bottom:8px}
.work-enter-v33 i{font-style:normal;font-size:1.25em;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.work-enter-v33:hover i{transform:translate(5px,-5px)}
.work-world-v33__media{position:relative;z-index:5;width:100%;height:min(66vh,760px);justify-self:end;perspective:1200px;display:block;transform:translate3d(var(--media-x,0),var(--media-y,0),0) rotateX(var(--media-rx,0deg)) rotateY(var(--media-ry,0deg));will-change:transform}
.work-shot-v33{position:absolute;inset:7% 0 7% 4%;margin:0;overflow:hidden;box-shadow:0 35px 100px rgba(0,0,0,.22);background:#111}
.work-shot-v33 img{width:100%;height:100%;object-fit:cover;display:block}

.world-ayamen-v33{--world-bg:#ece6dc;--world-fg:#11131a;--world-muted:rgba(17,19,26,.56);--world-line:rgba(17,19,26,.18);--ghost:rgba(17,19,26,.035)}
.ayamen-media-v33{--orange:#d76b3d}
.ayamen-media-v33 .work-shot-v33{inset:10% 4% 8% 8%;box-shadow:0 30px 90px rgba(43,35,30,.18)}
.ayamen-lang{position:absolute;z-index:4;display:grid;gap:6px;padding:12px 15px;background:#11131a;color:#f1e9de;box-shadow:0 18px 48px rgba(0,0,0,.18);transform:translate3d(var(--lang-x,0),var(--lang-y,0),0)}
.ayamen-lang b{font:700 8px/1 ui-monospace,monospace;color:var(--orange);letter-spacing:.12em}.ayamen-lang span{font-size:clamp(13px,1vw,18px);line-height:1.04;letter-spacing:-.025em;max-width:18ch}
.ayamen-lang--en{left:0;top:4%}.ayamen-lang--ar{right:0;bottom:1%;text-align:right}.ayamen-lang--ar span{font-size:clamp(16px,1.25vw,22px)}
.ayamen-orbit-v33{position:absolute;right:6%;top:7%;width:88px;aspect-ratio:1;border:1px solid rgba(17,19,26,.24);border-radius:50%;z-index:3;transform:rotate(var(--orbit-r,0deg))}.ayamen-orbit-v33::before{content:"";position:absolute;inset:14%;border:1px solid rgba(17,19,26,.15);border-radius:50%}.ayamen-orbit-v33 i{position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--orange)}

.world-td-v33{--world-bg:#07111d;--world-fg:#eef5fa;--world-muted:rgba(238,245,250,.58);--world-line:rgba(238,245,250,.18);--ghost:rgba(116,179,224,.04)}
.td-media-v33 .work-shot-v33{inset:8% 1% 8% 6%;filter:saturate(.82) brightness(.78)}
.td-cable-v33{position:absolute;z-index:5;left:72%;top:-8%;width:1px;height:35%;background:linear-gradient(#dbe8f1,rgba(219,232,241,.12));transform-origin:top;transform:rotate(var(--td-swing,0deg))}
.td-container-v33{position:absolute;z-index:6;left:48%;top:14%;width:41%;max-height:38%;object-fit:contain;filter:drop-shadow(0 28px 30px rgba(0,0,0,.4));transform-origin:58% -18%;transform:translate3d(var(--td-x,0),var(--td-y,0),0) rotate(var(--td-swing,0deg)) rotateY(var(--td-yaw,0deg))}
.td-coordinate-v33{position:absolute;right:2%;bottom:1%;z-index:5;font:600 9px/1 ui-monospace,monospace;letter-spacing:.13em;color:rgba(238,245,250,.5)}

.world-refcon-v33{--world-bg:#c8dfef;--world-fg:#0c2740;--world-muted:rgba(12,39,64,.57);--world-line:rgba(12,39,64,.19);--ghost:rgba(12,39,64,.035)}
.refcon-media-v33 .work-shot-v33{inset:8% 2% 8% 5%;box-shadow:0 35px 95px rgba(26,62,88,.16)}
.refcon-base-v33 img{filter:saturate(.55) contrast(.92)}
.refcon-scan-v33{position:absolute;inset:8% 2% 8% 5%;margin:0;overflow:hidden;z-index:4;clip-path:circle(var(--scan-r,16%) at var(--scan-x,50%) var(--scan-y,50%));pointer-events:none}
.refcon-scan-v33 img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.07)}
.refcon-reticle-v33{position:absolute;z-index:6;left:var(--scan-x,50%);top:var(--scan-y,50%);width:clamp(100px,11vw,180px);aspect-ratio:1;border:1px solid rgba(12,39,64,.5);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.refcon-reticle-v33::before,.refcon-reticle-v33::after{content:"";position:absolute;left:50%;top:50%;background:#0c2740;opacity:.55;transform:translate(-50%,-50%)}.refcon-reticle-v33::before{width:130%;height:1px}.refcon-reticle-v33::after{width:1px;height:130%}.refcon-reticle-v33 i{position:absolute;inset:18%;border:1px solid rgba(12,39,64,.22);border-radius:50%}.refcon-reticle-v33 b{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#e56f3d;transform:translate(-50%,-50%)}
.refcon-readout-v33{position:absolute;left:0;bottom:0;z-index:6;font:650 9px/1.6 ui-monospace,monospace;letter-spacing:.12em;color:rgba(12,39,64,.55)}

.world-one-v33{--world-bg:#070707;--world-fg:#f1eee7;--world-muted:rgba(241,238,231,.56);--world-line:rgba(241,238,231,.17);--ghost:rgba(241,238,231,.035)}
.one-media-v33{transform-style:preserve-3d}
.one-main-v33{inset:15% 8% 14% 10%;z-index:4;box-shadow:0 35px 120px rgba(0,0,0,.55)}
.one-depth-v33{position:absolute;inset:0;perspective:1000px;transform-style:preserve-3d;z-index:2;pointer-events:none}
.one-depth-v33 img{position:absolute;width:clamp(90px,11vw,190px);aspect-ratio:4/5;object-fit:cover;left:calc(6% + var(--d)*17%);top:2%;opacity:var(--depth-o,.42);transform:translate3d(var(--one-x,0),var(--one-y,0),calc((var(--d) - 2)*-70px)) rotate(calc((var(--d) - 2)*4deg));filter:saturate(.75) contrast(1.05);box-shadow:0 20px 50px rgba(0,0,0,.35)}
/* Safari does not support mod() everywhere; explicit positions keep the composition deterministic. */
.one-depth-v33 img:nth-child(1){left:0;top:3%;transform:translate3d(var(--one-x,0),var(--one-y,0),-190px) rotate(-8deg)}
.one-depth-v33 img:nth-child(2){left:21%;top:69%;transform:translate3d(var(--one-x,0),var(--one-y,0),-120px) rotate(5deg)}
.one-depth-v33 img:nth-child(3){left:48%;top:-2%;transform:translate3d(var(--one-x,0),var(--one-y,0),-80px) rotate(-4deg)}
.one-depth-v33 img:nth-child(4){right:2%;left:auto;top:66%;transform:translate3d(var(--one-x,0),var(--one-y,0),-145px) rotate(7deg)}
.one-depth-v33 img:nth-child(5){right:-2%;left:auto;top:4%;transform:translate3d(var(--one-x,0),var(--one-y,0),-210px) rotate(-6deg)}
.one-type-v33{position:absolute;z-index:6;left:3%;bottom:2%;font-size:clamp(42px,6vw,112px);line-height:.75;letter-spacing:-.075em;font-weight:620;mix-blend-mode:difference;color:#fff;white-space:nowrap}

.work-runway-v33__hint{position:absolute;z-index:40;right:2vw;top:50%;transform:translateY(-50%);width:2px;height:24vh;background:var(--world-line,rgba(255,255,255,.15));pointer-events:none}.work-runway-v33__hint i{display:block;width:100%;height:var(--progress-h,0%);background:currentColor;transition:height .08s linear}.work-runway-v33__hint span{position:absolute;left:-5px;bottom:-30px;writing-mode:vertical-rl;font:600 8px/1 ui-monospace,monospace;letter-spacing:.15em;color:var(--world-muted,rgba(255,255,255,.5))}

.work-outro-v33{min-height:calc(var(--work-vh)*1.05);display:grid;grid-template-columns:1fr .62fr;gap:7vw;align-items:center;padding:14vh var(--pad);background:#f0ede7;color:#0b0b0b;position:relative;overflow:hidden}
.work-outro-v33::before{content:"04";position:absolute;right:-3vw;bottom:-10vh;font-size:38vw;line-height:.7;letter-spacing:-.1em;font-weight:650;opacity:.035;pointer-events:none}
.work-outro-v33__copy .work-label{color:rgba(11,11,11,.45)}
.work-outro-v33__copy h2{margin:3vh 0 2vh;font-size:clamp(82px,11vw,200px);line-height:.69;letter-spacing:-.09em;font-weight:620}
.work-outro-v33__copy p{margin:0;font-size:clamp(28px,3vw,54px);letter-spacing:-.055em;color:rgba(11,11,11,.55)}
.work-outro-v33__actions{display:grid;align-content:center;gap:0;position:relative;z-index:3}.work-outro-v33__actions a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;border-bottom:1px solid rgba(11,11,11,.2);font-size:clamp(22px,2vw,34px);letter-spacing:-.04em}.work-outro-v33__actions a:first-child{border-top:1px solid rgba(11,11,11,.2)}.work-outro-v33__actions span{font-size:.8em;transition:transform .35s cubic-bezier(.16,1,.3,1)}.work-outro-v33__actions a:hover span{transform:translate(6px,-6px)}
.projects-footer-v33{background:#f0ede7;color:#080808;border-top:0!important}

@media(max-width:1100px){
  .work-hero-v33{grid-template-columns:.78fr 1.22fr}.work-hero-v33__copy h1{font-size:15vw}.work-world-v33{grid-template-columns:.74fr 1.26fr;gap:3vw}.work-world-v33__copy h2{font-size:10vw}.work-world-v33__media{height:58vh}.work-world-v33__facts span{padding:6px 8px}
}
@media(max-width:820px){
  .projects-page-v33{--work-vh:100dvh}
  .work-hero-v33{min-height:calc(var(--work-vh)*1.2);grid-template-columns:1fr;align-content:center;padding-inline:18px;padding-top:calc(var(--header-h) + 5vh);padding-bottom:9vh}
  .work-hero-v33__copy{align-self:end;padding-top:8vh}.work-hero-v33__copy h1{font-size:28vw;margin:2.5vh 0}.work-hero-v33__copy p{font-size:18px;max-width:90%}
  .work-hero-v33__stack{height:44vh;width:112%;margin-left:-6%;align-self:start}.hero-plate{inset:10% 7%;transform:translate3d(calc((var(--plate) - 1.5)*5.4vw + var(--stack-x,0px)),calc((var(--plate) - 1.5)*1.5vh + var(--stack-y,0px)),calc((3 - var(--plate))*-44px)) rotateZ(calc((var(--plate) - 1.5)*-2deg))}.work-hero-v33__foot{left:18px;right:18px;font-size:7px}.work-hero-v33__foot span:first-child{display:none}
  .work-runway-v33{height:calc(var(--work-vh)*5.25)}.work-runway-v33__hud{left:18px;right:18px;top:70px}.work-runway-v33__hint{right:10px;height:18vh}
  .work-world-v33{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:2vh;padding:14vh 18px 8vh}.work-world-v33__copy{align-self:start;z-index:8}.work-world-v33__copy .work-label{margin-bottom:1.6vh}.work-world-v33__copy h2{font-size:16.5vw;max-width:none;line-height:.72}.work-world-v33__copy p{font-size:15px;line-height:1.12;margin:2vh 0;max-width:94%}.work-world-v33__facts{display:none}.work-enter-v33{font-size:10px;padding-bottom:5px}.work-world-v33__media{height:auto;min-height:41vh;align-self:end}.work-shot-v33{inset:6% 0 5% 4%}.work-world-v33__ghost{font-size:43vw;bottom:-.08em}
  .ayamen-lang{padding:8px 9px}.ayamen-lang span{font-size:11px}.ayamen-lang--ar span{font-size:13px}.ayamen-orbit-v33{width:56px}
  .td-container-v33{width:46%;left:47%;top:10%}.td-coordinate-v33{font-size:7px}
  .refcon-reticle-v33{width:90px}.refcon-readout-v33{font-size:7px}
  .one-depth-v33 img{width:80px}.one-type-v33{font-size:12vw}
  .work-outro-v33{grid-template-columns:1fr;padding:12vh 18px;gap:7vh}.work-outro-v33__copy h2{font-size:21vw}.work-outro-v33__copy p{font-size:27px}
}
@media(max-width:520px){
  .work-world-v33{padding-top:15vh}.work-world-v33__copy h2{font-size:18vw}.work-world-v33__copy p{font-size:14px}.work-world-v33__media{min-height:37vh}.work-runway-v33__hud span:last-child{display:none}.work-runway-v33__hint{display:none}.one-depth-v33 img{width:64px}
}
@media(prefers-reduced-motion:reduce){
  .work-world-v33,.hero-plate,.work-world-v33__media,.td-container-v33,.td-cable-v33,.one-depth-v33 img{transition:none!important}
}

.case-summary__links{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:24px}
.case-summary__links .page-link{margin-top:0}