/*
Theme Name:   Strategy Search Partners Child
Theme URI:    https://strategysearchpartners.com
Description:  Child theme for Strategy Search Partners built on Divi
Author:       Elisandro Martinez
Author URI:   https://strategysearchpartners.com
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ssp-child
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  Google Fonts
   2.  CSS Custom Properties (Brand Tokens)
   3.  Global Reset & Base
   4.  Container & Layout
   5.  Responsive Breakpoints
   6.  Typography
   7.  Navigation
   8.  Services Dropdown
   9.  Mobile Drawer
   10. Buttons & CTAs
   11. Hero Sections
   12. Hero Bullet Cards
   13. Section Backgrounds
   14. Card Styles
   15. Package Cards
   16. Philosophy Grid (About)
   17. FAQ Accordion
   18. Blog Cards
   19. Footer
   20. Hover Effects
   21. Divi Module Overrides
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS
   Loaded via functions.php — referenced here for documentation
   Montserrat 600, 700 — headings
   Inter 400, 500, 600  — body
   ============================================================ */


/* ============================================================
   2. CSS CUSTOM PROPERTIES (BRAND TOKENS)
   ============================================================ */
:root {
  /* Core palette */
  --ssp-navy:        #0B132B;
  --ssp-green:       #22D67A;
  --ssp-green-hover: #1bbf6d;
  --ssp-green-dark:  #1AA55E;
  --ssp-offwhite:    #F8F9FA;
  --ssp-white:       #FFFFFF;
  --ssp-border:      #E8ECF0;
  --ssp-text-dark:   #0B132B;
  --ssp-text-mid:    #4A5568;

  /* Service accent colors */
  --ssp-cyan:        #2196CE;
  --ssp-indigo:      #4A6CF7;
  --ssp-amber:       #D4941E;
  --ssp-rose:        #D14D62;

  /* Logo amber ramp (light bg) */
  --logo-bar-1: #F2DDB8;
  --logo-bar-2: #E8BA6A;
  --logo-bar-3: #DCA43A;
  --logo-bar-4: #D4941E;

  /* Logo amber ramp (dark bg) */
  --logo-bar-dark-1: #6B4A10;
  --logo-bar-dark-2: #9B6C16;
  --logo-bar-dark-3: #B8801A;
  --logo-bar-dark-4: #D4941E;

  /* Spacing */
  --ssp-radius-sm:   8px;
  --ssp-radius-md:   10px;
  --ssp-radius-lg:   12px;
  --ssp-radius-xl:   14px;
}


/* ============================================================
   3. GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Open Sans', sans-serif;
  color: var(--ssp-text-dark);
  background: var(--ssp-offwhite);
  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   4. CONTAINER & LAYOUT
   Desktop: 1200–1440px | Laptop: 1024–1366px
   Tablet: 768–991px    | Mobile: 320–390px
   ============================================================ */
.et_pb_section .et_pb_row,
.ssp-container {
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 5.5vw, 80px);
  padding-right: clamp(24px, 5.5vw, 80px);
}

/* Override Divi's default max-width */
.et_pb_section .et_pb_row {
  max-width: 1440px !important;
}

