/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bg:#0B0B0C;
  --bg-2:#121214;
  --bg-3:#191A1D;
  --ink:#EFEDE7;
  --ink-dim:#8C8C93;
  --line:rgba(239,237,231,.13);
  --accent:#4634FF;
  --accent-soft:#7B6BFF;

  --display:"Archivo",-apple-system,"Helvetica Neue",sans-serif;
  --body:"Inter Tight",-apple-system,"Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --pad:clamp(20px,4vw,64px);
  --sec:clamp(80px,10vw,152px);
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:76px;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul{margin:0}
ul{list-style:none;padding:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:2px}

.wrap{padding-inline:var(--pad)}
.section{padding-block:var(--sec);position:relative}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* type roles */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex:none;
}
.display{
  font-family:var(--display);
  font-weight:800;
  font-stretch:112%;
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.lede{
  font-size:clamp(17px,1.7vw,23px);
  line-height:1.35;
  letter-spacing:-.015em;
  max-width:34ch;
}
.dim{color:var(--ink-dim)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* line-mask reveal for big type */
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(102%);transition:transform 1.05s var(--ease)}
.in .mask>span,.mask.in>span{transform:none}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 24px;border:1px solid var(--line);border-radius:100px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover{color:#fff;border-color:var(--accent)}
.btn:hover::after{transform:none}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-solid::after{background:#fff}
.btn-solid:hover{color:var(--bg)}

/* ============================================================
   PRELOADER
   ============================================================ */
#pre{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:grid;place-items:center;
  transition:transform 1s var(--ease);
}
#pre.done{transform:translateY(-101%)}
#pre .pct{
  font-family:var(--display);font-weight:900;font-stretch:118%;
  font-size:clamp(64px,16vw,190px);line-height:1;letter-spacing:-.05em;
}
#pre .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:0}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:var(--pad);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav.hide{transform:translateY(-100%)}
.logo{
  font-family:var(--display);font-weight:900;font-stretch:118%;
  font-size:19px;letter-spacing:-.03em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;
}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 14px;border-radius:100px;transition:background .35s var(--ease),color .35s var(--ease);
}
.nav-links a:hover{background:rgba(239,237,231,.07)}
.nav-links a.on{color:var(--accent-soft)}
.nav-right{display:flex;align-items:center;gap:14px}
.clock{
  font-family:var(--mono);font-size:12px;color:var(--ink-dim);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.clock .live{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;position:relative}
.burger i{position:absolute;left:13px;width:16px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease)}
.burger i:first-child{top:19px}
.burger i:last-child{top:24px}
.burger.x i:first-child{transform:translateY(2.75px) rotate(45deg)}
.burger.x i:last-child{transform:translateY(-2.75px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:99;background:var(--bg-2);
  padding:calc(var(--nav-h) + 24px) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
.menu.open{clip-path:inset(0 0 0 0)}
.menu a.big{
  font-family:var(--display);font-weight:800;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(38px,11vw,72px);line-height:1.06;letter-spacing:-.03em;
  display:block;padding:6px 0;border-bottom:1px solid var(--line);
}
.menu .m-foot{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--mono);font-size:12px;color:var(--ink-dim)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:calc(var(--nav-h) + clamp(40px,7vw,90px));padding-bottom:clamp(40px,6vw,80px)}
.hero-type{position:relative}
.hero-type h1{
  font-size:clamp(52px,13.2vw,208px);
  font-stretch:118%;font-weight:900;
}
.hero-type .l2{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ---- looping hero wave -------------------------------------
   JS splits the headline into .ltr spans and sets --i on each.
   A highlight travels through the letters, then the line rests.
   Tune: --wave-dur (cycle), --wave-step (gap between letters).  */
.hero-type h1{--wave-dur:5.4s;--wave-step:.082s}
.hero-type h1 .ltr{
  display:inline-block;
  transform-origin:50% 100%;
  will-change:transform;
  animation:heroWave var(--wave-dur) cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:calc(var(--i) * var(--wave-step) + 1.15s);
}
.hero-type h1 .ltr.sp{animation:none}
@keyframes heroWave{
  0%, 11%, 100%{ transform:translateY(0);      color:var(--ink); text-shadow:none }
  5%           { transform:translateY(-.055em); color:#FFFFFF;
                 text-shadow:0 0 .3em rgba(123,107,255,.42) }
}
/* the full stop keeps its own slow pulse so the line never sits fully still */
.hero-type h1 .ltr.dot{animation:heroWave var(--wave-dur) cubic-bezier(.4,0,.2,1) infinite,
                                  dotPulse 3.2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{color:var(--accent-soft)}50%{color:var(--accent)}}

.hero-note{
  max-width:30ch;font-size:14px;line-height:1.5;color:var(--ink-dim);
  padding-bottom:clamp(6px,1vw,18px);
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,56px);align-items:baseline;
  margin-top:clamp(28px,4vw,54px);padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);
}
.hero-meta a:hover{color:var(--ink)}
.hero-meta .grow{margin-left:auto}

