:root{
  --ink:#0e0e12; --ink-2:#16161c; --line:rgba(255,255,255,.09);
  --bone:#f2efe9; --mist:#9b99a3;
  --iris:#c7b9ff; --peach:#ffc9a8; --aqua:#a8e6dc;
  --grad:linear-gradient(100deg,var(--iris) 0%,var(--peach) 48%,var(--aqua) 100%);
  --disp:'Syne',sans-serif; --body:'Instrument Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
  --rad:18px; --pad:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--iris);color:var(--ink)}
img,video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--grad)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(14,14,18,.55);border-bottom:1px solid var(--line)}
.nav-in{max-width:1320px;margin:0 auto;padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.02em}
.logo span{color:var(--iris)}
.nav-links{display:flex;gap:34px;font-size:14px;color:var(--mist)}
.nav-links a{transition:color .25s}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.on{color:var(--bone)}
.nav-cta{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);padding:10px 20px;border-radius:99px;transition:border-color .25s,color .25s}
.nav-cta:hover{border-color:var(--iris);color:var(--iris)}
@media(max-width:820px){.nav-links{display:none}}

/* hero collage */
.collage-hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink)}
.collage{position:absolute;top:50%;left:50%;width:175vmax;height:175vmax;transform:translate(-50%,-50%) rotate(-8deg);display:flex;gap:clamp(10px,1.1vw,16px);justify-content:center}
.col{flex:1;display:flex;flex-direction:column;gap:clamp(10px,1.1vw,16px);will-change:transform}
.col .tile{border-radius:clamp(12px,1.4vw,20px);overflow:hidden;flex:none;aspect-ratio:4/5;background:var(--ink-2)}
.inner{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,16px)}
.col-up .inner{animation:floatUp 60s linear infinite}
.col-down .inner{animation:floatDown 60s linear infinite}
@keyframes floatUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes floatDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media(max-width:820px){.collage{width:260vmax;height:260vmax}}
.collage-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,14,18,.55) 0%,rgba(14,14,18,.1) 35%,rgba(14,14,18,.15) 60%,rgba(14,14,18,.92) 100%)}
.hero-id{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--pad) 48px;max-width:1320px;margin:0 auto}
.hero-id h1{font-family:var(--disp);font-weight:800;font-size:clamp(48px,8.6vw,124px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase}
.hero-id .role{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.hero-id .role p{font-family:var(--mono);font-size:clamp(12px,1.2vw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.hero-id .role .dot{width:6px;height:6px;border-radius:50%;background:var(--grad)}
.hero-id .role small{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}

/* statement */
.statement{padding:clamp(90px,11vw,150px) 0;position:relative}
.statement .hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(52% 42% at 78% 18%,rgba(199,185,255,.12),transparent 70%),radial-gradient(40% 36% at 14% 80%,rgba(255,201,168,.08),transparent 70%)}
.statement h2.big{font-family:var(--disp);font-weight:800;font-size:clamp(44px,8.4vw,128px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;margin-top:22px}
.statement h2.big .line2{display:block;margin-left:clamp(0px,8vw,120px)}
.statement .sub{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-top:44px}
.statement .sub p{max-width:460px;color:var(--mist);font-size:clamp(16px,1.4vw,19px)}
.statement .sub p b{color:var(--bone);font-weight:500}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
@media(max-width:820px){.statement .sub{grid-template-columns:1fr}}

.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:22px 0;white-space:nowrap}
.marquee-track{display:inline-flex;gap:64px;animation:scroll 30s linear infinite}
.marquee span{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);display:inline-flex;align-items:center;gap:64px}
.marquee span::after{content:"\2726";color:var(--iris);font-size:11px}
@keyframes scroll{to{transform:translateX(-50%)}}

section{padding:clamp(80px,10vw,140px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(36px,5vw,64px);flex-wrap:wrap}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin-top:16px}
.sec-head .count{font-family:var(--mono);font-size:13px;color:var(--mist)}

/* explore cards (home) */
.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.exp{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--ink-2);display:block}
.exp .media{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.exp:hover .media{transform:scale(1.05)}
.exp .exp-info{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(transparent,rgba(10,10,14,.88));display:flex;justify-content:space-between;align-items:end}
.exp h3{font-family:var(--disp);font-weight:700;font-size:22px}
.exp small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);display:block;margin-top:2px}
.exp .arrow{font-size:20px;color:var(--iris);transition:transform .3s}
.exp:hover .arrow{transform:translate(4px,-4px)}
@media(max-width:1000px){.explore-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.explore-grid{grid-template-columns:1fr}}

