/* ══════════════════════════════════════════════════════════
   김백현 — IP Merchandise Lead
   black · fog · narrow column · serif italic display
══════════════════════════════════════════════════════════ */

:root{
  --bg:#000;
  --fg:#F5F6F8;
  --dim:rgba(245,246,248,.66);
  --mute:rgba(245,246,248,.42);
  --line:rgba(255,255,255,.1);
  --line-soft:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(18,20,25,.86);
  --ice:#BFD3F2;
  --fog:120,146,172;

  --f-sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --f-serif:"Instrument Serif", "Pretendard Variable", Pretendard, serif;
  --f-script:"Pinyon Script", "Instrument Serif", cursive;

  --wrap:1120px;
  --pad:clamp(20px,4vw,40px);
  --space:clamp(104px,13vw,184px);
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--f-sans);
  font-size:16px; line-height:1.6; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  word-break:keep-all; overflow-wrap:break-word;
  overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
img{ 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:rgba(191,211,242,.3); color:#fff; }

main{ position:relative; z-index:1; }
main > section{ width:min(var(--wrap), 100% - var(--pad)*2); margin-inline:auto; }

/* numerals: one family everywhere */
.flagbar__i b,.viz__big,.viz__v,.pnl__i b,.ads__i b,.stat__v,.kc b,.crew b,.call__num,.acc__p{
  font-family:var(--f-sans);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}
.cur,
.flagbar__i b .cur,.pnl__i b .cur,.ads__i b .cur,.viz__v .cur,.kc b .cur{
  font:inherit; font-size:inherit; color:inherit; letter-spacing:inherit;
  margin-right:.12em;
}

/* ══════════════ ATMOSPHERE ══════════════ */

.fog{
  position:fixed; left:0; right:0; bottom:0; height:62vh;
  z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(0deg, #000 35%, transparent 100%);
          mask-image:linear-gradient(0deg, #000 35%, transparent 100%);
}
.fog i{
  position:absolute; bottom:-30%;
  width:90vw; height:80vh; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--fog),.34), rgba(var(--fog),.12) 55%, transparent 100%);
  will-change:transform;
}
.fog i:nth-child(1){ left:-30vw; animation:drift 38s var(--ease-io) infinite alternate; }
.fog i:nth-child(2){ left:20vw; bottom:-40%; opacity:.8; animation:drift 46s var(--ease-io) infinite alternate-reverse; }
.fog i:nth-child(3){ left:55vw; opacity:.7; animation:drift 52s var(--ease-io) infinite alternate; }
.fog i:nth-child(4){ left:-5vw; bottom:-55%; width:120vw; opacity:.55; animation:drift 60s var(--ease-io) infinite alternate-reverse; }
@keyframes drift{
  from{ transform:translate3d(-6vw,0,0) scale(1); }
  to{ transform:translate3d(8vw,-4vh,0) scale(1.12); }
}

/* ══════════════ PRIMITIVES ══════════════ */

.sec-label{
  display:inline-block;
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
}
.sec-label--mt{ margin-top:28px; }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:999px;
  font-size:14px; font-weight:500; letter-spacing:-.01em;
  background:#0B0C10;
  border:1px solid rgba(255,255,255,.16);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.pill iconify-icon{ transition:transform .5s var(--ease); }
