/* ============================================================
 * About — Ted Saunders
 * Page-specific styling. Builds on src/site.css tokens + the
 * cinematic brass-on-black system. True viewport scale (no 1920
 * design stage) so the pinned compass scroll behaves correctly.
 * ============================================================ */

.about-page {
  background: #000;
  color: #fff;
  /* clip (not hidden) so overflow-y stays `visible` and the viewport sticky
     pin on .ab-compass__stage keeps working — `hidden` coerces the other axis
     to `auto`, turning .about-page into a scroll container and breaking the pin. */
  overflow-x: clip;
}

/* The reused Header sits at true scale here — trim it down a touch
   so it reads like a real top bar rather than the scaled-1920 hero strip.
   Overlaid (absolute) on the hero so its warm aura shows through behind the
   nav/logo instead of a black strip. */
.about-page .tk-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  padding: 1.667vw 3.333vw 0;
  background: transparent;
}
.about-page .tk-brand .logo { height: 4.1667vw; }
.about-page .tk-nav { gap: 3.75vw; }
.about-page .tk-nav a { font-size: 1.0417vw; }
.about-page .tk-header .tk-btn { font-size: clamp(12px, 0.9vw, 15px); height: 50px; padding: 0 24px; }

/* ---- shared section frame ---- */
.ab-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(12px, 0.95vw, 15px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  background: var(--grad-bronze);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: 0;
}

/* Textured-gold display heading (matches hero wordmark treatment) */
.ab-textured {
  background: url("assets/heading-texture.jpg") center 38% / cover, var(--grad-bronze);
  background-blend-mode: lighten;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
}

/* ============================================================
 *  HERO — "One imagination. Many expressions."
 * ============================================================ */
.ab-hero {
  position: relative;
  min-height: 92vh;
  display: flex; flex-direction: column;
  padding-bottom: 8vh;
  background:
    linear-gradient(180deg, #060402 0%, rgba(6,4,2,0) 34%),
    radial-gradient(120% 82% at 50% 46%, rgba(90,52,25,0.55) 0%, rgba(90,52,25,0) 60%),
    #060402;
  overflow: hidden;
}
.ab-hero__starfield {
  position: absolute; inset: 0;
  background:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,234,202,0.8), transparent),
    radial-gradient(1.2px 1.2px at 70% 22%, rgba(255,234,202,0.6), transparent),
    radial-gradient(1.6px 1.6px at 42% 64%, rgba(247,219,160,0.6), transparent),
    radial-gradient(1.1px 1.1px at 85% 70%, rgba(255,234,202,0.5), transparent),
    radial-gradient(1.3px 1.3px at 12% 78%, rgba(255,234,202,0.5), transparent),
    radial-gradient(1.2px 1.2px at 60% 84%, rgba(247,219,160,0.45), transparent);
  background-size: 720px 720px;
  opacity: 0.5;
  pointer-events: none;
  animation: abHeroDrift 90s linear infinite;
}
@keyframes abHeroDrift { to { background-position: 0 -720px; } }
@media (prefers-reduced-motion: reduce) { .ab-hero__starfield { animation: none; } }

/* Astrolabe arc-fragments bleeding in from the corners — compass-adjacent
   instrument geometry, ultra-faint, turning almost imperceptibly. */
.ab-hero__astro { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ab-hero__astro .astro {
  position: absolute;
  color: #C9A24B; opacity: 0.12;
  filter: drop-shadow(0 0 12px rgba(201,162,75,0.18));
}
.ab-hero__astro .astro svg { display: block; width: 100%; height: 100%; }
.astro--tl {
  width: clamp(560px, 50vw, 940px); aspect-ratio: 1;
  top: -16vw; left: -13vw;
  animation: abAstroSpin 170s linear infinite;
}
.astro--br {
  width: clamp(640px, 58vw, 1080px); aspect-ratio: 1;
  bottom: -24vw; right: -16vw;
  animation: abAstroSpin 220s linear infinite reverse;
}
@keyframes abAstroSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .astro--tl, .astro--br { animation: none; } }

/* Dark fade over the right + bottom so the lower-right astrolabe fragment
   melts into black before it meets the actual compass below (hides the cut). */
