/* ==========================================================================
   Youssef M. — 3D portfolio
   Colours (--bg, --a, --b) are driven per section by script.js
   ========================================================================== */
:root {
  --bg: #06110d;
  --a: #c8ff3d;
  --b: #61c7ff;
  --paper: #eef3ec;
  --muted: #9aa7a0;
  --line: rgba(238, 243, 236, .14);
  --glass: rgba(255, 255, 255, .045);
  --pad: clamp(1.1rem, 4vw, 4.5rem);
  --display: "Syne", "Manrope", sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}
/* Accent colours switch once per section; only elements whose colour actually changes fade
   (cheap) instead of animating inherited variables, which would restyle the whole page each frame. */
:where(body *) { transition: color .7s var(--ease), background-color .7s var(--ease), border-color .7s var(--ease); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
a, button { color: inherit; }
a { text-decoration: none; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--a); color: #050505; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 4px; border-radius: 6px; }

.skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 1000;
  padding: .75rem 1rem; background: var(--a); color: #050505; border-radius: 999px;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- 3D world ---------- */
#world {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
.world-fallback {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none;
  background:
    radial-gradient(40vmax 40vmax at 75% 35%, color-mix(in srgb, var(--a) 35%, transparent), transparent 70%),
    radial-gradient(35vmax 35vmax at 20% 80%, color-mix(in srgb, var(--b) 30%, transparent), transparent 70%),
    var(--bg);
  animation: fallback-drift 14s ease-in-out infinite alternate;
}
.no-gl .world-fallback { display: block; }
.no-gl #world { display: none; }
@keyframes fallback-drift { to { transform: scale(1.15) rotate(6deg); } }

.noise {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05; transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 2; }

/* ---------- Loader (created by JS) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  perspective: 1200px; pointer-events: none;
}
.loader-panel {
  position: absolute; left: 0; right: 0; height: 50.5%; background: #050807;
  transition: transform 1.1s var(--ease), opacity 1.1s var(--ease);
}
.loader-panel--top { top: 0; transform-origin: 50% 0; }
.loader-panel--bottom { bottom: 0; transform-origin: 50% 100%; }
.loader-count {
  position: relative; z-index: 2; font-family: var(--display); font-weight: 800;
  font-size: clamp(4rem, 16vw, 12rem); line-height: 1; letter-spacing: -.05em;
  color: var(--a); transition: transform .9s var(--ease), opacity .6s;
}
.loader-count small { font-size: .25em; color: var(--muted); letter-spacing: 0; vertical-align: top; }
.loader.is-done .loader-panel--top { transform: rotateX(-95deg); opacity: 0; }
.loader.is-done .loader-panel--bottom { transform: rotateX(95deg); opacity: 0; }
.loader.is-done .loader-count { transform: translateZ(500px) scale(1.4); opacity: 0; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 800; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
body.cursor-active .cursor { opacity: 1; }
.cursor--dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--a); }
.cursor--ring {
  width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--a) 70%, transparent);
  display: grid; place-items: center;
}
.cursor--ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  transition: transform .35s var(--ease), background .35s;
}
.cursor-label {
  position: relative; font: 500 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #050505; opacity: 0; transition: opacity .2s;
}
body.cursor-hover .cursor--ring::before { transform: scale(1.5); background: color-mix(in srgb, var(--a) 18%, transparent); }
body.cursor-label-on .cursor--ring::before { transform: scale(2.2); background: var(--a); }
body.cursor-label-on .cursor-label { opacity: 1; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.1rem var(--pad);
  transition: padding .4s var(--ease), background .4s;
}
.site-header.is-scrolled {
  padding-top: .7rem; padding-bottom: .7rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: .8rem; margin-right: auto; }
.brand-cube {
  --s: 22px; position: relative; width: var(--s); height: var(--s);
  transform-style: preserve-3d; animation: cube-spin 9s linear infinite;
}
.brand-cube i {
  position: absolute; inset: 0; border: 1.5px solid var(--a);
  background: color-mix(in srgb, var(--a) 14%, transparent);
}
.brand-cube i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.brand-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.brand-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.brand-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.brand-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); border-color: var(--b); }
.brand-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); border-color: var(--b); }
@keyframes cube-spin { to { transform: rotateX(360deg) rotateY(720deg); } }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--display); font-size: 1.15rem; letter-spacing: -.02em; }
.brand-text small { font: 400 .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.site-nav {
  display: flex; gap: .25rem; padding: .3rem;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(5, 8, 7, .72);
}
.site-nav a {
  padding: .5rem 1rem; border-radius: 999px; font-size: .86rem; font-weight: 500;
  transition: background .3s, color .3s;
}
.site-nav a:hover, .site-nav a.is-current { background: var(--a); color: #050505; }

.header-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  background: var(--paper); color: #050505;
  transition: background .3s;
}
.header-cta:hover { background: var(--a); }
.pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3dff8a;
  box-shadow: 0 0 0 0 rgba(61, 255, 138, .6); animation: pulse 2s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(61, 255, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 255, 138, 0); } }

.menu-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--paper); transition: transform .35s var(--ease); }
.menu-toggle span:first-child { top: 19px; }
.menu-toggle span:last-child { top: 26px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: center;
  gap: .4rem; padding: var(--pad); background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); perspective: 900px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 12vw, 4rem); letter-spacing: -.04em;
  display: flex; align-items: baseline; gap: 1rem;
  animation: menu-in .6s var(--ease) both;
}
.mobile-menu a span { font: .8rem var(--mono); color: var(--a); }
.mobile-menu a:nth-child(2) { animation-delay: .06s; }
.mobile-menu a:nth-child(3) { animation-delay: .12s; }
.mobile-menu a:nth-child(4) { animation-delay: .18s; }
@keyframes menu-in { from { opacity: 0; transform: rotateX(-70deg) translateY(30px); } }

/* ---------- Chapter rail ---------- */
.chapter-rail {
  position: fixed; right: 1.2rem; top: 50%; z-index: 80; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .9rem;
}
.chapter-rail a { position: relative; display: block; width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: height .45s var(--ease), background .3s; }
.chapter-rail a.is-current { height: 34px; background: var(--a); }
.chapter-rail span {
  position: absolute; right: 18px; top: 50%; transform: translate(8px, -50%); white-space: nowrap;
  font: .66rem var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease);
}
.chapter-rail a:hover span, .chapter-rail a:focus-visible span { opacity: 1; transform: translate(0, -50%); }

