/* ==========================================================================
   About — Synapse's story told through type, lines and motion
   hero + idea→impact thread, story, evolution stack, discipline rows,
   philosophy, why Synapse, coordinates map + numbers, team masthead
   ========================================================================== */
:root { --mono: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ==========================================================================
   Hero
   ========================================================================== */
.ab-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; overflow: hidden; padding: calc(var(--header-h) + clamp(2rem, 7vh, 5rem)) 0 clamp(1.5rem, 4vh, 3rem); background: var(--black); color: var(--white); }
.ab-hero__glow { position: absolute; left: 25%; right: -15%; bottom: -35%; z-index: -1; height: 95%; background: radial-gradient(40% 50% at 55% 50%, rgb(107 63 212 / 0.42), transparent 70%), radial-gradient(30% 42% at 82% 38%, rgb(58 126 246 / 0.38), transparent 70%); pointer-events: none; }
.ab-hero__label { display: flex; align-items: center; gap: 1.25rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.ab-hero__label span:first-child { color: var(--white); }
.ab-hero__label span + span::before { content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: 1.25rem; background: currentColor; vertical-align: middle; }
.ab-hero__title { margin-top: clamp(1.25rem, 4vh, 3rem); font-size: clamp(3.3rem, 0.8rem + 10.4vw, 13.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; }
.ab-hero__title .mask { display: block; width: fit-content; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.ab-hero__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; margin-top: clamp(1.75rem, 5vh, 3.5rem); }
.ab-hero__lead { max-width: 28em; font-size: clamp(1.1rem, 0.85rem + 0.7vw, 1.75rem); line-height: 1.35; letter-spacing: -0.02em; color: rgb(255 255 255 / 0.72); }
.ab-hero__next { display: inline-flex; align-items: center; gap: 0.9rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgb(255 255 255 / 0.3); font-weight: 600; transition: border-color 0.35s; }
.ab-hero__next svg { width: 1.3rem; height: 0.65rem; rotate: 90deg; transition: translate 0.5s var(--ease-out); }
.ab-hero__next:is(:hover, :focus-visible) { border-color: var(--white); }
.ab-hero__next:is(:hover, :focus-visible) svg { translate: 0 0.2rem; }

.chain { position: relative; width: min(var(--container), 100% - var(--gutter) * 2); margin: clamp(2.5rem, 7vh, 5rem) auto 0; container-type: inline-size; }
.chain__thread { position: absolute; left: 0; top: 0; width: 100%; height: 8cqi; overflow: visible; }
.chain__line { fill: none; stroke: rgb(255 255 255 / 0.18); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.chain__pulse { fill: none; stroke: var(--blue-bright); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.06 0.94; stroke-dashoffset: 0.06; }
.chain__stations { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cst { display: grid; justify-items: center; gap: 1.1cqi; }
.cst__glyph { display: grid; place-items: center; width: 8cqi; aspect-ratio: 1; border-radius: 50%; background: #08080c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); }
.cst__glyph svg { width: 62%; height: 62%; overflow: visible; }
.cst__label { display: flex; align-items: baseline; gap: 0.5em; font: 600 max(0.62rem, 0.95cqi)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.62); }
.cst__label b { color: var(--blue-bright); }
.chain__caption { display: none; }
.g-fill { fill: rgb(255 255 255 / 0.85); }
.g-hot { fill: var(--blue-bright); }
.g-ring, .g-wave { fill: none; stroke: rgb(255 255 255 / 0.4); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.g-stroke { fill: none; stroke: rgb(255 255 255 / 0.85); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-faint { stroke: rgb(255 255 255 / 0.2); stroke-width: 1; }
.g-link { stroke: rgb(255 255 255 / 0.3); stroke-width: 1.2; }
.cst--product .g-solid { fill: var(--purple); }
.g-bar { fill: rgb(255 255 255 / 0.9); transform-box: fill-box; transform-origin: 0 50%; }

@media (prefers-reduced-motion: no-preference) {
  .js .ab-hero__title .mask > span { transform: translate3d(0, 110%, 0); }
  .is-loaded .ab-hero__title .mask > span { transform: none; transition: transform 1.3s var(--ease-out) calc(var(--d) * 130ms + 150ms); }
  .chain__pulse { animation: ab-thread 5s var(--ease-in-out) infinite 1.8s; }
  .g-ring { animation: ab-ring 3s var(--ease-out) infinite; }
  .g-ring--2 { animation-delay: 0.6s; }
  .cst--design .g-draw { stroke-dasharray: 1 1; animation: ab-draw 5s var(--ease-in-out) infinite; }
  .g-link { animation: ab-flicker 2.8s ease-in-out infinite; }
  .g-bar { animation: ab-bar 3.2s var(--ease-out) infinite; }
  .g-bar--2 { animation-delay: 0.2s; }
  .g-bar--3 { animation-delay: 0.4s; }
  .g-wave { animation: ab-wave 3.6s var(--ease-out) infinite; }
  .g-wave--2 { animation-delay: 1.2s; }
  .g-wave--3 { animation-delay: 2.4s; }
  .ab-hero.is-paused .chain *, .ab-hero.is-paused .chain *::before { animation-play-state: paused; }
  @keyframes ab-thread { 0% { stroke-dashoffset: 0.06; opacity: 1; } 70% { stroke-dashoffset: -0.94; opacity: 1; } 70.1%, 100% { opacity: 0; } }
  @keyframes ab-ring { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
  @keyframes ab-draw { 0% { stroke-dashoffset: 1; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
  @keyframes ab-flicker { 50% { stroke: rgb(91 150 255 / 0.8); } }
  @keyframes ab-bar { 0% { transform: scaleX(0.1); } 40%, 100% { transform: none; } }
  @keyframes ab-wave { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
}

/* ==========================================================================
   Our story
   ========================================================================== */
.story { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 10vw, 11rem); }
.story__title { margin-top: 1.5rem; font-size: clamp(2.6rem, 0.8rem + 6.2vw, 8.5rem); font-weight: 700; line-height: 0.94; letter-spacing: -0.055em; }
.story__title .mask { display: block; width: fit-content; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.story__title .mask:first-child { color: #8a8a8a; }
.story__body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem clamp(2rem, 6vw, 8rem); margin-top: clamp(3.5rem, 7vw, 7rem); padding-top: clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--black); }
.story__facts { display: grid; align-content: start; gap: 1.75rem; }
.story__facts div { display: grid; gap: 0.4rem; }
.story__facts dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8a; }
.story__facts dd { max-width: 14em; font-size: clamp(1.3rem, 1rem + 0.9vw, 2.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; }
.story__facts .story__year { width: fit-content; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story__copy { display: grid; align-content: start; gap: 1.4rem; max-width: 42rem; }
.story__lede { font-size: clamp(1.35rem, 1rem + 1.1vw, 2.2rem); line-height: 1.3; letter-spacing: -0.025em; }
.story__copy p:not(.story__lede) { font-size: clamp(1rem, 0.92rem + 0.3vw, 1.2rem); line-height: 1.6; color: #4d4d4d; }
.story__copy p:last-child { color: var(--black); font-weight: 600; }

/* ==========================================================================
   Evolution — each chapter adds a layer
   ========================================================================== */
.evo { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.evo__list { --mark: clamp(5rem, 9vw, 9rem); position: relative; margin-top: clamp(3rem, 5.5vw, 6rem); border-top: 1px solid rgb(255 255 255 / 0.2); }
.evo__list::before, .evo__list::after { content: ""; position: absolute; left: var(--mark); top: 0; bottom: 0; width: 1px; background: rgb(255 255 255 / 0.14); }
.evo__list::after { width: 2px; margin-left: -0.5px; background: linear-gradient(var(--purple), var(--blue-bright)); transform-origin: 50% 0; }
.evo__ch { --c: var(--blue-bright); position: relative; display: grid; grid-template-columns: var(--mark) minmax(0, 1.1fr) minmax(0, 0.6fr) clamp(5rem, 9vw, 9rem); align-items: center; gap: 1rem clamp(1.5rem, 3vw, 3.5rem); padding-block: clamp(1.75rem, 3.4vw, 3.25rem); border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.evo__ch:nth-child(1) { --c: #d9d9d9; }
.evo__ch:nth-child(2) { --c: #5b96ff; }
.evo__ch:nth-child(3) { --c: #7d6cf0; }
.evo__ch:nth-child(4) { --c: #47b8c9; }
.evo__ch:nth-child(5) { --c: #b07cff; }
.evo__mark { position: relative; display: grid; justify-items: end; gap: 0.3rem; padding-right: clamp(1rem, 2vw, 2rem); }
.evo__mark::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 1.5px solid rgb(255 255 255 / 0.4); border-radius: 50%; background: var(--black); transition: background-color 0.5s 0.3s, border-color 0.5s 0.3s, box-shadow 0.5s 0.3s; }
.evo__ch.is-in .evo__mark::after { border-color: var(--c); background: var(--c); box-shadow: 0 0 0 5px rgb(255 255 255 / 0.06); }
.evo__mark small { font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); }
.evo__mark b { font-size: clamp(1.4rem, 1rem + 1.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.evo__title { font-size: clamp(2rem, 1rem + 3vw, 4.4rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.05em; }
.evo__text { max-width: 30em; margin-top: 0.7rem; font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.1rem); line-height: 1.5; color: rgb(255 255 255 / 0.6); }
.evo__caps { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.evo__caps li { padding: 0.4rem 0.7rem; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 99em; font: 500 0.72rem/1 var(--mono); color: rgb(255 255 255 / 0.7); }
.evo__stack { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
.evo__stack i { height: 0.7rem; border-radius: 99em; background: rgb(255 255 255 / 0.14); transform-origin: 100% 50%; }
.evo__stack i:nth-child(1) { width: 100%; }
.evo__stack i:nth-child(2) { width: 88%; }
.evo__stack i:nth-child(3) { width: 76%; }
.evo__stack i:nth-child(4) { width: 64%; }
.evo__stack i:nth-child(5) { width: 52%; }
.evo__stack i:nth-child(6) { width: 40%; }
.evo__stack i:last-child { background: var(--c); }
.evo__ch--today .evo__stack i { background: linear-gradient(90deg, var(--purple), var(--blue-bright)); }
@media (prefers-reduced-motion: no-preference) {
  .js .evo__ch .evo__stack i:last-child { transform: scaleX(0); transition: transform 0.9s var(--ease-out) 0.45s; }
  .js .evo__ch.is-in .evo__stack i:last-child { transform: none; }
  @supports (animation-timeline: view()) and (animation-range: entry) {
    .evo__list { view-timeline: --evo; }
    .evo__list::after { animation: ab-fill linear both; animation-timeline: --evo; animation-range: entry 25% exit 55%; }
    @keyframes ab-fill { from { transform: scaleY(0); } }
  }
}

/* ==========================================================================
   What we do — oversized discipline rows
   ========================================================================== */
.wd { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 9vw, 10rem); }
.wd__list { margin-top: clamp(3rem, 5.5vw, 6rem); border-top: 1px solid var(--black); }
.wd__row { position: relative; border-bottom: 1px solid var(--border-light); }
.wd__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--purple), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease-out); }
.wd__link { position: relative; display: grid; grid-template-columns: clamp(3rem, 5vw, 5rem) minmax(0, 1.6fr) minmax(0, 0.7fr) 5.5rem 3.5rem; align-items: center; gap: 1rem clamp(1rem, 2.5vw, 2.5rem); padding-block: clamp(1.6rem, 3vw, 3rem); }
.wd__link:focus-visible { outline-offset: -2px; }
.wd__n { position: relative; font: 600 var(--fs-small)/1 var(--mono); color: #8a8a8a; transition: color 0.35s; }
.wd__n::after { content: ""; position: absolute; left: 2.2em; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-radius: 50%; background: var(--grad-accent); scale: 0; transition: scale 0.5s var(--ease-out); }
.wd__title { font-size: clamp(2.2rem, 0.8rem + 3.9vw, 5.75rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.055em; transition: transform 0.8s var(--ease-out), color 0.4s; }
.wd__desc { max-width: 26em; font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.1rem); line-height: 1.45; color: #4d4d4d; transition: opacity 0.45s var(--ease-soft), transform 0.7s var(--ease-out); }
.wd__viz { display: block; width: 5.5rem; transition: opacity 0.45s var(--ease-soft), transform 0.7s var(--ease-out); }
.wd__viz svg { display: block; width: 100%; overflow: visible; }
.wd__viz path { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wd__viz circle { fill: var(--black); }
.wd__viz .wd__hot { fill: var(--purple); }
.wd__go { justify-self: end; display: grid; place-items: center; width: 3.5rem; aspect-ratio: 1; border: 1px solid rgb(0 0 0 / 0.2); border-radius: 50%; transition: background-color 0.35s, border-color 0.35s, color 0.35s; }
.wd__go svg { width: 1.3rem; height: 0.65rem; rotate: -45deg; transition: rotate 0.6s var(--ease-out); }
@media (hover: hover) {
  .wd__desc { opacity: 0; transform: translate3d(-1rem, 0, 0); }
  .wd__viz { opacity: 0; transform: scale(0.85) translate3d(-0.5rem, 0, 0); }
  .wd__viz path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-in-out) 0.1s; }
  .wd__link:is(:hover, :focus-visible) .wd__title { transform: translateX(clamp(0.75rem, 2vw, 2rem)); }
  .wd__link:is(:hover, :focus-visible) .wd__n { color: var(--blue); }
  .wd__link:is(:hover, :focus-visible) .wd__n::after { scale: 1; }
  .wd__link:is(:hover, :focus-visible) :is(.wd__desc, .wd__viz) { opacity: 1; transform: none; }
  .wd__link:is(:hover, :focus-visible) .wd__viz path { stroke-dashoffset: 0; }
  .wd__link:is(:hover, :focus-visible) .wd__go { border-color: var(--black); background: var(--black); color: var(--white); }
  .wd__link:is(:hover, :focus-visible) .wd__go svg { rotate: 0deg; }
  .wd__row:hover::after, .wd__row:focus-within::after { transform: none; }
  .wd__list:hover .wd__row:not(:hover) .wd__title { color: #b3b3b3; }
}

/* ==========================================================================
   Philosophy — design, develop, innovate
   ========================================================================== */
.phil { background: var(--black); color: var(--white); padding-block: clamp(5rem, 10vw, 11rem); overflow: hidden; }
.phil__list { display: grid; gap: clamp(2.5rem, 7vw, 7rem); margin-top: clamp(3rem, 6vw, 6rem); }
.phil__item { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; column-gap: clamp(1rem, 2.5vw, 2.5rem); }
.phil__item--2 { margin-left: clamp(0rem, 13vw, 15rem); }
.phil__item--3 { margin-left: clamp(0rem, 26vw, 30rem); }
.phil__n { align-self: start; padding-top: 1.4rem; font: 600 var(--fs-small)/1 var(--mono); color: rgb(255 255 255 / 0.4); }
.phil__word { padding-block: 0.04em 0.2em; margin-block: -0.04em -0.2em; font-size: clamp(3.8rem, 0.8rem + 11vw, 14rem); font-weight: 700; line-height: 0.86; letter-spacing: -0.065em; background: linear-gradient(90deg, var(--white) 0 46%, rgb(255 255 255 / 0.14) 54% 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.phil__dot { color: var(--blue-bright); }
.phil__sub { padding-bottom: 0.55em; font-size: clamp(1.2rem, 0.85rem + 1.3vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: rgb(255 255 255 / 0.7); }
.phil__note { max-width: 32em; margin: clamp(3.5rem, 7vw, 7rem) 0 0 auto; font-size: clamp(1rem, 0.9rem + 0.45vw, 1.35rem); line-height: 1.5; color: rgb(255 255 255 / 0.6); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: entry) {
    .phil__item { view-timeline: --ph; }
    .phil__word { animation: ab-ink linear both; animation-timeline: --ph; animation-range: entry 15% cover 45%; }
    .phil__sub { animation: ab-sub linear both; animation-timeline: --ph; animation-range: entry 55% cover 50%; }
    @keyframes ab-ink { from { background-position: 100% 0; } to { background-position: 0 0; } }
    @keyframes ab-sub { from { opacity: 0; transform: translate3d(0, 1.25rem, 0); } }
  }
}

/* ==========================================================================
   Why Synapse — four statements
   ========================================================================== */
.why2 { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 9vw, 10rem); }
.why2__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--black); }
.w2 { display: grid; align-content: start; gap: 1.1rem; padding: clamp(1.75rem, 3vw, 3rem) clamp(1rem, 3vw, 3.5rem) clamp(2.5rem, 4vw, 4.5rem) 0; border-bottom: 1px solid var(--border-light); }
.w2:nth-child(even) { padding-inline: clamp(1rem, 3vw, 3.5rem) 0; border-left: 1px solid var(--border-light); }
.w2__k { display: flex; align-items: baseline; gap: 0.75rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; }
.w2__k b { font-family: var(--mono); letter-spacing: 0.04em; color: var(--blue); }
.w2__big { font-size: clamp(2.4rem, 1rem + 4vw, 6rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.055em; transition: transform 0.8s var(--ease-out); }
.w2__big em { font-style: normal; background: linear-gradient(90deg, #a3a3a3, #a3a3a3) 0 0 / 100% 100%, var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-size 0.6s var(--ease-out); background-repeat: no-repeat; }
.w2__text { max-width: 28em; font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem); line-height: 1.5; color: #4d4d4d; }
@media (hover: hover) {
  .w2:hover .w2__big { transform: translateX(0.5rem); }
  .w2:hover .w2__big em { background-size: 0% 100%, auto; }
}
@media (hover: none) {
  .w2__big em { background-size: 0% 100%, auto; }
}

/* ==========================================================================
   Global experience — coordinates, not a map
   ========================================================================== */
.globe { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.geo { position: relative; margin: clamp(3rem, 5.5vw, 6rem) 0 0; aspect-ratio: 1200 / 320; container-type: inline-size; background: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.4px) 0 0 / calc(100% / 60) calc(100% / 16); border-block: 1px solid rgb(255 255 255 / 0.12); }
.geo__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.geo__grat { fill: none; stroke: rgb(255 255 255 / 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.geo__eq { fill: none; stroke: rgb(255 255 255 / 0.22); stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.geo__axis { font: 500 9px/1 var(--mono); fill: rgb(255 255 255 / 0.35); }
.geo__arc { fill: none; stroke: rgb(91 150 255 / 0.55); stroke-width: 1.4; stroke-dasharray: 1 1; }
.geo__pulse { fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.04 0.96; stroke-dashoffset: 0.04; opacity: 0; }
.geo__pt { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.geo__pt > i { position: absolute; left: -0.3rem; top: -0.3rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 0.3rem rgb(91 150 255 / 0.18); }
.geo__pt--home > i { left: -0.45rem; top: -0.45rem; width: 0.9rem; height: 0.9rem; background: var(--grad-accent); box-shadow: 0 0 0 0.35rem rgb(107 63 212 / 0.3); }
.geo__pt--home > i::after { content: ""; position: absolute; inset: -0.7rem; border: 1px solid rgb(155 124 240 / 0.7); border-radius: 50%; opacity: 0; }
.geo__label { position: absolute; left: 0.9rem; top: -0.55rem; display: grid; gap: 0.2rem; white-space: nowrap; }
.geo__label b { font-size: max(0.78rem, 1.2cqi); font-weight: 600; letter-spacing: -0.01em; }
.geo__label em { font-size: max(0.66rem, 0.9cqi); font-style: normal; color: #c9b6ff; }
.geo__label small { font: 500 max(0.56rem, 0.78cqi)/1 var(--mono); color: rgb(255 255 255 / 0.5); }
.geo__pt--left .geo__label { left: auto; right: 0.9rem; text-align: right; }
.geo__pt--up .geo__label { top: auto; bottom: 0.8rem; left: -0.3rem; }
.geo__pt--down .geo__label { top: 0.75rem; }
.geo__list { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(3.5rem, 6vw, 6rem); border-top: 1px solid rgb(255 255 255 / 0.25); }
.num { display: grid; gap: 0.6rem; padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1rem, 2.5vw, 2.5rem) 0 0; }
.num + .num { padding-left: clamp(1rem, 2.5vw, 2.5rem); border-left: 1px solid rgb(255 255 255 / 0.12); }
.num__v { font-size: clamp(3.4rem, 1.4rem + 6vw, 9rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.num__v em { font-style: normal; }
.num__v small { margin-right: 0.2em; font-size: 0.3em; font-weight: 600; letter-spacing: -0.01em; color: rgb(255 255 255 / 0.6); }
.num__v em, .num__v span { background: linear-gradient(90deg, var(--white), #c5d6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num__k { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); }

@media (prefers-reduced-motion: no-preference) {
  .js .geo .geo__arc { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-in-out); transition-delay: calc(var(--k) * 0.18s + 0.3s); }
  .js .geo.is-in .geo__arc { stroke-dashoffset: 0; }
  .js .geo .geo__pt { opacity: 0; transform: translate3d(0, 0.4rem, 0); transition: opacity 0.6s var(--ease-soft), transform 0.8s var(--ease-out); transition-delay: calc(var(--k) * 0.18s + 0.9s); }
  .js .geo.is-in .geo__pt { opacity: 1; transform: none; }
  .geo.is-in .geo__pulse { animation: ab-arc 6s var(--ease-in-out) infinite; animation-delay: calc(var(--k) * 1s + 2.4s); }
  .geo__pt--home > i::after { animation: ab-ping 2.6s var(--ease-out) infinite; }
  .globe.is-paused :is(.geo__pulse, .geo__pt--home > i) { animation-play-state: paused; }
  .globe.is-paused .geo__pt--home > i::after { animation-play-state: paused; }
  @keyframes ab-arc { 0% { stroke-dashoffset: 0.04; opacity: 1; } 30% { stroke-dashoffset: -0.96; opacity: 1; } 30.1%, 100% { opacity: 0; } }
  @keyframes ab-ping { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
}

/* ==========================================================================
   Team — an editorial masthead (placeholders until real profiles arrive)
   ========================================================================== */
.team2 { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 9vw, 10rem); }
.team2__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 3rem clamp(2rem, 6vw, 8rem); }
.team2__head { position: sticky; top: calc(var(--header-h) + 2rem); }
.team2__title { margin-top: 1.25rem; font-size: clamp(2.4rem, 0.9rem + 4.6vw, 6.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; }
.team2__title .mask { display: block; width: fit-content; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.team2__lead { max-width: 26em; margin-top: 1.5rem; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem); line-height: 1.5; color: #4d4d4d; }
.team2__note { display: inline-flex; margin-top: 1.5rem; padding: 0.45rem 0.85rem; border: 1px dashed rgb(0 0 0 / 0.3); border-radius: 99em; font: 500 0.74rem/1 var(--mono); color: #6a6a6a; }
.tg { padding-block: 1.4rem 2rem; border-top: 1px solid var(--black); }
.tg__k { display: flex; align-items: baseline; gap: 0.75rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6a6a6a; }
.tg__k b { font-family: var(--mono); letter-spacing: 0.04em; color: var(--blue); }
.tg__list { margin-top: 0.5rem; }
.tm { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding-block: 1rem; border-bottom: 1px solid var(--border-light); }
.tm__photo { display: grid; place-items: center; width: 3.5rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #deded9; transition: scale 0.6s var(--ease-out); }
.tm__photo img { width: 100%; height: 100%; object-fit: cover; }
.tm__photo > span { font: 600 0.55rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a; }
.tm__name { font-size: clamp(1.4rem, 1rem + 1.2vw, 2.4rem); font-weight: 600; letter-spacing: -0.04em; transition: transform 0.6s var(--ease-out); }
.tm__role { font: 500 0.8rem/1.2 var(--mono); text-align: right; color: #6a6a6a; }
.tm[data-placeholder] .tm__photo { background: transparent; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25); }
.tm[data-placeholder] .tm__name { color: #b0b0ac; }
.tm[data-placeholder] .tm__role { color: #a6a6a2; }
@media (hover: hover) {
  .tm:hover .tm__name { transform: translateX(0.5rem); }
  .tm:hover .tm__photo { scale: 1.12; }
}

/* ==========================================================================
   Closing
   ========================================================================== */
.ab-close .s-cta__text strong { display: block; margin-bottom: 0.35rem; font-weight: 600; color: var(--black); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64em) {
  .story__body, .team2__grid { grid-template-columns: minmax(0, 1fr); }
  .story__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .team2__head { position: static; }
  .evo__ch { grid-template-columns: var(--mark) minmax(0, 1fr) clamp(4rem, 12vw, 7rem); }
  .evo__caps { grid-column: 2; }
  .evo__stack { grid-column: 3; grid-row: 1 / span 2; }
  .wd__link { grid-template-columns: clamp(2.5rem, 5vw, 4rem) minmax(0, 1fr) 3rem; }
  .wd__desc { grid-column: 2; }
  .wd__viz { display: none; }
  .wd__go { grid-column: 3; grid-row: 1; width: 3rem; }
  .phil__item--2 { margin-left: 8vw; }
  .phil__item--3 { margin-left: 16vw; }
  .phil__item { grid-template-columns: auto minmax(0, 1fr); }
  .phil__sub { grid-column: 2; padding-bottom: 0; margin-top: 0.4rem; }
  .geo__label em { display: none; }
}

@media (max-width: 48em) {
  .ab-hero { min-height: auto; }
  .chain__thread { height: 12cqi; }
  .cst__glyph { width: 12cqi; }
  .cst__label { display: none; }
  .chain__caption { display: block; margin-top: 1.1rem; font: 600 0.66rem/1.5 var(--mono); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; color: rgb(255 255 255 / 0.6); }

  .story__facts { grid-template-columns: minmax(0, 1fr); }

  .evo__list { --mark: 4.25rem; }
  .evo__ch { grid-template-columns: var(--mark) minmax(0, 1fr); row-gap: 0.9rem; }
  .evo__caps { grid-column: 2; }
  .evo__stack { grid-column: 2; grid-row: auto; width: 7rem; align-items: flex-start; }
  .evo__stack i { transform-origin: 0 50%; }
  .evo__mark { padding-right: 0.9rem; align-self: start; padding-top: 0.3rem; }
  .evo__mark::after { top: 1.1rem; }
  .evo__mark b { font-size: 1.2rem; }

  .wd__link { grid-template-columns: minmax(0, 1fr) 2.75rem; }
  .wd__n { display: none; }
  .wd__title, .wd__desc { grid-column: 1; }
  .wd__go { grid-column: 2; width: 2.75rem; }

  .phil__item, .phil__item--2, .phil__item--3 { margin-left: 0; }
  .phil__n { padding-top: 0.6rem; }

  .why2__list { grid-template-columns: minmax(0, 1fr); }
  .w2, .w2:nth-child(even) { padding-inline: 0; border-left: 0; }

  .geo__label, .geo__axis { display: none; }
  .geo__list { position: static !important; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; margin-top: 1.5rem; }
  .geo__list li { display: grid; gap: 0.2rem; }
  .geo__list b { font-size: 1rem; font-weight: 600; }
  .geo__list span { font: 500 0.68rem/1.2 var(--mono); color: rgb(255 255 255 / 0.5); }

  .nums { grid-template-columns: minmax(0, 1fr); }
  .num, .num + .num { padding: 1.5rem 0 1.25rem; border-left: 0; border-bottom: 1px solid rgb(255 255 255 / 0.12); }

  .tm { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.4rem 1rem; }
  .tm__photo { grid-row: span 2; width: 2.75rem; }
  .tm__role { text-align: left; }
}