/* ==========================================================================
   TEATRO V3 · VARIATION A · PAPER PLAYHOUSE
   --------------------------------------------------------------------------
   A pop-up book / toy paper theatre. Colour is the Teatro palette unchanged
   (bone paper, warm ink, one oxblood). Depth comes from stacked sheets with
   real shadows, never from glow.

   Authoring rule: every element's RESTING state is written here, in CSS.
   JavaScript only animates *towards* it, so no-JS and reduced-motion
   visitors always get the finished page.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --paper-0:#FBF7F4;  --paper-50:#F4EDEA; --paper-100:#EDE4E0; --paper-200:#E4D8D3; --paper-300:#D8C9C4;
  --ink-900:#14100F;  --ink-700:#3A3230;  --ink-500:#6B605D;   --ink-300:#A39692;
  --red-300:#C4424E;  --red-400:#9E2C35;  --red-500:#83242C;   --red-600:#5A161D; --red-700:#3E0F14;

  --f-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-body:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter:clamp(20px, 5vw, 84px);
  --maxw:1360px;

  /* Paper shadows: tight contact shadow + soft ambient, tinted warm. */
  --lift-1:0 1px 1px rgb(20 16 15 / .07), 0 2px 6px -1px rgb(20 16 15 / .09);
  --lift-2:0 1px 2px rgb(20 16 15 / .08), 0 8px 16px -6px rgb(20 16 15 / .14), 0 22px 40px -18px rgb(62 15 20 / .22);
  --lift-3:0 2px 3px rgb(20 16 15 / .08), 0 16px 30px -10px rgb(20 16 15 / .2), 0 44px 80px -28px rgb(62 15 20 / .34);

  --ease-out:cubic-bezier(.16, .84, .24, 1);
  --ease-pop:cubic-bezier(.22, 1.28, .36, 1);   /* paper spring: a small overshoot */

  /* Paper fibre, applied per sheet (never as a fixed overlay). */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .06 0 0 0 0 .06 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Die-cut shapes for the tunnel book (black = the hole). */
  --shape-rect:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='4' y='10' width='92' height='80' rx='3'/%3E%3C/svg%3E");
  --shape-arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 100V44a36 36 0 0 1 72 0v56z'/%3E%3C/svg%3E");
  --shape-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='44'/%3E%3C/svg%3E");
  --shape-scallop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6a9 9 0 0 1 15.6 4.2a9 9 0 0 1 16.2 2.6a9 9 0 0 1 11 12.2a9 9 0 0 1 4 16a9 9 0 0 1 -1.4 16.4a9 9 0 0 1 -6.6 15a9 9 0 0 1 -12.4 10.8a9 9 0 0 1 -15.8 4.6a9 9 0 0 1 -16.4 0a9 9 0 0 1 -15.8 -4.6a9 9 0 0 1 -12.4 -10.8a9 9 0 0 1 -6.6 -15a9 9 0 0 1 -1.4 -16.4a9 9 0 0 1 4 -16a9 9 0 0 1 11 -12.2a9 9 0 0 1 16.2 -2.6A9 9 0 0 1 50 6z'/%3E%3C/svg%3E");
  --shape-lozenge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 94 50 50 97 6 50z'/%3E%3C/svg%3E");
  --shape-keyhole:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4a30 30 0 0 1 16 55.4L80 97H20l14-37.6A30 30 0 0 1 50 4z'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset & base ---------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px; }
.reduced{ scroll-behavior:auto; }
body{
  font:400 1rem/1.72 var(--f-body);
  color:var(--ink-500);
  background:var(--paper-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img, svg, video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
ul, ol{ list-style:none; }
h1, h2, h3{ color:var(--ink-900); font-weight:400; }
:where(a, button, [tabindex]):focus-visible{ outline:2px solid var(--red-500); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--red-500); color:var(--paper-0); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:16px; top:-60px; z-index:200; background:var(--ink-900); color:var(--paper-0); padding:.7rem 1rem; border-radius:3px; text-decoration:none; transition:top .2s; }
.skip:focus{ top:16px; }

.label{
  font:500 .72rem/1.3 var(--f-body);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-500);
  display:inline-flex; align-items:center; gap:.6em;
}
.dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--red-500); box-shadow:0 1px 0 rgb(20 16 15 / .25); display:inline-block; flex:none; }
.red{ color:var(--red-500); font-style:italic; }

.sec-head{ margin-bottom:clamp(36px, 5vw, 72px); }
.sec-head .label{ margin-bottom:18px; }
.sec-head--split{ display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:end; }
.sec-head__aside{ max-width:40ch; justify-self:end; }
.sec-title{
  font-family:var(--f-display); font-weight:360;
  font-size:clamp(2.4rem, 5.4vw, 5rem); line-height:1; letter-spacing:-.025em;
  font-variation-settings:"SOFT" 100, "WONK" 0, "opsz" 144;
}

/* A sheet of paper. */
.sheet{ position:relative; background:var(--grain), var(--paper-0); box-shadow:var(--lift-2); border-radius:2px; }

/* ---------- 3. Buttons: paper tabs with a dog-ear on hover --------------- */
.btn{
  --fold:var(--paper-200); --behind:var(--paper-0);
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  padding:.95rem 1.55rem; border-radius:3px; border:0; cursor:pointer;
  font:500 .9rem/1 var(--f-body); letter-spacing:.02em; text-decoration:none;
  box-shadow:var(--lift-1);
  transition:transform .45s var(--ease-pop), box-shadow .35s var(--ease-out), background-color .3s;
}
.btn::after{            /* the dog-ear: page background on one half, the paper's back on the other */
  content:''; position:absolute; top:0; right:0; width:0; height:0;
  background:linear-gradient(225deg, var(--behind) 50%, var(--fold) 50%);
  border-bottom-left-radius:3px; box-shadow:-1px 1px 2px rgb(20 16 15 / .18);
  transition:width .3s var(--ease-out), height .3s var(--ease-out);
}
.btn--ink{ background:var(--red-500); color:var(--paper-0); --fold:var(--red-300); }
.btn--paper{ background:var(--grain), var(--paper-0); color:var(--ink-900); box-shadow:var(--lift-1), inset 0 0 0 1px var(--paper-300); }
.btn:hover{ transform:translateY(-3px) rotate(-.8deg); box-shadow:var(--lift-2); }
.btn:hover::after{ width:15px; height:15px; }
.btn:active{ transform:translateY(1px) scale(.98); box-shadow:inset 0 2px 5px rgb(20 16 15 / .28); transition-duration:.08s; }
.btn:active::after{ width:0; height:0; }
.about .btn, .identity .btn, .clients .btn, .services .btn{ --behind:var(--paper-50); }
.banner .btn{ --behind:var(--red-500); }

.round-btn{
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:var(--grain), var(--paper-0); color:var(--ink-900); font-size:1.1rem;
  box-shadow:var(--lift-1), inset 0 0 0 1px var(--paper-300);
  transition:transform .4s var(--ease-pop), box-shadow .3s;
}
.round-btn--ink{ background:var(--red-500); color:var(--paper-0); box-shadow:var(--lift-1); }
.round-btn:hover{ transform:translateY(-3px); box-shadow:var(--lift-2); }
.round-btn:active{ transform:translateY(1px) scale(.94); box-shadow:inset 0 2px 5px rgb(20 16 15 / .3); }

.chip{
  border:0; cursor:pointer; padding:.6rem 1.05rem; border-radius:999px;
  background:var(--paper-0); color:var(--ink-700); font:500 .82rem/1 var(--f-body);
  box-shadow:var(--lift-1), inset 0 0 0 1px var(--paper-300);
  transition:transform .4s var(--ease-pop), background-color .3s, color .3s, box-shadow .3s;
}
.chip:hover{ transform:translateY(-2px); box-shadow:var(--lift-2); }
.chip[aria-pressed="true"]{ background:var(--red-500); color:var(--paper-0); box-shadow:inset 0 2px 4px rgb(20 16 15 / .3); transform:none; }

