/* ===================== Brand tokens ===================== */
:root {
  --color-bg: #000000;
  --color-green: #bcd044;
  --color-green-bright: #d4de6b;
  --color-green-deep: #7d8f2e;
  --color-text: #ffffff;
  --color-text-muted: #a8a8a8;
  /* light-section tokens — alternates with the black hero/dark sections */
  --color-cream: #fbfaf3;
  --color-ink: #16180c;
  --color-ink-muted: #55583f;
  --color-tint: #f2f4e2; /* pale olive tint for default grid-item bg */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

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

/* ===================== Line-breaking / orphan control =====================
   Danny's standing rule: never leave a line with just one word on it.

   `balance` evens out the lines of short multi-line text (headings, eyebrows,
   CTA lines), which is what stops a heading wrapping to a lone trailing word.
   `pretty` is the body-copy equivalent: it specifically avoids leaving an
   orphan on the final line of a paragraph.

   Both are progressive enhancements — browsers that don't support them just
   ignore the declaration and wrap as before, so there's no fallback risk.
   `balance` is deliberately NOT used on long paragraphs: browsers cap it at a
   few lines and silently give up past that, which is why body copy gets
   `pretty` instead. */
h1, h2, h3, h4, h5, h6,
.eyebrow,
.section-title-dark,
.section-title-light,
.hero-headline,
.rp-headline,
.rp-closing,
.final-cta-headline,
.audit-cta-line,
.grid-label,
.sites-strip-label,
.process-label,
.footer-col-label,
.service-label,
.site-shot-tag,
.site-shot span,
/* free-audit.html shares this stylesheet — its eyebrows are <p> elements, so
   they need naming here to beat the paragraph rule below on specificity */
.audit-hero-eyebrow,
.audit-checklist-eyebrow,
.audit-checklist-title,
.audit-form-title {
  text-wrap: balance;
}

p,
li,
figcaption,
.hero-subhead,
.section-subhead-dark,
.process-subhead,
.rp-body,
.service-body,
.final-cta-body,
.final-cta-closer,
.process-body {
  text-wrap: pretty;
}

/* ===================== Hero ===================== */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(188, 208, 68, 0.08) 0%, rgba(0,0,0,0) 60%),
    #000000;
}

.hero-bg-placeholder::after {
  content: "Spline scene goes here — send the Share/Embed link";
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.02em;
}

.hero-bg-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000000; /* avoids a white flash while the scene loads */
  pointer-events: none; /* the scene's own cursor-tracking still works; this just stops scroll/click capture */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* olive-green glow, centered roughly where the headline/CTA sit — lifts the
       section out of flat black without washing out the Spline trails */
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(188, 208, 68, 0.16) 0%, rgba(188, 208, 68, 0) 70%),
    /* vignette: keeps the navbar strip and section edges reading as pure black */
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.2) 65%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

/* ===================== Navbar ===================== */
.navbar {
  position: relative;
  /* Higher than .hero-content's z-index:2 — they're siblings, and equal
     z-index falls back to DOM order (hero-content comes after navbar in
     the markup, so it would otherwise paint over the open mobile menu). */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
}

.nav-logo img {
  /* 45px, not 40px — the crop got ~13% taller to fit the full "MARKETING" word,
     so this compensates to keep CENOVATE the same visual size as before */
  height: 45px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--color-green);
}

.nav-cta {
  background: var(--color-green);
  color: #000;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.nav-cta:hover {
  background: var(--color-green-bright);
}

/* Hamburger toggle — desktop-hidden, mobile-only (see media query below) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* 3 bars -> X, driven by aria-expanded (no extra JS-toggled class needed
   for the icon itself, just reads the same attribute the toggle already sets) */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

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

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(188, 208, 68, 0.15);
    padding: 8px 24px 24px;
    /* Collapsed by default — max-height/opacity animate open instead of
       display:none, so the close transition doesn't just snap instantly. */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

  .nav-links.is-open {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  .nav-cta {
    margin-top: 12px;
    text-align: center;
  }
}

/* ===================== Hero content ===================== */
.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .hero-content {
    /* Dead-center vertical alignment leaves a big empty gap above the
       headline on mobile, since the content block is much shorter than
       the leftover space below the navbar in a min-height:100vh hero.
       Pulling it toward the top instead reads much closer to the nav. */
    justify-content: flex-start;
    padding-top: 64px;
  }
}

