:root {
  --bg: #080808;
  --bg-soft: #0d0d0d;
  --panel: #111111;
  --text: #f2f0eb;
  --muted: #9a9a96;
  --line: rgba(255,255,255,.14);
  --line-soft: rgba(255,255,255,.07);
  --silver: #b8b8b4;
  --white: #fff;
  --serif: "Italiana", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.035), transparent 24rem),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.025), transparent 30rem),
    var(--bg);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}
body.menu-open, body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img, video { display: block; max-width: 100%; }
::selection { color: #080808; background: #e8e8e2; }

.noise {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.scroll-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 10000; background: transparent; }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#fff,#777); }

.loader {
  position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center;
  background: #050505; transition: opacity .75s var(--ease), visibility .75s var(--ease);
}
.loader.is-hidden { opacity: 0; visibility: hidden; }
.loader__ring { width: 150px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; display: grid; place-items: center; animation: breathe 1.4s ease-in-out infinite; }
.loader__ring img { width: 90px; filter: grayscale(1) contrast(1.06); }
.loader p { position: absolute; bottom: 6vh; font-size: 10px; letter-spacing: .34em; color: #868682; }
@keyframes breathe { 0%,100%{ transform:scale(.94); opacity:.55;} 50%{transform:scale(1); opacity:1;} }

.cursor { position: fixed; z-index: 15000; pointer-events: none; border-radius: 50%; opacity: 0; }
.cursor--dot { width: 5px; height: 5px; background: #fff; }
.cursor--ring { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.5); transition: width .2s, height .2s, background .2s, border-color .2s; }
.cursor--ring.is-hover { width: 64px; height: 64px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.8); }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 92px; padding: 0 clamp(22px,4vw,68px); display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent; transition: .35s ease;
}
.site-header.is-scrolled { height: 72px; background: rgba(8,8,8,.74); backdrop-filter: blur(18px); border-color: var(--line-soft); }
.brand { width: 64px; position: relative; z-index: 3; }
.brand img { width: 100%; }
.nav { display: flex; gap: 32px; align-items: center; font-size: 12px; letter-spacing: .08em; }
.nav a { position: relative; color: #c9c9c5; }
.nav a:not(.nav__cta)::after { content:""; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:#fff; transition: width .3s var(--ease); }
.nav a:hover::after { width:100%; }
.nav__cta { border:1px solid var(--line); border-radius:999px; padding:12px 18px; transition:.3s; }
.nav__cta:hover { background:#efefe9; color:#090909; border-color:#efefe9; }
.menu-toggle { display:none; background:none; border:0; width:42px; height:42px; padding:10px; position:relative; z-index:3; }
.menu-toggle span { display:block; height:1px; width:100%; margin:7px 0; background:#fff; transition:.3s; }

.hero { min-height: 100svh; position: relative; overflow: hidden; border-bottom:1px solid var(--line-soft); }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.62) 100%); pointer-events:none; }
.hero__ambient { position:absolute; inset:0; overflow:hidden; }
.ambient { position:absolute; border-radius:50%; filter: blur(1px); opacity:.9; }
.ambient--1 { width:min(48vw,720px); aspect-ratio:1; top:13%; right:-10%; border:1px solid rgba(255,255,255,.11); box-shadow: inset 0 0 100px rgba(255,255,255,.02), 0 0 140px rgba(255,255,255,.02); animation: floatA 14s ease-in-out infinite; }
.ambient--1::after { content:""; position:absolute; inset:14%; border:1px solid rgba(255,255,255,.07); border-radius:50%; }
.ambient--2 { width:240px; height:240px; left:-90px; bottom:10%; background: radial-gradient(circle at 60% 40%,rgba(255,255,255,.08),transparent 64%); animation: floatB 10s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translate3d(0,0,0) rotate(0)} 50%{transform:translate3d(-30px,18px,0) rotate(7deg)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-35px)} }
.film-line { position:absolute; background:rgba(255,255,255,.055); }
.film-line--1 { width:1px; height:100%; left:24%; }
.film-line--2 { width:1px; height:100%; right:24%; }
.film-line--3 { height:1px; width:100%; top:56%; }

