/* ============================================================
   Synked — foundation + tokens (from DESIGN-system.md)
   ============================================================ */
:root{
  --bg:#121212;
  --bg-deep:#0a0a0a;
  --surface:#1c1c1c;
  --text:#d8d8d8;
  --text-2:#8a8a8a;
  --text-muted:#c3c3c3;
  --inverse:#ffffff;
  --border:#2e2e2e;
  --border-light:#d8d8d8;
  --accent:#DE2C2C;
  --accent-hover:#b81f1f;
  --accent-muted:#3a1414;

  --font-display:'Unbounded',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Montserrat',ui-sans-serif,system-ui,sans-serif;

  --e-soft:cubic-bezier(0.22,1,0.36,1);
  --e-standard:cubic-bezier(0.4,0,0.2,1);
  --e-power4:cubic-bezier(.83,0,.17,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
canvas{display:block;}

/* ============================================================
   Site nav (fixed header)
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(13px,1.4vw,20px) clamp(20px,5vw,80px);
  background:rgba(10,10,10,.75); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:transform .45s var(--e-soft); }
.nav.is-hidden{ transform:translateY(-105%); }
.nav__logo img{ height:clamp(15px,1.3vw,21px); width:auto; }
.nav__links{ display:flex; gap:clamp(16px,1.9vw,32px); }
.nav__links a{ font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.03em; color:#fff; opacity:.78; transition:opacity .25s var(--e-soft); }
.nav__links a:hover{ opacity:1; }
.nav__lang{ background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.08em; padding:9px 13px; border-radius:2px; cursor:pointer; transition:border-color .25s var(--e-soft), color .25s var(--e-soft); }
.nav__lang:hover{ border-color:var(--accent); color:var(--accent); }
.nav__drawer{ display:contents; }
.nav__drawer-foot{ display:contents; }
.nav__burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; padding:8px; background:transparent; border:0; cursor:pointer; z-index:60; }
.nav__burger span{ display:block; width:100%; height:2px; background:#fff; border-radius:2px; transition:transform .4s var(--e-soft), opacity .3s var(--e-soft); }

/* language-switch loader */
.langload{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(8,8,8,.97); opacity:0; pointer-events:none; transition:opacity .35s var(--e-soft); }
.langload.is-on{ opacity:1; pointer-events:auto; }
.langload__w{ font-family:var(--font-body); font-weight:600; font-size:clamp(14px,1.5vw,23px); letter-spacing:.02em; color:#fff; }

/* ============================================================
   Corner wordmark
   ============================================================ */
.brand{
  position:fixed; top:28px; left:32px; z-index:40;
  font-family:var(--font-display); font-weight:600; font-size:17px;
  letter-spacing:.04em; color:var(--text); mix-blend-mode:difference;
}
.brand b{font-weight:700;}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative;
  height:100svh; min-height:600px;
  overflow:hidden;
  background:var(--bg);
}

/* effect stage — wraps the ghost wordmark + ascii canvas (sized as one unit) */
.hero-stage{ position:absolute; inset:0; z-index:1; }

/* giant ghost wordmark behind the ascii art */
.hero-word{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  pointer-events:none; user-select:none;
}
.hero-word span{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(38px,11.6vw,200px);
  line-height:.84;
  letter-spacing:-.045em;
  color:rgba(216,216,216,.03);   /* faint ghost — the lime arc is the star */
  text-transform:uppercase;
}

/* ascii effect canvas — sits OVER the wordmark */
#hero-gl{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  cursor:pointer;
}

/* lead block — tagline + cta, left-aligned on the centre line */
.hero-lead{
  position:absolute; z-index:3;
  left:clamp(20px,4vw,48px); top:50%; transform:translateY(-50%);
  max-width:min(640px,52vw);
}
.hero-tag{ pointer-events:auto; }
.hero-tag p{
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(30px,3.2vw,42px);
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:30px;
  text-wrap:balance;
}

/* right-side infinite vertical word loop — height synced to .hero-lead via JS */
.hero-loop{
  position:absolute; z-index:3; pointer-events:none; overflow:hidden;
  right:clamp(20px,5vw,64px);
  top:34%; height:32%;                 /* JS overrides top/height to match lead block */
  width:clamp(150px,16vw,220px);
}
.hero-loop__viewport{
  height:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
}
.hero-loop__track{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  animation:loopUp 9s linear infinite;
  will-change:transform;
}
.hero-loop__track li{
  font-family:var(--font-body); font-weight:500;
  text-transform:none; letter-spacing:.02em;
  font-size:clamp(15px,1.35vw,19px); line-height:1;
  color:var(--text-2); padding:11px 0;
}
@keyframes loopUp{ from{transform:translateY(0);} to{transform:translateY(-50%);} }

.hero-loop__fade{ position:absolute; left:0; right:0; height:40%; pointer-events:none; }
.hero-loop__fade.is-top{ top:0; }
.hero-loop__fade.is-bottom{ bottom:0; }

/* centre-bottom wordmark with auto-rotating 3D figure */
.hero-mark{
  position:absolute; left:50%; bottom:clamp(22px,3.4vw,40px);
  transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:clamp(8px,1.1vw,16px);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(13px,1.45vw,18px); letter-spacing:.01em;
  color:var(--text); white-space:nowrap; pointer-events:none; user-select:none;
}
.hero-mark__3d{
  width:clamp(46px,5vw,74px); height:clamp(46px,5vw,74px);
  display:block; flex:none;
}
.hero-mark__3d canvas{ width:100%!important; height:100%!important; display:block; }

/* bottom-right scroll cue */
.hero-foot{ display:none; }
.hero-foot--unused{
  position:absolute; right:clamp(20px,4vw,48px); bottom:clamp(28px,4vw,48px);
  z-index:3; pointer-events:none;
}
.hero-scroll{
  pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-2);
  writing-mode:vertical-rl;
}
.hero-scroll i{
  display:block; width:1px; height:54px; background:var(--border-light);
  transform-origin:top; animation:scrollPulse 2.4s var(--e-soft) infinite;
}
@keyframes scrollPulse{
  0%,100%{transform:scaleY(.3);opacity:.4;}
  50%{transform:scaleY(1);opacity:1;}
}

