/* ============================================================
   UMC marketing team — AAA+ landing
   Palette: silver / chrome on near-black
============================================================ */
:root{
  --bg:#101319;
  --bg-2:#1a1e26;
  --bg-3:#22272f;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.085);
  --ink:#f6f7f9;
  --muted:#aab0bb;
  --faint:#737985;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.2);
  --silver-1:#ffffff;
  --silver-2:#d6dae1;
  --silver-3:#a3a9b4;
  --silver-4:#7a808c;
  --chrome:linear-gradient(120deg,#ffffff 0%,#d2d5db 22%,#9197a0 46%,#f2f4f7 64%,#a8aeb8 86%,#e6e9ee 100%);
  --maxw:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(150,160,180,.10),transparent 60%),
    radial-gradient(80% 50% at 100% 8%,rgba(120,130,150,.07),transparent 60%),
    linear-gradient(180deg,#13161c 0%,#101319 40%,#0d1015 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
@media (max-width:900px){ body{cursor:auto} }

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:#e9ebef;color:#0a0a0a}

.chrome{
  background:var(--chrome);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{to{background-position:200% center}}

/* ---------- overlays ---------- */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanline{position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0,transparent 2px,rgba(255,255,255,.012) 3px,transparent 4px);}

/* ---------- living bg field ---------- */
.bg-field{position:fixed;inset:0;z-index:-5;pointer-events:none;overflow:hidden}
.bg-glyph{position:absolute;font-family:'Space Mono',monospace;color:#fff;line-height:1;will-change:transform;
  -webkit-text-fill-color:#fff;animation:glyphFloat var(--dur,20s) ease-in-out var(--delay,0s) infinite alternate}
.bg-glyph.word{font-family:'Space Grotesk',sans-serif;letter-spacing:.04em}
@keyframes glyphFloat{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(var(--dx,20px),var(--dy,-26px)) rotate(var(--rot,8deg))}}

/* ---------- cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.5);transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s,opacity .3s}
.cursor-ring.is-hover{width:64px;height:64px;border-color:transparent;background:rgba(255,255,255,.1);backdrop-filter:blur(2px)}
.cursor-ring.is-label{width:78px;height:78px;background:#f4f5f7;border-color:transparent}
.cursor-ring[data-label]::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;color:#0a0a0a;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
@media (max-width:900px){.cursor-dot,.cursor-ring{display:none}}

/* ---------- progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9996;background:transparent}
.progress span{display:block;height:100%;width:0;background:var(--chrome);background-size:200%}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:10001;background:var(--bg);display:grid;place-items:center}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:26px;width:min(360px,72vw)}
.loader__logo img{width:200px;opacity:0;transform:translateY(12px);animation:lFade .9s var(--ease) .1s forwards}
@keyframes lFade{to{opacity:1;transform:none}}
.loader__bar{width:100%;height:1px;background:var(--line-2);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--chrome);background-size:200%}
.loader__count{font-family:'Space Mono',monospace;font-size:13px;color:var(--muted);letter-spacing:.1em}
.loader__count i{color:var(--faint)}
.loader.is-done{transform:translateY(-100%);transition:transform 1s var(--ease-2)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,56px);transition:padding .4s var(--ease),background .4s}
.nav.is-scrolled{padding-top:14px;padding-bottom:14px;background:rgba(6,6,7,.6);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__brand img{width:118px;transition:opacity .3s}
.nav__brand:hover img{opacity:.75}
.nav__links{display:flex;gap:30px}
.nav__links a{font-size:13.5px;color:var(--muted);position:relative;transition:color .3s}
.nav__links a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--silver-2);transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border:1px solid var(--line-2);border-radius:100px;font-size:13.5px;
  color:var(--ink);background:rgba(255,255,255,.02);transition:background .35s,border-color .35s,gap .3s}
.nav__cta:hover{background:rgba(255,255,255,.08);border-color:var(--silver-3);gap:12px}
.nav__cta svg{transition:transform .35s var(--ease)}
.nav__cta:hover svg{transform:translateX(3px)}
.nav__menu-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:46px;height:46px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:50%;cursor:none;transition:background .3s,transform .3s var(--ease);margin-left:18px}
.nav__menu-btn:hover{background:rgba(255,255,255,.12)}
.nav__menu-btn span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease),opacity .25s}
.nav.menu-open .nav__menu-btn span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav.menu-open .nav__menu-btn span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
@media (max-width:860px){ .nav__links,.nav__cta{display:none} }

/* ---------- fullscreen menu ---------- */
.menu{position:fixed;inset:0;z-index:8900;visibility:hidden;pointer-events:none}
.menu.is-open{visibility:visible;pointer-events:auto}
.menu__bg{position:absolute;inset:0;background:rgba(10,12,16,.86);backdrop-filter:blur(20px);opacity:0;transition:opacity .5s var(--ease)}
.menu.is-open .menu__bg{opacity:1}
.menu__inner{position:relative;height:100%;max-width:var(--maxw);margin:0 auto;padding:140px clamp(20px,5vw,56px) 60px;
  display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}
.menu__nav{display:flex;flex-direction:column;gap:6px}
.menu__nav a{display:flex;align-items:baseline;gap:20px;font-family:'Space Grotesk',sans-serif;font-weight:500;
  font-size:clamp(30px,5.2vw,64px);letter-spacing:-.02em;color:var(--ink);text-transform:lowercase;line-height:1.1;
  opacity:0;transform:translateY(28px);transition:color .3s}
.menu.is-open .menu__nav a{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s}
.menu.is-open .menu__nav a:nth-child(1){transition-delay:.08s}
.menu.is-open .menu__nav a:nth-child(2){transition-delay:.13s}
.menu.is-open .menu__nav a:nth-child(3){transition-delay:.18s}
.menu.is-open .menu__nav a:nth-child(4){transition-delay:.23s}
.menu.is-open .menu__nav a:nth-child(5){transition-delay:.28s}
.menu.is-open .menu__nav a:nth-child(6){transition-delay:.33s}
.menu.is-open .menu__nav a:nth-child(7){transition-delay:.38s}
.menu.is-open .menu__nav a:nth-child(8){transition-delay:.43s}
.menu__nav a i{font-family:'Space Mono',monospace;font-size:14px;font-style:normal;color:var(--silver-4);letter-spacing:.1em;width:34px;flex:none}
.menu__nav a:hover{color:transparent;background:var(--chrome);background-size:200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.menu__nav a:hover span{padding-left:10px;transition:padding .3s var(--ease)}
.menu__side{display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line);padding-left:clamp(20px,4vw,50px)}
.menu__label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver-4);margin-bottom:6px}
.menu__label--2{margin-top:22px}
.menu__contact{font-size:15px;color:var(--muted);transition:color .3s,transform .3s var(--ease);width:fit-content}
.menu__contact:hover{color:var(--ink);transform:translateX(5px)}
@media (max-width:780px){
  .menu__inner{grid-template-columns:1fr;align-content:center;gap:30px;padding-top:120px}
  .menu__side{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:26px}
}

