/* =====================================================================
   FABULA — redesign layer
   Loaded after styles.css. Everything the new look changes lives here, so
   the original stylesheet stays untouched underneath it.

   Tokens first: change a colour or a font here and it changes everywhere.
   --accent is the one detail colour (purple).
   ===================================================================== */

:root{
  --paper:#F3F3F0;
  --ground:#F3F3F0;
  --ink:#121211;
  --rule:#DADAD5;
  --rule-strong:#C9C9C3;
  --rule-soft:rgba(18,18,17,.1);
  --muted:#8A8A84;
  --panel:#E7E7E3;
  --card:#FAFAF6;                 /* the cream the line drawings sit on */
  --chip:rgba(18,18,17,.055);
  --chip-hover:rgba(18,18,17,.1);
  --accent:#A51FFF;
  --accent-hi:#B647FF;
  --on-accent:#FFFFFF;
  --signal:#A51FFF;
  --on-signal:#FFFFFF;
  --g-on-dark:#FFFFFF;
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --radius:10px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F0F0E; --ground:#0F0F0E; --ink:#ECECE7; --rule:#2A2A27; --rule-strong:#3A3A36;
    --rule-soft:rgba(236,236,231,.1); --muted:#7D7D77; --panel:#1B1B19; --card:#161614;
    --chip:rgba(236,236,231,.07); --chip-hover:rgba(236,236,231,.13);
    --accent:#B13DFF; --accent-hi:#C266FF; --signal:#B13DFF; --on-signal:#1C0033;
  }
}
:root[data-theme="dark"]{
  --paper:#0F0F0E; --ground:#0F0F0E; --ink:#ECECE7; --rule:#2A2A27; --rule-strong:#3A3A36;
  --rule-soft:rgba(236,236,231,.1); --muted:#7D7D77; --panel:#1B1B19; --card:#161614;
  --chip:rgba(236,236,231,.07); --chip-hover:rgba(236,236,231,.13);
  --accent:#B13DFF; --accent-hi:#C266FF; --signal:#B13DFF; --on-signal:#1C0033;
}

body{
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(170,120,220,.12), transparent 62%),
    radial-gradient(900px 480px at -10% 30%, rgba(200,200,215,.18), transparent 60%),
    var(--ground);
  background-attachment:fixed;
  font-family:var(--sans);
}
.sheet{background:transparent}
.frame{padding-top:0}
.mono{font-family:var(--mono);letter-spacing:.04em}
.dim{color:var(--muted)}
kbd{font:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
.sec-head,[id^="s-"],#s04,#h-next{scroll-margin-top:90px}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  height:28px;padding:0 10px;border:0;border-radius:4px;
  background:var(--chip);color:var(--ink);
  font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s;
}
.chip kbd{color:var(--muted);font-weight:400}
.chip:hover{background:var(--chip-hover)}
.chip:focus-visible,.fx-tab:focus-visible,.wk-ix:focus-visible,.wk-tile:focus-visible,
.feed-row:focus-visible,.tb-switch:focus-visible,.tb-cta:focus-visible,.reel-sound:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ================= THE BAR: one boxed table, cells divided by rules ================= */
.topbar{
  position:sticky;top:0;z-index:40;margin:0 var(--gut);padding-top:10px;
  background:var(--ground);
}
.tb-row{display:flex;align-items:stretch;min-height:52px;border:1px solid var(--ink);background:var(--paper)}
.tb-brand{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;padding:0 18px;color:var(--ink);text-decoration:none}
.tb-brand .glyph{display:block;width:21px;height:16px;flex:none;background:var(--ink);-webkit-mask:var(--bat) center/contain no-repeat;mask:var(--bat) center/contain no-repeat}
.tb-brand b{font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.tb-nav{display:flex;align-items:stretch}
.tb-link{
  display:flex;align-items:center;padding:0 20px;border-left:1px solid var(--ink);
  color:var(--ink);text-decoration:none;white-space:nowrap;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s;
}
.tb-link:hover{background:var(--chip)}
.tb-link[aria-current="page"]{background:var(--ink);color:var(--paper)}
.tb-cta{
  display:flex;align-items:center;padding:0 22px;border-left:1px solid var(--ink);
  background:var(--accent);color:#fff;text-decoration:none;white-space:nowrap;
  font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:background .2s;
}
.tb-cta:hover{background:var(--accent-hi)}
.tb-cta[aria-current="page"]{background:var(--ink);color:var(--paper)}
.tb-switch{
  display:flex;align-items:center;gap:10px;padding:0 16px;border:0;border-left:1px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;
}
.sw-lab{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;min-width:3.6em;text-align:left}
.sw-track{position:relative;width:40px;height:20px;border:1px solid var(--ink);background:transparent}
.sw-track i{position:absolute;top:3px;left:3px;width:12px;height:12px;background:var(--ink);transition:transform .3s var(--ease)}
.tb-switch[aria-pressed="true"] .sw-track i{transform:translateX(20px);background:var(--accent)}
.tb-sub{
  display:flex;justify-content:space-between;gap:12px;padding:11px 32px;
  border:1px solid var(--ink);border-top:0;background:var(--paper);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  transition:padding .25s,max-height .25s,opacity .2s;max-height:60px;overflow:hidden;
}
.tb-sub a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
.topbar.scrolled .tb-sub{max-height:0;padding-top:0;padding-bottom:0;opacity:0;border-bottom-width:0}
.menubtn,.sitemenu,.connect{display:none!important}
:root[data-view="home"] .frame{padding-top:0}
@media (max-width:1180px){
  .tb-row{flex-wrap:wrap}
  .tb-nav{order:5;flex-basis:100%;border-top:1px solid var(--ink);overflow-x:auto;scrollbar-width:none}
  .tb-nav::-webkit-scrollbar{display:none}
  .tb-link:first-child{border-left:0}
  .tb-link{padding:14px 16px}
}
@media (max-width:620px){
  .tb-brand b{display:none}
  .tb-brand{flex:0 0 auto;padding:0 14px}
  .tb-cta{flex:1;justify-content:center;padding:0 12px;font-size:11px;min-height:46px}
  .sw-lab{display:none}
  .tb-sub{padding:9px 14px;font-size:10px}
  .tb-sub span{display:none}
}

/* ================= SECTION HEADS ("/ LABEL") ================= */
.sec-head{
  align-items:baseline;gap:10px;
  margin:var(--s6) var(--gut) 0;padding:0 0 9px;
  border-top:0;border-bottom:1px solid var(--rule);background:transparent;
}
.sec-num{width:auto!important;color:var(--muted);font:400 11px/1 var(--mono);letter-spacing:.04em}
.sec-num::before{content:"/ ";color:var(--muted)}
.sec-title{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--ink)}
.sec-count{margin-left:auto;color:var(--muted);font-size:11px}
.sec-mark{width:16px;height:16px;color:var(--muted)}

/* ================= HOME: HERO over the Stylised fiction reel ================= */
.fx-hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin:var(--s2) var(--gut) 0;border-radius:var(--radius);
  aspect-ratio:16/9;display:flex;
  background:#0A0A0A;color:#F4F4F0;
}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0A0A0A center/cover no-repeat url("img/reel-still.jpg")}
.hero-bg iframe{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-bg.live iframe{opacity:1}
.hero-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* no flat tint: a fade that is darkest at the foot, under the words,
     and gone completely by the top of the headline */
  background:none;
}
/* 35mm grain over the reel: a noise tile that jumps every frame */
.hero-grain{
  position:absolute;inset:-50%;z-index:-1;pointer-events:none;opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:220px 220px;animation:grain .5s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}83%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}}