/* showreel */
.reel{
  position:relative;margin-top:clamp(28px,4vw,56px);
  border-radius:14px;overflow:hidden;background:var(--bg-3);
  aspect-ratio:16/7.4;
}
.reel .ph,.reel .cover{position:absolute;inset:0}
/* fills its container, crops instead of squashing — use on any real photo */
.cover{width:100%;height:100%;object-fit:cover}
.reel-ui{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;
  padding:clamp(16px,2.4vw,32px);gap:16px;
}
.reel .ph::after{position:absolute;top:14px;left:16px;text-align:left}
.reel-ui .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(11,11,12,.5);backdrop-filter:blur(8px);
  padding:8px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.14);
}
.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(84px,9vw,124px);aspect-ratio:1;border-radius:50%;
  background:var(--ink);color:var(--bg);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--accent);color:#fff}

/* image placeholder system — swap these blocks for real <img> later */
.ph{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 11px),
    linear-gradient(150deg,var(--bg-3),#0E0E10 62%);
  display:grid;place-items:center;position:relative;
}
.ph::after{
  content:attr(data-ph);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(239,237,231,.3);text-align:center;padding:0 16px;
}
.ph.accent{background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 11px),
    linear-gradient(150deg,var(--accent),#1B14A8 70%);}

/* ============================================================
   MARQUEE
   ============================================================ */
.marq{
  border-block:1px solid var(--line);
  overflow:hidden;padding-block:clamp(14px,1.6vw,22px);
  display:flex;gap:0;
}
.marq-track{
  display:flex;flex:none;gap:clamp(28px,4vw,60px);padding-right:clamp(28px,4vw,60px);
  animation:slide 34s linear infinite;
  font-family:var(--display);font-weight:800;font-stretch:110%;text-transform:uppercase;
  font-size:clamp(24px,4.2vw,58px);letter-spacing:-.03em;white-space:nowrap;
  align-items:center;
}
.marq-track span{display:flex;align-items:center;gap:clamp(28px,4vw,60px)}
.marq-track i{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.marq-track em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(239,237,231,.45)}
@keyframes slide{to{transform:translateX(-100%)}}

/* ============================================================
   INTRO / STATS
   ============================================================ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,90px)}
.since{
  font-family:var(--display);font-weight:900;font-stretch:120%;
  font-size:clamp(90px,17vw,240px);line-height:.8;letter-spacing:-.05em;
}
.since-row{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(32px,4vw,56px)}
.stat{background:var(--bg);padding:clamp(20px,2.6vw,34px)}
.stat .num{
  font-family:var(--display);font-weight:900;font-stretch:115%;
  font-size:clamp(44px,6.4vw,88px);line-height:.9;letter-spacing:-.04em;
}
.stat .num sup{font-size:.42em;vertical-align:super;color:var(--accent-soft)}
.stat .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-top:12px}

/* ============================================================
   SERVICES
   ============================================================ */
.svc{border-top:1px solid var(--line)}
.svc-head{
  width:100%;display:flex;align-items:center;gap:clamp(14px,3vw,40px);
  padding-block:clamp(20px,2.8vw,34px);text-align:left;
}
.svc-head .idx{font-family:var(--mono);font-size:12px;color:var(--ink-dim);width:34px;flex:none}
.svc-head .ttl{
  font-family:var(--display);font-weight:800;font-stretch:108%;text-transform:uppercase;
  font-size:clamp(26px,5.4vw,72px);line-height:1;letter-spacing:-.035em;
  flex:1;transition:color .4s var(--ease),transform .5s var(--ease);
}
.svc:hover .ttl,.svc.open .ttl{color:var(--accent-soft)}
.svc:hover .ttl{transform:translateX(10px)}
.svc-head .sign{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;position:relative;transition:background .4s var(--ease),border-color .4s
}
.svc-head .sign::before,.svc-head .sign::after{
  content:"";position:absolute;background:var(--ink);transition:transform .45s var(--ease)
}
.svc-head .sign::before{width:12px;height:1.5px}
.svc-head .sign::after{width:1.5px;height:12px}
.svc.open .sign{background:var(--accent);border-color:var(--accent)}
.svc.open .sign::after{transform:scaleY(0)}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.svc.open .svc-body{grid-template-rows:1fr}
.svc-body>div{overflow:hidden}
.svc-inner{
  display:grid;grid-template-columns:34px 1fr 1.1fr;gap:clamp(14px,3vw,40px);
  padding-bottom:clamp(26px,3.4vw,44px);
}
.svc-inner .tags{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.svc-inner .tags li{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:7px 13px;color:var(--ink-dim);
}
.svc-inner p{color:var(--ink-dim);max-width:44ch;font-size:15px}

/* ============================================================
   WORK — sticky stack
   ============================================================ */
.stack{position:relative}
.card-wrap{position:sticky;top:calc(var(--nav-h) + 18px);padding-bottom:22px}
.card{
  color:inherit;text-decoration:none;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-2);
  display:grid;grid-template-columns:1.05fr 1fr;min-height:min(64vh,540px);
  transition:transform .8s var(--ease);
}
.card-media{position:relative;overflow:hidden}
.card-media .ph,.card-media .cover{position:absolute;inset:0;transition:transform 1.1s var(--ease)}
.card:hover .card-media .ph,.card:hover .card-media .cover{transform:scale(1.045)}
.card-info{
  padding:clamp(22px,3vw,46px);display:flex;flex-direction:column;justify-content:space-between;gap:26px;
}
.card-info h3{
  font-family:var(--display);font-weight:800;font-stretch:110%;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,62px);line-height:.94;letter-spacing:-.035em;
}
.card-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.card-tags li{font-family:var(--mono);font-size:11px;color:var(--ink-dim);border:1px solid var(--line);border-radius:100px;padding:6px 12px}
.card-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:20px}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.step{background:var(--bg);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:16px;min-height:290px;transition:background .5s var(--ease)}
.step:hover{background:var(--bg-2)}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent-soft)}
.step h4{font-family:var(--display);font-weight:800;font-stretch:106%;text-transform:uppercase;font-size:clamp(20px,2.1vw,28px);letter-spacing:-.02em;line-height:1.05}
.step p{color:var(--ink-dim);font-size:15px;flex:1}
.step .dur{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-top:16px;border-top:1px solid var(--line)}

