/* ============================================================
   AUXO landing, styles
   Mobile-first. Palette + type tokens live in tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--espresso);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 380;
  margin: 0;
  letter-spacing: -0.015em;
}

::selection { background: var(--clay); color: var(--espresso); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--clay);
  color: var(--espresso);
  padding: 0.6rem 1rem;
  border-radius: var(--r-pill);
  z-index: 200;
  font-weight: 500;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Atmosphere: grain + glow ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glow-field {
  position: fixed;
  inset: 0;
  z-index: var(--z-glow);
  pointer-events: none;
  background:
    radial-gradient(48vw 42vw at 78% 8%, var(--clay-wash), transparent 62%),
    radial-gradient(40vw 36vw at 12% 42%, rgba(224,165,105,0.05), transparent 64%),
    radial-gradient(52vw 50vw at 60% 96%, rgba(184,96,72,0.06), transparent 66%);
}

/* ---------- Shared layout ---------- */
.section-head {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  max-width: 18ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-soft),
              background-color var(--dur-mid) var(--ease-soft),
              border-color var(--dur-mid) var(--ease-soft),
              box-shadow var(--dur-mid) var(--ease-soft);
}
.btn--primary {
  background: var(--clay);
  color: var(--espresso);            /* dark on clay, contrast 5.3:1 */
  box-shadow: var(--inner-hi), 0 10px 26px -14px rgba(184,96,72,0.7);
}
.btn--primary:hover { background: #d98668; }
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--clay); color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: scale(0.98); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  transition: background-color var(--dur-mid) var(--ease-soft),
              border-color var(--dur-mid) var(--ease-soft),
              backdrop-filter var(--dur-mid) var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(20, 17, 15, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 72px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.brand__mark { width: 26px; height: auto; }
.brand__word {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 450;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}
.nav__links {
  display: none;
  gap: 1.9rem;
  font-size: 0.95rem;
  color: var(--cream-dim);
}
.nav__links a { position: relative; transition: color var(--dur-mid) var(--ease-soft); }
.nav__links a:hover { color: var(--cream); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-carved);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: none; padding: 0.7rem 1.25rem; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.nav__toggle-bar {
  display: block;
  width: 18px; height: 1.5px;
  margin: 0 auto;
  background: var(--cream);
  transition: transform var(--dur-mid) var(--ease-carved),
              opacity var(--dur-fast) var(--ease-soft);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem var(--gutter) 1.5rem;
  background: rgba(20, 17, 15, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) {
  padding: 0.85rem 0.25rem;
  color: var(--cream-dim);
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.05rem;
}
.mobile-menu .btn { margin-top: 0.9rem; }

@media (min-width: 940px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 7rem var(--gutter) 3rem;
  position: relative;
  z-index: var(--z-base);
}
.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__headline {
  font-size: var(--fs-hero);
  line-height: 1.05;
  font-weight: 360;
  letter-spacing: -0.025em;
  margin-bottom: 1.6rem;
}
.hero__headline .line { display: block; padding-bottom: 0.06em; }
/* the clay line is the payoff: more air above it, a touch larger, let the italic carry it */
.hero__headline .line:last-child { margin-top: 0.16em; padding-bottom: 0.12em; }
.hero__headline em {
  font-style: italic;
  font-weight: 360;
  font-size: 1.1em;
  letter-spacing: -0.03em;
  color: var(--clay);
}
.hero__sub {
  font-size: var(--fs-body-lg);
  color: var(--cream-dim);
  max-width: 42ch;
  margin: 0 0 2.3rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero__mark {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  order: -1;                 /* mark above copy on mobile */
}
.hero__mark-img {
  width: clamp(150px, 40vw, 340px);
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5));
}
.hero__mark-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(224,165,105,0.22), rgba(210,122,94,0.10) 45%, transparent 70%);
  filter: blur(30px);
  z-index: -1;
}

@media (min-width: 860px) {
  .hero__inner { grid-template-columns: 1.25fr 0.75fr; }
  .hero__mark { order: 0; }
  .hero__mark-img { width: clamp(260px, 28vw, 380px); }
}

