/* Every stylesheet, in cascade order. The order matters: later files win ties.
   Each section's responsive rules sit at the end of its own file.
   tests/css-order.mjs proves this order gives the same cascade as the original single stylesheet. *//* Rules the published page received from the artifact viewer that hosted it, kept so the site renders the same.
   Anchors clear a notch, images never overflow their box, and anything with the hidden attribute is really hidden
   (the case sheet and the industries menu are shown and hidden with el.hidden, which depends on this rule).
   The viewer's :root safe area padding is not kept, see docs/13-decisions.md. */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
/* Design tokens. The palette, the three section themes (ink, paper, red), spacing and type stacks.
   Every colour on the site comes from here. See docs/02-brand-and-copy.md. */

:root{
  --ink:#121114; --paper:#F3F1EC; --red:#F9423A; --red-deep:#C9261F; --graphite:#2A282D; --stone:#6B676D; --mist:#E2DED6; --white:#FFFFFF;
  --bg:var(--ink); --fg:var(--paper); --fg-2:rgba(243,241,236,.62); --fg-3:rgba(243,241,236,.36); --line:rgba(243,241,236,.14); --glass:rgba(18,17,20,.58);
  --pad:clamp(16px,3.2vw,48px);
  --gap-s:clamp(150px,22vh,230px);
  --gap-h:calc(var(--gap-s) / 2);
  --display:'Epilogue','Arial Black','Helvetica Neue',Arial,sans-serif;
  --text:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --dotc:var(--red);
  color-scheme:dark;
}
body[data-bg="paper"]{--bg:var(--paper);--fg:var(--ink);--fg-2:rgba(18,17,20,.62);--fg-3:rgba(18,17,20,.38);--line:rgba(18,17,20,.13);--glass:rgba(243,241,236,.7)}
body[data-bg="red"]{--bg:var(--red);--fg:var(--white);--fg-2:rgba(255,255,255,.8);--fg-3:rgba(255,255,255,.55);--line:rgba(255,255,255,.3);--glass:rgba(249,66,58,.62);--dotc:var(--ink)}
/* The first keyboard stop bypasses the shared frame on every document. */
.skip-link{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:var(--pad);z-index:12000;max-width:calc(100% - 2 * var(--pad));padding:14px 20px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 15px/1.3 var(--text);text-decoration:none;transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 16px))}
.skip-link:focus{transform:none;outline:3px solid var(--red);outline-offset:4px}
#main-content{scroll-margin-top:96px}
#main-content:focus{outline:none}
@media print{
  .skip-link{display:none}
}
/* Base elements and shared pieces: box model, body, links, buttons, labels, section heads,
   the .btn pill, the line reveal wrappers and the big .h2 headline. */

*,*::before,*::after{box-sizing:border-box}
/* Keep every text underline continuous, including beneath letters with descenders. */
html{-webkit-text-size-adjust:100%;overflow-x:clip;text-decoration-skip-ink:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;transition:background-color .8s var(--e-out),color .8s var(--e-out)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--red);color:var(--white)}
.nw{white-space:nowrap}
.lbl{font-family:var(--text);font-size:15px;line-height:1.3;font-weight:500;letter-spacing:0;color:var(--fg-2);transition:color .8s var(--e-out)}
/* Breadcrumb links can have taller touch targets than the current page. Align their text, not their boxes. */
:is(.pj-crumbs,.ar-crumbs,.iy-crumbs,.se-crumbs,.ro-crumbs,.lx-crumbs,.expanded-crumbs) ol{align-items:baseline}
/* Section openings rely on their headline and spacing. Keep navigation and preview notes in these rows,
   while removing the repeated label, folio and rule. Print sheets retain their running headers. */
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sec-h:not(.dk-h){padding-top:0;border-top:0}
.sec-h:not(.dk-h):not(:has(a,button,[data-pv-tag],.em-name,.section-detail)){display:contents}
.sec-h:not(.dk-h)>.lbl:not(a,button,nav,h2,h3,.em-name,.section-detail):not(:has(a,button)),.sec-h:not(.dk-h)>span[aria-hidden="true"]:not(.section-detail),.sec-h>.se-ruler{display:none}
/* These headings name sections for assistive technology even when the visual label is redundant. */
.sec-h:not(.dk-h)>:is(h2,h3):not(.em-name){position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.sec-c{font-variant-numeric:tabular-nums}
.tone-2{color:var(--fg-3);transition:color .8s var(--e-out)}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;text-decoration:none;font-weight:600;white-space:nowrap;transition:background-color .35s var(--e-out),color .35s var(--e-out),transform .35s var(--e-out)}
.line{display:inline-block;overflow:hidden;padding:.08em .02em .04em;margin:-.08em -.02em -.04em;vertical-align:top}
.line.open{overflow:visible}
.line-in{display:inline-block;will-change:transform}
/* shared */
.sec{position:relative;padding-inline:var(--pad)}
.h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(52px,9vw,164px);line-height:.86;letter-spacing:-.052em;text-wrap:balance}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .lbl{font-size:14px}
}
/* Fixed layers over the page: the WebGL canvas, the film grain, the red full stop anchors (.dot-anchor)
   that every headline ends with, and the layer that draws the landing rings. */

/* layers */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;display:block}
.grain{position:fixed;inset:-100px;z-index:70;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-30px,20px)}40%{transform:translate(25px,-35px)}60%{transform:translate(-15px,40px)}80%{transform:translate(35px,10px)}100%{transform:translate(0,0)}}
/* every headline ends with the red full stop */
.dot-anchor{display:inline-block;position:relative;width:.2em;height:.2em;margin-left:.04em;vertical-align:baseline}
.dot-anchor::before,.dot-anchor::after{content:"";position:absolute;inset:0;border-radius:50%}
.dot-anchor::before{background:var(--dotc);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1),background-color .6s}
.dot-anchor.printed::before{transform:scale(.96)}
.dot-anchor::after{box-shadow:0 0 0 2px var(--red);opacity:0}
/* landing rings are drawn in a fixed layer above the sections (see .rp-layer) */
.rp-layer{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:visible}
.rp-layer i{position:absolute;left:0;top:0;border-radius:50%;box-shadow:0 0 0 2px var(--red);opacity:0;will-change:transform,opacity}
@keyframes ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.6);opacity:0}}
.no-gl .dot-anchor::before{transform:scale(1)}

/* ---------- responsive ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
}
/* Loader: a circle of slashes that fills with progress, then becomes the dot (Active Theory). */

