/* ==========================================================================
   DeltaXY, Components
   Everything with a name: brand mark, nav, buttons, cards, stats…
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.brand__mark {
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.brand__word {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  color: var(--display);
  white-space: nowrap;
}

.brand__word em {
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--muted);
}

.brand:hover .brand__word { color: var(--display); }

/* --------------------------------------------------------------------------
   Eyebrow label, uppercase mono, the reference design's signature
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow--accent { color: var(--accent-text); }

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background-color: var(--accent);
  flex: none;
}

.eyebrow--bare::before { display: none; }

/* Numbered variant for process steps. */
.step-index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.6875rem 1.25rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn svg { width: 15px; height: 15px; }

.btn--primary {
  background-color: var(--accent);
  color: var(--on-accent);
}

.btn--primary:hover {
  background-color: var(--accent-hover);
  color: var(--on-accent);
}

.btn--secondary {
  border-color: var(--border-strong);
  color: var(--display);
}

.btn--secondary:hover {
  background-color: var(--surface-hover);
  border-color: var(--muted);
  color: var(--display);
}

.btn--ghost {
  color: var(--text);
  padding-inline: 0.875rem;
}

.btn--ghost:hover {
  background-color: var(--surface-2);
  color: var(--display);
}

.btn--lg {
  padding: 0.875rem 1.625rem;
  font-size: var(--fs-body);
}

.btn--block { width: 100%; }

/* Text link with a sliding arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--accent-text);
  width: fit-content;
}

.link-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover {
  color: var(--accent-text);
}

.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.nav-link:hover {
  color: var(--display);
  background-color: var(--surface-2);
}

/* Icon-only control (theme toggle, menu button). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  color: var(--muted);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.icon-btn:hover {
  background-color: var(--surface-2);
  border-color: var(--border);
  color: var(--display);
}

.icon-btn svg { width: 17px; height: 17px; }

.menu-btn { display: none; }

@media (max-width: 980px) {
  .menu-btn { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Mobile menu
   -------------------------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-menu);
  background-color: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--sp-6) var(--gutter) var(--sp-10);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
}

.mobile-menu a:not(.btn) {
  display: block;
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: var(--ls-tight);
  color: var(--display);
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-menu a:not(.btn):hover { color: var(--accent-text); }

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.card:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-2);
}

.card h3,
.card h4 {
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
}

.card p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-md);
  background-color: var(--accent-tint);
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.card__icon svg { width: 19px; height: 19px; }

.card--link:hover { transform: translateY(-2px); }

/* A tall feature card with an accent hairline that grows on hover. */
.card--feature { padding: var(--sp-8) var(--sp-6); overflow: hidden; }

.card--feature::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

.card--feature:hover::after { width: 100%; }

/* The AgentXL proof card: a mock spreadsheet readout, so the body lines are
   mono and sit tighter than normal card copy. */
.card--sheet { padding: var(--sp-8); }

.card__readout {
  font-family: var(--font-mono);
  margin-top: var(--sp-4);
}

.card__readout + .card__readout { margin-top: var(--sp-2); }

/* Version suffix on a product heading, same line, quieter weight. */
.version-tag {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
}

/* Bordered grid of cards that share edges instead of floating apart. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--border);
  gap: 1px;
}

.card-grid > * {
  background-color: var(--bg);
  border: none;
  border-radius: 0;
  padding: var(--sp-8) var(--sp-6);
}

.card-grid > *:hover { background-color: var(--surface); }

@media (max-width: 1000px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Four cards in a grid built for three.

   The hairlines here are the grid's own background showing through 1px gaps,
   so an empty cell is not whitespace, it paints as a solid --border block.
   Four cards in three columns would leave one. Two columns divide evenly and
   give the mini-stat pairs room to sit side by side.

   This is tied to the card count. Adding or removing an industry means
   revisiting the column count here, or the last row will break again. */
