/* ==========================================================================
   SPEARPOINT ADVISORS — Master Stylesheet
   ========================================================================== 
   Built for WordPress PHP integration readiness.
   All class names are semantic and BEM-compatible.
   
   TABLE OF CONTENTS:
   1. Design Tokens / CSS Custom Properties
   2. Reset & Base Styles
   3. Typography System
   4. Layout Utilities
   5. Navigation
   6. Hero Section
   7. Stats / Value Props Section
   8. Services Section
   9. About / Story Section
   10. Challenges Section
   11. Trade-Specific Section
   12. 5 Ds (Risk) Section
   13. Process / Framework Section
   14. Founder Section
   15. Testimonials Section
   16. CTA Section
   17. Footer
   18. Animations & Transitions
   19. Responsive Breakpoints
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS / CSS CUSTOM PROPERTIES
   ========================================================================== 
   Centralized color palette, spacing, typography, and elevation tokens.
   Update these to re-theme the entire site.
   ========================================================================== */
:root {
  /* --- Color Palette (from reference image) --- */
  --color-orange:       #E8530E;         /* Vivid Orange — CTA only */
  --color-orange-hover: #D14A0A;         /* Orange hover state */
  --color-orange-glow:  rgba(232, 83, 14, 0.25);
  --color-black:        #0A0A0A;         /* Deep Black — primary bg */
  --color-charcoal:     #1A1A1A;         /* Charcoal — card bg, secondary */
  --color-charcoal-light: #2A2A2A;       /* Lighter charcoal for borders */
  --color-blue:         #2D7BF6;         /* Bright Blue — links, accents */
  --color-blue-hover:   #1A63D6;
  --color-white:        #FFFFFF;         /* Pure White — text on dark */
  --color-gray-100:     #F5F5F5;         /* Lightest gray */
  --color-gray-200:     #E0E0E0;
  --color-gray-300:     #B0B0B0;         /* Muted body text */
  --color-gray-400:     #808080;         /* Subtle text */
  --color-gray-500:     #555555;

  /* --- Light theme surfaces & text ---
     The palette above (black/charcoal/white/gray-100..500) is still used,
     unchanged, for anything that needs to read as "dark" regardless of
     surface (e.g. the .stat-card--dark accent card). Everything else uses
     the tokens below. */
  --color-bg:           #FAF9F6;         /* Page / section background */
  --color-surface:      #FFFFFF;         /* Card background */
  --color-surface-2:    #F4F2EE;         /* Slightly recessed surface (dividers, subtle fills) */
  --color-border:       #8F8B80;         /* Hairline borders on light surfaces */
  --color-text:         var(--color-black); /* Headings / primary text on light bg (reuses the near-black value) */
  --color-text-2:       var(--color-black); /* Secondary body text on light bg */
  --color-text-3:       var(--color-black); /* Muted / tertiary text on light bg */
  --color-text-4:       #85888E;         /* Faint text on light bg (copyright, timestamps) */

  /* --- Typography --- */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Inter', sans-serif;

  /* Font weights */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* Font sizes — fluid type scale */
  --fs-xs:          0.75rem;    /* 12px */
  --fs-sm:          0.875rem;   /* 14px */
  --fs-base:        1rem;       /* 16px */
  --fs-md:          1.125rem;   /* 18px */
  --fs-lg:          1.25rem;    /* 20px */
  --fs-xl:          1.5rem;     /* 24px */
  --fs-2xl:         2rem;       /* 32px */
  --fs-3xl:         2.5rem;     /* 40px */
  --fs-4xl:         3rem;       /* 48px */
  --fs-5xl:         3.75rem;    /* 60px */
  --fs-6xl:         4.5rem;     /* 72px */
  --fs-hero:        clamp(2rem, 3.2vw + 0.8rem, 3.75rem);

  /* Line heights */
  --lh-tight:       1.1;
  --lh-snug:        1.25;
  --lh-normal:      1.5;
  --lh-relaxed:     1.75;

  /* Letter spacing */
  --ls-tight:       -0.03em;
  --ls-normal:      0;
  --ls-wide:        0.05em;
  --ls-wider:       0.1em;
  --ls-widest:      0.15em;

  /* --- Spacing Scale --- */
  --space-1:        0.25rem;    /* 4px */
  --space-2:        0.5rem;     /* 8px */
  --space-3:        0.75rem;    /* 12px */
  --space-4:        1rem;       /* 16px */
  --space-5:        1.25rem;    /* 20px */
  --space-6:        1.5rem;     /* 24px */
  --space-8:        2rem;       /* 32px */
  --space-10:       2.5rem;     /* 40px */
  --space-12:       3rem;       /* 48px */
  --space-16:       4rem;       /* 64px */
  --space-20:       5rem;       /* 80px */
  --space-24:       6rem;       /* 96px */
  --space-32:       8rem;       /* 128px */

  /* --- Layout --- */
  --max-width:      1320px;
  --nav-height:     80px;

  /* --- Elevation / Shadows --- */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl:      0 16px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow:    0 0 40px rgba(232, 83, 14, 0.15);

  /* --- Border Radius --- */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-2xl:     24px;
  --radius-full:    50%;

  /* --- Transitions --- */
  --transition-fast:    0.15s ease;
  --transition-base:    0.3s ease;
  --transition-slow:    0.5s ease;
  --transition-smooth:  0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-snap:    0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-2);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-blue-hover);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

::selection {
  background-color: var(--color-orange);
  color: var(--color-white);
}


/* ==========================================================================
   3. TYPOGRAPHY SYSTEM
   ========================================================================== */

/* --- Heading hierarchy — bold, oversized, authoritative --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
}

h2 {
  font-size: clamp(2rem, 3.5vw + 0.5rem, 3.5rem);
  font-weight: var(--fw-extrabold);
}

h3 {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  font-weight: var(--fw-bold);
}

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

/* --- Body text --- */
p {
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  max-width: 65ch; /* Optimal readability measure */
}

.text-accent {
  color: var(--color-orange);
}

.text-white {
  color: var(--color-white);
}

.text-muted {
  color: var(--color-text-3);
}

/* --- Eyebrow / Label text --- */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-4);
  display: inline-block;
}


/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

/* Names kept for min-diff (many sections still carry these classes from
   the dark theme) but they now alternate between two light tones for the
   same subtle section-to-section rhythm the dark theme had. */
.section--dark {
  background-color: var(--color-bg);
}

.section--charcoal {
  background-color: var(--color-surface);
}

/* Subtle section divider line */
.section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  position: absolute;
  top: 0;
  left: 0;
}

