/* ==========================================================================
   FONTS — self-hosted, subset to the glyphs this site uses (596 KB -> 82 KB).
   No Google Fonts request, so nothing blocks first paint.
   ========================================================================== */
@font-face{font-family:'Vidaloka';src:url('fonts/vidaloka-regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Petrona';src:url('fonts/petrona-300.woff') format('woff');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Petrona';src:url('fonts/petrona-400.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Petrona';src:url('fonts/petrona-500.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Petrona';src:url('fonts/petrona-600.woff') format('woff');
  font-weight:600;font-style:normal;font-display:swap}


/* ==========================================================================
   TOKENS
   Monochrome UI by design. Champagne appears in exactly three places:
   the active section index, the cursor fill, and the scroll hairline.
   All other colour on this page is reflected light from the WebGL layer.
   ========================================================================== */
:root{
  /* This page is already dark. Without this, a browser that darkens pages for
     the visitor (Chrome's auto dark mode, or a dark-mode extension) darkens it a
     SECOND time: light text is pushed down toward the background it already sits
     on and disappears, while mid-tones survive. Declaring the scheme is the
     supported way to say "leave this one alone". */
  color-scheme:dark;
  --void:#00060F;
  --panel:#03101C;
  --ink:#FFFFFF;
  --ink-2:#ABABAB;
  --ink-3:#6C7A82;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);
  --accent:#4ACCAD;

  --f-d:'Vidaloka',Georgia,'Times New Roman',serif;    /* headings */
  --f-b:'Petrona',Georgia,'Times New Roman',serif;     /* body */
  --f-m:'Petrona',Georgia,serif;                       /* labels + data */

  --pad:clamp(1.15rem,3.6vw,4rem);
  --maxw:1760px;
  --nav-h:80px;
  --ob:-9deg;

  --e:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%}
body{
  margin:0;background:transparent;color:var(--ink);
  font-family:var(--f-b);font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-loading,body.menu-open{overflow:hidden;height:100%}
body.dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
body.dragging .cursor{opacity:.25}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--ink);color:var(--void)}
:focus-visible{outline:1px solid var(--accent);outline-offset:5px}

.skip{position:fixed;top:10px;left:10px;z-index:999;padding:.7rem 1.1rem;background:var(--ink);
  color:var(--void);font-family:var(--f-m);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  transform:translateY(-180%);transition:transform .35s var(--e)}
.skip:focus{transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   TYPE
   ========================================================================== */
.d{font-family:var(--f-d);font-weight:400;text-transform:uppercase;letter-spacing:-.012em;line-height:.92}
.d-1{font-size:clamp(2.5rem,9.2vw,10.4rem)}
.d-2{font-size:clamp(2.1rem,6.6vw,7.2rem)}
.d-3{font-size:clamp(2rem,5.6vw,6rem)}
.d em{font-style:normal;color:var(--ink);-webkit-text-stroke:1px var(--ink-3);-webkit-text-fill-color:transparent}

.m{font-family:var(--f-m);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.m--i{color:var(--accent);font-variant-numeric:tabular-nums}
.m--l{color:var(--ink-2)}
.ob{display:inline-block;transform:skewX(var(--ob))}

.lede{font-size:clamp(.96rem,1.05vw,1.1rem);line-height:1.68;color:var(--ink-2);max-width:50ch;font-weight:300}
.tiny{font-family:var(--f-m);font-size:.66rem;letter-spacing:.14em;color:var(--ink-3);line-height:1.7}

.lines .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lines .l>span{display:block;will-change:transform}

/* ==========================================================================
   LAYOUT — full-bleed screens, edge-anchored meta, one headline per view
   ========================================================================== */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
.screen{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding-block:calc(var(--nav-h) + 3vh) clamp(1.6rem,5vh,3.2rem)}
.opaque{background:var(--void)}
.hair{border-top:1px solid var(--line)}

/* the slate: index left, label right, sitting on a hairline */
.slate{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-bottom:.85rem;border-bottom:1px solid var(--line);margin-bottom:clamp(2.5rem,7vh,5.5rem)}

/* ==========================================================================
   FIXED LAYERS
   ========================================================================== */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body.is-loading #gl{z-index:205}
body.no-webgl #gl{display:none}

.backdrop{position:fixed;inset:0;z-index:0;display:none;pointer-events:none;
  background:radial-gradient(65% 55% at 60% 30%,rgba(74,204,173,.10),transparent 70%),
             radial-gradient(70% 60% at 20% 80%,rgba(150,165,200,.08),transparent 70%),var(--void)}
body.no-webgl .backdrop{display:block}

.grain{position:fixed;inset:-50%;z-index:52;pointer-events:none;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  will-change:transform;animation:gr 6s steps(6) infinite}
@keyframes gr{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

.hline{position:fixed;top:0;left:0;right:0;height:1px;z-index:70;pointer-events:none}
.hline i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;opacity:.75}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;opacity:0}
.cursor__d{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--ink);mix-blend-mode:difference}
.cursor__r{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;
  transition:width .5s var(--e),height .5s var(--e),margin .5s var(--e),
             background-color .5s var(--e),border-color .5s var(--e)}
.cursor__t{font-family:var(--f-m);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--void);opacity:0;transition:opacity .3s var(--e);white-space:nowrap}
.cursor.link .cursor__r{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgba(255,255,255,.85)}
.cursor.view .cursor__r{width:104px;height:104px;margin:-52px 0 0 -52px;background:var(--accent);border-color:transparent}
.cursor.view .cursor__t{opacity:1}
.cursor.drag .cursor__r{width:82px;height:82px;margin:-41px 0 0 -41px;border-style:dashed;border-color:rgba(255,255,255,.7)}
.cursor.drag .cursor__t{opacity:1;color:var(--ink)}
body.no-cursor .cursor{display:none}

/* ==========================================================================
   LOADER + ENTRY GATE
   ========================================================================== */
.loader{position:fixed;inset:0;z-index:200}
.loader__veil{position:absolute;inset:0;background:var(--void);z-index:200}
.loader__ui{position:fixed;inset:0;z-index:220;display:flex;flex-direction:column;
  justify-content:space-between;padding:var(--pad);padding-block:clamp(1.4rem,4vh,2.4rem);
  pointer-events:none}
.loader__row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.loader__mark{display:none;width:min(44vw,300px);margin:auto;opacity:.9;overflow:visible}
body.no-webgl .loader__mark{display:block;animation:sp 10s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.loader__bot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.loader__n{font-family:var(--f-d);font-weight:500;line-height:.78;letter-spacing:-.07em;
  font-size:clamp(3rem,7.4vw,6rem);font-variant-numeric:tabular-nums}
.loader__n sup{font-size:.14em;vertical-align:super;color:var(--ink-3);letter-spacing:.06em}
.loader__steps{display:flex;gap:.55rem;padding-bottom:1rem}
.loader__steps b{font-family:var(--f-m);font-weight:400;font-size:.62rem;letter-spacing:.14em;
  color:var(--ink-3);opacity:.28;transition:opacity .5s var(--e),color .5s var(--e)}
.loader__steps b.on{opacity:1;color:var(--accent)}
.loader__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--line)}
.loader__bar i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}

/* entry gate */
.gate{position:fixed;inset:0;z-index:230;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.1rem;opacity:0;visibility:hidden;pointer-events:none}
.gate.on{opacity:1;visibility:visible;pointer-events:auto}
.gate__hint{margin-bottom:1.2rem}
.gate__btn{position:relative;overflow:hidden;padding:1.05rem 2.4rem;border:1px solid var(--line-2);
  font-family:var(--f-m);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  min-width:min(78vw,300px);text-align:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.gate__btn i{position:absolute;inset:0;background:var(--ink);transform:translateY(101%);
  transition:transform .55s var(--e);z-index:0}
.gate__btn span{position:relative;z-index:1;transition:color .4s var(--e)}
.gate__btn:hover i{transform:none}
.gate__btn:hover span{color:var(--void)}
.gate__btn--ghost{border-color:var(--line)}
/* Sound is on by default, so say which one is already in effect rather than
   showing two buttons that look equally unchosen. */
.gate--sound .gate__btn:not(.gate__btn--ghost){border-color:var(--accent)}
.gate--sound .gate__btn:not(.gate__btn--ghost)::after{content:'\00a0\00b7\00a0on';
  font-size:.72em;letter-spacing:.14em;color:var(--accent);position:relative;z-index:1}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);display:flex;
  align-items:center;justify-content:space-between;padding-inline:var(--pad);
  border-bottom:1px solid transparent;
  transition:background-color .7s var(--e),backdrop-filter .7s var(--e),border-color .7s var(--e)}
.nav.stuck{background:rgba(0,6,15,.6);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line)}
.nav__logo{display:flex;align-items:center;gap:.6rem;position:relative;z-index:2}
.nav__logo svg{width:21px;height:21px;overflow:visible}
.nav__logo svg path{transition:fill .5s var(--e)}
.nav__logo:hover svg path{fill:var(--accent)}
.nav__logo b{font-family:var(--f-d);font-weight:600;font-size:.8rem;letter-spacing:.3em}
.nav__logo sup{font-family:var(--f-m);font-size:.5rem;color:var(--ink-3)}
.nav__right{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.2rem)}
.nav__links{display:none;gap:clamp(1.2rem,2.2vw,2.2rem);align-items:center}
.nav__links a{position:relative;font-family:var(--f-m);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);padding-block:.4rem}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--e)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
@media(min-width:940px){.nav__links{display:flex}.nav__burger{display:none}}

.snd{display:flex;align-items:center;gap:.5rem;font-family:var(--f-m);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);transition:color .4s var(--e)}
.snd:hover{color:var(--ink)}
.snd__eq{display:flex;align-items:flex-end;gap:2px;height:11px}
.snd__eq i{width:2px;height:3px;background:currentColor;transition:height .3s var(--e)}
.snd.on{color:var(--ink)}
.snd.on .snd__eq i{animation:eq .9s var(--e-io) infinite alternate}
.snd.on .snd__eq i:nth-child(2){animation-delay:.15s}
.snd.on .snd__eq i:nth-child(3){animation-delay:.3s}
.snd.on .snd__eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{from{height:2px}to{height:11px}}

.nav__burger{position:relative;z-index:2;width:42px;height:42px;margin-right:-9px;display:grid;
  place-content:center;gap:6px}
.nav__burger span{display:block;width:23px;height:1px;background:var(--ink);transition:transform .5s var(--e)}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;background:var(--panel);
  padding:calc(var(--nav-h) + 6vh) var(--pad) var(--pad);display:flex;flex-direction:column;
  justify-content:space-between;clip-path:inset(0 0 100% 0);visibility:hidden;transition:visibility .1s .7s}
