/* Alternative Space, Design Studio: the one stylesheet, v2. Tokens from brand/identity/palette.json and
   brand/website/pitch/STEP-2-art-direction.md; the v2 moves in pitch/STEP-2b-v2.md. White ground, ink type,
   accents two at a time; the accents now carry a slow gradient, the chrome is glass. */
@font-face{font-family:'Archivo Expanded';src:url(fonts/Archivo-Expanded-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Expanded';src:url(fonts/Archivo-Expanded-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'RNS Sanz';src:url(fonts/RNSSanz-Normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'RNS Sanz';src:url(fonts/RNSSanz-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --white:#fff;--ink:#141414;--corn:#5B6EE1;--red:#D8452B;--pist:#B9D26B;--lilac:#C9B6E8;
  --grey:#ECECEC;--grey-2:#D6D6D6;--muted:#6A6A6A;--label:#767676;
  --display:'Archivo Expanded','Archivo',Helvetica,Arial,sans-serif;--body:'RNS Sanz',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,3.4vw,48px);--hdr:64px;--mark:26px;
  --t-112:clamp(34px,7.8vw,112px);--t-72:clamp(31px,5vw,72px);--t-48:clamp(25px,3.34vw,48px);--t-32:clamp(20px,2.23vw,32px);--t-22:clamp(18px,1.53vw,22px);--t-17:17px;--t-13:13px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --glass:rgba(255,255,255,.5);--glass-line:rgba(20,20,20,.1);--glass-hi:rgba(255,255,255,.9);
  /* the pair: every section wears one pair of the six (the colour plan of 26 Sep, none twice down a page), set as
     --pa and --pb on the section; the halos, the button hover, the card hover, the keyword ground and the journal's
     light read them. The mark's pair, cornflower + red pencil, is the default: the header, the footer, the film */
  --pa:var(--corn);--pb:var(--red);
}
/* the halos: every glow and shadow in an accent tint, never grey or black (K, 25 Sep); declared again wherever a
   pair is set, so the tints follow the section's pair */
:root,.sec,.xs-col{
  --halo:0 12px 34px -14px color-mix(in srgb,var(--pa) 45%,transparent),0 8px 24px -14px color-mix(in srgb,var(--pb) 25%,transparent);
  --halo-lift:0 22px 48px -18px color-mix(in srgb,var(--pa) 55%,transparent),0 14px 34px -16px color-mix(in srgb,var(--pb) 35%,transparent);
  --halo-soft:0 30px 70px -34px color-mix(in srgb,var(--pa) 50%,transparent);
}
/* the plan on home: intro pistachio + lilac, Trusted by none, Featured cornflower + pistachio, Expertise walks its
   four (site.js sets the section's pair as the scene walks), Who we work with red pencil + pistachio, Story cornflower
   + lilac, Journal cornflower + red pencil, the close red pencil + lilac. The sector pages take the same order */
.page-home .intro{--pa:var(--pist);--pb:var(--lilac)}
.recent{--pa:var(--corn);--pb:var(--pist);overflow:clip}
.expertise{--pa:var(--corn);--pb:var(--red)}
.sectors{--pa:var(--red);--pb:var(--pist)}
.story{--pa:var(--corn);--pb:var(--lilac)}
.journal{--pa:var(--corn);--pb:var(--red)}
.close{--pa:var(--red);--pb:var(--lilac)}
.page-sector .sec:nth-of-type(1){--pa:var(--pist);--pb:var(--lilac)}
.page-sector .sec:nth-of-type(2){--pa:var(--corn);--pb:var(--pist)}
.page-sector .sec:nth-of-type(3){--pa:var(--red);--pb:var(--pist)}
.page-sector .sec:nth-of-type(4){--pa:var(--corn);--pb:var(--lilac)}
@media (max-width:767px){:root{--hdr:56px;--mark:22px;--t-17:16px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:var(--t-17);line-height:1.55;font-weight:400;overflow-x:hidden}
body.loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:500;text-transform:uppercase;line-height:1.04;margin:0;letter-spacing:-.01em;text-wrap:pretty}
p,li,.next-link,.cap-line{text-wrap:pretty}
h2{font-size:var(--t-48)}
h3{font-size:var(--t-22);letter-spacing:0}
p{margin:0}
p + p{margin-top:1em}
ul{margin:0;padding:0;list-style:none}
.skip{position:absolute;left:-200vw;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:100;text-decoration:none}
.skip:focus{left:8px}
.lab{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}
.hold{color:var(--muted)}
.lead{font-size:var(--t-22);line-height:1.4;max-width:46ch;margin-top:28px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.count{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--label);vertical-align:top;margin-left:6px}
.count-row{display:block;margin:6px 0 0}

/* ---------- the gradient: a slow light and the partner's tint drifting inside every accent square ---------- */
.glow{position:absolute;left:-30%;top:-30%;width:160%;height:160%;pointer-events:none;will-change:transform;border-radius:50%}
.g1{background:radial-gradient(closest-side,rgba(255,255,255,.3),rgba(255,255,255,0) 72%);animation:g1 13s ease-in-out infinite alternate}
.g2{background:radial-gradient(closest-side,var(--g2,rgba(201,182,232,.34)),rgba(201,182,232,0) 72%);animation:g2 17s ease-in-out infinite alternate}
@keyframes g1{from{transform:translate(-14%,-10%) scale(.9)}to{transform:translate(14%,12%) scale(1.15)}}
@keyframes g2{from{transform:translate(18%,16%) scale(1.1)}to{transform:translate(-12%,-16%) scale(.85)}}
@media (prefers-reduced-motion:reduce){.g1,.g2{animation:none}}

/* ---------- the loader: the mark fills like liquid, then opens into the banner ---------- */
.loader{position:fixed;inset:0;z-index:60;background:var(--white);display:grid;place-items:center}
.loader[hidden]{display:none}
.lmark{position:relative;width:min(22vh,120px);aspect-ratio:1}
.lsq{position:absolute;overflow:hidden;background:var(--grey)}
.lsq-a{left:0;top:0;width:62.5%;height:62.5%}
.lsq-b{left:37.5%;top:37.5%;width:62.5%;height:62.5%}
.lsq-s{position:absolute;left:37.5%;top:37.5%;width:25%;height:25%;background:var(--white)}
.liq-w{position:absolute;left:-50%;top:-50%;width:200%;height:200%;transform:translateY(100%);will-change:transform}
.liq{position:absolute;inset:0;border-radius:43% 47% 44% 46%;animation:liq 3.6s linear infinite}
.lsq-a .liq{background:var(--corn)}
.lsq-b .liq{background:var(--red)}
@keyframes liq{to{transform:rotate(360deg)}}

/* ---------- header: the lockup plain, the menu a glass pill ---------- */
.hdr{position:fixed;left:0;right:0;top:0;height:var(--hdr);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);background:transparent;transition:background-color .3s}
.hdr.solid,html:not(.js) .hdr{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lockup{display:inline-flex;align-items:center;gap:calc(var(--mark) * .27);height:var(--mark);text-decoration:none;flex:none}
.slot{position:relative;display:block;width:var(--mark);height:var(--mark);flex:none}
.hm-box,.fm-box{position:absolute;inset:0;display:block}
.hm,.fm{position:absolute;display:block}
.hm{visibility:hidden}
.hdr.docked .hm,html:not(.js) .hm{visibility:visible}
.hm-a,.fm-a{left:0;top:0;width:62.5%;height:62.5%;background:var(--corn)}
.hm-b,.fm-b{left:37.5%;top:37.5%;width:62.5%;height:62.5%;background:var(--red)}
.hm-s,.fm-s{left:37.5%;top:37.5%;width:25%;height:25%;background:var(--white)}
.wordmark{height:var(--mark);width:auto}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),var(--halo);border-radius:999px}
.menu{display:flex;align-items:center;height:40px;padding:0 6px}
.menu a{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:8px 22px;border-radius:999px;transition:background-color .25s,box-shadow .25s}
.menu a:hover,.menu a:focus-visible{background:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(91,110,225,.5);outline:none}
.burger{display:none;font:600 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:0 16px;height:36px;cursor:pointer}
.burger:hover,.burger:focus-visible{background:rgba(255,255,255,.85);outline:none}
.burger .burger-x{display:none}
.burger[aria-expanded="true"] .burger-l{display:none}
.burger[aria-expanded="true"] .burger-x{display:inline}
.mmenu{position:fixed;left:0;right:0;top:var(--hdr);bottom:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:49;display:grid;align-content:start;padding:24px var(--gutter);gap:6px}
.mmenu[hidden]{display:none}
.mmenu a:hover,.mmenu a:focus-visible{text-decoration:underline;text-underline-offset:6px;outline:none}
@media (min-width:768px){.mmenu{display:none}}
.mmenu a{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:var(--t-32);color:var(--ink);text-decoration:none;padding:8px 0}
@media (max-width:767px){.menu{display:none}.burger{display:block}}
/* the menu words: ink at rest; on hover and focus the word takes a pair's gradient across the type, one pair a word (K, 26 Sep) */
.mt{background:linear-gradient(100deg,var(--ka),var(--kb));-webkit-background-clip:text;background-clip:text;color:var(--ink);transition:color .25s}
.menu a:hover .mt,.menu a:focus-visible .mt,.mmenu a:hover .mt,.mmenu a:focus-visible .mt{color:transparent}
.menu a:nth-child(1),.mmenu a:nth-child(1){--ka:var(--corn);--kb:var(--red)}
.menu a:nth-child(2),.mmenu a:nth-child(2){--ka:var(--red);--kb:var(--pist)}
.menu a:nth-child(3),.mmenu a:nth-child(3){--ka:var(--pist);--kb:var(--lilac)}
.menu a:nth-child(4),.mmenu a:nth-child(4){--ka:var(--lilac);--kb:var(--corn)}
.menu a:nth-child(5),.mmenu a:nth-child(5){--ka:var(--corn);--kb:var(--pist)}

/* ---------- placeholders (named for the Custom Asset Plan) ---------- */
.ph{position:relative;background:var(--grey);overflow:hidden;display:grid;place-items:center;width:100%}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .6px),var(--grey-2) calc(50% - .6px),var(--grey-2) calc(50% + .6px),transparent calc(50% + .6px))}
.ph span{position:relative;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--label);text-align:center;padding:2px 8px;background:var(--grey);line-height:1.6;max-width:90%}

/* ---------- buttons: outlined glass at rest; on hover the outline goes and the glass bubble shows ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;text-transform:capitalize;border:1px solid var(--ink);border-radius:999px;font-family:var(--body);font-weight:500;font-size:15px;line-height:1;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s,transform .18s}
.btn:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--pa) 42%,transparent),color-mix(in srgb,var(--pb) 38%,transparent)),rgba(255,255,255,.8);border-color:transparent;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.4),var(--halo-lift);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--corn);outline-offset:3px}
.btn-solid{background:var(--ink);color:#fff;box-shadow:none}
.btn-solid:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--pa) 55%,transparent),color-mix(in srgb,var(--pb) 50%,transparent)),rgba(20,20,20,.8);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--halo-lift)}
.btn-big{height:60px;padding:0 34px;font-size:17px}
.chip{height:36px;padding:0 16px;text-transform:capitalize;border:1px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 14px/1 var(--body);color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.chip:hover{background:linear-gradient(135deg,rgba(91,110,225,.32),rgba(216,69,43,.28)),rgba(255,255,255,.85);border-color:transparent;box-shadow:inset 0 1px 0 #fff,var(--halo)}
.chip.is-on{background:var(--ink);color:#fff}
.chip:active{transform:scale(.97)}
.chip:focus-visible{outline:2px solid var(--corn);outline-offset:3px}

/* ---------- headings that load into place: words in line masks ---------- */
.rise .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .03em .1em 0;margin:-.1em -.03em -.1em 0}
.rise .wi{display:inline-block;transform:translateY(112%);will-change:transform}
html:not(.js) .rise .wi{transform:none}
@media (prefers-reduced-motion:reduce){.rise .wi{transform:none}}

/* ---------- the film: transparent and above the page, so the intro rises under the shrinking pair ---------- */
.film{position:relative;z-index:3;height:100vh;height:100svh;overflow:hidden;background:transparent}
.stage{position:absolute;inset:0;overflow:hidden;will-change:transform}
.pair{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.sq{position:absolute;will-change:transform;overflow:hidden}
.sq .next{position:absolute;left:-45%;top:-45%;width:190%;height:190%;border-radius:50%;background:radial-gradient(closest-side,var(--nc,transparent) 58%,transparent 100%);opacity:0;transform:scale(.3);z-index:2;pointer-events:none;will-change:transform,opacity}
.sq-a{background:var(--corn);left:calc(50vw - 80vh);top:-30vh;width:100vh;height:100vh;--g2:rgba(216,69,43,.3)}
.sq-b{background:var(--red);left:calc(50vw - 20vh);top:30vh;width:100vh;height:100vh;--g2:rgba(91,110,225,.28)}
.shared{position:absolute;background:var(--white);left:calc(50vw - 20vh);top:30vh;width:40vh;height:40vh}
.win{position:absolute;inset:0;background:var(--white);clip-path:inset(30vh calc(50vw - 20vh) 30vh calc(50vw - 20vh));will-change:clip-path}
.inner{position:absolute;inset:0;clip-path:inset(32vh calc(50vw - 18vh) 32vh calc(50vw - 18vh));will-change:clip-path}
.img{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.img-2{opacity:0}
.img .ph{position:absolute;inset:0;width:auto}
.reel{position:absolute;inset:0;z-index:3}
.reel-f{position:absolute;inset:0;opacity:0}
.reel-f:first-child{opacity:1}
.reel-f .ph{position:absolute;inset:0;width:auto}
@media (max-width:767px){.img .ph span,.reel-f .ph span{max-width:30vw;font-size:9px}}
.cap{position:absolute;left:0;right:0;bottom:0;padding:22px var(--gutter) 26px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:end;opacity:0;visibility:hidden;transform:translateY(24px)}
.cap-meta{font-size:13px;color:var(--muted);grid-column:1;min-width:0}
.cap-line{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:var(--t-22);line-height:1.1;grid-column:1;letter-spacing:0;min-width:0}
.cap .btn{grid-column:2;grid-row:1/3;align-self:end}
@media (max-width:767px){.cap{grid-template-columns:1fr;padding:16px var(--gutter) 18px}.cap .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}}
@media (orientation:portrait){.film{--S:min(52vh,125vw)}.sq-a{left:calc(50vw - .8 * var(--S));top:calc(50vh - .8 * var(--S));width:var(--S);height:var(--S)}.sq-b{left:calc(50vw - .2 * var(--S));top:calc(50vh - .2 * var(--S));width:var(--S);height:var(--S)}.shared{left:calc(50vw - .2 * var(--S));top:calc(50vh - .2 * var(--S));width:calc(.4 * var(--S));height:calc(.4 * var(--S))}.win{clip-path:inset(calc(50vh - .2 * var(--S)) calc(50vw - .2 * var(--S)))}.inner{clip-path:inset(calc(50vh - .18 * var(--S)) calc(50vw - .18 * var(--S)))}}
@media (prefers-reduced-motion:reduce){.film{height:auto;min-height:100vh}}

/* ---------- after the film: it overlaps the last 48 vh of the pin and slides up under the shrinking pair;
   a pair at page scale drifts behind the intro (lilac + pistachio), another behind the Feed (cornflower +
   pistachio), one behind the enquiry panel (red + lilac); each moves down with the scroll ---------- */
.after-film{position:relative;overflow:clip;margin-top:-48vh}
@media (prefers-reduced-motion:reduce){.after-film{margin-top:0}}
.after-film .sec{position:relative;z-index:1}
.page-home .intro{min-height:0;padding-top:clamp(40px,6vh,80px)}
.drift{position:absolute;right:calc(-.12 * min(58vh,60vw));top:6vh;width:min(58vh,60vw);aspect-ratio:1;pointer-events:none;z-index:0;will-change:transform}
.dsq{position:absolute;overflow:hidden;isolation:isolate}
.dsq-a{left:0;top:0;width:62.5%;height:62.5%;background:var(--lilac);--g2:rgba(185,210,107,.34)}
.dsq-b{left:37.5%;top:37.5%;width:62.5%;height:62.5%;background:var(--pist);--g2:rgba(201,182,232,.4)}
.dsq-s{left:37.5%;top:37.5%;width:25%;height:25%;background:var(--white)}
.dsq .next{position:absolute;left:-45%;top:-45%;width:190%;height:190%;border-radius:50%;background:radial-gradient(closest-side,var(--nc,transparent) 58%,transparent 100%);opacity:0;transform:scale(.3);z-index:2;pointer-events:none;will-change:transform,opacity}
/* the pair under All work in the Featured head: in flow, wiping in from white as the head arrives, cornflower then
   pistachio, and staying (no walk: one pair a section) */
.drift-feat{position:absolute;left:calc(-1 * var(--gutter) - .12 * min(58vh,60vw));right:auto;top:100%;width:min(58vh,60vw);margin-top:clamp(40px,6vh,72px);pointer-events:none}
html:not(.js) .drift-feat{visibility:visible}
@media (prefers-reduced-motion:reduce){.drift-feat{visibility:visible}}
.drift-feat .dsq-a{background:var(--corn);--g2:rgba(185,210,107,.34)}
.drift-feat .dsq-b{background:var(--pist);--g2:rgba(91,110,225,.3)}
/* a small pair peeking behind a plate (the sector blocks): a branding element, walking the palette too */
.drift-mini{position:absolute;left:auto;right:-6%;top:-10%;bottom:auto;width:26%;z-index:0}
.row:nth-child(even) .drift-mini{right:auto;left:-6%}
.drift-mini .dsq-a{background:var(--corn);--g2:rgba(185,210,107,.34)}
.drift-mini .dsq-b{background:var(--pist);--g2:rgba(91,110,225,.3)}
/* the halo: two soft lights behind an image, whose colours walk the whole palette with the scroll (K, 26 Sep): site.js
   writes --ha and --hb from the section's progress; without it the lights rest on the section's pair. No blur, so
   the repaint on every frame is a gradient only. The lights swap corners between halo-0 and halo-1 */
.sectors,.story,.page-sector .sec{overflow:clip}   /* the halos glow past the wrap, never past the page */
.halo{position:relative;isolation:isolate}
.halo::before{content:"";position:absolute;inset:-24% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 38% 38% at 30% 32%,color-mix(in srgb,var(--ha,var(--pa)) 58%,transparent),color-mix(in srgb,var(--ha,var(--pa)) 22%,transparent) 36%,transparent 66%),radial-gradient(ellipse 38% 38% at 70% 68%,color-mix(in srgb,var(--hb,var(--pb)) 52%,transparent),color-mix(in srgb,var(--hb,var(--pb)) 20%,transparent) 36%,transparent 66%)}
.halo-1::before{background:radial-gradient(ellipse 38% 38% at 70% 32%,color-mix(in srgb,var(--ha,var(--pa)) 58%,transparent),color-mix(in srgb,var(--ha,var(--pa)) 22%,transparent) 36%,transparent 66%),radial-gradient(ellipse 38% 38% at 30% 68%,color-mix(in srgb,var(--hb,var(--pb)) 52%,transparent),color-mix(in srgb,var(--hb,var(--pb)) 20%,transparent) 36%,transparent 66%)}
.halo .ph{position:relative;z-index:1}
.drift-enq{right:calc(-.08 * min(46vh,44vw));top:auto;bottom:6vh;width:min(46vh,44vw)}   /* its 8vh travel ends 2vh under the section's edge, not under the footer */
.drift-enq .dsq-a{background:var(--lilac);--g2:rgba(216,69,43,.3)}   /* lilac + red: the pair the walk starts from (cycle 3); K, 26 Sep: the walk stays */
.drift-enq .dsq-b{background:var(--red);--g2:rgba(201,182,232,.4)}
.enquiry{position:relative;overflow:clip}
.enquiry .wrap{position:relative;z-index:1}
/* the close (home, K 25 Sep): open type, no panel. The line's last word walks (site.js) inside a line mask, the
   slot padded so the red underline is not clipped; the walking unit carries the full stop */
.close .lab{display:block}
.close-line{font-size:var(--t-112);line-height:1;max-width:none;margin-top:16px}
.close-slot{display:inline-block;vertical-align:top;white-space:nowrap;overflow:hidden;padding:.08em .04em .16em 0;margin:-.08em -.04em -.16em 0}
.close-run{display:inline-block;will-change:transform}
.close-word{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:.04em;text-underline-offset:.09em;text-decoration-skip-ink:none}
.close .lead{margin-top:32px}
.close .btn{margin-top:32px}
@media (max-width:767px){.drift{width:46vw;right:-8vw;top:2vh;opacity:.85}.drift-feat{width:40vw;right:auto;top:auto;margin-top:28px;opacity:1}.drift-mini{width:30%;left:-6%;bottom:-8%;top:auto;right:auto;opacity:1}.drift-enq{width:44vw;right:-10vw;top:auto;bottom:-6vh}}

/* ---------- sections ---------- */
.sec{padding:clamp(72px,9vw,128px) 0}
.sec.top{padding-top:calc(var(--hdr) + clamp(48px,7vw,96px))}
.intro{min-height:min(92vh,900px);display:flex;align-items:center}
.intro .wrap{width:100%}
.statement{font-size:var(--t-72);max-width:22ch}
/* the statement's keyword on the section's own accent (ink on pistachio); the words and their full stop hold one line */
.kw{white-space:nowrap}
.kw-g,.kw-g .wi{background:linear-gradient(100deg,var(--ka),var(--kb));-webkit-background-clip:text;background-clip:text;color:transparent}
.kw-branding{--ka:var(--corn);--kb:var(--red)}
.kw-web{--ka:var(--red);--kb:var(--pist)}
.kw-content{--ka:var(--pist);--kb:var(--lilac)}
.intro .statement{max-width:min(22ch,60vw)}
.intro .lead{max-width:min(46ch,58vw)}
@media (max-width:767px){.intro .statement,.intro .lead{max-width:none}.intro{min-height:0;padding-top:clamp(120px,34vw,180px)}}
.statement.big,.big{font-size:var(--t-112);max-width:14ch;line-height:1}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
html.js .sec .wrap > *{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html.js .sec.in .wrap > *{opacity:1;transform:none}
html.js .sec.frames .seq > *{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html.js .sec.frames .wrap > .seq,html.js .sec.frames .seq > .in{opacity:1;transform:none}
html.js .sec.in .wrap > :nth-child(2){transition-delay:.09s}
html.js .sec.in .wrap > :nth-child(3){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){html.js .sec .wrap > *,html.js .sec.frames .seq > *{opacity:1;transform:none;transition:none}}

/* the client grid */
.trusted{display:grid;grid-template-columns:minmax(160px,1fr) 3.2fr;gap:32px;align-items:start}
.trusted-lab{position:sticky;top:calc(var(--hdr) + 24px)}
.trusted-lab .lab{display:block;font-size:var(--t-22);letter-spacing:.02em;color:var(--ink)}
.trusted-lab .count{margin:6px 0 0;display:block}
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--grey-2);border:1px solid var(--grey-2)}
.logo{background:var(--white);aspect-ratio:16/9;display:grid;place-items:center;padding:12px;text-align:center;transition:background-color .3s}
.logo:hover{background:#FAFAFA}
.logo .lab{color:var(--label)}
@media (max-width:767px){.trusted{grid-template-columns:1fr;gap:20px}.trusted-lab{position:static}.logos{grid-template-columns:1fr 1fr}}

/* featured work: a sticky head on its own layer with a guarded width, two staggered columns of cards */
.featured{display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(0,2.3fr);gap:clamp(24px,4vw,64px);align-items:start}
.featured-head{position:sticky;top:calc(var(--hdr) + 24px);z-index:2;display:grid;gap:20px;justify-items:start;min-width:0;max-width:100%;container-type:inline-size}
.featured-head h2{font-size:clamp(26px,10.6cqi,var(--t-48))}   /* one line in its column down to 900 px, never over the cards */
.masonry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;min-width:0;padding-top:clamp(88px,11vw,150px)}
.col{display:grid;gap:24px;min-width:0}
.col-2{margin-top:36%}
.card{display:block;min-width:0;text-decoration:none;color:inherit;border:1px solid var(--grey-2);padding:12px;background:var(--white);border-radius:8px;will-change:transform,opacity;transition:border-color .3s,box-shadow .4s}
.card:hover{border-color:color-mix(in srgb,var(--pa) 50%,transparent);box-shadow:var(--halo-soft)}
@media (max-width:899px){.featured{grid-template-columns:1fr;gap:32px}.featured-head{position:static;z-index:auto}.masonry{padding-top:0}}
.card-img{overflow:hidden;border-radius:3px}
.card-img > .ph,.card-img > .cover{transition:transform .9s var(--ease-out)}
.card:hover .card-img > .ph,.card:hover .card-img > .cover{transform:scale(1.035)}
.card-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:15px}
.card-cap b{font-weight:500;display:block}
.card-cap .tile-meta{margin-top:0}
.plus{width:22px;height:22px;position:relative;flex:none;transition:transform .45s var(--ease-out)}
.plus::before,.plus::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;transform:translate(-50%,-50%)}
.plus::before{width:14px;height:1.5px}
.plus::after{width:1.5px;height:14px}
.card:hover .plus{transform:rotate(90deg)}
@media (max-width:767px){.featured{grid-template-columns:1fr;gap:28px}.featured-head{position:static}.masonry{gap:14px}.col{gap:14px}.col-2{margin-top:30%}.card{padding:8px}.card-cap{font-size:14px}}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tiles-3{margin-top:48px}
@media (max-width:767px){.tiles{grid-template-columns:1fr 1fr;gap:14px}}
.tile{display:block;text-decoration:none;color:inherit}
.tile-in{will-change:transform,opacity;transform-origin:50% 50%}
.tile-cap{margin-top:12px;font-size:15px;display:block}
.tile-cap b{font-weight:500}
.tile:hover .tile-cap b{text-decoration:underline;text-underline-offset:3px}
.tile-meta{color:var(--muted);font-size:13px;display:block;margin-top:2px}