/* ---------- layout ---------- */
section{position:relative}
.section-head{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px) 48px}
.section-head.center{text-align:center}
.kicker{display:inline-block;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--silver-3);margin-bottom:22px}
.kicker.center{display:block;text-align:center}
.section-title{font-family:'Space Grotesk',sans-serif;font-weight:500;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(34px,5.4vw,72px)}
.section-sub{margin-top:20px;max-width:560px;color:var(--muted);font-size:clamp(15px,1.5vw,18px)}
.section-head.center .section-sub{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:100px;font-size:15px;font-weight:500;letter-spacing:.01em;overflow:hidden;
  transition:transform .4s var(--ease),color .4s}
.btn span{position:relative;z-index:2}
.btn--solid{color:#0a0a0a;background:var(--silver-1)}
.btn--solid::before{content:'';position:absolute;inset:0;background:var(--chrome);background-size:200%;z-index:1;transition:opacity .4s;animation:shine 6s linear infinite}
.btn--solid:hover{transform:translateY(-3px)}
.btn--ghost{color:var(--ink);border:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.btn--ghost::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.08);z-index:1;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.btn--ghost:hover::before{transform:scaleX(1)}
.btn--ghost:hover{transform:translateY(-3px)}
.btn--lg{padding:22px 46px;font-size:18px}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:140px clamp(20px,5vw,56px) 60px;max-width:var(--maxw);margin:0 auto;overflow:hidden}
.hero__mesh{position:absolute;inset:-20% -10% auto;height:90%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 50% at 25% 20%,rgba(180,186,196,.16),transparent 70%),
    radial-gradient(46% 56% at 80% 30%,rgba(120,126,136,.14),transparent 72%),
    radial-gradient(40% 40% at 60% 70%,rgba(220,224,230,.08),transparent 70%);
  filter:blur(8px);animation:meshFloat 16s ease-in-out infinite alternate}
@keyframes meshFloat{to{transform:translate3d(3%, -2%,0) scale(1.08)}}
.hero__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%,#000 30%,transparent 75%)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--silver-3);margin-bottom:34px}
.hero__eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--silver-1);box-shadow:0 0 14px var(--silver-2);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero__title{font-family:'Space Grotesk',sans-serif;font-weight:500;line-height:.96;letter-spacing:-.03em;
  font-size:clamp(48px,10.5vw,150px);text-transform:lowercase}
.hero__title .line{display:block;overflow:hidden;padding:.12em 0;margin:-.12em 0}
.hero__title .word{display:inline-block;will-change:transform}
.hero__title .dot{color:var(--silver-3);-webkit-text-fill-color:var(--silver-3)}
.hero__lead{max-width:520px;margin-top:34px;font-size:clamp(16px,1.8vw,20px);color:var(--muted)}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:42px}
.hero__meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:70px}
.meta-card{flex:1;min-width:150px;padding:24px 26px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 40px rgba(0,0,0,.3);
  transition:border-color .4s,transform .4s var(--ease)}
