/* ==========================================================================
   EQUAL TO ONE — DESIGN SYSTEM
   ==========================================================================
   Brand idea: Client + Equal To One = one outcome. Two parties, one result.
   That idea is expressed structurally, not decoratively: the "=" motif
   recurs as a layout device (paired columns joined by a rule), never as a
   literal icon. No brain/circuit/node graphics, no gradient blobs, no
   stock photography.

   Palette: ink (near-black navy) for authority + copper accent for the
   "one" mark — deliberately not the default AI-blue/violet gradient.
   Type: a serif display face for editorial weight (consulting, not SaaS)
   paired with a workhorse sans for UI/body copy.

   This file is the shared system for every page. New Solutions/Industries
   pages should be built from the .section, .card, .btn, .grid-* and
   .eyebrow patterns below rather than inventing new ones.
   ========================================================================== */

:root {
  /* ---- Color: ink scale ---- */
  --ink-950: #0b0d12;
  --ink-900: #11141b;
  --ink-800: #1b1f29;
  --ink-700: #2c313f;
  --ink-600: #4a5160;
  --ink-400: #7b8294;
  --ink-200: #c4c8d2;

  /* ---- Color: paper scale ---- */
  --paper-0: #fbfaf7;
  --paper-100: #f3f1ea;
  --paper-200: #e9e6dc;
  --line: #ddd9cd;
  --line-on-dark: rgba(255, 255, 255, 0.14);

  /* ---- Color: accent (the "one" mark) ---- */
  --accent: #c2772b;
  --accent-dim: #9c5e1f;
  --accent-bright: #e08f3e;
  --accent-soft: #f1e2c9;
  --accent-soft-on-dark: rgba(194, 119, 43, 0.18);

  /* ---- Semantic ---- */
  --bg: var(--paper-0);
  --bg-raised: #ffffff;
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-on-dark: var(--paper-0);
  --text-on-dark-muted: var(--ink-200);

  /* ---- Type ---- */
  --font-display: "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.6rem, 1.7rem + 3.6vw, 5.2rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3.4rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2.1rem);
  --fs-h4: 1.3rem;
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;
  --fs-micro: 0.78rem;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 820px;
  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 14px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-s: 180ms;
  --dur-m: 360ms;
  --dur-l: 620ms;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(11, 13, 18, 0.04), 0 12px 28px -12px rgba(11, 13, 18, 0.14);
  --shadow-panel: 0 20px 60px -20px rgba(11, 13, 18, 0.35);
}

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ==========================================================================
   TYPE
   ========================================================================== */

.font-display { font-family: var(--font-display); }

h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
h3, .h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
h4, .h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); }
.small { font-size: var(--fs-small); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dim);
}
.eyebrow::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--accent);
}
.eyebrow.on-dark { color: var(--accent-bright); }

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-6); }

.section { padding: var(--sp-9) 0; }
.section-tight { padding: var(--sp-7) 0; }
.section-dark { background: var(--ink-950); color: var(--text-on-dark); }
.section-raised { background: var(--bg-raised); }
.section-tint { background: var(--paper-100); }

/* The "=" layout device: two paired panes joined by a vertical rule with a
   midpoint mark. A vertical divider (rather than fixed-position horizontal
   dashes) holds up regardless of how uneven the two columns' content height
   is — the previous horizontal-dash version drifted out of place whenever
   one side ran longer than the other. */
.pair {
  display: grid;
  gap: var(--sp-7);
  position: relative;
}
@media (min-width: 880px) {
  .pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .pair::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
    transform: translateX(-50%);
  }
  .pair::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
  }
}

.grid-2 { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  /* Hero gives its right column more room so the demo panel isn't capped
     to a plain 50/50 split — there was empty space next to it because the
     panel's own max-width was smaller than the column had room for. */
  .hero-grid.grid-2 { grid-template-columns: 0.82fr 1.18fr; }
}
@media (min-width: 980px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-s);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--paper-0); }
.btn-primary:hover { background: var(--accent-bright); transform: translateY(-1px); }

.btn-dark { background: var(--ink-950); color: var(--paper-0); }
.btn-dark:hover { background: var(--ink-800); transform: translateY(-1px); }

.btn-ghost { background: transparent; border-color: var(--ink-700); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dim); }

.btn-ghost-on-dark { background: transparent; border-color: var(--line-on-dark); color: var(--text-on-dark); }
.btn-ghost-on-dark:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