/* ---------- Problem + stats ---------- */
.problem { padding: var(--section-y) var(--gutter); position: relative; z-index: var(--z-base); }
.problem__inner { max-width: var(--maxw); margin: 0 auto; }
.problem__lead {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.problem__body {
  color: var(--cream-dim);
  max-width: var(--maxw-text);
  font-size: var(--fs-body-lg);
}
@media (min-width: 860px) {
  .problem__lead {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 3rem;
  }
}

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  background: var(--espresso);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(0.5rem, 2vw, 1.5rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.stat__num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-stat);
  font-weight: 340;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--cream);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.stat__unit {
  font-size: 0.32em;
  color: var(--clay);
  font-style: italic;
  letter-spacing: 0;
}
.stat__label {
  color: var(--cream-dim);
  font-size: var(--fs-body);
  max-width: 28ch;
}
.stat__src {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--cream-faint);
}
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- How it works ---------- */
.how { padding: var(--section-y) var(--gutter); position: relative; z-index: var(--z-base); }
.how__inner { max-width: var(--maxw); margin: 0 auto; }
.how__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.step {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.8rem;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 1.05rem;
  color: var(--clay);
  font-feature-settings: "tnum";
}
.step__title { font-size: var(--fs-h3); font-weight: 400; }
.step__body { color: var(--cream-dim); max-width: 46ch; }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
  .step { border-top: none; padding: 0; }
  .step:last-child { border-bottom: none; }
  .step__num {
    display: block;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    margin-bottom: 0.6rem;
    font-size: 1.25rem;
  }
}

/* ---------- What Auxo builds ---------- */
.builds { padding: var(--section-y) var(--gutter); position: relative; z-index: var(--z-base); }
.builds__inner { max-width: var(--maxw); margin: 0 auto; }
.builds__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); margin-left: auto; text-align: right; max-width: 16ch; }
.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.offer {
  position: relative;
  background: linear-gradient(160deg, var(--espresso-raise), var(--espresso));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 200px;
  justify-content: flex-end;
  cursor: pointer;
  transition: transform var(--dur-mid) var(--ease-carved),
              border-color var(--dur-mid) var(--ease-soft),
              box-shadow var(--dur-mid) var(--ease-carved);
}
/* AUXO NOTE: coming-soon marker for the gated Lead generation offer. Quiet by design.
   Keep it understated; do not turn this into a loud badge or remove it without owner approval. */
.tag-soon {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
  background: var(--clay-wash);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.22em 0.6em;
  line-height: 1;
  white-space: nowrap;
}
.offer__soon {
  position: absolute;
  top: clamp(1.2rem, 3vw, 1.8rem);
  right: clamp(1.2rem, 3vw, 1.8rem);
}
@media (hover: hover) and (pointer: fine) {
  .offer:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-lift); }
  .offer:hover .offer__cue { color: var(--clay); opacity: 1; }
  .offer:hover .offer__cue i { transform: translateY(2px); }
}
.offer:focus-visible { border-color: var(--clay); }
.offer:focus-visible .offer__cue { color: var(--clay); opacity: 1; }
.offer:active { transform: scale(0.99); }
.offer__icon {
  font-size: 2rem;
  color: var(--clay);
  margin-bottom: auto;
}
.offer__title { font-size: var(--fs-h3); font-weight: 400; margin-top: 0.3rem; }
.offer__body { color: var(--cream-dim); font-size: var(--fs-body); max-width: 36ch; }
.offer__benefit {
  color: var(--cream-faint);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
  max-width: 34ch;
}
.offer__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--cream-faint);
  opacity: 0.7;
  transition: color var(--dur-mid) var(--ease-soft), opacity var(--dur-mid) var(--ease-soft);
}
.offer__cue i { font-size: 0.9rem; transition: transform var(--dur-mid) var(--ease-carved); }
/* five offers: avoid an orphan card at every width.
   tablet = 2 + 2 + 1 (last card spans full); desktop = 3 over 2 (a calm, intentional rhythm). */
@media (min-width: 760px) and (max-width: 1039.98px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .offer:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .offer-grid { grid-template-columns: repeat(6, 1fr); }
  .offer { grid-column: span 2; }
  .offer:nth-child(4),
  .offer:nth-child(5) { grid-column: span 3; }
}

