/* ══════════════════════════════════════════════════════════════════
   RESET & VARIABLES (shared across all pages)
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand colors from guidelines */
  --orange:       #FF671F;
  --orange-80:    #FF854C;
  --orange-50:    #FFB38F;
  --orange-10:    #FFF4EE;
  --blue:         #008CCD;
  --blue-80:      #33A3D7;
  --blue-50:      #80C6E6;
  --blue-10:      #E6F4FA;
  --dark:         #414141;
  --gray-accent:  #F4F4F4;
  --gray-200:     #E5E5E5;
  --gray-300:     #CCCCCC;
  --gray-400:     #999999;
  --gray-500:     #777777;
  --gray-light:   #f5f5f7;
  --gray-card:    #f4f4f4;
  --white:        #FFFFFF;
  --cream:        #FAF7F4;
  --navy:         #1B2453;

  --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-w: min(1280px, 92vw);
  --section-gap: clamp(2rem, 4.5vw, 3.5rem);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--dark);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.container { width: var(--max-w); margin: 0 auto; }

/* ── Scroll Reveal ──────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ══════════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent;
  border-bottom: none;
  transition: background 0.3s, box-shadow 0.3s;
}
.nav.scrolled { background: #050a18; box-shadow: 0 1px 8px rgba(0,0,0,0.2); }
.nav-inner {
  width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 1.25rem; color: #fff;
}
.nav-logo svg { width: 160px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; margin-left: auto; }
.nav-links a {
  font-size: 0.88rem; font-weight: 500; color: rgba(255,255,255,0.85);
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
/* The Say Hello CTA inside the nav links list is mobile-only; on desktop
   the same button is shown in .nav-right, so hide the duplicate here. */
.nav-links-cta { display: none; }
.nav-right { display: flex; align-items: center; gap: 0.75rem; margin-left: 2.2rem; }

/* Audience switcher (Employers / Individuals) — a small segmented toggle in
   the nav. Same neutral "selected" style for both options (no color flip). */
.aud-switch {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 50px; padding: 3px;
}
.aud-opt {
  font-size: 0.8rem; font-weight: 600; padding: 5px 14px; border-radius: 50px;
  border: none; background: transparent; color: rgba(255,255,255,0.65);
  cursor: pointer; font-family: inherit; line-height: 1.2; white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.aud-opt[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,0.16); }
/* Mobile copy lives in the dropdown; hidden on desktop. */
.nav-aud-mobile { display: none; }
/* Reserve the nav CTA width for the longest label ("Schedule a Consultation")
   so switching audience modes doesn't resize the button and shift the nav.
   (.btn-solid is already centered, so the shorter "Say Hello" just sits
   centered in the reserved space.) */
.nav-right .btn-solid { min-width: 202px; }

/* Buttons */
.btn-ghost {
  padding: 0.5rem 1.2rem; border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.4); background: transparent;
  font-size: 0.85rem; font-weight: 600; color: #fff;
  cursor: pointer; transition: all 0.2s;
}
.btn-ghost:hover { border-color: #fff; color: #fff; }
.btn-solid {
  padding: 0.5rem 1.2rem; border-radius: 6px; border: none;
  background: var(--orange); color: var(--white);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: inline-block; text-align: center;
}
.btn-solid:hover { background: var(--orange-80); transform: translateY(-1px); }

/* Mobile toggle */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: 0.3s; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: 80px; left: 0; right: 0;
    background: var(--white); flex-direction: column;
    padding: 1.5rem 2rem 2rem; gap: 1.2rem;
    border-bottom: 1px solid var(--gray-200);
    /* translate by own height + the 80px nav offset so the panel fully
       clears the viewport when closed (translateY(-120%) was too
       small for tall dropdowns, leaving the bottom edge visible) */
    transform: translateY(calc(-100% - 80px));
    transition: transform 0.35s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { color: var(--dark); }
  .nav-right { display: none; }
  /* Surface the Say Hello CTA inside the mobile dropdown (the desktop
     .nav-right copy is hidden above). Full-width orange button, white text. */
  .nav-links-cta { display: block; margin-top: 0.4rem; }
  .nav-links-cta a.btn-solid { display: block; width: 100%; color: var(--white); padding: 0.7rem 1.2rem; font-size: 0.95rem; }
  /* Audience switcher moves into the dropdown on mobile (the desktop copy in
     .nav-right is hidden). Full-width segmented control on the white panel. */
  .nav-aud-mobile { display: block; width: 100%; }
  .aud-switch--mobile { display: flex; width: 100%; border-color: #cdd6e0; }
  .aud-switch--mobile .aud-opt { flex: 1; text-align: center; color: var(--navy); font-size: 0.92rem; padding: 10px 0; }
  .aud-switch--mobile .aud-opt[aria-pressed="true"] { color: #fff; background: var(--navy); }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.65);
  padding: 4rem 0 2rem;
  border-radius: 20px 20px 0 0;
}
/* Centered vertical flow: logo → divider → page nav → contact → social → disclaimer */
.footer .container { text-align: center; }

.footer-brand {
  display: flex; justify-content: center;
  margin-bottom: 2.5rem;
}
.footer-brand .footer-logo svg {
  height: 64px; width: auto;
  display: block;
}

.footer-rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 0 2.5rem;
}

.footer-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1rem 2.4rem;
  margin-bottom: 2rem;
}
.footer-nav a {
  font-size: 0.95rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--white); }

