/* =========================================================================
   FUTURE21 DIGITAL — style.css
   Layout modes:
     html.motion  → JS-driven motion is on (pre-hides intro elements)
     html.stage   → pinned "stage" layouts (≥760px + motion). Without it,
                    every section falls back to a plain flowing layout.
   ========================================================================= */
:root{
  --paper:#ffffff; --paper-2:#f3f2ef; --ink:#0b0b0c; --ink-2:#5c5b58;
  --accent:#2C5BFF; --line:rgba(11,11,12,.16); --line-2:rgba(11,11,12,.09);
  --grot:"Archivo",system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif; --mono:"Space Mono",monospace;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --pad:clamp(1.1rem,3vw,2.4rem);
  --bar-h:3.1rem;
}
*{margin:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:clip;}
body{background:var(--paper); color:var(--ink); font-family:var(--grot); line-height:1.4; -webkit-font-smoothing:antialiased; overflow-x:clip;}
a{color:inherit; text-decoration:none;}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}
img{max-width:100%;}
.i{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0;}
.acc{color:var(--accent);}
.wrap{width:100%; padding:0 var(--pad); margin:0 auto;}
.mono{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
html.has-cursor, html.has-cursor a, html.has-cursor button{cursor:none;}

/* ---------- overlays: curtain, grain, cursor ---------- */
.curtain{display:none; position:fixed; inset:0; background:var(--accent); z-index:90; pointer-events:none; will-change:transform;}
html.motion .curtain{display:block;}
.grain{display:none; position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px; animation:grain 1.4s steps(7) infinite;}
html.motion.stage .grain{display:block;}
@keyframes grain{to{background-position:220px 160px;}}

.cursor{display:none; position:fixed; left:0; top:0; z-index:100; pointer-events:none; transition:opacity .3s;}
html.has-cursor .cursor{display:block;}
.cursor.is-out{opacity:0;}
.cursor:not(.is-live){opacity:0;}
.cur-dot{position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--accent); will-change:transform; transition:background-color .3s, opacity .25s;}
.cur-ringw{position:absolute; left:-22px; top:-22px; width:44px; height:44px; will-change:transform;}
.cur-ring{width:100%; height:100%; border-radius:50%; border:1.5px solid var(--accent); display:grid; place-items:center; transform:scale(1);
  transition:transform .4s var(--ease), background-color .3s, border-color .3s, opacity .3s;}