.hero-headline {
  font-size: clamp(2.1rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  /* Growaz-style full-headline gradient: near-white at the top, warming into
     the brand green by the last line — one continuous blend, not per-word. */
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 32%, #e8edc4 50%, var(--color-green-bright) 70%, var(--color-green) 90%, #7d8f2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* One word breaks from the bold sans into an italic serif — the gradient fill
   comes from the parent .hero-headline (background-clip:text cascades to it),
   this just changes the letterform. */
.accent-word {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
}

.hero-subhead {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background: var(--color-green);
  color: #000;
}

.btn-primary:hover {
  background: var(--color-green-bright);
  transform: translateY(-2px);
}

/* Attention pulse for the two main "Get My Free Marketing Audit" buttons
   (hero + The Free Audit section). Deliberately an expanding shadow ring
   rather than a scale() pulse: .btn-primary:hover already owns transform
   (translateY(-2px)), and a transform-based keyframe would override the
   hover lift while running. Shadow-only keeps both effects independent.
   Pauses on hover so the hover state reads cleanly once engaged. */
@keyframes cta-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(188, 208, 68, 0.55);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(188, 208, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(188, 208, 68, 0);
  }
}

.btn-pulse {
  animation: cta-pulse 2.2s ease-out infinite;
}

.btn-pulse:hover {
  animation-play-state: paused;
  box-shadow: 0 0 28px 6px rgba(188, 208, 68, 0.45);
}

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

.btn-outline {
  position: relative;
  background: transparent;
  color: var(--color-green);
  border: 1px solid rgba(188, 208, 68, 0.5);
}

.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(188, 208, 68, 0.35);
}

/* PLACEHOLDER: full animated glow-outline effect (task #5) — basic hover glow for now */

/* ===================== What I Do (light section) ===================== */
.what-i-do {
  background: var(--color-cream);
  color: var(--color-ink);
  padding: 100px 48px 120px;
  overflow-x: hidden; /* GSAP directional slide-ins shouldn't cause a transient horizontal scrollbar */
}

.section-header {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.eyebrow-dark {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-green-deep);
  margin-bottom: 12px;
}

.section-title-dark {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.section-subhead-dark {
  font-size: 17px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* --- Primary 3 cards: default white, hover gains a green tint --- */
.service-cards-primary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.service-card-primary {
  background: #ffffff;
  border-top: 4px solid var(--color-green);
  border-radius: 4px;
  padding: 28px 26px 32px;
  transition: background 0.25s ease;
}

.service-card-primary:hover {
  background: #eef2d9; /* light olive tint appears on hover */
}

.service-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-green-deep);
  margin-bottom: 10px;
}

.service-card-primary h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.service-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-muted);
}

/* --- "Everything I Handle" divider label --- */
.grid-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
  max-width: 1200px;
  margin: 0 auto 28px;
  padding-top: 32px;
  border-top: 1px solid rgba(22, 24, 12, 0.1);
}

/* --- Secondary 4-item grid: default tinted, hover flips to white
   (deliberately reversed from the primary cards, per Danny's call) --- */
.service-grid-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-grid-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-tint);
  border-left: 3px solid rgba(125, 143, 46, 0.4);
  border-radius: 2px;
  padding: 22px 24px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.service-grid-item:hover {
  background: #ffffff;
  border-left-color: var(--color-green-deep);
}

.service-grid-text h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.service-grid-text p {
  font-size: 14px;
  color: var(--color-ink-muted);
  line-height: 1.5;
}

.grid-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  color: var(--color-ink-muted);
  stroke: currentColor;
  transition: color 0.25s ease;
}

.service-grid-item:hover .grid-icon {
  color: var(--color-green-deep);
}

@media (max-width: 900px) {
  .service-cards-primary {
    grid-template-columns: 1fr;
  }
  .service-grid-secondary {
    grid-template-columns: 1fr;
  }
}

/* ===================== Positioning ticker ===================== */
.ticker-bar {
  background: #000000;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(188, 208, 68, 0.15);
  border-bottom: 1px solid rgba(188, 208, 68, 0.15);
}

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

.ticker-bar:hover .ticker-track {
  animation-play-state: paused;
}

.ticker-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ticker-set span:not(.ticker-dot) {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 18px 20px;
}

.ticker-dot {
  color: var(--color-green);
  font-size: 18px;
  line-height: 0;
}

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

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

