/* ═══════════════════════════════════════════════════════════
   ABU ASAD — AI VIDEO CREATOR
   Cinematic portfolio · design system
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root{
  /* surface */
  --bg:        #070708;
  --bg-2:      #0a0a0c;
  --surface:   #101013;
  --surface-2: #16161b;
  --line:      rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.045);

  /* ink */
  --ink:       #f4f4f6;
  --ink-2:     rgba(244,244,246,.62);
  --ink-3:     rgba(244,244,246,.36);
  --ink-4:     rgba(244,244,246,.18);

  /* accent — gold, used as *light*, never as flat fill.
     three stops: bronze (shadow side) → gold (key) → champagne (specular).
     --accent / --accent-soft hold the raw channels so any rgba() in the
     sheet can be retuned from this one place. */
  --accent:      207,162,77;
  --accent-soft: 240,220,170;
  --v:         #cfa24d;
  --v-soft:    #f0dcaa;
  --v-deep:    #7d5c1e;
  --glow:      rgba(207,162,77,.30);
  --glow-soft: rgba(207,162,77,.12);

  /* type */
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  /* rhythm */
  --pad: clamp(20px, 5vw, 84px);
  --maxw: 1560px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  font-family:var(--sans);
  font-weight:400;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; height:100vh; }
body.no-scroll{ overflow:hidden; }

img,video,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
em{ font-style:normal; }
::selection{ background:var(--v); color:#fff; }

:focus-visible{
  outline:1px solid var(--v-soft);
  outline-offset:4px;
  border-radius:2px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ── ATMOSPHERE : GRAIN + VIGNETTE ────────────────────────── */
.grain{
  position:fixed; inset:-150%;
  z-index:9000; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}      16%{transform:translate(-2%,-3%)}
  33%{transform:translate(-4%,2%)}  50%{transform:translate(2%,-4%)}
  66%{transform:translate(-1%,3%)}  83%{transform:translate(3%,1%)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:8990; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ── CUSTOM CURSOR ────────────────────────────────────────── */
.cursor{ position:fixed; inset:0; z-index:9500; pointer-events:none; display:none; }
.cursor__dot{
  position:absolute; top:0; left:0;
  width:5px; height:5px; border-radius:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:opacity .3s, width .3s var(--ease), height .3s var(--ease);
}
.cursor__ring{
  position:absolute; top:0; left:0;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(244,244,246,.35);
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  transition:width .45s var(--ease), height .45s var(--ease),
             background-color .45s var(--ease), border-color .45s var(--ease),
             backdrop-filter .45s;
}
.cursor__label{
  font-size:9px; font-weight:700; letter-spacing:.18em;
  opacity:0; transform:scale(.6);
  transition:opacity .3s, transform .45s var(--ease);
  color:#fff; white-space:nowrap;
}
/* states */
.cursor.is-hover .cursor__ring{ width:58px; height:58px; border-color:rgba(244,244,246,.6); }
.cursor.is-hover .cursor__dot{ width:0; height:0; }
.cursor.is-label .cursor__ring{
  width:94px; height:94px;
  background:var(--v);
  border-color:transparent;
  box-shadow:0 0 60px var(--glow);
}
.cursor.is-label .cursor__label{ opacity:1; transform:scale(1); }
.cursor.is-label .cursor__dot{ width:0; height:0; }
.cursor.is-down .cursor__ring{ transform:translate(-50%,-50%) scale(.82); }
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block; }
  body.has-cursor, body.has-cursor *{ cursor:none !important; }
}

/* ── PRELOADER ────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:9800;
  background:var(--bg);
  display:grid; align-content:end;
  padding:var(--pad) var(--pad) clamp(28px,5vw,64px);
}
.loader__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; }
.loader__name{
  display:flex; gap:.22em; overflow:hidden;
  font-size:clamp(48px,11vw,160px); font-weight:800;
  letter-spacing:-.055em; line-height:.9;
}
.loader__word{ display:block; transform:translateY(105%); }
.loader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:clamp(16px,2.5vw,28px);
  font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--ink-3);
}
.loader__count i{ font-style:normal; color:var(--ink); }
.loader__bar{
  margin-top:18px; height:1px; width:100%;
  background:var(--line); overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--v-deep), var(--v-soft));
  transform:scaleX(0); transform-origin:0 50%;
}

/* ── PAGE TRANSITION CURTAIN ──────────────────────────────── */
.curtain{ position:fixed; inset:0; z-index:9600; pointer-events:none; }
.curtain__panel{
  position:absolute; inset:0;
  background:#050506;
  transform:scaleY(0); transform-origin:50% 100%;
  border-radius:0 0 clamp(20px,4vw,60px) clamp(20px,4vw,60px);
}
.curtain__label{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:clamp(28px,7vw,90px); font-weight:800; letter-spacing:-.05em;
  opacity:0;
}
.curtain__label span{ display:block; }

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px var(--pad);
  transition:padding .5s var(--ease), background-color .5s var(--ease),
             backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding-block:14px;
  background:rgba(7,7,8,.62);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav.is-hidden{ transform:translateY(-105%); }
.nav{ transform:translateY(0); transition-property:transform,padding,background-color,backdrop-filter,border-color; }

.nav__logo{ display:flex; align-items:center; gap:10px; }
.nav__logo-mark{
  width:11px; height:11px; border-radius:50%;
  background:var(--v);
  box-shadow:0 0 0 4px rgba(var(--accent),.14), 0 0 22px var(--glow);
  animation:pulse 3.4s var(--ease-io) infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.72);opacity:.6} }
.nav__logo-text{ font-size:13px; font-weight:800; letter-spacing:.02em; }

.nav__links{ position:relative; display:flex; gap:4px; }
.nav__links a{
  position:relative; z-index:2;
  padding:9px 16px; border-radius:100px;
  font-size:11px; font-weight:600; letter-spacing:.15em; color:var(--ink-3);
  transition:color .4s var(--ease);
  overflow:hidden;
}
.nav__links a span{ display:block; transition:transform .5s var(--ease); }
.nav__links a:hover, .nav__links a.is-active{ color:var(--ink); }
.nav__pill{
  position:absolute; top:0; left:0; height:100%; width:0;
  border-radius:100px; background:rgba(255,255,255,.055);
  border:1px solid var(--line-soft);
  opacity:0; z-index:1;
}

