/* ==========================================================================
   Strategy Search Partners — Main Stylesheet
   ==========================================================================
   Consolidated from inline styles in the original HTML mockups.
   Organized into: tokens, base, layout, components, sections, footer, utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (CSS custom properties)
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --ssp-navy:        #0B132B;
  --ssp-green:       #22D67A;
  --ssp-green-dark:  #1AA55E;
  --ssp-green-hover: #1bbf6d;
  --ssp-gold:        #D4941E;
  --ssp-blue:        #2196CE;
  --ssp-indigo:      #4A6CF7;

  /* Neutrals */
  --ssp-text:       #0B132B;
  --ssp-muted:      #4A5568;
  --ssp-border:     #E8ECF0;
  --ssp-bg:         #F8F9FA;
  --ssp-white:      #FFFFFF;

  /* Accent tints (icon backgrounds) */
  --ssp-tint-blue:   #E3F4FC;
  --ssp-tint-indigo: #EEF0FE;
  --ssp-tint-gold:   #FDF3E3;
  --ssp-tint-green:  #E8F6EF;

  /* Typography */
  --ssp-font-display: 'Montserrat', system-ui, sans-serif;
  --ssp-font-body:    'Inter', 'Open Sans', system-ui, sans-serif;

  /* Layout */
  --ssp-container-max: 1440px;
  --ssp-radius-sm: 8px;
  --ssp-radius-md: 10px;
  --ssp-radius-lg: 12px;
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ssp-font-body);
  color: var(--ssp-text);
  background: var(--ssp-bg);
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; }

/* WordPress admin bar offset */
.admin-bar .ssp-nav { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .ssp-nav { top: 46px; }
}

/* --------------------------------------------------------------------------
   3. Container & section system
   -------------------------------------------------------------------------- */
.ssp-container {
  max-width: var(--ssp-container-max);
  width: 100%;
  margin: 0 auto;
  padding-left: clamp(24px, 5.5vw, 80px);
  padding-right: clamp(24px, 5.5vw, 80px);
}

.ssp-section { padding-top: 72px; padding-bottom: 72px; }
.ssp-section--hero { padding-top: 88px; padding-bottom: 80px; }
.ssp-section--compact { padding-top: 48px; padding-bottom: 48px; }
.ssp-section--narrow { padding-top: 28px; padding-bottom: 28px; }

.ssp-section--white    { background: var(--ssp-white); }
.ssp-section--offwhite { background: var(--ssp-bg); }
.ssp-section--dark     { background: var(--ssp-navy); }
.ssp-section--dark *   { color: rgba(255,255,255,0.7); }
.ssp-section--dark h1,
.ssp-section--dark h2,
.ssp-section--dark h3,
.ssp-section--dark h4,
.ssp-section--dark h5 { color: #fff; }

/* --------------------------------------------------------------------------
   4. Typography components
   -------------------------------------------------------------------------- */
.ssp-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ssp-muted);
  margin-bottom: 12px;
}
.ssp-eyebrow--green { color: var(--ssp-green-dark); letter-spacing: 1.5px; }
.ssp-eyebrow--light { color: rgba(255,255,255,0.4); }
.ssp-eyebrow--muted-light { color: rgba(34,214,122,0.8); }

.ssp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34,214,122,0.12);
  border: 1px solid rgba(34,214,122,0.25);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ssp-green);
  margin-bottom: 24px;
}
/* Leading icon. .ssp-section--dark * matches the circle and path INSIDE the
   svg, not just the svg element, so it sets colour directly on the shapes and
   currentColor there resolves to white-on-navy grey. Both selectors are needed:
   the shapes must inherit too, and .ssp-badge svg * (0,1,1) outranks
   .ssp-section--dark * (0,1,0) regardless of source order. */
.ssp-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ssp-badge svg,
.ssp-badge svg * {
  color: inherit;
}

.ssp-h1 {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -2px;
  line-height: 1.05;
  margin: 0 0 24px;
}
.ssp-h1--service { font-size: 52px; letter-spacing: -1.8px; line-height: 1.08; margin-bottom: 20px; }
.ssp-h1--blog    { font-size: 44px; letter-spacing: -1.4px; line-height: 1.1;  margin-bottom: 14px; max-width: 600px; }

.ssp-h2 {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.8px;
  line-height: 1.2;
  color: var(--ssp-text);
  margin: 0 0 12px;
}
.ssp-h2--md { font-size: 32px; letter-spacing: -0.7px; }
.ssp-h2--sm { font-size: 30px; letter-spacing: -0.6px; }
.ssp-h2--lg { font-size: 38px; letter-spacing: -1px; }
.ssp-h2--xl { font-size: 42px; letter-spacing: -1.2px; }

.ssp-h3 {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ssp-text);
  margin: 0 0 10px;
}
.ssp-h3--lg { font-size: 20px; line-height: 1.3; }
.ssp-h3--xl { font-size: 22px; line-height: 1.3; }

.ssp-lead {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin: 0 0 36px;
  max-width: 640px;
}
.ssp-lead--light { color: rgba(255,255,255,0.7); }
.ssp-lead--dark  { color: var(--ssp-muted); font-size: 17px; line-height: 1.7; max-width: 560px; }

.ssp-body {
  font-size: 14px;
  color: var(--ssp-muted);
  line-height: 1.7;
  margin: 0 0 16px;
}
.ssp-body--13 { font-size: 13px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.ssp-btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: var(--ssp-radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease, color 0.18s ease;
  font-family: var(--ssp-font-body);
  line-height: 1.2;
}
.ssp-btn--green {
  background: var(--ssp-green);
  color: var(--ssp-navy);
}
.ssp-btn--green:hover {
  background: var(--ssp-green-hover);
  transform: translateY(-1px);
}
.ssp-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
  padding: 15px 30px;
}
.ssp-btn--ghost:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.ssp-btn--sm { padding: 15px 30px; font-size: 15px; }
.ssp-btn--full { width: 100%; text-align: center; }

