/* ============================================================
   Fonts: self-hosted (SIL OFL), latin subset, variable weight
   ============================================================ */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   COVENIX — Design Tokens
   ============================================================ */
:root {
  --color-bg: #05070c;
  --color-bg-alt: #080b13;
  --color-surface: #0e1220;
  --color-surface-2: #121729;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text: #f4f6fa;
  --color-text-muted: #9aa4b8;
  --color-text-faint: #8089a1; /* was #727b95: measured 4.04:1 on the footer glow; this is 4.87:1 worst case */

  --color-amber: #ff9a52;
  --color-amber-soft: rgba(255, 154, 82, 0.14);
  --color-blue: #5b9dff;
  --color-blue-soft: rgba(91, 157, 255, 0.14);

  --grad-brand: linear-gradient(135deg, var(--color-amber), var(--color-blue));

  --font-heading: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* settles without overshoot; name kept for the rules that use it */
  --ease-breath: cubic-bezier(0.45, 0, 0.15, 1);  /* slow to gather, quick through the middle, slow to release */
  --dur-fast: 180ms;
  --dur-med: 380ms;
  --dur-slow: 700ms;

  --container-w: 1160px;
  --header-h: 76px;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container-narrow { max-width: 760px; }

.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  z-index: 200;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

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

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Background decor (stars + aurora)
   ============================================================ */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-decor::after {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}
.stars {
  position: absolute;
  inset: -10% -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 80% 10%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 30% 65%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 45% 85%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.3), transparent);
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: 0.7;
}
.aurora {
  position: absolute;
  left: 50%;
  top: -260px;
  width: 1100px;
  height: 620px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 25% 60%, rgba(255,154,82,0.30), transparent 55%),
    radial-gradient(circle at 75% 60%, rgba(91,157,255,0.30), transparent 55%);
  filter: blur(70px);
  opacity: 0.6;
  animation: aurora-drift-a 19s ease-in-out infinite alternate;
}
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.aurora::before {
  left: 8%;
  top: 10%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(255,154,82,0.22), transparent 65%);
  animation: aurora-drift-b 24s ease-in-out infinite alternate;
}
.aurora::after {
  right: 6%;
  top: 4%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(91,157,255,0.22), transparent 65%);
  animation: aurora-drift-c 27s ease-in-out infinite alternate;
}
@keyframes aurora-drift-a {
  from { transform: translateX(-52%) translateY(0); opacity: 0.5; }
  to   { transform: translateX(-48%) translateY(20px); opacity: 0.7; }
}
@keyframes aurora-drift-b {
  from { transform: translate(0, 0) scale(1); opacity: 0.75; }
  to   { transform: translate(24px, -16px) scale(1.08); opacity: 1; }
}
@keyframes aurora-drift-c {
  from { transform: translate(0, 0) scale(1.05); opacity: 0.8; }
  to   { transform: translate(-30px, 22px) scale(0.96); opacity: 1; }
}

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(5, 7, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.brand-word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.main-nav a {
  font-size: 0.94rem;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
  padding: var(--space-1) 0;
}
.main-nav a:hover { color: var(--color-text); }
/* Header navigation (Process, Services, About, FAQ, Pricing): same lit treatment as the footer. Labels are
   lit at rest with a soft glow and a short gradient rule with its own light underneath; on hover the label
   brightens and lifts a little and its rule draws out to the full label width. Glow is text-shadow /
   box-shadow only. Desktop nav only (the mobile menu keeps its plain list). */
.main-nav a {
  position: relative;
  color: var(--color-text);
  text-shadow: 0 0 12px rgba(255, 154, 82, 0.35);
  transition: color var(--dur-fast) var(--ease-out), text-shadow 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.main-nav a:nth-child(even) { text-shadow: 0 0 12px rgba(91, 157, 255, 0.4); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 8px rgba(255, 154, 82, 0.45), 0 0 14px rgba(91, 157, 255, 0.3);
  transition: width 650ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.main-nav a:focus-visible::after { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover {
    color: #fff;
    transform: translateY(-1px);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3), 0 0 18px rgba(255, 154, 82, 0.8);
  }
  .main-nav a:nth-child(even):hover { text-shadow: 0 0 6px rgba(255, 255, 255, 0.3), 0 0 18px rgba(91, 157, 255, 0.85); }
  .main-nav a:hover::after { width: 100%; box-shadow: 0 0 12px rgba(255, 154, 82, 0.75), 0 0 22px rgba(91, 157, 255, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav a, .main-nav a::after { transition: none; }
  .main-nav a:hover { transform: none; }
}
html.motion-paused .main-nav a, html.motion-paused .main-nav a::after { transition: none; }
html.motion-paused .main-nav a:hover { transform: none; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--color-surface); }

.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-5);
  background: rgba(5, 7, 12, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.mobile-nav a { padding: var(--space-2) 0; font-size: 1rem; min-height: 44px; display: flex; align-items: center; }
.mobile-nav .btn { margin-top: var(--space-2); }
.mobile-nav.is-open { display: flex; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 320ms var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  min-height: 44px;
  padding-inline: var(--space-4);
}
.btn svg { flex-shrink: 0; transition: transform 320ms var(--ease-spring); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-brand);
  color: #0b0e17;
  box-shadow: 0 8px 24px -8px rgba(255, 154, 82, 0.45);
}
.btn-primary:hover { box-shadow: 0 10px 30px -6px rgba(91, 157, 255, 0.5); }

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.btn-ghost:hover { background: var(--color-surface-2); border-color: rgba(255,255,255,0.28); }

.btn-sm { min-height: 38px; padding-inline: var(--space-3); font-size: 0.86rem; }
.btn-lg { min-height: 52px; padding-inline: var(--space-5); font-size: 1rem; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding-top: clamp(80px, 14vw, 150px);
  padding-bottom: clamp(60px, 10vw, 110px);
  text-align: center;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
}
.hero-orb {
  position: absolute;
  left: 50%;
  bottom: -320px;
  width: 900px;
  height: 500px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(91,157,255,0.28), rgba(255,154,82,0.18) 45%, transparent 72%);
  filter: blur(10px);
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.03);
  margin-bottom: var(--space-4);
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-amber);
  box-shadow: 0 0 8px 1px rgba(255,154,82,0.7);
}
.section > .container > .eyebrow,
.about-copy > .eyebrow { display: inline-flex; }

.hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  margin-bottom: var(--space-4);
}
.hero-def {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--color-border-strong);
  text-align: left;
}

.hero-sub {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.hero-note {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================================
   Sections
   ============================================================ */
.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 110px);
}
.section-alt {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015) 20%, rgba(255,255,255,0.015) 80%, transparent);
  border-block: 1px solid var(--color-border);
}
.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  max-width: 620px;
}
.section-lede {
  max-width: 560px;
  font-size: 1.05rem;
  margin-bottom: var(--space-6);
}

.grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Cursor-reactive spotlight — desktop, hover-capable pointers only.
   Hover-lift and scroll-reveal both drive transform via separate custom
   properties so neither state's specificity can silently clobber the other. */
.spotlight {
  --tf-reveal: translateY(0); /* never `none`: it would make the combined transform invalid and drop the hover lift */
  --tf-hover: translateY(0);
  transform: var(--tf-reveal) var(--tf-hover);
  transition: border-color var(--dur-med) var(--ease-out), transform 480ms var(--ease-out);
}
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .spotlight:hover::after { opacity: 1; }
}

/* Pain cards */
.pain-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.pain-card:hover { border-color: var(--color-border-strong); --tf-hover: translateY(-4px); }
.pain-icon { position: relative; z-index: 1; color: var(--color-amber); margin-bottom: var(--space-3); }
.pain-card h3 { position: relative; z-index: 1; font-size: 1.08rem; margin-bottom: var(--space-2); }
.pain-card p { position: relative; z-index: 1; margin: 0; font-size: 0.94rem; }

