/*
 * ATM Group landing page styles.
 *
 * Self-contained: no @ tokens, no shared dependencies, no Tailwind.
 * Clean black base with the @ aurora line at the very top (drifting
 * 1px gradient bar — same vocabulary as the @ home-page agent-working
 * pulse). No drifting background blobs — TJ called for stillness on
 * the body and motion only on the accent line.
 */

:root {
  --bg: #0a0a0a;
  --surface: rgba(19, 19, 19, 0.6);
  --surface-solid: #131313;
  --surface-2: rgba(26, 26, 26, 0.55);
  --surface-hover: rgba(30, 30, 30, 0.75);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #f0f0f0;
  --text-muted: #a8a8a8;
  --text-faint: #6e6e6e;
  --accent: #c5d4f0;
  --accent-faint: rgba(197, 212, 240, 0.12);
  /* Aurora gradient stops — match the @ home page. */
  --aurora-human: #3b82f6;
  --aurora-agent: #8b5cf6;
  --radius: 6px;
  --radius-card: 8px;
  --font:
    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display:
    ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  --container: 1080px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Aurora line ───────────────────────────────────────────────── */
/* 1px gradient bar that sits directly below the (sticky) header.
   Header height is 64px; we pin the line to top:64px and keep it
   fixed so it stays attached to the bottom edge of the header as the
   page scrolls. Drifts continuously — same vocabulary as the @ aurora. */

/* Legacy: the old standalone .aurora-line div is now suppressed in favor
   of a pseudo-element on .header (defined in the header block below). The
   pseudo-element bounces with the header on iOS rubber-band overscroll,
   instead of staying glued to viewport top:64px while the header pulls past it. */
.aurora-line {
  display: none;
}

@keyframes aurora-drift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

/* ── Aurora hero background ────────────────────────────────────── */
/* Drifting blurred-gradient blobs scoped to the hero only. Pinned via
   absolute positioning inside .hero (which is position:relative +
   overflow:hidden so the blur never leaks into the next section). */

.aurora-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.35;
  will-change: transform;
}

.aurora-blob-1 {
  top: -20%;
  left: -10%;
  width: 55%;
  height: 110%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--aurora-human) 70%, transparent) 0%,
    transparent 70%
  );
  animation: aurora-float-1 22s ease-in-out infinite alternate;
}

.aurora-blob-2 {
  top: 0;
  right: -10%;
  width: 50%;
  height: 110%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--aurora-agent) 65%, transparent) 0%,
    transparent 70%
  );
  animation: aurora-float-2 28s ease-in-out infinite alternate;
}

.aurora-blob-3 {
  bottom: -30%;
  left: 30%;
  width: 50%;
  height: 100%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--aurora-human) 50%, transparent) 0%,
    color-mix(in oklab, var(--aurora-agent) 30%, transparent) 50%,
    transparent 75%
  );
  animation: aurora-float-3 34s ease-in-out infinite alternate;
}

/* Mesh network canvas — drifting nodes with lines drawn between near
   neighbors, fading by distance. Sits above the aurora blobs in the
   hero so the geometric overlay reads against the ambient color glow.
   Pure JS; init/animation lives inline at end of body. */
.mesh-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

@keyframes aurora-float-1 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(15%, 10%) scale(1.15);
  }
}

@keyframes aurora-float-2 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-12%, 18%) scale(1.1);
  }
}

@keyframes aurora-float-3 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-8%, -15%) scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-line,
  .aurora-blob {
    animation: none;
  }
}

/* ── Header ────────────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Aurora gradient pinned to the bottom of the header. As a pseudo-element
   it travels with the header on iOS rubber-band overscroll (the old
   standalone div was position:fixed and stayed glued to viewport, so the
   header would pull past it on pull-down). */
.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--aurora-human) 40%, transparent) 30%,
    color-mix(in oklab, var(--aurora-agent) 40%, transparent) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  opacity: 0.85;
  animation: aurora-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text);
}

.brand-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav {
  display: flex;
  gap: 28px;
}

.nav a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 160ms ease;
}

.nav a:hover {
  color: var(--text);
}

