:root{
  --ink:#0a0a0c; --ink-2:#121216; --ink-3:#1b1b20; --line:#2b2b31;
  --paper:#ece6da; --muted:#a39d92; --red:#d61418; --red-dim:#7a0c0f;
  --gold:#d6a84a; --gold-dim:#6e5524; --cream:#f3e7c9;
  --anton:'Anton',Impact,'Arial Narrow',sans-serif;
  --type:'Courier Prime','Courier New',monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(16px,4vw,56px); --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.red{color:var(--red)}

/* reel-style red frame + grain */
.frame{position:fixed;inset:12px;border:2px solid var(--red);pointer-events:none;z-index:50;opacity:.85}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:49;opacity:.07;
  background-image: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

/* stamp */
.stamp{display:inline-block;font:400 15px/1 var(--anton);text-transform:uppercase;letter-spacing:.06em;color:var(--red);
  border:3px solid var(--red);padding:6px 10px 5px;transform:rotate(-4deg);text-decoration:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E")}

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:24px;justify-content:space-between;
  padding:22px calc(var(--gut) + 8px) 14px;background:linear-gradient(var(--ink) 70%,transparent)}
.top nav{display:flex;gap:26px;font:700 13px/1 var(--type);text-transform:uppercase;letter-spacing:.08em}
.top nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.top nav a:hover{color:var(--paper)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;text-decoration:none;
  font:700 15px/1 var(--type);text-transform:uppercase;letter-spacing:.05em;padding:16px 22px;border:2px solid var(--red);transition:transform .15s,background .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--paper)}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn-ghost:hover{box-shadow:4px 4px 0 var(--red)}
.btn-sm{padding:10px 14px;font-size:12px}
.btn-gold{background:transparent;border-color:var(--gold);color:var(--gold)}
.btn-gold:hover{box-shadow:4px 4px 0 var(--gold)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.cta-row.center{justify-content:center}

/* hero */
main{max-width:var(--max);margin:0 auto;padding:0 calc(var(--gut) + 8px)}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;min-height:min(calc(100vh - 90px),820px);padding:40px 0 60px}
.dateline{font:400 13px/1.4 var(--type);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 22px}
h1{margin:0;font-weight:400}
.h1-name{display:block;font:400 clamp(58px,9.5vw,132px)/.9 var(--anton);text-transform:uppercase;letter-spacing:.01em}
.h1-role{display:block;margin-top:16px;font:700 14px/1.4 var(--type);color:var(--red);text-transform:uppercase;letter-spacing:.1em}
.hook{font:800 clamp(26px,3.2vw,40px)/1.15 var(--sans);margin:34px 0 10px;letter-spacing:-.01em}
.hook em{font-style:normal;color:var(--red)}
.type{font:400 clamp(16px,1.6vw,19px)/1.5 var(--type);color:var(--muted);margin:0;min-height:3em}
.type.typing::after{content:'';display:inline-block;width:.55em;height:1em;background:var(--red);vertical-align:-.12em;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-photo{position:relative;margin:0}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:52% 50%;filter:grayscale(.35) contrast(1.12) brightness(.92);
  box-shadow:0 30px 80px #000,0 0 0 1px var(--line)}
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,12,.85));pointer-events:none}
.stamp-photo{position:absolute;right:-14px;top:28px;font-size:28px;padding:10px 16px 8px;transform:rotate(8deg);z-index:2;background:rgba(10,10,12,.35)}

/* summary */
.summary{border-top:1px solid var(--line);padding:70px 0 40px}
.label{font:700 13px/1 var(--type);text-transform:uppercase;letter-spacing:.16em;color:var(--red);margin:0 0 18px}
.label::before{content:'▌';margin-right:8px}
.label.gold{color:var(--gold)}
.lead{font:400 clamp(19px,2vw,24px)/1.55 var(--sans);max-width:58ch;margin:0}
.lead strong{color:#fff}
.facts{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line)}
.facts li{padding:26px 22px;border-right:1px solid var(--line)}
.facts li:last-child{border-right:0}
.facts b{display:block;font:400 clamp(44px,5vw,64px)/1 var(--anton);color:var(--red)}
.facts span{display:block;margin-top:10px;font:400 14px/1.4 var(--type);color:var(--muted)}

/* sections */
.section{padding:110px 0 30px}
.sec-head{max-width:760px;margin-bottom:46px}
.sec-head h2,.final h2{font:400 clamp(40px,6vw,76px)/.98 var(--anton);text-transform:uppercase;margin:0 0 18px}
.sec-lead{color:var(--muted);font-size:18px;margin:0}