.grid {
  display: grid;
  gap: var(--space-8);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

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


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== 
   Fixed/sticky nav with logo and high-contrast CTA.
   Ready for WordPress: wp_nav_menu() compatible class structure.
   ========================================================================== */

/* --- Three.js canvas sits behind everything --- */
#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 1000;
  transition: background-color var(--transition-base), 
              box-shadow var(--transition-base),
              backdrop-filter var(--transition-base),
              top var(--transition-base);
}

/* WordPress Admin Bar Compatibility */
body.admin-bar .site-header {
  top: 32px;
}

body.admin-bar .mobile-nav {
  top: calc(var(--nav-height) + 32px);
  height: calc(100vh - var(--nav-height) - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }

  body.admin-bar .mobile-nav {
    top: calc(var(--nav-height) + 46px);
    height: calc(100vh - var(--nav-height) - 46px);
  }
}

/* Scrolled state — adds a light glass bar with a hairline shadow for
   definition once scrolled; transparent over the hero at the top. */
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.04);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* --- Logo --- */
.site-logo {
  display: flex;
  align-items: center;
  z-index: 1001;
}

.site-logo img {
  height: 60px !important;
  width: auto !important;
  max-width: none;
}

/* Footer brand mark isn't height-constrained by the nav bar, so it can
   run larger — the logo's wordmark is small relative to the icon above
   it and needs the extra size to stay legible. */
.footer__brand .site-logo img {
  height: 76px !important;
  width: auto !important;
  max-width: none;
}

/* --- Desktop Navigation --- */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.nav-menu__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--transition-fast);
  position: relative;
}

.nav-menu__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-orange);
  transition: width var(--transition-base);
}

.nav-menu__link:hover {
  color: var(--color-orange);
}

.nav-menu__link:hover::after {
  width: 100%;
}

.nav-menu__link.is-active {
  color: var(--color-orange);
}

.nav-menu__link.is-active::after {
  width: 100%;
}

/* --- Desktop dropdown menus (About / Services / Audience / Industries) --- */
.nav-menu__item {
  position: relative;
}

.nav-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.nav-menu__caret {
  font-size: 0.65em;
  transition: transform var(--transition-fast);
}

.nav-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 50%;
  transform: translate(-50%, -6px) scale(0.98);
  transform-origin: top center;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: var(--color-surface);
  border: 1px solid rgba(143, 139, 128, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(20, 20, 20, 0.06), 0 16px 40px rgba(20, 20, 20, 0.12);
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

/* Wider two-column layout for longer lists (e.g. Services' 7 items). */
.nav-menu__dropdown--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
  min-width: 520px;
}

/* Invisible hover bridge — fills the visual gap between the trigger and the
   dropdown panel so moving the cursor down into that gap doesn't fall out
   of `.nav-menu__item:hover` and cause the panel to flicker shut. */
.nav-menu__dropdown::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: 0;
  right: 0;
  height: var(--space-4);
}

@media (hover: hover) and (pointer: fine) {
  .nav-menu__item:hover .nav-menu__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
  }

  .nav-menu__item:hover .nav-menu__caret {
    transform: rotate(180deg);
  }
}

.nav-menu__dropdown-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 14px);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);
}

/* Dot indicator that grows and shifts orange on hover — the same
   "nudge forward" language as .btn__arrow and .value-card__link. */
.nav-menu__dropdown-link::before {
  content: '';
  position: absolute;
  left: var(--space-3);
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  transform: translateY(-50%) scale(1);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.nav-menu__dropdown-link:hover {
  background-color: var(--color-surface-2);
  color: var(--color-orange);
  padding-left: calc(var(--space-4) + 18px);
}

.nav-menu__dropdown-link:hover::before {
  background-color: var(--color-orange);
  transform: translateY(-50%) scale(1.5);
}

/* --- CTA Button (used in nav and elsewhere) --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-snap);
  white-space: nowrap;
  position: relative;
  --mx: 50%;
  --my: 50%;
  /* --lift/--scale: hover/press feedback, written by CSS below. Composed
     into one transform so nothing ever clobbers the other's contribution
     (inline `transform` would otherwise always win over these rules). */
  --lift: 0px;
  --scale: 1;
  transform: translateY(var(--lift)) scale(var(--scale));
}

/* Cursor-tracked glow — desktop/mouse only, driven by JS setting --mx/--my.
   border-radius: inherit (not overflow: hidden) keeps the button's own
   hover box-shadow glow from being clipped. */
@media (hover: hover) and (pointer: fine) {
  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
  }

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

.btn--primary {
  background-color: var(--color-orange);
  color: var(--color-white);
  box-shadow: 0 0 0 0 var(--color-orange-glow);
}

.btn--primary:hover {
  background-color: var(--color-orange-hover);
  color: var(--color-white);
  box-shadow: var(--shadow-glow);
  --lift: -1px;
}

.btn--primary:active {
  --lift: -1px;
  --scale: 0.97;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--outline:hover {
  border-color: var(--color-text-3);
  color: var(--color-text);
  background-color: rgba(0, 0, 0, 0.03);
}

.btn--outline:active {
  --scale: 0.97;
}

.btn--large {
  font-size: var(--fs-base);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-md);
}

.btn__arrow {
  transition: transform var(--transition-fast);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* --- Mobile Menu Toggle --- */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  z-index: 1001;
  padding: var(--space-2);
}

.mobile-toggle__bar {
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  transition: all var(--transition-base);
  border-radius: 2px;
}

/* Mobile toggle active state */
.mobile-toggle.is-active .mobile-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-toggle.is-active .mobile-toggle__bar:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.is-active .mobile-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile Navigation Overlay --- */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(30px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  padding: calc(var(--nav-height) + var(--space-8)) var(--space-6) var(--space-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav__link {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: var(--ls-tight);
  transition: color var(--transition-fast);
}

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

/* --- Mobile dropdown accordion (About / Services / Audience / Industries) ---
   The label is a real link (tap it to navigate, matching the desktop click
   behavior) and the caret is a separate button that only toggles the
   submenu — on touch there's no hover state to preview the dropdown, so a
   single combined control can't do both jobs unambiguously. */
.mobile-nav__item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.mobile-nav__caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
}

.mobile-nav__caret {
  font-size: 0.85em;
  transition: transform var(--transition-fast);
}

.mobile-nav__item.is-open .mobile-nav__caret {
  transform: rotate(180deg);
}

.mobile-nav__submenu {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  transition: max-height var(--transition-base), margin-top var(--transition-base);
}

.mobile-nav__item.is-open .mobile-nav__submenu {
  margin-top: var(--space-5);
}

.mobile-nav__sublink {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-3);
  transition: color var(--transition-fast);
}

.mobile-nav__sublink:hover {
  color: var(--color-orange);
}