.ssp-link-arrow {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.18s ease;
}
.ssp-link-arrow:hover { opacity: 0.75; }
.ssp-link-arrow--blue   { color: var(--ssp-blue); }
.ssp-link-arrow--indigo { color: var(--ssp-indigo); }
.ssp-link-arrow--gold   { color: var(--ssp-gold); }
.ssp-link-arrow--green  { color: var(--ssp-green-dark); }

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.ssp-nav {
  background: #fff;
  border-bottom: 1px solid var(--ssp-border);
  position: sticky;
  top: 0;
  z-index: 200;
}
.ssp-nav-inner {
  max-width: var(--ssp-container-max);
  width: 100%;
  margin: 0 auto;
  padding-left: clamp(24px, 5.5vw, 80px);
  padding-right: clamp(24px, 5.5vw, 80px);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ssp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.ssp-logo-bars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 22px;
}
.ssp-logo-bars > div { border-radius: 1px 1px 0 0; }
.ssp-logo-bars > div:nth-child(1) { width: 5px; height: 8px;  background: #F2DDB8; }
.ssp-logo-bars > div:nth-child(2) { width: 5px; height: 12px; background: #E8BA6A; }
.ssp-logo-bars > div:nth-child(3) { width: 5px; height: 16px; background: #DCA43A; }
.ssp-logo-bars > div:nth-child(4) { width: 5px; height: 22px; background: var(--ssp-gold); }

.ssp-wordmark { margin-left: 0; }
.ssp-wordmark strong {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ssp-text);
  letter-spacing: -0.3px;
  line-height: 1.15;
  display: block;
}
.ssp-wordmark span {
  font-size: 10px;
  color: var(--ssp-muted);
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-transform: uppercase;
}

.ssp-nav-links { display: flex; align-items: center; gap: 28px; }
.ssp-nav-links > a,
.ssp-nav-links > .ssp-nav-dropdown > a {
  font-size: 14px;
  color: var(--ssp-muted);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.ssp-nav-links > a.active,
.ssp-nav-links > a.current-menu-item,
.ssp-nav-links > .current-menu-ancestor > a {
  color: var(--ssp-text);
  border-bottom: 2px solid var(--ssp-green);
  padding-bottom: 2px;
}
.ssp-nav-dropdown.is-current > a {
  color: var(--ssp-text);
  border-bottom: 2px solid var(--ssp-green);
  padding-bottom: 2px;
}

/* Primary menu items come from wp_nav_menu() wrapped in <li> tags.
 * The selectors above expected flat anchors, so style the li > a
 * structure to match the rest of the nav. */
.ssp-nav-links ul,
.ssp-nav-links ol {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ssp-nav-links > li,
.ssp-nav-links ul > li {
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ssp-nav-links > li > a,
.ssp-nav-links ul > li > a {
  font-size: 14px;
  color: var(--ssp-muted);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.ssp-nav-links > li.current-menu-item > a,
.ssp-nav-links > li.current-menu-parent > a,
.ssp-nav-links > li.current-menu-ancestor > a,
.ssp-nav-links ul > li.current-menu-item > a,
.ssp-nav-links ul > li.current-menu-parent > a,
.ssp-nav-links ul > li.current-menu-ancestor > a {
  color: var(--ssp-text);
  border-bottom: 2px solid var(--ssp-green);
  padding-bottom: 2px;
}

/* Mobile drawer: same fix — strip list markers from menu items */
.ssp-mobile-nav ul,
.ssp-mobile-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.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;
}
.ssp-nav-cta:hover { background: var(--ssp-green-hover); }

/* Services dropdown */
.ssp-nav-dropdown { position: relative; }
.ssp-nav-dropdown > a { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.ssp-nav-dropdown > a svg { transition: transform 0.2s; }
.ssp-nav-dropdown:hover > a svg,
.ssp-nav-dropdown:focus-within > a svg { transform: rotate(180deg); }
.ssp-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: 16px 8px 8px;
  min-width: 240px;
  box-shadow: 0 8px 32px rgba(11,19,43,0.10);
  z-index: 300;
}
.ssp-nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 16px;
  display: none;
}
.ssp-nav-dropdown:hover::after,
.ssp-nav-dropdown:focus-within::after { display: block; }
.ssp-nav-dropdown:hover .ssp-dropdown-menu,
.ssp-nav-dropdown:focus-within .ssp-dropdown-menu { display: block; }
.ssp-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--ssp-radius-sm);
  font-size: 14px;
  color: var(--ssp-muted);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s;
  border-bottom: 2px solid transparent;
}
.ssp-dropdown-menu a:hover { background: var(--ssp-bg); color: var(--ssp-text); }
.ssp-dropdown-menu a.active,
.ssp-dropdown-menu a.current-menu-item {
  color: var(--ssp-text);
  font-weight: 600;
  background: var(--ssp-bg);
  border-bottom-color: var(--ssp-green);
}
.ssp-dropdown-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Hamburger */
.ssp-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  background: none;
  border: 1px solid var(--ssp-border);
  padding: 4px;
  border-radius: var(--ssp-radius-sm);
  transition: background 0.15s;
}
.ssp-hamburger:hover { background: var(--ssp-bg); }
.ssp-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ssp-text);
  border-radius: 2px;
  margin: 0 auto;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.ssp-hamburger.open span:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
