/* ═══════════════════════════════════════════════════════════════
   HBM v2 — Premium Homepage Styles
   A senior developer's approach: intentional, refined, bold.
═══════════════════════════════════════════════════════════════ */

/* ─── Layout ─── */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--max-w-narrow); }
.section { padding: var(--section-y) 0; }

/* ─── Utility ─── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* Reveal classes — no CSS hiding. GSAP handles animation via gsap.from().
   Content stays visible if JS fails (progressive enhancement). */

/* ═══════════════════════════════════════
   ELEMENTOR OVERRIDES — Fix white space at top
═══════════════════════════════════════ */
body { margin: 0 !important; padding: 0 !important; }
html { margin: 0 !important; padding: 0 !important; }

/* ═══════════════════════════════════════
   MOBILE OVERFLOW GUARD
   Stops decorative-but-wide elements (reviews carousel track, footer ribbon,
   CTA glow blob, comparison-grid) from creating horizontal page scroll on
   small viewports. body already has overflow-x:hidden in places but html
   doesn't, so the page itself can still scroll horizontally — fix both.
═══════════════════════════════════════ */
html, body { overflow-x: hidden; max-width: 100%; }
/* Constrain known-wide widgets to viewport */
.reviews-row, .footer-v2__ribbon-track, .cta-v2__glow { max-width: 100vw; }
/* Comparison grid: allow internal horizontal scroll on mobile instead of pushing the page */
@media (max-width: 768px) {
  .comparison-grid-wrap, .hbm-compare-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Pricing-cards grid (used by Standalone Ads + Standalone Organic SEO sections):
   collapse multi-column grids to a single column on mobile so each card gets
   full width and remains readable. Wins over the inline grid-template-columns
   that the widget sets from its Elementor setting. */
@media (max-width: 1024px) {
  .pkg-grid { grid-template-columns: 1fr !important; }
}
/* Same defensive 1-col on mobile for other multi-card grids that don't explicitly
   handle small viewports yet. */
@media (max-width: 640px) {
  .hbm-pkgs,
  .hbm-ads-grid,
  .hbm-commit,
  .hbm-fit-grid,
  .hbm-testi-grid,
  .hbm-offer-grid,
  .pkg-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════
   SECTION-HEADER + FOLLOWING SECTION SPACING
   The hbm-section-header widget renders <section class="section section--header-only">
   with full --section-y padding (5-8rem) top AND bottom. When it's followed by another
   widget that also renders a <section class="section"> (comparison-grid, pricing-cards,
   etc.), that's ~160-256px of stacked padding between the heading and the section body.
   Collapse the seam.
═══════════════════════════════════════ */
.section--header-only { padding-bottom: 1.5rem !important; }
.elementor-widget-hbm-section-header + .elementor-widget .section { padding-top: 0 !important; }
.elementor-location-header,
.elementor-location-header > .elementor,
.elementor-location-header > .elementor > .elementor-section,
.elementor-location-header .elementor-section,
.elementor-location-header .e-con,
.elementor-location-header .elementor-element {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
/* Force ALL children inside header wrapper to 0 height — header is position:fixed so wrapper should collapse */
.elementor-location-header,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-column,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .elementor-column-wrap {
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-location-header .site-header { position: fixed; }
/* Remove default margin from Elementor sections at top of page */
body > .elementor-location-header + main,
body > .elementor-location-header ~ main { margin-top: 0; padding-top: 0; }
body.elementor-page > .elementor,
.elementor-edit-area-active { margin-top: 0; }

/* ═══════════════════════════════════════
   HEADER — Minimal, Floating, Glass
═══════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: var(--s-5) 0;
  transition: all var(--duration) var(--ease-out);
}

.site-header.is-scrolled {
  padding: var(--s-2) 0;
  background: rgba(11, 17, 32, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
}

.site-header.is-scrolled .logo img {
  height: 36px !important;
}

.site-header.is-scrolled .nav a {
  font-size: 13px;
  padding: var(--s-2) var(--s-3);
}

.site-header.is-scrolled .header-cta {
  padding: var(--s-2) var(--s-5);
  font-size: 13px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
}

.logo img { height: 44px; width: auto; filter: brightness(10); transition: height var(--duration) var(--ease-out); }

.nav { display: flex; align-items: center; gap: var(--s-1); }

.nav a {
  padding: var(--s-2) var(--s-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  border-radius: var(--r-full);
  transition: all var(--duration-fast) var(--ease-out);
}

.nav a:hover,
.nav a.nav-active { color: var(--white); background: rgba(255,255,255,0.08); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  background: var(--teal);
  border-radius: var(--r-full);
  transition: all var(--duration-fast) var(--ease-out);
}

.header-cta:hover {
  background: var(--white);
  box-shadow: var(--shadow-teal);
  transform: translateY(-1px);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
}
.nav-toggle span {
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--duration-fast);
}

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

@media (max-width: 768px) {
  /* Hide the header CTA on mobile — hamburger menu handles navigation */
  .header-cta { display: none !important; }
}

/* ═══════════════════════════════════════
   HERO V2 — Scroll Expansion Effect
═══════════════════════════════════════ */
.hero-v2 {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy);
}

/* Gradient shadow rising from the bottom of the video */
.hero-v2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(11,17,32,1) 0%, rgba(11,17,32,0.98) 15%, rgba(11,17,32,0.85) 35%, rgba(11,17,32,0.5) 60%, rgba(11,17,32,0.15) 80%, transparent 100%);
  z-index: 4;
  pointer-events: none;
}

.hero-v2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity 0.1s linear;
}

.hero-v2__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-v2__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,17,32,0.7) 0%, rgba(11,17,32,0.4) 40%, rgba(11,17,32,0.6) 100%);
}

/* Media container — starts small, expands on scroll */
.hero-v2__media {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.4);
  transition: none;
  max-width: 95vw;
  max-height: 85vh;
}

.hero-v2__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  display: block;
}

/* Thumbnail — visible when small */
.hero-v2__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.hero-v2__thumb.is-hidden { opacity: 0; pointer-events: none; }

