/* ===================== TOKENS ===================== */
:root {
  --red: #f15c4d;
  --blue: #4b4fe6;
  --purple: #8e33e0;
  --ink: #0e0e12;
  --muted: #6c6c77;
  --line: #ededf1;
  --bg: #ffffff;
  --card-red: #f2766e;
  --card-blue: #4f57e8;
  --card-purple: #9a3fe4;
  --footer-from: #36176e;
  --footer-to: #8e2aa6;
  --maxw: 1180px;
  --pad: 40px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* full-page light dotted texture (cursor-reactive, sits behind all content) */
.bg-dots { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
html { scroll-behavior: smooth; }
body {
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--ink); background: var(--bg);
  line-height: 1.5; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { line-height: 1.02; letter-spacing: -0.02em; font-weight: 700; }
a { text-decoration: none; color: inherit; }
section { padding-left: var(--pad); padding-right: var(--pad); }

/* ===================== DOTS / HELPERS ===================== */
.dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; }
.d-red { background: var(--red); } .d-blue { background: var(--blue); } .d-purple { background: var(--purple); }
.fill-red { fill: var(--red); } .fill-blue { fill: var(--blue); } .fill-purple { fill: var(--purple); }
.bullet { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-left: 4px; vertical-align: middle; }

.dashed-dot { width: 64px; height: 64px; border: 1.5px dashed #c9c9d3; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.dashed-dot span { width: 38px; height: 38px; border-radius: 50%; }
.dashed-dot.lg { width: 78px; height: 78px; }
.dashed-dot.lg span { width: 48px; height: 48px; }

/* ===================== BUTTONS ===================== */
.btn-pill { display: inline-block; padding: 14px 30px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform .18s, box-shadow .18s, background .18s, color .18s; }
.btn-pill:hover { transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.btn-swap .swap { display: inline-grid; overflow: hidden; vertical-align: middle; }
.btn-swap .swap > span { grid-area: 1 / 1; transition: transform .42s cubic-bezier(.34, .82, .24, 1); }
.btn-swap .swap > span:nth-child(2) { transform: translateY(115%); }
.btn-swap:hover .swap > span:nth-child(1) { transform: translateY(-115%); }
.btn-swap:hover .swap > span:nth-child(2) { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn-swap .swap > span { transition: none; } }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { box-shadow: 0 12px 34px rgba(0,0,0,.28); }

/* ===================== NAVBAR ===================== */
.nav-wrap { position: sticky; top: 0; z-index: 60; display: flex; justify-content: center; padding: 18px var(--pad); pointer-events: none; }
.nav { pointer-events: auto; width: 100%; max-width: var(--maxw); display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; padding: 6px 12px 6px 22px; background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,.55); border-radius: 999px; box-shadow: 0 8px 32px rgba(20,20,40,.12), inset 0 1px 0 rgba(255,255,255,.6); }
.nav-end { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nav-right .btn-pill { padding: 9px 22px; font-size: 14px; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; }
.logo-mark { width: 52px; height: 52px; border-radius: 50%; background: url("Logo.png") center / contain no-repeat; }
.nav-logo .logo-mark { margin: -6px 0; }
.nav-brand { display: flex; flex-direction: column; line-height: 1.12; }
.nav-brand strong { font-size: 17px; font-weight: 700; }
.nav-brand small { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--ink); display: grid; place-items: center; padding: 6px; }
.nav-links { display: flex; gap: 26px; list-style: none; font-weight: 500; font-size: 15px; }
.nav-links a { display: inline-flex; align-items: center; }
.nav-links a:hover { color: var(--red); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.theme-toggle { background: none; border: none; cursor: pointer; color: var(--ink); display: grid; place-items: center; padding: 6px; }
.theme-toggle svg { stroke: var(--ink); fill: none; stroke-width: 1.6; }
.theme-toggle circle { fill: none; }

/* ===================== HERO ===================== */
.hero { max-width: var(--maxw); margin: 0 auto; padding-top: 24px; padding-bottom: 20px; }

/* process / value strip */
.process-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 8px 0 26px; border-bottom: 1px solid var(--line); }
.proc { display: flex; gap: 12px; align-items: flex-start; }
.proc-num { font-size: 13px; font-weight: 600; color: var(--purple); letter-spacing: 0.04em; }
.proc-text h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.proc-text p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* main split */
.hero-main { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; min-height: 58vh; padding-top: 28px; }
.hero-art { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; justify-self: start; animation: virgoFloat 6s ease-in-out infinite; }
.virgo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.virgo-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: auto; opacity: 0; mix-blend-mode: multiply; }
@keyframes virgoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-art { animation: none; }
  .virgo-img { opacity: 1; }
  .virgo-canvas { display: none; }
}
.virgo-art { overflow: visible; }
.bg-stars circle { fill: #a9a9b8; }

.eyebrow { color: var(--purple); font-weight: 600; font-size: 16px; letter-spacing: 0; margin-bottom: 14px; }
.hero-title { font-size: clamp(30px, 4vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.accent-dot { color: var(--purple); }
.hero-sub { margin-top: 22px; font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 520px; line-height: 1.6; }
.hero-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta .btn-pill { padding: 11px 24px; font-size: 14px; }

.scroll-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.scroll-arrow { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ===================== WORKED WITH ===================== */
.ticker-row { max-width: var(--maxw); margin: 24px auto 0; display: flex; align-items: center; gap: 28px; padding: 20px var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.ticker-label { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ticker-viewport { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker-track { display: flex; width: max-content; animation: tickerScroll 34s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-track span { font-weight: 600; font-size: 16px; color: #9a9aa6; white-space: nowrap; padding-right: 52px; position: relative; transition: color .2s; }
.ticker-track span::after { content: "•"; position: absolute; right: 22px; color: #cfcfd8; }
.ticker-track span:hover { color: var(--ink); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ===================== STATEMENT ===================== */
.statement { max-width: var(--maxw); margin: 130px auto; position: relative; text-align: center; }
.statement p { font-weight: 700; font-size: clamp(24px, 3.4vw, 42px); line-height: 1.25; letter-spacing: -0.02em; max-width: 900px; margin: 0 auto; }
.statement em { font-style: normal; color: var(--red); }
.float-dot { position: absolute; width: 44px; height: 44px; border-radius: 50%; z-index: -1; opacity: .9; }
.statement .float-dot:nth-child(1) { top: -30px; left: 4%; animation: floaty 6s ease-in-out infinite; }
.statement .float-dot:nth-child(2) { top: 30%; right: 16%; animation: floaty 7s ease-in-out infinite .5s; }
.statement .float-dot:nth-child(3) { bottom: -20px; left: 32%; animation: floaty 5.5s ease-in-out infinite 1s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* ===================== TRIO ANIMATION (red + blue → purple) ===================== */
.trio2 { margin: 110px auto 30px; padding: 0 var(--pad); display: flex; justify-content: center; overflow: hidden; }
.trio2-stage { position: relative; width: 920px; max-width: 100%; height: 200px; }
.trio2-line { position: absolute; top: 50%; left: 106px; right: 106px; height: 1.5px; background: var(--ink); transform: translateY(-50%) scaleX(0); transform-origin: center; }
.trio2.play .trio2-line { animation: t2line .6s ease .5s forwards; }
@keyframes t2line { to { transform: translateY(-50%) scaleX(1); } }

.t2-circle { position: absolute; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--bg); overflow: hidden; transform: scale(0); box-shadow: -7px 7px 0 -1px var(--ink); }
.t2-left { left: 60px; }
.t2-right { left: 860px; }
.t2-center { left: 460px; width: 122px; height: 122px; margin: -61px 0 0 -61px; z-index: 2; }
.trio2.play .t2-left { animation: t2pop .5s cubic-bezier(.34,1.56,.64,1) forwards; }       /* appears as the red orb lands */
.trio2.play .t2-right { animation: t2pop .5s cubic-bezier(.34,1.56,.64,1) .12s forwards; } /* appears as the blue orb lands */
.trio2.play .t2-center { animation: t2pop .55s cubic-bezier(.34,1.56,.64,1) .55s forwards; }
@keyframes t2pop { to { transform: scale(1); } }

.t2-fill { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; transform: translate(-50%,-50%) scale(0); }
.t2-fill.red { background: var(--red); } .t2-fill.blue { background: var(--blue); } .t2-fill.purple { background: var(--purple); }
.t2-left .t2-fill, .t2-right .t2-fill { transform: translate(-50%,-50%) scale(.62); }   /* arrive already filled */
@keyframes t2fill { to { transform: translate(-50%,-50%) scale(.62); } }

/* center liquid waves — animated SVG sea waves (red front/short, blue taller, purple tallest) */
.t2w { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateY(101%); }
.t2w.red { z-index: 3; } .t2w.blue { z-index: 2; } .t2w.purple { z-index: 1; }
.t2w.red path { fill: var(--red); } .t2w.blue path { fill: var(--blue); } .t2w.purple path { fill: var(--purple); }
.trio2.play .t2w.red { animation: t2rise .7s cubic-bezier(.3,.8,.4,1) 1.9s forwards; }
.trio2.play .t2w.blue { animation: t2rise .7s cubic-bezier(.3,.8,.4,1) 2.9s forwards; }
.trio2.play .t2w.purple { animation: t2rise .8s cubic-bezier(.3,.8,.4,1) 3.8s forwards; }
@keyframes t2rise { to { transform: translateY(0); } }

/* tiny splash dots that pop above each crest as the wave arrives */
.t2-splash { position: absolute; left: 50%; width: 0; height: 0; z-index: 4; }
.t2-splash.red { bottom: 40%; } .t2-splash.blue { bottom: 62%; } .t2-splash.purple { bottom: 84%; }
.t2-splash i { position: absolute; bottom: 0; border-radius: 50%; opacity: 0; }
.t2-splash.red i { background: var(--red); } .t2-splash.blue i { background: var(--blue); } .t2-splash.purple i { background: var(--purple); }
.t2-splash i:nth-child(1) { width: 4px; height: 4px; left: -26px; }
.t2-splash i:nth-child(2) { width: 3px; height: 3px; left: -11px; }
.t2-splash i:nth-child(3) { width: 5px; height: 5px; left: 3px; }
.t2-splash i:nth-child(4) { width: 3px; height: 3px; left: 17px; }
.t2-splash i:nth-child(5) { width: 4px; height: 4px; left: 30px; }
.trio2.play .t2-splash.red i { animation: splash 1s ease 2s; }
.trio2.play .t2-splash.blue i { animation: splash 1s ease 3s; }
.trio2.play .t2-splash.purple i { animation: splash 1s ease 3.9s; }
@keyframes splash { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-32px) scale(.3); } }

.t2-dot { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; opacity: 0; z-index: 3; }
.t2-dot.red { background: var(--red); } .t2-dot.blue { background: var(--blue); }
.d1, .d3 { left: 60px; }
.d2, .d4 { left: 860px; }
.trio2.play .d1 { animation: t2travelL .9s ease 1.1s forwards; }
.trio2.play .d2 { animation: t2travelR .9s ease 2.1s forwards; }
.trio2.play .d3 { animation: t2travelL .95s ease 3.1s forwards; }
.trio2.play .d4 { animation: t2travelR .95s ease 3.1s forwards; }
@keyframes t2travelL { 0% { opacity: 0; transform: translateX(0) scale(.55); } 14% { opacity: 1; } 75% { opacity: 1; transform: translateX(400px) scale(1); } 100% { opacity: 0; transform: translateX(400px) scale(.4); } }
@keyframes t2travelR { 0% { opacity: 0; transform: translateX(0) scale(.55); } 14% { opacity: 1; } 75% { opacity: 1; transform: translateX(-400px) scale(1); } 100% { opacity: 0; transform: translateX(-400px) scale(.4); } }

/* The stage keeps its intrinsic 920px coordinate system (flex:none + max-width:none)
   so the circles/line stay correctly spaced; transform:scale then shrinks it to fit.
   Without flex:none the flex item shrinks to the viewport while its children keep
   920px coordinates, throwing the right circle off-screen. .trio2 (overflow:hidden)
   clips the scaled-down stage, so no horizontal scroll. */
@media (max-width: 980px) { .trio2-stage { flex: none; max-width: none; transform: scale(.72); } }
@media (max-width: 680px) { .trio2-stage { transform: scale(.5); } }
@media (max-width: 520px) { .trio2-stage { transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) {
  .trio2 .t2-dot { display: none; }
  .trio2.play .t2-circle { animation: none; transform: scale(1); opacity: 1; }
  .trio2.play .trio2-line { animation: none; transform: translateY(-50%) scaleX(1); }
  .trio2.play .t2-fill { animation: none; transform: translate(-50%,-50%) scale(.62); }
  .trio2 .t2w { transform: translateY(0); }
}

/* ===================== EXPERTISE LIST ===================== */
.expertise { max-width: var(--maxw); margin: 0 auto 60px; }
.expertise-list { list-style: none; }
.expertise-list li { display: flex; align-items: center; gap: 22px; font-weight: 700; font-size: clamp(32px, 5vw, 56px); padding: 18px 0; letter-spacing: -0.03em; transition: padding-left .3s ease; }
.expertise-list li:hover { padding-left: 18px; }

/* ===================== SERVICE DETAIL ===================== */
.service { max-width: var(--maxw); margin: 0 auto; padding-top: 70px; padding-bottom: 70px; }
.service-head { display: flex; align-items: center; gap: 26px; }
.service-head h2 { font-size: clamp(44px, 7vw, 84px); font-weight: 700; letter-spacing: -0.03em; }
.service-body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 30px; }
.service-list { list-style: none; padding-left: 104px; }
.service-list li { font-size: clamp(18px, 2.4vw, 24px); font-weight: 500; padding: 9px 0; color: #2a2a30; }
.service-art { display: grid; place-items: center; }
.dotted-ring { position: relative; }
.dotted-ring::before { content: ""; position: absolute; width: 300px; height: 300px; border: 1.5px dotted #d2d2db; border-radius: 50%; }
.line-art { stroke: var(--ink); stroke-width: 1.6; fill: none; position: relative; }

/* leo9-style animated line-art (dotted ring + outline icons + colour dots) */
.la { width: 100%; max-width: 470px; height: auto; overflow: visible; }
.la .la-ic { stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.la-ring { stroke: var(--line); stroke-width: 1.4; fill: none; stroke-dasharray: 1.5 9; transform-box: fill-box; transform-origin: center; }
.la-net { stroke: var(--line); stroke-width: 1; fill: none; opacity: .55; }
.la-bar { fill: var(--ink); stroke: none; }
.adot { stroke: none; transform-box: fill-box; transform-origin: center; }
.adot.red { fill: var(--red); } .adot.purple { fill: var(--purple); } .adot.blue { fill: var(--blue); }
.capx-anim.is-active .la-ring { animation: laspin 55s linear infinite; }
@keyframes laspin { to { transform: rotate(360deg); } }
.capx-anim.is-active .la-ic { animation: lafloat 5s ease-in-out infinite; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
@keyframes lafloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.capx-anim.is-active .adot { animation: laplus 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes laplus { 0%, 100% { transform: scale(1); opacity: .65; } 45% { transform: scale(1.55); opacity: 1; } }

/* ===================== EXPERTISE — STICKY WORD-NAV + DETAIL ===================== */
.capx { position: relative; margin-top: -80px; }
.capx-track { height: 300vh; }
.capx-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.capx-grid { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 0.92fr 1.5fr; gap: 40px; align-items: center; }

.capx-eyebrow { color: var(--blue); font-weight: 600; font-size: 16px; margin-bottom: 16px; }
.capx-nav { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.capx-wrow { display: flex; align-items: center; gap: 18px; font-size: clamp(28px, 3.6vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); }
.capx-word { opacity: .34; transition: opacity .4s ease; }
.capx-w.is-active .capx-word { opacity: 1; }
/* once the section is pinned, hide all but the active word (collapse away the others) */
.capx.engaged .capx-w { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s ease, opacity .35s ease; }
.capx.engaged .capx-w.is-active { max-height: 520px; opacity: 1; }
.capx.engaged .capx-w.is-active .capx-word { opacity: 1; }
.capx-w .dashed-dot { width: 54px; height: 54px; }
.capx-w .dashed-dot span { width: 30px; height: 30px; transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.capx.lit .capx-w:nth-child(1) .dashed-dot span { transform: scale(1); }
.capx.lit .capx-w:nth-child(2) .dashed-dot span { transform: scale(1); transition-delay: .13s; }
.capx.lit .capx-w:nth-child(3) .dashed-dot span { transform: scale(1); transition-delay: .26s; }

/* sub-list drops in right beneath the active word */
.capx-sub { list-style: none; overflow: hidden; max-height: 0; opacity: 0; margin: 0; padding-left: 72px; transition: max-height .5s ease, opacity .4s ease, margin-top .4s ease; }
.capx-w.is-active .capx-sub { max-height: 360px; opacity: 1; margin-top: 12px; }
.capx-sub li { font-size: clamp(15px, 1.4vw, 18px); font-weight: 500; padding: 6px 0; color: var(--ink); opacity: .45; transition: opacity .35s ease, transform .35s ease; }
.capx-sub li.cur { opacity: 1; transform: translateX(8px); }

.capx-arts { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.capx-img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
/* flat PNG placeholders gently float as a whole; the SVG animates its own parts instead */
img.capx-img.is-active { animation: capxFloat 5.5s ease-in-out infinite; }
.capx-img.is-active { opacity: 1; }
@keyframes capxFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg) scale(1); }
  50% { transform: translateY(-12px) rotate(1.2deg) scale(1.03); }
}
/* the research SVG: rotate the dotted ring, bob each icon */
.ri-ring { transform-box: fill-box; transform-origin: center; }
.capx-svg.is-active .ri-ring { animation: riSpin 16s linear infinite; }
@keyframes riSpin { to { transform: rotate(360deg); } }
.ri-ic { transform-box: fill-box; transform-origin: center; }
/* each icon pops in (staggered, one after another), then keeps bobbing + breathing */
.capx-svg.is-active .ri-ic {
  animation: riPop .6s cubic-bezier(.34, 1.6, .5, 1) var(--d, 0s) backwards,
             riBob 3.6s ease-in-out calc(var(--d, 0s) + .6s) infinite;
}
@keyframes riPop { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes riBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.035); } }
/* the little colour dots twinkle */
.capx-svg.is-active path[fill="#FF5A57"]:not([stroke]),
.capx-svg.is-active path[fill="#8B45F6"]:not([stroke]),
.capx-svg.is-active path[fill="#1F63FF"]:not([stroke]) { animation: riTwinkle 2s ease-in-out infinite; }
@keyframes riTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
/* bar-chart bars rise and fall from their baseline, each on its own beat */
.ri-bar { transform-box: fill-box; transform-origin: center bottom; }
.capx-svg.is-active .ri-bar { animation: riBars 1.5s ease-in-out infinite; }
.capx-svg.is-active .ri-bar.b2 { animation-delay: .3s; }
.capx-svg.is-active .ri-bar.b3 { animation-delay: .6s; }
@keyframes riBars { 0%, 100% { transform: scaleY(.42); } 50% { transform: scaleY(1); } }
/* checklist ticks draw themselves in, one at a time, on a loop */
.ri-tick { stroke-dasharray: 40; }
.capx-svg.is-active .ri-tick { animation: riTick 5.1s ease-in-out infinite backwards; }
.capx-svg.is-active .ri-tick.t2 { animation-delay: 1.7s; }
.capx-svg.is-active .ri-tick.t3 { animation-delay: 3.4s; }
@keyframes riTick {
  0% { stroke-dashoffset: 40; }
  12% { stroke-dashoffset: 0; }
  70% { stroke-dashoffset: 0; }
  82%, 100% { stroke-dashoffset: 40; }
}

/* ---- DESIGN svg: counter-rotating rings, drawing graph, pulsing centre nodes ---- */
.dg-ring { transform-box: fill-box; transform-origin: center; }
.capx-svg.is-active .dg-ring.cw { animation: dgSpin 18s linear infinite; }
.capx-svg.is-active .dg-ring.ccw { animation: dgSpinR 24s linear infinite; }
@keyframes dgSpin { to { transform: rotate(360deg); } }
@keyframes dgSpinR { to { transform: rotate(-360deg); } }
.dg-node { transform-box: fill-box; transform-origin: center; }
.capx-svg.is-active .dg-node { animation: dgNode 2.6s ease-in-out infinite; animation-delay: var(--n, 0s); }
@keyframes dgNode { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.18); opacity: 1; } }
.dg-draw { stroke-dasharray: 420; }
.capx-svg.is-active .dg-draw { animation: dgDraw 3.8s ease-in-out infinite; }
.capx-svg.is-active .dg-draw.d2 { animation-delay: .5s; }
@keyframes dgDraw { 0% { stroke-dashoffset: 420; } 42% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -420; } }
.dg-swatch { transform-box: fill-box; transform-origin: center; }
.capx-svg.is-active .dg-swatch { animation: dgSwatch 2.2s ease-in-out infinite; }
@keyframes dgSwatch { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
/* the face shadow eases in after a beat, sliding out from behind the head */
.dg-shadow { opacity: 0; }
.capx-svg.is-active .dg-shadow { animation: dgShadow 1.1s ease 1.3s forwards; }
@keyframes dgShadow { from { opacity: 0; transform: translate(0, 0); } to { opacity: 1; transform: translate(9px, 12px); } }
/* human-factors network: a real black shadow of the nodes, tucked right behind, fading in */
.hf-shadow { opacity: 0; }
.capx-svg.is-active .hf-shadow { animation: hfShadowIn 1.1s ease 1.3s forwards; }
@keyframes hfShadowIn { from { opacity: 0; transform: translate(0, 0); } to { opacity: 1; transform: translate(5px, 7px); } }
/* human-factors eye blink */
.hf-eye { transform-box: fill-box; transform-origin: center; }
.capx-svg.is-active .hf-eye { animation: hfBlink 3.6s ease-in-out infinite; }
@keyframes hfBlink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }

@media (prefers-reduced-motion: reduce) {
  img.capx-img.is-active, .capx-svg.is-active .ri-ring, .capx-svg.is-active .ri-ic,
  .capx-svg.is-active .ri-bar, .capx-svg.is-active .dg-ring, .capx-svg.is-active .dg-node,
  .capx-svg.is-active .dg-draw, .capx-svg.is-active .dg-swatch, .capx-svg.is-active .hf-eye, .capx-svg.is-active path:not([stroke]) { animation: none; }
  .dg-shadow, .hf-shadow { opacity: 1; }
}

@media (max-width: 900px) {
  .capx-track { height: 280vh; }
  .capx-grid { grid-template-columns: 1fr; gap: 18px; }
  .capx-arts { order: -1; max-width: 300px; }
  .capx-sub { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .capx-w .dashed-dot span { transform: scale(1) !important; }
}

/* ===================== WORK ===================== */
.work { max-width: 1320px; margin: 60px auto 0; padding: 0 16px; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-card { position: relative; border-radius: 18px; padding: 40px 28px 0; color: #fff; text-align: center; display: flex; flex-direction: column; min-height: 520px; overflow: hidden; transition: transform .28s, box-shadow .28s; background: #e9e9f0; }
.card-link { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.case-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,.22); }
/* colour floods the card from the landing point (top-centre) outwards */
.card-fill { position: absolute; inset: 0; z-index: 0; clip-path: circle(0% at 50% 64px); }
.card-red .card-fill { background: var(--card-red); }
.card-blue .card-fill { background: var(--card-blue); }
.card-purple .card-fill { background: var(--card-purple); }
.case-card > .card-top, .case-card > .card-shot { position: relative; z-index: 1; }
.case-card.filled .card-fill { animation: cardFill .7s cubic-bezier(.33, .7, .3, 1) forwards; }
@keyframes cardFill { from { clip-path: circle(0% at 50% 64px); } to { clip-path: circle(165% at 50% 64px); } }
.dark .case-card { background: #20202a; }
.card-top h3 { font-size: 34px; font-weight: 700; }
.card-top p { margin-top: 12px; opacity: .95; font-size: 15px; max-width: 280px; margin-inline: auto; }
.card-tags { margin-top: 14px; display: flex; gap: 8px; justify-content: center; font-size: 13px; font-weight: 500; opacity: .92; }
.card-shot { position: relative; margin-top: auto; height: 360px; width: 100%; margin-inline: auto; background: rgba(255,255,255,.16); border-radius: 16px 16px 0 0; display: grid; place-items: center; overflow: hidden; }
.card-shot span { font-size: 14px; opacity: .85; }
.card-shot:has(img) { background: transparent; margin-inline: -28px; width: calc(100% + 56px); }
/* Show the whole mockup, centred at the bottom of the card (was a 132% "peek"
   crop that chopped the mockup on one side). Applies at all widths. */
.card-shot img { position: absolute; left: 50%; right: auto; bottom: 0; transform: translateX(-50%); width: 100%; max-width: none; height: auto; object-fit: contain; object-position: center bottom; display: block; }
.card-blue .card-shot img { right: auto; }
/* the purple mockup is a tall portrait phone — size it by height so the whole
   phone fits (sizing by width would make it taller than the card and clip the top) */
.card-purple .card-shot img { width: auto; height: 100%; right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%); object-fit: contain; object-position: center bottom; max-height: none; }

/* ===================== STATS / MAP ===================== */
.stats { max-width: var(--maxw); margin: 140px auto 0; text-align: center; }
.stats-num { font-size: clamp(40px, 7vw, 84px); font-weight: 700; letter-spacing: -0.03em; }
.stats-cap { color: var(--muted); font-size: 20px; margin-top: 6px; }
.map-wrap { position: relative; margin-top: 30px; }
.map-pins { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); display: flex; gap: 110px; }
.map-pin { width: 30px; height: 30px; border-radius: 50%; }
.world { width: 100%; max-width: 760px; margin: 0 auto; display: block; }
.dots-map circle { fill: #d9d9e1; }
.route { fill: none; stroke: #c3c3cf; stroke-width: 1.4; stroke-dasharray: 2 5; }

/* ===================== INDUSTRY WORDS ===================== */
.industries { max-width: var(--maxw); margin: 80px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 52px; }
.industries span { font-size: clamp(26px, 4vw, 46px); font-weight: 700; letter-spacing: -0.02em; transition: color .2s; }
.industries span:nth-child(1):hover { color: var(--red); }
.industries span:nth-child(2):hover { color: var(--blue); }
.industries span:nth-child(3):hover { color: var(--purple); }
.industries span:nth-child(4):hover { color: var(--red); }

/* ===================== ABOUT ===================== */
.about { max-width: var(--maxw); margin: 130px auto 0; }
.about-card { border: 1px solid var(--line); border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 300px 1fr 260px; gap: 40px; align-items: center; box-shadow: 0 20px 50px rgba(0,0,0,.05); }
.about-heading { font-size: clamp(44px, 6vw, 72px); font-weight: 700; letter-spacing: -0.03em; }
.about-content { align-self: stretch; display: flex; flex-direction: column; align-items: center; text-align: center; }
.about-dots { display: flex; gap: 9px; margin-bottom: 18px; }
.about-content h3 { font-size: 30px; font-weight: 700; }
.about-role { color: var(--muted); margin-top: 6px; max-width: 360px; }
.about-link { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-top: 18px; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 700; }
.about-more { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding: 11px 24px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink); transition: border-color .25s ease, color .25s ease, background .25s ease; }
.about-more:hover { color: var(--red); border-color: var(--red); background: rgba(241, 92, 77, .06); }
.about-more .arr-wrap { display: inline-grid; place-items: center; overflow: hidden; width: 17px; height: 17px; line-height: 0; }
.about-more .arr-wrap svg { grid-area: 1 / 1; transition: transform .42s cubic-bezier(.4, .1, .25, 1); }
.about-more .arr-wrap svg:nth-child(2) { transform: translateX(-150%); }
.about-more:hover .arr-wrap svg:nth-child(1) { transform: translateX(150%); }
.about-more:hover .arr-wrap svg:nth-child(2) { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .about-more .arr-wrap svg { transition: none; } }
.about-badges { display: flex; gap: 12px; margin-top: 24px; }
.about-badges span { width: 76px; height: 76px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: var(--muted); text-align: center; }
.about-photo { height: 280px; border-radius: 16px; overflow: hidden; background: #e9e9ef; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; display: block; }

/* ===================== TESTIMONIALS ===================== */
/* testimonials — one card at a time, slides to the next */
.testi { max-width: var(--maxw); margin: 110px auto 0; padding: 0 var(--pad); }
.testi-viewport { overflow: hidden; }
.testi-row { display: flex; transition: transform .7s cubic-bezier(.5, .05, .2, 1); }
.testi-item { flex: 0 0 100%; margin: 0; display: grid; place-items: center; padding: 14px 0; }
.testi-item img { width: 100%; height: auto; border-radius: 28px; display: block; }
.testi-dots { display: flex; gap: 9px; justify-content: center; margin-top: 22px; }
.testi-dots button { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: #d3d3dd; cursor: pointer; transition: background .25s ease, transform .25s ease; }
.testi-dots button.active { background: var(--purple); transform: scale(1.4); }
.dark .testi-dots button { background: #3a3a48; }
.dark .testi-dots button.active { background: #b388ff; }

/* ===================== FAQ ===================== */
.faq { max-width: var(--maxw); margin: 130px auto 0; }
.faq-title { font-size: clamp(40px, 6vw, 68px); font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: -0.03em; }
.faq-title .dot { width: 16px; height: 16px; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.faq-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 22px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; }
.faq-tabs button:hover { border-color: #c9c9d3; }
.faq-tabs button.active { background: #ece9ff; border-color: transparent; color: var(--blue); }
.faq-list { margin-top: 30px; }
.faq-item { border-bottom: 1px solid var(--line); padding: 24px 0; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 600; font-size: clamp(17px, 2.4vw, 22px); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 30px; font-weight: 300; color: var(--muted); line-height: 1; }
.faq-item[open] summary::after { content: "−"; color: var(--purple); }
.faq-answer { margin-top: 14px; color: #555; max-width: 820px; }

/* ===================== FOOTER ===================== */
.footer { margin-top: 140px; }
.footer-cta { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-bottom: none; border-radius: 32px 32px 0 0; color: #14141a; text-align: center; padding: 100px 24px; margin: 0 16px; transition: border-color .6s ease; }
.footer-cta.lit { border-color: transparent; }
.footer-cta h2 { position: relative; z-index: 1; font-size: clamp(34px, 6vw, 64px); font-weight: 700; letter-spacing: -0.02em; color: #14141a; transition: color .9s ease; }
.footer-cta.lit h2 { color: #fff; }
.footer-cta .btn-pill { position: relative; z-index: 1; margin-top: 36px; }
.footer-cta .btn-light { border: 1.5px solid rgba(0, 0, 0, .14); transition: border-color .6s ease; }
.footer-cta.lit .btn-light { border-color: transparent; }
.footer-bottom { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--pad) 80px; display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; }
.footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.logo-mark-light { width: 60px; height: 60px; }
.footer-brand strong { font-size: 22px; }
.footer-social { display: flex; gap: 10px; margin: 12px 0; }
.footer-social a { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; font-size: 12px; color: var(--muted); transition: all .2s; }
.footer-social a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.footer-brand p { color: var(--muted); font-size: 13px; }
.footer-cols { display: grid; grid-template-columns: max-content max-content; justify-content: start; gap: 64px; }
.footer-cols h4 { font-size: 15px; margin-bottom: 16px; }
.footer-cols a { display: block; color: var(--muted); font-size: 15px; padding: 6px 0; transition: color .2s; }
.footer-cols a:hover { color: var(--ink); }

/* ===================== CONTACT BADGE ===================== */
.contact-badge { position: fixed; right: 26px; bottom: 26px; width: 96px; height: 96px; z-index: 70; display: grid; place-items: center; }
.badge-spin { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.badge-spin text { font-size: 9px; fill: var(--ink); letter-spacing: 1px; font-weight: 500; }
.badge-core { width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 22px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== SCROLL REVEAL ===================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: none; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  :root { --pad: 22px; }
  .nav { display: flex; justify-content: space-between; }
  .nav-links { display: none; }
  .nav-brand small { display: none; }
  .process-strip { grid-template-columns: 1fr 1fr; gap: 18px; }
  .hero-main { grid-template-columns: 1fr; min-height: auto; gap: 28px; }
  .hero-art { order: 2; max-width: 340px; margin: 8px auto 0; }
  .logos-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .service-body { grid-template-columns: 1fr; }
  .service-list { padding-left: 0; }
  .work-grid { grid-template-columns: 1fr; }
  .about-card { grid-template-columns: 1fr; padding: 32px; }
  .about-photo { height: 300px; }
  /* breathing room between the LinkedIn icon and the "About me" button
     (margin-top:auto collapses to almost nothing once the card is single-column) */
  .about-content .about-more { margin-top: 22px; }
  .footer-bottom { grid-template-columns: 1fr; }
  .map-pins { gap: 60px; }
  .testi { padding: 44px 24px; }
  /* fly-orb delight layers are desktop-only: they animate across the full page
     width and cause phantom horizontal scroll on phones. Hiding them is safe —
     the colour reveals (card fill, dot lighting, trio play, CTA gradient) are
     driven by scroll progress in JS, not by the orbs. */
  .flyorbs, .flyorbs2, .flyorbs3, .flyorbs4, .flyorbs5, .flyorbs6 { display: none; }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .statement, .trio { margin: 90px auto; }
  .contact-badge { width: 74px; height: 74px; right: 14px; bottom: 14px; }
  .badge-core { width: 44px; height: 44px; font-size: 16px; }
}

/* ===================== SMALL PHONES (all sizes) ===================== */
@media (max-width: 520px) {
  :root { --pad: 16px; }
  /* never let anything push past the screen */
  .hero, .statement, .about, .footer-cta, .ticker-row { max-width: 100%; }
  .hero-title { font-size: clamp(25px, 8.5vw, 40px); }
  .hero-sub { font-size: 16px; }
  .statement p { font-size: clamp(21px, 6.4vw, 34px); }
  .about-heading { font-size: clamp(38px, 12vw, 60px); }
  .about-card { padding: 26px 20px; gap: 28px; }
  .footer-cta { padding: 64px 20px; margin: 0 8px; }
  .footer-cta h2 { font-size: clamp(28px, 8vw, 44px); }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { padding: 48px var(--pad) 60px; }
  .nav { padding: 6px 8px 6px 16px; gap: 12px; }
  .nav-right { gap: 8px; }
  .nav-right .btn-pill { padding: 8px 15px; font-size: 13px; }
  .ticker-row { gap: 14px; padding: 16px var(--pad); }
}
@media (max-width: 380px) {
  .hero-title { font-size: clamp(23px, 8.5vw, 34px); }
  .nav-brand strong { font-size: 15px; }
}

/* ===================== MOTION-SAFE ===================== */
@media (prefers-reduced-motion: reduce) {
  *, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ===================== DARK MODE ===================== */
body { transition: background-color .35s ease, color .35s ease; }
html.dark {
  --ink: #ededf3;
  --muted: #9a9aa8;
  --line: #2a2a38;
  --bg: #0d0d13;
}
.dark .nav { background: rgba(24,24,32,.55); border-color: rgba(255,255,255,.08); box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.dark .btn-dark { background: #ededf3; color: #14141a; }
.dark .btn-dark:hover { box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.dark .btn-ghost:hover { background: #ededf3; color: #14141a; }
.dark .btn-light { color: #14141a; }
.dark .trio-circle { background: #16161e; box-shadow: -8px 8px 0 -2px rgba(255,255,255,.1); }
.dark .service-list li { color: #c9c9d3; }
.dark .testi-slide p { color: #c9c9d3; }
.dark .faq-tabs button { background: #15151d; color: var(--ink); }
.dark .faq-tabs button.active { background: #2a2342; color: #b9a7ff; }
.dark .faq-answer { color: #aeaebc; }
.dark .about-photo { background: linear-gradient(135deg, #1e1e28, #2a2a3a); }
.dark .badge-core { background: #ededf3; color: #14141a; }
.dark .ticker-track span::after { color: #45454f; }
.dark .card-shot { background: rgba(255,255,255,.12); }
.dark .card-shot:has(img) { background: transparent; }

/* dark mode: the line-art illustrations use near-black strokes + white "paper" fills.
   Flip strokes to light so the drawing is visible, and blend the white fills into the dark bg. */
.dark .capx-svg [stroke="#111111"], .dark .capx-svg [stroke="#000000"] { stroke: #e9e9f0; }
.dark .capx-svg [fill="#ffffff"], .dark .capx-svg [fill="#fff"], .dark .capx-svg [fill="white"] { fill: var(--bg); }
/* the centre shadow is black (invisible on dark) — make it a soft white glow that still eases in slowly */
.dark .capx-svg .dg-shadow { fill: #ffffff; filter: blur(5px); }
.dark .capx-svg.is-active .dg-shadow { animation: dgShadowDark 1.2s ease 1.3s forwards; }
@keyframes dgShadowDark { from { opacity: 0; transform: translate(0, 0); } to { opacity: .5; transform: translate(9px, 12px); } }

/* theme icon swap (sun in light, moon in dark) */
.theme-toggle .moon { display: none; fill: var(--ink); stroke: none; }
.dark .theme-toggle .sun { display: none; }
.dark .theme-toggle .moon { display: inline-block; }

/* ===================== SCROLL "POP" DOTS (red / blue / purple motif) ===================== */
.expertise, .service, .stats, .faq { position: relative; }
.pop-dot { position: absolute; border-radius: 50%; transform: scale(0); opacity: 0; z-index: -1; pointer-events: none; transition: opacity .5s ease; }
.pop-dot.in { opacity: .85; animation: popIn .7s cubic-bezier(.34,1.56,.64,1) forwards, popFloat 7s ease-in-out .7s infinite; }
.pop-dot.ring { border: 3px solid; background: transparent !important; }
.pop-dot.ring.d-red { border-color: var(--red); }
.pop-dot.ring.d-blue { border-color: var(--blue); }
.pop-dot.ring.d-purple { border-color: var(--purple); }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes popFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-16px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .pop-dot.in { animation: none; opacity: .85; transform: scale(1); } }


/* ===================== FLY ORBS (hero → trio circles) ===================== */
.flyorbs { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.flyorb { position: absolute; top: 0; left: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.flyorb.red { background: var(--red); }
.flyorb.blue { background: var(--blue); }

/* second landing: trio colours -> expertise list dots */
.flyorbs2 { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.forb { position: absolute; top: 0; left: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.forb.red { background: var(--red); }
.forb.purple { background: var(--purple); }
.forb.blue { background: var(--blue); }

/* third landing: capability colours fly down onto the project cards */
.flyorbs3 { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.forb3 { position: absolute; top: 0; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; opacity: 0; will-change: transform, opacity; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.forb3.red { background: var(--red); } .forb3.blue { background: var(--blue); } .forb3.purple { background: var(--purple); }

/* fourth landing: project colours leave the cards and land on the dots above Mounika */
.flyorbs4 { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.forb4 { position: absolute; top: 0; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; opacity: 0; will-change: transform, opacity; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.forb4.red { background: var(--red); } .forb4.blue { background: var(--blue); } .forb4.purple { background: var(--purple); }
.about-dots .dot { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.about-dots .dot.lit { transform: scale(1); }

/* fifth landing: Mounika's colours float over to the FAQ heading */
.flyorbs5 { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.forb5 { position: absolute; top: 0; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; opacity: 0; will-change: transform, opacity; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.forb5.red { background: var(--red); } .forb5.purple { background: var(--purple); } .forb5.blue { background: var(--blue); }
.faq-title .dot { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.faq-title .dot.lit { transform: scale(1); }

/* sixth landing: FAQ colours float onto the CTA quote and form a gradient */
.flyorbs6 { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.forb6 { position: absolute; top: 0; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; opacity: 0; will-change: transform, opacity; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.forb6.red { background: var(--red); } .forb6.purple { background: var(--purple); } .forb6.blue { background: var(--blue); }
.cta-fill { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cta-bloom { position: absolute; top: 42%; width: 116%; aspect-ratio: 1 / 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; filter: blur(7px); will-change: transform, opacity; }
.cta-bloom.b-red { left: 24%; background: radial-gradient(circle, var(--red) 42%, transparent 76%); }
.cta-bloom.b-purple { left: 50%; background: radial-gradient(circle, var(--purple) 42%, transparent 76%); }
.cta-bloom.b-blue { left: 76%; background: radial-gradient(circle, var(--blue) 42%, transparent 76%); }
.footer-cta.lit .cta-bloom { animation: ctaBloom 1.9s cubic-bezier(.38, .12, .35, 1) forwards; }
.footer-cta.lit .cta-bloom.b-red { animation-delay: 0s; }
.footer-cta.lit .cta-bloom.b-purple { animation-delay: .08s; }
.footer-cta.lit .cta-bloom.b-blue { animation-delay: .16s; }
@keyframes ctaBloom {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(.72); }
  100% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .footer-cta.lit .cta-bloom { animation: none; transform: translate(-50%, -50%) scale(1.2); opacity: 1; } }
.case-card.filled { animation: cardPop .55s ease; }
@keyframes cardPop { 0% { transform: translateY(0); } 45% { transform: translateY(-10px); } 100% { transform: translateY(0); } }

/* list dots hide until the colours land, then pop in (staggered) */
.expertise-list .dashed-dot span { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.expertise.lit .expertise-list li:nth-child(1) .dashed-dot span { transform: scale(1); }
.expertise.lit .expertise-list li:nth-child(2) .dashed-dot span { transform: scale(1); transition-delay: .13s; }
.expertise.lit .expertise-list li:nth-child(3) .dashed-dot span { transform: scale(1); transition-delay: .26s; }

/* ===================== CAPABILITIES — PINNED SCROLL ===================== */
.caps { position: relative; }
.caps-track { height: 300vh; }
.caps-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.caps-grid { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.caps-left, .caps-right { display: grid; }
.caps-panel, .caps-anim { grid-area: 1 / 1; opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.caps-panel.is-active, .caps-anim.is-active { opacity: 1; transform: none; pointer-events: auto; }

.caps-num { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.caps-title { display: flex; align-items: center; gap: 18px; font-size: clamp(40px, 5.4vw, 72px); font-weight: 700; letter-spacing: -0.03em; margin: 12px 0 26px; line-height: 1; }
.caps-title i { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.caps-title i.red { background: var(--red); } .caps-title i.purple { background: var(--purple); } .caps-title i.blue { background: var(--blue); }
.caps-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 34px; max-width: 540px; }
.caps-list li { position: relative; padding-left: 20px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; color: var(--ink); opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.caps-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.caps-panel.is-active .caps-list li { opacity: 1; transform: none; }
.caps-panel.is-active .caps-list li:nth-child(1) { transition-delay: .14s; }
.caps-panel.is-active .caps-list li:nth-child(2) { transition-delay: .22s; }
.caps-panel.is-active .caps-list li:nth-child(3) { transition-delay: .30s; }
.caps-panel.is-active .caps-list li:nth-child(4) { transition-delay: .38s; }
.caps-panel.is-active .caps-list li:nth-child(5) { transition-delay: .46s; }
.caps-panel.is-active .caps-list li:nth-child(6) { transition-delay: .54s; }

.caps-right svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; }

/* progress rail */
.caps-prog { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.caps-prog span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s ease, height .3s ease; }
.caps-prog span.is-on { background: var(--ink); height: 24px; border-radius: 6px; }

/* — RESEARCH animation — */
.rs-card { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 7; }
.rs-base { stroke: var(--line); stroke-width: 1.5; }
.rs-bar { fill: var(--red); transform-box: fill-box; transform-origin: center bottom; }
.rs-bar.b1 { opacity: .55; } .rs-bar.b2 { opacity: .72; } .rs-bar.b3 { opacity: .6; } .rs-bar.b4 { opacity: .9; } .rs-bar.b5 { opacity: .7; }
.caps-anim[data-i="0"].is-active .rs-bar { animation: rsbar 1.9s ease-in-out infinite; }
.caps-anim[data-i="0"].is-active .rs-bar.b2 { animation-delay: .18s; }
.caps-anim[data-i="0"].is-active .rs-bar.b3 { animation-delay: .36s; }
.caps-anim[data-i="0"].is-active .rs-bar.b4 { animation-delay: .54s; }
.caps-anim[data-i="0"].is-active .rs-bar.b5 { animation-delay: .72s; }
@keyframes rsbar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.rs-pulse { fill: none; stroke: var(--red); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.rs-dot { fill: var(--red); }
.caps-anim[data-i="0"].is-active .rs-pulse { animation: rspulse 2s ease-out infinite; }
@keyframes rspulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
.rs-glass { fill: rgba(241, 92, 77, .12); stroke: var(--red); stroke-width: 3; }
.rs-handle { stroke: var(--red); stroke-width: 4; stroke-linecap: round; }
.rs-mag { transform: translate(120px, 150px); }
.caps-anim[data-i="0"].is-active .rs-mag { animation: rsmag 4.4s ease-in-out infinite; }
@keyframes rsmag { 0% { transform: translate(118px, 150px); } 50% { transform: translate(252px, 116px); } 100% { transform: translate(118px, 150px); } }

/* — DESIGN animation — */
.dg-frame { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.dg-el { transform-box: fill-box; transform-origin: center; opacity: 0; }
.dg-el.e1, .dg-el.e3, .dg-el.e4 { fill: var(--line); }
.dg-el.e1b { fill: var(--purple); }
.dg-el.e2 { fill: rgba(142, 51, 224, .14); stroke: var(--purple); stroke-width: 1.5; }
.dg-el.e5, .dg-el.e5b { fill: none; stroke: var(--line); stroke-width: 1.5; }
.dg-el.e6 { fill: var(--purple); }
.caps-anim[data-i="1"].is-active .dg-el { animation: dgin 4.8s ease infinite; }
.caps-anim[data-i="1"].is-active .e1b { animation-delay: .12s; }
.caps-anim[data-i="1"].is-active .e2  { animation-delay: .26s; }
.caps-anim[data-i="1"].is-active .e3  { animation-delay: .40s; }
.caps-anim[data-i="1"].is-active .e4  { animation-delay: .52s; }
.caps-anim[data-i="1"].is-active .e5  { animation-delay: .66s; }
.caps-anim[data-i="1"].is-active .e5b { animation-delay: .78s; }
.caps-anim[data-i="1"].is-active .e6  { animation-delay: .92s; }
@keyframes dgin { 0% { opacity: 0; transform: translateY(14px) scale(.95); } 11% { opacity: 1; transform: none; } 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px) scale(.96); } }

/* — HUMAN FACTORS animation — */
.hf-eye { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.hf-iris-c { fill: rgba(75, 79, 230, .12); stroke: var(--blue); stroke-width: 2.5; }
.hf-pupil { fill: var(--blue); transform-box: fill-box; transform-origin: center; }
.hf-glint { fill: #fff; opacity: .9; }
.hf-ring { fill: none; stroke: var(--blue); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.caps-anim[data-i="2"].is-active .hf-iris { animation: hfscan 5s ease-in-out infinite; }
@keyframes hfscan { 0%, 100% { transform: translateX(-44px); } 50% { transform: translateX(44px); } }
.caps-anim[data-i="2"].is-active .hf-pupil { animation: hfpupil 3.2s ease-in-out infinite; }
@keyframes hfpupil { 0%, 100% { transform: scale(.78); } 50% { transform: scale(1.18); } }
.caps-anim[data-i="2"].is-active .hf-ring { animation: hfring 2.6s ease-out infinite; }
@keyframes hfring { 0% { transform: scale(.45); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

@media (max-width: 860px) {
  .caps-track { height: 260vh; }
  .caps-grid { grid-template-columns: 1fr; gap: 24px; }
  .caps-right { order: -1; }
  .caps-right svg { max-width: 320px; }
  .caps-list { max-width: none; }
  .caps-prog { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-bar, .rs-mag, .rs-pulse, .dg-el, .hf-iris, .hf-pupil, .hf-ring { animation: none !important; }
  .dg-el { opacity: 1; }
}