.ssp-hamburger.open span:nth-child(2) { opacity: 0; }
.ssp-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.ssp-mobile-nav {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 199;
  overflow-y: auto;
  border-top: 1px solid var(--ssp-border);
  flex-direction: column;
}
.ssp-mobile-nav.open { display: flex; }
.ssp-mobile-nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ssp-muted);
  padding: 16px 20px 8px;
  display: block;
  border-top: 1px solid #F0F3F6;
}
.ssp-mobile-nav-label:first-child { border-top: none; }
.ssp-mobile-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ssp-muted);
  text-decoration: none;
  padding: 11px 20px;
  border-bottom: 1px solid var(--ssp-bg);
}
.ssp-mobile-nav a.active,
.ssp-mobile-nav a.current-menu-item { color: var(--ssp-text); font-weight: 600; }
.ssp-mobile-nav a.ssp-mobile-svc { font-size: 15px; padding: 10px 20px 10px 28px; }
.ssp-mobile-nav-footer { padding: 20px; margin-top: auto; border-top: 1px solid #F0F3F6; }
.ssp-mobile-nav-cta-btn {
  display: block;
  background: var(--ssp-green);
  color: var(--ssp-navy);
  font-size: 15px;
  font-weight: 600;
  padding: 15px;
  border-radius: var(--ssp-radius-sm);
  text-decoration: none;
  text-align: center;
  transition: background 0.18s ease;
}
.ssp-mobile-nav-cta-btn:hover { background: var(--ssp-green-hover); }

/* Beat the generic .ssp-mobile-nav a rule above (0,1,1) — the button
   selector alone is only (0,1,0) and loses on display/color/padding. */
.ssp-mobile-nav a.ssp-mobile-nav-cta-btn {
  display: block;
  color: var(--ssp-navy);
  padding: 15px;
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   7. Cards & grids
   -------------------------------------------------------------------------- */
.ssp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ssp-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.ssp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ssp-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.ssp-card {
  background: #fff;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: 32px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ssp-card--offwhite { background: var(--ssp-bg); }
.ssp-card--dark {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.ssp-card--service:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(11,19,43,0.08);
  border-color: #C8D0DC;
}

/* Icon backgrounds */
.ssp-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ssp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.ssp-icon--blue   { background: var(--ssp-tint-blue); }
.ssp-icon--indigo { background: var(--ssp-tint-indigo); }
.ssp-icon--gold   { background: var(--ssp-tint-gold); }
.ssp-icon--green  { background: var(--ssp-tint-green); color: var(--ssp-green-dark); }
/* Green tint for icons sitting ON a dark section — the solid tints above are
   mixed for light backgrounds and read as pale blocks on navy. */
.ssp-icon--green-dark {
  background: rgba(34,214,122,0.15);
  color: var(--ssp-green);
}
/* Lets an icon's svg use stroke="currentColor" and pick up the modifier's
   colour. Both selectors are needed: .ssp-section--dark * matches the shapes
   inside the svg too, and .ssp-icon svg * (0,1,1) outranks it (0,1,0). */
.ssp-icon svg,
.ssp-icon svg * {
  color: inherit;
}
.ssp-icon--xs { width: 30px; height: 30px; }
.ssp-icon--sm { width: 36px; height: 36px; }
.ssp-icon--lg { width: 56px; height: 56px; }

/* Outcome cards (homepage right column) */
.ssp-outcome-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--ssp-radius-lg);
  padding: 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ssp-outcome-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(11,19,43,0.08);
  border-color: rgba(255,255,255,0.2);
}
.ssp-outcome-card__title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin: 0 0 4px;
}
.ssp-outcome-card__desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin: 0;
}

/* Pillar card (on dark, centered like services-main page) */
.ssp-pillar-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--ssp-radius-md);
  padding: 24px 20px;
}
.ssp-pillar-card__title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ssp-green);
  margin: 0 0 8px;
}
.ssp-pillar-card__desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Specific section layouts
   -------------------------------------------------------------------------- */
/* Hero with two columns */
.ssp-hero-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ssp-hero-cards-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Stats band */
.ssp-stats-band {
  display: flex;
  gap: 56px;
  align-items: center;
  justify-content: center;
}
.ssp-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ssp-stat__num {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 32px;
  color: #fff;
  letter-spacing: -1px;
}
.ssp-stat__label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.ssp-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.1);
}

/* Tools / platforms band */
.ssp-tools-band {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.ssp-tools-band__divider {
  width: 1px;
  height: 28px;
  background: var(--ssp-border);
}
.ssp-tools-list {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.ssp-tools-list span {
  font-size: 14px;
  font-weight: 600;
  color: var(--ssp-muted);
}

/* CTA section (dark, centered) */
.ssp-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Checkmark list (used in "Who this is for", "Right starting point if…") */
.ssp-check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ssp-check-list li,
.ssp-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ssp-muted);
  line-height: 1.6;
}
.ssp-check-list .ssp-check-arrow,
.ssp-check-row .ssp-check-arrow {
  color: var(--ssp-green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Numbered process steps */
.ssp-step-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ssp-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ssp-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ssp-navy);
  color: var(--ssp-green);
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ssp-step__title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ssp-text);
  margin: 0 0 4px;
}
.ssp-step__desc {
  font-size: 13px;
  color: var(--ssp-muted);
  line-height: 1.65;
  margin: 0;
}

