:root{
  --ground:#0E0D0B; --band:#12100D; --raised:#171511; --rule:#1E1C18; --ghost:#221E18;
  --ink:#F5F2EC; --ink-2:#EFEBE3; --body:#BDB6AA; --muted:#A09A8E; --label:#8B867C; --gold:#C9A227;
  --sans:'Archivo','Helvetica Neue',Helvetica,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gutter:5.5%;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
img,svg,video{max-width:100%;display:block}
.mono{font-family:var(--mono)}
.label{margin:0 0 40px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}

.site-head{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;padding:26px var(--gutter);border-bottom:1px solid var(--rule)}
.brand{display:inline-flex;align-items:center;gap:18px;text-decoration:none;color:var(--ink)}
.brand .mark{display:block;width:71px;height:15px;background:var(--ink);-webkit-mask:url('/three-glyphs.svg') no-repeat 0 0/100% 100%;mask:url('/three-glyphs.svg') no-repeat 0 0/100% 100%}
.brand .name{font-size:12px;font-weight:500;letter-spacing:.34em;text-transform:uppercase}
.site-nav{display:flex;flex-wrap:wrap;gap:14px 34px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.site-nav a{text-decoration:none;color:var(--muted)}
.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a:hover,.site-foot a:hover{color:var(--ink)}

.menu-btn{display:none;align-items:center;gap:12px;margin:0;padding:8px 0;border:0;background:none;color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.menu-btn i{position:relative;width:22px;height:9px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .25s,top .25s}
.menu-btn i::before{top:0}
.menu-btn i::after{top:7.5px}
.menu-btn .label-close,.menu-open .menu-btn .label-open{display:none}
.menu-open .menu-btn .label-close{display:inline}
.menu-open .menu-btn i::before{top:3.75px;transform:rotate(45deg)}
.menu-open .menu-btn i::after{top:3.75px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:space-between;gap:40px;overflow-y:auto;
  padding:calc(var(--head-h,64px) + 24px) 6% 40px;background:var(--ground);animation:menu-in .22s ease}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.menu nav a{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule);text-decoration:none;
  font-size:clamp(32px,10vw,44px);font-weight:400;letter-spacing:-0.03em;line-height:1.1;color:var(--ink)}
.menu nav a .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--label);transform:translateY(-6px)}
.menu nav a[aria-current="page"]{color:var(--label)}
.menu-foot .label{margin:0 0 12px}
.menu-foot .mail{font-size:19px;font-weight:300;color:var(--ink-2);text-decoration:none;border-bottom:1px solid #3A352D}
.menu-foot .where{margin:22px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.menu-open{overflow:hidden}
.menu-open .site-head{position:fixed;top:0;left:0;right:0;z-index:61;background:var(--ground)}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:760px){ .site-nav{display:none} .menu-btn{display:inline-flex}
  .site-head{flex-wrap:nowrap;position:sticky;top:0;z-index:50;background:var(--ground)} }
@media (min-width:761px){ .menu{display:none !important} }
@media (prefers-reduced-motion: reduce){ .menu{animation:none} .menu-btn i::before,.menu-btn i::after{transition:none} }
.reg-strip{display:flex;flex-wrap:wrap;gap:8px 32px;padding:14px var(--gutter);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}

.hero{position:relative;overflow:hidden;padding:150px var(--gutter) 130px}
.ghost{position:absolute;right:-70px;top:50%;transform:translateY(-50%);width:400px;aspect-ratio:1.304;background:var(--ghost);
  -webkit-mask:url('/three-glyphs.svg') no-repeat 100% 50%/363.6% 100%;mask:url('/three-glyphs.svg') no-repeat 100% 50%/363.6% 100%;pointer-events:none}
.hero-inner{position:relative;max-width:980px}
.hero h1{font-size:68px;font-weight:400;line-height:1.06;letter-spacing:-0.035em;margin:0 0 36px;max-width:21ch;text-wrap:balance}
.hero .lede{margin:0;font-size:21px;font-weight:300;line-height:1.55;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.hero .sub{margin:22px 0 0;font-size:16px;font-weight:300;line-height:1.7;color:var(--body);max-width:56ch}
.hero.short{padding:110px var(--gutter) 90px}
.hero.short h1{font-size:56px;max-width:20ch}

.ctas{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:44px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border:1px solid #3A352D;background:transparent;color:var(--ink);text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{background:var(--raised);border-color:#5A5246}
.textlink{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid #3A352D;padding-bottom:3px}
.textlink:hover{color:var(--ink);border-color:var(--ink)}

.section{border-top:1px solid var(--rule);padding:88px var(--gutter)}
.section.band{background:var(--band)}
.section-head{display:flex;flex-wrap:wrap;gap:16px 48px;align-items:baseline;justify-content:space-between;margin-bottom:48px}
.section-head h2{margin:0;font-size:40px;font-weight:400;letter-spacing:-0.03em;max-width:22ch}
.section-head p{margin:0;font-size:16px;font-weight:300;line-height:1.7;color:var(--body);max-width:52ch}
.statement{margin:0;font-size:28px;font-weight:300;line-height:1.5;letter-spacing:-0.015em;color:var(--ink-2);max-width:40ch}

.hero.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px 56px;align-items:center;padding:72px var(--gutter) 80px}
.hero.home h1{font-size:clamp(40px,3.5vw,54px);margin-bottom:28px}
.hero.home .ctas{margin-top:36px}
.hero.home .ghost{right:auto;left:-150px;top:auto;bottom:-110px;transform:none;width:300px}
.hero-reel{position:relative;border:1px solid var(--rule);background:#000}
.hero-reel .media{background:#000}
.hero-reel video,.hero-reel img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-reel .reel-bar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--ground);border-top:1px solid var(--rule)}
.hero-reel .reel-bar span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}

.tile .tile-link{display:block}
.tile .tile-link:hover .media{border-color:#3A352D}
.card.tile figcaption{display:block}
.card.tile .kicker{margin:4px 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
.card.tile h3{font-size:28px;margin:0 0 10px}
.card.tile .what{margin:0 0 20px}

.svc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 48px}
.svc-row>div{border-top:1px solid #3A352D;padding-top:22px}
.svc-row .n{display:block;margin-bottom:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--muted)}
.svc-row h3{margin:0 0 14px;font-size:26px;font-weight:400;letter-spacing:-0.025em;line-height:1.2}
.svc-row p{margin:0;font-size:15.5px;font-weight:300;line-height:1.7;color:var(--body)}

.reel{position:relative;border-top:1px solid var(--rule);background:#000}
.reel video,.reel img{width:100%;aspect-ratio:16/9;object-fit:cover}
.reel .reel-bar{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding:18px var(--gutter);background:var(--ground);border-top:1px solid var(--rule)}
.reel .reel-bar span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:56px 32px}
.card{grid-column:span 6;display:flex;flex-direction:column;gap:18px;margin:0}
.card.wide{grid-column:span 12}
.card.third{grid-column:span 4}
.card.two-thirds{grid-column:span 8}

.card.two-thirds .media{flex:1;display:flex}
.card.two-thirds .media video,.card.two-thirds .media img{height:100%;aspect-ratio:auto;min-height:0}
.card .media{position:relative;background:#000;overflow:hidden;border:1px solid var(--rule)}
.card .media video,.card .media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card.tall .media{display:flex;justify-content:center;background:var(--band)}
.card.tall .media video,.card.tall .media img{width:auto;height:100%;aspect-ratio:9/16;max-height:560px}

.media .frame{position:relative;width:100%}
.card.tall .media .frame{width:auto}
.card.two-thirds .media .frame{flex:1}
.sound{position:absolute;right:12px;bottom:12px;width:34px;height:34px;padding:0;display:grid;place-items:center;
  border:1px solid rgba(245,242,236,.22);border-radius:50%;background:rgba(14,13,11,.38);color:rgba(245,242,236,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;opacity:.75;transition:opacity .2s,background .2s}
.sound:hover,.sound:focus-visible,.sound[aria-pressed="true"]{opacity:1;background:rgba(14,13,11,.6)}
.sound svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sound .spk{fill:currentColor;stroke:none}
.sound .on,.sound[aria-pressed="true"] .off{display:none}
.sound[aria-pressed="true"] .on{display:inline}
.card figcaption{display:grid;grid-template-columns:auto 1fr;gap:6px 22px}
.card .idx{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--label);padding-top:5px}
.card h3{margin:0;font-size:22px;font-weight:400;letter-spacing:-0.02em}
.card .what{grid-column:2;margin:0;font-size:15px;font-weight:300;line-height:1.65;color:var(--body);max-width:58ch}
.card .tags{grid-column:2;margin:4px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);line-height:1.9}
.card a.ext{color:var(--muted);text-decoration:none;border-bottom:1px solid #3A352D}
.card a.ext:hover{color:var(--ink)}

.slot .media{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:
  repeating-linear-gradient(135deg,transparent 0 22px,rgba(245,242,236,.025) 22px 23px),var(--band)}
.slot .media span{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--label)}

.project{border-top:1px solid var(--rule);padding:80px var(--gutter)}
.project-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;margin-bottom:56px;align-items:start}
.project-head h2{margin:0;font-size:46px;font-weight:400;letter-spacing:-0.035em}
.project-head .kicker{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
.project-head p{margin:0 0 14px;font-size:17px;font-weight:300;line-height:1.7;color:var(--body);max-width:60ch}
.project-head p.role{font-size:15px;color:var(--muted)}

.svc{display:grid;grid-template-columns:76px minmax(0,4fr) minmax(0,7fr);gap:20px 48px;padding:48px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.svc:first-of-type{padding-top:0}
.svc .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--muted)}
.svc h3{margin:0;font-size:34px;font-weight:400;letter-spacing:-0.03em;line-height:1.15}
.svc p{margin:0 0 14px;font-size:16px;font-weight:300;line-height:1.72;color:var(--body);max-width:60ch}
.svc ul{margin:6px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);line-height:2.1}
.package{margin-top:56px;padding:44px 48px;border:1px solid #2C2822;background:var(--raised);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 56px}
.package h3{margin:0;font-size:30px;font-weight:400;letter-spacing:-0.025em}
.package p{margin:0 0 12px;font-size:16px;font-weight:300;line-height:1.7;color:var(--body)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.steps div{border-top:1px solid #3A352D;padding-top:20px}
.steps b{display:block;font-weight:400;font-size:19px;margin-bottom:10px}
.steps p{margin:0;font-size:15px;font-weight:300;line-height:1.65;color:var(--body)}

.facts{border-top:1px solid var(--rule);margin:0}
.facts div{display:grid;grid-template-columns:minmax(140px,1fr) 3fr;gap:12px 32px;padding:18px 0;border-bottom:1px solid var(--rule)}
.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);padding-top:3px}
.facts dd{margin:0;font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2)}
.prose p{font-size:17px;font-weight:300;line-height:1.75;color:var(--body);max-width:62ch;margin:0 0 20px}
.prose h3{font-size:22px;font-weight:400;letter-spacing:-0.02em;margin:40px 0 14px}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px}

