/* ============================================================
   Omnirise — Design System
   True-black ground, warm off-white text. Source Serif 4 (a
   formal, business-register serif) carries headlines; Source
   Sans 3 carries everything else. Monospace is reserved
   strictly for real sequence numbers — not a decorative
   texture across every label.
   Gradient accent is muted and deliberate, not neon.
   ============================================================ */

:root {
  --bg: #0b0a0a;
  --bg-raised: #141211;
  --bg-raised-2: #1a1817;
  --border: rgba(255, 250, 245, 0.08);
  --border-strong: rgba(255, 250, 245, 0.15);

  --text: #f5f2ee;
  --text-dim: #a8a29b;
  --text-faint: #6f6a64;

  --teal: #2a9d8f;
  --accent: #2a9d8f;
  --violet: #6f5aa8;
  --violet-2: #8a6fc2;
  --error: #e5484d;

  --gradient: linear-gradient(135deg, var(--teal) 0%, var(--violet) 100%);
  --gradient-text: linear-gradient(120deg, #3db3a4 0%, #a08bd6 100%);

  --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* iOS Safari's overscroll/rubber-band bounce paints the html element's
     background, not body's — without this it flashes white at the top/
     bottom edge of the page on this true-black site. */
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  /* Gives .bg-aurora's mobile absolute-positioning a containing block that
     grows with page content, instead of falling back to the viewport-sized
     initial containing block — without this, top:0/bottom:0 only stretches
     it across one screen height.
     No background here (html carries it instead): once body is
     position:relative, its own background paints as a positioned,
     z-index:auto layer — which paints AFTER .bg-aurora's negative z-index,
     completely covering the aurora canvas. Before html had its own
     background, body's background propagated up to the root canvas layer
     (painted first) instead, which is why this regression only appeared
     after both fixes landed together. */
  position: relative;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Visible keyboard focus states everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--violet);
  color: #0b0a0a;
}

/* ---------- Layout primitives ---------- */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  position: relative;
  isolation: isolate;
}

.hairline {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.eyebrow::before {
  content: '';
  width: 1.5em;
  height: 1px;
  background: var(--gradient);
  display: inline-block;
}

.eyebrow--line::before {
  width: 4.5em;
}

.gradient-text {
  background: linear-gradient(110deg, #3db3a4 20%, #a08bd6 42%, #ecdfff 50%, #a08bd6 58%, #3db3a4 80%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  animation: text-shimmer 6.5s ease-in-out infinite alternate;
}

@keyframes text-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.mono-num {
  font-family: var(--font-mono);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  position: relative;
  background: var(--bg-raised);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border-strong);
  animation: btn-glow 3.2s ease-in-out infinite;
}

@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(42, 157, 143, 0.45), 0 0 14px 1px rgba(42, 157, 143, 0.28); }
  50% { box-shadow: 0 0 0 1px rgba(111, 90, 168, 0.45), 0 0 16px 2px rgba(111, 90, 168, 0.32); }
}

.btn-primary.btn-lg {
  padding: 1.15rem 2.35rem;
  font-size: 0.92rem;
  border-width: 2px;
  animation-name: btn-glow-lg;
}

@keyframes btn-glow-lg {
  0%, 100% { box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.55), 0 0 22px 4px rgba(42, 157, 143, 0.38); }
  50% { box-shadow: 0 0 0 2px rgba(111, 90, 168, 0.55), 0 0 24px 5px rgba(111, 90, 168, 0.42); }
}

.btn-primary:hover {
  transform: translateY(-2px);
  border-color: transparent;
}

.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(var(--bg) 55%, transparent);
  padding: 1rem var(--gutter) 1.25rem;
}

.site-header .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--container);
  padding: 0 1.25rem 0 1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}

/* Blur lives on a decorative pseudo-element, not the .wrap element itself —
   backdrop-filter on .wrap would make it the containing block for
   .main-nav's position:fixed (mobile menu), collapsing that overlay. */
