/* ============================================================
   THE AI ADVANTAGE CO. — Launch Site Styles · v2
   Apple-crisp interpretation. Pure white dominant, video-bg hero,
   no portraits, UI-led visuals throughout.
   ============================================================ */

/* ===== TOKENS ===== */
:root {
  --surface-0: #FFFFFF;
  --surface-1: #FBFBFD;      /* Apple's panel grey, slightly lighter than v1 */
  --surface-2: #F5F5F7;
  --surface-cream: #F8F5F0;
  --surface-dark: #1D1D1F;
  --surface-deep-brown: #2C1F12;

  --ink-primary: #1D1D1F;
  --ink-secondary: #515154;
  --ink-tertiary: #86868B;
  --ink-on-dark: #F5F5F7;
  --ink-on-dark-mute: #A1A1A6;

  /* Copper — accent only */
  --copper: #B8741A;
  --copper-hover: #E8A24D;
  --copper-deep: #7A4A14;

  /* Muted brushed gold — primary CTA. Warm, refined, not vibrant.
     Pairs with the copper accent without competing. */
  --gold-1: #D9B870;          /* highlight */
  --gold-2: #B89758;           /* mid */
  --gold-3: #8E7038;           /* shadow */
  --gold-hover-1: #E5C684;
  --gold-hover-2: #C7A669;
  /* legacy alias kept so any stragglers still resolve */
  --rose-gold-1: var(--gold-1);
  --rose-gold-2: var(--gold-2);
  --rose-gold-3: var(--gold-3);
  --rose-gold-hover-1: var(--gold-hover-1);
  --rose-gold-hover-2: var(--gold-hover-2);

  --hairline: #D2D2D7;
  --hairline-soft: #E8E8ED;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --max-w: 1200px;
  --max-w-narrow: 980px;
  --gutter: 24px;
  --section-pad-y: 140px;
  --section-pad-y-mobile: 80px;
}

/* ===== RESET ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* No bg on html — let canvas show below video as fallback */
  background: #FFFFFF;
}
body {
  font-family: var(--font-body);
  /* TRANSPARENT body — the fixed-position video shows through at every
     scroll position. Do NOT add position/z-index to body — that creates
     a stacking context that would trap the negative-z-index video. */
  background: transparent;
  color: var(--ink-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-feature-settings: 'ss01', 'cv11';
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== TYPOGRAPHY UTILS ===== */
.eyebrow {
  display: inline-block;
  color: var(--copper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.055em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.lead {
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink-secondary);
  font-weight: 400;
}
.accent-italic {
  color: var(--gold-1);
  font-style: italic;
  font-weight: 700;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  transition: all 0.2s ease;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 1px 2px rgba(142, 112, 56, 0.22),
    0 8px 24px rgba(142, 112, 56, 0.12);
  text-shadow: 0 1px 1px rgba(80, 60, 24, 0.18);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-hover-1) 0%, var(--gold-hover-2) 55%, var(--gold-2) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 4px rgba(142, 112, 56, 0.25),
    0 12px 32px rgba(142, 112, 56, 0.18);
}
.btn-secondary {
  background: transparent;
  color: var(--ink-primary);
  border: 1px solid var(--ink-primary);
}
.btn-secondary:hover { background: var(--ink-primary); color: #fff; }

/* Bronze button — paired with the gold primary as the Face-to-Face CTA.
   Gold reads as "digital glow" (online), bronze reads as "warm metal"
   (in-person). Equal visual weight, complementary tone. */
.btn-bronze {
  background: linear-gradient(135deg, #C9956A 0%, #A67442 55%, #7A4F26 100%);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 1px 2px rgba(122, 79, 38, 0.22),
    0 8px 24px rgba(122, 79, 38, 0.12);
  text-shadow: 0 1px 1px rgba(60, 38, 14, 0.22);
}
.btn-bronze:hover {
  background: linear-gradient(135deg, #D6A682 0%, #B8835A 55%, #8E5E32 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 2px 4px rgba(122, 79, 38, 0.25),
    0 12px 32px rgba(122, 79, 38, 0.18);
}
.btn-link {
  background: transparent;
  color: var(--ink-primary);
  padding: 13px 0;
  font-weight: 500;
}
.btn-link::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.btn-link:hover { color: var(--copper); }
.btn-link:hover::after { transform: translateX(4px); }
.btn-sm { padding: 9px 20px; font-size: 14px; }

/* ===== NAV ===== */
nav.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(210, 210, 215, 0.4);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px var(--gutter) 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  position: relative;
}
.nav-row { display: flex; align-items: center; }
.nav-row-brand {
  justify-content: center;
  position: relative;
}
.nav-row-brand .nav-menu-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.nav-row-links {
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
/* Brand lockup built from real HTML — logo + wordmark + tagline as flex
   elements that flow into the page background. NOT an image. The animated
   video bg shows through between every element, so the whole banner row
   reads as ONE continuous brand surface from left to right. */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--ink-primary);
  flex-shrink: 1;
  min-width: 0;
}
.nav-logo .brand-mark {
  flex-shrink: 0;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  background: #F5EFE6;
  overflow: hidden;
  filter: drop-shadow(0 4px 14px rgba(122, 74, 20, 0.22));
  transition: transform 0.3s ease;
}
.nav-logo:hover .brand-mark { transform: scale(1.03); }
.nav-logo .brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.nav-logo .brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(135deg, #FFD56A 0%, #F5C24E 45%, #E5B23F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #F5C24E;
  text-shadow: 0 0 18px rgba(245, 194, 78, 0.18);
  white-space: nowrap;
}
.nav-logo .brand-name .i-lower { text-transform: lowercase; }
/* "Co." sits at the end of the brand name — small and subtle, not highlighted */
.nav-logo .brand-name .brand-co {
  display: inline-block;
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.72;
  margin-left: 0.18em;
  vertical-align: middle;
  transform: translateY(-0.08em);
  background: linear-gradient(135deg, #E5C16B 0%, #C9A04B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-logo .brand-tagline {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  color: var(--ink-primary);
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s ease;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--copper); }
.nav-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
}
.nav-menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink-primary);
}

