/* Freddy Media. Brand system from the Freddy board: navy 5255C #090E33, red 7417C #FF4343, white.
   Bebas Neue for the condensed caps, Montserrat for everything else. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bebas.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/montserrat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --navy:#090E33;--navy-2:#0F1542;--navy-3:#182056;
  --red:#FF4343;--red-2:#E83636;
  --paper:#F4F2EE;--white:#FFFFFF;
  --ink:#090E33;--mute:#5A5F7A;--line:rgba(9,14,51,.14);--line-2:rgba(9,14,51,.28);
  --d-body:#B9BDD6;--d-mute:#8C92B5;--d-line:rgba(255,255,255,.14);
  --disp:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --max:1360px;--gut:clamp(20px,3.4vw,48px);--r:10px;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;font-weight:500;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--red);color:#fff;padding:10px 16px;font-weight:700}
.skip:focus{top:12px}
main{display:block;outline:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}

/* ---------- type ---------- */
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:.004em}
.h-xl{font-size:clamp(58px,9vw,148px)}
.h-l{font-size:clamp(46px,6.4vw,104px)}
.h-m{font-size:clamp(34px,3.8vw,60px);line-height:.92}
.h-s{font-size:clamp(26px,2.4vw,36px);line-height:.95}
.red{color:var(--red)}
.lab{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.lede{font-size:clamp(17px,1.45vw,20px);line-height:1.6;font-weight:500;max-width:46ch;color:var(--mute)}
.lede strong,.lede b{color:var(--ink);font-weight:700}
.navy .lede,.navy p{color:var(--d-body)}
.navy .lede strong,.navy .lede b{color:#fff}
p+p{margin-top:1em}
.sl{display:flex;gap:10px;align-items:center;margin-bottom:22px;color:var(--mute)}
.sl .n{color:var(--red)}
.navy .sl{color:var(--d-mute)}

/* ---------- the Freddy lockup: bold wordmark + red condensed sub-brand ---------- */
.lock{display:inline-flex;align-items:center;gap:.28em;white-space:nowrap;line-height:1}
.lock svg{width:.95em;height:.95em;flex:none;align-self:flex-start;margin-top:-.02em}
.lock b{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.lock i{font-family:var(--disp);font-style:normal;color:var(--red);font-size:1.12em;letter-spacing:.01em;margin-left:-.12em;transform:translateY(.04em)}
.navy .lock b,.lock.w b{color:#fff}

/* ---------- bracket buttons, from the copy doc: [ LET'S BUILD SOMETHING → ] ---------- */
.bk{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:14px 4px;cursor:pointer;background:none;border:0;color:inherit;white-space:nowrap}
.bk .b{font-family:var(--disp);font-size:1.9em;font-weight:400;line-height:0;color:var(--red);transition:transform .45s var(--ease)}
.bk .ar{color:var(--red);transition:transform .45s var(--ease)}
.bk .t{background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;transition:background-size .45s var(--ease)}
.bk:hover .b:first-child{transform:translateX(-5px)}
.bk:hover .b:last-child{transform:translateX(5px)}
.bk:hover .ar{transform:translateX(4px)}
.bk:hover .t{background-size:100% 2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;border:0;background:var(--red);color:#fff;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .3s var(--ease),color .3s,transform .3s var(--ease)}
.btn:hover{background:var(--navy);transform:translateY(-1px)}
.navy .btn:hover{background:#fff;color:var(--navy)}
.btn.sm{height:42px;padding:0 20px;font-size:12px}
.row{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
.row.mt{margin-top:32px}

/* ---------- bands ---------- */
.sec{padding:clamp(80px,10vw,150px) 0;position:relative}
.sec.tight{padding:clamp(56px,7vw,96px) 0}
.sec.flush{padding-top:0}
.navy{background:var(--navy);color:#fff}
.white{background:var(--white)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.split.mid{align-items:center}
.head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.head .lede{justify-self:end}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:62;background:rgba(244,242,238,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:76px}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto}
.brand svg{width:28px;height:28px}
.brand .word{font-weight:800;font-size:22px;letter-spacing:-.04em}
.brand .word i{font-style:normal;color:var(--red)}
.burger{display:none;width:46px;height:46px;border:1.5px solid var(--navy);border-radius:999px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:18px;height:2px;background:var(--navy);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mmenu{position:fixed;inset:76px 0 0 0;z-index:61;background:var(--navy);color:#fff;padding:12px var(--gut) 32px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.mmenu.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mmenu>a,.mm-div summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--d-line);font-family:var(--disp);font-size:40px;line-height:1;text-transform:uppercase;cursor:pointer;list-style:none}
.mm-div summary::-webkit-details-marker{display:none}
.mmenu small{display:block;font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.2em;color:var(--red);margin-bottom:4px}
.mm-div summary i{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--d-line);position:relative;flex:none}
.mm-div summary i::before,.mm-div summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;background:#fff;transform:translate(-50%,-50%)}
.mm-div summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.mm-div[open] summary i{background:var(--red);border-color:var(--red)}
.mm-div[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.mm-sub{display:grid;padding:6px 0 16px}
.mm-sub a{padding:9px 0 9px 14px;border-left:2px solid var(--d-line);font-size:16px;color:var(--d-body)}
.mm-sub a:first-child{color:#fff;font-weight:700}
.mmenu .btn{width:100%;margin-top:26px;height:54px}

/* mega menu */
.mega{position:relative;display:flex;align-items:center;height:100%}
.mega-items{display:flex;align-items:center;gap:2px;list-style:none}
.nm-item{display:flex;align-items:center;border-radius:999px;transition:background .25s}
.nm-item:hover,.nm-item.open{background:rgba(9,14,51,.06)}
.nm-link{position:relative;display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:9px 2px 9px 13px;border-radius:999px}
.nm-link.solo{padding:9px 13px}
.nm-link.solo:hover{background:rgba(9,14,51,.06)}
.nm-link[aria-current]::after{content:"";position:absolute;left:13px;right:4px;bottom:3px;height:2px;background:var(--red)}
.nm-link.solo[aria-current]::after{right:13px}
.nm-chev{width:26px;height:32px;display:grid;place-items:center;border:0;background:none;cursor:pointer;margin-right:5px;color:var(--navy)}
.nm-chev svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.nm-item.open .nm-chev svg{transform:rotate(180deg)}
.mega-vp{position:absolute;top:calc(100% + 2px);left:0;z-index:61;width:var(--w,860px);height:var(--h,340px);transform:translate3d(var(--x,0px),8px,0);opacity:0;visibility:hidden;background:var(--white);border-radius:14px;box-shadow:0 40px 80px -30px rgba(9,14,51,.4),0 0 0 1px var(--line);transition:opacity .22s var(--ease),transform .3s var(--ease),width .32s var(--ease),height .32s var(--ease),visibility 0s linear .3s}
.mega-vp::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.mega-vp.open{opacity:1;visibility:visible;transform:translate3d(var(--x,0px),0,0);transition:opacity .22s var(--ease),transform .3s var(--ease),width .32s var(--ease),height .32s var(--ease)}
.mega-vp.instant,.mega-vp.instant .mega-arrow{transition:none}
.mega-arrow{position:absolute;top:-6px;left:0;width:12px;height:12px;background:var(--white);transform:translateX(var(--ax,40px)) rotate(45deg);transition:transform .32s var(--ease);box-shadow:-1px -1px 0 var(--line)}
.mega-stage{position:absolute;inset:0;overflow:hidden;border-radius:14px}
.mega-panel{position:absolute;top:0;left:0;width:min(860px,calc(100vw - 48px));display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;padding:14px;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .36s var(--ease),visibility 0s linear .36s}
.mega-panel.on{opacity:1;visibility:visible;transition:opacity .28s var(--ease),transform .36s var(--ease)}
.mega-panel.pre-l{transform:translate3d(-48px,0,0)}
.mega-panel.pre-r{transform:translate3d(48px,0,0)}
.mega-panel.snap{transition:none}
.mega-feature{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;border-radius:10px;background:var(--navy);color:#fff;padding:22px;min-height:290px;overflow:hidden;isolation:isolate}
.mega-feature::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23FF4343' fill-opacity='.16' d='M8 2h16a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H14.5L8.6 31a.8.8 0 0 1-1.3-.6V26A6 6 0 0 1 2 20V8a6 6 0 0 1 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;z-index:-1;transition:transform .8s var(--ease)}
.mega-feature:hover::after{transform:rotate(-8deg) scale(1.08)}
.mega-feature .lock{font-size:22px}
.mega-feature .st{font-family:var(--disp);font-size:64px;line-height:.85;color:var(--red)}
.mega-feature .sl2{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--d-body)}
.mega-feature .ln{font-family:var(--disp);font-size:30px;line-height:.95;text-transform:uppercase}
.mega-feature .go{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.mega-side{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:6px 6px 4px 0}
.mega-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.mega-list a{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border-radius:8px;transition:background .25s}
.mega-list a:hover,.mega-list a:focus-visible{background:var(--paper)}
.mi{width:36px;height:36px;border-radius:8px;background:var(--navy);display:grid;place-items:center;transition:background .3s}
.mega-list a:hover .mi{background:var(--red)}
.mi svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtx{display:grid;gap:2px}
.mtx b{font-size:14px;font-weight:700;line-height:1.3}
.mtx span{font-size:12.5px;color:var(--mute);line-height:1.45}
.js .mega-panel.on .mega-list li{animation:megain .45s var(--ease) both}
.js .mega-panel.on .mega-list li:nth-child(2){animation-delay:.04s}
.js .mega-panel.on .mega-list li:nth-child(3){animation-delay:.08s}
.js .mega-panel.on .mega-list li:nth-child(4){animation-delay:.12s}
.js .mega-panel.on .mega-list li:nth-child(5){animation-delay:.16s}
@keyframes megain{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:4px 12px 0}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;min-height:calc(100svh - 76px);display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(40px,6vw,88px)}
.hero .wm{position:absolute;right:-6vw;top:46%;width:min(58vw,820px);transform:translateY(-50%);opacity:.08;pointer-events:none}
.hero h1{margin:18px 0 0;font-size:clamp(78px,12.4vw,210px);line-height:.84;max-width:10.5ch}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 60px;align-items:end;margin-top:clamp(36px,5vw,64px);padding-bottom:clamp(28px,4vw,48px)}
.hero-foot .lede{color:var(--d-body);max-width:46ch}
.hero-foot .tag{font-family:var(--disp);font-size:clamp(30px,2.8vw,44px);line-height:.95;justify-self:end;text-align:right}
.hero-foot .tag span{display:block}
.phero{padding:clamp(56px,8vw,120px) 0 clamp(56px,7vw,100px);position:relative;overflow:hidden}
.phero .lock{font-size:clamp(22px,2vw,30px);margin-bottom:26px}
.phero h1{font-size:clamp(64px,10vw,172px);line-height:.85;max-width:12ch}
.phero .kick2{font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:18px;display:block}
.phero .wm{position:absolute;right:-6vw;bottom:-14vw;width:min(48vw,640px);opacity:.07;pointer-events:none}
.pgrid2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px clamp(32px,6vw,96px);align-items:end;margin-top:clamp(32px,4vw,56px)}
.chipline{font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.chipline span:not(:last-child)::after{content:"";display:inline-block;width:5px;height:5px;background:var(--red);border-radius:50%;margin-left:14px;vertical-align:2px}

/* ---------- marquee ---------- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;background:var(--white)}
.marq.dark{background:var(--navy-2);border-color:var(--d-line);color:#fff}
.track{display:flex;width:max-content;align-items:center;animation:slide 70s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq .track span{font-family:var(--disp);font-size:clamp(34px,4vw,60px);line-height:1;padding:0 30px;white-space:nowrap;display:flex;align-items:center;gap:60px}
.marq .track span::after{content:"";width:22px;height:22px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23FF4343' d='M8 2h16a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H14.5L8.6 31a.8.8 0 0 1-1.3-.6V26A6 6 0 0 1 2 20V8a6 6 0 0 1 6-6z'/%3E%3Cpath fill='%23fff' d='M11 8.5h10.5v4H15.3v2.4h5.4v3.8h-5.4V23H11z'/%3E%3C/svg%3E") center/contain no-repeat}
.marq.small .track span{font-size:clamp(24px,2.4vw,34px);gap:44px;padding:0 22px}
.marq.small .track span::after{width:14px;height:14px}
.marq.rev .track{animation-direction:reverse}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:2px solid currentColor}
.stats>div{padding:26px 22px 0 0}
.stats .n{font-family:var(--disp);font-size:clamp(64px,7vw,120px);line-height:.85;color:var(--red)}
.stats .l{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-top:12px;max-width:22ch;line-height:1.4}
.navy .stats .l{color:var(--d-body)}
.bigstats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px solid var(--ink)}
.bigstats>div{padding:28px 20px 34px 0;border-bottom:1px solid var(--line);grid-column:span 2}
.bigstats>div:nth-child(4),.bigstats>div:nth-child(5){grid-column:span 3}
.bigstats .n{font-family:var(--disp);font-size:clamp(80px,10vw,176px);line-height:.82}
.bigstats>div:nth-child(odd) .n{color:var(--red)}
.bigstats .l{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-top:12px;max-width:26ch;line-height:1.4}

/* ---------- big line list ---------- */
.biglist{list-style:none;border-top:1px solid var(--line)}
.biglist li{font-family:var(--disp);font-size:clamp(34px,4.2vw,68px);line-height:1;text-transform:uppercase;padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;transition:color .3s,padding .4s var(--ease)}
.biglist li small{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--mute);align-self:center}
.biglist li:hover{color:var(--red);padding-left:12px}
.navy .biglist,.navy .biglist li{border-color:var(--d-line)}
.navy .biglist li small{color:var(--d-mute)}

/* ---------- divisions (home) ---------- */
.div-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,110px);align-items:start}
.div-panel .num{font-family:var(--disp);font-size:clamp(120px,16vw,260px);line-height:.75;color:transparent;-webkit-text-stroke:2px var(--red)}
.div-panel .lock{font-size:clamp(24px,2.2vw,32px);margin:28px 0 0}
.div-panel h2{font-size:clamp(56px,7.6vw,128px);margin-bottom:26px}
.div-panel .pull{font-family:var(--disp);font-size:clamp(28px,2.5vw,40px);line-height:.95;margin-bottom:18px;text-transform:uppercase}
.div-panel .stat{display:flex;gap:36px;flex-wrap:wrap;margin:30px 0 8px}
.div-panel .stat b{display:block;font-family:var(--disp);font-size:clamp(54px,5.4vw,84px);line-height:.85;color:var(--red);font-weight:400}
.div-panel .stat span{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.svc-list{list-style:none;margin-top:36px;border-top:1px solid var(--line)}
.navy .svc-list,.navy .svc-list a{border-color:var(--d-line)}
.svc-list a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;transition:color .25s,padding .4s var(--ease)}
.svc-list a span:last-child{color:var(--red);transition:transform .4s var(--ease)}
.svc-list a:hover{color:var(--red);padding-left:8px}
.svc-list a:hover span:last-child{transform:translateX(4px)}

/* ---------- flywheel ---------- */
.fly{width:100%;max-width:620px;margin-left:auto;overflow:visible}
.fly .node{cursor:pointer}
.fly .node circle.c{fill:var(--navy);transition:fill .35s var(--ease)}
.fly .node:hover circle.c,.fly .node:focus-visible circle.c,.fly .node.lit circle.c{fill:var(--red)}
.fly .node:focus-visible{outline:none}
.fly .t1{font-family:var(--sans);font-weight:800;font-size:13px;fill:#fff;letter-spacing:-.02em}
.fly .t2{font-family:var(--disp);font-size:18px;fill:var(--red);transition:fill .35s}
.fly .node:hover .t2,.fly .node.lit .t2,.fly .node:focus-visible .t2{fill:#fff}
.fly .node:hover .fm,.fly .node.lit .fm{fill:#fff}
.fly .t3{font-family:var(--sans);font-weight:700;font-size:7.5px;letter-spacing:.2em;fill:#B9BDD6}
.fly .node:hover .t3,.fly .node.lit .t3{fill:#fff}
.fly .arc{fill:none;stroke:var(--navy);stroke-width:2}
.fly .arrow{fill:var(--navy)}
.fly .al{font-family:var(--sans);font-weight:800;font-size:8.5px;letter-spacing:.26em;fill:var(--mute)}
.fly .core1{font-family:var(--disp);font-size:70px;fill:var(--navy)}
.fly .core2{font-family:var(--sans);font-weight:800;font-size:10px;letter-spacing:.7em;fill:var(--navy)}
.fly .spin{transform-origin:320px 320px;animation:flyspin 80s linear infinite}
.anim-off .spin{animation-play-state:paused}
@keyframes flyspin{to{transform:rotate(360deg)}}
.fly-list{border-top:2px solid var(--ink)}
.fly-list a{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.fly-list a .n{font-family:var(--disp);font-size:34px;color:var(--red);line-height:1}
.fly-list a .lock{font-size:22px}
.fly-list a small{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.fly-list a:hover,.fly-list a.lit{padding-left:10px}

/* ---------- grid cards ---------- */
.mx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid currentColor}
.mx.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mx.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mx>*{padding:30px clamp(24px,3vw,44px) 34px 0;border-bottom:1px solid var(--line);position:relative}
.navy .mx>*{border-color:var(--d-line)}
.mx .n{font-family:var(--disp);font-size:22px;color:var(--red);display:block;margin-bottom:28px;letter-spacing:.04em}
.mx h3{font-family:var(--disp);font-weight:400;font-size:clamp(32px,2.8vw,44px);line-height:.92;text-transform:uppercase;margin-bottom:14px}
.mx p{font-size:15px;color:var(--mute);max-width:44ch}
.navy .mx p{color:var(--d-body)}
.mx a.more{display:inline-block;margin-top:18px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.mx a.more:hover{text-decoration:underline;text-underline-offset:4px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tags span,.tags a,a.tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--line-2);border-radius:999px;padding:5px 12px;line-height:1.3}
.navy .tags span,.navy .tags a,.navy a.tag{border-color:var(--d-line)}
.tags a:hover,a.tag:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- services 01-09 ---------- */
.svc9{border-top:2px solid var(--ink)}
.svc9 details{border-bottom:1px solid var(--line)}
.svc9 summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:80px minmax(0,.8fr) minmax(0,1.2fr) 40px;gap:20px;align-items:center;padding:22px 0}
.svc9 summary::-webkit-details-marker{display:none}
.svc9 summary .n{font-family:var(--disp);font-size:28px;color:var(--red)}
.svc9 summary .k{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.svc9 summary .t{font-family:var(--disp);font-size:clamp(34px,3.6vw,58px);line-height:.9;text-transform:uppercase;transition:color .25s}
.svc9 summary .pm,.faq summary .pm{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-2);position:relative;justify-self:end}
.svc9 summary .pm::before,.svc9 summary .pm::after,.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.svc9 summary .pm::after,.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.svc9 details[open] summary .pm,.faq details[open] summary .pm{background:var(--red);border-color:var(--red);color:#fff}
.svc9 details[open] summary .pm::after,.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
.svc9 summary:hover .t{color:var(--red)}
.svc9 .body{display:grid;grid-template-columns:80px minmax(0,.8fr) minmax(0,1.2fr) 40px;gap:20px;padding:0 0 28px}
.svc9 .body p,.svc9 .body a{grid-column:3}
.svc9 .body p{font-size:15.5px;color:var(--mute)}
.svc9 .body a{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-top:4px}

/* ---------- expand cards (Dealer Services) ---------- */
.xcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.xcard{background:var(--white);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);color:var(--ink)}
.xcard summary{list-style:none;cursor:pointer;padding:26px 26px 22px;display:grid;gap:14px}
.xcard summary::-webkit-details-marker{display:none}
.xcard .k{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.xcard h3{font-family:var(--disp);font-weight:400;font-size:clamp(40px,3.4vw,56px);line-height:.88;text-transform:uppercase}
.xcard .teaser{font-size:15px;color:var(--mute)}
.xcard .open{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.xcard .open i{width:26px;height:26px;border-radius:50%;background:var(--red);position:relative;flex:none}
.xcard .open i::before,.xcard .open i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;background:#fff;transform:translate(-50%,-50%)}
.xcard .open i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.xcard[open] .open i::after{transform:translate(-50%,-50%) rotate(0)}
.xcard .open b{display:none;font-weight:800}
.xcard[open] .open b{display:inline}
.xcard[open] .open em{display:none}
.xcard .open em{font-style:normal}
.xcard .more{padding:0 26px 28px;border-top:1px solid var(--line)}
.xcard .more p{font-size:15px;color:var(--mute);margin-top:18px}
.xcard .more .pull{font-family:var(--disp);font-size:30px;line-height:.95;text-transform:uppercase;margin-top:20px;color:var(--ink)}
.xcard .more .src{font-size:12.5px;font-style:italic}
.xcard .more .bk{margin-top:10px}

/* ---------- 5 step model + steps ---------- */
.model{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid currentColor}
.model>div{padding:26px 18px 30px;border-right:1px solid var(--line)}
.model>div:first-child{padding-left:0}
.model>div:last-child{border-right:0}
.navy .model>div{border-color:var(--d-line)}
.model .n{font-family:var(--disp);font-size:56px;line-height:.8;color:var(--red)}
.model h3{font-family:var(--disp);font-weight:400;font-size:clamp(28px,2.4vw,38px);line-height:.92;margin:18px 0 10px}
.model p{font-size:14.5px;color:var(--mute)}
.navy .model p{color:var(--d-body)}
.steps{border-top:2px solid currentColor;counter-reset:s}
.step{display:grid;grid-template-columns:70px minmax(0,340px) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.navy .step{border-color:var(--d-line)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--disp);font-size:30px;color:var(--red);line-height:1}
.step h3{font-family:var(--disp);font-weight:400;font-size:clamp(28px,2.4vw,38px);line-height:.95;text-transform:uppercase}
.step p{color:var(--mute);font-size:15px}
.navy .step p{color:var(--d-body)}
.split .step{grid-template-columns:52px minmax(0,1fr)}
.split .step p{grid-column:2}

/* ---------- honest placeholders for real footage and photos ---------- */
.slot{position:relative;border-radius:var(--r);overflow:hidden;background:repeating-linear-gradient(135deg,var(--navy-2) 0 14px,var(--navy-3) 14px 28px);color:#fff;display:grid;place-items:center;aspect-ratio:16/9}
.slot.tall{aspect-ratio:4/5}
.slot.wide{aspect-ratio:21/9}
.slot .inner{display:grid;justify-items:center;gap:14px;text-align:center;padding:20px}
.slot .play{width:74px;height:74px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:transform .5s var(--ease)}
.slot:hover .play{transform:scale(1.08)}
.slot .play::after{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:5px}
.slot .cap{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.slot>.ph{position:absolute;left:14px;top:14px}
.ph{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);border:1.5px dashed rgba(255,67,67,.7);border-radius:999px;padding:3px 9px;line-height:1.2;white-space:nowrap;background:rgba(255,67,67,.08)}
.ph::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
.phv{opacity:.5}
.ph-text{font-style:italic;opacity:.75;text-decoration:underline dashed rgba(255,67,67,.6);text-underline-offset:5px}

/* ---------- roster ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.fbtn{height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .3s var(--ease)}
.navy .fbtn{border-color:var(--d-line);color:#fff}
.fbtn:hover{border-color:var(--red)}
.fbtn[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.fbtn sup{font-size:9px;margin-left:3px;opacity:.7;vertical-align:4px}
.rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rcard{display:block;position:relative}
.rcard[hidden]{display:none}
.rcard .face{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;position:relative;background:var(--navy-3);display:grid;place-items:center}
.rcard .face .ini{font-family:var(--disp);font-size:clamp(90px,10vw,150px);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.35);transition:color .4s,-webkit-text-stroke-color .4s}
.rcard:hover .face .ini{color:var(--red);-webkit-text-stroke-color:var(--red)}
.rcard .face .ph{position:absolute;left:12px;top:12px}
.rcard .face .reach{position:absolute;left:14px;bottom:12px;right:14px;display:flex;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.rcard .nm{display:block;font-family:var(--disp);font-size:34px;line-height:1;margin-top:14px;transition:color .25s}
.rcard .tg{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--d-mute)}
.rcard:hover .nm{color:var(--red)}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid currentColor}
.tiers>div{padding:28px 24px 32px 0;border-bottom:1px solid var(--line)}
.navy .tiers>div{border-color:var(--d-line)}
.tiers .n{font-family:var(--disp);font-size:22px;color:var(--red)}
.tiers h3{font-family:var(--disp);font-weight:400;font-size:clamp(34px,3vw,48px);line-height:.9;margin-top:14px}
.tiers p{margin-top:10px;font-size:15px;color:var(--mute)}
.navy .tiers p{color:var(--d-body)}
.reach4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.reach4>div{border-radius:var(--r);background:var(--navy-2);border:1px solid var(--d-line);padding:24px;display:grid;gap:8px}
.reach4 .n{font-family:var(--disp);font-size:clamp(56px,5.6vw,92px);line-height:.85;color:var(--red)}
.reach4 .l{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff}

/* ---------- work cards (type, not stock imagery) ---------- */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.works.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:clamp(300px,28vw,400px);padding:clamp(24px,2.6vw,34px);border-radius:var(--r);background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.wcard[hidden]{display:none}
.wcard:nth-child(4n+2),.wcard:nth-child(4n+3){background:var(--navy-3)}
.wcard::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1}
.wcard:hover::before,.wcard:focus-visible::before{transform:none}
.wcard .top{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--d-body);transition:color .3s}
.wcard:hover .top{color:#fff}
.wcard .cl{font-family:var(--disp);font-size:clamp(56px,6vw,100px);line-height:.85;text-transform:uppercase}
.wcard .t{font-size:15px;color:var(--d-body);max-width:40ch;margin-top:12px;transition:color .3s}
.wcard:hover .t{color:#fff}
.wcard .m{display:flex;align-items:baseline;gap:14px;margin-top:22px}
.wcard .m b{font-family:var(--disp);font-weight:400;font-size:clamp(44px,4vw,64px);line-height:.85;color:var(--red);transition:color .3s}
.wcard:hover .m b{color:var(--navy)}
.wcard .m span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;max-width:20ch}
.wcard .m .ph{align-self:center}
.wcard:hover .ph{color:#fff;border-color:#fff}

/* ---------- news ---------- */
.shows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.showcard{border-radius:var(--r);overflow:hidden;background:var(--white);color:var(--ink);display:grid;grid-template-rows:auto 1fr;transition:transform .5s var(--ease)}
.showcard:hover{transform:translateY(-4px)}
.showcard .shot{aspect-ratio:16/9;background:#111;overflow:hidden;position:relative}
.showcard .shot img{width:100%;height:100%;object-fit:cover}
.showcard .tx{padding:24px 26px 28px;display:grid;gap:10px;align-content:start}
.showcard h3{font-family:var(--disp);font-weight:400;font-size:clamp(44px,3.8vw,64px);line-height:.86}
.showcard p{color:var(--mute);font-size:15px}
.showcard .lab{color:var(--red)}
.items a{display:grid;grid-template-columns:130px minmax(0,1fr) 24px;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);transition:color .25s}
.items a:first-child{border-top:2px solid var(--ink)}
.items .dt{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.items .tt{font-family:var(--disp);font-size:clamp(26px,2.2vw,34px);line-height:.95;text-transform:uppercase}
.items .ar{color:var(--red);transition:transform .35s var(--ease)}
.items a:hover{color:var(--red)}
.items a:hover .ar{transform:translate(3px,-3px)}
.subbox{border-radius:var(--r);background:var(--red);color:#fff;padding:clamp(26px,3vw,40px)}
.subbox .disp{font-size:clamp(46px,4.4vw,72px)}
.subbox p{margin-top:10px;color:#fff}
.subrow{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.subrow input{flex:1 1 220px;min-width:0;height:52px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);padding:0 22px;color:#fff;font-weight:600}
.subrow input::placeholder{color:rgba(255,255,255,.8)}
.subrow input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.2)}
.subrow .btn{background:var(--navy)}
.subrow .btn:hover{background:#fff;color:var(--navy)}
.light-sub .subrow input{border-color:var(--line-2);background:var(--white);color:var(--ink)}
.light-sub .subrow input::placeholder{color:var(--mute)}
.light-sub .subrow input:focus{border-color:var(--red)}
.sub-ok{margin-top:14px;font-weight:700;display:none}
.sub-ok.show{display:block}
.postgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--ink)}
.post{display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:28px 28px 30px 0;border-bottom:1px solid var(--line);min-height:220px}
.post:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}
.post .dt{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.post h3{font-family:var(--disp);font-weight:400;font-size:clamp(34px,3vw,48px);line-height:.92;margin-top:12px;transition:color .25s}
.post .rd{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.post:hover h3{color:var(--red)}

/* ---------- vs table + fit ---------- */
.vs{border-top:2px solid var(--ink)}
.vsrow{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.vsrow>div{padding:18px 20px 18px 0}
.vsrow>div:first-child{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);align-self:center}
.vsrow>div:nth-child(2){color:var(--mute);text-decoration:line-through;text-decoration-color:rgba(255,67,67,.6)}
.vsrow>div:nth-child(3){font-weight:700;padding-left:20px;border-left:3px solid var(--red)}
.vshead>div{font-size:11px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase;text-decoration:none!important;color:var(--ink)!important}
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.fit h3{font-family:var(--disp);font-weight:400;font-size:40px;line-height:1;margin-bottom:14px}
.fit ul{list-style:none;border-top:2px solid var(--ink)}
.fit li{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:15px 0;border-bottom:1px solid var(--line);font-weight:600}
.fit .no b{color:var(--red)}

/* ---------- voice console ---------- */
.console{background:var(--navy-2);color:#fff;border-radius:var(--r);padding:24px;border:1px solid var(--d-line)}
.chead{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--d-body)}
.cdot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:ping 2.2s ease-out -1s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,67,67,.55)}80%,100%{box-shadow:0 0 0 10px rgba(255,67,67,0)}}
.bub{max-width:86%;padding:12px 15px;border-radius:14px;font-size:14.5px;line-height:1.5;margin-top:10px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.bub.a{background:rgba(255,255,255,.08);border-bottom-left-radius:4px}
.bub.b{background:var(--red);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.console.in .bub{opacity:1;transform:none}
.console.in .bub:nth-of-type(2){transition-delay:.7s}
.console.in .bub:nth-of-type(3){transition-delay:1.6s}
.cfoot{margin-top:16px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);opacity:0;transition:opacity .6s var(--ease) 2.4s}
.console.in .cfoot{opacity:1}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.team.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.team .ph-face{aspect-ratio:4/5;border-radius:var(--r);background:var(--navy-3);display:grid;place-items:center;position:relative;overflow:hidden}
.team .ph-face span:not(.ph){font-family:var(--disp);font-size:clamp(64px,6vw,100px);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.3)}
.team .ph-face .ph{position:absolute;left:10px;top:10px}
.team h3{font-family:var(--disp);font-weight:400;font-size:32px;line-height:1;margin-top:14px}
.team p{font-size:13px;font-weight:600;color:var(--mute)}
.navy .team p{color:var(--d-body)}

/* ---------- faq ---------- */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 34px;gap:20px;align-items:center;padding:22px 0;font-weight:700;font-size:17px;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq details p{color:var(--mute);padding:0 50px 24px 0;max-width:66ch}

/* ---------- closer + form ---------- */
.ask{list-style:none;margin-top:30px;border-top:1px solid var(--d-line)}
.ask li{padding:14px 0;border-bottom:1px solid var(--d-line);font-weight:600;font-size:clamp(16px,1.3vw,19px);color:var(--d-body);display:flex;gap:16px}
.ask li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;margin-top:.6em}
.take{font-family:var(--disp);font-size:clamp(48px,5vw,84px);line-height:.9;margin-top:36px;text-transform:uppercase}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;background:var(--white);color:var(--ink);border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;height:52px;background:var(--paper);border:1.5px solid transparent;border-radius:8px;padding:0 16px;font-size:16px;font-weight:500;color:var(--ink);transition:border-color .25s,background .25s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23090E33' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field textarea{height:auto;min-height:130px;padding:14px 16px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);background:#fff}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--red)}
.svc-pick{display:none;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;background:rgba(255,67,67,.1);color:var(--red);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.svc-pick.show{display:flex}
.form .submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form .submit .btn{height:54px;padding:0 28px}
.form .fine{font-size:13px;color:var(--mute)}
.form-ok{display:none;border-radius:var(--r);background:var(--red);color:#fff;padding:clamp(28px,3vw,44px)}
.form-ok.show{display:block;animation:okin .6s var(--ease) both}
.form-ok .disp{font-size:clamp(48px,5vw,80px);margin:8px 0 12px}
.form-ok p{color:#fff}
@keyframes okin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
form.sent{display:none}
.contact-line{margin-top:28px;display:grid;gap:8px;font-weight:700}
.contact-line a{border-bottom:2px solid var(--red);justify-self:start}

/* ---------- case study + service ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-bottom:26px}
.crumbs a:hover{color:var(--red);opacity:1}
.cmeta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--d-line);margin-top:48px}
.cmeta>div{padding:18px 18px 0 0}
.cmeta dt{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--d-mute);margin-bottom:8px}
.cmeta dd{font-weight:700;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cmeta dd>a:not(.tag){border-bottom:2px solid var(--red)}
.big-p{font-family:var(--disp);font-size:clamp(38px,3.8vw,62px);line-height:.95;text-transform:uppercase;max-width:18ch}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gal .slot:first-child{grid-column:1/-1;aspect-ratio:21/9}
.quote .qm{font-family:var(--disp);font-size:160px;line-height:.6;color:var(--red);height:70px}
.quote blockquote{font-family:var(--disp);font-size:clamp(44px,4.8vw,80px);line-height:.95;text-transform:uppercase;max-width:22ch}
.quote .who{margin-top:24px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--mute)}
.nextcase{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding:30px 0;border-block:2px solid var(--ink);transition:color .3s}
.nextcase .lab{color:var(--mute)}
.nextcase .disp{font-size:clamp(56px,8vw,130px)}
.nextcase:hover{color:var(--red)}
.demo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px;padding:22px 26px;border-radius:var(--r);background:var(--navy);color:#fff}
.demo-play{width:60px;height:60px;border-radius:50%;border:0;background:var(--red);display:grid;place-items:center;flex:none;opacity:.85;cursor:not-allowed}
.demo-play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.demo-tx{flex:1 1 320px;display:grid;gap:6px}
.demo-tx b{font-family:var(--disp);font-size:32px;font-weight:400;line-height:1}
.wave{display:flex;align-items:center;gap:3px;height:28px;margin-top:6px}
.wave i{display:block;flex:1;max-width:5px;height:var(--h);border-radius:2px;background:var(--red);opacity:.8;animation:wave 1.6s ease-in-out var(--d) infinite}
@keyframes wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.svc-card{border-radius:var(--r);background:var(--navy-2);border:1px solid var(--d-line);padding:clamp(24px,3vw,36px);display:grid;gap:18px}
.svc-card .lock{font-size:26px;margin:0}
.svc-card ul{list-style:none;border-top:1px solid var(--d-line)}
.svc-card li a{padding:13px 0;border-bottom:1px solid var(--d-line);font-weight:700;display:flex;justify-content:space-between;transition:color .25s}
.svc-card li a span{color:var(--red)}
.svc-card li a:hover,.svc-card li a[aria-current]{color:var(--red)}
.strip{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:clamp(26px,3vw,40px);border-radius:var(--r);background:var(--red);color:#fff;margin-top:clamp(40px,5vw,64px)}
.strip h3{font-family:var(--disp);font-weight:400;font-size:clamp(36px,3.4vw,56px);line-height:.92;max-width:22ch}
.strip p{margin-top:8px;max-width:52ch;color:#fff}
.strip .bk .b,.strip .bk .ar{color:var(--navy)}
.rstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rstrip a{display:grid;gap:10px;align-content:start;padding:clamp(24px,2.6vw,34px);border-radius:var(--r);background:var(--white);border:1px solid var(--line);transition:border-color .3s,transform .4s var(--ease)}
.rstrip a:hover{border-color:var(--red);transform:translateY(-3px)}
.rstrip .who{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.rstrip .n{font-family:var(--disp);font-size:clamp(64px,6vw,100px);line-height:.85;margin-top:12px}
.rstrip .l{font-weight:600;color:var(--mute)}
.rstrip .go{margin-top:10px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.quotes figure{display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:clamp(24px,2.6vw,34px);border-radius:var(--r);background:var(--navy-2);border:1px solid var(--d-line)}
.quotes blockquote{font-family:var(--disp);font-size:clamp(30px,2.4vw,40px);line-height:.98;text-transform:uppercase}
.quotes figcaption{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:700}
.quotes figcaption .who{display:grid;gap:2px}
.quotes figcaption small{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--d-mute)}
.av{width:40px;height:40px;border-radius:50%;background:var(--navy-3);border:1.5px dashed rgba(255,67,67,.6);flex:none}
.lwall-img{border-radius:var(--r);background:#fff;padding:clamp(18px,2.4vw,36px);border:1px solid var(--line);display:grid;place-items:center}
.lwall-img img{width:100%;max-width:640px;height:auto}
.story .body p{font-size:clamp(17px,1.4vw,19px);line-height:1.75;max-width:62ch}
.story .body p.dim{color:var(--mute)}
.sig{font-family:var(--disp);font-size:56px;line-height:1;margin-top:18px;color:var(--red)}
.acad{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);border-radius:var(--r);overflow:hidden;background:var(--red);color:#fff}
.acad .txt{padding:clamp(28px,4vw,56px)}
.acad .txt .disp{font-size:clamp(46px,4.4vw,76px);margin-top:14px}
.acad .txt p{margin-top:14px;max-width:44ch;color:#fff}
.acad .panel{background:var(--navy);display:grid;place-items:center;padding:30px}
.acad .panel .lock{font-size:clamp(28px,2.6vw,40px)}
.imgcard{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line)}
.imgcard img{width:100%;height:auto}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#fff;padding:clamp(64px,8vw,110px) 0 28px;position:relative;overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px}
.foot .brand .word{color:#fff;font-size:26px}
.foot p{color:var(--d-body);font-size:14.5px;max-width:34ch;margin-top:16px}
.foot h2{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.foot ul{list-style:none}
.foot li a{display:inline-block;padding:6px 0;font-weight:600;font-size:14.5px;color:var(--d-body);transition:color .2s}
.foot li a:hover{color:#fff}
.foot .contact a{color:#fff;border-bottom:2px solid var(--red)}
.foot-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:center;margin-top:clamp(48px,6vw,80px);padding:clamp(24px,3vw,36px);border-radius:var(--r);background:var(--navy-2);border:1px solid var(--d-line)}
.foot-sub .disp{font-size:clamp(34px,3vw,48px)}
.foot-sub .subrow{margin-top:0}
.foot-sub .subrow input{border-color:var(--d-line);background:rgba(255,255,255,.06)}
.foot-sub .subrow .btn{background:var(--red)}
.megafoot{font-family:var(--disp);text-transform:uppercase;line-height:.8;font-size:clamp(90px,19.5vw,330px);margin-top:clamp(56px,7vw,100px);white-space:nowrap;user-select:none;display:flex;justify-content:space-between;gap:.18em}
.megafoot span::before{content:attr(data-t)}
.megafoot span:first-child{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.2)}
.megafoot span:last-child{color:var(--red)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--d-line);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--d-mute)}
.legal a:hover{color:#fff}
.legal .mw{text-transform:none;letter-spacing:0;font-size:12px;color:#fff}
.legal .mw b{font-weight:800}
.fab{position:fixed;right:22px;bottom:22px;z-index:55;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s;box-shadow:0 16px 36px rgba(9,14,51,.3)}
.fab.show{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}

/* ---------- motion ---------- */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-old(root){animation:vt-out .25s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
.js .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-s>*{opacity:0;transform:translate3d(0,24px,0);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv-s.in>*{opacity:1;transform:none}
.js .rv-s.in>*:nth-child(2){transition-delay:.07s}
.js .rv-s.in>*:nth-child(3){transition-delay:.14s}
.js .rv-s.in>*:nth-child(4){transition-delay:.21s}
.js .rv-s.in>*:nth-child(5){transition-delay:.28s}
.js .rv-s.in>*:nth-child(6){transition-delay:.35s}
.js .rv-s.in>*:nth-child(n+7){transition-delay:.4s}
.js .rv-s.done>*,.js .rv-s.done>*:nth-child(n){transition-delay:0s!important}
.js .lines .ln{display:block;overflow:hidden;padding:.06em 0 .02em;margin:-.06em 0 -.02em}
.js .lines .ln>span{display:block;transform:translate3d(0,108%,0);transition:transform 1.05s var(--ease)}
.js .lines.in .ln>span{transform:none}
.js .lines.in .ln:nth-child(2)>span{transition-delay:.08s}
.js .lines.in .ln:nth-child(3)>span{transition-delay:.16s}
.js .lines.in .ln:nth-child(4)>span{transition-delay:.24s}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.anim-off .track{animation-play-state:paused}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .mega,.nav-in>.btn{display:none}
  .burger{display:flex}
  .split,.head,.div-panel,.hero-foot,.pgrid2,.acad,.foot-sub{grid-template-columns:1fr}
  .head .lede,.hero-foot .tag{justify-self:start;text-align:left}
  .mx,.mx.c4,.xcards,.tiers,.quotes,.rstrip,.works.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bigstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bigstats>div,.bigstats>div:nth-child(4),.bigstats>div:nth-child(5){grid-column:span 1}
  .bigstats>div:last-child{grid-column:1/-1}
  .model{grid-template-columns:repeat(2,minmax(0,1fr))}
  .model>div{border-right:0;padding-left:0;border-bottom:1px solid var(--line)}
  .rgrid,.reach4,.team,.team.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-top>div:first-child{grid-column:1/-1}
  .svc9 summary,.svc9 .body{grid-template-columns:56px minmax(0,1fr) 40px}
  .svc9 summary .k{display:none}
  .svc9 .body p,.svc9 .body a{grid-column:2}
  .step{grid-template-columns:52px minmax(0,1fr)}
  .step p{grid-column:2}
  .fly{margin:0 auto}
}
@media (max-width:720px){
  .mx,.mx.c2,.mx.c4,.xcards,.tiers,.quotes,.rstrip,.works,.works.c3,.shows,.postgrid,.fit,.gal,.form,.cmeta{grid-template-columns:1fr}
  .post:nth-child(even){padding-left:0;border-left:0}
  .items a{grid-template-columns:1fr 24px}
  .items .dt{grid-column:1/-1}
  .vsrow{grid-template-columns:1fr 1fr}
  .vsrow>div:first-child{grid-column:1/-1;padding-bottom:2px}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fab{right:14px;bottom:14px}
  .hero h1{font-size:clamp(66px,20vw,110px)}
  .faq details p{padding-right:0}
  .model{grid-template-columns:1fr}
  .megafoot{font-size:18vw}
}
@media (max-width:480px){.rgrid,.reach4,.team,.team.c5{grid-template-columns:1fr 1fr;gap:10px}.bigstats{grid-template-columns:1fr}}
@media (pointer:coarse){.fbtn{min-height:44px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .rv,.js .rv-s>*,.js .lines .ln>span{opacity:1!important;transform:none!important}
  .console .bub,.console .cfoot{opacity:1;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* v2 fixes */
.navy .bk,.hero .bk{color:#fff}
.navy .take{color:#fff}
.works.c3 .wcard .cl{font-size:clamp(44px,4.4vw,74px)}
.wcard .cl{overflow-wrap:anywhere}
.megafoot{justify-content:flex-start;gap:.14em}
.fly .t1{font-size:11px;letter-spacing:.02em}
@media (max-width:720px){.fly-list a{grid-template-columns:44px minmax(0,1fr);row-gap:4px}.fly-list a small{grid-column:2}}

/* =====================================================================
   Phone layer. Everything below tunes the site for thumbs and small screens.
   ===================================================================== */
.model.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rcard .face .reach{gap:10px}
.rcard .face .reach span:last-child{text-align:right}
@media (max-width:1080px){.model.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:720px){
  :root{--gut:18px}
  body{font-size:15.5px}
  .sec{padding:64px 0}
  .sec.tight{padding:44px 0}
  .sec.flush{padding-top:0}
  .head{margin-bottom:28px;gap:14px}
  .sl{margin-bottom:14px}
  .lede{font-size:16.5px}

  /* shorter nav, menu sits right under it */
  .nav-in{height:64px}
  .mmenu{inset:64px 0 0 0}
  .brand .word{font-size:20px}
  .brand svg{width:26px;height:26px}
  .burger{width:44px;height:44px}

  /* the decorative F watermark crowds the buttons on a phone */
  .wm{display:none}
  .hide-m{display:none!important}

  /* primary action becomes a real thumb button: the first bracket link in every row */
  .row{gap:4px 20px}
  .row .bk:first-child{width:100%;justify-content:center;background:var(--red);color:#fff;border-radius:999px;padding:17px 22px;font-size:13px;margin-bottom:6px}
  .row .bk:first-child .b{display:none}
  .row .bk:first-child .ar{color:#fff}
  .row .bk:first-child .t{background:none}
  .navy .row .bk:first-child:active,.row .bk:first-child:active{background:var(--red-2)}
  .row .bk:not(:first-child){padding:10px 2px}

  /* heroes: fill the first screen, tighter spacing */
  .hero{min-height:calc(100svh - 64px);padding-top:36px}
  .hero h1{font-size:clamp(64px,19vw,96px)}
  .hero-foot{margin-top:26px;gap:22px;padding-bottom:26px}
  .hero-foot .lede{font-size:16px}
  .hero-foot .tag{font-size:30px}
  .phero{padding:44px 0 52px}
  .phero h1{font-size:clamp(54px,15.5vw,84px)}
  .phero .lock{font-size:21px;margin-bottom:16px}
  .phero .kick2{font-size:11px;margin-bottom:12px}
  .pgrid2{margin-top:22px;gap:24px}
  .marq{padding:14px 0}
  .marq.small .track span{font-size:24px;gap:30px;padding:0 15px}

  /* stats read in pairs instead of one per screen */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));border-top-width:2px}
  .stats>div{padding:20px 12px 18px 0;border-bottom:1px solid var(--line)}
  .navy .stats>div{border-color:var(--d-line)}
  .stats .n{font-size:clamp(50px,15vw,68px)}
  .stats .l{font-size:10.5px;letter-spacing:.12em;margin-top:8px}
  .bigstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bigstats>div,.bigstats>div:nth-child(4),.bigstats>div:nth-child(5){grid-column:span 1;padding:20px 12px 22px 0}
  .bigstats>div:last-child{grid-column:1/-1}
  .bigstats .n{font-size:clamp(56px,17vw,80px)}
  .bigstats .l{font-size:10.5px;letter-spacing:.12em}

  /* division sections: number and lockup share one line */
  .div-panel{gap:22px}
  .div-panel>div:first-child{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px}
  .div-panel .num{font-size:96px;-webkit-text-stroke-width:1.5px}
  .div-panel .lock{font-size:22px;margin:0 0 12px}
  .div-panel .stat{width:100%;margin:6px 0 0;gap:26px}
  .div-panel .stat b{font-size:52px}
  .div-panel h2{font-size:clamp(50px,14vw,72px);margin-bottom:16px}
  .div-panel .pull{font-size:25px}
  .svc-list{margin-top:24px}
  .svc-list a{padding:14px 0;font-size:15px}

  /* swipe rows: cards peek so it is obvious there is more */
  .swipe{display:flex!important;grid-template-columns:none!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 6px;scroll-padding:0 var(--gut);scrollbar-width:none;border-top:0!important}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:0 0 84%;scroll-snap-align:start}
  .swipe.tiers>div{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px}
  .navy .swipe.tiers>div{background:var(--navy-2);border-color:var(--d-line)}
  .wcard{min-height:340px;gap:26px}
  .wcard .cl,.works.c3 .wcard .cl{font-size:clamp(46px,13vw,64px)}
  .showcard h3{font-size:38px}
  .swipe-hint{display:flex}

  /* lists and grids */
  .biglist li{font-size:30px;padding:11px 0}
  .fly-list a{padding:15px 0}
  .fly-list a .lock{font-size:20px}
  .mx>*{padding:22px 0 24px}
  .mx h3{font-size:34px}
  .mx .n{margin-bottom:14px}
  .model>div{padding:20px 0 22px}
  .model .n{font-size:44px}
  .model.c4{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .step{padding:18px 0;gap:6px 14px}
  .step h3{font-size:28px}
  .svc9 summary{grid-template-columns:44px minmax(0,1fr) 34px;padding:17px 0}
  .svc9 summary .t{font-size:30px}
  .svc9 .body{grid-template-columns:44px minmax(0,1fr);padding-bottom:20px}
  .svc9 .body p,.svc9 .body a{grid-column:2}
  .xcard summary{padding:22px 20px 18px}
  .xcard .more{padding:0 20px 22px}
  .xcard h3{font-size:44px}
  .faq summary{font-size:16px;padding:18px 0}

  /* roster: filters scroll sideways, cards stay two up */
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gut) * -1) 20px;padding:0 var(--gut) 4px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .fbtn{flex:none}
  .rgrid{gap:10px}
  .rcard .face .ini{font-size:84px}
  .rcard .face .reach{font-size:9px;letter-spacing:.1em;left:10px;right:10px;bottom:10px}
  .rcard .face .reach span:last-child{display:none}
  .rcard .face .ph{left:8px;top:8px}
  .rcard .nm{font-size:26px;margin-top:10px}
  .rcard .tg{font-size:9.5px}
  .reach4{gap:10px}
  .reach4>div{padding:18px}
  .reach4 .n{font-size:52px}
  .team,.team.c5{gap:12px}
  .team h3{font-size:26px}

  /* forms: bigger targets, no zoom on focus (16px inputs) */
  .form{padding:20px;gap:16px}
  .field input,.field select{height:54px}
  .form .submit .btn{width:100%;height:56px}
  .form .fine{width:100%;text-align:center}
  .ask li{font-size:16px;padding:12px 0}
  .take{font-size:46px;margin-top:26px}
  .contact-line{margin-top:20px}

  /* case study + service pages */
  .cmeta{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px}
  .big-p{font-size:34px}
  .quote blockquote{font-size:38px}
  .quote .qm{font-size:110px;height:48px}
  .nextcase .disp{font-size:52px}
  .strip{flex-direction:column;align-items:flex-start;padding:24px}
  .strip h3{font-size:36px}
  .svc-card{padding:22px}
  .demo{padding:18px}

  /* footer */
  .foot{padding:56px 0 24px}
  .foot-top{gap:28px 20px}
  .foot-sub{padding:20px;margin-top:40px}
  .foot-sub .subrow .btn{width:100%}
  .subrow input{flex-basis:100%}
  .subrow .btn{width:100%;height:52px}
  .megafoot{font-size:21vw;margin-top:44px}
  .legal{flex-direction:column;gap:8px;padding-bottom:76px}

  /* sticky call button: full width bar, clear of the content */
  .fab{left:14px;right:14px;bottom:12px;height:54px;width:auto;font-size:13px}
}
@media (max-width:380px){
  .hero h1{font-size:60px}
  .phero h1{font-size:50px}
  .stats .n{font-size:46px}
  .bigstats .n{font-size:52px}
}
@media (pointer:coarse){.brand{min-height:44px}.contact-line a,.crumbs a,.legal a{display:inline-block;padding:10px 0}}

/* ---------- reel card + lightbox ---------- */
.reel{display:block;width:100%;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;font:inherit}
.reel-frame{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-radius:14px;overflow:hidden;isolation:isolate;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 14px,transparent 14px 28px),linear-gradient(160deg,#182056,#0F1542 60%,#2a1030);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.reel-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(255,67,67,.22),transparent 70%);opacity:.6;transition:opacity .5s var(--ease);z-index:-1}
.reel:hover .reel-frame,.reel:focus-visible .reel-frame{transform:translateY(-4px) scale(1.01);box-shadow:0 50px 90px -30px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,67,67,.5)}
.reel:hover .reel-frame::after{opacity:1}
.reel-lock{position:absolute;left:18px;top:16px;font-size:15px;opacity:.9}
.reel-frame>.ph{position:absolute;right:14px;top:14px}
.reel-play{position:relative;width:86px;height:86px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:transform .5s var(--ease)}
.reel-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,67,67,.55);animation:reelping 2.6s var(--ease) -.8s infinite}
.reel-play i{display:block;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff;margin-left:6px}
.reel:hover .reel-play{transform:scale(1.08)}
@keyframes reelping{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.45);opacity:0}}
.reel-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.reel-cap .lab{color:#fff;display:flex;align-items:center;gap:10px}
.reel-cap .lab::before{content:"";width:22px;height:2px;background:var(--red)}
.reel-cap .dur{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--d-body)}
.hero-reel{position:absolute;right:var(--gut);top:clamp(150px,19vw,250px);width:min(33vw,470px);z-index:2}
.hero .wm{z-index:0}

.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.lb::backdrop{background:rgba(5,8,28,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s var(--ease)}
.lb.on::backdrop{opacity:1}
.lb-in{position:absolute;left:50%;top:50%;width:min(1180px,calc(100vw - 32px),calc((100svh - 150px) * 16 / 9));transform:translate(-50%,-46%) scale(.96);opacity:0;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.lb.on .lb-in{opacity:1;transform:translate(-50%,-50%)}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.lb-title{color:#fff}
.lb-x{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:transparent;cursor:pointer;position:relative;flex:none;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.lb-x span::before,.lb-x span::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:#fff;transform:translate(-50%,-50%) rotate(45deg)}
.lb-x span::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lb-x:hover{background:var(--red);border-color:var(--red);transform:rotate(90deg)}
.lb-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 60px 120px -30px rgba(0,0,0,.8)}
.lb-frame iframe,.lb-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-soon{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:repeating-linear-gradient(135deg,var(--navy-2) 0 16px,var(--navy-3) 16px 32px)}
.lb-soon .disp{font-size:clamp(44px,6vw,96px);line-height:.9}
.lb-soon p{color:var(--d-body);margin:14px auto 0;max-width:44ch}
.lb-soon .ph{margin-bottom:18px}
html.lb-open,html.lb-open body{overflow:hidden}

@media (max-width:1080px){
  .hero-reel{position:static;width:100%;max-width:560px;margin-top:30px}
}
@media (max-width:720px){
  .hero-reel{margin-top:24px}
  .reel-play{width:68px;height:68px}
  .reel-play i{border-width:11px 0 11px 17px}
  .reel-lock{font-size:13px;left:14px;top:12px}
  .lb-in{width:calc(100vw - 20px)}
  .lb-x{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.reel-play::before{animation:none;opacity:0}}
.lb-soon .disp{color:#fff}
@media (max-width:720px){.lb-soon .disp{font-size:40px}.lb-soon p:not(.disp){display:none}.lb-soon .ph{margin-bottom:10px}}
/* hero v3: smaller headline, reel pinned to the bottom right of the first screen */
.hero{padding-top:clamp(28px,4vw,64px)}
.hero-grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) min(31vw,440px);gap:40px clamp(32px,4vw,64px);align-items:end;padding-bottom:clamp(22px,2.6vw,36px);width:100%}
.hero-main{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.hero h1{font-size:clamp(58px,min(9.6vw,13vh),168px);max-width:none;margin-top:14px}
.hero-copy .lede{color:var(--d-body);max-width:46ch}
.hero-copy .row.mt{margin-top:22px}
.hero-side{display:grid;gap:22px;justify-items:end;align-self:end}
.hero-side .tag{font-family:var(--disp);font-size:clamp(28px,2.4vw,40px);line-height:.95;text-align:right}
.hero-side .tag span{display:block}
.hero .hero-reel{position:static;width:100%;max-width:none;margin:0}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .hero-side{justify-items:start;width:100%;max-width:560px}
  .hero-side .tag{text-align:left}
}
@media (max-width:720px){
  .hero h1{font-size:clamp(54px,16.5vw,84px)}
  .hero-grid{gap:28px}
  .hero-side{gap:18px}
  .hero-side .tag{font-size:28px}
}
/* hero v4: reel flush in the bottom right corner of the first screen, like the reference */
.hero{min-height:calc(100svh - 76px)}
.hero .hero-reel{position:absolute;right:0;bottom:0;width:min(36vw,620px);z-index:3;margin:0}
.reel.corner{position:relative;display:block}
.reel.corner .reel-frame{border-radius:28px 0 0 0;aspect-ratio:16/10;box-shadow:none;border:0}
.reel.corner:hover .reel-frame,.reel.corner:focus-visible .reel-frame{transform:none;box-shadow:inset 0 0 0 2px rgba(255,67,67,.6)}
.reel.corner .reel-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,8,28,.75));z-index:0}
.reel.corner .reel-play,.reel.corner .reel-lock,.reel.corner .reel-frame>.ph{z-index:1}
.reel.corner .reel-cap{position:absolute;left:24px;right:24px;bottom:18px;margin:0;z-index:2}
.reel.corner .reel-play{transition:transform .5s var(--ease)}
.reel.corner:hover .reel-play{transform:scale(1.1)}
/* keep the tag clear of the reel: it sits just above the reel's top edge */
.hero-side{padding-bottom:calc(min(36vw,620px) * 10 / 16 - clamp(22px,2.6vw,36px) + 26px)}
.hero-grid{grid-template-columns:minmax(0,1fr) min(36vw,620px);padding-right:0}
.hero-side .tag{padding-right:var(--gut)}
@media (min-width:1361px){.hero-side .tag{padding-right:0}}
@media (max-width:1080px){
  .hero .hero-reel{position:relative;width:100%;margin-top:32px}
  .reel.corner .reel-frame{border-radius:0;aspect-ratio:16/9}
  .hero-side{padding-bottom:0}
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .reel.corner .reel-cap{left:16px;right:16px;bottom:12px}
  .hero .hero-reel{margin-top:26px}
}
.hero .hero-reel{top:auto}
/* hero v5: tagline rides on top of the corner reel */
.hero-grid{grid-template-columns:minmax(0,1fr) min(36vw,620px)}
.hero .hero-reel .tag{position:absolute;right:28px;bottom:100%;margin:0 0 24px;font-family:var(--disp);font-size:clamp(28px,2.4vw,40px);line-height:.95;text-align:right;color:#fff}
.hero .hero-reel .tag span{display:block}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr}
  .hero .hero-reel .tag{position:static;text-align:left;margin:0 0 20px;padding:0 var(--gut)}
}

/* ---------- stats bento ---------- */
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:14px}
.bt{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:34px;padding:clamp(22px,2.4vw,34px);border-radius:14px;overflow:hidden;isolation:isolate;min-height:clamp(230px,20vw,300px);transition:transform .5s var(--ease)}
.bt:hover{transform:translateY(-4px)}
.bt .k{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1.5px solid currentColor;opacity:.85}
.bt .n{font-family:var(--disp);font-size:clamp(70px,7.4vw,124px);line-height:.82}
.bt .l{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-top:12px;max-width:26ch;line-height:1.4}
.bt p{font-size:14.5px;line-height:1.55;margin-top:12px;max-width:38ch;opacity:.85}
.bt-a{grid-row:1/3;background:var(--navy);color:#fff}
.bt-a .n{font-size:clamp(110px,13vw,230px);color:var(--red)}
.bt-a p{color:var(--d-body);opacity:1}
.bt-a::after{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23FF4343' fill-opacity='.12' d='M8 2h16a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H14.5L8.6 31a.8.8 0 0 1-1.3-.6V26A6 6 0 0 1 2 20V8a6 6 0 0 1 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;z-index:-1;transition:transform 1s var(--ease)}
.bt-a:hover::after{transform:rotate(-10deg) scale(1.08)}
.bt-b{background:var(--white);border:1px solid var(--line);color:var(--ink)}
.bt-c{background:var(--red);color:#fff}
.bt-d{background:var(--navy-3);color:#fff}
.bt-d .n{color:var(--red)}
.bt-e{background:var(--white);border:1px solid var(--line);color:var(--ink)}
.bt-e .n,.bt-b .n{color:var(--ink)}
.bt-e .n{color:var(--red)}
.bento .bt-b{grid-column:2/4}
@media (max-width:1080px){
  .bento{grid-template-columns:1fr 1fr}
  .bt-a{grid-row:auto;grid-column:1/-1}
  .bento .bt-b{grid-column:1/-1}
}
@media (max-width:720px){
  .bento{gap:10px}
  .bt{min-height:0;gap:22px;padding:18px}
  .bt .n{font-size:clamp(54px,15vw,72px)}
  .bt-a .n{font-size:clamp(88px,26vw,120px)}
  .bt .l{font-size:10.5px;letter-spacing:.12em}
  .bt p{font-size:13px}
  .bt-c p,.bt-d p{display:none}
}
.bento{grid-template-columns:1.35fr 1fr 1fr 1fr}
.bento .bt-a{grid-column:1;grid-row:1/3}
.bento .bt-b{grid-column:2/4;grid-row:1}
.bento .bt-e{grid-column:4;grid-row:1}
.bento .bt-c{grid-column:2;grid-row:2}
.bento .bt-d{grid-column:3/5;grid-row:2}
@media (max-width:1080px){
  .bento{grid-template-columns:1fr 1fr}
  .bento .bt-a{grid-column:1/-1;grid-row:auto}
  .bento .bt-b,.bento .bt-e,.bento .bt-c{grid-column:auto;grid-row:auto}
  .bento .bt-d{grid-column:1/-1;grid-row:auto}
}
/* hero v6: big headline back, no paragraph, clean reel with just the play button */
.hero h1{font-size:clamp(78px,min(12.4vw,19.5vh),210px);max-width:10.5ch}
.reel.corner .reel-cap,.reel.corner .reel-lock{display:none}
.reel.corner .reel-frame::before{background:none}
.reel.corner .reel-play{width:96px;height:96px}
.bt-a .n{font-size:clamp(96px,9.4vw,168px)}
@media (max-width:720px){
  .hero h1{font-size:clamp(66px,20vw,110px)}
  .reel.corner .reel-play{width:72px;height:72px}
  .bt-a .n{font-size:clamp(88px,26vw,120px)}
}
.hero h1{max-width:none}
.hero-grid{grid-template-columns:1fr!important}
/* ---------- selected work inside division panels ---------- */
.div-panel{grid-template-rows:auto 1fr}
.div-panel>div:nth-child(2){grid-column:2;grid-row:1/3}
.dp-work{grid-column:1;grid-row:2;align-self:end}
.dp-work-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px;padding-top:18px;border-top:1px solid var(--line)}
.navy .dp-work-head{border-color:var(--d-line)}
.dp-work-head a{color:var(--red);transition:opacity .2s}
.dp-work-head a:hover{opacity:.75}
.dp-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.swork{display:block;color:inherit}
.swork-img{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px),var(--navy-3)}
.swork-img .ph{position:absolute;left:10px;top:10px}
.swork-mark{font-family:var(--disp);font-size:clamp(26px,2.4vw,40px);line-height:.9;text-transform:uppercase;text-align:center;padding:0 14px;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);transition:color .4s,-webkit-text-stroke-color .4s}
.swork-go{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:15px;opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .4s var(--ease),transform .5s var(--ease)}
a.swork:hover .swork-mark{color:#fff;-webkit-text-stroke-color:#fff}
a.swork:hover .swork-go{opacity:1;transform:none}
.swork-t{display:block;font-weight:800;font-size:15px;margin-top:12px;line-height:1.3}
a.swork:hover .swork-t{color:var(--red)}
.swork-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.swork-tags span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--line-2);border-radius:999px;padding:4px 10px}
.navy .swork-tags span{border-color:var(--d-line);color:var(--d-body)}
@media (max-width:1080px){
  .div-panel{grid-template-rows:none}
  .div-panel>div:nth-child(2),.dp-work{grid-column:auto;grid-row:auto}
}
@media (max-width:720px){
  .dp-work-grid{gap:10px}
  .swork-mark{font-size:22px}
  .swork-t{font-size:13.5px}
  .swork-tags span{font-size:9px;padding:3px 8px}
}
/* ---------- media hub (news) ---------- */
.hub{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(24px,3vw,44px);align-items:start}
.hub-main{min-width:0}
.ep-latest-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.navy .ep-latest-head .lab{color:#fff}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--red);animation:ping 2.2s ease-out -1s infinite}
.ep,.ep-latest{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.ep-thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;overflow:hidden;isolation:isolate;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px),linear-gradient(160deg,var(--navy-3),#10164a 60%,#2a1030)}
.ep-thumb>.ph{position:absolute;left:12px;top:12px;z-index:2}
.ep-show{position:absolute;left:16px;bottom:12px;font-family:var(--disp);font-size:clamp(22px,2vw,30px);line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.4);text-transform:uppercase}
.ep-thumb.big .ep-show{font-size:clamp(48px,6vw,96px);left:24px;bottom:18px}
.ep-play{position:relative;width:56px;height:56px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:transform .5s var(--ease)}
.ep-play i{border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:4px}
.ep-thumb.big .ep-play{width:84px;height:84px}
.ep-thumb.big .ep-play i{border-width:13px 0 13px 21px;margin-left:6px}
.ep-thumb.big .ep-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,67,67,.5);animation:reelping 2.6s var(--ease) -.8s infinite}
.ep:hover .ep-play,.ep-latest:hover .ep-play,.ep:focus-visible .ep-play,.ep-latest:focus-visible .ep-play{transform:scale(1.1)}
.ep:hover .ep-show,.ep-latest:hover .ep-show{-webkit-text-stroke-color:rgba(255,255,255,.75)}
.ep-t{display:block;margin-top:12px;font-weight:800;font-size:14.5px;line-height:1.35}
.ep-latest .ep-t{font-family:var(--disp);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:.95;text-transform:uppercase;margin-top:16px}
.ep:hover .ep-t,.ep-latest:hover .ep-t{color:var(--red)}
.ep-row{margin-top:clamp(30px,3.4vw,44px);padding-top:22px;border-top:1px solid var(--d-line)}
.ep-row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.ep-row-head .lab:first-child{color:var(--red)}
.ep-row-head p{font-family:var(--disp);font-size:clamp(24px,2vw,32px);line-height:1;margin-top:6px;color:#fff;text-transform:uppercase}
.ep-row-head a{color:#fff;white-space:nowrap}
.ep-row-head a:hover{color:var(--red)}
.ep-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.subcard{position:sticky;top:100px;background:var(--paper);color:var(--ink);border-radius:14px;padding:clamp(22px,2.4vw,30px);display:grid;gap:14px}
.subcard h3{font-size:clamp(34px,2.8vw,46px);line-height:.92}
.subcard p{color:var(--mute);font-size:14.5px}
.subcard .subrow{margin-top:4px;flex-direction:column}
.subcard .subrow input{flex:none;width:100%;height:50px;border-radius:10px}
.subcard .subrow .btn{width:100%;height:50px;border-radius:10px;background:var(--red)}
.subcard .subrow .btn:hover{background:var(--navy);color:#fff}
.subcard .fine{font-size:12px;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.subcard .sub-ok{color:var(--ink)}
.bh-embed{width:100%;height:180px;border:0;border-radius:10px;background:#fff}
.follow{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.follow .lab{margin-right:auto;color:var(--mute)}
.follow a,.follow .soon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;transition:background .3s}
.follow a:hover{background:var(--red)}
.follow .soon{opacity:.35;cursor:not-allowed}
.follow svg{width:18px;height:18px}
.navy .hub .ph-text{color:var(--d-body)!important}
@media (max-width:1080px){
  .hub{grid-template-columns:1fr}
  .subcard{position:static;max-width:560px}
}
@media (max-width:720px){
  .ep-cards.swipe>*{flex:0 0 78%}
  .ep-row-head p{font-size:22px}
  .ep-thumb.big .ep-show{font-size:44px;left:16px;bottom:12px}
  .ep-thumb.big .ep-play{width:66px;height:66px}
  .ep-latest .ep-t{font-size:26px}
}
/* inner page heroes with a reel: same corner treatment as the homepage */
.phero.has-reel{min-height:calc(100svh - 76px);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(40px,5vw,72px)}
.phero.has-reel .pgrid2{grid-template-columns:minmax(0,1fr);max-width:min(52vw,680px)}
.phero .hero-reel{position:absolute;right:0;bottom:0;width:min(36vw,620px);z-index:3}
.phero.has-reel .wm{display:none}
@media (max-width:1080px){
  .phero.has-reel{min-height:0;padding-bottom:0}
  .phero.has-reel .pgrid2{max-width:none}
  .phero .hero-reel{position:relative;width:100%;margin-top:36px}
}
@media (max-width:720px){.phero .hero-reel{margin-top:28px}}
/* talent hero: reel pinned to the corner, headline sized to fit one screen */
.phero .hero-reel{top:auto}
.phero.has-reel h1{font-size:clamp(58px,min(8.4vw,14vh),150px);max-width:none}
.phero.has-reel .pgrid2{margin-top:clamp(20px,2.4vw,32px)}
.phero.has-reel .lock{margin-bottom:18px}
/* six tile bento (Talent numbers) */
.bento.b6{grid-template-columns:1.35fr 1fr 1fr 1fr}
.bento.b6 .bt-a{grid-column:1;grid-row:1/3}
.bento.b6 .bt-b{grid-column:2;grid-row:1}
.bento.b6 .bt-c{grid-column:3;grid-row:1}
.bento.b6 .bt-e{grid-column:4;grid-row:1}
.bento.b6 .bt-d{grid-column:2/4;grid-row:2}
.bento.b6 .bt-f{grid-column:4;grid-row:2}
.bt-f{background:var(--red);color:#fff}
.bento.b6 .bt-c{background:var(--navy);color:#fff}
.bento.b6 .bt-c .n{color:#fff}
.bento.b6 .bt-e{background:var(--white);border:1px solid var(--line);color:var(--ink)}
.bento.b6 .bt-e .n{color:var(--red)}
@media (max-width:1080px){
  .bento.b6{grid-template-columns:1fr 1fr}
  .bento.b6 .bt-a,.bento.b6 .bt-d{grid-column:1/-1;grid-row:auto}
  .bento.b6 .bt-b,.bento.b6 .bt-c,.bento.b6 .bt-e,.bento.b6 .bt-f{grid-column:auto;grid-row:auto}
}
@media (max-width:720px){.phero.has-reel h1{font-size:clamp(54px,15.5vw,84px)}}
.phero.has-reel .pgrid2{max-width:min(44vw,600px)}
@media (max-width:1080px){.phero.has-reel .pgrid2{max-width:none}}
/* sizzle reel block (Talent, under Reach) */
.sizzle{margin-top:clamp(40px,5vw,72px)}
.reel.wide .reel-frame{aspect-ratio:21/9;border-radius:14px}
.reel.wide .reel-play{width:112px;height:112px}
.reel.wide .reel-play i{border-width:17px 0 17px 27px;margin-left:8px}
.reel.wide .reel-lock{font-size:18px;left:24px;top:22px}
.reel.wide .reel-frame::before{content:"SIZZLE REEL";position:absolute;left:24px;bottom:18px;font-family:var(--disp);font-size:clamp(56px,8vw,140px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.18);z-index:0}
.reel.wide .reel-cap{margin-top:16px}
.phero.has-reel h1{font-size:clamp(56px,min(8vw,13vh),144px)}
@media (max-width:720px){
  .reel.wide .reel-frame{aspect-ratio:16/10}
  .reel.wide .reel-play{width:76px;height:76px}
  .reel.wide .reel-play i{border-width:12px 0 12px 19px;margin-left:6px}
  .reel.wide .reel-frame::before{font-size:52px;left:16px;bottom:12px}
}
.phero.has-reel>.wrap{width:100%}
/* ---------- Creator Studio (centered, Viral Nation style) ---------- */
.studio{background:var(--navy-2);color:#fff;text-align:center;overflow:hidden;isolation:isolate}
.studio::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:linear-gradient(115deg,transparent 49.6%,rgba(255,255,255,.05) 50%,transparent 50.4%) 0 0/340px 340px,
             linear-gradient(65deg,transparent 49.6%,rgba(255,255,255,.04) 50%,transparent 50.4%) 0 0/340px 340px}
.studio::after{content:"";position:absolute;left:50%;top:38%;width:900px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,67,67,.16),transparent);z-index:-1}
.studio-k{color:var(--red);margin-bottom:22px}
.studio h2{font-size:clamp(56px,7.4vw,124px);line-height:.88;max-width:14ch;margin:0 auto}
.studio-p{color:var(--d-body);font-size:clamp(17px,1.4vw,20px);line-height:1.6;max-width:58ch;margin:26px auto 0}
.studio-p.strong{color:#fff;font-weight:700;margin-top:14px}
.studio-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.studio-b1{background:#fff;color:var(--navy);border-radius:10px;height:54px;padding:0 26px}
.studio-b1:hover{background:var(--red);color:#fff}
.studio-b2{background:transparent;color:#fff;border-radius:10px;height:54px;padding:0 26px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.studio-b2:hover{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.studio-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1100px;margin:clamp(48px,5vw,72px) auto 0;padding-top:30px;border-top:1px solid var(--d-line);text-align:left}
.studio-stats b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(38px,3.4vw,54px);line-height:.9;color:#fff}
.studio-stats div:first-child b,.studio-stats div:nth-child(2) b{color:var(--red)}
.studio-stats span{display:block;font-size:13.5px;color:var(--d-body);margin-top:8px;line-height:1.5}

/* ---------- roster photos ---------- */
.rcard .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s var(--ease);filter:grayscale(.15)}
.rcard .face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(9,14,51,.85));pointer-events:none}
.rcard .face .reach{z-index:2}
a.rcard:hover .face img{transform:scale(1.05);filter:none}

/* ---------- brand wall: three category rows ---------- */
.bwall{border-top:1px solid var(--d-line)}
.bw-row{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;border-bottom:1px solid var(--d-line)}
.bw-cat{display:flex;align-items:baseline;gap:10px;padding:26px 0}
.bw-cat .lab{color:#fff}
.bw-cat b{font-family:var(--disp);font-weight:400;font-size:30px;color:var(--red);line-height:1}
.bw-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bw-track{display:flex;width:max-content;gap:12px;padding:18px 0;animation:slide 80s linear infinite}
.bw-row.rev .bw-track{animation-direction:reverse;animation-duration:70s}
.bw-row:nth-child(3) .bw-track{animation-duration:45s}
.bw-row:hover .bw-track{animation-play-state:paused}
.bchip{display:inline-flex;align-items:center;gap:12px;height:62px;padding:0 24px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--d-line);white-space:nowrap;transition:background .3s,border-color .3s}
.bchip svg{width:22px;height:22px;fill:#fff;flex:none}
.bchip span{font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:-.02em;color:#fff}
.bchip:hover{background:rgba(255,67,67,.12);border-color:rgba(255,67,67,.5)}
.anim-off .bw-track{animation-play-state:paused}
@media (max-width:1080px){.studio-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .studio h2{font-size:clamp(48px,13.5vw,70px)}
  .studio-cta .btn{width:100%}
  .studio-stats{gap:20px 14px}
  .bw-row{grid-template-columns:1fr}
  .bw-cat{padding:18px 0 0}
  .bchip{height:52px;padding:0 18px}
  .bchip span{font-size:15px}
}
/* inner heroes fit one desktop screen */
@media (min-width:1081px){
  .phero:not(.has-reel){padding:clamp(40px,5vw,80px) 0 clamp(40px,4.5vw,72px)}
  .phero:not(.has-reel) h1{font-size:clamp(52px,min(8.4vw,12.5vh),150px);max-width:none}
  .phero:not(.has-reel) .pgrid2{margin-top:clamp(20px,2.6vw,36px)}
  .phero .crumbs{margin-bottom:18px}
  .phero .row.mt{margin-top:22px}
}
/* short desktop screens (small laptops): compact the tall pieces inside heroes */
@media (min-width:1081px) and (max-height:820px){
  .phero:not(.has-reel){padding:32px 0 36px}
  .svc-card{padding:18px 22px;gap:12px}
  .svc-card li a{padding:8px 0;font-size:14px}
  .phero .rcard{max-width:min(440px,calc((100svh - 190px) * .8))!important}
  .phero .tags{margin-top:12px}
  .phero.has-reel h1{font-size:clamp(52px,min(8vw,11.5vh),144px)}
  .phero.has-reel{padding-bottom:32px}
  .phero.has-reel .lock{margin-bottom:12px}
}
/* mega menu feature card v2: stacked, aligned */
.mega-feature{display:flex;flex-direction:column;justify-content:space-between;gap:0;padding:22px 22px 18px;min-height:300px}
.mega-feature::after{display:none}
.mega-feature>span{display:block}
.mf-top{display:flex!important;justify-content:space-between;align-items:flex-start;gap:12px}
.mf-top .lock{font-size:19px}
.mf-num{font-family:var(--disp);font-size:58px;line-height:.75;color:transparent;-webkit-text-stroke:1.2px rgba(255,67,67,.55);transition:color .4s,-webkit-text-stroke-color .4s}
.mega-feature:hover .mf-num{color:var(--red);-webkit-text-stroke-color:var(--red)}
.mf-stat{margin-top:auto;padding-top:26px}
.mega-feature .st{display:block;font-family:var(--disp);font-size:72px;line-height:.82;color:var(--red)}
.mega-feature .sl2{display:block;margin-top:10px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--d-body);line-height:1.4}
.mf-bot{margin-top:20px;padding-top:16px;border-top:1px solid var(--d-line)}
.mega-feature .ln{display:block;font-family:var(--disp);font-size:28px;line-height:.95;text-transform:uppercase;color:#fff}
.mega-feature .go{display:flex!important;justify-content:space-between;align-items:center;margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.mega-feature .go i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:14px;letter-spacing:0;transition:transform .4s var(--ease)}
.mega-feature:hover .go i{transform:rotate(45deg)}
.mega-feature:hover .go span{color:var(--red)}
.mf-stat{display:flex!important;justify-content:space-between;align-items:flex-end;gap:12px}
.mf-stat>span:first-child{display:block}
.mf-num{font-size:64px;line-height:.78;flex:none}
.mega-feature .go span{white-space:nowrap;letter-spacing:.12em}
.mf-stat{display:block!important;position:relative}
.mf-stat .mf-num{position:absolute;right:0;top:26px;font-size:60px}
.mega-feature .sl2{white-space:nowrap}
.mega-feature .go{gap:10px}
.mega-feature .go span{font-size:10.5px;letter-spacing:.1em;overflow:hidden;text-overflow:ellipsis}
.mega-feature .go i{flex:none}
.mf-stat{display:grid!important;grid-template-columns:1fr auto;align-items:end;column-gap:12px}
.mf-stat>span:first-child{display:contents}
.mf-stat .st{grid-area:1/1}
.mf-stat .sl2{grid-area:2/1/3/3}
.mf-stat .mf-num{position:static;grid-area:1/2;font-size:60px;line-height:.82}

/* ---------- mobile fixes v31 ---------- */
.clips{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
@media (max-width:1080px){
  .hero-grid{padding-right:var(--gut)}
}
@media (max-width:900px){
  .div-panel{grid-template-columns:minmax(0,1fr)!important}
  .div-panel>*{min-width:0}
  .bento{grid-auto-flow:row dense}
  .bento .bt-b,.bento.b6 .bt-b{grid-column:1/-1}
}
@media (max-width:720px){
  .hero h1{font-size:min(72px,17.4vw)}
  .clips>*{flex:0 0 62%}
  .wcard .top{gap:12px}
}

/* ---------- v32: board rebuild (Sept 2026) ---------- */
/* client logo wall on light sections: real logos, not one flat picture */
.lwall{display:flex;flex-wrap:wrap;gap:10px}
.lwall .bchip{height:56px;padding:0 20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.lwall .bchip svg{fill:var(--ink);opacity:.85}
.lwall .bchip span{color:var(--ink);font-size:15px}
.lwall .bchip:hover{border-color:rgba(255,67,67,.5);background:rgba(255,67,67,.05)}
.lwall .bchip:hover svg{fill:var(--red);opacity:1}

/* division service lists: two columns so they stop blending together */
.svc-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:32px}
.svc-grid li{min-width:0}
.svc-grid a,.svc-grid>li>span{display:flex;justify-content:space-between;align-items:center;gap:10px;height:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;font-weight:700;font-size:14px;line-height:1.25;transition:border-color .3s,color .3s,background .3s}
.navy .svc-grid a,.navy .svc-grid>li>span{border-color:var(--d-line)}
.svc-grid a span:last-child{color:var(--red);flex:none;transition:transform .4s var(--ease)}
.svc-grid a:hover{color:var(--red);border-color:rgba(255,67,67,.55);background:rgba(255,67,67,.05)}
.svc-grid a:hover span:last-child{transform:translateX(3px)}
.svc-grid.plain>li>span{cursor:default}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}}

/* example cards keep their service tags */
.wtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.wtags span{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--d-line);border-radius:999px;color:var(--d-body);transition:color .3s,border-color .3s}
.wcard:hover .wtags span{color:#fff;border-color:rgba(255,255,255,.5)}
.rstrip>div{display:flex;flex-direction:column;gap:6px}

/* mega menu: the long marketing list needs tighter rows */
.mega-list.tight li a{padding:9px 10px}
.mega-list.tight .mtx b{font-size:13.5px}
.mega-list.tight .mtx span{display:none}
.nm-link.out i{font-style:normal;font-size:.8em;margin-left:4px;color:var(--red)}

/* news: social feed */
.feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fpost{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.navy .fpost{background:var(--navy-2);border-color:var(--d-line)}
.fp-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.fp-plat{color:var(--red)}
.fp-handle{color:var(--mute)}
.fp-media{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--navy);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 10px,transparent 10px 20px)}
.fp-media .ph{position:absolute;left:10px;top:10px}
.fp-media .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--red)}
.fp-media .play::after{content:"";position:absolute;left:21px;top:16px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}
.fp-t{font-size:14px;line-height:1.5}
@media (max-width:980px){.feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.feed{grid-template-columns:1fr}}

/* team cards with LinkedIn */
.tcard{display:flex;flex-direction:column}
.tcard h3{margin-top:14px}
.tcard .role{font-size:13px;color:var(--mute)}
.navy .tcard .role{color:var(--d-body)}
.tcard .bio{font-size:13.5px;line-height:1.55;margin-top:10px}
.tcard .li{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.tcard .li svg{width:16px;height:16px;flex:none}
.tcard .li.off{color:var(--mute);gap:8px;flex-wrap:wrap}
.tcard .li.off svg{opacity:.6}
.ph-face.lg{aspect-ratio:1;max-width:220px;margin-top:26px;border-radius:var(--r);background:var(--navy-3);display:grid;place-items:center;position:relative;overflow:hidden}
.ph-face.lg span:not(.ph){font-family:var(--disp);font-size:84px;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.3)}
.ph-face.lg .ph{position:absolute;left:10px;top:10px}

/* about: image band */
.imgband{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin-top:clamp(40px,5vw,72px)}
@media (max-width:820px){.imgband{grid-template-columns:1fr 1fr}.imgband>*:first-child{grid-column:1/-1}}

/* ---------- v35: client logo river ---------- */
.river-band{padding-top:clamp(64px,7vw,110px);padding-bottom:clamp(64px,7vw,110px);overflow:hidden}
.river-head{display:grid;grid-template-columns:minmax(0,1fr) min(38vw,420px);gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(36px,4.4vw,60px)}
.river-note{margin-top:clamp(28px,3vw,40px);color:var(--d-body)}
.river{display:flex;flex-direction:column;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.lrow{overflow:hidden}
.ltrack{display:flex;gap:14px;width:max-content;animation:riverflow var(--sp,56s) linear infinite}
.lrow.rev .ltrack{animation-direction:reverse}
.river:hover .ltrack,.river:focus-within .ltrack{animation-play-state:paused}
@keyframes riverflow{to{transform:translate3d(-33.333%,0,0)}}
.ltile{display:inline-flex;align-items:center;gap:14px;height:clamp(74px,7vw,96px);padding:0 clamp(24px,2.6vw,38px);border-radius:16px;background:var(--navy-2);border:1px solid var(--d-line);white-space:nowrap;transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.ltile svg{width:clamp(26px,2.4vw,34px);height:clamp(26px,2.4vw,34px);fill:#fff;flex:none;opacity:.9;transition:fill .4s,opacity .4s}
.ltile b{font-family:var(--sans);font-weight:800;font-size:clamp(19px,1.8vw,26px);letter-spacing:-.02em;color:#fff;transition:color .4s}
.ltile:hover{background:rgba(255,67,67,.14);border-color:rgba(255,67,67,.6);transform:translateY(-4px)}
.ltile:hover svg{fill:var(--red);opacity:1}
.ltile:hover b{color:var(--red)}
/* compact reel beside the heading */
.reel.mini{width:100%}
.reel.mini .reel-frame{aspect-ratio:16/9;border-radius:14px}
.reel.mini .reel-play{width:64px;height:64px}
@media (max-width:900px){
  .river-head{grid-template-columns:1fr;align-items:start}
  .reel.mini{max-width:460px}
}
@media (prefers-reduced-motion:reduce){.ltrack{animation:none}.river{-webkit-mask-image:none;mask-image:none}.lrow{overflow-x:auto}}
.anim-off .ltrack{animation-play-state:paused}

/* ---------- v37: range tiles + single selected-work example ---------- */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(36px,4vw,60px)}
.btile{position:relative;display:flex;flex-direction:column;gap:12px;min-height:clamp(170px,15vw,210px);padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--white);overflow:hidden;transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.btile .bt-k{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);transition:color .45s}
.btile .bt-t{font-family:var(--disp);font-size:clamp(25px,2.2vw,33px);line-height:.98;text-transform:uppercase;margin-top:auto;max-width:18ch;transition:color .45s}
.btile .bt-n{position:absolute;right:16px;top:14px;font-family:var(--disp);font-size:38px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(9,14,51,.28);transition:-webkit-text-stroke-color .45s}
.btile:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-4px)}
.btile:hover .bt-t{color:#fff}
.btile:hover .bt-n{-webkit-text-stroke-color:var(--red)}
.btile:nth-child(1),.btile:nth-child(8){background:var(--red);border-color:var(--red)}
.btile:nth-child(1) .bt-k,.btile:nth-child(8) .bt-k{color:#fff;opacity:.8}
.btile:nth-child(1) .bt-t,.btile:nth-child(8) .bt-t{color:#fff}
.btile:nth-child(1) .bt-n,.btile:nth-child(8) .bt-n{-webkit-text-stroke-color:rgba(255,255,255,.5)}
.btile:nth-child(1):hover,.btile:nth-child(8):hover{background:var(--navy);border-color:var(--navy)}
.btile:nth-child(5){background:var(--navy);border-color:var(--navy)}
.btile:nth-child(5) .bt-t{color:#fff}
.btile:nth-child(5) .bt-n{-webkit-text-stroke-color:rgba(255,255,255,.4)}
.btile:nth-child(5):hover{background:var(--red);border-color:var(--red)}
@media (max-width:980px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bgrid{grid-template-columns:1fr}.btile{min-height:0}}
/* one example: give it room and let every tag show */
.dp-work.one .dp-work-grid{grid-template-columns:minmax(0,min(100%,460px))}
.dp-work.one .swork-img{aspect-ratio:16/9}
/* v39: the client band lost its reel, so the head is a heading plus one line */
.river-head{align-items:end}
.river-head .lede{max-width:44ch}

/* v40: real headshots in the team cards */
.ph-face.shot{background:var(--navy-3)}
.ph-face.shot img{width:100%;height:100%;object-fit:cover;display:block}
.team .ph-face.shot{aspect-ratio:4/5}
.ph-face.lg.shot{max-width:260px;aspect-ratio:4/5}

/* ---------- v46: review mode ---------- */
.draftbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px clamp(18px,4vw,40px);background:var(--red);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;position:relative;z-index:60}
.draftbar b{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px}
.draftbar span{opacity:.92}
.draftbar a{margin-left:auto;border-bottom:2px solid rgba(255,255,255,.6);padding-bottom:1px}
.draftbar a:hover{border-color:#fff}
/* a list item whose page is still in review: same shape, no link */
.offlink{cursor:default}
.svc-grid>li>.offlink{display:flex;justify-content:space-between;align-items:center;gap:10px;height:100%;padding:13px 15px;border:1px dashed var(--line);border-radius:10px;font-weight:700;font-size:14px;line-height:1.25;opacity:.72}
.navy .svc-grid>li>.offlink{border-color:var(--d-line)}
.svc-grid>li>.offlink span:last-child{display:none}
.mega-list .offlink{display:flex;gap:12px;padding:10px;border-radius:10px;opacity:.6}
.mm-sub .offlink{display:block;padding:9px 0;opacity:.55}
/* v48: a service item with no page yet reads as a normal chip, not a dead link */
.svc-grid>li>.offlink{border-style:solid;opacity:1}

/* ---------- v51: real logos, white on the dark band ---------- */
.ltile.has-logo{padding:0 clamp(26px,2.8vw,42px)}
.lmark{width:auto;max-width:200px;object-fit:contain;display:block;opacity:1;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ltile.has-logo:hover .lmark{opacity:1;transform:scale(1.05)}
.ltile.has-logo:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}

/* v55: the Talent card sits in the hero, like the board */
.phero .hero-card{align-self:start}
.phero .hero-card .svc-card{margin-top:0}
@media (max-width:1080px){.phero .hero-card{max-width:520px}}
/* v56: Talent hero is a two column layout, copy beside the card */
.talent-hero .pgrid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:start}
.talent-hero .hero-card{justify-self:end;width:100%;max-width:440px}
@media (max-width:980px){.talent-hero .pgrid2{grid-template-columns:1fr}.talent-hero .hero-card{justify-self:start;max-width:520px}}

/* v57: dealer cards named after the service, in the bold card style */
.xcards{grid-template-columns:repeat(4,minmax(0,1fr))}
.xcard{background:var(--navy-2);border:1px solid var(--d-line);color:#fff}
.xcard:nth-child(2){background:var(--red);border-color:var(--red)}
.xcard summary h3.disp{font-family:var(--disp);font-size:clamp(26px,2.4vw,36px);line-height:.95;text-transform:uppercase;margin:6px 0 10px}
.xcard .teaser{color:var(--d-body)}
.xcard:nth-child(2) .teaser,.xcard:nth-child(2) .k{color:rgba(255,255,255,.9)}
@media (max-width:1080px){.xcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.xcards{grid-template-columns:1fr}}
/* v58: image slots have no play button */
.slot.img .play{display:none}
.slot.img .cap{font-size:12px}

/* v63: dealer cards are plain cards with a CTA, equal height */
.xcards{align-items:stretch}
.xcard{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.2vw,30px);border-radius:var(--r);height:100%}
.xcard .k{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.xcard summary,.xcard .open,.xcard .more{display:none}
.xcard h3.disp{margin:0 0 4px}
.xcard .teaser{font-size:14.5px;line-height:1.55;margin:0}
.xcard .bk{margin-top:auto;padding-top:18px;align-self:flex-start}
.xcard:nth-child(2) .bk .t,.xcard:nth-child(2) .bk .b,.xcard:nth-child(2) .bk .ar{color:#fff}

/* v65: real episode thumbnails once the playlists are connected */
.ep-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ep-thumb .ep-show,.ep-thumb .ep-play{z-index:2}
.ep-thumb:has(.ep-img) .ep-show{display:none}

/* v69: social icons in the footer */
.foot-social{display:flex;gap:10px;margin-top:22px}
.foot-social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--navy-2);border:1px solid var(--d-line);color:#fff;transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.foot-social svg{width:18px;height:18px}
.foot-social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
/* v80: a two person team block reads better at half width */
.team.pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
@media (max-width:640px){.team.pair{grid-template-columns:1fr}}

/* ---------- v81: AI page, before and after plus engagement paths ---------- */
.ba{display:flex;flex-direction:column;gap:14px;margin-top:clamp(36px,4vw,56px)}
.barow{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:start;padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--line)}
.ba-k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.ba-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ba-before,.ba-after{padding:clamp(18px,2vw,26px);border-radius:12px}
.ba-before{background:rgba(9,14,51,.045);border:1px solid var(--line)}
.ba-after{background:var(--navy);color:#fff}
.ba-before .lab{color:var(--mute)}
.ba-after .lab{color:var(--red)}
.ba-pair p{margin-top:10px;font-size:14.5px;line-height:1.6}
.ba-after p{color:var(--d-body)}
@media (max-width:900px){.barow{grid-template-columns:1fr;gap:14px}.ba-pair{grid-template-columns:1fr}}

.paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(32px,4vw,52px)}
.path{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.2vw,28px);border:1px solid var(--line);border-radius:14px;background:var(--white);transition:transform .45s var(--ease),border-color .45s var(--ease)}
.navy .path{background:var(--navy-2);border-color:var(--d-line)}
.path .n{font-family:var(--disp);font-size:34px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,67,67,.6)}
.path h3.disp{font-size:clamp(22px,2vw,28px);line-height:.98;text-transform:uppercase}
.path .when{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.path p{font-size:14px;line-height:1.6;margin-top:4px}
.path:hover{transform:translateY(-4px);border-color:rgba(255,67,67,.5)}
@media (max-width:1080px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.paths{grid-template-columns:1fr}}

/* v91: a slot whose asset has not arrived yet */
.pending{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:clamp(28px,3.5vw,48px);padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);border:1px dashed var(--d-line);border-radius:var(--r)}
.pending .lab{color:#fff}
.pending p{margin:0;font-size:14px;color:var(--d-body)}
.pending .ph{margin-left:auto}
@media (max-width:620px){.pending .ph{margin-left:0}}

/* ---------- v92: Freddy.AI wiring diagram in the AI hero ---------- */
.ai-hero-art{justify-self:end;width:100%;max-width:560px}
.aid{width:100%;height:auto;display:block}
.aid-tile rect{fill:var(--navy-2);stroke:var(--d-line);stroke-width:1.5}
.aid-tile path{fill:#fff}
.aid-wire{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2}
.aid-wires{stroke-linecap:round}
.aid-chip rect{fill:var(--navy-3);stroke:var(--red);stroke-width:2}
.aid-pin{fill:rgba(255,255,255,.45);stroke:none}
.aid-chip text{font-family:var(--sans);font-weight:800;font-size:26px;fill:#fff;letter-spacing:-.02em}
.aid-chip text tspan{fill:var(--red)}
/* a pulse running the wires, stopped for anyone who asked for less motion */
.aid-wire{stroke-dasharray:10 240;stroke-dashoffset:250;animation:aidflow 5.5s linear infinite}
.aid-wire:nth-child(2n){animation-delay:-1.4s}
.aid-wire:nth-child(3n){animation-delay:-2.8s}
@keyframes aidflow{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.aid-wire{animation:none;stroke-dasharray:none;stroke-dashoffset:0}}
.anim-off .aid-wire{animation-play-state:paused}
@media (max-width:1080px){.ai-hero-art{justify-self:start;max-width:480px;margin-top:8px}}

/* ---------- v93: real client artwork in the selected-work slots ---------- */
.swork-img.card,.swork-img.mark{background:var(--navy-3)}
.swork-img.card{aspect-ratio:1.905/1}
.swork-img.card img{width:100%;height:100%;object-fit:cover;display:block}
.swork-img.mark{display:grid;place-items:center;padding:0 12%}
.swork-img.mark img{width:100%;height:auto;object-fit:contain}
.dp-work.one .swork-img.card{aspect-ratio:1.905/1}
a.swork .swork-img.card img,a.swork .swork-img.mark img{transition:transform .6s var(--ease)}
a.swork:hover .swork-img.card img,a.swork:hover .swork-img.mark img{transform:scale(1.03)}
/* subscribe: in flight, and the one case where beehiiv did not take it */
.sub.busy button{opacity:.6;pointer-events:none}
.sub.sub-bad input{border-color:var(--red)}
.sub.sub-bad::after{content:"That did not go through. Try again, or email us.";display:block;margin-top:8px;font-size:12.5px;color:var(--red)}

/* ---------- v94: AI hero, two columns with the wiring diagram beside the copy ---------- */
.aih{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(24px,4vw,72px);align-items:center}
.ai-phero h1{font-size:clamp(56px,6.6vw,112px);max-width:10ch}
.ai-phero .lede{max-width:50ch;margin-top:clamp(20px,2.4vw,30px)}
.ai-phero .chipline{margin-top:22px}
.aih-cta{margin-top:clamp(24px,3vw,38px)}
.ai-hero-art{justify-self:center;width:100%;max-width:560px}
@media (max-width:1080px){
  .aih{grid-template-columns:1fr;gap:26px}
  .ai-hero-art{max-width:440px;justify-self:start;margin-top:4px}
  .ai-phero h1{font-size:clamp(54px,15.5vw,84px);max-width:none}
}

/* ---------- v94: dealer networks, one named and three withheld ---------- */
.nets .lede{color:var(--d-body)}
.netgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.4vw,46px)}
.net-lead{display:grid;grid-template-rows:auto 1fr;border:1.5px solid var(--d-line);border-radius:20px;overflow:hidden;background:var(--navy-2)}
.net-mark{display:grid;place-items:center;padding:clamp(34px,4.6vw,64px) 12%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px),var(--navy-3);border-bottom:1.5px solid var(--d-line)}
.net-mark img{width:100%;max-width:360px;height:auto;display:block}
.net-body{padding:clamp(22px,2.6vw,34px)}
.net-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--d-dim)}
.net-body .t{font-size:clamp(17px,1.5vw,21px);line-height:1.35;font-weight:700;color:#fff;margin:14px 0 16px;max-width:34ch}
.net-tags{display:flex;flex-wrap:wrap;gap:6px}
.net-tags span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--d-line);color:var(--d-body);border-radius:999px;padding:4px 10px}
.net-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(20px,2.4vw,30px);padding-top:clamp(18px,2vw,24px);border-top:1.5px solid var(--d-line)}
.net-stats div{position:relative;min-width:0}
.net-stats b{display:block;font-family:var(--disp);font-size:clamp(40px,4.4vw,62px);line-height:.9;color:var(--red)}
.net-stats span{display:block;margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--d-body)}
.net-stats .ph{position:static;display:inline-flex;margin-top:8px}
.net-go{margin-top:clamp(20px,2.4vw,28px)}
.net-rest{display:flex;flex-direction:column;gap:12px}
.net-locked{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:clamp(16px,1.9vw,24px);border:1.5px dashed var(--d-line);border-radius:16px;background:rgba(255,255,255,.015)}
.net-locked .n{font-family:var(--disp);font-size:clamp(28px,2.6vw,38px);line-height:1;color:rgba(255,255,255,.22)}
.net-locked h3{font-size:clamp(17px,1.5vw,21px);line-height:1;color:#fff}
.net-locked p{font-size:13.5px;color:var(--d-body);margin-top:6px}
.net-locked .lk{width:20px;height:20px;fill:rgba(255,255,255,.3)}
.net-note{position:relative;font-size:13.5px;color:var(--d-body);margin-top:4px;padding-right:46px}
.net-note .ph{position:absolute;right:0;top:-2px}
@media (max-width:980px){
  .netgrid{grid-template-columns:1fr}
  .net-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.net-locked{grid-template-columns:auto 1fr;gap:12px}.net-locked .lk{display:none}}
/* the diagram is the artwork on this hero, so the watermark steps out of its way */
.ai-phero .wm{display:none}
.net-note{padding-right:0}

/* ---------- v95: the client dashboard, drawn ---------- */
.dash{margin:0;border:1.5px solid var(--d-line);border-radius:18px;overflow:hidden;background:var(--navy-2);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.dash-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1.5px solid var(--d-line);background:var(--navy-3)}
.dash-dots{display:flex;gap:6px}
.dash-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.dash-dots i:first-child{background:rgba(255,67,67,.6)}
.dash-url{flex:1;font-size:11.5px;letter-spacing:.04em;color:var(--d-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.dash-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,67,67,.55);animation:dashpulse 2.4s ease-out infinite}
@keyframes dashpulse{70%{box-shadow:0 0 0 7px rgba(255,67,67,0)}100%{box-shadow:0 0 0 0 rgba(255,67,67,0)}}
.dash-body{padding:clamp(14px,1.6vw,20px);display:grid;gap:clamp(10px,1.2vw,14px)}
.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,12px)}
.dash-kpis>div{min-width:0;padding:clamp(10px,1.2vw,14px);border:1.5px solid var(--d-line);border-radius:12px;background:rgba(255,255,255,.015)}
.dash-kpis .k{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--d-dim)}
.dash-kpis b{display:block;margin:8px 0 4px;font-family:var(--disp);font-size:clamp(24px,2.4vw,34px);line-height:1;color:#fff}
.dash-kpis .s{display:block;font-size:10.5px;color:var(--d-body)}
.dash-panel{padding:clamp(12px,1.3vw,16px);border:1.5px solid var(--d-line);border-radius:12px;background:rgba(255,255,255,.015)}
.dash-ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--d-dim);margin-bottom:10px}
.dash-graph svg{width:100%;height:clamp(84px,9vw,116px);display:block;overflow:visible}
.dash-graph .g{stroke:rgba(255,255,255,.07);stroke-width:1}
.dash-graph .l{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dash-graph .d{fill:#fff;stroke:var(--red);stroke-width:2.4;vector-effect:non-scaling-stroke}
.dash-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;align-items:center;gap:12px;padding:6px 0;font-size:11.5px;color:var(--d-body)}
.dash-row+.dash-row{border-top:1px solid rgba(255,255,255,.055)}
.dash-bar2{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.dash-bar2 i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,rgba(255,67,67,.55),var(--red))}
/* the figures are illustrative, and the placeholder treatment says so */
.dash .phv{font-size:inherit}
.dash-kpis b.phv{color:#fff}
@media (max-width:700px){
  .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;font-size:11px}
}

/* ---------- v96: pending strip on a light section ---------- */
.pending.light{border-color:var(--line-2)}
.pending.light .lab{color:var(--navy)}
.pending.light p{color:var(--body)}
/* one stat or two, the row sits tight to the left either way */
.net-stats{grid-template-columns:repeat(auto-fit,minmax(0,220px))}
/* a product with no cleared number states what it is instead */
.rstrip .said .l{font-size:clamp(15px,1.4vw,18px);font-weight:700;line-height:1.35;color:inherit;letter-spacing:0;text-transform:none;margin-top:10px;max-width:30ch}

/* ---------- v100: launch pass ---------- */
/* hero with no film: the headline takes the whole width */
.hero.no-reel .hero-grid{grid-template-columns:minmax(0,1fr);padding-right:var(--gut)}
.hero.no-reel .hero-main h1{max-width:16ch}
/* the honeypot: out of sight, out of the tab order, still a real field to a bot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* a form in flight, and the one case where nothing got through */
.lead.busy [type=submit]{opacity:.6;pointer-events:none}
.form-bad::after{content:"That did not send. Try again, or email collab@freddymedia.com.";display:block;margin-top:14px;padding:12px 14px;border:1.5px solid var(--red);border-radius:12px;font-size:13.5px;color:#fff}
/* a brand chip carrying a real logo file rather than a traced path */
.bchip.has-logo img{height:17px;width:auto;max-width:92px;object-fit:contain;display:block;flex:none}
/* a wide wordmark must not outgrow its tile */
.lmark{max-width:min(150px,34vw);object-fit:contain}
.bchip.word img{height:19px;max-width:118px}

/* ---------- v102: the newsletter archive and its posts ---------- */
.nlgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(20px,2.4vw,32px)}
.nlcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(14px,1.6vw,18px);border:1.5px solid var(--line-2);border-radius:16px;color:inherit;background:#fff;transition:border-color .3s,transform .4s var(--ease),box-shadow .4s var(--ease)}
.nlcard:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 20px 44px rgba(9,14,51,.1)}
.nlc-img{display:block;aspect-ratio:1.9/1;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(9,14,51,.05) 0 10px,transparent 10px 20px),var(--paper-2,#ece8e1)}
.nlc-img img{width:100%;height:100%;object-fit:cover;display:block}
.nlc-meta{display:flex;gap:14px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.nlc-t{font-family:var(--disp);font-size:clamp(20px,1.8vw,25px);line-height:1.05;text-transform:uppercase}
.nlcard:hover .nlc-t{color:var(--red)}
.nlc-s{font-size:14px;line-height:1.5;color:var(--body)}
.nlc-go{position:absolute;right:16px;bottom:14px;color:var(--red);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.nlcard:hover .nlc-go{opacity:1;transform:none}
.nlcard.wide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,34px);align-items:center;padding:clamp(16px,1.8vw,22px);margin-top:clamp(18px,2vw,26px)}
.nlcard.wide .nlc-img{grid-row:span 4;aspect-ratio:1.6/1}
.nlcard.wide .nlc-t{font-size:clamp(26px,2.8vw,40px)}
/* the post itself */
.nlp-head{padding:clamp(40px,5vw,78px) 0 clamp(28px,3.2vw,44px);position:relative;overflow:hidden}
.nlp-back{display:inline-block;color:var(--d-body);margin-bottom:clamp(18px,2vw,26px)}
.nlp-back:hover{color:#fff}
.nlp-head h1{font-size:clamp(38px,5.4vw,78px);line-height:.95;max-width:20ch;text-transform:uppercase}
.nlp-sub{font-size:clamp(17px,1.6vw,21px);line-height:1.45;color:var(--d-body);margin-top:clamp(14px,1.6vw,20px);max-width:52ch}
.nlp-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(18px,2vw,26px);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--d-dim)}
.nlp-hero{margin-top:clamp(-28px,-2.6vw,-18px);position:relative;z-index:1}
.nlp-hero img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 24px 60px rgba(9,14,51,.22)}
.nlp-wrap{padding:clamp(34px,4.5vw,64px) var(--gut)}
/* beehiiv writes its colours as these variables; pointing them at the brand
   keeps the author's own emphasis without importing their palette */
.nlbody{--wt-text-on-background-color:var(--navy);--wt-primary-color:var(--red);--wt-text-on-primary-color:#fff;--wt-background-color:transparent;
  max-width:68ch;margin:0 auto;font-size:clamp(16.5px,1.15vw,18px);line-height:1.72;color:var(--body)}
.nlbody>div{max-width:100%}
.nlbody p{margin:0 0 1.15em}
.nlbody h1,.nlbody h2,.nlbody h3{font-family:var(--disp);text-transform:uppercase;line-height:1.02;color:var(--navy);margin:1.9em 0 .55em}
.nlbody h1{font-size:clamp(30px,3vw,42px)}
.nlbody h2{font-size:clamp(26px,2.4vw,34px)}
.nlbody h3{font-size:clamp(21px,1.9vw,26px)}
.nlbody a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.nlbody img{max-width:100%;height:auto;border-radius:12px;display:block;margin:1.6em auto}
.nlbody ul,.nlbody ol{margin:0 0 1.3em;padding-left:1.25em}
.nlbody li{margin-bottom:.5em}
.nlbody blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--red);font-size:1.06em}
.nlbody hr{border:0;border-top:1.5px solid var(--line-2);margin:2.2em 0}
.nlbody strong,.nlbody b{font-weight:800;color:var(--navy)}
.nlp-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.nlp-nav a{display:flex;flex-direction:column;gap:8px;padding:clamp(16px,2vw,24px);border:1.5px solid var(--line-2);border-radius:16px;color:inherit;font-weight:700;line-height:1.35;transition:border-color .3s,transform .4s var(--ease)}
.nlp-nav a:hover{border-color:var(--navy);transform:translateY(-2px)}
.nlp-nav .nx{text-align:right;align-items:flex-end}
@media (max-width:980px){.nlgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.nlcard.wide{grid-template-columns:1fr}.nlcard.wide .nlc-img{grid-row:auto}}
@media (max-width:620px){.nlgrid{grid-template-columns:1fr}.nlp-nav{grid-template-columns:1fr}.nlp-nav .nx{text-align:left;align-items:flex-start}}
/* the post header carries the same quiet watermark as the other heroes */
.nlp-head .wm{position:absolute;right:-6vw;bottom:-14vw;width:min(48vw,640px);opacity:.07;pointer-events:none}
.items .row{margin-top:18px}
.items .bk{white-space:nowrap}
.legal-links{display:flex;gap:18px;flex-wrap:wrap}
/* a newsletter post whose content is a film */
.nlp-film{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(9,14,51,.22);background:var(--navy-3)}
.nlp-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nlc-img.film{position:relative}
.nlc-img.film::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:var(--red);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.nlc-img.film::before{content:"";position:absolute;left:50%;top:50%;z-index:1;transform:translate(-40%,-50%);border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff}

/* ---------- v113: privacy and terms ---------- */
.legal-hero{padding-bottom:clamp(32px,4vw,56px)}
.legal-hero h1{font-size:clamp(52px,7vw,120px)}
.legal-meta{display:flex;flex-direction:column;gap:4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-dim);font-weight:800}
.legal-meta b{color:#fff;letter-spacing:.06em}
.legal-grid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.legal-toc{position:sticky;top:116px}
.legal-toc ol{list-style:none;margin:14px 0 0;padding:0;counter-reset:toc}
.legal-toc li{counter-increment:toc;border-top:1px solid var(--line-2)}
.legal-toc li:last-child{border-bottom:1px solid var(--line-2)}
.legal-toc a{display:flex;gap:10px;padding:9px 0;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--body)}
.legal-toc a::before{content:counter(toc,decimal-leading-zero);color:var(--dim);font-size:11px;letter-spacing:.1em;padding-top:2px}
.legal-toc a:hover{color:var(--red)}
.legal-body{max-width:70ch}
.legal-body>section{scroll-margin-top:110px}
.legal-body>section+section{margin-top:clamp(30px,3.4vw,46px);padding-top:clamp(30px,3.4vw,46px);border-top:1.5px solid var(--line-2)}
.legal-body h2{display:flex;gap:14px;align-items:baseline;font-size:clamp(23px,2.2vw,31px);line-height:1;text-transform:uppercase;margin-bottom:16px}
.legal-body h2 .n{font-size:13px;color:var(--red);letter-spacing:.06em}
.legal-body p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.68;color:var(--body);margin:0 0 .95em}
.legal-body b{color:var(--navy);font-weight:800}
.legal-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.legal-body ul{margin:0 0 1em;padding-left:1.1em}
.legal-body li{font-size:clamp(15.5px,1.1vw,17px);line-height:1.6;color:var(--body);margin-bottom:.5em}
.legal-note{margin-top:clamp(34px,4vw,54px);padding:clamp(20px,2.4vw,30px);border:1.5px solid var(--line-2);border-left:3px solid var(--red);border-radius:14px;background:rgba(255,67,67,.03)}
.legal-note b{display:block;font-family:var(--disp);font-size:19px;text-transform:uppercase;color:var(--navy);margin-bottom:10px;letter-spacing:.01em}
.legal-note .sig{margin-top:14px;margin-bottom:0;font-weight:700}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr}.legal-toc{position:static}.legal-toc ol{columns:2;column-gap:24px}}
@media (max-width:560px){.legal-toc ol{columns:1}}