/* Text block max-width for comfortable reading */
.ssp-prose {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   5. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Laptop: 1024–1366px */
@media (max-width: 1366px) and (min-width: 1024px) {
  .et_pb_section .et_pb_row,
  .ssp-container {
    max-width: 1200px;
    padding-left: clamp(40px, 4.5vw, 60px);
    padding-right: clamp(40px, 4.5vw, 60px);
  }
}

/* Tablet: 768–991px */
@media (max-width: 991px) {
  .et_pb_section .et_pb_row,
  .ssp-container {
    padding-left: 40px;
    padding-right: 40px;
  }
  .et_pb_section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* Mobile: up to 767px */
@media (max-width: 767px) {
  .et_pb_section .et_pb_row,
  .ssp-container {
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .et_pb_section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .ssp-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ssp-hero-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ssp-hero-card-desc {
    display: none !important;
  }
}

/* Small mobile: 320–390px */
@media (max-width: 390px) {
  .et_pb_section .et_pb_row,
  .ssp-container {
    padding-left: max(16px, 6vw);
    padding-right: max(16px, 6vw);
  }
  .et_pb_row h1 {
    font-size: 30px !important;
  }
  .ssp-hero-cards {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   6. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4,
.et_pb_blurb_title,
.et_pb_slide_title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

body,
.et_pb_module,
.et_pb_text {
  font-family: 'Inter', 'Open Sans', sans-serif !important;
}

/* Heading size scale */
h1, .ssp-h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -2px; line-height: 1.05; }
h2, .ssp-h2 { font-size: clamp(28px, 3.5vw, 38px); letter-spacing: -0.8px; line-height: 1.2; }
h3, .ssp-h3 { font-size: clamp(20px, 2.5vw, 26px); letter-spacing: -0.5px; line-height: 1.3; }
h4, .ssp-h4 { font-size: 17px; letter-spacing: -0.3px; }

/* Eyebrow label */
.ssp-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ssp-text-mid);
  margin-bottom: 12px;
  display: block;
}

.ssp-eyebrow--white  { color: rgba(255,255,255,0.5); }
.ssp-eyebrow--green  { color: var(--ssp-green-dark); }
.ssp-eyebrow--cyan   { color: var(--ssp-cyan); }
.ssp-eyebrow--amber  { color: var(--ssp-amber); }

/* Body text */
.ssp-body {
  font-size: 16px;
  color: var(--ssp-text-mid);
  line-height: 1.75;
}

.ssp-body--large { font-size: 18px; }
.ssp-body--white { color: rgba(255,255,255,0.7); }


/* ============================================================
   7. NAVIGATION
   ============================================================ */
#main-header,
#main-header .et-menu-nav {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--ssp-border);
  height: 68px;
}

#main-header .et_pb_menu__menu > ul > li > a,
#main-header .et-menu > li > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ssp-text-mid) !important;
  padding-bottom: 2px;
}

/* Active page indicator */
#main-header .et-menu > li.current-menu-item > a,
#main-header .et-menu > li.current_page_item > a {
  color: var(--ssp-navy) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--ssp-green);
}

/* Logo wordmark */
#main-header .et_pb_menu__logo-wrap,
#logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.3px;
}


/* ============================================================
   8. SERVICES DROPDOWN
   ============================================================ */
#main-header .et-menu > li.menu-item-has-children ul,
#main-header .nav-dropdown .dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid var(--ssp-border) !important;
  border-radius: var(--ssp-radius-lg) !important;
  padding: 8px !important;
  box-shadow: 0 8px 32px rgba(11,19,43,0.10) !important;
  min-width: 240px !important;
}

#main-header .et-menu > li.menu-item-has-children ul li a,
#main-header .nav-dropdown .dropdown-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: var(--ssp-radius-sm) !important;
  font-size: 14px !important;
  color: var(--ssp-text-mid) !important;
  font-weight: 500 !important;
  transition: background 0.12s !important;
}

#main-header .et-menu > li.menu-item-has-children ul li a:hover,
#main-header .nav-dropdown .dropdown-menu a:hover {
  background: var(--ssp-offwhite) !important;
  color: var(--ssp-navy) !important;
}

/* Active dropdown link */
#main-header .nav-dropdown .dropdown-menu a.active,
#main-header .et-menu .current-menu-item > a {
  color: var(--ssp-navy) !important;
  font-weight: 600 !important;
  background: var(--ssp-offwhite) !important;
}