/* Process */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: 0;
}
.process-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.process-step:hover { border-color: var(--color-border-strong); --tf-hover: translateY(-4px); }
.process-step::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,154,82,0.08), transparent 55%);
  pointer-events: none;
}
.process-num {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}
.process-body { position: relative; z-index: 1; }
.process-body h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.process-body p { margin: 0; font-size: 0.92rem; }

/* Feature cards */
.feature-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  overflow: hidden;
}
.feature-card:hover { border-color: var(--color-border-strong); --tf-hover: translateY(-4px); }
.feature-orb {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
}
.feature-orb-a { background: var(--color-amber); }
.feature-orb-b { background: var(--color-blue); }
.feature-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border-strong);
  color: var(--color-amber);
  margin-bottom: var(--space-4);
}
.feature-card h3 { position: relative; z-index: 1; font-size: 1.25rem; }
.feature-card p { position: relative; z-index: 1; margin: 0; }

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}
.check-list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.check-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-text);
  font-size: 0.96rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--grad-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}

.about-visual {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit-core {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd3ac, var(--color-amber) 40%, var(--color-blue) 100%);
  box-shadow: 0 0 60px 10px rgba(255,154,82,0.35);
}
.orbit-ring {
  position: absolute;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
}
.orbit-ring-1 { width: 220px; height: 220px; animation: spin 26s linear infinite; }
.orbit-ring-2 { width: 320px; height: 320px; border-color: var(--color-border); animation: spin 40s linear infinite reverse; }
.orbit-ring-1::before, .orbit-ring-2::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue);
  top: -4px;
  left: 50%;
  box-shadow: 0 0 10px 2px rgba(91,157,255,0.7);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* CTA banner */
.cta-banner { padding-block: clamp(64px, 10vw, 100px); }
.cta-banner-inner {
  text-align: center;
  background: linear-gradient(160deg, rgba(255,154,82,0.12), rgba(91,157,255,0.12));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
}
.cta-banner-inner h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: var(--space-2); }
.cta-banner-inner p { max-width: 480px; margin-inline: auto; margin-bottom: var(--space-5); }

/* FAQ Accordion */
.accordion { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.accordion-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  text-align: left;
  min-height: 44px;
}
.accordion-trigger .chev { color: var(--color-text-muted); transition: transform var(--dur-med) var(--ease-out); flex-shrink: 0; }
.accordion-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--color-amber); }

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-panel-inner p {
  padding: 0 var(--space-5) var(--space-4);
  margin: 0;
  font-size: 0.95rem;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-7) var(--space-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
.footer-brand p { font-size: 0.9rem; margin-block: var(--space-3); }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.social-link:hover { color: var(--color-text); border-color: var(--color-blue); }

.footer-col h2 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
/* Footer column headings (Company, Guides, Contact) are lit at rest: a soft glow on the label and a short
   gradient rule with its own light beneath it, which grows to the label's width when the pointer is on the
   column. Glow is text-shadow / box-shadow only. Brighter text also lifts the heading's contrast. */
.footer-col h2 {
  position: relative;
  width: fit-content;
  padding-bottom: 9px;
  color: var(--color-text);
  text-shadow: 0 0 12px rgba(255, 154, 82, 0.45);
  transition: text-shadow 500ms var(--ease-out), color var(--dur-med) var(--ease-out);
}
.footer-col:nth-child(3) h2 { text-shadow: 0 0 12px rgba(91, 157, 255, 0.5); }
.footer-col h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(255, 154, 82, 0.5), 0 0 16px rgba(91, 157, 255, 0.35);
  transition: width 700ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-col:hover h2 { color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 154, 82, 0.8); }
  .footer-col:nth-child(3):hover h2 { text-shadow: 0 0 6px rgba(255, 255, 255, 0.3), 0 0 20px rgba(91, 157, 255, 0.85); }
  .footer-col:hover h2::after { width: 100%; box-shadow: 0 0 14px rgba(255, 154, 82, 0.75), 0 0 26px rgba(91, 157, 255, 0.55); }
}
@media (prefers-reduced-motion: reduce) { .footer-col h2, .footer-col h2::after { transition: none; } }
html.motion-paused .footer-col h2, html.motion-paused .footer-col h2::after { transition: none; }
.footer-col a, .footer-col span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  padding-block: var(--space-1);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--color-text); }
.footer-address { cursor: default; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  color: var(--color-text-faint);
}
.footer-bottom p { margin: 0; }

/* ============================================================
   Scroll reveal
   Armed only below the fold by ScrollReveal, so everything is visible
   by default when scripts fail. Three roles instead of one recipe:
   text fades, headings come into focus, cards rise. (See the Motion layer at
   the end of this file for the reduced-motion versions.)
   ============================================================ */
.reveal {
  transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}
.reveal.is-armed:not(.is-visible) { opacity: 0; }

/* Headings come into focus (blur > sharp) with a short rise. Never clip the element being observed:
   IntersectionObserver treats a fully clipped target as not visible, so it would never reveal. */
.section-title.reveal.is-armed:not(.is-visible) {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.25em);
}

.spotlight.reveal { transition: opacity 800ms var(--ease-out), transform 600ms var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.spotlight.reveal.is-armed:not(.is-visible) { --tf-reveal: translateY(14px); }

/* ============================================================
   Book a Diagnostic modal
   ============================================================ */
.book-modal {
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  width: min(480px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 48px));
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.book-modal.is-open { opacity: 1; transform: translateY(0) scale(1); }
.book-modal::backdrop {
  background: rgba(5, 7, 12, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.book-modal-inner {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  overflow-y: auto;
  max-height: min(680px, calc(100vh - 48px));
}
.book-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.book-modal-close:hover { background: var(--color-surface-2); color: var(--color-text); }

.book-modal-title { font-size: 1.5rem; margin-bottom: var(--space-2); }
.book-modal-sub { font-size: 0.94rem; margin-bottom: var(--space-5); }

.hp-field {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field { margin-bottom: var(--space-4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.field .req { color: var(--color-amber); }
.field .optional { font-weight: 400; color: var(--color-text-faint); }

.field input, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-text-faint) /* 3:1+ field boundary (WCAG 1.4.11) */;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.94rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 84px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-faint); }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
  border-color: var(--color-blue);
}

.field-error {
  display: none;
  margin: var(--space-2) 0 0;
  font-size: 0.82rem;
  color: #ff8080;
}
.field.has-error input,
.field.has-error textarea {
  border-color: #ef4444;
}
.field.has-error .field-error { display: block; }

.book-submit { width: 100%; margin-top: var(--space-2); }
.book-submit[disabled] { opacity: 0.65; cursor: default; transform: none; }
.book-privacy-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin: var(--space-3) 0 0;
}

.book-success { text-align: center; padding-top: var(--space-3); }
.book-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-success .btn { width: 100%; margin-top: var(--space-3); }

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

/* ============================================================
   Chat widget
   ============================================================ */
.chat-launcher {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 150;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-brand);
  color: #0b0e17;
  cursor: pointer;
  box-shadow: 0 10px 30px -6px rgba(255,154,82,0.5);
  transition: transform var(--dur-fast) var(--ease-out);
}
.chat-launcher:hover { transform: scale(1.06); }
.chat-launcher .icon-close { display: none; }
.chat-launcher.is-open .icon-chat { display: none; }
.chat-launcher.is-open .icon-close { display: block; }

.chat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--color-bg);
}

