/* Beanstalkedu corporate site.
   Tokens are named after the Corporate System: navy, paper and graphite for
   the institution; the aKadmy palette only inside aKadmy areas. */

/* ---------- Fonts: self-hosted, latin subset, variable. Newsreader is weight 400 only and keeps its
   optical-size axis, which the browser sets from the font size. ---------- */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../assets/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/newsreader-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Colour */
  --navy: #182850;            /* Institutional navy: primary, headings, CTAs */
  --deep-navy: #101C3A;       /* Deep navy */
  --paper: #F5F2EB;           /* Paper: page ground */
  --stone: #EBE6DC;           /* Stone: section bands */
  --white: #FFFFFF;           /* White: alternate bands */
  --graphite: #1C1D20;        /* Graphite: body ink */
  --slate: #575A62;           /* Slate: secondary text */
  --hairline: #D8D1C3;        /* Hairline: rules */
  --green: #1E7A3C;           /* Green (logo-derived): accent on light */
  --green-on-navy: #4CC870;   /* Logo green, on navy */
  --green-on-stone: #1D763A;  /* the same green, darkened to reach 4.5:1 on stone */
  --statement-muted: #938B7D; /* "Models will change.": 3:1 on paper */
  --on-navy: #C9D0DC;         /* secondary text on navy */
  --dashed: #A49C8C;          /* dashed lines mean "not yet" */
  --field-line: #CFC7B8;
  --error: #B42318;
  --navy-gradient: radial-gradient(120% 160% at 100% 0%, rgba(58,110,205,0.5) 0%, rgba(58,110,205,0) 50%), linear-gradient(135deg, #0B1B45 0%, #13306F 55%, #1C4A98 100%);
  --navy-gradient-v: radial-gradient(70% 40% at 90% 8%, rgba(58,110,205,0.42) 0%, rgba(58,110,205,0) 60%), linear-gradient(180deg, #0B1B45 0%, #13306F 55%, #1A4590 100%);

  /* aKadmy product palette */
  --ak-navy: #002C69;
  --ak-blue-deep: #0348A8;
  --ak-indigo: #394FC0;
  --ak-ink: #1D1D1D;
  --ak-text: #52555E;
  --ak-line: #EDEDED;
  --ak-wash: #F7F4FF;
  --ak-violet: #472DAC;
  --ak-green: #55A451;
  --ak-blue: #3D85F4;
  --ak-red: #EA474A;
  --ak-yellow: #F8D054;
  --ak-sky: #73BFE1;

  /* Type */
  --font-corporate: 'Instrument Sans', system-ui, sans-serif;  /* everything institutional */
  --font-statement: 'Newsreader', Georgia, serif;              /* reserved statements */
  --font-akadmy: Inter, system-ui, sans-serif;                 /* aKadmy areas only */
  --text-eyebrow: 12px;
  --text-body: 17px;
  --leading-body: 1.65;

  /* Layout */
  --page-max: 1360px;
  --gutter: clamp(20px,4vw,56px);
  --header-h: 84px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); font-family: var(--font-corporate); color: var(--graphite); -webkit-font-smoothing: antialiased; }
:where(a) { color: var(--navy); text-decoration: none; }
:where(a:hover) { color: var(--green); }
:where(:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
[hidden] { display: none !important; }
@keyframes bsRun { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -100; } }

.page { font-family: var(--font-corporate); color: var(--graphite); background: var(--paper); overflow-x: clip; }
.page--legal { overflow-x: visible; min-height: 100vh; }
.spacer { flex: 1; }
.pretty { text-wrap: pretty; }
.balance { text-wrap: balance; }
.text-green { color: var(--green); }
.text-green-on-navy { color: var(--green-on-navy); }
.text-slate { color: var(--slate); }
.text-link { color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--navy); padding-top: 5px; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #FFFFFF; padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; color: #FFFFFF; }

.eyebrow { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.2em; color: var(--green); }
.eyebrow--on-navy { color: var(--green-on-navy); }
.eyebrow--on-stone { color: var(--green-on-stone); }
.eyebrow--corp { font-family: 'Instrument Sans', sans-serif; }

.body { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--slate); }
.body--520 { max-width: 520px; }
.body--540 { max-width: 540px; }
.body--560 { max-width: 560px; }

.h2-c { margin: 0; font-size: clamp(34px,4vw,58px); line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; color: var(--navy); }