.site-header .wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}

@media (min-width: 861px) {
  .main-nav .btn-primary {
    margin-left: clamp(0.75rem, 2vw, 1.5rem);
    margin-right: 1.1rem;
    padding: 0.7rem 1.25rem;
    font-size: 0.76rem;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 600;
}

.logo-mark {
  width: 2.35rem;
  height: auto;
  object-fit: contain;
  display: inline-block;
}

.footer-col > .logo {
  display: inline-flex;
  margin-bottom: 1.1rem;
}

.logo-word {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

.logo-word .accent {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.1rem);
}

.main-nav a:not(.btn) {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  transition: color 0.25s var(--ease);
  position: relative;
  padding-bottom: 2px;
}

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

.main-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 2px;
  background: var(--gradient);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.nav-toggle svg {
  width: 18px;
  height: 18px;
}

/* ---------- Sticky mobile CTA bar ---------- */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  padding: 0.85rem var(--gutter) calc(0.85rem + env(safe-area-inset-bottom));
  background: rgba(17, 17, 17, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-strong);
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
}

.mobile-cta-bar.is-visible {
  transform: translateY(0);
}

@media (min-width: 641px) {
  .mobile-cta-bar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar {
    transition: none;
  }
}

/* ---------- External link affordance (target="_blank") ----------
   Mobile-only: on desktop this showed up next to every "Book a Call"
   button and footer link at once (nav, hero, footer, CTAs, Calendly
   panel), which read as clutter rather than a helpful cue. */
