/* ==========================================================================
   Animedia.ai, brand system 2026.
   Shared by every page, both languages. Tokens live in :root.
   ========================================================================== */
:root{
  --paper:#f7f5f3;
  --paper-2:#fffefd;
  --lilac:#ece6f4;

  --orange:#fba752;
  --red:#ff003a;
  --cherry:#f20055;
  /* The brand red, darkened just enough to carry small text on paper. */
  --red-ink:#c8002e;
  --navy:#2e005a;

  --ink:#2e005a;
  --ink-2:rgba(46,0,90,.60);
  --ink-3:rgba(46,0,90,.34);
  --line:rgba(46,0,90,.10);
  --line-2:rgba(46,0,90,.18);

  --grad:linear-gradient(100deg,var(--orange),var(--red));
  --grad-2:linear-gradient(100deg,var(--cherry),var(--navy));

  --font:"Heebo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gutter:clamp(20px,5vw,64px);
  --max:1280px;

  /* Soft ease in and out. Never abrupt. */
  --ease:cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* Overshoot for weight, the squash and stretch curve */
  --ease-back:cubic-bezier(.34,1.7,.5,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.02}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,140px);position:relative}

/* soft lilac wash, the book's page background */
.wash{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48% 42% at 8% 4%,rgba(210,196,232,.55),transparent 62%),
    radial-gradient(42% 40% at 96% 22%,rgba(255,196,178,.34),transparent 60%),
    radial-gradient(50% 45% at 78% 96%,rgba(214,199,236,.46),transparent 64%);}
.grid-lines{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:120px 120px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 75%);}

/* ---------- labels ---------- */
.label{font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:12px}
.label::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:60;padding-block:16px;
  background:rgba(247,245,243,.78);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:11px}