/* ==========================================================================
   6. HERO SECTION
   ========================================================================== 
   Full-viewport hero with asymmetric layout.
   Left: bold typography + CTA + trust strip. Right: stat cards.
   Denser visual treatment with decorative accents.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  overflow: hidden;
  z-index: 1;
  background-color: var(--color-bg);
}

/* Soft directional wash behind the text column — keeps the copy on a clean,
   high-contrast field while the shapes/orbs read through further out. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 70% at 18% 40%,
    rgba(250, 249, 246, 0.96) 0%,
    rgba(250, 249, 246, 0.7) 55%,
    rgba(250, 249, 246, 0) 100%
  );
  z-index: 1;
}

/* Decorative accent line — top left corner */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 40%;
  background: linear-gradient(180deg, var(--color-orange), transparent);
  z-index: 2;
  opacity: 0.4;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-10);
}

.hero__content {
  max-width: 640px;
  min-width: 0;
}

/* --- Hero visual — founder photo, right column --- */
.hero__visual {
  position: relative;
}

.hero__visual-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

/* Soft brand-color glow behind the frame — painted first via ::before's
   generated-content ordering, so it sits behind the frame without needing
   z-index. */
.hero__visual::before {
  content: '';
  position: absolute;
  inset: -28px;
  background:
    radial-gradient(circle at 24% 20%, rgba(232, 83, 14, 0.20), transparent 60%),
    radial-gradient(circle at 82% 84%, rgba(37, 99, 235, 0.16), transparent 60%);
  filter: blur(20px);
  border-radius: var(--radius-lg);
}

.hero__visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--transition-smooth);
}

.hero__visual:hover .hero__visual-frame img {
  transform: scale(1.04);
}

/* Frosted credential badge, overlapping the bottom of the photo */
.hero__visual-badge {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero__visual-badge-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-hover));
  color: var(--color-white);
  font-size: var(--fs-sm);
}

.hero__visual-badge-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: var(--lh-snug);
}

.hero__visual-badge-role {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
  line-height: var(--lh-snug);
}

.hero__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-orange);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}

.hero__title .highlight {
  color: var(--color-orange);
  position: relative;
}

/* Underline accent on the highlight word */
.hero__title .highlight::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-orange);
  opacity: 0.4;
  border-radius: 2px;
}

.hero__description {
  font-size: var(--fs-base);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-8);
  max-width: 540px;
}

.hero__cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

/* --- Trust strip — industry badges below CTA --- */
.hero__trust {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

.hero__trust-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.hero__trust-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__trust-tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.hero__trust-tag:hover {
  border-color: var(--color-orange);
  color: var(--color-text);
}

/* --- Hero Stats Cards (right column) --- */
.hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-self: center;
}

.stat-card {
  padding: var(--space-6) var(--space-6);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

/* `transform` only enters the transition list on :hover — the hero entrance
   timeline in app.js also animates `transform` on this element via inline
   styles, and a permanent CSS transition on the same property fights it,
   causing the stutter/"stuck" look on scroll/load. */
.stat-card:hover {
  transform: translateY(-3px);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Feature card spans both columns */
.stat-card--featured {
  grid-column: 1 / -1;
}

.stat-card--light {
  background-color: var(--color-white);
}

/* Bold accent card — solid orange, distinguishes this stat from the plain
   white cards rather than reading as a leftover dark-theme panel. */
.stat-card--dark {
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-hover));
}

/* Frosted glass over the (now light) hero photo */
.stat-card--glass {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
}

.stat-card__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.stat-card--light .stat-card__label {
  color: var(--color-orange);
}

.stat-card--dark .stat-card__label {
  color: rgba(255, 255, 255, 0.85);
}

.stat-card--glass .stat-card__label {
  color: var(--color-orange);
}

.stat-card__value {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-card--light .stat-card__value {
  color: var(--color-black);
}

.stat-card--dark .stat-card__value {
  color: var(--color-white);
}

.stat-card--glass .stat-card__value {
  color: var(--color-text);
}

.stat-card__description {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.stat-card--light .stat-card__description {
  color: var(--color-gray-500);
}

.stat-card--dark .stat-card__description {
  color: rgba(255, 255, 255, 0.7);
}

.stat-card--glass .stat-card__description {
  color: var(--color-text-3);
}

/* Subtle decorative accent on light card */
.stat-card--light::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background-color: rgba(232, 83, 14, 0.08);
}

/* --- Stats strip — horizontal row of stat cards below the hero --- */
.stats-strip {
  padding: var(--space-12) 0;
  background-color: var(--color-bg);
}

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

.stats-strip__grid .stat-card {
  margin: 0;
}

/* The light and glass card variants are near-white and were designed to
   sit on the hero photo — on this section's flat background they need an
   explicit border/shadow so they still read as distinct cards. */
.stats-strip__grid .stat-card--light {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.stats-strip__grid .stat-card--glass {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  backdrop-filter: none;
}


/* ==========================================================================
   6b. HERO AMBIENT BLUSH
   ==========================================================================
   Soft orange/blue glow orbs over the hero photo. Deliberately no
   geometric/wireframe shapes — kept understated for a corporate audience.
   ========================================================================== */

/* --- Container --- */
.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Glow breathing */
@keyframes glowBreathe {
  0%, 100% { filter: blur(60px) brightness(1); }
  50%      { filter: blur(80px) brightness(1.3); }
}

/* ===== GRADIENT ORBS — soft glowing blush ===== */

.hero-decor__orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: glowBreathe 5s ease-in-out infinite;
}

/* Orange orb — strong warm glow, top-right */
.hero-decor__orb--orange {
  width: 500px;
  height: 500px;
  top: -10%;
  right: -8%;
  background: radial-gradient(circle, rgba(232, 83, 14, 0.35) 0%, rgba(232, 83, 14, 0.08) 50%, transparent 70%);
  filter: blur(60px);
}

/* Blue orb — cool accent, bottom-left */
.hero-decor__orb--blue {
  width: 450px;
  height: 450px;
  bottom: -15%;
  left: 5%;
  background: radial-gradient(circle, rgba(45, 123, 246, 0.25) 0%, rgba(45, 123, 246, 0.06) 50%, transparent 70%);
  filter: blur(60px);
  animation-delay: 2s;
}

/* Dim warm orb — center ambiance */
.hero-decor__orb--dim {
  width: 600px;
  height: 600px;
  top: 25%;
  left: 30%;
  background: radial-gradient(circle, rgba(232, 83, 14, 0.08) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 70%);
  filter: blur(80px);
  animation-delay: 3.5s;
}

@media (max-width: 768px) {
  .hero-decor__orb--orange {
    width: 250px;
    height: 250px;
  }

  .hero-decor__orb--blue {
    width: 200px;
    height: 200px;
  }

  .hero-decor__orb--dim {
    display: none;
  }
}

/* ===== DOT GRID — subtle texture across the hero, replaces the old photo ===== */
.hero-decor__grid {
  position: absolute;
  inset: -10% -10%;
  background-image: radial-gradient(rgba(143, 139, 128, 0.35) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 72% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 65% at 72% 45%, #000 0%, transparent 72%);
  opacity: 0.8;
}

/* ===== GEOMETRIC LINE SHAPES — outlined ring + square, right-hand field ===== */
@keyframes heroShapeSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-decor__ring {
  position: absolute;
  top: 14%;
  right: 10%;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(232, 83, 14, 0.28);
  border-radius: 50%;
  animation: heroShapeSpin 90s linear infinite;
}

.hero-decor__ring::before {
  content: '';
  position: absolute;
  inset: 34px;
  border: 1px dashed rgba(45, 123, 246, 0.22);
  border-radius: 50%;
}

.hero-decor__square {
  position: absolute;
  bottom: 12%;
  right: 22%;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(45, 123, 246, 0.25);
  transform: rotate(18deg);
  animation: heroShapeSpin 120s linear infinite reverse;
}

.hero-decor__plus {
  position: absolute;
  opacity: 0.5;
}

.hero-decor__plus::before,
.hero-decor__plus::after {
  content: '';
  position: absolute;
  background: var(--color-orange);
}

.hero-decor__plus::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.hero-decor__plus::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.hero-decor__plus--a {
  top: 20%;
  right: 32%;
  width: 14px;
  height: 14px;
}

.hero-decor__plus--b {
  bottom: 22%;
  right: 8%;
  width: 10px;
  height: 10px;
}

.hero-decor__plus--b::before,
.hero-decor__plus--b::after {
  background: var(--color-blue);
}

@media (max-width: 900px) {
  .hero-decor__ring,
  .hero-decor__square,
  .hero-decor__plus {
    display: none;
  }
}


/* ==========================================================================
   6c. SHARED SECTION BLUSH
   ==========================================================================
   The same orange/blue accent carried through every section below the
   hero. Each glow's gradient goes fully transparent well inside its own
   radius (62% stop) and is heavily blurred, so by the time a section's
   overflow clips it there is nothing left to clip — no hard-edged or
   "cut off" circle at the seam where one section ends and the next begins.
   ========================================================================== */

.section-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.section-decor__glow {
  position: absolute;
  border-radius: 50%;
}

.section-decor__glow--orange {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(232, 83, 14, 0.16) 0%, rgba(232, 83, 14, 0.05) 38%, transparent 62%);
  filter: blur(90px);
}

.section-decor__glow--blue {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(45, 123, 246, 0.14) 0%, rgba(45, 123, 246, 0.04) 38%, transparent 62%);
  filter: blur(90px);
}