.pill:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.34); }
.pill:hover iconify-icon{ transform:translateX(3px); }
.pill--glow{
  background:linear-gradient(180deg,#1B1F27,#0A0B0E);
  border-color:rgba(191,211,242,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 4px rgba(191,211,242,.04),
    0 0 28px rgba(120,160,220,.32);
}
.pill--glow:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 5px rgba(191,211,242,.06), 0 0 40px rgba(120,160,220,.48); }

.glass{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* section head — centered serif */
.shead{ text-align:center; margin-bottom:clamp(56px,7vw,96px); }
.shead .sec-label{ margin-bottom:18px; }
.shead__t{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(52px,7.4vw,104px); line-height:1; letter-spacing:-.02em;
}
.shead__t em{ font-style:italic; }
.shead__s{
  margin-top:18px;
  font-size:clamp(15px,1.3vw,18px); color:var(--dim);
}

/* reveal */
.js .reveal{ opacity:0; transform:translate3d(0,28px,0); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* word reveal */
[data-words] .w{ opacity:.16; transition:opacity .35s linear; }
[data-words] .w.on{ opacity:1; }
.no-js [data-words] .w{ opacity:1; }

/* ══════════════ NAV ══════════════ */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  pointer-events:none;
}
.nav::before{
  content:""; position:absolute; inset:0 0 -40px 0;
  background:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,0));
  opacity:0; transition:opacity .5s;
}
.nav.scrolled::before{ opacity:1; }
.nav__in{
  position:relative;
  width:min(var(--wrap), 100% - var(--pad)*2); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0;
}
.nav__logo, .nav__burger{ pointer-events:auto; }
.nav__logo{
  font-family:var(--f-script); font-size:30px; line-height:1;
  letter-spacing:0; padding-top:4px;
}
.nav__burger{
  position:relative; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,13,16,.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-content:center; gap:5px;
}
.nav__burger span{
  display:block; width:18px; height:1.5px; background:var(--fg); border-radius:2px;
  transition:transform .5s var(--ease), opacity .3s;
}
.menu-open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-open .nav__burger span:nth-child(2){ opacity:0; }
.menu-open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:56px;
  background:rgba(0,0,0,.94);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility 0s .5s;
}
.menu-open .menu{ opacity:1; visibility:visible; transition:opacity .5s var(--ease); }
.menu__links{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.menu__links a{
  display:flex; align-items:baseline; gap:16px;
  font-size:clamp(44px,8vw,84px); font-weight:500; letter-spacing:-.04em; line-height:1.15;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .7s var(--ease), color .3s;
}
.menu__links a i{ font-family:var(--f-serif); font-style:italic; font-size:.36em; color:var(--mute); letter-spacing:0; }
.menu__links a:hover{ color:var(--ice); }
.menu-open .menu__links a{ opacity:1; transform:none; }
.menu-open .menu__links a:nth-child(2){ transition-delay:.06s; }
.menu-open .menu__links a:nth-child(3){ transition-delay:.12s; }
.menu__foot{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:14px; color:var(--dim); }

/* ══════════════ HERO ══════════════ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:120px 0 clamp(56px,8vh,96px);
  text-align:center;
}
.hero__meta{
  position:absolute; top:96px; left:0; right:0;
  display:flex; justify-content:space-between;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}
.hero__portrait{
  position:absolute; left:50%; top:clamp(90px,13vh,140px);
  width:min(400px, 70vw); aspect-ratio:4/5;
  transform:translateX(-50%);
  border-radius:28px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 58%, transparent 96%);
          mask-image:linear-gradient(180deg, #000 58%, transparent 96%);
}
.hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; filter:brightness(.9); }
.hero__copy{ position:relative; display:flex; flex-direction:column; align-items:center; }
.hero__ko{ font-size:12px; letter-spacing:.24em; color:var(--dim); }
.hero__name{
  margin-top:10px;
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(68px,11.5vw,156px); line-height:.92; letter-spacing:-.025em;
  text-shadow:0 10px 60px rgba(0,0,0,.6);
}
.hero__name em{ font-style:italic; }
.hero__role{
  margin-top:18px; height:1.6em; overflow:hidden;
  font-size:clamp(12px,1.1vw,14px); font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--dim);
}
.rot{ position:relative; display:block; height:1.6em; width:min(34ch, 86vw); }
.rot__i{
  position:absolute; inset:0; white-space:nowrap; text-align:center;
  opacity:0; transform:translateY(100%);
  transition:transform .8s var(--ease), opacity .6s;
}
.rot__i.is-on{ opacity:1; transform:none; }
.rot__i.is-out{ opacity:0; transform:translateY(-100%); }
.hero .pill{ margin-top:28px; }
.hero__badge{
  margin-top:22px;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  font-size:12.5px; color:var(--dim);
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}
.hero__badge iconify-icon{ color:var(--ice); }

.js .hero__portrait,.js .hero__copy > *,.js .hero__meta{ opacity:0; transform:translateY(24px); transition:opacity 1.2s var(--ease), transform 1.3s var(--ease); }
.js .hero__portrait{ transform:translateX(-50%) scale(1.04); }
.js .hero.in .hero__portrait{ opacity:1; transform:translateX(-50%); }
.js .hero.in .hero__copy > *,.js .hero.in .hero__meta{ opacity:1; transform:none; }
.js .hero.in .hero__copy > :nth-child(2){ transition-delay:.12s; }
.js .hero.in .hero__copy > :nth-child(3){ transition-delay:.22s; }
.js .hero.in .hero__copy > :nth-child(4){ transition-delay:.32s; }
.js .hero.in .hero__copy > :nth-child(5){ transition-delay:.42s; }

/* ══════════════ MARQUEE ══════════════ */

.marquee{
  padding:clamp(28px,4vw,48px) 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.marquee__track{ display:flex; width:max-content; animation:marq 48s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__set{ display:flex; align-items:center; gap:clamp(40px,5vw,72px); padding-right:clamp(40px,5vw,72px); }
.lg{ white-space:nowrap; font-size:clamp(18px,1.7vw,24px); font-weight:600; letter-spacing:-.03em; color:rgba(255,255,255,.5); transition:color .3s; }
.lg:hover{ color:#fff; }
.lg--sans{ font-weight:800; letter-spacing:-.05em; }
.lg--serif{ font-family:var(--f-serif); font-weight:400; font-size:clamp(22px,2vw,30px); letter-spacing:-.01em; }
.lg--serif em{ font-style:italic; }
@keyframes marq{ to{ transform:translate3d(-50%,0,0); } }

/* ══════════════ STATEMENT ══════════════ */

.statement{ height:240vh; margin-top:clamp(40px,6vw,80px); overflow-x:clip; }
.statement__stick{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(20px,4vh,44px);
  text-align:center;
}
.bloom{
  --o:0;
  position:relative; width:min(420px,70vw); height:min(36vh,320px);
  flex-shrink:0;
}
.bloom i{
  position:absolute; left:50%; bottom:6%;
  width:22%; height:88%; margin-left:-11%;
  transform-origin:50% 100%;
  border-radius:50% 50% 46% 46% / 64% 64% 36% 36%;
  border:1px solid rgba(220,232,255,.28);
  background:
    radial-gradient(80% 60% at 50% 22%, rgba(236,243,255,.62), rgba(160,190,235,.18) 60%, rgba(160,190,235,0) 100%);
  box-shadow:0 0 50px rgba(140,175,235,.18), inset 0 0 30px rgba(200,220,255,.12);
  opacity:calc(.25 + var(--o) * .75);
  transform:rotate(calc(var(--r) * (.18 + var(--o) * .82))) scaleY(calc(.55 + var(--o) * .45));
}
.bloom b{
  position:absolute; left:50%; bottom:0; width:70%; height:40%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(200,220,255,calc(.18 + var(--o) * .5)), transparent);
}
.statement__copy{ max-width:1240px; padding:0 var(--pad); }
.statement__copy .statement__role,
.statement__copy .statement__lede{ max-width:780px; margin-left:auto; margin-right:auto; }
@media (min-width:901px){ .statement__en, .statement__ko{ white-space:nowrap; } }
.statement__role{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
.statement__title{
  margin-top:16px;
  font-size:clamp(32px,4.6vw,62px); font-weight:500; line-height:1.18; letter-spacing:-.045em;
}
.statement__en{
  display:block;
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(54px,8.2vw,124px); line-height:1; letter-spacing:-.02em;
}
.statement__en em{ font-style:italic; }
.statement__ko{
  display:block;
  margin-top:clamp(18px,2vw,26px);
  font-size:clamp(28px,3.6vw,50px); font-weight:500; line-height:1.35; letter-spacing:-.035em;
  color:var(--fg);
}
.statement__ko::before,
.statement__ko::after{
  content:""; display:inline-block; vertical-align:middle;
  width:clamp(20px,3vw,44px); height:1px; margin:0 14px 0 0;
  background:linear-gradient(90deg, transparent, rgba(245,246,248,.45));
}
.statement__ko::after{ margin:0 0 0 8px; }
@media (max-width:900px){
  .statement__ko{ text-wrap:balance; }
  .statement__ko::before,
  .statement__ko::after{ display:none; }
}
@media (max-width:560px){
  .statement__en{ font-size:clamp(36px,11vw,50px); }
  .statement__ko{ font-size:21px; }
}
.statement__ko::after{ background:linear-gradient(90deg, rgba(245,246,248,.45), transparent); }
.statement__lede{
  margin:22px auto 0; max-width:40em;
  font-size:clamp(16px,1.4vw,19px); line-height:1.75; color:var(--dim);
}

/* ══════════════ SERVICES ══════════════ */

.services{ padding-top:var(--space); }
.svc-list{ display:flex; flex-direction:column; gap:clamp(72px,9vw,128px); }
.svc{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px);
  align-items:center;
}
.svc--r .svc__visual{ order:2; }
.svc__visual{
  position:relative; aspect-ratio:5/4;
  display:grid; place-items:center;
  border-radius:28px; overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(70% 60% at 50% 110%, rgba(var(--fog),.42), transparent 70%),
    radial-gradient(50% 40% at 50% 45%, rgba(191,211,242,.08), transparent 70%),
    #07080A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.svc__visual iconify-icon{
  color:var(--ice);
  filter:drop-shadow(0 0 24px rgba(160,195,245,.55));
  transition:transform 1s var(--ease);
}
.svc:hover .svc__visual iconify-icon{ transform:scale(1.08) rotate(-4deg); }
.svc__num{
  position:absolute; top:20px; left:24px;
  font-family:var(--f-serif); font-style:italic; font-size:clamp(40px,4vw,56px); line-height:1;
  color:rgba(255,255,255,.2);
}
.svc__body h3{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(38px,4.4vw,58px); line-height:1; letter-spacing:-.02em;
}
.svc__body hr{ border:0; height:1px; background:var(--line); margin:26px 0 22px; }
.slash li{ padding:6px 0; font-size:16px; color:var(--dim); }
.slash li::before{ content:"//"; margin-right:12px; color:var(--mute); font-size:13px; letter-spacing:.04em; }
.svc__body .pill{ margin-top:28px; }

/* ══════════════ SELECTED WORK GRID ══════════════ */

.work{ padding-top:var(--space); }
.wgrid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.wc{
  position:relative; display:flex; flex-direction:column;
  border-radius:26px; overflow:hidden;
  border:1px solid var(--line);
  background:#08090B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  will-change:transform;
  transition:border-color .4s;
}
.wc:hover{ border-color:rgba(255,255,255,.22); }
.wc__img{ aspect-ratio:1/1; overflow:hidden; background:#0C0D10; }
.wc__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.wc:hover .wc__img img{ transform:scale(1.04); }
.wc--app .wc__img{
  background:radial-gradient(70% 60% at 50% 100%, rgba(var(--fog),.36), transparent 70%), #0A0B0E;
  padding:7% 0;
}
.wc--app .wc__img img{
  width:auto; height:100%; margin:0 auto; object-fit:contain;
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 -10px 50px rgba(0,0,0,.6);
}
.wc--app:hover .wc__img img{ transform:translateY(-6px); }
.wc__body{ padding:24px 26px 28px; }
.wc__org{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); }
.wc__body h3{ margin-top:10px; font-size:clamp(20px,1.8vw,24px); font-weight:600; letter-spacing:-.035em; }
.wc__body p{ margin-top:8px; font-size:14.5px; line-height:1.65; color:var(--dim); }
.wc__body ul{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.wc__body li{ padding:5px 11px; border-radius:999px; border:1px solid var(--line); font-size:12px; color:var(--dim); }
.wc__go{
  position:absolute; top:18px; right:18px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  font-size:12px; font-weight:500;
  background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateY(-6px);
  transition:opacity .4s, transform .5s var(--ease);
}
.wc:hover .wc__go{ opacity:1; transform:none; }
.wc--cta{
  grid-column:span 2;
  min-height:clamp(240px,26vw,340px);
  align-items:center; justify-content:center; gap:26px; text-align:center;
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(var(--fog),.45), transparent 70%),
    #07080A;
}
.wc__cta-t{ font-size:clamp(30px,3.6vw,48px); font-weight:500; line-height:1.15; letter-spacing:-.045em; }
.wc__cta-t em{ color:var(--dim); }

/* ══════════════ CHAPTERS ══════════════ */

.ch{ padding-top:var(--space); }
.ch__head{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.ch__kicker{
  padding:6px 14px; border-radius:999px; border:1px solid var(--line);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.ch__num{
  margin-top:18px;
  font-family:var(--f-serif); font-style:italic; font-size:clamp(88px,13vw,176px); line-height:.9;
  background:linear-gradient(180deg, #fff 10%, rgba(255,255,255,.08) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:0 .06em;
}
.ch__title{
  margin-top:22px;
  font-size:clamp(30px,4.2vw,56px); font-weight:500; line-height:1.2; letter-spacing:-.045em;
}
.ch__org{ margin-top:24px; display:flex; flex-direction:column; gap:4px; }
.ch__orgname{ font-size:16px; font-weight:600; }
.ch__orgname i{ font-style:normal; font-weight:400; color:var(--mute); }
.ch__orgrole{ font-size:14px; color:var(--dim); }

.blockhead{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding-bottom:14px; margin-bottom:clamp(20px,2.6vw,32px);
  border-bottom:1px solid var(--line);
}
.blockhead__note{ font-size:12.5px; color:var(--mute); text-align:right; }
.blockhead--mt{ margin-top:clamp(80px,10vw,128px); }

/* flagbar */
.flagbar{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  margin-top:clamp(56px,7vw,88px);
}
.flagbar__i{
  display:flex; flex-direction:column; gap:10px;
  padding:22px 20px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--glass);
}
.flagbar__i span{ font-size:12px; color:var(--mute); }
.flagbar__i b{ font-size:clamp(28px,2.8vw,38px); font-weight:300; line-height:1; letter-spacing:-.04em; }
.flagbar__i b i{ font-style:normal; font-size:.5em; margin-left:2px; color:var(--dim); }
.flagbar__i--hi{
  border-color:rgba(191,211,242,.3);
  background:radial-gradient(90% 90% at 50% 120%, rgba(var(--fog),.35), transparent 70%), var(--glass);
}

/* collection rail */
.collection{ margin-top:clamp(64px,8vw,104px); }
.collection__rail{
  display:flex; gap:12px;
  overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:14px; cursor:grab;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.collection__rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.collection__rail::-webkit-scrollbar{ height:2px; }
.collection__rail::-webkit-scrollbar-thumb{ background:var(--line); }
.prod{ flex:0 0 clamp(180px,20vw,250px); scroll-snap-align:start; }
.prod img{
  width:100%; aspect-ratio:1/1.04; object-fit:contain;
  background:#ECEDEF; border-radius:var(--r-md); padding:7%;
  transition:transform .6s var(--ease);
  -webkit-user-drag:none; user-select:none;
}
.prod:hover img{ transform:translateY(-6px); }
.prod figcaption{ margin-top:10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }

/* body */
.ch__body{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px); align-items:start;
  margin-top:clamp(64px,8vw,104px);
}
.ch__text p{ font-size:16px; line-height:1.9; color:var(--dim); }
.ch__text p + p{ margin-top:18px; }
.ch__text .lead{ font-size:clamp(18px,1.6vw,21px); line-height:1.7; font-weight:500; color:var(--fg); letter-spacing:-.025em; }
.ch__text em, .vision__text em, .case__col em{
  color:var(--fg);
  background:linear-gradient(180deg, transparent 64%, rgba(191,211,242,.2) 0);
}
.ch__text b{ font-weight:700; color:var(--fg); }
.ch__side .glass{ padding:28px; position:sticky; top:100px; }
.ch__side .sec-label{ display:block; margin-bottom:14px; }
.ch__side .sec-label--mt{ margin-top:30px; }

.crew li{ display:flex; gap:14px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.crew li:last-child{ border-bottom:0; }
.crew b{ font-size:26px; font-weight:300; min-width:1.6em; color:var(--ice); letter-spacing:-.03em; }
.crew span{ font-size:13.5px; line-height:1.6; color:var(--dim); }

.taglist{ display:flex; flex-wrap:wrap; gap:7px; }
.taglist--mt{ margin-top:18px; }
.taglist li{ padding:7px 12px; border-radius:999px; border:1px solid var(--line); font-size:12.5px; color:var(--dim); background:rgba(255,255,255,.02); }

.steps li{ display:flex; gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; color:var(--dim); }
.steps li:last-child{ border-bottom:0; }
.steps li span{ font-family:var(--f-serif); font-style:italic; font-size:15px; color:var(--ice); flex-shrink:0; }

/* case */
.case{
  margin-top:clamp(72px,9vw,120px);
  padding:clamp(24px,3.4vw,44px);
  border-radius:28px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}
.case__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); margin-top:22px; }
.case__step{
  display:block; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line);
  font-family:var(--f-serif); font-style:italic; font-size:22px; color:var(--fg);
}
.case__col p{ font-size:15px; line-height:1.8; color:var(--dim); }
.case__media{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:clamp(24px,3vw,40px); }
.case__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-md); }

figcaption{ margin-top:10px; font-size:12px; letter-spacing:.02em; color:var(--mute); }

/* gallery */
.gallery{ margin-top:clamp(72px,9vw,120px); }
.gallery__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.g img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-sm); }
.gallery__grid .g:nth-child(4n+2){ transition-delay:.06s; }
.gallery__grid .g:nth-child(4n+3){ transition-delay:.12s; }
.gallery__grid .g:nth-child(4n+4){ transition-delay:.18s; }

