/* ============================================================
   DRYFT GLOBAL STYLES
   ============================================================ */

/* --- Variables --- */
:root {
  --orange:       #FF5C00;
  --black:        #1A1A1A;
  --charcoal:     #383838;
  --white:        #FFFFFF;
  --light-grey:   #F5F5F5;

  --font-heading: 'Inter', sans-serif;
  --font-body:    'Poppins', sans-serif;

  --max-width:        1200px;
  --section-padding:  100px 0;
  --border-radius:    12px;
  --transition:       all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Base Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; overflow-x: hidden !important; max-width: 100vw; }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
  max-width: 100vw;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

/* --- Typography Scale --- */
h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  color: var(--black);
}

h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.2;
  color: var(--black);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--black);
}

h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
}

p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--charcoal);
}

/* On mobile, hide explicit <br> inside h2 — text-wrap:balance handles breaks.
   h1 br is kept visible so hero headline forces correct 2-line split. */
@media (max-width: 640px) {
  h2 br { display: none; }
  /* Preserve intentional br in split headlines (e.g. pricing page) */
  .split-headline br { display: block !important; }

  /* Standardize all primary CTA buttons to hero section button size */
  .btn-primary { font-size: 0.88rem !important; padding: 11px 20px !important; }
  .btn-large { font-size: 0.88rem !important; padding: 11px 20px !important; }
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.55;
  margin-bottom: 12px;
  display: block;
}

/* --- Layout Helpers --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding {
  padding: var(--section-padding);
}

/* --- Buttons --- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(255, 92, 0, 0.20),
    0 1px 3px rgba(0, 0, 0, 0.10);
}

/* Three-layer liquid glass overlay:
   1. Cursor spotlight (follows --lx / --ly)
   2. Top specular arc (overhead light source, always on hover)
   3. Bottom interior depth shadow */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at var(--lx, 50%) var(--ly, 35%),
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.12) 30%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 50% -5%,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.14) 45%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at 50% 112%,
      rgba(0, 0, 0, 0.14) 0%,
      transparent 55%
    );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Asymmetric inset shadows = glass with an overhead light source */
.btn-primary:hover {
  background: var(--orange);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18),
    inset 2px 0 4px rgba(255, 255, 255, 0.12),
    inset -1px 0 2px rgba(0, 0, 0, 0.06),
    0 8px 32px rgba(255, 92, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.12);
}

.btn-primary:hover::before {
  opacity: 1;
}

/* ---
   Secondary button — frosted glass, subtle border.
   Hover: orange tint + slight lift.
--- */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 8px rgba(0,0,0,0.06);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 92, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 0 0 3px rgba(255,92,0,0.08), 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
  color: var(--black);
}

/* Cursor-tracked orange inner glow — reveals on hover, position from JS --lx/--ly */
.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
  background: radial-gradient(
    circle at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 92, 0, 0.20) 0%,
    rgba(255, 92, 0, 0.08) 45%,
    transparent 68%
  );
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.btn-secondary:hover::before { opacity: 1; }

.btn-secondary-light {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-secondary-light:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 92, 0, 0.4);
  color: var(--white);
}

.btn-large {
  font-size: 0.9rem;
  padding: 13px 34px;
}

/* ============================================================
   UTILITY BAR (sign-in + local time)
   Fixed at top — always visible. Nav scrolls away below it.
   ============================================================ */
.utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 1001;
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 32px;
  gap: 12px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.utility-bar--hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.utility-signin {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.35);
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
}

.utility-signin:hover {
  color: rgba(0, 0, 0, 0.65);
}

.utility-sep {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.utility-time {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: 6px;
  padding: 2px 6px;
  cursor: default;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    color      0.2s ease,
    padding    0.2s ease;
}

/* Expanded: liquid glass pill — asymmetric inset shadows + border ring */
.utility-time.time-expanded {
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.045);
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
  border: 0.5px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.60),
    0 3px 12px rgba(0, 0, 0, 0.09),
    0 1px 3px rgba(0, 0, 0, 0.06);
  letter-spacing: 0.025em;
}

/* ============================================================
   SECTION CONTENT ALIGNMENT
   Targets the inner max-width container divs inside sections.
   Adds 24px horizontal padding so content aligns exactly with
   the nav logo position (same as .nav-inner padding).
   ============================================================ */
section > div[style] {
  padding-left: 24px;
  padding-right: 24px;
}

/* ============================================================
   UTILITY BAR — INNER CONTAINER + STICKY CTA
   .utility-bar-inner gives the same max-width alignment as
   .nav-inner. The sticky CTA appears at the left edge (where
   the nav logo sits) after the hero CTA scrolls out of view.
   ============================================================ */
.utility-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

.utility-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Sticky CTA — hidden by default, slides in after hero scrolls away */
.utility-sticky-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 5px 13px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(5px) scale(0.92);
  pointer-events: none;
  transition:
    opacity  0.30s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.44s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 0 0 0 rgba(255, 92, 0, 0.25);
}

.utility-sticky-cta:hover {
  background: #e65200;
}

/* Visible state — slides in + ring-pulse animation starts after settle */
.utility-bar.sticky-cta-visible .utility-sticky-cta {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  animation: sticky-ring-pulse 2.5s ease-out 1.2s infinite;
}

/* Ring pulse — soft notification / "alive" signal */
@keyframes sticky-ring-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(0, 0, 0, 0.10),
      0 0 0 0 rgba(255, 92, 0, 0.28);
  }
  55% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(0, 0, 0, 0.10),
      0 0 0 8px rgba(255, 92, 0, 0);
  }
}

/* ============================================================
   FOOTER CTA BUTTON
   Extends .btn-primary — only overrides sizing.
   ============================================================ */
.footer-cta-btn {
  font-size: 0.85rem;
  padding: 10px 22px;
  border-radius: 8px;
}

/* ============================================================
   LOGOS / SOCIAL PROOF SECTION
   Static premium layout — 5 logos, grayscale to full-color
   on hover via liquid glass reveal effect.
   ============================================================ */
.logos-section {
  background: var(--white);
  padding: 72px 0 80px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.logos-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.logos-headline {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.30);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 56px;
}

.logos-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}

/* Each logo slot — equal-width flex cell.
   Glass bubble expands behind the logo on hover via ::after (z-index: -1
   within the isolated stacking context). */
.logo-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  position: relative;
  cursor: pointer;
  isolation: isolate; /* creates stacking context so z-index: -1 on ::after
                         sits behind the img but above the section background */
}

/* Full-colour logos — no greyscale, no opacity wash. */
.logo-item img {
  height: 72px;
  width: 100%;
  max-width: 260px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  pointer-events: none;
  display: block;
  position: relative;
  z-index: 1;
}

.logo-item:hover img {
  transform: scale(1.07);
}

/* Liquid glass bubble — renders behind the logo image. On white background the
   key visual cues are: the cool-tinted frosted fill, the bright top inset rim
   (overhead light), the blue-tinted depth shadow, and the spring-in scale. */