/* ============================================================
   Animated split button  (good-fella adapted — DESIGN-system §4)
   ============================================================ */
.split-btn{
  --split-icon:url("../assets/synked-mark.png");
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; cursor:pointer; outline:none;
  font-family:var(--font-body); font-weight:600;
  text-transform:uppercase; font-size:13px; line-height:20px; letter-spacing:.06em;
  color:#fff;
}
.split-btn:focus-visible{
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent-muted);
}
.split-btn-inner{position:relative;display:flex;width:100%;align-items:center;gap:6px;}
.split-btn-icon{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;
  background:var(--accent);color:#fff;
  transition:transform .7s var(--e-power4);
}
.split-btn-ico{
  width:100%;height:100%;background-color:currentColor;
  -webkit-mask:var(--split-icon) center / 68% no-repeat;
          mask:var(--split-icon) center / 68% no-repeat;
}
.split-btn-icon--left{transform-origin:left center;transform:rotate(-45deg) scale(0);}
.split-btn-icon--right{position:absolute;right:0;z-index:10;transform-origin:right center;transform:rotate(0deg) scale(1);}
.split-btn-label{
  display:flex;flex:1 1 0%;width:100%;align-items:center;justify-content:center;
  height:36px;padding:0 14px;
  background:var(--accent);color:#fff;
  transform:translateX(-42px);
  transition:transform .7s var(--e-power4);
}
.split-btn:hover .split-btn-icon--left{transform:rotate(0deg) scale(1);}
.split-btn:hover .split-btn-icon--right{transform:rotate(-45deg) scale(0);}
.split-btn:hover .split-btn-label{transform:translateX(0);}
.scramble-wrap{overflow:hidden;display:inline-block;white-space:nowrap;}
.scramble-inherit{display:inline-block;white-space:nowrap;color:inherit;}
.scramble-flash{color:#fff;}

/* ============================================================
   SCREEN 2 — approach / manifesto word-reveal
   ============================================================ */
.approach{ position:relative; min-height:200vh; background:var(--bg); }
.approach__in{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(20px,6vw,120px);
}
.approach__col{ max-width:min(1080px,90vw); text-align:center; }
.approach__lead{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(25px,3.35vw,52px); line-height:1.3; letter-spacing:-.012em;
  color:var(--text); text-wrap:pretty;
}
.approach__lead .w{ position:relative; display:inline-block; --p:0; }
/* dim preview text (~10%) */
.approach__lead .w__base{ color:rgba(216,216,216,.10); }
.approach__lead .w--hl .w__base{ color:rgba(222,44,44,.20); }
/* full-colour text, revealed left->right in the bar's wake */
/* full-colour text — revealed only in the rectangle's wake (uncover phase) */
.approach__lead .w__fill{
  position:absolute; inset:0; color:var(--text); pointer-events:none;
  clip-path:inset(0 calc(100% - clamp(0%, calc((2*var(--p) - 1) * 100%), 100%)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - clamp(0%, calc((2*var(--p) - 1) * 100%), 100%)) 0 0);
}
.approach__lead .w--hl .w__fill{ color:var(--accent); }
/* one full-width lime rectangle per word: covers the word (p 0->.5) then uncovers it (p .5->1) */
.approach__lead .w__bar{
  position:absolute; inset:0; background:var(--accent); pointer-events:none;
  clip-path:inset(0 clamp(0%, calc((1 - 2*var(--p)) * 100%), 100%) 0 clamp(0%, calc((2*var(--p) - 1) * 100%), 100%));
  -webkit-clip-path:inset(0 clamp(0%, calc((1 - 2*var(--p)) * 100%), 100%) 0 clamp(0%, calc((2*var(--p) - 1) * 100%), 100%));
  /* soften the very start/end so it appears & disappears smoothly */
  opacity:clamp(0, min(calc(var(--p) / .08), calc((1 - var(--p)) / .08)), 1);
}

/* ============================================================
   SCREEN 3 — process (split 50/50)
   ============================================================ */
.process{ position:relative; min-height:240vh; background:var(--bg); }
.process__grid{
  position:sticky; top:0; height:100svh;
  display:grid; grid-template-columns:1fr 1fr;
}
.process__left,.process__right{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,4vw,80px);
}
/* dotted grid across the whole right half */
.process__right{
  background-image:radial-gradient(circle, rgba(255,255,255,.06) 1.2px, transparent 1.5px);
  background-size:26px 26px; background-position:center;
}