@media (max-width: 860px) {
  a[target="_blank"]::after {
    content: '';
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.4em;
    vertical-align: 0.02em;
    background: currentColor;
    opacity: 0.6;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .main-nav {
    position: fixed;
    inset: 100px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem var(--gutter);
    gap: 1.6rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    border-top: 1px solid var(--border);
  }

  .main-nav.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav a:not(.btn) {
    font-size: 1.15rem;
  }

  .main-nav .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Ambient background system (site-wide) ---------- */
.bg-aurora {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0.4;
  pointer-events: none;
  background: var(--bg);
  /* Forces its own compositor layer, which avoids the black-flash repaint
     glitch some mobile browsers show on fixed elements during scroll. */
  transform: translateZ(0);
  will-change: transform;
}

/* Mobile renders one static frame (see isMobileViewport in main.js) instead
   of animating, so there's no need to keep it pinned via position: fixed —
   and staying fixed is exactly what triggers iOS Safari's GPU layer-eviction
   black-flash bug on scroll. Un-fixing it here sidesteps that class of bug
   entirely instead of chasing it with more compositor hints.
   Height is set in px by main.js (syncMobileHeight), not stretched via
   top/bottom here — canvas is a replaced element, so top:0;bottom:0 with
   height:auto doesn't stretch it to the containing block like it would a
   plain div; it falls back to intrinsic aspect-ratio sizing instead. */
@media (max-width: 860px) {
  .bg-aurora {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: none;
    will-change: auto;
  }
}

main, .site-footer {
  position: relative;
  z-index: 1;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.hero-inner {
  width: 100%;
}

/* ---------- Hero word rotator ----------
   All words are pre-rendered and stacked in the same grid cell, so the
   track's intrinsic width is the max-content width of the WIDEST word
   ("garage door repair") — swapping which word is active never resizes the
   box or reflows anything after it (e.g. "businesses." staying put). */
.word-rotator {
  display: inline-grid;
  vertical-align: bottom;
  text-align: left;
}

.word-face {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.55em) rotate(2deg);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}

.word-face.is-active {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.word-face.is-leaving {
  opacity: 0;
  transform: translateY(-0.55em) rotate(-2deg);
}

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

.hero-solo {
  max-width: 46rem;
}

.hero h1 {
  font-size: clamp(2.6rem, 5.8vw, 4.2rem);
  max-width: 24ch;
  margin-top: 1.1rem;
  /* The shared h1 line-height (1.12) is too tight once the rotating word
     + " businesses." wraps to two lines — the second line crowds into the
     first line's descenders (g/p/j), clipping them. This only needs to be
     wider on the homepage hero since it's the only h1 with wrapping,
     variable-length content; other pages' headings are untouched. */
  line-height: 1.3;
}

.hero .lede {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--text-dim);
  max-width: 46ch;
  margin-top: 1.5rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ---------- Section headings ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
}

.section-head p {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 48ch;
}

/* ---------- Numbered row list (replaces card grids) ---------- */
.row-list {
  display: flex;
  flex-direction: column;
}

.row-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding: clamp(1.6rem, 3.5vw, 2.25rem) 0;
  border-top: 1px solid var(--border);
}

.row-list .row-item:last-child {
  border-bottom: 1px solid var(--border);
}

.row-item .num {
  color: var(--text);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.row-item .num svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (hover: hover) and (pointer: fine) {
  .row-item:hover .num {
    border-color: var(--accent);
    transform: scale(1.08);
  }
}

.row-item h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 500;
}

.row-item .row-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.row-item p {
  color: var(--text-dim);
  max-width: 58ch;
  font-size: 1.02rem;
  line-height: 1.7;
}

.row-item .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.tag {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

@media (max-width: 640px) {
  .row-item {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* ---------- Two column split ---------- */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* ---------- Full-bleed marquee (slow, elegant, edge-faded) ---------- */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(20, 18, 17, 0.45);
  padding: 1.35rem 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 46s linear infinite;
}

.marquee-track .marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-track span {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  padding: 0 1.9rem;
}

.marquee-track span::after {
  content: '◆';
  font-size: 0.5em;
  vertical-align: middle;
  color: var(--violet);
  margin-left: 3.8rem;
  opacity: 0.7;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

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

/* ---------- Fit / ICP comparison (asymmetric two-column, not a triad) ---------- */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.fit-col {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: clamp(1.5rem, 3vw, 2rem);
}

.fit-col.yes {
  border-color: rgba(42, 157, 143, 0.32);
}

.fit-col h3 {
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.fit-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.fit-col li {
  font-size: 1rem;
  color: var(--text-dim);
  display: flex;
  gap: 0.65rem;
  line-height: 1.6;
}

.fit-col li b {
  font-family: var(--font-body);
  font-weight: 700;
  flex-shrink: 0;
}

.fit-col.yes li b {
  color: var(--accent);
}

.fit-col.no li b {
  color: var(--text-faint);
}

@media (max-width: 700px) {
  .fit-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Scroll index rail (signature interaction, desktop only) ---------- */
.index-rail {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  font-family: var(--font-body);
}

.index-rail::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--border);
  z-index: -1;
}

.index-rail a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.3s var(--ease);
}

.index-rail .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.index-rail .label {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}

.index-rail a:hover .label,
.index-rail a.active .label {
  opacity: 1;
  transform: translateX(0);
}

.index-rail a:hover {
  color: var(--text-dim);
}

.index-rail a.active {
  color: var(--text);
}

.index-rail a.active .dot {
  background: var(--accent);
  transform: scale(1.7);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.18);
}

@media (max-width: 1360px) {
  .index-rail {
    display: none;
  }
}

/* ---------- Section rhythm variants (break the metronomic spacing) ---------- */
.section--tight {
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.section--feature {
  padding: clamp(5rem, 11vw, 9rem) 0;
}

.section--feature.section--end-tight {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Quote / callout ---------- */
.callout {
  border-left: 2px solid transparent;
  border-image: var(--gradient) 1;
  padding: 0.25rem 0 0.25rem 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--text);
  max-width: 50ch;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field input,
.field textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.95rem 1.1rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}

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

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: rgba(42, 157, 143, 0.05);
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}

.field-error {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--error);
  min-height: 1.1em;
}

.field.has-error input,
.field.has-error textarea {
  border-color: var(--error);
  background: rgba(229, 72, 77, 0.06);
}

.field.has-error input:focus,
.field.has-error textarea:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15);
}