body.menu-open .menu{visibility:visible;transition:visibility 0s}
.menu__list li{overflow:hidden}
.menu__list a{display:block;padding-block:.2em;font-family:var(--f-d);font-weight:500;
  text-transform:uppercase;letter-spacing:-.045em;line-height:1;font-size:clamp(2.4rem,12vw,4.6rem)}
.menu__list a i{font-style:normal;font-family:var(--f-m);font-size:.19em;letter-spacing:.14em;
  vertical-align:super;color:var(--accent);margin-right:.7em}
.menu__foot{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:flex-end}

/* ==========================================================================
   00 HERO
   ========================================================================== */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;
  pointer-events:none;background:linear-gradient(to top,var(--void) 4%,rgba(0,6,15,.74) 40%,transparent)}
.hero>.wrap{position:relative;z-index:2}
.hero__top{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start}
.hero__spacer{flex:1 1 auto;min-height:6vh}
.hero__title{position:relative;z-index:2}
.hero__title .l>span{text-shadow:0 0 90px rgba(0,6,15,.9),0 0 30px rgba(0,6,15,.7)}
.hero__bot{display:flex;gap:2rem;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;
  margin-top:clamp(1.6rem,4.5vh,3rem);padding-top:1.3rem;border-top:1px solid var(--line)}
.hero__scroll{display:flex;align-items:center;gap:.7rem}
.hero__scroll .dash{position:relative;width:56px;height:1px;background:var(--line-2);overflow:hidden}
.hero__scroll .dash::after{content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateX(-100%);animation:sw 2.8s var(--e-io) infinite}
@keyframes sw{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ==========================================================================
   01 MANIFESTO
   ========================================================================== */
#manifesto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(94deg,rgba(0,6,15,.90) 0%,rgba(0,6,15,.70) 46%,rgba(0,6,15,.38) 100%)}
#manifesto>*{position:relative;z-index:2}
.man__grid{display:grid;gap:clamp(2.4rem,5vw,5rem);grid-template-columns:1fr;align-items:end;flex:1 1 auto}
@media(min-width:1040px){.man__grid{grid-template-columns:1.6fr .78fr}}
.man__body p+p{margin-top:1.05rem}
.man__meta{display:grid;gap:0;margin-top:clamp(1.8rem,4vh,2.6rem)}
.man__meta div{display:flex;justify-content:space-between;gap:1rem;padding-block:.7rem;border-bottom:1px solid var(--line)}
.man__meta div:first-child{border-top:1px solid var(--line)}
.man__meta b{font-family:var(--f-m);font-weight:400;font-size:.7rem;letter-spacing:.1em;color:var(--ink)}

.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:1rem;display:flex}
.ticker__row{display:flex;flex:0 0 auto;will-change:transform;animation:mar 34s linear infinite}
.ticker__row span{font-family:var(--f-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem}
.ticker__row span::after{content:"";width:3px;height:3px;background:var(--ink-3);border-radius:50%}
@keyframes mar{to{transform:translateX(-100%)}}

/* ==========================================================================
   02 CAPABILITIES
   ========================================================================== */
.cap__list{border-top:1px solid var(--line);flex:1 1 auto}
.cap-row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;align-items:start;
  padding-block:clamp(1.4rem,3.6vw,2.6rem);border-bottom:1px solid var(--line);isolation:isolate;overflow:hidden}
@media(min-width:900px){.cap-row{grid-template-columns:4.5rem minmax(0,1fr) minmax(0,25ch) 2.6rem;align-items:center;gap:2rem}}
.cap-row::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(94deg,rgba(255,255,255,.075),rgba(255,255,255,.012) 45%,transparent 70%);
  opacity:0;transform:translateY(26%);transition:opacity .6s var(--e),transform .75s var(--e)}
.cap-row:hover::before,.cap-row:focus-within::before{opacity:1;transform:none}
.cap-row__n{font-family:var(--f-m);font-size:.68rem;letter-spacing:.14em;color:var(--ink-3);transition:color .5s var(--e)}
.cap-row:hover .cap-row__n{color:var(--accent)}
.cap-row__t{font-family:var(--f-d);font-weight:500;text-transform:uppercase;letter-spacing:-.045em;
  line-height:.94;font-size:clamp(1.55rem,4.2vw,3.4rem);color:var(--ink-2);transform-origin:0 50%;
  transition:color .5s var(--e),transform .75s var(--e)}
.cap-row:hover .cap-row__t{color:var(--ink);transform:translateX(clamp(6px,1.1vw,20px))}
.cap-row__d{color:var(--ink-3);font-size:.86rem;line-height:1.5;max-width:32ch}
.cap-row__a{justify-self:end;width:20px;height:20px;color:var(--ink-3);transform:translate(-8px,8px);
  opacity:0;transition:all .55s var(--e)}
.cap-row:hover .cap-row__a{opacity:1;transform:none;color:var(--ink)}
@media(max-width:899px){.cap-row__a{display:none}.cap-row__d{grid-column:2}}

/* ==========================================================================
   03 WORK — WebGL helix. The DOM here is only the read-out over the canvas.
   ========================================================================== */
.work{position:relative}
.work__pin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding-block:calc(var(--nav-h) + 3vh) clamp(1.6rem,5vh,3.2rem);overflow:hidden}
.work__stage{position:relative;flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}

/* mode toggle — the spiral/list switch */
.modes{display:flex;gap:.4rem;align-items:center}
.modes button{position:relative;padding:.4rem .85rem;font-family:var(--f-m);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);border:1px solid transparent;
  transition:color .45s var(--e),border-color .45s var(--e)}
.modes button.on{color:var(--ink);border-color:var(--line-2)}

/* live read-out of whatever plane is centred / hovered */
.readout{display:grid;gap:.4rem;pointer-events:none;min-height:1px}
.readout__t{font-family:var(--f-d);font-weight:500;text-transform:uppercase;letter-spacing:-.05em;
  line-height:.86;font-size:clamp(2.1rem,7vw,6.2rem);overflow:hidden}
.readout__t span{display:block;will-change:transform}
.readout__meta{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline}
.work__bar{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
  margin-top:clamp(1.2rem,3vh,2rem);padding-top:1.1rem;border-top:1px solid var(--line)}
.work__count{font-family:var(--f-m);font-size:.68rem;letter-spacing:.14em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.work__count b{color:var(--ink);font-weight:500}

/* DOM fallback list — also the mobile-friendly index, and what SEO crawlers read */
.work__index{margin-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--line)}
.work__index li a{display:grid;grid-template-columns:2.6rem 1fr auto;gap:1rem;align-items:baseline;
  padding-block:.85rem;border-bottom:1px solid var(--line);transition:opacity .4s var(--e)}
.work__index li a:hover{opacity:.55}
.work__index em{font-style:normal;font-family:var(--f-d);font-weight:500;font-size:1rem;
  letter-spacing:-.01em;text-transform:uppercase}
body.no-webgl .work__pin{min-height:0}
.work__index{display:none}
body.no-webgl .work__index,body.reduced .work__index{display:block}

/* ==========================================================================
   04 IN FOCUS
   ========================================================================== */
.focus__pin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:space-between;padding-block:calc(var(--nav-h) + 3vh) clamp(1.6rem,5vh,3.2rem);
  overflow:hidden}
.focus__mid{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr;flex:1 1 auto}
@media(min-width:960px){.focus__mid{grid-template-columns:1fr auto 1fr}}
.focus__side{display:grid;gap:1.4rem;max-width:28ch;align-content:center}
.focus__side--r{justify-items:end;text-align:right;margin-left:auto}
.focus__c{text-align:center;pointer-events:none}
.focus__c h2 .l>span{text-shadow:0 0 90px rgba(0,6,15,.85)}
.spec{display:grid;gap:.3rem}
.spec b{font-family:var(--f-d);font-weight:500;font-size:1rem;letter-spacing:-.015em}
.focus__bot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:flex-end;
  padding-top:1.2rem;border-top:1px solid var(--line)}

/* ==========================================================================
   05 STUDIO
   ========================================================================== */
.studio__grid{display:grid;gap:clamp(2.4rem,5vw,4.5rem);grid-template-columns:1fr;align-items:end;flex:1 1 auto}
@media(min-width:1040px){.studio__grid{grid-template-columns:1.3fr .85fr}}
.stat{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-block:1.1rem;border-bottom:1px solid var(--line)}
.stat:first-child{border-top:1px solid var(--line)}
.stat b{font-family:var(--f-d);font-weight:500;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1;
  letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.stat span{text-align:right;max-width:15ch}

/* ==========================================================================
   06 CLIENTS
   ========================================================================== */
.cl{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);flex:1 1 auto;align-content:center}
@media(min-width:760px){
  .cl{grid-template-columns:repeat(var(--cl-cols,4),1fr)}
}

/* Slider. Each row's track holds its logos twice over — enough copies to be
   wider than the screen either way — and slides exactly half its own width
   before repeating, which is why the loop has no visible seam.
   .cl__v is the only thing that clips: the section itself must never grow a
   horizontal scrollbar. */
.cl--slider{display:flex;flex-direction:column;justify-content:center;gap:var(--cl-gap,clamp(.8rem,2vw,1.4rem));
  align-content:initial;position:relative;flex:1 1 auto;min-height:0;
  border-bottom:1px solid var(--line);overflow:hidden;padding:clamp(1rem,3vw,2rem) 0;
  --cl-tile:clamp(168px,24vw,262px)}

/* How many rows the admin asked for. A logo tile is 2.5 times as wide as it is
   tall, so the row height follows the tile width — bringing the tiles in is
   what lets four rows occupy the space two rows left empty without the section
   growing. The vh term is the guard: on a short window the tiles shrink rather
   than pushing the section past the screen. */
.cl--slider[data-rows="3"]{--cl-tile:clamp(146px,min(21vw,40vh),250px);--cl-gap:clamp(.6rem,1.6vw,1.1rem)}
.cl--slider[data-rows="4"]{--cl-tile:clamp(140px,min(20vw,36vh),240px);--cl-gap:clamp(.5rem,1.4vw,1rem)}

.cl__r{position:relative;width:100%}
.cl__v{overflow:hidden;width:100%}
.cl__t{display:flex;width:max-content;will-change:transform;
  animation:cl-drift var(--cl-dur,60s) linear infinite}
