/* ─── CSS VARIABLES (design system) ──────────────────────────────────────── */
:root {
  --dark:          #0D1B2A;
  --dark-surface:  #1E2D3D;
  --dark-border:   #243447;
  --light:         #F4F6F8;
  --white:         #FFFFFF;
  --accent:        #00B4A6;
  --accent-hover:  #008F84;
  --text-dark:     #FFFFFF;
  --text-light:    #1A1A2E;
  --text-body:     #3A4A5C;
  --text-muted:    #6B7A8D;
  --border-light:  #DDE2E8;
  --max-w:         1100px;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;
}

/* ─── BASE RESET & TYPOGRAPHY ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-body);
  background: var(--white);
  overflow-x: hidden;
}

/* ─── HEADINGS ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-light);
}

h1 { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.375rem; font-weight: 600; }

/* ─── GLOBAL BUTTON STYLES ────────────────────────────────────────────────── */
.elementor-button,
.btn-primary,
button[type="submit"] {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

/* Primary button */
.elementor-button.elementor-size-md,
.elementor-button.btn-accent {
  background-color: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  padding: 15px 34px !important;
}

.elementor-button.elementor-size-md:hover,
.elementor-button.btn-accent:hover {
  background-color: var(--accent-hover) !important;
  transform: translateY(-1px) !important;
}

/* ─── DARK SECTION BASE ────────────────────────────────────────────────────── */
.elementor-section.dark-section,
.e-con.dark-section {
  background-color: var(--dark) !important;
  color: var(--text-dark) !important;
}

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

/* ─── LIGHT SECTION BASE ──────────────────────────────────────────────────── */
.elementor-section.light-section,
.e-con.light-section {
  background-color: var(--light) !important;
}

.elementor-section.white-section,
.e-con.white-section {
  background-color: var(--white) !important;
}

/* ─── DARK SURFACE SECTION ───────────────────────────────────────────────── */
.elementor-section.dark-surface-section,
.e-con.dark-surface-section {
  background-color: var(--dark-surface) !important;
  border-top: 1px solid var(--dark-border);
  border-bottom: 1px solid var(--dark-border);
}

/* ─── EYEBROW / LABEL STYLE ───────────────────────────────────────────────── */
.eyebrow,
.section-eyebrow,
.elementor-widget-text-editor .eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
}

/* ─── DARK SURFACE CARDS ──────────────────────────────────────────────────── */
.card-dark {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 6px !important;
  padding: 36px 32px !important;
  transition: border-color 0.25s, transform 0.25s !important;
}

.card-dark:hover {
  border-color: rgba(0,180,166,0.4) !important;
  transform: translateY(-4px) !important;
}

.card-dark h3 {
  color: var(--text-dark) !important;
}

.card-dark p {
  color: rgba(255,255,255,0.55) !important;
}

/* ─── LIGHT CARDS ─────────────────────────────────────────────────────────── */
.card-light {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  border-radius: 6px !important;
  padding: 32px !important;
}

/* ─── NAV OVERRIDE (for Elementor header builder) ─────────────────────────── */
.site-header,
.elementor-location-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(13,27,42,0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dark-border) !important;
  height: 68px;
}

/* Nav links */
.elementor-nav-menu a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.75) !important;
  transition: color 0.2s !important;
}

.elementor-nav-menu a:hover,
.elementor-nav-menu .current-menu-item > a {
  color: var(--accent) !important;
}

/* Logo */
.site-title a,
.elementor-widget-site-logo a {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.125rem !important;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
}

/* ─── FOOTER OVERRIDE ─────────────────────────────────────────────────────── */
.site-footer,
.elementor-location-footer {
  background: var(--dark) !important;
  border-top: 1px solid var(--dark-border) !important;
}

.site-footer a,
.elementor-location-footer a {
  color: rgba(255,255,255,0.5) !important;
  transition: color 0.2s !important;
}

.site-footer a:hover,
.elementor-location-footer a:hover {
  color: var(--accent) !important;
}

/* ─── SCROLL REVEAL ANIMATION ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ─── GEOMETRIC GRID BACKGROUND (for hero sections) ──────────────────────── */
.grid-bg {
  position: relative;
  overflow: hidden;
}

.grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,180,166,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,166,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.grid-bg > * { position: relative; z-index: 1; }

/* ─── TEAL GLOW ORBS (decorative) ────────────────────────────────────────── */
.glow-top-right::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -100px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0,180,166,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.glow-bottom-left::before {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,180,166,0.07) 0%, transparent 65%);
  pointer-events: none;
}

/* ─── FIT/CHECK LIST ITEMS ────────────────────────────────────────────────── */
.fit-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 6px;
  transition: transform 0.2s;
}

.fit-item:hover { transform: translateX(4px); }

/* On dark backgrounds */
.dark-section .fit-item {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

.dark-section .fit-item:hover {
  border-color: rgba(0,180,166,0.35);
}

/* On light backgrounds */
.light-section .fit-item,
.white-section .fit-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.light-section .fit-item:hover,
.white-section .fit-item:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* ─── TEAL LEFT-BORDER LIST ITEMS ─────────────────────────────────────────── */
.teal-border-list {
  list-style: none;
}

.teal-border-list li {
  padding: 16px 0 16px 20px;
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-body);
  transition: border-left-color 0.2s;
}

.teal-border-list li:last-child { border-bottom: none; }
.teal-border-list li:hover { border-left-color: var(--accent-hover); }

/* ─── CREDIBILITY / STAT BAR ──────────────────────────────────────────────── */
.stat-number {
  font-family: 'Syne', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

.stat-label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* ─── HEADSHOT FRAME ACCENTS ──────────────────────────────────────────────── */
.headshot-frame {
  position: relative;
  display: inline-block;
}

.headshot-frame::before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 60px;
  height: 60px;
  border-top: 3px solid var(--accent);
  border-right: 3px solid var(--accent);
  border-radius: 0 8px 0 0;
  z-index: 2;
}

.headshot-frame::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: -8px;
  width: 60px;
  height: 60px;
  border-bottom: 3px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: 0 0 0 8px;
  z-index: 2;
}

.headshot-frame img {
  display: block;
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
}

/* ─── NUMBERED STEPS ──────────────────────────────────────────────────────── */
.step-number {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* ─── CONTACT FORM ────────────────────────────────────────────────────────── */
.elementor-form input,
.elementor-form textarea,
.elementor-form select {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.9375rem !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  color: var(--text-light) !important;
}

.elementor-form input:focus,
.elementor-form textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,180,166,0.12) !important;
  outline: none !important;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.625rem; }

  .elementor-section-full_width .elementor-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}