/* ============================================================
   THE UMBRELLA CREW — v1 draft
   Palette: ink on paper + one signal colour
   ============================================================ */

:root{
  --ink:#0B0B0C;
  --ink-70:rgba(11,11,12,.7);
  --ink-45:rgba(11,11,12,.58);   /* muted text — 4.5:1 on paper */
  --ink-15:rgba(11,11,12,.15);
  --ink-08:rgba(11,11,12,.08);
  --paper:#F4F1EA;
  --paper-2:#E9E4D9;
  --accent:#4C35E8;
  --accent-lite:#9B8BFF;      /* accent legible on dark surfaces */
  --accent-text:var(--accent);
  --accent-soft:#E8E4FF;
  --rain:#7C6BFF;

  --nav-h:84px;
  --tick-h:34px;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  --f-display:'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-hand:'Caveat','Bradley Hand','Segoe Script',cursive;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --snap:.15s cubic-bezier(.4,0,.2,1);

  --pad:clamp(20px,5vw,80px);
  --sec:clamp(56px,7.5vw,110px);
}

/* any dark surface switches accent text to the lighter tint */
.dark,.ticker,.loader,.deck__card,.brw__pane,.mode,.step,.hscroll,footer{--accent-text:var(--accent-lite)}
.mode--hot{--accent-text:#fff}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.is-locked,body.is-locked{overflow:hidden}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;white-space:normal}
::selection{background:var(--accent);color:#fff}

/* grain ------------------------------------------------------ */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:transform 1.1s var(--ease);
}
.loader.done{transform:translateY(-101%)}
.loader__bar{width:min(60vw,320px);height:1px;background:rgba(244,241,234,.2);margin-top:36px;position:relative;overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--accent-lite);transform:scaleX(0);transform-origin:0 50%;}
.loader__meta{display:flex;justify-content:space-between;width:min(60vw,320px);margin-top:14px;
  font-family:var(--f-mono);font-size:11.5px;color:rgba(244,241,234,.55)}
.loader__pct{font-variant-numeric:tabular-nums}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:38px;height:38px;border:1px solid #fff;margin:-19px 0 0 -19px;
  transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),opacity .3s,background .3s}
.cursor-dot{width:5px;height:5px;background:#fff;margin:-2.5px 0 0 -2.5px;transition:opacity .3s}
.cursor.is-hover{width:76px;height:76px;margin:-38px 0 0 -38px;background:#fff;border-color:transparent}
.cursor.is-hidden,.cursor-dot.is-hidden{opacity:0}
.cursor__label{font-family:var(--f-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#000;mix-blend-mode:normal;opacity:0;transition:opacity .25s;position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center}
.cursor.is-hover .cursor__label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* progress */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--accent);z-index:9000}

/* ============================================================
   NAV
   ============================================================ */
/* announcement ticker — small, black, three rotating notes */
.ticker{position:fixed;top:0;left:0;width:100%;height:var(--tick-h);z-index:8100;background:var(--ink);
  color:rgba(244,241,234,.82);display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:-.01em;
  transition:transform .5s var(--ease)}
.ticker.up{transform:translateY(-100%)}
.ticker__vp{position:relative;height:1.4em;width:min(92vw,760px);overflow:hidden}
.ticker__i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;
  opacity:0;transform:translateY(90%);transition:opacity .45s var(--ease),transform .55s var(--ease);
  white-space:nowrap}
.ticker__i.on{opacity:1;transform:none}
.ticker__i.out{opacity:0;transform:translateY(-90%)}
.ticker__i b{font-weight:400;color:var(--accent-text)}

.nav{position:fixed;top:var(--tick-h);left:0;width:100%;height:var(--nav-h);z-index:8000;
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);
  mix-blend-mode:normal;transition:height .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.nav.tickerup{top:0}
.nav.scrolled{height:66px;background:rgba(244,241,234,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-08)}
.nav.on-dark{color:var(--paper)}
.nav.on-dark.scrolled{background:rgba(11,11,12,.6);border-bottom-color:rgba(244,241,234,.12)}
.nav__brand{display:flex;align-items:center;gap:10px;z-index:2}
.nav__brand svg{width:40px;height:auto;transition:transform .5s var(--ease)}
.nav__brand:hover svg{transform:translateY(-3px) rotate(-6deg)}
.nav__brand span{font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.02em;line-height:1.05}
.nav__brand span em{display:block;font-style:normal;font-weight:400;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.5}
.nav__links{display:flex;gap:6px;align-items:center}
.nav__link{position:relative;font-family:var(--f-display);font-size:13px;font-weight:500;letter-spacing:.01em;
  padding:9px 15px;border-radius:100px;transition:background .35s var(--ease),color .35s}
.nav__link::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav__link.active{background:var(--ink);color:var(--paper)}
.nav.on-dark .nav__link.active{background:var(--paper);color:var(--ink)}
.nav__link.active::after{display:none}
.nav__right{display:flex;align-items:center;gap:14px;z-index:2}
.btn-pill{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:100px;
  background:var(--accent);color:#fff;font-family:var(--f-display);font-size:13px;font-weight:600;
  position:relative;overflow:hidden;transition:transform .5s var(--ease)}
.btn-pill span{position:relative;z-index:1;transition:color .4s}
.btn-pill::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);
  transition:transform .55s var(--ease)}
.btn-pill:hover::before{transform:translateY(0)}
.btn-pill:hover{transform:translateY(-2px)}
.btn-pill i{position:relative;z-index:1;width:7px;height:7px;border-radius:50%;background:#fff;
  }
.btn-pill i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;
  animation:pop 1.5s cubic-bezier(.165,.84,.44,1) infinite}
@keyframes pop{0%{transform:scale(1);opacity:1}
  55%{transform:scale(1);opacity:1}70%{transform:scale(1.9);opacity:.35}100%{transform:scale(2.6);opacity:0}}
.dot{position:relative;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;
  animation:pop 1.5s cubic-bezier(.165,.84,.44,1) infinite}
.nav.menu-open{color:var(--paper);background:transparent;border-bottom-color:transparent}
.nav.menu-open .burger{border-color:rgba(244,241,234,.28)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--ink-15);border-radius:50%;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav.on-dark .burger{border-color:rgba(244,241,234,.25)}
.burger i{width:16px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.burger.open i:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
.burger.open i:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}

/* mobile overlay menu */
.menu{position:fixed;inset:0;z-index:7900;background:var(--ink);color:var(--paper);
  clip-path:circle(0% at calc(100% - 46px) 42px);transition:clip-path .9s var(--ease);
  display:flex;flex-direction:column;justify-content:center;padding:var(--nav-h) var(--pad) var(--pad);pointer-events:none}
.menu.open{clip-path:circle(150% at calc(100% - 46px) 42px);pointer-events:auto}
.menu > a{font-family:var(--f-display);font-size:clamp(38px,11vw,72px);font-weight:500;letter-spacing:-.03em;
  line-height:1.12;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s var(--ease);
  display:flex;align-items:baseline;gap:14px}
.menu > a sup{font-family:var(--f-body);font-size:12px;opacity:.4;letter-spacing:.1em}
.menu.open > a{opacity:1;transform:none}
.menu.open > a:nth-child(1){transition-delay:.2s}.menu.open > a:nth-child(2){transition-delay:.27s}
.menu.open > a:nth-child(3){transition-delay:.34s}.menu.open > a:nth-child(4){transition-delay:.41s}
.menu.open > a:nth-child(5){transition-delay:.48s}
.menu__foot{margin-top:auto;padding-top:40px;display:flex;flex-wrap:wrap;gap:10px 20px;
  justify-content:space-between;font-size:13px;opacity:.55}
/* the address and number under the menu are small print — they were picking
   up the 41px size meant for the five page links above them */
.menu__foot a{font-family:var(--f-mono);font-size:12.5px;font-weight:400;letter-spacing:0;
  line-height:1.5;display:inline;opacity:1;transform:none}

/* ============================================================
   PAGE TRANSITION CURTAIN
   ============================================================ */
/* umbrella canopy sweeps up, rains, then lifts away */
.curtain{position:fixed;inset:0;z-index:8500;pointer-events:none;overflow:hidden;
  --scal:clamp(10px,1.4vw,22px)}
.curtain__sheet{position:absolute;left:0;width:100%;top:0;height:100%;
  transform:translateY(calc(100% + var(--scal)));transition:transform .78s var(--ease-io)}
.curtain.in .curtain__sheet{transform:translateY(calc(var(--scal) * -1))}
.curtain.out .curtain__sheet{transform:translateY(calc(-100% - var(--scal)));transition-duration:.72s}
.curtain__scallop{position:absolute;bottom:100%;left:0;width:100%;height:var(--scal);
  color:var(--ink);display:block}
.curtain__fill{position:absolute;inset:0;background:var(--ink);overflow:hidden}
.curtain__rain{position:absolute;inset:-20% -10%;opacity:0;transition:opacity .35s;
  background-image:repeating-linear-gradient(9deg,transparent 0 22px,rgba(244,241,234,.16) 22px 24px,transparent 24px 60px);
  background-size:auto 220px;animation:curtainRain .9s linear infinite}
.curtain.in .curtain__rain{opacity:1}
@keyframes curtainRain{to{background-position:0 220px}}
.curtain__mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(14px) scale(.94);transition:opacity .4s var(--ease),transform .55s var(--ease)}
.curtain.in .curtain__mark{opacity:1;transform:none;transition-delay:.3s}
.curtain__mark svg{width:clamp(56px,7vw,86px);color:var(--paper)}

/* reusable canopy edge divider */
.canopy{display:block;width:100%;height:clamp(18px,2.8vw,46px);color:var(--ink);margin-top:-1px}
.canopy--paper{color:var(--paper)}
.canopy--flip{transform:rotate(180deg)}


/* ============================================================
   [CSS] PAGES / SHARED
   ============================================================ */
section{position:relative}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec-t{padding-top:var(--sec)}
.sec-b{padding-bottom:var(--sec)}
.dark{background:var(--ink);color:var(--paper)}
.dark ::selection{background:var(--paper);color:var(--ink)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;
  font-weight:400;letter-spacing:.02em;opacity:.55;margin-bottom:26px}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) .1s}
.eyebrow.vis::before,.vis .eyebrow::before{transform:scaleX(1)}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;letter-spacing:-.035em;line-height:.98}
.h-xl{font-size:clamp(44px,10.5vw,168px)}
.h-lg{font-size:clamp(36px,6.6vw,104px)}
.h-md{font-size:clamp(28px,3.9vw,60px);line-height:1.02}
.h-sm{font-size:clamp(21px,2.3vw,32px);line-height:1.12;letter-spacing:-.025em}
.hand{font-family:var(--f-hand);font-weight:700;color:var(--accent-text);letter-spacing:0}
.serif-i{font-style:italic;font-family:Georgia,'Times New Roman',serif;letter-spacing:-.02em;font-weight:400}
.lead{font-family:var(--f-mono);font-size:clamp(14.5px,1.15vw,17px);line-height:1.7;
  color:var(--ink-70);max-width:58ch;letter-spacing:-.01em}
.dark .lead{color:rgba(244,241,234,.62)}
.muted{color:var(--ink-45)}
.dark .muted{color:rgba(244,241,234,.56)}

/* reveal system */
[data-reveal]{transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js:not(.rm) body:not(.ucs-no-motion) [data-reveal]:not(.vis){opacity:0;transform:translateY(34px)}
.line-mask{overflow:hidden;display:block;padding-bottom:.06em;margin-bottom:-.06em}
.line-mask>span{display:block;transition:transform 1.05s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js:not(.rm) body:not(.ucs-no-motion) [data-split]:not(.vis) .line-mask>span{transform:translateY(108%)}
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word>b{display:inline-block;font-weight:inherit;transform:translateY(102%);
  transition:transform .95s var(--ease);transition-delay:calc(var(--i,0) * 42ms)}
.vis .word>b{transform:none}

/* rule */
.rule{height:1px;background:var(--ink-15);width:100%}
.dark .rule{background:rgba(244,241,234,.16)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:600;font-size:14px;
  padding:16px 30px;border-radius:100px;border:1px solid currentColor;position:relative;overflow:hidden;
  transition:color .45s var(--ease)}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);border-radius:100px;
  transform:scale(0);transition:transform .6s var(--ease)}