.cur-lbl{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:0; transform:scale(.6); transition:opacity .25s, transform .35s var(--ease);}
.cursor.is-link .cur-ring{transform:scale(1.45);}
.cursor.is-link .cur-dot{opacity:.7;}
.cursor.is-down .cur-ring{transform:scale(.8);}
.cursor.is-view .cur-ring, .cursor.is-email .cur-ring{transform:scale(2.1); background:var(--accent); border-color:transparent;}
.cursor.is-view .cur-dot, .cursor.is-email .cur-dot{opacity:0;}
.cursor.is-view .cur-lbl, .cursor.is-email .cur-lbl{opacity:1; transform:scale(.48);}
.cursor.on-blue .cur-dot{background:#fff;}
.cursor.on-blue .cur-ring{border-color:#fff;}
.cursor.on-blue.is-view .cur-ring, .cursor.on-blue.is-email .cur-ring{background:#fff;}
.cursor.on-blue .cur-lbl{color:var(--accent);}

/* ---------- fixed bar ---------- */
.bar{position:fixed; left:0; right:0; top:0; z-index:60; height:var(--bar-h); display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0 var(--pad); background:var(--paper); border-bottom:1px solid var(--line-2); color:var(--ink);
  opacity:0; pointer-events:none; transition:opacity .28s, background-color .45s, color .45s, border-color .45s;}
.bar.is-on{opacity:1; pointer-events:auto;}
html.bar-hide .bar{opacity:0; pointer-events:none;}
.bar-mark{font-family:var(--grot); font-weight:900; font-size:1.15rem; line-height:.74; color:var(--accent); white-space:nowrap; display:inline-block; transition:color .45s;}
.bar-mark .l{display:inline-block; margin-right:-.05em;}
.bar-mark .l:last-child{margin-right:0;}
.bar-mark .o{-webkit-text-stroke:.8px var(--accent); color:transparent; transition:-webkit-text-stroke-color .45s;}
.bar-mark .o:first-of-type{padding-left:.02em;}
.bar-nav{display:flex; gap:clamp(.9rem,1.8vw,1.8rem);}
.bar-nav a{font-weight:500; font-size:.86rem; position:relative;}
.bar-nav a::after, .nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1.5px; background:currentColor; transition:right .34s var(--ease);}
.bar-nav a:hover::after, .nav a:hover::after{right:0;}
.bar-mail{font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--accent); display:inline-block; transition:color .45s;}
html.on-blue .bar, html.on-blue2 .bar{background:var(--accent); border-color:rgba(255,255,255,.2); color:#fff;}
html.on-blue .bar-mark, html.on-blue2 .bar-mark, html.on-blue .bar-mail, html.on-blue2 .bar-mail{color:#fff;}
html.on-blue .bar-mark .o, html.on-blue2 .bar-mark .o{-webkit-text-stroke-color:#fff;}

/* ---------- header / wordmark ---------- */
.head{position:relative; padding-top:clamp(.5rem,1.4vw,1.1rem);}
.glow{position:absolute; left:50%; top:-18vw; width:76vw; height:76vw; margin-left:-38vw; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(44,91,255,.13), rgba(44,91,255,0) 62%);}
html.motion .glow{animation:glow 18s ease-in-out infinite alternate;}
@keyframes glow{from{transform:translate(-7%,0) scale(1);} to{transform:translate(9%,7%) scale(1.14);}}
.mark-sticky{position:relative; text-align:center; z-index:5; perspective:1400px; line-height:0;}
html.stage .mark-sticky{position:sticky; top:0;}
.mark-drift{display:inline-block; transform-origin:left top; will-change:transform;}
.mark{display:inline-block; font-family:var(--grot); font-weight:900; color:var(--accent); line-height:.74;
  font-size:clamp(2.6rem,16.8vw,16.5rem); white-space:nowrap; letter-spacing:0; will-change:transform;}
.mark .w{display:inline-block;}
.mark .l{display:inline-block; margin-right:-.05em; transform-origin:center bottom; will-change:transform;}
.mark .w1 .l:last-child{margin-right:-.03em;}
.mark .w2{padding-left:.02em;}
.mark .w2 .l{-webkit-text-stroke:clamp(1px,.32vw,4px) var(--accent); color:transparent; transform-origin:center top;}
.mark .w2 .l:last-child{margin-right:0;}
html.motion .mark .w1{clip-path:inset(-22% -8% 0 -8%);}
html.motion .mark .w2{clip-path:inset(0 -8% -22% -8%);}
html.motion .mark .l{visibility:hidden;}

.subrow{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:baseline; gap:1.4rem; flex-wrap:wrap;
  padding:.7rem 0 1.1rem; border-bottom:1px solid var(--line);}
.subrow .tag{font-weight:500; font-size:clamp(.82rem,1.1vw,.98rem); color:var(--ink);}
.nav{display:flex; gap:clamp(1rem,2vw,2rem); align-items:center;}
.nav a{font-weight:500; font-size:.96rem; position:relative;}
.email{font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--accent);}

/* ---------- hero statement ---------- */
.hero{position:relative; z-index:1; padding:clamp(2.6rem,7vw,6.5rem) 0 clamp(1.4rem,3vw,2.4rem);}
.hero h1{font-weight:600; font-size:clamp(2.1rem,6vw,6rem); line-height:1.02; letter-spacing:-.02em; color:var(--accent); text-align:right; max-width:16ch; margin-left:auto;}
.hero h1 .ln{display:block; overflow:hidden; padding:0 .06em;}
.hero h1 .ln > span{display:inline-block; will-change:transform;}
.hero h1 .i{position:relative; z-index:0; color:#fff; font-weight:400; font-size:1.06em; letter-spacing:-.01em; padding:0 .16em 0 .14em; margin-right:-.14em;}
.hero h1 .i .hl{position:absolute; left:0; right:0; top:.05em; bottom:.02em; background:var(--accent); z-index:-1; transform-origin:left center; display:block;}
html.motion .hero h1 .i{color:var(--accent);}
html.motion .hero h1 .i .hl{transform:scaleX(0);}
.util{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-top:clamp(2.4rem,6vw,5rem);}
.util .blk{display:flex; flex-direction:column; gap:.25rem;}
.util .lbl{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);}
.util .val{font-family:var(--mono); font-size:.92rem; letter-spacing:.04em; color:var(--accent);}
.util .status{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);}
.util .status::before{content:""; width:9px; height:9px; background:var(--accent); border-radius:1px; animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ---------- equation band ---------- */
.eq{position:relative; border-block:1px solid var(--line); padding:clamp(.9rem,1.8vw,1.3rem) 0; overflow:hidden;}
.eq-track{display:flex; width:max-content; white-space:nowrap; will-change:transform;}
.eq-set{display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.4rem); padding-right:clamp(1.1rem,2.4vw,2.4rem);
  font-family:var(--mono); font-size:clamp(.8rem,1.45vw,1.2rem); letter-spacing:.1em; text-transform:uppercase; color:var(--accent);}
.eq .w{display:inline-block; padding:.22em .5em; border-radius:999px; transition:background-color .35s var(--ease), color .35s var(--ease); will-change:transform;}
.eq .w.hot{background:var(--accent); color:#fff;}
.eq .op{display:inline-block; color:var(--ink-2); font-weight:700; will-change:transform;}
html.js:not(.motion) .eq-track{width:100%;}
html.js:not(.motion) .eq-set{width:100%; justify-content:space-between; flex-wrap:wrap; padding:0 var(--pad);}

/* ---------- section base ---------- */
section{padding:clamp(3.4rem,8vw,7.5rem) 0;}
.kick{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:.7rem; margin-bottom:clamp(1.6rem,3vw,2.6rem);}
.kick::before{content:""; width:26px; height:8px; background:var(--accent);}
.pill{display:inline-block; font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:.35rem 1.3rem;}

/* ---------- manifesto ---------- */
.manifesto{position:relative; padding:0; color:#fff;}
.mf-flood{position:absolute; inset:0; background:var(--accent); z-index:0;}
html.stage .mf-flood{will-change:clip-path;}
.mf-stage{position:relative; z-index:1; padding:clamp(3.4rem,8vw,7.5rem) var(--pad);}
.mf-a{font-weight:600; font-size:clamp(2rem,6.2vw,6.4rem); line-height:1.02; letter-spacing:-.025em; max-width:14ch;}
.mf-a .wd{display:inline-block; transform-origin:center bottom; will-change:transform,opacity;}
.mf-b{font-family:var(--serif); font-style:italic; font-weight:400; line-height:.92; letter-spacing:-.01em; margin-top:.6em;
  font-size:clamp(2.4rem,8.5vw,7.5rem); transform-origin:left center; will-change:transform;}
.mf-b .ln{display:block; overflow:hidden; padding:0 .08em 0 .06em; margin-left:-.06em;}
.mf-b .ln > span{display:inline-block; will-change:transform;}
.mf-b .o{-webkit-text-stroke:clamp(1px,.15vw,2.5px) #fff; color:transparent;}
.mf-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-top:clamp(2.4rem,5vw,4rem);}
.mf-foot .note{max-width:44ch; font-size:1.04rem; color:rgba(255,255,255,.84);}
.mf-foot .note b{color:#fff; font-weight:600;}
.mf-foot .mono{color:rgba(255,255,255,.62);}
html.stage .mf-stage{height:100vh; height:100svh; padding:0 var(--pad); display:grid; grid-template-rows:1fr auto; overflow:hidden;}
html.stage .mf-a, html.stage .mf-b{grid-row:1; grid-column:1; align-self:center;}
html.stage .mf-a{max-width:16ch;}
html.stage .mf-b{margin:0; font-size:clamp(2.6rem,min(12.2vw,19vh),15rem);}
html.stage .mf-foot{grid-row:2; padding-bottom:5vh; margin:0;}

/* ---------- selected work ---------- */
.work{padding-bottom:0;}
.work-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; padding:0 var(--pad); margin-bottom:clamp(2rem,4vw,3.4rem);}
.work-head h2{font-weight:800; font-size:clamp(1.7rem,3.4vw,2.8rem); letter-spacing:-.02em; text-transform:uppercase;}
.case{padding:clamp(2.4rem,5vw,4rem) var(--pad); border-top:1px solid var(--line);}
.case-stage{position:relative;}
.case-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1.4rem,3vw,2.2rem);}
.case-title{font-weight:800; font-size:clamp(2.2rem,6vw,5rem); letter-spacing:-.03em; line-height:.94; text-transform:uppercase; color:var(--accent);}
.case-title span{display:block;}
.case-idx{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);}
.case-body{display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center;}
.case-visual{position:relative; transform-style:preserve-3d;}
.case-shadow{position:absolute; left:8%; right:8%; bottom:-9%; height:34%; z-index:-1; pointer-events:none; opacity:.7;
  background:radial-gradient(ellipse at center, rgba(11,11,12,.5), rgba(11,11,12,0) 68%); will-change:transform;}