/* reels */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px)}
@media (max-width:1180px){.reels{grid-template-columns:repeat(3,1fr)}}
.reel{background:var(--ink-2);border:1px solid var(--line);padding:14px 14px 22px;transition:transform .25s,border-color .25s}
.reel:nth-child(odd){transform:rotate(-.5deg)}
.reel:nth-child(4n){transform:rotate(.5deg)}
.reel:hover{transform:rotate(0) translateY(-4px);border-color:var(--red)}
.reel.warm:hover,.reel.gold:hover{border-color:var(--gold)}
.reel-video{position:relative;background:#000;aspect-ratio:9/16;overflow:hidden}
.reel-video video{width:100%;height:100%;object-fit:cover}
.tag{font:700 12px/1.3 var(--type);text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin:18px 0 8px}
.reel.warm .tag,.reel.gold .tag{color:var(--gold)}
.reel h3{font:800 20px/1.25 var(--sans);margin:0 0 8px}
.reel p:not(.tag){color:var(--muted);font-size:15px;margin:0}
q{color:var(--paper);font-family:var(--type)}

/* clients */
.clients{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line)}
.clients li{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:18px;padding:34px 18px 22px;min-height:220px;border-right:1px solid var(--line);text-align:center;transition:background .25s}
.clients li:last-child{border-right:0}
.clients li:hover{background:var(--ink-2)}
.clients img{max-height:120px;width:auto;max-width:100%;opacity:.85;margin:auto 0}
.clients img.logo-wide{width:82%;max-height:none}
.clients li:hover img,.clients li:hover .wordmark{opacity:1}
.wordmark{margin:auto 0;color:var(--paper);opacity:.85;line-height:1}
.wm-extradom{font:800 30px/1 var(--sans);letter-spacing:-.02em;text-transform:uppercase}
.wm-51015{font:400 44px/1 var(--anton);letter-spacing:.02em}
.wm-invicto{font:700 30px/1 var(--type);text-transform:uppercase;letter-spacing:.14em}
.wm-555{font:800 22px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em}
.wm-555 b{display:block;font:400 54px/1 var(--anton);color:var(--red);letter-spacing:.04em;margin-top:4px}
.cat{font:700 11px/1.4 var(--type);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

/* strip + banners */
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-color:var(--red) var(--ink-3)}
.strip img{flex:0 0 auto;width:clamp(200px,22vw,260px);min-width:0;height:auto;scroll-snap-align:start;box-shadow:0 12px 30px #000}
.banners{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.banners figure{margin:0;background:#000;border:1px solid var(--line);padding:18px}
.banners img{width:100%;height:auto}
figcaption{font:400 13px/1.4 var(--type);color:var(--muted);margin-top:12px}

/* method */
.method{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.steps{list-style:none;counter-reset:s;margin:0;padding:0}
.steps li{counter-increment:s;position:relative;padding:18px 0 18px 70px;border-bottom:1px dashed var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:14px;font:400 38px/1 var(--anton);color:var(--ink-3);-webkit-text-stroke:1px var(--muted)}
.steps b{display:block;font:800 18px/1.3 var(--sans)}
.steps span{display:block;color:var(--muted);font-size:15px;margin-top:4px}
.steps li.human::before{color:var(--red);-webkit-text-stroke:0}
.steps i{display:inline-block;margin-top:8px;font:700 11px/1 var(--type);font-style:normal;text-transform:uppercase;letter-spacing:.12em;color:var(--red);border:1.5px solid var(--red);padding:5px 7px;transform:rotate(-2deg)}
.method-photo{margin:0;position:sticky;top:100px}
.method-photo img{width:100%;filter:grayscale(.2) contrast(1.05);border:1px solid var(--line)}
.two-voices{display:grid;grid-template-columns:1fr 1fr;margin-top:80px;border:1px solid var(--line)}
.two-voices>div{padding:34px}
.two-voices>div+div{border-left:1px solid var(--line);background:var(--ink-2)}
.voice{font:700 clamp(20px,2.2vw,26px)/1.35 var(--type);color:#fff;margin:6px 0 14px}
.two-voices p:last-child{color:var(--muted);margin:0}

/* seo */
.seo-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px)}
.defs{margin:0}
.defs dt{font:400 46px/1 var(--anton);color:var(--red);margin-top:26px}
.defs dt:first-child{margin-top:0}
.defs dd{margin:8px 0 0;color:var(--muted)}
.defs strong{color:var(--paper)}
.proof{background:var(--ink-2);border:1px solid var(--line);padding:28px}
.proof .tag{margin-top:0}
.checks{list-style:none;padding:0;margin:0 0 22px}
.checks li{padding:9px 0 9px 28px;position:relative;font-size:15px;border-bottom:1px solid var(--line)}
.checks li::before{content:'✓';position:absolute;left:0;color:var(--red);font-weight:800}
code{font:400 .92em var(--type);color:var(--cream)}
.code{margin:0;background:#000;border-left:3px solid var(--red);padding:18px;overflow-x:auto;font-size:13px;line-height:1.55}

/* studio pro – gold accents */
.studio{position:relative}
.studio{border-top:1px solid var(--gold-dim);margin-top:110px;padding-top:80px}
.studio h2 em{color:var(--gold)}
.studio-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;position:relative}
.studio-grid figure{margin:0}
.studio-grid figure img{width:100%;border:1px solid var(--gold-dim)}
.gear{list-style:none;padding:0;margin:0 0 26px}
.gear li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--gold-dim);font-size:15px;color:var(--muted)}
.gear b{font:700 12px/1.6 var(--type);text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}
.logos{width:100%;max-width:420px;margin:0 0 22px;border:1px solid var(--gold-dim)}

.shots{display:grid;grid-template-columns:1.45fr 1fr;gap:14px}
.shots figure{margin:0}
.shots img{width:100%;height:clamp(240px,30vw,400px);object-fit:cover;border:1px solid var(--gold-dim)}
@media (max-width:600px){.shots{grid-template-columns:1fr}.shots img{height:auto}}

/* photos */
.photos{columns:3 300px;column-gap:16px}
.photos figure{margin:0 0 16px;break-inside:avoid}
.photos a{display:block;overflow:hidden;border:1px solid var(--line)}
.photos img{width:100%;transition:transform .5s,filter .3s;filter:brightness(.92)}
.photos a:hover img{transform:scale(1.03);filter:brightness(1)}
.photos figcaption{margin-top:8px}
.lightbox{border:0;padding:0;background:transparent;max-width:94vw;max-height:94vh;overflow:visible}
.lightbox::backdrop{background:rgba(5,5,6,.94)}
.lightbox img{max-width:94vw;max-height:86vh;width:auto;height:auto;border:1px solid var(--line)}
.lb-cap{font:400 13px/1.4 var(--type);color:var(--muted);margin:10px 0 0;text-align:center}
.lb-close{position:fixed;top:18px;right:22px;background:none;border:0;color:var(--paper);font:400 40px/1 var(--anton);cursor:pointer}

/* faq */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font:800 19px/1.35 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:16px;font:400 30px/1 var(--anton);color:var(--red);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 24px;color:var(--muted);max-width:70ch}