/* Play icon overlay */
.hero-v2__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.4s ease;
}
.hero-v2__play-icon:hover {
  background: rgba(255,255,255,0.25);
  transform: translate(-50%, -50%) scale(1.1);
}
.hero-v2__thumb { cursor: pointer; }

.hero-v2__play-icon.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.6); }

/* Native video — object-fit:cover fills perfectly, no black bars */
.hero-v2__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* Sound toggle button */
.hero-v2__sound-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.hero-v2__sound-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.hero-v2__sound-btn:hover {
  background: rgba(5,195,195,0.6);
  border-color: var(--teal);
  transform: scale(1.1);
}

.hero-v2__media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  border-radius: var(--r-xl);
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 2;
}

/* Text that splits apart on scroll */
.hero-v2__titles,
h1.hero-v2__titles {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  pointer-events: none;
  mix-blend-mode: difference;
  margin: 0;
  padding: 0;
  font-weight: 800;
}

.hero-v2__title-line {
  display: block;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.04em;
  line-height: 1.05;
  transition: none;
  white-space: nowrap;
}

/* Sub-labels below the media box */
.hero-v2__labels {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  transition: none;
  pointer-events: none;
}

.hero-v2__label-top,
.hero-v2__label-bottom {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(200,230,255,0.7);
  transition: none;
}

.hero-v2__scroll-hint {
  font-size: var(--text-xs);
  color: rgba(200,230,255,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Content that appears after full expansion */
.hero-v2__content {
  position: relative;
  z-index: 6;
  width: 100%;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

/* Overlay removed from content — now on the media container bottom */

.hero-v2__content.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.hero-v2__content-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-20) var(--gutter) var(--s-4);
}

/* Stats bar inside v2 */
.hero-v2__stats {
  display: flex;
  gap: var(--s-10);
  justify-content: center;
  padding-top: var(--s-8);
}

.hero-v2__stat-val {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--s-1);
}

.hero-v2__stat-val span { color: var(--teal); }

.hero-v2__stat-lbl {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* CTA row */
.hero-v2__ctas {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s-8);
}

@media (max-width: 768px) {
  /* Title font + wrap */
  .hero-v2__title-line {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    white-space: normal;
    text-align: center;
  }

  /* Pin titles below the fixed header */
  .hero-v2__titles {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 5;
    margin-top: 0;
  }

  /* CTA content: add top padding so it's not cut off after expansion */
  .hero-v2__content-inner {
    padding-top: var(--s-12);
    text-align: center;
  }

  /* CTAs stack vertically */
  .hero-v2__ctas {
    flex-direction: column;
    align-items: center;
  }

  /* Stats: wrap into 2-column grid */
  .hero-v2__stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-5) var(--s-8);
    text-align: center;
  }

  /* Taller bottom gradient so text stays readable over video */
  .hero-v2::after {
    height: 78%;
    background: linear-gradient(to top,
      rgba(11,17,32,1) 0%,
      rgba(11,17,32,0.97) 18%,
      rgba(11,17,32,0.85) 42%,
      rgba(11,17,32,0.45) 68%,
      transparent 100%
    );
  }
}

/* ═══════════════════════════════════════
   HERO — Full-bleed, Cinematic
═══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--navy);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(5,195,195,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(212,168,83,0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* Subtle animated grid */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
  padding: var(--s-40) 0 var(--s-20);
}

.hero-text { max-width: 600px; }

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-subtle);
  border: 1px solid rgba(5,195,195,0.15);
  border-radius: var(--r-full);
  margin-bottom: var(--s-6);
}

.hero-label .dot {
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  animation: pulse-dot 2s ease infinite;
}

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

.hero h1 {
  font-size: var(--text-display);
  color: var(--white);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: var(--s-6);
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--teal), #7dd3fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: var(--s-10);
}

.hero-ctas {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-12);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-8);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--navy);
  background: var(--teal);
  border-radius: var(--r-full);
  transition: all var(--duration-fast) var(--ease-out);
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-teal);
}

.btn-primary svg { width: 18px; height: 18px; transition: transform var(--duration-fast); }
.btn-primary:hover svg { transform: translateX(3px); }

a.btn-ghost,
.btn-ghost {
  display: inline-flex !important;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-8);
  color: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: transparent !important;
  border-radius: var(--r-full) !important;
  text-decoration: none !important;
}
a.btn-ghost:hover,
.btn-ghost:hover {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.05) !important;
}
/* Original rule below (kept for compatibility) */
.btn-ghost--orig {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-8);
  font-size: var(--text-body);
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-full);
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-ghost:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
}

/* Hero stats bar */
.hero-stats {
  display: flex;
  gap: var(--s-10);
  padding-top: var(--s-8);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.hero-stat-value {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--s-1);
}

.hero-stat-value span { color: var(--teal); }

.hero-stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero visual */
.hero-visual {
  position: relative;
}

.hero-image-main {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,0.08);
}

.hero-image-main img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

/* Floating badge on hero image */
.hero-badge {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  z-index: 3;
}

.hero-badge-icon {
  width: 44px;
  height: 44px;
  background: var(--teal-subtle);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
}

.hero-badge-icon svg { width: 22px; height: 22px; }
.hero-badge-text { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.hero-badge-sub { font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; }

@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; padding: var(--s-32) 0 var(--s-16); }
  .hero-text { max-width: 100%; margin: 0 auto; }
  .hero-desc { margin: 0 auto var(--s-10); }
  .hero-ctas { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }
}

/* ═══════════════════════════════════════
   PARTNERS LOGO STRIP — Inside Hero Bottom
═══════════════════════════════════════ */
.hero-v2__logo-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8;
  padding: var(--s-5) 0;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, transparent 0%, rgba(11,17,32,0.6) 100%);
}

.hero-v2__logo-label {
  flex-shrink: 0;
  padding-left: var(--gutter);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
}

