/* ===================================================================
   KvN Arc — shared design system
   Dark "design-canvas" aesthetic · Figma-multiplayer chrome
   =================================================================== */
/* page transitions handled by the .pagetx figma-box overlay (see below) */

:root{
  --canvas:#100E0B; --canvas-2:#181510; --paper:#F4EEE3;
  --text:#ECE6D9; --muted:#9A9080; --faint:#6f685b;
  --accent:#E11D2E; --accent-2:#7C74FF;
  --line:rgba(236,230,217,.10); --line-2:rgba(236,230,217,.20);
  --font-display:'Anton',sans-serif; --font-sans:'Archivo',sans-serif; --font-mono:'Space Mono',monospace;
  --maxw:1280px; --pad:clamp(20px,5vw,76px); --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--text);font-family:var(--font-sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
@media(hover:none){body{cursor:auto}}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#160d08}

/* ===== canvas backdrop ===== */
.canvas-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:68px 68px;opacity:.55}
.canvas-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,.5) 100%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.055;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== figma cursor + collaboration ===== */
.fcur{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;will-change:transform}
.fcur svg{display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.fcur__tag{position:absolute;top:16px;left:12px;font-family:var(--font-mono);font-size:11px;font-weight:700;line-height:1;
  color:#fff;padding:3px 7px 4px;border-radius:1px 8px 8px 8px;white-space:nowrap;letter-spacing:.02em;background:#2b4cff;transition:background .2s var(--ease)}
.fcur.is-hover .fcur__tag{background:var(--accent)}
@media(hover:none){.fcur{display:none}}

.collab{position:absolute;z-index:6;pointer-events:none;top:0;left:0;will-change:transform}
.collab svg{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.collab__tag{position:absolute;top:16px;left:12px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:#fff;
  padding:3px 7px 4px;border-radius:1px 8px 8px 8px;white-space:nowrap;letter-spacing:.02em}
.collab__toast{position:absolute;top:42px;left:12px;font-family:var(--font-mono);font-size:10.5px;background:var(--canvas-2);color:var(--text);
  padding:5px 9px;border-radius:8px;display:flex;gap:7px;align-items:center;box-shadow:0 8px 26px rgba(0,0,0,.4);white-space:nowrap;border:1px solid var(--line-2)}
.collab__toast .arr{color:var(--faint)}.collab__toast .val{color:var(--accent);font-weight:700}
/* (old aimless drifting K/N collab cursors removed — replaced by the autonomous .ghostfix cursor) */

/* selection frames */
.figlayer{position:relative;width:fit-content;max-width:100%}
.figframe{position:absolute;inset:-9px -13px;border:1.5px solid var(--accent);opacity:0;transition:opacity .35s var(--ease);pointer-events:none;z-index:5}
/* wordmark frame: match the title's font-size so em-insets scale, then contain the glyphs with breathing */
.hero__titlewrap .figframe{font-size:clamp(76px,20vw,300px);inset:-.05em -.055em}
.figlayer:hover .figframe,.figframe.on{opacity:1}
.figframe.violet{border-color:var(--accent-2)}
.figframe i{position:absolute;width:8px;height:8px;background:var(--canvas);border:1.5px solid var(--accent);border-radius:1px}
.figframe.violet i{border-color:var(--accent-2)}
.figframe .tl{top:-4.5px;left:-4.5px}.figframe .tr{top:-4.5px;right:-4.5px}
.figframe .bl{bottom:-4.5px;left:-4.5px}.figframe .br{bottom:-4.5px;right:-4.5px}
.figframe .lbl{position:absolute;top:-23px;left:-1.5px;background:var(--accent);color:#160d08;font-family:var(--font-mono);
  font-size:10px;font-weight:700;padding:2px 7px 3px;border-radius:4px 4px 4px 0;white-space:nowrap;letter-spacing:.02em}
.figframe.violet .lbl{background:var(--accent-2);color:#fff}
@media(hover:none){.figframe .lbl,.figframe i{display:none}.figframe{inset:-6px}}

/* draggable text layers + dx/dy measurement */
[data-drag]{cursor:grab}
[data-drag].dragging{cursor:grabbing}
.figlayer.drag-active .figframe{opacity:1}
.redline{position:fixed;inset:0;width:100vw;height:100vh;z-index:9997;pointer-events:none;opacity:0;transition:opacity .12s;overflow:visible}
.redline.show{opacity:1}
.redline line{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4}
.redline circle{fill:var(--accent)}
.redpill{position:fixed;z-index:9998;transform:translate(-50%,-50%);pointer-events:none;font-family:var(--font-mono);
  font-size:10px;font-weight:700;background:var(--canvas-2);color:var(--accent);border:1px solid var(--accent);
  padding:3px 8px;border-radius:5px;white-space:nowrap;opacity:0;transition:opacity .12s;letter-spacing:.04em}
.redpill.show{opacity:1}

/* ===== helpers ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);position:relative}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:700}
.reveal{opacity:0}
.reveal.in{animation:revealIn .9s var(--ease) forwards}
@keyframes revealIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.reveal.in[data-delay="1"]{animation-delay:.09s}
.reveal.in[data-delay="2"]{animation-delay:.18s}
.reveal.in[data-delay="3"]{animation-delay:.27s}
.reveal.in[data-delay="4"]{animation-delay:.36s}
.reveal.in[data-delay="5"]{animation-delay:.45s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1}.reveal.in{animation:none}}
.sec-tab{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:9px;margin-bottom:22px}
.sec-tab::before{content:"";width:26px;height:1px;background:var(--accent)}

/* ===== header ===== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);transition:.4s var(--ease);border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(16,14,11,.72);backdrop-filter:blur(12px);border-bottom-color:var(--line);padding-top:13px;padding-bottom:13px}
.hdr__brand{font-family:var(--font-display);font-size:22px;letter-spacing:.02em;line-height:1;display:flex;align-items:center;gap:9px}
.hdr__brand .dotmark{width:11px;height:11px;background:var(--accent);border-radius:50%}
.hdr__brand b{color:var(--accent);font-weight:400}
.hdr__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:14px;align-items:center}
.hdr__meta .live{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(225,29,46,.5)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(225,29,46,0)}}
.hdr__nav{display:flex;gap:26px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.hdr__nav a{position:relative;padding:4px 0;color:var(--muted);transition:color .3s}
.hdr__nav a:hover,.hdr__nav a.active{color:var(--text)}
.hdr__nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--accent);transition:width .3s var(--ease)}
.hdr__nav a:hover::after,.hdr__nav a.active::after{width:100%}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:2px;background:var(--text);transition:.3s var(--ease)}
@media(max-width:900px){.hdr__meta,.hdr__nav{display:none}.burger{display:flex}}
.mobmenu{position:fixed;inset:0;z-index:99;background:var(--canvas-2);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--pad);transform:translateY(-100%);transition:transform .5s var(--ease)}
.mobmenu.open{transform:none}
.mobmenu a{font-family:var(--font-display);font-size:clamp(40px,13vw,80px);line-height:1.02;color:var(--text)}
.mobmenu a span{color:var(--accent)}

/* ===== hero (home) ===== */
.hero{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:150px var(--pad) 70px;overflow:hidden}
.hero .eyebrow{margin-bottom:42px}
.hero__titlewrap{margin:6px 0 4px}
.hero__title{font-family:var(--font-display);line-height:.84;letter-spacing:.01em;font-size:clamp(76px,20vw,300px);
  display:flex;flex-wrap:wrap;gap:0 .16em;cursor:grab;user-select:none;touch-action:none}
.hero__title.dragging{cursor:grabbing}
.hero__title .arc,.hero__title .n{color:var(--accent)}
.hero__echo{position:absolute;left:var(--pad);top:52%;transform:translateY(-50%);font-family:var(--font-display);
  font-size:clamp(120px,30vw,440px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(236,230,217,.05);z-index:-1;pointer-events:none;white-space:nowrap}
.hero__lead{font-family:var(--font-sans);font-weight:700;font-size:clamp(24px,3.4vw,44px);line-height:1.1;letter-spacing:-.01em;max-width:15ch;margin:34px 0 22px}
.hero__lead em{color:var(--accent);font-style:normal}
.hero__sub{max-width:52ch;color:var(--muted);font-size:clamp(15px,1.6vw,18px)}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:clamp(38px,7vw,84px);flex-wrap:wrap}
.hero__status{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.hero__status .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(225,29,46,.18)}
.hero__scroll{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px}
.hero__scroll::after{content:"";width:1px;height:38px;background:var(--line-2);animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== GSAP scroll: hero 3D stage ===== */
.hero{perspective:1500px}
.hero__stage{transform-style:preserve-3d;transform-origin:50% 0%;will-change:transform,opacity}

/* ===== GSAP scroll: capability deck ===== */
.deck{position:relative;z-index:2}
.deck__pin{height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,44px);overflow:hidden;perspective:1600px}
.deck__grid{display:grid;grid-template-columns:minmax(280px,.82fr) 1.18fr;gap:clamp(28px,5vw,84px);align-items:center;width:100%}
.deck__aside{display:flex;flex-direction:column;gap:clamp(18px,3vh,30px)}
.deck__title{font-family:var(--font-display);font-size:clamp(30px,4.4vw,64px);line-height:.94;letter-spacing:.01em}
.deck__title .o{color:var(--accent)}
/* left: live index of the six disciplines */
.deck__index{list-style:none;display:flex;flex-direction:column;border-left:1px solid var(--line-2)}
.di{position:relative;display:flex;align-items:baseline;gap:14px;padding:clamp(9px,1.5vh,15px) 0 clamp(9px,1.5vh,15px) 22px;
  color:var(--faint);transition:color .4s var(--ease)}
.di::before{content:"";position:absolute;left:-1.5px;top:22%;bottom:22%;width:2.5px;background:var(--accent);
  border-radius:2px;transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.di__n{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em}
.di__k{font-family:var(--font-display);font-size:clamp(17px,1.7vw,26px);letter-spacing:.01em}
.di.is-active{color:var(--text)}
.di.is-active::before{transform:scaleY(1)}
.di.is-active .di__n{color:var(--accent)}
/* right: the active discipline card */
.deck__stage{position:relative;height:min(56vh,440px)}
.dcard{position:absolute;inset:0;overflow:hidden;background:linear-gradient(158deg,var(--canvas-2),#120f0a);
  border:1px solid var(--line-2);border-radius:22px;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 50px 90px -24px rgba(0,0,0,.7);opacity:0;transform:translateY(26px) scale(.98);pointer-events:none;z-index:1;
  transition:opacity .26s var(--ease),transform .55s var(--ease);will-change:transform,opacity}
.dcard.is-active{opacity:1;transform:none;pointer-events:auto;z-index:2}
.dcard::before{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:radial-gradient(90% 60% at 88% 0%,rgba(225,29,46,.12),transparent 60%)}
.dcard__wm{position:absolute;right:clamp(8px,2vw,26px);bottom:-.22em;font-family:var(--font-display);
  font-size:clamp(180px,26vw,340px);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--line-2);
  pointer-events:none;user-select:none;z-index:0}
.dcard__top,.dcard__t,.dcard__tags{position:relative;z-index:1}
.dcard__top{display:flex;align-items:baseline;gap:16px;font-family:var(--font-mono);text-transform:uppercase}
.dcard__n{font-size:clamp(28px,4vw,52px);font-family:var(--font-display);color:var(--accent);line-height:.8}
.dcard__k{font-size:12px;letter-spacing:.16em;color:var(--muted)}
.dcard__t{font-family:var(--font-display);font-size:clamp(30px,4.6vw,66px);line-height:.96;letter-spacing:.01em;max-width:16ch}
.dcard__t .o{color:var(--accent)}
.dcard__tags{display:flex;flex-wrap:wrap;gap:8px}
.dcard__tags span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 13px}
.deck__progress{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.deck__count b{color:var(--accent);font-weight:700}
@media(max-width:860px){
  .deck__grid{grid-template-columns:1fr;gap:26px}
  .deck__index{display:none}
  .deck__stage{height:auto}
  .dcard{position:relative;inset:auto;opacity:1;transform:none;margin-bottom:16px}
}
/* no-JS / reduced-motion fallback: show every card in a column */
.no-gsap .deck__pin{height:auto;padding:clamp(66px,10vw,120px) 0}
.no-gsap .deck__stage{height:auto}
.no-gsap .dcard{position:relative;inset:auto;opacity:1;transform:none;margin-bottom:16px}
.no-gsap .deck__progress{display:none}

/* ===== Statement — scroll-scrubbed typewriter inside a Figma frame ===== */
.statement{position:relative;z-index:2}
.statement__pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.statement__num{display:block;text-align:center;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:clamp(28px,5vh,52px)}
.statement__layer{margin:0 auto;text-align:center}
.statement__text{font-family:var(--font-sans);font-weight:600;font-size:clamp(26px,4.6vw,60px);
  line-height:1.18;letter-spacing:-.015em;max-width:20ch;min-height:1.18em}
.statement__text .o{color:var(--accent);font-style:italic}
.statement .caret{display:inline-block;width:.055em;height:.98em;background:var(--accent-2);
  margin-left:.03em;vertical-align:-.14em;border-radius:1px;animation:caretBlink 1.05s steps(1) infinite}
@keyframes caretBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.statement__toast{position:absolute;left:50%;top:auto;bottom:clamp(40px,9vh,96px);transform:translateX(-24px);
  display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;color:var(--text);
  background:var(--canvas-2);border:1px solid var(--line-2);border-radius:8px;padding:6px 10px;
  box-shadow:0 8px 26px rgba(0,0,0,.4);white-space:nowrap;pointer-events:none}
.statement__toast svg{display:block}
.statement__toast .arr{color:var(--faint)}
.statement__toast b{color:var(--accent-2);font-weight:700}
.statement__toast.done b{color:var(--muted)}
@media(max-width:900px){.statement__toast{display:none}
  .statement__pin{min-height:auto;padding:clamp(72px,14vw,120px) 0}}
/* no-JS / reduced-motion: the full statement just shows, no typewriter */
.no-gsap .statement__pin{min-height:auto;padding:clamp(72px,12vw,120px) 0}

/* ===== Ghost "N" fixer cursor — flies in to re-center dragged text + comments ===== */
.ghostfix{position:fixed;top:0;left:0;z-index:60;pointer-events:none;opacity:0;
  transition:opacity .32s var(--ease),transform .5s var(--ease);will-change:transform,opacity}
.ghostfix.show{opacity:1}
.ghostfix svg{display:block;filter:drop-shadow(0 2px 7px rgba(0,0,0,.45))}
.ghostfix__tag{position:absolute;top:17px;left:13px;font-family:var(--font-mono);font-size:11px;
  font-weight:700;color:#fff;background:var(--accent-2);padding:2px 8px;border-radius:5px;line-height:1.35}
.ghostfix__msg{position:absolute;top:44px;left:13px;font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  color:#fff;background:var(--accent-2);padding:7px 12px;border-radius:4px 13px 13px 13px;white-space:nowrap;
  box-shadow:0 12px 34px rgba(0,0,0,.5)}
/* "editing" mode: a dark mono property toast instead of the violet comment bubble */
.ghostfix.editing .ghostfix__msg{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text);
  background:var(--canvas-2);border:1px solid var(--line-2);border-radius:8px;padding:6px 10px}
.ghostfix.editing .ghostfix__msg b{font-weight:700;color:var(--text)}
.ghostfix.editing .ghostfix__msg b.v{color:var(--accent-2)}
/* grab mode (while N drags your text back): message + tag ride ABOVE the cursor; no transform lag */
.ghostfix.grab{transition:opacity .3s var(--ease)}
.ghostfix.grab .ghostfix__tag{top:-56px;bottom:auto}
.ghostfix.grab .ghostfix__msg{top:-32px;bottom:auto}
/* selection box the ghost drags around what it inspects */
.ghostsel{position:fixed;top:0;left:0;z-index:59;pointer-events:none;border:1.5px solid var(--accent-2);opacity:0;
  transition:opacity .3s var(--ease),transform .55s var(--ease),width .55s var(--ease),height .55s var(--ease)}
.ghostsel.show{opacity:1}
.ghostsel i{position:absolute;width:8px;height:8px;background:var(--canvas);border:1.5px solid var(--accent-2);border-radius:1px}
.ghostsel .tl{top:-4.5px;left:-4.5px}.ghostsel .tr{top:-4.5px;right:-4.5px}
.ghostsel .bl{bottom:-4.5px;left:-4.5px}.ghostsel .br{bottom:-4.5px;right:-4.5px}
.ghostsel__lbl{position:absolute;top:-22px;left:-1.5px;background:var(--accent-2);color:#fff;font-family:var(--font-mono);
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:5px 5px 0 0;white-space:nowrap}
.gcaret{display:inline-block;width:.055em;height:.92em;background:var(--accent-2);margin-left:.02em;
  vertical-align:-.12em;border-radius:1px;animation:caretBlink 1.05s steps(1) infinite}
@media(hover:none){.ghostfix,.ghostsel{display:none}}

/* ===== Page transition — figma-box selection that reveals every page on load ===== */
.pagetx{position:fixed;inset:0;z-index:9998;background:var(--canvas);pointer-events:none;
  animation:pagetxReveal 1s var(--ease) both}
.pagetx__frame{position:absolute;inset:clamp(20px,3.4vw,54px);border:1.6px solid var(--accent-2);
  opacity:0;animation:pagetxFrame 1s var(--ease) both}
.pagetx__frame i{position:absolute;width:9px;height:9px;background:var(--canvas);
  border:1.6px solid var(--accent-2);border-radius:1px}
.pagetx__frame .tl{top:-5px;left:-5px}.pagetx__frame .tr{top:-5px;right:-5px}
.pagetx__frame .bl{bottom:-5px;left:-5px}.pagetx__frame .br{bottom:-5px;right:-5px}
.pagetx__label{position:absolute;top:clamp(20px,3.4vw,54px);left:clamp(20px,3.4vw,54px);
  transform:translateY(-100%);background:var(--accent-2);color:#fff;font-family:var(--font-mono);
  font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:6px 6px 0 0;
  white-space:nowrap;opacity:0;animation:pagetxFade 1s var(--ease) both}
@keyframes pagetxReveal{0%{clip-path:inset(0 0 0 0)}52%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes pagetxFrame{0%{opacity:0;transform:scale(1.02)}16%{opacity:1;transform:scale(1)}48%{opacity:1;transform:scale(1)}60%{opacity:0}100%{opacity:0}}
@keyframes pagetxFade{0%{opacity:0}16%{opacity:1}48%{opacity:1}60%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pagetx{display:none}}

/* ===== Lenis smooth scroll ===== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ===== interior page hero ===== */
.phero{position:relative;z-index:2;padding:clamp(150px,20vw,240px) var(--pad) clamp(50px,8vw,90px);overflow:hidden}
.phero .wrap{padding:0}
.phero__idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--faint);margin-bottom:20px}
.phero__title{font-family:var(--font-display);font-size:clamp(58px,13vw,180px);line-height:.86;letter-spacing:.01em}
.phero__title .o{color:var(--accent)}
.phero__lead{max-width:56ch;color:var(--muted);font-size:clamp(17px,2vw,22px);margin-top:26px}

/* ===== section ===== */
.section{position:relative;z-index:2;padding:clamp(66px,10vw,132px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(42px,6vw,72px)}
.sec-title{font-family:var(--font-display);font-size:clamp(40px,7vw,108px);line-height:.9;letter-spacing:.01em;max-width:15ch}
.sec-title .o{color:var(--accent)}
.sec-intro{max-width:40ch;color:var(--muted)}

/* ===== services index ===== */
.svc-list{border-top:1px solid var(--line-2)}
.svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,4vw,48px);align-items:center;
  padding:clamp(20px,3vw,34px) 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden;transition:padding-left .4s var(--ease),color .3s}
.svc-row::before{content:"";position:absolute;inset:0;background:var(--paper);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.svc-row:hover::before{transform:translateY(0)}
.svc-row:hover{padding-left:24px;color:var(--canvas)}
.svc-row:hover .svc-num,.svc-row:hover .svc-tags{color:var(--accent)}
.svc-row:hover .svc-arrow{opacity:1;transform:translateX(0)}
.svc-num{font-family:var(--font-mono);font-size:14px;color:var(--accent);font-weight:700}
.svc-name{font-family:var(--font-display);font-size:clamp(26px,4.4vw,60px);line-height:1;letter-spacing:.01em}
.svc-tags{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--faint);text-align:right;text-transform:uppercase}
.svc-arrow{font-size:26px;color:var(--canvas);opacity:0;transform:translateX(-12px);transition:.4s var(--ease)}
@media(max-width:720px){.svc-row{grid-template-columns:auto 1fr;gap:14px 18px}.svc-tags{grid-column:2;text-align:left}.svc-arrow{display:none}}

/* ===== service detail ===== */
.detail{scroll-margin-top:110px}
.detail + .detail{margin-top:clamp(56px,8vw,104px)}
.detail__head{background:var(--paper);color:var(--canvas);border-radius:20px;padding:clamp(26px,4vw,46px);display:flex;gap:clamp(18px,3vw,40px);align-items:flex-start;margin-bottom:clamp(30px,4vw,48px)}
.detail__num{font-family:var(--font-display);font-size:clamp(46px,8vw,96px);color:var(--accent);line-height:.8;flex-shrink:0}
.detail__htext h3{font-family:var(--font-display);font-size:clamp(30px,5vw,64px);line-height:.94;letter-spacing:.01em;margin-bottom:12px}
.detail__htext p{color:rgba(16,14,11,.66);max-width:60ch;font-size:clamp(14px,1.6vw,17px)}
.detail__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px)}
@media(max-width:900px){.detail__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.detail__grid{grid-template-columns:1fr}}
.item{border-top:1px solid var(--line);padding-top:16px}
.item h4{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--accent);margin-bottom:8px;display:flex;gap:8px;align-items:baseline}
.item h4::before{content:"→"}
.item p{color:var(--muted);font-size:15px;line-height:1.55}