.dark .btn::before{background:var(--paper)}
.btn:hover{color:var(--paper)}
.dark .btn:hover{color:var(--ink)}
.btn:hover::before{transform:scale(1)}
.btn--fill{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--fill::before{background:var(--ink)}
.arrow{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;
  padding-top:calc(var(--nav-h) + var(--tick-h) + 30px);padding-bottom:40px;overflow:hidden}
#rain{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero__inner{position:relative;z-index:2}
.hero h1{position:relative}
.hero h1 .row{display:block}
.hero__stroke{-webkit-text-stroke:1.4px var(--ink);color:transparent}
.hero__accent{color:var(--accent)}
.hero__meta{display:flex;flex-wrap:wrap;gap:28px 46px;align-items:flex-end;justify-content:space-between;
  margin-top:clamp(30px,5vw,60px)}
.hero__tag{max-width:48ch;font-family:var(--f-mono);font-size:clamp(13.5px,1.05vw,15.5px);
  line-height:1.7;color:var(--ink-70);letter-spacing:-.01em}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.scrollcue{position:absolute;bottom:24px;left:var(--pad);display:flex;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;opacity:.5;z-index:2}
.scrollcue i{width:1px;height:38px;background:currentColor;position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:cue 2s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
/* ============================================================
   HERO SCENE — the umbrella opens, the crew walks in, rain falls
   One 9s loop; every part is a slice of the same timeline.
   ============================================================ */
.viz{position:absolute;right:var(--pad);top:calc(var(--nav-h) + var(--tick-h) + 18px);
  width:min(31vw,380px);z-index:2;pointer-events:none;--T:9s}
.viz svg{width:100%;overflow:visible}
.viz__note{font-family:var(--f-hand);font-size:clamp(17px,1.6vw,22px);color:var(--accent-text);line-height:1.15;
  text-align:right;transform:rotate(-3deg);margin-top:10px}

.sc-ground{stroke:var(--ink-15);stroke-width:1.4;stroke-linecap:round}
.sc-pole{stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round}
.sc-canopy{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sc-rib{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.5}
.sc-fill{fill:var(--accent);opacity:.10}
.sc-drop{stroke:var(--rain);stroke-width:1.6;stroke-linecap:round;opacity:.55}
.sc-fig{fill:var(--ink)}
.sc-cap{font-family:var(--f-mono);font-size:10.5px;fill:var(--ink-45);letter-spacing:-.02em}

.hero__badge{position:absolute;right:var(--pad);bottom:26px;z-index:2;text-align:right;
  font-family:var(--f-hand);font-size:clamp(17px,1.7vw,23px);color:var(--accent);line-height:1.15;transform:rotate(-3deg)}

/* crew strip (stick figures) */
.crew{display:flex;align-items:flex-end;gap:clamp(4px,1.1vw,16px);margin-top:clamp(24px,3.5vw,44px);
  flex-wrap:nowrap;overflow:hidden}
.crew svg{height:clamp(42px,5.6vw,84px);width:auto;flex:none;transform-origin:50% 100%;
  opacity:.92;transition:transform .7s var(--ease)}
@keyframes sway{0%,100%{transform:rotate(-1.6deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(-4px)}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{display:flex;overflow:hidden;user-select:none;gap:0;padding:22px 0;border-top:1px solid var(--ink-15);
  border-bottom:1px solid var(--ink-15)}
.dark .marquee{border-color:rgba(244,241,234,.16)}
.marquee__track{display:flex;flex:none;gap:0;width:max-content;min-width:100%;
  animation:scrollx 34s linear infinite;align-items:center}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:44s}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee__item{flex:none;display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px);
  font-family:var(--f-display);font-size:clamp(22px,3.4vw,52px);font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.marquee__item svg{width:clamp(9px,1vw,14px);flex:none;opacity:.35}
.marquee__item .out{-webkit-text-stroke:1px currentColor;color:transparent}

/* ============================================================
   [CSS] CLIENT LOGO BAND
   ============================================================ */
.clients{padding-top:var(--sec);padding-bottom:var(--sec)}
.clients__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,36px)}
.clients__note{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-45)}
.logos{--logo-w:clamp(132px,17vw,210px);position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos__track{display:flex;flex:none;width:max-content;min-width:100%;align-items:center;
  animation:scrollx 42s linear infinite}
.logos:hover .logos__track{animation-play-state:paused}
.logos__set{flex:none;display:flex;align-items:center}
.logos__item{flex:none;display:flex;align-items:center;justify-content:center;
  width:var(--logo-w);height:clamp(84px,10vw,116px);
  /* the blend below needs something of its own to blend into, because the
     mask on .logos cuts this off from the page background */
  background:var(--paper)}
.logos__item img{width:calc(var(--logo-w) * .7);height:auto;opacity:.88;
  /* Client logos routinely arrive as artwork sitting on a solid white box.
     Multiplying against the paper makes that box disappear and leaves the
     mark itself, so one badly exported PNG cannot spoil the row. */
  mix-blend-mode:multiply;
  transition:opacity var(--snap),transform var(--snap)}
.logos__item:hover img{opacity:1;transform:scale(1.05)}
.dark .logos__item img{mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){
  .logos{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .logos__track{animation:none}
  .logos__set + .logos__set{display:none}
}

/* ============================================================
   SCROLL-HIGHLIGHT STATEMENT
   ============================================================ */
.statement{padding-top:clamp(90px,14vw,190px);padding-bottom:clamp(90px,14vw,190px)}
.statement p{font-family:var(--f-display);font-size:clamp(24px,4.1vw,64px);line-height:1.16;letter-spacing:-.035em;
  font-weight:400;max-width:20ch}
.statement .w{color:var(--ink-15);transition:color .4s var(--ease)}
.dark .statement .w{color:rgba(244,241,234,.16)}
.statement .w.lit{color:var(--ink)}
.dark .statement .w.lit{color:var(--paper)}
.statement .w.key.lit{color:var(--accent)}

/* ============================================================
   SERVICES LIST
   ============================================================ */
.svc{border-top:1px solid var(--ink-15)}
.dark .svc{border-color:rgba(244,241,234,.16)}
.svc__row{position:relative;border-bottom:1px solid var(--ink-15);cursor:pointer;overflow:hidden}
.dark .svc__row{border-color:rgba(244,241,234,.16)}
.svc__row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);
  transition:transform .6s var(--ease);z-index:0}
.svc__row:hover::before{transform:translateY(0)}
.dark .svc__row::before{background:var(--accent)}
.svc__head{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(14px,3vw,40px);
  padding:clamp(22px,3vw,38px) 0;transition:color .5s var(--ease),padding .5s var(--ease)}
.svc__row:hover .svc__head{padding-left:clamp(10px,2vw,28px)}
.svc__row:hover,.svc__row:hover .lead{color:var(--paper)}
.svc__row:hover .tag{border-color:rgba(255,255,255,.32);color:var(--paper)}
.dark .svc__row:hover .svc__head{color:#fff}
.svc__num{font-family:var(--f-display);font-size:12px;letter-spacing:.12em;opacity:.45;width:38px;flex:none}
.svc__title{font-family:var(--f-display);font-size:clamp(24px,4.4vw,62px);font-weight:500;letter-spacing:-.035em;
  line-height:1;flex:1}
.svc__plus{width:clamp(34px,3.4vw,48px);height:clamp(34px,3.4vw,48px);border-radius:50%;border:1px solid currentColor;
  flex:none;display:grid;place-items:center;position:relative;transition:transform .5s var(--ease)}
.svc__plus::before,.svc__plus::after{content:"";position:absolute;background:currentColor}
.svc__plus::before{width:13px;height:1.4px}
.svc__plus::after{width:1.4px;height:13px;transition:transform .45s var(--ease)}
.svc__row.open .svc__plus::after{transform:scaleY(0)}
.svc__row.open .svc__plus{transform:rotate(180deg)}
.svc__body{position:relative;z-index:1;max-height:0;overflow:hidden;transition:max-height .7s var(--ease)}
.svc__bodyin{display:grid;grid-template-columns:38px 1fr 1fr;gap:clamp(16px,3vw,40px);
  padding:0 0 clamp(26px,3vw,44px)}
.svc__bodyin>p{grid-column:2}
.svc__tags{grid-column:3;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.tag{font-family:var(--f-display);font-size:11.5px;font-weight:500;letter-spacing:.02em;padding:7px 14px;
  border-radius:100px;border:1px solid var(--ink-15);white-space:nowrap}
.dark .tag{border-color:rgba(244,241,234,.2)}
.svc__row:hover .tag{border-color:rgba(255,255,255,.3)}

/* cursor-following preview */
.svc-prev{position:fixed;top:0;left:0;width:clamp(180px,20vw,290px);aspect-ratio:4/3;border-radius:10px;
  pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-4deg);
  transition:opacity .4s var(--ease),transform .5s var(--ease);overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.28)}
.svc-prev.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
.svc-prev__in{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.svc-prev__in span{font-family:var(--f-display);font-size:13px;letter-spacing:.16em;text-transform:uppercase}
@media (hover:none){.svc-prev{display:none}}

/* ============================================================
   UMBRELLA DIAGRAM
   ============================================================ */
.brolly{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,60px);align-items:center}
.brolly__viz{position:relative;display:grid;place-items:center;padding:20px 0}
.brolly__viz svg{width:min(100%,760px);overflow:visible}
.brolly__viz .rib{stroke:var(--paper);stroke-width:2;fill:none;opacity:.9}
.brolly__viz .panel{transition:fill .5s var(--ease),opacity .5s}
.spoke{cursor:pointer}
.spoke text{font-family:var(--f-display);font-size:13px;fill:var(--paper);letter-spacing:.01em;
  transition:fill .4s,font-size .3s}
.spoke line{stroke:rgba(244,241,234,.28);stroke-width:1;stroke-dasharray:3 4;transition:stroke .4s}
.spoke circle{fill:var(--paper);transition:fill .4s,r .35s var(--ease)}
.spoke:hover text{fill:var(--accent-text)}
.spoke:hover line{stroke:var(--accent-text)}
.spoke:hover circle{fill:var(--accent-text);r:7}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-15)}
.dark .stats{background:rgba(244,241,234,.16)}
.stat{background:var(--paper);padding:clamp(26px,3.4vw,50px) clamp(18px,2vw,32px)}
.dark .stat{background:var(--ink)}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(38px,5.6vw,86px);font-weight:500;
  letter-spacing:-.045em;line-height:.9}
.stat b em{font-style:normal;color:var(--accent-text)}
.stat p{margin-top:14px;font-family:var(--f-mono);font-size:12.5px;line-height:1.6;color:var(--ink-45);max-width:26ch;letter-spacing:-.01em}
.dark .stat p{color:rgba(244,241,234,.56)}

/* ============================================================
   PROCESS (horizontal)
   ============================================================ */
.hscroll{height:340vh;position:relative}
.hscroll__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.hscroll__track{display:flex;gap:clamp(16px,2.4vw,40px);padding:0 var(--pad);will-change:transform}
.step{flex:none;width:min(78vw,440px);border:1px solid rgba(244,241,234,.18);border-radius:12px;
  padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;min-height:min(60vh,440px);
  background:rgba(244,241,234,.02);transition:background .5s,border-color .5s}
.step:hover{background:rgba(244,241,234,.06);border-color:rgba(244,241,234,.4)}
.step__n{font-family:var(--f-display);font-size:clamp(56px,7vw,104px);font-weight:500;letter-spacing:-.05em;
  line-height:.85;color:transparent;-webkit-text-stroke:1.2px rgba(244,241,234,.56);margin-bottom:auto}
.step h3{font-size:clamp(22px,2.4vw,34px);margin-bottom:14px;letter-spacing:-.03em}
.step p{font-size:14.5px;line-height:1.6;color:rgba(244,241,234,.6)}
.step__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.step__tags span{font-size:11px;font-family:var(--f-mono);letter-spacing:0;
  padding:5px 11px;border:1px solid rgba(244,241,234,.2);border-radius:100px;color:rgba(244,241,234,.7)}
.hscroll__intro{flex:none;width:min(70vw,420px);padding-right:clamp(20px,4vw,70px)}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{padding-top:clamp(60px,8vw,116px);padding-bottom:clamp(60px,8vw,116px);text-align:center;
  position:relative;overflow:hidden}
.cta__big{font-size:clamp(46px,12vw,190px);line-height:.9;letter-spacing:-.05em}
.cta__big a{display:inline-block;transition:color .4s}
.cta__big a:hover{color:var(--accent-text)}
.foot{padding-top:clamp(40px,5vw,70px);padding-bottom:26px}
.foot__grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.4fr;gap:clamp(24px,3vw,50px);
  padding-bottom:clamp(36px,5vw,70px)}
.foot h4{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;opacity:.42;margin-bottom:18px;font-weight:400}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.foot ul a{position:relative;display:inline-block;transition:color .3s,transform .4s var(--ease)}
.foot ul a:hover{color:var(--accent-text);transform:translateX(4px)}
.foot__brand svg{width:74px;margin-bottom:18px}
.foot__bot{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center;
  padding-top:22px;border-top:1px solid rgba(244,241,234,.14);font-family:var(--f-mono);font-size:11.5px;opacity:.45}
.clock{font-variant-numeric:tabular-nums}

/* ============================================================
   ABOUT / TIMELINE / VALUES / TEAM
   ============================================================ */
.pagehead{padding-top:calc(var(--nav-h) + var(--tick-h) + clamp(38px,6vw,78px));padding-bottom:clamp(28px,4vw,52px);
  position:relative}
.pagehead .h-xl{margin-bottom:26px}
.crumbs{display:flex;gap:10px;align-items:center;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.02em;opacity:.45;margin-bottom:30px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);align-items:start}
.split--tight{grid-template-columns:.85fr 1.15fr}
.split--form{grid-template-columns:1.35fr .65fr}

.tl{border-top:1px solid var(--ink-15)}
.dark .tl{border-color:rgba(244,241,234,.16)}
.tl__row{display:grid;grid-template-columns:150px 1fr;gap:clamp(16px,3vw,50px);
  padding:clamp(26px,3.4vw,46px) 0;border-bottom:1px solid var(--ink-15);position:relative}
.dark .tl__row{border-color:rgba(244,241,234,.16)}
.tl__row:hover .tl__yr{color:var(--accent)}
.tl__yr{font-family:var(--f-mono);font-size:clamp(13px,1.15vw,15px);letter-spacing:-.01em;transition:color .4s}
.tl__row h3{font-size:clamp(21px,2.3vw,32px);margin-bottom:12px;letter-spacing:-.025em}

.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-15)}
.dark .vals{background:rgba(244,241,234,.16)}
.val{background:var(--paper);padding:clamp(26px,3vw,44px);position:relative;overflow:hidden;
  transition:background .5s var(--ease)}
.dark .val{background:var(--ink)}
.val:hover{background:var(--accent);color:#fff}
.val:hover p,.val:hover .val__n{color:rgba(255,255,255,.8)}
.val__n{font-family:var(--f-mono);font-size:11.5px;opacity:.5;margin-bottom:34px;display:block}
.val h3{font-size:clamp(20px,2.1vw,28px);margin-bottom:12px;letter-spacing:-.025em}
.val p{font-family:var(--f-mono);font-size:12.8px;line-height:1.7;color:var(--ink-45);letter-spacing:-.01em}
.dark .val p{color:rgba(244,241,234,.56)}

.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px)}
.member{position:relative;border-radius:8px;overflow:hidden;background:var(--paper-2);aspect-ratio:3/4;
  display:grid;place-items:center;transition:background .5s var(--ease)}
.dark .member{background:rgba(244,241,234,.06)}
.member:hover{background:var(--accent)}
.member svg{height:52%;width:auto;transition:transform .6s var(--ease)}
.member:hover svg{transform:translateY(-8px) scale(1.04)}
.member__meta{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:flex;justify-content:space-between;
  align-items:flex-end;gap:10px}