.nav__cta{
  position:relative;
  padding:11px 22px; border-radius:100px;
  border:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.15em;
  overflow:hidden;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.nav__cta span{ position:relative; z-index:2; }
.nav__cta::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, var(--v-deep), var(--v));
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.nav__cta:hover{ border-color:transparent; color:#fff; }
.nav__cta:hover::before{ transform:translateY(0); }

.nav__burger{ display:none; width:42px; height:42px; place-items:center; border-radius:50%; border:1px solid var(--line); }
.nav__burger i{ display:block; width:16px; height:1px; background:var(--ink); transition:transform .5s var(--ease), opacity .3s; }
.nav__burger i:first-child{ margin-bottom:5px; }
.nav__burger.is-open i:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger.is-open i:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:7900;
  background:rgba(7,7,8,.94);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .8s var(--ease), visibility .8s;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__list{ display:grid; gap:6px; }
.menu__list a{
  display:flex; align-items:baseline; gap:16px;
  font-size:clamp(34px,10vw,64px); font-weight:800; letter-spacing:-.05em; line-height:1.15;
  opacity:0; transform:translateY(28px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.menu.is-open .menu__list a{ opacity:1; transform:none; }
.menu.is-open .menu__list a:nth-child(1){ transition-delay:.14s }
.menu.is-open .menu__list a:nth-child(2){ transition-delay:.2s }
.menu.is-open .menu__list a:nth-child(3){ transition-delay:.26s }
.menu.is-open .menu__list a:nth-child(4){ transition-delay:.32s }
.menu__list em{ font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--v-soft); }
.menu__foot{
  position:absolute; left:var(--pad); right:var(--pad); bottom:var(--pad);
  display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:.2em; color:var(--ink-3);
}

/* ── SHARED TYPE ──────────────────────────────────────────── */
.tag{
  font-size:11px; font-weight:600; letter-spacing:.24em; color:var(--ink-3);
  margin-bottom:clamp(20px,3vw,38px);
}
.sec-head{ margin-bottom:clamp(48px,7vw,110px); }
.sec-head--center{ text-align:center; }
.sec-head--center .tag{ display:block; }

.sec-title{
  font-size:clamp(40px,8.4vw,124px);
  font-weight:800; letter-spacing:-.055em; line-height:.92;
}
.sec-title--xl{ font-size:clamp(48px,12vw,190px); }
.sec-title--center{ text-align:center; }
.sec-title span{ display:block; }
.sec-title em, .statement em, .hero__title em, .film__title em, .contact__title em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 0%, var(--v-soft) 120%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.sec-note{ margin-top:24px; max-width:46ch; color:var(--ink-2); font-size:clamp(14px,1.15vw,17px); }

/* split-text primitives */
.line{
  display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em;   /* room for descenders inside the mask */
}
.line__in{ display:block; }
.char, .word{ display:inline-block; will-change:transform; }
.reveal-line span{ display:inline-block; }

/* gradient-filled italics keep their fill after being split into characters */
em .char, em .word{
  background:inherit;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  padding:17px 30px; border-radius:100px;
  font-size:12px; font-weight:700; letter-spacing:.13em;
  overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn__text, .btn__arrow{ position:relative; z-index:2; }
.btn__arrow{ transition:transform .5s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(6px); }

.btn--primary{ background:var(--ink); color:#080704; }
.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, var(--v), var(--v-soft));
  transform:translateY(101%); transition:transform .6s var(--ease);
}
.btn--primary:hover{ color:#fff; }
.btn--primary:hover::before{ transform:translateY(0); }

.btn--ghost{ border:1px solid var(--line); color:var(--ink-2); }
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(255,255,255,.06);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
.btn--ghost:hover{ color:var(--ink); border-color:rgba(255,255,255,.2); }
.btn--ghost:hover::before{ transform:scaleX(1); }

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px var(--pad) clamp(28px,4vw,52px);
  overflow:hidden;
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:0;
}
.hero__canvas.is-live{ opacity:1; }   /* fallback when GSAP never runs */
.hero__aura{
  position:absolute; z-index:0; pointer-events:none;
  top:42%; left:50%; width:min(1100px,120vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--glow-soft) 0%, transparent 62%);
  filter:blur(24px);
}
.hero__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:grid; grid-template-columns:repeat(5,1fr);
  opacity:.5;
}
.hero__grid i{ border-left:1px solid var(--line-soft); }
.hero__grid i:first-child{ border-left:0; }

.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; }
.hero__eyebrow{ font-size:11px; font-weight:600; letter-spacing:.26em; color:var(--ink-3); overflow:hidden; }
.hero__title{
  margin-top:clamp(18px,2.4vw,30px);
  font-size:clamp(54px,13.2vw,220px);
  font-weight:800; letter-spacing:-.06em; line-height:.86;
}
.hero__sub{
  margin-top:clamp(22px,3vw,38px);
  font-size:clamp(13px,1.35vw,18px); font-weight:500;
  letter-spacing:.02em; color:var(--ink-2);
  overflow:hidden;
}
.hero__sub b{ color:var(--v-soft); margin-inline:6px; font-weight:400; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,4vw,52px); }

.hero__foot{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:clamp(40px,6vw,88px) auto 0;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:10px; font-weight:600; letter-spacing:.22em; color:var(--ink-3);
}
.hero__scroll{ display:flex; align-items:center; gap:12px; }
.hero__scroll i{
  position:relative; display:block; width:1px; height:34px;
  background:var(--line); overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--v),transparent);
  animation:scrollLine 2.2s var(--ease-io) infinite;
}
@keyframes scrollLine{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ══════════════════════════════════════════════════════════
   INTRO / STATEMENT
   ══════════════════════════════════════════════════════════ */
.intro{ position:relative; padding:clamp(110px,17vw,240px) 0; overflow:hidden; }
.intro__float{ position:absolute; z-index:0; pointer-events:none; opacity:.75; }
.intro__float{ top:10%; right:6%; }
.intro__float--2{ top:auto; bottom:12%; right:auto; left:4%; opacity:.5; }

.statement{
  font-size:clamp(34px,6.6vw,104px);
  font-weight:700; letter-spacing:-.05em; line-height:1.02;
  max-width:19ch;
  position:relative; z-index:2;
}
.statement .word{ opacity:.12; }

.intro__grid{
  position:relative; z-index:2;
  margin-top:clamp(56px,8vw,130px);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,6vw,110px);
  align-items:start;
}
.lead{ font-size:clamp(15px,1.35vw,20px); line-height:1.65; color:var(--ink-2); max-width:52ch; }
.list{ display:grid; gap:0; border-top:1px solid var(--line-soft); }
.list li{
  border-bottom:1px solid var(--line-soft);
  padding:15px 0;
  font-size:clamp(13px,1.05vw,15px); font-weight:500; letter-spacing:.04em;
  color:var(--ink-2);
  overflow:hidden;
  transition:color .4s var(--ease), padding-left .5s var(--ease);
}
.list li span{ display:block; }
.list li:hover{ color:var(--ink); padding-left:14px; }

/* floating CSS-3D objects */
.obj{ position:relative; display:block; transform-style:preserve-3d; }