.nav a[aria-current="page"] {
  color: var(--text);
}

/* Header CTA — small aurora-drifting button. Same vocabulary as the
   form submit but scaled to header proportions. */
.header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--aurora-human) 70%, var(--surface-solid)) 0%,
    color-mix(in oklab, var(--aurora-agent) 70%, var(--surface-solid)) 50%,
    color-mix(in oklab, var(--aurora-human) 70%, var(--surface-solid)) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: aurora-drift 10s ease-in-out infinite alternate;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition:
    filter 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
  white-space: nowrap;
}

.header-cta:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
  animation-duration: 5s;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .header-cta {
    animation: none;
  }
}

/* Hamburger toggle button — desktop hides it; mobile shows it. */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: border-color 200ms ease, background 200ms ease;
}
.nav-toggle:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 200ms ease;
}

@media (max-width: 720px) {
  /* Show hamburger; reorder so the CTA sits left of the hamburger. */
  .nav-toggle { display: inline-flex; order: 2; }
  .header-cta { order: 1; }

  .nav {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 24px 28px;
    flex-direction: column;
    gap: 18px;
    border-bottom: 1px solid var(--border);
    z-index: 80;
  }
  .nav a {
    font-size: 18px;
    padding: 6px 0;
  }
  .header-right {
    gap: 12px;
  }
  .header-cta {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  /* Open state: button[aria-expanded=true] reveals nav and animates bars to X. */
  .nav-toggle[aria-expanded="true"] + .nav {
    display: flex;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ── Hero (home) ───────────────────────────────────────────────── */

.hero {
  padding: 140px 0 80px;
  text-align: left;
  position: relative;
  z-index: 1;
  /* Clip the aurora blobs so the blur doesn't leak into the next
     section. The hero is a self-contained ambient stage. */
  overflow: hidden;
}

.hero-headline {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 30px;
}

.hero-mark {
  flex-shrink: 0;
  width: clamp(72px, 9vw, 110px);
  height: clamp(72px, 9vw, 110px);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-mark svg {
  width: 100%;
  height: 100%;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.5vw, 54px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 22ch;
  margin-bottom: 0;
  /* Extra breathing room below the baseline so descenders (g, y, p)
     don't get clipped — text-fill-color: transparent with
     background-clip: text can shrink the rendering box otherwise. */
  padding-bottom: 0.08em;
  background: linear-gradient(180deg, var(--text) 0%, #d8d8d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 640px) {
  .hero-headline {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .hero-mark {
    width: 64px;
    height: 64px;
  }
}

.lede {
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 64ch;
  margin-bottom: 40px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cta {
  position: relative;
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 200ms ease;
  border: 1px solid var(--border-strong);
}

/* Aurora ring on hover — same mask-clipped drifting gradient the cards
   use, applied to .cta buttons. Form submit button is excluded below
   since it already uses the aurora gradient as its full background. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--aurora-human) 60%, transparent) 30%,
    color-mix(in oklab, var(--aurora-agent) 60%, transparent) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}

.cta:hover::before {
  opacity: 1;
  animation: aurora-drift 8s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .cta:hover::before {
    animation: none;
  }
}

.cta-primary {
  background: var(--accent-faint);
  color: var(--text);
}
.cta-primary:hover {
  background: rgba(197, 212, 240, 0.22);
  border-color: transparent;
  transform: translateY(-1px);
}

.cta-ghost {
  background: rgba(15, 15, 17, 0.55);
  color: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cta-ghost:hover {
  background: rgba(20, 20, 22, 0.75);
  border-color: transparent;
  transform: translateY(-1px);
}

/* Form submit already has aurora-drift as its background — don't
   double up with a ring on top. */
.contact-form button[type="submit"]::before {
  display: none;
}

/* ── Tagline band ──────────────────────────────────────────────── */

.tagline {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
}

.tagline-lead {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  max-width: 70ch;
  margin-bottom: 10px;
}

.tagline-sub {
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 65ch;
}

.tagline-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.tagline-text {
  flex: 1 1 320px;
  min-width: 0;
}
/* ── Services teaser (home) ────────────────────────────────────── */

.services-teaser {
  padding: 90px 0;
  position: relative;
  z-index: 1;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.see-all {
  font-size: 14px;
  color: var(--text-muted);
  transition:
    color 160ms ease,
    transform 200ms ease;
}
.see-all:hover {
  color: var(--text);
  transform: translateX(2px);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* 3-card variant (home page "What we do"). Cards lay out a bit
   wider + more padded since they represent broad capabilities, not
   individual line items. */
.services-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.services-grid-3 .service-card {
  padding: 32px 28px 42px;
}

.services-grid-3 .service-card h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

.services-grid-3 .service-card p {
  font-size: 15px;
}

/* 2-card variant (home page "How we build"). Two big cards side-by-
   side on desktop, stacked on narrow screens. Each represents one of
   the two engagement modes (modular vs custom). */
.services-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

.services-grid-2 .service-card {
  padding: 34px 30px 42px;
}

.services-grid-2 .service-card h3 {
  font-size: 26px;
  letter-spacing: -0.02em;
  margin-top: 4px;
  margin-bottom: 4px;
}

.services-grid-2 .service-card p {
  font-size: 15px;
  line-height: 1.6;
}

/* service-card-lift — static cards that still subtly lift on hover
   to feel "interactive" without being links. Used on the how-we-build
   pair so they have presence but don't pretend to be clickable. */
.service-card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 36px;
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition:
    background 250ms ease,
    border-color 250ms ease,
    transform 250ms ease,
    box-shadow 250ms ease;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
}

/* Drifting aurora outline — mirrors the @ home-page operatives-widget
   pattern. Same color stops + 8s drift as the aurora-line at the top
   of the page. Mask-clipped to a 1px ring so the gradient renders
   only on the card's edge. Idle: invisible. Hover: fades in + drifts. */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--aurora-human) 55%, transparent) 30%,
    color-mix(in oklab, var(--aurora-agent) 55%, transparent) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}

.service-card:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.service-card:hover::before {
  opacity: 1;
  animation: aurora-drift 8s ease-in-out infinite alternate;
}

.service-card-static {
  cursor: default;
}

.service-card-static:hover {
  background: var(--surface-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.service-card-static:hover::before {
  opacity: 1;
  animation: aurora-drift 8s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .service-card:hover::before,
  .service-card-static:hover::before {
    animation: none;
  }
}

.service-card-cat {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

.service-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.service-card-arrow {
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-size: 18px;
  color: var(--text-faint);
  transition:
    color 250ms ease,
    transform 250ms ease;
}

.service-card:hover .service-card-arrow {
  color: var(--text);
  transform: translateX(4px);
}

/* ── Page hero (about, services, industries, contact) ─────────── */

.page-hero {
  padding: 100px 0 60px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 18px;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 54px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 20ch;
  margin-bottom: 24px;
  padding-bottom: 0.08em;
  background: linear-gradient(180deg, var(--text) 0%, #d8d8d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Category sections (services page) ─────────────────────────── */

.category {
  padding: 80px 0;
  position: relative;
  z-index: 1;
}

.category-alt {
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.category-head {
  margin-bottom: 40px;
}

.category-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 6px;
}

.category-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 60ch;
  margin-top: 10px;
}

/* ── Industries section ────────────────────────────────────────── */

.industries-section {
  padding: 80px 0;
  position: relative;
  z-index: 1;
}

/* ── How we build (home page section) ──────────────────────────── */

.how-we-build {
  padding: 90px 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
}

.how-we-build .section-head {
  margin-bottom: 20px;
}

.how-we-build-lede {
  margin-bottom: 36px;
  max-width: 70ch;
}

/* ── How / Prose sections ──────────────────────────────────────── */

.how,
.prose-section {
  padding: 100px 0;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.how h2,
.prose-section h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 32px;
}

.prose-section h2:not(:first-child) {
  margin-top: 48px;
}

.body-prose {
  font-size: 17px;
  line-height: 1.6;
  max-width: 68ch;
  margin-bottom: 18px;
}

.body-prose:last-child {
  margin-bottom: 0;
}

.body-prose-muted {
  color: var(--text-muted);
  font-size: 16px;
}

.value-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 70ch;
}

.value-list li {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  padding-left: 18px;
  border-left: 2px solid var(--border-strong);
}

.value-list li strong {
  color: var(--text);
  font-weight: 600;
}

/* About-page build modes: spacing inside the prose-section so the
   2 cards sit cleanly between the surrounding paragraphs and the
   next h2. */
.about-build-modes {
  margin: 28px 0 48px;
}

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin: 28px 0 32px;
}

.principle h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--text);
}

.principle p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ── Contact page ──────────────────────────────────────────────── */

.contact-section {
  padding: 80px 0 100px;
  position: relative;
  z-index: 1;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: 800px;
}

.contact-block {
  position: relative;
  padding: 28px 26px;
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition:
    background 250ms ease,
    border-color 250ms ease,
    transform 250ms ease;
  overflow: hidden;
}

.contact-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--aurora-human) 55%, transparent) 30%,
    color-mix(in oklab, var(--aurora-agent) 55%, transparent) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}

.contact-block:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.contact-block:hover::before {
  opacity: 1;
  animation: aurora-drift 8s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .contact-block:hover::before {
    animation: none;
  }
}

.contact-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.contact-link {
  font-size: 16px;
  color: var(--accent);
  transition: opacity 160ms ease;
}

.contact-link:hover {
  opacity: 0.85;
}

.contact-note {
  margin-top: 40px;
  max-width: 60ch;
}

/* ── Contact form ──────────────────────────────────────────────── */

.contact-form {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.field-row {
  display: grid;
  gap: 22px;
}

.field-row-2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 580px) {
  .field-row-2 {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Input wrapper — gets the drifting aurora ring on :focus-within,
   same vocabulary as the card hover state. Replaces the older
   reddish :invalid styling (TJ wanted the established aurora
   treatment, not a browser-default validation color). */
.field-input {
  position: relative;
  display: block;
  border-radius: var(--radius);
}

.field-input::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--aurora-human) 55%, transparent) 30%,
    color-mix(in oklab, var(--aurora-agent) 55%, transparent) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
  z-index: 2;
}

.field-input:focus-within::before {
  opacity: 1;
  animation: aurora-drift 8s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .field-input:focus-within::before {
    animation: none;
  }
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition:
    border-color 200ms ease,
    background 200ms ease;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--font);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-faint);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: transparent;
  background: var(--surface-hover);
}