.member__meta b{font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:-.01em}
.member__meta span{font-family:var(--f-mono);font-size:11px;opacity:.55;display:block;margin-top:4px}
.member:hover .member__meta{color:#fff}

/* ============================================================
   CONTACT
   ============================================================ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px)}
.field{position:relative;padding:22px 0;border-bottom:1px solid var(--ink-15);grid-column:span 1}
.field--full{grid-column:span 2}
.field label{position:absolute;top:24px;left:0;font-size:15px;color:var(--ink-45);pointer-events:none;
  transition:transform .45s var(--ease),font-size .45s var(--ease),color .45s}
.field input,.field textarea,.field select{width:100%;border:none;background:none;font-family:var(--f-body);
  font-size:16px;color:var(--ink);outline:none;resize:none;padding:8px 0 0}
.field textarea{min-height:92px}
.field.filled label,.field input:focus~label,.field textarea:focus~label{
  transform:translateY(-24px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.field::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chip{font-family:var(--f-display);font-size:12.5px;padding:9px 17px;border-radius:100px;border:1px solid var(--ink-15);
  transition:background var(--snap),color var(--snap),border-color var(--snap),transform var(--snap)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.contact-side dt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;opacity:.42;margin-bottom:8px}
.contact-side dd{font-size:clamp(16px,1.5vw,20px);margin-bottom:30px;letter-spacing:-.01em}
.contact-side dd a:hover{color:var(--accent)}

.acc{border-top:1px solid var(--ink-15)}
.dark .acc{border-color:rgba(244,241,234,.16)}
.acc__item{border-bottom:1px solid var(--ink-15)}
.dark .acc__item{border-color:rgba(244,241,234,.16)}
.acc__q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;font-family:var(--f-display);font-size:clamp(17px,1.7vw,23px);letter-spacing:-.02em;
  transition:color .35s,padding-left .45s var(--ease)}
.acc__q:hover{color:var(--accent);padding-left:8px}
.acc__q i{width:11px;height:11px;position:relative;flex:none}
.acc__q i::before,.acc__q i::after{content:"";position:absolute;background:currentColor;left:0;top:5px;
  width:11px;height:1.5px;transition:transform .45s var(--ease)}
.acc__q i::after{transform:rotate(90deg)}
.acc__item.open .acc__q i::after{transform:rotate(0)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.acc__a p{padding:0 0 26px;max-width:70ch;color:var(--ink-70);font-size:15px}
.dark .acc__a p{color:rgba(244,241,234,.6)}

.note{margin-top:18px;font-family:var(--f-mono);font-size:12px;color:var(--ink-45);letter-spacing:-.01em}
.success{padding:24px;border:1px dashed var(--accent);border-radius:10px;color:var(--accent);
  font-family:var(--f-display);font-size:15px;display:none;margin-top:26px}
.success.on{display:block}

/* ============================================================
   PLACEHOLDER MARKER
   ============================================================ */
.ph{border-bottom:1px dashed currentColor;opacity:.75;font-style:normal}
.idx__client.ph,.idx__sector.ph,.sheet__stats b.ph{width:-moz-fit-content;width:fit-content}
.idx__metric b.ph{width:-moz-fit-content;width:fit-content;margin-left:auto}

/* ============================================================
   STACKING CARD DECK (home work)
   ============================================================ */
.deck{position:relative}
.deck__card{position:sticky;top:calc(var(--nav-h) + 14px);margin-bottom:26px;border-radius:14px;
  overflow:hidden;background:var(--ink);color:var(--paper);transform-origin:50% 0;
  box-shadow:0 -1px 0 rgba(244,241,234,.14)}
.deck__in{display:grid;grid-template-columns:.85fr 1.15fr;min-height:min(64vh,470px)}
.deck__visual{position:relative;overflow:hidden}
.deck__visual .g{position:absolute;inset:0}
.deck__visual .lines{position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:46px 46px}
.deck__metric{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,34px);color:#fff}
.deck__metric b{display:block;font-family:var(--f-display);font-size:clamp(38px,4.6vw,68px);font-weight:600;
  letter-spacing:-.05em;line-height:.9}
.deck__metric span{font-family:var(--f-mono);font-size:11.5px;opacity:.85;margin-top:9px;display:block}
.deck__body{padding:clamp(24px,3vw,46px);display:flex;flex-direction:column}
.deck__idx{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11.5px;
  opacity:.45;margin-bottom:auto}
.deck__body h3{font-size:clamp(23px,2.7vw,40px);letter-spacing:-.03em;margin:clamp(24px,3vw,40px) 0 14px;max-width:20ch}
.deck__body p{font-family:var(--f-mono);font-size:13px;line-height:1.65;color:rgba(244,241,234,.6);max-width:50ch;letter-spacing:-.01em}
.deck__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.deck__tags span{font-family:var(--f-mono);font-size:11px;letter-spacing:0;
  padding:6px 12px;border:1px solid rgba(244,241,234,.22);border-radius:100px;color:rgba(244,241,234,.75)}
.deck__go{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--f-display);
  font-size:13px;font-weight:600;color:var(--accent-text)}
.deck__go svg{transition:transform .45s var(--ease)}
.deck__card:hover .deck__go svg{transform:translateX(5px)}

/* ============================================================
   WORK PAGE
   ============================================================ */
.feat{border-radius:14px;overflow:hidden;background:var(--ink);color:var(--paper)}
.feat__top{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,60px);
  padding:clamp(26px,3.4vw,54px)}
.feat h2{font-size:clamp(26px,3.6vw,54px);letter-spacing:-.035em;max-width:18ch}
.feat__meta{display:flex;flex-direction:column;gap:16px;align-self:end}
.feat__meta div{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;
  border-bottom:1px solid rgba(244,241,234,.16);font-size:13.5px}
.feat__meta div span:first-child{color:rgba(244,241,234,.56);letter-spacing:.04em}

/* before/after slider */
.ba{position:relative;aspect-ratio:21/8;overflow:hidden;cursor:ew-resize;touch-action:none;user-select:none}
.ba__side{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;
  padding:0 clamp(22px,4vw,64px)}
.ba__after{justify-content:flex-end}
.ba__after{clip-path:inset(0 0 0 var(--x,50%));justify-content:flex-end}
.ba__side .lines{position:absolute;inset:0;opacity:.26;mix-blend-mode:overlay;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:46px 46px}
.ba__tag{position:relative;font-family:var(--f-display);font-size:clamp(19px,2.4vw,36px);font-weight:600;
  letter-spacing:-.03em;color:#fff;text-align:left;line-height:1.1;max-width:42%}
.ba__after .ba__tag{text-align:right}
.ba__tag em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.02em;
  opacity:.7;margin-bottom:10px;font-family:var(--f-mono)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;z-index:3;
  transform:translateX(-1px)}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.ba__handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  font-family:var(--f-display);font-size:14px;color:var(--ink);letter-spacing:-.05em}
.ba__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.35);padding:7px 14px;border-radius:100px;backdrop-filter:blur(6px);pointer-events:none}

/* ============================================================
   [CSS] WORK — ARCHIVE INDEX + STICKY PREVIEW
   ============================================================ */
.wsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);
  gap:clamp(28px,4vw,70px);align-items:start}
.wpanel{position:sticky;top:calc(var(--nav-h) + 20px);border-radius:14px;overflow:hidden;
  aspect-ratio:4/5;background:var(--ink);color:var(--paper)}
.wcard{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(20px,2.2vw,30px);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--ease),transform .6s var(--ease);pointer-events:none}
.wcard.on{opacity:1;transform:none}
.wcard__k{font-family:var(--f-mono);font-size:11px;color:rgba(255,255,255,.75);
  display:flex;justify-content:space-between;gap:12px}
.wcard__m{margin-top:auto}
.wcard__m b{display:block;font-family:var(--f-display);font-size:clamp(34px,3.6vw,52px);font-weight:600;
  letter-spacing:-.05em;line-height:.85;color:#fff}
.wcard__m span{display:block;margin-top:9px;font-family:var(--f-mono);font-size:11px;color:rgba(255,255,255,.75)}
.wcard__ba{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.28);font-family:var(--f-mono);font-size:11.5px;
  color:rgba(255,255,255,.9);letter-spacing:-.01em}
.wcard__ba i{font-style:normal;color:#fff;flex:none}
.wcard__ba s{text-decoration-thickness:1px;color:rgba(255,255,255,.7)}
.wcard__t{margin-top:16px;font-size:clamp(15px,1.4vw,19px);letter-spacing:-.02em;line-height:1.25;color:#fff}
.wcard__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.wcard__tags span{font-family:var(--f-mono);font-size:10.5px;padding:5px 10px;border-radius:100px;
  border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.85)}
@media(max-width:1080px){.wsplit{grid-template-columns:1fr}.wpanel{display:none}}

.idxhead,.idx{display:grid;grid-template-columns:46px minmax(0,1fr) 118px;
  gap:clamp(12px,1.6vw,24px);align-items:center;text-align:left;width:100%;white-space:normal}
.idxhead{padding:0 0 14px;border-bottom:1px solid var(--ink);font-family:var(--f-mono);font-size:11px;
  letter-spacing:.02em;color:var(--ink-45)}
.idxhead span:last-child,.idx__metric{text-align:right}
.idx{position:relative;padding:clamp(18px,2.1vw,28px) 0;border-bottom:1px solid var(--ink-15);
  transition:padding-left .55s var(--ease)}
.idx::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.idx:hover::after{transform:scaleX(1)}
.idx:hover{padding-left:clamp(6px,1vw,16px)}
.idx__no{font-family:var(--f-mono);font-size:12px;color:var(--ink-45);font-variant-numeric:tabular-nums}
.idx__title{font-size:clamp(17px,1.85vw,26px);letter-spacing:-.028em;line-height:1.14;transition:color .4s}
.idx:hover .idx__title{color:var(--accent)}
.idx__client{display:block;font-family:var(--f-mono);font-size:12.5px;letter-spacing:-.01em;
  color:var(--ink-45);margin-top:7px;font-weight:400}
.idx__sector,.idx__svc{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-45);line-height:1.5;letter-spacing:-.01em}
.idx__metric b{font-family:var(--f-display);font-size:clamp(16px,1.6vw,22px);font-weight:600;letter-spacing:-.03em;
  display:block}
.idx__metric span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink-45);margin-top:6px}
.idx.hide{display:none}
.idx__m{display:none}

/* minimal filter links */
.flt{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,30px);margin-bottom:clamp(26px,3.4vw,46px)}
.flt button{font-family:var(--f-display);font-size:14px;font-weight:500;color:var(--ink-45);position:relative;
  padding-bottom:5px;transition:color .35s}
.flt button sup{font-size:10px;letter-spacing:.06em;opacity:.6;margin-left:4px;top:-.6em;position:relative}
.flt button::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.flt button{transition:color var(--snap)}
.flt button:hover{color:var(--ink)}
.flt button:hover::after{transform:scaleX(1)}
.flt button.on{color:var(--ink)}
.flt button.on::after{transform:scaleX(1)}

/* client roll — plain type, no boxes */
.roll{font-family:var(--f-display);font-size:clamp(19px,2.4vw,34px);letter-spacing:-.028em;line-height:1.5;
  color:var(--ink-15);max-width:26ch}
.roll span{transition:color .4s}
.roll span:hover{color:var(--ink)}

/* ============================================================
   [CSS] SERVICES — SPLIT BROWSER
   ============================================================ */
.brw{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);
  align-items:start}
.brw__list{border-top:1px solid var(--ink)}
.brw__item{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;
  padding:clamp(14px,1.8vw,24px) 0;border-bottom:1px solid var(--ink-15);
  transition:padding-left .5s var(--ease)}
.brw__item h3{font-size:clamp(20px,2.5vw,36px);letter-spacing:-.035em;color:rgba(11,11,12,.62);transition:color .45s}
.brw__item:hover h3{color:rgba(11,11,12,.85)}
.brw__item.on h3{color:var(--ink)}
.brw__item.on{padding-left:8px}
.brw__dot{width:7px;height:7px;border-radius:50%;background:rgba(11,11,12,.25);flex:none;transition:background .4s,transform .5s var(--ease)}
.brw__item.on .brw__dot{background:var(--accent);transform:scale(1.4)}
.brw__pane{position:sticky;top:calc(var(--nav-h) + 16px);background:var(--ink);color:var(--paper);
  border-radius:16px;padding:clamp(24px,3vw,46px);min-height:min(64vh,470px);display:flex;flex-direction:column}
.brw__pane.swap{opacity:0;transform:translateY(10px)}
.brw__pane{transition:opacity .4s var(--ease),transform .5s var(--ease)}
.brw__pane .k{font-family:var(--f-mono);font-size:11.5px;color:var(--accent-text);margin-bottom:20px;display:block}
.brw__pane h4{font-size:clamp(23px,2.8vw,40px);letter-spacing:-.035em;line-height:1;margin-bottom:12px}
.brw__pane .hand{display:block;font-size:clamp(17px,1.7vw,21px);margin-bottom:20px}
.brw__pane>p{font-size:14.5px;line-height:1.62;color:rgba(244,241,234,.62);max-width:48ch}
.brw__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(18px,2.4vw,36px);
  margin-top:clamp(20px,2.4vw,32px)}
.brw__grid li{list-style:none;padding:10px 0;border-bottom:1px solid rgba(244,241,234,.14);
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:-.01em;color:rgba(244,241,234,.82)}
.brw__run{display:flex;gap:clamp(12px,2vw,24px);margin-top:auto;padding-top:clamp(22px,2.6vw,34px)}
.brw__run div{flex:1;padding-top:12px;border-top:1px solid rgba(244,241,234,.2)}
.brw__run b{display:block;font-family:var(--f-mono);font-size:11px;color:var(--accent-text);margin-bottom:7px}
.brw__run p{font-family:var(--f-mono);font-size:11.5px;line-height:1.6;color:rgba(244,241,234,.55);letter-spacing:-.01em}

/* case study overlay */
.sheet{position:fixed;inset:0;z-index:8600;pointer-events:none;visibility:hidden}
.sheet.on{pointer-events:auto;visibility:visible}
.sheet__bg{position:absolute;inset:0;background:rgba(11,11,12,.55);backdrop-filter:blur(6px);opacity:0;
  transition:opacity .5s var(--ease)}
.sheet.on .sheet__bg{opacity:1}
.sheet__panel{position:absolute;inset:auto 0 0 0;height:94svh;background:var(--paper);border-radius:16px 16px 0 0;
  overflow-y:auto;overflow-x:hidden;transform:translateY(100%);transition:transform .8s var(--ease);
  -webkit-overflow-scrolling:touch}
.sheet.on .sheet__panel{transform:none}
.sheet__close{position:sticky;top:0;margin-left:auto;z-index:5;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;margin-right:var(--pad);
  transform:translateY(18px);transition:transform .4s var(--ease)}
.sheet__close:hover{transform:translateY(18px) rotate(90deg)}
.sheet__hero{padding:0 var(--pad) clamp(28px,4vw,50px);margin-top:-30px}
.sheet__hero .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;color:var(--accent);
  margin-bottom:18px;display:block}
.sheet__hero h2{font-size:clamp(28px,5vw,72px);letter-spacing:-.04em;max-width:16ch;line-height:.98}
.sheet__banner{aspect-ratio:21/8;position:relative;overflow:hidden;margin:clamp(20px,3vw,40px) var(--pad) 0;
  border-radius:12px}
.sheet__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-15);
  margin:clamp(24px,3vw,44px) 0;border-block:1px solid var(--ink-15)}
.sheet__stats div{background:var(--paper);padding:clamp(20px,2.4vw,34px) var(--pad)}
.sheet__stats b{display:block;font-family:var(--f-display);font-size:clamp(26px,3.2vw,46px);font-weight:600;
  letter-spacing:-.04em;line-height:.9}
.sheet__stats span{display:block;margin-top:10px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-45)}
.sheet__body{padding:0 var(--pad) clamp(50px,7vw,100px);display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(24px,4vw,70px);align-items:start}
.sheet__body h4{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-45);margin-bottom:16px}
.sheet__body h3{font-size:clamp(19px,2vw,27px);letter-spacing:-.025em;margin:0 0 12px}
.sheet__step{padding:0 0 clamp(24px,2.6vw,36px)}
.sheet__body .feat__meta div{border-bottom-color:var(--ink-15)}
.sheet__body .feat__meta div span:first-child{color:var(--ink-45)}
.sheet__body h4{color:var(--accent)}
.sheet__body>div:first-child h4:first-child{color:var(--ink-45)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){.hero__badge{display:none}}