/* ---------- Interactive flows ---------- */
.flows { padding: var(--section-y) var(--gutter); position: relative; z-index: var(--z-base); }
.flows__inner { max-width: var(--maxw); margin: 0 auto; }
.flows__head { margin-bottom: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; max-width: 60ch; }
.flows__intro { color: var(--cream-dim); font-size: var(--fs-body-lg); }

.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--cream-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: color var(--dur-mid) var(--ease-soft),
              background-color var(--dur-mid) var(--ease-soft),
              border-color var(--dur-mid) var(--ease-soft);
}
.tab:hover { color: var(--cream); }
.tab.is-active {
  color: var(--cream);
  background: var(--clay-wash);
  border-color: var(--line-strong);
}

.diagram-stage { position: relative; }
.diagram-panel { width: 100%; }
.diagram-panel[hidden] { display: none; }

/* dotted-grid canvas behind the nodes */
.diagram-canvas {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-shell);
  background:
    radial-gradient(circle at center, var(--espresso-raise), var(--espresso-deep)),
    var(--espresso-deep);
  background-blend-mode: normal;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.diagram-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.diagram-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 40%, var(--clay-wash-soft), transparent 70%);
  pointer-events: none;
}

/* svg connector layer */
.diagram-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.connector {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.connector-pulse {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
}

/* node row */
.diagram-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: clamp(2.2rem, 5vw, 4rem);
}
.diagram-node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}
/* the crafted tile: double-bezel object */
.node-tile {
  width: clamp(56px, 8vw, 78px);
  aspect-ratio: 1;
  border-radius: var(--r-node);
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--espresso-card), var(--espresso-deep));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-node);
  position: relative;
  isolation: isolate;
  transition: transform var(--dur-mid) var(--ease-carved),
              box-shadow var(--dur-mid) var(--ease-carved),
              border-color var(--dur-mid) var(--ease-soft);
}
.node-tile::before {           /* inner core highlight, concentric */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--r-node) - 4px);
  box-shadow: var(--inner-hi);
  background: radial-gradient(120% 120% at 50% 0%, rgba(242,235,227,0.05), transparent 60%);
  pointer-events: none;
}
.node-tile i {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  color: var(--clay);
  transition: color var(--dur-mid) var(--ease-soft), transform var(--dur-mid) var(--ease-carved);
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .diagram-node:hover .node-tile {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: var(--clay);
  }
  .diagram-node:hover .node-tile i { color: var(--gold); }
}
.node-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.node-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cream);
  max-width: 15ch;
}
.node-index {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--cream-dim);
}

/* horizontal scroll affordance on mid screens */
.diagram-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.diagram-scroll::-webkit-scrollbar { display: none; }

/* mobile: stack vertically */
.diagram-canvas.is-stacked .diagram-row {
  flex-direction: column;
  gap: 1.5rem;
  max-width: 320px;
  margin: 0 auto;
}
.diagram-canvas.is-stacked .diagram-node {
  flex-direction: row;
  text-align: left;
  align-items: center;
  gap: 1rem;
}
.diagram-canvas.is-stacked .node-label { max-width: none; }
.diagram-canvas.is-stacked .node-body { display: flex; flex-direction: column; gap: 0.2rem; }
/* vertical connector pips between stacked nodes */
.diagram-canvas.is-stacked .diagram-node::after {
  content: "";
  position: absolute;
  left: clamp(28px, 4vw, 39px);
  top: 100%;
  width: 1.5px;
  height: 1.5rem;
  background: linear-gradient(var(--line-strong), transparent);
}
.diagram-canvas.is-stacked .diagram-node:last-child::after { display: none; }

/* node is focusable so the explanation is reachable by keyboard + tap */
.diagram-node { cursor: pointer; border-radius: var(--r-node); }
.diagram-node:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}
.diagram-node:focus-visible .node-tile,
.diagram-node.is-open .node-tile {
  border-color: var(--clay);
  box-shadow: var(--shadow-lift);
}

/* shared explanation tooltip, appended to <body> so no ancestor clips it */
.node-tip {
  position: fixed;
  top: 0; left: 0;
  z-index: 80;
  max-width: 230px;
  padding: 0.62rem 0.8rem;
  background: var(--espresso-card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lift), var(--inner-hi);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity var(--dur-mid) var(--ease-soft),
              transform var(--dur-mid) var(--ease-carved);
}
.node-tip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .node-tip { transition: none; transform: none; }
}