.footer-contact {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.88rem; color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2rem;
}
.footer-contact a { color: inherit; transition: color 0.2s; }
.footer-contact a:hover { color: var(--white); }
.footer-dot { color: rgba(255, 255, 255, 0.25); }

.footer-social {
  display: flex; justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s;
}
.footer-social a:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem;
  font-size: 0.72rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: rgba(255, 255, 255, 0.4); text-decoration: underline; }
.footer-bottom a:hover { color: rgba(255, 255, 255, 0.6); }

/* ══════════════════════════════════════════════════════════════════
   SHARED SECTION STYLES (banner, eyebrow, etc.)
   ══════════════════════════════════════════════════════════════════ */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}

/* Dark hero gradient used on multiple pages */
.hero-gradient-dark {
  background: linear-gradient(180deg,
    #050a18 0%, #060f1f 10%, #091a35 22%, #0c2a4e 35%,
    #103a6e 46%, #1a5a8e 56%, #2b7cb8 65%, #4d9fd4 74%,
    #78bee2 82%, #aad7ee 88%, #d2e9f8 93%, #ebf4fc 96%,
    #f8fbfe 98%, #ffffff 100%);
}

/* Hero orbs (used on services, success-stories, company) */
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.hero-star {
  position: absolute; border-radius: 50%; background: #fff; pointer-events: none;
}

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}
.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS — applied at <= 768px and <= 480px
   Fixes from the mobile audit: nowrap headings clipped at viewport
   edges, oversized hero text, stacked-layout regressions, etc.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* On mobile, the original "width: var(--max-w)" pattern (where
     --max-w = min(1280px, 92vw)) caused inner containers to overflow
     their parent section's horizontal padding (a 92vw inner inside a
     section with 1-2rem padding cannot fit; margin:0 auto then pins it
     left, leaving zero gap on the right). The fix: switch the inner
     containers to "width: auto + max-width: var(--max-w)" so they
     fill the parent's content area (no overflow inside padded
     sections) while still capping at 92vw to preserve the natural
     4vw side gutter in sections that have no horizontal padding of
     their own (homepage stats strip, testi-section, banner, etc.).
     Excludes .nav-inner — the nav has its own width/layout rules. */
  .container,
  [class*="-inner"]:not(.nav-inner),
  .carousel-container {
    width: auto !important;
    max-width: var(--max-w);
  }

  /* Nav — the wordmark is a two-line stack ("Doctor's" / "Choice"). At a small
     height the top line is barely legible against the dark hero gradient, so
     give it a taller nav and a bigger SVG to keep both lines readable. */
  .nav-inner { height: 80px; padding: 0 1rem; }
  .nav-logo svg { width: 180px; height: auto; display: block; }
  .nav-toggle { padding: 4px; }

  /* Strip white-space:nowrap from headings on mobile so they wrap
     instead of overflowing the viewport. */
  .hero-centered .hc-heading,
  .banner h2,
  .testi-header h2,
  [style*="white-space:nowrap"],
  [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* Homepage hero (.hero-centered) — smaller heading, tighter padding.
     Top padding accounts for the taller 80px mobile nav. !important
     is needed because the page's inline <style> block defines these
     same selectors and loads AFTER style.css. */
  .hero-centered { padding: calc(80px + 1.5rem) 1rem 2rem !important; }
  .hero-centered .hc-heading {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
  }
  .hero-centered .hc-sub { font-size: 0.95rem !important; margin-top: 1rem !important; padding: 0 0.5rem !important; }
  .hero-centered .hc-btns { margin-top: 1.5rem !important; }

  /* Services / Company hero (grid layout) — single column, smaller h1 */
  .hero { padding: calc(80px + 2rem) 1rem 2.5rem !important; }
  .hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; line-height: 1.15 !important; }
  .hero-sub { font-size: 0.95rem !important; }
  .hero-inner { padding: 0 !important; grid-template-columns: 1fr !important; gap: 2rem !important; }
  .hero-visual { aspect-ratio: 16 / 9 !important; }

  /* Homepage banner card */
  .banner h2 { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; line-height: 1.2 !important; }
  .banner-sub { font-size: 0.95rem !important; }
  .banner-inner { padding: 2.5rem 1.5rem !important; }

  /* Homepage platform header — drop the desktop padding-top on the
     description that creates a giant empty gap on mobile (heading is
     no longer side-by-side with the description, so the alignment
     padding is dead weight). */
  .platform-header { grid-template-columns: 1fr !important; gap: 1rem !important; margin-bottom: 2rem !important; }
  .platform-header p { padding-top: 0 !important; font-size: 0.95rem !important; }
  .platform-header h2 { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; }

  /* Homepage testimonials header — stack to 1 col, drop big top-padding */
  .testi-header { grid-template-columns: 1fr !important; gap: 1rem !important; margin-bottom: 2rem !important; }
  .testi-header h2 { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; }
  .testi-header p { padding-top: 0 !important; font-size: 0.95rem !important; }
  .testi-name-item h4 { font-size: 1rem !important; line-height: 1.2 !important; }
  .testi-name-item p { font-size: 0.7rem !important; }
  .testi-quote { padding: 2rem 1.5rem !important; }
  .testi-quote::before { font-size: 5rem !important; top: -0.5rem !important; left: 0.75rem !important; }
  .testi-quote blockquote { font-size: 1.05rem !important; line-height: 1.5 !important; }

  /* Homepage implementation timeline */
  .impl-timeline { padding: 3rem 1rem !important; }
  .impl-timeline .impl-heading { font-size: clamp(1.5rem, 5vw, 2rem) !important; line-height: 1.2 !important; }
  .impl-timeline .impl-heading br { display: none !important; }

  /* Services process header */
  .process-section { padding: 3rem 1.5rem !important; }
  .process-header h2 { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; line-height: 1.2 !important; }
  .process-header p { font-size: 0.95rem !important; }

  /* Homepage platform tabs — keep three on one row by shrinking text.
     Hide the platform image on mobile (just shows the accordion). */
  .platform-tabs { flex-wrap: nowrap !important; }
  .platform-tab { font-size: 0.68rem !important; padding: 0.85rem 0.4rem !important; letter-spacing: 0.04em !important; }
  .platform-card { padding: 1.5rem !important; }
  .platform-content { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .platform-image { display: none !important; }

  /* Success Stories expanded story — tighter padding, smaller heads,
     phases stack 1col, stats wrap to 2col */
  .expanded-story { padding: 2rem 1.25rem; }
  .ed-title { font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.2; }
  .ed-lede { font-size: 0.95rem; }
  .ed-section p { font-size: 0.95rem; }
  .ed-section-head { font-size: 1.15rem; }
  .ed-pullquote { font-size: 1.15rem; padding-left: 1.25rem; }
  .ed-phases { grid-template-columns: 1fr; }
  .ed-stats, .ed-stats[data-cols="3"], .ed-stats[data-cols="2"] {
    grid-template-columns: 1fr 1fr;
  }
  .ed-stat-num { font-size: 1.4rem; }

  /* CTA banner — tighter on mobile */
  .cta-banner-inner { padding: 2.5rem 1.5rem; }
  .cta-banner h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .cta-banner-sub { font-size: 0.95rem; }

  /* Say-Hello — drop the JS-driven left-body alignment padding (the
     JS is also patched to early-return on mobile). */
  .left-body { padding-top: 0; }
  .left-panel { padding: 1.5rem; gap: 1rem; }
  .left-logo svg { width: 140px; }
  .left-heading { font-size: clamp(1.5rem, 5vw, 2rem); }
  .left-sub { font-size: 0.95rem; }
  .left-features { gap: 0.6rem; }
  .right-panel { padding: 1.5rem; }
}

@media (max-width: 480px) {
  /* Stats stack fully to 1 column at narrow phone widths */
  .ed-stats, .ed-stats[data-cols="3"], .ed-stats[data-cols="2"] {
    grid-template-columns: 1fr;
  }
  .ed-stat { padding: 0 0 0 0.75rem; }
  /* Success Stories carousel cards near-full-width on phone */
  .card { flex: 0 0 calc(100vw - 5rem); }
  /* Homepage stats — drop to 2x2 instead of 4-up which was already
     responsive but tighten the row gap */
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  /* Footer */
  .footer-nav { gap: 0.6rem 1.25rem; }
  .footer-nav a { font-size: 0.85rem; }
  .footer-contact { font-size: 0.8rem; gap: 0.5rem; }
}