.contact-form-card {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: rgba(20, 18, 17, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.8);
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field.full {
    grid-column: 1;
  }
}

/* honeypot */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 1rem;
}

/* ---------- Calendly panel ---------- */
.calendly-panel {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: rgba(20, 18, 17, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.calendly-panel h3 {
  font-size: 1.3rem;
}

.calendly-panel h3 + p {
  color: var(--text-dim);
  margin-top: 0.75rem;
}

.placeholder-box {
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-faint);
  line-height: 1.7;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding: clamp(4rem, 7vw, 6rem) 0 2.5rem;
  background: rgba(20, 18, 17, 0.35);
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient);
  opacity: 0.55;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer-col p {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 34ch;
}

.footer-col p + p {
  margin-top: 0.75rem;
}

.footer-col p a {
  color: var(--text-dim);
  transition: color 0.25s var(--ease);
}

.footer-col p a:hover {
  color: var(--accent);
}

.footer-email {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.copy-email-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.copy-email-btn svg {
  width: 0.8rem;
  height: 0.8rem;
}

@media (hover: hover) and (pointer: fine) {
  .copy-email-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
}

.copy-email-btn.is-copied {
  color: var(--accent);
  border-color: var(--accent);
}

.footer-col h4 {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 0.85rem;
  margin-bottom: 1.2rem;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 2px;
  background: var(--gradient);
}

.footer-social {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.footer-social a {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-col li {
  font-size: 0.92rem;
  color: var(--text-dim);
}

.footer-col a {
  display: inline-flex;
  font-size: 0.92rem;
  color: var(--text-dim);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer-col a:hover {
  color: var(--accent);
  transform: translateX(3px);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-faint);
}

@media (max-width: 760px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------- Page hero (non-home) ---------- */
.page-hero {
  padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 3.75rem);
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 3.9rem);
  margin-top: 1rem;
  max-width: 20ch;
}

.page-hero .lede {
  color: var(--text-dim);
  font-size: clamp(1.15rem, 2.1vw, 1.3rem);
  line-height: 1.6;
  max-width: 50ch;
  margin-top: 1.4rem;
}

.page-hero--center {
  border-bottom: none;
  text-align: center;
}

.page-hero--center .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-hero--center .lede {
  text-align: center;
}

.footer-bottom--plain {
  border-top: none;
  padding-top: 0;
}

/* ---------- Utility ---------- */
.mt-lg { margin-top: clamp(2rem, 5vw, 3.5rem); }
.mt-sm { margin-top: clamp(1.1rem, 2.5vw, 1.75rem); }
.mt-xs { margin-top: clamp(0.75rem, 2vw, 1.1rem); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[data-rail-section] { scroll-margin-top: 100px; }
.center-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  text-align: center;
}

/* Column stacking needs an explicit cross-axis alignment — without it,
   flex's default align-items:stretch left-anchors any child with a
   max-width (headline, lede-copy) instead of centering it. */
.center-cta--col {
  flex-direction: column;
  align-items: center;
}

.center-cta .lede-copy {
  max-width: 46ch;
}

.hero-ctas--center {
  justify-content: center;
}

/* ---------- Sample report card (illustrative — clearly labeled, not real client data) ---------- */
.report-card {
  position: relative;
  border-radius: 14px;
  background: rgba(20, 18, 17, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

/* animated conic gradient border glow */
.report-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: conic-gradient(from var(--ring, 0deg), rgba(42,157,143,0.7), rgba(111,90,168,0.15), rgba(138,111,194,0.7), rgba(42,157,143,0.15), rgba(42,157,143,0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: ring-spin 9s linear infinite;
}

@property --ring {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes ring-spin {
  to { --ring: 360deg; }
}

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

/* animated area chart (reused inside .dashboard-chart-card) */
.spark-area {
  opacity: 0;
  transition: opacity 1.2s ease 0.7s;
}

.spark-path {
  fill: none;
  stroke: url(#sparkStroke);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.8s var(--ease) 0.2s;
}

.spark-dot {
  opacity: 0;
  transition: opacity 0.5s ease 1.7s;
}

.report-card.is-visible .spark-path,
html:not(.js) .spark-path {
  stroke-dashoffset: 0;
}

.report-card.is-visible .spark-area,
html:not(.js) .spark-area {
  opacity: 1;
}

.report-card.is-visible .spark-dot,
html:not(.js) .spark-dot {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .spark-path { stroke-dashoffset: 0; transition: none; }
  .spark-area { opacity: 1; transition: none; }
  .spark-dot { opacity: 1; transition: none; }
}

.dashboard-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.dashboard-chrome-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dashboard-chrome-dot--red { background: #e0605a; }
.dashboard-chrome-dot--yellow { background: #e8c052; }
.dashboard-chrome-dot--green { background: #5fb865; }

.dashboard-chrome-url {
  margin-left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}

.report-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--border);
}

.report-card-head h3 {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
}

.dashboard-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5fd3c3;
  margin-right: 0.65rem;
  animation: live-pulse 2s ease-out infinite;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(42, 157, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(42, 157, 143, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-live-dot { animation: none; }
}

.report-tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
}

/* ---------- Dashboard mock (stat cards, charts, live table) ---------- */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.dashboard-stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}

.dashboard-stat .label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.dashboard-stat .value {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--text);
  margin-top: 0.35rem;
}

.dashboard-stat .delta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  margin-top: 0.55rem;
}

.dashboard-stat .delta.up,
.dashboard-chart-head .delta.up {
  color: #5fd3c3;
}

.dashboard-stat .delta.down,
.dashboard-chart-head .delta.down {
  color: #b9a3e6;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.dashboard-chart-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
}

.dashboard-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}

.dashboard-chart-head h4 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.dashboard-chart-head .delta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.dashboard-bar-chart,
.dashboard-line-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.dashboard-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.9s var(--ease);
}

.dashboard-bar:nth-child(2) { transition-delay: 0.06s; }
.dashboard-bar:nth-child(3) { transition-delay: 0.12s; }
.dashboard-bar:nth-child(4) { transition-delay: 0.18s; }
.dashboard-bar:nth-child(5) { transition-delay: 0.24s; }
.dashboard-bar:nth-child(6) { transition-delay: 0.3s; }
.dashboard-bar:nth-child(7) { transition-delay: 0.36s; }

.report-card.is-visible .dashboard-bar,
html:not(.js) .dashboard-bar {
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-bar { transform: scaleY(1); transition: none; }
}

.dashboard-chart-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-faint);
  margin-top: 0.6rem;
  padding: 0 2px;
}

.dashboard-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.25rem 0.5rem;
}

.dashboard-table-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.dashboard-table-head h4 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.dashboard-table-caption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
}