/* ---------- 4. Loader: the slipcase -------------------------------------- */
.slip{ display:none; }
.js:not(.reduced):not(.seen) .slip{ display:block; position:fixed; inset:0; z-index:100; }
.slip__table{ position:absolute; inset:0; background:var(--grain), var(--paper-100); }
.slip__set{ position:absolute; left:50%; top:54%; width:min(340px, 74vw); aspect-ratio:3 / 4.1; translate:-50% -50%; }
.slip__card{
  position:absolute; inset:3% 6% 2%; border-radius:4px;
  background:var(--grain), var(--paper-0); box-shadow:var(--lift-2);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:27%;
}
.slip__mark{ width:44%; aspect-ratio:176.6 / 140.4; fill:var(--red-500); }
.slip__card-line{ margin-top:16%; font:italic 400 .95rem var(--f-display); color:var(--ink-500); }
.slip__tab{
  position:absolute; top:-40px; left:50%; translate:-50% 0; width:92px; height:48px;
  border-radius:10px 10px 0 0; background:var(--grain), var(--paper-0);
  box-shadow:0 -2px 6px rgb(20 16 15 / .08);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.slip__tab-grip{ width:28px; height:3px; border-radius:2px; background:var(--paper-300); box-shadow:0 5px 0 var(--paper-300); }
.slip__tab-label{ font:600 .62rem/1 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-500); margin-top:6px; }
.slip__sleeve{
  position:absolute; inset:0; border-radius:6px;
  background:
    repeating-linear-gradient(90deg, rgb(20 16 15 / .05) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, var(--red-400), var(--red-500) 40%, var(--red-600));
  box-shadow:var(--lift-3);
  -webkit-mask:radial-gradient(ellipse 30% 22% at 50% 36%, transparent 98%, #000 100%), radial-gradient(circle 34px at 50% 0, transparent 97%, #000 100%);
  -webkit-mask-composite:source-in;
          mask:radial-gradient(ellipse 30% 22% at 50% 36%, transparent 98%, #000 100%), radial-gradient(circle 34px at 50% 0, transparent 97%, #000 100%);
          mask-composite:intersect;
}
.slip__title{ position:absolute; left:0; right:0; bottom:22%; text-align:center; font:360 clamp(2.2rem, 7vw, 2.8rem)/1 var(--f-display); color:var(--paper-0); letter-spacing:-.02em; }
.slip__sub{ position:absolute; left:0; right:0; bottom:14%; text-align:center; font:500 .64rem/1 var(--f-body); letter-spacing:.22em; text-transform:uppercase; color:rgb(251 247 244 / .72); }
.slip__meter{ position:absolute; left:22%; right:22%; bottom:8%; height:2px; background:rgb(251 247 244 / .22); border-radius:2px; overflow:hidden; }
.slip__meter-fill{ position:absolute; inset:0; background:var(--paper-0); transform-origin:0 50%; transform:scaleX(0); }

/* ---------- 5. Header, thumb index, index sheet -------------------------- */
.top{ position:absolute; inset:0 0 auto; z-index:30; padding-top:22px; }
.top__row{ display:flex; align-items:center; gap:24px; }
.top__meta{ margin-left:auto; }
.brand{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink-900); }
.brand__mark{ width:44px; aspect-ratio:176.6 / 140.4; fill:var(--red-500); transition:transform .5s var(--ease-pop); }
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.08); }
.brand__word{ font:400 1.45rem/1 var(--f-display); letter-spacing:-.02em; font-variation-settings:"SOFT" 100; }
.top__cta{ padding:.75rem 1.2rem; font-size:.82rem; }
.index-btn{ display:none; }

.thumbs{ position:fixed; right:0; top:50%; translate:0 -50%; z-index:40; display:flex; flex-direction:column; gap:4px; }
.thumb{
  --peek:40px;
  display:flex; align-items:center; gap:10px; height:50px; padding:0 18px 0 0; min-width:150px;
  text-decoration:none; color:var(--ink-700);
  background:var(--grain), var(--paper-100); border-radius:9px 0 0 9px;
  box-shadow:-2px 2px 5px rgb(20 16 15 / .13), inset 1px 0 0 rgb(251 247 244 / .8);
  translate:calc(100% - var(--peek)) 0;
  transition:translate .5s var(--ease-pop), background-color .3s, color .3s;
}
.thumb__n{ width:var(--peek); text-align:center; flex:none; font:italic 500 .95rem/1 var(--f-display); }
.thumb__t{ font:500 .8rem/1 var(--f-body); letter-spacing:.04em; }
.thumb:hover, .thumb:focus-visible{ translate:0 0; }
.thumb.is-on{ --peek:52px; background:var(--red-500); color:var(--paper-0); box-shadow:-3px 3px 8px rgb(62 15 20 / .3); }
.thumb.is-on:hover{ translate:0 0; }

.index-sheet{ position:fixed; inset:0; z-index:90; background:rgb(20 16 15 / .35); display:flex; align-items:flex-end; }
.index-sheet[hidden]{ display:none; }
.index-sheet__paper{
  width:100%; padding:28px var(--gutter) 34px; border-radius:14px 14px 0 0;
  background:var(--grain), var(--paper-0); box-shadow:var(--lift-3);
  animation:sheet-in .5s var(--ease-pop);
}
@keyframes sheet-in{ from{ transform:translateY(100%); } }
.index-sheet__list{ counter-reset:i; margin:16px 0 22px; }
.index-sheet__list a{ counter-increment:i; display:flex; gap:14px; padding:.55rem 0; border-bottom:1px solid var(--paper-200); font:400 1.6rem/1.2 var(--f-display); color:var(--ink-900); text-decoration:none; }
.index-sheet__list a::before{ content:counter(i, upper-roman); width:2.2em; font-style:italic; color:var(--red-500); font-size:1rem; padding-top:.45rem; }
.index-sheet__close{ border:0; background:none; font:500 .8rem var(--f-body); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; color:var(--ink-500); }

/* ---------- 6. The tear: torn-paper dividers ----------------------------- */
.tear{ position:relative; z-index:4; height:64px; margin-block:-32px; pointer-events:none; }
.no-js .tear{ display:none; }
.tear::before{ content:''; position:absolute; left:0; right:0; top:10%; bottom:10%; background:var(--red-500); }
.tear__half{ position:absolute; inset:0; filter:drop-shadow(0 1px 1.5px rgb(20 16 15 / .22)); will-change:transform; }
.tear__half > span{ position:absolute; inset:0; }
.tear__half--top > span{ background:var(--grain), var(--top); }
.tear__half--bot > span{ background:var(--grain), var(--bot); }
.reduced .tear__half--top{ transform:translateY(-4px); }
.reduced .tear__half--bot{ transform:translateY(4px); }

/* ---------- 7. Scene 01 · Hero ------------------------------------------- */
.stage{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; padding:120px 0 48px; background:var(--grain), var(--paper-0); }
.stage__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px, 4vw, 72px); align-items:center; flex:1; }
.stage__kicker{ margin-bottom:26px; }
.stage__title{
  font-family:var(--f-display); font-weight:330;
  font-size:clamp(3.1rem, 7.4vw, 8rem); line-height:.93; letter-spacing:-.035em;
  font-variation-settings:"SOFT" 100, "WONK" 1, "opsz" 144;
}
.pop-line{ display:block; perspective:720px; perspective-origin:50% 120%; }
.pop{ display:inline-block; transform-origin:50% 86%; backface-visibility:hidden; }
.pop--red{ color:var(--red-500); font-style:italic; }
.amp{ font-style:italic; color:var(--ink-500); }
.stage__lead{ margin-top:30px; max-width:30ch; font-size:clamp(1.02rem, 1.3vw, 1.2rem); color:var(--ink-700); }
.stage__actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }
.stage__foot{ display:flex; justify-content:space-between; align-items:center; margin-top:40px; }
.stage__cue{ text-decoration:none; }
.stage__cue span{ display:inline-block; transition:transform .4s var(--ease-pop); }
.stage__cue:hover span{ transform:translateY(4px); }