.logo-item::after {
  content: '';
  position: absolute;
  inset: -16px -22px;
  border-radius: 20px;
  /* Slightly cool/blue-tinted frosted white so it reads against pure white bg */
  background: linear-gradient(
    150deg,
    rgba(235, 242, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.80) 40%,
    rgba(230, 238, 255, 0.85) 100%
  );
  backdrop-filter: blur(14px) saturate(200%);
  -webkit-backdrop-filter: blur(14px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow:
    /* Inset top rim — overhead light source */
    inset 0 2px 0 rgba(255, 255, 255, 1),
    /* Inset bottom — subtle depth */
    inset 0 -1.5px 0 rgba(160, 180, 230, 0.12),
    /* Inset left rim */
    inset 1.5px 0 0 rgba(255, 255, 255, 0.65),
    /* Elevation shadow with blue tint to sell the glass material */
    0 12px 40px rgba(60, 100, 200, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.07),
    /* Prism-edge outer glow — faint iridescent ring */
    0 0 0 1px rgba(200, 220, 255, 0.30);
  opacity: 0;
  transform: scale(0.84);
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.52s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: -1;
}

.logo-item:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Mobile: two-per-row centered wrap */
@media (max-width: 768px) {
  .logos-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 24px;
  }

  .logo-item {
    flex: 0 0 calc(50% - 12px);
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  .logos-section {
    padding: 52px 0 60px;
  }

  .logo-item img {
    height: 48px;
  }
}

/* ============================================================
   NAVIGATION — scrolls away (not sticky) on all screen sizes.
   Utility bar above it handles the fixed element.
   ============================================================ */
.nav {
  position: relative;
  background: var(--white);
  overflow: visible;
  z-index: 100;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo img {
  height: 26px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-links > li {
  position: relative;
}

.nav-links > li > a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--charcoal);
  padding: 8px 12px;
  border-radius: 6px;
  transition: var(--transition);
  display: block;
}

.nav-links > li > a:hover {
  color: var(--black);
  background: rgba(0, 0, 0, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Mobile-only CTA item — hidden on desktop */
.nav-mobile-cta-item {
  display: none;
}

/* Dropdown */
.has-dropdown {
  position: relative;
}

/* Invisible bridge that fills the gap between the nav link and dropdown */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 16px;
}

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  padding: 8px;
  min-width: 220px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 100;
}

.has-dropdown:hover .dropdown {
  display: block;
}

.dropdown li a {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--charcoal);
  padding: 10px 14px;
  border-radius: 6px;
  transition: var(--transition);
}

.dropdown li a:hover {
  background: var(--light-grey);
  color: var(--black);
}

/* Nav CTA */
.nav-cta {
  font-size: 0.875rem;
  padding: 10px 22px;
  flex-shrink: 0;
  border-radius: var(--border-radius);
}

/* Ensure btn-primary inside nav-links keeps white text + orange bg,
   overriding the nav-links general link color rule (higher specificity) */
.nav-links > li > a.btn-primary,
.nav-links > li > a.btn-primary:hover {
  color: var(--white);
  background: var(--orange);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: var(--transition);
}

/* Hide mobile sub-links on desktop */
.dropdown-mobile {
  display: none;
}

/* ============================================================
   MOBILE / TABLET (≤900px)
   - Utility bar: visible + fixed (sign in + clock always showing)
   - Nav: NOT fixed — scrolls away with the page
   - No "Talk to Us" CTA in nav
   - Smaller logo + hamburger
   ============================================================ */
@media (max-width: 900px) {
  /* Nav scrolls away — only utility bar stays fixed */
  .nav {
    position: relative;
  }

  body {
    padding-top: 36px; /* only utility bar height */
  }

  /* Hide CTA — hero section handles this on mobile */
  .nav-cta {
    display: none;
  }

  /* Smaller logo */
  .nav-logo img {
    height: 20px;
  }

  /* Hamburger matches logo scale */
  .nav-hamburger {
    display: flex;
  }

  .nav-hamburger span {
    width: 18px;
  }

  /* Mobile dropdown — bubble-expand from hamburger origin */
  .nav-links {
    display: flex;
    position: fixed;
    top: 92px; /* utility bar (36px) + nav height (56px) */
    left: 0;
    right: 0;
    /* Liquid glass — semi-transparent so hero content silhouette shows through */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
      0 16px 48px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    gap: 4px;
    z-index: 999;
    /* Closed: circle collapses to hamburger location (top-right, above nav-links) */
    clip-path: circle(0% at calc(100% - 32px) -40px);
    visibility: hidden;
    pointer-events: none;
    /* Close: smooth ease-in collapse */
    transition:
      clip-path 0.48s cubic-bezier(0.4, 0, 0.55, 1),
      visibility 0s 0.48s;
  }

  /* Open: circle expands outward from hamburger — gentle ease-out, no hard spring */
  .nav.nav-open .nav-links {
    clip-path: circle(200% at calc(100% - 32px) -40px);
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 0.72s cubic-bezier(0.22, 1.0, 0.36, 1),
      visibility 0s 0s;
  }

  .nav-links > li > a {
    padding: 12px 16px;
    font-size: 1rem;
  }

  /* Hide desktop hover dropdown on mobile */
  .dropdown {
    display: none !important;
  }

  .nav.nav-open .nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav.nav-open .nav-hamburger span:nth-child(2) {
    opacity: 0;
  }

  .nav.nav-open .nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Show service sub-links on mobile — refined submenu card */
  .dropdown-mobile {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 3px;
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.028);
    border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, 0.065);
  }

  .dropdown-mobile a {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.55);
    padding: 10px 14px;
    border-radius: 7px;
    transition: background 0.15s ease, color 0.15s ease;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .dropdown-mobile a:last-child {
    border-bottom: none;
  }

  .dropdown-mobile a:hover,
  .dropdown-mobile a:active {
    background: rgba(0, 0, 0, 0.04);
    color: var(--black);
  }

  /* Mobile CTA — centred, identical proportions to desktop .btn-primary */
  .nav-mobile-cta-item {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }

  /* No size overrides — let .btn-primary handle padding, font, radius exactly */
  .nav-mobile-cta {
    width: auto;
  }
}

/* Page body offset: only the fixed utility bar (36px). Nav is in flow. */
body {
  padding-top: 36px;
}

/* ============================================================
   FOOTER — Dark liquid-glass island on white particle background
   ============================================================ */
.footer {
  background: var(--white);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Particle canvas fills the white footer background area */
.footer > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Single black liquid-glass island */
.footer-card {
  max-width: var(--max-width);
  margin: 0 auto;
  background: rgba(22, 22, 24, 0.94);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 24px 64px rgba(0, 0, 0, 0.22),
    0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 28px 32px 20px;
  position: relative;
  z-index: 1;
}

.footer-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* Button is a direct child of footer-card-top — sits flush right */
.footer-card-top > .footer-cta-btn {
  flex-shrink: 0;
  align-self: flex-start;
}

.footer-card-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-brand-logo {
  height: 30px;
  width: auto;
  align-self: flex-start;
}

.footer-brand-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
  line-height: 1.3;
}

/* Nav cols sit in their own row below the top */
.footer-nav-cols {
  display: flex;
  gap: 48px;
  margin-top: 22px;
}

.footer-nav-col h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-weight: 600;
}

.footer-nav-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.footer-nav-col ul li a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-family: var(--font-body);
  transition: var(--transition);
}

.footer-nav-col ul li a:hover { color: var(--white); }

.footer-links-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-copy {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-body);
}

.footer-time {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Email section and wrap sit above the particle canvas */
.footer-email-wrap {
  padding: 24px 20px 28px;
  overflow: hidden;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Liquid glass email text on white background */
.footer-email-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 7rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(26, 26, 26, 0.11);
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 -1px 0 rgba(0, 0, 0, 0.02);
  cursor: none;
  user-select: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  white-space: nowrap;
}

.footer-email-link:hover {
  color: rgba(26, 26, 26, 0.2);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

/* Custom "Copy our email" cursor */
.footer-copy-cursor {
  position: fixed;
  pointer-events: none;
  background: rgba(26, 26, 26, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--white);
  padding: 7px 13px;
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -145%) scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
  will-change: left, top;
}

.footer-copy-cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -145%) scale(1);
}