/* loader: Active Theory's circle of slashes, filling with progress */
.loader{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 22px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 22px)}
.loader-top{display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative;z-index:2}
.loader-top svg{width:148px;height:auto;display:block;color:var(--paper);--dotc:var(--red)}
.loader-top .lbl{color:rgba(243,241,236,.62)}
.ld-circle{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;font:13px/13.75px var(--mono);letter-spacing:0;color:var(--red);-webkit-mask-image:radial-gradient(circle,#000 49%,transparent 50%);mask-image:radial-gradient(circle,#000 49%,transparent 50%);overflow:hidden;white-space:pre}
.ld-base,.ld-fill{position:absolute;left:-7px;top:0;width:240px;height:220px;overflow:hidden}
.ld-base{opacity:.26}
.ld-fill{clip-path:inset(100% 0 0 0)}
.ld-num{position:absolute;left:50%;top:calc(50% + 134px);transform:translateX(-50%);font:600 13px/1 var(--mono);letter-spacing:.24em;color:rgba(243,241,236,.8)}
.loader-line{position:absolute;left:var(--pad);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);margin:0;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.02em;color:rgba(243,241,236,.62)}
html:not(.js) .loader,.rm .loader,.no-libs .loader{display:none}
/* Nav bar: logo slot, the Tirana clock, links, the Start a project pill and the phone menu button. */

/* nav */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 -1px 0 var(--line);transition:opacity .35s}
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:20px;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--pad) 18px;pointer-events:none;transition:padding .5s var(--e-out),opacity .45s,visibility 0s}
/* Keep contrast tied to fixed section backgrounds and to the ink mobile menu sheet. */
.nav[data-bg="paper"]{--bg:var(--paper);--fg:var(--ink);--fg-2:rgba(18,17,20,.62);--fg-3:rgba(18,17,20,.38);--line:rgba(18,17,20,.13);--glass:rgba(243,241,236,.7)}
.nav[data-bg="red"]{--bg:var(--red);--fg:var(--white);--fg-2:rgba(255,255,255,.8);--fg-3:rgba(255,255,255,.55);--line:rgba(255,255,255,.3);--glass:rgba(249,66,58,.62);--dotc:var(--ink)}
.nav[data-bg="ink"],.menu-open .nav{--bg:var(--ink);--fg:var(--paper);--fg-2:rgba(243,241,236,.62);--fg-3:rgba(243,241,236,.36);--line:rgba(243,241,236,.14);--glass:rgba(18,17,20,.58);--dotc:var(--red)}
.menu-open .nav{background:var(--ink)}
/* The passing wordmark stays visible over every palette, including Contact and the red footer. */
.nav>*{pointer-events:auto}
.nav-logo{position:relative;display:block;width:154px;aspect-ratio:6916.95/1014.25;transition:width .5s var(--e-out)}
.nav-logo::after{content:"";position:absolute;inset:-13px -10px}
.nav-clock{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .8s var(--e-out),opacity .4s}
.nav-clock .clock{color:var(--fg)}
/* A readable live dial, with a red seconds hand that ticks on the second. */
.aclock{--ac-accent:var(--red);width:28px;height:28px;flex:none;color:var(--fg)}
.ac-face{fill:none;stroke:currentColor;stroke-width:.8;opacity:.55}
.ac-index,.ac-ticks{fill:none;stroke:currentColor;stroke-linecap:round}
.ac-index{stroke-width:1;opacity:.8}
.ac-ticks{stroke-width:.75;opacity:.45}
.ac-h,.ac-m,.ac-s{transform-box:view-box;transform-origin:0 0;stroke-linecap:round}
.ac-h,.ac-m{stroke:currentColor}
.ac-h{stroke-width:1.7}
.ac-m{stroke-width:1.15}
.ac-s{stroke:var(--ac-accent);stroke-width:.65}
.ac-pin{fill:var(--ac-accent)}
:is(.nav[data-bg="red"],body[data-bg="red"] .nav:not([data-bg])) .nav-clock .aclock{--ac-accent:var(--ink)}
.rm .ac-s{display:none}
.live{width:7px;height:7px;border-radius:50%;background:var(--red);animation:live 2s infinite}
:is(.nav[data-bg="red"],body[data-bg="red"] .nav:not([data-bg])) .live{background:var(--white)}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(249,66,58,.55)}70%{box-shadow:0 0 0 8px rgba(249,66,58,0)}100%{box-shadow:0 0 0 0 rgba(249,66,58,0)}}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;box-shadow:inset 0 0 0 1px transparent;transition:background-color .6s var(--e-out),box-shadow .6s var(--e-out)}
.nav.is-compact{padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
.nav.is-compact .nav-logo{width:128px}
.nav.is-compact .nav-clock{opacity:0;pointer-events:none}
.nav.is-compact .nav-right{background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.nav-links{display:flex;gap:2px}
.nav-links a{display:inline-block;padding:9px 14px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;color:var(--fg);transition:background-color .3s,color .8s var(--e-out)}
.nav-links a:hover{background:var(--line)}
.btn-nav{padding:10px 18px;font-size:15px;background:var(--fg);color:var(--bg)}
.btn-nav:hover{background:var(--red);color:var(--white)}
:is(.nav[data-bg="red"],body[data-bg="red"] .nav:not([data-bg])) .btn-nav:hover{background:var(--ink)}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-size:15px;font-weight:600;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--fg)}
.menu-btn i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red)}
.scr{display:inline-block}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .nav-clock{display:none}
}
@media (max-width:760px){
  .nav-right{display:none}
  .menu-btn{display:inline-flex}
  .nav-logo,.nav.is-compact .nav-logo{width:124px}
  .nav.is-compact::before{opacity:0}
  /* Only the menu steps aside on downward scroll, keeping the logo and its home link in place. */
  .menu-btn{transition:translate .5s var(--e-out)}
  .nav-hide .menu-btn{translate:0 -140px}
  .menu-open .menu-btn,.nav-hide .menu-btn:focus-visible{translate:0}
}
@media (prefers-reduced-motion:reduce){
  .ac-s{display:none}
  .live{animation:none}
}
/* Phone menu: the full screen ink sheet that slides down from the top. */

.mmenu{position:fixed;inset:0;z-index:39;background:var(--ink);color:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 96px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 28px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow-y:auto;overscroll-behavior-y:contain;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e-io);visibility:hidden;scroll-padding-top:96px}
.menu-open .mmenu{clip-path:inset(0 0 0 0);visibility:visible}
.mmenu nav{display:flex;flex-direction:column;flex:none}
.mmenu nav a{font-family:var(--display);font-weight:800;font-size:clamp(44px,13vw,72px);letter-spacing:-.045em;line-height:1;text-decoration:none;padding:6px 0}
.mmenu nav a::after{content:"";display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--red);margin-left:.04em}
.mmenu-foot{display:flex;flex-direction:column;flex:none;gap:6px;color:rgba(243,241,236,.62);font-size:15px}
.mmenu-clock{display:flex;align-items:center;gap:10px;margin-bottom:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mmenu-clock .aclock,.mmenu-clock .clock{color:var(--paper)}
@media (prefers-reduced-motion:reduce){
  .mmenu{transition:none}
}
/* The wordmark receives the dot in the hero, then docks into the nav. Once it starts docking, and from the start
   on inner pages, white letters invert the pictures and type passing beneath them (DixonBaxi, docs/17). Its red
   full stop is drawn separately so the blend cannot turn it cyan. */

/* the wordmark that docks into the nav */
.mark{position:fixed;left:0;top:0;z-index:41;pointer-events:none;transform-origin:0 0;color:var(--fg);--dotc:transparent;will-change:transform;transition:color .8s var(--e-out),opacity .45s}
.mark-in{position:relative}
.mark svg,.mark-stop svg{display:block;width:100%;height:auto}
.mark.has-print{--dotc:var(--red)}
body[data-bg="red"] .mark.has-print{--dotc:var(--ink)}
.mark-dot{position:absolute;left:98.4945%;top:68.7119%;width:3.0112%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%}
.mark-dot::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--red);opacity:0}
.no-gl .mark,.rm .mark{--dotc:var(--red)}

/* The homepage's large hero stays in its ordinary palette until mark.ts sets is-blended. Without JavaScript the
   logo is parked in the nav, so it uses the same blend as every inner page. */
.mark.is-blended,body:not(:has(.hero)) .mark,html:not(.js) .mark{color:var(--white);mix-blend-mode:difference;--dotc:transparent}
.mark-stop{position:fixed;left:0;top:0;z-index:42;display:none;pointer-events:none;transform-origin:0 0;color:transparent;--dotc:transparent;will-change:transform;transition:opacity .45s}
.mark.is-blended+.mark-stop,body:not(:has(.hero)) .mark-stop,html:not(.js) .mark-stop{display:block}
.mark.has-print+.mark-stop,.no-gl .mark-stop,.rm .mark-stop,html:not(.js) .mark-stop{--dotc:var(--red)}
body[data-bg="red"] .mark+.mark-stop{--dotc:var(--ink)}
body .mark+.mark-stop[data-nav-bg="red"]{--dotc:var(--ink)}
body .mark+.mark-stop[data-nav-bg="ink"],body .mark+.mark-stop[data-nav-bg="paper"]{--dotc:var(--red)}
/* The menu covers the WebGL dot, so print the docked logo's red stop above its ink sheet. */
.menu-open .mark-stop{display:block}
.menu-open body .mark+.mark-stop{--dotc:var(--red)}
html:not(.js) .mark,html:not(.js) .mark-stop{width:154px;transform:translate3d(var(--pad),calc(env(safe-area-inset-top,0px) + 33.34px),0)}

/* ---------- responsive ---------- */
@media (max-width:760px){
  html:not(.js) .mark,html:not(.js) .mark-stop{width:124px;transform:translate3d(var(--pad),calc(env(safe-area-inset-top,0px) + 30.53px),0)}
}
@media (forced-colors:active){
  .mark,.mark.is-blended,body:not(:has(.hero)) .mark,html:not(.js) .mark{color:CanvasText;mix-blend-mode:normal}
  /* This copy has transparent letters; keep them transparent when system contrast colours replace SVG fills. */
  .mark-stop{forced-color-adjust:none}
}
/* Hero: kicker, lede, services list, the headline "Ideas that land." and the orb where the dot lives. */