.btn-arrow { transition: transform var(--dur-s) var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--sp-6);
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--line); }

.card-index {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--accent-dim);
  margin-bottom: var(--sp-4);
}

/* ==========================================================================
   NAV
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 247, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-4) 0;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
}
.brand .mark { color: var(--accent); }

.nav-links { display: none; align-items: center; gap: var(--sp-6); }
@media (min-width: 980px) { .nav-links { display: flex; } }

.nav-item { position: relative; }
.nav-link {
  font-size: var(--fs-small);
  font-weight: 500;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.nav-link:hover { border-color: var(--accent); }

.nav-dropdown {
  position: absolute;
  /* Flush against the nav item — no gap. A gap here was a dead zone: the
     mouse left the hoverable area while crossing it, so the menu closed
     before the cursor ever reached it. The breathing room below comes from
     padding-top instead, which stays inside the hoverable box. */
  top: 100%;
  left: 50%;
  padding-top: calc(var(--sp-3) + 10px);
  transform: translate(-50%, 6px);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-panel);
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
  padding-bottom: var(--sp-3);
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-s);
  font-size: var(--fs-small);
  transition: background var(--dur-s) var(--ease);
}
.nav-dropdown a:hover { background: var(--paper-100); }
.nav-dropdown .dd-meta { color: var(--text-muted); font-size: var(--fs-micro); }

.nav-cta-group { display: flex; align-items: center; gap: var(--sp-5); }
.nav-phone { display: none; font-size: var(--fs-small); color: var(--text-muted); }
@media (min-width: 1180px) { .nav-phone { display: inline; } }

.nav-toggle {
  display: inline-flex;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: var(--sp-2) var(--sp-3);
}
@media (min-width: 980px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  padding: var(--sp-4) 0 var(--sp-6);
}
.mobile-nav.is-open { display: block; }
.mobile-nav details { border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
.mobile-nav summary { font-weight: 600; cursor: pointer; }
.mobile-nav .mobile-sub { padding: var(--sp-3) 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.mobile-nav > a { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-weight: 600; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer { background: var(--ink-950); color: var(--text-on-dark); padding: var(--sp-9) 0 var(--sp-6); }
.footer-grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; }
@media (min-width: 880px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid h4 { color: var(--text-on-dark); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-4); color: var(--ink-200); }
.footer-grid a, .footer-grid p { color: var(--text-on-dark-muted); font-size: var(--fs-small); line-height: 1.9; }
.footer-grid a:hover { color: var(--accent-bright); }
.footer-bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--ink-400);
}

/* ==========================================================================
   ICONS
   ========================================================================== */
   /* Hydrated at runtime by js/icons.js — see that file for the icon set. */

.icon { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; color: var(--accent-dim); }
.icon svg { width: 100%; height: 100%; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-m);
  background: var(--accent-soft);
  color: var(--accent-dim);
  flex-shrink: 0;
}
.icon-badge .icon { width: 24px; height: 24px; }
.icon-badge.on-dark { background: var(--accent-soft-on-dark); color: var(--accent-bright); }

.icon-badge-sm { width: 38px; height: 38px; border-radius: var(--radius-s); }
.icon-badge-sm .icon { width: 19px; height: 19px; }

.card-icon-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }

/* ==========================================================================
   DECORATIVE GRAPHICS — hero illustration, mockups, skyline band
   ========================================================================== */

.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; }

/* Hero "how it works" demo — plays continuously like real footage, not a
   click-through slideshow. No buttons, no segmented tabs to click: a single
   non-interactive scrubber line runs the full loop, and every scene has its
   own internal motion (typing, scanning, growing bars, pulsing nodes)
   instead of sitting there as a static illustration. main.js only toggles
   which scene is .is-active and which CSS animations are therefore running
   — there is nothing for a visitor to click.

   Layout note: scenes are TOP-aligned (not centered) inside a fixed-height
   body, with a flexible .scene-visual slot in the middle. Centering was the
   original bug — when one scene's content was taller than another's,
   centering it inside a fixed-height, overflow:hidden box clipped the
   label/caption. Top-aligning keeps every scene's label in the same spot
   regardless of how much the middle content varies. */
.hero-demo { max-width: 680px; width: 100%; box-shadow: var(--shadow-panel); }
.hero-demo .mockup-chrome { padding: var(--sp-4) var(--sp-5); }
.hero-demo .mockup-chrome span:last-child { margin-left: auto; font-weight: 600; color: var(--ink-600); }