.hero-v2__logo-marquee {
  flex: 1;
  overflow: hidden;
  position: relative;
  /* Edge fade — logos emerge from and dissolve into the background */
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.hero-v2__logo-track {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  width: max-content;
  animation: logoScroll 80s linear infinite;
  will-change: transform;
}
.hero-v2__logo-track:hover {
  animation-play-state: paused;
}

.hero-v2__logo-track img {
  height: 24px;
  width: auto;
  opacity: 0.4;
  transition: opacity 0.3s;
  flex-shrink: 0;
}

.hero-v2__logo-track img:hover {
  opacity: 0.8;
}

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

@media (max-width: 768px) {
  .hero-v2__logo-label { display: none; }
  .hero-v2__logo-marquee {
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  }
}

/* ═══════════════════════════════════════
   PARTNERS V2 — Interactive Ecosystem
═══════════════════════════════════════ */
.partners-v2 {
  background: var(--navy);
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}

.partners-v2::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(5,195,195,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Tabs row */
.partners-v2__tabs {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-10);
  flex-wrap: wrap;
}

.partners-v2__tab {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-full);
  color: rgba(255,255,255,0.5);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  position: relative;
}

.partners-v2__tab:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.15);
}

.partners-v2__tab.is-active {
  background: rgba(5,195,195,0.12);
  border-color: rgba(5,195,195,0.3);
  color: var(--teal);
}

.partners-v2__tab-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.partners-v2__tab-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partners-v2__tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0;
  transition: opacity 0.3s;
}

.partners-v2__tab.is-active .partners-v2__tab-dot {
  opacity: 1;
  animation: pulse-dot 2s ease infinite;
}

/* Panels */
.partners-v2__panels { position: relative; }

.partners-v2__panel {
  display: none;
  animation: panelFadeIn 0.4s ease forwards;
}

.partners-v2__panel.is-active { display: block; }

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.partners-v2__panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-10);
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-2xl);
  padding: var(--s-10);
}

.partners-v2__panel-badge {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: var(--gold-glow);
  border-radius: var(--r-full);
  margin-bottom: var(--s-4);
}

.partners-v2__panel-content h3 {
  font-size: var(--text-h3);
  color: var(--white);
  margin-bottom: var(--s-3);
}

.partners-v2__panel-content p {
  color: rgba(255,255,255,0.55);
  font-size: var(--text-body);
  line-height: 1.7;
  margin-bottom: var(--s-5);
}

.partners-v2__features {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.partners-v2__features li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
}

.partners-v2__features svg { color: var(--teal); flex-shrink: 0; }

/* Stat cards in panel */
.partners-v2__stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.partners-v2__stat-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  text-align: center;
  transition: all var(--duration) var(--ease-out);
}

.partners-v2__stat-card:hover {
  background: rgba(5,195,195,0.08);
  border-color: rgba(5,195,195,0.2);
  transform: translateY(-2px);
}

.partners-v2__stat-num {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--s-1);
}

.partners-v2__stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}

@media (max-width: 768px) {
  .partners-v2__panel-grid {
    grid-template-columns: 1fr;
    padding: var(--s-6);
  }
  .partners-v2__stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════
   OLD PARTNERS (kept for reference)
═══════════════════════════════════════ */
.partners-section {
  padding: var(--s-12) 0;
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.partners-header {
  text-align: center;
  margin-bottom: var(--s-8);
}

.partners-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.partner-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: all var(--duration) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.partner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--teal-subtle) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration);
}

.partner-card:hover {
  border-color: rgba(5, 195, 195, 0.25);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(5, 195, 195, 0.1);
  transform: translateY(-4px);
}

.partner-card:hover::before { opacity: 1; }

.partner-logo {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: var(--r-lg);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: var(--s-2);
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partner-info {
  flex: 1;
  position: relative;
  z-index: 1;
}

.partner-info h4 {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

.partner-info p {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.partner-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--text-muted);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: all var(--duration-fast);
}

.partner-arrow svg { width: 14px; height: 14px; }

.partner-card:hover .partner-arrow {
  background: var(--teal);
  color: var(--white);
  transform: rotate(0deg);
}

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

@media (min-width: 769px) and (max-width: 1024px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-card:last-child { grid-column: span 2; justify-self: center; max-width: 400px; }
}

/* ═══════════════════════════════════════
   SERVICES — Bento Grid Layout
═══════════════════════════════════════ */
.services { background: var(--white); }

.section-header {
  max-width: 750px;
  margin-bottom: var(--s-16);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: var(--s-4);
}

.section-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--teal);
  border-radius: 1px;
}

.section-desc {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  max-width: 650px;
}

/* Bento grid — creative, asymmetric */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: var(--s-5);
}

.bento-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  transition: all var(--duration) var(--ease-out);
  overflow: hidden;
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease-out);
}

.bento-card:hover {
  border-color: rgba(5,195,195,0.2);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.bento-card:hover::before {
  transform: scaleX(1);
}

/* First card spans 2 cols */
.bento-card--featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}

.bento-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--teal-subtle), rgba(5,195,195,0.15));
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
  color: var(--teal);
}

.bento-card-icon svg { width: 26px; height: 26px; }

.bento-card h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--s-3);
}

.bento-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.bento-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
}

.bento-card-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast);
}

.bento-card:hover .bento-card-link svg { transform: translateX(4px); }

/* CTA card — same size as other cards in the grid */
.bento-card--cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border: 1px solid rgba(5,195,195,0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.bento-card--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(5,195,195,0.12) 0%, transparent 60%);
  transition: opacity var(--duration);
  opacity: 0.5;
}

.bento-card--cta:hover {
  border-color: rgba(5,195,195,0.35);
  box-shadow: var(--shadow-card-hover), 0 0 40px rgba(5,195,195,0.1);
}

.bento-card--cta:hover::before { opacity: 1; }
.bento-card--cta::after { display: none; }

.bento-cta__content {
  position: relative;
  z-index: 1;
}

.bento-cta__count {
  font-size: var(--text-h1);
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--s-3);
}

.bento-card--cta h3 {
  color: var(--white);
  font-size: var(--text-h4);
  margin-bottom: var(--s-2);
}