.cta-band{border-top:1px solid var(--rule);padding:96px var(--gutter);display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-end;justify-content:space-between}
.cta-band h2{margin:0;font-size:52px;font-weight:400;letter-spacing:-0.035em;max-width:16ch;line-height:1.08}
.cta-band .mail{font-size:22px;font-weight:300;color:var(--ink-2);text-decoration:none;border-bottom:1px solid #3A352D}
.cta-band .mail:hover{border-color:var(--ink)}

.site-foot{border-top:1px solid var(--rule);background:var(--band);padding:44px var(--gutter) 52px}
.site-foot .row{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-start;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);line-height:2.1}
.site-foot address{font-style:normal;margin:0}
.site-foot nav{display:flex;flex-wrap:wrap;gap:12px 30px}
.site-foot a{color:var(--label);text-decoration:none}

.pitch-film{padding:0 var(--gutter) 24px}
.pitch-film video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--rule)}
.pitch-film.vertical video{aspect-ratio:9/16;max-height:82vh;width:auto;margin:0 auto}
.disclaimer{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);padding:0 var(--gutter) 64px}

@media (prefers-reduced-motion: reduce){ video[data-loop],.sound{display:none} .poster-fallback{display:block !important} }
.poster-fallback{display:none}

@media (max-width: 900px){
  .hero{padding:72px 6% 80px}
  .hero h1,.hero.short h1{font-size:clamp(32px,8.2vw,54px);letter-spacing:-0.028em;margin-bottom:28px}
  .hero .lede{font-size:18px}
  .ghost{width:210px;right:-48px;top:auto;bottom:-18px;transform:none;opacity:.8}
  .site-head{padding:20px 6%;gap:14px 24px}
  .site-nav{gap:10px 22px;letter-spacing:.12em}
  .reg-strip{padding:12px 6%;gap:4px 20px;letter-spacing:.16em}
  .section,.project{padding:56px 6%}
  .section-head h2,.project-head h2{font-size:clamp(28px,7vw,38px)}
  .statement{font-size:21px}
  .grid{gap:44px 0}
  .card,.card.third,.card.two-thirds,.card.wide{grid-column:span 12}
  .project-head,.two,.package{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr;gap:10px;padding:36px 0}
  .svc h3{font-size:28px}
  .package{padding:28px 24px}
  .steps{grid-template-columns:1fr;gap:20px}
  .cta-band{padding:64px 6%}
  .cta-band h2{font-size:clamp(30px,8vw,44px)}
  .facts div{grid-template-columns:1fr;gap:4px}
  .site-foot{padding:36px 6% 44px}
  .reel .reel-bar{padding:14px 6%}
  .hero.home{grid-template-columns:1fr;padding:56px 6% 64px;gap:40px}
  .hero.home .ghost{left:auto;right:-48px;top:24px;bottom:auto;width:210px}
  .svc-row{grid-template-columns:1fr;gap:28px}
  .pitch-film{padding:0 6% 20px}
  .disclaimer{padding:0 6% 48px}
}
@media (max-width: 420px){
  .site-nav{gap:8px 16px;font-size:11px}
  .reg-strip{font-size:9.5px}
  .ghost{width:170px;opacity:.7}
}