.ab-hero__fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,4,2,0) 66%, rgba(6,4,2,0.5) 86%, #060402 100%);
}
.ab-hero__inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: max(17vh, 175px) clamp(24px, 6vw, 120px) 0;
  max-width: 1280px; margin: 0 auto;
}
.ab-hero__eyebrow { margin-bottom: 30px; }
.ab-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 4.9vw, 88px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.ab-hero__sub {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(20px, 2.1vw, 34px);
  line-height: 1.3;
  color: var(--c-cream);
  margin: 28px 0 0;
  letter-spacing: 0.01em;
}
.ab-hero__rule {
  width: 1px; height: 64px;
  margin: 40px auto 32px;
  background: linear-gradient(180deg, var(--c-hairline), transparent);
}
.ab-hero__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 23px);
  line-height: 1.62;
  color: rgba(255,255,255,0.82);
  max-width: 1080px;
  margin: 0 auto;
  text-wrap: pretty;
}
.ab-hero__body strong { color: var(--c-cream); font-weight: 500; }
.ab-hero__scrollcue {
  margin: 6vh auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,234,202,0.55);
}
.ab-hero__scrollcue svg { stroke: var(--c-hairline); animation: abBob 2.4s ease-in-out infinite; }
@keyframes abBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .ab-hero__scrollcue svg { animation: none; } }

/* ============================================================
 *  COMPASS — scroll-driven docking navigator
 * ============================================================ */
.ab-compass {
  position: relative;
  background:
    radial-gradient(70% 60% at 30% 40%, rgba(74,46,20,0.4) 0%, rgba(74,46,20,0) 60%),
    #050301;
}
.ab-compass__stage {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  background: #050301;
}
.ab-compass__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.ab-compass__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(5,3,1,0.5);
}
/* central radial darkening behind the compass while it's centered (JS-driven opacity) */
.ab-compass__centershade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 1;
  background: radial-gradient(60% 70% at 50% 50%, rgba(5,3,1,0.85) 0%, rgba(5,3,1,0.55) 35%, rgba(5,3,1,0) 70%);
  transition: opacity .15s linear;
}
/* extra left-side shade that fades in as the compass docks left (JS-driven opacity) */
.ab-compass__leftshade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(5,3,1,0.9) 0%, rgba(5,3,1,0.8) 35%, rgba(5,3,1,0.35) 55%, rgba(5,3,1,0) 72%);
  transition: opacity .15s linear;
}
/* matching right-side shade so the fire behind the editorial panel/thumbnails isn't distracting */
.ab-compass__rightshade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(270deg, rgba(5,3,1,0.9) 0%, rgba(5,3,1,0.8) 35%, rgba(5,3,1,0.35) 55%, rgba(5,3,1,0) 72%);
  transition: opacity .15s linear;
}
.ab-compass__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(251,230,184,0.8), transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, rgba(251,230,184,0.6), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(251,230,184,0.5), transparent),
    radial-gradient(1.3px 1.3px at 85% 20%, rgba(251,230,184,0.7), transparent),
    radial-gradient(1px 1px at 32% 65%, rgba(251,230,184,0.5), transparent),
    radial-gradient(1.2px 1.2px at 58% 12%, rgba(251,230,184,0.55), transparent);
  background-size: 600px 600px, 700px 700px, 500px 500px, 800px 800px, 650px 650px, 750px 750px;
  animation: abCompassDrift 26s linear infinite;
}
@keyframes abCompassDrift {
  to { background-position: 0 -600px, 0 -700px, 0 -500px, 0 -800px, 0 -650px, 0 -750px; }
}
@media (prefers-reduced-motion: reduce) { .ab-compass__grain { animation: none; } }

/* Soft pulsing gold aura behind the instrument — the homepage's atmospheric glow. */
.ab-compass__glow {
  position: absolute; z-index: 1; pointer-events: none;
  left: 38%; top: 50%; transform: translate(-50%, -50%);
  width: min(120vh, 1200px); height: min(120vh, 1200px);
  background: radial-gradient(circle, rgba(240,196,120,0.16) 0%, rgba(201,162,75,0.07) 38%, rgba(240,196,120,0) 66%);
  filter: blur(26px);
  animation: abGlowPulse 7s ease-in-out infinite;
}
@keyframes abGlowPulse {
  0%,100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .ab-compass__glow { animation: none; } }
.ab-compass__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, #050301 0%, rgba(5,3,1,0) 16%, rgba(5,3,1,0) 84%, #050301 100%),
    radial-gradient(80% 80% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
}

