/**
 * AAV Design System Override
 * ===========================
 * Loads AFTER style.css — overrides only, no deletions.
 * Remove this file to revert to original design.
 *
 * LOCKED DECISIONS (Session 10 / Staging Deployment):
 *   Font: Figtree ONLY — site-wide, no exceptions
 *   Navy: #1B2A4A (canonical)
 *   Nav: Figtree, 13px, 600 weight, 0.5px tracking, uppercase
 *   Button: Figtree, uppercase
 *   CTA Band: font-weight 700
 *   Footer headers: #3A9CC7
 *   Phase Stepper: flat ember gradient, NO dot texture
 *
 * Wave 2.5 Phase 1 (Mar 17, 2026): 5 Customizer conflict rules removed
 *   from Additional CSS — old blog archive, deadlines shortcode, services
 *   grid, Gibson font refs. Rules now only in this file.
 *
 * Wave 2.5 Phase 3 (Mar 18, 2026): Customizer clearance — ~652 lines removed.
 *   Removed: section#services grid, .home .hamburger/.front-page-header,
 *   commented .section-service-hero, Gibson font blocks, .content-hover,
 *   .navigation post nav, .block-cta, .page-id-2583, .team-member-popup,
 *   deadlines hub styling (override wins), blog archive layout + breakpoints,
 *   :root blue variables. ~323 lines retained (single-deadlines, mobile nav,
 *   Formstack, .cf-takeaways, menu-item-2362, page-id-5 rules).
 */

/* ══════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   ══════════════════════════════════════════════ */
:root {
  --aav-ember-gradient: radial-gradient(ellipse at 30% 60%, #2a3248 0%, #1f2c44 30%, #1B2A4A 65%, #121d30 100%);
  --aav-border-warm: #e8e5e1;
  --aav-border-warm-light: #ece9e5;
}

/* ══════════════════════════════════════════════
   GLOBAL BASE
   ══════════════════════════════════════════════ */
body {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #444 !important;
  background-color: #f8f6f5 !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

span, strong { font-family: inherit; }

a {
  color: #1B2A4A;
}

/* ══════════════════════════════════════════════
   TYPOGRAPHY — HEADINGS
   All Figtree, zero letter-spacing, tight
   ══════════════════════════════════════════════ */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: 'Figtree', sans-serif;
  letter-spacing: 0;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 34px;
  font-weight: 800;
  color: #1B2A4A;
}

h2, .h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1B2A4A;
}

h3, .h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2A3D64;
  letter-spacing: 0;
}

h4, .h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2A3D64;
  letter-spacing: 0;
}

h5, .h5 {
  font-size: 16px;
  font-weight: 600;
  color: #1B2A4A;
  letter-spacing: 0;
}

h6, .h6 {
  font-size: 14px;
  font-weight: 600;
  color: #1B2A4A;
  letter-spacing: 0;
}

/* Responsive heading scale */
@media screen and (max-width: 992px) {
  h1, .h1 {
    font-size: 24px;
  }
  h2, .h2 {
    font-size: 19px;
  }
}

/* ══════════════════════════════════════════════
   TYPOGRAPHY — BODY TEXT
   ══════════════════════════════════════════════ */
p {
  font-family: 'Figtree', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: #444;
  letter-spacing: 0 !important;
}

/* Secondary/lighter body text */
.text-wrap p,
.section-article-content p {
  font-family: 'Figtree', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}

/* Article content area */
.section-article-content {
  font-family: 'Figtree', sans-serif !important;
  font-size: 15.5px !important;
}

.section-article-content h1 {
  font-size: 34px;
}

.section-article-content h2 {
  font-size: 22px;
}

.section-article-content h3 {
  font-size: 18px;
}

/* Lists */
ul, ol, li {
  font-family: 'Figtree', sans-serif;
  letter-spacing: 0;
}

/* ══════════════════════════════════════════════
   HEADER / NAV
   Figtree, 13px, 600 weight, 0.5px tracking, uppercase
   ══════════════════════════════════════════════ */
/* Universal header: frosted glass on all pages, all states */
.header {
  background-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-bottom: none !important;
  min-height: 100px !important;
}

/* Kill the theme's nav-down slide-down animation on scroll */
.header.sticky {
  animation: none !important;
  -webkit-animation: none !important;
}

/* === HEADER LOGO SIZING (Wave 3 — single navy lockup) === */
.header .header-logo img.dark-logo {
  max-width: none !important;
  max-height: none !important;
  height: 70px !important;
  width: auto !important;
  opacity: 1 !important;
  display: block !important;
}

/* Vertically center logo within header */
.header .header-logo {
  display: flex;
  align-items: center;
}

/* Header container must grow to fit new logo */
.header .d-flex.justify-content-between {
  min-height: 100px !important;
  align-items: center;
}

.header {
  min-height: 100px !important;
}

/* Belt-and-suspenders: lock the header's inner flex container to the
   sticky-state height so nav items never shift vertical position,
   even if the logo height fix is defeated by an injected rule. */
.header .header-main-content .d-flex {
  min-height: 100px;
}

.header-nav * {
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 0.5px !important;
}

.header-nav > li {
  padding: 0 3px !important;
}

.header-nav > li > a {
  font-family: 'Figtree', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #7E7F7F !important;
}

.header-nav > li > a:hover,
.header-nav > li:hover > a {
  color: #1B2A4A !important;
}

/* Sub-menus */
.header-nav > li > .sub-menu > li {
  font-family: 'Figtree', sans-serif !important;
}

.header-nav > li .sub-menu a {
  font-family: 'Figtree', sans-serif !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Style F nav caret — rotates 180deg on mega panel open */
.nav-caret {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.22s ease;
}

.nav-item-has-mega:hover .nav-caret,
.nav-item-has-mega.mega-open .nav-caret {
  transform: rotate(180deg);
}

/* Hover underline — keep brand blue */
@media screen and (min-width: 992px) {
  .header-nav > li:hover {
    border-color: #1B2A4A !important;
  }
  /* Kill hover underline on CTA pill */
  .header-nav > li.header-cta-button:hover {
    border-color: transparent !important;
    border: none !important;
  }
}

/* ══════════════════════════════════════════════
   MEGA MENU PANELS
   V3 swatch reference. Description+CTA left,
   verticals middle, contextual right.
   Smooth opacity reveal. Left-justified columns.
   ══════════════════════════════════════════════ */

/* --- Positioning context: header container --- */
.header .container {
  position: relative;
  overflow: visible !important;
}

/* --- Nav item: active indicator --- */
.nav-item-has-mega {
  position: static !important;
}

.nav-item-has-mega > a {
  position: relative;
}

/* JS-positioned indicator — width matches nav text only (excludes caret).
   Appended to .header .container by aav-mega-menu.js. */
.mega-nav-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: #007BA7;
  border-radius: 3px 3px 0 0;
  z-index: 101;
  pointer-events: none;
  display: none;
}

/* --- CTA button black box fix ---
   Theme uses :last-child at high specificity with !important:
     .header.header-dark-logo .header-nav li:last-child { border: 1px solid ... !important }
     .header.sticky .header-nav li:last-child { border: 1px solid ... !important }
   Must match or exceed specificity (0,4,1) to win. */
.header .header-nav li.header-cta-button,
.header.header-dark-logo .header-nav li.header-cta-button,
.header.sticky .header-nav li.header-cta-button,
.header .header-nav li:last-child.header-cta-button {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin-left: 12px !important;
}

/* Hover state — theme applies bg-color on :last-child:hover at 0,5,1 */
.header.header-dark-logo .header-nav li.header-cta-button:hover,
.header.sticky .header-nav li.header-cta-button:hover,
.header .header-nav li:last-child.header-cta-button:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* CTA <a> tag styling */
.header .header-nav li.header-cta-button > a,
.header .header-nav a.header-cta-button {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #007BA7 !important;
  color: #fff !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 20px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: background 0.25s ease !important;
}

.header .header-nav li.header-cta-button > a:hover,
.header .header-nav a.header-cta-button:hover {
  background: #006a91 !important;
  color: #fff !important;
}

/* Force white text on CTA pill — .nav-text span may inherit nav grey */
.header .header-nav li.header-cta-button > a .nav-text,
.header .header-nav a.header-cta-button .nav-text {
  color: #fff !important;
}

/* No underline indicator on CTA button */
.header .header-nav li.header-cta-button > a::after {
  display: none !important;
}

/* --- Mega dropdown panel: smooth opacity reveal, full-width background --- */
.mega-menu-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: #1B2A4A;
  border-top: 3px solid #007BA7;
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  padding: 28px 0;
  z-index: 100;
  box-sizing: border-box;
  white-space: normal;
  /* Smooth reveal — no display toggle, no positional jump */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.mega-menu-panel.mega-panel-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- Column layout: LEFT-JUSTIFIED flexbox, content constrained --- */
.mega-panel-grid {
  display: flex;
  align-items: stretch;
  column-gap: 48px;
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

.mega-column {
  flex: 0 0 auto;
  padding-inline: 14px;
  position: relative;
}

.mega-column:first-child {
  padding-left: 10px;
}

.mega-column:last-child {
  padding-right: 10px;
}

/* Column dividers — centered in gap via pseudo-element */
.mega-column + .mega-column::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

/* --- Description column (left) — matches v3 swatch --- */
.mega-col-description {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  flex-shrink: 0;
  flex-basis: 220px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.mega-panel-heading {
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #3A9CC7;
  margin-bottom: 10px;
}

.mega-description-text {
  font-family: 'Figtree', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.45) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  white-space: normal !important;
}

.mega-description-cta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mega-description-cta-label {
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}

.mega-description-cta-btn {
  display: inline-block;
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #007BA7;
  padding: 8px 16px;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s ease;
}

.mega-description-cta-btn:hover {
  background: #006a91;
  color: #fff;
}

/* --- Column widths: verticals + contextual --- */
.mega-col-verticals {
  min-width: 240px;
}

.mega-col-contextual {
  min-width: 240px;
  min-height: 200px;
}

/* Column widths — Resources static columns */
.mega-panel-resources .mega-column:not(.mega-col-description) {
  min-width: 180px;
}

/* --- Sub-column headers (muted, per v3 swatch) --- */
.mega-col-header {
  font-family: 'Figtree', sans-serif !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 12px;
}

/* --- Link items --- */
.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.15s ease;
  margin: 0 -14px;
}

.mega-link:hover {
  background: rgba(255,255,255,0.06);
}

/* Active vertical link state (set by JS) */
.mega-link.mega-vertical-active {
  background: rgba(255,255,255,0.06);
}

.mega-link.mega-vertical-active .mega-link-label {
  color: #fff;
  font-weight: 600;
}

.mega-link-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.mega-link-text {
  display: flex;
  flex-direction: column;
}

.mega-link-label {
  font-family: 'Figtree', sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
  white-space: nowrap;
}

.mega-link-subtitle {
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  line-height: 1.4;
  margin-top: 1px;
}

/* --- Contextual hover: placeholder + slide-in --- */
.mega-contextual-placeholder {
  font-family: 'Figtree', sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255,255,255,0.25);
  padding: 8px 14px;
  margin: 0 -14px;
}