/* manager card */
.mgr{display:flex;align-items:center;gap:16px}
.mgr .av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none}
.mgr .av .ph::after{font-size:8px;letter-spacing:.1em}
.av .ph,.av img{width:100%;height:100%;object-fit:cover}
.mgr p{font-size:14px;color:var(--ink-dim);max-width:24ch}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{background:var(--bg-2)}
.statement blockquote{
  font-family:var(--display);font-weight:800;font-stretch:104%;
  font-size:clamp(26px,3.9vw,58px);line-height:1.06;letter-spacing:-.035em;text-transform:none;
  max-width:20ch;
}
.statement blockquote b{color:var(--accent-soft);font-weight:inherit}
.words{display:flex;flex-wrap:wrap;gap:10px}
.words span{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:8px 14px;color:var(--ink-dim);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.quotes::-webkit-scrollbar{display:none}
.quote{
  flex:0 0 min(420px,84vw);scroll-snap-align:start;
  border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;gap:22px;background:var(--bg);
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.quote:hover{border-color:rgba(239,237,231,.3);background:var(--bg-2)}
.quote p{font-size:clamp(16px,1.5vw,19px);line-height:1.4;letter-spacing:-.01em;flex:1}
.quote .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.quote .who .av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none}
.quote .who .av .ph::after{content:""}
.quote .who b{font-weight:500;font-size:14px;display:block}
.quote .who small{font-family:var(--mono);font-size:11px;color:var(--ink-dim)}

/* ============================================================
   AWARDS
   ============================================================ */
.award{
  display:grid;grid-template-columns:1.1fr 1.4fr auto auto;gap:clamp(12px,3vw,40px);
  align-items:center;padding-block:clamp(18px,2.2vw,28px);
  border-top:1px solid var(--line);position:relative;
}
.award:last-child{border-bottom:1px solid var(--line)}
.award h4{font-family:var(--display);font-weight:800;font-stretch:106%;text-transform:uppercase;font-size:clamp(18px,2.3vw,32px);letter-spacing:-.02em}
.award p{color:var(--ink-dim);font-size:14px}
.award .yr{font-family:var(--mono);font-size:12px;color:var(--ink-dim)}
.award .go{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.award:hover .go{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{position:relative;overflow:hidden;border-radius:16px;background:var(--bg-2);border:1px solid var(--line);padding:clamp(34px,6vw,96px) clamp(24px,4vw,64px);text-align:center}
.cta h2{font-size:clamp(38px,8.4vw,132px);font-stretch:118%;font-weight:900}
.cta .glow{position:absolute;left:50%;top:110%;transform:translateX(-50%);width:min(760px,120%);aspect-ratio:2/1;background:radial-gradient(ellipse at center,rgba(70,52,255,.55),transparent 62%);filter:blur(20px);pointer-events:none}
.cta .row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(26px,3vw,42px)}

footer{border-top:1px solid var(--line);padding-top:clamp(46px,6vw,80px);padding-bottom:28px}
.f-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr 1fr;gap:clamp(24px,4vw,56px)}
.f-grid h5{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:18px;font-weight:400}
.f-grid li+li{margin-top:10px}
.f-grid a{font-size:15px;transition:color .3s,padding-left .35s var(--ease);display:inline-block}
.f-grid a:hover{color:var(--accent-soft);padding-left:6px}
.f-grid .f-mail{
  font-family:var(--display);font-weight:800;font-stretch:104%;
  font-size:clamp(22px,3.2vw,44px);letter-spacing:-.03em;display:inline-block;
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:border-color .4s,color .4s;
}
.f-grid .f-mail:hover{color:var(--accent-soft);border-color:var(--accent)}
.f-bot{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  margin-top:clamp(40px,5vw,72px);padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);
}
.f-big{
  font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(56px,17vw,260px);line-height:.78;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(239,237,231,.16);
  margin-top:clamp(30px,4vw,56px);user-select:none;
}