/* the expertise row on home (K, 25 Sep), now the phone and reduced-motion form of the scene below: four colour
   squares on the page's tracks, the site's two lights inside and no type; the project still fills the square on
   hover or focus (at rest on a touch screen). The body hangs from one hairline under the whole row; on hover the
   rule under that column takes the discipline's pair */
.expertise .sec-head{margin-bottom:0}
.x-state{font-size:var(--t-32);line-height:1.25;max-width:min(44ch,48vw);margin-top:24px}
.x-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px;margin-top:56px}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){html.js .expertise .x-row{display:none}}
.x-cell{display:block;min-width:0;text-decoration:none;color:inherit;container-type:inline-size}
.x-cell:focus-visible{outline:2px solid var(--corn);outline-offset:4px}
/* each discipline keeps its colour and its partner (accents two at a time): the partner is the tint in the light */
.x-branding,.disc-branding{--c:var(--corn);--p:var(--red);--g2:rgba(216,69,43,.3)}
.x-web,.disc-web{--c:var(--red);--p:var(--pist);--g2:rgba(185,210,107,.34)}
.x-content,.disc-content{--c:var(--pist);--p:var(--lilac);--g2:rgba(201,182,232,.4)}
.x-strategy,.disc-strategy{--c:var(--lilac);--p:var(--corn);--g2:rgba(91,110,225,.3)}
.x-block{position:relative;aspect-ratio:1;background:var(--c);overflow:hidden;isolation:isolate}
.x-still{position:absolute;inset:0;opacity:0;transform:translateY(8%);transition:opacity .5s var(--ease-out),transform .8s var(--ease-out);will-change:transform,opacity}
.x-still .ph{position:absolute;inset:0;height:100%}
.x-cell:hover .x-still,.x-cell:focus-visible .x-still{opacity:1;transform:none}
@media (hover:none){.x-still{opacity:1;transform:none}}
.x-body{position:relative;margin-top:16px;padding-top:14px;border-top:1px solid var(--grey-2)}
.x-cell:not(:last-child) .x-body::after{content:"";position:absolute;left:100%;top:-1px;width:24px;height:1px;background:var(--grey-2)}   /* the hairline crosses the gutter */
.x-pair{position:absolute;left:0;top:-1px;height:2px;width:100%;opacity:0;transition:opacity .25s}
.x-pair span{position:absolute;top:0;height:100%}
.x-pair span:first-child{left:0;width:62.5%;background:var(--c)}
.x-pair span:last-child{left:62.5%;width:37.5%;background:var(--p)}
.x-cell:hover .x-pair,.x-cell:focus-visible .x-pair{opacity:1}
.x-meta{display:flex;justify-content:space-between;gap:12px}
.x-meta .lab:last-child{text-align:right;color:var(--ink);opacity:.582;transition:opacity .25s}   /* ink at .582 on white is #767676: the change to ink is an opacity move */
.x-cell:hover .x-meta .lab:last-child,.x-cell:focus-visible .x-meta .lab:last-child{opacity:1}
.x-name{font-size:clamp(var(--t-32),12.6cqi,var(--t-48));font-weight:600;line-height:1;letter-spacing:-.02em;margin-top:14px}
.x-line{font-size:var(--t-17);line-height:1.45;margin-top:12px;max-width:36ch}
.x-items{font-size:15px;line-height:1.5;color:var(--muted);margin-top:16px}
@media (max-width:1023px){.x-row{grid-template-columns:repeat(2,minmax(0,1fr))}.x-cell:nth-child(2n) .x-body::after{display:none}}
@media (max-width:767px){.x-state{max-width:none}}
@media (max-width:599px){.x-row{grid-template-columns:minmax(0,1fr);gap:40px}.x-body::after{display:none}}
@media (prefers-reduced-motion:reduce){.x-still,.x-pair,.x-meta .lab{transition:none}.x-still{transform:none}}
/* the Expertise scene (K's H15, the direction of 26 Sep): the pair at page scale as the window device, pinned by
   site.js for 75vh a discipline. u is the mark's unit: squares of 15u offset 9u, the window 6u; A bleeds off the
   top and the left, B off the bottom; never mirrored, never rotated. The text column stands from 20.5u to the wrap's
   edge with its top on the window's top. Wide screens without reduced motion only; the cells above serve the rest */
.xs{display:none;--u:min(4vh,2.6vw);position:relative;height:100vh;margin-top:clamp(40px,5vh,56px);overflow:hidden;background:var(--white)}
@media (min-width:1024px){html.js .xs{display:block}}
.xs-stage{position:absolute;inset:0}
.xs-halo{position:absolute;left:calc(-12 * var(--u));top:calc(-12 * var(--u));width:calc(48 * var(--u));height:calc(48 * var(--u));z-index:0;pointer-events:none;
  background:radial-gradient(circle calc(12 * var(--u)) at 64.6% 37.5%,color-mix(in srgb,var(--ha,var(--corn)) 60%,transparent),color-mix(in srgb,var(--ha,var(--corn)) 24%,transparent) 36%,transparent 66%),radial-gradient(circle calc(12 * var(--u)) at 37.5% 64.6%,color-mix(in srgb,var(--hb,var(--red)) 55%,transparent),color-mix(in srgb,var(--hb,var(--red)) 22%,transparent) 36%,transparent 66%)}   /* two lights behind the device's free corners (19u, 6u) and (6u, 19u), each ending inside the scene */
.xs-a{z-index:1}
.xs-sq{position:absolute;width:calc(13 * var(--u));height:calc(13 * var(--u));overflow:hidden;isolation:isolate;will-change:clip-path}
.xs-a{left:calc(.5 * var(--u));top:calc(.5 * var(--u));background:var(--corn);--g2:rgba(216,69,43,.3)}
.xs-b{left:calc(6 * var(--u));top:calc(6 * var(--u));background:var(--red);--g2:rgba(91,110,225,.28);z-index:2}
.xs-sq .next{position:absolute;left:-45%;top:-45%;width:190%;height:190%;border-radius:50%;background:radial-gradient(closest-side,var(--nc,transparent) 58%,transparent 100%);opacity:0;transform:scale(.3);z-index:2;pointer-events:none;will-change:transform,opacity}
.xs-win{position:absolute;left:calc(6 * var(--u));top:calc(6 * var(--u));width:calc(7.5 * var(--u));height:calc(7.5 * var(--u));background:var(--white);z-index:3;will-change:clip-path}
.xs-still{position:absolute;inset:calc(.3 * var(--u));overflow:hidden}   /* the film's 5 % white margin: the window is its closed frame */
.xs-img{position:absolute;inset:0;will-change:opacity}
.xs-img + .xs-img{opacity:0}
.xs-img .ph{position:absolute;inset:0;height:100%}
.xs-cols{position:absolute;left:calc(20 * var(--u));right:var(--gutter);top:calc(4.5 * var(--u));z-index:4}
html.js .xs-cols{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html.js .xs.in .xs-cols{opacity:1;transform:none}
.xs-col{position:absolute;left:0;right:0;top:0;visibility:hidden;--pa:var(--c);--pb:var(--p)}
.xs-col.is-on{visibility:visible}
.xs-col.is-out{pointer-events:none}
.xs-link{display:block;text-decoration:none;color:inherit}
.xs-link:focus-visible{outline:2px solid var(--corn);outline-offset:4px}
.m{display:block;overflow:hidden}   /* a line mask: the line rises inside it, then the mask opens so a hover halo is not clipped */
.mi{display:block;will-change:transform}
.xs-col.is-set .m{overflow:visible}
.xs-count{font-variant-numeric:tabular-nums}
.xs-rule{display:flex;height:2px;margin-top:12px}
.xs-rule i{display:block;height:100%}
.xs-rule i:first-child{width:62.5%;background:var(--c)}
.xs-rule i:last-child{width:37.5%;background:var(--p)}
.xs-proj{margin-top:14px;color:var(--ink)}
.xs-name{font-family:var(--display);font-weight:600;font-size:var(--t-48);line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin-top:14px}
.xs-link:hover .xs-name{text-decoration:underline;text-decoration-thickness:.04em;text-underline-offset:.08em}
.xs-line{font-size:var(--t-17);line-height:1.45;margin-top:12px;max-width:36ch}
.xs-items{font-size:15px;line-height:1.5;color:var(--muted);margin-top:16px}
.xs-btn{margin-top:28px;padding-bottom:2px}
@media (prefers-reduced-motion:reduce){html.js .xs-cols{opacity:1;transform:none;transition:none}.xs-img + .xs-img{display:none}}
/* the Expertise page's colour block: the name at the foot in the display face, sized to the block; above it the
   project still of that discipline rises inside the colour on hover. Touch screens show the still from the start */
.cell-colour{background:var(--c);aspect-ratio:4/3;position:relative;overflow:hidden;container-type:inline-size;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(14px,1.5vw,22px);padding:clamp(18px,2vw,30px)}
.cell-still{position:relative;min-height:0;opacity:0;transform:translateY(10%);transition:opacity .5s var(--ease-out),transform .8s var(--ease-out);will-change:transform,opacity}
.cell-still .ph{position:absolute;inset:0;height:100%}
.cell-colour:hover .cell-still{opacity:1;transform:none}
@media (hover:none){.cell-still{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cell-still{transition:none;transform:none}}
.cell-name{font-family:var(--display);font-weight:600;font-size:var(--t-48);font-size:clamp(var(--t-48),13cqi,96px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;position:relative;margin:0;overflow-wrap:anywhere}
.labs{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px}
.labs li{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--label);line-height:1.4;white-space:nowrap}

/* who we work with (K's H17, the direction of 26 Sep): the three sectors as a list on the left, the active one in
   ink with the pair's rule under it and its copy in a slot below; on the right the chain of three mark squares
   stepping down the diagonal (u = the half's width / 27.5: squares of 15u, offset 9u, sharing 6u), bleeding off the
   page's right edge. The plate sits in one square, red pencil and pistachio in the others; where the two colours
   share, the blend; where a colour shares with the plate, the plate. Phones stack the three as blocks */
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:48px;align-items:start}
.wlist{display:grid;gap:28px;justify-items:start}
.witem{display:block;max-width:100%;text-align:left;background:none;border:0;padding:0;font:inherit;color:var(--label);cursor:pointer;transition:color .25s}
.witem .lab{display:block;margin-bottom:8px}
.wname{font-family:var(--display);font-weight:500;font-size:var(--t-48);line-height:1.04;letter-spacing:-.01em;text-transform:uppercase;display:inline-block;text-wrap:pretty}
.witem.is-on{color:var(--ink)}
.witem:focus-visible{outline:2px solid var(--corn);outline-offset:4px}
.wrule{display:none;height:2px;margin-top:10px}
.witem.is-on .wrule{display:flex}
.wrule i{display:block;height:100%}
.wrule i:first-child{width:62.5%;background:var(--pa)}
.wrule i:last-child{width:37.5%;background:var(--pb)}
.witem-wrap{max-width:100%}
.wpanel{display:none;margin-top:24px;will-change:transform,opacity}
.wpanel.is-on{display:block}
.wplate{display:none}
.wtext p{max-width:46ch}
.wtext p + p{margin-top:.8em}
.wtext .btn{margin-top:24px}
.chainbox{position:relative;aspect-ratio:1}
.chain{position:absolute;inset:0}
.cs{position:absolute;overflow:hidden;isolation:isolate;will-change:transform,opacity;transform-origin:50% 50%}
.cs-a,.cs-b{width:74%;height:74%}   /* the squares at 74 with the white window of 48 at the overlap: the plate a fifth larger than the mark's own window (K, 26 Sep) */
.cs-a{left:0;top:0;background:var(--pa);--g2:rgba(185,210,107,.34);z-index:1}
.cs-b{left:26%;top:26%;background:var(--pb);--g2:rgba(216,69,43,.3);z-index:2}
.cs .next{position:absolute;left:-45%;top:-45%;width:190%;height:190%;border-radius:50%;background:radial-gradient(closest-side,var(--nc,transparent) 58%,transparent 100%);opacity:0;transform:scale(.3);z-index:2;pointer-events:none;will-change:transform,opacity}
.cs-w{left:26%;top:26%;width:48%;height:48%;background:var(--white);z-index:3}
.cs-still{position:absolute;inset:5%;overflow:hidden}   /* the white border around the plate, as the logo's window */
.cplate{position:absolute;inset:0;opacity:0;transition:opacity .5s;overflow:hidden}
.cplate.is-on{opacity:1}
.cplate .ph{position:absolute;inset:0;height:100%;animation:breathe 9s ease-in-out infinite alternate}   /* the plate breathes while the lights drift */
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.cplate .ph{animation:none}}
@media (max-width:767px){
  .who{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .wlist,.chainbox{display:none}
  .wcopy{margin-top:0;display:grid;gap:48px;height:auto!important}
  .wpanel{position:static;visibility:visible;will-change:auto}
  .wplate,.wtitle{display:block}
  .wtitle{font-size:var(--t-32);margin-top:20px}
  .wtext{margin-top:14px}
}
/* the sector blocks as rows (the sector pages): the plate beside three or four lines of copy */
.rows{display:grid;gap:clamp(40px,6vw,88px);margin-top:48px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.row:nth-child(even) .row-plate{order:2}
.row-text h3{font-size:var(--t-32)}
.row-text p{margin-top:14px;max-width:46ch}
.row-text p + p{margin-top:.8em}
.row-text .btn{margin-top:24px}
.row-plate{position:relative}
@media (max-width:767px){.row{grid-template-columns:1fr}.row:nth-child(even) .row-plate{order:0}}
/* a sector page: the plate beside the copy, then the sector's work */
.sector-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center}
.sector-text p{max-width:46ch}
.sector-makes{margin-top:32px}
.sector-makes h2{font-size:var(--t-22);letter-spacing:0;margin-bottom:12px}
@media (max-width:767px){.sector-grid{grid-template-columns:1fr}}

.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.story-text p{max-width:46ch}
.story-text h2 + p{margin-top:28px}
.story-text .btn{margin-top:32px}
@media (max-width:767px){.story-grid{grid-template-columns:1fr}}

/* the journal: a grid that holds (no column can grow past its track), a Read more button per entry at the foot */
.entries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:stretch}
@media (max-width:1023px){.entries{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.entries{grid-template-columns:minmax(0,1fr)}}
.entry{display:flex;flex-direction:column;min-width:0}
.entry h3{margin-top:16px;overflow-wrap:normal;hyphens:none;font-size:min(var(--t-22),1.42vw)}   /* whole words only, and sized so "Alternative Space" holds on one line in a four-column card */
@media (max-width:1023px){.entry h3{font-size:var(--t-22)}}
.entry p{margin-top:8px;font-size:15px;color:var(--muted)}
.entry .lab{margin-top:12px;display:block}
.entry .btn{margin-top:auto;align-self:flex-start}
.entry .lab,.entry p:last-of-type{margin-bottom:20px}
/* the spotlight cards on home (K's H18, the direction of 26 Sep): a hairline card; a light in the section's pair on
   the ground and in the border ring follows the pointer (--mx, --my from site.js); at rest no light. Touch and
   reduced motion: a soft light resting at the card's centre. The ring is a 1 px pseudo-element masked to its border */
.entries .entry{position:relative;border:1px solid var(--grey-2);border-radius:8px;padding:12px;background:var(--white);--mx:50%;--my:50%}
.entries .entry > *{position:relative;z-index:1}
.entries .entry h3,.entries .entry p,.entries .entry .lab{padding:0 4px}
.entries .entry .btn{margin-left:4px;margin-bottom:4px}
.entries .entry-cover{overflow:hidden;border-radius:3px}
.entries .entry-cover .ph{transition:transform .9s var(--ease-out)}
.entries .entry:hover .entry-cover .ph{transform:scale(1.035)}
.entries .entry::after,.entries .entry::before{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity .5s}
.entries .entry::after{inset:0;border-radius:7px;z-index:0;
  background:radial-gradient(360px circle at var(--mx) var(--my),color-mix(in srgb,var(--pa) 22%,transparent),transparent 70%),radial-gradient(360px circle at calc(var(--mx) + 40px) calc(var(--my) + 40px),color-mix(in srgb,var(--pb) 14%,transparent),transparent 70%)}
.entries .entry::before{inset:-1px;border-radius:8px;padding:1px;z-index:2;
  background:radial-gradient(360px circle at var(--mx) var(--my),color-mix(in srgb,var(--pa) 75%,transparent),transparent 70%),radial-gradient(360px circle at calc(var(--mx) + 40px) calc(var(--my) + 40px),color-mix(in srgb,var(--pb) 50%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.entries .entry:hover::after,.entries .entry:hover::before,.entries .entry:focus-within::after,.entries .entry:focus-within::before{opacity:1;transition-duration:.3s}
@media (hover:none){.entries .entry::after,.entries .entry::before{opacity:.6;transition:none}}
@media (prefers-reduced-motion:reduce){.entries .entry::after,.entries .entry::before{opacity:.6;transition:none}.entries .entry-cover .ph{transition:none}.entries .entry:hover .entry-cover .ph{transform:none}}
.entries-rows{display:grid;gap:clamp(40px,6vw,80px)}
.entry-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.entry-row h2{font-size:var(--t-32)}
.entry-row .lead{font-size:var(--t-17);color:var(--muted);margin-top:16px}
.entry-row .btn{margin-top:24px}
@media (max-width:767px){.entry-row{grid-template-columns:1fr}}
.article-text{max-width:62ch;font-size:var(--t-22);line-height:1.45}
.article-text .lab{font-size:11px;line-height:1.6}

/* the enquiry form (the Contact page): the statement beside a glass form panel; the form posts to FORM_ENDPOINT, or opens the mail app while it is empty */
.enq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start;margin-top:clamp(32px,4vw,56px)}
.enq-text .lead{margin-top:0;margin-bottom:32px}
.article-title{font-size:var(--t-48);max-width:none}
.enq-facts{display:grid;gap:14px;font-size:15px}
.enq-facts .lab{display:block;margin-bottom:2px}
.panel{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border:1px solid rgba(255,255,255,.9);border-radius:22px;padding:clamp(20px,3vw,40px);box-shadow:inset 0 1px 0 #fff,var(--halo-soft)}
.enq{display:grid;gap:18px}
.enq-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:grid;gap:6px;min-width:0}
.fld .lab{color:var(--ink)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:var(--t-17);color:var(--ink);width:100%;height:48px;padding:0 14px;border:1px solid var(--glass-line);border-radius:12px;background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.fld textarea{height:auto;min-height:150px;padding:12px 14px;resize:vertical;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--corn);box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(91,110,225,.2)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--label)}
.hp{position:absolute;left:-200vw;top:0;width:1px;height:1px;overflow:hidden}
.enq-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.enq-note{font-size:13px;color:var(--muted);max-width:32ch}
.enq-msg{font-size:15px;margin:0}
.enq-msg[hidden]{display:none}
.enq-msg.is-err{color:var(--red)}
.enq .btn[disabled]{opacity:.55;pointer-events:none}
@media (max-width:1023px){.enq-grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:560px){.enq-two{grid-template-columns:1fr}}
.enquiry-line .lead{margin-bottom:36px}
.disc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.disc-body .lead{margin-top:0}
.disc .wrap > .lab{display:block;margin-top:32px}
.disc-body .labs{margin-top:22px}
.disc-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
.tlink{font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding:8px 0}
.tlink:hover{text-decoration-thickness:2px}
.tlink:focus-visible{outline:2px solid var(--corn);outline-offset:3px}
@media (max-width:767px){.disc-grid{grid-template-columns:1fr}}
/* the studio: the team, four portraits */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.member-name{margin-top:14px;font-weight:500}
.member-role{color:var(--muted);font-size:15px;margin-top:2px}
@media (max-width:767px){.team{grid-template-columns:1fr 1fr;gap:20px 14px}}
/* the studio: each discipline a row that connects the pages, its pair as the mark, the name in the display face */
.disc-list{display:grid;grid-template-columns:auto auto 1fr auto;margin-top:40px;border-top:1px solid var(--grey-2)}
.disc-row{display:grid;grid-column:1/-1;grid-template-columns:auto minmax(9.5em,auto) 1fr auto;grid-template-columns:subgrid;gap:14px clamp(20px,3vw,48px);align-items:center;padding:24px 0;border-bottom:1px solid var(--grey-2)}
.dmark{position:relative;display:block;width:40px;height:40px}
.dmark span{position:absolute;display:block}
.dmark-a{left:0;top:0;width:62.5%;height:62.5%;background:var(--c)}
.dmark-b{left:37.5%;top:37.5%;width:62.5%;height:62.5%;background:var(--p)}
.dmark-s{left:37.5%;top:37.5%;width:25%;height:25%;background:var(--white)}
.disc-name{font-size:var(--t-32);font-weight:600;letter-spacing:-.01em}
.disc-line{color:var(--muted);max-width:46ch}
.disc-go{display:flex;gap:22px}
.disc-go a{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--grey-2)}
.disc-go a:hover{border-color:var(--ink)}
.disc-go a:focus-visible{outline:2px solid var(--corn);outline-offset:3px}
@media (max-width:767px){.disc-list{display:block}.disc-row{grid-template-columns:auto 1fr;padding:22px 0}.disc-line,.disc-go{grid-column:1/-1}.disc-go{gap:26px}.dmark{width:32px;height:32px}}
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px;margin-top:32px;font-size:var(--t-17)}
@media (max-width:767px){.clients{grid-template-columns:1fr 1fr}}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.contact-grid p + p{margin-top:8px}
.big-hold{font-size:var(--t-22)}
.contact-social{margin-top:56px}
@media (max-width:767px){.contact-grid{grid-template-columns:1fr}}

/* ---------- the Lento hero film (research (h), 26 Sep 2026: Pentagram's logo-film grammar) ----------
   One 6.5 s cycle in CSS keyframes, looped. Every element's resting state is the finished lockup, so reduced motion
   and the poster (`.lf-poster`) show the lockup by switching the animations off. Beats: rings 0 to 1.4 s, the o 1.0
   to 1.5, the tick 1.5 to 1.8, the mask 1.8 to 2.6, the words 2.8 to 3.4 at 0.15 s steps, hold to 6.0, fade to 6.5. */