@media (min-width: 1001px) {
  .card-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Exploring, domains we are moving toward, stated as intent

   Deliberately not a card: these are not practice areas yet, and giving them
   the same container as the five above would claim experience we do not have.
   Dashed outlines and muted type mark them as open, not delivered.
   -------------------------------------------------------------------------- */

.exploring {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding-inline: var(--sp-1);
}

.exploring__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
}

.exploring__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.exploring__item {
  padding: 0.3rem 0.7rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Small inline stat pair used inside industry cards. */
.mini-stats {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-2);
}

.mini-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mini-stat__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  color: var(--display);
}

.mini-stat__label {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Panels, larger editorial blocks (engagement tiers)
   -------------------------------------------------------------------------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-10);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background-color: var(--surface);
  background-image: radial-gradient(
    120% 90% at 100% 0%,
    var(--accent-tint) 0%,
    transparent 55%
  );
}

@media (max-width: 620px) {
  .panel { padding: var(--sp-6); }
}

.panel h3 { font-size: var(--fs-display-3); }

/* The column would otherwise stretch a badge to the full panel width. */
.panel > .badge { align-self: flex-start; }

.panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Tick list
   -------------------------------------------------------------------------- */

.ticks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ticks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.ticks li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.42em;
  width: 5px;
  height: 8px;
  border-right: 1.5px solid var(--accent-text);
  border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(42deg);
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6) var(--sp-8) 0;
  border-top: 1px solid var(--border);
}

.step::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: var(--accent);
}

.step h3 {
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
}

.step p {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}

@media (max-width: 780px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--border);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: var(--fw-medium);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--display);
}

.stat__value .accent { color: var(--accent-text); }

.stat__label {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Badges & chips
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background-color: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.badge--accent {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background-color: var(--accent-tint);
  color: var(--accent-text);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  flex: none;
}

.badge__dot--live {
  animation: pulse-dot 2s var(--ease) infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 5px transparent; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background-color: var(--surface);
  font-size: var(--fs-xs);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.chip:hover {
  border-color: var(--accent);
  color: var(--display);
}

.chip svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* The hero is a full-bleed field of the brand accent rather than a dark band
   with a tint on it: the accent carries the page, and everything inside is
   painted for a coloured ground instead of the theme's normal surfaces. */
.hero {
  position: relative;
  padding-block: clamp(4rem, 2rem + 8vw, 8rem) clamp(5rem, 3rem + 8vw, 9rem);
  overflow: hidden;
  background-color: var(--accent);
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Light rising off the base of the field, the way Cloudflare's hero glows
   into the section boundary below it. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55%;
  width: min(1100px, 130%);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.34) 30%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

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

/* ---- Type and controls repainted for the accent ground ---- */

.hero__title { color: #FFFFFF; }

.hero .hero__lead { color: rgba(255, 255, 255, 0.82); }

.hero .hero__note { color: rgba(255, 255, 255, 0.62); }

.hero .badge--accent {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

.hero .badge__dot { background-color: #FFFFFF; }

.hero .badge__dot--live { animation: pulse-dot-on-accent 2s var(--ease) infinite; }

@keyframes pulse-dot-on-accent {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 5px transparent; }
}

/* Primary inverts to a light chip; secondary becomes an outline in white. */
.hero .btn--primary {
  background-color: #FFFFFF;
  color: var(--brand-700);
}

.hero .btn--primary:hover {
  background-color: rgba(255, 255, 255, 0.88);
  color: var(--brand-800);
}

.hero .btn--secondary {
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}

.hero .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.hero :focus-visible { outline-color: #FFFFFF; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}

.hero__title { max-width: 18ch; }

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
}

.hero__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-2);
}

.hero__note {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Full-viewport variant (homepage only) ----
   aviation.html shares the base .hero, so the height treatment lives on a
   modifier and never on .hero itself. min-height (not height) so the section
   can still grow past the viewport when the content needs the room. */
.hero--tall {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));  /* fallback first */
  min-height: calc(100svh - var(--header-h)); /* svh: ignores mobile chrome */
  /* Asymmetric on purpose: the marquee is the last flex item, so the bottom
     padding is the only thing between it and the section edge. Kept to a thin
     margin so the logos anchor to the base of the viewport rather than
     floating in the middle of the fold. */
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(1.25rem, 0.5rem + 1.4vw, 2.25rem);
}

/* The copy takes the free space and centres itself in it; the marquee is the
   next flex item, so it settles just above the section's bottom padding. */
.hero--tall .hero__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The base glow is offset by a percentage of the hero box, which would push
   it far below the fold now that the box is a full viewport tall. Re-anchor
   it to the viewport so it still rises off the bottom edge. */
.hero--tall::before {
  bottom: clamp(-22rem, -34vh, -12rem);
}

/* --------------------------------------------------------------------------
   Client marquee
   Lives at the base of the hero. Decorative chrome: the strip itself is
   pointer-transparent, only the moving track takes hover (to pause it).
   -------------------------------------------------------------------------- */

.marquee {
  margin-top: var(--sp-10);
  pointer-events: none;
}

.marquee__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.66);
  padding-inline: var(--gutter);
}