/* Dropdown icon circles */
.ssp-dropdown-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ssp-dropdown-icon--cyan   { background: #E3F4FC; }
.ssp-dropdown-icon--indigo { background: #EEF0FE; }
.ssp-dropdown-icon--amber  { background: #FDF3E3; }
.ssp-dropdown-icon--green  { background: #E8F6EF; }


/* ============================================================
   9. MOBILE DRAWER
   ============================================================ */
@media (max-width: 767px) {
  #et_mobile_nav_menu {
    background: #FFFFFF !important;
    border-top: 1px solid var(--ssp-border);
  }

  .mobile-nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ssp-text-mid);
    padding: 11px 20px;
    border-bottom: 1px solid #F8F9FA;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

  .mobile-nav a.active {
    color: var(--ssp-navy);
    font-weight: 600;
  }
}


/* ============================================================
   10. BUTTONS & CTAs
   ============================================================ */

/* Primary green CTA */
.et_pb_button,
.et_pb_promo_button,
a.ssp-btn-primary,
.ssp-btn-primary {
  background: var(--ssp-green) !important;
  color: var(--ssp-navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 15px 30px !important;
  border-radius: var(--ssp-radius-sm) !important;
  border: none !important;
  text-decoration: none;
  display: inline-block;
  transition: background 0.18s ease, transform 0.15s ease !important;
}

.et_pb_button:hover,
a.ssp-btn-primary:hover,
.ssp-btn-primary:hover {
  background: var(--ssp-green-hover) !important;
  transform: translateY(-1px);
}

/* Ghost button (white border on dark bg) */
a.ssp-btn-ghost,
.ssp-btn-ghost {
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: var(--ssp-radius-sm);
  text-decoration: none;
  display: inline-block;
  transition: background 0.18s ease, color 0.18s ease;
}

a.ssp-btn-ghost:hover,
.ssp-btn-ghost:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
}

/* Nav CTA button */
a.ssp-nav-cta {
  background: var(--ssp-green);
  color: var(--ssp-navy) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--ssp-radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease;
}

a.ssp-nav-cta:hover {
  background: var(--ssp-green-hover);
}


/* ============================================================
   11. HERO SECTIONS
   ============================================================ */

/* All hero sections use dark navy background */
.ssp-hero,
.et_pb_section.ssp-hero {
  background: var(--ssp-navy) !important;
  padding-top: 80px !important;
  padding-bottom: 72px !important;
}

/* Taller hero for homepage */
.ssp-hero--tall {
  padding-top: 96px !important;
  padding-bottom: 88px !important;
}

/* Hero two-column grid */
.ssp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Hero headline */
.ssp-hero h1,
.ssp-hero .et_pb_title_container h1 {
  font-size: clamp(36px, 4.5vw, 56px) !important;
  letter-spacing: -2px !important;
  color: #FFFFFF !important;
  line-height: 1.05 !important;
  margin-bottom: 24px !important;
}

/* Hero subtext */
.ssp-hero p,
.ssp-hero .et_pb_text_inner p {
  font-size: 18px !important;
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.7 !important;
  max-width: 580px;
}

/* Service page hero — single column */
.ssp-hero--single {
  max-width: 720px;
}

/* Service icon + eyebrow row */
.ssp-hero-service-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ssp-hero-service-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ssp-hero-service-icon--cyan   { background: rgba(33,150,206,0.18); }
.ssp-hero-service-icon--indigo { background: rgba(74,108,247,0.18); }
.ssp-hero-service-icon--amber  { background: rgba(212,148,30,0.18); }
.ssp-hero-service-icon--green  { background: rgba(26,165,94,0.18); }


/* ============================================================
   12. HERO BULLET CARDS
   ============================================================ */

/* Wrapper — right column */
.ssp-hero-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual card — light bg version (homepage, services, WP pages) */
.ssp-hero-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #EFF1F4;
  border: 1px solid #DDE1E7;
  border-radius: var(--ssp-radius-md);
  padding: 16px 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ssp-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(11,19,43,0.08);
  border-color: #C8D0DC;
}

.ssp-hero-card__icon {
  width: 30px;
  height: 30px;
  background: #E8F6EF;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ssp-hero-card__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ssp-navy);
  display: flex;
  align-items: center;
}

/* Card with description (homepage outcome cards) */
.ssp-hero-card--desc .ssp-hero-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ssp-hero-card__desc {
  font-size: 13px;
  color: var(--ssp-text-mid);
  line-height: 1.6;
}

/* Homepage — full size cards with descriptions */
.ssp-hero-card--lg {
  padding: 24px;
  background: #F8F9FA;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  gap: 16px;
}

.ssp-hero-card--lg .ssp-hero-card__icon {
  width: 36px;
  height: 36px;
}

.ssp-hero-card--lg .ssp-hero-card__label {
  font-size: 15px;
  margin-bottom: 4px;
}


/* ============================================================
   13. SECTION BACKGROUNDS
   ============================================================ */
.ssp-bg-navy   { background: var(--ssp-navy) !important; }
.ssp-bg-white  { background: var(--ssp-white) !important; }
.ssp-bg-offwhite { background: var(--ssp-offwhite) !important; }

/* Standard section padding */
.ssp-sec {
  padding-top: 72px;
  padding-bottom: 72px;
}

/* Section eyebrow + heading + subtext — centered layout */
.ssp-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.ssp-section-header h2 {
  margin-bottom: 16px;
}

.ssp-section-header p {
  font-size: 17px;
  color: var(--ssp-text-mid);
  line-height: 1.7;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.ssp-section-header--white h2 { color: #FFFFFF; }
.ssp-section-header--white p  { color: rgba(255,255,255,0.65); }


/* ============================================================
   14. CARD STYLES
   ============================================================ */

/* Standard white card */
.ssp-card {
  background: #FFFFFF;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: 28px;
}

/* Off-white card */
.ssp-card--offwhite {
  background: var(--ssp-offwhite);
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: 28px;
}

/* Dark glass card (used in philosophy section, ongoing services) */
.ssp-card--dark {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--ssp-radius-lg);
  padding: 28px;
}

/* 2-column card grid */
.ssp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 3-column card grid */
.ssp-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

/* 2-col grid collapses to 1 on mobile */
@media (max-width: 767px) {
  .ssp-grid-2,
  .ssp-grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet: 3-col → 2-col */
@media (max-width: 991px) {
  .ssp-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Numbered "why" cards */
.ssp-why-card {
  background: var(--ssp-offwhite);
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: 28px;
}

.ssp-why-card__num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--ssp-border);
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.ssp-why-card h4 { font-size: 17px; color: var(--ssp-navy); margin-bottom: 8px; }
.ssp-why-card p  { font-size: 14px; color: var(--ssp-text-mid); line-height: 1.65; }

/* Problem card (service pages) */
.ssp-problem-card {
  background: #FFFFFF;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.ssp-problem-card h3 { font-size: 22px; color: var(--ssp-navy); margin-bottom: 12px; }
.ssp-problem-card p  { font-size: 16px; color: var(--ssp-text-mid); line-height: 1.75; }

/* Warning icon */
.ssp-warning-icon {
  width: 48px;
  height: 48px;
  background: #FEF3CD;
  border: 1px solid #D4941E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ============================================================
   15. PACKAGE CARDS
   ============================================================ */
.ssp-pkg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto 24px;
}

@media (max-width: 767px) {
  .ssp-pkg-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .ssp-pkg-grid { grid-template-columns: 1fr; }
}

.ssp-pkg-card {
  background: #FFFFFF;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ssp-pkg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(11,19,43,0.08);
  border-color: #C8D0DC;
}

.ssp-pkg-card--featured {
  background: #FFFFFF;
  border: 2px solid var(--ssp-green-dark);
  border-radius: var(--ssp-radius-lg);
  padding: 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ssp-pkg-card--featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26,165,94,0.15);
}

.ssp-pkg-badge {
  display: inline-block;
  background: #E8F6EF;
  color: var(--ssp-green-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.ssp-pkg-card h3 { font-size: 20px; color: var(--ssp-navy); margin-bottom: 8px; }
.ssp-pkg-card p  { font-size: 14px; color: var(--ssp-text-mid); line-height: 1.65; margin-bottom: 16px; }

.ssp-pkg-price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--ssp-navy);
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.ssp-pkg-price span {
  font-size: 14px;
  font-weight: 400;
  color: var(--ssp-text-mid);
  letter-spacing: 0;
}

.ssp-pkg-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.ssp-pkg-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ssp-text-mid);
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid var(--ssp-offwhite);
}

.ssp-pkg-list li:last-child { border-bottom: none; }


/* ============================================================
   16. PHILOSOPHY GRID (ABOUT PAGE)
   ============================================================ */
.ssp-phil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .ssp-phil-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .ssp-phil-grid { grid-template-columns: 1fr; }
}

.ssp-phil-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--ssp-radius-lg);
  padding: 28px;
}