main.doc{padding:88px var(--gutter) 110px;max-width:1100px}
.doc .eyebrow{margin:0 0 28px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
.doc h1{font-size:clamp(36px,4vw,54px);font-weight:400;line-height:1.08;letter-spacing:-.035em;margin:0 0 36px;max-width:22ch;text-wrap:pretty}
.doc .lead{font-size:19px;font-weight:300;line-height:1.65;color:var(--body);max-width:52ch;margin:0 0 1.2em}
.doc p,.doc li{font-size:16px;font-weight:300;line-height:1.75;color:var(--body);max-width:65ch;margin:0 0 1.2em}
.doc p strong{color:var(--ink-2);font-weight:500}
.doc h2{font-size:22px;font-weight:400;letter-spacing:-.02em;color:var(--ink);margin:3em 0 .9em}
.doc .rule{border:0;border-top:1px solid var(--rule);margin:64px 0}
.doc a{text-underline-offset:3px}
.doc a:hover{color:var(--ink)}
.doc dl.facts{margin:2em 0 0;border-top:0}
.doc dl.facts>div{grid-template-columns:minmax(150px,220px) 1fr;gap:40px;border-top:1px solid var(--rule);border-bottom:0}
.doc dl.facts dd{font-size:18px;font-weight:400;color:var(--ink)}
@media(max-width:600px){.doc dl.facts>div{grid-template-columns:1fr;gap:6px}}
@media(max-width:900px){main.doc{padding:56px 6% 80px}}

.founding h2{margin:0;font-size:40px;font-weight:400;letter-spacing:-0.03em}
.founding p{margin:0 0 18px;font-size:17px;font-weight:300;line-height:1.72;color:var(--body);max-width:60ch}
.founding p.floor{margin:30px 0 32px;font-size:26px;font-weight:300;letter-spacing:-0.015em;color:var(--ink)}
@media (max-width:900px){.founding h2{font-size:clamp(28px,7vw,38px)}.founding p.floor{font-size:22px}}

.cap-index{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.cap-index a{display:inline-flex;gap:10px;align-items:baseline;padding:9px 14px;border:1px solid #2C2822;text-decoration:none;color:var(--ink-2);font-size:14px;transition:border-color .2s,background .2s}
.cap-index a:hover{border-color:#5A5246;background:var(--raised)}
.cap-index .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--label)}
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
.cap{border-top:1px solid var(--rule);padding:36px 0 40px;scroll-margin-top:24px}
.cap .n{display:block;margin-bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted)}
.cap h3{margin:0 0 10px;font-size:28px;font-weight:400;letter-spacing:-0.025em;line-height:1.15}
.cap .line{margin:0 0 18px;font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2)}
.cap ul{margin:0 0 18px;padding:0;list-style:none}
.cap li{position:relative;padding:7px 0 7px 18px;border-top:1px solid #1A1814;font-size:15px;font-weight:300;line-height:1.55;color:var(--body)}
.cap li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:1px;background:var(--label)}
.cap .proof{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.cap .proof a{color:var(--muted);text-decoration:none;border-bottom:1px solid #3A352D}
.cap .proof a:hover{color:var(--ink);border-color:var(--ink)}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .caps{grid-template-columns:1fr} .steps.four{grid-template-columns:1fr} .cap h3{font-size:24px} }