/* Edges dissolve instead of hard-clipping against the section bounds. */
.marquee__viewport {
  margin-top: var(--sp-6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

/* N identical copies of one set, shifted by exactly one copy → seamless wrap.
   marquee.js sets --marquee-sets and --marquee-duration from the measured set
   width, so the wrap point always sits outside the viewport and the pass keeps
   a constant speed at any size. Spacing is carried by per-item padding rather
   than a flex gap, so the join between copies is spaced like every other pair.
   Motion waits for .is-scrolling: until the copies exist, a single set would
   scroll clean off the screen. */
.marquee__track {
  display: flex;
  width: max-content;
  margin-inline: auto;
  pointer-events: auto;
}

.marquee__track.is-scrolling {
  margin-inline: 0;
  animation: marquee-scroll var(--marquee-duration, 44s) linear infinite;
  will-change: transform;
}

.marquee__track:hover { animation-play-state: paused; }

.marquee__set {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee__item {
  flex: 0 0 auto;
  padding-inline: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
}

/* Logos render exactly as supplied, no colour filter, no opacity, no hover
   state. The artwork carries its own colour.

   --logo-h is written per logo by tools/build-logos.py, which normalises on
   AREA rather than height: at a constant height a 8:1 wordmark reads as eight
   times more logo than a 1:1 mark beside it. Do not add per-logo heights here
  , pin them in that script's LOGO_OVERRIDES so a rebuild cannot undo them. */
.marquee__logo {
  display: block;
  height: var(--logo-h, 28px);
  width: auto;
  /* Wide wordmarks (PUCAR is 8.4:1) would otherwise be letterboxed by this
     cap, quietly undoing a pinned height. Kept just above the widest mark. */
  max-width: 220px;
  object-fit: contain;
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / var(--marquee-sets, 2)), 0, 0); }
}

@media (max-width: 600px) {
  .marquee__logo { height: calc(var(--logo-h, 28px) * 0.82); }
}

/* Static, centred, single set, no motion, no mask. */
@media (prefers-reduced-motion: reduce) {
  .marquee__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .marquee__track,
  .marquee__track.is-scrolling {
    animation: none;
    width: 100%;
    justify-content: center;
  }

  .marquee__track > [data-marquee-clone] { display: none; }

  .marquee__set {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--sp-4);
  }
}

/* --------------------------------------------------------------------------
   About, a single statement, given room

   This section follows the hero, so it is built to be the page's exhale: one
   sentence at display scale, one supporting line, nothing else. It previously
   carried a four-up stat row (extraction accuracy, hours saved, documents
   processed, time to production); that was removed because the section is
   about who we are rather than what we have counted, and because four figures
   competing with the statement made the fold read as a dashboard. The .stats
   component itself is still used by the industry pages.
   -------------------------------------------------------------------------- */

