/* ============================================================
   AVNI SYNAPSE - style.css
   Design system: "The Engineer's Draft"
   --------------------------------------------------------------
   Cream drafting paper, slate-blue technical ink, olive-dark
   text, mono annotations. The beaver, nature's engineer, is the
   brand's proof of concept: build the right structure and an
   entire ecosystem sustains itself.

   Strict three-color palette (client brand):
     #F1EEE2  cream  - background, sampled from the mascot render
     #4A6A8A  slate  - the ink: links, buttons, live elements
     #3D3D38  olive  - text, dark bands
   Every other tone on the site is an alpha blend of these three.
   No fourth color is permitted.
   ============================================================ */

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

:root {
  /* Paper (sampled from image/mascot.jpeg so the figure blends) */
  --bg:        #F1EEE2;                    /* rgb(241, 238, 226) */
  --card:      #F1EEE2;
  --tint:      rgba(61, 61, 56, 0.04);     /* alt-section wash   */
  --line:      rgba(61, 61, 56, 0.15);
  --line-strong: rgba(61, 61, 56, 0.28);

  /* Ink */
  --ink:       #3D3D38;                    /* rgb(61, 61, 56)    */
  --muted:     rgba(61, 61, 56, 0.74);

  /* Signal */
  --accent:       #4A6A8A;                 /* rgb(74, 106, 138)  */
  --accent-deep:  rgba(74, 106, 138, 0.85);
  /* Slate blended 60/40 into olive. Plain slate is only 4.86:1
     against cream, so any softened cream text on it fails AA; this
     is the darkest reading of the same ink that clears 4.5:1 for
     body copy. Still an alpha blend of two palette colors. */
  --accent-ink:   #455869;                 /* rgb(69, 88, 105)   */
  --accent-soft:  rgba(74, 106, 138, 0.09);
  --accent-line:  rgba(74, 106, 138, 0.38);

  /* Dark band (olive) */
  --band:       #3D3D38;
  --band-text:  #F1EEE2;
  --band-muted: rgba(241, 238, 226, 0.72);
  --band-line:  rgba(241, 238, 226, 0.14);

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body:    'Geist', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'Consolas', monospace;

  /* Rhythm */
  --section-pad: clamp(88px, 12vw, 160px);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(61, 61, 56, 0.06), 0 10px 30px rgba(61, 61, 56, 0.07);
  --shadow-card-hover: 0 2px 4px rgba(61, 61, 56, 0.07), 0 18px 44px rgba(61, 61, 56, 0.11);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  background-color: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  /* Drafting-paper grid: the ground everything is drawn on. */
  background-image:
    linear-gradient(rgba(74, 106, 138, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 106, 138, 0.05) 1px, transparent 1px);
  background-size: 280px 280px;
}

::selection { background: var(--accent); color: var(--bg); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }

a { color: var(--accent); }

/* Buttons do not inherit color by default; keep them in the palette. */
button { color: inherit; }

img, svg, video, canvas { max-width: 100%; display: block; }