@media (max-width: 768px) {
  /* Side padding so footer-card appears as a floating island above white background */
  .footer { padding: 16px 16px 0; }

  .footer-card { padding: 20px 20px 16px; }

  /* Match nav logo height on mobile (nav is 20px) */
  .footer-brand-logo { height: 20px; }

  /* Tagline proportionally smaller to match logo */
  .footer-brand-tagline { font-size: 0.82rem; }

  /* Talk to Us button smaller on mobile */
  .footer-cta-btn { font-size: 0.76rem; padding: 7px 14px; }

  /* Keep top as a row on mobile: brand left, button right */
  .footer-card-top { gap: 16px; }

  .footer-nav-cols { gap: 32px; }

  .footer-email-link {
    font-size: clamp(1.3rem, 5vw, 2.5rem);
    white-space: normal;
    word-break: break-all;
    cursor: pointer;
    /* Lighter on mobile — liquid glass shimmer feel via gradient text */
    background: linear-gradient(
      135deg,
      rgba(26, 26, 26, 0.14) 0%,
      rgba(26, 26, 26, 0.07) 45%,
      rgba(26, 26, 26, 0.13) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Tighter vertical rhythm on mobile — less dead space around email */
  .footer-email-wrap {
    padding: 14px 16px 18px;
  }
}

/* ============================================================
   SOCIAL PROOF MARQUEE
   ============================================================ */
.marquee-wrapper {
  overflow: hidden;
  position: relative;
}

.marquee-wrapper::before,
.marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--light-grey), transparent);
}

.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--light-grey), transparent);
}

.marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
  width: max-content;
}

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

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

.marquee-track img {
  filter: grayscale(1);
  opacity: 0.6;
  height: 36px;
  width: auto;
  flex-shrink: 0;
  transition: var(--transition);
}

.marquee-track img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ============================================================
   SERVICE CARDS — LIQUID GLASS
   ============================================================ */
.service-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,92,0,0), transparent);
  transition: background 0.4s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 92, 0, 0.18);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 92, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.service-card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(255, 92, 0, 0.55), transparent);
}

.service-card h3 {
  margin-bottom: 12px;
}

.service-card p {
  font-size: 0.9rem;
  color: var(--charcoal);
  margin-bottom: 20px;
}

.card-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--orange);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-link:hover {
  gap: 10px;
}

/* ============================================================
   VIDEO CARDS (Results)
   ============================================================ */
.video-card {
  position: relative;
  cursor: pointer;
}

.video-link {
  display: block;
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.video-card:hover .video-thumbnail {
  transform: scale(1.04);
}

/* Overlay: subtle dark tint only — no backdrop-filter so thumbnail stays sharp */
.video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease;
}

.video-card:hover .video-play-btn {
  background: rgba(0, 0, 0, 0.25);
}

/* Liquid glass circle play button */
.play-glass-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.50);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.play-icon {
  width: 22px;
  height: 22px;
  margin-left: 4px;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
}

.video-card:hover .play-glass-btn {
  transform: scale(1.12);
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 12px 40px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
}

.faq-question span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
  line-height: 1.4;
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.faq-icon svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
  background: var(--orange);
}

.faq-item.open .faq-icon svg {
  transform: rotate(45deg);
  stroke: white;
}

.faq-answer p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--charcoal);
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.compare-table th {
  padding: 16px 20px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--light-grey);
  color: var(--black);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.compare-table th:nth-child(2) {
  background: var(--orange);
  color: var(--white);
}

.compare-table td {
  padding: 14px 20px;
  font-size: 0.9rem;
  color: var(--charcoal);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table td:nth-child(2) {
  font-weight: 600;
  color: var(--black);
  background: rgba(255, 92, 0, 0.04);
}

.compare-table .check { color: #16a34a; font-weight: 700; }
.compare-table .cross { color: #dc2626; font-weight: 700; }

@media (max-width: 640px) {
  .compare-table th,
  .compare-table td {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
}

/* ============================================================
   RESPONSIVE TWO-COLUMN GRID HELPER
   (used inline on service pages — collapse to single col on mobile)
   ============================================================ */
@media (max-width: 768px) {
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .phase-inner {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   GHL EMBEDS — FORM + CALENDAR
   ============================================================ */
.ghl-form-wrap,
.ghl-calendar-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  background: var(--white);
}

/* ============================================================
   CONTACT / APPLY FORMS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--black);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--white);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  transition: var(--transition);
  outline: none;
  width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.12);
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23383838' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

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

/* ============================================================
   NOTE / INFO BLOCKS
   ============================================================ */
.note-block {
  border-left: 3px solid var(--orange);
  background: rgba(255, 92, 0, 0.04);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
}

.note-block p {
  font-size: 0.9rem;
  color: var(--charcoal);
}

/* ============================================================
   PAIN POINTS / CHECK LISTS
   ============================================================ */
.pain-list,
.check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pain-list li,
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.pain-list li::before {
  content: '✗';
  color: var(--orange);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.check-list li::before {
  content: '✓';
  color: var(--orange);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ============================================================
   STEP / NUMBER SECTIONS
   ============================================================ */
/* .step-number styles moved to bottom of file — pill button style */

/* ============================================================
   HERO SECTION (shared)
   ============================================================ */
.page-hero {
  padding: 80px 24px 100px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.page-hero .eyebrow {
  margin-bottom: 16px;
}

.page-hero h1 {
  margin-bottom: 20px;
  max-width: 700px;
}

.page-hero > p {
  font-size: 1.1rem;
  color: var(--charcoal);
  max-width: 580px;
  margin-bottom: 36px;
  line-height: 1.7;
}

/* ============================================================
   SERVICE PAGE 2-COLUMN HERO
   ============================================================ */
.svc-hero {
  padding: 80px 0 100px;
  background: var(--white);
}

.svc-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.svc-hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.svc-hero-text p:not(.eyebrow) {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--charcoal);
  opacity: 0.75;
  max-width: 480px;
}

.svc-hero-anim {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search animation stage when hosted inside hero */
.svc-hero-anim .search-anim-stage {
  max-width: none;
  width: 100%;
  margin: 0;
}

/* ---- Shared hero animation card helpers ---- */
.svc-card-status {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}

.svc-card-green { color: #18BF5A; }

.svc-card-timer {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.04em;
}

.svc-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 34px;
  margin: 14px 0;
}

.svc-waveform span {
  width: 4px;
  background: var(--orange);
  border-radius: 2px;
  animation: svcWave 0.9s ease-in-out infinite;
  opacity: 0.85;
}

.svc-waveform span:nth-child(1) { animation-delay: 0s; }
.svc-waveform span:nth-child(2) { animation-delay: 0.13s; }
.svc-waveform span:nth-child(3) { animation-delay: 0.26s; }
.svc-waveform span:nth-child(4) { animation-delay: 0.13s; }
.svc-waveform span:nth-child(5) { animation-delay: 0s; }

@keyframes svcWave {
  0%, 100% { height: 5px; }
  50% { height: 28px; }
}

.svc-waveform--green span { background: #18BF5A; }

.svc-dial-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #18BF5A;
  flex-shrink: 0;
  animation: svcDialPulse 1.2s ease-in-out infinite;
}

@keyframes svcDialPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(24,191,90,0.4); }
  50% { opacity: 0.7; transform: scale(1.2); box-shadow: 0 0 0 7px rgba(24,191,90,0); }
}

.svc-card-exclusive {
  margin-top: 12px;
  padding: 7px 10px;
  background: rgba(255, 92, 0, 0.06);
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.svc-card-note {
  font-size: 0.77rem;
  color: var(--charcoal);
  opacity: 0.5;
  line-height: 1.5;
  margin-top: 8px;
}

.svc-browser-bar {
  background: rgba(244, 244, 244, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px 8px 0 0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.svc-browser-dots { display: flex; gap: 4px; flex-shrink: 0; }
.svc-browser-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D4D4D4;
}

.svc-browser-url {
  flex: 1;
  background: var(--white);
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.72rem;
  color: var(--charcoal);
  opacity: 0.7;
}

.svc-browser-body {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 14px;
}

.svc-visitors-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
}

.svc-visitors-count {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--black);
}

.svc-visitors-label {
  font-size: 0.8rem;
  color: var(--charcoal);
  opacity: 0.5;
}

.svc-form-field {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  gap: 10px;
}

.svc-form-field:last-of-type { border-bottom: none; }

.svc-form-label {
  font-size: 0.72rem;
  color: var(--charcoal);
  opacity: 0.45;
  width: 46px;
  flex-shrink: 0;
}

.svc-form-val {
  font-size: 0.88rem;
  color: var(--black);
  font-weight: 500;
}

.svc-submit-btn {
  margin-top: 12px;
  width: 100%;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 11px 0;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 8px rgba(255,92,0,0.25);
}

.svc-submit-btn.clicked {
  transform: scale(0.97);
  background: #e55200;
}

.svc-crm-note {
  margin-top: 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #18BF5A;
  letter-spacing: 0.02em;
}

.svc-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.svc-post-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF5C00, #FF9459);
  flex-shrink: 0;
}

.svc-post-meta { display: flex; flex-direction: column; gap: 1px; }
.svc-post-biz { font-size: 0.84rem; font-weight: 700; color: var(--black); }
.svc-post-platform { font-size: 0.7rem; color: var(--charcoal); opacity: 0.45; }

.svc-post-photo {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #F0EEE9;
}

.svc-post-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.svc-post-caption {
  font-size: 0.8rem;
  color: var(--charcoal);
  line-height: 1.5;
  margin-bottom: 8px;
}

.svc-engagement-row {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.svc-eng-item {
  font-size: 0.75rem;
  color: var(--charcoal);
  opacity: 0.55;
}

.svc-eng-item strong {
  font-weight: 700;
  color: var(--black);
  opacity: 1;
}

.svc-dm-bubble {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--charcoal);
  line-height: 1.5;
  margin: 8px 0 10px;
}

.svc-dm-reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--orange);
  cursor: pointer;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .svc-hero { padding: 60px 0 80px; }
  .svc-hero-inner { grid-template-columns: 1fr; gap: 0; }
  .svc-hero-anim { height: 260px; margin-top: 40px; }
}

/* ============================================================
   DARK SECTION UTILITY
   ============================================================ */
.section-dark {
  background: var(--black);
}

.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: var(--white);
}

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

.section-dark .eyebrow {
  color: var(--orange);
}

/* ============================================================
   FINAL CTA SECTIONS
   ============================================================ */
.final-cta {
  padding: 100px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.final-cta > *:not(canvas) {
  position: relative;
  z-index: 1;
}

/* Two lines with a gap at center */
.final-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.1) 8%,
    rgba(0,0,0,0.1) 46%,
    transparent 50%,
    rgba(0,0,0,0.1) 54%,
    rgba(0,0,0,0.1) 92%,
    transparent 100%
  );
}