.cl--slider .cl__c{flex:0 0 var(--cl-tile);border-bottom:0;border-right:0;min-height:0}
.cl--rtl .cl__t{animation-direction:reverse}
.cl--slider:hover .cl__t{animation-play-state:paused}
@keyframes cl-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Fade the two edges so logos arrive and leave rather than being chopped off.
   Masked only where the browser supports it; without it the row simply runs
   to the edges, which is fine. */
@supports (mask-image:linear-gradient(90deg,#000,#000)){
  .cl--slider{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
}

/* Someone who has asked for less motion gets a still row they can push along
   themselves, not a frozen half-slide. */
@media(prefers-reduced-motion:reduce){
  .cl__t{animation:none}
  .cl__v{overflow-x:auto;scrollbar-width:none}
  .cl__v::-webkit-scrollbar{display:none}
}
.cl__c{position:relative;display:flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:clamp(92px,12vw,148px);border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  color:var(--ink-3);transition:color .5s var(--e),background-color .5s var(--e)}
.cl__c:hover{color:var(--ink);background:rgba(255,255,255,.025)}
.cl__c svg{width:16px;height:16px;opacity:.5;transition:opacity .5s var(--e),transform .7s var(--e)}
.cl__c:hover svg{opacity:1;transform:rotate(-9deg) scale(1.12)}
.cl__c b{font-family:var(--f-d);font-weight:500;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}

/* ==========================================================================
   07 CONTACT + FOOTER
   ========================================================================== */
.contact__in{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.contact h2{margin-bottom:clamp(2rem,5vh,3.4rem)}
.cta{position:relative;display:inline-flex;align-items:center;gap:1rem;padding:1.05rem 1.9rem 1.05rem 1.6rem;
  border:1px solid var(--line-2);overflow:hidden;align-self:flex-start;
  font-family:var(--f-m);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%)}
.cta i{position:absolute;inset:0;background:var(--ink);transform:translateY(101%);
  transition:transform .6s var(--e);z-index:0}
.cta span,.cta svg{position:relative;z-index:1;transition:color .45s var(--e),transform .6s var(--e)}
.cta svg{width:17px;height:17px}
.cta:hover i{transform:none}
.cta:hover span,.cta:hover svg{color:var(--void)}
.cta:hover svg{transform:translateX(5px)}

.contact__grid{display:grid;gap:2rem;grid-template-columns:1fr;margin-top:clamp(3rem,7vh,5rem);
  padding-top:1.5rem;border-top:1px solid var(--line)}
@media(min-width:800px){.contact__grid{grid-template-columns:repeat(4,1fr)}}
.contact__grid dt{margin-bottom:.65rem}
.contact__grid a{position:relative;display:inline-block;color:var(--ink);font-size:.93rem}
.contact__grid a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--e)}
.contact__grid a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.contact__grid li+li{margin-top:.3rem}

.foot{position:relative;z-index:2;background:var(--void);border-top:1px solid var(--line);
  padding-block:clamp(2rem,5vh,3rem)}
.foot__top{display:flex;gap:2rem;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.foot__nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.foot__nav a{font-family:var(--f-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.foot__nav a:hover{color:var(--ink)}
.foot__bot{display:flex;gap:1.2rem;justify-content:space-between;flex-wrap:wrap;align-items:center;
  margin-top:clamp(1.5rem,3.4vh,2.3rem);padding-top:1.1rem;border-top:1px solid var(--line)}

/* ==========================================================================
   MOTION / ACCESSIBILITY
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .grain,.cursor{display:none}
  .lines .l>span{transform:none !important}
}
body.reduced .grain{display:none}

/* ==========================================================================
   PAGE CHROME shared by the sub-pages
   ========================================================================== */
.page-head{min-height:78vh;min-height:78svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:calc(var(--nav-h) + 8vh) clamp(1.6rem,5vh,3rem);position:relative}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--void) 4%,rgba(0,6,15,.72) 42%,transparent)}
.page-head>.wrap{position:relative;z-index:2}
.crumb{display:flex;gap:.6rem;align-items:center;margin-bottom:auto}
.page-lede{margin-top:clamp(1.4rem,4vh,2.4rem);padding-top:1.2rem;border-top:1px solid var(--line);
  display:flex;gap:2rem;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}

/* ---------- ABOUT: journey timeline ---------- */
.jr{position:relative}
.jr__pin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--nav-h) + 3vh) clamp(1.6rem,5vh,3rem);overflow:hidden}
.jr__stage{position:relative;flex:1 1 auto;display:flex;align-items:center}
.jr__item{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;pointer-events:none}
.jr__item.on{opacity:1;pointer-events:auto}
.jr__yr{font-family:var(--f-m);font-size:.7rem;letter-spacing:.2em;color:var(--accent);margin-bottom:1rem}
.jr__t{font-family:var(--f-d);font-weight:500;text-transform:uppercase;letter-spacing:-.05em;line-height:.88;
  font-size:clamp(1.9rem,5.4vw,4.4rem);max-width:16ch}
.jr__d{margin-top:1.2rem;max-width:44ch}
.jr__rail{display:flex;gap:.5rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.jr__rail i{flex:1;height:2px;background:var(--line-2);position:relative;overflow:hidden}
.jr__rail i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .6s var(--e)}
.jr__rail i.on::after{transform:scaleX(1)}

.vals{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:760px){.vals{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.vals{grid-template-columns:repeat(4,1fr)}}
.val{padding:clamp(1.4rem,3vw,2.2rem);border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.val b{display:block;font-family:var(--f-d);font-weight:500;font-size:1.02rem;letter-spacing:-.01em;margin:.7rem 0 .5rem}

/* ---------- SERVICES: fluid stage ---------- */
.fl{position:relative}
.fl__pin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding-block:calc(var(--nav-h) + 3vh) clamp(1.6rem,5vh,3rem);overflow:hidden}
.fl__stage{position:relative;flex:1 1 auto}
.fl__svc{position:absolute;inset:0;display:grid;align-content:center;gap:1rem;pointer-events:none}
@media(min-width:900px){
  .fl__svc{grid-template-columns:1fr 1fr;align-content:center;gap:2rem}
  .fl__svc .fl__l{grid-column:1;justify-self:start;max-width:26ch}
  .fl__svc .fl__r{grid-column:2;justify-self:end;text-align:right;max-width:26ch}
}
.fl__n{font-family:var(--f-m);font-size:.68rem;letter-spacing:.2em;color:var(--accent)}
.fl__t{font-family:var(--f-d);font-weight:500;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;
  font-size:clamp(1.7rem,4.4vw,3.4rem);margin:.5rem 0 .7rem}
.fl__bar{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
  padding-top:1.1rem;border-top:1px solid var(--line)}
.fl__dots{display:flex;gap:.45rem}
.fl__dots i{width:22px;height:2px;background:var(--line-2);transition:background-color .5s var(--e)}
.fl__dots i.on{background:var(--accent)}

/* ---------- PORTFOLIO: plane wall ---------- */
.pw{position:relative}
.pw__pin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:calc(var(--nav-h) + 3vh) clamp(1.6rem,5vh,3rem);overflow:hidden}
.pw__read{display:grid;gap:.5rem}
.pw__t{font-family:var(--f-d);font-weight:500;text-transform:uppercase;letter-spacing:-.05em;line-height:.88;
  font-size:clamp(2rem,6.4vw,5.4rem);overflow:hidden}
.pw__t span{display:block}
.pw__meta{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline}
.pw__bar{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
  margin-top:clamp(1.2rem,3vh,2rem);padding-top:1.1rem;border-top:1px solid var(--line)}
.pw__list{margin-top:clamp(1.6rem,4vh,2.6rem);border-top:1px solid var(--line)}
.pw__list a{display:grid;grid-template-columns:2.6rem 1fr auto;gap:1rem;align-items:baseline;
  padding-block:.8rem;border-bottom:1px solid var(--line);transition:opacity .4s var(--e),padding-left .5s var(--e)}
.pw__list a:hover{opacity:.6;padding-left:.5rem}
.pw__list em{font-style:normal;font-family:var(--f-d);font-weight:500;font-size:1rem;text-transform:uppercase}

/* ---------- CONTACT: grass + modal ---------- */
.gr{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding-block:calc(var(--nav-h) + 6vh) 0}
.gr__in{position:relative;z-index:2;max-width:44ch;padding-inline:var(--pad)}
.gr h1{margin-bottom:1.1rem}
.gr .lede{margin:0 auto 2rem}
.gr__space{height:38vh}
.btn{position:relative;display:inline-flex;align-items:center;gap:.9rem;overflow:hidden;
  padding:1.05rem 2.1rem;border:1px solid var(--line-2);
  font-family:var(--f-m);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%)}
.btn i{position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .6s var(--e);z-index:0}
.btn span,.btn svg{position:relative;z-index:1;transition:color .45s var(--e),transform .6s var(--e)}
.btn svg{width:16px;height:16px}
.btn:hover i{transform:none}
.btn:hover span,.btn:hover svg{color:var(--void)}
.btn:hover svg{transform:translateX(4px)}

.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:var(--pad);
  visibility:hidden;pointer-events:none}
.modal.on{visibility:visible;pointer-events:auto}
.modal__veil{position:absolute;inset:0;background:rgba(0,6,15,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);opacity:0}
.modal__card{position:relative;width:min(100%,560px);max-height:86vh;overflow-y:auto;background:var(--panel);
  border:1px solid var(--line);padding:clamp(1.5rem,4vw,2.6rem);opacity:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.modal__x{position:absolute;top:1rem;right:1rem;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-2);transition:color .4s,border-color .4s}
.modal__x:hover{color:var(--ink);border-color:var(--line-2)}
.f-row{display:grid;gap:.4rem;margin-bottom:1rem}
.f-row label{font-family:var(--f-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.f-row input,.f-row textarea,.f-row select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--ink);padding:.8rem .9rem;font-family:var(--f-b);font-size:.95rem;transition:border-color .4s var(--e)}
.f-row input:focus,.f-row textarea:focus,.f-row select:focus{outline:none;border-color:var(--accent)}
/* The list a <select> drops open is drawn by the browser, not by this page, and
   without a declared colour scheme it is drawn light — white panel, pale text,
   unreadable. color-scheme is what tells the browser to draw its own controls
   dark; the option colours underneath are for the browsers that let a page
   style the list directly. Both are needed: neither works everywhere. */