/* ---------- WhatsApp ---------- */
.whatsapp-float {
  position: fixed; left: var(--pad); bottom: 1.3rem; z-index: 80;
  display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1rem .7rem .8rem;
  border-radius: 999px; background: #25d366; color: #04130a; font-weight: 700; font-size: .85rem;
  box-shadow: 0 10px 40px rgba(37, 211, 102, .35);
}
.whatsapp-float svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ---------- Generic scene + 3D transitions ---------- */
.scene { position: relative; min-height: 100vh; padding: 6rem var(--pad) 3.5rem; perspective: 1400px; perspective-origin: 50% 40%; }
.stage3d {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: var(--origin, 50% 50%);
  transform:
    translate3d(0, var(--ty, 0px), var(--tz, 0px))
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg))
    scale(var(--sc, 1));
  opacity: var(--op, 1);
}
.js .stage3d { will-change: transform, opacity; }
.pinned { height: 420vh; padding: 0; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 1400px; }
.pin > .stage3d { height: 100%; }

.section-label {
  display: inline-flex; gap: .8rem; align-items: center; margin-bottom: 1.6rem;
  font: 400 .74rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.section-label span:first-child {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--a) 60%, transparent); color: var(--a);
}

h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.045em; line-height: .95; font-size: clamp(2.6rem, 6.4vw, 6.2rem); }

/* reveal */
.js .reveal { opacity: 0; transform: translate3d(0, 40px, -60px) rotateX(-25deg); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transform-origin: 50% 100%; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* split chars */
[data-split] { display: block; transform-style: preserve-3d; }
.split-word { display: inline-block; white-space: nowrap; transform-style: preserve-3d; }
.char { display: inline-block; transform-style: preserve-3d; }
.js [data-split] .char {
  opacity: 0; transform: translate3d(0, .6em, -1.2em) rotateX(-95deg);
  transform-origin: 50% 100% -.3em;
  transition: opacity .6s var(--ease), transform 1s var(--ease-back);
  transition-delay: calc(var(--ci, 0) * 22ms);
}
.js [data-split].is-in .char { opacity: 1; transform: none; }

/* ---------- 00 Hero ---------- */
.hero { display: flex; flex-direction: column; justify-content: center; padding-bottom: 9rem; overflow: hidden; }
.hero .stage3d { display: flex; flex-direction: column; gap: 2.2rem; }
.hero-kicker {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font: .76rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.hero-kicker span { display: inline-flex; gap: .6rem; align-items: center; }
.hero-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -.06em; line-height: .86;
  /* "experiences" in Syne 800 is ~9.3x the font size wide: keep it inside the viewport */
  font-size: clamp(2.4rem, 8.2vw, 11rem);
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-line { transform-style: preserve-3d; }
.hero-line:nth-child(1) { transform: translateZ(30px); }
.hero-line--outline { transform: translateZ(80px); padding-left: 5vw; color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
.hero-line--accent { transform: translateZ(140px); color: var(--a); }
.hero-line .char { transition-property: opacity, transform, color; }
.hero-line .char:hover { color: var(--b); -webkit-text-stroke-color: var(--b); }

.hero-bottom { display: grid; grid-template-columns: minmax(0, 1.2fr) auto auto; gap: 2.5rem; align-items: end; }
.hero-bottom > p { max-width: 34rem; font-size: clamp(1rem, 1.3vw, 1.2rem); color: #c9d3cd; }
.hero-stats { display: flex; gap: 2rem; }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong { font-family: var(--display); font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1; color: var(--a); }
.hero-stats span { font: .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.scroll-cue { display: inline-flex; align-items: center; gap: .8rem; font: .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue-wheel { width: 26px; height: 42px; border-radius: 99px; border: 1.5px solid var(--paper); position: relative; }
.scroll-cue-wheel::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: var(--a); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }

.hero-socials { display: flex; gap: .6rem; flex-wrap: wrap; }
.social-link {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem;
  border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; background: var(--glass);
  transition: border-color .3s, background .3s, color .3s;
}
.social-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.social-link .icon-fill { fill: currentColor; stroke: none; }
.social-link:hover { border-color: var(--a); color: var(--a); }

.ticker3d {
  position: absolute; left: -5%; right: -5%; bottom: 2.2rem; overflow: hidden;
  transform: perspective(700px) rotateX(28deg) rotateZ(-2.5deg);
  background: var(--a); color: #050505; padding: .9rem 0;
}
.ticker-track { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.ticker-group { display: flex; align-items: center; gap: 2rem; padding-right: 2rem; }
.ticker-group span { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 2rem); letter-spacing: -.02em; text-transform: uppercase; }
.ticker-group i { font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- 01 Statement ---------- */
.statement { display: flex; align-items: center; min-height: 80vh; }
.statement .stage3d { max-width: 72rem; margin-left: auto; }
.word-reveal {
  font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1.08;
  font-size: clamp(2rem, 5vw, 4.8rem); transform-style: preserve-3d;
}
.word {
  display: inline-block; opacity: .14;
  transform: translate3d(0, .25em, -90px) rotateX(55deg);
  transform-origin: 50% 100%;
  transition: opacity .6s var(--ease), transform .9s var(--ease-back), color .6s;
}
.word.is-lit { opacity: 1; transform: none; }
.word.is-accent.is-lit { color: var(--a); }
.statement-notes { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 3rem; }
.statement-notes span {
  padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line);
  font: .74rem var(--mono); letter-spacing: .14em; text-transform: uppercase; background: var(--glass);
}

/* ---------- 02 Services prism ---------- */
.services .stage3d {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center;
  gap: 3rem; padding: 6rem var(--pad) 3rem;
}
.services-head h2 { font-size: clamp(2.4rem, 5vw, 5rem); max-width: 11ch; }
.services-hint { margin-top: 1.4rem; color: var(--muted); font-size: .95rem; }
.prism-steps { display: flex; flex-direction: column; gap: .2rem; margin-top: 2.2rem; counter-reset: step; }
.prism-steps li {
  counter-increment: step; display: flex; align-items: center; gap: 1rem; padding: .35rem 0;
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--muted);
  transition: color .4s, transform .5s var(--ease);
}
.prism-steps li::before { content: "0" counter(step); font: .72rem var(--mono); width: 2rem; }
.prism-steps li::after { content: ""; height: 1px; width: 0; background: var(--a); transition: width .6s var(--ease); }
.prism-steps li.is-current { color: var(--paper); transform: translateX(.6rem); }
.prism-steps li.is-current::after { width: 3.5rem; }

.prism-viewport {
  --w: min(34vw, 470px); --h: min(60vh, 520px);
  position: relative; width: var(--w); height: var(--h); justify-self: center; perspective: 1700px;
}
.prism {
  position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform;
  transform: translateZ(calc(var(--w) / -2)) rotateX(var(--prx, -10deg)) rotateY(var(--pry, 0deg));
}
.prism-face {
  position: absolute; inset: 0; padding: clamp(1.4rem, 2.6vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1rem; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--a) 45%, transparent); border-radius: 4px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, color-mix(in srgb, var(--b) 22%, transparent), transparent 60%),
    rgba(8, 10, 12, .82);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: border-color .4s, box-shadow .4s;
}
.prism-face[data-face="0"] { transform: rotateY(0deg) translateZ(calc(var(--w) / 2)); }
.prism-face[data-face="1"] { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.prism-face[data-face="2"] { transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); }
.prism-face[data-face="3"] { transform: rotateY(270deg) translateZ(calc(var(--w) / 2)); }
.prism-face.is-front { border-color: var(--a); }
.face-num { font: .8rem var(--mono); color: var(--a); letter-spacing: .14em; }
.prism-face h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.04em; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; }
.prism-face p { color: #c9d3cd; max-width: 26ch; font-size: 1.02rem; }
.prism-face ul { margin-top: auto; display: grid; gap: .5rem; position: relative; z-index: 1; }
.prism-face li { display: flex; gap: .7rem; align-items: center; font-size: .92rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.prism-face li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--a); flex: none; }
.face-glyph {
  position: absolute; right: -.08em; bottom: -.22em; font-family: var(--display); font-weight: 800;
  font-size: clamp(9rem, 16vw, 15rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--a) 35%, transparent); pointer-events: none;
}
.prism-cap {
  position: absolute; left: 0; width: var(--w); height: var(--w); top: calc((var(--h) - var(--w)) / 2);
  background: radial-gradient(circle, color-mix(in srgb, var(--a) 40%, transparent), color-mix(in srgb, var(--b) 15%, transparent) 60%, rgba(8, 10, 12, .9));
  border: 1px solid color-mix(in srgb, var(--a) 45%, transparent);
}
.prism-cap--top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.prism-cap--bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.prism-shadow {
  position: absolute; left: -15%; right: -15%; bottom: -16%; height: 26%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 40%, transparent), transparent);
  transform: rotateX(75deg); opacity: .7;
}