.dashboard-table-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-dim);
}

.dashboard-table-row--head {
  border-top: none;
  padding-bottom: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.dashboard-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

.dashboard-status--new {
  color: #b9a3e6;
  background: rgba(111, 90, 168, 0.12);
}

.dashboard-status--contacted {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
}

.dashboard-status--booked {
  color: #5fd3c3;
  background: rgba(42, 157, 143, 0.12);
}

.report-chart-caption {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--text-faint);
  margin-top: 0.75rem;
}

@media (max-width: 760px) {
  .dashboard-stats {
    grid-template-columns: 1fr 1fr;
    row-gap: 1.25rem;
  }
  .dashboard-charts {
    grid-template-columns: 1fr;
  }
  .dashboard-table-row {
    grid-template-columns: 1.2fr 1fr 0.8fr;
    font-size: 0.82rem;
  }
}

/* ---------- Scroll reveal (energetic focus-in on entry) ----------
   Hidden state is gated on html.js so content is never lost if
   JS fails to load. JS may set an inline transition-delay from
   data-delay for stagger. Blur+scale on top of the fade/slide gives
   entrances a "snapping into focus" feel instead of a flat fade-up. */
.reveal {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}

html.js .reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  filter: blur(6px);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Circular badge markers pop in with a touch of overshoot once their
   section is visible, instead of just riding the parent's fade. */
