/* Higher Agency — v3 overlay
   Layered on top of ../styles.css — only the Alexandria stage is upgraded here.
   Everything else inherits from v2. */

/* Nav wordmark sizing now lives in ../styles.css (56px / 44px mobile)
   so every page matches — the v3 override became the global rule. */

/* @font-face declarations moved to ../styles.css so every page
   (not just v3 pages) gets self-hosted fonts. */

/* ============================================================
   Accent contrast fix — text uses a deeper accent so foreground
   copy passes WCAG 2.1 AA (4.5:1) on paper. Brand orange (#FF6B35
   / hsl(18,100%,60%)) tests at 2.71:1 — fails AA for body text and
   even fails the 3:1 large-text floor at large sizes. The brighter
   orange is preserved for non-text decorative use (buttons, dots,
   borders, fills, glows) where contrast rules don't apply.
   ============================================================ */
body.v3 {
  /* A text-safe orange that stays visibly inside the brand family. */
  --accent-text: hsl(16, 92%, 46%);
}
body.v3 a.link              { color: var(--accent-text); }
body.v3 a.link:hover        { color: var(--accent); }
body.v3 .hero__h em         { color: var(--accent-text); }
body.v3 .hero__foot-item .v span { color: var(--accent-text); }
body.v3 .h2 em              { color: var(--accent-text); }
body.v3 .pullquote em       { color: var(--accent-text); }
body.v3 .card__num          { color: var(--accent-text); }
body.v3 .ticker__sep        { color: var(--accent-text); }
body.v3 .footer__mega-word  { color: var(--accent-text); }
/* Dark sections — accent on dark stays bright for contrast */
body.v3 .section--dark a.link,
body.v3 .section--cta  a.link,
body.v3 .section--dark .h2--invert em,
body.v3 .section--cta  .h2--invert em { color: var(--accent); }

/* ============================================================
   Alexandria — v3 stage
   Geometric routing visualization, restrained editorial palette
   ============================================================ */

.alex-stage {
  position: relative;
  background: linear-gradient(180deg, #0E1419 0%, #0B0F14 100%);
  border-radius: 18px;
  padding: 22px 22px 18px;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(251,248,241,0.06),
    0 30px 80px -40px rgba(0,0,0,0.5);
}

/* Subtle grain inside the dark stage so it doesn't feel flat */
.alex-stage::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(251,248,241,0.08) 1px, transparent 1.4px);
  background-size: 4px 4px;
  opacity: 0.18;
  mix-blend-mode: overlay;
}

/* Vignette at the corners */
.alex-stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.35) 100%);
}

.alex-stage > * { position: relative; z-index: 1; }

/* ---- Head row ---- */
.alex-stage__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(251,248,241,0.10);
  margin-bottom: 18px;
  gap: 16px;
}
.alex-stage__title {
  font: 380 22px/1.1 var(--serif);
  font-style: italic;
  color: var(--w-100);
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.alex-stage__sub {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--w-50);
}
.alex-stage__status {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--w-70);
  padding: 7px 11px;
  border: 1px solid rgba(251,248,241,0.18);
  border-radius: 999px;
}
.alex-stage__status .blip {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2BCB6E;
  box-shadow: 0 0 0 3px rgba(43,203,110,.22);
  animation: pulse 2.4s infinite ease-in-out;
}

/* ---- Canvas + readout ---- */
.alex-stage__body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .alex-stage__body { grid-template-columns: 1fr; }
}

.alex-canvas {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-height: 280px;
  max-height: 520px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(255,107,53,0.04) 0%, transparent 60%);
}
.alex-canvas__el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* Subtle radial guide rings — drawn in CSS so canvas stays clean */
.alex-canvas::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 39%, rgba(251,248,241,0.04) 39.4%, transparent 39.8%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(251,248,241,0.03) 56.4%, transparent 56.8%),
    radial-gradient(circle at 50% 50%, transparent 84%, rgba(201,168,106,0.06) 84.4%, transparent 84.8%);
}