.lf{position:relative;width:100%;aspect-ratio:16/9;background:#4C2248;overflow:hidden;display:grid;place-items:center}
.lf-11{aspect-ratio:1}
.lf-svg{display:block;width:54%;height:auto;overflow:visible}
.lf-11 .lf-svg{width:64%}
.x-still .lf,.xs-img .lf{position:absolute;inset:0;width:auto;height:100%;aspect-ratio:auto}
.lf-ring{opacity:0;animation:lf-ring-0 6.5s linear infinite}
.lf-ring-1{animation-name:lf-ring-1}
.lf-ring-2{animation-name:lf-ring-2}
.lf-ring-3{animation-name:lf-ring-3}
.lf-o{animation:lf-o 6.5s linear infinite}
.lf-tick{animation:lf-tick 6.5s linear infinite}
.lf-clip{animation:lf-clip 6.5s linear infinite}
.lf-word{animation:lf-word-0 6.5s linear infinite}
.lf-word-1{animation-name:lf-word-1}
.lf-word-2{animation-name:lf-word-2}
.lf-word-3{animation-name:lf-word-3}
.lf-mark{animation:lf-mark 6.5s linear infinite}
@keyframes lf-ring-0{0%{r:416px;opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}14.62%{r:104px;opacity:1}20.77%{opacity:1}23.85%,100%{r:104px;opacity:0}}
@keyframes lf-ring-1{0%,2.31%{r:416px;opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}16.92%{r:104px;opacity:1}20.77%{opacity:1}23.85%,100%{r:104px;opacity:0}}
@keyframes lf-ring-2{0%,4.62%{r:416px;opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}19.23%{r:104px;opacity:1}20.77%{opacity:1}23.85%,100%{r:104px;opacity:0}}
@keyframes lf-ring-3{0%,6.92%{r:416px;opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}21.54%{r:104px;opacity:1}23.85%,100%{r:104px;opacity:0}}
@keyframes lf-o{0%,15.38%{opacity:0}23.08%,100%{opacity:1}}
@keyframes lf-tick{0%,23.08%{opacity:0;transform:translateY(-14px);animation-timing-function:cubic-bezier(.16,1,.3,1)}27.69%,100%{opacity:1;transform:none}}
@keyframes lf-clip{0%,27.69%{x:801.5px;width:0px;animation-timing-function:cubic-bezier(.16,1,.3,1)}40%,100%{x:-2px;width:803.5px}}   /* the mask opens from its fixed edge, so the t's tail past the o's left edge never shows at rest */
@keyframes lf-word-0{0%,43.08%{opacity:0}45.38%,100%{opacity:1}}
@keyframes lf-word-1{0%,45.38%{opacity:0}47.69%,100%{opacity:1}}
@keyframes lf-word-2{0%,47.69%{opacity:0}50%,100%{opacity:1}}
@keyframes lf-word-3{0%,50%{opacity:0}52.31%,100%{opacity:1}}
@keyframes lf-mark{0%,92.31%{opacity:1}100%{opacity:0}}
.lf-poster .lf-mark,.lf-poster .lf-ring,.lf-poster .lf-o,.lf-poster .lf-tick,.lf-poster .lf-clip,.lf-poster .lf-word{animation:none}
@media (prefers-reduced-motion:reduce){.lf .lf-mark,.lf .lf-ring,.lf .lf-o,.lf .lf-tick,.lf .lf-clip,.lf .lf-word{animation:none}}

/* ---------- the Lento overview frames (assets/plan/lento-overview.md, K 26 Sep; built 27 Sep) ----------
   Frame map: assets/plan/lento-overview-approved.md (K, 27 Sep). One prefix a frame: .le the explainer (8 s), .lp the
   pattern (13.2 s), .lc the colour fields (still), .lt the type specimen (13.2 s), .lm the motif (8 s), .ls the sign (10 s),
   .lg the feed (24 s there and back). Every element's
   resting state is the finished frame, so reduced motion and `.lx-poster` show the poster by switching the animations
   off. The client's palette lives inside these frames only; the captions outside them are the site's. Sizes are cqw
   (the frame is an inline-size container) so the phone scales the frame, not the layout. */
@font-face{font-family:'Gunter Test';src:url(fonts/GunterTest-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'RNS Sanz';src:url(fonts/RNSSanz-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:block}
.lx{--aub:#4C2248;--mus:#C8922B;--cream:#EFE8D2;--char:#101518;--gunter:'Gunter Test','RNS Sanz',system-ui,sans-serif;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:var(--aub);color:var(--cream)}
.lx svg{display:block}
.lx .ph{position:absolute;inset:0;width:auto;height:auto}
/* the hero's pattern ground: the tonal tile at half its step, breathing 1.00 to 1.02 over the 6.5 s cycle (K, 27 Sep) */
.lf-bg{position:absolute;inset:0;width:100%;height:100%}
.lf-svg{position:relative}
.lf-bg-tile{transform-box:fill-box;transform-origin:center;animation:lf-breathe 6.5s ease-in-out infinite}
@keyframes lf-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.lf-poster .lf-bg-tile{animation:none}
@media (prefers-reduced-motion:reduce){.lf .lf-bg-tile{animation:none}}

/* 02 the explainer: the lockup small at the top, the three lines in Gunter beneath, each word its own fade */
.le{display:grid;grid-template-rows:auto 1fr;justify-items:center;padding:7cqw 8cqw 6cqw}
.le-lockup{width:13cqw;height:auto}
.le-text{align-self:center;text-align:center;max-width:76cqw;padding-top:2cqw}
.le-line{font-family:var(--gunter);font-size:4.4cqw;line-height:1.18;margin:0;color:var(--cream);text-wrap:balance}
.le-line + .le-line{margin-top:.9cqw}
.le-line-2{margin-top:2.6cqw}
.le-w{display:inline-block;opacity:1;animation:le-w-0 8s linear infinite}
.le-acute{position:relative;display:inline-block}
.le-acute::after{content:"";position:absolute;left:.36em;top:-.02em;width:.1em;height:.3em;border-radius:.05em;background:currentColor;transform:rotate(28deg)}   /* the test cut has no é; the acute is drawn until the licensed cut arrives */
.le-w-1{animation-name:le-w-1}
.le-w-2{animation-name:le-w-2}
.le-w-3{animation-name:le-w-3}
.le-w-4{animation-name:le-w-4}
.le-w-5{animation-name:le-w-5}
.le-w-6{animation-name:le-w-6}
.le-w-7{animation-name:le-w-7}
.le-w-8{animation-name:le-w-8}
.le-w-9{animation-name:le-w-9}
.le-w-10{animation-name:le-w-10}
.le-w-11{animation-name:le-w-11}
.le-w-12{animation-name:le-w-12}
.le-w-13{animation-name:le-w-13}
.le-w-14{animation-name:le-w-14}
.le-w-15{animation-name:le-w-15}
.le-w-16{animation-name:le-w-16}
.le-w-17{animation-name:le-w-17}
.le-w-18{animation-name:le-w-18}
.le-w-19{animation-name:le-w-19}
.le-w-20{animation-name:le-w-20}
.le-w-21{animation-name:le-w-21}
@keyframes le-w-0{0%,0.00%{opacity:0}5.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-1{0%,1.50%{opacity:0}6.50%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-2{0%,3.00%{opacity:0}8.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-3{0%,4.50%{opacity:0}9.50%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-4{0%,6.00%{opacity:0}11.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-5{0%,7.50%{opacity:0}12.50%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-6{0%,9.00%{opacity:0}14.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-7{0%,10.50%{opacity:0}15.50%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-8{0%,12.00%{opacity:0}17.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-9{0%,13.50%{opacity:0}18.50%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-10{0%,15.00%{opacity:0}20.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-11{0%,29.00%{opacity:0}34.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-12{0%,30.50%{opacity:0}35.50%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-13{0%,32.00%{opacity:0}37.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-14{0%,33.50%{opacity:0}38.50%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-15{0%,35.00%{opacity:0}40.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-16{0%,36.50%{opacity:0}41.50%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-17{0%,38.00%{opacity:0}43.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-18{0%,52.00%{opacity:0}57.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-19{0%,53.50%{opacity:0}58.50%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-20{0%,55.00%{opacity:0}60.00%,95%{opacity:1}100%{opacity:0}}
@keyframes le-w-21{0%,56.50%{opacity:0}61.50%,95%{opacity:1}100%{opacity:0}}
.lx-poster .le-w{animation:none}
@media (prefers-reduced-motion:reduce){.le .le-w{animation:none}}

/* 03 the pattern film: two wipes behind the still wordmark, then the tile alone, twice the scale, breathing */
.lp-svg{position:absolute;inset:0;width:100%;height:100%}
.lp-wipe{animation:lp-wipe-1 13.2s linear infinite}
.lp-wipe-2{animation-name:lp-wipe-2}
.lp-tile{animation:lp-tile 13.2s linear infinite}
.lp-breathe{transform-box:fill-box;transform-origin:center;animation:lp-breathe 13.2s linear infinite}
.lp-mark{opacity:0;animation:lp-mark 13.2s linear infinite}
@keyframes lp-wipe-1{0%,3.03%{width:0px;animation-timing-function:cubic-bezier(.16,1,.3,1)}15.15%,100%{width:1600px}}
@keyframes lp-wipe-2{0%,26.52%{width:0px;animation-timing-function:cubic-bezier(.16,1,.3,1)}38.64%,100%{width:1600px}}
@keyframes lp-tile{0%,54.55%{opacity:1}60%,100%{opacity:0}}
@keyframes lp-breathe{0%,50%{opacity:0;transform:scale(1)}54.55%{opacity:1;transform:scale(1);animation-timing-function:ease-in-out}77.27%{opacity:1;transform:scale(1.03);animation-timing-function:ease-in-out}95.45%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes lp-mark{0%{opacity:0}3.03%,50%{opacity:1}54.55%,100%{opacity:0}}
.lx-poster .lp-wipe,.lx-poster .lp-tile,.lx-poster .lp-breathe,.lx-poster .lp-mark{animation:none}
@media (prefers-reduced-motion:reduce){.lp .lp-wipe,.lp .lp-tile,.lp .lp-breathe,.lp .lp-mark{animation:none}}

/* 04 the colour: three flat fields side by side in one 16:9 frame, the name in Gunter, the hex small beneath; still */
.lcs{display:grid;grid-template-columns:repeat(3,1fr)}
.lc{display:flex;flex-direction:column;justify-content:flex-end;gap:.8cqw;padding:2.4cqw}
.lc-aubergine{background:#4C2248;color:#EFE8D2}
.lc-mustard{background:#C8922B;color:#101518}
.lc-cream{background:#EFE8D2;color:#101518}
.lc-name{font-family:var(--gunter);font-size:2.4cqw;line-height:1.1}
.lc-hex{font-family:var(--body);font-weight:500;font-size:1cqw;letter-spacing:.22em;text-transform:uppercase}
@media (max-width:767px){.lc{padding:3cqw;gap:1.4cqw}.lc-name{font-size:3.2cqw}.lc-hex{font-size:2.6cqw;letter-spacing:.12em}}

/* 05 the type specimen: the label row, then ten beats stacked in one cell, the tenth the rest state */
.lt{background:var(--cream);color:var(--char);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;column-gap:6cqw;align-items:start;padding:7cqw 8cqw}
.lt-head{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:6cqw;padding-bottom:3.4cqw}
.lt-lab{font-family:var(--body);font-weight:500;font-size:1.05cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--char)}
.lt-beat{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;column-gap:6cqw;align-items:start;opacity:0;transform:none;animation:lt-beat-0 13.2s linear infinite}
.lt-beat-9{opacity:1}
.lt-sec{font-family:var(--gunter);font-size:8cqw;line-height:1;color:var(--aub);letter-spacing:-.005em}
.lt-item{display:block;font-family:var(--body);font-weight:300;font-size:2cqw;line-height:1.4;padding-top:1.6cqw;max-width:34cqw}
.lt-item b{display:block;font-weight:300;font-size:2.9cqw;line-height:1.2;margin-bottom:.6cqw}
.lt-beat-1{animation-name:lt-beat-1}
.lt-beat-2{animation-name:lt-beat-2}
.lt-beat-3{animation-name:lt-beat-3}
.lt-beat-4{animation-name:lt-beat-4}
.lt-beat-5{animation-name:lt-beat-5}
.lt-beat-6{animation-name:lt-beat-6}
.lt-beat-7{animation-name:lt-beat-7}
.lt-beat-8{animation-name:lt-beat-8}
.lt-beat-9{animation-name:lt-beat-9}
@keyframes lt-beat-0{0%,0.00%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}2.65%,7.20%{opacity:1;transform:none}9.09%,100%{opacity:0;transform:none}}
@keyframes lt-beat-1{0%,9.09%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}11.74%,16.29%{opacity:1;transform:none}18.18%,100%{opacity:0;transform:none}}
@keyframes lt-beat-2{0%,18.18%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}20.83%,25.38%{opacity:1;transform:none}27.27%,100%{opacity:0;transform:none}}
@keyframes lt-beat-3{0%,27.27%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}29.92%,34.47%{opacity:1;transform:none}36.36%,100%{opacity:0;transform:none}}
@keyframes lt-beat-4{0%,36.36%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}39.02%,43.56%{opacity:1;transform:none}45.45%,100%{opacity:0;transform:none}}
@keyframes lt-beat-5{0%,45.45%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}48.11%,52.65%{opacity:1;transform:none}54.55%,100%{opacity:0;transform:none}}
@keyframes lt-beat-6{0%,54.55%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}57.20%,61.74%{opacity:1;transform:none}63.64%,100%{opacity:0;transform:none}}
@keyframes lt-beat-7{0%,63.64%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}66.29%,70.83%{opacity:1;transform:none}72.73%,100%{opacity:0;transform:none}}
@keyframes lt-beat-8{0%,72.73%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}75.38%,79.92%{opacity:1;transform:none}81.82%,100%{opacity:0;transform:none}}
@keyframes lt-beat-9{0%,81.82%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}84.47%,98.48%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.lx-poster .lt-beat{animation:none}
@media (prefers-reduced-motion:reduce){.lt .lt-beat{animation:none}}

/* 06 the motif: the drawn ring runs once around from twelve over 5 s, the tick drops as it closes, the ring fades */
.lm{aspect-ratio:4/3}
.lm-svg{position:absolute;inset:0;width:100%;height:100%}
.lm-ring{opacity:0;animation:lm-ring 8s linear infinite}
.lm-tick{animation:lm-tick 8s linear infinite}
@keyframes lm-ring{0%{stroke-dashoffset:var(--lm-c);opacity:1}62.5%{stroke-dashoffset:0;opacity:1}70%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes lm-tick{0%,62.5%{opacity:0;transform:translateY(-14px);animation-timing-function:cubic-bezier(.16,1,.3,1)}66.25%,100%{opacity:1;transform:none}}
.lx-poster .lm-ring,.lx-poster .lm-tick{animation:none}
@media (prefers-reduced-motion:reduce){.lm .lm-ring,.lm .lm-tick{animation:none}}

/* 24 the sign: the dusk fascia crossfades over the day fascia and a warm-white halo rises behind the painted sign; the rest state is dusk, the halo on.
   --sx, --sy, --sw are the painted sign on the dusk plate as the 16:9 frame shows it, set per plate by build.py (LENTO_SIGN) */
.ls{--sx:44.9%;--sy:19.2%;--sw:13.7%}
.ls-plate{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.ls-dusk{opacity:1;animation:ls-dusk 10s linear infinite}
.ls-sign{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw)}
.ls-sign::before{content:"";display:block;padding-top:37.6%}   /* the lockup's ratio, so the halo has a box */
.ls-halo{position:absolute;left:-20%;top:-30%;width:140%;height:auto;filter:blur(.8cqw);opacity:.9;animation:ls-halo 10s linear infinite}
@keyframes ls-dusk{0%,20%{opacity:0}50%,80%{opacity:1}100%{opacity:0}}
@keyframes ls-halo{0%,20%{opacity:0}50%,80%{opacity:.85}100%{opacity:0}}
.lx-poster .ls-dusk,.lx-poster .ls-halo{animation:none}
@media (prefers-reduced-motion:reduce){.ls .ls-dusk,.ls .ls-halo{animation:none}}

/* 14 the feed: the profile head, then the nine posts in one row drifting left 24 s and back */
.lg{--pw:22.2cqw;--gap:1.67cqw;--m:5cqw;background:var(--cream);color:var(--char);display:grid;grid-template-rows:auto 1fr;align-content:center;row-gap:3cqw;padding:5cqw 0}
.lg-head{display:flex;align-items:center;gap:1.4cqw;padding:0 var(--m);font-family:var(--body)}
.lg-avatar{width:4.6cqw;height:4.6cqw;padding:.9cqw;border-radius:50%;background:var(--aub);flex:none}
.lg-name{font-weight:500;font-size:1.6cqw}
.lg-bio{font-weight:300;font-size:1.6cqw;color:var(--char)}
.lg-bio::before{content:"·";margin-right:1.4cqw;opacity:.5}
.lg-row{display:flex;align-items:flex-start;gap:var(--gap);padding:0 var(--m);width:max-content;transform:none;animation:lg-row 24s linear infinite alternate}
.lg-row img{width:var(--pw);height:auto;aspect-ratio:4/5;object-fit:cover;flex:none}
@keyframes lg-row{from{transform:none}to{transform:translateX(calc(100cqw - 9 * var(--pw) - 8 * var(--gap) - 2 * var(--m)))}}
.lx-poster .lg-row{animation:none}
@media (prefers-reduced-motion:reduce){.lg .lg-row{animation:none}}
@media (max-width:767px){.lg{--pw:36cqw;--gap:2.4cqw;--m:5cqw}.lg-name,.lg-bio{font-size:2.6cqw}.lg-avatar{width:7cqw;height:7cqw;padding:1.4cqw}}

/* the frames in the case grid and their captions: Archivo labels, RNS Sanz lines; the client's colour stays inside the
   frames. Every photograph and film fills its slot: 4:3 in the columns, 16:9 across (K, 27 Sep: the grid as built) */
.frames{padding-top:0}
.frame{margin:0;min-width:0}
.seq > .frame > .case-still,.seq > .frame > .lx{aspect-ratio:4/3}
.seq > .frame:nth-child(3n) > .case-still,.seq > .frame:nth-child(3n) > .lx{aspect-ratio:16/9}
.case-still{display:block;width:100%;height:auto;object-fit:cover;background:var(--grey)}
.fcap{display:grid;grid-template-columns:minmax(120px,1fr) 5fr;gap:8px 24px;align-items:baseline;padding-top:14px;font-size:15px;color:var(--muted)}
.fcap .lab{display:block}
.frames + .credits{padding-top:0}
.case-credits{font-size:15px;color:var(--muted);max-width:70ch}
@media (max-width:767px){.fcap{grid-template-columns:1fr;gap:4px}}

/* ---------- case pages ---------- */
.case .statement{max-width:none}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:24px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 6px}
.case-line{margin-top:16px;font-size:var(--t-22);line-height:1.35;max-width:40ch}
.case-meta{margin-top:24px;font-size:15px;color:var(--muted)}
.case-hero{margin:0;overflow:hidden}
.case-hero .case-film{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#4C2248}
.case-hero .ph{will-change:transform,opacity}
.case-text{max-width:62ch;font-size:var(--t-22);line-height:1.45}
.seq{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.seq > :nth-child(3n){grid-column:1/-1}
.seq-ap > :last-child:nth-child(3n+1){grid-column:1/-1}
@media (max-width:767px){.seq{grid-template-columns:1fr}.seq > :nth-child(3n){grid-column:auto}}
.next-link{display:inline-block;font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:var(--t-72);line-height:1.04;letter-spacing:-.01em;text-decoration:none;margin-top:12px}
.next-link:hover{text-decoration:underline;text-underline-offset:.08em;text-decoration-thickness:.04em}

/* ---------- footer (K, 25 Sep): twelve columns on the page's tracks, three rows: the lockup at 40; Studio, Pages,
   Elsewhere and New business on columns 1-3, 4-6, 7-9, 10-12; the line with the studio's hour. Ink and grey, the
   mark's pair the only colour; no motion. The section above supplies the space over the rule ---------- */
.foot{padding:0 0 40px}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--grey-2);padding-top:48px}
.foot-lockup{--mark:40px;grid-column:1/4;justify-self:start;margin-bottom:48px}
.foot-col{display:grid;align-content:start;justify-items:start;font-size:15px;line-height:1.6}
.foot-col p{margin:0}
.foot-col .lab{margin-bottom:10px}
.foot-col:hover .lab{color:var(--ink)}
.foot-col a{text-decoration:none}
.foot-col a:hover{text-decoration:underline;text-decoration-color:var(--corn);text-decoration-thickness:1px;text-underline-offset:4px}
.foot-col a:focus-visible{outline:2px solid var(--corn);outline-offset:3px}
.foot-studio{grid-column:1/4}.foot-pages{grid-column:4/7}.foot-else{grid-column:7/10}.foot-new{grid-column:10/13}
.foot-mail{font-weight:500;font-size:var(--t-22);line-height:1.3;overflow-wrap:anywhere}   /* the largest thing in the footer */
a.foot-mail{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
a.foot-mail:hover{text-decoration-color:var(--corn)}
.foot-bar{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;margin-top:48px;padding-top:20px;border-top:1px solid var(--grey-2);font-size:var(--t-13);color:var(--muted)}
.foot-social{display:grid;gap:8px;font-size:15px}   /* the Contact page's social list */
.foot-social .lab{display:inline-block;min-width:6.5em}
@media (max-width:1023px){.foot-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.foot-lockup{grid-column:1/-1}.foot-studio,.foot-else{grid-column:1/4}.foot-pages,.foot-new{grid-column:4/7}.foot-studio,.foot-pages{margin-bottom:40px}}
@media (max-width:767px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:40px}.foot-lockup{--mark:32px;margin-bottom:40px}.foot-studio{grid-column:1/-1;margin-bottom:32px}.foot-pages{grid-column:1/2;margin-bottom:0}.foot-else{grid-column:2/3}.foot-new{grid-column:1/-1;margin-top:32px}.foot-bar{margin-top:40px;padding-top:16px}}

/* ---------- the Work page: the field in depth, glass frames over the pair at page scale with its drifting lights ---------- */
.page-work .fieldwrap{position:relative;height:100vh;height:100svh;overflow:clip;overflow-anchor:none;background:var(--white);touch-action:none;user-select:none;-webkit-user-select:none}
.ground{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.gpair{position:absolute;left:50%;top:50%;width:min(124vh,112vw);aspect-ratio:1;transform:translate(-46%,-52%);will-change:transform;animation:gpair 38s ease-in-out infinite alternate}
.gsq{position:absolute;overflow:hidden}
.gsq-a{left:0;top:0;width:62.5%;height:62.5%;background:var(--corn);--g2:rgba(216,69,43,.3)}
.gsq-b{left:37.5%;top:37.5%;width:62.5%;height:62.5%;background:var(--red);--g2:rgba(91,110,225,.28)}
.gsq-s{left:37.5%;top:37.5%;width:25%;height:25%;background:var(--white)}
.gsq .next{position:absolute;left:-45%;top:-45%;width:190%;height:190%;border-radius:50%;background:radial-gradient(closest-side,var(--nc,transparent) 58%,transparent 100%);opacity:0;transform:scale(.3);z-index:2;pointer-events:none;will-change:transform,opacity}
@keyframes gpair{from{transform:translate(-46%,-52%)}to{transform:translate(-54%,-48%)}}
@media (prefers-reduced-motion:reduce){.gpair{animation:none}}
.field{position:absolute;inset:0;cursor:grab;outline:none}
.field.dragging{cursor:grabbing}
.field.zooming{cursor:default}
.field:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.card3{position:absolute;left:0;top:0;width:var(--cw,420px);transform-origin:0 0;will-change:transform,opacity;text-decoration:none;color:inherit;display:block}
.glass-card{background:rgba(255,255,255,.36);-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);border:1px solid rgba(255,255,255,.85);border-radius:22px;padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),var(--halo-soft);transition:background-color .3s,border-color .3s,box-shadow .3s}
.card3:hover .glass-card,.card3:focus-visible .glass-card{background:rgba(255,255,255,.56);border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 40px 80px -34px rgba(91,110,225,.6),0 24px 60px -30px rgba(216,69,43,.35)}
.card3:focus-visible{outline:none}
.glass-card .ph{border-radius:12px}
.glass-card .tile-cap{margin-top:12px;padding:0 4px;font-size:15px}
html.js .page-work .card3{opacity:0}
html:not(.js) .page-work .fieldwrap{height:auto;overflow:visible}
html:not(.js) .ground{display:none}
html:not(.js) .field{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:calc(var(--hdr) + 32px) var(--gutter) 120px}
html:not(.js) .field .card3{position:static;width:auto!important}
html:not(.js) .filters{position:static;background:none}
.filters{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:14px var(--gutter) 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.7)}
.filters-title{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.field-empty{width:100%;font-size:15px;color:var(--muted)}
.field-hint{position:absolute;right:var(--gutter);top:calc(var(--hdr) + 12px);z-index:5;font-size:13px;color:var(--muted);pointer-events:none}
@media (max-width:767px){.filters{padding:10px var(--gutter) 12px;gap:10px}.chips{gap:6px;overflow-x:auto;flex-wrap:nowrap;max-width:100%;padding-bottom:2px}.chip{flex:none;height:32px;padding:0 12px;font-size:13px}.glass-card{padding:10px;border-radius:16px}.glass-card .tile-cap{font-size:14px}.field-hint{display:none}}

/* ---------- the previous website's pictures (tools/import_previous.py): an img carrying .ph fills like the placeholder ---------- */
img.ph{object-fit:cover;height:auto;background:var(--grey)}
.img img.ph,.reel-f img.ph,.lx img.ph{width:100%;height:100%}
.seq img.seq-pic{aspect-ratio:auto;object-fit:contain;background:none}

/* ---------- the Adventure Park case frames (assets/plan/adventure-park-grid.md; Rotten Tomatoes, read live 27 Sep) ----------
   Prefix .ap. The logotype is one set of <symbol>s a page (.ap-defs) placed by <use>; the films move it only by reveal,
   position and scale of the whole, and the colour of the ground. Every element's resting state is the finished frame,
   so reduced motion shows the poster. Loops: hero 7 s, construction 7 s, grounds 10 s, gradients 6 s, ride 10 s,
   grids 10 s, idea 7 s, wave 8 s, banners 8 s, stories 9 s, mailer 12 s. */
.ap-defs{position:absolute;width:0;height:0;overflow:hidden}
.ap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:#fff;color:#141414}
.ap > svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.seq > .frame > .ap{aspect-ratio:4/3}
.seq > .frame:nth-child(3n) > .ap{aspect-ratio:16/9}
.case-hero .ap{aspect-ratio:16/9}
/* f00 the hero: the mark rises through a mask from its own foot, holds, fades for the loop */
.ap-hero-clip{animation:ap-hero-clip 7s linear infinite}
.ap-hero-mark{animation:ap-hero-mark 7s linear infinite}
@keyframes ap-hero-clip{0%,6%{y:600px;animation-timing-function:cubic-bezier(.16,1,.3,1)}22%,100%{y:0px}}
@keyframes ap-hero-mark{0%,6%{transform:translateY(40px);opacity:1;animation-timing-function:cubic-bezier(.16,1,.3,1)}22%{transform:none;opacity:1}93%{opacity:1}100%{transform:none;opacity:0}}
/* f01 the construction: layers in order 0.5, 1.0, 1.5 s; the ADVENTURE fill wipes 2.0 to 2.7; PARK's line 2.8; its fill
   3.0 to 3.7; the squares land 3.9 to 4.3; hold; hard cuts to sky 5.0, lime 5.6, purple 6.2; the empty grid at 7.0 */
.ap-b-l{animation:ap-b-1 7s linear infinite}
.ap-b-orange{animation-name:ap-b-2}
.ap-b-lightblue{animation-name:ap-b-3}
.ap-b-dkgreen{animation-name:ap-b-4}
.ap-b-advfill,.ap-b-parkfill{animation:none}
.ap-b-wipe-advfill{animation:ap-b-wa 7s linear infinite}
.ap-b-wipe-parkfill{animation:ap-b-wp 7s linear infinite}
.ap-b-sq,.ap-b-meas{animation:ap-b-sq 7s linear infinite}
.ap-b-meas text{font-family:var(--body);font-size:13px;fill:#8A8A8A;stroke:none}
.ap-b-card{opacity:0;animation:ap-b-c1 7s linear infinite}
.ap-b-card-2{animation-name:ap-b-c2}
.ap-b-card-3{animation-name:ap-b-c3}
@keyframes ap-b-1{0%,7.14%{opacity:0}9.29%,100%{opacity:1}}
@keyframes ap-b-2{0%,14.29%{opacity:0}16.43%,100%{opacity:1}}
@keyframes ap-b-3{0%,21.43%{opacity:0}23.57%,100%{opacity:1}}
@keyframes ap-b-4{0%,40%{opacity:0}42.14%,100%{opacity:1}}
@keyframes ap-b-wa{0%,28.57%{height:0px;animation-timing-function:cubic-bezier(.65,0,.35,1)}38.57%,100%{height:182.4px}}
@keyframes ap-b-wp{0%,42.86%{height:0px;animation-timing-function:cubic-bezier(.65,0,.35,1)}52.86%,100%{height:182.4px}}
@keyframes ap-b-sq{0%,55.71%{opacity:0;transform:translateY(-12px);animation-timing-function:cubic-bezier(.16,1,.3,1)}61.43%,100%{opacity:1;transform:none}}
@keyframes ap-b-c1{0%,71.42%{opacity:0}71.43%,79.99%{opacity:1}80%,100%{opacity:0}}
@keyframes ap-b-c2{0%,79.99%{opacity:0}80%,88.56%{opacity:1}88.57%,100%{opacity:0}}
@keyframes ap-b-c3{0%,88.56%{opacity:0}88.57%,99.99%{opacity:1}100%{opacity:0}}
/* f03 the grounds: stacked sky on top; each field fades out over 0.2 s to show the next; sky dissolves back at the end */
.ap-gr{position:absolute;inset:0}
.ap-gr-0{animation:ap-gr-0 10s linear infinite}
.ap-gr-1{animation:ap-gr-1 10s linear infinite}
.ap-gr-2{animation:ap-gr-2 10s linear infinite}
.ap-gr-3{animation:ap-gr-3 10s linear infinite}
.ap-gr-4{animation:ap-gr-4 10s linear infinite}
.ap-gr-5{animation:ap-gr-5 10s linear infinite}
.ap-gr-6{animation:ap-gr-6 10s linear infinite}
@keyframes ap-gr-0{0%,12.5%{opacity:1}14.5%,98%{opacity:0}100%{opacity:1}}
@keyframes ap-gr-1{0%,25%{opacity:1}27%,100%{opacity:0}}
@keyframes ap-gr-2{0%,37.5%{opacity:1}39.5%,100%{opacity:0}}
@keyframes ap-gr-3{0%,50%{opacity:1}52%,100%{opacity:0}}
@keyframes ap-gr-4{0%,62.5%{opacity:1}64.5%,100%{opacity:0}}
@keyframes ap-gr-5{0%,75%{opacity:1}77%,100%{opacity:0}}
@keyframes ap-gr-6{0%,87.5%{opacity:1}89.5%,100%{opacity:0}}
/* f04 the seven solids */
.ap-solids{display:grid;grid-template-columns:repeat(7,1fr)}
.ap-sol{display:flex;flex-direction:column;justify-content:flex-end;gap:.2em;padding:0 .4cqw 3.4cqw 1.2cqw;color:#fff;font-family:var(--body);font-size:clamp(8px,1.55cqw,15px);line-height:1.25;min-width:0}
.ap-sol-dark{color:#141414}
.ap-sol-hex{opacity:.8}
/* f05 the two gradients fill top to bottom, their printed locations beside them */
.ap-grads{display:flex;justify-content:center;align-items:center;gap:14cqw}
.ap-gd{position:relative;width:24cqw;height:76%}
.ap-gd-fill{position:absolute;inset:0}
.ap-gd-locs{position:absolute;top:0;bottom:0;right:calc(100% + 1.6cqw);width:6cqw}
.ap-gd-loc{position:absolute;right:0;transform:translateY(-50%);font-family:var(--body);font-size:clamp(8px,1.4cqw,13px);line-height:1;color:#8A8A8A}
.ap-gd-1 .ap-gd-fill{animation:ap-gd-f1 6s linear infinite}
.ap-gd-2 .ap-gd-fill{animation:ap-gd-f2 6s linear infinite}
.ap-gd-1 .ap-gd-locs{animation:ap-gd-l1 6s linear infinite}
.ap-gd-2 .ap-gd-locs{animation:ap-gd-l2 6s linear infinite}
.ap-gd{animation:ap-gd-out 6s linear infinite}
@keyframes ap-gd-f1{0%,5%{clip-path:inset(0 0 100% 0);animation-timing-function:cubic-bezier(.65,0,.35,1)}25%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ap-gd-f2{0%,30%{clip-path:inset(0 0 100% 0);animation-timing-function:cubic-bezier(.65,0,.35,1)}50%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ap-gd-l1{0%,25%{opacity:0}30%,100%{opacity:1}}
@keyframes ap-gd-l2{0%,50%{opacity:0}55%,100%{opacity:1}}
@keyframes ap-gd-out{0%,93%{opacity:1}100%{opacity:0}}
/* f06 the ride: across and back */
.ap-ride-run{animation:ap-ride 10s linear infinite}
@keyframes ap-ride{0%,4%{transform:translateX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}50%{transform:translateX(-4800px);animation-timing-function:cubic-bezier(.65,0,.35,1)}96%,100%{transform:translateX(0)}}
/* f12 the grids: frames draw 0.3 to 1.3 s, rows 1.3, columns 1.8, the key visual fills 2.5 to 3.5, the words 3.6, hold, fade */
.ap-grids text{font-family:var(--body);font-size:14px;fill:#8A8A8A}
.ap-grids .ap-g-t{fill:#8AADE6;font-size:17px}
.ap-grids .ap-g-big{font-size:19px}
.ap-g-frame{stroke-dasharray:1;animation:ap-g-draw 10s linear infinite}
.ap-g-rows{animation:ap-g-rows 10s linear infinite}
.ap-g-cols{animation:ap-g-cols 10s linear infinite}
.ap-g-fill{transform-box:fill-box;transform-origin:50% 0;animation:ap-g-fill 10s linear infinite}
.ap-g-words{animation:ap-g-words 10s linear infinite}
.ap-g-lay{animation:ap-g-out 10s linear infinite}
@keyframes ap-g-draw{0%,3%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}13%,100%{stroke-dashoffset:0}}
@keyframes ap-g-rows{0%,13%{opacity:0}18%,100%{opacity:1}}
@keyframes ap-g-cols{0%,18%{opacity:0}23%,100%{opacity:1}}
@keyframes ap-g-fill{0%,25%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}35%,100%{transform:scaleY(1)}}
@keyframes ap-g-words{0%,36%{opacity:0}42%,100%{opacity:1}}
@keyframes ap-g-out{0%,94%{opacity:1}100%{opacity:0}}
/* f08 the idea: the line typed one glyph at a time (70 ms apart), held, cleared in the same order; 7 s */
.ap-id-g{animation:ap-id 7s linear infinite backwards;animation-delay:calc(var(--i) * 70ms)}
@keyframes ap-id{0%,4%{opacity:0}4.01%,88%{opacity:1}88.01%,100%{opacity:0}}
/* f09 the wave: the body rises 0 to 1.2 s and drops at the end; the edge travels one period (800) every 4 s; the mark in at 1.2 s */
.ap-wv-rise{animation:ap-wv-rise 8s linear infinite}
.ap-wv-run{animation:ap-wv-run 4s linear infinite}
.ap-wv-mark{animation:ap-wv-mark 8s linear infinite}
@keyframes ap-wv-rise{0%{transform:translateY(420px);animation-timing-function:cubic-bezier(.16,1,.3,1)}15%,90%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}100%{transform:translateY(420px)}}
@keyframes ap-wv-run{from{transform:translateX(0)}to{transform:translateX(-800px)}}
@keyframes ap-wv-mark{0%,15%{opacity:0}22%,90%{opacity:1}96%,100%{opacity:0}}
/* f25 the banners: each wipes in from the top, 0.4 s apart from 0.3 s; held; faded at the end; 8 s */
.ap-bn-wipe{transform-box:fill-box;transform-origin:50% 0;animation:ap-bn 8s linear infinite}
.ap-bn-2 .ap-bn-wipe{animation-name:ap-bn-2}
.ap-bn-3 .ap-bn-wipe{animation-name:ap-bn-3}
.ap-bn-4 .ap-bn-wipe{animation-name:ap-bn-4}
.ap-bn{animation:ap-bn-out 8s linear infinite}
@keyframes ap-bn{0%,4%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}13%,100%{transform:none}}
@keyframes ap-bn-2{0%,9%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}18%,100%{transform:none}}
@keyframes ap-bn-3{0%,14%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}23%,100%{transform:none}}
@keyframes ap-bn-4{0%,19%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}28%,100%{transform:none}}
@keyframes ap-bn-out{0%,94%{opacity:1}100%{opacity:0}}
/* f24 the stories: the kinetic template's rows slide in alternation, a third of a title each way; 9 s */
.ap-st-row-0{animation:ap-st-a 9s cubic-bezier(.65,0,.35,1) infinite}
.ap-st-row-1{animation:ap-st-b 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ap-st-a{0%,100%{transform:translateX(0)}50%{transform:translateX(-120px)}}
@keyframes ap-st-b{0%,100%{transform:translateX(-120px)}50%{transform:translateX(0)}}
/* f26 the mailer: held at the head, down to the footer over 4.5 s, held, back up; 12 s */
.ap-edm-run{animation:ap-edm 20s linear infinite}
@keyframes ap-edm{0%,10%{transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}50%,60%{transform:translateY(-2385px);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translateY(0)}}
/* the last frame of a case grid left alone in its group runs across at 16:9 (Adventure Park, K 27 Sep) */
.seq-ap > .frame:last-child:nth-child(3n+1) > .ap,.seq-ap > .frame:last-child:nth-child(3n+1) > .case-still,.seq-ap > .frame:last-child:nth-child(3n+1) > .ph{aspect-ratio:16/9}
@media (prefers-reduced-motion:reduce){.ap *{animation:none !important}}
/* the next-project link on a phone: a two-word name wider than the screen (Bedaya Polyclinic, after Adventure Park) wraps
   between its words, never inside one. No overflow-wrap here: site.js tidy() keeps the last two words together only
   while they fit, and it can only see that they do not when the pair overflows. The size tops out at 8.6vw so the longest
   single word on the site (ARCHITECTURE) fits a 320 px screen. */
@media (max-width:767px){.page-case .next-link{max-width:100%;font-size:min(var(--t-72),8.6vw);hyphens:manual;overflow-wrap:normal}}

/* ---------- the Bedaya Polyclinic case frames (assets/plan/portfolio-rework-plan.md, section 2; built 27 Sep) ----------
   Prefix .bd. The marks are the client's files, placed whole: the lockups inlined (their classes resolved to fills),
   the family as <img>. The films move a mark only by a mask, opacity and translate. Every element's resting state is
   the finished frame, so reduced motion shows the poster. The client's palette and type live inside the frames only.
   Loops: hero 8 s, name 8 s, lockups 9 s, family 9 s, colour 7 s, type 9 s, guidelines 90 s and imagery 40 s there and
   back. The recordings are <video class="case-still case-vid">, played by site.js while on screen. */
@font-face{font-family:'Bedaya Aktiv';src:url(work/bedaya/fonts/aktiv-thin.woff2) format('woff2');font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Bedaya Aktiv';src:url(work/bedaya/fonts/aktiv-bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Bedaya RNS';src:url(work/bedaya/fonts/rns-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
.bd{--aktiv:'Bedaya Aktiv',system-ui,sans-serif;--rns:'Bedaya RNS',system-ui,sans-serif;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:#F1F3F1;color:#232323}
.bd > svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.bd img{display:block}
.seq > .frame > .bd{aspect-ratio:4/3}
.seq > .frame:nth-child(3n) > .bd{aspect-ratio:16/9}
.case-hero .bd{aspect-ratio:16/9}
.seq-bd > :last-child:nth-child(3n+1){grid-column:1/-1}
.seq-bd > .frame:last-child:nth-child(3n+1) > .bd,.seq-bd > .frame:last-child:nth-child(3n+1) > .case-still,.seq-bd > .frame:last-child:nth-child(3n+1) > .ph{aspect-ratio:16/9}
/* H the hero: the water rises 0.4 to 2.2 s, its line travelling the whole time; the leaf drawn 2.0 to 3.4; the Arabic
   3.4 to 4.0, the Latin 3.8 to 4.4; hold; fade 7.4 to 8.0 */
.bd-h-rise{animation:bd-h-rise 8s linear infinite}
.bd-h-wave{animation:bd-h-wave 1.6s linear infinite}
.bd-h-grow{transform-box:fill-box;transform-origin:0 50%;animation:bd-h-grow 8s linear infinite}
.bd-h-ar{animation:bd-h-ar 8s linear infinite}
.bd-h-en{animation:bd-h-en 8s linear infinite}
.bd-h-mark{animation:bd-h-out 8s linear infinite}
@keyframes bd-h-rise{0%,5%{transform:translateY(104px);animation-timing-function:cubic-bezier(.45,0,.2,1)}27.5%,100%{transform:none}}
@keyframes bd-h-wave{from{transform:none}to{transform:translateX(-16px)}}
@keyframes bd-h-grow{0%,25%{transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}42.5%,100%{transform:none}}
@keyframes bd-h-ar{0%,42.5%{opacity:0;transform:translateY(5px);animation-timing-function:cubic-bezier(.16,1,.3,1)}50%,100%{opacity:1;transform:none}}
@keyframes bd-h-en{0%,47.5%{opacity:0;transform:translateY(5px);animation-timing-function:cubic-bezier(.16,1,.3,1)}55%,100%{opacity:1;transform:none}}
@keyframes bd-h-out{0%,92.5%{opacity:1}100%{opacity:0}}
/* G1 L the name: drawn right to left 0.4 to 2.2 s; a beginning typed from 2.6 s, 90 ms a letter; cleared at the end */
.bd-n-draw{transform-box:fill-box;transform-origin:100% 50%;animation:bd-n-draw 8s linear infinite}
.bd-name > svg{animation:bd-n-out 8s linear infinite}
.bd-n-line{position:absolute;left:0;right:0;top:61%;margin:0;text-align:center;font-family:var(--aktiv);font-weight:200;font-size:7.4cqw;line-height:1;letter-spacing:-.01em}
.bd-n-g{animation:bd-n-g 8s linear infinite backwards;animation-delay:calc(var(--i) * 90ms)}
@keyframes bd-n-draw{0%,5%{transform:scaleX(0);animation-timing-function:cubic-bezier(.45,0,.3,1)}27.5%,100%{transform:none}}
@keyframes bd-n-out{0%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes bd-n-g{0%,32%{opacity:0}32.01%,86%{opacity:1}86.01%,100%{opacity:0}}
/* G1 R the lockups: the stacked lockup 0 to 3.6 s; the horizontal one, the mark first, then the two scripts sliding in
   from either side 4.1 to 5.2; hold; fade */
.bd-lk-stack{opacity:0;animation:bd-lk-stack 9s linear infinite}
.bd-lk-icon{animation:bd-lk-icon 9s linear infinite}
.bd-lk-ar{animation:bd-lk-ar 9s linear infinite}
.bd-lk-en{animation:bd-lk-en 9s linear infinite}
.bd-lk-full{animation:bd-lk-out 9s linear infinite}
@keyframes bd-lk-stack{0%{opacity:0}6%,34%{opacity:1}40%,100%{opacity:0}}
@keyframes bd-lk-icon{0%,40%{opacity:0}46%,100%{opacity:1}}
@keyframes bd-lk-ar{0%,45%{opacity:0;transform:translateX(-24px);animation-timing-function:cubic-bezier(.16,1,.3,1)}58%,100%{opacity:1;transform:none}}
@keyframes bd-lk-en{0%,45%{opacity:0;transform:translateX(24px);animation-timing-function:cubic-bezier(.16,1,.3,1)}58%,100%{opacity:1;transform:none}}
@keyframes bd-lk-out{0%,93%{opacity:1}100%{opacity:0}}
/* G1 W the family: four tinted fields rise 0.3 s apart, each mark and its name after its field; hold; fade */
.bd-family{display:grid;grid-template-columns:repeat(4,1fr);animation:bd-fm-out 9s linear infinite}
.bd-fm-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.6cqw;min-width:0}
.bd-fm-field{position:absolute;inset:0;background:var(--c);opacity:.2;transform-origin:50% 100%}
.bd-fm-mark{position:relative;height:var(--h,40%);width:auto;max-width:78%}
.bd-fm-0{--h:40%}.bd-fm-1{--h:40%}.bd-fm-2{--h:44%}.bd-fm-3{--h:31%}
.bd-fm-name{position:relative;font-family:var(--aktiv);font-weight:200;font-size:2.2cqw;line-height:1}
@keyframes bd-fm-out{0%,93%{opacity:1}100%{opacity:0}}
@keyframes bd-fm-f0{0%,4%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}16%,100%{transform:none}}
@keyframes bd-fm-m0{0%,16%{opacity:0;transform:translateY(2cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}24%,100%{opacity:1;transform:none}}
@keyframes bd-fm-n0{0%,21%{opacity:0}27%,100%{opacity:1}}
.bd-fm-0 .bd-fm-field{animation:bd-fm-f0 9s linear infinite}.bd-fm-0 .bd-fm-mark{animation:bd-fm-m0 9s linear infinite}.bd-fm-0 .bd-fm-name{animation:bd-fm-n0 9s linear infinite}
@keyframes bd-fm-f1{0%,7%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}19%,100%{transform:none}}
@keyframes bd-fm-m1{0%,19%{opacity:0;transform:translateY(2cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}27%,100%{opacity:1;transform:none}}
@keyframes bd-fm-n1{0%,24%{opacity:0}30%,100%{opacity:1}}
.bd-fm-1 .bd-fm-field{animation:bd-fm-f1 9s linear infinite}.bd-fm-1 .bd-fm-mark{animation:bd-fm-m1 9s linear infinite}.bd-fm-1 .bd-fm-name{animation:bd-fm-n1 9s linear infinite}
@keyframes bd-fm-f2{0%,10%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}22%,100%{transform:none}}
@keyframes bd-fm-m2{0%,22%{opacity:0;transform:translateY(2cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}30%,100%{opacity:1;transform:none}}
@keyframes bd-fm-n2{0%,27%{opacity:0}33%,100%{opacity:1}}
.bd-fm-2 .bd-fm-field{animation:bd-fm-f2 9s linear infinite}.bd-fm-2 .bd-fm-mark{animation:bd-fm-m2 9s linear infinite}.bd-fm-2 .bd-fm-name{animation:bd-fm-n2 9s linear infinite}
@keyframes bd-fm-f3{0%,13%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}25%,100%{transform:none}}
@keyframes bd-fm-m3{0%,25%{opacity:0;transform:translateY(2cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}33%,100%{opacity:1;transform:none}}
@keyframes bd-fm-n3{0%,30%{opacity:0}36%,100%{opacity:1}}
.bd-fm-3 .bd-fm-field{animation:bd-fm-f3 9s linear infinite}.bd-fm-3 .bd-fm-mark{animation:bd-fm-m3 9s linear infinite}.bd-fm-3 .bd-fm-name{animation:bd-fm-n3 9s linear infinite}
/* G2 L the colour: the four fields rise from the foot 0.3 s apart, their hex after; the ground beneath; hold; fade */
.bd-palette{animation:bd-pl-out 7s linear infinite}
.bd-pl-row{position:absolute;left:0;right:0;top:0;height:76%;display:grid;grid-template-columns:repeat(4,1fr)}
.bd-pl-f{display:flex;align-items:flex-end;padding:0 0 2.6cqw 2.2cqw;transform-origin:50% 100%;min-width:0}
.bd-pl-f span,.bd-pl-ground span{font-family:var(--aktiv);font-weight:700;font-size:2cqw;letter-spacing:.06em;color:#232323}
.bd-pl-0 span,.bd-pl-3 span{color:#fff}
.bd-pl-ground{position:absolute;left:0;right:0;bottom:0;height:24%;display:flex;align-items:center;padding-left:2.2cqw}
@keyframes bd-pl-out{0%,93%{opacity:1}100%{opacity:0}}
.bd-pl-0{animation:bd-pl-f0 7s linear infinite}.bd-pl-0 span{animation:bd-pl-l0 7s linear infinite}
@keyframes bd-pl-f0{0%,5%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}17%,100%{transform:none}}
@keyframes bd-pl-l0{0%,19%{opacity:0}25%,100%{opacity:1}}
.bd-pl-1{animation:bd-pl-f1 7s linear infinite}.bd-pl-1 span{animation:bd-pl-l1 7s linear infinite}
@keyframes bd-pl-f1{0%,9%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}21%,100%{transform:none}}
@keyframes bd-pl-l1{0%,23%{opacity:0}29%,100%{opacity:1}}
.bd-pl-2{animation:bd-pl-f2 7s linear infinite}.bd-pl-2 span{animation:bd-pl-l2 7s linear infinite}
@keyframes bd-pl-f2{0%,13%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}25%,100%{transform:none}}
@keyframes bd-pl-l2{0%,27%{opacity:0}33%,100%{opacity:1}}
.bd-pl-3{animation:bd-pl-f3 7s linear infinite}.bd-pl-3 span{animation:bd-pl-l3 7s linear infinite}
@keyframes bd-pl-f3{0%,17%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}29%,100%{transform:none}}
@keyframes bd-pl-l3{0%,31%{opacity:0}37%,100%{opacity:1}}
/* G2 R the type: the eyebrow, the headline, the line and the three names come up 0.8 s apart; hold; fade */
.bd-type{display:flex;flex-direction:column;justify-content:center;padding:0 8cqw;animation:bd-ty-out 9s linear infinite}
.bd-type p{margin:0}
.bd-ty-eye{font-family:var(--aktiv);font-weight:700;font-size:1.9cqw;letter-spacing:.16em;text-transform:uppercase;color:#6E4F86;margin-bottom:2.6cqw !important}
.bd-ty-head{font-family:var(--aktiv);font-weight:200;font-size:10cqw;line-height:1.02;letter-spacing:-.02em;margin-bottom:3.2cqw !important}
.bd-ty-head em{font-style:normal;color:#926BAC}
.bd-ty-body{font-family:var(--rns);font-size:3cqw;line-height:1.5;max-width:36ch;color:#3A3A3A;margin-bottom:6cqw !important}
.bd-ty-names{display:flex;flex-wrap:wrap;gap:1cqw 3.4cqw;font-size:2.2cqw;color:#6A6A6A}
.bd-ty-names span:nth-child(1){font-family:var(--aktiv);font-weight:700}
.bd-ty-names span:nth-child(2){font-family:var(--aktiv);font-weight:200}
.bd-ty-names span:nth-child(3){font-family:var(--rns)}
@keyframes bd-ty-out{0%,93%{opacity:1}100%{opacity:0}}
.bd-ty-1{animation:bd-ty-1 9s linear infinite}
@keyframes bd-ty-1{0%,4%{opacity:0;transform:translateY(1.2cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}13%,100%{opacity:1;transform:none}}
.bd-ty-2{animation:bd-ty-2 9s linear infinite}
@keyframes bd-ty-2{0%,13%{opacity:0;transform:translateY(1.2cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}22%,100%{opacity:1;transform:none}}
.bd-ty-3{animation:bd-ty-3 9s linear infinite}
@keyframes bd-ty-3{0%,22%{opacity:0;transform:translateY(1.2cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}31%,100%{opacity:1;transform:none}}
.bd-ty-4{animation:bd-ty-4 9s linear infinite}
@keyframes bd-ty-4{0%,31%{opacity:0;transform:translateY(1.2cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}40%,100%{opacity:1;transform:none}}
/* G2 W the guidelines: the eighteen pages in one row, across and back */
.bd-guide{background:#E6E9E6}
.bd-gd-row{position:absolute;top:50%;left:0;display:flex;gap:2cqw;padding:0 5cqw;width:max-content;transform:translateY(-50%);animation:bd-gd 90s linear infinite alternate}
.bd-gd-row img{width:48cqw;height:auto;aspect-ratio:16/9;flex:none;box-shadow:0 .3cqw 1.4cqw rgba(20,20,20,.08)}
@keyframes bd-gd{from{transform:translateY(-50%)}to{transform:translate(calc(100cqw - 18 * 48cqw - 17 * 2cqw - 10cqw),-50%)}}
/* G5 W the imagery: six columns of the masters, cropped 4:5 as the site crops them, drifting in alternation */
.bd-im-grid{position:absolute;left:0;right:0;top:-4cqw;display:grid;grid-template-columns:repeat(6,1fr);gap:1.2cqw;padding:0 1.2cqw}
.bd-im-col{display:flex;flex-direction:column;gap:1.2cqw;min-width:0}
.bd-im-col img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:1.4cqw}
.bd-im-0{animation:bd-im-0 40s ease-in-out infinite alternate}
.bd-im-1{transform:translateY(-50cqw);animation:bd-im-1 40s ease-in-out infinite alternate}
@keyframes bd-im-0{from{transform:none}to{transform:translateY(-50cqw)}}
@keyframes bd-im-1{from{transform:translateY(-50cqw)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.bd,.bd *{animation:none !important}}

/* ================= The Meal Plant (.tmp) and Mustaqbal Fund (.mf) case frames, 28 Sep 2026 (web agent) =================
   Plans: assets/plan/the-meal-plant-grid.md and mustaqbal-fund-grid.md; build.py's tmp_ and mf_ blocks. The traced marks
   are defined once a page (.tmp-defs, .mf-defs) and shown by <use>; the films move a part only by a mask, opacity, and
   translate, rotate or scale of the whole (the star's rings may scale: they are the star scaled). Every element's
   resting state is the finished frame, so reduced motion shows the poster. The clients' colours live inside the frames. */
.tmp-defs,.mf-defs{position:absolute;width:0;height:0;overflow:hidden}
.tmp,.mf{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:#fff}
.tmp svg,.mf svg{display:block;height:auto}
.tmp .tmp-full,.mf .mf-full{position:absolute;inset:0;width:100%;height:100%}
.tmp-onwhite,.mf-onwhite{box-shadow:inset 0 0 0 1px rgba(40,40,40,.12)}
.case-hero .tmp,.case-hero .mf{aspect-ratio:16/9}
.seq.seq-tmp > .frame.frame:nth-child(n),.seq.seq-mf > .frame.frame:nth-child(n){grid-column:auto}
.seq.seq-tmp > .frame.slot-wide:nth-child(n),.seq.seq-mf > .frame.slot-wide:nth-child(n){grid-column:1/-1}
.seq.seq-tmp > .frame > .tmp,.seq.seq-tmp > .frame > .case-still,.seq.seq-mf > .frame > .mf,.seq.seq-mf > .frame > .case-still{aspect-ratio:4/3}
.seq.seq-tmp > .frame.slot-wide > .tmp,.seq.seq-tmp > .frame.slot-wide > .case-still,.seq.seq-mf > .frame.slot-wide > .mf,.seq.seq-mf > .frame.slot-wide > .case-still{aspect-ratio:16/9}

/* tmp f00 the star: rings close in from 4x, outermost first, 0.4 s apart from 0.4 s, 1.6 s each; the leaves settle three at a
   time clockwise from twelve, 3.2 to 4.9 s; the lockup 4.4 to 5.0; hold; fade 8.2 to 9.0 */
.tmp-h-r{transform-origin:0 0}
.tmp-h-r0{animation:tmp-h-r0 9s linear infinite}@keyframes tmp-h-r0{0%,4.444%{transform:scale(4);opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}6.111%{opacity:1}22.222%,100%{transform:none;opacity:1}}
.tmp-h-r1{animation:tmp-h-r1 9s linear infinite}@keyframes tmp-h-r1{0%,8.889%{transform:scale(4);opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}10.556%{opacity:1}26.667%,100%{transform:none;opacity:1}}
.tmp-h-r2{animation:tmp-h-r2 9s linear infinite}@keyframes tmp-h-r2{0%,13.333%{transform:scale(4);opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}15%{opacity:1}31.111%,100%{transform:none;opacity:1}}
.tmp-h-r3{animation:tmp-h-r3 9s linear infinite}@keyframes tmp-h-r3{0%,17.778%{transform:scale(4);opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}19.444%{opacity:1}35.556%,100%{transform:none;opacity:1}}
.tmp-h-l{transform-box:fill-box;transform-origin:50% 50%}
.tmp-h-b0{animation:tmp-h-b0 9s linear infinite}@keyframes tmp-h-b0{0%,35.556%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}40.556%,100%{opacity:1;transform:none}}
.tmp-h-b1{animation:tmp-h-b1 9s linear infinite}@keyframes tmp-h-b1{0%,36.889%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}41.889%,100%{opacity:1;transform:none}}
.tmp-h-b2{animation:tmp-h-b2 9s linear infinite}@keyframes tmp-h-b2{0%,38.222%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}43.222%,100%{opacity:1;transform:none}}
.tmp-h-b3{animation:tmp-h-b3 9s linear infinite}@keyframes tmp-h-b3{0%,39.556%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}44.556%,100%{opacity:1;transform:none}}
.tmp-h-b4{animation:tmp-h-b4 9s linear infinite}@keyframes tmp-h-b4{0%,40.889%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}45.889%,100%{opacity:1;transform:none}}
.tmp-h-b5{animation:tmp-h-b5 9s linear infinite}@keyframes tmp-h-b5{0%,42.222%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}47.222%,100%{opacity:1;transform:none}}
.tmp-h-b6{animation:tmp-h-b6 9s linear infinite}@keyframes tmp-h-b6{0%,43.556%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}48.556%,100%{opacity:1;transform:none}}
.tmp-h-b7{animation:tmp-h-b7 9s linear infinite}@keyframes tmp-h-b7{0%,44.889%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}49.889%,100%{opacity:1;transform:none}}
.tmp-h-b8{animation:tmp-h-b8 9s linear infinite}@keyframes tmp-h-b8{0%,46.222%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}51.222%,100%{opacity:1;transform:none}}
.tmp-h-b9{animation:tmp-h-b9 9s linear infinite}@keyframes tmp-h-b9{0%,47.556%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}52.556%,100%{opacity:1;transform:none}}
.tmp-h-b10{animation:tmp-h-b10 9s linear infinite}@keyframes tmp-h-b10{0%,48.889%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-20deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}53.889%,100%{opacity:1;transform:none}}
.tmp-h-lk{animation:tmp-h-lk 9s linear infinite}@keyframes tmp-h-lk{0%,48.889%{opacity:0}55.556%,100%{opacity:1}}
.tmp-h-all{animation:tmp-h-all 9s linear infinite}@keyframes tmp-h-all{0%,91.111%{opacity:1}100%{opacity:0}}
/* tmp f01 the planter: the block's mask rises 0.3 to 2.3 s; the 16 leaves rise 60 px, lowest first, 0.12 s apart from 2.3 s; hold; fade 7.2 to 8.0 */
.tmp-pl-rise{transform-box:fill-box;transform-origin:50% 100%;animation:tmp-pl-rise 8s infinite}@keyframes tmp-pl-rise{0%,3.75%{transform:scaleY(0);animation-timing-function:cubic-bezier(.45,0,.25,1)}28.75%,100%{transform:none}}
.tmp-pl-l0{animation:tmp-pl-l0 8s linear infinite}@keyframes tmp-pl-l0{0%,28.75%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}35.625%,100%{opacity:1;transform:none}}
.tmp-pl-l1{animation:tmp-pl-l1 8s linear infinite}@keyframes tmp-pl-l1{0%,30.25%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}37.125%,100%{opacity:1;transform:none}}
.tmp-pl-l2{animation:tmp-pl-l2 8s linear infinite}@keyframes tmp-pl-l2{0%,31.75%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}38.625%,100%{opacity:1;transform:none}}
.tmp-pl-l3{animation:tmp-pl-l3 8s linear infinite}@keyframes tmp-pl-l3{0%,33.25%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}40.125%,100%{opacity:1;transform:none}}
.tmp-pl-l4{animation:tmp-pl-l4 8s linear infinite}@keyframes tmp-pl-l4{0%,34.75%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}41.625%,100%{opacity:1;transform:none}}
.tmp-pl-l5{animation:tmp-pl-l5 8s linear infinite}@keyframes tmp-pl-l5{0%,36.25%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}43.125%,100%{opacity:1;transform:none}}
.tmp-pl-l6{animation:tmp-pl-l6 8s linear infinite}@keyframes tmp-pl-l6{0%,37.75%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}44.625%,100%{opacity:1;transform:none}}
.tmp-pl-l7{animation:tmp-pl-l7 8s linear infinite}@keyframes tmp-pl-l7{0%,39.25%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}46.125%,100%{opacity:1;transform:none}}
.tmp-pl-l8{animation:tmp-pl-l8 8s linear infinite}@keyframes tmp-pl-l8{0%,40.75%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}47.625%,100%{opacity:1;transform:none}}
.tmp-pl-l9{animation:tmp-pl-l9 8s linear infinite}@keyframes tmp-pl-l9{0%,42.25%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}49.125%,100%{opacity:1;transform:none}}
.tmp-pl-l10{animation:tmp-pl-l10 8s linear infinite}@keyframes tmp-pl-l10{0%,43.75%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}50.625%,100%{opacity:1;transform:none}}
.tmp-pl-l11{animation:tmp-pl-l11 8s linear infinite}@keyframes tmp-pl-l11{0%,45.25%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}52.125%,100%{opacity:1;transform:none}}
.tmp-pl-l12{animation:tmp-pl-l12 8s linear infinite}@keyframes tmp-pl-l12{0%,46.75%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}53.625%,100%{opacity:1;transform:none}}
.tmp-pl-l13{animation:tmp-pl-l13 8s linear infinite}@keyframes tmp-pl-l13{0%,48.25%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}55.125%,100%{opacity:1;transform:none}}
.tmp-pl-l14{animation:tmp-pl-l14 8s linear infinite}@keyframes tmp-pl-l14{0%,49.75%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}56.625%,100%{opacity:1;transform:none}}
.tmp-pl-l15{animation:tmp-pl-l15 8s linear infinite}@keyframes tmp-pl-l15{0%,51.25%{opacity:0;transform:translateY(68px);animation-timing-function:cubic-bezier(.16,1,.3,1)}58.125%,100%{opacity:1;transform:none}}
.tmp-pl-all{animation:tmp-pl-all 8s linear infinite}@keyframes tmp-pl-all{0%,90%{opacity:1}100%{opacity:0}}
/* tmp f02 one star, four sizes: the outlines draw at 0.5, 1.9, 2.5 and 3.1 s, each figure after its line; the shapes fill outside
   in, 4.0 to 5.6; the drawing fades 5.6 to 6.1; the fill holds; fades 8.2 to 9.0. The poster is the drawing */
.tmp-sz-o{stroke-dasharray:1 1;stroke-dashoffset:0}
.tmp-sz-t{font-family:var(--display);font-weight:500;letter-spacing:.04em;fill:#282828}
.tmp-sz-f{opacity:0}
.tmp-sz-o0{animation:tmp-sz-o0 9s linear infinite}@keyframes tmp-sz-o0{0%,5.556%{stroke-dashoffset:1;opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}18.889%,62.222%{stroke-dashoffset:0;opacity:1}67.778%,100%{stroke-dashoffset:0;opacity:0}}
.tmp-sz-t0{animation:tmp-sz-t0 9s linear infinite}@keyframes tmp-sz-t0{0%,16.667%{opacity:0}21.111%,62.222%{opacity:1}67.778%,100%{opacity:0}}
.tmp-sz-o1{animation:tmp-sz-o1 9s linear infinite}@keyframes tmp-sz-o1{0%,21.111%{stroke-dashoffset:1;opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}32.222%,62.222%{stroke-dashoffset:0;opacity:1}67.778%,100%{stroke-dashoffset:0;opacity:0}}
.tmp-sz-t1{animation:tmp-sz-t1 9s linear infinite}@keyframes tmp-sz-t1{0%,30%{opacity:0}34.444%,62.222%{opacity:1}67.778%,100%{opacity:0}}
.tmp-sz-o2{animation:tmp-sz-o2 9s linear infinite}@keyframes tmp-sz-o2{0%,27.778%{stroke-dashoffset:1;opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}38.889%,62.222%{stroke-dashoffset:0;opacity:1}67.778%,100%{stroke-dashoffset:0;opacity:0}}
.tmp-sz-t2{animation:tmp-sz-t2 9s linear infinite}@keyframes tmp-sz-t2{0%,36.667%{opacity:0}41.111%,62.222%{opacity:1}67.778%,100%{opacity:0}}
.tmp-sz-o3{animation:tmp-sz-o3 9s linear infinite}@keyframes tmp-sz-o3{0%,34.444%{stroke-dashoffset:1;opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}45.556%,62.222%{stroke-dashoffset:0;opacity:1}67.778%,100%{stroke-dashoffset:0;opacity:0}}
.tmp-sz-t3{animation:tmp-sz-t3 9s linear infinite}@keyframes tmp-sz-t3{0%,43.333%{opacity:0}47.778%,62.222%{opacity:1}67.778%,100%{opacity:0}}
.tmp-sz-f0{animation:tmp-sz-f0 9s linear infinite}@keyframes tmp-sz-f0{0%,44.444%{opacity:0}47.222%,91.111%{opacity:1}100%{opacity:0}}
.tmp-sz-f1{animation:tmp-sz-f1 9s linear infinite}@keyframes tmp-sz-f1{0%,48.889%{opacity:0}51.667%,91.111%{opacity:1}100%{opacity:0}}
.tmp-sz-f2{animation:tmp-sz-f2 9s linear infinite}@keyframes tmp-sz-f2{0%,53.333%{opacity:0}56.111%,91.111%{opacity:1}100%{opacity:0}}
.tmp-sz-f3{animation:tmp-sz-f3 9s linear infinite}@keyframes tmp-sz-f3{0%,57.778%{opacity:0}60.556%,91.111%{opacity:1}100%{opacity:0}}
/* tmp f03 growth rings: six shapes, each born at the centre and stepping out a size every 1.5 s (1.1 s moving, 0.4 s held), the
   last step to 2.35 fading into the ground; each sinks a layer a step, so the newest is always on top. Each runs 9 s, the
   six 1.5 s apart; the base transforms are the poster */
.tmp-gr-e{position:absolute;inset:0;transform-origin:50% 50%;animation:tmp-gr-s 9s infinite,tmp-gr-z 9s step-end infinite}
.tmp-gr-e > svg{position:absolute;inset:0;width:100%;height:100%}
@keyframes tmp-gr-s{0%{transform:scale(0);opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}12.222%,16.667%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}28.889%,33.333%{transform:scale(1.4);opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}45.556%,50%{transform:scale(1.74);opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}62.222%,66.667%{transform:scale(2.02);opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}78.889%,100%{transform:scale(2.35);opacity:0}}
@keyframes tmp-gr-z{0%{z-index:6}15.667%{z-index:5}32.333%{z-index:4}49%{z-index:3}65.667%{z-index:2}82.333%{z-index:1}99%,100%{z-index:6}}
.tmp-gr-e0{transform:scale(0);z-index:6;animation-delay:-0.0s,-0.0s}
.tmp-gr-e1{transform:scale(1);z-index:5;animation-delay:-1.5s,-1.5s}
.tmp-gr-e2{transform:scale(1.4);z-index:4;animation-delay:-3.0s,-3.0s}
.tmp-gr-e3{transform:scale(1.74);z-index:3;animation-delay:-4.5s,-4.5s}
.tmp-gr-e4{transform:scale(2.02);z-index:2;animation-delay:-6.0s,-6.0s}
.tmp-gr-e5{transform:scale(2.35);z-index:1;opacity:0;animation-delay:-7.5s,-7.5s}
/* tmp f04 the palette: four fields rise 0.3 s apart from 0.35 s, each label after its field; hold; fade 6.5 to 7.0 */
.tmp-pa-row{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);animation:tmp-pa-out 7s linear infinite}
.tmp-pa-f{display:flex;align-items:flex-end;padding:0 0 3cqw 2.4cqw;transform-origin:50% 100%;min-width:0}
.tmp-pa-f span{font-family:var(--display);font-weight:500;font-size:1.7cqw;line-height:1.45;letter-spacing:.06em;text-transform:uppercase;color:#282828}
.tmp-pa-dark span{color:#fff}
.tmp-pa-3{box-shadow:inset 0 0 0 1px #282828}
@keyframes tmp-pa-out{0%,92.857%{opacity:1}100%{opacity:0}}
.tmp-pa-0{animation:tmp-pa-f0 7s linear infinite}.tmp-pa-0 span{animation:tmp-pa-l0 7s linear infinite}
@keyframes tmp-pa-f0{0%,5%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}17.143%,100%{transform:none}}@keyframes tmp-pa-l0{0%,18.571%{opacity:0}24.286%,100%{opacity:1}}
.tmp-pa-1{animation:tmp-pa-f1 7s linear infinite}.tmp-pa-1 span{animation:tmp-pa-l1 7s linear infinite}
@keyframes tmp-pa-f1{0%,9.286%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}21.429%,100%{transform:none}}@keyframes tmp-pa-l1{0%,22.857%{opacity:0}28.571%,100%{opacity:1}}
.tmp-pa-2{animation:tmp-pa-f2 7s linear infinite}.tmp-pa-2 span{animation:tmp-pa-l2 7s linear infinite}
@keyframes tmp-pa-f2{0%,13.571%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}25.714%,100%{transform:none}}@keyframes tmp-pa-l2{0%,27.143%{opacity:0}32.857%,100%{opacity:1}}
.tmp-pa-3{animation:tmp-pa-f3 7s linear infinite}.tmp-pa-3 span{animation:tmp-pa-l3 7s linear infinite}
@keyframes tmp-pa-f3{0%,17.857%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}30%,100%{transform:none}}@keyframes tmp-pa-l3{0%,31.429%{opacity:0}37.143%,100%{opacity:1}}
/* tmp f05 paper cut: each layer lifts up and left 6 px a depth while its shadow opens, 0.5 to 2.0 s; hold; settles 4.0 to 5.5. The
   printed shadow (1 to 3 px) is the rest */
.tmp-pc-d1{filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28));animation:tmp-pc-d1 7s infinite}@keyframes tmp-pc-d1{0%,7.143%{transform:none;filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28));animation-timing-function:cubic-bezier(.65,0,.35,1)}28.571%,57.143%{transform:translate(-6px,-6px);filter:drop-shadow(8px 8px 14px rgba(40,40,40,.3));animation-timing-function:cubic-bezier(.65,0,.35,1)}78.571%,100%{transform:none;filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28))}}
.tmp-pc-d2{filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28));animation:tmp-pc-d2 7s infinite}@keyframes tmp-pc-d2{0%,7.143%{transform:none;filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28));animation-timing-function:cubic-bezier(.65,0,.35,1)}28.571%,57.143%{transform:translate(-12px,-12px);filter:drop-shadow(8px 8px 14px rgba(40,40,40,.3));animation-timing-function:cubic-bezier(.65,0,.35,1)}78.571%,100%{transform:none;filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28))}}
.tmp-pc-d3{filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28));animation:tmp-pc-d3 7s infinite}@keyframes tmp-pc-d3{0%,7.143%{transform:none;filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28));animation-timing-function:cubic-bezier(.65,0,.35,1)}28.571%,57.143%{transform:translate(-18px,-18px);filter:drop-shadow(8px 8px 14px rgba(40,40,40,.3));animation-timing-function:cubic-bezier(.65,0,.35,1)}78.571%,100%{transform:none;filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28))}}
.tmp-pc-d4{filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28));animation:tmp-pc-d4 7s infinite}@keyframes tmp-pc-d4{0%,7.143%{transform:none;filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28));animation-timing-function:cubic-bezier(.65,0,.35,1)}28.571%,57.143%{transform:translate(-24px,-24px);filter:drop-shadow(8px 8px 14px rgba(40,40,40,.3));animation-timing-function:cubic-bezier(.65,0,.35,1)}78.571%,100%{transform:none;filter:drop-shadow(1.5px 2px 1.5px rgba(40,40,40,.28))}}
/* tmp f08 the lid: the motif turns one full turn in 40 s under the still lockup */
.tmp-ld-turn{animation:tmp-ld 40s linear infinite}@keyframes tmp-ld{to{transform:rotate(360deg)}}
/* tmp f11 two ways: colour on white holds to 2.5 s; lilac and the white copy cross in 0.6 s; hold; back 5.6 to 6.2 */
.tmp-tw-g{position:absolute;inset:0;background:#9F78AC;opacity:0;animation:tmp-tw-in 7s linear infinite}
.tmp-tw-lk{position:absolute;left:20%;width:60%;top:50%;transform:translateY(-50%)}
.tmp-tw-w{opacity:0;animation:tmp-tw-in 7s linear infinite}.tmp-tw-c{animation:tmp-tw-out 7s linear infinite}
@keyframes tmp-tw-in{0%,35.714%{opacity:0}44.286%,80%{opacity:1}88.571%,100%{opacity:0}}
@keyframes tmp-tw-out{0%,35.714%{opacity:1}44.286%,80%{opacity:0}88.571%,100%{opacity:1}}
/* tmp f13 the outline: five lines draw outwards 0.25 s apart from 0.4 s, 1.2 s each; the lockup 2.4 to 3.0; hold; the lines
   erase inwards from 6.2 s and the lockup goes; empty by 8.6 */
.tmp-ol-o{stroke-dasharray:1 1;stroke-dashoffset:0}
.tmp-ol-o0{animation:tmp-ol-o0 9s linear infinite}@keyframes tmp-ol-o0{0%,4.444%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}17.778%,80%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.45,0,.25,1)}91.111%,100%{stroke-dashoffset:-1}}
.tmp-ol-o1{animation:tmp-ol-o1 9s linear infinite}@keyframes tmp-ol-o1{0%,7.222%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}20.556%,77.222%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.45,0,.25,1)}88.333%,100%{stroke-dashoffset:-1}}
.tmp-ol-o2{animation:tmp-ol-o2 9s linear infinite}@keyframes tmp-ol-o2{0%,10%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}23.333%,74.444%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.45,0,.25,1)}85.556%,100%{stroke-dashoffset:-1}}
.tmp-ol-o3{animation:tmp-ol-o3 9s linear infinite}@keyframes tmp-ol-o3{0%,12.778%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}26.111%,71.667%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.45,0,.25,1)}82.778%,100%{stroke-dashoffset:-1}}
.tmp-ol-o4{animation:tmp-ol-o4 9s linear infinite}@keyframes tmp-ol-o4{0%,15.556%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}28.889%,68.889%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.45,0,.25,1)}80%,100%{stroke-dashoffset:-1}}
.tmp-ol-lk{animation:tmp-ol-lk 9s linear infinite}@keyframes tmp-ol-lk{0%,26.667%{opacity:0}33.333%,68.889%{opacity:1}75.556%,100%{opacity:0}}
/* tmp f15 the tape, running: the strip 30 % of the height, tiles 1.62 strip-widths long; two tiles right to left in 6 s */
.tmp-tp-strip{position:absolute;left:0;top:35%;height:30%;display:flex;width:max-content;animation:tmp-tp 6s linear infinite}
.tmp-tp-t{position:relative;flex:none;width:27.34cqw;height:100%}
.tmp-tp-lk{position:absolute;left:19%;width:62%;top:50%;transform:translateY(-50%)}
@keyframes tmp-tp{to{transform:translateX(-54.68cqw)}}
/* tmp f17 Meal, large: drifts 5 % left and back, 10 s */
.tmp-ml-drift{animation:tmp-ml 10s ease-in-out infinite}@keyframes tmp-ml{50%{transform:translateX(-72px)}}
/* tmp f20 the tree: the leaves drift up 4 % of the height and back, 8 s */
.tmp-tr-lv{animation:tmp-tr 8s ease-in-out infinite}@keyframes tmp-tr{50%{transform:translateY(-22px)}}
/* tmp f21 the set: the faces at one scale (.1364cqw a millimetre, the letterhead 72 % of the height); the artwork lands 0.7 s
   apart from 0.6 s, each over 0.5 s; hold; clear 8.8 to 9.3 */