/* ---------- v114: the Typeform on the contact page ---------- */
.tf-embed{margin-top:clamp(24px,3vw,40px);border:1.5px solid var(--d-line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.tf-embed iframe{display:block;width:100%;height:min(74vh,660px);border:0}
.tf-alt{margin-top:18px;font-size:14px;color:var(--d-body)}
.tf-alt a{color:#fff;border-bottom:1px solid var(--red)}
.tf-alt a:hover{color:var(--red)}
@media (max-width:700px){.tf-embed iframe{height:min(80vh,560px)}}

/* ---------- v117: mobile hero and the newsletter card under it ---------- */
/* with no film in the hero, space-between left a hole on a phone: pack the
   content instead of stretching it down the screen */
@media (max-width:1080px){
  .hero.no-reel{min-height:auto;padding-bottom:clamp(26px,5vw,40px)}
  .hero.no-reel .hero-main{justify-content:flex-start;gap:clamp(22px,5vw,34px)}
  .hero.no-reel .hero-grid{padding-bottom:0}
  .hero.no-reel .hero-copy .row{justify-content:center;text-align:center}
  .hero.no-reel .hero-copy .row .bk{justify-content:center;width:100%}
}
.sub-second{padding-top:clamp(34px,5vw,60px);padding-bottom:clamp(34px,5vw,60px)}

/* ---------- v118: the drawn wordmark, the frddy film, and the clients band ---------- */
.brand .wordmark{height:38px;width:auto;display:block;transition:height .3s var(--ease)}
.nav.scrolled .brand .wordmark{height:33px}
.mmenu .brand .wordmark{height:34px}
@media (max-width:1080px){.brand .wordmark{height:32px}.nav.scrolled .brand .wordmark{height:30px}}
/* on navy, the white cut of the same mark */
.navy .brand .wordmark,.mmenu .brand .wordmark.light{content:url("/assets/freddy-script-light.webp")}
/* the frddy.io card plays its product film */
.swork-img.film{aspect-ratio:1/1;background:#06070f;position:relative}
.swork-img.film video{width:100%;height:100%;object-fit:cover;display:block}
.dp-work.one .swork-img.film{aspect-ratio:1/1}
a.swork:hover .swork-img.film video{transform:scale(1.02);transition:transform .6s var(--ease)}
/* the clients band lost its top padding to .sec.flush, which outranked it */
.sec.flush.river-band{padding-top:clamp(64px,7vw,110px)}
@media (max-width:720px){.sec.flush.river-band{padding-top:clamp(44px,9vw,64px)}}
/* the archive link sits under the list, not inside its grid */
.items-cta{margin-top:clamp(20px,2.4vw,28px)}

/* ---------- v121: the division lockups carry the drawn wordmark ---------- */
.lock .lockmark{height:1.5em;width:auto;display:block;flex:none}
/* the white cut wherever the lockup sits on navy */
.navy .lock .lockmark,.lock.w .lockmark{content:url("/assets/freddy-script-light.webp")}
.lock i{margin-left:.04em}
