/* ---- Form site mockups: shared system ----
   Two themes = the two sides of the brand fork.
   [data-theme="site"]  — website lineage: cool dark base, orange, Gotham/Whitney
   [data-theme="guide"] — design-guidelines tokens: paper/slate, amber, Jost/Open Sans
   Rules applied from Form-Films-Design-Guidelines.md: type scale 1.3, leading 1.4,
   measure 1.6, caps kickers 1.5, 8px spacing 4.2, accent budget 2.2, contrast 2.4. */

:root { --ease: cubic-bezier(.22,.9,.24,1); }

[data-theme="site"] {
  --base:#0f141b; --panel:#161a21; --ink:#e8eaee; --muted:#aab2bd; --line:#232a34;
  --accent:#f38b3c; --accent-ink:#101317; /* dark text on accent fills — checklist #6 */
  --font-display:"Gotham A","Gotham B","Montserrat",system-ui,sans-serif;
  --font-body:"Whitney A","Whitney B","Segoe UI",system-ui,sans-serif;
  --scrim:15,20,27;
}
[data-theme="guide"] {
  --base:#f6f7f8; --panel:#ffffff; --ink:#34373d; --muted:#7d818b; --line:#e3e5ea;
  --accent:#f5a623; --accent-ink:#34373d;
  --font-display:"Jost",system-ui,sans-serif;
  --font-body:"Open Sans",system-ui,sans-serif;
  --scrim:52,55,61;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:clip; } /* clip (not hidden): kills sideways scroll WITHOUT killing position:sticky */
body { background:var(--base); color:var(--ink); font-family:var(--font-body);
  font-size:17px; line-height:1.6; overflow-x:clip; max-width:100%; transition:background .5s, color .5s; }

h1,h2,h3 { font-family:var(--font-display); font-weight:500; letter-spacing:-.015em; }
h1 { font-size:clamp(44px,7.2vw,104px); line-height:1.06; }
h2 { font-size:clamp(30px,3.4vw,44px); line-height:1.12; }
h3 { font-size:22px; line-height:1.2; }
p  { max-width:58ch; color:var(--muted); }
.measure { max-width:58ch; }

.eyebrow { font-family:var(--font-display); font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink); display:inline-flex;
  align-items:center; gap:12px; }
.eyebrow::before { content:""; width:28px; height:3px; background:var(--accent); } /* accent = rule, not text (§2.4) */

section { padding:96px 8vw; }
.tight { padding-top:48px; }

/* ---- grain (Kevin: keep) — viewport-sized + bg-position anim; the old 200% fixed layer w/ live SVG filter caused periodic GPU re-raster flashes at the top (7/13) ---- */
.grain { position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite; }
[data-theme="guide"] .grain { opacity:.035; }
@keyframes grain { 0%,100%{background-position:0 0} 20%{background-position:-45px 15px} 40%{background-position:-15px 75px} 60%{background-position:45px 0} 80%{background-position:9px 105px} }

/* ---- scroll-driven spectrum bar (Sandwich mechanism: hard stops, slides at 2x scroll) ---- */
.spectrum, .spectrum-underline::after {
  --stops: var(--accent) 0 25%, color-mix(in srgb, var(--accent) 70%, #fff) 25% 50%,
           color-mix(in srgb, var(--accent) 55%, #000) 50% 75%, var(--accent) 75% 100%;
}
.spectrum { height:6px; width:100%;
  background-image:linear-gradient(90deg, var(--stops));
  background-size:150vw 100%; background-position-x:var(--scrollPos,0px); }
.spectrum-underline { position:relative; display:inline-block; }
.spectrum-underline::after { content:""; position:absolute; left:0; right:0; bottom:-.17em; height:.13em;
  z-index:-1; /* behind the glyphs — descenders stay clean */
  background-image:linear-gradient(90deg, var(--stops));
  background-size:100vw 100%; background-position-x:var(--scrollPos,0px); }

/* ---- CTA system ---- */
.btn { pointer-events:auto; display:inline-block; position:relative; overflow:hidden; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  padding:18px 34px; border-radius:999px; border:1px solid var(--accent);
  color:var(--ink); background:transparent; text-decoration:none; }
/* committed: flip-label + accent sweep; dark text on accent fill (checklist #6) */
.btn-flip { display:inline-grid; line-height:1.2; }
.btn-flip .label { grid-area:1/1; place-self:center; position:relative; z-index:1; white-space:nowrap;
  transition:transform .38s var(--ease); }
.btn-flip .label.alt { transform:translateY(200%); color:var(--accent-ink); }
.btn-flip::before { content:""; position:absolute; inset:0; background:var(--accent);
  transform:translateY(101%); transition:transform .38s var(--ease); z-index:0; border-radius:inherit; }
.btn-flip:hover::before { transform:translateY(0); }
.btn-flip:hover .label.main { transform:translateY(-200%); }
.btn-flip:hover .label.alt { transform:translateY(0); }
/* variant B: sweep only */
.btn-sweep::before { content:""; position:absolute; inset:0; background:var(--accent);
  transform:translateX(-101%); transition:transform .3s var(--ease); border-radius:inherit; }
.btn-sweep span { position:relative; z-index:1; transition:color .3s; }
.btn-sweep:hover::before { transform:translateX(0); }
.btn-sweep:hover span { color:var(--accent-ink); }
/* secondary: text + circled arrow that fills and tilts on hover */
.btn-under { border:none; border-radius:0; padding:10px 0; overflow:visible;
  display:inline-flex; align-items:center; gap:13px; }
.btn-under span { transition:transform .35s var(--ease); }
.btn-under::after { content:"→"; flex:none; width:38px; height:38px; border:1.5px solid var(--accent);
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; color:var(--accent);
  transition:background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease); }
.btn-under:hover span { transform:translateX(4px); }
.btn-under:hover::after { background:var(--accent); color:var(--accent-ink);
  transform:rotate(-45deg) scale(1.1); }

/* ---- reveals (Sandwich shuffle-cascade) ---- */
.rv { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity:1; transform:none; }
.d1{transition-delay:.05s}.d2{transition-delay:.1s}.d3{transition-delay:.15s}.d4{transition-delay:.2s}.d5{transition-delay:.25s}.d6{transition-delay:.3s}

/* ---- self-drawing margin hairlines (USVC) ---- */
.hairline { position:fixed; top:0; bottom:0; width:1px; background:var(--line); z-index:30;
  transform:scaleY(var(--scrollProg,0)); transform-origin:0 0; }
.hairline.l { left:4vw; } .hairline.r { right:4vw; }

/* ---- nav (slate-style, solid on scroll) ---- */
nav.bar { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:18px 8vw; transition:background .3s, box-shadow .3s; }
nav.bar.solid { background:color-mix(in srgb, var(--base) 92%, transparent); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line); }
nav.bar .logo { font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.28em; color:var(--ink); text-decoration:none; }
nav.bar .links { display:flex; gap:32px; }
nav.bar .links a { color:var(--muted); text-decoration:none; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; font-family:var(--font-display); font-weight:500; }
nav.bar .links a:hover { color:var(--ink); }