/* Keyboard focus: visible, on-brand, never removed. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -48px; left: 16px;
  z-index: 2000;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

.container { max-width: min(1200px, 92vw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.container--wide { max-width: min(1320px, 94vw); }

/* Key-phrase highlight: a dotted "measurement" underline in slate. */
.hl {
  color: var(--accent);
  text-decoration: underline dotted var(--accent-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  padding: 17px 30px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: none;
  box-shadow: 0 6px 20px rgba(74, 106, 138, 0.28);
}
.btn-primary:hover {
  background: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(61, 61, 56, 0.3);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.btn-arrow { transition: transform 0.2s ease; }
.btn-primary:hover .btn-arrow,
.btn-secondary:hover .btn-arrow { transform: translateX(3px); }

/* ── NAV ─────────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.navbar.is-scrolled {
  padding: 12px 0;
  background: rgba(241, 238, 226, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 18px rgba(61, 61, 56, 0.05);
}

/* Reading progress: a scroll-scrubbed measurement along the nav. */
.nav-progress {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

.nav-inner {
  max-width: min(1320px, 94vw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo-link { text-decoration: none; display: flex; flex-direction: column; line-height: 1; }
.logo-avni {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.30em;
  color: var(--ink);
}
.logo-i { color: var(--accent); }
.logo-synapse {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.54em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
}

.nav-links { list-style: none; display: flex; align-items: center; gap: 6px; }

.nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-link:hover { color: var(--ink); background: rgba(74, 106, 138, 0.07); }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.nav-cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--bg);
  background: var(--accent);
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 10px;
  margin-left: 12px;
  box-shadow: 0 4px 14px rgba(74, 106, 138, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--ink); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(61, 61, 56, 0.28); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  padding: 0 11px;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 120px 0 0;
}

/* The schematic network: fine slate ink, painted by js/main.js. */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Soft paper tints, slate high and olive low. */
.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 640px 420px at 84% 10%, rgba(74, 106, 138, 0.09), transparent 65%),
    radial-gradient(ellipse 560px 380px at 6% 98%, rgba(61, 61, 56, 0.05), transparent 65%);
}

.hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: min(1320px, 94vw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  background: rgba(241, 238, 226, 0.72);
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 34px;
}
.hero-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(74, 106, 138, 0.6);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.hero-headline {
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  max-width: 15ch;
  margin-bottom: 28px;
}

.hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 56ch;
  margin-bottom: 42px;
}
.hero-sub strong { color: var(--ink); font-weight: 500; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(64px, 9vh, 110px); }

