/* ============================================================
   Benali marketing site — page chrome & page-specific patterns.
   The design system is Atlas 3 (site/assets/atlas-3.css, loaded
   after this file: tokens, type, controls, treatments, artifacts).
   This file carries what the system doesn't: nav + dropdowns,
   footer, the eco diagram, and the per-page glue for the six
   screenshot treatments. Ratified 2026-08-16.
   ============================================================ */

:root {
  /* site-local aliases over the Atlas 3 tokens (atlas-3.css owns
     --paper/--ink/--line/--navy/…) */
  --ink-dim: rgba(46, 51, 59, 0.55);
  --wash: rgba(46, 51, 59, 0.045);
  --wash-2: rgba(46, 51, 59, 0.08);
  --majorelle-soft: #9AA0EE;
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--measure, 1300px);
  margin: 0 auto;
  padding-left: var(--gutter, 24px);
  padding-right: var(--gutter, 24px);
}

/* ---------- type helpers (sizes match the Atlas 3 scale) ---------- */

h1, h2, h3 { margin: 0; font-weight: 500; }

.display {
  font-size: clamp(28px, 3.1vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.028em;
}
.hero .display, .a3-hero .display { font-size: clamp(22px, 2.3vw, 31px); max-width: 44ch; }
.display .cont { display: block; color: var(--ink-mid); }

.head-2 {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.022em;
}
.head-2 .cont { display: block; color: var(--ink-mid); }

.kicker {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-dim);
  margin-bottom: 14px;
}

.lede { font-size: 16px; line-height: 1.55; color: var(--ink-mid); max-width: 620px; }

.statement {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 0.01em;
}

.fig { font-size: clamp(28px, 2.8vw, 36px); font-weight: 300; letter-spacing: -0.01em; line-height: 1; }
.fig-cap { font-size: 13.5px; color: var(--ink-mid); margin-top: 10px; max-width: 30ch; }