.chat-window {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + 76px);
  z-index: 150;
  width: min(370px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  visibility: hidden; /* takes the closed panel out of the tab order, matching its aria-hidden */
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.chat-window.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: rgba(255,255,255,0.02);
}
.chat-header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-header-title { font-family: var(--font-heading); font-weight: 600; font-size: 0.94rem; }
.chat-header-sub { font-size: 0.78rem; color: var(--color-text-faint); display: flex; align-items: center; gap: 5px; }
.chat-header-sub::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  scrollbar-width: thin;
}
.chat-msg { display: flex; max-width: 88%; }
.chat-msg-bot { align-self: flex-start; }
.chat-msg-user { align-self: flex-end; }
.chat-bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.89rem;
  line-height: 1.5;
}
.chat-msg-bot .chat-bubble {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
}
.chat-msg-user .chat-bubble {
  background: var(--grad-brand);
  color: #0b0e17;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}
.chat-suggestion-btn {
  border: 1px solid var(--color-border-strong);
  background: rgba(255,255,255,0.03);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  min-height: 32px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chat-suggestion-btn:hover { color: var(--color-text); border-color: var(--color-blue); }

.chat-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.chat-input {
  flex: 1;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-text-faint);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.chat-input:focus { outline: 2px solid var(--color-blue); outline-offset: 1px; }
.chat-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-brand);
  color: #0b0e17;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.chat-send:hover { transform: scale(1.06); }

.chat-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-text-faint);
  animation: chat-typing-bounce 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-visual { height: 260px; order: -1; }
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-sm { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .hero { padding-top: 96px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .chat-window {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 88px;
  }
  .chat-launcher { right: 16px; bottom: 16px; }
}

/* ============================================================
   Motion - authored layer
   One focal moment (the hero headline), quiet support around it,
   scroll-driven motion only where order carries meaning (the
   process), and an intentional reduced-motion path at the end.
   Every rule keeps content visible by default: animations use a
   `backwards` fill, so a feature that fails to run leaves the
   final, readable state. Animated properties: transform, opacity,
   clip-path, filter (bounded), and one one-shot background sweep.
   ============================================================ */

/* ---- Hero: the headline enacts the product -------------------
   "broken." arrives cracked in two halves, the halves close, then
   the second line rises and "agents" takes one light pass.        */
.hero-title .hl { display: block; }
.hero-title .hl-1 { animation: hl-rise 720ms var(--ease-out) 100ms backwards; }
.hero-title .hl-2 { animation: hl-rise 800ms var(--ease-out) 900ms backwards; }
@keyframes hl-rise {
  from { clip-path: inset(0 0 100% 0); transform: translateY(0.3em); }
  to   { clip-path: inset(-0.3em -0.15em); transform: none; }
}

/* "broken." itself (word-dim-to-on, crack-scan, crack-line) is defined once, in the Premium layer below —
   there is no separate calm-build version to keep in sync; this is just the positioning context for it. */
.hl-broken { position: relative; display: inline-block; }

.hero-title .hl-agents {
  background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%), var(--grad-brand);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0, 0 0;
  animation: agents-sweep 1300ms var(--ease-out) 1500ms backwards;
}
@keyframes agents-sweep {
  from { background-position: 120% 0, 0 0; }
  to   { background-position: -40% 0, 0 0; }
}

/* Supporting cast: quiet. Opacity only, no rise, no repeat of the focal move. */
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes focus-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
.hero .eyebrow { animation: fade-in 600ms var(--ease-out) 60ms backwards; }
.hero-def      { animation: fade-in 800ms var(--ease-out) 1000ms backwards; }
.hero-sub      { animation: fade-in 800ms var(--ease-out) 1100ms backwards; }
.hero-ctas     { animation: focus-in 900ms var(--ease-out) 1300ms backwards; }
.hero-note     { animation: fade-in 800ms var(--ease-out) 1500ms backwards; }
.hero-orb      { animation: orb-rise 1600ms var(--ease-out) 700ms backwards; }
@keyframes orb-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(60px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* ---- Process: order is the content, so scroll drives it -------
   A rail draws across the list and each step lights in turn.
   Browsers without scroll-driven animation keep everything visible
   (and the cards still reveal with the scroll-reveal fallback).   */
.process-list { position: relative; view-timeline: --process block; }
.process-list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  transform-origin: 0 50%;
}
@supports (animation-timeline: view()) {
  @keyframes rail-draw   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes step-glow   { from { opacity: 0; } to { opacity: 1; } }
  /* Text stays at full strength the whole time (dimming it would fail contrast whenever a visitor stops
     mid-scroll); the sequence reads through the rail, the glow and a small settle instead. */
  @keyframes step-settle { from { transform: translateY(12px); } to { transform: none; } }

  .process-list::before { animation: rail-draw linear both; animation-timeline: --process; animation-range: cover 4% cover 42%; }
  .process-step::before,
  .process-num,
  .process-body { animation-timeline: --process; animation-fill-mode: both; animation-timing-function: linear; }
  .process-step::before { animation-name: step-glow; }
  .process-num,
  .process-body         { animation-name: step-settle; }
  .process-step:nth-child(1)::before, .process-step:nth-child(1) .process-num, .process-step:nth-child(1) .process-body { animation-range: cover 4% cover 20%; }
  .process-step:nth-child(2)::before, .process-step:nth-child(2) .process-num, .process-step:nth-child(2) .process-body { animation-range: cover 11% cover 27%; }
  .process-step:nth-child(3)::before, .process-step:nth-child(3) .process-num, .process-step:nth-child(3) .process-body { animation-range: cover 18% cover 34%; }
  .process-step:nth-child(4)::before, .process-step:nth-child(4) .process-num, .process-step:nth-child(4) .process-body { animation-range: cover 25% cover 41%; }
  /* the timeline owns the entrance here, so the fallback reveal must not also hide these */
  .process-step.reveal.is-armed:not(.is-visible) { opacity: 1; --tf-reveal: translateY(0); }
}

/* ---- Feedback: press, focus, error ----------------------------- */
.btn { transition: transform 260ms var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), outline-offset 160ms var(--ease-out); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 90ms; }
.btn:focus-visible { outline-offset: 5px; }

.field.has-error input,
.field.has-error textarea { animation: field-nudge 300ms var(--ease-out); }
@keyframes field-nudge {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  60%  { transform: translateX(3px); }
  100% { transform: none; }
}

/* ---- Continuity: dialogs grow out of what opened them ---------- */
.chat-window { transform-origin: 100% 100%; }

.book-modal {
  transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
  transform: scale(0.94);
  transition: opacity 300ms var(--ease-out), transform 380ms var(--ease-out);
}
.book-modal.is-open { transform: scale(1); }
.book-modal::backdrop {
  background: rgba(5, 7, 12, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background 380ms var(--ease-out), backdrop-filter 380ms var(--ease-out), -webkit-backdrop-filter 380ms var(--ease-out);
}
.book-modal.is-open::backdrop {
  background: rgba(5, 7, 12, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.book-success:not([hidden]) .book-success-icon { animation: icon-in 420ms var(--ease-out) backwards; }
.book-success:not([hidden]) .draw-check { stroke-dasharray: 1; animation: check-draw 480ms var(--ease-out) 160ms backwards; }
@keyframes icon-in    { from { opacity: 0; transform: scale(0.8); } }
@keyframes check-draw { from { stroke-dashoffset: 1; } }

/* ---- Loops: idle when offscreen (LoopGovernor toggles .is-paused) - */
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused; }

/* ---- Typing dots: same rhythm, opacity-only under reduced motion -- */
@keyframes chat-typing-fade { 0%, 60%, 100% { opacity: 0.4; } 30% { opacity: 1; } }

/* ============================================================
   Reduced motion: an intentional alternative, not "everything off".
   Travelling motion and endless loops stop. Short opacity fades,
   colour changes and state feedback stay, so nothing goes silent.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .aurora, .aurora::before, .aurora::after, .orbit-ring { animation: none; }

  .hero-title .hl,
  .hero-title .hl-agents { animation: none; }        /* .hl-broken .hl-word is disabled by the Premium-layer reduced-motion rule below */
  .hero .eyebrow, .hero-def, .hero-sub, .hero-ctas, .hero-note, .hero-orb { animation: fade-in 260ms linear backwards; }

  .reveal, .spotlight.reveal { transition: opacity 260ms linear, border-color var(--dur-med) var(--ease-out); }
  .reveal.is-armed:not(.is-visible),
  .section-title.reveal.is-armed:not(.is-visible) { opacity: 0; transform: none; filter: none; }
  .spotlight.reveal.is-armed:not(.is-visible) { --tf-reveal: translateY(0); }

  .process-list::before,
  .process-step, .process-step::before, .process-num, .process-body { animation: none !important; }

  .btn:hover, .btn:active, .btn:hover svg, .chat-send:hover { transform: none; }
  .spotlight { --tf-hover: translateY(0) !important; }
  .field.has-error input, .field.has-error textarea { animation: none; }

  .book-modal, .book-modal.is-open { transform: none; transition: opacity 220ms linear; }
  .book-success:not([hidden]) .book-success-icon,
  .book-success:not([hidden]) .draw-check { animation: none; }
  .chat-window, .chat-window.is-open { transform: none; }

  .chat-typing span { animation-name: chat-typing-fade; }
}

/* ============================================================
   Premium layer - quiet luxury
   Precision, not spectacle: words rise from masks, light follows
   the pointer, layers drift a few pixels with it, and everything
   else stays still. Pointer effects need a fine, hovering pointer
   (JS gates them); each rule falls back to the calm build above.
   Animated properties stay on transform, opacity, filter and the
   individual `translate` property.
   ============================================================ */

/* ---- Words rise from masks (hero and section headings) ------- */
.hero-title .hl { animation: none; }   /* the calm build's whole-line rise gives way to per-word masks */
.hero-title .w,
.section-title.is-split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0 0.24em;       /* room for ascenders and descenders inside the mask... */
  margin: -0.1em 0 -0.24em;      /* ...without changing the line's height */
}
.hero-title .wi,
.section-title.is-split .wi { display: inline-block; }
.hero-title .hl-broken { vertical-align: top; }
.hero-title .hl-1 { position: relative; }   /* containing block for .crack-scan below, so it can span the whole line, not just "broken." */