/* Blinking dot at center of the divider */
.final-cta::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%;
  animation: finalDotPulse 2s ease-in-out infinite;
}

@keyframes finalDotPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.35; transform: translateX(-50%) scale(0.75); }
}

/* Suppress top divider + dot on pages where the section above blends in */
.final-cta--no-divider::before,
.final-cta--no-divider::after { display: none; }

.final-cta h2 {
  margin-bottom: 16px;
}

.final-cta p {
  font-size: 1rem;
  color: var(--charcoal);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.final-cta .small-text {
  display: block;
  margin-top: 16px;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.4);
}

/* ============================================================
   STATS SECTION — horizontal 4-ticker row, liquid glass numbers
   ============================================================ */

/* Registers --stat-orange as an animatable <number> so CSS can
   transition it smoothly (standard background-image can't transition) */
@property --stat-orange {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.stats-section {
  background: var(--white);
  padding: 80px 0 96px;
  margin-top: 0;
  position: relative;
  z-index: 3;
}

.stats-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  text-align: center;
}

.stat-item:first-child { padding-left: 0; }
.stat-item:last-child  { padding-right: 0; }

/* Vertical dividers between stats */
.stat-item + .stat-item {
  border-left: 1px solid rgba(0, 0, 0, 0.07);
}

/* Liquid glass numbers — frosted gradient clipped to glyph shapes,
   cursor-reactive orange inner glow via @property transition          */
.stat-number {
  --stat-nx: 50%;
  --stat-ny: 50%;
  --stat-orange: 0;

  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 2.8vw, 2.75rem);
  font-weight: 700;

  /* Two-layer background:
     1. Orange radial glow — visible only on hover (--stat-orange → 0.58)
     2. Light frosted-glass gradient — the base glass color             */
  background:
    radial-gradient(
      circle at var(--stat-nx) var(--stat-ny),
      rgba(255, 92, 0, var(--stat-orange)) 0%,
      rgba(255, 140, 40, calc(var(--stat-orange) * 0.45)) 38%,
      transparent 65%
    ),
    linear-gradient(
      168deg,
      rgba(188, 196, 206, 0.78) 0%,
      rgba(148, 156, 168, 0.58) 38%,
      rgba(138, 146, 158, 0.60) 65%,
      rgba(172, 180, 190, 0.52) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Glass depth via drop-shadow on letter alpha (no bleed outside glyphs) */
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.90))
    drop-shadow(0  1px 0 rgba(255, 255, 255, 0.42))
    drop-shadow(0  3px 6px rgba(0, 0, 0, 0.11))
    drop-shadow(0  8px 24px rgba(0, 0, 0, 0.06));

  line-height: 1;
  display: block;
  cursor: default;

  /* --stat-orange transitions smoothly because of @property registration */
  transition: --stat-orange 0.55s ease, filter 0.48s ease;
}

/* Hover: soft orange glow surfaces inside letters + warm depth shadow */
.stat-item:hover .stat-number {
  --stat-orange: 0.58;
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.94))
    drop-shadow(0  1px 0 rgba(255, 255, 255, 0.52))
    drop-shadow(0  4px 10px rgba(0, 0, 0, 0.10))
    drop-shadow(0  6px 24px rgba(255, 92, 0, 0.16))
    drop-shadow(0 14px 44px rgba(255, 92, 0, 0.08));
}

.stat-label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.36);
  line-height: 1.4;
  text-align: center;
}

/* ---- Responsive ---- */

/* Tablet: 2×2 */
@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item {
    padding: 28px 20px;
  }

  .stat-item:first-child { padding-left: 20px; }
  .stat-item:last-child  { padding-right: 20px; }

  /* Reset then set 2-col dividers */
  .stat-item + .stat-item { border-left: none; }
  .stat-item:nth-child(2) { border-left: 1px solid rgba(0, 0, 0, 0.07); }
  .stat-item:nth-child(4) { border-left: 1px solid rgba(0, 0, 0, 0.07); }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) { border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
}

@media (max-width: 768px) {
  .stats-section { padding-top: 52px; }
}

@media (max-width: 560px) {
  .stats-section { padding: 80px 20px 72px; }
  .stat-number   { font-size: clamp(1.7rem, 5.5vw, 2.2rem); }
}

@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item  { padding: 24px 0 !important; border-left: none !important; }
  .stat-item + .stat-item { border-top: 1px solid rgba(0, 0, 0, 0.07); border-left: none !important; }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) { border-bottom: none; }
}

/* ============================================================
   SECTION DIVIDER — pulsing orange dot with flanking lines
   ============================================================ */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #E0E0E0, transparent);
}
.divider-icon {
  flex-shrink: 0;
  animation: dividerPulse 3s ease-in-out infinite;
}
@keyframes dividerPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* ============================================================
   SECTION FADE TRANSITION — white to dark
   ============================================================ */