.logo__img{height:26px;width:auto}
.logo b{font-weight:800;font-size:19px;letter-spacing:-.03em}
.logo b i{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.nav{display:flex;gap:2px}
.nav a{padding:8px 14px;border-radius:100px;font-size:14.5px;font-weight:500;color:var(--ink-2);
  transition:color .3s var(--ease),background .3s var(--ease)}
.nav a:hover{color:var(--ink);background:rgba(46,0,90,.06)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:100px;
  font-weight:500;font-size:15px;
  transition:transform .45s var(--ease-back),box-shadow .35s var(--ease),background .3s}
.btn svg{width:15px;height:15px;transition:transform .4s var(--ease-back)}
.btn:hover{transform:translateY(-3px)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(1.04,.94)}
.btn--fill{background:var(--grad);color:#fff;box-shadow:0 10px 26px -10px rgba(255,0,58,.6)}
.btn--fill:hover{box-shadow:0 18px 36px -12px rgba(255,0,58,.66)}
.btn--line{border:1.5px solid var(--line-2);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}

/* ---------- ambient brand marks ----------
   The book's own website mockup sits the A behind the hero inside a pale disc,
   with paths threading past it. Everything here is decorative and inert. */
.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ambient>*{position:absolute}
.disc{border-radius:50%;background:radial-gradient(circle at 34% 30%,
  rgba(255,255,255,.9),rgba(255,255,255,0) 68%);
  box-shadow:inset 0 0 0 1px rgba(46,0,90,.05)}
.watermark{opacity:.10;filter:saturate(1.1)}
.watermark--soft{opacity:.055}
.bead{border-radius:50%}
.bead--o{background:radial-gradient(circle at 34% 30%,#ffd9a8,#fba752 62%,#e08a2e)}
.bead--r{background:radial-gradient(circle at 34% 30%,#ff8aa3,#ff003a 62%,#c40030)}
.bead--n{background:radial-gradient(circle at 34% 30%,#8b6fb0,#2e005a 62%,#1b0035)}

.hero{position:relative;padding-block:clamp(60px,9vw,110px) clamp(70px,9vw,120px);overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.7rem,8.4vw,7rem);line-height:.94;letter-spacing:-.035em}
.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.hero .lede{font-size:clamp(1.02rem,1.45vw,1.24rem);color:var(--ink-2);max-width:56ch;
  margin-top:26px;line-height:1.62}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:36px}

/* the mark, drawn on once */
.markbox{width:clamp(74px,9vw,116px);margin-bottom:clamp(24px,3vw,38px)}
.markbox img{clip-path:inset(0 0 100% 0)}
.markbox.draw img{animation:drawA .95s var(--ease) forwards}
@keyframes drawA{to{clip-path:inset(0 0 0 0)}}

/* onion skin reveal */
.onion{position:relative;display:block}
.onion .g{position:absolute;inset:0;pointer-events:none}
.onion .g:nth-child(1){color:var(--cherry);opacity:.20}
.onion .g:nth-child(2){color:var(--orange);opacity:.14}
.reveal .onion>*{animation:onionIn .6s var(--ease-out) both}
.reveal .onion .g:nth-child(1){animation-name:onionG1;animation-delay:.10s}
.reveal .onion .g:nth-child(2){animation-name:onionG2;animation-delay:.05s}
.reveal .onion>*:last-child{animation-delay:.15s}
@keyframes onionIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Each ghost lands back on the opacity it is supposed to hold, not on 1. */
@keyframes onionG1{from{opacity:0;transform:translateY(22px)}to{opacity:.20;transform:none}}
@keyframes onionG2{from{opacity:0;transform:translateY(22px)}to{opacity:.14;transform:none}}

/* ---------- the path system ---------- */
.pathwrap{position:relative;margin-top:clamp(40px,6vw,72px)}
.pathwrap svg{width:100%;height:auto;overflow:visible}
.flow{fill:none;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400}
.reveal .flow{animation:drawFlow 2.1s var(--ease) forwards}
@keyframes drawFlow{to{stroke-dashoffset:0}}
.node{opacity:0}
.reveal .node{animation:nodeIn .45s var(--ease-back) forwards}
.reveal .node--1{animation-delay:.75s}
.reveal .node--2{animation-delay:1.25s}
.reveal .node--3{animation-delay:1.75s}
@keyframes nodeIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.pathcap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);
  margin-top:34px}
.pathcap h3{font-size:1.02rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  margin-bottom:7px}
.pathcap p{font-size:14.5px;color:var(--ink-2)}
.pathcap .n{font-size:12px;font-weight:500;letter-spacing:.16em;margin-bottom:12px;display:block}
.pathcap div:nth-child(1) .n{color:var(--navy)}
.pathcap div:nth-child(2) .n{color:var(--orange)}
.pathcap div:nth-child(3) .n{color:var(--red)}

/* ---------- showreels, the first thing under the headline ---------- */
.reels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.reel{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;
  background:var(--navy);display:flex;align-items:flex-end;
  padding:clamp(20px,2.4vw,32px);cursor:pointer;
  transition:transform .5s var(--ease-back),box-shadow .45s var(--ease)}
.reel:hover{transform:translateY(-7px);box-shadow:0 30px 60px -30px rgba(46,0,90,.5)}
.reel:active{transform:translateY(1px) scale(1.01,.985)}
.reel--ai{background:linear-gradient(140deg,#3d0072,#2e005a 55%,#7a0038)}
/* On its own under the band, the studio reel is a wide panel rather than a
   16:9 card, so it sits beside the band without competing with it. */
.reel--wide{aspect-ratio:auto;min-height:clamp(160px,17vw,230px);
  align-items:flex-end}
.reel--wide .reel__bg img{width:26%;right:2%;top:-30%}
.reel--wide p{max-width:44ch}
.reel__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.reel__bg img{position:absolute;right:-8%;top:-18%;width:52%;opacity:.14}
.reel__in{position:relative;z-index:1;color:#fff;width:100%}
.reel__k{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:8px}
.reel h3{font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.06}
.reel p{color:rgba(255,255,255,.62);font-size:14px;margin-top:8px;max-width:34ch}
.reel__play{position:absolute;top:clamp(20px,2.4vw,32px);
  inset-inline-end:clamp(20px,2.4vw,32px);width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);
  display:grid;place-items:center;backdrop-filter:blur(8px);
  transition:background .35s var(--ease),transform .5s var(--ease-back)}
.reel:hover .reel__play{background:var(--grad);border-color:transparent;transform:scale(1.08)}
.reel__play svg{width:19px;height:19px;fill:#fff;margin-inline-start:3px}
.reel__soon{position:absolute;top:clamp(20px,2.4vw,32px);
  inset-inline-start:clamp(20px,2.4vw,32px);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.22);
  border-radius:100px;padding:5px 12px}

/* ---------- awards ---------- */
.awards{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(24px,3.4vw,54px)}
.awards img{height:clamp(50px,5.4vw,74px);width:auto;object-fit:contain;
  opacity:.5;transition:opacity .35s var(--ease),transform .45s var(--ease-back)}
.awards img:hover{opacity:.9;transform:scale(1.06)}

/* ---------- the fire section ---------- */
.fire{background:var(--navy);border-radius:26px;color:#fff;position:relative;
  overflow:hidden;padding:clamp(38px,5.4vw,84px)}
.fire::after{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,0,58,.5),rgba(251,167,82,.22) 42%,
  transparent 68%);pointer-events:none}
.fire__in{position:relative;z-index:1}
.fire h2{font-size:clamp(1.7rem,3.8vw,3rem);max-width:15ch;line-height:1.06}
.fire .lead{color:rgba(255,255,255,.72);font-size:clamp(1rem,1.4vw,1.18rem);
  max-width:52ch;margin-top:20px}
.fire__quote{font-size:clamp(1.25rem,2.4vw,1.9rem);font-weight:700;line-height:1.22;
  max-width:22ch;margin-top:clamp(30px,4vw,52px);padding-inline-start:24px;
  border-inline-start:3px solid transparent;border-image:var(--grad) 1}
.fire__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);
  margin-top:clamp(34px,4.4vw,60px);padding-top:30px;
  border-top:1px solid rgba(255,255,255,.16)}
.fire__grid h4{font-size:1rem;font-weight:700;margin-bottom:7px}
.fire__grid p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.6}
.fire__grid span{font-size:11px;letter-spacing:.16em;color:var(--orange);
  display:block;margin-bottom:12px}

/* ---------- capabilities, on the book's icon family ---------- */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
.cap{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,2.2vw,30px);transform-origin:bottom center;
  transition:transform .5s var(--ease-back),box-shadow .4s var(--ease),border-color .3s}
.cap:hover{transform:translateY(-7px) scale(1.01,1.02);border-color:transparent;
  box-shadow:0 22px 44px -24px rgba(46,0,90,.36)}
.cap img{height:44px;width:auto;margin-bottom:18px;
  transition:transform .5s var(--ease-back)}
.cap:hover img{transform:scale(1.08) rotate(-3deg)}
.cap h3{font-size:1rem;font-weight:700;margin-bottom:6px}
.cap p{font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* ---------- navy statement panel ---------- */
.slab{background:var(--navy);border-radius:24px;color:#fff;position:relative;
  overflow:hidden;padding:clamp(36px,5vw,72px)}
.slab h2{font-size:clamp(1.6rem,3.4vw,2.6rem);max-width:16ch;line-height:1.08}
.slab p{color:rgba(255,255,255,.66);max-width:46ch;margin-top:18px;font-size:15.5px}
.slab .ambient .watermark{opacity:.13}
.slab__meta{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:34px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:1}
.slab__meta div{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.slab__meta b{display:block;font-size:15px;letter-spacing:0;text-transform:none;
  color:#fff;font-weight:500;margin-top:6px}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,20px)}
.member{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;transition:transform .5s var(--ease-back),box-shadow .4s var(--ease)}
.member:hover{transform:translateY(-7px);box-shadow:0 22px 44px -24px rgba(46,0,90,.34)}
.member__ph{aspect-ratio:4/5.4;background:var(--lilac);display:grid;place-items:center;
  position:relative;overflow:hidden}
.member__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The supplied portraits already sit on the brand's lilac field with paths and
   beads behind them, so they need no framing of their own. */
.member__ph img{transition:transform .8s var(--ease-out)}
.member:hover .member__ph img{transform:scale(1.04)}
.member__b{padding:18px 20px 22px}
.member__r{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);
  margin-bottom:6px}
.member__b h3{font-size:1.05rem;font-weight:700}
.member__b small{color:var(--ink-3);font-size:12.5px}

/* ---------- work ---------- */
.workhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:40px}
.workhead h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.card{position:relative;border-radius:20px;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line);transform-origin:bottom center;
  transition:transform .5s var(--ease-back),box-shadow .45s var(--ease),border-color .3s}