/* Slowed on purpose: the whole headline now takes its time to land, so it reads instead of flashing by. */
.hero-title .wi { animation: word-rise 2900ms var(--ease-out) backwards; }
@keyframes word-rise { from { transform: translateY(112%); filter: blur(6px); } }
.hl-1 .w:nth-child(1) .wi { animation-delay: 430ms; }
.hl-1 .w:nth-child(2) .wi { animation-delay: 680ms; }
.hl-1 .w:nth-child(3) .wi { animation-delay: 940ms; }
.hl-1 .w:nth-child(4) .wi { animation-delay: 1200ms; }   /* "broken." rises in with the rest of the line, same as any other word */
.hl-2 .w:nth-child(1) .wi { animation-delay: 2800ms; }
.hl-2 .w:nth-child(2) .wi { animation-delay: 3110ms; }
.hl-2 .w:nth-child(3) .wi { animation-delay: 3420ms; }
.hl-2 .w:nth-child(4) .wi { animation-delay: 3720ms; }
.hl-2 .w:nth-child(5) .wi { animation-delay: 4030ms; }

/* "broken." rises in dim with the rest of the line — it just sits there, quietly wrong, while the whole
   rest of the headline plays out. The diagnosis and the fix are deliberately saved for the very end: a
   noticeable pause after "agents" has landed and thrown, THEN the word gets scanned, its flaw is found,
   and it snaps on — the payoff comes last, once the headline has made its whole promise. Nothing here is
   a smashed/duplicated text layer or a filter on gradient-clipped text, so none of the risk the "agents"
   throb rectangle bug had — everything is opacity, brightness/saturate, translate and text-shadow on
   plain solid-colour text. Its word-mask ancestor (.w, tight overflow:hidden with no horizontal margin)
   is released right after this word finishes rising, long before the beam/glow ever need the room. */
.hl-1 .w:nth-child(4) { animation: unmask-word 1ms linear 4200ms forwards; }
.hl-broken .hl-word {
  display: inline-block;
  opacity: 0.4;
  filter: brightness(0.5) saturate(0.6);
  animation: word-power-on 4300ms var(--ease-out) 11700ms forwards;   /* starts once "agents" has thrown and a beat has passed; runs through both scan passes */
}
@keyframes word-power-on {
  0%   { opacity: 0.4;  filter: brightness(0.5) saturate(0.6); transform: scale(1); text-shadow: 0 0 0 rgba(255, 178, 110, 0), 0 0 0 rgba(110, 165, 255, 0); }
  5%   { opacity: 0.24; filter: brightness(0.35) saturate(0.5); }                  /* two small flickers as the first pass crosses it */
  12%  { opacity: 0.42; filter: brightness(0.5) saturate(0.6); }
  20%  { opacity: 0.3;  filter: brightness(0.4) saturate(0.55); }
  28%  { opacity: 0.42; filter: brightness(0.5) saturate(0.6); }
  72%  { opacity: 0.42; filter: brightness(0.5) saturate(0.6); }                   /* holds dim through the second pass */
  80%  { opacity: 1;    filter: brightness(1.3) saturate(1.15); transform: scale(1.012); text-shadow: 0 0 20px rgba(255, 178, 110, 0.5), 0 0 34px rgba(110, 165, 255, 0.28); }  /* the flash lands and brightens it */
  92%  { opacity: 1;    filter: brightness(1) saturate(1);      transform: scale(1);     text-shadow: 0 0 5px rgba(255, 178, 110, 0.15), 0 0 10px rgba(110, 165, 255, 0.08); }
  100% { opacity: 1;    filter: brightness(1) saturate(1);      transform: scale(1);     text-shadow: 0 0 0 rgba(255, 178, 110, 0), 0 0 0 rgba(110, 165, 255, 0); }
}
.crack-scan {                                        /* the scanning beam. `translate: N%` resolves against the ELEMENT'S OWN box, not the
     parent's — a narrow sliver translating "115% -> -15%" only ever crossed ~10% of the actual word (the original bug).
     Fixed by sizing this element to a whole containing block (left/right ARE relative to the containing block) and
     keeping the beam as a fixed gradient band inside it, so translating this box by a percentage of ITS OWN width
     correctly sweeps that block. Scoped to the whole LINE (.hl-1, not just "broken.") on request — it reads better
     scanning the full "Your SOPs are broken." than just the one word. Two passes, bouncing back (first right-to-left
     as asked, second left-to-right), so the eye can't mistake it for anything but an active scan. */
  position: absolute;
  left: -6%;
  right: -6%;
  top: -40%;
  bottom: -40%;
  transform: skewX(18deg);
  background: linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, 0.92) 49%, rgba(255, 255, 255, 0.92) 51%, transparent 56%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  will-change: translate;
  animation: scan-sweep 1500ms linear 11700ms 2 alternate both;
}
@keyframes scan-sweep {
  0%   { opacity: 0; translate: 50% 0; }    /* the beam's own box is 130% of the word's width, so +-50% of ITS width = the word's full right/left edge, off-word */
  10%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; translate: -50% 0; }
}
.crack-line {                                        /* the flaw the scan finds — lands right as both passes clear, then brightens the word */
  position: absolute;
  left: 47%;
  top: -12%;
  width: 2px;
  height: 124%;
  border-radius: 2px;
  transform: rotate(13deg);
  transform-origin: 50% 50%;
  background: linear-gradient(180deg, transparent, var(--color-amber) 28%, #fff 50%, var(--color-blue) 72%, transparent);
  filter: blur(0.4px);
  pointer-events: none;
  opacity: 0;
  animation: fracture-flash 850ms var(--ease-breath) 14650ms both;
}
@keyframes fracture-flash {
  0%   { opacity: 0;    transform: rotate(13deg) scaleY(0); }
  32%  { opacity: 1;    transform: rotate(13deg) scaleY(1); }
  58%  { opacity: 0.85; transform: rotate(13deg) scaleY(1); }
  100% { opacity: 0;    transform: rotate(13deg) scaleY(1); }
}

/* the light pass on "agents" waits for the headline to land, then a slow bloom reads as strength gathering.
   Glow lives on text-shadow, never filter: a filter's drop-shadow rasterizes the whole box, and combined
   with the gradient's background-clip: text it showed as a hard rectangle around the word. The ancestor
   word-mask (.w, overflow: hidden with no horizontal margin for a glow to bleed into) is released the
   instant the word has finished rising, so the bloom has room to breathe without being clipped square. */
.hl-2 .w:nth-child(5) { animation: unmask-word 1ms linear 6960ms forwards; }
@keyframes unmask-word { to { overflow: visible; } }
.hero-title .hl-agents {
  display: inline-block;
  transform-origin: 50% 60%;
  animation:
    agents-sweep 3150ms var(--ease-out) 4900ms backwards,
    agents-throb 2550ms var(--ease-breath) 8050ms both;
}
@keyframes agents-throb {
  0%   { transform: scale(1);      text-shadow: 0 0 0 rgba(255, 178, 110, 0),  0 0 0 rgba(110, 165, 255, 0); }
  36%  { transform: scale(1.026);  text-shadow: 0 0 20px rgba(255, 178, 110, 0.5), 0 0 38px rgba(110, 165, 255, 0.26); }
  58%  { transform: scale(1.004);  text-shadow: 0 0 6px rgba(255, 178, 110, 0.2),  0 0 14px rgba(110, 165, 255, 0.12); }
  80%  { transform: scale(1.014);  text-shadow: 0 0 13px rgba(255, 178, 110, 0.36), 0 0 24px rgba(110, 165, 255, 0.2); }
  100% { transform: scale(1);      text-shadow: 0 0 0 rgba(255, 178, 110, 0),  0 0 0 rgba(110, 165, 255, 0); }
}
.hero-def  { animation-delay: 3570ms; }
.hero-sub  { animation-delay: 3860ms; }
.hero-ctas { animation-delay: 4490ms; }
.hero-note { animation-delay: 5030ms; }
.hero-orb  { animation-delay: 1620ms; }

/* section headings: the box stays put, only its words are hidden until it enters view */
.section-title.is-split .wi {
  transition: transform 1200ms var(--ease-out) calc(var(--i, 0) * 70ms), filter 1000ms var(--ease-out) calc(var(--i, 0) * 70ms);
}
.section-title.reveal.is-split.is-armed:not(.is-visible) { opacity: 1; filter: none; transform: none; }
.section-title.reveal.is-split.is-armed:not(.is-visible) .wi { transform: translateY(112%); filter: blur(6px); }

/* ---- Cards: a border of light that follows the cursor --------- */
@property --ring { syntax: "<number>"; inherits: false; initial-value: 0; }
@media (hover: hover) and (pointer: fine) {
  .spotlight {
    --ring: 0;
    border-color: transparent;
    background:
      linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
      radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px),
        rgba(255, 178, 110, calc(0.9 * var(--ring))), rgba(110, 165, 255, calc(0.6 * var(--ring))) 42%, transparent 72%) border-box,
      linear-gradient(var(--color-border), var(--color-border)) border-box;
    transition: border-color var(--dur-med) var(--ease-out), transform 480ms var(--ease-out), --ring 600ms var(--ease-out);
  }
  .spotlight.reveal {
    transition: opacity 800ms var(--ease-out), transform 600ms var(--ease-out), border-color var(--dur-med) var(--ease-out), --ring 600ms var(--ease-out);
  }
  .spotlight:hover { --ring: 1; border-color: transparent; }
}