/* Orange upper corner, blue lower corner */
.section-decor--a .section-decor__glow--orange { top: -12%; right: -8%; }
.section-decor--a .section-decor__glow--blue   { bottom: -14%; left: -6%; }

/* Mirrored — blue upper corner, orange lower corner */
.section-decor--b .section-decor__glow--orange { bottom: -14%; right: -6%; }
.section-decor--b .section-decor__glow--blue   { top: -12%; left: -8%; }

@media (max-width: 768px) {
  .section-decor__glow--orange,
  .section-decor__glow--blue {
    width: 320px;
    height: 320px;
  }
}


/* ==========================================================================
   7. STATS / VALUE PROPS SECTION
   ========================================================================== 
   Grid of value proposition stat cards.
   ========================================================================== */
.stats-section {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
}

/* Flexbox (not grid) so an incomplete last row — e.g. 7 cards over 4
   columns leaves 3 — centers itself instead of hugging the left edge. */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.value-card {
  flex: 0 1 calc(25% - var(--space-6));
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
  perspective: 800px;
}

/* --- Homepage "What We Do" grid — 3-per-row layout with the same orange
   gradient card treatment as the process-step Key Outcomes box, so this
   section reads as a more prominent, distinct moment. Scoped to this one
   grid instance (not the base .stats-grid/.value-card) since those classes
   are reused as a plain 4-up card grid on other pages. --- */
.stats-grid--outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stats-grid--outcomes .value-card {
  background: linear-gradient(135deg, rgba(232, 83, 14, 0.08), rgba(232, 83, 14, 0.02));
  border: 1px solid rgba(232, 83, 14, 0.15);
}

/* Clean 3-column layout variant (useful for 6 or 9 cards) */
.stats-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* `transform` only enters the transition list on :hover — keeping it out of
   the base rule stops it from fighting the GSAP scroll-reveal tween, which
   also animates `transform` on this element (see app.js reveal-stagger). */
.value-card:hover {
  border-color: var(--color-orange);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(232, 83, 14, 0.1);
  transition: border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.value-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(232, 83, 14, 0.15), rgba(232, 83, 14, 0.05));
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  font-size: var(--fs-xl);
  color: var(--color-orange);
}

.value-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.value-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
}

.value-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-orange);
  margin-top: var(--space-4);
  transition: gap var(--transition-fast);
}

.value-card__link:hover {
  color: var(--color-orange);
  gap: var(--space-3);
}


/* ==========================================================================
   7b. TRUST LOGOS / SOCIAL PROOF SECTION
   ==========================================================================
   Centered count-up headline over a row of credential/affiliation logos.
   Logos sit desaturated at rest and bloom to full color on hover; each
   floats on its own gentle, offset loop so the row never feels static.
   ========================================================================== */
.trust-logos-section {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
  overflow: hidden;
}

.trust-logos__header {
  text-align: center;
  max-width: 960px;
  margin: 0 auto var(--space-16);
}

.trust-logos__heading {
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.75rem);
  font-weight: var(--fw-extrabold);
  color: var(--color-text);
  white-space: nowrap;
}

.trust-logos__marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.trust-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: trust-logos-scroll 42s linear infinite;
}

.trust-logos__marquee:hover .trust-logos__track {
  animation-play-state: paused;
}

.trust-logos__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-16);
  padding-inline-end: var(--space-16);
}

.trust-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-logos__item img {
  height: 96px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
  transition: transform var(--transition-base);
}

.trust-logos__item:hover img {
  transform: scale(1.1);
}

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

@media (max-width: 768px) {
  .trust-logos__heading {
    white-space: normal;
  }

  .trust-logos__header {
    margin-bottom: var(--space-10);
  }

  .trust-logos__track {
    animation-duration: 26s;
  }

  .trust-logos__group {
    gap: var(--space-8);
    padding-inline-end: var(--space-8);
  }

  .trust-logos__item img {
    height: 64px;
  }
}

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

  .trust-logos__marquee {
    overflow-x: auto;
  }
}


/* ==========================================================================
   8. SERVICES SECTION
   ========================================================================== */
.services-section {
  position: relative;
  z-index: 1;
}

.services-section__header {
  max-width: 1040px;
  margin: 0 auto var(--space-16);
  text-align: center;
}

