/* ============================================================
   Vaultwave — About.
   Header and footer inherit styles.css untouched.

   This page tells two stories. The first is the founding argument:
   fragmentation becoming one connected system, staged so the reader
   is moved through it a beat at a time while the field behind them
   assembles. The second is the ventures, where each brand takes the
   page over — its own accent, ground and wordmark — rather than
   sitting politely in a card.
   ============================================================ */

/* ---------- shared furniture (self-contained: services.css is not
     loaded here, and phase 7 should lift these into one shared file) ---------- */

.scroll-rail {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.scroll-rail i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width .1s linear;
}

/* ---------- hero ---------- */

.ab-hero {
  position: relative;
  padding: 154px var(--pad) clamp(46px, 6vw, 86px);
  overflow: hidden;
  isolation: isolate;
}
/* The house ground. Same treatment the live homepage gives its intro
   section — multiply in light, inverted and blue-shifted in dark — so this
   reads as the same site rather than a second idea about texture. Full
   bleed via 100vw, clipped by the hero's own overflow so the viewport
   never gains a horizontal scrollbar. */
.ab-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: url('assets/vaultwave-agency-pattern.png') center/cover no-repeat;
  opacity: .78;
  mix-blend-mode: multiply;
  /* Fades out before the thread begins, so there is no hard edge into 01. */
  mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
  transform: translate3d(0, var(--ground, 0px), 0) scale(1.06);
  pointer-events: none;
}
/* The homepage's dark filter is tuned for a section that also paints a
   gradient backdrop behind it; over this hero's flat ground it screened to a
   1.8-level difference on a 0-255 scale, which is to say nothing at all.
   The pattern's own internal contrast is only ~7 levels (base #f8f8f8 against
   #ffffff lines), so it has to be amplified before it can survive a dark
   ground. Measured: this lands the lines on rgb(5,13,24) and the field on
   rgb(38,54,86) — about 45 levels apart, and still a ground rather than a
   feature. */
html[data-theme="dark"] .ab-hero::before {
  opacity: .45;
  filter: invert(1) brightness(18) sepia(.4) saturate(3) hue-rotate(175deg);
  mix-blend-mode: screen;
}
.ab-hero-inner { max-width: var(--max); margin-inline: auto }

.ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--blue);
  font: 600 12px/1 "Manrope", Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ab-eyebrow::before { content: ""; width: 40px; height: 2px; background: currentColor }

.ab-hero h1 {
  margin: 0;
  max-width: 15ch;
  font: 600 clamp(42px, 6vw, 88px)/.96 "Manrope", Arial, sans-serif;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.ab-hero h1 em { font-weight: 400; color: var(--blue) }

.ab-lead {
  margin: 28px 0 0;
  max-width: 64ch;
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.7;
}



.ab-no {
  display: block;
  margin-bottom: 14px;
  font: 800 13px "Manrope", Arial, sans-serif;
  color: var(--blue);
  letter-spacing: .18em;
}

/* ============================================================
   01 — THE THREAD
   A broken line that seals itself as you descend. It carries the
   progression on its own, so the prose is never dimmed to signal
   where you are, and the layout is vertical by nature — a phone
   gets the real design rather than a squeezed desktop one.
   ============================================================ */

.ab-origin {
  position: relative;
  padding: clamp(64px, 8vw, 120px) var(--pad);
  scroll-margin-top: 84px;
}
.origin-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 88px);
  align-items: start;
}
.origin-head { position: sticky; top: 108px }
.origin-head h2 {
  margin: 0;
  font: 600 clamp(26px, 2.8vw, 36px)/1.1 "Manrope", Arial, sans-serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.origin-since {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .04em;
}

.thread {
  --pad-l: clamp(34px, 4vw, 52px);
  --line-x: 5px;
  position: relative;
  display: grid;
  gap: clamp(38px, 4.4vw, 62px);
  margin: 0;
  padding: 6px 0 6px var(--pad-l);
  list-style: none;
}
/* The broken state: what fragmentation looks like. */
/* Both are pseudo-elements of .thread, so ::after would otherwise paint
   after every knot and draw straight through the dots. Pinning the z-order
   keeps each dot solid and lets the line meet its centre cleanly. */
.thread::before,
.thread::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--line-x);
  width: 2px;
  border-radius: 2px;
}
.thread::before {
  top: 10px;
  bottom: 10px;
  background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 14px);
}
/* The line that closes the gaps. Height is driven from JS. */
.thread::after {
  top: 10px;
  height: calc(var(--p, 0) * (100% - 20px));
  background: linear-gradient(180deg, var(--blue), var(--sky));
  transition: height .3s linear;
}