/* ---- Primary buttons: a slow sheen (MagneticButtons adds the lean) - */
.btn-primary { position: relative; isolation: isolate; overflow: hidden; }
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                  /* behind the label, above the button's own background */
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%);
  transform: translateX(-135%);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::before { transform: translateX(135%); transition: transform 1300ms var(--ease-out); }
}

/* ---- Depth: layers drift a few pixels with the pointer (PointerField sets `translate` directly) - */
.hero-glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(560px circle at 50% 46%, rgba(255, 190, 130, 0.075), rgba(110, 160, 255, 0.045) 45%, transparent 72%);
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
  will-change: translate;
}
.has-pointer .hero-glow { opacity: 1; }
@media (hover: none), (pointer: coarse) { .hero-glow { display: none; } }

/* ---- Hero eases upward as it leaves (scroll-driven; translate/scale only, text never fades) - */
@supports (animation-timeline: view()) {
  @keyframes hero-drift { to { transform: translateY(-32px) scale(0.988); } }
  .hero-inner { animation: hero-drift linear both; animation-timeline: view(); animation-range: exit 8% exit 100%; }
}

/* ---- Reduced motion: words simply fade; no pointer or scroll drift ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-title .wi { animation: fade-in 260ms linear backwards; animation-delay: 0ms !important; }
  .hl-broken .hl-word,
  .hero-title .hl-agents { animation: none; }        /* the flicker/scan/throb all travel; skip them */
  .hl-broken .hl-word { opacity: 1; filter: none; }  /* the dim look is a static base style now (the fix runs much later), so it needs an explicit reset here too */
  .hl-broken::before, .hl-broken::after, .crack-scan, .crack-line { display: none; }
  .section-title.is-split .wi { transition: opacity 260ms linear; }
  .section-title.reveal.is-split.is-armed:not(.is-visible) .wi { transform: none; filter: none; opacity: 0; }
  .hero-inner { animation: none; }
  .aurora, .stars, .hero-orb { translate: none !important; }
  .hero-glow, .btn-primary::before { display: none; }
  .btn-primary { translate: none !important; }
}

/* ============================================================
   FAQ accordion - premium hover
   Same language as the cards: a border of light that follows the
   cursor, a faint pool of light inside, the question leaning toward
   its answer, and a chevron with its own ring. Keyboard focus gets
   the same treatment as hover. Layout never changes: the chevron's
   ring is drawn with padding cancelled by negative margin.
   ============================================================ */
.accordion-item { position: relative; }
.accordion-trigger span { display: inline-block; }
.accordion-trigger .chev {
  box-sizing: content-box;
  padding: 8px;
  margin: -8px;                                  /* net size unchanged: 18px */
  border: 1px solid transparent;
  border-radius: 50%;
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out),
              border-color 500ms var(--ease-out), background-color 500ms var(--ease-out);
}
.accordion-panel-inner p {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease-out) 90ms, transform 700ms var(--ease-out) 90ms;
}
.accordion-item.is-open .accordion-panel-inner p { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .accordion-item {
    --ring: 0;
    border-color: transparent;
    background:
      linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
      radial-gradient(var(--faq-ring-size, 400px) circle at var(--mx, -300px) var(--my, -300px),
        rgba(255, 178, 110, calc(var(--faq-ring-a, 1) * var(--ring))), rgba(110, 165, 255, calc(var(--faq-ring-b, 0.85) * var(--ring))) 42%, transparent 72%) border-box,
      linear-gradient(var(--color-border), var(--color-border)) border-box;
  }
  .accordion-item.reveal {
    transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out), --ring 600ms var(--ease-out);
  }
  .accordion-item:hover { --ring: 1; }
  .accordion-item.is-open { --ring: var(--faq-rest, 0.9); }
  .accordion-item.is-open:hover { --ring: 1; }
  /* no pointer yet (an item opened from the keyboard): rest the light near the top-left */
  .accordion-item.is-open { --mx: 18%; --my: 0%; }
  /* keyboard focus only (:focus-visible), so a mouse click does not leave the item lit. Kept in separate rules:
     a browser without :has() then still gets the hover rules above. */
  .accordion-item:has(:focus-visible) { --ring: 1; --mx: 18%; --my: 0%; }

  .accordion-item::after {                       /* the pool of light inside, under the cursor */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(calc(var(--faq-ring-size, 400px) + 20px) circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, var(--faq-glow, 0.1)), transparent 62%);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
  }
  .accordion-item:hover::after { opacity: 1; }
  .accordion-item:has(:focus-visible)::after { opacity: 1; }

  .accordion-trigger span { transition: transform 600ms var(--ease-out); }
  .accordion-trigger:hover span, .accordion-trigger:focus-visible span { transform: translateX(var(--faq-lean, 2px)); }

  .accordion-trigger:hover .chev, .accordion-trigger:focus-visible .chev {
    border-color: var(--color-border-strong);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
    transform: translateY(2px);
  }
  .accordion-trigger[aria-expanded="true"]:hover .chev, .accordion-trigger[aria-expanded="true"]:focus-visible .chev {
    color: var(--color-amber);
    transform: rotate(180deg) translateY(2px);   /* after the flip, this moves it up */
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion-trigger:hover span, .accordion-trigger:focus-visible span { transform: none; }
  .accordion-trigger:hover .chev, .accordion-trigger:focus-visible .chev { transform: none; }
  .accordion-trigger[aria-expanded="true"] .chev,
  .accordion-trigger[aria-expanded="true"]:hover .chev, .accordion-trigger[aria-expanded="true"]:focus-visible .chev { transform: rotate(180deg); }
  .accordion-panel-inner p { transform: none; transition: opacity 260ms linear; }
}