.hero{position:relative;height:100vh;height:100svh;min-height:560px;padding-inline:var(--pad)}
.hero-inner{position:relative;height:100%;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,28px);padding-top:calc(env(safe-area-inset-top,0px) + 108px);padding-bottom:clamp(16px,3vh,34px)}
.hero-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.hero-kicker{grid-column:1/span 3;margin:0;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.35}
.hero-kicker strong{font-weight:600}
.hero-kicker span:not(.lbl){color:var(--fg-2)}
.hero-lede{grid-column:4/span 3;margin:0;font-size:15px;line-height:1.5;color:var(--fg-2);max-width:34ch;padding-top:26px}
.hero-aside{grid-column:9/span 4;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:3px;font-size:15px;line-height:1.4;align-content:start}
.hero-aside .lbl{grid-column:1/-1;margin-bottom:8px}
.hero-aside a{justify-self:start;text-decoration:none}
.hero-mid{position:relative;flex:1;display:flex;align-items:flex-end}
.hero-title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(52px,8.4vw,156px);line-height:.86;letter-spacing:-.052em;position:relative;z-index:6}
.hero-title .row{display:block}
.hero-orb{position:absolute;left:70%;top:46%;width:clamp(190px,30vmin,420px);aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%}
.no-gl .hero-orb{background:radial-gradient(circle at 34% 28%,#ff9a90 0,#F9423A 42%,#a91d17 100%);box-shadow:0 40px 80px -30px rgba(249,66,58,.45)}
.hero-hint{position:absolute;left:100%;top:80%;margin-left:clamp(8px,1.6vw,30px);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--fg-2);white-space:nowrap}
.hero-hint .ring{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.hero-hint .ring::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--fg);animation:hintdrop 1.8s var(--e-io) infinite}
@keyframes hintdrop{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}70%{transform:translateY(6px);opacity:1}100%{transform:translateY(6px);opacity:0}}
.no-gl .hero-hint{display:none}
.mark-space{width:100%;aspect-ratio:6916.95/1014.25;flex:none}
/* reveal gates */
.js:not(.no-libs):not(.rm) .hero .line-in{transform:translateY(112%)}
.js:not(.no-libs):not(.rm) .hero .fade-in{opacity:0;transform:translateY(14px)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero-hint{left:auto;right:100%;top:50%;margin:0 12px 0 0;transform:translateY(-50%)}
  .hero-kicker{grid-column:1/span 5}
  .hero-lede{grid-column:6/span 5}
  .hero-aside{display:none}
}
@media (max-width:760px){
  .hero-inner{padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
  .hero-top{display:flex;flex-direction:column;gap:12px}
  .hero-kicker{font-size:14px}
  .hero-lede{font-size:14.5px;max-width:32ch;padding-top:0}
  .hero-title{font-size:clamp(52px,17vw,88px)}
  .hero-mid{align-items:flex-end}
  .hero-orb{left:70%;top:34%;width:min(40vw,190px)}
  .mark-space{width:calc(100% - 10px)}
}
/* short screens (a phone on its side): the hero fits, the reel fits, the shelf and the steps become simple lists */
@media (max-height:560px){
  .hero{min-height:0}
  .hero-inner{padding-top:calc(env(safe-area-inset-top,0px) + 70px);gap:8px}
  .hero-lede,.hero-aside{display:none}
  .hero-title{font-size:clamp(38px,12vh,64px)}
  .mark-space{width:62%}
  .hero-orb{top:40%;width:clamp(110px,34vh,190px)}
}
@media (prefers-reduced-motion:reduce){
  .hero-hint .ring::after{animation:none}
}
/* Studio statement: the word by word reveal, the inline pictograms (3D when WebGL is on) and the three facts. */

/* studio statement (Instrument word reveal, Locomotive inline pictograms) */
.statement{padding-block:clamp(130px,20vh,240px) max(24px,calc(var(--gap-s) - 18vh))}
.statement-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.statement-grid>.lbl{display:none}
.statement .lbl{grid-column:1/span 2;padding-top:.5em}
.statement-text{grid-column:3/span 10;margin:0;font-family:var(--display);font-weight:700;font-size:clamp(30px,4.35vw,74px);line-height:1.06;letter-spacing:-.038em;text-indent:1.6em}
.pg{display:inline-grid;place-items:center;width:.84em;height:.84em;border-radius:50%;box-shadow:inset 0 0 0 .055em currentColor;vertical-align:-.1em;text-indent:0}
.pg svg{width:.48em;height:.48em;display:block}
.pg-spark svg{animation:spin 9s linear infinite}
.pg-globe svg{animation:spin 18s linear infinite reverse}
.pg{-webkit-user-select:none;user-select:none}
.gl-pg .pg{width:1.02em;height:.7em;box-shadow:none;vertical-align:-.02em}
.gl-pg .pg svg{visibility:hidden}
@keyframes spin{to{transform:rotate(360deg)}}
.facts{grid-column:3/span 10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(64px,10vh,120px);border-top:1px solid var(--line);padding-top:26px}
.fact{display:flex;flex-direction:column;gap:10px}
.fact-num{font-family:var(--display);font-weight:800;font-size:clamp(56px,6vw,104px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.fact-num sup{font-size:.42em;vertical-align:top;position:relative;top:.12em;margin-left:.04em;color:var(--red-deep)}
.has-slime{display:inline-block;line-height:0}
.slime-plus{display:block;width:auto;height:1.14em;transform-origin:50% 100%;-webkit-user-select:none;user-select:none;pointer-events:none}
.fact-num .has-slime{top:.1em;margin-left:.16em}
.has-slime.wait .slime-plus{opacity:0}
.has-slime.land .slime-plus{animation:plusLand .8s cubic-bezier(.3,1.3,.5,1) both}
@keyframes plusLand{0%{opacity:0;transform:translateY(-1.1em) scale(.55,.7)}42%{opacity:1;transform:translateY(0) scale(1.16,.8)}68%{transform:translateY(-.04em) scale(.94,1.07)}100%{opacity:1;transform:none}}
.fact p{margin:0;font-size:15.5px;line-height:1.45;color:var(--fg-2);max-width:26ch}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .statement .lbl{grid-column:1/-1;padding:0 0 18px}
  .statement-text,.facts{grid-column:1/-1}
  .statement-text{text-indent:0}
}
@media (max-width:760px){
  .facts{grid-template-columns:1fr;gap:28px}
  .statement{padding-bottom:max(24px,calc(var(--gap-s) - 20vh))}
}
@media (prefers-reduced-motion:reduce){
  .pg svg{animation:none}
}
/* Show reel: an inset card that grows to full screen while "Show" and "reel." slide in from the edges. */

/* reel: an inset card that grows to full screen */
.reel{position:relative}
.reel-description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.reel-stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden}
.reel-frame{position:absolute;inset:0;clip-path:inset(18% 21% 18% 21% round 28px);will-change:clip-path;background:#0c0b0d}
.reel-media{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transform-origin:50% 50%}
.reel-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(18,17,20,0) 40%,rgba(18,17,20,.55) 100%);pointer-events:none}
.reel-words{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:center;gap:.18em;font-family:var(--display);font-weight:800;font-size:clamp(64px,13.5vw,250px);letter-spacing:-.055em;line-height:.9;color:var(--paper);pointer-events:none;z-index:6;text-shadow:0 10px 60px rgba(0,0,0,.35)}
.rw{display:inline-block;will-change:transform}
.reel-meta{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(18px,3vh,32px);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:15px;font-weight:500;letter-spacing:0;color:rgba(243,241,236,.72);z-index:6}
.reel-meta>span,.reel-meta-end{display:flex;align-items:center;gap:16px}
.reel-meta-end>span{white-space:nowrap}
.reel-meta-end{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.reel-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:88px;min-height:44px;padding:8px 14px;border:1px solid rgba(243,241,236,.4);border-radius:999px;color:var(--paper);line-height:1;white-space:nowrap;transition:background-color .2s,border-color .2s}
.reel-toggle[hidden]{display:none}
.reel-toggle:hover{background:rgba(243,241,236,.12);border-color:var(--paper)}
.reel-toggle:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.reel-toggle-icon{position:relative;display:block;width:12px;height:14px}
.reel-toggle-icon::before{content:"";position:absolute;left:1px;top:1px;width:3px;height:12px;background:currentColor;box-shadow:6px 0 0 currentColor}
.reel-toggle.is-paused .reel-toggle-icon::before{width:0;height:0;background:transparent;box-shadow:none;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .reel-frame{clip-path:inset(20% 8% 20% 8% round 22px)}
  .reel-meta{font-size:12.5px}
  .reel-meta-end{gap:10px}
  .reel-toggle{min-width:76px;padding-inline:10px}
}
/* short screens (a phone on its side): the hero fits, the reel fits, the shelf and the steps become simple lists */
@media (max-height:560px){
  .reel-stage{min-height:0}
}
/* Clients: the rotating grid of ten cells (name, then work), crosshairs on the corners, colour panels on hover. */

