:root{
  --void:#070C12; --deep:#0F151A; --paper:#ECECEC; --sand:#DBD8D3;
  --orange:#E0891C; --blue:#2A8FC6; --blue-hot:#4FB4E6;
  --pad:clamp(18px,3.6vw,58px);
  --f:"Archivo",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:#fff;font-family:var(--f);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.wrap{max-width:1500px;margin:0 auto;padding-inline:var(--pad)}
.dsp{font-variation-settings:"wdth" 86;font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9}
.or{color:var(--orange)} .bl{color:var(--blue-hot)}
p{color:#9AA5B1;font-weight:400}

.cta{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:var(--void);
  padding:16px 32px;border-radius:100px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:.3s;white-space:nowrap}
.cta::after{content:"↗";transition:transform .3s}
.cta:hover{background:#fff;transform:translateY(-2px)}
.cta:hover::after{transform:translate(3px,-3px)}
.cta.g{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.cta.g:hover{background:#fff;color:var(--void)}
.cta.d{background:var(--void);color:#fff}
.cta.d:hover{background:var(--orange);color:var(--void)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:90;transition:.35s}
header.stuck{background:rgba(7,12,18,.8);backdrop-filter:blur(18px)}
header .wrap{display:flex;align-items:center;gap:22px;min-height:78px}
header img{height:26px}
header nav{display:flex;gap:26px;margin-left:auto;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#C6CDD5}
header nav a:hover{color:var(--orange)}
@media(max-width:900px){header nav{display:none}}

/* ---------- hero: media led ---------- */
.hero{height:100svh;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:0;background:#070C12}
#hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.06) brightness(.86);
  transform:scale(1.04);animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.13) translate3d(-1.5%,-1%,0)}}
#bg{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.4}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,12,18,.94) 4%,rgba(7,12,18,.42) 46%,rgba(7,12,18,.72) 100%)}
.hero .body{position:relative;z-index:3;padding-bottom:clamp(20px,4vh,40px)}
.hero h1{font-size:clamp(46px,10.6vw,168px);max-width:16ch}
.hero .sub{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;margin-top:26px}
.hero p{max-width:44ch;font-size:15.5px}
.lift{display:block}
@keyframes up{to{opacity:1;transform:none}}

/* rotating claim strip, the Arkan device */
.claim{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.16);background:rgba(7,12,18,.5);
  backdrop-filter:blur(10px);display:flex;align-items:center;gap:18px;padding:20px var(--pad);flex-wrap:wrap}
.claim span{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#8C97A3}
.roll{height:1.16em;overflow:hidden;display:inline-block;vertical-align:bottom}
.roll ul{list-style:none;animation:rollup 9s cubic-bezier(.8,0,.2,1) infinite}
.roll li{font-weight:900;text-transform:uppercase;font-size:clamp(20px,2.9vw,38px);letter-spacing:-.03em;
  line-height:1.16em;height:1.16em;font-variation-settings:"wdth" 86;color:var(--orange)}
@keyframes rollup{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-1.16em)}
  50%,68%{transform:translateY(-2.32em)}75%,93%{transform:translateY(-3.48em)}100%{transform:translateY(-4.64em)}}

/* ---------- statement ---------- */
.state{padding-block:clamp(60px,9vh,120px);background:var(--paper);color:var(--void)}
.state .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.state h2{font-size:clamp(38px,7vw,104px)}
.state p{color:#4E5862;font-size:clamp(14.5px,1.3vw,16.5px);text-transform:uppercase;letter-spacing:.02em;font-weight:600;line-height:1.75}
.state .cta{margin-top:26px}
@media(max-width:900px){.state .wrap{grid-template-columns:1fr}}

/* ---------- service panels ---------- */
.svc{position:relative;min-height:88svh;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;overflow:hidden}
.svc .media{position:relative;overflow:hidden;min-height:46svh;background:#0B141C}
.svc .media .fb{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;padding:24px}
.svc .media .fb .in{position:relative;z-index:2}
.svc .media .fb .g{position:absolute;inset:0}
.svc .media .fb .p{position:absolute;inset:0;opacity:.5}
.svc .media .fb b{display:block;font-weight:900;font-size:clamp(50px,7vw,110px);line-height:.9;letter-spacing:-.05em;color:rgba(255,255,255,.16)}
.svc .media .fb s{display:block;text-decoration:none;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:10px}
.svc .media img.shot{z-index:2}
.svc .media img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.04) brightness(.94) saturate(1.02);transform:scale(1.04);
  transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.svc:hover .media img.shot{transform:scale(1.09)}
.svc .media .edge{position:absolute;inset:0;z-index:3;
  background:linear-gradient(to right,rgba(7,12,18,.55),transparent 30%)}
.svc.alt .media .edge{background:linear-gradient(to left,rgba(7,12,18,.55),transparent 30%)}
.svc .media .tone{position:absolute;inset:0;mix-blend-mode:multiply}
.svc .txt{padding:clamp(34px,6vh,86px) var(--pad);display:flex;flex-direction:column;justify-content:center;gap:16px}
.svc .kick{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--orange)}
.svc h3{font-size:clamp(34px,5.4vw,76px);line-height:.92}
.svc p{max-width:46ch;font-size:15.5px}
.svc .lines{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.svc .lines b{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C6CDD5;
  border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:7px 15px}
.svc .no{position:absolute;top:clamp(22px,4vh,44px);right:var(--pad);font-weight:900;font-size:clamp(58px,9vw,150px);
  line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.09);z-index:4;font-variation-settings:"wdth" 100}
.svc.alt{background:var(--deep)}
.svc.alt .txt{order:-1}
.svc .cta{align-self:flex-start;margin-top:10px}
@media(max-width:900px){.svc{grid-template-columns:1fr;min-height:auto}.svc.alt .txt{order:0}}

/* ---------- proof ---------- */
.proof{padding-block:clamp(46px,7vh,86px);background:var(--void)}
.wall{background:#fff;border-radius:18px;padding:22px 0;overflow:hidden;margin-top:24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.wall .t{display:flex;width:max-content;animation:roll 46s linear infinite}
.wall:hover .t{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-50%)}}
.wall .set{display:flex;align-items:center}
.wall .set div{width:162px;height:48px;display:grid;place-items:center;flex:0 0 auto;padding:0 16px}
.wall img{max-height:100%;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.5;will-change:filter,opacity,transform}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.nums div{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px}
.nums b{display:block;font-weight:900;font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.04em}
.nums span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8C97A3;margin-top:8px;display:block}
@media(max-width:720px){.nums{grid-template-columns:1fr 1fr}}

/* ---------- why ---------- */
.why{padding-block:clamp(56px,9vh,120px);background:var(--orange);color:var(--void);position:relative;overflow:hidden}
.why .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.why h2{font-size:clamp(38px,6.4vw,92px)}
.why p{color:rgba(7,12,18,.8);font-size:clamp(15px,1.5vw,19px);font-weight:500}
.why .cta{margin-top:24px}
@media(max-width:900px){.why .wrap{grid-template-columns:1fr}}


/* ---------- everything animates in and out ---------- */
(function(){
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  const plan = [
    ['.hero h1 .lift',            'up'],
    ['.hero .sub p',              'up'],
    ['.hero .sub .cta',           'sc'],
    ['.claim span',               'lf'],
    ['.claim .roll',              'rt'],
    ['.state h2',                 'lf'],
    ['.state p',                  'rt'],
    ['.state .cta',               'up'],
    ['.svc .media img.shot',      'zoom'],
    ['.svc .no',                  'dn'],
    ['.svc .kick',                'up'],
    ['.svc h3',                   'mask'],
    ['.svc p',                    'up'],
    ['.svc .lines b',             'up'],
    ['.svc .cta',                 'sc'],
    ['.proof h2',                 'mask'],
    ['.wall',                     'sc'],
    ['.nums div',                 'up'],
    ['.why h2',                   'lf'],
    ['.why p',                    'rt'],
    ['.why .cta',                 'up'],
    ['.diag h2',                  'mask'],
    ['.dp',                       'up'],
    ['.opt',                      'up'],
    ['.contact h2',               'mask'],
    ['.contact .acts .cta',       'sc'],
    ['.mark svg',                 'maskr'],
    ['footer span',               'up'],
    ['section > .wrap > p',       'up']
  ];

  const seen = new WeakSet();
  plan.forEach(([sel, variant]) => {
    document.querySelectorAll(sel).forEach(el => {
      if (seen.has(el)) return; seen.add(el);
      el.classList.add('an', variant);
      el.dataset.variant = variant;
    });
  });

  /* stagger by position among siblings that share the same treatment */
  document.querySelectorAll('.an').forEach(el => {
    const sibs = [...el.parentElement.children].filter(c => c.classList.contains('an'));
    el.style.transitionDelay = (Math.min(sibs.indexOf(el), 7) * 80) + 'ms';
  });

  /* in when it enters, back out when it leaves — both directions */
  const io = new IntersectionObserver(entries => {
    entries.forEach(e => {
      const el = e.target;
      if (e.isIntersecting) {
        el.classList.add('go');
      } else {
        el.classList.remove('go');
        /* leaving upward gets the opposite exit, so it never snaps */
        const above = e.boundingClientRect.top < 0;
        if (el.dataset.variant === 'up') el.style.transform = above ? 'translateY(-46px)' : '';
        else el.style.transform = '';
      }
    });
  }, {threshold: .18, rootMargin: '-4% 0px -4% 0px'});

  document.querySelectorAll('.an').forEach(el => io.observe(el));

  /* the hero's own entrance still fires once on load */
  document.querySelectorAll('.hero .an').forEach((el,i) => setTimeout(()=>el.classList.add('go'), 140 + i*130));
})();

/* ---------- diagnostic ---------- */
.diag{padding-block:clamp(50px,8vh,104px);background:var(--deep)}
.diag h2{font-size:clamp(30px,4.6vw,62px)}
.dp{margin-top:26px;border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:clamp(22px,3vw,44px);background:rgba(255,255,255,.03)}
.qbar{display:flex;gap:6px;margin-bottom:26px}
.qbar i{flex:1;height:2px;background:rgba(255,255,255,.14);transition:.5s}
.qbar i.on{background:var(--orange)}
.q{display:none}.q.on{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q h3{font-weight:900;text-transform:uppercase;font-size:clamp(18px,2.4vw,30px);letter-spacing:-.025em}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.opt{text-align:left;padding:18px;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(255,255,255,.03);transition:.24s}
.opt b{display:block;font-size:14.5px;font-weight:700}
.opt span{display:block;font-size:12.5px;color:#8C97A3;margin-top:4px}
.opt:hover{border-color:var(--blue-hot);transform:translateY(-3px)}
.opt[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.opt[aria-pressed="true"] span{color:rgba(255,255,255,.86)}
.dnav{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap}
.dnav .back{font-size:12px;color:#8C97A3;text-decoration:underline}
.res{display:none}.res.on{display:block;animation:fade .5s ease}
.res h3{margin-top:12px;font-size:clamp(20px,3vw,38px);line-height:1.04;max-width:20ch}
.rec{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.rec div{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px}
.rec b{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hot)}
.rec span{display:block;font-size:14.5px;font-weight:700;margin-top:6px}
@media(max-width:900px){.opts,.rec{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.opts,.rec{grid-template-columns:1fr}}

/* ---------- contact + big wordmark ---------- */
.contact{padding-block:clamp(56px,9vh,120px) 0;background:var(--void);text-align:center}
.contact h2{font-size:clamp(36px,7.4vw,110px)}
.contact .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.mark{width:100%;overflow:hidden;line-height:0;margin-top:clamp(30px,6vh,70px)}
.mark svg{width:100%;height:auto;display:block}
footer{background:var(--void);padding:26px var(--pad);display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;align-items:center;color:#5F6B77;font-size:12px;border-top:1px solid rgba(255,255,255,.1)}


/* ================= enter / exit animation system ================= */
.an{will-change:transform,opacity,clip-path;transition:
  opacity .75s cubic-bezier(.16,.85,.24,1),
  transform .85s cubic-bezier(.16,.85,.24,1),
  clip-path .95s cubic-bezier(.16,.85,.24,1),
  filter .8s ease}
/* resting (out of view) states */
.an.up{opacity:0;transform:translateY(46px)}
.an.dn{opacity:0;transform:translateY(-34px)}
.an.lf{opacity:0;transform:translateX(-52px)}
.an.rt{opacity:0;transform:translateX(52px)}
.an.sc{opacity:0;transform:scale(.94)}
.an.mask{clip-path:inset(0 0 100% 0)}
.an.maskr{clip-path:inset(0 100% 0 0)}
.an.zoom{opacity:0;transform:scale(1.14);filter:blur(6px)}
/* active state */
.an.go{opacity:1;transform:none;clip-path:inset(0 0 0 0);filter:none}
@media(prefers-reduced-motion:reduce){.an{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none}}


/* ============ scroll-driven motion, pure CSS, no JavaScript ============ */
@keyframes inout{
  0%   {opacity:0;transform:translateY(52px) scale(.985)}
  14%  {opacity:1;transform:none}
  86%  {opacity:1;transform:none}
  100% {opacity:0;transform:translateY(-44px) scale(.985)}
}
@keyframes inoutL{
  0%{opacity:0;transform:translateX(-58px)}14%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-40px)}
}
@keyframes inoutR{
  0%{opacity:0;transform:translateX(58px)}14%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateX(40px)}
}
@keyframes inoutMask{
  0%{clip-path:inset(0 0 100% 0);opacity:0}16%,86%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(100% 0 0 0);opacity:0}
}
@keyframes inoutZoom{
  0%{opacity:0;transform:scale(1.16);filter:blur(7px)}
  18%,84%{opacity:1;transform:scale(1.02);filter:blur(0)}
  100%{opacity:.25;transform:scale(1.1);filter:blur(3px)}
}
@keyframes inoutPop{
  0%{opacity:0;transform:scale(.9)}16%,86%{opacity:1;transform:none}100%{opacity:0;transform:scale(.94)}
}

@supports (animation-timeline: view()){
  .state h2,.why h2{animation:inoutL linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .state p,.state .cta,.why p,.why .cta{animation:inoutR linear both;animation-timeline:view();animation-range:cover 0% cover 100%}

  .svc .media img.shot{animation:inoutZoom linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .svc .no{animation:inoutPop linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .svc .kick,.svc p,.svc .lines,.svc .cta{animation:inout linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .svc h3{animation:inoutMask linear both;animation-timeline:view();animation-range:cover 0% cover 100%}

  .proof h2,.diag h2,.contact h2{animation:inoutMask linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .wall{animation:inoutPop linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .nums div,.dp,.contact .acts,.mark svg,footer span{animation:inout linear both;animation-timeline:view();animation-range:cover 0% cover 100%}

  /* the four number tiles ripple rather than land together */
  .nums div:nth-child(1){animation-range:cover 2% cover 100%}
  .nums div:nth-child(2){animation-range:cover 5% cover 100%}
  .nums div:nth-child(3){animation-range:cover 8% cover 100%}
  .nums div:nth-child(4){animation-range:cover 11% cover 100%}

  /* the wide statement band */
  .band-copy{animation:inoutMask linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}

.rev{opacity:1;transform:none}
.js .rev{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,.85,.24,1),transform .8s cubic-bezier(.16,.85,.24,1)}
.js .rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rev,.lift{opacity:1;transform:none}}


/* ================= scroll choreography (driven by JS, works everywhere) ================= */
#rail{position:fixed;left:0;top:0;width:3px;height:100vh;z-index:98;background:rgba(255,255,255,.06)}
#railfill{width:100%;height:0;background:linear-gradient(180deg,var(--orange),var(--blue))}
[dir="rtl"] #rail{left:auto;right:0}

/* panels scroll normally; the motion below does the work.
   Pinning was tried and removed: it collapsed the layout at both sizes. */
.svc{position:relative}
@media(max-width:900px){ .svc .media{min-height:46svh} .svc .txt{padding-block:clamp(30px,7vh,60px)} }

.js-anim{will-change:transform,opacity}
@media (prefers-reduced-motion: reduce){
  .svc{position:static;min-height:auto}
  #rail{display:none}
  .js-anim{opacity:1!important;transform:none!important}
}