/* ---- theme switcher chrome ---- */
.themer { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:60; display:flex; gap:6px;
  background:color-mix(in srgb, var(--base) 80%, transparent); border:1px solid var(--line);
  padding:6px; border-radius:999px; backdrop-filter:blur(8px); }
.themer button { border:0; background:transparent; color:var(--muted); font:600 11px/1 var(--font-display);
  letter-spacing:.1em; text-transform:uppercase; padding:9px 16px; border-radius:999px; cursor:pointer; }
.themer button.on { background:var(--accent); color:var(--accent-ink); }

/* ---- logo lean-in: the mark IS a film strip ---- */
.glyph { display:inline-block; width:15px; height:15px; vertical-align:-2px;
  background:var(--accent); -webkit-mask:url(form-mark.svg) center/contain no-repeat; mask:url(form-mark.svg) center/contain no-repeat; }
nav.bar .logo { display:flex; align-items:center; gap:12px; }
nav.bar .logo .glyph { width:22px; height:22px; background:var(--ink); }
/* divider: traveling light — a glint of the house color sweeps along a hairline with scroll */
.filmstrip { height:3px; position:relative; background-color:var(--base); /* opaque: the color sweep rides a solid band — never see-through (Jeremiah 7/22) */
  background-image:
    linear-gradient(90deg, transparent 0 34%, color-mix(in srgb, var(--accent) 55%, transparent) 44%,
      var(--accent) 50%, color-mix(in srgb, var(--accent) 55%, transparent) 56%, transparent 66% 100%),
    linear-gradient(var(--line), var(--line));
  background-size:90vw 3px, 100% 1px;
  background-position:var(--scrollPos,0px) center, 0 center;
  background-repeat:repeat-x, no-repeat; }
/* giant watermark mark */
.watermark { position:absolute; right:-4vw; bottom:-6vh; width:56vh; height:56vh; opacity:.05; pointer-events:none;
  background:var(--ink); -webkit-mask:url(form-mark.svg) center/contain no-repeat; mask:url(form-mark.svg) center/contain no-repeat;
  transform:translateY(calc(var(--scrollProg,0) * -6vh)); }

/* ---- mouse-tracked light in negative space (USVC-decoded; idle = wandering) ---- */
.mouselight { position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,70%) var(--my,30%),
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%); }
[data-theme="guide"] .mouselight { background:radial-gradient(560px circle at var(--mx,70%) var(--my,30%),
    color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }

/* ---- client marquee ---- */
.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; }
.marquee .track { display:flex; gap:72px; width:max-content; animation:mq 36s linear infinite; }
.marquee span { font-family:var(--font-display); font-weight:500; font-size:15px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.marquee span i { font-style:normal; color:var(--accent); margin-right:72px; }
@keyframes mq { to { transform:translateX(-50%); } }

/* ---- editorial services index (rows, not boxes) ---- */
.index { border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:32px;
  padding:34px 0; border-bottom:1px solid var(--line); cursor:pointer; position:relative; }
.row .no { font-family:var(--font-display); font-weight:500; font-size:15px; color:var(--muted); letter-spacing:.1em; }
.row .nm { font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.2vw,44px);
  line-height:1.05; letter-spacing:-.015em; transition:transform .35s var(--ease); }
.row .ds { font-size:14px; color:var(--muted); max-width:34ch; text-align:right; opacity:.6; transform:translateX(10px);
  transition:all .35s var(--ease); }
.row:hover .nm { transform:translateX(16px); }
.row:hover .ds { opacity:1; transform:none; }
.row::before { content:""; position:absolute; left:-8vw; right:-8vw; top:0; bottom:0; background:var(--panel);
  opacity:0; transition:opacity .35s; z-index:-1; }
.row:hover::before { opacity:1; }

/* ---- huge stat numerals (guidelines: hero data number 120-200) ---- */
.bigstat .num { font-family:var(--font-display); font-weight:600; font-size:clamp(88px,10vw,170px);
  line-height:.95; letter-spacing:-.02em; color:var(--ink); }
.bigstat .num em { font-style:normal; color:var(--accent); }
[data-theme="guide"] .bigstat .num em { color:var(--ink); }
.bigstat { border-top:4px solid var(--accent); padding-top:20px; }
.bigstat .lbl { margin-top:12px; font-size:15px; color:var(--muted); max-width:26ch; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity:1; transform:none; transition:none; }
  .grain { animation:none; }
  .marquee .track { animation:none; }
}

/* breadcrumb tail collapses before it can jam into the links */
@media (max-width: 1230px) { .crumb { display:none !important; } }