/* center divider — draws in, with a lime gradient that flies down it every 3s */
.process__divider{
  position:absolute; left:50%; margin-left:-.5px; width:1px; z-index:2;
  top:calc(50% - var(--grow,0) * 50%); bottom:calc(50% - var(--grow,0) * 50%);
  background:var(--border); overflow:hidden;
}
.process__divider::after{
  content:""; position:absolute; left:-1.5px; width:4px; height:7%; top:-8%;
  background:linear-gradient(to bottom, transparent, var(--accent), transparent);
  filter:blur(.5px); animation:lineSweep 3s ease-in-out infinite;
}
@keyframes lineSweep{
  0%{ top:-8%; opacity:0; } 6%{ opacity:1; }
  45%{ top:100%; opacity:1; } 52%{ opacity:0; } 100%{ top:100%; opacity:0; }
}

/* left — statement centred inside a SQUARE marked by four rotating + corners */
.statement-wrap{
  position:relative; width:min(44vw,56vh,460px); aspect-ratio:1;
  display:flex; align-items:center;
}
.process__statement{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(26px,2.86vw,44px); line-height:1.34; letter-spacing:-.01em;
  color:var(--text); text-align:left;
}
.process__statement .hl{ color:var(--accent); }

.plus{ position:absolute; width:clamp(16px,1.7vw,28px); aspect-ratio:1; will-change:transform; }
.plus::before,.plus::after{ content:""; position:absolute; background:var(--text-2); }
.plus::before{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.plus::after{ top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }
.plus--tl{ top:-28px; left:-28px; }
.plus--tr{ top:-28px; right:-28px; }
.plus--bl{ bottom:-28px; left:-28px; }
.plus--br{ bottom:-28px; right:-28px; }

/* right — SQUARE with dotted bg; each step = lime word-rect + lime arrow-square,
   revealed bottom->up one by one on scroll */
.chain-sq{
  position:relative; height:min(44vw,56vh,460px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px;
}
.chain__step{
  --f:0;
  display:flex; align-items:center; justify-content:flex-start; gap:5px;
  clip-path:inset(calc((1 - var(--f)) * 100%) 0 0 0);
  -webkit-clip-path:inset(calc((1 - var(--f)) * 100%) 0 0 0);
}
.chain__word{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(24px,3.2vw,42px); line-height:1; letter-spacing:-.01em;
  color:#fff; background:var(--accent); padding:.32em .55em;
  white-space:nowrap; text-align:left;
}
.chain__arrow{
  flex:none; font-size:clamp(24px,3.2vw,42px);
  width:1.64em; height:1.64em;   /* == word-rect height (1em line + .32em*2 padding) */
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--accent);
}
/* only the arrow glyph turns on hover — the lime square stays put */
.chain__arrow svg{ width:46%; height:46%; display:block; transition:transform .45s var(--e-soft); }
.chain__step:hover .chain__arrow svg{ transform:rotate(90deg); }

/* ============================================================
   Reusable gradient divider lines (gradient runs along them)
   ============================================================ */
.gline{ position:relative; background:var(--border); overflow:hidden; flex:none; }
.gline--h{ width:100%; height:1px; }
.gline--v{ width:1px; align-self:stretch; }
.gline--h::after{
  content:""; position:absolute; top:-1.5px; height:4px; width:12%; left:-14%;
  background:linear-gradient(to right,transparent,var(--accent),transparent);
  filter:blur(.5px); animation:sweepH 3.6s ease-in-out infinite;
}
.gline--v::after{
  content:""; position:absolute; left:-1.5px; width:4px; height:12%; top:-14%;
  background:linear-gradient(to bottom,transparent,var(--accent),transparent);
  filter:blur(.5px); animation:sweepV 4.4s ease-in-out infinite;
}
.gline.is-late::after{ animation-delay:1.9s; }
@keyframes sweepH{ 0%{left:-14%;opacity:0} 6%{opacity:1} 45%{left:100%;opacity:1} 52%{opacity:0} 100%{left:100%;opacity:0} }
@keyframes sweepV{ 0%{top:-14%;opacity:0} 6%{opacity:1} 45%{top:100%;opacity:1} 52%{opacity:0} 100%{top:100%;opacity:0} }

/* ============================================================
   SCREEN 4 — how we work (canvas of draggable nodes)
   ============================================================ */
.how{ position:relative; background:var(--bg); display:flex; flex-direction:column; }
.how__head{ padding:clamp(40px,5vw,72px) clamp(20px,5vw,80px); text-align:center; }
.how__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5vw,72px); line-height:1; letter-spacing:-.02em; color:var(--text); }
.how__main{ display:flex; min-height:64vh; }
.how__canvas{
  position:relative; flex:1 1 64%; overflow:hidden;
  background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size:30px 30px;
}
.how__hint{
  position:absolute; left:clamp(16px,2vw,28px); bottom:clamp(14px,2vh,24px);
  font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-2); pointer-events:none;
}
.how__edges{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.how__edges path{ fill:none; stroke:#3a3a3a; stroke-width:1.5; stroke-dasharray:8 7; animation:dashFlow 1s linear infinite; }
@keyframes dashFlow{ to{ stroke-dashoffset:-15; } }
.node{ position:absolute; transform:translate(-50%,-50%); cursor:grab; touch-action:none; z-index:2; }
.node--cta{ cursor:auto; }
.how__label{
  position:absolute; top:clamp(16px,2vw,30px); left:clamp(16px,2vw,30px); z-index:3;
  font-family:var(--font-display); font-weight:600; font-size:clamp(13px,1vw,16px);
  letter-spacing:.01em; color:var(--text); pointer-events:none;
}
.node:active{ cursor:grabbing; }
.node__inner{
  display:flex; align-items:center; gap:10px; padding:11px 15px;
  background:var(--surface); border:1px solid var(--border); white-space:nowrap;
  transition:border-color .3s var(--e-soft);
}
.node:hover .node__inner{ border-color:var(--accent); }
.node__n{ font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--accent); letter-spacing:.05em; }
.node__t{ font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--text); }