.meta-card:hover{border-color:var(--line-2);transform:translateY(-4px)}
.meta-card b{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,4vw,52px);font-weight:500;line-height:1}
.meta-card span{display:block;margin-top:8px;font-size:13.5px;color:var(--faint)}
.hero__scroll{position:absolute;left:clamp(20px,5vw,56px);bottom:34px;display:flex;align-items:center;gap:12px;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.hero__scroll i{width:1px;height:40px;background:linear-gradient(var(--silver-2),transparent);animation:scrollLine 2s infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* hero data viz */
.hero__viz{position:absolute;top:50%;right:clamp(20px,4vw,56px);transform:translateY(-46%);width:min(40vw,420px);height:360px;z-index:-1;pointer-events:none}
.hero__chart{position:absolute;inset:auto 0 30px 0;width:100%;height:200px;opacity:.9}
.hero__line{stroke-dasharray:760;stroke-dashoffset:760;animation:draw 2.6s var(--ease) .9s forwards}
.hero__area{opacity:0;animation:areaIn 1.4s ease 1.8s forwards}
.hero__dotend{opacity:0;animation:dotIn .5s ease 3.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes areaIn{to{opacity:1}}
@keyframes dotIn{to{opacity:1}}
.hero__dotend{filter:drop-shadow(0 0 8px #fff)}
.hero__bars{position:absolute;left:0;bottom:0;display:flex;align-items:flex-end;gap:7px;height:64px;opacity:.5}
.hero__bars i{width:14px;background:linear-gradient(var(--silver-2),var(--silver-4));border-radius:3px 3px 0 0;animation:barGrow 2.4s var(--ease) infinite alternate}
.hero__bars i:nth-child(1){height:30%;animation-delay:0s}.hero__bars i:nth-child(2){height:55%;animation-delay:.2s}
.hero__bars i:nth-child(3){height:40%;animation-delay:.4s}.hero__bars i:nth-child(4){height:72%;animation-delay:.6s}
.hero__bars i:nth-child(5){height:50%;animation-delay:.8s}.hero__bars i:nth-child(6){height:88%;animation-delay:1s}
.hero__bars i:nth-child(7){height:64%;animation-delay:1.2s}.hero__bars i:nth-child(8){height:100%;animation-delay:1.4s}
@keyframes barGrow{from{transform:scaleY(.82)}to{transform:scaleY(1)}}
.chip{position:absolute;display:inline-flex;align-items:center;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--ink);
  padding:9px 14px;border:1px solid var(--line-2);border-radius:100px;background:rgba(12,13,16,.65);backdrop-filter:blur(8px);white-space:nowrap;
  box-shadow:0 8px 30px rgba(0,0,0,.4);animation:chipFloat 6s ease-in-out infinite}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--silver-1);margin-right:8px;box-shadow:0 0 8px var(--silver-2)}
.chip--a{top:2%;right:8%;animation-delay:0s}
.chip--b{top:24%;right:46%;animation-delay:.8s}
.chip--c{top:46%;right:2%;animation-delay:1.4s}
.chip--d{top:70%;right:40%;animation-delay:.4s}
.chip--e{top:88%;right:6%;animation-delay:1.1s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:1024px){.hero__viz{display:none}}

/* ============ MARQUEE ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;
  background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2))}
.marquee__track{display:flex;align-items:center;gap:30px;white-space:nowrap;width:max-content;animation:marq 28s linear infinite}
.marquee__track span{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,3vw,34px);font-weight:500;letter-spacing:.02em;color:var(--silver-2)}
.marquee__track b{color:var(--silver-4)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ ABOUT ============ */
.about{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,12vw,150px) clamp(20px,5vw,56px)}
.about__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.about__statement{font-family:'Space Grotesk',sans-serif;font-weight:400;line-height:1.16;letter-spacing:-.015em;
  font-size:clamp(26px,3.4vw,46px)}
.about__statement em{font-style:normal}
.about__col p{color:var(--muted);font-size:16.5px;margin-bottom:18px}
.about__points{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:12px}
.about__points li{position:relative;padding-left:26px;color:var(--ink);font-size:15.5px}
.about__points li::before{content:'';position:absolute;left:0;top:.55em;width:12px;height:1px;background:var(--silver-2)}
@media (max-width:820px){.about__grid{grid-template-columns:1fr}}

/* ============ SERVICES ============ */
.services{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,8vw,90px) clamp(20px,5vw,56px) clamp(90px,12vw,140px)}
.services__list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{position:relative;padding:36px 30px 30px;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.022));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.32);
  transition:border-color .5s,transform .5s var(--ease)}