.section-fade-dark {
  height: 100px;
  background: linear-gradient(to bottom, var(--white) 0%, #1A1A1A 100%);
  margin-bottom: -2px;
  pointer-events: none;
}

/* ============================================================
   PROBLEM SECTION — blended dark (white fade in + out)
   ============================================================ */
.problem-section {
  background: #1A1A1A;
  position: relative;
  padding: var(--section-padding);
  overflow: hidden;
}


.problem-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.problem-section .eyebrow {
  color: var(--orange);
  margin-bottom: 16px;
}

/* Lighter eyebrow for the positive "what changes" framing */
.problem-eyebrow-light {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Check-list on dark problem section background */
.problem-check-list li {
  color: rgba(255, 255, 255, 0.72);
}

.problem-section h2 {
  color: var(--white);
  margin-bottom: 24px;
}

.problem-content > p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 680px;
}

.problem-section .pain-list li {
  color: rgba(255, 255, 255, 0.72);
}

.problem-image-wrap {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 45%;
  overflow: hidden;
}

.problem-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  opacity: 0.6;
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

@media (max-width: 768px) {
  .problem-section {
    padding-top: 0;
  }

  .problem-image-wrap {
    display: block;
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: 260px;
    margin-top: 0;
    overflow: hidden;
  }

  .problem-image-wrap img {
    opacity: 0.75;
    object-position: center 20%;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  }

  .problem-content {
    padding-top: 48px;
  }
}

/* ============================================================
   PILLAR CARDS — LIQUID GLASS
   ============================================================ */
.pillar-card {
  padding: 32px;
  background: #F0EEE9;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: var(--border-radius);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.06),
    0 6px 28px rgba(0, 0, 0, 0.05),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.92);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at var(--px, 50%) var(--py, 0%),
    rgba(255, 92, 0, 0) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.pillar-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.09),
    inset 0 0 0 1px rgba(255, 92, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 92, 0, 0.20);
}

.pillar-card:hover::before {
  background: radial-gradient(
    ellipse at var(--px, 50%) var(--py, 0%),
    rgba(255, 92, 0, 0.10) 0%,
    transparent 65%
  );
  opacity: 1;
}

.pillar-card h3 {
  margin-bottom: 12px;
  position: relative;
}

/* Pillars grid — 3-column desktop, single column mobile */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Connector between pillar cards */
.pillar-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  opacity: 0.45;
  flex-shrink: 0;
  width: 24px;
  align-self: center;
}

.pillar-connector svg {
  width: 20px;
  height: 20px;
}

.pillars-with-connectors {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.pillars-with-connectors .pillar-card {
  flex: 1;
}

@media (max-width: 768px) {
  .pillars-with-connectors {
    flex-direction: column;
  }
  .pillar-connector {
    transform: rotate(90deg);
    width: auto;
    height: 24px;
    align-self: center;
  }
}

/* ============================================================
   STEP LINK — grey glass pill (replaces orange text link)
   ============================================================ */
.btn-step-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.48);
  padding: 10px 22px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.09);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.80);
}

.btn-step-link:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--black);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.90), 0 2px 8px rgba(0,0,0,0.07);
}

/* Variant for use on dark backgrounds (e.g. results section #1A1A1A) */
.btn-step-link--on-dark {
  color: rgba(255, 255, 255, 0.70);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.10);
}

.btn-step-link--on-dark:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0,0,0,0.25);
}

/* ============================================================
   STEP NUMBERS — ORANGE LIQUID GLASS TEXT
   Cursor-reactive: --step-nx/--step-ny track mouse position
   for the orange glow (same mechanism as stat numbers).
   ============================================================ */
@property --step-orange {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.step-number {
  --step-nx: 50%;
  --step-ny: 50%;
  --step-orange: 0;

  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  margin-bottom: 20px;
  display: block;
  width: fit-content;
  cursor: default;

  background:
    radial-gradient(
      circle at var(--step-nx, 50%) var(--step-ny, 50%),
      rgba(255, 92, 0, calc(var(--step-orange) * 0.60)) 0%,
      rgba(255, 92, 0, calc(var(--step-orange) * 0.28)) 40%,
      transparent 65%
    ),
    linear-gradient(
      168deg,
      rgba(255, 120, 50, 0.9) 0%,
      rgba(255, 92, 0, 0.75) 38%,
      rgba(204, 73, 0, 0.8) 65%,
      rgba(255, 140, 60, 0.7) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.18))
    drop-shadow(0  1px 2px rgba(255, 92, 0, 0.18))
    drop-shadow(0  4px 12px rgba(255, 92, 0, 0.12));

  transition: --step-orange 0.45s ease, filter 0.40s ease;
}

.step-item:hover .step-number {
  --step-orange: 1;
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.22))
    drop-shadow(0  1px 3px rgba(255, 92, 0, 0.28))
    drop-shadow(0  6px 20px rgba(255, 92, 0, 0.22))
    drop-shadow(0 12px 36px rgba(255, 92, 0, 0.12));
}

/* ============================================================
   FAQ — GLASS ISLAND + SMOOTH ANIMATION
   ============================================================ */
.faq-glass {
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
  box-shadow:
    0 4px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  overflow: hidden;
}

.faq-glass .faq-item {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.3s ease;
}

.faq-glass .faq-item:last-child {
  border-bottom: none;
}

/* Cursor warm-breath — faint orange glow follows --faq-lx/--faq-ly set by JS */
.faq-glass .faq-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--faq-lx, 50%) var(--faq-ly, 50%),
    rgba(255, 92, 0, 0.07) 0%,
    rgba(255, 92, 0, 0.02) 45%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.faq-glass .faq-item:hover::before {
  opacity: 1;
}

.faq-glass .faq-item.open {
  background: rgba(255, 255, 255, 0.80);
}

.faq-glass .faq-question {
  padding: 22px 24px;
  position: relative;
  z-index: 1;
}

.faq-glass .faq-question span:first-child {
  font-size: 1rem;
  transition: color 0.3s ease;
}

.faq-glass .faq-item.open .faq-question span:first-child {
  color: rgba(255, 92, 0, 0.9);
}

.faq-glass .faq-answer {
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* Smooth height animation — replaces display:none/block */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    padding    0.45s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: 0;
  display: block !important;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding-bottom: 22px;
}

/* Orange left accent on open item */
.faq-glass .faq-item.open {
  border-left: 3px solid rgba(255, 92, 0, 0.55);
}

.faq-glass .faq-item:not(.open) {
  border-left: 3px solid transparent;
}

/* ============================================================
   RESULTS SECTION — blended dark (white fade in + out)
   ============================================================ */
.results-section {
  background: #1A1A1A;
  position: relative;
  padding: var(--section-padding);
  overflow: hidden;
}

.results-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.results-section .eyebrow {
  color: var(--orange);
}

.results-section h2 {
  color: var(--white);
}

/* ============================================================
   PARTICLE STATEMENT SECTION
   ============================================================ */
.particle-statement-section {
  position: relative;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 0 120px;
  gap: 72px;
  overflow: hidden;
  width: 100%;
}

.combined-section {
  padding: 100px 24px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  min-height: auto;
  justify-content: flex-start;
  overflow: visible;
}

.combined-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  width: 100%;
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .combined-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .combined-cards-grid { grid-template-columns: 1fr; }
}

/* Combined-grid service cards: match pillar-card look + cursor-tracked glow */
.combined-cards-grid .service-card {
  background: #F0EEE9;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.06),
    0 6px 28px rgba(0, 0, 0, 0.05),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.combined-cards-grid .service-card::before {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: radial-gradient(
    ellipse at var(--px, 50%) var(--py, 0%),
    rgba(255, 92, 0, 0) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
}

.combined-cards-grid .service-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.09),
    inset 0 0 0 1px rgba(255, 92, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 92, 0, 0.20);
}

.combined-cards-grid .service-card:hover::before {
  background: radial-gradient(
    ellipse at var(--px, 50%) var(--py, 0%),
    rgba(255, 92, 0, 0.10) 0%,
    transparent 65%
  );
  opacity: 1;
}