/* ===================== The Real Problem (dark section) ===================== */
.real-problem {
  position: relative;
  overflow: hidden;
  background: #000000;
  padding: 130px 24px;
  text-align: center;
}

/* Translucent green tint over .real-problem's own black background — this is
   what creates the visible top-to-bottom wash. (Previously layered above a
   Spline mouse-follow smoke iframe, removed 2026-09-11; the gradient was
   always what actually produced the glow, so it stands fine on its own.) */
.rp-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Bottom stop (0.22 at 100%) washes back up toward Projects' top wash below
     it, same seam-blend technique as Free Audit → Footer. */
  background:
    radial-gradient(ellipse 55% 35% at 50% 8%, rgba(188, 208, 68, 0.28) 0%, rgba(188, 208, 68, 0) 70%),
    linear-gradient(180deg, rgba(188, 208, 68, 0.55) 0%, rgba(188, 208, 68, 0.22) 30%, rgba(188, 208, 68, 0) 65%, rgba(188, 208, 68, 0.22) 100%);
}

.real-problem-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.real-problem .eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-green-bright);
  margin-bottom: 20px;
}

.rp-headline {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 32px;
}

.rp-body {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
}

.rp-divider {
  width: 56px;
  height: 2px;
  background: var(--color-green);
  margin: 36px auto;
}

.rp-closing {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: #ffffff;
}

/* ===================== Audit CTA blocks (sprinkled secondary CTAs) =====================
   Secondary route into the free-audit page for visitors who wouldn't click the
   main "Get My Free Marketing Audit" button but are curious what's inside it.

   Structured as a standalone CTA block (bold line on its own row + a real
   button beneath it), NOT a link buried inside a sentence. The first version
   was a question with an inline arrow-link inside a <p>, which read as body
   copy and wrapped badly on mobile. This follows the same shape as the NYWT
   landing page's "Call For Instant Pricing!" + [Call Now] pattern. */
.audit-cta {
  margin-top: 56px;
  text-align: center;
}

.audit-cta-line {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  margin-bottom: 18px;
  /* keeps the line breaking at a sensible width instead of running edge to
     edge on tablet widths */
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.audit-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 999px;
  border: 2px solid var(--color-green);
  background: transparent;
  color: var(--color-green-bright);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.audit-cta-btn:hover {
  background: var(--color-green);
  color: #0a0a0a;
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(188, 208, 68, 0.35);
}

.audit-cta-btn .arrow {
  transition: transform 0.25s ease;
}

.audit-cta-btn:hover .arrow {
  transform: translateX(3px);
}

/* Light-background variant — What I Do sits on the cream section, where the
   standard yellow-green has almost no contrast. */
.audit-cta.on-light .audit-cta-line {
  color: var(--color-ink);
}

.audit-cta.on-light .audit-cta-btn {
  border-color: var(--color-green-deep);
  color: var(--color-green-deep);
}

.audit-cta.on-light .audit-cta-btn:hover {
  background: var(--color-green-deep);
  color: #ffffff;
  box-shadow: 0 0 24px rgba(125, 143, 46, 0.3);
}

/* Compact variant for the Process section's "Discovery & Audit" card — the
   card already supplies its own heading/body as the lead-in, so no CTA line
   here. Deliberately NOT a pill: inside an already-bordered card a second
   bordered box reads as a box-in-a-box, so this one is a plain text + arrow
   link, left-aligned to the card's own copy. */
.audit-cta-inline {
  margin-top: 16px;
  text-align: left;
}

.audit-cta-inline .audit-cta-btn {
  display: inline-flex;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
}

.audit-cta-inline .audit-cta-btn:hover {
  background: transparent;
  color: #ffffff;
  transform: none;
  box-shadow: none;
}

@media (max-width: 600px) {
  .audit-cta {
    margin-top: 44px;
  }

  /* Full-width tap target on phones — this is where the old inline-link
     version read worst. Does NOT apply to .audit-cta-inline (the Process
     card's plain text link), which stays inline/left-aligned at every width;
     its own two-class rules above already outrank this on specificity. */
  .audit-cta-btn {
    display: flex;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 16px 22px;
  }
}

/* ===================== Projects (dark section) ===================== */
.projects {
  position: relative;
  overflow: hidden;
  background:
    /* top wash — merges with The Real Problem section's bottom wash into one
       continuous glow at the seam, same technique as Free Audit → Footer. */
    linear-gradient(180deg, rgba(188, 208, 68, 0.22) 0%, rgba(188, 208, 68, 0) 16%),
    /* second glow sitting in the gap between the reel cards and the site
       screenshot strip, so the two rows feel bridged rather than two
       disconnected blocks sitting on flat black */
    radial-gradient(ellipse 60% 30% at 50% 68%, rgba(188, 208, 68, 0.16) 0%, rgba(188, 208, 68, 0) 70%),
    /* olive glow centered behind the reel cards row specifically, not the
       header or the site-screenshot strip below it */
    radial-gradient(ellipse 65% 45% at 50% 42%, rgba(188, 208, 68, 0.18) 0%, rgba(188, 208, 68, 0) 70%),
    #000000;
  padding: 110px 48px 100px;
}

.projects .section-header {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.projects .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-green-bright);
  margin-bottom: 16px;
}