/* Contextual column header dims when no vertical selected */
.mega-col-contextual .mega-col-header {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.mega-col-contextual.mega-ctx-active .mega-col-header {
  opacity: 1;
}

.mega-contextual-items {
  /* Hidden by default — JS shows on vertical hover */
}

.mega-contextual-items.mega-ctx-visible {
  display: block !important;
  /* No animation — instant reveal (fly-in was distracting) */
}

.mega-link-note {
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  padding: 8px 0;
  line-height: 1.5;
  font-style: italic;
}

/* ══════════════════════════════════════════════
   BUTTONS — PRIMARY (Figtree, uppercase)
   ══════════════════════════════════════════════ */
.button,
.admit-btn-colored,
.admit-btn-transparent,
.section-hero .hero-slider-item .button,
.footer-nav li .button {
  font-family: 'Figtree', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 24px !important;
  transition: all 0.25s ease !important;
}

/* Primary CTA — blue gradient */
.button.bg-blue,
.admit-btn-colored {
  background: linear-gradient(135deg, #007BA7 0%, #005f8a 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 12px 30px !important;
  border-radius: 24px !important;
}

.button.bg-blue:hover,
.admit-btn-colored:hover {
  background: linear-gradient(135deg, #006a96 0%, #00537a 100%) !important;
  border: none !important;
  color: #fff !important;
}

/* Ghost/transparent button — frosted navy + border */
.admit-btn-transparent {
  background: rgba(27, 42, 74, 0.05) !important;
  color: #1B2A4A !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(27, 42, 74, 0.12) !important;
  font-weight: 600 !important;
  padding: 12px 30px !important;
}

.admit-btn-transparent:hover {
  background: rgba(27, 42, 74, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(27, 42, 74, 0.2) !important;
  color: #1B2A4A !important;
}

/* Hero-sized CTA */
.admit-btn-large {
  padding: 15px 40px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 28px !important;
}

/* Small button */
.admit-btn-small {
  padding: 6px 18px !important;
  font-size: 11px !important;
}

/* White button variant */
.button.bg-white {
  font-family: 'Figtree', sans-serif !important;
  border-radius: 8px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ══════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════ */
#breadcrumbs,
#breadcrumbs a,
#breadcrumbs span {
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════
   LINE-NAV (vertical service links)
   ══════════════════════════════════════════════ */
.line-nav a {
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════
   SECTION BACKGROUNDS
   Normalize white panels on stone background
   ══════════════════════════════════════════════ */
.section-line-nav {
  background-color: #fff !important;
  border-bottom: 1px solid #eaeae8 !important;
}

.testimonial {
  background-color: #fff !important;
  border-radius: 8px;
}

.latest-post {
  background-color: #fff !important;
  border-radius: 8px;
}

/* ══════════════════════════════════════════════
   HERO SECTIONS
   ══════════════════════════════════════════════ */

/* ── HERO CLEARANCE ──
   Shared -80px/+80px bleed pattern. Each hero
   keeps its own padding shorthand for bottom spacing. */
.consultation-hero,
.team-hero,
.service-hero,
.blog-single-hero,
.hub-page-hero {
  margin-top: -80px;
}

.hub-page-hero {
  padding: 80px 0 56px;
  background: var(--aav-ember-gradient);
  position: relative;
}

/* ── Hub page inline style migrations (Task 2.1) ── */
.hub-hero-breadcrumbs {
  font-size: 13px;
  margin-bottom: 16px;
}
.hub-hero-title {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
  font-family: 'Figtree', sans-serif;
}
.hub-hero-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin: 0;
  max-width: 520px;
  line-height: 1.6;
}
.hub-card-wrap {
  max-width: 1270px;
  margin: -32px auto 0;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}
.hub-page-wrap {
  background: #f8f6f5;
}
.hub-page-body {
  background: #f8f6f5;
  padding: 0 24px 48px;
}
.hub-content-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
  overflow: hidden;
  padding: 28px 32px 36px;
}
.hub-blurb-section {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 40px;
}
.hub-blurb-section h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 0 0 12px;
  letter-spacing: -0.2px;
  font-family: 'Figtree', sans-serif;
}
.hub-blurb-section p {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  margin: 0;
}
.hub-divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 48px 0;
}
.hub-deeper-prose {
  max-width: 740px;
}
.hub-deeper-prose h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 0 0 16px;
  letter-spacing: -0.2px;
  font-family: 'Figtree', sans-serif;
}
.hub-cta-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1270px;
  margin-top: 32px;
}
.hub-cta-wrap .cta-link {
  text-decoration: none;
  display: inline-block;
}
.hub-action-text {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.hub-tile-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.section-hero .subtitle {
  font-family: 'Figtree', sans-serif !important;
}

.section-service-hero-description {
  font-family: 'Figtree', sans-serif !important;
}

.section-service-hero-text h1 {
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════
   TEAM SECTION
   ══════════════════════════════════════════════ */
.team-member .text-wrap {
  background-color: #e8ecf1 !important;
  font-family: 'Figtree', sans-serif !important;
}

.team-member .data-title,
.team-member h5 {
  font-family: 'Figtree', sans-serif;
}

.team-member-details .name {
  font-family: 'Figtree', sans-serif !important;
}

.section-team-heading h1 {
  font-family: 'Figtree', sans-serif;
  letter-spacing: 0;
}

/* ══════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════ */
.card-type-1-text-wrap h3 {
  font-family: 'Figtree', sans-serif !important;
  color: #2A3D64 !important;
}

/* ══════════════════════════════════════════════
   SERVICES GRID
   ══════════════════════════════════════════════ */
.section-services-grid-heading h2 {
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 0.5px !important;
  color: #1B2A4A !important;
}

.section-services-grid-heading h2::after {
  background-color: #1B2A4A !important;
}

/* ══════════════════════════════════════════════
   BLOCK COMPONENTS
   ══════════════════════════════════════════════ */
.block-consult-title {
  font-family: 'Figtree', sans-serif !important;
}

.block-consult-title h2 {
  font-family: 'Figtree', sans-serif !important;
}

.block-text-with-image .text-wrap h2,
.block-school-list .text-wrap h2 {
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════
   FOOTER — Rebuilt per CC-FOOTER-SPEC.md
   Navy #1B2A4A. Headers: #3A9CC7. Max-width 1100px.
   Grid: 1fr 1fr 1fr 210px, column-gap 40px.
   ══════════════════════════════════════════════ */
.footer,
.site-footer {
  background-color: #1B2A4A !important;
  padding: 48px 0 0 !important;
  font-family: 'Figtree', sans-serif !important;
}

.site-footer .footer-inner {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Row 1: Logo + Social */
.site-footer .footer-row-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 210px;
  column-gap: 40px;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-footer .footer-logo-area {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer .footer-wordmark-lockup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* === FOOTER LOGO SIZING (Wave 3) === */
.site-footer .footer-logo-img {
  width: 250px;
  height: auto !important;
  display: block;
}

.site-footer .footer-social {
  grid-column: 4;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.site-footer .footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: all 0.25s ease;
}

.site-footer .footer-social-icon:hover {
  border-color: #007BA7;
  background: rgba(0,123,167,0.1);
  color: #fff;
}

/* Row 2: Link Columns + CTA */
.site-footer .footer-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 210px;
  column-gap: 40px;
  margin-bottom: 32px;
}

.site-footer .footer-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-footer .footer-col-header {
  font-family: 'Figtree', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #3A9CC7 !important;
  margin-bottom: 14px;
}

.site-footer .footer-link {
  font-family: 'Figtree', sans-serif !important;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  display: inline-block;
  width: fit-content;
  transition: color 0.25s ease;
}

.site-footer .footer-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0%;
  height: 1px;
  background: #3A9CC7;
  transition: width 0.3s ease;
}

.site-footer .footer-link:hover {
  color: rgba(255,255,255,0.95);
}

.site-footer .footer-link:hover::after {
  width: 100%;
}

/* CTA Column */
.site-footer .footer-cta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer .footer-cta-button {
  font-family: 'Figtree', sans-serif !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
  background: #007BA7;
  padding: 13px 24px;
  border-radius: 100px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
  width: 100%;
  text-align: center;
}

.site-footer .footer-cta-button:hover {
  background: #006a91;
  color: #fff;
}

.site-footer .footer-email {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: rgba(255,255,255,0.6);
}

.site-footer .footer-email a {
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.25s ease;
}

.site-footer .footer-email a:hover {
  color: rgba(255,255,255,0.95);
}

/* Badge — single (under CTA in col 4) */
.site-footer .footer-badge-single {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

.site-footer .footer-badge-img {
  max-width: 100px;
  height: auto;
}

/* Badge — row (2+ badges, below grid) */
.site-footer .footer-badge-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.site-footer .footer-badge-row .footer-badge-img {
  max-width: 80px;
  height: auto;
}

/* Bottom Bar */
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.site-footer .footer-bottom-wordmark {
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

.site-footer .footer-bottom-copy {
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* ══════════════════════════════════════════════
   LINK STYLING
   ══════════════════════════════════════════════ */
.link {
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════
   MISC GLOBAL OVERRIDES
   Catch any remaining Gibson/Adelle references
   ══════════════════════════════════════════════ */
[style*="font-family: Gibson"],
[style*="font-family: 'Gibson'"],
[style*="font-family: Adelle"],
[style*="font-family: 'Adelle Rg'"] {
  font-family: 'Figtree', sans-serif !important;
}

/* Elementor overrides (if Elementor content uses inline fonts) */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════
   CONTAINER WIDTH
   Slightly wider for modern screens
   ══════════════════════════════════════════════ */
.container {
  max-width: 1270px !important;
}

/* ══════════════════════════════════════════════
   SELECTION COLOR
   ══════════════════════════════════════════════ */
::selection {
  background: rgba(0, 123, 167, 0.15);
  color: #1B2A4A;
}

::-moz-selection {
  background: rgba(0, 123, 167, 0.15);
  color: #1B2A4A;
}

/* ══════════════════════════════════════════════
   CTA BAND
   Font-weight 700 (was 600). Applied globally.
   ══════════════════════════════════════════════ */
.cta-band,
.cta-band span,
.cta-band .cta-text,
.cta-band h2,
.cta-band p {
  font-family: 'Figtree', sans-serif !important;
}

.cta-band span,
.cta-band .cta-text {
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════
   PHASE STEPPER
   Flat ember gradient ONLY — no dot texture overlay.
   ══════════════════════════════════════════════ */
.phase-stepper {
  background: var(--aav-ember-gradient) !important;
  position: relative;
}

.phase-stepper .dot-overlay,
.phase-stepper .dot-texture {
  display: none !important;
}

/* ══════════════════════════════════════════════
   ANIMATION SAFETY NET
   Theme scripts.js sets opacity:0 on .section children.
   Every custom component must be listed here or it
   will be invisible on page load.
   ══════════════════════════════════════════════ */
.site-footer,
.page-hero,
.consultation-card,
.consultation-hero,
.consultation-tiles,
.consultation-step-1,
.consultation-step-2,
.consultation-pills,
.consultation-cta-band,
.blog-archive-wrap,
.blog-archive-sidebar,
.blog-archive-grid,
.blog-archive-grid-area,
.archive-layout,
.archive-card-item,
.archive-meta,
.active-chips,
.archive-pagination,
.search-results-wrap,
.search-card,
.search-result,
.error-404-wrap,
.content-404,
.quick-links-grid,
.team-page-wrap,
.team-hero,
.team-hero-inner,
.team-card-wrap,
.team-card-container,
.team-cards-grid,
.team-card,
.team-card-photo,
.team-card-info,
.team-modal-backdrop,
.team-modal,
.team-modal-left,
.team-modal-right,
.team-modal-tabs,
.team-modal-tab,
.team-modal-content,
.team-modal-panel,
.service-page-wrap,
.service-page-body,
.service-card-wrap,
.service-hero,
.service-hero-inner,
.service-content-card,
.service-content-grid,
.service-blocks,
.service-sidebar,
.phase-stepper,
.phase-stepper-inner,
.phase-step,
.identity-selector,
.identity-selector-grid,
.identity-card,
.identity-selector-header,
.why-it-works,
.why-it-works-grid,
.feature-table,
.pricing-table,
.aav-hero-inner,
.hub-page-wrap,
.hub-page-hero,
.hub-page-body,
.hub-page-card-wrap,
.hub-page-content-card,
.hub-card-wrap,
.hub-content-card,
.hub-blurb-section,
.hub-divider,
.hub-deeper-prose,
.hub-action-text,
.hub-cta-wrap,
.hub-tile-grid,
.hub-hero-title,
.hub-hero-subtitle,
.hub-hero-breadcrumbs,
.faq-hub-tiles,
.cta-fallback-text,
.faq-accordion-block,
.faq-accordion,
.faq-accordion-item,
.prose-section,
.faq-hub-wrap,
.faq-hub-hero,
.faq-hub-accent-bar,
.faq-single-wrap,
.faq-single-hero,
.faq-single-content-area,
.faq-related,
.faq-related-articles,
.faq-cta-section,
.deadlines-hub-wrap,
.deadlines-hub-hero,
.deadlines-hub-header,
.deadlines-breadcrumbs,
.as-deadline-main-wrapper,
.as-deadline-filter-wrapper,
.as-deadline-checkbox-search-wrapper,
.as-deadline-wrapper,
.as-deadline-box,
.as-deadline-img,
.as-school-wrapper,
.as-school-name-cont,
.as-school-name,
.as-deadline-round,
.as-round-heading,
.as-round-dd-cont,
.as-no-results-message,
.cta-band,
.front-page-hero,
.front-page-social-proof,
.front-page-differentiator,
.front-page-team,
.front-page-spectrum,
.front-page-familiar,
.front-page-cta,
.consultation-wrap,
.consultation-hero,
.consultation-hero-inner,
.consultation-card-wrap,
.consultation-card,
.consultation-step-1,
.consultation-step-2,
.consultation-pills,
.consultation-tiles,
.consult-tile,
.consult-form-card,
.consultation-cta-band,
.blog-single-wrap,
.blog-single-hero,
.blog-single-hero-inner,
.blog-single-body,
.blog-layout,
.blog-article-card,
.blog-content,
.blog-meta,
.blog-sidebar,
.sidebar-featured-image,
.sidebar-related,
.sidebar-cta,
.blog-hero-accent-bar,
.blog-cta,
.homepage-wrap,
.homepage-hero,
.homepage-hero-inner,
.homepage-hero-text,
.homepage-cards-wrap,
.homepage-cards-inner,
.homepage-cards-grid,
.homepage-social-proof,
.homepage-differentiator,
.homepage-team,
.homepage-placements,
.homepage-sound-familiar,
.homepage-cta-band,
.homepage-section-inner,
.hero-card,
.hero-card-icon,
.social-proof-grid,
.social-proof-testimonial,
.social-proof-stats,
.testimonial-slide,
.testimonial-dots,
.diff-card,
.diff-card-icon,
.homepage-team-card,
.team-card-photo-area,
.team-card-info,
.placement-panel,
.sf-card,
.sf-card-icon,
.homepage-cta-band-inner {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ══════════════════════════════════════════════
   SEARCH RESULTS PAGE
   ══════════════════════════════════════════════ */

/* Ember gradient — explicit on search + 404 heroes
   (blog single inherits from Customizer CSS; these pages need it directly) */
.search-hero,
.hero-404 {
  background: var(--aav-ember-gradient) !important;
  position: relative;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kill wrapper padding-top on ember-hero pages so the gradient
   sits flush under the fixed header. The hero's own padding-top
   (84px on archive, 48px on search/404) handles header clearance. */
body.archive .wrapper,
body.category .wrapper,
body.search .wrapper,
body.error404 .wrapper,
.wrapper:has(.page-hero),
.wrapper:has(.deadlines-hub-hero) {
  padding-top: 0 !important;
}

/* Kill any gap between nav and hero on custom template body contexts */
body.search .page-hero,
body.error404 .page-hero,
body.archive .page-hero,
body.category .page-hero,
.page-hero {
  margin-top: 0 !important;
}

body.search main,
body.error404 main,
body.archive main,
body.category main,
main:has(.page-hero),
main:has(.deadlines-hub-hero) {
  margin: 0 !important;
  padding: 0 !important;
}

body.search section.page-hero,
body.error404 section.page-hero {
  margin: 0 !important;
  padding-top: 100px !important;
}

/* ── UNIVERSAL HERO INNER ─────────────────────────────────
   Single source of truth for breadcrumb + H1 positioning.
   All hero templates carry .aav-hero-inner on their content div.

   Combined with Layer 1 (hero outer padding-top = 128px on kill-list
   pages, or wrapper padding = 128px on bleed pages), this produces
   breadcrumbs at 148px from viewport top on EVERY page.

   Do NOT add per-template padding-top overrides. Ever.
   ───────────────────────────────────────────────────────── */
.aav-hero-inner {
  padding-top: 20px;
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 0;
  max-width: 1270px;
  margin: 0 auto;
}

/* Universal breadcrumb font — 12px Figtree across all hero contexts */
.aav-hero-inner nav,
.aav-hero-inner .hero-breadcrumbs,
.aav-hero-inner #breadcrumbs,
.aav-hero-inner .faq-breadcrumbs {
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: normal !important;
}

/* --- Breadcrumbs — global 13px catch-all for ALL breadcrumb contexts --- */
.hero-breadcrumbs,
.hero-breadcrumbs a,
.hero-breadcrumbs .breadcrumb-sep,
.hero-breadcrumbs .breadcrumb-current,
.faq-breadcrumbs,
.faq-breadcrumbs a,
.faq-breadcrumbs > span,
.breadcrumb-sep,
#breadcrumbs,
#breadcrumbs a,
#breadcrumbs span {
  font-size: 12px !important;
  font-family: 'Figtree', sans-serif !important;
}

/* Hero — left-aligned content */
.search-hero .page-hero-inner {
  text-align: left !important;
  padding-bottom: 80px;
}

.search-hero .hero-breadcrumbs {
  margin-bottom: 12px;
  position: relative;
  z-index: 3;
}

/* No accent bar on search hero */
.search-hero .hero-accent-bar {
  display: none;
}

.search-hero .hero-breadcrumbs a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 13px;
  font-family: 'Figtree', sans-serif;
}

.search-hero .hero-breadcrumbs a:hover {
  color: rgba(255,255,255,0.8);
}

.search-hero .hero-breadcrumbs .breadcrumb-sep {
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  margin: 0 6px;
}

.search-hero .hero-breadcrumbs .breadcrumb-current {
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Figtree', sans-serif;
}

.search-hero .page-hero-title {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  margin-bottom: 20px;
  text-align: left;
}

/* Frosted glass search bar — left-aligned */
.hero-search-form {
  display: flex;
  max-width: 560px;
  margin: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
}

.hero-search-form input {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-family: 'Figtree', sans-serif;
  outline: none;
}

.hero-search-form input::placeholder {
  color: rgba(255,255,255,0.4);
}

.hero-search-form button {
  background: #007BA7;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.hero-search-form button:hover {
  background: #006890;
}

.hero-accent-bar {
  width: 40px;
  height: 3px;
  background: var(--v-accent, #3A9CC7);
  margin: 20px 0 0;
  border-radius: 2px;
}

/* Kill accent bar + bottom stripe on search and 404 heroes */
.hero-404 .hero-accent-bar,
.hero-bottom-accent {
  display: none !important;
}

/* White card container — left-aligned within page container.
   Hero padding-bottom 80px minus this overlap = ~36px visible ember gap. */
.search-results-wrap {
  max-width: 720px;
  margin-top: -44px;
  position: relative;
  z-index: 2;
  padding: 0 0 60px;
}

.search-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
  padding: 28px 32px 36px;
}

/* Meta row — count + type pills */
.search-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f4f3f0;
}

.search-meta-count {
  font-size: 14px;
  color: #666;
  font-family: 'Figtree', sans-serif;
}

.search-meta-count strong {
  color: #1B2A4A;
}

.type-pills {
  display: flex;
  gap: 6px;
}

.type-pills a {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  color: #aaa;
  font-family: 'Figtree', sans-serif;
  transition: all 0.15s ease;
}

.type-pills a:hover {
  border-color: #ccc;
  color: #888;
}

.type-pills a.active {
  background: #1B2A4A;
  color: #fff;
  border-color: #1B2A4A;
}

/* Badges — pill-shaped */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Figtree', sans-serif;
}

.badge-post { background: rgba(0,123,167,0.1); color: #007BA7; }
.badge-faq  { background: rgba(74,155,142,0.1); color: #4A9B8E; }
.badge-page { background: rgba(42,61,100,0.1); color: #2A3D64; }

/* Result items */
.search-result {
  padding: 18px 0;
  border-bottom: 1px solid #f4f3f0;
}

.search-result:last-child {
  border-bottom: none;
}

.search-result-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.search-result h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 0 0 6px;
  line-height: 1.35;
  font-family: 'Figtree', sans-serif;
}

.search-result h3 a {
  text-decoration: none;
  color: inherit;
}

.search-result h3 a:hover {
  color: #007BA7;
}

.search-result p {
  font-size: 13px;
  color: #888;
  line-height: 1.6;
  margin: 0 0 6px;
  font-family: 'Figtree', sans-serif;
}

.search-result-meta {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-result-url {
  font-size: 12px;
  color: #ccc;
  font-family: monospace;
}

.search-result-date {
  font-size: 11px;
  color: #ccc;
  font-family: 'Figtree', sans-serif;
}

/* No results fallback */
.search-no-results {
  text-align: center;
  padding: 40px 0 20px;
}

.search-no-results p {
  font-size: 14px;
  color: #888;
  line-height: 1.6;
  margin-bottom: 20px;
  font-family: 'Figtree', sans-serif;
}

.search-no-results-links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.search-no-results-links a {
  font-size: 13px;
  font-weight: 600;
  color: #007BA7;
  text-decoration: none;
  font-family: 'Figtree', sans-serif;
}

.search-no-results-links a:hover {
  text-decoration: underline;
}

/* Pagination — must override theme defaults */
.search-results-wrap .nav-links {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  padding-top: 24px;
}

.search-results-wrap .nav-links a,
.search-results-wrap .nav-links span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-family: 'Figtree', sans-serif !important;
  transition: all 0.15s ease !important;
  padding: 0 10px !important;
  /* Default: unselected — no bg, subtle border, gray text */
  background: transparent !important;
  color: #999 !important;
  border: 1px solid #e0e0e0 !important;
}

.search-results-wrap .nav-links span.current {
  background: #1B2A4A !important;
  color: #fff !important;
  border-color: #1B2A4A !important;
}

.search-results-wrap .nav-links a:hover {
  border-color: #ccc !important;
  color: #1B2A4A !important;
}

.search-results-wrap .nav-links .prev,
.search-results-wrap .nav-links .next {
  width: auto !important;
  padding: 0 14px !important;
}


/* ══════════════════════════════════════════════
   404 PAGE
   ══════════════════════════════════════════════ */

.hero-404 {
  text-align: center;
  padding-bottom: 80px !important;
}

.hero-404 .page-hero-inner {
  padding-top: 56px;
}

.ghost-404 {
  font-size: 120px;
  font-weight: 800;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  margin-bottom: -20px;
  letter-spacing: -4px;
  font-family: 'Figtree', sans-serif;
}

.hero-404 .page-hero-title {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
}

.hero-404-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 16px;
  font-family: 'Figtree', sans-serif;
}

/* White card */
.error-404-wrap {
  position: relative;
  z-index: 2;
}

.content-404 {
  max-width: 640px;
  margin: -32px auto 48px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
  padding: 36px 32px 48px;
  position: relative;
  z-index: 2;
}

/* Search section */
.search-404 label {
  font-size: 13px;
  font-weight: 700;
  color: #1B2A4A;
  display: block;
  margin-bottom: 8px;
  font-family: 'Figtree', sans-serif;
}

.search-404-form {
  display: flex;
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.search-404-form input[type="search"] {
  flex: 1;
  padding: 12px 20px;
  border: none;
  font-size: 14px;
  font-family: 'Figtree', sans-serif;
  background: #fafafa;
  outline: none;
  color: #444;
}

.search-404-form input[type="search"]::placeholder {
  color: #bbb;
}

.search-404-form button {
  background: #007BA7;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.search-404-form button:hover {
  background: #006890;
}

/* "or explore" divider */
.or-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
}

.or-line {
  flex: 1;
  height: 1px;
  background: var(--aav-border-warm);
}

.or-divider span {
  font-size: 12px;
  color: #ccc;
  font-weight: 600;
  font-family: 'Figtree', sans-serif;
  white-space: nowrap;
}

/* Quick-links grid */
.quick-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--aav-border-warm);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-link:hover {
  border-color: #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.quick-link-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.quick-link-label {
  font-size: 14px;
  font-weight: 600;
  color: #1B2A4A;
  font-family: 'Figtree', sans-serif;
}

.quick-link-arrow {
  font-size: 14px;
  color: #ccc;
  margin-left: auto;
}

/* Bottom links */
.bottom-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid #f0eeea;
}

.bottom-links a {
  font-size: 13px;
  font-weight: 600;
  color: #007BA7;
  text-decoration: none;
  font-family: 'Figtree', sans-serif;
}

.bottom-links a:hover {
  text-decoration: underline;
}


/* ══════════════════════════════════════════════
   BLOG ARCHIVE
   ══════════════════════════════════════════════ */

/* Ember gradient — explicit */
.archive-hero {
  background: var(--aav-ember-gradient) !important;
  position: relative;
}

body.archive section.page-hero,
body.category section.page-hero,
section.page-hero.archive-hero {
  margin: 0 !important;
  padding-top: 100px !important;
}

.archive-hero .page-hero-inner {
  text-align: left !important;
  padding-bottom: 60px;
}

/* Neutralize theme .container — .aav-hero-inner on .page-hero-inner handles containment */
.archive-hero .container,
.search-hero .container {
  max-width: none;
  padding: 0;
}

.archive-hero .hero-breadcrumbs {
  margin-bottom: 12px;
  position: relative;
  z-index: 3;
  font-size: 12px;
  font-family: 'Figtree', sans-serif;
}

.archive-hero .hero-breadcrumbs a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 12px;
  font-family: 'Figtree', sans-serif;
}

.archive-hero .hero-breadcrumbs a:hover {
  color: rgba(255,255,255,0.85);
}

.archive-hero .hero-breadcrumbs .breadcrumb-sep {
  color: rgba(255,255,255,0.35);
  margin: 0 6px;
}

.archive-hero .hero-breadcrumbs .breadcrumb-current {
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-family: 'Figtree', sans-serif;
}

.archive-hero .page-hero-title {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.archive-hero-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  max-width: 520px;
  margin: 0;
  font-family: 'Figtree', sans-serif;
}

/* White card wrap */
.blog-archive-wrap {
  margin-top: -32px;
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
  padding: 28px 32px 36px;
}

/* Active filter chips */
.active-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  align-items: center;
}

.chip {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,123,167,0.08);
  color: #007BA7;
  text-decoration: none;
  font-family: 'Figtree', sans-serif;
  transition: background 0.15s ease;
}

.chip:hover {
  background: rgba(0,123,167,0.15);
}

.chip .chip-x {
  font-size: 14px;
  line-height: 1;
}

.chip-clear {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-decoration: underline;
  margin-left: 8px;
  font-family: 'Figtree', sans-serif;
}

/* Layout: sidebar + grid */
.archive-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* Sidebar */
.blog-archive-sidebar {
  width: 240px;
  flex-shrink: 0;
}

.sidebar-inner {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--aav-border-warm);
  position: sticky;
  top: 12px;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.sidebar-header span {
  font-size: 14px;
  font-weight: 700;
  color: #1B2A4A;
  font-family: 'Figtree', sans-serif;
}

.clear-all {
  font-size: 11px;
  color: #007BA7;
  font-weight: 600;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Figtree', sans-serif;
}

/* Filter groups */
.filter-group {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f0eeea;
}

.filter-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.filter-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
}

.filter-group-header span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #999;
  font-family: 'Figtree', sans-serif;
}

