/* ============================================================
   InnaPace v35 — Asymmetric Card Corner Pattern
   The signature: 3 rounded corners + 1 square corner (BR).
   Applied to LARGE WHITE CARDS AND PANELS + PRACTITIONER IMAGES.
   Pills, chips, buttons, icon containers, form fields stay as-is.
   Public marketing pages only. Skip on authenticated flows
   (enqueue is gated in innapace-data.php).

   Per innapace-codehandoff-v35-asymmetric-corner.md (LOCKED 2026-05-23,
   amended same day to extend the pattern to practitioner images).
   ============================================================ */

:root {
  --innapace-card-radius:    14px;
  --innapace-card-radius-sm: 10px;
}

/* ── Card-scale utility (14px) ──────────────────────────────── */
.innapace-asym-card {
  border-radius:
    var(--innapace-card-radius)
    var(--innapace-card-radius)
    0
    var(--innapace-card-radius);
}

/* ── Image-scale utility (10px) — for practitioner avatars / small headshots ── */
.innapace-asym-img,
.innapace-asym-card.is-sm {
  border-radius:
    var(--innapace-card-radius-sm)
    var(--innapace-card-radius-sm)
    0
    var(--innapace-card-radius-sm);
  overflow: hidden;
}
.innapace-asym-img > img,
.innapace-asym-card.is-sm > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ── State persistence — never change the corner orientation ── */
.innapace-asym-card:hover,
.innapace-asym-card:focus-within,
.innapace-asym-card:active,
.innapace-asym-img:hover,
.innapace-asym-img:focus-within {
  border-radius: inherit;
}

/* ── Accessibility — focus outlines stay rectangular for WCAG contrast ── */
.innapace-asym-card:focus-visible,
.innapace-asym-img:focus-visible {
  outline: 2px solid var(--coral, #e57b3f);
  outline-offset: 2px;
}

/* ============================================================
   GeoDirectory result-card override (Find a Professional)
   GeoDir templates use high-specificity selectors + occasional inline
   styles, so !important is necessary here. ONLY used for vendor overrides,
   never on the .innapace-asym-* utility classes themselves.

   Apply the same asymmetric shape to whatever wrapper GeoDir uses.
   Listed candidates per spec §5 — extra-broad to catch any of the
   GeoDirectory loop variants without needing per-site inspection.
   ============================================================ */
.geodir-archive-list .geodir-post-card,
.geodir-archive-list article.gd-archive-item,
.geodir-archive-list .gd-bs-card,
.geodir-loop-container .geodir-post-card,
body.geodir-archive-page .geodir_post_loop_template_box,
.geodir-category-list-view .geodir-archive-item-section,
.geodir-cpt-list .gd-bs-card {
  border-radius:
    var(--innapace-card-radius)
    var(--innapace-card-radius)
    0
    var(--innapace-card-radius) !important;
}

/* Practitioner thumbnails inside GeoDir result cards — image-scale variant */
.geodir-archive-list .geodir-post-card img.geodir-image,
.geodir-archive-list .geodir-post-card .geodir_thumbnail img,
.geodir-archive-list .gd-bs-card-img-top,
.geodir-loop-container .geodir_thumbnail img {
  border-radius:
    var(--innapace-card-radius-sm)
    var(--innapace-card-radius-sm)
    0
    var(--innapace-card-radius-sm) !important;
}

/* ============================================================
   Mobile holds the pattern — no all-rounded collapse below 768px.
   The 14px / 10px radii are deliberately small enough that the
   asymmetry stays legible at all breakpoints.
   ============================================================ */


/* ============================================================
   THEME CLASS APPLICATION — apply pattern via existing class names
   in the ActivePace theme. No template edits needed; this CSS is the
   only thing required to ship the v35 signature.

   If a future template introduces new card classes, either:
   (a) add the class name to one of these selectors, or
   (b) add `.innapace-asym-card` (14px) or `.innapace-asym-img` (10px)
       directly to the element.
   ============================================================ */

/* ── 14px card-scale surfaces (homepage classes, no page-class override needed) ─ */
.home-search-card,
.practitioner-card,
.result-card,
.h-step,
.h-cat,
.h-heal-visual,
.h-heal-quote,
.h-rooted-imgs .img-ph,
.home-hero-image,
.plan,
.a-hero-visual,
.a-half-pullquote,
.about-verification,
.verif-step,
.filter-rail {
  border-radius:
    var(--innapace-card-radius)
    var(--innapace-card-radius)
    0
    var(--innapace-card-radius);
}

/* v33.6 surfaces — use !important to override per-page stylesheets that define
   their own border-radius with higher specificity (.page-for-practitioners .pt-card
   in innapace-v34-pracpage.css, GeoDirectory profile templates, etc.). */
.pt-card,                            /* §1.5 For Practitioners pricing cards */
.prac-affiliated-note,               /* §1.6 For Practitioners Affiliated callout */
.profile-section.tab-panel,          /* §1.3 Profile main bio panel */
.booking-card,                       /* §1.4 Profile right-rail booking */
.sidebar-card {                      /* §1.4 Profile right-rail Contact/Map/Follow/Similar */
  border-radius:
    var(--innapace-card-radius)
    var(--innapace-card-radius)
    0
    var(--innapace-card-radius) !important;
}

/* v33.6 §1.7 — FAQ accordion items get asymmetric corner when OPEN (Option A).
   Bounded white card appears on open; collapses to hairline-only when closed. */
.faq-item.open {
  border-radius:
    var(--innapace-card-radius)
    var(--innapace-card-radius)
    0
    var(--innapace-card-radius);
  background: #fff;
  border: 1px solid rgba(13, 27, 42, 0.08);
  padding: 22px 24px;
  margin-bottom: 4px;
}

/* The home-search-card on the hero already had a high-specificity radius
   set by the theme — make sure the asym pattern wins via overflow control
   so search-pill children inside aren't clipped at the square corner. */
.home-search-card { overflow: visible; }

/* ── 10px image-scale surfaces — practitioner avatars ─────── */
.practitioner-card .practitioner-avatar,
.result-card .practitioner-avatar {
  border-radius:
    var(--innapace-card-radius-sm)
    var(--innapace-card-radius-sm)
    0
    var(--innapace-card-radius-sm);
}

/* State persistence on themed cards — preserve the corner orientation
   on hover/focus (themes commonly add hover shadows or transforms; we
   only neutralize any radius change). */
.home-search-card:hover,
.practitioner-card:hover,
.result-card:hover,
.h-step:hover,
.h-cat:hover,
.h-heal-visual:hover,
.home-hero-image:hover,
.plan:hover,
.a-hero-visual:hover,
.verif-step:hover,
.filter-rail:hover {
  border-radius:
    var(--innapace-card-radius)
    var(--innapace-card-radius)
    0
    var(--innapace-card-radius);
}

/* ── EXPLICIT EXCLUSIONS — make sure these stay rounded ──── */
/* Icon containers, tags, pills, buttons, chips, and form controls
   remain as the theme originally designed them. We don't strip any
   existing styles here; we just make sure nothing inside an asym-card
   accidentally inherits the pattern. */
.practitioner-tags,
.practitioner-tags > *,
.h-pill,
.h-concerns-pills,
.h-concerns-pills > *,
.quick-cat,
.h-cat-icon,
.filter-option,
.filter-toggle,
.active-filter-pill,
.clear-filters,
.btn-primary,
.plan-cta,
.innapace-cta {
  /* No-op rule — these elements keep whatever radius the theme gave them.
     This selector exists only as a documented exclusion list for future
     maintainers; the CSS cascade does not need it because we're not
     setting radius via parent inheritance. */
}



/* ============================================================
   v33.10 — About page founder section (Option 4 script labels + Variant B sidebar)
   SUPERSEDES v33.7 Option C motto banner. Same green band, new layout.
   Per innapace-codefix-v33.10.md.
   ============================================================ */

/* Section container — keeps the very light green band from v33.7 */
.about-founder-section {
  background: #ecf5f1;
  padding: 96px 40px 120px;
}
.about-founder-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 80px;
  align-items: start;
}