/* spacer for fixed nav (stacked layout: brand row + links row) */
.nav-spacer { height: 160px; }

/* ===== SITE-WIDE FIXED VIDEO BG =====
   Architecture v3: Video is fixed-position viewport coverage. It plays
   continuously regardless of scroll position. Every section of the site
   sits SEMI-TRANSPARENT over it so the pulse glows through the whole
   page from top to bottom. Body tile is the fallback if video doesn't load.

   The mirror-stacked tile reference means the seamless transition is built
   into the loop itself — start and end frames are identical. */
/* Video uses negative z-index so it sits behind all content but stays
   visible in viewport at every scroll position. Body must be transparent
   for this to work — solid body bg would cover the video. */
.site-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  opacity: 1;
}
.site-bg-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,255,255,0.45), rgba(255,255,255,0.12) 70%, rgba(255,255,255,0) 100%);
}

/* ===== BRAND BANNER =====
   Used across every page top — large brand wordmark + tagline lockup.
   Drop-shadow gives lift over the video bg without needing a hard bg. */
.brand-banner {
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 24px;
  height: auto;
  filter: drop-shadow(0 8px 32px rgba(122, 74, 20, 0.12));
}
@media (max-width: 900px) {
  .brand-banner { max-width: 100%; margin-bottom: 16px; }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  background: transparent;
  padding: 64px var(--gutter) 48px;
  text-align: center;
  overflow: visible;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* hero-bg-video and hero-bg-mask deprecated (now site-bg-video at body level) */
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 0 64px;
}
.hero .eyebrow { margin-bottom: 24px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  color: var(--ink-primary);
  margin-bottom: 24px;
}
.hero h1 .accent {
  color: var(--gold-1);
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 0 24px rgba(217, 184, 112, 0.22);
}
.hero .sub {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--ink-secondary);
  max-width: 680px;
  margin: 0 auto 18px;
  font-weight: 400;
}
.hero .supporting {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-primary);
  max-width: 540px;
  margin: 0 auto 40px;
  font-weight: 500;
  letter-spacing: -0.005em;
  opacity: 0.7;
}
.hero .ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.hero-scroll-hint {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  padding-bottom: 32px;
  opacity: 0.6;
}
.hero-scroll-hint::after {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background: var(--ink-tertiary);
  margin: 12px auto 0;
}

/* ===== UI MOCKUP CARD (in hero) — Apple "product shot" replacement =====
   A stylized macOS-window showing a real AI chat conversation. */