/* clients: Instrument's rotating grid, on Mother Design's open cells, with Dogstudio's corner crosshairs and DEPT's colour panel */
.clients{padding-block:var(--gap-s) max(40px,calc(var(--gap-s) - 92px))}
.cl-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:22px;align-items:end}
.cl-top .sec-h{grid-column:1/-1;margin-bottom:clamp(6px,2.6vh,30px)}
.cl-top .h2{grid-column:1/span 9}
.cl-count{grid-column:10/span 3;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.cl-count b{font-family:var(--display);font-weight:800;font-size:clamp(64px,7.4vw,140px);line-height:.85;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.cl-count b sup{font-size:.5em;color:var(--red);vertical-align:top;position:relative;top:.1em}
.cl-count b .has-slime{font-size:.44em;top:.12em;margin-left:.16em}
.cl-count > span{font-size:15px;color:var(--fg-2);max-width:26ch;text-wrap:balance}
.cg{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(56px,9vh,110px)}
.cg-x{position:absolute;width:15px;height:15px;transform:translate(-50%,-50%);pointer-events:none;z-index:6;opacity:0;transition:opacity .8s .1s}
.cg.in .cg-x{opacity:1}
.cg-x::before,.cg-x::after{content:"";position:absolute;background:var(--fg);opacity:.42}
.cg-x::before{left:0;right:0;top:7px;height:1px}
.cg-x::after{top:0;bottom:0;left:7px;width:1px}
.cg-cell{position:relative;aspect-ratio:1/1;overflow:hidden;opacity:0;transform:translateY(50px);transition:opacity .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),transform .8s cubic-bezier(.215,.61,.355,1) var(--d,0s)}
.cg.in .cg-cell{opacity:1;transform:none}
.cg-cell.is-link{cursor:pointer}
.cg-idx,.cg-sec{position:absolute;top:17px;z-index:5;font:500 13px/1.2 var(--text);letter-spacing:0;color:var(--fg-2);transition:color .3s}
.cg-idx{font-variant-numeric:tabular-nums}
.cg-idx{left:20px}
.cg-sec{right:20px;text-align:right;max-width:60%}
.cg-face{position:absolute;inset:0;display:grid;place-items:center;padding:48px 22px 34px;opacity:0;visibility:hidden;transform:translateY(-20px);transition:opacity .3s ease-in-out,transform .3s ease-in-out,visibility .3s}
.cg-face.on{opacity:1;visibility:visible;transform:none}
.cg-mark{padding:46px 18px 18px}
.cg-logo-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:28px 8px 42px;border-radius:8px;background:color-mix(in srgb,var(--paper),var(--white) 38%);box-shadow:inset 0 0 0 1px var(--line)}
.cg-logo{display:block;width:var(--logo-width,80%);height:auto;max-height:72%;object-fit:contain}
.cg-logo-name{position:absolute;bottom:16px;left:12px;right:12px;text-align:center;font:500 12px/1.25 var(--text);color:var(--ink);text-wrap:balance}
.cg-preview{padding:46px 18px 18px}
.cg-preview-in{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border-radius:8px;background:color-mix(in srgb,var(--paper),var(--white) 38%);box-shadow:0 0 0 1px var(--line)}
.cg-preview-img{display:block;flex:1;min-height:0;width:100%;height:0;object-fit:cover;object-position:50% 0}
.cg-preview-img.is-contained{object-fit:contain}
.cg-preview-name{display:grid;place-items:center;flex-shrink:0;min-height:28px;padding:6px 8px;text-align:center;font:500 12px/1.25 var(--text);color:var(--ink);text-wrap:balance}
.cg-img{padding:46px 18px 18px}
.cg-img canvas{display:block;width:100%;height:100%;border-radius:8px}
.cg-tile{padding:46px 18px 18px}
.cg-tile-in{width:100%;height:100%;border-radius:8px;display:flex;flex-direction:column;justify-content:space-between;padding:16px 16px 18px;box-shadow:inset 0 0 0 1px rgba(18,17,20,.06)}
.cg-tile-in span{font:500 13px/1.25 var(--text);opacity:.75}
.cg-tile-in b{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.1vw,34px);letter-spacing:-.045em;line-height:.95;overflow-wrap:anywhere}
.cg-note{text-align:center}
.cg-note b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.55vw,25px);letter-spacing:-.025em;line-height:1.08}
.cg-note span{display:block;margin-top:10px;font:500 13px/1.2 var(--text);color:var(--fg-2)}
.mk{color:var(--fg);text-align:center;line-height:1;white-space:nowrap}
.mk small{display:block;font-family:var(--text);font-weight:600;text-transform:uppercase}
.mk-inbound{font:800 clamp(16px,1.45vw,23px)/1.2 var(--display);letter-spacing:.17em;text-transform:uppercase}
.mk-isla b{display:block;font:800 clamp(40px,3.6vw,58px)/.86 var(--display);letter-spacing:-.05em}
.mk-isla small{margin-top:8px;font-size:11.5px;letter-spacing:.5em;padding-left:.5em}
.mk-penta b{display:block;font:700 clamp(26px,2.4vw,38px)/1 var(--display);letter-spacing:-.035em}
.mk-penta small{margin-top:9px;font-size:11px;letter-spacing:.62em;padding-left:.62em}
.mk-capri{font:400 clamp(30px,2.75vw,44px)/1 var(--display);letter-spacing:-.035em}
.mk-dimo b{display:block;font:800 clamp(30px,2.7vw,44px)/1 var(--display);letter-spacing:.3em;padding-left:.3em}
.mk-dimo small{margin-top:9px;font-size:11px;letter-spacing:.78em;padding-left:.78em}
.mk-top7{font:700 clamp(19px,1.7vw,27px)/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.mk-dotaxi{font:600 clamp(24px,2.1vw,34px)/1 var(--text);letter-spacing:-.02em}
.mk-cohls{font:500 clamp(26px,2.3vw,37px)/1 var(--display);letter-spacing:-.04em}
.mk-nolimit{font:800 clamp(24px,2.2vw,35px)/1 var(--display);letter-spacing:-.05em}
.mk-viva{font:400 clamp(25px,2.2vw,35px)/1 var(--text);letter-spacing:-.01em}
.cg-panel{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 22px 24px;text-align:center;background:var(--pc);color:var(--pt);opacity:0;transform:scale(1.05);transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.cg-cell.hot .cg-panel{opacity:1;transform:none}
.cg-cell.hot .cg-idx,.cg-cell.hot .cg-sec{color:var(--pt)}
.cg-ph{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.05vw,34px);letter-spacing:-.04em;line-height:.92;max-width:9ch}
.cg-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--pt);color:var(--pc);font-size:13px;font-weight:600;white-space:nowrap}
.cl-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:40px 0 0;font-size:15px;color:var(--fg-2)}
.cl-next{position:relative;color:var(--fg);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s}
.cl-next::after,.work-more a::after,.flow-link::after{content:"";position:absolute;inset:-10px -6px}
.cl-next:hover{border-color:var(--red)}
.cg-hit{position:absolute;inset:0;z-index:7;opacity:0;cursor:pointer}
.cg-hit:focus-visible{opacity:1;outline:2px solid var(--red);outline-offset:-2px;background:transparent}
.cg-img canvas{object-fit:cover}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .cl-count{grid-column:1/-1;justify-self:start;align-items:flex-start;text-align:left}
  .cl-top .h2{grid-column:1/-1}
  .cg{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .clients{padding-bottom:max(40px,calc(var(--gap-s) - 110px))}
  .cg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cg-idx,.cg-sec{top:14px;font-size:11px}
  .cg-idx{left:14px}
  .cg-sec{right:14px}
  .cg-face{padding:40px 14px 26px}
  .cg-img,.cg-tile,.cg-mark,.cg-preview{padding:38px 12px 12px}
  .cg-logo-wrap{padding:20px 4px 36px}
  .cg-logo-name{bottom:12px;left:8px;right:8px;font-size:11px}
  .cg-preview-name{min-height:26px;padding:5px 6px;font-size:11px}
  .cg-tile-in{padding:12px}
  .mk-inbound{font-size:14px}
  .cl-foot{flex-direction:column;align-items:flex-start}
}
/* Services: the shelf of eight illustrated cards that slides sideways while pinned, and the tools strip. */