.case-shot{position:relative; background:var(--tint, var(--ink)); border-radius:14px; overflow:hidden; padding:clamp(.7rem,1.4vw,1.3rem);}
.case-img{position:relative; border-radius:6px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); background:#000;}
.case-img img{width:100%; height:auto; display:block;}
.case-gl{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .25s;}
.case-visual.is-gl .case-gl.is-ready{opacity:1;}
.case-glare{position:absolute; inset:0; border-radius:14px; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .5s; mix-blend-mode:screen;}
.case-glare i{position:absolute; left:-50%; top:-50%; width:200%; height:200%; display:block; will-change:transform;
  background:radial-gradient(circle at center, rgba(255,255,255,.28), rgba(255,255,255,0) 42%);}
.case-visual.is-hover .case-glare{opacity:1;}
.case-info p{color:var(--ink-2); font-size:1.06rem; max-width:40ch; margin-bottom:1.4rem;}
.case-info p .i{color:var(--ink); font-size:1.15em;}
.feat{list-style:none; display:grid; gap:.5rem; margin-bottom:1.7rem;}
.feat li{font-family:var(--mono); font-size:.76rem; letter-spacing:.02em; color:var(--ink); display:flex; gap:.6rem; align-items:baseline;}
.feat li::before{content:"→"; color:var(--accent);}
.case-cta{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.92rem;
  border:1px solid var(--ink); border-radius:999px; padding:.7rem 1.4rem; transition:background-color .25s,color .25s,border-color .25s; will-change:transform;}