/* Pausing on hover pauses every CSS animation in the panel at once —
   the scrubber, the Ken Burns drift, the typing dots, all of it — rather
   than each needing its own pause logic. */
.hero-demo.is-paused, .hero-demo.is-paused * { animation-play-state: paused !important; }

.hero-demo-scrubber {
  height: 3px;
  background: var(--line);
  overflow: hidden;
}
.hero-demo-scrubber-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: hero-scrubber-run 42000ms linear infinite;
}
@keyframes hero-scrubber-run {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hero-demo-body {
  position: relative;
  height: 460px;
  background: var(--paper-100);
  overflow: hidden;
  /* The whole panel sits inside the dark hero section, which sets light
     text as its default for everything below it. Anything in here that
     doesn't set its own color (e.g. plain <li>/<td> text) was silently
     inheriting that light color onto this light background — nearly
     invisible. Reset the baseline to dark text for this light panel; any
     element that explicitly sets its own color (the dark chat bubble, etc.)
     is unaffected. */
  color: var(--text);
}
.hero-demo-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  opacity: 0;
  transition: opacity 900ms var(--ease);
  pointer-events: none;
  overflow: hidden;
}
.hero-demo-scene.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-demo-scene .scene-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
}
.scene-visual {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  transform-origin: center;
}
/* Subtle continuous drift while a scene is on screen — the difference
   between a still picture and footage. Restarts fresh every time the scene
   becomes active (browsers restart a CSS animation when the rule re-applies
   after being removed). */
.hero-demo-scene.is-active .scene-visual {
  animation: hero-kenburns 4200ms ease-in-out forwards;
}
@keyframes hero-kenburns {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.035) translateY(-3px); }
}
.hero-demo-scene .scene-caption {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--sp-4);
  flex-shrink: 0;
}
.hero-demo-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--accent-soft);
  color: var(--accent-dim);
  border-radius: var(--radius-s);
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  white-space: nowrap;
}

.hero-demo-caption-bar {
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-demo-caption-bar .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: var(--sp-2);
  animation: hero-rec-pulse 1.4s ease-in-out infinite;
}
@keyframes hero-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---- Shared continuous-motion primitives, used across scenes ---- */

@keyframes hero-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.hero-demo-scene.is-active .stagger > * { opacity: 0; animation: hero-fade-up 0.5s var(--ease) forwards; }
.hero-demo-scene.is-active .stagger > *:nth-child(1) { animation-delay: 0.1s; }
.hero-demo-scene.is-active .stagger > *:nth-child(2) { animation-delay: 0.5s; }
.hero-demo-scene.is-active .stagger > *:nth-child(3) { animation-delay: 0.95s; }
.hero-demo-scene.is-active .stagger > *:nth-child(4) { animation-delay: 1.4s; }

@keyframes hero-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.blink-cursor { animation: hero-blink 1s steps(2) infinite; }

@keyframes hero-pulse-ring { 0% { transform: scale(0.75); opacity: 0.9; } 75%, 100% { transform: scale(1.9); opacity: 0; } }
.pulse-ring { animation: hero-pulse-ring 1.8s ease-out infinite; transform-origin: center; }

@keyframes hero-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(88px); opacity: 0; } }
.scan-beam { animation: hero-scan 2.6s ease-in-out infinite; }

@keyframes hero-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.grow-bar { transform-origin: bottom; animation: hero-grow-y 0.8s var(--ease) forwards; }

/* Pipeline diagram (Data Engineering / Cloud scenes) */
.pipeline-node { fill: var(--bg-raised); stroke: var(--ink-400); stroke-width: 1.5; }
.pipeline-flow { stroke: var(--accent); stroke-width: 2; fill: none; stroke-dasharray: 5 4; animation: pipeline-dash 1.6s linear infinite; }
@keyframes pipeline-dash { to { stroke-dashoffset: -36; } }