.how__side{ flex:0 0 34%; display:flex; flex-direction:column; }
.how__bullet{ flex:1 1 0; display:flex; align-items:center; gap:16px; padding:0 clamp(24px,3vw,56px); }
.how__arrow{ flex:none; width:24px; height:24px; color:var(--text-2); transition:color .35s var(--e-soft), transform .35s var(--e-soft); }
.how__arrow svg{ width:100%; height:100%; display:block; }
.how__bullet:hover .how__arrow{ color:var(--accent); transform:translateX(5px); }
.how__bullet span{ font-family:var(--font-display); font-weight:600; font-size:clamp(15px,1.35vw,20px); line-height:1.15; color:var(--text); }

.how__foot{ padding:clamp(44px,5vw,84px) clamp(20px,6vw,120px); text-align:center; }
.how__foot p{ font-family:var(--font-body); font-weight:500; font-size:clamp(20px,2.4vw,36px); line-height:1.3; max-width:1000px; margin:0 auto; color:var(--text); text-wrap:balance; }
.how__foot .fw{ display:inline-block; }
.how__foot .fw--hl{ color:var(--accent); }

/* ============================================================
   SCREEN 5 — proof strip (count-up numbers)
   ============================================================ */
.proof{ position:relative; background:var(--bg); }
.proof__row{ display:flex; }
.proof__cell{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:clamp(12px,1.4vw,20px);
  padding:clamp(48px,7vw,120px) clamp(14px,1.8vw,32px);
}
.proof__num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,4.4vw,72px); line-height:.86; letter-spacing:-.03em;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.proof__cell--accent .proof__num{ color:var(--accent); }
/* odometer (Revolut-style rolling digits) */
.odo{ display:inline-flex; align-items:flex-start; line-height:1; }
.odo__pre,.odo__suf{ display:block; line-height:1; }
.odo__col{ display:block; height:1em; overflow:hidden; width:1ch; }
.odo__strip{ display:flex; flex-direction:column; will-change:transform; }
.odo__strip span{ height:1em; line-height:1; display:flex; align-items:center; justify-content:center; }
.proof__label{
  font-family:var(--font-body); font-weight:500; font-size:clamp(12px,.95vw,14px);
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-2); max-width:20ch;
}