/* FAQ accordion */
.ssp-faq-item {
  background: #fff;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.ssp-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 24px;
  font-family: var(--ssp-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ssp-text);
  cursor: pointer;
  line-height: 1.4;
}
.ssp-faq-q::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: var(--ssp-muted);
  transition: transform 0.2s ease;
  margin-left: 16px;
}
.ssp-faq-item.open .ssp-faq-q::after { transform: rotate(45deg); }
.ssp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 24px;
}
.ssp-faq-item.open .ssp-faq-a {
  max-height: 600px;
  padding: 0 24px 22px;
}
.ssp-faq-a p {
  font-size: 14px;
  color: var(--ssp-muted);
  line-height: 1.7;
  margin: 0 0 8px;
}

/* Contact form (WPForms wrapper styling) */
.ssp-contact-form,
.ssp-contact-form .wpforms-container {
  background: #fff;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: 36px;
}
.ssp-contact-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ssp-text);
  display: block;
  margin-bottom: 6px;
}
.ssp-contact-form input[type="text"],
.ssp-contact-form input[type="email"],
.ssp-contact-form input[type="tel"],
.ssp-contact-form textarea,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
  width: 100%;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ssp-text);
  font-family: var(--ssp-font-body);
  outline: none;
  transition: border-color 0.18s ease;
}
.ssp-contact-form input:focus,
.ssp-contact-form textarea:focus,
.wpforms-container input:focus,
.wpforms-container textarea:focus { border-color: var(--ssp-green); }
.ssp-contact-form textarea,
.wpforms-container textarea { resize: vertical; min-height: 130px; }

.ssp-contact-form button[type="submit"],
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
  background: var(--ssp-green);
  color: var(--ssp-navy);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: var(--ssp-radius-sm);
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background 0.18s ease, transform 0.15s ease;
}
.ssp-contact-form button[type="submit"]:hover,
.wpforms-container button[type="submit"]:hover {
  background: var(--ssp-green-hover);
  transform: translateY(-1px);
}

/* Contact info panel (dark) */
.ssp-contact-info {
  background: var(--ssp-navy);
  border-radius: var(--ssp-radius-lg);
  padding: 28px;
}

/* Blog cards */
.ssp-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ssp-blog-card {
  background: #fff;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ssp-blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,19,43,0.08);
}
.ssp-blog-card__image {
  aspect-ratio: 16 / 9;
  background: var(--ssp-bg);
  overflow: hidden;
}
.ssp-blog-card__image img { width: 100%; height: 100%; object-fit: cover; }
.ssp-blog-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.ssp-blog-card__meta {
  font-size: 12px;
  color: var(--ssp-muted);
  margin-bottom: 10px;
}
.ssp-blog-card__title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ssp-text);
  margin: 0 0 10px;
  line-height: 1.3;
}
.ssp-blog-card__title a { text-decoration: none; color: inherit; }
.ssp-blog-card__title a:hover { color: var(--ssp-green-dark); }
.ssp-blog-card__excerpt {
  font-size: 14px;
  color: var(--ssp-muted);
  line-height: 1.65;
  margin: 0 0 16px;
  flex: 1;
}

/* Pagination */
.ssp-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.ssp-pagination a,
.ssp-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-sm);
  background: #fff;
  font-size: 14px;
  color: var(--ssp-muted);
  text-decoration: none;
  transition: background 0.15s ease;
}
.ssp-pagination a:hover { background: var(--ssp-bg); }
.ssp-pagination .current {
  background: var(--ssp-navy);
  color: #fff;
  border-color: var(--ssp-navy);
}