/* ---- the rotating instrument ---- */
.ab-comp {
  position: absolute; top: 50%; left: 50%;
  width: min(96vh, 1040px); height: min(96vh, 1040px);
  z-index: 2;
  will-change: transform;
}
.ab-comp__dial { position: absolute; inset: 0; will-change: transform; }
.ab-comp__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* fixed pointer that the active node rotates into — points right toward the panel.
   Sits ~20% further out from the dial edge, and is hidden until the compass docks. */
.ab-comp__pointer {
  position: absolute; top: 50%; left: 107%;
  transform: translate(0, -50%);
  z-index: 5; opacity: 0;
}
.ab-comp__pointer svg { display: block; filter: drop-shadow(0 0 10px rgba(251,230,184,0.6)); }

/* center hub (counter-rotation not needed; it's outside the dial) */
.ab-comp__core {
  position: absolute; top: 50%; left: 50%;
  width: 24%; height: 24%;
  transform: translate(-50%, -50%);
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #050301 0%, #0C0704 45%, #2A1A0A 100%);
  border: 1.5px solid rgba(201,162,75,0.55);
  box-shadow: 0 0 46px rgba(201,162,75,0.42), inset 0 0 26px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  animation: abCorePulse 5.5s ease-in-out infinite;
}
@keyframes abCorePulse {
  0%,100% { box-shadow: 0 0 36px rgba(240,196,120,0.34), inset 0 0 26px rgba(0,0,0,0.6); }
  50%     { box-shadow: 0 0 58px rgba(240,196,120,0.52), inset 0 0 26px rgba(0,0,0,0.6); }
}
@media (prefers-reduced-motion: reduce) { .ab-comp__core { animation: none; } }
.ab-comp__core-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.25vw, 20px);
  line-height: 1.04; letter-spacing: 0.05em; text-transform: uppercase;
  color: #F0C478;
}
.ab-comp__core-rule { width: 38%; height: 1px; background: rgba(240,196,120,0.4); margin: 7px 0; }
.ab-comp__core-inner {
  width: 84%; height: 84%; border-radius: 50%;
  border: 1px solid rgba(201,162,75,0.28);
  display: flex; align-items: center; justify-content: center;
}
.ab-comp__core-mark {
  width: 74%; height: 74%; object-fit: contain;
  opacity: 0.98;
}
.ab-comp__core-sub {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(8px, 0.7vw, 11px); letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(240,196,120,0.72);
}

/* orbiting nodes — positioned on the dial, content counter-rotated upright */
.ab-node {
  position: absolute; top: 50%; left: 50%;
  width: 20.4%; height: 20.4%;
  margin: -10.2% 0 0 -10.2%;
  will-change: transform;
  cursor: pointer;
}
.ab-node__inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  will-change: transform;
}
/* Disc — matches the homepage orrery medallion exactly. */
.ab-node__disc {
  position: relative;
  width: 66%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #F0D595;
  background: radial-gradient(circle at 38% 32%, #3A2C16 0%, #160F07 100%);
  border: 2px solid #B98F3F;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    inset 0 1px 3px rgba(251,230,184,0.35),
    inset 0 -4px 10px rgba(0,0,0,0.6);
  transition: transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s ease, color .4s ease, border-color .4s ease;
}
.ab-node__label {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(11px, 0.95vw, 15px); letter-spacing: 0.04em; text-transform: none;
  color: #F0DCB0;
  white-space: nowrap; opacity: 0.92;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.85);
  transition: color .4s ease, opacity .4s ease;
}
/* Inactive destinations stay elegant but visually secondary. */
.ab-node:not(.is-active) .ab-node__disc { opacity: 0.72; }
.ab-node:not(.is-active) .ab-node__label { opacity: 0.78; }