.bento-card--cta p {
  color: rgba(255,255,255,0.5);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.bento-cta__action {
  position: relative;
  z-index: 1;
  margin-top: var(--s-5);
}

.bento-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  background: var(--teal);
  border-radius: var(--r-full);
  transition: all var(--duration-fast) var(--ease-out);
}

.bento-card--cta:hover .bento-cta__btn {
  background: var(--white);
  box-shadow: var(--shadow-teal);
  transform: translateX(4px);
}

.bento-cta__btn svg {
  transition: transform var(--duration-fast);
}

.bento-card--cta:hover .bento-cta__btn svg {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card--featured { grid-column: span 1; grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card--featured { grid-column: span 2; }
}

/* ═══════════════════════════════════════
   PROBLEM SECTION (StoryBrand #2)
═══════════════════════════════════════ */
/* Dark section texture overlay — construction-inspired subtle diagonal lines */
.has-texture {
  position: relative;
}
.has-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.015) 40px,
      rgba(255,255,255,0.015) 41px
    );
  pointer-events: none;
  z-index: 0;
}
.has-texture > * { position: relative; z-index: 1; }

.problem-section { background: var(--navy); overflow: hidden; }

.problem-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-12);
  align-items: center;
}

.problem-content h2 {
  color: var(--white);
  margin-bottom: var(--s-4);
}

.problem-section .problem-lead,
p.problem-lead {
  color: rgba(255,255,255,0.55) !important;
  font-size: var(--text-body-lg) !important;
  margin-bottom: var(--s-8) !important;
}

.problem-section .problem-points,
.problem-points { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-6); }

.problem-section .problem-point,
.problem-point {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: rgba(245,105,98,0.06);
  border: 1px solid rgba(245,105,98,0.12);
  border-radius: var(--r-lg);
}

.problem-section .problem-point-icon,
.problem-point-icon { color: #F56962; flex-shrink: 0; margin-top: 2px; }
.problem-section .problem-point p,
.problem-point p { color: rgba(255,255,255,0.7) !important; margin: 0; font-size: var(--text-body); font-weight: 500; }

.problem-section .problem-closer,
p.problem-closer { color: var(--white) !important; font-size: var(--text-body-lg) !important; margin-top: var(--s-4); }
.problem-section .problem-closer strong,
p.problem-closer strong { color: var(--white) !important; font-weight: 700; }

.problem-visual {
  border-radius: var(--r-2xl);
  overflow: hidden;
}

.problem-visual img { width: 100%; height: 480px; object-fit: cover; }

@media (max-width: 1024px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-visual img { height: 300px; }
}

/* ═══════════════════════════════════════
   PLAN SECTION (StoryBrand #4 - 3 Steps)
═══════════════════════════════════════ */
.plan-section { background: var(--cream); }

.plan-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-3);
  max-width: 960px;
  margin: 0 auto;
}

.plan-step {
  flex: 1;
  text-align: center;
  padding: var(--s-8) var(--s-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: all var(--duration) var(--ease-out);
}

.plan-step:hover {
  border-color: rgba(5,195,195,0.2);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.plan-step__num {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--teal);
  letter-spacing: 0.1em;
  margin-bottom: var(--s-3);
}

.plan-step__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-4);
  background: linear-gradient(135deg, var(--teal-subtle), rgba(5,195,195,0.15));
  border-radius: var(--r-lg);
  color: var(--teal);
  transition: all var(--duration);
}

.plan-step__icon svg { width: 26px; height: 26px; }

.plan-step:hover .plan-step__icon {
  background: var(--teal);
  color: var(--white);
}

.plan-step h3 { font-size: var(--text-body); margin-bottom: var(--s-2); }
.plan-step p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; line-height: 1.6; }

.plan-step__connector {
  display: flex;
  align-items: center;
  padding-top: var(--s-16);
  color: var(--teal);
  opacity: 0.3;
}

@media (max-width: 768px) {
  .plan-steps { flex-direction: column; max-width: 400px; }
  .plan-step__connector { display: none; }
}

/* ═══════════════════════════════════════
   FAILURE / URGENCY (StoryBrand #6)
═══════════════════════════════════════ */
.failure-section {
  background: linear-gradient(135deg, #1a0a0a 0%, var(--navy) 50%, #0a1a1a 100%);
}

.failure-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.failure-badge {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-5);
  background: rgba(245,105,98,0.1);
  border-radius: 50%;
  color: #F56962;
}
.failure-badge svg { width: 24px !important; height: 24px !important; }

.failure-inner h2 {
  color: var(--white);
  margin-bottom: var(--s-4);
}

.failure-lead {
  color: rgba(255,255,255,0.5);
  font-size: var(--text-body-lg);
  margin-bottom: var(--s-10);
}

.failure-contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  text-align: left;
  margin-bottom: var(--s-4);
}

.failure-path {
  padding: var(--s-6);
  border-radius: var(--r-xl);
}

.failure-path--bad {
  background: rgba(245,105,98,0.06);
  border: 1px solid rgba(245,105,98,0.15);
}

.failure-path--good {
  background: rgba(5,195,195,0.06);
  border: 1px solid rgba(5,195,195,0.15);
}

.failure-path h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--s-3);
}

.failure-path--bad h4 { color: #F56962; }
.failure-path--good h4 { color: var(--teal); }

.failure-path ul { display: flex; flex-direction: column; gap: var(--s-2); }
.failure-path li {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  padding-left: var(--s-4);
  position: relative;
}
.failure-path li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.failure-path--bad li::before { background: rgba(245,105,98,0.5); }
.failure-path--good li::before { background: rgba(5,195,195,0.5); }

@media (max-width: 768px) {
  .failure-contrast { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   BLOG V2 — Magazine Layout
═══════════════════════════════════════ */
.blog-v2 { background: var(--white); }

.blog-v2__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--s-10);
}

.blog-v2__all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid rgba(5,195,195,0.2);
  border-radius: var(--r-full);
  transition: all var(--duration-fast);
}

