/* ───────────────────────────────────────────────
   Enfilade — property films, London
   Layout and motion modelled on a-lign.studio:
   a 12-column grid, pinned scroll scenes, pixel
   lettering, dashed hairline frames.
   ─────────────────────────────────────────────── */

:root{
  --paper:#F7F7F7;        /* page ground */
  --card:#E9E9E9;         /* grey panels (the reference's process cards) */
  --deep:#1F1F1F;
  --ink:#4F4F4F;          /* primary text        7.65:1 on paper, 6.6:1 on card */
  --ink-2:#6A6A6A;        /* secondary body      5.05:1 on paper */
  --ink-3:#717171;        /* labels and captions 4.56:1 on paper */
  --dash:rgba(120,120,120,.55);
  --line:#DDDDDD;
  --px:#E2E2E2;           /* resting pixel lettering */
  --tint:rgba(79,79,79,.05);
  --tint-2:rgba(79,79,79,.10);
  --accent:#DE7356;       /* decorative orange */
  --accent-ink:#B74E30;   /* buttons (white on it 5.07:1) and accent text (4.73:1) */
  --accent-dk:#9C4026;

  /* page margin: 32px at 1440, as the reference; never inside a notch on a phone held sideways */
  --gut:max(clamp(1rem,2.2vw,2rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --safe-b:env(safe-area-inset-bottom, 0px);   /* the iPhone home indicator */
  --gap:clamp(.75rem,1.6vw,1.5rem);      /* column gap */
  --unit:calc((100vw - 2 * var(--gut) - 11 * var(--gap)) / 12 + var(--gap));
  --bar-h:4.75rem;                       /* room the floating bar needs at the foot of a pinned scene */

  --t-micro:clamp(.75rem,.72rem + .12vw,.8125rem);
  --t-small:clamp(.82rem,.78rem + .18vw,.925rem);
  --t-body:clamp(.9rem,.87rem + .2vw,1rem);
  --t-sect:clamp(2.1rem,1.15rem + 4.1vw,4.6rem);
  --t-hero:clamp(3.6rem,1rem + 8.8vw,10.25rem);

  --ease:cubic-bezier(.625,.05,0,1);
  --ease-align:cubic-bezier(.69,0,.31,1);   /* the reference's CustomEase "align" */
  --ease-io:cubic-bezier(.65,0,.35,1);      /* power3.inOut */
  --ease-soft:cubic-bezier(.33,1,.68,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis,html.lenis body{ height:auto; }
html.lenis,.lenis.lenis-smooth{ scroll-behavior:auto !important; }   /* Lenis does the smoothing; two at once fight */
.lenis.lenis-stopped{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video,picture{ display:block; max-width:100%; }
img{ height:auto; }   /* the width/height attributes reserve space; left as a fixed height they override aspect-ratio */
figure,figcaption{ margin:0; }   /* the UA gives figure margin:1em 40px */
a{ color:inherit; }
strong{ font-weight:500; color:var(--ink); }

:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

.vh{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--deep); color:var(--paper);
  padding:.8rem 1.25rem; font-size:var(--t-small); text-decoration:none;
}
.skip:focus{ left:var(--gut); top:.75rem; }

/* the signature device: a dashed hairline frame */
.framed{ border:1px dashed var(--dash); }

.on-touch{ display:none; }
@media (hover:none){
  .on-hover{ display:none; }
  .on-touch{ display:inline; }
}

/* ── type ─────────────────────────────────────── */

.display{
  font-weight:500;
  letter-spacing:-.055em;
  line-height:.89;
  margin:0;
  text-wrap:balance;
  color:var(--ink);
}
.display--hero{
  font-size:var(--t-hero);
  letter-spacing:-.062em;
  line-height:.84;
  text-align:center;
}
.display--sect{ font-size:var(--t-sect); max-width:17ch; }
@media (max-width:620px){ .display--sect{ max-width:none; } }

.label{
  display:flex; align-items:center; gap:.85em;
  margin:0 0 clamp(1.5rem,3.4vw,2.75rem);
  font-size:var(--t-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.label span{
  display:inline-grid; place-items:center;
  width:1.9em; height:1.9em;
  border:1px dashed var(--dash);
  font-size:.92em; letter-spacing:.04em;
}

.note{
  margin:clamp(2rem,4vw,3.25rem) 0 0;
  font-size:var(--t-small);
  line-height:1.68;
  color:var(--ink-2);
  max-width:60ch;
}

/* small uppercase copy, the reference's body voice */
.caps{
  font-size:var(--t-micro);
  letter-spacing:.1em;
  line-height:1.7;
  text-transform:uppercase;
}

/* ── buttons ──────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:.72em 1.5em;
  background:var(--accent-ink);
  color:#fff;
  border:0;
  font:inherit;
  font-size:var(--t-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:background .3s var(--ease), color .35s var(--ease);
}

/* The dark wipe must sit ABOVE the button's own background but BELOW its label.
   z-index:0 on the button guarantees a stacking context, so z-index:-1 on the
   pseudo lands in exactly that layer, whether the label is bare text or spans. */
.btn,.bar__cta{ position:relative; overflow:hidden; z-index:0; }
.btn::before,.bar__cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--accent-dk);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.btn > *,.bar__cta > *{ position:relative; z-index:1; }
.btn,.bar__cta{ color:#fff; }

/* grey, the reference's secondary button (MORE PROJECTS, FULL PROCESS) */
.btn--quiet{ background:var(--card); color:var(--ink); }
.btn--quiet::before{ background:var(--accent-ink); }

/* on the orange studio card */
.btn--light{ background:#fff; color:var(--accent-ink); }
.btn--light::before{ background:var(--deep); }

/* every button sits in its own dashed box, a step out from it */
.hero__act,.films__act,.method__act,.enq__act,.studio__act,.cta__mid{
  display:inline-grid; place-items:center;
  padding:8px;
  width:max-content;
}

/* a button that names itself on hover */
.btn--wide{ position:relative; overflow:hidden; }
.btn__label,.btn__alt{ display:block; transition:transform .45s var(--ease), opacity .35s var(--ease); }
.btn__alt{ position:absolute; inset:0; display:grid; place-items:center; transform:translateY(105%); opacity:0; }

/* ── chips ────────────────────────────────────── */

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; }
.tags li{
  border:1px solid var(--line);
  padding:.42em .85em;
  font-size:var(--t-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:var(--paper);
  transition:border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), background-color .35s var(--ease);
}

/* ── pixel lettering ──────────────────────────── */

.pixword{ display:block; width:100%; height:auto; overflow:visible; }
.pixword rect{
  fill:var(--px);
  transition:fill .45s var(--ease);
  transition-delay:calc(var(--i) * 4ms);
}
.chev rect{ fill:var(--px); }

/* a lit copy of the word, laid over it and uncovered by scroll */
.title-fill{ position:relative; }
.title-fill__ov{ position:absolute; inset:0; pointer-events:none; }
.title-fill__ov .pixword{ width:100%; height:100%; }
.title-fill__ov rect{ fill:var(--accent); transition:none; }
.title-fill[data-fill="x"] .title-fill__ov{ clip-path:inset(0 calc(100% - var(--p,0) * 100%) 0 0); }
.title-fill[data-fill="y"] .title-fill__ov{ clip-path:inset(0 0 calc(100% - var(--p,0) * 100%) 0); }

/* ── preloader ────────────────────────────────── */

.loader{ display:none; }
.js .loader{
  display:block;
  position:fixed; inset:0; z-index:150;
  background:var(--paper);
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease-align);
}
.loader.is-done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.loader__row{
  position:absolute; left:var(--gut); right:var(--gut); top:50%;
  display:flex; justify-content:space-between;
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink);
  transform:translateY(-50%);
}
.loader__word{ position:absolute; left:var(--gut); right:var(--gut); bottom:var(--gut); }
.loader.is-done .loader__word{ transform:translateY(-12vh); transition:transform 1.05s var(--ease-align); }

/* ── floating bar ─────────────────────────────── */

.bar{
  position:fixed; z-index:100;
  left:50%; bottom:calc(clamp(.75rem,2vw,1.35rem) + var(--safe-b));
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(.75rem,5vw,4.5rem);
  padding:6px;
  background:rgba(232,232,232,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  max-width:calc(100vw - 2 * var(--gut));
  transition:transform .8s var(--ease-align);
}
.bar.is-away{ transform:translate(-50%,calc(100% + 2.5rem + var(--safe-b))); }

.bar__menu{
  display:flex; gap:5px;
  padding:0; margin:0; border:0; background:none; cursor:pointer;
  font:inherit; color:var(--ink);
}
.bar__box{
  display:inline-grid; place-items:center;
  min-height:38px; padding:0 1.05em;
  background:#fff;
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.bar__plus{ width:38px; padding:0; font-size:0; }
.bar__plus::before{
  content:"+"; font-size:1.05rem; line-height:1; display:block;
  transition:transform .45s var(--ease);
}
.bar__menu[aria-expanded="true"] .bar__plus::before{ transform:rotate(45deg); }
.bar__mark{
  display:inline-grid; place-items:center;
  width:44px; height:38px;
  color:var(--ink);
}
.bar__mark svg{ width:28px; height:auto; }
.bar__lit{ fill:var(--accent); transition:fill .4s var(--ease); }
.bar__cta{
  display:inline-flex; align-items:center;
  min-height:38px; padding:0 1.25em;
  background:var(--accent-ink);
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  text-decoration:none;
}

/* ── menu ─────────────────────────────────────── */

.menu{
  position:fixed; z-index:99;
  left:50%; transform:translateX(-50%) translateY(.75rem);
  bottom:calc(clamp(.75rem,2vw,1.35rem) + 56px + var(--safe-b));
  width:min(calc(100vw - 2 * var(--gut)),26rem);
  background:rgba(247,247,247,.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line);
  padding:.5rem;
  opacity:0;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.menu.is-open{ opacity:1; transform:translateX(-50%) translateY(0); }
.menu ul{ list-style:none; margin:0; padding:0; }
.menu a{
  display:flex; align-items:center; gap:1em;
  min-height:46px; padding:0 1em;
  font-size:var(--t-small); letter-spacing:-.01em;
  text-decoration:none; color:var(--ink);
  border-bottom:1px dashed var(--dash);
  transition:background .25s var(--ease), color .25s var(--ease), padding-left .35s var(--ease);
}
.menu li:last-child a{ border-bottom:0; }
.menu a span{ font-size:var(--t-micro); letter-spacing:.1em; color:var(--ink-3); }
.menu.is-open li{ animation:menuIn .5s var(--ease) both; }
.menu.is-open li:nth-child(2){ animation-delay:.04s }
.menu.is-open li:nth-child(3){ animation-delay:.08s }
.menu.is-open li:nth-child(4){ animation-delay:.12s }
.menu.is-open li:nth-child(5){ animation-delay:.16s }
.menu.is-open li:nth-child(6){ animation-delay:.20s }
.menu.is-open li:nth-child(7){ animation-delay:.24s }
.menu.is-open li:nth-child(8){ animation-delay:.28s }
@keyframes menuIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ── cursor ───────────────────────────────────── */

.cursor{
  position:fixed; top:0; left:0; z-index:200;
  pointer-events:none;
  opacity:0; scale:.5;
  transition:opacity .3s var(--ease), scale .4s var(--ease);
  will-change:transform;
}
.cursor.is-on{ opacity:1; scale:1; }
.cursor__t{
  display:block;
  transform:translate(-50%,-50%) translateY(-1.6em);
  background:var(--accent-ink); color:#fff;
  padding:.5em 1.05em;
  font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  white-space:nowrap;
}
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ── the grid, on G ───────────────────────────── */

.guide{ position:fixed; inset:0; z-index:140; pointer-events:none; padding:0 var(--gut); }
.guide__cols{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); height:100%; }
.guide__cols i{ background:rgba(222,115,86,.06); box-shadow:inset 1px 0 rgba(222,115,86,.22), inset -1px 0 rgba(222,115,86,.22); }

/* ───────────────────────────────────────────────
   Opening
   ─────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3.5rem,7vh,6rem) var(--gut) clamp(5.5rem,9vh,7.5rem);
}
.hero__core{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero__kicker{
  margin:0 0 clamp(.9rem,2vh,1.4rem);
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.hero__def{
  margin:clamp(1rem,2.2vh,1.7rem) auto 0;
  font-size:var(--t-micro);
  letter-spacing:.14em;
  line-height:1.9;
  text-transform:uppercase;
  color:var(--ink-3);
}
.hero__act{ margin-top:clamp(1.4rem,3vh,2.5rem); }
.hero__def .ln{ text-wrap:balance; }      /* on a phone each authored line wraps once, evenly, not with a lone word */
@media (max-width:520px){ .hero__def{ letter-spacing:.1em; } }
.chev--hero{ display:none; }

.plate{ position:relative; padding:10px; background:var(--paper); min-width:0; }
.plate__open{
  position:absolute; inset:0; z-index:4;
  text-decoration:none;
}
.plate__stage{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/2;
  background:var(--tint);
}
.plate__stage > picture{ display:block; position:absolute; inset:0; }
.plate__still,.plate__film{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* the film is never the thing that has to load for the page to look finished */
.plate__film{ opacity:0; transition:opacity 1s var(--ease); }
.plate__film.is-live{ opacity:1; }
.plate__no{
  position:absolute; z-index:3; top:10px; left:10px;
  font-size:var(--t-micro); letter-spacing:.14em; font-weight:500;
  color:#fff; text-shadow:0 1px 10px rgba(31,31,31,.75);
}
.plate__cap{
  /* flex, so a narrow plate drops the running time to a second line instead of
     breaking the name in half */
  display:flex; flex-wrap:wrap; justify-content:space-between;
  column-gap:.75rem;
  padding:.6rem .1rem 0;
  font-size:var(--t-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:color .4s var(--ease);
}
.plate__name{ color:var(--ink); white-space:nowrap; }
.plate__len{ white-space:nowrap; }
.plate__desc{ flex-basis:100%; display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s var(--ease-io); }
.plate__desc > span{
  display:block; min-height:0; overflow:hidden;
  text-align:justify; line-height:1.65;
  opacity:0; transition:opacity .25s var(--ease);
}
.plate__desc > span::before{ content:""; display:block; height:.55rem; }   /* spacing that collapses with the row */

/* desktop and iPad: the reference's composition, four framed boxes in the corners
   around the name, each opening wider on hover to say what it is */
@media (min-width:900px), (min-width:761px) and (orientation:portrait){
  .hero{ height:100svh; min-height:640px; padding:0; display:block; }
  .hero__plates{ position:absolute; inset:0; pointer-events:none; }
  .plate{
    position:absolute; pointer-events:auto;
    width:var(--w);
    z-index:1;
    transition:width .8s var(--ease-io), opacity .5s var(--ease), border-color .5s var(--ease);
  }
  .plate--1{ left:var(--gut); top:var(--gut); --w:min(21vw,42vh); }
  .plate--2{ right:calc(var(--gut) + 6vw); top:calc(var(--gut) + 6vh); --w:min(15vw,29vh); }
  .plate--3{ left:calc(var(--gut) + 15vw); bottom:var(--gut); --w:min(15vw,29vh); }
  .plate--4{ right:var(--gut); bottom:var(--gut); --w:min(27vw,52vh); }
  .plate--1 .plate__stage{ aspect-ratio:1/1; }
  .plate--2 .plate__stage,
  .plate--3 .plate__stage{ aspect-ratio:4/5; }
  .plate--4 .plate__stage{ aspect-ratio:4/3; }

  .hero__core{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-52%);
    width:min(46vw,46rem);
    z-index:2;
  }
  .chev--hero{
    display:block;
    position:absolute; left:var(--gut); top:38%;
    width:auto; height:30vh;
  }
}
@media (max-width:1039px){ .chev--hero{ display:none; } }

/* mid-size screens on their side (a 10-11" iPad): the lower-left plate keeps to the
   margin, clear of the floating bar */
@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  .plate--3{ left:var(--gut); }
}

/* an iPad held upright: the same four corners, sized for a tall screen, and the
   two lower ones lifted clear of the floating bar */
@media (min-width:761px) and (orientation:portrait){
  .plate--1{ --w:min(34vw,30vh); }
  .plate--2{ right:var(--gut); top:calc(var(--gut) + 5vh); --w:min(24vw,22vh); }
  .plate--3{ left:var(--gut); bottom:calc(var(--gut) + var(--bar-h) + var(--safe-b)); --w:min(24vw,22vh); }
  .plate--4{ right:var(--gut); bottom:calc(var(--gut) + var(--bar-h) + var(--safe-b)); --w:min(40vw,28vh); }
  .hero__core{ width:min(70vw,40rem); }
}

/* small landscape windows: the plates sit in a row above the name */
@media (min-width:761px) and (max-width:899px) and (orientation:landscape){
  .hero__plates{ display:flex; align-items:flex-start; gap:clamp(.7rem,2vw,1.5rem); margin-bottom:clamp(1.5rem,4vh,3rem); }
  .plate--1{ flex:0 0 40%; }
  .plate--2{ flex:0 0 30%; margin-top:clamp(1.5rem,5vh,3rem); }
  .plate--3{ flex:0 0 24%; margin-left:auto; }
  .plate--4{ display:none; }
}

/* phones: the drawn run of doorways instead of pictures */
.hero__run{ display:none; }
.run{ width:100%; height:auto; aspect-ratio:1000 / 640; color:var(--ink-3); }
/* The frames travel outward for ever. Spacing is a constant ratio, so scaling the
   whole group by exactly 1/ratio lands every frame on its neighbour's place: the
   loop point is invisible. The lit centre sits outside the group and never moves. */
.run .dr{ vector-effect:non-scaling-stroke; stroke-width:1.15; opacity:.95; }
.run__frames{
  transform-box:view-box;
  transform-origin:500px 340px;
  -webkit-mask-image:radial-gradient(ellipse 60% 64% at 50% 53%, #000 46%, rgba(0,0,0,.6) 74%, transparent 97%);
          mask-image:radial-gradient(ellipse 60% 64% at 50% 53%, #000 46%, rgba(0,0,0,.6) 74%, transparent 97%);
  animation:runTravel 3.6s linear infinite;
}
@keyframes runTravel{ from{ transform:scale(1); } to{ transform:scale(1.16550); } }
.run .dr__lit{
  fill:var(--accent);
  filter:drop-shadow(0 0 14px rgba(222,115,86,.55));
  animation:litBreathe 3.6s ease-in-out infinite;
}
@keyframes litBreathe{
  0%,100%{ opacity:.85; filter:drop-shadow(0 0 10px rgba(222,115,86,.4)); }
  50%    { opacity:1;   filter:drop-shadow(0 0 24px rgba(222,115,86,.8)); }
}
@media (max-width:760px){
  .hero__plates{ display:none; }
  .hero__run{ display:block; margin:0 auto clamp(1.5rem,5vh,3rem); width:min(100%,30rem); }
}
/* a phone on its side: the run of doorways beside the name, both on one screen */
@media (max-height:500px) and (orientation:landscape){
  .hero{
    height:auto; min-height:100svh;
    display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center;
    column-gap:var(--gap);
    padding:1rem var(--gut) calc(var(--bar-h) + var(--safe-b));
  }
  .hero__plates,.chev--hero{ display:none; }
  .hero__run{ display:block; grid-column:1; width:100%; margin:0; }
  .hero__core{ grid-column:2; position:static; transform:none; width:auto; }
  .hero__kicker{ margin-bottom:.5rem; }
  .display--hero{ font-size:min(var(--t-hero),19svh); }
  .hero__def{ margin-top:.75rem; }
  .hero__act{ margin-top:1rem; }
}

/* ───────────────────────────────────────────────
   Positioning — the quote that assembles
   ─────────────────────────────────────────────── */

.quote{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,48rem) minmax(0,1fr);
  align-items:center;
  column-gap:var(--gap);
  padding:clamp(5rem,12vh,9rem) var(--gut);
}
.chev--l,.chev--r{ height:clamp(8rem,28vh,16rem); width:auto; }
.chev--l{ justify-self:start; }
.chev--r{ justify-self:end; }
.quote__body{ grid-column:2; }
.quote__text{
  margin:0;
  font-size:clamp(1.85rem,.75rem + 3.3vw,3.6rem);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.02;
  text-align:justify;
  hyphens:none;
  color:var(--ink);
}
.quote__text p{ margin:0; position:relative; }
.quote__text p::before{
  content:"\201C"; color:var(--accent);
  position:absolute; right:100%; top:0;
}
.quote__text p::after{ content:"\201D"; color:var(--accent); }
.qw{ display:inline-block; will-change:transform; }
.quote__cap{
  margin:clamp(1.25rem,3vh,2rem) 0 0 auto;
  max-width:17rem;
  font-size:var(--t-micro); letter-spacing:.1em; line-height:1.65; text-transform:uppercase;
  text-align:justify;
  color:var(--accent-ink);
}
@media (max-width:760px){
  .quote{ grid-template-columns:minmax(0,1fr); min-height:auto; }
  .chev--l,.chev--r{ display:none; }
  .quote__body{ grid-column:1; padding-left:.5em; }
}

/* ───────────────────────────────────────────────
   Films — pinned; the word fills, the cards trade places
   ─────────────────────────────────────────────── */

.films{ padding:clamp(4.5rem,10vw,8rem) var(--gut); }
.films__board{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:clamp(1rem,2vw,1.5rem);
}
.films__title{ grid-column:1 / -1; margin:0; width:min(100%,27rem); }
.films__intro{
  grid-column:1 / -1;
  margin:0 0 clamp(.5rem,2vw,1.5rem);
  max-width:30rem;
  font-size:var(--t-micro); letter-spacing:.1em; line-height:1.7; text-transform:uppercase;
  color:var(--ink);
}
.film-card{
  grid-column:1 / -1;
  display:flex; flex-direction:column;
  padding:10px;
  background:var(--paper);
  text-decoration:none;
  color:var(--ink);
  transition:border-color .5s var(--ease);
}
@media (min-width:640px){
  .film-card{ grid-column:span 6; }
  /* iPads: the first film leads, full width and cinematic; the other two pair below */
  .films__board > a.film-card:first-of-type{ grid-column:1 / -1; }
  .films__board > a.film-card:first-of-type .film-card__media{ aspect-ratio:16/9; }
}
@media (min-width:1040px){
  .film-card,.films__board > a.film-card:first-of-type{ grid-column:span 4; }
  .films__board > a.film-card:first-of-type .film-card__media{ aspect-ratio:3/2; }
}
.films__title-v{ display:none; }
/* phones: the reference turns its section word on end and runs it down the whole
   screen, lighting as you scroll past; the horizontal word stays for screen readers */
@media (max-width:760px){
  .films__title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .films__title-v{ display:block; grid-column:1 / -1; height:min(104svh,56rem); margin:0 0 .5rem; }
  .films__title-v .pixword{ height:100%; width:auto; }
}
.film-card__media{ position:relative; display:block; overflow:hidden; background:var(--tint); aspect-ratio:3/2; }
.film-card__v{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.film-card__no{
  position:absolute; z-index:2; top:.6rem; left:.7rem;
  font-size:var(--t-micro); letter-spacing:.12em; color:#fff;
  text-shadow:0 1px 8px rgba(31,31,31,.6);
}
.film-card__cap{
  display:flex; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap;
  padding:.7rem .15rem .1rem;
  font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
}
.film-card__name{ color:var(--ink); font-weight:500; transition:color .4s var(--ease); }
.film-card__spec{ color:var(--ink-3); }
.films__act{ grid-column:1 / -1; justify-self:start; margin-top:.5rem; }
.films__hint{
  grid-column:1 / -1; margin:0;
  font-size:var(--t-micro); letter-spacing:.06em; line-height:1.7;
  color:var(--ink-3); max-width:36ch;
}

@media (min-width:1040px) and (min-height:620px){
  .js-reveal .films{ height:300vh; padding:0; position:relative; }
  .js-reveal .films__stage{
    position:sticky; top:0;
    height:100svh;
    padding:var(--gut) var(--gut) calc(var(--gut) + var(--bar-h) + var(--safe-b));
  }
  .js-reveal .films__board{
    position:relative; display:block; height:100%;
    container-type:inline-size;
  }
  .js-reveal .films__board > *{
    --c:calc((100cqw - 11 * var(--gap)) / 12);
    --u:calc(var(--c) + var(--gap));
    position:absolute; margin:0;
  }
  .js-reveal .films__title{ left:0; top:0; width:calc(var(--c) * 4 + var(--gap) * 3); }
  .js-reveal .films__intro{ left:calc(var(--u) * 4); top:0; width:calc(var(--c) * 4 + var(--gap) * 3); max-width:none; }

  .js-reveal .film-card{
    transition:left .6s var(--ease-io), top .6s var(--ease-io), width .6s var(--ease-io), height .6s var(--ease-io), border-color .5s var(--ease);
  }
  .js-reveal .film-card__media{ flex:1 1 auto; min-height:0; aspect-ratio:auto; }
  .js-reveal .film-card.at-a{ left:calc(var(--u) * 4); width:calc(var(--c) * 5 + var(--gap) * 4); top:16%; height:46%; }
  .js-reveal .film-card.at-b{ left:0;                   width:calc(var(--c) * 4 + var(--gap) * 3); top:41%; height:37%; }
  .js-reveal .film-card.at-c{ left:calc(var(--u) * 4); width:calc(var(--c) * 4 + var(--gap) * 3); top:64.5%; height:35.5%; }
  /* between arrangements every card steps to the same small size first,
     as the reference does, so none ever passes through another */
  .js-reveal .film-card.is-mid.at-a{ left:calc(var(--u) * 7); width:calc(var(--c) * 4 + var(--gap) * 3); top:16%; height:35.5%; }
  .js-reveal .film-card.is-mid.at-b{ left:0;                   width:calc(var(--c) * 4 + var(--gap) * 3); top:16%; height:35.5%; }
  .js-reveal .film-card.is-mid.at-c{ left:0;                   width:calc(var(--c) * 4 + var(--gap) * 3); top:64.5%; height:35.5%; }
  .js-reveal .film-card.is-fast{ transition-duration:0s; }

  .js-reveal .films__act{ left:calc(var(--u) * 9); top:64.5%; }
  .js-reveal .films__hint{ left:calc(var(--u) * 9); top:calc(64.5% + 5rem); width:calc(var(--c) * 3 + var(--gap) * 2); }
}

/* ───────────────────────────────────────────────
   Method — pinned; a vertical word, phases that open
   ─────────────────────────────────────────────── */

.method{ padding:clamp(4.5rem,10vw,8rem) var(--gut); }
/* visually hidden, not display:none: it is the section's heading for screen readers */
.method__title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
.method__title-h{ width:min(100%,25rem); margin:0 0 clamp(1.25rem,3vw,2rem); }
.method__intro{
  margin:0 0 clamp(1.5rem,4vw,2.5rem);
  padding:.9rem 1.1rem;
  max-width:31rem;
  font-size:var(--t-micro); letter-spacing:.1em; line-height:1.7; text-transform:uppercase;
  color:var(--ink);
}
.phases{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(.6rem,1.2vw,.85rem); }
.phase__card{ padding:clamp(1rem,1.8vw,1.5rem); background:var(--card); }
.phase__title{
  margin:0;
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.7rem);
  font-weight:500; letter-spacing:-.055em; line-height:.9;
  color:var(--ink-2);
}
/* the title is the toggle: below desktop each phase opens on a tap, one at a time */
.phase__toggle{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem; align-items:end;
  width:100%; padding:0; margin:0; border:0; background:none; text-align:left;
  font:inherit; letter-spacing:inherit; line-height:inherit; color:inherit;
  cursor:pointer;
}
.phase__n{
  grid-column:1; display:block; margin-bottom:.65rem;
  font-size:var(--t-micro); letter-spacing:.12em; line-height:1.2; color:var(--ink);
}
.phase__name{ grid-column:1; transition:color .3s var(--ease); }
.phase__plus{ grid-column:2; grid-row:1 / span 2; align-self:center; position:relative; width:1.15rem; height:1.15rem; }
.phase__plus::before,.phase__plus::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px;
  background:var(--ink); transition:transform .45s var(--ease);
}
.phase__plus::after{ transform:rotate(90deg); }
.phase.is-active .phase__plus::after{ transform:rotate(0deg); }
.phase__body{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .6s var(--ease-io); }
.js .phase:not(.is-active) .phase__body{ grid-template-rows:0fr; }
.phase__inner{ min-height:0; overflow:hidden; display:grid; column-gap:clamp(1rem,2vw,1.5rem); }
.phase .tags{ margin-top:1.1rem; }
.phase .tags li{ background:#fff; border-color:#fff; color:var(--ink); }
.phase__inner > p{ margin:1.1rem 0 0; font-size:var(--t-small); line-height:1.62; color:var(--ink); max-width:46ch; }
.phase__img{ margin-top:1.1rem; overflow:hidden; background:var(--tint); }
.phase__img > picture{ height:100%; }      /* the picture sits between figure and img; without a height the img's 100% resolves to nothing */
.phase__img img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:640px){
  .phase__inner{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    grid-template-areas:"tags img" "text img";
    grid-template-rows:auto 1fr;
  }
  .phase .tags{ grid-area:tags; }
  .phase__inner > p{ grid-area:text; }
  .phase__img{ grid-area:img; }
}
/* phones: METHOD on end, down the whole screen, like FILMS */
@media (max-width:760px){
  .method__title{ position:relative; width:auto; height:min(104svh,62rem); overflow:visible; clip:auto; white-space:normal; margin:0 0 .5rem; }
  .method__title .pixword{ height:100%; width:auto; }
  .method__title-h{ display:none; }
}
.method__act{ margin-top:clamp(1rem,2vw,1.25rem); }

@media (min-width:1040px) and (min-height:620px){
  .js-reveal .method{ height:340vh; padding:0; position:relative; }
  .js-reveal .method__stage{
    position:sticky; top:0;
    height:100svh;
    padding:var(--gut) var(--gut) calc(var(--gut) + var(--bar-h) + var(--safe-b));
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:auto minmax(0,1fr);
    column-gap:var(--gap);
  }
  .js-reveal .method__title{ position:relative; width:auto; overflow:visible; clip:auto; white-space:normal; display:block; grid-column:1 / 3; grid-row:1 / -1; height:100%; }
  .js-reveal .method__title .pixword{ height:100%; width:auto; max-width:none; }
  .js-reveal .method__title-h{ display:none; }
  .js-reveal .method__intro{ grid-column:5 / 9; grid-row:1; align-self:start; margin:0; max-width:none; }
  .js-reveal .method__side{
    grid-column:7 / 13; grid-row:2;
    align-self:end;
    display:flex; flex-direction:column; align-items:flex-end;
  }
  .js-reveal .phases{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; width:100%; }
  .js-reveal .phase{
    position:relative; width:100%;
    height:14px;
    transition:height .75s var(--ease-align);
  }
  .js-reveal .phase.is-active{ height:var(--h,22rem); }
  .js-reveal .phase__card{
    position:absolute; right:0; bottom:0; width:100%;
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    grid-template-areas:"title img" "tags img" "text img";
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(1rem,2vw,1.5rem);
    /* collapsed, a card is only its bottom-right corner: a short grey bar */
    clip-path:inset(calc(100% - 14px) 0 0 calc(100% - 64px));
    transition:clip-path .75s var(--ease-align);
  }
  .js-reveal .phase.is-active .phase__card{ clip-path:inset(0 0 0 0); }
  /* on desktop the scroll opens the phases, so the body joins the card's grid and
     the title stops being a button */
  .js-reveal .phase__body,.js-reveal .phase__inner{ display:contents; }
  .js-reveal .phase__title{ grid-area:title; }
  .js-reveal .phase .tags{ grid-area:tags; }
  .js-reveal .phase__inner > p{ grid-area:text; }
  .js-reveal .phase__img{ grid-area:img; margin:0; }
  .js-reveal .phase__toggle{ cursor:default; pointer-events:none; }
  .js-reveal .phase__plus{ display:none; }
  .js-reveal .phase :is(.phase__title,.tags,.phase__inner > p,.phase__img){ opacity:0; transition:opacity .3s var(--ease); }
  .js-reveal .phase.is-active :is(.phase__title,.tags,.phase__inner > p,.phase__img){ opacity:1; transition:opacity .45s var(--ease) .4s; }
  .js-reveal .phase__img img{ aspect-ratio:auto; min-height:100%; }
}

/* ───────────────────────────────────────────────
   Values — the words hold still, the rooms rise past
   ─────────────────────────────────────────────── */

.values{ position:relative; }
.values__stage{
  position:sticky; top:0; z-index:0;
  height:100svh;
  display:grid; align-content:center;
  padding:0 var(--gut);
  overflow:hidden;
}
.values__words{
  margin:0;
  display:grid; gap:.02em;
  font-size:clamp(3rem,.9rem + 8.2vw,9.6rem);
  font-weight:500; letter-spacing:-.062em; line-height:.92;
  color:var(--ink);
}
.vword{ position:relative; display:block; width:max-content; max-width:100%; transition:transform .5s var(--ease-align); }
.vword--1{ margin-left:calc(var(--unit) * 3); }
.vword--2{ margin-left:calc(var(--unit) * 2); }
.vword--3{ margin-left:calc(var(--unit) * 1); }
.vword__ov{ display:none; }
.vnote{
  position:absolute; margin:0;
  max-width:13.5rem;
  font-size:var(--t-micro); letter-spacing:.1em; line-height:1.65; text-transform:uppercase;
  color:var(--ink);
}
.vnote > span{ display:block; }
.vnote--1{ top:22%; right:calc(var(--gut) + var(--unit) * 1); }
.vnote--2{ top:50%; left:var(--gut); max-width:min(13.5rem,calc(var(--unit) * 2 - 1rem)); }
.vnote--3{ bottom:20%; right:calc(var(--gut) + var(--unit) * 2); }
@media (max-width:760px){
  .vword--1,.vword--2,.vword--3{ margin-left:0; }
  .vword--2{ margin-left:8vw; }
  .vword--3{ margin-left:16vw; }
  .vnote{ position:static; margin-top:1rem; max-width:none; }
  .vnote--1{ margin-top:2rem; }
  .values__stage{ align-content:center; }
}

.values__float{
  position:relative; z-index:2;
  height:240svh;
  margin-top:-100svh;
  pointer-events:none;
}
.vf{ position:absolute; margin:0; width:var(--w); will-change:transform; }
.vf picture,.vf img{ display:block; width:100%; }
.vf img{ aspect-ratio:var(--ar,4/5); object-fit:cover; background:var(--tint); }
.vf figcaption{
  padding-top:.45rem;
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.vf--1{ top:34%; left:11vw;  --w:19vw; }
.vf--2{ top:42%; left:63vw;  --w:23vw; --ar:3/2; }
.vf--3{ top:57%; left:37vw;  --w:16vw; }
.vf--4{ top:68%; left:77vw;  --w:15vw; }
.vf--5{ top:80%; left:5vw;   --w:24vw; --ar:3/2; }
.vf--6{ top:88%; left:54vw;  --w:17vw; }
/* on a phone the rooms keep to the edges, as the reference's do, so the words stay legible */
@media (max-width:760px){
  .vf--1{ left:3vw;  --w:36vw; }
  .vf--2{ left:57vw; --w:40vw; }
  .vf--3{ left:5vw;  --w:32vw; }
  .vf--4{ left:63vw; --w:33vw; }
  .vf--5{ left:3vw;  --w:42vw; }
  .vf--6{ left:55vw; --w:41vw; }
}

/* the orange card rises over the words */
.studio{
  position:relative; z-index:3;
  margin:0 var(--gut);
  min-height:88svh;
  display:grid; place-items:center;
  overflow:hidden;
  background:var(--accent-ink);
  color:#fff;
  border-radius:3px;
}
.studio__bg{ position:absolute; inset:0; }
/* multiply can only darken: the card never gets lighter than --accent-ink, which is
   where white text measures 5.07:1. Lightening blends washed the copy out. */
.studio__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(1.08);
  mix-blend-mode:multiply;
  opacity:.5;
}
.studio__body{ position:relative; z-index:1; width:min(30rem,calc(100% - 2 * var(--gut))); padding:3rem 0 7rem; }
.studio__text{
  margin:0 0 1.6rem;
  font-size:var(--t-small); letter-spacing:.09em; line-height:1.7; text-transform:uppercase;
  text-align:justify;
  color:#fff;
}
.studio__act{ border:1px dashed rgba(255,255,255,.75); }
@media (max-width:520px){ .studio__text,.quote__cap{ text-align:left; } }   /* justified at this measure opens rivers */
.studio__eq{
  position:absolute; left:0; right:0; bottom:0;
  height:90px;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 var(--gut);
  pointer-events:none;
}
.studio__eq i{
  display:block;
  width:clamp(14px,2.6vw,40px);
  height:90px;
  background:repeating-linear-gradient(to top, rgba(255,255,255,.92) 0 5px, transparent 5px 10px);
  clip-path:inset(calc(100% - var(--n) * 10px) 0 0 0);
}

/* ───────────────────────────────────────────────
   Split sections — the heading holds its place
   while its content scrolls past it
   ─────────────────────────────────────────────── */

.sect{
  padding:clamp(4.5rem,10vw,9rem) var(--gut);
  scroll-margin-top:1rem;
}
@media (min-width:901px){
  .sect--split{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gap);
    align-items:start;
  }
  .sect--split > .sect__aside{ grid-column:1 / 5; position:sticky; top:clamp(3rem,12vh,7rem); }
  .sect--split > .sect__main{ grid-column:6 / 13; }
  .sect--split .display--sect{ max-width:13ch; }
}
.sect__aside .display--sect{ margin-bottom:0; }
@media (max-width:900px){ .sect__aside{ margin-bottom:clamp(2.25rem,6vw,3.5rem); } }
.sect__main > :first-child{ margin-top:0; }

/* ── where it goes ────────────────────────────── */

.plat{ width:100%; max-width:52rem; border-collapse:collapse; font-size:var(--t-small); }
.plat thead th{
  text-align:left; font-weight:500;
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
  padding:0 0 .9rem;
  border-bottom:1px dashed var(--dash);
}
.plat tbody th,.plat tbody td{
  text-align:left; font-weight:400;
  padding:clamp(.85rem,1.8vw,1.15rem) 0;
  border-bottom:1px dashed var(--dash);
  vertical-align:baseline;
  color:var(--ink);
  transition:padding-left .45s var(--ease), color .35s var(--ease);
}
.plat tbody th{ padding-right:1.5rem; }
.plat tbody td{ white-space:nowrap; width:1%; }
.plat tbody tr{ transition:background-color .4s var(--ease); }
.plat i{ font-style:normal; color:var(--ink-3); }
.plat tbody tr.no th{ font-weight:500; }
.plat tbody tr.no td{ color:var(--accent-ink); }
.dot{ display:inline-block; width:5px; height:5px; background:var(--ink-3); margin-right:.9em; vertical-align:.2em; }
.dot--no{ background:var(--accent-ink); transform:rotate(45deg); }
@media (max-width:520px){
  .plat tbody td{ white-space:normal; width:auto; text-align:right; }
  .plat i{ display:block; }
}

/* ── rates and paying ─────────────────────────── */

.pricing__head .display--sect{ max-width:12ch; }
.tiers{
  list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:var(--gap);
}
.tier{
  position:relative;
  display:flex; flex-direction:column; gap:.4rem;
  min-height:clamp(15rem,24vw,20rem);
  padding:clamp(1.15rem,2vw,1.6rem);
  transition:background-color .35s var(--ease);
}
.tier__name{ font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.tier__fig{
  display:flex; align-items:flex-start;
  margin-top:auto;
  font-size:clamp(3.6rem,2rem + 4.4vw,7rem);
  font-weight:500; letter-spacing:-.065em; line-height:.86;
  color:var(--ink);
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.tier__cur{ font-size:.4em; letter-spacing:0; margin:.12em .08em 0 0; }
.tier__per{ font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.tier__desc{ margin-top:.6rem; font-size:var(--t-small); line-height:1.6; color:var(--ink-2); max-width:34ch; }
.tier::after{
  content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; height:2px;
  background:var(--accent-ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.pricing__note{ margin-top:1.25rem; }

.pay{ margin-top:clamp(4rem,9vw,7rem); }
.pay__h{
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  font-size:clamp(1.7rem,1rem + 2.4vw,3rem);
  font-weight:500; letter-spacing:-.05em; line-height:.95;
  color:var(--ink);
}
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  background:var(--dash); border:1px dashed var(--dash);
}
.steps li{ display:flex; gap:clamp(1rem,2vw,1.5rem); padding:clamp(1.15rem,2.2vw,1.6rem); background:var(--paper); }
.steps li > span{ font-size:var(--t-micro); letter-spacing:.12em; color:var(--ink-3); padding-top:.2em; }
.steps h3,.steps h4{ margin:0 0 .45rem; font-size:var(--t-body); font-weight:500; letter-spacing:-.018em; color:var(--ink); }
.steps p{ margin:0; font-size:var(--t-small); line-height:1.6; color:var(--ink-2); max-width:44ch; }

/* ── enquiry ──────────────────────────────────── */

.enq{ max-width:36rem; }
.enq__row{ display:grid; gap:.45rem; margin:0 0 clamp(1rem,2.2vw,1.4rem); }
.enq label{ font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.enq input,.enq select,.enq textarea{
  font:inherit; font-size:var(--t-small); color:var(--ink);
  background:#EEEEEE;
  border:1px solid transparent;
  border-radius:0;
  padding:.85em .95em;
  width:100%;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.enq input::placeholder,.enq textarea::placeholder{ color:#8A8A8A; }
.enq textarea{ resize:vertical; min-height:6.5em; }
.enq__row--check label{
  display:flex; align-items:center; gap:.7em;
  text-transform:none; letter-spacing:normal;
  font-size:var(--t-small); color:var(--ink-2);
  min-height:44px; cursor:pointer;
}
.enq__row--check input{ width:auto; accent-color:var(--accent-ink); }
.enq input:focus,.enq select:focus,.enq textarea:focus{ outline:none; border-color:var(--accent-ink); background:var(--paper); }
.enq input:invalid:not(:placeholder-shown){ border-color:var(--accent-ink); }
.enq__act{ margin-top:.4rem; }
.enq__hint{ margin:1rem 0 0; font-size:var(--t-micro); line-height:1.7; color:var(--ink-3); max-width:44ch; }
.enq__done{ margin:1rem 0 0; font-size:var(--t-small); color:var(--accent-ink); }

/* ───────────────────────────────────────────────
   Start here — the tall dashed box
   ─────────────────────────────────────────────── */

.cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,42rem) minmax(0,1fr);
  column-gap:var(--gap);
  padding:clamp(4rem,10vw,8rem) var(--gut) clamp(5rem,10vw,8rem);
}
.cta__box{
  grid-column:2;
  min-height:min(48rem,88svh);
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  gap:2.5rem;
  padding:clamp(2rem,6vh,3.75rem) clamp(1.25rem,3vw,2.5rem);
  border:1px dashed var(--dash);
  text-align:center;
}
.cta__line{ font-size:clamp(1.8rem,1rem + 2.5vw,3.3rem); line-height:.98; max-width:15ch; margin:0 auto; }
.cta__side{
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink);
}
.cta__side--l{ grid-column:1; grid-row:1; justify-self:end; align-self:start; margin-top:16%; }
.cta__side--r{ grid-column:3; grid-row:1; justify-self:start; align-self:end; margin-bottom:16%; }
@media (max-width:760px){
  .cta{ grid-template-columns:minmax(0,1fr); }
  .cta__box{ grid-column:1; min-height:70svh; }
  .cta__side{ display:none; }
}

/* ───────────────────────────────────────────────
   Footer
   ─────────────────────────────────────────────── */

.foot{ padding:clamp(5rem,12vw,9rem) var(--gut) calc(var(--gut) + var(--safe-b)); }
.foot__top{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap); row-gap:2rem;
  align-items:start;
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
  font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
}
.foot__nav{ grid-column:1 / 5; list-style:none; margin:0; padding:0; line-height:1.95; }
.foot__nav a,.foot__up{ text-decoration:none; color:var(--ink); transition:color .3s var(--ease); }
.foot__mid{ grid-column:7 / 10; }
.foot__mail{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.4rem; }
.foot__email{
  display:inline-block; padding:.35em .6em;
  background:rgba(222,115,86,.10); color:var(--accent-dk);
  text-transform:none; letter-spacing:.02em;
  text-decoration:none;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.foot__copy,.foot__key{
  font:inherit; font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:var(--card); border:0;
  padding:.35em .6em; cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.foot__small{ margin:0; color:var(--ink-3); line-height:1.8; }
.foot__clock{ color:var(--ink); }
.foot__end{ grid-column:10 / 13; display:grid; justify-items:end; gap:1.1rem; text-align:right; }
.foot__key kbd{ font:inherit; padding:0 .3em; border:1px solid var(--dash); margin-right:.35em; }
@media (hover:none),(pointer:coarse){ .foot__key{ display:none; } }   /* a keyboard toy */
.foot__word .pixword{ width:100%; height:auto; }
.foot__word .pixword rect{ transition:fill .5s var(--ease); transition-delay:calc(var(--i) * 3ms); }
.foot__legal{ margin:1.1rem 0 0; font-size:var(--t-micro); letter-spacing:.06em; color:var(--ink-3); }
@media (max-width:760px){
  .foot__nav,.foot__mid,.foot__end{ grid-column:1 / -1; }
  .foot__end{ justify-items:start; text-align:left; }
}

/* ───────────────────────────────────────────────
   Scroll reveal. Content is visible by default; JS
   adds .js-reveal to <html> and only then does
   anything hide, so a page without JS, or with
   reduced motion, is complete the moment it loads.
   ─────────────────────────────────────────────── */

.js-reveal [data-split] .ln{
  display:block;
  transform:translateY(105%);
  transition:transform .95s var(--ease);
}
.js-reveal [data-split] .ln-wrap{
  display:block;
  overflow:hidden;
  padding-bottom:.16em;      /* the mask must clear descenders, the g in "through" */
  margin-bottom:-.16em;      /* ...without changing the line spacing */
}
.js-reveal [data-split].is-in .ln{ transform:translateY(0); }
.js-reveal [data-split] .ln-wrap:nth-child(2) .ln{ transition-delay:.07s; }
.js-reveal [data-split] .ln-wrap:nth-child(3) .ln{ transition-delay:.14s; }
.js-reveal [data-split] .ln-wrap:nth-child(4) .ln{ transition-delay:.21s; }

.js-reveal .tier,
.js-reveal .tags li,
.js-reveal .steps li,
.js-reveal .films:not(.is-pinned) .film-card{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), background-color .35s var(--ease), border-color .5s var(--ease);
}
.js-reveal .tier.is-in,
.js-reveal .tags li.is-in,
.js-reveal .steps li.is-in,
.js-reveal .films:not(.is-pinned) .film-card.is-in{ opacity:1; transform:none; }
.js-reveal .tags li{ transition-delay:calc(var(--i,0) * 38ms); }
.js-reveal .tier:nth-child(2),.js-reveal .steps li:nth-child(2){ transition-delay:.08s; }
.js-reveal .tier:nth-child(3),.js-reveal .steps li:nth-child(3){ transition-delay:.16s; }

/* the opening, as a sequence */
.js-reveal .plate__stage{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease); }
.js-reveal .hero.is-in .plate__stage{ clip-path:inset(0 0 0 0); }
.js-reveal .plate--2 .plate__stage{ transition-delay:.1s; }
.js-reveal .plate--3 .plate__stage{ transition-delay:.2s; }
.js-reveal .plate--4 .plate__stage{ transition-delay:.3s; }
@keyframes platePush{ from{ transform:scale(var(--push,1.18)); } to{ transform:scale(1); } }
.js-reveal .plate__still,
.js-reveal .plate__film{ transform:scale(var(--push,1.18)); transform-origin:50% 52%; }
.js-reveal .hero.is-in .plate__still,
.js-reveal .hero.is-in .plate__film{ animation:platePush 2.4s var(--ease-soft) both; }
.plate--2,.plate--3,.plate--4{ --push:1.12; }
.js-reveal .hero.is-in .plate--2 .plate__still{ animation-delay:.1s; }
.js-reveal .hero.is-in .plate--3 .plate__still{ animation-delay:.2s; }
.js-reveal .hero.is-in .plate--4 .plate__still{ animation-delay:.3s; }
.js-reveal .plate{ border-color:transparent; }
.js-reveal .hero.is-in .plate{ border-color:var(--dash); transition:border-color .9s var(--ease) .6s, width .8s var(--ease-io), opacity .5s var(--ease); }
.js-reveal .plate__cap,.js-reveal .plate__no{ opacity:0; transform:translateY(6px); transition:opacity .7s var(--ease) .55s, transform .7s var(--ease) .55s, grid-template-rows .8s var(--ease-io), color .4s var(--ease); }
.js-reveal .hero.is-in .plate__cap,.js-reveal .hero.is-in .plate__no{ opacity:1; transform:none; }

/* the wordmark arrives a letter at a time */
.js-reveal [data-chars] .ch-wrap{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.js-reveal [data-chars] .ch{
  display:inline-block;
  transform:translateY(105%) rotate(4deg);
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--i) * 52ms);
}
.js-reveal [data-chars].is-in .ch{ transform:none; }

.js-reveal .hero__kicker,
.js-reveal .hero__act,
.js-reveal .chev--hero rect{
  opacity:0; transform:translateY(10px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js-reveal .hero__kicker{ transition-delay:.3s; }
.js-reveal .hero__act{ transition-delay:.78s; }
.js-reveal .chev--hero rect{ transform:translateX(-12px); transition-delay:calc(.5s + var(--i) * 18ms); }
.js-reveal .hero.is-in .hero__kicker,
.js-reveal .hero.is-in .hero__act,
.js-reveal .hero.is-in .chev--hero rect{ opacity:1; transform:none; }
.js-reveal .hero__def .ln{ transition-delay:.62s !important; }
.js-reveal .hero__def .ln-wrap:nth-child(2) .ln{ transition-delay:.7s !important; }

/* the dashed frame draws itself around a button */
.js-reveal .hero__act,.js-reveal .films__act,.js-reveal .method__act,.js-reveal .enq__act{ position:relative; border-color:transparent; }
.js-reveal .hero__act::after,.js-reveal .films__act::after,.js-reveal .method__act::after,.js-reveal .enq__act::after{
  content:""; position:absolute; inset:-1px;
  border:1px dashed var(--dash);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s var(--ease) .3s;
  pointer-events:none;              /* decoration painted over the link */
}
.js-reveal .hero.is-in .hero__act::after{ transition-delay:.9s; }
.js-reveal .hero.is-in .hero__act::after,
.js-reveal .films__act.is-in::after,
.js-reveal .method__act.is-in::after,
.js-reveal .enq__act.is-in::after{ clip-path:inset(0); }

/* the phone opening */
.js-reveal .run__frames{ opacity:0; transition:opacity 1s var(--ease) .2s; }
.js-reveal .hero.is-in .run__frames{ opacity:1; }
.js-reveal .run .dr__lit{ opacity:0; transition:opacity 1.1s var(--ease) .5s; }
.js-reveal .hero.is-in .run .dr__lit{ opacity:1; }

/* the films word sweeps in a bar at a time */
.js-reveal .films__title .pixword:not(.is-ov) rect,
.js-reveal .method__title-h .pixword:not(.is-ov) rect,
.js-reveal .foot__word .pixword rect{ opacity:0; transition:opacity .5s var(--ease), fill .45s var(--ease); transition-delay:calc(var(--i) * 6ms); }
.js-reveal .films__title.is-in .pixword rect,
.js-reveal .method__title-h.is-in .pixword rect,
.js-reveal .foot__word.is-in .pixword rect{ opacity:1; }

/* the vertical word grows down the left edge */
.js-reveal .method__title .pixword:not(.is-ov) rect{ opacity:0; transition:opacity .45s var(--ease); transition-delay:calc(var(--i) * 5ms); }
.js-reveal .method__title.is-in .pixword rect{ opacity:1; }

/* A mask, not a clip-path: IntersectionObserver applies an element's own clip-path,
   so a block clipped to nothing is never reported as on screen and never reveals. */
.js-reveal .quote__cap,.js-reveal .films__intro,.js-reveal .method__intro{
  -webkit-mask-image:linear-gradient(90deg,#000 0 50%,transparent 50% 100%);
          mask-image:linear-gradient(90deg,#000 0 50%,transparent 50% 100%);
  -webkit-mask-size:200% 100%; mask-size:200% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  transition:-webkit-mask-position 1s var(--ease-align) .2s, mask-position 1s var(--ease-align) .2s;
}
.js-reveal .quote__cap.is-in,.js-reveal .films__intro.is-in,.js-reveal .method__intro.is-in{
  -webkit-mask-position:0 0; mask-position:0 0;
}
.js-reveal .chev--l rect,.js-reveal .chev--r rect{ opacity:0; transition:opacity .5s var(--ease); transition-delay:calc(var(--i) * 22ms); }
.js-reveal .chev--l.is-in rect,.js-reveal .chev--r.is-in rect{ opacity:1; }

/* values: orange blocks lift off the words, which step into line */
.js-reveal .vword__ov{
  display:block;
  position:absolute; left:-.05em; right:-.05em; top:.1em; bottom:.04em;
  background:var(--accent);
  clip-path:inset(0 0 0 0);
  transition:clip-path .5s var(--ease-align);
}
.js-reveal .values:not(.is-revealed) .vword--1{ transform:translateX(calc(var(--unit) * -2)); }
.js-reveal .values:not(.is-revealed) .vword--2{ transform:translateX(calc(var(--unit) * -1)); }
.js-reveal .values.is-revealed .vword__ov{ clip-path:inset(0 0 0 100%); }
.js-reveal .values.is-revealed .vword--2 .vword__ov{ transition-delay:.06s; }
.js-reveal .values.is-revealed .vword--3 .vword__ov{ transition-delay:.12s; }
.js-reveal .vnote > span{ clip-path:inset(0 100% 0 0); transition:clip-path .6s var(--ease-align); }
.js-reveal .values.is-revealed .vnote > span{ clip-path:inset(0); transition-delay:.55s; }
.js-reveal .values.is-revealed .vnote--2 > span{ transition-delay:.65s; }
.js-reveal .values.is-revealed .vnote--3 > span{ transition-delay:.75s; }
@media (max-width:760px){ .js-reveal .values:not(.is-revealed) .vword{ transform:none; } }

/* the equaliser along the foot of the studio card */
.js-reveal .studio__eq i{ animation:eq var(--d) steps(1) var(--o) infinite; }
@keyframes eq{
  0%  { clip-path:inset(calc(100% - var(--n) * 10px) 0 0 0); }
  25% { clip-path:inset(calc(100% - (var(--n) - 2) * 10px) 0 0 0); }
  50% { clip-path:inset(calc(100% - (var(--n) + 1) * 10px) 0 0 0); }
  75% { clip-path:inset(calc(100% - (var(--n) - 1) * 10px) 0 0 0); }
  100%{ clip-path:inset(calc(100% - var(--n) * 10px) 0 0 0); }
}

/* ───────────────────────────────────────────────
   Hover, pointer devices only
   ─────────────────────────────────────────────── */

@media (hover:hover) and (pointer:fine){
  .btn:hover::before,.bar__cta:hover::before{ transform:scaleX(1); }
  .btn--quiet:hover,.btn--light:hover{ color:#fff; }
  .btn--wide:hover .btn__label{ transform:translateY(-105%); opacity:0; }
  .btn--wide:hover .btn__alt{ transform:none; opacity:1; }

  .bar__box:hover{ color:var(--accent-ink); }
  .bar__mark:hover .bar__lit{ fill:var(--accent-ink); }
  .menu a:hover{ background:var(--tint); color:var(--accent-ink); padding-left:1.4em; }

  .tags li:hover{ background:var(--accent-ink) !important; border-color:var(--accent-ink) !important; color:#fff !important; transform:translateY(-2px); }

  /* the films heading: the whole word lights, left to right */
  .films__title:hover .pixword rect,
  .method__title-h:hover .pixword rect,
  .foot__word:hover .pixword rect{ fill:var(--accent); }

  /* the plates open wider on hover and say what they are */
  .hero__plates:hover .plate:not(:hover){ opacity:.72; }
  .plate:hover{ border-color:var(--accent-ink) !important; z-index:5; }
  .plate:hover .plate__cap{ color:var(--ink); }
  .plate:hover .plate__desc{ grid-template-rows:1fr; }
  .plate:hover .plate__desc > span{ opacity:1; transition:opacity .4s var(--ease) .5s; }

  .film-card:hover{ border-color:var(--accent-ink); }
  .film-card:hover .film-card__name{ color:var(--accent-ink); }
  .film-card:hover .film-card__v{ transform:scale(1.04); }

  .plat tbody tr:hover{ background:var(--tint); }
  .plat tbody tr:hover th,.plat tbody tr:hover td{ padding-left:.55rem; }

  .tier:hover{ background:var(--tint); }
  .tier:hover::after{ transform:scaleX(1); }
  .tier:hover .tier__fig{ color:var(--accent-ink); transform:translateX(4px); }

  .foot__nav a:hover,.foot__up:hover{ color:var(--accent-ink); }
  .foot__email:hover{ background:var(--accent-ink); color:#fff; }
  .foot__copy:hover,.foot__key:hover{ background:var(--accent-ink); color:#fff; }
}
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .plate--1:hover{ --w:min(28vw,54vh); }
  .plate--2:hover{ --w:min(20vw,38vh); }
  .plate--3:hover{ --w:min(19.5vw,37vh); }
  .plate--4:hover{ --w:min(34vw,62vh); }
}

/* ───────────────────────────────────────────────
   Phones, iPads and touch
   ─────────────────────────────────────────────── */

a,button,label{ -webkit-tap-highlight-color:transparent; }

/* thumb-sized controls, and form text iOS will not zoom into */
@media (pointer:coarse){
  .bar__box,.bar__cta,.bar__mark{ min-height:44px; }
  .bar__plus{ width:44px; }
  .enq input,.enq select,.enq textarea{ font-size:16px; }   /* under 16px, iOS zooms the page on focus */
  /* there is no hover on glass, so a press gets the same answer */
  .btn:active::before,.bar__cta:active::before{ transform:scaleX(1); transition-duration:.25s; }
  .film-card:active,.plate:active{ border-color:var(--accent-ink); }
  .film-card:active .film-card__name,.phase__toggle:active .phase__name{ color:var(--accent-ink); }
}

/* an iPad Pro upright with a trackpad: hover opens from the portrait sizes, not the landscape ones */
@media (min-width:761px) and (orientation:portrait) and (hover:hover) and (pointer:fine){
  .plate--1:hover{ --w:min(44vw,38vh); }
  .plate--2:hover,.plate--3:hover{ --w:min(32vw,28vh); }
  .plate--4:hover{ --w:min(52vw,36vh); }
}

/* phones: the bar spans the screen, as the reference's does */
@media (max-width:760px){
  .bar{ left:var(--gut); right:var(--gut); transform:none; max-width:none; }
  .bar.is-away{ transform:translateY(calc(100% + 2.5rem + var(--safe-b))); }
  .menu{ left:var(--gut); right:var(--gut); width:auto; transform:translateY(.75rem); }
  .menu.is-open{ transform:none; }
}
@media (max-width:640px){
  .tier{ min-height:0; }
  .tier__fig{ margin-top:1.4rem; }
}

/* any screen too short for a pinned scene or a full-height block */
@media (max-height:500px) and (orientation:landscape){
  .values__words{ font-size:min(clamp(3rem,.9rem + 8.2vw,9.6rem), 18svh); }
  .quote,.studio,.cta__box{ min-height:0; }
}

/* ── reduced motion ───────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .run .dr,.run .dr__lit,.run__frames{ animation:none !important; }
  .plate__film{ opacity:0 !important; }
  .cursor{ display:none !important; }
  .menu.is-open li{ animation:none !important; }
  .btn__alt{ transform:none !important; }
}

/* ───────────────────────────────────────────────
   Film pages
   ─────────────────────────────────────────────── */

.filmnav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1.25rem,3vh,2rem) var(--gut) 0;
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.filmnav a{ display:inline-flex; align-items:center; gap:.6em; min-height:44px; text-decoration:none; color:var(--ink); }
.filmnav i{ font-style:normal; transition:transform .35s var(--ease); display:inline-block; }

.filmhead{ padding:clamp(2rem,6vh,4rem) var(--gut) clamp(1.5rem,4vh,2.5rem); }
.filmhead .display{ max-width:none; }
.filmhead__meta{
  margin:clamp(1rem,2.5vh,1.75rem) 0 0;
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

.filmstage{ margin:0 var(--gut) clamp(2rem,6vh,4rem); padding:10px; }
.filmstage__v{ width:100%; height:auto; display:block; background:var(--tint); }
.filmstage__cap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem;
  margin:0; padding:.85rem .25rem .3rem;
  font-size:var(--t-small); color:var(--ink-2);
}
.filmstage__cap span{ max-width:58ch; }
.filmstage__cap .inline{ white-space:nowrap; margin-left:auto; color:var(--accent-ink); }

.route{ list-style:none; margin:0; padding:0; border-top:1px dashed var(--dash); }
.route li{ display:block; padding:0; border-bottom:1px dashed var(--dash); }
.route__btn{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:1.25rem;
  width:100%; min-height:48px;
  padding:.85rem .25rem;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:var(--t-small); color:var(--ink); text-align:left;
  transition:background-color .3s var(--ease), padding-left .3s var(--ease), color .3s var(--ease);
}
.route__n,.route__t{ font-size:var(--t-micro); letter-spacing:.1em; color:var(--ink-3); transition:color .3s var(--ease); }
.route__btn[aria-current="true"],
.route__btn[aria-current="true"] .route__n,
.route__btn[aria-current="true"] .route__t{ color:var(--accent-ink); }

.notes{ display:grid; gap:clamp(1.5rem,3vw,2.25rem); margin-top:clamp(2.5rem,5vw,3.5rem); }
.note-item h3{ margin:0 0 .6rem; font-size:var(--t-body); font-weight:500; letter-spacing:-.018em; color:var(--ink); }
.note-item p{ margin:0; font-size:var(--t-small); line-height:1.68; color:var(--ink-2); max-width:54ch; }

.filmpager{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin:0 var(--gut);
  padding:clamp(2rem,5vh,3.5rem) 0;
  border-top:1px dashed var(--dash);
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
}
.filmpager a{ display:inline-flex; align-items:center; gap:.6em; min-height:44px; text-decoration:none; color:var(--ink); transition:color .3s var(--ease); }
.filmpager i{ font-style:normal; display:inline-block; transition:transform .35s var(--ease); }

@media (hover:hover) and (pointer:fine){
  .filmnav a:hover{ color:var(--accent-ink); }
  .filmnav a:hover i{ transform:translateX(-.3em); }
  .filmpager a:hover{ color:var(--accent-ink); }
  .filmpager a:hover i:last-child{ transform:translateX(.3em); }
  .route__btn:hover{ background:var(--tint); padding-left:.75rem; color:var(--accent-ink); }
  .route__btn:hover .route__n,.route__btn:hover .route__t{ color:var(--accent-ink); }
}