/* services: DixonBaxi's dock carousel on an Exo Ape scroll strip, Build in Amsterdam's glass tags */
.sv{position:relative}
.sv-stage{position:relative;height:100vh;height:100svh;min-height:560px;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 92px) 0 clamp(18px,3vh,30px);overflow:hidden}
.sv-sec{margin:0 var(--pad) clamp(10px,2.6vh,28px)}
.sv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-inline:var(--pad)}
.sv-title{display:flex;flex-direction:column;gap:18px}
.sv-title .h2{font-size:clamp(52px,7.6vw,140px)}
.sv-side{display:flex;flex-direction:column;align-items:flex-end;gap:18px;max-width:38ch;text-align:right;padding-bottom:.4em}
.sv-intro{margin:0;font-size:16px;line-height:1.5;color:var(--fg-2)}
.sv-count{display:flex;font-variant-numeric:tabular-nums;color:var(--fg-3)}
.sv-cur{color:var(--fg)}
.sv-rail{flex:1;display:flex;align-items:center;min-height:0;margin-top:clamp(18px,3.4vh,40px)}
.sv-track{display:flex;gap:16px;padding-inline:var(--pad);will-change:transform}
.svc{position:relative;flex:none;height:clamp(220px,min(55vh,100vh - 388px),560px);aspect-ratio:313/411;--rad:clamp(14px,1.25vw,24px)}
.svc-in{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;width:100%;height:100%;padding:14px 20px 20px;border-radius:var(--rad);overflow:hidden;background:var(--cb);color:var(--ct);transition:transform .32s cubic-bezier(.34,1.25,.64,1),opacity .2s;will-change:transform;box-shadow:0 30px 60px -34px rgba(0,0,0,.6)}
/* The card link follows the existing hover movement without changing the card's grid. */
.svc-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.svc-link:focus-visible{outline:2px solid var(--ct);outline-offset:-5px}
/* Editorial playback and transcript controls remain above the card's link. */
.svc-art .media-slot:has(video[controls],button,summary,a){z-index:2}
.svc-art{display:grid;place-items:center;min-width:0;min-height:0;padding-block:6px;overflow:hidden}
.svc-sculpture{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 56%;animation:svc-float var(--art-duration,8s) ease-in-out var(--art-delay,0s) infinite;animation-play-state:paused;-webkit-user-select:none;user-select:none}
.svc.is-moving .svc-sculpture{animation-play-state:running;will-change:transform}
@keyframes svc-float{0%,100%{transform:translate3d(0,2px,0) rotate(-.45deg)}50%{transform:translate3d(0,-3px,0) rotate(.45deg)}}
.svc{container-type:inline-size}
.svc-tags{position:relative;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;list-style:none;margin:0;padding:0}
.svc-tags li{padding:5px 12px;border-radius:38px;background:var(--gc);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;font-weight:600;line-height:1.3;color:var(--ct)}
.svc-cap{position:relative;min-width:0}
.svc-cap h3{margin:0 0 9px;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.05vw,34px);letter-spacing:-.04em;line-height:.95}
.svc-cap h3 i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--dc,var(--red));margin-left:.04em}
.svc-cap p{margin:0;font-size:14.5px;line-height:1.45;opacity:.8;max-width:30ch}
@container (max-width:330px){.svc-in{padding:12px 16px 16px;gap:6px}.svc-tags{gap:4px}.svc-tags li{font-size:11.5px;padding:4px 9px}.svc-cap p{font-size:13px}.svc-cap h3{font-size:24px}}
.sv-foot{display:flex;align-items:center;gap:34px;padding-inline:var(--pad);margin-top:clamp(16px,3vh,30px)}
.sv-bars{display:flex;gap:6px;flex:none}
.sv-bars i{width:14px;height:2px;border-radius:2px;background:var(--line);transition:width .35s var(--e-out),background-color .35s}
.sv-bars i.on{width:34px;background:var(--fg)}
.sv-tools{flex:1;min-width:0;display:flex;align-items:center;gap:20px}
.sv-tools .lbl{flex:none}
.sv-tick{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sv-tick-in{display:flex;width:max-content;animation:tick 60s linear infinite}
/* the tools strip in our own type, with each tool's icon where the dot used to be */
.sv-tick-in .tk{flex:none;display:inline-flex;align-items:center;gap:9px;height:26px;margin-right:34px;font-size:14px;font-weight:500;color:var(--fg-2);white-space:nowrap}
.tk img{display:block;width:auto;flex:none;-webkit-user-select:none;user-select:none}
.sv-tick:hover .sv-tick-in{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.sv.is-static .sv-stage{height:auto;min-height:0;overflow:visible;padding:clamp(120px,18vh,200px) 0 clamp(80px,12vh,140px)}
.sv.is-static .sv-rail{display:block;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:10px 16px}
.sv.is-static .sv-rail::-webkit-scrollbar{display:none}
.sv.is-static .sv-track{width:max-content;transform:none!important}
.sv.is-static .svc{scroll-snap-align:start;scroll-margin-inline:var(--pad)}
.svc-in::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none}
.sv-track{flex:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sv-side{max-width:30ch}
  .sv-intro{font-size:15px}
}
@media (max-width:760px){
  .svc{height:auto;width:78vw;max-width:340px}
  .sv-head{flex-direction:column;align-items:flex-start}
  .sv-side{align-items:flex-start;text-align:left;max-width:none}
  .sv.is-static .sv-stage{padding:110px 0 70px}
  .sv-foot{flex-direction:column;align-items:flex-start;gap:20px}
  .sv-tools{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .svc-sculpture{animation:none}
  .sv-tick-in{animation:none}
  .sv-tick-in{flex-wrap:wrap;width:auto;row-gap:6px}
  .sv-tick-in .tk[aria-hidden]{display:none}
  .sv-tick-in .tk{margin-right:26px}
  .sv-tick{-webkit-mask-image:none;mask-image:none}
  .sv-foot,.sv-tools{align-items:flex-start}
  .sv-bars{margin-top:12px}
  .sv-tools .lbl{line-height:26px}
}
.rm .svc-sculpture{animation:none}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .sv-bars{margin-top:0}
  .sv-tools{flex-direction:column;gap:10px}
  .sv-tick-in .tk{margin-right:22px}
}
/* Selected work: the staggered grid of six project cards with parallax and a two line caption. */

/* work: Exo Ape's featured grid, Instrument's settle, Wolff Olins' staggered rise */
.work{padding-block:calc(var(--gap-s) - clamp(18px,3vh,30px)) var(--gap-h)}
.work-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.work-head .sec-h{grid-column:1/-1;margin-bottom:clamp(28px,5vh,56px)}
.work-head .h2{grid-column:1/span 8}
.work-intro{grid-column:9/span 4;margin:0 0 .5em;color:var(--fg-2);max-width:36ch;transition:color .8s var(--e-out)}
.wg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:clamp(70px,11vh,130px)}
.wc{position:relative;align-self:start;min-width:0}
.wc-a{grid-column:2/8;grid-row:1}
.wc-b{grid-column:9/13;grid-row:1;margin-top:26vw}
.wc-c{grid-column:6/11;grid-row:2;margin-top:9vw}
.wc-d{grid-column:1/5;grid-row:2;margin-top:2vw}
.wc-e{grid-column:8/13;grid-row:3;margin-top:10vw}
.wc-f{grid-column:2/6;grid-row:3;margin-top:-2vw}
.wc-rise{transform:translateY(var(--ry,40px)) scale(.99);opacity:0;transition:transform 1.2s cubic-bezier(.23,1,.32,1),opacity 1s cubic-bezier(.23,1,.32,1)}
.wc.in .wc-rise{transform:none;opacity:1}
.wc-media{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--mist);cursor:pointer}
.wc-media canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform:scale(1.06);transition:transform 1.1s cubic-bezier(0,.202,.204,1)}
.wc:hover .wc-media canvas,.wc:focus-within .wc-media canvas{transform:scale(1)}
.wc-cap{position:relative;overflow:hidden;margin-top:14px;height:1.5em;font-size:16.5px;line-height:1.5em}
.wc-line{position:absolute;left:0;top:0;display:flex;gap:12px;align-items:baseline;white-space:nowrap;transform-origin:0 0;transition:transform .9s cubic-bezier(0,.202,.204,1),opacity .6s}
.wc-line b{font-weight:600}
.wc-line span{color:var(--fg-2)}
.wc-l2{transform:translateY(100%) rotate(7deg);opacity:0}
.wc:hover .wc-l1,.wc:focus-within .wc-l1{transform:translateY(-100%) rotate(-7deg);opacity:0}
.wc:hover .wc-l2,.wc:focus-within .wc-l2{transform:none;opacity:1}
.wc-l2 b{color:var(--red-deep)}
.work-more{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(80px,12vh,140px);font-size:15px;color:var(--fg-2)}
.work-more a{position:relative;color:var(--fg);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.work-more a:hover{border-color:var(--red)}
.wc-par{will-change:transform}
.wc-media{padding:0;border:0;text-align:left;font:inherit;color:inherit}
.work a.wc-case-link,.work a.wc-media{text-decoration:none}
.wc-media:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* The shared screen curl draws the painted portrait in #gl, following its rise, hover zoom and parallax. */
.wc.is-gl .wc-media{background:none}
.wc.is-gl .wc-media canvas{visibility:hidden}
.wc-native .wc.is-gl .wc-media{background:var(--mist)}
.wc-native .wc.is-gl .wc-media canvas{visibility:visible}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .wc-cap{height:auto;overflow:visible}
  .wc-line{position:static;flex-wrap:wrap;white-space:normal;row-gap:2px}
  .wc-l2{display:none}
  .wc-l1{transform:none!important;opacity:1!important}
  .work-head .h2{grid-column:1/-1}
  .work-intro{grid-column:1/span 9}
  .wc-a{grid-column:1/8}
  .wc-b{grid-column:8/13;margin-top:22vw}
  .wc-c{grid-column:5/12}
  .wc-d{grid-column:1/5;margin-top:-2vw}
  .wc-e{grid-column:7/13}
  .wc-f{grid-column:1/6;margin-top:0}
}
@media (max-width:760px){
  .work{padding-top:calc(var(--gap-s) - 70px)}
  .wg{display:flex;flex-direction:column;gap:44px}
  .wc{margin-top:0!important}
  .wc{align-self:stretch;width:100%}
  .work-more{flex-direction:column;align-items:flex-start}
}
@media print{
  .wc-gl #gl{display:none}
  .wc.is-gl .wc-media{background:var(--mist)}
  .wc.is-gl .wc-media canvas{visibility:visible}
}
/* Case sheet: a work card expands into a full screen sheet with the project details. */

/* This rule sits above the next .case-media canvas rule on purpose, as it did in the published page.
   Only its object-fit survives the cascade, the rule below sets the canvas's size and position. */
.case-media canvas{object-fit:cover;width:100%;height:100%;left:0;top:0;transform:none}
.case{position:fixed;inset:0;z-index:60}
.case-bg{position:absolute;inset:0;background:rgba(18,17,20,.55);opacity:0}
.case-in{position:fixed;left:0;top:0;width:100%;height:100%;display:flex;overflow:hidden;background:var(--paper);color:var(--ink);border-radius:0}
.case-media{position:relative;flex:none;width:52%;height:100%;overflow:hidden;background:#0c0b0d}
.case-media canvas{position:absolute;left:50%;top:50%;height:100%;width:auto;min-width:100%;transform:translate(-50%,-50%);display:block}
.case-media[data-case-media-bound] canvas{visibility:hidden}
.case-cover{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;background:var(--paper)}
.case-cover .media-slot-caption{padding:12px 20px;color:var(--ink);background:var(--paper)}
.case-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;padding:calc(env(safe-area-inset-top,0px) + 28px) clamp(24px,4vw,64px) 28px;overflow-y:auto;overscroll-behavior:contain}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.case .lbl{color:rgba(18,17,20,.55)}
.case .case-idx{color:var(--ink);font-variant-numeric:tabular-nums}
.case-idx span{color:rgba(18,17,20,.45)}
.case-x{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(18,17,20,.18);font-size:14px;font-weight:600;transition:background-color .3s,color .3s}
.case-x:hover{background:var(--ink);color:var(--paper)}
.case-name{margin:clamp(10px,4vh,48px) 0 0;font-family:var(--display);font-weight:800;font-size:clamp(46px,5.6vw,100px);letter-spacing:-.052em;line-height:.88}
.case-name i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--red);margin-left:.04em}
.case-type{margin:0;font-size:16px;color:rgba(18,17,20,.6)}
.case-desc{margin:4px 0 0;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.75vw,27px);letter-spacing:-.022em;line-height:1.25;max-width:32ch}
.case-hl{list-style:none;margin:0;padding:0;border-top:1px solid rgba(18,17,20,.12)}
.case-hl li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(18,17,20,.12);font-size:16px;font-weight:500}
.case-hl li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.case-tags{display:flex;flex-wrap:wrap;gap:8px}
.case-tags span{padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(18,17,20,.16);font-size:13.5px;font-weight:500}
.case-actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:auto;padding-top:10px}
.btn-case{padding:16px 22px 16px 26px;font-size:15.5px;background:var(--ink);color:var(--paper)}
.btn-case .arr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;transition:transform .45s var(--e-out)}
.btn-case:hover .arr{transform:rotate(-45deg)}
.case-link{font-size:15px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(18,17,20,.25);padding-bottom:2px}
.case-link:empty{display:none}
.case-link[data-live-state]{border-bottom:0;pointer-events:none}
.case-nav{display:flex;justify-content:space-between;border-top:1px solid rgba(18,17,20,.12);padding-top:16px;font-size:14px;font-weight:600}
.case-nav button{padding:4px 0;transition:color .3s}
.case-nav button:hover{color:var(--red-deep)}
.case-fade{transition:opacity .35s}
.case-fade.out{opacity:0}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .case-in{flex-direction:column}
  .case-media{width:100%;height:42%}
}
@media (max-width:760px){
  .case-body{gap:16px}
  .case-name{margin-top:6px}
}
/* Industries: the "We build ... for ..." sentence with rolling pills, and its docked copy at the bottom of the screen. */

/* industries: Pentagram's sentence pill */
.industries{padding-block:var(--gap-h) max(40px,calc(var(--gap-s) - 92px));display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(28px,5vh,52px)}
.industries .sec-h{align-self:stretch;text-align:left;margin-bottom:clamp(20px,6vh,70px)}
.ps-wrap{position:relative}
.ps{margin:0;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:.24em;row-gap:.14em;font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:1.05}
.ps-big{font-size:clamp(38px,6vw,112px)}
.ps-br{flex-basis:100%;height:0}
.ps-pill{display:inline-flex;align-items:center;gap:.16em;padding:.055em .34em .055em .4em;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:800;letter-spacing:inherit;line-height:inherit;transition:background-color .35s,color .35s}
.ps-big .ps-pill:hover{background:var(--red);color:var(--white)}
.ps-roll{display:inline-block;height:1.08em;overflow:hidden;vertical-align:bottom;transition:width .6s var(--e-out)}
.ps-track{display:flex;flex-direction:column;transition:transform .7s var(--e-out)}
/* Offset the visible letters inside each fixed row; the track keeps its uniform rolling distance. */
.ps-track span{display:block;flex:none;height:1.08em;line-height:1.08em;width:max-content;white-space:nowrap;padding-right:.07em;transform:translateY(var(--ps-text-offset,0em))}
.ps-caret{display:block;flex:none;width:.2em;height:.11em;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%);opacity:.7}
.ps-menu{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);z-index:20;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:8px;border-radius:20px;background:var(--fg);color:var(--bg);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);width:min(640px,90vw);text-align:left}
.ps-menu button{padding:10px 14px;border-radius:12px;font-size:15px;font-weight:500;text-align:left;transition:background-color .2s}
.ps-menu button:hover,.ps-menu button.on{background:rgba(128,124,130,.16)}
.ps-menu button.on{color:var(--red)}
.ps-proof{margin:0;min-height:1.6em;font-size:clamp(17px,1.4vw,21px);color:var(--fg-2)}
.ps-proof-in{display:inline-block;transition:opacity .35s,transform .5s var(--e-out)}
.ps-proof-in.out{opacity:0;transform:translateY(8px)}
.ps-proof b{color:var(--fg);font-weight:600}
.ps-note{margin:0;font-size:14px;color:var(--fg-3)}
.dock{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:38;width:max-content;max-width:calc(100vw - 24px);display:flex;align-items:center;gap:12px;padding:7px 7px 7px 20px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -20px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);color:var(--fg);white-space:nowrap;transform-origin:50% 50%;transform:translate(-50%,160%);opacity:0;transition:transform .7s var(--e-out),opacity .5s,background-color .8s,color .8s}
.dock.on{transform:translate(-50%,0);opacity:1}
.dock.flip{transition:background-color .8s,color .8s}
.ps-dock{font-size:15.5px;letter-spacing:-.01em;column-gap:.3em;flex-wrap:nowrap}
.ps-dock .ps-pill{padding:.14em .55em;font-size:.94em}
.dock-go{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red);color:var(--white);transition:transform .5s var(--e-out)}
.dock-go:hover{transform:rotate(-45deg)}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .industries{padding-bottom:max(40px,calc(var(--gap-s) - 84px))}
  .ps-big{font-size:clamp(28px,8.4vw,52px)}
  .ps-menu{grid-template-columns:1fr 1fr}
  .ps-dock{font-size:13.5px}
  .dock{padding:6px 6px 6px 14px;gap:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);max-width:calc(100vw - 24px)}
  .dock-go{width:34px;height:34px}
}
/* Process: the pinned conveyor of five step cards, the outlined marquee, the step counter and the tint. */