.about {
  padding-block: clamp(5rem, 3.5rem + 6vw, 9rem);
  overflow: hidden;
}

/* A trace of the hero's glow carried across the seam, so the statement reads
   as the field above settling rather than as a new, colder section starting. */
.about::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, var(--accent-tint) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.about .wrap { position: relative; z-index: 1; }

.about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

/* Sized between h2 and h1: the statement should outweigh every other section
   heading without competing with the hero it sits under. */
.about__statement {
  font-size: clamp(2rem, 1.4rem + 2.9vw, 3.75rem);
  line-height: 1.04;
  max-width: 800px;
}

/* Carries the whole point of the sentence, so it takes the brand colour and
   the rest of the line stays neutral around it. */
.about__accent { color: var(--accent-text); }

.about__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  max-width: 54ch;
}

@media (max-width: 680px) {
  .about__inner { gap: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   Callout / CTA band
   -------------------------------------------------------------------------- */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background-color: var(--surface);
  background-image:
    radial-gradient(90% 120% at 50% 0%, var(--accent-tint) 0%, transparent 60%),
    radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: auto, 22px 22px;
}

.cta h2 { max-width: 22ch; }

.cta p {
  max-width: 52ch;
  color: var(--muted);
  font-size: var(--fs-lead);
}

/* --------------------------------------------------------------------------
   Quote
   -------------------------------------------------------------------------- */

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-10);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background-color: var(--surface);
}

.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: var(--ls-tight);
  color: var(--display);
  text-wrap: balance;
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.quote figcaption strong {
  color: var(--display);
  font-weight: var(--fw-medium);
}

.quote__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--accent-tint);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  flex: none;
}

/* --------------------------------------------------------------------------
   Mission
   One band per domain on the homepage, sitting under the industries grid.
   Two columns: the copy on the left, the mission's detail panel on the
   right. The panel is deliberately a skeleton: .mission__visual is an
   empty slot reserved for whatever artwork each domain ends up with.
   -------------------------------------------------------------------------- */

.mission__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--sp-8), 4vw, var(--sp-16));
  align-items: start;
}

@media (max-width: 960px) {
  .mission__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Left column: the copy ---- */

/* Sticky so the detail panel scrolls against a held statement of what the
   mission is. Released below the breakpoint, where the columns stack. */
.mission__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-10));
}

@media (max-width: 960px) {
  .mission__intro { position: static; }
}

.mission__intro h2 { max-width: 16ch; }

.mission__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

.mission__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-2);
}

/* ---- Right column: the detail panel ---- */

.mission__detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background-color: var(--bg-elevated);
}

.section--surface .mission__detail { background-color: var(--surface-2); }

@media (max-width: 560px) {
  .mission__detail { padding: var(--sp-6) var(--sp-5); }
}

.mission__detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}

.mission__detail-head h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-h4);
}

.mission__detail-head .card__icon { margin: 0; flex: none; }

/* Reserved slot. Empty on purpose: the domain artwork drops in here later,
   and until then the dotted plate holds the space so the layout is real. */
.mission__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background-color: var(--bg);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mission__visual::after {
  content: attr(data-slot);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Detail rows: the facts of the mission ---- */

.mission__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-8);
  margin: 0;
}

@media (max-width: 560px) {
  .mission__facts { grid-template-columns: minmax(0, 1fr); }
}

.mission__fact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.mission__fact dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
}

.mission__fact dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
}

.mission__fact dd b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--display);
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* Placeholder note for industry cards that have no figures yet. Occupies the
   slot the established cards fill with mini-stats and a section link, so the
   grid row keeps an even rhythm. */
.card__pending {
  display: inline-block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
}