.services-section__header h2 {
  margin-bottom: var(--space-6);
}

.services-section__header p {
  font-size: var(--fs-md);
  max-width: none;
}

/* --- Services modular grid (2-col asymmetric) --- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.service-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background-color: var(--color-orange);
  transition: height var(--transition-smooth);
}

.service-card:hover::before {
  height: 100%;
}

.service-card:hover {
  border-color: rgba(232, 83, 14, 0.2);
  transform: translateY(-2px);
}

/* Feature the first card as large */
.service-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.service-card__number {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  color: rgba(232, 83, 14, 0.12);
  line-height: 1;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
}

.service-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.service-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
}


/* ==========================================================================
   9. ABOUT / STORY SECTION
   ========================================================================== */
.about-section {
  position: relative;
  z-index: 1;
}

.about-section__header {
  max-width: 1040px;
  margin: 0 auto var(--space-16);
  text-align: center;
}

.about-section__header h2 {
  margin-bottom: var(--space-6);
}

.about-section__header p {
  font-size: var(--fs-md);
  max-width: none;
  margin-bottom: var(--space-4);
}

.about-section__header p:last-child {
  margin-bottom: 0;
}

/* --- Fit criteria — horizontal card row (flexbox, not grid, so an
   incomplete last row centers itself — same pattern as .stats-grid). --- */
.fit-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.fit-card {
  flex: 0 1 calc(25% - var(--space-6));
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.fit-card:hover {
  border-color: var(--color-orange);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(232, 83, 14, 0.1);
  transition: border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.fit-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(232, 83, 14, 0.15), rgba(232, 83, 14, 0.05));
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  font-size: var(--fs-xl);
  color: var(--color-orange);
}

.fit-card__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.fit-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
}


/* ==========================================================================
   10. CHALLENGES SECTION
   ========================================================================== */
.challenges-section {
  position: relative;
  z-index: 1;
}

.challenges-section__header {
  max-width: 1040px;
  margin: 0 auto var(--space-16);
  text-align: center;
}

.challenges-section__header h2 {
  margin-bottom: var(--space-6);
}

.challenges-section__header p {
  max-width: none;
}

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

.challenge-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base);
  perspective: 800px;
}

/* `transform` only enters the transition list on :hover — see the note on
   .value-card above; avoids fighting the GSAP reveal-stagger tween. */
.challenge-card:hover {
  border-color: rgba(45, 123, 246, 0.3);
  transform: translateY(-2px);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.challenge-card__icon {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-4);
  color: var(--color-blue);
}

.challenge-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.challenge-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
}


/* ==========================================================================
   11. TRADE-SPECIFIC SECTION (Tabs or Accordion)
   ========================================================================== */
.trades-section {
  position: relative;
  z-index: 1;
}

.trades-section__header {
  max-width: 1160px;
  margin-bottom: var(--space-12);
}

.trades-section__header h2 {
  margin-bottom: var(--space-6);
}

.trades-section__header p {
  max-width: none;
}

/* --- Trades Tabbed Navigation --- */
.trades-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.trades-tabs::-webkit-scrollbar {
  display: none;
}

.trades-tab {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.trades-tab:hover {
  color: var(--color-text);
  background-color: rgba(0, 0, 0, 0.03);
}

.trades-tab.is-active {
  color: var(--color-orange);
  border-bottom-color: var(--color-orange);
  background-color: rgba(232, 83, 14, 0.05);
}

/* --- Trade Content Panel --- */
.trade-panel {
  display: none;
  animation: fadeIn 0.4s ease;
}

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

.trade-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

.trade-panel__content h3 {
  margin-bottom: var(--space-4);
}

.trade-panel__content p {
  margin-bottom: var(--space-4);
  font-size: var(--fs-base);
}

.trade-panel__highlight {
  background: linear-gradient(135deg, rgba(232, 83, 14, 0.08), rgba(232, 83, 14, 0.02));
  border: 1px solid rgba(232, 83, 14, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.trade-panel__highlight h4 {
  color: var(--color-orange);
  margin-bottom: var(--space-3);
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.trade-panel__highlight p {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
}


/* ==========================================================================
   12. 5 Ds (RISK) SECTION
   ========================================================================== */
.risk-section {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--color-bg), var(--color-surface), var(--color-bg));
}

.risk-section__header {
  text-align: center;
  max-width: 1160px;
  margin: 0 auto var(--space-12);
}

.risk-section__header h2 {
  margin-bottom: var(--space-6);
}

.risk-section__header p {
  margin: 0 auto var(--space-4);
  font-size: var(--fs-md);
  max-width: none;
}

.risk-section__header p:last-of-type {
  margin-bottom: 0;
}

.risk-section__header p.risk-section__lede {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

/* Homepage-only emphasis variant — italic, heavier weight, orange, so the
   5 Ds tagline reads as a bigger visual beat than the plain version reused
   on other pages. */
.risk-section__header p.risk-section__lede--emphasis {
  font-style: italic;
  font-weight: var(--fw-black);
  color: var(--color-orange);
}

/* --- 5 Ds items — each card is a link out to more detail --- */
.risk-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.risk-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 160px;
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* `transform` only enters the transition list on :hover — see the note on
   .value-card above; avoids fighting the GSAP reveal-stagger tween. */
.risk-item:hover {
  border-color: var(--color-orange);
  box-shadow: 0 8px 30px rgba(232, 83, 14, 0.1);
  transform: translateY(-3px);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.risk-item__icon {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-3);
  color: var(--color-orange);
}

.risk-item__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.risk-quote {
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
}

.risk-quote blockquote {
  position: relative;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  font-style: italic;
  line-height: var(--lh-relaxed);
  padding-left: var(--space-6);
  text-align: left;
}

/* Accent bar draws downward on scroll (see app.js) instead of a static border */
.risk-quote__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--color-orange);
  transform-origin: top;
  transform: scaleY(0);
}

.risk-quote p {
  margin-top: var(--space-6);
  font-size: var(--fs-md);
  color: var(--color-text-2);
  max-width: none;
}

/* --- Supporting stats — flat number + label pairs, no card chrome, since
   the page is already card-heavy elsewhere. --- */
.risk-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  max-width: 960px;
  margin: var(--space-12) auto 0;
  text-align: center;
}

.risk-stats__item {
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-border);
}

.risk-stats__item:first-child {
  padding-left: 0;
  border-left: none;
}

.risk-stats__value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  color: var(--color-orange);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.risk-stats__label {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
}

/* --- Left text / right content layout — heading + copy on the left,
   pull quote and stats stacked on the right. Right column is shorter
   than the left, so center them as a block rather than pinning both
   to the top. --- */
.risk-section__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-12);
  align-items: center;
}

.risk-section__text .risk-section__header {
  text-align: left;
  max-width: none;
  margin: 0;
}