/* other projects */
.works{ margin-top:clamp(72px,9vw,120px); }
.ytpair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.yt{
  display:flex; flex-direction:column;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:#08090B;
  transition:border-color .4s, transform .6s var(--ease);
}
.yt:hover{ border-color:rgba(255,255,255,.24); transform:translateY(-4px); }
.yt__banner img{ width:100%; aspect-ratio:6.2/1; object-fit:cover; }
.yt__stills{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px 6px 0; }
.yt__stills img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; }
.yt__meta{ display:flex; align-items:center; gap:14px; padding:18px 20px 20px; }
.yt__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--line); }
.yt__org{ display:block; font-size:11px; letter-spacing:.12em; color:var(--ice); margin-bottom:4px; }
.yt__copy h3{ font-size:clamp(16px,1.5vw,19px); font-weight:600; letter-spacing:-.03em; line-height:1.3; }
.yt__copy p{ font-size:13px; line-height:1.6; color:var(--dim); margin-top:3px; }

.works__list{ margin-top:clamp(28px,3.4vw,44px); border-top:1px solid var(--line); }
.works__list li{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; gap:20px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.works__list b{ font-size:17px; font-weight:600; letter-spacing:-.03em; }
.works__list u{ text-decoration:none; color:var(--ice); }
.works__list span{ font-size:14px; color:var(--dim); }
.works__list i{ font-style:normal; font-size:13px; color:var(--mute); text-align:right; }

/* leeds lab btl */
.leeds{ margin-top:clamp(72px,9vw,120px); }
.leeds__lead{ max-width:640px; font-size:clamp(16px,1.3vw,18px); line-height:1.75; color:var(--dim); }
.leeds__lead em{ font-style:normal; color:var(--fg); }
.flagbar--4{ grid-template-columns:repeat(4,1fr); margin-top:28px; }
.flagbar__i--txt b{ font-size:clamp(20px,1.9vw,26px); letter-spacing:-.03em; line-height:1.2; }
.flagbar__i--txt b i{ font-size:.62em; margin-left:5px; }
.leeds .reel__frame--wide,.reel .reel__frame--wide,.gallery .gallery__film{ width:100%; }
.leeds__sub.leeds__sub--first{ margin-top:0; }
.leeds__sub{ display:block; margin:44px 0 14px; font-size:12px; letter-spacing:.08em; color:var(--mute); }
.leeds__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.lz img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-sm); }
.lz--big{ grid-column:span 2; grid-row:span 2; }
.lz--big img{ height:100%; }
.leeds__grid .lz:nth-child(3),.leeds__grid .lz:nth-child(5){ transition-delay:.08s; }