/* The diorama. Each layer is a full-size sheet; holes are cut in SVG. */
.dio{ position:relative; width:100%; max-width:540px; aspect-ratio:4 / 5; justify-self:end; perspective:1500px; perspective-origin:50% 30%; }
.dio__tilt{ position:absolute; inset:0; transform-style:preserve-3d; }
.dio__layer{ position:absolute; inset:0; transform-origin:50% 100%; will-change:transform; }
.dio__layer svg{ width:100%; height:100%; overflow:visible; }
.dio__back{ inset:14% 21% 4% 21%; overflow:hidden; background:var(--ink-900); border-radius:2px; }
.dio__back img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; }
.dio__arch--3 svg{ fill:var(--paper-200); filter:drop-shadow(0 10px 12px rgb(20 16 15 / .4)); }
.dio__arch--2 svg{ fill:var(--paper-0); filter:drop-shadow(0 12px 14px rgb(20 16 15 / .32)); }
.dio__arch--1 svg{ fill:var(--red-500); filter:drop-shadow(0 16px 20px rgb(62 15 20 / .4)); }
.dio__arch--1::after{  /* velvet sheen on the oxblood proscenium */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgb(20 16 15 / .07) 0 3px, transparent 3px 11px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0,500V104C0,44 92,16 200,10C308,16 400,44 400,104V500Z M34,500V204A166,166 0 0 1 366,204V500Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0,500V104C0,44 92,16 200,10C308,16 400,44 400,104V500Z M34,500V204A166,166 0 0 1 366,204V500Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.dio__valance{
  inset:7.5% 8.5% auto 8.5%; height:13%; transform-origin:50% 0;
  background:
    radial-gradient(circle at 50% 0, var(--red-600) 0 70%, transparent 71%) 0 100% / 20% 58% repeat-x,
    linear-gradient(180deg, var(--red-700), var(--red-600)) top / 100% 46% no-repeat;
  filter:drop-shadow(0 7px 6px rgb(20 16 15 / .38));
}
.dio__tag{ position:absolute; right:14%; top:62%; width:1px; height:64px; background:var(--ink-700); transform-origin:50% 0; }
.dio__tag-card{
  position:absolute; top:100%; left:50%; translate:-50% 0; padding:.45rem .7rem .4rem; white-space:nowrap;
  background:var(--grain), var(--paper-0); border-radius:2px; box-shadow:var(--lift-1);
  font:italic 500 .82rem/1 var(--f-display); color:var(--red-500);
}
.dio__tag-card::before{ content:''; position:absolute; top:4px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--paper-300); }
.dio__apron{
  inset:auto -3% -2% -3%; height:11%;
  background:linear-gradient(180deg, var(--paper-200) 0 42%, var(--paper-300) 42% 100%);
  border-radius:3px; box-shadow:var(--lift-2);
}
.dio__lights{ position:absolute; left:10%; right:10%; top:22%; height:10px;
  background:radial-gradient(circle 4px, var(--paper-0) 0 60%, rgb(196 66 78 / .35) 62%, transparent 100%) 0 0 / 11.1% 100% repeat-x; }
.dio__crest{ inset:-3.5% 41% auto 41%; aspect-ratio:176.6 / 140.4; height:auto; }
.dio__crest svg{ fill:var(--paper-0); filter:drop-shadow(0 3px 3px rgb(62 15 20 / .55)); }
.dio__shadow{ position:absolute; left:4%; right:4%; bottom:-5%; height:10%; border-radius:50%; background:radial-gradient(closest-side, rgb(20 16 15 / .22), transparent); z-index:-1; }

/* ---------- 8. Scene 02 · About (flats in the wings) --------------------- */
.about{ position:relative; background:var(--grain), var(--paper-50); padding-block:clamp(110px, 14vw, 190px); overflow-x:clip; }
.about__stage{ position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px, 5vw, 88px); align-items:center; }
.about__flat{ will-change:transform; }
.about__flat--r{ padding:clamp(30px, 4.4vw, 64px); }
.about__flat--r .label{ margin-bottom:22px; }
.about__title{ font-family:var(--f-display); font-weight:360; font-size:clamp(2rem, 3.8vw, 3.5rem); line-height:1.06; letter-spacing:-.02em; margin-bottom:24px; font-variation-settings:"SOFT" 100, "opsz" 96; }
.about__flat--r p + p{ margin-top:14px; }
.about__groove{ grid-column:1 / -1; height:12px; margin-top:8px; border-top:1px solid var(--paper-300); box-shadow:inset 0 4px 5px -3px rgb(20 16 15 / .18); border-radius:2px; }