.blog-v2__all-link:hover {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}

.blog-v2__all-link svg { transition: transform var(--duration-fast); }
.blog-v2__all-link:hover svg { transform: translateX(3px); }

/* Magazine grid: featured left, stack right */
.blog-v2__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-5);
  min-height: 480px;
}

/* Featured card — big image with overlay text */
.blog-v2__featured {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.blog-v2__featured-img {
  position: absolute;
  inset: 0;
}

.blog-v2__featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.blog-v2__featured:hover .blog-v2__featured-img img {
  transform: scale(1.06);
}

.blog-v2__featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,17,32,0.9) 0%, rgba(11,17,32,0.3) 40%, transparent 70%);
  transition: background 0.4s;
}

.blog-v2__featured:hover .blog-v2__featured-overlay {
  background: linear-gradient(to top, rgba(11,17,32,0.95) 0%, rgba(11,17,32,0.4) 50%, transparent 75%);
}

.blog-v2__featured-content {
  position: relative;
  z-index: 2;
  padding: var(--s-8);
}

.blog-v2__featured-content h3 {
  font-size: var(--text-h3);
  color: var(--white);
  margin-bottom: var(--s-2);
  line-height: 1.3;
}

.blog-v2__featured-content p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 440px;
  margin-bottom: var(--s-4);
}

/* Shared meta styles */
.blog-v2__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.blog-v2__cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  padding: 3px 10px;
  background: rgba(5,195,195,0.1);
  border-radius: var(--r-full);
}

.blog-v2__read {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.blog-v2__featured .blog-v2__read { color: rgba(255,255,255,0.4); }
.blog-v2__featured .blog-v2__cat { background: rgba(5,195,195,0.2); }

.blog-v2__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
}

.blog-v2__link svg { transition: transform var(--duration-fast); }
.blog-v2__featured:hover .blog-v2__link svg,
.blog-v2__compact:hover .blog-v2__link svg { transform: translateX(4px); }

/* Stacked compact cards */
.blog-v2__stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.blog-v2__compact {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-5);
  align-items: center;
  text-decoration: none;
  padding: var(--s-5);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: all var(--duration) var(--ease-out);
  flex: 1;
}

.blog-v2__compact:hover {
  border-color: rgba(5,195,195,0.2);
  box-shadow: var(--shadow-lg);
  transform: translateX(6px);
}

.blog-v2__compact-img {
  width: 160px;
  height: 120px;
  border-radius: var(--r-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.blog-v2__compact-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.blog-v2__compact:hover .blog-v2__compact-img img { transform: scale(1.08); }

.blog-v2__compact-content h4 {
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

@media (max-width: 1024px) {
  .blog-v2__grid { grid-template-columns: 1fr; min-height: auto; }
  .blog-v2__featured { min-height: 360px; }
}

@media (max-width: 768px) {
  .blog-v2__header { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .blog-v2__compact { grid-template-columns: 100px 1fr; gap: var(--s-3); }
  .blog-v2__compact-img { width: 100px; height: 80px; }
}

/* ═══════════════════════════════════════
   WHY CHOOSE — Asymmetric Split
═══════════════════════════════════════ */
.why-section { background: var(--cream); overflow: hidden; }

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-16);
  align-items: center;
}

.why-image {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
}

.why-image img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.why-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,17,32,0.4) 0%, transparent 50%);
}

.why-content { max-width: 520px; }

.why-feature {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border);
}

.why-feature:last-child { border-bottom: none; }

.why-feature-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  border-radius: var(--r-md);
  color: var(--white);
}

.why-feature-icon svg { width: 20px !important; height: 20px !important; color: var(--white) !important; stroke: currentColor; }
/* Only fill paths that don't explicitly set fill="none" (preserves outlined icons) */
.why-feature-icon svg:not([fill="none"]) { fill: currentColor; }
.why-feature-icon svg[fill="none"] { fill: none !important; }
.why-feature-icon svg[fill="none"] path { fill: none; }

.why-feature h4 {
  font-size: var(--text-body);
  font-weight: 700;
  margin-bottom: var(--s-1);
}

.why-feature p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-image img { height: 350px; }
}

/* ═══════════════════════════════════════
   PROOF — Combined Results + Guarantee
═══════════════════════════════════════ */
.proof-section {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.proof-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
  pointer-events: none;
  transition: all 1s ease;
}

/* Gold glow when guarantee is active */
.proof-section.is-guarantee::before {
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  right: auto;
  left: -20%;
}

.proof-header {
  text-align: center;
  margin-bottom: var(--s-12);
}

/* Pill toggle with sliding indicator */
.proof-toggle {
  display: inline-flex;
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-full);
  padding: 4px;
  margin: var(--s-8) auto 0;
}

.proof-toggle__btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: color var(--duration);
  white-space: nowrap;
}

.proof-toggle__btn.is-active { color: var(--navy); }
.proof-toggle__btn:hover:not(.is-active) { color: rgba(255,255,255,0.7); }

/* Sliding background pill */
.proof-toggle__slider {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: 50%;
  background: var(--teal);
  border-radius: var(--r-full);
  z-index: 1;
  transition: transform var(--duration) var(--ease-out), background var(--duration);
}

.proof-toggle__slider.at-guarantee {
  transform: translateX(100%);
  background: var(--gold);
}

/* Panels */
.proof-panel {
  display: none;
  animation: proofFadeIn 0.5s ease forwards;
}

.proof-panel.is-active { display: block; }

@keyframes proofFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.proof-panel__desc {
  text-align: center;
  color: rgba(255,255,255,0.45);
  font-size: var(--text-body);
  max-width: 520px;
  margin: 0 auto var(--s-10);
}

/* ═══════════════════════════════════════
   METRICS / CASE STUDIES — Dark Section
═══════════════════════════════════════ */
.metrics-section {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.metrics-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
  pointer-events: none;
}

.metrics-header {
  text-align: center;
  margin-bottom: var(--s-16);
}