.case-cta:hover{background:var(--accent); border-color:var(--accent); color:#fff;}
.case-rev .case-visual{order:2;} .case-rev .case-info{order:1;}
.case-rev .case-body{grid-template-columns:.9fr 1.5fr;}

html.stage .work-head{margin-bottom:clamp(1.4rem,3vw,2.4rem);}
html.stage .case{padding:0; border-top:0;}
html.stage .case-stage{height:100vh; height:100svh; overflow:hidden; perspective:1600px;}
html.stage .case-head{position:absolute; left:var(--pad); right:var(--pad); top:9vh; z-index:4; margin:0; align-items:flex-start; pointer-events:none; flex-wrap:nowrap;}
html.stage .case-title{font-size:clamp(2rem,5vw,5.2rem); transform-origin:left top;}
html.stage .case-idx{padding-top:.4rem;}
html.stage .case-body{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.4rem); padding:7vh var(--pad) 0; align-items:center; pointer-events:none;}
html.stage .case-visual{grid-column:2; grid-row:1; justify-self:end; width:min(100%,46vw); pointer-events:auto; z-index:3; order:0;}
html.stage .case-info{grid-column:1; grid-row:1; max-width:40ch; pointer-events:auto; z-index:2; order:0;}
html.stage .case-rev .case-visual{grid-column:1; justify-self:start;}
html.stage .case-rev .case-info{grid-column:2; justify-self:end;}
html.stage .case-rev .case-body{grid-template-columns:1fr 1fr;}
html.stage .case-rev .case-head{flex-direction:row-reverse;}
html.stage .case-rev .case-title{text-align:right; transform-origin:right top;}

/* ---------- services ---------- */
.svc-row{position:relative; display:grid; grid-template-columns:3.4rem 1fr 1.25fr auto auto; gap:clamp(1rem,2.4vw,2rem); align-items:center;
  padding:clamp(1.5rem,3.2vw,2.5rem) clamp(.6rem,1.6vw,1.4rem); border-top:1px solid var(--line); overflow:hidden; --mx:0;}