/* Services cards grid — inside particle-statement-section, liquid glass */
.services-cards-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  width: 100%;
  padding: 0 24px;
}

@media (max-width: 900px) {
  .services-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .services-cards-grid { grid-template-columns: 1fr; }
}

/* Liquid glass service cards inside the particle section */
.services-cards-grid .service-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02),
    0 2px 12px rgba(0, 0, 0, 0.05),
    0 6px 28px rgba(0, 0, 0, 0.05);
}

.services-cards-grid .service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
  background: radial-gradient(
    ellipse at var(--px, 50%) var(--py, 0%),
    rgba(255, 92, 0, 0) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.services-cards-grid .service-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 92, 0, 0.16),
    0 12px 40px rgba(0, 0, 0, 0.09);
  border-color: rgba(255, 92, 0, 0.18);
}

.services-cards-grid .service-card:hover::before {
  background: radial-gradient(
    ellipse at var(--px, 50%) var(--py, 0%),
    rgba(255, 92, 0, 0.10) 0%,
    transparent 65%
  );
  opacity: 1;
}

/* Lead flow stage repositioned inside the particle section */
.particle-statement-section .lead-flow-stage {
  z-index: 2;
}

#statementCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translateZ(0);
}

.particle-statement-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  padding: 0 24px;
}

.statement-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.45;
  margin-bottom: 16px;
  display: block;
}

.statement-headline {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 20px;
}

.statement-sub {
  font-size: 1.05rem;
  color: var(--charcoal);
  opacity: 0.6;
  line-height: 1.7;
}

/* ============================================================
   SEARCH → LEAD → BOOKED ANIMATION SECTION
   ============================================================ */
.search-anim-section {
  padding: 48px 24px 80px;
  background: var(--white);
}

.search-anim-label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.4;
  margin-bottom: 48px;
  font-family: var(--font-body);
}

.search-anim-stage {
  max-width: 520px;
  margin: 0 auto;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.sanim-state {
  width: 100%;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 0;
  left: 0;
}

.sanim-hidden {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.sanim-browser-bar {
  background: rgba(250, 250, 250, 0.75);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
  border-radius: 10px 10px 0 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sanim-browser-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.sanim-browser-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D4D4D4;
}

.sanim-search-input {
  flex: 1;
  background: var(--white);
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: 7px;
}

.sanim-cursor {
  color: var(--orange);
  animation: cursorBlink 0.75s steps(1) infinite;
  line-height: 1;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.sanim-results {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 32px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sanim-results.visible {
  opacity: 1;
  transform: translateY(0);
}

.sanim-result {
  padding: 13px 16px;
  border-bottom: 1px solid #F2F2F2;
}

.sanim-result:last-child { border-bottom: none; }

.sanim-result-badge {
  font-size: 0.68rem;
  background: #FFF3E0;
  color: #BF5600;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}

.sanim-result-title {
  font-size: 0.87rem;
  color: #1558D6;
  font-family: var(--font-body);
  margin-bottom: 2px;
}

.sanim-result-url {
  font-size: 0.76rem;
  color: #1E7E34;
  font-family: var(--font-body);
}

.sanim-result-sub {
  font-size: 0.78rem;
  color: #666;
  margin-top: 4px;
  font-family: var(--font-body);
  line-height: 1.4;
}

.sanim-result-highlight {
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

.sanim-result-highlight.active {
  background: rgba(255,92,0,0.035);
  box-shadow: inset 3px 0 0 var(--orange);
}

.sanim-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 500;
  margin-bottom: 20px;
}

.sanim-pill-lead {
  background: rgba(255,92,0,0.07);
  color: var(--orange);
  border: 1px solid rgba(255,92,0,0.18);
}

.sanim-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: sDotPulse 1.1s ease-in-out infinite;
}

@keyframes sDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

.sanim-pill-booked {
  background: rgba(48,209,88,0.07);
  color: #178236;
  border: 1px solid rgba(48,209,88,0.22);
}

.sanim-lead-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02),
    0 4px 24px rgba(0, 0, 0, 0.07);
}

.sanim-lead-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #F5F5F5;
  font-family: var(--font-body);
  font-size: 0.86rem;
}

.sanim-lead-row:last-child { border-bottom: none; }
.sanim-lead-label { color: #AAA; font-size: 0.82rem; }
.sanim-lead-val { color: var(--black); font-weight: 500; }

.sanim-booked-date {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--black);
  margin-bottom: 6px;
}

.sanim-booked-name {
  font-size: 0.9rem;
  color: var(--charcoal);
  font-family: var(--font-body);
  margin-bottom: 3px;
}

.sanim-booked-loc {
  font-size: 0.82rem;
  color: var(--orange);
  font-family: var(--font-body);
  margin-bottom: 14px;
  font-weight: 500;
}

.sanim-booked-note {
  font-size: 0.76rem;
  color: #BBB;
  font-family: var(--font-body);
  padding-top: 12px;
  border-top: 1px solid #F2F2F2;
}

/* ============================================================
   LEAD FLOW VISUALIZATION
   ============================================================ */
.lead-flow-section {
  padding: 40px 24px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lead-flow-eyebrow {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.4;
  margin-bottom: 48px;
  font-family: var(--font-body);
}

.lead-flow-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#leadFlowCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lead-flow-nodes {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 24px;
}

.lfn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}

.lfn-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 2px 12px rgba(0,0,0,0.07),
    0 0 0 1px rgba(255,92,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.lfn-icon:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 4px 20px rgba(255,92,0,0.18),
    0 0 0 1.5px rgba(255,92,0,0.25);
  transform: translateY(-2px);
}

.lfn-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--charcoal);
  opacity: 0.5;
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .lead-flow-stage { height: 120px; }
  .lfn-icon { width: 40px; height: 40px; }
  .lfn-icon svg { width: 15px; height: 15px; }
  .lfn-label { font-size: 0.65rem; }
  .lead-flow-nodes { padding: 0 8px; }
}

/* ============================================================
   SERVICE CARDS SECTION — clean separate section below particle area
   ============================================================ */
.service-cards-section {
  padding: 48px 24px 100px;
  background: var(--white);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ============================================================
   SPLIT IMAGE SECTION — speed-to-lead 50/50 layout
   ============================================================ */
.split-image-section {
  display: flex;
  align-items: center;
  min-height: 500px;
  background: var(--white);
  overflow: hidden;
  position: relative;
}

.split-image-content {
  flex: 1;
  padding: 80px 60px 80px max(24px, calc((100vw - var(--max-width)) / 2 + 24px));
  position: relative;
  overflow: hidden;
}

.split-image-content > canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.split-image-content > *:not(canvas) {
  position: relative;
  z-index: 1;
}

.split-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.45;
  margin-bottom: 16px;
  display: block;
}

.split-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 20px;
}

.split-body {
  font-size: 1rem;
  color: var(--charcoal);
  opacity: 0.7;
  line-height: 1.75;
  margin-bottom: 32px;
}

.split-image-wrap {
  flex: 1;
  height: 500px;
  overflow: hidden;
}

.split-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
}

@media (max-width: 768px) {
  .split-image-section { flex-direction: column; min-height: auto; }
  .split-image-content { order: 2; padding: 32px 24px 60px; max-width: 100%; }
  .split-image-wrap { order: 1; width: 100%; height: 280px; flex: none; }
  .split-image-wrap img {
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  }
}