.metrics-header .section-label { color: var(--teal); }
.metrics-header .section-label::before { background: var(--teal); }
.metrics-header h2 { color: var(--white); }
.metrics-header .section-desc { color: rgba(255,255,255,0.5); margin: 0 auto; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

.metric-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  text-align: center;
  transition: all var(--duration) var(--ease-out);
}

.metric-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(5,195,195,0.2);
  transform: translateY(-4px);
}

.metric-value {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--s-2);
}

.metric-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

.metric-client {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  font-weight: 500;
}

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

/* ═══════════════════════════════════════
   GUARANTEE — Glass Cards on Gradient
═══════════════════════════════════════ */
.guarantee-section {
  background: linear-gradient(135deg, var(--navy) 0%, #0F2027 50%, var(--navy-mid) 100%);
  position: relative;
}

.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.guarantee-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  transition: all var(--duration) var(--ease-out);
}

.guarantee-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
  border-color: rgba(212,168,83,0.2);
}

.guarantee-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-glow);
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
  color: var(--gold);
}

.guarantee-icon svg { width: 24px; height: 24px; }

.guarantee-card h3 {
  font-size: var(--text-h4);
  color: var(--white);
  margin-bottom: var(--s-3);
}

.guarantee-card p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

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

/* ═══════════════════════════════════════
   VISION — Big Text + Stats
═══════════════════════════════════════ */
.vision-section { background: var(--white); }

.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
}

/* Single column variant — no image, centered text (used for About Us mission) */
.vision-grid--single {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.vision-grid--single > div { text-align: center; }
.vision-grid--single h2 { color: inherit; }
.vision-grid--single .section-label { justify-content: center; }
.vision-section.section--dark { background: var(--navy); padding: var(--section-y) 0; position: relative; overflow: hidden; }
.vision-section.section--dark .vision-grid--single h2 { color: var(--white); }
.vision-section.section--dark .vision-grid--single p { color: rgba(255,255,255,0.65); font-size: var(--text-body-lg); line-height: 1.8; }
.vision-section.section--dark .vision-grid--single .section-label { color: var(--teal); }

.vision-image {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.vision-image img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.vision-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: var(--s-10) 0;
}

.vision-stat {
  padding: var(--s-5);
  background: var(--cream);
  border-radius: var(--r-lg);
  text-align: center;
}

.vision-stat-val {
  font-size: var(--text-h4);
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  margin-bottom: var(--s-1);
}

.vision-stat-lbl {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
}

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

/* ═══════════════════════════════════════
   INDUSTRIES — Hover-Reveal Cards
═══════════════════════════════════════ */
.industries-section { background: var(--cream); }

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.industry-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  transition: all var(--duration) var(--ease-out);
  overflow: hidden;
  cursor: pointer;
}

.industry-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease-out);
}

.industry-card:hover {
  border-color: rgba(5,195,195,0.15);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.industry-card:hover::after { transform: scaleX(1); }

.industry-card h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--s-2);
}

.industry-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--s-4);
}

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

/* ═══════════════════════════════════════
   REVIEWS — Google Reviews Showcase
═══════════════════════════════════════ */
.reviews-section { background: var(--cream); overflow: hidden; }

.reviews-header { text-align: center; margin-bottom: var(--s-10); }

.reviews-google-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  text-decoration: none;
  transition: all var(--duration) var(--ease-out);
}

.reviews-google-badge:hover {
  border-color: rgba(5,195,195,0.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.reviews-google-badge__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.reviews-google-badge__stars span {
  font-weight: 800;
  font-size: var(--text-body);
  color: var(--text-primary);
  margin-right: var(--s-1);
}

.reviews-google-badge__count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.reviews-google-badge__link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: var(--s-2);
}

/* Dual-row scrolling marquee */
.reviews-marquee { position: relative; }
/* Edge fades removed — clean edge-to-edge scroll */

.reviews-row {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  margin-bottom: var(--s-4);
}

.reviews-row[data-direction="left"] { animation: reviewScrollLeft 35s linear infinite; }
.reviews-row[data-direction="right"] { animation: reviewScrollRight 40s linear infinite; }

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

.reviews-row:hover { animation-play-state: paused; }

.review-card {
  width: 340px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  transition: all var(--duration) var(--ease-out);
}

.review-card:hover {
  border-color: rgba(5,195,195,0.2);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.review-card__stars {
  color: #FBBC05;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: var(--s-3);
}

.review-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--s-3);
  font-style: italic;
}

.review-card__author { display: flex; flex-direction: column; gap: 2px; }
.review-card__author strong { font-size: var(--text-sm); color: var(--text-primary); }
.review-card__author span { font-size: var(--text-xs); color: var(--text-muted); }

@media (max-width: 768px) { .review-card { width: 280px; } }

/* ═══════════════════════════════════════
   FAQ — Clean Accordion
═══════════════════════════════════════ */
.faq-section { background: var(--cream); }

.faq-list { max-width: 800px; margin: 0 auto; }

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

.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-6) 0;
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast);
}

.faq-trigger:hover { color: var(--teal); }

.faq-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all var(--duration-fast);
  color: var(--teal);
}

.faq-item.is-open .faq-icon { background: var(--teal); color: var(--white); transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration) var(--ease-out);
}

.faq-answer-inner {
  padding-bottom: var(--s-6);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ═══════════════════════════════════════
   CTA V2 — Interactive 3-Step Journey
═══════════════════════════════════════ */
.cta-v2 {
  background: var(--navy);
  padding: var(--section-y) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-v2__glow {
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(5,195,195,0.1) 0%, transparent 65%);
  pointer-events: none;
}

.cta-v2__header h2 {
  font-size: var(--text-h2);
  color: var(--white);
  margin-bottom: var(--s-3);
}

.cta-v2__gradient-text {
  background: linear-gradient(135deg, var(--teal), #7dd3fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-v2__header p {
  color: rgba(255,255,255,0.45);
  font-size: var(--text-body-lg);
  max-width: 480px;
  margin: 0 auto;
}

/* 3-step cards */
.cta-v2__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin: var(--s-12) auto;
  max-width: 900px;
}

.cta-v2__step {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-xl);
  padding: var(--s-8) var(--s-6);
  text-align: center;
  transition: all var(--duration) var(--ease-out);
  cursor: default;
}

