/* svnth dimension - homepage */

section{padding:90px 6vw;position:relative}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.sec-head .pill{margin:0}
h2.big{font-size:56px;font-weight:500;letter-spacing:-2.2px;line-height:1.02;margin-top:18px}
.secsub{color:var(--g55);font-size:16px;line-height:1.55;margin-top:12px;max-width:720px}
.hint{font-family:'Space Mono',monospace;font-size:11px;color:var(--g45);margin-top:12px;letter-spacing:.06em}

/* ---------- 1. hero ---------- */
.hero{position:relative;height:840px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:110px 20px 70px;overflow:hidden;text-align:center}
/* nothing in the hero is underlined - no links, no border-bottom tricks */
.hero,.hero *{text-decoration:none;border-bottom:0}
.hero h1,.hero .hero-flavour,.hero .onedesk,.hero .note,.hero .btn,.hero .btn:hover{text-decoration:none}
.hero .big{font-size:54px;font-weight:700;letter-spacing:-.04em;color:#111;z-index:5;max-width:850px;line-height:1.05}
.hero .hero-flavour{font-family:'Space Mono',monospace;font-size:15px;color:var(--ink);margin-top:26px;z-index:5;letter-spacing:-.01em}
.hero .onedesk{font-family:'Space Mono',monospace;font-size:12px;color:var(--g45);margin-top:16px;z-index:5;max-width:720px;line-height:1.6}
.hero .btns{display:flex;gap:12px;margin-top:30px;z-index:5;flex-wrap:wrap;justify-content:center}
.hero .note{margin-top:12px;font-size:12px;color:var(--g30);z-index:5}
.scatter{position:absolute;z-index:2}
.scatter.win{box-shadow:0 18px 50px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)}
.kaomoji{position:absolute;font-size:22px;color:var(--ink);z-index:3;font-weight:500}
.tag{position:absolute;z-index:3;background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.12);padding:6px 10px;font-size:11px;font-weight:600;transform:rotate(-6deg)}
.tag .hello{background:#e5322d;color:#fff;font-size:8px;letter-spacing:.08em;padding:2px 6px;border-radius:3px;margin:-6px -10px 4px;display:block;text-align:center}
.trash{position:absolute;z-index:2;font-size:34px;filter:grayscale(.2)}
.beachball{display:none}
/* mobile float (<= 768px): the four desk windows scatter again, composed fully inside the viewport */
@media(max-width:768px){
  .hero{height:auto;min-height:1040px;padding:150px 0 60px;justify-content:center}
  .hero .big{font-size:36px;line-height:1.06;max-width:355px;width:calc(100% - 32px);letter-spacing:-.035em;text-wrap:balance}
  .hero .hero-flavour{font-size:13px;margin-top:22px;padding:0 24px}
  .hero .onedesk{font-size:11px;padding:0 26px;max-width:372px;line-height:1.6}
  .hero .note{font-size:12px;position:relative;z-index:6}
  .hero-desk{display:contents}
  .scatter{position:absolute;z-index:2}
  .scatter.win .tb .t{font-size:10px}
  .scatter:nth-child(1){left:8px!important;top:86px!important;right:auto!important;bottom:auto!important;width:172px!important;transform:rotate(-3deg)!important}
  .scatter:nth-child(2){right:8px!important;top:64px!important;left:auto!important;bottom:auto!important;width:158px!important;transform:rotate(2.5deg)!important}
  .scatter:nth-child(3){left:10px!important;bottom:44px!important;right:auto!important;top:auto!important;width:160px!important;transform:rotate(2deg)!important}
  .scatter:nth-child(4){right:10px!important;bottom:30px!important;left:auto!important;top:auto!important;width:176px!important;transform:rotate(-2deg)!important}
  .tag,.trash{display:none}
  .kaomoji{display:none;font-size:20px}
  .kaomoji:nth-of-type(1){display:block;right:34px!important;top:344px!important;left:auto!important;bottom:auto!important}   /* { ^-^ } keeps its phone spot; the others stay hidden */
  .beachball{display:block;position:absolute;right:44px;top:280px;width:26px;height:26px;border-radius:50%;z-index:3;
    background:conic-gradient(#ff5f57,#febc2e,#28c840,#0f7fff,#a96bff,#ff5f57);box-shadow:inset -3px -4px 6px rgba(0,0,0,.25)}
}
@media(max-width:360px){
  .scatter:nth-child(1){width:156px!important}.scatter:nth-child(2){width:144px!important}
  .scatter:nth-child(3){width:146px!important}.scatter:nth-child(4){width:160px!important}
}
/* narrowest phones (320): the statement keeps its size class, the upper kaomoji steps aside, the cta pair keeps a side margin */
@media(max-width:340px){
  .hero .big{font-size:32px}
  .kaomoji:nth-of-type(1){display:none}
  .hero .btn{padding:12px 20px}
}

/* ---------- 2. clients strip (sliding) ---------- */
.strip{padding:30px 0 44px;overflow:hidden}
.strip-track{display:flex;width:max-content;animation:strip 40s linear infinite;will-change:transform}
.strip:hover .strip-track{animation-play-state:paused}
.strip-set{display:flex;align-items:center;gap:20px;padding-right:20px}
.strip img{filter:grayscale(1) brightness(1.05);opacity:.30;height:34px;width:auto;object-fit:contain;flex:none}
.strip img.tall{height:44px}
@keyframes strip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip-track{animation:none}}
@media(max-width:860px){.strip img{height:26px}.strip img.tall{height:34px}}
/* phones: the same slow continuous track (one canonical set + its aria-hidden twin), a touch more breathing room */
@media(max-width:768px){
  .strip{padding:26px 0 36px}
  .strip-set{gap:26px;padding-right:26px}
}
.strip:focus-within .strip-track{animation-play-state:paused}
/* reduced motion on phones: no track, one wrapping row so every logo is visible without motion or dragging */
@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .strip-track{width:100%;animation:none;transform:none}
  .strip-set{width:100%;padding:0 16px;justify-content:center;flex-wrap:wrap;gap:18px 22px}
  .strip-set[aria-hidden="true"]{display:none}
}

/* ---------- 3. the work ---------- */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 28px;margin-top:6px}
.ccard{text-decoration:none;color:var(--ink);display:block}
.ccard img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.ccard .cbody{padding:14px 4px 0}
.ccard .cname{font-size:20px;font-weight:600;letter-spacing:-.4px}
.ccard .cname span{font-weight:400;color:var(--g45);font-size:13px;margin-left:8px}
.ccard .cnums{margin-top:7px;font-family:'Space Mono',monospace;font-size:11px;color:var(--g55);line-height:1.65}
.ccard .cgo{margin-top:8px;font-family:'Space Mono',monospace;font-size:11px;color:var(--blue)}
.ccard.feature{grid-column:1/-1}
.ccard.feature img{aspect-ratio:21/9;object-position:center 30%}
@media(max-width:860px){.case-grid{grid-template-columns:1fr}.ccard.feature img{aspect-ratio:16/9}}
/* mobile float (<= 768px): the case windows scatter down the page, every one inside the viewport */
@media(max-width:768px){
  #work{padding:36px 14px 60px}
  .case-grid{display:block}
  .ccard{margin-bottom:34px;transform-origin:center}
  .ccard .cname{font-size:18px}
  .ccard .cname span{display:block;margin-left:0;margin-top:2px}
  .ccard:nth-child(1){margin-left:14px;width:min(272px,calc(100vw - 28px - 14px - 8px));transform:rotate(-1.5deg)}
  .ccard:nth-child(2){margin-left:min(100px,calc(100vw - 28px - 262px - 8px));width:262px;transform:rotate(2deg)}
  .ccard:nth-child(3){margin-left:8px;width:min(266px,calc(100vw - 28px - 8px - 8px));transform:rotate(-2.5deg)}
  .ccard:nth-child(4){margin-left:min(108px,calc(100vw - 28px - 254px - 8px));width:254px;transform:rotate(1.5deg)}
  .ccard:nth-child(5){margin-left:18px;width:min(262px,calc(100vw - 28px - 18px - 8px));transform:rotate(-2deg)}
  .ccard:nth-child(6){margin-left:min(96px,calc(100vw - 28px - 258px - 8px));width:258px;transform:rotate(2.5deg)}
  .ccard:nth-child(7){margin-left:12px;width:min(268px,calc(100vw - 28px - 12px - 8px));transform:rotate(-1.5deg)}
  .ccard.feature{grid-column:auto}
  .ccard.feature img{aspect-ratio:16/9}
}