/* reel */
.reel{ margin-top:clamp(72px,9vw,120px); }
.reel__grid{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:10px; align-items:stretch;
}
.reel__grid .reel__frame{ aspect-ratio:auto; height:100%; }
.reel__photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.reel__photos img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-sm); }
.reel__photos figure:nth-child(3n+2){ transition-delay:.06s; }
.reel__photos figure:nth-child(3n+3){ transition-delay:.12s; }
.reel__frame{
  position:relative; width:100%; margin:0;
  aspect-ratio:9/16; border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#0A0B0E;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 80px rgba(var(--fog),.22);
}
.reel__vid{ width:100%; height:100%; object-fit:cover; display:block; }
.reel__frame--wide{ width:min(880px,100%); margin:0 auto; aspect-ratio:16/9; }
.reel__sound{
  position:absolute; right:14px; bottom:14px;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .4s var(--ease), border-color .3s;
}
.reel__sound:hover{ transform:scale(1.06); border-color:rgba(255,255,255,.4); }

/* interlude */
.inter{ margin-top:clamp(80px,10vw,136px); }
.inter__head{ text-align:center; }
.inter__title{
  margin-top:14px;
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(46px,6.4vw,88px); line-height:1; letter-spacing:-.02em;
}
.inter__title em{ font-style:italic; }
.inter__desc{ margin:18px auto 0; max-width:48ch; font-size:15.5px; line-height:1.8; color:var(--dim); }
.inter__strip{
  display:flex; gap:10px;
  margin:clamp(32px,4vw,52px) calc(50% - 50vw) 0;
  padding:0 max(var(--pad), calc((100vw - var(--wrap))/2));
  overflow-x:auto; scrollbar-width:none;
}
.inter__strip::-webkit-scrollbar{ display:none; }
.inter__strip figure{ flex:0 0 clamp(200px,22vw,300px); }
.inter__strip img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-md); }