.cta-v2__step:hover {
  background: rgba(5,195,195,0.06);
  border-color: rgba(5,195,195,0.2);
  transform: translateY(-6px);
}

.cta-v2__step-num {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--teal);
  letter-spacing: 0.1em;
  margin-bottom: var(--s-4);
}

/* Connector line between steps */
.cta-v2__step-line {
  display: none;
}

.cta-v2__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -14px;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, rgba(5,195,195,0.3), rgba(5,195,195,0.05));
  z-index: 2;
}

.cta-v2__step-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-4);
  background: linear-gradient(135deg, var(--teal-subtle), rgba(5,195,195,0.15));
  border-radius: var(--r-lg);
  color: var(--teal);
  transition: all var(--duration);
}

.cta-v2__step-icon svg { width: 26px; height: 26px; }

.cta-v2__step:hover .cta-v2__step-icon {
  background: var(--teal);
  color: var(--white);
  transform: scale(1.1);
}

.cta-v2__step h4 {
  color: var(--white);
  font-size: var(--text-body);
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.cta-v2__step p {
  color: rgba(255,255,255,0.4);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
}

/* Big CTA button */
.cta-v2__action { margin-top: var(--s-4); }

.cta-v2__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-10);
  font-family: var(--font);
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--navy);
  background: var(--teal);
  border-radius: var(--r-full);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: 0 0 0 0 rgba(5,195,195,0.4);
  animation: ctaPulse 3s ease infinite;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,195,195,0.4); }
  50% { box-shadow: 0 0 0 16px rgba(5,195,195,0); }
}

.cta-v2__btn:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-teal);
  animation: none;
}

.cta-v2__btn svg { transition: transform var(--duration-fast); }
.cta-v2__btn:hover svg { transform: translateX(4px); }

.cta-v2__meta {
  display: flex;
  justify-content: center;
  gap: var(--s-6);
  margin-top: var(--s-6);
  flex-wrap: wrap;
}

.cta-v2__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
}

.cta-v2__meta-item svg { color: var(--teal); }

@media (max-width: 768px) {
  .cta-v2__steps { grid-template-columns: 1fr; max-width: 360px; }
  .cta-v2__step:not(:last-child)::after { display: none; }
}

/* ═══════════════════════════════════════
   FOOTER V2 — Premium Interactive
═══════════════════════════════════════ */
/* Dark bg on outer Elementor footer wrapper to prevent white body showing through widget-wrap padding */
footer.elementor-location-footer { background: var(--navy-mid); }

.footer-v2 {
  background: var(--navy-mid);
  position: relative;
}

/* Services marquee ribbon */
.footer-v2__ribbon {
  overflow: hidden;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border-light);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.footer-v2__ribbon-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  white-space: nowrap;
  flex-shrink: 0;
  animation: ribbonScroll 30s linear infinite;
}

.footer-v2__ribbon-track > span:not(.footer-v2__ribbon-dot),
.footer-v2__ribbon-item {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-v2__ribbon-dot {
  display: block;
  width: 5px !important;
  height: 5px !important;
  min-width: 5px;
  min-height: 5px;
  background: var(--teal);
  border-radius: 50%;
  opacity: 0.6;
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

@keyframes ribbonScroll {
  to { transform: translateX(-50%); }
}

/* Footer grid */
.footer-v2 > .container { padding-top: var(--s-16); padding-bottom: var(--s-8); }

.footer-v2__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-12);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--s-8);
}

.footer-v2__brand p {
  color: rgba(255,255,255,0.4);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 300px;
  margin: var(--s-4) 0 var(--s-6);
}

/* Social icons with bounce */
.footer-v2__social { display: flex; gap: var(--s-3); }

.footer-v2__social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.4);
  transition: all var(--duration) var(--ease-spring);
}

.footer-v2__social a:hover {
  background: var(--teal);
  color: var(--white);
  transform: translateY(-4px) scale(1.1);
}

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

/* Column headings */
.footer-v2__col h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-5);
}

/* Animated underline links */
.footer-v2__links { display: flex; flex-direction: column; gap: var(--s-3); }

.footer-v2__links a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  transition: color var(--duration-fast);
  position: relative;
  display: inline-block;
  width: fit-content;
}

.footer-v2__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--teal);
  transition: width var(--duration) var(--ease-out);
}

.footer-v2__links a:hover { color: var(--teal); }
.footer-v2__links a:hover::after { width: 100%; }

/* Contact cards */
.footer-v2__contact { display: flex; flex-direction: column; gap: var(--s-4); }

.footer-v2__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  transition: background var(--duration-fast);
  text-decoration: none;
}

.footer-v2__contact-item:hover { background: rgba(255,255,255,0.04); }

.footer-v2__contact-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,195,195,0.1);
  border-radius: var(--r-sm);
  color: var(--teal);
  flex-shrink: 0;
}

.footer-v2__contact-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 1px;
}

.footer-v2__contact-value {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
}

/* Bottom bar */
.footer-v2__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.footer-v2__bottom p { font-size: var(--text-xs); color: rgba(255,255,255,0.2); margin: 0; }

.footer-v2__legal { display: flex; gap: var(--s-6); }
.footer-v2__legal a {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.2);
  transition: color var(--duration-fast);
}
.footer-v2__legal a:hover { color: var(--teal); }

/* Back to top button */
.footer-v2__top-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all var(--duration) var(--ease-spring);
}

.footer-v2__top-btn:hover {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  transform: translateY(-4px);
}

@media (max-width: 768px) {
  .footer-v2__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Brand spans full width on mobile */
  .footer-v2__brand {
    grid-column: 1 / -1;
  }
  /* Get in Touch spans full width on mobile */
  .footer-v2__col:last-child {
    grid-column: 1 / -1;
  }
  /* Center copyright and policy links on mobile */
  .footer-v2__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
  }
  .footer-v2__legal {
    justify-content: center;
  }
}