/* ---------- 03 Work ---------- */
.work .stage3d { display: flex; flex-direction: column; gap: 2.4rem; }
.work-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.work-head h2 { max-width: 12ch; }
.work-intro { color: #c9d3cd; max-width: 32rem; font-size: 1.05rem; }

.work-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 5; }
.work-filters { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.platform-tabs, .sub-tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.sub-tabs { padding-left: .9rem; border-left: 2px solid color-mix(in srgb, var(--a) 55%, transparent); animation: sub-in .45s var(--ease); }
@keyframes sub-in { from { opacity: 0; transform: translateY(-8px); } }
.platform-tabs .filter-chip { padding: .7rem 1.15rem; font-size: .92rem; font-weight: 600; }
.filter-group-label { font: .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 .3rem 0 .6rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(5, 8, 7, .45); font-size: .84rem; font-weight: 500;
  transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease-back);
}
.filter-chip strong { font: 500 .68rem var(--mono); opacity: .7; }
.filter-chip:hover { border-color: var(--a); transform: translateY(-2px); }
.filter-chip[aria-pressed="true"] { background: var(--a); color: #050505; border-color: var(--a); }
.view-switch { display: flex; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(5, 8, 7, .45); }
.view-switch button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; font-size: .84rem; transition: background .3s, color .3s; }
.view-switch button.is-active { background: var(--paper); color: #050505; }
.view-icon { width: 14px; height: 14px; display: inline-block; border: 1.5px solid currentColor; }
.view-icon--orbit { border-radius: 50%; transform: rotateX(60deg); }
.view-icon--index { border-width: 1.5px 0; height: 10px; box-shadow: inset 0 -4.5px 0 -3px currentColor; }

/* orbit */
.orbit-view { display: flex; flex-direction: column; gap: 1.4rem; }
.orbit-stage {
  --cw: clamp(240px, 30vw, 440px);
  position: relative; height: clamp(340px, 56vh, 600px); perspective: 2200px; perspective-origin: 50% 30%;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  margin: 0 calc(var(--pad) * -1); overflow: hidden;
}
.orbit-stage::before, .orbit-stage::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 3; pointer-events: none;
}
.orbit-stage::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.orbit-stage::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.orbit-stage:focus-visible { outline: none; }
.orbit-stage:focus-visible .orbit-card.is-front .card-face--front { outline: 2px solid var(--a); outline-offset: 6px; }
.orbit-stage.is-dragging { cursor: grabbing; }
.orbit-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.orbit-ring.is-switching { transition: transform .7s var(--ease), opacity .5s; }
.orbit-card {
  position: absolute; width: var(--cw); height: calc(var(--cw) * .5);
  left: calc(var(--cw) / -2); top: calc(var(--cw) * -.25);
  transform-style: preserve-3d;
}
.orbit-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.orbit-card.is-front .orbit-card-inner { transform: translateZ(60px) scale(1.04); }
.orbit-card.is-entering .orbit-card-inner { animation: card-in .9s var(--ease) both; animation-delay: calc(var(--k, 0) * 35ms); }
@keyframes card-in { from { transform: translateZ(-900px) rotateX(70deg); opacity: 0; } }
.card-face { opacity: var(--vis, 1); position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-face--front {
  display: block; width: 100%; padding: 0; border: 1px solid rgba(255, 255, 255, .16); background: #0b0d10;
  transition: border-color .4s, box-shadow .4s;
}
.card-face--front img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; transition: filter .5s; }
.orbit-card:not(.is-front) .card-face--front img { filter: saturate(.55) brightness(.6); }
.orbit-card.is-front .card-face--front { border-color: var(--a); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.card-face--front .card-tag {
  position: absolute; left: .7rem; bottom: .7rem; padding: .35rem .7rem; border-radius: 999px;
  background: rgba(5, 5, 5, .72); font: .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.card-face--front .card-num { position: absolute; right: .7rem; top: .6rem; font: .7rem var(--mono); color: #fff; mix-blend-mode: difference; }
.card-face--back {
  transform: rotateY(180deg); display: grid; place-items: center; text-align: center; padding: 1rem;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px), #07090b;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.8rem); color: color-mix(in srgb, var(--a) 70%, #888);
}
.card-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .18) 48%, transparent 60%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.orbit-card.is-front:hover .card-sheen { transform: translateX(120%); }

.orbit-floor {
  position: absolute; left: 15%; right: 15%; top: 70%; height: 30%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 30%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%);
}
.orbit-hint {
  position: absolute; left: 50%; bottom: .2rem; transform: translateX(-50%);
  font: .68rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  display: flex; gap: .8rem; transition: opacity .5s;
}
.orbit-hint span { color: var(--a); animation: nudge 1.8s ease-in-out infinite; }
.orbit-hint span:last-child { animation-direction: reverse; }
@keyframes nudge { 50% { transform: translateX(-5px); } }
.orbit-stage.was-dragged .orbit-hint { opacity: 0; }

.orbit-hud {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; align-items: center;
  padding: 1.4rem 1.6rem; border-radius: 18px; border: 1px solid var(--line);
  background: rgba(6, 8, 9, .84);
  position: relative; overflow: hidden; perspective: 800px;
}
.hud-count { display: flex; align-items: baseline; gap: .3rem; font-family: var(--display); }
.hud-count strong { font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: 1; color: var(--a); letter-spacing: -.05em; }
.hud-count span { font: .8rem var(--mono); color: var(--muted); }
.hud-main { min-width: 0; transform-style: preserve-3d; }
.hud-main.swap { animation: hud-swap .7s var(--ease); }
@keyframes hud-swap { from { opacity: 0; transform: rotateX(-70deg) translateY(16px); } }
.hud-cat { font: .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--a); margin-bottom: .3rem; }
.hud-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.5rem); letter-spacing: -.04em; line-height: 1.05; }
.hud-desc { color: #c3cdc7; font-size: .95rem; margin-top: .35rem; max-width: 60ch; }
.hud-actions { display: flex; align-items: center; gap: .5rem; }
.hud-arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
  font-size: 1.1rem; transition: background .3s, color .3s, border-color .3s;
}
.hud-arrow:hover { background: var(--paper); color: #050505; }
.hud-open { padding: .85rem 1.2rem; border-radius: 999px; border: 1px solid var(--a); color: var(--a); font-weight: 600; font-size: .88rem; transition: background .3s, color .3s; }
.hud-open:hover { background: var(--a); color: #050505; }
.hud-visit { display: inline-flex; gap: .5rem; align-items: center; padding: .85rem 1.25rem; border-radius: 999px; background: var(--a); color: #050505; font-weight: 700; font-size: .88rem; white-space: nowrap; }
.hud-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.hud-progress span { display: block; height: 100%; width: var(--hud-p, 0%); background: linear-gradient(90deg, var(--a), var(--b)); transition: width .6s var(--ease); }

/* index */
.index-view { position: relative; }
.index-list { border-top: 1px solid var(--line); perspective: 1200px; }
.index-row {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 1.2rem; align-items: center;
  width: 100%; text-align: left; padding: 1.15rem .4rem; border-bottom: 1px solid var(--line);
  transform-style: preserve-3d; transform-origin: 50% 100%;
  transition: transform .5s var(--ease), background .4s, color .3s;
  animation: row-in .7s var(--ease) both; animation-delay: calc(var(--k, 0) * 30ms);
}
@keyframes row-in { from { opacity: 0; transform: rotateX(-75deg) translateY(20px); } }
.index-row:hover, .index-row:focus-visible { background: linear-gradient(90deg, color-mix(in srgb, var(--a) 14%, transparent), transparent); transform: translateZ(30px); }
.index-row .row-num { font: .74rem var(--mono); color: var(--muted); }
.index-row .row-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3.2vw, 2.8rem); letter-spacing: -.04em; line-height: 1.05; transition: transform .5s var(--ease), color .3s; }
.index-row:hover .row-name { transform: translateX(.8rem); color: var(--a); }
.index-row .row-type { font-size: .86rem; color: var(--muted); }
.index-row .row-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .5s var(--ease), background .3s, color .3s; }
.index-row:hover .row-arrow { transform: rotate(45deg); background: var(--a); color: #050505; }
.index-preview {
  position: fixed; left: 0; top: 0; z-index: 70; width: clamp(260px, 26vw, 420px); aspect-ratio: 2 / 1;
  pointer-events: none; opacity: 0; perspective: 900px; transition: opacity .35s;
}
.index-preview.is-on { opacity: 1; }
.index-preview-inner { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--a); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); transform-style: preserve-3d; }
.index-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* no-JS project list */
.project-source { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.project-source li { padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(6, 8, 9, .7); display: grid; gap: .4rem; }
.project-source h3 { font-family: var(--display); font-size: 1.4rem; }
.project-source .src-title { color: var(--a); font-size: .85rem; }
.project-source .src-desc { color: #c3cdc7; font-size: .92rem; }
.project-source a { color: var(--a); font-weight: 600; font-size: .9rem; }
.js .project-source { display: none; }

/* ---------- Viewer ---------- */
.viewer {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--paper); overflow: hidden;
}
.viewer::backdrop { background: rgba(3, 4, 5, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.viewer[open] { animation: viewer-fade .4s var(--ease); }
@keyframes viewer-fade { from { opacity: 0; } }
.viewer-inner {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center; padding: clamp(4rem, 7vh, 6rem) var(--pad) 2rem;
}
.viewer-close {
  position: absolute; top: 1.2rem; right: var(--pad); width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); font-size: 1rem; z-index: 2; transition: background .3s, color .3s, transform .5s var(--ease);
}
.viewer-close:hover { background: var(--paper); color: #050505; transform: rotate(90deg); }
.viewer-stage { perspective: 1600px; }
.viewer-browser {
  border-radius: 14px; overflow: hidden; background: #0e1013; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 60px 140px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--a) 18%, transparent), 0 0 120px color-mix(in srgb, var(--a) 18%, transparent);
  transform-style: preserve-3d;
  transform: rotateY(var(--vry, -9deg)) rotateX(var(--vrx, 5deg));
  transition: transform .5s var(--ease);
  touch-action: pan-y; /* horizontal swipes reach the script (prev / next project) */
}
.viewer[open] .viewer-browser { animation: browser-in 1s var(--ease) both; }
.viewer-browser.flip { animation: browser-flip .75s var(--ease) both !important; }
@keyframes browser-in { from { opacity: 0; transform: translateZ(-700px) rotateX(55deg) rotateY(-25deg); } }
@keyframes browser-flip { 0% { transform: rotateY(var(--flip-from, 70deg)) scale(.85); opacity: 0; } }
.browser-bar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; background: #17191d; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.browser-dots { display: flex; gap: .4rem; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.browser-dots i:nth-child(2) { background: #febc2e; }
.browser-dots i:nth-child(3) { background: #28c840; }
.browser-url { flex: 1; max-width: 420px; margin: 0 auto; padding: .3rem .9rem; border-radius: 6px; background: #0c0d10; font: .74rem var(--mono); color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-screen { position: relative; aspect-ratio: 1900 / 910; background: #0b0c0e; }
.browser-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.browser-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .16), transparent 60%); mix-blend-mode: screen; }
.viewer-info { display: flex; flex-direction: column; gap: .8rem; }
.viewer-info > * { animation: info-in .8s var(--ease) both; }
.viewer-info > *:nth-child(2) { animation-delay: .06s; }
.viewer-info > *:nth-child(3) { animation-delay: .12s; }
.viewer-info > *:nth-child(4) { animation-delay: .18s; }
.viewer-info > *:nth-child(5) { animation-delay: .24s; }
.viewer-info > *:nth-child(6) { animation-delay: .3s; }
@keyframes info-in { from { opacity: 0; transform: translateY(24px); } }
.viewer-cat { font: .74rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--a); }
.viewer-name { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; line-height: .95; font-size: clamp(2.2rem, 4.4vw, 4.2rem); }
.viewer-tagline { font-family: var(--display); font-size: 1.2rem; color: var(--b); }
.viewer-desc { color: #c9d3cd; font-size: 1.02rem; max-width: 42ch; }
.viewer-label { font: .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.viewer-actions { display: flex; gap: .6rem; align-items: center; margin-top: .8rem; flex-wrap: wrap; }
.viewer-count { font: .74rem var(--mono); color: var(--muted); letter-spacing: .14em; }

/* ---------- 04 Process tunnel ---------- */
.process-head { position: absolute; left: var(--pad); top: 6.5rem; z-index: 3; max-width: 30rem; }
.process-head h2 { font-size: clamp(2.2rem, 4.6vw, 4.6rem); }
.process-head p { color: #c3cdc7; margin-top: 1rem; }
.tunnel { position: absolute; inset: 0; perspective: 800px; perspective-origin: 62% 52%; transform-style: preserve-3d; }
.tunnel-grid { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.tunnel-grid::before, .tunnel-grid::after {
  content: ""; position: absolute; left: -60%; right: -60%; height: 1600px; transform-origin: 50% 0;
  transform: rotateX(-90deg) translateY(var(--tp, 0px)); will-change: transform;
  background-image:
    linear-gradient(color-mix(in srgb, var(--a) 40%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--a) 30%, transparent) 1px, transparent 1px);
  background-size: 120px 120px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}
.tunnel-grid::before { top: 84%; }
.tunnel-grid::after { top: 16%; opacity: .45; }
.tunnel-steps { position: absolute; inset: 0; transform-style: preserve-3d; }
.tunnel-step {
  position: absolute; left: 62%; top: 52%; width: min(480px, 80vw);
  padding: 2rem; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--a) 50%, transparent);
  background:
    radial-gradient(100% 100% at 0 0, color-mix(in srgb, var(--a) 20%, transparent), transparent 60%),
    rgba(7, 8, 10, .95);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
  will-change: transform, opacity;
}
.step-num { display: block; font-family: var(--display); font-weight: 800; font-size: 4.5rem; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--a); margin-bottom: .8rem; }
.tunnel-step h3 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.04em; margin-bottom: .5rem; }
.tunnel-step p { color: #c9d3cd; }
.tunnel-meter { position: absolute; right: calc(var(--pad) + 1.5rem); bottom: 3rem; width: 160px; height: 2px; background: var(--line); }
.tunnel-meter span { display: block; height: 100%; width: calc(var(--tm, 0) * 100%); background: var(--a); }

/* ---------- 05 Contact ---------- */
.contact { display: flex; flex-direction: column; justify-content: center; text-align: center; padding-bottom: 2rem; }
.contact .stage3d { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; flex: 1; justify-content: center; }
.contact-kicker { font-family: var(--display); font-size: 1.3rem; color: var(--muted); }
.contact-title { font-size: clamp(2.8rem, 9vw, 9.5rem); line-height: .9; }
.contact-accent { color: var(--a); }
.contact-orb {
  position: relative; margin-top: 2rem; width: clamp(170px, 17vw, 230px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--a); color: #050505; font-weight: 700; line-height: 1.2;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 40%, transparent), 0 30px 100px color-mix(in srgb, var(--a) 45%, transparent);
  transform-style: preserve-3d;
}
.contact-orb-ring {
  position: absolute; inset: -16px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a), var(--b), transparent 40%, var(--a));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.contact-orb-text { font-size: 1.02rem; }