.svc-row:last-child{border-bottom:1px solid var(--line);}
.svc-row::before{content:""; position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left center; transition:transform .55s var(--ease); z-index:0;}
.svc-row > *{position:relative; z-index:1;}
.svc-n{font-family:var(--mono); font-size:.8rem; color:var(--accent); align-self:start; padding-top:.5rem; transition:color .4s var(--ease);}
.svc-t{position:relative; font-weight:700; font-size:clamp(1.55rem,3.7vw,2.9rem); text-transform:uppercase; letter-spacing:-.02em; line-height:1.06; overflow:hidden; will-change:transform;}
.svc-t .t{display:block; transition:transform .6s var(--ease);}
.svc-t .t2{position:absolute; left:0; top:0; color:#fff; transform:translateY(105%);}
.svc-d{color:var(--ink-2); font-size:1rem; max-width:40ch; align-self:start; padding-top:.35rem; transition:color .4s var(--ease);}
.svc-d b{color:var(--ink); font-weight:600; transition:color .4s var(--ease);}
.svc-sig{width:2rem; height:2rem; fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .55s var(--ease);}
.svc-sig *{stroke-dasharray:80; stroke-dashoffset:80; transition:stroke-dashoffset .9s var(--ease) .08s;}
.svc-arw{font-weight:700; font-size:clamp(1.4rem,2.6vw,2.1rem); color:var(--accent); opacity:0; transform:translateX(-16px); transition:opacity .45s var(--ease), transform .55s var(--ease), color .4s var(--ease);}
.svc-ghost{position:absolute; right:-.06em; top:50%; z-index:0; pointer-events:none; font-weight:900; font-size:clamp(5rem,15vw,14rem); line-height:1; letter-spacing:-.05em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.38); white-space:nowrap; opacity:0;
  transform:translate(6%,-50%); transition:opacity .5s var(--ease), transform .9s var(--ease);}
@media(hover:hover) and (pointer:fine){
  .svc-row:hover::before{transform:scaleX(1);}
  .svc-row:hover .svc-n{color:rgba(255,255,255,.72);}
  .svc-row:hover .svc-t .t1{transform:translateY(-105%);}
  .svc-row:hover .svc-t .t2{transform:translateY(0);}
  .svc-row:hover .svc-d, .svc-row:hover .svc-d b{color:rgba(255,255,255,.92);}
  .svc-row:hover .svc-sig{opacity:1; transform:translateY(0);}
  .svc-row:hover .svc-sig *{stroke-dashoffset:0;}
  .svc-row:hover .svc-arw{color:#fff; opacity:1; transform:translateX(0);}
  .svc-row:hover .svc-ghost{opacity:1; transform:translate(calc(var(--mx) * -4%), -50%);}
}

/* ---------- process ---------- */
.proc-stage{padding:0 var(--pad);}
.proc-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1.4rem; flex-wrap:wrap; margin-bottom:clamp(1.8rem,3.5vw,2.8rem);}
.proc-lead{font-weight:600; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.1; letter-spacing:-.01em; max-width:22ch;}
.proc-lead .i{color:var(--accent); font-size:1.1em;}
.proc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.4vw,1.1rem);}
.proc-card{background:var(--accent); color:#fff; border-radius:12px; padding:clamp(1.2rem,2.2vw,1.8rem); min-height:clamp(220px,26vw,300px); display:flex; flex-direction:column; will-change:transform;}
.proc-card .top{display:flex; align-items:baseline; gap:.9rem;}
.proc-card .n{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:rgba(255,255,255,.72);}
.proc-card h4{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1;}
.proc-card p{font-size:.98rem; color:rgba(255,255,255,.9); margin-top:auto; max-width:30ch;}
html.stage .proc-stage{height:100vh; height:100svh; display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:clamp(2rem,5vw,4rem); overflow:hidden;}
html.stage .proc-head{flex-direction:column; margin:0; gap:1.6rem;}
html.stage .proc-grid{--ch:clamp(240px,26vw,380px); display:block; position:relative; width:min(100%,640px); height:calc(var(--ch) + 3 * 4.4rem); justify-self:end;}
html.stage .proc-card{position:absolute; left:0; top:0; width:calc(100% - 3 * 1.6rem); height:var(--ch); min-height:0; padding-top:1.3rem; box-shadow:0 34px 60px -28px rgba(11,11,12,.45); transform-origin:center center;}

/* ---------- faq ---------- */
.faq-row{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.4rem,3vw,3rem); padding:clamp(1.3rem,2.8vw,2rem) 0; border-top:1px solid var(--line);}
.faq-row:last-child{border-bottom:1px solid var(--line);}
.faq-q{font-weight:700; font-size:clamp(1.15rem,2.3vw,1.7rem); text-transform:uppercase; letter-spacing:-.01em;}
.faq-a{color:var(--ink-2); font-size:1.02rem; max-width:46ch;}
.faq-a .i{color:var(--ink); font-size:1.1em;}