.card:hover{transform:translateY(-9px) scale(1.015,1.02);
  box-shadow:0 26px 50px -26px rgba(46,0,90,.4);border-color:transparent}
.card:active{transform:translateY(1px) scale(1.03,.96)}
.card--wide{grid-column:span 2}
.card__img{aspect-ratio:16/10;overflow:hidden;background:var(--lilac)}
.card--wide .card__img{aspect-ratio:32/10}
.card__img img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out)}
.card:hover .card__img img{transform:scale(1.045)}
.card__body{padding:20px 22px 24px}
.card__c{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:7px}
.card__t{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.dot{width:7px;height:7px;border-radius:50%;background:var(--grad);display:inline-block;
  margin-left:8px;vertical-align:middle;
  transform:scale(0);transition:transform .4s var(--ease-back)}
.card:hover .dot{transform:scale(1)}

/* ---------- exposure sheet ---------- */
.xsheet{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper-2)}
.xrow{display:grid;grid-template-columns:74px 30px 1fr;align-items:center;
  border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.xrow:last-child{border-bottom:0}
.xrow:hover{background:rgba(46,0,90,.035)}
.xf{font-size:11.5px;font-weight:500;letter-spacing:.1em;color:var(--ink-3);
  padding:16px 0 16px 20px}
.xk{display:flex;justify-content:center}
.xk i{width:10px;height:10px;background:var(--grad);transform:rotate(45deg);border-radius:2px;
  display:block}
.xk i.hold{background:none;border:1.5px solid var(--ink-3);border-radius:50%;transform:none}
.xt{padding:16px 20px 16px 14px;font-size:15px;font-weight:500}
.xt small{display:block;font-size:13px;font-weight:400;color:var(--ink-2);margin-top:2px}

/* ---------- boil, one element only ---------- */
.boil{filter:url(#boil)}

/* ---------- clients ---------- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding-block:30px;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq__t{display:flex;gap:clamp(30px,4vw,58px);width:max-content;align-items:center;
  animation:marq 46s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq img{height:clamp(26px,2.8vw,38px);width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.42;transition:opacity .35s var(--ease),filter .35s var(--ease)}
.marq img:hover{opacity:1;filter:none}

/* ---------- closing ---------- */
.close{text-align:center;padding-block:clamp(80px,11vw,150px)}
.close h2{font-size:clamp(2.2rem,6.4vw,5rem);line-height:.98}
.close p{color:var(--ink-2);margin:22px auto 0;max-width:52ch}

.note{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,3vw,34px);margin-top:20px}
.note h3{font-size:1.05rem;margin-bottom:14px}
.note li{color:var(--ink-2);font-size:14.5px;padding:9px 0;border-bottom:1px solid var(--line);
  list-style:none}
.note li:last-child{border-bottom:0}
.note ul{margin:0;padding:0}
.note b{color:var(--ink);font-weight:700}

@media(max-width:900px){
  .reels{grid-template-columns:1fr}
  .fire__grid{grid-template-columns:1fr;gap:22px}
  .caps{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:1fr 1fr}
  .card--wide{grid-column:span 2}
  .pathcap{grid-template-columns:1fr;gap:22px}
  .nav{display:none}
}
@media(max-width:560px){
  .caps{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .card--wide{grid-column:span 1}
  .xrow{grid-template-columns:56px 26px 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .markbox img{clip-path:none}
  .flow{stroke-dashoffset:0}
  .node{opacity:1}
}


/* --- RTL -----------------------------------------------------------------
   Layout mirrors itself because the grids and flex rows follow the writing
   direction and every offset above is logical. What is left is type and the
   handful of things that point somewhere. Heebo covers both languages, so
   unlike the previous site there is no second family to swap in. */

[lang="he"] h1,[lang="he"] h2,[lang="he"] h3{letter-spacing:-.01em;line-height:1.12}
[lang="he"] .hero h1{font-size:clamp(2.4rem,7vw,6rem);line-height:1.04}
[lang="he"] .label,[lang="he"] .card__c,[lang="he"] .member__r,
[lang="he"] .reel__k,[lang="he"] .fire__grid span,[lang="he"] .xf{letter-spacing:.04em}
[lang="he"] .lead,[lang="he"] .lede{line-height:1.75}

[dir="rtl"] .btn svg{transform:scaleX(-1)}
[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .reel__play svg{transform:scaleX(-1)}
[dir="rtl"] .marq__t{animation-name:marq-rtl}
@keyframes marq-rtl{to{transform:translateX(50%)}}
/* Latin runs inside Hebrew copy keep their own order. */
[lang="he"] .card__c,[lang="he"] .member__b small,[lang="he"] address{unicode-bidi:isolate}


/* --- pages built by build_site.py ---------------------------------------- */

/* Work grid: three up, and the filter bar sticks while you scan. */
.cards--work{grid-template-columns:repeat(3,1fr)}
.cards--work .card--wide{grid-column:span 1}
.card[data-hidden]{display:none}

.filters{position:sticky;top:0;z-index:55;padding-block:16px;
  background:rgba(247,245,243,.86);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-block:1px solid var(--line)}
.filters__inner{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:100px;
  border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink-2);
  white-space:nowrap;transition:color .25s,border-color .25s,background .25s}
.filter:hover{color:var(--ink);border-color:var(--line-2)}
.filter__n{font-size:11.5px;color:var(--ink-3);transition:color .25s}
.filter[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff}
.filter[aria-pressed="true"] .filter__n{color:rgba(255,255,255,.75)}
.work-count{margin-inline-start:auto;padding-inline-start:16px;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.empty-state{text-align:center;padding-block:80px;color:var(--ink-2)}

.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);border-radius:100px;padding:3px 9px}

/* Full team cards on the studio page carry a bio. */


.page-hero{position:relative;overflow:hidden;padding-block:clamp(52px,7vw,96px) clamp(40px,5vw,72px)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.4rem,6.4vw,5rem);line-height:1;letter-spacing:-.03em;
  margin-top:18px}
.page-hero .lede{margin-top:22px}

.footer{border-top:1px solid var(--line);padding-block:64px 30px;margin-top:0}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(26px,4vw,56px);padding-bottom:44px;border-bottom:1px solid var(--line)}
.footer h4{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px}
.footer ul{margin:0;padding:0;list-style:none}
.footer li{margin-bottom:9px}
.footer li a,.footer address a{color:var(--ink-2);font-size:15px;transition:color .25s}
.footer li a:hover,.footer address a:hover{color:var(--ink)}
.footer address{font-style:normal;font-size:15px;color:var(--ink-2);line-height:1.9}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-top:24px;font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}