/* ===== bundles ===== */
.bundle{display:block;border:1px solid var(--line-2);border-radius:18px;padding:clamp(22px,3vw,34px);margin-bottom:16px;position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s}
.bundle:hover{transform:translateY(-4px);border-color:var(--text)}
.bundle__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.bundle__name{font-family:var(--font-display);font-size:clamp(26px,3.6vw,44px);line-height:1;letter-spacing:.01em}
.bundle__tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.bundle p{color:var(--muted);max-width:70ch}
.bundle--feat{background:var(--accent);border-color:var(--accent);color:#180c06}
.bundle--feat .bundle__tag{color:rgba(24,12,6,.7)}
.bundle--feat p{color:rgba(24,12,6,.82)}
.bundle--feat:hover{border-color:#180c06}

/* ===== studio ===== */
.studio__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,80px);align-items:start}
@media(max-width:820px){.studio__grid{grid-template-columns:1fr}}
.studio__lead{font-family:var(--font-sans);font-weight:700;font-size:clamp(22px,2.8vw,36px);line-height:1.16;letter-spacing:-.01em;margin-bottom:26px}
.studio__lead .o{color:var(--accent)}
.studio__body p{color:var(--muted);margin-bottom:16px;max-width:56ch}
.studio__stats{border-top:1px solid var(--line-2)}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.stat b{font-family:var(--font-display);font-size:clamp(34px,5vw,66px);line-height:.9;letter-spacing:.01em}
.stat b .o{color:var(--accent)}
.stat span{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:right;max-width:16ch}