.f-row select,.f-row input,.f-row textarea{color-scheme:dark}
.f-row select option,.f-row select optgroup{background-color:#061421;color:var(--ink)}
.f-row select option:checked{background-color:rgba(74,204,173,.22);color:var(--ink)}
.f-row textarea{min-height:110px;resize:vertical}
.f-two{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:520px){.f-two{grid-template-columns:1fr 1fr}}
.f-send{width:100%;justify-content:center;margin-top:.4rem}
/* while a form is sending, its button is disabled — so it should stop behaving
   like something you can press: no fill, no border change, no link cursor */
.cta:disabled,.btn:disabled,.gate__btn:disabled{opacity:.55;cursor:default}
.cta:disabled:hover i,.btn:disabled:hover i,.gate__btn:disabled:hover i{transform:translateY(101%)}
.cta:disabled:hover,.btn:disabled:hover,.gate__btn:disabled:hover{border-color:var(--line-2)}
.cta:disabled:hover span,.btn:disabled:hover span,.gate__btn:disabled:hover span{color:var(--ink)}
.f-note{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line);display:flex;
  gap:1rem;flex-wrap:wrap;justify-content:space-between;align-items:center}
.f-social{display:flex;gap:1rem}
.f-social a{font-family:var(--f-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.f-social a:hover{color:var(--accent)}
.f-ok{display:none;text-align:center;padding:2rem 0}
.f-ok.on{display:block}

/* ==========================================================================
   FIXES from the review round
   ========================================================================== */

/* Services: the liquid field was drowning the text. Scrim it, heavier at the
   edges where the copy sits, clear through the middle where the mark turns. */
#fl::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,6,15,.90) 0%,rgba(0,6,15,.40) 26%,rgba(0,6,15,0) 46%,
                          rgba(0,6,15,.40) 74%,rgba(0,6,15,.90) 100%),
    linear-gradient(to bottom,rgba(0,6,15,.72) 0%,rgba(0,6,15,0) 26%,rgba(0,6,15,0) 66%,rgba(0,6,15,.86) 100%)}
.fl__pin{position:relative;z-index:2}
.fl__svc{opacity:0;transition:opacity .5s var(--e)}
.fl__svc.on{opacity:1}

/* The twelve slides are stacked on top of each other at inset:0, so they
   carry pointer-events:none — otherwise the last one in the DOM would swallow
   every click even while invisible. That also made "View service" unclickable,
   which is the one thing on the slide you are meant to be able to press.
   Give it back to the link on the visible slide only: everything else still
   lets the pointer through, so dragging the flow around still works. */
.fl__svc.on a{pointer-events:auto}
.fl__l,.fl__r{background:rgba(0,6,15,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:1rem 1.1rem;border-left:1px solid var(--line)}
.fl__r{border-left:0;border-right:1px solid var(--line);text-align:right}
@media(max-width:899px){
  .fl__svc{grid-template-columns:1fr;align-content:center;gap:.8rem}
  .fl__r{border-right:0;border-left:1px solid var(--line);text-align:left}
}

/* "Which one do you need?" — it was flush against the footer */
.sec-pad--roomy{padding-block:clamp(7rem,16vh,13rem)}

/* About + all sub-pages: the pinned stages had no side padding on the text */
.jr__stage,.fl__stage{padding-inline:var(--pad)}
.jr__item{padding-inline:var(--pad)}
@media(min-width:900px){.jr__item{max-width:min(44rem,52vw)}}

/* Contact: grass ran out above the fold and left dead black underneath */
.gr{padding-bottom:0;justify-content:flex-start;padding-top:calc(var(--nav-h) + 12vh)}
.gr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,6,15,0),rgba(0,6,15,.55) 62%,var(--void) 100%)}
.gr__in{z-index:3}
.gr__in::before{content:"";position:absolute;left:50%;top:-8%;transform:translateX(-50%);
  width:min(120%,46rem);height:135%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 42%,rgba(0,6,15,.88),rgba(0,6,15,.55) 58%,transparent 78%)}
.gr__space{height:26vh}
.gr__next{position:relative;z-index:3;display:flex;justify-content:center;padding-bottom:clamp(2rem,6vh,3.5rem)}

/* Portfolio: cards were colliding with the mark behind them */
.pw__pin{position:relative;z-index:2}
.pw__pin::before{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--void) 6%,rgba(0,6,15,.80) 42%,transparent)}

/* service detail pages */
.cap__list .cap-row:last-child{border-bottom:1px solid var(--line)}

/* ==========================================================================
   RESPONSIVE — phones, tablets, iOS
   ========================================================================== */

/* iOS: 100vh includes the URL bar, so full-height sections jumped on scroll.
   svh is the stable unit; dvh is used where the section should follow the bar. */
@supports (height: 100svh) {
  .screen,.page-head,.jr__pin,.fl__pin,.pw__pin,.gr,.work__pin,.focus__pin{min-height:100svh}
}

/* stop rubber-band overscroll dragging the fixed canvas around on iOS */
html{overscroll-behavior-y:none}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}

@media(max-width:899px){
  :root{--nav-h:64px;--pad:1.1rem}
  .d-1{font-size:clamp(2.2rem,11.5vw,4.4rem)}
  .d-2{font-size:clamp(1.9rem,9vw,3.4rem)}
  .d-3{font-size:clamp(1.6rem,7.5vw,2.6rem)}
  .page-head{min-height:72svh;padding-block:calc(var(--nav-h) + 7vh) 2rem}
  .page-lede{flex-direction:column;align-items:flex-start;gap:.9rem}
  .slate{flex-wrap:wrap;gap:.5rem}
  .jr__t{font-size:clamp(1.6rem,7.4vw,2.6rem)}
  .jr__d{font-size:.92rem}
  .fl__t{font-size:clamp(1.5rem,6.6vw,2.4rem)}
  .pw__t{font-size:clamp(1.8rem,8.4vw,3rem)}
  .pw__list a{grid-template-columns:2rem 1fr auto;font-size:.9rem}
  .vals{grid-template-columns:1fr}
  .val{border-right:0}
  .cl__c:nth-child(2n){border-right:0}
  .stat b{font-size:clamp(1.8rem,8vw,2.4rem)}
  .contact__grid,.foot__top,.foot__bot{gap:1.2rem}
  .modal__card{max-height:88svh}
  .gr__space{height:18svh}
  .gr{padding-top:calc(var(--nav-h) + 8vh)}
  .ticker__row span{gap:1.4rem;padding-right:1.4rem}
}

/* tablets and iPad: keep two columns but ease the type down */
@media(min-width:900px) and (max-width:1180px){
  .d-1{font-size:clamp(3rem,8.6vw,6.4rem)}
  .fl__svc .fl__l,.fl__svc .fl__r{max-width:22ch}
  .jr__item{max-width:58vw}
}

/* very short landscape phones: full-height sections become unusable */
@media(max-height:520px) and (orientation:landscape){
  .screen,.page-head,.jr__pin,.fl__pin,.pw__pin,.gr{min-height:auto;padding-block:calc(var(--nav-h) + 2rem) 2rem}
  .d-1{font-size:clamp(1.8rem,6.5vw,3rem)}
  .gr__space{height:8vh}
}

/* no hover (touch): remove hover-only affordances so nothing sticks */
@media(hover:none){
  .cap-row:hover .cap-row__t{transform:none}
  .cap-row__a{display:none}
  .pw__list a:hover{opacity:1;padding-left:0}
}

/* honour the notch */
@supports(padding:max(0px)){
  .nav,.foot .wrap,.wrap{padding-left:max(var(--pad),env(safe-area-inset-left));
                         padding-right:max(var(--pad),env(safe-area-inset-right))}
}

/* the flat mark shows instantly on every page load; the WebGL mark fades in
   over it, then this one is dismissed */
.loader__mark{display:block;width:min(26vw,150px);margin:auto;opacity:.9;
  animation:markspin 7s linear infinite}
@keyframes markspin{to{transform:rotate(360deg)}}
body.no-webgl .loader__mark{animation:sp 10s linear infinite}
@keyframes markpulse{0%,100%{opacity:.42;transform:scale(.985)}50%{opacity:.95;transform:scale(1.015)}}
.loader__ui{align-items:stretch}

/* Client logos.

   Real logos come on white and in their own colours — Google's four, Godrej's
   gradient, a few that are pale gold on white and would simply vanish if the
   white were knocked out, and a few that carry their own coloured panel. So
   each one sits on a light tile instead: the white reads as intentional, every
   brand keeps its real colours, and one treatment works for all of them.

   At rest the tile is held back a little so the row stays quiet against a near
   black page; pointing at one brings it fully forward. */
/* A cell holding a real logo becomes a light tile. The cell's own border and
   hover wash are dropped, because the tile is now the thing you see. A cell
   still showing a name keeps the original bordered look untouched. */
/* The logo image IS the tile. Giving the cell its own white plate and then
   putting a white-backed logo inside it does two bad things at once: the two
   whites never match exactly, so a grey frame shows around the logo, and the
   cell's padding stacks on top of the padding already inside the image, so
   the logo ends up small in a large empty card. One surface solves both. */
.cl__c--logo{background:none;border:0;padding:0;margin:.5rem;min-height:0;
  transition:transform .45s var(--e),filter .45s var(--e)}
/* A fixed shape, not the image's own. The logos that shipped were normalised
   to one canvas, but anything uploaded later is whatever shape it happens to
   be — a square one made a square tile and broke the row. Containing it inside
   a set aspect, on white, means any upload lands looking like the rest. */
.cl__c--logo img{width:100%;height:auto;aspect-ratio:440/176;object-fit:contain;
  background:#fff;display:block;border-radius:12px;
  opacity:.93;transition:opacity .45s var(--e),box-shadow .45s var(--e)}
.cl__c--logo:hover{transform:translateY(-3px)}
.cl__c--logo:hover img{opacity:1;box-shadow:0 14px 34px -14px rgba(0,0,0,.85)}
a.cl__c{text-decoration:none}

/* ==========================================================================
   BRAND LOCKUP + MASCOT
   ========================================================================== */
.nav__logo{gap:0}
.brandmark{width:auto;height:clamp(18px,1.7vw,24px);max-width:min(46vw,210px);
  display:block;object-fit:contain;
  transition:filter .45s var(--e),opacity .45s var(--e)}
.nav__logo:hover .brandmark{filter:brightness(1.15) saturate(1.2)}
.foot__logo .brandmark{height:clamp(22px,2.2vw,30px);max-width:min(60vw,260px)}
@media(max-width:899px){.brandmark{height:17px;max-width:150px}}

/* the mascot: a quiet watermark, never a decal */
.mascot{position:absolute;pointer-events:none;user-select:none;z-index:0;
  opacity:.055;filter:grayscale(1) brightness(2);mix-blend-mode:screen}