/* ---------- About ---------- */
.about {
  padding: var(--section-y) var(--gutter);
  position: relative;
  z-index: var(--z-base);
}
.about__inner { max-width: 60ch; margin: 0 auto; }
/* kicker + headline stay centered; the body breaks left for a reading path */
.about__kicker {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--clay);
  margin: 0 0 1.5rem;
  text-align: center;
}
.about__head {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
  font-weight: 360;
  text-align: center;
}
.about__body { display: grid; gap: 1.5rem; text-align: left; }
.about__body p {
  color: var(--cream-dim);
  font-size: var(--fs-body-lg);
  margin: 0;
  max-width: 54ch;
}
.about__lead { color: var(--cream); }
/* quieter poetry: present, but it should not compete with the payoff */
.about__quiet { color: var(--cream-faint); }
/* payoff phrases catch the eye on a skim, same clay accent, no new color */
.about__body em {
  font-style: italic;
  font-weight: 420;
  color: var(--clay);
}
/* the gravity center: one line promoted to a pull-quote in the display type */
.about__pull {
  margin: clamp(1.2rem, 3vw, 2.2rem) 0;
  padding: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 360;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 22ch;
}
.about__pull em { font-style: italic; font-weight: 360; color: var(--clay); }

/* ---------- Final CTA ---------- */
.see {
  padding: var(--section-y) var(--gutter);
  position: relative;
  z-index: var(--z-base);
}
.see__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  background: linear-gradient(165deg, var(--espresso-raise), var(--espresso-deep));
  border: 1px solid var(--line);
  border-radius: var(--r-shell);
  padding: clamp(2rem, 5vw, 4.5rem);
}
.see__head { font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 360; max-width: 16ch; }
.see__sub { color: var(--cream-dim); font-size: var(--fs-body-lg); max-width: 46ch; margin-top: 1.4rem; }

.see__form { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: var(--fs-small); color: var(--cream-dim); font-weight: 500; }
.field__opt { color: var(--cream-faint); font-weight: 400; }
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--cream);
  background: var(--espresso-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  padding: 0.85rem 1rem;
  transition: border-color var(--dur-mid) var(--ease-soft), box-shadow var(--dur-mid) var(--ease-soft);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input::placeholder, .field textarea::placeholder { color: var(--cream-faint); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-wash);
}
.field input[aria-invalid="true"] { border-color: var(--clay-deep); }
.field__error { color: var(--clay); font-size: var(--fs-small); margin: 0; }
.field--full { grid-column: 1 / -1; }
.see__submit { justify-self: start; grid-column: 1 / -1; }
.see__status { grid-column: 1 / -1; margin: 0; font-size: var(--fs-small); color: var(--gold); min-height: 1.2em; }

@media (min-width: 880px) {
  .see__inner { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .see__form { grid-template-columns: 1fr 1fr; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--espresso-deep);
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  align-items: center;
}
.footer__brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer__line { color: var(--cream-dim); margin: 0; }
.footer__contact { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__contact a { color: var(--cream-dim); transition: color var(--dur-mid) var(--ease-soft); }
.footer__contact a:hover { color: var(--clay); }
.footer__legal { color: var(--cream-faint); font-size: var(--fs-small); margin: 0; }
@media (min-width: 760px) {
  .footer__inner {
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
  }
  .footer__line { text-align: left; }
  .footer__contact { justify-content: flex-end; }
  .footer__legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
}

/* ============================================================
   Motion entry states (JS adds .is-in when revealed).
   Static-safe: if JS never runs, content is fully visible.
   ============================================================ */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); }
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--ease-carved),
                transform var(--dur-slow) var(--ease-carved);
  }
  /* hero headline lines are handled by SplitText/GSAP, keep them hidden pre-animation */
  .js .hero__headline[data-split] { opacity: 1; }
}

/* Reduced motion: everything visible, no transforms anywhere */
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero__headline, .diagram-node, .connector, .connector-pulse {
    opacity: 1 !important;
    transform: none !important;
  }
}