/* Load-in sequence (JS adds .hero-loaded to <body>). */
.hero-stage { opacity: 0; transform: translateY(22px); }
.hero-loaded .hero-stage {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-loaded .hero-stage:nth-child(1) { transition-delay: 0.05s; }
.hero-loaded .hero-stage:nth-child(2) { transition-delay: 0.16s; }
.hero-loaded .hero-stage:nth-child(3) { transition-delay: 0.30s; }
.hero-loaded .hero-stage:nth-child(4) { transition-delay: 0.44s; }

/* Capability ticker. */
.hero-ticker {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: rgba(241, 238, 226, 0.6);
  overflow: hidden;
  padding: 17px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerScroll 46s linear infinite;
}
.hero-ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker-group span { padding: 0 18px; }
.ticker-group span::after {
  content: '·';
  color: var(--accent);
  margin-left: 36px;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── SECTION SHARED ──────────────────────────────────────────── */
.section { padding: var(--section-pad) 0; position: relative; }
.section--alt { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.section-title {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: 18px;
}
.section-sub {
  font-size: clamp(15.5px, 1.5vw, 18px);
  font-weight: 300;
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.75;
}
.section-head { margin-bottom: clamp(44px, 6vw, 72px); }
.section-head--center { text-align: center; }
.section-head--center .section-title,
.section-head--center .section-sub { margin-left: auto; margin-right: auto; }
.section-head--center .eyebrow { justify-content: center; }

/* ── STATEMENTS (conviction lines) ───────────────────────────── */
.statements { display: flex; flex-direction: column; }
.statement {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(20px, 4vw, 44px);
  align-items: baseline;
  padding: clamp(30px, 4vw, 44px) 0;
  border-top: 1px solid var(--line-strong);
}
.statement:last-child { border-bottom: 1px solid var(--line-strong); }
.statement-mark {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--accent);
  white-space: nowrap;
}
.statement p {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 30ch;
}
.statement p em { font-style: normal; color: var(--accent); }

/* ── SERVICES (click-to-front wheel) ─────────────────────────── */
/* Five cards, a real sequence (Step 01 to 05), positioned around a
   shallow ellipse by JS (main.js module 8 sets --x/--y/--scale/--z
   per card; trig is computed in JS, not CSS, for wider browser
   support). Nothing moves by itself: a card only rotates to the
   front when clicked, or via the arrow keys once focused, so there
   is no auto-play and nothing to pause. The whole thing collapses
   to a plain stack under 720px. Full detail lives on services.html;
   this is teaser only.

   The base state below is that plain vertical stack, deliberately:
   it is what a narrow screen gets, what a reduced-motion visitor
   gets, and what anyone with JS blocked gets. The wheel geometry is
   layered on top by main.js via .wheel--active, so the cards are
   never left piled on each other at 50%/50% waiting for a script
   that may not arrive. */
.wheel {
  position: relative;
  margin: 0 auto;
  outline-offset: 6px;
}
.wheel-track {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wheel-card {
  --x: 0px;
  --y: 0px;
  --scale: 1;
  --op: 1;
  --z: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 2.2vw, 26px);
}

/* Enhanced state: cards lifted onto the ellipse. Height (both the
   wheel container and every card, so all five match) is set inline
   by main.js from the tallest card, since absolutely positioned
   children leave nothing here to measure. */
.wheel--active .wheel-track {
  position: absolute;
  inset: 0;
  display: block;
}
.wheel--active .wheel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(200px, 22vw, 260px);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(var(--scale));
  /* Only the two farthest cards fade meaningfully (JS keeps the
     front pair at .94+, see main.js): a fade that reached every
     card the way the first attempt did pulled the peripheral text
     under AA, since opacity blends text and background toward the
     same page color together. The two cards nearly at the front
     stay fully legible; the two tucked behind are a depth cue, not
     meant to be read without bringing them forward first. */
  opacity: var(--op);
  z-index: var(--z);
  cursor: pointer;
}

/* Palette rotation: strict alternation across the three brand
   tones. Cream and olive are the site's existing pairings; the
   slate card uses --accent-ink rather than the button slate,
   because cream text on plain --accent tops out at 4.86:1 and
   nothing softened survives on it. */
.wheel-card[data-color="cream"] { background: var(--card); border: 1px solid var(--line); }
.wheel-card[data-color="slate"] { background: var(--accent-ink); border: 1px solid var(--accent-ink); }
.wheel-card[data-color="olive"] { background: var(--band); border: 1px solid var(--band); }

.wheel-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.wheel-icon svg { width: 20px; height: 20px; }

.wheel-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}
.wheel-title {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.wheel-text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 12px;
}
/* Cards are forced to equal height (main.js sets it from the
   tallest blurb), so without this the tags would land wherever each
   card's own text happened to end - flush at the bottom on Step 05,
   with a visible gap under them on the longer cards. margin-top:auto
   pins them to the bottom of every card instead, so the row of tags
   lines up no matter how long the paragraph above it is. Harmless
   in the stacked mobile layout, where height is natural and there's
   no leftover space for the auto margin to consume. */
.wheel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.wheel-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Color-variant text/icon treatment: cream cards keep the default
   ink/slate palette, slate and olive cards flip to cream text so
   contrast always matches an already-used pairing elsewhere on the
   site. */