.mascot--vals{right:-4%;bottom:-8%;width:min(42vw,440px)}
.mascot--menu{right:-8%;bottom:-6%;width:min(58vw,380px);opacity:.07}
.mascot--ok{position:relative;display:block;margin:0 auto 1.2rem;width:120px;opacity:.5;
  filter:none;mix-blend-mode:normal}
@media(max-width:899px){.mascot--vals{width:64vw;opacity:.04}}

/* ==========================================================================
   HOVER — brand teal everywhere, white at rest
   ========================================================================== */
a:hover,button:hover{color:var(--accent)}
.nav__links a:hover,.foot__nav a:hover,.menu__list a:hover,
.contact__grid a:hover,.f-social a:hover,.pw__list a:hover em,
.cl__c:hover b,.cap-row:hover .cap-row__t,.work__index a:hover em{color:var(--accent)}
.nav__links a::after{background:var(--accent)}
.cap-row:hover .cap-row__n,.cap-row:hover .cap-row__a{color:var(--accent)}
.cta:hover i,.btn:hover i,.gate__btn:hover i{background:var(--accent)}
.cta:hover span,.cta:hover svg,.btn:hover span,.btn:hover svg,
.gate__btn:hover span{color:var(--void)}
.cta,.btn,.gate__btn{color:var(--ink)}
.cta:hover,.btn:hover,.gate__btn:hover{border-color:var(--accent)}
.modes button.on{color:var(--accent);border-color:var(--accent)}
.modes button:hover{color:var(--accent)}
.f-row input:focus,.f-row textarea:focus,.f-row select:focus{border-color:var(--accent)}

/* ==========================================================================
   PDF VIEWER — decks open in place rather than navigating away
   ========================================================================== */
.pdf{position:fixed;inset:0;z-index:140;display:flex;flex-direction:column;
  visibility:hidden;pointer-events:none}
.pdf.on{visibility:visible;pointer-events:auto}
.pdf__veil{position:absolute;inset:0;background:rgba(0,6,15,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0}
.pdf__panel{position:relative;z-index:2;display:flex;flex-direction:column;flex:1 1 auto;
  margin:clamp(.6rem,2.4vw,2rem);opacity:0;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.pdf__bar{display:flex;align-items:center;gap:1rem;justify-content:space-between;flex-wrap:wrap;
  padding:.85rem clamp(.9rem,2vw,1.4rem);border-bottom:1px solid var(--line)}
.pdf__t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pdf__t b{font-family:var(--f-d);font-weight:400;font-size:clamp(1rem,2vw,1.3rem);
  text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf__acts{display:flex;gap:.5rem;align-items:center;flex-shrink:0}
.pdf__acts a,.pdf__acts button{border:1px solid var(--line);padding:.5rem .85rem;
  font-family:var(--f-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);background:none;cursor:pointer;transition:color .4s var(--e),border-color .4s var(--e)}
.pdf__acts a:hover,.pdf__acts button:hover{color:var(--accent);border-color:var(--accent)}
.pdf__frame{flex:1 1 auto;width:100%;border:0;background:#0b1520;min-height:0}
.pdf__fallback{display:none;padding:2.5rem 1.5rem;text-align:center}
.pdf.nopdf .pdf__frame{display:none}
.pdf.nopdf .pdf__fallback{display:block}
@media(max-width:899px){
  .pdf__panel{margin:0;clip-path:none;border:0}
  .pdf__t b{font-size:1rem}
}

/* the loading veil must be the brand dark, not browser black */
html,body{background-color:var(--void)}
.loader,.loader__veil{background:var(--void)}
.menu{position:fixed;overflow:hidden}

/* #00060F next to #000000 is indistinguishable, so the loading screen reads as
   plain black. A faint brand wash makes the colour deliberate. */
.loader__veil{background:
  radial-gradient(62% 48% at 50% 44%, rgba(74,204,173,.085), rgba(0,6,15,0) 68%),
  radial-gradient(120% 90% at 50% 120%, rgba(74,204,173,.05), rgba(0,6,15,0) 60%),
  var(--void)}
.backdrop{background:
  radial-gradient(60% 50% at 62% 28%, rgba(74,204,173,.11), transparent 70%),
  radial-gradient(70% 60% at 22% 78%, rgba(74,204,173,.06), transparent 70%),
  var(--void)}

/* project summary under the portfolio readout — editable in the admin */
.pw__sum{margin-top:.7rem;max-width:46ch;color:var(--ink-2);font-size:.95rem}
@media(max-width:899px){.pw__sum{font-size:.88rem;max-width:100%}}

/* ==========================================================================
   SERVICE PAGES
   One stylesheet for the reusable service template. Every block is driven
   from content.json, so these rules have to hold whatever the admin types:
   any number of cards, any answer length, any missing section.
   ========================================================================== */

/* ---- 01 hero ------------------------------------------------------------ */
.sv-hero{display:grid;gap:clamp(2rem,5vw,4rem);align-items:end}
.sv-hero__c{min-width:0}
.sv-hero__sub{display:block;margin:.9rem 0 1.4rem;color:var(--ink-3);
  letter-spacing:.16em;line-height:1.7;max-width:46ch;text-transform:none;font-size:.7rem}
.sv-hero .lede{margin-bottom:clamp(1.6rem,3.4vh,2.4rem)}
.sv-hero__v{position:relative;min-width:0;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(150deg,rgba(74,204,173,.07),transparent 62%)}
/* ---- service page breaker bands ----------------------------------------
   Full-bleed, so they cut the column of text rather than sitting inside it.
   Three variants so two bands on one page never look like a repeat. */
.sv-break{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(230px,34vh,420px);margin:clamp(3rem,7vh,6rem) 0;
  background:var(--panel,#061826)}
.sv-break__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1.6s var(--e)}
.sv-break:hover .sv-break__media{transform:scale(1)}
/* dark enough for a caption, light enough to keep the picture */
.sv-break__v{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,6,15,.06),rgba(0,6,15,.60))}
.sv-break__c{position:relative;z-index:2;padding-block:clamp(1.4rem,4vh,2.6rem)}
.sv-break__q{font-family:var(--f-d);font-weight:400;color:var(--ink);
  font-size:clamp(1.3rem,3.1vw,2.3rem);line-height:1.22;letter-spacing:-.015em;
  max-width:22ch;margin:.5rem 0 0}
.sv-break__q--name{text-transform:uppercase;letter-spacing:.04em;opacity:.92}

/* No image yet: the band is the colour. Three washes, picked by position, all
   built from the accent already in the palette. */
.sv-break--plain{background:
  radial-gradient(120% 140% at 12% 110%, rgba(74,204,173,.20), rgba(0,6,15,0) 62%),
  linear-gradient(135deg, #07202c 0%, #04121d 55%, #020a12 100%)}
.sv-break--plain.sv-break--1{background:
  radial-gradient(120% 140% at 88% 110%, rgba(74,204,173,.16), rgba(0,6,15,0) 60%),
  linear-gradient(225deg, #0a1f2a 0%, #050f18 58%, #02080f 100%)}
.sv-break--plain.sv-break--2{background:
  radial-gradient(140% 120% at 50% -20%, rgba(74,204,173,.14), rgba(0,6,15,0) 64%),
  linear-gradient(160deg, #061a24 0%, #030d16 60%, #01060c 100%)}
@media(max-width:699px){
  .sv-break{min-height:200px;margin:clamp(2.2rem,5vh,3.4rem) 0}
  .sv-break__q{max-width:18ch}
}

.sv-hero__media{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  filter:saturate(.86) contrast(1.04)}
@media(min-width:1040px){
  .sv-hero--media{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr)}
  .sv-hero--media .sv-hero__v{aspect-ratio:auto;max-height:64vh}
}

/* ---- shared two-column section head ------------------------------------- */
.sv-head{display:grid;gap:clamp(1.2rem,3vw,3rem);align-items:start;
  margin-bottom:clamp(2.4rem,6vh,4rem)}
.sv-head__b{min-width:0}
.sv-head__b .lede+.lede{margin-top:1rem}
.sv-h{margin-bottom:clamp(2.4rem,6vh,4rem)}
@media(min-width:1040px){.sv-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}

/* ---- 02 quick answer ---------------------------------------------------- */
.sv-quick{display:grid;gap:clamp(1.4rem,3vw,3rem);align-items:start}
.sv-quick__b{min-width:0}
.sv-quick__b .lede{max-width:62ch;font-size:clamp(1.02rem,1.25vw,1.28rem);color:var(--ink-2)}
.sv-quick__b .lede+.lede{margin-top:1.1rem}
@media(min-width:1040px){.sv-quick{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}

/* ---- 03 what we offer --------------------------------------------------- */
.sv-cards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.sv-card{position:relative;background:var(--void);padding:clamp(1.5rem,2.6vw,2.4rem);
  min-width:0;transition:background .55s var(--e)}
.sv-card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--e)}
.sv-card:hover{background:var(--panel)}
.sv-card:hover::after{transform:scaleX(1)}
.sv-card__i{display:block;width:34px;height:34px;margin-bottom:1rem}
.sv-card__img{width:100%;height:100%;object-fit:contain}
.sv-card__n{display:block;margin-bottom:.85rem}
.sv-card__t{font-family:var(--f-d);font-weight:500;font-size:clamp(1.02rem,1.35vw,1.28rem);
  letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin-bottom:.6rem}
.sv-card__d{font-size:.92rem;line-height:1.66;color:var(--ink-3);font-weight:300}
@media(min-width:680px){.sv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.sv-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- 04 who it is for --------------------------------------------------- */
.sv-who{list-style:none;display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--line)}
.sv-who__i{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1.2rem;align-items:baseline;
  padding:clamp(1.1rem,2.4vw,1.7rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left .55s var(--e)}
.sv-who__i:hover{padding-left:.7rem}
.sv-who__i p{font-size:clamp(.98rem,1.2vw,1.16rem);line-height:1.55;color:var(--ink-2);
  font-weight:300;min-width:0}
.sv-who__i:hover p{color:var(--ink)}
@media(min-width:900px){
  .sv-who{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,5vw,5rem)}
}

/* ---- 05 process --------------------------------------------------------- */
.sv-steps{list-style:none;position:relative;display:grid;gap:0}
.sv-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);padding:clamp(1.6rem,3.4vw,2.6rem) 0;
  border-bottom:1px solid var(--line)}
.sv-step:first-child{border-top:1px solid var(--line)}
.sv-step__n{font-family:var(--f-d);font-size:clamp(1.6rem,4.2vw,3.4rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--ink-3);
  transition:-webkit-text-stroke-color .6s var(--e),color .6s var(--e)}
.sv-step:hover .sv-step__n{-webkit-text-stroke-color:var(--accent)}
.sv-step__b{min-width:0;padding-top:.2rem}
.sv-step__t{font-family:var(--f-d);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.6rem);letter-spacing:-.02em;line-height:1.14;
  color:var(--ink);margin-bottom:.7rem}
.sv-step__d{font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.68;color:var(--ink-3);
  font-weight:300;max-width:62ch}
@media(min-width:900px){.sv-step{grid-template-columns:8rem minmax(0,1fr)}}

/* ---- 06 + 09 CTA bands -------------------------------------------------- */
.sv-band{padding-block:clamp(4.5rem,11vh,8rem);
  background:
    radial-gradient(110% 80% at 50% 0%,rgba(74,204,173,.10),transparent 62%),
    var(--void)}
.sv-band--big{padding-block:clamp(6rem,16vh,12rem)}
.sv-band__w{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
.sv-band__w .lede{max-width:56ch;margin:0}
.sv-band__w .lede+.lede{margin-top:-.4rem}
.sv-band__w .d{margin-bottom:.3rem}

/* ---- 07 outcomes -------------------------------------------------------- */
.sv-out{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.sv-out__i{background:var(--void);padding:clamp(1.4rem,2.4vw,2.1rem);min-width:0;
  transition:background .55s var(--e)}
.sv-out__i:hover{background:var(--panel)}
.sv-out__i h3{font-family:var(--f-d);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.42rem);
  letter-spacing:-.015em;color:var(--ink);margin:.8rem 0 .6rem;line-height:1.16}
.sv-out__i .tiny{letter-spacing:.04em;font-size:.82rem;line-height:1.62;
  color:var(--ink-3);text-transform:none}
.sv-note{margin-top:clamp(1.4rem,3vh,2.2rem);letter-spacing:.04em;font-size:.82rem;
  text-transform:none;color:var(--ink-3);max-width:60ch}
@media(min-width:640px){.sv-out{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.sv-out{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- 08 approach (split) ------------------------------------------------ */
.sv-split{display:grid;gap:clamp(1.8rem,4.5vw,4.5rem);align-items:center}
.sv-split__b{min-width:0}
.sv-split__b .lede{max-width:56ch}
.sv-split__b .lede+.lede{margin-top:1.1rem}
.sv-split__b .d{margin-bottom:clamp(1.4rem,3vh,2.2rem)}
.sv-split__v{position:relative;min-width:0;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(200deg,rgba(74,204,173,.08),transparent 60%)}
.sv-split__img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  filter:saturate(.86) contrast(1.04);transition:transform 1.1s var(--e)}
.sv-split__v:hover .sv-split__img{transform:scale(1.035)}
@media(min-width:1040px){
  .sv-split{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .sv-split--solo{grid-template-columns:minmax(0,1fr)}
}

/* ---- 10 FAQ ------------------------------------------------------------- */
/* no divider line between service page sections — asked for, and the
   bands already do the separating */
.sv-faq{border-top:0}
.sv-faq__i{border-bottom:1px solid var(--line)}
.sv-faq__q{display:grid;grid-template-columns:3.2rem minmax(0,1fr) 1.6rem;gap:1rem;
  align-items:center;width:100%;padding:clamp(1.15rem,2.4vw,1.7rem) 0;
  background:none;border:0;text-align:left;color:inherit;cursor:pointer;font:inherit}
.sv-faq__qt{font-family:var(--f-d);font-weight:500;font-size:clamp(1rem,1.45vw,1.35rem);
  letter-spacing:-.015em;line-height:1.3;color:var(--ink-2);min-width:0;
  transition:color .5s var(--e)}
.sv-faq__q:hover .sv-faq__qt,.sv-faq__i.open .sv-faq__qt{color:var(--ink)}
.sv-faq__x{position:relative;width:14px;height:14px;justify-self:end}
.sv-faq__x::before,.sv-faq__x::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:1px;background:var(--ink-3);transition:transform .5s var(--e),background .5s var(--e)}
.sv-faq__x::after{transform:rotate(90deg)}
.sv-faq__i.open .sv-faq__x::before,.sv-faq__i.open .sv-faq__x::after{background:var(--accent)}
.sv-faq__i.open .sv-faq__x::after{transform:rotate(0)}
.sv-faq__a{height:0;overflow:hidden;transition:height .6s var(--e)}
.sv-faq__ai{padding:0 1.6rem clamp(1.3rem,2.6vw,1.9rem) 3.2rem}
.sv-faq__ai p{font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.72;color:var(--ink-3);
  font-weight:300;max-width:66ch}
@media(max-width:599px){
  .sv-faq__q{grid-template-columns:2.2rem minmax(0,1fr) 1.2rem;gap:.7rem}
  .sv-faq__ai{padding-left:2.9rem;padding-right:0}
}

/* ---- 11 previous / all / next ------------------------------------------- */
.sv-nav{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.sv-nav__s,.sv-nav__all{display:flex;flex-direction:column;gap:.6rem;background:var(--void);
  padding:clamp(1.4rem,2.8vw,2.2rem);min-width:0;transition:background .55s var(--e)}
.sv-nav__s:hover,.sv-nav__all:hover{background:var(--panel)}
.sv-nav__s b{font-family:var(--f-d);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.02rem,1.6vw,1.5rem);letter-spacing:-.025em;line-height:1.12;color:var(--ink-2);
  transition:color .5s var(--e),transform .6s var(--e)}
.sv-nav__s:hover b{color:var(--ink)}
.sv-nav__s--prev:hover b{transform:translateX(-6px)}
.sv-nav__s--next:hover b{transform:translateX(6px)}
.sv-nav__s--next{text-align:right;align-items:flex-end}
.sv-nav__all{align-items:center;justify-content:center;text-align:center}
.sv-nav__all svg{width:22px;height:22px;color:var(--ink-3);transition:color .5s var(--e)}
.sv-nav__all:hover svg{color:var(--accent)}
@media(min-width:760px){.sv-nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .sv-nav__all{padding-inline:clamp(2rem,4vw,3.5rem)}}

/* ---- services index grid ------------------------------------------------ */
.sv-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.sv-tile{position:relative;display:flex;flex-direction:column;background:var(--void);
  padding:clamp(1.5rem,2.6vw,2.3rem);min-width:0;overflow:hidden;
  transition:background .55s var(--e)}
.sv-tile::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--e)}
.sv-tile:hover{background:var(--panel)}
.sv-tile:hover::after{transform:scaleX(1)}
.sv-tile__v{position:relative;margin:-.2rem 0 1.2rem;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(150deg,rgba(74,204,173,.08),transparent 62%)}
.sv-tile__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:saturate(.84) contrast(1.04);transition:transform 1.1s var(--e)}
.sv-tile:hover .sv-tile__img{transform:scale(1.04)}
.sv-tile__n{display:block;margin-bottom:.8rem}
.sv-tile__t{font-family:var(--f-d);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.08rem,1.7vw,1.62rem);letter-spacing:-.03em;line-height:1.1;
  color:var(--ink);margin-bottom:.7rem}
.sv-tile__d{font-size:.9rem;line-height:1.62;color:var(--ink-3);font-weight:300;
  margin-bottom:1.4rem}
.sv-tile__a{margin-top:auto;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-m);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);transition:color .5s var(--e)}
.sv-tile__a svg{width:15px;height:15px;transition:transform .6s var(--e)}
.sv-tile:hover .sv-tile__a{color:var(--accent)}
.sv-tile:hover .sv-tile__a svg{transform:translateX(5px)}
@media(min-width:680px){.sv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.sv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* the whole template is driven by content, so nothing may push the page
   sideways whatever length the admin types */
.sv-hero,.sv-head,.sv-quick,.sv-split,.sv-cards,.sv-out,.sv-nav,.sv-grid,.sv-steps,.sv-who{
  max-width:100%}
.sv-card__t,.sv-tile__t,.sv-step__t,.sv-faq__qt,.sv-nav__s b{overflow-wrap:anywhere}

/* ---- About page numbers -------------------------------------------------
   One centred row below the call to action, a size up from the stacked list
   the homepage still uses. Scoped to .stats--row so the homepage layout is
   untouched.                                                              */
.stats--row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,4vw,2.5rem) clamp(1rem,3vw,2rem);
  margin-top:clamp(3rem,7vh,4.5rem);padding-top:clamp(2.2rem,5vh,3.2rem);
  border-top:1px solid var(--line)}