.filter-chevron {
  transition: transform 0.2s ease;
}

.filter-group.collapsed .filter-chevron {
  transform: rotate(-90deg);
}

.filter-group.collapsed .filter-group-body {
  display: none;
}

/* SCROLLABLE filter bodies */
.filter-group-body {
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
  padding-right: 20px;
}

.filter-group-body::-webkit-scrollbar {
  width: 4px;
}

.filter-group-body::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}

/* Filter items — link-based for server-side filtering */
.filter-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
  text-decoration: none;
}

.filter-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.filter-checkbox.checked {
  background: #007BA7;
  border-color: transparent;
}

.filter-name {
  font-size: 13px;
  color: #666;
  font-weight: 400;
  flex: 1;
  line-height: 1.3;
  font-family: 'Figtree', sans-serif;
}

.filter-name.active {
  color: #1B2A4A;
  font-weight: 600;
}

.filter-count {
  font-size: 11px;
  color: #ccc;
  font-weight: 500;
  font-family: 'Figtree', sans-serif;
}

/* Grid area */
.blog-archive-grid-area {
  flex: 1;
  min-width: 0;
}

.archive-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.result-count {
  font-size: 13px;
  color: #999;
  font-family: 'Figtree', sans-serif;
}

.sort-form {
  display: inline;
}

.sort-select {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 6px 18px 6px 12px;
  font-size: 12px;
  color: #666;
  font-family: 'Figtree', sans-serif;
  background: #fff;
  cursor: pointer;
}

/* Card grid — fixed-width cards, 3→2→1 collapse */
.blog-archive-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.archive-card-item {
  width: 280px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--aav-border-warm);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: block;
}

.archive-card-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.archive-card-image {
  height: 150px;
  overflow: hidden;
}

.archive-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0eee8 0%, var(--aav-border-warm) 100%);
}

.archive-card-content {
  padding: 16px 18px;
}

.archive-card-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: 'Figtree', sans-serif;
}

.archive-card-content h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 0 0 8px !important;
  line-height: 1.35;
  font-family: 'Figtree', sans-serif;
}

.archive-card-content p {
  font-size: 13px !important;
  color: #888 !important;
  line-height: 1.6 !important;
  margin: 0 0 10px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Figtree', sans-serif !important;
}

.archive-card-date {
  font-size: 12px;
  color: #bbb;
  font-family: 'Figtree', sans-serif;
}

/* No results */
.archive-no-results {
  width: 100%;
  text-align: center;
  padding: 40px 0;
}

.archive-no-results p {
  font-size: 14px !important;
  color: #888 !important;
}

.archive-no-results a {
  color: #007BA7;
  font-weight: 600;
}

/* Pagination — override base theme bar/background */
.archive-pagination {
  padding-top: 24px;
  background: transparent !important;
}

.archive-pagination ul,
.archive-pagination nav,
.archive-pagination .nav-links,
.archive-pagination .page-numbers,
.archive-pagination ul.page-numbers {
  background: transparent !important;
}

.archive-pagination ul {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.archive-pagination li {
  list-style: none !important;
}

.archive-pagination li a,
.archive-pagination li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-family: 'Figtree', sans-serif !important;
  transition: all 0.15s ease !important;
  padding: 0 10px !important;
  background: transparent !important;
  color: #999 !important;
  border: 1px solid #e0e0e0 !important;
}

.archive-pagination li span.current {
  background: #1B2A4A !important;
  color: #fff !important;
  border-color: #1B2A4A !important;
}

.archive-pagination li a:hover {
  border-color: #ccc !important;
  color: #1B2A4A !important;
}


/* ══════════════════════════════════════════════
   FAQ HUB RESKIN — T0 / T1 / T2
   Session 6 visual treatment: ember heroes, F4 tiles,
   FAQCard component, putty backgrounds, Figtree
   ══════════════════════════════════════════════ */

/* --- Wrapper + main padding kill for FAQ pages --- */
.wrapper:has(.faq-hub-hero),
.wrapper:has(.faq-single-hero) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #f8f6f5 !important;
}