/* Custom select arrow — native chevron looks dated; replace with a
   subtle SVG chevron in --text-muted color. Applied to the select
   variant of the field-input wrapper. */
.field-input-select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat center / contain;
  pointer-events: none;
  z-index: 3;
}

.contact-form select {
  padding-right: 44px;
  cursor: pointer;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.contact-form button[type="submit"] {
  cursor: pointer;
  font-family: var(--font);
  position: relative;
  overflow: hidden;
  border-color: transparent;
  color: var(--text);
  /* Aurora drifting gradient fill — same color stops as the line at
     the top, just stronger (less transparent) since it's the button's
     full background. Drifts continuously for the "slick" effect. */
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--aurora-human) 70%, var(--surface-solid)) 0%,
    color-mix(in oklab, var(--aurora-agent) 70%, var(--surface-solid)) 50%,
    color-mix(in oklab, var(--aurora-human) 70%, var(--surface-solid)) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: aurora-drift 8s ease-in-out infinite alternate;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.contact-form button[type="submit"]:hover {
  /* Hover deepens the saturation + speeds the drift up slightly so
     the user gets a sense of "energy" before clicking. */
  filter: brightness(1.15);
  transform: translateY(-1px);
  animation-duration: 4s;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .contact-form button[type="submit"] {
    animation: none;
  }
}