.stats--row .stat{display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;text-align:center;gap:.55rem;
  padding:0;border:0;min-width:0}
.stats--row .stat:first-child{border-top:0}
.stats--row .stat b{font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1;
  letter-spacing:-.03em;color:var(--ink)}
.stats--row .stat span{text-align:center;max-width:22ch;font-size:.68rem;
  letter-spacing:.16em;color:var(--ink-3)}
@media(min-width:760px){
  .stats--row{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* hairlines between the four, not around them */
  .stats--row .stat+.stat{border-left:1px solid var(--line)}
}

/* ---- footer contact + social row ---------------------------------------
   Phone and social links used to exist on the home page only; these style
   the row now shared by every other page.                                */
.foot__meta{display:flex;align-items:center;justify-content:space-between;
  gap:1rem 1.6rem;flex-wrap:wrap;padding:1.1rem 0;
  border-top:1px solid var(--line)}
.foot__meta .tiny{text-transform:none;letter-spacing:.1em}
.foot__meta .tiny a{color:var(--ink-2);transition:color .4s var(--e)}
.foot__meta .tiny a:hover{color:var(--accent)}
/* ---- privacy policy -----------------------------------------------------
   A legal page is read, not scanned, so it is set as two columns: the heading
   holds its own line on the left and the prose keeps a comfortable measure on
   the right. One column on a narrow screen. */
.pp{padding-block:clamp(1rem,4vh,2.4rem) clamp(2.4rem,8vh,5rem)}
.pp__sec{border-top:1px solid var(--line);padding-block:clamp(1.5rem,3.6vh,2.4rem);
  display:grid;gap:.75rem 2.4rem}
@media(min-width:860px){.pp__sec{grid-template-columns:minmax(0,24ch) minmax(0,1fr)}}
.pp__h{margin:0;font-family:var(--f-d);font-weight:400;letter-spacing:-.012em;line-height:1.22;
  font-size:clamp(1.14rem,2.1vw,1.58rem);color:var(--ink)}
.pp__b{max-width:62ch}
.pp__b p,.pp__b ul{margin:0 0 .85rem;color:var(--ink-2);font-size:.97rem;line-height:1.72}
.pp__b p:last-child,.pp__b ul:last-child{margin-bottom:0}
.pp__b ul{padding-left:1.05rem}
.pp__b li{margin-bottom:.4rem}
.pp__b li::marker{color:var(--ink-3)}
.pp__b b{color:var(--ink);font-weight:500}
.pp__b a{color:var(--ink);border-bottom:1px solid var(--line-2);
  transition:color .4s var(--e),border-color .4s var(--e)}
.pp__b a:hover{color:var(--accent);border-color:var(--accent)}
.pp__sec--end{border-bottom:1px solid var(--line)}

/* The footer's contact row shares its width between however many cells it
   actually has. A fixed four columns left a quarter of the row empty once
   social moved out, and auto-fit columns bunched three cells to the left and
   left the rest blank — a flex row cannot do either. */
@media(min-width:800px){
  .foot__grid{display:flex;gap:2rem}
  .foot__grid>div{flex:1 1 0;min-width:0}
}
.foot__grid{margin-top:clamp(1.1rem,2.8vh,1.8rem)}

/* Social marks: round buttons holding an inline SVG glyph in currentColor, so
   they follow the footer's colours and the hover state. An uploaded icon image
   replaces the glyph where one is given. */
.foot__soc{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:center;
  margin-top:0}
.soc{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;
  color:var(--ink-3);text-decoration:none;
  transition:color .4s var(--e),border-color .4s var(--e),background-color .4s var(--e),transform .4s var(--e)}
.soc span{font-family:var(--f-m);font-weight:400;font-size:.58rem;letter-spacing:.055em;line-height:1}
.soc img{width:15px;height:15px;object-fit:contain;display:block}
.soc svg{width:16px;height:16px;display:block;fill:currentColor;flex:0 0 auto}
.soc:hover{color:var(--void);background:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.soc:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
@media(max-width:599px){
  .foot__meta{flex-direction:column;align-items:flex-start;gap:.9rem}
  .foot__soc{gap:.4rem 1rem}
}

/* ---- loading screen stacking -------------------------------------------
   The canvas is lifted to 205 during loading so the 3D mark shows over the
   veil. But .loader is position:fixed, which always makes a stacking
   context, so its z-index of 200 capped everything inside it — including
   the percentage at 220. The canvas therefore painted over the counter and
   the number was invisible on every page until the veil faded at the end.

   Lift the loader above the canvas instead, and let the dark and the brand
   wash come from the page background so the mark still shows through.     */
body.is-loading{background:
  radial-gradient(62% 48% at 50% 44%, rgba(74,204,173,.085), rgba(0,6,15,0) 68%),
  radial-gradient(120% 90% at 50% 120%, rgba(74,204,173,.05), rgba(0,6,15,0) 60%),
  var(--void)}
body.is-loading .loader{z-index:210;background:transparent}
body.is-loading .loader__veil{background:transparent}


/* ---- services flow: the right-hand description --------------------------
   The description sat at the standard .lede size, which read small against
   the service title opposite it. Sized up here rather than globally so the
   rest of the site's body copy is unaffected, with the column widened to
   match so it does not gain lines.                                       */
.fl__r .lede{font-size:clamp(1.04rem,1.32vw,1.3rem);line-height:1.62;color:var(--ink-2)}
.fl__r .m{font-size:.78rem;letter-spacing:.18em}
@media(min-width:900px){
  .fl__svc .fl__r{max-width:32ch}
  .fl__svc .fl__l{max-width:28ch}
}
@media(max-width:899px){
  .fl__r .lede{font-size:clamp(1rem,3.4vw,1.16rem)}
}

/* ---- social rows must wrap ---------------------------------------------
   These were laid out as single-line flex rows when there were three
   networks. There are five now, which overflowed the page on phones.     */
.f-social{flex-wrap:wrap;gap:.5rem 1rem;max-width:100%}
.f-social a{white-space:nowrap}
@media(max-width:420px){
  .f-social{gap:.45rem .85rem}
  .f-social a{font-size:.62rem;letter-spacing:.12em}
}

/* Honeypot. Previously parked at left:-9999px, which widened the scrollable
   area on narrow screens; clipping keeps it out of sight and out of layout. */
.f-hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The decorative mascots hang off the right edge by a few percent. At phone
   widths that pushed the page sideways, so they sit flush there instead. */
@media(max-width:899px){
  .mascot--vals{right:0;width:56vw}
  .mascot--menu{right:0;width:52vw}
}

/* The glow behind the contact headline is 120% of its container and centred,
   so it hung ~10% off each side. Wider than the container is the point, but
   it must never be wider than the screen or it scrolls the page sideways. */
.gr__in::before{width:min(120%,46rem,100vw)}

/* "Ideation, Conceptualization, and Presentation Design" is the longest
   service name and just clipped the narrowest phones. */
.sv-hero__c .d,.sv-quick .d,.sv-head .d,.sv-h,.sv-band__w .d{overflow-wrap:anywhere}
@media(max-width:360px){.sv-hero__c .d-1{font-size:clamp(2.1rem,8.4vw,10.4rem)}}

/* ==========================================================================
   FEWER LINES
   The layout leaned on hairlines for almost every boundary: a rule under
   every section label, a full 1px grid cage around each set of cards, and
   vertical dividers inside the client, values and numbers grids. Stacked up
   that was 58-65 drawn edges on a page and it read as graph paper.

   What stays: rules that separate rows in a list, where the line IS the
   structure (process steps, FAQ, service rows, the client strip). What goes:
   the cages, the vertical dividers, and the rule under every section label.
   Cards keep their shape with a faint surface instead of an outline.
   ========================================================================== */

/* the label above a section no longer needs a rule under it */
.slate{border-bottom:0;padding-bottom:.4rem;margin-bottom:clamp(2rem,5.5vh,4.2rem)}

/* card sets: real gaps and a soft surface, not a 1px grid showing through */
.sv-cards,.sv-out,.sv-grid,.sv-nav{background:none;border:0;gap:clamp(.7rem,1.1vw,1rem)}
.sv-card,.sv-out__i,.sv-tile,.sv-nav__s,.sv-nav__all{
  background:rgba(255,255,255,.022);border-radius:3px}
.sv-card:hover,.sv-out__i:hover,.sv-tile:hover,.sv-nav__s:hover,.sv-nav__all:hover{
  background:rgba(255,255,255,.05)}
.sv-card::after,.sv-tile::after{left:0;right:0;top:0;border-radius:3px 3px 0 0}
@media(min-width:760px){.sv-nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}

/* vertical dividers inside grids: the gaps already separate the cells */
.val{border-right:0}
.cl__c{border-right:0}
.stats--row .stat+.stat{border-left:0}

/* one rule above the numbers row is enough */
.stats--row{padding-top:clamp(1.8rem,4.5vh,2.6rem)}

/* ---- shared footer ------------------------------------------------------
   The contact block that used to sit only on the home page is now part of
   the footer on every page. .foot__meta is retired: the grid carries the
   phone and socials, so keeping both would repeat them.               */
.foot{padding-block:clamp(2.6rem,6vh,4rem) clamp(2rem,5vh,3rem)}
/* Centred, and close to the row below it. The contact details used to sit
   left in their columns with about 86px of empty footer under them — the
   margin here plus the padding on .foot__top — which read as a hole rather
   than as breathing room. */
.foot__grid{margin-top:0;padding-top:0;border-top:0;text-align:center;
  margin-bottom:clamp(.9rem,2.2vh,1.4rem);gap:1.4rem clamp(1.5rem,3vw,2.5rem)}
.foot__grid dd{margin:0}
.foot__grid ul{list-style:none;margin:0;padding:0}
.foot__grid .tiny{text-transform:none;letter-spacing:.1em}
.foot__top{padding-top:clamp(.9rem,2.2vh,1.3rem);border-top:1px solid var(--line)}
.foot__meta{display:none}

/* Social marks live in the bottom bar now: copyright to the left, marks in
   the middle, legal to the right. On a narrow screen the bar wraps and they
   take a line of their own, still centred. */
.foot__bot .foot__soc{margin:0;flex:0 1 auto}
@media(max-width:699px){
  .foot__bot{justify-content:center;text-align:center}
  .foot__bot .foot__soc{order:-1;width:100%;margin-bottom:.2rem}
}

/* ==========================================================================
   CAREERS
   ========================================================================== */
.sec-pad--tight{padding-block:clamp(1.6rem,4vh,2.4rem)}

/* open roles: the same accordion shape as the FAQ, with a meta line */
/* Rules between the roles, not around them: the list already sits in its own
   section, so a line above the first and below the last only added to the
   ruling. The gaps between the sections do that job. */
.cr-roles{border-top:0}
.cr-role+.cr-role{border-top:1px solid var(--line)}
.cr-role{border-bottom:0}

/* straight to the form from the opening description */
.cr-why__cta{margin-top:clamp(1.3rem,3vh,1.9rem)}
.cr-role__h{display:grid;grid-template-columns:3.2rem minmax(0,1fr) 1.6rem;gap:1rem;
  align-items:center;width:100%;padding:clamp(1.2rem,2.6vw,1.9rem) 0;
  background:none;border:0;text-align:left;color:inherit;cursor:pointer;font:inherit}
.cr-role__main{min-width:0;display:flex;flex-direction:column;gap:.45rem}
.cr-role__t{font-family:var(--f-d);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.08rem,1.8vw,1.65rem);letter-spacing:-.03em;line-height:1.14;
  color:var(--ink-2);transition:color .5s var(--e);overflow-wrap:anywhere}
.cr-role__h:hover .cr-role__t,.cr-role.open .cr-role__t{color:var(--ink)}
.cr-role__meta{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;color:var(--ink-3);
  font-size:.66rem;letter-spacing:.14em}
.cr-role__x{position:relative;width:14px;height:14px;justify-self:end}
.cr-role__x::before,.cr-role__x::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:1px;background:var(--ink-3);transition:transform .5s var(--e),background .5s var(--e)}
.cr-role__x::after{transform:rotate(90deg)}
.cr-role.open .cr-role__x::before,.cr-role.open .cr-role__x::after{background:var(--accent)}
.cr-role.open .cr-role__x::after{transform:rotate(0)}
.cr-role__b{height:0;overflow:hidden;transition:height .6s var(--e)}
.cr-role__bi{padding:0 0 clamp(1.4rem,3vw,2.1rem) 3.2rem;max-width:68ch}
.cr-role__bi .lede{margin-bottom:1rem}
.cr-role__d{font-size:clamp(.92rem,1.05vw,1.04rem);line-height:1.72;color:var(--ink-3);
  font-weight:300}