html.js .reveal.is-visible .num,
html.js .reveal.is-visible .arrow,
html.js .reveal.is-visible .check-icon,
html.js .reveal.is-visible .testimonial-avatar {
  animation: badge-pop 0.6s var(--ease) 0.15s both;
}

@keyframes badge-pop {
  0% { transform: scale(0.5); opacity: 0; }
  65% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- Hero entrance (masked line reveal + stagger) ---------- */
.hero-line {
  display: block;
  overflow: hidden;
  /* Deep enough for descenders (g/p/j/y) in the rotating words — e.g.
     "plumbing", "landscaping", "garage door repair" — not just the static
     "businesses." text this was originally sized for. Measured descent on
     Source Serif 4 italic is ~0.24em, but different browsers/engines hint
     and render glyphs slightly differently, so this is set well above the
     measured value rather than the exact minimum. margin-bottom cancels
     the padding out of the layout so surrounding spacing is unaffected. */
  padding-bottom: 0.5em;
  margin-bottom: -0.5em;
}

.hero-line > span {
  display: inline-block;
}

html.js .hero-line > span {
  transform: translateY(112%);
  animation: line-up 1.1s var(--ease) forwards;
}

/* This line's content wraps unpredictably depending on the active rotating
   word ("HVAC businesses." vs "garage door repair" / "businesses." on its
   own wrapped second line). The translateY slide-reveal above works for
   fixed single-line text, but for variable, sometimes-two-line content the
   percentage-based transform travels much farther, and the overflow:hidden
   mask catches the not-yet-arrived second line mid-slide — which looks
   exactly like sliced-off letters. A plain fade never has this problem
   since nothing physically moves through the clip boundary. */
html.js .hero-line:nth-child(2) > span {
  animation-name: line-fade;
  animation-delay: 0.12s;
  transform: none;
}

@keyframes line-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes line-up {
  to { transform: translateY(0); }
}

html.js .enter {
  opacity: 0;
  transform: translateY(20px);
  animation: rise-in 0.95s var(--ease) forwards;
}

html.js .enter-1 { animation-delay: 0.05s; }
html.js .enter-2 { animation-delay: 0.35s; }
html.js .enter-3 { animation-delay: 0.5s; }
html.js .enter-4 { animation-delay: 0.65s; }

@keyframes rise-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll progress (2px gradient line under the header) ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--gradient);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
}

/* ---------- Animated nav underline ---------- */
.main-nav a:not(.btn)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.main-nav a:not(.btn):hover::before {
  transform: scaleX(1);
}

/* ---------- 3D tilt (subtle, pointer-driven, JS sets the vars) ---------- */
.tilt {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.25s ease-out;
  will-change: transform;
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  border-top: 1px solid var(--border);
  max-width: 46rem;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 500;
  text-align: left;
  padding: 1.4rem 0;
  transition: color 0.25s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .faq-q:hover {
    color: var(--violet-2);
  }
}

.faq-q .faq-icon {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.3s var(--ease), transform 0.45s var(--ease);
}

.faq-q .faq-icon::before,
.faq-q .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--text-dim);
  transition: background 0.3s var(--ease);
}

.faq-q .faq-icon::before { width: 9px; height: 1px; }
.faq-q .faq-icon::after { width: 1px; height: 9px; }

.faq-item.open .faq-q .faq-icon {
  transform: rotate(135deg);
  border-color: var(--accent);
}