@media (prefers-reduced-motion: reduce) {
  .pipeline-flow,
  .hero-demo-scrubber-fill,
  .hero-demo-scene.is-active .scene-visual,
  .hero-demo-scene.is-active .stagger > *,
  .blink-cursor,
  .pulse-ring,
  .scan-beam,
  .grow-bar,
  .hero-demo-caption-bar .dot {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.mockup {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.mockup-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--paper-100);
}
/* Only the first three spans are traffic-light dots — the trailing label
   span must NOT get squashed to 8px or its text overflows and gets clipped
   by .mockup's overflow:hidden. (This was clipping every mockup label
   site-wide, not just the hero — fixed once here for all of them.) */
.mockup-chrome span:nth-child(-n+3) { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.mockup-chrome > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mockup-body { padding: var(--sp-5); }

.skyline-band { position: relative; overflow: hidden; background: var(--ink-950); }
.skyline-band svg { display: block; width: 100%; height: auto; }

.dot-grid-bg {
  background-image: radial-gradient(circle, rgba(194, 119, 43, 0.35) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* ==========================================================================
   PROCESS STEPPER
   ========================================================================== */

.stepper {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  position: relative;
}
@media (min-width: 880px) {
  .stepper { grid-template-columns: repeat(4, 1fr); }
  .stepper::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: var(--line);
    z-index: 0;
  }
}
.stepper-step { position: relative; z-index: 1; }
.stepper-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--accent);
  color: var(--accent-dim);
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: var(--sp-4);
}

/* ==========================================================================
   AI CHAT WIDGET
   ========================================================================== */
   /* Injected into the DOM by js/chat-widget.js on every page. Built custom —
      no third-party widget chrome — so it reads as part of the site itself. */

.etc-launcher {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ink-950);
  color: var(--paper-0);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-panel);
  transition: transform var(--dur-m) var(--ease), background var(--dur-m) var(--ease);
}
.etc-launcher:hover { transform: translateY(-2px); background: var(--ink-800); }
.etc-launcher svg { transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease); }
.etc-launcher .icon-close { position: absolute; opacity: 0; transform: rotate(-45deg); }
.etc-launcher.is-open .icon-chat { opacity: 0; transform: rotate(45deg); }
.etc-launcher.is-open .icon-close { opacity: 1; transform: rotate(0); }

.etc-panel {
  position: fixed;
  bottom: calc(var(--sp-6) + 76px);
  right: var(--sp-6);
  z-index: 199;
  width: min(380px, calc(100vw - 2 * var(--sp-5)));
  height: min(560px, calc(100vh - 160px));
  background: var(--bg-raised);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease);
}
.etc-panel.is-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }

.etc-panel-header {
  background: var(--ink-950);
  color: var(--paper-0);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.etc-panel-header .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); }
.etc-panel-header strong { font-family: var(--font-display); font-size: 1.05rem; }
.etc-panel-header span { font-size: var(--fs-micro); color: var(--ink-200); display: block; }

.etc-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--paper-100);
}
.etc-msg { max-width: 86%; padding: 0.7rem 0.95rem; border-radius: var(--radius-m); font-size: var(--fs-small); line-height: 1.55; }
.etc-msg.from-bot { background: var(--bg-raised); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 2px; }
.etc-msg.from-user { background: var(--ink-950); color: var(--paper-0); align-self: flex-end; border-bottom-right-radius: 2px; }
.etc-msg.from-error { background: var(--accent-soft); border: 1px solid var(--accent); align-self: flex-start; }
.etc-msg a { text-decoration: underline; }

.etc-typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 0.5rem 0.7rem; }
.etc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-400); animation: etc-bounce 1.1s infinite ease-in-out; }
.etc-typing span:nth-child(2) { animation-delay: 0.15s; }
.etc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes etc-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-4px); opacity: 1; } }

.etc-input-row {
  border-top: 1px solid var(--line);
  padding: var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  background: var(--bg-raised);
}
.etc-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0.6rem 0.8rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.35;
  min-height: 42px;
  max-height: 90px;
}
.etc-input-row textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.etc-send {
  background: var(--accent);
  color: var(--paper-0);
  border: none;
  border-radius: var(--radius-s);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-s) var(--ease);
  flex-shrink: 0;
}
.etc-send:hover { background: var(--accent-bright); }
.etc-send:disabled { background: var(--ink-200); cursor: not-allowed; }

@media (max-width: 480px) {
  .etc-panel { right: var(--sp-4); bottom: calc(var(--sp-5) + 72px); }
  .etc-launcher { right: var(--sp-4); bottom: var(--sp-4); }
}

/* ==========================================================================
   REVEAL-ON-SCROLL
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.on-dark-muted { color: var(--text-on-dark-muted); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.divider { height: 1px; background: var(--line); border: 0; margin: var(--sp-7) 0; }
.divider-on-dark { background: var(--line-on-dark); }
.tag {
  display: inline-flex;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-950);
  color: var(--paper-0);
  padding: var(--sp-3) var(--sp-5);
  z-index: 1000;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }