/* One Legacy site styles, version 19 */
:root{
  --bg:#ECEDEF;
  --ink:#14151A;
  --mute:#5A5D67;
  --line:#C6C8CF;
  --accent:#1F2BFF;
  --dark:#0E0F14;
  --bg-rgb:236,237,239;--ink-rgb:20,21,26;--acc-rgb:31,43,255;
  --accent-2:#7f87ff;--on-accent:#fff;--err:#B3321C;
  color-scheme:light;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:clamp(20px,4vw,56px);
  --hh:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 8px);scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
html.locked{overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.skip{
  position:fixed;left:var(--pad);top:10px;z-index:100;padding:10px 16px;
  background:var(--ink);color:var(--bg);font-size:15px;transform:translateY(-200%);transition:transform .2s;
}
.skip:focus{transform:none}

/* header */
.top{
  position:fixed;inset:0 0 auto 0;z-index:20;height:var(--hh);
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--pad);font-size:15px;
  animation:fadein 1s .4s both;
}
.top::before{
  content:"";position:absolute;inset:8px max(8px,calc(var(--pad) - 14px));z-index:-1;border-radius:999px;
  background:rgba(var(--bg-rgb),.78);border:1px solid rgba(var(--ink-rgb),.08);
  box-shadow:0 8px 28px rgba(var(--ink-rgb),.08),0 1px 0 rgba(255,255,255,.6) inset;
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  opacity:0;transform:scale(.985);transition:opacity .35s,transform .5s var(--ease);
}
.top.scrolled::before{opacity:1;transform:none}
.top.open::before{inset:0;border-radius:0;border:0;box-shadow:none;opacity:1;transform:none;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.brand{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1;letter-spacing:-.005em;min-height:44px;display:inline-flex;align-items:center}
/* animated logo: letters swell and turn blue under the cursor (see the logo block in one-legacy.js) */
.ol-logo{--ol-blue:var(--accent);--ol-ink:var(--ink);position:relative;white-space:nowrap;padding:0 .25em;margin-left:-.25em;color:var(--ol-ink)}
.ol-logo .ol-l{display:inline-block;transform-origin:50% 85%;will-change:transform}
.ol-logo .ol-sp{width:.28em}
.menu-btn{display:none}
.top nav{display:flex;gap:2px}
.top nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;transition:background-color .35s ease}
.top nav a[aria-current="true"]{background:rgba(var(--ink-rgb),.07)}
.roll{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3;vertical-align:top}
.roll span{display:block;transition:transform .5s var(--ease)}
.top nav a:hover .roll span{transform:translateY(-100%)}
@keyframes fadein{from{opacity:0}}

/* hero */
.hero{
  min-height:100svh;
  padding:calc(var(--hh) + clamp(20px,5vh,64px)) var(--pad) clamp(24px,5vh,56px);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,5vh,64px);
}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(52px,min(15vw,19vh),260px);
  line-height:.92;letter-spacing:-.035em;
}
.hero h1 .l{display:block;padding-bottom:.08em;margin-bottom:-.02em}
.hero h1 .sp{display:block}
.hero h1 .l:nth-child(2) .sp{font-style:italic;padding-left:.9em}
.hero h1 .l:nth-child(3) .sp{padding-left:.25em}
/* the hero is JS-built; hide the plain text until it is ready (failsafe shows it after 3s) */
.js .hero h1:not(.ready) .sp{opacity:0;animation:introSafe 0s 2s forwards}

/* letters arrive one by one: blur to sharp, rising, with a soft stagger */
.hero h1 .c{display:inline-block;opacity:0;filter:blur(16px);transform:translateY(.3em) scale(.96);transform-origin:50% 100%}
.go .hero h1 .c{animation:letterIn 1.25s cubic-bezier(.16,.84,.24,1) forwards;animation-delay:calc(.15s + var(--i) * 48ms)}
@keyframes letterIn{to{opacity:1;filter:blur(0);transform:none}}

/* "legacy." is filled with the studio's own photography, cross-dissolving inside the letters */
.fl{position:relative;display:inline-grid;margin-bottom:-.26em;font-style:italic;clip-path:inset(-20% 100% -30% -2%)}
.go .fl{animation:wipe 1.6s cubic-bezier(.7,0,.2,1) .95s forwards}
@keyframes wipe{to{clip-path:inset(-20% -12% -30% -2%)}}
.fl>span{grid-area:1/1;color:transparent;-webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1px rgba(var(--ink-rgb),.28);padding:0 .06em .26em 0}
.fl .base{background-image:linear-gradient(100deg,var(--ink),var(--accent) 55%,var(--accent-2))}
.fl .im{background-size:cover;background-position:50% 20%;opacity:0;transition:opacity 1.4s ease;animation:drift 11s ease-in-out infinite alternate}
.fl .im.on{opacity:1}
@keyframes drift{from{background-position:50% 12%}to{background-position:50% 78%}}
@media (prefers-reduced-motion:reduce){
  .hero h1 .c{opacity:1;filter:none;transform:none;animation:none!important}
  .fl{clip-path:none;animation:none!important}
  .fl .im{animation:none;transition:none}
}

.hero-foot{display:grid;grid-template-columns:minmax(120px,1fr) 4fr;gap:var(--pad);align-items:start}
.where{font-size:15px;color:var(--mute)}
.lede{max-width:36em;font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,3vh,28px)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;
  border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-size:15px;
  transition:background .3s,color .3s,border-color .3s;
}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s ease;
  background:linear-gradient(110deg,var(--ink) 0%,var(--accent) 100%)}
.btn:hover,.btn:focus-visible{border-color:var(--accent)}
.btn:hover::before,.btn:focus-visible::before{opacity:1}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--bg)}
.fin-cta{margin-top:clamp(20px,4vh,40px)}

/* sections */
.sec{
  display:grid;grid-template-columns:minmax(120px,1fr) 4fr;gap:var(--pad);
  padding:clamp(72px,14vh,160px) var(--pad) 0;
}
.label{font-family:var(--sans);font-weight:400;font-size:15px;color:var(--mute);padding-top:.5em}
.body{min-width:0;border-top:1px solid var(--line);padding-top:clamp(24px,4vh,48px)}