/* ================= MOBILE NAV (hamburger) ================= */
.famnav .hamb { display:none; }
.famnav .hamb span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s; }
.famnav .hamb span + span { margin-top:5px; }
.famnav .hamb.x span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.famnav .hamb.x span:nth-child(2){ opacity:0; }
.famnav .hamb.x span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:820px){
  .famnav { padding:16px 6vw; }
  .famnav .hamb { display:block; background:none; border:0; cursor:pointer; padding:6px; z-index:52; }
  .famnav .links { position:fixed !important; top:58px; left:0; right:0; z-index:51;
    display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important;
    background:color-mix(in srgb, var(--base) 98%, transparent); backdrop-filter:blur(14px);
    padding:8px 6vw 24px; box-shadow:0 16px 40px rgba(0,0,0,.5); max-height:calc(100vh - 58px); overflow:auto;
    /* mobile menu stays fully hidden until the hamburger opens it — the desktop scroll-reveal rule
       (.famnav.scrolled .links{opacity:1;transform:none}) must NOT auto-pop it open on mobile */
    transform:translateY(-130%) !important; opacity:0 !important; pointer-events:none !important;
    transition:transform .38s var(--ease), opacity .38s var(--ease); }
  .famnav .links.open { transform:none !important; opacity:1 !important; pointer-events:auto !important; }
  .famnav .links a { margin:0 !important; padding:16px 2px !important; width:100% !important; display:block !important;
    font-size:14px; border-bottom:1px solid var(--line); letter-spacing:.12em; }
  .famnav .links a.navcta { margin:16px 0 0 !important; text-align:center; padding:15px;
    border-bottom:0; border-radius:999px; }
}

/* ================= CONTACT MODAL (shared, injected by mock.js) ================= */
dialog.contact { border:0; padding:0; margin:auto; border-radius:18px; width:min(920px,94vw); max-height:90vh;
  background:var(--panel); color:var(--ink); overflow:hidden; }
dialog.contact::backdrop { background:rgba(0,0,0,.66); backdrop-filter:blur(6px); }
.contactWrap { display:grid; grid-template-columns:1fr; max-height:90vh; }
.contactForm { padding:44px 44px 40px; overflow:auto; }
.contactForm .ck { font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:12px; }
.contactForm .ck::before { content:""; width:28px; height:3px; background:var(--accent); }
.contactForm h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.02em; margin-top:14px; line-height:1.05; }
.contactForm p.sub { color:var(--muted); font-size:15px; margin-top:10px; }
.cfield { margin-top:18px; }
.cfield label { display:block; font-family:var(--font-display); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.cfield input, .cfield select, .cfield textarea { width:100%; background:var(--base); border:1px solid var(--line);
  border-radius:10px; color:var(--ink); font-family:var(--font-body); font-size:15px; padding:13px 14px; }
.cfield input:focus, .cfield select:focus, .cfield textarea:focus { outline:none; border-color:var(--accent); }
.cfield textarea { resize:vertical; min-height:96px; }
.crow { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contactForm .send { margin-top:24px; }
.cx { position:absolute; top:14px; right:14px; z-index:5; width:38px; height:38px; border-radius:999px; border:0;
  background:rgba(255,255,255,.12); color:var(--ink); font-size:16px; cursor:pointer; }






.jennyAvatar { width:100%; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--base);
  border:1px solid var(--line); margin-bottom:20px; display:flex; align-items:center; justify-content:center; position:relative; }
.jennyAvatar img { width:100%; height:100%; object-fit:cover; object-position:26% 18%; display:block; }
.jennyAvatar span { font-family:var(--font-display); font-weight:700; font-size:52px; color:var(--accent); }
.jennyAvatar::after { content:""; position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 4px color-mix(in srgb,#3ddc84 25%,transparent); }
.contactDone { padding:70px 44px; text-align:center; display:none; }
.contactDone.on { display:block; }
.contactDone .big { font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.4vw,42px); letter-spacing:-.02em; }
.contactDone p { color:var(--muted); margin-top:14px; }
.contactDone .chk { width:64px; height:64px; border-radius:999px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-size:30px; }
@media (max-width:760px){ .contactWrap { grid-template-columns:1fr; } 
  .jennyAvatar { max-width:160px; margin-inline:auto; } .contactForm { padding:38px 26px 30px; } }

/* ================= work/creative tile razzle-dazzle ================= */
.ctile { transition:transform .45s cubic-bezier(.22,.9,.24,1), box-shadow .45s; will-change:transform; }
.ctile:hover { transform:translateY(-7px);
  box-shadow:0 26px 55px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.ctile::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.16) 48%, transparent 64%); }
.ctile:hover::after { opacity:1; animation:tileShine .9s cubic-bezier(.22,.9,.24,1); }
@keyframes tileShine { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.ctile .peekplay { position:absolute; top:44%; left:50%; transform:translate(-50%,-50%) scale(.5); z-index:4;
  width:62px; height:62px; border-radius:50%; background:color-mix(in srgb, var(--accent) 90%, #000); color:#fff;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  box-shadow:0 8px 26px rgba(0,0,0,.5); transition:opacity .4s var(--ease), transform .45s cubic-bezier(.22,.9,.24,1); }
.ctile:hover .peekplay { opacity:1; transform:translate(-50%,-50%) scale(1); }
.ctile .meta { transition:transform .4s var(--ease); }
.ctile:hover .meta { transform:translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .ctile::after, .ctile .peekplay { display:none; } .ctile:hover { transform:none; } }

/* ================= site-wide micro-polish ================= */
/* nav + footer links: underline draws in on hover */
.famnav .links a:not(.navcta), .fcol a { position:relative; }
.famnav .links a:not(.navcta)::after, .fcol a::after { content:""; position:absolute; left:0; bottom:-2px;
  height:1.5px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease); }
.famnav .links a:not(.navcta):hover::after, .fcol a:hover::after { transform:scaleX(1); }
/* client logo marquee pauses when you hover it */
.marquee:hover .track { animation-play-state:paused; }
/* formcast studio photos get the work-tile lift + shine */
.studiogrid figure { transition:transform .45s cubic-bezier(.22,.9,.24,1), box-shadow .45s; }
.studiogrid figure:hover { transform:translateY(-5px);
  box-shadow:0 20px 44px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.studiogrid figure::after { content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.14) 48%, transparent 64%); }
.studiogrid figure:hover::after { opacity:1; animation:tileShine .9s cubic-bezier(.22,.9,.24,1); }
/* primary pill CTA: subtle sheen on hover */
.navcta { position:relative; overflow:hidden; }
.navcta::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; opacity:0;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); }
.navcta:hover::after { opacity:1; animation:ctaSheen .7s var(--ease); }
@keyframes ctaSheen { from{left:-60%} to{left:120%} }
@media (prefers-reduced-motion: reduce) { .studiogrid figure::after, .navcta::after { display:none; } }

