/* 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}
}

/* ---- Social & UGC page: concept is the feed. A phone scrolls real posts; UGC formats are storyboards in 9:16. ---- */
.hero-grid.feedhero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center}
.hero h1{font-size:clamp(40px,5.8vw,90px)}
.hero h1 b.amp{font-weight:300;color:var(--red);display:inline}
.stage{position:relative;display:grid;justify-items:center;padding:10px 0}
.stage::before{content:"";position:absolute;inset:8% 4% 8% 18%;background:var(--leaf);border:1px solid var(--rule)}
.stage::after{content:"";position:absolute;left:8%;top:18%;width:16px;height:150px;background:var(--red)}
.phone{position:relative;z-index:1;width:min(300px,78vw);aspect-ratio:9/18.5;border:11px solid #121212;border-radius:40px;background:#FFFFFF;overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:42%;height:20px;background:#121212;border-radius:0 0 14px 14px;z-index:3}
.phone .bar{position:absolute;inset:0 0 auto 0;height:44px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--rule);z-index:2;display:flex;align-items:flex-end;justify-content:space-between;padding:0 14px 7px;font:700 14px var(--display);color:var(--ink)}
.phone .bar span{font:500 10px var(--mono);color:var(--red-ink);letter-spacing:.08em}
.feed{padding-top:44px;animation:feed 46s linear infinite}
.phone:hover .feed{animation-play-state:paused}
@keyframes feed{to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.feed{animation:none}.phone{overflow-y:auto}}
.post{border-bottom:6px solid #F1F1EF}
.post .ph{display:flex;align-items:center;gap:7px;padding:7px 10px;font:600 11px var(--body);color:var(--ink)}
.post .ph i{width:20px;height:20px;border-radius:50%;background:conic-gradient(var(--red),#FFB000,var(--red));padding:2px;display:block}
.post img{width:100%;height:auto;display:block}
.post .pa{display:flex;gap:10px;padding:7px 10px}
.post .pa span{width:15px;height:15px;border:1.8px solid var(--ink);border-radius:50%}
.post .pa span:first-child{border-radius:50% 50% 50% 0;transform:rotate(-45deg);border-color:var(--red);background:var(--red)}
.sticker{position:absolute;z-index:2;font:500 11px/1.3 var(--mono);background:var(--paper);border:1px solid var(--ink);padding:7px 9px;letter-spacing:.04em;color:var(--ink);box-shadow:4px 4px 0 var(--red)}
.sticker.s1{right:0;top:16%} .sticker.s2{left:2%;bottom:20%}
/* case post grids */
.posts{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.posts li{margin:0;background:var(--leaf);border:1px solid var(--rule)}
.posts img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.posts.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.posts.wide img{aspect-ratio:3/2}
.posts.three img{aspect-ratio:3/2}
.posts span{display:block;font:500 11px/1.4 var(--mono);color:var(--muted);padding:7px 9px;background:var(--paper);border-top:1px solid var(--rule)}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;aspect-ratio:16/10;background:var(--paper)}
.tri img{width:100%;height:100%;object-fit:cover}
.case figure.trio{aspect-ratio:auto;background:var(--paper)}
/* UGC formats */
.ugc{padding-block:88px;background:var(--ink);color:#D6D6D6}
.ugc .sec-head h2{color:#FFFFFF} .ugc .sec-head h2 span{color:#A9A9A9} .ugc .sec-head p{color:#BDBDBD}
.ugc .sec-head .lbl{color:#FF6A70}
.formats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.fmt{display:grid;gap:10px;align-content:start}
.fmt .frame{aspect-ratio:9/16;background:#1E1E1E;border:1px solid #333;border-radius:14px;overflow:hidden;position:relative}
.fmt .frame svg{width:100%;height:100%;display:block}
.fmt .frame .n{position:absolute;left:8px;top:8px;font:500 10.5px var(--mono);color:#FFFFFF;background:var(--red);padding:3px 6px;border-radius:3px}
.fmt h3{color:#FFFFFF;font-size:17px;font-weight:800}
.fmt p{margin:0;font-size:14px;line-height:1.5;color:#BDBDBD}
.fmt .where{font:500 10.5px/1.5 var(--mono);letter-spacing:.06em;color:#FF8A8F;text-transform:uppercase}
.ugc .note{margin:32px 0 0;font-size:15px;color:#A9A9A9;max-width:80ch}
.ugc .note b{color:#FFFFFF}
/* two processes */
.procs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.procs h3{font-size:22px;font-weight:800;margin-bottom:16px}
.procs h3 span{font-weight:300;color:var(--grey)}
.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)}
.measure{margin-top:36px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.measure .mono{color:var(--muted);margin-right:6px}
.measure span.mono{border:0;background:none;padding:0;font:500 11.5px var(--mono)}
.measure span{font:600 13.5px var(--display);color:var(--ink);border:1px solid var(--hair);padding:7px 12px;background:var(--paper)}
/* video */
.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.phone .bar{background:rgba(18,18,18,.55);color:#FFFFFF;border-bottom:0;backdrop-filter:blur(6px)}
.phone .bar span{color:#FF8A8F}
.reels{padding-block:72px 88px}
.vgrid{display:grid;gap:28px 24px;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.vcard{margin:0;display:grid;gap:10px;align-content:start;scroll-margin-top:110px}
.vcard.w169{grid-column:span 6} .vcard.w916{grid-column:span 3} .vcard.wide{grid-column:span 12} .vcard.half{grid-column:span 6}
.player{position:relative;background:#0B0B0B;border:1px solid var(--rule);overflow:hidden}
.w169 .player,.wide .player,.half .player{aspect-ratio:16/9} .w916 .player{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:66px;height:66px;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:20px solid #FFFFFF;border-top:12px solid transparent;border-bottom:12px 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}
.vcard .who{color:var(--red-ink)}
.vcard h3{font-size:clamp(19px,1.6vw,23px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.vcard h3 span{font-weight:300;color:var(--grey)}
.vcard p{margin:0;font-size:15.5px}
.vcard .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.vcard .tags span{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--hair);padding:4px 6px;color:var(--grey)}
.vsec+.vsec{margin-top:88px;padding-top:56px;border-top:2px solid var(--ink)}
.vsec.dark{background:var(--ink);color:#D6D6D6;margin-inline:calc(50% - 50vw);padding:72px calc(50vw - 50%);border-top:0}
.vsec.dark .sec-head h2{color:#FFFFFF} .vsec.dark .sec-head h2 span{color:#A9A9A9} .vsec.dark .sec-head p{color:#BDBDBD} .vsec.dark .sec-head .lbl{color:#FF6A70}
.vsec.dark .vcard h3{color:#FFFFFF} .vsec.dark .vcard h3 span{color:#A9A9A9} .vsec.dark .vcard p{color:#C9C9C9} .vsec.dark .vcard .who{color:#FF8A8F}
.vsec.dark .vcard .tags span{border-color:#3A3A3A;color:#BDBDBD} .vsec.dark .player{border-color:#2A2A2A}
.feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start;margin-bottom:40px}
.feature .stack{display:grid;gap:24px}
.feature .story{display:grid;gap:12px;align-content:start}
.feature .story h3{font-size:clamp(26px,2.6vw,38px);font-weight:900;letter-spacing:-.03em;line-height:1.02}
.feature .story h3 span{font-weight:300;color:#A9A9A9;display:block}
.vsec.dark .feature .story h3{color:#FFFFFF}
.feature .story .answer{font:400 17px/1.55 var(--display);color:#FFFFFF;margin:0}
.feature .story ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.feature .story li{padding-left:16px;position:relative;font-size:15px;color:#C9C9C9}
.feature .story li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--red)}
.ai-note{margin:28px 0 0;padding:16px 18px;border:1px dashed var(--hair);font-size:15px;max-width:none}
.ai-note b{color:var(--ink)}
@media (max-width:1080px){.vcard.w916{grid-column:span 4}.feature{grid-template-columns:1fr}}
@media (max-width:900px){.vcard.w169,.vcard.half{grid-column:span 12}.vcard.w916{grid-column:span 6}}
@media (max-width:640px){.vcard.w916{grid-column:span 12;max-width:360px}}
@media (max-width:1080px){.formats{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}}
@media (max-width:900px){
  .hero-grid.feedhero,.procs{grid-template-columns:1fr}
  .stage{margin-top:12px}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(30px,9.4vw,44px)}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posts.wide,.posts.three{grid-template-columns:1fr}
  .formats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sticker{display:none}
  .ugc{padding-block:64px}
}

/* ---- Service pages: shared layer. One system for six pages; each page swaps the hero visual. ---- */
.hero h1{font-size:clamp(42px,6vw,96px)}
.hero h1 b.r{color:var(--red)}
.meta .num{letter-spacing:-.01em}
.hero-grid.svc{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.top nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--red)}
/* jump bar: the case studies on this page */
.jump{position:sticky;top:69px;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-block:1px solid var(--rule)}
.jump .wrap{display:flex;gap:6px;align-items:center;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.jump .wrap::-webkit-scrollbar{display:none}
.jump .mono{color:var(--muted);margin-right:8px;white-space:nowrap}
.jump a{white-space:nowrap;font:600 13.5px var(--display);color:var(--ink);text-decoration:none;border:1px solid var(--hair);padding:7px 11px;background:var(--paper)}
.jump a i{font:500 10.5px var(--mono);font-style:normal;color:var(--red-ink);margin-right:6px}
.jump a:hover,.jump a.on{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.jump a:hover i,.jump a.on i{color:#FF8A8F}
/* case media */
.file .body .more{display:inline-block;margin-top:24px;font:700 15px var(--display);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:3px}
.file .body .more:hover{color:var(--red-ink)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.trio figure{margin:0;background:var(--leaf);border:1px solid var(--rule);display:flex;flex-direction:column}
.trio img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.trio figcaption{font:12px/1.5 var(--mono);color:var(--muted);padding:10px 12px;border-top:1px solid var(--rule);background:var(--paper);margin-top:auto}
.shot.contain img{max-height:620px;object-fit:contain;background:var(--leaf)}
.shot.tall img{max-height:720px;object-fit:contain;background:var(--leaf)}
.vfeat{margin:32px 0 0}
.vfeat .player{aspect-ratio:16/9}
.vfeat.v916{max-width:380px}
.vfeat.v916 .player{aspect-ratio:9/16;border-radius:18px}
.vfeat figcaption{font:12px/1.5 var(--mono);color:var(--muted);padding-top:10px}
.vpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.vpair figure{margin:0}
.vpair .player{aspect-ratio:16/9}
.vpair figcaption{font:12px/1.5 var(--mono);color:var(--muted);padding-top:8px}
.svgfig{margin:16px 0 0;background:var(--leaf);border:1px solid var(--rule)}
.svgfig svg{display:block;width:100%;height:auto}
.svgfig figcaption{font:12px/1.5 var(--mono);color:var(--muted);padding:10px 14px;border-top:1px solid var(--rule);background:var(--paper)}
.svgfig figcaption b{color:var(--ink);font-weight:500}
.file .note{margin:20px 0 0;padding:14px 16px;border:1px dashed var(--hair);font-size:15px;color:var(--grey)}
.file .note b{color:var(--ink)}
/* what we make: defined terms */
.make{padding-block:88px;background:var(--leaf);border-top:1px solid var(--rule)}
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border-top:2px solid var(--ink)}
.terms div{padding:20px 24px 22px 0;border-bottom:1px solid var(--rule)}
.terms div:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--rule)}
.terms dt{font:800 18px/1.25 var(--display);color:var(--ink);margin-bottom:6px}
.terms dt a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)} .terms dt a:hover{border-color:var(--red)}
.terms dd{margin:0;font-size:15.5px;color:var(--grey)}
/* process */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:f;border-top:2px solid var(--ink)}
.flow li{counter-increment:f;padding:18px 20px 0 0}
.flow li+li{padding-left:20px;border-left:1px solid var(--rule)}
.flow li::before{content:counter(f,decimal-leading-zero);display:block;font:300 48px/1 var(--display);letter-spacing:-.04em;color:var(--ink);margin-bottom:12px}
.flow li:first-child::before{color:var(--red)}
.flow b{display:block;font:800 17px/1.25 var(--display);color:var(--ink);margin-bottom:6px}
.flow span{font-size:15px;color:var(--grey)}
/* related services */
.related{padding-block:72px;background:var(--black);color:#BDBDBD}
.related .sec-head h2{color:#FFFFFF} .related .sec-head h2 span{color:#A9A9A9} .related .sec-head p{color:#A9A9A9} .related .sec-head .lbl{color:#FF6A70}
.related .sec-head p a{color:#FFFFFF}
.svcs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.svcs a{display:grid;gap:6px;height:100%;padding:18px 16px;border:1px solid #2A2A2A;background:#141414;text-decoration:none;color:#FFFFFF;transition:background .2s,border-color .2s}
.svcs a span{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8C8C8C}
.svcs a b{font:800 18px/1.2 var(--display)}
.svcs a small{font-size:13.5px;color:#A9A9A9}
.svcs a:hover{background:var(--red);border-color:var(--red)} .svcs a:hover span,.svcs a:hover small{color:#FFFFFF}
/* honest example box */
.example{border:2px dashed var(--ink);background:var(--paper);padding:28px;position:relative;margin-top:36px}
.example .flag{position:absolute;top:-12px;left:20px;background:var(--ink);color:#FFFFFF;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px}
.example h3{font-size:clamp(22px,2.2vw,30px);font-weight:900;letter-spacing:-.02em;margin:6px 0 6px}
.example h3 span{font-weight:300;color:var(--grey)}
.example > p{margin:0 0 18px;color:var(--grey);max-width:72ch}
.exgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hair)}
.exgrid div{padding:16px 20px 16px 0;border-bottom:1px solid var(--rule)}
.exgrid div:not(:nth-child(3n+1)){padding-left:20px;border-left:1px solid var(--rule)}
.exgrid h4{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin:0 0 6px}
.exgrid p{margin:0;font-size:15px}
.tiers{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tiers li{border:1px solid var(--hair);padding:14px;background:var(--leaf)}
.tiers b{display:block;font:300 34px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.tiers span{font:600 14px var(--display);color:var(--ink)} .tiers small{display:block;font-size:13.5px;color:var(--grey);margin-top:4px}
/* generic band + checklist */
.band{padding-block:88px;border-top:1px solid var(--rule)}
.band.leaf{background:var(--leaf)}
.band.dark{background:var(--ink);color:#D6D6D6;border-top:0}
.band.dark .sec-head h2{color:#FFFFFF} .band.dark .sec-head h2 span{color:#A9A9A9} .band.dark .sec-head p{color:#BDBDBD} .band.dark .sec-head .lbl{color:#FF6A70}
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:2px solid var(--ink)}
.checks li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:14px 0;border-bottom:1px solid var(--rule)}
.checks li::before{content:"";width:16px;height:16px;border:2px solid var(--ink);margin-top:4px;box-shadow:inset 0 0 0 3px var(--paper);background:var(--red)}
.checks b{display:block;font:700 16.5px var(--display);color:var(--ink)}
.checks span{font-size:15px;color:var(--grey)}
.weeks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:6px solid var(--ink)}
.weeks li{padding:16px 16px 0 0;position:relative}
.weeks li+li{padding-left:16px;border-left:1px solid var(--rule)}
.weeks li:last-child{border-top:6px solid var(--red);margin-top:-6px}
.weeks em{display:block;font:500 11.5px var(--mono);letter-spacing:.12em;color:var(--red-ink);font-style:normal;text-transform:uppercase;margin-bottom:6px}
.weeks b{display:block;font:800 16.5px/1.25 var(--display);color:var(--ink);margin-bottom:4px}
.weeks span{font-size:14.5px;color:var(--grey)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;align-items:center}
.chips .mono{color:var(--muted);margin-right:6px}
.chips span:not(.mono){font:600 13.5px var(--display);color:var(--ink);border:1px solid var(--hair);padding:7px 12px;background:var(--paper)}
.band.dark .chips span:not(.mono){background:transparent;color:#FFFFFF;border-color:#3A3A3A}
.types{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.types li{border:1px solid var(--rule);background:var(--paper);padding:20px}
.band.dark .types li{background:#181818;border-color:#2A2A2A}
.types b{display:block;font:800 18px/1.25 var(--display);color:var(--ink);margin-bottom:6px}
.band.dark .types b{color:#FFFFFF}
.types span{font-size:15px;color:var(--grey)} .band.dark .types span{color:#BDBDBD}
.types i{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--red-ink);margin-bottom:10px}
.band.dark .types i{color:#FF8A8F}
/* hero visuals */
.kit{list-style:none;margin:0;padding:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:var(--black)}
.kit li{margin:0}
.kit a{position:relative;display:block;aspect-ratio:1;background:#FFFFFF;overflow:hidden;text-decoration:none}
.kit li.w2{grid-column:span 2} .kit li.w2 a{aspect-ratio:2/1}
.kit img,.kit svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.kit a:hover img{transform:scale(1.06)}
.kit a span{position:absolute;left:0;bottom:0;right:0;font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(11,11,11,.86);color:#FFFFFF;padding:6px 7px}
.kit a span i{font-style:normal;color:#FF8A8F;margin-right:5px}
.kit a:hover span,.kit a:focus-visible span{background:var(--red)} .kit a:hover span i{color:#FFFFFF}
.kitcap{font:12px var(--mono);color:var(--muted);margin-top:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.reel{background:var(--black);padding:14px;display:grid;gap:10px;box-shadow:0 34px 60px -34px rgba(0,0,0,.6);margin:0}
.reel .screen{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border:1px solid #2A2A2A}
.reel .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .tally{position:absolute;left:12px;top:12px;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}
.reel .tally::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.chapters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.chapters a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;background:#1A1A1A;border:1px solid #2A2A2A;color:#FFFFFF;text-decoration:none;font:600 13px var(--display)}
.chapters a span{font:500 11px var(--mono);color:#8C8C8C}
.chapters a:hover{background:var(--red);border-color:var(--red)} .chapters a:hover span{color:#FFFFFF}
.reel figcaption{font:12px var(--mono);color:#8C8C8C;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.netbox{position:relative;margin:0;background:var(--black);border:1px solid #222}
.netbox svg{display:block;width:100%;height:auto}
.netbox figcaption{font:12px var(--mono);color:#8C8C8C;padding:10px 14px;border-top:1px solid #222}
.netbox .label{position:absolute;font:600 13px var(--display);background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:6px 10px;box-shadow:4px 4px 0 var(--red)}
.netbox .label.l1{right:4%;top:6%} .netbox .label.l2{left:4%;top:44%}
.netbox .label i{font:500 11px var(--mono);font-style:normal;color:var(--red-ink);margin-right:6px}
.stallfig{margin:0;background:var(--paper);border:1px solid var(--rule)}
.stallfig svg{display:block;width:100%;height:auto}
.stallfig figcaption{font:12px/1.5 var(--mono);color:var(--muted);padding:10px 14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.legend{list-style:none;margin:0;padding:12px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--grey)}
.legend b{font:500 11px var(--mono);color:#FFFFFF;background:var(--red);padding:1px 5px;margin-right:6px}
@media (max-width:1080px){
  .terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .terms div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .terms div:nth-child(2n){padding-left:24px;border-left:1px solid var(--rule)}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .flow li:nth-child(4){padding-left:0;border-left:0}
  .svcs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .weeks{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
  .weeks li:nth-child(4){padding-left:0;border-left:0}
}
@media (max-width:900px){
  .hero-grid.svc{grid-template-columns:1fr}
  .types,.exgrid,.tiers{grid-template-columns:1fr}
  .exgrid div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .checks{grid-template-columns:1fr}
}
@media (max-width:640px){
  .jump{top:65px}
  .terms{grid-template-columns:1fr}
  .terms div:nth-child(2n){padding-left:0;border-left:0}
  .flow{grid-template-columns:1fr}
  .flow li+li{padding-left:0;border-left:0}
  .svcs{grid-template-columns:1fr 1fr}
  .weeks{grid-template-columns:1fr}
  .weeks li+li{padding-left:0;border-left:0}
  .trio,.vpair{grid-template-columns:1fr}
  .kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chapters{grid-template-columns:1fr}
  .legend{grid-template-columns:1fr}
  .make,.band,.related{padding-block:64px}
}
.reel .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.phone .bar{display:none}.phone{background:#FFFFFF}.post img{height:auto}



/* ===== 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}}