.cr-role__d+.cr-role__d{margin-top:.9rem}
.cr-role__apply{margin-top:clamp(1.2rem,2.6vh,1.8rem)}
@media(max-width:599px){
  .cr-role__h{grid-template-columns:2.2rem minmax(0,1fr) 1.2rem;gap:.7rem}
  .cr-role__bi{padding-left:2.9rem}
}

/* application form: copy on the left, fields on the right */
.cr-form{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start}
.cr-form__l{min-width:0}
.cr-form__l .d{margin-bottom:clamp(1.2rem,3vh,1.8rem)}
.cr-form__note{margin-top:1rem;text-transform:none;letter-spacing:.08em;max-width:44ch}
.cr-form__r{min-width:0;display:grid;gap:1rem}
@media(min-width:1000px){.cr-form{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}

/* the file row, styled like the other fields */
.f-file{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem 1rem;align-items:center}
.f-file__lbl{grid-column:1/-1;font-family:var(--f-m);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
/* The input is driven by the label, so it only needs to stay reachable by
   keyboard. Selector written as .f-row input.f-file__in because the generic
   ".f-row input {width:100%}" rule outranks a single class and was stretching
   the hidden field to full width, pushing the page sideways. */
.f-row input.f-file__in{position:absolute;width:1px;height:1px;min-width:0;padding:0;
  margin:-1px;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
/* Same family as .btn and .cta — the notch is smaller only because the button
   is, so the corner stays in proportion. It used to change colour on hover but
   not fill, which made it the odd one out sitting directly above Send. */
.f-file__btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  font-family:var(--f-m);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:none;
  border:1px solid var(--line-2);padding:.7rem 1.2rem;cursor:pointer;
  transition:border-color .4s var(--e),color .4s var(--e);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.f-file__btn i{position:absolute;inset:0;background:var(--accent);transform:translateY(101%);
  transition:transform .6s var(--e);z-index:0}
.f-file__btn span{position:relative;z-index:1;transition:color .45s var(--e)}
.f-file__btn:hover{border-color:var(--accent)}
.f-file__btn:hover i{transform:none}
.f-file__btn:hover span{color:var(--void)}
.f-file__in:focus-visible+.f-file__btn{outline:2px solid var(--accent);outline-offset:2px}
.f-file__n{font-family:var(--f-m);font-size:.66rem;letter-spacing:.12em;color:var(--ink-3);
  min-width:0;overflow-wrap:anywhere}

/* ==========================================================================
   BLOG
   ========================================================================== */
.bl-grid{display:grid;grid-template-columns:1fr;gap:clamp(.8rem,1.3vw,1.2rem)}
.bl-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  padding:clamp(1.4rem,2.4vw,2.1rem);background:rgba(255,255,255,.022);border-radius:3px;
  transition:background .55s var(--e)}
.bl-card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--e);border-radius:3px 3px 0 0}
.bl-card:hover{background:rgba(255,255,255,.05)}
.bl-card:hover::after{transform:scaleX(1)}
.bl-card__v{display:block;margin:-.2rem 0 1.2rem;overflow:hidden;border-radius:2px}
.bl-card__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.86) contrast(1.04);transition:transform 1.1s var(--e)}
.bl-card:hover .bl-card__img{transform:scale(1.04)}
.bl-card__meta{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-bottom:.8rem;color:var(--ink-3)}
.bl-card__t{font-family:var(--f-d);font-weight:500;font-size:clamp(1.1rem,1.7vw,1.6rem);
  letter-spacing:-.02em;line-height:1.18;color:var(--ink);margin-bottom:.7rem;
  overflow-wrap:anywhere}