/* Kill Elementor/theme main padding that could push heroes down */
main:has(.faq-hub-wrap),
main:has(.faq-single-wrap) {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Shared hero padding — symmetrical breadcrumb spacing (ALL tiers) ---
   Goal: breadcrumb/pill row feels vertically centered in the visible hero band.
   padding-bottom = 40px (below content → accent bar).
   padding-top = 40px (symmetric visible space above breadcrumbs) + 90px (sticky header clearance) = 130px.
   One rule, both heroes — no per-tier overrides. */
.faq-hub-hero,
.faq-single-hero {
  padding: 100px 0 40px !important;
}

/* --- T0 + T1: Hub Hero --- */
/* Full-bleed band: break out of any width-constrained parent.
   Standard CSS breakout: 100vw + negative margin centers on viewport.
   Content constrained to same max-width + padding as header/footer. */
.faq-hub-hero {
  background: var(--aav-ember-gradient) !important;
  position: relative;
  /* Breakout: force edge-to-edge regardless of parent width */
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

/* Hero inner content — containment now handled by .aav-hero-inner wrapper.
   Per-element max-width/padding removed to avoid double-padding. */

/* --- Breadcrumbs — site-wide standard (13px, grey current-page) --- */
.faq-breadcrumbs {
  font-size: 13px !important;
  font-family: 'Figtree', sans-serif !important;
}

.faq-breadcrumbs a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
}

.faq-breadcrumbs a:hover {
  color: rgba(255,255,255,0.85) !important;
}

/* .faq-breadcrumb-sep — REMOVED: now handled by universal .breadcrumb-sep */

/* Current page (span, not link) */
.faq-breadcrumbs > span:last-child {
  color: rgba(255,255,255,0.75) !important;
}

/* On non-hero contexts (putty bg), current page uses darker grey */
.faq-single-content-area .faq-breadcrumbs > span:last-child {
  color: #bbb !important;
}

.faq-hub-hero .faq-breadcrumbs {
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 16px !important;
}

.faq-hub-hero .faq-breadcrumbs a {
  color: rgba(255,255,255,0.55) !important;
}

.faq-hub-hero .faq-breadcrumbs a:hover {
  color: rgba(255,255,255,0.85) !important;
}

/* .faq-hub-hero .faq-breadcrumb-sep — REMOVED: now handled by universal .breadcrumb-sep */

.faq-hub-hero .faq-hub-header {
  margin-bottom: 0 !important;
}

.faq-hub-hero .faq-hub-header h1 {
  font-size: 34px;
  font-weight: 800;
  color: #FFFFFF !important;
  letter-spacing: -0.3px;
  margin-bottom: 8px !important;
}

.faq-hub-hero .faq-hub-header p {
  font-size: 15px !important;
  color: rgba(255,255,255,0.5) !important;
  max-width: 560px !important;
}

/* Accent bar at bottom of hero */
.faq-hub-accent-bar {
  height: 4px;
  background: #007BA7;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Per-vertical accent bar colors (T1) */
.faq-hub-accent-bar[data-vertical="college"]    { background: #3A9CC7; }
.faq-hub-accent-bar[data-vertical="law"]        { background: #9B6B7A; }
.faq-hub-accent-bar[data-vertical="mba"]        { background: #7B6BA5; }
.faq-hub-accent-bar[data-vertical="medical"],
.faq-hub-accent-bar[data-vertical="med"]        { background: #5A7B96; }
.faq-hub-accent-bar[data-vertical="graduate"]   { background: #4A9B8E; }

/* ── FAQ Hub T0 tile container (migrated from inline style, Task 2.2) ── */
.faq-hub-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 48px;
  padding-top: 40px;
  padding-bottom: 30px;
  box-sizing: border-box;
}

/* --- Hub wrap — force full-width even if parent constrains it.
   Content sections below hero get their own max-width constraint. --- */
.faq-hub-wrap {
  background: #f8f6f5 !important;
  padding: 0 0 56px 0 !important;  /* 56px bottom = breathing room before footer */
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  overflow-x: hidden !important;  /* prevent horizontal scrollbar from 100vw hero breakout */
}

/* Inner content below hero — constrained to same width as header/footer.
   padding: 0 48px matches footer .footer-inner and mega-panel-grid.
   CTA is deliberately EXCLUDED — it gets positioning from the base
   .faq-cta-section rule (margin-left calc + max-width 740px), not from
   this 1270px containment. Same pattern as T2. */
.faq-hub-wrap .faq-subcategory-pills,
.faq-hub-wrap .faq-card-section {
  max-width: 1270px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

/* Spacing between hero bottom and first content section */
.faq-hub-wrap .faq-subcategory-pills {
  padding-top: 40px !important;
}

/* CTA "Still have questions?" band — NOT full-bleed.
   Left-aligned within content-width zone.
   margin-top provides separation from the card/tile grid above.
   margin-left and max-width inherited from base .faq-cta-section rule —
   no padding overrides here so T0/T1 CTA matches T2 pixel-for-pixel. */
.faq-hub-wrap .faq-cta-section {
  margin-top: 20px !important;
}

/* --- T1: Filter Pills --- */
.faq-subcategory-pills {
  gap: 8px !important;
  margin-bottom: 28px !important;
  padding-top: 8px !important;
}

.faq-pill {
  padding: 7px 16px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: #FFFFFF !important;
  color: #1B2A4A !important;
  border: 1px solid #ddd !important;
  transition: all 0.2s ease !important;
}

.faq-pill:hover {
  background: #f0eeeb !important;
  color: #1B2A4A !important;
  border-color: #ccc !important;
}

.faq-pill.active {
  background: #1B2A4A !important;
  color: #FFFFFF !important;
  border-color: #1B2A4A !important;
}

.faq-pill-count {
  opacity: 0.7 !important;
  font-weight: 400 !important;
}

/* --- T1: Section Headers --- */
.faq-card-section-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #007BA7 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  display: block !important;
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
}

/* Per-vertical section header color (T1 pages) */
.faq-hub-header[data-vertical="college"] ~ .faq-card-section .faq-card-section-title,
.faq-hub-header[data-vertical="college"] ~ div > .faq-card-section-title {
  color: #3A9CC7 !important;
}
.faq-hub-header[data-vertical="law"] ~ .faq-card-section .faq-card-section-title,
.faq-hub-header[data-vertical="law"] ~ div > .faq-card-section-title {
  color: #9B6B7A !important;
}
.faq-hub-header[data-vertical="mba"] ~ .faq-card-section .faq-card-section-title,
.faq-hub-header[data-vertical="mba"] ~ div > .faq-card-section-title {
  color: #7B6BA5 !important;
}
.faq-hub-header[data-vertical="medical"] ~ .faq-card-section .faq-card-section-title,
.faq-hub-header[data-vertical="med"] ~ .faq-card-section .faq-card-section-title,
.faq-hub-header[data-vertical="medical"] ~ div > .faq-card-section-title,
.faq-hub-header[data-vertical="med"] ~ div > .faq-card-section-title {
  color: #5A7B96 !important;
}
.faq-hub-header[data-vertical="graduate"] ~ .faq-card-section .faq-card-section-title,
.faq-hub-header[data-vertical="graduate"] ~ div > .faq-card-section-title {
  color: #4A9B8E !important;
}

/* --- FAQCard Component (T1 grid + T2 related) --- */
/* Fixed-width cards that don't stretch; cascade to new row when narrow */
.faq-card-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 32px !important;
}

.faq-card {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 22px 20px 0 !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  width: 280px !important;
  flex-shrink: 0 !important;
}

.faq-card:hover {
  background: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
}

.faq-card-pill {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #007BA7 !important;
  background: rgba(0,123,167,0.06) !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 3px 10px !important;
  margin-bottom: 10px !important;
}

.faq-card:hover .faq-card-pill {
  color: #007BA7 !important;
  background: rgba(0,123,167,0.06) !important;
}

.faq-card-question {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1B2A4A !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
  min-height: auto !important;
  -webkit-line-clamp: unset !important;
}

.faq-card:hover .faq-card-question {
  color: #1B2A4A !important;
}

.faq-card-excerpt {
  font-size: 13px !important;
  color: rgba(27,42,74,0.5) !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  min-height: auto !important;
  -webkit-line-clamp: unset !important;
}

.faq-card:hover .faq-card-excerpt {
  color: rgba(27,42,74,0.5) !important;
}

/* Footer band — extends to card edges via negative margins */
.faq-card-readmore {
  display: block !important;
  margin: auto -20px 0 !important;
  padding: 10px 20px !important;
  border-top: 1px solid #f0eeeb !important;
  background: #fafaf9 !important;
  border-radius: 0 0 10px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #aaa !important;
}

.faq-card:hover .faq-card-readmore {
  color: #007BA7 !important;
  background: #f5f3f0 !important;
}

/* --- CTA Section Override (navy) --- */
/* 740px navy box left-aligned with breadcrumb/H1 — matches T2 reading width.
   margin-left calc aligns to same left edge as 1270px/48px content zone.
   calc(50% - 587px) = (parent_width - 1270px)/2 + 48px.
   max() ensures 48px minimum on narrow viewports.
   This base rule is the single source of truth for CTA on ALL tiers (T0/T1/T2). */
.faq-cta-section {
  background: #1B2A4A !important;
  border-radius: 10px !important;
  max-width: 740px !important;
  margin-left: max(48px, calc(50% - 587px)) !important;
  margin-right: auto !important;
}

/* Type C CTA — routing pages (hub, FAQ hub). Border on button/pill only, not outer box. */
.faq-cta-section.cta-type-c .faq-cta-toggle {
  border: 3px solid #4db8cc !important;
  border-radius: 2.389rem;
  padding: 10px 28px;
}

/* CTA inner layout — universal base.
   These rules provide the flex row, text colors, and form toggle for any template
   that reuses the .faq-cta-section markup. faq-hub.css / faq-single.css load later
   with higher specificity and override as needed for FAQ-specific contexts. */
.faq-cta-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.faq-cta-text {
  flex: 1;
  min-width: 0;
}

.faq-cta-text h2 {
  color: #FFFFFF;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
}

.faq-cta-text p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

.faq-cta-action {
  flex-shrink: 0;
}

/* ── CTA fallback text (migrated from inline, Task 2.3/2.4) ──
   Appears when form_link is empty — FAQ single, deadlines, blog single. */
.cta-fallback-text {
  color: rgba(255,255,255,0.6);
  font-size: 14px;  /* was 0.85rem (=17px with REM bomb) on FAQ/deadlines — fixed to 14px */
}
.cta-fallback-link {
  color: #00A7FF;
}
.cta-fallback-link--blog {
  color: #3A9CC7;
}

/* CTA form — hidden by default, visible when JS adds .open class.
   Universal base — any template reusing the CTA markup gets this behavior. */
.faq-cta-form-wrap {
  display: none;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.faq-cta-form-wrap.open {
  display: block;
}

.faq-cta-intro {
  display: none;
}

/* CTA form accordion — dark bg matches CTA box exactly.
   Formstack injects its own backgrounds on .fsBody/.fsForm — override them. */
.faq-cta-form-wrap {
  background: #1B2A4A !important;
}

.faq-cta-form-wrap .fsBody,
.faq-cta-form-wrap form,
.faq-cta-form-wrap .fsForm,
.faq-cta-form-wrap .fsPagination {
  background: #1B2A4A !important;
  background-color: #1B2A4A !important;
}

/* Kill Formstack's built-in spacing that stacks with wrapper padding.
   Root cause: .faq-cta-form-wrap has padding: 20px (all sides from theme/default),
   AND the inner form element also has padding: 20px (Formstack default).
   Together they create ~60px dead space above the privacy notice.
   Fix: zero out all internal spacing, then control entirely from the wrapper.
   Target stable Formstack class names only — NOT hashed styled-components names. */
.faq-cta-form-wrap .fsBody,
.faq-cta-form-wrap .fsForm,
.faq-cta-form-wrap .fsPage {
  padding: 0 !important;
  margin: 0 !important;
}

/* Zero the form element's own padding (Formstack sets padding: 20px) */
.faq-cta-form-wrap form,
.faq-cta-form-wrap form.fsForm {
  padding: 0 !important;
  margin: 0 !important;
}

/* Also catch Formstack's pagination wrapper */
.faq-cta-form-wrap .fsPagination {
  padding: 0 !important;
  margin: 0 !important;
}

/* Three-layer Formstack styled-components fix (proven on ADO/MBX).
   Layer 1: StyledFormBody wrapper (.dteSOD etc.) — has massive padding-top.
   Layer 2: InnerFormBody wrapper — has inset padding.
   Layer 3: Bootstrap .pt-5 utility class baked into PHP markup (~3rem).
   Attribute selectors [class*="..."] survive Formstack's hashed class name changes. */
.faq-cta-form-wrap [class*="StyledFormBody"],
.faq-cta-form-wrap .fsBody {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: stretch !important;
}

.faq-cta-form-wrap [class*="InnerFormBody"] {
  padding: 0 !important;
}

.faq-cta-form-wrap .pt-5 {
  padding-top: 0.5rem !important;
}

/* ── Formstack visual overrides (dark background context) ─────
   Lifted from faq-single.css so the CTA block gets identical
   form styling on ANY page, not just FAQ single pages.
   Originals retained in faq-single.css for now (Phase B cleanup). */

/* Labels */
.faq-cta-form-wrap .fsBody .fsLabel {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Text inputs, selects, textareas */
.faq-cta-form-wrap .fsBody input[type="text"],
.faq-cta-form-wrap .fsBody input[type="email"],
.faq-cta-form-wrap .fsBody textarea,
.faq-cta-form-wrap .fsBody select {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  border-radius: 0.25rem !important;
}

/* Focus states */
.faq-cta-form-wrap .fsBody input[type="text"]:focus,
.faq-cta-form-wrap .fsBody input[type="email"]:focus,
.faq-cta-form-wrap .fsBody textarea:focus,
.faq-cta-form-wrap .fsBody select:focus {
  border-color: #00A7FF !important;
  outline: none !important;
}

/* Notes, privacy disclaimer, supporting text */
.faq-cta-form-wrap .fsBody .fsSupporting,
.faq-cta-form-wrap .fsBody .fsFieldNote,
.faq-cta-form-wrap .fsBody .fsNote,
.faq-cta-form-wrap .fsBody .fsSectionText,
.faq-cta-form-wrap .fsBody p {
  color: rgba(255, 255, 255, 0.6) !important;
  background: #00264C !important;
}

/* Formstack Tracking Notice — override styled-components bg */
.faq-cta-form-wrap .field-auto-capture__message,
.faq-cta-form-wrap .field-auto-capture__message p,
.faq-cta-form-wrap .field-auto-capture__message strong {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Submit button */
.faq-cta-form-wrap .fsSubmitButton {
  background: linear-gradient(135deg, #3A7CA5 0%, #2A5F80 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 0.65rem 1.75rem !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
}

.faq-cta-form-wrap .fsSubmitButton:hover {
  background: linear-gradient(135deg, #0099ee 0%, #006bb8 100%) !important;
  color: #FFFFFF !important;
}

/* Checkbox — nuclear override: kill styled-components overlay, solid fill only */
.faq-cta-form-wrap .fsBody input[type="checkbox"],
.faq-cta-form-wrap [class*="StyledCheckbox"] input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 3px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  place-content: unset !important;
}

/* Kill pseudo-elements on unchecked state */
.faq-cta-form-wrap .fsBody input[type="checkbox"]::before,
.faq-cta-form-wrap .fsBody input[type="checkbox"]::after,
.faq-cta-form-wrap [class*="StyledCheckbox"]::before,
.faq-cta-form-wrap [class*="StyledCheckbox"]::after {
  display: none !important;
  content: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* Checked state — solid blue fill, no checkmark */
.faq-cta-form-wrap .fsBody input[type="checkbox"]:checked,
.faq-cta-form-wrap [class*="StyledCheckbox"] input[type="checkbox"]:checked {
  background: #00A7FF !important;
  background-image: none !important;
  border-color: #00A7FF !important;
}

/* Kill pseudo-elements on checked state (Formstack re-injects these) */
.faq-cta-form-wrap .fsBody input[type="checkbox"]:checked::before,
.faq-cta-form-wrap .fsBody input[type="checkbox"]:checked::after,
.faq-cta-form-wrap [class*="StyledCheckbox"] input:checked ~ *,
.faq-cta-form-wrap [class*="StyledCheckbox"]:has(input:checked)::before,
.faq-cta-form-wrap [class*="StyledCheckbox"]:has(input:checked)::after {
  display: none !important;
  content: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* Intro paragraph ("Note: Your privacy...") — left-aligned, italic, tight margins.
   The privacy notice is NOT our custom <p> — it's Formstack's built-in tracking notice:
   p.TrackingNotice__StyledNoticeText.gYnVlK.field-auto-capture_message__text
   Formstack's .gYnVlK sets text-align: center. We override with stable selectors:
   .field-auto-capture_message__text (BEM, stable) + [class*="StyledNoticeText"] (safety net). */
.faq-cta-form-wrap .faq-cta-intro,
.faq-cta-form-wrap p.faq-cta-intro,
.faq-cta-form-wrap .field-auto-capture_message__text,
.faq-cta-form-wrap [class*="StyledNoticeText"] {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  font-style: italic !important;
}

/* Formstack checkbox fix — first checkbox gets flex-shrunk by long label text.
   Parent label is display:flex, so the input needs flex-shrink: 0 to hold its size.
   min-width/min-height enforce the visual size. margin-right adds breathing room. */
.faq-cta-form-wrap input[type="checkbox"] {
  min-width: 16px !important;
  min-height: 16px !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

/* ============================================
   CTA FORM POLISH — checkbox label alignment (checkbox ONLY, not radio)
   Added v3.5.4
   ============================================ */

/* Pin checkbox and text to top of flex container instead of centering.
   :has() scopes to checkbox labels only — radio labels stay centered. */
.faq-cta-form-wrap .fsOptionLabel:has(input[type="checkbox"]) {
  align-items: flex-start !important;
}

/* Tighten line-height on the checkbox label text span only.
   Formstack sets line-height: calc(26px) via styled-components on 13px text = 2x.
   18px = ~1.38x, a standard comfortable reading line-height for small text. */
.faq-cta-form-wrap .fsOptionLabel:has(input[type="checkbox"]) > span {
  line-height: 18px !important;
}

/* Checkbox vertical alignment — zero margin (flex-start handles it) */
.faq-cta-form-wrap .fsOptionLabel input[type="checkbox"] {
  margin-top: 0 !important;
}

/* Radio base — nudge up 1px to align with label text baseline.
   box-shadow/outline kill + checked color are in inline <style> in cta.php
   (must render AFTER Formstack's styled-components to win cascade). */
.faq-cta-form-wrap input[type="radio"] {
  margin-top: -1px !important;
}

/* Controlled spacing on outermost wrapper ONLY.
   All internal Formstack spacing is zeroed above; this is the single source.
   0 top (gap was coming from this — not Formstack), 20px sides/bottom. */
.faq-cta-form-wrap {
  padding: 0 32px 20px 32px !important;
  border-radius: 0 0 10px 10px;
}

/* Kill any bottom margin on the CTA header row (.faq-cta-inner)
   that pushes the form wrap down, creating a gap above the privacy note. */
.faq-cta-inner {
  margin-bottom: 0 !important;
  padding: 28px 32px;
}

/* CTA button — subtle navy gradient per mockup (not bright blue) */
.faq-cta-toggle {
  font-family: 'Figtree', sans-serif !important;
  background: linear-gradient(135deg, #3A7CA5 0%, #2A5F80 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 12px 32px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
}

.faq-cta-toggle:hover {
  background: linear-gradient(135deg, #4A8CB5 0%, #356F90 100%) !important;
  color: #FFFFFF !important;
}

/* Formstack submit — match the subtle CTA gradient (not aggressive blue).
   High-specificity selectors to beat Formstack's styled-components. */
.faq-cta-form-wrap .fsSubmitButton,
.faq-cta-form-wrap .fsBody form .fsSubmitButton,
.faq-cta-form-wrap button.fsSubmitButton,
button[id^="fsSubmitButton"] {
  font-family: 'Figtree', sans-serif !important;
  font-size: 14px !important;
  background: linear-gradient(135deg, #3A7CA5 0%, #2A5F80 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  border-radius: 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
}

.faq-cta-form-wrap .fsSubmitButton:hover,
.faq-cta-form-wrap .fsBody form .fsSubmitButton:hover,
.faq-cta-form-wrap button.fsSubmitButton:hover,
button[id^="fsSubmitButton"]:hover {
  background: linear-gradient(135deg, #4A8CB5 0%, #356F90 100%) !important;
  color: #FFFFFF !important;
}

/* --- T2: Single FAQ Hero (compact) --- */
/* Full-bleed band: same breakout pattern as hub hero */
.faq-single-hero {
  background: var(--aav-ember-gradient) !important;
  /* padding inherited from shared .faq-hub-hero, .faq-single-hero rule above */
  position: relative;
  /* Breakout: force edge-to-edge regardless of parent width */
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

/* Hero inner content — containment now handled by .aav-hero-inner on .faq-nav-bar. */
.faq-single-hero .faq-nav-bar {
  margin-bottom: 0 !important;
}

/* Breadcrumbs inside T2 hero */
.faq-single-hero .faq-breadcrumbs {
  color: rgba(255,255,255,0.6) !important;
  margin-bottom: 0 !important;
}

.faq-single-hero .faq-breadcrumbs a {
  color: rgba(255,255,255,0.55) !important;
}

.faq-single-hero .faq-breadcrumbs a:hover {
  color: rgba(255,255,255,0.85) !important;
}

/* .faq-single-hero .faq-breadcrumb-sep — REMOVED: now handled by universal .breadcrumb-sep */

/* Category dropdown pill — frosted glass */
.faq-single-hero .faq-siblings-toggle {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 100px !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
}

.faq-single-hero .faq-siblings-toggle:hover {
  background: rgba(255,255,255,0.18) !important;
  color: #FFFFFF !important;
}

/* Style F caret SVG */
.faq-siblings-caret {
  width: 12px;
  height: 12px;
  margin-left: 4px;
  transition: transform 0.25s ease;
  opacity: 0.7;
  stroke: rgba(255,255,255,0.7);
}

.faq-siblings-dropdown.open .faq-siblings-caret {
  transform: rotate(180deg);
}

/* Dropdown panel — navy */
.faq-single-hero .faq-siblings-panel {
  background: #1B2A4A !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
  min-width: 440px !important;
  max-width: 440px !important;
  max-height: 340px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

.faq-single-hero .faq-siblings-panel a {
  padding: 14px 20px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.45) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  transition: all 0.15s !important;
}

.faq-single-hero .faq-siblings-panel a:last-child {
  border-bottom: none !important;
}

.faq-single-hero .faq-siblings-panel a:hover {
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.08) !important;
}

.faq-single-hero .faq-siblings-panel a.current {
  color: #FFFFFF !important;
  background: rgba(0,123,167,0.2) !important;
}

/* --- T2: Content Area --- */
/* Content sits within the same 1270px/48px container as hero breadcrumbs/H1,
   then capped at 740px reading width, left-aligned within that zone. */
.faq-single-content-area {
  background: #f8f6f5;
  max-width: 1270px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 40px 48px 0 48px !important;
  box-sizing: border-box !important;
}

/* Reading width cap on the inner content — !important required to beat
   the base .faq-single-content rule's max-width override below. */
.faq-single-content-area .faq-single-title,
.faq-single-content-area .faq-single-content {
  max-width: 740px !important;
}

/* --- Single FAQ wrap — force full-width even if parent constrains it --- */
.faq-single-wrap {
  background: #f8f6f5 !important;
  padding: 0 0 56px 0 !important;  /* 56px bottom = breathing room before footer */
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  overflow-x: hidden !important;  /* prevent horizontal scrollbar from 100vw hero breakout */
}

/* Inner content below T2 hero — constrained to header/footer width.
   padding: 0 48px matches header/footer container pattern.
   Note: .faq-single-content-area handles its own containment above.
   CTA is deliberately EXCLUDED — it gets positioning from the base
   .faq-cta-section rule (margin-left calc), not from internal padding.
   This ensures T2 CTA is pixel-identical to T0/T1 CTA. */
.faq-single-wrap .faq-related,
.faq-single-wrap .faq-related-articles {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* Sections that need centering at content width */
.faq-single-wrap .faq-related,
.faq-single-wrap .faq-related-articles {
  max-width: 1270px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.faq-single-title {
  font-size: 34px;
  font-weight: 800;
  color: #1B2A4A;
  line-height: 1.3;
  margin-bottom: 28px !important;
}

.faq-single-content {
  font-size: 15px !important;
  color: #444 !important;
  line-height: 1.8 !important;
  /* max-width removed — the 740px cap is set by the more-specific
     .faq-single-content-area .faq-single-content rule above.
     If a theme rule constrains width below 740px, add a targeted
     override there instead of a blanket max-width: none here. */
}

.faq-single-content p {
  margin-bottom: 20px !important;
}

.faq-single-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1B2A4A;
}

.faq-single-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #2A3D64;
}

/* --- T2: Related Questions --- */
/* Putty bg to match page (not white) */
.faq-related {
  background: #f8f6f5 !important;
  padding: 40px 0 !important;
  margin: 0 !important;
}

.faq-related-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1B2A4A !important;
}

/* Related FAQ cards — fixed-width flex-wrap (not stretching grid) */
.faq-related-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
}

.faq-related-list .faq-card {
  flex: none !important;
  min-width: 0 !important;
  width: 280px !important;
}

/* Related cards on putty bg — white cards */
.faq-related .faq-card {
  background: #FFFFFF !important;
  border: 1px solid var(--aav-border-warm-light) !important;
}

/* Hide scroll arrow — not needed with grid layout */
.faq-related-scroll-arrow {
  display: none !important;
}

/* --- T2: Related Articles — putty bg to match page --- */
.faq-related-articles {
  background: #f8f6f5 !important;
  padding: 0 0 40px !important;
}

.faq-related-articles-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1B2A4A !important;
  margin-bottom: 16px !important;
}

/* Article tiles — fixed width, flex-wrap */
.faq-related-articles-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  overflow-x: visible !important;
}

.faq-article-tile {
  width: 220px !important;
  flex: none !important;
  background: #FFFFFF !important;
  border: 1px solid var(--aav-border-warm-light) !important;
  border-radius: 10px !important;
  scroll-snap-align: unset !important;
  /* Uniform card height: flex column with fixed tag zone + flexible body */
  display: flex !important;
  flex-direction: column !important;
  min-height: 160px !important;
}

.faq-article-tile:hover {
  background: #1B2A4A !important;
  border-color: #1B2A4A !important;
}
.faq-article-tile:hover .faq-article-tile-label {
  color: rgba(255,255,255,0.5) !important;
}
.faq-article-tile:hover .faq-article-tile-title {
  color: #FFFFFF !important;
}
.faq-article-tile:hover .faq-article-tile-meta {
  color: rgba(255,255,255,0.5) !important;
}

/* Tag/label zone — FIXED height so titles always start at same Y position across tiles.
   Uses height (not min-height) + overflow hidden to clip long tags.
   32px fits ~2 lines at 11px. Tags are supplementary metadata — clipping acceptable. */
.faq-article-tile-label {
  font-size: 11px !important;
  color: rgba(27, 42, 74, 0.55) !important;  /* dark navy at reduced opacity — subtle, not gray */
  font-style: italic !important;
  height: 32px !important;
  overflow: hidden !important;
  display: block !important;
}

/* Title zone — fills remaining space, titles top-aligned */
.faq-article-tile-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1B2A4A !important;
  flex: 1 !important;
}

.faq-article-tile-meta {
  font-size: 12px !important;
  color: #bbb !important;
}


/* ══════════════════════════════════════════════
   DEADLINES HUB RESKIN
   Ember hero, navy headers, card wrappers, putty
   background, Figtree typography.
   Real selectors from .as-deadline-* DOM structure.
   ══════════════════════════════════════════════ */

/* --- Wrapper + main padding kill (same pattern as FAQ hub) --- */
.wrapper:has(.deadlines-hub-hero) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #f8f6f5 !important;
}

main:has(.deadlines-hub-wrap) {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Deadlines hub wrap --- */
.deadlines-hub-wrap {
  background: #f8f6f5 !important;
  padding: 0 0 56px 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  overflow-x: hidden !important;
  font-family: 'Figtree', sans-serif !important;
}

/* Kill theme horizontal padding on the <article> wrapper — its children
   handle their own containment (1270px/48px). Only zero left/right so
   theme vertical spacing (if any) is preserved. */
.deadlines-hub-wrap article {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Ember Hero --- */
.deadlines-hub-hero {
  background: var(--aav-ember-gradient) !important;
  padding: 100px 0 16px !important;
  position: relative;
  /* Breakout: force edge-to-edge regardless of parent width */
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

/* Hero inner content — containment now handled by .aav-hero-inner wrapper.
   Per-element max-width/padding removed to avoid double-padding. */

/* --- Breadcrumbs --- */
.deadlines-breadcrumbs {
  font-size: 13px !important;
  font-family: 'Figtree', sans-serif !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  color: rgba(255,255,255,0.5) !important;
}

.deadlines-breadcrumbs a {
  color: #007BA7 !important;
  text-decoration: none !important;
}

.deadlines-breadcrumbs a:hover {
  color: #3A9CC7 !important;
}

/* .deadlines-breadcrumb-sep — REMOVED: now handled by universal .breadcrumb-sep */

/* --- Hero header (H1 + subtitle) --- */
.deadlines-hub-header {
  margin-bottom: 0 !important;
}

.deadlines-hub-header h1 {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: -0.3px !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.deadlines-hub-header p {
  font-size: 15px !important;
  color: rgba(255,255,255,0.5) !important;
  max-width: 560px !important;
  margin: 0 !important;
  padding: 5px 0 25px 0 !important;
  font-family: 'Figtree', sans-serif !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* --- Content containment below hero ---
   All content inside the_content() needs horizontal constraint.
   Targets the intro prose block and deadline main wrapper.
   CTA is NOT included — it uses the base .faq-cta-section positioning
   (max-width: 740px, margin-left: max(48px, ...)) directly. */
.deadlines-hub-wrap article > .article-block,
.deadlines-hub-wrap article > .wp-block-spacer,
.deadlines-hub-wrap .as-deadline-main-wrapper {
  max-width: 1270px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

/* --- Intro prose block (above tables) --- */
.deadlines-hub-wrap article > .article-block:first-child {
  padding-top: 40px !important;
  padding-bottom: 24px !important;
}

.deadlines-hub-wrap article > .article-block:first-child h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1B2A4A !important;
  font-family: 'Figtree', sans-serif !important;
  margin-bottom: 12px !important;
}

.deadlines-hub-wrap article > .article-block:first-child p {
  font-size: 15px !important;
  color: #444 !important;
  line-height: 1.8 !important;
  font-family: 'Figtree', sans-serif !important;
}

/* --- Filter wrapper (shortcode container for controls + cards) ---
   Kill any shortcode-injected padding so content aligns with
   the parent .as-deadline-main-wrapper's 48px containment. */
.as-deadline-filter-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Controls bar (checkbox + search) --- */
.as-deadline-checkbox-search-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}

.as-deadline-checkbox-search-wrapper label {
  font-size: 13px !important;
  color: #666 !important;
  font-family: 'Figtree', sans-serif !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#highlightDates {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #1B2A4A !important;
  border-radius: 3px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transform: none !important;
}

#deadlineSearch {
  width: 240px !important;
  min-width: 240px !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  font-size: 13px !important;
  background: #FFFFFF !important;
  font-family: 'Figtree', sans-serif !important;
}

/* --- Per-school card wrappers ---
   Each school is an <a class="as-deadline-box"> with flex children.
   Card treatment: white bg, rounded, shadowed. */
.as-deadline-box {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  border: 1px solid var(--aav-border-warm) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
  overflow-x: auto !important;
  margin-bottom: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Kill shortcode's internal borders on direct children —
   our card wrapper border handles the outer edge. */
.as-deadline-box > div {
  border: none !important;
}

/* --- Logo cell --- */
.as-deadline-img {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  background: #fcfbfa !important;
  border-right: 1px solid #ede9e6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.as-deadline-img img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  object-fit: contain !important;
}

/* --- School column (name + "School" label) ---
   Fixed width so deadline columns share remaining space equally. */
.as-school-wrapper {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

/* "SCHOOL" label — darker navy to anchor the row
   Same shortcode height:100% override as round headings. */
.as-school-wrapper > .as-dd-heading {
  background: #152236 !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  display: block !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* School name container — padding here (not on the H2 inside) so it
   matches .as-round-dd-cont structure exactly for vertical alignment. */
.as-school-name-cont {
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* School name */
.as-school-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1B2A4A !important;
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 0.5px !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Reset theme H2 styles — these are inside card rows, not page headings */
  line-height: 1.3 !important;
}

/* --- Round/deadline columns ---
   .as-deadline-round repeats for each deadline type.
   All share remaining width equally via flex: 1. */
.as-deadline-round {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
}

/* Round header — navy band
   Shortcode sets height:100% + min/max-height:20px on .as-dd-heading.
   In our column layout, height:100% creates circular dependency → 0 height.
   Override with auto to let content determine height. */
.as-round-heading {
  background: #1B2A4A !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* Last-round header gets blue tint overlay layered on navy */
.as-deadline-round:last-child .as-round-heading {
  background: linear-gradient(rgba(0,123,167,0.25), rgba(0,123,167,0.25)), #1B2A4A !important;
}

/* Date values
   Shortcode sets height:100% + width:50% on .as-round-dd-cont.
   In our column layout (parent .as-deadline-round is flex-direction:column),
   height:100% resolves to 0 (circular dependency — no definite parent height).
   Override both to auto so content dictates sizing. */
.as-round-dd-cont {
  font-size: 14px !important;
  font-family: 'Figtree', sans-serif !important;
  color: #888 !important;
  text-align: center !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  height: auto !important;
  width: auto !important;
  line-height: 1.3 !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Kill shortcode's 2em margin-top on round values — misaligns
   date text with school name in the same row. */
.as-round-value {
  margin-top: 0 !important;
}

/* Last-round date gets visible blue tint */
.as-deadline-round:last-child .as-round-dd-cont {
  background: rgba(0,123,167,0.08) !important;
}

/* --- Article section below tables ---
   Dual-width pattern (same as FAQ T2): wrapper stays at full container
   width (1270px/48px — inherited from line 3275 rule) so the border-top
   separator spans the same width as the deadline cards. Inner elements
   are capped at 740px reading width, left-aligned (no auto centering). */
.deadlines-hub-wrap .as-deadline-main-wrapper ~ .wp-block-spacer + .article-block,
.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block {
  /* Container width inherited from the shared containment rule (line 3275):
     max-width: 1270px, margin: 0 auto, padding: 0 48px.
     Do NOT override those — the separator needs the full width. */
  padding-top: 40px !important;
  border-top: 1px solid #e0ddd9 !important;
  margin-top: 24px !important;
}

/* Inner elements: 740px reading width, left-aligned */
.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block h2,
.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block h3,
.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block p,
.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block ul,
.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block ol,
.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block li {
  max-width: 740px !important;
}

.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1B2A4A !important;
  font-family: 'Figtree', sans-serif !important;
  margin-bottom: 16px !important;
}

.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1B2A4A !important;
  font-family: 'Figtree', sans-serif !important;
  margin-bottom: 8px !important;
}

.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block p,
.deadlines-hub-wrap .as-deadline-main-wrapper ~ .article-block li {
  font-size: 15px !important;
  color: #444 !important;
  line-height: 1.8 !important;
  font-family: 'Figtree', sans-serif !important;
}

/* --- Deadlines CTA ---
   Reuses .faq-cta-section component. Layout, collapse, toggle, and
   Formstack styling all come from faq-single.css (conditionally enqueued
   on deadlines pages in functions.php). Base .faq-cta-section rule
   (line 2716) handles max-width: 740px and left-alignment.
   Only margin-top needed here for separation from content above. */
.deadlines-hub-wrap .faq-cta-section {
  margin-top: 48px !important;
  padding: 32px 40px !important;
  max-width: 740px !important;
}

/* --- Deadline list wrapper ---
   Show ~7 cards on load, scroll for the rest.
   Each card ≈ ~85px (header 26px + data ~50px + 10px margin).
   7 cards ≈ 600px. Add some breathing room for the peek. */
.as-deadline-wrapper {
  font-family: 'Figtree', sans-serif !important;
  max-height: 710px !important;
  border: none !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  scrollbar-width: thin !important;
  scrollbar-color: #728FA4 #f0edea !important;
  padding-right: 8px !important;
  gap: 12px !important;
}

/* Webkit scrollbar styling for the deadline list */
.as-deadline-wrapper::-webkit-scrollbar {
  width: 6px;
}

.as-deadline-wrapper::-webkit-scrollbar-track {
  background: #f0edea;
  border-radius: 3px;
}

.as-deadline-wrapper::-webkit-scrollbar-thumb {
  background: #728FA4;
  border-radius: 3px;
}

.as-deadline-wrapper::-webkit-scrollbar-thumb:hover {
  background: #5a7a91;
}

/* Scroll fade — hints that more content exists below */
.deadlines-hub-wrap .as-deadline-main-wrapper {
  position: relative !important;
}
.deadlines-hub-wrap .as-deadline-main-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #f8f6f5);
  pointer-events: none;
  z-index: 3;
}

/* --- Hide theme page title (hero has its own H1) --- */
.deadlines-hub-wrap > article > .article-block:first-child h1:first-child {
  /* Theme page.php renders a bare H1 — hide it, hero handles title */
}

/* --- MBA+ horizontal scroll ---
   Keep the logo cell pinned during horizontal scroll on wide tables. */
.as-deadline-img {
  position: sticky !important;
  left: 0 !important;
  z-index: 2 !important;
}


/* ══════════════════════════════════════════════
   SMOOTH SCROLL
   ══════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}


/* ══════════════════════════════════════════════
   CONSULTATION PAGE
   Template: template-consultation.php
   JS: assets/js/aav-consultation.js
   Source of truth: aav-consultation-LOCKED.jsx
   ══════════════════════════════════════════════ */

/* ─── Wrap ─── */
.consultation-wrap {
  background: #f8f6f5;
}

/* ─── Ember Hero ─── */
.consultation-hero {
  position: relative;
  padding: 80px 0 64px;
  background: var(--aav-ember-gradient);
}

.consultation-hero-inner {
  max-width: 1270px;
  margin: 0 auto;
  /* padding handled by .aav-hero-inner */
}

/* Breadcrumbs */
.consultation-breadcrumbs {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.consultation-breadcrumbs a {
  color: #3A9CC7;
  text-decoration: none;
  cursor: pointer;
}
.consultation-breadcrumbs a:hover {
  text-decoration: underline;
}
/* .consultation-breadcrumb-sep — REMOVED: now handled by universal .breadcrumb-sep */

/* H1 */
.consultation-hero h1 {
  font-size: 34px;
  font-weight: 800;
  color: #fff !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.3px;
  font-family: 'Figtree', sans-serif;
}

/* Subtitle */
.consultation-hero-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin: 0;
  max-width: 520px;
  line-height: 1.6;
}

/* Blue accent bar at hero bottom */
.consultation-hero-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #007BA7;
}

/* ─── White Card (overlaps hero) ─── */
.consultation-card-wrap {
  padding: 0 48px;
  margin-top: -32px;
  position: relative;
  z-index: 2;
  max-width: 1270px;
  margin-left: auto;
  margin-right: auto;
  background: transparent;
}

.consultation-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
  padding: 28px 32px 36px;
}

/* ─── Step Headers (shared) ─── */
.consult-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.consult-step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Step 1 number — blue tint */
.consult-step-number-blue {
  background: rgba(0, 123, 167, 0.07);
  color: #007BA7;
}

.consult-step-label {
  font-size: 15px;
  font-weight: 700;
  color: #1B2A4A;
}

.consult-step-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 18px 36px;
  max-width: 660px;
}

/* ─── Step 1: Tile Grid ─── */
.consultation-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-left: 36px;
}

.consult-tile {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.consult-tile:hover,
.consult-tile.is-selected {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.consult-tile.is-selected {
  outline: 2px solid var(--tile-accent, #007BA7);
  outline-offset: 1px;
}

/* Navy top section — fixed height */
.consult-tile-top {
  background: #1B2A4A;
  padding: 36px 16px 28px;
  text-align: center;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.consult-tile-name {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.consult-tile-tagline {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

/* Accent CTA band */
.consult-tile-band {
  padding: 13px 16px;
  text-align: center;
  transition: filter 0.2s;
}

.consult-tile:hover .consult-tile-band {
  filter: brightness(1.1);
}

.consult-tile-band span {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.consult-tile-band .band-selected {
  display: none;
}

.consult-tile.is-selected .band-default {
  display: none;
}

.consult-tile.is-selected .band-selected {
  display: inline;
}

/* ─── Collapsed Pill Row ─── */
.consultation-pills {
  margin-bottom: 28px;
}

.pill-row {
  display: flex;
  gap: 8px;
  margin-left: 36px;
}

.consult-pill {
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--aav-border-warm);
  background: transparent;
  color: #ccc;
  transition: all 0.2s ease;
  font-family: 'Figtree', sans-serif;
}

.consult-pill.is-active {
  color: #fff;
  border: none;
}

/* ─── Step 2: Form Area ─── */
.consultation-step-2 .consult-step-description {
  margin-bottom: 20px;
}

/* Change button */
.consult-change-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 100px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  cursor: pointer;
  margin-left: auto;
  font-family: 'Figtree', sans-serif;
  transition: border-color 0.2s;
}

.consult-change-btn:hover {
  border-color: #bbb;
  color: #777;
}

/* Form card */
.consult-form-card {
  margin-left: 36px;
  max-width: 580px;
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  border: 1px solid var(--aav-border-warm);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Form card header — accent colored */
.consult-form-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0,123,167,0.15);
  color: #007BA7;
}

/* Formstack embed container */
.consult-formstack-embed {
  min-height: 200px;
}

/* Formstack overrides inside consultation form card */
.consult-form-card .fsBody .fsLabel {
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1B2A4A !important;
  margin-bottom: 5px !important;
}

.consult-form-card .fsBody input[type="text"],
.consult-form-card .fsBody input[type="email"],
.consult-form-card .fsBody input[type="tel"],
.consult-form-card .fsBody textarea,
.consult-form-card .fsBody select {
  font-family: 'Figtree', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  background: #fafafa !important;
}

.consult-form-card .fsBody textarea {
  min-height: 90px !important;
}

/* Submit button — accent colored pill */
.consult-form-card .fsBody .fsSubmitButton,
.consult-form-card .fsBody input[type="submit"],
.consult-form-card .fsBody button[type="submit"] {
  background: #007BA7 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 13px 32px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  font-family: 'Figtree', sans-serif !important;
  float: right !important;
}

/* Formstack form body spacing overrides */
.consult-form-card [class*="StyledFormBody"] {
  padding-top: 0 !important;
}

.consult-form-card [class*="InnerFormBody"] {
  padding: 0 !important;
}

/* Disclaimer text */
.consult-form-disclaimer {
  font-size: 11px;
  color: #bbb;
  text-align: center;
  margin: 14px 0 0 36px;
  max-width: 580px;
}

/* ─── CTA Band ─── */
.consultation-cta-band {
  background: #f8f6f5;
  padding: 28px 48px 36px;
  text-align: center;
}

.consultation-cta-band h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 0 0 6px !important;
  font-family: 'Figtree', sans-serif;
}

.consultation-cta-band p {
  font-size: 14px;
  color: rgba(27, 42, 74, 0.45);
  margin: 0;
}


/* ══════════════════════════════════════════════
   TEAM PAGE
   Template: page-team.php
   JS: assets/js/aav-team-modal.js
   Source of truth: aav-team-FINAL.jsx + CC-HANDOFF-TEAM-2e.md
   CORRECTION: No dot textures anywhere — flat gradients only.
   ══════════════════════════════════════════════ */

/* ─── Wrap ─── */
.team-page-wrap {
  background: #f8f6f5;
}

/* Kill ALL theme scroll/slide animations on team page */
.team-page-wrap *,
.team-page-wrap .section,
.team-page-wrap .section > * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
/* Re-enable intentional transitions/transforms on interactive elements */
.team-card {
  transition: all 0.25s ease !important;
  transform: translateY(0) !important;
}
.team-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
}
.team-modal-tab {
  transition: color 0.15s !important;
}
.team-modal-close {
  transition: background 0.2s !important;
}
.team-modal-cta {
  transition: filter 0.2s !important;
}

/* ─── Ember Hero ─── */
/* Team is NOT in the wrapper/main padding kill lists — theme provides natural
   clearance for the fixed header (same pattern as consultation page).
   margin-top pulls gradient behind header; padding-top matches so content
   starts at theme's natural offset. 80px/-80px pair = consultation parity. */
.team-hero {
  position: relative;
  padding: 80px 0 56px;
  background: var(--aav-ember-gradient);
}

.team-hero-inner {
  max-width: 1270px;
  margin: 0 auto;
  /* padding handled by .aav-hero-inner */
}

/* Breadcrumbs */
.team-breadcrumbs {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
  font-family: 'Figtree', sans-serif;
}
.team-breadcrumbs a {
  color: #3A9CC7;
  text-decoration: none;
}
.team-breadcrumbs a:hover {
  text-decoration: underline;
}
/* .team-breadcrumb-sep — REMOVED: now handled by universal .breadcrumb-sep */

/* H1 */
.team-hero h1 {
  font-size: 34px;
  font-weight: 800;
  color: #fff !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.3px;
  font-family: 'Figtree', sans-serif;
}

/* Subtitle */
.team-hero-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin: 0;
  max-width: 500px;
  line-height: 1.6;
}

/* Blue accent bar at hero bottom */
.team-hero-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #007BA7;
}

/* ─── White Card Container (overlaps hero -28px) ─── */
.team-card-wrap {
  padding: 0 48px;
  margin-top: -28px;
  position: relative;
  z-index: 2;
  max-width: 1270px;
  margin-left: auto;
  margin-right: auto;
}

.team-card-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
  padding: 32px 36px;
  margin-bottom: 48px;
}

/* ─── Card Grid ─── */
.team-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  max-width: 930px;
  margin: 0 auto;
}

/* ─── Team Card ─── */
.team-card {
  width: 290px;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid #eee;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  background: #fff;
}

.team-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

/* ─── Card Photo Area (220px, 3 modes) ─── */
.team-card-photo {
  height: 220px;
  position: relative;
  overflow: hidden;
}

/* Photo mode — gradient fallback behind real image */
.team-card-photo.photo-mode-photo {
  background: linear-gradient(145deg, rgba(27,42,74,0.09) 0%, var(--team-accent-22, rgba(58,156,199,0.13)) 100%);
}

/* Photo mode — real headshot */
.team-card-photo.photo-mode-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  position: relative;
  z-index: 1;
}

/* Photo mode — placeholder (no headshot yet) */
.team-card-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.team-card-photo-placeholder-box {
  width: 100px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Monogram mode — flat gradient, NO dot texture */
.team-card-photo.photo-mode-monogram {
  background: linear-gradient(145deg, #1B2A4A 0%, var(--team-accent-40, rgba(58,156,199,0.25)) 100%);
}

.team-card-monogram-initials {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -2px;
  color: rgba(255,255,255,0.15);
  font-family: 'Figtree', sans-serif;
  z-index: 1;
}

.team-card-monogram-bar {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 2px;
  z-index: 1;
}

/* Anonymous mode — flat gradient, NO dot texture */
.team-card-photo.photo-mode-anonymous {
  background: linear-gradient(145deg, #1B2A4A 0%, var(--team-accent-35, rgba(58,156,199,0.22)) 100%);
}

.team-card-anon-circle-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  z-index: 1;
}

.team-card-anon-circle-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  z-index: 1;
}

/* ─── Vertical Pills (on card photo area) ─── */
.team-card-pills {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.team-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: 20px;
  color: #fff;
  font-family: 'Figtree', sans-serif;
  line-height: 1.3;
}

.team-pill-overflow {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-family: 'Figtree', sans-serif;
  line-height: 1.3;
}

/* Bottom accent line on photo area */
.team-card-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
}

/* ─── Card Info Area ─── */
.team-card-info {
  padding: 18px 20px;
}

.team-card-name {
  font-size: 18px;
  font-weight: 800;
  color: #1B2A4A;
  margin-bottom: 4px;
  font-family: 'Figtree', sans-serif;
  line-height: 1.2;
}

.team-card-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  font-family: 'Figtree', sans-serif;
}

.team-card-snippet {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  font-family: 'Figtree', sans-serif;
}


/* ══════════════════════════════════════════════
   TEAM MODAL — Dual-panel overlay
   ══════════════════════════════════════════════ */

/* ─── Backdrop ─── */
.team-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Figtree', sans-serif;
}

/* ─── Modal Container ─── */
.team-modal {
  display: grid;
  grid-template-columns: 320px 1fr;
  max-width: 960px;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  height: min(600px, calc(100vh - 48px));
  max-height: min(600px, calc(100vh - 48px));
}

/* ─── Left Panel (Identity) ─── */
.team-modal-left {
  background: radial-gradient(
    ellipse at 30% 30%,
    #2a3248 0%,
    #1f2c44 30%,
    #1B2A4A 70%,
    #121d30 100%
  );
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
}

/* Close button */
.team-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.4);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-family: 'Figtree', sans-serif;
}

.team-modal-close:hover {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
}

/* Modal photo container — 3 modes rendered via JS innerHTML */
.team-modal-photo {
  width: 110px;
  height: 130px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 18px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Modal monogram initials */
.team-modal-monogram-initials {
  font-size: 36px;
  font-weight: 800;
  color: rgba(255,255,255,0.25);
  font-family: 'Figtree', sans-serif;
  letter-spacing: -1px;
  position: relative;
}

/* Modal anonymous circle */
.team-modal-anon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
}

/* Modal identity info */
.team-modal-identity {
  text-align: center;
  margin-bottom: 20px;
}

.team-modal-name {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  font-family: 'Figtree', sans-serif;
}

.team-modal-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  font-family: 'Figtree', sans-serif;
}

/* Modal pills — centered row */
.team-modal-pills {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Divider */
.team-modal-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0 0 18px;
}

/* Section labels (EDUCATION, SPECIALTIES) */
.team-modal-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.25);
  margin-bottom: 6px;
  text-transform: uppercase;
  font-family: 'Figtree', sans-serif;
}

/* Education value */
.team-modal-education {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin-bottom: 18px;
  font-family: 'Figtree', sans-serif;
}

/* Specialties container */
.team-modal-specialties {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Specialty tag pill */
.team-modal-specialty-tag {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  font-family: 'Figtree', sans-serif;
}

/* CTA button — pinned bottom */
.team-modal-cta-wrap {
  margin-top: auto;
  padding-top: 16px;
}

.team-modal-cta {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 11px 20px;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.5px;
  font-family: 'Figtree', sans-serif;
  transition: filter 0.2s;
  border: none;
  cursor: pointer;
  width: 100%;
}

.team-modal-cta:hover {
  filter: brightness(1.1);
  color: #fff;
  text-decoration: none;
}

/* ─── Right Panel (Tabbed Content) ─── */
.team-modal-right {
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Tab bar */
.team-modal-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 0 28px;
  background: #fafafa;
}

.team-modal-tab {
  padding: 13px 18px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: #999;
  background: transparent;
  font-family: 'Figtree', sans-serif;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}

.team-modal-tab:hover {
  color: #666;
}

.team-modal-tab.is-active {
  font-weight: 700;
  color: #1B2A4A;
}

/* Tab content area */
.team-modal-content {
  flex: 1;
  overflow: auto;
  padding: 24px 28px;
}

/* Tab panels — hidden by default, shown when active */
.team-modal-panel {
  display: none;
}

.team-modal-panel.is-active {
  display: block;
}

/* Tab heading */
.team-modal-panel h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 0 0 14px !important;
  font-family: 'Figtree', sans-serif;
}

/* Bio paragraphs */
.team-modal-bio-para {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  margin: 0 0 14px;
  font-family: 'Figtree', sans-serif;
}

/* Case study cards */
.team-modal-case {
  background: #f8f9fa;
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin-bottom: 12px;
  border-left: 3px solid #007BA7;
}

.team-modal-case-title {
  font-size: 15px;
  font-weight: 700;
  color: #1B2A4A;
  margin-bottom: 8px;
  font-family: 'Figtree', sans-serif;
}

.team-modal-case-snippet {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin: 0;
  font-family: 'Figtree', sans-serif;
}

/* Advice blockquote */
.team-modal-advice-quote {
  padding: 14px 22px;
  border-radius: 0 10px 10px 0;
  margin: 0;
  border-left: 3px solid #007BA7;
}

.team-modal-advice-text {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  font-family: 'Figtree', sans-serif;
}

.team-modal-advice-cite {
  display: block;
  font-size: 12px;
  margin-top: 8px;
  font-style: normal;
  font-weight: 600;
  font-family: 'Figtree', sans-serif;
}

/* Fun facts */
.team-modal-tidbits {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin: 0;
  font-family: 'Figtree', sans-serif;
}


/* ══════════════════════════════════════════════════════════════
   SERVICE PAGES
   Template: template-service-page.php
   JS: assets/js/aav-service-page.js
   Source of truth: aav-service-pages-v3.jsx + aav-identity-selector-LOCKED.jsx
   CSS version: 2.5.0

   Compositions: Process, Service Landing, Pricing
   10-block kit: Hero, Prose, Phase Stepper, Why It Works, Identity Selector,
   Feature Table, Pricing Table, FAQ Accordion, CTA Band (reuse), Sidebar
   ══════════════════════════════════════════════════════════════ */


/* ─── Wrap ─── */
.service-page-wrap {
  font-family: 'Figtree', sans-serif;
}


/* ─── Hero ───
   Clearance pattern: NOT in kill lists.
   Theme's .wrapper padding clears the fixed header.
   margin-top: -80px bleeds gradient under nav.
   padding: 80px top clears content below nav.
   Accent bar via ::after pseudo-element. */

.service-hero {
  background: var(--aav-ember-gradient);
  padding: 80px 0 56px;
  position: relative;
}

.service-hero-inner {
  max-width: 1270px;
  margin: 0 auto;
  /* padding handled by .aav-hero-inner */
  box-sizing: border-box;
}

.service-hero h1 {
  font-family: 'Figtree', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 1.2;
  margin: 0 !important;
  letter-spacing: -0.3px;
}

.service-hero-subtitle {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 12px;
  line-height: 1.6;
  max-width: 640px;
  font-weight: 400;
}

/* Accent bar at hero bottom — color from CSS custom property */
.service-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--service-accent-color, #007BA7);
}