/* ============================================================
   SCREEN 6 — working globally (dot-matrix world map)
   ============================================================ */
.glob{ position:relative; background:var(--bg); padding:clamp(48px,6vw,96px) 0 clamp(20px,2.3vw,37px); overflow:hidden; }
/* three equal-weight text blocks, evenly spaced across the width */
.glob__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:clamp(24px,5vw,80px); padding:0 clamp(20px,5vw,80px); margin-bottom:clamp(24px,3vw,40px);
}
.glob__title{ font-family:var(--font-body); font-weight:600; font-size:clamp(20px,1.56vw,25px); line-height:1.5; letter-spacing:0; color:var(--text); }
.glob__mid{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.glob__mid p{ font-family:var(--font-body); font-weight:500; font-size:clamp(20px,1.56vw,25px); line-height:1.5; color:var(--text); }
.glob__lede{ max-width:46ch; font-family:var(--font-body); font-weight:500; font-size:clamp(20px,1.56vw,25px); line-height:1.5; color:var(--text); text-align:left; }
.glob__map{ position:relative; width:100%; aspect-ratio:950/560; }
.glob__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.glob__markers{ position:absolute; inset:0; pointer-events:none; }
/* dot stays centred on its point; label extends right by default, left for --left */
.glob__marker{ position:absolute; transform:translate(-4.5px,-50%); display:flex; align-items:center; gap:8px; }
.glob__marker--left{ flex-direction:row-reverse; transform:translate(calc(-100% + 4.5px),-50%); }
.glob__dot{ position:relative; width:9px; height:9px; flex:none; }
.glob__dot::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent); }
.glob__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent); animation:pingDot 2.6s ease-out infinite; }
@keyframes pingDot{ 0%{transform:scale(1);opacity:.6} 70%,100%{transform:scale(3.6);opacity:0} }
.glob__name{ font-family:var(--font-body); font-weight:600; font-size:clamp(10px,.85vw,13px); letter-spacing:.08em; text-transform:uppercase; color:#fff; white-space:nowrap; }

/* ============================================================
   SCREEN 7 — trusted by (3 moving logo rows, ~25% height)
   ============================================================ */
.trust{ display:flex; flex-direction:column; justify-content:center; padding:clamp(12px,1.4vw,22px) 0 clamp(40px,5vw,80px); overflow:hidden; background:var(--bg); }
.trust__title{ padding:0 clamp(20px,5vw,80px); margin-bottom:clamp(20px,2.6vw,40px); font-family:var(--font-body); font-weight:600; font-size:clamp(20px,1.56vw,25px); color:var(--text); }
.trust__rows{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,38px); }
.trust__row{ display:flex; width:max-content; will-change:transform; }
.trust__row--l{ animation:marqL linear infinite; }
.trust__row--r{ animation:marqR linear infinite; }
.trust__row:hover{ animation-play-state:paused; }
@keyframes marqL{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marqR{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
.tlogo{ flex:none; width:clamp(130px,12vw,180px); height:clamp(34px,3.8vw,60px); margin-right:clamp(18px,2vw,40px); display:flex; align-items:center; justify-content:center; }
.tlogo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; opacity:.36; transition:opacity .35s var(--e-soft); }
.tlogo:hover img{ opacity:1; }

/* ============================================================
   SCREEN 8 — we work with (industries)
   ============================================================ */
.iw{ position:relative; padding:clamp(56px,7vw,110px) 0; background:var(--bg); }
.iw__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,56px); line-height:1; letter-spacing:-.02em; color:var(--text); margin-bottom:clamp(26px,3vw,48px); padding:0 clamp(20px,5vw,80px); }
.iw__list{ border-top:1px solid var(--border); }
.iw__item{ position:relative; display:block; overflow:hidden; border-bottom:1px solid var(--border); padding:clamp(16px,1.8vw,30px) clamp(20px,5vw,80px); cursor:pointer; }
.iw__item::before{ content:""; position:absolute; inset:0; background:var(--accent); transform:scaleY(0); transform-origin:bottom center; transition:transform .5s linear; }
.iw__item span{ position:relative; z-index:1; display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2.5vw,40px); letter-spacing:-.01em; color:var(--text); transition:color .45s linear; }
.iw__item:hover::before{ transform:scaleY(1); }
.iw__item:hover span{ color:#fff; }
.iw__cursor{
  position:fixed; left:0; top:0; z-index:60; pointer-events:none;
  transform:translate(18px,-50%); transform-origin:left center;
  background:#0a0a0a; color:var(--accent);
  font-family:var(--font-body); font-weight:600;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:10px 16px; white-space:nowrap;
  opacity:0; transition:opacity .22s var(--e-soft);
}
.iw__cursor.is-on{ opacity:1; }

/* ============================================================
   SCREEN 9 — services (3D cards)
   ============================================================ */
.svc{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,6vw,90px) clamp(20px,5vw,80px); background:var(--bg); }
.svc__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.6vw,52px); line-height:1.1; letter-spacing:-.02em; color:var(--text); text-align:center; max-width:24ch; margin:0 auto clamp(36px,4.5vw,72px); }
.svc__title .hl{ color:var(--accent); }
.svc__deck{ display:flex; gap:clamp(16px,1.6vw,30px); }
.svc__card{ flex:1 1 0; min-width:0; perspective:1500px; }
.svc__flip{ position:relative; aspect-ratio:1; transform-style:preserve-3d; will-change:transform; }
.svc__back,.svc__face{ position:absolute; inset:0; border-radius:6px; overflow:hidden; background:#161616; border:1px solid var(--border); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.svc__back{ display:flex; align-items:center; justify-content:center; transform:rotateY(180deg); }
.svc__logo{ width:16%; height:auto; opacity:.9; }
.svc__face{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:clamp(18px,1.6vw,28px); }
.svc__btn{ align-self:flex-start; }
.svc__desc{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 clamp(18px,1.6vw,28px) clamp(18px,1.6vw,28px); font-family:var(--font-body); font-size:clamp(13px,1vw,16px); line-height:1.5; color:var(--text-2); }
.svc__desc .dw{ display:inline-block; opacity:0; will-change:transform,opacity; }
/* card hover mirrors the split-button animation */
.svc__card:hover .svc__btn .split-btn-icon--left{ transform:rotate(0deg) scale(1); }
.svc__card:hover .svc__btn .split-btn-icon--right{ transform:rotate(-45deg) scale(0); }
.svc__card:hover .svc__btn .split-btn-label{ transform:translateX(0); }

/* ============================================================
   SCREEN 10 — founder
   ============================================================ */
.fnd{ display:flex; align-items:stretch; gap:0; background:var(--bg); min-height:100vh; }
.fnd__photo{ flex:none; aspect-ratio:1; height:100vh; overflow:hidden; }
.fnd__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; filter:grayscale(1) contrast(1.05); }
.fnd__text{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; padding:clamp(40px,5vw,96px) clamp(24px,5vw,90px);
  background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.5px); background-size:26px 26px; }
