/* =====================================================================
   FABULA — colour + mode layer (on top of fabula.css)
   The design is the one from _snapshots/before-terminal-look/. This file
   only sets the colours for DAY (default: pure white, 99% black) and
   NIGHT, and styles the status stripe, the growing system and the
   Pitch / Teaser blocks.
   ===================================================================== */

/* ---------------- DAY (default) ---------------- */
:root[data-mode][data-theme],:root[data-mode]{
  --paper:#FFFFFF;
  --ground:#FFFFFF;
  --card:#FFFFFF;
  --panel:#F5F5F5;
  --ink:#030303;
  --muted:#7A7A7A;
  --rule:#DDDDDD;
  --rule-strong:#C4C4C4;
  --rule-soft:rgba(3,3,3,.1);
  --chip:rgba(3,3,3,.05);
  --chip-hover:rgba(3,3,3,.09);
  --sel:#030303;
  --sel-ink:#FFFFFF;
  --sel-line:#FFFFFF;
  --outer:var(--outer-pick,#FFFFFF);
  --pc-ink-rgb:3,3,3;
  --pc-acc-rgb:165,31,255;
  color-scheme:light;
}
/* ---------------- NIGHT ---------------- */
:root[data-mode="night"][data-theme],:root[data-mode="night"]{
  --paper:#030303;
  --ground:#030303;
  --card:#030303;
  --panel:#111111;
  --ink:#FCFCFC;
  --muted:#8C8C8C;
  --rule:#262626;
  --rule-strong:#3A3A3A;
  --rule-soft:rgba(252,252,252,.1);
  --chip:rgba(252,252,252,.07);
  --chip-hover:rgba(252,252,252,.13);
  --sel:#FCFCFC;
  --sel-ink:#030303;
  --sel-line:#030303;
  --outer:#000000;
  --pc-ink-rgb:252,252,252;
  --pc-acc-rgb:177,61,255;
  color-scheme:dark;
}

html body{background:var(--outer)!important;color:var(--ink)}
body::before,body::after{display:none!important;content:none!important}
main{background:transparent!important}

/* selected: solid ink with a thin inner edge in the paper colour */
.st-big[aria-selected="true"],.tb-link[aria-current="page"]{
  background:var(--sel)!important;color:var(--sel-ink)!important;box-shadow:inset 0 0 0 3px var(--sel),inset 0 0 0 4.5px var(--sel-line)!important;
}
.tb-cta.tb-lime[aria-current="page"]{background:var(--sel)!important;color:#DFFD2C!important;box-shadow:inset 0 0 0 3px var(--sel),inset 0 0 0 4.5px var(--sel-line)!important}
:root[data-mode="night"] .tb-cta.tb-lime[aria-current="page"]{color:#030303!important;background:#DFFD2C!important}

/* the darks on lime (menu call, booking block) are 99% black too */
.tb-cta.tb-lime{color:#030303!important}


/* day / night switch in the menu */
.tb-switch{color:var(--ink)}
.tb-switch .sw-track{border-color:var(--ink)}
.tb-switch .sw-track i{background:var(--ink)}
.tb-switch[aria-pressed="true"] .sw-track i{transform:translateX(20px);background:var(--ink)}
.tb-switch:hover{background:var(--chip)}

/* ---------------- the stripe: a thin ruled row above every page ---------------- */
.sys-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;
  min-height:38px;margin:0 0 18px;padding:0 16px;
  border:1px solid var(--ink);background:var(--paper);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.sys-strip .sys-page{color:var(--ink)}
.sys-ok{display:inline-flex;align-items:center;gap:3px}
.sys-ok i{display:inline-block;width:5px;height:9px;background:var(--ink);margin-left:1px}
.sys-ok i:first-of-type{margin-left:10px}
.sys-ok i.off{background:var(--accent)}
@media (max-width:1080px){ .sys-strip{margin-top:10px} }
@media (max-width:759px){ .sys-strip span:nth-child(2),.sys-strip .sys-page{display:none} }
/* the page starts under the stripe: the studio switch sits one gap below it */
#view-home > .sys-strip + .block-open > .studio-tabs{margin-top:0}

/* ---------------- 02 — the growing system ---------------- */
.fx-brain{padding:var(--s3) var(--gut) 0}
.brain{
  position:relative;margin-top:var(--s3);aspect-ratio:16/8;min-height:320px;
  border:1px solid var(--rule-strong);background:var(--paper);overflow:hidden;
}
.brain canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.brain-hud{position:absolute;z-index:2;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.brain-tl{top:14px;left:16px;color:var(--ink)}
.bn-bar{position:relative;width:180px;height:16px;margin-top:8px;border:1px solid var(--ink)}
.bn-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform .3s linear}
.bn-bar span{position:relative;display:block;padding:2px 6px;font-size:9px;color:var(--ink)}
.brain-tr{top:14px;right:16px;display:grid;gap:4px;text-align:right}
.brain-tr div{display:flex;gap:14px;justify-content:flex-end}
.brain-tr b{color:var(--ink);font-weight:500;min-width:5ch}
.brain-bl{left:16px;bottom:14px;display:grid;gap:3px;text-transform:none;letter-spacing:.02em;max-width:60%}
.brain-bl div:first-child{color:var(--accent)}
.brain-bl div:not(:first-child){opacity:.55}
.brain-br{right:16px;bottom:14px}
@media (max-width:759px){ .brain{aspect-ratio:4/5} .brain-bl{display:none} }

/* ---------------- PITCH / TEASER blocks ---------------- */
.studio-set[hidden]{display:none!important}
.ps-art{position:relative;width:100%;max-width:1040px;margin:0 auto;aspect-ratio:480/230;container-type:inline-size}
.ps-art[data-pitch=formats]{aspect-ratio:480/236}
.pz-off .dr{transition:none!important}
.la text.acc-t{fill:var(--accent)}
.ps-art .la path,.ps-art .la circle{vector-effect:none;stroke-width:calc(.85px * var(--k,1))}
.ps-art .la .thin{stroke-width:calc(.6px * var(--k,1))}
.ps-art .la .thick{stroke-width:calc(1.6px * var(--k,1))}
.ps-art .la .frm{stroke-width:calc(.9px * var(--k,1))}
.ps-art .la .link{stroke-width:calc(.6px * var(--k,1))}
.ps-art .la .fill,.ps-art .la .acc-f,.ps-art .la .carry{stroke:none}
.ps-list{border-top:1px solid var(--ink)}
.ps-row{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--rule);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ps-row b{font:500 clamp(18px,1.8vw,26px)/1.05 var(--sans);letter-spacing:-.03em;text-transform:none;color:var(--ink)}
.ps-n{color:var(--accent)}
@media (max-width:759px){
  .ps-row{grid-template-columns:44px 1fr;gap:6px 12px}
  .ps-row span:nth-child(3),.ps-row span:nth-child(4){grid-column:2}
}

/* ---------------- selected states: no inner line ---------------- */
.tb-link[aria-current="page"]{box-shadow:none!important}
.tb-cta.tb-lime[aria-current="page"]{box-shadow:none!important}
/* the studio switch: the picked one in purple */
/* selected studio: white like the others, marked by four arrows in the corners (look.js adds them) */
.st-big[aria-selected="true"]{background:var(--paper)!important;color:var(--ink)!important;box-shadow:none!important}
.st-big[aria-selected="true"] kbd{color:var(--ink)!important}
.st-big:not([aria-selected="true"]):hover{background:var(--paper)!important}
.st-big .vf{position:absolute;inset:0;pointer-events:none}
.st-big .vf i{position:absolute;width:10px;height:10px;opacity:0;--d:0px;
  transform:translate(calc(var(--ix) * var(--d)), calc(var(--iy) * var(--d)))}
.st-big .vf i svg{display:block;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:square}
.st-big .vf .tl{left:7px;top:7px;--ix:1;--iy:1}
.st-big .vf .tr{right:7px;top:7px;--ix:-1;--iy:1}
.st-big .vf .br{right:7px;bottom:7px;--ix:-1;--iy:-1}
.st-big .vf .bl{left:7px;bottom:7px;--ix:1;--iy:-1}
.st-big .vf .tr svg{transform:rotate(90deg)}
.st-big .vf .br svg{transform:rotate(180deg)}
.st-big .vf .bl svg{transform:rotate(270deg)}
/* (arrows only on hover now) */
@keyframes vfGrow{
  from{opacity:0;transform:translate(calc(var(--ix) * var(--hw,120px)), calc(var(--iy) * var(--hh,26px))) scale(.4)}
  to{opacity:1;transform:translate(0,0) scale(1)}
}
/* hover on another: the arrows push out to the corners, then pulse until clicked */
.st-big:not([aria-selected="true"]):hover .vf i{opacity:1;animation:vfPush .45s cubic-bezier(.2,.8,.2,1) both, vfPulse .8s ease-in-out .45s infinite alternate}
@keyframes vfPush{
  from{opacity:0;transform:translate(calc(var(--ix) * 16px), calc(var(--iy) * 12px))}
  to{opacity:1;transform:translate(0,0)}
}
@keyframes vfPulse{
  from{transform:translate(0,0)}
  to{transform:translate(calc(var(--ix) * 5px), calc(var(--iy) * 5px))}
}
@media (prefers-reduced-motion: reduce){ .st-big .vf i{animation:none!important} }


/* budget drawing: labels large enough to read at a glance */
.lx-budget .la text.lab,.lx-budget svg text.lab{font-size:17px!important;letter-spacing:.06em}
.lx-budget .la text.hl,.lx-budget svg text.hl{font-size:17px!important}

/* ================= NEXT STEP block: lime, black type, purple details ================= */
.block:has(.bookblock){
  background:#DFFD2C!important;color:#030303!important;border-color:#030303!important;
  --ink:#030303; --paper:#DFFD2C; --muted:rgba(3,3,3,.6); --rule:rgba(3,3,3,.2); --rule-strong:rgba(3,3,3,.35);
}
.block:has(.bookblock) .sec-num,.block:has(.bookblock) .sec-count{color:rgba(3,3,3,.6)!important}
.block:has(.bookblock) .sec-title{color:#030303}
.bookblock{
  background:#DFFD2C!important;color:#030303!important;
  --ink:#030303; --paper:#DFFD2C; --muted:rgba(3,3,3,.6); --rule:rgba(3,3,3,.2); --rule-strong:rgba(3,3,3,.35);
  --accent:#A51FFF; --accent-hi:#B647FF;
}
.bb-head h2,.bb-head p,.bb-opt,.bookblock .bk-month,.bookblock .bk-day,.bookblock .bk-slot,.bookblock .bk-nav,.bookblock .ff label,
.bookblock .bk-note,.bookblock .bk-chosen,.bookblock .mf-to,.bookblock .mfnote,.bb-mail{color:#030303!important}
.bb-switch,.bb-opt + .bb-opt{border-color:#030303!important}
.bb-opt:hover{background:rgba(3,3,3,.06)!important}
.bb-opt[aria-selected="true"]{background:#A51FFF!important;color:#FFFFFF!important}
.bookblock .tlab,.bookblock .bk-chosen.set{color:#A51FFF!important}
.bookblock .bk-day:not(.off):not(.on){border-color:rgba(3,3,3,.35)!important}
.bookblock .bk-day.on,.bookblock .bk-slot.on{background:#A51FFF!important;border-color:#A51FFF!important;color:#FFFFFF!important}
.bookblock .bk-day:not(.off):not(.on):hover,.bookblock .bk-slot:hover{border-color:#A51FFF!important;color:#A51FFF!important;background:transparent!important}
.bookblock .bk-nav{border-color:rgba(3,3,3,.35)!important}
.bookblock .bk-nav:hover:not(:disabled){background:#A51FFF!important;border-color:#A51FFF!important;color:#FFFFFF!important}
.bookblock .ff input,.bookblock .ff textarea,.mailform .ff input,.mailform .ff textarea{background:rgba(255,255,255,.55)!important;border-color:rgba(3,3,3,.3)!important;color:#030303!important}
.bookblock .ff input::placeholder,.bookblock .ff textarea::placeholder{color:rgba(3,3,3,.45)!important}
.bookblock .mfbtn,.mailform .mfbtn{background:#A51FFF!important;color:#FFFFFF!important;border-color:#A51FFF!important}
.bb-mail a{color:#A51FFF!important;border-bottom-color:#A51FFF!important}

/* ================= the six category tiles: square, black when picked ================= */
.wk-tile{border-radius:0!important}
.wk-tile[aria-selected="true"]{outline-color:var(--ink)!important}

/* ================= the universe: always on black ================= */
.brain{background:#000!important;border-color:var(--ink)!important}
.brain-hud{color:rgba(245,245,240,.55)!important}
.brain-tl,.brain-tr b,.bn-bar span{color:#F5F5F0!important}
.bn-bar{border-color:rgba(245,245,240,.6)!important}
.bn-bar i{background:#DFFD2C!important}
.bn-bar span{mix-blend-mode:difference}
.brain-bl div:first-child{color:#DFFD2C!important}

/* Watch showreel: purple */
.btn-accent{background:#A51FFF!important;border-color:#A51FFF!important;color:#FFFFFF!important}
.btn-accent:hover{background:#B647FF!important;border-color:#B647FF!important}
.btn-accent .ba-play{border-left-color:#FFFFFF!important}
.st-big kbd{top:12px!important;left:14px!important}

/* ================= studio switch: three separate boxes =================
   picked: purple outline and name, black number
   hover:  purple outline and name, lime number */
.studio-tabs{border:0!important;background:transparent!important;gap:18px}
.st-big{border:1px solid var(--ink)!important;background:var(--paper)!important;transition:border-color .2s,color .2s}
.st-big + .st-big{border-left:1px solid var(--ink)!important}
.st-big .vf{display:none!important}
.st-big[aria-selected="true"]{border-color:#A51FFF!important;color:#A51FFF!important;background:var(--paper)!important}
.st-big[aria-selected="true"] kbd{color:#030303!important}
:root[data-mode="night"] .st-big[aria-selected="true"] kbd{color:#FCFCFC!important}
.st-big:not([aria-selected="true"]):hover{border-color:#A51FFF!important;color:#A51FFF!important}
.st-big:not([aria-selected="true"]):hover kbd{color:var(--ink)!important}
@media (max-width:759px){ .studio-tabs{gap:8px} }

/* stripe: a touch of purple on the live parts */
.sys-strip [data-role=sys-time],.sys-strip .sys-page b{color:var(--accent)}
.sys-strip .sys-page b{font-weight:inherit}
.sys-strip .sys-ok i.off{background:var(--accent)}

/* stripe: all text and numbers in full ink */
.sys-strip,.sys-strip span,.sys-strip [data-role=sys-time],.sys-strip .sys-page,.sys-strip .sys-page b{color:var(--ink)!important}
.sys-strip .sys-ok i,.sys-strip .sys-ok i.off{background:var(--ink)!important}

/* studio switch: names stay black; only the outline turns purple */
.st-big[aria-selected="true"],.st-big:not([aria-selected="true"]):hover{color:var(--ink)!important}

/* studio switch: always black; the picked one points down at the film */
.st-big[aria-selected="true"],.st-big:not([aria-selected="true"]):hover{border-color:var(--ink)!important}
.st-big{overflow:visible!important}
.st-big::after{
  content:"";position:absolute;left:50%;bottom:-10px;width:0;height:0;margin-left:-9px;
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid var(--ink);
  opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none;
}
.st-big:not([aria-selected="true"]):hover::after{opacity:.25;transform:translateY(-3px)}
.st-big[aria-selected="true"]::after{opacity:1;transform:translateY(0)}

/* the timer line inside the picked studio */
.st-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:#A51FFF;transform:scaleX(0);transform-origin:left;pointer-events:none}
.st-big:not([aria-selected="true"]) .st-prog{opacity:0}

/* the pointer: three small arrows, a little below the box */
.st-big::after{
  width:40px!important;height:7px!important;margin-left:-20px!important;bottom:-13px!important;
  border:0!important;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 7'%3E%3Cpath d='M0 0h10L5 7zM15 0h10l-5 7zM30 0h10l-5 7z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 7'%3E%3Cpath d='M0 0h10L5 7zM15 0h10l-5 7zM30 0h10l-5 7z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.st-big::after{bottom:-12px!important}
.block-open > .film-hero,.block-open > .studio-tabs + .film-hero{margin-top:26px!important}

/* ================= Pitch / Teaser hero: a wide screen and a vertical one ================= */
.film-hero{position:relative}
.film-hero.pitch-dual{display:grid;grid-template-columns:minmax(0,256fr) minmax(0,81fr);column-gap:18px;align-items:stretch}
.film-hero.pitch-dual > .fx-hero{grid-column:1}
.film-hero.pitch-dual > :not(.fx-hero):not(.hero-vert){grid-column:1 / -1}
.hero-vert{display:none;position:relative;overflow:hidden;background:#0A0A0A;box-shadow:0 0 0 1px var(--ink)}
.film-hero.pitch-dual > .hero-vert{display:block;grid-column:2;grid-row:1}
.hv-bg{position:absolute;inset:0;overflow:hidden}
.hv-bg iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
.hero-vert.live .hv-bg iframe{opacity:1}
.hv-tag,.hw-tag{position:absolute;z-index:3;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;opacity:.8;pointer-events:none}
.hv-tag{left:14px;bottom:12px}
.hw-tag{display:none;right:16px;top:14px}
.film-hero.pitch-dual .hw-tag{display:block}
@media (max-width:759px){
  .film-hero.pitch-dual{display:block}
  .film-hero.pitch-dual > .hero-vert,.film-hero.pitch-dual .hw-tag{display:none}
}

/* the pointer: twelve small arrows spread evenly under the whole button */
.st-big::after{
  left:0!important;right:0!important;width:auto!important;margin-left:0!important;height:7px!important;bottom:-13px!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M5 0h10l-5 7z'/%3E%3C/svg%3E") left center / calc(100% / 12) 100% repeat-x!important;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M5 0h10l-5 7z'/%3E%3C/svg%3E") left center / calc(100% / 12) 100% repeat-x!important;
  transform-origin:center top;
}
.st-big[aria-selected="true"]::after{opacity:1!important;transform:none!important;animation:none!important}
/* hover: the arrows push down and fade, fresh ones grow in, over and over */
.st-big:not([aria-selected="true"]):hover::after{opacity:1;animation:stArrows 1.1s ease-in-out infinite}
@keyframes stArrows{
  0%  {opacity:0;transform:translateY(-2px) scaleY(.25)}
  35% {opacity:.85;transform:translateY(0) scaleY(1)}
  70% {opacity:.85;transform:translateY(3px) scaleY(1)}
  100%{opacity:0;transform:translateY(8px) scaleY(1)}
}
@media (prefers-reduced-motion: reduce){ .st-big:not([aria-selected="true"]):hover::after{animation:none;opacity:.5} }
.st-big::after{height:4px!important;bottom:-10px!important}
.st-big::after{height:5px!important;bottom:-11px!important;-webkit-mask-size:calc(100% / 20) 100%!important;mask-size:calc(100% / 20) 100%!important}
.st-big::after{height:8px!important;bottom:-14px!important;-webkit-mask-size:calc(100% / 9) 100%!important;mask-size:calc(100% / 9) 100%!important}
.st-big::after{bottom:-17px!important}

/* the pointer: three arrows, one under each corner and one in the middle */
.st-big::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z'/%3E%3C/svg%3E") left top / 11px 8px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z'/%3E%3C/svg%3E") center top / 11px 8px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z'/%3E%3C/svg%3E") right top / 11px 8px no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z'/%3E%3C/svg%3E") left top / 11px 8px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z'/%3E%3C/svg%3E") center top / 11px 8px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z'/%3E%3C/svg%3E") right top / 11px 8px no-repeat!important}

/* the pointer: one arrow in the middle */
.st-big::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z'/%3E%3C/svg%3E") center top / 11px 8px no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M0 0h11L5.5 8z'/%3E%3C/svg%3E") center top / 11px 8px no-repeat!important}
/* the picked one's number in purple */
.st-big[aria-selected="true"] kbd{color:#A51FFF!important}

/* Pitch / Teaser hero: the banner keeps the same size as the others; the wide
   screen takes whatever width is left beside the 9:16 one */
@media (min-width:760px){
  .film-hero.pitch-dual{aspect-ratio:16/9;grid-template-columns:minmax(0,1fr) 31.64%}
  .film-hero.pitch-dual > .fx-hero{aspect-ratio:auto!important;height:100%;min-height:0}
}
@media (min-width:760px){ .film-hero.pitch-dual{grid-template-columns:minmax(0,1fr) 24%} }

/* Pitch / Teaser: true 16:9 beside true 9:16; words and buttons keep the size
   they have on the full-width banner (sized off the whole row, not the left screen) */
@media (min-width:760px){
  .film-hero.pitch-dual{aspect-ratio:auto;grid-template-columns:minmax(0,256fr) minmax(0,81fr)}
  .film-hero.pitch-dual > .fx-hero{aspect-ratio:16/9!important;height:auto}
}
.film-hero{container-type:inline-size}
.film-hero.pitch-dual > .fx-hero{container-type:normal}

.hv-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
.hero-vert.live .hv-canvas{opacity:1}

/* ================= NO SIDE MENU: the top bar carries the logo and a menu button ================= */
.topbar{display:none!important}
@media (min-width:1081px){ body{padding-left:var(--edge)!important;padding-right:var(--edge)!important} }
.sys-strip{
  position:sticky;top:0;z-index:60;display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:52px;padding:0 0 0 18px!important;gap:12px;background:var(--paper)!important;
}
.sys-brand{display:flex;align-items:center;gap:10px;justify-self:start;color:var(--ink)!important;text-decoration:none}
.sys-brand .glyph{display:block;width:22px;height:17px;flex:none;background:var(--ink);-webkit-mask:var(--bat) center/contain no-repeat;mask:var(--bat) center/contain no-repeat}
.sys-brand b{font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.sys-mid{display:flex;gap:18px;justify-self:center}
.sys-mid .sys-page{color:var(--ink)}
.sys-menu{
  justify-self:end;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:56px;border:0;border-left:1px solid var(--ink);background:transparent;cursor:pointer;padding:0;
}
.sys-menu i{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.sys-strip.open .sys-menu i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.sys-strip.open .sys-menu i:nth-child(2){opacity:0}
.sys-strip.open .sys-menu i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.sys-menu:hover{background:var(--chip)}
.sys-panel{
  position:absolute;top:calc(100% + 1px);right:-1px;width:300px;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--ink);z-index:61;
  animation:spIn .22s cubic-bezier(.2,.8,.2,1) both;
}
.sys-panel[hidden]{display:none}
@keyframes spIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sp-link,.sp-mode{
  display:flex;align-items:center;gap:14px;min-height:48px;padding:0 18px;border:0;border-top:1px solid var(--ink);
  background:transparent;color:var(--ink)!important;text-decoration:none;cursor:pointer;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:left;
}
.sp-link:first-child{border-top:0}
.sp-link kbd{font:400 10px/1 var(--mono);color:var(--muted)}
.sp-link:hover,.sp-mode:hover{background:var(--chip)}
.sp-link[aria-current="page"]{background:var(--ink);color:var(--paper)!important}
.sp-link[aria-current="page"] kbd{color:#A51FFF}
.sp-book{background:#DFFD2C;color:#030303!important}
.sp-book:hover{background:#EDFF6B}
.sp-mode{justify-content:space-between}
.sp-mode .sw-track{position:relative;width:40px;height:20px;border:1px solid var(--ink)}
.sp-mode .sw-track i{position:absolute;top:3px;left:3px;width:12px;height:12px;background:var(--ink);transition:transform .3s ease}
.sp-mode[aria-pressed="true"] .sw-track i{transform:translateX(20px)}
@media (max-width:759px){
  .sys-mid{display:none}
  .sys-strip{grid-template-columns:1fr auto}
  .sys-panel{width:min(300px, calc(100vw - 2 * var(--gut)))}
}

/* ================= WIDE AND VERTICAL block: 16:9 beside 9:16, same height ================= */
.dual{display:grid;grid-template-columns:minmax(0,256fr) minmax(0,81fr);gap:18px;align-items:stretch}
.dual-wide{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0A0A0A;container-type:inline-size;box-shadow:0 0 0 1px var(--ink)}
.dual-vert{position:relative;overflow:hidden;background:#0A0A0A;box-shadow:0 0 0 1px var(--ink)}
.dual-bg{position:absolute;inset:0;overflow:hidden}
.dual-media{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
.dual-wide video.dual-media{width:100%;height:100%;object-fit:cover}
.dual-vert canvas.dual-media{width:100%;height:100%}
.dual.live .dual-media{opacity:1}
.dual-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 100%);pointer-events:none}
.dual-tag{position:absolute;z-index:3;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;opacity:.8;pointer-events:none}
.dual-tag-w{right:16px;top:14px}
.dual-tag-v{left:14px;bottom:12px}
.dual-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:5.5cqw 6cqw;color:#F4F4F0}
.dual-h{margin:0;max-width:16ch;font:500 clamp(26px,5.6cqw,76px)/.95 var(--sans);letter-spacing:-.05em;color:#F4F4F0}
.dual-p{margin:2cqw 0 0;max-width:46ch;font-size:clamp(13px,1.6cqw,19px);line-height:1.4;color:rgba(244,244,240,.85)}
.dual-in .hero-ctas{margin-top:3cqw}
.dual-in .btn-accent{margin-top:0}
@media (max-width:759px){
  .dual{grid-template-columns:1fr}
  .dual-vert{display:none}
  .dual-wide{aspect-ratio:auto;min-height:70svh}
}

/* top bar, right: day/night, book a call, menu */
.sys-right{justify-self:end;align-self:stretch;display:flex;align-items:stretch}
.sys-right > *{border-left:1px solid var(--ink)!important}
.sys-mode{display:flex;align-items:center;gap:10px;padding:0 16px;border:0;background:transparent;color:var(--ink);cursor:pointer;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.sys-mode .sw-track{position:relative;width:40px;height:20px;border:1px solid var(--ink)}
.sys-mode .sw-track i{position:absolute;top:3px;left:3px;width:12px;height:12px;background:var(--ink);transition:transform .3s ease}
.sys-mode[aria-pressed="true"] .sw-track i{transform:translateX(20px)}
.sys-mode:hover{background:var(--chip)}
.sys-book{display:flex;align-items:center;padding:0 20px;background:#DFFD2C;color:#030303!important;text-decoration:none;white-space:nowrap;
  font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.sys-book:hover{background:#EDFF6B}
.sys-right .sys-menu{border-left:1px solid var(--ink)}
/* the name and mark 20% bigger */
.sys-brand .glyph{width:26px;height:20px}
.sys-brand b{font-size:14.4px}
@media (max-width:900px){ .sys-mode span[data-role=modelab]{display:none} }
@media (max-width:759px){ .sys-book{padding:0 12px;font-size:10px} .sys-mode{padding:0 10px} }
@media (max-width:520px){ .sys-brand b{display:none} }

/* studio switch: the picked one solid black with white text */
.st-big[aria-selected="true"]{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}

/* studio switch: no arrows; hover and picked are both solid black with white text */
.st-big::after{display:none!important;content:none!important}
.st-big:not([aria-selected="true"]):hover{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.st-big:hover kbd{color:#A51FFF!important}

/* top bar: a bigger Book a video call */
.sys-strip{min-height:60px!important}
.sys-book{padding:0 32px!important;font-size:14px!important;letter-spacing:.12em!important}
@media (max-width:759px){ .sys-book{padding:0 14px!important;font-size:11px!important} }

/* ================= THE FILM BEHIND THE SITE (vbg.js) ================= */
html body{background:#0A0A0A!important}
.vbg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:#0A0A0A}
.vbg-canvas,.vbg-frame{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);filter:blur(28px) saturate(1.44) contrast(1.35)}
.vbg-frame{opacity:0;transition:opacity .6s ease}
.vbg-canvas{opacity:1;transition:opacity .6s ease}
.vbg:not(.is-local) .vbg-frame{opacity:1}
.vbg:not(.is-local) .vbg-canvas{opacity:0}
.vbg-frame iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.vbg-veil{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.vbg-grain{position:absolute;inset:0;opacity:.09;background-size:128px 128px;image-rendering:pixelated}
@media (prefers-reduced-motion: reduce){ .vbg-grain{animation:none} }
/* the little credit line and picker in the page margins read on the dark film */
.foot-picker .mono{color:inherit}
.film > .fx-hero,.film-hero > .fx-hero{box-shadow:0 0 0 1px #000000!important}
.st-big[aria-selected="true"]{border-color:#FFFFFF!important;box-shadow:none!important}

/* the picked studio fills with purple from the left over its 30 seconds, like liquid */
.st-big{isolation:isolate}
.st-big .st-prog{
  top:0!important;bottom:0!important;left:0!important;right:auto!important;height:auto!important;
  width:calc(var(--fill,0) * 100%);transform:none!important;z-index:-1;background:#A51FFF!important;opacity:1!important;
}
.st-big:not([aria-selected="true"]) .st-prog{opacity:0!important}
/* the wavy front edge, rippling as it moves */
.st-big .st-prog::after{
  content:"";position:absolute;top:0;bottom:0;right:-11px;width:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H4C10 5 10 15 4 20S-2 35 4 40H0Z' fill='%23A51FFF'/%3E%3C/svg%3E") 0 0/12px 40px repeat-y;
  animation:stWave 1.4s linear infinite;
}
@keyframes stWave{to{background-position:0 40px}}
@media (prefers-reduced-motion: reduce){ .st-big .st-prog::after{animation:none} }
.st-big[aria-selected="true"] kbd{color:#FFFFFF!important}

/* the poured fill replaces the straight one */
.st-big .st-prog{display:none!important}
.st-liquid{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.st-big:not([aria-selected="true"]) .st-liquid{opacity:0}



/* ================= BLOCKS: more room to breathe ================= */
.block,.pw-blocks > .pwsec{padding-top:clamp(56px,6vw,96px)!important;padding-bottom:clamp(72px,8vw,128px)!important}
.block-open{padding:0!important}
.block,.pw-blocks > .pwsec{margin-bottom:26px!important}
.block .fx-split{margin-bottom:clamp(48px,5vw,88px)!important;gap:clamp(32px,5vw,96px)!important}
.block .sec-head{margin-bottom:clamp(36px,4vw,64px)!important}
.block .tri{gap:clamp(32px,4vw,64px)!important}
.block .fx-steps,.block .fx-brain,.block .fx-found,.block .fx-directed,.block .fx-dlv,.block .bay{padding-left:clamp(28px,4vw,72px)!important;padding-right:clamp(28px,4vw,72px)!important}
.block .sec-head{margin-left:clamp(28px,4vw,72px)!important;margin-right:clamp(28px,4vw,72px)!important}
.block .lede,.block .fx-p{line-height:1.7!important}
.block .lede + .lede,.block .claim + .lede{margin-top:clamp(18px,2vw,28px)!important}
/* several Vimeo reels in the hero: only the picked one shows */
.hero-bg iframe.hero-reel{opacity:0!important;transition:opacity .5s ease}
.hero-bg.live iframe.hero-reel.on{opacity:1!important}
.hero-bg.use-local iframe.hero-reel.on{opacity:0!important}
.hero-bg.alt-reel{background-image:none!important;background-color:#0A0A0A!important}

/* ================= WIDE AND VERTICAL: the two frames with dimension lines ================= */
.dual.dual-v2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.27fr);gap:clamp(56px,6vw,110px);align-items:end}
.dual-v2 figure{margin:0;display:flex;flex-direction:column;gap:16px}
.dv2-cap{display:flex;justify-content:space-between;gap:12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-bottom:10px;border-bottom:1px solid var(--rule)}
.dv2-cap span:first-child{color:var(--ink)}
.dv2-foot{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:34px}
.dv2-art{position:relative;margin-right:46px}
.dual-v2 .dual-wide{aspect-ratio:16/9;box-shadow:none!important;border:1px solid var(--ink);container-type:normal;overflow:hidden!important}
.dual-v2 .dual-vert{display:block;aspect-ratio:9/16;box-shadow:none!important;border:1px solid var(--ink);overflow:hidden!important}
.dual-v2 .dual-veil,.dual-v2 .dual-tag,.dual-v2 .dual-in{display:none!important}
/* the 1080 area drawn inside the 4K frame: a dashed box at half size */
.dv2-safe{position:absolute;left:25%;top:25%;width:50%;height:50%;border:1px dashed rgba(255,255,255,.75);z-index:2;pointer-events:none}
.dv2-safe b{position:absolute;left:8px;top:6px;font-size:9.5px;letter-spacing:.14em;color:#FFFFFF;font-weight:400}
/* dimension lines: a line with end ticks and the measurement in the middle */
.dv2-dim{position:absolute;display:flex;align-items:center;gap:10px;color:var(--ink);font-size:10px;letter-spacing:.14em;white-space:nowrap}
.dv2-dim i{flex:1;position:relative;background:var(--ink)}
.dv2-dim b{font-weight:500}
.dv2-dim-x{left:0;right:0;top:calc(100% + 14px);height:12px}
.dv2-dim-x i{height:1px}
.dv2-dim-x i:first-child::before,.dv2-dim-x i:last-child::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--ink)}
.dv2-dim-x i:first-child::before{left:0}
.dv2-dim-x i:last-child::after{right:0}
.dv2-dim-y{top:0;bottom:0;left:calc(100% + 16px);width:12px;flex-direction:column}
.dv2-dim-y i{width:1px}
.dv2-dim-y i:first-child::before,.dv2-dim-y i:last-child::after{content:"";position:absolute;left:-5px;width:11px;height:1px;background:var(--ink)}
.dv2-dim-y i:first-child::before{top:0}
.dv2-dim-y i:last-child::after{bottom:0}
.dv2-dim-y b{writing-mode:vertical-rl;transform:rotate(180deg)}
@media (max-width:759px){
  .dual.dual-v2{grid-template-columns:1fr .45fr;gap:40px}
  .dv2-art{margin-right:30px}
}

/* a 20% dark veil over the Drama / Sci-fi / Documentary film */
.fx-hero .hero-veil{background:rgba(0,0,0,.2)!important}

/* the two frames at the same height, side by side */
.dual.dual-v2{grid-template-columns:minmax(0,256fr) minmax(0,81fr)!important;gap:clamp(64px,6vw,110px)!important;align-items:start!important;padding-bottom:40px}
.dv2-art{margin-right:0!important}
.dual-v2 .dual-wide,.dual-v2 .dual-vert{width:100%}
.dv2-dim-y{left:calc(100% + 14px)!important}
.dv2-cap span:last-child{text-align:right}
@media (max-width:759px){ .dual.dual-v2{grid-template-columns:minmax(0,256fr) minmax(0,81fr)!important;gap:36px!important} .dv2-dim b{font-size:8.5px} }

/* ================= PHONE (≤759px): edge to edge, symmetrical, categories first ================= */
@media (max-width:759px){
  /* the page fills the screen; no film showing round the sides */
  html body{background:var(--paper)!important;padding:0!important}
  .vbg{display:none!important}
  main[id^="view-"]{margin:0!important}
  .block{margin-bottom:0!important;border:0!important;border-top:1px solid var(--ink)!important;box-shadow:none!important;border-radius:0!important}
  .block-open{border-top:0!important}

  /* top bar: square logo | Book a video call | square menu */
  .sys-strip{margin:0!important;padding:0!important;grid-template-columns:58px 1fr 58px!important;gap:0!important;
    min-height:58px;border:0!important;border-bottom:1px solid var(--ink)!important;box-shadow:none!important}
  .sys-strip .sys-right{display:contents!important}
  .sys-strip .sys-mode{display:none!important}
  .sys-brand{justify-self:stretch!important;align-self:stretch;justify-content:center;border-right:1px solid var(--ink)}
  .sys-brand b{display:none}
  .sys-brand .glyph{width:26px;height:20px}
  .sys-book{justify-self:stretch!important;align-self:stretch;display:flex!important;align-items:center;justify-content:center;
    padding:0 10px!important;font-size:12px!important;letter-spacing:.16em!important;border:0!important;margin:0!important}
  .sys-menu{width:58px!important;border-left:1px solid var(--ink)!important}
  .sys-panel{left:0!important;right:0!important;width:auto!important;border-left:0!important;border-right:0!important}

  /* the three studios: one row of equal cells, number over name, sitting right on the film */
  .block-open > .studio-tabs{margin:0!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;border:0!important}
  .st-big{height:76px!important;padding:0 6px!important;display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;gap:7px!important;border:0!important;border-bottom:1px solid var(--ink)!important;
    font:500 13px/1.1 var(--sans)!important;letter-spacing:-.01em!important;text-align:center!important;overflow:hidden!important;min-width:0}
  .st-big + .st-big{border-left:1px solid var(--ink)!important}
  .st-big kbd{display:block!important;position:static!important;margin:0!important;font:500 10px/1 var(--mono)!important;letter-spacing:.14em!important;align-self:center!important}
  .st-big::after{display:none!important}
  .st-big[aria-selected="true"]{border-color:var(--ink)!important;box-shadow:none!important}

  /* the film: full width, 16:9, with the words under it rather than on it */
  .block-open > .film-hero,.block-open > .studio-tabs + .film-hero{margin:0!important}
  .film-hero > .fx-hero{margin:0!important;border-radius:0!important;aspect-ratio:auto!important;min-height:0!important;height:auto!important;
    display:block!important;box-shadow:none!important}
  .fx-hero .hero-bg{position:relative!important;inset:auto!important;width:100%;aspect-ratio:16/9;height:auto!important}
  .fx-hero .hero-veil{bottom:auto!important;height:calc(100vw * 9 / 16)!important}
  .fx-hero .hero-grain{display:none!important}
  .fx-hero .hero-in{position:relative!important;padding:30px 22px 34px!important;background:#0A0A0A}
  .fx-hero .hero-bottom{padding:0!important}
  .fx-hero .fx-h1{font-size:34px!important;line-height:1.02!important}
  .fx-hero .fx-lead{font-size:15.5px!important;line-height:1.45!important;margin-top:14px!important}
  .fx-hero .hero-ctas{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:24px!important}
  .fx-hero .hero-ctas > *{width:100%!important;margin:0!important;justify-content:center!important;height:52px!important;box-sizing:border-box}

  .sys-panel .sp-mode .sw-track{display:block!important}
  /* one clear action under the words; booking lives in the top bar */
  .fx-hero .hero-ctas > .btn-ghost{display:none!important}
  /* a little more room inside the blocks */
  .block{padding-top:48px!important;padding-bottom:56px!important}
  .block-open{padding:0!important}
}
@media (max-width:759px){
  /* Wide and vertical on a phone: 16:9 on top, 9:16 under it, centred */
  .dual.dual-v2{grid-template-columns:1fr!important;gap:44px!important;padding-bottom:28px}
  .dual-v2 .dual-wide{aspect-ratio:16/9!important;min-height:0!important;width:100%!important}
  .dual-v2 .dv2-screen .dv2-art{width:calc(100% - 30px)}
  .dual-v2 .dv2-screen .dv2-cap{margin-right:30px}
  .dual-v2 .dv2-phone{width:52%;justify-self:center}
  .dual-v2 .dual-vert{width:100%!important}
  .dv2-cap{font-size:10px!important}
  .dv2-dim b{font-size:9px!important}
}

/* ================= NARROWER PAGE: blocks 20% less wide, centred (desktop and tablet) ================= */
@media (min-width:760px){
  main[id^="view-"]{width:80%!important;max-width:80%!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
}

/* ================= MORE ROOM IN EVERY BLOCK ================= */
@media (min-width:760px){
  .block,.pw-blocks > .pwsec{padding-top:clamp(84px,8vw,140px)!important;padding-bottom:clamp(104px,10vw,176px)!important}
  .block-open{padding:0!important}
  .block,.pw-blocks > .pwsec{margin-bottom:40px!important}
  .block .fx-steps,.block .fx-brain,.block .fx-found,.block .fx-directed,.block .fx-dlv,.block .bay{padding-left:clamp(44px,6vw,112px)!important;padding-right:clamp(44px,6vw,112px)!important}
  .block .sec-head{margin-left:clamp(44px,6vw,112px)!important;margin-right:clamp(44px,6vw,112px)!important;margin-bottom:clamp(52px,5.5vw,92px)!important}
  .block .fx-split{margin-bottom:clamp(68px,7vw,124px)!important;gap:clamp(44px,6vw,120px)!important}
  .block .tri{gap:clamp(44px,5vw,88px)!important}
}
@media (max-width:759px){
  .block{padding-top:64px!important;padding-bottom:76px!important}
  .block-open{padding:0!important}
  .block .fx-split{margin-bottom:56px!important}
  .block .sec-head{margin-bottom:44px!important}
}

/* ================= MANIFESTO: a quote sitting on the film, between blocks ================= */
.fq{margin:0 0 40px;padding:clamp(72px,9vw,150px) clamp(20px,6vw,112px);text-align:center;color:#FFFFFF}
.mf-quote{margin:0 auto;max-width:22ch;font:500 clamp(28px,3.6vw,58px)/1.02 var(--sans);letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.mf-cap{margin-top:clamp(22px,2.4vw,36px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.mf-cap::before,.mf-cap::after{content:'';display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin:0 12px}
@media (max-width:759px){
  .fq{margin:0;border-top:1px solid var(--ink);color:var(--ink);padding:72px 24px}
  .mf-quote{font-size:28px}
}

/* ================= TOP BAR: slimmer ================= */
@media (min-width:760px){
  .sys-strip{min-height:44px!important;padding-left:16px!important}
  .sys-brand{gap:9px!important}
  .sys-brand .glyph{width:18px!important;height:14px!important}
  .sys-brand b{font-size:11px!important}
  .sys-strip [data-role=sys-time],.sys-strip .sys-page{font-size:11px!important}
  .sys-book{padding:0 24px!important;font-size:12px!important}
  .sys-mode{padding:0 13px!important;font-size:11px!important}
  .sys-mode .sw-track{width:34px!important;height:17px!important}
  .sys-mode .sw-track i{top:2.5px!important;left:2.5px!important;width:10px!important;height:10px!important}
  .sys-mode[aria-pressed="true"] .sw-track i{transform:translateX(17px)!important}
  .sys-menu{width:46px!important;gap:4px!important}
  .sys-menu i{width:17px!important}
  .sys-strip.open .sys-menu i:nth-child(1){transform:translateY(5.5px) rotate(45deg)!important}
  .sys-strip.open .sys-menu i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)!important}
}
.mf-quote{max-width:none!important}
@media (max-width:759px){ .mf-quote br{display:none} }
@media (min-width:760px){ .mf-quote{font-size:clamp(24px,2.9vw,46px)!important;line-height:1.05!important} }

/* ================= FULL-WIDTH FILM ON TOP (desktop and tablet) =================
   Studio opens on the film, edge to edge; the top bar floats over it; the
   three studio buttons sit under it. */
@media (min-width:760px){
  #view-home{margin-top:0!important}
  /* the top bar spans the screen, its contents lined up with the blocks */
  main[id^="view-"] > .sys-strip{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:0!important;margin-top:0!important;
    padding-left:10vw!important;padding-right:10vw!important;box-sizing:border-box!important}
  main:not(#view-home) > .sys-strip{margin-bottom:40px!important}
  #view-home > .sys-strip{margin-bottom:-44px!important}

  /* film first, buttons after */
  .block-open{display:flex!important;flex-direction:column!important}
  .block-open > .film-hero{order:1;width:100vw!important;margin:0 0 0 calc(50% - 50vw)!important}
  .block-open > .studio-tabs{order:2;margin:28px 0 0!important}
  .block-open > .film-hero > .fx-hero{aspect-ratio:auto!important;height:min(56.25vw,100svh)!important;min-height:520px;
    border-radius:0!important;box-shadow:none!important;border:0!important}
  /* a soft shade at the top so the bar reads over any film */
  .block-open .fx-hero .hero-veil{background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 22%),rgba(0,0,0,.2)!important}
  .block-open .fx-hero .hero-in{padding:0 10vw clamp(48px,6vw,110px)!important}
  /* bigger words on the film */
  .block-open .fx-hero .fx-h1{font-size:clamp(44px,7.4cqw,132px)!important}
  .block-open .fx-hero .fx-lead{font-size:clamp(17px,1.75cqw,28px)!important;max-width:40ch}
  .block-open .fx-hero .hero-ctas{margin-top:clamp(24px,2.6cqw,44px)!important}
  .block-open .fx-hero .hero-ctas > *{height:56px!important;padding:0 28px!important;font-size:13px!important}
}
.mf-quote{text-transform:none!important;letter-spacing:-.035em!important}
@media (min-width:760px){
  :root{--side:10vw}
  main[id^="view-"]{margin-top:0!important}
  main[id^="view-"] > .sys-strip{padding-left:var(--side)!important;padding-right:var(--side)!important}
  .block-open .fx-hero .hero-in{padding-left:var(--side)!important;padding-right:var(--side)!important}
}

/* ================= CINEMA TOP (desktop and tablet) =================
   Full-screen film. Top: Menu on the left, the bat centred, booking on the
   right. The three studios stacked large in the bottom-left corner. */
@media (min-width:760px){
  /* ---- top bar ---- */
  main[id^="view-"] > .sys-strip{grid-template-columns:1fr auto 1fr!important;min-height:84px!important;gap:0!important;
    border:0!important;box-shadow:none!important}
  #view-home > .sys-strip{margin-bottom:-84px!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  #view-home > .sys-strip.scrolled{background:rgba(10,10,10,.35)!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important}
  .sys-strip .sys-right{display:contents!important}
  .sys-strip .sys-mid,.sys-strip .sys-mode{display:none!important}
  .sys-strip .sys-menu{grid-column:1;grid-row:1;justify-self:start!important;align-self:center!important;position:relative;
    width:auto!important;height:40px;padding:0 0 0 0!important;border:0!important;background:transparent!important;
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:7px!important}
  .sys-strip .sys-menu i{width:34px!important;height:1px!important}
  .sys-strip .sys-menu i:nth-child(2){display:none!important}
  .sys-strip .sys-menu::after{content:"Menu";position:absolute;left:52px;top:50%;transform:translateY(-50%);
    font:500 13px/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:#FFFFFF;white-space:nowrap}
  .sys-strip.open .sys-menu i:nth-child(1){transform:translateY(4px) rotate(30deg)!important}
  .sys-strip.open .sys-menu i:nth-child(3){transform:translateY(-4px) rotate(-30deg)!important}
  .sys-strip .sys-menu:hover{background:transparent!important;opacity:.75}
  .sys-strip .sys-brand{grid-column:2;grid-row:1;justify-self:center!important;border:0!important}
  .sys-strip .sys-brand b{display:none!important}
  .sys-strip .sys-brand .glyph{width:46px!important;height:36px!important;background:#FFFFFF!important}
  .sys-strip .sys-book{grid-column:3;grid-row:1;justify-self:end!important;align-self:center!important;height:40px;padding:0 20px!important;font-size:12px!important;border:0!important}
  .sys-strip .sys-panel{left:var(--side)!important;right:auto!important;top:calc(100% - 8px)!important}

  /* ---- the film fills the screen ---- */
  .block-open{position:relative!important}
  .block-open > .film-hero > .fx-hero{height:100svh!important;min-height:560px}
  .block-open .fx-hero .hero-veil{background:linear-gradient(180deg,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 18%),
    linear-gradient(0deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 45%),rgba(0,0,0,.12)!important}

  /* ---- studios, stacked in the bottom-left corner ---- */
  .block-open > .studio-tabs{position:absolute!important;left:var(--side);bottom:clamp(40px,5vw,84px);z-index:5;order:0;
    margin:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;
    border:0!important;background:transparent!important;width:auto!important}
  .block-open > .studio-tabs .st-big{height:auto!important;min-height:0!important;padding:0 0 6px!important;margin:0!important;
    border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
    display:inline-flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:flex-start!important;gap:14px!important;
    font:500 clamp(38px,4.4vw,80px)/1.02 var(--sans)!important;letter-spacing:-.045em!important;text-transform:none!important;text-align:left!important;
    color:rgba(255,255,255,.42)!important;transition:color .25s ease!important}
  .block-open > .studio-tabs .st-big + .st-big{border:0!important}
  .block-open > .studio-tabs .st-big kbd{order:2;position:static!important;margin:.35em 0 0!important;align-self:flex-start!important;
    font:400 12px/1 var(--mono)!important;letter-spacing:.06em!important;color:inherit!important}
  .block-open > .studio-tabs .st-big[aria-selected="true"],
  .block-open > .studio-tabs .st-big:not([aria-selected="true"]):hover{color:#FFFFFF!important;background:transparent!important;border:0!important}
  .block-open > .studio-tabs .st-big::after,.block-open > .studio-tabs .st-big .vf,.block-open > .studio-tabs .st-liquid{display:none!important}
  /* the 30 seconds run as a thin purple line under the picked one */
  .block-open > .studio-tabs .st-big .st-prog{display:block!important;top:auto!important;bottom:0!important;left:0!important;height:3px!important;
    width:calc(var(--fill,0) * 100%)!important;z-index:1}
  .block-open > .studio-tabs .st-big .st-prog::after{display:none!important}

  /* ---- the studio's words, small, bottom right ---- */
  .block-open .fx-hero .hero-in{justify-content:flex-end!important;padding-bottom:clamp(40px,5vw,84px)!important}
  .block-open .fx-hero .hero-bottom{margin-left:auto!important;max-width:min(30vw,440px)!important;text-align:left}
  .block-open .fx-hero .fx-h1{font-size:clamp(20px,1.9vw,32px)!important;line-height:1.1!important;letter-spacing:-.03em!important}
  .block-open .fx-hero .fx-lead{font-size:clamp(14px,1.05vw,17px)!important;line-height:1.5!important;margin-top:14px!important;color:rgba(255,255,255,.78)!important}
  .block-open .fx-hero .hero-ctas{margin-top:22px!important}
  .block-open .fx-hero .hero-ctas > .btn-ghost{display:none!important}
  .block-open .fx-hero .hero-ctas > *{height:44px!important;padding:0 20px!important;font-size:12px!important}
}
@media (min-width:760px){
  .block-open > .studio-tabs + .film-hero,.block-open > .film-hero{margin-top:0!important}
  .block-open > .studio-tabs{left:0!important}
}

/* ================= FILM WORDS: bigger; booking lives here, not in the bar ================= */
@media (min-width:760px){
  .sys-strip .sys-book{display:none!important}
  .block-open .fx-hero .hero-bottom{max-width:min(38vw,600px)!important}
  .block-open .fx-hero .fx-h1{font-size:clamp(28px,2.9vw,50px)!important;line-height:1.02!important;letter-spacing:-.04em!important}
  .block-open .fx-hero .fx-lead{font-size:clamp(15px,1.25vw,20px)!important;line-height:1.45!important;margin-top:18px!important;max-width:34ch}
  .block-open .fx-hero .hero-ctas{display:flex!important;flex-wrap:wrap;gap:12px!important;margin-top:28px!important}
  .block-open .fx-hero .hero-ctas > *{height:52px!important;padding:0 24px!important;font-size:12.5px!important;margin:0!important;box-sizing:border-box}
  .block-open .fx-hero .hero-ctas > .btn-ghost{display:inline-flex!important;align-items:center;background:transparent!important;
    border:1.5px solid #DFFD2C!important;color:#DFFD2C!important;box-shadow:none!important}
  .block-open .fx-hero .hero-ctas > .btn-ghost:hover{background:#DFFD2C!important;color:#030303!important}
}

/* ================= STUDIOS WITH THEIR OWN SHOWREEL BUTTON (desktop and tablet) ================= */
.st-play{display:none}
@media (min-width:760px){
  .block-open .fx-hero .hero-bottom{display:none!important}
  .block-open > .studio-tabs{display:grid!important;grid-template-columns:auto auto!important;column-gap:clamp(22px,2.4vw,40px)!important;
    row-gap:0!important;align-items:center!important;justify-items:start!important}
  .st-play{display:inline-flex;align-items:center;gap:12px;padding:0;border:0;background:transparent;cursor:pointer;
    color:#FFFFFF;opacity:.4;transition:opacity .25s ease;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    margin-top:-6px}
  .st-play i{position:relative;display:block;width:clamp(38px,3.2vw,54px);height:clamp(38px,3.2vw,54px);border:1px solid currentColor;border-radius:50%;
    transition:background .25s ease,border-color .25s ease}
  .st-play i::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
    border-left:10px solid currentColor;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;transition:border-left-color .25s ease}
  .st-play span{opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease;white-space:nowrap}
  .st-big[aria-selected="true"] + .st-play,.st-big:hover + .st-play,.st-play:hover,.st-play:focus-visible{opacity:1}
  .st-big[aria-selected="true"] + .st-play span,.st-play:hover span,.st-play:focus-visible span{opacity:1;transform:none}
  .st-play:hover i{background:#A51FFF;border-color:#A51FFF}
  .st-play:hover i::after{border-left-color:#FFFFFF}
}

/* ================= FILM WORDS BACK, WITH A REEL LINK (desktop and tablet) ================= */
@media (min-width:760px){
  .st-play{display:none!important}
  .block-open > .studio-tabs{display:flex!important;flex-direction:column!important}
  .block-open .fx-hero .hero-bottom{display:block!important;margin-left:auto!important;max-width:min(42vw,680px)!important}
  .block-open .fx-hero .fx-h1{font-size:clamp(34px,3.7vw,66px)!important;line-height:1!important;letter-spacing:-.045em!important}
  .block-open .fx-hero .fx-lead{font-size:clamp(15px,1.3vw,21px)!important;margin-top:20px!important;max-width:36ch}
  .block-open .fx-hero .hero-ctas{margin-top:30px!important}
  .block-open .fx-hero .hero-ctas > .btn-ghost{display:none!important}
  /* not a button: a line of type with a play mark, underlined */
  .block-open .fx-hero .hero-ctas > .btn-accent{height:auto!important;padding:0 0 10px!important;background:transparent!important;box-shadow:none!important;
    border:0!important;border-bottom:1px solid rgba(255,255,255,.5)!important;border-radius:0!important;gap:14px!important;
    font:500 13px/1 var(--mono)!important;letter-spacing:.16em!important;text-transform:uppercase;color:#FFFFFF!important;transform:none!important;
    transition:border-color .25s ease,gap .25s ease!important}
  .block-open .fx-hero .hero-ctas > .btn-accent .ba-play{border-left:11px solid #A51FFF;border-top:7px solid transparent;border-bottom:7px solid transparent}
  .block-open .fx-hero .hero-ctas > .btn-accent:hover{border-bottom-color:#A51FFF!important;gap:20px!important}
}
@media (min-width:760px){
  .block-open > .studio-tabs{align-items:flex-start!important}
  .block-open .fx-hero .hero-ctas > .btn-accent .ba-play{border-left:11px solid #A51FFF!important;border-top:7px solid transparent!important;border-bottom:7px solid transparent!important;width:0!important;height:0!important;background:none!important}
}

/* ================= TOP BAR: bat top left, menu top right (desktop and tablet) ================= */
@media (min-width:760px){
  .sys-strip .sys-brand{grid-column:1!important;justify-self:start!important}
  .sys-strip .sys-brand .glyph{width:60px!important;height:47px!important}
  .sys-strip .sys-menu{grid-column:3!important;justify-self:end!important;height:40px!important;width:auto!important;
    flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:10px!important;
    padding:0 18px 0 16px!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:999px!important;
    transition:background .2s ease,border-color .2s ease!important}
  .sys-strip .sys-menu i{display:none!important}
  .sys-strip .sys-menu::before{content:"";width:7px;height:7px;border-radius:50%;background:#A51FFF;flex:none;transition:transform .25s ease}
  .sys-strip .sys-menu::after{content:"Menu"!important;position:static!important;transform:none!important;
    font:500 12px/1 var(--mono)!important;letter-spacing:.16em!important;text-transform:uppercase;color:#FFFFFF}
  .sys-strip.open .sys-menu::after{content:"Close"!important}
  .sys-strip.open .sys-menu::before{transform:scale(1.4)}
  .sys-strip .sys-menu:hover,.sys-strip.open .sys-menu{background:#FFFFFF!important;border-color:#FFFFFF!important;opacity:1!important}
  .sys-strip .sys-menu:hover::after,.sys-strip.open .sys-menu::after{color:#030303!important}
  .sys-strip .sys-panel{left:auto!important;right:var(--side)!important;top:calc(100% - 12px)!important}
}

/* ================= REEL LINK: same line of type, bigger, right under the headline ================= */
@media (min-width:760px){
  .block-open .fx-hero .hero-bottom{display:flex!important;flex-direction:column!important;align-items:flex-start!important}
  .block-open .fx-hero .hero-bottom .fx-h1{order:1}
  .block-open .fx-hero .hero-bottom .hero-ctas{order:2;margin-top:clamp(24px,2.2vw,34px)!important;margin-bottom:clamp(24px,2.2vw,34px)!important}
  .block-open .fx-hero .hero-bottom .fx-lead{order:3;margin-top:0!important}
  .block-open .fx-hero .hero-ctas > .btn-accent{font-size:clamp(15px,1.3vw,20px)!important;letter-spacing:.14em!important;gap:18px!important;padding-bottom:14px!important}
  .block-open .fx-hero .hero-ctas > .btn-accent .ba-play{border-left-width:16px!important;border-top-width:10px!important;border-bottom-width:10px!important}
  .block-open .fx-hero .hero-ctas > .btn-accent:hover{gap:24px!important}
}
@media (min-width:760px){
  .block-open .fx-hero .hero-ctas > .btn-accent{border:1px solid rgba(255,255,255,.7)!important;padding:18px 26px!important;height:auto!important;
    transition:border-color .25s ease,background .25s ease,gap .25s ease!important}
  .block-open .fx-hero .hero-ctas > .btn-accent:hover{border-color:#FFFFFF!important;background:rgba(255,255,255,.08)!important;border-bottom-color:#FFFFFF!important}
}

/* ================= studios further left and bigger; top bar lower ================= */
@media (min-width:760px){
  .block-open > .studio-tabs{left:calc(clamp(28px,3.4vw,64px) - var(--side))!important}
  .block-open > .studio-tabs .st-big{font-size:clamp(50px,6.2vw,118px)!important;letter-spacing:-.05em!important;padding-bottom:8px!important}
  .block-open > .studio-tabs .st-big kbd{font-size:13px!important;margin-top:.45em!important}
  main[id^="view-"] > .sys-strip{padding-top:26px!important;min-height:110px!important}
  #view-home > .sys-strip{margin-bottom:-110px!important}
  .sys-strip .sys-panel{top:calc(100% - 22px)!important}
}
@media (min-width:760px){
  .block-open > .studio-tabs .st-big{font-size:clamp(46px,5.5vw,104px)!important}
  .block-open .fx-hero .hero-bottom{max-width:min(46vw,740px)!important}
  .block-open .fx-hero .fx-h1{font-size:clamp(38px,4.1vw,74px)!important}
  .block-open .fx-hero .fx-lead{font-size:clamp(16px,1.42vw,23px)!important}
  .block-open .fx-hero .hero-ctas > .btn-accent{font-size:clamp(16px,1.45vw,22px)!important;padding:20px 30px!important}
  .block-open .fx-hero .hero-ctas > .btn-accent .ba-play{border-left-width:18px!important;border-top-width:11px!important;border-bottom-width:11px!important}
}

/* ================= edges: everything on the film hugs the screen sides ================= */
@media (min-width:760px){
  :root{--inset:clamp(28px,3.4vw,64px)}
  main[id^="view-"] > .sys-strip{padding-left:var(--inset)!important;padding-right:var(--inset)!important}
  .sys-strip .sys-panel{right:var(--inset)!important}
  .block-open > .studio-tabs{left:calc(var(--inset) - var(--side))!important}
  .block-open .fx-hero .hero-in{padding-left:var(--inset)!important;padding-right:var(--inset)!important}
  .block-open .fx-hero .hero-bottom{max-width:min(48vw,860px)!important;width:min(48vw,860px)}
  .block-open .fx-hero .fx-lead{max-width:none!important}
}
@media (min-width:760px){ .block-open .fx-hero .fx-h1{max-width:none!important} }
@media (min-width:760px){
  .block-open .fx-hero .hero-bottom{max-width:min(54vw,1000px)!important;width:min(54vw,1000px)}
  .block-open .fx-hero .fx-h1{font-size:clamp(42px,4.8vw,90px)!important}
  .block-open .fx-hero .fx-lead{font-size:clamp(17px,1.7vw,28px)!important;line-height:1.4!important}
}
@media (min-width:760px){
  .block-open .fx-hero .hero-bottom .fx-lead{max-width:var(--h1w,36ch)!important}
}
@media (min-width:760px){ .block-open > .studio-tabs .st-big{font-size:clamp(40px,4.6vw,88px)!important} }
@media (min-width:760px){
  /* the right-hand block is exactly as wide as its headline, and sits the same distance from the right edge as the studios sit from the left */
  .block-open .fx-hero .hero-bottom{width:auto!important}
  .block-open .fx-hero .hero-bottom.fitted{width:var(--h1w)!important;max-width:none!important}
}
@media (min-width:760px){ .block-open .fx-hero .hero-in{padding-right:calc(var(--inset) + clamp(24px,3vw,60px))!important} }
@media (min-width:760px){
  .block-open > .studio-tabs .st-big{font-size:clamp(46px,5.4vw,102px)!important}
  .block-open .fx-hero .fx-h1{font-size:clamp(36px,4vw,76px)!important}
  .block-open .fx-hero .fx-lead{font-size:clamp(15px,1.45vw,24px)!important}
  .block-open .fx-hero .hero-ctas > .btn-accent{font-size:clamp(14px,1.2vw,18px)!important;padding:16px 24px!important}
  .block-open .fx-hero .hero-ctas > .btn-accent .ba-play{border-left-width:15px!important;border-top-width:9px!important;border-bottom-width:9px!important}
}
@media (min-width:760px){
  /* the words sit in the middle-right of the film, not against the edge */
  .block-open .fx-hero .hero-in{padding-right:var(--inset)!important}
  .block-open .fx-hero .hero-bottom{margin-left:calc(46vw - var(--inset))!important;margin-right:auto!important;
    width:min(36vw,720px)!important;max-width:min(36vw,720px)!important}
  .block-open .fx-hero .hero-bottom.fitted{width:var(--h1w)!important;max-width:min(36vw,720px)!important}
}
@media (min-width:760px){ .block-open .fx-hero .hero-ctas > .btn-accent{white-space:nowrap!important} .block-open .fx-hero .hero-ctas{flex-wrap:nowrap!important} }

/* ================= BOOK VIDEO CALL beside the reel button: yellow outline, yellow text ================= */
@media (min-width:760px){
  .block-open .fx-hero .hero-ctas{gap:12px!important}
  .block-open .fx-hero .hero-ctas > .btn-ghost{display:inline-flex!important;align-items:center!important;white-space:nowrap!important;
    height:auto!important;padding:16px 24px!important;margin:0!important;background:transparent!important;border:1px solid #DFFD2C!important;border-radius:0!important;
    color:#DFFD2C!important;font:500 clamp(14px,1.2vw,18px)/1 var(--mono)!important;letter-spacing:.14em!important;text-transform:uppercase!important;
    box-shadow:none!important;transition:background .25s ease,color .25s ease!important}
  .block-open .fx-hero .hero-ctas > .btn-ghost:hover{background:#DFFD2C!important;color:#030303!important}
}

/* ================= film buttons: reel outlined purple, booking filled yellow ================= */
@media (min-width:760px){
  .block-open .fx-hero .hero-ctas > .btn-accent{border:1px solid #A51FFF!important;color:#B85CFF!important;background:transparent!important}
  .block-open .fx-hero .hero-ctas > .btn-accent:hover{background:#A51FFF!important;color:#FFFFFF!important;border-color:#A51FFF!important}
  .block-open .fx-hero .hero-ctas > .btn-accent:hover .ba-play{border-left-color:#FFFFFF!important}
  .block-open .fx-hero .hero-ctas > .btn-ghost{background:#DFFD2C!important;color:#030303!important;border-color:#DFFD2C!important}
  .block-open .fx-hero .hero-ctas > .btn-ghost:hover{background:transparent!important;color:#DFFD2C!important}
}
@media (min-width:760px){ .block-open .fx-hero .hero-ctas > .btn-accent{border-color:#B650FF!important;color:#CB8BFF!important;background:rgba(10,10,10,.25)!important} }

/* ================= BOOKING TICKER under the film: yellow band, black words running right to left ================= */
.book-ticker{order:2;display:block;position:relative;overflow:hidden;background:#DFFD2C;color:#030303!important;text-decoration:none;
  height:clamp(48px,4vw,64px);z-index:4}
.bt-track{display:flex;width:max-content;height:100%;animation:btRun 28s linear infinite}
.bt-row{display:flex;align-items:center;flex:none;height:100%}
.bt-row span{font:500 clamp(14px,1.15vw,19px)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;padding:0 clamp(18px,1.6vw,30px)}
.bt-row i{font-style:normal;font-size:clamp(12px,.9vw,16px)}
@keyframes btRun{to{transform:translateX(-50%)}}
.book-ticker:hover .bt-track{animation-play-state:paused}
.book-ticker:hover{background:#EDFF6B}
@media (prefers-reduced-motion: reduce){ .bt-track{animation-duration:90s} }
@media (min-width:760px){ .block-open > .book-ticker{width:100vw;margin-left:calc(50% - 50vw)} }

/* ================= calendar: free days stand out ================= */
.bookblock .bk-day.free{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;
  background:#FFFFFF!important;border:1.5px solid #030303!important;color:#030303!important}
.bookblock .bk-day.free b{font-weight:600;font-size:15px;line-height:1}
.bookblock .bk-day.free small{font:600 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#A51FFF}
.bookblock .bk-day.free:not(.on):hover{background:#030303!important;color:#FFFFFF!important;border-color:#030303!important}
.bookblock .bk-day.free:not(.on):hover small{color:#DFFD2C}
.bookblock .bk-day.free.on{background:#A51FFF!important;border-color:#A51FFF!important;color:#FFFFFF!important}
.bookblock .bk-day.free.on small{color:#FFFFFF}
.bookblock .bk-day.off{opacity:.35!important;text-decoration:line-through;text-decoration-thickness:1px}
.book-ticker{height:clamp(58px,5vw,80px)!important}
.bt-row span{font-size:clamp(15px,1.3vw,22px)!important}
.bt-track{animation-duration:55s!important}

/* ================= FULL-WIDTH PAGE (desktop and tablet) =================
   Every block runs edge to edge; words keep a steady margin (--inset) from
   the screen sides; headlines get the room to be big. */
@media (min-width:760px){
  html body{padding-left:0!important;padding-right:0!important}
  main[id^="view-"]{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
  .block,.pw-blocks > .pwsec{margin-left:0!important;margin-right:0!important}
  .block .fx-steps,.block .fx-brain,.block .fx-found,.block .fx-directed,.block .fx-dlv,.block .bay{padding-left:var(--inset)!important;padding-right:var(--inset)!important}
  .block .sec-head{margin-left:var(--inset)!important;margin-right:var(--inset)!important}
  .block > :not(.sec-head):not(.bookblock):not(.fx-steps):not(.fx-brain):not(.fx-found):not(.fx-directed):not(.fx-dlv):not(.bay):not(.studio-tabs):not(.film-hero):not(.book-ticker){padding-left:var(--inset);padding-right:var(--inset);box-sizing:border-box}

  /* big, confident headlines across the width */
  .block .fx-split{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)!important;align-items:end!important}
  .block .fx-h2{font-size:clamp(46px,6.2vw,128px)!important;line-height:.92!important;letter-spacing:-.05em!important}
  .block .fx-split .fx-p{font-size:clamp(16px,1.25vw,21px)!important;max-width:44ch!important}
  .block .sec-head{padding-bottom:14px!important}

  /* booking: yellow from edge to edge */
  .block:has(> .bookblock){padding-bottom:0!important}
  .block > .bookblock{margin:0!important;border-radius:0!important;padding-left:var(--inset)!important;padding-right:var(--inset)!important;
    padding-top:clamp(56px,6vw,110px)!important;padding-bottom:clamp(56px,6vw,110px)!important}
  .bookblock .bb-head h2{font-size:clamp(56px,8vw,168px)!important;line-height:.9!important}

  /* top bar stays put at the top instead of following the page */
  main[id^="view-"] > .sys-strip{position:relative!important;top:auto!important}
  #view-home > .sys-strip.scrolled{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (min-width:760px){
  .block .wk-stage{margin-left:auto!important;margin-right:auto!important}
  .block > .bookblock .bb-head{padding:clamp(24px,3vw,56px) 0 clamp(32px,3vw,56px)!important}
}
@media (min-width:760px){ .block > .bookblock{padding-top:0!important} }
/* ticker: slimmer, clean sans capitals */
.book-ticker{height:clamp(38px,3vw,48px)!important}
.bt-row span{font:500 clamp(12px,.95vw,15px)/1 var(--sans)!important;letter-spacing:.12em!important;text-transform:uppercase!important;padding:0 clamp(16px,1.4vw,26px)!important}
.bt-row i{font-size:clamp(9px,.7vw,12px)!important}

/* ================= the universe block: black, narrower than the page ================= */
.block .brain{background:transparent!important;border:0!important;box-shadow:none!important}


/* budget (and other .claim) headlines match the block headlines */
@media (min-width:760px){
  .block .bay > .claim,.block-budget .claim{font-family:var(--sans)!important;font-weight:500!important;font-size:clamp(46px,6.2vw,128px)!important;
    line-height:.92!important;letter-spacing:-.05em!important;max-width:none!important}
  .block .bay > .lede{font-size:clamp(16px,1.25vw,21px)!important;max-width:44ch!important}
}

/* ================= Crowd & scale: words left, player right, side by side ================= */
@media (min-width:900px){
  .block .fx-work{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)!important;column-gap:clamp(40px,5vw,110px)!important;align-items:center!important}
  .block .fx-work > .wk-head{grid-column:1;grid-row:1;display:block!important;margin:0!important;padding:0!important}
  .block .fx-work > .wk-head .wk-title{font-size:clamp(46px,5.4vw,110px)!important;line-height:.92!important;letter-spacing:-.05em!important;margin:0 0 clamp(20px,2vw,32px)!important}
  .block .fx-work > .wk-head .wk-info{max-width:44ch!important;margin:0!important}
  .block .fx-work > .wk-head .wk-h{font-size:clamp(17px,1.4vw,24px)!important}
  .block .fx-work > .wk-head .wk-p{font-size:clamp(15px,1.1vw,18px)!important}
  .block .fx-work > .wk-stage{grid-column:2;grid-row:1;width:100%!important;max-width:none!important;margin:0!important}
}

/* ================= 35 mm grain on the opening film (24 fps) ================= */
.film35{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:256px 256px;
  mix-blend-mode:screen;opacity:.1275}
.fx-hero .hero-grain{display:none!important}
.fx-hero .hero-in{position:relative;z-index:1}
@media (max-width:759px){ .fx-hero .film35{bottom:auto;height:calc(100vw * 9 / 16)} }

/* ================= booking page: yellow bar, black bat, a Back button ================= */
#view-book > .sys-strip{background:#DFFD2C!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;margin-bottom:0!important}
#view-book > .sys-strip .sys-brand .glyph{background:#030303!important}
#view-book > .sys-strip .sys-menu{border-color:rgba(3,3,3,.6)!important}
#view-book > .sys-strip .sys-menu::after{color:#030303!important}
#view-book > .sys-strip .sys-menu:hover,#view-book > .sys-strip.open .sys-menu{background:#030303!important;border-color:#030303!important}
#view-book > .sys-strip .sys-menu:hover::after,#view-book > .sys-strip.open .sys-menu::after{color:#FFFFFF!important}
#view-book > .sys-strip .sys-mid{display:none!important}
.sys-back{grid-column:2;grid-row:1;justify-self:center;align-self:center;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;
  border:1px solid rgba(3,3,3,.6);border-radius:999px;background:transparent;color:#030303!important;cursor:pointer;
  font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:background .2s,color .2s}
.sys-back span{font-size:15px;letter-spacing:0;transition:transform .2s}
.sys-back:hover{background:#030303;color:#FFFFFF!important}
.sys-back:hover span{transform:translateX(-3px)}
@media (min-width:760px){ html body main#view-book > .sys-strip .sys-back{grid-column:1!important;grid-row:1!important;justify-self:start!important;margin-left:96px!important;position:static!important} }
@media (max-width:759px){
  #view-book > .sys-strip{grid-template-columns:58px 1fr auto 58px!important}
  #view-book > .sys-strip .sys-back{grid-column:3;height:34px;padding:0 12px;margin-right:10px;font-size:10px}
  #view-book > .sys-strip .sys-brand,#view-book > .sys-strip .sys-menu{border-color:rgba(3,3,3,.35)!important}
  #view-book > .sys-strip .sys-menu i{background:#030303!important}
  #view-book > .sys-strip .sys-book{display:none!important}
}
html body main#view-book > .sys-strip{margin-bottom:0!important}
html body main#view-book > .sys-strip + .block{padding-top:clamp(24px,3vw,48px)!important}
html body main#view-book > .sys-strip .sys-back{border-radius:999px!important;border:1px solid rgba(3,3,3,.6)!important;background:transparent!important;color:#030303!important}
html body main#view-book > .sys-strip .sys-back *{color:#030303!important}
html body main#view-book > .sys-strip .sys-back:hover{background:#030303!important;color:#FFFFFF!important}
html body main#view-book > .sys-strip .sys-back:hover *{color:#FFFFFF!important}
@media (max-width:759px){
  html body main#view-book > .sys-strip{grid-template-columns:58px 1fr 58px!important}
  html body main#view-book > .sys-strip .sys-back{grid-column:2!important;grid-row:1!important;justify-self:center!important;margin:0!important;position:static!important}
  html body main#view-book > .sys-strip .sys-menu{grid-column:3!important;grid-row:1!important}
}

/* the same grain on every film player on the site */
.wk-main,.dual-wide,.dual-vert,.hero-vert{position:relative}
.wk-main > .film35,.dual-wide > .film35,.dual-vert > .film35,.hero-vert > .film35{z-index:2}
.wk-main > .wk-hud,.wk-main > .wk-hold{z-index:3}

/* Vimeo reels in the category player (Animals) */
.wk-main .wk-vimeo{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .6s ease;z-index:1}
.wk-main .wk-vimeo.on{opacity:1}
.wk-tile .wk-tile-vimeo{position:absolute;left:50%;top:50%;width:178%;height:100%;min-width:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}

/* ================= reel button: filled yellow, black words; outline yellow on hover ================= */
@media (min-width:760px){
  html body .block-open .fx-hero .hero-ctas > .btn-accent{background:#DFFD2C!important;border:1px solid #DFFD2C!important;color:#030303!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent .ba-play{border-left-color:#030303!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent:hover{background:transparent!important;border-color:#DFFD2C!important;color:#DFFD2C!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent:hover .ba-play{border-left-color:#DFFD2C!important}
}
/* a headline with its own line breaks keeps exactly those lines */
.block-open .fx-hero .fx-h1:has(br){white-space:nowrap!important}
/* reel button on all three: filled yellow, black words, thin black outline */
@media (min-width:760px){
  html body .block-open .fx-hero .hero-ctas > .btn-accent{border:1px solid #030303!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent:hover{border-color:#DFFD2C!important}
}

/* ================= logo band under the yellow banner: white, black logos ================= */
.logo-band{order:3;position:relative;z-index:4;background:#FFFFFF;padding:clamp(22px,2.4vw,40px) var(--inset,24px)}
@media (min-width:760px){ .block-open > .logo-band{width:100vw;margin-left:calc(50% - 50vw);box-sizing:border-box} }
.logo-band ul{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,72px);flex-wrap:wrap;max-width:1500px}
.logo-band li{display:flex;align-items:center;justify-content:center}
.logo-band img{display:block;width:auto;filter:brightness(0);opacity:.92}
/* sized by eye so they read equally heavy */
@media (max-width:759px){ .logo-band ul{justify-content:center;gap:22px 30px} }

/* reel button: solid purple, black words */
@media (min-width:760px){
  html body .block-open .fx-hero .hero-ctas > .btn-accent{background:#A51FFF!important;border:1px solid #A51FFF!important;color:#030303!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent .ba-play{border-left-color:#030303!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent:hover{background:transparent!important;border-color:#A51FFF!important;color:#CB8BFF!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent:hover .ba-play{border-left-color:#CB8BFF!important}
}
@media (max-width:759px){ .fx-hero .hero-ctas > .btn-accent{background:#A51FFF!important;color:#030303!important} .fx-hero .hero-ctas > .btn-accent .ba-play{border-left-color:#030303!important} }
/* reel button: purple outline by default, fills purple on hover */
@media (min-width:760px){
  html body .block-open .fx-hero .hero-ctas > .btn-accent{background:transparent!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #A51FFF!important;color:#CB8BFF!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent .ba-play{border-left-color:#B650FF!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent:hover{background:#A51FFF!important;border-color:#A51FFF!important;color:#030303!important}
  html body .block-open .fx-hero .hero-ctas > .btn-accent:hover .ba-play{border-left-color:#030303!important}
}
/* the band holds eleven logos: tighter, one row on desktop */
.logo-band ul{max-width:none!important;gap:clamp(18px,2.2vw,44px)!important;flex-wrap:nowrap!important}
@media (max-width:759px){ .logo-band ul{flex-wrap:wrap!important;gap:20px 26px!important} }
.logo-band .lb-lead{margin:0 0 clamp(16px,1.6vw,26px);text-align:center;font:500 clamp(10px,.75vw,12px)/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(3,3,3,.55)}
.logo-band ul{gap:clamp(14px,1.8vw,36px)!important}

/* 16:9 + 9:16 segment: a bit narrower than full width, centred */
@media (min-width:760px){ .dual.dual-v2{width:84%;max-width:1560px;margin-left:auto!important;margin-right:auto!important} }
/* Wide & vertical: big headline on top, frames on the left, paragraph beside them on the right */
@media (min-width:1000px){
  .block .fx-steps:has(> .dual-v2){display:grid!important;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);column-gap:clamp(48px,5vw,110px);row-gap:clamp(48px,5vw,88px);align-items:center}
  .block .fx-steps:has(> .dual-v2) > .fx-split{display:contents!important}
  .block .fx-steps:has(> .dual-v2) .fx-h2{grid-column:1 / -1;grid-row:1}
  .block .fx-steps:has(> .dual-v2) > .dual-v2{grid-column:1;grid-row:2;width:100%!important;max-width:none!important;margin:0!important}
  .block .fx-steps:has(> .dual-v2) .fx-p{grid-column:2;grid-row:2;font-size:clamp(17px,1.4vw,24px)!important;max-width:34ch!important;margin:0!important;padding:0!important;justify-self:start!important;align-self:center!important}
}

/* logo band: optically balanced sizes (equal visual weight, not equal height) */
.logo-band li.h-umg img{height:clamp(30px,2.2vw,43px)!important}
.logo-band li.h-sony img{height:clamp(11px,0.82vw,16px)!important}
.logo-band li.h-sonyc img{height:clamp(33px,2.45vw,48px)!important}
.logo-band li.h-cannes img{height:clamp(33px,2.46vw,48px)!important}
.logo-band li.h-gff img{height:clamp(35px,2.60vw,51px)!important}
.logo-band li.h-mubi img{height:clamp(21px,1.55vw,30px)!important}
.logo-band li.h-fnypr img{height:clamp(23px,1.72vw,33px)!important}
.logo-band li.h-milk img{height:clamp(22px,1.64vw,32px)!important}
.logo-band li.h-abb img{height:clamp(29px,2.13vw,41px)!important}
.logo-band li.h-abbfig img{height:clamp(36px,2.70vw,53px)!important}
.logo-band li.h-w img{height:clamp(32px,2.4vw,47px)!important}
.logo-band li.h-nivy img{height:clamp(21px,1.59vw,31px)!important}
.logo-band li.h-nivymark img{height:clamp(36px,2.70vw,53px)!important}
/* Finished shot: trench scene, drawn live, specks of earth hang and fall once it is done */
[data-anim=final] .la{transition:opacity .6s ease}
[data-anim=final] .la.fsout{opacity:0}
[data-anim=final] .fs-speck{fill:var(--accent);opacity:0}
[data-anim=final] .la.live .fs-speck{animation:fsSpeck 2.6s ease-in var(--sd,0s) infinite}
@keyframes fsSpeck{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion: reduce){ [data-anim=final] .la.live .fs-speck{animation:none;opacity:.7} }
[data-anim=final] .fs-man path{stroke-width:1.1}
[data-anim=final] .fs-man .thin{stroke-width:.8}
/* script page: one row per line, tight leading, half-height gaps */
[data-anim=script] .sp-page{white-space:pre;line-height:1.25}
[data-anim=script] .sp-page .sl.gap{height:.55em;overflow:hidden}
.la .dr.rl{stroke-dasharray:calc(var(--len) * 1px) calc(var(--len) * 1px);stroke-dashoffset:calc(var(--len) * 1px)}
.la .dr.rl.in{stroke-dashoffset:0}
/* bat logo top left: bigger */
@media (min-width:760px){ html body .sys-strip .sys-brand .glyph{width:84px!important;height:66px!important} }
@media (max-width:759px){ html body .sys-strip .sys-brand .glyph{width:58px!important;height:45px!important} }
/* Finished shot: the looping Vimeo clip in the same 16:9 frame the drawing used, with the slate line work around it */
.tri-video .tv-box{position:absolute;left:5%;top:7.27%;width:90%;height:73.64%;overflow:hidden;background:#000}
.tri-video .tv-box iframe{position:absolute;left:0;width:100%;top:50%;height:auto;aspect-ratio:4/3;transform:translateY(-50%);border:0;pointer-events:none}
.tri-video .tv-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tri-video .tv-lines path{fill:none;stroke:var(--ink)}
.tri-video .tv-lines .crop{stroke:var(--muted)}
/* all video players: 7% more contrast, 5% brighter (zero specificity, so blurred backgrounds keep their own filters) */
:where(iframe[src*="vimeo"], iframe[src*="youtube"], video){filter:brightness(1.05) contrast(1.07)}
/* ================= 02 — the signature block under each genre (genre.js) ================= */
.gn .gn-art{position:relative;width:100%;aspect-ratio:800/380;max-height:78vh;margin-top:clamp(8px,1vw,16px)}
.gn .gn-svg text.gn-lab{font-size:13px;fill:var(--ink)}
.gn .gn-svg text.gn-sub{font-size:9.5px;fill:var(--muted)}
.gn .gn-svg text.big{font-size:11px}
.gn .gn-svg .gn-dot,.gn .gn-svg .gn-lead,.gn .gn-svg .gn-lab,.gn .gn-svg .gn-sub{transition:opacity .5s ease}
.gn .gn-svg .gn-lead{stroke:var(--accent)}
.gn .gn-svg g.gn-in{animation:gnIn .9s ease both}
@keyframes gnIn{from{opacity:0}to{opacity:1}}
.gn .gn-svg .gn-row{fill:transparent;transition:fill .3s ease,stroke .3s ease}
.gn .gn-svg .gn-row.on{fill:var(--accent);stroke:var(--accent)}
.gn .gn-svg text.gn-rowt{fill:var(--muted);pointer-events:none}
.gn .gn-svg text.gn-rowt.on{fill:#FFFFFF}
.gn .gn-svg .gn-grain circle{fill:var(--ink);stroke:none;opacity:.35}
.gn .gn-svg .gn-arch{opacity:.8}
.gn .gn-svg .gn-mark{opacity:0;transition:opacity .4s ease}
.gn .gn-svg .gn-mark.on{opacity:1}
.gn .gn-svg .gn-mark circle{fill:var(--paper,#0A0A0A)}
.gn .gn-svg text.gn-num{font-size:9px;fill:var(--accent)}
.gn .gn-svg .gn-check{opacity:.3;transition:opacity .4s ease}
.gn .gn-svg .gn-check.on{opacity:1}
.gn .gn-svg .gn-check path{opacity:0;transition:opacity .3s ease}
.gn .gn-svg .gn-check.on path{opacity:1}
/* Sci-fi 02: the character turntable */
.gn .gn-art.tt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);align-items:center;cursor:grab;touch-action:pan-y;user-select:none}
.gn .gn-art.tt.grab{cursor:grabbing}
.tt-stage{position:relative;height:100%;display:flex;justify-content:center;align-items:flex-end}
.tt-img{position:relative;z-index:1;height:100%;width:auto;max-width:100%;object-fit:contain;pointer-events:none;filter:contrast(1.04)}
.tt-lines{position:absolute;inset:0;width:100%;height:100%}
.tt-hud{display:flex;flex-direction:column;gap:12px;font-size:clamp(10px,.8vw,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tt-k{color:var(--accent)}
.tt-name{font:500 clamp(34px,3.6vw,68px)/.95 var(--sans);letter-spacing:-.04em;text-transform:none;color:var(--ink);margin:4px 0 14px}
.tt-row{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule,rgba(255,255,255,.18));padding-top:10px}
.tt-row b{font-weight:500;color:var(--ink);text-align:right}
.tt-dial{width:64px;height:64px;margin-top:12px}
.tt-dial .tt-arc{transform:rotate(-90deg);transform-origin:30px 30px;stroke-width:1.4}
.tt-hint{color:var(--accent)}
@media (max-width:759px){ .gn .gn-art.tt{grid-template-columns:1fr;aspect-ratio:auto} .tt-stage{height:70vh} }
/* Sci-fi 02: prop turntable in a white box, leader lines out to labels */
.gn .gn-art.prop-tt{position:relative}
.pv-box{position:absolute;background:#fff;overflow:hidden}
.pv-vid{display:block;width:100%;height:100%;object-fit:cover;filter:none!important}
.pv-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pv-lines path{fill:none;stroke:var(--ink)}
.pv-lines .crop{stroke:var(--muted)}
.pv-lines .pv-lead{stroke:var(--accent);stroke-width:.9;transition:opacity .35s ease;opacity:0}
.pv-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;border:1.5px solid var(--accent);background:rgba(165,31,255,.25);transition:opacity .35s ease;opacity:0;pointer-events:none}
.pv-lab{position:absolute;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;max-width:17%;font-size:clamp(9px,.72vw,12px);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:opacity .35s ease;opacity:0}
.pv-lab.l{text-align:right;align-items:flex-end}
.pv-lab b{font-weight:500;color:var(--ink);font-size:1.15em}
.prop-tt.pv-on .pv-lead,.prop-tt.pv-on .pv-dot,.prop-tt.pv-on .pv-lab{opacity:1}
.pv-cap{position:absolute;font-size:clamp(9px,.72vw,12px);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pv-cap:first-of-type span{color:var(--ink)}
@media (max-width:759px){ .pv-lab{max-width:19%;font-size:8px} .pv-lab span{display:none} }
/* hero reels at the top (all three genres): 10% less contrast than the other players */
iframe.hero-reel, video.hero-local, .hv-bg iframe{filter:brightness(1.05) contrast(.963)}
@media (max-width:759px){ .pv-cap-r{display:none} }
/* Foundation (05): the reference diagram much bigger */
.block .fx-found .lx-wide{max-width:1400px!important;width:100%!important}
/* Budget (06): the two column titles smaller */
.lx-budget .la text.hl,.lx-budget svg text.hl{font-size:10.5px!important;letter-spacing:.1em}

/* ================= FEEDBACK 30/09 11:13 ================= */
/* 1. top header: always fully transparent, no blur band under it (the Book page keeps its lime bar) */
html body main:not(#view-book) > .sys-strip,
html body main:not(#view-book) > .sys-strip.scrolled{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border-bottom:0!important}
html body main:not(#view-book) > .sys-strip::before,html body main:not(#view-book) > .sys-strip::after{display:none!important}

/* one title size across the site (matches the home blocks) */
@media (min-width:760px){
  html body .hero2 h1,
  html body .bay.mona .claim,
  html body .pw-blocks .pwbay .claim.big2{font-family:var(--sans)!important;font-weight:500!important;font-size:clamp(46px,6.2vw,128px)!important;line-height:.92!important;letter-spacing:-.05em!important;max-width:18ch!important}
  html body .hero2 .hero-sub{font-size:clamp(18px,1.5vw,26px)!important;line-height:1.45!important;max-width:40ch!important;margin-top:clamp(20px,2vw,32px)!important}
}

/* 2. Capabilities page: same inset, same text styles as the home blocks */
.pw-blocks > .pwsec > .sec-head{margin-left:clamp(28px,4vw,72px)!important;margin-right:clamp(28px,4vw,72px)!important}
.pw-blocks > .pwsec > .bay{padding-left:clamp(28px,4vw,72px)!important;padding-right:clamp(28px,4vw,72px)!important}
html body main .pw-blocks > .pwsec .pwreel{margin-left:clamp(28px,4vw,72px)!important;margin-right:clamp(28px,4vw,72px)!important}
@media (min-width:1280px){
  .pw-blocks > .pwsec > .sec-head{margin-left:clamp(44px,6vw,112px)!important;margin-right:clamp(44px,6vw,112px)!important}
  .pw-blocks > .pwsec > .bay{padding-left:clamp(44px,6vw,112px)!important;padding-right:clamp(44px,6vw,112px)!important}
  html body main .pw-blocks > .pwsec .pwreel{margin-left:clamp(44px,6vw,112px)!important;margin-right:clamp(44px,6vw,112px)!important}
}
.pw-blocks .pwbay .pwsub{font-size:clamp(20px,1.6vw,28px)!important;font-weight:500!important;letter-spacing:-.02em!important;color:var(--muted)!important;margin:clamp(14px,1.4vw,22px) 0 0!important}
.pw-blocks .pwbay .lede{font-size:clamp(16px,1.25vw,21px)!important;line-height:1.7!important;max-width:44ch!important;margin-top:clamp(18px,2vw,28px)!important}
.pw-blocks .pwbay{margin-bottom:clamp(36px,4vw,64px)!important}

/* 4. The result: no grey panel, bigger and clearer, more air between parts */
#w-s04 ~ .bay .qpair{background:transparent!important;gap:0!important;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:clamp(40px,4vw,64px)!important}
#w-s04 ~ .bay .qcol{background:transparent!important;padding:clamp(28px,3vw,48px) clamp(0px,2vw,40px) clamp(32px,3vw,52px) 0!important}
#w-s04 ~ .bay .qcol + .qcol{border-left:1px solid var(--rule);padding-left:clamp(24px,3vw,56px)!important}
#w-s04 ~ .bay .qtag{font-size:12px!important;letter-spacing:.16em!important}
#w-s04 ~ .bay .qcol h4{font-size:clamp(26px,2.6vw,46px)!important;font-weight:500!important;letter-spacing:-.03em!important;line-height:1.05!important;margin:14px 0 16px!important}
#w-s04 ~ .bay .qcol p{font-size:clamp(16px,1.2vw,20px)!important;line-height:1.65!important;max-width:40ch!important}
#w-s04 ~ .bay .vs{margin-top:clamp(56px,6vw,96px)!important}
#w-s04 ~ .bay .claim.mid{margin-top:clamp(96px,10vw,168px)!important}
#w-s04 ~ .bay .claim + .lede{margin-top:clamp(28px,3vw,44px)!important}
#w-s04 ~ .bay .vscap{font-size:12px!important;margin-bottom:14px!important}
@media (max-width:759px){ #w-s04 ~ .bay .qcol + .qcol{border-left:0;border-top:1px solid var(--rule);padding-left:0!important} }

/* 6. AI x AI / AI x Human graphics much bigger */
.eqs{gap:0!important}
.eqs .eq .pfig{max-width:none!important;width:100%!important}
.eqs .eq{padding:clamp(28px,3vw,48px) clamp(0px,2vw,32px) clamp(32px,3vw,52px) 0!important}
.eqs .eq + .eq{border-left:1px solid var(--rule);padding-left:clamp(24px,3vw,56px)!important}
.eqs .eq .eqline{font-size:clamp(24px,2.4vw,42px)!important;margin:clamp(14px,1.4vw,22px) 0 12px!important}
.eqs .eq p:not(.eqline){font-size:clamp(15px,1.15vw,19px)!important;line-height:1.65!important;max-width:40ch!important}
@media (max-width:759px){ .eqs .eq + .eq{border-left:0;padding-left:0!important} }

/* 7. Mona Lisa: bigger picture */
html body .bay.mona{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important;align-items:center!important}
html body .bay.mona .pixwrap{width:clamp(280px,30vw,560px)!important;max-width:80vw}
html body .bay.mona .pixcap{font-size:12px!important;margin-top:16px}

/* 8. Then / Now: side by side, big equations, readable notes */
.formula{display:grid!important;grid-template-columns:1fr;border:0!important;margin-top:clamp(48px,5vw,80px)!important;gap:0}
@media (min-width:900px){ .formula{grid-template-columns:1fr 1fr} }
.formula .frow{display:flex!important;flex-direction:column;gap:0!important;padding:clamp(28px,3vw,48px) clamp(0px,2vw,40px) clamp(32px,3vw,52px) 0!important;border:0!important;border-top:1px solid var(--rule)!important;border-bottom:1px solid var(--rule)!important}
@media (min-width:900px){ .formula .frow + .frow{border-left:1px solid var(--rule)!important;padding-left:clamp(24px,3vw,56px)!important} }
.formula .flab{font-size:13px!important;letter-spacing:.18em!important;line-height:1!important;margin-bottom:clamp(22px,2.4vw,36px)}
.formula .frow:first-child .flab{color:var(--muted)!important}
.formula .feq{font-size:clamp(30px,3vw,58px)!important;line-height:1.12!important;letter-spacing:-.035em!important;font-weight:500;margin:0!important}
.formula .feq i{color:var(--muted)}
.formula .frow:first-child .feq b:not(:first-child){color:var(--muted);font-weight:400}
.formula .feq em{color:var(--accent)!important;border-bottom:2px solid var(--accent)!important}
.formula .frow:last-child .feq b:nth-of-type(2){color:#fff}
.formula .fnote{font-family:var(--sans)!important;font-size:clamp(15px,1.15vw,19px)!important;letter-spacing:0!important;line-height:1.65!important;max-width:42ch;margin-top:clamp(20px,2vw,32px)!important;color:var(--muted)!important}

/* 9. 200:1 / 20:1: no grey panel */
.ratios{background:transparent!important;gap:0!important;border-top:1px solid var(--rule)!important;border-bottom:1px solid var(--rule)!important;margin-top:clamp(48px,5vw,80px)!important}
.ratios .ratio{background:transparent!important;border:0!important;padding:clamp(28px,3vw,48px) clamp(0px,2vw,40px) clamp(32px,3vw,52px) 0!important}
@media (min-width:760px){ .ratios .ratio + .ratio{border-left:1px solid var(--rule)!important;padding-left:clamp(24px,3vw,56px)!important} }
.ratios .ratio h3{font-size:clamp(24px,2.4vw,42px)!important;letter-spacing:-.03em!important;margin:clamp(14px,1.4vw,22px) 0 12px!important}
.ratios .ratio p{font-size:clamp(15px,1.15vw,19px)!important;line-height:1.65!important;max-width:40ch!important}
/* 3. process graph: the dashed ring turns on its own centre; graph wider */
[data-anim=flow] .orbit{transform-box:view-box!important;transform-origin:340px 178px!important}
html body .bay .pfig.wide .lx-wide{max-width:1400px!important;width:100%!important}
html body .bay .pfig.wide{padding-left:0!important;padding-right:0!important}
/* 7. mona text readable */
html body .bay.mona .lede{font-size:clamp(16px,1.25vw,21px)!important;line-height:1.7!important;max-width:44ch!important}
/* Directed, not generated: the options graph bigger, pulled in towards the text */
@media (min-width:900px){
  .block .fx-directed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:clamp(32px,4vw,80px)!important}
  .block .fx-directed .dir-art{max-width:min(820px,72vh)!important;width:100%!important;justify-self:start!important;aspect-ratio:1/1}
}
/* logo band: everything ~15% smaller and quieter; Sony Music smaller still */
.logo-band ul{zoom:.85}
.logo-band img{opacity:1!important}
.logo-band li.h-sony img{height:clamp(8px,.6vw,12px)!important}
#view-home [data-not][hidden]{display:none!important}
/* temporary: marks every reel still playing from YouTube */
.yt-swap{position:absolute;left:14px;top:14px;z-index:5;padding:8px 12px;background:#FF2D55;color:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
/* watch-reel button: 20% bigger all round (padding follows the type) */
@media (min-width:760px){ html body .block-open .fx-hero .hero-ctas > .btn-accent{padding:1.1em 1.6em!important} }

/* ---------- documentary: archive footage and its reconstruction, two loops ---------- */
.gn .gn-art.gn-docv{aspect-ratio:auto;max-height:none;display:grid;grid-template-columns:var(--gn-cols,repeat(2,minmax(0,1fr)));gap:clamp(16px,2.4vw,40px)}
@media (max-width:759px){ .gn .gn-art.gn-docv{grid-template-columns:1fr} }
.gn-clip{margin:0;min-width:0}
.gn-cap{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.gn-cap .dim{color:var(--muted)}
.gn-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;outline:1px solid var(--rule, rgba(255,255,255,.14));outline-offset:6px}
.gn-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.gn-wait{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* our work: the reel's still shows at once, the video fades in over it when it is playing */
.wk-main .wk-poster{position:absolute;inset:0;z-index:0;background:#000 center/cover no-repeat;opacity:0;transition:opacity .35s ease;pointer-events:none}
.wk-main .wk-poster.on{opacity:1}

/* booking: times already taken are struck through, times too soon are faded */
.bookblock .bk-slot.taken,.bookblock .bk-slot.gone{cursor:not-allowed!important;pointer-events:none}
.bookblock .bk-slot.taken{text-decoration:line-through;opacity:.4}
.bookblock .bk-slot.gone{opacity:.22}

/* booking: the thank-you that replaces the form */
.bookblock .bk-thanks{padding:clamp(20px,2.4vw,32px) 0 clamp(20px,2.4vw,32px) clamp(18px,2vw,28px);border-left:3px solid #A51FFF}
.bookblock .bk-thanks .mono{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A51FFF}
.bookblock .bk-thanks h3{font-family:var(--sans);font-weight:500;font-size:clamp(28px,3vw,46px);line-height:1;letter-spacing:-.035em;margin:12px 0 0;color:inherit}
.bookblock .bk-thanks p{font-size:clamp(15px,1.15vw,18px);line-height:1.55;margin:14px 0 22px;max-width:46ch;color:inherit}

/* hero: the reel's still sits behind the player, and the player only fades in once it runs */
.hero-bg.has-still,.hero-bg.alt-reel.has-still{background-image:var(--still)!important;background-size:cover!important;background-position:center!important}
.hero-bg iframe.hero-reel.on:not(.playing){opacity:0!important}

/* vstill.js: a silent Vimeo player stays see-through (its still shows) until it is running */
iframe.vs-wait{opacity:0!important}

/* booking: a missing name or email is outlined until it is fixed */
.bookblock .bookform [aria-invalid=true]{border-color:#E5484D!important;box-shadow:0 0 0 1px #E5484D inset}

/* booking: a fully booked weekday keeps its box and says so */
.bookblock .bk-day.full{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none!important;opacity:.55;cursor:not-allowed}
.bookblock .bk-day.full b{text-decoration:line-through}
.bookblock .bk-day.full small{font-size:9px;letter-spacing:.12em;text-transform:uppercase}