/* ---------- contact ---------- */
.cta{border-top:1px solid var(--line); padding:0; position:relative;}
.cta-stage{position:relative;}
.cta-layer{padding:clamp(3.4rem,8vw,7.5rem) var(--pad);}
.cta-layer.blue{display:none;}
.cta-kick{margin-bottom:1.4rem;}
.cta .big{font-weight:700; font-size:clamp(2.4rem,9vw,8.5rem); line-height:.92; letter-spacing:-.03em; text-transform:uppercase; color:var(--accent); transform-origin:left bottom; will-change:transform;}
.cta .big .i{color:var(--accent); font-weight:400; text-transform:none; font-size:1.04em; display:inline-block; transform-origin:left center; will-change:transform;}
.cta-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1.4rem; margin-top:clamp(2rem,4vw,3rem);}
.cta-mail{font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,3.6vw,2.8rem); color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:.05rem; display:inline-block; will-change:transform;}
html.stage .cta-stage{height:100vh; height:100svh; overflow:hidden;}
html.stage .cta-layer{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad);}
html.stage .cta-layer.blue{display:flex; background:var(--accent); clip-path:inset(100% 0% 0% 0%); will-change:clip-path; z-index:2; pointer-events:none;}
html.stage .cta-layer.blue .cta-mail{pointer-events:auto;}
.cta-layer.blue .big, .cta-layer.blue .big .i, .cta-layer.blue .mono, .cta-layer.blue .cta-mail{color:#fff;}
.cta-layer.blue .cta-mail{border-color:#fff;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:clamp(2rem,4vw,3rem) 0;}
.foot-row{display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;}
.foot-mark{font-weight:900; font-size:clamp(1rem,1.4vw,1.2rem); color:var(--accent); letter-spacing:-.02em;}
.foot-mark .o{-webkit-text-stroke:1px var(--accent); color:transparent;}

/* ---------- motion pre-hide (JS owns reveals; degrades visible without JS) ---------- */
html.motion .hero h1 .ln > span, html.motion .util > *, html.motion .subrow > *, html.motion .eq-track{opacity:0;}
html.motion.head-in .mark .l{visibility:visible;}
html.motion.head-in .mark .w{clip-path:none;}
html.motion.head-in .hero h1 .ln > span, html.motion.head-in .util > *, html.motion.head-in .subrow > *, html.motion.head-in .eq-track{opacity:1;}
html.motion.head-in .hero h1 .i{color:#fff;}
html.motion.head-in .hero h1 .i .hl{transform:none;}
html.motion.head-in .curtain{display:none;}

@media (prefers-reduced-motion: reduce){
  .util .status::before{animation:none;}
  .glow{animation:none;}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .case-body{grid-template-columns:1fr;}
  .case-rev .case-body{grid-template-columns:1fr;}
  .case-rev .case-visual{order:0;} .case-rev .case-info{order:0;}
  .proc-grid{grid-template-columns:repeat(2,1fr);}
  html.stage .case-body{grid-template-columns:1fr 1fr;}
  html.stage .case-visual{width:min(100%,48vw);}
  html.stage .case-info{max-width:34ch;}
  html.stage .case-info p{font-size:.98rem;}
  html.stage .feat li{font-size:.7rem;}
}
@media(max-width:640px){
  .subrow{gap:.6rem;}
  .nav{gap:1rem; order:3; width:100%;}
  .email{display:none;}
  .bar-nav{display:none;}
  .bar-mail{font-size:.92rem;}
  .hero h1{text-align:left; max-width:100%;}
  .hero h1 .ln{padding:0 .06em 0 0;}
  .faq-row{grid-template-columns:1fr;}
  .svc-row{grid-template-columns:2.4rem 1fr auto; padding-left:.3rem; padding-right:.3rem;}
  .svc-d{grid-column:1 / -1;}
  .svc-arw,.svc-ghost{display:none;}
  .svc-sig{width:1.5rem; height:1.5rem;}
  .proc-grid{grid-template-columns:1fr;}
  .proc-card{min-height:auto;}
  .proc-card p{margin-top:1rem;}
  .util{flex-direction:row;}
  .mf-b{font-size:clamp(2.6rem,12vw,5rem);}
  .work-head{margin-bottom:1.6rem;}
}