/* Buttons: square corners across the corporate system */
.btn { display: inline-flex; align-items: center; font-weight: 600; }
.btn--42 { height: 42px; padding: 0 20px; font-size: 14px; white-space: nowrap; }
.btn--48 { height: 48px; padding: 0 22px; font-size: 15px; }
.btn--52 { height: 52px; padding: 0 24px; font-size: 15px; }
.btn--navy { background: var(--navy-gradient); color: #FFFFFF; }
.btn--navy:hover { filter: brightness(1.15); color: #FFFFFF; }
.btn--outline { border: 1px solid var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--stone); color: var(--navy); }
.btn--white { background: #FFFFFF; color: var(--navy); }
.btn--white:hover { background: var(--stone); color: var(--navy); }
.btn--ghost { border: 1px solid rgba(255,255,255,0.5); color: #FFFFFF; }
.btn--ghost:hover { background: rgba(255,255,255,0.08); color: #FFFFFF; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

/* Image slots: the photo fills its container */
.photo { position: relative; overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--tall { grid-row: span 2; }
.photo--portrait { aspect-ratio: 4 / 5; }

/* aKadmy mark: height N, width N x 512 / 341, radius max(3px, N x 0.08) */
.ak-mark { display: block; flex: none; object-fit: cover; }
.ak-mark--56 { height: 56px; width: calc(56px * 512 / 341); border-radius: max(3px, 4.48px); }
.ak-mark--36 { height: 36px; width: calc(36px * 512 / 341); border-radius: max(3px, 2.88px); }
.ak-mark--20 { height: 20px; width: calc(20px * 512 / 341); border-radius: max(3px, 1.6px); }

.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); }
.mosaic--6 { height: 6px; }
.mosaic--4 { position: absolute; left: 0; top: 0; right: 0; height: 4px; }
.mosaic span:nth-child(1) { background: var(--ak-violet); }
.mosaic span:nth-child(2) { background: var(--ak-green); }
.mosaic span:nth-child(3) { background: var(--ak-blue); }
.mosaic span:nth-child(4) { background: var(--ak-red); }
.mosaic span:nth-child(5) { background: var(--ak-yellow); }
.mosaic span:nth-child(6) { background: var(--ak-sky); }

/* Generated SVGs fill their box */
.hero__viz svg, .story__viz svg, .context__viz svg, .cmp-ring__viz svg, .geo__viz svg, .ai-eq__net svg { display: block; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(245,242,235,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.site-header__bar { max-width: var(--page-max); margin: 0 auto; height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; gap: 32px; }
.site-header__bar--legal { gap: 24px; }
.site-header__logo { display: flex; align-items: center; height: 72px; }
.site-header__logo img { height: 72px; width: auto; display: block; }
.site-header__back { font-size: 14px; font-weight: 500; color: var(--graphite); white-space: nowrap; }
.primary-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.primary-nav a { color: var(--graphite); }
.menu { position: relative; display: none; }
.menu__toggle { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 12px 4px; }
.menu__toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.menu__toggle span { width: 22px; height: 1.5px; background: var(--navy); }
.menu__toggle span:nth-child(3) { width: 14px; }
.menu__panel { position: absolute; top: 60px; right: -8px; width: 240px; background: #FFFFFF; border: 1px solid var(--hairline); box-shadow: 0 16px 40px rgba(24,40,80,0.12); padding: 8px; display: grid; }
/* Never taller than the space under the header: the items scroll inside the panel.
   32px is the panel's own padding and border (18px) plus 14px clear of the bottom edge. */
.menu__panel { max-height: calc(100vh - var(--header-h) - 32px); max-height: calc(100dvh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; }
.menu__panel a { padding: 12px; color: var(--graphite); font-size: 15px; }
.menu__panel a:hover { background: var(--paper); color: var(--navy); }

/* ---------- 01 Hero ---------- */
.hero { max-width: var(--page-max); margin: 0 auto; padding: clamp(56px,8vw,120px) var(--gutter) clamp(72px,9vw,128px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: clamp(40px,6vw,96px); align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; }
.hero__title { margin: 0; font-family: var(--font-statement); font-weight: 400; font-size: clamp(54px,7.6vw,112px); line-height: 0.96; letter-spacing: -0.025em; color: var(--navy); text-wrap: balance; }
.hero__lede { margin: 0; font-size: clamp(19px,1.7vw,23px); line-height: 1.45; color: var(--graphite); font-weight: 500; max-width: 560px; text-wrap: pretty; }
.hero__body { margin: 0; font-size: 17px; line-height: 1.65; color: var(--slate); max-width: 540px; text-wrap: pretty; }
.hero__markets { font-size: 14px; color: var(--slate); letter-spacing: 0.02em; padding-top: 16px; border-top: 1px solid var(--hairline); max-width: 540px; }
.hero__viz { width: 100%; max-width: 620px; justify-self: center; aspect-ratio: 1; }

/* ---------- Pinned sections (02, 05, 10) ---------- */
/* Unpinned, an anchor jump stops the section below the header. */
.pin { position: relative; height: auto; scroll-margin-top: var(--header-h); }
/* The design keeps top: 84px when unpinned, which pushes the content 84px out of
   its section and across the next section's edge. The offset applies only when pinned. */
.pin__inner { position: relative; top: 0; min-height: calc(100vh - 84px); display: flex; align-items: center; }
.pin__grid { max-width: var(--page-max); width: 100%; margin: 0 auto; padding: clamp(64px,8vw,96px) var(--gutter); display: grid; gap: clamp(40px,6vw,96px); align-items: center; box-sizing: border-box; }

/* ---------- 02 Fragmentation ---------- */
.story { background: #FFFFFF; border-top: 1px solid var(--hairline); }
.story__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.story__copy { display: flex; flex-direction: column; gap: 24px; }
.story__title { margin: 0; font-size: clamp(32px,3.6vw,50px); line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; color: var(--navy); text-wrap: balance; }
.story__title-alt { color: var(--slate); }
.story__effects { display: grid; gap: 6px; font-size: 17px; line-height: 1.5; color: var(--graphite); font-weight: 500; }
.story__belief { margin: 8px 0 0; font-size: clamp(21px,1.9vw,26px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); padding-top: 20px; border-top: 1px solid var(--hairline); }
.story__visual { width: 100%; max-width: 620px; justify-self: center; display: flex; flex-direction: column; gap: 20px; }
.story__viz { width: 100%; aspect-ratio: 720 / 700; }
.prob-list { display: flex; flex-direction: column; position: relative; padding-left: 20px; }
.prob-list__spine { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--navy); }
.prob-list__core { background: var(--navy); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; padding: 14px 16px; }
/* The script sets the rows' margin every frame and measures the list's height from it, so
   margin is left out of the transition. */
.prob-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; background: #FFFFFF; border: 1px solid var(--navy); margin-top: -1px; transition: transform 300ms, border-color 300ms; }
.prob-row.is-loose { border: 1px dashed var(--dashed); }
.prob-row__label { font-size: 15px; font-weight: 600; color: var(--graphite); }
.prob-row__meta { font-size: 12px; color: var(--slate); opacity: 0; }
.prob-meter { display: flex; flex-direction: column; gap: 8px; }
.prob-meter__track { height: 2px; background: var(--stone); position: relative; }
.prob-meter__fill { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--navy); }
.prob-meter__labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--slate); }
.prob-meter__b { color: var(--navy); }

/* ---------- 03 Purpose ---------- */
.purpose { max-width: var(--page-max); margin: 0 auto; padding: clamp(112px,13vw,184px) var(--gutter); display: flex; flex-direction: column; gap: clamp(56px,7vw,104px); }
.purpose__title { margin: 0; font-size: clamp(34px,4.4vw,64px); line-height: 1.06; font-weight: 600; letter-spacing: -0.03em; color: var(--navy); max-width: 1000px; text-wrap: balance; }
.pillars { display: flex; flex-direction: column; border-top: 1px solid var(--navy); }
.pillar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 8px 48px; padding: clamp(22px,2.4vw,32px) 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.pillar__title { margin: 0; font-size: clamp(24px,2.4vw,34px); font-weight: 600; letter-spacing: -0.02em; color: var(--navy); }
.pillar__body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--slate); max-width: 560px; text-wrap: pretty; }
.purpose__close { margin: 0; font-size: clamp(20px,1.8vw,26px); line-height: 1.45; color: var(--slate); max-width: 760px; text-wrap: pretty; }
.purpose__learner { color: var(--navy); font-weight: 600; }

/* ---------- 04 aKadmy (product system) ---------- */
.ak { background: #FFFFFF; font-family: var(--font-akadmy); color: var(--ak-ink); position: relative; }
.ak__ground { background: linear-gradient(180deg, #F7F4FF 0%, #FFFFFF 70%); }
.ak__wrap { max-width: var(--page-max); margin: 0 auto; padding: clamp(88px,10vw,140px) var(--gutter) clamp(88px,10vw,140px); display: flex; flex-direction: column; gap: clamp(48px,6vw,80px); }
.ak__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(32px,5vw,72px); align-items: end; }
.ak__intro { display: flex; flex-direction: column; gap: 22px; }
.ak__brand { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ak__title { margin: 0; font-family: var(--font-akadmy); font-size: clamp(48px,6vw,88px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--ak-navy); }
.ak__tagline { margin: 0; font-size: clamp(19px,1.7vw,24px); line-height: 1.4; color: #1A286F; font-weight: 500; max-width: 580px; }
.ak__pitch { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.ak__pitch-body { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ak-text); max-width: 520px; text-wrap: pretty; }
.ak__cta { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 4px; background: var(--ak-blue-deep); color: #FFFFFF; font-weight: 600; font-size: 15px; }
.ak__cta:hover { background: var(--ak-navy); color: #FFFFFF; }
.ak__promise { display: flex; flex-wrap: wrap; gap: 4px 0.4em; font-size: clamp(36px,5vw,72px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
.ak-c-blue { color: var(--ak-blue); }
.ak-c-indigo { color: var(--ak-violet); }
.ak-c-green { color: var(--ak-green); }
.ak-bg-blue { background: var(--ak-blue); }
.ak-bg-sky { background: var(--ak-sky); }
.ak-bg-green { background: var(--ak-green); }

.ak-collage { display: none; position: relative; width: 100%; aspect-ratio: 1.72; }
.ak-shot { margin: 0; position: absolute; background: #FFFFFF; border: 1px solid var(--ak-line); border-radius: 12px; overflow: hidden; }
.ak-shot--unit { left: 0; top: 0; width: 68%; box-shadow: 0 30px 70px rgba(0,44,105,0.16); }
.ak-shot--curriculum { left: 40%; top: 44%; width: 42%; z-index: 2; box-shadow: 0 30px 70px rgba(0,44,105,0.22); }
.ak-shot--kai { right: 0; top: 4%; width: 17%; z-index: 3; border: 1px solid #E3DAFF; border-radius: 14px; box-shadow: 0 30px 70px rgba(71,45,172,0.22); }
.ak-shot__bar { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--ak-line); }
.ak-shot__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--ak-blue); }
.ak-shot__mode { font-size: 12px; font-weight: 600; color: var(--ak-indigo); }
.ak-shot__name { font-size: 12px; color: #767676; }
.ak-shot__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.ak-shot__frame--unit { aspect-ratio: 906 / 565; background: #FBFBFB; }
.ak-shot__frame--curriculum { aspect-ratio: 597 / 376; background: #FBFBFB; }
.ak-shot__frame--kai { aspect-ratio: 196 / 466; }
.ak-shot__frame--kai img { object-position: top center; }

.ak-tabs { display: flex; flex-direction: column; gap: 16px; }
.ak-tabs__list { display: flex; gap: 6px; background: var(--ak-wash); border-radius: 30px; padding: 4px; align-self: flex-start; }
.ak-tab { all: unset; cursor: pointer; padding: 10px 16px; min-height: 24px; border-radius: 30px; font-size: 14px; font-weight: 600; background: transparent; color: var(--ak-indigo); }
.ak-tab[aria-selected="true"] { background: var(--ak-indigo); color: #FFFFFF; }
.ak-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.ak-panel { border: 1px solid var(--ak-line); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,44,105,0.14); }
.ak-panel--kai { width: 100%; max-width: 240px; margin: 0 auto; border: 1px solid #E3DAFF; border-radius: 14px; box-shadow: 0 20px 50px rgba(71,45,172,0.16); }
.ak__disclaimer { font-size: 12px; color: var(--ak-text); margin-top: -40px; }

.ak-platform { display: flex; flex-direction: column; }
.ak-platform__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--ak-indigo); padding-bottom: 14px; }
.ak-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 clamp(24px,3vw,48px); border-top: 2px solid var(--ak-navy); }
.ak-module { padding: 28px 0 32px; display: flex; flex-direction: column; gap: 12px; }
.ak-module__head { display: flex; align-items: center; gap: 12px; }
.ak-module__swatch { width: 14px; height: 14px; border-radius: 3px; }
.ak-module__title { margin: 0; font-size: clamp(26px,2.4vw,32px); font-weight: 800; letter-spacing: -0.02em; color: var(--ak-navy); }
.ak-module__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ak-text); max-width: 360px; text-wrap: pretty; }
.ak-ext { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), auto)); gap: 12px 40px; align-items: center; padding: 22px 24px; background: var(--ak-wash); border: 1px dashed #B9B0E8; border-radius: 8px; }
.ak-ext__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--ak-violet); }
.ak-ext__item { display: flex; align-items: baseline; gap: 12px 16px; flex-wrap: wrap; }
.ak-ext__name { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: var(--ak-navy); }
.ak-ext__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--ak-yellow); }
.ak-ext__body { font-size: 15px; line-height: 1.5; color: var(--ak-text); }

/* ---------- 05 Context ---------- */
.context { border-top: 1px solid var(--hairline); }
.context__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.context__copy { display: flex; flex-direction: column; gap: 22px; }
.context__for { display: grid; gap: 4px; font-size: 19px; font-weight: 600; color: var(--navy); }
.context__over-time { margin: 0; font-size: 15px; line-height: 1.6; color: var(--slate); max-width: 500px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.context__platform { margin: 0; font-size: 14px; line-height: 1.6; color: var(--slate); max-width: 500px; }
.context__visual { width: 100%; max-width: 600px; justify-self: center; display: flex; flex-direction: column; gap: 20px; }
.context__viz { aspect-ratio: 800 / 680; width: 100%; }
.loop-list { display: flex; flex-direction: column; }
.loop-row { display: grid; grid-template-columns: 20px 1fr; gap: 14px; opacity: 1; transition: opacity 300ms; }
.loop-row.is-off { opacity: 0.35; }
.loop-row__rail { display: flex; flex-direction: column; align-items: center; }
.loop-row__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--navy); margin-top: 6px; }
.loop-row.is-off .loop-row__dot { background: var(--hairline); }
.loop-row__line { flex: 1; width: 1px; background: var(--hairline); }
.loop-row__text { padding-bottom: 18px; }
.loop-row__k { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--navy); }
.loop-row__c { font-size: 14px; color: var(--slate); padding-top: 2px; }
.ctx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ctx-chip { font-size: 12px; padding: 6px 10px; border: 1px solid var(--navy); color: #FFFFFF; background: var(--navy); transition: all 300ms; }
.ctx-chip.is-off { border: 1px solid var(--hairline); color: #8F8A80; background: transparent; }

.compounds { max-width: var(--page-max); margin: 0 auto; padding: clamp(48px,6vw,96px) var(--gutter) clamp(112px,13vw,184px); display: flex; flex-direction: column; gap: 28px; align-items: center; text-align: center; }
.compounds__lead { margin: 0; font-size: clamp(19px,1.8vw,24px); line-height: 1.45; color: var(--slate); max-width: 640px; }
.compounds__statement { font-family: var(--font-statement); font-size: clamp(60px,11vw,168px); line-height: 0.95; letter-spacing: -0.03em; color: var(--navy); }

/* ---------- 06 Ecosystem ---------- */
.eco { background: var(--stone); }
.eco__wrap { max-width: var(--page-max); margin: 0 auto; padding: clamp(96px,11vw,160px) var(--gutter); display: flex; flex-direction: column; gap: clamp(40px,5vw,72px); }
.eco__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 32px; align-items: end; }
.eco__heading { display: flex; flex-direction: column; gap: 20px; }
.eco__aside { display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.6; color: var(--slate); max-width: 520px; }
.eco__doors { margin: 0; color: var(--navy); font-weight: 600; font-size: 20px; line-height: 1.35; }
.eco-board { display: flex; flex-direction: column; border: 1px solid var(--navy); background: var(--paper); }
.eco-board__top { display: flex; align-items: center; gap: 20px 28px; padding: 20px clamp(20px,3vw,40px); flex-wrap: wrap; border-bottom: 1px solid var(--navy); }
.eco-board__logo { height: 64px; width: auto; display: block; }
.eco-board__idea { margin: 0; flex: 1; min-width: 260px; font-size: clamp(17px,1.5vw,20px); line-height: 1.45; color: var(--navy); font-weight: 500; max-width: 760px; }
.eco-board__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 0; }
.eco-ak { background: #FFFFFF; font-family: var(--font-akadmy); color: var(--ak-ink); padding: clamp(28px,3.5vw,52px); display: flex; flex-direction: column; gap: 18px; min-height: 440px; position: relative; overflow: hidden; }
.eco-ak:hover { color: var(--ak-ink); background: #FBFBFB; }
.eco-ak__head { display: flex; align-items: center; gap: 14px; }
.eco-ak__label { font-size: 12px; letter-spacing: 0.16em; color: var(--ak-indigo); font-weight: 700; }
.eco-ak__name { font-size: clamp(52px,5.4vw,80px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ak-navy); }
.eco-ak__tag { font-size: clamp(22px,2vw,28px); font-weight: 600; color: var(--ak-indigo); }
.eco-ak__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ak-text); max-width: 460px; }
.eco-ak__foot { display: flex; justify-content: flex-end; align-items: center; padding-top: 16px; border-top: 1px solid var(--ak-line); }
.eco-ak__cta { font-weight: 600; font-size: 15px; color: var(--ak-blue-deep); }
.eco-brands { display: flex; flex-direction: column; border-left: 2px solid var(--navy); background: var(--paper); }
.eco-brand { position: relative; flex: 1; padding: 28px 32px 28px 40px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--hairline); color: var(--graphite); }
.eco-brand:hover { background: #FFFFFF; color: var(--graphite); }
.eco-brand__tick { position: absolute; left: 0; top: 42px; width: 22px; height: 2px; background: var(--navy); }
.eco-brand__node { position: absolute; left: -6px; top: 38px; width: 10px; height: 10px; background: var(--navy); }
.eco-brand__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.eco-brand__name { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.eco-brand__cta { font-size: 14px; font-weight: 600; color: var(--green); }
.eco-brand__tag { font-size: 18px; font-weight: 500; color: var(--graphite); }
.eco-brand__body { font-size: 15px; line-height: 1.55; color: var(--slate); }
.eco-board__foot { background: var(--navy-gradient); color: #FFFFFF; padding: 22px clamp(20px,3vw,40px); display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; flex-wrap: wrap; }
.eco-board__foot span { font-size: clamp(16px,1.4vw,19px); font-weight: 600; letter-spacing: -0.005em; }

/* ---------- 07 Compounding ---------- */
.compound { max-width: var(--page-max); margin: 0 auto; padding: clamp(104px,12vw,168px) var(--gutter); display: flex; flex-direction: column; gap: clamp(64px,8vw,112px); }
.compound__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 32px clamp(40px,6vw,96px); align-items: end; padding-bottom: clamp(56px,7vw,96px); border-bottom: 1px solid var(--hairline); }
.compound__heading { display: flex; flex-direction: column; gap: 24px; }
.compound__statement { margin: 0; font-family: var(--font-statement); font-size: clamp(36px,4.4vw,64px); line-height: 1.04; letter-spacing: -0.025em; color: var(--navy); text-wrap: balance; }
.compound__statement-alt { color: #8A8478; }
.compound__body { margin: 0; font-size: 18px; line-height: 1.65; color: var(--slate); max-width: 520px; text-wrap: pretty; }
.compound__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px,6vw,96px); align-items: start; }
.compound__list { display: flex; flex-direction: column; gap: 22px; }
.cmp-stages { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.cmp-stages li { border-bottom: 1px solid var(--hairline); }
.cmp-stage { all: unset; cursor: pointer; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: baseline; padding: 14px 0; color: var(--slate); }
.cmp-stage:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cmp-stage.is-on { color: var(--navy); }
.cmp-stage__n { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--slate); }
.cmp-stage.is-on .cmp-stage__n { color: var(--green); }
.cmp-stage__text { display: flex; flex-direction: column; gap: 4px; }
.cmp-stage__k { font-size: 17px; font-weight: 500; }
.cmp-stage.is-on .cmp-stage__k { font-weight: 700; }
.cmp-stage__d { display: none; font-size: 15px; line-height: 1.5; color: var(--slate); font-weight: 400; }
.cmp-stage.is-on .cmp-stage__d { display: inline; }
.cmp-stage__badge { font-size: 12px; color: var(--green); font-weight: 700; text-align: right; }
.cmp-stage__badge--akadmy { color: var(--ak-indigo); }
.cmp-ring { display: flex; flex-direction: column; gap: 24px; align-items: center; position: sticky; top: 112px; }
.cmp-ring__viz { width: 100%; max-width: 540px; aspect-ratio: 1; }
.cmp-ring__current { width: 100%; max-width: 480px; text-align: center; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.cmp-ring__num { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--slate); }
.cmp-ring__k { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); }
.cmp-ring__d { font-size: 16px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }

/* ---------- 08 Early years ---------- */
.early { background: #FFFFFF; border-top: 1px solid var(--hairline); }
.early__wrap { max-width: var(--page-max); margin: 0 auto; padding: clamp(96px,11vw,160px) var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(40px,6vw,96px); align-items: center; }
.early__photos { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: minmax(220px, 300px) minmax(160px, 220px); gap: 10px; }
.early__copy { display: flex; flex-direction: column; gap: 22px; }
.early__advantage { margin: 0; font-size: 17px; line-height: 1.65; color: var(--graphite); font-weight: 500; }
.early__statement { padding: 26px 0; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--hairline); font-size: clamp(28px,3vw,42px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); }
.early__breadth { margin: 0; font-size: 16px; line-height: 1.6; color: var(--slate); max-width: 520px; }

/* ---------- 09 AI ---------- */
.ai { border-top: 1px solid var(--hairline); }
.ai__wrap { max-width: var(--page-max); margin: 0 auto; padding: clamp(104px,12vw,168px) var(--gutter); display: flex; flex-direction: column; gap: clamp(56px,7vw,104px); }
.ai__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(32px,5vw,80px); align-items: end; }
.ai__heading { display: flex; flex-direction: column; gap: 22px; }
.ai__title { margin: 0; font-size: clamp(36px,4.6vw,66px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; color: var(--navy); }
.ai__intro { display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.65; color: var(--slate); max-width: 540px; }
.ai__intro p { margin: 0; }
.ai__intro-strong { color: var(--navy); font-weight: 500; }
.ai-eq { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.ai-eq__model { border: 1px dashed var(--dashed); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 220px; }
.ai-eq__result { background: #FFFFFF; border: 2px solid var(--navy); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 220px; }
.ai-eq__label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--slate); }
.ai-eq__label--green { color: var(--green); }
.ai-eq__net { flex: 1; min-height: 96px; max-height: 150px; }
.ai-eq__text { font-size: 17px; line-height: 1.5; color: var(--slate); }
.ai-eq__text--strong { color: var(--navy); font-weight: 500; }
.ai-eq__op { display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--slate); font-weight: 300; }
.ai-eq__layers { display: flex; flex-direction: column; gap: 4px; }
.ai-layer { flex: 1; color: #FFFFFF; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ai-layer--1 { background: #182850; }
.ai-layer--2 { background: #22355A; }
.ai-layer--3 { background: #324A75; }
.ai-layer--4 { background: #44608F; }
.ai-layer__name { font-size: 15px; font-weight: 600; }
.ai-layer__tag { display: flex; align-items: center; gap: 10px; }
.ai-layer__word { font-size: 12px; letter-spacing: 0.12em; opacity: 0.8; }
.ai-layer__rule { display: block; width: 22px; height: 1px; background: rgba(255,255,255,0.55); }
.ai-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 0 64px; }
.ai-principle { padding: 26px 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 44px 1fr; gap: 8px 12px; }
.ai-principle__n { font-size: 13px; font-weight: 600; color: var(--green); padding-top: 4px; }
.ai-principle__text { display: flex; flex-direction: column; gap: 8px; }
.ai-principle__title { margin: 0; font-size: 21px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.ai-principle__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.ai__close { display: flex; flex-direction: column; gap: 4px; padding-top: clamp(24px,4vw,56px); border-top: 1px solid var(--navy); }
.ai__close-line { font-family: var(--font-statement); font-size: clamp(44px,7vw,108px); line-height: 1; letter-spacing: -0.025em; color: var(--navy); }
.ai__close-line--muted { color: var(--statement-muted); }

/* ---------- 10 Geography ---------- */
.geo-band { background: var(--navy-gradient-v); color: #FFFFFF; }
.geo { color: #FFFFFF; }
.geo__inner { overflow: hidden; }
.geo__wrap { max-width: var(--page-max); width: 100%; margin: 0 auto; padding: clamp(64px,7vw,88px) var(--gutter); display: flex; flex-direction: column; gap: clamp(28px,3.5vw,48px); box-sizing: border-box; }
.geo__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px 64px; align-items: end; }
.geo__heading { display: flex; flex-direction: column; gap: 20px; }
.geo__title { margin: 0; font-size: clamp(34px,4vw,56px); line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; }
.geo__intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--on-navy); max-width: 480px; }
.geo__desktop { display: flex; flex-direction: column; gap: 8px; }
.geo__viz { width: 100%; aspect-ratio: 900 / 240; }
.geo-stages { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.geo-stage { display: flex; flex-direction: column; gap: 10px; transition: opacity 400ms; text-align: center; align-items: center; }
.geo-stage__k { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; }
.geo-stage__r { font-size: 24px; font-weight: 600; }
.geo-stage__s { font-size: 17px; font-weight: 600; color: #FFFFFF; }
.geo-stage__d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--on-navy); max-width: 360px; text-wrap: pretty; }
.geo-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 4px; }
.geo-tags--start { justify-content: flex-start; padding-top: 0; }
.geo-tags span { font-size: 12px; padding: 5px 9px; border: 1px solid rgba(255,255,255,0.32); color: #E4E8EF; }
.geo-stage--regional .geo-tags span, .geo-item--regional .geo-tags span { border: 1px dashed rgba(255,255,255,0.32); }
.geo-stage--india .geo-stage__r, .geo-item--india .geo-item__r { color: var(--green-on-navy); }
.geo-stage--malaysia .geo-stage__r, .geo-item--malaysia .geo-item__r { color: #A9C1E3; }
.geo-stage--regional .geo-stage__r, .geo-item--regional .geo-item__r { color: #C9D0DC; }
.geo-list { display: flex; flex-direction: column; }
.geo-item { display: grid; grid-template-columns: 28px 1fr; gap: 16px; }
.geo-item__rail { display: flex; flex-direction: column; align-items: center; }
.geo-item__dot { width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; margin-top: 4px; }
.geo-item__line { flex: 1; width: 0; border-left: 1px solid rgba(255,255,255,0.35); }
.geo-item--india .geo-item__dot { background: var(--green-on-navy); border: 2px solid var(--green-on-navy); }
.geo-item--malaysia .geo-item__dot { background: transparent; border: 2px solid #A9C1E3; }
.geo-item--regional .geo-item__dot { background: transparent; border: 2px dashed #C9D0DC; }
.geo-item--regional .geo-item__line { border-left: 1px dashed rgba(255,255,255,0.35); }
.geo-item__text { display: flex; flex-direction: column; gap: 8px; padding-bottom: 32px; }
.geo-item__head { display: flex; gap: 12px; align-items: baseline; }
.geo-item__k { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; }
.geo-item__r { font-size: 20px; font-weight: 600; }
.geo-item__s { font-size: 16px; font-weight: 600; color: #FFFFFF; }
.geo-item__d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--on-navy); }
.geo-measure { color: #FFFFFF; }
.geo-measure__wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) clamp(96px,11vw,160px); display: flex; }
.geo-measure__text { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.2); width: 100%; max-width: 920px; }
.geo-measure__lead { margin: 0; font-size: clamp(18px,1.6vw,22px); line-height: 1.45; color: var(--on-navy); }
.geo-measure__statement { margin: 0; font-size: clamp(24px,2.6vw,36px); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: #FFFFFF; text-wrap: pretty; }

/* ---------- 11 Proof ---------- */
.proof { max-width: var(--page-max); margin: 0 auto; padding: clamp(104px,12vw,168px) var(--gutter); display: flex; flex-direction: column; gap: clamp(48px,6vw,72px); }
.proof__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 32px; align-items: end; }
.proof__heading { display: flex; flex-direction: column; gap: 20px; }
.proof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.proof-card { padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 320px; }
.proof-card--navy { background: var(--navy-gradient); }
.proof-card--white { background: #FFFFFF; border: 1px solid var(--hairline); }
.proof-card--stone { background: var(--stone); }
.proof-card__top { display: flex; flex-direction: column; gap: 12px; }
.proof-card__figure { font-family: var(--font-statement); font-size: clamp(72px,7vw,104px); line-height: 0.9; letter-spacing: -0.03em; color: var(--navy); }
.proof-card--navy .proof-card__figure { color: #FFFFFF; }
.proof-card__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--green); }
.proof-card--navy .proof-card__label { color: var(--green-on-navy); }
.proof-card--stone .proof-card__label { color: var(--green-on-stone); }
.proof-card__headline { font-size: clamp(28px,2.6vw,36px); line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; color: var(--navy); }
.proof-card__body { margin: 0; font-size: 16px; line-height: 1.55; color: var(--slate); text-wrap: pretty; }
.proof-card--navy .proof-card__body { color: var(--on-navy); }

/* ---------- 12 Leadership ---------- */
.lead { background: #FFFFFF; border-top: 1px solid var(--hairline); }
.lead__wrap { max-width: var(--page-max); margin: 0 auto; padding: clamp(104px,12vw,168px) var(--gutter); display: flex; flex-direction: column; gap: clamp(48px,6vw,80px); }
.lead__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 32px 80px; align-items: end; }
.lead__heading { display: flex; flex-direction: column; gap: 22px; }
.lead__title { margin: 0; font-size: clamp(32px,3.6vw,50px); line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; color: var(--navy); text-wrap: balance; }
.lead__intro { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.65; color: var(--slate); max-width: 540px; }
.lead__intro p { margin: 0; }
.founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px,4vw,56px); }
.founder { display: flex; flex-direction: column; gap: 18px; }
.founder__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 24px; padding-top: 4px; border-top: 1px solid var(--hairline); }
.founder__id { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; }
.founder__name { margin: 0; font-size: 22px; font-weight: 600; color: var(--navy); }
.founder__role { font-size: 14px; color: var(--green); font-weight: 500; }
.founder__li { align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--navy); color: var(--navy); font-size: 13px; font-weight: 600; }
.founder__li:hover { background: var(--navy); color: #FFFFFF; }
.founder__li-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: currentColor; border-radius: 2px; }
.founder__li-mark::before { content: "in"; font-size: 10px; font-weight: 700; line-height: 1; color: #FFFFFF; mix-blend-mode: normal; }
.founder__bio { margin: 0; padding-top: 14px; font-size: 15px; line-height: 1.55; color: var(--slate); }

/* ---------- 13 Paths ---------- */
.paths { max-width: var(--page-max); margin: 0 auto; padding: clamp(104px,12vw,168px) var(--gutter); display: flex; flex-direction: column; gap: clamp(40px,5vw,64px); }
.paths__head { display: flex; flex-direction: column; gap: 20px; }
.paths__title { margin: 0; font-size: clamp(44px,5.6vw,84px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: var(--navy); }
.paths__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 12px; }
.path-card { padding: clamp(28px,3.4vw,48px); display: flex; flex-direction: column; gap: 18px; min-height: 340px; }
.path-card--navy { background: var(--navy-gradient); color: #FFFFFF; }
.path-card--navy:hover { filter: brightness(1.15); color: #FFFFFF; }
.path-card--white { background: #FFFFFF; border: 1px solid var(--navy); color: var(--graphite); }
.path-card--white:hover { background: #FBFAF6; color: var(--graphite); }
.path-card__label { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--green); }
.path-card--navy .path-card__label { color: var(--green-on-navy); }
.path-card__title { font-size: clamp(26px,2.6vw,36px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; }
.path-card--white .path-card__title { color: var(--navy); }
.path-card__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--slate); flex: 1; max-width: 480px; }
.path-card--navy .path-card__body { color: var(--on-navy); }
.path-card__cta { align-self: flex-start; display: inline-flex; align-items: center; height: 46px; padding: 0 20px; font-weight: 600; font-size: 15px; background: var(--navy-gradient); color: #FFFFFF; }
.path-card--navy .path-card__cta { background: #FFFFFF; color: var(--navy); }
.paths__rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 0 12px; }
.path-row { padding: 28px 0; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--hairline); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 24px; align-items: baseline; color: var(--graphite); }
.path-row:hover { color: var(--graphite); background: var(--stone); }
.path-row__label { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--green); grid-column: 1 / -1; }
.path-row__title { font-size: 21px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.path-row__cta { font-size: 14px; font-weight: 600; color: var(--navy); }
.path-row__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--slate); grid-column: 1 / -1; max-width: 520px; }

/* ---------- 13b Contact ---------- */
.contact { border-top: 1px solid var(--hairline); background: var(--stone); scroll-margin-top: 84px; }
.contact__wrap { max-width: var(--page-max); margin: 0 auto; padding: clamp(96px,11vw,160px) var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: stretch; }
.contact__aside { background: var(--navy-gradient); color: #FFFFFF; padding: clamp(32px,4vw,64px); display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.contact__title { margin: 0; font-family: var(--font-statement); font-weight: 400; font-size: clamp(44px,5vw,72px); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
.contact__body { margin: 0; font-size: 18px; line-height: 1.6; color: var(--on-navy); max-width: 460px; text-wrap: pretty; }
.contact__spacer { flex: 1; min-height: 40px; }
.contact__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.24); flex-wrap: wrap; }
.contact__foot span { font-size: 14px; color: var(--on-navy); }
.contact__main { background: #FFFFFF; padding: clamp(28px,4vw,64px); min-width: 0; display: flex; flex-direction: column; }
.cf { scroll-margin-top: 108px; display: flex; flex-direction: column; gap: 28px; }
.cf__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.cf__noscript { margin: 0; font-size: 13px; color: var(--error); }
.cf__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label { font-size: 13px; font-weight: 600; color: var(--graphite); }
.field__req { color: var(--green); }
.field__input { height: 48px; padding: 0 14px; background: #FFFFFF; font: inherit; font-size: 15px; color: var(--graphite); outline: none; border-radius: 0; box-sizing: border-box; width: 100%; border: 1px solid var(--field-line); }
.field__input--select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #182850 50%), linear-gradient(135deg, #182850 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; cursor: pointer; }
.field__textarea { padding: 12px 14px; border: 1px solid var(--field-line); background: #FFFFFF; font: inherit; font-size: 15px; line-height: 1.55; color: var(--graphite); outline: none; resize: vertical; min-height: 140px; box-sizing: border-box; width: 100%; }
.field.has-error .field__input, .field.has-error .field__textarea { border-color: var(--error); }
.field__input:focus-visible, .field__textarea:focus-visible, .field.has-error .field__input:focus-visible, .field.has-error .field__textarea:focus-visible { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(24,40,80,0.12); }
.field__error { font-size: 12px; color: var(--error); }
.cf__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cf__group--areas { padding: 20px; background: var(--paper); }
.cf__legend { padding: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--graphite); }
.cf__legend--float { float: left; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--clear { clear: both; }
.chip { all: unset; cursor: pointer; box-sizing: border-box; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--field-line); background: #FFFFFF; color: var(--graphite); font-size: 14px; font-weight: 500; transition: all 160ms; }
.cf__group.has-error .chip { border: 1px solid var(--error); }
.chip[aria-pressed="true"], .cf__group.has-error .chip[aria-pressed="true"] { border: 1px solid var(--navy); background: var(--navy); color: #FFFFFF; }
.chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cf__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.cf__note { font-size: 13px; color: var(--slate); }
.cf__note.is-error { color: var(--error); }
.cf__submit { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px; background: var(--navy-gradient); color: #FFFFFF; font-weight: 600; font-size: 15px; }
.cf__submit:hover { filter: brightness(1.15); }
.cf__submit:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.cf__submit:disabled { cursor: default; opacity: 0.6; filter: none; }
.cf-sent { scroll-margin-top: 108px; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; min-height: 480px; max-width: 520px; }
.cf-sent:focus { outline: none; }
.cf-sent__tick { width: 56px; height: 56px; border-radius: 50%; background: var(--navy-gradient); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; }
.cf-sent__title { margin: 0; font-family: var(--font-statement); font-weight: 400; font-size: clamp(36px,3.6vw,52px); line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); text-wrap: balance; }
.cf-sent__again { all: unset; cursor: pointer; align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--navy); padding-bottom: 2px; }
.cf-sent__again:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ---------- 14 Close ---------- */
.close { background: var(--navy-gradient); color: #FFFFFF; }
.close__wrap { max-width: var(--page-max); margin: 0 auto; padding: clamp(120px,14vw,200px) var(--gutter); display: flex; flex-direction: column; gap: 40px; }
.close__title { margin: 0; font-family: var(--font-statement); font-weight: 400; font-size: clamp(52px,7.4vw,124px); line-height: 0.96; letter-spacing: -0.03em; max-width: 1150px; text-wrap: balance; }
.close__body { margin: 0; font-size: clamp(17px,1.5vw,20px); line-height: 1.55; color: var(--on-navy); max-width: 640px; }
.close__lines { display: grid; font-size: clamp(22px,2.2vw,30px); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--on-navy); }

/* ---------- Footer ---------- */
.site-footer { background: #FFFFFF; color: var(--slate); border-top: 1px solid var(--hairline); }
.site-footer__wrap { max-width: var(--page-max); margin: 0 auto; padding: 72px var(--gutter) 40px; display: flex; flex-direction: column; gap: 56px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px; }
.site-footer__about { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 380px; }
.site-footer__about p { margin: 0; font-size: 14px; line-height: 1.6; }
.site-footer__logo { height: 112px; width: auto; align-self: flex-start; display: block; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
/* Padding with an equal negative margin makes a small link 24px tall to tap without moving it. */
.site-footer__col a { color: var(--navy); padding: 3px 0; margin: -3px 0; }
.site-footer__heading { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--green); padding-bottom: 4px; }
.site-footer__legal { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 1px solid var(--hairline); font-size: 13px; line-height: 1.55; }
.site-footer__legal-heading { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--slate); }
.site-footer__entities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 32px; color: var(--graphite); }
.site-footer__meta { display: flex; flex-direction: column; gap: 6px; }
.site-footer__links { display: flex; gap: 18px; }
.site-footer__links a { color: var(--navy); padding: 2px 0; margin: -2px 0; }

/* ---------- Legal pages ---------- */
.legal-hero { max-width: var(--page-max); margin: 0 auto; padding: clamp(64px,8vw,120px) var(--gutter) clamp(48px,6vw,80px); display: flex; flex-direction: column; gap: 24px; }
.legal-hero__title { margin: 0; font-family: var(--font-statement); font-weight: 400; font-size: clamp(52px,7vw,104px); line-height: 0.96; letter-spacing: -0.025em; color: var(--navy); }
.legal-hero__lede { margin: 0; font-size: clamp(18px,1.6vw,22px); line-height: 1.5; color: var(--slate); max-width: 720px; text-wrap: pretty; }
.legal-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 20px; border-top: 1px solid var(--navy); font-size: 14px; color: var(--slate); }
.legal-hero--404 { padding-bottom: clamp(96px,11vw,160px); }
.legal-hero--404 .legal-hero__meta { padding-top: 28px; }
.legal-body { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) clamp(96px,11vw,160px); display: flex; flex-wrap: wrap; gap: 48px clamp(40px,6vw,96px); align-items: flex-start; }
.legal-toc { flex: 0 1 260px; position: sticky; top: 112px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.legal-toc__heading { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--slate); padding-bottom: 10px; }
.legal-toc a { padding: 7px 0; color: var(--graphite); border-top: 1px solid var(--hairline); }
.legal-toc a:last-child { border-bottom: 1px solid var(--hairline); }
.legal-article { flex: 1 1 520px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; }
.legal-section { scroll-margin-top: 108px; padding: 40px 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 0 12px; }
.legal-section:first-child { padding: 0 0 40px; border-top: 0; }
.legal-section:last-child { padding: 40px 0 0; }
.legal-section__n { font-size: 13px; font-weight: 600; color: var(--green); padding-top: 8px; }
.legal-section__body { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.7; color: var(--slate); }
.legal-section__body h2 { margin: 0; font-size: clamp(24px,2.2vw,30px); font-weight: 600; letter-spacing: -0.02em; color: var(--navy); }
.legal-section__body p { margin: 0; }
.legal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; padding-top: 4px; }
.legal-card { background: #FFFFFF; border: 1px solid var(--hairline); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal-card__label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--navy); }
.legal-card__text { font-size: 15px; line-height: 1.6; }
.legal-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.legal-list li { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.legal-cta { margin-top: 12px; padding: clamp(24px,3vw,36px); background: var(--navy-gradient); color: #FFFFFF; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.legal-cta__text { font-family: var(--font-statement); font-size: clamp(26px,2.6vw,34px); line-height: 1.15; letter-spacing: -0.015em; }
.legal-footer { background: #FFFFFF; border-top: 1px solid var(--hairline); }
.legal-footer__wrap { max-width: var(--page-max); margin: 0 auto; padding: 40px var(--gutter); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--slate); }
.legal-footer__entities { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.legal-footer__entities strong { font-weight: inherit; color: var(--graphite); }
.legal-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.legal-footer__links a { color: var(--navy); padding: 4px 0; margin: -4px 0; }
.legal-footer__links a[aria-current="page"] { font-weight: 600; }

/* ---------- Breakpoints (the design decides these from window.innerWidth) ---------- */

/* 1140 and up: full primary nav. Below: hamburger dropdown. */
@media (max-width: 1139px) {
  .primary-nav { display: none; }
  .menu { display: block; }
}

/* The legal header's three items do not fit a phone; the logo already links home. */
@media (max-width: 430px) {
  .site-header__back { display: none; }
}

/* 1080 and up: sections 02, 05 and 10 pin while their visual plays. */
@media (min-width: 1080px) {
  .pin { height: 260vh; scroll-margin-top: 0; }
  .pin__inner { position: sticky; top: 84px; }
  /* Set by the script when a section's content is taller than the space under the header. */
  .pin.pin--flow { height: auto; scroll-margin-top: var(--header-h); }
  .pin--flow .pin__inner { position: relative; top: 0; }
}

/* 900 and up: layered screenshot collage. Below: tabbed view. */
@media (min-width: 900px) {
  .ak-collage { display: block; }
  .ak-tabs { display: none; }
}

/* 760 and up: SVG visuals, the stage ring, the five-column equation. */
@media (min-width: 760px) {
  html.js .only-mobile { display: none !important; }
  .ai-eq { grid-template-columns: minmax(0,1fr) 32px minmax(0,1.1fr) 32px minmax(0,1fr); }
}
@media (max-width: 759px) {
  .only-desktop { display: none !important; }
  /* On a phone the hamburger is not at the right edge, so the dropdown hangs from the
     header instead: directly below it, as wide as the page inside the side padding. */
  .menu { position: static; }
  .menu__panel { top: 100%; left: var(--gutter); right: var(--gutter); width: auto; }
  .cmp-ring { display: none; }
  .cmp-stage { color: var(--navy); }
  .cmp-stage__d { display: inline; }
}

/* Without JavaScript nothing can draw the SVGs, so show the list variants. */
html:not(.js) .only-desktop,
html:not(.js) .cmp-ring,
html:not(.js) .hero__viz,
html:not(.js) .ai-eq__net { display: none !important; }
html:not(.js) .pin { height: auto; scroll-margin-top: var(--header-h); }
html:not(.js) .pin__inner { position: relative; top: 0; }
html:not(.js) .cmp-stage { color: var(--navy); }
html:not(.js) .cmp-stage__d { display: inline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}