/* process steps */
.steps{border-top:1px solid var(--line-2);margin-top:10px}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,44px);padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--line)}
.step__n{font-family:var(--font-mono);font-size:13px;color:var(--accent);font-weight:700}
.step__t{font-family:var(--font-display);font-size:clamp(24px,3.4vw,40px);line-height:1;margin-bottom:10px}
.step__d{color:var(--muted);max-width:60ch}

/* ===== CTA band (reused across pages) ===== */
.ctaband{position:relative;z-index:2;padding:clamp(70px,12vw,150px) 0;border-top:1px solid var(--line);text-align:left}
.ctaband__title{font-family:var(--font-display);font-size:clamp(48px,10vw,150px);line-height:.86;letter-spacing:.01em}
.ctaband__title .o{color:var(--accent)}
.ctaband__sub{max-width:46ch;color:var(--muted);margin:26px 0 40px;font-size:clamp(16px,1.8vw,20px)}
.cta{display:inline-flex;align-items:center;gap:16px;font-family:var(--font-mono);font-size:clamp(16px,2vw,22px);letter-spacing:.02em;
  border:1px solid var(--line-2);border-radius:999px;padding:18px 30px;transition:.35s var(--ease)}
.cta:hover{background:var(--accent);border-color:var(--accent);color:#180c06;transform:translateY(-3px)}
.cta .arr{transition:transform .35s var(--ease)}.cta:hover .arr{transform:translate(4px,-4px)}

/* contact meta */
.contact__meta{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap;margin-top:58px}
.cmeta h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.cmeta a,.cmeta p{color:var(--text);font-size:15px}.cmeta a:hover{color:var(--accent)}

/* ===== footer ===== */
.footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:26px var(--pad);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer a:hover{color:var(--accent)}
.footer .dot{color:var(--accent)}