.section-title-light {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
}

/* --- Reel cards: 9:16, thumbnail by default, video plays on hover --- */
.project-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 64px;
}

.project-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: #111111;
  cursor: pointer;
}

.project-thumb,
.project-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease, transform 0.5s ease;
}

.project-video {
  opacity: 0;
}

.project-card.is-playing .project-video {
  opacity: 1;
}

.project-card.is-playing .project-thumb {
  opacity: 0;
}

.project-card:hover .project-thumb {
  transform: scale(1.04);
}

.project-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

/* Play button — visible on the static thumbnail by default so it's obvious
   the card is a playable video (hover isn't discoverable on touch devices).
   Fades out once the card starts playing (hover OR this button), same as
   the thumbnail image. */
.project-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.project-play-button svg {
  width: 22px;
  height: 22px;
  margin-left: 3px; /* optical centering — a play triangle looks off-center otherwise */
}

.project-play-button:hover {
  background: rgba(188, 208, 68, 0.85);
  border-color: rgba(188, 208, 68, 0.85);
  color: #000000;
  transform: translate(-50%, -50%) scale(1.08);
}

.project-card.is-playing .project-play-button {
  opacity: 0;
  pointer-events: none;
}

/* Mute toggle — video starts muted and stays that way until clicked, since
   hover alone isn't a strong enough browser permission for audio (Safari/
   iOS especially). Hidden until the card is actually playing, so it's not
   clutter on the static thumbnail. */
.project-mute-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}

.project-card.is-playing .project-mute-toggle {
  opacity: 1;
  pointer-events: auto;
}

.project-mute-toggle:hover {
  background: rgba(188, 208, 68, 0.85);
  border-color: rgba(188, 208, 68, 0.85);
  color: #000000;
}

.project-mute-toggle svg {
  width: 17px;
  height: 17px;
}

.project-mute-toggle .icon-unmuted {
  display: none;
}

.project-mute-toggle[aria-pressed="true"] .icon-muted {
  display: none;
}

.project-mute-toggle[aria-pressed="true"] .icon-unmuted {
  display: block;
}

.project-tags {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-green-bright);
  margin-bottom: 6px;
}

.project-name {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
}

/* Instagram profile link — only present on cards where the client has an
   active IG account we want to point to (not every reel card has one).
   Parent .project-overlay is pointer-events:none so text doesn't block the
   video hover/click area; this re-enables pointer events just for itself. */
.project-ig-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  pointer-events: auto;
  width: fit-content;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.project-ig-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.project-ig-link:hover {
  background: var(--color-green-bright);
  border-color: var(--color-green-bright);
  color: #000000;
}