.lang{font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:100px;padding:8px 13px;
  transition:color .25s,border-color .25s}
.lang:hover{color:var(--ink);border-color:var(--line-2)}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(28,0,54,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;
  place-items:center;padding:var(--gutter);opacity:0;visibility:hidden;
  transition:opacity .4s,visibility .4s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__stage{width:min(1240px,100%);max-height:100%}
.lightbox__frame{width:100%;aspect-ratio:16/9;max-height:78vh;background:#000;
  border-radius:16px;overflow:hidden;transform:scale(.96);
  transition:transform .5s var(--ease-out)}
.lightbox.is-open .lightbox__frame{transform:none}
.lightbox iframe{width:100%;height:100%;border:0}
.lightbox__close{position:absolute;top:24px;inset-inline-end:24px;width:46px;height:46px;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;
  color:#fff;transition:background .3s,transform .3s}
.lightbox__close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.lightbox__close svg{width:16px;height:16px}
.lightbox__caption{margin-top:16px;text-align:center;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}

@media(max-width:1080px){
  .cards--work{grid-template-columns:repeat(2,1fr)}
  .team--full{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .cards--work{grid-template-columns:1fr}
  .team--full{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .work-count{margin-inline-start:0;padding-inline-start:0;width:100%}
  .nav{display:none}
}


/* --- team: the bio lives inside the portrait ------------------------------
   It rises on hover, on keyboard focus, and on a tap, so touch users get the
   same thing rather than being locked out of the writing. */

.member{position:relative;outline:none}
.member:focus-visible{box-shadow:0 0 0 3px var(--orange)}
.member__ph{position:relative;overflow:hidden}
.member{overflow:hidden}

/* The prompt and the badge live in the card body, below the portrait. */

/* A partner mark belonging to one person, pinned to their portrait. It sits
   above the bio overlay so it stays reachable while the bio is up. */
.member__name{display:flex;align-items:center;justify-content:space-between;gap:10px}
.member__badge{
  flex:0 0 auto;width:62px;height:62px;border-radius:15px;overflow:hidden;
  background:#fff;border:1px solid var(--line);padding:3px;
  display:grid;place-items:center;
  transition:transform .45s var(--ease-back),box-shadow .35s var(--ease)}
.member__badge img{width:100%;height:100%;object-fit:contain}
.member__badge:hover{transform:scale(1.1) rotate(-3deg);
  box-shadow:0 12px 26px -10px rgba(46,0,90,.6)}
.member__badge:focus-visible{outline:2px solid var(--orange);outline-offset:3px}


/* Where a portrait carries a partner mark, the bio stops short of it. */


/* The bio panel spans the whole card, so the writing has room to breathe in a
   five column row. The name reappears the moment the pointer leaves. */


/* --- the collage ---------------------------------------------------------
   The studio's theme images come in their own proportions, from tall portraits
   to wide panoramas, and that variety is what makes the wall asymmetric. CSS
   columns let every image keep its own shape instead of being cropped into a
   uniform box. Each card declares its aspect ratio up front so nothing jumps
   while the pictures load. */

.collage{column-count:4;column-gap:clamp(12px,1.4vw,20px)}
.tile{
  break-inside:avoid;display:block;position:relative;overflow:hidden;
  border-radius:16px;background:var(--lilac);
  margin-bottom:clamp(12px,1.4vw,20px);
  transform-origin:center;
  transition:transform .5s var(--ease-back),box-shadow .45s var(--ease)}
.tile:hover{transform:translateY(-6px) scale(1.012);
  box-shadow:0 26px 52px -26px rgba(46,0,90,.45);z-index:2}
.tile:active{transform:translateY(1px) scale(1.02,.985)}
.tile:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.tile img{width:100%;height:auto;display:block;
  transition:transform .8s var(--ease-out),filter .5s var(--ease)}
.tile:hover img{transform:scale(1.05)}

/* Everything about the film waits under a scrim until you look at it. */
.tile__over{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;gap:6px;
  padding:clamp(16px,1.7vw,26px);
  background:linear-gradient(to top,rgba(28,0,54,.94) 8%,rgba(46,0,90,.72) 48%,
             rgba(46,0,90,.12));
  opacity:0;transition:opacity .4s var(--ease)}
.tile:hover .tile__over,
.tile:focus-visible .tile__over,
.tile.is-open .tile__over{opacity:1}

.tile__client{
  font-size:clamp(11px,.9vw,12.5px);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);
  transform:translateY(10px);transition:transform .45s var(--ease-out) .04s}
.tile__title{
  font-size:clamp(1.05rem,1.7vw,1.6rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.12;color:#fff;
  transform:translateY(14px);transition:transform .5s var(--ease-out) .06s}
.tile__meta{
  font-size:11.5px;color:rgba(255,255,255,.66);line-height:1.5;margin-top:4px;
  transform:translateY(16px);transition:transform .5s var(--ease-out) .1s}
.tile:hover .tile__client,.tile:hover .tile__title,.tile:hover .tile__meta,
.tile:focus-visible .tile__client,.tile:focus-visible .tile__title,.tile:focus-visible .tile__meta,
.tile.is-open .tile__client,.tile.is-open .tile__title,.tile.is-open .tile__meta{
  transform:none}

.tile__play{
  position:absolute;top:clamp(12px,1.2vw,18px);inset-inline-end:clamp(12px,1.2vw,18px);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(8px);opacity:0;
  transition:opacity .4s var(--ease),background .3s,transform .5s var(--ease-back)}
.tile__play svg{width:16px;height:16px;fill:#fff;margin-inline-start:2px}
.tile:hover .tile__play,.tile:focus-visible .tile__play,.tile.is-open .tile__play{opacity:1}
.tile:hover .tile__play{background:var(--grad);border-color:transparent}
[dir="rtl"] .tile__play svg{transform:scaleX(-1)}

.tile[data-hidden]{display:none}

@media(max-width:1180px){.collage{column-count:3}}
@media(max-width:820px){.collage{column-count:2}}
@media(max-width:520px){.collage{column-count:1}}
@media(hover:none){
  /* Touch has no hover, so the first tap reveals and the second plays. */
  .tile__over{opacity:0}
  .tile.is-open .tile__over{opacity:1}
}


/* --- studio page: a row per person ---------------------------------------
   A bio of fourteen hundred characters does not belong behind a hover on a
   narrow card, so on the studio page each person gets the width of the page
   and the whole text sits in the open. */

.people{display:flex;flex-direction:column;gap:clamp(40px,5vw,76px)}
.person{
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(24px,4vw,60px);align-items:start}
.person--alt{direction:rtl}
.person--alt > *{direction:ltr}
[dir="rtl"] .person--alt{direction:ltr}
[dir="rtl"] .person--alt > *{direction:rtl}

.person__ph{
  position:relative;border-radius:20px;overflow:hidden;background:var(--lilac);
  aspect-ratio:4/4.6}
.person__ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out)}
.person:hover .person__ph img{transform:scale(1.03)}
.person__ph .member__badge{position:absolute;bottom:14px;inset-inline-end:14px;
  width:78px;height:78px;border-radius:18px;padding:4px;
  box-shadow:0 8px 20px -8px rgba(46,0,90,.5)}

.person__body{padding-top:clamp(4px,1vw,18px)}
.person__body h3{font-size:clamp(1.5rem,2.8vw,2.2rem);margin-top:8px}
.person__body > small{color:var(--ink-3);font-size:13.5px;display:block;margin-top:4px}
.person__body .prose{margin-top:18px;font-size:clamp(.95rem,1.1vw,1.05rem);max-width:62ch}
.person__body .prose > * + *{margin-top:.9em}

@media(max-width:820px){
  .person{grid-template-columns:1fr;gap:20px}
  .person--alt{direction:inherit}
  .person__ph{max-width:340px;aspect-ratio:4/4.2}
}


/* --- the client wall, chips, back under the work ------------------------- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(26px,3vw,40px);
  margin-block:clamp(24px,3vw,44px);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq__t{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);width:max-content;
  animation:marq 64s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq__item{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;
  width:clamp(120px,12vw,164px);height:clamp(58px,6vw,80px);
  padding:clamp(9px,1.1vw,16px);border-radius:13px;background:#fff;
  border:1px solid var(--line);opacity:.8;
  transition:opacity .35s var(--ease),transform .4s var(--ease)}
.marq__item:hover{opacity:1;transform:translateY(-3px)}
.marq__item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);transition:filter .35s var(--ease)}
.marq__item:hover img{filter:none}

/* --- the vimeo line, deliberately quiet ---------------------------------- */
.vimeo-line{text-align:center;font-size:14.5px;color:var(--ink-3)}
.vimeo-line a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2);
  padding-bottom:2px;margin-inline-start:8px;
  display:inline-flex;align-items:center;gap:6px;transition:border-color .3s,color .3s}
.vimeo-line a:hover{border-color:var(--red);color:var(--red)}
.vimeo-line svg{width:13px;height:13px}
[dir="rtl"] .vimeo-line svg{transform:scaleX(-1)}

/* --- the logo, given room ------------------------------------------------ */
.logo__img{height:clamp(31px,3.1vw,38px);width:auto}

/* --- the fire -----------------------------------------------------------
   The studio's own animation, beside the writing it belongs to. It plays
   quietly on a loop and holds its poster frame when motion is turned down. */
/* Two columns, so the panel is filled by the writing rather than by empty
   navy: the heading and the quote on one side, the argument on the other. */
.fire__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.fire__text{display:flex;flex-direction:column}
.fire__text .lead{max-width:46ch}
/* The three points close the column, so both sides of the panel end level. */
.fire__text .fire__grid{grid-template-columns:1fr;gap:clamp(14px,1.6vw,20px);
  margin-top:auto;padding-top:clamp(22px,2.6vw,32px)}
.fire__text .fire__grid span{margin-bottom:6px}
.fire__text .fire__grid p{max-width:44ch}
.fire__text .lead:first-child{margin-top:0}
.firelight{width:clamp(190px,26vw,340px);position:relative;
  margin-top:clamp(16px,2.2vw,30px);margin-inline-start:clamp(8px,1.6vw,24px)}
.firelight video{display:block;width:100%;height:auto}
/* The cut-out versions need nothing behind them. The flat one, which WebKit
   gets, is given the panel's own colour to sit on and then the whole block is
   faded out at the edges, backing and picture together, so there is no
   rectangle to see even where the panel's glow passes behind it. */
.firelight--flat{background:var(--navy);
  -webkit-mask-image:radial-gradient(ellipse at 50% 52%,#000 46%,transparent 88%);
  mask-image:radial-gradient(ellipse at 50% 52%,#000 46%,transparent 88%)}

@media(max-width:940px){
  .fire__head{grid-template-columns:1fr;gap:26px}
  .firelight{width:min(260px,64%);margin:20px auto 0}
}

/* --- the key to the ai mark ---------------------------------------------
   A quiet chip under the grid: it explains the sticker, it does not compete
   with the work. When the sentence needs two lines they are balanced, so it
   never leaves a single word hanging at the end. */
.ai-key{display:inline-flex;align-items:center;gap:14px;
  margin-top:clamp(22px,2.6vw,32px);padding:13px 24px 13px 16px;
  background:#fff;border:1px solid var(--line-2);border-radius:100px;
  font-size:15px;line-height:1.5;color:var(--ink-2);
  box-shadow:0 14px 30px -22px rgba(46,0,90,.5)}
[dir="rtl"] .ai-key{padding:13px 16px 13px 24px}
.ai-key img{height:28px;width:auto;flex:0 0 auto}
.ai-key span{max-width:52ch;text-wrap:balance}

@media(max-width:760px){
  /* Two balanced lines inside a softened chip, rather than a stadium with an
     orphan word in it. */
  .ai-key{border-radius:20px;padding:13px 16px;gap:12px;font-size:14px}
  .ai-key img{height:24px}
}

/* --- team cards: a button, not a paragraph ------------------------------- */
.member__link{position:absolute;inset:0;z-index:2}
.member__more{
  display:inline-flex;align-items:center;gap:7px;align-self:start;
  margin-top:14px;font-size:12px;font-weight:500;letter-spacing:.02em;
  color:var(--navy);background:#fff;border:1px solid var(--line-2);
  border-radius:100px;padding:8px 15px;text-decoration:none;
  transition:color .3s var(--ease),border-color .3s var(--ease),
             background .3s var(--ease),transform .4s var(--ease-back)}
.member__more::after{content:"\2192";font-size:13px;transition:transform .4s var(--ease-back)}
[dir="rtl"] .member__more::after{content:"\2190"}
.member__more:hover{color:#fff;background:var(--grad);border-color:transparent}
.member__more:hover::after{transform:translateX(3px)}
[dir="rtl"] .member__more:hover::after{transform:translateX(-3px)}
.member:hover .member__more{transform:translateY(-2px)}
.member__b{display:flex;flex-direction:column}


/* --- the home collage: a wall with a rhythm ------------------------------
   The work page keeps the plain masonry, where every film is equal. The home
   page gets a mosaic: it is built from bands that each fill the six columns
   exactly, so tiles come in different weights without leaving holes, and the
   films made with AI are dealt through the others rather than stacked in one
   column. */
.collage--mosaic{
  display:grid;column-count:auto;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(46px,5.5vw,70px);
  grid-auto-flow:row dense;
  gap:clamp(12px,1.4vw,20px)}
.collage--mosaic .tile{margin-bottom:0;height:100%}
.collage--mosaic .tile img{width:100%;height:100%;object-fit:cover}

.m-a1{grid-column:1 / span 4;grid-row:span 5}
.m-a2{grid-column:5 / span 2;grid-row:span 2}
.m-a3{grid-column:5 / span 2;grid-row:span 3}
.m-b1{grid-column:1 / span 3;grid-row:span 4}
.m-b2{grid-column:4 / span 3;grid-row:span 4}
.m-c1{grid-column:1 / span 2;grid-row:span 3}
.m-c2{grid-column:1 / span 2;grid-row:span 2}
.m-c3{grid-column:3 / span 4;grid-row:span 5}
.m-d1{grid-column:1 / span 4;grid-row:span 4}
.m-d2{grid-column:5 / span 2;grid-row:span 4}
.m-f1{grid-column:1 / span 6;grid-row:span 5}

@media(max-width:1180px){
  /* Four columns: the broad tiles keep the full width, the rest pair up. */
  .collage--mosaic{grid-template-columns:repeat(4,1fr);
    grid-auto-rows:clamp(58px,7.6vw,92px)}
  .m-a1,.m-c3,.m-f1{grid-column:1 / span 4;grid-row:span 4}
  .m-d1{grid-column:1 / span 2;grid-row:span 3}
  .m-a3,.m-c1,.m-d2{grid-column:span 2;grid-row:span 3}
  .m-a2,.m-b1,.m-b2,.m-c2{grid-column:span 2;grid-row:span 2}
}
@media(max-width:640px){
  .collage--mosaic{grid-template-columns:repeat(2,1fr);
    grid-auto-rows:clamp(62px,16vw,104px)}
  .m-a1,.m-c3,.m-f1{grid-column:1 / span 2;grid-row:span 3}
  .m-a3,.m-c1,.m-d1,.m-d2{grid-column:span 1;grid-row:span 3}
  .m-a2,.m-b1,.m-b2,.m-c2{grid-column:span 1;grid-row:span 2}
}

/* --- the two calls to action, given weight ------------------------------- */
.btn--big{font-size:16px;padding:17px 30px;border-radius:100px}
.btn--big svg{width:19px;height:19px}

.ai-key{font-size:15px;gap:14px;padding:14px 24px 14px 18px;
  color:var(--ink-2);border-color:var(--line-2);
  box-shadow:0 14px 30px -22px rgba(46,0,90,.5)}
[dir="rtl"] .ai-key{padding:14px 18px 14px 24px}
.ai-key img{height:30px}


/* --- the ai sticker ------------------------------------------------------
   Worn in the corner by anything made with AI: every film tile, and the AI
   showreel itself. The mark is inside the artwork as well, but at tile size
   it is easy to miss. */
.ai-sticker{
  position:absolute;z-index:3;
  bottom:clamp(11px,1.1vw,16px);inset-inline-end:clamp(11px,1.1vw,16px);
  display:grid;place-items:center;
  padding:7px 11px;border-radius:12px;background:#fff;
  box-shadow:0 10px 22px -10px rgba(46,0,90,.55),0 1px 0 rgba(46,0,90,.06);
  transform:rotate(-4deg);
  transition:transform .45s var(--ease-back),box-shadow .4s var(--ease)}
/* The sticker's own image must sit outside the rules that stretch a tile's
   artwork to fill it, so it is addressed through the sticker. */
.tile .ai-sticker img,.reel .ai-sticker img{
  display:block;height:clamp(15px,1.5vw,20px);width:auto;
  object-fit:contain;transform:none;position:static;opacity:1}
.tile:hover .ai-sticker img{transform:none}
.tile:hover .ai-sticker,.reel:hover .ai-sticker{
  transform:rotate(0deg) scale(1.06);
  box-shadow:0 16px 30px -12px rgba(46,0,90,.6)}
/* Keep the writing clear of it. */
.tile--ai .tile__over{padding-inline-end:clamp(64px,6vw,92px)}
.reel--ai .reel__in{padding-inline-end:clamp(58px,5vw,78px)}
/* On the reel the mark is bigger, to match the scale of the card. */
.reel .ai-sticker{padding:9px 14px;border-radius:14px;
  bottom:clamp(18px,2.2vw,30px);inset-inline-end:clamp(18px,2.2vw,30px)}
.reel .ai-sticker img{height:clamp(18px,1.9vw,25px)}


/* --- the band under the hero ---------------------------------------------
   Edge to edge, full strength, no fading and no blur: a visitor should meet
   the work moving before they meet a sentence about it. It rests as a narrow
   strip and opens to its full height under the pointer. */
.stripwrap{margin-block:clamp(10px,2vw,26px)}
.strip{
  display:block;position:relative;overflow:hidden;
  width:100%;height:clamp(130px,15vw,215px);
  background:var(--navy);text-decoration:none;
  transition:height .65s var(--ease)}
.strip video{width:100%;height:100%;object-fit:cover;display:block}

@media(hover:hover){
  .strip:hover,.strip:focus-visible{height:min(58vh,520px)}
}
@media(hover:none){
  /* No pointer to open it, so it stands at its full height from the start. */
  .strip{height:min(46vh,330px)}
}

/* The invitation: a pill on the glass, sitting on the band's own darkening. */
.strip::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,0,40,.62),rgba(20,0,40,.12) 46%,transparent);
  transition:opacity .5s var(--ease)}
.strip__cta{
  position:absolute;z-index:2;left:50%;bottom:clamp(16px,2.2vw,30px);
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:clamp(10px,1vw,14px);
  padding:9px 20px 9px 9px;border-radius:100px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(10px);color:#fff;
  transition:background .35s var(--ease),transform .5s var(--ease-back),
             border-color .35s var(--ease)}
[dir="rtl"] .strip__cta{padding:9px 9px 9px 20px}
.strip__t{font-size:clamp(13px,1.15vw,15.5px);font-weight:600;letter-spacing:-.01em;
  white-space:nowrap}
.strip__t--short{display:none}
.strip__play{
  width:clamp(34px,2.6vw,40px);height:clamp(34px,2.6vw,40px);border-radius:50%;
  display:grid;place-items:center;background:var(--grad);flex:0 0 auto;
  transition:transform .5s var(--ease-back)}
.strip__play svg{width:15px;height:15px;fill:#fff;margin-inline-start:2px}
[dir="rtl"] .strip__play svg{transform:scaleX(-1)}
.strip:hover .strip__cta{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);
  transform:translateX(-50%) translateY(-2px)}
.strip:hover .strip__play{transform:scale(1.1)}
.strip:focus-visible{outline:2px solid var(--orange);outline-offset:-4px}

.strip .ai-sticker{bottom:clamp(14px,1.8vw,24px);inset-inline-end:clamp(16px,3vw,44px);
  padding:8px 12px;border-radius:13px}
.strip .ai-sticker img{display:block;height:clamp(16px,1.7vw,22px);width:auto}
.strip:hover .ai-sticker{transform:rotate(0deg) scale(1.06)}

@media(max-width:620px){
  /* The full invitation does not fit on a phone, so it says the half that
     matters. The short pill leaves the corner free for the sticker. */
  .strip__t{display:none}
  .strip__t--short{display:inline}
}

@media(prefers-reduced-motion:reduce){
  .strip{transition:none}
  .strip video{display:none}
}


/* --- accessibility -------------------------------------------------------
   The menu is the studio's own. Each option is a class on <html>, so the
   choice survives a page change and costs nothing to apply. */

/* Somewhere to jump to, for anyone arriving on a keyboard. */
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 12px 12px;
  font-weight:600;transition:top .25s var(--ease)}
.skip:focus{top:0}
#main:focus{outline:none}

.a11y__btn{
  position:fixed;z-index:120;bottom:clamp(16px,2vw,26px);
  inset-inline-start:clamp(16px,2vw,26px);
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);
  background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 12px 30px -14px rgba(46,0,90,.55);
  transition:transform .4s var(--ease-back),background .3s,color .3s}