.btn-accent{
  display:inline-flex;align-items:center;gap:12px;margin-top:var(--s3);height:48px;padding:0 22px;border:0;border-radius:6px;
  background:var(--accent);color:#fff;cursor:pointer;font:600 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 14px 36px -14px rgba(120,0,200,.7);transition:background .2s,transform .2s;
}
.btn-accent:hover{background:var(--accent-hi);transform:translateY(-1px)}
.ba-play{width:0;height:0;border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.hero-in{
  display:flex;flex-direction:column;justify-content:space-between;width:100%;
  padding:var(--s3) var(--s4) var(--s4);
}
.fx-meta{
  display:flex;justify-content:space-between;gap:12px;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.22);
  font-size:10.5px;color:rgba(244,244,240,.7);text-transform:uppercase;
}
.fx-meta a{color:#F4F4F0;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.fx-meta a:hover{border-color:#fff}
.hero-bottom{padding-top:var(--s5)}
.hero-in{position:relative}
.hero-bat{display:block;width:clamp(44px,4.6vw,70px);aspect-ratio:19/14;margin-bottom:var(--s2);background:#F4F4F0;-webkit-mask:var(--bat) center/contain no-repeat;mask:var(--bat) center/contain no-repeat}
.fx-h1{
  margin:0;font-weight:500;max-width:15ch;
  font-size:clamp(40px,6.4vw,104px);line-height:.9;letter-spacing:-.055em;
  text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.25);
}
.fx-lead{
  margin:var(--s3) 0 0;max-width:40ch;
  font-size:clamp(17px,1.6vw,22px);line-height:1.3;letter-spacing:-.02em;color:rgba(244,244,240,.86);
}

/* ================= FIGURE FRAME ([ FIG. 01 ]) ================= */
.fig{
  margin:0;border:1px solid var(--rule-strong);border-radius:6px;overflow:hidden;
  background:color-mix(in srgb, var(--paper) 70%, transparent);
}
.fig-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:30px;padding:0 10px;border-bottom:1px solid var(--rule);
  font-size:10.5px;color:var(--muted);text-transform:uppercase;
}
.fig-bar b{font-weight:500;color:var(--ink)}
.fig-sq{width:10px;height:10px;border:1px solid var(--muted);border-radius:2px;flex:none}
.fig-end{min-width:10px;text-align:right}
.fig-body{
  position:relative;padding:8px;
  background-image:radial-gradient(var(--rule-strong) .8px, transparent .9px);background-size:14px 14px;
}

/* ================= 01 — SHOWREEL with the field menu over it ================= */
.fx-core{padding:var(--s2) var(--gut) 0}
.core-body{position:relative}
.core-slot{position:relative;aspect-ratio:16/9;background:#0B0B0B;border-radius:var(--radius);overflow:hidden}
.core-slot.reelmedia .vstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transform:none;aspect-ratio:auto}
.core-slot.reelmedia .vstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.core-slot .sndbtn{display:none!important}
.fx-tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:10px;
  border:1px solid var(--ink);border-radius:6px;overflow:hidden;
}
.fx-tab{
  position:relative;display:flex;align-items:center;gap:12px;min-width:0;height:54px;padding:0 18px;
  border:0;border-radius:0;cursor:pointer;text-align:left;background:transparent;color:var(--ink);
  font:500 clamp(13px,1.3vw,17px)/1 var(--sans);letter-spacing:-.02em;
}
.fx-tab + .fx-tab{border-left:1px solid var(--ink)}
.fx-tab kbd{font:400 11px/1 var(--mono);color:var(--muted)}
.fx-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-tab:hover{background:var(--chip)}
/* the fill: a solid block with the label repeated in white inside it,
   clipped to how far the clip has played */