/* ================= pillar / way cards: sparkle (works inside clipped grids) ================= */
.pillar, .way { position:relative; overflow:hidden; }
.pillar > *, .way > * { position:relative; z-index:2; }
/* light sweep on hover */
.pillar::after, .way::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.09) 50%, transparent 66%); }
.pillar:hover::after, .way:hover::after { opacity:1; animation:tileShine 1s cubic-bezier(.22,.9,.24,1); }
/* accent tick before the eyebrow — a resting detail that grows on hover */
.pillar .pn::before, .way .wn::before { content:""; display:inline-block; width:14px; height:2px;
  background:var(--hc, var(--accent)); vertical-align:middle; margin-right:9px; transition:width .35s var(--ease); }
.pillar:hover .pn::before, .way:hover .wn::before { width:26px; }
/* content eases over on hover */
.pillar .pn, .pillar h3, .way .wn, .way h3 { transition:transform .35s var(--ease), color .3s; }
.pillar:hover .pn, .pillar:hover h3, .way:hover .wn, .way:hover h3 { transform:translateX(4px); }
@media (prefers-reduced-motion: reduce) { .pillar::after, .way::after { display:none; } }

/* ================= mobile readability + case-modal fixes (from 2026-07-07 eval) ================= */
@media (max-width:820px){
  /* case-study hero: cinemascope is too short on phones — give it height so the play button
     and the title stop colliding */
  .caseHero { aspect-ratio:4/3 !important; }
  /* play button to the top-right corner so it never lands on the title */
  .caseHero .playb { top:18px !important; left:18px !important; right:auto !important; bottom:auto !important;
    transform:none !important; width:54px !important; height:54px !important; }
  .caseHero .playb:hover { transform:scale(1.08) !important; }
  .caseHero .head { left:22px !important; right:22px !important; bottom:22px !important; }
  .caseHero .head h2 { font-size:22px !important; }
  .caseHero .fade { background:linear-gradient(180deg, transparent 22%, rgba(10,13,18,.62) 55%, rgba(10,13,18,.94) 100%) !important; }
  /* small-label legibility floor: nothing meaningful below ~12px on mobile */
  .pill, .mi, .cl, .open, .dst, .dmeta, .dcomps, .st, .sg, .pn, .wn,
  .fcol a, .fcol h5, .metaBar .mi, .caseStats .lbl, .kick { font-size:12px !important; }
  .fcol a { line-height:1.5; }
  /* hamburger menu links a touch larger + easier to tap */
  .famnav .links a { font-size:15px !important; padding:17px 2px !important; }
}

/* ================= mobile declutter (2026-07-07): calm the small screen ================= */
@media (max-width:820px){
  /* right-side facet index rail — overlaps content and duplicates the roster marks on phones */
  .rail { display:none !important; }
  /* cursor-follow glow — there is no cursor on touch; it just muddies the canvas */
  .mouselight { display:none !important; }
  /* scroll indicators — not needed on mobile */
  .scrolldown, .hbar, .hbar2 { display:none !important; }
  /* oversized ghost outline words — too noisy behind small-screen type */
  [class*="ghost"] { display:none !important; }
}

/* ================= mobile pass 2 (2026-07-07, Fable): editorial kickers + wrap-safe CTA rows ================= */
@media (max-width:820px){
  /* kickers: kill the two-column split with the dangling "·" — bar above, text flows as one line of prose */
  .kick { display:block !important; }
  .kick::before { display:block !important; margin-bottom:14px; }
  /* any side-by-side button row wraps instead of clipping off-screen
     (!important also beats the inline styles on films/about CTA rows) */
  .cta, .ctas, .dlinks, div[style*="display:flex"][style*="gap:22px"] {
    flex-wrap:wrap !important; row-gap:16px !important; }
}

/* tile meta stays legible on light posters (Legume et al.) */
.ctile .meta { text-shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.45); }

/* ================= service-page cinematic hero (2026-07-09) ================= */
/* a real, on-topic work still bleeds in from the right, heavily scrimmed on the left
   so the SEO headline stays crisp. Doubles as proof; replaces the ghost outline word. */
.hero.cine { background-image:
    linear-gradient(90deg, var(--base) 0%, var(--base) 33%, color-mix(in srgb, var(--base) 48%, transparent) 64%, color-mix(in srgb, var(--base) 82%, transparent) 100%),
    linear-gradient(0deg, var(--base) 2%, transparent 42%, transparent 74%, color-mix(in srgb, var(--base) 55%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    var(--cine);
  background-size:cover, cover, cover, cover;
  background-position:center, center, center, center right;
  background-repeat:no-repeat; }
.hero.cine .ghostF { display:none; }
@media (max-width:820px){
  .hero.cine { background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--base) 32%, transparent) 0%, color-mix(in srgb, var(--base) 58%, transparent) 36%, var(--base) 66%, var(--base) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent 46%),
      var(--cine);
    background-size:cover, cover, 135% auto; background-position:center, center, center top; }
}