.wheel-card[data-color="cream"] .wheel-num { color: var(--accent); }
.wheel-card[data-color="cream"] .wheel-title { color: var(--ink); }
.wheel-card[data-color="cream"] .wheel-text { color: var(--muted); }
.wheel-card[data-color="cream"] .wheel-icon { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
/* Not --muted: at 0.74 against its own wash this lands on 4.4:1,
   just under AA. 0.85 reads the same and clears it at 5.9:1. */
.wheel-card[data-color="cream"] .wheel-tag { color: rgba(61, 61, 56, 0.85); background: rgba(61, 61, 56, 0.045); border: 1px solid var(--line); }
.wheel-card[data-color="cream"] .wheel-tag--hl { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* Alphas below are the measured floor against --accent-ink, the
   lighter of the two dark cards: num 5.2:1, text 5.5:1, tag 4.6:1
   on its own washed chip. Olive sits darker still, so it clears
   everything these do. Softening any of them further drops the
   card under AA. */
.wheel-card[data-color="slate"] .wheel-num,
.wheel-card[data-color="olive"] .wheel-num { color: rgba(241, 238, 226, 0.86); }
.wheel-card[data-color="slate"] .wheel-title,
.wheel-card[data-color="olive"] .wheel-title { color: var(--bg); }
.wheel-card[data-color="slate"] .wheel-text,
.wheel-card[data-color="olive"] .wheel-text { color: rgba(241, 238, 226, 0.90); }
.wheel-card[data-color="slate"] .wheel-icon,
.wheel-card[data-color="olive"] .wheel-icon { background: rgba(241, 238, 226, 0.14); border: 1px solid rgba(241, 238, 226, 0.28); color: var(--bg); }
.wheel-card[data-color="slate"] .wheel-tag,
.wheel-card[data-color="olive"] .wheel-tag { color: rgba(241, 238, 226, 0.92); background: rgba(241, 238, 226, 0.10); border: 1px solid rgba(241, 238, 226, 0.28); }
.wheel-card[data-color="slate"] .wheel-tag--hl,
.wheel-card[data-color="olive"] .wheel-tag--hl { color: var(--ink); background: var(--bg); border-color: var(--bg); }

.services-cta { text-align: center; margin-top: clamp(40px, 5vw, 56px); }

/* ── ECOSYSTEM (the mascot's section) ────────────────────────── */
.eco-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.eco-copy .section-title { max-width: 18ch; }
.eco-copy > p {
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
  max-width: 56ch;
  margin-bottom: 18px;
}
.eco-copy > p strong { color: var(--ink); font-weight: 500; }

.eco-points { list-style: none; margin: 30px 0 0; display: flex; flex-direction: column; }
.eco-point {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line-strong);
}
.eco-point:last-child { border-bottom: 1px solid var(--line-strong); }
.eco-point-mark {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 3px;
}
.eco-point-title {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.eco-point p { font-size: 14.5px; font-weight: 300; color: var(--muted); line-height: 1.65; }

/* The specimen plate: mascot render framed like a technical figure.
   The render's own background matches --bg exactly (sampled), so
   the image sits borderless on a card of the same paper. */
.eco-figure {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(18px, 2.5vw, 28px);
  margin: 0;
}
.eco-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.eco-figure figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: clamp(14px, 2vw, 20px);
  padding-top: 14px;
}
.eco-figure figcaption .fig-id { color: var(--accent); white-space: nowrap; }

/* Graceful fallback: JS adds .no-mascot to the section when the
   mascot image is missing; copy takes the full width. */
.eco-section.no-mascot .eco-layout { grid-template-columns: 1fr; }
.eco-section.no-mascot .eco-figure { display: none; }

/* ── STATS ───────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.stat-card:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(46px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.stat-rule {
  width: 44px; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin: 10px 0 18px;
}
.stat-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 20px;
}
.stat-source {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 16px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.stat-source:hover { color: var(--accent); border-color: var(--accent); }

/* ── PROCESS (scroll-scrubbed signal path) ───────────────────── */
/* The connector line fills as the visitor scrolls through the
   section (js/main.js drives --scrub 0 to 1), and each step
   lights the moment the line reaches it. */
.process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.process-track::before {
  content: '';
  position: absolute;
  top: 7px; left: 2%; right: 2%;
  height: 2px;
  background: var(--line-strong);
}
.process-line {
  position: absolute;
  top: 7px; left: 2%;
  width: 96%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--scrub, 0));
  transform-origin: left center;
}

.process-step { position: relative; padding-top: 34px; }
.process-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-strong);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.process-step.is-lit::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.process-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--line-strong);
  display: block;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}
.process-step.is-lit .process-num { color: var(--accent); }
.process-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--muted);
  transition: color 0.3s ease;
}
.process-step.is-lit .process-name { color: var(--ink); }
.process-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 26ch;
}

/* ── BOTTOM CTA (olive band) ─────────────────────────────────── */
.bottom-cta {
  position: relative;
  padding: var(--section-pad) 0;
  text-align: center;
  overflow: hidden;
  background: var(--band);
}
.bottom-cta-title {
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--band-text);
  max-width: 20ch;
  margin: 0 auto 18px;
}
.bottom-cta-title .hl {
  color: var(--band-text);
  text-decoration-color: rgba(241, 238, 226, 0.45);
}
.bottom-cta-sub {
  font-size: 17px;
  font-weight: 300;
  color: var(--band-muted);
  max-width: 52ch;
  margin: 0 auto 40px;
}
.bottom-cta .btn-primary { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3); }
.bottom-cta .btn-primary:hover { background: var(--bg); color: var(--ink); }