.ssp-phil-icon {
  width: 36px;
  height: 36px;
  background: rgba(34,214,122,0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.ssp-phil-card h4 { font-size: 15px; color: #FFFFFF; margin-bottom: 10px; }
.ssp-phil-card p  { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.7; }

/* GA4 certification badge */
.ssp-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ssp-offwhite);
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-md);
  padding: 14px 20px;
  margin-top: 22px;
}

.ssp-cert-divider {
  width: 1px;
  height: 28px;
  background: var(--ssp-border);
}

.ssp-cert-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ssp-navy);
  line-height: 1.3;
}

.ssp-cert-sub {
  font-size: 11px;
  color: var(--ssp-text-mid);
  margin-top: 2px;
}


/* ============================================================
   17. FAQ ACCORDION
   ============================================================ */
.ssp-faq-item {
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-md);
  overflow: hidden;
  margin-bottom: 8px;
  background: #FFFFFF;
  transition: box-shadow 0.15s ease;
}

.ssp-faq-item:hover {
  box-shadow: 0 2px 12px rgba(11,19,43,0.06);
}

.ssp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
}

.ssp-faq-q-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ssp-navy);
  line-height: 1.35;
}

.ssp-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ssp-offwhite);
  border: 1px solid var(--ssp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.ssp-faq-item.open .ssp-faq-icon {
  background: var(--ssp-navy);
  border-color: var(--ssp-navy);
}

.ssp-faq-a {
  display: none;
  padding: 0 24px 20px;
  font-size: 14px;
  color: var(--ssp-text-mid);
  line-height: 1.75;
}

.ssp-faq-item.open .ssp-faq-a { display: block; }
.ssp-faq-a p + p { margin-top: 10px; }

/* Divi Toggle module overrides to match FAQ style */
.et_pb_toggle .et_pb_toggle_title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--ssp-navy) !important;
  padding: 18px 24px !important;
}