/* final cta */
.final{text-align:center;padding:140px 0 120px;position:relative}
.stamp-big{font-size:clamp(20px,2.4vw,28px);padding:10px 18px 8px;transform:rotate(-6deg);margin:0 0 30px}
.final h2{font-size:clamp(64px,12vw,170px);line-height:.88}
.final-lead{font:400 clamp(18px,2vw,22px)/1.55 var(--type);max-width:46ch;margin:22px auto 0;color:var(--paper)}

/* footer */
.foot{border-top:1px solid var(--line);padding:34px calc(var(--gut) + 8px) 46px;text-align:center;font-size:14px;color:var(--muted)}
.foot a{color:var(--paper)}
.foot .small{font-size:12px;max-width:80ch;margin:10px auto 0}

/* responsive */
@media (max-width:960px){
  .top nav{display:none}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:16px}
  .hero-photo{order:-1}
  .hero-photo img{aspect-ratio:16/11}
  .stamp-photo{right:8px;font-size:20px}
  .facts{grid-template-columns:1fr 1fr}
  .facts li:nth-child(2){border-right:0}
  .facts li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .reels{grid-template-columns:1fr 1fr}
  .method,.seo-grid,.studio-grid{grid-template-columns:1fr}
  .method-photo{position:static}
  .two-voices{grid-template-columns:1fr}
  .two-voices>div+div{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:600px){
  body{font-size:16px}
  .frame{inset:6px;border-width:1.5px}
  .top{padding:14px 18px 10px}
  main{padding:0 18px}
  .reels{grid-template-columns:1fr}
  .reel{transform:none!important}
  .banners{grid-template-columns:1fr}
  .gear li{grid-template-columns:1fr;gap:2px}
  .section{padding-top:80px}
  .btn{width:100%;justify-content:center}
  .top .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  html{scroll-behavior:auto}
  *{transition:none!important}
}
@media (max-width:960px){
  .clients{grid-template-columns:repeat(3,1fr)}
  .clients li{border-bottom:1px solid var(--line)}
  .clients li:nth-child(3n){border-right:0}
}
@media (max-width:600px){
  .clients{grid-template-columns:1fr 1fr}
  .clients li{min-height:170px;border-right:1px solid var(--line)!important}
  .clients li:nth-child(2n){border-right:0!important}
}