/* Center label — sits above GM core */
.alex-canvas__label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 38px));
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-50);
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
}
.alex-canvas__label strong {
  display: block;
  color: hsl(var(--accent-h) var(--accent-s) 70%);
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-bottom: 4px;
}

/* ---- Side readout (live log) ---- */
.alex-readout {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 500 11.5px/1.4 var(--mono);
  color: var(--w-70);
  padding: 14px 14px 8px;
  border: 1px solid rgba(251,248,241,0.10);
  border-radius: 12px;
  background: rgba(251,248,241,0.02);
  overflow: hidden;
  position: relative;
}
.alex-readout::before {
  content: "STREAM";
  position: absolute; top: 10px; right: 12px;
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.22em;
  color: var(--w-30);
}
.alex-readout__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid rgba(251,248,241,0.05);
  animation: alexReadoutIn 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.alex-readout__row:last-child { border-bottom: 0; }
.alex-readout__row .t { color: var(--w-30); font-size: 10px; }
.alex-readout__row .m { color: var(--w-85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alex-readout__row .tag {
  font-size: 10px;
  color: var(--w-50);
  padding: 2px 6px;
  border: 1px solid rgba(251,248,241,0.12);
  border-radius: 3px;
  letter-spacing: 0.06em;
}
.alex-readout__row.is-ok .tag { color: #6ED391; border-color: rgba(110,211,145,0.30); }
.alex-readout__row.is-warn .tag { color: hsl(var(--accent-h) var(--accent-s) 72%); border-color: hsl(var(--accent-h) var(--accent-s) 60% / 0.4); }

@keyframes alexReadoutIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Metrics row ---- */
.alex-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(251,248,241,0.10);
  padding-top: 16px;
}
@media (max-width: 720px) {
  .alex-metrics { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
}
.alex-metric {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 16px;
  border-right: 1px solid rgba(251,248,241,0.08);
}
.alex-metric:first-child { padding-left: 0; }
.alex-metric:last-child { padding-right: 0; border-right: 0; }
@media (max-width: 720px) {
  .alex-metric { padding: 0; border-right: 0; }
}
.alex-metric .k {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--w-50);
}
.alex-metric .v {
  font: 380 28px/1 var(--serif);
  font-style: italic;
  color: var(--w-100);
  letter-spacing: -0.02em;
}
.alex-metric .v .u {
  font-size: 14px;
  color: var(--w-50);
  font-style: normal;
  margin-left: 2px;
}

/* Hide the legacy v2 stage in v3 */
.alex__stage { display: none !important; }

/* Override .alex grid so v3 stage gets full right-column width */
body.v3 .alex {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
@media (max-width: 960px) {
  body.v3 .alex { grid-template-columns: 1fr; }
}

/* ============================================================
   Hero — atmospheric background
   ============================================================ */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-bg__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* gentle vignette so corners don't feel grey */
  mask-image: radial-gradient(ellipse at 50% 50%, black 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 35%, transparent 100%);
}
body.v3 .hero { position: relative; }
body.v3 .hero > .container { position: relative; z-index: 1; }

/* Cinematic H1 — letter-by-letter reveal handled in script */
body.v3 .hero__h .blur-word {
  display: inline-block;
  animation: heroWord 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) backwards;
  animation-delay: calc(var(--i, 0) * 0.045s);
}
@keyframes heroWord {
  from { opacity: 0; transform: translateY(0.4em); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.v3 .hero__h .blur-word { animation: none; }
}

/* (Operator console reverts to v2 cell-matrix behavior in v3) */

/* ============================================================
   Thesis — city silhouette as section background
   Pixelated skyline builds up behind the text content on viewport entry
   ============================================================ */
.section--with-city {
  position: relative;
  isolation: isolate;
}
.section--with-city > .container {
  position: relative;
  z-index: 1;
}
.thesis-city {
  /* True section background — covers the whole section. Per-cell alpha is
     computed in JS based on where text content actually sits, so cells
     overlapping the text area render at very low alpha (essentially invisible)
     and cells below the text reach full silhouette strength. No mask needed. */
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.thesis-city__canvas {
  /* Ink wash, not curtain — dark cells darken the paper underneath
     instead of stacking solid alpha pixels on top. Text on top retains
     full contrast against its own paper layer. */
  mix-blend-mode: multiply;
}
.thesis-city__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* ============================================================
   Approach — feedback loop, BACKGROUND BEHIND CARDS
   The cards are foreground; the oval is ambient context.
   ============================================================ */
.approach-stage {
  position: relative;
  isolation: isolate;
  margin-top: clamp(40px, 5vw, 80px);
}
.approach-stage > .cards-3 {
  position: relative;
  z-index: 1;
}
.approach-loop {
  position: absolute;
  /* Particle field extends past the cards on all sides so the river of
     dots breathes around the content. */
  inset: clamp(-180px, -14vw, -100px) clamp(-120px, -9vw, -50px);
  z-index: 0;
  pointer-events: none;
}
.approach-loop__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Normal compositing — multiply was muting the orange in seg 3 to
     a pale beige. Strong saturated dots read clearly on the cream. */
  mix-blend-mode: normal;
}

/* Strip the cards-3 wrapper background — by default it has a tan
   bg + border + border-radius that creates an opaque rounded slab
   behind the whole grid. We don't want that on top of the particle field. */
body.v3 .approach-stage .cards-3 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  gap: 24px !important;
}

/* Cards float over the particle field; translucent + blurred for legibility */
body.v3 .approach-stage .card {
  background: hsl(var(--accent-h) 18% 96% / 0.55) !important;
  border-radius: 12px;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
body.v3 .approach-stage .card:hover {
  background: hsl(var(--accent-h) 18% 96% / 0.96) !important;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* Section padding gives the particle field room to extend past the cards */
body.v3 #approach { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(180px, 18vw, 240px); }

@media (max-width: 720px) {
  /* On narrow viewports the cards stack — collapse the oval to keep it tasteful */
  .approach-loop { inset: -30px -10px; }
}

/* warm horizon glow at the very bottom of the section */
.thesis-city::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(to top, hsl(var(--accent-h) var(--accent-s) 60% / 0.08) 0%, transparent 100%);
  pointer-events: none;
}

/* ============================================================
   Footer mega-word — type-mask shader treatment
   ============================================================ */
.footer-word {
  position: relative;
  width: 100%;
  aspect-ratio: 2400 / 420;
  margin: 0;
  color: var(--w-100);
  overflow: hidden;
}
.footer-word__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hide the legacy footer mega-word in v3 */
body.v3 .footer__mega { display: none; }

/* Static fallback if WebGL unavailable */
.alex-canvas--static {
  background:
    radial-gradient(circle at 50% 50%, hsl(var(--accent-h) var(--accent-s) 50% / 0.5) 0%, transparent 4%),
    radial-gradient(circle at 50% 50%, transparent 39%, rgba(251,248,241,0.10) 39.4%, transparent 39.8%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(251,248,241,0.06) 56.4%, transparent 56.8%),
    radial-gradient(circle at 50% 50%, transparent 84%, rgba(201,168,106,0.18) 84.4%, transparent 84.8%);
}

/* The hero message must fail open: decorative text animation can never be
   allowed to leave the first-screen claim blurred or unreadable. */
body.v3 .hero__h .blur-word {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* ============================================================
   PARTNER STRIP — replaces the legacy mixed-claim ticker.
   Two stacked rows on a single ink band:
     1) Static — "Partnered with" + 3 formal-relationship names
     2) Scrolling — "Built across →" + the broader model-layer stack
   Names set in italic Fraunces (publication-mentions-collaborators
   voice), not logos. Mono labels anchor each row on the left.
   ============================================================ */
body.v3 .partners {
  position: relative;
  background: var(--ink);
  color: var(--w-70);
  border-block: 1px solid rgba(251,248,241,0.08);
  overflow: hidden;
  padding: clamp(16px, 2.4vh, 26px) 0;
}
body.v3 .partners > .container {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
}

.partners__row {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  min-height: 30px;
}

.partners__lbl {
  flex-shrink: 0;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-50);
  white-space: nowrap;
}
.partners__arrow {
  color: var(--accent);
  margin-left: 4px;
  font-style: normal;
}