/* ── FOOTER (olive band) ─────────────────────────────────────── */
.footer {
  background: var(--band);
  border-top: 1px solid var(--band-line);
  padding: clamp(56px, 7vw, 88px) 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(44px, 6vw, 64px);
}
.footer-brand p {
  font-size: 14.5px;
  font-weight: 300;
  color: var(--band-muted);
  line-height: 1.7;
  max-width: 34ch;
  margin-top: 18px;
}
.footer-avni { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.28em; color: var(--band-text); }
.footer-avni .logo-i { color: var(--band-text); }
.footer-synapse { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5em; color: var(--band-muted); }

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--band-muted);
  margin-bottom: 20px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--band-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--band-text); }

.footer-bottom {
  border-top: 1px solid var(--band-line);
  padding: 26px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-copy, .footer-note {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--band-muted);
}
.footer-note span { color: var(--band-text); }

/* ── PAGE HERO (about / services / contact) ──────────────────── */
.page-hero {
  position: relative;
  padding: clamp(170px, 22vh, 230px) 0 clamp(72px, 9vw, 110px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 600px 380px at 85% 0%, rgba(74, 106, 138, 0.08), transparent 65%),
    radial-gradient(ellipse 480px 320px at 4% 100%, rgba(61, 61, 56, 0.04), transparent 65%),
    var(--tint);
}
.page-hero h1 {
  font-size: clamp(36px, 5.2vw, 68px);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-top: 4px;
}
.page-hero-sub {
  font-size: clamp(15.5px, 1.5vw, 18px);
  font-weight: 300;
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.75;
  margin-top: 22px;
}

/* ── ABOUT: etymology panels ─────────────────────────────────── */
.etym-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.etym-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(30px, 4vw, 46px);
  box-shadow: var(--shadow-card);
}
/* Avni is earth: olive. Synapse is signal: slate. */
.etym-card--avni { border-bottom: 3px solid var(--ink); }
.etym-card--synapse { border-bottom: 3px solid var(--accent); }
.etym-word {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}
.etym-card--avni .etym-word { color: var(--ink); }
.etym-card--synapse .etym-word { color: var(--accent); }
.etym-origin {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin: 14px 0 16px;
}
.etym-card p { font-size: 15.5px; font-weight: 300; color: var(--muted); line-height: 1.75; }
.etym-card p strong { color: var(--ink); font-weight: 500; }

.etym-bridge {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  max-width: 44ch;
  margin: clamp(20px, 3vw, 36px) auto 0;
}
.etym-bridge em { font-style: normal; color: var(--accent); }

/* ── ABOUT: mission / vision ─────────────────────────────────── */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mv-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(30px, 4vw, 46px);
  box-shadow: var(--shadow-card);
}
.mv-card h3 { font-size: 24px; margin-bottom: 16px; }
.mv-card p { font-size: 15.5px; font-weight: 300; color: var(--muted); line-height: 1.8; }

/* ── ABOUT: differentiators ──────────────────────────────────── */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.diff-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 34px);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.diff-card:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.diff-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.diff-card p { font-size: 14.5px; font-weight: 300; color: var(--muted); line-height: 1.7; }

/* ── SERVICES: the path ──────────────────────────────────────── */
.stack-rows { display: flex; flex-direction: column; gap: 18px; }
.stack-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(24px, 4vw, 56px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.stack-row:hover { border-color: var(--accent-line); box-shadow: var(--shadow-card-hover); }

.stack-layer {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.9;
}
.stack-layer strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--line-strong);
  margin-top: 8px;
}

.stack-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; margin-bottom: 14px; }