/* ---------- 4. what we do ---------- */
.row{display:flex;align-items:center;gap:6vw;margin-bottom:110px}
.row:last-child{margin-bottom:0}
.row.flip{flex-direction:row-reverse}
.row .txt{flex:1}
.row .txt h3{font-size:34px;font-weight:600;letter-spacing:-1px;margin-bottom:12px}
.row .txt p{font-size:16px;line-height:1.55;color:var(--g55);max-width:420px}
.row .shot{flex:1.3;width:100%}
@media(max-width:860px){.row,.row.flip{flex-direction:column;align-items:stretch;gap:22px;margin-bottom:64px}.row .txt h3{font-size:28px}}

/* ---------- 5. everything we offer (r/ga table) ---------- */
.offer-intro{max-width:640px;margin:0 auto 70px;text-align:center}
.offer-intro .pill{margin-bottom:26px}
.offer-intro h2{font-size:46px;font-weight:500;letter-spacing:-1.8px;line-height:1.05}
.offer-intro p{font-size:16px;color:var(--g55);line-height:1.6;margin-top:14px}
.offer-intro .svc{display:inline-block;margin-top:18px;font-family:'Space Mono',monospace;font-size:12px;color:var(--blue);border:1px solid rgba(15,127,255,.4);border-radius:999px;padding:6px 16px}
.fam{border-top:1px solid rgba(0,0,0,.14);padding:44px 0 50px;display:flex;gap:5vw}
.fam .left{flex:1}
.fam .left h3{font-size:30px;font-weight:600;letter-spacing:-1px}
.fam .left p{font-size:15px;color:var(--g55);line-height:1.55;margin-top:10px;max-width:380px}
.fam .left .proof{margin-top:22px;font-family:'Space Mono',monospace;font-size:11px;color:var(--g45);text-transform:uppercase;letter-spacing:.08em}
.fam .left .proof b{color:var(--blue);font-weight:500}
.fam .subs{flex:1.4;display:grid;grid-template-columns:1fr 1fr;gap:18px 34px}
.sub b{display:block;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.sub span{font-size:13.5px;color:var(--g55);line-height:1.45;display:block}
@media(max-width:860px){.offer-intro h2{font-size:36px}.fam{flex-direction:column;gap:26px;padding:34px 0 38px}.fam .subs{grid-template-columns:1fr}}

/* ---------- 6. the founder's note ---------- */
.center{text-align:center}
.notes-wrap{display:flex;justify-content:center;position:relative;padding:30px 0 10px}
.notes{width:520px;max-width:88vw}
.notes .body{padding:26px 30px;font-size:16px;line-height:1.65;color:var(--g55)}
.notes .body p{margin-bottom:14px}
.notes .hl{background:linear-gradient(transparent 55%,rgba(255,230,0,.7) 55%);color:#000}
.sig{display:flex;align-items:center;gap:12px;margin-top:20px}
.sig .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#666,#222);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex:none}
.sig .who{font-size:14px}.sig .who b{display:block;font-weight:700;color:#000}
.sig .who span{color:var(--g45);font-size:12px}
.sig .scribble{margin-left:auto;font-family:'Space Mono',monospace;font-size:20px;font-weight:700;transform:rotate(-4deg);text-decoration:line-through 2px;color:#000}
.sticker{position:absolute;font-size:12px;font-weight:700;padding:8px 14px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.15);z-index:3}
@media(max-width:860px){.sticker{display:none}}

/* the eight faces */
.faces-cap{font-family:'Space Mono',monospace;font-size:11px;color:var(--g45);text-align:center;margin-top:34px;letter-spacing:.06em}
.faces-row{display:flex;justify-content:center;gap:18px;margin-top:22px;position:relative}
.face{width:150px;flex:none;position:relative;transition:transform .3s}
.face input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.face label{display:block;cursor:pointer}
.face img{display:block;width:100%;border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.face .fl{font-family:'Space Mono',monospace;font-size:9.5px;color:rgba(0,0,0,.5);margin-top:10px;text-transform:uppercase;letter-spacing:.06em;text-align:center;white-space:nowrap}
.face .fwhy{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,8px);width:220px;background:#fff;color:#111;border-radius:12px;padding:13px 15px;font-size:12px;line-height:1.55;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:20;text-align:left}
.face .fwhy::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff}
.face input:checked ~ .fwhy{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.face .fwhy .wt{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#888;margin-bottom:6px}
/* first and last face: keep the card inside the row */
.face:first-child .fwhy{left:0;transform:translate(0,8px)}
.face:first-child input:checked ~ .fwhy{transform:translate(0,0)}
.face:first-child .fwhy::after{left:75px}
.face:last-child .fwhy{left:auto;right:0;transform:translate(0,8px)}
.face:last-child input:checked ~ .fwhy{transform:translate(0,0)}
.face:last-child .fwhy::after{left:auto;right:68px}
@media(max-width:1400px){.faces-row{flex-wrap:wrap;gap:18px 14px;padding:0 2vw}.face{width:calc(25% - 11px);max-width:150px}.face .fl{white-space:normal}}
@media(max-width:860px){
  .face .fwhy{width:180px}
  .face:nth-child(4n+1) .fwhy{left:0;transform:translate(0,8px)}
  .face:nth-child(4n+1) input:checked ~ .fwhy{transform:translate(0,0)}
  .face:nth-child(4n+1) .fwhy::after{left:36px}
  .face:nth-child(4n) .fwhy{left:auto;right:0;transform:translate(0,8px)}
  .face:nth-child(4n) input:checked ~ .fwhy{transform:translate(0,0)}
  .face:nth-child(4n) .fwhy::after{left:auto;right:36px}
}

/* ---------- 7. the roster ---------- */
.marquee{overflow:hidden;white-space:nowrap;margin:20px 0 50px;position:relative;line-height:1;font-weight:500}
.marquee .track{display:inline-block;white-space:nowrap;animation:marquee 30s linear infinite;will-change:transform;line-height:1}
.marquee .track span{display:inline-block;font-size:90px;font-weight:500;letter-spacing:-4px;color:rgba(0,0,0,.14);padding:0 .3em;line-height:1}
.marquee .track b{display:inline-block;font-size:90px;font-weight:700;letter-spacing:-4px;color:#000;padding:0 .3em;line-height:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}
@media(max-width:860px){.marquee .track span,.marquee .track b{font-size:52px;letter-spacing:-2px}}
.receipts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.receipt .rb{padding:16px 18px 18px;font-size:14px;line-height:1.5;color:rgba(0,0,0,.72)}
.receipt .rb .hd{font-family:'Space Mono',monospace;font-size:11px;color:var(--g45);margin-bottom:8px;letter-spacing:.04em}
.receipt .rb .nm{font-weight:600;color:var(--ink);font-size:15px;margin-bottom:6px}
.receipt .rb .res{display:block;margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.10);font-family:'Space Mono',monospace;font-size:11px;color:var(--blue);line-height:1.6}
@media(max-width:860px){.receipts{grid-template-columns:1fr}}

/* ---------- 8. ethan's creative corner ---------- */
.corner-field{position:relative;height:1000px;margin-top:20px}
.corner-field .centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:56px;font-weight:600;letter-spacing:-.04em;color:#111;z-index:1;text-align:center}
.fobj{position:absolute;transition:transform .3s;z-index:2}
.fobj:hover{z-index:15}
.fobj .obj-btn{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .3s}
.fobj .obj-btn:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:14px}
.fobj .obj{display:block}
.fobj:hover .obj-btn{transform:translateY(-6px)}
.fobj img{display:block;width:100%;border-radius:14px;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.fobj.cut img{border-radius:0;box-shadow:none;filter:drop-shadow(0 24px 34px rgba(0,0,0,.35))}
.fobj .ol{font-family:'Space Mono',monospace;font-size:10px;color:var(--g45);margin-top:12px;text-transform:uppercase;letter-spacing:.08em}
.fobj .why{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,8px);width:240px;background:#fff;color:#111;border-radius:12px;padding:14px 16px;font-size:12.5px;line-height:1.55;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 20px 50px rgba(0,0,0,.35);z-index:20;text-align:left}
.fobj .why::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff}
.fobj .why[hidden]{display:none}
.fobj .why.is-open{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.fobj .why .wt{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#888;margin-bottom:6px}
.fobj.why-right .why{left:auto;right:0;transform:translate(0,8px)}
.fobj.why-right .why.is-open{transform:translate(0,0)}
.fobj.why-right .why::after{left:auto;right:40px}
.corner-by{font-family:'Space Mono',monospace;font-size:11px;color:var(--g45);margin-top:30px;letter-spacing:.04em;line-height:1.9}
.corner-by b{color:#111;font-weight:700}
@media(prefers-reduced-motion:reduce){.fobj,.fobj .obj-btn,.fobj .why{transition:none}}
@media(max-width:860px){
  .corner-field{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:34px 18px;padding-top:10px}
  .corner-field .centre{position:static;transform:none;grid-column:1/-1;font-size:40px;order:-1}
  .fobj{position:static;width:auto!important;transform:none!important;margin:0!important}
  .fobj .why{position:static;transform:none;width:auto;display:none;margin-top:10px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
  .fobj .why.is-open{display:block;transform:none}
  .fobj .why::after{display:none}
}

/* ---------- 9. the engine room (vorly) ---------- */
.vorly{text-align:center}
.vorly .lockup{display:flex;justify-content:center;margin:26px 0 6px}
.vorly .lockup img{height:54px;width:auto}
.vorly .line{font-size:15px;color:var(--g55);max-width:520px;margin:18px auto 0;line-height:1.6}
.vorly .vwhat{max-width:600px;margin:22px auto 0;font-size:15px;color:var(--g55);line-height:1.65}
.vorly .vnote{max-width:600px;margin:34px auto 0;font-family:'Space Mono',monospace;font-size:12px;color:var(--g45);line-height:1.7}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:980px;margin:44px auto 0;text-align:left}
.vcard{background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:14px;padding:22px 22px 20px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.vcard .vt{font-family:'Space Mono',monospace;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:10px}
.vcard b{display:block;font-size:18px;font-weight:600;letter-spacing:-.4px;margin-bottom:8px}
.vcard p{font-size:13.5px;color:var(--g55);line-height:1.5}
@media(max-width:860px){.vcards{grid-template-columns:1fr}}
/* ---------- 10. footer ---------- */
footer{padding:100px 6vw 40px;border-top:1px solid rgba(0,0,0,.10)}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:760px}
.fcols h5{font-family:'Space Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.10em;color:var(--g45);margin-bottom:14px;text-transform:uppercase}
.fcols a{display:block;color:var(--blue);font-size:14px;margin-bottom:9px;text-decoration:none}
.copy{margin-top:70px;color:var(--g30);font-size:12px;font-family:'Space Mono',monospace;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:600px){.fcols{grid-template-columns:1fr}}

/* ---------- the brief (start something) - monochrome ---------- */
.menubar .crumb{font-family:'Space Mono',monospace;font-size:12px;color:var(--g45);margin-left:-6px}
/* ---------- 10. read receipts panel (approved dark inset, three cover cards, one link) ---------- */
.rr-home{padding:0 80px}
.rr-panel{background:#0c0c0c;border-radius:28px;padding:82px 72px 64px;color:#fff}
.rr-home-mono{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.12em;color:#8d8d8d}
.rr-home-meta,.rr-home-sub{display:flex;justify-content:space-between;gap:24px}
.rr-home-title{font-family:'Instrument Serif','Times New Roman',serif;font-weight:400;font-size:92px;line-height:.95;letter-spacing:-.025em;margin:34px 0 20px;color:#fff}
.rr-home-roman{font-style:normal}
.rr-home-ital{font-style:italic;color:#268CFF}
.rr-home-rule{height:1px;background:rgba(255,255,255,.12);margin:36px 0 48px}
.rr-home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.rr-home-card picture,.rr-home-card img{display:block}
.rr-home-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px}
.rr-home-cap{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7c7c7c;margin-top:24px}
.rr-home-card-link{display:block;color:inherit;text-decoration:none}
.rr-home-card-link:hover .rr-home-cap,.rr-home-card-link:focus-visible .rr-home-cap{color:#fff}
.rr-home-card-link:focus-visible{outline:2px solid #268CFF;outline-offset:6px;border-radius:16px}
.rr-home-card-link:active img{opacity:.92}
.rr-home-more{text-align:right;margin-top:32px}
.rr-home-more a{font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.06em;color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.rr-home-more a:focus-visible{outline:2px solid #268CFF;outline-offset:4px;border-radius:2px}
@media(max-width:1024px){
  .rr-home{padding:0 40px}
  .rr-panel{padding:64px 48px 56px}
  .rr-home-title{font-size:72px}
}
@media(max-width:768px){
  .rr-home{padding:0 16px}
  .rr-panel{padding:46px 24px 40px;border-radius:24px}
  .rr-home-mono{font-size:10.5px;letter-spacing:.1em}
  .rr-home-meta{gap:16px}
  .rr-home-sub{flex-direction:column;gap:10px;align-items:flex-start}
  .rr-home-title{font-size:46px;margin:22px 0 22px}
  .rr-home-rule{margin:30px 0 32px}
  .rr-home-grid{grid-template-columns:1fr;gap:40px}
  .rr-home-cap{font-size:10.5px;margin-top:22px}
  .rr-home-more{margin-top:36px}
  .rr-home-more a{font-size:13px}
}
@media(max-width:340px){
  .rr-panel{padding:40px 18px 36px}
  .rr-home-title{font-size:40px}
  .rr-home-meta{font-size:9.5px;gap:8px}
  .rr-home-meta span:last-child{white-space:nowrap}
}

.brief-wrap{display:flex;justify-content:center;padding:30px 0 10px}
.brief-win{width:760px;max-width:100%;border:1px solid #000;border-radius:12px;box-shadow:0 30px 70px -34px rgba(0,0,0,.4)}
.brief-win .tb{background:#000;border-bottom:1px solid #000}
.brief-win .tb .t{color:#fff}
.brief-win .paper{background:#fff;padding:34px 36px 32px;color:#000}
.brief-win h2{font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.brief-win .sub{font-size:16px;line-height:1.6;color:var(--g55);margin-top:10px;max-width:560px}
.brief-win .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.brief-win .field{display:block;margin-top:22px;position:relative}
.brief-win .lbl{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:#000;margin-bottom:8px}
.brief-win .field input,.brief-win .field select{display:block;width:100%;font-family:'Inter',sans-serif;font-size:15px;padding:11px 12px;border:1px solid rgba(0,0,0,.22);border-radius:6px;background:#fff;color:#000;letter-spacing:-.01em;appearance:none;-webkit-appearance:none}
.brief-win .field input:focus,.brief-win .field select:focus{outline:none;border-color:#000;box-shadow:0 0 0 1px #000}
.brief-win .field input::placeholder{color:var(--g30)}
.brief-win .sel{position:relative;display:block}
.brief-win .sel::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1.5px solid #000;border-bottom:1.5px solid #000;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.brief-win .field select{padding-right:36px;cursor:pointer}
.brief-win .field select:invalid,.brief-win .field select.empty{color:var(--g45)}
.brief-win .err{display:none;font-family:'Space Mono',monospace;font-size:11px;color:#b3261e;margin-top:8px}
.brief-win .err.on{display:block}
.brief-win .err.form{margin-top:18px}
.brief-win .err a,.brief-win .fine a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.brief-win .is-invalid input,.brief-win .is-invalid select{border-color:#b3261e}
.brief-win .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.brief-win .actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.brief-win .file-btn{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;padding:13px 26px;border:1px solid #000;border-radius:999px;background:#000;color:#fff;cursor:pointer;transition:transform .15s,background .15s}
.brief-win .file-btn:hover{transform:translateY(-1px);background:#111}
.brief-win .file-btn:disabled{opacity:.6;cursor:progress;transform:none}
.brief-win .fine{font-family:'Space Mono',monospace;font-size:11px;color:var(--g45)}
.brief-win .brief-done .fine{display:block;margin-top:22px}
@media(max-width:860px){.brief-win .paper{padding:24px 18px}.brief-win h2{font-size:26px}.brief-win .grid2{grid-template-columns:1fr}}

/* ---------- campaign studios (fix 12): pill tabs above one bare rounded frame, caption as page text ---------- */
.stabs{display:flex;justify-content:center;margin:34px 0 22px}
.stab-pill{position:relative;display:inline-flex;gap:2px;padding:4px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.06);max-width:100%;overflow-x:auto;scrollbar-width:none}
.stab-pill::-webkit-scrollbar{display:none}
.sthumb{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--blue);border-radius:999px;transition:left .45s cubic-bezier(.22,.8,.24,1),width .45s cubic-bezier(.22,.8,.24,1)}
.stab{position:relative;z-index:1;border:0;background:none;cursor:pointer;font-family:'Inter',-apple-system,sans-serif;font-size:13px;font-weight:500;letter-spacing:-.02em;color:var(--g55);padding:8px 16px;border-radius:999px;white-space:nowrap;transition:color .3s}
.stab.on{color:#fff}
.stab.lock{color:var(--g45)}
.stab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.boardzone{width:min(1720px,88vw);margin:0 auto}
.bframe{position:relative;aspect-ratio:1558/900;overflow:hidden;border-radius:18px;background:#121212;box-shadow:0 18px 50px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);touch-action:pan-y}
.btrack{display:flex;height:100%;transition:transform .8s cubic-bezier(.22,.8,.24,1);will-change:transform}
.btrack.drag{transition:none}
.bslide{flex:0 0 100%;position:relative;height:100%;overflow:hidden}
.bslide iframe{position:absolute;left:0;top:0;width:1920px;height:1200px;border:0;transform-origin:top left;background:#121212}
.bslide a.posterlink{position:absolute;inset:0;display:block}
.bslide img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blocked{display:flex;align-items:center;justify-content:center;height:100%;font-family:'Space Mono',monospace;font-size:12px;color:rgba(255,255,255,.55);text-align:center;line-height:1.7;padding:0 24px;background:radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1.4px) 0 0/24px 24px,#121212}
.boardcap{text-align:center;font-family:'Inter',-apple-system,sans-serif;font-size:26px;font-weight:500;letter-spacing:-.02em;color:#111;margin:26px 0 0}
.boardcap img{height:26px;vertical-align:-5px}
@media(prefers-reduced-motion:reduce){.btrack,.sthumb{transition:none}}
@media(max-width:768px){
  .stabs{justify-content:flex-start;margin:28px -6vw 16px;padding:0 6vw}
  .boardzone{width:auto;margin:0 -6vw}   /* full-bleed: the approved node coordinates assume the phone's full width */
  /* the board mounts at 1:1 in a tall frame; the height follows the active board's three-node layout */
  .bframe{aspect-ratio:auto;height:var(--mob-h,1240px);transition:height .4s cubic-bezier(.22,.8,.24,1)}
  .bslide iframe{left:0;top:0;width:100%;height:100%;transform:none!important}
  .boardcap{display:flex;align-items:center;justify-content:center;gap:5px;max-width:100%;padding:0 4px;font-size:15px;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
  .boardcap img{height:15px;width:auto;vertical-align:0;flex:none}
}


/* ---------- approved footer newsletter panel ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.footer-signup{max-width:1240px;margin:0 auto 64px;background:#0c0c0c;color:#fff;border-radius:28px;padding:58px 64px 54px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end}
.footer-signup-label{font:11px 'Space Mono',monospace;letter-spacing:.15em;text-transform:uppercase;color:#858585;margin:0 0 18px}
.footer-signup h2{font-family:'Instrument Serif','Times New Roman',serif;font-size:55px;font-weight:400;line-height:.95;letter-spacing:-.02em;margin:0 0 18px}
.footer-signup h2 em{font-weight:400;color:#268cff}.footer-signup-dek{margin:0;color:#a3a3a3;font-size:15px;line-height:1.55;max-width:510px}
.footer-signup-field{display:flex;border-bottom:1px solid #5b5b5b;padding-bottom:10px;gap:12px}.footer-signup-field input{flex:1;min-width:0;border:0;background:transparent;color:#fff;padding:12px 2px;outline:0;font:13px 'Space Mono',monospace}.footer-signup-field input::placeholder{color:#767676}.footer-signup-field input:focus{box-shadow:0 2px 0 #268cff}.footer-signup-field button{border:1px solid #fff;border-radius:999px;background:#fff;color:#111;padding:12px 18px;font:11px 'Space Mono',monospace;white-space:nowrap;cursor:pointer}.footer-signup-field button:disabled{opacity:.55;cursor:wait}.footer-signup-fine,.footer-signup-status{font:9px/1.5 'Space Mono',monospace;color:#666;margin:12px 0 0;min-height:14px}.footer-signup-status.is-error{color:#ff8e87}.footer-signup-status.is-success{color:#55d493}
@media(max-width:700px){footer{padding-left:16px;padding-right:16px}.footer-signup{grid-template-columns:1fr;gap:34px;padding:38px 24px 34px;border-radius:24px;margin-bottom:54px}.footer-signup h2{font-size:43px}.footer-signup-field{display:block;border:0;padding:0}.footer-signup-field input{display:block;width:100%;border-bottom:1px solid #5b5b5b;padding:14px 2px;margin-bottom:14px}.footer-signup-field button{width:100%;padding:14px 18px}.fcols,.copy{padding-left:8px;padding-right:8px}}