/* ═══════════════════════════════════════════════════════════════════
SOCIAL UNITED — BRAND ELEMENT SYSTEM
Built from the team's Brand Elements sheets (1–4).
PALETTE NOTE. The sheets are drawn on #0A1233 / #0066FF / #FF2D2D /
#F2F4F7. The locked brand tokens are #091026 / #0A6BFA / #FA272F /
#E8E7E7. Everything here is rebuilt on the LOCKED tokens — the two
sets are close enough to look identical alone and different enough
to look wrong beside the wordmark. Flagged for the team to reconcile.
Sheet 3 elements implemented:
1 whisker lines · 2 rounded shapes · 3 wave / ripple
4 circle dot system · 5 soft outlined stickers
6 speech bubbles / callouts · 7 web section decoration
Sheet 1: the icon family (see brand-sprite.svg).
═══════════════════════════════════════════════════════════════════ */
/* ── 1 · WHISKER LINES ──────────────────────────────── */
.whisker{display:inline-block;width:26px;height:14px;position:relative;opacity:.55}
.whisker::before,.whisker::after{content:"";position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor}
.whisker::before{top:2px;transform:rotate(-8deg)}
.whisker::after{bottom:2px;transform:rotate(8deg)}
/* curved set — the sheet's "long / curved" variants, as SVG strokes */
.wk{display:block;color:currentColor;opacity:.5}
.wk path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* divider whisker — line, centre dot, line (sheet 3, "DIVIDER") */
.wk-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto}
.wk-divider::before,.wk-divider::after{content:"";height:2px;width:clamp(40px,9vw,110px);border-radius:2px;
background:linear-gradient(90deg,transparent,currentColor)}
.wk-divider::after{background:linear-gradient(270deg,transparent,currentColor)}
.wk-divider i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* corner whiskers — decorative, sits in a section corner */
.wk-corner{position:absolute;width:74px;height:52px;pointer-events:none;opacity:.22}
.wk-corner.tr{top:22px;right:22px}
.wk-corner.bl{bottom:22px;left:22px;transform:scaleX(-1)}
/* ── 2 · ROUNDED SHAPES · BLOBS ─────────────────────── */
.blob{position:absolute;border-radius:58% 42% 47% 53% / 44% 51% 49% 56%;pointer-events:none;z-index:0}
.blob-b{background:rgba(10,107,250,.09)}
.blob-r{background:rgba(250,39,47,.08)}
.blob-l{background:var(--cloud-soft,#F4F4F6)}
@media(prefers-reduced-motion:no-preference){
.blob-drift{animation:su-blob 22s ease-in-out infinite alternate}
}
@keyframes su-blob{
0%{border-radius:58% 42% 47% 53% / 44% 51% 49% 56%;transform:rotate(0) scale(1)}
100%{border-radius:44% 56% 60% 40% / 55% 44% 56% 45%;transform:rotate(9deg) scale(1.05)}
}
/* ── 3 · WAVE / RIPPLE ──────────────────────────────── */
/* section divider wave — sits at the join between two grounds */
.wave{display:block;width:100%;height:clamp(38px,5vw,72px);line-height:0}
.wave svg{display:block;width:100%;height:100%}
.wave--flip svg{transform:scaleY(-1)}
/* layered waves — three offset paths, sheet 3 "LAYERED WAVES" */
.wave-stack{position:relative;line-height:0}
.wave-stack svg{display:block;width:100%;height:clamp(44px,6vw,86px)}
/* underline wave — replaces flat colour under an emphasised word */
.uw{position:relative;white-space:nowrap;font-style:normal}
.uw::after{content:"";position:absolute;left:0;right:0;bottom:-.22em;height:.34em;
background-repeat:repeat-x;background-size:auto 100%;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6.5c5-6 10-6 15 0s10 6 15 0 10-6 10 0' fill='none' stroke='%230A6BFA' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.uw--red::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6.5c5-6 10-6 15 0s10 6 15 0 10-6 10 0' fill='none' stroke='%23FA272F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.uw--light::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6.5c5-6 10-6 15 0s10 6 15 0 10-6 10 0' fill='none' stroke='%235B9CFF' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
/* ripple rings — concentric, used once, on the network moment */
.ripple{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.ripple i{position:absolute;border-radius:50%;border:1px solid rgba(91,156,255,.34)}
.ripple i:nth-child(1){width:280px;height:280px}
.ripple i:nth-child(2){width:470px;height:470px;border-color:rgba(91,156,255,.24)}
.ripple i:nth-child(3){width:680px;height:680px;border-color:rgba(91,156,255,.16)}
.ripple i:nth-child(4){width:920px;height:920px;border-color:rgba(250,39,47,.13)}
@media(prefers-reduced-motion:no-preference){
.ripple i{animation:su-ripple 5.5s cubic-bezier(.22,1,.36,1) infinite}
.ripple i:nth-child(2){animation-delay:.5s}
.ripple i:nth-child(3){animation-delay:1s}
.ripple i:nth-child(4){animation-delay:1.5s}
}
@keyframes su-ripple{
0%{transform:scale(.82);opacity:0}
22%{opacity:1}
100%{transform:scale(1.14);opacity:0}
}
/* ── 4 · CIRCLE DOT SYSTEM ──────────────────────────── */
/* accent dots — the existing two-dot label device */
.dots{display:inline-flex;gap:6px;align-items:center}
.dots i{width:8px;height:8px;border-radius:50%;display:block}
.dots .b{background:var(--blue,#0A6BFA)} .dots .r{background:var(--red,#FA272F)}
/* dot cluster — loose scatter, sheet 3 "DOT CLUSTER" */
.dotcluster{position:absolute;width:78px;height:78px;pointer-events:none;z-index:0;opacity:.9}
.dotcluster i{position:absolute;border-radius:50%;display:block}
.dotcluster i:nth-child(1){width:11px;height:11px;background:var(--blue,#0A6BFA);top:6%;left:52%}
.dotcluster i:nth-child(2){width:7px;height:7px;background:var(--red,#FA272F);top:38%;left:8%}
.dotcluster i:nth-child(3){width:5px;height:5px;background:var(--navy,#091026);top:66%;left:44%;opacity:.55}
.dotcluster i:nth-child(4){width:8px;height:8px;background:rgba(10,107,250,.35);top:82%;left:76%}
.dotcluster i:nth-child(5){width:4px;height:4px;background:rgba(250,39,47,.45);top:16%;left:88%}
/* orbit composition — sheet 3 "ORBIT COMPOSITION" */
.orbit{position:relative;width:var(--orb,128px);height:var(--orb,128px);flex:none}
.orbit i{position:absolute;border-radius:50%}
.orbit .ring{inset:0;border:1.5px solid rgba(9,16,38,.16);background:none}
.orbit .ring2{inset:19%;border:1.5px dashed rgba(10,107,250,.3);background:none}
.orbit .core{inset:38%;background:var(--navy,#091026)}
.orbit .p1{width:13px;height:13px;background:var(--blue,#0A6BFA);top:-6px;left:50%;margin-left:-6.5px}
.orbit .p2{width:10px;height:10px;background:var(--red,#FA272F);bottom:6%;right:2%}
.orbit .p3{width:7px;height:7px;background:rgba(9,16,38,.35);top:52%;left:-3px}
.orbit--dark .ring{border-color:rgba(255,255,255,.2)}
.orbit--dark .ring2{border-color:rgba(91,156,255,.42)}
.orbit--dark .core{background:#fff}
.orbit--dark .p3{background:rgba(255,255,255,.42)}
@media(prefers-reduced-motion:no-preference){
.orbit .ring2{animation:su-spin 18s linear infinite}
.orbit .p1,.orbit .p2{animation:su-spin 24s linear infinite}
}
@keyframes su-spin{to{transform:rotate(360deg)}}
/* decorative indicators — the run of dots used as a rule */
.dotrule{display:flex;gap:7px;align-items:center}
.dotrule i{width:6px;height:6px;border-radius:50%;background:rgba(9,16,38,.2)}
.dotrule i:nth-child(1){background:var(--blue,#0A6BFA)}
.dotrule i:nth-child(2){background:var(--red,#FA272F)}
.dotrule--light i{background:rgba(255,255,255,.24)}
.dotrule--light i:nth-child(1){background:#5B9CFF}
.dotrule--light i:nth-child(2){background:#FF6B71}
/* ── 5 · SOFT OUTLINED STICKERS / BADGES ────────────── */
.sticker{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;
background:#fff;border:1.5px solid rgba(9,16,38,.16);font-size:12px;font-weight:800;
letter-spacing:.03em;color:var(--navy,#091026);line-height:1;position:relative;
box-shadow:0 2px 0 rgba(9,16,38,.05)}
.sticker svg{width:14px;height:14px;flex:none}
.sticker--live{border-color:rgba(250,39,47,.5);color:#C9161D}
.sticker--new{border-color:rgba(10,107,250,.5);color:#0A5DDB}
.sticker--top{border-color:rgba(9,16,38,.3)}
.sticker--case{border-color:rgba(9,16,38,.18);color:var(--slate,#5A6273)}
.sticker--growth{border-color:rgba(250,39,47,.4);color:#C9161D}
.sticker i.d{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
@media(prefers-reduced-motion:no-preference){
.sticker--live i.d{animation:su-pulse 1.8s ease-in-out infinite}
}
@keyframes su-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* peeled-corner sticker — sheet 3, the folded-corner card */
.peel{position:relative;background:#fff;border:1.5px solid rgba(9,16,38,.14);border-radius:16px;
border-bottom-right-radius:0;padding:22px 24px 26px}
.peel::after{content:"";position:absolute;right:-1.5px;bottom:-1.5px;width:30px;height:30px;
background:linear-gradient(135deg,transparent 48%,rgba(9,16,38,.14) 49%,var(--cloud-soft,#F4F4F6) 52%);
border-bottom-right-radius:4px}
/* ── 6 · SPEECH BUBBLES / CALLOUTS ──────────────────── */
.bubble{position:relative;background:var(--cloud-soft,#F4F4F6);border:1.5px solid rgba(9,16,38,.13);
border-radius:18px;padding:22px 26px}
.bubble::after,.bubble::before{content:"";position:absolute;top:100%;left:38px;width:0;height:0;
border:11px solid transparent}
.bubble::before{border-top-color:rgba(9,16,38,.13)}
.bubble::after{border-top-color:var(--cloud-soft,#F4F4F6);margin-top:-2.4px}
.bubble--paper{background:#fff}
.bubble--paper::after{border-top-color:#fff}
.quote{position:relative;padding-left:52px}
.quote::before{content:"\201C";position:absolute;left:0;top:-14px;font-size:74px;line-height:1;
font-weight:900;color:var(--blue,#0A6BFA);opacity:.22}
/* ── 7 · WEB SECTION DECORATION ─────────────────────── */
/* the icon chip — sheet 1's soft blob behind each icon, as CSS */
.ichip{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;flex:none;color:var(--navy,#091026)}
.ichip::before{content:"";position:absolute;inset:0;background:rgba(10,107,250,.09);
border-radius:56% 44% 48% 52% / 46% 52% 48% 54%;z-index:0}
.ichip svg{position:relative;z-index:1;width:30px;height:30px}
/* The team's official icon artwork (cat-assets/icons/) drops into the same
chip as an ![]()
. It is drawn in near-black navy, so it is only legible on
a light ground — never put one inside .ichip--dark or in the mega-menu.
The vector set in the sprite covers those. */
.ichip img{position:relative;z-index:1;width:32px;height:32px;object-fit:contain}
.ichip--sm img{width:25px;height:25px}
.ichip--red::before{background:rgba(250,39,47,.08)}
.ichip--dark{color:#fff}
.ichip--dark::before{background:rgba(91,156,255,.16)}
.ichip--dark.ichip--red::before{background:rgba(250,39,47,.18)}
.ichip--sm{width:44px;height:44px}
.ichip--sm svg{width:23px;height:23px}
/* the small floating dot the sheet places beside each icon */
.ichip::after{content:"";position:absolute;right:-2px;bottom:2px;width:6px;height:6px;
border-radius:50%;background:rgba(9,16,38,.14)}
.ichip--dark::after{background:rgba(255,255,255,.22)}
/* hero banner decoration — sheet 3, panel 7 */
.herodeco{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.herodeco .blob{width:min(420px,46vw);height:min(420px,46vw)}
/* keep real content above every decorative layer */
.wrap,.sec-head,.hero-grid,.statbar{position:relative;z-index:1}
/* ── layout adjustments where elements meet existing components ──── */
/* discipline card: number + icon chip share a row */
.run .n{vertical-align:middle}
.run .n + .ichip{margin-left:10px;vertical-align:middle}
.run > .ichip{margin-top:-4px}
/* set card gets a sticker pinned to the image */
.set figure{position:relative}
.set .sticker{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;padding:6px 12px}
/* case card sticker sits above the big number */
.case .sticker,.flag .sticker{margin-bottom:14px}
.flag .sticker{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.flag .sticker--live{border-color:rgba(255,107,113,.6);color:#FF6B71}
/* waves need to sit flush against the section they divide */
.wave + section,.wave + .creds{margin-top:-1px}
.sec + .wave,.flag + .wave{margin-top:-1px}
/* hero decoration must never sit over the copy */
.hero{isolation:isolate}
.hero > .herodeco{z-index:0}
.hero .wrap,.hero .statbar{position:relative;z-index:2}
/* dot cluster placements */
.sec-head{position:relative}
.sec-head .dotcluster{top:-26px;right:-10px}
@media(max-width:900px){.sec-head .dotcluster{display:none}}
/* v9 spine station: icon chip sits above the discipline label */
.station .txt > .ichip{margin-bottom:12px}
/* crew list: small icon chip ahead of the role */
.crew li > .ichip{margin-top:-2px}
/* argument cards: icon above the heading */
.dyn .ichip{margin-bottom:10px}
/* ── services hub: discipline cards ─────────────────── */
.svc{display:grid;gap:18px}
@media(min-width:760px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc a{display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--line);
border-radius:20px;padding:28px;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.sec-paper .svc a{background:var(--cloud-soft)}
.svc a:hover{border-color:rgba(10,107,250,.5);transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(9,16,38,.5)}
.svc .n{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.svc a:nth-child(even) .n{color:var(--red-deep)}
.svc h3{font-size:20px;font-weight:800;letter-spacing:-.015em;margin-top:8px;line-height:1.25}
.svc p{margin-top:10px;font-size:14.4px;line-height:1.6;color:var(--slate);flex:1}
.svc .hand{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.8px;
font-weight:700;color:var(--navy);opacity:.7}
.svc .go{margin-top:14px;font-size:13.6px;font-weight:700;color:var(--blue-deep)}
.svc a:hover .go{color:var(--navy)}
/* ═══════════════════════════════════════════════════════════════════
PRIMARY NAVIGATION — mega-menu
TikTok Shop Services ▾ · Work · About · Blog · [Apply to work with us]
Four items and one button. The dropdown carries eight destinations
split by how a buyer thinks: by discipline, or by their category.
Studios sits as the featured panel — the hardest thing on this site
for a competitor to copy deserves a photo, not a text link.
═══════════════════════════════════════════════════════════════════ */
.nav{position:relative}
.nav-logo{flex:none;line-height:0}
.nav-links{display:flex;gap:4px;align-items:center;font-size:14.5px;font-weight:600}
.nav-links > a,.nav-trigger{display:inline-flex;align-items:center;gap:7px;
padding:10px 14px;border-radius:10px;text-decoration:none;color:rgba(255,255,255,.82);
background:none;border:0;font:inherit;cursor:pointer;transition:color .15s,background .15s;
white-space:nowrap}
.nav-links > a:hover,.nav-trigger:hover,.nav-item:hover .nav-trigger{color:#fff;background:rgba(255,255,255,.08)}
.nav-links > a.on,.nav-item.on .nav-trigger{color:#fff}
.nav-links > a.on::after,.nav-item.on .nav-trigger::after{content:"";position:absolute;bottom:2px;
left:14px;right:14px;height:2px;border-radius:2px;background:var(--red,#FA272F)}
.nav-links > a,.nav-trigger{position:relative}
.nav-trigger .chev{width:11px;height:11px;transition:transform .2s;flex:none}
.nav-item{position:static}
.nav-item[data-open="true"] .chev{transform:rotate(180deg)}
/* items that do not have a page yet */
.nav-links a.soon{color:rgba(255,255,255,.45);cursor:default}
.nav-links a.soon::before{content:"soon";position:absolute;top:-2px;right:2px;font-size:8px;
font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35)}
/* the CTA appears twice in the markup — once in the bar, once inside
the mobile drawer. Hide the drawer copy on desktop. */
.nav-links > .btn{display:none}
/* ── the panel ───────────────────────────────────────── */
.mega{position:absolute;left:0;right:0;top:100%;background:#0B1330;
border-top:1px solid rgba(255,255,255,.1);box-shadow:0 26px 60px rgba(0,0,0,.45);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .2s,transform .2s,visibility .2s;z-index:95}
.nav-item[data-open="true"] .mega{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:var(--w,1180px);margin-inline:auto;padding:32px clamp(20px,4vw,44px) 34px;
display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:1.5fr 1fr;align-items:start}
@media(min-width:1120px){.mega-in{grid-template-columns:1.6fr .95fr .85fr}}
.mega-h{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.42);margin-bottom:14px}
.mega-list{display:grid;gap:2px}
@media(min-width:760px){.mega-col--svc .mega-list{grid-template-columns:1fr 1fr;gap:2px 10px}}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:11px;
text-decoration:none;transition:background .15s}
.mega-link:hover{background:rgba(255,255,255,.07)}
/* the nav icons are drawn for this size — 20px of glyph in a 38px chip.
Do not shrink these without redrawing the set; below about 18px the
stroke drops under a device pixel and they go grey and furry. */
.mega-link .ichip{width:38px;height:38px;color:#fff}
.mega-link .ichip svg{width:21px;height:21px}
.mega-link .ichip::before{background:rgba(91,156,255,.16)}
.mega-link .ichip::after{display:none}
.mega-link.red .ichip::before{background:rgba(250,39,47,.2)}
.mega-link b{display:block;font-size:14.5px;font-weight:700;color:#fff;line-height:1.3}
.mega-link span{display:block;margin-top:3px;font-size:12.3px;line-height:1.45;
color:rgba(255,255,255,.55)}
.mega-col--cat .mega-link{padding:12px}
.mega-col--cat .mega-link b{font-size:15px}
/* featured studios panel */
.mega-feat{display:block;border-radius:16px;overflow:hidden;position:relative;
text-decoration:none;min-height:190px;border:1px solid rgba(255,255,255,.14)}
.mega-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .4s cubic-bezier(.22,1,.36,1)}
.mega-feat:hover img{transform:scale(1.05)}
.mega-feat .veil{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(9,16,38,.15),rgba(9,16,38,.9))}
.mega-feat .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.mega-feat .cap i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:#FF6B71}
.mega-feat .cap b{display:block;margin-top:6px;font-size:17px;font-weight:800;color:#fff;line-height:1.25}
.mega-feat .cap span{display:block;margin-top:5px;font-size:12.3px;color:rgba(255,255,255,.7)}
@media(max-width:1119px){.mega-feat{min-height:150px;grid-column:1/-1}}
/* ── burger + mobile drawer ──────────────────────────── */
.burger{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;
align-items:center;justify-content:center;border-radius:10px;flex:none}
.burger:hover{background:rgba(255,255,255,.08)}
.burger i{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;
transition:transform .2s,background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:100%;height:2px;
background:#fff;border-radius:2px;transition:transform .2s,top .2s}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
@media(max-width:1000px){
.burger{display:flex}
.nav .btn{display:none}
.nav-links{position:fixed;inset:64px 0 0;background:#0B1330;display:block;overflow-y:auto;
padding:18px clamp(20px,5vw,32px) 40px;transform:translateY(-8px);opacity:0;visibility:hidden;
transition:opacity .2s,transform .2s,visibility .2s;z-index:94}
.nav-links.open{opacity:1;visibility:visible;transform:none}
.nav-links > a,.nav-trigger{width:100%;justify-content:space-between;padding:15px 4px;
border-radius:0;border-bottom:1px solid rgba(255,255,255,.09);font-size:17px;font-weight:700}
.nav-links > a.on::after,.nav-item.on .nav-trigger::after{display:none}
.mega{position:static;opacity:1;visibility:visible;transform:none;background:none;
border:0;box-shadow:none;display:none}
.nav-item[data-open="true"] .mega{display:block}
.mega-in{display:block;padding:8px 0 14px}
.mega-col{margin-bottom:18px}
.mega-col--svc .mega-list{grid-template-columns:1fr}
.mega-feat{min-height:130px}
.nav-links .btn{display:inline-flex;width:100%;justify-content:center;margin-top:22px}
}
/* ── footer social links ────────────────────────────── */
.social{display:flex;gap:10px;align-items:center;margin-top:20px}
.social a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.62);
transition:color .18s,border-color .18s,background .18s,transform .18s}
.social a:hover{color:#fff;border-color:rgba(255,255,255,.42);
background:rgba(255,255,255,.07);transform:translateY(-2px)}
.social a svg{width:18px;height:18px;fill:currentColor}
/* placeholder state until the real profile URLs land */
.social a[href="#"]{cursor:default}
.social a[href="#"]:hover{transform:none;background:none;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.62)}
.social-note{margin-top:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:rgba(255,255,255,.3)}
/* ═══════════════════════════════════════════════════════════════════
CUSTOM CURSOR
The brand device is a blue dot and a red dot. This puts them on the
pointer: blue leads exactly under the finger, red follows a beat
behind. It is the same idea as the travelling dots on the engine
spine, which is why it reads as ours rather than as a generic
agency-site trick.
Over anything clickable the red ring opens up and the otter appears
inside it. That is the only place the otter is used on the site, and
it is deliberately NOT in the wordmark, so it does not pre-empt the
lockup decision that is still open.
Guards, all of which matter:
· pointer:fine only — never on touch, where there is no cursor
· off entirely under prefers-reduced-motion
· text inputs keep their native I-beam, because people need it
· hidden until the first real mousemove, so it never sits at 0,0
═══════════════════════════════════════════════════════════════════ */
.cur{position:fixed;top:0;left:0;z-index:2147483000;pointer-events:none;
opacity:0;transition:opacity .25s;will-change:transform}
.cur--on{opacity:1}
/* blue dot — exact pointer position, no lag */
#curDot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
background:var(--blue,#0A6BFA);transition:opacity .25s,width .18s,height .18s,margin .18s}
/* red ring — trails behind, and opens over anything clickable */
#curRing{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
border:1.5px solid rgba(250,39,47,.75);
display:flex;align-items:center;justify-content:center;
transition:opacity .25s,width .28s cubic-bezier(.22,1,.36,1),
height .28s cubic-bezier(.22,1,.36,1),margin .28s cubic-bezier(.22,1,.36,1),
background .28s,border-color .28s}
#curRing img{width:0;height:0;opacity:0;object-fit:contain;
transition:width .28s cubic-bezier(.22,1,.36,1),height .28s cubic-bezier(.22,1,.36,1),opacity .2s}
/* over a link, button or clip */
body.cur-hot #curRing{width:62px;height:62px;margin:-31px 0 0 -31px;
background:var(--paper,#fff);border-color:rgba(250,39,47,.95)}
body.cur-hot #curRing img{width:38px;height:38px;opacity:1}
body.cur-hot #curDot{width:0;height:0;margin:0;opacity:0}
/* mousedown. Uses `scale`, not `transform` — the script writes an inline
translate3d to #curRing every frame and would win over a transform here. */
body.cur-press #curRing{scale:.88}
#curRing{transition-property:opacity,width,height,margin,background,border-color,scale}
/* hide the native pointer only where we have replaced it */
@media (pointer:fine){
html.cur-live,
html.cur-live a,
html.cur-live button,
html.cur-live summary,
html.cur-live [role="button"],
html.cur-live .clip{cursor:none}
/* except where the native cursor carries meaning */
html.cur-live input,
html.cur-live textarea,
html.cur-live select,
html.cur-live [contenteditable]{cursor:auto}
}
@media (pointer:coarse){.cur{display:none}}
@media (prefers-reduced-motion:reduce){.cur{display:none}}
/* ═══════════════════════════════════════════════════════════════════
PHASED LAUNCH — "soon" state
Only the homepage and the apply page ship first; the rest follow one
or two a week. Everything pointing at an unbuilt page becomes a
non-link: rather than a disabled , so
there is nothing for a crawler to follow and nothing to 404.
Remove a page's entry from SOON in _build_deploy.py as it goes live.
═══════════════════════════════════════════════════════════════════ */
.soon-link{position:relative;opacity:.55;cursor:default;text-decoration:none;
display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.soon-link::after{content:"Soon";font-size:9px;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;padding:2px 6px;border-radius:4px;line-height:1.5;
border:1px solid currentColor;opacity:.75;flex:none}
/* ── soon-block ──────────────────────────────────────────────────
For elements that already own their layout — the proof cards, the
mega-menu rows, the featured studios panel. `.soon-link` sets
display:inline-flex and appends a pill, which is right for a word in
a list and catastrophic for a two-column card: it collapsed the proof
cards and pushed their photographs out of frame. This variant only
dims and disables. Never put .soon-link on something with children
it has to lay out. */
.soon-block{cursor:default;position:relative}
.soon-block::after{content:none}
.mega-link.soon-block{opacity:.45}
.mega-link.soon-block:hover{background:none}
.mega-link.soon-block .t::after{content:"Soon";display:inline-block;margin-left:8px;
font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
padding:1px 5px;border-radius:3px;border:1px solid currentColor;opacity:.7;
vertical-align:middle}
.mega-feat.soon-block{opacity:.5}
.mega-feat.soon-block:hover img{transform:none}
/* the proof cards keep their whole layout; only the call to action changes */
.case.soon-block{cursor:default}
.case.soon-block:hover .shot{transform:none;box-shadow:12px 12px 0 rgba(9,16,38,.09)}
.case.soon-block .more{opacity:.55}
.case.soon-block .more .ar{display:none}
/* footer lists and body links */
.foot .soon-link,.legal .soon-link{color:rgba(255,255,255,.5)}
.soon-link .ar{display:none}
/* a button that has no page yet keeps its shape but reads as inactive */
.btn.soon-block{opacity:.42;pointer-events:none}