.risk-section__text .risk-section__header p {
  margin-left: 0;
  margin-right: 0;
}

.risk-section__content .risk-grid {
  justify-content: flex-start;
  margin-bottom: var(--space-10);
}

.risk-section__content .risk-quote {
  max-width: none;
  margin: 0 0 var(--space-10);
}

.risk-section__content .risk-stats {
  grid-template-columns: repeat(2, 1fr);
  max-width: none;
  margin: 0;
}

/* 2-column grid — :first-child alone only strips the border from item 1;
   item 3 also starts a row and needs the same treatment. */
.risk-section__content .risk-stats .risk-stats__item:nth-child(odd) {
  border-left: none;
  padding-left: 0;
}


/* ==========================================================================
   12b. EIGHT DRIVERS OF VALUE SECTION
   ==========================================================================
   Numbered points list — deliberately not another card grid, since the
   page is already card-heavy elsewhere.
   ========================================================================== */
.drivers-section {
  position: relative;
  z-index: 1;
}

.drivers-section__header {
  text-align: center;
  max-width: 1160px;
  margin: 0 auto var(--space-16);
}

.drivers-section__header h2 {
  margin-bottom: var(--space-6);
}

.drivers-section__header p {
  margin: 0 auto;
  font-size: var(--fs-md);
  max-width: none;
}

.drivers-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-10);
  max-width: 1000px;
  margin: 0 auto;
}

.drivers-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.drivers-list__number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-hover));
  color: var(--color-white);
}

.drivers-list__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.drivers-list__text {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
}

/* --- Points (left) + visual (right), below the full-width header/lede
   row above. The visual is stretched to the row's height — set by the
   points list — rather than keeping its own fixed aspect-ratio, so it
   never grows taller than the content next to it. --- */
.drivers-section__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: stretch;
}

.drivers-section__row .drivers-list {
  max-width: none;
  margin: 0;
}

.drivers-section__row .split-panel__visual {
  aspect-ratio: auto;
  height: 100%;
}


/* ==========================================================================
   13. PROCESS / FRAMEWORK SECTION
   ========================================================================== */
.process-section {
  position: relative;
  z-index: 1;
}

.process-section__header {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: center;
  margin-bottom: var(--space-16);
}

.process-section__heading h2 {
  margin-bottom: 0;
}

.process-section__header p {
  margin: 0;
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
}

/* --- Process steps (horizontal timeline-like layout) --- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  position: relative;
}

/* Scroll-scrubbed progress line — the only connecting line shown;
   sits at the vertical center of the gate circles (32px = half of their
   64px height) and behind them (z-index 1 vs. the circle's z-index 2) so
   each circle appears to sit on top of it, reading as one connected path. */
.process-grid__progress {
  position: absolute;
  top: 30.5px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: var(--color-orange);
  box-shadow: 0 0 8px rgba(232, 83, 14, 0.6);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 1;
}

.process-step {
  text-align: center;
  position: relative;
  /* Explicit stacking above the progress line — the GSAP scroll-reveal
     tween below leaves an inline transform on this element, which opens
     its own stacking context and would otherwise trap the circle's
     z-index below the line's z-index: 1. */
  z-index: 2;
}

.process-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-hover));
  color: var(--color-white);
}

.process-step__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.process-step__text {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
  max-width: 340px;
  margin: 0 auto var(--space-5);
  text-align: left;
}

.process-step__outcomes {
  max-width: 340px;
  margin: 0 auto var(--space-5);
  padding: var(--space-5);
  background: linear-gradient(135deg, rgba(232, 83, 14, 0.08), rgba(232, 83, 14, 0.02));
  border: 1px solid rgba(232, 83, 14, 0.15);
  border-radius: var(--radius-lg);
  text-align: left;
}

.process-step__outcomes-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-2);
}

.process-step__outcomes-text {
  font-size: var(--fs-xs);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
}

.process-step__quote {
  max-width: 340px;
  margin: 0 auto;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--color-text-2);
  text-align: left;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-orange);
}


/* ==========================================================================
   14. FOUNDER SECTION
   ========================================================================== */
.founder-section {
  position: relative;
  z-index: 1;
}

.founder-section__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  align-items: center;
}

.founder-section__image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Founder photo */
.founder-section__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-border));
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.founder-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--transition-smooth);
}

.founder-section__image-wrap:hover .founder-section__image img {
  transform: scale(1.05);
}

.founder-section__content h2 {
  margin-bottom: var(--space-6);
}

.founder-section__content p {
  margin-bottom: var(--space-6);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* --- Credentials tags --- */
.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-8) 0;
}

.credential-tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: rgba(232, 83, 14, 0.08);
  color: var(--color-orange);
  border: 1px solid rgba(232, 83, 14, 0.15);
}

/* Achievement highlight card */
.achievement {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.achievement p {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  margin-bottom: 0;
}


/* ==========================================================================
   14b. SPLIT PANEL (TEXT + IMAGE-PLACEHOLDER) SECTION
   ==========================================================================
   Reusable text/placeholder-image two-column pattern for plain-text
   sections that don't have real photography yet. Distinct from
   .founder-section__* (real photo, singular per page, wired to its own
   scroll-clip-path JS via a `document.querySelector` singular lookup) —
   this is a pure-CSS placeholder graphic, safe to repeat many times per
   page. Reveal-in reuses the sitewide .reveal class (querySelectorAll-
   based, safe for many instances).
   ========================================================================== */
.split-panel__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Alternate-side modifier. Flipping grid-template-columns AND setting
   `order` together is required — `order` alone only relocates which
   element sits in track 1, it doesn't resize that track, so the visual
   would silently inherit the wide 1.2fr column and invert the ratio. */
.split-panel__grid--reverse {
  grid-template-columns: 1fr 1.2fr;
}

.split-panel__grid--reverse .split-panel__visual {
  order: -1;
}

.split-panel__content {
  position: relative;
  z-index: 1;
}

/* Several sections being wrapped reuse centered header components built
   for full-width use elsewhere — force them to read as a normal
   editorial column here instead of a centered block in a narrow space. */
.split-panel__content .about-section__header,
.split-panel__content .risk-section__header,
.split-panel__content .drivers-section__header {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* --- Placeholder visual ---
   Soft brand-gradient tile + masked dot-grid texture + one outlined ring
   accent, echoing the homepage hero's .hero-decor__grid / .hero-decor__ring
   decor, plus a large centered icon in its own soft chip — reads as an
   intentional graphic, not a missing image. Same framing as
   .founder-section__image so it belongs to the same "photo slot" family. */
.split-panel__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(232, 83, 14, 0.16), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(45, 123, 246, 0.14), transparent 55%),
    linear-gradient(135deg, var(--color-surface-2), var(--color-border));
}