/* ================= service-page proof cut: a full-bleed cinematic still + caption ================= */
.proofcut { position:relative; height:min(56vh,540px); overflow:hidden; }
.proofcut .cutlink { display:block; position:absolute; inset:0; text-decoration:none;
  background-image:var(--cut); background-size:cover; background-position:var(--cutpos, center);
  transition:transform 1.1s var(--ease); }
.proofcut:hover .cutlink { transform:scale(1.04); }
/* darken top + bottom so bright frames blend into the dark site and the caption stays legible */
.proofcut .cutlink::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,20,27,.55) 0%, rgba(15,20,27,.14) 20%, transparent 40%, rgba(15,20,27,.55) 78%, rgba(15,20,27,.92) 100%); }
.proofcut .cutlink::before { content:""; position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(0deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%); transition:opacity .4s; }
.proofcut:hover .cutlink::before { opacity:1; }
.proofcut .cutcap { position:absolute; left:8vw; right:8vw; bottom:34px; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; pointer-events:none; }
.proofcut .cl { font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.4vw,30px);
  letter-spacing:-.01em; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.proofcut .cd { font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; opacity:.9; display:inline-flex; align-items:center; gap:10px; }
.proofcut .cd .arw { transition:transform .35s var(--ease); }
.proofcut:hover .cd .arw { transform:translateX(6px); }
@media (max-width:820px){ .proofcut { height:44vh; } .proofcut .cutcap { flex-direction:column; align-items:flex-start; gap:8px; } }

/* contact form: sending state */
.contactForm.sending { opacity:.7; }
.contactForm.sending .send .btn { pointer-events:none; }

/* ================= Atlas "Find Your Story" (Jenny) experience ================= */
.jx-overlay { position:fixed; inset:0; z-index:220; background:rgba(0,0,0,.9); display:none;
  align-items:center; justify-content:center; padding:3vh 3vw; }
.jx-overlay.on { display:flex; }
.jx-frame { position:relative; width:100%; height:100%; max-width:1360px; max-height:760px;
  border-radius:16px; overflow:hidden; background:var(--base); box-shadow:0 40px 120px rgba(0,0,0,.6); }
.jx-close { position:absolute; top:16px; right:18px; z-index:6; width:42px; height:42px; border-radius:999px;
  border:0; background:rgba(255,255,255,.14); color:#fff; font-size:17px; cursor:pointer; backdrop-filter:blur(6px);
  transition:background .2s; }
.jx-close:hover { background:rgba(255,255,255,.28); }
.jx-stage { width:100%; height:100%; display:flex; flex-direction:row; background:var(--base); }
/* video side */
.jx-video { position:relative; flex:0 0 55%; overflow:hidden; background:#000; }
.jx-video mux-player { width:100%; height:100%; display:block; }
.jx-scrim { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, transparent 55%, color-mix(in srgb, var(--panel) 60%, transparent) 85%, var(--panel) 100%); }
.jx-cap { position:absolute; left:20px; right:20px; bottom:22px; z-index:3;
  background:rgba(5,7,12,.72); backdrop-filter:blur(8px); border:1px solid var(--line);
  border-radius:12px; padding:13px 16px; pointer-events:none; }
.jx-cap-n { display:block; font-family:var(--font-display); font-weight:700; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
.jx-cap p { margin:0; font-size:14px; line-height:1.45; color:rgba(255,255,255,.92); font-style:italic; max-width:none; }
/* panel side */
.jx-panel { position:relative; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-start;
  padding:70px 52px 52px; background:var(--panel); overflow-y:auto; }
.jx-prog { position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.08); }
.jx-prog-fill { height:100%; background:var(--accent); transition:width .6s cubic-bezier(.4,0,.2,1); }
.jx-back { position:absolute; top:20px; left:52px; display:inline-flex; align-items:center; gap:6px;
  color:var(--muted); font-family:var(--font-display); font-weight:600; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; background:none; border:0; cursor:pointer; padding:0; transition:color .2s; }
.jx-back:hover { color:var(--ink); }
.jx-content { max-width:560px; opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.jx-content.jx-in { opacity:1; transform:none; }
.jx-eyebrow { font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent); margin:0 0 16px; }
.jx-q { font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.2;
  color:var(--ink); margin:0 0 26px; letter-spacing:-.01em; }
.jx-choices { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.jx-choice { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:11px; padding:16px 18px;
  color:var(--ink); font-family:var(--font-display); font-size:14.5px; text-align:left; cursor:pointer;
  transition:border-color .2s, background .2s, transform .15s; }
.jx-choice svg { color:rgba(255,255,255,.3); flex-shrink:0; transition:color .2s, transform .2s; }
.jx-choice:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); transform:translateX(3px); }
.jx-choice:hover svg { color:var(--accent); transform:translateX(2px); }
.jx-skip { display:inline-block; margin-top:18px; background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:var(--font-display); font-size:12px; color:var(--muted); transition:color .2s; }
.jx-skip:hover { color:var(--accent); }
.jx-th { font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem,2.8vw,2.5rem); line-height:1.15;
  color:var(--ink); margin:0 0 16px; letter-spacing:-.015em; }