/* Single post */
.ssp-single {
  background: #fff;
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: clamp(28px, 4vw, 56px);
  max-width: 820px;
  margin: 0 auto;
}
.ssp-single h1 {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--ssp-text);
  margin: 0 0 16px;
}
.ssp-single .ssp-post-meta {
  font-size: 13px;
  color: var(--ssp-muted);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ssp-border);
}
.ssp-single .entry-content h2 {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.5px;
  margin: 36px 0 14px;
  color: var(--ssp-text);
}
.ssp-single .entry-content h3 {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 28px 0 10px;
  color: var(--ssp-text);
}
.ssp-single .entry-content p,
.ssp-single .entry-content ul,
.ssp-single .entry-content ol {
  font-size: 16px;
  color: var(--ssp-text);
  line-height: 1.75;
  margin: 0 0 18px;
}
.ssp-single .entry-content a { color: var(--ssp-green-dark); }
.ssp-single .entry-content img {
  border-radius: var(--ssp-radius-md);
  margin: 24px 0;
}
.ssp-single .entry-content blockquote {
  border-left: 4px solid var(--ssp-green);
  padding: 12px 24px;
  margin: 24px 0;
  background: var(--ssp-bg);
  border-radius: 0 var(--ssp-radius-md) var(--ssp-radius-md) 0;
  font-style: italic;
  color: var(--ssp-muted);
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.ssp-footer {
  background: var(--ssp-navy);
  padding-top: 56px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ssp-footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.ssp-footer-brand p {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-top: 14px;
  line-height: 1.8;
}
.ssp-footer h5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0 0 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: rgba(255,255,255,0.95); }
.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 {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin: 0;
}
.ssp-footer-bottom-links { display: flex; gap: 20px; }
.ssp-footer-bottom-links a {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  margin-bottom: 0;
}

/* Footer logo: override the generic .ssp-footer a {display:block} rule that
 * was making the bars stack on top of the wordmark in the footer. */
.ssp-footer .ssp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

/* If the site uses WordPress's Custom Logo (Customize → Site Identity → Logo),
 * the_custom_logo() outputs a .custom-logo-link wrapping an .custom-logo img.
 * Constrain it sensibly in both the nav and the footer. */
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { max-height: 40px; width: auto; height: auto; }
.ssp-nav .custom-logo { max-height: 36px; }
.ssp-footer .custom-logo { max-height: 40px; }
.ssp-footer .ssp-logo-bars > div:nth-child(1) { background: #6B4A10; }
.ssp-footer .ssp-logo-bars > div:nth-child(2) { background: #9B6C16; }
.ssp-footer .ssp-logo-bars > div:nth-child(3) { background: #B8801A; }
.ssp-footer .ssp-logo-bars > div:nth-child(4) { background: var(--ssp-gold); }
.ssp-footer .ssp-wordmark strong { color: #fff; }
.ssp-footer .ssp-wordmark span { color: rgba(255,255,255,0.4); }

/* --------------------------------------------------------------------------
   10. Utilities
   -------------------------------------------------------------------------- */
.ssp-center { text-align: center; }
.ssp-text-left { text-align: left; }
.ssp-text-green { color: var(--ssp-green); }
.ssp-mb-0  { margin-bottom: 0 !important; }
.ssp-mb-12 { margin-bottom: 12px; }
.ssp-mb-16 { margin-bottom: 16px; }
.ssp-mb-24 { margin-bottom: 24px; }
.ssp-mb-32 { margin-bottom: 32px; }
.ssp-mb-40 { margin-bottom: 40px; }
.ssp-mx-auto { margin-left: auto; margin-right: auto; }
.ssp-max-560 { max-width: 560px; }
.ssp-max-640 { max-width: 640px; }
.ssp-max-680 { max-width: 680px; }
.ssp-max-700 { max-width: 700px; }
.ssp-max-860 { max-width: 860px; }
.ssp-max-900 { max-width: 900px; }
.ssp-max-960 { max-width: 960px; }
.ssp-max-1100 { max-width: 1100px; }

.ssp-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   11. Responsive — Laptop / Tablet / Mobile
   --------------------------------------------------------------------------
   BREAKPOINT SCALE — use ONLY these values anywhere in this file.

     1366 / 1024   Laptop container width (a range, not a step)
     1100px        Nav collapses to the burger. Content-driven exception:
                   it is set by where the logo and nav collide, not by the
                   scale. Do not reuse it for anything else.
      991px        Tablet — multi-column grids drop to 1-2 columns
      767px        Phone — mobile layout and type sizes
      390px        Small phone — fine tuning only

   One value in this file is NOT ours: 782px, near the top, is WordPress's
   own admin-bar breakpoint. Leave it alone — it has to match core, not us.

   Note there are two separate 767px blocks below: general layout, and the
   legibility block consolidated from the Customizer. Both are at the same
   value on purpose. If you retune one, retune the other in the same edit.

   Two rules that keep these from drifting apart:

     1. Never invent a new value. If a component seems to need one, it is
        almost always a sign the component should break at 991 or 767 with
        different rules, not at a new number in between.
     2. Keep every rule for one component at one breakpoint in a SINGLE
        block. Layout and type sizes for the same cards must not live in
        two separate queries — that is exactly how the pricing cards ended
        up stacking at 900px while their text stayed at desktop size until
        767px, leaving a 220px-wide band of unreadable pages.

   CSS variables cannot be used inside a media query condition, so this
   scale is enforced by convention. Search this file for "@media" before
   adding one.
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) and (min-width: 1024px) {
  .ssp-container,
  .ssp-nav-inner {
    max-width: 1200px;
    padding-left: clamp(40px, 4.5vw, 60px);
    padding-right: clamp(40px, 4.5vw, 60px);
  }
}

/* Nav collapses to the burger before the logo starts to compress.
   Retune this value if nav items are added or renamed — set it roughly
   40px above the width at which the logo tagline begins to wrap. */
@media (max-width: 1100px) {
  .ssp-nav-links { display: none; }
  .ssp-nav-cta   { display: none; }
  .ssp-hamburger { display: flex; }
}

@media (max-width: 991px) {
  .ssp-container,
  .ssp-nav-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
  .ssp-footer-top { grid-template-columns: 1fr 1fr; }
  .ssp-grid-3 { grid-template-columns: 1fr 1fr; }
  .ssp-grid-4 { grid-template-columns: 1fr 1fr; }
  .ssp-blog-grid { grid-template-columns: 1fr 1fr; }
  .ssp-section { padding-top: 56px; padding-bottom: 56px; }
  .ssp-hero-two-col { grid-template-columns: 1fr; gap: 40px; }
  .ssp-h1 { font-size: 44px; letter-spacing: -1.5px; }
  .ssp-h1--service { font-size: 40px; }
}

@media (max-width: 767px) {
  .ssp-container,
  .ssp-nav-inner {
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .ssp-nav-inner { padding-left: 20px; padding-right: 20px; height: 68px; }
  .ssp-grid-2,
  .ssp-grid-3,
  .ssp-grid-4,
  .ssp-services-grid,
  .ssp-footer-top,
  .ssp-blog-grid { grid-template-columns: 1fr !important; }
  .ssp-section { padding-top: 48px; padding-bottom: 48px; }

  .ssp-h1 { font-size: 36px !important; letter-spacing: -0.8px !important; }
  .ssp-h1--service { font-size: 32px; letter-spacing: -0.6px; }
  .ssp-h2 { font-size: 28px; letter-spacing: -0.5px; }
  .ssp-h2--lg { font-size: 30px; }
  p { max-width: 100% !important; }

  /* Hero responsive: stack columns + compact cards */
  .ssp-hero-two-col { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ssp-hero-cards-col { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ssp-hero-cards-col .ssp-outcome-card {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .ssp-hero-cards-col .ssp-outcome-card__desc { display: none !important; }
  .ssp-hero-cards-col .ssp-icon,
  .ssp-hero-cards-col .ssp-icon--sm {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
  .ssp-hero-cards-col .ssp-outcome-card__title { font-size: 12px !important; }

  /* Stats band wraps */
  .ssp-stats-band { flex-wrap: wrap; gap: 28px; }
  .ssp-stat-divider { display: none; }

  /* Tools band stacks */
  .ssp-tools-list { gap: 20px; }
}

/* --------------------------------------------------------------------------
   11b. Mobile legibility — larger body/UI text on phones
   --------------------------------------------------------------------------
   Consolidated here from Customizer > Additional CSS so there is a single
   source of truth. After deploying this file, delete the matching
   @media (max-width: 767px) legibility block from the Customizer.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Bump the smallest class-based body/UI text up for phone legibility */
  .ssp-body--13,
  .ssp-outcome-card__desc,
  .ssp-pillar-card__desc,
  .ssp-step__desc,
  .ssp-stat__label,
  .ssp-single .ssp-post-meta,
  .ssp-footer-brand p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Small arrow links + nav CTA up to a comfortable read size */
  .ssp-link-arrow,
  .ssp-nav-cta {
    font-size: 15px !important;
  }

  /* 15px UI elements up to a comfortable tap/read size */
  .ssp-btn,
  .ssp-btn--sm,
  .ssp-mobile-nav a,
  .ssp-mobile-nav a.ssp-mobile-svc,
  .ssp-wordmark strong,
  .ssp-outcome-card__title,
  .ssp-pillar-card__title {
    font-size: 16px !important;
  }

  /* Form labels + inputs at 16px prevents iOS auto-zoom on focus */
  .ssp-contact-form label,
  .ssp-contact-form input,
  .ssp-contact-form textarea,
  .wpforms-container input,
  .wpforms-container textarea {
    font-size: 16px !important;
  }

  /* Inline font sizes used by the block patterns.
     Patterns set text sizes inline instead of via a class, so the class
     rules above never reach them. These attribute selectors match the
     inline size directly. A stylesheet rule with important overrides an
     inline value, which is what lets this work. Both the spaced and the
     unspaced inline syntax are covered. */
  [style*="font-size:13px"],
  [style*="font-size: 13px"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .ssp-body,
  [style*="font-size:14px"],
  [style*="font-size: 14px"] {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }

  /* Prevent horizontal overflow: inline white-space:nowrap on a CTA link
     (e.g. the Hosting/Care callout links) can be wider than a phone screen
     and forces the page to scroll sideways. Let those links wrap on mobile. */
  a[style*="white-space:nowrap"],
  a[style*="white-space: nowrap"],
  p[style*="white-space:nowrap"],
  p[style*="white-space: nowrap"] {
    white-space: normal !important;
  }
}

@media (max-width: 390px) {
  .ssp-container,
  .ssp-nav-inner {
    padding-left: max(16px, 6vw);
    padding-right: max(16px, 6vw);
  }
  .ssp-nav-inner { padding-left: 16px; padding-right: 16px; }
  .ssp-h1 { font-size: 30px !important; }
  .ssp-section { padding-top: 40px; padding-bottom: 40px; }
  .ssp-hero-cards-col { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   12. WordPress core / Gutenberg overrides
   -------------------------------------------------------------------------- */
.alignwide  { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wp-block-image img { border-radius: var(--ssp-radius-md); }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ssp-navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   13. Migrated from Customizer > Additional CSS
   --------------------------------------------------------------------------
   Consolidated here so main.css is the single source of truth. After this
   file is live, these blocks should be REMOVED from Customizer > Additional
   CSS. The 767px mobile-legibility rules are already in section 11b and were
   NOT duplicated here.
   -------------------------------------------------------------------------- */

/* NOTE: The WPForms confirmation, Calendly embed, and RankMath breadcrumbs
   blocks are intentionally kept in Customizer > Additional CSS, not here. Each
   overrides plugin-injected markup and relies on Customizer's guaranteed-last
   load order to win, so they stay where that ordering is assured. */

/* --- Footer social icons --------------------------------------------------- */
.ssp-footer-social {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.ssp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ssp-footer-social a:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* --- About: belief cards hover (dark cards, lift + brighten) ---------------- */
.ssp-beliefs-grid > div {
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.ssp-beliefs-grid > div:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* --- Mobile menu: uniform link styling ------------------------------------
   These win over the base .ssp-mobile-nav a rules (section 6) by !important
   plus higher specificity, so placement here is order-independent. */
.ssp-mobile-nav a:not(.ssp-mobile-nav-cta-btn) {
  font-family: var(--ssp-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ssp-muted) !important;
}
.ssp-mobile-nav a.active,
.ssp-mobile-nav a.ssp-mobile-svc.active,
.ssp-mobile-nav a[aria-current="page"],
.ssp-mobile-nav li.current-menu-item > a,
.ssp-mobile-nav li.current_page_item > a,
.ssp-mobile-nav li.current-menu-parent > a,
.ssp-mobile-nav li.current_page_parent > a,
.ssp-mobile-nav li.current-menu-ancestor > a,
.ssp-mobile-nav li.current_page_ancestor > a {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ssp-navy) !important;
  box-shadow: inset 3px 0 0 var(--ssp-green) !important;
}

/* --------------------------------------------------------------------------
   14. Pricing page
   --------------------------------------------------------------------------
   Card treatment mirrors ssp-wordpress-websites-pricing.php (Launch / Build /
   Build + Content) so the two pages read as one system. The only addition is
   the price figure, which that pattern does not have.
   -------------------------------------------------------------------------- */

/* --- Centered section content --------------------------------------------- */
.ssp-price-hero,
.ssp-price-section {
  text-align: center;
}
.ssp-price-hero .ssp-h1,
.ssp-price-lead {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.ssp-price-lead {
  font-size: 18px;
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 0;
}
.ssp-section-intro,
.ssp-price-intro {
  font-size: 17px;
  color: var(--ssp-muted);
  line-height: 1.7;
  max-width: 660px;
  margin: 0 auto 40px;
}
.ssp-price-hero .ssp-cta-actions {
  margin-top: 32px;
}

/* --- Card grid ------------------------------------------------------------- */
.ssp-price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
  align-items: stretch;
}

.ssp-price-card {
  background: var(--ssp-white);
  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-price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(11, 19, 43, 0.08);
  border-color: #C8D0DC;
}

.ssp-price-card--featured {
  border: 2px solid var(--ssp-green-dark);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ssp-price-card--featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26, 165, 94, 0.15);
  border-color: var(--ssp-green-dark);
}

/* Scope cards push their arrow link to the bottom so links align across a row */
.ssp-price-card--scope {
  display: flex;
  flex-direction: column;
}
.ssp-price-card--scope .ssp-link-arrow {
  margin-top: auto;
}

/* --- Card internals -------------------------------------------------------- */
.ssp-price-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--ssp-tint-green);
  color: #0D6E3E;
  margin-bottom: 14px;
}
.ssp-price-badge--featured {
  background: var(--ssp-green-dark);
  color: var(--ssp-white);
}

.ssp-price-name {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ssp-navy);
  line-height: 1.3;
  margin: 0 0 6px;
}
.ssp-price-sub {
  font-size: 13px;
  color: var(--ssp-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}
.ssp-price-amount {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 34px;
  color: var(--ssp-navy);
  line-height: 1;
  margin: 0 0 20px;
}
.ssp-price-period {
  font-family: var(--ssp-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ssp-muted);
}
.ssp-price-rule {
  border: none;
  border-top: 1px solid var(--ssp-border);
  margin: 0 0 20px;
}

.ssp-price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--ssp-muted);
  line-height: 2;
}
.ssp-price-list li::before {
  content: "\2713";
  margin-right: 8px;
}
/* Highlighted list item — e.g. "First year hosting included" on the build packages */
.ssp-price-list .is-highlight {
  color: var(--ssp-green-dark);
  font-weight: 600;
}

/* "Starting at" label above a variable price (build packages, not the flat Care plans) */
.ssp-price-from {
  font-size: 13px;
  color: var(--ssp-muted);
  margin: 0 0 2px;
}

/* --- Scope card internals -------------------------------------------------- */
.ssp-scope-name {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ssp-navy);
  line-height: 1.35;
  margin: 0 0 10px;
}
.ssp-scope-text {
  font-size: 13px;
  color: var(--ssp-muted);
  line-height: 1.75;
  margin: 0 0 18px;
}
.ssp-scope-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ssp-green-dark);
  margin-bottom: 8px;
}

/* --- Availability note ----------------------------------------------------- */
.ssp-price-note {
  background: rgba(26, 165, 94, 0.05);
  border: 1px solid rgba(26, 165, 94, 0.18);
  border-radius: var(--ssp-radius-lg);
  padding: 20px 28px;
  max-width: 820px;
  margin: 32px auto 0;
  text-align: left;
  font-size: 14px;
  color: var(--ssp-muted);
  line-height: 1.7;
}
.ssp-price-note strong {
  color: var(--ssp-navy);
}
/* Icon variant — note with a leading circular icon (location package pages) */
.ssp-price-note--icon {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ssp-price-note--icon p {
  margin: 0;
}
.ssp-price-note-icon {
  flex-shrink: 0;
  color: var(--ssp-green-dark);
}
.ssp-price-note + .ssp-price-note {
  margin-top: 14px;
}

/* --- Website builds band --------------------------------------------------- */
.ssp-price-band {
  background: var(--ssp-white);
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-lg);
  padding: 28px 32px;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ssp-price-band-title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ssp-navy);
  line-height: 1.3;
  margin: 0 0 8px;
}
.ssp-price-band-text {
  font-size: 14px;
  color: var(--ssp-muted);
  line-height: 1.7;
  margin: 0;
}
.ssp-price-band .ssp-link-arrow {
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Responsive --------------------------------------------------------------
   ONE block at the canonical 991px tablet breakpoint (see the scale at the
   top of section 11). Layout AND type sizes live together deliberately: the
   moment the cards go full width is the moment their text has to grow. Split
   across two queries these drift, which is the bug this replaces.

   These patterns are class-based with no inline styles, so neither the class
   allowlist nor the [style*="font-size:.."] selectors in section 11 reach
   them. Any new class-based component needs its own entry like this one. */
@media (max-width: 991px) {

  /* Layout */
  .ssp-price-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .ssp-price-band {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Type — matches the 17px body size used elsewhere on the page */
  .ssp-price-sub,
  .ssp-price-from,
  .ssp-price-list,
  .ssp-scope-text,
  .ssp-price-note,
  .ssp-price-band-text {
    font-size: 17px;
    line-height: 1.7;
  }
  .ssp-price-list {
    line-height: 1.8;
  }
  .ssp-price-badge,
  .ssp-scope-label {
    font-size: 12px;
  }
  .ssp-price-name {
    font-size: 20px;
  }
  .ssp-scope-name {
    font-size: 19px;
  }
}

/* --------------------------------------------------------------------------
   15. About page — beliefs + differentiator cards
   --------------------------------------------------------------------------
   Everything else in this section rides on shared classes: .ssp-section--dark
   supplies the navy background, white headings and muted body text, and
   .ssp-grid-3 already steps to 2 columns at 991 and 1 at 767. Only the two
   rules below are specific to these cards.
   -------------------------------------------------------------------------- */

/* Cards read left-aligned inside a centred section */
.ssp-beliefs-grid { text-align: left; }

.ssp-belief-title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 10px;
}
/* Dimmer than the .ssp-section--dark * default so the title leads the card.
   Sits later in the file than that rule, which is what lets it win. */
.ssp-belief-text {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 991px) {
  .ssp-belief-text { font-size: 16px; line-height: 1.65; }
  .ssp-belief-title { font-size: 17px; }
}

/* --- Differentiator cards -------------------------------------------------
   Card shell is .ssp-card .ssp-card--offwhite and the grid is .ssp-grid-2,
   which already collapses to 1 column at 767. Only the number and title
   below are specific to these cards. */
.ssp-diff-grid { text-align: left; }

.ssp-diff-num {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--ssp-border);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 12px;
}
.ssp-diff-title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ssp-navy);
  line-height: 1.35;
  margin: 0 0 8px;
}

/* --------------------------------------------------------------------------
   16. Location services pages
   -------------------------------------------------------------------------- */

/* Industry card title on light cards */
.ssp-card-title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ssp-navy);
  line-height: 1.4;
  margin: 0 0 12px;
}