.dial{ position:relative; width:min(100%, 500px); aspect-ratio:1; margin-inline:auto; }
.dial__ring{ position:absolute; inset:0; border-radius:50%; background:var(--grain), var(--paper-0); box-shadow:var(--lift-3); }
.dial__ticks{
  position:absolute; inset:3.2%; border-radius:50%;
  background:repeating-conic-gradient(var(--ink-300) 0 .45deg, transparent .45deg 6deg);
  -webkit-mask:radial-gradient(circle, transparent 90.4%, #000 90.6%, #000 96%, transparent 96.2%);
          mask:radial-gradient(circle, transparent 90.4%, #000 90.6%, #000 96%, transparent 96.2%);
  transition:transform 1.1s var(--ease-pop);
}
.dial__photo{ position:absolute; inset:10.5%; border-radius:50%; overflow:hidden; background:var(--ink-900); }
.dial__photo::after{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 5px 14px rgb(20 16 15 / .55), inset 0 0 0 1px rgb(20 16 15 / .3); }
.dial__photo img{ width:100%; height:100%; object-fit:cover; object-position:36% 50%; transform:scale(1.18); transition:transform 1.2s var(--ease-out); }
.dial__label{ position:absolute; left:50%; bottom:1.8%; translate:-50% 0; font-size:.6rem; color:var(--red-500); }
.dial:hover .dial__ticks{ transform:rotate(30deg); }
.dial:hover .dial__photo img{ transform:scale(1.26) rotate(-4deg); }

/* ---------- 9. Scene 03 · Philosophy (the book opens) -------------------- */
.behind{ position:relative; background:var(--grain), var(--paper-0); padding-block:clamp(110px, 13vw, 180px); }
.spread{ position:relative; perspective:2200px; perspective-origin:50% 10%; padding-top:clamp(150px, 21vw, 300px); }
.spread__pop{
  position:absolute; top:0; left:50%; width:min(820px, 84%); aspect-ratio:16 / 8.4; translate:-50% 0;
  transform-origin:50% 100%; will-change:transform;
  filter:drop-shadow(0 18px 20px rgb(20 16 15 / .3));
}
.spread__pop img{
  width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  -webkit-mask:radial-gradient(circle 13px at 50% 0, transparent 97%, #000 100%) 0 0 / 34px 100% repeat-x;
          mask:radial-gradient(circle 13px at 50% 0, transparent 97%, #000 100%) 0 0 / 34px 100% repeat-x;
}
.spread__book{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; max-width:1100px; margin-inline:auto; transform-style:preserve-3d; }
.page{ position:relative; min-height:clamp(300px, 30vw, 380px); padding:clamp(28px, 4vw, 64px) clamp(26px, 4vw, 60px) 64px; box-shadow:var(--lift-2); will-change:transform; }
.page--l{ transform-origin:100% 50%; border-radius:4px 0 0 4px; background:linear-gradient(270deg, rgb(20 16 15 / .1), transparent 14%), var(--grain), var(--paper-0); }
.page--r{ transform-origin:0 50%; border-radius:0 4px 4px 0; background:linear-gradient(90deg, rgb(20 16 15 / .12), transparent 14%), var(--grain), var(--paper-0); }
.page__lead{ font:360 clamp(1.3rem, 2vw, 1.75rem)/1.36 var(--f-display); color:var(--ink-900); letter-spacing:-.01em; }
.page--r p:first-child{ font-size:1.05rem; color:var(--ink-700); }
.page__note{ margin-top:22px; padding-top:18px; border-top:1px solid var(--paper-200); font:italic 400 1.02rem/1.5 var(--f-display); color:var(--red-500); }
.page__folio{ position:absolute; bottom:22px; font:italic .9rem var(--f-display); color:var(--ink-300); }
.page--l .page__folio{ left:clamp(26px, 4vw, 60px); }
.page--r .page__folio{ right:clamp(26px, 4vw, 60px); }

/* ---------- 10. Scene 04 · Identity (the volvelle) ----------------------- */
.identity{ position:relative; background:var(--grain), var(--paper-50); padding-block:clamp(110px, 13vw, 180px); overflow-x:clip; }
.identity__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px, 5vw, 90px); align-items:center; }
.identity__copy .label{ margin-bottom:20px; }
.identity__sub{ margin:18px 0 18px; font:italic 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.4 var(--f-display); color:var(--ink-900); }
.identity__copy > p:not(.label):not(.identity__sub){ max-width:48ch; }
.identity__chips{ display:flex; gap:10px; margin-top:30px; }
.identity__hint{ margin-top:18px; font-size:.64rem; color:var(--ink-300); }
@media (pointer:coarse){ .identity__hint{ display:none; } }

.volvelle{ position:relative; width:min(560px, 88vw); aspect-ratio:1; justify-self:center; user-select:none; -webkit-user-select:none; }
.volvelle__wheel{ position:absolute; inset:0; border-radius:50%; background:var(--grain), var(--paper-200); box-shadow:var(--lift-3); will-change:transform; }
@media (pointer:fine){ .volvelle__wheel{ cursor:grab; } .volvelle__wheel:active{ cursor:grabbing; } }
.volvelle__sector{ position:absolute; inset:7%; border-radius:50%; overflow:hidden; transform:rotate(calc(var(--i) * 120deg)); clip-path:polygon(50% 50%, -36.6% 0, 136.6% 0); }
.volvelle__sector img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; pointer-events:none; }
.volvelle__rim{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.volvelle__rim text{ font:600 6.2px var(--f-body); letter-spacing:1.6px; fill:var(--ink-700); }
.volvelle__ticks line{ stroke:var(--ink-300); stroke-width:.35; }
.volvelle__ticks line.major{ stroke:var(--red-500); stroke-width:.7; }
.volvelle__cover{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.volvelle__cover path{ fill:var(--paper-0); filter:drop-shadow(0 4px 6px rgb(20 16 15 / .28)); }
.volvelle__hairline{ fill:none; stroke:var(--paper-300); stroke-width:.5; stroke-dasharray:1.2 1.6; }
.volvelle__brad{ fill:var(--red-500); stroke:var(--red-600); stroke-width:1; filter:drop-shadow(0 1px 1px rgb(20 16 15 / .5)); }
.volvelle__pointer{ position:absolute; left:50%; top:6.6%; width:0; height:0; translate:-50% 0; border:7px solid transparent; border-top:10px solid var(--red-500); }
.volvelle__word{ position:absolute; left:0; right:0; top:62%; text-align:center; font:italic 360 clamp(1.7rem, 4vw, 2.6rem)/1 var(--f-display); color:var(--ink-900); pointer-events:none; }

/* ---------- 11. Scene 05 · Method (the tunnel book) ---------------------- */
.process{ position:relative; background:var(--paper-100); }
.tunnel{ position:relative; height:100vh; height:100svh; overflow:hidden; }
.tunnel__back{ position:absolute; inset:0; background:var(--ink-900); }
.tunnel__back img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.frame{ --hole:min(56vmin, 540px); position:absolute; inset:0; will-change:transform, opacity; filter:drop-shadow(0 18px 26px rgb(20 16 15 / .34)); transform-origin:50% 50%; }
.frame__paper{
  position:absolute; inset:-3px; background:var(--grain), var(--pc, var(--paper-0));
  -webkit-mask:var(--shape) var(--hx, 50%) var(--hy, 50%) / var(--hole) var(--hole) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:var(--shape) var(--hx, 50%) var(--hy, 50%) / var(--hole) var(--hole) no-repeat, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.frame[data-frame="0"]{ --pc:var(--paper-0); --hole:min(44vmin, 420px); }
.frame[data-frame="1"]{ --pc:var(--paper-50); }
.frame[data-frame="2"]{ --pc:var(--paper-200); }
.frame[data-frame="3"]{ --pc:var(--red-500); }
.frame[data-frame="4"]{ --pc:var(--paper-0); }
.frame[data-frame="5"]{ --pc:var(--paper-100); }
.frame__text{ position:absolute; left:var(--gutter); bottom:9vh; max-width:min(36ch, 36vw); }
.frame__text--right{ left:auto; right:calc(var(--gutter) + 56px); text-align:right; }
.frame__text--intro{ top:50%; bottom:auto; translate:0 -50%; max-width:min(30ch, calc(50vw - 22vmin - var(--gutter) - 40px)); }
.frame__text--aside{ left:auto; right:calc(var(--gutter) + 40px); top:50%; bottom:auto; translate:0 -50%; max-width:min(28ch, calc(50vw - 22vmin - var(--gutter) - 60px)); }
.frame__cue{ margin-top:22px; font-size:.62rem; color:var(--red-500); }
.frame__text--intro .label{ margin-bottom:20px; }
.frame__text--intro .sec-title{ margin-bottom:22px; }
.frame__text--intro p{ color:var(--ink-700); }
.frame__small{ margin-top:14px; font-size:.92rem; color:var(--ink-500)!important; }
.frame__num{ display:block; font:italic 300 clamp(4.2rem, 10vw, 9rem)/.8 var(--f-display); color:var(--red-500); letter-spacing:-.04em; margin-bottom:14px; }
.frame__text h3{ font:400 clamp(1.6rem, 2.6vw, 2.4rem)/1.08 var(--f-display); letter-spacing:-.015em; margin-bottom:14px; }
.frame__text li{ position:relative; padding-left:1.1em; color:var(--ink-700); }
.frame__text--right li{ padding-left:0; padding-right:1.1em; }
.frame__text li::before{ content:''; position:absolute; left:0; top:.72em; width:.42em; height:.42em; border-radius:50%; background:var(--red-500); }
.frame__text--right li::before{ left:auto; right:0; }
.frame[data-frame="3"] .frame__num, .frame[data-frame="3"] h3, .frame[data-frame="3"] li{ color:var(--paper-0); }
.frame[data-frame="3"] li::before{ background:var(--paper-0); }
.tunnel__tabs{ position:absolute; left:50%; top:0; translate:-50% 0; display:flex; gap:5px; z-index:8; }
.tunnel__tabs li{
  width:46px; height:52px; display:grid; place-items:end center; padding-bottom:8px; translate:0 -14px;
  border-radius:0 0 8px 8px; background:var(--grain), var(--paper-0); box-shadow:0 3px 6px rgb(20 16 15 / .16);
  font:italic 500 .92rem var(--f-display); color:var(--ink-500);
  transition:translate .5s var(--ease-pop), background-color .3s, color .3s;
}
.tunnel__tabs li.is-on{ translate:0 0; background:var(--red-500); color:var(--paper-0); }

/* Static tunnel (no JS / reduced motion): frames become a column of plates. */
.no-js .tunnel, .reduced .tunnel{ height:auto; overflow:visible; padding:clamp(90px, 12vw, 160px) var(--gutter); display:grid; gap:24px; max-width:var(--maxw); margin-inline:auto; }
.no-js .tunnel__back, .reduced .tunnel__back{ position:relative; aspect-ratio:16 / 7; border-radius:3px; overflow:hidden; order:1; }
.no-js .frame, .reduced .frame{ position:relative; inset:auto; filter:none; }
.no-js .frame__paper, .reduced .frame__paper{ display:none; }
.no-js .frame__text, .reduced .frame__text{ position:relative; inset:auto; translate:none; max-width:none; text-align:left; background:var(--grain), var(--paper-0); padding:32px; box-shadow:var(--lift-1); border-radius:2px; }
.no-js .frame[data-frame="0"] .frame__text, .reduced .frame[data-frame="0"] .frame__text{ background:none; box-shadow:none; padding:0; }
.no-js .frame__text--right li, .reduced .frame__text--right li{ padding-left:1.1em; padding-right:0; }
.no-js .frame__text--right li::before, .reduced .frame__text--right li::before{ left:0; right:auto; }
.no-js .frame[data-frame="3"] .frame__num, .no-js .frame[data-frame="3"] h3, .no-js .frame[data-frame="3"] li,
.reduced .frame[data-frame="3"] .frame__num, .reduced .frame[data-frame="3"] h3, .reduced .frame[data-frame="3"] li{ color:inherit; }
.no-js .frame[data-frame="3"] .frame__num, .reduced .frame[data-frame="3"] .frame__num{ color:var(--red-500); }
.no-js .frame[data-frame="3"] li::before, .reduced .frame[data-frame="3"] li::before{ background:var(--red-500); }
.no-js .frame[data-frame="0"], .reduced .frame[data-frame="0"]{ order:0; }
.no-js .frame:not([data-frame="0"]), .reduced .frame:not([data-frame="0"]){ order:2; }
.no-js .tunnel__tabs, .reduced .tunnel__tabs{ display:none; }
.no-js .frame__text--aside, .reduced .frame__text--aside{ background:none; box-shadow:none; padding:0; }
.no-js .frame__cue, .reduced .frame__cue{ display:none; }
.no-js .frame[data-frame="3"] h3, .reduced .frame[data-frame="3"] h3{ color:var(--ink-900); }

/* ---------- 12. Scene 06 · Approach (lift-the-flap) ---------------------- */
.approach{ position:relative; background:var(--grain), var(--paper-0); padding-block:clamp(110px, 13vw, 180px); }
.flaps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(14px, 1.6vw, 24px); }
.flap-card{ position:relative; min-height:400px; perspective:1100px; perspective-origin:50% 120%; }
.flap-card__inside{
  position:absolute; inset:0; border-radius:3px; padding:26px 24px;
  background:var(--grain), var(--paper-100);
  box-shadow:inset 0 3px 10px rgb(20 16 15 / .14), inset 0 0 0 1px var(--paper-200);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.flap-card__inside dt{ font:500 1.12rem/1.25 var(--f-display); color:var(--ink-900); }
.flap-card__inside dt::before{ content:''; display:block; width:26px; height:2px; background:var(--red-500); margin-bottom:10px; }
.flap-card__inside dd{ margin:6px 0 18px; font-size:.92rem; line-height:1.6; color:var(--ink-700); }
.flap-card__inside dd:last-child{ margin-bottom:0; }
.flap-card__flap{
  position:absolute; inset:0; padding:0; border:0; background:none; cursor:pointer; text-align:left;
  transform-origin:50% 0; transform-style:preserve-3d;
  transition:transform .9s var(--ease-pop);
}
.flap-card__face{
  position:absolute; inset:0; padding:26px 24px; border-radius:3px;
  display:flex; flex-direction:column;
  background:var(--grain), var(--paper-0); box-shadow:var(--lift-2);
  transition:box-shadow .5s, background-color .5s;
}
.flap-card__face::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(0deg, rgb(20 16 15 / .22), transparent 70%); opacity:0; transition:opacity .6s; pointer-events:none; }
.flap-card__num{ font:italic 300 3.4rem/.9 var(--f-display); color:var(--red-500); }
.flap-card__title{ margin-top:auto; font:400 clamp(1.5rem, 2vw, 1.9rem)/1.08 var(--f-display); letter-spacing:-.015em; color:var(--ink-900); max-width:12ch; }
.flap-card__cue{ margin-top:16px; font-size:.6rem; color:var(--ink-500); }
.flap-card__cue::after{ content:'\2191'; margin-left:.4em; transition:transform .4s var(--ease-pop); display:inline-block; }
.flap-card__shape{ position:absolute; right:22px; top:24px; width:58px; height:58px; background:var(--paper-200); box-shadow:inset 0 2px 4px rgb(20 16 15 / .15); }
.flap-card__shape--circle{ border-radius:50%; }
.flap-card__shape--arch{ border-radius:29px 29px 2px 2px; }
.flap-card__shape--lozenge{ rotate:45deg; width:44px; height:44px; right:29px; top:31px; border-radius:3px; }
.flap-card__shape--scallop{ -webkit-mask:var(--shape-scallop) center / contain no-repeat; mask:var(--shape-scallop) center / contain no-repeat; background:var(--red-500); box-shadow:none; }
.flap-card__back{ display:none; }
.flap-card__flap:hover{ transform:rotateX(-15deg); }
.flap-card__flap:hover .flap-card__face{ box-shadow:var(--lift-3); }
.flap-card__flap:hover .flap-card__cue::after{ transform:translateY(-3px); }
.flap-card__flap[aria-expanded="true"]{ transform:rotateX(-74deg); }
.flap-card__flap[aria-expanded="true"] .flap-card__face::after{ opacity:1; }
.flap-card__flap[aria-expanded="true"] .flap-card__cue::after{ content:'\2193'; }
.flap-card__flap:active{ transition-duration:.25s; }
.no-js .flap-card__flap{ display:none; }
.no-js .flap-card__inside{ position:relative; min-height:400px; }
.no-js .flap-card__inside .visually-hidden{ position:static!important; width:auto; height:auto; clip:auto; white-space:normal; font:400 1.6rem/1.1 var(--f-display); margin-bottom:auto; }

/* ---------- 13. Scene 07 · Services (the revolve) ------------------------ */
.services{ position:relative; background:var(--grain), var(--paper-50); padding-block:clamp(110px, 13vw, 180px); overflow-x:clip; }
.beliefs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 28px); margin-bottom:clamp(50px, 7vw, 100px); }
.belief{ position:relative; padding:24px 24px 26px; background:var(--grain), var(--paper-0); box-shadow:var(--lift-1); border-radius:2px; color:var(--ink-700); }
.belief:nth-child(1){ rotate:-.6deg; } .belief:nth-child(2){ rotate:.4deg; translate:0 14px; } .belief:nth-child(3){ rotate:-.3deg; }
.belief__verb{ display:block; margin-bottom:8px; font:italic 400 1.7rem/1 var(--f-display); color:var(--red-500); }
.revolve-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px, 4vw, 64px); align-items:center; }
.revolve{ position:relative; height:clamp(440px, 42vw, 580px); }
.revolve__floor{ position:absolute; left:50%; bottom:5%; width:min(94%, 660px); aspect-ratio:1; translate:-50% 0; transform:scaleY(.3); transform-origin:50% 100%; }
.revolve__floor::before{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--paper-300); translate:0 7%; box-shadow:0 30px 60px -20px rgb(20 16 15 / .5); }
.revolve__disc{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 20%, rgb(20 16 15 / .07) 20.3% 20.8%, transparent 21% 58%, rgb(20 16 15 / .07) 58.3% 58.8%, transparent 59%),
    repeating-conic-gradient(from 0deg, var(--paper-100) 0 7.5deg, var(--paper-0) 7.5deg 15deg);
  box-shadow:inset 0 0 0 3px var(--paper-300);
  will-change:transform;
}
.revolve__set{ position:absolute; inset:0; }
.standee{
  --sw:clamp(118px, 14vw, 196px);
  position:absolute; left:50%; bottom:21%; width:var(--sw); margin-left:calc(var(--sw) / -2);
  padding:0; border:0; background:none; cursor:pointer; text-align:left;
  transform-origin:50% 100%; will-change:transform;
  display:flex; flex-direction:column; align-items:center;
}
.standee__card{
  position:relative; width:100%; padding:18px 16px 16px; border-radius:3px 3px 1px 1px;
  background:var(--grain), var(--paper-0); box-shadow:var(--lift-2);
  display:flex; flex-direction:column; gap:6px;
  transition:background-color .4s, color .4s, box-shadow .4s;
}
.standee__n{ font:italic 400 1.6rem/1 var(--f-display); color:var(--red-500); }
.standee__t{ font:400 1.2rem/1.12 var(--f-display); color:var(--ink-900); min-height:2.3em; }
.standee__c{ font:500 .62rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500); }
.standee__foot{ width:62%; height:10px; background:var(--paper-300); clip-path:polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.standee[aria-selected="true"] .standee__card{ background:var(--red-500); box-shadow:var(--lift-3); }
.standee[aria-selected="true"] .standee__n, .standee[aria-selected="true"] .standee__t, .standee[aria-selected="true"] .standee__c{ color:var(--paper-0); }
.standee:hover .standee__card{ box-shadow:var(--lift-3); }
.revolve__arrows{ position:absolute; left:0; bottom:0; display:flex; gap:10px; }
.no-js .revolve{ height:auto; }
.no-js .revolve__floor, .no-js .revolve__arrows{ display:none; }
.no-js .revolve__set{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.no-js .standee{ position:relative; left:auto; bottom:auto; margin:0; width:auto; }

.insert{ position:relative; }
.insert__count{ margin-bottom:18px; }
.svc-panel h3{ font:400 clamp(1.8rem, 2.8vw, 2.5rem)/1.05 var(--f-display); letter-spacing:-.02em; margin-bottom:22px; }
.svc-panel[hidden]{ display:none; }
.no-js .svc-panel{ margin-bottom:40px; }
.slips{ display:grid; gap:9px; }
.slips--two{ grid-template-columns:1fr 1fr; }
.slips li{
  position:relative; padding:.78rem 1rem .78rem 2.3rem; border-radius:2px;
  background:var(--grain), var(--paper-0); box-shadow:var(--lift-1); color:var(--ink-900); font-size:.95rem; line-height:1.35;
  transition:transform .4s var(--ease-pop), box-shadow .3s;
}
.slips li::before{ content:''; position:absolute; left:.95rem; top:50%; width:.5rem; height:.5rem; margin-top:-.25rem; border-radius:50%; background:var(--paper-100); box-shadow:inset 0 1px 2px rgb(20 16 15 / .35); }
.slips li:hover{ transform:translateX(6px) rotate(-.4deg); box-shadow:var(--lift-2); }

.banner-rig{ display:flex; justify-content:center; padding-top:clamp(120px, 14vw, 180px); }
.banner, .banner__swing{ position:relative; transform-origin:50% -130px; }
.banner__string{ position:absolute; bottom:100%; width:1px; height:130px; background:var(--ink-700); }
.banner__string--l{ left:18%; rotate:9deg; transform-origin:50% 100%; }
.banner__string--r{ right:18%; rotate:-9deg; transform-origin:50% 100%; }
.banner__paper{
  position:relative; padding:34px clamp(30px, 5vw, 70px) 38px; text-align:center; border-radius:3px;
  background:repeating-linear-gradient(90deg, rgb(20 16 15 / .06) 0 2px, transparent 2px 9px), var(--red-500);
  box-shadow:var(--lift-3);
}
.banner__paper::before, .banner__paper::after{ content:''; position:absolute; top:10px; width:9px; height:9px; border-radius:50%; background:var(--paper-0); box-shadow:inset 0 1px 2px rgb(20 16 15 / .5); }
.banner__paper::before{ left:calc(18% - 4px); } .banner__paper::after{ right:calc(18% - 4px); }
.banner__title{ font:360 clamp(2.2rem, 4.2vw, 3.6rem)/1 var(--f-display); letter-spacing:-.025em; color:var(--paper-0); }
.banner__sub{ margin:8px 0 22px; font:italic 400 1.15rem var(--f-display); color:rgb(251 247 244 / .82); }
.banner .btn--ink{ background:var(--paper-0); color:var(--red-500); --fold:var(--paper-200); }

/* ---------- 14. Scene 08 · Work (the scene dock) ------------------------- */
.work{ position:relative; background:var(--grain), var(--paper-0); padding-block:clamp(110px, 13vw, 180px); overflow-x:clip; }
.work__grid{ display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); gap:clamp(28px, 5vw, 84px); align-items:start; }
.dock{ position:sticky; top:40px; }
.dock__rack{ position:relative; height:clamp(520px, 44vw, 610px); perspective:1500px; perspective-origin:50% -10%; touch-action:pan-y; }
.js .flat{ position:absolute; left:50%; bottom:0; width:min(70%, 320px); margin-left:calc(min(70%, 320px) / -2); transform-origin:50% 100%; will-change:transform, opacity; }
/* In the 3D rack the parent's own z=0 plane would sit in front of flats pushed back
   in z and swallow their clicks — the rack is transparent to the pointer, flats are not. */
.js .dock__rack{ pointer-events:none; }
.js .dock__rack .flat{ pointer-events:auto; }
.flat__cover{ width:100%; aspect-ratio:900 / 1205; object-fit:cover; border:9px solid var(--paper-0); border-radius:3px; box-shadow:var(--lift-2); background:var(--paper-100); }
.js .flat__info{ display:none; }
.flat__tab{
  position:absolute; top:-30px; height:31px; padding:0 12px; border:0; cursor:pointer;
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  border-radius:7px 7px 0 0; background:var(--grain), var(--paper-0);
  box-shadow:0 -2px 4px rgb(20 16 15 / .08);
  font:500 .68rem/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-700);
  transition:translate .4s var(--ease-pop), background-color .3s, color .3s;
}
.flat__tab b{ font:italic 500 .86rem/1 var(--f-display); color:var(--red-500); letter-spacing:0; text-transform:none; }
.flat.is-front .flat__tab{ background:var(--red-500); color:var(--paper-0); }
.flat.is-front .flat__tab b{ color:var(--paper-0); }
.flat:not(.is-front) .flat__tab:hover{ translate:0 -8px; }
.dock__controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:34px; }
.dock__count{ font:italic 400 1.2rem var(--f-display); color:var(--ink-500); min-width:5.5ch; text-align:center; font-variant-numeric:tabular-nums; }
.dock__now{ color:var(--ink-900); }
.no-js .dock{ position:static; }
.no-js .dock__rack{ height:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:28px; perspective:none; }
.no-js .flat__info{ margin-top:16px; }
.no-js .dock__controls, .no-js .programme{ display:none; }
.no-js .work__grid{ grid-template-columns:1fr; }
.flat__sector{ font:500 .7rem/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500); }
.flat__name{ font:400 1.8rem/1.1 var(--f-display); margin:6px 0 10px; }
.flat__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.flat__tags li{ font-size:.74rem; padding:.3rem .6rem; background:var(--paper-100); border-radius:2px; color:var(--ink-700); }