/* phones */
.phones{ margin-top:clamp(72px,9vw,120px); }
.phones__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,32px); justify-items:center; align-items:start;
}
.phone{ width:min(100%,272px); display:flex; flex-direction:column; align-items:center; }
.phones__grid .phone:nth-child(2){ transition-delay:.08s; }
.phones__grid .phone:nth-child(3){ transition-delay:.16s; }
.phone__device{
  position:relative; width:100%;
  padding:14px 8px 12px;
  background:linear-gradient(165deg,#5a5a62 0%,#242428 36%,#0e0e10 100%);
  border-radius:36px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 6px rgba(0,0,0,.55), 0 30px 60px -18px rgba(0,0,0,.8), 0 0 60px rgba(var(--fog),.18);
  transition:transform .6s var(--ease);
}
.phone:hover .phone__device{ transform:translateY(-8px); }
.phone__btn{ position:absolute; width:3px; background:linear-gradient(#3e3e44,#161618); pointer-events:none; }
.phone__btn--silent{ left:-3px; top:14.5%; height:16px; border-radius:1px 0 0 1px; }
.phone__btn--vol{ left:-3px; top:21%; height:52px; border-radius:1px 0 0 1px; }
.phone__btn--pow{ right:-3px; top:24%; height:44px; border-radius:0 1px 1px 0; }
.phone__island{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:28%; height:11px; background:#070708; border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); z-index:2; pointer-events:none;
}
.phone__screen{ position:relative; border-radius:26px; overflow:hidden; background:#f3f4f6; aspect-ratio:390/844; }
.phone__screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.phone figcaption{
  margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 8px;
  font-size:13.5px; font-weight:600; color:var(--fg); text-align:center; letter-spacing:-.02em;
}
.phone figcaption i{ font-style:normal; font-weight:400; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }

/* viz */
.viz{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,4vw,56px);
  margin-top:clamp(72px,9vw,120px);
  padding:clamp(26px,3.6vw,48px);
  border-radius:28px; border:1px solid var(--line);
  background:radial-gradient(70% 90% at 0% 120%, rgba(var(--fog),.3), transparent 70%), rgba(255,255,255,.02);
}
.viz__k{ display:block; font-size:12px; color:var(--mute); }
.viz__big{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.18em;
  margin-top:12px;
  font-size:clamp(50px,7vw,100px); font-weight:200; line-height:1; letter-spacing:-.05em;
}
.viz__big em{ color:var(--mute); font-weight:200; }
.viz__big i{ font-style:normal; font-size:.32em; font-weight:500; letter-spacing:0; color:var(--dim); margin-left:.2em; }
.vline{ position:relative; margin-top:34px; height:1px; background:var(--line); }
.vline i{
  position:absolute; left:0; top:-1px; height:3px; width:100%;
  background:linear-gradient(90deg, rgba(191,211,242,.2), var(--ice));
  box-shadow:0 0 14px rgba(160,195,245,.6);
  transform-origin:left; transform:scaleX(0);
  transition:transform 1.8s var(--ease) .2s;
  border-radius:3px;
}
.viz.in .vline i{ transform:scaleX(1); }
.vline span{ position:absolute; top:12px; font-size:12px; color:var(--mute); }
.vline__to{ right:0; }
.viz__side{ display:flex; flex-direction:column; }
.viz__item{ padding:14px 0; border-bottom:1px solid var(--line-soft); }
.viz__item:first-child{ padding-top:0; }
.viz__item:last-child{ border-bottom:0; }
.viz__v{ display:block; margin-top:6px; font-size:clamp(30px,3vw,40px); font-weight:300; line-height:1.1; letter-spacing:-.04em; }
.viz__v i{ font-style:normal; font-size:.5em; margin-left:2px; color:var(--dim); }
.viz__v--sm{ font-size:14px; font-weight:400; line-height:1.7; letter-spacing:-.01em; color:var(--dim); }
.viz__note{ display:block; margin-top:4px; font-size:12px; color:var(--mute); }

/* ads */
.ads{ margin-top:clamp(64px,8vw,96px); }
.ads__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.ads__i{ display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--glass); }
.ads__i > span{ font-size:12px; color:var(--mute); }
.ads__i b{ font-size:clamp(32px,3.2vw,44px); font-weight:300; line-height:1; letter-spacing:-.04em; }
.ads__i b i{ font-style:normal; font-size:.5em; margin-left:2px; color:var(--dim); }
.ads__i > i{ font-style:normal; font-size:12px; color:var(--mute); }

/* pnl */
.pnl{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pnl__i{
  display:flex; flex-direction:column; gap:12px;
  padding:26px 24px; border-radius:var(--r-lg); border:1px solid var(--line);
  background:radial-gradient(90% 90% at 50% 130%, rgba(var(--fog),.28), transparent 70%), var(--glass);
}
.pnl__i span{ font-size:12px; color:var(--mute); }
.pnl__i b{ font-size:clamp(44px,5vw,68px); font-weight:200; line-height:1; letter-spacing:-.05em; }
.pnl__i b i{ font-style:normal; font-size:.42em; margin-left:2px; color:var(--dim); font-weight:400; }

/* gauge */
.gauge{ display:flex; flex-direction:column; gap:18px; }
.gauge__row{ display:grid; grid-template-columns:1fr auto; gap:8px 14px; align-items:center; }
.gauge__k{ grid-column:1 / -1; font-size:13px; color:var(--dim); }
.gauge__bar{ height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.gauge__bar i{
  display:block; height:100%; width:var(--p); border-radius:4px;
  background:linear-gradient(90deg, rgba(191,211,242,.35), var(--ice));
  transform-origin:left; transform:scaleX(0); transition:transform 1.6s var(--ease) .2s;
}
.gauge.in .gauge__bar i{ transform:scaleX(1); }
.gauge__v{ font-size:15px; font-weight:500; }

/* figures */
.ch__fig img{ width:100%; border-radius:var(--r-lg); }
.bleed{ margin-top:clamp(56px,7vw,88px); }
.bleed img{ width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:28px; }

.pat{ margin-top:clamp(72px,9vw,120px); }
.pat__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pat__grid img{ width:100%; aspect-ratio:4/5; object-fit:contain; background:#0D0E11; border-radius:var(--r-md); border:1px solid var(--line-soft); }
.pat__grid figcaption{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:13.5px; font-weight:600; color:var(--fg); letter-spacing:-.02em; }
.pat__grid figcaption i{ font-style:normal; font-weight:400; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }

.mosaic{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,16vw,240px);
  gap:10px; margin-top:clamp(48px,6vw,80px);
}
.m{ display:flex; flex-direction:column; min-height:0; }
.m--w{ grid-column:span 2; }
.m img{ flex:1; min-height:0; width:100%; object-fit:cover; border-radius:var(--r-sm); }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:clamp(56px,7vw,88px); }
.stat{ display:flex; flex-direction:column; gap:10px; padding:24px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--glass); }
.stats .stat:nth-child(2){ transition-delay:.08s; }
.stats .stat:nth-child(3){ transition-delay:.16s; }
.stat__k{ font-size:12px; color:var(--mute); }
.stat__v{ font-size:clamp(24px,2.4vw,32px); font-weight:300; letter-spacing:-.04em; line-height:1.2; }
.stat__v b{ font-weight:300; }
.stat__v em{ color:var(--mute); }
.stat__d{ font-size:13px; color:var(--dim); }

/* ══════════════ CREDENTIAL ══════════════ */

.cred{ padding-top:var(--space); }
.cred__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"para stack" "rot stack";
  gap:clamp(32px,5vw,64px);
}
.cred__para{
  grid-area:para;
  font-size:clamp(26px,3vw,40px); font-weight:500; line-height:1.38; letter-spacing:-.045em;
}
.cred__stack{ grid-area:stack; position:relative; min-height:660px; }
.kc{
  position:absolute; width:min(300px,78%);
  display:flex; flex-direction:column; gap:10px;
  padding:26px 26px 24px; border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(28,31,38,.94), rgba(12,13,16,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -20px rgba(0,0,0,.9), 0 0 40px rgba(var(--fog),.12);
  transition:transform 1.2s var(--ease), opacity 1s var(--ease);
}
.kc:nth-child(1){ top:0;     left:4%;  --rot:-6deg; }
.kc:nth-child(2){ top:125px; left:38%; --rot:5deg; }
.kc:nth-child(3){ top:255px; left:0;   --rot:-3deg; }
.kc:nth-child(4){ top:380px; left:34%; --rot:6deg; }
.kc:nth-child(5){ top:505px; left:6%;  --rot:-4deg; }
.kc{ transform:rotate(var(--rot)); }
.js .cred__stack .kc{ opacity:0; transform:translateY(80px) rotate(calc(var(--rot) * 2.4)); }
.js .cred__stack.in .kc{ opacity:1; transform:rotate(var(--rot)); transition-delay:calc(var(--i) * .12s); }
.kc:hover{ z-index:2; }
.kc b{ font-size:clamp(44px,4.6vw,62px); font-weight:300; line-height:1; letter-spacing:-.05em; }
.kc span:not(.cur){ font-size:14px; color:var(--dim); }
.cred__rot{ grid-area:rot; align-self:end; }
.cred__rot-k{ display:block; font-size:12px; color:var(--mute); margin-bottom:18px; }
.cycle li{
  font-family:var(--f-serif); font-size:clamp(28px,3vw,40px); line-height:1.2;
  color:rgba(255,255,255,.18); transition:color .6s, text-shadow .6s;
}
.cycle li.is-on{ color:var(--fg); font-style:italic; text-shadow:0 0 30px rgba(160,195,245,.5); }

/* ══════════════ ABOUT ══════════════ */

.about{ padding-top:var(--space); }
.about__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,64px); align-items:start; }
.about__visual{ position:sticky; top:100px; }
.about__sign{
  position:relative;
  aspect-ratio:4/5; border-radius:30px; overflow:hidden;
  border:1px solid var(--line);
  background:#060709;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px;
  padding-bottom:28px;
}
.about__sign > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 18%;
}
.about__sign::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.92) 100%);
}
.about__sign > span{ z-index:1; }
.about__sub{
  position:absolute; right:-22px; top:40px; z-index:2;
  width:34%; aspect-ratio:3/4;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
  transform:rotate(4deg);
  transition:transform .8s var(--ease);
}
.about__sub:hover{ transform:rotate(0deg) scale(1.03); }
.about__sub img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.about__arc{
  position:absolute; left:-40%; width:180%; aspect-ratio:1; top:82%; z-index:1;
  border-radius:50%;
  border-top:1px solid rgba(210,225,255,.55);
  box-shadow:0 -30px 90px -30px rgba(150,185,240,.55), inset 0 30px 80px -40px rgba(150,185,240,.4);
}
.about__script{
  position:relative;
  font-family:var(--f-script); font-size:clamp(52px,5.6vw,84px); line-height:1.2;
  text-shadow:0 0 40px rgba(160,195,245,.35);
  padding:0 .1em;
}
.about__names{ position:relative; font-size:11px; letter-spacing:.24em; color:var(--dim); }