/* ===== LETTER SIDE (left, wider) ===== */
.founder-eyebrow {
  color: var(--coral, #e57b3f);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 56px;
}
.founder-eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--coral, #e57b3f);
}

/* Each labeled passage: left-rail label + body */
.founder-passage {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  margin-bottom: 36px;
  align-items: start;
}
.founder-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3, #8a93a3);
  padding-top: 8px;
  text-align: right;
  border-right: 1px solid rgba(13, 27, 42, 0.08);
  padding-right: 24px;
}
.founder-passage--thread .founder-label {
  border-right: 2px solid var(--coral, #e57b3f);
  color: var(--coral, #e57b3f);
}
.founder-body {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2, #4a5568);
}
.founder-body p { margin-bottom: 12px; }
.founder-body p:last-child { margin-bottom: 0; }
.founder-body p strong { color: var(--navy, #0d1b2a); font-weight: 600; }

/* Fraunces italic lead paragraphs (opening line, thread line) */
.founder-body .founder-lead {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--navy, #0d1b2a);
  margin-bottom: 12px;
}
.founder-body .founder-lead em {
  color: var(--teal-deep, #1f7a66);
  font-style: normal;
}

/* ===== SIDEBAR (right, sticky stack of two cards) ===== */
.founder-sidebar { position: sticky; top: 40px; }
.founder-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card 1: Quote with attribution */
.founder-quote-card {
  background: #ffffff;
  border: 1px solid rgba(13, 27, 42, 0.08);
  border-radius: 14px 14px 0 14px;
  padding: 36px 32px 32px;
  position: relative;
}
.founder-quote-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 56px;
  background: var(--teal, #2fa68c);
}
.founder-quote {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--teal-deep, #1f7a66);
  margin-bottom: 28px;
}
.founder-quote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 56px;
  line-height: 0.4;
  color: var(--teal-deep, #1f7a66);
  margin-bottom: 20px;
}
.founder-attribution {
  padding-top: 24px;
  border-top: 1px solid rgba(13, 27, 42, 0.08);
}
.founder-attribution-name {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: var(--navy, #0d1b2a);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.founder-attribution-role {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, #8a93a3);
}

/* Card 2: Principles (navy) */
.founder-principles-card {
  background: var(--navy, #0d1b2a);
  color: var(--cream, #faf7f2);
  border-radius: 14px 14px 0 14px;
  padding: 32px 28px;
}
.founder-principles-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral, #e57b3f);
  margin-bottom: 20px;
}
.founder-principle {
  padding: 14px 0;
  border-bottom: 1px solid rgba(250, 247, 242, 0.1);
}
.founder-principle:last-child { border-bottom: none; padding-bottom: 0; }
.founder-principle:first-of-type { padding-top: 0; }
.founder-principle-num {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 12px;
  color: var(--teal, #2fa68c);
  margin-bottom: 4px;
}
.founder-principle-text {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 16px;
  line-height: 1.4;
  color: var(--cream, #faf7f2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .about-founder-inner { gap: 56px; }
}
@media (max-width: 900px) {
  .about-founder-section { padding: 64px 24px 80px; }
  .about-founder-inner { grid-template-columns: 1fr; gap: 40px; }
  .founder-sidebar { position: static; order: -1; }
  .founder-passage { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .founder-label {
    text-align: left;
    border-right: none;
    border-bottom: 1px solid rgba(13, 27, 42, 0.08);
    padding-right: 0;
    padding-bottom: 8px;
    padding-top: 0;
  }
  .founder-passage--thread .founder-label {
    border-right: none;
    border-bottom: 2px solid var(--coral, #e57b3f);
  }
  .founder-body .founder-lead { font-size: 20px; }
  .founder-quote { font-size: 20px; }
  .founder-attribution-name { font-size: 18px; }
}
@media (max-width: 540px) {
  .founder-quote-card { padding: 28px 24px; }
  .founder-principles-card { padding: 28px 24px; }
  .founder-body { font-size: 16px; }
  .founder-body .founder-lead { font-size: 18px; }
  .founder-quote { font-size: 18px; }
}


/* ============================================================
   v33.8 — Resources page: Track 01 card in hero + Articles & Journals section
   Per innapace-codefix-v33.8.md §CHANGE 1 + #3.
   ============================================================ */

/* ── Track 01 card in resources hero (replaces RES-01 image) ── */
.resources-hero-card {
  /* outer wrapper — sits in .r-hero-grid right column */
}
.resources-hero-card .track-card {
  background: #ffffff;
  border: 1px solid rgba(13, 27, 42, 0.08);
  padding: 40px 36px 36px;
  border-radius: 14px 14px 0 14px;
}
.track-card .track-eyebrow {
  color: var(--coral, #e57b3f);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.track-card .track-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy, #0d1b2a);
  margin: 0 0 16px;
}
.track-card .track-headline em {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--teal-deep, #1f7a66);
  display: block;
}
.track-card .track-lead {
  font-size: 15px;
  color: var(--ink-2, #4a5568);
  line-height: 1.6;
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(13, 27, 42, 0.08);
}
.track-rows .track-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(13, 27, 42, 0.05);
}
.track-rows .track-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.track-row-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--navy, #0d1b2a);
}
.track-row-meta {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 14px;
  color: var(--ink-3, #8a93a3);
}
.track-card .track-cta { margin-top: 28px; }

@media (max-width: 900px) {
  .track-card .track-headline { font-size: 26px; }
}
@media (max-width: 540px) {
  .resources-hero-card .track-card { padding: 28px 24px; }
}

/* ── Articles & Journals section (v33.8 #3) ──────────────── */
.resources-articles {
  background: var(--cream, #faf7f2);
  padding: 96px 40px 120px;
  /* v33.8a — border-top removed; the navy Shared Struggle band above provides the
     visual separation now. Cream-on-navy contrast is sufficient. */
}
.resources-articles-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.resources-articles-header {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.resources-articles-header .eyebrow {
  color: var(--coral, #e57b3f);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  justify-content: center;
}
.resources-articles-header .eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--coral, #e57b3f);
}
.resources-articles-header h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy, #0d1b2a);
  margin: 0 0 20px;
}
.resources-articles-header h2 em {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--teal-deep, #1f7a66);
}
.resources-articles-header .lead {
  font-size: 16px;
  color: var(--ink-2, #4a5568);
  line-height: 1.6;
}

.resources-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.article-card {
  background: #ffffff;
  border: 1px solid rgba(13, 27, 42, 0.08);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border-radius: 14px 14px 0 14px;
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(13, 27, 42, 0.08);
  border-color: rgba(13, 27, 42, 0.14);
}
.article-card-image {
  aspect-ratio: 4 / 3;
  background-color: #e4efe9;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px 14px 0 0;
}
.article-card-image-placeholder {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 14px;
  color: var(--ink-3, #8a93a3);
  background: rgba(255, 255, 255, 0.6);
  padding: 6px 14px;
  border-radius: 999px;
}
.article-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.article-card-category {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral, #e57b3f);
}
.article-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy, #0d1b2a);
  margin: 0;
}
.article-card-excerpt {
  font-size: 14px;
  color: var(--ink-2, #4a5568);
  line-height: 1.55;
  flex: 1;
  margin: 0;
}
.article-card-cta {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 14px;
  color: var(--teal-deep, #1f7a66);
  margin-top: 4px;
}
.article-card-placeholder { opacity: 0.92; }
.article-card-placeholder .article-card-image { background-color: #ecf2ef; }

.resources-articles-more { text-align: center; margin-top: 48px; }
.resources-articles-more-link {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 16px;
  color: var(--teal-deep, #1f7a66);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--teal-deep, #1f7a66);
}

@media (max-width: 1024px) {
  .resources-articles-grid { grid-template-columns: repeat(2, 1fr); }
  .resources-articles-grid .article-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .resources-articles-grid { grid-template-columns: 1fr; }
  .resources-articles-grid .article-card:nth-child(3) { grid-column: auto; }
  .resources-articles { padding: 64px 20px 80px; }
  .resources-articles-header h2 { font-size: 28px; }
}


/* ============================================================
   v33.9 #1 (corrected) — For Practitioners: switch H1/H2 to Inter Bold
   to MATCH the rest of the site.

   Audit showed:
   - Homepage h1.home-headline       = Inter 700
   - About h1, About chapter h2s      = Inter 700/800
   - Find a Professional h1           = Inter 700
   - For Practitioners h1/h2 (built-in via innapace-v34-pracpage.css)
                                      = Fraunces 500 ← inconsistent!

   This rule overrides innapace-v34-pracpage.css's high-specificity
   Fraunces rule (`.page-for-practitioners .prac-hero h1`) so For Pros
   matches the rest of the site. Fraunces italic on accent words (em)
   stays — that's the site-wide pattern.
   ============================================================ */
body.page-for-practitioners .prac-hero h1,
body.page-for-practitioners .prac-section-head h2,
.page-for-practitioners .prac-hero h1,
.page-for-practitioners .prac-section-head h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
}
body.page-for-practitioners .prac-hero h1 em,
body.page-for-practitioners .prac-section-head h2 em,
.page-for-practitioners .prac-hero h1 em,
.page-for-practitioners .prac-section-head h2 em {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-style: normal;
  font-weight: 400 !important;
}

/* ============================================================
   v33.9 #2 — Find a Professional: defensive asymmetric corner lock
   v33.6 added .result-card to the v35 selectors — these defensive
   selectors layer on top to catch any GeoDirectory variant or page
   re-render that v33.6 missed. Per innapace-codefix-v33.9.md §CHANGE 2.
   ============================================================ */
.find-a-professional-page .result-card,
.find-a-professional-page .listing-card,
.find-a-professional-page article.geodir-loop-item,
.find-a-professional-page .geodir-category-list-view article,
.find-a-professional-page .gd-loop-item,
.geodir-category-list-view .geodir-loop-item,
.geodir-loop-container article,
.geodir-loop-container .gd-loop-item,
body.tax-gd_placecategory .geodir-loop-item,
body.post-type-archive-gd_place .geodir-loop-item,
.find-pro-results .practitioner-card,
.results-grid .practitioner-card,
.results-grid > article,
.results-grid > a.result-card {
  border-radius: 14px 14px 0 14px !important;
}


/* ============================================================
   v34a — About hero image (real photo, replaces ABT-01 placeholder).
   The 1200×800 family-in-doorway shot has side peripherals (coat rack
   on left, open door on right) that we crop OUT — focus stays on the
   family in the center via object-position bias.
   ============================================================ */
.a-hero-visual .a-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 38% center; /* shifted left so the little girl in pink lands in the visual center */
  /* asymmetric corner is already on .a-hero-visual via v35 design-system rule;
     img inherits via overflow:hidden on parent */
}
.a-hero-visual {
  overflow: hidden;
}
@media (max-width: 900px) {
  .a-hero-visual .a-hero-img {
    aspect-ratio: 4 / 3;
    min-height: 280px;
  }
}

/* ============================================================
   v34b — Site-wide image population (homepage + about page).
   Replaces all remaining IMG placeholders with real photos from
   the InnaPace media library. Each img inherits parent's shape
   (ovals on About Chapter 1, square corners on About Chapter 2,
   3:4 portraits on Home rooted-grid, 4:5 portrait on Home heal).
   ============================================================ */

/* --- About: Chapter 1 oval images (ABT-02/03/04) --- */
.a-oval { overflow: hidden; }
.a-oval .a-oval-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px) {
  .a-oval .a-oval-img { min-height: 180px; }
}

/* --- About: Chapter 2 square images (ABT-06/07) --- */
.a-half-cta-imgs { overflow: visible; }
.a-half-cta-imgs .a-half-cta-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 14px 14px 0 14px; /* v35 asymmetric corner */
}

/* --- Home: Rooted-in-one grid 3:4 portraits (HOME-02..06) --- */
.h-rooted-imgs .h-rooted-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: 14px 14px 0 14px;
}
.h-rooted-imgs .h-rooted-img:nth-child(2) { object-position: 50% 30%; }
.h-rooted-imgs .h-rooted-img:nth-child(4) { object-position: 55% center; }

/* --- Home: Heal-visual 4:5 portrait (HOME-07) --- */
.h-heal-visual { display: flex; flex-direction: column; gap: 22px; }
.h-heal-visual .h-heal-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 14px 14px 0 14px;
}

/* ============================================================
   v34c — Understanding Professionals hero image (UND-01 → woman
   with earbuds outdoors). 5:6 portrait to match brief; the photo
   subject sits left of center so we bias object-position right.
   ============================================================ */
.u-hero-visual { overflow: hidden; border-radius: 14px 14px 0 14px; }
.u-hero-visual .u-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px) {
  .u-hero-visual .u-hero-img {
    aspect-ratio: 4 / 3;
    min-height: 260px;
  }
}

/* ============================================================
   v34d — About hero typography upscale.
   "Rooted in Culture. Open to All." was rendering at default h1
   size, which felt undersized for the hero proportions. Bump to
   a true display scale matching the v33.5i homepage hero feel
   (without touching the homepage itself).
   ============================================================ */
.a-hero .a-hero-inner h1 {
  font-size: clamp(44px, 5.8vw, 84px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
  margin: 14px 0 22px !important;
  font-weight: 800 !important;
}
.a-hero .a-hero-inner h1 em {
  display: block;
  font-size: clamp(40px, 5.4vw, 78px) !important;
  line-height: 1.04 !important;
  font-weight: 400 !important;
}
.a-hero .a-hero-inner > div > p {
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.55 !important;
  max-width: 520px;
}
.a-hero .a-hero-inner .kicker {
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
}
@media (max-width: 900px) {
  .a-hero .a-hero-inner h1     { font-size: 40px !important; }
  .a-hero .a-hero-inner h1 em  { font-size: 36px !important; }
}

/* ============================================================
   v34f — Mobile audit pass.
   Targets all sections with desktop-only grids that lacked
   responsive overrides. Uses `body .selector` to beat any
   inline !important rules in template <style> blocks.
   Desktop rendering UNCHANGED — all rules sit inside
   @media (max-width: 760px).
   ============================================================ */

/* Prevent ANY accidental horizontal overflow site-wide. */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 760px) {

  /* ── Universal guard: no element escapes the viewport. ── */
  img, picture, video, svg { max-width: 100%; height: auto; }

  /* ────────────────────────────────────────────────
     HOMEPAGE
     ──────────────────────────────────────────────── */

  /* Hero — collapse 2-col grid to 1-col. Overrides locked desktop
     rules via `body` specificity. Hero IMAGE rendering on mobile
     only — locked desktop state untouched. */
  body .home-hero {
    padding: 20px 20px 40px !important;
    max-width: 100% !important;
  }
  body .home-hero-grid {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 28px !important;
    align-items: start !important;
  }
  body .home-hero-right {
    min-height: 360px !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    align-self: auto !important;
  }
  body .home-hero-right picture {
    position: relative !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 360px !important;
    width: 100% !important;
    display: block !important;
  }
  body .home-hero-right .home-hero-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Categories — 2-up tight grid */
  .h-categories-inner { padding: 60px 20px !important; }
  .h-categories-head { grid-template-columns: 1fr !important; gap: 18px !important; }
  .h-categories-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .h-cat { padding: 22px 16px !important; }
  .h-cat h3 { font-size: 15px !important; }
  .h-cat p { font-size: 13px !important; }

  /* Steps */
  .h-steps-inner { padding: 60px 20px !important; }
  .h-steps-head { grid-template-columns: 1fr !important; }
  .h-steps-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Rooted-in-one — 2-up grid + 5th tile spans full width */
  .h-rooted { padding: 60px 20px !important; }
  .h-rooted-head { padding: 0 !important; }
  .h-rooted-imgs {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
  }
  .h-rooted-imgs .h-rooted-img:nth-child(5) {
    grid-column: 1 / -1;
    aspect-ratio: 5 / 3 !important;
  }

  /* Heal section — stack text + image */
  .h-heal { padding: 60px 0 !important; }
  .h-heal-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 0 20px !important;
  }
  .h-heal-visual { order: 2; }

  /* FAQ */
  .h-faq { padding: 60px 20px !important; }
  .h-faq-inner { padding: 0 !important; }
  .faq-q { font-size: 15px !important; padding: 18px 0 !important; }
  .faq-a { font-size: 14px !important; }

  /* Featured strip */
  .featured-section { padding: 0 20px !important; }
  .featured-strip-header { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
  .featured-strip-label { font-size: 11px !important; }
  .refresh-link { font-size: 13px !important; text-align: left !important; }

  /* ────────────────────────────────────────────────
     ABOUT page
     ──────────────────────────────────────────────── */

  /* Hero — image above text, normal flow */
  body .a-hero { padding: 24px 0 0 !important; }
  body .a-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 20px !important;
  }
  body .a-hero-visual {
    order: -1;
    max-height: 380px;
    overflow: hidden;
  }
  body .a-hero-visual .a-hero-img {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    max-height: 380px !important;
  }

  /* Founder section */
  .about-founder-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 40px 20px !important;
  }
  .founder-passage {
    grid-template-columns: 80px 1fr !important;
    gap: 14px !important;
    padding-bottom: 22px !important;
    margin-bottom: 22px !important;
  }
  .founder-label { font-size: 10px !important; letter-spacing: 0.12em !important; }
  .founder-body p { font-size: 15px !important; line-height: 1.5 !important; }
  .founder-lead { font-size: 18px !important; }
  .founder-sidebar-stack {
    display: flex;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .founder-quote-card { padding: 26px 22px !important; }
  .founder-quote { font-size: 18px !important; }
  .founder-principles-card { padding: 24px 22px !important; }

  /* Chapters nav */
  .a-chapters-nav-inner {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 22px 20px !important;
  }
  .a-chapter-link { width: 100% !important; padding: 14px !important; }

  /* Chapter 1 (Mind) — ovals become a 3-up grid below text */
  .a-mind-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 20px !important;
  }
  .a-mind-text h2 { font-size: 32px !important; }
  .a-mind-imgs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    position: static !important;
    transform: none !important;
    height: auto !important;
  }
  .a-mind-imgs .a-oval {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }
  .a-mind-imgs .a-oval .a-oval-img {
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Chapter 2 (Body) — pullquote drops below text */
  .a-half { padding: 60px 0 !important; }
  .a-half-inner { padding: 0 20px !important; }
  .a-half h2 { font-size: 32px !important; }
  .a-half-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .a-half-text p { font-size: 15px !important; }
  .a-half-pullquote { padding: 28px 24px !important; }
  .a-half-pullquote blockquote { font-size: 19px !important; line-height: 1.45 !important; }
  .a-half-cta {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-top: 40px !important;
  }
  .a-half-cta-imgs {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .a-half-cta h3 { font-size: 26px !important; }

  /* ────────────────────────────────────────────────
     RESOURCES page
     ──────────────────────────────────────────────── */

  .r-hero { padding: 24px 0 0 !important; }
  .r-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 32px 20px 48px !important;
  }
  .r-hero h1 { font-size: 38px !important; }
  .r-hero .lead { font-size: 16px !important; }
  .resources-hero-card { width: 100% !important; }
  .resources-hero-card .track-card { padding: 28px 22px !important; }
  .track-headline { font-size: 26px !important; }

  .r-across { padding: 60px 0 !important; }
  .r-across-inner { padding: 0 20px !important; }
  .r-across-head {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }
  .r-across-head h2 { font-size: 36px !important; }
  .r-communities {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .r-community { padding: 28px 22px !important; }
  .r-community h3 { font-size: 20px !important; }
  .r-across-closer { padding: 0 !important; margin-top: 40px !important; }
  .r-across-closer p { font-size: 22px !important; }

  .resources-articles-inner { padding: 60px 20px !important; }
  .resources-articles-header h2 { font-size: 34px !important; }
  .resources-articles-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ────────────────────────────────────────────────
     FIND A PROFESSIONAL page
     ──────────────────────────────────────────────── */
  .results-shell { grid-template-columns: 1fr !important; padding: 0 20px !important; }
  .find-rail { width: 100% !important; position: static !important; margin-bottom: 24px; }
  .results-grid { grid-template-columns: 1fr !important; }
  .find-result-card { padding: 22px 20px !important; }

  /* ────────────────────────────────────────────────
     Generic tap-target safety
     ──────────────────────────────────────────────── */
  .btn, .btn-primary, .btn-teal, .btn-ghost, .btn-arrow, .cs-cta,
  a.btn, button.btn,
  .quick-cat, .answer-chip {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Slightly tighter mobile @ very narrow widths (≤ 400px) — phones in
   portrait under iPhone SE 2nd-gen width. */
@media (max-width: 400px) {
  body .home-hero { padding: 16px 16px 32px !important; }
  body .home-hero-right { min-height: 280px !important; }
  body .home-hero-right picture { height: 280px !important; }
  .h-categories-grid { grid-template-columns: 1fr !important; }
  .h-rooted-imgs { grid-template-columns: 1fr !important; }
  .h-rooted-imgs .h-rooted-img:nth-child(5) { aspect-ratio: 3 / 4 !important; }
  .a-mind-imgs { grid-template-columns: 1fr !important; }
  .a-half-cta-imgs { grid-template-columns: 1fr !important; }
}

/* ============================================================
   v34g — Mobile Burst 1.
   Adds:
   - Hamburger nav button + slide-in drawer (≤ 768px)
   - Footer 4-col → 2-col → 1-col stacking
   - Explicit h1/h2/h3 typography scale
   - Form input min-font-size 16px (prevents iOS auto-zoom on focus)
   - FAQ-specific 56px tap targets
   - Breakpoint reconciliation (760→768 + 360 tier added)
   ============================================================ */

/* ── Hamburger button — hidden on desktop, visible ≤ 768px ── */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 12px;
  cursor: pointer;
  margin-left: auto;
  width: 48px;
  height: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy, #1C2B3A);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
body.nav-drawer-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-drawer-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-drawer-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Drawer (off-canvas right) ── */
.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 43, 58, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
  z-index: 9998;
}
body.nav-drawer-open .nav-drawer-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  width: min(86vw, 360px);
  background: #fff;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(28, 43, 58, 0.18);
  overflow-y: auto;
  visibility: hidden;
}
body.nav-drawer-open .nav-drawer {
  transform: translateX(0);
  visibility: visible;
}
.nav-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--cream-deep, #E6DDC8);
}
.nav-drawer-head .logotype {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--navy, #1C2B3A);
}
.nav-drawer-head .pace {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--teal, #4AACA3);
}
.nav-drawer-close {
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  font-size: 32px;
  line-height: 1;
  color: var(--navy, #1C2B3A);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .15s;
}
.nav-drawer-close:hover { background: var(--cream, #F4EFE5); }

.nav-drawer-links {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.nav-drawer-links li { margin: 0; }
.nav-drawer-links a {
  display: block;
  padding: 16px 24px;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy, #1C2B3A);
  text-decoration: none;
  min-height: 52px;
  transition: background .15s, color .15s;
}
.nav-drawer-links a:hover,
.nav-drawer-links a:focus {
  background: var(--cream, #F4EFE5);
  color: var(--teal, #4AACA3);
}
.nav-drawer-cta {
  padding: 18px 22px 28px;
  border-top: 1px solid var(--cream-deep, #E6DDC8);
}
.nav-drawer-signin {
  display: block;
  text-align: center;
  width: 100%;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--navy, #1C2B3A);
  color: #fff !important;
  text-decoration: none;
  transition: background .2s;
}
.nav-drawer-signin:hover { background: var(--teal, #4AACA3); }

/* ── ≤ 768px: show hamburger, hide desktop nav ── */
@media (max-width: 768px) {
  .nav .nav-links,
  .nav .nav-cta-group {
    display: none !important;
  }
  .nav-burger {
    display: flex;
  }
  .nav .logotype {
    font-size: 22px;
  }
  .nav {
    padding: 14px 20px !important;
    min-height: 64px;
  }
  /* Lock body scroll when drawer open */
  body.nav-drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
}

/* ============================================================
   FOOTER — 4-col → 2-col → 1-col stack
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 36px !important;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .footer-inner { padding: 56px 20px 36px !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col h4 { font-size: 14px !important; margin-bottom: 12px !important; }
  .footer-col ul { gap: 8px; }
  .footer-col a { font-size: 14px !important; line-height: 1.6; }
  .footer-tag { font-size: 14px !important; }
  .footer-socials {
    margin-top: 18px !important;
    gap: 12px;
  }
  .footer-social {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
    padding-top: 28px !important;
    margin-top: 36px !important;
    font-size: 12px !important;
  }
  .footer-legal {
    gap: 18px !important;
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* ============================================================
   TYPOGRAPHY SCALE (mobile)
   Explicit h1/h2/h3 sizes per brief Section 1.4
   ============================================================ */
@media (max-width: 768px) {
  h1 { font-size: 44px !important; line-height: 1.08 !important; letter-spacing: -1.5px !important; }
  h2 { font-size: 36px !important; line-height: 1.15 !important; }
  h3 { font-size: 22px !important; line-height: 1.25 !important; }
}
@media (max-width: 480px) {
  h1 { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -1px !important; }
  h2 { font-size: 28px !important; line-height: 1.2 !important; }
  h3 { font-size: 20px !important; }
}
@media (max-width: 360px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
}

/* ============================================================
   FORM INPUTS — min 16px font prevents iOS zoom-on-focus
   ============================================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 14px;
  }
  textarea { min-height: 120px; }
  button[type="submit"], .btn[type="submit"] {
    min-height: 52px;
    font-size: 15px;
  }
}

/* ============================================================
   FAQ — generous tap targets per brief Section 2.8
   ============================================================ */
@media (max-width: 768px) {
  .faq-q {
    padding: 18px 0 !important;
    min-height: 56px;
    font-size: 16px !important;
    line-height: 1.4;
  }
  .faq-q-icon,
  .faq-toggle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .faq-a { font-size: 14.5px !important; }
}

/* ============================================================
   v34g.1 — Sticky mobile header.
   Keeps the hamburger reachable during scroll without affecting
   desktop, where the header stays in normal flow.
   ============================================================ */
@media (max-width: 768px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
    background: var(--cream, #F4EFE5);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    box-shadow: 0 1px 0 rgba(28, 43, 58, 0.06);
  }
  /* Drawer + backdrop must sit ABOVE the sticky header */
  .nav-drawer { z-index: 9999; }
  .nav-drawer-backdrop { z-index: 9998; }
}

/* ════════════════════════════════════════════════════════════
   v34h — InnaPace footer redesign (FitnessBeach pattern).
   Adapted to use the SITE's existing font system (Inter for body,
   Fraunces italic for accent) instead of Crimson Pro + Hanken
   Grotesk, which isn't deployed yet. Uses existing brand color
   vars (--navy, --coral, --teal) with sensible fallbacks.
   Replaces the v33.4 footer-grid CSS.
   ════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--navy, #1C2B3A);
  color: white;
  position: relative;
  overflow: hidden;
}

/* Culturis watermark — mirrors the homepage hero "Inna" treatment */
.site-footer .footer-watermark {
  position: absolute;
  bottom: -30px;
  left: -40px;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 360px;
  color: white;
  opacity: 0.04;
  line-height: 0.85;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.site-footer .footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 48px 48px;
}

/* ── Footer top: wordmark + tagline ──────────────────── */
.site-footer .footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  margin-bottom: 56px;
}

.site-footer .footer-brand-block .wordmark {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1;
  color: white;
  margin-bottom: 16px;
}
.site-footer .footer-brand-block .wordmark em {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--coral, #E07B45);
}
.site-footer .footer-brand-block .blurb {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.65;
  max-width: 380px;
}

.site-footer .footer-tagline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 4px;
}
.site-footer .footer-tagline-block .tagline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  color: white;
  text-align: right;
  margin-bottom: 20px;
  letter-spacing: -0.3px;
  max-width: 360px;
}
.site-footer .footer-tagline-block .tagline em {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--coral, #E07B45);
}
.site-footer .footer-tagline-block .platform-attr {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
}
.site-footer .footer-tagline-block .platform-attr a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer .footer-tagline-block .platform-attr a:hover {
  color: white;
}

/* ── Footer columns: 4-column grid ───────────────────── */
.site-footer .footer-columns {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr 1.1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  margin-bottom: 32px;
}

.site-footer .footer-col h4 {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: white;
  margin-bottom: 20px;
  letter-spacing: 0.2px;
}

.site-footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-col li {
  margin-bottom: 11px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.site-footer .footer-col li a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer .footer-col li a:hover {
  color: var(--teal, #4AACA3);
}
.site-footer .footer-col li .descriptor {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.40);
  white-space: nowrap;
  letter-spacing: 0.1px;
}

/* ── Social icon row (inside "In touch" column) ──────── */
.site-footer .footer-social {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer .footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.60);
  border-radius: 14px 14px 0 14px; /* v35 asymmetric corner */
  transition: color 0.2s ease, background 0.2s ease;
}
.site-footer .footer-social a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.06);
}

/* ── Footer bottom utility row ───────────────────────── */
.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 8px;
}

.site-footer .footer-bottom-left {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.1px;
}
.site-footer .footer-bottom-left em {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--coral, #E07B45);
  font-size: 13px;
}

.site-footer .footer-bottom-right {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.50);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.site-footer .footer-bottom-right a {
  color: rgba(255, 255, 255, 0.50);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer .footer-bottom-right a:hover {
  color: white;
}
.site-footer .footer-bottom-right .sep {
  color: rgba(255, 255, 255, 0.20);
}

.site-footer .footer-tagline-secondary {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
  letter-spacing: 0.1px;
  margin-top: 8px;
  width: 100%;
}

/* ── Override the old v34g footer-grid rules (which targeted .footer-grid).
   The new template uses .footer-columns instead, so .footer-grid is now
   inert. No CSS needed to retire it — just stops being applied. ── */

/* ── Mobile responsive (768 / 480 per v34g convention) ── */
@media (max-width: 980px) {
  .site-footer .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .site-footer .footer-tagline-block {
    align-items: flex-start;
  }
  .site-footer .footer-tagline-block .tagline {
    text-align: left;
  }
  .site-footer .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .site-footer .footer-watermark {
    font-size: 240px;
  }
}
@media (max-width: 768px) {
  .site-footer .footer-inner {
    padding: 56px 24px 36px;
  }
  .site-footer .footer-top {
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .site-footer .footer-columns {
    gap: 32px 24px;
    padding-bottom: 36px;
    margin-bottom: 28px;
  }
  .site-footer .footer-brand-block .wordmark {
    font-size: 36px;
  }
  .site-footer .footer-tagline-block .tagline {
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  .site-footer .footer-columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .site-footer .footer-watermark {
    font-size: 180px;
    bottom: -20px;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer .footer-bottom-right {
    flex-wrap: wrap;
    gap: 14px;
  }
  .site-footer .footer-tagline-secondary {
    text-align: left;
  }
}