.programme{ position:relative; min-height:640px; }
.prog{ position:relative; padding:clamp(22px, 3vw, 40px); will-change:transform, opacity; }
.prog__top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px; }
.prog__count{ font:italic 400 1.05rem var(--f-display); color:var(--red-500); font-variant-numeric:tabular-nums; }
.prog__name{ font:360 clamp(2.4rem, 4.4vw, 4rem)/1 var(--f-display); letter-spacing:-.03em; margin-bottom:22px; font-variation-settings:"SOFT" 100, "opsz" 144; }
.prog__window{ position:relative; aspect-ratio:1290 / 616; overflow:hidden; border-radius:2px; background:var(--ink-900); box-shadow:inset 0 0 0 1px rgb(20 16 15 / .1); }
.prog__slide{ position:absolute; inset:0; will-change:transform; }
.prog__slide img, .prog__slide video{ width:100%; height:100%; object-fit:cover; }
.prog__strip{ display:flex; gap:8px; margin-top:12px; }
.prog__thumb{
  position:relative; flex:1; aspect-ratio:1290 / 616; padding:0; border:0; cursor:pointer; overflow:hidden; border-radius:2px;
  background:var(--paper-100); box-shadow:var(--lift-1); opacity:.62;
  transition:opacity .3s, transform .4s var(--ease-pop), box-shadow .3s;
}
.prog__thumb img{ width:100%; height:100%; object-fit:cover; }
.prog__thumb:hover{ opacity:1; transform:translateY(-3px); box-shadow:var(--lift-2); }
.prog__thumb[aria-pressed="true"]{ opacity:1; box-shadow:0 0 0 2px var(--paper-0), 0 0 0 4px var(--red-500); }
.prog__thumb--motion{ display:grid; place-items:center; font:500 .62rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--red-500); }
.prog__thumb--motion::before{ content:''; width:0; height:0; border:7px solid transparent; border-left:11px solid var(--red-500); margin-bottom:4px; translate:4px 0; }
.prog__desc{ margin-top:24px; color:var(--ink-700); }
.prog__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.prog__tags li{
  padding:.36rem .7rem; border-radius:2px; font-size:.76rem; color:var(--ink-900);
  background:var(--grain), var(--paper-100); box-shadow:0 1px 1px rgb(20 16 15 / .1);
}
.prog__tags li:nth-child(odd){ rotate:-1deg; } .prog__tags li:nth-child(even){ rotate:.8deg; }
.work__close{ margin-top:clamp(70px, 9vw, 130px); display:grid; grid-template-columns:auto 1fr auto; gap:14px 34px; align-items:center; padding-top:34px; border-top:1px dashed var(--paper-300); }
.work__close-title{ font:360 clamp(2rem, 4vw, 3.4rem)/1 var(--f-display); letter-spacing:-.025em; color:var(--ink-900); }
.work__close-sub{ font:italic 400 1.15rem var(--f-display); color:var(--ink-500); }