.badges{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:44px; }
.badge{ padding:20px 18px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--glass); }
.badge iconify-icon,.tcard iconify-icon,.vcard iconify-icon{ display:flex; width:fit-content; }
.badge iconify-icon{ color:var(--ice); margin-bottom:14px; }
.badge .sec-label{ font-size:10px; }
.badge h3{ margin-top:8px; font-size:14.5px; font-weight:600; line-height:1.45; letter-spacing:-.025em; }
.badge h3 i{ display:block; margin-top:2px; font-style:normal; font-weight:400; font-size:12px; color:var(--mute); }
.badge p{ margin-top:8px; font-size:12.5px; line-height:1.6; color:var(--dim); }

.about__profile{ margin-top:16px; }
.about__profile .lead{ font-size:clamp(20px,2vw,26px); font-weight:500; line-height:1.55; letter-spacing:-.035em; }
.about__profile p:not(.lead){ margin-top:18px; font-size:16px; line-height:1.9; color:var(--dim); }

/* tools */
.tools{ margin-top:clamp(72px,9vw,112px); }
.tools > .sec-label{ display:block; text-align:center; margin-bottom:22px; }
.tools__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tools__grid .tcard:nth-child(2){ transition-delay:.06s; }
.tools__grid .tcard:nth-child(3){ transition-delay:.12s; }
.tools__grid .tcard:nth-child(4){ transition-delay:.18s; }
.tcard{ padding:24px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--glass); }
.tcard iconify-icon{ color:var(--ice); margin-bottom:16px; }
.tcard h3{ font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:28px; line-height:1; }
.tcard p{ margin:10px 0 16px; font-size:14px; line-height:1.7; color:var(--dim); }
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chips span,.chips li{ padding:6px 12px; border-radius:999px; border:1px solid var(--line); font-size:12.5px; color:var(--dim); background:rgba(255,255,255,.02); }

/* career accordion */
.career{ margin-top:clamp(96px,12vw,160px); }
.career__head{ text-align:center; margin-bottom:clamp(36px,5vw,56px); }
.career__title{ margin-top:14px; font-family:var(--f-serif); font-weight:400; font-size:clamp(52px,7vw,96px); line-height:1; }
.career__title em{ font-style:italic; }
.career__desc{ margin:16px auto 0; max-width:46ch; font-size:15.5px; line-height:1.75; color:var(--dim); }