.fx-fill{
  font-style:normal;
  position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 18px;
  background:var(--accent);color:#fff;pointer-events:none;
  clip-path:inset(0 calc((1 - var(--f,0)) * 100%) 0 0);
}
.fx-tab .fx-fill kbd,.fx-tab[aria-selected="true"] .fx-fill kbd{color:rgba(255,255,255,.75)}
.fx-tab[aria-selected="true"]{color:var(--accent)}
.fx-tab[aria-selected="true"] kbd{color:var(--accent)}
.sound-tag{
  position:absolute;right:22px;bottom:22px;z-index:7;display:inline-flex;align-items:center;gap:9px;
  height:32px;padding:0 12px;border:0;border-radius:4px;background:var(--accent);color:#fff;cursor:pointer;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:background .2s;
}
.sound-tag:hover{background:var(--accent-hi)}
.sound-tag .rs-ico{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.sound-tag .rs-ico i{width:2.5px;background:#fff;border-radius:1px;height:40%;transform-origin:bottom}
.sound-tag .rs-ico i:nth-child(2){height:100%}.sound-tag .rs-ico i:nth-child(3){height:65%}
.sound-tag.on .rs-ico i{animation:rsBar 1s ease-in-out infinite}
.sound-tag.on .rs-ico i:nth-child(2){animation-delay:.18s}.sound-tag.on .rs-ico i:nth-child(3){animation-delay:.36s}
@keyframes rsBar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.fx-core-text[hidden]{display:none}
.fx-core-text{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--s2) var(--s4);
  padding-top:var(--s2);min-height:9.5em;
}
.fx-core-h{margin:0;font-size:clamp(22px,2.4vw,32px);line-height:1.02;letter-spacing:-.035em;font-weight:500}
.fx-core-p{margin:0;font-size:15px;line-height:1.55;max-width:60ch}
.fx-core-text .tags{grid-column:1 / -1}
.swap .fx-core-text > *,.swap .wk-head > *,.swap .wk-foot .tags{animation:fxIn .55s var(--ease) both}
.swap .fx-core-text > *:nth-child(2),.swap .wk-info{animation-delay:.05s}
@keyframes fxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tags[hidden]{display:none}
.tag,.tag-spec{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 8px;border:1px solid var(--rule-strong);border-radius:3px;
  font:400 10.5px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.tag-spec b{font-weight:500;color:var(--ink)}
.tag-spec b::after{content:" \2014";color:var(--muted);font-weight:400}

/* ================= LINE DRAWINGS (shared) ================= */
.la{display:block;width:100%;height:100%;overflow:visible}
.la path,.la ellipse,.la circle{fill:none;stroke:var(--ink);stroke-width:.85;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.la .thin{stroke-width:.6}
.la .thick{stroke-width:1.6}
.la .faint{opacity:.4}
.la .acc{stroke:var(--accent)}
.la .fill{fill:var(--ink);stroke:none}
.la .acc-f{fill:var(--accent)}
.la .frm{stroke-width:.8}
.la text{font-family:var(--mono);font-size:7px;letter-spacing:.08em;text-transform:uppercase;fill:var(--muted);stroke:none}
.la text.big{font-size:8.5px;fill:var(--ink)}
.la .dr{stroke-dasharray:1.02 1.02;stroke-dashoffset:1.02;opacity:0;
  transition:stroke-dashoffset var(--du,700ms) var(--ease) var(--dl,0ms), opacity .01s linear var(--dl,0ms)}
.la .dr.in{stroke-dashoffset:0;opacity:1}
@media (prefers-reduced-motion: reduce){ .la .dr{transition:none} }

/* ================= 03 — HOW A SHOT IS MADE ================= */
.fx-steps{padding:var(--s3) var(--gut) 0}
.fx-split{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s4);
  align-items:end;margin-bottom:var(--s4);
}
.fx-h2{margin:0;font-weight:500;font-size:clamp(34px,4.8vw,68px);line-height:.94;letter-spacing:-.048em}
.fx-p{margin:0;font-size:15px;line-height:1.55;max-width:50ch}
/* three side by side: a plain title, the drawing on the page, the words */
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.tri-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.tri-head{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.tri-head .mono{font-size:11px;color:var(--accent)}
.tri-head b{font:500 clamp(20px,2vw,26px)/1 var(--sans);letter-spacing:-.03em}
.tri-state{margin-left:auto;font-size:10px;color:var(--muted);text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.tri-state::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 1.1s steps(2) infinite}
.tri-state.on::before{animation:none}
@keyframes blink{50%{opacity:0}}
.tri-art{position:relative;aspect-ratio:320/220;container-type:inline-size}
.tri-art.sq{aspect-ratio:1}
.tri-text{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
/* the screenplay */
.sp-page{
  position:absolute;left:0;right:0;top:4%;bottom:0;margin:0;overflow:hidden;
  font:400 max(7px,2.45cqw)/1.5 var(--mono);letter-spacing:0;color:var(--ink);white-space:pre;
  transition:opacity .45s ease;
}
.sp-page.out{opacity:0}
.sp-page b{font-weight:600}
.caret{display:inline-block;width:.55em;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--accent);animation:blink 1s steps(2) infinite}
/* the storyboard */
.bd-main{transform-box:view-box;transform-origin:0 0;transition:transform .9s var(--ease)}
.la.sheet .bd-main{transform:var(--bd-t)}
[data-anim=board] .la{transition:opacity .6s ease}
[data-anim=board] .la.fade{opacity:0}
[data-anim=board] .lab{font-size:6px}
/* the finished shot */
.fs-rays{transform-box:view-box;transform-origin:160px 106px;animation:spin 60s linear infinite}
.la .ray{stroke:var(--accent);stroke-width:.45;opacity:.35}
.la .sun{fill:var(--accent);stroke:none}
.la .deck{fill:var(--paper);stroke:none}
.la .win{fill:var(--accent);stroke:none;opacity:0;animation:winOn 7s ease-in-out infinite}
.la .win.w1{animation-delay:2.3s}.la .win.w2{animation-delay:4.6s}
@keyframes winOn{0%,100%{opacity:0}20%,55%{opacity:.85}}
.la .wave{stroke-width:.55;stroke-dasharray:14 5 3 6;opacity:.6;animation:shimmer 3.4s linear infinite}
.la .wave.w1{animation-duration:4.4s;animation-direction:reverse}
.la .wave.w2{animation-duration:5.2s}
@keyframes shimmer{to{stroke-dashoffset:-56}}
.la .glint{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:3 4;opacity:.7;animation:shimmer 2.2s linear infinite}
.la .ripple{stroke-width:.6;transform-box:fill-box;transform-origin:center;animation:ripple 3.6s ease-out infinite;opacity:0}
.la .ripple.r1{animation-delay:1.2s}.la .ripple.r2{animation-delay:2.4s}
@keyframes ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(8);opacity:0}}
.la .refl{opacity:.22}
.la .bird{stroke-width:.7}
.birds{animation:birds 16s linear infinite}
@keyframes birds{from{transform:translate(90px,52px)}to{transform:translate(250px,34px)}}
.la .crop{stroke:var(--muted);stroke-width:.7}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= 03 — OUR WORK ================= */
.fx-work{padding:var(--s3) var(--gut) 0}
.wk-head{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s4);
  align-items:end;margin-bottom:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--rule);
}
.wk-title{margin:0;font-weight:500;font-size:clamp(40px,5.4vw,84px);line-height:.9;letter-spacing:-.055em}
.wk-title sup{font:400 max(11px,.17em)/1 var(--mono);letter-spacing:0;color:var(--accent);vertical-align:top;position:relative;top:.45em;margin-left:.2em}
.wk-info{padding-bottom:.35em}
.wk-h{margin:0 0 6px;font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.wk-p{margin:0;font-size:14px;line-height:1.5;color:var(--muted);max-width:52ch}
.wk-main{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#0B0B0B}
.wk-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.wk-vid.on{opacity:1}
.wk-hold{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:#E9E9E4;background-color:#111;
  background-image:radial-gradient(rgba(255,255,255,.12) .8px, transparent .9px);background-size:14px 14px;
}
.wk-hold .mono{font-size:11px;text-transform:uppercase;color:var(--accent-hi)}
.wk-hold .chip{background:rgba(255,255,255,.1);color:#fff}
.wk-hud{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;display:flex;align-items:center;gap:14px;color:#fff;font-size:10.5px;text-transform:uppercase;white-space:pre;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.wk-prog{flex:1;height:2px;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
.wk-prog i{display:block;height:100%;background:var(--accent-hi);transform:scaleX(0);transform-origin:left}
.wk-main::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;background:linear-gradient(transparent, rgba(0,0,0,.45))}
.wk-stage{max-width:min(100%, calc((100svh - 260px) * 1.7778))}
.wk-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:8px}
.wk-tile{position:relative;aspect-ratio:16/9;padding:0;border:0;border-radius:7px;overflow:hidden;background:#161615;cursor:pointer;color:#fff;outline:1px solid transparent;outline-offset:2px;transition:outline-color .25s}
.wk-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk-tile-empty{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) .8px, transparent .9px);background-size:10px 10px}
.wk-veil{position:absolute;inset:0;background:rgba(6,6,6,.55);transition:opacity .35s ease}
.wk-tile-name{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px;text-align:center;
  font:500 clamp(11px,1vw,14px)/1.1 var(--sans);letter-spacing:-.01em;transition:opacity .3s;
}
.wk-tile-name .mono{font-size:9.5px;color:rgba(255,255,255,.6)}
.wk-tile-bar{position:absolute;left:0;right:0;bottom:0;height:2px}
.wk-tile-bar > i{display:block;height:100%;background:var(--accent-hi);transform:scaleX(0);transform-origin:left}
.wk-tile[aria-selected="true"]{outline-color:var(--accent)}
.wk-tile[aria-selected="true"] .wk-veil{opacity:.15}
.wk-tile[aria-selected="true"] .wk-tile-name{opacity:.0}
.wk-tile:hover .wk-veil,.wk-tile:focus-visible .wk-veil{opacity:0}
.wk-tile:hover .wk-tile-name{opacity:0}
.wk-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}

/* ================= 04 FOUNDATION, 05 PHYSICS (uses .tri), 06 DIRECTED ================= */
.fx-found{padding:var(--s3) var(--gut) 0}
.fx-found .lx-wide{max-width:980px}
.tri.duo2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.tri.duo2 .tri-art.sq{aspect-ratio:4/3}
.fx-directed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:center;padding:var(--s3) var(--gut) 0}
.dir-text .fx-p{margin-top:var(--s2)}
.dir-art{max-width:520px;justify-self:end;width:100%}
.fx-dlv{padding:var(--s3) var(--gut) 0}
.la .link{stroke:var(--muted);stroke-width:.6}
.la .carry{fill:var(--accent);stroke:none;transition:opacity .2s}
.la .shot .mini{opacity:0;transition:opacity .4s ease}
.la .shot.got .mini{opacity:1}
.la .shot.got .frm{stroke:var(--accent);stroke-width:1.1}
.la .shot .frm{transition:stroke .3s}
.la .ghost{fill:none;stroke:var(--ink);stroke-width:.5;opacity:.35;animation:ghostOut 1.5s ease-out forwards}
@keyframes ghostOut{to{opacity:0}}
.burst{opacity:0}
.burst.go{animation:burst .6s ease-out}
.burst.go path{stroke:var(--accent)}
@keyframes burst{0%{opacity:1}100%{opacity:0}}
.la .node .frm{transition:stroke .3s, stroke-width .3s}
.la .node{transition:opacity .5s}
.la .node.pick .frm{stroke:var(--accent);stroke-width:1.3}
.la .node.pick path.faint{opacity:.9}
.la .node.drop{opacity:.28}