/* Active destination — dominant: larger, lifted, brass halo + depth. */
.ab-node.is-active { z-index: 8; }
.ab-node.is-active .ab-node__disc {
  color: #FFF6DE; border-color: #FBE6B8;
  transform: scale(1.34);
  box-shadow:
    0 0 0 5px rgba(247,219,160,0.16),
    0 0 46px rgba(243,200,128,0.7),
    0 22px 46px rgba(0,0,0,0.7),
    inset 0 2px 5px rgba(255,244,212,0.65);
}
.ab-node.is-active .ab-node__label {
  color: #FFF1D2; opacity: 1; letter-spacing: 0.05em;
  margin-top: 20px;   /* clears the scaled disc — +10% spacing vs the homepage */
  text-shadow: 0 0 14px rgba(240,196,120,0.5), 0 2px 6px rgba(0,0,0,0.9);
}
/* Active glow halo (exact homepage ripple). */
.ab-node.is-active .ab-node__disc::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(240,196,120,0.4);
  animation: abNodeRipple 2.4s ease-out infinite;
}
@keyframes abNodeRipple {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* Brass shimmer sweeping across the marker the moment it locks in. */
.ab-node.is-active .ab-node__disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255,242,206,0.6) 50%, transparent 62%);
  background-size: 250% 100%;
  animation: abNodeShimmer 0.85s ease-out;
}
@keyframes abNodeShimmer {
  from { background-position: 130% 0; opacity: 1; }
  to   { background-position: -130% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ab-node.is-active .ab-node__disc::after { animation: none; } }

/* ---- editorial panel on the right (active expression) ---- */
.ab-panel {
  position: absolute; z-index: 3;
  top: 8vh; left: 46vw; right: auto;
  transform: none;
  width: min(42vw, 580px);
}
.ab-panel__card { position: relative; height: 84vh; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 99.5%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 99.5%, transparent 100%); }
.ab-panel__slide {
  position: absolute; top: 0; left: 0; right: 0;
  height: 84vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6vh 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}
.ab-panel__slide.is-on { pointer-events: auto; }
.ab-panel__meta {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.ab-panel__badge {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #E8C98A;
  border: 1.2px solid rgba(201,162,75,0.6);
  background: radial-gradient(circle at 40% 36%, rgba(60,44,22,0.9), rgba(10,7,3,0.95));
}
.ab-panel__num {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,234,202,0.62);
}
.ab-panel__name {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 62px);
  line-height: 0.96; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0 0 6px;
}
.ab-panel__medium {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-hairline);
  margin: 0 0 22px;
}
.ab-panel__thumb {
  position: relative;
  flex: 1 1 auto; min-height: 0; width: 100%;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(209,157,99,0.32);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
  background: #0A0705;
}
.ab-panel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-panel__thumb img[src*="g2"], .ab-panel__thumb img[src*="ted-cinematic"] { object-position: center top; }
.ab-panel__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(8,5,2,0.55); backdrop-filter: blur(2px);
  border: 1px solid rgba(209,157,99,0.5);
  display: flex; align-items: center; justify-content: center;
}
.ab-panel__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 22px 0 26px;
  text-wrap: pretty;
}
/* CTA — matches the homepage compass CTA (outline → fills bronze on hover). */
.ab-panel__cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #E8C98A;
  background: transparent;
  border: 1px solid rgba(201,162,75,0.5); border-radius: 2px;
  padding: 14px 26px; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, gap .25s ease;
}
.ab-panel__cta:hover {
  background: linear-gradient(180deg, #F4D58E, #B4823E);
  color: #1A1206; border-color: transparent; gap: 16px;
}

/* overview caption (fades out as compass docks) */
.ab-compass__intro {
  position: absolute; z-index: 3;
  left: 50%; top: calc(50% + min(40vh, 400px));
  transform: translate(-50%, 24px);
  text-align: center; width: max-content; max-width: 90vw;
}
.ab-compass__intro .h {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 34px); text-transform: uppercase; letter-spacing: 0.04em;
  margin: 14px 0 6px;
}
.ab-compass__intro .p {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,234,202,0.5);
}

/* progress dots (bottom-right, with the panel) */
.ab-compass__dots {
  position: absolute; z-index: 4;
  right: clamp(28px, 6vw, 132px); bottom: 7vh;
  display: flex; gap: 10px; align-items: center;
}
.ab-compass__dots i {
  width: 9px; height: 9px; border-radius: 50%; cursor: pointer;
  background: rgba(255,234,202,0.22);
  transition: background .3s ease, transform .3s ease;
}
.ab-compass__dots i.on { background: var(--grad-bronze); transform: scale(1.25); }