.ui-showcase {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: -8px auto 0;
  padding: 0 var(--gutter);
}
.ui-window {
  background: var(--surface-0);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 20px 60px rgba(0,0,0,0.08),
    0 40px 120px rgba(0,0,0,0.06);
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--hairline-soft);
}
.ui-window-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #F5F5F7 0%, #ECECEF 100%);
  border-bottom: 1px solid var(--hairline-soft);
}
.ui-traffic {
  display: flex;
  gap: 6px;
}
.ui-traffic span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.ui-traffic span:nth-child(1) { background: #FF5F57; }
.ui-traffic span:nth-child(2) { background: #FEBC2E; }
.ui-traffic span:nth-child(3) { background: #28C840; }
.ui-window-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--ink-tertiary);
  font-weight: 500;
}
.ui-window-title .lock {
  color: var(--ink-tertiary);
  margin-right: 4px;
}
.ui-window-body {
  padding: 32px 40px 36px;
  background: var(--surface-0);
}
.ui-chat-msg + .ui-chat-msg { margin-top: 22px; }
.ui-chat-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 8px;
}
.ui-chat-role.is-ai { color: var(--copper); }
.ui-chat-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-primary);
}
.ui-chat-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline-soft);
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-secondary);
}
.ui-chat-card .field {
  font-weight: 600;
  color: var(--ink-primary);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.ui-chat-card .field + p { margin-bottom: 12px; }
.ui-chat-cursor {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: var(--copper);
  vertical-align: middle;
  margin-left: 2px;
  animation: blink 1s steps(2, end) infinite;
}
@keyframes blink { from, 50% { opacity: 1; } 51%, to { opacity: 0; } }
.ui-tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(184, 116, 26, 0.08);
  border-radius: 980px;
  font-size: 11px;
  font-weight: 600;
  color: var(--copper);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.ui-tool-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
}

/* ===== VALUE STRIP =====
   Edges transparent so video circuit pattern stays visible; centre wash
   keeps text legible. Radial gradient = "spotlight" on content. */
.value-strip {
  padding: 48px var(--gutter);
  background: transparent;
}
.value-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Tile-style value items — each sits as a solid white card so the
   text stays crisp regardless of what's behind in the video bg. */
.value-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-secondary);
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.value-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-1);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(217, 184, 112, 0.5);
}
.value-item strong { color: var(--ink-primary); font-weight: 700; }

/* ===== SECTION BASE =====
   Radial "spotlight" overlay: centre has enough white wash for content
   legibility, edges fade to fully transparent so the video pulse glows
   through across the left/right circuit-bearing regions of every section.
   IMPORTANT: NO backdrop-filter — that would blur the entire video bg.
   The radial gradient handles legibility on its own. */
.section {
  padding: var(--section-pad-y) var(--gutter);
  background: radial-gradient(ellipse 65% 95% at 50% 50%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 100%);
  position: relative;
}
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-header {
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
}
.section-header .eyebrow { margin-bottom: 18px; }
.section-header h2 { margin-bottom: 18px; }
.section-header p { color: var(--ink-secondary); font-size: 20px; line-height: 1.45; }
.section-alt { background: radial-gradient(ellipse 65% 90% at 50% 50%, rgba(251,251,253,0.92) 0%, rgba(251,251,253,0.6) 55%, rgba(251,251,253,0) 100%); }

/* ===== WHO IT'S FOR ===== */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: 18px;
  overflow: hidden;
}
.audience-card {
  background: var(--surface-0);
  padding: 48px 40px;
  transition: background 0.2s ease;
}
.audience-card:hover { background: var(--surface-1); }
.audience-card .icon {
  margin-bottom: 28px;
  color: var(--copper);
}
.audience-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.audience-card p { color: var(--ink-secondary); font-size: 15px; line-height: 1.55; }

/* ===== HOW IT WORKS — proper tiles ===== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
}
.step {
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--hairline-soft);
  border-radius: 18px;
  padding: 40px 32px 36px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.step .num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-2);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  line-height: 1.2;
}
.step p { color: var(--ink-secondary); font-size: 16px; line-height: 1.55; }

/* ===== SERVICES (UI-led cards) ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--surface-0);
  border: 1px solid var(--hairline-soft);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}
.service-card:hover {
  border-color: var(--copper);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
}
/* Preview area is transparent so the body video bg's glow shows through */
.service-card-preview {
  height: 140px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--hairline-soft);
}
.service-card-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(184,116,26,0.08), transparent 60%);
}
.service-card-body { padding: 32px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.service-card .label {
  color: var(--copper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.service-card .desc { font-size: 15px; line-height: 1.55; color: var(--ink-secondary); margin-bottom: 20px; }
.service-card ul { list-style: none; margin-bottom: 24px; flex: 1; }
.service-card ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-primary);
  margin-bottom: 10px;
}
.service-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 6px;
  border-left: 1.5px solid var(--rose-gold-2);
  border-bottom: 1.5px solid var(--rose-gold-2);
  transform: rotate(-45deg);
}
.service-card .card-cta { margin-top: auto; }