@media(max-width:1080px){
  .brw{grid-template-columns:1fr}
  .brw__pane{position:static;min-height:0}
  .addons{grid-template-columns:repeat(2,1fr)}
  .modes{grid-template-columns:1fr}
  .sheet__stats{grid-template-columns:repeat(2,1fr)}
  .sheet__body{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .vals{grid-template-columns:1fr}
  .svcblock__grid{grid-template-columns:1fr}
  .split,.split--tight,.split--form{grid-template-columns:1fr}
}
@media(max-width:860px){
  /* ---- READING ORDER ON A PHONE ------------------------------
     On a wide screen the mono paragraph has room to breathe. At
     375px it was the same face, size and colour as every caption
     on the page, so the eye had nothing to follow. The paragraph
     you are meant to READ now takes the body face at a
     comfortable size; mono stays on the small labels, and the
     difference between them is what creates the order. */
  .lead{font-family:var(--f-body);font-size:15.5px;line-height:1.62;
    letter-spacing:-.005em;color:var(--ink-70);max-width:38ch}
  .dark .lead{color:rgba(244,241,234,.72)}
  .deck__body p,.brw__run p{font-family:var(--f-body);font-size:14px;line-height:1.55;letter-spacing:0}
  .val p{font-family:var(--f-body);font-size:14px;line-height:1.6;letter-spacing:0}
  .idx__client{font-size:12px;letter-spacing:0}
  .stat p{font-size:12px;line-height:1.55}

  .nav__links{display:none}
  .burger{display:flex}
  .nav__right .btn-pill{display:none}
  .card,.card--tall,.card--wide{grid-column:span 12}
  .svc__bodyin{grid-template-columns:1fr}
  .svc__bodyin>p,.svc__tags{grid-column:1}
  .form{grid-template-columns:1fr}
  .field--full,.field{grid-column:span 1}
  .tl__row{grid-template-columns:1fr}
  .deliver{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:auto;justify-content:flex-start;padding-bottom:70px}
  .scrollcue{display:none}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 100%;justify-content:center}
  .quotes__vp{min-height:340px}
  .step{width:auto}

  /* ---- SWIPE RAILS ------------------------------------------
     A set of cards reads as a set. Stacking four of them down a
     phone turns one idea into four screens of scrolling, so on
     a phone they become one row you swipe. The next card is
     deliberately left peeking past the edge — that is what
     tells a thumb there is more to the right. */
  .deck,
  .hscroll__track{display:flex;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    gap:12px;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
    padding:2px var(--pad) 16px;overscroll-behavior-x:contain}
  .deck::-webkit-scrollbar,
  .hscroll__track::-webkit-scrollbar{display:none}
  .deck__card,
  .step{flex:0 0 min(84vw,380px);scroll-snap-align:center;margin-bottom:0}

  /* deck cards, now side by side */
  .deck__card{position:static;transform:none!important;display:flex}
  .deck__in{grid-template-columns:1fr;min-height:0;width:100%}
  .deck__visual{aspect-ratio:16/10}
  .deck__idx{margin-bottom:20px}
  .deck__body h3{margin:0 0 12px}

  /* the four moves, now side by side */
  .hscroll__track{transform:none!important}
  .hscroll__intro{flex:0 0 min(78vw,340px);width:auto;padding-right:0;margin-bottom:0;
    display:flex;flex-direction:column;justify-content:center}
  .step{width:auto;min-height:0}

  /* work page */
  .cases{grid-template-columns:1fr}
  .feat__top{grid-template-columns:1fr}
  .feat__meta{align-self:auto}
  .ba{aspect-ratio:4/3}
  .logos{grid-template-columns:repeat(2,1fr)}
  .sheet__panel{height:96svh;border-radius:14px 14px 0 0}
  .sheet__stats{grid-template-columns:1fr 1fr}
  .sheet__banner{aspect-ratio:16/10}

  /* work index → two-line rows */
  .idxhead{display:none}
  .idx{grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;
    padding:clamp(16px,3vw,22px) 0}
  .idx__sector{display:none}
  .idx__metric{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:9px;margin-top:10px}
  .idx__metric b,.idx__metric b.ph{font-size:16px;margin-left:0}
  .idx__metric span{margin-top:0;font-size:9.5px}
  .idx__title{font-size:17px}
  .roll{font-size:clamp(17px,5vw,24px);max-width:none}
  .flt{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);padding:0 var(--pad) 6px}
  .flt::-webkit-scrollbar{display:none}
  .flt button{flex:none}

  /* services builder + browser */
  .brw__grid{grid-template-columns:1fr}
  .brw__run{flex-direction:column;gap:14px}
  .outcome ol{grid-template-columns:1fr;gap:18px}
  .addons{grid-template-columns:1fr}
  .svcpanel__head{gap:14px}

  /* the desktop version pins this section and scrolls it sideways as you go
     down the page; on a phone it is a plain swipe rail instead (above) */
  .hscroll{height:auto}
  .hscroll__sticky{position:static;height:auto;padding:clamp(60px,10vw,90px) 0}
  .step__n{margin-bottom:18px}

  .flt{gap:20px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding-bottom:8px;
    scrollbar-width:none;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
    padding:0 var(--pad) 4px}
  .flt::-webkit-scrollbar{display:none}
  .flt button{flex:none;scroll-snap-align:start}
  .vals{grid-template-columns:1fr!important}
  .team{grid-template-columns:1fr 1fr}
  .tl__row{gap:8px}
  .btn{padding:15px 26px}
  .acc__q{gap:14px}
}
@media(max-width:520px){
  .team{grid-template-columns:1fr}
  .logos{grid-template-columns:1fr 1fr}
  .h-xl{font-size:clamp(38px,12vw,60px)}
  .crew svg{height:38px}
  .nav__brand span{font-size:13.5px}
  .nav__brand svg{width:34px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .word>b,.line-mask>span{transform:none}
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */
.sheet__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.sheet__links a{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:13px;
  font-weight:600;padding:11px 18px;border-radius:100px;border:1px solid var(--ink-15);
  transition:background var(--snap),color var(--snap),border-color var(--snap)}
.sheet__links a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.field.err::after{transform:scaleX(1);background:#C2410C}
.field.err label{color:#C2410C}

.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;
  color:var(--ink-45)}
.status i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.status.past i{background:var(--ink-15)}

/* client roll links */
.roll a{color:inherit;transition:color var(--snap)}
.roll a:hover{color:var(--accent)}

/* about page — the story runs as one readable column */
.story{max-width:64ch}
.story p{font-family:var(--f-mono);font-size:clamp(14.5px,1.15vw,17px);line-height:1.75;
  color:var(--ink-70);letter-spacing:-.01em;margin-bottom:1.15em}
.story p strong{color:var(--ink);font-weight:500}
.story p em{font-style:italic;color:var(--ink)}
.story h3{font-size:clamp(21px,2.4vw,32px);letter-spacing:-.03em;margin:1.9em 0 .6em}
.story .big{font-family:var(--f-display);font-size:clamp(22px,2.6vw,34px);line-height:1.2;
  letter-spacing:-.03em;color:var(--ink);margin:1.4em 0}
.filmline{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-15);
  margin:clamp(28px,4vw,52px) 0}
.filmline div{background:var(--paper);padding:clamp(20px,2.4vw,32px)}
.filmline b{display:block;font-family:var(--f-display);font-size:clamp(24px,3vw,40px);font-weight:600;
  letter-spacing:-.04em;line-height:.9}
.filmline span{display:block;margin-top:10px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-45)}
.filmline em{display:block;margin-top:6px;font-size:13px;font-style:normal;color:var(--ink-70)}
@media(max-width:860px){.filmline{grid-template-columns:1fr}}

/* skip link — keyboard users land here first */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:0 0 8px 0;font-family:var(--f-display);font-size:13px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* long words — the email address was running out of its column */
.foot ul a,.foot ul li,.contact-side dd,.contact-side dd a,.menu__foot span,
.idx__client,.roll,.sheet__links a{overflow-wrap:anywhere;word-break:break-word}
.foot ul{min-width:0}
.foot__grid > div{min-width:0}

/* iOS: avoid the 100vh address-bar jump — desktop/tablet only, phones
   let the hero shrink to fit its content instead */
@media(min-width:861px){@supports (height:100svh){.hero{min-height:100svh}}}

/* ============================================================
   404 — you are out in the rain, move the umbrella over them
   ============================================================ */
.lost{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;overflow:hidden;
  padding:calc(var(--nav-h) + var(--tick-h) + 40px) var(--pad) 60px;cursor:none}
#lostRain{position:absolute;inset:0;width:100%;height:100%}
.lost__num{position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);
  font-family:var(--f-display);font-size:min(46vw,520px);font-weight:600;letter-spacing:-.06em;
  line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--ink-15);pointer-events:none;user-select:none}
.lost__in{position:relative;z-index:3;max-width:34ch}
.lost__in h1{font-size:clamp(30px,5.2vw,64px);letter-spacing:-.04em;line-height:1.02}
.lost__in p{margin-top:18px}
.lost__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
/* the person standing in it */
.lost__fig{position:relative;z-index:2;height:clamp(96px,15vh,150px);margin-top:clamp(26px,5vh,54px);
  color:var(--ink);transition:transform .5s var(--ease)}
.lost.dry .lost__fig{transform:translateY(-6px)}
/* the umbrella that follows the cursor */
.lost__brolly{position:absolute;top:0;left:0;z-index:4;width:clamp(120px,15vw,190px);
  pointer-events:none;color:var(--ink);will-change:transform}
.lost__hint{position:relative;z-index:3;margin-top:22px;font-family:var(--f-hand);
  font-size:clamp(17px,1.8vw,23px);color:var(--accent-text);transition:opacity .4s}