/* ---------- 15. Scene 09 · Clients (shadow theatre) ---------------------- */
.clients{ position:relative; background:var(--grain), var(--paper-50); padding-block:clamp(110px, 13vw, 180px); }
.shadowbox{ --s:1.5; position:relative; max-width:1180px; margin-inline:auto; padding:18px; }
.shadowbox__screen{
  --lamp:120%;
  position:relative; overflow:hidden; padding:clamp(86px, 9vw, 120px) clamp(22px, 5vw, 70px) clamp(60px, 7vw, 90px);
  border-radius:clamp(120px, 22vw, 300px) clamp(120px, 22vw, 300px) 6px 6px / clamp(60px, 11vw, 150px) clamp(60px, 11vw, 150px) 6px 6px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 58%, color-mix(in srgb, var(--paper-0), var(--red-300) 5%), var(--paper-50) 60%, var(--paper-200)),
    var(--paper-0);
  box-shadow:0 0 0 clamp(10px, 1.4vw, 16px) var(--red-500), 0 0 0 calc(clamp(10px, 1.4vw, 16px) + 1px) var(--red-700), var(--lift-3);
}
.shadowbox__screen::before{ content:''; position:absolute; inset:0; background:var(--grain); opacity:.9; pointer-events:none; }
.shadowbox__lamp{ position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(circle at 50% 58%, transparent var(--lamp), rgb(58 50 48 / .55) calc(var(--lamp) + 30%)); }
.surtitle{ position:absolute; top:clamp(34px, 4vw, 52px); left:50%; translate:-50% 0; z-index:2; white-space:nowrap; overflow:hidden; font:italic 400 clamp(1rem, 1.6vw, 1.25rem)/1.4 var(--f-display); color:var(--ink-700); }
.surtitle__text{ display:inline-block; }
.puppets{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(34px, 4vw, 54px) clamp(12px, 2vw, 30px); align-items:end; justify-items:center; }
.puppet{ position:relative; display:flex; flex-direction:column; align-items:center; height:calc(var(--h) * var(--s) + 44px); justify-content:flex-end; transform-origin:50% 100%; }
.puppet:nth-child(even){ translate:0 -12px; }
.puppet:nth-child(3n){ translate:0 8px; }
.puppet__shadow{
  width:calc(var(--w) * var(--s)); height:calc(var(--h) * var(--s)); flex:none;
  background:var(--ink-900); opacity:.8; filter:blur(1.1px);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  transition:filter .55s var(--ease-out), opacity .55s var(--ease-out), transform .7s var(--ease-pop);
}
.puppet__rod{ width:2px; height:40px; margin-top:4px; background:linear-gradient(var(--ink-700), rgb(58 50 48 / 0)); opacity:.4; filter:blur(.7px); transition:opacity .5s; }
.puppets:has(.puppet:hover) .puppet:not(:hover) .puppet__shadow{ filter:blur(3.4px); opacity:.34; transform:scale(.95); }
.puppet:hover .puppet__shadow{ filter:blur(0); opacity:.96; transform:scale(1.1); }
.puppet:hover .puppet__rod{ opacity:.75; }
.shadowbox__stage{ display:block; height:16px; margin:0 3%; background:linear-gradient(var(--paper-300), var(--paper-200)); border-radius:0 0 6px 6px; box-shadow:var(--lift-2); }