/* Credential badge beside a service title, e.g. PL-300. */
.stack-badge {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border-radius: 999px;
  padding: 6px 14px;
  margin-left: 12px;
  transform: translateY(-3px);
  white-space: nowrap;
}

.stack-text { font-size: 15.5px; font-weight: 300; color: var(--muted); line-height: 1.8; margin-bottom: 22px; }

.stack-includes { list-style: none; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.stack-includes li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}
.stack-includes li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 1.5px;
  background: var(--accent);
}

.stack-example {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 20px;
  line-height: 1.7;
}
.stack-example strong {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

/* ── CONTACT ─────────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(26px, 4vw, 44px);
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.field label .req { color: var(--accent); }

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  background: rgba(61, 61, 56, 0.035);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.contact-form select { cursor: pointer; appearance: none; }
.field-select { position: relative; }
.field-select::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: 22px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(61, 61, 56, 0.4); }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.contact-form textarea { min-height: 170px; resize: vertical; }

.contact-form button[type="submit"] {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 12px;
  padding: 17px 40px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(74, 106, 138, 0.28);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, opacity 0.2s ease;
}
.contact-form button[type="submit"]:hover { background: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(61, 61, 56, 0.3); }
.contact-form button[type="submit"]:disabled { opacity: 0.55; cursor: wait; transform: none; }

/* Palette-true feedback: the words carry the meaning, the color
   stays within the three brand tones. */
.form-status { min-height: 24px; font-size: 14.5px; font-weight: 500; }
.form-status--success { color: var(--accent); }
.form-status--error   { color: var(--ink); font-weight: 600; }

/* Contact sidebar */
.contact-info { display: flex; flex-direction: column; gap: 14px; }
.contact-info-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-card);
}
.contact-info-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.contact-info-block p { font-size: 14.5px; font-weight: 300; color: var(--muted); line-height: 1.7; }

.contact-checklist { list-style: none; margin: 0; padding: 0; }
.contact-checklist li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 10px;
}
.contact-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--accent);
  font-weight: 600;
}

.process-recap { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.process-recap li {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.process-recap li:not(:last-child)::after { content: '→'; margin-left: 8px; color: var(--accent); font-weight: 400; }

/* ── REVEAL ON SCROLL ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero-stage { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ticker-track { animation: none; }
  .hero-eyebrow-dot { animation: none; }
  /* Scrubbed elements settle in their finished state. */
  .process-line { transform: scaleX(1); }
  .process-step::before { border-color: var(--accent); background: var(--accent); }
  .process-num { color: var(--accent); }
  .process-name { color: var(--ink); }
  .btn-primary, .btn-secondary, .nav-cta, .stat-card, .diff-card { transition: none; }
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .process-track { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .process-track::before, .process-line { display: none; }
  .process-step::before { border-color: var(--accent); background: var(--accent); }
  .process-num { color: var(--accent); }
  .process-name { color: var(--ink); }
  .eco-layout { grid-template-columns: 1fr; }
  .eco-figure { max-width: 560px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0; right: 0;
    background: rgba(241, 238, 226, 0.98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 24px 26px;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(61, 61, 56, 0.10);
  }
  .nav-links.open { display: flex; }
  .nav-link { padding: 14px 12px; font-size: 16px; }
  .nav-cta { margin: 12px 12px 0; text-align: center; padding: 15px 22px; }
  .nav-toggle { display: flex; }
  .navbar { background: rgba(241, 238, 226, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }

  .hero-headline { max-width: 100%; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-primary, .hero-cta .btn-secondary { justify-content: center; }

  .statement { grid-template-columns: 1fr; gap: 10px; }
  .etym-grid, .mv-grid { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .stack-row { grid-template-columns: 1fr; gap: 20px; }
  .stack-layer { display: flex; align-items: baseline; gap: 14px; }
  .stack-layer strong { margin-top: 0; font-size: 34px; }
  .stack-includes { grid-template-columns: 1fr; }
  .stack-badge { margin-left: 0; margin-top: 8px; display: inline-block; transform: none; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .eco-point { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: 1fr; }
}