.hero__meta { position:absolute; top:120px; left:clamp(22px,4vw,68px); right:clamp(22px,4vw,68px); display:flex; justify-content:space-between; color:#757571; font-size:9px; letter-spacing:.3em; }
.hero__content { position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:150px clamp(22px,4vw,68px) 52px; }
.hero__eyebrow { font-size:10px; letter-spacing:.34em; color:#9b9b96; margin:0 0 26px; }
.hero__title { margin:0; max-width:1400px; font-size:clamp(54px,8.6vw,138px); line-height:.85; letter-spacing:-.055em; font-weight:300; }
.hero__line { display:block; }
.hero__line--serif, .hero__title em { font-family:var(--serif); font-weight:400; font-style:normal; letter-spacing:-.035em; color:#d8d8d3; }
.hero__title em { position:relative; }
.hero__title em::after { content:""; position:absolute; left:2%; right:-2%; bottom:-5px; height:1px; background:rgba(255,255,255,.35); transform:scaleX(0); transform-origin:left; animation: underline 1.2s .9s var(--ease) forwards; }
@keyframes underline { to{transform:scaleX(1)} }
.hero__bottom { margin-top:46px; display:grid; grid-template-columns:minmax(220px,500px) 1fr; gap:30px; align-items:end; }
.hero__bottom p { margin:0; max-width:460px; color:#aaa9a5; font-size:14px; line-height:1.75; }
.round-link { justify-self:end; width:116px; aspect-ratio:1; border:1px solid rgba(255,255,255,.24); border-radius:50%; display:grid; place-items:center; position:relative; transition:.4s var(--ease); }
.round-link span { font-size:9px; letter-spacing:.15em; line-height:1.4; }
.round-link svg { position:absolute; right:19px; bottom:19px; width:18px; fill:none; stroke:currentColor; stroke-width:1.3; }
.round-link:hover { background:#efefe9; color:#080808; transform:scale(1.06); }
.hero__index { position:absolute; right:clamp(22px,4vw,68px); top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:center; color:#4a4a47; font-size:10px; letter-spacing:.25em; }

.ticker { overflow:hidden; border-bottom:1px solid var(--line-soft); background:#0b0b0b; }
.ticker__track { width:max-content; display:flex; align-items:center; gap:34px; padding:18px 0; animation:ticker 24s linear infinite; }
.ticker span { font-size:10px; letter-spacing:.24em; color:#969692; }
.ticker i { font-style:normal; font-size:9px; color:#4e4e4a; }
@keyframes ticker { to{transform:translateX(-50%)} }

.section { padding:clamp(90px,11vw,170px) clamp(22px,4vw,68px); position:relative; }
.section-head { display:grid; grid-template-columns:1.5fr .7fr; gap:50px; align-items:end; margin-bottom:64px; }
.kicker { display:block; margin-bottom:22px; font-size:9px; letter-spacing:.34em; color:#858580; }
.section-head h2, .manifesto h2, .process h2 { margin:0; font-weight:300; letter-spacing:-.045em; line-height:.96; font-size:clamp(46px,6vw,92px); }
.section-head h2 em, .manifesto h2 em, .process h2 em, .quote-section__quote em, .contact__title em { font-family:var(--serif); font-style:normal; font-weight:400; color:#cfcfc9; }
.section-head > p { margin:0; max-width:450px; justify-self:end; color:#92928d; font-size:14px; line-height:1.8; }

.works { background:#090909; }
.works-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.5vw,36px); align-items:start; }
.project-card { grid-column:span 5; cursor:pointer; margin-bottom:30px; perspective:1100px; }
.project-card:nth-child(2) { grid-column:8 / span 5; margin-top:110px; }
.project-card:nth-child(3) { grid-column:2 / span 4; margin-top:10px; }
.project-card:nth-child(4) { grid-column:8 / span 4; margin-top:-70px; }
.project-card:nth-child(5) { grid-column:1 / span 7; margin-top:80px; }
.project-card:nth-child(6) { grid-column:9 / span 4; margin-top:170px; }
.project-card__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:#111; transform-style:preserve-3d; transition:transform .25s ease-out; }
.project-card--tall .project-card__media { aspect-ratio:4/5; }
.project-card__media video { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease, transform .8s var(--ease); transform:scale(1.025); }
.project-card.has-video .project-card__media video { opacity:1; }
.project-card:hover .project-card__media video { transform:scale(1.07); }
.project-card__fallback { position:absolute; inset:0; padding:28px; display:flex; align-items:flex-end; justify-content:space-between; transition:opacity .35s; }
.project-card.has-video .project-card__fallback { opacity:0; }
.project-card__fallback span { align-self:flex-start; font-size:9px; letter-spacing:.22em; color:rgba(255,255,255,.5); }
.project-card__fallback strong { font-weight:300; text-align:right; font-size:clamp(28px,4vw,62px); line-height:.85; letter-spacing:-.05em; color:rgba(255,255,255,.5); }
.media-fallback--1 { background:radial-gradient(circle at 68% 34%,#31312f 0 2%,transparent 3%), radial-gradient(circle at 61% 45%,#191919,transparent 23%), linear-gradient(135deg,#111,#262624 58%,#080808); }
.media-fallback--2 { background:linear-gradient(25deg,#080808 10%,#2a2928 48%,#0a0a0a 49% 54%,#1c1c1b 55% 100%); }
.media-fallback--3 { background:radial-gradient(circle at 50% 58%,#30302e 0 8%,#111 9% 18%,transparent 19%), linear-gradient(160deg,#1d1d1c,#090909); }
.media-fallback--4 { background:linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.08) 50%,transparent 50.5%), linear-gradient(#0d0d0d,#252523); }
.media-fallback--5 { background:radial-gradient(ellipse at 20% 80%,#363633 0 8%,transparent 9%), radial-gradient(ellipse at 70% 20%,#272725 0 15%,transparent 16%), #0e0e0e; }
.media-fallback--6 { background:conic-gradient(from 120deg at 50% 50%,#0a0a0a,#2a2a28,#090909,#1c1c1a,#0a0a0a); }
.project-card__shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.42)); pointer-events:none; }
.project-card__info { display:flex; justify-content:space-between; gap:20px; padding-top:18px; border-top:1px solid var(--line-soft); margin-top:1px; }
.project-card__info > div { display:flex; gap:15px; align-items:baseline; }
.project-card__info span { color:#5f5f5b; font-size:9px; }
.project-card__info h3 { margin:0; font-size:15px; font-weight:400; letter-spacing:-.02em; }
.project-card__info p { margin:0; text-transform:uppercase; font-size:8px; letter-spacing:.2em; color:#6f6f6b; text-align:right; }
.portfolio-note { max-width:690px; margin:80px 0 0 auto; color:#73736f; font-size:11px; line-height:1.7; }
.portfolio-note strong { color:#aaa9a5; font-weight:400; }

.manifesto { min-height:100svh; display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:center; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); overflow:hidden; }
.manifesto__visual { min-height:600px; display:grid; place-items:center; position:relative; }
.lens { width:min(38vw,520px); aspect-ratio:1; border:1px solid rgba(255,255,255,.13); border-radius:50%; display:grid; place-items:center; position:relative; box-shadow:0 0 120px rgba(255,255,255,.025); }
.lens::before,.lens::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.lens::before { inset:10%; }
.lens::after { inset:23%; }
.lens__inner { width:32%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 40% 36%,#353533,#0d0d0d 44%,#010101 75%); box-shadow:0 0 70px #000; }
.lens__inner span { font-size:8px; letter-spacing:.26em; color:#7d7d78; }
.manifesto__number { position:absolute; left:0; bottom:0; color:#42423f; font-size:10px; letter-spacing:.3em; }
.manifesto__copy { max-width:670px; }
.manifesto__lead { margin:38px 0 24px; font-size:clamp(21px,2vw,30px); line-height:1.4; letter-spacing:-.02em; color:#c6c6c1; }
.manifesto__copy > p:not(.manifesto__lead) { max-width:540px; font-size:14px; line-height:1.85; color:#858580; }
.text-link { display:inline-flex; gap:16px; margin-top:35px; padding-bottom:6px; border-bottom:1px solid #555; font-size:11px; letter-spacing:.14em; transition:.3s; }
.text-link:hover { border-color:#fff; }

.services { background:#0a0a0a; }
.services-list { border-top:1px solid var(--line); }
.service { min-height:145px; display:grid; grid-template-columns:70px 1fr 160px 50px; gap:24px; align-items:center; border-bottom:1px solid var(--line); position:relative; overflow:hidden; transition:color .35s; }
.service::before { content:""; position:absolute; inset:0; background:#ecece6; transform:translateY(101%); transition:transform .45s var(--ease); }
.service:hover::before { transform:translateY(0); }
.service > * { position:relative; z-index:1; }
.service:hover { color:#090909; }
.service__num { font-size:9px; letter-spacing:.2em; color:#666662; }
.service__title { display:flex; align-items:baseline; gap:32px; }
.service__title h3 { margin:0; font-weight:300; letter-spacing:-.04em; font-size:clamp(28px,3vw,48px); }
.service__title p { margin:0; max-width:310px; color:#797975; font-size:12px; line-height:1.5; }
.service:hover .service__title p, .service:hover .service__num { color:#4f4f4b; }
.service__tag { justify-self:end; border:1px solid currentColor; border-radius:999px; padding:8px 11px; font-size:7px; letter-spacing:.18em; }
.service__arrow { justify-self:end; font-size:20px; }

.process { display:grid; grid-template-columns:.78fr 1fr; gap:10vw; border-top:1px solid var(--line-soft); }
.process__sticky { align-self:start; position:sticky; top:120px; }
.process__sticky p { max-width:470px; color:#84847f; font-size:14px; line-height:1.8; }
.process__steps { border-top:1px solid var(--line); }
.step { display:grid; grid-template-columns:70px 1fr; gap:25px; padding:40px 0 45px; border-bottom:1px solid var(--line); }
.step > span { color:#5f5f5b; font-size:9px; letter-spacing:.2em; padding-top:7px; }
.step h3 { margin:0 0 12px; font-weight:300; font-size:clamp(25px,2.5vw,38px); letter-spacing:-.03em; }
.step p { margin:0; max-width:520px; color:#7f7f7a; line-height:1.75; font-size:13px; }

.quote-section { min-height:80svh; display:flex; flex-direction:column; justify-content:center; text-align:center; overflow:hidden; border-top:1px solid var(--line-soft); }
.quote-section__small { font-size:8px; letter-spacing:.4em; color:#666661; margin-bottom:34px; }
.quote-section__quote { position:relative; z-index:2; margin:0 auto; font-weight:300; letter-spacing:-.045em; font-size:clamp(42px,6.2vw,96px); line-height:1; }
.quote-section__orb { position:absolute; width:450px; height:450px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,255,255,.06),transparent 68%); filter:blur(5px); }

.contact { min-height:88svh; display:flex; flex-direction:column; justify-content:space-between; background:#e9e9e3; color:#090909; }
.contact .kicker { color:#5e5e59; }
.contact__top { display:flex; justify-content:space-between; align-items:start; }
.contact__index { font-size:9px; letter-spacing:.24em; color:#777772; }
.contact__title { max-width:1300px; margin:90px 0 70px; font-weight:300; font-size:clamp(50px,8vw,128px); line-height:.86; letter-spacing:-.06em; }
.contact__title em { color:#3d3d39; }
.contact__bottom { border-top:1px solid rgba(0,0,0,.18); padding-top:30px; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.contact__bottom p { max-width:520px; color:#555550; font-size:14px; line-height:1.75; }
.contact__button { width:min(430px,100%); border:1px solid rgba(0,0,0,.35); border-radius:999px; padding:20px 24px 20px 29px; display:flex; justify-content:space-between; align-items:center; transition:.35s var(--ease); }
.contact__button span { font-size:10px; letter-spacing:.18em; }
.contact__button svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.3; }
.contact__button:hover { background:#090909; color:#fff; }

.footer { padding:44px clamp(22px,4vw,68px); display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; align-items:center; border-top:1px solid var(--line-soft); background:#070707; }
.footer__brand { width:68px; }
.footer p { margin:0; color:#6f6f6a; font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.footer__links { display:flex; justify-self:end; gap:24px; font-size:10px; letter-spacing:.1em; color:#a2a29d; }
.footer small { grid-column:1/-1; padding-top:24px; border-top:1px solid var(--line-soft); color:#52524e; font-size:9px; letter-spacing:.1em; }

.video-modal { position:fixed; inset:0; z-index:12000; padding:clamp(18px,4vw,60px); display:grid; place-items:center; background:rgba(0,0,0,.92); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transition:.35s; }
.video-modal.is-open { opacity:1; visibility:visible; }
.video-modal__close { position:absolute; right:28px; top:23px; width:48px; height:48px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:transparent; font-size:24px; cursor:pointer; }
.video-modal__frame { width:min(1100px,92vw); max-height:84vh; aspect-ratio:16/9; background:#101010; display:grid; place-items:center; position:relative; overflow:hidden; }
.video-modal video { width:100%; height:100%; object-fit:contain; background:#000; display:none; }
.video-modal.has-video video { display:block; }
.video-modal__empty { text-align:center; color:#74746f; }
.video-modal.has-video .video-modal__empty { display:none; }
.video-modal__empty span { font-size:10px; letter-spacing:.25em; }
.video-modal__empty p { font-size:12px; margin-top:13px; }

.reveal { opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .cursor { display:none; }
  .site-header { height:76px; }
  .brand { width:56px; }
  .menu-toggle { display:block; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .nav { position:fixed; inset:0; padding:120px 28px 50px; background:rgba(6,6,6,.98); flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; opacity:0; visibility:hidden; transform:translateY(-12px); transition:.35s; }
  .nav.is-open { opacity:1; visibility:visible; transform:none; }
  .nav a { font-size:clamp(30px,9vw,54px); letter-spacing:-.04em; font-weight:300; }
  .nav__cta { font-size:12px !important; letter-spacing:.08em !important; margin-top:22px; }
  .hero__meta { display:none; }
  .hero__content { padding-top:110px; padding-bottom:34px; }
  .hero__title { font-size:clamp(54px,13vw,92px); line-height:.9; }
  .hero__bottom { grid-template-columns:1fr; }
  .round-link { justify-self:start; margin-top:18px; }
  .hero__index { display:none; }
  .section-head { grid-template-columns:1fr; }
  .section-head > p { justify-self:start; }
  .works-grid { grid-template-columns:1fr; }
  .project-card, .project-card:nth-child(n) { grid-column:auto; margin-top:0; }
  .project-card__media, .project-card--tall .project-card__media { aspect-ratio:4/3; }
  .manifesto { grid-template-columns:1fr; }
  .manifesto__visual { min-height:380px; }
  .lens { width:min(76vw,460px); }
  .service { grid-template-columns:42px 1fr 34px; min-height:130px; }
  .service__title { display:block; }
  .service__title p { margin-top:8px; }
  .service__tag { display:none; }
  .process { grid-template-columns:1fr; gap:70px; }
  .process__sticky { position:static; }
  .contact__bottom { grid-template-columns:1fr; }
  .contact__button { width:100%; }
  .footer { grid-template-columns:1fr; }
  .footer__links { justify-self:start; flex-wrap:wrap; }
}

@media (max-width: 560px) {
  .section { padding-top:85px; padding-bottom:85px; }
  .hero__eyebrow { font-size:8px; letter-spacing:.24em; }
  .hero__title { font-size:clamp(49px,15vw,74px); }
  .hero__bottom p { font-size:13px; }
  .ticker__track { padding:14px 0; }
  .project-card__info { display:block; }
  .project-card__info p { text-align:left; margin-top:8px; }
  .service { grid-template-columns:32px 1fr 26px; gap:14px; }
  .step { grid-template-columns:40px 1fr; }
  .contact__title { margin:75px 0 55px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}