/* ============================================================
   Bottom half - premium (About, call-to-action, FAQ entrance, footer)
   Same language as above: things arrive in order, light follows
   the cursor on hovering devices, and touch / reduced motion keep
   plain, calm fallbacks. Text is never dimmed to animate.
   ============================================================ */

/* --ringi is --ring for elements whose light lives on a pseudo-element (pseudo-elements only see inherited values) */
@property --ringi { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---- About: checklist arrives item by item, bullets pop in --------------------------------- */
.check-list li.reveal { transition: opacity 800ms var(--ease-out), transform 700ms var(--ease-out), filter 900ms var(--ease-out); }
.check-list li.reveal.is-armed:not(.is-visible) { transform: translateY(12px); }
.check-list li::before { transition: transform 800ms var(--ease-out) 150ms; }
.check-list li.reveal.is-armed:not(.is-visible)::before { transform: scale(0.3); }
@media (hover: hover) and (pointer: fine) {
  .check-list li:hover { transform: translateX(3px); }
  .check-list li:hover::before { transform: scale(1.18); transition-delay: 0ms; transition-duration: 500ms; }
}

/* ---- About: the orbit answers the cursor (LocalParallax moves the layers, this is the light) - */
.orbit-core, .orbit-ring { will-change: translate; }
.orbit-glow {                                      /* a small light that trails the cursor; moved with `translate`, never repainted */
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 178, 110, 0.18), rgba(110, 165, 255, 0.1) 50%, transparent);
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  will-change: translate;
}
@media (hover: hover) and (pointer: fine) { .about-visual:hover .orbit-glow { opacity: 1; } }
@media (hover: none), (pointer: coarse) { .orbit-glow { display: none; } }

/* ---- Call-to-action: headline by words, then the rest; the panel carries the cursor's light -- */
.cta-banner-inner h2.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0 0.24em; margin: -0.1em 0 -0.24em; }
.cta-banner-inner h2.is-split .wi { display: inline-block; transition: transform 1200ms var(--ease-out) calc(var(--i, 0) * 70ms), filter 1000ms var(--ease-out) calc(var(--i, 0) * 70ms); }
.cta-banner-inner h2.reveal.is-split.is-armed:not(.is-visible) { opacity: 1; filter: none; transform: none; }
.cta-banner-inner h2.reveal.is-split.is-armed:not(.is-visible) .wi { transform: translateY(112%); filter: blur(6px); }
.cta-rest.reveal.is-armed:not(.is-visible) { transform: translateY(14px); }

.cta-banner-inner { position: relative; }
.cta-banner-inner > * { position: relative; z-index: 1; }   /* copy and button stay above the light */
.cta-banner-inner > .cta-lights { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }   /* clips both lights to the panel, border included */
/* Two small lights that trail the cursor. They are moved with `translate` (compositor only), so the
   panel is never repainted while the pointer moves; hover only fades their opacity. */
.cta-ring {                                      /* a 1px ring drawn over the border; its light is clipped to the ring */
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.cta-light, .cta-pool { position: absolute; left: 0; top: 0; width: 420px; height: 420px; border-radius: 50%; will-change: translate; }
.cta-light { background: radial-gradient(closest-side, rgb(255, 178, 110), rgba(110, 165, 255, 0.85) 58%, transparent); }
.cta-pool {                                      /* a pool of light inside, under the cursor */
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta-banner-inner:hover .cta-ring, .cta-banner-inner:hover .cta-pool { opacity: 1; }
}
@media (hover: none), (pointer: coarse) { .cta-lights { display: none; } }

/* ---- FAQ: items rise in one after another ---------------------------------------------------- */
.accordion-item.reveal.is-armed:not(.is-visible) { transform: translateY(14px); }

/* ---- Footer: columns rise in, a hairline draws across, links and the logo answer the cursor --- */
.site-footer { position: relative; overflow: hidden; }
.site-footer > .container { position: relative; z-index: 1; }
.footer-brand.reveal.is-armed:not(.is-visible), .footer-col.reveal.is-armed:not(.is-visible) { transform: translateY(14px); }

.footer-glow {
  position: absolute;
  left: 50%;
  top: -120px;
  width: 760px;
  height: 320px;
  margin-left: -380px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 178, 110, 0.07), rgba(110, 165, 255, 0.05) 55%, transparent);
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
  will-change: translate;
}
.has-pointer .footer-glow { opacity: 1; }
@media (hover: none), (pointer: coarse) { .footer-glow { display: none; } }

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad-brand);
  transform-origin: 0 50%;
  z-index: 1;
}
@supports (animation-timeline: view()) {
  .site-footer::before { animation: rail-draw linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
}

.footer-col a, .social-link { position: relative; }
.footer-col a { width: fit-content; }
.footer-col a::after {                           /* underline that draws in from the left */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 700ms var(--ease-out);
}
.footer-col a:focus-visible::after { transform: scaleX(1); }
.footer-col a svg { transition: transform 500ms var(--ease-out), color 300ms var(--ease-out); }
/* Footer address ("Buckeye, AZ") is plain text, not a link, so the .footer-col a rules skipped it.
   It gets the same hover as the email and phone beside it (slide, drawn underline, amber icon) and
   keeps the default cursor because it is not clickable. Mirrors .footer-col a, including reduced motion
   and Pause animations. */
.footer-address { position: relative; width: fit-content; }
.footer-address::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 700ms var(--ease-out);
}
.footer-address svg { transition: transform 500ms var(--ease-out), color 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .footer-address { transition: color var(--dur-fast) var(--ease-out), transform 600ms var(--ease-out); }
  .footer-address:hover { color: var(--color-text); transform: translateX(3px); }
  .footer-address:hover::after { transform: scaleX(1); }
  .footer-address:hover svg { color: var(--color-amber); transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-address, .footer-address::after, .footer-address svg { transition: none; }
  .footer-address:hover, .footer-address:hover svg { transform: none; }
}
html.motion-paused .footer-address, html.motion-paused .footer-address::after, html.motion-paused .footer-address svg { transition: none; }
html.motion-paused .footer-address:hover, html.motion-paused .footer-address:hover svg { transform: none; }
.brand-mark { transition: transform 700ms var(--ease-out); }
img.brand-mark { display: block; border-radius: 22%; }
@media (hover: hover) and (pointer: fine) {
  .footer-col a { transition: color var(--dur-fast) var(--ease-out), transform 600ms var(--ease-out); }
  .footer-col a:hover { transform: translateX(3px); }
  .footer-col a:hover::after { transform: scaleX(1); }
  .footer-col a:hover svg { color: var(--color-amber); transform: scale(1.12); }
  .social-link { transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
  .social-link:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(91, 157, 255, 0.6); }
  .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.07); }
}