/* --- Site screenshot strip --- */
.sites-strip-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.sites-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.site-shot {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.site-shot:hover {
  border-color: rgba(188, 208, 68, 0.4);
  transform: translateY(-3px);
}

.site-shot-static {
  /* Still not a link (Mediquip's live site is dated Wix work, not linked
     on purpose) — but the hover LIFT is purely cosmetic polish, so it now
     matches Parkway/NYWT's hover instead of feeling broken/inconsistent. */
  cursor: default;
}

/* Two shots per site — stacked vertically, full width, natural aspect
   ratio (no aspect-ratio/object-fit crop). Side-by-side at 50% width was
   cropping real content out of each screenshot, which defeated the point
   of showing the full section. Same stacked treatment at every screen
   size, so nothing needs to reflow between desktop and mobile. */
.site-shot-images {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-shot-images img {
  width: 100%;
  height: auto;
  display: block;
}

.site-shot span {
  display: block;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: #0a0a0a;
}

/* Optional badge line above the site name — used to call out a specific
   result/claim (e.g. "High-Converting Google Ads Landing Page") without
   disturbing the existing single-span layout for cards that don't need it. */
.site-shot-tag {
  padding: 10px 14px 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent, #bcd044) !important;
  background: #0a0a0a !important;
}

.site-shot-tag + span {
  padding-top: 2px;
}

/* ===================== New business website offer =====================
   A separate path for owners who have nothing online yet. Pale olive keeps
   this distinct from both the black Projects section above and the cream
   Cenovate Difference section below without introducing another brand color. */
.startup-section {
  background:
    radial-gradient(ellipse 55% 75% at 8% 40%, rgba(188, 208, 68, 0.2) 0%, rgba(188, 208, 68, 0) 72%),
    var(--color-tint);
  color: var(--color-ink);
  padding: 110px 48px;
  overflow: hidden;
}

.startup-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(56px, 8vw, 110px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}

.startup-copy {
  max-width: 520px;
}

.startup-copy .eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.startup-headline {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  margin-bottom: 28px;
}

.startup-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink-muted);
  margin-bottom: 18px;
}

.startup-example {
  margin-top: 28px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-green-deep);
}

.startup-example-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-green-deep);
  margin-bottom: 8px;
}

.startup-example p:last-child {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-muted);
}

.startup-cta {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid rgba(22, 24, 12, 0.15);
}

.startup-cta-line {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: 16px;
}

.startup-cta-btn {
  border-radius: 4px;
}

.startup-cta-note {
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.startup-points {
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid rgba(188, 208, 68, 0.26);
  border-radius: 16px;
  padding: 14px 38px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.2);
}

.startup-point {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 20px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.startup-point:last-child {
  border-bottom: 0;
}

.startup-point-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-green-bright);
  padding-top: 5px;
}

.startup-point h3 {
  font-size: 20px;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 9px;
}

.startup-point p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 900px) {
  .startup-section {
    padding: 86px 24px;
  }

  .startup-inner {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .startup-copy {
    max-width: 650px;
  }
}

@media (max-width: 600px) {
  .startup-section {
    padding: 74px 20px;
  }

  .startup-points {
    padding: 6px 24px;
  }

  .startup-point {
    grid-template-columns: 34px 1fr;
    gap: 14px;
    padding: 26px 0;
  }

  .startup-cta-btn {
    width: 100%;
  }
}

/* Footer row for cards that also carry a "Current Client" badge — same
   background/padding as the plain single-span footer above, but laid out
   as a flex row so the badge sits inline with the site name instead of
   stacking into its own block. */
.site-shot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 14px 12px;
  background: #0a0a0a;
}

/* .site-shot span (generic rule above) sets display:block + its own
   14px/12px padding on every span inside .site-shot, including these two -
   left uncorrected that stacks a second 14px inset on top of this row's
   own padding, pushing the site name ~14px further right than the tag
   text above it. Reset explicitly so both rows share one text baseline. */
.site-shot-foot > span:first-child {
  display: block;
  padding: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.site-shot-foot .client-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #86e29b;
  white-space: nowrap;
}

.site-shot-foot .client-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.7);
}

@media (max-width: 900px) {
  .project-cards {
    grid-template-columns: 1fr;
  }
  .sites-strip {
    grid-template-columns: 1fr;
  }
}

/* ===================== Real Problem CTA button + animated glow ===================== */
.rp-cta-glow {
  position: relative;
  display: inline-block;
  border-radius: 14px;
  padding: 3px;
  margin-top: 40px;
  overflow: hidden; /* clips the rotating layer below to just the border ring */
  isolation: isolate; /* keeps the rotating layer's stacking contained to this box */
}

/* The rotating conic-gradient lives on its own oversized layer BEHIND the
   button — rotating this, not the wrapper itself, is what keeps the button
   label upright while the glow travels around the border. */
.rp-cta-glow::before {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: 0;
  background: conic-gradient(from 0deg, transparent 0deg, var(--color-green-bright) 60deg, transparent 140deg, transparent 360deg);
  animation: rp-btn-rotate 2.5s linear infinite;
}

.rp-cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 11px;
  background: #0a0a0a;
  color: var(--color-green-bright);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.rp-cta-glow:hover .rp-cta-btn {
  background: var(--color-green-bright);
  color: #0a0a0a;
  box-shadow: 0 0 45px 12px rgba(212, 222, 107, 0.55);
}

