/* AXON x Novo · The Value of X · interactive presentation
   Stage is authored at 1920 x 1080 (the Figma frame size) and scaled to fit. */

:root {
  --power: #1b1768;
  --adapt: #b04fc4;
  --grey-a: #f8f9fa;
  --grey-b: #e0e4e7;
  --white: #ffffff;
  --grow: #00b373;
  --engage: #00a3e0;
  --express: #5e5eb7;
  --connect: #e93cac;
  --experience: #f8485e;
  --evidence: #ff7500;
  --chip: #1b2775;
  --chip-line: #2c4295;
  --meta: #a9a9a9;
  --spectrum: linear-gradient(90deg, #00b373 0%, #00a3e0 16.667%, #5e5eb7 33.333%, #b04fc4 50%, #e93cac 66.667%, #f8485e 83.333%, #ff7500 100%);
  --font: "Avenir Next", "Avenir Next LT Pro", "AvenirNext", "Avenir", "Nunito Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #0d0b38;
  font-family: var(--font);
  color: var(--power);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
img { display: block; }

/* ---------- Stage ---------- */
.stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  background: var(--white);
  overflow: hidden;
  user-select: none;
}
.abs { position: absolute; }
.spectrum { background: var(--spectrum); }
.xclip { clip-path: polygon(0 27.1%, 23.1% 50%, 0 72.9%, 27.1% 100%, 50% 76.9%, 72.9% 100%, 100% 72.9%, 76.9% 50%, 100% 27.1%, 72.9% 0, 50% 23.1%, 27.1% 0); }
.cover { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Header ---------- */
.hdr {
  position: absolute; left: 0; top: 0; width: 1920px; height: 86px; z-index: 50;
  transition: transform .8s var(--ease), opacity .6s var(--ease);
}
.hdr.hidden { transform: translateY(-110%); opacity: 0; }
.hdr:not(.hidden), .ftr:not(.hidden) { transition-delay: .45s; }
.hdr-shadow { left: 36px; top: 62px; width: 1848px; height: 18px; background: #fff; box-shadow: 0 6px 10px rgba(0, 0, 0, .12); }
.hdr-bg { left: 0; top: 0; width: 1920px; height: 80px; background: #fff; }
.hdr-top { left: 0; top: 0; width: 1920px; height: 6px; }
.hdr-logo { left: 36px; top: 23.3px; width: 145px; height: 39.3px; cursor: pointer; transition: transform .4s var(--ease); }
.hdr-logo:hover { transform: scale(1.04); }
.hdr-track { left: 0; top: 80px; width: 1920px; height: 6px; background: var(--grey-b); }
.hdr-progress {
  left: 34px; top: 80px; height: 6px; width: 0; border-radius: 0 3px 3px 0;
  background: var(--spectrum); background-size: 1886px 6px;
  transition: width 1.1s var(--ease);
}
.nav {
  position: absolute; top: 28.4px; translate: -50% 0;
  font-size: 20px; line-height: 24px; font-weight: 500; text-align: center; white-space: nowrap;
  color: var(--power); cursor: pointer; letter-spacing: .01em;
  transition: color .3s, font-weight .3s;
}
.nav::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -8px; height: 2px;
  background: var(--power); opacity: .25; transition: left .35s var(--ease), right .35s var(--ease);
}
.nav:hover::after { left: 0; right: 0; }
.nav.active { font-weight: 700; }
.nav.active::after { display: none; }
.chev { position: absolute; top: 33px; width: 16px; height: 16px; pointer-events: none; transition: transform .35s var(--ease); }
.chev svg { width: 16px; height: 9px; }
.chev.open { transform: rotate(180deg); }

/* Dropdowns */
.dd {
  position: absolute; top: 88px; background: #fff; z-index: 60;
  box-shadow: 0 12px 30px rgba(27, 23, 104, .16);
  padding: 4px 10px; opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.dd.open { opacity: 1; transform: none; pointer-events: auto; }
.dd-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  height: 41px; padding: 0 2px; border-bottom: 1px solid #eceef0;
  font-size: 18px; color: var(--power); text-align: left; position: relative;
  transition: color .2s, padding .3s var(--ease);
}
.dd-item:last-child { border-bottom: 0; }
.dd-item svg { width: 6px; height: 10px; transition: transform .3s var(--ease); }
.dd-item:hover, .dd-item.current { color: var(--c); font-weight: 700; }
.dd-item:hover { padding-left: 8px; }
.dd-item:hover svg { transform: translateX(4px); }
.dd .dd-item { opacity: 0; transform: translateY(-6px); }
.dd.open .dd-item { opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease), color .2s, padding .3s var(--ease); }
.dd.open .dd-item:nth-child(2) { transition-delay: .03s; }
.dd.open .dd-item:nth-child(3) { transition-delay: .06s; }
.dd.open .dd-item:nth-child(4) { transition-delay: .09s; }
.dd.open .dd-item:nth-child(5) { transition-delay: .12s; }
.dd.open .dd-item:nth-child(6) { transition-delay: .15s; }

/* ---------- Footer ---------- */
.ftr {
  position: absolute; left: 0; top: 994px; width: 1920px; height: 86px; z-index: 50;
  transition: transform .8s var(--ease), opacity .6s var(--ease);
}
.ftr.hidden { transform: translateY(110%); opacity: 0; }
.ftr-bar { left: 0; top: 6px; width: 1920px; height: 80px; background: var(--power); }
.pill {
  position: absolute; top: 35.3px; width: 265.6px; height: 29px; border-radius: 14.5px;
  background: var(--chip); border: 1px solid var(--chip-line); color: #fff;
  font-size: 16px; line-height: 19.2px; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
  transition: background .35s, border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.pill:hover { background: #26338e; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.pill.on { background: var(--evidence); border-color: var(--evidence); }
.circ {
  position: absolute; top: 29.3px; width: 41px; height: 41px; border-radius: 50%;
  background: var(--chip); border: 1px solid var(--chip-line);
  display: grid; place-items: center; color: #fff;
  transition: transform .35s var(--spring), background .3s, opacity .3s;
}
.circ svg { width: 8px; height: 14px; }
.circ:hover { transform: scale(1.12); background: #2b3aa0; }
.circ:active { transform: scale(.94); }
.circ.disabled { opacity: .35; pointer-events: none; }
.ftr-label { position: absolute; top: 39.1px; font-size: 16px; line-height: 19.2px; font-style: italic; color: #fff; cursor: pointer; }
.dots {
  position: absolute; left: 0; top: 33.8px; width: 1920px; height: 27px;
  display: flex; justify-content: center; align-items: center; gap: 28.1px; pointer-events: none;
}
.dot {
  width: 26.9px; height: 26.9px; border-radius: 50%;
  background: var(--chip); border: .64px solid var(--chip-line);
  pointer-events: auto; cursor: pointer;
  transition: background .45s var(--ease), transform .45s var(--spring);
  animation: dotIn .5s var(--ease) both;
}
.dot:hover { transform: scale(1.15); }
.dot.on { background: var(--c); transform: scale(1.05); }
@keyframes dotIn { from { opacity: 0; transform: scale(.2); } }

/* ---------- Slides ---------- */
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  visibility: hidden; z-index: 1; will-change: transform; background: #fff;
}
.slide.is-active { visibility: visible; z-index: 3; }
.slide.is-leaving { visibility: visible; z-index: 2; }
.panel { position: absolute; left: 36px; top: 80px; width: 1848px; height: 920px; background: var(--grey-a); }

/* Reveal system: any [data-a] child animates in when its slide or modal plays. */
[data-a] { opacity: 0; }
[data-a].done { animation: none !important; opacity: 1; }
.play [data-a] {
  animation-name: var(--kf, aUp);
  animation-duration: var(--dur, .95s);
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
  animation-delay: var(--d, 0ms);
}
[data-a="up"] { --kf: aUp; }
[data-a="fade"] { --kf: aFade; }
[data-a="left"] { --kf: aLeft; }
[data-a="right"] { --kf: aRight; }
[data-a="scale"] { --kf: aScale; }
[data-a="pop"] { --kf: aPop; --dur: 1.1s; }
[data-a="xin"] { --kf: aXin; --dur: 1.4s; }
[data-a="growx"] { --kf: aGrowX; --dur: 1.2s; transform-origin: 0 50%; }
[data-a="growy"] { --kf: aGrowY; transform-origin: 50% 0; }
[data-a="wipe"] { --kf: aWipe; --dur: 1.3s; }
[data-a="blur"] { --kf: aBlur; --dur: 1.2s; }
[data-a="rise"] { --kf: aRise; --dur: 1.1s; }
.from-prev { --dx: -46px; }
.from-next { --dx: 46px; }
@keyframes aUp { from { opacity: 0; transform: translate3d(calc(var(--dx, 0px) * .5), 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes aFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aLeft { from { opacity: 0; transform: translate3d(-70px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes aRight { from { opacity: 0; transform: translate3d(70px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes aScale { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes aPop { 0% { opacity: 0; transform: scale(.3) rotate(-25deg); } 60% { opacity: 1; transform: scale(1.06) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes aXin { 0% { opacity: 0; transform: rotate(-135deg) scale(.2); } 70% { opacity: 1; transform: rotate(6deg) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes aGrowX { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes aGrowY { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes aWipe { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes aBlur { from { opacity: 0; filter: blur(14px); transform: translateY(18px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes aRise { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }

/* Hover lift used by cards */
.lift { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.lift:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(27, 23, 104, .16); }

/* Shared type */
.h-hero { font-weight: 700; font-size: 60px; line-height: 72px; white-space: nowrap; }
.h-sub { font-size: 34px; line-height: 40.8px; }
.center-x { left: 960px; translate: -50% 0; text-align: center; }
.t-center { text-align: center; }
.eyebrow { font-size: 26px; line-height: 31px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.rule-s { width: 56px; height: 4px; }

/* X outline mark */
.xmark svg { width: 100%; height: 100%; display: block; }
.close-x {
  position: absolute; width: 58.9px; height: 58.9px; z-index: 5; color: var(--power);
  transition: transform .6s var(--spring);
}
.close-x:hover { transform: rotate(90deg) scale(1.08); }
.close-x.light { color: #fff; }

/* ---------- 01 · Opening ---------- */
.s-cover { background: var(--power); }
.cover-strip { left: 0; top: 1000px; width: 1920px; height: 80px; overflow: hidden; }
.cover-strip img { width: 100%; height: 600px; object-fit: cover; transform: translateY(-260px); animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0, -260px, 0) scale(1.05); } to { transform: translate3d(-40px, -300px, 0) scale(1.12); } }
.cover-sub { left: 960px; top: 786.5px; translate: -50% 0; font-size: 50px; line-height: 60px; color: #fff; white-space: nowrap; }
.cover-sub span { display: inline-block; }
.cover-plus { animation: plusSpin 1.4s var(--spring) .55s both; }
@keyframes plusSpin { from { opacity: 0; transform: rotate(-180deg) scale(.2); } to { opacity: 1; transform: none; } }
.begin {
  position: absolute; right: 64px; bottom: 18px; z-index: 4; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .85); color: #fff; display: grid; place-items: center;
  background: rgba(27, 23, 104, .35); backdrop-filter: blur(6px);
  animation: beginPulse 2.4s ease-in-out infinite;
  transition: transform .35s var(--spring);
}
.begin svg { width: 9px; height: 15px; }
.begin:hover { transform: scale(1.12); }
@keyframes beginPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }

.s-plus { background: var(--power); }
.hero-wrap { left: 0; top: 0; width: 1920px; height: 996px; overflow: hidden; }
.hero-wrap img { position: absolute; left: -40px; top: -30px; width: 2000px; height: 1060px; object-fit: cover; will-change: transform; }
.s-plus.play .hero-wrap img { animation: kenburns 14s ease-in-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

.value-x { left: 818px; top: 398px; width: 284px; height: 284px; }
.value-x img { width: 100%; height: 100%; object-fit: cover; }
.value-t { top: 477px; font-size: 72px; line-height: 72px; font-weight: 700; color: var(--adapt); white-space: nowrap; }
.value-t.l { right: calc(1920px - 786px); text-align: right; }
.value-t.r { left: 1137px; }
.mask { overflow: hidden; }
.s-value .value-t.l [data-a] { --kf: slideFromRight; --dur: 1.2s; }
.s-value .value-t.r [data-a] { --kf: slideFromLeft; --dur: 1.2s; }
@keyframes slideFromRight { from { opacity: 0; transform: translateX(260px); } to { opacity: 1; transform: none; } }
@keyframes slideFromLeft { from { opacity: 0; transform: translateX(-260px); } to { opacity: 1; transform: none; } }

.s-partner .panel { background: var(--adapt); }
.partner-t { left: 960px; top: 518px; translate: -50% 0; font-size: 43px; line-height: 51.6px; color: #fff; white-space: nowrap; }
.partner-t b { font-weight: 600; }
.partner-t span { display: inline-block; }

/* ---------- 02 · Introduction ---------- */
.intro-copy { left: 105px; top: 460px; font-size: 34px; line-height: 40.8px; }
.intro-copy p + p { margin-top: 40px; }
.tile { position: absolute; width: 253px; text-align: center; cursor: pointer; }
.tile .xi { width: 239px; height: 239px; margin: 0 auto; transition: transform .7s var(--spring); overflow: hidden; }
.tile .xi img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transition: transform 1.2s var(--ease); }
.tile .tpill {
  margin-top: 28px; height: 42px; border-radius: 21px; color: #fff;
  font-size: 20px; line-height: 42px; letter-spacing: .04em; font-weight: 400;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tile:hover .xi { transform: rotate(10deg) scale(1.05); }
.tile:hover .xi img { transform: scale(1.45) rotate(-10deg); }
.tile:hover .tpill { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(27, 23, 104, .22); }

/* Team */
.team-card {
  position: absolute; top: 294px; width: 248px; height: 653px; background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .1); cursor: pointer; overflow: hidden;
}
.team-card .ph { position: absolute; left: 14px; top: 46px; width: 220px; height: 200px; overflow: hidden; }
.team-card .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transition: transform 1s var(--ease); }
.team-card:hover .ph img { transform: scale(1.07); }
.team-card .rl { position: absolute; left: 14px; top: 245px; width: 220px; height: 1px; background: var(--adapt); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.team-card:hover .rl { transform: scaleX(1.0); height: 3px; }
.team-card .nm { position: absolute; left: 23px; top: 289px; font-size: 18px; line-height: 21.6px; font-weight: 700; white-space: nowrap; }
.team-card .rr { position: absolute; left: 23px; top: 327px; font-size: 16px; line-height: 18px; font-weight: 500; color: var(--adapt); }
.team-card .bl { position: absolute; left: 23px; top: 382px; width: 205px; font-size: 15px; line-height: 18px; }
.readmore {
  position: absolute; right: 24px; bottom: 30px; font-size: 18px; font-weight: 500; color: var(--meta);
  display: flex; align-items: center; gap: 10px; transition: color .3s, gap .3s var(--ease);
}
.readmore svg { width: 5px; height: 10px; }
.team-card:hover .readmore, .prac:hover .readmore { color: var(--power); gap: 16px; }

/* Bio modal */
.bio-pop { left: 117px; top: 268px; width: 1686px; height: 653px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); overflow: hidden; }
.bio-pop .bio-panel { position: absolute; left: 771px; top: 0; width: 915px; height: 653px; background: var(--adapt); }
.bio-pop .bio-img { position: absolute; left: 165px; top: 101px; width: 414px; height: 380px; overflow: hidden; }
.bio-pop .bio-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.bio-pop .bio-rule { position: absolute; left: 152px; top: 479px; width: 440px; height: 4px; background: var(--adapt); }
.bio-pop .bio-quote { position: absolute; left: 143px; top: 511px; width: 480px; font-size: 20px; line-height: 22px; font-style: italic; color: var(--adapt); }
.bio-pop .bio-name { position: absolute; left: 857px; top: 109px; font-size: 48px; line-height: 57.6px; font-weight: 700; white-space: nowrap; }
.bio-pop .bio-role { position: absolute; left: 857px; top: 168px; font-size: 36px; line-height: 43.2px; font-weight: 500; color: #fff; white-space: nowrap; }
.bio-pop .bio-text { position: absolute; left: 857px; top: 246px; width: 780px; font-size: 22px; line-height: 30px; }
.bio-swap { transition: opacity .35s var(--ease), transform .45s var(--ease); }
.bio-swap.out-l { opacity: 0; transform: translateX(-40px); }
.bio-swap.out-r { opacity: 0; transform: translateX(40px); }
.bio-nav {
  position: absolute; top: 576px; width: 42px; height: 42px; border-radius: 50%; z-index: 6;
  background: #3d3a7f; border: 1px solid #fff; color: #fff; display: grid; place-items: center;
  transition: transform .35s var(--spring), background .3s;
}
.bio-nav svg { width: 8px; height: 14px; }
.bio-nav:hover { transform: scale(1.14); background: var(--adapt); }

/* Avenir */
.av-title { left: 105px; top: 466px; }
.av-copy { left: 105px; top: 572px; font-size: 34px; line-height: 40.8px; }
.cta-grad {
  position: absolute; left: 92px; top: 835px; width: 577px; height: 75px; border-radius: 38px;
  padding: 2px; background: var(--spectrum); cursor: pointer;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cta-grad span {
  display: flex; align-items: center; justify-content: space-between; height: 100%; border-radius: 36px;
  background: var(--grey-a); padding: 0 28px 0 26px;
  font-size: 25px; font-weight: 700; letter-spacing: .01em;
}
.cta-grad i {
  font-style: normal; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-grad svg { width: 9px; height: 16px; color: var(--evidence); transition: transform .4s var(--ease); }
.cta-grad:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(176, 79, 196, .25); }
.cta-grad:hover svg { transform: translateX(6px); }
.ring-svg { left: 1043px; top: 255px; width: 560px; height: 560px; overflow: visible; }
.ring-svg circle.ring { fill: none; stroke: #d6d5e6; stroke-width: 3; stroke-dasharray: 1640; stroke-dashoffset: 1640; }
.play .ring-svg circle.ring { animation: draw 2s var(--ease-io) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.globe { left: 1063px; top: 274px; width: 520px; height: 520px; opacity: .55; }
.globe img { width: 100%; height: 100%; object-fit: contain; }
.av-center { left: 1108px; top: 494px; width: 427px; }
.ai-by { left: 1323px; top: 600px; translate: -50% 0; font-size: 20px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.atelier { left: 1256px; top: 645px; width: 133px; }
.rdot {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--adapt); border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(176, 79, 196, .5);
}
.rdot.lit { animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(176, 79, 196, .55); } 100% { box-shadow: 0 0 0 16px rgba(176, 79, 196, 0); } }
.ag {
  position: absolute; translate: -50% -50%; cursor: pointer;
  transition: filter .4s, opacity .4s;
}
.ag img { width: 100%; height: auto; transition: transform .5s var(--spring); }
.ag:hover img { transform: scale(1.1); }
.ag.static { cursor: default; }
.ag.static:hover img { transform: none; }
.ag.sel img { filter: brightness(0) invert(1); }
.av-card {
  left: 87px; top: 200px; width: 686px; height: 675px; background: var(--grey-a); z-index: 30;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateX(-40px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.av-card.open { opacity: 1; transform: none; pointer-events: auto; }
.av-card::before, .av-card::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: var(--spectrum); }
.av-card::before { top: 0; } .av-card::after { bottom: 0; }
.av-card h3 { position: absolute; left: 98px; top: 247px; margin: 0; font-size: 26px; font-weight: 700; color: var(--adapt); letter-spacing: .01em; }
.av-card p { position: absolute; left: 98px; top: 300px; width: 470px; font-size: 26px; line-height: 33px; }
.av-veil { left: 36px; top: 80px; width: 1848px; height: 920px; background: rgba(27, 23, 104, .82); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); z-index: 10; }
.av-dim .av-veil { opacity: 1; pointer-events: auto; }
.av-dim .ag.sel { z-index: 20; }

/* Powerhouse modal */
.ph-panel { left: 36px; top: 80px; width: 1848px; height: 920px; background: var(--grey-a); }
.statcard {
  position: absolute; height: 81px; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
  display: flex; align-items: center;
}
.statcard .num { font-size: 72px; line-height: 1; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.statcard .num sup { font-size: 34px; vertical-align: top; position: relative; top: 4px; }
.statcard .num sub { font-size: 34px; vertical-align: baseline; }
.statcard .lab { font-size: 22px; line-height: 25px; }
.statcard.l .num { width: 200px; text-align: right; }
.statcard.l .lab { margin-left: 33px; }
.statcard.r .num { width: 150px; text-align: left; padding-left: 26px; }
.statcard.r .lab { margin-left: 0; }
.awards { left: 726px; top: 333px; width: 530px; height: 584px; background: var(--power); color: #fff; padding: 52px 46px; }
.awards h4 { margin: 0 0 22px; font-size: 16px; letter-spacing: .03em; color: #d07ee0; font-weight: 700; }
.awards li { list-style: none; font-size: 16px; line-height: 19px; margin-bottom: 10px; color: #e4e3f1; }
.awards li b { color: #fff; }
.awards ul { padding: 0; margin: 0; }
.awards hr { width: 40px; border: 0; border-top: 1px solid rgba(255, 255, 255, .7); margin: 34px 0 42px; }

/* Customers */
.cust-band { left: 0; top: 293px; width: 1920px; height: 701px; background: var(--power); }
.cust-band .bar { left: 0; top: 0; width: 1920px; height: 6px; }
.cust-logos { left: 275px; top: 380px; width: 1370px; }
.cust-logos img { width: 100%; height: auto; }
.cust-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .25) 50%, transparent 65%);
  background-size: 250% 100%; mix-blend-mode: overlay;
}
.play .cust-shine { animation: shine 2.6s var(--ease-io) 1.2s both; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Practices tiles */
.prac { position: absolute; width: 320px; height: 300px; cursor: pointer; }
.prac .blk { position: absolute; left: 0; bottom: 0; width: 320px; height: 122px; transition: filter .3s; }
.prac .xi { position: absolute; left: 54px; top: 0; width: 212px; height: 212px; overflow: hidden; transition: transform .8s var(--spring); }
.prac .xi img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transition: transform 1.2s var(--ease); }
.prac .lbl { position: absolute; left: 0; bottom: 8px; width: 320px; text-align: center; color: #fff; font-size: 26px; line-height: 38px; font-weight: 700; letter-spacing: .01em; }
.prac .readmore { right: 0; bottom: -38px; }
.prac:hover .xi { transform: translateY(-10px) rotate(8deg); }
.prac:hover .xi img { transform: scale(1.5) rotate(-8deg); }
.prac:hover .blk { filter: brightness(1.06) saturate(1.1); }

/* Practice popup */
.pp-panel { left: 36px; top: 80px; width: 1848px; height: 920px; background: var(--grey-a); overflow: hidden; }
.pp-hero { position: absolute; left: 0; top: 0; width: 1848px; height: 577px; overflow: hidden; }
.pp-hero > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 1.8s var(--ease); }
.open .pp-hero > img { transform: scale(1); }
.pp-word { position: absolute; left: 50%; top: 50%; translate: -50% -50%; text-align: left; }
.pp-pow { display: inline-block; background: #fff; color: var(--power); font-size: 60px; line-height: 75px; font-weight: 700; padding: 0 18px; margin-bottom: 4px; }
.pp-big { color: rgba(255, 255, 255, .94); font-weight: 700; line-height: .92; letter-spacing: -.005em; white-space: nowrap; text-shadow: 0 4px 30px rgba(0, 0, 0, .12); }
.pp-tag { position: absolute; left: 0; top: 577px; width: 1848px; height: 129px; display: grid; place-items: center; color: #fff; font-size: 48px; }
.pp-body { position: absolute; left: 0; top: 706px; width: 1848px; height: 214px; display: grid; place-items: center; text-align: center; font-size: 34px; line-height: 43px; padding: 0 280px; }

/* Capabilities */
.cap { position: absolute; width: 530px; height: 53px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .07); display: flex; align-items: center; padding-left: 44px; font-size: 22px; white-space: nowrap; transition: transform .4s var(--ease), box-shadow .4s; }
.cap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--power); transition: width .4s var(--ease), background .4s; }
.cap:hover { transform: translateX(8px); box-shadow: 0 10px 24px rgba(27, 23, 104, .12); }
.cap:hover::before { width: 8px; background: var(--c, var(--experience)); }

/* Novo work */
.nw-title { left: 960px; top: 138px; translate: -50% 0; font-size: 34px; font-weight: 700; white-space: nowrap; }
.nw-rule { left: 93px; top: 210px; width: 1733px; height: 6px; }
.nw-left { left: 93px; top: 254px; width: 925px; }
.nw-left h5 { margin: 0 0 14px; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.nw-card { background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .07); padding: 18px 22px; margin-bottom: 34px; display: grid; grid-template-columns: 1fr 1fr; row-gap: 14px; column-gap: 20px; }
.nw-card.three { grid-template-columns: 1fr 1fr 1fr; }
.nw-item { display: flex; align-items: center; gap: 22px; }
.nw-item .n { font-size: 46px; font-weight: 700; line-height: 1; min-width: 92px; }
.nw-item .t { font-size: 19px; line-height: 21px; }
.nw-right { left: 1064px; top: 254px; width: 762px; }
.nw-right h5 { margin: 0 0 14px; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.ta-card { background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .07); padding: 30px 36px 28px; }
.ta-row { display: grid; grid-template-columns: 210px 1fr 90px; align-items: center; gap: 0 16px; height: 48px; }
.ta-row .l { font-size: 19px; line-height: 20px; }
.ta-row .bar { height: 22px; border-radius: 11px; background: #f1f2f6; overflow: hidden; border: 1px solid #eceef3; }
.ta-row .bar i { display: block; height: 100%; border-radius: 11px; width: 0; transition: width 1.4s var(--ease); }
.ta-row .v { font-size: 34px; font-weight: 700; text-align: right; }
.ta-box { margin-top: 22px; padding: 2px; background: var(--spectrum); }
.ta-box div { background: #fff; text-align: center; font-size: 26px; line-height: 31px; font-weight: 700; padding: 14px; }

/* ---------- 03 · Summit follow-up ---------- */
.amb-card { position: absolute; left: 693px; width: 1100px; height: 150px; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .08); padding: 34px 36px 0 40px; transition: transform .5s var(--ease), box-shadow .5s; }
.amb-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); transition: width .5s var(--ease); }
.amb-card:hover { transform: translateX(-10px); box-shadow: 0 18px 40px rgba(27, 23, 104, .14); }
.amb-card:hover::before { width: 10px; }
.amb-card h4 { margin: 0; font-size: 31px; line-height: 34px; font-weight: 700; }
.amb-card .s { font-size: 19px; font-style: italic; color: var(--meta); margin-top: 4px; }
.amb-card .d { font-size: 19px; margin-top: 20px; white-space: nowrap; letter-spacing: -.005em; }

/* ---------- 04 · Manifesto ---------- */
.man-left { left: 34px; top: 84px; width: 895px; height: 910px; transition: background-color .8s var(--ease); }
.man-photo { left: 929px; top: 84px; width: 952px; height: 910px; overflow: hidden; }
.man-photo img { width: 100%; height: 100%; object-fit: cover; }
.s-man.is-active .man-photo img { animation: photoIn 1.6s var(--ease) both; }
@keyframes photoIn { from { transform: scale(1.12); filter: saturate(.6); } to { transform: scale(1); filter: none; } }
.man-x { left: 856px; top: 467px; width: 147px; height: 147px; color: #fff; z-index: 3; }
.man-text { left: 123px; top: 0; height: 910px; width: 730px; display: flex; flex-direction: column; justify-content: center; color: #fff; font-size: 40px; line-height: 50px; letter-spacing: 0; }
.man-text p + p { margin-top: 46px; }
.man-text b { font-weight: 700; }
.man-text .man-q { font-size: 48px; line-height: 57.6px; font-weight: 700; text-align: right; width: 610px; margin-left: 88px; letter-spacing: 0; }

/* ---------- 05 · Digital solutions ---------- */
.ds-card {
  position: absolute; width: 824px; height: 363px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
  cursor: pointer; overflow: hidden; transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.ds-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(27, 23, 104, .16); }
.ds-card .acc { position: absolute; left: 0; width: 100%; height: 4px; background: var(--c); }
.ds-card .num { position: absolute; font-size: 21px; font-weight: 700; color: var(--c); letter-spacing: .02em; }
.ds-card h3 { position: absolute; margin: 0; font-size: 48px; line-height: 56px; font-weight: 700; white-space: nowrap; }
.ds-card .sub { position: absolute; font-size: 27px; line-height: 34px; font-weight: 500; }
.ds-card .sub em { font-style: normal; color: var(--c); display: block; }
.ds-card .dia { position: absolute; width: 300px; height: 300px; overflow: hidden; transform: rotate(45deg); transition: transform .9s var(--spring); }
.ds-card .dia img { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; object-fit: cover; transform: rotate(-45deg); transition: transform 1.3s var(--ease); }
.ds-card:hover .dia { transform: rotate(45deg) scale(1.08); }
.ds-card:hover .dia img { transform: rotate(-45deg) scale(1.15); }
.ds-card .go { position: absolute; display: flex; gap: 10px; align-items: center; font-size: 18px; color: var(--meta); font-weight: 500; transition: color .3s, gap .3s var(--ease); }
.ds-card .go svg { width: 5px; height: 10px; }
.ds-card:hover .go { color: var(--c); gap: 16px; }

.strip { left: 36px; top: 86px; width: 60px; height: 908px; overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.play .strip img { animation: stripIn 1.4s var(--ease) both; }
@keyframes stripIn { from { transform: translateY(-14%) scale(1.3); } to { transform: none; } }
.sec-eyebrow { left: 153px; top: 329px; font-size: 24px; }
.sec-title { left: 153px; top: 365px; font-size: 60px; line-height: 70px; font-weight: 700; }
.sec-rule { left: 153px; top: 548px; }
.sec-copy { left: 153px; top: 604px; width: 520px; font-size: 34px; line-height: 42px; }

/* 06 / 07 / 08 layout (Alec option A) */
.opt-card { left: 96px; top: 138px; width: 1726px; height: 856px; background: #fff; box-shadow: 0 10px 40px rgba(27, 23, 104, .08); }
.opt-card .top { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--c); }
.opt-x { left: 154px; top: 196px; width: 62px; height: 62px; color: var(--power); }
.opt-eyebrow { left: 154px; top: 368px; color: var(--c); font-size: 25px; letter-spacing: .04em; }
.opt-title { left: 154px; top: 404px; width: 560px; font-size: 54px; line-height: 56px; font-weight: 700; text-transform: uppercase; }
.opt-rule { left: 154px; width: 56px; height: 4px; background: var(--c); }
.opt-lead { left: 154px; width: 520px; font-size: 30px; line-height: 39px; }
.opt-quote { left: 178px; width: 500px; font-size: 24px; line-height: 34px; font-style: italic; font-weight: 500; }
.opt-quote::before { content: ""; position: absolute; left: -24px; top: 4px; width: 3px; height: 14px; background: var(--adapt); }
.opt-quote.no-tick::before { display: none; }
.opt-right { left: 746px; top: 196px; width: 1018px; }
.tabs3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.tab3 {
  height: 58px; border-radius: 29px; border: 1.5px solid #e2e4ea; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: #fff; position: relative; overflow: hidden; transition: border-color .3s, transform .4s var(--ease);
}
.tab3::before { content: ""; position: absolute; inset: 0; background: var(--power); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); z-index: 0; }
.tab3 > * { position: relative; z-index: 1; }
.tab3 .n { width: 32px; height: 32px; border-radius: 50%; background: #eef0f4; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.tab3 .t { font-size: 19px; font-weight: 700; }
.tab3 .s { font-size: 15px; color: #8c8ca8; }
.tab3:hover { transform: translateY(-2px); border-color: var(--power); }
.tab3.on { border-color: var(--power); color: #fff; }
.tab3.on::before { transform: scaleX(1); }
.tab3.on .n { background: #fff; color: var(--power); }
.tab3.on .s { color: #c9c8e6; }
.lbl-row { display: flex; justify-content: space-between; align-items: baseline; margin: 30px 0 10px; }
.lbl-row b { font-size: 15px; letter-spacing: .08em; color: var(--c); font-weight: 700; }
.lbl-row span { font-size: 15px; color: #8c8ca8; }
.lbl-row button { font-size: 18px; color: #8c8ca8; transition: color .3s; }
.lbl-row button:hover { color: var(--power); }
.cgrid { display: grid; gap: 14px; }
.ccard { background: #fff; box-shadow: 0 6px 22px rgba(27, 23, 104, .09); padding: 22px 22px 18px; position: relative; display: flex; flex-direction: column; cursor: pointer; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.ccard:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(27, 23, 104, .16); }
.ccard .tg { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); font-weight: 700; }
.ccard h4 { margin: 8px 0 8px; font-size: 26px; line-height: 29px; font-weight: 700; }
.ccard .ds { font-size: 15.5px; line-height: 22px; }
.ccard .rl { width: 40px; height: 3px; background: var(--c); margin: auto 0 14px; }
.ccard .pf { font-size: 14px; font-style: italic; color: #6d6d8a; min-height: 36px; line-height: 18px; }
.ccard .ft { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.status { font-size: 13px; border-radius: 12px; padding: 3px 12px; border: 1.5px solid currentColor; }
.status.Live, .status.Delivered, .status.Production { color: #0a8a5c; }
.status.Pilot { color: #e06a00; }
.status.Prototype { color: var(--express); }
.status.Concept, .status.Proposed { color: #fff; }
.open-case { font-size: 17px; color: #8c8ca8; display: flex; align-items: center; gap: 8px; transition: color .3s, gap .3s var(--ease); }
.open-case svg { width: 5px; height: 9px; }
.ccard:hover .open-case { color: var(--power); gap: 13px; }
.scard { background: #fff; box-shadow: 0 6px 22px rgba(27, 23, 104, .09); padding: 20px 20px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.scard:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(27, 23, 104, .15); }
.scard .big { font-size: 34px; font-weight: 700; color: var(--c); white-space: nowrap; min-width: 92px; }
.scard .tg { font-size: 12px; letter-spacing: .08em; color: var(--c); font-weight: 600; text-transform: uppercase; }
.scard h4 { margin: 2px 0 4px; font-size: 19px; font-weight: 700; line-height: 21px; }
.scard .ds { font-size: 14px; line-height: 18px; color: #4a4a6a; }
.principles { display: flex; align-items: center; gap: 14px; margin-top: 46px; font-size: 18px; color: #5c5c7a; }
.principles i { font-style: normal; color: #b5b5c8; }
.tcard { background: var(--power); color: #fff; padding: 22px 22px 18px; display: flex; flex-direction: column; cursor: pointer; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.tcard:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(27, 23, 104, .35); }
.tcard .tg { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #d6d5ef; }
.tcard h4 { margin: 6px 0 14px; font-size: 26px; font-weight: 700; }
.tcard .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9c9bc6; margin-top: 10px; }
.tcard .k.or { color: var(--evidence); }
.tcard .tod { font-size: 14px; color: #8f8ec0; text-decoration: line-through; margin-top: 4px; line-height: 18px; }
.tcard .wa { font-size: 17px; font-weight: 600; margin-top: 4px; line-height: 22px; }
.tcard .rl { width: 40px; height: 3px; background: var(--connect); margin: 14px 0 4px; }
.tcard .v { font-size: 14px; margin-top: 4px; line-height: 18px; }
.tcard .ft { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; }
.tcard .open-case { color: #cfcde8; }
.tcard:hover .open-case { color: #fff; gap: 13px; }
.impact-note { margin-top: 16px; background: #fff; box-shadow: 0 6px 22px rgba(27, 23, 104, .08); border-left: 4px solid var(--evidence); padding: 18px 24px; }
.impact-note b { display: block; font-size: 13px; letter-spacing: .08em; color: var(--evidence); font-weight: 700; margin-bottom: 6px; }
.impact-note p { font-size: 21px; font-weight: 700; }
.btn-row { display: flex; gap: 14px; margin-top: 18px; }
.btn { height: 52px; border-radius: 26px; padding: 0 26px; font-size: 17px; font-weight: 700; letter-spacing: .02em; border: 1.5px solid #dcdde6; background: #fff; transition: transform .4s var(--ease), box-shadow .4s, background .3s, color .3s; }
.btn.dark { background: var(--power); color: #fff; border-color: var(--power); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(27, 23, 104, .18); }

/* Case study popup */
.cs-bg { left: 36px; top: 80px; width: 1848px; height: 914px; overflow: hidden; }
.cs-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.6s var(--ease); }
.open .cs-bg img { transform: scale(1); }
.cs-chip { left: 135px; top: 135px; height: 29px; padding: 0 30px; border-radius: 15px; background: #fff; color: var(--c); font-size: 16px; line-height: 29px; letter-spacing: .04em; }
.cs-left { left: 135px; top: 208px; width: 630px; height: 786px; background: var(--c); color: #fff; padding: 70px 64px; display: flex; flex-direction: column; }
.cs-left .tg { font-size: 16px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .9; }
.cs-left .big { font-size: 120px; line-height: 1; font-weight: 700; margin-top: auto; letter-spacing: -.02em; }
.cs-left .bl { font-size: 26px; line-height: 32px; margin-top: 16px; max-width: 460px; }
.cs-left .grp { margin-top: 44px; display: flex; gap: 12px; align-items: center; }
.cs-left .grp .status { color: #fff; font-size: 16px; padding: 4px 16px; }
.cs-left .grp span { font-size: 17px; opacity: .9; }
.cs-left .xw { position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; opacity: .14; color: #fff; }
.cs-right { left: 765px; top: 208px; width: 1006px; height: 786px; background: #fff; }
.cs-title { position: absolute; left: 59px; top: 76px; width: 760px; font-size: 34px; line-height: 40px; font-weight: 700; }
.cs-tabs { position: absolute; left: 59px; top: 165px; display: flex; gap: 14px; }
.cs-tab {
  height: 52px; padding: 0 20px; display: flex; align-items: center; gap: 22px; background: #fff;
  border: 1.5px solid #e6e7ec; box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
  font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--meta);
  transition: color .3s, border-color .3s, transform .35s var(--ease);
}
.cs-tab svg { width: 8px; height: 14px; transition: transform .3s var(--ease); }
.cs-tab:hover { transform: translateY(-2px); color: var(--power); }
.cs-tab.on { color: var(--c); border-color: var(--c); box-shadow: none; }
.cs-tab.on svg { transform: rotate(90deg); }
.cs-body { position: absolute; left: 59px; top: 243px; width: 896px; min-height: 363px; background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .09); padding: 30px 26px 30px; }
.cs-body::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--c); transform-origin: 0 50%; animation: aGrowX .8s var(--ease) both; }
.cs-body h5 { margin: 0 0 8px; font-size: 20px; letter-spacing: .05em; color: var(--c); text-transform: uppercase; }
.cs-body p { font-size: 22px; line-height: 32px; }
.cs-body .swap { animation: aBlur .6s var(--ease) both; }

/* Library overlay */
.lib-panel { left: 36px; top: 80px; width: 1848px; height: 914px; background: var(--grey-a); }
.lib-head { position: absolute; left: 96px; top: 64px; }
.lib-head h2 { margin: 0; font-size: 54px; font-weight: 700; }
.lib-head p { font-size: 24px; margin-top: 6px; color: #4a4a6a; }
.lib-filters { position: absolute; right: 150px; top: 92px; display: flex; gap: 10px; }
.lib-filters button { height: 44px; padding: 0 22px; border-radius: 22px; border: 1.5px solid #dcdde6; background: #fff; font-size: 17px; font-weight: 600; transition: all .3s var(--ease); }
.lib-filters button.on { background: var(--power); color: #fff; border-color: var(--power); }
.lib-grid { position: absolute; left: 96px; top: 210px; width: 1656px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lib-card { background: #fff; box-shadow: 0 6px 22px rgba(27, 23, 104, .08); padding: 20px 22px; height: 150px; display: flex; flex-direction: column; cursor: pointer; position: relative; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s, opacity .4s; }
.lib-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); transition: width .4s var(--ease); }
.lib-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(27, 23, 104, .15); }
.lib-card:hover::before { width: 8px; }
.lib-card .tg { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.lib-card h4 { margin: 6px 0 0; font-size: 22px; line-height: 26px; font-weight: 700; }
.lib-card .ft { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.lib-card .ft .grp { font-size: 14px; color: #8c8ca8; }
.lib-card.hide { display: none; }


/* ---------- Modals ---------- */
.modal { position: absolute; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; transition: visibility 0s linear .6s; }
.modal.open { pointer-events: auto; visibility: visible; transition: none; }
.modal .ov { position: absolute; inset: 0; background: rgba(27, 23, 104, .8); opacity: 0; transition: opacity .5s var(--ease); }
.modal.open .ov { opacity: 1; }
.modal .mp { position: absolute; inset: 0; opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .45s var(--ease), transform .7s var(--ease); pointer-events: none; }
.modal.open .mp { opacity: 1; transform: none; }
.modal .mp > * { pointer-events: auto; }

/* ---------- Portrait advice ---------- */
#rotate {
  position: fixed; inset: 0; z-index: 9999; display: none;
  background: var(--power); color: #fff; text-align: center;
  flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 32px;
}
#rotate::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--spectrum); }
#rotate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--spectrum); }
#rotate .logo { width: 150px; }
#rotate .phone { width: 74px; height: 120px; border: 4px solid #fff; border-radius: 14px; position: relative; animation: turn 2.6s var(--ease-io) infinite; }
#rotate .phone::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 16px; height: 4px; border-radius: 2px; background: #fff; translate: -50% 0; }
#rotate h2 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; }
#rotate p { font-size: 18px; line-height: 26px; max-width: 320px; color: #d9d7f2; }
@keyframes turn { 0%, 15% { transform: rotate(0); } 45%, 70% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (orientation: portrait) {
  #rotate { display: flex; }
  #viewport { visibility: hidden; }
}

/* Keyboard hint toast */
.toast { position: fixed; left: 50%; bottom: 14vh; transform: translate(-50%, 20px); background: rgba(27, 23, 104, .92); color: #fff; padding: 12px 20px; border-radius: 24px; font-size: 14px; opacity: 0; transition: opacity .5s, transform .5s var(--ease); pointer-events: none; z-index: 999; letter-spacing: .02em; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  [data-a] { opacity: 1; }
}

/* ---------- Opening: one plus shared by cover, plus and value ---------- */
.open-x {
  position: absolute; left: 814px; top: 394px; width: 292px; height: 292px; z-index: 4; pointer-events: none;
  opacity: 0; transform: translateY(-61px) scale(.02) rotate(-90deg);
  transition: transform 1.15s cubic-bezier(.65, 0, .25, 1), opacity .5s ease;
}
.open-x .ox-line { position: absolute; inset: 0; color: #fff; transition: opacity .45s ease; filter: drop-shadow(0 10px 30px rgba(27, 23, 104, .3)); }
.open-x .ox-line svg { width: 100%; height: 100%; display: block; }
.open-x .ox-art {
  position: absolute; inset: 0; opacity: 0; overflow: hidden; transition: opacity .6s ease;
  clip-path: polygon(33.33% 0, 66.67% 0, 66.67% 33.33%, 100% 33.33%, 100% 66.67%, 66.67% 66.67%, 66.67% 100%, 33.33% 100%, 33.33% 66.67%, 0 66.67%, 0 33.33%, 33.33% 33.33%);
}
.open-x .ox-art img { position: absolute; left: -60%; top: -60%; width: 220%; height: 220%; object-fit: cover; transform: rotate(-45deg); }
.open-x.ox-start { opacity: 0; transform: translateY(-61px) scale(.02) rotate(-90deg); transition: none; }
.open-x.ox-cover { opacity: 1; transform: translateY(-61px) scale(.185); transition: transform 1.1s var(--spring), opacity .4s ease; }
.open-x.ox-plus { opacity: 1; transform: none; }
.open-x.ox-value { opacity: 1; transform: rotate(45deg) scale(1.03); }
.open-x.ox-value .ox-line { opacity: 0; transition-delay: .55s; }
.open-x.ox-value .ox-art { opacity: 1; transition-delay: .4s; }
.open-x.ox-off { opacity: 0; transition: opacity .25s ease; }
.open-x.ox-off .ox-line { opacity: 0; }

/* ---------- Manifesto: the X stays put, photos slide in ---------- */
.man-x-fixed {
  position: absolute; left: 856px; top: 467px; width: 147px; height: 147px; z-index: 4; color: #fff; pointer-events: none;
  opacity: 0; transform: rotate(-135deg) scale(.3);
  transition: opacity .3s ease, transform .3s ease;
}
.man-x-fixed.on { opacity: 1; transform: none; transition: opacity .5s ease .35s, transform 1.2s var(--spring) .35s; }
.mode-man .man-left { animation: aFade .8s ease both; }
.mode-man .man-photo img { animation: photoSlide 1.1s cubic-bezier(.65, 0, .25, 1) both; }
.mode-man.from-prev .man-photo img { animation-name: photoSlideL; }
@keyframes photoSlide { from { transform: translate3d(100%, 0, 0); } to { transform: none; } }
@keyframes photoSlideL { from { transform: translate3d(-100%, 0, 0); } to { transform: none; } }

/* ---------- Summit follow-up: boxes slide out of their coloured lines ---------- */
.amb-card { padding: 0; background: none; box-shadow: none; overflow: visible; }
.amb-card::before { display: none; }
.amb-card:hover { box-shadow: none; }
.amb-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); z-index: 2; transition: width .5s var(--ease); }
.amb-card:hover .amb-bar { width: 10px; }
.amb-box { position: absolute; left: 5px; top: 0; right: 0; bottom: 0; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .08); padding: 34px 36px 0 35px; transition: box-shadow .5s; }
.amb-card:hover .amb-box { box-shadow: 0 18px 40px rgba(27, 23, 104, .14); }
[data-a="slideout"] { --kf: aSlideOut; --dur: 1s; }
@keyframes aSlideOut { from { opacity: 1; clip-path: inset(0 100% 0 0); transform: translateX(-24px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
[data-a="growy"] { transform-origin: 50% 0; }

/* ---------- DS hub: corner art reveals from the centre ---------- */
.dia-rev { position: absolute; inset: 0; }
[data-a="corner"] { --kf: aCorner; --dur: 1.3s; }
@keyframes aCorner { from { opacity: 1; clip-path: circle(0px at var(--o)); } to { opacity: 1; clip-path: circle(560px at var(--o)); } }

/* ---------- Header nav as a flex row (Q&A removed) ---------- */
.navbar { position: absolute; left: 290px; right: 36px; top: 0; height: 80px; display: flex; justify-content: space-between; align-items: center; }
.navbar .nav { position: relative; top: auto; left: auto; translate: none; display: flex; align-items: center; gap: 14px; height: 80px; padding-top: 2px; }
.navbar .nav::after { bottom: 18px; }
.navbar .nav .chev { position: static; width: 16px; height: 9px; display: block; }
.navbar .nav .chev svg { display: block; }

/* ---------- Case study pop-up (Figma CS frames) ---------- */
.cs-left { left: 135px; top: 209px; width: 630px; height: 785px; background: var(--c); padding: 39px 40px; display: flex; flex-direction: column; gap: 30px; }
.cs-slot { position: relative; width: 550px; height: 338px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.cs-left.one .cs-slot[data-slot="0"] { height: 706px; }
.cs-left.one .cs-slot[data-slot="1"] { display: none; }
.cs-slot img { width: 100%; height: 100%; object-fit: cover; }
.cs-slot-art { position: absolute; inset: 0; background: url(assets/img/art-clinical.jpg) center/cover; opacity: .55; mix-blend-mode: luminosity; transform: scale(1.15); }
.cs-slot[data-slot="1"] .cs-slot-art { background-position: 80% 70%; transform: scale(1.35) rotate(180deg); }
.cs-slot-x { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; translate: -50% -50%; color: rgba(255, 255, 255, .85); }
.cs-slot-x svg { width: 100%; height: 100%; }
.open .cs-slot-x { animation: aXin 1.3s var(--ease) .5s both; }
.open .cs-slot[data-slot="1"] .cs-slot-x { animation-delay: .65s; }
.cs-right { left: 765px; top: 209px; width: 1007px; height: 785px; background: #fff; }
.cs-client { position: absolute; left: 60px; top: 37px; width: 789px; font-size: 13px; line-height: 17px; font-weight: 700; letter-spacing: .08em; color: #6b6a92; }
.cs-title { position: absolute; left: 60px; top: 60px; width: 800px; font-size: 32px; line-height: 38px; font-weight: 700; }
.cs-tabs { position: absolute; left: 61px; top: 128px; display: flex; gap: 14px; }
.cs-right.tall .cs-client { top: 18px; }
.cs-right.tall .cs-title { top: 40px; }
.cs-tab { height: 49px; font-size: 22px; padding: 0 18px; gap: 20px; }
.cs-body { position: absolute; left: 60px; top: 201px; width: 860px; min-height: 362px; max-height: 560px; overflow: auto; padding: 22px 22px 26px; }
.cs-body h5 { font-size: 18px; margin-bottom: 12px; }
.cs-body p, .cs-body li { font-size: 21px; line-height: 30px; }
.cs-body p + p { margin-top: 12px; }
.cs-body ul { margin: 4px 0 0; padding: 0; list-style: none; }
.cs-body li { position: relative; padding-left: 26px; margin-bottom: 6px; }
.cs-body li::before { content: "—"; position: absolute; left: 0; color: var(--c); }
.cs-body.long p, .cs-body.long li { font-size: 19px; line-height: 27px; }

/* ---------- Library by tier ---------- */
.lib-head .lib-framing { max-width: 1100px; min-height: 32px; }
.lib-filters { top: 78px; }
.lib-grid { top: 230px; grid-template-columns: repeat(4, 1fr); }
.lib-card { height: 168px; }
.lib-card .tg { letter-spacing: .07em; color: #6b6a92; }
.lib-card h4 { font-size: 23px; line-height: 28px; margin-top: 8px; }
.lib-card .open-case { font-size: 15px; }
.lib-card:hover .open-case { color: var(--power); gap: 13px; }

/* ---------- Library: one grid, no tiers ---------- */
.lib-grid { top: 210px; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lib-card { height: 116px; padding: 16px 18px; }
.lib-card h4 { font-size: 19px; line-height: 23px; margin-top: 6px; }
.lib-card .tg { font-size: 11px; }
.lib-card .ft { justify-content: flex-end; }
.lib-card .open-case { font-size: 14px; }

/* ---------- Closing slide (from the prototype, in the current design) ---------- */
.close-eyebrow { left: 960px; translate: -50% 0; top: 200px; color: var(--adapt); font-size: 22px; letter-spacing: .05em; white-space: nowrap; }
.close-q { left: 0; top: 222px; width: 1920px; height: 120px; display: flex; justify-content: center; align-items: center; gap: 32px; }
.close-q .mask { display: inline-block; overflow: hidden; padding: 4px 0; }
.close-qt { display: inline-block; font-size: 80px; line-height: 88px; font-weight: 700; white-space: nowrap; }
.close-mark { display: inline-block; width: 120px; height: 120px; flex: none; margin-top: 8px; }
.close-mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
.close-card { position: absolute; top: 450px; width: 330px; height: 120px; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .08); padding: 22px 24px 0; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.close-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(27, 23, 104, .14); }
.close-line { position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--c); transform-origin: 0 50%; }
.close-card .n { font-size: 21px; font-weight: 700; color: var(--c); letter-spacing: .02em; }
.close-card p { font-size: 24px; line-height: 32px; font-weight: 500; margin-top: 4px; }
.close-tag { left: 0; top: 640px; width: 1920px; text-align: center; font-size: 64px; line-height: 66.5px; font-weight: 700; white-space: nowrap; letter-spacing: 0; }
.close-tag span { background: linear-gradient(90deg, #5e5eb7 0%, #b04fc4 40%, #e93cac 70%, #f8485e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: tagShift 6s ease-in-out infinite alternate; }
@keyframes tagShift { from { background-position: 0 0; } to { background-position: 100% 0; } }
.close-logo { left: 853px; top: 780px; width: 214px; }
.close-sign { left: 960px; translate: -50% 0; top: 860px; font-size: 22px; letter-spacing: .05em; white-space: nowrap; }

/* DS hub diamonds: match the Figma masks (213 x 213, no rotation) */
.ds-card .dia { width: 213px; height: 213px; transform: none; transition: none; }
.ds-card .dia img { left: 0; top: 0; width: 100%; height: 100%; transform: scale(1.25); transition: transform 1.3s var(--ease); }
.ds-card:hover .dia { transform: none; }
.ds-card:hover .dia img { transform: scale(1.45); }

/* Practice pop-up: the word is part of the image; the tag sits above it */
.pp-hero .pp-pow { position: absolute; font-size: 55px; line-height: 73px; padding: 0 18px; margin: 0; }

/* Nav hover underline: AXON purple (the P04 colour) */
.nav::after { background: var(--adapt); opacity: 1; height: 3px; border-radius: 2px; }

/* Novo work · Creative & Digital row: keep each label's lines as in Figma */
.nw-card.three .nw-item { gap: 16px; }
.nw-card.three .nw-item .n { min-width: 0; }
.nw-card.three .nw-item .t { white-space: nowrap; font-size: 18px; }

/* ---------- Summit follow-up part 1: what we agreed ---------- */
.agree { top: 292px; width: 808px; height: 560px; padding: 40px 46px; }
.agree-axon { left: 132px; background: var(--power); color: #fff; }
.agree-novo { left: 980px; background: #fff; box-shadow: 0 10px 34px rgba(27, 23, 104, .1); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.agree-axon { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.agree:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(27, 23, 104, .2); }
.agree-line { position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--adapt); transform-origin: 0 50%; }
.agree h4 { margin: 0 0 30px; font-size: 20px; line-height: 23px; font-weight: 700; letter-spacing: .01em; }
.agree-novo h4 { color: var(--adapt); }
.agree ul { margin: 0; padding: 0; list-style: none; }
.agree li { position: relative; padding-left: 30px; font-size: 21px; line-height: 30px; margin-bottom: 14px; }
.agree li::before { content: ""; position: absolute; left: 0; top: 14px; width: 16px; height: 3px; background: #fff; }
.agree-novo li::before { background: var(--adapt); }

/* ---------- Introduction part 1: the sweet spot / offices ---------- */
.offices { left: 972px; top: 144px; width: 816px; height: 784px; background: var(--power); color: #fff; overflow: hidden; }
.off-x { position: absolute; right: -70px; bottom: -70px; width: 360px; height: 360px; color: rgba(255, 255, 255, .06); }
.off-eb { position: absolute; left: 56px; top: 236px; font-size: 22px; font-weight: 500; letter-spacing: .05em; }
.off-t { position: absolute; left: 56px; top: 270px; font-size: 26px; line-height: 36px; }
.off-line { position: absolute; left: 56px; top: 382px; width: 704px; height: 4px; transform-origin: 0 50%; }
.off-city { position: absolute; top: 373px; width: 235px; text-align: center; }
.off-dot { display: block; width: 22px; height: 22px; margin: 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
.play .off-dot.done { animation: offPing 2.4s ease-out infinite; }
@keyframes offPing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
.off-c { margin-top: 27px; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.off-r { margin-top: 8px; font-size: 16px; line-height: 22px; opacity: .85; }

/* ---------- Data safety pop-up (Figma P51a) ---------- */
.principles .safe-link { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 18px; color: #5c5c7a; background: none; border: 0; transition: color .3s, gap .3s var(--ease); }
.principles .safe-link:hover { color: var(--power); gap: 13px; }
.principles .safe-link svg { width: 8px; height: 13px; }
.sf-panel { left: 136px; top: 209px; width: 1636px; height: 785px; background: #fff; border-top: 4px solid var(--engage); }
.sf-eb { top: 46px; margin: 0; font-size: 22px; line-height: 26px; }
.sf-title { left: 60px; top: 78px; margin: 0; font-size: 48px; line-height: 57.6px; font-weight: 700; color: var(--power); }
.sf-quote { left: 60px; top: 160px; width: 600px; height: 116px; background: var(--grey-a); border-left: 4px solid var(--engage); padding: 22px 24px 0 24px; }
.sf-quote p { margin: 0; font-size: 19px; line-height: 22.8px; font-style: italic; color: var(--power); }
.sf-rings { left: 140px; top: 296px; width: 440px; height: 440px; }
.sf-ring { position: absolute; left: var(--ro); top: var(--ro); width: var(--rd); height: var(--rd); border-radius: 50%; transition: transform .6s var(--ease); }
.sf-rings:hover .sf-ring:nth-child(1) { transform: scale(1.02); }
.sf-rl { position: absolute; left: 0; width: 440px; text-align: center; font-size: 16px; line-height: 18px; font-weight: 700; color: #fff; }
.sf-badge { left: 210px; top: 708px; width: 300px; height: 47px; background: #fff; box-shadow: 0 6px 22px rgba(27, 23, 104, .14); text-align: center; font-size: 18px; line-height: 47px; font-weight: 700; color: var(--power); }
.sf-acc { left: 720px; top: 116px; width: 856px; display: flex; flex-direction: column; gap: 10px; }
.sf-item { background: var(--grey-a); border: 1px solid transparent; border-left: 4px solid transparent; transition: background .35s, border-color .35s, box-shadow .35s; }
.sf-item.open { background: #fff; border-color: var(--engage); box-shadow: 0 6px 22px rgba(27, 23, 104, .1); }
.sf-q { width: 100%; display: flex; align-items: center; gap: 20px; padding: 18px 24px 18px 24px; background: none; border: 0; text-align: left; font-size: 20px; line-height: 24px; font-weight: 700; color: var(--power); }
.sf-q span { flex: 1; }
.sf-q svg { width: 18px; height: 18px; flex: none; stroke: var(--engage); stroke-width: 3; stroke-linecap: round; fill: none; transition: transform .45s var(--spring); }
.sf-item.open .sf-q svg { transform: rotate(45deg); }
.sf-item:not(.open):hover { background: #eef0f6; }
.sf-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.sf-a > div { overflow: hidden; }
.sf-item.open .sf-a { grid-template-rows: 1fr; }
.sf-a p { margin: 0; padding: 0 60px 18px 24px; font-size: 19px; line-height: 22.8px; color: var(--power); opacity: 0; transition: opacity .3s; }
.sf-item.open .sf-a p { opacity: 1; transition: opacity .4s .15s; }

/* ---------- Deep dives (slide up from Together; ported from the Hemab pitch) ---------- */
.dv {
  --deep: #0d0a33; --greyA: #f8f9fa; --greyB: #e0e4e7; --ink: #171717; --mute: #525252;
  --grad: linear-gradient(90deg, #00b373 0%, #00a3e0 20%, #5e5eb7 40%, #e93cac 60%, #f8485e 80%, #ff7500 100%);
  --dark-bg: linear-gradient(135deg, #0d0a33 0%, #1b1768 100%);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --w6: 600; --w7: 600; --w8: 700;
  position: absolute; left: 0; top: 86px; width: 1920px; height: 994px; z-index: 70; overflow: hidden;
  background: #fff; color: var(--ink);
  transform: translateY(101%); visibility: hidden;
  transition: transform .9s var(--ease), visibility 0s linear .9s, background .5s;
  box-shadow: 0 -20px 60px rgba(13, 10, 51, .25);
}
.dv.open { transform: none; visibility: visible; transition: transform .9s var(--ease), visibility 0s, background .5s; }
.dv.instant { transition: none !important; }
.dv.dark { background: var(--power); }
.stage.dv-on .hdr { z-index: 75; }
.dv button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.dv-canvas { position: absolute; left: 0; top: 0; width: 1600px; height: 764px; transform: scale(1.2); transform-origin: 0 0; }
.dv-pages { position: absolute; inset: 0; overflow: hidden; }
.dpg { position: absolute; inset: 0; background: #fff; visibility: hidden; }
.dpg.cur { visibility: visible; }
.dpg.dark { background: var(--power); color: #fff; }
.dv-bar { position: absolute; left: 0; top: 0; width: 1600px; height: 60px; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; background: var(--greyA); transition: background .5s; }
.dv.dark .dv-bar { background: rgba(255, 255, 255, .06); }
.dv-back { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px 9px 16px; border-radius: 100px; background: #fff !important; border: 1px solid var(--greyB) !important; font-size: 12px; font-weight: var(--w7); letter-spacing: .12em; color: var(--power) !important; transition: transform .2s; }
.dv-back:hover { transform: translateY(-1px); }
.dv.dark .dv-back { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.dv-back svg { width: 14px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dv-tabs { display: flex; gap: 8px; }
.dv-tabs button { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 100px; font-size: 11px; font-weight: var(--w8); letter-spacing: .12em; color: var(--power); background: #fff; border: 1px solid var(--greyB); transition: background .3s, color .3s, border-color .3s; }
.dv.dark .dv-tabs button { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.dv-tabs button.on, .dv.dark .dv-tabs button.on { color: #fff; background: var(--tc); border-color: transparent; }
.dv-segs { display: flex; gap: 6px; align-items: center; min-width: 120px; justify-content: flex-end; }
.dv-segs button { width: 22px; height: 6px; border-radius: 3px; background: var(--greyB); transition: width .4s var(--ease-out), background .4s; }
.dv.dark .dv-segs button { background: rgba(255, 255, 255, .2); }
.dv-segs button.on { width: 40px; }
.dv-foot { position: absolute; left: 0; top: 917px; width: 1920px; height: 77px; display: flex; align-items: center; justify-content: center; gap: 28px; }
.dv-hint { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--mute); }
.dv.dark .dv-hint { color: rgba(255, 255, 255, .55); }
.dv-arr { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--greyB) !important; color: var(--power) !important; transition: transform .25s, opacity .3s; }
.dv.dark .dv-arr { border-color: rgba(255, 255, 255, .3) !important; color: #fff !important; }
.dv-arr:hover:not(:disabled) { transform: scale(1.08); }
.dv-arr:disabled { opacity: .25; cursor: default; }
.dv-arr svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* helpers (Hemab type scale, scoped) */
.dv .lb { font-size: 11px; font-weight: var(--w8); letter-spacing: .16em; text-transform: uppercase; }
.dv .dh1 { font-size: 44px; line-height: 1.06; font-weight: var(--w8); color: var(--power); }
.dv .dark .dh1 { color: #fff; }
.dv .dlead { font-size: 17px; line-height: 1.5; color: var(--ink); }
.dv .dsm { font-size: 12.5px; line-height: 1.45; color: var(--mute); }
.dv .dgrad { color: var(--adapt); }
.dv .drow { display: flex; align-items: center; }
.dv .dpill { display: inline-flex; align-items: center; gap: 6px; border-radius: 100px; padding: 6px 12px; font-size: 12px; font-weight: var(--w7); white-space: nowrap; }
.dv .dpill.lg { padding: 9px 16px; font-size: 14px; }
.dv .dround { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.dv .dround svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dv .dbtn { display: inline-flex; align-items: center; gap: 10px; border-radius: 100px; font-size: 13px; font-weight: var(--w8); letter-spacing: .1em; text-transform: uppercase; background: var(--power); color: #fff; transition: transform .25s var(--ease-out), box-shadow .25s; }
.dv .dbtn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27, 23, 104, .25); }

/* reveal: elements with data-r fade in when their page is in */
.dv [data-r] { opacity: 0; transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 250ms); }
.dv [data-r=""], .dv [data-r="up"] { transform: translateY(18px); }
.dv [data-r="left"] { transform: translateX(28px); }
.dv [data-r="right"] { transform: translateX(-28px); }
.dv [data-r="scale"] { transform: scale(.92); }
.dv [data-r="pop"] { transform: scale(.4); transition-timing-function: var(--ease-out), cubic-bezier(.34, 1.56, .64, 1); }
.dv [data-r="grow-x"] { transform: scaleX(0); transform-origin: left center; opacity: 1; }
.dv .is-in [data-r] { opacity: 1; transform: none; }
@keyframes dvSnap { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes dvPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }
@keyframes dvBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes dvDash { to { stroke-dashoffset: -40; } }

/* MSL 1 */
.m1-vis { position: absolute; left: 64px; top: 420px; width: 600px; height: 300px; overflow: hidden; background: var(--power); }
.m1-slide { position: absolute; width: 150px; height: 92px; border-radius: 5px; background: #fff; }
.m1-mod { position: absolute; width: 60px; height: 40px; border-radius: 5px; background: #fff; transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.is-in .m1-mod { transform: scale(1); }
.m1-tog { position: absolute; left: 740px; top: 96px; display: flex; padding: 4px; border-radius: 100px; background: var(--greyA); }
.m1-tog button { padding: 8px 18px; border-radius: 100px; font-size: 12px; font-weight: var(--w8); letter-spacing: .12em; color: var(--mute); transition: background .35s, color .35s; }
.m1-tog button.on { background: var(--adapt); color: #fff; }
.m1-row { position: absolute; left: 740px; width: 796px; height: 80px; display: flex; align-items: center; gap: 16px; }
.m1-old { width: 270px; font-size: 14px; line-height: 1.4; color: var(--mute); text-decoration: line-through; transition: color .4s; }
.m1-new { width: 458px; height: 72px; display: flex; align-items: center; gap: 12px; padding-left: 18px; border-radius: 0; background: #fff; border: 1px solid var(--greyB); box-shadow: 0 4px 12px rgba(27, 23, 104, .06); font-size: 16px; font-weight: var(--w8); color: var(--power); line-height: 1.35; transition: opacity .45s, transform .45s var(--ease-out); }
.m1-today .m1-old { color: var(--power); font-weight: var(--w7); text-decoration: none; }
.m1-today .m1-new { opacity: .25; transform: translateX(14px); }

/* MSL 2 */
.m2-dev { position: absolute; top: 250px; transform: translateY(30px); opacity: 0; transition: transform .9s var(--ease-out), opacity .7s; }
.is-in .m2-dev { transform: none; opacity: 1; }
.m2-rank { position: absolute; left: 12px; width: 128px; height: 34px; border-radius: 8px; background: var(--greyA); font-size: 10.5px; font-weight: var(--w7); color: var(--ink); padding: 0 10px; display: flex; align-items: center; line-height: 1.15; transition: top .6s var(--ease-io); }
.m2-rank.drag { background: #e3f4fb; outline: 1.5px solid var(--engage); box-shadow: 0 6px 12px rgba(0, 0, 0, .15); z-index: 2; }
.m2-dotrun { position: absolute; top: 197px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)); animation: m2run 8s ease-in-out infinite; }
@keyframes m2run { 0% { left: 110px; } 25% { left: 616px; } 50% { left: 984px; } 75%, 100% { left: 1352px; } }
.m2-cell { position: absolute; border-radius: 6px; font-size: 7.5px; font-weight: var(--w7); color: var(--mute); padding: 6px; transition: background .4s, color .4s; }

/* MSL 3 */
.m3-node { position: absolute; top: 342px; width: 60px; height: 60px; border-radius: 50%; border: 4px solid #fff; color: #fff; font-size: 20px; font-weight: var(--w8); display: grid; place-items: center; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s, opacity .7s; }
.m3-node.hit { transform: scale(1.18) !important; box-shadow: 0 0 0 8px color-mix(in srgb, var(--nc) 25%, transparent); }
.m3-pulse { position: absolute; top: 350px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(176, 79, 196, .9), rgba(176, 79, 196, 0)); opacity: 0; }
.m3-notif { position: absolute; left: 10px; top: 120px; width: 192px; border-radius: 16px; background: rgba(255, 255, 255, .95); padding: 10px 12px 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); transform: translateY(-30px); opacity: 0; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s; }
.m3-notif.show { transform: none; opacity: 1; }
.m3-opt { position: absolute; top: 560px; width: 520px; padding: 16px 22px 18px; }

/* NutriGuide */
.ng-in { display: inline-flex; padding: 8px 14px; border-radius: 100px; font-size: 14px; font-weight: var(--w7); color: #fff !important; border: 1px solid !important; transition: transform .25s, opacity .3s; }
.ng-in:hover { transform: translateY(-2px) !important; }
.ng-in.off { opacity: .35 !important; }
.ng-card { position: absolute; left: 920px; top: 112px; width: 380px; height: 520px; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.ng-pop { animation: ngpop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ngpop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.ng-flow path { stroke-dasharray: 4 6; animation: dvDash 1.2s linear infinite; }
.ng-core { position: absolute; left: 595px; top: 415px; width: 130px; height: 130px; border-radius: 50%; background: var(--adapt); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 50px rgba(176, 79, 196, .55); }
.is-in .ng-core { animation: dvBreathe 3s ease-in-out infinite; }
.ng-core.think { animation: ngThink .8s ease-in-out; }
@keyframes ngThink { 50% { transform: scale(1.12); box-shadow: 0 0 80px rgba(176, 79, 196, .9); } }

/* Together hub cards (Hemab style) */
.hcard { position: relative; background: var(--power); color: #fff; display: flex; flex-direction: column; cursor: pointer; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.hcard:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(13, 10, 51, .35); }
.hcard .hv { position: relative; height: 196px; overflow: hidden; flex: none; }
.hcard .hv-in { position: absolute; left: 0; top: 0; width: 472px; height: 300px; transform: scale(.7); transform-origin: 0 0; }
.hcard .slide-s { position: absolute; width: 120px; height: 74px; border-radius: 4px; background: #fff; transition: transform .7s var(--ease), opacity .5s; }
.hcard:hover .slide-s { transform: translateX(60px) scale(.6) !important; opacity: 0; }
.hcard .mod { position: absolute; width: 54px; height: 40px; border-radius: 4px; background: #fff; transition: transform .5s var(--ease); }
.hcard:hover .mod { transform: scale(1.08); }
.hcard .bub { position: absolute; border-radius: 10px; transition: transform .5s var(--ease); }
.hcard:hover .bub { transform: translateY(-6px); }
.hcard .book { transition: transform .7s var(--ease); }
.hcard:hover .book { transform: rotate(-12deg) translateX(-14px); }
.hcard .recipe { transition: transform .7s var(--ease); }
.hcard:hover .recipe { transform: translateY(-8px) rotate(2deg); }
.hcard .hb { padding: 18px 22px 0; }
.hcard .status { font-size: 14px; }
.hcard .tg { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; line-height: 18px; }
.hcard h4 { margin: 4px 0 0; font-size: 26px; line-height: 32px; font-weight: 700; }
.hcard .tod { font-size: 14px; color: #8f8ec0; text-decoration: line-through; margin-top: 10px; line-height: 18px; }
.hcard .wa { font-size: 18px; font-weight: 500; margin-top: 6px; line-height: 21.6px; }
.hcard .hf { margin-top: auto; padding: 14px 22px 20px; display: flex; align-items: center; justify-content: space-between; }
.hcard .hx { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: .06em; background: rgba(255, 255, 255, .1); transition: background .3s; }
.hcard:hover .hx { background: var(--hc); }
.hcard .hx i { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--power); display: grid; place-items: center; font-style: normal; transition: transform .3s; }
.hcard:hover .hx i { transform: translateY(3px); }
.hcard .hx.side:hover i, .hcard:hover .hx.side i { transform: translateX(3px); }
.hcard .hx svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }
.hcard .hpulse { animation: hPulse 2.4s ease-in-out infinite; }

/* Field companion */
.f1-b { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .5s var(--ease-out); }
.f1-b.show { opacity: 1; transform: none; }
.f1-typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mute); margin-right: 3px; animation: dvType 1s infinite; }
.f1-typing span:nth-child(2) { animation-delay: .15s; }
.f1-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dvType { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.dv .dpulse { animation: dvPulse 2.4s ease-in-out infinite; }
.f2-ring circle.sweep { transition: stroke-dashoffset 2.2s var(--ease-io) .4s; }
.is-in .f2-ring circle.sweep { stroke-dashoffset: 0 !important; }
.f2-orbit { position: absolute; left: 420px; top: 470px; width: 0; height: 0; animation: dvSpin 9s linear infinite; }
.f2-orbit span { position: absolute; left: 143px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--engage); box-shadow: 0 0 14px var(--engage); }
@keyframes dvSpin { to { transform: rotate(360deg); } }
.f2-cell { position: absolute; width: 92px; height: 34px; border-radius: 5px; background: var(--engage); opacity: 0; transition: opacity .8s; }

/* Frontline */
.fl-card { position: absolute; width: 118px; height: 86px; border-radius: 5px; background: #fff; transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.is-in .fl-card { transform: scale(1); }
.fl-topic { position: absolute; left: 10px; right: 10px; height: 70px; border-radius: 6px; background: #fff; border: 1px solid var(--greyB); padding: 7px 8px 0; overflow: hidden; transition: box-shadow .4s, transform .4s var(--ease-out), border-color .4s; }
.fl-topic.on { border-color: var(--engage); box-shadow: 0 6px 14px rgba(0, 163, 224, .25); transform: translateX(-2px) scale(1.02); }

/* ---------- DS · The human is always in the loop ---------- */
.hl-svg { left: 0; top: 0; pointer-events: none; overflow: visible; }
.hl-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.play .hl-path { animation: hlDraw 1.8s var(--ease) .4s forwards; }
@keyframes hlDraw { to { stroke-dashoffset: 0; } }
.hl-dot { offset-rotate: 0deg; opacity: 0; }
.play .hl-dot { animation: hlRun 9s linear 2.2s infinite, aFade .4s 2.2s forwards; }
@keyframes hlRun { from { offset-distance: 4%; } to { offset-distance: 104%; } }
.hl-node { position: absolute; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; font-weight: 700; letter-spacing: -.01em; z-index: 2; }
.hl-node.hi { background: var(--adapt); color: #fff; border: 4px solid #fff; box-shadow: 0 0 0 5px rgba(176, 79, 196, .22), 0 8px 20px rgba(27, 23, 104, .18); }
.hl-node.ai { background: #fff; color: var(--power); border: 4px solid var(--power); box-shadow: 0 8px 20px rgba(27, 23, 104, .18); }
.hl-node.hi::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(176, 79, 196, .35); animation: hlPulse 2.6s ease-in-out 3s infinite; opacity: 0; }
@keyframes hlPulse { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.hl-lab span { display: block; font-size: 18px; letter-spacing: .06em; font-weight: 500; }
.hl-lab b { display: block; font-size: 31px; line-height: 36px; font-weight: 700; color: var(--power); }
.hl-lab.hi span { color: var(--adapt); }
.hl-lab.ai span { color: var(--power); }
.hl-centre { left: 962px; top: 472px; translate: -50% 0; white-space: nowrap; font-size: 34px; color: var(--adapt); }
.hl-centre i { font-style: italic; }
.hl-what { left: 96px; top: 677px; font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--power); }
.hl-card { top: 718px; width: 422px; height: 200px; background: #fff; border-top: 4px solid var(--c); box-shadow: 0 6px 22px rgba(27, 23, 104, .09); padding: 18px 26px 0; }
.hl-card h4 { margin: 0 0 10px; font-size: 17px; letter-spacing: .06em; font-weight: 700; color: var(--power); }
.hl-card p { margin: 0; font-size: 16px; line-height: 20px; color: var(--power); }
.hl-band { left: 0; top: 899px; width: 1920px; height: 96px; overflow: hidden; }
.hl-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hl-rule { left: 107px; top: 929px; width: 1705px; height: 44px; border-radius: 22px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 15.6px; color: var(--power); white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.hl-rule b { margin-right: 5px; }

.sf-rule { left: 60px; top: 318px; width: 56px; height: 4px; background: var(--engage); transform-origin: 0 50%; }
.sf-promise { left: 60px; top: 338px; width: 600px; margin: 0; font-size: 34px; line-height: 40.8px; font-weight: 700; color: var(--power); }
.sf-safe { left: 60px; top: 410px; width: 600px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.sf-safe li { position: relative; padding-left: 26px; max-width: 586px; font-size: 20px; line-height: 24px; font-weight: 500; color: var(--power); }
.sf-safe li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; background: var(--engage); }