:root{
  --bg:#f7f7f5;
  --panel:#ffffff;
  --ink:#111111;
  --muted:#6e6e73;
  --line:#e6e6e2;
  --soft:#f0f0ec;
  --blue:#2563eb;
  --blue2:#7c3aed;
  --green:#0f766e;
  --dark:#0e0e10;
  --dark-soft:#17171a;
  --radius:28px;
  --radius-sm:18px;
  --shadow:0 22px 70px rgba(17,17,17,.08);
  --shadow2:0 10px 35px rgba(17,17,17,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
video{max-width:100%}
.container{width:min(1160px,calc(100% - 40px));margin:0 auto}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(22px);
  background:rgba(247,247,245,.8);
  border-bottom:1px solid rgba(230,230,226,.9);
}
.nav-inner{height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-weight:700;letter-spacing:-.03em;font-size:18px}
.brand-dim{color:var(--muted);font-weight:600}
.nav-links{display:flex;align-items:center;gap:4px;color:#27272a;font-size:14px}
.nav-links a{padding:9px 13px;border-radius:999px;color:var(--muted);font-weight:500}
.nav-links a:hover{background:#fff;color:#111;box-shadow:var(--shadow2)}
.nav-links a.active{background:#fff;color:#111;box-shadow:var(--shadow2);font-weight:700}
.nav-cta{background:#111!important;color:#fff!important}
.mobile-toggle{display:none;border:0;background:#fff;border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer}

/* ---------- HERO (home) ---------- */
.hero{padding:44px 0 32px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:42px;align-items:center}
.hero-name{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.035em;color:#111;margin:0 0 3px}
.hero-role{font-size:clamp(14px,1.4vw,16px);font-weight:600;color:#52525b;margin:0 0 12px;letter-spacing:-.01em}
.hero-cred{font-size:13px;color:#3f3f46}
.hero-cred strong{color:#111}
.kicker{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:rgba(255,255,255,.75);border-radius:999px;padding:9px 13px;font-size:13px;color:#3f3f46;box-shadow:var(--shadow2)}
.kicker.static{margin-bottom:18px}
.kicker.light{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#d4d4d8}
.dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue2));flex:none}
h1{font-size:clamp(34px,4.4vw,58px);line-height:1.03;letter-spacing:-.04em;margin:12px 0 16px;max-width:900px}
h1.page-title{font-size:clamp(40px,5.4vw,76px)}
.hero p.lead{font-size:clamp(17px,1.9vw,21px);letter-spacing:-.02em;color:#333;max-width:640px;margin:0 0 22px;line-height:1.32}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.actions.center{justify-content:center}
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-weight:700;font-size:15px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow2);transition:transform .18s ease,box-shadow .18s ease}
.button:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.button.primary{background:#111;color:#fff;border-color:#111}
.button.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.button.ghost:hover{background:rgba(255,255,255,.08)}
.button.ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.button.ghost-light:hover{background:rgba(255,255,255,.08)}

/* hero visual */
.visual-card{position:relative;min-height:360px;border-radius:42px;background:linear-gradient(145deg,#ffffff,#eeeeea);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.8);overflow:hidden;padding:22px}
.visual-stage{height:100%;min-height:320px;border-radius:30px;background:var(--dark);position:relative;overflow:hidden;color:#fff;padding:26px;display:flex;flex-direction:column;justify-content:space-between}
.orb{position:absolute;border-radius:50%;opacity:.85}
.orb.one{width:360px;height:360px;right:-120px;top:-90px;background:radial-gradient(circle at 30% 30%,#2563eb,transparent 70%)}
.orb.two{width:300px;height:300px;left:-110px;bottom:-110px;background:radial-gradient(circle at 60% 40%,#7c3aed,transparent 70%)}
.visual-slot{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;height:100%}
.slot-label{font-size:12px;letter-spacing:.22em;color:#a1a1aa;font-weight:600}

/* ---------- STATS ---------- */
.stats-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.5)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{padding:32px 26px;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.4)}
.stat strong{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.05em;line-height:1;background:linear-gradient(120deg,#111,#444);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:14px;max-width:210px}

/* ---------- SECTIONS ---------- */
.section{padding:70px 0}
.section.tight{padding:56px 0}
.section.dark{background:var(--dark);color:#fff}
.section-head{max-width:760px;margin-bottom:28px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-title{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.055em;line-height:1.03;margin:0 0 14px}
.light-title{color:#fff}
.section-sub{font-size:clamp(16px,1.6vw,20px);color:#52525b;margin:0;line-height:1.4}
.section.dark .section-sub{color:#a1a1aa}

/* ---------- INTERIOR PAGE HERO ---------- */
.page-hero{padding:76px 0 36px}
.page-hero .kicker{margin-bottom:16px}
.crumbs{font-size:13px;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:#111}

/* ---------- TRACK CARDS (home) ---------- */
.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.track-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow2);transition:transform .2s ease,box-shadow .2s ease}
.track-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.track-num{font-size:13px;font-weight:700;color:#d4d4d8;letter-spacing:.08em}
.track-card h3{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.04em;margin:0;line-height:1.08}
.track-card p{color:var(--muted);font-size:14.5px;margin:0;line-height:1.5;flex:1}
.track-tags{display:flex;flex-wrap:wrap;gap:7px}
.track-tags span{font-size:11.5px;font-weight:600;color:#3f3f46;border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:5px 11px}
.track-go{font-size:14px;font-weight:700;color:var(--blue2)}
.track-thumb{height:150px;border-radius:20px;overflow:hidden;position:relative;background:var(--soft)}
.track-thumb img,.track-thumb video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.track-thumb .count{position:absolute;right:12px;bottom:10px;font-size:12px;font-weight:700;background:rgba(10,10,16,.72);color:#fff;padding:5px 11px;border-radius:999px;backdrop-filter:blur(6px)}

/* ---------- WORK GRID (portfolio pages) ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work-grid.three{grid-template-columns:repeat(3,1fr)}
.work-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow2);transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;display:block;text-align:left;width:100%;border-top:none}
.work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.work-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark)}
.work-frame.ratio-1{aspect-ratio:1/1}
.work-frame.ratio-9-16{aspect-ratio:9/16}
.work-frame img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.work-card:hover .work-frame img{transform:scale(1.03)}
.play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;background:rgba(10,10,16,.25)}
.work-card:hover .play-badge{opacity:1}
.play-badge span{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:20px;color:#111;padding-left:4px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
/* Touch devices have no hover, so the play affordance must be permanent. */
@media(hover:none){
  .play-badge{opacity:1;background:transparent}
  .play-badge span{width:48px;height:48px;font-size:16px;background:rgba(255,255,255,.88)}
}
.dur-badge{position:absolute;right:12px;bottom:10px;font-size:12px;font-weight:700;background:rgba(10,10,16,.72);color:#fff;padding:4px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.work-body{padding:22px 24px 24px}
.work-body h3{font-size:19px;letter-spacing:-.03em;margin:0 0 5px;line-height:1.15}
.work-body p{color:var(--muted);font-size:13.5px;margin:0 0 13px;line-height:1.45}
.work-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.work-meta span{font-size:11.5px;font-weight:600;color:#3f3f46;border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:4px 10px}
.work-meta .year{margin-left:auto;color:var(--muted);font-weight:600}
.tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue2);border:1px solid #e9d5ff;background:#faf5ff;border-radius:999px;padding:5px 11px}

/* ---------- HOME: work rows ---------- */
.work-grid+.work-grid{margin-top:22px}
.work-more{margin:30px 0 0;font-size:15px;font-weight:700}
.work-more a{color:var(--blue2);text-decoration:underline;text-underline-offset:3px}
/* Reel row: a 9:16 poster can't share a 16:9 grid without towering (661px
   tall at full column width), so the poster sits beside its copy instead of
   above it. Column width now matches the horizontal row exactly, nothing is
   cropped, and the row is shorter than the 16:9 row rather than 2x its height. */
.work-grid.shorts-row .work-card{max-width:none;display:grid;grid-template-columns:160px 1fr;align-items:stretch}
.work-grid.shorts-row .work-frame{aspect-ratio:auto;height:100%;min-height:284px}
.work-grid.shorts-row .work-body{padding:15px 18px 17px;display:flex;flex-direction:column;justify-content:center}
.work-grid.shorts-row .work-body p{margin-bottom:10px}
.work-grid.shorts-row .work-meta span{font-size:10.5px;padding:3px 8px}
.work-grid.shorts-row .play-badge span{width:38px;height:38px;font-size:14px}
.work-grid.shorts-row .dur-badge{font-size:10px;padding:3px 7px}
/* AI feature: one character shown big, with the explanation beside it */
.ai-feature{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:center}
.ai-feature-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:block;background:var(--soft)}
.ai-feature-media img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .35s ease}
.ai-feature-media:hover img{transform:scale(1.02)}
.ai-feature-cap{position:absolute;left:0;right:0;bottom:0;padding:11px 15px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,transparent,rgba(10,10,16,.85))}
.ai-feature-body h3{font-size:clamp(21px,2.5vw,28px);letter-spacing:-.03em;margin:0 0 12px}
.ai-feature-body>p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 18px}
.ai-points{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:11px}
.ai-points li{font-size:14.5px;color:#3f3f46;line-height:1.45;padding-left:22px;position:relative}
.ai-points li:before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--blue2)}
.ai-points strong{color:#111}
.ai-more{font-size:14px;margin:0}
.ai-more a{color:var(--blue2);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){
  .ai-feature{grid-template-columns:1fr;gap:24px}
  .ai-feature-media img{aspect-ratio:4/3}
}
.gfx-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
@media(max-width:640px){
  .work-grid.shorts-row .work-card{grid-template-columns:104px 1fr}
  .work-grid.shorts-row .work-frame{min-height:185px}
  .gfx-teaser{grid-template-columns:1fr;gap:14px}
  .work-more{font-size:14px}
}

/* graphics grid cells */
.gfx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gfx-cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow2);transition:transform .2s ease,box-shadow .2s ease}
.gfx-cell:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.gfx-cell img{width:100%;aspect-ratio:4/3.4;object-fit:cover;display:block}
/* Native-ratio variants: stop cover-cropping wide assets.  Root rule above is
   left alone so the 8 correctly-sized posts keep their current framing. */
.gfx-cell img.ar-wide{aspect-ratio:16/9;object-fit:contain;background:var(--soft)}
.gfx-cell img.ar-ultra{aspect-ratio:2.392/1;object-fit:contain;background:var(--soft)}
.gfx-cell img.ar-square{aspect-ratio:1/1}
/* Billboard spans 2 cols so the 2-item campaign row doesn't go ragged. */
.work-grid.three .gfx-cell.wide{grid-column:span 2}
.small-title{font-size:clamp(24px,3vw,36px)}
.gfx-label{padding:12px 15px;font-size:13px;font-weight:600;color:#3f3f46;display:flex;justify-content:space-between;gap:8px}
.gfx-label .k{color:var(--muted);font-weight:500;font-size:11.5px}
/* Home graphics teaser: one uniform frame per card so all three tiles match.
   object-fit stays contain, so the 2.39:1 banner and the 1.19:1 post show
   whole inside the box instead of being cropped to fill it. */
.gfx-teaser .gfx-cell{display:flex;flex-direction:column}
.gfx-teaser .gfx-cell img,
.gfx-teaser .gfx-cell img.ar-wide,
.gfx-teaser .gfx-cell img.ar-ultra,
.gfx-teaser .gfx-cell img.ar-square{aspect-ratio:16/10;object-fit:contain;background:var(--soft)}
.gfx-teaser .gfx-cell .gfx-label{margin-top:auto}

/* ---------- CASE CARDS (proof) ---------- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:0;box-shadow:var(--shadow2);transition:transform .2s ease,box-shadow .2s ease}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.case-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.case-top small{font-size:13px;font-weight:700;color:#d4d4d8;letter-spacing:.06em}
.case-card h3{font-size:clamp(20px,1.9vw,26px);letter-spacing:-.04em;line-height:1.12;margin:0 0 6px}
.case-role{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.case-card>p:not(.case-role){font-size:14.5px;color:#3f3f46;line-height:1.5;margin:0 0 20px}
/* Lead metric: the number is the hook, so it sits above the copy instead of
   trailing it in the tile row. */
.case-card>p.case-lead{display:flex;flex-direction:column;gap:1px;margin:0 0 14px}
.case-lead strong{font-size:clamp(28px,3.1vw,38px);letter-spacing:-.045em;line-height:1;color:#111}
.case-lead span{font-size:13px;font-weight:600;color:var(--muted)}
/* was margin-top:auto, which bottom-anchored the tiles and opened a hole in
   the middle of the shorter cards */
.case-proof{margin-top:0;display:flex;flex-wrap:wrap;gap:10px}
.case-proof>div{flex:1;min-width:96px;background:var(--soft);border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:1px}
.case-proof strong{font-size:18px;letter-spacing:-.03em;line-height:1.1}
.case-proof span{font-size:11.5px;color:var(--muted);line-height:1.25}
.case-example{aspect-ratio:16/9;border:1px dashed #cfcfc9;border-radius:14px;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:14px;margin:0 0 22px}
.case-example-title{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#a1a1aa}
.case-example-soon{font-size:13px;color:var(--muted)}

/* ---------- CREATOMATES / DARK FEATURE ---------- */
.creato-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.creato-copy .kicker{margin-bottom:18px}
.creato-lead{font-size:clamp(16px,1.7vw,21px);color:#d4d4d8;line-height:1.45;margin:0 0 26px;letter-spacing:-.02em}
.creato-list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px}
.creato-list li{position:relative;padding-left:26px;color:#a1a1aa;font-size:15px;line-height:1.5}
.creato-list li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#7c3aed)}
.creato-list li strong{color:#fff}
.creato-note{font-size:13px;color:#71717a}
.creato-card{border-radius:var(--radius);background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden}
.creato-window{overflow:hidden}
.win-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.win-bar span{width:11px;height:11px;border-radius:50%;background:#3f3f46}
.win-bar span:first-child{background:#f87171}
.win-bar span:nth-child(2){background:#fbbf24}
.win-bar span:nth-child(3){background:#34d399}
.win-bar em{font-style:normal;font-size:12px;color:#71717a;margin-left:10px;letter-spacing:.02em}
.win-body{padding:8px 0}
.win-row{display:grid;grid-template-columns:2fr 1fr;gap:10px;padding:13px 18px;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.04);color:#e4e4e7}
.win-row.head{font-size:10.5px;letter-spacing:.16em;color:#52525b;font-weight:700}
.win-row:last-child{border-bottom:0}
.win-row .ok{color:#34d399;font-weight:600}
.win-row .pend{color:#fbbf24;font-weight:600}

/* ---------- TIMELINE ---------- */
.timeline{display:flex;flex-direction:column}
.tl-item{display:grid;grid-template-columns:210px 1fr;gap:30px;padding:30px 0;border-top:1px solid var(--line)}
.tl-item:last-child{border-bottom:1px solid var(--line)}
.tl-when span{font-size:16px;font-weight:700;letter-spacing:-.02em}
.tl-when small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.tl-body h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.035em;margin:0 0 4px}
.tl-body>p:last-child{color:#3f3f46;font-size:15px;line-height:1.5;margin:0}
.tl-body .case-role{font-size:13px}

/* ---------- SKILLS ---------- */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start}
.panel .section-title{max-width:420px}
.skill-groups{display:flex;flex-direction:column}
.skill-group{padding:20px 0;border-top:1px solid var(--line)}
.skill-group:last-child{border-bottom:1px solid var(--line)}
.skill-group h4{margin:0 0 6px;font-size:17px;letter-spacing:-.02em}
.skill-group p{margin:0;color:#3f3f46;font-size:14.5px;line-height:1.5;max-width:540px}

/* ---------- CONTACT ---------- */
.contact-wrap{max-width:820px;margin:0 auto;text-align:center}
.contact-wrap .kicker{margin:0 auto 20px;display:inline-flex}
.contact-big{font-size:clamp(34px,5.2vw,64px);letter-spacing:-.06em;line-height:1.02;margin:0 0 18px;color:#fff}
.contact-sub{color:#a1a1aa;font-size:clamp(16px,1.8vw,20px);margin:0 auto 32px;max-width:600px;line-height:1.4}
.contact-meta{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;color:#71717a;font-size:13.5px;margin-top:26px}
.contact-meta .sep{color:#3f3f46}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px}
.footer-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- VIDEO MODAL ---------- */
.vmodal{position:fixed;inset:0;z-index:200;background:rgba(8,8,12,.92);display:none;align-items:center;justify-content:center;padding:4vw}
.vmodal.open{display:flex}
.vmodal-box{position:relative;max-width:min(1080px,96vw);width:100%;border-radius:22px;overflow:hidden;background:#000}
.vmodal-box video{width:100%;max-height:82vh;display:block;margin:0 auto}
.vmodal-close{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:17px;cursor:pointer;backdrop-filter:blur(6px)}
.vmodal-close:hover{background:rgba(255,255,255,.3)}

/* ---------- NOTE BAND ---------- */
.note-band{border:1px dashed #d4d4cf;background:rgba(255,255,255,.55);border-radius:var(--radius-sm);padding:18px 22px;font-size:13.5px;color:#52525b;line-height:1.5}
.note-band strong{color:#111}

/* ---------- HERO: PLAYER DEMO (click play -> assets burst) ---------- */
.visual-slot{flex:1;height:auto;gap:10px}
.visual-slot .slot-label{position:relative;z-index:4}
.demo{position:absolute;inset:0;cursor:pointer}
.glow-disc{position:absolute;left:50%;top:50%;width:min(100%,430px);aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(37,99,235,.2),rgba(124,58,237,.14) 45%,transparent 72%);filter:blur(6px);pointer-events:none;transition:transform .6s ease,opacity .5s ease}
.player{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(72%,330px);aspect-ratio:16/10;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:0 26px 70px rgba(0,0,0,.55);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s ease,transform .45s cubic-bezier(.4,0,.72,1),opacity .4s ease,filter .45s ease;z-index:2}
.player:hover{border-color:rgba(139,92,246,.55)}
.player-label{display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:9.5px;font-weight:800;letter-spacing:.16em;color:#a1a1aa;border-bottom:1px solid rgba(255,255,255,.07)}
.rec-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.9)}
.player-screen{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(37,99,235,.1),transparent 65%)}
.pr-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(139,92,246,.5);opacity:0;animation:prRipple 3s ease-out infinite;pointer-events:none}
.pr-ring.r1{width:86px;height:86px}
.pr-ring.r2{width:86px;height:86px;animation-delay:1.5s}
@keyframes prRipple{0%{transform:scale(.7);opacity:.8}100%{transform:scale(2.1);opacity:0}}
.play-btn{position:relative;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 28%,#3b82f6,#7c3aed 72%);box-shadow:0 0 34px rgba(124,58,237,.65),0 14px 30px rgba(0,0,0,.5);transition:transform .2s ease,opacity .25s ease;z-index:2}
.player:hover .play-btn{transform:scale(1.06)}
.pb-tri{width:0;height:0;border-left:16px solid #fff;border-top:9.5px solid transparent;border-bottom:9.5px solid transparent;margin-left:3px}
.player-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid rgba(255,255,255,.07)}
.pbar-fill{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.pbar-fill::after{content:"";position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#7c3aed);width:0%;transition:width 1.1s ease .1s}
.tc{font-size:10px;font-weight:700;color:#71717a;letter-spacing:.06em;transition:color .3s ease}

/* chips: hidden at player center, burst outward when .played */
.chip{position:absolute;left:0;top:0;font-size:10.5px;font-weight:800;letter-spacing:.09em;color:#ececf0;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);padding:7px 12px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.35);white-space:nowrap;text-align:center;opacity:0;pointer-events:none;transform:translate3d(0,0,0) scale(.45);transition:opacity .28s ease,transform .5s cubic-bezier(.2,.9,.25,1.1)}
.demo.played .play-btn{opacity:0;transform:scale(.4)}
.demo.played .pbar-fill::after{width:100%}
.demo.played .tc{color:#a78bfa}
.demo-note{position:absolute;left:0;right:0;bottom:4%;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transform:translateY(8px);transition:opacity .4s ease .45s,transform .4s ease .45s;z-index:6;pointer-events:none}
.demo.revealed .demo-note{opacity:1;transform:translateY(0)}
/* WARP: the player flies into its own screen and vanishes, then the assets
   occupy the whole card as a wrapping cloud. This is what makes the layout
   responsive: flex-wrap lays itself out at any width, where the old fixed
   pixel offsets could only ever collide. */
.demo.played .player{transform:translate(-50%,-50%) scale(2.2);opacity:0;filter:blur(8px);pointer-events:none}
.demo.played .glow-disc{transform:translate(-50%,-50%) scale(1.85);opacity:0}
.demo-assets{position:absolute;inset:0;z-index:5;pointer-events:none}
/* each pill is placed and revealed independently by JS (see scatter/demoPlay) */
.note-replay{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7c7c88;margin-top:7px}
.demo.played .note-replay{color:#a78bfa}
/* Stage 2: the assets arrive ONE AT A TIME, each at its own random spot, and each
   one stays where it lands. They are born at the centre (the vanishing point we
   just flew into) and fly out to their position, so it reads as passing them in
   flight rather than as a list being loaded. Position and reveal are set inline
   by JS; nothing here computes a layout. */
/* Stage 4: pills detach and drift. JS owns position; this just hints the GPU. */
.chip.on{opacity:1}
/* .on only reveals it; position is written inline by JS so the bounce can
   update translate3d directly instead of re-parsing calc() 60x a second. */
.chip.loose{transition:none;will-change:transform}
/* Stage 1: HYPER-SPEED WARP. Radial rays streaking outward from the centre, two
   layers at different speeds and opposite drift so the tunnel reads with depth
   instead of as one flat fan. Run lengths are tuned to end exactly as the last
   asset lands, so the warp STOPS and the bounce begins on the handover. */
.warp-rays{position:absolute;left:50%;top:50%;width:260%;height:260%;
  transform:translate(-50%,-50%) scale(.2);border-radius:50%;opacity:0;
  pointer-events:none;z-index:3;will-change:transform,opacity;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(139,92,246,.75) 0deg .7deg,transparent .7deg 5deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 12%,#000 34%,#000 62%,transparent 88%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 12%,#000 34%,#000 62%,transparent 88%)}
.warp-rays.wr-far{background:repeating-conic-gradient(from 40deg at 50% 50%,
  rgba(96,165,250,.5) 0deg .5deg,transparent .5deg 7deg)}
.demo.played .warp-rays.wr-near{animation:warpNear 2.25s cubic-bezier(.3,.7,.4,1) .18s forwards}
.demo.played .warp-rays.wr-far{animation:warpFar 2.4s cubic-bezier(.3,.7,.4,1) .1s forwards}
@keyframes warpNear{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(0deg)}
  12%{opacity:.95}
  70%{opacity:.8;transform:translate(-50%,-50%) scale(1.15) rotate(38deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.1) rotate(62deg)}}
@keyframes warpFar{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.16) rotate(0deg)}
  14%{opacity:.7}
  60%{opacity:.55;transform:translate(-50%,-50%) scale(.95) rotate(-26deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(-44deg)}}
/* the white-out at the instant you punch through */
.warp-flash{position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);border-radius:50%;opacity:0;pointer-events:none;
  z-index:3;filter:blur(2px);will-change:transform,opacity;
  background:radial-gradient(circle,rgba(255,255,255,.92),rgba(167,139,250,.55) 45%,transparent 72%)}
.demo.played .warp-flash{animation:warpFlash 1.05s ease-out .1s forwards}
@keyframes warpFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(.62)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.note-count{font-size:11.5px;font-weight:900;letter-spacing:.18em;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.note-sub{font-size:9.5px;color:#71717a;letter-spacing:.14em;font-weight:600}

/* hero visual responsive */
@media(max-width:960px){
  .visual-card .visual-stage{min-height:330px}
}
@media(max-width:640px){
  .visual-card{padding:14px}
  .visual-card .visual-stage{min-height:280px;padding:18px}
  .chip{font-size:8.5px;padding:6px 10px}
  .demo-note{bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .pr-ring,.chip{animation:none!important}
  .chip,.demo-note{transition-duration:.01ms!important}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .hero-grid,.creato-grid,.split{grid-template-columns:1fr;gap:28px}
  .visual-card{min-height:0}
  .visual-stage{min-height:280px}
  .case-grid{grid-template-columns:1fr;gap:16px}
  .track-grid{grid-template-columns:1fr;gap:16px}
  .work-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .work-grid.three{grid-template-columns:1fr 1fr}
  .gfx-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .tl-item{grid-template-columns:1fr;gap:8px;padding:22px 0}
}
@media(max-width:640px){
  .nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:rgba(247,247,245,.98);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:14px 20px;gap:4px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;font-size:16px}
  .mobile-toggle{display:block}
  .hero{padding:56px 0 38px}
  .section{padding:64px 0}
  .page-hero{padding:52px 0 28px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:22px 18px}
  .work-grid{grid-template-columns:1fr}
  .work-grid.three{grid-template-columns:1fr}
  .gfx-grid{grid-template-columns:1fr}
  .win-row{grid-template-columns:1.6fr 1fr;font-size:12px;padding:12px 14px}
  .footer-inner{flex-direction:column;gap:6px}
}

/* ---------- MOBILE & PLATFORM OPTIMIZATIONS ---------- */
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-bottom:env(safe-area-inset-bottom)}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--blue2);outline-offset:2px;border-radius:6px}

/* safe areas for notched phones (nav + footer edges) */
.nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.footer{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:calc(12px + env(safe-area-inset-bottom))}

/* nav active underline (cleaner than full pill on all screens) */
.nav-links a.active{box-shadow:none;background:transparent;position:relative}
.nav-links a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--blue2))}
@media(max-width:640px){
  .nav-links a.active{background:transparent}
  .nav-links a.active::after{left:14px;right:auto;width:26px}
}

/* respect users who prefer less motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* small phones & touch polish */
@media(max-width:640px){
  .container{width:min(1160px,calc(100% - 28px))}
  .nav-inner{height:60px}
  .nav-links{top:60px;max-height:calc(100dvh - 60px);overflow-y:auto}
  h1{font-size:clamp(36px,10.5vw,50px);letter-spacing:-.06em}
  h1.page-title{font-size:clamp(32px,9vw,48px)}
  .section-sub{font-size:16px}
  .actions .button{width:100%;justify-content:center}
  .work-frame.ratio-9-16{max-height:76vw;width:100%;margin:0 auto;aspect-ratio:auto}
  .work-frame.ratio-9-16 img{height:100%;object-fit:cover;object-position:center}
  .dur-badge{font-size:11px;padding:3px 9px}
  .work-body{padding:16px 18px 20px}
  .work-body h3{font-size:17px}
  .work-body p{font-size:13px}
  .track-thumb{height:120px}
  .gfx-label{font-size:12px;padding:10px 13px}
  .stat{padding:20px 16px}
  .contact-meta{gap:8px;font-size:12.5px}
  .vmodal{padding:0}
  .vmodal-box{max-width:100vw;min-height:100dvh;border-radius:0;background:#000;display:flex;align-items:center}
  .vmodal-box video{max-height:100dvh}
  .vmodal-close{top:12px;right:12px;background:rgba(255,255,255,.18)}
}

/* tablets: cap the tall vertical frames so cards stay tidy */
@media(min-width:641px) and (max-width:960px){
  .work-frame.ratio-9-16{max-height:440px;width:100%;margin:0 auto;aspect-ratio:auto}
  .work-frame.ratio-9-16 img{height:100%;object-fit:cover;object-position:center}
}

/* ---------- IMAGE LIGHTBOX (graphics + sheet galleries) ---------- */
.gfx-cell img,.sheet-item img,.meet-img img{cursor:zoom-in}
.imodal{position:fixed;inset:0;background:rgba(10,10,12,.93);z-index:400;display:flex;align-items:center;justify-content:center;gap:16px;padding:22px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.imodal.open{opacity:1;pointer-events:auto}
.imodal-box{display:flex;flex-direction:column;align-items:center;min-width:0}
.imodal-box img{max-width:min(1180px,86vw);max-height:80vh;object-fit:contain;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.55);background:#000}
.imodal-cap{margin-top:12px;color:#d4d4d8;font-size:14px;text-align:center;min-height:1.3em}
.imodal-btn{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:19px;cursor:pointer;transition:background .15s ease;display:flex;align-items:center;justify-content:center}
.imodal-btn:hover{background:rgba(255,255,255,.16)}
.imodal-btn.hide{visibility:hidden}
.imodal-close{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .15s ease}
.imodal-close:hover{background:rgba(255,255,255,.2)}
@media(max-width:640px){
  .imodal{gap:8px;padding:12px}
  .imodal-box img{max-width:92vw;max-height:74vh}
  .imodal-btn{width:38px;height:38px}
}

/* ---------- VIDEO CARD CRAFT CHIPS ---------- */
.work-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.work-tags span{font-size:11px;font-weight:600;color:#3f3f46;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 10px;letter-spacing:.02em}

/* ---------- CASE STUDY CARDS (portfolio hub) ---------- */
.study-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.study-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow2);transition:transform .2s ease,box-shadow .2s ease;text-decoration:none;color:inherit}
a.study-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.study-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.study-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.study-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.study-body h3{font-size:clamp(19px,1.8vw,23px);letter-spacing:-.03em;line-height:1.15;margin:0}
.study-body p{color:#3f3f46;font-size:14.5px;line-height:1.5;margin:0}
.study-go{margin-top:auto;font-weight:700;font-size:14px;color:var(--ink)}
.state-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:5px 11px;width:max-content}
.state-live{color:#0f766e;background:#e6f4f1;border:1px solid #cfe9e4}
.state-soon{color:#52525b;background:var(--soft);border:1px solid var(--line)}
.study-card.soon{background:transparent;border:1px dashed #cfcfc9;box-shadow:none}
.soon-thumb{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:transparent}
.soon-mark{font-weight:800;letter-spacing:.18em;color:#b3b3ad;font-size:clamp(20px,2.4vw,30px)}
.study-card.soon:hover{transform:none;box-shadow:none}

/* ---------- STERLING SHEET GALLERY ---------- */
.meet-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.meet-img img{border-radius:30px;box-shadow:var(--shadow);width:100%;display:block;aspect-ratio:4/5;object-fit:cover;object-position:top}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px}
.sheet-item{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow2)}
.sheet-item img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.sheet-item figcaption{padding:9px 12px;font-size:12.5px;color:var(--muted)}
.sheet-sub{display:flex;align-items:center;gap:14px;margin:36px 0 14px}
.sheet-sub h3{margin:0;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);flex:none}
.sheet-sub::after{content:"";height:1px;flex:1;background:var(--line)}

@media(max-width:960px){
  .study-grid{grid-template-columns:1fr}
  .meet-grid{grid-template-columns:1fr;gap:28px}
}

/* kicker carries a longer string now (availability line), so let it wrap as a
   rounded box on phones instead of stretching a pill past the viewport */
@media(max-width:640px){
  .kicker{max-width:100%;border-radius:16px;align-items:flex-start;gap:8px;padding:10px 12px;font-size:12px;line-height:1.4}
}
.sheet-grid.two-up{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.sheet-item.sheet-wide img{aspect-ratio:auto;object-fit:contain;background:#0d0d0d}
.work-grid.half{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.work-grid.half{grid-template-columns:1fr}}

/* --- case study: the ad study (stats+notes | 2x2 inputs | video + script) --- */
.study{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.study-thinking{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 22px 16px;box-shadow:var(--shadow2);display:flex;flex-direction:column;gap:10px}
.study-thinking h3{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.study-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.study-stats div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 13px 9px}
.study-stats b{display:block;font-size:23px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.study-stats span{display:block;margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.study-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.study-notes li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.study-notes li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.study-notes b{display:block;margin-bottom:1px;color:var(--ink);font-weight:600}
.study-shots{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px;min-height:100%;align-content:space-between}
.study-shot{display:flex;flex-direction:column;margin:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow2);min-height:180px;align-self:start}
.study-shot img{flex:1 1 auto;min-height:0;width:100%;display:block;object-fit:contain;background:var(--soft);cursor:zoom-in}
.study-shot:hover img{opacity:.95}
.study-shot figcaption{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid var(--line);background:var(--panel)}
.study-shot figcaption .k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.study-shot figcaption .n{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em;text-align:right}
.study-output{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;align-items:stretch}
.study-output .work-card{height:100%;display:flex;flex-direction:column}
.study-output .work-card .work-frame{flex:0 0 auto}
.study-output .work-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start}
.study-output .work-meta{margin-top:auto;padding-top:12px}
.script-scroll{height:min(62vh,520px)}
.script{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow2);overflow:hidden;display:flex;flex-direction:column}
.script-head{padding:17px 20px 15px;border-bottom:1px solid var(--line)}
.script-head h3{margin:0 0 4px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.script-head p{margin:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.script-body{flex:1 1 auto;min-height:0;padding:14px 20px 20px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* the script card scrolls only when it would outgrow its row: capped single-column body */
.script-body::-webkit-scrollbar{width:8px}
.script-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.script-clip{margin:16px 0 6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);break-inside:avoid;break-after:avoid}
.script-body .script-clip:first-child{margin-top:2px}
.script-line{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;line-height:1.45;break-inside:avoid}
.script-line:last-child{border-bottom:none}
.script-line .t{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.script-line .d{color:var(--ink)}
.script-line .d.act{color:var(--muted)}
.script-line .who{display:block;margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media(max-width:860px){
  .study,.study-output{grid-template-columns:1fr}
  .study-shots{grid-template-rows:auto}
  .study-shot{min-height:0}
  .study-shot img{flex:0 0 auto;height:auto}
    .study-output .work-card{height:auto}
}



/* hover-safe corners: a transformed child escapes the parent's rounded clip, which is what
   flickers on hover. Whichever edge a child paints against, it carries that radius itself.
   Base cards put the poster on the LEFT (grid 160px + copy); the study output cards stack it
   on top (flex column), so each case gets its own corners. */
.work-card{isolation:isolate}
.work-card:hover{will-change:transform}
.work-frame{border-radius:calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px)}
.study-output .work-frame{border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}
.study-output.vertical .work-frame{border-radius:calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px)}
.work-frame img,.play-badge{border-radius:inherit}

/* gallery tiles: portraits, expressions, study shots - same lift as the work cards, and the
   radius carried by the image and the caption so a scaled image cannot square the corners */
.sheet-item,.study-shot{transition:transform .2s ease,box-shadow .2s ease}
.sheet-item:hover,.study-shot:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sheet-item img,.study-shot img,.gfx-cell img{transition:transform .35s ease,opacity .25s ease}
.sheet-item:hover img,.study-shot:hover img,.gfx-cell:hover img{transform:scale(1.04)}
.sheet-item img{border-top-left-radius:15px;border-top-right-radius:15px}
.sheet-item figcaption{border-bottom-left-radius:15px;border-bottom-right-radius:15px}
.study-shot img{border-top-left-radius:15px;border-top-right-radius:15px}
.study-shot figcaption{border-bottom-left-radius:15px;border-bottom-right-radius:15px}
.gfx-cell img{border-top-left-radius:calc(var(--radius-sm) - 1px);border-top-right-radius:calc(var(--radius-sm) - 1px)}

/* vertical piece: portrait poster beside the copy, so the card matches the script panel */
.study-output.vertical .work-card{display:grid;grid-template-columns:182px 1fr;align-items:stretch}
.study-output.vertical .work-frame{aspect-ratio:auto;height:100%;min-height:302px}
.study-output.vertical .work-body{padding:18px 22px 18px;display:flex;flex-direction:column}
.study-output.vertical .work-body h3{font-size:18px}
.study-output.vertical .work-meta{margin-top:auto;padding-top:11px}
@media(max-width:860px){
  .study-output.vertical .work-card{grid-template-columns:140px 1fr}
  .study-output.vertical .work-frame{min-height:240px}
}
@media(prefers-reduced-motion:reduce){
  .sheet-item:hover,.study-shot:hover,.sheet-item:hover img,.study-shot:hover img,.gfx-cell:hover img{transform:none}
}

/* a study with no storyboard: three tiles, two sheets stacked beside the location, so the
   block still fills the column it sits in rather than leaving a hole in the 2x2 */
.study-shots.three .study-shot:nth-child(1){grid-area:1 / 1 / 2 / 2}
.study-shots.three .study-shot:nth-child(2){grid-area:2 / 1 / 3 / 2}
.study-shots.three .study-shot:nth-child(3){grid-area:1 / 2 / 3 / 3}
/* proof links: the status line points at the work it means */
.case-proof a{color:var(--blue2);font-weight:600;text-decoration:underline;text-underline-offset:3px}