/* Static row — three names, generously spaced, larger weight */
.partners__static {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(22px, 3.4vw, 44px);
  flex-wrap: wrap;
}
.partners__static li em {
  font-style: italic;
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: -0.02em;
  color: var(--w-100);
  line-height: 1;
}

/* Hairline between the two rows */
.partners__row--scroll {
  border-top: 1px solid rgba(251,248,241,0.10);
  padding-top: clamp(12px, 1.6vh, 18px);
}

/* Scrolling viewport — soft mask edges so names enter/exit gracefully */
.partners__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.partners__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 28px);
  white-space: nowrap;
  width: max-content;
  animation: partnersScroll 55s linear infinite;
}
.partners__track li em {
  font-style: italic;
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(16px, 1.45vw, 20px);
  letter-spacing: -0.015em;
  color: var(--w-85);
  line-height: 1;
}
.partners__sep {
  color: var(--accent);
  opacity: 0.85;
  font: 500 11px/1 var(--mono);
  align-self: center;
}
@keyframes partnersScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Shipped-at pedigree row — denser than the partnered row (7 names) */
.partners__row--sep {
  border-top: 1px solid rgba(251,248,241,0.10);
  padding-top: clamp(12px, 1.6vh, 18px);
}
.partners__static--dense { gap: clamp(16px, 2.4vw, 32px); }
.partners__static--dense li em {
  font-size: clamp(16px, 1.5vw, 21px);
  color: var(--w-85);
}

