/* Concept: a studio's case files. The hero is a contact sheet (every frame jumps to its story);
   three long-form case files with a spec-sheet margin, then a grid of shorter stories, an archive
   table, the process and notes. Light theme by design; brand red marks scope, time and place. */
:root{
  color-scheme:light;
  --paper:#FFFFFF; --leaf:#F6F6F4; --ink:#121212; --text:#2C2C2C; --grey:#4B4B4B; --muted:#6E6E6E; --rule:#E2E2E0; --hair:#CFCFCC;
  --red:#ED1C24; --red-ink:#C8141B; --black:#0B0B0B;
  --display:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font:17px/1.7 var(--body)}
a{color:var(--red-ink)} a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.05;text-wrap:balance;margin:0}
img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding-inline:24px}
.mono{font:500 11.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}

/* site chrome */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding-block:14px}
.logo{display:flex;align-items:stretch;gap:10px;text-decoration:none;color:#4B4B4B}
.logo i{width:20px;background:var(--red);position:relative;display:block}
.logo i::after{content:"";position:absolute;right:0;bottom:6px;width:8px;height:1.5px;background:#FFFFFF}
.logo span{display:flex;flex-direction:column;font-family:var(--display);line-height:1;font-size:18px}
.logo b{font-weight:700} .logo em{font-style:normal;font-weight:300} .logo small{font-weight:700;font-size:9px;color:var(--red);margin-top:3px}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font:500 15px var(--body)}
.top nav a{color:var(--grey);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--red)}
.top nav a.cta{background:var(--ink);color:#FFFFFF;padding:10px 16px;font-weight:600;box-shadow:none}
.top nav a.cta:hover{background:var(--red-ink)}
.runhead{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--hair);padding-bottom:10px;margin-bottom:40px;color:var(--muted)}
.runhead b{color:var(--red-ink);font-weight:500}
.crumbs{font:13px var(--mono);color:var(--muted);margin-bottom:22px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:8px;color:#B5B5B5}
.crumbs a{color:var(--muted);text-decoration:none}

/* hero: contact sheet */
.hero{padding-block:40px 72px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:start}
.hero h1{font-size:clamp(42px,6vw,92px);letter-spacing:-.045em;line-height:.93}
.hero h1 b{font-weight:900;display:block}
.hero h1 span{font-weight:300;color:var(--grey);display:block;font-size:.52em;letter-spacing:-.03em;margin-top:.35em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lede{font:400 clamp(19px,1.7vw,22px)/1.5 var(--display);color:var(--ink);margin:28px 0 0;max-width:40ch}
.hero .answer{margin:18px 0 0;max-width:60ch}
.hero .answer b{color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:32px 0 0;border-top:2px solid var(--ink)}
.facts div{padding:14px 14px 0 0}
.facts div+div{padding-left:14px;border-left:1px solid var(--rule)}
.facts b{display:block;font:300 clamp(30px,3vw,42px)/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.facts b i{font-style:normal;color:var(--red)}
.facts span{font-size:14px;color:var(--grey)}
.sheet{margin:0}
.sheet ol{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;background:var(--black)}
.sheet a{position:relative;display:block;aspect-ratio:1;background:#FFFFFF;overflow:hidden;outline-offset:-2px}
.sheet img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.sheet a:hover img{transform:scale(1.06)}
.sheet a span{position:absolute;left:0;top:0;font:500 10.5px/1 var(--mono);background:var(--black);color:#FFFFFF;padding:4px 5px}
.sheet a:hover span,.sheet a:focus-visible span{background:var(--red)}
.sheet figcaption{font:12px var(--mono);color:var(--muted);margin-top:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sheet li[hidden]{display:block!important;opacity:.18}

/* filter */
.filter{position:sticky;top:69px;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-block:1px solid var(--rule)}
.filter .wrap{display:flex;align-items:center;gap:10px 16px;padding-block:12px;overflow-x:auto;scrollbar-width:none}
.filter .wrap::-webkit-scrollbar{display:none}
.filter .lbl{color:var(--muted);flex:none}
.filter button{flex:none;font:600 14px var(--display);color:var(--ink);background:var(--paper);border:1px solid var(--hair);padding:8px 14px;cursor:pointer;border-radius:0}
.filter button sup{font:500 10.5px var(--mono);color:var(--muted);margin-left:4px;vertical-align:top}
.filter button[aria-pressed="true"]{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.filter button[aria-pressed="true"] sup{color:#FF8A8F}
.filter button:hover{border-color:var(--ink)}

/* case files (long form) */
.files{padding-block:72px 24px}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:end;margin-bottom:40px}
.sec-head h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.035em}
.sec-head h2 b{font-weight:900} .sec-head h2 span{font-weight:300;color:var(--grey)}
.sec-head p{margin:0;max-width:56ch;color:var(--grey)}
.sec-head .lbl{color:var(--red-ink);margin-bottom:12px}
.file{display:grid;grid-template-columns:270px minmax(0,1fr);gap:40px 56px;border-top:2px solid var(--ink);padding-block:36px 72px;scroll-margin-top:140px}
.meta{position:sticky;top:150px;align-self:start}
.num{font:900 clamp(88px,9vw,132px)/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--ink);user-select:none;display:block;margin-bottom:22px}
.file:nth-of-type(2n) .num{-webkit-text-stroke-color:var(--red)}
@supports not (-webkit-text-stroke:2px #000){.num{color:var(--hair)}}
.meta dl{margin:0;border-top:1px solid var(--hair)}
.meta dl div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--rule)}
.meta dt{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:0;font:600 15px/1.45 var(--display);color:var(--ink)}
.scope{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.scope li{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);padding:5px 6px;color:var(--ink);background:var(--paper)}
.scope li b{color:var(--red-ink);font-weight:500;margin-right:3px}
.body h2{font-size:clamp(30px,3.6vw,50px);letter-spacing:-.035em;line-height:1}
.body h2 b{font-weight:900;display:block} .body h2 span{font-weight:300;color:var(--grey)}
.body .answer{font:400 clamp(18px,1.5vw,20px)/1.55 var(--display);color:var(--ink);margin:20px 0 0;max-width:62ch}
.shot{margin:32px 0 0;background:var(--leaf);border:1px solid var(--rule)}
.shot img{width:100%;height:auto}
.shot figcaption,.pair figcaption{font:12px/1.5 var(--mono);color:var(--muted);padding:10px 14px;border-top:1px solid var(--rule);background:var(--paper)}
.bmm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:32px;border-top:1px solid var(--hair)}
.bmm div{padding:18px 20px 0 0}
.bmm div+div{padding-left:20px;border-left:1px solid var(--rule)}
.bmm h3{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin-bottom:8px}
.bmm p{margin:0;font-size:16px}
.bmm blockquote{margin:0;font:300 19px/1.4 var(--display);color:var(--ink)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px}
.pair figure{margin:0;background:var(--leaf);border:1px solid var(--rule);display:flex;flex-direction:column}
.pair img{width:100%;flex:1;object-fit:cover;aspect-ratio:4/3}
.pair figcaption{margin-top:auto}
/* timeline (Snowcrest) */
.gantt{margin-top:32px;border:1px solid var(--rule);padding:20px 20px 16px;background:var(--paper)}
.gantt h3{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin-bottom:16px}
.g-months{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));font:500 11px var(--mono);color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:6px}
.g-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;margin-top:10px;min-height:38px}
.g-bar{height:38px;display:flex;align-items:center;padding:0 12px;font:600 14px var(--display);color:#FFFFFF;white-space:nowrap;overflow:hidden}
.g-bar.d{grid-column:1/4;background:var(--red)}
.g-bar.t{grid-column:4/8;background:var(--ink)}
.g-bar.l{grid-column:8/9;background:var(--paper);color:var(--ink);border:2px solid var(--ink);justify-content:center;padding:0 4px}
.g-bar .sh{display:none}
.pair img.contain{object-fit:contain;background:#FFFFFF}
.g-note{margin:12px 0 0;font-size:15px;color:var(--grey)}
.g-note b{color:var(--ink)}
/* moves (Maharaja Whiteline) */
.moves{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hair)}
.moves li{padding:18px 20px 0 0;display:grid;gap:8px;align-content:start}
.moves li+li{padding-left:20px;border-left:1px solid var(--rule)}
.moves .k{width:34px;height:34px;display:grid;place-items:center;background:var(--red);color:#FFFFFF;font:800 16px var(--display)}
.moves h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.moves p{margin:0;font-size:16px}

/* short stories */
.stories{padding-block:72px 88px;background:var(--leaf);border-block:1px solid var(--rule)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
.case{display:grid;gap:14px;align-content:start;scroll-margin-top:140px}
.case figure{margin:0;background:var(--paper);border:1px solid var(--rule);aspect-ratio:16/10;overflow:hidden;position:relative}
.case figure img{width:100%;height:100%;object-fit:cover}
.case figure.fit img{object-fit:contain;padding:14px}
.case figure .tag{position:absolute;left:0;top:0;font:500 11px/1 var(--mono);background:var(--black);color:#FFFFFF;padding:6px 8px;letter-spacing:.08em}
.case .who{color:var(--red-ink)}
.case h3{font-size:clamp(23px,2.2vw,30px);letter-spacing:-.025em;font-weight:800;line-height:1.1}
.case h3 span{font-weight:300;color:var(--grey)}
.case p{margin:0}
.case .q{font:300 18px/1.45 var(--display);color:var(--ink);border-left:4px solid var(--red);padding-left:14px}
.case.next{text-decoration:none;color:var(--text)}
.case.next .frame{position:relative;aspect-ratio:16/10;border:2px dashed var(--red);background:#FFF7F7;display:grid;place-content:center;text-align:center;gap:6px}
.case.next .frame .tag{position:absolute;left:0;top:0;font:500 11px/1 var(--mono);background:var(--red);color:#FFFFFF;padding:6px 8px;letter-spacing:.08em}
.case.next .frame b{font:900 clamp(30px,3.4vw,48px)/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.case.next .frame span:last-child{font:12.5px var(--mono);color:var(--muted)}
.case.next .go{justify-self:start;font:700 15px var(--display);color:var(--ink);border-bottom:2px solid var(--red)}
.case.next:hover .frame{background:#FFEDEE}
.shot img{max-height:640px;object-fit:contain}
[hidden]{display:none!important}
.empty{margin:24px 0 0;color:var(--muted)}

/* archive */
.archive{padding-block:88px}
.tbl{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);font-size:15.5px}
.tbl th{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--hair)}
.tbl td{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl td:first-child{font:800 16px var(--display);color:var(--ink);white-space:nowrap}
.tbl td:last-child{font:12.5px var(--mono);color:var(--grey);white-space:nowrap}
.tbl a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red)}
.tbl a:hover{color:var(--red-ink)}

/* process */
.process{padding-block:88px;background:var(--paper);border-top:1px solid var(--rule)}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;position:relative}
.stages li{padding:0 24px 0 0;position:relative}
.stages li+li{padding-left:24px;border-left:1px solid var(--rule)}
.stages .s{font:300 64px/1 var(--display);letter-spacing:-.05em;color:var(--ink);display:block;border-bottom:6px solid var(--ink);padding-bottom:12px;margin-bottom:16px}
.stages li:first-child .s{border-color:var(--red)}
.stages h3{font-size:19px;font-weight:800;margin-bottom:10px}
.stages ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.stages ul li{padding:0 0 0 14px!important;border:0!important;font-size:15px;color:var(--grey)}
.stages ul li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:2px;background:var(--red)}
.after{margin:32px 0 0;padding:18px 22px;border:1px dashed var(--hair);font-size:16px;max-width:none}
.after b{color:var(--ink)}

/* notes (faq) */
.notesec{padding-block:88px;background:var(--leaf);border-top:1px solid var(--rule)}
.notes{border-top:2px solid var(--ink)}
.notes article{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.4fr);gap:10px 32px;padding:22px 0;border-bottom:1px solid var(--rule)}
.notes .fn{font:500 12px var(--mono);color:var(--red-ink);padding-top:4px}
.notes h3{font-size:18.5px;font-weight:700;line-height:1.35}
.notes p{margin:0}

/* epilogue */
.epilogue{background:var(--paper);border-top:1px solid var(--rule)}
.epilogue .wrap{padding-block:96px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end}
.epilogue h2{font-size:clamp(40px,6vw,92px);letter-spacing:-.045em;line-height:.93}
.epilogue h2 b{font-weight:900;display:block} .epilogue h2 span{font-weight:300;color:var(--grey);display:block}
.epilogue h2 i{font-style:normal;color:var(--red)}
.blank{border:2px dashed var(--red);background:#FFF7F7;padding:28px;display:grid;gap:10px}
.blank .k{color:var(--red-ink)}
.blank p{margin:0}
.blank .lines{font:700 18px/1.5 var(--display);color:var(--ink)}
.btn{display:inline-block;justify-self:start;text-decoration:none;font:700 16px var(--display);padding:16px 26px;background:var(--ink);color:#FFFFFF;margin-top:6px}
.btn:hover{background:var(--red-ink);color:#FFFFFF}

footer{background:var(--black);color:#A8A8A8}
footer .wrap{padding-block:34px;display:flex;flex-wrap:wrap;gap:14px 36px;justify-content:space-between;align-items:center;font-size:14px}
footer .logo{color:#FFFFFF}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer nav a{color:#CFCFCF;text-decoration:none}

@media (max-width:1080px){
  .file{grid-template-columns:220px minmax(0,1fr);gap:32px}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .stages li:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:900px){
  .hero-grid,.sec-head,.epilogue .wrap{grid-template-columns:1fr}
  .sheet{max-width:620px}
  .file{grid-template-columns:1fr}
  .meta{position:static}
  .meta dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .num{font-size:88px}
  .bmm,.moves{grid-template-columns:1fr}
  .bmm div+div,.moves li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule);margin-top:16px}
  .grid{grid-template-columns:1fr}
  .tbl td:last-child{white-space:normal}
}
@media (max-width:640px){
  .top nav a:not(.cta){display:none}
  .filter{top:65px}
  .facts{grid-template-columns:1fr}
  .facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .facts div{padding-bottom:12px}
  .meta dl{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .g-bar{font-size:12px;padding:0 6px}
  .g-bar .lg{display:none} .g-bar .sh{display:inline}
  .g-bar.l{font-size:10.5px;padding:0}
  .g-months span:nth-child(even){visibility:hidden}
  .stages{grid-template-columns:1fr}
  .stages li+li{padding-left:0;border-left:0}
  .tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:1fr;padding:12px 0;border-bottom:1px solid var(--rule)}
  .tbl td{border:0;padding:2px 0;white-space:normal!important}
  .notes article{grid-template-columns:32px minmax(0,1fr)}
  .notes p{grid-column:2}
  .runhead span:last-child{display:none}
  .files,.stories,.archive,.process,.notesec{padding-block:64px}
}

/* ---- Brand studio hub. Concept: one story, six channels. The hero is a broadcast switcher:
   a monitor on air and six channel keys; each key previews its channel and jumps to it. ---- */
.hero h1{font-size:clamp(44px,6.4vw,104px)}
.hero h1 b.r{color:var(--red)}
.hero .sub{font:600 clamp(15px,1.25vw,17px)/1.5 var(--display);color:var(--grey);margin:18px 0 0;letter-spacing:.01em}
.hero .sub i{font-style:normal;color:var(--red);padding-inline:6px}
.console{background:var(--black);padding:14px;display:grid;gap:12px;box-shadow:0 34px 60px -34px rgba(0,0,0,.6)}
.monitor{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border:1px solid #2A2A2A}
.monitor video,.monitor .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.monitor .still{opacity:0;transition:opacity .25s ease;background:#111}
.monitor .slate{position:absolute;inset:0;display:grid;align-content:center;gap:8px;padding:8%;background:radial-gradient(circle at 70% 40%,#3A0B0D,#0B0B0B 70%);opacity:0;transition:opacity .25s ease;color:#FFFFFF}
.monitor .slate b{font:900 clamp(26px,3vw,42px)/1 var(--display);letter-spacing:-.03em}
.monitor .slate span{font:500 12px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#FF8A8F}
.monitor.on-still .still,.monitor.on-slate .slate{opacity:1}
.monitor .tally{position:absolute;left:12px;top:12px;z-index:2;display:flex;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF;background:rgba(0,0,0,.6);padding:5px 9px}
.monitor .tally::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.25);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.monitor .tc{position:absolute;right:12px;bottom:12px;z-index:2;font:500 11px var(--mono);color:#BDBDBD;background:rgba(0,0,0,.6);padding:4px 8px}
.keys{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.keys a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:baseline;padding:11px 12px;background:#1A1A1A;border:1px solid #2A2A2A;text-decoration:none;color:#FFFFFF;transition:background .2s,border-color .2s}
.keys a span{font:500 10.5px var(--mono);color:#8C8C8C;letter-spacing:.1em}
.keys a b{font:700 14.5px/1.25 var(--display)}
.keys a small{grid-column:2;font:400 12.5px/1.35 var(--body);color:#A9A9A9}
.keys a:hover,.keys a:focus-visible,.keys a.live{background:var(--red);border-color:var(--red)}
.keys a:hover span,.keys a:focus-visible span,.keys a.live span,.keys a:hover small,.keys a:focus-visible small,.keys a.live small{color:#FFFFFF}
.console figcaption{font:12px var(--mono);color:#8C8C8C;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.monitor .tally::before{animation:none}}
/* ticker */
.ticker{background:var(--ink);color:#FFFFFF;overflow:hidden;border-block:1px solid #000}
.ticker .row{display:flex;width:max-content;animation:tick 60s linear infinite}
.ticker:hover .row{animation-play-state:paused}
.ticker ul{list-style:none;margin:0;padding:16px 0;display:flex;gap:0}
.ticker li{font:800 clamp(18px,1.8vw,24px)/1 var(--display);letter-spacing:-.01em;padding-inline:22px;white-space:nowrap}
.ticker li::after{content:"/";color:var(--red);font-weight:300;margin-left:44px}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .row{animation:none;flex-wrap:wrap;width:auto}.ticker .row ul+ul{display:none}.ticker ul{flex-wrap:wrap;justify-content:center;padding-inline:24px;row-gap:10px}.ticker li::after{margin-left:22px}}
/* channel sections */
.ch{padding-block:96px;border-top:1px solid var(--rule);scroll-margin-top:70px}
.ch-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px 64px;align-items:start}
.ch.flip .ch-meta{order:2}
.ch-meta{position:sticky;top:100px;display:grid;gap:14px}
.ch-meta .num{margin-bottom:0;letter-spacing:-.01em}
.console,.net{margin:0}
.ch-meta .lbl{color:var(--red-ink)}
.ch-meta h2{font-size:clamp(34px,4.2vw,60px);letter-spacing:-.04em;line-height:.98}
.ch-meta h2 b{font-weight:900;display:block} .ch-meta h2 span{font-weight:300;color:var(--grey);display:block}
.ch-meta .answer{font:400 17.5px/1.6 var(--body);color:var(--text);margin:4px 0 0}
.makes{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.makes li{font:600 13.5px var(--display);color:var(--ink);border:1px solid var(--hair);padding:7px 11px;background:var(--paper)}
.proof{display:flex;align-items:baseline;gap:12px;border-top:2px solid var(--ink);padding-top:14px;margin-top:6px}
.proof b{font:300 clamp(36px,3.4vw,52px)/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.proof b i{font-style:normal;color:var(--red)}
.proof span{font-size:15px;color:var(--grey)}
.more{justify-self:start;font:700 15.5px var(--display);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:3px}
.more:hover{color:var(--red-ink)}
/* bento of real work */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.bento li{margin:0;grid-column:span 3;background:var(--leaf);border:1px solid var(--rule);display:grid;grid-template-rows:auto 1fr}
.bento li.full{grid-column:span 6} .bento li.third{grid-column:span 2}
.bento .ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:#FFFFFF}
.bento li.full .ph{aspect-ratio:2/1} .bento li.tall .ph{aspect-ratio:3/4}
.bento img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.bento img.contain{object-fit:contain}
.bento li:hover img{transform:scale(1.03)}
.bento .tag{position:absolute;left:0;top:0;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--black);color:#FFFFFF;padding:5px 7px}
.bento .tag.concept{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.bento p{margin:0;padding:10px 12px;font-size:14px;line-height:1.45;color:var(--grey);background:var(--paper);border-top:1px solid var(--rule)}
.bento p b{color:var(--ink);font-weight:600}
/* social grid */
.feedgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.feedgrid li{margin:0;aspect-ratio:1;overflow:hidden;background:var(--leaf);position:relative}
.feedgrid img{width:100%;height:100%;object-fit:cover}
.feedgrid span{position:absolute;left:0;bottom:0;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--ink);padding:4px 6px}
.under{margin:12px 0 0;font-size:14px;color:var(--muted)}
/* dark channel */
.ch.dark{background:var(--ink);color:#D6D6D6;border-top:0}
.ch.dark .ch-meta h2{color:#FFFFFF} .ch.dark .ch-meta h2 span{color:#A9A9A9} .ch.dark .ch-meta .answer{color:#D6D6D6}
.ch.dark .ch-meta .lbl{color:#FF6A70} .ch.dark .num{-webkit-text-stroke-color:#FFFFFF}
.ch.dark .makes li{background:transparent;color:#FFFFFF;border-color:#3A3A3A}
.ch.dark .proof{border-color:#FFFFFF} .ch.dark .proof b{color:#FFFFFF} .ch.dark .proof span{color:#BDBDBD}
.ch.dark .more{color:#FFFFFF} .ch.dark .more:hover{color:#FF8A8F}
.ch.dark .player{border-color:#2A2A2A}
.ch.dark .vcard h3{color:#FFFFFF} .ch.dark .vcard h3 span{color:#A9A9A9} .ch.dark .vcard .who{color:#FF8A8F}
.ch.leaf{background:var(--leaf)}
/* video players (shared with ugc.php) */
.vrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.vcard{margin:0;display:grid;gap:8px;align-content:start}
.vcard .who{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink)}
.vcard h3{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.vcard h3 span{font-weight:300;color:var(--grey)}
.player{position:relative;background:#0B0B0B;border:1px solid var(--rule);overflow:hidden;aspect-ratio:16/9}
.player.v916{aspect-ratio:9/16;border-radius:16px}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.player .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(transparent 55%,rgba(0,0,0,.45));border:0;cursor:pointer;padding:0;color:#FFFFFF}
.player .play i{width:58px;height:58px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);transition:transform .2s}
.player .play i::before{content:"";margin-left:5px;border-left:18px solid #FFFFFF;border-top:11px solid transparent;border-bottom:11px solid transparent}
.player .play:hover i{transform:scale(1.08)}
.player .dur{position:absolute;right:10px;bottom:10px;font:500 11px var(--mono);background:rgba(0,0,0,.7);color:#FFFFFF;padding:3px 7px;pointer-events:none}
.player .kind{position:absolute;left:10px;top:10px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:4px 7px;pointer-events:none}
.player.playing .play,.player.playing .dur,.player.playing .kind{display:none}
/* ugc phones */
.ugcset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ugcset .vcard.wide{grid-column:span 2}
.formats-mini{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;counter-reset:f}
.formats-mini li{counter-increment:f;display:flex;gap:10px;align-items:baseline;padding:10px 12px;border:1px solid var(--hair);background:var(--paper);font:700 14.5px var(--display);color:var(--ink)}
.formats-mini li::before{content:counter(f,decimal-leading-zero);font:500 11px var(--mono);color:var(--red-ink)}
/* influencer */
.net{background:var(--black);border:1px solid #222;aspect-ratio:16/10;position:relative;overflow:hidden}
.net svg{width:100%;height:100%;display:block}
.net figcaption{position:absolute;left:14px;bottom:12px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#BDBDBD}
.ch .steps{margin-top:20px;background:var(--paper)}
.ch .steps li{padding-inline:12px}
.measure{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.measure .mono{color:var(--muted);margin-right:6px}
.measure span:not(.mono){font:600 13.5px var(--display);color:var(--ink);border:1px solid var(--hair);padding:7px 12px;background:var(--paper)}
.steps{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);counter-reset:st}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);counter-increment:st}
.steps li::before{content:counter(st,decimal-leading-zero);font:500 12px var(--mono);color:var(--red-ink);padding-top:3px}
.steps b{display:block;font:700 16.5px var(--display);color:var(--ink)}
.steps span{font-size:15px;color:var(--grey)}
.honest{margin:16px 0 0;padding:14px 16px;border:1px dashed var(--hair);font-size:14.5px;color:var(--grey);background:var(--paper)}
.honest b{color:var(--ink)}
/* launch plan */
.launch{padding-block:96px;background:var(--paper);border-top:2px solid var(--ink)}
.plan-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);background:var(--leaf)}
.plan{min-width:760px;display:grid;grid-template-columns:200px repeat(24,minmax(0,1fr));font:500 11px var(--mono);color:var(--muted)}
.plan .hd{padding:10px 0;border-bottom:1px solid var(--hair);text-align:center;letter-spacing:.06em}
.plan .hd.zero{color:var(--red-ink);font-weight:600}
.plan .lab{grid-column:1;padding:12px 14px;font:700 14px var(--display);color:var(--ink);border-bottom:1px solid var(--rule);background:var(--paper)}
.plan .lab a{color:var(--ink);text-decoration:none} .plan .lab a:hover{color:var(--red-ink)}
.plan .bar{align-self:center;height:22px;background:var(--ink);margin:0 2px;position:relative;display:flex;align-items:center;padding-left:8px;color:#FFFFFF;font:500 10.5px var(--mono);letter-spacing:.04em;white-space:nowrap;overflow:hidden}
.plan .bar.r{background:var(--red)} .plan .bar.g{background:#8C8C8C}
.plan .line{grid-column:14/15;grid-row:1/-1;border-left:2px dashed var(--red);pointer-events:none;justify-self:start}
.plan .cell{border-bottom:1px solid var(--rule)}
.plan-note{margin:14px 0 0;font-size:14.5px;color:var(--muted)}
/* why one studio */
.why{padding-block:88px;background:var(--black);color:#D6D6D6}
.why .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:center}
.why h2{color:#FFFFFF;font-size:clamp(34px,4.4vw,64px);letter-spacing:-.04em;line-height:.98}
.why h2 b{font-weight:900;display:block} .why h2 span{font-weight:300;color:#A9A9A9;display:block}
.why h2 i{font-style:normal;color:var(--red)}
.why .answer{font:400 clamp(18px,1.6vw,21px)/1.55 var(--display);color:#FFFFFF;margin:0}
.why ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.why li{padding-left:18px;position:relative;font-size:16px}
.why li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:2px;background:var(--red)}
.why .lbl{color:#FF6A70;margin-bottom:14px}
@media (max-width:1080px){
  .keys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-grid{gap:40px}
  .formats-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ch-grid,.why .wrap{grid-template-columns:1fr}
  .ch.flip .ch-meta{order:0}
  .ch-meta{position:static}
  .ch{padding-block:72px}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(34px,10.4vw,48px)}
  .keys{grid-template-columns:1fr 1fr;gap:5px}
  .keys a{padding:9px 10px} .keys a small{display:none} .keys a b{font-size:13.5px}
  .bento li,.bento li.third{grid-column:span 6}
  .bento li.full .ph{aspect-ratio:4/3}
  .vrow{grid-template-columns:1fr}
  .feedgrid{gap:5px}
  .ugcset{gap:10px}
  .formats-mini li{font-size:13.5px;padding:9px 10px}
  .plan{grid-template-columns:128px repeat(24,minmax(0,1fr));min-width:680px}
  .ticker li{padding-inline:14px} .ticker li::after{margin-left:28px}
}



/* ===== Site chrome (shared header + footer). Scoped classes: .sdh, .sdf ===== */
:root{--sdh-h:108px}
.sdh{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid #E2E2E0;font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif}
.sdh *{box-sizing:border-box}
.sdh-in{max-width:1280px;margin:0 auto;padding:0 24px}
.sdh-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.sdh-logo{display:flex;align-items:stretch;gap:10px;text-decoration:none;color:#4B4B4B}
.sdh-logo i{width:20px;background:#ED1C24;position:relative;display:block}
.sdh-logo i::after{content:"";position:absolute;right:0;bottom:6px;width:8px;height:1.5px;background:#FFFFFF}
.sdh-logo span{display:flex;flex-direction:column;font-family:Montserrat,Arial,sans-serif;line-height:1;font-size:18px}
.sdh-logo b{font-weight:700;color:#4B4B4B} .sdh-logo em{font-style:normal;font-weight:300;color:#4B4B4B} .sdh-logo small{font-weight:700;font-size:9px;color:#ED1C24;margin-top:3px}
.sdh-nav{display:flex;align-items:center;gap:4px 22px;font:500 15px/1 "IBM Plex Sans",Arial,sans-serif}
.sdh-nav a{color:#4B4B4B;text-decoration:none;padding:8px 0}
.sdh-nav a:hover,.sdh-nav a[aria-current]{color:#121212}
.sdh-nav a[aria-current]{box-shadow:inset 0 -2px 0 #ED1C24}
.sdh-nav a.sdh-cta{background:#121212;color:#FFFFFF;padding:11px 16px;font-weight:600}
.sdh-nav a.sdh-cta:hover{background:#C8141B;color:#FFFFFF}
.sdh-svc{border-top:1px solid #EFEFED;height:44px;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.sdh-svc::-webkit-scrollbar{display:none}
.sdh-svc span{font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#6E6E6E;margin-right:10px;white-space:nowrap}
.sdh-svc a{white-space:nowrap;font:600 13.5px Montserrat,Arial,sans-serif;color:#121212;text-decoration:none;padding:6px 10px;border:1px solid transparent}
.sdh-svc a i{font:500 10px "IBM Plex Mono",monospace;font-style:normal;color:#C8141B;margin-right:5px}
.sdh-svc a:hover{border-color:#121212}
.sdh-svc a[aria-current]{background:#121212;color:#FFFFFF} .sdh-svc a[aria-current] i{color:#FF8A8F}
.sdh-svc a.all{margin-left:auto;font-weight:700;color:#C8141B}
.sdh-menu{display:none}
.sdh-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font:600 14px Montserrat,Arial,sans-serif;color:#121212;padding:10px 12px;border:1px solid #121212}
.sdh-menu summary::-webkit-details-marker{display:none}
.sdh-menu summary b{display:block;width:16px;height:2px;background:#121212;box-shadow:0 5px 0 #121212,0 -5px 0 #121212}
.sdh-panel{position:absolute;left:0;right:0;top:64px;background:#FFFFFF;border-bottom:2px solid #121212;padding:16px 24px 24px;max-height:calc(100vh - 64px);overflow:auto;box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.sdh-panel h3{font:500 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#C8141B;margin:14px 0 6px}
.sdh-panel a{display:block;padding:10px 0;border-bottom:1px solid #EFEFED;font:600 16px Montserrat,Arial,sans-serif;color:#121212;text-decoration:none}
.sdh-panel a.sdh-cta{margin-top:16px;background:#121212;color:#FFFFFF;text-align:center;border:0}
.jump,.filter{top:var(--sdh-h)!important}
@media (max-width:1080px){
  :root{--sdh-h:104px}
  .sdh-nav{display:none}
  .sdh-menu{display:block}
  .sdh-svc{height:40px;margin:0 -24px;padding:0 20px}
  .sdh-svc span{display:none}
  .sdh-svc a{font-size:13px;padding:5px 8px}
}
/* footer */
.sdf{background:#0B0B0B;color:#BDBDBD;font:15px/1.6 "IBM Plex Sans","Helvetica Neue",Arial,sans-serif;padding:0;margin:0}
.sdf *{box-sizing:border-box}
.sdf a{color:#FFFFFF;text-decoration:none} .sdf a:hover{color:#FF8A8F}
.sdf-in{max-width:1280px;margin:0 auto;padding:0 24px}
.sdf-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px 64px;padding:72px 0 56px;border-bottom:1px solid #222}
.sdf h2{font:900 clamp(30px,3.4vw,48px)/1 Montserrat,Arial,sans-serif;letter-spacing:-.035em;color:#FFFFFF;margin:0 0 8px}
.sdf h2 span{font-weight:300;color:#A9A9A9;display:block}
.sdf .lead{margin:12px 0 24px;color:#A9A9A9;max-width:56ch}
.sdf form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sdf label{display:grid;gap:6px;font:500 11px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#8C8C8C}
.sdf label.full{grid-column:1/-1}
.sdf input,.sdf select,.sdf textarea{width:100%;font:400 15.5px "IBM Plex Sans",Arial,sans-serif;color:#FFFFFF;background:#151515;border:1px solid #333;padding:12px 12px;border-radius:0;letter-spacing:0;text-transform:none}
.sdf textarea{min-height:96px;resize:vertical}
.sdf input:focus,.sdf select:focus,.sdf textarea:focus{outline:2px solid #ED1C24;outline-offset:0;border-color:#ED1C24}
.sdf .hp{position:absolute;left:-9999px}
.sdf .send{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sdf .send p{margin:0;font-size:13px;color:#8C8C8C;max-width:48ch}
.sdf button{font:700 16px Montserrat,Arial,sans-serif;background:#ED1C24;color:#FFFFFF;border:0;padding:15px 26px;cursor:pointer}
.sdf button:hover{background:#FFFFFF;color:#121212}
.sdf-offices{display:grid;gap:0;border-top:2px solid #FFFFFF}
.sdf-office{padding:16px 0;border-bottom:1px solid #222;display:grid;gap:2px}
.sdf-office b{font:500 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#FF8A8F}
.sdf-office address{font-style:normal;color:#A9A9A9;font-size:14px}
.sdf-office a{font:700 18px Montserrat,Arial,sans-serif}
.sdf-mail{padding:16px 0;border-bottom:1px solid #222}
.sdf-mail a{font:700 18px Montserrat,Arial,sans-serif}
.sdf-social{display:flex;gap:8px;margin-top:20px}
.sdf-social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid #333;color:#FFFFFF}
.sdf-social a:hover{background:#ED1C24;border-color:#ED1C24;color:#FFFFFF}
.sdf-social svg{width:20px;height:20px;fill:currentColor}
.sdf-cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;padding:48px 0}
.sdf-cols h3{font:500 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#8C8C8C;margin:0 0 12px}
.sdf-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sdf-cols li a{font:600 15px Montserrat,Arial,sans-serif;color:#E6E6E6}
.sdf-brand p{margin:14px 0 0;font-size:14px;color:#8C8C8C;max-width:34ch}
.sdf-brand .sdh-logo b,.sdf-brand .sdh-logo em{color:#FFFFFF}
.sdf-base{border-top:1px solid #222;padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:500 12px "IBM Plex Mono",monospace;letter-spacing:.06em;color:#8C8C8C}
@media (max-width:900px){.sdf-top{grid-template-columns:1fr}.sdf-cols{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sdf form{grid-template-columns:1fr}.sdf-cols{grid-template-columns:1fr}.sdf-top{padding:56px 0 40px}}