.et_pb_toggle_content {
  font-size: 14px !important;
  color: var(--ssp-text-mid) !important;
  line-height: 1.75 !important;
  padding: 0 24px 18px !important;
}

/* FAQ group label */
.ssp-faq-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ssp-green-dark);
  margin-bottom: 16px;
  display: block;
}

/* FAQ sidebar */
.ssp-faq-sidebar {
  position: sticky;
  top: 88px;
}

.ssp-faq-sidebar-card {
  background: var(--ssp-navy);
  border-radius: var(--ssp-radius-lg);
  padding: 32px;
  margin-bottom: 20px;
}

.ssp-faq-sidebar-card h4 {
  font-size: 17px;
  color: #FFFFFF;
  margin-bottom: 10px;
  line-height: 1.3;
}

.ssp-faq-sidebar-card p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin-bottom: 20px;
}

.ssp-faq-sidebar-link {
  display: block;
  background: var(--ssp-offwhite);
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-md);
  padding: 16px 18px;
  text-decoration: none;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}

.ssp-faq-sidebar-link:hover {
  border-color: var(--ssp-navy);
  background: #FFFFFF;
}

.ssp-faq-sidebar-link__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ssp-text-mid);
  margin-bottom: 4px;
}

.ssp-faq-sidebar-link__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ssp-navy);
}


/* ============================================================
   18. BLOG CARDS
   ============================================================ */