/* the last word of a bleeding line keeps room at the screen edge for the landing ring */
.flow-statement .fs-r{margin-right:.16em}
.flow{position:relative}
.flow.flow-handoff{margin-bottom:var(--flow-overlap,-100svh)}
.flow-handoff+.cta{z-index:6;will-change:opacity}
.flow-stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ink);color:var(--paper);transition:background-color .6s}
.flow-marquee{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;font-family:var(--display);font-weight:800;font-size:clamp(140px,24vw,460px);letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(243,241,236,.1);will-change:transform}
.flow-marquee span{display:inline-block;margin-right:.22em;transition:-webkit-text-stroke-color .6s}
.flow-marquee span.cur{-webkit-text-stroke-color:rgba(249,66,58,.42)}
.flow-top{position:absolute;left:var(--pad);right:var(--pad);top:calc(env(safe-area-inset-top,0px) + 92px);z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.flow-h{display:flex;flex-direction:column;gap:8px}
.flow-top .lbl{display:none}
.flow-sub{margin:0;max-width:30ch;font-size:15px;line-height:1.45;color:rgba(243,241,236,.62)}
/* step indicator: 01/05 counter with the total dimmed (Koto, Exo Ape, Wolff Olins) and hairline bars that fill (Instrument, Collins) */
.flow-prog{display:flex;align-items:center;gap:16px;font:500 15px/1.3 var(--text);font-variant-numeric:tabular-nums}
.fp-n{display:flex;color:rgba(243,241,236,.45)}
.fp-cur{display:inline-block;color:var(--paper)}
.fp-cur.roll{animation:fpRoll .5s var(--e-out)}
@keyframes fpRoll{from{opacity:0;transform:translateY(55%)}to{opacity:1;transform:none}}
.flow-rail{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.flow-rail li{position:relative;width:36px;height:2px;border-radius:2px;background:rgba(243,241,236,.2);overflow:hidden}
.flow-rail li::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--paper);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.flow-statement{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;display:flex;justify-content:space-between;align-items:baseline;padding-inline:var(--pad);font-family:var(--display);font-weight:800;font-size:clamp(52px,9.4vw,180px);letter-spacing:-.055em;line-height:.9;z-index:2}
.flow-heading{display:contents;font:inherit;letter-spacing:inherit}
.flow-statement .fs-l,.flow-statement .fs-r,.flow-statement .fs-word{display:inline-block;will-change:transform,opacity}
.flow-statement .fs-l{transform-origin:100% 50%}
.flow-statement .fs-word{transform-origin:0 50%}
.fs-landed{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font:inherit;letter-spacing:inherit;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
/* The finale shares the original dot station; this invisible stop only measures its final position. */
.fs-stop{display:inline-block;width:.2em;height:.2em;margin-left:.04em;vertical-align:baseline}
.flow-cards{position:absolute;inset:0;z-index:4;pointer-events:none}
.fcard{position:absolute;left:50%;top:calc(50% + 48px);width:min(840px,calc(100vw - 96px));height:min(470px,calc(100vh - 300px));min-height:340px;display:grid;grid-template-columns:52% 48%;border-radius:28px;overflow:hidden;background:var(--cb);color:var(--ct);box-shadow:0 70px 120px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);transform:translate(-50%,120vh);will-change:transform;pointer-events:auto}
.fc-art{position:relative;overflow:hidden;background:var(--ca)}
.fc-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fc-body{display:flex;flex-direction:column;min-width:0;padding:28px 34px 30px}
/* card label row: bare 01 and the stage name on a 1px rule (Ragged Edge, DEPT, Exo Ape) */
.fc-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--cl);font:500 15px/1.3 var(--text)}
.fc-n{font-variant-numeric:tabular-nums}
.fc-cat{opacity:.62;text-align:right}
.fc-body h3{margin:auto 0 14px;font-family:var(--display);font-weight:800;font-size:clamp(48px,5.2vw,80px);letter-spacing:-.055em;line-height:.88}
.fc-body h3 i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--dc);margin-left:.04em}
.fc-body p{margin:0;font-size:16.5px;line-height:1.5;opacity:.8;max-width:32ch}
/* grey label with the value right under it, on a 1px rule (Mouthwash, Collins) */
.fc-you{margin-top:22px;padding-top:14px;border-top:1px solid var(--cl);display:flex;flex-direction:column;gap:4px}
.fc-you span{font:500 15px/1.3 var(--text);opacity:.62}
.fc-you b{font-size:15.5px;font-weight:500;line-height:1.4}
.flow-link{position:absolute;right:var(--pad);bottom:clamp(24px,3.8vh,40px);z-index:5;font-size:14px;color:var(--paper);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(243,241,236,.3);padding-bottom:2px}
.flow-link:hover{border-color:var(--red)}
.rm .flow-stage,.no-libs .flow-stage,.flow-static .flow-stage{height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column;gap:clamp(28px,5vh,48px);padding:clamp(120px,18vh,200px) var(--pad) clamp(90px,14vh,160px)}
.rm .flow-marquee,.no-libs .flow-marquee,.flow-static .flow-marquee,.rm .flow-prog,.no-libs .flow-prog,.flow-static .flow-prog{display:none}
.rm .flow-top,.no-libs .flow-top,.flow-static .flow-top,.rm .flow-statement,.no-libs .flow-statement,.flow-static .flow-statement,.rm .flow-link,.no-libs .flow-link,.flow-static .flow-link,.rm .flow-cards,.no-libs .flow-cards,.flow-static .flow-cards{position:static;transform:none}
.rm .flow-statement,.no-libs .flow-statement,.flow-static .flow-statement{padding:0}
.rm .fs-landed,.no-libs .fs-landed,.flow-static .fs-landed{display:none}
.rm .flow-cards,.no-libs .flow-cards,.flow-static .flow-cards{display:grid;grid-template-columns:1fr;gap:24px;pointer-events:auto}
.rm .fcard,.no-libs .fcard,.flow-static .fcard{position:relative;left:auto;top:auto;width:100%;max-width:840px;height:440px;transform:none;margin-inline:auto}
.rm .flow-link,.no-libs .flow-link,.flow-static .flow-link{align-self:flex-start}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .flow-statement{flex-direction:column;justify-content:center;align-items:flex-start;gap:.1em;font-size:clamp(48px,14.5vw,80px)}
  .flow-statement .fs-r{align-self:flex-end}
  .flow-prog{gap:10px;font-size:14px}
  .flow-rail{gap:4px}
  .flow-rail li{width:18px}
  .fcard{grid-template-columns:1fr;grid-template-rows:auto auto;width:calc(100vw - 32px);max-width:420px;height:auto;min-height:0;border-radius:22px}
  .fc-art{aspect-ratio:auto;height:clamp(120px,24vh,236px)}
  .fc-body{padding:16px 20px 20px}
  .fc-top{font-size:14px;padding-bottom:12px}
  .fc-you span{font-size:14px}
  .fc-body h3{margin:14px 0 10px;font-size:42px}
  .fc-body p{font-size:14.5px}
  .fc-you{margin-top:14px;padding-top:12px;gap:2px}
  .fc-you b{font-size:14px}
  .rm .fcard,.no-libs .fcard,.flow-static .fcard{height:auto}
  .flow-top{top:calc(env(safe-area-inset-top,0px) + 84px);gap:12px}
  .flow-top .lbl{font-size:14px}
  .flow-sub{display:none}
  .rm .flow-sub,.no-libs .flow-sub,.flow-static .flow-sub{display:block;font-size:13px}
  .fcard{top:calc(50% + 30px)}
  .flow-link{display:none}
  .rm .flow-link,.no-libs .flow-link,.flow-static .flow-link{display:inline-block}
}
/* Contact: "Got an idea? Let’s land it." with the big button and the copy pill. */

/* contact */
.cta{position:relative}
.cta-stage{position:relative;z-index:6;display:flex;flex-direction:column;gap:clamp(28px,5vh,52px);padding-inline:var(--pad);padding-block:var(--gap-h) calc(var(--gap-s) - clamp(70px,11vh,130px))}
.cta-title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(58px,11.2vw,210px);line-height:.86;letter-spacing:-.055em}
.cta-title .row{display:block}
.cta-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.cta-copy{margin:0;max-width:40ch;font-size:17px;color:var(--fg-2)}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-big{padding:20px 30px;font-size:17px;background:var(--fg);color:var(--bg)}
.btn-big .arr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:var(--white);transition:transform .45s var(--e-out)}
.btn-big:hover .arr{transform:rotate(-45deg)}
body[data-bg="red"] .btn-big .arr{background:var(--ink)}
.copy-pill{display:inline-flex;align-items:center;gap:14px;padding:19px 22px 19px 26px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:17px;font-weight:500;transition:box-shadow .3s}
.copy-pill:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.copy-lbl{font-size:13px;font-weight:500;line-height:1.3;padding:4px 10px;border-radius:999px;background:var(--line)}
.copied .copy-lbl{background:var(--fg);color:var(--bg)}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .copy-pill{font-size:15.5px;padding:15px 16px 15px 20px}
  .btn-big{padding:17px 24px}
  .cta-bottom{flex-direction:column;align-items:flex-start}
}
/* Footer: columns, the big TIA clock, the wordmark that settles and throws its dot, the bottom bar and its pickers. */