/* ================= 06 — BOOK A CALL: one purple block ================= */
.bookblock{
  margin:var(--s2) var(--gut) 0;border-radius:var(--radius);overflow:hidden;
  background:#A51FFF;
  color:#fff;
  --ink:#FFFFFF; --paper:#9900FF; --muted:rgba(255,255,255,.66); --rule:rgba(255,255,255,.24);
  --rule-strong:rgba(255,255,255,.38); --signal:#FFFFFF; --on-signal:#5C0099; --g-on-dark:#5C0099;
  --chip:rgba(255,255,255,.12); --chip-hover:rgba(255,255,255,.2);
}
.bb-head{padding:var(--s5) var(--gut) var(--s3)}
.bb-head h2{margin:0;font-weight:500;font-size:clamp(38px,7vw,104px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase;max-width:14ch}
.bb-head p{margin:var(--s2) 0 0;max-width:46ch;font-size:clamp(16px,1.5vw,20px);line-height:1.35;letter-spacing:-.015em;color:rgba(255,255,255,.86)}
.bookblock .booking{border-top:1px solid var(--rule);margin:0 var(--gut)}
.bookblock .bk-cal,.bookblock .bk-side{padding-left:0;padding-right:0}
@media (min-width:900px){ .bookblock .bk-side{padding-left:var(--s3)} .bookblock .bk-cal{padding-right:var(--s3)} }
.bookblock .ff input,.bookblock .ff textarea,.mailform .ff input,.mailform .ff textarea{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.bookblock .ff input::placeholder,.bookblock .ff textarea::placeholder{color:rgba(255,255,255,.55)}
.bookblock .mfbtn,.mailform .mfbtn{background:#fff;color:#5C0099;border-color:#fff}
.bookblock .mfbtn:hover{background:transparent;color:#fff;border-color:#fff}
.bookblock .bk-day:not(.off):not(.on){border-color:rgba(255,255,255,.35)}
.bookblock .bk-day.on,.bookblock .bk-slot.on{background:#fff;color:#5C0099;border-color:#fff}
.bb-switch{display:inline-flex;gap:4px;margin-top:var(--s3);padding:4px;border-radius:8px;background:rgba(255,255,255,.12)}
.bb-opt{height:40px;padding:0 18px;border:0;border-radius:5px;background:transparent;color:#fff;cursor:pointer;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s}
.bb-opt:hover{background:rgba(255,255,255,.12)}
.bb-opt[aria-selected="true"]{background:#fff;color:#5C0099}
.bb-pane[hidden]{display:none}
.mailform{margin:0 var(--gut);padding:var(--s3) 0 var(--s4);border-top:1px solid var(--rule)}
.mf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mf-grid .mf-wide{grid-column:1 / -1}
.mailform .mfrow{display:flex;align-items:center;gap:16px;margin-top:18px}
.mf-to{font-size:10.5px;color:var(--muted);text-transform:uppercase}
.mfnote.ok{color:#fff}.mfnote.bad{color:#FFD0D0}
.bb-mail{margin:0;padding:var(--s2) var(--gut) var(--s3);border-top:1px solid var(--rule);font-size:11px;color:rgba(255,255,255,.72);text-transform:uppercase}
.bb-mail a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.bb-mail a:hover{border-color:#fff}
/* the older coloured contact block on the other pages, in the new colour */
.contact{margin:var(--s2) var(--gut) 0;border-radius:var(--radius);background:#A51FFF}
.contact h2{font-weight:500;letter-spacing:-.05em}
.hero2 h2{letter-spacing:-.045em}
.sitefoot{border-top:1px solid var(--rule)}

/* ================= IN DEVELOPMENT (its own page) ================= */
.dv-hero{padding:var(--s3) var(--gut) var(--s4)}
.dv-hero .fx-meta{color:var(--muted);border-color:var(--rule)}
.dv-h1{margin:var(--s4) 0 var(--s2);font-weight:500;font-size:clamp(56px,11vw,176px);line-height:.86;letter-spacing:-.06em}
.dv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) 12px;padding:0 var(--gut) var(--s5)}
.dv-item{margin:0}
.dv-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:#0B0B0B}
.dv-media img,.dv-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:drift 18s ease-in-out infinite alternate}
.dv-item:nth-child(2) .dv-media img{animation-delay:-4s;animation-direction:alternate-reverse}
.dv-item:nth-child(3) .dv-media img{animation-delay:-9s}
.dv-item:nth-child(4) .dv-media img{animation-delay:-13s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2%,-1.5%)}}
.dv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%, rgba(0,0,0,.35));pointer-events:none}
.dv-item figcaption{display:flex;align-items:flex-start;gap:6px;padding:14px 0 12px;border-bottom:1px solid var(--rule)}
.dv-item sup{font-size:10px;color:var(--muted);margin-top:.3em}
.dv-item b{font:500 clamp(26px,3.4vw,46px)/1 var(--sans);letter-spacing:-.045em;text-transform:uppercase}
.dv-item figcaption span{margin-left:auto;align-self:center;font-size:10.5px;color:var(--muted);text-transform:uppercase}
.dv-item figcaption i{font-style:normal;font-size:24px;line-height:1;margin-left:14px;align-self:center;transition:transform .35s var(--ease)}
.dv-item:hover figcaption i{transform:translate(3px,3px);color:var(--accent)}

/* ================= HOW WE WORK: the diagrams move ================= */
.asterisk{animation:spin 48s linear infinite}
.pg-live .pulse,.la .pulse{fill:var(--accent);stroke:none}
.bd-cell text{opacity:0;transition:opacity .3s}
.bd-cell.shown text{opacity:1}
.pg-truth .hit{animation:hitBlink 3.6s ease-in-out infinite}
@keyframes hitBlink{0%,8%{opacity:1}4%{opacity:.25}}
.anchor-ring{fill:none;stroke:var(--accent);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:ring 3.6s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(4.4);opacity:0}}
.truth-shot path{fill:none;stroke:var(--ink);stroke-width:.7}
.truth-shot .dr{stroke-dasharray:1.02 1.02;stroke-dashoffset:1.02;opacity:0;transition:stroke-dashoffset var(--du,700ms) var(--ease) var(--dl,0ms), opacity .01s linear var(--dl,0ms)}
.truth-shot .dr.in{stroke-dashoffset:0;opacity:1}
.pg-flow .loop{stroke-dasharray:4 3;animation:march 1.6s linear infinite}
@keyframes march{to{stroke-dashoffset:-14}}
.model-ring{fill:none;stroke:var(--accent);stroke-width:.8;stroke-dasharray:2 5}
.pg-flow .tline,.kit .tline{transform-box:fill-box;transform-origin:left center;animation:typeLine 4.8s steps(12) infinite;animation-delay:calc(var(--i,0) * .28s)}
@keyframes typeLine{0%{transform:scaleX(0)}30%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.pg-flow .hit{animation:outPulse 2.4s ease-in-out infinite}
@keyframes outPulse{0%,100%{opacity:1}50%{opacity:.72}}
.logowall .lw{animation:lwWave 7s ease-in-out infinite}
.logowall .lw:nth-child(1){animation-delay:0s}.logowall .lw:nth-child(2){animation-delay:.4s}.logowall .lw:nth-child(3){animation-delay:.8s}
.logowall .lw:nth-child(4){animation-delay:1.2s}.logowall .lw:nth-child(5){animation-delay:1.6s}.logowall .lw:nth-child(6){animation-delay:2s}
.logowall .lw:nth-child(7){animation-delay:2.4s}.logowall .lw:nth-child(8){animation-delay:2.8s}.logowall .lw:nth-child(9){animation-delay:3.2s}
.logowall .lw:nth-child(10){animation-delay:3.6s}.logowall .lw:nth-child(11){animation-delay:4s}.logowall .lw:nth-child(12){animation-delay:4.4s}
.logowall .lw:nth-child(13){animation-delay:4.8s}.logowall .lw:nth-child(14){animation-delay:5.2s}.logowall .lw:nth-child(15){animation-delay:5.6s}
@keyframes lwWave{0%,100%{color:inherit}6%{color:var(--accent)}14%{color:inherit}}
/* the kit (replaces the flat-lay photo) */
.kitfig{background:transparent;border:0}
.kit{position:relative;aspect-ratio:1;padding:6%}
.kit .tline{fill:var(--ink);stroke:none;opacity:.75}
.kit .led{fill:var(--accent);stroke:none;animation:led 1.6s steps(1) infinite}
.kit .led.l1{animation-delay:.2s}.kit .led.l2{animation-delay:.4s}.kit .led.l3{animation-delay:.6s}
@keyframes led{0%,60%{opacity:1}61%,100%{opacity:.15}}
.la .tcell .frm{transition:stroke .2s}
.la .tcell.play .frm{stroke:var(--accent);stroke-width:1.3}
.la .tcell.seen{opacity:.55}
.kit .tcell .frm{transition:stroke .2s}
.kit .tcell path.ln{opacity:.25;transition:opacity .2s}
.kit .tcell.seen path.ln{opacity:.6}
.kit .tcell.play .frm{stroke:var(--accent);stroke-width:1.4}
.kit .tcell.play path.ln{opacity:1}
.kit .wavearc{opacity:0;animation:wave 2.4s ease-out infinite}
.kit .wavearc.a1{animation-delay:.4s}.kit .wavearc.a2{animation-delay:.8s}
@keyframes wave{0%{opacity:0}20%{opacity:.8}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .fs-rays,.hero-grain,.la .orbit,.la .march,.birds,.la .wave,.la .glint,.la .ripple,.la .win,.logowall .lw,.pg-flow .loop,.pg-flow .tline,.kit .tline,.anchor-ring,.dv-media img,.reel-sound,.rs-ico i{animation:none}
}

/* ================= HAIRLINE FIGURES (How we work, Philosophy) ================= */
.lx .la{height:auto}
.lx-wide{max-width:900px;margin:var(--s3) auto 0}
.lx-budget{max-width:900px;margin:var(--s2) 0}
.la.hair path,.la.hair circle,.la.hair ellipse{stroke-width:.55}
.la.hair .thin{stroke-width:.45}
.la .hollow{fill:none;stroke:var(--ink);stroke-width:.6;transition:cx 1s var(--ease),cy 1s var(--ease)}
.la .hollow.fade{animation:ghostOut 1.4s ease-out forwards}
.la text.hl{font-family:var(--sans);font-size:9.5px;letter-spacing:.12em;fill:var(--ink)}
.la text.ink{fill:var(--ink)}
.la text.acc-t{fill:var(--accent)}
.la .dash{stroke-dasharray:3 4}
.la .march{animation:march 1.6s linear infinite}
@keyframes march{to{stroke-dashoffset:-14}}
.la .orbit{transform-box:view-box;animation:spin 14s linear infinite}
[data-anim=flow] .orbit{transform-origin:340px 168px}
.asterisk .orbit{transform-origin:50px 50px;animation-duration:10s}
.asterisk .spokes{transform-box:view-box;transform-origin:50px 50px;animation:spin 40s linear infinite reverse}
.asterisk{animation:spin 48s linear infinite}
.la .typing path{stroke-dasharray:100;stroke-dashoffset:100;animation:typeHair 4.8s steps(10) infinite;animation-delay:calc(var(--i,0) * .35s)}
@keyframes typeHair{0%{stroke-dashoffset:100}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
.la .pulse-ring{fill:none;stroke:var(--accent);stroke-width:.8;transform-box:fill-box;transform-origin:center;animation:ring 3.2s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(4.6);opacity:0}}
.la .cell{transition:fill .15s}
.la .cell{opacity:.35}
.la .cell.gen{opacity:1;stroke:var(--ink)}
.la .cell.use{stroke:var(--accent);stroke-width:1.2}
.lx-fig{margin:0}
.eqs .lx-fig,.ratios .lx-fig{margin:6px 0 10px}
/* the Mona Lisa beside its words */
.bay.mona{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s4);align-items:center}
.bay.mona .pixfig{margin:0;justify-self:center}

/* ================= CAPABILITIES page: one row of the six ================= */
.jcaps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:0 var(--gut)}
.jcaps .jitem{
  display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:0;border-radius:6px;cursor:pointer;min-width:0;
  background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong);text-align:left;
  font:500 13.5px/1.1 var(--sans);letter-spacing:-.01em;transition:box-shadow .2s,color .2s,background .2s;
}
.jcaps .jitem em{font:400 10.5px/1 var(--mono);font-style:normal;color:var(--muted)}
.jcaps .jitem b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jcaps .jitem svg{width:11px;height:11px;margin-left:auto;flex:none;color:var(--muted)}
.jcaps .jitem:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 7%, transparent)}
.jump{position:sticky;top:58px;z-index:30;padding:10px 0;background:color-mix(in srgb, var(--paper) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0}

/* ================= SMALL SCREENS ================= */
@media (max-width:899px){
  .fx-split,.wk-head,.fx-core-text{grid-template-columns:1fr}
  .tri,.tri.duo2,.fx-directed{grid-template-columns:1fr;gap:var(--s4)}
  .jcaps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dir-art{justify-self:stretch;max-width:none}
  .bay.mona{grid-template-columns:1fr}
  .mf-grid{grid-template-columns:1fr}
  .dv-grid{grid-template-columns:1fr}
}
@media (max-width:759px){
  .fx-hero{aspect-ratio:auto;min-height:70svh}
  .fx-tabs{grid-template-columns:1fr}
  .fx-tab + .fx-tab{border-left:0;border-top:1px solid var(--ink)}
  .jump{position:static}
  .hero-in{padding:var(--s3) var(--s2) var(--s3)}
  .fx-tab{height:44px}
  .sound-tag{right:10px;bottom:10px}
  .wk-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fx-meta span{display:none}
}

/* Capabilities opens straight into the categories: no rule under the intro */
#view-work > .hero2{border-bottom:0}


/* ================= SIDE MENU (wide screens): the bar stands on the left ================= */
@media (min-width:1081px){
  /* menu and content sit together as one centred block: the menu is the
     block's left column, the page runs straight on from its right edge */
  :root{
    --side:236px;
    --wrap:min(calc(100vw - 2 * var(--gut)), 1720px);
    --edge:calc((100vw - var(--wrap)) / 2);
  }
  body{padding-left:calc(var(--edge) + var(--side));padding-right:var(--edge)}
  .frame{padding-left:0;padding-right:0}
  .sheet{max-width:none;margin:0}
  .topbar{
    position:fixed;top:0;bottom:0;left:var(--edge);width:var(--side);margin:0;
    padding:10px 0;display:flex;flex-direction:column;background:transparent;
  }
  .tb-row{flex-direction:column;align-items:stretch;min-height:0}
  .tb-brand{flex:none;min-height:56px;padding:0 16px}
  .tb-nav{flex-direction:column;order:0;flex-basis:auto;border-top:0;overflow:visible}
  .tb-link,.tb-cta,.tb-switch{border-left:0;border-top:1px solid var(--ink);min-height:48px;padding:0 16px}
  .tb-sub{flex-direction:column;gap:10px;padding:14px 16px;max-height:none;font-size:10.5px;line-height:1.5}
  .topbar.scrolled .tb-sub{max-height:none;padding:14px 16px;opacity:1;border-bottom-width:1px}
  .tb-sub a{align-self:flex-start;word-break:break-all}
  :root{--sheet-inset:0px}
  .sec-head,[id^="s-"],#s04,#h-next{scroll-margin-top:20px}
  .jump{top:0}
}
@media (min-width:1081px) and (max-width:1180px){
  .tb-nav{flex-basis:auto}
  .tb-link{padding:0 16px}
}

/* ================= SQUARE CONTROLS: every button squared off like the menu;
   videos keep their rounded corners ================= */
button:not(.wk-tile),.chip,.btn-accent,.fx-tabs,.bb-switch,.bb-opt,.sound-tag,.mfbtn,.bk-day,.bk-slot,.bk-nav,
.ff input,.ff textarea,.tb-row,.tb-sub{border-radius:0!important}
.bb-switch{padding:0;gap:0;background:transparent;border:1px solid #fff}
.bb-opt{height:44px}
.bb-opt + .bb-opt{border-left:1px solid #fff}
.btn-accent{box-shadow:none;border:1px solid var(--accent)}
.sound-tag{border:1px solid rgba(255,255,255,.35)}
.chip{box-shadow:inset 0 0 0 1px var(--ink);background:transparent}
.chip:hover{background:var(--chip)}

/* the hero is locked to 16:9, so its words scale with the box, not the window */
.fx-hero{container-type:inline-size}
.hero-in{padding:5.5cqw 6cqw!important;justify-content:flex-end}
.hero-bottom{padding-top:0}
.fx-h1{font-size:clamp(30px,8.6cqw,112px)}
.fx-lead{font-size:clamp(14px,1.9cqw,22px);margin-top:2.4cqw}
.btn-accent{margin-top:3cqw}
@media (max-width:759px){ .fx-hero{aspect-ratio:auto;min-height:70svh} .fx-h1{font-size:clamp(34px,11cqw,60px)} .fx-lead{font-size:16px} }


/* the name and mark sit centred in their cell */
.tb-brand{justify-content:center}
@media (min-width:1081px){ .tb-brand{padding:0 12px} }

/* the page in one thin outline, with open space between it and the menu */
main{margin-top:10px;margin-bottom:10px}
@media (min-width:1081px){ body{padding-left:calc(var(--edge) + var(--side) + 18px)} }
@media (max-width:1080px){ main{margin-left:var(--gut);margin-right:var(--gut)} }

/* ================= STUDIO SWITCH above the hero ================= */
.studio-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:var(--gut) var(--gut) 0;border:1px solid var(--ink)}
.st-big{
  display:flex;align-items:center;gap:14px;height:clamp(56px,6vw,84px);padding:0 22px;border:0;background:transparent;
  color:var(--ink);cursor:pointer;text-align:left;font:500 clamp(22px,2.6vw,40px)/1 var(--sans);letter-spacing:-.04em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.st-big + .st-big{border-left:1px solid var(--ink)}
.st-big kbd{font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--muted);align-self:flex-start;margin-top:18px}
.st-big:hover{background:var(--chip)}
.st-big[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.st-big[aria-selected="true"] kbd{color:var(--accent-hi)}
.studio-tabs + .fx-hero{margin-top:10px}
.hero-local{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.hero-bg.use-local .hero-local{opacity:1}
.hero-bg.use-local iframe{opacity:0}
.fx-hero.swap .hero-bottom > *{animation:fxIn .6s var(--ease) both}
@media (max-width:620px){ .st-big{padding:0 8px;gap:0;justify-content:center;font-size:clamp(11px,3.4vw,15px);letter-spacing:-.02em;height:48px;min-width:0;overflow:hidden} .st-big kbd{display:none} }

/* ================= FILMS: hard edges; each one in a ruled box with a
   hairline right on the picture's edge and a caption row under it.
   (the six category thumbnails keep their rounded corners) ================= */
.fx-hero,.core-slot,.wk-main,.dv-media,.reelmedia,.lb-frame,.lb-media{border-radius:0!important}
.film{border:1px solid var(--ink);padding:clamp(14px,1.8vw,26px) clamp(14px,1.8vw,26px) 0;background:transparent}
.film > .fx-hero,.film .core-slot,.film > .wk-main,.dv-media,.pwreel .reelmedia{
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent);
}
.film-cap{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:clamp(12px,1.2vw,16px) 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.film-cap a,.film-cap .sound-tag{
  position:static;display:inline-flex;align-items:center;gap:6px;height:auto;padding:0 0 2px;border:0;border-bottom:1px solid currentColor;
  background:transparent;color:var(--accent);font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;cursor:pointer;
}
.film-cap a:hover,.film-cap .sound-tag:hover{color:var(--accent-hi);background:transparent}
.film-cap .sound-tag.on{color:var(--ink)}
/* everything in a section shares the section's two edges */
.film-hero{margin:18px var(--gut) 0}
.film-hero > .fx-hero{margin:0}
.studio-tabs{margin:var(--gut) var(--gut) 0}
.core-body{padding-top:0}
.fx-tabs,.wk-row{margin-bottom:12px}
/* capabilities reels and the in-development films get the same box */
main .pwsec .pwreel{border:1px solid var(--ink);padding:clamp(14px,1.8vw,26px);margin-left:var(--gut);margin-right:var(--gut)}
.dv-item{border:1px solid var(--ink);padding:clamp(14px,1.8vw,22px) clamp(14px,1.8vw,22px) 0}
.dv-item figcaption{border-bottom:0}
.dv-grid{column-gap:var(--s3);row-gap:var(--s3)}
/* studio names centred in their cells */
.st-big{position:relative;justify-content:center;text-align:center}
.st-big kbd{position:absolute;top:12px;left:14px;margin:0}
.film,main .pwsec .pwreel,.dv-item{border-bottom:1px solid var(--ink)!important}
main .pwsec .pwreel{background:transparent}
/* no box round the films: the picture itself runs edge to edge with the
   menu above it, caption underneath */
.film,main .pwsec .pwreel,.dv-item{border:0!important;padding:0!important}
.film-cap{padding-left:0;padding-right:0}
/* the page starts on the same line as the menu */
.studio-tabs{margin-top:0}
@media (min-width:1081px){ #view-home > .studio-tabs{margin-top:0} main{margin-top:10px} }
/* the line on each picture's edge: same weight and colour as the menu's */
.film > .fx-hero,.film .core-slot,.film > .wk-main,.dv-media,.pwreel .reelmedia{box-shadow:0 0 0 1px var(--ink)}
/* breathing room above the menu and the page, both starting on one line */
@media (min-width:1081px){ .topbar{padding-top:36px} main{margin-top:36px} }
@media (max-width:1080px){ .topbar{padding-top:22px} }


/* ================= BACKDROP: the Stylised fiction reel behind the site ================= */
body{background:#0A0A0A!important}
.site-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#0A0A0A}
.site-bg iframe{
  position:absolute;left:50%;top:50%;border:0;
  width:max(100vw, 177.78vh);height:max(100vh, 56.25vw);
  transform:translate(-50%,-50%) scale(1.2);filter:blur(44px);opacity:0;transition:opacity 1.2s ease;
}
.site-bg.live iframe{opacity:1}
.site-bg{filter:none}
.site-bg::before{content:"";position:absolute;inset:-100px;background:#0A0A0A center/cover no-repeat url("img/reel-still.jpg");filter:blur(44px)}

.site-bg-veil{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.site-bg-grain{
  position:absolute;inset:-50%;z-index:3;opacity:.75;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:220px 220px;animation:grain .5s steps(6) infinite;
}
.site-bg-veil{z-index:2}
/* the page and the menu stay on solid paper over it */
main{background:var(--paper)}
.topbar{background:transparent!important}
@media (max-width:1080px){ .topbar{background:transparent!important} }
@media (prefers-reduced-motion: reduce){ .site-bg-grain{animation:none} }
.site-bg iframe{z-index:0}
.site-bg::before{z-index:0}

.site-bg canvas{
  position:absolute;left:50%;top:50%;z-index:0;width:max(100vw, 177.78vh);height:max(100vh, 56.25vw);
  transform:translate(-50%,-50%) scale(1.2);filter:blur(44px);opacity:0;transition:opacity .6s ease;
}
.site-bg.use-canvas canvas{opacity:1}
.site-bg.use-canvas iframe{opacity:0!important}

/* the backdrop runs right up to the top film: the paper only starts under it,
   and everything on the paper sits flush with the film's edges */
@media (min-width:1081px){
  /* the top film and its buttons run edge to edge; everything else keeps its gutter */
  .block-open > .studio-tabs,.block-open > .film-hero{margin-left:0;margin-right:0}
  .film-hero .film-cap{padding-left:var(--gut)!important;padding-right:var(--gut)!important}
  #view-home{background:linear-gradient(transparent 0, transparent var(--hero-end,0px), var(--paper) var(--hero-end,0px))}
  .film-hero .film-cap{background:var(--paper);padding-left:0;padding-right:0}
}
.studio-tabs{background:var(--paper)}
.st-big:not([aria-selected="true"]){background:var(--paper)}
.st-big:not([aria-selected="true"]):hover{background:color-mix(in srgb, var(--paper) 92%, var(--ink))}

/* backdrop is now a local loop */
.site-bg{background:#2A0B45}
.site-bg::before{display:none}
.site-bg video{
  position:absolute;left:50%;top:50%;z-index:0;width:max(100vw, 177.78vh);height:max(100vh, 56.25vw);
  transform:translate(-50%,-50%) scale(1.2);filter:blur(44px);object-fit:cover;opacity:0;transition:opacity 1s ease;
}
.site-bg.live video{opacity:1}
.site-bg-veil{background:rgba(0,0,0,.5)!important}
.site-bg{background:#2A0B45 center/cover no-repeat url("img/bg-loop.jpg")}
.site-bg{background:#2A0B45}
.site-bg::before{display:block;content:"";position:absolute;inset:-100px;z-index:0;background:#2A0B45 center/cover no-repeat url("img/bg-loop.jpg");filter:blur(44px)}
/* backdrop in black and white */
.site-bg video,.site-bg::before{filter:blur(44px) grayscale(1)}
.site-bg{background:#1A1A1A}
/* backdrop tinted to one colour: the moving loop only supplies light and
   shade, and the colour layer turns every shade into a tone of #DFFD2C */
.site-bg{background:#DFFD2C}
.site-bg video,.site-bg::before{filter:blur(44px) grayscale(1) brightness(2.6) contrast(.55)}
.site-bg-veil{background:#DFFD2C!important;mix-blend-mode:multiply}

/* ================= BACKGROUND: black, with the bat as an all-over monogram ================= */
.site-bg{display:none!important}
body{background:#0A0A0A!important}
body::before,body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:#fff;opacity:.075;
  -webkit-mask:var(--bat) 0 0/38px auto repeat;mask:var(--bat) 0 0/38px auto repeat;
  -webkit-mask-size:38px 28px;mask-size:38px 28px;
  -webkit-mask-repeat:space;mask-repeat:space;
}
/* staggered rows, the way a monogram print sits */
body::before{-webkit-mask-size:38px 28px;-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-position:0 0;mask-position:0 0;
  -webkit-mask-image:var(--bat);mask-image:var(--bat);
  -webkit-mask-size:38px 28px;mask-size:38px 28px;
  -webkit-mask-origin:border-box;
}
body::before{-webkit-mask:none;mask:none;
  background:none;opacity:1;
  background-image:url("img/bat-tile.svg");background-size:112px 84px;
}
body::after{display:none}

/* ================= HERO: gap under it, smaller headline, bigger button ================= */
@media (min-width:1081px){
  #view-home{background:linear-gradient(transparent 0, transparent calc(var(--hero-end,0px) + 18px), var(--paper) calc(var(--hero-end,0px) + 18px))!important}
  #view-home > .film-hero + .sec-head{margin-top:calc(18px + var(--s4))}
}
.fx-h1{font-size:clamp(28px,6.2cqw,84px)!important}
.btn-accent{height:clamp(52px,4.6cqw,64px);padding:0 clamp(24px,2.4cqw,34px);font-size:clamp(13px,1.2cqw,15px);gap:14px}
.ba-play{border-left-width:11px;border-top-width:6.5px;border-bottom-width:6.5px}

/* ================= BACKGROUND: the looping clip again, full colour, blurred + grained ================= */
body::before,body::after{display:none!important;content:none!important}
.site-bg{display:block!important;background:#120A1E}
.site-bg video,.site-bg::before{filter:blur(44px)!important}
.site-bg::before{background:#120A1E center/cover no-repeat url("img/bg-loop.jpg")}
.site-bg-veil{background:rgba(0,0,0,.3)!important;mix-blend-mode:normal!important}

/* ================= BACKGROUND: one still, blurred and grained ================= */
body{background:#1A1030!important}
body::before{
  display:block!important;content:""!important;position:fixed;inset:-100px;z-index:-2;pointer-events:none;
  background:#1A1030 center/cover no-repeat url("img/bg-still.jpg?v=2")!important;
  -webkit-mask:none!important;mask:none!important;opacity:1!important;filter:blur(44px);
}
body::after{
  display:block!important;content:""!important;position:fixed;inset:-50%;z-index:-1;pointer-events:none;
  -webkit-mask:none!important;mask:none!important;background:none;opacity:.34!important;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E")!important;
  background-size:220px 220px;animation:grain .5s steps(6) infinite;
}
.site-bg{display:none!important}
/* ================= BACKGROUND: pure white, a step brighter than the paper (#F3F3F0) ================= */
body{background:#000000!important}
body::before{display:none!important;content:none!important}
body::after{display:none!important;content:none!important}
.site-bg{display:none!important}

/* ================= BLOCKS: every part of every page in its own thin-ruled
   box, with the background showing in the gap between them ================= */
main,#view-home{background:none!important}
.block,.pw-blocks > .pwsec{
  position:relative;background:var(--paper);border:1px solid var(--ink);
  margin:0 0 18px;padding:var(--s3) 0 var(--s4);
}
.block-open{background:none;border:0;padding:0}
.block-open > .studio-tabs{margin-top:0}
.block > .sec-head:first-child,.pw-blocks > .pwsec > .sec-head:first-child{margin-top:0}
.block > :last-child{margin-bottom:0}
.block-foot{padding:0}
.block-foot > .sitefoot{margin-top:0;border-top:0}
.pw-blocks{display:block}
/* the booking block and the purple contact band sit inside their block */
.block .bookblock{margin-bottom:0}
@media (max-width:1080px){ main{margin-left:var(--gut);margin-right:var(--gut)} }

/* hero: two calls side by side, the second outlined only */
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:3cqw}
.hero-ctas .btn-accent{margin-top:0}
.btn-ghost{
  display:inline-flex;align-items:center;height:clamp(52px,4.6cqw,64px);padding:0 clamp(24px,2.4cqw,34px);
  border:1.5px solid var(--accent);background:transparent;color:#fff;text-decoration:none;
  font:600 clamp(13px,1.2cqw,15px)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.btn-ghost:hover{background:color-mix(in srgb, var(--accent) 22%, transparent)}

/* Book a video call: white outline */
.btn-ghost{border-color:#FFFFFF!important}
.btn-ghost:hover{background:rgba(255,255,255,.12)!important}

/* ================= BOOKING: the whole box black, white type, purple details ================= */
.block:has(.bookblock){
  background:#0B0B0C;
  --ink:#FFFFFF; --paper:#0B0B0C; --muted:rgba(255,255,255,.6); --rule:rgba(255,255,255,.22); --rule-strong:rgba(255,255,255,.35);
  color:#fff;
}
.block:has(.bookblock) .sec-num,.block:has(.bookblock) .sec-count{color:rgba(255,255,255,.55)}
.bookblock{
  background:#0B0B0C!important;color:#fff;
  --ink:#FFFFFF; --paper:#0B0B0C; --signal:var(--accent-hi); --on-signal:#fff; --g-on-dark:#fff;
}
.bb-head h2 span,.bb-head h2 em{color:var(--accent-hi)}
.bb-switch{border-color:rgba(255,255,255,.4)!important;background:transparent!important}
.bb-opt{color:#fff}
.bb-opt + .bb-opt{border-left-color:rgba(255,255,255,.4)!important}
.bb-opt[aria-selected="true"]{background:var(--accent)!important;color:#fff!important}
.bookblock .tlab{color:var(--accent-hi)!important}
.bookblock .bk-day.on,.bookblock .bk-slot.on{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.bookblock .bk-day:not(.off):not(.on):hover,.bookblock .bk-slot:hover{border-color:var(--accent-hi)!important;background:transparent;color:#fff}
.bookblock .bk-nav{border-color:rgba(255,255,255,.35);color:#fff}
.bookblock .bk-nav:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}
.bookblock .bk-chosen.set{color:var(--accent-hi)}
.bookblock .ff input,.bookblock .ff textarea,.mailform .ff input,.mailform .ff textarea{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.25)!important;color:#fff!important}
.bookblock .ff input:focus,.bookblock .ff textarea:focus,.mailform .ff input:focus,.mailform .ff textarea:focus{outline:1.5px solid var(--accent-hi)!important;outline-offset:-1px}
.bookblock .mfbtn,.mailform .mfbtn{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.bookblock .mfbtn:hover,.mailform .mfbtn:hover{background:var(--accent-hi)!important;border-color:var(--accent-hi)!important}
.bb-mail a{color:var(--accent-hi)!important;border-bottom-color:var(--accent-hi)!important}

/* ================= BOOKING BLOCK (every page): light pastel purple, black type ================= */
.block:has(.bookblock){
  background:#DFFD2C!important;color:#111;
  --ink:#111111; --paper:#DFFD2C; --muted:rgba(17,17,17,.6); --rule:rgba(17,17,17,.18); --rule-strong:rgba(17,17,17,.3);
  border-color:#111!important;
}
.block:has(.bookblock) .sec-num,.block:has(.bookblock) .sec-count{color:rgba(17,17,17,.55)}
.bookblock{
  background:#DFFD2C!important;color:#111!important;
  --ink:#111111; --paper:#DFFD2C; --muted:rgba(17,17,17,.6); --rule:rgba(17,17,17,.18); --rule-strong:rgba(17,17,17,.3);
  --signal:var(--accent); --on-signal:#fff; --g-on-dark:#fff;
}
.bb-head h2,.bb-head p{color:#111!important}
.bb-switch{border-color:#111!important}
.bb-opt{color:#111!important}
.bb-opt + .bb-opt{border-left-color:#111!important}
.bb-opt[aria-selected="true"]{background:var(--accent)!important;color:#fff!important}
.bb-opt:hover{background:rgba(17,17,17,.06)}
.bookblock .tlab{color:var(--accent)!important}
.bookblock .bk-month,.bookblock .bk-day,.bookblock .bk-slot{color:#111}
.bookblock .bk-day:not(.off):not(.on){border-color:rgba(17,17,17,.35)!important}
.bookblock .bk-day:not(.off):not(.on):hover,.bookblock .bk-slot:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:transparent}
.bookblock .bk-nav{border-color:rgba(17,17,17,.35)!important;color:#111!important}
.bookblock .bk-nav:hover:not(:disabled){background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.bookblock .ff label{color:rgba(17,17,17,.65)}
.bookblock .ff input,.bookblock .ff textarea,.mailform .ff input,.mailform .ff textarea{background:rgba(255,255,255,.55)!important;border-color:rgba(17,17,17,.25)!important;color:#111!important}
.bookblock .ff input::placeholder,.bookblock .ff textarea::placeholder{color:rgba(17,17,17,.4)!important}
.bookblock .bk-note,.bookblock .bk-chosen,.bookblock .mf-to,.bookblock .mfnote{color:rgba(17,17,17,.6)}
.bookblock .bk-chosen.set{color:var(--accent)}
.bb-mail{color:rgba(17,17,17,.65)!important}
.bb-mail a{color:var(--accent)!important;border-bottom-color:var(--accent)!important}
.bookblock .mfnote.ok{color:#111}

/* menu: Book a video call in lime */
.tb-cta.tb-lime{background:#DFFD2C!important;color:#111!important}
.tb-cta.tb-lime:hover{background:#D2F01C!important}
.tb-cta.tb-lime[aria-current="page"]{background:#111!important;color:#DFFD2C!important}

/* menu: slim background colour picker */
.foot-picker{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border-top:1px solid var(--ink);cursor:pointer;background:var(--paper)}
.foot-picker .mono{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:1}
.foot-picker input[type=color]{-webkit-appearance:none;appearance:none;width:44px;height:16px;padding:0;border:1px solid var(--ink);background:none;cursor:pointer}
.foot-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.foot-picker input[type=color]::-webkit-color-swatch{border:0}
.foot-picker input[type=color]::-moz-color-swatch{border:0}
.tb-pick-reset{border:0;background:none;padding:0;font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-decoration:underline;cursor:pointer}
.tb-pick-reset:hover{color:var(--ink)}
@media (max-width:1080px){ .foot-picker{display:none} }

.foot-picker{border-top:0;min-height:0;padding:0;background:none;flex:none;gap:8px}
.foot-picker .mono{flex:none}
.fbase{align-items:center;gap:16px}

/* 02 our fields: words only, filling the block */
.fx-core .fx-core-text{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s3) var(--s5);align-items:end;padding-top:var(--s4);min-height:clamp(240px,26vw,420px)}
.fx-core .fx-core-h{font-size:clamp(40px,5.6vw,92px);line-height:.95;letter-spacing:-.05em}
.fx-core .fx-core-p{font-size:clamp(17px,1.55vw,24px);line-height:1.4;letter-spacing:-.01em;max-width:none}
@media (max-width:899px){ .fx-core .fx-core-text{grid-template-columns:1fr;min-height:0} }

/* ================= BUDGET on Studio: words left, drawing right, no tail ================= */
.block-budget{padding-bottom:var(--s3)}
.block-budget .bay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s4);align-items:center;padding-bottom:0}
.block-budget .bay > .claim,.block-budget .bay > .lede{grid-column:1}
.block-budget .bay > .budget{grid-column:2;grid-row:1 / span 3;margin:0}
.block-budget .claim{font-size:clamp(28px,3.2vw,48px)!important}
.block-budget .lx-budget{margin:0;max-width:none}
.block-budget .bnote{margin-top:10px}
@media (max-width:899px){ .block-budget .bay{grid-template-columns:1fr} .block-budget .bay > .budget{grid-column:1;grid-row:auto} }

/* ================= OTHER page: the three fields, stacked ================= */
.o-fields{display:flex;flex-direction:column;gap:0}
.o-fields .fx-core-text{min-height:0!important;padding:var(--s3) 0;border-bottom:1px solid var(--rule);align-items:start!important}
.o-fields .fx-core-text:last-child{border-bottom:0}
.o-fields .fx-core-h{font-size:clamp(28px,3.4vw,52px)!important}
.o-fields .fx-core-p{font-size:clamp(15px,1.2vw,18px)!important}
.o-n{display:block;font-size:11px;letter-spacing:.08em;color:var(--accent);margin-bottom:10px}

/* ================= BLACK SURROUND; selected states dark grey with an off-white edge ================= */
.st-big[aria-selected="true"],.tb-link[aria-current="page"]{
  background:#2A2A2A!important;color:#F1F1EE!important;box-shadow:inset 0 0 0 1.5px #F1F1EE;
}
.st-big[aria-selected="true"] kbd{color:var(--accent-hi)!important}
.tb-cta.tb-lime[aria-current="page"]{background:#2A2A2A!important;color:#DFFD2C!important;box-shadow:inset 0 0 0 1.5px #F1F1EE}
.block-budget .bay{grid-template-rows:auto auto 1fr;align-items:start;row-gap:var(--s2)}
.block-budget .bay > .budget{align-self:center}