/* Mini UI previews inside service-card-preview */
.mini-intake {
  width: 70%;
  background: var(--surface-0);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 10px;
  color: var(--ink-tertiary);
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.mini-intake .line { height: 6px; background: var(--hairline-soft); border-radius: 2px; margin-bottom: 6px; }
.mini-intake .line.short { width: 60%; }
.mini-intake .line.copper { background: var(--copper); width: 30%; }

.mini-timeline {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.mini-timeline-node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-0);
  border: 1.5px solid var(--copper);
  color: var(--copper);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-timeline-node.active { background: var(--copper); color: #fff; }
.mini-timeline-line {
  height: 1.5px;
  width: 28px;
  background: var(--copper);
  opacity: 0.4;
}

.mini-team {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}
.mini-team .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--surface-0);
  background: var(--copper);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-team .avatar + .avatar { margin-left: -10px; }
.mini-team .avatar:nth-child(2) { background: var(--rose-gold-2); }
.mini-team .avatar:nth-child(3) { background: var(--copper-deep); }
.mini-team .avatar:nth-child(4) { background: var(--ink-primary); }

/* ===== INCLUDED (UI grid) ===== */
.included-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 56px;
}
.included-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.included-item .check {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1.5px solid var(--rose-gold-2);
  background: rgba(184, 151, 88, 0.06);
  color: var(--rose-gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.included-item h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.015em;
}
.included-item p { font-size: 15px; line-height: 1.5; color: var(--ink-secondary); }

/* ===== WHY US (dark interrupt) ===== */
.why-us {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  padding: var(--section-pad-y) var(--gutter);
  position: relative;
  overflow: hidden;
}
.why-us::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./assets/web/hero-circuit-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  filter: invert(1) hue-rotate(180deg);
}
.why-us-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  text-align: center;
}
.why-us .eyebrow { color: var(--copper-hover); margin-bottom: 24px; }
.why-us h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  color: var(--ink-on-dark);
  margin-bottom: 56px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.why-us h2 .accent { color: var(--rose-gold-1); font-style: italic; font-weight: 700; }
.why-us-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: left;
  margin-top: 72px;
}
.why-us-point h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-on-dark);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.why-us-point p { font-size: 14px; line-height: 1.6; color: var(--ink-on-dark-mute); }
.why-us-point .num-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--copper-hover);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

/* ===== PRICING ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: 20px;
  overflow: hidden;
}
.pricing-card {
  background: var(--surface-0);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.2s ease;
}
.pricing-card:hover { background: var(--surface-1); }
.pricing-card.is-featured {
  background: linear-gradient(180deg, rgba(184, 151, 88, 0.04), var(--surface-0) 30%);
}
.pricing-card .popular-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  background: linear-gradient(135deg, var(--rose-gold-1), var(--rose-gold-2));
  color: #fff;
  padding: 4px 12px;
  border-radius: 980px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pricing-card .tier-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 16px;
}
.pricing-card .price {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.055em;
  color: var(--ink-primary);
  margin-bottom: 6px;
  line-height: 1;
}
.pricing-card .price .from {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-secondary);
  letter-spacing: 0;
  margin-right: 4px;
}
.pricing-card .duration { font-size: 13px; color: var(--ink-secondary); margin-bottom: 32px; }
.pricing-card .who { font-size: 14px; color: var(--ink-secondary); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline-soft); }
.pricing-card ul { list-style: none; margin-bottom: 32px; flex: 1; }
.pricing-card ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-primary);
  margin-bottom: 11px;
}
.pricing-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 6px;
  border-left: 1.5px solid var(--rose-gold-2);
  border-bottom: 1.5px solid var(--rose-gold-2);
  transform: rotate(-45deg);
}
.pricing-card .btn { width: 100%; justify-content: center; }

/* ===== COMING NEXT ===== */
.coming-next {
  padding: 96px var(--gutter);
  background: var(--surface-1);
  text-align: center;
}
.coming-next-inner { max-width: 880px; margin: 0 auto; }
.coming-next .eyebrow { color: var(--rose-gold-2); margin-bottom: 16px; }
.coming-next h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.coming-next p {
  color: var(--ink-secondary);
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 36px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.chip {
  padding: 8px 18px;
  background: var(--surface-0);
  border: 1px solid var(--hairline-soft);
  border-radius: 980px;
  font-size: 13px;
  color: var(--ink-secondary);
  font-weight: 500;
}

/* ===== FINAL CTA ===== */
.final-cta {
  padding: 80px var(--gutter) 96px;
  background: var(--surface-0);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(184, 151, 88, 0.06), transparent 70%);
}
.final-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.final-cta h2 .accent { color: var(--gold-1); font-style: italic; font-weight: 700; text-shadow: 0 0 24px rgba(217, 184, 112, 0.22); }
.final-cta p { font-size: 20px; color: var(--ink-secondary); margin-bottom: 44px; line-height: 1.4; }
.final-cta .ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===== FOOTER ===== */
footer.site-footer {
  background: var(--surface-deep-brown);
  color: rgba(248, 245, 240, 0.72);
  padding: 72px var(--gutter) 32px;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(248, 245, 240, 0.08);
}
.footer-brand .logo-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand .logo-wrap img { height: 56px; width: 56px; border-radius: 50%; object-fit: cover; }
.footer-brand .logo-wrap .wordmark {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #FFD56A 0%, #F5C24E 45%, #E5B23F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #F5C24E;
  text-shadow: 0 0 18px rgba(245, 194, 78, 0.18);
}
.footer-brand .logo-wrap .i-lower { text-transform: lowercase; }
.footer-brand p { font-size: 14px; line-height: 1.6; max-width: 320px; color: rgba(248, 245, 240, 0.5); }
.footer-col h4 {
  color: #F8F5F0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a {
  color: rgba(248, 245, 240, 0.6);
  font-size: 14px;
  transition: color 0.2s ease;
}
.footer-col ul li a:hover { color: var(--copper-hover); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-size: 12px;
  color: rgba(248, 245, 240, 0.4);
}
.footer-bottom a { color: rgba(248, 245, 240, 0.55); }
.footer-bottom a:hover { color: var(--copper-hover); }