/* ─── Breadcrumbs ─── */

.service-hero-breadcrumbs {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}

.service-hero-breadcrumbs a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.service-hero-breadcrumbs a:hover {
  color: rgba(255, 255, 255, 0.65);
}

.service-hero-breadcrumbs .breadcrumb-sep {
  margin: 0 8px;
}

.service-hero-breadcrumbs .breadcrumb-current {
  color: rgba(255, 255, 255, 0.7);
}


/* ─── Putty Body Wrapper ───
   Matches JSX: background: #f8f6f5, padding: 0 24px 48px.
   Creates the putty gutters flanking the white card. */

.service-page-body {
  background: #f8f6f5;
  padding: 0 24px 48px;
}

/* ─── Card Positioning Wrapper ───
   Same pattern as consultation-card-wrap / team-card-wrap.
   Constrains the white card to 1270px with 48px horizontal padding. */

.service-card-wrap {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
  margin-top: -28px;
}

/* ─── White Content Card ───
   12px radius on ALL four corners (not flat bottom).
   Visible space before footer via parent's padding-bottom. */

.service-content-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
}


/* ─── Content Grid ─── */

.service-content-grid {
  padding: 40px 48px;
}

/* Sidebar layout — Process + Service Landing */
.service-content-grid.has-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  padding: 0;
}