/* ---------- 16. Scene 10 · Presence (the accordion fold) ----------------- */
.presence{ position:relative; background:var(--grain), var(--paper-0); padding-block:clamp(110px, 13vw, 180px); overflow-x:clip; }
.fold{ position:relative; height:clamp(430px, 36vw, 480px); perspective:1900px; perspective-origin:50% 30%; }
.fold__panel{
  position:absolute; top:0; left:0; width:var(--pw, 33.33%); height:100%;
  padding:18px 18px 26px; display:flex; flex-direction:column;
  background:var(--grain), var(--paper-0); box-shadow:var(--lift-2);
  transform-origin:0 50%; will-change:transform;
}
.fold__panel:nth-child(1){ border-radius:4px 0 0 4px; }
.fold__panel:nth-child(3){ border-radius:0 4px 4px 0; }
.fold__photo{ position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; background:var(--ink-900); box-shadow:0 0 0 1px var(--paper-300); }
.fold__photo::before, .fold__photo::after{ content:''; position:absolute; z-index:1; width:22px; height:22px; background:var(--ink-700); }
.fold__photo::before{ left:0; top:0; clip-path:polygon(0 0, 100% 0, 0 100%); }
.fold__photo::after{ right:0; bottom:0; clip-path:polygon(100% 0, 100% 100%, 0 100%); }
.fold__photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85); }
.fold__num{ margin-top:auto; font:300 clamp(3rem, 5.6vw, 5.2rem)/1 var(--f-display); letter-spacing:-.04em; color:var(--ink-900); font-variant-numeric:tabular-nums lining-nums; font-variation-settings:"opsz" 144, "SOFT" 60; }
.fold__num .plus{ color:var(--red-500); font-style:italic; }
.fold__cap{ margin-top:12px; font-size:.95rem; color:var(--ink-700); max-width:30ch; }
.fold__shade{ position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:inherit; }
.fold__panel:nth-child(odd) .fold__shade{ background:linear-gradient(270deg, rgb(20 16 15 / .34), rgb(20 16 15 / .06)); }
.fold__panel:nth-child(even) .fold__shade{ background:linear-gradient(90deg, rgb(20 16 15 / .4), rgb(20 16 15 / .1)); }
.no-js .fold, .reduced .fold{ height:auto; display:grid; grid-template-columns:repeat(3, 1fr); }
.no-js .fold__panel, .reduced .fold__panel{ position:relative; width:auto; min-height:470px; }

/* ---------- 17. Scene 11 · Contact (the ticket) -------------------------- */
.contact{ position:relative; background:var(--grain), var(--paper-50); padding-block:clamp(120px, 14vw, 200px); overflow-x:clip; }
.contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px, 5vw, 90px); align-items:center; }
.contact__copy .label{ margin-bottom:22px; }
.contact__title{ font:320 clamp(3.2rem, 8vw, 8rem)/.92 var(--f-display); letter-spacing:-.04em; color:var(--ink-900); font-variation-settings:"SOFT" 100, "WONK" 1, "opsz" 144; }
.contact__sub{ margin-top:24px; font:italic 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.4 var(--f-display); color:var(--ink-700); max-width:26ch; }