.bl-card__d{font-size:.92rem;line-height:1.64;color:var(--ink-3);font-weight:300;
  margin-bottom:1.4rem}
.bl-card .sv-tile__a{margin-top:auto}
.bl-card:hover .sv-tile__a{color:var(--accent)}
.bl-card:hover .sv-tile__a svg{transform:translateX(5px)}
@media(min-width:720px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.bl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* a single post: one readable column */
.bl-hero{max-width:64ch}
/* One measure for the article and every picture in it. The lead picture used
   to run the full width of the page — 1760px — while the writing it
   introduces is a reading measure of about 650px, so the two never lined up.
   Set in rem rather than ch so the picture and the text resolve to the same
   number: ch is the width of a "0" in whichever font the element inherits,
   and these two do not inherit the same one. */
/* 46.5rem is what 68ch was measuring to, so the writing keeps the width it
   has always had and only the pictures move to meet it. In rem rather than ch
   because ch is the width of a "0" in whichever font the element inherits,
   and the pictures do not inherit the same one as the text. */
:root{--bl-measure:46.5rem}
.bl-lead{overflow:hidden;border-radius:3px;
  margin:clamp(1.5rem,4vh,2.5rem) auto 0;max-width:var(--bl-measure)}
.bl-lead__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.88) contrast(1.03)}
/* The pictures in an article are the one thing on this page that draws reliably
   on every machine — and they are also the one thing GSAP gives a transform to,
   which puts them on a compositing layer of their own, above the full-screen
   WebGL canvas. The writing had no transform, so it was painted into the main
   layer instead. On some graphics-driver combinations, text painted into that
   layer over a canvas comes out empty: correct position, correct colour,
   nothing drawn. Giving the column a layer of its own costs nothing and puts
   the writing in exactly the place as the pictures that already work. */
.bl-body{max-width:var(--bl-measure);margin:0 auto;transform:translateZ(0)}

/* Pictures dropped between paragraphs, on the same measure as the text so the
   column reads as one piece. Cropped to a set shape for the same reason the
   client logos are: whatever gets uploaded later should land looking like the
   rest rather than setting its own height. */
.bl-fig{margin:clamp(1.8rem,4.2vh,2.8rem) 0}
.bl-fig__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:3px;filter:saturate(.88) contrast(1.03)}
.bl-fig__c{margin:.7rem 0 0;font-family:var(--f-m);font-weight:400;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.bl-body p{font-size:clamp(1rem,1.15vw,1.16rem);line-height:1.82;color:var(--ink-2);
  font-weight:300}
.bl-body p+p{margin-top:1.3rem}
.bl__h{font-family:var(--f-d);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.7rem);letter-spacing:-.025em;line-height:1.2;
  color:var(--ink);margin:clamp(2.2rem,5vh,3.2rem) 0 1rem}

/* ==========================================================================
   FAQ
   ========================================================================== */
.fq-find{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-bottom:clamp(1rem,2.5vh,1.5rem);border-bottom:1px solid var(--line)}
.fq-find label{flex:0 0 auto}
.fq-find input{flex:1 1 16rem;min-width:0;background:none;border:0;
  border-bottom:1px solid transparent;color:var(--ink);font:inherit;
  font-size:clamp(1rem,1.3vw,1.2rem);padding:.5rem 0;
  transition:border-color .4s var(--e)}
.fq-find input::placeholder{color:var(--ink-3);opacity:.75}
.fq-find input:focus{outline:0;border-bottom-color:var(--accent)}
.fq-find__n{flex:0 0 auto;color:var(--accent);min-width:8ch;text-align:right}
@media(max-width:599px){.fq-find__n{text-align:left}}

/* ---- every control answers a pointer the same way ----------------------
   A sweep of every button-like thing on the site found two that did not: the
   sound toggle, which when already on was the same colour hovered as not, so
   nothing happened at all; and the modal's close button, which only lifted
   its border a little. Everything else already turns the brand colour, and
   now these do too.                                                      */
.snd:hover,.snd.on:hover{color:var(--accent)}
.snd:hover .snd__eq i,.snd.on:hover .snd__eq i{background:var(--accent)}
.modal__x:hover{color:var(--accent);border-color:var(--accent)}

/* ---- hiring steps as a row of boxes ------------------------------------
   Five steps stacked down the page read as a long list of rules. As one row
   they read as a sequence, which is what they are. A modifier rather than a
   change to .sv-steps, because the service pages use the same list for their
   process and keep the stacked version.

   The column count is stated at each size rather than left to auto-fit: with
   exactly five items, auto-fit drops to four well before the row is tight and
   leaves one box stranded underneath.                                     */
.sv-steps--row{grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.7rem,1.1vw,1rem)}
.sv-steps--row .sv-step{grid-template-columns:minmax(0,1fr);align-content:start;
  gap:.55rem;padding:clamp(1.1rem,1.7vw,1.5rem);background:var(--void);
  border:0;transition:background .55s var(--e)}
.sv-steps--row .sv-step:first-child{border-top:0}
.sv-steps--row .sv-step::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--e)}
.sv-steps--row .sv-step:hover::after{transform:none}
.sv-steps--row .sv-step:hover{background:rgba(255,255,255,.03)}
.sv-steps--row .sv-step__n{font-size:clamp(1.3rem,1.9vw,1.9rem);margin-bottom:.1rem}
.sv-steps--row .sv-step__t{font-size:clamp(.92rem,1.05vw,1.02rem)}
.sv-steps--row .sv-step__d{font-size:.86rem;line-height:1.62}

/* Five across only while a box still has room to be read: five boxes plus
   four gaps needs about 1200px before each one drops under ~220px wide. */
@media(max-width:1199px){.sv-steps--row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){.sv-steps--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:559px){.sv-steps--row{grid-template-columns:minmax(0,1fr)}}

/* ---- the FAQ search box -------------------------------------------------
   It was a bare underline that only showed itself once focused, so there was
   little to say "type here". It now carries a faint fill at rest, a stronger
   one under the pointer, and the brand colour once it is being used — which
   :not(:placeholder-shown) catches, so a box with a word in it stays lit
   after the cursor has gone elsewhere.                                    */
.fq-find input{background:rgba(255,255,255,.035);border-radius:3px;
  padding:.62rem .85rem;
  transition:border-color .4s var(--e),background-color .4s var(--e),
             box-shadow .4s var(--e),color .4s var(--e)}
.fq-find input:hover{background:rgba(255,255,255,.075)}
.fq-find input:focus{outline:0;border-bottom-color:var(--accent);
  background:rgba(74,204,173,.11);box-shadow:inset 0 0 0 1px rgba(74,204,173,.42)}
.fq-find input:not(:placeholder-shown){background:rgba(74,204,173,.11);
  box-shadow:inset 0 0 0 1px rgba(74,204,173,.42);border-bottom-color:var(--accent)}