/* Footer Social Section */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 0;
  border-bottom: 1px solid rgba(248, 245, 240, 0.08);
}
.footer-social-text h4 {
  color: #F8F5F0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.footer-social-text p {
  font-size: 13px;
  color: rgba(248, 245, 240, 0.45);
  line-height: 1.4;
}
.footer-social-icons {
  display: flex;
  gap: 12px;
}
.social-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(248, 245, 240, 0.1);
  background: rgba(248, 245, 240, 0.04);
  color: rgba(248, 245, 240, 0.6);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
}
.social-icon:hover {
  border-color: var(--copper);
  color: var(--copper);
  background: rgba(194, 154, 108, 0.08);
  transform: translateY(-2px);
}
.social-icon svg {
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.social-icon:hover svg { opacity: 1; }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .audience-grid,
  .services-grid,
  .pricing-grid,
  .steps-grid { grid-template-columns: 1fr; }
  .why-us-points { grid-template-columns: repeat(2, 1fr); }
  .included-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-social { flex-direction: column; text-align: center; gap: 20px; }
  .footer-social-icons { flex-wrap: wrap; justify-content: center; }
  .ui-window-body { padding: 24px 24px 28px; }
}
/* Stacked nav: row 1 = brand centered, row 2 = nav-links + CTA centered.
   Below ~980px the nav-links row stops fitting horizontally on one line,
   so we collapse row 2 into a hamburger dropdown that opens below the
   entire fixed nav. */