@keyframes rp-btn-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rp-cta-glow {
    animation: none;
  }
}

/* ===================== Technical Skill / Creative Instinct (light section) ===================== */
.skills-section {
  background: var(--color-cream);
  padding: 100px 48px 90px;
  overflow-x: hidden; /* GSAP directional slide-ins shouldn't cause a transient horizontal scrollbar */
}

.skills-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1100px;
  margin: 0 auto 44px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

.skill-card {
  padding: 56px 48px;
}

.skill-card-dark {
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(188, 208, 68, 0.22) 0%, rgba(188, 208, 68, 0) 60%),
    #0a0a0a;
  color: #ffffff;
}

.skill-card-light {
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, rgba(188, 208, 68, 0.16) 0%, rgba(188, 208, 68, 0) 60%),
    #ffffff;
  color: var(--color-ink);
}

.skill-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.skill-icon svg {
  width: 28px;
  height: 28px;
}

.skill-card-dark .skill-icon {
  background: rgba(188, 208, 68, 0.15);
  color: var(--color-green-bright);
}

.skill-card-light .skill-icon {
  background: rgba(188, 208, 68, 0.14);
  color: var(--color-green-deep);
}

.skill-card h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 18px;
}

/* Same accent treatment as "Searching" in the hero headline */
.skill-accent-green,
.skill-accent-lightgreen {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
}

.skill-accent-green {
  color: var(--color-green-bright);
}

.skill-accent-lightgreen {
  color: var(--color-green-deep);
}

.skill-card p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 26px;
}

.skill-card-dark p {
  color: rgba(255, 255, 255, 0.75);
}

.skill-card-light p {
  color: var(--color-ink-muted);
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-tags span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
}

.skill-card-dark .skill-tags span {
  background: rgba(188, 208, 68, 0.15);
  color: var(--color-green-bright);
}

.skill-card-light .skill-tags span {
  background: rgba(188, 208, 68, 0.12);
  color: var(--color-green-deep);
}

.skills-closer {
  text-align: center;
  font-size: 19px;
  font-style: italic;
  color: var(--color-ink-muted);
  max-width: 680px;
  margin: 0 auto;
}

.skills-closer strong {
  font-style: normal;
  color: var(--color-ink);
}

.skills-section .section-header {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

/* Playfair italic accent, but this section is dark-text-on-light (unlike the
   hero's gradient headline), so it needs an explicit color, not an inherited
   gradient clip. */
.skills-header-accent {
  color: var(--color-green-deep);
}

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

@media (max-width: 600px) {
  /* .skills-section's 48px side padding + .skill-card's own 48px side
     padding compound on a narrow phone (96px lost to padding alone on
     each side), squeezing each card down to ~200px of usable width —
     that's why the tag pills were stacking one-per-line instead of
     flowing 2-3 across like the reference. Both get real mobile values. */
  .skills-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .skill-card {
    padding: 40px 28px;
  }
}

/* ===================== How I Work / Process (dark section) ===================== */
.process-section {
  position: relative;
  overflow: hidden;
  background:
    /* brightest directly behind the center symbol, fading out toward the cards */
    radial-gradient(ellipse 46% 60% at 50% 54%, rgba(188, 208, 68, 0.32) 0%, rgba(188, 208, 68, 0) 68%),
    #000000;
  padding: 110px 48px 130px;
}

.process-section .section-header {
  max-width: 680px;
  margin: 0 auto 64px;
  text-align: center;
}

.process-section .eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-green-bright);
  margin-bottom: 14px;
}

.process-accent {
  color: var(--color-green-bright);
}

.process-subhead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-top: 16px;
}

.process-hub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
}

.process-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1;
  max-width: 340px;
}

.process-col-left {
  align-items: flex-end;
}

.process-col-right {
  align-items: flex-start;
}

.process-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 26px 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.process-card:hover {
  transform: translateY(-3px);
}

.process-card-gray {
  border-color: rgba(255, 255, 255, 0.16);
}

.process-card-green {
  border-color: rgba(188, 208, 68, 0.45);
  /* brightness "carried over" from the center glow — leans toward the
     symbol side (left edge of these right-column cards), per Danny's read
     of how JSMM's real site does it */
  box-shadow: -18px 0 44px -22px rgba(212, 222, 107, 0.55);
}

.process-card-green:hover {
  border-color: var(--color-green-bright);
}