.split-panel__visual::before {
  content: '';
  position: absolute;
  inset: -20%;
  background-image: radial-gradient(rgba(143, 139, 128, 0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 65% 60% at 50% 50%, #000 0%, transparent 75%);
  opacity: 0.6;
}

.split-panel__visual::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(45, 123, 246, 0.25);
  border-radius: var(--radius-full);
}

.split-panel__visual-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(232, 83, 14, 0.18);
  box-shadow: 0 12px 32px rgba(232, 83, 14, 0.12);
  font-size: 3.25rem;
  color: var(--color-orange);
}

/* --- Real-image variant of .split-panel__visual — used once a photo/
   graphic replaces the generic dot-grid + icon placeholder. Drops the
   placeholder's decorative layers and lets the image set its own
   aspect ratio instead of forcing the 4:5 portrait crop. --- */
.split-panel__visual--photo {
  aspect-ratio: auto;
  background: var(--color-surface);
}

.split-panel__visual--photo::before,
.split-panel__visual--photo::after {
  content: none;
}

.split-panel__visual--photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
}


/* ==========================================================================
   15. TESTIMONIALS SECTION
   ========================================================================== */
.testimonials-section {
  position: relative;
  z-index: 1;
}

.testimonials-section__header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.testimonials-section__header h2 {
  margin-bottom: var(--space-4);
}

.testimonials-section__header p {
  margin: 0 auto;
  font-size: var(--fs-md);
}

/* --- Testimonials Slider --- */
.testimonials-slider {
  position: relative;
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  transition: transform var(--transition-smooth);
}

.testimonial-card {
  flex: 0 0 100%;
  margin-right: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  position: relative;
  perspective: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Large quotation mark decoration */
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-size: 5rem;
  font-weight: var(--fw-black);
  color: rgba(232, 83, 14, 0.08);
  line-height: 1;
  font-family: Georgia, serif;
}

.testimonial-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-4);
  color: var(--color-orange);
  font-size: var(--fs-sm);
}

.testimonial-card__quote {
  font-size: var(--fs-base);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
  font-style: italic;
  max-width: none;
}

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

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-orange), var(--color-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.testimonial-card__role {
  font-size: var(--fs-xs);
  color: var(--color-text-3);
}

/* --- Slider Controls --- */
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.slider-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: all var(--transition-fast);
  font-size: var(--fs-lg);
}

.slider-btn:hover {
  border-color: var(--color-orange);
  background-color: rgba(232, 83, 14, 0.1);
}

.slider-dots {
  display: flex;
  gap: var(--space-2);
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.slider-dot.is-active {
  background-color: var(--color-orange);
  width: 24px;
  border-radius: 4px;
}


/* ==========================================================================
   15b. SHARED — SECTION-HEADER SPLIT LAYOUT MODIFIER
   ==========================================================================
   Additive modifier for centered eyebrow+h2+p header components
   (.about-section__header, .testimonials-section__header,
   .services-section__header, .trades-section__header, etc). Layer
   `.section-header--split` onto the header's outer div, alongside its
   existing class, to switch it from a centered stacked block into a
   two-column layout on desktop — heading left, paragraph right — instead
   of leaving empty space beside a short block of centered text. Requires
   wrapping the eyebrow (if present) + heading in a `.section-header__heading`
   div; the paragraph stays a direct sibling. Only apply to headers with
   exactly one heading and exactly one description <p>. Below 1024px it
   resets to a stacked column (see the responsive breakpoints section).

   Declared after every base header class's own rule above so its overrides
   always win the cascade regardless of which class it's layered onto.

   Same mechanism as .process-section__header (section 13), which predates
   this and is left as its own separate implementation.
   ========================================================================== */
.section-header--split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: center;
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.section-header--split .section-header__heading h2,
.section-header--split .section-header__heading h3 {
  margin-bottom: 0;
}

.section-header--split p {
  margin: 0;
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  max-width: none;
}


/* ==========================================================================
   16. CTA SECTION
   ========================================================================== */
.cta-section {
  position: relative;
  z-index: 1;
  text-align: center;
  background: linear-gradient(180deg, var(--color-bg), var(--color-surface));
}

.cta-section h2 {
  max-width: 800px;
  margin: 0 auto var(--space-6);
}

.cta-section p {
  margin: 0 auto var(--space-10);
  font-size: var(--fs-md);
  max-width: 600px;
}

.cta-section__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 1;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16) 0 var(--space-8);
  width: 100%;
  clear: both;
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
  width: 100%;
}

.footer__brand {
  flex: 1.5 1 280px;
  max-width: 340px;
}

.footer__column {
  flex: 1 1 160px;
}

.footer__brand {
  flex: 1.5 1 280px;
  max-width: 340px;
}

.footer__column {
  flex: 1 1 160px;
}

.footer__brand p {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  margin-top: var(--space-4);
  max-width: 320px;
}

.footer__heading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__links a {
  font-size: var(--fs-sm);
  color: var(--color-text-3);
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-text);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.footer__copyright {
  font-size: var(--fs-xs);
  color: var(--color-text-4);
}

.footer__socials {
  display: flex;
  gap: var(--space-4);
}

.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-3);
  font-size: var(--fs-sm);
  transition: all var(--transition-fast);
}

.footer__social-link:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
  background-color: rgba(232, 83, 14, 0.08);
}


/* ==========================================================================
   18. ANIMATIONS & TRANSITIONS
   ========================================================================== */

/* Reveal animations — initial pre-JS state only.
   GSAP drives the actual opacity/transform tween on scroll (see app.js);
   no CSS `transition` here on purpose — a transition on the same
   properties GSAP animates every frame fights it and causes stutter. */
.reveal {
  opacity: 0;
  transform: translateY(40px);
}

/* Centered on desktop/tablet; left-aligned on mobile only (see the
   max-width: 768px override below) — used on inline-styled CTA wrappers
   that otherwise hardcode text-align: center. */
.center-cta {
  text-align: center;
}

/* Small hint line placed directly above "Schedule a Conversation" CTA
   buttons sitewide (not the final/bottom CTA section on each page).
   Inherits text-align from its wrapper (.center-cta centers it, hero
   CTA groups/left-aligned wrappers keep it left) rather than hardcoding
   alignment here — max-width: none overrides the sitewide `p { max-width:
   65ch }` rule, since a narrower-than-container box with no margin: auto
   stays pinned to the left edge regardless of text-align, which was
   silently defeating the centering. */
p.cta-hint {
  max-width: none;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-8);
}

/* Fade-in keyframe for tab panels */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Counter animation class */
.counter-animate {
  font-variant-numeric: tabular-nums;
}

/* Smooth scroll anchor offset for fixed nav */
[id] {
  scroll-margin-top: calc(var(--nav-height) + var(--space-8));
}