.ticket-rig{ position:relative; perspective:1300px; padding-block:30px; }
.ticket-rig__pool{ position:absolute; left:6%; right:6%; bottom:-4%; height:22%; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--paper-0), var(--red-300) 6%), transparent); z-index:0; }
.ticket{ --stub:156px; --notch:15px; position:relative; z-index:1; display:flex; transform-style:preserve-3d; will-change:transform; filter:drop-shadow(0 26px 30px rgb(62 15 20 / .28)) drop-shadow(0 3px 4px rgb(20 16 15 / .12)); }
.ticket__body{
  position:relative; flex:1; min-width:0; padding:clamp(24px, 3vw, 38px) clamp(22px, 3vw, 40px);
  color:var(--paper-0); border-radius:10px 0 0 10px;
  background:repeating-linear-gradient(0deg, rgb(20 16 15 / .05) 0 1px, transparent 1px 6px), var(--red-500);
  -webkit-mask:radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%);
  -webkit-mask-composite:source-in;
          mask:radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%);
          mask-composite:intersect;
}
.ticket__body::before{ content:''; position:absolute; inset:10px 12px 10px 10px; border:1px solid rgb(251 247 244 / .28); border-radius:6px 0 0 6px; border-right:0; pointer-events:none; }
.ticket__admit{ display:flex; align-items:center; gap:12px; font:500 .7rem/1 var(--f-body); letter-spacing:.24em; text-transform:uppercase; color:rgb(251 247 244 / .85); }
.ticket__admit svg{ width:40px; aspect-ratio:176.6 / 140.4; fill:var(--paper-0); }
.ticket__refrain{ margin:20px 0 22px; font:italic 360 clamp(1.15rem, 1.7vw, 1.45rem)/1.38 var(--f-display); color:var(--paper-0); max-width:34ch; }
.ticket__channels{ display:grid; grid-template-columns:1fr 1fr; gap:8px 26px; }
.ticket__channels li{ display:flex; flex-direction:column; gap:1px; padding-top:8px; border-top:1px dashed rgb(251 247 244 / .3); }
.ticket__channels span{ font:500 .58rem/1.4 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:rgb(251 247 244 / .7); }
.ticket__channels a{ position:relative; font-size:.95rem; color:var(--paper-0); text-decoration:none; width:fit-content; transition:translate .4s var(--ease-pop); }
.ticket__channels a::before{ content:''; position:absolute; left:-13px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--paper-50); box-shadow:inset 0 1px 2px rgb(20 16 15 / .45); scale:0; transition:scale .35s var(--ease-pop); }
.ticket__channels a:hover{ translate:13px 0; }
.ticket__channels a:hover::before{ scale:1; }
.ticket__channels a:focus-visible{ outline-color:var(--paper-0); }
.ticket__foot{ margin-top:22px; font:500 .6rem/1 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:rgb(251 247 244 / .6); }
.ticket__perf{ position:absolute; top:var(--notch); bottom:var(--notch); right:var(--stub); width:0; border-left:2px dotted rgb(251 247 244 / .55); z-index:2; transform:translateZ(1px); }
.ticket__stub{
  position:relative; width:var(--stub); flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-decoration:none; color:var(--paper-0); border-radius:0 10px 10px 0;
  background:repeating-linear-gradient(0deg, rgb(20 16 15 / .05) 0 1px, transparent 1px 6px), var(--red-500);
  -webkit-mask:radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%);
  -webkit-mask-composite:source-in;
          mask:radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%);
          mask-composite:intersect;
  transform-origin:0 0; transition:rotate .5s var(--ease-pop), translate .5s var(--ease-pop), background-color .3s;
  will-change:transform;
}
.ticket__stub-t{ writing-mode:vertical-rl; rotate:180deg; font:italic 400 1.9rem/1 var(--f-display); letter-spacing:-.01em; }
.ticket__stub-hint{ font:500 .56rem/1 var(--f-body); letter-spacing:.22em; text-transform:uppercase; color:rgb(251 247 244 / .72); }
.ticket__stub-hint::before{ content:'\2702'; display:block; text-align:center; font-size:1rem; margin-bottom:6px; letter-spacing:0; }
.ticket__stub:hover{ rotate:3deg; translate:6px 0; background-color:var(--red-400); }
.ticket__stub:focus-visible{ outline:2px solid var(--ink-900); outline-offset:4px; }
.ticket__stub.is-torn{ transition:none; }

/* ---------- 18. Footer ---------------------------------------------------- */
.foot{ background:var(--grain), var(--paper-100); padding:34px 0 40px; border-top:1px solid var(--paper-200); }
.foot__row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.foot__row .label{ margin-left:auto; }
.pull-tab{
  display:inline-flex; align-items:center; gap:.5em; padding:.7rem 1rem; border-radius:8px 8px 0 0; text-decoration:none;
  background:var(--grain), var(--paper-0); box-shadow:0 -2px 5px rgb(20 16 15 / .1); font:500 .78rem var(--f-body); color:var(--ink-900);
  transition:translate .4s var(--ease-pop);
}
.pull-tab:hover{ translate:0 -5px; }

/* ---------- 19. Pre-animation states (JS + motion only) ------------------- */
/* Hidden only when JS runs and motion is allowed; JS reveals them. */
.js:not(.reduced) .pop{ opacity:0; }
.js:not(.reduced) .pop-block{ opacity:0; }
.js:not(.reduced) .dio__layer{ opacity:0; }

/* ---------- 20. Responsive ----------------------------------------------- */
@media (max-width:1100px){
  .flaps{ grid-template-columns:repeat(2, 1fr); }
  .revolve-wrap{ grid-template-columns:1fr; }
  .insert{ max-width:640px; }
}
@media (max-width:900px){
  .thumbs, .top__meta, .top__cta{ display:none; }
  .index-btn{
    display:flex; align-items:center; position:fixed; right:0; bottom:22px; z-index:60;
    padding:.8rem 1.1rem .8rem 1.2rem; border:0; cursor:pointer; border-radius:10px 0 0 10px;
    background:var(--red-500); color:var(--paper-0); font:500 .78rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase;
    box-shadow:-3px 3px 10px rgb(62 15 20 / .35);
  }
  .top__row{ justify-content:space-between; }
  .stage{ padding-top:100px; }
  .stage__grid{ grid-template-columns:1fr; }
  .dio{ max-width:420px; justify-self:center; margin-top:10px; }
  .about__stage, .identity__grid, .contact__grid, .work__grid{ grid-template-columns:1fr; }
  .sec-head--split{ grid-template-columns:1fr; }
  .sec-head__aside{ justify-self:start; }
  .dial{ width:min(78vw, 420px); }
  .spread{ padding-top:clamp(130px, 38vw, 260px); }
  .spread__pop{ width:92%; }
  .spread__book{ grid-template-columns:1fr; }
  .page--l{ border-radius:4px 4px 0 0; transform-origin:50% 100%; background:linear-gradient(0deg, rgb(20 16 15 / .08), transparent 14%), var(--grain), var(--paper-0); }
  .page--r{ border-radius:0 0 4px 4px; transform-origin:50% 0; background:linear-gradient(180deg, rgb(20 16 15 / .1), transparent 14%), var(--grain), var(--paper-0); }
  .page{ min-height:0; }
  .beliefs{ grid-template-columns:1fr; }
  .belief:nth-child(2){ translate:0; }
  .dock{ position:relative; top:auto; }
  .programme{ min-height:0; }
  .work__close{ grid-template-columns:1fr; }
  .frame{ --hole:min(62vmin, 420px); }
  .frame[data-frame="0"]{ --hole:min(40vmin, 260px); --hx:50%; --hy:20%; }
  .frame__text--aside{ display:none; }
  .frame__text{ left:var(--gutter); right:var(--gutter); bottom:6vh; max-width:none; }
  .frame__text--right{ text-align:left; }
  .frame__text--right li{ padding-left:1.1em; padding-right:0; }
  .frame__text--right li::before{ left:0; right:auto; }
  .frame__text--intro{ top:auto; bottom:5vh; translate:none; max-width:none; }
  .frame__text--intro .sec-title{ font-size:clamp(2rem, 8vw, 3rem); margin-bottom:14px; }
  .frame__num{ font-size:4rem; margin-bottom:6px; }
  .tunnel__tabs li{ width:38px; height:44px; }
  .tunnel__hint{ display:none; }
  .fold{ height:auto; }
  .ticket-rig{ max-width:560px; }
  .no-js .fold, .reduced .fold{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .flaps{ grid-template-columns:1fr; }
  .flap-card{ min-height:340px; }
  .slips--two{ grid-template-columns:1fr; }
  .puppets{ grid-template-columns:repeat(3, 1fr); }
  .shadowbox{ --s:.92; padding:12px; }
  .ticket{ --stub:0px; flex-direction:column; }
  .ticket__body{ border-radius:10px 10px 0 0;
    -webkit-mask:radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%);
            mask:radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect; }
  .ticket__body::before{ border-right:1px solid rgb(251 247 244 / .28); border-bottom:0; border-radius:6px 6px 0 0; inset:10px 10px 12px; }
  .ticket__channels{ grid-template-columns:1fr; }
  .ticket__perf{ display:none; }
  .ticket__stub::before{ content:''; position:absolute; top:0; left:var(--notch); right:var(--notch); border-top:2px dotted rgb(251 247 244 / .55); }
  .ticket__stub{ width:100%; flex-direction:row; padding:22px; border-radius:0 0 10px 10px;
    -webkit-mask:radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%);
            mask:radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect; }
  .ticket__stub-t{ writing-mode:horizontal-tb; rotate:none; }
  .ticket__stub-hint::before{ display:inline; margin:0 6px 0 0; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}