.faq-item.open .faq-q .faq-icon::before,
.faq-item.open .faq-q .faq-icon::after {
  background: var(--accent);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a > div {
  overflow: hidden;
}

.faq-a p {
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 58ch;
  padding-bottom: 1.4rem;
}

/* ---------- Timeline (real temporal sequence) ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0.3rem;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--teal), var(--violet), transparent);
  opacity: 0.4;
}

.timeline-step {
  padding-top: 1.5rem;
  position: relative;
}

.timeline-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gradient);
}

.timeline-step .when {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.timeline-step h3 {
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

.timeline-step p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-top: 0.5rem;
}

@media (max-width: 820px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .timeline::before {
    top: 0;
    bottom: 0;
    left: 3px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--teal), var(--violet), transparent);
  }
  .timeline-step {
    padding-top: 0;
    padding-left: 1.5rem;
  }
}

/* ---------- Next steps (contact) ---------- */
.next-steps {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.next-steps li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.94rem;
  color: var(--text-dim);
}

.next-steps li b {
  color: var(--text);
  font-weight: 600;
}

.next-steps .step-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  flex-shrink: 0;
}

/* ---------- Sub-list (services detail rows, replaces inline styles) ---------- */
.sub-list {
  display: flex;
  flex-direction: column;
}

.sub-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.9rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}

.sub-list .sub-item:last-child {
  border-bottom: 1px solid var(--border);
}

.sub-item .arrow {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 0.85rem;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .sub-item:hover .arrow {
    border-color: var(--accent);
    transform: scale(1.08) translateX(2px);
  }
}

.sub-item h3 {
  font-size: 1.1rem;
}

.sub-item p {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.65;
  margin-top: 0.5rem;
  max-width: 52ch;
}

/* ---------- Shared type utilities (replace scattered inline styles) ---------- */
.h2-split {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

.cta-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  max-width: 24ch;
}

.lede-copy {
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1.75;
}

.h2-split + .lede-copy {
  margin-top: 1rem;
}

.lede-copy + .lede-copy {
  margin-top: 1.25rem;
}

/* ---------- Check grid (capability list, side-by-side cards) ---------- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.check-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 1.85rem);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .check-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
  }
}

.check-card .check-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 1.1rem;
}

.check-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.check-card p {
  color: var(--text-dim);
  font-size: 0.96rem;
  line-height: 1.6;
}

@media (max-width: 780px) {
  .check-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Flow strip (sequential horizontal handoff) ---------- */
.flow-strip {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.flow-step {
  flex: 1;
  border-top: 2px solid var(--accent);
  padding-top: 1.25rem;
}

.flow-step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.flow-step p {
  color: var(--text-dim);
  font-size: 0.96rem;
  line-height: 1.6;
}

.flow-arrow {
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 1.3rem;
  margin-top: 0.9rem;
}

@media (max-width: 780px) {
  .flow-strip {
    flex-direction: column;
  }
  .flow-arrow {
    transform: rotate(90deg);
    margin: -0.5rem 0 -0.25rem;
  }
}

/* ---------- Inline highlight (breaks up long paragraphs) ---------- */
.hl {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

@supports not (background-clip: text) {
  .hl {
    background: none;
    color: var(--text);
  }
}

/* ---------- Testimonials (vertical auto-scrolling columns) ---------- */
.testimonial-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  height: 640px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

.testimonial-col {
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation-name: testimonial-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.testimonial-col--mid .testimonial-track {
  animation-direction: reverse;
}

/* Real hover devices only — on touch, :hover latches on tap and never
   clears (there's no pointer-leave event once you lift your finger), so
   the column would pause forever. Touch gets an explicit JS-driven
   press/release pause instead (see .testimonial-col.is-paused, main.js). */
@media (hover: hover) and (pointer: fine) {
  .testimonial-col:hover .testimonial-track {
    animation-play-state: paused;
  }
}

.testimonial-col:focus-within .testimonial-track,
.testimonial-col.is-paused .testimonial-track {
  animation-play-state: paused;
}

@keyframes testimonial-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.testimonial-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  background: rgba(20, 18, 17, 0.4);
}

.testimonial-card p {
  color: var(--text-dim);
  font-size: 0.94rem;
  line-height: 1.65;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.testimonial-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
  background: rgba(42, 157, 143, 0.06);
}

.testimonial-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 900px) {
  .testimonial-columns {
    grid-template-columns: repeat(2, 1fr);
    height: 560px;
  }
  .testimonial-col--last {
    display: none;
  }
}

@media (max-width: 620px) {
  .testimonial-columns {
    grid-template-columns: 1fr;
    height: 480px;
  }
  .testimonial-col--mid {
    display: none;
  }
}

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

/* ---------- Founder grid (founders page) ---------- */
.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 46rem;
}