.contact-orb-arrow { position: absolute; bottom: 22%; font-size: 1.3rem; transition: transform .5s var(--ease); }
.contact-orb:hover .contact-orb-arrow { transform: translate(6px, -6px); }

.site-footer {
  position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.4rem; margin-top: 3rem; border-top: 1px solid var(--line);
  font: .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.footer-socials { display: flex; gap: 1.2rem; }
.site-footer a:hover { color: var(--a); }

/* ---------- Flat fallback (no JS / reduced motion) ---------- */
html:not(.js) .pinned, :is(.reduced, .lite) .pinned { height: auto; }
html:not(.js) .pin, :is(.reduced, .lite) .pin { position: relative; height: auto; overflow: visible; }
html:not(.js) .services .stage3d, :is(.reduced, .lite) .services .stage3d { grid-template-columns: 1fr; }
html:not(.js) .prism-viewport, :is(.reduced, .lite) .prism-viewport { width: auto; height: auto; perspective: none; justify-self: stretch; }
html:not(.js) .prism, :is(.reduced, .lite) .prism { position: static; transform: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
html:not(.js) .prism-face, :is(.reduced, .lite) .prism-face { position: relative; inset: auto; transform: none; min-height: 340px; }
html:not(.js) .prism-cap, html:not(.js) .prism-shadow, html:not(.js) .prism-steps, html:not(.js) .services-hint,
:is(.reduced, .lite) .prism-cap, :is(.reduced, .lite) .prism-shadow, :is(.reduced, .lite) .prism-steps, :is(.reduced, .lite) .services-hint { display: none; }
html:not(.js) .process .stage3d, :is(.reduced, .lite) .process .stage3d { padding: 6rem var(--pad) 4rem; }
html:not(.js) .process-head, :is(.reduced, .lite) .process-head { position: static; margin-bottom: 2rem; }
html:not(.js) .tunnel, :is(.reduced, .lite) .tunnel { position: static; perspective: none; }
html:not(.js) .tunnel-grid, html:not(.js) .tunnel-meter, :is(.reduced, .lite) .tunnel-grid, :is(.reduced, .lite) .tunnel-meter { display: none; }
html:not(.js) .tunnel-steps, :is(.reduced, .lite) .tunnel-steps { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
html:not(.js) .tunnel-step, .reduced .tunnel-step { position: relative; left: auto; top: auto; margin: 0; width: auto; transform: none !important; opacity: 1 !important; }
.lite .tunnel-step { position: relative; left: auto; top: auto; margin: 0; width: auto; }
:is(.reduced, .lite) .word { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-bottom { grid-template-columns: 1fr auto; }
  .scroll-cue { display: none; }
  .orbit-hud { grid-template-columns: auto minmax(0, 1fr); }
  .hud-actions { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .site-nav, .header-cta, .chapter-rail { display: none; }
  .menu-toggle { display: block; }
  .scene { padding-top: 6rem; }
  .hero { padding-bottom: 8rem; }
  .hero-line--outline { padding-left: 0; }
  .hero-bottom { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-stats { gap: 1.4rem; }
  .services .stage3d { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 5.5rem; align-content: start; }
  .services-head h2 { font-size: clamp(2rem, 8vw, 3rem); max-width: none; }
  .services-hint, .prism-steps { display: none; }
  .prism-viewport { --w: min(70vw, 380px); --h: min(56vh, 460px); }
  .work-head { grid-template-columns: 1fr; }
  .orbit-stage { --cw: 68vw; height: clamp(260px, 46vh, 420px); }
  .orbit-hud { grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem; }
  .hud-count strong { font-size: 2.2rem; }
  .hud-actions { display: grid; grid-template-columns: 44px 1fr 1fr 44px; gap: .4rem; }
  .hud-arrow { width: 44px; height: 44px; }
  .hud-open, .hud-visit { justify-content: center; text-align: center; white-space: nowrap; padding: .8rem .6rem; font-size: .82rem; }
  .index-row { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .index-row .row-type { display: none; }
  .viewer-inner { grid-template-columns: 1fr; align-content: start; overflow-y: auto; padding-top: 5rem; gap: 1.5rem; }
  .viewer-browser { --vry: 0deg; --vrx: 0deg; }
  .process-head { top: 5.5rem; right: var(--pad); }
  .tunnel { perspective-origin: 50% 60%; }
  .tunnel-step { left: 50%; top: 62%; padding: 1.5rem; }
  .step-num { font-size: 3.2rem; }
  .site-footer { justify-content: center; text-align: center; }
  .whatsapp-float span { display: none; }
  .whatsapp-float { padding: .8rem; }
}

/* ==========================================================================
   LITE MODE — phones, touch devices and low-memory machines.
   Flat 2D layout, no big 3D layers: fast, smooth and crash-free on mobile.
   ========================================================================== */
.lite .noise { display: none; }
.lite .stage3d { transform: none !important; opacity: 1 !important; will-change: auto; transform-style: flat; }
.lite .scene { perspective: none; }
.lite .hero-title, .lite .hero-line { transform: none !important; transform-style: flat; will-change: auto; }
.lite [data-split], .lite .split-word, .lite .char { transform-style: flat; }
.lite.js [data-split] .char {
  transform: translateY(.45em); transform-origin: 50% 100%;
  transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--ci, 0) * 12ms);
}
.lite.js [data-split].is-in .char { transform: none; }
.lite.js .reveal { transform: translateY(24px); }
.lite.js .reveal.is-in { transform: none; }
.lite .word { transform: translateY(.12em); }
.lite .word.is-lit { transform: none; }
.lite .ticker3d { transform: rotateZ(-2.5deg); }
.lite .prism-face { min-height: 0; }
.lite .prism-face .face-glyph { font-size: 8rem; }
.lite .services .stage3d, .lite .process .stage3d { padding-top: 5.5rem; }
.lite .tunnel-step h3 { margin-top: .2rem; }

/* projects: native swipe carousel instead of the 3D ring */
.lite .orbit-stage { height: auto; perspective: none; overflow: visible; cursor: auto; touch-action: auto; margin: 0 calc(var(--pad) * -1); }
.lite .orbit-stage::before, .lite .orbit-stage::after, .lite .orbit-floor, .lite .orbit-hint { display: none; }
.lite .orbit-ring {
  position: static; width: auto; height: auto; transform: none !important; transform-style: flat; will-change: auto;
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: .5rem calc(50% - var(--cw) / 2) 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lite .orbit-ring::-webkit-scrollbar { display: none; }
.lite .orbit-card {
  position: relative; left: auto; top: auto; flex: 0 0 var(--cw); width: var(--cw); height: calc(var(--cw) * .52);
  scroll-snap-align: center; transform-style: flat; transform: scale(.92) !important; opacity: .6;
  transition: transform .35s var(--ease), opacity .35s;
}
.lite .orbit-card.is-front { transform: none !important; opacity: 1; }
.lite .orbit-card-inner { transform: none !important; transform-style: flat; }
.lite .card-face { opacity: 1 !important; backface-visibility: visible; -webkit-backface-visibility: visible; }
.lite .card-face--back, .lite .card-sheen { display: none; }
.lite .orbit-card:not(.is-front) .card-face--front img { filter: none; }
.lite .viewer-browser { --vry: 0deg; --vrx: 0deg; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.lite .index-row:hover, .lite .index-row:focus-visible { transform: none; }
.lite .index-row { transform-style: flat; }

@media (max-width: 860px) {
  .work-toolbar { flex-direction: column; align-items: stretch; gap: .8rem; }
  .platform-tabs, .sub-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .sub-tabs { padding: .9rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .sub-tabs::before { content: "Shopify categories"; grid-column: 1 / -1; font: .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--a); }
  .filter-chip { justify-content: space-between; min-height: 46px; text-align: left; }
  .sub-tabs .filter-chip { font-size: .8rem; padding: .55rem .8rem; }
  .view-switch { align-self: flex-start; }
  .hero-kicker { flex-direction: column; gap: .5rem; }
  .hero-title { font-size: 9.6vw; letter-spacing: -.05em; }
  .hero .stage3d { gap: 1.6rem; }
  .hero-stats { flex-wrap: wrap; }
  .contact-title { font-size: clamp(2.4rem, 11vw, 4rem); }
  .site-footer { flex-direction: column; gap: .8rem; padding-bottom: 5rem; }
  .prism-face h3 { font-size: 2.2rem; }
  .viewer-name { font-size: 2.2rem; }
  .viewer-actions .hud-visit { flex: 1; justify-content: center; }

  /* tighter vertical rhythm: sections size to their content instead of a full screen each */
  .scene { min-height: 0; padding-top: 3.5rem; padding-bottom: 1.5rem; scroll-margin-top: 1.5rem; }
  .scene.pinned { padding: 0; } /* the stage inside pads itself */
  .hero { min-height: 100vh; min-height: 100svh; padding-top: 6rem; padding-bottom: 7rem; }
  .lite .services .stage3d, .lite .process .stage3d { padding-top: 3.5rem; padding-bottom: 1.5rem; }
  .lite .process-head { margin-bottom: 1.4rem; }
  .section-label { margin-bottom: 1.1rem; }
  .statement-notes { margin-top: 2rem; }
  .work .stage3d { gap: 1.8rem; }
  .contact { padding-bottom: 1rem; }
  .contact .stage3d { padding-top: 1.5rem; }
  .contact-orb { margin-top: 1.2rem; }
  .site-footer { margin-top: 2.5rem; }
}

/* reading-progress bar under the header (phones, where the chapter rail is hidden) */
.scroll-progress {
  position: fixed; left: 0; right: 0; top: 0; z-index: 110; height: 2px; display: none; pointer-events: none;
  background: linear-gradient(90deg, var(--a), var(--b)); transform-origin: 0 50%; transform: scaleX(0);
}
@media (max-width: 860px) { .scroll-progress { display: block; } }

/* lite: one-time reveal animations (compositor-only, no loops) */
.lite.js .lift { opacity: 0; transform: translateY(38px) scale(.97); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: var(--rd, 0ms); }
.lite.js .lift.is-in { opacity: 1; transform: none; }
.lite.js .lift .face-num, .lite.js .lift .step-num { display: inline-block; transform: translateX(-14px); opacity: 0; transition: transform .6s var(--ease) .25s, opacity .6s .25s; }
.lite.js .lift.is-in .face-num, .lite.js .lift.is-in .step-num { transform: none; opacity: 1; }
.lite .orbit-card.is-entering .orbit-card-inner { animation: lite-card-in .55s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }
@keyframes lite-card-in { from { opacity: 0; translate: 40px 0; } }

/* lite: extra motion for phones — still transform/opacity only */
.lite:not(.reduced) .word { opacity: .16; transition: opacity .5s var(--ease), transform .6s var(--ease), color .5s; }
.lite:not(.reduced) .word.is-lit { opacity: 1; }
.lite.js .section-label.reveal span:first-child { scale: .3; rotate: -120deg; transition: scale .7s var(--ease-back) .15s, rotate .7s var(--ease) .15s; }
.lite.js .section-label.reveal.is-in span:first-child { scale: 1; rotate: 0deg; }
.lite.js .contact-orb.lift { transform: scale(.6); }
.lite.js .contact-orb.lift.is-in { transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease-back); }
.lite:not(.reduced) .contact-orb-text { animation: orb-breathe 3.2s ease-in-out infinite; }
@keyframes orb-breathe { 50% { scale: 1.06; } }
.lite .hud-main.swap { animation-name: lite-hud-swap; }
@keyframes lite-hud-swap { from { opacity: 0; transform: translateY(14px); } }
/* ---- lite: service cards + process steps ---- */
/* 1. cards swing in from alternating sides */
.lite.js :is(.prism-face, .tunnel-step).lift {
  transform: translateX(-34px) rotate(-2.5deg) scale(.96); transform-origin: 0 100%;
  transition: opacity .7s var(--ease), transform .95s var(--ease-back), border-color .5s, box-shadow .5s;
}
.lite.js .prism-face.lift:nth-child(even), .lite.js .tunnel-step.lift:nth-child(even) { transform: translateX(34px) rotate(2.5deg) scale(.96); transform-origin: 100% 100%; }
.lite.js :is(.prism-face, .tunnel-step).lift.is-in { transform: none; }
/* 2. contents cascade in after the card lands */
.lite.js :is(.prism-face, .tunnel-step).lift :is(h3, p, li) { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.lite.js :is(.prism-face, .tunnel-step).lift.is-in :is(h3, p, li) { opacity: 1; transform: none; }
.lite.js .lift.is-in h3 { transition-delay: .2s; }
.lite.js .lift.is-in p { transition-delay: .3s; }
.lite.js .lift.is-in li:nth-child(1) { transition-delay: .38s; }
.lite.js .lift.is-in li:nth-child(2) { transition-delay: .45s; }
.lite.js .lift.is-in li:nth-child(3) { transition-delay: .52s; }
.lite.js .lift.is-in li:nth-child(4) { transition-delay: .59s; }
.lite.js .prism-face.lift li::before { scale: 0; transition: scale .5s var(--ease-back) .55s; }
.lite.js .prism-face.lift.is-in li::before { scale: 1; }
/* 3. the big outline glyph spins into its corner */
.lite.js .prism-face.lift .face-glyph { opacity: 0; transform: translate(25%, 20%) rotate(30deg) scale(.7); transition: opacity 1s var(--ease) .3s, transform 1.2s var(--ease) .3s, rotate .8s var(--ease), scale .8s var(--ease); }
.lite.js .prism-face.lift.is-in .face-glyph { opacity: 1; transform: none; }
/* 4. a light sweep crosses each card once as it arrives */
.lite .tunnel-step { overflow: hidden; }
.lite.js :is(.prism-face, .tunnel-step).lift::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--a) 22%, transparent) 50%, transparent 65%);
  transform: translateX(-110%);
}
.lite.js :is(.prism-face, .tunnel-step).lift.is-in::after { transform: translateX(110%); transition: transform 1.3s var(--ease) .35s; }
/* 5. process: accent edge grows down + the outline number fills with colour */
.lite.js .tunnel-step.lift::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 2;
  background: linear-gradient(var(--a), var(--b)); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 1s var(--ease) .25s;
}
.lite.js .tunnel-step.lift.is-in::before { transform: none; }
.lite.js .tunnel-step.lift .step-num {
  background: linear-gradient(90deg, var(--a), var(--b)) no-repeat 0 0 / 0% 100%;
  -webkit-background-clip: text; background-clip: text;
  transition: transform .6s var(--ease) .25s, opacity .6s .25s, background-size 1.1s var(--ease) .5s;
}
.lite.js .tunnel-step.lift.is-in .step-num { background-size: 100% 100%; }
/* 6. the card in the middle of the screen glows */
.lite :is(.prism-face, .tunnel-step).is-focus {
  border-color: var(--a);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 60%, transparent), 0 18px 50px color-mix(in srgb, var(--a) 22%, transparent);
}
.lite .prism-face.is-focus .face-glyph { rotate: -8deg; scale: 1.08; }

/* press feedback on touch (uses `scale`, so it stacks on any existing transform) */
.lite :is(a, button) { -webkit-tap-highlight-color: transparent; }
.lite :is(.filter-chip, .view-switch button, .hud-arrow, .hud-open, .hud-visit, .social-link, .contact-orb, .whatsapp-float, .index-row, .menu-toggle, .viewer-close):active { scale: .95; }