@font-face{font-family:BC;src:url(fonts/BarlowCondensed-Bold.ttf);font-weight:700}
@font-face{font-family:BC;src:url(fonts/BarlowCondensed-Medium.ttf);font-weight:500}
@font-face{font-family:B;src:url(fonts/Barlow-Regular.ttf)}
@font-face{font-family:GM;src:url(fonts/GeistMono-VariableFont_wght.ttf)}
:root{--cu:#ff8a3d;--ink:#0a0807;--paper:#f3ece4;--mute:#a99c8f;--pad:clamp(20px,6vw,96px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{color:var(--paper);font:400 clamp(16px,1.2vw,19px)/1.55 B,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
.mono{font-family:GM,ui-monospace,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.cu{color:var(--cu)}
h1,h2,.big{font-family:BC,"Arial Narrow",sans-serif;font-weight:700;text-transform:uppercase;line-height:.86;letter-spacing:-.005em}
/* top HUD */
.hud{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);mix-blend-mode:difference;color:var(--paper)}
.hud nav{display:flex;gap:28px}.hud nav a{text-decoration:none}
.hud .tc{color:var(--cu);mix-blend-mode:normal}
@media(max-width:760px){.hud nav{display:none}}
/* full-bleed sections */
.fb{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--pad)*1.4) var(--pad) var(--pad)}
.fb>.media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.fb>.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,8,7,.86),rgba(10,8,7,.25) 65%,rgba(10,8,7,.1)),linear-gradient(180deg,rgba(10,8,7,.55),transparent 30%,rgba(10,8,7,.9))}
.credit{position:absolute;right:var(--pad);bottom:16px;color:var(--mute)}
.label{position:absolute;left:var(--pad);top:calc(var(--pad) + 30px)}
/* hero */
.hero h1{font-size:clamp(3.6rem,13vw,15rem)}
.hero p{max-width:38ch;margin-top:1.6rem;font-size:clamp(1.05rem,1.6vw,1.45rem);color:#ddd2c6}
.mark{position:absolute;z-index:-1;pointer-events:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,255,255,.12))}
.hero .mark{right:-18vw;top:8vh;width:min(70vw,1150px);transform:rotate(-9deg)}
.cta{display:inline-block;margin-top:2.2rem;padding:15px 24px;background:var(--cu);color:var(--ink);text-decoration:none}
@media(max-width:760px){.hero .mark{right:-42vw;top:9vh;width:110vw}}
/* statement */
.state h2{font-size:clamp(3rem,9.5vw,11rem);max-width:12ch}
/* what we do: giant stacked lines, no cards */
.do{padding-top:24vh}
.do ol{list-style:none;border-top:1px solid rgba(243,236,228,.18)}
.do li{display:block;padding:3vh 0;border-bottom:1px solid rgba(243,236,228,.18)}
.do li .mono{display:block;margin-bottom:.6rem}
.do li .big{font-size:clamp(2.4rem,6.4vw,7.5rem)}
.do li p{color:#d6cbbf;max-width:52ch;margin-top:.8rem;margin-left:clamp(0px,18vw,320px)}
@media(max-width:760px){.do li p{margin-left:0}}
/* how it works: three full-bleed steps */
.step{justify-content:center}
.step .n{font-family:BC;font-weight:700;font-size:clamp(9rem,34vw,36rem);line-height:.75;color:transparent;-webkit-text-stroke:2px var(--cu);position:absolute;right:var(--pad);bottom:-4vw;z-index:-1;opacity:.85;mix-blend-mode:plus-lighter}
.step h2{font-size:clamp(3rem,10vw,12rem)}
.step p{max-width:36ch;margin-top:1.2rem;font-size:clamp(1.05rem,1.5vw,1.35rem);color:#ddd2c6}
/* continuous filmstrip */
.strip{position:relative;overflow:hidden;padding:0}
.strip .head{padding:18vh var(--pad) 5vh}
.strip .head h2{font-size:clamp(3rem,10vw,12rem)}
.reel{display:flex;width:max-content;animation:roll 70s linear infinite}
.reel figure{position:relative;height:clamp(320px,62vh,720px);flex:none}
.reel img{height:100%;width:auto;display:block;filter:saturate(.85) contrast(1.04)}
.reel figcaption{position:absolute;left:14px;bottom:12px;color:#e9e0d6;text-shadow:0 1px 6px #000}
@keyframes roll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.reel{animation:none;overflow-x:auto;width:auto}}
.strip .note{padding:2vh var(--pad) 0;color:var(--mute)}
/* placeholder slot */
.slot{background:repeating-linear-gradient(135deg,#15110e 0 22px,#1b1612 22px 44px);justify-content:center;align-items:flex-start}
.slot .ph{border:1px dashed var(--cu);padding:10px 14px;margin-bottom:2rem;color:var(--cu)}
.slot h2{font-size:clamp(3rem,9vw,10rem);color:#5d5248}
/* about */
.about .body{max-width:62ch;columns:2 30ch;column-gap:4vw;margin-top:2rem;color:#e2d8cd}
.about h2{font-size:clamp(3rem,9vw,10.5rem)}
/* contact */
.contact{justify-content:center;text-align:left}
.contact .mail{font-family:BC;font-weight:700;font-size:clamp(2.2rem,8.4vw,10rem);line-height:.9;text-decoration:none;word-break:break-word;display:block;margin:2rem 0}
.contact .mail:hover{color:var(--cu)}
.contact .mark{left:-14vw;bottom:-22vw;width:min(70vw,1000px);transform:rotate(12deg);opacity:.9}
footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px var(--pad);color:var(--mute);border-top:1px solid rgba(243,236,228,.12)}
/* review fixes */
.about{min-height:150vh;justify-content:flex-end}
.about>.media{height:100vh;object-position:center 30%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.about>.shade{background:linear-gradient(180deg,rgba(10,8,7,.15),rgba(10,8,7,0) 40%,rgba(10,8,7,.6) 62%,var(--ink) 72%)!important}
.about .credit{top:calc(100vh - 40px);bottom:auto}
.contact .mark{left:auto;right:-16vw;bottom:-20vw;transform:rotate(12deg)}
.slot{min-height:70vh}
@media(max-width:760px){.about{min-height:160svh}.about>.media{height:70svh}.about .credit{top:calc(70svh - 34px)}.contact .mark{right:-40vw;bottom:-30vw;width:100vw}}
@media(max-width:760px){.hero .mark{top:5vh;width:90vw;right:-38vw}.contact .mark{bottom:-48vw;width:85vw}}
/* round 2 */
.hero .hero-mark{mix-blend-mode:normal;opacity:1;filter:drop-shadow(0 0 2px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,255,255,.12));right:-9vw;top:12vh;width:min(46vw,760px);transform:rotate(-6deg)}
@media(max-width:760px){.hero .hero-mark{right:-16vw;top:9vh;width:68vw}}
.para{background:var(--img) center/cover fixed;justify-content:flex-end}
@media(max-width:760px){.para{background-attachment:scroll}}
.para h2{font-size:clamp(3rem,10vw,12rem)}
.doing{position:relative;overflow:hidden;padding:0 0 8vh}
.doing-row{display:flex;gap:0;height:clamp(300px,58vh,680px)}
.doing-row figure{position:relative;flex:0 0 var(--w);overflow:hidden}
.doing-row figure+figure{margin-left:-6vw;clip-path:polygon(8vw 0,100% 0,100% 100%,0 100%)}
.doing-row img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.doing-row figcaption{position:absolute;left:10vw;bottom:14px;color:#efe6dc;text-shadow:0 1px 6px #000}
.doing-row figure:first-child figcaption{left:16px}
.doing-tag{font-size:clamp(2.6rem,7vw,8rem);padding:3vh var(--pad) 0}
@media(max-width:760px){.doing-row{overflow-x:auto;scroll-snap-type:x mandatory}.doing-row figure{flex-basis:88vw;scroll-snap-align:start}.doing-row figure+figure{margin-left:-10vw}}
.collage{position:relative;min-height:120vh;overflow:hidden}
.collage img{position:absolute;object-fit:cover;display:block}
.collage .c1{left:0;top:0;width:68vw;height:100vh;object-position:35% 40%}
.collage .c2{right:0;top:30vh;width:46vw;height:82vh;object-position:65% 40%;filter:grayscale(1) contrast(1.1);box-shadow:-30px 0 80px rgba(0,0,0,.7)}
.collage .ctext{position:absolute;left:var(--pad);bottom:8vh;z-index:2}
.collage .ctext h2{font-size:clamp(3rem,8vw,9.5rem);text-shadow:0 4px 40px rgba(0,0,0,.6)}
.collage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,8,7,.85));pointer-events:none}
.collage .ctext,.collage .credit{z-index:3}
@media(max-width:760px){.collage{min-height:130svh}.collage .c1{width:100vw;height:70svh;object-position:30% 40%}.collage .c2{width:72vw;height:52svh;top:52svh}}
.about>.media{object-position:50% 40%}
/* final: mark top-left only */
.hero .hero-mark{right:auto;left:var(--pad);top:clamp(64px,9vh,110px);width:clamp(150px,17vw,330px);transform:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,255,255,.12))}
.hero h1{font-size:clamp(3.4rem,10.5vw,12.5rem)}
@media(min-width:761px){.hero .hero-text{margin-left:0}}
@media(max-width:760px){.hero .hero-mark{left:var(--pad);right:auto;top:72px;width:46vw}}
@media(min-width:761px){.hero br.m{display:none}.hero h1{font-size:clamp(3.4rem,8vw,10rem)}.hero .hero-mark{width:clamp(150px,15vw,300px)}}
/* team + showcase invite */
.about .team{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;margin-top:8vh;border-top:1px solid rgba(243,236,228,.18);padding-top:4vh}
.about .person h3{font-size:clamp(2.2rem,4vw,4.4rem);margin:.7rem 0 1rem}
.about .person p{color:#e2d8cd;max-width:42ch}
@media(max-width:900px){.about .team{grid-template-columns:1fr;gap:5vh}}
.contact .invite{font-size:clamp(2.6rem,7.5vw,8.5rem);max-width:13ch;margin:2rem 0 1.4rem}
.contact .invite-copy{max-width:44ch;color:#ddd2c6;font-size:clamp(1.05rem,1.5vw,1.35rem)}
.contact .cta:hover{background:var(--paper)}
.contact .invite-note{margin-top:1.4rem;color:var(--mute);opacity:0;transition:opacity .4s}
.contact .invite-note.on{opacity:1}
@media(max-width:760px){.about{min-height:0;padding-top:56svh}}