.founder-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(1.75rem, 4vw, 2.25rem);
}

.founder-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(42, 157, 143, 0.06);
  margin-bottom: 1.1rem;
}

.founder-card h3 {
  font-size: 1.15rem;
}

.founder-role {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.3rem;
  margin-bottom: 0.9rem;
}

.founder-card p {
  color: var(--text-dim);
  font-size: 0.96rem;
  line-height: 1.65;
}

@media (max-width: 700px) {
  .founder-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Drifting gradient orbs (ambient decoration behind text) ----------
   Purely decorative, isolated to their own .section's stacking context
   (see isolation:isolate above) so z-index:-1 never fights the sticky
   header, scroll-progress bar, or aurora background. */
.float-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(56px);
  pointer-events: none;
  opacity: 0.55;
  animation: orb-drift 24s ease-in-out infinite alternate;
}

.float-orb--teal {
  background: radial-gradient(circle, rgba(42, 157, 143, 0.6), rgba(42, 157, 143, 0) 70%);
}

.float-orb--violet {
  background: radial-gradient(circle, rgba(111, 90, 168, 0.55), rgba(111, 90, 168, 0) 70%);
}

.float-orb--sm { width: 220px; height: 220px; }
.float-orb--md { width: 320px; height: 320px; }
.float-orb--lg { width: 460px; height: 460px; }

.float-orb--tr { top: -4rem; right: -6rem; }
.float-orb--tl { top: -3rem; left: -5rem; }
.float-orb--br { bottom: -5rem; right: -6rem; }
.float-orb--bl { bottom: -4rem; left: -6rem; }

@keyframes orb-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(28px, -22px) scale(1.08); }
  100% { transform: translate(-22px, 18px) scale(0.95); }
}

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

@media (max-width: 640px) {
  .float-orb { display: none; }
}

/* ---------- Animated flow diagram (How it works centerpiece) ---------- */
.flow-diagram {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.flow-diagram svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

.flow-diagram-path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 2;
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  transition: stroke-dashoffset 1.8s var(--ease) 0.2s;
}

html.js .reveal.is-visible .flow-diagram-path,
html:not(.js) .flow-diagram-path {
  stroke-dashoffset: 0;
}

.flow-diagram-node {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2;
}

.flow-diagram-pulse {
  fill: var(--accent);
}

.flow-diagram-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (prefers-reduced-motion: reduce) {
  .flow-diagram-path {
    stroke-dashoffset: 0;
    transition: none;
  }
}

@media (max-width: 640px) {
  .flow-diagram-labels span {
    font-size: 0.62rem;
  }
}

/* ---------- Marquee trade icons ---------- */
.marquee-track svg {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 0.5rem;
  color: var(--accent);
  opacity: 0.85;
}

/* ---------- Service-area map graphic ---------- */
.geo-graphic {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  max-width: 22rem;
}

.geo-graphic svg {
  width: 100%;
  height: auto;
  display: block;
}

.geo-graphic-caption {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
}

.geo-graphic-caption span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.geo-graphic-caption .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ---------- Confetti burst (thank-you page only) ---------- */
.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  pointer-events: none;
}

/* ---------- Page entrance fade ---------- */
html.js body {
  animation: page-in 0.06s ease-out;
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}