/* filters */
.tools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 32px;margin-bottom:clamp(16px,3vh,28px)}
.filters{display:flex;flex-wrap:wrap;gap:0 24px;font-size:15px}
.filters button{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--mute);transition:color .3s}
.filters button::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.filters button:hover,.filters button.on{color:var(--ink)}
.filters button.on::after{transform:scaleX(1)}
.count{font-size:15px;color:var(--mute)}

/* work rail */
.rail-wrap{margin-right:calc(var(--pad) * -1)}
.rail{
  display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,24px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:14px var(--pad) 8px 0;margin-top:-14px;
  user-select:none;-webkit-user-select:none;
}
.rail::-webkit-scrollbar{display:none}
.rail.drag{scroll-snap-type:none;cursor:grabbing}
.rail.gliding{scroll-snap-type:none}
.rail{scroll-behavior:auto}
.rail .work{translate:var(--rb,0px) 0}
.work{flex:0 0 clamp(220px,22vw,320px);scroll-snap-align:start}
.work.lower{margin-top:clamp(20px,3.4vw,56px)}
.work[hidden]{display:none}
.poster{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--dark);transition:transform .5s var(--ease)}
.poster .bg{position:absolute;inset:0;transition:transform 1.4s var(--ease);background:radial-gradient(70% 60% at 30% 20%,#2A3A8A,transparent 65%),#12131A}
.work[data-cat="fb"] .bg{background:radial-gradient(70% 60% at 30% 20%,#7A4A2A,transparent 65%),#17120F}
.work[data-cat="events"] .bg{background:radial-gradient(70% 60% at 30% 20%,#5A2F6E,transparent 65%),#130F18}
.work[data-cat="corporate"] .bg{background:radial-gradient(70% 60% at 30% 20%,#2D6670,transparent 65%),#0F1517}
.work[data-cat="automotive"] .bg{background:radial-gradient(70% 60% at 30% 20%,#5C5F68,transparent 65%),#121316}
.poster .bg::after{
  content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);transform:translate(-50%,-50%);transition:opacity .5s;
}
.poster.ready .bg::after{opacity:0}
.poster .bg::before{
  position:absolute;left:16px;top:14px;font-size:13px;line-height:1;color:rgba(255,255,255,.72);
  font-family:var(--sans);transition:opacity .5s;
}
.work[data-cat="campaigns"] .bg::before{content:"Campaigns"}
.work[data-cat="fb"] .bg::before{content:"F&B"}
.work[data-cat="events"] .bg::before{content:"Events"}
.work[data-cat="corporate"] .bg::before{content:"Corporate"}
.work[data-cat="automotive"] .bg::before{content:"Automotive"}
.poster.ready .bg::before{opacity:0}
/* ---- cover treatment: pixel art (default) ----
   The script shrinks each cover to a small grid and snaps it to a limited palette.
   On hover the clean photo fades in underneath. Settings live on the rail in index.html:
   data-look="pixel | halftone | plain", data-px="96", data-colors="28". */
.px,.px .clean,.px canvas,.pl{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.px .clean,.pl{background:var(--img) center/cover no-repeat}
.px canvas{
  image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated;
  transition:opacity .8s ease;
}
.poster:hover .px canvas,.poster:focus-visible .px canvas{opacity:0}
@media (hover:none){.poster:hover .px canvas{opacity:1}}

/* ---- cover treatment: blue blurred cover, sharp photo on hover (default) ----
   images/blur/<name>.jpg = tiny blurred colour field shown at rest, under a blue tint
   images/hd/<name>.jpg   = high-res photo revealed on hover / keyboard focus
   On touch screens the blur stays and a tap opens the player. */
.art,.art span{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.art span{background:center/cover no-repeat}
.art .hi{transform:scale(1.04);transition:transform 1.4s var(--ease)}
.art .lo{transform:scale(1.12);transition:opacity .8s ease,transform 1.4s var(--ease)}
.art::after{content:"";position:absolute;inset:0;background:rgba(31,43,255,.42);mix-blend-mode:multiply;transition:opacity .8s ease}
.poster:hover .art .lo,.poster:focus-visible .art .lo,
.poster:hover .art::after,.poster:focus-visible .art::after{opacity:0}
.poster:hover .art .hi,.poster:focus-visible .art .hi{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.art .lo,.art .hi{transition:none}}

/* ---- alternative look: colour halftone, pure CSS ----
   Tweak the look here. Every cover gets exactly the same treatment.
   --ht-size      distance between dots in px (smaller = finer, more refined)
   --ht-strength  how hard the dots cut (higher = crisper dots, lower = softer)
   --ht-bright    below 1 makes dots bigger and darker, above 1 makes them smaller
   --ht-contrast  tonal contrast of the dot pattern
   --ht-sat       colour saturation of the dots
   --ht-tint      0 to 0.4, a faint wash of the image colour between the dots
   --ht-hover     0 = dots dissolve into the clean image on hover, 1 = dots stay
   To switch the whole effect off and show plain images, add class "plain" to the
   element with id="rail" in index.html. */
.rail{
  --ht-size:5px;--ht-strength:16;--ht-bright:.9;--ht-contrast:1.15;--ht-sat:1.25;--ht-tint:.2;--ht-hover:0;
  --paper:var(--bg);
}
.ht,.ht span{position:absolute;inset:0;display:block}
.ht{isolation:isolate;background:var(--paper);pointer-events:none}
.ht .c{background:var(--img) center/cover no-repeat;filter:saturate(var(--ht-sat)) contrast(1.05)}
.ht .d{mix-blend-mode:screen;filter:contrast(var(--ht-strength));transition:opacity .8s ease}
.ht .g{background:var(--img) center/cover no-repeat;filter:grayscale(1) contrast(var(--ht-contrast)) brightness(var(--ht-bright))}
.ht .d::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(circle at 50% 50%,#000 0,#fff calc(var(--ht-size) * .5)),
    radial-gradient(circle at 0 0,#000 0,#fff calc(var(--ht-size) * .5)),
    radial-gradient(circle at 100% 0,#000 0,#fff calc(var(--ht-size) * .5)),
    radial-gradient(circle at 0 100%,#000 0,#fff calc(var(--ht-size) * .5)),
    radial-gradient(circle at 100% 100%,#000 0,#fff calc(var(--ht-size) * .5));
  background-size:var(--ht-size) var(--ht-size);
  background-blend-mode:darken;
}
.ht .p{mix-blend-mode:multiply;background:var(--paper);transition:opacity .8s ease}
.ht .t{mix-blend-mode:multiply;background:var(--img) center/cover no-repeat;opacity:var(--ht-tint);filter:saturate(1.5);transition:opacity .8s ease}
.poster:hover .ht .d,.poster:focus-visible .ht .d,
.poster:hover .ht .p,.poster:focus-visible .ht .p{opacity:var(--ht-hover)}
.poster:hover .ht .t,.poster:focus-visible .ht .t{opacity:calc(var(--ht-hover) * var(--ht-tint))}
.rail.plain .ht .d,.rail.plain .ht .p,.rail.plain .ht .t{display:none}
@media (hover:none){
  .poster:hover .ht .d,.poster:hover .ht .p{opacity:1}
  .poster:hover .ht .t{opacity:var(--ht-tint)}
}
.poster:hover .bg{transform:scale(1.06)}
.work:hover .poster{transform:translateY(-6px)}
.dot{
  position:absolute;right:14px;bottom:14px;width:44px;aspect-ratio:1;border-radius:50%;background:#fff;
  opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s;
}
.dot::before{
  content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--dark);
}
.poster:hover .dot,.poster:focus-visible .dot{opacity:1;transform:none}
.cap{padding-top:14px}
.cap h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.7vw,26px);line-height:1.15;transition:transform .4s var(--ease),color .3s}
.cap span{display:block;margin-top:2px;color:var(--mute);font-size:15px}
.work:hover .cap h3,.work:focus-within .cap h3{transform:translateX(6px);color:var(--accent)}

.rail-ctl{display:flex;align-items:center;gap:clamp(20px,3vw,40px);margin-top:clamp(16px,3vh,32px)}
.bar{position:relative;flex:1;height:1px;background:var(--line)}
.bar i{position:absolute;top:-1px;left:0;width:30%;height:3px;background:var(--ink);transition:left .15s linear}
.arrows{display:flex;gap:8px;font-size:15px}
.arrows button{min-height:44px;padding:0 12px;transition:opacity .3s,color .3s}
.arrows button:hover:not(:disabled){color:var(--accent)}
.arrows button:disabled{opacity:.35;cursor:default}

/* services */
.svc li{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--pad);
  padding:clamp(20px,3.4vh,34px) 0;border-bottom:1px solid var(--line);
}
.svc li:first-child{padding-top:0}
.svc h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1.08;letter-spacing:-.012em;transition:transform .4s var(--ease),color .3s}
.svc li:hover h3{transform:translateX(12px);color:var(--accent)}
.svc p{color:var(--mute);max-width:34em}

/* about */
.statement{position:relative;font-family:var(--serif);font-size:clamp(26px,3.2vw,48px);line-height:1.16;letter-spacing:-.018em;max-width:24em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* marquee */
.marquee{
  display:block;overflow:hidden;margin-top:clamp(72px,14vh,160px);
  padding:clamp(18px,3vw,36px) 0;border-block:1px solid var(--line);
}
.marquee:focus-visible{outline-offset:-4px}
.mq{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq span{
  display:flex;align-items:center;gap:.5em;padding-right:.5em;white-space:nowrap;
  font-family:var(--serif);font-style:italic;font-size:clamp(32px,4.8vw,68px);line-height:1.1;
}
.mq span::after{content:"";width:.16em;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.marquee:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* contact */
.mail{
  display:inline-block;font-family:var(--serif);font-size:clamp(30px,4.6vw,68px);line-height:1.1;letter-spacing:-.025em;
  background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;
  transition:background-size .5s var(--ease),color .3s;overflow-wrap:anywhere;
}
.mail:hover{background-size:100% 2px;color:var(--accent)}
.note{margin-top:clamp(16px,3vh,28px);color:var(--mute)}
.links{display:flex;flex-wrap:wrap;gap:0 32px;margin-top:20px}
.links a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.links a:hover{border-color:var(--accent);color:var(--accent)}

/* footer */
.foot{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:clamp(80px,16vh,180px);padding:24px var(--pad) 32px;
  border-top:1px solid var(--line);font-size:15px;color:var(--mute);
}
.foot a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}
.foot a:hover{color:var(--ink)}

/* cursor bubble (desktop with a mouse only) */
.cursor{
  position:fixed;left:0;top:0;z-index:50;width:76px;height:76px;margin:-38px 0 0 -38px;
  display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);
  font-size:14px;pointer-events:none;opacity:0;scale:.4;
  transition:opacity .25s,scale .45s var(--ease);
}
.cursor.on{opacity:1;scale:1}
.has-cursor .poster{cursor:none}
.has-cursor .dot{display:none}

/* player: rows (close / video / controls) so nothing can overlap */
dialog{
  width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(8,9,12,.97);color:#fff;
}
dialog::backdrop{background:rgba(8,9,12,.97)}
dialog[open]{display:flex;flex-direction:column}
.ptop{flex:none;display:flex;justify-content:flex-end;padding:6px var(--pad)}
.close{min-height:44px;padding:0 4px;font-size:15px}
.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--pad)}
.frame{
  width:min(100%,calc((100dvh - 170px) * 16 / 9));aspect-ratio:16/9;background:#000;
  display:grid;place-items:center;max-height:100%;
}
.frame.portrait{width:min(100%,420px);height:100%;max-height:780px;aspect-ratio:auto;background:#fff}
.frame iframe,.frame video{width:100%;height:100%;border:0;display:block}
.frame .soon{font-family:var(--serif);font-size:clamp(24px,3vw,40px);color:#bbb;padding:24px;text-align:center}
.frame .soon a{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:16px;color:#fff;border-bottom:1px solid currentColor}
.pnav{
  flex:none;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 24px;
  padding:8px var(--pad) 14px;font-size:15px;
}
.pinfo{display:flex;align-items:baseline;gap:14px;min-width:0}
#ptitle{font-family:var(--serif);font-size:24px;line-height:1.1}
#pcount{color:#9a9ca6}
.pbtns{display:flex;align-items:center;gap:6px}
.pbtns a,.pbtns button{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
.pbtns a{color:#c9cbd3}
.pbtns button:hover,.pbtns a:hover,.close:hover{color:#9AA0FF}
dialog.single #pprev,dialog.single #pnext,dialog.single #pcount{display:none}
dialog :focus-visible{outline-color:#9AA0FF}

/* scroll reveals (only when JS is running) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .work .poster{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) var(--d,0s),transform .5s var(--ease);
}
.js .work .bg{transform:scale(1.25)}
.js .work .cap{opacity:0;transform:translateY(10px);transition:opacity .8s ease var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js .work.reset .poster,.js .work.reset .bg,.js .work.reset .cap{transition:none}
.js .work.in .poster{clip-path:inset(0)}
.js .work.in .bg{transform:scale(1)}
.js .work.in .cap{opacity:1;transform:none}
.js .work.in .poster:hover .bg{transform:scale(1.06)}
.js .statement .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js .statement .w span{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--ease) calc(var(--i) * 28ms)}
.js .statement.in .w span{transform:none}

@media (pointer:coarse){.rail{scroll-snap-type:x mandatory}}

/* tablets and phones */
@media (max-width:820px){
  .sec,.hero-foot{grid-template-columns:1fr;gap:12px}
  .label{padding-top:0}
  .where{display:none}
  .rail-wrap{margin-left:calc(var(--pad) * -1)}
  .rail{padding-left:var(--pad);scroll-padding-left:var(--pad)}
  .work{flex-basis:62vw}
  .work.lower{margin-top:20px}
  .svc li{grid-template-columns:1fr;gap:8px}
  .svc li:hover h3{transform:none}
  .hero h1 .l:nth-child(2) .sp{padding-left:.4em}
}
@media (max-width:640px){
  .brand,.menu-btn{position:relative;z-index:2}
  .menu-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(var(--ink-rgb),.07);font-size:15px}
  .top nav{
    position:fixed;inset:0;z-index:1;background:var(--bg);
    flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:0 var(--pad);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
  }
  .top.open nav{opacity:1;visibility:visible}
  .top nav a{font-family:var(--serif);font-size:clamp(44px,14vw,72px);line-height:1.05;min-height:0;padding:0;border-radius:0;background:none!important}
  .top nav a .roll{height:auto;overflow:visible}
  .top nav a .roll span:last-child{display:none}
  .top nav a:hover .roll span{transform:none}
  html.menu-open{overflow:hidden}
  .arrows{display:none}
  .actions .btn{flex:1 1 auto}
  .hero h1{font-size:min(21vw,17vh)}
  .tools{display:block}
  .filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 22px;
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad);
  }
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none}
  .count{margin-top:2px}
}
@media (hover:none){
  .dot{opacity:1;transform:none}
  .work:hover .poster,.work:hover .cap h3,.svc li:hover h3{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mq span:not(:first-child){display:none}
  .mq{width:auto}
}

/* =========================================================
   VERSION 7 additions
   ========================================================= */

/* ---- opening sequence: aperture, timecode, iris reveal ---- */
html.intro-on:not(.go) body{background:#0E0F14}
html.intro-on:not(.go) main,html.intro-on:not(.go) .top,html.intro-on:not(.go) .foot{opacity:0;animation:introSafe 0s 6s forwards}
@keyframes introSafe{to{opacity:1}}
@property --ir{syntax:'<percentage>';inherits:false;initial-value:0%}
.intro{
  position:fixed;inset:0;z-index:200;background:#0E0F14;color:#fff;display:grid;place-items:center;
  --ir:0%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--ir),#000 calc(var(--ir) + .5%));
          mask-image:radial-gradient(circle at 50% 50%,transparent var(--ir),#000 calc(var(--ir) + .5%));
}
.intro.open{--ir:150%;transition:--ir 1s cubic-bezier(.7,0,.2,1)}
.intro.gone{display:none}
.intro .core{display:grid;justify-items:center;gap:18px;transition:opacity .35s,transform 1s var(--ease)}
.intro.open .core{opacity:0;transform:scale(1.4)}
.intro svg.ap{width:clamp(150px,26vmin,240px);height:auto;overflow:visible}
.intro .ap *{fill:none;stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.intro .ring{stroke-dasharray:440;stroke-dashoffset:440;animation:draw 1.1s cubic-bezier(.6,0,.2,1) .1s forwards}
.intro .spokes line{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .8s cubic-bezier(.6,0,.2,1) .45s forwards}
.intro .hex{stroke-dasharray:260;stroke-dashoffset:260;transform-origin:100px 100px;animation:draw .9s cubic-bezier(.6,0,.2,1) .35s forwards,spin 1.9s cubic-bezier(.6,0,.2,1) .35s forwards}
.intro .pup{fill:var(--accent);stroke:none;transform-origin:100px 100px;transform:scale(0);animation:pup .6s var(--ease) 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{from{transform:rotate(-60deg) scale(.6)}to{transform:rotate(0) scale(1)}}
@keyframes pup{to{transform:scale(1)}}
.intro .word{font-family:var(--serif);font-size:clamp(26px,4vmin,40px);letter-spacing:-.01em;opacity:0;animation:ifade .8s ease .8s forwards}
.intro .itc{font:500 12px/1 var(--sans);letter-spacing:.16em;color:#9a9ca6;font-variant-numeric:tabular-nums;opacity:0;animation:ifade .6s ease .5s forwards}
.intro .itc i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#ff3b30;animation:blink 1s steps(2) infinite}
.intro .corner{position:absolute;width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.2;opacity:.7}
.intro .corner path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .9s ease .2s forwards}
.intro .corner.tl{left:var(--pad);top:var(--pad)}.intro .corner.tr{right:var(--pad);top:var(--pad)}
.intro .corner.bl{left:var(--pad);bottom:var(--pad)}.intro .corner.br{right:var(--pad);bottom:var(--pad)}
@keyframes blink{50%{opacity:0}}

/* ---- player: thumbnail flies to the video and back ---- */
.fly{position:fixed;z-index:5;background:center/cover no-repeat #111;pointer-events:none;will-change:left,top,width,height}
dialog{transition:background-color .6s ease}
dialog::backdrop{transition:background-color .6s ease}
dialog.opening,dialog.closing{background:rgba(8,9,12,0)}
dialog.opening::backdrop,dialog.closing::backdrop{background:rgba(8,9,12,0)}
dialog .ptop,dialog .pnav{transition:opacity .5s ease}
dialog.opening .ptop,dialog.opening .pnav,dialog.closing .ptop,dialog.closing .pnav{opacity:0}

/* ---- finale headline ---- */
.finale{padding:clamp(72px,14vh,180px) var(--pad) 0;overflow:hidden}
.fin{font-family:var(--serif);font-size:clamp(40px,7.6vw,120px);line-height:1;letter-spacing:-.035em}
.fin .fw{display:inline-block;white-space:nowrap;overflow:hidden;padding:.14em 0 .16em;margin:-.14em 0 -.16em}
.fin .ch,.mail .ch{display:inline-block;--p:0;
  translate:0 calc(var(--p) * -.1em);
  color:color-mix(in srgb,var(--accent) calc(var(--p) * 100%),var(--ink));
  transition:transform 1.1s var(--ease) calc(var(--i) * 32ms),translate .35s var(--ease),color .35s}
.fin .it{font-style:italic}
.mail .ch{transition:translate .35s var(--ease),color .35s}
.mail:hover{color:inherit}
.js .fin .ch{transform:translateY(115%)}
.js .fin.in .ch{transform:none}
@media (max-width:640px){.fin{font-size:clamp(40px,12.4vw,72px)}}
@media (prefers-reduced-motion:reduce){.js .fin .ch{transform:none}}
@keyframes ifade{from{opacity:0}to{opacity:1}}

/* =========================================================
   VERSION 9: Apple-style craft (response, materials, type, a11y)
   ========================================================= */

/* response: feedback on press, instantly, not on release */
.btn:active{transform:scale(.97);transition:transform .1s ease-out,border-color .3s}
.filters button:active,.rail-ctl button:active,.menu-btn:active{opacity:.55;transition:opacity .08s}
.work .poster:active{transform:translateY(-3px) scale(.985);transition-duration:.1s}
.fin-cta .btn,.hero .btn{transition:transform .35s var(--ease),border-color .3s}

/* type: tracking follows size (tight when big, a touch open when small), leading follows size inversely */
html{font-optical-sizing:auto;text-rendering:optimizeLegibility}
body{line-height:1.5}
.hero h1{letter-spacing:-.045em}
.statement{letter-spacing:-.022em}
.mail{letter-spacing:-.03em}
.svc h3,.work h3{letter-spacing:-.012em}
.label,.count,.filters button,.work span,.foot,.top nav,.hero .where{letter-spacing:.012em}
.hero h1,.fin,.statement,.svc h3{text-wrap:balance}
p,.lede{text-wrap:pretty}

/* materials: the player is a dimmed, blurred layer; chrome floats on glass */
dialog::backdrop{-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  transition:background-color .6s ease,backdrop-filter .6s ease,-webkit-backdrop-filter .6s ease}
dialog.opening::backdrop,dialog.closing::backdrop{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}

/* accessibility signals */
@media (prefers-reduced-transparency:reduce){
  .top::before{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .top::before{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;border-bottom:1px solid var(--ink)}
  .label,.count,.filters button,.foot{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .rail .work{translate:none}
  .btn:active,.work .poster:active{transform:none}
}


/* =========================================================
   VERSION 13: staged hero entrance + new hero layout + enquiry form
   ========================================================= */

/* hero layout: label and rule on top, headline bottom-left, intro column bottom-right */
.hero{
  display:grid;justify-content:normal;gap:0;
  grid-template-columns:minmax(0,1fr) minmax(250px,min(24vw,360px));
  grid-template-rows:auto 1fr auto;column-gap:var(--pad);
}
.hero-top{grid-column:1/-1;grid-row:1;position:relative;padding-top:14px}
.hrule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:left center}
.hlabel{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--mute);letter-spacing:.012em}
.hlabel i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block}
.hero h1{grid-column:1;grid-row:2;align-self:end;margin-top:clamp(24px,5vh,64px)}
.hero-foot{display:block;grid-column:2;grid-row:2;align-self:end;margin-bottom:clamp(6px,1.2vw,18px)}
.hero-foot .lede{max-width:26em;font-size:clamp(17px,1.35vw,20px)}
.cue{grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:14px;margin-top:clamp(20px,4vh,44px);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.cue i{position:relative;width:56px;height:1px;background:var(--line);overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:0;height:1px;width:40%;background:var(--accent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* nothing is on screen before its turn */
.js .hx{opacity:0;animation:introSafe 0s 9s forwards}
.js .hrule{transform:scaleX(0);animation:ruleSafe 0s 9s forwards}
@keyframes ruleSafe{to{transform:none}}
@keyframes hxUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ruleIn{to{transform:scaleX(1)}}
@keyframes topIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* the sequence: rule draws, label, headline letters, "legacy." wipes, intro text, header, cue */
.go .hrule{animation:ruleIn 1.5s cubic-bezier(.7,0,.2,1) .1s forwards}
.go .hlabel{animation:hxUp .9s var(--ease) .5s forwards}
.go .hero h1 .c{animation-delay:calc(.7s + var(--i) * 48ms)}
.go .fl{animation-delay:1.55s}
.go .hero-foot{animation:hxUp 1.1s var(--ease) 2.45s forwards}
.go .top{animation:topIn 1s var(--ease) 2.7s backwards}
.go .cue{animation:hxUp 1s var(--ease) 3s forwards}

@media (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero h1{grid-row:2}
  .hero-foot{grid-column:1;grid-row:3;margin:clamp(24px,4vh,40px) 0 0}
  .cue{grid-row:4}
}
@media (max-width:640px){
  .hlabel{font-size:14px}
  .cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .hx{opacity:1;animation:none!important}
  .js .hrule{transform:none;animation:none!important}
  .go .top{animation:none}
  .cue i::after{animation:none}
}

/* ---- enquiry form ---- */
.finale{padding-bottom:0}
.fin-sub{margin-top:clamp(16px,3vh,28px);color:var(--mute);font-size:clamp(17px,1.4vw,20px)}
.enq-wrap{position:relative;max-width:980px;margin-top:clamp(36px,7vh,72px)}
.enq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vh,48px) clamp(24px,4vw,64px);transition:opacity .45s ease}
.enq.out{opacity:0;pointer-events:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fld{position:relative;display:block;min-width:0}
.fld.wide{grid-column:1/-1}
.fld-l{display:block;font-size:14px;letter-spacing:.012em;color:var(--mute);transition:color .3s}
.fld-l em{font-style:normal;opacity:.7}
.fld input,.fld textarea,.fld select{
  display:block;width:100%;margin:0;padding:10px 0 14px;border:0;border-radius:0;
  border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:var(--serif);font-size:clamp(22px,2.2vw,32px);line-height:1.2;letter-spacing:-.01em;
  caret-color:var(--accent);outline:none;resize:none;-webkit-appearance:none;appearance:none;
}
.fld textarea{min-height:3.8em}
.fld ::placeholder{color:var(--mute);opacity:.45}
.fld::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--ink),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.fld:hover::after{transform:scaleX(.2)}
.fld:focus-within::after{transform:scaleX(1)}
.fld:hover .fld-l{color:var(--ink)}
.fld:focus-within .fld-l{color:var(--accent)}
.fld.sel select{padding-right:34px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%231F2BFF' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center}
.fld.sel select.empty{color:var(--mute);opacity:.6}
.fld.sel option{font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--bg)}
.fld-e{display:block;margin-top:8px;font-size:13px;color:var(--err)}
.fld.err::after{background:var(--err);transform:scaleX(1)}
.fld.err .fld-l{color:var(--err)}

.enq-foot{grid-column:2;align-self:end;display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.enq .btn{min-height:56px;padding:0 34px;font-size:16px}
.enq .btn .arr{display:inline-block;margin-left:12px;transition:transform .45s var(--ease)}
.enq .btn:hover .arr,.enq .btn:focus-visible .arr{transform:translateX(6px)}
.enq .btn[disabled]{cursor:progress;opacity:.7}
.enq .btn[disabled] .arr{animation:nudge 1s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(7px)}}
.enq-msg{margin:0;font-size:14px;color:var(--err)}
.enq-msg:empty{display:none}

.enq-done{padding:clamp(8px,2vh,24px) 0}
.enq-done:not([hidden]){animation:hxUp 1s var(--ease) both}
.ed-h{font-family:var(--serif);font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-.03em}
.ed-h em{color:var(--accent)}
.ed-p{margin-top:16px;color:var(--mute);font-size:clamp(17px,1.4vw,20px)}
.enq-done:focus{outline:none}

@media (max-width:760px){
  .enq{grid-template-columns:1fr}
  .enq-foot{grid-column:1}
  .enq .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .fld::after,.enq .btn .arr{transition:none}
  .enq .btn[disabled] .arr,.enq-done:not([hidden]){animation:none}
}

/* the hidden attribute must win over the display rules above */
.fld-e[hidden],.enq[hidden],.enq-done[hidden]{display:none}


/* =========================================================
   VERSION 14: "Let's talk" header pill + capability tags
   ========================================================= */
.top nav a.nav-cta{
  position:relative;overflow:hidden;isolation:isolate;margin-left:10px;padding:0 18px;min-height:38px;gap:8px;
  border:1px solid var(--ink);background:transparent;
  transition:color .35s ease,border-color .35s ease,opacity .35s ease,transform .1s ease-out;
}
.top nav a.nav-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s ease;
  background:linear-gradient(110deg,var(--ink) 0%,var(--accent) 100%);
}
.top nav a.nav-cta:hover,.top nav a.nav-cta:focus-visible{color:var(--bg);border-color:var(--accent)}
.top nav a.nav-cta:hover::before,.top nav a.nav-cta:focus-visible::before{opacity:1}
.nav-cta .arr{flex:none;transition:transform .4s var(--ease)}
.nav-cta:hover .arr,.nav-cta:focus-visible .arr{transform:translate(2px,-2px)}
.top nav a.nav-cta:active{transform:scale(.97)}
/* when you are already at the form, the button steps back */
.top nav a.nav-cta[aria-current="true"]{background:transparent;color:var(--mute);border-color:var(--line)}
.top nav a.nav-cta[aria-current="true"]:hover{color:var(--bg);border-color:var(--accent)}


@media (max-width:640px){
  .top nav a.nav-cta{
    margin:14px 0 0;padding:0;min-height:0;border:0;overflow:visible;gap:12px;
    color:var(--accent);background:none!important;
  }
  .top nav a.nav-cta::before{display:none}
  .top nav a.nav-cta .arr{width:.5em;height:.5em}
  .top nav a.nav-cta[aria-current="true"]{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){.top nav a.nav-cta,.nav-cta .arr,.top nav a.nav-cta::before{transition:none}}


/* =========================================================
   VERSION 15: compact hero, still headline + cursor light,
   flowing button gradients, compact contact, top-edge fade
   ========================================================= */

/* hero: no label or rule; shorter, tighter */
.hero{
  min-height:clamp(560px,82svh,820px);
  padding-top:calc(var(--hh) + clamp(8px,2vh,24px));
  padding-bottom:clamp(20px,4vh,40px);
  grid-template-rows:1fr auto;position:relative;
}
.hero>*:not(.hero-fx){position:relative;z-index:1}
.hero h1{grid-row:1;margin-top:0}
.hero-foot{grid-row:1}
.cue{grid-row:2;margin-top:clamp(14px,3vh,32px)}
#work{padding-top:clamp(40px,7vh,88px)}
@media (max-width:1000px){
  .hero h1{grid-row:1}
  .hero-foot{grid-row:2;margin-top:clamp(20px,3vh,32px)}
  .cue{grid-row:3}
}

/* entrance without the label: letters rise, "legacy." wipes, copy, header, cue */
.go .hero h1 .c{animation-duration:1.4s;animation-delay:calc(.25s + var(--i) * 42ms)}
.go .fl{animation-delay:1.15s}
.go .hero-foot{animation-delay:1.95s}
.go .top{animation-delay:2.15s}
.go .cue{animation-delay:2.5s}

/* the cursor light: a faint blue glow behind the type, and the letters near it take a little colour */
.hero-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow{
  position:absolute;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--acc-rgb),.20),rgba(var(--acc-rgb),.07) 55%,transparent);
  opacity:0;transition:opacity .7s ease;will-change:transform;
}
.glow.on{opacity:1}
.hero h1 .c{--p:0;color:color-mix(in srgb,var(--accent) calc(var(--p) * 70%),var(--ink))}

/* "legacy." : the gradient behind the photos drifts slowly */
.fl .base{background-size:240% 100%;animation:flowAlt 9s ease-in-out infinite alternate}
@keyframes flowAlt{from{background-position:0% 0}to{background-position:100% 0}}

/* buttons: a gradient that flows while you hover, and a soft light under the cursor */
.btn::before,.top nav a.nav-cta::before{
  background:linear-gradient(110deg,var(--ink) 0%,var(--accent) 25%,var(--accent-2) 50%,var(--accent) 75%,var(--ink) 100%);
  background-size:300% 100%;animation:flow 3.4s linear infinite;animation-play-state:paused;
}
.btn:hover::before,.btn:focus-visible::before,
.top nav a.nav-cta:hover::before,.top nav a.nav-cta:focus-visible::before{animation-play-state:running}
@keyframes flow{to{background-position:150% 0}}
.btn::after,.top nav a.nav-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(110px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.32),transparent 65%);
}
.btn:hover::after,.btn:focus-visible::after,
.top nav a.nav-cta:hover::after,.top nav a.nav-cta:focus-visible::after{opacity:1}
.btn .arr{transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(6px)}
.btn:active,.top nav a.nav-cta:active{transform:scale(.96)}
@media (max-width:640px){.top nav a.nav-cta::after{display:none}}

/* contact: compact, so the whole form is in view when you jump to it */
.finale{padding-top:clamp(12px,3vh,32px)}
.fin{font-size:clamp(40px,min(5.8vw,9.5vh),92px)}
.fin-sub{margin-top:clamp(8px,1.6vh,16px);font-size:clamp(16px,1.25vw,19px)}
.enq-wrap{margin-top:clamp(16px,3.2vh,34px);max-width:960px}
.enq{gap:clamp(16px,2.8vh,28px) clamp(24px,4vw,64px)}
.fld input,.fld textarea,.fld select{padding:6px 0 10px;font-size:clamp(20px,1.8vw,26px)}
.fld textarea{min-height:2.7em}
.enq .btn{min-height:52px}
.ed-h{font-size:clamp(40px,5vw,72px)}
@media (max-width:640px){.fin{font-size:clamp(36px,11vw,56px)}}

/* fade whatever scrolls out of the top of the screen */
.edge{
  position:fixed;inset:0 0 auto 0;z-index:15;height:clamp(60px,11vh,112px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--bg-rgb),1) 0%,rgba(var(--bg-rgb),.92) 24%,rgba(var(--bg-rgb),.6) 52%,rgba(var(--bg-rgb),.22) 78%,rgba(var(--bg-rgb),0) 100%);
}
@media (max-height:600px){.edge{height:56px}}
@media (prefers-reduced-motion:reduce){
  .fl .base{animation:none}
  .btn::before,.top nav a.nav-cta::before{animation:none}
  .glow{display:none}
}


/* ---- timeline dropdown (desktop) ---- */
.finale{overflow-x:clip;overflow-y:visible}
.fld.has-dd select{display:none}
.dd-btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:6px 0 10px;
  border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer;outline:none;
  font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.01em;
}
.dd-val.empty{color:var(--mute);opacity:.6}
.dd-val.picked{animation:pick 1.4s ease}
@keyframes pick{from{color:var(--accent)}to{color:var(--ink)}}
.dd-chev{flex:none;color:var(--accent);transition:transform .45s var(--ease)}
.dd-open .dd-chev{transform:rotate(180deg)}
.dd-open::after{transform:scaleX(1)}
.dd-open .fld-l{color:var(--accent)}
.dd-list{
  position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:min(100%,340px);margin:0;padding:6px;list-style:none;
  border-radius:20px;border:1px solid rgba(var(--ink-rgb),.08);background:rgba(var(--bg-rgb),.88);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 22px 54px rgba(var(--ink-rgb),.16),0 1px 0 rgba(255,255,255,.6) inset;
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:0 0;outline:none;
  transition:opacity .22s ease,transform .35s var(--ease);
}
.dd-list[hidden]{display:none}
.dd-list.up{top:auto;bottom:calc(100% + 8px);transform-origin:0 100%;transform:translateY(8px) scale(.98)}
.dd-list.on{opacity:1;transform:none}
.dd-hl{
  position:absolute;left:6px;right:6px;top:0;border-radius:14px;background:rgba(var(--ink-rgb),.06);opacity:0;pointer-events:none;
  transition:transform .38s var(--ease),height .38s var(--ease),opacity .2s ease;
}
.dd-list li{
  position:relative;display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:14px;cursor:pointer;
  font-family:var(--serif);font-size:20px;line-height:1.2;letter-spacing:-.005em;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .4s var(--ease);
}
.dd-list.on li{opacity:1;transform:none;transition-delay:calc(var(--i) * 40ms + 60ms)}
.dd-list li .n{width:1.5em;font:500 11px/1 var(--sans);letter-spacing:.14em;color:var(--mute)}
.dd-list li .t{flex:1;transition:transform .4s var(--ease)}
.dd-list li.act .t{
  transform:translateX(5px);color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,var(--ink) 0%,var(--accent) 25%,var(--accent-2) 50%,var(--accent) 75%,var(--ink) 100%);
  background-size:300% 100%;animation:flow 3s linear infinite;
}
.dd-list .tick{flex:none;color:var(--accent);stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .45s var(--ease)}
.dd-list li[aria-selected="true"] .tick{stroke-dashoffset:0}

/* ---- click animations ---- */
.rip{
  position:absolute;z-index:-1;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.42);
  transform:translate(-50%,-50%) scale(0);animation:rip .7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes rip{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@media (hover:none){.btn.ghost .rip{background:rgba(31,43,255,.2)}}
.btn .arr{--dx:16px;--dy:0px}
.nav-cta .arr{--dx:12px;--dy:-12px}
.arr.dash{animation:dash .6s var(--ease)}
@keyframes dash{
  0%{transform:translate(0,0);opacity:1}
  45%{transform:translate(var(--dx),var(--dy));opacity:0}
  46%{transform:translate(calc(var(--dx) * -1),calc(var(--dy) * -1));opacity:0}
  100%{transform:translate(0,0);opacity:1}
}

/* send button: sweep while sending, tick when sent, shake if it fails */
.enq .btn .sweep{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.4) 50%,transparent 75%);
}
.enq .btn.sending,.enq .btn.sent{opacity:1}
.enq .btn.sending{cursor:progress}
.enq .btn.sent{cursor:default}
.enq .btn.sending::before,.enq .btn.sent::before{opacity:1;animation-play-state:running}
.enq .btn.sending .sweep{opacity:1;animation:sweep 1.1s ease-in-out infinite}
@keyframes sweep{to{transform:translateX(100%)}}
.enq .btn.sent .arr{animation:none}
.okk{display:block;width:14px;height:14px}
.okk path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-dasharray:16;stroke-dashoffset:16;animation:tickIn .5s var(--ease) forwards}
@keyframes tickIn{to{stroke-dashoffset:0}}
.enq .btn.shake{animation:shake .45s ease}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){
  .dd-list,.dd-list li,.dd-hl,.dd-chev,.dd-list .tick{transition:none}
  .dd-list li.act .t,.dd-val.picked,.enq .btn.sending .sweep,.okk path{animation:none}
  .okk path{stroke-dashoffset:0}
}

/* the cursor light fades out at the hero's edges instead of being cut off */
.hero-fx{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 70%,transparent 100%)}


/* =========================================================
   VERSION 16: thank-you replaces the headline in place
   ========================================================= */
.fin-stack{display:grid}
.fin-stack>*{grid-area:1/1}
.fin-thanks,.fin-sub-thanks{opacity:0;visibility:hidden;transform:translateY(12px);filter:blur(6px)}
.fin-thanks em{font-style:italic;color:var(--accent)}
.fin-thanks:focus{outline:none}
.fin-stack>*{transition:opacity .6s ease,transform .8s var(--ease),filter .6s ease,visibility 0s}
.finale.thanks #fin,.finale.thanks .fin-stack>.fin-sub:not(.fin-sub-thanks){opacity:0;transform:translateY(-12px);filter:blur(6px);visibility:hidden;transition-delay:0s,0s,0s,.6s}
.finale.thanks .fin-thanks,.finale.thanks .fin-sub-thanks{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:.35s,.35s,.35s,0s}
.enq-done{padding-top:clamp(8px,2vh,20px)}
.enq-done:not([hidden]){animation:hxUp 1s var(--ease) .5s both}
@media (prefers-reduced-motion:reduce){
  .fin-stack>*{transition:none}
  .fin-thanks,.fin-sub-thanks{filter:none;transform:none}
}


/* =========================================================
   v17: dark theme, header toggles, accessibility
   ========================================================= */
html[data-theme="dark"]{
  --bg:#0F1015;--ink:#ECEDF1;--mute:#A6A9B5;--line:#2C2E38;--accent:#8D94FF;--accent-2:#C6CAFF;
  --bg-rgb:15,16,21;--ink-rgb:236,237,241;--acc-rgb:120,128,255;--on-accent:#0F1015;--err:#FF8C75;
  color-scheme:dark;
}
html[data-theme="dark"] .top::before{box-shadow:0 8px 28px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.06) inset}
html[data-theme="dark"] .dd-list,html[data-theme="dark"] .dd-panel{box-shadow:0 22px 54px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06) inset}
html[data-theme="dark"] .rip{background:rgba(15,16,21,.28)}
html[data-theme="dark"] .btn::after,html[data-theme="dark"] .top nav a.nav-cta::after{background:radial-gradient(110px circle at var(--mx,50%) var(--my,50%),rgba(15,16,21,.22),transparent 65%)}
html[data-theme="dark"] .art::after{background:rgba(31,43,255,.5)}
body,.top::before,.edge{transition:background-color .45s ease,color .45s ease}

/* theme + motion toggles in the header */
.tg{display:flex;align-items:center;gap:2px;margin-left:6px}
.tg button{
  position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:var(--ink);transition:background-color .3s ease,color .3s ease;
}
.tg button:hover{background:rgba(var(--ink-rgb),.08)}
.tg button[aria-pressed="true"]{background:rgba(var(--acc-rgb),.14);color:var(--accent)}
.tg button[aria-disabled="true"]{cursor:default}
.tg svg{display:block;pointer-events:none}
.tg .i-moon,.tg .i-still{display:none}
.tg #themeBtn[aria-pressed="true"] .i-sun{display:none}
.tg #themeBtn[aria-pressed="true"] .i-moon{display:block}
.tg #motionBtn[aria-pressed="true"] .i-move{display:none}
.tg #motionBtn[aria-pressed="true"] .i-still{display:block}
@media (max-width:640px){
  .top nav .tg{margin:28px 0 0 -8px;gap:10px}
  .top nav .tg button{width:52px;height:52px;border:1px solid var(--line)}
}

/* accessibility */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.nav-cta:focus-visible,.tg button:focus-visible{outline-offset:3px;border-radius:999px}
.sr,.sr-only{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}
@media (forced-colors:active){
  .btn,.tg button{border:1px solid ButtonText}
  .tg button[aria-pressed="true"]{outline:2px solid Highlight}
}

/* manual "reduce motion" (also applied when the device asks for it) */
html.rm{scroll-behavior:auto}
html.rm *,html.rm *::before,html.rm *::after{
  animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;
  transition-duration:.001s!important;transition-delay:0s!important;scroll-behavior:auto!important;
}
html.rm .mq span:not(:first-child){display:none}
html.rm .mq{width:auto}

/* v18: everything below the hero waits until the hero has landed, then fades in */
.js:not(.below) main.home>:not(.hero){opacity:0;animation:introSafe 0s 4s forwards}
.js main.home>:not(.hero){transition:opacity 1.1s ease}

/* v19: hero words never split mid-word (iOS), reduce-motion button hidden for now (code kept) */
.hero h1,.hero h1 .l,.hero h1 .sp{white-space:nowrap;text-wrap:nowrap}
.tg #motionBtn{display:none}
.foot{gap:12px 24px;flex-wrap:wrap}
.foot .pv-link{margin-left:auto;margin-right:auto}