.lost.dry .lost__hint{opacity:0}
.lost__dry{position:relative;z-index:3;margin-top:22px;font-family:var(--f-hand);
  font-size:clamp(17px,1.8vw,23px);color:var(--accent-text);opacity:0;transition:opacity .4s;
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(60px,10vh,110px)}
.lost.dry .lost__dry{opacity:1}
@media(hover:none),(pointer:coarse){
  .lost{cursor:auto}
  .lost__hint::after{content:" (it follows on its own here)";opacity:.6}
}
@media(prefers-reduced-motion:reduce){#lostRain{display:none}}

/* form result message */
.success.bad{border-color:#C2410C;color:#C2410C}

/* legal pages */
.legal{max-width:70ch}
.legal h2{font-size:clamp(21px,2.4vw,31px);letter-spacing:-.03em;margin:2em 0 .6em}
.legal h3{font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em;margin:1.6em 0 .5em}
.legal p,.legal li{font-family:var(--f-mono);font-size:clamp(14px,1.1vw,16px);line-height:1.75;
  color:var(--ink-70);letter-spacing:-.01em}
.legal p{margin-bottom:1.1em}
.legal ul,.legal ol{margin:0 0 1.3em 1.1em}
.legal li{margin-bottom:.5em}
.legal a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.legal__meta{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-45);
  padding-bottom:1.4em;margin-bottom:2em;border-bottom:1px solid var(--ink-15)}
.legal strong{color:var(--ink);font-weight:500}

.foot__legal a{text-decoration:underline;text-underline-offset:3px;transition:color var(--snap)}
.foot__legal a:hover{color:var(--accent-text)}

/* ============================================================
   ============================================================
   v2 — THE UMBRELLA CREW SITE PLUGIN
   Everything below extends the original design system.
   ============================================================
   ============================================================ */

html:not(.has-ticker){--tick-h:0px}
body.ucs{background:var(--paper)}
.admin-bar .ticker{top:32px}
.admin-bar .nav{top:calc(var(--tick-h) + 32px)}
.admin-bar .nav.tickerup{top:32px}
@media (max-width:782px){.admin-bar .ticker{top:46px}.admin-bar .nav{top:calc(var(--tick-h) + 46px)}.admin-bar .nav.tickerup{top:46px}}
.hl{color:var(--accent-text)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.ucs-no-grain .grain{display:none}
img{height:auto}
:root{--pad:max(clamp(20px,5vw,80px),calc((100vw - 1560px) / 2))}
.sec-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(24px,3vw,44px)}
.sec-title{margin-bottom:clamp(20px,2.6vw,34px)}
.eyebrow--center{justify-content:center;display:flex}
.split__sticky{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
@media (max-width:1080px){.split__sticky{position:static}}

/* ---- colour shifts (existing palette only) ---------------- */
.tone-2{background:var(--paper-2)}
.tone-2 .stat,.tone-2 .addon,.tone-2 .filmline div{background:var(--paper-2)}
.tone-soft{background:var(--accent-soft)}
.tone-soft .acc,.tone-soft .acc__item{border-color:rgba(76,53,232,.18)}
.tone-accent{background:var(--accent);color:#fff;--accent-text:#fff}
.tone-accent ::selection{background:#fff;color:var(--accent)}
.tone-accent .eyebrow{opacity:.8}
.tone-accent .lead,.tone-accent p{color:rgba(255,255,255,.82)}
.tone-accent .btn{border-color:rgba(255,255,255,.7)}
.tone-accent .btn::before{background:#fff}
.tone-accent .btn:hover{color:var(--accent)}
.tone-accent .btn--fill{background:#fff;border-color:#fff;color:var(--accent)}
.tone-accent .btn--fill::before{background:var(--ink)}
.tone-accent .btn--fill:hover{color:#fff}
.band{padding-top:clamp(48px,6vw,90px);padding-bottom:clamp(48px,6vw,90px)}
.band--accent{background:var(--accent);color:#fff;--accent-text:#fff}
.band--accent .lead{color:rgba(255,255,255,.82);margin-top:16px}
.band__in{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:end}
.band__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.band--accent .btn{border-color:rgba(255,255,255,.7)}
.band--accent .btn::before{background:#fff}
.band--accent .btn:hover{color:var(--accent)}
.band--accent .btn--fill{background:#fff;color:var(--accent);border-color:#fff}
.band--accent .btn--fill::before{background:var(--ink)}
.band--accent .btn--fill:hover{color:#fff}
@media (max-width:860px){.band__in{grid-template-columns:1fr}.band__cta{justify-content:flex-start}}

/* ---- buttons: icons + touch sizes -------------------------- */
.btn svg:not(.arrow){position:relative;z-index:1;flex:none}
.btn,.btn-pill{min-height:48px}
.btn:focus-visible,.btn-pill:focus-visible{outline-offset:4px}

/* ============================================================
   LOADER — the umbrella draws itself, opens, rain stops
   ============================================================ */
.loader{gap:0}
.ucs-seen .loader,.rm .loader{display:none}
.loader__stage{position:relative;width:min(34vw,170px);aspect-ratio:1}
.loader__brolly{width:100%;height:100%;overflow:visible}
.loader__brolly .lb{fill:none;stroke:var(--paper);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);animation:lbDraw 1s var(--ease-io) forwards}
.loader__brolly .lb--2{animation-delay:.45s}
.loader__brolly .lb--3{animation-delay:.75s;stroke-width:2}
.loader__brolly .lb--4{animation-delay:1s}
.loader__brolly .lb-fill{fill:var(--accent);opacity:0;animation:lbFill .8s var(--ease) 1.25s forwards}
@keyframes lbDraw{to{stroke-dashoffset:0}}
@keyframes lbFill{to{opacity:.55}}
.loader__drops{position:absolute;inset:-30% -40% 0;pointer-events:none}
.loader__drops i{position:absolute;top:0;width:1.5px;height:14px;border-radius:2px;background:var(--accent-lite);opacity:0;
  animation:lbRain 1s linear infinite}
.loader__drops i:nth-child(1){left:2%;animation-delay:.1s}.loader__drops i:nth-child(2){left:12%;animation-delay:.55s}
.loader__drops i:nth-child(3){left:20%;animation-delay:.3s}.loader__drops i:nth-child(4){left:80%;animation-delay:.2s}
.loader__drops i:nth-child(5){left:88%;animation-delay:.7s}.loader__drops i:nth-child(6){left:97%;animation-delay:.4s}
@keyframes lbRain{0%{transform:translateY(-10px);opacity:0}15%{opacity:.8}100%{transform:translateY(190px);opacity:0}}
.loader__word{margin-top:22px;font-family:var(--f-display);font-weight:600;font-size:clamp(20px,3vw,30px);letter-spacing:-.03em;overflow:hidden}
.loader__word span{display:block;transform:translateY(110%);animation:lbWord .9s var(--ease) .9s forwards}
@keyframes lbWord{to{transform:none}}
.loader__bar{margin-top:26px}
.loader__bar i{transition:transform .25s linear}
.loader.done .loader__stage{transform:translateY(-30px) scale(.9);opacity:0;transition:transform .7s var(--ease),opacity .5s}

/* ============================================================
   NAV
   ============================================================ */
.nav__mark{width:44px;height:20px;background:var(--logo-mark) center/contain no-repeat;flex:none;transition:transform .5s var(--ease),filter .4s}
.nav.on-dark .nav__mark,.nav.menu-open .nav__mark{filter:invert(1)}
.nav__brand:hover .nav__mark{transform:translateY(-3px) rotate(-6deg)}
.nav__name{font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.02em;line-height:1.05}
.nav__name em{display:block;font-style:normal;font-weight:400;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.55}
.ticker__i a{display:inline-flex;gap:6px;align-items:center;text-decoration:underline;text-decoration-color:rgba(244,241,234,.3);text-underline-offset:3px}
.ticker__i strong{font-weight:500;color:var(--accent-lite)}
.ticker .dot{color:var(--accent-lite)}
.menu{display:flex}
.menu__links{display:flex;flex-direction:column}
.menu__links a{font-family:var(--f-display);font-size:clamp(36px,10vw,68px);font-weight:500;letter-spacing:-.03em;
  line-height:1.14;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s var(--ease);display:flex;align-items:baseline;gap:14px}
.menu__links a sup{font-family:var(--f-mono);font-size:12px;opacity:.4}
.menu__links a.active{color:var(--accent-lite)}
.menu.open .menu__links a{opacity:1;transform:none}
.menu.open .menu__links a:nth-child(1){transition-delay:.18s}.menu.open .menu__links a:nth-child(2){transition-delay:.24s}
.menu.open .menu__links a:nth-child(3){transition-delay:.3s}.menu.open .menu__links a:nth-child(4){transition-delay:.36s}
.menu.open .menu__links a:nth-child(5){transition-delay:.42s}.menu.open .menu__links a:nth-child(6){transition-delay:.48s}
.menu__cta{margin-top:28px;opacity:0;transition:opacity .5s .5s}
.menu.open .menu__cta{opacity:1}
.menu__foot{gap:12px 22px}
.menu__foot a{opacity:1}
.menu .btn--fill::before{background:var(--paper)}
.menu .btn--fill:hover{color:var(--ink)}

/* ============================================================
   HERO
   ============================================================ */
.hero__title .hl{color:var(--accent)}
.hero__proof{display:flex;align-items:center;gap:9px;margin-top:22px;font-family:var(--f-mono);font-size:12px;color:var(--ink-45)}
.hero__proof svg{color:var(--accent);flex:none}

/* the crew walks in, then keeps a gentle sway */
.crew svg{opacity:0;transform:translateX(-24px)}
.is-ready .crew svg{animation:crewIn .8s var(--ease) forwards,sway 4.6s var(--ease-io) infinite;
  animation-delay:calc(var(--i) * 70ms + .35s),calc(var(--i) * -380ms)}
@keyframes crewIn{to{opacity:.92;transform:none}}
.rm .crew svg,.ucs-no-motion .crew svg{opacity:.92;transform:none;animation:none}

/* hero scene: one clean opening, then it stays open */
.viz{display:block;position:absolute;right:var(--pad);top:calc(var(--nav-h) + var(--tick-h) + 10px);width:min(31vw,390px);z-index:1;pointer-events:none}
.viz svg{width:100%;overflow:visible}
.viz__note{margin-top:2px}
.sc-ground{stroke:var(--ink-15);stroke-width:1.4;stroke-linecap:round}
.sc-pole{stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240}
.sc-canopy{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sc-rib{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.5;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.sc-fill{fill:var(--accent);opacity:.12}
.sc-drop{stroke:var(--rain);stroke-width:1.6;stroke-linecap:round;opacity:.55}
.sc-fig{fill:var(--ink);color:var(--ink)}
.sc-cap{font-family:var(--f-mono);font-size:10.5px;fill:var(--ink-45);opacity:0}
.sc-open{transform-box:fill-box;transform-origin:50% 0%;transform:scale(.05,.3);opacity:0}
.sc-walk{opacity:0;transform:translateX(var(--from))}
.sc-bob{transform-box:fill-box;transform-origin:50% 100%}
.sc-rain{animation:scRain 1.15s linear infinite}
@keyframes scRain{to{transform:translateY(47px)}}
.is-ready .sc-pole{animation:scPole .9s var(--ease) .1s forwards}
.is-ready .sc-open{animation:scOpen 1.2s cubic-bezier(.34,1.4,.5,1) .7s forwards}
.is-ready .sc-rib{animation:scRib 1s var(--ease) 1.2s forwards}
.is-ready .sc-walk{animation:scWalk 1.4s var(--ease) forwards;animation-delay:calc(1.4s + var(--i) * 120ms)}
.is-ready .sc-bob{animation:scBob 620ms ease-in-out infinite}
.is-ready .sc-cap{animation:scCap .8s var(--ease) 2.6s forwards}
@keyframes scPole{to{stroke-dashoffset:0}}
@keyframes scOpen{0%{transform:scale(.05,.3);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
@keyframes scRib{to{stroke-dashoffset:0}}
@keyframes scWalk{0%{transform:translateX(var(--from));opacity:0}20%{opacity:1}100%{transform:none;opacity:1}}
@keyframes scBob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-2.5px) rotate(1.2deg)}}
@keyframes scCap{to{opacity:1}}
/* once the crew is in, they stop bobbing — standing dry */
.viz.settled .sc-bob{animation:none}
.rm .viz *,.ucs-no-motion .viz *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
@media (max-width:1180px){
  .viz{position:relative;right:auto;top:auto;width:min(78vw,340px);margin:clamp(24px,5vw,40px) 0 0 auto}
  .viz__note{text-align:right}
  .hero{justify-content:flex-start}
}
@media (max-width:640px){.viz{width:min(86vw,300px);margin:28px auto 0}.viz__note{display:none}}

/* ============================================================
   SECTIONS
   ============================================================ */
.statement__hand{font-size:clamp(20px,2vw,28px);max-width:24ch;line-height:1.35}
.statement__text{font-family:var(--f-display);font-size:clamp(24px,4.1vw,64px);line-height:1.16;letter-spacing:-.035em;font-weight:400;max-width:20ch}
.tone-2 .statement__text .w{color:rgba(11,11,12,.42)}
.marquee__item .mq-dot{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.35;flex:none}
.marquee__item span{white-space:nowrap}
.logos__item{background:var(--paper)}
a.logos__item{transition:transform var(--snap)}
a.logos__item:hover{transform:translateY(-2px)}
.logos__item img{width:calc(var(--logo-w) * .7);max-height:calc(100% - 24px);object-fit:contain}

/* services list — <details> keeps the text in the page for search engines */
.svc__row{display:block}
.svc__row>summary{list-style:none;cursor:pointer}
.svc__row>summary::-webkit-details-marker{display:none}
.svc__sum{font-family:var(--f-mono);font-size:12px;color:var(--ink-45);max-width:26ch;text-align:right;transition:color .4s}
.svc__row:hover .svc__sum{color:rgba(244,241,234,.6)}
.svc__body{max-height:none;overflow:visible}
.svc__row[open] .svc__body{animation:svcOpen .6s var(--ease)}
@keyframes svcOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.svc__row[open] .svc__plus::after{transform:scaleY(0)}
.svc__row[open] .svc__plus{transform:rotate(180deg)}
.svc__bodyin{grid-template-columns:38px 1fr 1fr}
.svc__bodyin>div{grid-column:3}
.svc__more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--accent);position:relative;z-index:1}
.svc__row:hover .svc__more{color:var(--accent-lite)}
@media (max-width:1080px){.svc__sum{display:none}}
@media (max-width:860px){.svc__bodyin>div{grid-column:1}}

/* the model umbrella draws itself */
.model__head{text-align:center;max-width:760px;margin:0 auto clamp(16px,2.4vw,32px)}
.model__head .lead{margin:20px auto 0}
.brolly svg{width:min(100%,760px);margin:0 auto;display:block;overflow:visible}
.brolly .panel{fill:rgba(244,241,234,.06)}
.brolly .rib{stroke:var(--paper);stroke-width:2;fill:none;opacity:.9;stroke-dasharray:var(--len,2000);stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-io)}
.brolly .rib--soft{opacity:.5;transition-delay:.4s}
.js:not(.rm) .brolly:not(.vis) .rib{stroke-dashoffset:var(--len,2000)}
.spoke{cursor:pointer;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(.9s + var(--i) * 80ms)}
.js:not(.rm) .brolly:not(.vis) .spoke{opacity:0}
.spoke text{font-family:var(--f-display);font-size:13px;fill:var(--paper);letter-spacing:.01em;transition:fill .4s}
.spoke line{stroke:rgba(244,241,234,.28);stroke-width:1;stroke-dasharray:3 4;transition:stroke .4s}
.spoke circle{fill:var(--paper);transition:fill .4s,r .35s var(--ease)}
.spoke:hover text,.spoke:focus text{fill:var(--accent-lite)}
.spoke:hover line,.spoke:focus line{stroke:var(--accent-lite)}
.spoke:hover circle,.spoke:focus circle{fill:var(--accent-lite);r:7}
.brolly__fig{color:var(--paper);opacity:.95;transition:opacity .7s var(--ease);transition-delay:calc(1.4s + var(--i) * 90ms)}
.js:not(.rm) .brolly:not(.vis) .brolly__fig{opacity:0}
.model .stats{margin-top:clamp(36px,5vw,70px)}
@media (max-width:640px){.spoke text{font-size:20px}}

/* stats */
.stat b{display:flex;align-items:baseline}
.stat b em{font-size:.6em;margin-left:2px}

/* deck */
a.deck__in{color:inherit}
.deck__visual .g--img{background-size:cover;background-position:center}
.deck__brolly{position:absolute;right:-18px;top:-10px;width:clamp(120px,14vw,200px);color:rgba(255,255,255,.18);transform:rotate(-12deg);transition:transform 1.2s var(--ease)}
.deck__brolly svg{width:100%;height:auto}
.deck__card:hover .deck__brolly{transform:rotate(-4deg) translateY(6px)}
.deck__card:focus-within{outline:2px solid var(--accent);outline-offset:4px}

/* process on accent */
.hscroll.tone-accent{--accent-text:#fff}
.tone-accent .step{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.tone-accent .step:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.tone-accent .step__n{-webkit-text-stroke-color:rgba(255,255,255,.7)}
.tone-accent .step p{color:rgba(255,255,255,.78)}
.tone-accent .step__tags span{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.9)}
.hscroll__intro .lead{margin-top:20px}
.step--end{border-style:dashed;justify-content:center;align-items:center;text-align:center;gap:6px}
.step__brolly{width:64px;height:64px;color:#fff;margin-bottom:10px;animation:sway 4.6s var(--ease-io) infinite}
.step--end h3{margin-bottom:18px}
.hscroll__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,4vh,40px);height:2px;background:rgba(255,255,255,.2)}
.hscroll__bar i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
@media (max-width:860px){.hscroll__bar{display:none}}

/* FAQ (details/summary) */
.acc__item>summary{list-style:none}
.acc__item>summary::-webkit-details-marker{display:none}
.acc__q{cursor:pointer}
.acc__q span{flex:1}
.acc__item[open] .acc__q i::after{transform:rotate(0)}
.acc__a{max-height:none;overflow:visible}
.acc__item[open] .acc__a{animation:svcOpen .5s var(--ease)}
.acc__a p{padding:0 0 22px}
.acc__a p+p{margin-top:-10px}

/* breadcrumbs */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:"—";opacity:.6}
.crumbs a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .3s}
.crumbs a:hover{text-decoration-color:currentColor}
.pagehead__lead{margin-top:24px}
.pagehead__split{margin-top:clamp(22px,3vw,42px)}
.pagehead__hand{font-size:clamp(18px,1.8vw,24px);align-self:end}

/* about */
.about__hand{font-size:clamp(18px,1.9vw,25px);max-width:20ch;line-height:1.3}
.story--dark p{color:rgba(244,241,234,.7)}
.story--dark p strong{color:var(--paper)}
.dark .story p strong,.dark .story p em{color:var(--paper)}
.photo{border-radius:16px;overflow:hidden}
.photo__img{width:100%;max-height:72vh;object-fit:cover}
.photo figcaption{font-family:var(--f-mono);font-size:12px;color:var(--ink-45);padding-top:12px}
.tone-accent .vals{background:rgba(255,255,255,.25);grid-template-columns:repeat(2,1fr)}
.tone-accent .val{background:var(--accent);color:#fff}
.tone-accent .val p,.tone-accent .val__n{color:rgba(255,255,255,.78)}
.tone-accent .val:hover{background:#fff;color:var(--ink)}
.tone-accent .val:hover p,.tone-accent .val:hover .val__n{color:var(--ink-70)}
.close{text-align:center}
.close .h-lg{max-width:16ch;margin:0 auto}
.close__cta{display:flex;justify-content:center;margin-top:34px}
.filmline div b{display:flex}

/* services page */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3vw,40px)}
.jump a{font-family:var(--f-display);font-size:13px;font-weight:500;padding:10px 17px;border-radius:100px;border:1px solid var(--ink-15);transition:background var(--snap),color var(--snap),border-color var(--snap)}
.jump a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.brw__item{min-height:56px}
.brw__n{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-45);width:28px;flex:none}
.brw__t{flex:1;font-family:var(--f-display);font-size:clamp(19px,2.3vw,34px);letter-spacing:-.035em;line-height:1.05;color:rgba(11,11,12,.6);transition:color .45s}
.brw__item:hover .brw__t{color:rgba(11,11,12,.85)}
.brw__item.on .brw__t{color:var(--ink)}
.brw__panes{position:sticky;top:calc(var(--nav-h) + 16px)}
.brw__pane{position:relative;top:auto}
.brw__pane[hidden]{display:none}
.brw__pane.swap{opacity:0;transform:translateY(10px)}
.brw__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.brw__art{width:clamp(90px,10vw,130px);color:var(--accent-lite);flex:none;margin-top:-6px}
.brw__pane h2{font-size:clamp(23px,2.8vw,40px);letter-spacing:-.035em;line-height:1;margin-bottom:12px}
.brw__pane h2 a:hover{color:var(--accent-lite)}
.brw__go{margin-top:clamp(22px,2.6vw,32px);align-self:flex-start}
.brw__go.btn--fill::before{background:var(--paper)}
.brw__go.btn--fill:hover{color:var(--ink)}
@media (max-width:1080px){.brw__panes{position:static}}
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-15);border:1px solid var(--ink-15)}
.addon{background:var(--paper);padding:clamp(20px,2.4vw,32px);transition:background .45s var(--ease),color .45s}
.addon:hover{background:var(--ink);color:var(--paper)}
.addon h3{font-family:var(--f-display);font-size:17px;letter-spacing:-.015em;margin-bottom:8px;line-height:1.2}
.addon p{font-size:14px;line-height:1.6;color:var(--ink-70)}
.addon:hover p{color:rgba(244,241,234,.66)}
@media (max-width:1080px){.addons{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.addons{grid-template-columns:1fr}}
.industries{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.industries li{font-family:var(--f-display);font-size:clamp(17px,1.8vw,24px);letter-spacing:-.02em;padding:12px 20px;border:1px solid rgba(244,241,234,.22);border-radius:100px;transition:background .4s var(--ease),color .4s,border-color .4s}
.industries li:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.industries__end{margin-top:22px}

/* line illustrations */
.art{width:100%;height:auto;overflow:visible}
.art path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,600);stroke-dashoffset:0;
  transition:stroke-dashoffset 1.4s var(--ease-io);transition-delay:var(--d,0s)}
.js:not(.rm) .brw__pane:not(.drawn) .art path,.js:not(.rm) .svcpage__visual:not(.vis) .art path{stroke-dashoffset:var(--len,600)}

/* single service page */
.svcpage__head{position:relative;overflow:hidden}
.svcpage__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,90px);align-items:center}
.svcpage__hand{font-size:clamp(19px,2vw,26px);margin:14px 0 18px}
.svcpage__answer{font-size:clamp(16px,1.35vw,19px);line-height:1.62;max-width:56ch;color:var(--ink-70);
  border-left:3px solid var(--accent);padding-left:18px}
.svcpage__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.svcpage__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:30px;padding-top:22px;border-top:1px solid var(--ink-15)}
.svcpage__facts dt{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-45);margin-bottom:5px}
.svcpage__facts dd{font-size:14.5px;line-height:1.45}
.svcpage__visual{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1/1;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c1),var(--c2))}
.svcpage__art{width:70%;color:#fff}
.svcpage__art .art path{stroke-width:2.6}
.svcpage__img{width:100%;height:100%;object-fit:cover}
.incl{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(20px,3vw,44px)}
.incl li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--ink-15);font-size:15px;line-height:1.45}
.incl li svg{color:var(--accent);flex:none;margin-top:2px}
.prose{max-width:68ch}
.prose h2{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;line-height:1.1;margin:1.6em 0 .55em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(18px,1.8vw,22px);letter-spacing:-.02em;margin:1.4em 0 .5em}
.prose p,.prose li{font-size:clamp(15.5px,1.2vw,17px);line-height:1.72;color:var(--ink-70)}
.prose p{margin-bottom:1em}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}
.runsteps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,24px)}
.runsteps li{border-top:1px solid rgba(255,255,255,.35);padding-top:18px}
.runsteps__n{display:block;font-family:var(--f-display);font-size:clamp(44px,5vw,72px);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.75);margin-bottom:14px}
.runsteps b{display:block;font-family:var(--f-display);font-size:13px;letter-spacing:.14em;margin-bottom:8px}
.runsteps p{font-size:15px;line-height:1.55}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:clamp(14px,1.8vw,24px)}
.card{display:flex;flex-direction:column;gap:10px;padding-bottom:6px;color:inherit}
.card__vis{position:relative;aspect-ratio:16/11;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff;transition:transform .8s var(--ease)}
.card:hover .card__vis{transform:translateY(-4px)}
.card__vis b{font-family:var(--f-display);font-size:clamp(32px,3.4vw,48px);font-weight:600;letter-spacing:-.05em;line-height:.9}
.card__vis small{font-family:var(--f-mono);font-size:11px;opacity:.85;margin-top:6px}
.card__k{font-family:var(--f-mono);font-size:12px;color:var(--ink-45);margin-top:6px}
.card__t{font-family:var(--f-display);font-size:clamp(18px,1.7vw,23px);letter-spacing:-.025em;line-height:1.15}
.card__x{font-size:14px;color:var(--ink-70)}
.card__go{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:600;font-size:13.5px;color:var(--accent)}
.card:hover .card__t{color:var(--accent)}
.others__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));border-top:1px solid var(--ink-15)}
.others__item{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 44px 22px 0;border-bottom:1px solid var(--ink-15);transition:padding .5s var(--ease),color .4s}
.others__item:hover{padding-left:10px;color:var(--accent)}
.others__t{font-family:var(--f-display);font-size:19px;letter-spacing:-.02em;line-height:1.15}
.others__m{font-family:var(--f-mono);font-size:12px;color:var(--ink-45)}
.others__a{position:absolute;right:10px;top:26px;transition:transform .4s var(--ease)}
.others__item:hover .others__a{transform:translate(4px,-4px)}
@media (max-width:1080px){.svcpage__grid{grid-template-columns:1fr}.svcpage__visual{max-width:440px;aspect-ratio:16/11}}
@media (max-width:640px){.incl{grid-template-columns:1fr}.svcpage__visual{display:none}}

