:root{
  --ink:#111;--muted:#6b6b6b;--line:#c9c9c9;--paper:#f7f7f5;--accent:#b8ff35;
  --pad:clamp(24px,4.6vw,72px);--max:1440px;
  --gutter:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
  --ease:cubic-bezier(.76,0,.24,1);--out:cubic-bezier(.2,.75,.2,1);--hh:78px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hh);-webkit-text-size-adjust:100%}
html.nav-open{overflow:hidden}
body{margin:0;color:var(--ink);background:#fff;font-family:"Noto Sans JP",sans-serif;font-size:16px;line-height:1.8;letter-spacing:.02em;overflow-x:hidden;-webkit-font-smoothing:antialiased;line-break:strict;word-break:auto-phrase}
::selection{background:var(--accent);color:#111}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{text-wrap:pretty}
h3{text-wrap:balance}
.en{font-family:Jost,sans-serif;letter-spacing:.08em}
:focus-visible{outline:2px solid #111;outline-offset:3px}
.nav :focus-visible,.contact :focus-visible,footer :focus-visible,.statement :focus-visible{outline-color:var(--accent)}
.skip{position:fixed;left:16px;top:-64px;z-index:40;background:#111;color:#fff;padding:10px 18px;font-size:14px;transition:top .2s}
.skip:focus{top:12px}

/* ───────── Header / Nav ───────── */
.header{position:fixed;z-index:20;top:0;left:0;width:100%;height:var(--hh);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);background:rgba(255,255,255,.86);border-bottom:1px solid #aaa;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);transition:background .3s,box-shadow .3s}
.header.scrolled{background:rgba(255,255,255,.96);box-shadow:0 10px 30px -20px rgba(0,0,0,.45)}
.progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:#111;transform:scaleX(0);transform-origin:left;pointer-events:none}
.brand{display:flex;align-items:center;gap:12px;font:700 clamp(17px,2vw,24px)/1 Jost,sans-serif;letter-spacing:.12em}
.mark{
  width:34px;height:34px;flex:none;display:inline-block;
  background:url("../media/logo.png") center/contain no-repeat;
  transition:transform .55s var(--out)
}
@media(hover:hover){.brand:hover .mark{transform:rotate(-7deg) scale(1.07)}}
.menu{width:48px;height:48px;margin-right:-2px;border:0;background:transparent;display:grid;place-content:center;gap:6px;cursor:pointer}
.menu span{display:block;width:24px;height:1px;background:#111;transition:transform .35s var(--out),width .3s}
.menu span:last-child{justify-self:end}
.menu:hover span:last-child{width:15px}
.menu[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu[aria-expanded="true"] span:last-child{width:24px;transform:translateY(-3.5px) rotate(-45deg)}

.nav{position:fixed;z-index:19;inset:var(--hh) 0 auto;height:0;overflow:hidden auto;background:#111;color:#fff;visibility:hidden;transition:height .55s var(--ease),visibility 0s .55s}
.nav.open{height:calc(100vh - var(--hh));height:calc(100dvh - var(--hh));visibility:visible;transition:height .55s var(--ease),visibility 0s}
.nav-inner{padding:clamp(40px,7vw,100px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:var(--max);margin:auto}
.nav a{position:relative;display:block;font:600 clamp(28px,4vw,60px)/1.25 Jost,sans-serif;border-bottom:1px solid #555;padding:18px 0;opacity:0;transform:translateY(26px);transition:opacity .5s,transform .7s var(--out),color .3s}
.nav.open a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * .07s),calc(.18s + var(--i) * .07s),0s}
.nav a:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav small{display:block;font:500 12px/1.5 "Noto Sans JP";color:#aaa;margin-top:8px;transition:color .3s}
@media(hover:hover){.nav a:is(:hover,:focus-visible){color:var(--accent)}.nav a:is(:hover,:focus-visible):after{transform:scaleX(1)}}

/* ───────── Hero ───────── */
.hero{min-height:100vh;min-height:100svh;padding:var(--hh) var(--gutter) 0;position:relative;display:flex;align-items:center;border-bottom:1px solid #999;overflow:hidden}
.hero-copy{position:relative;z-index:3;color:#fff;mix-blend-mode:difference;width:min(900px,75vw);padding-bottom:3vh;will-change:transform,opacity;transform:translate3d(0,calc(var(--sy,0) * .16px),0);opacity:calc(1 - var(--sy,0) / 650)}
.kicker{font:600 13px/1 Jost,sans-serif;letter-spacing:.18em;margin-bottom:40px;transition:opacity .9s .25s,transform .9s var(--out) .25s}
.hero h1{margin:0;font-size:clamp(42px,6.1vw,96px);line-height:1.38;letter-spacing:-.04em;font-weight:700;min-height:2.76em}
.hero-line{display:block;overflow:hidden;padding:.04em 0 .16em;margin:-.04em 0 -.16em}
.hero-line-in{display:block}
.hero-copy.out .hero-line-in{transform:translateY(-112%);transition:transform .5s var(--ease);transition-delay:calc(var(--i) * .08s)}
.hero-copy.in .hero-line-in{animation:lineIn .9s var(--out) both;animation-delay:calc(var(--i) * .09s + var(--intro,0s))}
.hero:not(.ready) .hero-line-in{transform:translateY(112%)}
.hero:not(.ready) .kicker,.hero:not(.ready) .hero-foot{opacity:0;transform:translateY(14px)}
.hero-copy.first{--intro:.35s}
@keyframes lineIn{from{transform:translateY(112%)}to{transform:none}}
.hero-lead{margin:26px 0 0;max-width:30ch;font-size:clamp(15px,1.5vw,20px);line-height:2;letter-spacing:.01em;font-weight:500;transition:opacity .9s .7s,transform .9s var(--out) .7s}
.hero:not(.ready) .hero-lead{opacity:0;transform:translateY(14px)}
.hero-foot{margin-top:34px;display:flex;align-items:center;gap:24px;font:600 13px/1 Jost,sans-serif;letter-spacing:.16em;transition:opacity .9s .9s,transform .9s var(--out) .9s}
.hero-foot i{position:relative;width:64px;height:1px;background:#2f2f2f;overflow:hidden}
.hero-foot i:after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-foot.tick i:after{animation:tick 6s linear forwards}
@keyframes tick{to{transform:scaleX(1)}}
.hero-mode{background:none;border:0;padding:12px 0;margin:-12px 0;font:inherit;letter-spacing:inherit;color:#fff;opacity:.42;cursor:pointer;transition:opacity .3s}
.hero-mode.active,.hero-mode:hover{opacity:1}
.scroll-cue{position:absolute;z-index:3;left:var(--gutter);bottom:0;width:1px;height:72px;background:#d4d4d4;overflow:hidden;opacity:calc(1 - var(--sy,0) / 160)}
.scroll-cue:after{content:"";position:absolute;top:0;left:0;width:1px;height:45%;background:#111;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(230%)}}

.hero-art{position:absolute;z-index:1;inset:var(--hh) 0 0 42%;overflow:hidden;pointer-events:none}
.hero-art-in{position:absolute;inset:0;transform:translate3d(calc(var(--sy,0) * -.06px),0,0);will-change:transform}
.band-main,.band-fragment,.band-tip{position:absolute;background:linear-gradient(116deg,#050505 0%,#444 47%,#050505 100%);will-change:transform,opacity,clip-path}
.band-main{--tl:62%;--tr:91%;--br:40%;--bl:11%;inset:-2% -8% -2% 0;clip-path:polygon(var(--tl) 0,var(--tr) 0,var(--br) 100%,var(--bl) 100%);overflow:hidden}
.band-main:after{content:"";position:absolute;inset:0;background:linear-gradient(116deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);transform:translateX(-130%);animation:sheen 8s var(--ease) infinite 2.6s}
@keyframes sheen{0%,60%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.binary-stream{position:absolute;left:37%;top:43%;width:85%;color:#fff;opacity:0;white-space:nowrap;font:600 12px/1 Jost,sans-serif;letter-spacing:.18em;transform:rotate(-63deg) translateX(15%);transform-origin:center;mix-blend-mode:screen}
.band-fragment{right:-1%;top:17%;width:18%;height:72%;opacity:0;clip-path:polygon(52% 0,100% 34%,100% 100%,0 45%)}
.band-tip{right:23%;top:19%;width:11%;height:20%;opacity:0;clip-path:polygon(100% 0,100% 100%,0 50%)}
.hair{position:absolute;inset:0;transform:scaleY(0);transform-origin:top;--t:55%;--b:4%}
.hair:before{content:"";position:absolute;inset:0;background:#111;clip-path:polygon(var(--t) 0,calc(var(--t) + .22%) 0,calc(var(--b) + .22%) 100%,var(--b) 100%)}
.hair.h1{--t:55%;--b:4%}
.hair.h2{--t:97%;--b:46%}.hair.h2:before{background:#777}
.hair.h3{--t:49%;--b:-2%}.hair.h3:before{background:#bbb}
.hero.ready .hair{transform:none}
.hero:not(.ready) .band-main{opacity:0}

.hero-art.is-intro .band-main{animation:mainIntro 1.7s var(--ease) .1s both}
.hero-art.is-intro .hair{animation:hairIn 1.5s var(--ease) both;animation-delay:calc(.6s + var(--k) * .16s)}
.hero-art.is-shifting .band-main{animation:mainRebuild 1.8s var(--ease)}
.hero-art.is-shifting .band-fragment{animation:fragmentRebuild 1.8s var(--ease)}
.hero-art.is-shifting .band-tip{animation:tipRebuild 1.8s var(--ease)}
.hero-art.is-shifting .binary-stream{animation:binaryFlow 1.8s ease-in-out}
.hero-art.is-shifting .hair{animation:hairShift 1.8s var(--ease)}
@keyframes mainIntro{0%{opacity:0;transform:translateX(18%);clip-path:polygon(var(--tr) 0,var(--tr) 0,var(--br) 100%,var(--br) 100%)}18%{opacity:1}100%{opacity:1;transform:none;clip-path:polygon(var(--tl) 0,var(--tr) 0,var(--br) 100%,var(--bl) 100%)}}
@keyframes hairIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hairShift{0%,100%{transform:none}38%{transform:translateX(7%)}}
@keyframes mainRebuild{
  0%,100%{transform:none;opacity:1;clip-path:polygon(var(--tl) 0,var(--tr) 0,var(--br) 100%,var(--bl) 100%)}
  28%{transform:translateX(7%);opacity:.9;clip-path:polygon(calc(var(--tl) + 14%) 0,var(--tr) 0,var(--br) 100%,calc(var(--bl) + 14%) 100%)}
  48%{transform:translateX(20%);opacity:0;clip-path:polygon(var(--tr) 0,var(--tr) 0,var(--br) 100%,var(--br) 100%)}
  63%{transform:translateX(9%);opacity:.2;clip-path:polygon(calc(var(--tl) + 20%) 0,var(--tr) 0,var(--br) 100%,calc(var(--bl) + 20%) 100%)}
}
@keyframes fragmentRebuild{0%,16%{transform:translateX(26%) scale(.75);opacity:0}31%{transform:translateX(0) scale(1);opacity:1}50%{transform:translateX(-38%) scale(.78);opacity:1}68%,100%{transform:translateX(-62%) scale(.5);opacity:0}}
@keyframes tipRebuild{0%,28%{transform:translateX(80%) scaleX(.3);opacity:0}42%{transform:translateX(0) scaleX(1);opacity:.88}60%{transform:translateX(-95%) scaleX(.55);opacity:.58}78%,100%{transform:translateX(-140%) scaleX(.2);opacity:0}}
@keyframes binaryFlow{0%,18%{opacity:0;transform:rotate(-63deg) translateX(26%)}34%{opacity:.82}62%{opacity:.82}88%,100%{opacity:0;transform:rotate(-63deg) translateX(-28%)}}

/* ───────── Sections ───────── */
.section-label{height:66px;border-bottom:1px solid #999;display:flex;align-items:center;gap:16px;padding:0 var(--gutter);font-weight:500}
.mini-mark{display:inline-block;width:10px;height:25px;background:#111;transform:skew(-26deg)}
.js .mini-mark{transform:skew(-26deg) scaleY(0);transition:transform .8s var(--out)}
.js .section-label.on .mini-mark{transform:skew(-26deg)}
section.block{padding:clamp(100px,12vw,190px) var(--gutter);border-bottom:1px solid #999}
.eyebrow{font:600 13px/1 Jost,sans-serif;letter-spacing:.14em;color:#555;margin:0 0 35px}
.eyebrow:before{content:"";display:inline-block;width:7px;height:14px;margin-right:12px;background:currentColor;transform:skew(-26deg);vertical-align:-2px}
.lead{font-size:clamp(30px,4.2vw,66px);line-height:1.55;letter-spacing:-.035em;font-weight:600;margin:0;max-width:1100px}
.intro-sub{margin:58px 0 0 auto;max-width:590px;font-size:clamp(16px,1.4vw,20px);line-height:2.2}

.ln{display:block;overflow:hidden;padding:.06em 0 .14em;margin:-.06em 0 -.14em}
.js .ln-in{display:block;transform:translateY(112%);transition:transform 1.1s var(--out);transition-delay:calc(var(--i) * .11s)}
.js .on .ln-in,.js .on.ln-in{transform:none}

.statement{background:#111;color:#fff;position:relative;overflow:hidden;border-bottom:1px solid #999}
.statement:before{content:"";position:absolute;inset:-60%;background:repeating-linear-gradient(-63deg,transparent 0 46px,rgba(255,255,255,.05) 46px 47px);animation:drift 30s linear infinite;pointer-events:none}
@keyframes drift{to{transform:translate3d(-41.9px,-21.3px,0)}}
.statement .sl{position:absolute;top:-6%;bottom:-6%;width:3px;background:var(--accent);transform:skewX(-27deg) translateY(-106%);transition:transform 1.5s var(--ease)}
.statement .sl.a{right:27%}
.statement .sl.b{right:22%;width:1px;background:#fff;opacity:.4;transition-delay:.22s}
.statement.on .sl{transform:skewX(-27deg)}
.statement .inner{max-width:var(--max);margin:auto;padding:clamp(120px,14vw,220px) var(--pad);position:relative}
.statement .binary{position:absolute;right:-4%;top:-12%;font:700 clamp(110px,24vw,360px)/1 Jost,sans-serif;color:#1d1d1d;letter-spacing:-.08em;will-change:transform;transform:translate3d(calc((var(--p,.5) - .5) * -140px),calc((var(--p,.5) - .5) * -180px),0)}
.statement h2{position:relative;margin:0;font-size:clamp(40px,7vw,104px);line-height:1.32;letter-spacing:-.05em}
.statement h2 em{font-style:normal;color:var(--accent);background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 94% / 0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.06em;transition:background-size 1.2s var(--ease) 1s}
.statement h2.on em{background-size:100% .06em}

.units-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:80px}
.units-head h2{font-size:clamp(40px,5vw,76px);line-height:1.2;margin:0}
.units-head p{align-self:end;margin:0;max-width:530px}
.unit{position:relative;isolation:isolate;display:grid;grid-template-columns:150px 1fr auto;gap:40px;align-items:center;border-top:1px solid #aaa;padding:44px 0}
.unit:last-child{border-bottom:1px solid #aaa}
.unit:before{content:"";position:absolute;z-index:-1;inset:-1px calc(var(--gutter) * -1);background:var(--paper);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.unit>div{transition:transform .55s var(--out)}
.unit-num{font:600 13px/1 Jost,sans-serif;color:#6b6b6b;transition:transform .55s var(--out)}
.unit h3{font:700 clamp(28px,3.5vw,54px)/1.1 Jost,sans-serif;letter-spacing:.06em;margin:0}
.unit p{margin:12px 0 0;color:#555}
.arrow{width:56px;height:56px;border:1px solid #999;border-radius:50%;display:grid;place-items:center;font-size:24px;transition:background .3s,border-color .3s,color .3s,transform .55s var(--out)}
@media(hover:hover){
  .unit:is(:hover,:focus-visible):before{transform:scaleY(1)}
  .unit:is(:hover,:focus-visible)>div,.unit:is(:hover,:focus-visible) .unit-num{transform:translateX(18px)}
  .unit:is(:hover,:focus-visible) .arrow{background:var(--accent);border-color:var(--accent);color:#111}
  a.unit:is(:hover,:focus-visible) .arrow{transform:translate(4px,-4px)}
  div.unit:hover .arrow{transform:rotate(90deg)}
}

.cycle{background:var(--paper);border-bottom:1px solid #999}
.cycle-inner{max-width:var(--max);margin:auto;padding:clamp(100px,12vw,180px) var(--pad)}
.cycle h2{font-size:clamp(36px,5vw,72px);line-height:1.3;margin:0 0 80px}
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #888;background:#fff}
.flow:before{content:"";position:absolute;z-index:2;left:-1px;right:-1px;top:-1px;height:3px;background:#111;transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.flow.on:before{transform:scaleX(1)}
.flow-step{position:relative;isolation:isolate;overflow:hidden;min-height:240px;padding:28px;border-right:1px solid #888;display:flex;flex-direction:column;justify-content:space-between;transition:color .4s}
.flow-step:last-child{border:0}
.flow-step:before{content:"";position:absolute;z-index:-1;inset:0;background:#111;transform:translateY(101%);transition:transform .55s var(--ease)}
.flow-step:not(:last-child):after{content:"→";position:absolute;top:22px;right:22px;font:500 18px/1 Jost,sans-serif;color:#888;transition:transform .5s var(--out),color .4s}
.flow-step b{font:700 13px/1 Jost,sans-serif}
.flow-step h3{font-size:clamp(20px,2vw,30px);line-height:1.5;margin:0}
.flow-step small{color:#666;transition:color .4s}
.js .flow-step{opacity:0;transform:translateY(28px)}
.js .flow.on .flow-step{opacity:1;transform:none;transition:opacity .9s var(--out) calc(.3s + var(--i) * .16s),transform .9s var(--out) calc(.3s + var(--i) * .16s),color .4s}
.flow-note{display:flex;justify-content:space-between;margin-top:22px;font-size:13px;color:#666}
@media(hover:hover){
  .flow-step:hover{color:#fff}
  .flow-step:hover:before{transform:translateY(0)}
  .flow-step:hover small{color:#bbb}
  .flow-step:hover:after{color:var(--accent);transform:translateX(6px)}
}

.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#999;border:1px solid #999}
.project{background:#fff;padding:clamp(34px,5vw,72px);min-height:400px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.project:after{content:"";position:absolute;width:160px;height:360px;background:#f0f0ed;right:-70px;top:-80px;transform:rotate(28deg);transition:background .4s,transform .8s var(--out)}
.project:before{content:"";position:absolute;right:58px;top:-90px;width:2px;height:440px;background:#111;transform:rotate(28deg) scaleY(0);transform-origin:top;transition:transform .8s var(--ease)}
.project>div{position:relative;z-index:1;transition:transform .6s var(--out)}
.project-tag{font:600 12px/1 Jost,sans-serif;letter-spacing:.14em;position:relative;z-index:1}
.project-tag:before{content:"";display:inline-block;width:6px;height:14px;margin-right:10px;background:#111;transform:skew(-26deg);vertical-align:-2px}
.project h3{font-size:clamp(28px,3.6vw,54px);line-height:1.35;margin:0}
.project p{max-width:410px;margin:20px 0 0;color:#555}
@media(hover:hover){
  .project:hover:after{background:var(--accent);transform:rotate(28deg) translateX(-26px)}
  .project:hover:before{transform:rotate(28deg) scaleY(1)}
  .project:hover>div{transform:translateY(-8px)}
}

.contact{display:grid;grid-template-columns:1fr 1fr;background:#111;color:#fff}
.contact a{position:relative;isolation:isolate;overflow:hidden;padding:clamp(58px,7vw,110px) var(--pad);min-height:330px;border-right:1px solid #555;display:flex;flex-direction:column;justify-content:space-between;transition:color .4s}
.contact a:last-child{border:0}
.contact a:before{content:"";position:absolute;z-index:-1;inset:0 -40%;background:var(--accent);transform:translateX(-110%) skewX(-27deg);transition:transform .7s var(--ease)}
.contact .en{font-size:13px}
.contact h2{font-size:clamp(28px,4vw,58px);line-height:1.3;margin:0;transition:transform .6s var(--out)}
.contact p{margin:0;color:#aaa;transition:color .4s}
@media(hover:hover){
  .contact a:is(:hover,:focus-visible){color:#111}
  .contact a:is(:hover,:focus-visible):before{transform:translateX(0) skewX(-27deg)}
  .contact a:is(:hover,:focus-visible) p{color:#333}
  .contact a:is(:hover,:focus-visible) h2{transform:translateX(10px)}
}

footer{padding:70px var(--gutter) 30px;background:#111;color:#fff;border-top:1px solid #555}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:60px}
.footer-brand{font:700 clamp(25px,3vw,40px)/1 Jost,sans-serif;letter-spacing:.1em}
.footer-links{display:grid;gap:12px;color:#bbb;justify-items:start}
.footer-links a{position:relative;transition:color .3s}
.footer-links a:after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
@media(hover:hover){.footer-links a:is(:hover,:focus-visible){color:#fff}.footer-links a:is(:hover,:focus-visible):after{transform:scaleX(1)}}
.footer-bottom{margin:80px 0 0;padding-top:22px;border-top:1px solid #444;display:flex;justify-content:space-between;color:#8a8a8a;font-size:12px}

.js .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--out) var(--d,0s),transform .9s var(--out) var(--d,0s)}
.js .reveal.on{opacity:1;transform:none}
.js .flow.reveal{opacity:1;transform:none}

/* ───────── Responsive ───────── */
@media(max-width:1024px){.footer-grid{gap:40px}}
@media(max-width:760px){
  :root{--hh:66px}
  .nav-inner{grid-template-columns:1fr}
  .hero{padding-top:var(--hh);min-height:92vh;min-height:92svh;align-items:flex-end}
  .hero-copy{width:100%;padding-bottom:13vh}
  .hero h1{font-size:clamp(32px,8.6vw,55px);line-height:1.48;min-height:2.96em}
      .hero-lead{margin-top:20px;font-size:14.5px;line-height:1.95;max-width:none}
  .hero-art{inset:var(--hh) -18% 0 26%}
  .band-main{--tl:68%;--tr:91%;--br:32%;--bl:9%}
  .band-fragment{right:5%;width:24%}
  .band-tip{right:27%;width:17%}
  .hair.h1{--t:62%;--b:3%}.hair.h2{--t:96%;--b:37%}.hair.h3{--t:56%;--b:-3%}
  .kicker{margin-bottom:26px}
  .scroll-cue{left:auto;right:var(--pad);height:56px}
  .units-head{grid-template-columns:1fr;margin-bottom:50px}
  .unit{grid-template-columns:48px 1fr auto;gap:14px}
  .unit p{font-size:13px}
  .arrow{width:48px;height:48px}
  .flow{grid-template-columns:1fr 1fr}
  .flow-step{min-height:200px}
  .flow-step:nth-child(2){border-right:0}
  .flow-step:nth-child(2):after{display:none}
  .flow-step:nth-child(-n+2){border-bottom:1px solid #888}
  .project-grid,.contact{grid-template-columns:1fr}
  .project{min-height:330px}
  .contact a{min-height:250px;border-right:0;border-bottom:1px solid #555}
  .statement .sl.a{right:14%}.statement .sl.b{right:9%}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{display:block}
  .footer-bottom span{display:block;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .band-fragment,.band-tip{display:none}
}

/* ───────── Added: data / trust components ───────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border:1px solid #888;background:#fff;margin-top:64px}
.stat{position:relative;padding:34px 26px 30px;border-right:1px solid #888;border-bottom:1px solid #888;margin-bottom:-1px;overflow:hidden}
.stat:last-child{border-right:0}
.stat:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:#111;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) calc(.2s + var(--i) * .12s)}
.stats.on .stat:before{transform:scaleX(1)}
.stat b{display:block;font:700 clamp(32px,3.6vw,58px)/1.05 Jost,sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b i{font-style:normal;font-size:.3em;letter-spacing:.06em;margin-left:.22em;color:var(--muted)}
.stat>span{display:block;margin-top:14px;font-size:13px;line-height:1.7;color:#555}
.stat b span{font-size:inherit;display:inline;margin:0;color:inherit;line-height:inherit}
.stat em{display:block;font:600 11px/1 Jost,sans-serif;letter-spacing:.14em;color:#999;font-style:normal;margin-top:6px}

.unit-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.unit-tags span{font:600 11px/1 Jost,sans-serif;letter-spacing:.1em;border:1px solid #bbb;padding:5px 9px;color:#555}
.unit-loc{font:600 12px/1 Jost,sans-serif;letter-spacing:.12em;color:#999;margin-top:10px;display:block}

.loclist{border-top:1px solid #aaa}
.loc-row{position:relative;isolation:isolate;display:grid;grid-template-columns:78px 1fr 1.1fr;gap:28px;align-items:baseline;border-bottom:1px solid #aaa;padding:26px 0}
.loc-row:before{content:"";position:absolute;z-index:-1;inset:-1px calc(var(--gutter) * -1);background:var(--paper);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.loc-id{font:600 13px/1 Jost,sans-serif;letter-spacing:.1em;color:#111}
.loc-row h3{font-size:clamp(17px,1.8vw,22px);line-height:1.5;margin:0;font-weight:600}
.loc-row h3 small{display:block;font:600 11px/1 Jost,sans-serif;letter-spacing:.12em;color:#999;margin-top:7px}
.loc-row p{margin:0;color:#555;font-size:14px;line-height:1.9}
@media(hover:hover){.loc-row:hover:before{transform:scaleY(1)}}

.reg{border-top:1px solid #aaa;margin-top:8px}
.reg div{display:grid;grid-template-columns:190px 1fr;gap:6px 32px;padding:17px 0;border-bottom:1px solid #d5d5d5}
.reg dt{margin:0;font:600 12px/1.6 Jost,sans-serif;letter-spacing:.12em;color:#888;padding-top:4px}
.reg dd{margin:0;font-size:15px;line-height:1.9}
.reg dd small{display:block;color:#666;font-size:13px}
.reg a{border-bottom:1px solid #bbb}
.reg a:hover{border-color:#111}

.press{border-top:1px solid #aaa}
.press a{position:relative;isolation:isolate;display:grid;grid-template-columns:110px 1fr 140px;gap:10px 28px;align-items:baseline;padding:22px 0;border-bottom:1px solid #aaa;transition:color .3s}
.press a:before{content:"";position:absolute;z-index:-1;inset:-1px calc(var(--gutter) * -1);background:var(--paper);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.press .pd{font:600 12px/1 Jost,sans-serif;letter-spacing:.1em;color:#888;font-variant-numeric:tabular-nums}
.press .pt{font-size:15px;line-height:1.8}
.press .po{font:600 11px/1 Jost,sans-serif;letter-spacing:.14em;color:#888;text-align:right}
@media(hover:hover){.press a:hover:before{transform:scaleY(1)}.press a:hover .po{color:#111}}

.srcbox{background:var(--paper);border:1px solid #bbb;padding:clamp(26px,3.4vw,44px);margin-top:56px}
.srcbox h3{font:600 12px/1 Jost,sans-serif;letter-spacing:.16em;color:#666;margin:0 0 18px}
.srcbox ol{margin:0;padding-left:1.4em;display:grid;gap:9px}
.srcbox li{font-size:13px;line-height:1.9;color:#555}
.srcbox a{border-bottom:1px solid #bbb}
.srcbox a:hover{border-color:#111}

.badge{display:inline-block;font:600 10px/1 Jost,sans-serif;letter-spacing:.14em;border:1px solid #999;color:#666;padding:4px 8px;margin-left:10px;vertical-align:2px}
.slot{border:1px dashed #b0b0b0;background:var(--paper);min-height:230px;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:30px}
.slot b{font:600 12px/1 Jost,sans-serif;letter-spacing:.16em;color:#999}
.slot p{margin:0;font-size:13px;line-height:1.9;color:#666;max-width:34ch}
.note{margin:34px 0 0;font-size:13px;line-height:1.9;color:#777}
.note a{border-bottom:1px solid #ccc}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,70px);align-items:start}
.sub-h{font-size:clamp(22px,2.6vw,34px);line-height:1.45;margin:0 0 26px;letter-spacing:-.02em}
.kv{font-size:clamp(17px,1.7vw,21px);line-height:2;margin:0 0 20px;font-weight:600;letter-spacing:-.01em}

@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .loc-row{grid-template-columns:62px 1fr;gap:6px 16px}
  .loc-row p{grid-column:2}
  .press a{grid-template-columns:1fr;gap:6px}
  .press .po{text-align:left}
  .reg div{grid-template-columns:1fr;gap:2px}
  .reg dt{padding-top:0}
  .two{grid-template-columns:1fr}
  .stat{padding:26px 20px 24px}
}

/* ───────── Sub-page shell ───────── */
.page-head{padding:clamp(80px,10vw,150px) var(--gutter) clamp(50px,6vw,90px);border-bottom:1px solid #999;position:relative;overflow:hidden}
.page-head .rule{position:absolute;top:-10%;bottom:-10%;width:3px;background:#111;transform:skewX(-27deg) translateY(-110%);transition:transform 1.3s var(--ease) .15s}
.page-head .rule.a{right:16%}
.page-head .rule.b{right:11%;width:1px;background:#bbb;transition-delay:.3s}
.page-head.on .rule{transform:skewX(-27deg)}
.page-head h1{margin:0;font-size:clamp(38px,6vw,86px);line-height:1.28;letter-spacing:-.045em;font-weight:700;position:relative}
.page-head .sub{margin:38px 0 0;max-width:620px;font-size:clamp(15px,1.3vw,18px);line-height:2.1;color:#444;position:relative}
.page-head .meta{margin:34px 0 0;display:flex;flex-wrap:wrap;gap:10px;position:relative}
.page-head .meta span{font:600 11px/1 Jost,sans-serif;letter-spacing:.12em;border:1px solid #999;padding:7px 11px;color:#444}

.crumb{height:66px;border-bottom:1px solid #999;display:flex;align-items:center;gap:14px;padding:0 var(--gutter);font:600 12px/1 Jost,sans-serif;letter-spacing:.12em;color:#888}
.crumb a{color:#888;transition:color .3s}
.crumb a:hover{color:#111}
.crumb b{color:#111;font-weight:600}
.crumb .sep{color:#bbb}

.block-head{margin-bottom:60px}
.block-head h2{font-size:clamp(30px,4vw,58px);line-height:1.28;letter-spacing:-.035em;margin:0}
.block-head p{margin:26px 0 0;max-width:640px;color:#555}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;background:#999;border:1px solid #999}
.card{background:#fff;padding:30px 28px 34px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:color .4s}
.card:before{content:"";position:absolute;inset:0;background:#111;transform:translateY(101%);transition:transform .55s var(--ease);z-index:0}
.card>*{position:relative;z-index:1}
.card b{font:600 12px/1 Jost,sans-serif;letter-spacing:.12em;color:#888;transition:color .4s}
.card h3{font-size:clamp(18px,1.9vw,23px);line-height:1.5;margin:0;font-weight:600}
.card p{margin:0;font-size:14px;line-height:1.95;color:#555;transition:color .4s}
.card .amt{font:700 clamp(26px,3vw,40px)/1 Jost,sans-serif;letter-spacing:-.03em;margin-top:auto;padding-top:14px}
.card .amt em{font-style:normal;font-size:.34em;letter-spacing:.06em;color:#888;margin-left:.3em;transition:color .4s}
@media(hover:hover){.card:hover{color:#fff}.card:hover:before{transform:translateY(0)}.card:hover p,.card:hover b,.card:hover .amt em{color:#bbb}}

.deptnav{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #888;margin-top:46px}
.deptnav a{padding:22px 24px;border-right:1px solid #888;display:grid;gap:7px;position:relative;overflow:hidden;transition:color .4s}
.deptnav a:last-child{border-right:0}
.deptnav a:before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease)}
.deptnav a>*{position:relative}
.deptnav b{font:600 11px/1 Jost,sans-serif;letter-spacing:.14em;color:#888;transition:color .4s}
.deptnav span{font-size:17px;font-weight:600}
@media(hover:hover){.deptnav a:hover:before{transform:translateY(0)}.deptnav a:hover b{color:#333}}

.quote{background:var(--paper);border:1px solid #bbb;padding:clamp(30px,4vw,60px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px)}
.quote blockquote{margin:0;font-size:clamp(21px,2.7vw,36px);line-height:1.7;letter-spacing:-.03em;font-weight:600;text-indent:-.5em}
.quote .who{margin-top:26px;padding-top:18px;border-top:1px solid #bbb;font-size:13px;line-height:1.9;color:#666}
.quote .who b{display:block;color:#111;font-size:15px;margin-bottom:4px}
.quote .body p{margin:0 0 1.1em;color:#555;font-size:14px;line-height:2}
.quote .body p:last-child{margin:0}
.quote .body .src{font-size:12px;color:#888}
.quote .body .src a{border-bottom:1px solid #ccc}
@media(max-width:820px){.quote{grid-template-columns:1fr}}

.pol{max-width:78ch}
.pol section{border-bottom:1px solid #d5d5d5;padding:30px 0}
.pol section:first-child{border-top:1px solid #aaa}
.pol h2{display:flex;gap:16px;align-items:baseline;font-size:clamp(18px,1.9vw,23px);line-height:1.6;margin:0 0 14px;font-weight:600}
.pol h2 i{font-style:normal;font:600 12px/1 Jost,sans-serif;letter-spacing:.12em;color:#999;flex:none}
.pol p{margin:0 0 .9em;color:#555;font-size:14.5px;line-height:2}
.pol p:last-child{margin:0}
.pol ul{margin:0 0 .9em;padding-left:1.3em;color:#555;font-size:14.5px;line-height:2;display:grid;gap:4px}

@media(max-width:760px){
  .deptnav{grid-template-columns:1fr}
  .deptnav a{border-right:0;border-bottom:1px solid #888}
  .deptnav a:last-child{border-bottom:0}
  .page-head .rule.a{right:8%}.page-head .rule.b{right:3%}
}

/* ───────── Timeline / media list / thesis ───────── */
.tl{border-top:1px solid #aaa}
.tl .e{position:relative;isolation:isolate;display:grid;grid-template-columns:130px 1fr;gap:10px 32px;padding:24px 0;border-bottom:1px solid #d5d5d5}
.tl .e:before{content:"";position:absolute;z-index:-1;inset:-1px calc(var(--gutter) * -1);background:var(--paper);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.tl .dt{font:600 13px/1.5 Jost,sans-serif;letter-spacing:.06em;color:#111;font-variant-numeric:tabular-nums}
.tl h3{font-size:clamp(16px,1.7vw,20px);line-height:1.6;margin:0 0 8px;font-weight:600}
.tl p{margin:0;color:#555;font-size:14px;line-height:1.95;max-width:64ch}
.tl a.src{display:inline-block;margin-top:8px;font:600 11px/1 Jost,sans-serif;letter-spacing:.12em;color:#111;border-bottom:1px solid #bbb;padding-bottom:3px}
.tl a.src:hover{border-color:#111}
@media(hover:hover){.tl .e:hover:before{transform:scaleY(1)}}
@media(max-width:700px){.tl .e{grid-template-columns:1fr;gap:4px}}

.medialist{display:flex;flex-wrap:wrap;gap:1px;background:#bbb;border:1px solid #bbb}
.medialist a{background:#fff;padding:14px 18px;font:600 12px/1 Jost,sans-serif;letter-spacing:.06em;flex:1 1 200px;transition:background .3s,color .3s}
@media(hover:hover){.medialist a:hover{background:#111;color:var(--accent)}}

.stance{border:1px solid #111;padding:clamp(26px,3.6vw,46px);display:grid;gap:16px;background:#fff}
.stance h3{font-size:clamp(20px,2.4vw,30px);line-height:1.5;margin:0;letter-spacing:-.02em}
.stance p{margin:0;color:#555;font-size:14.5px;line-height:2.05;max-width:72ch}
.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* ───────── Location photo ───────── */
.loc-photo{margin:26px 0 0;border:1px solid #999;background:#fff;position:relative;overflow:hidden}
.loc-photo img{display:block;width:100%;height:auto;max-width:100%}
.loc-photo figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:13px 18px;border-top:1px solid #ccc;font-size:13px;color:#555;
}
.loc-photo figcaption b{font:600 11px/1 Jost,sans-serif;letter-spacing:.14em;color:#111;flex:none}
.loc-photo figcaption span{font:600 11px/1 Jost,sans-serif;letter-spacing:.14em;color:#999}

/* ───────── Brand mark in footer ───────── */
.footer-mark{
  display:block;width:52px;height:52px;margin-bottom:20px;
  background:url("../media/logo.png") center/contain no-repeat;
  filter:invert(1)
}