/* Business Better · Director's Treatment
   Light, image-led. Brand guide 10-30: Blue, Purple, Cobalt, Pink, Light blue, White, Black.
   Headlines Univers Light, body Open Sans. Act colours: I light blue · II pink · III purple. */

/* Dark is the default. Light mode: html[data-theme="light"] */
:root {
  --blue: #1E49E2; --purple: #7213EA; --cobalt: #00338D; --pink: #FD349C; --lblue: #A1DEFF;
  --navy: #020414;
  --bg: #020414;
  --fg: #ffffff;
  --body: rgba(255, 255, 255, 0.88);
  --mut: rgba(255, 255, 255, 0.74);
  --dim: rgba(255, 255, 255, 0.56);
  --line: rgba(255, 255, 255, 0.2);
  --tint: rgba(255, 255, 255, 0.07);
  --tint-2: rgba(255, 255, 255, 0.12);
  --card: rgba(255, 255, 255, 0.075);
  --card-shadow: 0 0 0 1px rgba(150,170,255,.26), 0 0 22px rgba(70,100,255,.12), 0 0 48px rgba(114,19,234,.08);
  --card-shadow-hover: 0 0 0 1px rgba(170,190,255,.5), 0 0 28px rgba(90,120,255,.28), 0 0 64px rgba(114,19,234,.2), 0 18px 44px rgba(0,0,0,.4);
  --header: rgba(2, 4, 20, 0.86);
  --btn-bg: #ffffff; --btn-fg: #000000;
  --accent: #A1DEFF;
  --pink-text: #FD349C;
  --better-bg: linear-gradient(160deg, rgba(30,73,226,.32), rgba(114,19,234,.24));
  --glow: radial-gradient(ellipse 75% 55% at 0% 0%, rgba(30,73,226,.26), transparent 70%),
          radial-gradient(ellipse 70% 60% at 100% 35%, rgba(114,19,234,.2), transparent 70%),
          radial-gradient(ellipse 70% 50% at 15% 100%, rgba(0,51,141,.32), transparent 70%),
          radial-gradient(ellipse 50% 40% at 100% 100%, rgba(253,52,156,.1), transparent 70%);
  --footer: #010208;

  --a1: #A1DEFF; --a2: #FD349C; --a3: #7213EA;
  --grad: linear-gradient(100deg, #FD349C 0%, #7213EA 52%, #1E49E2 100%);
  --grad-2: linear-gradient(90deg, #7213EA, #1E49E2);
  --hero-grad: radial-gradient(ellipse 80% 90% at 0% 100%, #FD349C 0%, rgba(253,52,156,0) 62%), linear-gradient(135deg, #7213EA 0%, #1E49E2 100%);

  --n: #FD349C; /* narrative tick */
  --v: #A1DEFF; /* vignette tick: light blue on dark for contrast */

  --head: "Univers", "Univers LT Std", "Univers Next", "Helvetica Neue", "Inter", system-ui, sans-serif;
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;

  --gutter: clamp(20px, 4vw, 200px);
  --max: 5000px;
  --header-h: 68px;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #fbf7ff;
  --fg: #000000;
  --body: rgba(0, 0, 0, 0.82);
  --mut: rgba(0, 0, 0, 0.66);
  --dim: rgba(0, 0, 0, 0.5);
  --line: rgba(0, 0, 0, 0.13);
  --tint: rgba(114, 19, 234, 0.06);
  --tint-2: rgba(114, 19, 234, 0.1);
  --card: #ffffff;
  --card-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 24px rgba(114,19,234,.07);
  --card-shadow-hover: 0 0 0 1px rgba(0,0,0,.1), 0 18px 44px rgba(114,19,234,.2);
  --header: rgba(255, 255, 255, 0.8);
  --btn-bg: #000000; --btn-fg: #ffffff;
  --accent: #1E49E2;
  --pink-text: #c2006a;
  --better-bg: linear-gradient(160deg, rgba(161,222,255,.45), rgba(253,52,156,.1));
  --glow: radial-gradient(ellipse 70% 55% at 0% 0%, rgba(253,52,156,.2), transparent 70%),
          radial-gradient(ellipse 70% 60% at 100% 25%, rgba(114,19,234,.16), transparent 70%),
          radial-gradient(ellipse 80% 60% at 10% 100%, rgba(161,222,255,.75), transparent 70%),
          radial-gradient(ellipse 60% 45% at 100% 100%, rgba(253,52,156,.14), transparent 70%);
  --footer: #000000;
  --v: #1E49E2;
  color-scheme: light;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--glow); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background-color: var(--bg); color: var(--fg); font: 400 18px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@font-face { font-family: "Univers"; font-weight: 300; src: local("Univers Light"), local("Univers-Light"), local("Univers LT Std 45 Light"), local("UniversLTStd-Light"); }
img, svg, video { max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { font: 700 12px/1.2 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut); margin: 0 0 16px; }
.lede { font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--body); max-width: 62ch; }
.muted { color: var(--mut); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; }
.brand-text { font: 300 26px/1 var(--head); letter-spacing: -0.01em; }
.brand-sub { font: 700 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.bar-r { display: flex; align-items: center; gap: 10px; }
.theme { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); color: var(--fg); background: transparent; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 999px; padding: 11px 16px; cursor: pointer; transition: box-shadow .15s; }
.theme:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.theme svg { width: 16px; height: 16px; }
.theme .t-light { display: none; } html[data-theme="light"] .theme .t-dark { display: none; } html[data-theme="light"] .theme .t-light { display: inline-flex; align-items: center; gap: 8px; }
.theme .t-dark { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { .theme .lbl { display: none; } .theme { padding: 11px 12px; } }
.toggle { display: inline-flex; background: var(--tint); border-radius: 999px; padding: 4px; }
.toggle a { text-decoration: none; font: 600 14px/1 var(--sans); padding: 11px 24px; border-radius: 999px; color: var(--mut); transition: color .15s, background .15s; }
.toggle a:hover { color: var(--fg); }
.toggle a[aria-current="page"] { background: var(--btn-bg); color: var(--btn-fg); }
.subbar { border-top: 1px solid var(--line); }
.subbar .tabs { display: flex; align-items: center; gap: 4px; min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.subbar .tabs::-webkit-scrollbar { display: none; }
.subbar .lab { font: 700 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-right: 14px; white-space: nowrap; }
.subbar a { text-decoration: none; font: 600 14px/1 var(--sans); color: var(--mut); padding: 15px 16px; position: relative; white-space: nowrap; }
.subbar a:hover { color: var(--fg); }
.subbar a[aria-current="page"], .subbar a.on { color: var(--fg); }
.subbar a[aria-current="page"]::after, .subbar a.on::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; background: var(--grad-2); }
@media (max-width: 640px) { .brand-sub { display: none; } .brand-text { font-size: 18px; white-space: nowrap; } .site-header .bar { gap: 8px; } .bar-r { gap: 6px; } .toggle a { padding: 9px 11px; font-size: 13px; } .subbar .lab { display: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: #fff; margin-top: 112px; padding-block: 48px 56px; font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 56px; justify-content: space-between; }
.site-footer b { font: 700 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.site-footer .credits { display: flex; flex-wrap: wrap; gap: 14px 48px; }
.site-footer .credits div { font: 300 22px/1.3 var(--head); }
.site-footer .credits b { display: block; margin-bottom: 6px; }
.site-footer .fine { color: rgba(255,255,255,.65); }

/* ---------- Buttons / pills ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--sans); background: var(--btn-bg); color: var(--btn-fg); padding: 16px 26px; border-radius: 999px; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: transform .15s, background .15s, color .15s; }
.btn:hover { transform: translateY(-1px); background: var(--blue); color: #fff; }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn.ghost:hover { background: var(--fg); color: var(--bg); }
.btn.light { background: #fff; color: #000; }
.btn.light:hover { background: var(--lblue); color: #000; }
.btn.script { color: #fff; background: var(--grad-2); font-size: 16px; padding: 18px 30px; box-shadow: 0 10px 30px rgba(114,19,234,.3); }
.btn.script:hover { background: var(--grad-2); transform: translateY(-2px); }
.pill { display: inline-block; font: 700 12px/1 var(--sans); letter-spacing: .04em; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.pill.a1 { background: var(--lblue); color: #000; } .pill.a2 { background: var(--pink); color: #000; } .pill.a3 { background: var(--purple); color: #fff; }
.pager { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 80px; }

/* ---------- Home ---------- */
.landing { position: relative; display: flex; align-items: flex-end; min-height: calc(100svh - 70px); min-height: calc(100vh - 70px); color: #fff; background: #000; overflow: hidden; isolation: isolate; }
@supports (height: 100svh) { .landing { min-height: calc(100svh - 70px); } }
.landing > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 38%; z-index: -2; }
.landing::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,10,44,.94) 0%, rgba(8,10,44,.62) 34%, rgba(8,10,44,0) 68%), linear-gradient(90deg, rgba(30,73,226,.42) 0%, rgba(114,19,234,.18) 38%, transparent 62%); }
.landing .logo { position: absolute; top: clamp(28px, 3.4vw, 64px); left: var(--gutter); height: clamp(34px, 3.4vw, 60px); width: auto; z-index: 2; }
.landing .inner { width: 100%; padding-block: clamp(40px, 6vw, 88px) clamp(24px, 3vw, 40px); }
.landing .eyebrow { color: rgba(255,255,255,.88); font-size: 10.5px; margin-bottom: 10px; }
.landing h1 { font: 300 clamp(44px, 7vw, 104px)/0.95 var(--head); letter-spacing: -0.035em; margin-left: -0.03em; }
.landing .kicker { font: 300 clamp(14px, 3.9vw, 22px)/1.3 var(--head); margin: 14px 0 0; white-space: nowrap; }
.landing .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.landing .btn { font-size: 13px; padding: 12px 20px; }
.landing .btn { background: #fff; color: #000; } .landing .btn:hover { background: var(--lblue); color: #000; }
.landing .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); } .landing .btn.ghost:hover { background: #fff; color: #000; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 28px; margin: clamp(26px, 3.4vw, 44px) 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.45); }
.facts div { min-width: 0; }
.facts dt { font: 700 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 7px; }
.facts dd { margin: 0; font: 300 clamp(16px, 1.5vw, 20px)/1.2 var(--head); }
.strip .row { display: flex; height: 56px; gap: 0; }
.strip .row > div { display: flex; align-items: center; padding: 0 var(--gutter); font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #000; white-space: nowrap; overflow: hidden; }
.strip .s1 { width: 30%; background: var(--lblue); } .strip .s2 { width: 23.33%; background: var(--pink); }
.strip .s3 { width: 40%; background: var(--grad-2); color: #fff; } .strip .s4 { width: 6.67%; background: #000; padding: 0; }
.strip .ticks { display: flex; justify-content: space-between; padding: 10px var(--gutter) 0; font: 600 12px/1 var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .strip .row > div { font-size: 0; } .strip .s1::before { content: "I"; font-size: 12px; } .strip .s2::before { content: "II"; font-size: 12px; } .strip .s3::before { content: "III"; font-size: 12px; } }

.section-title { font: 300 clamp(36px, 5vw, 64px)/1.05 var(--head); letter-spacing: -0.02em; margin: 88px 0 32px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; text-decoration: none; background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.card .img { aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
.card .img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.card:hover .img img { transform: scale(1.04); }
.card .img.g { background: var(--hero-grad); display: grid; place-items: center; color: #fff; font: 300 clamp(48px, 6vw, 84px)/1 var(--head); letter-spacing: -0.03em; }
.card .img.g small { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; display: block; text-align: center; margin-top: 10px; opacity: .85; }
.card .txt { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .idx { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.card h3 { font: 300 38px/1.05 var(--head); letter-spacing: -0.015em; }
.card p { color: var(--mut); font-size: 16px; margin: 0; flex: 1; }
.card .go { font: 700 14px/1 var(--sans); margin-top: 10px; }
.card .go::after { content: " →"; }

/* ---------- Page head ---------- */
.page-head { padding-block: clamp(44px, 7vw, 96px) clamp(36px, 5vw, 64px); }
.page-head h1 { font: 300 clamp(52px, 8.5vw, 124px)/0.96 var(--head); letter-spacing: -0.035em; }
.page-head .sub { font: 300 clamp(22px, 3vw, 36px)/1.2 var(--head); color: var(--mut); margin-top: 18px; }
.page-head .lede { margin-top: 24px; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px; }
.head-row > div:first-child { flex: 1 1 520px; }
.stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 36px; border-top: 1px solid var(--line); }
.stat { padding: 18px 40px 0 0; margin-right: 8px; }
.stat b { display: block; font: 300 46px/1 var(--head); letter-spacing: -0.02em; }
.stat span { font: 700 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }

/* ---------- Acts & scenes ---------- */
.act { margin-top: 104px; --acx: var(--a1); }
.act.a2 { --acx: var(--a2); } .act.a3 { --acx: var(--grad-2); }
.act-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; padding-top: 28px; margin-bottom: 40px; position: relative; }
.act-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--acx); border-radius: 3px; }
.act-head .eyebrow { margin-bottom: 14px; }
.act-head h2 { font: 300 clamp(44px, 6.5vw, 92px)/0.98 var(--head); letter-spacing: -0.03em; }
.act-head .lede { margin: 0; }
.act-head .note { margin: 14px 0 0; color: var(--mut); font-size: 16px; max-width: 62ch; }
@media (max-width: 860px) { .act-head { grid-template-columns: 1fr; } }

.scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 640px); gap: clamp(24px, 4vw, 96px); align-items: center; margin-bottom: clamp(40px, 6vw, 80px); }
.scene:nth-of-type(even) .scene-fig { order: 2; }
.scene-fig { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 10; }
.scene-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-top { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.scene-top .num { font: 300 64px/0.9 var(--head); letter-spacing: -0.03em; }
.scene-top .meta { font: 600 13px/1.3 var(--sans); color: var(--mut); letter-spacing: .04em; }
.scene-body .who { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px; }
.scene-body h3 { font: 300 clamp(30px, 3.2vw, 44px)/1.08 var(--head); letter-spacing: -0.02em; margin-bottom: 16px; }
.scene-body p { color: var(--body); font-size: 17px; max-width: 70ch; }
.scene-body p:last-child { margin-bottom: 0; }
.scene.intercut { display: block; background: var(--tint); box-shadow: var(--card-shadow); border-radius: 16px; padding: clamp(28px, 4vw, 56px); }
.scene.intercut .scene-body { max-width: 78ch; }
@media (max-width: 860px) { .scene { grid-template-columns: 1fr; } .scene:nth-of-type(even) .scene-fig { order: 0; } }
.mini-scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 3vw, 44px) 28px; }
.mini-scenes .scene { display: block; margin: 0; }
.mini-scenes .scene-fig { margin-bottom: 20px; }
.mini-scenes .scene-body .when { display: block; font-weight: 700; margin-bottom: 10px; }
.mini-head { margin: 56px 0 24px; }
.mini-head h3 { font: 300 clamp(28px, 3vw, 40px)/1.1 var(--head); letter-spacing: -0.02em; }

/* ---------- Treatment ---------- */
.triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.triptych figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: #000; }
.triptych img { width: 100%; height: 100%; object-fit: cover; display: block; }
.triptych figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px 20px; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); color: #fff; font: 300 26px/1.1 var(--head); }
.triptych figcaption b { display: block; font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; color: var(--lblue); }
@media (max-width: 760px) { .triptych { grid-template-columns: 1fr; } .triptych figure { aspect-ratio: 16 / 10; } }

.tsec { padding-top: 120px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(32px, 6vw, 96px); align-items: start; margin-bottom: 48px; }
.sec-head h2 { font: 300 clamp(48px, 7vw, 104px)/0.96 var(--head); letter-spacing: -0.035em; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-intro p { color: var(--body); max-width: 64ch; }
.sec-intro p:last-child { margin-bottom: 0; }
.lead { font-weight: 700; color: var(--fg); }
.sec-intro .big { font: 300 clamp(24px, 2.6vw, 34px)/1.3 var(--head); color: var(--fg); letter-spacing: -0.01em; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }
.sub-h { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin: 72px 0 18px; }
.sub-h + p { max-width: 70ch; }

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.person { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow); }
.person .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.person .pb { padding: 26px 28px 32px; }
.person .role { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.person h4 { font: 300 56px/1 var(--head); letter-spacing: -0.03em; margin: 12px 0 4px; }
.person .age { color: var(--mut); font-size: 15px; margin-bottom: 14px; }
.person p { font-size: 16.5px; color: var(--body); margin: 0; }

.perf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.perf .rowlab { grid-column: 1 / -1; font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin: 24px 0 -4px; }
.perf .rowlab:first-child { margin-top: 0; }
.perf .cell { position: relative; background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow); padding-bottom: 28px; }
.perf .cell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 2; background: var(--acx); }
.perf .cell.a1 { --acx: var(--lblue); } .perf .cell.a2 { --acx: var(--pink); } .perf .cell.a3 { --acx: var(--grad-2); }
.perf .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 22px; background: #000; }
.perf .cell h4 { font: 700 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 0 26px 10px; color: var(--accent); }
.perf .cell p { margin: 0 26px; font-size: 16.5px; color: var(--body); }
@media (max-width: 960px) { .perf { grid-template-columns: 1fr; } }

.locs { display: grid; gap: 28px; }
.loc { background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: var(--card-shadow); }
.loc > h4 { font: 300 clamp(34px, 4vw, 52px)/1 var(--head); letter-spacing: -0.025em; padding: 32px 36px 24px; }
.loc .pair { display: grid; grid-template-columns: 1fr 1fr; }
.loc .pair > div { padding: 0 0 36px; }
.loc .pair > div + div { background: var(--better-bg); }
.loc .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #000; }
.loc .tag { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; display: block; margin: 24px 36px 12px; color: var(--mut); }
.loc .better .tag { color: var(--accent); }
.loc p { margin: 0 36px; font-size: 16.5px; color: var(--body); }
@media (max-width: 860px) { .loc .pair { grid-template-columns: 1fr; } .loc .tag, .loc p { margin-inline: 24px; } .loc > h4 { padding-inline: 24px; } }

.pal { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 20px; }
.pal > div { border-radius: 18px; padding: 24px 26px 28px; background: transparent; box-shadow: var(--card-shadow); }

.pal h4 { font: 700 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-bottom: 16px; }
.swatches { display: flex; gap: 10px; }
.swatches i { flex: 1; height: 84px; border-radius: 10px; display: block; position: relative; }
.swatches i span { position: absolute; left: 10px; bottom: 8px; font: 700 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: rgba(0,0,0,.7); font-style: normal; }
.swatches.k i span { color: rgba(255,255,255,.9); }
@media (max-width: 700px) { .pal { grid-template-columns: 1fr; } }

.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 20px 0; }
.two-up .box { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow); }
.two-up .box .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.two-up .box .bb, .two-up .box.plain { padding: 24px 28px 28px; }
.two-up .box h4 { font: 300 30px/1.1 var(--head); letter-spacing: -0.015em; margin-bottom: 10px; }
.two-up .box p { font-size: 16.5px; color: var(--body); margin: 0; }
.two-up .box .tag { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 12px; color: var(--accent); }
.two-up .box.t2 .tag { color: var(--pink-text); }

.refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin: 24px 0 28px; }
.refs figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: #000; }
.refs img, .refs video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Claire interface: on the page, edge to edge. The page fades into the animation's black borders. */
.viz-bleed { margin: 72px 0 0; }
.viz-bleed .scroller { overflow-x: auto; background: #000; }
.viz-bleed iframe { display: block; width: 100%; min-width: 760px; aspect-ratio: 2680 / 1238; border: 0; background: #000; }
.viz-fade { height: clamp(90px, 14vw, 220px); }
.viz-fade.top { background: linear-gradient(to bottom, transparent, #000); }
.viz-fade.bottom { background: linear-gradient(to bottom, #000, transparent); }
.viz-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: clamp(40px, 5vw, 72px); padding-block: 28px; border-top: 1px solid var(--line); }
.viz-bar .cap { font-size: 16px; color: var(--mut); max-width: 66ch; margin: 0; }
.viz-bar .cap b { color: var(--fg); }
.viz-bar .cap a { color: var(--accent); font-weight: 600; }
.viz-ctl { display: flex; flex-wrap: wrap; gap: 10px; }
.viz-ctl .btn { padding: 14px 24px; font-size: 14px; }
.viz-ctl .btn.ghost[aria-pressed="false"] { opacity: .65; }

/* ---------- Script ---------- */
.jumpline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jumpline a, .jump a { text-decoration: none; font: 600 14px/1 var(--sans); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 999px; padding: 11px 18px; }
.jumpline a:hover, .jump a:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.script-band { background: var(--tint); padding-block: 56px 72px; margin-top: 8px; }
.page { max-width: 880px; margin: 0 auto; background: #fff; color: #000; border-radius: 6px; padding: clamp(28px, 6vw, 80px) clamp(20px, 7vw, 104px); font: 400 16px/1.55 var(--mono); box-shadow: 0 30px 80px rgba(0,0,0,.14), 0 0 0 1px var(--line); }
.page .title { text-align: center; font-weight: 700; font-size: 24px; letter-spacing: .06em; margin: 0; }
.page .meta { text-align: center; font-style: italic; margin: 6px 0 32px; color: #555; font-size: 14px; }
.page .tr { font-weight: 700; margin: 0 0 22px; }
.page .phase { margin: 44px 0 26px; padding: 12px 14px; border-left: 4px solid var(--pc); background: rgba(0,0,0,.045); }
.page .phase b { letter-spacing: .06em; }
.page .phase.p1 { --pc: #A1DEFF; } .page .phase.p2 { --pc: #FD349C; } .page .phase.p3 { --pc: #7213EA; }
.page .slug { font-weight: 700; text-transform: uppercase; margin: 30px 0 10px; }
.page .action { margin: 0 0 14px; }
.page .super { margin: 0 0 14px; font-weight: 700; }
.page .vo { margin: 0 0 16px; padding-left: 8%; }
.page .vo .cue { display: block; font-weight: 700; margin-left: 24%; }
.page .vo .line { display: block; margin: 2px 8% 0 22%; }
.page .sep { border: 0; border-top: 1px solid #bbb; margin: 48px 0 24px; }
.page h4.notes-h { font: 700 16px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.page .note { margin: 0 0 12px; }
@media (max-width: 560px) { .page { font-size: 14px; } .page .vo { padding-left: 0; } .page .vo .cue { margin-left: 16%; } .page .vo .line { margin: 2px 0 0 14%; } }

/* ---------- Comparison ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; color: var(--mut); margin-top: 28px; }
.legend span { display: inline-flex; align-items: center; gap: 9px; }
.mk { display: inline-block; font: 700 1.4em/1 var(--sans); vertical-align: -2px; }
.mk::before { content: "\2713"; }
.mk.n { color: var(--n); }
.mk.v { color: var(--v); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.csec { margin-top: 104px; }
.csec > h2 { font: 300 clamp(38px, 5vw, 64px)/1.02 var(--head); letter-spacing: -0.03em; margin-bottom: 12px; }
.csec > .lede-s { color: var(--mut); max-width: 66ch; margin-bottom: 32px; }
.vs { border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow); background: var(--card); }
.vs table { width: 100%; border-collapse: collapse; }
.vs th, .vs td { padding: 20px 28px; text-align: left; border-bottom: 1px solid var(--line); }
.vs tbody tr:last-child td { border-bottom: 0; }
.vs thead th { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); background: var(--tint); }
.vs thead th:nth-child(2), .vs thead th:nth-child(3) { text-align: center; width: 26%; }
.vs thead th .mk { margin-right: 8px; vertical-align: -1px; }
.vs td:first-child { font-weight: 600; }
.vs td.v { text-align: center; font: 300 44px/1 var(--head); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.note-s { font-size: 14.5px; color: var(--mut); max-width: 74ch; margin-top: 16px; }
.tbl-wrap { overflow-x: auto; border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl thead th { background: var(--tint); font: 700 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.tbl td.n { width: 48px; color: var(--mut); font-variant-numeric: tabular-nums; }
.tbl td.loc-c { font-weight: 600; width: 230px; }
.tbl td.c, .tbl th.c { text-align: center; font-variant-numeric: tabular-nums; }
.tbl td .sub { display: block; color: var(--mut); font-size: 13px; font-weight: 400; }
.tbl .dash { color: var(--dim); }
.cols-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.cols-2 > div { min-width: 0; }
.cols-2 h3 { font: 300 34px/1.1 var(--head); letter-spacing: -0.02em; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; }
.cols-2 .count { color: var(--mut); font: 600 14px/1 var(--sans); margin-bottom: 18px; }
.tbl.cov td.c { white-space: nowrap; } .tbl.cov td.c .mk + .mk { margin-left: 8px; } .tbl.cov td:first-child { font-weight: 600; }

.tl { background: #000; color: #fff; border-radius: 18px; padding: 28px 26px 22px; overflow-x: auto; }
.tl-in { min-width: 920px; position: relative; }
.tl-grid { display: grid; grid-template-columns: 120px 1fr; row-gap: 10px; align-items: center; }
.tl-lab { font: 700 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.tl-lab small { display: block; font-weight: 600; letter-spacing: .04em; text-transform: none; color: rgba(255,255,255,.55); margin-top: 3px; font-size: 11.5px; }
.tl-lane { position: relative; height: 44px; }
.tl-lane.scn { height: 156px; background: repeating-linear-gradient(to right, rgba(255,255,255,.14) 0, rgba(255,255,255,.14) 1px, transparent 1px, transparent calc(100% / 12)); }
.tl-ruler { height: 30px; border-bottom: 2px solid #fff; }
.tl-ruler .tk { position: absolute; bottom: 0; width: 2px; height: 10px; background: #fff; }
.tl-ruler .tk u { position: absolute; bottom: 14px; left: 0; transform: translateX(-50%); text-decoration: none; font: 700 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
.tl-ruler .tk:first-child u { transform: none; } .tl-ruler .tk.last u { transform: translateX(-100%); }
.blk { position: absolute; top: 0; bottom: 0; background: var(--bb); color: var(--bt); padding: 6px 8px; overflow: hidden; box-shadow: inset -2px 0 0 #000; display: flex; flex-direction: column; }
.blk.a1 { --bb: #A1DEFF; --bt: #000; --bs: rgba(0,0,0,.5); } .blk.a2 { --bb: #FD349C; --bt: #000; --bs: rgba(0,0,0,.5); } .blk.a3 { --bb: #7213EA; --bt: #fff; --bs: rgba(255,255,255,.55); }
.blk b { font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.blk .nm { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 12.5px/1 var(--sans); margin-top: 8px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; }
.blk .sec { font: 600 11px/1 var(--sans); opacity: .8; margin-top: 6px; font-variant-numeric: tabular-nums; }
.blk .shots { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; display: flex; gap: 2px; }
.blk .shots u { flex: 1; background: var(--bs); }
.blk.actb { padding: 6px 10px; justify-content: center; } .blk.actb b { font-size: 13px; } .blk.actb .sec { margin-top: 3px; }
.blk.end { --bb: rgba(255,255,255,.16); --bt: #fff; }
.tl-total { position: relative; height: 26px; }
.br { position: absolute; top: 50%; border-top: 2px solid #fff; }
.br::before, .br::after { content: ""; position: absolute; top: -7px; width: 2px; height: 14px; background: #fff; } .br::before { left: 0; } .br::after { right: 0; }
.br span { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #000; padding: 0 10px; font: 700 11.5px/1 var(--sans); letter-spacing: .08em; white-space: nowrap; }
.br.held { border-color: var(--lblue); } .br.held::before, .br.held::after { background: var(--lblue); } .br.held span { color: var(--lblue); padding: 0 5px; }
.tl-guides { position: absolute; left: 120px; right: 0; top: 40px; bottom: 0; pointer-events: none; }
.tl-guides i { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(161,222,255,.6); }
.tl-leg { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); font-size: 13px; color: rgba(255,255,255,.75); }
.tl-leg .sw { display: inline-block; width: 26px; height: 5px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 7px, transparent 7px 9px); vertical-align: middle; margin-right: 8px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media print { .site-header, .pager, .btn { display: none; } }

/* Wide screens: type and controls stay the same size; the media grows to use the space. */
.scene-fig, .triptych figure, .card .img, .refs figure, .person .ph, .perf .ph, .loc .ph, .two-up .box .ph { max-height: 88vh; }
.scene-fig img, .triptych img { max-height: 88vh; }
.sec-intro p, .sub-h + p, .lede { max-width: 66ch; }

@media (max-width: 420px) { .brand-text { font-size: 15px; } .toggle a { padding: 8px 9px; font-size: 12px; } .theme { padding: 9px 10px; } .site-header .bar { gap: 6px; } }


/* ---------- Split layout: half full-bleed media beside text. Fewer bound windows. ---------- */
body { overflow-x: clip; }
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.split.flip .split-media { order: 2; }
.split-media { position: relative; margin: 0; min-height: clamp(420px, 34vw, 1500px); background: #000; overflow: hidden; }
.split-media > img, .split-media > video, .split-media .m img, .split-media .m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.split-media.stack { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; min-height: clamp(560px, 46vw, 1900px); }
.split-media .m { position: relative; overflow: hidden; background: #000; }
.split-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 140px) var(--gutter) clamp(40px, 6vw, 140px) clamp(32px, 6vw, 160px); }
.split.flip .split-text { padding: clamp(40px, 6vw, 140px) clamp(32px, 6vw, 160px) clamp(40px, 6vw, 140px) var(--gutter); }
.split-text > * { max-width: 62ch; }
.split-text .role { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.split-text .name { font: 300 clamp(48px, 5vw, 96px)/1 var(--head); letter-spacing: -0.03em; margin: 14px 0 6px; }
.split-text .age { color: var(--mut); font-size: 15px; margin-bottom: 18px; }
.split-text .pill { align-self: flex-start; margin-bottom: 18px; }
.split-text .act-title { font: 300 clamp(36px, 3.6vw, 64px)/1.02 var(--head); letter-spacing: -0.025em; margin-bottom: 22px; }
.split-text .cast { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 20px 0 8px; }
.split-text p { color: var(--body); font-size: 17px; margin: 0 0 6px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.flip .split-media { order: 0; }
  .split-media, .split-media.stack { min-height: 0; aspect-ratio: 4 / 3; }
  .split-text, .split.flip .split-text { padding: 32px var(--gutter) 44px; }
}
.splits { display: block; }

/* montage: three edge-to-edge frames, text beneath */
.two-up.mont { width: 100vw; margin: 28px 0 0 calc(50% - 50vw); gap: 3px; }
.two-up.mont .box { background: none; box-shadow: none; border-radius: 0; }
.two-up.mont .box .ph { border-radius: 0; max-height: 80vh; }
.two-up.mont .box .bb { padding: 22px var(--gutter) 6px; }
/* text-only blocks: no window, a hairline instead */
.two-up .box.plain { background: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--line); padding: 22px 8px 6px 0; }
.pal > div { box-shadow: none; padding: 4px 0 0; }
.triptych { width: 100vw; margin-left: calc(50% - 50vw); gap: 3px; }
.triptych figure { border-radius: 0; }
.refs { width: 100vw; margin-left: calc(50% - 50vw); gap: 3px; }
.refs figure { border-radius: 0; aspect-ratio: 16 / 11; }
.scene.intercut { background: none; box-shadow: none; padding: 28px 0 0; border-top: 1px solid var(--line); border-radius: 0; margin-top: 56px; }

/* scene rows (Narrative / Vignette): alternating full-bleed bands */
.act > .scene { width: 100vw; margin-left: calc(50% - 50vw); gap: 0; align-items: stretch; margin-bottom: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.act > .scene.intercut { width: auto; margin-left: 0; display: block; }
.act > .scene .scene-fig { border-radius: 0; aspect-ratio: auto; max-height: none; min-height: clamp(420px, 34vw, 1500px); }
.act > .scene .scene-fig img { position: absolute; inset: 0; max-height: none; }
.act > .scene .scene-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 5vw, 120px) var(--gutter) clamp(36px, 5vw, 120px) clamp(32px, 6vw, 160px); }
.act > .scene:nth-of-type(even) .scene-body { padding-left: var(--gutter); padding-right: clamp(32px, 6vw, 160px); }
.act > .scene .scene-body > * { max-width: 62ch; }
.mini-scenes .scene { width: auto; margin-left: 0; }
.mini-scenes .scene-fig { aspect-ratio: 16 / 10; min-height: 0; border-radius: 12px; }
.mini-scenes .scene-fig img { position: static; }
@media (max-width: 860px) {
  .act > .scene { grid-template-columns: 1fr; }
  .act > .scene .scene-fig { min-height: 0; aspect-ratio: 4 / 3; }
  .act > .scene .scene-body, .act > .scene:nth-of-type(even) .scene-body { padding: 28px var(--gutter) 44px; }
}

/* home: full-bleed tiles instead of cards */
.start { margin-top: 24px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.tile { position: relative; display: block; min-height: clamp(460px, 38vw, 1400px); color: #fff; text-decoration: none; overflow: hidden; background: #000; isolation: isolate; }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.tile:hover > img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(2,4,20,.92) 0%, rgba(2,4,20,.5) 42%, transparent 72%); }
.tile.g { background: var(--hero-grad); }
.tile.g::after { background: linear-gradient(to top, rgba(2,4,20,.55), transparent 60%); }
.tile .big { position: absolute; top: 18%; left: 0; right: 0; text-align: center; font: 300 clamp(48px, 5vw, 110px)/1 var(--head); letter-spacing: -0.03em; }
.tile .big span { opacity: .6; }
.tile .tt { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px var(--gutter-t, 28px) 32px; }
.tile .idx { font: 700 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.tile h3 { font: 300 clamp(32px, 2.6vw, 52px)/1.05 var(--head); letter-spacing: -0.02em; margin: 10px 0 8px; }
.tile p { font-size: 15px; color: rgba(255,255,255,.88); margin: 0 0 14px; max-width: 40ch; }
.tile .go { font: 700 13px/1 var(--sans); }
.tile .go::after { content: " →"; }
@media (max-width: 960px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 420px; } }

/* nav logo: white artwork on dark, inverted to black on light */
.brand-logo { display: block; height: 34px; width: auto; }
html[data-theme="light"] .brand-logo { filter: invert(1); }
@media (max-width: 640px) { .brand-logo { height: 26px; } }
@media (max-width: 420px) { .brand-logo { height: 22px; } }


/* ---------- Single-row header: logo · page links · Treatment/Approach · theme icon ---------- */
.site-header .bar { gap: 20px; flex-wrap: nowrap; }
.subnav-inline { flex: 1; display: flex; align-self: stretch; align-items: stretch; gap: 2px; margin-left: 12px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.subnav-inline::-webkit-scrollbar { display: none; }
.subnav-inline a { display: flex; align-items: center; text-decoration: none; font: 600 14px/1 var(--sans); color: var(--mut); padding: 0 14px; position: relative; white-space: nowrap; }
.subnav-inline a:hover { color: var(--fg); }
.subnav-inline a[aria-current="page"], .subnav-inline a.on { color: var(--fg); }
.subnav-inline a[aria-current="page"]::after, .subnav-inline a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--grad-2); border-radius: 3px 3px 0 0; }

/* Treatment / Approach: recessed track, raised brand-colour thumb */
.toggle { padding: 5px; gap: 2px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.1)); box-shadow: inset 0 2px 7px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 0 rgba(255,255,255,.08); }
.toggle a { padding: 11px 24px; font-weight: 700; letter-spacing: .01em; }
.toggle a[aria-current="page"] { color: #fff; background: linear-gradient(135deg, #8a3cff 0%, #7213EA 38%, #1E49E2 100%); box-shadow: 0 6px 16px rgba(114,19,234,.55), 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.25); }
html[data-theme="light"] .toggle { background: linear-gradient(180deg, rgba(114,19,234,.05), rgba(114,19,234,.12)); box-shadow: inset 0 2px 6px rgba(60,20,140,.22), inset 0 0 0 1px rgba(114,19,234,.2), 0 1px 0 rgba(255,255,255,.9); }

/* theme: icon only, far corner */
.theme { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; flex: none; margin-left: 4px; }
.theme .t-dark, .theme .t-light { align-items: center; justify-content: center; }
.theme svg { width: 18px; height: 18px; }

@media (max-width: 1100px) {
  .site-header .bar { flex-wrap: wrap; row-gap: 0; padding-block: 8px 0; }
  .brand { order: 1; } .toggle { order: 2; margin-left: auto; } .theme { order: 3; }
  .subnav-inline { order: 4; flex: 1 1 100%; margin: 6px -8px 0; min-height: 44px; border-top: 1px solid var(--line); }
  .subnav-inline[aria-hidden="true"] { display: none; }
  .subnav-inline a.on::after, .subnav-inline a[aria-current="page"]::after { left: 12px; right: 12px; }
}
@media (max-width: 640px) { .toggle a { padding: 9px 13px; font-size: 13px; } .theme { width: 38px; height: 38px; } }
@media (max-width: 420px) { .toggle a { padding: 8px 10px; font-size: 12px; } .theme { width: 34px; height: 34px; } .site-header .bar { gap: 8px; } }

@media (max-width: 480px) { .brand-logo { height: 18px; } .toggle { padding: 4px; } .toggle a { padding: 8px 9px; font-size: 12px; } .theme { width: 32px; height: 32px; margin-left: 0; } .theme svg { width: 15px; height: 15px; } .site-header .bar { gap: 6px; } }

/* section divider on the treatment page: a hairline that fades out at both ends, with a small glowing node */
.tsec:not(#people) { padding-top: 104px; }
.tsec:not(#people)::before { content: ""; display: block; height: 11px; margin-bottom: 64px;
  background:
    radial-gradient(circle, #fff 0 2.5px, rgba(138,60,255,.65) 3.2px, transparent 7px) center / 11px 11px no-repeat,
    linear-gradient(90deg, transparent 0%, #1E49E2 22%, #7213EA 50%, #FD349C 78%, transparent 100%) center / 100% 1px no-repeat;
  opacity: .85; }
html[data-theme="light"] .tsec:not(#people)::before {
  background:
    radial-gradient(circle, #7213EA 0 2.5px, rgba(114,19,234,.25) 3.2px, transparent 7px) center / 11px 11px no-repeat,
    linear-gradient(90deg, transparent 0%, #1E49E2 22%, #7213EA 50%, #FD349C 78%, transparent 100%) center / 100% 1px no-repeat; }

/* toggle: keep the depth, tone the colour right down */
.toggle { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.07)); box-shadow: inset 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); }
.toggle a[aria-current="page"] { color: #fff; background: linear-gradient(180deg, rgba(150,165,255,.34), rgba(100,90,230,.24)); box-shadow: 0 3px 10px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(170,185,255,.22); }
html[data-theme="light"] .toggle { background: rgba(114,19,234,.05); box-shadow: inset 0 2px 5px rgba(60,20,140,.14), inset 0 0 0 1px rgba(114,19,234,.12); }
html[data-theme="light"] .toggle a[aria-current="page"] { color: #000; background: linear-gradient(180deg, #ffffff, #f3ecff); box-shadow: 0 3px 10px rgba(60,20,140,.18), inset 0 1px 0 #fff, 0 0 0 1px rgba(114,19,234,.14); }

.facts dd .partner { display: block; height: 26px; width: auto; max-width: 100%; }
.facts dd { min-height: 26px; display: flex; align-items: center; }

/* minimal section dividers: a single quiet hairline */
.tsec:not(#people)::before, html[data-theme="light"] .tsec:not(#people)::before { height: 1px; margin-bottom: 72px; background: var(--line); opacity: 1; }
/* Screens, Tech & Data: the text sits centred between the divider and the first UI window */
#screens::before, html[data-theme="light"] #screens::before { margin-bottom: 88px; }
#screens .sec-head { margin-bottom: 0; }
#screens { padding-bottom: 0; }
.viz-bleed { margin-top: 0; }
.viz-fade.top { height: 88px; }

/* section bylines: larger and more prominent */
.sec-intro p:first-child { font: 300 clamp(24px, 2.3vw, 40px)/1.28 var(--head); letter-spacing: -0.012em; color: var(--fg); max-width: 40ch; margin-bottom: 1.1em; }
.sec-intro p:first-child .lead { font-weight: 300; }
.sec-intro p { font-size: 19px; line-height: 1.6; max-width: 66ch; }
.sec-intro .big { font-size: clamp(24px, 2.3vw, 40px); }
.act-head .lede { font: 300 clamp(22px, 1.9vw, 32px)/1.32 var(--head); letter-spacing: -0.01em; color: var(--fg); max-width: 44ch; }
.page-head .lede { font-size: clamp(21px, 1.7vw, 28px); }

/* toggle: line work only, flat and quiet */
.toggle, html[data-theme="light"] .toggle { background: transparent; box-shadow: inset 0 0 0 1px var(--line); padding: 4px; gap: 0; }
.toggle a { font-weight: 600; }
.toggle a[aria-current="page"] { color: var(--fg); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
html[data-theme="light"] .toggle a[aria-current="page"] { color: #000; background: rgba(114,19,234,.08); box-shadow: inset 0 0 0 1px rgba(114,19,234,.3); }



.facts dd .partner { height: 24px; width: auto; }

/* landing buttons: light, translucent grey */
.landing .btn, .landing .btn.ghost { background: rgba(200,205,220,.2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.landing .btn:hover, .landing .btn.ghost:hover { background: rgba(220,225,240,.32); color: #fff; transform: none; }

.landing .btn, .landing .btn.ghost { background: rgba(200,205,220,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.landing .btn:hover, .landing .btn.ghost:hover { background: rgba(220,225,240,.2); }
/* partner logos: smaller, sized so they carry equal visual weight */
.facts dd { min-height: 18px; }
.facts dd .partner { height: 16px; width: auto; }
.facts dd .partner[alt="KPMG"] { height: 18px; }
.facts dd .partner[alt="STADIUM"] { height: 15px; }
.facts dd .partner[alt="PENTA"] { height: 14px; }

/* ---------- Layout system: one grid, one set of margins ----------
   Text:  label column (5fr) + reading column (6fr), identical on every section, sub-section and act header.
   Media: either a full-bleed band (hero, split rows, viz) or inside the page margins (palette, references, montage, locations).
   Body copy: 17px everywhere; bylines are the only larger text. */
.sub-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(32px, 6vw, 96px); align-items: start; margin-top: 88px; }
.sub-row .sub-h { margin: 0; padding-top: 4px; }
.sub-row .sub-body p { max-width: 66ch; font-size: 17px; color: var(--body); }
.sub-row .sub-body p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .sub-row { grid-template-columns: 1fr; margin-top: 60px; } }

.refs { width: auto; margin: 32px 0 0; gap: 14px; }
.refs figure { border-radius: 14px; aspect-ratio: 16 / 10; }
.pal { margin: 32px 0 0; gap: 14px; }
.two-up.mont { width: auto; margin: 32px 0 0; gap: 14px; }
.two-up.mont .box .ph { border-radius: 14px; }
.two-up.mont .box .bb { padding: 18px 0 0; }
.two-up { margin: 32px 0 0; }

.act-head { grid-template-columns: calc(50vw - var(--gutter)) minmax(0, 1fr); gap: 20px 0; }
.act-head > div:last-child { padding-left: clamp(32px, 6vw, 160px); }
@media (max-width: 860px) { .act-head { grid-template-columns: 1fr; } .act-head > div:last-child { padding-left: 0; } }

.sec-intro p, .scene-body p, .split-text p, .loc p, .perf .cell p, .two-up .box p { font-size: 17px; line-height: 1.65; }
.sec-intro p:first-child { font-size: clamp(24px, 2.3vw, 40px); line-height: 1.28; }
.sec-intro .big { font-size: clamp(24px, 2.3vw, 40px); }
.facts dt { font-size: 10.5px; }

/* act strip: a thin line, labels sit outside it */
.strip .row { height: 6px; }
.strip .row > div { padding: 0; font-size: 0; }
.strip .s4 { background: var(--cobalt); }
.strip .labels { display: flex; padding-top: 18px; }
.strip .labels span { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); padding: 0 0 12px var(--gutter); white-space: nowrap; overflow: hidden; }
.strip .labels i { font-style: normal; color: var(--dim); }
.strip .l1 { width: 30%; } .strip .l2 { width: 23.33%; } .strip .l3 { width: 40%; } .strip .l4 { width: 6.67%; }
.strip .ticks { padding-top: 12px; }
@media (max-width: 700px) { .strip .labels span { font-size: 0; padding-left: 12px; } .strip .l1::before { content: "I"; font-size: 11px; } .strip .l2::before { content: "II"; font-size: 11px; } .strip .l3::before { content: "III"; font-size: 11px; } }
.refs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* timeline: no black panel; it sits on the page and follows the theme */
.tl { background: transparent; color: var(--fg); border-radius: 0; padding: 4px 0 8px; }
.tl-lab { color: var(--mut); } .tl-lab small { color: var(--dim); }
.tl-lane.scn { background: repeating-linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px, transparent calc(100% / 12)); }
.tl-ruler { border-bottom-color: var(--fg); } .tl-ruler .tk { background: var(--fg); }
.blk { box-shadow: inset -2px 0 0 var(--bg); }
.blk.end { --bb: var(--tint-2); --bt: var(--fg); }
.br { border-top-color: var(--fg); } .br::before, .br::after { background: var(--fg); }
.br span { background: var(--bg); color: var(--fg); }
.br.held { border-top-color: var(--accent); } .br.held::before, .br.held::after { background: var(--accent); } .br.held span { color: var(--accent); }
.tl-guides i { border-left-color: var(--dim); }
.tl-leg { border-top-color: var(--line); color: var(--mut); }
.tl-leg .sw { background: repeating-linear-gradient(90deg, var(--mut) 0 7px, transparent 7px 9px); }

/* footer: one quiet grey line */
.site-footer { background: transparent; color: var(--dim); margin-top: 72px; padding-block: 16px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.4; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; }
.site-footer .wrap span { white-space: nowrap; }

/* scene list header: title left, thin data table right, same line */
.scene-list-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 40px; margin-bottom: 32px; }
.scene-list-head h2 { margin-bottom: 12px; }
.scene-list-head .lede-s { margin: 0; }
.stats.stats-table { display: flex; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stats-table .stat { padding: 14px 26px 13px; margin: 0; border-left: 1px solid var(--line); }
.stats-table .stat:first-child { border-left: 0; }
.stats-table .stat b { font-size: 30px; }
.stats-table .stat span { font-size: 10.5px; }
@media (max-width: 640px) { .scene-list-head { align-items: flex-start; } .stats.stats-table { width: 100%; } .stats-table .stat { flex: 1; padding: 12px 10px; } }
.scene-list-head > div:first-child { flex: 1 1 340px; min-width: 0; }
.stats-table .stat { padding: 14px 22px 13px; }
.stats.stats-table { flex: none; }

/* each treatment section opens with its own background gradient, full width, fading out below the heading */
.tsec { position: relative; }
.tsec::after { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: 0; height: min(680px, 80vh); pointer-events: none; background: linear-gradient(to bottom, var(--sec-c, rgba(30,73,226,.34)) 0%, transparent 100%); }
#people { --sec-c: rgba(30,73,226,.36); }
#performance { --sec-c: rgba(114,19,234,.36); }
#locations { --sec-c: rgba(253,52,156,.22); }
#screens { --sec-c: rgba(0,51,141,.55); }
html[data-theme="light"] #people { --sec-c: rgba(161,222,255,.75); }
html[data-theme="light"] #performance { --sec-c: rgba(114,19,234,.16); }
html[data-theme="light"] #locations { --sec-c: rgba(253,52,156,.18); }
html[data-theme="light"] #screens { --sec-c: rgba(30,73,226,.16); }

/* key figures: quiet inline run, no box */
.stats.stats-table { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 36px; border: 0; border-radius: 0; overflow: visible; padding: 0 0 6px; }
.stats-table .stat { display: flex; align-items: baseline; gap: 10px; padding: 0; margin: 0; border: 0; position: relative; }
.stats-table .stat + .stat::before { content: ""; position: absolute; left: -19px; top: 50%; width: 1px; height: 22px; transform: translateY(-50%); background: var(--line); }
.stats-table .stat b { display: inline; font: 300 38px/1 var(--head); letter-spacing: -0.02em; }
.stats-table .stat span { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
@media (max-width: 640px) { .stats.stats-table { width: auto; } .stats-table .stat { flex: none; padding: 0; } .stats-table .stat b { font-size: 30px; } }

/* spacers removed: the section gradient is the divider now */
.tsec:not(#people)::before, html[data-theme="light"] .tsec:not(#people)::before, #screens::before, html[data-theme="light"] #screens::before { content: none; display: none; }
.tsec:not(#people), #screens { padding-top: 96px; }
.tsec:not(#people), #screens { padding-top: 64px; }
.tsec { padding-bottom: 0; }

/* Performance mirrors the section before it: title on the right, media/text sides swapped */
#performance .sec-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
#performance .sec-head > div:first-child { order: 2; text-align: right; }
@media (max-width: 860px) { #performance .sec-head > div:first-child { order: 0; text-align: left; } }
/* Performance title back on the left, above the text column */
#performance .sec-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
#performance .sec-head > div:first-child { order: 0; text-align: left; }

/* Performance opens straight into its first row: the title sits in the text column, so the images butt up against the section above */
#performance, .tsec#performance { padding-top: 0; }
.split-text .sec-title { font: 300 clamp(48px, 6.4vw, 104px)/0.96 var(--head); letter-spacing: -0.035em; margin: 0 0 56px; max-width: none; }
.split-text .eyebrow { max-width: none; }
#performance .splits > .split:first-child .split-text { justify-content: flex-start; padding-top: clamp(40px, 5vw, 80px); }

/* interface caption + controls: small, tucked under the Screens title, original white-on-dark colour way */
.viz-mini { margin-top: 28px; max-width: 360px; }
.viz-mini .cap { font-size: 13px; line-height: 1.5; color: var(--mut); margin: 0 0 12px; max-width: none; }
.viz-mini .cap b { color: var(--fg); font-weight: 600; }
.viz-mini .cap a { color: var(--accent); font-weight: 600; }
.viz-mini .viz-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.viz-mini .btn { padding: 9px 15px; font-size: 12px; background: #fff; color: #000; box-shadow: none; }
.viz-mini .btn:hover { background: var(--lblue); color: #000; transform: none; }
.viz-mini .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.viz-mini .btn.ghost:hover { background: #fff; color: #000; }
.viz-mini .btn.ghost[aria-pressed="false"] { opacity: .65; }
html[data-theme="light"] .viz-mini .btn { background: #000; color: #fff; }
html[data-theme="light"] .viz-mini .btn:hover { background: var(--blue); color: #fff; }
html[data-theme="light"] .viz-mini .btn.ghost { background: transparent; color: #000; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
html[data-theme="light"] .viz-mini .btn.ghost:hover { background: #000; color: #fff; }

/* sub-section titles use the header style; every text column starts on the page's centre line,
   the same edge as the palette's second panel ("Act 3 · KPMG") */
.sub-row .sub-h { font: 300 clamp(36px, 4.4vw, 72px)/1 var(--head); letter-spacing: -0.03em; text-transform: none; color: var(--fg); padding-top: 0; margin: 0; }
.sec-head, .sub-row { grid-template-columns: calc(50% - 7px) minmax(0, 1fr); column-gap: 14px; }
.two-up, .pal, .refs { gap: 14px; }
@media (max-width: 860px) { .sec-head, .sub-row { grid-template-columns: 1fr; } }
.sub-row .sub-h { font-size: clamp(32px, 3.4vw, 56px); }

/* interface controls: lime and amber, from the Acts 1 & 2 screen palette */
.viz-mini .cap { font-size: 11px; line-height: 1.4; margin-bottom: 10px; letter-spacing: .02em; }
.viz-mini .btn, html[data-theme="light"] .viz-mini .btn { background: #e8b04b; color: #000; box-shadow: none; padding: 8px 14px; font-size: 11.5px; }
.viz-mini .btn[data-viz="restart"], html[data-theme="light"] .viz-mini .btn[data-viz="restart"] { background: #b9d35a; }
.viz-mini .btn.ghost, html[data-theme="light"] .viz-mini .btn.ghost { background: #e8b04b; color: #000; box-shadow: none; }
.viz-mini .btn:hover, .viz-mini .btn.ghost:hover, html[data-theme="light"] .viz-mini .btn:hover, html[data-theme="light"] .viz-mini .btn.ghost:hover { filter: brightness(1.1); color: #000; background: #e8b04b; }
.viz-mini .btn[data-viz="restart"]:hover { background: #b9d35a; }
.viz-mini .btn.ghost[aria-pressed="false"] { opacity: .55; }

/* sub-section titles match the section titles; only the long ones step down */
.sub-row .sub-h { font-size: clamp(48px, 7vw, 104px); line-height: .96; letter-spacing: -0.035em; }
.sub-row .sub-h.long { font-size: clamp(34px, 4.4vw, 72px); line-height: 1; }
@media (max-width: 860px) { .sub-row .sub-h { font-size: clamp(40px, 11vw, 64px); } .sub-row .sub-h.long { font-size: clamp(30px, 8vw, 44px); } }

/* interface controls: outline only, no fill */
.viz-mini .btn, .viz-mini .btn.ghost, html[data-theme="light"] .viz-mini .btn, html[data-theme="light"] .viz-mini .btn.ghost { background: transparent; color: #e8b04b; box-shadow: inset 0 0 0 1px #e8b04b; filter: none; }
.viz-mini .btn[data-viz="restart"], html[data-theme="light"] .viz-mini .btn[data-viz="restart"] { color: #b9d35a; box-shadow: inset 0 0 0 1px #b9d35a; }
.viz-mini .btn:hover, .viz-mini .btn.ghost:hover, html[data-theme="light"] .viz-mini .btn:hover, html[data-theme="light"] .viz-mini .btn.ghost:hover { background: rgba(232,176,75,.14); color: #e8b04b; filter: none; }
.viz-mini .btn[data-viz="restart"]:hover, html[data-theme="light"] .viz-mini .btn[data-viz="restart"]:hover { background: rgba(185,211,90,.14); color: #b9d35a; }
html[data-theme="light"] .viz-mini .btn { color: #8a5a00; box-shadow: inset 0 0 0 1px #c48a1c; }
html[data-theme="light"] .viz-mini .btn[data-viz="restart"] { color: #4d6200; box-shadow: inset 0 0 0 1px #7e9a14; }
.viz-mini .btn[data-viz="restart"], html[data-theme="light"] .viz-mini .btn[data-viz="restart"] { background: transparent; }
.viz-mini .btn[data-viz="restart"]:hover, html[data-theme="light"] .viz-mini .btn[data-viz="restart"]:hover { background: rgba(185,211,90,.14); }

/* The Look of More opens black (continuing the animation's black) and grades into purple */
.viz-fade.bottom { height: 0; }
#look { padding-top: 0; }
#look::after { height: min(1100px, 100%); background: linear-gradient(to bottom, #000 0%, rgba(26,10,74,.96) 22%, rgba(70,18,170,.7) 62%, rgba(114,19,234,.28) 100%); }
html[data-theme="light"] #look::after { background: linear-gradient(to bottom, #000 0%, rgba(40,14,110,.9) 20%, rgba(114,19,234,.4) 60%, rgba(114,19,234,.1) 100%); }
#look .sub-row:first-child { margin-top: 0; padding-top: 112px; }

/* Performance: its own title section, then one full-bleed image, then the rows */
#performance, .tsec#performance { padding-top: 64px; }
#performance .sec-head { margin-bottom: 0; }
.band { margin: 56px 0 0; }
.band img { display: block; width: 100%; aspect-ratio: 21 / 9; max-height: 84vh; object-fit: cover; }
#performance .splits > .split:first-child .split-text { justify-content: center; padding-top: clamp(40px, 6vw, 140px); }
.band { margin: 56px 0 0 calc(50% - 50vw); }
#locations .sec-head { margin-bottom: 0; }

/* title bands: the photo sits underneath the title */
.title-band { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(380px, 42vw, 860px); margin: 40px 0 0 calc(50% - 50vw); color: #fff; overflow: hidden; background: #000; }
.title-band .tb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.title-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4,6,26,.88) 0%, rgba(4,6,26,.55) 38%, rgba(4,6,26,.1) 72%, rgba(4,6,26,.25) 100%); }
.title-band .tb-inner { width: 100%; padding: clamp(96px, 12vw, 220px) var(--gutter) clamp(36px, 4vw, 72px); }
.title-band .sec-head { margin: 0; align-items: end; }
.title-band .eyebrow, .title-band h2, .title-band .sec-intro p, .title-band .sec-intro p:first-child { color: #fff; }
.title-band .eyebrow { opacity: .9; }
#performance .sec-head, #locations .sec-head { margin-bottom: 0; }
/* soft blur under the title text so it stays legible over busy photos */
.title-band::after { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 78%); mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 78%); }
.title-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(4,6,26,.28), transparent 40%); }
.title-band::after { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 62%); mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 62%); }

/* title bands: image runs the browser's full height, title centred, flush against the section above */
#performance, #locations, .tsec#performance, .tsec#locations { padding-top: 0; }
.title-band { min-height: 100vh; min-height: 100svh; margin-top: 0; align-items: center; justify-content: center; }
.title-band .tb-inner { padding: clamp(80px, 10vw, 160px) var(--gutter); }
.title-band .sec-head { display: block; text-align: center; }
.title-band .sec-head > div:first-child { text-align: center; }
.title-band .sec-head h2 { font-size: clamp(56px, 9vw, 150px); }
.title-band .sec-intro { max-width: 60ch; margin: 28px auto 0; }
.title-band .sec-intro:empty { display: none; }
.title-band .sec-intro p, .title-band .sec-intro p:first-child { margin-left: auto; margin-right: auto; max-width: 44ch; font-size: clamp(22px, 2vw, 32px); }
.title-band::after { background: radial-gradient(ellipse at center, rgba(4,6,26,.5) 0%, rgba(4,6,26,.3) 60%, rgba(4,6,26,.45) 100%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-mask-image: none; mask-image: none; }
#performance .title-band .sec-head > div:first-child, #locations .title-band .sec-head > div:first-child { text-align: center; order: 0; }

/* the page opening and the People heading each occupy the full window height */
.page-head.fs { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding-bottom: 0; }
.page-head.fs .triptych { flex: 1; min-height: 42vh; margin-top: 40px; }
.page-head.fs .triptych figure { aspect-ratio: auto; height: 100%; }
#people { padding-top: 0; }
#people .sec-head { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); align-items: center; margin-bottom: 0; }
@media (max-width: 860px) { #people .sec-head { min-height: 0; padding-block: 72px; } .page-head.fs .triptych figure { aspect-ratio: 16 / 10; height: auto; } .page-head.fs .triptych { flex: none; } }

/* three tiled faces close the People heading screen; together they still fill the window height */
:root { --t3: clamp(220px, 38vh, 560px); }
#people .sec-head { min-height: calc(100vh - var(--header-h) - var(--t3)); min-height: calc(100svh - var(--header-h) - var(--t3)); }
.tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; height: var(--t3); }
.tiles3 figure { margin: 0; overflow: hidden; background: #000; }
.tiles3 img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .tiles3 { height: auto; grid-template-columns: 1fr; } .tiles3 figure { aspect-ratio: 16 / 10; } }
:root { --t3: clamp(200px, 34vh, 520px); }
#people .sec-head { padding-block: 40px; }

/* People: a smaller window. A standard three-up grid (HIG collections: row or grid layout), equal tiles,
   one container shape to group them, aligned to the page margins like every other block. */
.people-window { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; height: var(--t3); margin: 0 0 24px; border-radius: 24px; background: var(--card); box-shadow: var(--card-shadow); }
.people-window figure { margin: 0; overflow: hidden; border-radius: 14px; background: #000; }
.people-window img { width: 100%; height: 100%; object-fit: cover; display: block; }
#people .sec-head { min-height: calc(100vh - var(--header-h) - var(--t3) - 24px); min-height: calc(100svh - var(--header-h) - var(--t3) - 24px); }
@media (max-width: 860px) { .people-window { height: auto; grid-template-columns: 1fr; } .people-window figure { aspect-ratio: 16 / 10; } }

/* Performance title band: gradient only */
#performance .title-band { background: var(--hero-grad); }
#performance .title-band::before, #performance .title-band::after { content: none; display: none; }

/* People screen: title and a small window of faces on one axis, the text below, all on the page grid */
.people-top { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; gap: clamp(40px, 7vh, 88px); padding-block: 48px; }
.people-row { display: grid; grid-template-columns: calc(50% - 7px) minmax(0, 1fr); column-gap: 14px; align-items: center; }
.people-row .eyebrow { margin-bottom: 18px; }
.people-row h2 { font: 300 clamp(48px, 7vw, 104px)/0.96 var(--head); letter-spacing: -0.035em; }
.people-row .people-window { height: clamp(120px, 19vh, 200px); margin: 0; padding: 8px; gap: 8px; border-radius: 18px; }
.people-row .people-window figure { border-radius: 11px; }
.people-text { padding-left: calc(50% + 7px); }
@media (max-width: 860px) { .people-top { min-height: 0; } .people-row { grid-template-columns: 1fr; row-gap: 28px; } .people-text { padding-left: 0; } .people-row .people-window { height: auto; grid-template-columns: repeat(3, 1fr); } .people-row .people-window figure { aspect-ratio: 3 / 4; } }

/* People: the faces sit on the vertical centre of the screen, three columns of text underneath */
.people-top { display: grid; grid-template-rows: 1fr auto 1fr; gap: 0; padding-block: 0; justify-content: stretch; }
.people-row { grid-row: 2; }
.people-text { grid-row: 3; align-self: start; padding: 56px 0 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 64px); max-width: none; }
.people-text p, .people-text p:first-child, .people-text .big { margin: 0; max-width: none; font: 400 17px/1.65 var(--sans); letter-spacing: 0; color: var(--body); }
.people-text p:first-child, .people-text .big { font: 300 clamp(20px, 1.8vw, 28px)/1.3 var(--head); letter-spacing: -0.01em; color: var(--fg); }
.people-text .lead { font-weight: 300; }
@media (max-width: 860px) { .people-top { display: block; padding-block: 56px; } .people-text { grid-template-columns: 1fr; padding: 40px 0 0; } }
/* three equal columns: one size, one weight */
.people-text p, .people-text p:first-child, .people-text .big { font: 400 18px/1.65 var(--sans); letter-spacing: 0; color: var(--body); }
.people-text .lead { font-weight: 700; color: var(--fg); }
#locations .title-band::after { backdrop-filter: none; -webkit-backdrop-filter: none; background: radial-gradient(ellipse at center, rgba(4,6,26,.32) 0%, rgba(4,6,26,.12) 60%, rgba(4,6,26,.3) 100%); }

/* title bands: the photo as is. No gradient overlay, no blur. */
.title-band::before, .title-band::after, #locations .title-band::after { content: none; display: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#locations .title-band .tb-img { opacity: .5; }

/* the rest of Recurring Locations sits on the same deep navy as the nav bar */
#locations::after { top: 0; height: 100%; background: #020414; }
html[data-theme="light"] #locations { --fg: #fff; --body: rgba(255,255,255,.88); --mut: rgba(255,255,255,.74); --dim: rgba(255,255,255,.56); --line: rgba(255,255,255,.2); --tint: rgba(255,255,255,.07); --card: rgba(255,255,255,.075); --card-shadow: 0 0 0 1px rgba(150,170,255,.26), 0 0 22px rgba(70,100,255,.12), 0 0 48px rgba(114,19,234,.08); --accent: #A1DEFF; --better-bg: linear-gradient(160deg, rgba(30,73,226,.32), rgba(114,19,234,.24)); color: #fff; }

/* Screens title stack: buttons centred under the widest (second) line, caption centred beneath them */
.title-stack { display: inline-block; max-width: 100%; }
.title-stack h2 { margin: 0; }
.title-stack .viz-mini { margin-top: 28px; max-width: none; text-align: center; }
.title-stack .viz-ctl { justify-content: center; }
.title-stack .viz-mini .cap { margin: 14px 0 0; text-align: center; }

/* boot-up title: hot lime flash that cools to white, like the interface labels */
.boot-title { transition: color .45s steps(14), text-shadow .45s steps(14); }
.boot-title.is-booting { color: #d9ff6e; text-shadow: 0 0 18px rgba(217,255,110,.45); }

/* boot title: amber, no glow, no colour transition */
.boot-title, .boot-title.is-booting { color: #e8b04b; text-shadow: none; transition: none; white-space: nowrap; }
.sub-row .sub-h.boot-title { color: #e8b04b; text-shadow: none; }
.sub-row .sub-h.boot-title { color: #fff; }
.boot-title, .boot-title.is-booting { color: #fff; }
/* the Look gradient fades out into the page background, so there is no break above the footer */
#look::after { height: 100%; background: linear-gradient(to bottom, #000 0%, rgba(26,10,74,.96) 18%, rgba(70,18,170,.72) 45%, rgba(114,19,234,.34) 78%, rgba(114,19,234,0) 100%); }
html[data-theme="light"] #look::after { background: linear-gradient(to bottom, #000 0%, rgba(40,14,110,.9) 18%, rgba(114,19,234,.42) 50%, rgba(114,19,234,.14) 80%, rgba(114,19,234,0) 100%); }
#look { padding-bottom: 96px; }

/* Business Better locations: new places in a montage, still shown as windows like the recurring ones above */
.loc-kicker { display: block; font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); padding: 28px 36px 0; }
.loc-bb > h4 { padding-top: 14px; }
.loc-intro p { margin: 0; padding: 0 36px 32px; max-width: 72ch; font-size: 17px; color: var(--body); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.trio .tcol .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 0; background: #000; }
.trio .tt { padding: 22px 36px 30px; }
.trio h5 { font: 300 clamp(24px, 2.2vw, 34px)/1.1 var(--head); letter-spacing: -0.015em; margin: 0 0 8px; }
.trio p { margin: 0; font-size: 16.5px; color: var(--body); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; gap: 24px; } .loc-kicker, .loc-intro p, .trio .tt { padding-inline: 24px; } }
#locations { padding-bottom: 96px; }
/* triptych: tiles touch, no dark lines between them */
.triptych { gap: 0; }
.triptych figure { background: transparent; }
.triptych figure + figure { margin-left: -1px; }
.triptych video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Screens, Tech & Data: near-black from the start, so the run into the interface (also black) is seamless */
#screens::after { top: 0; height: 100%; background: linear-gradient(to bottom, #020414 0%, #000 30%, #000 100%); }
.viz-fade.top { background: #000; height: 0; }
html[data-theme="light"] #screens { --fg: #fff; --body: rgba(255,255,255,.88); --mut: rgba(255,255,255,.74); --dim: rgba(255,255,255,.56); --line: rgba(255,255,255,.2); --accent: #A1DEFF; color: #fff; }

/* Recurring Locations: brand-colour gradient glows drifting through the navy behind the windows */
#locations::after { background:
  radial-gradient(ellipse 70% 14% at 12% 24%, rgba(30,73,226,.45), transparent 70%),
  radial-gradient(ellipse 65% 14% at 88% 44%, rgba(114,19,234,.42), transparent 70%),
  radial-gradient(ellipse 70% 14% at 15% 66%, rgba(253,52,156,.3), transparent 70%),
  radial-gradient(ellipse 70% 14% at 85% 88%, rgba(30,73,226,.35), transparent 70%),
  #020414; }

/* The Look of More: very dark at the start, easing out toward the bottom */
#look::after { height: 100%; background: linear-gradient(to bottom, #000 0%, #000 14%, rgba(6,3,24,.98) 28%, rgba(22,9,66,.9) 48%, rgba(48,14,120,.62) 70%, rgba(90,18,190,.28) 88%, rgba(114,19,234,0) 100%); }
html[data-theme="light"] #look::after { background: linear-gradient(to bottom, #000 0%, #000 14%, rgba(14,6,44,.96) 30%, rgba(40,14,110,.78) 52%, rgba(100,22,210,.4) 76%, rgba(114,19,234,.12) 90%, rgba(114,19,234,0) 100%); }

/* The Look of More: starts black and keeps getting lighter all the way down to the bottom of the page */
#look { padding-bottom: clamp(200px, 30vh, 340px); }
#look::after, html[data-theme="light"] #look::after { height: 100%; background: linear-gradient(to bottom, #000 0%, #000 14%, #08031c 30%, #1a0a4a 48%, #4a14b8 68%, #7213EA 84%, #A1DEFF 100%); }
body[data-nav="treatment"] .site-footer { margin-top: 0; background: #A1DEFF; color: rgba(0,0,0,.62); border-top: 0; }

/* ---------- The People, re-imagined ----------
   One screen, two columns on the page's centre line.
   Left: the title anchors the top; the copy sits at the foot in three clear steps (lead, support, quote).
   Right: three faces cascade in a zig-zag down the full height, so the eye travels top to bottom beside the text. */
.people-stage { display: grid; grid-template-columns: calc(50% - 7px) minmax(0, 1fr); column-gap: 14px; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding-block: clamp(32px, 5vh, 64px); align-items: stretch; }
.ps-text { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-right: clamp(24px, 4vw, 72px); }
.ps-head .eyebrow { margin-bottom: 18px; }
.ps-head h2 { font: 300 clamp(56px, 8vw, 132px)/0.94 var(--head); letter-spacing: -0.04em; }
.ps-body { display: grid; gap: 22px; max-width: 58ch; }
.ps-body p { margin: 0; max-width: none; }
.ps-lead { font: 300 clamp(22px, 2.1vw, 34px)/1.28 var(--head); letter-spacing: -0.012em; color: var(--fg); }
.ps-lead .lead { font-weight: 300; }
.ps-sup { font: 400 17px/1.65 var(--sans); color: var(--mut); padding-top: 22px; border-top: 1px solid var(--line); }
.ps-quote { font: 300 clamp(19px, 1.5vw, 24px)/1.35 var(--head); color: var(--fg); padding-left: 20px; position: relative; }
.ps-quote::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--grad-2); }
.cascade { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 14px; min-height: 0; }
.cascade figure { margin: 0; width: 68%; min-height: 0; border-radius: 16px; overflow: hidden; background: #000; box-shadow: var(--card-shadow); }
.cascade figure.c1 { justify-self: end; } .cascade figure.c2 { justify-self: start; } .cascade figure.c3 { justify-self: end; }
.cascade img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .people-stage { grid-template-columns: 1fr; min-height: 0; row-gap: 40px; padding-block: 56px; }
  .ps-text { padding-right: 0; gap: 32px; }
  .cascade { grid-template-rows: none; gap: 12px; }
  .cascade figure, .cascade figure.c1, .cascade figure.c2, .cascade figure.c3 { width: 100%; aspect-ratio: 16 / 10; justify-self: stretch; }
}

/* The Look of More: black at the top, easing out to a dark, neutral purple at the very bottom */
#look::after, html[data-theme="light"] #look::after { background: linear-gradient(to bottom, #000 0%, #000 14%, #08031c 30%, #150a38 50%, #221250 72%, #2d1d58 88%, #35255c 100%); }
body[data-nav="treatment"] .site-footer { background: #35255c; color: rgba(255,255,255,.6); }

/* ---------- Approach pages: each act opens with its own full-width gradient, not a divider bar ----------
   Spacing on an 8px rhythm: generous air above the title inside the gradient, the first scene butts straight
   against the foot of the heading band, and each act's gradient starts flush with the last image above it. */
.act { margin-top: 0; position: relative; }
.act::after { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: 0; height: min(820px, 100%); pointer-events: none; background: linear-gradient(to bottom, var(--sec-c) 0%, transparent 100%); }
.act.a1 { --sec-c: rgba(161,222,255,.30); }
.act.a2 { --sec-c: rgba(253,52,156,.30); }
.act.a3 { --sec-c: rgba(114,19,234,.44); }
html[data-theme="light"] .act.a1 { --sec-c: rgba(161,222,255,.6); }
html[data-theme="light"] .act.a2 { --sec-c: rgba(253,52,156,.22); }
html[data-theme="light"] .act.a3 { --sec-c: rgba(114,19,234,.2); }
.act-head::before { content: none; display: none; }
.act-head { min-height: clamp(420px, 58vh, 700px); align-items: end; padding: clamp(72px, 9vw, 128px) 0 clamp(48px, 5vw, 80px); margin-bottom: 0; }
.act-head h2 { font-size: clamp(56px, 8vw, 132px); line-height: .94; }
.act-head .eyebrow { margin-bottom: 20px; }
.act-head .lede { max-width: 46ch; }
.act-head .note { margin-top: 18px; }
#scene-list { margin-bottom: clamp(72px, 9vw, 128px); }
@media (max-width: 860px) { .act-head { min-height: 0; padding-block: 72px 40px; } }

/* tighter spacing */
#look { padding-bottom: 72px; }
body[data-nav="treatment"] .site-footer { padding-block: 14px; }
.act-head { min-height: clamp(280px, 40vh, 460px); padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 3.4vw, 56px); }
.act-head h2 { font-size: clamp(48px, 6.6vw, 108px); }
#scene-list { margin-bottom: clamp(48px, 6vw, 80px); }

/* ---------- Approach pages: act openings and the intercut are full-bleed pages, each as tall as the browser window ---------- */
.act::after { content: none; display: none; }
.act-head { position: relative; isolation: isolate; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding: 72px 0 clamp(40px, 6vh, 80px); }
.act-head::after { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: 0; bottom: 0; background: linear-gradient(to bottom, var(--sec-c) 0%, var(--sec-c2, transparent) 100%); }
.act.a1 { --sec-c: rgba(161,222,255,.34); --sec-c2: rgba(161,222,255,.08); }
.act.a2 { --sec-c: rgba(253,52,156,.34); --sec-c2: rgba(253,52,156,.08); }
.act.a3 { --sec-c: rgba(114,19,234,.5); --sec-c2: rgba(114,19,234,.14); }
html[data-theme="light"] .act.a1 { --sec-c: rgba(161,222,255,.7); --sec-c2: rgba(161,222,255,.2); }
html[data-theme="light"] .act.a2 { --sec-c: rgba(253,52,156,.26); --sec-c2: rgba(253,52,156,.06); }
html[data-theme="light"] .act.a3 { --sec-c: rgba(114,19,234,.26); --sec-c2: rgba(114,19,234,.07); }
.act-head h2 { font-size: clamp(56px, 8.4vw, 140px); }
#scene-list { margin-bottom: clamp(48px, 6vw, 80px); }

.act > .scene.intercut { width: 100vw; margin: 0 0 0 calc(50% - 50vw); min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; align-items: flex-end; padding: 72px 0 clamp(40px, 6vh, 80px); border: 0; border-radius: 0; box-shadow: none; color: #fff; background: radial-gradient(ellipse 80% 60% at 50% 115%, rgba(253,52,156,.3), transparent 70%), radial-gradient(ellipse 60% 50% at 10% 0%, rgba(30,73,226,.22), transparent 70%), #02030f; }
.ic-inner { width: 100%; padding-inline: var(--gutter); display: grid; grid-template-columns: calc(50% - 7px) minmax(0, 1fr); column-gap: 14px; align-items: end; }
.ic-left .eyebrow { color: rgba(255,255,255,.8); margin-bottom: 20px; }
.ic-left h3 { font: 300 clamp(56px, 8.4vw, 140px)/.94 var(--head); letter-spacing: -0.035em; }
.ic-right { display: grid; gap: 20px; max-width: 58ch; padding-left: 0; }
.ic-right p { margin: 0; font: 400 18px/1.65 var(--sans); color: rgba(255,255,255,.88); }
.ic-right p:first-child { font: 300 clamp(22px, 1.9vw, 30px)/1.3 var(--head); color: #fff; }
@media (max-width: 860px) { .act-head, .act > .scene.intercut { min-height: 0; padding-block: 72px 48px; } .ic-inner { grid-template-columns: 1fr; row-gap: 32px; } }

/* production totals: quieter numbers */
.vs td.v { font: 400 20px/1.2 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.vs th, .vs td { padding: 14px 24px; }
.vs td:first-child { font-size: 16px; }

/* People: the three faces share one window again, stacked vertically; the title and copy gather toward the middle */
.ps-text { justify-content: center; gap: clamp(28px, 5vh, 56px); }
.faces-window { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; min-height: 0; border-radius: 24px; background: var(--card); box-shadow: var(--card-shadow); }
.faces-window figure { margin: 0; min-height: 0; overflow: hidden; border-radius: 14px; background: #000; }
.faces-window img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .faces-window { grid-template-rows: none; } .faces-window figure { aspect-ratio: 16 / 10; } }
.people-stage { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 640px; }
.faces-window { height: 100%; }
.faces-window figure { position: relative; }
.faces-window img { position: absolute; inset: 0; }
@media (max-width: 860px) { .people-stage { height: auto; min-height: 0; } .faces-window { height: auto; } .faces-window img { position: static; } }

/* By the Numbers: the opening is its own full-window page */
.page-head.fs { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding-block: 72px clamp(40px, 7vh, 88px); }
.page-head.fs::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: 0; bottom: 0; background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(30,73,226,.34), transparent 70%), radial-gradient(ellipse 60% 55% at 100% 100%, rgba(253,52,156,.22), transparent 70%), radial-gradient(ellipse 60% 50% at 80% 10%, rgba(114,19,234,.2), transparent 70%); }
.page-head.fs h1 { font-size: clamp(56px, 9.4vw, 160px); }
.page-head.fs .lede { max-width: 52ch; }
.page-head.fs .legend { margin-top: 32px; }
.csec:first-of-type { margin-top: clamp(64px, 8vw, 112px); }
@media (max-width: 860px) { .page-head.fs { min-height: 0; } }
#scene-list { padding-top: clamp(48px, 6vw, 88px); }

/* Scene List: one window-height page. Type and row spacing scale with the window's height so every row fits. */
#scene-list { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(16px, 2.4vh, 32px); margin-bottom: 0; }
#scene-list .scene-list-head { margin-bottom: clamp(10px, 1.8vh, 20px); }
#scene-list .scene-list-head h2 { font-size: clamp(28px, 4.6vh, 46px); margin-bottom: 4px; }
#scene-list .lede-s { font-size: clamp(12px, 1.5vh, 14px); }
#scene-list .stats-table .stat b { font-size: clamp(22px, 3.4vh, 32px); }
#scene-list .stats-table .stat span { font-size: 10px; }
#scene-list .tbl { min-width: 0; }
#scene-list .tbl th { padding: clamp(5px, .9vh, 9px) 14px; font-size: 10px; }
#scene-list .tbl td { padding: clamp(4px, .78vh, 9px) 14px; font-size: clamp(11px, 1.45vh, 13.5px); line-height: 1.35; }
#scene-list .tbl td.loc-c { width: 190px; }
#scene-list .tbl td.n { width: 36px; }
#scene-list .pill { font-size: 10.5px; padding: 5px 9px; }
#scene-list .tbl-wrap { overflow-x: auto; }
@media (max-width: 860px) { #scene-list { min-height: 0; display: block; } #scene-list .tbl { min-width: 620px; } }
#scene-list .tbl td { padding-block: clamp(3px, .68vh, 8px); } #scene-list { padding-block: clamp(12px, 2vh, 28px); }

/* Production Breakdown: both charts on one window-height page, scaling with the window's height */
#shoot { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; margin-top: 0; padding-block: clamp(16px, 3vh, 40px); }
#shoot > h2 { font-size: clamp(30px, 5vh, 52px); margin-bottom: 4px; }
#shoot .lede-s { font-size: clamp(12px, 1.6vh, 15px); margin-bottom: clamp(12px, 2.4vh, 24px); }
#shoot .cols-2 { gap: clamp(16px, 3.2vh, 36px); }
#shoot .cols-2 h3 { font-size: clamp(22px, 3.4vh, 32px); margin-bottom: 2px; }
#shoot .cols-2 .count { font-size: 12px; margin-bottom: clamp(8px, 1.4vh, 14px); }
#shoot .tbl { min-width: 0; }
#shoot .tbl th { padding: clamp(5px, 1vh, 10px) 16px; font-size: 10px; }
#shoot .tbl td { padding: clamp(6px, 1.3vh, 14px) 16px; font-size: clamp(12px, 1.6vh, 15px); line-height: 1.3; }
#shoot .tbl td .sub { font-size: clamp(10px, 1.3vh, 12px); }
@media (max-width: 860px) { #shoot { min-height: 0; display: block; } #shoot .tbl { min-width: 620px; } }

/* Treatment opening: centred text, and the three act tiles run to the very bottom of the window */
body[data-nav="treatment"] .page-head.fs { padding-bottom: 0; padding-top: clamp(40px, 6vh, 72px); justify-content: flex-start; text-align: center; }
body[data-nav="treatment"] .page-head.fs::before { content: none; display: none; }
body[data-nav="treatment"] .page-head.fs .lede { margin-inline: auto; max-width: 56ch; }
body[data-nav="treatment"] .page-head.fs .eyebrow { margin-bottom: 14px; }
body[data-nav="treatment"] .page-head.fs .triptych { margin-top: clamp(24px, 4vh, 48px); }
body[data-nav="treatment"] .page-head.fs .triptych figcaption { text-align: left; }

/* People: act names in bold light blue instead of caps */
.ps-lead .hl { font-weight: 700; color: var(--lblue); }
html[data-theme="light"] .ps-lead .hl { color: var(--blue); }

/* Full-screen button beside the theme toggle */
.fs-btn .i-exit { display: none; }
:fullscreen .fs-btn .i-enter { display: none; } :fullscreen .fs-btn .i-exit { display: block; }
:-webkit-full-screen .fs-btn .i-enter { display: none; } :-webkit-full-screen .fs-btn .i-exit { display: block; }