/* ---- mobile fallback (static, stacked) ---- */
.ab-compass--mobile { padding: 80px 22px 90px; }
.ab-compass--mobile .ab-compass__head { text-align: center; margin-bottom: 8vw; }
.ab-comp-static {
  position: relative; width: 84vw; max-width: 460px; aspect-ratio: 1; margin: 0 auto 64px;
}
.ab-mcard {
  border: 1px solid rgba(209,157,99,0.28); border-radius: 16px;
  background: linear-gradient(180deg, rgba(28,18,8,0.7), rgba(8,5,2,0.7));
  padding: 26px; margin-bottom: 22px;
}
.ab-mcard__name { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; margin: 0 0 4px; }
.ab-mcard__medium { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-hairline); margin: 0 0 14px; }
.ab-mcard__thumb { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.ab-mcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ab-mcard__thumb img[src*="g2"], .ab-mcard__thumb img[src*="ted-cinematic"] { object-position: center top; }
.ab-mcard__desc { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 0 18px; }

/* ============================================================
 *  VENTURES
 * ============================================================ */
.ab-ventures {
  position: relative;
  padding: clamp(90px, 11vh, 150px) clamp(24px, 6vw, 120px);
  background:
    radial-gradient(80% 70% at 80% 10%, rgba(74,46,20,0.4) 0%, rgba(74,46,20,0) 55%),
    #060402;
}
.ab-ventures__head { max-width: 1320px; margin: 0 auto 64px; text-align: center; }
.ab-ventures__head h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 76px); line-height: 0.96;
  text-transform: uppercase; letter-spacing: 0.01em;
  margin: 16px 0 18px;
}
.ab-ventures__head p {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(16px, 1.3vw, 22px); line-height: 1.55;
  color: rgba(255,255,255,0.78); max-width: 720px; margin: 0 auto;
}
.ab-vgrid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 1.8vw, 30px);
}
.ab-vcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: 38px 34px 34px;
  border: 1px solid rgba(209,157,99,0.26);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(30,20,9,0.72) 0%, rgba(9,6,3,0.86) 100%);
  overflow: hidden;
  transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.ab-vcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, rgba(201,162,75,0.14) 0%, rgba(201,162,75,0) 55%);
  opacity: 0; transition: opacity .4s ease;
}
.ab-vcard:hover {
  border-color: rgba(251,230,184,0.6);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.ab-vcard:hover::before { opacity: 1; }
.ab-vcard__logo {
  display: flex; align-items: center; min-height: 42px;
  margin-bottom: 22px; padding-bottom: 22px; flex: none;
  border-bottom: 1px solid rgba(90,52,25,0.14);
}
.ab-vcard__logoimg {
  height: 34px; width: auto; max-width: 72%; object-fit: contain; display: block;
}
.ab-ventures__title .ab-lc { text-transform: lowercase; }
.ab-vcard__wordmark {
  font-family: "Inter", var(--font-sans);
  font-weight: 800; font-size: clamp(20px, 1.6vw, 25px); letter-spacing: -0.01em;
  color: #0A0A0A;
}
.ab-vcard__brosvg { width: min(240px, 80%); height: auto; max-height: 40px; display: block; }
.ab-vcard__infinitsvg { height: 26px; width: auto; max-width: 80%; display: block; }
.ab-vcard__monoplain {
  font-family: var(--font-display); font-size: 26px; letter-spacing: 0.02em; color: #8A5A28;
}
.ab-vcard__logobox {
  width: 58px; height: 58px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(154,101,38,0.30);
  background: linear-gradient(180deg, #FFFDF8 0%, #F4E9D6 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.8);
}
.ab-vcard__placeholder { display: flex; align-items: center; gap: 12px; }
.ab-vcard__placeglyph {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #B07A2E;
  border: 1px dashed rgba(154,101,38,0.5);
  background: rgba(154,101,38,0.06);
}
.ab-vcard__placename {
  font-family: var(--font-display); font-size: clamp(18px, 1.4vw, 22px);
  color: #3A2410; letter-spacing: 0.01em;
}
.ab-vcard__mono {
  font-family: var(--font-display);
  font-size: 24px; letter-spacing: 0.02em;
  background: var(--grad-bronze);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ab-vcard__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.35vw, 22px); line-height: 1.06;
  text-transform: uppercase; letter-spacing: 0.01em;
  margin: 0 0 10px;
}
.ab-vcard__url {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-hairline); margin: 0 0 16px;
}
.ab-vcard__desc {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,0.76);
  margin: 0 0 28px; flex: 1;
}
.ab-vcard__btn {
  position: relative;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: #F1D9A8;
  background: linear-gradient(180deg, rgba(58,44,24,0.4), rgba(20,14,7,0.4));
  border: 1px solid rgba(209,157,99,0.6);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  padding: 14px 26px;
  cursor: pointer; text-decoration: none;
  box-shadow: inset 0 0 12px rgba(201,145,92,0.14), 0 0 0 1px rgba(201,145,92,0.08);
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
/* circuit ticks — top-left + lower-right for the tech/cyber feel */
.ab-vcard__btn::before,
.ab-vcard__btn::after {
  content: ""; position: absolute; width: 16px; height: 6px; pointer-events: none;
  background:
    linear-gradient(#D19D63, #D19D63) left top / 10px 1px no-repeat,
    radial-gradient(circle, #FBE6B8 0 1.4px, transparent 1.6px) right top / 3px 3px no-repeat;
  opacity: 0.75;
}
.ab-vcard__btn::before { top: 5px; left: 6px; transform: scaleX(-1); }
.ab-vcard__btn::after  { bottom: 5px; right: 6px; transform: scaleY(-1); }
.ab-vcard__btn svg { transition: transform .25s ease; }
.ab-vcard__btn:hover {
  background: linear-gradient(180deg, rgba(201,145,92,0.3), rgba(60,42,20,0.3));
  border-color: #FBE6B8; color: #FFF3DC;
  box-shadow: inset 0 0 16px rgba(201,145,92,0.3), 0 0 22px rgba(201,145,92,0.32);
}
.ab-vcard__btn:hover::before, .ab-vcard__btn:hover::after { opacity: 1; }
.ab-vcard__btn:hover svg { transform: translateX(4px); }

/* ============================================================
 *  VENTURES — LIGHT THEME
 * ============================================================ */
.ab-ventures--light {
  background:
    url("assets/ventures/cyber-bg.png") center / cover no-repeat,
    #EFE7D7;
}
.ab-ventures--light .ab-eyebrow {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: #9A6A2C;
}
.ab-ventures--light .ab-ventures__title {
  font-size: clamp(40px, 4.6vw, 76px); line-height: 0.96;
  text-transform: uppercase; letter-spacing: 0.01em;
  margin: 16px 0 18px;
  filter: none;
  /* Dark espresso base with the gold texture reading through only as faint shimmer */
  background:
    linear-gradient(rgba(24,15,6,0.70), rgba(24,15,6,0.70)),
    url("assets/heading-texture.jpg") center 38% / cover;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ab-ventures--light .ab-ventures__head p { color: rgba(58,36,16,0.72); }
.ab-ventures--light .ab-vcard {
  border: none; border-radius: 0;
  padding: 30px 44px 40px;
  background: url("assets/ventures/cyber-card.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 22px 44px rgba(12,8,3,0.42));
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}
@property --vc-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes vcBorderLight { to { --vc-angle: 360deg; } }
.ab-ventures--light .ab-vcard::before {
  background: radial-gradient(120% 90% at 50% -10%, rgba(201,162,75,0.16) 0%, rgba(201,162,75,0) 55%);
}
.ab-ventures--light .ab-vcard:hover {
  border-color: transparent;
  box-shadow: 0 34px 70px rgba(18,12,5,0.45);
}
.ab-ventures--light .ab-vcard__logo {
  border-bottom: none; padding-bottom: 0; margin-bottom: 22px;
  height: 38px; min-height: 38px;
}
.ab-ventures--light .ab-vcard__logoimg { height: 36px; }
.ab-ventures--light .ab-vcard__infinitsvg { height: 26px; }
.ab-ventures--light .ab-vcard__brosvg { max-height: 26px; width: auto; }
.ab-ventures--light .ab-vcard__logobox { width: 38px; height: 38px; border-radius: 9px; }
.ab-ventures--light .ab-vcard__placeglyph { width: 36px; height: 36px; }
.ab-ventures--light .ab-vcard__logobox {
  background: linear-gradient(180deg, rgba(42,28,12,0.9), rgba(18,12,6,0.95));
  border: 1px solid rgba(214,162,74,0.4); box-shadow: none;
}
.ab-ventures--light .ab-vcard__monoplain { color: #E8C98A; }
.ab-ventures--light .ab-vcard__placename { color: #F5EDE3; }
.ab-ventures--light .ab-vcard__placeglyph {
  border-color: rgba(214,162,74,0.4); background: rgba(214,162,74,0.08); color: #E8C98A;
}
.ab-ventures--light .ab-vcard__mono {
  background: none; -webkit-text-fill-color: initial; color: #E8C98A;
}
.ab-ventures--light .ab-vcard__title { filter: none; }
.ab-ventures--light .ab-vcard__desc { color: rgba(245,237,227,0.72); }
.ab-ventures--light .ab-vcard__btn {
  color: #F1D9A8; border-color: rgba(209,157,99,0.6);
}
.ab-ventures--light .ab-vcard__btn:hover {
  background: linear-gradient(180deg, rgba(201,145,92,0.3), rgba(60,42,20,0.3));
  border-color: #FBE6B8; color: #FFF3DC;
}

/* ============================================================
 *  FOLLOW TED — social rail
 * ============================================================ */
.ab-follow {
  position: relative;
  padding: clamp(80px, 10vh, 130px) clamp(24px, 6vw, 120px) clamp(90px, 12vh, 150px);
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(90,52,25,0.5) 0%, rgba(90,52,25,0) 60%),
    #050301;
}
.ab-follow__rule { width: 1px; height: 56px; margin: 0 auto 28px; background: linear-gradient(180deg, transparent, var(--c-hairline)); }
.ab-follow h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 72px); line-height: 0.98;
  text-transform: uppercase; margin: 14px 0 14px;
}
.ab-follow p {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(16px, 1.3vw, 22px); color: rgba(255,255,255,0.78);
  margin: 0 auto 48px; max-width: 600px;
}
.ab-social-rail {
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: 12px; max-width: 1240px; margin: 0 auto;
}
.ab-social {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(11px, 0.92vw, 14px); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-cream); text-decoration: none;
  border: 1.4px solid rgba(209,157,99,0.45);
  border-radius: 4px; padding: 14px clamp(14px, 1.4vw, 22px);
  transition: background .25s ease, border-color .25s ease, transform .2s ease, color .25s ease;
}
.ab-social svg { width: 17px; height: 17px; flex: none; }
.ab-social:hover {
  background: rgba(209,157,99,0.12);
  border-color: #FBE6B8; color: #fff;
  transform: translateY(-3px);
}

/* ============================================================
 *  RESPONSIVE
 * ============================================================ */
@media (max-width: 1024px) {
  .ab-vgrid { grid-template-columns: repeat(2, 1fr); }
  .ab-panel { width: min(48vw, 460px); }
  .ab-panel__name { font-size: clamp(30px, 5vw, 48px); }
}
@media (max-width: 768px) {
  .about-page .tk-nav { display: none; }
  .ab-vgrid { grid-template-columns: 1fr; }
  .ab-hero { min-height: auto; padding-top: 6vh; }
  .ab-social-rail { flex-wrap: wrap; }
}

/* ============================================================
 *  ROLES MARQUEE — full-width dark credits reel after the hero
 * ============================================================ */
.ab-marquee {
  position: relative;
  height: 100px;
  background: linear-gradient(180deg, #0A0704 0%, #140C05 50%, #0A0704 100%);
  border-top: 1px solid rgba(201,162,75,0.28);
  border-bottom: 1px solid rgba(201,162,75,0.28);
  overflow: hidden;
  display: flex; align-items: center;
}
.ab-marquee__viewport {
  position: relative; z-index: 1;
  display: flex; width: max-content;
  animation: abMarqueeScroll 46s linear infinite;
  will-change: transform;
}
.ab-marquee__sparkles {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
}
.ab-marquee__viewport { animation-play-state: running; }
@keyframes abMarqueeScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ab-marquee__viewport { animation: none; }
}
.ab-marquee__track { display: flex; align-items: center; flex: none; }
.ab-marquee__item { display: inline-flex; align-items: center; }
.ab-marquee__role {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(12px, 1.08vw, 17.6px);
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--grad-bronze);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  white-space: nowrap;
}
.ab-marquee__dot {
  color: rgba(201,162,75,0.6);
  font-size: clamp(11px, 0.9vw, 15px);
  margin: 0 clamp(24px, 2.6vw, 48px);
  line-height: 1;
}