/* cursor */
.cur{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:150;mix-blend-mode:difference;transition:width .3s var(--ease),height .3s var(--ease),opacity .3s}
.cur.big{width:46px;height:46px;margin:-18px 0 0 -18px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .card{grid-template-columns:1fr}
  .card-media{aspect-ratio:16/10}
  .card-media .ph{position:absolute}
  .steps{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .award{grid-template-columns:1fr auto;row-gap:6px}
  .award p{grid-column:1/-1}
}
@media (max-width:860px){
  .nav-links,.clock,.nav-right>.btn{display:none}
  .burger{display:block}
  .grid-2{grid-template-columns:1fr}
  .svc-inner{grid-template-columns:1fr;gap:18px}
  .svc-inner .idx{display:none}
  .svc-inner>span:empty{display:none}
  .reel{aspect-ratio:4/3.2}
  .hero-meta .grow{margin-left:0}
  .card-wrap{position:relative;top:auto}
  .cur{display:none}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html:focus-within{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .mask>span{transform:none}
  .hero-type h1 .ltr{animation:none !important;transform:none !important}
}

/* ============================================================
   PROJECT PAGES  (work/*.html)
   ============================================================ */
.p-back{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);transition:color .35s var(--ease),gap .35s var(--ease);
}
.p-back:hover{color:var(--ink);gap:16px}

.p-hero{padding-top:calc(var(--nav-h) + clamp(34px,6vw,74px));padding-bottom:clamp(30px,4vw,54px)}
.p-hero h1{
  font-family:var(--display);font-weight:900;font-stretch:118%;text-transform:uppercase;
  font-size:clamp(40px,9.4vw,142px);line-height:.86;letter-spacing:-.04em;
  margin-top:clamp(20px,2.6vw,34px);
}
.p-hero .p-lede{
  font-size:clamp(16px,1.5vw,21px);line-height:1.4;letter-spacing:-.012em;
  max-width:52ch;margin-top:clamp(22px,2.6vw,34px);color:var(--ink-dim);
}

/* fact table */
.p-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin-top:clamp(30px,4vw,52px);
}
.p-meta div{background:var(--bg);padding:clamp(18px,2.2vw,28px)}
.p-meta dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:10px;
}
.p-meta dd{margin:0;font-size:15px;line-height:1.45}