/* Bulleted list with a green dot marker. A real <ul> rather than flex divs,
   so the dot is decoration and the items parse as a list. */
.ssp-dot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ssp-dot-list li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  color: var(--ssp-muted);
  line-height: 1.55;
}
.ssp-dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ssp-green-dark);
}

@media (max-width: 991px) {
  .ssp-dot-list li { font-size: 17px; line-height: 1.6; padding-left: 16px; }
  .ssp-dot-list li::before { top: 10px; }
  .ssp-card-title { font-size: 17px; }
}

/* --- Callout card: icon + heading + text + arrow link ----------------------
   Shell is .ssp-card; this adds the horizontal layout. Stacks at 767 on the
   canonical scale (the patterns previously broke at an off-scale 600). */
.ssp-callout {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 40px;
}
.ssp-callout__title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ssp-navy);
  line-height: 1.3;
  margin: 0 0 8px;
}
.ssp-callout__text {
  font-size: 15px;
  color: var(--ssp-muted);
  line-height: 1.7;
  margin: 0 0 14px;
}

@media (max-width: 767px) {
  .ssp-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 28px;
  }
  .ssp-callout__text { font-size: 17px; }
  .ssp-callout__title { font-size: 19px; }
}

/* --- Numbered service rows ------------------------------------------------- */
.ssp-svc-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
  padding: 48px 0;
  border-bottom: 1px solid var(--ssp-border);
}
.ssp-svc-row:first-child { padding-top: 0; }