/* Old footer kept for reference */
.site-footer {
  background: var(--navy);
  padding: var(--s-16) 0 var(--s-8);
  border-top: 1px solid var(--border-light);
  display: none; /* hidden — replaced by footer-v2 */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-12);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--s-8);
}

.footer-brand img {
  height: 30px;
  width: auto;
  max-width: 130px;
}

.footer-brand p {
  color: rgba(255,255,255,0.45);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 300px;
  margin: var(--s-4) 0 var(--s-6);
}

.footer-social {
  display: flex;
  gap: var(--s-3);
}

.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  transition: all var(--duration-fast);
}

.footer-social a:hover { background: var(--teal); color: var(--white); }
.footer-social svg { width: 16px; height: 16px; }

.footer-col h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--s-5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-links a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  transition: color var(--duration-fast);
}
.footer-links a:hover { color: var(--teal); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.footer-copy { font-size: var(--text-xs); color: rgba(255,255,255,0.25); }

.footer-legal { display: flex; gap: var(--s-6); }
.footer-legal a { font-size: var(--text-xs); color: rgba(255,255,255,0.25); transition: color var(--duration-fast); }
.footer-legal a:hover { color: var(--teal); }

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

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

/* ═══════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* All content visible by default — no overrides needed */
  .marquee-track { animation: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════
   MEGA MENU
═══════════════════════════════════════ */
.nav-mega-item {
  position: relative;
}

.nav-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--s-2) var(--s-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  border-radius: var(--r-full);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: inherit;
  position: relative;
  z-index: calc(var(--z-header) + 2);
}

.nav-mega-trigger:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.nav-mega-item.is-open .nav-mega-trigger {
  color: var(--white);
  background: rgba(10,16,30,0.98);
  border-radius: 20px 20px 0 0;
  position: relative;
  z-index: calc(var(--z-header) + 5);
}

.nav-mega-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nav-mega-item.is-open .nav-mega-chevron {
  transform: rotate(180deg);
}

/* Panel drops below header — no full-screen backdrop */
.mega-panel {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
  transform: translateY(-8px);
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
}

.nav-mega-item.is-open .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


/* Hidden — backdrop is removed entirely */
.mega-panel__backdrop {
  display: none;
}

/* Panels that align card under their trigger */
.mega-panel--align-trigger {
  justify-content: flex-start;
}

.mega-panel__card {
  position: relative;
  z-index: calc(var(--z-header) + 3);
  background: rgba(10,16,30,0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--r-xl);
  padding: 2rem 2.5rem 2.5rem;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(5,195,195,0.08);
  max-width: var(--max-w);
  width: 100%;
}

.nav-mega-item.is-open .mega-panel__card {
  transform: none;
}

.mega-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mega-panel__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

.mega-panel__view-all {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.15s, color 0.15s;
}

.mega-panel__view-all:hover { color: #fff; gap: 8px; }

.mega-grid {
  display: grid;
  gap: 0.5rem;
}

.mega-grid--services { grid-template-columns: repeat(4, 1fr); }
.mega-grid--industries { grid-template-columns: repeat(4, 1fr); }
.mega-grid--locations { grid-template-columns: 1fr 1fr; gap: 2rem; }

.mega-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-lg);
  transition: background 0.15s ease;
  text-decoration: none;
}

.mega-link:hover { background: rgba(5,195,195,0.08); }
.mega-link:hover .mega-link__name { color: var(--teal); }

.mega-link__icon {
  width: 36px;
  height: 36px;
  background: rgba(5,195,195,0.12);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 1px;
}

.mega-link__icon svg { width: 18px; height: 18px; }

.mega-link__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  line-height: 1.3;
  transition: color 0.15s;
}

.mega-link__desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.4;
  margin-top: 2px;
}

/* Locations mega: two-column with US/Canada sections */
.mega-locations-col h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.5rem;
  padding: 0 1rem;
}

.mega-locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
}

/* Featured panel on right side */
.mega-featured {
  grid-column: span 1;
  background: linear-gradient(135deg, var(--navy) 0%, #0f1f42 100%);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
}

.mega-featured__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.mega-featured__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.mega-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
  transition: gap 0.15s;
}

.mega-featured__cta:hover { gap: 10px; }

/* Mobile mega menu */
@media (max-width: 1024px) {
  .nav-mega-item { display: none; }
  .mega-panel { display: none; }
}

/* Close on outside click overlay */
.mega-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 2);
  display: none;
}

.mega-overlay.is-active { display: block; }

/* Mobile nav drawer with mega accordions */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--navy);
  z-index: calc(var(--z-header) + 1);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 5rem 1.5rem 2rem;
  border-left: 1px solid rgba(255,255,255,0.08);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

@media (max-width: 1024px) {
  .mobile-nav { display: block; }
}

.mobile-nav__link {
  display: block;
  padding: 0.875rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.15s;
}

.mobile-nav__link:hover { color: var(--teal); }

.mobile-nav__section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.mobile-nav__toggle-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

.mobile-nav__section.is-open .mobile-nav__toggle-icon {
  transform: rotate(180deg);
}

.mobile-nav__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-nav__section.is-open .mobile-nav__submenu {
  max-height: 1000px;
}

.mobile-nav__sublink {
  display: block;
  padding: 0.625rem 0 0.625rem 1rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  transition: color 0.15s;
  border-left: 2px solid transparent;
}

.mobile-nav__sublink:hover {
  color: var(--teal);
  border-left-color: var(--teal);
}

.mobile-nav__cta {
  margin-top: 1.5rem;
  display: block;
  text-align: center;
  padding: 0.875rem;
  background: var(--teal);
  color: var(--navy);
  font-weight: 700;
  border-radius: var(--r-full);
  font-size: 0.9375rem;
}

.mobile-nav__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-header);
}

@media (max-width: 1024px) {
  .mobile-nav-overlay.is-active { display: block; }
}