/* cover + gallery */
.p-cover{border-radius:14px;overflow:hidden;background:var(--bg-3);aspect-ratio:16/9;margin-top:clamp(26px,3vw,44px)}
.p-gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px);margin-top:clamp(12px,1.4vw,20px)}
.p-shot{border-radius:14px;overflow:hidden;background:var(--bg-3);position:relative}
.p-shot.wide{grid-column:1/-1;aspect-ratio:16/9}
.p-shot:not(.wide){aspect-ratio:6/5}
.p-shot img,.p-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.p-shot:hover img,.p-cover:hover img{transform:scale(1.03)}
.p-cap{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);margin-top:12px;
}

/* body copy blocks */
.p-body{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(24px,5vw,80px);align-items:start}
.p-body h2{
  font-family:var(--display);font-weight:800;font-stretch:108%;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,38px);line-height:1;letter-spacing:-.03em;
}
.p-body p{color:var(--ink-dim);max-width:60ch}
.p-body p+p{margin-top:16px}
.p-list{margin-top:20px}
.p-list li{
  display:flex;gap:14px;padding-block:13px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-dim);
}
.p-list li:last-child{border-bottom:1px solid var(--line)}
.p-list li b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-soft);flex:none;width:26px;font-weight:400;padding-top:2px}

/* next project */
.p-next{
  display:block;border-top:1px solid var(--line);padding-block:clamp(40px,6vw,84px);
  position:relative;overflow:hidden;
}
.p-next .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.p-next h3{
  font-family:var(--display);font-weight:900;font-stretch:116%;text-transform:uppercase;
  font-size:clamp(34px,8vw,116px);line-height:.9;letter-spacing:-.04em;margin-top:16px;
  transition:transform .6s var(--ease),color .5s var(--ease);
}
.p-next:hover h3{transform:translateX(clamp(8px,1.4vw,22px));color:var(--accent-soft)}

@media (max-width:1080px){
  .p-meta{grid-template-columns:1fr 1fr}
  .p-body{grid-template-columns:1fr;gap:20px}
}
@media (max-width:620px){
  .p-meta{grid-template-columns:1fr}
  .p-gallery{grid-template-columns:1fr}
  .p-shot:not(.wide){aspect-ratio:16/11}
}

/* ---- 3-up portrait grid (1080 × 1350 / 4:5) ------------------
   Used for the case-study image grids. Six images per grid,
   three per row. Drops to two columns on tablet, one on phone. */