.jx-td { font-size:15.5px; line-height:1.65; color:var(--muted); margin:0 0 22px; max-width:none; }
.jx-ex { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; padding:10px 14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; }
.jx-exl { font-family:var(--font-display); font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.jx-exlist a { color:var(--ink); text-decoration:none; font-size:13.5px; }
.jx-exlist a:hover { color:var(--accent); }
.jx-sep { color:var(--muted); }
.jx-note { font-size:13px; line-height:1.5; color:var(--muted); margin:0 0 22px; font-style:italic; }
.jx-ctas { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.jx-primary { font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.04em;
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:999px; padding:15px 26px; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s; }
.jx-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.jx-secondary { font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink);
  text-decoration:none; padding:15px 4px; }
.jx-secondary:hover { color:var(--accent); }
.jx-restart { margin-top:26px; align-self:flex-start; background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.jx-restart:hover { color:var(--ink); }
@media (max-width:820px){
  .jx-overlay { padding:0; }
  .jx-frame { border-radius:0; max-height:none; height:100%; }
  .jx-stage { flex-direction:column; }
  .jx-video { flex:0 0 38%; }
  .jx-scrim { background:linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--panel) 70%, transparent) 85%, var(--panel) 100%); }
  .jx-panel { padding:26px 24px 40px; flex:1; }
  .jx-back { left:24px; }
  .jx-cap { bottom:14px; }
}

/* ================= homepage "Find your story" launch (Jenny/Atlas) ================= */
.findstory { margin-top:38px; align-self:flex-start; display:inline-flex; align-items:center; gap:20px; cursor:pointer;
  background:color-mix(in srgb, var(--panel) 82%, transparent); border:1px solid var(--line);
  border-radius:999px; padding:12px 22px 12px 12px; text-align:left; max-width:100%;
  transition:transform .35s var(--ease), border-color .35s, background .35s; backdrop-filter:blur(6px); }
.findstory:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 60%, var(--line));
  background:color-mix(in srgb, var(--panel) 94%, transparent); }
.fs-face { position:relative; width:56px; height:56px; border-radius:999px; overflow:hidden; flex:none;
  border:1px solid var(--line); }
.fs-face img { width:100%; height:100%; object-fit:cover; object-position:34% 12%; display:block; }
.fs-live { position:absolute; bottom:3px; right:3px; width:11px; height:11px; border-radius:50%;
  background:#3ddc84; border:2px solid var(--panel); box-shadow:0 0 0 3px color-mix(in srgb,#3ddc84 22%,transparent); }
.fs-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.fs-k { font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); }
.fs-k b { color:var(--accent); }
.fs-t { font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.01em; color:var(--ink); }
.fs-play { flex:none; width:42px; height:42px; border-radius:999px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; margin-left:8px; transition:transform .3s var(--ease); }
.fs-play svg { margin-left:2px; }
.findstory:hover .fs-play { transform:scale(1.08); }
@media (max-width:560px){
  .findstory { gap:14px; padding:10px 16px 10px 10px; width:100%; }
  .fs-face { width:48px; height:48px; }
  .fs-t { font-size:17px; }
  .fs-play { width:38px; height:38px; }
}

/* breadcrumb: the middle crumb ("/ Creative") steps back a level */
.crumblink { transition:opacity .2s; }
.crumblink:hover { opacity:.68; }

/* Atlas product branding — purple wordmark treatment wherever Atlas is named (7/13) */
.atlasword { color:#9d8cff; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.atlas-wordmark { display:block; width:min(300px, 60%); height:auto; opacity:.95; }

/* nav grouping: facets (Creative/Films/Cast) offset from the global group (Work/About) */
.famnav .links .navsep{display:inline-block;width:1px;height:13px;margin:0 6px 0 20px;
  background:color-mix(in srgb, var(--ink) 30%, transparent);vertical-align:middle;opacity:.7}
.famnav .links .navsep + a{margin-left:12px}

/* ===== Atlas Data — representative analytics dashboard (scoped under .atlasdata) ===== */
.atlasdata *{ box-sizing:border-box; }
.atlasdata{ --ad-track:color-mix(in srgb, var(--ink) 9%, transparent);
  --ad-soft:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--ink); }
.atlasdata .ad-lab{ font-family:var(--font-display); font-weight:600; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.atlasdata .ad-rep{ display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; background:color-mix(in srgb, var(--panel) 70%, transparent); }
.atlasdata .ad-rep::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--ad-soft); flex:none; }
.atlasdata .ad-shell{ border:1px solid var(--line); border-radius:20px; padding:22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--panel)), var(--panel)); }
.atlasdata .ad-head{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.atlasdata .ad-head h4{ font-family:var(--font-display); font-weight:600; font-size:17px;
  letter-spacing:-.01em; margin:0; }
.atlasdata .ad-card{ border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--base); }
.atlasdata .ad-grid{ display:grid; gap:14px; grid-template-columns:repeat(12,1fr); }
.atlasdata .ad-c4{ grid-column:span 4; }
.atlasdata .ad-c6{ grid-column:span 6; }
.atlasdata .ad-c12{ grid-column:span 12; }
.atlasdata .ad-kpi .ad-num{ font-family:var(--font-display); font-weight:600; font-size:34px;
  line-height:1; letter-spacing:-.02em; margin:12px 0 0; }
.atlasdata .ad-kpi .ad-num small{ font-size:16px; color:var(--muted); font-weight:600; margin-left:2px; }
.atlasdata .ad-delta{ font-family:var(--font-display); font-weight:600; font-size:11px;
  letter-spacing:.02em; color:var(--accent); margin-top:8px; display:inline-block; }
.atlasdata .ad-delta.flat{ color:var(--muted); }
.atlasdata .ad-ringwrap{ display:flex; align-items:center; gap:20px; }
.atlasdata .ad-ring{ position:relative; width:118px; height:118px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p,0)*1%), var(--ad-track) 0); }
.atlasdata .ad-ring::after{ content:""; position:absolute; inset:11px; border-radius:50%;
  background:var(--base); box-shadow:inset 0 0 0 1px var(--line); }
.atlasdata .ad-ringc{ position:relative; z-index:1; text-align:center; }
.atlasdata .ad-ringc strong{ font-family:var(--font-display); font-weight:600; font-size:26px;
  letter-spacing:-.02em; display:block; }