/* work index */
.idxlist{list-style:none}
.idx{display:block;padding:0}
.idx>a{display:grid;grid-template-columns:46px minmax(0,1fr) 118px;gap:clamp(12px,1.6vw,24px);align-items:center;padding:clamp(18px,2.1vw,28px) 0;color:inherit;transition:padding-left .55s var(--ease)}
.idx:hover>a,.idx>a:focus-visible{padding-left:clamp(6px,1vw,16px)}
.idx:hover .idx__title{color:var(--accent)}
.flt button[aria-pressed]{min-height:40px}
.wpanel .wcard{pointer-events:none}
.wcard__bg{position:absolute;inset:0;background-size:cover;background-position:center}
.wcard__brolly{position:absolute;right:-30px;top:20px;width:62%;color:rgba(255,255,255,.14);transform:rotate(-14deg)}
.wcard__in{position:relative;display:flex;flex-direction:column;height:100%}
.wcard__ba span{color:#fff}
.roll a{text-decoration:underline;text-decoration-color:rgba(11,11,12,.2);text-underline-offset:5px;text-decoration-thickness:1px}
@media (max-width:860px){
  .idx>a{grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:clamp(16px,3vw,22px) 0}
  .idx__metric{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:9px;margin-top:10px}
}

/* case study page */
.case__title{max-width:22ch}
.case .ba{border-radius:16px;margin-top:6px}
.ba__before{background:#3F3F46}
.ba--solo{aspect-ratio:21/8;border-radius:16px;background-size:cover;background-position:center}
.case__stats{margin:clamp(30px,4vw,56px) 0}
.case__body{padding:0;margin-top:clamp(10px,2vw,30px)}
.sheet__h{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-45);margin-bottom:16px;font-weight:400}
.sheet__step h2,.sheet__step h4{font-size:clamp(19px,2vw,27px);letter-spacing:-.025em;margin:0 0 12px;color:var(--ink);font-family:var(--f-display);font-weight:500}
.case__logo img{max-height:70px;width:auto;margin-bottom:28px}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chipset span,.chipset a{font-family:var(--f-display);font-size:12.5px;font-weight:500;padding:8px 15px;border-radius:100px;border:1px solid var(--ink-15);transition:background .4s var(--ease),color .35s,border-color .35s}
.chipset a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chipset--links{margin-bottom:10px}
.quote{margin:10px 0 34px;padding:26px 28px;border-radius:14px;background:var(--accent-soft)}
.quote blockquote p{font-family:var(--f-display);font-size:clamp(19px,2vw,26px);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.quote figcaption{margin-top:14px;font-family:var(--f-mono);font-size:12px;color:var(--ink-45)}
.nextcase{display:block;padding-top:clamp(50px,7vw,100px);padding-bottom:clamp(50px,7vw,100px);color:var(--paper);transition:background .5s var(--ease)}
.nextcase:hover{background:var(--accent)}
.nextcase__t{display:flex;align-items:center;gap:18px;font-family:var(--f-display);font-size:clamp(40px,8vw,120px);font-weight:500;letter-spacing:-.05em;line-height:.95}
.nextcase__t svg{transition:transform .6s var(--ease)}
.nextcase:hover .nextcase__t svg{transform:translate(10px,-10px)}
.nextcase__s{display:block;margin-top:14px;font-family:var(--f-mono);font-size:13px;opacity:.6}

/* case-study sheet */
.sheet__hero{margin-top:clamp(22px,3vw,40px)}
.sheet__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sheet__banner{background-size:cover;background-position:center}
.sheet__banner .ba{aspect-ratio:auto;height:100%}

/* contact */
.quick{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.quick__i{display:flex;align-items:center;gap:12px;padding:12px 20px 12px 16px;border:1px solid var(--ink-15);border-radius:100px;min-height:56px;transition:background .4s var(--ease),color .4s,border-color .4s}
.quick__i:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.quick__i span{display:flex;flex-direction:column;line-height:1.2}
.quick__i b{font-family:var(--f-display);font-weight:600;font-size:14px}
.quick__i small{font-family:var(--f-mono);font-size:11.5px;opacity:.6}
.quick__i svg{color:var(--accent);flex:none}
.quick__i:hover svg{color:var(--accent-lite)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.field input::placeholder,.field textarea::placeholder{color:transparent}
.field input:not(:placeholder-shown)~label,.field textarea:not(:placeholder-shown)~label{transform:translateY(-24px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.field--plain{border:none;padding-bottom:0}
.field--plain::after{display:none}
fieldset.field{border:none;margin:0;min-width:0}
.field__q{font-family:var(--f-mono);font-size:12px;color:var(--ink-70);padding:0}
.chip{position:relative;cursor:pointer;display:inline-flex}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:block}
.chip:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip{min-height:40px;align-items:center}
.form__foot .btn{margin-top:6px}
.form__foot .note a{text-decoration:underline;text-underline-offset:3px}
.contact-side dd address{font-style:normal}
.contact-side__map{display:inline-block;margin-top:6px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.audit{border:1px solid var(--ink-15);border-radius:14px;padding:22px;background:var(--paper-2)}
.audit .hand{font-size:22px;margin-bottom:8px}
.audit p:last-child{font-size:14px;line-height:1.6;color:var(--ink-70)}
.success{scroll-margin-top:120px}

/* 404 */
.lost .lead{margin-left:auto;margin-right:auto}

/* legal */
.legal__meta{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-45);padding-bottom:1.4em;margin-bottom:2em;border-bottom:1px solid var(--ink-15)}
.legal.prose p,.legal.prose li{font-family:var(--f-body)}
.pager .nav-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.pager .page-numbers{padding:10px 16px;border:1px solid var(--ink-15);border-radius:100px;font-family:var(--f-display);font-size:14px}
.pager .current{background:var(--ink);color:var(--paper)}

/* ============================================================
   FOOTER — compact, and two columns on phones
   ============================================================ */
.cta__big a{display:inline}
.cta__brolly{display:inline-block;width:.62em;height:.62em;vertical-align:baseline;margin-left:.12em;transition:transform .8s var(--ease)}
.cta__big a:hover .cta__brolly{transform:rotate(-12deg) translateY(-6px)}
.cta__lead{margin:22px auto 0;text-align:center}
.cta__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}
.foot__logo{display:inline-block}
.foot__img{width:132px;filter:invert(1);opacity:.92}
.foot__blurb{font-size:14px;line-height:1.6;color:rgba(244,241,234,.6);max-width:34ch;margin-top:14px}
.foot__h{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;opacity:.5;margin-bottom:16px;font-weight:400}
.foot__social{list-style:none;display:flex;gap:8px;margin-top:18px}
.foot__social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(244,241,234,.2);transition:background .3s,border-color .3s,color .3s}
.foot__social a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.foot .foot__contact a,.foot .foot__addr{display:inline-flex;align-items:flex-start;gap:10px}
.foot__contact .ico{flex:none;margin-top:3px;opacity:.6}
.foot__legal{display:flex;gap:18px;flex-wrap:wrap}
.foot__bot{opacity:.6}
@media (max-width:1080px){.foot__grid{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1 / -1}}
@media (max-width:640px){
  .cta{padding-top:56px;padding-bottom:48px}
  .cta__big{font-size:clamp(40px,13vw,64px)}
  .cta__btns .btn{flex:1 1 100%;justify-content:center}
  .marquee--foot{display:none}
  .foot{padding-top:34px;padding-bottom:calc(20px + var(--mbar-h,0px))}
  .foot__grid{grid-template-columns:1fr 1fr;gap:26px 16px;padding-bottom:26px}
  .foot__brand{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center}
  .foot__img{width:84px}
  .foot__blurb{margin-top:0;font-size:13px}
  .foot__social{grid-column:1 / -1;margin-top:8px}
  .foot ul{gap:0;font-size:14px}
  .foot ul a{display:inline-flex;padding:5px 0;min-height:34px;align-items:center}
  .foot .foot__contact ul a,.foot .foot__addr{min-height:34px;padding:5px 0;font-size:13.5px}
  .foot__grid{gap:22px 16px}
  .foot__h{margin-bottom:6px}
  .foot__contact{grid-column:1 / -1}
  .foot__contact ul{display:grid;grid-template-columns:1fr;gap:0}
  .foot__bot{flex-direction:column;align-items:flex-start;gap:8px;padding-top:16px}
  .foot__bot .clock{display:none}
  .foot__legal a{padding:8px 0}
}

/* ============================================================
   MOBILE ACTION BAR
   ============================================================ */
.mbar{display:none}
@media (max-width:860px){
  .ucs-has-mbar{--mbar-h:64px}
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:6px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:7800;
    padding:6px;border-radius:18px;background:rgba(11,11,12,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 12px 34px rgba(0,0,0,.28);transform:translateY(140%);transition:transform .6s var(--ease)}
  .mbar.on{transform:none}
  .menu-is-open .mbar{transform:translateY(140%)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;border-radius:13px;color:var(--paper);
    font-family:var(--f-display);font-size:13.5px;font-weight:600}
  .mbar a:active{background:rgba(244,241,234,.1)}
  .mbar__main{background:var(--accent)}
  .ucs-has-mbar .cursor,.ucs-has-mbar .cursor-dot{display:none}
}

/* ============================================================
   PHONES — general tidy
   ============================================================ */
@media (max-width:860px){
  .hero{padding-top:calc(var(--nav-h) + var(--tick-h) + 18px)}
  .hero__proof{font-size:11.5px;line-height:1.5}
  .hero__tag{font-family:var(--f-body);font-size:16px;line-height:1.6;letter-spacing:0}
  .statement{padding-top:70px;padding-bottom:70px}
  .sec-head .btn{order:2}
  .svc__head{gap:14px}
  .svc__num{width:auto}
  .model .stats{grid-template-columns:repeat(2,1fr)}
  .tone-accent .vals{grid-template-columns:1fr}
  .quick__i{flex:1 1 100%}
  .nav{--nav-h:72px}
}
@media (max-width:520px){
  :root{--nav-h:68px}
  .nav__name{font-size:13.5px}
  .nav__mark{width:36px;height:17px}
  .ticker{font-size:10.5px}
  .h-lg{font-size:clamp(32px,9.6vw,48px)}
  .h-md{font-size:clamp(26px,7.4vw,36px)}
  .svc__title{font-size:clamp(21px,6vw,28px)}
}
@media (prefers-reduced-motion:reduce){
  .marquee__track,.logos__track{animation:none}
}
.ucs-no-motion *{animation-duration:.001ms!important;transition-duration:.001ms!important}
/* chips are <label>s: undo the floating-label positioning that .field label uses */
.field .chip{position:relative;top:auto;left:auto;font-size:12.5px;color:inherit;pointer-events:auto;transform:none;letter-spacing:0;text-transform:none}
.field .chip:has(input:checked){color:#fff}
fieldset.field{padding-top:28px}
.field__q{display:block;float:left;width:100%;margin-bottom:6px}
.field__q+.chips{clear:both}

/* ============================================================
   ============================================================
   v2.1 — FEWER WORDS, MORE PICTURES
   Scenes, device mock-ups, charts, and rails on phones.
   ============================================================
   ============================================================ */
.pagehead--tight{padding-bottom:clamp(22px,3vw,40px)}
.pagehead--tight .h-xl{font-size:clamp(44px,8.6vw,132px)}

/* ---- animated scenes -------------------------------------- */

/* ---- service tiles ------------------------------------------ */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.tile{display:flex;flex-direction:column;gap:6px;padding:clamp(12px,1.5vw,20px);background:#fff;border:1px solid var(--ink-08);border-radius:16px;color:var(--ink);transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.tile:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 14px 34px rgba(76,53,232,.12)}
.tile__art{display:block;background:var(--paper);border-radius:10px;padding:8px;margin-bottom:6px}
.tile__t{font-family:var(--f-display);font-size:clamp(15px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0}
.tile__s{font-size:13px;line-height:1.4;color:var(--ink-45)}
@media (max-width:860px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile__s{font-size:11.5px}
  .tiles--rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .tiles--rail::-webkit-scrollbar{display:none}
  .tiles--rail .tile{flex:0 0 42vw;scroll-snap-align:start}
}
@media (min-width:861px){.tiles--rail{grid-template-columns:repeat(6,minmax(0,1fr))}.tiles--rail .tile__t{font-size:14px}}
@media (max-width:1180px) and (min-width:861px){.tiles--rail{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- rails: side-by-side swipe on phones -------------------- */
.rail--work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.wk[hidden]{display:none}
.wk a{display:block;color:inherit;background:#fff;border:1px solid var(--ink-08);border-radius:18px;overflow:hidden;height:100%;transition:transform .4s var(--ease),box-shadow .4s}
.wk a:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(11,11,12,.12)}
.wk .cv{border-radius:0}
.wk__body{padding:clamp(14px,1.5vw,20px)}
.wk__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wk__head h3{font-family:var(--f-display);font-size:clamp(18px,1.8vw,26px);font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.1}
.wk__kick{font-family:var(--f-mono);font-size:11px;color:var(--ink-45);white-space:nowrap}
.wk__icons{display:flex;gap:8px;margin-top:12px;color:var(--accent)}
.ci{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.railbar{display:none}
@media (max-width:860px){
  .rail--work,.reel{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);gap:12px}
  .rail--work::-webkit-scrollbar,.reel::-webkit-scrollbar{display:none}
  .rail--work .wk{flex:0 0 84%;scroll-snap-align:start}
  .railbar.on{display:block;height:3px;border-radius:3px;background:var(--ink-08);margin-top:14px;overflow:hidden}
  .railbar i{display:block;height:100%;background:var(--accent);border-radius:3px}
}

/* ---- case visuals: the real website, scrolling itself ------- */
.cv{position:relative;aspect-ratio:16/11;overflow:hidden;background:linear-gradient(140deg,var(--c1,var(--accent)),var(--c2,var(--rain)));border-radius:16px;isolation:isolate}
.cv--photo img{width:100%;height:100%;object-fit:cover}
.cv__browser{position:absolute;left:5%;width:76%;top:7%;background:#fff;border-radius:9px 9px 0 0;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.cv__bar{display:flex;align-items:center;gap:4px;height:clamp(16px,2.6cqw,24px);padding:0 9px;background:#EDEAE3}
.cv__bar i{width:6px;height:6px;border-radius:50%;background:rgba(11,11,12,.25)}
.cv__bar span{margin-left:8px;font-family:var(--f-mono);font-size:9.5px;color:rgba(11,11,12,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv__browser .cv__screen{aspect-ratio:16/10;overflow:hidden;background:#fff}
.cv__screen img{width:100%;height:auto;display:block;animation-play-state:paused}
.cv__browser img{animation:cvPan 18s ease-in-out infinite;animation-play-state:paused}
.cv__phone{position:absolute;right:4.5%;bottom:-3%;width:23%;background:var(--ink);padding:.5%;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.cv__phone .cv__screen{aspect-ratio:9/19;overflow:hidden;border-radius:9px;background:#fff}
.cv__phone img{animation:cvPanP 14s ease-in-out infinite;animation-play-state:paused}
.is-in .cv__screen img{animation-play-state:running}
@keyframes cvPan{0%,12%{transform:none}48%,62%{transform:translateY(-50%)}96%,100%{transform:none}}
@keyframes cvPanP{0%,10%{transform:none}46%,60%{transform:translateY(-39.7%)}96%,100%{transform:none}}
.rm .cv__screen img{animation:none}
.cv--scene{display:flex;align-items:center;justify-content:center}
.cv--scene .scene{width:auto;height:100%;--f:var(--c1);--s:rgba(11,11,12,.12)}
.cv--scene .scene .l{stroke:#fff}
.cv--scene .scene .p{fill:rgba(255,255,255,.95);stroke:#fff}
.cv--scene .sx-heart.f{fill:#fff}
.cv__logo{position:absolute;left:12px;top:12px;background:#fff;border-radius:10px;padding:7px 11px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.cv__logo img{height:clamp(24px,5cqw,38px);width:auto;max-width:110px;object-fit:contain}
.wk .cv,.case__visual .cv{container-type:inline-size}
.case__visual .cv{aspect-ratio:16/10;max-width:1200px;margin-inline:auto;border-radius:20px}
@media (max-width:860px){.case__visual .cv{aspect-ratio:16/11}.cv__bar span{font-size:8.5px}}

/* ---- how-it-works diagram ------------------------------------ */
.flow{max-width:1100px}
.flow__nodes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.flow__node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;font-family:var(--f-display);color:var(--ink-45);transition:color .3s}
.flow__ic{display:grid;place-items:center;width:clamp(56px,7vw,92px);aspect-ratio:1;border-radius:50%;background:var(--paper);border:2px solid var(--ink-15);transition:all .45s var(--ease)}
.flow__ic .ci{width:44%;height:44%}
.flow__node b{font-size:clamp(14px,1.7vw,22px);font-weight:600;letter-spacing:-.02em}
.flow__node.done .flow__ic{border-color:var(--accent);color:var(--accent)}
.flow__node.on{color:var(--ink)}
.flow__node.on .flow__ic{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.1);box-shadow:0 0 0 8px rgba(76,53,232,.14)}
.flow__line{position:absolute;left:12.5%;right:12.5%;top:calc(clamp(56px,7vw,92px) / 2 - 1px);height:2px;background:var(--ink-15)}
.flow__line i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.flow__panels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.flow__panel{list-style:none;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:.4;transition:opacity .4s}
.flow__panel.on{opacity:1}
.flow__panel li{font-family:var(--f-display);font-size:13px;font-weight:500;padding:5px 12px;border-radius:100px;background:#fff;border:1px solid var(--ink-08);text-align:center}
.flow__panel.on li{border-color:var(--accent);color:var(--accent)}
@media (max-width:860px){
  .flow__panels{display:block;min-height:42px}
  .flow__panel{display:none;flex-direction:row;flex-wrap:wrap;justify-content:center;opacity:1;animation:svcOpen .45s var(--ease)}
  .flow__panel.on{display:flex}
}

/* ---- numbered steps ------------------------------------------ */
.moves{list-style:none;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(14px,2vw,28px);position:relative}
.moves::before{content:"";position:absolute;left:0;right:0;top:16px;height:2px;background:rgba(255,255,255,.28);transform-origin:0 50%;transition:transform 1.6s var(--ease-io)}
.js:not(.rm) .moves:not(.vis)::before{transform:scaleX(0)}
.moves li{position:relative;padding-top:48px;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i) * 180ms)}
.js:not(.rm) .moves:not(.vis) li{opacity:0;transform:translateY(14px)}
.moves__n{position:absolute;top:0;left:0;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--accent);font-family:var(--f-mono);font-size:12px;font-weight:500}
.moves h3{font-family:var(--f-display);font-size:clamp(17px,1.9vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px;color:#fff}
.moves p{font-size:clamp(13px,1.1vw,15px);line-height:1.45;color:rgba(255,255,255,.82)}
@media (max-width:860px){
  .moves{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .moves::before{display:none}
  .moves li{padding-top:44px}
}

/* ---- matrix chart --------------------------------------------- */
.mx{display:block;max-width:1100px}
.mx__row{display:grid;grid-template-columns:minmax(92px,1.6fr) repeat(var(--cols,8),minmax(0,1fr));align-items:center;padding:clamp(9px,1.2vw,15px) 0;border-bottom:1px solid var(--ink-15);color:inherit;transition:background .25s}
a.mx__row:hover{background:rgba(76,53,232,.07)}
.mx__row--head{color:var(--accent);padding-top:0}
.mx__row>span{display:grid;place-items:center}
.mx__row>.mx__name{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(12px,1.5vw,19px);line-height:1.15;letter-spacing:-.015em;padding-right:6px}
.mx__dot{display:block;width:clamp(8px,1.5vw,18px);aspect-ratio:1;border-radius:50%;background:var(--ink-08);transition:transform .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d) * 35ms)}
.mx__dot.on{background:var(--accent)}
.js:not(.rm) .mx:not(.vis) .mx__dot.on{transform:scale(0)}
.mx__key{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-family:var(--f-display);font-size:12.5px;color:var(--ink-70)}
.mx__key li{display:inline-flex;align-items:center;gap:6px}
.mx__key .ci{width:16px;height:16px;color:var(--accent)}
@media (max-width:640px){.mx__row--head .ci{width:15px;height:15px}.mx__key{display:grid;grid-template-columns:1fr 1fr;font-size:11.5px}}

/* ---- timeline chart ------------------------------------------- */
.gantt{display:grid;gap:6px;max-width:1100px}
.gantt__row{display:grid;grid-template-columns:clamp(84px,14vw,170px) 1fr 38px;align-items:center;gap:10px;padding:7px 0;color:var(--paper)}
.gantt__l{font-family:var(--f-display);font-weight:500;font-size:clamp(12.5px,1.3vw,16px);line-height:1.15}
.gantt__track{display:block;height:clamp(12px,1.5vw,20px);border-radius:20px;background:rgba(244,241,234,.09);overflow:hidden}
.gantt__track i{display:block;height:100%;width:var(--to);border-radius:20px;transform-origin:0 50%;background:linear-gradient(90deg,var(--accent-lite) var(--from),rgba(155,139,255,.42) var(--from));transition:transform 1.2s var(--ease);transition-delay:calc(var(--i) * 90ms)}
.js:not(.rm) .gantt:not(.vis) .gantt__track i{transform:scaleX(0)}
.gantt__v{font-family:var(--f-mono);font-size:12px;text-align:right;color:rgba(244,241,234,.7)}
.gantt__row:hover .gantt__l{color:var(--accent-lite)}

/* ---- small tiles, pills --------------------------------------- */
.mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mini__i{background:var(--paper);border-radius:12px;padding:clamp(12px,1.4vw,18px)}
.mini__i h3{font-family:var(--f-display);font-size:clamp(14px,1.3vw,18px);font-weight:600;margin:0 0 3px;letter-spacing:-.015em;line-height:1.2}
.mini__i p{font-size:12.5px;line-height:1.35;color:var(--ink-45)}
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pills li{font-family:var(--f-display);font-weight:500;font-size:clamp(14px,1.5vw,20px);padding:.45em 1em;border-radius:100px;border:1.5px solid var(--ink);transition:background .25s,color .25s}
.pills li:hover{background:var(--ink);color:var(--paper)}
@media (max-width:860px){.mini{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- read-more --------------------------------------------- */
.more{border-block:1px solid var(--ink-15);max-width:900px;margin-top:clamp(24px,3vw,40px)}
.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:56px;font-family:var(--f-display);font-weight:600;font-size:15px}
.more>summary::-webkit-details-marker{display:none}
.more>summary i{width:12px;height:12px;position:relative;flex:none}
.more>summary i::before,.more>summary i::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;background:currentColor;transition:transform .3s}
.more>summary i::after{transform:rotate(90deg)}
.more[open]>summary i::after{transform:rotate(0)}
.more__in{padding-bottom:26px;animation:svcOpen .5s var(--ease)}
.more__in h3{font-family:var(--f-display);font-size:17px;margin:18px 0 6px}
.more__in p{font-size:15px;line-height:1.6;color:var(--ink-70);margin-bottom:12px}
.more__in .chipset{margin-top:8px}

/* ---- service page -------------------------------------------- */
.svcpage__grid{align-items:center}
.svcpage__visual{display:block!important;aspect-ratio:auto!important;background:var(--accent-soft);border-radius:20px;padding:clamp(12px,2vw,28px);max-width:none!important}
.svcpage__hand{font-size:clamp(20px,2vw,28px);margin-top:10px}
.svcpage .lead{margin-top:10px}
.svcpage__cta{margin-top:20px}
.quickfacts,.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:1px;background:var(--ink-15);padding:0;margin-inline:var(--pad);border-radius:14px;overflow:hidden}
.quickfacts>div,.facts>div{background:var(--paper);padding:clamp(12px,1.8vw,24px) clamp(10px,1.4vw,20px)}
.quickfacts b,.facts b{display:block;font-family:var(--f-display);font-size:clamp(20px,3.2vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.quickfacts span,.facts span{display:block;margin-top:4px;font-family:var(--f-mono);font-size:clamp(10px,.95vw,12.5px);line-height:1.3;color:var(--ink-45)}
.facts{margin-top:clamp(14px,2vw,24px)}
.incl--tiles{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.incl--tiles li{display:flex;gap:8px;align-items:flex-start;background:#fff;border:1px solid var(--ink-08);border-radius:12px;padding:12px;font-family:var(--f-display);font-size:clamp(12.5px,1.15vw,15px);font-weight:500;line-height:1.25}
.incl--tiles li svg{color:var(--accent);flex:none;margin-top:1px}
@media (max-width:1080px){.svcpage__visual{max-width:560px!important}}
@media (max-width:860px){
  .incl--tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svcpage__grid{gap:18px}
  .facts,.quickfacts{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- case study ---------------------------------------------- */
.case__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.case__title{word-break:normal}
.case__logo{flex:none;background:#fff;border:1px solid var(--ink-08);border-radius:14px;padding:10px 14px}
.case__logo img{height:clamp(34px,5vw,64px);width:auto;max-width:130px;object-fit:contain}
.shift{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(8px,2vw,24px);align-items:stretch;max-width:1000px;margin-inline:auto}
.shift>div{border-radius:14px;padding:clamp(14px,2vw,28px)}
.shift em{display:block;font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;opacity:.7}
.shift p{font-family:var(--f-display);font-weight:500;font-size:clamp(14px,2vw,26px);line-height:1.15;letter-spacing:-.02em}
.shift__a{background:var(--paper-2);color:var(--ink-70)}
.shift__a p{text-decoration:line-through;text-decoration-color:rgba(11,11,12,.3);text-decoration-thickness:1px}
.shift__b{background:var(--accent);color:#fff}
.shift__arrow{align-self:center;width:clamp(18px,4vw,50px);height:2px;background:var(--accent);position:relative;transform-origin:0 50%;transition:transform .9s var(--ease) .3s}
.shift__arrow::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg)}
.js:not(.rm) .shift:not(.vis) .shift__arrow{transform:scaleX(0)}
.path{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,28px)}
.path li{position:relative;background:#fff;border:1px solid var(--ink-08);border-radius:14px;padding:clamp(14px,1.8vw,24px)}
.path__n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:12px;margin-bottom:10px}
.path h2{font-family:var(--f-display);font-size:clamp(15px,1.5vw,21px);font-weight:600;margin:0 0 6px;letter-spacing:-.02em}
.path p{font-size:clamp(13.5px,1.1vw,15px);line-height:1.45;color:var(--ink-70)}
.delivered{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2.4vw,30px)}
.delivered a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:100px;background:var(--accent-soft);color:var(--accent);font-family:var(--f-display);font-weight:500;font-size:13px;min-height:40px;transition:background .25s,color .25s}
.delivered a:hover{background:var(--accent);color:#fff}
.delivered .ci{width:16px;height:16px}
.case__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.nextcase{display:block}
@media (max-width:860px){
  .path{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);gap:10px}
  .path::-webkit-scrollbar{display:none}
  .path li{flex:0 0 76%;scroll-snap-align:center}
  .case__links .btn{flex:1 1 40%;justify-content:center;padding:13px 12px}
}

/* ---- about ---------------------------------------------------- */
.reel{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;background:var(--ink);border-radius:14px;padding:clamp(16px,2vw,26px) 0;position:relative;margin-top:14px;color:var(--paper);
  background-image:radial-gradient(circle,var(--paper) 3px,transparent 3.5px),radial-gradient(circle,var(--paper) 3px,transparent 3.5px);background-size:22px 12px;background-position:0 3px,0 calc(100% - 3px);background-repeat:repeat-x}
.reel__f{padding:14px clamp(12px,1.4vw,20px);border-right:1px solid rgba(244,241,234,.16);display:flex;flex-direction:column;gap:5px}
.reel__f:last-child{border-right:0}
.reel__f em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--accent-lite);letter-spacing:.04em;text-transform:uppercase}
.reel__f b{font-family:var(--f-display);font-weight:600;font-size:clamp(16px,1.6vw,23px);letter-spacing:-.02em;line-height:1.1}
.reel__f span{font-size:13px;line-height:1.35;color:rgba(244,241,234,.66)}
@media (max-width:860px){
  .reel{margin-inline:0;padding-inline:0;border-radius:14px;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);border-radius:0;background-attachment:local;gap:0!important}
  .reel__f{flex:0 0 58vw;scroll-snap-align:start}
}
.bigs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,28px)}
.bigs>div{display:flex;flex-direction:column;gap:3px}
.bigs b{font-family:var(--f-display);font-weight:500;font-size:clamp(34px,8vw,120px);letter-spacing:-.05em;line-height:.95;color:var(--accent-lite)}
.bigs span{font-family:var(--f-display);font-weight:600;font-size:clamp(12.5px,1.4vw,18px)}
.bigs em{font-style:normal;font-size:clamp(11px,1vw,13.5px);line-height:1.3;color:rgba(244,241,234,.56)}
.globe{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(8px,2vw,24px);align-items:end;max-width:900px;margin-bottom:clamp(24px,3vw,40px)}
.globe svg{width:100%;height:auto;overflow:visible}
.globe__arc{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 7}
.globe__pin{fill:var(--ink)}
.globe__dot{fill:var(--accent)}
.globe__city b{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(14px,1.8vw,22px);letter-spacing:-.02em}
.globe__city span{font-family:var(--f-mono);font-size:clamp(12px,1.2vw,15px);color:var(--ink-45)}
.about__now{margin-bottom:18px}

/* ---- contact --------------------------------------------------- */
.quick{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:640px}
.quick__i{flex:none!important;justify-content:center;min-height:56px}
.nextsteps{list-style:none;margin-bottom:26px;position:relative;display:grid;gap:14px}
.nextsteps::before{content:"";position:absolute;left:14px;top:6px;bottom:6px;width:2px;background:var(--accent-soft)}
.nextsteps li{position:relative;display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:500;font-size:15px;line-height:1.2}
.nextsteps span{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:12px;z-index:1;animation:sxPulse 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * .7s)}
@media (max-width:860px){
  .form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .field--full{grid-column:1 / -1!important}
  .field:not(.field--full){grid-column:span 1!important}
  .form__foot .btn{width:100%;justify-content:center}
  .chips{gap:6px}
  .contact-side dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
  .contact-side dt{margin:0}
  .contact-side dd{margin:0;overflow-wrap:anywhere}
  .quick__i b{font-size:13px}
}

/* ---- fixes after device testing --------------------------------- */
main{overflow-x:clip}
.quickfacts,.facts{display:flex;flex-wrap:wrap;grid-auto-flow:unset}
.quickfacts>div,.facts>div{flex:1 1 0;min-width:0}
.case__visual .cv__logo{display:none}
@media (max-width:860px){
  .quickfacts>div{flex:1 1 28%}
  .facts>div{flex:1 1 40%}
}
@media (max-width:640px){.spoke text,.spoke line{display:none}.brolly svg{margin-top:-20px}}


/* ---- v2.2: grown-up tiles, full-fit pictures ---------------- */
.tile--svc,.tile--cta{gap:8px;padding:clamp(14px,1.6vw,22px);min-height:clamp(150px,15vw,216px)}
.tile__top{display:flex;align-items:center;justify-content:space-between;color:var(--accent);margin-bottom:clamp(10px,1.6vw,26px)}
.tile__top .ci{width:26px;height:26px}
.tile__go{color:var(--ink-45);transition:transform var(--snap),color var(--snap)}
.tile:hover .tile__go{transform:translateX(3px);color:var(--accent)}
.tile__logos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:auto;padding-top:12px}
.tile__logos img{height:24px;width:auto;max-width:72px;object-fit:contain}
.tile--small{min-height:0}
.tile--small .tile__top{margin-bottom:10px}
.tile--cta{background:var(--accent);border-color:var(--accent);color:#fff}
.tile--cta:hover{box-shadow:0 14px 34px rgba(76,53,232,.28)}
.tile--cta .tile__top{justify-content:flex-end}
.tile--cta .tile__go,.tile--cta:hover .tile__go{color:#fff}
.tile--cta .tile__s{color:rgba(255,255,255,.8);margin-top:auto}
@media (max-width:860px){.tile__logos img{height:18px;max-width:54px}.tile__top .ci{width:22px;height:22px}}

.cv{aspect-ratio:16/10;background:#EDEAE3}
.cv--site .cv__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:object-position 7s linear}
@media (hover:hover){.wk a:hover .cv--site .cv__shot{object-position:50% 100%}}
.cv--poster{display:grid;place-items:center;background:linear-gradient(140deg,var(--c1,var(--accent)),var(--c2,var(--rain)))}
.cv--poster::before{content:"";position:absolute;inset:-40%;background-image:repeating-linear-gradient(105deg,rgba(255,255,255,.1) 0 1px,transparent 1px 34px);animation:cvRain 26s linear infinite}
@keyframes cvRain{to{transform:translate3d(-34px,0,0)}}
.cv__mark{position:relative;display:grid;place-items:center;width:clamp(120px,34%,300px);aspect-ratio:1;background:#fff;border-radius:50%;box-shadow:0 18px 50px rgba(0,0,0,.2)}
.cv__mark img{width:66%;height:66%;object-fit:contain}
.case__visual .cv--poster{max-height:560px;width:100%}
.case__visual .cv--duo{display:grid;grid-template-columns:78fr 22fr;gap:clamp(8px,1.4vw,20px);aspect-ratio:auto;background:none;border-radius:0;overflow:visible;max-width:1200px;margin-inline:auto}
.cv--duo .cv__browser{position:relative;left:auto;top:auto;width:auto;border-radius:14px;box-shadow:0 12px 40px rgba(11,11,12,.12);border:1px solid var(--ink-08)}
.cv--duo .cv__screen{position:relative;aspect-ratio:16/10}
.cv--duo .cv__phone{position:relative;right:auto;bottom:auto;width:auto;padding:0;border:clamp(3px,.5vw,7px) solid var(--ink);border-radius:clamp(14px,1.8vw,26px);overflow:hidden;box-shadow:0 12px 40px rgba(11,11,12,.12);background:#fff}
.cv--duo .cv__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;animation:none}
@media (max-width:640px){.case__visual .cv--duo{grid-template-columns:1fr}.cv--duo .cv__phone{display:none}}

.wk__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.wk__tags li{font-family:var(--f-mono);font-size:11px;line-height:1;padding:6px 9px;border-radius:999px;background:var(--accent-soft);color:var(--ink)}
.wk--in{animation:wkIn .45s var(--ease) both}
@keyframes wkIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.always{display:flex;align-items:center;gap:10px;margin:0 0 clamp(18px,2.4vw,30px);padding:clamp(12px,1.4vw,18px) clamp(14px,1.8vw,24px);background:var(--accent-soft);border-radius:14px;font-family:var(--f-display);font-size:clamp(14px,1.3vw,18px);line-height:1.35}
.always .ci{flex:none;color:var(--accent);width:24px;height:24px}
.always span{margin-left:4px}
.flt{margin-bottom:10px}
.flt__res{font-family:var(--f-mono);font-size:12px;color:var(--ink-45);margin:0 0 clamp(14px,1.8vw,22px)}
.flt button.on{font-weight:600}

.proof{display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;max-width:none;height:100%;margin:0}
.proof .eyebrow{margin:0 0 6px}
.proof__row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#fff;border-radius:14px;color:var(--ink);transition:transform var(--snap),box-shadow var(--snap)}
.proof__row:hover{transform:translateX(3px);box-shadow:0 10px 26px rgba(11,11,12,.1)}
.proof__logo{flex:none;display:grid;place-items:center;width:54px;height:38px}
.proof__logo img{max-width:100%;max-height:100%;object-fit:contain}
.proof__name{flex:1;font-family:var(--f-display);font-weight:600;font-size:clamp(15px,1.3vw,18px);letter-spacing:-.015em}
.proof__row svg{color:var(--accent);flex:none}
.proof__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.proof__list li{padding:12px 14px;background:#fff;border-radius:14px;font-family:var(--f-display);font-size:15px}
@media (prefers-reduced-motion:reduce){.cv--poster::before,.wk--in{animation:none}.cv--site .cv__shot{transition:none}}
.rm .cv--poster::before,.rm .wk--in{animation:none}
.flt{scroll-padding-inline:var(--pad)}

/* ---- v2.2.1: review fixes ------------------------------------ */
.flow,.mx,.more{max-width:none}
.bigs b span{font:inherit;letter-spacing:inherit;color:inherit}
.aboutnow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.aboutnow .globe{margin:0;max-width:none}
.aboutnow__t .about__now{margin-top:0}
@media (max-width:860px){.aboutnow{grid-template-columns:1fr}}
.close{padding-top:clamp(40px,6vw,80px)}
.close .h-lg{max-width:22ch;font-size:clamp(26px,3.6vw,52px)}
.close .h-lg,.close .h-lg .row,.close .h-lg .line-mask{line-height:1.14}
.contact-side .audit{margin-top:18px}
.wk--cta a{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:100%;padding:clamp(20px,3vw,40px);background:var(--accent);border-color:var(--accent);color:#fff}
.wk__next{font-family:var(--f-display);font-size:clamp(26px,3.6vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.wk__go{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:600;font-size:15px}
@media (max-width:640px){.case__logo{display:none}}
.aboutnow .h-md{font-size:clamp(24px,3vw,44px)}