/* ink flips on a navy stage — one block covers every helper */
.a3-on-dark { color: #fff; }
.a3-on-dark .display, .a3-on-dark .head-2, .a3-on-dark h1,
.a3-on-dark h2, .a3-on-dark h3 { color: #fff; }
.a3-on-dark .display .cont, .a3-on-dark .head-2 .cont { color: rgba(255, 255, 255, 0.66); }
.a3-on-dark .kicker { color: rgba(255, 255, 255, 0.62); }
.a3-on-dark .statement { color: rgba(255, 255, 255, 0.62); }

/* ---------- buttons + links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: var(--r-control, 999px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border: 0;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease, transform 240ms var(--ease-breath, ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-accent { background: var(--majorelle); color: #fff; }
.btn-accent:hover { color: #fff; }
.btn-quiet { background: var(--wash); color: var(--ink); }
.btn-quiet:hover { background: var(--wash-2); }
.btn .arrow { transition: transform 0.16s ease; }
.btn:hover .arrow { transform: translateX(2px); }

/* on the navy stage the accent rendition is paper — the ground carries the hue */
.a3-on-dark .btn-accent { background: #fff; color: var(--ink); }
.a3-on-dark .btn-accent:hover { color: var(--ink); }
.a3-on-dark .btn-quiet { background: rgba(255, 255, 255, 0.12); color: #fff; }
.a3-on-dark .btn-quiet:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.link-more .arrow { color: var(--ink-ghost); transition: color 0.16s ease, transform 0.16s ease; }
.link-more:hover .arrow { color: var(--majorelle); transform: translateX(2px); }
.a3-on-dark .link-more { color: var(--majorelle-lift, #9AA0EE); }
.a3-on-dark .link-more .arrow { color: var(--majorelle-lift, #9AA0EE); }
.a3-on-dark .link-more:hover { color: #fff; }
.a3-on-dark .link-more:hover .arrow { color: #fff; }

/* ---------- nav — lives on two grounds ----------
   Transparent over a navy hero (white ink), crossfading to paper past
   24px of scroll. Opacity/background only — never backdrop-filter
   (Chrome flickers over a canvas). site.js toggles .scrolled/.on-dark
   and swaps the wordmark rendition. */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  transition: background 240ms ease, box-shadow 240ms ease;
}
.nav.scrolled { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav-brand { display: inline-flex; align-items: center; gap: 11px; }
.nav-brand img { height: 10px; width: auto; }
.brand-cube { width: 21px; height: 21px; flex: none; }
.brand-cube .bc-hex {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 240ms ease;
}
.brand-cube .bc-core { fill: var(--majorelle); transition: fill 240ms ease; }
.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--ink-mid);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 240ms ease;
}
.nav-link:hover, .nav-dd:hover > .nav-link, .nav-link[aria-current] { color: var(--ink); }
.nav-link .chev { color: var(--ink-ghost); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-right .btn { padding: 8px 15px; font-size: 13.5px; }

/* over the navy hero, before the crossfade */
.nav.on-dark .nav-link { color: rgba(255, 255, 255, 0.78); }
.nav.on-dark .nav-link:hover, .nav.on-dark .nav-dd:hover > .nav-link { color: #fff; }
.nav.on-dark .nav-link .chev { color: rgba(255, 255, 255, 0.45); }
.nav.on-dark .brand-cube .bc-hex { stroke: #fff; }
.nav.on-dark .brand-cube .bc-core { fill: var(--majorelle-lift, #9AA0EE); }
.nav.on-dark .nav-cta { background: #fff; color: var(--ink); }
.nav.on-dark .nav-cta:hover { color: var(--ink); }

/* dropdown */
.nav-dd { position: relative; }
.dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card, 14px);
  box-shadow: 0 20px 50px -20px rgba(27, 30, 35, 0.25);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.dd-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel, .nav-dd.open .dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dd-inner { display: grid; gap: 2px; min-width: 340px; }
.dd-inner.cols2 { grid-template-columns: repeat(2, minmax(270px, 1fr)); }
.dd-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 11px;
  border-radius: 8px;
  transition: background 0.13s ease;
}
.dd-item:hover { background: var(--wash); }
.dd-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dd-desc { font-size: 12.5px; color: var(--ink-dim); line-height: 1.35; }

/* ---------- heroes ---------- */

/* light hero, on paper (solutions index, training, ops-map) */
.hero { padding: clamp(52px, 8vh, 84px) 0 clamp(32px, 5vh, 48px); }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- sub-page heroes (ratified 2026-08-19, Turn-2 canvas) ----------
   Three treatments, none full-bleed navy — only the landing keeps that. The
   nav never enters its on-dark state on sub-pages. 2a: paper hero (Ops Map,
   Agent Base, Knowledge Base, Custom Apps). 2b: veil hero (Company Agent,
   Local Agents, Company Context). 2c: spec stage (Training, Operation
   Mapping, Private AI). */

/* 2a · paper hero — light ground, left copy, the capture as a Ledge below */
.hero-paper { padding-bottom: 0; }
.hero-paper .display { max-width: 29ch; }

/* the hero capture as a Ledge: window on paper over a 150px seam band,
   masked so the colour resolves before the rails (shared by 2a and 2c) */
.hero-ledge { position: relative; margin-top: clamp(44px, 7vh, 64px); padding-bottom: 96px; }
.hero-ledge .hl-seam {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  opacity: 0.5; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.hero-ledge .shot, .hero-ledge .framed { position: relative; }
/* no ring here — the mock PNGs bake the window border in already */
.hero-ledge .shot {
  display: block; width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 34px 60px -30px rgba(27, 30, 35, 0.34), 0 2px 5px rgba(27, 30, 35, 0.05);
}

/* 2b · veil hero — copy on paper, navy stage bled off the right rail, the
   capture cropped by the stage's right and bottom edges at once */
.hero-veil {
  --hv-top: clamp(44px, 7vh, 72px);
  position: relative; overflow: clip; padding: var(--hv-top) 0 24px; background: var(--paper);
}
.hero-veil .hv-stage {
  position: absolute; top: var(--hv-top); bottom: 24px; left: 50%; right: 0;
  border-radius: 20px 0 0 20px; overflow: hidden; background: var(--navy);
}
.hero-veil .hv-shot {
  position: absolute; top: 62px; left: 56px; width: 132%; max-width: none; display: block;
  border-radius: 10px 0 0 0;
  box-shadow: 0 40px 90px -28px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.hero-veil .hv-copy {
  position: relative; max-width: 46%;
  padding: clamp(56px, 10vh, 88px) 24px clamp(56px, 10vh, 88px) 0;
}
.hero-veil .hv-copy .display { max-width: 18ch; }
@media (max-width: 860px) {
  .hero-veil { padding-top: 12px; }
  .hero-veil .hv-copy { max-width: none; padding-right: 0; padding-bottom: 12px; }
  .hero-veil .hv-stage {
    position: relative; top: auto; bottom: auto; left: auto; right: auto;
    height: 320px; margin: 8px var(--gutter) 0; border-radius: 20px;
  }
}

/* 2c · spec stage hero — navy, but a 22px-radius stage inside the rails;
   copy left, the page's three facts right, the capture NOT in it (it follows
   on paper as a .hero-ledge block) */
.hero-spec { padding: clamp(44px, 7vh, 72px) 0 0; }
.hero-spec .hs-stage { position: relative; overflow: hidden; border-radius: 22px; background: var(--navy); }
.hero-spec .hs-grid {
  position: relative; display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 72px); align-items: start;
  padding: clamp(44px, 6vw, 72px) clamp(28px, 5vw, 64px);
}
.hero-spec .display { max-width: 20ch; }
.hero-spec .spec { align-self: center; }
.spec-row { display: grid; grid-template-columns: 10ch 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.spec-row .k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); }
.spec-row .v { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
@media (max-width: 860px) {
  .hero-spec .hs-grid { grid-template-columns: 1fr; gap: 26px; }
}

.avail { display: inline-flex; align-items: center; font-size: 14px; color: var(--ink-mid); }
.avail .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--majorelle);
  margin-right: 9px;
  animation: pulse 3s ease-in-out infinite;
}
.a3-on-dark .avail { color: rgba(255, 255, 255, 0.66); }
.a3-on-dark .avail .dot { background: var(--majorelle-lift, #9AA0EE); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* navy hero — full-bleed (ratified over the review's inset-stage suggestion,
   Nick, 2026-08-17): the section slides under the 64px sticky nav, and the nav
   crossfades from white-on-navy to paper past 24px of scroll */
.a3-hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  margin-top: -64px;
  padding-top: 64px;
}
/* content blocks must be positioned or the glow canvas paints over them */
.a3-hero .container { position: relative; }
/* top/bottom only — these classes share the element with .container, and a
   shorthand padding would zero the horizontal gutter and break alignment */
.a3-hero .hero-copy { padding-top: clamp(80px, 13vh, 150px); padding-bottom: clamp(40px, 6vh, 64px); }
.a3-hero.centered .hero-copy { padding-top: clamp(64px, 10vh, 110px); padding-bottom: 0; text-align: center; }
.a3-hero.centered .display { margin: 0 auto; max-width: 34ch; }
.a3-hero.centered .hero-actions { justify-content: center; }
/* a fully-contained capture on the hero (self-chromed mock windows) */
.hero-stagepad { padding-top: clamp(44px, 7vh, 84px); padding-bottom: clamp(48px, 8vh, 90px); }
.hero-stagepad .hero-shot { margin: 0 auto; }
.hero-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 40px 90px -26px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255, 255, 255, 0.09);
}
/* the capture rising off the stage's bottom edge (treatment 02 Bleed: the
   window is cropped by the stage bottom, and the section's bottom padding is
   zero — the next section carries the space) */
.hero-risepad { padding-top: clamp(44px, 7vh, 84px); }
.hero-risepad .hero-shot { margin-left: auto; margin-right: auto; }
.rise-crop { margin-bottom: -26px; }   /* the stage crops this much of the window */

/* the landing's three overlapping captures (2026-08-19 relayout, per Nick's
   sketch): the console big in back; the tall chat over its top-right, rising
   above it; the workflow over its left edge, inside its vertical span.
   Widths keep one zoom across all three: native mock CSS widths are 1160 /
   375 / 470, so display widths stay in that ratio (0.80x at full container). */
.hero-trio { position: relative; height: clamp(380px, 51vw, 660px); }
.hero-trio img { position: absolute; height: auto; border-radius: 10px; }
.hero-trio .t-main {
  left: 9%; top: 9%; width: 80%; z-index: 1;
  box-shadow: 0 40px 90px -26px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.hero-trio .t-chat {
  right: 0; top: 0; width: 26%; z-index: 2;
  box-shadow: 0 34px 74px -24px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.hero-trio .t-flow {
  left: 0; bottom: 2%; width: 32.4%; z-index: 3;
  box-shadow: 0 34px 74px -24px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(255, 255, 255, 0.09);
}

/* the "Built in Norman" foot line on the hero */
.built {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.58);
  padding: clamp(40px, 7vh, 76px) 0 clamp(48px, 8vh, 90px);
}
.built svg { color: rgba(255, 255, 255, 0.38); }

/* ---------- framed windows (title bar + traffic dots) ---------- */

.framed { border-radius: 12px; overflow: hidden; background: var(--chrome-dark, #23262E); }
.framed .frame-bar {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  position: relative;
  background: var(--chrome-dark, #23262E);
}
.framed .frame-bar .dots { display: flex; gap: 6px; }
.framed .frame-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(242, 240, 234, 0.2); }
.framed .frame-bar span {
  position: absolute; left: 0; right: 0;
  text-align: center;
  font-size: 12.5px; font-weight: 500;
  color: rgba(242, 240, 234, 0.55);
}
.framed img { width: 100%; height: auto; display: block; }
.framed.light { background: #fff; }
.framed.light .frame-bar { background: #fff; border-bottom: 1px solid var(--line-strong); height: 34px; }
.framed.light .frame-bar .dots i { width: 9px; height: 9px; background: rgba(46, 51, 59, 0.16); }
.framed.light .frame-bar span { font-size: 12px; color: var(--ink-dim); }
/* on a stage: heavy dark shadow. Rising: square the two cut corners. */
.framed.on-stage { box-shadow: 0 44px 100px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.09); }
.framed.rising { border-radius: 11px 11px 0 0; }
/* off stage, on paper (Ledge): light shadow + hairline */
.framed.on-paper { box-shadow: 0 34px 60px -30px rgba(27, 30, 35, 0.34), 0 2px 5px rgba(27, 30, 35, 0.05), 0 0 0 1px var(--line); }

/* ---------- treatment 04 · LEDGE — the quiet default ---------- */

.ledge { position: relative; }
.ledge-seam {
  position: absolute;
  left: 2%; right: 2%;
  bottom: -34px;
  height: 86px;
  pointer-events: none;
}
.ledge > .a3-window, .ledge > .framed, .ledge > img { position: relative; }
/* the section below must leave ~50px of clear paper for the seam */
.ledge { margin-bottom: 50px; }
.ledge .shot {
  display: block; width: 100%; height: auto;
  border-radius: 12px;   /* the study's Ledge frame radius — complete, four corners */
  box-shadow: 0 34px 60px -30px rgba(27, 30, 35, 0.34), 0 2px 5px rgba(27, 30, 35, 0.05), 0 0 0 1px var(--line);
}

/* ---------- treatment 03 · VEIL — the atlas rail stage ---------- */
/* markup: `.a3-stage-rail` (atlas-3.css) inside a relative column, with the
   bled edge set inline: left: calc(50% - 50vw - 24px) to bleed left, or
   left: 0; right: calc(50% - 50vw - 24px) + .a3-stage-rail-left to bleed
   right. The capture sibling inherits atlas's even 38px padding. */
.rail-split { position: relative; }
.shot-dark {
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  box-shadow: 0 34px 74px -26px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.09);
}

/* ---------- treatment 05 · DISSOLVE — colour with no edge ---------- */
/* markup: a .a3-dissolve-field div (atlas-3.css) with data-art="field",
   then a .dis-body sibling holding the capture (frame complete, four corners) */
.dis-wrap { position: relative; }
.dis-body { position: relative; padding: clamp(26px, 4vw, 52px); }
/* the field is a blush behind the capture, never the loudest thing on the page */
.a3-dissolve-field { opacity: 0.7; }
/* the solutions CTA ground (2026-08-19): the Ledge seam as a hairline at the
   section's foot instead of the field blush — a 120px band, damped to 0.4.
   The seam gradient resolves to zero before either rail on its own. */
.cta-field .cta-seam {
  position: absolute;
  left: 2%; right: 2%;
  bottom: -34px;   /* the seam paints at 60–82% of its box; dropping the box
                      seats the band ON the section edge — the clip cuts its
                      lower half, so the colour peeks from the boundary */
  height: 120px;
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- bento card grounds + visuals ---------- */

.a3-card p { font-size: 13.5px; line-height: 1.5; color: var(--ink-mid); margin: 5px 0 22px; padding-right: 48px; }
.a3-card h3:has(+ p) { margin-bottom: 0; }
a.a3-card { transition: transform 240ms var(--ease-breath, ease), box-shadow 240ms ease; }
a.a3-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -20px rgba(27, 30, 35, 0.18); color: inherit; }
.a3-chip { transition: color 240ms ease, border-color 240ms ease; color: rgba(46, 51, 59, 0.4); }
a.a3-card:hover .a3-chip { color: var(--majorelle); border-color: var(--majorelle); }

/* cropped visual: bleeds to the card edges, the card is the frame — the ONE
   bento visual pattern (the /solutions index is the reference) */
.card-crop { position: relative; margin: auto -24px 0; overflow: hidden; }
.card-crop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }

/* treatment 06 · TILE — standalone card rendition (atlas .a3-tile). The
   idealized tiles are composed edge-to-edge at a fixed aspect (Nick,
   2026-08-09: cover-fill, nothing above ~60% of native pixels), so the shot
   fills the card at the tile's aspect ratio (set inline per instance) and the
   card's edges crop any overflow. The atlas 150% offset crop suits dense dark
   captures only; on these sparse light tiles it reads as cut-off fragments. */
div.a3-tile { min-height: 0; }
.a3-tile .a3-tile-shot {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
  border-radius: 0;
  box-shadow: none;
}

/* the two CSS-drawn card grounds (wedge + bloom); the rest are canvas
   artifacts. The .a3-card selectors out-rank atlas-3's `.a3-card > *`
   content lift, which would otherwise put these back in flow. */
.a3-card > .art-wedge, .art-wedge {
  position: absolute; top: 0; right: 0;
  width: 62%; height: 190px;
  background: linear-gradient(112deg, #F0873F 0%, #E0603F 40%, #C4507A 100%);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 100% 100%, 74% 100%);
}
.a3-card > .art-bloom, .art-bloom {
  position: absolute; top: -40px; right: -40px;
  width: 240px; height: 200px;
  background: radial-gradient(circle at 70% 25%, rgba(74, 82, 216, 0.42), rgba(196, 80, 122, 0.22) 46%, rgba(255, 255, 255, 0) 72%);
}

/* ---------- process — the navy section ---------- */

/* overflow: clip, not hidden — hidden makes this a scroll container and the
   sticky diagram inside stops sticking (the atlas-3 gotcha) */
.process-dark { position: relative; background: var(--navy); overflow: clip; }
.pd-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(154, 160, 238, 0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.7;
}
.pd-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 78% 8%, rgba(74, 82, 216, 0.30), rgba(12, 16, 48, 0) 62%);
}
.process-head { position: relative; padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(40px, 6vh, 64px); }
.process-head h2 { max-width: 680px; }
.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  /* clearance for the wave band easing the section into the CTA */
  padding-bottom: clamp(200px, 26vh, 320px);
}
.process-side { align-self: stretch; padding-top: 20px; }
/* pin the diagram near the vertical middle of the viewport (diagram + caption
   ≈ 440px tall), never higher than 110px below the nav */
.eco-sticky { position: sticky; top: max(110px, calc(50vh - 240px)); }
.pstep + .pstep { margin-top: 120px; }
.pstep .link-more { margin-top: 14px; }
.pviz { margin: 26px 0 0; }
.pwin {
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.pviz .pwin-lg { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pviz-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
/* step 3: a glow pooled behind the window */
.step-glow {
  position: absolute; left: 6%; right: 6%; top: 12%; bottom: 4%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(74, 82, 216, 0.55), rgba(196, 80, 122, 0.20) 55%, rgba(12, 16, 48, 0) 78%);
  filter: blur(4px);
}
.step-glow + .step-shot { position: relative; padding: 30px 0 0; }
/* the wave easing the navy section into the CTA — pulled back so it reads as
   an undertone, not the brightest element on the page; ends fade out */
.wave-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
  pointer-events: none;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 22%, #000 78%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 22%, #000 78%, rgba(0, 0, 0, 0) 100%);
}

/* the ecosystem diagram — dark rendition for the navy process section.
   Pieces stay dashed ghosts until their step scrolls past (site.js). */
.eco { position: relative; }
.ecosystem { display: block; width: 100%; height: auto; }
.ecosystem text { font-family: var(--font); }
.ecosystem .node {
  fill: transparent;
  stroke: rgba(154, 160, 238, 0.30);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  transition: fill 0.9s ease, stroke 0.9s ease;
}
.ecosystem .g.done .node { stroke-dasharray: 42 0; }
.ecosystem .g.done .node.accent { fill: var(--majorelle); stroke: transparent; }
.ecosystem .g.done .node.dark { fill: rgba(255, 255, 255, 0.12); stroke: transparent; }
.ecosystem .g.done .node.hero { stroke: transparent; }
.ecosystem .g.done .node.frame {
  fill: rgba(255, 255, 255, 0.035);
  stroke: rgba(154, 160, 238, 0.20);
}
.ecosystem .hero-grad, .ecosystem .tile, .ecosystem text, .ecosystem .wire,
.ecosystem .icon, .ecosystem .win, .ecosystem .windot { opacity: 0; transition: opacity 0.9s ease; }
.ecosystem .g.done :is(.hero-grad, .tile, text, .wire, .icon, .win, .windot) { opacity: 1; }
.ecosystem .gs1 { stop-color: #5B63E8; }
.ecosystem .gs2 { stop-color: #B4497A; }
.ecosystem .tile { fill: rgba(255, 255, 255, 0.18); }
.ecosystem .wire {
  fill: none;
  stroke: rgba(154, 160, 238, 0.42);
  stroke-width: 1.1;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
}
.ecosystem .la { fill: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.01em; }
.ecosystem .sa { fill: rgba(255, 255, 255, 0.72); font-size: 7.5px; font-weight: 500; }
.ecosystem .ld { fill: rgba(255, 255, 255, 0.82); font-size: 9px; font-weight: 500; }
.ecosystem .lh { fill: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.ecosystem .sh { fill: rgba(255, 255, 255, 0.7); font-size: 7.5px; font-weight: 500; }
.ecosystem .icon { fill: #fff; }
.ecosystem .win { fill: rgba(12, 16, 48, 0.45); }
.ecosystem .windot { fill: #fff; }
.eco-cap { margin: 16px 0 0; min-height: 20px; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.58); }

/* ---------- the CTA fan (landing) ---------- */

.cta-fan { position: relative; background: var(--paper); overflow: hidden; }
.cta-fan .cta-copy {
  position: relative;
  padding-top: clamp(100px, 15vh, 170px);
  padding-bottom: clamp(120px, 18vh, 210px);
  text-align: center;
}
.cta-fan .display { margin: 0 auto; max-width: 18ch; }
.cta-fan .hero-actions { justify-content: center; }

/* ---------- the close (sub-pages) — paper, with a field blush ----------
   The one navy stage per page is the hero; the closing CTA lives on paper
   with the Dissolve field behind it. */
.cta-field { position: relative; background: var(--paper); overflow: clip; }
.cta-field .cta-field-copy {
  position: relative;
  padding-top: clamp(90px, 13vh, 150px);
  padding-bottom: clamp(90px, 13vh, 150px);
}
.cta-field .display { max-width: 18ch; }
.cta-field .hero-actions { margin-top: 28px; }

/* dot field over navy — markup helper (atlas has .a3-dots as well) */
.stage-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(154, 160, 238, 0.13) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ---------- figures band ---------- */

.fig-band { position: relative; padding: clamp(56px, 9vh, 100px) 0; }
.fig-band .container { position: relative; }
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.figures > div { border-top: 1px solid rgba(46, 51, 59, 0.18); padding-top: 18px; }

/* ---------- splits, feature rows, grids (light patterns) ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split.flip { grid-template-columns: 7fr minmax(300px, 5fr); }
.split.flip .split-copy { order: 2; }
.split.flip .split-visual { order: 1; }
.split-copy .head-2 { max-width: 24ch; }
.split-copy p { font-size: 14.5px; color: var(--ink-mid); max-width: 46ch; margin: 14px 0 0; }
.split-copy .link-more { margin-top: 18px; }

.frow {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.frow:last-child { border-bottom: 1px solid var(--line); }
.frow h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.frow p { font-size: 14px; line-height: 1.5; color: var(--ink-mid); margin: 5px 0 0; }
/* every feature-row visual takes the same width, centered — edges align row
   to row instead of each visual picking its own inset */
.frow .a3-tile { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }

.link-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.link-row-3 { grid-template-columns: repeat(3, 1fr); }
.link-row a { display: flex; flex-direction: column; gap: 5px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.link-row .lr-t { font-size: 14px; font-weight: 600; }
.link-row .lr-d { font-size: 13px; color: var(--ink-mid); line-height: 1.45; }
.link-row .lr-go { font-size: 13px; font-weight: 500; color: var(--ink-dim); margin-top: 4px; }
.link-row a:hover .lr-go { color: var(--majorelle); }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.trust h3 { font-size: 14.5px; font-weight: 600; }
.trust p { font-size: 13.5px; line-height: 1.5; color: var(--ink-mid); margin: 5px 0 0; }

.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.feat h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 16px 0 5px; }
.feat p { font-size: 14px; line-height: 1.5; color: var(--ink-mid); margin: 0; max-width: 42ch; }

/* checklist (training) */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-mid); }
.checklist .check { flex: none; margin-top: 4px; color: var(--majorelle); }

/* ---------- FAQ ---------- */

.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 2px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--ink-ghost);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 2px 18px; font-size: 14px; color: var(--ink-mid); max-width: 66ch; }

/* ---------- sections ---------- */

.section { padding: clamp(64px, 10vh, 116px) 0; }
.section-tight { padding: clamp(40px, 7vh, 72px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vh, 56px); }

/* light end CTA (pages with no navy close) */
.cta-end { text-align: left; }
.cta-end .display { max-width: 16ch; }
.cta-end .hero-actions { margin-top: 26px; }

/* ---------- footer ---------- */

.footer { position: relative; background: #fff; border-top: 1px solid var(--line); padding-top: clamp(48px, 7vh, 72px); }
.foot-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 48px;
}
.foot-brand p { font-size: 13px; color: var(--ink-dim); max-width: 30ch; margin: 14px 0 0; }
.foot-brand .foot-legal { font-size: 12px; color: var(--ink-ghost); margin-top: 10px; max-width: none; }
.foot-col h4 {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-col a { font-size: 13.5px; color: var(--ink-mid); transition: color 0.14s ease; }
.foot-col a:hover { color: var(--ink); }
.foot-wordmark { padding: 28px 0 40px; }
.foot-wordmark img { width: 100%; height: auto; }

/* ---------- reveal motion (never faster than a breath) ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

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

@media (max-width: 960px) {
  .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip .split-copy { order: 1; }
  .split.flip .split-visual { order: 2; }
  .feat-grid, .feat-grid.cols2 { grid-template-columns: 1fr; }
  .figures { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-menu .dd-inner.cols2 { grid-template-columns: 1fr; }
  .process-grid { display: block; }
  .process-side { padding-top: 0; margin-bottom: 64px; }
  .eco-sticky { position: static; max-width: 460px; margin: 0 auto; }
  .pstep + .pstep { margin-top: 90px; }
  /* stacked splits: the rail stage becomes a full-bleed band behind the capture */
  .rail-split .a3-stage-rail {
    left: calc(50% - 50vw) !important;
    right: calc(50% - 50vw) !important;
    border-radius: 0;
  }
}
@media (max-width: 800px) {
  .frow { grid-template-columns: 1fr; }
  .link-row { grid-template-columns: 1fr 1fr; }
  .trust { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pviz-pair { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .nav-menu { display: none; }   /* mobile: brand + Book a call only */
  .hero-trio { height: auto; }
  .hero-trio .t-main { position: static; width: 100%; }
  .hero-trio .t-chat, .hero-trio .t-flow { display: none; }
}

/* ---- /book — copy left, Cal.com scheduler right ---- */
.book-hero { padding-bottom: clamp(56px, 9vh, 110px); }
.book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.book-points { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; max-width: 420px; }
.book-points li { padding-left: 18px; border-left: 2px solid var(--majorelle); }
.book-points h3 { font-size: 15px; font-weight: 600; margin: 0; }
.book-points p { font-size: 13.5px; line-height: 1.55; color: var(--ink-mid); margin: 5px 0 0; }
.book-cal-card { background: #fff; border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; min-height: 560px; }
.book-cal-card iframe { display: block; width: 100%; border: 0; }
.book-note { margin-top: 16px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-dim); text-align: center; }
@media (max-width: 960px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-points { max-width: none; }
}