.ssp-svc-num {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 12px;
}
.ssp-svc-num--blue   { color: var(--ssp-tint-blue); }
.ssp-svc-num--indigo { color: var(--ssp-tint-indigo); }
.ssp-svc-num--gold   { color: var(--ssp-tint-gold); }

.ssp-svc-name {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ssp-navy);
  line-height: 1.35;
  margin-bottom: 20px;
}
.ssp-svc-title {
  font-family: var(--ssp-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ssp-navy);
  line-height: 1.3;
  margin: 0 0 10px;
}
.ssp-svc-text {
  font-size: 15px;
  color: var(--ssp-muted);
  line-height: 1.75;
  margin: 0 0 20px;
}
.ssp-bestfor {
  display: inline-flex;
  background: var(--ssp-bg);
  border: 1px solid var(--ssp-border);
  border-radius: var(--ssp-radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ssp-muted);
  line-height: 1.5;
}
.ssp-bestfor strong { color: var(--ssp-navy); }

/* --- Cities served --------------------------------------------------------- */
.ssp-cities { margin-top: 48px; }
.ssp-city-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ssp-city-list li {
  font-size: 12px;
  font-weight: 600;
  color: var(--ssp-muted);
  background: var(--ssp-white);
  border: 1px solid var(--ssp-border);
  border-radius: 20px;
  padding: 4px 12px;
}

@media (max-width: 767px) {
  .ssp-svc-row { grid-template-columns: 1fr; gap: 20px; }
  .ssp-svc-text { font-size: 17px; }
  .ssp-bestfor { font-size: 16px; }
  .ssp-city-list li { font-size: 14px; padding: 5px 13px; }
  .ssp-svc-title { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   17. Hero components
   -------------------------------------------------------------------------- */

/* Eyebrow preceded by an icon box */
.ssp-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* Light checkmark cards sitting on a dark hero. The greys are local to this
   variant, so they stay literal rather than becoming palette variables. */
.ssp-outcome-card--light {
  background: #EFF1F4;
  border-color: #DDE1E7;
  border-radius: var(--ssp-radius-md);
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.ssp-outcome-card--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(11,19,43,0.08);
  border-color: #C8D0DC;
}
/* Two-part selector (0,1,1) outranks .ssp-section--dark * (0,1,0), which
   would otherwise repaint this navy label to translucent white. */
.ssp-outcome-card--light .ssp-outcome-card__title {
  font-size: 13px;
  color: var(--ssp-navy);
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 767px) {
  .ssp-outcome-card--light .ssp-outcome-card__title { font-size: 15px; }
}