.tmp-se-row{position:absolute;left:0;right:0;bottom:5cqw;display:flex;align-items:flex-end;justify-content:center;gap:2.6cqw}
.tmp-se-face{position:relative;flex:none;width:calc(var(--w) * .1364cqw);height:calc(var(--h) * .1364cqw);overflow:hidden;background:#fff;box-shadow:0 .3cqw 1.4cqw rgba(60,45,20,.16),0 0 0 1px rgba(60,45,20,.06)}
.tmp-se-bcard{border-radius:.3cqw}
.tmp-se-m{position:absolute;inset:0}
.tmp-se-art{position:absolute;inset:0;width:100%;height:100%}
.tmp-se-letter .tmp-se-lk{position:absolute;left:11%;top:6%;width:22%}
.tmp-se-band{position:absolute;left:0;right:0;bottom:0;height:6.4%}
.tmp-se-half{position:absolute;left:0;right:0;top:0;height:50%}
.tmp-se-m0{animation:tmp-se-m0 10s linear infinite}@keyframes tmp-se-m0{0%,6%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}11%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.tmp-se-m1{animation:tmp-se-m1 10s linear infinite}@keyframes tmp-se-m1{0%,13%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}18%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.tmp-se-m2{animation:tmp-se-m2 10s linear infinite}@keyframes tmp-se-m2{0%,20%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}25%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.tmp-se-m3{animation:tmp-se-m3 10s linear infinite}@keyframes tmp-se-m3{0%,27%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}32%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
/* tmp f22 leaf fall: each leaf falls the frame's height and more in 10 s (it leaves below and re-enters above), swaying and
   turning on its own 10 s curve; the delays put each at its resting place at 0 */
.tmp-lf-l{position:absolute;animation:tmp-lf 10s linear infinite}
.tmp-lf-s{animation:tmp-lf-s 5s ease-in-out infinite alternate}
.tmp-lf-l svg{width:100%}
@keyframes tmp-lf{from{transform:translateY(calc(-1 * var(--t) - 8cqw))}to{transform:translateY(calc(77cqw - var(--t)))}}
@keyframes tmp-lf-s{from{transform:translateX(-1.4cqw) rotate(-30deg)}to{transform:translateX(1.4cqw) rotate(30deg)}}
/* tmp f23 the grounds: white to mint 2.0 to 2.2 s, back 6.0 to 6.2 */
.tmp-gd-g{position:absolute;inset:0;opacity:0}
.tmp-gd-lk{position:absolute;left:27.5%;width:45%;top:50%;transform:translateY(-50%)}
.tmp-gd-1{animation:tmp-gd-1 8s linear infinite}@keyframes tmp-gd-1{0%,25%{opacity:0}27.5%,75%{opacity:1}77.5%,100%{opacity:0}}
/* tmp f24 on white */
.tmp-wh-lk{position:absolute;left:30%;width:40%;top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){.tmp,.tmp *{animation:none !important}}
/* mf f00 the mark: the disc swept 0.4 to 1.8 s; the five tower sectors grow 0.3 s apart from 1.8 s, 0.8 s each; the orbit's free
   arcs swept 3.6 to 4.3; the name 4.4 to 5.0; hold; fade 8.2 to 9.0 */
.mf-h-disc{stroke-dashoffset:0;animation:mf-h-disc 9s linear infinite}@keyframes mf-h-disc{0%,4.444%{stroke-dashoffset:360;animation-timing-function:cubic-bezier(.45,0,.25,1)}20%,100%{stroke-dashoffset:0}}
.mf-h-orbit{stroke-dashoffset:0;animation:mf-h-orbit 9s linear infinite}@keyframes mf-h-orbit{0%,40%{stroke-dashoffset:360;animation-timing-function:cubic-bezier(.45,0,.25,1)}47.778%,100%{stroke-dashoffset:0}}
.mf-h-grow{transform-origin:0 0}
.mf-h-g0{animation:mf-h-g0 9s linear infinite}@keyframes mf-h-g0{0%,20%{transform:scale(.463);animation-timing-function:cubic-bezier(.16,1,.3,1)}28.889%,100%{transform:none}}
.mf-h-g1{animation:mf-h-g1 9s linear infinite}@keyframes mf-h-g1{0%,23.333%{transform:scale(.463);animation-timing-function:cubic-bezier(.16,1,.3,1)}32.222%,100%{transform:none}}
.mf-h-g2{animation:mf-h-g2 9s linear infinite}@keyframes mf-h-g2{0%,26.667%{transform:scale(.463);animation-timing-function:cubic-bezier(.16,1,.3,1)}35.556%,100%{transform:none}}
.mf-h-g3{animation:mf-h-g3 9s linear infinite}@keyframes mf-h-g3{0%,30%{transform:scale(.463);animation-timing-function:cubic-bezier(.16,1,.3,1)}38.889%,100%{transform:none}}
.mf-h-g4{animation:mf-h-g4 9s linear infinite}@keyframes mf-h-g4{0%,33.333%{transform:scale(.463);animation-timing-function:cubic-bezier(.16,1,.3,1)}42.222%,100%{transform:none}}
.mf-h-name{animation:mf-h-name 9s linear infinite}@keyframes mf-h-name{0%,48.889%{opacity:0}55.556%,100%{opacity:1}}
.mf-h-all{animation:mf-h-all 9s linear infinite}@keyframes mf-h-all{0%,91.111%{opacity:1}100%{opacity:0}}
/* mf f01 and f16 the lines: one word every 0.45 s from 0.8 s; hold; fade (f01 7.0 to 7.6 of 8 s; f16 8.0 to 8.6 of 9 s) */
.mf-ln-mark{position:absolute;left:44%;width:12%;top:12%}
.mf-ln-w0{animation:mf-ln-w0 8s linear infinite}@keyframes mf-ln-w0{0%,10%{opacity:0}11.875%,87.5%{opacity:1}95%,100%{opacity:0}}
.mf-ln-w1{animation:mf-ln-w1 8s linear infinite}@keyframes mf-ln-w1{0%,15.625%{opacity:0}17.5%,87.5%{opacity:1}95%,100%{opacity:0}}
.mf-ln-w2{animation:mf-ln-w2 8s linear infinite}@keyframes mf-ln-w2{0%,21.25%{opacity:0}23.125%,87.5%{opacity:1}95%,100%{opacity:0}}
.mf-ln-w3{animation:mf-ln-w3 8s linear infinite}@keyframes mf-ln-w3{0%,26.875%{opacity:0}28.75%,87.5%{opacity:1}95%,100%{opacity:0}}
.mf-ln-w4{animation:mf-ln-w4 8s linear infinite}@keyframes mf-ln-w4{0%,32.5%{opacity:0}34.375%,87.5%{opacity:1}95%,100%{opacity:0}}
.mf-l2-w0{animation:mf-l2-w0 9s linear infinite}@keyframes mf-l2-w0{0%,8.889%{opacity:0}10.556%,88.889%{opacity:1}95.556%,100%{opacity:0}}
.mf-l2-w1{animation:mf-l2-w1 9s linear infinite}@keyframes mf-l2-w1{0%,13.889%{opacity:0}15.556%,88.889%{opacity:1}95.556%,100%{opacity:0}}
.mf-l2-w2{animation:mf-l2-w2 9s linear infinite}@keyframes mf-l2-w2{0%,18.889%{opacity:0}20.556%,88.889%{opacity:1}95.556%,100%{opacity:0}}
.mf-l2-w3{animation:mf-l2-w3 9s linear infinite}@keyframes mf-l2-w3{0%,23.889%{opacity:0}25.556%,88.889%{opacity:1}95.556%,100%{opacity:0}}
.mf-l2-w4{animation:mf-l2-w4 9s linear infinite}@keyframes mf-l2-w4{0%,28.889%{opacity:0}30.556%,88.889%{opacity:1}95.556%,100%{opacity:0}}
.mf-l2-w5{animation:mf-l2-w5 9s linear infinite}@keyframes mf-l2-w5{0%,33.889%{opacity:0}35.556%,88.889%{opacity:1}95.556%,100%{opacity:0}}
.mf-l2-w6{animation:mf-l2-w6 9s linear infinite}@keyframes mf-l2-w6{0%,38.889%{opacity:0}40.556%,88.889%{opacity:1}95.556%,100%{opacity:0}}
/* mf f02 the towers: the mask rises 0.3 to 1.7 s; hold; falls 5.7 to 6.7 */
.mf-tw-rise{transform-box:fill-box;transform-origin:50% 100%;animation:mf-tw 7s infinite}@keyframes mf-tw{0%,4.286%{transform:scaleY(0);animation-timing-function:cubic-bezier(.16,1,.3,1)}24.286%,81.429%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}95.714%,100%{transform:scaleY(0)}}
/* mf f03 the pattern and f17 tone on tone: the grid, turned 7 degrees, slides one whole step along its diagonal (8 s; 9 s);
   f17's name fades up at 2.0 s and down at 7.5 */