.svc::after{content:'';position:absolute;inset:0;border-radius:20px;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 60%)}
.svc:hover{border-color:var(--line-2);transform:translateY(-6px)}
.svc:hover::after{opacity:1}
.svc__no{font-family:'Space Mono',monospace;font-size:12px;color:var(--silver-4);letter-spacing:.1em}
.svc h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:23px;margin:18px 0 12px;letter-spacing:-.01em}
.svc p{color:var(--muted);font-size:15px;line-height:1.55}
.svc ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.svc ul li{font-size:12px;color:var(--silver-3);padding:5px 12px;border:1px solid var(--line);border-radius:100px}
.svc__arrow{position:absolute;top:30px;right:28px;font-style:normal;font-size:20px;color:var(--silver-4);transition:transform .45s var(--ease),color .45s}
.svc:hover .svc__arrow{transform:translate(4px,-4px);color:var(--silver-1)}
@media (max-width:900px){.services__list{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.services__list{grid-template-columns:1fr}}

/* ============ STATS BAND ============ */
.band{max-width:var(--maxw);margin:0 auto;padding:46px clamp(20px,5vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band__item{display:flex;flex-direction:column;gap:6px}
.band__item b{font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,6vw,72px);font-weight:500;line-height:1;
  background:var(--chrome);background-size:200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.band__item span{font-size:13px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
.band__sep{width:1px;height:54px;background:var(--line-2)}
@media (max-width:720px){.band{justify-content:center;gap:36px}.band__sep{display:none}}

/* ============ WORK ============ */
.work{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,12vw,150px) clamp(20px,5vw,56px)}
.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:50px}
.proj{position:relative;padding:30px 26px 70px;border:1px solid var(--line);border-radius:20px;min-height:230px;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(255,255,255,.085),rgba(255,255,255,.022));overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.32);
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:border-color .5s,transform .5s var(--ease)}
.proj::before{content:'';position:absolute;inset:0;background:var(--chrome);opacity:0;transition:opacity .5s;mix-blend-mode:overlay}
.proj:hover{border-color:var(--line-2);transform:translateY(-6px)}
.proj:hover::before{opacity:.10}
.proj__tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-3)}
.proj h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:27px;margin:14px 0 14px;letter-spacing:-.01em}
.proj__metric{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:34px;line-height:1;letter-spacing:-.02em}
.proj__metric-sub{display:block;margin-top:8px;font-size:12.5px;color:var(--silver-4);letter-spacing:.01em}
.proj p{color:var(--muted);font-size:14px;margin-top:16px;line-height:1.5}
.proj{min-height:300px}
.work__chips{display:flex;flex-wrap:wrap;gap:10px;margin:-18px 0 50px}
.work__chips span{font-size:12.5px;color:var(--silver-3);padding:8px 16px;border:1px solid var(--line);border-radius:100px}
.work__chips span:first-child{color:var(--faint);border-color:transparent;padding-left:0}
.proj i{position:absolute;bottom:26px;right:26px;font-style:normal;font-size:22px;color:var(--silver-4);transition:transform .45s var(--ease),color .45s}
.proj:hover i{transform:translate(4px,-4px);color:var(--silver-1)}
.work__all{display:inline-flex}

.work__grid--sq{grid-template-columns:repeat(4,1fr)}
.proj--sq{aspect-ratio:1;min-height:0;padding:22px 22px 54px;justify-content:flex-start}
.proj--sq h3{font-size:21px;margin:10px 0 auto;letter-spacing:-.01em}
.proj--sq .proj__metric{font-size:26px}
.proj--sq i{bottom:20px;right:20px;font-size:18px}
.work__live{margin-top:60px;padding-top:48px;border-top:1px solid var(--line)}
.work__live-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.work__live-head p{color:var(--muted);font-size:14px}
.work__grid--live{margin-bottom:0}
.proj--live{background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border-style:dashed}
.proj--live::after{content:'live';position:absolute;top:20px;right:20px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--silver-4);padding:4px 9px;border:1px solid var(--line-2);border-radius:100px}
.proj__metric-sub--live{display:block;margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--silver-3);letter-spacing:.01em;line-height:1.4}
@media (max-width:1080px){.work__grid--sq{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.work__grid--sq{grid-template-columns:repeat(2,1fr)}.proj--sq{aspect-ratio:auto;min-height:180px}}
@media (max-width:460px){.work__grid--sq{grid-template-columns:1fr}}
@media (max-width:900px){.work__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.work__grid{grid-template-columns:1fr}}

/* ============ FINDER / QUIZ ============ */
.finder{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,8vw,90px) clamp(20px,5vw,56px) clamp(90px,12vw,140px);position:relative}
.finder__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 40%,rgba(160,166,176,.12),transparent 70%)}
.quiz{max-width:760px;margin:0 auto;border:1px solid var(--line-2);border-radius:26px;padding:clamp(28px,4vw,52px);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));backdrop-filter:blur(10px);min-height:340px;position:relative;overflow:hidden}
.quiz__progress{height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-bottom:34px}
.quiz__progress span{display:block;height:100%;width:33%;background:var(--chrome);background-size:200%;transition:width .6s var(--ease)}
.quiz__step,.quiz__result{display:none}
.quiz__step.is-active,.quiz__result.is-active{display:block;animation:qIn .6s var(--ease)}
@keyframes qIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.quiz__q{display:block;font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-3);margin-bottom:26px}
.quiz__opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz__opts button{text-align:left;padding:22px 24px;border:1px solid var(--line-2);border-radius:16px;background:rgba(255,255,255,.02);
  color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:400;cursor:none;
  transition:border-color .35s,background .35s,transform .35s var(--ease)}