/* Reduced motion — neutralizes the CSS-side transitions for the new
   interactive effects. The JS-side guards (app.js) do the heavier lifting
   of skipping the actual parallax/kinetic-wipe animations. */
@media (prefers-reduced-motion: reduce) {
  .founder-section__image img {
    transition: none;
  }
}


/* ==========================================================================
   19. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --- Tablet (max 1024px) --- */
@media (max-width: 1024px) {

  .nav-menu {
    gap: var(--space-4);
  }

  .nav-menu__link {
    font-size: var(--fs-xs);
  }

  .process-section__header {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
  }

  .section-header--split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    padding: var(--space-20) var(--space-6) var(--space-12);
  }

  .hero__content {
    max-width: none;
  }

  .hero__visual {
    max-width: 420px;
    margin: var(--space-10) auto 0;
  }

  .stats-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .stat-card {
    padding: var(--space-4);
  }

  .stat-card__value {
    font-size: var(--fs-3xl);
  }

  .value-card {
    flex-basis: calc(50% - var(--space-6));
  }

  .stats-grid--outcomes {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .fit-card {
    flex-basis: calc(50% - var(--space-6));
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card--featured {
    grid-template-columns: 1fr;
  }

  .challenges-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trade-panel__grid {
    grid-template-columns: 1fr;
  }

  .process-grid__progress {
    display: none;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .process-step {
    text-align: center;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
  }

  /* .process-step__text carries its own explicit left-align above, so
     centering the parent isn't enough to beat it. .process-step__outcomes
     and .process-step__quote set their own left-align too — left alone,
     since centering a bulleted card or a bordered pull-quote reads wrong. */
  .process-step__text {
    text-align: center;
  }

  .process-step__number {
    grid-row: 1 / 4;
    margin-bottom: 0;
  }

  .process-step__text,
  .process-step__outcomes,
  .process-step__quote {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .risk-stats {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }

  .risk-stats__item {
    padding: var(--space-5) 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .risk-stats__item:first-child {
    padding-top: 0;
    border-top: none;
  }

  .founder-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split-panel__grid,
  .split-panel__grid--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .risk-section__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .drivers-section__row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .drivers-section__row .split-panel__visual {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .risk-section__content .risk-stats {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }

  .risk-section__content .risk-stats .risk-stats__item {
    padding: var(--space-5) 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .risk-section__content .risk-stats .risk-stats__item:first-child {
    padding-top: 0;
    border-top: none;
  }

  /* Reset the desktop zig-zag reorder — text always reads before the
     placeholder image on mobile, regardless of desktop side. */
  .split-panel__grid--reverse .split-panel__visual {
    order: 0;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}


/* Keep the drivers image hidden below the 1230px layout threshold. */
@media (max-width: 1229px) {
  .drivers-section__row {
    grid-template-columns: 1fr;
  }

  .drivers-section__row .split-panel__visual {
    display: none;
  }
}


/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {

  :root {
    --nav-height: 64px;
  }

  .site-logo img {
    height: 46px;
  }

  .section {
    padding: var(--space-16) 0;
  }

  .container {
    padding: 0 var(--space-4);
  }

  /* Show mobile menu toggle */
  .mobile-toggle {
    display: flex;
  }

  /* Hide desktop nav */
  .nav-menu {
    display: none;
  }

  /* Show mobile nav overlay */
  .mobile-nav {
    display: flex;
  }

  .hero__inner {
    padding: var(--space-16) var(--space-4) var(--space-8);
  }

  .hero__title {
    font-size: clamp(1.6rem, 5vw + 0.3rem, 2.5rem);
  }

  .hero__visual {
    max-width: 320px;
    margin: var(--space-8) auto 0;
  }

  /* Long CTA copy (e.g. "Start with a Free Business Assessment") mustn't
     force .btn's global white-space: nowrap width past the viewport —
     applies to every large button, not just the hero's. */
  .btn--large {
    white-space: normal;
    text-align: left;
    width: 100%;
    justify-content: center;
  }

  .hero__cta-group .btn--large {
    font-size: var(--fs-sm);
  }

  .hero__visual-badge {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .stats-strip__grid {
    grid-template-columns: 1fr;
  }

  .stat-card--featured {
    grid-column: auto;
  }

  .hero__cta-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__trust-tags {
    gap: var(--space-1);
  }

  .value-card {
    flex-basis: 100%;
  }

  .stats-grid--outcomes {
    grid-template-columns: 1fr;
  }

  .stats-grid--3col {
    grid-template-columns: 1fr;
  }

  .fit-card {
    flex-basis: 100%;
  }

  /* Stack the gate number above the title/text instead of beside it —
     the auto/1fr two-column layout from the tablet breakpoint eats too
     much width on narrow phones and cramps the body copy. */
  .process-step {
    display: block;
  }

  .process-step__number {
    grid-row: auto;
    margin-bottom: var(--space-4);
  }

  .challenges-grid {
    grid-template-columns: 1fr;
  }

  .risk-grid {
    gap: var(--space-3);
  }

  /* Each card was sizing to its own label's width ("Death" vs.
     "Disagreement"), so the two-per-row wrap came out visibly uneven.
     An explicit equal flex-basis keeps every card — including the lone
     5th one centered on its own row — the same width. */
  .risk-item {
    min-width: 0;
    flex: 1 1 calc(50% - var(--space-3) / 2);
    padding: var(--space-4) var(--space-5);
  }

  .drivers-list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split-panel__visual {
    aspect-ratio: 16 / 10;
    max-width: 420px;
    margin: 0 auto;
  }

  .drivers-section__row .split-panel__visual {
    aspect-ratio: 16 / 10;
    max-width: 420px;
    margin: 0 auto;
    height: auto;
  }

  .split-panel__visual-icon {
    width: 96px;
    height: 96px;
    font-size: 2.5rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: left;
  }

  .footer__brand .site-logo {
    width: max-content;
    margin: 0;
  }

  /* Desktop's small tracked-out uppercase label reads fine as a subtle
     eyebrow next to a full column of links, but alone on mobile it just
     looks like body text — size it up and weight it like an actual
     section heading. */
  .footer__heading {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-normal);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: left;
  }

  /* Mobile-only left-align — these are centered by design on tablet/desktop
     (see their base/1024px rules above); on phones the centered blocks of
     text read better left-aligned. */
  .center-cta,
  .trust-logos__header,
  .services-section__header,
  .about-section__header,
  .challenges-section__header,
  .risk-section__header,
  .risk-item,
  .risk-quote,
  .risk-stats,
  .drivers-section__header,
  .process-step,
  .process-step__text,
  .testimonials-section__header,
  .cta-section {
    text-align: left;
  }
}


/* --- Small Mobile (max 480px) --- */
@media (max-width: 480px) {
  .hero__title {
    font-size: 2rem;
  }
}