.form-hint {
  font-size: 13px;
  color: var(--text-faint);
}

.form-status {
  margin-top: 4px;
  min-height: 1.2em;
  font-size: 14px;
  color: var(--text-muted);
}

.form-status[data-tone="warn"] {
  color: #e6a85c;
}

.form-status[data-tone="ok"] {
  color: var(--text);
}

/* ── CTA band ──────────────────────────────────────────────────── */

.cta-band {
  padding: 100px 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 22px;
  max-width: 22ch;
}

.cta-band .body-prose {
  margin-bottom: 30px;
  color: var(--text-muted);
}

/* ── Partners band ─────────────────────────────────────────────── */
/* Footer-adjacent strip showing portfolio properties as a marquee of
   greyscale wordmarks. Two copies of the logo set scroll seamlessly
   for an infinite loop with no JS. */

.partners-band {
  padding: 36px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.partners-label {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 22px;
}

.partners-marquee {
  position: relative;
  overflow: hidden;
  /* Soft fade at the edges so logos enter/exit without a hard cut. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.partners-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: partners-scroll 50s linear infinite;
}

.partner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 36px;
  color: var(--text-muted);
  opacity: 0.55;
  filter: grayscale(1);
  transition:
    opacity 200ms ease,
    color 200ms ease;
}

.partner:hover {
  opacity: 1;
  color: var(--text);
}

.partner svg {
  height: 24px;
  width: auto;
  display: block;
}

@keyframes partners-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Translate by exactly half the track width (one copy of the
       logo set) so the loop is seamless. */
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
  }
}