/* footer */
.footer{position:relative;z-index:6;background:var(--red);color:var(--white);padding:clamp(70px,11vh,130px) var(--pad) 0;overflow:hidden;--dotc:var(--ink);--line:rgba(255,255,255,.3)}
/* with WebGL on, the footer is clear until the finale has turned the page red over Contact (it only comes after) */
.gl-fin .footer{background:transparent}
.gl-fin.fin-red .footer{background:var(--red)}
.footer .lbl{color:rgba(255,255,255,.72);display:block;margin-bottom:14px}
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ft-col{border-top:1px solid rgba(255,255,255,.34);padding-top:15px}
.ft-col p{margin:0;font-size:17px;line-height:1.5}
.ft-map{text-decoration:none;font-weight:600}
.ft-copy{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:17px;font-weight:500;text-align:left}
.ft-copy .copy-lbl{background:rgba(255,255,255,.2)}
.ft-copy.copied .copy-lbl{background:#fff;color:var(--red)}
.ft-social{display:flex;flex-direction:column;align-items:flex-start}
.ft-social a,.ft-profile{text-decoration:none;font-size:17px;padding:3px 0;transition:opacity .25s}
.ft-social:hover a:not(:hover){opacity:.45}
.ft-back{display:flex;justify-content:flex-end;align-items:flex-start}
.back-top{display:inline-flex;flex-direction:column;align-items:flex-end;gap:10px;text-decoration:none;font-size:15px;font-weight:500}
.back-top span{font-family:var(--display);font-weight:400;font-size:72px;line-height:.8;transition:transform .5s var(--e-out)}
.back-top:hover span{transform:translateY(-10px)}
.clock-row{margin-top:clamp(70px,12vh,140px);display:flex;align-items:baseline;gap:.12em;font-family:var(--display);font-weight:800;font-size:clamp(80px,17.5vw,330px);line-height:.8;letter-spacing:-.06em;white-space:nowrap}
.clock-row .city{color:var(--ink)}
.clock-row .arrow{font-weight:400;font-size:.6em;transform:translateY(-.12em);color:rgba(255,255,255,.75)}
.digits{display:inline-flex;font-variant-numeric:tabular-nums}
.dg{display:inline-block;position:relative;overflow:hidden;height:.9em;width:.6em;text-align:center;vertical-align:baseline}
.dg span{display:block;height:1.1em;line-height:1.1em;margin-top:-.04em;transition:transform .55s var(--e-out)}
.dg-col{width:.24em;text-align:center;animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.clock-sub{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px;font-size:15px;font-weight:500;color:rgba(255,255,255,.85)}
.foot-mark{margin-top:clamp(60px,11vh,130px);color:#fff}
.foot-mark svg{display:block;width:100%;height:auto;overflow:visible}
.fm-l,.fm-tit{fill:currentColor}
.fm-stop{fill:var(--dotc)}
.fm-fly{fill:#fff;opacity:0}
.fm.armed .fm-stop{opacity:0}
.foot-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"copy links right";align-items:center;gap:16px;padding:18px 0 calc(env(safe-area-inset-bottom,0px) + 18px);margin-top:clamp(18px,3vh,30px);border-top:1px solid rgba(255,255,255,.3);font-size:14px;color:rgba(255,255,255,.9)}
.foot-copy{grid-area:copy}
.foot-links{grid-area:links;justify-self:center;display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.foot-links a{text-decoration:none;transition:opacity .25s}
.foot-links:hover a:not(:hover){opacity:.45}
.foot-right{grid-area:right;justify-self:end;display:flex;align-items:center;gap:6px;margin-right:-12px}
.foot-language{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;font-size:14px}
.foot-language svg{width:18px;height:18px;flex:none}
.foot-language a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:999px;text-decoration:none}
.foot-language a:hover{background:rgba(255,255,255,.16)}
.foot-language a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.pick{position:relative}
.pick-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:999px;font-size:14px;font-weight:500;transition:background-color .25s}
.pick-btn:hover,.pick-btn[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.pick-btn svg{width:18px;height:18px;flex:none}
.pick-btn .pick-caret{width:9px;height:6px;margin-left:-1px;transition:transform .35s var(--e-out)}
.pick-btn[aria-expanded="true"] .pick-caret{transform:rotate(180deg)}
.lang-cur{letter-spacing:.06em;font-weight:600;font-size:13px}
.cog svg{transition:transform .6s var(--e-out)}
.cog[aria-expanded="true"] svg{transform:rotate(120deg)}
.pick-pop{position:absolute;right:0;bottom:calc(100% + 10px);z-index:3;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:18px;background:var(--ink);color:var(--paper);min-width:190px;opacity:0;transform:translateY(8px) scale(.98);transform-origin:bottom right;pointer-events:none;visibility:hidden;transition:opacity .3s,transform .4s var(--e-out),visibility 0s .4s;box-shadow:0 24px 48px -24px rgba(0,0,0,.5)}
.pick-pop.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .3s,transform .4s var(--e-out),visibility 0s}
.pick-pop a,.pick-pop button{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:14px;text-align:left;color:inherit}
.pick-pop a:hover,.pick-pop button:hover,.pick-pop a:focus-visible,.pick-pop button:focus-visible{background:rgba(243,241,236,.1)}
.pick-pop button span{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;opacity:.55}
.pick-pop button[aria-checked="true"] span{opacity:1}
.pick-pop button[aria-checked="true"] span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-back{justify-content:flex-start}
}
@media (max-width:760px){
  .ft-cols{grid-template-columns:1fr 1fr;gap:30px 18px}
  .ft-cols .ft-col:nth-child(1),.ft-cols .ft-col:nth-child(2){grid-column:1/-1}
  .clock-row{font-size:clamp(56px,19vw,120px)}
  .foot-bottom{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"links links" "copy right";row-gap:14px}
  .foot-links{gap:20px}
  .foot-right{gap:2px;margin-right:-10px}
  .pick-btn{padding:7px 10px 7px 8px}
}
@media (hover:none),(pointer:coarse){
  .ft-social a,.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .ft-copy,.pick-btn{min-height:44px}
  .ft-map{position:relative}
  .ft-map::after{content:"";position:absolute;inset:-12px -12px -12px -6px}
}
@media (prefers-reduced-motion:reduce){
  .dg-col{animation:none}
}

.legal-pop>span,.legal-pop>button{display:block;font:inherit;font-size:13px;padding:9px 16px;white-space:nowrap;text-align:left}
.legal-pop>span{opacity:.45}
.legal-pop>button{color:inherit;background:none;border:0;width:100%;cursor:pointer}
.legal-pop>button:hover{background:rgba(243,241,236,.08)}
/* The original glossy arrow, in the dot's material. --cursor-size sizes every layer around its point. */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:none;visibility:hidden;opacity:0;--cur-h:var(--cursor-size,32px);--cur-w:123;--cur-x:18.3;--cur-y:12.4;--ci:0}
.cursor[popover]{width:0;height:0;margin:0;padding:0;border:0;background:none;overflow:visible}
.has-cursor .cs-sheet::backdrop{cursor:none!important}
.has-cursor .cursor{display:block}
.cursor.is-visible{visibility:visible;opacity:1}
.cursor.is-native{visibility:hidden;opacity:0}
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),.has-cursor textarea,.has-cursor [contenteditable]:not([contenteditable="false"]),.has-cursor [contenteditable]:not([contenteditable="false"]) *{cursor:text!important}
.has-cursor [data-native-cursor],.has-cursor [data-native-cursor] *{cursor:auto!important}
.cursor-pointer,.cursor-lift{position:absolute;left:0;top:0;width:0;height:0}
.cursor-lift{transition:transform .45s var(--e-out),opacity .3s}
.cursor-shade,.cursor-red,.cursor-ink{position:absolute;left:calc(var(--cur-h) * var(--cur-x) / -128);top:calc(var(--cur-h) * var(--cur-y) / -128);width:calc(var(--cur-h) * var(--cur-w) / 128);height:var(--cur-h);background:0 0/100% 100% no-repeat}
body[data-bg="red"] .cursor,.cursor.on-red{--ci:1}
body[data-bg] .cursor.on-ink{--ci:0}
.cursor-red{background-image:url(/assets/arrow-red.DsTOb4Yi.webp);opacity:calc(1 - var(--ci));transition:opacity .3s}
.cursor-ink{background-image:url(/assets/arrow-ink.CrLbVarM.webp);opacity:var(--ci);transition:opacity .3s}
.cursor-shade{background-image:url(/assets/arrow-red.DsTOb4Yi.webp);filter:brightness(0) blur(2px);opacity:.2;transform:translate(1.5px,2.5px);transition:transform .45s var(--e-out),filter .45s,opacity .45s}
.cursor.is-link .cursor-lift{transform:scale(1.12)}
.cursor.is-link .cursor-shade{transform:translate(3.5px,6px);filter:brightness(0) blur(3.5px);opacity:.15}
.cursor-busy{position:absolute;left:calc(var(--cur-h) * -.65);top:calc(var(--cur-h) * -.65);width:calc(var(--cur-h) * 1.3);height:calc(var(--cur-h) * 1.3);background:url(/assets/spinner-red.s8algNcm.webp) 0 0/100% 100% no-repeat;-webkit-mask:conic-gradient(from calc(var(--cur-a) + 22.5deg),rgba(0,0,0,.18),#000);mask:conic-gradient(from calc(var(--cur-a) + 22.5deg),rgba(0,0,0,.18),#000);opacity:0;transform:scale(.4) rotate(-45deg);transition:opacity .35s,transform .6s var(--e-out)}
.cursor.is-busy .cursor-busy{opacity:1;transform:none;animation:cursor-spin .8s steps(8) infinite}
body[data-bg="red"] .cursor-busy,.cursor.on-red .cursor-busy{background-image:url(/assets/spinner-ink.DEtZcOFl.webp)}
body[data-bg] .cursor.on-ink .cursor-busy{background-image:url(/assets/spinner-red.s8algNcm.webp)}
.cursor-label{position:absolute;left:0;top:0;padding:10px 16px;margin:calc(var(--cur-h) + 6px) 0 0 20px;border-radius:999px;background:rgba(243,241,236,.86);color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .25s}
.cursor.is-label .cursor-label{opacity:1}
.cursor-vw{position:absolute;left:0;top:0}
.cursor-view{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:rgba(18,17,20,.26);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--white);font-size:13px;font-weight:600;letter-spacing:.01em;transform:scale(.1);opacity:0;transition:transform .4s cubic-bezier(0,.202,.204,1),opacity .3s}
.cursor.is-view .cursor-view{transform:scale(1);opacity:1}
.cursor.is-view .cursor-lift{transform:scale(.2);opacity:0}
@property --cur-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes cursor-spin{to{--cur-a:360deg}}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce),(forced-colors:active){
  .has-cursor .cursor{display:none}
  .has-cursor,.has-cursor *{cursor:revert!important}
}