.acc{ border-top:1px solid var(--line); }
.acc__i{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; text-align:left;
  display:grid; grid-template-columns:56px 180px minmax(0,1fr) 28px; gap:16px; align-items:center;
  padding:24px 0;
  transition:color .3s;
}
.acc__btn:hover .acc__t{ color:var(--ice); }
.acc__n{ font-family:var(--f-serif); font-style:italic; font-size:24px; color:var(--mute); line-height:1; }
.acc__p{ font-size:13px; color:var(--mute); }
.acc__t{ font-size:clamp(16px,1.5vw,19px); font-weight:600; letter-spacing:-.03em; transition:color .3s; }
.acc__t em{ font-weight:400; color:var(--dim); margin-left:8px; }
.acc__x{ position:relative; width:18px; height:18px; justify-self:end; }
.acc__x::before,.acc__x::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:1.5px; background:var(--dim); transition:transform .5s var(--ease); }
.acc__x::after{ transform:rotate(90deg); }
.acc__i.is-open .acc__x::after{ transform:rotate(0deg); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
.acc__i.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__in{ overflow:hidden; padding-left:268px; }
.acc__in p{ font-size:15px; line-height:1.8; color:var(--dim); max-width:62ch; }
.acc__in .chips{ margin:16px 0 26px; }
.no-js .acc__panel{ grid-template-rows:1fr; }

/* ══════════════ ARC QUOTES ══════════════ */

.arc{ padding-top:var(--space); width:100% !important; overflow:hidden; }
.arc__stage{
  position:relative; height:clamp(380px,34vw,440px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.qc{
  position:absolute; left:50%; top:20px;
  width:min(330px,78vw); margin-left:calc(min(330px,78vw) / -2);
  padding:26px 26px 24px; border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(26,29,36,.95), rgba(11,12,15,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -24px rgba(0,0,0,.9);
  transform-origin:50% 50%;
  will-change:transform, opacity;
}
.qc iconify-icon{ color:var(--ice); }
.qc p{ margin-top:14px; font-size:15px; line-height:1.75; color:var(--fg); letter-spacing:-.02em; }
.qc p em{ color:var(--ice); }
.qc cite{ display:block; margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); font-style:normal; font-size:12px; letter-spacing:.06em; color:var(--mute); }
.qc--clone{ pointer-events:none; }
.arc.static .arc__stage{ height:auto; display:flex; gap:14px; overflow-x:auto; padding:0 var(--pad); -webkit-mask-image:none; mask-image:none; }
.arc.static .qc{ position:relative; left:auto; top:auto; margin:0; flex:0 0 min(330px,78vw); transform:none !important; opacity:1 !important; }

/* ══════════════ VISION / CTA ══════════════ */

.vision{ padding-top:var(--space); }
.vision__panel{
  position:relative; overflow:hidden;
  padding:clamp(64px,9vw,124px) clamp(24px,5vw,64px);
  border-radius:32px; border:1px solid var(--line);
  text-align:center;
  background:radial-gradient(70% 80% at 50% 120%, rgba(var(--fog),.5), transparent 70%), #050608;
}
.vision__bg{
  position:absolute !important; right:0; top:0; height:100%; width:38%;
  object-fit:cover; object-position:45% 22%;
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 45%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 45%);
  pointer-events:none;
}
.vision__streaks{ position:absolute; inset:0; pointer-events:none; }
.vision__streaks i{
  position:absolute; top:-30%; width:1px; height:160%;
  background:linear-gradient(180deg, transparent, rgba(200,220,255,.55), transparent);
  box-shadow:0 0 18px rgba(160,195,245,.45);
  transform:rotate(24deg);
  animation:streak 7s var(--ease-io) infinite;
}
.vision__streaks i:nth-child(1){ left:12%; animation-delay:0s; }
.vision__streaks i:nth-child(2){ left:30%; animation-delay:1.4s; opacity:.6; }
.vision__streaks i:nth-child(3){ left:54%; animation-delay:2.8s; }
.vision__streaks i:nth-child(4){ left:72%; animation-delay:.7s; opacity:.5; }
.vision__streaks i:nth-child(5){ left:90%; animation-delay:2.1s; }
@keyframes streak{
  0%{ transform:translate3d(0,-30%,0) rotate(24deg); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translate3d(0,30%,0) rotate(24deg); opacity:0; }
}
.vision__panel > *{ position:relative; }
.vision__title{
  margin-top:18px;
  font-size:clamp(34px,4.8vw,64px); font-weight:500; line-height:1.18; letter-spacing:-.05em;
}
.vision__title em{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.45));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vision__lead{ margin:22px auto 0; max-width:40ch; font-size:clamp(16px,1.4vw,19px); line-height:1.7; color:var(--dim); }
.vision__lead em{ color:var(--fg); }
.vision__panel .pill{ margin-top:34px; }
.vision__text{ max-width:720px; margin:clamp(48px,6vw,80px) auto 0; }
.vision__text p{ font-size:16.5px; line-height:1.9; color:var(--dim); }
.vision__text p + p{ margin-top:18px; }

.next{ margin-top:clamp(72px,9vw,112px); }
.next__head{ text-align:center; margin-bottom:32px; }
.next__head h3{ margin-top:14px; font-size:clamp(22px,2.4vw,30px); font-weight:500; line-height:1.4; letter-spacing:-.04em; }
.next__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.next__grid .vcard:nth-child(2){ transition-delay:.06s; }
.next__grid .vcard:nth-child(3){ transition-delay:.12s; }
.next__grid .vcard:nth-child(4){ transition-delay:.18s; }
.vcard{
  position:relative; padding:24px 22px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--glass);
  font-size:13.5px; line-height:1.65; color:var(--dim);
}
.vcard iconify-icon{ color:var(--ice); margin-bottom:22px; }
.vcard span{ position:absolute; top:20px; right:22px; font-family:var(--f-serif); font-style:italic; font-size:22px; color:var(--mute); }
.vcard b{ display:block; margin-bottom:6px; font-size:17px; font-weight:600; color:var(--fg); letter-spacing:-.03em; }

/* ══════════════ CONTACT ══════════════ */