/* One-line live-ops proof under the credential rows */
.partners__proof {
  margin: 0;
  border-top: 1px solid rgba(251,248,241,0.10);
  padding-top: clamp(12px, 1.6vh, 18px);
  font: 500 11px/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--w-50);
}
.partners__proof::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.partners__proof span { color: var(--w-70); }
@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; }
}

@media (max-width: 720px) {
  .partners__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
  }
  .partners__static li em { font-size: 18px; }
  .partners__track li em { font-size: 14px; }
  .partners__row--scroll { padding-top: 12px; }
  .partners__viewport { width: 100%; }
}

/* ============================================================
   SECTION HEADERS — kickers collapsed to a single editorial label
   line, no decorative numerals. The H2 carries the section's voice;
   the kicker is now just a chapter mark above it.
   ============================================================ */
body.v3 .sect-head {
  display: block;
  padding-bottom: clamp(24px, 3vw, 44px);
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
body.v3 .sect-head > .kicker {
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
body.v3 .kicker {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 0;
}
body.v3 .kicker__sep {
  color: var(--accent);
  font-weight: 600;
  /* Slight optical lift — Inter's middle dot sits low at this size */
  transform: translateY(-0.05em);
  display: inline-block;
}
body.v3 .kicker--invert .kicker__sep { color: var(--accent); }

/* ============================================================
   ALEXANDRIA — architect's blueprint on cream paper
   Section background inherits paper. Subtle graphite grid
   gives the surface character (engineering drawing, not workshop
   floor). The alex-stage card itself stays dark — a deliberate
   moment of contrast, not a section-wide cliff.
   ============================================================ */
body.v3 #alexandria {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body.v3 #alexandria > .container {
  position: relative;
  z-index: 1;
}
body.v3 #alexandria::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Major grid — every 80px, graphite ink on paper */
    linear-gradient(to right,  rgba(11,15,20,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,15,20,0.07) 1px, transparent 1px),
    /* Minor grid — every 20px, very faint */
    linear-gradient(to right,  rgba(11,15,20,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,15,20,0.022) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%);
}
/* Corner surveyor's marks — graphite on paper */
body.v3 #alexandria::after {
  content: "";
  position: absolute;
  inset: clamp(24px, 4vh, 56px) clamp(24px, 3vw, 64px);
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M0 0 H18 M0 0 V18' stroke='%230B0F14' stroke-opacity='0.42' stroke-width='1' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M20 0 H2 M20 0 V18' stroke='%230B0F14' stroke-opacity='0.42' stroke-width='1' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M0 20 H18 M0 20 V2' stroke='%230B0F14' stroke-opacity='0.42' stroke-width='1' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M20 20 H2 M20 20 V2' stroke='%230B0F14' stroke-opacity='0.42' stroke-width='1' fill='none'/></svg>");
  background-position: top left, top right, bottom left, bottom right;
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