/* ---- Reduced motion: fades only; underlines and light still respond, without sliding --------- */
@media (prefers-reduced-motion: reduce) {
  .check-list li.reveal, .cta-rest.reveal, .footer-brand.reveal, .footer-col.reveal, .accordion-item.reveal { transition: opacity 260ms linear, border-color var(--dur-med) var(--ease-out); }
  .check-list li.reveal.is-armed:not(.is-visible), .cta-rest.reveal.is-armed:not(.is-visible), .footer-brand.reveal.is-armed:not(.is-visible),
  .footer-col.reveal.is-armed:not(.is-visible), .accordion-item.reveal.is-armed:not(.is-visible) { transform: none; }
  .check-list li.reveal.is-armed:not(.is-visible)::before { transform: none; }
  .cta-banner-inner h2.is-split .wi { transition: opacity 260ms linear; }
  .cta-banner-inner h2.reveal.is-split.is-armed:not(.is-visible) .wi { transform: none; filter: none; opacity: 0; }
  .orbit-core, .orbit-ring, .footer-glow { translate: none !important; }
  .footer-glow, .orbit-glow, .cta-lights, .site-footer::before { display: none; }
  .footer-col a, .footer-col a::after, .footer-col a svg, .social-link, .brand-mark, .check-list li:hover, .check-list li:hover::before { transition: none; }
  .footer-col a:hover, .social-link:hover, .brand:hover .brand-mark, .check-list li:hover { transform: none; }
  .footer-col a:hover svg, .check-list li:hover::before { transform: none; }
}

/* ---------- Legal pages (privacy) ---------- */
.legal { padding-top: calc(var(--space-9, 72px) + 40px); }
.legal h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  color: var(--color-text);
  margin: 2.2em 0 0.6em;
}
.legal p { color: var(--color-text-muted); line-height: 1.75; margin: 0 0 1em; }
.legal a { color: var(--color-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:hover { color: var(--color-amber); }
.legal-updated { color: var(--color-text-faint); font-size: 0.95rem; margin-top: -0.4em; }
.footer-bottom a { color: var(--color-text-faint); display: inline-block; padding-block: 4px; /* 24px target */ }
.footer-bottom a:hover { color: var(--color-text); }


/* ---------- Guide / article pages (SOP audit cost, audit vs automation) ---------- */
.article h1 { margin-bottom: 0.4em; }
.article h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 1.6em 0 0.4em;
}
.article .lede { font-size: 1.15rem; color: var(--color-text); line-height: 1.7; }
.article-list { color: var(--color-text-muted); line-height: 1.75; margin: 0 0 1.2em; padding-left: 1.3em; }
ul.article-list { list-style: disc; }
ol.article-list { list-style: decimal; }
.article-list li { margin: 0 0 0.55em; padding-left: 0.2em; }
.article-list li::marker { color: var(--color-amber); }
.article-list strong { color: var(--color-text); }
.article-table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
.article-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.article-table th, .article-table td {
  text-align: left; vertical-align: top; padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted); line-height: 1.6;
}
.article-table thead th {
  color: var(--color-text-faint); font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.06em; border-bottom: 1px solid var(--color-border-strong);
}
.article-table tbody th { color: var(--color-text); font-weight: 600; }
.article-table td:nth-child(2) { color: var(--color-amber); font-weight: 600; white-space: nowrap; }
.article-cta {
  margin: 2.6em 0 1em; padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.article-cta p { margin: 0 0 1em; color: var(--color-text); }

/* ---------- Pricing line under Services ---------- */
.services-pricing {
  text-align: center;
  margin: var(--space-5) auto 0;
  color: var(--color-text-muted);
}
.services-pricing strong { color: var(--color-text); }
.services-pricing a { color: var(--color-blue); font-weight: 600; margin-left: 0.4em; }
.services-pricing a:hover { color: var(--color-amber); }

/* ---------- Figure in guide pages ---------- */
.article-figure {
  margin: 1.6em 0 2em;
  position: relative;
  left: 50%;
  width: min(1110px, calc(100vw - 32px));
  transform: translateX(-50%);
}
.article-figure figcaption a { color: var(--color-blue); }
.article-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
}
.article-figure figcaption { margin-top: 0.7em; color: var(--color-text-faint); font-size: 0.92rem; }

/* ---------- Verify strip in guide CTA ---------- */
.article .article-cta .article-verify {
  margin: 1.1em 0 0; font-size: 0.92rem; color: var(--color-text-muted);
}
.article .article-cta .article-verify a { color: var(--color-blue); }
.article .article-cta .article-verify a:hover { color: var(--color-amber); }

/* ---------- a11y: links inside guide text must not rely on colour alone ---------- */
.article a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- guide pages: shared-site parity ---------- */
.article-cta { position: relative; }
/* The call-to-action panel carries the card's border of light. .article-cta sets its own flat
   background and border after the shared .spotlight rule, which hid the ring; this restores it
   with the panel's own stronger resting border (hover-capable pointers only, like .spotlight). */
@media (hover: hover) and (pointer: fine) {
  .article-cta.spotlight {
    --ring: 0;
    border-color: transparent;
    background:
      linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
      radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px),
        rgba(255, 178, 110, calc(0.9 * var(--ring))), rgba(110, 165, 255, calc(0.6 * var(--ring))) 42%, transparent 72%) border-box,
      linear-gradient(var(--color-border-strong), var(--color-border-strong)) border-box;
    transition: opacity 800ms var(--ease-out), transform 600ms var(--ease-out), border-color var(--dur-med) var(--ease-out), --ring 600ms var(--ease-out);
  }
  .article-cta.spotlight:hover { --ring: 1; border-color: transparent; --tf-hover: translateY(-3px); }
}
.article .accordion { margin: 0 0 1.6em; }