.p-grid-block{margin-top:clamp(30px,4vw,54px)}
.p-grid-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:clamp(12px,1.4vw,20px);border-bottom:1px solid var(--line);
}
.p-grid-head h3{
  font-family:var(--display);font-weight:800;font-stretch:106%;text-transform:uppercase;
  font-size:clamp(16px,1.7vw,24px);letter-spacing:-.02em;line-height:1;
}
.p-grid-head span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px)}
.p-grid figure{
  margin:0;border-radius:12px;overflow:hidden;background:var(--bg-3);
  aspect-ratio:4/5;position:relative;
}
.p-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),opacity .5s var(--ease)}
.p-grid figure:hover img{transform:scale(1.045)}
.p-grid figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;
}
/* two columns on phones keeps the grid reading as a grid, not a stack */
@media (max-width:900px){ .p-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .p-grid-head{flex-direction:column;align-items:flex-start;gap:6px}
  .p-grid{gap:8px}
}

/* ---- full-bleed image with an exact aspect ratio ------------
   Set --ar to the image's own width/height so the slot matches
   the file exactly and nothing gets cropped.
   e.g. 2000 x 1179  ->  style="--ar:2000/1179"                */
.p-full{
  margin:0;border-radius:14px;overflow:hidden;background:var(--bg-3);
  aspect-ratio:var(--ar,16/9);position:relative;
  margin-top:clamp(12px,1.4vw,20px);
}
.p-full img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.p-full:hover img{transform:scale(1.025)}
.p-full::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;
}
/* a grid whose cells follow the source ratio rather than 4:5.
   Kept for the Wydad page, which uses this class. */
.p-grid.ar-tall figure{aspect-ratio:2000/2500}

/* ---- generic grid: column count and cell ratio per grid ------
   Newer, more flexible version of the above. Column count comes
   from the data-cols attribute; the cell ratio is the only thing
   set inline:
     <div class="p-grid" data-cols="3" style="--ar:1400/1400">
   --ar is the source file's own width/height, so the cell matches
   the image exactly and nothing is cropped.
   Columns are deliberately NOT set inline: an inline custom
   property would outrank the media queries below.               */
.p-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.p-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.p-grid[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
.p-grid[data-cols] figure{aspect-ratio:var(--ar,4/5)}

/* Reflow by column count rather than one blanket rule, so a row of
   three never breaks into a 2 + 1 orphan and a row of four folds
   neatly into 2 x 2. */
@media (max-width:1080px){
  .p-grid[data-cols="4"]{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .p-grid[data-cols="2"],
  .p-grid[data-cols="3"]{grid-template-columns:1fr}
  .p-grid[data-cols]{gap:clamp(10px,2vw,16px)}
}

/* an empty grid heading would still draw its rule and padding */
.p-grid-head:has(h3:empty){display:none}
/* a three-image row should never break into a 2 + 1 orphan: hold three
   columns as long as they're legible, then stack to full width */
@media (max-width:900px){ .p-grid.ar-tall{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .p-grid.ar-tall{grid-template-columns:1fr;gap:clamp(10px,2vw,16px)} }

/* ============================================================
   VIDEO CELLS
   A video behaves exactly like an image in a .p-grid or .p-full:
   set --ar to the clip's own width/height and it fills the slot.
   Clips autoplay muted and loop while on screen, and pause when
   scrolled away — see the VIDEO CELLS block in js/main.js.
   ============================================================ */
.p-grid figure video,
.p-full video{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg-3)}

.v-cell{position:relative}
/* while the file is still loading, the poster carries the slot */
.v-cell video{transition:opacity .5s var(--ease)}

/* sound toggle — clips start muted because browsers require it */
.v-sound{
  position:absolute;right:12px;bottom:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(11,11,12,.55);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1;
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
}
.v-cell:hover .v-sound,
.v-sound:focus-visible,
.v-sound.on{opacity:1;transform:none}
.v-sound:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* small corner badge so a still-looking clip reads as video */
.v-tag{
  position:absolute;left:12px;top:12px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:100px;
  background:rgba(11,11,12,.5);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
@media (max-width:860px){
  .v-sound{opacity:1;transform:none}   /* no hover on touch */
}