.obj--ring{
  width:clamp(120px,16vw,230px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 0 60px var(--glow-soft), 0 0 70px var(--glow-soft);
  animation:spinY 22s linear infinite;
}
.obj--ring::before, .obj--ring::after{
  content:""; position:absolute; inset:14%; border-radius:50%;
  border:1px solid rgba(var(--accent),.35);
  transform:rotateX(68deg);
}
.obj--ring::after{ inset:28%; transform:rotateY(68deg); border-color:rgba(255,255,255,.12); }
@keyframes spinY{ to{ transform:rotateY(360deg) } }

/* --cs drives both the box and the face offsets, so size variants stay square */
.obj--cube{
  --cs:clamp(70px,8vw,110px);
  width:var(--cs); aspect-ratio:1;
  animation:spin3d 26s linear infinite;
}
.obj--cube.obj--lg{ --cs:clamp(46px,4.2vw,60px); }
.obj--cube i{
  position:absolute; inset:0;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(140deg, rgba(var(--accent),.14), rgba(255,255,255,.02));
  backdrop-filter:blur(2px);
}
.obj--cube i:nth-child(1){ transform:translateZ(calc(var(--cs) / 2)); }
.obj--cube i:nth-child(2){ transform:rotateY(180deg) translateZ(calc(var(--cs) / 2)); }
.obj--cube i:nth-child(3){ transform:rotateY(90deg)  translateZ(calc(var(--cs) / 2)); }
.obj--cube i:nth-child(4){ transform:rotateY(-90deg) translateZ(calc(var(--cs) / 2)); }
.obj--cube i:nth-child(5){ transform:rotateX(90deg)  translateZ(calc(var(--cs) / 2)); }
.obj--cube i:nth-child(6){ transform:rotateX(-90deg) translateZ(calc(var(--cs) / 2)); }
@keyframes spin3d{ from{ transform:rotateX(-22deg) rotateY(0) } to{ transform:rotateX(-22deg) rotateY(360deg) } }

.obj--sphere{
  width:100%; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0%, rgba(var(--accent-soft),.5) 14%, transparent 42%),
    radial-gradient(circle at 68% 78%, rgba(var(--accent),.6) 0%, transparent 55%),
    linear-gradient(160deg,#1c1810,#0a0805 70%);
  box-shadow:
    inset -14px -18px 44px rgba(0,0,0,.8),
    inset 8px 10px 28px rgba(var(--accent),.16),
    0 26px 60px rgba(0,0,0,.6),
    0 0 80px var(--glow-soft);
  animation:bob 7s var(--ease-io) infinite;
}
.obj--sphere i{
  position:absolute; inset:-14%; border-radius:50%;
  border:1px solid rgba(var(--accent),.24);
}
.obj--sphere i:nth-child(1){ transform:rotateX(74deg); animation:spinZ 14s linear infinite; }
.obj--sphere i:nth-child(2){ inset:-26%; transform:rotateX(66deg) rotateY(40deg); animation:spinZ 21s linear infinite reverse; border-color:rgba(255,255,255,.1); }
.obj--sphere i:nth-child(3){ inset:-6%; transform:rotateY(72deg); animation:spinZ 17s linear infinite; border-color:rgba(255,255,255,.08); }
@keyframes spinZ{ to{ transform:rotate(360deg) } }
@keyframes bob{ 0%,100%{ transform:translateY(-5px) } 50%{ transform:translateY(5px) } }

.obj--lens{ width:100%; aspect-ratio:1; border-radius:50%; animation:bob 8s var(--ease-io) infinite; }
.obj--lens i{ position:absolute; border-radius:50%; }
.obj--lens i:nth-child(1){ inset:0;   background:conic-gradient(from 210deg,#181510,#2a251b,#121009,#2e2820,#181510); box-shadow:0 20px 50px rgba(0,0,0,.7); }
.obj--lens i:nth-child(2){ inset:14%; background:radial-gradient(circle at 34% 30%, rgba(var(--accent-soft),.9), rgba(125,92,30,.55) 40%, #080704 78%); box-shadow:inset 0 0 30px rgba(0,0,0,.9); }
.obj--lens i:nth-child(3){ inset:36%; background:radial-gradient(circle at 40% 34%, #fff, var(--v) 45%, #0a0805 90%); box-shadow:0 0 34px var(--glow); }
.obj--lens i:nth-child(4){ inset:6%; border:1px solid rgba(255,255,255,.14); animation:spinZ 20s linear infinite; }
.obj--lens i:nth-child(4)::after{ content:""; position:absolute; top:-2px; left:50%; width:3px; height:3px; border-radius:50%; background:var(--v-soft); box-shadow:0 0 12px var(--v); }

.obj--kinetic{ width:100%; aspect-ratio:1; animation:bob 6.4s var(--ease-io) infinite; }
.obj--kinetic i{
  position:absolute; inset:18% 6%;
  border:1px solid rgba(255,255,255,.2); border-radius:100px;
  background:linear-gradient(120deg, rgba(var(--accent),.16), transparent);
}
.obj--kinetic i:nth-child(1){ transform:rotate(0deg);   animation:spinZ 9s linear infinite; }
.obj--kinetic i:nth-child(2){ transform:rotate(60deg);  animation:spinZ 13s linear infinite reverse; border-color:rgba(var(--accent),.4); }
.obj--kinetic i:nth-child(3){ transform:rotate(120deg); animation:spinZ 17s linear infinite; border-color:rgba(255,255,255,.1); }

.obj--bloom{ width:100%; aspect-ratio:1; display:grid; place-items:center; animation:bob 7.6s var(--ease-io) infinite; }
.obj--bloom i{
  position:absolute; width:64%; aspect-ratio:1;
  background:linear-gradient(140deg, var(--v), var(--v-deep));
  border-radius:46% 54% 38% 62% / 55% 42% 58% 45%;
  filter:blur(.4px);
  box-shadow:0 0 70px var(--glow), inset -10px -14px 30px rgba(0,0,0,.55);
  animation:morph 11s var(--ease-io) infinite;
}
.obj--bloom i:nth-child(2){
  width:88%; background:none;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:none; animation:morph 14s var(--ease-io) infinite reverse;
}
@keyframes morph{
  0%,100%{ border-radius:46% 54% 38% 62% / 55% 42% 58% 45%; transform:rotate(0) }
  50%    { border-radius:62% 38% 58% 42% / 40% 60% 40% 60%; transform:rotate(180deg) }
}

.obj--strip{ width:100%; aspect-ratio:1; display:grid; place-items:center; animation:bob 6.8s var(--ease-io) infinite; }
.obj--strip i{
  position:absolute; width:78%; height:16%;
  border:1px solid rgba(255,255,255,.2); border-radius:4px;
  background:linear-gradient(90deg, rgba(var(--accent),.2), rgba(255,255,255,.04));
}
.obj--strip i:nth-child(1){ transform:rotateX(58deg) translateZ(26px) }
.obj--strip i:nth-child(2){ transform:rotateX(58deg) translateZ(8px);  border-color:rgba(var(--accent),.45) }
.obj--strip i:nth-child(3){ transform:rotateX(58deg) translateZ(-10px) }
.obj--strip i:nth-child(4){ transform:rotateX(58deg) translateZ(-28px); opacity:.55 }

.obj--gen{ width:100%; aspect-ratio:1; display:grid; place-items:center; animation:bob 7.2s var(--ease-io) infinite; }
.obj--gen i{
  position:absolute; width:52%; aspect-ratio:1;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(140deg, rgba(var(--accent),.14), transparent);
}
.obj--gen i:nth-child(1){ transform:rotate(0deg)  skew(12deg); animation:spinZ 24s linear infinite }
.obj--gen i:nth-child(2){ transform:rotate(45deg) skew(-8deg); border-color:rgba(var(--accent),.4); animation:spinZ 18s linear infinite reverse }
.obj--gen i:nth-child(3){ width:24%; background:radial-gradient(circle,#fff,var(--v) 60%,transparent); border:0; border-radius:50%; box-shadow:0 0 40px var(--glow) }
.obj--gen i:nth-child(4){ width:76%; border-radius:50%; border-color:rgba(255,255,255,.08); background:none }

/* ══════════════════════════════════════════════════════════
   SELECTED WORK
   ══════════════════════════════════════════════════════════ */
.work{ position:relative; padding:clamp(80px,10vw,150px) 0 clamp(110px,15vw,220px); }

.work__grid{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(40px,7vw,150px) clamp(20px,3vw,48px);
}
.proj{ position:relative; }
/* asymmetric editorial placement */
.proj--a{ grid-column:1 / span 7; }
.proj--b{ grid-column:9 / span 4; margin-top:clamp(60px,12vw,220px); }
.proj--c{ grid-column:2 / span 5; }
.proj--d{ grid-column:7 / span 6; margin-top:clamp(-40px,-6vw,0px); }

.proj__link{ display:block; }
.proj__media{
  position:relative; overflow:hidden;
  border-radius:var(--r-md);
  background:var(--surface);
  transform:rotate(var(--tilt,0deg));
  will-change:transform;
}
.proj--a .proj__media{ aspect-ratio:16/10; --tilt:-1deg; }
.proj--b .proj__media{ aspect-ratio:3/4;  --tilt:1.6deg; }
.proj--c .proj__media{ aspect-ratio:4/5;  --tilt:1deg; }
.proj--d .proj__media{ aspect-ratio:16/9; --tilt:-1.4deg; }

.proj__media::after{   /* inner edge light */
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -80px 90px -60px rgba(0,0,0,.9);
}
.proj__veil{
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, rgba(6,6,9,.42) 0%, rgba(6,6,9,.18) 45%, rgba(6,6,9,.82) 100%);
  opacity:1; transition:opacity .7s var(--ease);
}
.proj__link:hover .proj__veil{ opacity:.4; }

/* transform + filter here are driven by GSAP (see initWork / initMagnetics) so
   that the scroll reveal and the hover push don't fight over the same props */
.proj__media .art{
  position:absolute; inset:0; z-index:1;
  transform:scale(1.02);
  filter:saturate(.95);
  will-change:transform, filter;
}

.proj__meta{ margin-top:clamp(18px,2vw,30px); position:relative; }
.proj__num{
  position:absolute; top:-2px; left:0;
  font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--v-soft);
}
.proj__title{
  padding-left:44px;
  font-size:clamp(20px,2.5vw,40px); font-weight:800; letter-spacing:-.04em; line-height:1.05;
  overflow:hidden;
}
.proj__title span{ display:block; transition:transform .6s var(--ease); }
.proj:hover .proj__title span{ transform:translateX(14px); }
.proj__cat{
  padding-left:44px; margin-top:8px;
  font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--ink-3);
}
.proj__cat b{ color:var(--v-soft); font-weight:400; margin-inline:4px; }
.proj__desc{
  padding-left:44px; margin-top:16px; max-width:42ch;
  font-size:clamp(13px,1vw,15px); color:var(--ink-2); line-height:1.6;
}

/* ── GENERATIVE "FILM STILL" ART ──────────────────────────── */
/* ── GENERATIVE "FILM STILL"
   The colour blobs are treated as LIGHT SOURCES on a near-black plate
   (screen blend + heavy vignette + scanlines), not as a gradient fill —
   that's the difference between a film frame and a cheap mesh gradient. */
.art{ position:relative; width:100%; height:100%; overflow:hidden; background:#050507; }
.art i{
  position:absolute; display:block; border-radius:50%;
  mix-blend-mode:screen; opacity:.5;
}
.art::before{  /* deep vignette — pulls all the energy to the centre */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(78% 68% at 50% 46%, transparent 12%, rgba(3,3,5,.62) 72%, rgba(3,3,5,.94) 100%),
    linear-gradient(180deg, rgba(3,3,5,.5) 0%, transparent 26%, transparent 62%, rgba(3,3,5,.72) 100%);
}
.art::after{  /* scanline / halation texture */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.75;
}
.art i:nth-child(1){ inset:-24% -6% 24% -24%; filter:blur(42px); animation:drift 19s var(--ease-io) infinite alternate; }
.art i:nth-child(2){ inset:26% -20% -24% 32%; filter:blur(52px); animation:drift 25s var(--ease-io) infinite alternate-reverse; }
.art i:nth-child(3){ inset:34% 34% 30% 30%;   filter:blur(26px); opacity:.62; animation:drift 15s var(--ease-io) infinite alternate; }
@keyframes drift{ from{ transform:translate3d(-6%,-4%,0) scale(1) } to{ transform:translate3d(8%,6%,0) scale(1.2) } }

/* the 4th layer is hard-edged structure — flares, speed lines, rim geometry.
   Blurred colour alone reads as a mesh gradient; structure is what makes the
   eye accept it as a frame from a film. */
.art i:nth-child(4){
  inset:0; z-index:4; border-radius:0;
  opacity:.9; filter:none; animation:none;
  mix-blend-mode:screen;
}

/* palettes — each project is lit like a different film */
/* Four frames, one palette. They separate by TEMPERATURE and STRUCTURE inside
   the gold family — bronze / amber / steel-and-flash / deep ember — never by
   introducing a second hue. That restraint is what keeps black+gold expensive. */

/* 01 automotive — night street: sodium practicals, anamorphic streak,
   headlight beams converging toward the horizon */
.art--1{ background:linear-gradient(165deg,#0d0a05,#030302 68%); }
.art--1 i:nth-child(1){ background:#6b4d18 } .art--1 i:nth-child(2){ background:#a87c22 } .art--1 i:nth-child(3){ background:#f4dfae }
.art--1 i:nth-child(4){
  background:
    linear-gradient(90deg,transparent 3%,rgba(255,231,178,.55) 50%,transparent 97%) 0 45%/100% 1px no-repeat,
    linear-gradient(90deg,transparent 20%,rgba(230,190,110,.14) 50%,transparent 80%) 0 45%/100% 16px no-repeat,
    conic-gradient(from 196deg at 50% 128%, transparent 0deg, rgba(235,195,115,.11) 12deg, transparent 24deg),
    linear-gradient(180deg,transparent 70%,rgba(210,170,95,.07) 70.3%,transparent 71%);
}

/* 02 luxury & perfume — warm amber bounce, a vertical column of light
   standing where the bottle would be */
.art--2{ background:linear-gradient(200deg,#100b04,#040302 72%); }
.art--2 i:nth-child(1){ background:#8a6420 } .art--2 i:nth-child(2){ background:#c08f2c } .art--2 i:nth-child(3){ background:#ffeac1 }
.art--2 i:nth-child(4){
  background:
    linear-gradient(180deg,transparent 12%,rgba(255,226,178,.46) 50%,transparent 90%) 50% 0/1px 100% no-repeat,
    linear-gradient(180deg,transparent 12%,rgba(240,205,145,.11) 50%,transparent 90%) 50% 0/26px 100% no-repeat,
    radial-gradient(circle at 50% 34%, rgba(255,240,210,.32) 0%, transparent 9%);
}

/* 03 action & combat — neutral steel body with a hard specular flash;
   gold only spills in from frame edge. Greyscale is the contrast, not a hue. */
.art--3{ background:linear-gradient(140deg,#0c0b09,#030303 66%); }
.art--3 i:nth-child(1){ background:#57544c } .art--3 i:nth-child(2){ background:#8f6a1e } .art--3 i:nth-child(3){ background:#fff6e2 }
.art--3 i:nth-child(4){
  background:
    repeating-linear-gradient(56deg, transparent 0 30px, rgba(255,246,226,.11) 30px 31px, transparent 31px 74px),
    linear-gradient(56deg, transparent 34%, rgba(255,250,238,.17) 50%, transparent 66%);
}

/* 04 social — deep ember, vertical 9:16 safe-frame rails */
.art--4{ background:linear-gradient(180deg,#0b0803,#030202 70%); }
.art--4 i:nth-child(1){ background:#4a3a12 } .art--4 i:nth-child(2){ background:#96701f } .art--4 i:nth-child(3){ background:#f7dc9e }
.art--4 i:nth-child(4){
  background:
    linear-gradient(90deg,transparent calc(50% - 62px),rgba(232,196,120,.28) calc(50% - 62px) calc(50% - 61px),transparent calc(50% - 61px)),
    linear-gradient(90deg,transparent calc(50% + 61px),rgba(232,196,120,.28) calc(50% + 61px) calc(50% + 62px),transparent calc(50% + 62px)),
    radial-gradient(circle at 50% 46%, transparent 24%, rgba(240,212,150,.26) 24.4%, transparent 25.2%);
}

/* ══════════════════════════════════════════════════════════
   SKILLS / ICONS
   ══════════════════════════════════════════════════════════ */
.skills{ padding:clamp(90px,13vw,190px) 0; position:relative; overflow:hidden; }
.skills::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(900px,90vw); height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
/* violet spotlight that chases the hovered card */
.skills__spot{
  position:absolute; z-index:0; pointer-events:none;
  top:0; left:0; width:520px; aspect-ratio:1;
  margin:-260px 0 0 -260px;
  background:radial-gradient(circle, var(--glow-soft) 0%, transparent 62%);
  opacity:0; filter:blur(10px);
  will-change:transform, opacity;
}
/* 12-column bed so seven cards resolve to a clean 4 + 3 instead of
   leaving an orphan on its own row */
.icons{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,26px);
  perspective:1200px;
}
.icon:nth-child(-n+4){ grid-column:span 3; }
.icon:nth-child(n+5){ grid-column:span 4; }
.icon{
  position:relative; overflow:hidden;
  text-align:center; padding:clamp(26px,2.6vw,42px) 16px clamp(24px,2.4vw,36px);
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent 60%);
  transition:border-color .6s var(--ease), background-color .6s var(--ease),
             box-shadow .6s var(--ease), opacity .5s var(--ease);
  transform-style:preserve-3d;   /* transform itself is GSAP's (data-tilt + float) */
  will-change:transform;
}
/* focus the one you're pointing at, recede the rest */
@media (hover:hover) and (pointer:fine){
  .icons:hover .icon{ opacity:.42; }
  .icons:hover .icon:hover{ opacity:1; }
}
.icon:hover{
  border-color:rgba(var(--accent),.45);
  background-color:rgba(var(--accent),.05);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 0 50px -20px var(--glow);
}
/* sweeping sheen on hover */
.icon__glow{
  position:absolute; inset:-40% -120%;
  background:linear-gradient(100deg, transparent 38%, rgba(var(--accent-soft),.16) 50%, transparent 62%);
  transform:translateX(-60%); opacity:0;
  transition:transform 1.1s var(--ease), opacity .5s var(--ease);
  pointer-events:none;
}
.icon:hover .icon__glow{ transform:translateX(60%); opacity:1; }

.icon__n{
  position:absolute; top:14px; left:16px;
  font-size:9px; font-weight:700; letter-spacing:.18em;
  color:var(--ink-4);
  transition:color .5s var(--ease);
  transform:translateZ(10px);
}
.icon:hover .icon__n{ color:var(--v-soft); }

.icon__obj{
  width:clamp(74px,7vw,104px); aspect-ratio:1; margin:0 auto clamp(20px,2.4vw,32px);
  display:grid; place-items:center;
  transform:translateZ(46px);
  transition:transform .7s var(--ease);
}
.icon:hover .icon__obj{ transform:translateZ(62px) scale(1.09) rotate(-3deg); }
.icon h3{
  font-size:12px; font-weight:800; letter-spacing:.18em;
  transform:translateZ(24px);
  position:relative; display:inline-block;
}
.icon h3::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--v-soft);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .6s var(--ease);
}
.icon:hover h3::after{ transform:scaleX(1); }
.icon p{ margin-top:9px; font-size:11px; letter-spacing:.06em; color:var(--ink-3); transform:translateZ(14px); }

/* ══════════════════════════════════════════════════════════
   SERVICES (horizontal)
   ══════════════════════════════════════════════════════════ */
.services{ position:relative; background:var(--bg-2); border-block:1px solid var(--line-soft); }
.services__sticky{ height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.services__head{
  padding:clamp(28px,5vw,60px) var(--pad) 0;
  width:100%; max-width:var(--maxw); margin-inline:auto;
}
.services__title{
  font-size:clamp(34px,6.4vw,96px); font-weight:800; letter-spacing:-.055em; line-height:.95;
}
.services__prog{ margin-top:26px; height:1px; background:var(--line); overflow:hidden; }
.services__prog i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--v-deep),var(--v-soft));
  transform:scaleX(0); transform-origin:0 50%;
}
.services__track{
  display:flex; align-items:stretch; gap:clamp(20px,2.4vw,40px);
  padding:clamp(34px,5vw,70px) var(--pad);
  will-change:transform;
}
.svc{
  flex:0 0 clamp(280px,30vw,440px);
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,42px);
  background:linear-gradient(170deg, rgba(255,255,255,.03), rgba(255,255,255,0) 60%);
  display:flex; flex-direction:column;
  /* no transform here — GSAP scrubs scale/blur on these cards */
  transition:border-color .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.svc:hover{
  border-color:rgba(var(--accent),.4);
  background-color:rgba(var(--accent),.05);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95), inset 0 0 60px -30px var(--glow);
}
.svc__obj{
  width:clamp(80px,7vw,116px); aspect-ratio:1; margin-bottom:auto;
  display:grid; place-items:center;
}
.svc__num{ display:block; margin-top:clamp(30px,4vw,56px); font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--v-soft); }
.svc h3{ margin-top:12px; font-size:clamp(22px,2.2vw,34px); font-weight:800; letter-spacing:-.04em; line-height:1.05; }
.svc p{ margin-top:14px; font-size:clamp(13px,1vw,15px); color:var(--ink-2); line-height:1.6; max-width:34ch; }

.svc--end{
  flex:0 0 clamp(240px,22vw,340px);
  display:grid; place-items:center; background:none; border-style:dashed;
}
.svc__cta{
  display:inline-flex; align-items:center; gap:14px;
  font-size:12px; font-weight:800; letter-spacing:.16em;
}
.svc__cta i{ font-style:normal; transition:transform .5s var(--ease); }
.svc__cta:hover i{ transform:translateX(8px); }

/* ══════════════════════════════════════════════════════════
   PROCESS
   ══════════════════════════════════════════════════════════ */
.process{ padding:clamp(100px,14vw,200px) 0; }
.steps{ position:relative; display:grid; gap:0; padding-left:clamp(46px,6vw,110px); }
.steps__rail{
  position:absolute; left:clamp(14px,2vw,34px); top:6px; bottom:6px;
  width:1px; background:var(--line);
}
.steps__rail b{
  position:absolute; inset:0; display:block;
  background:linear-gradient(180deg,var(--v),var(--v-soft));
  transform:scaleY(0); transform-origin:50% 0;
  box-shadow:0 0 22px var(--glow);
}
.step{
  position:relative;
  padding:clamp(26px,3.4vw,52px) 0;
  border-bottom:1px solid var(--line-soft);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(16px,3vw,60px);
  align-items:baseline;
  transition:opacity .8s var(--ease), filter .8s var(--ease);
}
/* dimming only kicks in once JS is driving the timeline */
body.motion .step{ opacity:.28; filter:blur(1px); }
body.motion .step.is-on{ opacity:1; filter:blur(0); }
.step__n{
  position:absolute; left:calc(-1 * clamp(46px,6vw,110px)); top:calc(clamp(26px,3.4vw,52px) + 4px);
  font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--ink-3);
  padding-left:clamp(26px,3.4vw,52px);
}
.step__dot{
  position:absolute; left:calc(-1 * clamp(46px,6vw,110px) + clamp(14px,2vw,34px));
  top:calc(clamp(26px,3.4vw,52px) + 10px);
  width:7px; height:7px; border-radius:50%;
  background:var(--bg); border:1px solid var(--ink-4);
  transform:translateX(-50%) scale(.7);
  transition:background-color .6s var(--ease), border-color .6s, transform .6s var(--ease), box-shadow .6s;
}
.step.is-on .step__dot{ background:var(--v); border-color:var(--v); transform:translateX(-50%) scale(1); box-shadow:0 0 20px var(--glow); }
.step h3{ font-size:clamp(26px,4vw,64px); font-weight:800; letter-spacing:-.05em; line-height:1; }
.step p{ font-size:clamp(13px,1.05vw,16px); color:var(--ink-2); line-height:1.6; max-width:44ch; }

/* ══════════════════════════════════════════════════════════
   CINEMATIC FILM
   ══════════════════════════════════════════════════════════ */
.film{ height:260svh; position:relative; }
.film__sticky{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center; overflow:hidden;
}
.film__frame{
  position:relative; overflow:hidden;
  width:62vw; height:62svh;
  border-radius:var(--r-xl);
  background:#080704;
  box-shadow:0 60px 140px rgba(0,0,0,.7);
  will-change:width,height,border-radius;
}
.film__canvas, .film__fallback, .film video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* CSS stand-in used wherever the WebGL film shader isn't running (mobile, no-WebGL) */
.film__frame.has-shader .film__fallback{ display:none; }
.film__fallback{
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(var(--accent),.5), transparent 60%),
    radial-gradient(50% 60% at 75% 70%, rgba(160,120,40,.5), transparent 62%),
    linear-gradient(160deg,#100c05,#050508);
  animation:drift 18s var(--ease-io) infinite alternate;
}
.film__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,5,8,.35), rgba(5,5,8,.72));
}
.film__copy{
  position:absolute; inset:0; z-index:3;
  display:grid; place-content:center; text-align:center;
  padding:24px;
}
.film__title{
  font-size:clamp(34px,7.6vw,132px); font-weight:800; letter-spacing:-.06em; line-height:.9;
}
.film__note{ margin-top:22px; font-size:10px; font-weight:600; letter-spacing:.3em; color:var(--ink-3); }
.film__play{
  position:absolute; z-index:4; right:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,40px);
  width:clamp(74px,7vw,104px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:10px; font-weight:800; letter-spacing:.2em;
  transition:background-color .5s var(--ease), border-color .5s, transform .5s var(--ease);
}
.film__play:hover{ background:var(--v); border-color:transparent; transform:scale(1.06); }

/* ══════════════════════════════════════════════════════════
   MARQUEE
   ══════════════════════════════════════════════════════════ */
.marquee{
  padding:clamp(40px,6vw,90px) 0;
  border-block:1px solid var(--line-soft);
  overflow:hidden; background:var(--bg-2);
}
.marquee__row{ display:flex; width:max-content; will-change:transform; }
.marquee__set{ display:flex; align-items:center; gap:.5em; padding-right:.5em; }
.marquee__set span{
  font-size:clamp(38px,9vw,150px); font-weight:800; letter-spacing:-.055em; line-height:1;
  white-space:nowrap;
}
.marquee__set b{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(30px,7vw,120px); color:var(--v-soft); padding-inline:.18em;
}

/* ══════════════════════════════════════════════════════════
   ABOUT ME
   ══════════════════════════════════════════════════════════ */
.bio{ padding:clamp(100px,14vw,200px) 0; }
.bio__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,110px); align-items:start; }

.portrait{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/5; background:var(--surface);
  border:1px solid var(--line-soft);
}
/* same rationed-light treatment as the project stills: a dark plate with a
   single key, so it reads as an unlit portrait rather than a purple gradient */
.portrait__art{
  position:absolute; inset:0;
  background:linear-gradient(170deg,#0d0a05,#050403 72%);
}
.portrait__art i{ position:absolute; border-radius:50%; mix-blend-mode:screen; opacity:.42; }
.portrait__art i:nth-child(1){ inset:-16% 18% 44% -16%; background:#7a5a1c; filter:blur(56px); animation:drift 21s var(--ease-io) infinite alternate }
.portrait__art i:nth-child(2){ inset:44% -16% -18% 26%; background:#b0842a; filter:blur(64px); animation:drift 27s var(--ease-io) infinite alternate-reverse }
.portrait__art i:nth-child(3){ inset:24% 32% 40% 30%; background:#f5e4bd; filter:blur(40px); opacity:.30; animation:drift 17s var(--ease-io) infinite alternate }
.portrait__art::after{   /* vignette + shoulder-line silhouette hint */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 44% at 50% 34%, transparent 30%, rgba(4,4,7,.55) 82%),
    radial-gradient(90% 52% at 50% 112%, rgba(4,4,7,.9) 40%, transparent 72%),
    linear-gradient(180deg, rgba(4,4,7,.6) 0%, transparent 30%);
}
.portrait::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.portrait__tag{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.2em; color:rgba(255,255,255,.7);
}

.bio__block{ padding:clamp(22px,2.4vw,34px) 0; border-bottom:1px solid var(--line-soft); }
.bio__block:first-child{ padding-top:0; }
.bio__block h4{ font-size:10px; font-weight:700; letter-spacing:.24em; color:var(--v-soft); margin-bottom:14px; }
.bio__block p{ font-size:clamp(14px,1.2vw,18px); line-height:1.65; color:var(--ink-2); max-width:52ch; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,32px); margin-top:clamp(36px,4vw,60px); }
.stat__n{
  display:block;
  font-size:clamp(38px,4.6vw,76px); font-weight:800; letter-spacing:-.05em; line-height:1;
  background:linear-gradient(180deg,#fff,rgba(var(--accent-soft),.75));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat p{ margin-top:10px; font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--ink-3); }

/* ══════════════════════════════════════════════════════════
   TOOLS ORBIT
   ══════════════════════════════════════════════════════════ */
.tools{ padding:clamp(90px,12vw,180px) 0 clamp(110px,15vw,220px); overflow:hidden; }
.orbit{
  position:relative; width:100%; aspect-ratio:1/.72;
  max-height:78svh; margin-top:clamp(20px,4vw,60px);
  display:grid; place-items:center;
}
.orbit__core{ width:clamp(90px,9vw,150px); aspect-ratio:1; z-index:2; }
.obj--core{ animation:bob 9s var(--ease-io) infinite; }
.orbit__ring{
  position:absolute; border-radius:50%;
  border:1px solid var(--line-soft);
  transform:rotateX(72deg);
}
.orbit__ring--1{ width:min(38vw,520px); aspect-ratio:1; }
.orbit__ring--2{ width:min(58vw,780px); aspect-ratio:1; border-color:rgba(var(--accent),.12); }
.orbit__ring--3{ width:min(78vw,1040px); aspect-ratio:1; }
.orbit__items{ position:absolute; inset:0; }
.orbit__items li{
  position:absolute; top:50%; left:50%;
  will-change:transform;
}
.orbit__items span{
  display:block; transform:translate(-50%,-50%);
  padding:11px 20px; border-radius:100px;
  border:1px solid var(--line);
  background:rgba(16,16,19,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:clamp(11px,1vw,14px); font-weight:600; letter-spacing:.04em;
  white-space:nowrap; color:var(--ink-2);
  transition:color .45s var(--ease), border-color .45s, background-color .45s, box-shadow .45s;
}
.orbit__items li:hover span{
  color:#fff; border-color:var(--v);
  background:rgba(var(--accent),.16);
  box-shadow:0 0 40px var(--glow);
}

/* ══════════════════════════════════════════════════════════
   CONTACT / FOOTER
   ══════════════════════════════════════════════════════════ */
.contact{
  position:relative; overflow:hidden;
  padding:clamp(110px,16vw,230px) 0 clamp(28px,4vw,48px);
  border-top:1px solid var(--line-soft);
}
.contact__glow{
  position:absolute; left:50%; bottom:-40%; transform:translateX(-50%);
  width:min(1200px,140vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(var(--accent),.16) 0%, transparent 60%);
  filter:blur(30px); pointer-events:none;
}
.contact__title{
  position:relative; z-index:2;
  font-size:clamp(38px,9vw,158px); font-weight:800; letter-spacing:-.06em; line-height:.9;
}
.contact__title span{ display:block; }

.cta{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:18px;
  margin-top:clamp(40px,5vw,72px);
  padding:22px 40px 22px 34px; border-radius:100px;
  border:1px solid rgba(255,255,255,.16);
  font-size:13px; font-weight:800; letter-spacing:.16em;
  overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s;
}
.cta__ring{
  position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(120deg,var(--v-deep),var(--v));
  transform:scale(0); transform-origin:50% 50%;
  transition:transform .7s var(--ease);
}
.cta:hover{ border-color:transparent; color:#fff; }
.cta:hover .cta__ring{ transform:scale(1.1); }
.cta__arrow{ transition:transform .55s var(--ease); }
.cta:hover .cta__arrow{ transform:translateX(8px); }

.socials{
  position:relative; z-index:2;
  margin-top:clamp(60px,9vw,130px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:1px solid var(--line-soft);
}
.socials a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:22px 0; border-bottom:1px solid var(--line-soft);
  font-size:clamp(14px,1.4vw,20px); font-weight:600; letter-spacing:-.01em;
  color:var(--ink-2);
  transition:color .4s var(--ease), padding-left .5s var(--ease);
}
.socials li + li a{ padding-left:0; }
.socials a i{ font-style:normal; font-size:14px; color:var(--ink-4); transition:transform .5s var(--ease), color .4s; }
.socials a:hover{ color:var(--ink); padding-left:12px; }
.socials a:hover i{ transform:translate(4px,-4px); color:var(--v-soft); }

.foot{
  position:relative; z-index:2;
  margin-top:clamp(40px,6vw,80px); padding-top:22px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  font-size:10px; font-weight:600; letter-spacing:.2em; color:var(--ink-3);
}
.foot a:hover{ color:var(--ink); }
.foot__credit{ color:var(--ink-4); }
.foot__credit a{ color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; }
.foot__credit a:hover{ color:var(--v-soft); }

/* ══════════════════════════════════════════════════════════
   PROJECT DETAIL OVERLAY
   ══════════════════════════════════════════════════════════ */
.detail{
  position:fixed; inset:0; z-index:9200;
  background:var(--bg);
  opacity:0; visibility:hidden;
}
.detail.is-open{ visibility:visible; }
.detail__scroll{ height:100%; overflow-y:auto; overscroll-behavior:contain; }
.detail__hero{ height:66svh; padding:var(--pad); padding-top:100px; }
.detail__art{ height:100%; border-radius:var(--r-lg); overflow:hidden; }
.detail__art .art{ height:100%; }
.detail__body{ padding-block:clamp(40px,6vw,90px) clamp(60px,10vw,140px); }
.detail__num{ font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--v-soft); }
.detail__title{ margin-top:14px; font-size:clamp(34px,7vw,110px); font-weight:800; letter-spacing:-.055em; line-height:.95; }
.detail__cat{ margin-top:16px; font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--ink-3); }
.detail__desc{ margin-top:clamp(24px,3vw,44px); max-width:58ch; font-size:clamp(15px,1.35vw,21px); line-height:1.65; color:var(--ink-2); }
.detail__specs{
  margin-top:clamp(36px,5vw,70px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden;
}
.detail__specs div{ background:var(--bg); padding:22px 20px; }
.detail__specs dt{ font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--ink-3); }
.detail__specs dd{ margin-top:8px; font-size:15px; font-weight:600; }
.detail__close{
  position:fixed; top:22px; right:var(--pad); z-index:2;
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line); background:rgba(16,16,19,.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center;
  transition:background-color .4s, border-color .4s, transform .4s var(--ease);
}
.detail__close i{ position:absolute; width:15px; height:1px; background:var(--ink); }
.detail__close i:first-child{ transform:rotate(45deg) } .detail__close i:last-child{ transform:rotate(-45deg) }
.detail__close:hover{ background:var(--v); border-color:transparent; transform:rotate(90deg); }

/* ══════════════════════════════════════════════════════════
   3D ICONS  (Icons8 "3D Fluency", stored locally in media/icons)

   They ship multi-coloured, so they're driven through a filter chain to land
   in the site's gold: strip the hue → re-tint warm → push saturation → nudge
   to the exact gold angle. grayscale first is what makes the result
   consistent regardless of each icon's original colour, and because it's a
   filter (not a mask) the sculpted 3D shading survives intact.
   ══════════════════════════════════════════════════════════ */
.i3d{
  width:100%; height:100%;
  object-fit:contain;
  filter:
    grayscale(1) contrast(1.14) brightness(.92)
    sepia(1) saturate(2.15) hue-rotate(-7deg) brightness(1.02)
    drop-shadow(0 10px 18px rgba(0,0,0,.6))
    drop-shadow(0 0 26px rgba(var(--accent),.22));
  /* transform is GSAP's (the float in initSkills) — a CSS transition on it
     would fight the tween every frame */
  transition:filter .6s var(--ease);
  will-change:transform, filter;
}
.icon:hover .i3d, .svc:hover .i3d{
  filter:
    grayscale(1) contrast(1.16) brightness(1.0)
    sepia(1) saturate(2.55) hue-rotate(-7deg) brightness(1.12)
    drop-shadow(0 14px 26px rgba(0,0,0,.62))
    drop-shadow(0 0 38px rgba(var(--accent),.42));
}

/* ══════════════════════════════════════════════════════════
   COMMERCIAL COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* — live availability dot in the hero eyebrow — */
.dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#cfa24d; margin-right:9px; vertical-align:middle;
  box-shadow:0 0 0 3px rgba(var(--accent),.14), 0 0 14px rgba(var(--accent),.7);
  animation:pulse 2.6s var(--ease-io) infinite;
}

/* — hero trust bar — */
.trustbar{
  display:grid; grid-template-columns:repeat(4,auto); gap:clamp(20px,4vw,64px);
  align-items:end;
}
.trustbar li{ display:flex; flex-direction:column; gap:5px; }
.trustbar b{
  font-size:clamp(19px,2.1vw,30px); font-weight:800; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(180deg,#fff,rgba(var(--accent-soft),.78));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.trustbar span{ font-size:9px; font-weight:600; letter-spacing:.16em; color:var(--ink-3); }
.verified{ display:inline-flex; align-items:center; gap:7px; }
.verified i{
  display:grid; place-items:center;
  width:16px; height:16px; border-radius:50%;
  background:var(--v); color:#fff;
  font-size:9px; font-style:normal;
  -webkit-text-fill-color:#fff;
  box-shadow:0 0 16px var(--glow);
}

/* — inline text link with arrow — */
.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(22px,2.6vw,34px);
  font-size:13px; font-weight:700; letter-spacing:.04em;
  padding-bottom:4px;
  background-image:linear-gradient(var(--v-soft),var(--v-soft));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .55s var(--ease), color .4s var(--ease);
}
.link-arrow i{ font-style:normal; color:var(--v-soft); transition:transform .5s var(--ease); }
.link-arrow:hover{ background-size:100% 1px; }
.link-arrow:hover i{ transform:translateX(7px); }

/* — brands strip — */
.brands{
  padding:clamp(30px,4vw,52px) 0;
  border-block:1px solid var(--line-soft);
  background:var(--bg-2); overflow:hidden;
}
.brands__label{
  text-align:center; margin-bottom:clamp(20px,2.6vw,34px);
  font-size:10px; font-weight:600; letter-spacing:.24em; color:var(--ink-3);
  overflow:hidden;
}
.brands__row{ display:flex; width:max-content; will-change:transform; }
.brands__set{ display:flex; align-items:center; }
.brands__set span{
  font-size:clamp(20px,3.2vw,44px); font-weight:800; letter-spacing:-.03em;
  color:var(--ink-4); white-space:nowrap;
  transition:color .5s var(--ease);
}
.brands__set:hover span{ color:var(--ink-2); }
.brands__set i{
  display:block; width:5px; height:5px; border-radius:50%;
  background:var(--v); margin-inline:clamp(22px,3.4vw,54px); opacity:.6;
}

/* — why work with me — */
.trust{ padding:clamp(90px,13vw,180px) 0; }
.whys{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden;
}
.why{
  background:var(--bg);
  padding:clamp(28px,3vw,48px) clamp(22px,2.4vw,40px);
  transition:background-color .6s var(--ease);
}
.why:hover{ background:var(--surface); }
.why__n{
  display:block; font-size:10px; font-weight:700; letter-spacing:.2em;
  color:var(--v-soft); margin-bottom:clamp(26px,3vw,48px);
}
.why h3{
  font-size:clamp(17px,1.5vw,23px); font-weight:700; letter-spacing:-.025em; line-height:1.2;
  display:flex; align-items:baseline; gap:10px;
}
.why h3::before{
  content:"✓"; flex:0 0 auto;
  font-size:12px; color:var(--v-soft);
}
.why p{ margin-top:12px; font-size:clamp(13px,1vw,15px); line-height:1.6; color:var(--ink-2); }

/* — contact block — */
.contact__note{
  position:relative; z-index:2;
  margin-top:clamp(24px,3vw,40px); max-width:48ch;
  font-size:clamp(14px,1.25vw,19px); line-height:1.6; color:var(--ink-2);
}
.contact__actions{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,42px);
}
.contact__phone{
  margin-top:clamp(40px,5vw,72px);
  font-size:clamp(15px,1.5vw,21px); font-weight:700; letter-spacing:-.01em;
  color:var(--ink-2);
  padding-bottom:5px;
  background-image:linear-gradient(var(--v-soft),var(--v-soft));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .55s var(--ease), color .4s var(--ease);
}
.contact__phone:hover{ color:var(--ink); background-size:100% 1px; }

/* — mobile menu CTA — */
.menu__cta{
  display:none; align-items:center; justify-content:space-between;
  margin-top:clamp(30px,6vw,48px);
  padding:20px 26px; border-radius:100px;
  background:linear-gradient(120deg,var(--v-deep),var(--v));
  font-size:12px; font-weight:800; letter-spacing:.16em;
  box-shadow:0 20px 50px -20px var(--glow);
}
.menu__cta i{ font-style:normal; }

/* — detail CTA — */
.detail__cta{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:clamp(40px,5vw,70px);
  padding:19px 32px; border-radius:100px;
  border:1px solid rgba(255,255,255,.16);
  font-size:12px; font-weight:800; letter-spacing:.14em;
  transition:background-color .5s var(--ease), border-color .5s, color .5s;
}
.detail__cta i{ font-style:normal; transition:transform .5s var(--ease); }
.detail__cta:hover{ background:var(--v); border-color:transparent; color:#fff; }
.detail__cta:hover i{ transform:translateX(7px); }

/* — mobile sticky CTA — */
.mobcta{
  position:fixed; z-index:7800;
  left:12px; right:12px; bottom:12px;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px 15px 22px;
  border-radius:100px;
  background:rgba(16,16,20,.82);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(var(--accent),.35);
  box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 40px -18px var(--glow);
  transform:translateY(160%);
  transition:transform .7s var(--ease);
}
.mobcta.is-in{ transform:translateY(0); }
.mobcta__label{ font-size:13px; font-weight:600; color:var(--ink-2); }
.mobcta__go{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:100px;
  background:linear-gradient(120deg,var(--v-deep),var(--v));
  font-size:11px; font-weight:800; letter-spacing:.12em; color:#fff;
  white-space:nowrap;
}
.mobcta__go i{ font-style:normal; }

/* — loader AI word — */
.loader__word--ai{
  font-family:var(--serif); font-style:italic; font-weight:400;
  background:linear-gradient(180deg,#fff,var(--v-soft));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.nav__logo-text i{
  font-style:normal; color:var(--v-soft);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
/* ── LAPTOP / SMALL DESKTOP ───────────────────────────────── */
@media (max-width:1180px){
  .proj--a{ grid-column:1 / span 8 }
  .proj--b{ grid-column:9 / span 4 }
  .proj--c{ grid-column:1 / span 6 }
  .proj--d{ grid-column:7 / span 6 }
  .whys{ grid-template-columns:1fr 1fr; }
}

/* ── TABLET ───────────────────────────────────────────────── */
@media (max-width:900px){
  :root{ --r-lg:22px; --r-xl:28px; }

  .nav{ padding-block:16px; }
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:grid; }
  .menu__cta{ display:flex; }

  /* the sticky WhatsApp bar takes over as the primary CTA */
  .mobcta{ display:flex; }
  .contact{ padding-bottom:100px; }

  .hero{ padding-top:110px; }
  .hero__foot{ flex-direction:column; align-items:stretch; gap:20px; }
  .hero__scroll{ display:none; }
  .trustbar{ grid-template-columns:1fr 1fr; gap:22px 18px; }

  .intro__grid{ grid-template-columns:1fr; gap:44px; }
  .intro__float{ display:none; }

  .brands__set span{ font-size:clamp(19px,4.6vw,30px); }

  .work__grid{ grid-template-columns:1fr; gap:clamp(56px,12vw,90px); }
  .proj--a,.proj--b,.proj--c,.proj--d{ grid-column:1 / -1; margin-top:0; }
  .proj--a .proj__media,.proj--b .proj__media,
  .proj--c .proj__media,.proj--d .proj__media{ aspect-ratio:4/3; --tilt:0deg; }
  .proj__title,.proj__cat,.proj__desc{ padding-left:0; }
  .proj__num{ position:static; display:block; margin-bottom:10px; }

  .whys{ grid-template-columns:1fr; }
  .why__n{ margin-bottom:18px; }

  /* seven cards → 2 + 2 + 2 + 1 full-width, no orphan gap */
  .icons{ grid-template-columns:repeat(2,1fr); }
  .icon:nth-child(-n+4), .icon:nth-child(n+5){ grid-column:span 1; }
  .icon:nth-child(7){ grid-column:span 2; }

  .step{ grid-template-columns:1fr; gap:12px; }
  .bio__grid{ grid-template-columns:1fr; gap:40px; }
  .stats{ grid-template-columns:1fr; gap:0; border-top:1px solid var(--line-soft); margin-top:32px; }
  .stat{
    display:flex; align-items:baseline; justify-content:space-between; gap:18px;
    padding:18px 0; border-bottom:1px solid var(--line-soft);
  }
  .stat__n{ font-size:clamp(30px,8vw,44px); }
  .stat p{ margin-top:0; text-align:right; }

  .film{ height:200svh; }
  .film__frame{ width:82vw; height:52svh; }
  .film__play{ width:66px; }

  .orbit{ aspect-ratio:1/1; max-height:none; }
  .orbit__items span{ padding:8px 13px; font-size:11px; }

  .contact__actions{ flex-direction:column; align-items:stretch; gap:0; }
  .contact__phone{ margin-top:26px; text-align:center; }
  .cta{ justify-content:center; }

  .socials{ grid-template-columns:1fr 1fr; }
  .foot{ font-size:9px; gap:10px; }

  /* services become a vertical stack instead of a horizontal rail */
  .services__sticky{ height:auto; }
  .services__track{ flex-direction:column; transform:none !important; }
  .svc{ flex:1 1 auto; }
  .services__prog{ display:none; }
}

/* ── PHONE ────────────────────────────────────────────────── */
@media (max-width:640px){
  :root{ --pad:20px; }

  body{ letter-spacing:0; }

  .nav__logo-text{ font-size:12px; }

  .hero{ padding-top:104px; min-height:100svh; }
  .hero__grid{ grid-template-columns:repeat(3,1fr); opacity:.35; }
  .hero__eyebrow{ font-size:10px; letter-spacing:.18em; }
  .hero__title{ font-size:clamp(46px,15vw,74px); letter-spacing:-.045em; line-height:.92; }
  .hero__sub{ font-size:14px; line-height:1.5; }
  .hero__cta{ gap:10px; margin-top:28px; }
  .btn{ width:100%; justify-content:space-between; padding:18px 24px; }

  .trustbar b{ font-size:20px; }
  .trustbar span{ font-size:8.5px; letter-spacing:.12em; }

  .statement{ font-size:clamp(28px,8.6vw,42px); line-height:1.1; max-width:none; }
  .sec-title{ font-size:clamp(34px,10.5vw,52px); }
  .sec-title--xl{ font-size:clamp(38px,13vw,64px); }
  .lead{ font-size:15px; }

  .list li{ padding:13px 0; font-size:13px; }
  .list li:hover{ padding-left:0; }

  .brands{ padding:26px 0; }
  .brands__set i{ margin-inline:18px; }

  .proj--a .proj__media,.proj--b .proj__media,
  .proj--c .proj__media,.proj--d .proj__media{ aspect-ratio:5/4; }
  .proj__title{ font-size:clamp(22px,6.6vw,30px); }
  .proj__desc{ font-size:14px; }

  .icons{ grid-template-columns:1fr 1fr; gap:10px; }
  .icon{ padding:26px 8px 20px; border-radius:18px; }
  .icon__obj{ width:56px; margin-bottom:16px; }
  .icon h3{ font-size:10.5px; letter-spacing:.14em; }
  .icon p{ font-size:10px; margin-top:7px; }
  .icon__n{ top:10px; left:11px; font-size:8px; }
  .skills__spot{ display:none; }

  .svc{ padding:26px 22px; border-radius:18px; }
  .svc h3{ font-size:24px; }
  .svc__obj{ width:62px; }
  .svc__cta{ font-size:11px; }

  .step h3{ font-size:clamp(28px,9vw,40px); }
  .step p{ font-size:14px; }
  .step__n{ padding-left:0; left:calc(-1 * clamp(46px,6vw,110px)); }

  .why h3{ font-size:17px; }
  .why p{ font-size:13.5px; }

  .film{ height:180svh; }
  .film__frame{ width:86vw; height:44svh; }
  .film__title{ font-size:clamp(30px,9.6vw,46px); }
  .film__note{ margin-top:16px; font-size:9px; letter-spacing:.24em; }
  .film__play{ width:60px; right:14px; bottom:14px; font-size:9px; }

  .marquee{ padding:30px 0; }
  .marquee__set span{ font-size:clamp(34px,11vw,52px); }

  .portrait{ aspect-ratio:1/1; }
  .bio__block p{ font-size:14.5px; }

  .tools{ padding-bottom:80px; }
  .orbit__items span{ padding:7px 11px; font-size:10px; }

  .contact__title{ font-size:clamp(34px,10.5vw,54px); }
  .contact__note{ font-size:14.5px; }
  .cta{ padding:20px 28px; font-size:12px; letter-spacing:.12em; }
  .socials{ grid-template-columns:1fr; }
  .socials a{ padding:18px 0; font-size:15px; }
  .socials a:hover{ padding-left:0; }
  .foot{ flex-direction:column; align-items:flex-start; }

  .detail__hero{ height:42svh; padding-top:84px; }
  .detail__close{ top:16px; right:16px; width:46px; height:46px; }
  .detail__title{ font-size:clamp(30px,9vw,44px); }
  .detail__desc{ font-size:15px; }
  .detail__specs{ grid-template-columns:1fr 1fr; }
  .detail__cta{ width:100%; justify-content:space-between; }

  .menu__list a{ font-size:clamp(32px,11vw,48px); }
  .menu__foot{ font-size:9px; }

  .mobcta{ left:10px; right:10px; bottom:10px; padding:13px 14px 13px 20px; }
  .mobcta__label{ font-size:12.5px; }
}

/* ── SMALL PHONE ──────────────────────────────────────────── */
@media (max-width:400px){
  .trustbar{ gap:16px 14px; }
  .icons{ gap:8px; }
  .icon__obj{ width:50px; }
  .mobcta__label{ display:none; }
  .mobcta{ justify-content:center; }
  .mobcta__go{ font-size:12px; padding:10px 20px; }
}

/* ── PHONE LANDSCAPE ──────────────────────────────────────── */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding-top:84px; }
  .hero__foot{ display:none; }
  .film{ height:220svh; }
  .film__frame{ height:66svh; }
  .mobcta{ display:none; }
}

/* ── SAFE AREAS (notched devices) ─────────────────────────── */
@supports (padding:max(0px)){
  @media (max-width:900px){
    .mobcta{ bottom:max(12px, env(safe-area-inset-bottom)); }
    .nav{ padding-top:max(16px, env(safe-area-inset-top)); }
  }
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .grain{ display:none; }
  .cursor{ display:none !important; }
  body.has-cursor, body.has-cursor *{ cursor:auto !important; }
  body.motion .step{ opacity:1; filter:none; }
  .statement .word{ opacity:1; }
}