.a11y__btn svg{width:26px;height:26px}
.a11y__btn:hover{transform:scale(1.07);background:var(--grad);color:#fff}
.a11y__btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.a11y{
  position:fixed;z-index:121;bottom:clamp(80px,7vw,92px);
  inset-inline-start:clamp(16px,2vw,26px);
  width:min(310px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 60px -28px rgba(46,0,90,.5);padding:18px}
.a11y[hidden]{display:none}
.a11y__head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.a11y__head h2{font-size:1.05rem;font-weight:800}
.a11y__close{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.a11y__close svg{width:15px;height:15px}
.a11y__opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y__opt{
  text-align:start;font:inherit;font-size:13px;font-weight:500;line-height:1.3;
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;cursor:pointer;color:var(--ink);
  transition:background .25s,border-color .25s,color .25s}
.a11y__opt:hover{border-color:var(--line-2)}
.a11y__opt[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.a11y__reset{width:100%;margin-top:10px;font:inherit;font-size:13px;font-weight:500;
  background:none;border:1px solid var(--line);border-radius:12px;padding:10px;
  cursor:pointer;color:var(--ink-2)}
.a11y__reset:hover{border-color:var(--red);color:var(--red)}
.a11y__statement{display:flex;align-items:center;gap:7px;margin-top:12px;
  font-size:13px;color:var(--ink-2)}
.a11y__statement svg{width:13px;height:13px}
[dir="rtl"] .a11y__statement svg{transform:scaleX(-1)}
.a11y__statement:hover{color:var(--red)}
.a11y button:focus-visible,.a11y a:focus-visible{outline:3px solid var(--orange);
  outline-offset:2px}

/* the options themselves */
.a11y-bigger{font-size:118%}
.a11y-biggest{font-size:136%}
.a11y-contrast{--paper:#fff;--paper-2:#fff;--ink:#000;--ink-2:#000;--ink-3:#1a1a1a;
  --line:#000;--line-2:#000;--lilac:#fff}
.a11y-contrast body{background:#fff}
.a11y-contrast .fire,.a11y-contrast .reel,.a11y-contrast .strip{background:#000}
.a11y-contrast .lead,.a11y-contrast .fire p,.a11y-contrast .reel p,
.a11y-contrast .fire__grid p{color:#fff}
.a11y-contrast .wash,.a11y-contrast .grid-lines,.a11y-contrast .watermark,
.a11y-contrast .bead,.a11y-contrast .reel__bg{display:none}
.a11y-contrast .btn--fill,.a11y-contrast .a11y__opt[aria-pressed="true"]{
  background:#000;color:#fff;border-color:#000}
/* Gradient type has no fixed contrast, so in this mode it becomes solid. */
.a11y-contrast .grad,.a11y-contrast .logo b i{background:none;color:#000;
  -webkit-text-fill-color:#000}
.a11y-contrast .strip__play,.a11y-contrast .reel__play{background:#000;border-color:#fff}
.a11y-contrast .tile__client,.a11y-contrast .strip__k{color:#fff}
.a11y-links a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px}
.a11y-readable,.a11y-readable body{font-family:Arial,Helvetica,sans-serif;
  letter-spacing:normal}
.a11y-readable h1,.a11y-readable h2,.a11y-readable h3,.a11y-readable .h1{
  letter-spacing:normal}
.a11y-spacing body{line-height:1.9;letter-spacing:.04em;word-spacing:.12em}
.a11y-spacing p{margin-bottom:.8em}
.a11y-cursor,.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 2l30 22-13 2 7 14-6 3-7-14-11 9z' fill='%23fff' stroke='%232e005a' stroke-width='2.5'/%3E%3C/svg%3E") 4 2,auto}
.a11y-still *,.a11y-still *::before,.a11y-still *::after{
  animation-play-state:paused!important;animation:none!important;transition:none!important}
.a11y-still .strip{height:min(46vh,330px)}

/* Focus is never invisible, whatever the option. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px}

/* --- the accessibility statement page ----------------------------------- */
.a11y-doc{max-width:66ch}
.a11y-doc__part{margin-bottom:clamp(28px,3.4vw,44px)}
.a11y-doc__part h2{font-size:clamp(1.15rem,2vw,1.5rem);margin-bottom:12px}
.a11y-doc__part p{color:var(--ink-2);font-size:16px;line-height:1.78}
.a11y-doc__contact{background:var(--paper-2);border:1px solid var(--line);
  border-radius:20px;padding:clamp(22px,2.6vw,34px)}
.a11y-doc__list{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;
  margin-top:18px;font-size:16px}
.a11y-doc__list dt{color:var(--ink-3);font-size:14px}
.a11y-doc__list dd{font-weight:500}
.a11y-doc__list a{border-bottom:1px solid var(--line-2)}
.a11y-doc__list a:hover{color:var(--red);border-color:var(--red)}

@media(max-width:520px){
  .a11y{width:calc(100vw - 32px)}
  .a11y__opts{grid-template-columns:1fr}
}


/* --- page not found ------------------------------------------------------ */
.notfound{min-height:100vh;display:grid;place-items:center;text-align:center}
.notfound__mark{width:clamp(76px,9vw,120px);height:auto;margin:0 auto 26px}
.notfound h1{font-size:clamp(1.8rem,5vw,3rem);margin-bottom:16px}
.notfound p{color:var(--ink-2);font-size:16.5px;margin-bottom:6px}
.notfound__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}


/* --- the menu on a phone -------------------------------------------------
   The navigation used to be hidden below 980px with nothing in its place, so
   the only way to another page was to scroll to the footer. */
.header__end{display:flex;align-items:center;gap:10px}
.header__cta{padding:11px 20px}
.burger{display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line-2);background:#fff;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:19px;height:2px;border-radius:2px;background:var(--navy);
  transition:transform .35s var(--ease),opacity .25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{display:none;border-top:1px solid var(--line);background:var(--paper);
  padding-block:10px 18px}
.menu[hidden]{display:none}
.menu .wrap{display:flex;flex-direction:column}
.menu a{padding:14px 4px;font-size:16px;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--line)}
.menu a[aria-current="page"]{color:var(--red-ink)}
.menu__cta{margin-top:16px;align-self:start;border-bottom:0}

@media(max-width:980px){
  .burger{display:flex}
  .header__cta{display:none}
  .menu:not([hidden]){display:block}
}

/* Footer links are the whole navigation on a small screen, so they are given
   a proper height to hit. */
@media(hover:none){
  .footer ul a,.footer address a{display:inline-block;padding-block:9px}
}


/* The kicker is two phrases, not one string: each stays whole and the line
   breaks between them, rather than in the middle of a word. */
.label--pair{display:flex;flex-wrap:wrap;align-items:center;
  gap:4px clamp(8px,1vw,14px)}
.label--pair>span{white-space:nowrap}
.label__dot{opacity:.5}
@media(max-width:420px){
  /* Narrow enough that two lines are certain, so the dot goes. */
  .label--pair .label__dot{display:none}
  .label--pair{gap:2px}
  .label--pair>span{flex:0 0 100%}
}