:root{--ink:#111;--muted:#666;--line:#e8e8e8;--accent:#00c24a;--bg:#fff}
*{box-sizing:border-box;margin:0}
body{font-family:"Inter Tight","Inter",system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
nav{position:fixed;top:0;left:0;right:0;z-index:10;background:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px 40px}
nav .logo{font-size:20px;font-weight:500}
nav .links{display:flex;gap:24px;font-size:15px}
nav .cta{justify-self:end}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:14px 24px;border-radius:14px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden}
.hero img{position:absolute;left:50%;top:76px;height:86%;transform:translateX(-50%);max-width:none}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(to top,#fff 18%,rgba(255,255,255,.85) 40%,rgba(255,255,255,0))}
.hero .left{position:absolute;left:40px;bottom:48px;z-index:2;max-width:560px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:14px}
.badge i{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,194,74,.18)}
h1{font-size:clamp(30px,3.4vw,48px);line-height:1.08;font-weight:500;letter-spacing:-.02em}
.hero .right{position:absolute;right:40px;bottom:48px;z-index:2;max-width:400px;color:var(--muted);font-size:15px;line-height:1.5}
.hero .right .btn,.closing .btn{margin-top:20px}
.soc-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.soc-btns .btn{margin:0;padding:11px 18px;font-size:14px}
.closing .soc-btns{justify-content:center}
nav .soc-btns{margin:0;justify-self:end}
section{padding:64px 40px;max-width:1240px;margin:0 auto}
h2{font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.02em;margin-bottom:12px}
.sub{color:var(--muted);max-width:560px;line-height:1.5;margin-bottom:32px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fafafa;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.card .shot{aspect-ratio:16/10;background:linear-gradient(135deg,#f0f0f0,#e2e2e2);display:grid;place-items:center;color:#aaa;font-size:14px}
.card .shot img,.card .shot video{width:100%;height:100%;object-fit:cover}
.card .meta{padding:20px 22px 24px}
.card h3{font-size:20px;font-weight:500;margin-bottom:6px}
.card p{color:var(--muted);font-size:15px;line-height:1.45}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tags span{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:4px 10px;color:var(--muted);background:#fff}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.stats b{display:block;font-size:44px;font-weight:500}
.stats span{color:var(--muted)}
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.about img{width:100%;border-radius:24px}
.about p{color:var(--muted);line-height:1.65;margin-bottom:16px}
.closing{text-align:center}
.closing .btn{margin-top:24px}
footer{border-top:1px solid var(--line);padding:32px 40px;display:flex;justify-content:space-between;color:var(--muted);font-size:14px;max-width:1240px;margin:0 auto;flex-wrap:wrap;gap:12px}
footer .soc{display:flex;gap:20px}
.page-top{padding-top:120px}
@media(max-width:800px){
 nav{padding:14px 20px;grid-template-columns:1fr auto}nav .links{display:none}
 .hero img{height:62%;top:76px}
 .hero .left{left:20px;right:20px;bottom:150px}
 .hero .right{left:20px;right:20px;bottom:24px;max-width:none}
 .hero .right p{display:none}.hero .right .btn{margin-top:0}
 section{padding:48px 20px}.grid,.about{grid-template-columns:1fr}.stats b{font-size:32px}
}
.dark{background:#0b0b0b;color:#fff;max-width:none;padding:0}
.dark section{padding:64px 40px}
.dark .sub,.dark p{color:#a8a8a8}
.dark h2,.dark h3{color:#fff}
.dark .btn{background:#fff;color:#111;box-shadow:none}
.dark .cols{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.dark .cols h3{font-size:20px;font-weight:500;margin-bottom:10px}
.dark .cols p{line-height:1.65;margin-bottom:12px}
.shot.text{background:#111;color:#8fe3a7;font:14px/1.6 ui-monospace,Consolas,monospace;padding:24px;display:block;text-align:left;white-space:pre}
.card .shot img{object-position:top}
.lead{font-size:clamp(20px,2vw,26px);line-height:1.4;max-width:820px;font-weight:400;letter-spacing:-.01em}
@media(max-width:800px){.dark .cols{grid-template-columns:1fr}.dark section{padding:48px 20px}}
.card .shot{display:block}.card .shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
/* about page */
.twotone{font-size:clamp(28px,3.6vw,52px);line-height:1.1;font-weight:500;letter-spacing:-.025em;max-width:1000px;margin-bottom:48px}
.twotone span{color:#9a9a9a}
.intro{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:stretch}
.notes{display:flex;flex-direction:column;gap:12px}
.note{border:1px solid var(--line);border-radius:20px;padding:20px 22px;background:#fafafa;flex:1}
.note b{display:block;font-weight:500;margin-bottom:6px}
.note p{color:var(--muted);font-size:15px;line-height:1.5}
.portrait{width:100%;height:100%;min-height:420px;object-fit:cover;object-position:top;border-radius:24px;background:#fff;border:1px solid var(--line)}
.split{display:grid;grid-template-columns:1fr 3fr;gap:32px}
.label{color:#2f7d4a;font-size:14px;padding-top:8px}
.lead2{font-size:clamp(24px,2.4vw,34px);line-height:1.2;max-width:760px;margin-bottom:20px}
.split p{color:var(--muted);line-height:1.65;max-width:720px;margin-bottom:16px}
.shots{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:48px}
.shots img{width:100%;height:340px;object-fit:cover;object-position:top;border-radius:24px;border:1px solid var(--line)}
.stats6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{border:1px solid #262626;border-radius:20px;padding:28px;background:#121212}
.stat b{display:block;font-size:48px;font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
.dark .stat p{font-size:15px;line-height:1.5;margin:0}
.tbl{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:1.2fr 1.6fr auto;gap:16px;align-items:center;padding:18px 22px;border-radius:16px;background:#f6f6f6}
.row b{font-weight:500}.row span{color:var(--muted);font-size:15px}.row em{font-style:normal;font-size:14px;color:var(--muted)}
.row.hl{background:var(--accent);color:#fff}.row.hl span,.row.hl em{color:#eafff1}
.tbl.dk .row{background:#161616}.tbl.dk .row span,.tbl.dk .row em{color:#a8a8a8}
.tbl.dk .row.hl{background:var(--accent);color:#fff}.tbl.dk .row.hl span,.tbl.dk .row.hl em{color:#eafff1}
.stk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
.stk{display:flex;gap:16px;align-items:center;padding:16px 20px;border-radius:16px;background:#f6f6f6}
.stk i{flex:none;width:44px;height:44px;border-radius:12px;background:#111;color:#fff;font:500 14px/44px "Inter Tight",sans-serif;text-align:center;font-style:normal}
.stk b{display:block;font-weight:500}.stk span{color:var(--muted);font-size:14px;line-height:1.4}
.stk.hl{background:var(--accent);color:#fff}.stk.hl span{color:#eafff1}.stk.hl i{background:#fff;color:#111}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--muted);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:12px 0 0;color:var(--muted);line-height:1.6}
@media(max-width:800px){.intro,.split,.shots,.stk-grid,.stats6{grid-template-columns:1fr}.row{grid-template-columns:1fr;gap:4px}.portrait{min-height:300px}.shots img{height:220px}}
.note{flex:none}
.note b{display:flex;align-items:center;gap:8px;font-size:17px;margin-bottom:12px}
.note .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,194,74,.18)}
.note ul{list-style:none;padding:0}
.note li{color:var(--muted);font-size:15px;line-height:1.45;padding:6px 0 6px 20px;position:relative}
.note li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;color:#333}
.notes{justify-content:space-between}

/* featured projects (index): black blocks with a looping clip */
.feature section{padding:56px 40px}.fgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.fgrid.flip{grid-template-columns:1.15fr 1fr}.fgrid.flip .ftext{order:2}
.kick{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8f8f8f;margin-bottom:14px}
.ftext h2{font-size:clamp(34px,4.4vw,56px);font-weight:500;letter-spacing:-.02em;margin-bottom:16px}
.ftext p{line-height:1.6;max-width:480px}
.dark .tags span{background:transparent;border-color:#333;color:#bdbdbd}
.fbtns{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.fmedia{border-radius:22px;overflow:hidden;border:1px solid #262626;background:#14152a;box-shadow:0 30px 80px rgba(0,0,0,.5);aspect-ratio:1100/840}
.fmedia video{display:block;width:100%;height:100%;object-fit:cover}
.grid3{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}.grid3 .card{grid-column:span 2}.grid3 .card:nth-child(n+4){grid-column:span 3}
.dark+.dark.feature{border-top:1px solid #1f1f1f}.feature+section+.feature+.dark{border-top:1px solid #1f1f1f}
dialog#film{margin:auto;border:0;border-radius:18px;padding:0;background:#000;width:min(960px,92vw);overflow:hidden}
dialog#film::backdrop{background:rgba(0,0,0,.75)}dialog#film .yt{aspect-ratio:16/9;background:#000}dialog#film iframe{display:block;width:100%;height:100%;border:0}
dialog#film form{position:absolute;top:12px;right:12px}dialog#film .btn{padding:8px 14px;font-size:14px;background:#fff;color:#111}
@media(max-width:800px){.fgrid,.fgrid.flip{grid-template-columns:1fr;gap:32px}.fgrid.flip .ftext{order:0}.feature section{padding:56px 20px}.grid3{grid-template-columns:1fr}.grid3 .card,.grid3 .card:nth-child(n+4){grid-column:auto}}
#film+.dark{border-top:1px solid #1f1f1f}

nav .logo img{height:44px;display:block}
.herd{padding:48px 0 40px;text-align:center}.herd .scene{position:relative;container-type:inline-size;max-width:1400px;margin:0 auto}.herd img{width:100%;height:auto;display:block}
.herd .title{position:absolute;top:9%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:1.2cqw}
.herd .title b{font:400 7.4cqw/1 "Archivo Black",Impact,sans-serif;letter-spacing:.16em;margin-right:-.16em}.herd .title span{font:500 max(1.9cqw,12px)/1 "Inter Tight",sans-serif;letter-spacing:.22em;text-transform:uppercase}
.herd p{max-width:640px;margin:24px auto 0;padding:0 16px;line-height:1.6}
@media(max-width:700px){nav .logo img{height:34px}.herd{padding:40px 0}}

.dark .stk{background:#161616}.dark .stk b{color:#fff}.dark .stk span{color:#a8a8a8}.dark .stk i{background:#fff;color:#111}
.dark .stk.hl{background:var(--accent)}.dark .stk.hl span{color:#eafff1}.dark .stk.hl i{background:#fff;color:#111}
.brandband{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,560px);gap:64px;align-items:center;justify-content:center}.brandband .disc{width:100%}
.brandband img{width:100%;height:auto;display:block}.brandband h2{margin-bottom:16px}.brandband p{line-height:1.65;margin-bottom:28px}

.story-hero{padding-top:128px;padding-bottom:24px}.story-hero p{color:var(--muted);line-height:1.7;max-width:720px;font-size:18px;margin-bottom:16px}
.fullbleed{width:100%;max-width:1400px;margin:0 auto;display:block;height:auto}
.story p{line-height:1.75;font-size:18px;max-width:720px;margin-bottom:20px}
.big{font-size:clamp(26px,3.2vw,44px);line-height:1.2;font-weight:500;letter-spacing:-.02em;max-width:900px;margin-bottom:28px;color:#fff}
.big em{font-style:normal;color:#9a9a9a}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 40px}
.cards3 div{border:1px solid var(--line);border-radius:20px;padding:24px;background:#fafafa}.cards3 b{display:block;font-weight:500;font-size:18px;margin-bottom:8px}.cards3 span{color:var(--muted);line-height:1.5;font-size:15px}
.storybtns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:800px){.cards3{grid-template-columns:1fr}.story-hero{padding-top:110px}}
.dark .split p{color:#bdbdbd}
.fullbleed{aspect-ratio:1800/520;object-fit:cover;object-position:bottom}
.herd .herdvid{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#fff}
.herd .title{top:3.5%;gap:1cqw}.herd .title b{font-size:6.6cqw}
.fmedia.wide{aspect-ratio:16/9}
.fgrid.flip.wide{grid-template-columns:1.7fr 1fr}@media(max-width:800px){.fgrid.flip.wide{grid-template-columns:1fr}}
.disc{background:#fff;border-radius:50%;padding:0;box-shadow:0 0 0 1px #2a2a2a,0 24px 60px rgba(0,0,0,.45)}
.disc img{mix-blend-mode:multiply;border-radius:50%}
@media(max-width:800px){.brandband{grid-template-columns:1fr;gap:32px;justify-items:center;text-align:center}.brandband .disc{width:min(260px,70vw)}.brandband .storybtns{justify-content:center}}
.soft{background:#f4f4f2}.soft .lead{max-width:820px}

.hero .right{color:#444;font-size:16px}
.proof{padding:40px 40px 48px}.proof .stats b{font-size:clamp(32px,4vw,52px);letter-spacing:-.02em}
.card .shot.text{display:grid;align-content:center;aspect-ratio:16/10;font-size:clamp(14px,1.5vw,19px)}
@media(max-width:800px){.proof .stats{grid-template-columns:1fr;gap:20px}.proof{padding:32px 20px}}

.ico{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .15s,background .15s,color .15s}
.ico svg{width:18px;height:18px;fill:currentColor}.ico:hover{transform:translateY(-2px)}
nav .soc-btns{gap:8px;flex-wrap:nowrap}nav .ico{width:36px;height:36px;background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}nav .ico svg{width:15px;height:15px}nav .ico:hover{background:var(--ink);color:#fff;transform:none}
.dark .ico{background:#fff;color:#111;box-shadow:none}
.soc-btns .btn+.ico{margin-left:6px}.hero .right .soc-btns{align-items:center}