.quiz__opts button:hover{border-color:var(--silver-3);background:rgba(255,255,255,.07);transform:translateY(-3px)}
.quiz__result h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(26px,4vw,40px);margin:6px 0 14px;letter-spacing:-.01em}
.quiz__result p{color:var(--muted);font-size:17px;max-width:520px}
.quiz__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:32px}
.quiz__restart{background:none;border:none;color:var(--silver-3);font-size:14px;cursor:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.quiz__restart:hover{color:var(--ink);border-color:var(--silver-3)}
@media (max-width:560px){.quiz__opts{grid-template-columns:1fr}}

/* ============ PROCESS ============ */
.process{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,8vw,90px) clamp(20px,5vw,56px) clamp(90px,12vw,140px)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{padding:34px 26px;border-top:1px solid var(--line-2);transition:border-color .4s}
.step:hover{border-color:var(--silver-3)}
.step b{font-family:'Space Mono',monospace;font-size:14px;color:var(--silver-4);letter-spacing:.1em}
.step h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:21px;margin:18px 0 12px}
.step p{color:var(--muted);font-size:14.5px;line-height:1.55}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ============ CONTACT ============ */
.contact{position:relative;text-align:center;padding:clamp(110px,16vw,200px) clamp(20px,5vw,56px);overflow:hidden}
.contact__glow{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:120vw;height:120vw;max-width:1100px;max-height:1100px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(180,186,196,.14),transparent 60%)}
.contact__title{font-family:'Space Grotesk',sans-serif;font-weight:500;line-height:1.02;letter-spacing:-.025em;
  font-size:clamp(46px,9vw,120px);margin:24px 0 0}
.contact__title .line{display:block;overflow:hidden}
.contact__sub{margin:28px auto 0;max-width:480px;color:var(--muted);font-size:18px}
.contact__actions{margin-top:46px}
.contact__links{display:flex;justify-content:center;gap:30px;margin-top:50px;flex-wrap:wrap}
.contact__links a{font-size:14px;color:var(--muted);position:relative;transition:color .3s}
.contact__links a:hover{color:var(--ink)}

/* lead form */
.lead{max-width:760px;margin:48px auto 0;text-align:left;border:1px solid var(--line-2);border-radius:26px;
  padding:clamp(26px,4vw,46px);background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 80px rgba(0,0,0,.4)}
.lead__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:9px}
.field span{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-3)}
.field input,.field select,.field textarea{width:100%;padding:15px 18px;border:1px solid var(--line-2);border-radius:14px;
  background:rgba(8,10,14,.5);color:var(--ink);font-family:'Inter',sans-serif;font-size:15.5px;cursor:none;
  transition:border-color .3s,background .3s,box-shadow .3s}
.field textarea{resize:vertical;min-height:84px;line-height:1.5}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a3a9b4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--silver-3);background:rgba(8,10,14,.8);box-shadow:0 0 0 3px rgba(214,218,225,.08)}
.field.invalid input,.field.invalid textarea{border-color:#c96b5e;box-shadow:0 0 0 3px rgba(201,107,94,.12)}
.lead__chips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 18px}
.lead__chips button{padding:10px 18px;border:1px solid var(--line-2);border-radius:100px;background:rgba(255,255,255,.02);
  color:var(--muted);font-size:14px;font-family:'Inter',sans-serif;cursor:none;transition:all .3s var(--ease)}