/* ----- Alexandria copy column — flip from white-on-ink to ink-on-paper ----- */
body.v3 #alexandria .alex__list {
  border-top-color: var(--line);
}
body.v3 #alexandria .alex__list li {
  border-bottom-color: var(--line);
  color: var(--ink-body);
}
body.v3 #alexandria .alex__list li strong {
  color: var(--ink);
  font-weight: 600;
}
body.v3 #alexandria .alex__copy .sect-head__sub em {
  color: var(--accent-text, var(--accent));
}

/* ============================================================
   CONTACT — cream paper, form on a white-paper inset
   Section drops its dark gradient; form becomes a typographic
   inset that reads as a tear-off coupon, not a portal panel.
   ============================================================ */
body.v3 #contact .cta__bullets {
  border-top-color: var(--line);
}
body.v3 #contact .cta__bullets li {
  border-bottom-color: var(--line);
  color: var(--ink-body);
}

body.v3 #contact .cta__form {
  background: var(--paper);
  border: 1px solid var(--line);
  /* Stronger shadow to sit confidently on the slightly-darker section paper */
  box-shadow: 0 18px 40px -28px rgba(11,15,20,0.18);
}
body.v3 #contact .cta__form::before {
  color: var(--muted);
}
body.v3 #contact .field label {
  color: var(--muted);
}
body.v3 #contact .field input,
body.v3 #contact .field select,
body.v3 #contact .field textarea {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
body.v3 #contact .field input::placeholder,
body.v3 #contact .field textarea::placeholder {
  color: var(--muted-2);
}
body.v3 #contact .field input:focus,
body.v3 #contact .field select:focus,
body.v3 #contact .field textarea:focus {
  border-color: var(--accent);
  background: #fff;
}
body.v3 #contact .cta__or {
  color: var(--muted);
}
body.v3 #contact .form-status {
  color: var(--muted);
}


/* ============================================================
   Alex hub (v4) — clean canvas variant for light background.
   No console chrome; just the hub-and-spoke on cream paper.
   ============================================================ */
body.v3 .alex-canvas--light {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-height: 320px;
  max-height: 600px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
body.v3 .alex-canvas--light::before { content: none; } /* kill the dark guide rings */

/* ============================================================
   Alex hub (v8) — backdrop layout, fixed-pixel version
   Section gets a min-height; canvas absolutely fills the right
   80% of it at full height; copy floats over the left.
   ============================================================ */
body.v3 #alexandria {
  position: relative;
  overflow: hidden;
}
body.v3 #alexandria > .container {
  position: relative;
  z-index: 1;
}
body.v3 #alexandria .alex {
  position: relative;
  display: block;
  min-height: 880px;
}
body.v3 #alexandria .alex__copy {
  position: relative;
  z-index: 2;
  max-width: 540px;
}
body.v3 #alexandria .alex-canvas--light {
  position: absolute !important;
  top: -40px !important;
  bottom: -40px !important;
  left: 30% !important;
  right: -10% !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  z-index: 0 !important;
  pointer-events: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
body.v3 #alexandria .alex-canvas--light::before { content: none !important; }
@media (max-width: 960px) {
  body.v3 #alexandria .alex { min-height: 0; }
  body.v3 #alexandria .alex__copy { max-width: 100%; }
  body.v3 #alexandria .alex-canvas--light {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 360px !important;
    margin-top: 32px;
  }
}