:root {
  --canvas: #070709; --surface: #111015; --ink: #f6f4f9; --muted: #b9b5c3;
  --purple: #9250ff; --purple-light: #c29bff; --line: #ffffff17;
  --gutter: clamp(24px, 5vw, 80px); --content: 1500px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body.p4 { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }
button, summary { cursor: pointer; }
button { color: inherit; }
button, textarea { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.12; }
h2 { font-size: clamp(27px, 2.4vw, 38px); letter-spacing: -.035em; font-weight: 650; }
h3 { font-weight: 600; }
[hidden] { display: none !important; }
::selection { background: #6c27bb; color: white; }
:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 5px; }
.page-width { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; left: 20px; top: 20px; padding: 12px 18px; z-index: 100; background: var(--surface); }
.eyebrow { color: var(--purple-light); font-size: 12px; font-weight: 600; letter-spacing: .16em; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 52px; padding: 13px 28px; color: #fff; border: 1px solid #aa76ff44; border-radius: 7px; background: linear-gradient(170deg, #9955ff, #7423ef 85%); font-size: 14px; font-weight: 600; box-shadow: 0 4px 28px #6b28dc1c; transition: filter .18s, transform .18s; }
.button:hover { filter: brightness(1.14); transform: translateY(-1px); }
.button span { font-size: 21px; line-height: 1; }
.button-small { min-height: 42px; padding: 9px 26px; }
.icon-button { display: grid; place-content: center; width: 44px; height: 44px; background: none; }
 .public-footer a:hover { color: var(--purple-light); }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 610px; height: min(700px, calc(100svh - 108px)); overflow: hidden; }
.hero-image, .hero-shade { position: absolute; inset: 0; z-index: -2; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 49%; }
.hero-shade { z-index: -1; background: linear-gradient(0deg, var(--canvas) 0%, #0707090d 42%, #07070915 70%), linear-gradient(90deg, #070709ab, #07070922 85%); }
.hero-content { padding-top: clamp(56px, 7.2vh, 95px); }
.hero h1 { margin-top: 11px; font-size: clamp(40px, 4.15vw, 68px); font-weight: 700; letter-spacing: -.045em; }
.hero-description { margin-top: 13px; font-size: clamp(16px, 1.3vw, 19px); color: #eee9f0; line-height: 1.55; max-width: 830px; }
.composer { max-width: 930px; margin: 30px auto 0; padding: 24px 26px 20px; background: #0e0d13ed; border: 1px solid #9d68ef72; border-radius: 16px; box-shadow: 0 24px 65px #0007; transition: border-color .2s, box-shadow .2s; }
.composer:focus-within { border-color: var(--purple-light); box-shadow: 0 0 0 3px #9a59ff22, 0 24px 65px #0007; }
.composer-input { display: flex; align-items: flex-start; gap: 18px; }
.director-mark { color: #b875ff; width: 29px; height: 29px; flex: 0 0 auto; margin-top: 2px; }
.composer textarea { color: var(--ink); background: transparent; width: 100%; padding: 5px 0; border: 0; resize: vertical; min-height: 53px; max-height: 220px; line-height: 1.6; font-size: 16px; }
.composer textarea::placeholder { color: #b4aec1; opacity: 1; }
.composer textarea:focus { outline: 0; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-left: 47px; margin-top: 12px; }
.composer-actions p { font-size: 13px; color: var(--muted); }
.hero-bottom { display: flex; align-items: center; gap: 42px; margin-top: auto; padding-block: 35px 44px; }
.hero-film-title { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.hero-bottom p { font-size: 12px; color: #d0cbd5; margin-top: 5px; }
.watch-button { display: inline-flex; align-items: center; gap: 14px; background: none; font-size: 13px; font-weight: 550; padding: 0; }
.play-icon { display:grid;place-items:center;flex:0 0 auto;width:43px;height:43px;line-height:1; }
.hero-scroll { margin-left: auto; color: #e0d7e8; font-size: 12px; display: flex; gap: 22px; align-items: center; }
.hero-scroll span { font-size: 22px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading p { margin-top: 8px; color: var(--muted); font-size: 16px; }
.work-section { padding-top: 16px; }
.work-filters { display: flex; gap: 20px; flex-wrap: wrap; }
.work-filters button { position: relative; padding: 12px 2px; background: none; color: var(--muted); min-height: 44px; font-size: 13px; }
.work-filters button.active { color: var(--purple-light); }
.work-filters button.active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--purple); }
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 17vw, 265px); gap: 12px; }
.work-tile { position: relative; isolation: isolate; overflow: hidden; min-width: 0; border-radius: 5px; grid-column: span 4; }
.work-tile:first-child { grid-column: span 3; grid-row: span 2; }
.work-tile:nth-child(2) { grid-column: span 5; }
.work-tile:nth-child(3) { grid-column: span 4; }
.work-tile:nth-child(4) { grid-column: span 3; }
.work-tile:nth-child(5) { grid-column: span 3; }
.work-tile:nth-child(6) { grid-column: span 3; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.6,.2,1); }
.work-tile:hover img { transform: scale(1.035); }
.work-tile::after { content: ""; position: absolute; inset: 35% 0 0; pointer-events: none; background: linear-gradient(0deg, #030305ed, #03030500); }
.work-caption { position: absolute; left: 20px; right: 16px; bottom: 18px; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.work-caption h3 { font-size: 12px; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; }
.work-caption p { margin-top: 3px; color: #d2ccd9; font-size: 12px; line-height: 1.45; }
.work-caption .play-icon { width: 40px; height: 40px; font-size: 19px; }
.explore-production { display: inline-block; margin-top: 8px; font-size: 12px; color: #dfc5ff; }
.work-grid.filtered .work-tile { grid-column: span 4; grid-row: span 1; min-height: 220px; }
.work-grid.filtered .work-tile[data-aspect="9:16"] { grid-row: span 2; }
.fixture-note { text-align: right; font-size: 11px; letter-spacing: .02em; color: #96909f; margin-top: 12px; }
.progression { padding-top: 72px; padding-bottom: 64px; }
.progression .section-heading .eyebrow { font-size: 10px; color: var(--muted); }
.production-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(35px, 7vw, 100px); padding: 0; margin: 35px 0 0; }
.production-steps li { position: relative; min-width: 0; }
.production-steps li:not(:last-child)::after { content: "→"; position: absolute; right: clamp(-67px, -4.5vw, -28px); top: 110px; color: #b9aecb; font-size: 29px; font-weight: 200; }
.step-description { display: flex; gap: 19px; align-items: flex-start; }
.step-number { color: #787181; font-size: 44px; line-height: 1; font-weight: 200; letter-spacing: -.07em; }
.step-description h3 { font-size: 16px; margin-top: 3px; }
.step-description p { font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 8px; }
.step-visual { height: 102px; margin-top: 24px; }
.step-brief { display: flex; align-items: center; gap: 13px; background: linear-gradient(100deg,#17121f,#0d0d10); padding: 18px 20px; font-size: 13px; border-radius: 5px; }
.step-brief > :last-child { margin-left: auto; color: var(--purple-light); font-size: 24px; }
.mini-star { color: var(--purple-light); font-size: 28px; }
.step-shots { display: flex; gap: 9px; }
.step-shots img, .step-shots > span { width: calc((100% - 18px) / 3); height: 100%; object-fit: cover; border-radius: 4px; }
.step-shots > span { display: grid; place-content: center; background: #16131c; font-size: 13px; color: var(--muted); }
.step-finish { display: flex; gap: 15px; align-items: center; }
.finish-frame { display: grid; place-content: center; height: 100%; width: 58%; font-size: 36px; background: linear-gradient(140deg,#514037,#19151d 48%,#0a0a0d); border-radius: 4px; color: #c7b7d2; }
.step-finish > div { flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.step-finish > div span { display: flex; justify-content: space-between; gap: 12px; }
.step-finish i { color: #92cbbd; font-style: normal; }
.tool-section { padding-bottom: 65px; }
.inline-heading { display: flex; align-items: baseline; gap: 24px; }
.inline-heading p { font-size: 13px; }
.text-link { color: var(--purple-light); font-size: 13px; white-space: nowrap; }
.text-link span { padding-left: 10px; }
.tool-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tool-link { position: relative; isolation: isolate; min-height: 125px; overflow: hidden; background: linear-gradient(145deg, #26212e, #101014); border-radius: 5px; }
.tool-link img { position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .5s; }
.tool-link::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #04030550, #040305c7); }
.tool-link > span { display: flex; align-items: center; gap: 9px; padding: 16px 14px; font-size: 13px; font-weight: 500; }
.tool-link svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; flex-shrink: 0; }
.tool-link b { margin-left: auto; font-size: 15px; font-weight: 400; }
.tool-link:hover img { transform: scale(1.05); }
.closing-cta { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 52px 0; background: #101015; }
.closing-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .28; z-index: -2; }
.closing-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#080809, #16101f66 55%,#08080966); }
.closing-content > p { margin-top: 10px; color: #d4cedc; }
.composer-compact { text-align: left; max-width: 780px; padding: 15px 18px; display: flex; align-items: center; gap: 16px; border-radius: 12px; margin-top: 24px; }
.composer-compact .composer-input { flex: 1; min-width: 0; align-items: center; gap: 10px; }
.composer-compact textarea { font-size: 14px; min-height: 33px; resize: none; }
.composer-compact .composer-actions { padding: 0; margin: 0; flex-shrink: 0; }
.composer-compact .composer-actions p { display: none; }
.composer-compact .button { font-size: 13px; padding: 12px 20px; min-height: 44px; gap: 16px; }
.public-footer { display: flex; align-items: center; gap: 45px; padding-block: 40px; min-height: 140px; }
.public-footer p { color: var(--muted); font-size: 12px; margin-top: 7px; }
.public-footer nav { display: flex; gap: 24px; font-size: 12px; color: #c8c2d0; }
.public-footer > nav:first-of-type { margin-left: auto; }
.public-footer .footer-signoff { text-align: right; font-size: 12px; margin-top: 0; }
.work-dialog { padding: 0; width: min(1000px, 92vw); max-height: 90svh; color: var(--ink); border: 1px solid #49414f; border-radius: 8px; background: #111015; overflow: auto; }
.work-dialog::backdrop { background: #030305ed; backdrop-filter: blur(8px); }
.close-preview { position: absolute; z-index: 2; right: 12px; top: 12px; background: #08080bd9; border-radius: 50%; font-size: 29px; }
.preview-media img, .preview-media video { width: 100%; max-height: 70svh; object-fit: contain; background: #030304; }
.preview-caption { padding: 24px 28px; }
.preview-caption h2 { font-size: 25px; }
.preview-caption p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.hero-empty { background: radial-gradient(ellipse at 80% 20%,#2c2537 0%,#121015 48%,#070709 75%); }
.empty-work { padding-block: 30px 15px; }
.empty-work h2 { margin: 14px 0; }
.empty-work p { color: var(--muted); line-height: 1.8; }
.empty-work a { color: var(--purple-light); display: inline-block; margin-top: 22px; }
.draft-message { margin: 14px auto 0; max-width: 930px; color: #e2caff; font-size: 14px; }
@media (max-width: 1100px) {
  .hero { min-height: 590px; } .hero-content { padding-top: 62px; }
  .work-grid { grid-auto-rows: 205px; } .work-caption { left: 14px; bottom: 14px; right: 12px; }
  .work-caption .play-icon { width: 34px; height: 34px; }
  .production-steps { gap: 45px; } .production-steps li:not(:last-child)::after { right: -34px; }
  .step-description { gap: 12px; } .step-description p { font-size: 13px; }
  .inline-heading { display: block; } .tool-link > span { font-size: 12px; gap: 7px; padding: 13px 10px; }
  .tool-link b { display: none; } .public-footer { flex-wrap: wrap; gap: 25px; } .footer-signoff { margin-left: auto; }
}
@media (max-width: 800px) { .button-small { padding: 8px 19px; min-height: 40px; }
  .hero { min-height: 640px; height: auto; } .hero h1 { font-size: clamp(38px,6vw,52px); }
  .hero-content { padding-top: 55px; } .hero-description { font-size: 16px; max-width: 610px; }
  .desktop-break { display: none; } .composer { padding: 21px 22px; margin-top: 27px; }
  .composer-actions { padding-left: 0; } .composer-actions .button { gap: 17px; padding-inline: 20px; }
  .hero-bottom { padding-top: 60px; gap: 30px; padding-bottom: 33px; } .hero-scroll { display: none; }
  .section-heading { align-items: start; } .work-section > .section-heading { display: block; }
  .work-filters { margin-top: 14px; gap: 24px; } .work-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 215px; gap: 10px; }
  .work-tile, .work-tile:nth-child(n), .work-grid.filtered .work-tile { grid-column: span 1; grid-row: span 1; }
  .work-tile:first-child { grid-row: span 2; } .work-tile:nth-child(4) { grid-row: span 2; } .work-tile:nth-child(6) { grid-column: span 2; }
  .progression { padding-block: 55px; } .progression .section-heading .eyebrow { display: none; }
  .production-steps { gap: 24px; } .production-steps li:not(:last-child)::after { display: none; }
  .step-number { font-size: 33px; } .step-description { display: block; } .step-description h3 { margin-top: 12px; font-size: 15px; }
  .step-brief { padding: 12px; } .step-brief .mini-star { display: none; } .step-visual { height: 82px; }
  .step-brief { font-size: 12px; } .step-brief > :last-child { font-size: 17px; }
  .step-finish { gap: 8px; } .step-finish > div { font-size: 10px; }
  .tool-rail { grid-template-columns: repeat(3,minmax(0,1fr)); } .tool-link { min-height: 105px; }
  .tool-link > span { font-size: 13px; padding: 14px; }
  .composer-compact { display: block; max-width: 620px; } .composer-compact .composer-actions { margin-top: 12px; }
  .composer-compact .button { margin-left: auto; }
  .public-footer { padding-block: 32px; } .public-footer > nav:first-of-type { margin-left: 0; } .public-footer nav { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  :root { --gutter: 22px; } .button-small { font-size: 12px; padding-inline: 17px; min-height: 38px; }
  .hero { min-height: 655px; } .hero-image img { object-position: 58% center; } .hero-shade { background: linear-gradient(0deg,#070709 0%,#0707090a 70%),linear-gradient(90deg,#070709a8,#07070933); }
  .hero-content { padding-top: 46px; } .hero .eyebrow { font-size: 10px; }
  .hero h1 { font-size: clamp(35px,9.5vw,47px); max-width: 370px; margin-top: 12px; }
  .hero-description { font-size: 15px; line-height: 1.6; margin-top: 15px; }
  .composer { margin-top: 27px; padding: 19px 17px 17px; border-radius: 12px; }
  .composer-input { gap: 10px; } .director-mark { width: 25px; height: 25px; }
  .composer textarea { font-size: 16px; min-height: 85px; }
  .composer-actions { flex-direction: column; align-items: stretch; gap: 15px; margin-top: 11px; }
  .composer-actions p { font-size: 12px; } .composer-actions .button { font-size: 13px; min-height: 48px; justify-content: space-between; padding-inline: 18px; }
  .hero-bottom { gap: 20px; padding-top: 38px; padding-bottom: 33px; }
  .hero-film-title { font-size: 10px; } .hero-bottom p { font-size: 11px; } .watch-button { margin-left: auto; font-size: 12px; gap: 9px; }
  .play-icon { width: 38px; height: 38px; }
  h2 { font-size: 28px; } .section-heading p { font-size: 14px; line-height: 1.5; }
  .work-section { padding-top: 8px; } .work-filters { gap: 24px; } .work-filters button { font-size: 12px; }
  .work-grid { grid-auto-rows: 190px; gap: 9px; } .work-tile:first-child { grid-column: span 2; grid-row: span 2; }
  .work-tile:nth-child(2), .work-tile:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .work-tile:nth-child(4), .work-tile:nth-child(5) { grid-column: span 1; grid-row: span 1; }
  .work-tile:nth-child(6) { grid-column: span 2; }
  .work-tile:first-child img { object-position: center 37%; }
  .work-caption { left: 14px; right: 13px; bottom: 14px; } .work-caption h3 { font-size: 11px; }
  .work-caption p { font-size: 11px; } .work-caption .play-icon { min-width: 38px; min-height: 38px; }
  .work-tile:nth-child(4) .work-caption, .work-tile:nth-child(5) .work-caption { flex-wrap: wrap; }
  .work-tile:nth-child(4) .play-icon, .work-tile:nth-child(5) .play-icon { position: absolute; right: -4px; bottom: 49px; }
  .work-grid.filtered .work-tile { grid-column: span 2; } .work-grid.filtered .work-tile[data-aspect="9:16"] { grid-row: span 2; }
  .fixture-note { text-align: left; font-size: 10px; margin-top: 13px; }
  .progression { padding-top: 47px; padding-bottom: 46px; } .production-steps { display: block; margin-top: 30px; }
  .production-steps li { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 18px; padding-block: 16px; }
  .step-description { display: flex; gap: 14px; } .step-number { font-size: 30px; padding-top: 5px; }
  .step-description h3 { font-size: 14px; margin-top: 5px; line-height: 1.3; }
  .step-description p { font-size: 12px; line-height: 1.5; } .step-description br { display: none; }
  .step-visual { margin-top: 0; height: 87px; } .step-brief { font-size: 10px; gap: 3px; padding: 12px; }
  .step-shots { gap: 4px; } .step-shots img { width: calc((100% - 8px) / 3); }
  .step-finish { display: block; } .finish-frame { width: 100%; height: 50px; font-size: 23px; }
  .step-finish > div { flex-direction: row; margin-top: 7px; gap: 5px; font-size: 8px; } .step-finish > div span { gap: 2px; }
  .tool-section { padding-bottom: 44px; } .tool-section .section-heading { display: block; } .text-link { display: inline-block; margin-top: 12px; }
  .inline-heading p { font-size: 13px; max-width: 260px; }
  .tool-rail { grid-template-columns: 1fr 1fr; gap: 9px; } .tool-link { min-height: 105px; }
  .tool-link:last-child { grid-column: span 2; min-height: 83px; } .tool-link > span { font-size: 12px; padding: 13px; }
  .tool-link b { display: inline; } .tool-link svg { width: 18px; height: 18px; }
  .closing-cta { padding-block: 37px; } .closing-content > p { font-size: 14px; }
  .composer-compact textarea { min-height: 55px; font-size: 14px; }
  .composer-compact .button { width: 100%; } .composer-compact .composer-actions { margin-top: 10px; }
  .public-footer { display: grid; grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  .public-footer nav { gap: 24px; font-size: 12px; } .public-footer .footer-signoff { display: none; }
  .preview-caption { padding: 18px; } .preview-caption p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; }
}
.button-small { min-height: 44px; }
 .explore-layout h2 { margin: 0 0 14px 10px; font-size: 11px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: #a39aad; }
 .discovery-link:hover { background: #a66cff0d; }
 .discovery-link svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.explore-layout { display: grid; grid-template-columns: 1.2fr .8fr 1.15fr; gap: 36px; padding-bottom: 32px; }
.discovery-feature { display: block; position: relative; overflow: hidden; min-height: 235px; border-radius: 6px; }
.discovery-feature > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .8; }
.discovery-feature > span { position: absolute; inset: 0; background: linear-gradient(0deg,#0c0714f5,#0d081000 80%); display: flex; flex-direction: column; justify-content: end; padding: 24px; }
.discovery-feature small { color: #e1caff; font-size: 10px; letter-spacing: .14em; }
.discovery-feature strong { font-size: 24px; margin: 5px 0 7px; }
.discovery-feature > span > span { font-size: 13px; color: #d4c8df; }
.discovery-feature b { margin-left: 10px; font-weight: 400; }
.discovery-link { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 10px; border-radius: 7px; font-size: 15px; }
.discovery-link svg { color: #b898dd; width: 20px; height: 20px; }
.discovery-link > :last-child { margin-left: auto; opacity: .55; }
.explore-layout:not(:has(.discovery-feature)) { grid-template-columns: 1fr 1fr; }
.tile-preview { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; background: transparent; border-radius: inherit; }
.tile-preview > .play-icon { position: absolute; right: 16px; bottom: 18px; width: 40px; height: 40px; font-size: 19px; }
.work-tile .work-caption { z-index: 3; pointer-events: none; padding-right: 50px; }
.explore-production { position: relative; pointer-events: auto; z-index: 4; min-height: 44px; display: inline-flex; align-items: center; }
.tile-preview:focus-visible { outline-offset: -4px; outline-width: 3px; }
.work-tile:focus-within img { transform: scale(1.035); }
.inline-heading { display: block; }
.inline-heading p { margin-top: 9px; }
.public-footer { flex-wrap: wrap; gap: 22px 32px; }
.public-footer .footer-content { gap: 22px; }
@media (max-width: 920px) {
   .explore-layout h2 { margin: 0 8px 7px; font-size: 12px; }
  .explore-layout, .explore-layout:not(:has(.discovery-feature)) { display: flex; flex-direction: column; gap: 24px; padding-bottom: 0; }
  .discovery-feature { min-height: 180px; order: 3; margin-inline: 8px; }
  .discovery-feature > span { padding: 20px; }
  .discovery-link { min-height: 52px; font-size: 17px; padding-inline: 8px; }
}
@media (max-width: 600px) {
  .progression { padding-top: 56px; padding-bottom: 58px; }
  .progression .section-heading { margin-bottom: 0; }
  .production-steps { display: block; margin-top: 38px; }
  .production-steps li { display: block; padding: 0 0 38px; margin: 0 0 32px; border-bottom: 1px solid #ffffff0e; }
  .production-steps li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .production-steps li::after { display: none; }
  .step-description { display: block; }
  .step-number { display: block; font-size: 48px; line-height: 1; padding: 0; color: #9c81bb; font-weight: 250; }
  .step-description h3 { font-size: 22px; margin-top: 17px; line-height: 1.25; letter-spacing: -.02em; }
  .step-description p { font-size: 16px; line-height: 1.6; margin-top: 10px; max-width: 330px; }
  .step-description br { display: none; }
  .step-visual { margin-top: 24px; height: 124px; width: 100%; }
  .step-brief { padding: 22px; gap: 14px; font-size: 15px; border: 1px solid #a476ce24; background: linear-gradient(105deg,#1d1529,#101014); border-radius: 8px; }
  .step-brief .mini-star { display: block; font-size: 28px; }
  .step-brief > :last-child { font-size: 24px; }
  .step-shots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; height: 132px; }
  .step-shots img, .step-shots > span { width: 100%; height: 100%; font-size: 15px; border-radius: 6px; }
  .step-finish { display: flex; height: 148px; gap: 20px; }
  .finish-frame { height: 100%; width: 48%; font-size: 38px; border-radius: 6px; }
  .step-finish > div { display: flex; flex-direction: column; font-size: 15px; margin: 0; gap: 15px; }
  .step-finish > div span { gap: 12px; }
}
@media (max-width: 520px) {
  .tile-preview > .play-icon { right: 13px; bottom: 14px; }
  .work-tile:nth-child(4) .tile-preview .play-icon, .work-tile:nth-child(5) .tile-preview .play-icon { right: 9px; bottom: 68px; }
  .work-tile:nth-child(4) .work-caption, .work-tile:nth-child(5) .work-caption { padding-right: 0; }
  .inline-heading p { max-width: none; font-size: 14px; }
  .public-footer { display: grid; gap: 23px; }
  .public-footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .public-footer nav { gap: 4px 24px; }
}
@media (max-width: 360px) {
  .step-brief { padding-inline: 15px; gap: 10px; font-size: 14px; }
}

.explore-entry { display: flex; align-items: center; border-radius: 7px; }
.explore-destination { display: flex; align-items: center; min-height: 44px; padding-left: 15px; font-size: 14px; }
.explore-entry:hover, .explore-entry:has(details[open]) { background: #a570ff12; color: #dac3ff; }
.mobile-explore-label { display: none; }
.explore-disclosure > summary { min-width: 44px; justify-content: center; padding-inline: 12px; }
@media (max-width: 920px) {
  .explore-entry { display: block; }
  .explore-destination { display: none; }
  .mobile-explore-label { display: inline; }
  .explore-disclosure > summary { justify-content: space-between; padding-inline: 8px; }
  .explore-entry:hover, .explore-entry:has(details[open]) { background: transparent; }
}

.explore-entry:hover, .explore-entry:has(details[open]) { color: var(--ink); }
.explore-entry:hover > .explore-destination, .explore-entry:has(details[open]) > .explore-destination { color: #dac3ff; }
@media (max-width: 600px) {
  .step-shots { grid-template-rows: minmax(0, 1fr); }
  .step-shots img { min-height: 0; min-width: 0; }
}
@keyframes menu-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.composer:focus-within { background: #15101ded; box-shadow: 0 0 0 2px #a46ee524,0 28px 68px #0008; }
.director-mark { transition: color .2s,transform .2s; }
.composer:focus-within .director-mark { color: #dcbbff; transform: rotate(8deg); }
.composer:focus-within .button { filter: brightness(1.08); }
.work-filters button { transition: color .18s; }
.work-filters button::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.work-filters button.active::after { transform: scaleX(1); }
.work-filters button:hover { color: #edddff; }
.work-tile::after { z-index: 1; transition: opacity .25s; }
.work-tile img { transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.work-caption { transition: transform .25s; }
.work-tile:focus-within .work-caption { transform: translateY(-3px); }
.work-tile:focus-within img { transform: scale(1.02); }
.tile-preview { transition: box-shadow .2s; }
.tile-preview:focus-visible { outline: 2px solid #c698ff; box-shadow: inset 0 0 0 1px #a577da; }
.play-icon { transition: transform .2s,background .2s,border-color .2s; }
.work-tile:focus-within .play-icon { transform: translateY(-2px); border-color: #d5afff; }
.hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 49%; pointer-events: none; opacity: 0; transition: opacity .45s; }
.tile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .25s; }
.hero-video.is-playing, .tile-video.is-playing { opacity: 1; }
.hero.media-ready .hero-image { animation: frame-settle 4s ease-out both; }
@keyframes frame-settle { from { transform: scale(1.018); } to { transform: none; } }
.reveal-ready { opacity: .9; transform: translateY(9px); transition: opacity .42s ease,transform .42s ease; }
.reveal-ready.is-revealed { opacity: 1; transform: none; }
.work-grid.is-filtering .work-tile:not([hidden]) { animation: filter-arrive .2s ease-out; }
@keyframes filter-arrive { from { opacity: .9; } to { opacity: 1; } }
.tool-link svg, .tool-link b { transition: transform .2s,color .2s; stroke-linecap: round; stroke-linejoin: round; }
.tool-link { transition: box-shadow .2s; }
.tool-link:hover, .tool-link:focus-visible { box-shadow: inset 0 0 0 1px #bf8bf654; }
.tool-link:hover svg, .tool-link:focus-visible svg { color: #d9baff; transform: translateY(-2px); }
.tool-link:hover b, .tool-link:focus-visible b { transform: translate(3px,-2px); }
.tool-link:focus-visible img { transform: scale(1.03); }
@media (hover: hover) and (pointer: fine) {
 .work-tile:hover img { transform: scale(1.02); }
 .work-tile:hover .work-caption { transform: translateY(-3px); }
 .work-tile:hover .play-icon { transform: translateY(-2px); }
}
@media (max-width: 920px) {
 .work-tile:hover img, .tool-link:hover img { transform: none; }
 .hero-video { display: none; }
}
@media (max-width: 520px) {
 .hero { min-height: 655px; }
}
.motion-paused .hero-image { animation-play-state: paused !important; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }
.motion-off .hero-image, .motion-off .reveal-ready, .motion-off .work-tile img, .motion-off .work-caption, .motion-off .play-icon, .motion-off .tool-link img, .motion-off .director-mark { transform: none !important; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
 .hero-image, .reveal-ready, .work-tile img, .work-caption, .play-icon, .tool-link img, .director-mark, .tool-link svg, .tool-link b, .button { transform: none !important; }
 .reveal-ready { opacity: 1; }
}
@media (min-width: 921px) {
 .resources-disclosure { position: relative; }
}

/* Brand character: locally served Latin variable fonts; preview shell only. */
@font-face { font-family: Sora; src: url("fonts/sora-latin.woff2") format("woff2"); font-style: normal; font-weight: 500 700; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/inter-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; }
body.p4 { --font-display: Sora, Arial, sans-serif; --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: var(--font-body); }
.p4 h1, .p4 h2, .p4 h3, .p4 .eyebrow, .p4 .button, .p4 .hero-film-title, .p4 .watch-button, .p4 .work-filters, .p4 .tool-link{ font-family: var(--font-display); }
.p4 h2 { font-weight: 600; letter-spacing: -.035em; line-height: 1.2; text-wrap: balance; }
.p4 h3 { font-weight: 600; }
.p4 .hero h1 { font-weight: 700; letter-spacing: -.045em; line-height: 1.12; text-wrap: balance; }
.p4 .button { font-weight: 600; letter-spacing: -.015em; }
 .p4 .hero-bottom p { font-family: var(--font-body); font-weight: 400; }
.p4 .work-caption h3 { font-size: 12px; line-height: 1.45; letter-spacing: .035em; }
.p4 .work-caption p { font-family: var(--font-body); font-weight: 400; }
.p4 .eyebrow { font-weight: 600; letter-spacing: .13em; }
.p4 .hero-film-title { font-weight: 600; letter-spacing: .07em; }
@media (max-width: 520px) {
 .p4 .hero h1 { font-size: 36px; line-height: 1.13; max-width: 370px; }
 .p4 h2 { font-size: 28px; line-height: 1.22; letter-spacing: -.035em; }
 .p4 .step-description h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.025em; }
 .p4 .work-caption h3 { font-size: 11px; letter-spacing: .025em; }
}
@media (max-width: 360px) {
 .p4 .hero h1 { font-size: 32px; }
 .p4 h2 { font-size: 26px; }
 .p4 .button { font-size: 12px; }
}

@media (max-width: 520px) { .p4 .hero-description { text-wrap: balance; } }

@media (max-width: 520px) { .p4 .tool-section h2 { font-size: clamp(21px,6.15vw,24px); } }

/* Real publication layouts reuse the frozen work card and motion language. */
.publication-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 340px; }
.publication-grid .work-tile:nth-child(n), .publication-grid.filtered .work-tile:nth-child(n) { grid-column: span 1; grid-row: span 1; }
.publication-grid[data-count="1"] { grid-template-columns: minmax(0,1fr); grid-auto-rows: min(58vw,560px); max-width: 1000px; margin-inline: auto; }
.publication-grid[data-count="1"] .work-tile { background: radial-gradient(ellipse at 50% 50%,#211c29,#0c0b10 75%); }
.publication-grid[data-count="1"] .work-tile img, .publication-grid[data-count="1"] .work-tile video { object-fit: contain; }
.publication-grid[data-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 440px; }
.explore-all { text-align: right; margin-top: 28px; }
.explore-all a,.work-pagination a,.public-watch>a { color: var(--purple-light); font-size:14px; padding-block:12px; display:inline-block; }
.explore-section { padding-top: 80px; min-height:65vh; }
.explore-section h1,.public-watch h1 { font-size:clamp(32px,4vw,56px); line-height:1.15; margin:0 0 16px; }
.server-filters a { position:relative; display:inline-flex; align-items:center; min-height:44px; padding:12px 2px; color:var(--muted); font-size:13px; }
.server-filters a.active { color:var(--purple-light); border-bottom:2px solid var(--purple); }
.work-pagination { display:flex; align-items:center; justify-content:center; gap:32px; margin-top:36px; font-size:13px; color:var(--muted); }
.public-watch { padding-top:50px; padding-bottom:70px; }
.public-watch>p { color:var(--muted); max-width:750px; overflow-wrap:anywhere; }
.public-watch video { display:block; width:100%; max-height:70svh; object-fit:contain; margin-top:30px; background:#060508; }
.work-caption h3 { overflow-wrap:anywhere; }
@media(max-width:1000px) { .publication-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:360px; } }
@media(max-width:600px) { .publication-grid,.publication-grid[data-count="2"] { grid-template-columns:minmax(0,1fr); grid-auto-rows:430px; } .publication-grid[data-count="1"] { grid-auto-rows:520px; } .publication-grid .work-tile:nth-child(n) { grid-column:span 1; grid-row:span 1; } .explore-section { padding-top:42px; } .explore-all { text-align:center; } .work-pagination { gap:22px; } }

/* Curated public Production story. The existing homepage composition stays frozen. */
.story-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:13px;font-weight:600;color:#e3cfff;position:relative;z-index:3;pointer-events:auto}
.story-link:hover{color:white;text-decoration:underline;text-underline-offset:4px}
.production-story{max-width:1320px}
.story-opening{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,8vw,124px);align-items:center;padding:54px 0 72px}
.story-back{display:inline-block;color:var(--muted);font-size:14px;padding:12px 0;margin-bottom:54px}
.story-intro .eyebrow{font-size:11px;letter-spacing:.12em}
.story-intro h1{font-size:clamp(38px,4.4vw,68px);letter-spacing:-.055em;line-height:1.04;margin:22px 0;overflow-wrap:anywhere}
.story-description{color:var(--muted);font-size:17px;line-height:1.75;max-width:530px;white-space:pre-line}
.story-inside{display:inline-flex;gap:35px;align-items:center;padding:18px 0;margin-top:38px;font-size:14px}
.story-film{width:100%;max-width:400px;justify-self:center}
.story-film video{width:100%;height:auto;max-height:740px;object-fit:contain;background:#08080b;border-radius:5px}
.story-film>p{font-size:11px;color:var(--muted);margin-top:12px;letter-spacing:.04em;text-align:center}
.story-opening[data-aspect="16:9"]{grid-template-columns:1fr;gap:36px}
.story-opening[data-aspect="16:9"] .story-intro{max-width:900px}
.story-opening[data-aspect="16:9"] .story-back{margin-bottom:24px}
.story-opening[data-aspect="16:9"] .story-description{max-width:700px}
.story-opening[data-aspect="16:9"] .story-inside{margin-top:8px}
.story-opening[data-aspect="16:9"] .story-film{max-width:none}
.story-opening[data-aspect="1:1"] .story-film{max-width:560px}
.story-navigation{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;border-block:1px solid var(--line);scroll-margin-top:100px}
.story-navigation>p{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.story-navigation nav{display:flex;gap:32px;flex-wrap:wrap}
.story-navigation a{font-size:14px;padding:10px 0;color:#dcd2e7}
.story-navigation a:hover,.story-back:hover,.story-inside:hover{color:var(--purple-light)}
.story-section{padding:100px 0;border-bottom:1px solid var(--line);scroll-margin-top:60px}
.story-section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}
.story-section-heading>p{font-size:14px;color:var(--muted)}
.story-idea{display:grid;grid-template-columns:1fr 2.5fr;gap:65px}
.story-idea h2{font-size:23px}
.story-idea>p{font-size:clamp(22px,2.3vw,33px);line-height:1.5;letter-spacing:-.035em;white-space:pre-line}
.story-world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.production-story figure{margin:0;min-width:0}
.story-image{background:#151319;border-radius:3px;overflow:hidden}
.story-image img{width:100%;height:100%;object-fit:cover}
.story-world-grid .story-image{aspect-ratio:4/5}
.story-world-grid .story-image img{object-fit:contain}
.story-world-grid figcaption{padding-top:22px}
.production-story figcaption h3{font-size:17px;line-height:1.35;letter-spacing:-.02em}
.production-story figcaption p{font-size:14px;line-height:1.7;color:var(--muted);margin-top:10px;overflow-wrap:anywhere;white-space:pre-line}
.story-shot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:55px 24px;list-style:none;margin:0;padding:0}
.story-shot-grid .story-image{aspect-ratio:9/16}
.story-shot-grid figcaption{display:flex;gap:15px;padding-top:22px}
.story-shot-number{font:500 14px/1.6 Sora, sans-serif;color:var(--purple-light);flex:none}
.story-sound{display:grid;grid-template-columns:1fr 2.5fr;gap:65px}
.story-sound-content{display:grid;gap:50px}
.story-sound h3{font-size:14px;color:var(--purple-light);font-weight:500}
.story-narration blockquote{margin:25px 0 0;font-size:clamp(21px,2.1vw,30px);line-height:1.6;letter-spacing:-.025em}
.story-narration blockquote p+p{margin-top:12px}
.story-sound-notes{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.story-sound-notes p{color:var(--muted);margin-top:14px;line-height:1.75;white-space:pre-line}
.story-cta{text-align:center;padding:110px 0 100px}
.story-cta h2{font-size:clamp(31px,4vw,54px);margin:18px 0}
.story-cta>p:not(.eyebrow){color:var(--muted)}
.story-cta .composer{text-align:left}
.story-return{display:inline-block;font-size:13px;color:var(--muted);padding:15px;margin-top:28px}
.story-preview-bar{background:#261d33;border-bottom:1px solid #8c62b455;padding:20px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
.story-preview-bar p{font-size:13px;color:#d1c4dd;margin-top:5px}
.story-preview-bar form{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.story-back-edit{background:none;font-size:14px;padding:14px 0}
@media(max-width:1100px){.story-opening{gap:55px}.story-film{max-width:345px}.story-idea,.story-sound{grid-template-columns:1fr 2.8fr;gap:35px}.story-section{padding-block:75px}}
@media(max-width:750px){.story-opening{grid-template-columns:1fr;gap:32px;padding:20px 0 45px}.story-back{margin-bottom:22px}.story-intro h1{font-size:40px;max-width:560px}.story-description{font-size:16px}.story-inside{margin-top:12px}.story-film{max-width:420px}.story-navigation{display:block;padding:18px 0}.story-navigation nav{gap:27px;margin-top:8px}.story-section{padding:55px 0}.story-idea,.story-sound{grid-template-columns:1fr;gap:27px}.story-idea>p{font-size:24px}.story-section-heading{display:block;margin-bottom:28px}.story-section-heading>p{margin-top:14px}.story-world-grid,.story-shot-grid{grid-template-columns:1fr;gap:36px}.story-world-grid .story-image{aspect-ratio:4/5}.story-shot-grid .story-image{aspect-ratio:9/16}.production-story figcaption h3{font-size:19px}.production-story figcaption p{font-size:15px}.story-sound-notes{grid-template-columns:1fr;gap:28px}.story-cta{padding:65px 0}.story-preview-bar{display:block}.story-preview-bar form{margin-top:18px}.story-opening[data-aspect="16:9"] .story-intro h1{font-size:36px}}

.story-player{position:relative}
.story-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:13px;white-space:nowrap;padding:14px 23px;background:#100e16d9;border:1px solid #e2d2f366;backdrop-filter:blur(10px);border-radius:40px;font-size:14px;box-shadow:0 8px 30px #0005}
.story-play .play-icon{width:38px;height:38px}
.story-play:hover{background:#281e3ae8;border-color:#d1adff}
.story-film-status:empty{display:none}
.story-player noscript .button{margin-top:12px}

.story-open-director { margin-top: 28px; }

.preview-media-status{padding:12px 18px;margin:0;color:#fff;background:#322637;font-size:14px;line-height:1.5}