.contact{ padding:var(--space) 0 clamp(80px,10vw,140px); }
.contact__title{
  font-family:var(--f-sans); font-weight:400;
  font-size:clamp(40px,6vw,84px); line-height:1.1; letter-spacing:-.055em;
}
.contact__title em{ font-style:normal; color:var(--mute); }
.contact__box{
  max-width:720px; margin:0 auto;
  display:flex; flex-direction:column; gap:12px;
  padding:clamp(18px,2.6vw,28px); border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.field{
  display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:20px 22px; border-radius:16px;
  border:1px solid var(--line); background:rgba(0,0,0,.4);
  transition:border-color .3s, background .3s;
}
.field:hover{ border-color:rgba(191,211,242,.4); background:rgba(0,0,0,.6); }
.field__k{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.field__v{ font-size:clamp(15px,1.6vw,18px); font-weight:500; letter-spacing:-.02em; overflow-wrap:anywhere; }
.field iconify-icon{ color:var(--mute); }
.contact__send{
  display:flex; justify-content:center; align-items:center; gap:10px;
  margin-top:4px; padding:18px; border-radius:16px;
  background:var(--fg); color:#000; font-weight:600; font-size:15px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.contact__send:hover{ transform:translateY(-2px); box-shadow:0 0 40px rgba(191,211,242,.35); }
.contact__actions{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:10px; margin-top:4px; }
.contact__actions .contact__send{ margin-top:0; }
.contact__alt{
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding:18px; border-radius:16px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:var(--fg); font-weight:500; font-size:14.5px;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.contact__alt:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); }
@media (max-width:560px){ .contact__actions{ grid-template-columns:1fr; } }
.call{
  max-width:720px; margin:14px auto 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 28px; border-radius:24px;
  border:1px solid var(--line);
  background:radial-gradient(70% 140% at 100% 50%, rgba(var(--fog),.3), transparent 70%), rgba(255,255,255,.02);
}
.call__num{ margin-top:6px; font-size:clamp(24px,2.6vw,32px); font-weight:300; letter-spacing:-.04em; }

/* ══════════════ FOOTER ══════════════ */

.foot{
  position:relative; z-index:1; overflow:hidden;
  width:min(var(--wrap), 100% - var(--pad)*2); margin:0 auto;
  padding-top:clamp(56px,7vw,88px);
  border-top:1px solid var(--line);
}
.foot__grid{ display:grid; grid-template-columns:1.3fr .7fr 1fr; gap:32px; }
.foot__name{ font-family:var(--f-serif); font-size:clamp(36px,3.6vw,48px); line-height:1; }
.foot__name em{ font-style:italic; }
.foot__tag{ margin-top:16px; font-size:13.5px; line-height:1.7; color:var(--dim); }
.foot__links{ display:flex; flex-direction:column; gap:10px; font-size:15px; }
.foot__links a{ color:var(--dim); transition:color .3s; }
.foot__links a:hover{ color:var(--fg); }
.foot__mail{ display:flex; flex-direction:column; gap:8px; font-size:14px; }
.foot__mail span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.foot__mail a{ color:var(--fg); overflow-wrap:anywhere; }
.foot__up{ margin-top:14px; color:var(--mute) !important; font-size:13px; }
.foot__bottom{ margin-top:48px; padding:22px 0; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--mute); }
.foot__mark{
  font-family:var(--f-script);
  font-size:clamp(110px,21vw,300px); line-height:1.05;
  text-align:center; white-space:nowrap;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:-.28em; user-select:none;
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:80;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  padding:12px 20px; border-radius:999px;
  font-size:13.5px; background:rgba(20,22,27,.95); border:1px solid rgba(255,255,255,.14);
  transition:opacity .4s, transform .5s var(--ease);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ══════════════ RESPONSIVE ══════════════ */

@media (max-width:980px){
  .next__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .badges{ grid-template-columns:1fr; }
  .acc__btn{ grid-template-columns:44px 150px minmax(0,1fr) 22px; }
  .acc__in{ padding-left:226px; }
}

@media (max-width:860px){
  .hero__meta{ top:84px; flex-direction:column; align-items:center; gap:4px; }
  .hero__portrait{ top:128px; width:min(360px,78vw); }

  .statement{ height:200vh; }

  .svc{ grid-template-columns:1fr; gap:26px; }
  .svc--r .svc__visual{ order:0; }
  .svc__visual{ aspect-ratio:16/10; }

  .wgrid{ grid-template-columns:1fr; }
  .wc--cta{ grid-column:auto; }

  .flagbar{ grid-template-columns:repeat(2,1fr); }
  .flagbar__i--hi{ grid-column:span 2; }
  .flagbar--4 .flagbar__i--hi{ grid-column:auto; }

  .ch__body{ grid-template-columns:1fr; }
  .ch__side .glass{ position:static; }
  .case__grid{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .ytpair{ grid-template-columns:1fr; }
  .leeds__grid{ grid-template-columns:repeat(2,1fr); }
  .reel__grid{ grid-template-columns:1fr; gap:12px; }
  .reel__grid .reel__frame{ width:min(340px,78vw); height:auto; aspect-ratio:9/16; margin:0 auto; }
  .reel__photos{ grid-template-columns:repeat(2,1fr); }
  .works__list li{ grid-template-columns:1fr; gap:4px; }
  .works__list i{ text-align:left; }

  .phones__grid{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:18px; padding:0 4px 12px; justify-content:flex-start;
    scrollbar-width:none;
  }
  .phones__grid::-webkit-scrollbar{ display:none; }
  .phone{ flex:0 0 64vw; width:64vw; max-width:260px; scroll-snap-align:center; }

  .viz{ grid-template-columns:1fr; }
  .ads__kpis,.pnl,.stats{ grid-template-columns:1fr; }
  .pat__grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(130px,34vw,220px); }

  .cred__grid{ grid-template-columns:1fr; grid-template-areas:"para" "stack" "rot"; }
  .cred__stack{ min-height:610px; }
  .kc{ width:min(260px,74%); }
  .kc:nth-child(2){ top:115px; left:24%; }
  .kc:nth-child(3){ top:235px; }
  .kc:nth-child(4){ top:350px; left:22%; }
  .kc:nth-child(5){ top:465px; left:4%; }

  .about__grid{ grid-template-columns:1fr; }
  .about__visual{ position:relative; top:0; width:min(100%,420px); margin:0 auto; }
  .about__sub{ right:-8px; top:24px; width:34%; }
  .vision__bg{ width:100%; opacity:.24; -webkit-mask-image:linear-gradient(180deg, transparent, #000 60%); mask-image:linear-gradient(180deg, transparent, #000 60%); }
  .tools__grid{ grid-template-columns:1fr; }

  .acc__btn{
    grid-template-columns:40px minmax(0,1fr) 22px;
    grid-template-areas:"n p x" "n t x";
    gap:4px 12px; padding:20px 0;
  }
  .acc__n{ grid-area:n; }
  .acc__p{ grid-area:p; }
  .acc__t{ grid-area:t; }
  .acc__t em{ display:block; margin:2px 0 0; font-size:14px; }
  .acc__x{ grid-area:x; }
  .acc__in{ padding-left:52px; }

  .foot__grid{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .next__grid{ grid-template-columns:1fr; }
  .field{ grid-template-columns:1fr auto; }
  .field__k{ grid-column:1 / -1; }
  .call{ flex-direction:column; align-items:flex-start; }
  .blockhead{ flex-direction:column; gap:6px; }
  .blockhead__note{ text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  [data-words] .w{ opacity:1; }
}