@media (max-width: 980px) {
  /* Don't hide the entire .nav-row-links — a hidden parent would also hide
     .nav-links.is-open and the dropdown would never appear. Instead, let
     the wrapper continue to exist but collapse it to zero height while its
     contents (the inline link list + CTA) hide individually. */
  .nav-row-links {
    height: 0;
    overflow: visible;        /* dropdown is position:absolute, must escape */
    padding: 0;
    margin: 0;
  }
  .nav-row-links .nav-links { display: none; }
  .nav-row-links .nav-controls { display: none; }
  .nav-menu-toggle { display: flex; }
  .nav-spacer { height: 112px; }
  .nav-inner { gap: 0; padding-bottom: 14px; }
  /* Dropdown panel — opens below the entire fixed nav (top: 100%) */
  .nav-links.is-open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: 0;
    margin: 0;
    padding: 8px 0 12px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
    z-index: 110;
  }
  .nav-links.is-open li { width: 100%; }
  .nav-links.is-open li a {
    display: block;
    width: 100%;
    padding: 14px var(--gutter);
    font-size: 16px;
    border-bottom: 1px solid var(--hairline);
  }
  .nav-links.is-open li:last-child a { border-bottom: 0; }
}
@media (max-width: 900px) {
  .nav-spacer { height: 88px; }
  .nav-logo .brand-mark { height: 56px; width: 56px; }
  .nav-logo .brand-name { font-size: 16px; letter-spacing: 0.04em; }
  .nav-logo .brand-tagline { font-size: 9px; letter-spacing: 0.18em; }
  .nav-logo { gap: 12px; }
  .hero { padding: 56px var(--gutter) 40px; min-height: 70vh; }
  .value-strip-inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  .section { padding: var(--section-pad-y-mobile) var(--gutter); }
  .section-header { margin-bottom: 48px; }
}
@media (max-width: 560px) {
  .value-strip-inner { grid-template-columns: 1fr; }
  .why-us-points { grid-template-columns: 1fr; }
  .hero .ctas, .final-cta .ctas { width: 100%; flex-direction: column; }
  .hero .ctas .btn, .final-cta .ctas .btn { width: 100%; justify-content: center; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .social-icon span { display: none; }
  .social-icon { padding: 12px; border-radius: 50%; }
  .ui-window-body { padding: 20px 18px 24px; }
}

/* Reduced motion — hide video, static poster still shows */
@media (prefers-reduced-motion: reduce) {
  .site-bg-video, .hero-bg-video { display: none; }
}

/* MOBILE FIX — iOS Safari + some Android browsers have known issues with
   position:fixed autoplay video: it freezes after first scroll, or just
   refuses to paint. Below 900px we hide the video and paint the static
   circuit poster directly on the html element as a fixed background.
   Same visual identity, no video rendering quirks. */
@media (max-width: 900px) {
  .site-bg-video { display: none; }
  html {
    background-color: #FFFFFF;
    background-image: url('./assets/web/circuit-still.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* Some Android Chromes can't do background-attachment: fixed properly —
   degrade gracefully to scroll attachment on very small screens */
@media (max-width: 560px) {
  html { background-attachment: scroll; }
}

/* Why-us dark section also tiles the circuit (inverted) for visual continuity */
.why-us {
  background: rgba(29, 29, 31, 0.96);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Coming next + final CTA — radial spotlight, edges fade for video bleed */
.coming-next {
  background: radial-gradient(ellipse 65% 95% at 50% 50%, rgba(251,251,253,0.94) 0%, rgba(251,251,253,0.6) 55%, rgba(251,251,253,0) 100%);
}
.final-cta {
  background: radial-gradient(ellipse 65% 95% at 50% 50%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 100%);
}

/* ============================================================
   MOBILE ENRICHMENT — v2.1 · 2026-05-22
   Mobile-only visual upgrades. Desktop (>900px) is UNCHANGED.
   The site-bg-video is disabled below 900px (iOS Safari fix),
   so this block adds CSS-only motion + copper warmth + section
   rhythm that compensates for the missing video pulse.

   Architecture: every rule below is wrapped in @media (max-width:
   900px) or @media (max-width: 560px). Keyframes are defined
   globally but only referenced by mobile rules — so animations
   never run on desktop.
   ============================================================ */

@media (max-width: 900px) {

  /* --- Nav logo presence bump (was 56px → 72px, stronger brand) --- */
  .nav-logo .brand-mark {
    height: 72px;
    width: 72px;
    filter: drop-shadow(0 4px 16px rgba(184, 116, 26, 0.32));
  }
  .nav-logo .brand-name { font-size: 18px; }
  .nav-logo .brand-tagline { font-size: 10px; letter-spacing: 0.2em; }

  /* --- Full-viewport BRIGHTENING wash (mobile only) ---
     v2.3 fix: previous saturated copper overlay was layering on top of
     the already-dark circuit poster -> compounded into darkness.
     Now: a light cream-white wash LIGHTENS the page, with a small
     warm bloom only at the very top. Per-tab accent hue is added
     below via .page-* body classes. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(255, 250, 240, 0.55) 0%,
        rgba(255, 252, 245, 0.32) 35%,
        rgba(255, 255, 255, 0.20) 100%),
      radial-gradient(ellipse 90% 35% at 50% 0%, rgba(217, 184, 112, 0.16), transparent 70%);
  }

  /* Per-tab accent hue — subtle, only visible as a top-of-page warm bloom */
  body.page-home::before {
    background:
      linear-gradient(180deg, rgba(255, 250, 240, 0.55) 0%, rgba(255, 252, 245, 0.32) 35%, rgba(255, 255, 255, 0.20) 100%),
      radial-gradient(ellipse 90% 35% at 50% 0%, rgba(217, 184, 112, 0.18), transparent 70%);
  }
  body.page-services::before {
    background:
      linear-gradient(180deg, rgba(252, 250, 245, 0.55) 0%, rgba(255, 252, 248, 0.32) 35%, rgba(255, 255, 255, 0.20) 100%),
      radial-gradient(ellipse 90% 35% at 50% 0%, rgba(232, 198, 130, 0.18), transparent 70%);
  }
  body.page-pricing::before {
    background:
      linear-gradient(180deg, rgba(255, 248, 238, 0.55) 0%, rgba(255, 252, 245, 0.32) 35%, rgba(255, 255, 255, 0.20) 100%),
      radial-gradient(ellipse 90% 35% at 50% 0%, rgba(184, 116, 26, 0.20), transparent 70%);
  }
  body.page-contact::before {
    background:
      linear-gradient(180deg, rgba(255, 252, 245, 0.55) 0%, rgba(255, 254, 250, 0.32) 35%, rgba(255, 255, 255, 0.20) 100%),
      radial-gradient(ellipse 90% 35% at 50% 0%, rgba(245, 215, 165, 0.16), transparent 70%);
  }

  /* --- Per-tab circuit accent strip — thin animated copper line under nav,
     a subtle "circuit signature" that signals which tab you're on. --- */
  body::after {
    content: "";
    position: fixed;
    top: 96px;  /* sits just below the mobile nav (nav-spacer height) */
    left: 0;
    right: 0;
    height: 1px;
    z-index: 99;
    pointer-events: none;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--copper) 25%,
      var(--gold-1) 50%,
      var(--copper) 75%,
      transparent 100%);
    opacity: 0.5;
    animation: mobile-circuit-pulse 6s ease-in-out infinite;
  }
  body.page-services::after {
    background: linear-gradient(90deg,
      transparent 0%, var(--gold-2) 25%, var(--gold-1) 50%, var(--gold-2) 75%, transparent 100%);
  }
  body.page-pricing::after {
    background: linear-gradient(90deg,
      transparent 0%, var(--copper-deep) 25%, var(--copper) 50%, var(--copper-deep) 75%, transparent 100%);
  }
  body.page-contact::after {
    background: linear-gradient(90deg,
      transparent 0%, var(--gold-1) 25%, var(--gold-hover-1) 50%, var(--gold-1) 75%, transparent 100%);
  }

  /* --- Hero copper aurora — toned down for v2.3 (was too dark at 0.42/0.34/0.28). --- */
  .hero { position: relative; overflow: hidden; }
  .hero::before {
    content: "";
    position: absolute;
    inset: -10% -20%;
    background:
      radial-gradient(circle at 30% 30%, rgba(184, 116, 26, 0.26), transparent 55%),
      radial-gradient(circle at 70% 60%, rgba(217, 184, 112, 0.22), transparent 60%),
      radial-gradient(circle at 50% 100%, rgba(232, 162, 77, 0.16), transparent 65%);
    z-index: 0;
    pointer-events: none;
    animation: mobile-aurora 14s ease-in-out infinite alternate;
    filter: blur(22px);
  }
  .hero-inner { position: relative; z-index: 2; }

  /* Hero eyebrow underline accent */
  .hero .eyebrow,
  .section-header .eyebrow {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
  }
  .hero .eyebrow::after,
  .section-header .eyebrow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 36px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--copper) 50%, transparent);
  }

  /* Hero h1 accent — slow gold shimmer (no video on mobile, so headline moves) */
  .hero h1 .accent {
    background: linear-gradient(120deg,
      var(--gold-1) 0%,
      var(--gold-2) 30%,
      var(--gold-1) 50%,
      var(--gold-2) 70%,
      var(--gold-1) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mobile-shimmer 6s ease-in-out infinite;
  }

  /* --- Section divider hairlines — copper gradient between stacked sections --- */
  .section + .section::before,
  .value-strip + .section::before,
  .section + .value-strip::before,
  .section + .why-us::before,
  .why-us + .section::before,
  .section + .coming-next::before,
  .coming-next + .final-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--copper) 50%, transparent);
    opacity: 0.4;
    pointer-events: none;
  }
  .section + .section,
  .value-strip + .section,
  .section + .value-strip,
  .section + .why-us,
  .why-us + .section,
  .section + .coming-next,
  .coming-next + .final-cta { position: relative; }

  /* --- Card copper-bar accent — left-edge ribbon gives stacked cards rhythm --- */
  .audience-card,
  .service-card,
  .included-item,
  .pricing-card {
    position: relative;
    box-shadow:
      0 6px 24px rgba(122, 74, 20, 0.10),
      0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .audience-card::after,
  .service-card::after,
  .included-item::after,
  .pricing-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 3px;
    background: linear-gradient(180deg,
      var(--copper) 0%,
      var(--gold-1) 50%,
      var(--copper-deep) 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 12px rgba(184, 116, 26, 0.35);
  }
  .audience-card:active,
  .service-card:active,
  .included-item:active,
  .pricing-card:active {
    transform: translateY(-2px);
    box-shadow:
      0 12px 32px rgba(184, 116, 26, 0.20),
      0 1px 3px rgba(0, 0, 0, 0.06);
  }

  /* Value-strip dots — copper glow on mobile */
  .value-item .dot {
    background: radial-gradient(circle, var(--gold-1) 0%, var(--copper) 100%);
    box-shadow: 0 0 12px rgba(184, 116, 26, 0.45);
  }

  /* Primary CTA — subtle breathing animation (mobile only) */
  .btn-primary {
    animation: mobile-cta-breathe 4s ease-in-out infinite;
  }
  .btn-primary:active {
    transform: scale(0.98);
    animation: none;
  }
}