/* ---------- Price estimator (cost page only) ---------- */
.estimator {
  position: relative;
  margin: 2.2em 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.estimator[hidden] { display: none; }
.article .estimator .estimator-title { margin-top: 0; }
.estimator-lede { margin-bottom: 1.2em; }
.est-group { border: 0; margin: 0 0 1.2em; padding: 0; min-width: 0; }
.est-group legend { color: var(--color-text); font-weight: 600; padding: 0; margin-bottom: 0.6em; }
.est-seg { display: flex; flex-wrap: wrap; gap: 10px; }
.est-seg label { position: relative; }
.est-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.est-seg span {
  display: inline-block; padding: 10px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong); color: var(--color-text-muted);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.est-seg label:hover span { border-color: var(--color-amber); color: var(--color-text); }
.est-seg input:checked + span { border-color: var(--color-amber); background: var(--color-amber-soft); color: var(--color-text); }
.est-seg input:focus-visible + span { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.est-out { margin: 1.4em 0 1.2em; padding-top: 1.2em; border-top: 1px solid var(--color-border); }
.est-row { margin: 0 0 1.1em; }
.est-label { color: var(--color-text-faint); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.est-price { font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--color-amber); font-weight: 700; line-height: 1.2; }
.est-price.is-text { font-size: 1.25rem; color: var(--color-text); }
.est-detail, .est-note { color: var(--color-text-muted); line-height: 1.65; margin: 0.2em 0 0; }
.est-note { color: var(--color-text); margin-top: 0.8em; }
.est-fine { color: var(--color-text-faint); font-size: 0.88rem; margin: 1em 0 0; }
.article-table tbody tr { transition: background var(--dur-med) var(--ease-out); }
.article-table tbody tr.is-selected { background: var(--color-amber-soft); }
.article-table tbody tr.is-selected th { box-shadow: inset 3px 0 0 var(--color-amber); }
@media (prefers-reduced-motion: reduce) {
  .est-seg span, .article-table tbody tr { transition: none; }
}

.estimator .btn { white-space: normal; max-width: 100%; text-align: center; }

/* ---------- guide CTA + estimator buttons: centred, with the standard dark label on the gradient ---------- */
.article-cta .btn, .estimator > .btn {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Compliance additions 2026-10-11 */
main { overflow-x: clip; } /* decorative glow must not widen the layout at 320px (1.4.10) */
.article-table-wrap:focus-visible, .chat-body:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* ============================================================
   Pause animations (WCAG 2.2.2): html.motion-paused applies the same calm build
   that prefers-reduced-motion gets. Generated from the reduced-motion blocks above
   (selectors prefixed with html.motion-paused); keep them in sync.
   ============================================================ */
html.motion-paused { scroll-behavior: auto; }
html.motion-paused .aurora,
html.motion-paused .aurora::before,
html.motion-paused .aurora::after,
html.motion-paused .orbit-ring { animation: none; }
html.motion-paused .hero-title .hl,
html.motion-paused .hero-title .hl-agents { animation: none; }
html.motion-paused .hero .eyebrow,
html.motion-paused .hero-def,
html.motion-paused .hero-sub,
html.motion-paused .hero-ctas,
html.motion-paused .hero-note,
html.motion-paused .hero-orb { animation: fade-in 260ms linear backwards; }
html.motion-paused .reveal,
html.motion-paused .spotlight.reveal { transition: opacity 260ms linear, border-color var(--dur-med) var(--ease-out); }
html.motion-paused .reveal.is-armed:not(.is-visible),
html.motion-paused .section-title.reveal.is-armed:not(.is-visible) { opacity: 0; transform: none; filter: none; }
html.motion-paused .spotlight.reveal.is-armed:not(.is-visible) { --tf-reveal: translateY(0); }
html.motion-paused .process-list::before,
html.motion-paused .process-step,
html.motion-paused .process-step::before,
html.motion-paused .process-num,
html.motion-paused .process-body { animation: none !important; }
html.motion-paused .btn:hover,
html.motion-paused .btn:active,
html.motion-paused .btn:hover svg,
html.motion-paused .chat-send:hover { transform: none; }
html.motion-paused .spotlight { --tf-hover: translateY(0) !important; }
html.motion-paused .field.has-error input,
html.motion-paused .field.has-error textarea { animation: none; }
html.motion-paused .book-modal,
html.motion-paused .book-modal.is-open { transform: none; transition: opacity 220ms linear; }
html.motion-paused .book-success:not([hidden]) .book-success-icon,
html.motion-paused .book-success:not([hidden]) .draw-check { animation: none; }
html.motion-paused .chat-window,
html.motion-paused .chat-window.is-open { transform: none; }
html.motion-paused .chat-typing span { animation-name: chat-typing-fade; }
html.motion-paused .hero-title .wi { animation: fade-in 260ms linear backwards; animation-delay: 0ms !important; }
html.motion-paused .hl-broken .hl-word,
html.motion-paused .hero-title .hl-agents { animation: none; }
html.motion-paused .hl-broken .hl-word { opacity: 1; filter: none; }
html.motion-paused .hl-broken::before,
html.motion-paused .hl-broken::after,
html.motion-paused .crack-scan,
html.motion-paused .crack-line { display: none; }
html.motion-paused .section-title.is-split .wi { transition: opacity 260ms linear; }
html.motion-paused .section-title.reveal.is-split.is-armed:not(.is-visible) .wi { transform: none; filter: none; opacity: 0; }
html.motion-paused .hero-inner { animation: none; }
html.motion-paused .aurora,
html.motion-paused .stars,
html.motion-paused .hero-orb { translate: none !important; }
html.motion-paused .hero-glow,
html.motion-paused .btn-primary::before { display: none; }
html.motion-paused .btn-primary { translate: none !important; }
html.motion-paused .accordion-trigger:hover span,
html.motion-paused .accordion-trigger:focus-visible span { transform: none; }
html.motion-paused .accordion-trigger:hover .chev,
html.motion-paused .accordion-trigger:focus-visible .chev { transform: none; }
html.motion-paused .accordion-trigger[aria-expanded="true"] .chev,
html.motion-paused .accordion-trigger[aria-expanded="true"]:hover .chev,
html.motion-paused .accordion-trigger[aria-expanded="true"]:focus-visible .chev { transform: rotate(180deg); }
html.motion-paused .accordion-panel-inner p { transform: none; transition: opacity 260ms linear; }
html.motion-paused .check-list li.reveal,
html.motion-paused .cta-rest.reveal,
html.motion-paused .footer-brand.reveal,
html.motion-paused .footer-col.reveal,
html.motion-paused .accordion-item.reveal { transition: opacity 260ms linear, border-color var(--dur-med) var(--ease-out); }
html.motion-paused .check-list li.reveal.is-armed:not(.is-visible),
html.motion-paused .cta-rest.reveal.is-armed:not(.is-visible),
html.motion-paused .footer-brand.reveal.is-armed:not(.is-visible),
html.motion-paused .footer-col.reveal.is-armed:not(.is-visible),
html.motion-paused .accordion-item.reveal.is-armed:not(.is-visible) { transform: none; }
html.motion-paused .check-list li.reveal.is-armed:not(.is-visible)::before { transform: none; }
html.motion-paused .cta-banner-inner h2.is-split .wi { transition: opacity 260ms linear; }
html.motion-paused .cta-banner-inner h2.reveal.is-split.is-armed:not(.is-visible) .wi { transform: none; filter: none; opacity: 0; }
html.motion-paused .orbit-core,
html.motion-paused .orbit-ring,
html.motion-paused .footer-glow { translate: none !important; }
html.motion-paused .footer-glow,
html.motion-paused .orbit-glow,
html.motion-paused .cta-lights,
html.motion-paused .site-footer::before { display: none; }
html.motion-paused .footer-col a,
html.motion-paused .footer-col a::after,
html.motion-paused .footer-col a svg,
html.motion-paused .social-link,
html.motion-paused .brand-mark,
html.motion-paused .check-list li:hover,
html.motion-paused .check-list li:hover::before { transition: none; }
html.motion-paused .footer-col a:hover,
html.motion-paused .social-link:hover,
html.motion-paused .brand:hover .brand-mark,
html.motion-paused .check-list li:hover { transform: none; }
html.motion-paused .footer-col a:hover svg,
html.motion-paused .check-list li:hover::before { transform: none; }
html.motion-paused .est-seg span,
html.motion-paused .article-table tbody tr { transition: none; }
html.motion-paused * , html.motion-paused *::before, html.motion-paused *::after { scroll-behavior: auto !important; }

/* Toggle control */
.motion-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  color: var(--color-text-muted); cursor: pointer;
  border: 1px solid var(--color-border-strong); background: transparent;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.motion-toggle:hover { color: var(--color-text); background: var(--color-surface); }
.motion-toggle .mt-play { display: none; }
.motion-toggle[aria-pressed="true"] .mt-pause { display: none; }
.motion-toggle[aria-pressed="true"] .mt-play { display: block; }
.motion-toggle[aria-pressed="true"] { color: var(--color-amber); border-color: var(--color-amber); }

/* Footer legal links: Accessibility and Privacy side by side (each keeps the 24px target from .footer-bottom a). */
.footer-bottom .footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* A link styled as a primary button inside a legal/article page keeps the button's dark label (the .legal a link colour must not reach it). */
.legal a.btn-primary, .legal a.btn-primary:hover { color: #0b0e17; text-decoration: none; }

/* Pause animations lives in the footer: a quiet text control that matches the footer links. Keeps the WCAG 2.2.2 mechanism on every page
   without a box in the header. Visible text equals the accessible name; pressed state is the icon swap plus colour. */
.footer-bottom .motion-toggle { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; height: auto;
  min-height: 24px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; font: inherit; cursor: pointer;
  color: var(--color-text-faint); }
.footer-bottom .motion-toggle:hover { color: var(--color-text); background: transparent; }
.footer-bottom .motion-toggle[aria-pressed="true"] { color: var(--color-amber); border-color: transparent; }

/* ---------- v24: touch comfort ----------
   iOS Safari zooms the whole page when a focused field is under 16px. On touch and small screens the booking-form fields and the chat input
   stay at 16px; desktop keeps its 0.94rem and 0.9rem sizes. Appended last on purpose: it overrides only this property and removes nothing above. */
@media (max-width: 820px), (pointer: coarse) {
  .field input, .field textarea, .chat-input { font-size: 16px; }
}