/* category storytelling blocks (work.html) */
.cat-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(60px,8vw,110px) 0;border-bottom:1px solid var(--line)}
.cat-block:last-of-type{border-bottom:none}
.cat-block .cat-media{border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;position:relative}
.cat-block.rev .cat-media{order:2}
.cat-title{font-family:var(--disp);font-weight:800;font-size:clamp(40px,5.6vw,84px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
.cat-sub{font-family:var(--body);font-weight:500;font-size:clamp(16px,1.5vw,20px);margin:18px 0 22px;color:var(--bone)}
.cat-copy p{color:var(--mist);margin-bottom:18px;max-width:560px}
.cat-copy .btn-outline{margin-top:8px}
.btn{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:18px 44px;border-radius:99px;background:var(--grad);color:var(--ink);font-weight:500;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(199,185,255,.25)}
.btn-outline{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:17px 40px;border-radius:99px;border:1px solid rgba(255,255,255,.25);color:var(--bone);transition:border-color .25s,color .25s,transform .25s}
.btn-outline:hover{border-color:var(--iris);color:var(--iris);transform:translateY(-2px)}
@media(max-width:900px){.cat-block{grid-template-columns:1fr}.cat-block.rev .cat-media{order:0}}

/* gallery page header */
.page-hero{padding:clamp(150px,18vw,220px) 0 clamp(40px,5vw,60px)}
.page-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(48px,8vw,110px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;margin-top:20px}
.page-hero .lead{max-width:640px;color:var(--mist);font-size:clamp(16px,1.5vw,20px);margin-top:26px}
.page-hero .lead b{color:var(--bone);font-weight:500}

/* work grid */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.work{position:relative;border-radius:var(--rad);overflow:hidden;background:var(--ink-2);border:1px solid var(--line);aspect-ratio:4/5}
.work.wide{grid-column:span 7;aspect-ratio:16/10}
.work.tall{grid-column:span 5}
.work.half{grid-column:span 6;aspect-ratio:16/11}
.work.third{grid-column:span 4}
.work.vthird{grid-column:span 4;cursor:pointer}
.work .media{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.work:hover .media{transform:scale(1.045)}
.work-info{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(transparent,rgba(10,10,14,.85));display:flex;justify-content:space-between;align-items:end;gap:14px}
.work-info h3{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.01em}
.work-info small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);display:block;margin-top:4px}
.work-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:6px 12px;backdrop-filter:blur(6px);white-space:nowrap}
.play-badge{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink);background:rgba(242,239,233,.9);transition:opacity .3s}
.vid.playing .play-badge{opacity:0}
@media(max-width:820px){.work.wide,.work.tall,.work.half,.work.third,.work.vthird{grid-column:span 12}}
@media(min-width:821px) and (max-width:1100px){.work.vthird{grid-column:span 6}}

/* next / cta strip */
.next-strip{border-top:1px solid var(--line);padding:clamp(60px,8vw,100px) var(--pad);text-align:center}
.next-strip .eyebrow{justify-content:center}
.next-strip h2{margin-top:14px}
.next-strip .cta-row{justify-content:center}

/* about */
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
.about-photo{border-radius:var(--rad);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);position:sticky;top:110px}
.about-copy p{color:var(--mist);font-size:clamp(17px,1.5vw,20px);margin-bottom:22px}
.about-copy p b{color:var(--bone);font-weight:500}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-top:40px}
.stat{background:var(--ink-2);padding:26px 22px}
.stat b{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.4vw,32px);display:block;line-height:1.1}
.stat small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}.about-photo{position:static}.about-stats{grid-template-columns:1fr}}

.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:64px 1fr 1.2fr;gap:24px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line);transition:padding-left .3s}
.svc:hover{padding-left:14px}
.svc .n{font-family:var(--mono);font-size:13px;color:var(--iris)}
.svc h3{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.01em}
.svc p{color:var(--mist);font-size:16px}
@media(max-width:820px){.svc{grid-template-columns:44px 1fr}.svc p{grid-column:2}}

.contact{border-top:1px solid var(--line);text-align:center;padding:clamp(90px,12vw,160px) var(--pad);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 50% 100%,rgba(199,185,255,.12),transparent 70%)}
.contact h2{font-size:clamp(44px,7.5vw,110px)}
.contact p{color:var(--mist);max-width:460px;margin:22px auto 40px}
.contact-links{display:flex;justify-content:center;gap:28px;margin-top:36px;font-size:14px;color:var(--mist)}
.contact-links a:hover{color:var(--bone)}

.footer{border-top:1px solid var(--line);padding:26px var(--pad);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track,.col-up .inner,.col-down .inner{animation:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:4px}

/* chapters on work page */
.chapter{border-top:1px solid var(--line);padding:clamp(70px,9vw,120px) 0}
.chapter:first-of-type{border-top:none;padding-top:clamp(20px,3vw,40px)}
.ch-head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,70px);align-items:end;margin-bottom:clamp(34px,4.5vw,56px)}
.ch-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5.4vw,80px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;margin-top:14px}
.ch-head .ch-sub{font-weight:500;font-size:clamp(15px,1.4vw,19px);color:var(--bone);margin-top:14px}
.ch-head .ch-copy p{color:var(--mist);max-width:520px}
.ch-head .ch-copy .cnt{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);display:block;margin-bottom:14px}
@media(max-width:900px){.ch-head{grid-template-columns:1fr}}
/* 4-up rows */
.work.quart{grid-column:span 3;aspect-ratio:4/5}
.work.quartp{grid-column:span 3;aspect-ratio:3/5}
.work.quartp img{object-position:top}
@media(max-width:1000px){.work.quart,.work.quartp{grid-column:span 6}}
@media(max-width:640px){.work.quart,.work.quartp{grid-column:span 12}}
/* contact page */
.contact-page{padding:clamp(150px,18vw,220px) 0 clamp(80px,10vw,140px)}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(40px,5vw,64px)}
.ccard{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--rad);padding:32px 28px}
.ccard .n{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--iris);display:block;margin-bottom:14px}
.ccard h3{font-family:var(--disp);font-weight:700;font-size:22px;margin-bottom:8px}
.ccard p,.ccard a{color:var(--mist);font-size:15px}
.ccard a:hover{color:var(--bone)}
@media(max-width:900px){.contact-cards{grid-template-columns:1fr}}