/* --- More refined treatment on phones (≤560px) --- */
@media (max-width: 560px) {
  .nav-logo .brand-mark { height: 64px; width: 64px; }
  .hero h1 { font-size: clamp(36px, 9vw, 52px); }
  .hero::before { filter: blur(28px); }
  /* Tighter divider on narrow phones */
  .section + .section::before,
  .value-strip + .section::before,
  .section + .value-strip::before,
  .section + .why-us::before,
  .why-us + .section::before,
  .section + .coming-next::before,
  .coming-next + .final-cta::before {
    left: 28%;
    right: 28%;
  }
}

/* --- Mobile-only keyframes (referenced only by rules inside @media above) --- */
@keyframes mobile-aurora {
  0%   { transform: translate(0%, 0%) scale(1);    opacity: 0.85; }
  50%  { transform: translate(2%, -1%) scale(1.04); opacity: 1; }
  100% { transform: translate(-1%, 2%) scale(0.98); opacity: 0.9; }
}
@keyframes mobile-shimmer {
  0%   { background-position: 100% 0%; }
  100% { background-position: -100% 0%; }
}
@keyframes mobile-cta-breathe {
  0%, 100% { box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.32),
      0 1px 2px rgba(142, 112, 56, 0.22),
      0 8px 24px rgba(142, 112, 56, 0.12); }
  50%      { box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.40),
      0 2px 4px rgba(184, 151, 88, 0.30),
      0 12px 32px rgba(184, 116, 26, 0.22); }
}
@keyframes mobile-circuit-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.65; }
}