.mf-pt-grid{position:absolute;left:-40%;top:-60%;width:180%;height:230%;background-repeat:repeat;background-size:15.625cqw 21.25cqw;transform:rotate(7deg);animation:mf-pt 8s linear infinite}
.mf-tone .mf-pt-grid{animation-duration:9s}
@keyframes mf-pt{from{transform:rotate(7deg)}to{transform:rotate(7deg) translate(-7.8125cqw,-10.625cqw)}}
.mf-tn-name{position:absolute;left:15%;width:70%;top:50%;transform:translateY(-50%);animation:mf-tn 9s linear infinite}@keyframes mf-tn{0%,22.222%{opacity:0}28.889%,83.333%{opacity:1}90%,100%{opacity:0}}
/* mf f04 the colour sheet: the columns drop 0 to 1.0 s; their lines type in at 1.0, 1.3, 1.6; the tints drop at 2.4, 3.0, 3.6;
   hold; back to white 6.6 to 7.2 */
.mf-cs{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;animation:mf-cs-out 7.2s linear infinite}
@keyframes mf-cs-out{0%,91.667%{opacity:1}100%{opacity:0}}
.mf-cs-col{display:flex;flex-direction:column;min-width:0}
.mf-cs-main{height:52%;padding:3cqw;transform-origin:50% 0;animation:mf-cs-drop 7.2s linear infinite}
@keyframes mf-cs-drop{0%{transform:scaleY(0);animation-timing-function:cubic-bezier(.16,1,.3,1)}13.889%,100%{transform:none}}
.mf-cs-l{display:block;font-family:var(--display);font-weight:500;font-size:1.6cqw;line-height:1.6;letter-spacing:.08em;color:#2D406B}
.mf-cs-dark .mf-cs-l{color:#fff}
.mf-cs-l0{animation:mf-cs-l0 7.2s linear infinite}@keyframes mf-cs-l0{0%,13.889%{opacity:0}15.972%,100%{opacity:1}}
.mf-cs-l1{animation:mf-cs-l1 7.2s linear infinite}@keyframes mf-cs-l1{0%,18.056%{opacity:0}20.139%,100%{opacity:1}}
.mf-cs-l2{animation:mf-cs-l2 7.2s linear infinite}@keyframes mf-cs-l2{0%,22.222%{opacity:0}24.306%,100%{opacity:1}}
.mf-cs-b{height:16%;display:flex;align-items:center;padding:0 3cqw;transform-origin:50% 0}
.mf-cs-b span{font-family:var(--display);font-weight:500;font-size:1.3cqw;letter-spacing:.08em;color:#2D406B}
.mf-cs-dark .mf-cs-b0 span,.mf-cs-dark .mf-cs-b1 span{color:#fff}
.mf-cs-b0{animation:mf-cs-b0 7.2s linear infinite}@keyframes mf-cs-b0{0%,33.333%{transform:scaleY(0);animation-timing-function:cubic-bezier(.16,1,.3,1)}40.278%,100%{transform:none}}
.mf-cs-b1{animation:mf-cs-b1 7.2s linear infinite}@keyframes mf-cs-b1{0%,41.667%{transform:scaleY(0);animation-timing-function:cubic-bezier(.16,1,.3,1)}48.611%,100%{transform:none}}
.mf-cs-b2{animation:mf-cs-b2 7.2s linear infinite}@keyframes mf-cs-b2{0%,50%{transform:scaleY(0);animation-timing-function:cubic-bezier(.16,1,.3,1)}56.944%,100%{transform:none}}
/* mf f05 the typeface: the letters in turn, 0.6 s each from 0.3 s (0.15 s crossfades); the octagon goes 5.7 to 6.0; the name
   6.0 to 6.3, out 7.5 to 7.8; the octagon and the M return 7.8 to 8.0 */
.mf-tf-c{opacity:0}.mf-tf-c0{opacity:1}.mf-tf-name{opacity:0}
.mf-foot{position:absolute;left:0;right:0;bottom:8%;margin:0;text-align:center;font-family:var(--display);font-weight:500;font-size:1.5cqw;letter-spacing:.16em;text-transform:uppercase;color:#2D406B}
.mf-tf-c0{animation:mf-tf-c0 8s linear infinite}@keyframes mf-tf-c0{0%,11.25%{opacity:1}13.125%,97.5%{opacity:0}100%{opacity:1}}
.mf-tf-c1{animation:mf-tf-c1 8s linear infinite}@keyframes mf-tf-c1{0%,11.25%{opacity:0}13.125%,18.75%{opacity:1}20.625%,100%{opacity:0}}
.mf-tf-c2{animation:mf-tf-c2 8s linear infinite}@keyframes mf-tf-c2{0%,18.75%{opacity:0}20.625%,26.25%{opacity:1}28.125%,100%{opacity:0}}
.mf-tf-c3{animation:mf-tf-c3 8s linear infinite}@keyframes mf-tf-c3{0%,26.25%{opacity:0}28.125%,33.75%{opacity:1}35.625%,100%{opacity:0}}
.mf-tf-c4{animation:mf-tf-c4 8s linear infinite}@keyframes mf-tf-c4{0%,33.75%{opacity:0}35.625%,41.25%{opacity:1}43.125%,100%{opacity:0}}
.mf-tf-c5{animation:mf-tf-c5 8s linear infinite}@keyframes mf-tf-c5{0%,41.25%{opacity:0}43.125%,48.75%{opacity:1}50.625%,100%{opacity:0}}
.mf-tf-c6{animation:mf-tf-c6 8s linear infinite}@keyframes mf-tf-c6{0%,48.75%{opacity:0}50.625%,56.25%{opacity:1}58.125%,100%{opacity:0}}
.mf-tf-c7{animation:mf-tf-c7 8s linear infinite}@keyframes mf-tf-c7{0%,56.25%{opacity:0}58.125%,63.75%{opacity:1}65.625%,100%{opacity:0}}
.mf-tf-c8{animation:mf-tf-c8 8s linear infinite}@keyframes mf-tf-c8{0%,63.75%{opacity:0}65.625%,71.25%{opacity:1}73.125%,100%{opacity:0}}
.mf-tf-big{animation:mf-tf-big 8s linear infinite}@keyframes mf-tf-big{0%,71.25%{opacity:1}75%,97.5%{opacity:0}100%{opacity:1}}
.mf-tf-name{animation:mf-tf-name 8s linear infinite}@keyframes mf-tf-name{0%,75%{opacity:0}78.75%,93.75%{opacity:1}97.5%,100%{opacity:0}}
/* mf f10 the figures: 0 to 9, 0.55 s each (0.1 s crossfades); the 0 returns at 5.5 */
.mf-fg-c{opacity:0}.mf-fg-c0{opacity:1}
.mf-fg-c0{animation:mf-fg-c0 6s linear infinite}@keyframes mf-fg-c0{0%,9.167%{opacity:1}10.833%,91.667%{opacity:0}93.333%,100%{opacity:1}}
.mf-fg-c1{animation:mf-fg-c1 6s linear infinite}@keyframes mf-fg-c1{0%,9.167%{opacity:0}10.833%,18.333%{opacity:1}20%,100%{opacity:0}}
.mf-fg-c2{animation:mf-fg-c2 6s linear infinite}@keyframes mf-fg-c2{0%,18.333%{opacity:0}20%,27.5%{opacity:1}29.167%,100%{opacity:0}}
.mf-fg-c3{animation:mf-fg-c3 6s linear infinite}@keyframes mf-fg-c3{0%,27.5%{opacity:0}29.167%,36.667%{opacity:1}38.333%,100%{opacity:0}}
.mf-fg-c4{animation:mf-fg-c4 6s linear infinite}@keyframes mf-fg-c4{0%,36.667%{opacity:0}38.333%,45.833%{opacity:1}47.5%,100%{opacity:0}}
.mf-fg-c5{animation:mf-fg-c5 6s linear infinite}@keyframes mf-fg-c5{0%,45.833%{opacity:0}47.5%,55%{opacity:1}56.667%,100%{opacity:0}}
.mf-fg-c6{animation:mf-fg-c6 6s linear infinite}@keyframes mf-fg-c6{0%,55%{opacity:0}56.667%,64.167%{opacity:1}65.833%,100%{opacity:0}}
.mf-fg-c7{animation:mf-fg-c7 6s linear infinite}@keyframes mf-fg-c7{0%,64.167%{opacity:0}65.833%,73.333%{opacity:1}75%,100%{opacity:0}}
.mf-fg-c8{animation:mf-fg-c8 6s linear infinite}@keyframes mf-fg-c8{0%,73.333%{opacity:0}75%,82.5%{opacity:1}84.167%,100%{opacity:0}}
.mf-fg-c9{animation:mf-fg-c9 6s linear infinite}@keyframes mf-fg-c9{0%,82.5%{opacity:0}84.167%,91.667%{opacity:1}93.333%,100%{opacity:0}}
/* mf f07 versions: four steps of 2 s, 0.2 s crossfades; the rule a quarter wider each step */
.mf-vs-s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}.mf-vs-0{opacity:1}
.mf-vs-lk{width:44%}.mf-vs-mk{width:22%}.mf-vs-nm{width:62%}
.mf-vs-side{display:flex;align-items:center;gap:3cqw;width:70%}.mf-vs-sm{flex:none;width:13.3%}.mf-vs-sn{flex:1;min-width:0}
.mf-vs-0{animation:mf-vs-0 8s linear infinite}@keyframes mf-vs-0{0%,25%{opacity:1}27.5%,97.5%{opacity:0}100%{opacity:1}}
.mf-vs-1{animation:mf-vs-1 8s linear infinite}@keyframes mf-vs-1{0%,25%{opacity:0}27.5%,50%{opacity:1}52.5%,100%{opacity:0}}
.mf-vs-2{animation:mf-vs-2 8s linear infinite}@keyframes mf-vs-2{0%,50%{opacity:0}52.5%,75%{opacity:1}77.5%,100%{opacity:0}}
.mf-vs-3{animation:mf-vs-3 8s linear infinite}@keyframes mf-vs-3{0%,75%{opacity:0}77.5%,97.5%{opacity:1}100%{opacity:0}}
.mf-vs-rule{position:absolute;left:12%;bottom:16%;width:76%;height:2px;background:#2D406B;transform-origin:0 50%;transform:scaleX(.25);animation:mf-vs-r 8s infinite}
@keyframes mf-vs-r{0%,25%{transform:scaleX(.25);animation-timing-function:cubic-bezier(.65,0,.35,1)}30%,50%{transform:scaleX(.5);animation-timing-function:cubic-bezier(.65,0,.35,1)}55%,75%{transform:scaleX(.75);animation-timing-function:cubic-bezier(.65,0,.35,1)}80%,95%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}100%{transform:scaleX(.25)}}
/* mf f11 the mark, large: -8 to +8 degrees and back, 10 s */
.mf-lg-turn{animation:mf-lg 10s cubic-bezier(.45,0,.55,1) infinite}@keyframes mf-lg{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
/* mf f12 the set: the faces at one scale (.095cqw a millimetre; the business card front above its back); the artwork lands 0.7 s apart from 0.6 s; hold; clear 8.8 to 9.3 */
.mf-se-row{position:absolute;left:0;right:0;bottom:6cqw;display:flex;align-items:flex-end;justify-content:center;gap:1.8cqw}
.mf-se-col{display:flex;flex-direction:column;gap:1.4cqw}
.mf-se-face{position:relative;flex:none;width:calc(var(--w) * .095cqw);height:calc(var(--h) * .095cqw);overflow:hidden;box-shadow:0 .3cqw 1.2cqw rgba(45,64,107,.14),0 0 0 1px rgba(45,64,107,.06)}
.mf-se-front,.mf-se-back{border-radius:.25cqw}
.mf-se-m{position:absolute;inset:0}
.mf-se-m svg{position:absolute}
.mf-se-fm{left:-28%;top:22%;width:140%}
.mf-se-side{position:absolute;left:10%;top:5%;width:46%;display:flex;align-items:center;gap:5%}.mf-se-side svg{position:static}
.mf-se-sm{left:-16%;top:-9%;width:50%}.mf-se-sn{left:42%;width:50%;top:46%}
.mf-se-flap{position:absolute;left:0;right:0;top:0;height:30%;background:#95CCAA}
.mf-se-lk{left:18%;width:64%;top:50%;transform:translateY(-50%)}.mf-se-bk{left:36%;width:28%;top:50%;transform:translateY(-50%)}
.mf-se-m0{animation:mf-se-m0 10s linear infinite}@keyframes mf-se-m0{0%,6%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}11%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.mf-se-m1{animation:mf-se-m1 10s linear infinite}@keyframes mf-se-m1{0%,13%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}18%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.mf-se-m2{animation:mf-se-m2 10s linear infinite}@keyframes mf-se-m2{0%,20%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}25%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.mf-se-m3{animation:mf-se-m3 10s linear infinite}@keyframes mf-se-m3{0%,27%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}32%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.mf-se-m4{animation:mf-se-m4 10s linear infinite}@keyframes mf-se-m4{0%,34%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}39%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.mf-se-m5{animation:mf-se-m5 10s linear infinite}@keyframes mf-se-m5{0%,41%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}46%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
/* mf f20 the grounds: navy 60 % at 1.8 s, 80 % at 3.6, navy at 5.4 (0.2 s each); the copies cross with the first; back to white 7.2 to 7.4 */
.mf-gd-g{position:absolute;inset:0;opacity:0}
.mf-gd-lk{position:absolute;left:25%;width:50%;top:50%;transform:translateY(-50%)}
.mf-gd-1{animation:mf-gd-1 8s linear infinite}@keyframes mf-gd-1{0%,22.5%{opacity:0}25%,90%{opacity:1}92.5%,100%{opacity:0}}
.mf-gd-2{animation:mf-gd-2 8s linear infinite}@keyframes mf-gd-2{0%,45%{opacity:0}47.5%,90%{opacity:1}92.5%,100%{opacity:0}}
.mf-gd-3{animation:mf-gd-3 8s linear infinite}@keyframes mf-gd-3{0%,67.5%{opacity:0}70%,90%{opacity:1}92.5%,100%{opacity:0}}
.mf-gd-white{opacity:0;animation:mf-gd-w 8s linear infinite}@keyframes mf-gd-w{0%,22.5%{opacity:0}25%,90%{opacity:1}92.5%,100%{opacity:0}}
.mf-gd-navy{animation:mf-gd-n 8s linear infinite}@keyframes mf-gd-n{0%,22.5%{opacity:1}25%,90%{opacity:0}92.5%,100%{opacity:1}}
/* mf f21 the name, large: 6 % left and back, 10 s. f22 the planet turns: one turn in 12 s */
.mf-nm-drift{animation:mf-nm 10s ease-in-out infinite}@keyframes mf-nm{50%{transform:translateX(-115px)}}
.mf-tn-turn{animation:mf-tn-turn 12s linear infinite}@keyframes mf-tn-turn{to{transform:rotate(360deg)}}
/* mf f23 on mint, f24 on white */
.mf-mn-mk{position:absolute;left:37%;width:26%;top:50%;transform:translateY(-50%)}
.mf-wh-lk{position:absolute;left:28%;width:44%;top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){.mf,.mf *{animation:none !important}}
/* ================= end of The Meal Plant and Mustaqbal Fund ================= */

/* ---------- the Moon Retreat case frames (assets/plan/moon-retreat-grid.md; K's calls of 28 Sep; built 28 Sep) ----------
   Prefix .mr. The lockup is traced from the logo file (assets/work/moon-retreat/src) and placed whole: its four parts are
   defined once a page (.mr-defs) and shown by <use> in small <svg>s, most of them inside HTML elements that move, so the
   paths are drawn once and the picture moves. The films move a part only by a mask, opacity, and translate or rotate
   of the whole. Every element's resting state is the finished frame, so reduced motion shows the poster. The client's
   palette lives inside the frames only; the idea line and the hex are in the site's display face, the wordmark's own
   face being unknown. Loops: hero 9 s, idea 8, stroke 10, dawn 10, palette 7, phases 8, domes 8, lockups 7, mysk 10,
   grounds 8, set 10, icon 5, moonrise 9; f28 is still. .mr-wait is a render not yet delivered: a plain paper field. */
.mr-defs{position:absolute;width:0;height:0;overflow:hidden}
.mr{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:#F8E5E7;color:#4A5F78}
.mr svg{display:block;height:auto}
.mr .mr-full{position:absolute;inset:0;width:100%;height:100%}
.mr-wait{background:#F4F1EC}
.mr-onwhite{box-shadow:inset 0 0 0 1px rgba(74,95,120,.14)}
.seq > .frame > .mr{aspect-ratio:4/3}
.seq > .frame:nth-child(3n) > .mr{aspect-ratio:16/9}
.case-hero .mr{aspect-ratio:16/9}
.seq-mr > :last-child:nth-child(3n+1){grid-column:1/-1}
.seq-mr > .frame:last-child:nth-child(3n+1) > .mr,.seq-mr > .frame:last-child:nth-child(3n+1) > .case-still{aspect-ratio:16/9}
/* f00 the hero: the base line drawn 0.4 to 1.6 s, the arc swept 1.6 to 4.2, the name 4.4 to 5.0, by mysk 5.2 to 5.8;
   hold; fade 8.2 to 9.0 */
.mr-h-band{transform-box:fill-box;transform-origin:0 50%;animation:mr-h-band 9s linear infinite}
.mr-h-arc{animation:mr-h-arc 9s linear infinite}
.mr-h-name{animation:mr-h-name 9s linear infinite}
.mr-h-by{animation:mr-h-by 9s linear infinite}
.mr-h-all{animation:mr-h-out 9s linear infinite}
@keyframes mr-h-band{0%,4.4%{transform:scaleX(0);animation-timing-function:cubic-bezier(.5,0,.3,1)}17.8%,100%{transform:none}}
@keyframes mr-h-arc{0%,17.8%{stroke-dashoffset:205;animation-timing-function:cubic-bezier(.45,0,.25,1)}46.7%,100%{stroke-dashoffset:0}}
@keyframes mr-h-name{0%,48.9%{opacity:0}55.6%,100%{opacity:1}}
@keyframes mr-h-by{0%,57.8%{opacity:0}64.4%,100%{opacity:1}}
@keyframes mr-h-out{0%,91.1%{opacity:1}100%{opacity:0}}
/* f01 the idea: the words at 1.2, 1.65, 2.1 and 2.55 s; hold; fade 6.4 to 7.0 */
.mr-i-mark{position:absolute;left:38%;top:27%;width:24%}
.mr-i-line{position:absolute;left:0;right:0;top:60%;margin:0;text-align:center;white-space:nowrap;font-family:var(--display);font-weight:500;font-size:3.5cqw;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#4A5F78}
.mr-i-w{display:inline-block;animation:8s linear infinite}
.mr-i-w0{animation-name:mr-i-w0}@keyframes mr-i-w0{0%,15%{opacity:0}16.5%,80%{opacity:1}87.5%,100%{opacity:0}}
.mr-i-w1{animation-name:mr-i-w1}@keyframes mr-i-w1{0%,20.625%{opacity:0}22.125%,80%{opacity:1}87.5%,100%{opacity:0}}
.mr-i-w2{animation-name:mr-i-w2}@keyframes mr-i-w2{0%,26.25%{opacity:0}27.75%,80%{opacity:1}87.5%,100%{opacity:0}}
.mr-i-w3{animation-name:mr-i-w3}@keyframes mr-i-w3{0%,31.875%{opacity:0}33.375%,80%{opacity:1}87.5%,100%{opacity:0}}
/* f02 the stroke: from the crown to the square foot, across to the feathered end, back to the crown */
.mr-st-turn{transform-box:fill-box;transform-origin:50.39% 91.92%;animation:mr-st 10s cubic-bezier(.45,0,.55,1) infinite}
@keyframes mr-st{0%{transform:none}20%{transform:rotate(80deg)}70%{transform:rotate(-80deg)}100%{transform:none}}
/* f03 night to dawn: mist 2.5 s, blush 4.5, shell 6.5, back to slate 9.0, each over 0.8 s; the lockups cross 2.6 to 3.2 */
.mr-dw-g{position:absolute;inset:0}
.mr-dw-mist{animation:mr-dw-mist 10s linear infinite}
.mr-dw-blush{animation:mr-dw-blush 10s linear infinite}
.mr-dw-shell{animation:mr-dw-shell 10s linear infinite}
@keyframes mr-dw-mist{0%,25%{opacity:0}33%,90%{opacity:1}98%,100%{opacity:0}}
@keyframes mr-dw-blush{0%,45%{opacity:0}53%,90%{opacity:1}98%,100%{opacity:0}}
@keyframes mr-dw-shell{0%,65%{opacity:0}73%,90%{opacity:1}98%,100%{opacity:0}}
.mr-dw-lk{position:absolute;left:33%;width:34%;top:50%;transform:translateY(-50%)}
.mr-dw-white{opacity:0;animation:mr-dw-white 10s linear infinite}
.mr-dw-slate{animation:mr-dw-slate 10s linear infinite}
@keyframes mr-dw-white{0%,26%{opacity:1}32%,90%{opacity:0}97%,100%{opacity:1}}
@keyframes mr-dw-slate{0%,26%{opacity:0}32%,90%{opacity:1}97%,100%{opacity:0}}
/* f04 the palette: six fields rise 0.3 s apart, each hex after its field; hold; fade */
.mr-pl-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;animation:mr-pl-out 7s linear infinite}
.mr-pl-f{display:flex;align-items:flex-end;padding:0 0 2.4cqw 2.4cqw;transform-origin:50% 100%;min-width:0}
.mr-pl-f span{font-family:var(--display);font-weight:600;font-size:2.2cqw;letter-spacing:.06em;color:#4A5F78}
.mr-pl-dark span{color:#fff}
@keyframes mr-pl-out{0%,93%{opacity:1}100%{opacity:0}}
.mr-pl-0{animation:mr-pl-f0 7s linear infinite}.mr-pl-0 span{animation:mr-pl-l0 7s linear infinite}
@keyframes mr-pl-f0{0%,5%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}17%,100%{transform:none}}
@keyframes mr-pl-l0{0%,19%{opacity:0}25%,100%{opacity:1}}
.mr-pl-1{animation:mr-pl-f1 7s linear infinite}.mr-pl-1 span{animation:mr-pl-l1 7s linear infinite}
@keyframes mr-pl-f1{0%,9.29%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}21.29%,100%{transform:none}}
@keyframes mr-pl-l1{0%,23.29%{opacity:0}29.29%,100%{opacity:1}}
.mr-pl-2{animation:mr-pl-f2 7s linear infinite}.mr-pl-2 span{animation:mr-pl-l2 7s linear infinite}
@keyframes mr-pl-f2{0%,13.58%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}25.58%,100%{transform:none}}
@keyframes mr-pl-l2{0%,27.58%{opacity:0}33.58%,100%{opacity:1}}
.mr-pl-3{animation:mr-pl-f3 7s linear infinite}.mr-pl-3 span{animation:mr-pl-l3 7s linear infinite}
@keyframes mr-pl-f3{0%,17.87%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}29.87%,100%{transform:none}}
@keyframes mr-pl-l3{0%,31.87%{opacity:0}37.87%,100%{opacity:1}}
.mr-pl-4{animation:mr-pl-f4 7s linear infinite}.mr-pl-4 span{animation:mr-pl-l4 7s linear infinite}
@keyframes mr-pl-f4{0%,22.16%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}34.16%,100%{transform:none}}
@keyframes mr-pl-l4{0%,36.16%{opacity:0}42.16%,100%{opacity:1}}
.mr-pl-5{animation:mr-pl-f5 7s linear infinite}.mr-pl-5 span{animation:mr-pl-l5 7s linear infinite}
@keyframes mr-pl-f5{0%,26.45%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}38.45%,100%{transform:none}}
@keyframes mr-pl-l5{0%,40.45%{opacity:0}46.45%,100%{opacity:1}}
/* f05 the phases: marks 10cqw wide, gaps and margins 2.2222cqw, so the ninth waits just past the edge; each second
   the row holds 0.65 s and steps one pitch (12.2222cqw) in 0.35 s; after eight steps the second set stands where the
   first began */
.mr-ph-row{position:absolute;left:0;top:calc(50% - 2.4cqw);display:flex;gap:2.2222cqw;padding-left:2.2222cqw;width:max-content;animation:mr-ph 8s cubic-bezier(.65,0,.35,1) infinite}
.mr-ph-m{width:10cqw;flex:none}
@keyframes mr-ph{0%,8.125%{transform:translateX(-0cqw)}12.5%,20.625%{transform:translateX(-12.222cqw)}25%,33.125%{transform:translateX(-24.444cqw)}37.5%,45.625%{transform:translateX(-36.667cqw)}50%,58.125%{transform:translateX(-48.889cqw)}62.5%,70.625%{transform:translateX(-61.111cqw)}75%,83.125%{transform:translateX(-73.333cqw)}87.5%,95.625%{transform:translateX(-85.555cqw)}100%{transform:translateX(-97.778cqw)}}
/* f06 ten domes: two staggered rows of five, 12cqw marks at a 17cqw pitch; each up 0.35 s after the last from 0.4 s;
   hold; all fade 7.2 to 7.8 */
.mr-dm-m{position:absolute;width:12cqw}
.mr-dm-0{left:5.75cqw;top:18cqw;animation:mr-dm-0 8s linear infinite}@keyframes mr-dm-0{0%,5%{opacity:0}10%,90%{opacity:1}97.5%,100%{opacity:0}}
.mr-dm-1{left:22.75cqw;top:18cqw;animation:mr-dm-1 8s linear infinite}@keyframes mr-dm-1{0%,9.375%{opacity:0}14.375%,90%{opacity:1}97.5%,100%{opacity:0}}
.mr-dm-2{left:39.75cqw;top:18cqw;animation:mr-dm-2 8s linear infinite}@keyframes mr-dm-2{0%,13.75%{opacity:0}18.75%,90%{opacity:1}97.5%,100%{opacity:0}}
.mr-dm-3{left:56.75cqw;top:18cqw;animation:mr-dm-3 8s linear infinite}@keyframes mr-dm-3{0%,18.125%{opacity:0}23.125%,90%{opacity:1}97.5%,100%{opacity:0}}
.mr-dm-4{left:73.75cqw;top:18cqw;animation:mr-dm-4 8s linear infinite}@keyframes mr-dm-4{0%,22.5%{opacity:0}27.5%,90%{opacity:1}97.5%,100%{opacity:0}}
.mr-dm-5{left:14.25cqw;top:30cqw;animation:mr-dm-5 8s linear infinite}@keyframes mr-dm-5{0%,26.875%{opacity:0}31.875%,90%{opacity:1}97.5%,100%{opacity:0}}
.mr-dm-6{left:31.25cqw;top:30cqw;animation:mr-dm-6 8s linear infinite}@keyframes mr-dm-6{0%,31.25%{opacity:0}36.25%,90%{opacity:1}97.5%,100%{opacity:0}}
.mr-dm-7{left:48.25cqw;top:30cqw;animation:mr-dm-7 8s linear infinite}@keyframes mr-dm-7{0%,35.625%{opacity:0}40.625%,90%{opacity:1}97.5%,100%{opacity:0}}
.mr-dm-8{left:65.25cqw;top:30cqw;animation:mr-dm-8 8s linear infinite}@keyframes mr-dm-8{0%,40%{opacity:0}45%,90%{opacity:1}97.5%,100%{opacity:0}}
.mr-dm-9{left:82.25cqw;top:30cqw;animation:mr-dm-9 8s linear infinite}@keyframes mr-dm-9{0%,44.375%{opacity:0}49.375%,90%{opacity:1}97.5%,100%{opacity:0}}
/* f07 two lockups: by mysk out 2.5 to 3.0 s, the mark and name down 2.6 to 3.3; hold; up 5.5 to 6.2, by mysk back */
.mr-lk-by{animation:mr-lk-by 7s linear infinite}
.mr-lk-short{animation:mr-lk-short 7s infinite}
@keyframes mr-lk-by{0%,35.7%{opacity:1}42.9%,80%{opacity:0}87.1%,100%{opacity:1}}
@keyframes mr-lk-short{0%,37.1%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}47.1%,78.6%{transform:translateY(var(--drop));animation-timing-function:cubic-bezier(.65,0,.35,1)}88.6%,100%{transform:none}}
/* f08 mysk large: 1.3 times the width at the key card's tone, cut at the left and the foot, drifting 6 % left and back */
.mr-my-big{position:absolute;left:-10%;top:47%;width:130%;opacity:.4;animation:mr-my 10s ease-in-out infinite}
@keyframes mr-my{0%,100%{transform:none}50%{transform:translateX(-4.6%)}}
.mr-my-lk{position:absolute;left:38%;top:10%;width:24%}
/* f09 the grounds: white, then shell, blush, mist, butter and mint at 1.25 s steps, each over 0.2 s; back to white at 7.5 s */
.mr-gr-g{position:absolute;inset:0;opacity:0}
.mr-gr-lk{position:absolute;left:30%;width:40%;top:50%;transform:translateY(-50%)}
.mr-gr-1{animation:mr-gr-1 8s linear infinite}@keyframes mr-gr-1{0%,15.625%{opacity:0}18.125%,93.75%{opacity:1}96.25%,100%{opacity:0}}
.mr-gr-2{animation:mr-gr-2 8s linear infinite}@keyframes mr-gr-2{0%,31.25%{opacity:0}33.75%,93.75%{opacity:1}96.25%,100%{opacity:0}}
.mr-gr-3{animation:mr-gr-3 8s linear infinite}@keyframes mr-gr-3{0%,46.875%{opacity:0}49.375%,93.75%{opacity:1}96.25%,100%{opacity:0}}
.mr-gr-4{animation:mr-gr-4 8s linear infinite}@keyframes mr-gr-4{0%,62.5%{opacity:0}65%,93.75%{opacity:1}96.25%,100%{opacity:0}}
.mr-gr-5{animation:mr-gr-5 8s linear infinite}@keyframes mr-gr-5{0%,78.125%{opacity:0}80.625%,93.75%{opacity:1}96.25%,100%{opacity:0}}
/* f12 the set: the faces at one scale (.1477cqw a millimetre, the letterhead 78 % of the height); the marks land 0.7 s
   apart from 0.6 s, each over 0.5 s; hold; clear 8.8 to 9.3 */
.mr-se-row{position:absolute;left:0;right:0;bottom:6.2cqw;display:flex;align-items:flex-end;justify-content:center;gap:3.4cqw}
.mr-se-face{position:relative;flex:none;width:calc(var(--w) * .1477cqw);height:calc(var(--h) * .1477cqw);overflow:hidden;box-shadow:0 .3cqw 1.4cqw rgba(74,95,120,.14),0 0 0 1px rgba(74,95,120,.07)}
.mr-se-card{border-radius:.6cqw}
.mr-se-m{position:absolute;inset:0}
.mr-se-m svg{position:absolute}
.mr-se-card .mr-se-lk{left:18%;width:64%;top:28%}
.mr-se-card .mr-se-tone{left:-14%;width:128%;top:64%;opacity:.4}
.mr-se-label .mr-se-lk{left:17%;width:66%;top:50%;transform:translateY(-50%)}
.mr-se-rule{position:absolute;inset:6%;border:1px solid #4A5F78}
.mr-se-box .mr-se-lk{left:32%;width:36%;top:14%}
.mr-se-tag .mr-se-lk{left:27%;width:46%;top:50%;transform:translateY(-50%)}
.mr-se-letter .mr-se-lk{left:42%;width:16%;top:5%}
.mr-se-letter .mr-se-tone{left:-6%;width:112%;top:76%;opacity:.25}
.mr-se-m0{animation:mr-se-m0 10s linear infinite}@keyframes mr-se-m0{0%,6%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}11%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.mr-se-m1{animation:mr-se-m1 10s linear infinite}@keyframes mr-se-m1{0%,13%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}18%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.mr-se-m2{animation:mr-se-m2 10s linear infinite}@keyframes mr-se-m2{0%,20%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}25%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.mr-se-m3{animation:mr-se-m3 10s linear infinite}@keyframes mr-se-m3{0%,27%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}32%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
.mr-se-m4{animation:mr-se-m4 10s linear infinite}@keyframes mr-se-m4{0%,34%{opacity:0;transform:scale(1.03);animation-timing-function:cubic-bezier(.16,1,.3,1)}39%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:none}}
/* f19 the app icon: the tile settles from 96 % and its shadow opens in 0.6 s; hold; it lifts back over the last 0.6 s */
.mr-ic-tile{position:absolute;left:33cqw;top:calc(50% - 17cqw);width:34cqw;height:34cqw;border-radius:22%;background:#fff;animation:mr-ic 5s infinite}
.mr-ic-shadow{position:absolute;inset:0;border-radius:inherit;box-shadow:0 2.2cqw 5cqw rgba(20,30,45,.35);animation:mr-ic-sh 5s linear infinite}
.mr-ic-lk{position:absolute;left:17%;width:66%;top:50%;transform:translateY(-50%)}
@keyframes mr-ic{0%{transform:scale(.96);animation-timing-function:cubic-bezier(.16,1,.3,1)}12%,88%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}100%{transform:scale(.96)}}
@keyframes mr-ic-sh{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
/* f21 the moonrise: the horizon alone 0 to 0.5 s; the arc rises 0.5 to 3.3; the one mark holds to 7.5; the arc sinks */
.mr-rs-cut{opacity:0;animation:mr-rs-cut 9s linear infinite}
.mr-rs-whole{animation:mr-rs-whole 9s linear infinite}
.mr-rs-arc{animation:mr-rs-arc 9s infinite}
@keyframes mr-rs-cut{0%,36.6%{opacity:1}36.7%,83.3%{opacity:0}83.4%,100%{opacity:1}}
@keyframes mr-rs-whole{0%,36.6%{opacity:0}36.7%,83.3%{opacity:1}83.4%,100%{opacity:0}}
@keyframes mr-rs-arc{0%,5.6%{transform:translateY(180px);animation-timing-function:cubic-bezier(.33,0,.2,1)}36.7%,83.3%{transform:none;animation-timing-function:cubic-bezier(.6,0,.8,.6)}100%{transform:translateY(180px)}}
/* f28 on white */
.mr-wh-lk{position:absolute;left:34%;width:32%;top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){.mr,.mr *{animation:none !important}}

/* Moon Retreat: each frame keeps the slot K approved (content.py, slot), so a frame taken out moves nothing after it */
.seq.seq-mr > .frame.frame:nth-child(n){grid-column:auto}
.seq.seq-mr > .frame.slot-wide:nth-child(n){grid-column:1/-1}
.seq.seq-mr > .frame.frame:nth-child(n) > .mr,.seq.seq-mr > .frame.frame:nth-child(n) > .case-still{aspect-ratio:4/3}
.seq.seq-mr > .frame.slot-wide:nth-child(n) > .mr,.seq.seq-mr > .frame.slot-wide:nth-child(n) > .case-still{aspect-ratio:16/9}
.case-hero > .case-still{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
/* a lone last picture spans its row, so no case page ends on an empty cell (K, 28 Sep: resize if needed) */
.seq > img.seq-pic:last-child:nth-child(3n+1){grid-column:1/-1}

/* ==================== BEGIN: Dubai CrossFit Championship, Reel Cinemas (tools/drs_css.py writes this block) ==================== */
/* Prefixes .dcc, .rc (the films built for the old Reel Cinemas page, now on the two Reel pages), .rp (Reel Platinum
   Suites), .rr (Reel Reward), and .drs for what they share. The marks are the traced files in assets/work/<slug>/src,
   defined once a page (.drs-defs) and placed by <use>. Orbitron and Bebas Neue are OFL files in those folders, loaded only
   on the pages that set them. Loops: DCC hero 9 s, event 8, grounds 8, negative 5, clear space 8, hexagon 7, rings 10,
   Orbitron 8, two lines 9, four days 7; Reel Platinum Suites lamp 9, in tone 8, palette 7, cloth 7, spine 6; Reel Reward
   grounds 7.5, lines 10, the R 10, palette 8, card 7, lights down 9, on pink 10, on green 10, three posters 7.
   .drs-wait is a render not yet delivered. */
@font-face{font-family:'DCC Orbitron';src:url(work/dubai-crossfit-championship/src/fonts/Orbitron-wght400-900-latin.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'RC Bebas';src:url(work/reel-reward/src/fonts/BebasNeue-Regular-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
.drs-defs{position:absolute;width:0;height:0;overflow:hidden}
.dcc,.rc,.rp,.rr{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size}
.dcc svg,.rc svg,.rp svg,.rr svg{display:block;height:auto}
.dcc .drs-full,.rc .drs-full,.rp .drs-full,.rr .drs-full{position:absolute;inset:0;width:100%;height:100%}
.drs-wait{background:#F4F1EC}
.drs-onwhite::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(20,20,20,.1);pointer-events:none}
.seq-drs > .frame > .dcc,.seq-drs > .frame > .rc,.seq-drs > .frame > .rp,.seq-drs > .frame > .rr{aspect-ratio:4/3}
.seq-drs > .frame.slot-wide > .dcc,.seq-drs > .frame.slot-wide > .rc,.seq-drs > .frame.slot-wide > .rp,.seq-drs > .frame.slot-wide > .rr{aspect-ratio:16/9}
.case-hero .dcc,.case-hero .rc,.case-hero .rp,.case-hero .rr{aspect-ratio:16/9}
.drs-w{display:inline-block}
.drs-pf{flex:1;display:flex;align-items:flex-end;padding:0 0 2cqw 2cqw;transform-origin:50% 100%;min-width:0}
.drs-pf span{font-family:var(--display);font-weight:600;font-size:1.7cqw;letter-spacing:.06em}
/* DCC f00 the badge assembles: the sweep 0.4 to 2.0 s, the rings 2.0 to 2.6, the names 2.8 to 3.4, the year line 3.5 to 4.1; hold; fade 8.2 to 9.0 */
.dcc-h-sweep{animation:dcc-h-sweep 9s linear infinite}@keyframes dcc-h-sweep{0%,4.444%{stroke-dashoffset:360;animation-timing-function:cubic-bezier(.45,0,.25,1)}22.222%,100%{stroke-dashoffset:0}}
.dcc-h-rings{animation:dcc-h-rings 9s linear infinite}@keyframes dcc-h-rings{0%,22.222%{opacity:0;transform:translateY(-40px);animation-timing-function:cubic-bezier(.16,1,.3,1)}28.889%,100%{opacity:1;transform:none}}
.dcc-h-name{animation:dcc-h-name 9s linear infinite}@keyframes dcc-h-name{0%,31.111%{opacity:0}37.778%,100%{opacity:1}}
.dcc-h-yd{animation:dcc-h-yd 9s linear infinite}@keyframes dcc-h-yd{0%,38.889%{opacity:0}45.556%,100%{opacity:1}}
.dcc-h-yl,.dcc-h-yr{transform-box:fill-box;animation:dcc-h-rule 9s linear infinite}.dcc-h-yl{transform-origin:100% 50%}.dcc-h-yr{transform-origin:0 50%}@keyframes dcc-h-rule{0%,38.889%{transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}45.556%,100%{transform:none}}
.dcc-h-all{animation:dcc-h-all 9s linear infinite}@keyframes dcc-h-all{0%,91.111%{opacity:1}100%{opacity:0}}
/* DCC f01 the event: one word every 0.4 s, 0.4 s between lines; hold to 7.4 s; fade */
.dcc-ev-badge{position:absolute;width:12.14cqw;left:43.93cqw;top:6cqw}
.dcc-ev-lines{position:absolute;left:7cqw;right:7cqw;top:29cqw;margin:0;text-align:center;font-family:'DCC Orbitron',var(--display);font-weight:700;font-size:3.5cqw;line-height:1.3;color:#fff}
.dcc-ev-l{display:block;margin-bottom:1.8cqw}
.dcc-ev-w0{animation:dcc-ev-w0 8s linear infinite}@keyframes dcc-ev-w0{0%,3.75%{opacity:0}5.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w1{animation:dcc-ev-w1 8s linear infinite}@keyframes dcc-ev-w1{0%,8.75%{opacity:0}10.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w2{animation:dcc-ev-w2 8s linear infinite}@keyframes dcc-ev-w2{0%,13.75%{opacity:0}15.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w3{animation:dcc-ev-w3 8s linear infinite}@keyframes dcc-ev-w3{0%,18.75%{opacity:0}20.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w4{animation:dcc-ev-w4 8s linear infinite}@keyframes dcc-ev-w4{0%,28.75%{opacity:0}30.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w5{animation:dcc-ev-w5 8s linear infinite}@keyframes dcc-ev-w5{0%,33.75%{opacity:0}35.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w6{animation:dcc-ev-w6 8s linear infinite}@keyframes dcc-ev-w6{0%,38.75%{opacity:0}40.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w7{animation:dcc-ev-w7 8s linear infinite}@keyframes dcc-ev-w7{0%,43.75%{opacity:0}45.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w8{animation:dcc-ev-w8 8s linear infinite}@keyframes dcc-ev-w8{0%,53.75%{opacity:0}55.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w9{animation:dcc-ev-w9 8s linear infinite}@keyframes dcc-ev-w9{0%,58.75%{opacity:0}60.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w10{animation:dcc-ev-w10 8s linear infinite}@keyframes dcc-ev-w10{0%,63.75%{opacity:0}65.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w11{animation:dcc-ev-w11 8s linear infinite}@keyframes dcc-ev-w11{0%,68.75%{opacity:0}70.625%,92.5%{opacity:1}100%{opacity:0}}
.dcc-ev-w12{animation:dcc-ev-w12 8s linear infinite}@keyframes dcc-ev-w12{0%,73.75%{opacity:0}75.625%,92.5%{opacity:1}100%{opacity:0}}
/* DCC f04 the grounds: navy, blue 2 s, orange 4 s, the full colour on white 6 s; hard cuts */
.dcc-gr-g{position:absolute;inset:0;opacity:0}.dcc-gr-b{position:absolute;width:39.1cqw;left:30.45cqw;top:19.5cqw}.dcc-gr-full{opacity:0}
.dcc-gr-blue{animation:dcc-gr-blue 8s step-end infinite}@keyframes dcc-gr-blue{0%{opacity:0}25%{opacity:1}50%,100%{opacity:0}}
.dcc-gr-orange{animation:dcc-gr-orange 8s step-end infinite}@keyframes dcc-gr-orange{0%{opacity:0}50%{opacity:1}75%,100%{opacity:0}}
.dcc-gr-white{animation:dcc-gr-white 8s step-end infinite}@keyframes dcc-gr-white{0%{opacity:0}75%,100%{opacity:1}}
.dcc-gr-one{animation:dcc-gr-one 8s step-end infinite}@keyframes dcc-gr-one{0%{opacity:1}75%,100%{opacity:0}}
.dcc-gr-full{animation:dcc-gr-full 8s step-end infinite}@keyframes dcc-gr-full{0%{opacity:0}75%,100%{opacity:1}}
/* DCC f05 negative: white on black 2.5 s, black on white 2.5 s */
.dcc-ng-white{position:absolute;inset:0;background:#fff;opacity:0}.dcc-ng-b{position:absolute;width:40.46cqw;left:29.77cqw;top:15cqw}.dcc-ng-k{opacity:0}
.dcc-ng-white{animation:dcc-ng-white 5s step-end infinite}@keyframes dcc-ng-white{0%{opacity:0}50%,100%{opacity:1}}
.dcc-ng-w{animation:dcc-ng-w 5s step-end infinite}@keyframes dcc-ng-w{0%{opacity:1}50%,100%{opacity:0}}
.dcc-ng-k{animation:dcc-ng-k 5s step-end infinite}@keyframes dcc-ng-k{0%{opacity:0}50%,100%{opacity:1}}
/* DCC f06 clear space: the markers at 0.6, 1.0, 1.4 and 1.8 s, each over 0.35 s; hold; clear 6.6 to 7.2 */
.dcc-cs-m{transform-box:fill-box;transform-origin:50% 50%}
.dcc-cs-m0{animation:dcc-cs-m0 8s linear infinite}@keyframes dcc-cs-m0{0%,7.5%{opacity:0;transform:scale(.8);animation-timing-function:cubic-bezier(.16,1,.3,1)}11.875%,82.5%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
.dcc-cs-m1{animation:dcc-cs-m1 8s linear infinite}@keyframes dcc-cs-m1{0%,12.5%{opacity:0;transform:scale(.8);animation-timing-function:cubic-bezier(.16,1,.3,1)}16.875%,82.5%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
.dcc-cs-m2{animation:dcc-cs-m2 8s linear infinite}@keyframes dcc-cs-m2{0%,17.5%{opacity:0;transform:scale(.8);animation-timing-function:cubic-bezier(.16,1,.3,1)}21.875%,82.5%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
.dcc-cs-m3{animation:dcc-cs-m3 8s linear infinite}@keyframes dcc-cs-m3{0%,22.5%{opacity:0;transform:scale(.8);animation-timing-function:cubic-bezier(.16,1,.3,1)}26.875%,82.5%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
/* DCC f07 the hexagon: rings and names out 0 to 0.5 s; the pieces out 0.5 to 2.0, back 4.0 to 5.5; rings and names in 5.5 to 6.2 */
.dcc-hx-p{animation:dcc-hx-p 7s linear infinite}@keyframes dcc-hx-p{0%,7.143%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}28.571%,57.143%{transform:translate(var(--dx),var(--dy));animation-timing-function:cubic-bezier(.65,0,.35,1)}78.571%,100%{transform:none}}
.dcc-hx-rest{animation:dcc-hx-rest 7s linear infinite}@keyframes dcc-hx-rest{0%{opacity:1}7.143%,78.571%{opacity:0}88.571%,100%{opacity:1}}
/* DCC f08 the rings: 6 % left and back over 10 s */
.dcc-rg-badge{position:absolute;width:9cqw;left:45.5cqw;top:5cqw}
.dcc-rg-drift{animation:dcc-rg 10s ease-in-out infinite}@keyframes dcc-rg{0%,100%{transform:none}50%{transform:translateX(-72px)}}
/* DCC f09 Orbitron: the light runs through the cells 0.2 s each from 0 s; the weight steps every 1.8 s, back to Regular at 7.2 */
.dcc-orbitron{font-family:'DCC Orbitron',var(--display);color:#1D2B3C}
.dcc-or-side{position:absolute;left:6cqw;top:6.5cqw;display:flex;flex-direction:column;align-items:flex-start;gap:2.3cqw}
.dcc-or-h1{font-weight:900;font-size:2.6cqw;letter-spacing:.02em}
.dcc-or-h2{font-weight:700;font-size:2.9cqw;margin-bottom:1.2cqw}.dcc-or-h2 b,.dcc-or-n b{font-weight:inherit;color:#2F9CC8}
.dcc-or-n{display:block;width:27cqw;box-sizing:border-box;padding:.8cqw 0;text-align:center;border:.18cqw solid #FF6B00;font-size:1.8cqw;letter-spacing:.02em;line-height:1.2}
.dcc-or-n0{font-weight:400;background:#FF6B00;color:#fff}.dcc-or-n0 b{color:#fff}.dcc-or-n1{font-weight:500}.dcc-or-n2{font-weight:700}.dcc-or-n3{font-weight:900}
.dcc-or-grid{position:absolute;left:50cqw;top:4.8cqw;display:grid;grid-template-columns:repeat(6,5.6cqw);grid-auto-rows:5cqw;gap:1.3cqw;font-size:3cqw;font-weight:400;line-height:1}
.dcc-or-c{--g:#1D2B3C;display:flex;align-items:center;justify-content:center;border:.12cqw dashed #9AA3AD;color:var(--g)}.dcc-or-fig{--g:#E0600A}
.dcc-or-c{animation:dcc-or-c 8s linear infinite;animation-delay:calc(var(--i) * .2s)}
@keyframes dcc-or-c{0%,2.5%{background:#FF6B00;color:#fff;border-color:#FF6B00}5.625%,100%{background:rgba(255,107,0,0);color:var(--g);border-color:#9AA3AD}}
.dcc-or-grid{animation:dcc-or-wt 8s step-end infinite}@keyframes dcc-or-wt{0%{font-weight:400}22.5%{font-weight:500}45%{font-weight:700}67.5%{font-weight:900}90%,100%{font-weight:400}}
.dcc-or-n0{animation:dcc-or-n0 8s step-end infinite}@keyframes dcc-or-n0{0%{background:#FF6B00;color:#fff}22.5%{background:rgba(255,107,0,0);color:#1D2B3C}90%,100%{background:#FF6B00;color:#fff}}
.dcc-or-n0 b{animation:dcc-or-n0b 8s step-end infinite}@keyframes dcc-or-n0b{0%{color:#fff}22.5%{color:#2F9CC8}90%,100%{color:#fff}}
.dcc-or-n1{animation:dcc-or-n1 8s step-end infinite}@keyframes dcc-or-n1{0%{background:rgba(255,107,0,0);color:#1D2B3C}22.5%{background:#FF6B00;color:#fff}45%,100%{background:rgba(255,107,0,0);color:#1D2B3C}}
.dcc-or-n1 b{animation:dcc-or-n1b 8s step-end infinite}@keyframes dcc-or-n1b{0%{color:#2F9CC8}22.5%{color:#fff}45%,100%{color:#2F9CC8}}
.dcc-or-n2{animation:dcc-or-n2 8s step-end infinite}@keyframes dcc-or-n2{0%{background:rgba(255,107,0,0);color:#1D2B3C}45%{background:#FF6B00;color:#fff}67.5%,100%{background:rgba(255,107,0,0);color:#1D2B3C}}
.dcc-or-n2 b{animation:dcc-or-n2b 8s step-end infinite}@keyframes dcc-or-n2b{0%{color:#2F9CC8}45%{color:#fff}67.5%,100%{color:#2F9CC8}}
.dcc-or-n3{animation:dcc-or-n3 8s step-end infinite}@keyframes dcc-or-n3{0%{background:rgba(255,107,0,0);color:#1D2B3C}67.5%{background:#FF6B00;color:#fff}90%,100%{background:rgba(255,107,0,0);color:#1D2B3C}}
.dcc-or-n3 b{animation:dcc-or-n3b 8s step-end infinite}@keyframes dcc-or-n3b{0%{color:#2F9CC8}67.5%{color:#fff}90%,100%{color:#2F9CC8}}
/* DCC f15 the two lines: DUBAI on navy 0 to 4 s, CHAMPIONSHIP on blue 4 to 8, both on orange 8 to 9; each travels 10 % left */
.dcc-lines text{font-family:'DCC Orbitron',var(--display);font-weight:900}.dcc-ln-b,.dcc-ln-c{opacity:0}
.dcc-ln-b{animation:dcc-ln-b 9s step-end infinite}@keyframes dcc-ln-b{0%{opacity:0}44.444%{opacity:1}88.889%,100%{opacity:0}}
.dcc-ln-c{animation:dcc-ln-c 9s step-end infinite}@keyframes dcc-ln-c{0%{opacity:0}88.889%,100%{opacity:1}}
.dcc-ln-a .dcc-ln-move{animation:dcc-ln-a 9s linear infinite}@keyframes dcc-ln-a{0%{transform:none}44.444%,100%{transform:translateX(-160px)}}
.dcc-ln-b .dcc-ln-move{animation:dcc-ln-bm 9s linear infinite}@keyframes dcc-ln-bm{0%,44.444%{transform:none}88.889%,100%{transform:translateX(-160px)}}
/* DCC f16 four days: 12, 13, 14, 15, 1.5 s each, crossfading 0.2 s; 15 holds to the loop */
.dcc-dy-badge{position:absolute;width:9cqw;left:45.5cqw;top:4.5cqw}
.dcc-dy-nums{position:absolute;left:0;right:0;top:18cqw;height:38cqw}
.dcc-dy-n{position:absolute;inset:0;text-align:center;font-family:'DCC Orbitron',var(--display);font-weight:900;font-size:38cqw;line-height:1;color:#fff;opacity:0}.dcc-dy-15{opacity:1}
.dcc-dy-month{position:absolute;left:0;right:0;top:59cqw;margin:0;text-align:center;font-family:'DCC Orbitron',var(--display);font-weight:400;font-size:4.2cqw;letter-spacing:.35em;text-indent:.35em;color:#fff}
.dcc-dy-12{animation:dcc-dy-12 7s linear infinite}@keyframes dcc-dy-12{0%,21.429%{opacity:1}24.286%,97.143%{opacity:0}100%{opacity:1}}
.dcc-dy-13{animation:dcc-dy-13 7s linear infinite}@keyframes dcc-dy-13{0%,21.429%{opacity:0}24.286%,42.857%{opacity:1}45.714%,100%{opacity:0}}
.dcc-dy-14{animation:dcc-dy-14 7s linear infinite}@keyframes dcc-dy-14{0%,42.857%{opacity:0}45.714%,64.286%{opacity:1}67.143%,100%{opacity:0}}
.dcc-dy-15{animation:dcc-dy-15 7s linear infinite}@keyframes dcc-dy-15{0%,64.286%{opacity:0}67.143%,97.143%{opacity:1}100%{opacity:0}}
/* DCC f17 on white */
.dcc-wh-b{position:absolute;width:38cqw;left:31cqw;top:16.4cqw}
/* RR f12 lights down: purple 0.8 to 2.0 s; the beam swings 1.6 to 3.4; it opens 3.4 to 4.0; hold; lights up 7.8 to 9.0 */
.rc-h-dark{animation:rc-h-dark 9s linear infinite}@keyframes rc-h-dark{0%,8.889%{opacity:0;animation-timing-function:ease-in-out}22.222%,86.667%{opacity:1;animation-timing-function:ease-in-out}100%{opacity:0}}
.rc-h-beam{transform-box:view-box;transform-origin:0 450px;animation:rc-h-beam 9s linear infinite}@keyframes rc-h-beam{0%,16.667%{opacity:0;transform:rotate(20deg)}17.778%{opacity:0;transform:rotate(20deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}21.111%{opacity:1;transform:rotate(15deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}37.778%,100%{opacity:1;transform:none}}
.rc-h-light{opacity:0;animation:rc-h-light 9s linear infinite}@keyframes rc-h-light{0%,37.778%{opacity:1}44.444%,100%{opacity:0}}
.rc-h-open{animation:rc-h-open 9s linear infinite}@keyframes rc-h-open{0%,37.778%{opacity:0;animation-timing-function:ease-in}44.444%,100%{opacity:1}}
.rc-h-r{animation:rc-h-r 9s linear infinite}@keyframes rc-h-r{0%,86.667%{opacity:1}100%{opacity:0}}
/* RR f01 the lines: one word every 0.35 s, 0.8 s between lines; hold to 9.0 s; fade */
.rc-ln-text{position:absolute;left:12cqw;right:9cqw;top:8cqw;margin:0;font-family:'RC Bebas',var(--display);font-size:7.2cqw;line-height:1.02;color:#fff}
.rc-ln-l{display:block;margin-bottom:2.4cqw}
.rc-ln-r{position:absolute;left:12cqw;top:62cqw;width:8cqw}
.rc-ln-w0{animation:rc-ln-w0 10s linear infinite}@keyframes rc-ln-w0{0%,4%{opacity:0}5.5%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w1{animation:rc-ln-w1 10s linear infinite}@keyframes rc-ln-w1{0%,7.5%{opacity:0}9%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w2{animation:rc-ln-w2 10s linear infinite}@keyframes rc-ln-w2{0%,11%{opacity:0}12.5%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w3{animation:rc-ln-w3 10s linear infinite}@keyframes rc-ln-w3{0%,14.5%{opacity:0}16%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w4{animation:rc-ln-w4 10s linear infinite}@keyframes rc-ln-w4{0%,26%{opacity:0}27.5%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w5{animation:rc-ln-w5 10s linear infinite}@keyframes rc-ln-w5{0%,29.5%{opacity:0}31%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w6{animation:rc-ln-w6 10s linear infinite}@keyframes rc-ln-w6{0%,33%{opacity:0}34.5%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w7{animation:rc-ln-w7 10s linear infinite}@keyframes rc-ln-w7{0%,44.5%{opacity:0}46%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w8{animation:rc-ln-w8 10s linear infinite}@keyframes rc-ln-w8{0%,48%{opacity:0}49.5%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w9{animation:rc-ln-w9 10s linear infinite}@keyframes rc-ln-w9{0%,51.5%{opacity:0}53%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w10{animation:rc-ln-w10 10s linear infinite}@keyframes rc-ln-w10{0%,55%{opacity:0}56.5%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w11{animation:rc-ln-w11 10s linear infinite}@keyframes rc-ln-w11{0%,58.5%{opacity:0}60%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w12{animation:rc-ln-w12 10s linear infinite}@keyframes rc-ln-w12{0%,62%{opacity:0}63.5%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w13{animation:rc-ln-w13 10s linear infinite}@keyframes rc-ln-w13{0%,65.5%{opacity:0}67%,90%{opacity:1}96%{opacity:0}}
.rc-ln-w14{animation:rc-ln-w14 10s linear infinite}@keyframes rc-ln-w14{0%,69%{opacity:0}70.5%,90%{opacity:1}96%{opacity:0}}
/* RR f02 (and f14) the R, large: 5 % down and right and back over 10 s; f13 the other way */
.rc-bg-drift{animation:rc-bg 10s ease-in-out infinite}@keyframes rc-bg{0%,100%{transform:none}50%{transform:translate(60px,45px)}}
.rr-bg-drift-back{animation:rr-bg 10s ease-in-out infinite}@keyframes rr-bg{0%,100%{transform:none}50%{transform:translate(-60px,-45px)}}
/* RP f02, RR f03 the palettes: the fields 0.25 s apart from 0.3 s; hold; fall together */
.rc-pl{position:absolute;inset:0;display:flex}
.rp-pl-0{animation:rp-pl-0 7s linear infinite}@keyframes rp-pl-0{0%,4.286%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}12.857%,84.286%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}92.857%,100%{transform:scaleY(0)}}.rp-pl-0 span{animation:rp-pl-0l 7s linear infinite}@keyframes rp-pl-0l{0%,11.429%{opacity:0}15.714%,82.857%{opacity:1}85.714%,100%{opacity:0}}
.rp-pl-1{animation:rp-pl-1 7s linear infinite}@keyframes rp-pl-1{0%,7.857%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}16.429%,84.286%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}92.857%,100%{transform:scaleY(0)}}.rp-pl-1 span{animation:rp-pl-1l 7s linear infinite}@keyframes rp-pl-1l{0%,15%{opacity:0}19.286%,82.857%{opacity:1}85.714%,100%{opacity:0}}
.rp-pl-2{animation:rp-pl-2 7s linear infinite}@keyframes rp-pl-2{0%,11.429%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}20%,84.286%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}92.857%,100%{transform:scaleY(0)}}.rp-pl-2 span{animation:rp-pl-2l 7s linear infinite}@keyframes rp-pl-2l{0%,18.571%{opacity:0}22.857%,82.857%{opacity:1}85.714%,100%{opacity:0}}
.rp-pl-3{animation:rp-pl-3 7s linear infinite}@keyframes rp-pl-3{0%,15%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}23.571%,84.286%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}92.857%,100%{transform:scaleY(0)}}.rp-pl-3 span{animation:rp-pl-3l 7s linear infinite}@keyframes rp-pl-3l{0%,22.143%{opacity:0}26.429%,82.857%{opacity:1}85.714%,100%{opacity:0}}
.rr-pl-0{animation:rr-pl-0 8s linear infinite}@keyframes rr-pl-0{0%,3.75%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}11.25%,86.25%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}93.75%,100%{transform:scaleY(0)}}.rr-pl-0 span{animation:rr-pl-0l 8s linear infinite}@keyframes rr-pl-0l{0%,10%{opacity:0}13.75%,85%{opacity:1}87.5%,100%{opacity:0}}
.rr-pl-1{animation:rr-pl-1 8s linear infinite}@keyframes rr-pl-1{0%,6.875%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}14.375%,86.25%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}93.75%,100%{transform:scaleY(0)}}.rr-pl-1 span{animation:rr-pl-1l 8s linear infinite}@keyframes rr-pl-1l{0%,13.125%{opacity:0}16.875%,85%{opacity:1}87.5%,100%{opacity:0}}
.rr-pl-2{animation:rr-pl-2 8s linear infinite}@keyframes rr-pl-2{0%,10%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}17.5%,86.25%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}93.75%,100%{transform:scaleY(0)}}.rr-pl-2 span{animation:rr-pl-2l 8s linear infinite}@keyframes rr-pl-2l{0%,16.25%{opacity:0}20%,85%{opacity:1}87.5%,100%{opacity:0}}
.rr-pl-3{animation:rr-pl-3 8s linear infinite}@keyframes rr-pl-3{0%,13.125%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}20.625%,86.25%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}93.75%,100%{transform:scaleY(0)}}.rr-pl-3 span{animation:rr-pl-3l 8s linear infinite}@keyframes rr-pl-3l{0%,19.375%{opacity:0}23.125%,85%{opacity:1}87.5%,100%{opacity:0}}
.rr-pl-4{animation:rr-pl-4 8s linear infinite}@keyframes rr-pl-4{0%,16.25%{transform:scaleY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}23.75%,86.25%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}93.75%,100%{transform:scaleY(0)}}.rr-pl-4 span{animation:rr-pl-4l 8s linear infinite}@keyframes rr-pl-4l{0%,22.5%{opacity:0}26.25%,85%{opacity:1}87.5%,100%{opacity:0}}
/* RP f13 the cloth: the band crosses 0 to 3 s; rest */
.rc-cl-r{position:absolute;width:35.93cqw;left:32.03cqw;top:15cqw}
.rc-cl-band{position:absolute;top:-25%;left:0;width:30cqw;height:150%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14) 50%,rgba(255,255,255,0));transform:translateX(-45cqw) rotate(12deg)}
.rc-cl-band{animation:rc-cl 7s linear infinite}@keyframes rc-cl{0%{transform:translateX(-45cqw) rotate(12deg);animation-timing-function:ease-in-out}42.857%,100%{transform:translateX(115cqw) rotate(12deg)}}
/* RR f00 three grounds: sky, pink at 2.5 s, green at 5.0; hard cuts */
.rc-grounds text{font-family:'RC Bebas',var(--display)}.rc-gr-pink,.rc-gr-green{opacity:0}
.rc-gr-pink{animation:rc-gr-pink 7.5s step-end infinite}@keyframes rc-gr-pink{0%{opacity:0}33.333%{opacity:1}66.667%,100%{opacity:0}}
.rc-gr-green{animation:rc-gr-green 7.5s step-end infinite}@keyframes rc-gr-green{0%{opacity:0}66.667%,100%{opacity:1}}
/* RP f00 the lamp: the dark ground to 1.0 s; the pool grows 1.0 to 3.2; hold; it fades 7.6 to 9.0 */
.rp-lp-pool{transform-box:view-box;transform-origin:1248px 162px;animation:rp-lp 9s linear infinite}@keyframes rp-lp{0%,11.111%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(.16,1,.3,1)}35.556%,84.444%{opacity:1;transform:none;animation-timing-function:ease-in-out}100%{opacity:0;transform:none}}
/* RP f01 in tone: the band crosses 0 to 3 s; rest 5 s */
.rp-tn-r{position:absolute;width:35.93cqw;left:32.03cqw;top:12cqw}
.rp-tn-band{position:absolute;top:-25%;left:0;width:30cqw;height:150%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12) 50%,rgba(255,255,255,0));transform:translateX(-45cqw) rotate(12deg)}
.rp-tn-band{animation:rp-tn 8s linear infinite}@keyframes rp-tn{0%{transform:translateX(-45cqw) rotate(12deg);animation-timing-function:ease-in-out}37.5%,100%{transform:translateX(115cqw) rotate(12deg)}}
/* RP f14 the spine: the highlight runs down the band 0 to 2 s (linear), catching the screws at 0.53 and 1.47 s; rest 4 s */
.rp-sp-hl{animation:rp-sp-hl 6s linear infinite}@keyframes rp-sp-hl{0%{transform:none}33.333%,100%{transform:translateY(1140px)}}
.rp-sp-glint{opacity:0}
.rp-sp-s0 .rp-sp-glint{animation:rp-sp-g0 6s linear infinite}@keyframes rp-sp-g0{0%,5.5%{opacity:0}8.833%{opacity:.35}13.833%,100%{opacity:0}}
.rp-sp-s1 .rp-sp-glint{animation:rp-sp-g1 6s linear infinite}@keyframes rp-sp-g1{0%,21.167%{opacity:0}24.5%{opacity:.35}29.5%,100%{opacity:0}}
/* RR f11 the card: it turns to -8 degrees and back 0 to 5 s; the band crosses 0.5 to 4.5; rest 2 s */
.rr-cd-card{transform-box:view-box;transform-origin:600px 450px;animation:rr-cd 7s linear infinite}@keyframes rr-cd{0%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}35.714%{transform:rotate(-8deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}71.429%,100%{transform:none}}
.rr-cd-band{animation:rr-cd-b 7s linear infinite}@keyframes rr-cd-b{0%,7.143%{transform:translateX(0);animation-timing-function:ease-in-out}64.286%,100%{transform:translateX(970px)}}
/* RR f15 three posters: each fades up 0.3 s after the one before from 0.3 s; hold; all fade 6.2 to 6.6 */
.rr-ps-0{animation:rr-ps-0 7s linear infinite}@keyframes rr-ps-0{0%,4.286%{opacity:0}10%,88.571%{opacity:1}94.286%,100%{opacity:0}}
.rr-ps-1{animation:rr-ps-1 7s linear infinite}@keyframes rr-ps-1{0%,8.571%{opacity:0}14.286%,88.571%{opacity:1}94.286%,100%{opacity:0}}
.rr-ps-2{animation:rr-ps-2 7s linear infinite}@keyframes rr-ps-2{0%,12.857%{opacity:0}18.571%,88.571%{opacity:1}94.286%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dcc,.dcc *,.rc,.rc *,.rp,.rp *,.rr,.rr *{animation:none !important}}
/* ==================== END: Dubai CrossFit Championship, Reel Cinemas ==================== */

/* ---------- the Hypereon and Healthagon case frames (assets/plan/hypereon-grid.md, healthagon-grid.md; built 28 Sep) ----------
   Prefixes .hy and .hg. Each identity is traced (assets/work/<slug>/src) and placed whole: its parts are defined once a
   page (.tr-defs) and shown by <use>, moved only by opacity and translate (a scale only for the whole name or mark),
   never redrawn. The beats are keyframes build.py writes from seconds beside each frame's geometry (_run), inline with
   the frame; this block holds the layout and the reduced-motion rule. Every element's resting state is the finished
   frame, so reduced motion shows the poster. The client's palette lives inside the frames only. */
.tr-defs{position:absolute;width:0;height:0;overflow:hidden}
.hy,.hg{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#fff}
.hy .hy-full,.hg .hg-full{position:absolute;inset:0;display:block;width:100%;height:100%}
.hy-onwhite{box-shadow:inset 0 0 0 1px rgba(30,36,36,.1)}
.hg-onwhite{box-shadow:inset 0 0 0 1px rgba(78,78,78,.12)}
.seq > .frame > .hy,.seq > .frame > .hg{aspect-ratio:4/3}
.seq > .frame:nth-child(3n) > .hy,.seq > .frame:nth-child(3n) > .hg{aspect-ratio:16/9}
.case-hero .hy,.case-hero .hg{aspect-ratio:16/9}
.seq-hy > :last-child:nth-child(3n+1),.seq-hg > :last-child:nth-child(3n+1){grid-column:1/-1}
.seq-hg > .frame:last-child:nth-child(3n+1) > .hg,.seq-hg > .frame:last-child:nth-child(3n+1) > .case-still{aspect-ratio:16/9}
.hy-h-wipe,.hy-pl-f,.hg-pl-c,.hg-co-f{transform-box:fill-box;transform-origin:0 50%}
.hy-pl-f,.hy-or-f,.hg-pl-c{transform-origin:50% 100%}
.hy-se-m0,.hy-se-m1,.hy-se-m2,.hy-se-m3,.hy-se-m4,.hg-se-m0,.hg-se-m1,.hg-se-m2,.hg-se-m3,.hg-se-m4{transform-box:fill-box;transform-origin:50% 50%}
.hy-or-f{transform-box:fill-box}
.hy-cy1,.hy-cy2,.hy-cy3,.hg-cy1,.hg-cy2,.hg-cy3,.hy-sm1,.hy-sm2,.hy-sm3,.hy-sm4,.hy-or-w,.hy-sx-o,.hy-sx-b,.hg-sx-o,.hg-sx-b{opacity:0}
.hy-sx-b0,.hg-sx-b0,.hy-or-w{opacity:1}
.hg-nm-x{opacity:0}
.hg-h-hx{animation:hg-h-hx 10s linear infinite backwards}
@media (prefers-reduced-motion:reduce){.hy,.hy *,.hg,.hg *{animation:none !important}}
/* ---- Alia Bin Omair and Manaban Oud: the hero films from the approved photographs (build.py, ab_ and mo_; beats inline) ---- */
.ab,.mo{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.ab .am-full,.mo .am-full{position:absolute;inset:0;display:block;width:100%;height:100%}
.ab [class^="ab-c"]{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){.ab,.ab *,.mo,.mo *{animation:none !important}}
/* ---- the moving covers on Work and home (assets/covers.js; covers-and-heroes.md, 1.3): the still sizes the box, the loop
   lies over it and shows from its first painted frame; a photograph cover crossfades into its film ---- */
.cover{position:relative}
.cover-vid{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s linear;pointer-events:none}
.cover[data-fade="cross"] .cover-vid{transition-duration:.6s}
.cover.is-playing .cover-vid{opacity:1}
.glass-card .cover-vid{border-radius:12px}
/* the cookie choice (assets/consent.js): a small bar, bottom left, in the site's glass */
.consent{position:fixed;left:16px;bottom:16px;z-index:80;max-width:420px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(20,20,20,.08);box-shadow:0 18px 44px -24px rgba(91,110,225,.55);font-size:15px;line-height:1.45}
.consent-row{display:flex;gap:10px;margin-top:14px}
@media (max-width:520px){.consent{left:10px;right:10px;bottom:10px;max-width:none}}
.foot-cookies{color:inherit;text-decoration:underline;text-underline-offset:3px}