.knot { position: relative }
.knot::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: calc(var(--pad-l) * -1);
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  transition: border-color .45s, transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s;
}
.knot.on::before {
  border-color: var(--blue);
  transform: scale(1.18);
  box-shadow: 0 0 0 4px #075cff14;
}
/* A ring radiating from behind the dot: reached, and still live. */
.knot.on::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--pad-l) * -1);
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  animation: knot-signal 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
  pointer-events: none;
}
@keyframes knot-signal {
  0%   { transform: scale(1); opacity: .5 }
  70%  { transform: scale(2.8); opacity: 0 }
  100% { transform: scale(2.8); opacity: 0 }
}
/* Arriving at the goal is the point, so the last knot fills solid. */
.knot-final.on::before { background: var(--blue); box-shadow: 0 0 0 6px #075cff26 }

.knot-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font: 600 11px/1 "Manrope", Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .45s;
}
.knot.on .knot-label { color: var(--blue) }

/* Every beat stays fully legible. The line does the storytelling. */
.knot p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.8;
  transition: color .45s;
}
.knot:first-child p { font-size: clamp(16px, 1.45vw, 20px); line-height: 1.7 }
.knot.on p { color: var(--ink) }
.knot-final p { font-weight: 500 }

/* ============================================================
   02 — THE VENTURES
   Each one themes itself from a single --accent, so the whole band
   re-colours from one declaration.
   ============================================================ */

.ab-projects { border-top: 1px solid var(--line) }

.projects-intro {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) var(--pad) clamp(30px, 4vw, 50px);
}
.projects-intro h2 {
  margin: 0;
  font: 600 clamp(28px, 3.4vw, 46px)/1.06 "Manrope", Arial, sans-serif;
  letter-spacing: -.045em;
}
.projects-intro p { margin: 18px 0 0; max-width: 56ch; color: var(--muted); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7 }

.venture {
  --accent: var(--blue);
  position: relative;
  padding: clamp(56px, 7vw, 104px) var(--pad);
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
/* Two tokens per venture, not one. --accent is the brand colour and drives
   the graphics, which only need 3:1. --accent-ink is what text uses: on white
   the brand reds and greens land at 4.31 and 3.07, both under the 4.5 body-text
   floor, so the text variant is darkened until it clears. Dark mode needs no
   adjustment — measured 4.52 and 6.34 against the dark ground. */
.venture-autos  { --accent: #e63329; --accent-ink: #dd3127 }
.venture-cheque { --accent: #2fa84f; --accent-ink: #25843e }
/* Measured against the ground actually rendered under the band — the glow
   lifts it to rgb(13,21,31), where the brand red only reaches 4.26. The green
   clears at 5.97 and is left alone. */
html[data-theme="dark"] .venture-autos  { --accent-ink: #e94e45 }
html[data-theme="dark"] .venture-cheque { --accent-ink: #2fa84f }

/* The brand washes in as you arrive at it. */
.venture-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(70% 120% at 88% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%),
    radial-gradient(50% 90% at 4% 12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 1s ease;
}
.venture.in .venture-glow { opacity: 1 }

.venture-inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}

/* The logo band.

   The two wordmarks are very different shapes: Autos is a stacked lockup at
   1.60:1, Reality Cheque a single horizontal line at 3.33:1. Sizing both to a
   common WIDTH makes Autos tower over Cheque; sizing both to a common HEIGHT
   shrinks the Autos lettering to about half of Cheque's, because its box also
   carries the mark and the script. Neither reads as aligned.

   So both are driven from one shared band height with a per-brand optical
   multiplier below. The band is what actually aligns - it is the same in both
   cards, so the copy underneath starts on the same line either way - while the
   multiplier lets each wordmark reach the weight the other one has.

   The artwork was cropped to its own ink first. The supplied files carried
   different transparent padding per theme (Cheque had 3px above in light and
   8px in dark), which would have jogged the logo every time the theme flipped. */
.venture-mark {
  --logo-band: clamp(56px, 5.6vw, 72px);
  position: relative;
  display: flex;
  align-items: center;
  /* Must clear the TALLEST logo, which is Autos at 1.55 band-heights. At
     exactly 1.55 the image matched the box and rounding pushed it over, so the
     Autos band grew 3px taller than Cheque and the copy beneath the two logos
     no longer started on the same line. 1.7 leaves headroom. */
  min-height: calc(var(--logo-band) * 1.7);
}
.venture-autos  { --logo-scale: 1.55 }
.venture-cheque { --logo-scale: .72 }
.venture-logo {
  display: block;
  width: auto;
  height: calc(var(--logo-band) * var(--logo-scale, 1));
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity .8s, transform .8s cubic-bezier(.16, 1, .3, 1);
}
.venture.in .venture-logo { opacity: 1; transform: none }
/* Until the logo files land, a type lockup stands in. JS reveals the real
   logo only once it has actually loaded, so no broken image ever shows. */
.venture-lockup {
  display: block;
  font: 800 clamp(30px, 3.6vw, 46px)/1 "Manrope", Arial, sans-serif;
  letter-spacing: -.05em;
  color: var(--ink);
}
.venture-lockup em { font-weight: 400; font-style: italic; color: var(--accent) }
.venture.has-logo .venture-lockup { display: none }
/* `display: none` is fine here — a hidden image is still fetched, so `load`
   still fires and the real logo takes over the moment the files land. What
   must NOT come back is `loading="lazy"` on these two images: a lazy image
   that is never rendered is never fetched, `load` never fires, and the type
   lockup would stand in forever. Verified in-browser, not assumed. */
.venture:not(.has-logo) .venture-logo { display: none }

.venture-line {
  margin: 0 0 16px;
  color: var(--accent-ink, var(--accent));
  font: 600 clamp(15px, 1.4vw, 19px)/1.4 "Manrope", Arial, sans-serif;
  letter-spacing: -.02em;
}
.venture-body > p:not(.venture-line) {
  margin: 0;
  max-width: 64ch;
  color: var(--muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.8;
}

.venture-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(26px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}
.venture-links li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s, transform .5s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * 80ms + 260ms);
}
.venture.in .venture-links li { opacity: 1; transform: none }
.venture-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface-glass);
  font-size: 14px;
  /* Colour only. Nothing shifts position under the pointer. */
  transition: color .25s, border-color .25s, background .25s;
}
.venture-links a:hover,
.venture-links a:focus-visible {
  color: var(--accent-ink, var(--accent));
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.venture-links a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 3px }
.venture-links .ui-icon { color: var(--accent) }

/* ---------- pointer out ---------- */

.ab-more { padding: clamp(56px, 7vw, 96px) var(--pad); border-top: 1px solid var(--line) }
.ab-more-inner { max-width: var(--max); margin-inline: auto; display: grid; gap: 14px }
.more-card {
  display: grid;
  gap: 8px;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  transition: border-color .3s, background .3s;
}
.more-card:hover { border-color: var(--blue) }
.more-k { font: 600 11px/1 "Manrope", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--blue) }
.more-t { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; letter-spacing: -.015em }
.more-card .ui-icon { color: var(--blue); transition: transform .3s cubic-bezier(.16, 1, .3, 1) }
.more-card:hover .ui-icon { transform: translate(3px, -3px) }