.service-content-grid.has-sidebar .service-blocks {
  padding: 40px 48px;
}

/* Constrained layout — Pricing */
.service-content-grid.constrained {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 0;
}


/* ─── Sidebar ─── */

.service-sidebar {
  padding: 40px 28px 40px 24px;
  border-left: 1px solid #f0f0f0;
}

.service-sidebar .sidebar-header {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #3A9CC7;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.service-sidebar .sidebar-link {
  margin-bottom: 14px;
}

.service-sidebar .sidebar-link-title {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1B2A4A;
  text-decoration: none;
  line-height: 1.4;
  display: block;
}

.service-sidebar .sidebar-link-title:hover {
  color: #007BA7;
}

.service-sidebar .sidebar-link-date {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}


/* ─── Prose Section ─── */

.prose-section {
  margin-bottom: 36px;
}

.prose-section h2 {
  font-family: 'Figtree', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1B2A4A;
  margin-bottom: 16px !important;
  line-height: 1.3;
}

.prose-section .prose-body {
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  color: #444;
  line-height: 1.6;
}

.prose-section .prose-body p {
  margin: 0 0 16px 0;
}

.prose-section .prose-body p:last-child {
  margin-bottom: 0;
}


/* ─── Phase Stepper (Dark) ───
   Flat ember gradient ONLY — no dot texture overlay.
   DO NOT add ::before or ::after pseudo-element for dot texture.
   DO NOT add background-image overlay of any kind. */

