/* ══════════════════════════════════════════════════════════════
   UPTIQ MEDIA
   ══════════════════════════════════════════════════════════════ */

:root{
  --white:#FFFFFF;
  --wash:#F7F8FC;
  --ink:#191F45;
  --body:#5C6484;
  --line:#E5E7F2;
  --line-2:#EFF1F9;

  /* The palette is the logo: its teal, its indigo, and the ramp between them.
     Nothing else. Only the hero arc keeps the old rainbow, deliberately. */
  --teal:#0FB9B1;      /* the logo's teal — 2.4:1 on white, so DECORATIVE ONLY */
  --teal-d:#0A8079;    /* text-safe teal            4.8:1 */
  --petrol:#146C7B;    /* teal/indigo midpoint      6.1:1 */
  --deep:#174660;      /* three quarters to indigo 10.1:1 */

  /* Decorative fills — no text ever sits on these. */
  --grad:linear-gradient(96deg,#0FB9B1 0%,#146C7B 52%,#191F45 100%);
  /* Primary buttons: the logo's own pairing, ink on teal (5.3:1 at the dark end). */
  --grad-cta:linear-gradient(96deg,#14C6BD 0%,#0FB9B1 52%,#0EA79F 100%);
  /* Large display text only — the lightest stop is 3.7:1, fine at H1 size. */
  --grad-text:linear-gradient(96deg,#0C948E 0%,#096F6A 100%);

  --f:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pad:clamp(20px,4.6vw,72px);
  --max:1280px;
  --e:cubic-bezier(.22,1,.36,1);
  --shadow:0 26px 60px -22px rgba(25,31,69,.24), 0 6px 18px -8px rgba(25,31,69,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--f);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.lb-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
p{margin:0}
input{font:inherit}
/* Any element setting `display` beats the hidden attribute. Enforce it globally. */
[hidden]{display:none!important}
::selection{background:rgba(15,185,177,.20)}
.btn:focus-visible,.ch:focus-visible,.card:focus-visible,.linkish:focus-visible,
.finder__clear:focus-visible,.finder__reset:focus-visible{outline:2px solid var(--teal-d);outline-offset:3px;border-radius:16px}

.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.stars{color:#FFB020;letter-spacing:.08em;font-size:13px}
.linkish{color:var(--teal-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:100px;font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:transform .3s var(--e),box-shadow .3s var(--e),background-position .5s var(--e);white-space:nowrap;
}
.btn i{font-style:normal;transition:transform .35s var(--e)}
.btn:hover i{transform:translateX(4px)}
.btn--grad{background:var(--grad-cta);background-size:180% 100%;color:var(--ink);box-shadow:0 12px 26px -10px rgba(15,185,177,.55)}
.btn--grad:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(15,185,177,.62)}
.btn--plain{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn--plain:hover{border-color:#C9D3E0;transform:translateY(-2px)}
.btn--lg{padding:17px 32px;font-size:16px}

/* ═══ NAV ═══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:15px var(--pad);background:rgba(255,255,255,.78);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .35s,box-shadow .35s,transform .45s var(--e);
}
.nav.is-stuck{border-bottom-color:var(--line-2);box-shadow:0 6px 22px -18px rgba(25,31,69,.5)}
.nav.is-up{transform:translateY(-102%)}
.nav__logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;letter-spacing:-.035em}
.nav__logo b{font-weight:400;opacity:.5}
.nav__logo img{height:30px;width:auto;display:block}
.foot__top .nav__logo img{height:34px}
.nav__links{display:flex;gap:30px}
.nav__links a{font-size:15px;font-weight:500;color:var(--body);transition:color .3s}
.nav__links a:hover{color:var(--ink)}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__burger{display:none;width:26px;height:16px;position:relative}
.nav__burger i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--ink);transition:.35s var(--e)}
.nav__burger i:nth-child(1){top:0}.nav__burger i:nth-child(2){top:7px}.nav__burger i:nth-child(3){top:14px}
.nav__burger.is-on i:nth-child(1){top:7px;transform:rotate(45deg)}
.nav__burger.is-on i:nth-child(2){opacity:0}
.nav__burger.is-on i:nth-child(3){top:7px;transform:rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:590;background:var(--white);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--e);
}
.sheet.is-on{clip-path:inset(0 0 0 0)}
.sheet a{font-size:clamp(28px,7vw,46px);font-weight:700;letter-spacing:-.04em;padding:12px 0;border-bottom:1px solid var(--line-2)}

/* ═══ THE SPINE ═══
   One line for the whole page. app.js sizes this svg over <main>, computes the
   path from the real section positions, and scrubs the draw with scroll.
   It paints above section backgrounds but below content (content carries
   z-index in each section), so it lives in the whitespace. */
main{position:relative}
.spine{
  position:absolute;top:0;left:0;width:100%;z-index:2;pointer-events:none;
  overflow:visible;
}
#spineGlow{opacity:.14}
#spinePath{opacity:.95}
#spineHead circle{transform-box:fill-box;transform-origin:center}
#spineHead circle:first-child{animation:halo 2.4s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.stn circle{transition:fill .4s var(--e)}
.stn .stn__core{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .45s var(--e)}
.stn.is-on .stn__core{transform:scale(1)}
#spinePulse{transform-origin:center;transform-box:fill-box;animation:pulse 2.2s var(--e) infinite}
@keyframes pulse{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}

/* ═══ HERO ═══
   No horizontal padding on the section itself — the arc and the cards riding
   it have to run edge to edge. Padding lives on .hero__inner instead.
   The arc svg fills the section; app.js writes a viewBox matched 1:1 to its
   pixel size and generates the path from it, so the curve crosses both screen
   edges at every viewport width. */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(120px,16vh,170px) 0 clamp(150px,22vh,260px);
  overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#FBFCFE 0%,#FFFFFF 62%);
}
.hero__glow{
  position:absolute;top:-28%;left:50%;transform:translateX(-50%);
  width:min(1500px,150vw);height:min(1000px,110vh);pointer-events:none;
  background:
    radial-gradient(38% 44% at 26% 42%,rgba(15,185,177,.17),transparent 70%),
    radial-gradient(34% 40% at 74% 38%,rgba(20,108,123,.15),transparent 70%),
    radial-gradient(30% 34% at 50% 68%,rgba(15,185,177,.14),transparent 70%);
  filter:blur(12px);
}
.hero__arc{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.92;
}
.hero__arc path{filter:drop-shadow(0 14px 34px rgba(25,31,69,.20))}

/* Soft white core so cards travelling the arc dim behind the copy
   instead of colliding with it. */
.hero::after{
  content:'';position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  width:min(1180px,96vw);height:min(660px,74vh);z-index:3;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.94) 0%,rgba(255,255,255,.80) 52%,rgba(255,255,255,0) 100%);
}

.hero__inner{position:relative;z-index:5;max-width:940px;width:100%;padding-inline:var(--pad)}
.pill{
  display:inline-flex;align-items:center;gap:9px;padding:8px 17px 8px 13px;border-radius:100px;
  background:var(--white);border:1px solid var(--line);box-shadow:0 4px 14px -8px rgba(25,31,69,.24);
  font-size:13.5px;font-weight:600;color:var(--body);margin-bottom:26px;
}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(15,185,177,.16)}
.hero__h1{font-size:clamp(38px,6.2vw,80px);line-height:1.04;letter-spacing:-.042em;font-weight:800;margin-bottom:22px}
.swap{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap;text-align:center}
.swap__w{display:inline-block;padding-bottom:.06em;margin-bottom:-.06em}
.hero__sub{font-size:clamp(16px,1.35vw,20px);color:var(--body);max-width:50ch;margin:0 auto 34px;line-height:1.55;text-wrap:balance}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.hero__trust{font-size:14px;color:var(--body);display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.hero__trust b{color:var(--ink);font-weight:700}

/* cards riding the arc */
.floats{position:absolute;inset:0;z-index:2;pointer-events:none}
.float{
  position:absolute;width:var(--w);border-radius:13px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow);border:1px solid rgba(25,31,69,.07);opacity:0;will-change:transform,opacity;
}
.float__bar{height:19px;background:#F3F5F9;display:flex;align-items:center;gap:4px;padding:0 8px;border-bottom:1px solid #E9EDF3}
.float__bar i{width:5px;height:5px;border-radius:50%;background:#D2D9E3}
.float img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.chip{
  position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px;
  background:#fff;box-shadow:var(--shadow);border:1px solid rgba(25,31,69,.06);
  font-size:13px;font-weight:600;white-space:nowrap;opacity:0;will-change:transform,opacity;
}
.chip small{font-weight:500;color:var(--body);font-size:12px}
.chip__ic{width:22px;height:22px;border-radius:50%;background:var(--grad);flex:none}

/* ═══ STRIP ═══ */
.strip{
  border-block:1px solid var(--line-2);background:var(--wash);overflow:hidden;padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.strip__row{display:flex;white-space:nowrap;will-change:transform;position:relative;z-index:3}
.strip__row span{display:inline-flex;align-items:center;gap:clamp(16px,2.4vw,40px);padding-right:clamp(16px,2.4vw,40px);font-size:15px;font-weight:600;color:#93A0B4}
.strip__row i{width:4px;height:4px;border-radius:50%;background:#C7D0DC;flex:none}

/* ═══ HEADS ═══
   Each section borrows one stop of the brand gradient as its accent — the same
   colour the spine carries as it passes. Kickers are solid accent, not rainbow. */
.head{max-width:var(--max);margin:0 auto;padding:clamp(60px,9vh,120px) var(--pad) clamp(24px,3.6vh,40px);position:relative;z-index:3}
.head--center{text-align:center}
.head--center p{margin-inline:auto}
.kicker{
  display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;color:var(--acc,var(--teal-d));
}
.kicker::before,.kicker::after{content:'';width:22px;height:2px;border-radius:2px;background:var(--acc,var(--teal-d));opacity:.45}
.head h2{font-size:clamp(28px,4.2vw,56px);letter-spacing:-.04em;font-weight:800}
.head p{margin-top:14px;color:var(--body);max-width:52ch;font-size:17px}

.browse{--acc:var(--teal-d)}
.nums{--acc:var(--petrol)}
.how{--acc:var(--deep)}
.proof{--acc:var(--ink)}

/* ═══ FINDER ═══ */
.browse{background:var(--white);padding-bottom:clamp(56px,8vh,100px)}
.finder{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative;z-index:3}
.finder__search{position:relative;display:flex;align-items:center;max-width:560px;margin:0 auto 22px}
.finder__search svg{
  position:absolute;left:18px;width:19px;height:19px;fill:none;stroke:#98A3B6;stroke-width:2;
  stroke-linecap:round;pointer-events:none;
}
.finder__search input{
  width:100%;padding:15px 44px 15px 46px;border-radius:100px;border:1px solid var(--line);
  background:var(--white);font-size:15.5px;color:var(--ink);outline:none;
  transition:border-color .3s,box-shadow .3s;
}
.finder__search input::placeholder{color:#98A3B6}
.finder__search input:focus{border-color:var(--teal-d);box-shadow:0 0 0 4px rgba(15,185,177,.18)}
.finder__search input::-webkit-search-cancel-button{display:none}
.finder__clear{
  position:absolute;right:14px;width:26px;height:26px;border-radius:50%;background:var(--line-2);
  color:var(--body);font-size:12px;display:grid;place-items:center;transition:.25s;
}
.finder__clear:hover{background:var(--line);color:var(--ink)}

/* one swipeable line of filters — no wrap, no counts */
.finder__chips{
  display:flex;flex-wrap:nowrap;gap:8px;
  overflow-x:auto;padding:4px 6px 10px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.finder__chips::-webkit-scrollbar{display:none}
/* centred when the row fits, left-anchored scroll when it overflows */
.finder__chips .ch:first-child{margin-left:auto}
.finder__chips .ch:last-child{margin-right:auto}
.ch{
  padding:10px 18px;border-radius:100px;background:var(--white);border:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--body);display:inline-flex;align-items:center;
  transition:border-color .28s var(--e),color .28s var(--e),background .28s var(--e),transform .28s var(--e);
  white-space:nowrap;flex:none;
}
.ch:hover{border-color:#C9D3E0;color:var(--ink);transform:translateY(-1px)}
.ch.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.finder__count{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0 6px;font-size:14px;color:var(--body);min-height:24px}
.finder__reset{color:var(--teal-d);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px}

/* ═══ THE WORK — THE LAPTOP STAGE ═══════════════════════════════════════
   One laptop, fixed centre stage. It never moves, scales or animates: the
   screens are the only things that travel. The site to the right slides into
   the lid and becomes the live one; the site that was in the lid slides out
   the other side.

   The lid is drawn TWICE for that to read properly. .laptop--back paints the
   body BEHIND the screens; .laptop--front paints the same bezel again with its
   middle masked out, so a screen crossing the laptop slips UNDER the frame
   edge instead of over it. Without the front copy the screens either sail
   across the bezel (wrong) or vanish behind the whole lid mid-move, which
   reads as the screen switching off. Nothing here may animate. */
.grid{
  --screen-w:min(46vw,600px);
  max-width:var(--max);margin:26px auto 0;padding:0 var(--pad);
  display:block;position:relative;z-index:3;
}
/* perspective lives here, and there is deliberately NO preserve-3d: the screens
   must stack by z-index (behind the well, under the frame), not by 3D depth. */
.stage__view{position:relative;height:min(70vh,560px);perspective:1600px;perspective-origin:50% 50%}

/* ── the laptop ─────────────────────────────────────────────────────── */
.laptop{position:absolute;inset:0;margin:auto;width:var(--screen-w);height:max-content;pointer-events:none}
.laptop--back{z-index:3}
.laptop--front{z-index:6}
.laptop__lid{
  position:relative;padding:13px 13px 15px;border-radius:15px 15px 7px 7px;
  background:linear-gradient(165deg,#39415F 0%,#232B47 42%,#161C33 100%);
}
.laptop--back .laptop__lid{box-shadow:0 44px 90px -34px rgba(25,31,69,.62)}
.laptop--front .laptop__lid{
  box-shadow:0 3px 0 rgba(255,255,255,.10) inset;
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  -webkit-mask-clip:content-box,border-box;
  -webkit-mask-composite:xor;
  mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  mask-clip:content-box,border-box;
  mask-composite:exclude;
}
.laptop__well{aspect-ratio:16/10;border-radius:6px;background:#0A0F1E}
.laptop--front .laptop__well{background:none}
.laptop__cam{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:#5C678C;
}
.laptop__base{
  position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);
  width:113%;height:15px;border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,#C6CEDE 0%,#9BA6C0 55%,#727D9B 100%);
  box-shadow:0 20px 34px -18px rgba(25,31,69,.55);
  clip-path:polygon(0 0,100% 0,97.5% 100%,2.5% 100%);
}
/* if masks are unavailable the frame would be a solid slab over the screen —
   drop it and let the screens travel over the bezel instead */
.laptop--front{display:none}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .laptop--front{display:block}
}

/* ── the screens: the only things that move ─────────────────────────── */
.card{
  position:absolute;inset:0;margin:auto;height:max-content;width:var(--screen-w);
  padding:0;border:0;background:none;text-align:left;
  will-change:transform,opacity;
}
.card.is-out{display:none}
.card__shot{
  /* the live screen lands exactly in the well, so it carries the lid's padding */
  display:block;margin:13px 13px 15px;border-radius:6px;overflow:hidden;
  aspect-ratio:16/10;background:#0A0F1E;box-shadow:0 24px 54px -26px rgba(25,31,69,.45);
}
.card.is-live{cursor:zoom-in}
.card.is-live .card__shot{box-shadow:none}
.card__shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}

/* ── arrows: inside the view, so they sit on the laptop's centre line ── */
.stage__arrow{
  position:absolute;top:50%;z-index:8;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);color:var(--ink);
  font-size:19px;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 14px 30px -14px rgba(25,31,69,.4);
  transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e);
}
.stage__arrow:hover{transform:translateY(-50%) scale(1.09);border-color:var(--teal);
  box-shadow:0 18px 38px -14px rgba(15,185,177,.5)}
.stage__arrow:active{transform:translateY(-50%) scale(.96)}
.stage__arrow--prev{left:0}
.stage__arrow--next{right:0}

/* ── caption + position. No counts: a filling hairline, never "3 of 45" ── */
.stage__foot{display:flex;flex-direction:column;align-items:center;gap:13px;margin-top:42px;text-align:center}
.stage__name{font-size:clamp(19px,2.3vw,26px);font-weight:800;letter-spacing:-.03em}
.stage__sector{font-size:15px;color:var(--body);margin-top:3px}
.stage__hint{font-size:13px;color:#93A0B4}
.stage__rail{width:min(340px,52vw);height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.stage__rail i{display:block;height:100%;width:0;background:var(--grad);transition:width .55s var(--e)}

.empty{max-width:560px;margin:0 auto;padding:40px var(--pad) 20px;text-align:center;color:var(--body);position:relative;z-index:3}
.empty b{color:var(--ink);font-size:18px}
.empty p+p{margin-top:8px}

/* ═══ NUMBERS ═══ */
.nums{padding:clamp(46px,7vh,80px) var(--pad);background:var(--wash);border-block:1px solid var(--line-2)}
.nums__wrap{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;z-index:3}
.num{text-align:center}
.num b{display:block;font-size:clamp(32px,4.2vw,56px);font-weight:800;letter-spacing:-.05em;line-height:1}
.num span{display:block;margin-top:8px;font-size:14px;color:var(--body);font-weight:500}

/* ═══ STEPS ═══ */
.how{background:var(--white)}
.steps{max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(56px,8vh,100px);display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:3}
.step{padding:26px;border-radius:16px;background:var(--wash);border:1px solid var(--line-2);transition:transform .4s var(--e),box-shadow .4s var(--e)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step__n{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;margin-bottom:14px;color:var(--deep)}
.step h3{font-size:19px;letter-spacing:-.03em;margin-bottom:9px}
.step p{color:var(--body);font-size:15px}

/* ═══ PROOF ═══ */
.proof{background:var(--wash);border-top:1px solid var(--line-2)}
.cards{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:3}
.quote{margin:0;background:var(--white);border:1px solid var(--line-2);border-radius:16px;padding:26px}
.quote p{margin:14px 0 18px;font-size:16.5px;color:var(--ink);line-height:1.5;letter-spacing:-.015em}
.quote cite{font-style:normal;font-size:13.5px;color:var(--body);font-weight:500}
.verify__row{display:flex;justify-content:center;padding:26px var(--pad) clamp(56px,8vh,100px);position:relative;z-index:3}
.verify{
  display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:100px;
  background:var(--white);border:1px solid var(--line);box-shadow:0 6px 18px -10px rgba(25,31,69,.2);
  font-size:14px;font-weight:600;color:var(--body);transition:transform .3s var(--e),box-shadow .3s var(--e);
}
.verify b{color:var(--ink)}
.verify i{font-style:normal;transition:transform .3s var(--e)}
.verify:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}
.verify:hover i{transform:translate(2px,-2px)}
.verify__sep{width:4px;height:4px;border-radius:50%;background:#C7D0DC}

/* ═══ START ═══
   Light finale — the spine arrives from above and ends in a pulse right over
   the heading; the brand colours sit in soft washes behind it. */
.start{position:relative;background:var(--white);color:var(--ink);overflow:hidden;text-align:center;padding:clamp(96px,14vh,170px) var(--pad) clamp(72px,11vh,140px);border-top:1px solid var(--line-2)}
.start__glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(34% 46% at 20% 12%,rgba(15,185,177,.15),transparent 70%),
    radial-gradient(30% 42% at 80% 16%,rgba(20,108,123,.13),transparent 70%),
    radial-gradient(36% 46% at 30% 92%,rgba(15,185,177,.12),transparent 70%),
    radial-gradient(30% 40% at 76% 88%,rgba(25,31,69,.10),transparent 70%);
}
.start__inner{position:relative;z-index:3;max-width:760px;margin:0 auto}
.start h2{font-size:clamp(34px,5.6vw,72px);letter-spacing:-.045em;font-weight:800}
.start p{margin:18px auto 32px;color:var(--body);max-width:46ch;font-size:17px}
.start__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.start__meta{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:30px;font-size:14px;color:#93A0B4}

/* ═══ FOOT ═══ */
.foot{max-width:var(--max);margin:0 auto;padding:clamp(38px,6vh,64px) var(--pad) 28px}
.foot__top{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line-2)}
.foot__links{display:flex;gap:26px;flex-wrap:wrap}
.foot__links a{font-size:15px;color:var(--body)}
.foot__links a:hover{color:var(--ink)}
.foot__bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:20px;font-size:13.5px;color:#93A0B4}

/* ═══ THE PROJECTION ═══
   Click the live screen and the site lifts out of the lid and grows, showing
   the whole design rather than the fold, with a way through to the live site. */
.proj{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.proj[hidden]{display:none!important}  /* the hidden attribute loses to display:grid without this */
.proj__bg{position:absolute;inset:0;border:0;padding:0;cursor:zoom-out;
  background:rgba(25,31,69,.62);backdrop-filter:blur(7px)}
.proj__box{
  position:relative;z-index:2;width:min(1080px,94vw);max-height:92svh;
  display:flex;flex-direction:column;background:var(--white);
  border-radius:18px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(25,31,69,.6);
}
.proj__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;background:var(--wash)}
.proj__scroll img{width:100%;display:block}
.proj__bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:15px clamp(16px,2.4vw,26px);border-top:1px solid var(--line);background:var(--white)}
.proj__txt{flex:1;min-width:180px;text-align:left}
.proj__ind{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d)}
.proj__name{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.proj__x{
  position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(25,31,69,.55);color:#fff;font-size:16px;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(4px);transition:.25s;
}
.proj__x:hover{background:rgba(25,31,69,.85);transform:rotate(90deg)}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1040px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .nums__wrap{grid-template-columns:repeat(2,1fr);gap:34px 22px}
}
@media (max-width:900px){
  .grid{--screen-w:min(72vw,470px)}
  .stage__view{height:min(56vh,420px)}
  .stage__arrow{width:46px;height:46px;font-size:17px}
}
@media (max-width:860px){
  .nav__links,.nav__right{display:none}
  .nav__burger{display:block}
  .float{display:none}         /* site cards would crowd a phone — chips still ride */
  .hero__arc{opacity:.7}
  .spine{opacity:.42}
}
@media (max-width:600px){
  .grid{--screen-w:78vw}
  .stage__view{height:min(52vh,360px)}
  .steps{grid-template-columns:1fr}
  .hero__cta .btn,.start__cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .float,.chip{opacity:1!important}
  .stage__arrow,.stage__rail i{transition:none}
  #spinePulse{animation:none}
}

/* ══════════ THE FULL LIST ══════════
   The same work the laptop stage shows, as plain HTML — the stage is one <img>
   per project, so without this there is no portfolio text on the page at all.
   Deliberately typographic rather than another card wall: it is a reference
   list, and it sits directly under a section that is already doing the showing.
   Accent stays teal-d because this is the same chapter as .browse, not a new one. */
.worklist{--acc:var(--teal-d);padding:clamp(46px,7vh,84px) var(--pad);background:var(--white)}
.worklist .head{margin-bottom:clamp(26px,4vh,44px)}
.worklist__group{max-width:var(--max);margin:0 auto;position:relative;z-index:3}
.worklist__group + .worklist__group{margin-top:clamp(26px,3.4vh,40px)}
.worklist__ind{
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc);margin:0 0 6px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.worklist__list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,48px)}
.worklist__row{
  display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:14px;
  padding:11px 2px;border-bottom:1px solid var(--line-2);
  text-decoration:none;color:var(--ink);
}
.worklist__row:hover{color:var(--teal-d)}
.worklist__row:focus-visible{outline:2px solid var(--teal-d);outline-offset:3px;border-radius:3px}
.worklist__name{font-weight:600;font-size:15.5px;letter-spacing:-.012em}
.worklist__sector{font-size:13.5px;color:var(--body);text-align:right}
.worklist__go{font-size:13px;color:var(--body);opacity:0;transition:opacity .25s var(--e)}
.worklist__row:hover .worklist__go,
.worklist__row:focus-visible .worklist__go{opacity:1;color:var(--teal-d)}

@media (max-width:820px){
  .worklist__list{grid-template-columns:1fr}
  .worklist__row{grid-template-columns:1fr auto;gap:10px}
  .worklist__sector{grid-column:1;text-align:left;font-size:12.5px}
  .worklist__go{grid-row:1;grid-column:2;opacity:1}
}