.atlasdata .ad-ringc span{ font-family:var(--font-display); font-weight:600; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.atlasdata .ad-seg{ display:flex; height:14px; border-radius:999px; overflow:hidden;
  background:var(--ad-track); margin:14px 0 16px; }
.atlasdata .ad-seg i{ display:block; height:100%; }
.atlasdata .ad-seg i:nth-child(1){ background:var(--accent); }
.atlasdata .ad-seg i:nth-child(2){ background:color-mix(in srgb, var(--accent) 62%, var(--panel)); }
.atlasdata .ad-seg i:nth-child(3){ background:color-mix(in srgb, var(--accent) 34%, var(--panel)); }
.atlasdata .ad-legend{ display:grid; gap:10px; }
.atlasdata .ad-legrow{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.atlasdata .ad-legrow b{ color:var(--ink); font-weight:600; }
.atlasdata .ad-dot{ width:9px; height:9px; border-radius:3px; flex:none; }
.atlasdata .ad-dot.d1{ background:var(--accent); }
.atlasdata .ad-dot.d2{ background:color-mix(in srgb, var(--accent) 62%, var(--panel)); }
.atlasdata .ad-dot.d3{ background:color-mix(in srgb, var(--accent) 34%, var(--panel)); }
.atlasdata .ad-legrow .ad-legv{ margin-left:auto; font-family:var(--font-display); font-weight:600;
  color:var(--ink); font-size:13px; }
.atlasdata .ad-rows{ display:grid; gap:14px; margin-top:16px; }
.atlasdata .ad-row .ad-rowtop{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.atlasdata .ad-row .ad-rowtop span{ font-size:13px; color:var(--muted); }
.atlasdata .ad-row .ad-rowtop b{ font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink); }
.atlasdata .ad-bar{ height:8px; border-radius:999px; background:var(--ad-track); overflow:hidden; }
.atlasdata .ad-bar i{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, var(--panel)), var(--accent)); }
.atlasdata .ad-bar i.drop{ opacity:.4; }
.atlasdata .ad-cta{ display:grid; gap:12px; margin-top:14px; }
.atlasdata .ad-ctarow{ display:flex; align-items:center; gap:14px; }
.atlasdata .ad-ctarow .ad-ctan{ font-size:13px; color:var(--ink); min-width:120px; }
.atlasdata .ad-ctarow .ad-bar{ flex:1; }
.atlasdata .ad-ctarow .ad-ctav{ font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--accent); min-width:48px; text-align:right; }
.atlasdata .ad-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.atlasdata.ad-compact{ max-width:100%; }
.atlasdata.ad-compact .ad-shell{ padding:16px; border-radius:14px; margin-top:16px; }
.atlasdata.ad-compact .ad-card{ padding:14px; }
.atlasdata.ad-compact .ad-kpi .ad-num{ font-size:24px; }
.atlasdata.ad-compact .ad-c4, .atlasdata.ad-compact .ad-c6{ grid-column:span 6; }
.atlasdata.ad-compact .ad-ring{ width:88px; height:88px; }
.atlasdata.ad-compact .ad-ringc strong{ font-size:20px; }
@media (max-width:820px){ .atlasdata .ad-c4, .atlasdata .ad-c6{ grid-column:span 12; } }

/* ===== canonical case-study modal (shared via cases.js; single source for pages without inline copies) ===== */
dialog.case { border:0; padding:0; margin:auto; border-radius:18px; width:min(1260px, 96vw);
  height:min(820px, 92vh); background:var(--panel); color:var(--ink); overflow:hidden; }
dialog.case::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(6px); }
dialog.case .caseScroll { height:100%; }
dialog.case .caseCols { display:flex; height:100%; }
dialog.case .cLeft { flex:0 0 44%; min-width:0; padding:24px 0 24px 24px; display:flex; flex-direction:column; overflow-y:auto; }
dialog.case .cRight { flex:1; min-width:0; padding:28px 32px 26px; overflow-y:auto; }
dialog.case .caseHero { position:relative; aspect-ratio:16/9; width:100%; border-radius:12px; overflow:hidden; flex-shrink:0;
  background:#000 center/cover no-repeat; }
@media (max-width:900px){ dialog.case { height:auto; max-height:92vh; } dialog.case .caseScroll { overflow-y:auto; max-height:92vh; }
  dialog.case .caseCols { display:block; height:auto; } dialog.case .cLeft { padding:16px 16px 0; overflow:visible; }
  dialog.case .cRight { padding:20px 16px 22px; overflow:visible; } }
dialog.case .caseHero .playb { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:72px; height:72px; border-radius:50%; border:0; cursor:pointer;
  background:color-mix(in srgb, var(--accent) 88%, #000); color:#fff; display:flex;
  align-items:center; justify-content:center; box-shadow:0 10px 40px rgba(0,0,0,.5);
  transition:transform .35s var(--ease), background .3s; }
dialog.case .caseHero .playb:hover { transform:translate(-50%,-50%) scale(1.12); background:var(--accent); }
dialog.case .caseHero iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
dialog.case .caseHero .fade { position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(10,13,18,.9) 100%); }
dialog.case .caseHero .head { position:absolute; left:20px; right:20px; bottom:14px; color:#fff; }
dialog.case .caseHero .head .ck { font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); }
dialog.case .cRight .sh { font-size:14.5px; line-height:1.6; color:var(--muted); padding-bottom:16px; border-bottom:1px solid var(--line); }
dialog.case .metaBar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:14px 0 0; }
dialog.case .metaBar .mi { font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 13px; }
dialog.case .caseStats { display:flex; gap:18px; padding:16px 0 0; flex-wrap:nowrap; }
dialog.case .caseStats > div { flex:1 1 0; min-width:0; }
dialog.case .caseStats .num { font-family:var(--font-display); font-weight:600; font-size:36px; line-height:1; color:var(--accent); }
dialog.case .caseStats .lbl { font-size:13px; color:var(--muted); margin-top:6px; max-width:20ch; }
dialog.case .story h4 { font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; margin:18px 0 8px; color:var(--accent); }
dialog.case .story p, dialog.case .story li { font-size:13.5px; line-height:1.6; color:var(--muted); }
dialog.case .story ul { margin:0; padding-left:20px; }
dialog.case .story li { margin-bottom:8px; }
dialog.case .cquote { margin:16px 0 0; padding-left:16px; border-left:3px solid var(--accent); }
dialog.case .cquote p { font-size:13.5px; line-height:1.55; color:var(--ink); font-style:italic; }
dialog.case .cquote .who { margin-top:10px; font-size:13px; color:var(--muted); font-style:normal; }
dialog.case .conceptTag { display:inline-block; margin-bottom:12px; font:600 10.5px/1 var(--font-display);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius:999px; padding:7px 12px; }
dialog.case .caseCta { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px;
  padding:16px 20px; background:var(--base); border-radius:12px; flex-wrap:wrap; }