.service-page-wrap .phase-stepper {
  background: var(--aav-ember-gradient) !important;
  border-radius: 14px !important;
  padding: 40px 44px !important;
  margin-bottom: 40px !important;
  position: relative !important;
  overflow: hidden !important;
}

.phase-stepper-inner {
  position: relative;
  z-index: 1;
}

.phase-step {
  display: flex;
  gap: 24px;
  position: relative;
}

.phase-step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
  flex-shrink: 0;
}

.phase-step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--service-accent-color, #007BA7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--service-accent-color, #007BA7) 19%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

.phase-step-connector {
  width: 2px;
  background: color-mix(in srgb, var(--service-accent-color, #007BA7) 25%, transparent);
  flex-grow: 1;
  min-height: 28px;
}

.phase-step-content {
  padding-bottom: 36px;
  padding-top: 10px;
  flex: 1;
}

.phase-step-content.phase-step-last {
  padding-bottom: 0;
}

.phase-step-title {
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3;
}

.phase-step-desc {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin: 0;
}

.phase-step-details {
  margin-top: 14px;
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, var(--service-accent-color, #007BA7) 31%, transparent);
}

.phase-detail-item {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  padding: 3px 0;
}

.phase-detail-bullet {
  color: var(--service-accent-color, #007BA7);
  margin-right: 8px;
  font-weight: 600;
}


/* ─── Why It Works Band ─── */

.why-it-works {
  background: #f8f6f5;
  border-radius: 12px;
  padding: 32px 36px;
  margin-bottom: 40px;
  border: 1px solid #ede9e6;
}

.why-it-works h2 {
  font-family: 'Figtree', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1B2A4A;
  margin-bottom: 20px !important;
  line-height: 1.3;
}

.why-it-works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.why-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.why-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--service-accent-color, #007BA7) 6%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.why-item-title {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1B2A4A;
  margin-bottom: 4px;
}

.why-item-desc {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: #666;
  line-height: 1.55;
}


/* ─── Identity Selector (Layout A — Side-by-Side) ───
   Static component — no interactive JS.
   Left card: BLUE #007BA7 (always). Right card: NAVY_MID #2A3D64 (always).
   Icons: Target (left), Compass (right) — hardcoded in PHP. */

.identity-selector {
  margin-bottom: 40px;
}

.identity-selector-header {
  text-align: center;
  margin-bottom: 28px;
}

.identity-selector-header h2 {
  font-family: 'Figtree', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 0 0 8px 0 !important;
}

.identity-selector-header p {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #888;
  margin: 0;
}

.identity-selector-grid {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  align-items: stretch;
}

.identity-card {
  border-radius: 14px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

.identity-card-left {
  background: #007BA7;
}

.identity-card-right {
  background: #2A3D64;
}

.identity-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.identity-tier-name {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
}

.identity-archetype {
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 12px;
  line-height: 1.3;
}

.identity-pitch {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 8px 0;
  color: rgba(255, 255, 255, 0.7);
}

.identity-inner-voice {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.identity-cta-pill {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.identity-cta-pill:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  text-decoration: none;
}

.identity-cta-pill span {
  font-size: 14px;
}

.identity-or-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}

.identity-or-circle {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ccc;
  background: #f8f8f8;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e8e8;
}


/* ─── Feature Comparison Table ─── */

.feature-table {
  margin-bottom: 40px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8ecf0;
}

/* All grid rows use the --ft-cols custom property set via inline style */
.ft-header,
.ft-section-header,
.ft-row {
  display: grid;
  grid-template-columns: var(--ft-cols, 2fr 1fr 1fr);
}

.ft-header {
  background: #1B2A4A;
}

.ft-header-label {
  padding: 16px 24px;
}

.ft-header-tier {
  padding: 16px 20px;
  text-align: center;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ft-section-header {
  background: #f0f4f8;
}

.ft-section-border {
  border-top: 2px solid #e0e4e8;
}

.ft-section-title {
  padding: 10px 24px;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1B2A4A;
}

.ft-row {
  border-top: 1px solid #f0f0f0;
}

.ft-row-even {
  background: #fff;
}

.ft-row-odd {
  background: #fafbfc;
}

.ft-row-label {
  padding: 12px 24px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #444;
}

.ft-row-value {
  padding: 12px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Check icon — color from CSS custom property via currentColor */
.ft-check-icon {
  color: var(--service-accent-color, #007BA7);
}

.ft-text-value {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1B2A4A;
}


/* ─── Pricing Table (Style B) ─── */

.pricing-table {
  margin-bottom: 40px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e8ecf0;
}

/* All grid rows use the --pt-cols custom property */
.pt-header,
.pt-base-label,
.pt-row,
.pt-footer {
  display: grid;
  grid-template-columns: var(--pt-cols, 1.8fr 1fr 1fr);
}

.pt-header-label {
  background: #1B2A4A;
  padding: 20px 24px;
}

.pt-header-label span {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.pt-header-tier {
  padding: 20px 24px;
  text-align: center;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.pt-base-label {
  background: #f7f9fb;
}

.pt-base-label-text {
  padding: 10px 24px;
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1B2A4A;
  letter-spacing: 0.5px;
}

.pt-row {
  border-top: 1px solid #f0f2f5;
}

.pt-row-label {
  padding: 14px 24px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #444;
  background: #fff;
}

.pt-row-value {
  padding: 14px 24px;
  text-align: center;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1B2A4A;
  border-left: 1px solid #f0f2f5;
}

.pt-footer {
  border-top: 2px solid #e0e4e8;
}

.pt-footer-label {
  padding: 14px 24px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1B2A4A;
  background: #f0f4f8;
}

.pt-footer-value {
  padding: 14px 24px;
  text-align: center;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}


/* ─── FAQ Accordion (Option B) ───
   Closed: #f8f9fa bg, navy text.
   Open: #1B2A4A bg, white text, no left border. */

.faq-accordion-block {
  margin-bottom: 40px;
}

.faq-accordion-block h2 {
  font-family: 'Figtree', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1B2A4A;
  margin-bottom: 20px !important;
}

.faq-accordion {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e8ecf0;
}

.faq-accordion-item + .faq-accordion-item {
  border-top: 1px solid #e8ecf0;
}

/* Open item — override border between items */
.faq-accordion-item.is-open + .faq-accordion-item {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.faq-accordion-trigger {
  width: 100%;
  padding: 16px 24px;
  background: #f8f9fa;
  color: #1B2A4A;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  transition: background 0.2s, color 0.2s;
}

.faq-accordion-item.is-open .faq-accordion-trigger {
  background: #1B2A4A;
  color: #FFFFFF;
}

.faq-accordion-chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  margin-left: 12px;
}

.faq-accordion-item.is-open .faq-accordion-chevron {
  transform: rotate(180deg);
}

/* Open chevron on dark bg — use white stroke */
.faq-accordion-item.is-open .faq-accordion-trigger {
  color: #FFFFFF;
}

.faq-accordion-panel {
  display: none;
  padding: 20px 24px;
  background: #FFFFFF;
  border-top: 1px solid #e8ecf0;
}

.faq-accordion-item.is-open .faq-accordion-panel {
  display: block;
}

.faq-accordion-answer {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}

.faq-accordion-answer p {
  margin: 0 0 12px 0;
}

.faq-accordion-answer p:last-child {
  margin-bottom: 0;
}


/* ─── CTA Band (Service Pages) ───
   REUSES existing .faq-cta-section markup and CSS.
   Only override: reset margin-left calc (designed for FAQ hub's wide container).
   On service pages, the CTA sits inside the content card which has its own padding. */

.service-page-wrap .faq-cta-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  margin-top: 20px !important;
}

.service-page-wrap .faq-cta-inner {
  padding: 28px 32px !important;
}


/* ══════════════════════════════════════════════════════════════
   BLOG SINGLE POST
   Template: single.php
   Source of truth: CC-BLOG-SINGLE-SPEC.md + aav-blog-FINAL-v2.jsx
   CSS version: 2.6.0

   Hero clearance: NOT in kill lists.
   Theme's .wrapper padding clears the fixed header.
   margin-top: -80px bleeds gradient under nav.
   padding: 80px top clears content below nav.
   Same pattern as service-hero.
   ══════════════════════════════════════════════════════════════ */


/* ─── Vertical Accent Mapping ───
   body class set by aav_vertical_body_class() in functions.php.
   Inline --v-accent on .blog-single-wrap provides fallback. */

body.vertical-college .blog-single-wrap  { --v-accent: #3A9CC7; }
body.vertical-mba .blog-single-wrap      { --v-accent: #7B6BA5; }
body.vertical-law .blog-single-wrap      { --v-accent: #9B6B7A; }
body.vertical-medical .blog-single-wrap  { --v-accent: #5A7B96; }
body.vertical-graduate .blog-single-wrap { --v-accent: #4A9B8E; }


/* ─── Wrap ─── */

.blog-single-wrap {
  font-family: 'Figtree', sans-serif;
}


/* ─── Hero ─── */

.blog-single-hero {
  background: var(--aav-ember-gradient);
  padding: 80px 0 48px;
  position: relative;
}

.blog-single-hero-inner {
  max-width: 1270px;
  margin: 0 auto;
  /* padding handled by .aav-hero-inner */
  box-sizing: border-box;
}

/* Breadcrumbs — Yoast #breadcrumbs inside hero */
.blog-single-hero #breadcrumbs {
  font-size: 12px !important;
  font-family: 'Figtree', sans-serif !important;
  margin-bottom: 8px;
}

.blog-single-hero #breadcrumbs a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none;
  font-size: 12px !important;
}

.blog-single-hero #breadcrumbs a:hover {
  color: rgba(255,255,255,0.85) !important;
}

.blog-single-hero #breadcrumbs span.breadcrumb_last,
.blog-single-hero #breadcrumbs > span:last-child {
  color: rgba(255,255,255,0.75) !important;
}

/* Yoast separator character */
.blog-single-hero #breadcrumbs span[aria-hidden] {
  color: rgba(255,255,255,0.35) !important;
  margin: 0 6px;
}

.blog-single-title {
  font-family: 'Figtree', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin: 0 0 10px !important;
  max-width: 680px;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-family: 'Figtree', sans-serif;
}

.blog-meta a {
  color: var(--v-accent, #3A9CC7);
  font-weight: 600;
  text-decoration: none;
  font-size: 12px;
}

.blog-meta a:hover {
  opacity: 0.8;
}

.blog-meta .separator {
  color: rgba(255,255,255,0.3);
}

/* Accent bar at hero bottom */
.blog-hero-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--v-accent, #3A9CC7);
}


/* ─── Body + Layout ─── */

.blog-single-body {
  padding: 0 48px 48px;
  max-width: 1270px;
  margin: 0 auto;
  box-sizing: border-box;
}

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 28px;
}


/* ─── Article Card ─── */

.blog-article-card {
  background: #fff;
  margin-top: -32px;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.blog-content {
  padding: 14px 32px 28px;
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  font-family: 'Figtree', sans-serif;
}


/* ─── Typography inside .blog-content ─── */

.blog-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1B2A4A;
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin: 28px 0 10px !important;
  font-family: 'Figtree', sans-serif;
}

.blog-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #2A3D64;
  line-height: 1.3;
  margin: 24px 0 8px !important;
  font-family: 'Figtree', sans-serif;
}

.blog-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2A3D64;
  line-height: 1.3;
  margin: 22px 0 6px !important;
  margin-left: 20px !important;
  border-left: 3px solid color-mix(in srgb, var(--v-accent, #3A9CC7) 25%, transparent) !important;
  padding-left: 12px !important;
  font-family: 'Figtree', sans-serif;
}

/* H4 indent: content immediately following H4 inherits indent */
.blog-content h4 + p,
.blog-content h4 + ul,
.blog-content h4 + ol,
.blog-content h4 + .wp-block-list {
  margin-left: 20px !important;
}

.blog-content p {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  margin: 0 0 18px;
  font-family: 'Figtree', sans-serif;
}


/* ─── Lists ─── */

.blog-content ul,
.blog-content ol {
  padding-left: 16px;
  margin: 0 0 18px;
}

.blog-content ul {
  list-style: none;
}

.blog-content ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 15px;
  color: #444;
  line-height: 1.6;
}

.blog-content ul li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v-accent, #3A9CC7);
}

.blog-content ol {
  list-style: none;
  counter-reset: blog-ol;
}

.blog-content ol li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  counter-increment: blog-ol;
}

.blog-content ol li::before {
  content: counter(blog-ol);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,123,167,0.07);
  color: #007BA7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Figtree', sans-serif;
}

/* Lists under H4: inherit H4's 20px indent + 16px list indent */
.blog-content h4 + ul li,
.blog-content h4 + ol li,
.blog-content h4 + .wp-block-list li {
  font-size: 15px;
}


/* ─── Special Boxes ─── */

/* Key Takeaways — faint accent tint (JSX: accent at 5% opacity)
   Content Foundry outputs .cf-takeaways; manual posts may use .key-takeaways.
   !important on background overrides theme/Gutenberg solid #efeae9. */
.blog-content .key-takeaways,
.blog-content .cf-takeaways {
  background: color-mix(in srgb, var(--v-accent, #3A9CC7) 5%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--v-accent, #3A9CC7) 12%, transparent) !important;
  border-radius: 10px !important;
  padding: 18px 22px !important;
  margin: 16px 0 20px !important;
  position: relative;
}

.blog-content .key-takeaways::before,
.blog-content .cf-takeaways::before {
  content: 'KEY TAKEAWAYS';
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--v-accent, #3A9CC7);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: 'Figtree', sans-serif;
}

.blog-content .key-takeaways p,
.blog-content .key-takeaways li,
.blog-content .cf-takeaways p,
.blog-content .cf-takeaways li {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}

/* Arrow items in Key Takeaways */
.blog-content .key-takeaways ul,
.blog-content .cf-takeaways ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.blog-content .key-takeaways ul li,
.blog-content .cf-takeaways ul li {
  padding-left: 20px;
  margin-bottom: 7px;
}

.blog-content .key-takeaways ul li::before,
.blog-content .cf-takeaways ul li::before {
  content: '→' !important;
  position: absolute;
  left: 0;
  top: 0;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--v-accent, #3A9CC7);
  font-weight: 700;
  font-size: 14px;
}


/* Pro Tip — blue tint */
.blog-content .pro-tip {
  background: rgba(0,123,167,0.024);
  border: 1px solid rgba(0,123,167,0.094);
  border-left: 3px solid #007BA7;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 18px 0;
  position: relative;
}

.blog-content .pro-tip::before {
  content: 'PRO TIP';
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #007BA7;
  margin-bottom: 5px;
  font-family: 'Figtree', sans-serif;
}

.blog-content .pro-tip p {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin: 0;
}


/* Common Pitfall — gold tint */
.blog-content .common-pitfall {
  background: #FFF8F0;
  border: 1px solid #F0D8B8;
  border-left: 3px solid #D4943A;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 18px 0;
  position: relative;
}

.blog-content .common-pitfall::before {
  content: 'COMMON PITFALL';
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #B07830;
  margin-bottom: 5px;
  font-family: 'Figtree', sans-serif;
}

.blog-content .common-pitfall p {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin: 0;
}


/* ─── Blockquote ─── */

.blog-content blockquote {
  border-left: 3px solid #007BA7 !important;
  background: #f8fafb !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 22px !important;
  margin: 24px 0 !important;
}

.blog-content blockquote p {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

.blog-content blockquote cite {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  font-style: normal;
  font-weight: 600;
}


/* ─── Table ─── */

.blog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8ecf0;
  margin: 0 0 18px;
}

.blog-content thead tr {
  background: #1B2A4A;
}

.blog-content thead th {
  padding: 10px 14px;
  text-align: left;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  font-family: 'Figtree', sans-serif;
}

.blog-content tbody tr {
  border-top: 1px solid #f0f2f5;
}

.blog-content tbody tr:nth-child(odd) {
  background: #fff;
}

.blog-content tbody tr:nth-child(even) {
  background: #fafbfc;
}

.blog-content tbody td {
  padding: 10px 14px;
  color: #444;
  font-size: 14px;
}

.blog-content tbody td:first-child {
  color: #1B2A4A;
  font-weight: 600;
}

/* Gutenberg table block wrapper */
.blog-content .wp-block-table {
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 8px;
}

.blog-content .wp-block-table table {
  margin: 0;
}


/* ─── In-Article CTA Box ─── */

.blog-content .blog-cta-box {
  background: #1B2A4A;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.blog-content .blog-cta-box p {
  margin: 0;
}

.blog-content .blog-cta-box .blog-cta-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}

.blog-content .blog-cta-box .blog-cta-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.blog-content .blog-cta-box a {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #007BA7;
  padding: 9px 22px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.blog-content .blog-cta-box a:hover {
  background: #0090C4;
}


/* ─── Sidebar ─── */

.blog-sidebar {
  margin-top: -32px;
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1 / -1;
}

.sidebar-featured-image {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.sidebar-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Related articles */
.sidebar-related {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  border: 1px solid #e8ecf0;
  margin-bottom: 14px;
}

.sidebar-related-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--v-accent, #3A9CC7);
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-family: 'Figtree', sans-serif;
}

.sidebar-related a {
  display: block;
  font-size: 13px;
  color: #007BA7;
  text-decoration: none;
  margin-bottom: 16px;
  line-height: 1.4;
  font-family: 'Figtree', sans-serif;
}

.sidebar-related a:hover {
  color: #0090C4;
}

.sidebar-related a:last-of-type {
  margin-bottom: 0;
}

/* Sticky CTA */
.sidebar-cta {
  background: color-mix(in srgb, var(--v-accent, #3A9CC7) 6%, transparent);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--v-accent, #3A9CC7) 12%, transparent);
  position: sticky;
  top: 110px;
}

.sidebar-cta-title {
  font-size: 13px;
  font-weight: 700;
  color: #1B2A4A;
  margin-bottom: 6px;
  font-family: 'Figtree', sans-serif;
}

.sidebar-cta-text {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 10px;
  font-family: 'Figtree', sans-serif;
}

.sidebar-cta .btn-cta-pill {
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--v-accent, #3A9CC7);
  padding: 9px 14px;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Figtree', sans-serif;
}

.sidebar-cta .btn-cta-pill:hover {
  opacity: 0.9;
}


/* ─── CTA Band (Blog Single) ───
   REUSES existing .faq-cta-section markup.
   Lives OUTSIDE the article card, as a sibling in .blog-layout grid column 1. */

.blog-cta.faq-cta-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  margin-top: 24px !important;
  grid-column: 1;
  align-self: start;
}

/* CTA button resets — <button> element needs explicit resets to match <a> styling */
.blog-cta .faq-cta-toggle {
  border: none;
  background: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}


/* ══════════════════════════════════════════════
   HOMEPAGE
   v2.7.0 — 7-section template with ACF-driven content.
   Hero clearance: NOT in kill lists. Uses -80px/+80px pattern.
   ══════════════════════════════════════════════ */

/* ─── Wrap ─── */
.homepage-wrap {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Shared containment ─── */
.homepage-section-inner {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}


/* ═══════════════════════════
   S0: HOMEPAGE HEADER — UNIVERSAL FROSTED GLASS
   ═══════════════════════════ */
/* S0: HOMEPAGE HEADER — now identical to all pages (header-dark-logo class).
   All .front-page-header rules removed in Wave 3 cleanup. */

/* ═══════════════════════════
   S1: HERO
   ═══════════════════════════ */
/* Hero clearance: The theme already kills <main> padding on .homepage (general.less:1138),
   so <main> starts at viewport Y=0 (plus admin bar). The hero handles its own header
   clearance via padding-top: 100px — no negative margin needed. The ember gradient
   covers Y=0 through the entire hero, so the transparent front-page-header with white
   nav text always sits against navy background. DO NOT add negative margin or restore
   <main> padding — that creates a gap where body background bleeds through. */
.homepage-hero {
  background: var(--aav-ember-gradient);
  padding: 180px 0 108px;
  position: relative;
}

.homepage-hero-inner {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 48px;
}

.homepage-hero-text {
  max-width: 620px;
}

.homepage-h1 {
  display: block !important; /* Safety net — legacy Customizer rule still active, kept as insurance */
  font-size: 44px;
  font-weight: 800;
  color: #fff !important;
  line-height: 1.1;
  margin: 0 0 18px !important;
  letter-spacing: -0.3px;
}

.homepage-hero-subtitle {
  font-size: 18px !important;
  color: rgba(255,255,255,0.5) !important;
  line-height: 1.65 !important;
  margin: 0 0 34px !important;
  max-width: 520px;
}

.homepage-cta-row {
  display: flex;
  gap: 12px;
}

.homepage-cta-primary {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #007BA7;
  padding: 14px 32px;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s ease;
  border: none;
  cursor: pointer;
  font-family: 'Figtree', sans-serif;
}

.homepage-cta-primary:hover {
  opacity: 0.9;
  color: #fff;
  text-decoration: none;
}

.homepage-cta-secondary {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.2);
  background: transparent;
  padding: 12px 28px;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  transition: border-color 0.2s ease;
}

.homepage-cta-secondary:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  text-decoration: none;
}


/* ═══════════════════════════
   VERTICAL CARDS (bridge)
   ═══════════════════════════ */
.homepage-cards-wrap {
  position: relative;
  z-index: 2;
  margin-top: -52px;
  margin-bottom: 40px;
}

.homepage-cards-inner {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

.homepage-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.hero-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px 18px 28px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  border-top: 3px solid var(--card-accent, #3A9CC7);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  width: 220px;
  flex: 0 0 auto;
}

.hero-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.13);
}

.hero-card-icon {
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0.3;
  filter: saturate(0.2);
}

.hero-card:hover .hero-card-icon {
  opacity: 1;
  filter: none;
}

.hero-card-label {
  font-size: 15px;
  font-weight: 700;
  color: #1B2A4A;
  margin-bottom: 6px;
}

.hero-card-desc {
  font-size: 13px;
  color: #888;
  line-height: 1.45;
}


/* ═══════════════════════════
   S2: SOCIAL PROOF
   ═══════════════════════════ */
.homepage-social-proof {
  padding: 56px 0;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.social-proof-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: center;
}

.social-proof-testimonial {
  position: relative;
  padding-left: 28px;
}

.testimonial-accent-bar {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(123,107,165,0.25), rgba(155,107,122,0.25));
}

/* All slides hidden by default */
.testimonial-slide {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Active slide visible */
.testimonial-slide.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Fading out */
.testimonial-slide.fading {
  opacity: 0;
  transform: translateY(6px);
}

.testimonial-quote {
  font-size: 19px !important;
  font-weight: 500 !important;
  color: #1B2A4A !important;
  line-height: 1.55 !important;
  margin: 0 0 16px !important;
  font-style: italic;
}

.testimonial-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-author {
  font-size: 13px;
  font-weight: 700;
  color: #1B2A4A;
}

.testimonial-detail {
  font-size: 11px;
  color: #bbb;
}

/* Dot indicators */
.testimonial-dots {
  display: flex;
  gap: 6px;
  margin-top: 20px;
}

.testimonial-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #ddd;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.testimonial-dot.active {
  width: 18px;
  background-color: #007BA7;
}

/* Stats column */
.social-proof-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: 1px solid #eee;
  padding-right: 40px;
}

.stat-item {
  text-align: right;
}

.stat-value {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  color: rgba(27,42,74,0.12);
  letter-spacing: -1px;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c0c0c0;
  margin-top: 4px;
}


/* ═══════════════════════════
   S3: DIFFERENTIATOR
   ═══════════════════════════ */
.homepage-differentiator {
  padding: 76px 0;
  background: #f8f6f5;
}

.diff-header {
  text-align: center;
  margin-bottom: 48px;
}

.diff-headline {
  font-size: 30px;
  font-weight: 800;
  color: #1B2A4A;
  margin: 0 0 12px !important;
  line-height: 1.2;
}

.diff-subtitle {
  font-size: 16px !important;
  color: #777 !important;
  margin: 0 auto !important;
  max-width: 560px;
  line-height: 1.6 !important;
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}

.diff-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 26px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid #eee;
}

.diff-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(0,123,167,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.diff-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 0 0 10px !important;
  line-height: 1.3;
}

.diff-card-text {
  font-size: 14px !important;
  color: #666 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}


/* ═══════════════════════════
   S4: TEAM PREVIEW
   ═══════════════════════════ */
.homepage-team {
  padding: 76px 0;
  background: #fff;
}

.team-header {
  text-align: center;
  margin-bottom: 44px;
}

.team-headline {
  font-size: 30px;
  font-weight: 800;
  color: #1B2A4A;
  margin: 0 0 12px !important;
}

.team-subtitle {
  font-size: 16px !important;
  color: #777 !important;
  margin: 0 !important;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}

.homepage-team-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-decoration: none !important;
  display: block;
  transition: all 0.3s ease;
}

.homepage-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.team-card-photo-area {
  height: 190px;
  background: linear-gradient(145deg, rgba(27,42,74,0.024), color-mix(in srgb, var(--team-accent, #3A9CC7) 7%, transparent));
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card-monogram {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
}

.team-card-info {
  padding: 18px 20px 22px;
}

.team-card-name {
  font-size: 16px;
  font-weight: 700;
  color: #1B2A4A;
}

.team-card-title {
  font-size: 12px;
  color: #007BA7;
  font-weight: 600;
  margin-bottom: 8px;
}

.team-card-credential {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.team-card-specialties {
  font-size: 11px;
  color: #aaa;
}

.team-link-wrap {
  text-align: center;
  margin-top: 28px;
}

.team-full-link {
  font-size: 13px;
  font-weight: 600;
  color: #007BA7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.team-full-link:hover {
  color: #005f82;
  text-decoration: none;
}


/* ═══════════════════════════
   S5: PLACEMENT SPECTRUM
   ═══════════════════════════ */
.homepage-placements {
  padding: 64px 0;
  background: #f8f6f5;
}

.placements-header {
  text-align: center;
  margin-bottom: 40px;
}

.placements-headline {
  font-size: 26px;
  font-weight: 800;
  color: #1B2A4A;
  margin: 0 0 10px !important;
}

.placements-subtitle {
  font-size: 15px !important;
  color: #888 !important;
  margin: 0 auto !important;
  max-width: 540px;
  line-height: 1.6 !important;
}

.placements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
}

.placement-panel {
  padding: 36px 28px;
  text-align: center;
  position: relative;
}

.placement-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.placement-label {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: 0.2px;
}

.placement-examples {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.5);
}

.placements-footnote {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: #bbb;
  font-style: italic;
}


/* ═══════════════════════════
   S6: SOUND FAMILIAR
   ═══════════════════════════ */
.homepage-sound-familiar {
  padding: 76px 0;
  background: #fff;
}

.sf-header {
  text-align: center;
  margin-bottom: 48px;
}

.sf-headline {
  font-size: 30px;
  font-weight: 800;
  color: #1B2A4A;
  margin: 0 0 12px !important;
}

.sf-subtitle {
  font-size: 16px !important;
  color: #777 !important;
  margin: 0 !important;
}

.sf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.sf-card {
  border-radius: 12px;
  padding: 32px 26px 28px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sf-card:hover {
  background: color-mix(in srgb, var(--sf-accent, #3A9CC7) 3%, transparent);
  border-color: color-mix(in srgb, var(--sf-accent, #3A9CC7) 19%, transparent);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--sf-accent, #3A9CC7) 6%, transparent);
}

.sf-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sf-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sf-accent, #3A9CC7) 7%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sf-card-icon svg {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.sf-card:hover .sf-card-icon svg {
  opacity: 1;
}

.sf-persona {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sf-accent, #3A9CC7);
}

.sf-hook {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1B2A4A !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
  flex: 0 0 auto;
}

.sf-divider {
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: #e0e0e0;
  margin: 0 0 14px;
  transition: background 0.3s ease;
}

.sf-card:hover .sf-divider {
  background: var(--sf-accent, #3A9CC7);
}

.sf-pathway {
  font-size: 13px !important;
  color: #777 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  flex: 1;
}

.sf-cta-wrap {
  text-align: center;
  margin-top: 36px;
}

.sf-cta {
  gap: 6px;
}


/* ═══════════════════════════
   S7: CTA BAND
   ═══════════════════════════ */
.homepage-cta-band {
  padding: 68px 0;
  background: radial-gradient(ellipse at 50% 50%, #0090C0 0%, #007BA7 60%, #006690 100%);
  text-align: center;
}

.cta-band-headline {
  font-size: 30px;
  font-weight: 800;
  color: #fff !important;
  margin: 0 0 14px !important;
}

.cta-band-subtitle {
  font-size: 16px !important;
  color: rgba(255,255,255,0.45) !important;
  margin: 0 0 30px !important;
  max-width: 500px;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.6 !important;
}

.cta-band-button {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  background: #1B2A4A;
  padding: 15px 38px;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  transition: all 0.2s ease;
}

.cta-band-button:hover {
  background: #2A3D64;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}


/* ══════════════════════════════════════════════
   HUB PAGE CTA — padding reset
   Content card already provides spacing context.
   ══════════════════════════════════════════════ */
.hub-page-content-card .faq-cta-inner {
  padding: 0 !important;
}

.faq-hub-wrap .faq-cta-inner {
  padding: 0 !important;
}


/* ══════════════════════════════════════════════
   UNIVERSAL BREADCRUMB COLORS (Phase 4 QA)
   Single source of truth — applies to ALL hero contexts.
   Two markup sources: ACF repeater + Yoast yoast_breadcrumb().
   Spec: §11b in CLAUDE.md.
   ══════════════════════════════════════════════ */

/* Clickable ancestors */
.hero-breadcrumbs a,
.faq-breadcrumbs a,
.deadlines-breadcrumbs a,
.consultation-breadcrumbs a,
.team-breadcrumbs a,
.service-hero-breadcrumbs a,
.blog-single-hero #breadcrumbs a,
.archive-hero .hero-breadcrumbs a {
  color: rgba(255,255,255,0.55) !important;
}

/* Hover on ancestors */
.hero-breadcrumbs a:hover,
.faq-breadcrumbs a:hover,
.deadlines-breadcrumbs a:hover,
.consultation-breadcrumbs a:hover,
.team-breadcrumbs a:hover,
.service-hero-breadcrumbs a:hover,
.blog-single-hero #breadcrumbs a:hover,
.archive-hero .hero-breadcrumbs a:hover {
  color: rgba(255,255,255,0.85) !important;
}

/* Current page (dead/label) */
.hero-breadcrumbs .breadcrumb-current,
.faq-breadcrumbs > span:last-child,
.service-hero-breadcrumbs .breadcrumb-current,
.blog-single-hero #breadcrumbs span.breadcrumb_last,
.blog-single-hero #breadcrumbs > span:last-child,
.archive-hero .hero-breadcrumbs .breadcrumb-current {
  color: rgba(255,255,255,0.75) !important;
}

/* Separator chevrons — universal rule */
.breadcrumb-sep,
.blog-single-hero #breadcrumbs span[aria-hidden] {
  color: rgba(255,255,255,0.35) !important;
  margin: 0 6px !important;
}