.fnd__inner{ width:100%; max-width:680px; display:flex; flex-direction:column; gap:clamp(14px,1.5vw,22px); text-align:left; }
.fnd__role{ font-family:var(--font-body); font-weight:600; font-size:clamp(12px,1vw,14px); letter-spacing:.22em; text-transform:uppercase; color:var(--text-2); }
.fnd__name{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.6vw,58px); line-height:1; letter-spacing:-.02em; color:var(--accent); margin-bottom:clamp(8px,1vw,16px); }
.fnd__lead{ font-family:var(--font-body); font-weight:500; font-size:clamp(19px,1.7vw,28px); line-height:1.35; letter-spacing:-.01em; color:var(--text); }
.fnd__lead .hl{ color:var(--accent); }
.fnd__body{ display:flex; flex-direction:column; gap:clamp(12px,1.2vw,18px); margin-top:clamp(14px,1.6vw,24px);
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:6px; padding:clamp(20px,1.8vw,32px); }
.fnd__body p{ font-family:var(--font-body); font-weight:400; font-style:normal; font-size:clamp(15px,1.15vw,19px); line-height:1.55; color:var(--text); }

/* ============================================================
   SCREEN 11 — brief / footer
   ============================================================ */
.brief{ background:var(--bg-deep); padding:clamp(56px,7vw,110px) 0 0; }
.brief__top{ display:grid; grid-template-columns:1fr minmax(300px,400px) 1fr; align-items:start; gap:clamp(28px,4vw,64px); padding:0 clamp(20px,5vw,80px); }
.brief__intro{ max-width:520px; }
.brief__h{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5vw,72px); line-height:1; letter-spacing:-.02em; color:var(--text); margin-bottom:18px; }
.brief__sub{ font-family:var(--font-body); font-size:clamp(15px,1.2vw,19px); line-height:1.5; color:var(--text-2); max-width:42ch; }
.brief__form{ justify-self:center; width:100%; max-width:400px; display:flex; flex-direction:column; gap:12px; }
.brief__in{ background:var(--surface); border:1px solid var(--border); border-radius:3px; color:var(--text); font-family:var(--font-body); font-size:15px; padding:15px 18px; transition:border-color .3s var(--e-soft); }
.brief__in::placeholder{ color:var(--text-2); }
.brief__in:focus{ outline:none; border-color:var(--accent); }
.brief__send{ align-self:flex-start; margin-top:6px; }
.brief__menu{ justify-self:end; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.brief__menu a{ font-family:var(--font-body); font-weight:500; font-size:14px; color:var(--text-2); transition:color .25s var(--e-soft); }
.brief__menu a:hover{ color:var(--accent); }
.brief__wm{ position:relative; margin-top:clamp(40px,6vw,90px); overflow:hidden; }
.brief__big{ font-family:var(--font-display); font-weight:800; font-size:19.2vw; line-height:.74; letter-spacing:-.03em; color:#1b1b1b; text-transform:uppercase; text-align:center; white-space:nowrap; }
.hero-mark--foot{ top:auto; bottom:clamp(16px,2.2vw,40px); transform:translateX(-50%); z-index:2; }
.hero-mark--foot span:not(.hero-mark__3d){ color:var(--text); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:768px){
  .hero-scroll{display:none;}
  .hero-loop{display:none;}

  /* ---------- HERO: logo/effect on top, ghost behind, text+button below ---------- */
  #hero{ min-height:100svh; }
  .hero-stage{ top:3%; height:52%; bottom:auto; }
  .hero-word span{ font-size:clamp(40px,17vw,120px); }
  .hero-lead{ position:absolute; top:58%; left:0; right:0; transform:none; max-width:none; padding:0 clamp(22px,6vw,40px); }
  .hero-tag p{ font-size:clamp(24px,6.6vw,34px); margin-bottom:22px; }
  .hero-mark{ bottom:clamp(14px,4vw,26px); }

  /* ---------- nav -> hamburger drawer ---------- */
  .nav__burger{display:flex;}
  .nav__drawer{
    position:fixed; inset:0; z-index:55; height:100dvh;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:0; padding:calc(env(safe-area-inset-top,0px) + 84px) clamp(28px,8vw,48px) calc(env(safe-area-inset-bottom,0px) + 36px);
    background:#0a0a0a; overflow-y:auto;
    /* fade (NOT slide-off-screen): an off-screen fixed panel causes a pannable
       area on iOS even with body overflow:hidden, so keep it within bounds. */
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .4s var(--e-soft), visibility .4s var(--e-soft);
  }
  .nav.is-open .nav__drawer{ opacity:1; visibility:visible; pointer-events:auto; }
  .nav__links{ display:flex; flex-direction:column; gap:clamp(14px,2.6vh,30px); flex:1 1 auto; justify-content:center; width:100%; }
  .nav__links a{ font-family:var(--font-display); font-weight:600; font-size:clamp(28px,8vw,44px); opacity:1; letter-spacing:-.01em; line-height:1;
    transform:translateY(14px); transition:transform .45s var(--e-soft); }
  .nav.is-open .nav__links a{ transform:translateY(0); }
  .nav__drawer-foot{ display:flex; align-items:center; gap:16px; width:100%; padding-top:clamp(20px,3vh,32px); border-top:1px solid rgba(255,255,255,.1); margin-top:auto; }
  .nav__lang{ font-size:13px; padding:11px 16px; }
  .nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ---------- PROCESS: stacked; plus spins + chain reveals on scroll (JS) ---------- */
  .process{min-height:auto;}
  .process__grid{position:static;height:auto;grid-template-columns:1fr;}
  .process__divider{display:none;}
  .process__left,.process__right{padding:clamp(56px,12vw,80px) clamp(26px,8vw,44px);}
  .statement-wrap{width:100%;max-width:520px;aspect-ratio:auto;}
  .chain-sq{width:100%;max-width:520px;height:auto;aspect-ratio:auto;justify-content:flex-start;gap:14px;}
  .process__statement{font-size:clamp(22px,5.4vw,30px);}
  .chain__word,.chain__arrow{font-size:clamp(20px,5.6vw,30px);}
  .plus--tl,.plus--bl{left:-16px;} .plus--tr,.plus--br{right:-16px;}
  .plus--tl,.plus--tr{top:-16px;} .plus--bl,.plus--br{bottom:-16px;}

  /* ---------- HOW WE WORK: keep desktop node graph, mobile layout (JS positions) ---------- */
  .how__main{flex-direction:column;}
  .gline--v{display:none;}
  .how__canvas{ min-height:160vw; max-height:700px; background-size:26px 26px; border-bottom:1px solid var(--border); }
  .how__label{ left:0; right:0; text-align:center; }
  .how__hint{ display:none; }
  .node__inner{ padding:9px 12px; white-space:normal; width:160px; }
  .node__t{ font-size:12px; line-height:1.2; }
  .node__n{ font-size:10px; align-self:flex-start; margin-top:1px; }
  .how__side{flex:auto;}
  .how__bullet{ padding:clamp(18px,5vw,26px) clamp(22px,7vw,40px); }
  .how__title{font-size:clamp(30px,9vw,48px);}

  /* ---------- PROOF: 2x2 grid with divider lines ---------- */
  .proof__row{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); }
  .proof__cell{ flex:none; background:var(--bg); padding:clamp(30px,7vw,52px) clamp(14px,4vw,22px); }
  .proof__row .gline--v{display:none;}
  .proof__num{font-size:clamp(28px,8vw,46px);}

  /* ---------- GLOBALLY: drop the description text; stretch+centre the map ---------- */
  .glob__head{flex-direction:column;align-items:flex-start;gap:14px;}
  .glob__title{font-size:clamp(26px,7vw,34px);}
  .glob__mid,.glob__lede{ display:none; }
  .glob__map{ aspect-ratio:auto; height:46vh; width:150%; margin-left:calc(-33% + 15px); }
  .glob__name{ font-size:10.5px; letter-spacing:.05em; }

  /* ---------- INDUSTRIES: scroll-driven accent highlight (JS toggles .is-active) ---------- */
  .iw__cursor{display:none;}
  .iw__item span{font-size:clamp(18px,5.4vw,28px);}
  .iw__item.is-active::before{ transform:scaleY(1); }
  .iw__item.is-active span{ color:#fff; }

  /* ---------- SERVICES: 3 rows x 2 static cards, gentle fade-in (JS); desc at bottom ---------- */
  .svc{min-height:auto;}
  .svc__deck{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,3vw,16px); align-items:stretch; }
  .svc__card{ display:flex; perspective:none; }
  .svc__flip{ aspect-ratio:auto; transform:none!important; display:flex; flex:1; }
  .svc__back{ display:none; }
  .svc__face{ position:static; flex:1; display:flex; flex-direction:column; min-height:240px; padding:clamp(14px,3.6vw,18px); }
  .svc__btn{ font-size:11px; }
  .svc__btn .split-btn-icon--left{transform:rotate(0deg) scale(1);}
  .svc__btn .split-btn-icon--right{transform:rotate(-45deg) scale(0);}
  .svc__btn .split-btn-label{transform:translateX(0); padding:0 8px;}
  .svc__desc{ position:static; margin-top:auto; padding:14px 0 0; opacity:1; color:var(--text);
    font-size:clamp(14px,4vw,18px); line-height:1.34; }
  .svc__desc .dw{opacity:1!important;}

  .fnd{flex-direction:column;align-items:flex-start;}
  .fnd__photo{flex:none;height:auto;aspect-ratio:1;width:100%;max-width:520px;}
  .brief__top{grid-template-columns:1fr;}
  .brief__form{justify-self:start;max-width:none;}
  .brief__menu{justify-self:start;align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:16px;}
}

@media (prefers-reduced-motion:reduce){
  .hero-scroll i{animation:none;transform:scaleY(.7);}
  .hero-loop__track{animation:none;}
  .approach__lead .w{--p:1;}
  .approach__lead .w__bar{display:none;}
  .chain__step{--f:1;}
  .plus{transform:none!important;}
  .process__divider::after{animation:none;display:none;}
  .gline::after{display:none;}
  .how__edges path{animation:none;}
  .glob__dot::after{animation:none;}
  .trust__row{animation:none;}
  .svc__card{transform:none!important;}
  *{scroll-behavior:auto;}
}