/* ── Footer ────────────────────────────────────────────────────── */

.footer {
  padding: 50px 0 40px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  z-index: 1;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-brand strong {
  font-size: 16px;
  font-weight: 600;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
}

.footer-links a {
  color: var(--text-muted);
  transition: color 160ms ease;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-meta {
  font-size: 13px;
  margin-top: 16px;
}

.muted {
  color: var(--text-faint);
}

@media (min-width: 720px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .footer-meta {
    margin-top: 0;
  }
}

/* ============================================================
   LANDING PAGES — breadcrumbs, page-hero CTAs, audience list,
   FAQ accordion, related-link cards, alt section background
   ============================================================ */

.breadcrumbs {
  padding: 24px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}
.breadcrumbs .container {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumbs a {
  color: var(--text-faint);
  text-decoration: none;
  transition: color 200ms ease;
}
.breadcrumbs a:hover {
  color: var(--text);
}

.page-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.services-section {
  padding: 80px 0;
}
.services-section-alt {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.audience-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  max-width: 720px;
}
.audience-list li {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  position: relative;
  padding-left: 44px;
}
.audience-list li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aurora-human), var(--aurora-agent));
  transform: translateY(-50%);
  opacity: 0.85;
}

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 820px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  transition: border-color 200ms ease, background 200ms ease;
}
.faq-item:hover {
  border-color: var(--border-strong);
}
.faq-item[open] {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  color: var(--text-faint);
  transition: transform 200ms ease, color 200ms ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--text);
}
.faq-item p {
  padding: 0 22px 20px;
  margin: 0;
  color: var(--text-dim);
  line-height: 1.6;
}

.service-card-link {
  text-decoration: none;
  display: block;
  transition: transform 200ms ease;
}
.service-card-link:hover {
  transform: translateY(-2px);
}
.service-card-link h3 {
  color: var(--text);
}

/* ============================================================
   PAGE HERO AURORA — opt-in aurora background + canvas overlay
   for top-level page heroes (services, clients, pricing, about).
   Contact stays plain.
   ============================================================ */

.page-hero-aurora {
  position: relative;
  overflow: hidden;
}

.page-hero-aurora > .container {
  position: relative;
  z-index: 2;
}

/* Aurora bg + blobs are defined globally (.aurora-bg, .aurora-blob-1/2/3)
   and sit absolutely positioned at inset:0 inside the hero. */

/* Honeypot: invisible to humans, present in the DOM for bots. */
.field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Inline see-all variant for sections without a section-head flex row. */
.how-see-all {
  display: inline-flex;
  margin-top: 18px;
}

/* Callout banner — single-line emphasis used under the About hero.
   Matches the home-page tagline-sub styling: smaller, muted, left-aligned.
   ATM mark sits on the left, text to its right. */
.callout-banner {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
}
.callout-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.callout-mark {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text);
}
.callout-mark svg {
  width: 100%;
  height: 100%;
}
.callout-text {
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 65ch;
}