dialog.case .caseCta .line { font-family:var(--font-display); font-size:15px; font-weight:500; }
dialog.case .nextCase { display:flex; justify-content:space-between; align-items:center; margin-top:24px;
  padding-top:20px; border-top:1px solid var(--line); }
dialog.case .nextCase a { color:var(--muted); text-decoration:none; font-family:var(--font-display); font-weight:600;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
dialog.case .nextCase a:hover { color:var(--ink); }
dialog.case .xClose { position:absolute; top:14px; right:14px; z-index:5; width:38px; height:38px; border-radius:999px; border:0;
  background:rgba(0,0,0,.55); color:#fff; font-size:17px; cursor:pointer; }

/* ===== theater-mode case layout (Kevin 7/21): video big at top, stats slide in underneath,
   story told in blocks below. Replaces the 2-column layout; column CSS above kept for legacy. ===== */
dialog.case .caseScroll { overflow-y:auto; }
/* banner-height hero (7/22: full 16:9 pushed everything below the fold) — stats + title
   stay visible without scrolling; the film still gets the full frame once you hit play */
.theater .caseHero { aspect-ratio:auto; height:clamp(240px, 42vh, 400px); width:100%; border-radius:0;
  transition:height .5s var(--ease); }
/* once the film is playing, give it the whole 16:9 stage */
.theater .caseHero.playing { height:auto; aspect-ratio:16/9; }
.theater .caseHero .head { top:22px; left:30px; right:30px; bottom:auto; }
.theater .caseHero .fade { background:linear-gradient(180deg, rgba(10,13,18,.55) 0%, transparent 30%, transparent 55%, rgba(10,13,18,.65) 100%); }
/* title lives BELOW the video (true theater order) — never covered by the stats band */
.theater .thTitle { font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3vw,44px);
  letter-spacing:-.02em; line-height:1.08; color:var(--ink); margin-top:26px; }
.thBody { padding:0 34px 32px; max-width:1120px; margin:0 auto; }
.thStats { display:flex; gap:26px; flex-wrap:nowrap; position:relative; z-index:2; margin-top:20px;
  background:var(--base); border:1px solid var(--line); border-radius:14px; padding:20px 26px;
  animation:thSlide .7s var(--ease) .12s backwards; } /* 7/22: no overlap — never cover the frame */
.thStats > div { flex:1 1 0; min-width:0; }
.thStats .num { font-family:var(--font-display); font-weight:600; font-size:38px; line-height:1; color:var(--accent); }
.thStats .lbl { font-size:13px; color:var(--muted); margin-top:6px; }
@keyframes thSlide { from { opacity:0; transform:translateY(-22px); } }
.thBody .sh { font-size:15.5px; line-height:1.65; color:var(--muted); margin-top:14px; padding-bottom:0; border-bottom:0; }
.thBody .sh b, .thBody .thHookLead { color:var(--ink); font-weight:600; }
.thBody .metaBar { padding-top:16px; }
.thBlocks { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:22px; }
.thCard { background:var(--base); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.thCard h4 { font-family:var(--font-display); font-weight:600; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 10px; color:var(--accent); }
.thCard p, .thCard li { font-size:13.5px; line-height:1.62; color:var(--muted); }
.thCard ul { margin:0; padding-left:18px; }
.thCard li { margin-bottom:8px; }
.thQuote { margin-top:18px; background:var(--base); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:14px; padding:20px 24px; }
.thQuote p { font-size:14.5px; line-height:1.6; color:var(--ink); font-style:italic; }
.thQuote .who { margin-top:10px; font-size:13px; color:var(--muted); font-style:normal; }
@media (max-width:900px){
  .thBody { padding:0 16px 24px; }
  .thBlocks { grid-template-columns:1fr; }
  .thStats { flex-wrap:wrap; gap:16px; margin-top:-20px; padding:16px 18px; }
  .thStats > div { flex:1 1 40%; }
  .theater .caseHero { aspect-ratio:16/10; }
  .theater .caseHero .head { left:18px; right:18px; bottom:16px; }
}

/* merged single footer: copyright rides inside the brand column (7/22) */
.fcopy { margin-top:16px; font-size:12px; color:var(--muted); }

/* Back-to-parent control (Kevin 7/30) — an obvious "up a level" arrow on interior pages */
.backup { position:fixed; top:74px; left:8vw; z-index:47; display:inline-flex; align-items:center; gap:8px;
  font:600 11px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  background:color-mix(in srgb, var(--base) 62%, transparent); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px; padding:9px 15px 9px 12px; text-decoration:none;
  transition:color .2s, border-color .2s, transform .2s; }
.backup:hover { color:var(--ink); border-color:var(--accent); transform:translateX(-3px); }
.backup .bka { font-size:14px; line-height:1; }
@media (max-width:820px){ .backup { top:62px; left:5vw; padding:7px 12px 7px 10px; font-size:10px; } }