.ssp-blog-card {
  background: #FFFFFF;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ssp-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(11,19,43,0.08);
  border-color: #C8D0DC;
}

.ssp-blog-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--ssp-offwhite);
  overflow: hidden;
}

.ssp-blog-card__body {
  padding: 24px;
}

.ssp-blog-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.ssp-blog-card h3 {
  font-size: 17px;
  color: var(--ssp-navy);
  margin-bottom: 10px;
  line-height: 1.3;
}

.ssp-blog-card p {
  font-size: 14px;
  color: var(--ssp-text-mid);
  line-height: 1.65;
  margin-bottom: 16px;
}

.ssp-blog-card__meta {
  font-size: 12px;
  color: var(--ssp-text-mid);
}

/* Featured blog card */
.ssp-blog-card--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ssp-blog-card--featured .ssp-blog-card__img {
  aspect-ratio: auto;
  min-height: 300px;
}

@media (max-width: 767px) {
  .ssp-blog-card--featured {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   19. FOOTER
   ============================================================ */
#main-footer,
.ssp-footer {
  background: var(--ssp-navy) !important;
  padding-top: 56px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ssp-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

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

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

.ssp-footer h5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 16px;
}

.ssp-footer a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.15s ease;
}

.ssp-footer a:hover { color: #FFFFFF; }

.ssp-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ssp-footer-bottom p,
.ssp-footer-bottom a {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}


/* ============================================================
   20. HOVER EFFECTS
   ============================================================ */

/* Standard card hover */
.ssp-card-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ssp-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(11,19,43,0.08);
  border-color: #C8D0DC;
}

/* Ongoing services dark card hover */
.ssp-ongoing-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ssp-ongoing-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}


/* ============================================================
   21. DIVI MODULE OVERRIDES
   ============================================================ */

/* Remove Divi's default button arrow */
.et_pb_button::after {
  display: none !important;
}

/* Prevent Divi from adding hover effects to our custom buttons */
.et_pb_button:hover {
  padding: 15px 30px !important;
}

/* Divi section padding override */
.et_pb_section.ssp-no-padding-top { padding-top: 0 !important; }
.et_pb_section.ssp-no-padding-bottom { padding-bottom: 0 !important; }

/* Ensure Divi text modules don't override our font */
.et_pb_text_inner,
.et_pb_text_inner * {
  font-family: 'Inter', 'Open Sans', sans-serif !important;
}

.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4 {
  font-family: 'Montserrat', sans-serif !important;
}

/* Divi row gutter */
.et_pb_row {
  width: 100% !important;
}

/* Remove Divi's default row max-width to let our container handle it */
.et_pb_section.ssp-full-width .et_pb_row {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Stats bar */
.ssp-stats-bar {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin: 40px 0;
  flex-wrap: wrap;
}

.ssp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ssp-stat__number {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #FFFFFF;
  letter-spacing: -1px;
}

.ssp-stat__label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* Process steps (How I work) */
.ssp-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

.ssp-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.ssp-step__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ssp-navy);
  color: var(--ssp-green);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.ssp-step__num--cyan   { background: var(--ssp-cyan); color: #FFFFFF; }
.ssp-step__num--indigo { background: var(--ssp-indigo); color: #FFFFFF; }
.ssp-step__num--amber  { background: var(--ssp-amber); color: #FFFFFF; }
.ssp-step__num--green  { background: var(--ssp-green-dark); color: #FFFFFF; }

.ssp-step h4 { font-size: 17px; color: var(--ssp-navy); margin-bottom: 6px; }
.ssp-step p  { font-size: 15px; color: var(--ssp-text-mid); line-height: 1.7; }

/* CTA band */
.ssp-cta-band {
  background: var(--ssp-navy);
  padding: 80px 0;
  text-align: center;
}

.ssp-cta-band h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  color: #FFFFFF;
  letter-spacing: -1px;
  margin-bottom: 14px;
}

.ssp-cta-band p {
  font-size: 17px;
  color: rgba(255,255,255,0.65);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.ssp-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}