/* ===== TESTIMONIALS CONVEYOR ===== */
.testimonials {
  background: var(--surface-deep-brown);
  padding: var(--section-pad-y) 0;
  overflow: hidden;
  position: relative;
}
.testimonials .section-header {
  text-align: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-bottom: 56px;
}
.testimonials .eyebrow { color: var(--gold-2); }
.testimonials h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--ink-on-dark);
  margin-top: 12px;
}
.testimonials h2 .accent { color: var(--gold-1); }
.testimonials-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-on-dark-mute);
  letter-spacing: 0.02em;
}
.testimonials-stats span::before {
  content: '·';
  margin-right: 0;
  display: none;
}
.testimonials-stats span:not(:first-child)::before {
  display: inline;
  margin-right: 8px;
  color: var(--gold-3);
}

/* Track — the moving belt */
.testimonials-belt {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: testimonial-scroll 45s linear infinite;
}
.testimonials-belt:hover {
  animation-play-state: paused;
}

@keyframes testimonial-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual card */
.testimonial-card {
  flex-shrink: 0;
  width: 360px;
  background: var(--surface-cream);
  border-radius: 16px;
  padding: 32px 28px 28px;
  position: relative;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.08),
    0 12px 40px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.12),
    0 20px 48px rgba(0,0,0,0.10);
}

/* Decorative quote mark */
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 16px;
  left: 22px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 80px;
  line-height: 1;
  color: var(--copper);
  opacity: 0.15;
  pointer-events: none;
}

.testimonial-quote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-primary);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.testimonial-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-primary);
  line-height: 1.3;
}
.testimonial-role {
  font-size: 13px;
  color: var(--ink-tertiary);
  line-height: 1.3;
}

/* Responsive */
@media (max-width: 768px) {
  .testimonials { padding: var(--section-pad-y-mobile) 0; }
  .testimonials .section-header { margin-bottom: 36px; }
  .testimonial-card { width: 300px; padding: 28px 24px 24px; }
  .testimonial-card::before { font-size: 60px; top: 14px; left: 18px; }
  .testimonial-quote { font-size: 14px; }
  .testimonials-stats { gap: 16px; font-size: 13px; }
  .testimonials-belt { gap: 16px; }
}

/* Respect reduced motion preference — kill the mobile animations */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .hero h1 .accent { animation: none; }
  .btn-primary { animation: none; }
  body::after { animation: none; }
  .testimonials-belt { animation: none; }
}