/* Synthera Studio, Santal edition pass 2. Tokens and type scale measured from santalarch.com; Geist is the owner's font pin. */
@font-face{font-family:Geist;src:url(assets/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}

@property --light{syntax:"<color>";inherits:true;initial-value:#f0f0f0}
@property --dark{syntax:"<color>";inherits:true;initial-value:#0f0f0f}
:root{
  --light:#f0f0f0; --dark:#0f0f0f;
  --light-2:rgba(240,240,240,.4); --dark-2:rgba(15,15,15,.4);
  --line-on-light:rgba(15,15,15,.08); --line-on-dark:rgba(242,240,240,.08);
  --ink:#0f0f0f; --paper:#f0f0f0; --paper-2:rgba(240,240,240,.42);
  --ease:cubic-bezier(.25,1,.5,1);
  --col:calc(100vw / 8);
  --pad:.5rem;
  --hdr:2.4rem;
  color-scheme:light;
}
:root[data-theme=dark]{--light:#0f0f0f;--dark:#f0f0f0;--light-2:rgba(15,15,15,.4);--dark-2:rgba(240,240,240,.4);--line-on-light:rgba(240,240,240,.08);--line-on-dark:rgba(15,15,15,.08);color-scheme:dark}
html{transition:--light .6s var(--ease),--dark .6s var(--ease)}
@media (max-width:1023px){:root{--col:calc(100vw / 4)}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:rgba(127,127,127,.5) transparent}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--light);color:var(--dark);font-family:Geist,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-feature-settings:"ss01","tnum"}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:#0870ff;color:#fff}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.skip{position:fixed;left:.5rem;top:-3rem;z-index:100;background:var(--dark);color:var(--light);padding:.5rem .75rem;font-size:.75rem}
.skip:focus{top:.5rem}

/* Type scale (santalarch.com entry.css) */
.h1{font-size:14.625rem;font-weight:400;letter-spacing:-.09em;line-height:.87;text-transform:uppercase}
.h2{font-size:6.125rem;font-weight:400;letter-spacing:-.05em;line-height:.88}
.h3{font-size:3.125rem;font-weight:400;letter-spacing:-.03em;line-height:1}
.h4{font-size:2.0625rem;font-weight:400;letter-spacing:-.03em;line-height:1.08}
.p1{font-size:1rem;font-weight:400;letter-spacing:-.02em;line-height:1.28}
.c1{font-size:.75rem;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.c2{font-size:.625rem;font-weight:500;letter-spacing:-.01em;line-height:1.16}
.c3{font-size:.5rem;font-weight:500;line-height:1.19;letter-spacing:.02em}
@media (max-width:1023px){
  .h1{font-size:7.875rem}.h2{font-size:4rem}.h3{font-size:1.75rem}.h4{font-size:1.75rem}
  .p1{font-size:1.0625rem}.c1{font-size:.875rem;line-height:1.15}.c2{font-size:.75rem}.c3{font-size:.625rem}
}
@media (max-width:420px){.h1{font-size:6.2rem}.h2{font-size:3.4rem}}
.word{display:inline-block;will-change:transform,opacity;transform-origin:0 100%}

/* Page-wide column hairlines */
.lines{position:fixed;inset:0;z-index:40;pointer-events:none;mix-blend-mode:difference}
.lines i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.07)}
.lines i:nth-child(1){left:calc(var(--col)*1)}.lines i:nth-child(2){left:calc(var(--col)*2)}.lines i:nth-child(3){left:calc(var(--col)*3)}.lines i:nth-child(4){left:calc(var(--col)*4)}
.lines i:nth-child(5){left:calc(var(--col)*5)}.lines i:nth-child(6){left:calc(var(--col)*6)}.lines i:nth-child(7){left:calc(var(--col)*7)}
@media (max-width:1023px){.lines i:nth-child(n+4){display:none}}

/* Header, difference-blended so it reads on paper, black and photographs */
.header{position:fixed;left:0;right:0;top:0;z-index:60;color:#f0f0f0;mix-blend-mode:difference;transform:translate3d(0,var(--hdr-y,0px),0);will-change:transform}
.header-grid{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));height:var(--hdr);align-items:end}
.header-grid::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(240,240,240,.14)}
.logo{grid-column:1;align-self:center;padding:.6rem .5rem .3rem;width:max-content}
.logo img{width:1.05rem;height:1.05rem;filter:invert(1)}
.link{grid-column:var(--c);grid-row:1;font-size:.625rem;font-weight:500;letter-spacing:-.01em;padding:0 .5rem .55rem;position:relative;width:max-content;transition:opacity .3s var(--ease)}
.link::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:.3rem;background:currentColor;opacity:.6}
.header-grid:hover .link{opacity:.5}.header-grid .link:hover,.link.is-active{opacity:1}
.progress{position:absolute;left:0;bottom:0;height:1px;width:100%;background:#f0f0f0;transform-origin:0 50%;transform:scaleX(var(--s,0));transition:transform .15s linear}
.burger{display:none}
.menu{position:fixed;inset:0;z-index:58;background:#0f0f0f;color:#f0f0f0;display:flex;flex-direction:column;justify-content:flex-end;padding:1rem .75rem 5rem;gap:.2rem}
.menu[hidden]{display:none}
.menu a{font-size:3.4rem;letter-spacing:-.05em;line-height:.95}
@media (max-width:1023px){
  .header-grid{grid-template-columns:auto 1fr}
  .link,.progress{display:none}
  .burger{display:block;position:absolute;right:.75rem;top:.55rem;font-size:.75rem;font-weight:500}
  .burger span{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:1px}
}
.invert{position:fixed;left:.5rem;bottom:.6rem;z-index:61;color:#f0f0f0;mix-blend-mode:difference;font-size:.625rem;font-weight:500;display:flex;align-items:center;gap:.35rem;padding:.25rem 0}
.invert-dot{width:.55rem;height:.55rem;border-radius:50%;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.vnav{position:fixed;right:.6rem;bottom:.6rem;z-index:61;color:#f0f0f0;mix-blend-mode:difference;display:flex;align-items:center;gap:.55rem;font-size:.625rem;font-weight:500;opacity:0;transition:opacity .4s var(--ease);font-variant-numeric:tabular-nums}
.vnav.is-on{opacity:1}
.vnav.at-col{right:auto;left:calc(var(--col)*4)}
.vnav-cap{margin-right:.6rem;display:inline-block}
.idx{display:inline-block;height:1.16em;overflow:hidden;line-height:1.16}
.idx-track{display:flex;flex-direction:column;transition:transform .6s var(--ease)}
.idx-track b{font-weight:500}
.sep{width:1px;height:.65rem;background:currentColor;opacity:.5}
@media (max-width:1023px){.vnav.at-col{left:auto;right:.75rem}}

/* HERO */
.hero{position:relative;background:var(--light);z-index:1}
.wordmark{display:block;font-weight:500;line-height:.8;letter-spacing:-.045em;white-space:nowrap;overflow:hidden;padding-top:.05em}
.wm-row{display:block;font-size:calc(100vw / 5.05);text-align:center}
.hero-stage{position:relative;height:200vh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--light)}
.hero-grid{position:absolute;inset:0;pointer-events:none}
.hero-grid i{position:absolute;top:0;bottom:0;width:1px;background:var(--line-on-light);transform-origin:50% 0}
.hero-grid i:nth-child(1){left:calc(var(--col)*1)}.hero-grid i:nth-child(2){left:calc(var(--col)*3)}.hero-grid i:nth-child(3){left:calc(var(--col)*5)}
.hero-diag{position:absolute;left:0;top:0;width:calc(var(--col)*5);height:100%;overflow:visible;pointer-events:none}
.hero-diag line{stroke:var(--dark);stroke-opacity:.2;stroke-width:1;vector-effect:non-scaling-stroke}
.hero-caption{position:absolute;left:calc(var(--col)*1 + var(--pad));top:calc(var(--hdr) + 1.4rem);color:var(--dark-2)}
.hero-desc{position:absolute;left:calc(var(--col)*5 + var(--pad));top:34%}
.curtain{position:absolute;inset:0;z-index:2;pointer-events:none}
.curtain i{position:absolute;top:0;bottom:0;width:50.2%;background:#0f0f0f;transform:scaleY(0);transform-origin:50% 100%}
.curtain i:nth-child(1){left:0}.curtain i:nth-child(2){right:0}
.hero-tag{position:absolute;z-index:3;right:calc(var(--col)*3 + var(--pad));bottom:1.6rem;text-align:right;display:flex;flex-direction:column;color:#f0f0f0;mix-blend-mode:difference}
.tl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.tl>span{display:block}
.hero-scroll{position:absolute;left:calc(var(--col)*5 + var(--pad));bottom:1.6rem}
.hero-scroll span{display:inline-block;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(.25rem)}}
@media (max-width:1023px){
  .wm-row{font-size:calc(100vw / 5.1)}
  .hero-stage{height:185vh}
  .hero-caption{left:var(--pad)}
  .hero-desc{left:calc(var(--col)*1 + var(--pad));top:30%;font-size:1.38rem}
  .hero-tag{right:auto;left:var(--pad);text-align:left;bottom:5.2rem}
  .hero-scroll{left:calc(var(--col)*2 + var(--pad));bottom:.8rem}
  .hero-diag{width:100vw}
}

/* PHILOSOPHY */
.philo{position:relative;height:1900vh;background:#0f0f0f;color:#f0f0f0;z-index:2}
.philo-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:paint}
.cubes{position:absolute;inset:0;width:100%;height:100%;display:block}
.plates{position:absolute;inset:0;z-index:2;pointer-events:none}
.plate{position:absolute;inset:0;opacity:0;overflow:hidden;will-change:opacity}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;transform-origin:50% 50%}
.plate-dark{background:#0f0f0f}
.plate-paper{background-color:#f0f0f0;background-image:linear-gradient(rgba(15,15,15,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(15,15,15,.09) 1px,transparent 1px);background-size:1.25rem 1.25rem;background-position:-1px -1px}
.sun{background:linear-gradient(105deg,transparent 30%,rgba(255,244,222,.38) 45%,rgba(255,244,222,.12) 52%,transparent 64%);background-size:260% 100%;background-position:120% 0;mix-blend-mode:soft-light}
.gridfield{position:absolute;inset:0;opacity:0;background:#0f0f0f}
.gridfield svg{width:100%;height:100%;display:block}
.gridfield line{stroke:rgba(240,240,240,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.vig{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,rgba(10,10,10,.66),rgba(10,10,10,.58) 40%,rgba(10,10,10,.54) 64%,rgba(10,10,10,.12) 88%),radial-gradient(120% 90% at 50% 55%,transparent 40%,rgba(0,0,0,.6))}
@media (max-width:1023px){.vig{background:linear-gradient(180deg,rgba(10,10,10,.12),rgba(10,10,10,.6) 38%,rgba(10,10,10,.6) 66%,rgba(10,10,10,.12))}}
.vision{position:absolute;inset:0;z-index:4;pointer-events:none}
.vis{position:absolute;left:0;right:0;top:50%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:start;transform:translateY(-35%);color:#f0f0f0}
.vis-t{grid-column:2/5;padding-left:var(--pad);white-space:nowrap;opacity:0}
.vis-d{grid-column:5/7;padding:.55rem var(--pad) 0;max-width:22rem;text-shadow:0 1px 14px rgba(0,0,0,.35);opacity:0}
.vis-ink{color:#0f0f0f}.vis-ink .vis-d{text-shadow:none}
@media (max-width:1023px){
  .philo{height:1650vh}
  .vis{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.4rem;transform:translateY(-50%)}
  .vis-t{grid-column:1/5}.vis-d{grid-column:2/5}
}

/* APPROACH (flows, words slide in from the right on scrub) */
.approach{position:relative;background:var(--light);z-index:3;overflow-x:clip;padding:22vh 0 30vh;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:start}
.ap-title{grid-column:1/4;display:flex;align-items:center;gap:calc(var(--col)*.5);padding-left:.25rem;position:sticky;top:40vh;margin-top:12vh}
.ap-cap{color:var(--dark-2)}
.ap-wrap{grid-column:4/9}
.ap-words{display:flex;flex-direction:column;align-items:flex-start;line-height:.82}
.ap-words .w{display:block;will-change:transform}
.ap-words .w:nth-child(2){margin-left:calc(var(--col)*.33)}.ap-words .w:nth-child(3){margin-left:calc(var(--col)*.6)}.ap-words .w:nth-child(4){margin-left:calc(var(--col)*.85)}
.ap-desc{margin-top:5rem;width:calc(var(--col)*2);display:grid;gap:1.6rem}
.ap-text{max-width:15rem;color:var(--dark-2)}
@media (max-width:1023px){
  .approach{grid-template-columns:1fr;padding:16vh 0 26vh}
  .ap-title{grid-column:1;position:relative;top:auto;margin:0 0 3rem;flex-direction:column;align-items:flex-start;gap:.4rem}
  .ap-wrap{grid-column:1;padding-left:calc(var(--col)*.2)}
  .ap-words .h1{font-size:5.4rem}
  .ap-desc{width:auto;padding:0 var(--pad) 0 calc(var(--col)*.8);margin-top:3rem}
  .ap-desc .h4{font-size:1.4rem}
}

/* DOOR: overlaps the end of the approach, exactly as the reference does */
.door{position:relative;height:760vh;margin-top:-100vh;z-index:4;pointer-events:none}
.door-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.door-stage > *{pointer-events:none}
.door-hline{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-on-light);transform-origin:0 50%}
.door-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.jali{position:absolute;left:50%;top:50%;width:min(44vw,42rem);aspect-ratio:3/4;transform:translate(-50%,-50%);overflow:hidden;background:var(--light);display:none}
.jali img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;filter:brightness(1.16) contrast(1.12) grayscale(1)}
.lattice,.door-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lattice .guide{stroke:var(--dark);stroke-opacity:.16;fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.lattice .bold{stroke:var(--dark);fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke}
.lattice .fine{stroke:var(--dark);fill:none;stroke-width:.8;stroke-opacity:.85;vector-effect:non-scaling-stroke}
.lattice .dim-t{font:500 10px Geist,Helvetica,sans-serif;fill:var(--dark);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.lattice .dim-cap{fill:var(--dark-2)}
.door-leaders path{stroke:var(--dark);stroke-opacity:.5;fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.door-labels{position:absolute;inset:0}
.door-labels span{position:absolute;left:0;top:0;font-size:.625rem;font-weight:500;white-space:nowrap;opacity:0;will-change:transform}
.door-labels span b{display:block;font-weight:500;color:var(--dark-2);font-size:.5rem;margin-bottom:.15rem;font-variant-numeric:tabular-nums}
.door-line{position:absolute;left:50%;top:7vh;height:86vh;width:var(--lw,24px);margin-left:calc(var(--lw,24px) / -2);background:#0f0f0f;opacity:0}
.door-copy{position:absolute;inset:0}
.dc{position:absolute;inset:0}
.dc-t{position:absolute;top:50%;transform:translateY(-50%);opacity:0}
.dc-d{position:absolute;max-width:16rem;opacity:0}
.dc-proj{position:absolute;left:calc(var(--col)*6 + var(--pad));top:38%;display:grid;gap:.25rem;opacity:0}
.dc-proj .c3{color:var(--dark-2)}
#dc-1 .dc-t{left:var(--pad)} #dc-1 .dc-d{left:calc(var(--col)*2 + var(--pad));bottom:1.4rem}
#dc-2 .dc-t{left:calc(var(--col)*6 + var(--pad))} #dc-2 .dc-d{left:calc(var(--col)*6 + var(--pad));top:calc(50% + 4.6rem)}
#dc-3 .dc-t{left:var(--pad)} #dc-3 .dc-d{left:var(--pad);top:calc(50% + 4.6rem)}
#dc-4 .dc-t{left:calc(var(--col)*6 + var(--pad))} #dc-4 .dc-d{left:calc(var(--col)*6 + var(--pad));top:calc(50% + 4.6rem)}
@media (max-width:1023px){
  .door{height:700vh}
  .dc-t{top:calc(var(--hdr) + 1.6rem);transform:none}
  #dc-1 .dc-t,#dc-2 .dc-t,#dc-3 .dc-t,#dc-4 .dc-t{left:var(--pad)}
  .dc-d{left:var(--pad)!important;right:var(--pad);top:auto!important;bottom:3.2rem!important;max-width:none}
  .dc-proj{left:var(--pad);top:auto;bottom:8.6rem}
  .door-labels span{font-size:.56rem}
}

/* WORKS: dark from here on, opened from the door's line */
.works{position:relative;background:#0f0f0f;color:#f0f0f0;z-index:5;padding:10rem 0 6rem;clip-path:inset(0% 49.2% 0% 49.2%)}
.works-lines i{position:absolute;top:0;bottom:0;width:1px;background:var(--line-on-dark)}
.works-lines i:nth-child(1){left:calc(var(--col)*3)}.works-lines i:nth-child(2){left:calc(var(--col)*5)}
.works-title{text-align:center;margin-bottom:4.4rem;opacity:0}
.wk-wrap{position:relative;overflow:hidden;padding:0 .5rem}
.wk-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 .5rem;align-items:start}
.wk-cols>li{will-change:transform}
.wk-cols ul{display:grid;gap:.5rem}
.wk{position:relative}
.wk-th{overflow:hidden;background:#1a1a1a}
.wk img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s var(--ease);filter:saturate(.82)}
.wk:hover img{transform:scale(1.04);filter:none}
.wk span{display:block;padding:.45rem 0 .3rem;color:rgba(240,240,240,.55)}
.works-btn{display:flex;align-items:center;gap:.6rem;margin:3.2rem auto 0;padding:.6rem 1rem;border:1px solid rgba(240,240,240,.25)}
.works-btn svg{width:.6rem;height:.6rem;stroke:currentColor;fill:none}
.works-btn[hidden]{display:none}
.roll{display:inline-grid;overflow:hidden;line-height:1.2}
.roll>span{grid-area:1/1;transition:transform .5s var(--ease)}
.roll>span+span{transform:translateY(105%)}
a:hover .roll>span:first-child,button:hover .roll>span:first-child,a:focus-visible .roll>span:first-child{transform:translateY(-105%)}
a:hover .roll>span+span,button:hover .roll>span+span,a:focus-visible .roll>span+span{transform:translateY(0)}
@media (max-width:1023px){.works{padding:7rem 0 5rem}.wk-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* SERVICES */
.services{position:relative;background:#0f0f0f;color:#f0f0f0;z-index:5}
.sv-we{display:flex;gap:.18em;padding:30vh 0 18vh .25rem;color:#f0f0f0}
.sv-we span{display:inline-block}
.sv-track{position:relative;height:520vh}
.sv-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sv-titles{position:absolute;left:calc(var(--col)*4);top:41%;display:flex;white-space:nowrap;will-change:transform}
.sv-t{display:block;width:calc(var(--col)*2.4);color:rgba(240,240,240,.22);transition:color .5s var(--ease)}
.sv-t.is-on{color:#f0f0f0}
.sv-window{position:absolute;left:calc(var(--col)*4);top:calc(41% + 3.4rem);width:calc(var(--col)*2);height:min(48vh,calc(var(--col)*2.5));overflow:hidden}
.sv-window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.sv-descs{position:absolute;left:var(--pad);top:calc(41% + 3.6rem);width:calc(var(--col)*2.2)}
.sv-descs p{position:absolute;left:0;top:0;opacity:0;color:rgba(240,240,240,.82)}
.sv-ctrl{position:absolute;right:var(--pad);top:calc(var(--hdr) + 1rem);display:flex;gap:.4rem}
.sv-btn{width:2.4rem;height:2.4rem;border:1px solid rgba(240,240,240,.25);display:grid;place-items:center;color:#f0f0f0;transition:background .3s var(--ease),color .3s var(--ease)}
.sv-btn:hover{background:#f0f0f0;color:#0f0f0f}
.sv-btn svg{width:.9rem;height:.9rem;stroke:currentColor;fill:none;stroke-width:1.2}
@media (max-width:1023px){
  .sv-we{padding:22vh 0 12vh .25rem}
  .sv-track{height:460vh}
  .sv-titles{left:var(--pad);top:calc(var(--hdr) + 5rem)}
  .sv-t{width:72vw}
  .sv-window{left:var(--pad);top:calc(var(--hdr) + 8.4rem);width:62vw;height:min(46vh,78vw)}
  .sv-descs{left:var(--pad);right:var(--pad);top:auto;bottom:4.4rem;width:auto}
  .sv-descs p{top:auto;bottom:0}
}

/* PROCESS */
.process{position:relative;background:#0f0f0f;color:#f0f0f0;z-index:5;height:300vh}
.pr-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.pr-cap{position:absolute;left:var(--pad);top:50%;max-width:calc(var(--col)*1.2);color:rgba(240,240,240,.6)}
.pr-contents{position:absolute;left:calc(var(--col)*4);width:calc(var(--col)*4 - 1rem);top:0;will-change:transform}
.pr-lead{margin-bottom:4rem;max-width:30rem}
.acc{border-top:1px solid rgba(240,240,240,.18)}
.acc-i{border-bottom:1px solid rgba(240,240,240,.18)}
.acc-h{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;text-align:left}
.acc-h svg{width:1rem;height:1rem;stroke:currentColor;fill:none;transition:transform .5s var(--ease)}
.acc-i.is-open .acc-h svg{transform:rotate(45deg)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.acc-i.is-open .acc-b{grid-template-rows:1fr}
.acc-in{overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;gap:2rem}
.acc-in .p1{padding-bottom:2rem;max-width:30rem;color:rgba(240,240,240,.8)}
.scope{padding-bottom:2rem}
.scope .c2{color:rgba(240,240,240,.5);display:block;margin-bottom:.7rem}
.scope li{font-size:.75rem;padding:.32rem 0 .32rem 1rem;position:relative;border-top:1px solid rgba(240,240,240,.12)}
.scope li::before{content:"";position:absolute;left:0;top:.68rem;width:.4rem;height:1px;background:currentColor}
@media (max-width:1023px){
  .process{height:auto}
  .pr-stage{position:relative;height:auto;padding:6rem 0 6rem}
  .pr-cap{position:relative;top:auto;left:auto;max-width:none;padding:0 var(--pad);margin-bottom:2rem}
  .pr-contents{position:relative;left:auto;width:auto;padding:0 var(--pad)}
  .acc-in{grid-template-columns:1fr;gap:0}
}

/* COMPANY */
.company{position:relative;background:#0f0f0f;color:#f0f0f0;z-index:5}
.co-track{position:relative;height:330vh}
.co-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.co-vl{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(240,240,240,.14);opacity:0}
.co-slit{position:absolute;top:0;bottom:0;left:25%;right:25%;clip-path:inset(0% 50% 0% 50%);display:grid;place-items:center}
.globe{width:min(70vh,46vw);aspect-ratio:1;will-change:transform}
.globe svg{width:100%;height:100%;overflow:visible}
.globe .g-out{fill:none;stroke:#f0f0f0;stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}
.globe .g-l{fill:none;stroke:#f0f0f0;stroke-opacity:.12;stroke-width:1;vector-effect:non-scaling-stroke}
.globe .g-land{fill:none;stroke:#f0f0f0;stroke-opacity:.5;stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.globe .g-mv{fill:#0870ff}
.globe .g-ring{fill:none;stroke:#0870ff;stroke-width:1;vector-effect:non-scaling-stroke}
.co-title{position:absolute;left:0;right:0;top:50%;display:flex;justify-content:center;gap:.24em;transform:translateY(-50%);white-space:nowrap}
.ct{display:inline-block;will-change:transform}
.atolls{position:absolute;right:var(--pad);bottom:1.4rem;display:grid;grid-template-columns:repeat(2,auto);column-gap:1.4rem;row-gap:.16rem;text-align:right;font-variant-numeric:tabular-nums;opacity:0}
.atolls li{opacity:.3;transition:opacity .4s var(--ease)}
.atolls li.is-on{opacity:1}
.co-desc{position:absolute;left:var(--pad);bottom:1.4rem;max-width:17rem;color:rgba(240,240,240,.75);opacity:0}
.team{display:grid;justify-items:center;padding:6rem 0 9rem;border-top:1px solid rgba(240,240,240,.1)}
.team-cap{max-width:15rem;text-align:center;color:rgba(240,240,240,.6);margin-bottom:3rem}
.team-list{display:grid;grid-template-columns:repeat(3,minmax(0,9.5rem));gap:2.2rem}
.team-list li{display:grid;gap:.3rem;will-change:transform}
.team-th{aspect-ratio:4/5;background:#f0f0f0;display:grid;place-items:center;overflow:hidden;margin-bottom:.4rem}
.team-th img{width:84%;height:84%;object-fit:contain}
.team-p{color:rgba(240,240,240,.5)}
@media (max-width:1023px){
  .co-track{height:280vh}
  .co-slit{left:4%;right:4%}
  .globe{width:84vw}
  .atolls{left:var(--pad);right:var(--pad);bottom:auto;top:calc(var(--hdr) + 1rem);grid-template-columns:repeat(2,1fr);text-align:left;font-size:.625rem}
  .co-desc{right:var(--pad);max-width:none}
  .team-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;padding:0 .5rem}
}

/* CONTACT */
.contact{position:relative;background:#0f0f0f;color:#f0f0f0;z-index:5}
.ct-track{position:relative;height:230vh}
.ct-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ct-bg i{position:absolute;top:0;bottom:0;width:1px;background:rgba(240,240,240,.18);transform:scaleY(0);transform-origin:50% 0}
.ct-bg i:nth-child(1){left:calc(var(--col)*3)}.ct-bg i:nth-child(2){left:calc(var(--col)*5)}
.ct-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-content:center;row-gap:2.6rem;will-change:transform}
.ct-title{grid-column:1/5;grid-row:1/4;padding:0 var(--pad);align-self:start;font-size:6.125rem;letter-spacing:-.05em;line-height:.9;width:max-content}
.ct-item{grid-column:6/8;padding:0 var(--pad);display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.ct-item h3{color:rgba(240,240,240,.45);margin-bottom:.6rem}
.ct-item .c3{color:rgba(240,240,240,.45);margin-bottom:.8rem}
.ct-link{font-size:.875rem}
.foot{padding:0 .25rem .9rem;overflow:hidden}
.foot-wm{font-weight:500;font-size:calc(100vw / 5.05);letter-spacing:-.04em;line-height:.74;text-align:center;white-space:nowrap;color:#f0f0f0;overflow:hidden;padding-top:.05em}
.foot-wm .ch{display:inline-block}
.foot-bar{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));padding-top:1.1rem;color:rgba(240,240,240,.55)}
.foot-bar span:nth-child(1){grid-column:2/5;padding-left:var(--pad)}.foot-bar span:nth-child(2){grid-column:5/7;padding-left:var(--pad)}.foot-bar a{grid-column:8;padding-left:var(--pad)}
@media (max-width:1023px){
  .ct-track{height:auto}
  .ct-stage{position:relative;height:auto;padding:7rem 0 4rem}
  .ct-bg{display:none}
  .ct-grid{position:relative;inset:auto;grid-template-columns:1fr}
  .ct-title{grid-column:1;grid-row:auto;font-size:3.6rem}
  .ct-item{grid-column:1}
  .foot-bar{grid-template-columns:1fr;gap:.4rem}
  .foot-bar span:nth-child(n),.foot-bar a{grid-column:1;padding-left:var(--pad)}
  .foot{padding-bottom:4rem}
}

/* Still world: reduced motion or a missing engine */
.is-static .hero-stage{height:auto}
.is-static .hero-pin{position:relative;height:auto;padding:2rem 0 3rem}
.is-static .hero-pin > *{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;padding:1rem var(--pad) 0 calc(var(--col)*1 + var(--pad));text-align:left;color:var(--dark);mix-blend-mode:normal}
.is-static .hero-grid,.is-static .hero-diag,.is-static .hero-scroll,.is-static .curtain{display:none}
.is-static .philo{height:auto}
.is-static .philo-stage{position:relative;height:auto;padding:6rem 0}
.is-static .cubes,.is-static .plates{display:none}
.is-static .vision{position:relative;display:grid;gap:5rem}
.is-static .vis,.is-static .vis-ink{position:relative;top:auto;transform:none;color:#f0f0f0}
.is-static .vis *,.is-static .dc *,.is-static .works-title,.is-static .co-desc,.is-static .atolls,.is-static .sv-descs p{opacity:1!important}
.is-static .door{height:auto;margin-top:0;pointer-events:auto}
.is-static .door-stage{position:relative;height:auto;padding:4rem 0}
.is-static .jali{display:block;position:relative;left:auto;top:auto;transform:none;margin:0 auto 3rem}
.is-static .lattice,.is-static .door-hline,.is-static .door-gl,.is-static .door-line,.is-static .door-labels,.is-static .door-leaders{display:none}
.is-static .door-copy,.is-static .dc,.is-static .dc *{position:relative!important;inset:auto!important;transform:none!important;left:auto!important;top:auto!important;bottom:auto!important}
.is-static .dc{padding:0 var(--pad) 3rem;display:grid;gap:1rem}
.is-static .works{clip-path:none}
.is-static .sv-track,.is-static .co-track,.is-static .ct-track,.is-static .process{height:auto}
.is-static .sv-stage,.is-static .co-stage,.is-static .ct-stage,.is-static .pr-stage{position:relative;height:auto;padding:4rem 0}
.is-static .sv-titles,.is-static .sv-window,.is-static .sv-descs,.is-static .co-slit,.is-static .co-title,.is-static .atolls,.is-static .co-desc,.is-static .pr-cap,.is-static .pr-contents,.is-static .ct-grid{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;clip-path:none;margin:0 var(--pad) 2rem}
.is-static .sv-titles{flex-wrap:wrap;gap:1rem}
.is-static .sv-window{height:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;width:auto}
.is-static .sv-window img{position:relative;aspect-ratio:3/4}
.is-static .sv-descs p{position:relative}
.is-static .ct-bg{display:none}
.no-js .vnav{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}