/* ---------- closing band ---------- */

.ab-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 8vw, 108px) var(--pad);
  background: var(--navy);
  color: #fff;
}
.ab-cta::before {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -240px;
  top: -300px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
  box-shadow: 0 0 0 70px #ffffff08;
  pointer-events: none;
}
.ab-cta-inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 44px;
  align-items: center;
}
.ab-cta h2 { margin: 0; font: 600 clamp(28px, 3.2vw, 44px)/1.08 "Manrope", Arial, sans-serif; letter-spacing: -.04em }
.ab-cta h2 em { font-weight: 400; color: var(--sky) }
.ab-cta p { margin: 12px 0 0; color: #b9c8d8; max-width: 46ch; font-size: 16px }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .origin-inner, .venture-inner { grid-template-columns: 1fr; gap: 26px }
  /* A sticky label has nothing to stay beside once the columns stack. */
  .origin-head { position: static }
  .ab-cta-inner { grid-template-columns: 1fr }
  .venture-mark { min-height: calc(var(--logo-band) * 1.7) }
}
@media (max-width: 640px) {
  .ab-hero { padding-top: 116px }
  .venture-links a { padding: 10px 15px; font-size: 13px }
}

@media (prefers-reduced-motion: reduce) {
  .ab-hero::before { transform: scale(1.06) }
  .thread::after { transition: none }
  .knot.on::after { animation: none; display: none }
  .knot::before, .knot-label, .knot p { transition: none }
  .venture-glow { opacity: 1; transition: none }
  .venture-logo, .venture-links li { opacity: 1; transform: none; transition: none }
  .venture-links a, .more-card, .more-card .ui-icon { transition: none }
}

/* ---------- dark-mode accent ----------
   --blue (#075cff) is not redefined for dark, so every small accent using it
   sat at 3.4-3.7 against the dark ground: under the 4.5 floor for text that
   size, and worse over the hero pattern. --sky is the house accent on dark
   grounds — the live stylesheet already uses it that way for .on-dark
   labels — and clears the floor comfortably. Graphics follow the text so the
   knot and its label stay one colour. */
html[data-theme="dark"] .ab-eyebrow,
html[data-theme="dark"] .ab-no,
html[data-theme="dark"] .more-k,
html[data-theme="dark"] .knot.on .knot-label { color: var(--sky) }

html[data-theme="dark"] .knot.on::before { border-color: var(--sky); box-shadow: 0 0 0 4px #58b8ff1f }
html[data-theme="dark"] .knot-final.on::before { background: var(--sky); box-shadow: 0 0 0 6px #58b8ff2e }
html[data-theme="dark"] .knot.on::after { background: var(--sky) }
html[data-theme="dark"] .thread::after { background: linear-gradient(180deg, var(--sky), var(--blue)) }
html[data-theme="dark"] .more-card:hover { border-color: var(--sky) }
html[data-theme="dark"] .more-card .ui-icon { color: var(--sky) }