/* Bottom-blend variant — desktop: right fade + subtle bottom fade */
.split-image-section--blend-bottom .split-image-wrap img {
  mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%),
    linear-gradient(to bottom, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
  -webkit-mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%),
    linear-gradient(to bottom, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* Content-first variant — on mobile, text appears above the image */
@media (max-width: 768px) {
  .split-image-section--content-first .split-image-content { order: 1; }
  .split-image-section--content-first .split-image-wrap { order: 2; }

  /* Mobile: top + bottom fade, wide visible centre */
  .split-image-section--blend-bottom .split-image-wrap img {
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
    mask-composite: add;
    -webkit-mask-composite: source-over;
  }
}

/* Bottom-blend variant — white gradient fades section into next CTA */
.split-image-section--blend-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--white));
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   STEP IMAGE — photo beside Step 02
   ============================================================ */
.step-image-wrap {
  margin-top: 32px;
  border-radius: 16px;
  overflow: hidden;
  max-width: 440px;
}

.step-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .step-image { height: 200px; }
}

/* ============================================================
   PIPELINE IMAGE ROW — quote beside pillar cards
   ============================================================ */
.pipeline-image-row {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid #F0F0F0;
}

.pipeline-photo {
  width: 180px;
  height: 180px;
  object-fit: cover;
  object-position: center 10%;
  border-radius: 50%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.pipeline-image-caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pipeline-image-caption span {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--black);
  font-style: italic;
  line-height: 1.4;
}

.pipeline-image-caption small {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--charcoal);
  opacity: 0.5;
}

@media (max-width: 768px) {
  .pipeline-image-row { flex-direction: column; text-align: center; }
  .pipeline-photo { width: 130px; height: 130px; }
}

/* ============================================================
   TESTIMONIALS BACKGROUND IMAGE — dark section atmospheric overlay
   ============================================================ */
.testimonials-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.testimonials-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.1;
  filter: grayscale(20%);
}

/* ============================================================
   SERVICES TABLET IMAGE — inside particle statement section
   ============================================================ */
.services-tablet-image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}

.services-tablet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

@media (max-width: 768px) {
  .services-tablet-image { height: 170px; }
}

/* ============================================================
   CTA CANVAS — particle background for final CTA section
   ============================================================ */
#ctaCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   SECTION RULE — subtle gradient divider between white sections
   ============================================================ */
.section-rule {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-rule-line {
  height: 1px;
  background: linear-gradient(to right, transparent, #E0E0E0, transparent);
}

/* ============================================================
   HOW-IT-WORKS TABLE — liquid glass timeline container
   ============================================================ */
.how-it-table {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 0;
}

.timeline-item {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  cursor: default;
  padding: 16px 28px;
}

.timeline-item:last-child { border-bottom: none; }

.timeline-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--tl-lx, 50%) var(--tl-ly, 50%),
    rgba(255, 92, 0, 0.07) 0%,
    rgba(255, 92, 0, 0.02) 45%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.timeline-item:hover::before { opacity: 1; }

.timeline-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin: 0 auto;
}

.timeline-service {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--black);
  width: 140px;
  text-align: right;
}

.timeline-arrow {
  color: var(--orange);
  font-size: 1rem;
  flex-shrink: 0;
}

.timeline-time {
  font-size: 0.875rem;
  color: var(--charcoal);
  opacity: 0.6;
  width: 185px;
}

/* ============================================================
   SERVICE PAGE IMAGE — decorative image in service page body
   ============================================================ */
.service-page-image {
  margin-top: 48px;
  border-radius: 20px;
  overflow: hidden;
  max-width: 600px;
  height: 340px;
}

.service-page-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

@media (max-width: 768px) {
  .service-page-image { height: 240px; max-width: 100%; }
}

/* ============================================================
   PRICING HUMAN SECTION — image + copy split layout
   ============================================================ */
.pricing-human-section {
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
}

.pricing-human-image {
  flex: 1;
  height: 480px;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 440px;
}

.pricing-human-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

.pricing-human-content { flex: 1; }

.pricing-human-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--black);
  margin-bottom: 16px;
  line-height: 1.2;
}

.pricing-human-content p {
  font-size: 1rem;
  color: var(--charcoal);
  opacity: 0.7;
  line-height: 1.75;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .pricing-human-section { flex-direction: column; gap: 32px; padding: 60px 24px; }
  .pricing-human-image { width: 100%; max-width: 100%; height: 280px; }
}

/* ============================================================
   HOW-IT-WORKS IMAGE — photo in Phase 02
   ============================================================ */
.how-it-image-wrap {
  margin-top: 40px;
  border-radius: 20px;
  overflow: hidden;
  max-width: 560px;
}

.how-it-image {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}

@media (max-width: 768px) {
  .how-it-image { height: 220px; }
}

/* ============================================================
   SERVICES GRID — overview page card grid
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-width);
  width: 100%;
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ============================================================
   PHASE CONNECTOR — numbered dots + line between HIW phases
   ============================================================ */
.phase-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 80px;
  gap: 0;
}

.phase-connector-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.phase-connector-num {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--orange);
  opacity: 0.55;
  letter-spacing: 0.05em;
}

.phase-connector-dot {
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%;
  animation: phaseConnectorPulse 2.5s ease-in-out infinite;
}

.phase-connector-dot:last-child {
  animation-delay: 0.5s;
}

.phase-connector-line {
  flex: 1;
  max-width: 240px;
  height: 1px;
  background: linear-gradient(to right, rgba(255,92,0,0.25), rgba(255,92,0,0.1), rgba(255,92,0,0.25));
  margin: 0 16px;
  margin-top: 22px; /* align with dot center */
}

@keyframes phaseConnectorPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

@media (max-width: 768px) {
  .phase-connector { padding: 24px 32px; }
  .phase-connector-line { max-width: 80px; }
}

/* ============================================================
   SPLIT IMAGE SECTION — reversed variant (image left, text right)
   ============================================================ */
.split-image-section--reverse .split-image-wrap {
  order: -1;
}

.split-image-section--reverse .split-image-content {
  padding: 80px max(24px, calc((100vw - var(--max-width)) / 2 + 24px)) 80px 60px;
}

.split-image-section--reverse .split-image-wrap img {
  mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
  object-position: center 20%;
}

@media (max-width: 768px) {
  .split-image-section--reverse .split-image-wrap {
    order: 1; /* on mobile, image goes below content */
  }
  .split-image-section--reverse .split-image-wrap img {
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  }
}

/* ============================================================
   SERVICE PAGE TWO-COL SPLIT — what you get / this is for you
   ============================================================ */
.service-two-col {
  padding: 80px 0;
  background: var(--white);
}

.service-two-col-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 768px) {
  .service-two-col-inner { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   HOW-IT-WORKS HERO — 2-col split with looping UI animation
   ============================================================ */
.hiw-hero {
  padding: 80px 0;
  background: var(--white);
}

.hiw-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hiw-hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hiw-hero-text p:not(.eyebrow) {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--charcoal);
  opacity: 0.75;
  max-width: 420px;
}

.hiw-hero-anim {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Liquid glass cards */
.hiw-card {
  position: absolute;
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  padding: 26px 26px 22px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.hiw-card.hiw-card--active {
  opacity: 1;
  transform: translateY(0);
}

.hiw-card-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--charcoal);
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}

/* Stage 1 — checklist */
.hiw-checklist {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.hiw-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--charcoal);
  opacity: 0.35;
  transition: opacity 0.35s ease;
}

.hiw-check::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  transition: all 0.35s ease;
}

.hiw-check.checked {
  opacity: 1;
  color: var(--black);
}

.hiw-check.checked::before {
  background: var(--orange);
  border-color: var(--orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Stage 2 — lead notification */
.hiw-lead-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 92, 0, 0.09);
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.hiw-lead-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  animation: hiwDotPulse 1.5s ease-in-out infinite;
}

.hiw-lead-timestamp {
  font-size: 0.72rem;
  color: var(--charcoal);
  opacity: 0.45;
  margin-bottom: 10px;
}

.hiw-lead-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}