.process-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55); /* bumped from 0.35 — Codex review flagged ~3:1 contrast, below WCAG AA for 13px text */
  margin-bottom: 10px;
}

.process-card-green .process-num {
  color: rgba(188, 208, 68, 0.7);
}

.process-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.process-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-green-bright);
  margin-bottom: 12px;
}

.process-card-gray .process-label {
  color: rgba(255, 255, 255, 0.55);
}

.process-body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
}

/* --- Center symbol + connector lines --- */
.process-center {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.process-symbol {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.process-symbol::before {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(188, 208, 68, 0.35) 0%, rgba(188, 208, 68, 0) 70%);
  animation: process-symbol-pulse 3.5s ease-in-out infinite;
}

.process-symbol img {
  position: relative;
  z-index: 1;
  width: 190px;
  height: auto;
  filter: drop-shadow(0 0 34px rgba(188, 208, 68, 0.55));
}

@keyframes process-symbol-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Connectors: same "<" chevron shape on both sides (two arms meeting at an
   outer vertex), right side simply mirrored via scaleX(-1) so it reads as
   ">". Deliberately decorative/non-touching, not wired to each card's
   exact edge. */
.process-chevron {
  position: relative;
  width: 60px;
  height: 140px;
  flex-shrink: 0;
}

.process-chevron::before,
.process-chevron::after {
  content: '';
  position: absolute;
  left: 0;
  width: 3px;
  height: 78px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 100%);
}

.process-chevron::before {
  top: 0;
  transform-origin: top center;
  transform: rotate(28deg);
}

.process-chevron::after {
  bottom: 0;
  transform-origin: bottom center;
  transform: rotate(-28deg);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 100%);
}

/* Right = same shape, mirrored, recolored bright green to read as catching the center glow */
.process-chevron-right {
  transform: scaleX(-1);
}

.process-chevron-right::before,
.process-chevron-right::after {
  background: linear-gradient(180deg, rgba(188, 208, 68, 0) 0%, rgba(212, 222, 107, 0.85) 100%);
}

.process-chevron-right::after {
  background: linear-gradient(0deg, rgba(188, 208, 68, 0) 0%, rgba(212, 222, 107, 0.85) 100%);
}

/* Mobile-only vertical connectors, replacing the horizontal chevrons */
.process-vline {
  display: none;
}

@media (max-width: 900px) {
  .process-hub {
    flex-direction: column;
    gap: 8px;
  }

  .process-col {
    max-width: 420px;
    width: 100%;
  }

  .process-col-left,
  .process-col-right {
    align-items: stretch;
  }

  .process-chevron {
    display: none;
  }

  .process-center {
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
  }

  .process-vline {
    display: block;
    width: 2px;
    height: 34px;
    background: linear-gradient(180deg, rgba(188, 208, 68, 0) 0%, rgba(188, 208, 68, 0.5) 100%);
  }

  .process-vline-bottom {
    background: linear-gradient(0deg, rgba(188, 208, 68, 0) 0%, rgba(188, 208, 68, 0.5) 100%);
  }

  .process-symbol {
    width: 160px;
    height: 160px;
  }

  .process-symbol img {
    width: 120px;
  }

  .process-card-green {
    box-shadow: none;
  }
}

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

/* ===================== Why Cenovate Your Business (Mission, dark section) ===================== */
.mission-section {
  position: relative;
  overflow: hidden;
  background: #000000; /* fallback only — the video covers this once loaded */
  padding: 130px 24px 150px;
}

.mission-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the section at any height, no stacking needed */
  z-index: 0;
}

/* Dims/tints the busy data-grid video so the timeline text stays legible —
   same technique as .rp-gradient-overlay in The Real Problem section. */
.mission-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 15%, rgba(0, 0, 0, 0.65) 85%, rgba(0, 0, 0, 0.85) 100%);
}

.mission-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.mission-section .section-header {
  max-width: 680px;
  margin: 0 auto 80px;
  text-align: center;
}

.mission-section .eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-green-bright);
  margin-bottom: 14px;
}

.mission-accent {
  color: var(--color-green-bright);
}

/* --- Vertical timeline --- */
.mission-timeline {
  position: relative;
}

/* Gray/white track by default — .timeline-line-fill (JS-driven, grows with
   scroll position) is what turns it green as you scroll past each step.
   top/height are set by main.js (positionLine) to run exactly from the
   center of the first dot to the center of the last dot, since card
   heights vary and a fixed CSS top/bottom can't track that reliably. */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  height: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.22);
  overflow: visible;
}