.lead__chips button:hover{color:var(--ink);border-color:var(--silver-3)}
.lead__chips button.is-on{background:var(--silver-1);color:#0a0a0a;border-color:var(--silver-1)}
.lead__send{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.lead__send .btn{flex:1;min-width:200px}
.lead__note{margin-top:18px;font-size:12.5px;color:var(--faint);line-height:1.5}
.lead__note.ok{color:#7fd1a8}
.lead__note.err{color:#e0907f}
@media (max-width:600px){.lead__row{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--line);padding:60px clamp(20px,5vw,56px) 40px;max-width:var(--maxw);margin:0 auto}
.footer__top{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line)}
.footer__logo{width:150px}
.footer__tag{color:var(--muted);font-size:16px}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px;
  font-size:13px;color:var(--faint);font-family:'Space Mono',monospace;letter-spacing:.04em}

/* ============ BOUNDARY: old vs new ============ */
.boundary{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,8vw,90px) clamp(20px,5vw,56px) clamp(90px,12vw,140px)}
.ba{position:relative;width:100%;height:clamp(420px,50vw,560px);border-radius:24px;overflow:hidden;border:1px solid var(--line-2);user-select:none;touch-action:none;--pos:50}
@media (pointer:fine){.ba{cursor:none}}
.ba__old,.ba__new{position:absolute;inset:0;overflow:hidden}

/* OLD side */
.ba__old{background:linear-gradient(160deg,#42444a 0%,#26282c 60%,#1c1d20 100%);filter:saturate(.25)}
.ba__halftone{position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.35) 1px,transparent 1.5px);background-size:8px 8px;opacity:.55;mix-blend-mode:multiply}
.ba__pole{position:absolute;left:16%;top:-4%;bottom:-4%;width:30px;background:linear-gradient(90deg,#5a5c61,#8a8d93 45%,#4a4c50);box-shadow:0 0 40px rgba(0,0,0,.5)}
.flyer{position:absolute;left:50%;width:96px;background:#e9e6dd;box-shadow:0 6px 18px rgba(0,0,0,.45);padding:12px 0}
.flyer i{display:block;height:6px;background:#a39d92;margin:7px 12px;border-radius:2px}
.flyer i:first-child{width:55%;background:#6e685e}
.flyer.f1{top:10%;transform:translateX(-50%) rotate(-2deg)}
.flyer.f2{top:40%;transform:translateX(-46%) rotate(3deg)}
.flyer.f3{top:67%;transform:translateX(-52%) rotate(-3deg)}
.ba__poster{position:absolute;left:34%;top:24%;width:170px;padding:22px 18px 26px;background:#ded9cc;transform:rotate(-1.5deg);box-shadow:0 14px 40px rgba(0,0,0,.5);text-align:center}
.ba__poster b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:.04em;color:#23150f}
.ba__poster small{display:block;margin-top:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6e5a4e}
.ba__poster em{display:block;margin-top:12px;font-style:normal;font-family:'Space Mono',monospace;font-size:13px;color:#3a2a20}
.ba__poster .tear{position:absolute;left:0;right:0;bottom:-10px;height:14px;background:#ded9cc;clip-path:polygon(0 0,8% 60%,16% 10%,24% 70%,32% 20%,40% 80%,48% 15%,56% 70%,64% 25%,72% 80%,80% 20%,88% 65%,96% 15%,100% 60%,100% 0)}
.ba__billboard{position:absolute;left:7%;bottom:9%;width:150px;height:70px;border:6px solid #54565b;background:#c9b35a;display:grid;place-items:center;transform:rotate(.5deg);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ba__billboard span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:#2a2110;letter-spacing:.02em}
.ba__label{position:absolute;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:100px;backdrop-filter:blur(8px)}
.ba__label--old{left:18px;bottom:18px;background:rgba(0,0,0,.4);color:#cfcabd;border:1px solid rgba(255,255,255,.14)}

/* NEW side (clipped from left by --pos) */
.ba__new{clip-path:inset(0 0 0 calc(var(--pos) * 1%));background:radial-gradient(90% 90% at 70% 42%,#16181d,#070809)}
.ba__glow{position:absolute;inset:0;background:radial-gradient(42% 52% at 66% 44%,rgba(190,196,206,.26),transparent 72%)}
.ba__phone{position:absolute;right:16%;top:50%;transform:translateY(-50%);width:158px;height:316px;border-radius:30px;border:1px solid var(--line-2);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 6px #0a0b0d;padding:16px}
.ba__screen{position:relative;width:100%;height:100%;border-radius:18px;background:linear-gradient(180deg,#0e0f12,#050506);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ba__screen .play{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid var(--line-2);display:grid;place-items:center;color:#fff;font-size:16px;padding-left:3px;margin-bottom:6px}
.ba__screen b{font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:600;line-height:1}
.ba__screen small{font-size:11px;color:var(--silver-4);letter-spacing:.06em}
.ba__minibars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:12px}
.ba__minibars i{width:8px;background:linear-gradient(var(--silver-2),var(--silver-4));border-radius:2px;animation:barGrow 2s var(--ease) infinite alternate}
.ba__minibars i:nth-child(1){height:40%}.ba__minibars i:nth-child(2){height:70%;animation-delay:.2s}.ba__minibars i:nth-child(3){height:55%;animation-delay:.4s}.ba__minibars i:nth-child(4){height:90%;animation-delay:.6s}.ba__minibars i:nth-child(5){height:65%;animation-delay:.8s}
.nchip{position:absolute;font-family:'Space Mono',monospace;font-size:12px;color:var(--ink);padding:8px 14px;border:1px solid var(--line-2);border-radius:100px;background:rgba(12,13,16,.6);backdrop-filter:blur(8px);animation:chipFloat 5s ease-in-out infinite}
.nchip--1{top:16%;right:48%;animation-delay:0s}
.nchip--2{top:60%;right:50%;animation-delay:.7s}
.nchip--3{bottom:16%;right:44%;animation-delay:1.2s}
.ba__label--new{right:18px;bottom:18px;background:rgba(255,255,255,.08);color:var(--ink);border:1px solid var(--line-2)}

/* HANDLE */
.ba__handle{position:absolute;top:0;bottom:0;left:calc(var(--pos) * 1%);width:2px;background:linear-gradient(var(--silver-1),var(--silver-4));transform:translateX(-1px);z-index:6}
.ba__handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--silver-1);color:#0a0a0a;
  display:grid;place-items:center;font-style:normal;font-size:24px;font-weight:700;box-shadow:0 10px 34px rgba(0,0,0,.55);transition:transform .25s var(--ease)}
@media (pointer:fine){.ba__handle i{cursor:none}}
.ba.is-drag .ba__handle i{transform:translate(-50%,-50%) scale(.92)}
.boundary__hint{text-align:center;margin-top:26px;font-family:'Space Mono',monospace;font-size:12.5px;color:var(--faint);letter-spacing:.04em}
.boundary__hint b{color:var(--silver-2)}
@media (max-width:560px){.ba__phone{right:8%;width:130px;height:260px}.ba__poster{width:140px}}

/* ============ RETRO easter egg ============ */
.retro{position:fixed;inset:0;z-index:10002;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.retro.is-on{opacity:1;visibility:visible}
.retro__wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;background:#d6d0c1;filter:saturate(.5);
  clip-path:inset(0 0 0 0)}
.retro.tear .retro__wall{transition:clip-path 1s var(--ease-2);clip-path:inset(0 0 100% 0)}
.retro__wall span{display:grid;place-items:center;border:2px solid rgba(0,0,0,.12);font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(20px,4vw,52px);letter-spacing:.04em;color:#33312c;text-transform:uppercase;
  background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.5px);background-size:9px 9px}
.retro__wall span:nth-child(odd){background-color:#ccc6b6;transform:rotate(-1deg)}
.retro__wall span:nth-child(even){background-color:#ded9cb;transform:rotate(1deg)}
.retro__wall span:nth-child(3n){color:#7a2018}
.retro__msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:500;
  font-size:clamp(20px,3vw,34px);color:#fff;background:rgba(6,6,7,.78);padding:20px 30px;border-radius:16px;border:1px solid var(--line-2);opacity:0;white-space:nowrap}
.retro.is-on .retro__msg{opacity:1;transition:opacity .4s .25s}
.retro.tear .retro__msg{opacity:0;transition:opacity .3s}
@media (max-width:560px){.retro__msg{white-space:normal;width:80vw}}

/* ============ reveal states ============ */
.reveal-up{opacity:0;transform:translateY(40px)}
.reveal-up.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-line .chrome,.reveal-line em{display:inline}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal-up{opacity:1;transform:none}
  .hero__title .word{transform:none}
}

/* ============ REELS / SHOWREEL ============ */
.reels{position:relative;padding:clamp(80px,11vw,150px) var(--pad,clamp(20px,5vw,70px));max-width:var(--maxw);margin:0 auto}
.reels__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 80% 0%,rgba(210,215,225,.07),transparent 70%);}
.reels__viewport{position:relative;margin-top:48px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.reels__track{display:flex;gap:20px;width:max-content;animation:reelsScroll var(--reels-dur,50s) linear infinite}
.reels__viewport:hover .reels__track{animation-play-state:paused}
@keyframes reelsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reel{position:relative;display:flex;flex-direction:column;gap:0;border:0;padding:0;background:none;color:inherit;cursor:pointer;
  border-radius:20px;overflow:hidden;font:inherit;text-align:left;-webkit-appearance:none;appearance:none;
  flex:0 0 auto;width:260px}
.reel__media{position:relative;display:block;aspect-ratio:9/16;border-radius:20px 20px 0 0;overflow:hidden;
  border:1px solid var(--line);border-bottom:0;background:#0c0f14}
.reel__ph{position:absolute;inset:0;background:
  linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 40%),
  linear-gradient(40deg,#171b22,#23272f 55%,#171b22);
  background-size:200% 200%;animation:reelph 9s ease-in-out infinite}
@keyframes reelph{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
.reel__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.reel__vid.has-src{opacity:1}
.reel__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:rgba(8,9,11,.5);border:1px solid var(--line-2);backdrop-filter:blur(6px);
  transition:transform .45s var(--ease),background .45s,opacity .4s}
.reel__play i{width:0;height:0;border-left:15px solid var(--silver-1);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.reel:hover .reel__play{transform:translate(-50%,-50%) scale(1.1);background:rgba(8,9,11,.32)}
.reel.is-playing .reel__play{opacity:0}
.reel__media::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);pointer-events:none}
.reel__bar{display:flex;flex-direction:column;gap:3px;padding:16px 18px 18px;border:1px solid var(--line);border-top:0;border-radius:0 0 20px 20px;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.reel__name{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver-3)}
.reel__metric{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:28px;line-height:1.05;letter-spacing:-.02em;margin-top:3px}
.reel__sub{font-size:12px;color:var(--silver-4)}
.reel{transition:transform .5s var(--ease)}
.reel:hover{transform:translateY(-6px)}
.reels__note{margin-top:34px;font-size:14px;color:var(--muted)}
.reels__note a{color:var(--silver-1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.reels__note a:hover{text-decoration-color:var(--silver-1)}
@media (max-width:900px){.reel{width:200px}}
@media (max-width:520px){.reel{width:160px}.reels__viewport{margin:32px -20px 0}.reels__track{padding:0 20px}}

/* ============ ROI CALCULATOR ============ */
.calc{position:relative;padding:clamp(80px,11vw,150px) var(--pad,clamp(20px,5vw,70px));max-width:var(--maxw);margin:0 auto}
.calc__panel{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;margin-top:48px;align-items:stretch}
.calc__controls{display:flex;flex-direction:column;gap:30px;padding:36px 34px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.calc__field{display:flex;flex-direction:column;gap:14px}
.calc__lab{font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;letter-spacing:.01em}
.calc__lab b{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;color:var(--silver-1)}
.calc__field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:100px;
  background:linear-gradient(90deg,var(--silver-2),var(--silver-4));outline:none;cursor:pointer}
.calc__field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#aeb4bf 70%);border:1px solid var(--line-2);box-shadow:0 4px 14px rgba(0,0,0,.5);transition:transform .2s}
.calc__field input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
.calc__field input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#aeb4bf 70%);border:1px solid var(--line-2);cursor:pointer}
.calc__select{padding:13px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg-3);color:var(--ink);
  font:inherit;font-size:14.5px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a3a9b4' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.calc__select:focus{border-color:var(--line-2);outline:none}
.calc__out{position:relative;display:flex;flex-direction:column;gap:18px;padding:36px 34px;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.085),rgba(255,255,255,.022));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 60px rgba(0,0,0,.4)}
.calc__metric{display:flex;flex-direction:column;gap:2px}
.calc__num{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:30px;line-height:1;letter-spacing:-.02em;transition:opacity .2s}
.calc__metric--hero .calc__num{font-size:clamp(40px,6vw,60px)}
.calc__cap{font-size:12.5px;color:var(--silver-4);letter-spacing:.01em}
.calc__bars{display:flex;align-items:flex-end;gap:6px;height:46px;margin:4px 0 6px}
.calc__bars i{flex:1;background:var(--chrome);border-radius:4px 4px 0 0;height:20%;opacity:.6;transition:height .6s var(--ease),opacity .6s}
.calc__num.flash{animation:numflash .5s var(--ease)}
@keyframes numflash{0%{opacity:.3;transform:translateY(4px)}100%{opacity:1;transform:none}}
.calc__cta{margin-top:6px;align-self:flex-start}
.calc__disc{font-size:11px;color:var(--faint);letter-spacing:.01em}
@media (max-width:820px){.calc__panel{grid-template-columns:1fr}}

/* ============ PROJECT MODAL ============ */
.modal{position:fixed;inset:0;z-index:10005;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.modal.is-open{opacity:1;visibility:visible}
.modal__bg{position:absolute;inset:0;background:rgba(6,8,11,.72);backdrop-filter:blur(10px)}
.modal__panel{position:relative;width:min(720px,100%);max-height:88vh;overflow-y:auto;border-radius:24px;padding:44px clamp(26px,4vw,46px);
  border:1px solid var(--line-2);background:linear-gradient(165deg,#1c2129,#13161c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 120px rgba(0,0,0,.6);
  transform:translateY(26px) scale(.97);transition:transform .5s var(--ease)}
.modal.is-open .modal__panel{transform:none}
.modal__close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--silver-2);font-size:22px;line-height:1;cursor:pointer;transition:background .3s,transform .3s}
.modal__close:hover{background:var(--surface-2);transform:rotate(90deg)}
.modal__tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-3)}
.modal__title{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(28px,4vw,40px);margin:10px 0 8px;letter-spacing:-.02em}
.modal__lead{color:var(--muted);font-size:15px;line-height:1.55;max-width:54ch}
.modal__stats{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}

.modal__gallery{position:relative;margin:0 -46px 30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mgal__track{display:flex;gap:12px;width:max-content;padding:0 46px;animation:mgalScroll var(--mgal-dur,32s) linear infinite}
.modal__gallery:hover .mgal__track{animation-play-state:paused}
.mgal__item{position:relative;flex:0 0 auto;width:150px;height:230px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:#0c0f14;cursor:pointer}
.mgal__item img,.mgal__item video{width:100%;height:100%;object-fit:cover;display:block}
.mgal__item::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);pointer-events:none}
.mgal__item--vid::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  background:rgba(8,9,11,.55);border:1px solid var(--line-2);z-index:1}
.mgal__item--vid::after{content:'';position:absolute;left:calc(50% - 4px);top:calc(50% - 7px);border-left:11px solid var(--silver-1);
  border-top:7px solid transparent;border-bottom:7px solid transparent;z-index:1}
@keyframes mgalScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:560px){.modal__gallery{margin:0 -22px 24px}.mgal__item{width:118px;height:182px}}
.modal__stats span{font-family:'Space Mono',monospace;font-size:12.5px;color:var(--silver-2);padding:9px 15px;border:1px solid var(--line);border-radius:100px;background:var(--surface)}
.modal__cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-top:22px;border-top:1px solid var(--line)}
.modal__col h4,.modal__result h4{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-4);margin-bottom:12px}
.modal__col p{color:var(--muted);font-size:14px;line-height:1.6}
.modal__actions,.modal__cols ul,.modal__result ul{list-style:none}
.modal__cols ul li,.modal__result ul li{position:relative;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:9px}
.modal__cols ul li::before,.modal__result ul li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--chrome)}
.modal__result{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.modal__result ul li{color:var(--ink)}
.modal__cta{margin-top:28px}
@media (max-width:560px){.modal__cols{grid-template-columns:1fr;gap:20px}.modal__panel{padding:38px 22px}}
.modal__panel.is-live{border-style:dashed;border-color:var(--line-2)}
.modal__panel.is-live .modal__tag{color:var(--silver-2)}

/* ============ REEL LIGHTBOX ============ */
.lightbox{position:fixed;inset:0;z-index:10006;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__bg{position:absolute;inset:0;background:rgba(4,5,7,.86);backdrop-filter:blur(8px)}
.lightbox__close{position:absolute;top:22px;right:24px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(20,22,28,.7);color:var(--silver-1);font-size:24px;cursor:pointer;z-index:2;transition:transform .3s,background .3s}
.lightbox__close:hover{transform:rotate(90deg);background:rgba(40,44,52,.8)}
.lightbox__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px}
.lightbox__vid{max-height:84vh;width:auto;max-width:min(440px,92vw);border-radius:18px;border:1px solid var(--line-2);
  background:#0c0f14;box-shadow:0 40px 120px rgba(0,0,0,.7);transform:scale(.96);transition:transform .4s var(--ease);object-fit:contain}
video.lightbox__vid{aspect-ratio:9/16}
.lightbox.is-open .lightbox__vid{transform:none}
.lightbox__fallback{color:var(--muted);font-size:14px;text-align:center;max-width:36ch}
.lightbox__fallback a{color:var(--silver-1);text-decoration:underline;text-underline-offset:3px}