.hiw-lead-detail {
  font-size: 0.875rem;
  color: var(--charcoal);
  opacity: 0.6;
}

/* Stage 3 — autopilot sequence */
.hiw-seq {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hiw-seq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hiw-seq-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.hiw-seq-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

.hiw-seq-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--black);
  font-weight: 500;
}

.hiw-seq-time {
  font-size: 0.75rem;
  color: var(--charcoal);
  opacity: 0.45;
}

@keyframes hiwDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

/* Pricing hero animation — invoice card */
.price-invoice-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 14px 0 0;
}

.price-invoice-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--charcoal);
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.price-invoice-row:last-child { border-bottom: none; }

.price-invoice-zero {
  font-weight: 700;
  color: #18BF5A;
}

.price-invoice-total {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--orange);
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  letter-spacing: 0.03em;
  margin-top: 4px;
}

/* Phase separator — simple horizontal rule */
.phase-rule {
  display: block;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  max-width: var(--max-width);
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hiw-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hiw-hero-anim { height: 260px; }
  .hiw-card { max-width: 100%; }
}

/* ============================================================
   LEGAL PAGES — privacy-policy, terms
   ============================================================ */
.legal-page {
  padding: 0 24px 100px;
}

.legal-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.legal-intro {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--charcoal);
  max-width: 680px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.legal-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.legal-label {
  position: sticky;
  top: 120px;
  align-self: start;
}

.legal-num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}

.legal-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legal-content p {
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--charcoal);
}

.legal-content ul {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: disc;
}

.legal-content ul li p {
  font-size: 0.97rem;
  line-height: 1.7;
}

.legal-content strong {
  color: var(--black);
}

.legal-content a {
  color: var(--orange);
}

@media (max-width: 768px) {
  .legal-row { grid-template-columns: 1fr; gap: 16px; }
  .legal-label { position: static; }
}

/* ============================================================
   CONTACT PAGE — 2-column layout
   ============================================================ */
.contact-section {
  padding: 80px 0 100px;
}

.contact-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}

.contact-left .eyebrow {
  margin-bottom: 16px;
}

.contact-left h1 {
  margin-bottom: 20px;
}

.contact-left > p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--charcoal);
  max-width: 380px;
  margin-bottom: 48px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-detail-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.35);
  font-family: var(--font-body);
}

.contact-detail-value {
  font-size: 0.95rem;
  color: var(--black);
  font-weight: 500;
}

.contact-detail-value a {
  color: var(--orange);
  font-weight: 500;
  transition: opacity 0.2s;
}

.contact-detail-value a:hover { opacity: 0.75; }

.contact-divider {
  width: 40px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  margin: 8px 0 32px;
}

.ghl-form-wrap {
  background: var(--light-grey);
  border-radius: 16px;
  padding: 4px;
}

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  .contact-left > p { max-width: 100%; margin-bottom: 32px; }
}

/* ============================================================
   BOOK / WORK WITH US PAGE — stacked full-width layout
   ============================================================ */
.book-section {
  padding: 80px 24px 80px;
}

.book-header {
  max-width: var(--max-width);
  margin: 0 auto 56px;
}

.book-header .eyebrow {
  margin-bottom: 16px;
}

.book-header h1 {
  margin-bottom: 20px;
}

.book-header > p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--charcoal);
  max-width: 600px;
}

.book-calendar-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--light-grey);
  border-radius: 20px;
  padding: 6px;
  overflow: hidden;
}

.book-note {
  max-width: var(--max-width);
  margin: 16px auto 0;
  font-size: 0.78rem;
  color: rgba(0,0,0,0.35);
  text-align: center;
}

.ghl-calendar-wrap {
  background: var(--light-grey);
  border-radius: 16px;
  padding: 4px;
  overflow: hidden;
}

/* ============================================================
   DOUBLE SIDE BLEND — "First to Call" image (left + right fade)
   ============================================================ */
.split-image-section--double-blend .split-image-wrap img {
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 20%,
    rgba(0,0,0,1) 78%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 20%,
    rgba(0,0,0,1) 78%,
    rgba(0,0,0,0) 100%
  );
}

/* On mobile the image stacks full-width — blend all four edges */
@media (max-width: 768px) {
  .split-image-section--double-blend .split-image-wrap img {
    mask-image:
      linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
    -webkit-mask-image:
      linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
    mask-composite: intersect;
    -webkit-mask-composite: destination-in;
  }
}

/* ============================================================
   PROBLEM SECTION DESKTOP — force 2-line headline
   ============================================================ */
@media (min-width: 769px) {
  .problem-section h2 {
    max-width: 580px;
  }
  .problem-content > p {
    /* Constrain sub-text to match headline width */
    max-width: 580px;
  }
}

/* ============================================================
   PROBLEM SECTION MOBILE — show more of face, subtle top blend
   ============================================================ */
@media (max-width: 768px) {
  .problem-image-wrap img {
    object-position: center 5% !important;
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.8) 10%,
      rgba(0,0,0,1) 25%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 100%
    ) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.8) 10%,
      rgba(0,0,0,1) 25%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 100%
    ) !important;
  }
  .problem-image-wrap {
    height: 300px !important;
  }
}

/* ============================================================
   HOW-IT-WORKS TABLE — fix mobile centering
   ============================================================ */
@media (max-width: 640px) {
  .how-it-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .timeline-item {
    padding: 14px 16px;
  }
  .timeline-row {
    gap: 10px;
    margin: 0 auto;
    width: fit-content;
  }
  .timeline-item {
    display: flex;
    justify-content: center;
  }
  .timeline-service {
    width: 110px;
    font-size: 0.85rem;
    text-align: left;
  }
  .timeline-time {
    width: 155px;
    font-size: 0.8rem;
    text-align: left;
  }
}

/* ============================================================
   LEGAL PAGE — fix spacing after "Last Updated" header
   ============================================================ */
.page-hero > p.legal-date {
  font-size: 0.82rem;
  color: rgba(0,0,0,0.38);
  margin-bottom: 0;
  margin-top: -8px;
  font-weight: 400;
  line-height: 1.5;
}

/* ============================================================
   PRICING PAGE — taller mobile image to show face
   ============================================================ */
@media (max-width: 768px) {
  .split-image-section--content-first .split-image-wrap {
    height: 320px;
  }
  .split-image-section--content-first .split-image-wrap img {
    object-position: center 12%;
  }
}

/* ============================================================
   RESULTS PAGE — video caption on dark background
   ============================================================ */
.results-section .video-caption {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
   EVERYTHING YOU NEED headline — force strictly 2 lines
   Reduce font-size on mobile so each phrase fits on one line,
   then nowrap prevents soft-wrapping within each line.
   ============================================================ */
@media (max-width: 640px) {
  .statement-headline {
    font-size: clamp(1.4rem, 8vw, 1.75rem);
    white-space: nowrap;
  }
  .particle-statement-content {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   FINAL CTA — push text content away from edge of particle canvas
   Canvas fills the section so particles can appear near edges.
   The content wrapper gets extra vertical padding so headline
   is never obscured by dense particle clusters near the edges.
   ============================================================ */
.final-cta > div {
  padding-top: 8px;
}

/* Particles canvas: keep clustered toward bottom/edges, not center */
.final-cta .final-cta-inner,
.final-cta > div {
  position: relative;
  z-index: 1;
}


/* ============================================================
   CARD-LINK — problem section & split-image spacing
   ============================================================ */
.problem-check-list + .card-link {
  margin-top: 28px;
  display: inline-flex;
}

.split-image-content .split-body {
  margin-bottom: 20px;
}

/* ============================================================
   SECTION DIVIDER DOT — pulsing orange blinker
   ============================================================ */
.divider-dot {
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%;
  animation: dividerPulse 3s ease-in-out infinite;
}

.section-divider {
  padding: 20px 24px;
}