.timeline-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--color-green-bright) 0%, var(--color-green) 100%);
  box-shadow: 0 0 10px rgba(188, 208, 68, 0.5);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: start;
  gap: 0 40px;
  margin-bottom: 64px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* Dot sits at the top of the card (matching the OC reference), not centered
   on it — nudged down slightly to land level with the card's number/title. */
.timeline-dot {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin-top: 22px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: none;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Active state — toggled by JS (main.js) via IntersectionObserver/scroll
   tracking as each item is scrolled past. */
.timeline-item.is-active .timeline-dot {
  background: var(--color-green-bright);
  box-shadow: 0 0 18px 4px rgba(212, 222, 107, 0.55);
}

.timeline-left .timeline-content {
  grid-column: 1;
  text-align: right;
}

.timeline-right .timeline-content {
  grid-column: 3;
  text-align: left;
}

.timeline-content {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(188, 208, 68, 0.2);
  border-radius: 12px;
  padding: 24px 28px;
  backdrop-filter: blur(2px);
  transition: background 0.4s ease, border-color 0.4s ease;
}

/* Card highlight as you scroll past it — same idea as OC's cards shifting
   to light gray, ours shifts to a light brand-green tint instead. */
.timeline-item.is-active .timeline-content {
  background: rgba(188, 208, 68, 0.14);
  border-color: rgba(188, 208, 68, 0.45);
}

/* ===================== Final CTA — The Free Audit (dark section) ===================== */
/* Scrapped the wavy black-shape-on-cream treatment after several rounds —
   Danny called it and asked for a plain dark section instead, matching the
   rest of the page. Green glows top and bottom blend into Mission's video
   section above and the Footer below, same idea as before, just without
   the cream background or the wave shape carrying the transition. */
.final-cta-section {
  position: relative;
  overflow: hidden;
  /* No top glow — the whole lower half washes green instead, so it merges
     with the Footer's own top wash into one continuous glow at the seam. */
  background:
    linear-gradient(180deg, rgba(188, 208, 68, 0) 0%, rgba(188, 208, 68, 0) 42%, rgba(188, 208, 68, 0.22) 100%),
    #000000;
  padding: 130px 40px;
}

.final-cta-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.final-cta-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-green-bright);
  margin-bottom: 16px;
}

.final-cta-headline {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 24px;
}

.final-cta-accent {
  color: var(--color-green-bright);
}

.final-cta-body {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 22px;
}

.final-cta-closer {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-green-bright);
  margin-bottom: 32px;
}

.final-cta-btn {
  display: inline-flex;
}

@media (max-width: 900px) {
  .final-cta-section {
    padding: 90px 24px;
  }
}

.timeline-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(188, 208, 68, 0.7);
  margin-bottom: 8px;
}

.timeline-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.timeline-content p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
  .timeline-line {
    left: 8px;
  }

  .timeline-item {
    grid-template-columns: 16px 1fr;
    gap: 0 20px;
    margin-bottom: 40px;
  }

  .timeline-dot {
    grid-column: 1;
    grid-row: 1;
  }

  .timeline-left .timeline-content,
  .timeline-right .timeline-content {
    grid-column: 2;
    text-align: left;
  }
}

/* ===================== Footer ===================== */
.site-footer {
  position: relative;
  overflow: hidden;
  /* Top half washes green (meets the Final CTA section's bottom wash right
     at the seam) — kept the original subtle bottom-right spot for depth. */
  background:
    linear-gradient(180deg, rgba(188, 208, 68, 0.22) 0%, rgba(188, 208, 68, 0) 58%),
    radial-gradient(ellipse 45% 60% at 100% 100%, rgba(188, 208, 68, 0.12) 0%, rgba(188, 208, 68, 0) 60%),
    #000000;
  padding: 80px 48px 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 56px;
}

.footer-logo {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}

.footer-tagline {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 320px;
  margin-bottom: 24px;
}

.footer-book-btn {
  display: inline-flex;
}

.footer-col-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-green-bright);
  margin-bottom: 18px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a,
.footer-site-url {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-green-bright);
}

.footer-site-url {
  display: block;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom p.footer-bottom-tag {
  color: rgba(188, 208, 68, 0.7);
}

@media (max-width: 900px) {
  .site-footer {
    padding: 60px 24px 0;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}