/* ============================================================
   BEYOND BRAIN HEALTH — Global CSS Foundation
   Version: 2.0 — 2026
   PASTE INTO: Bricks → Settings → Custom CSS
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap");

/* ============================================================
   COLOR SYSTEM
   Source: Sandra Bargeron brand palette (BBHcolorpallet.png)

   CONTRAST VERIFIED — WCAG AA (4.5:1) minimum for all text
   ──────────────────────────────────────────────────────────
   RULE: mint (#35BD8F) and orange (#FB7A02) are BRIGHT.
   They FAIL on white/cream. Use only on dark backgrounds
   OR use the -accessible variants for text on light bg.
   ============================================================ */

:root {

  /* ── Brand primaries (from palette image) ─── */
  --brand-teal:          #005859;   /* Primary — headers, CTAs, body accent     */
  --brand-forest:        #014425;   /* Darkest — hover, dark section anchor     */
  --brand-mint:          #35BD8F;   /* Bright — ONLY on dark backgrounds        */
  --brand-orange:        #FB7A02;   /* Warm — ONLY on dark backgrounds          */
  --brand-orange-light:  #FF9A32;   /* Lightest — decorative only               */
  --brand-terracotta:    #B43000;   /* Deep warm — AA on white (5.97:1) ✅      */

  /* ── Accessible text variants for light backgrounds ─── */
  --mint-dark:           #196045;   /* 7.17:1 on white — AAA ✅ (use for text)  */
  --mint-mid:            #228060;   /* 4.64:1 on white — AA ✅                  */
  --orange-dark:         #8C4200;   /* 6.94:1 on white — AA ✅ (use for text)   */

  /* ── Surfaces ─── */
  --bg-dark:             #021C10;   /* Near-black forest — hero, dark sections  */
  --bg-dark-2:           #0A2818;   /* Lifted dark — cards on dark bg           */
  --bg-dark-3:           #0F3020;   /* Hover state for dark cards               */
  --warm-cream:          #F5F0E8;   /* Warm off-white — light section bg        */
  --soft-white:          #FAFAF7;   /* Near-white — page bg, card bg            */

  /* ── Text ─── */
  --text-primary:        #1A2B1E;   /* 14.26:1 on white — AAA ✅               */
  --text-secondary:      #3D5244;   /* 8.07:1 on white — AAA ✅                */
  --text-muted:          #506860;   /* 5.75:1 on white / 5.30:1 on cream — AA✅*/
  --text-inverse:        #F5F0E8;   /* 15.73:1 on bg-dark — AAA ✅             */
  --text-inverse-dim:    rgba(245, 240, 232, 0.72); /* ~9:1 on bg-dark — AA ✅ */

  /* ── Borders ─── */
  --border:              rgba(0, 88, 89, 0.10);
  --border-strong:       rgba(0, 88, 89, 0.22);
  --border-dark:         rgba(53, 189, 143, 0.14);
  --border-dark-strong:  rgba(53, 189, 143, 0.30);

  /* ── Washes (bg tints) ─── */
  --teal-wash:           rgba(0, 88, 89, 0.06);
  --teal-wash-hover:     rgba(0, 88, 89, 0.10);
  --mint-wash:           rgba(53, 189, 143, 0.08);
  --orange-wash:         rgba(251, 122, 2, 0.07);
  --dark-card-bg:        rgba(255, 255, 255, 0.04);
  --dark-card-hover:     rgba(255, 255, 255, 0.07);

  /* ── Backwards compat aliases ─── */
  --teal:       var(--brand-teal);
  --forest:     var(--brand-forest);
  --mint:       var(--brand-mint);
  --sage:       var(--brand-mint);
  --gold:       var(--brand-orange);
  --navy:       var(--bg-dark);
  --deep-teal:  #004546;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;

  --type-h1:    clamp(2.4rem, 6vw, 3.8rem);
  --type-h2:    clamp(1.7rem, 4vw, 2.4rem);
  --type-h3:    1.4rem;
  --type-h4:    1.15rem;
  --type-lead:  1.05rem;
  --type-body:  0.9625rem;
  --type-sm:    0.875rem;
  --type-label: 0.8125rem;
  --type-cap:   0.75rem;
  --type-tag:   0.625rem;

  --lh-display: 1.12;
  --lh-heading: 1.25;
  --lh-card:    1.3;
  --lh-body:    1.65;
  --lh-relaxed: 1.75;

  --ls-tight:   -0.02em;
  --ls-btn:      0.04em;
  --ls-label:    0.06em;
  --ls-tag:      0.14em;
  --ls-eyebrow:  0.18em;
}

/* ============================================================
   SPACING & LAYOUT
   ============================================================ */

:root {
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;

  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  --max-content: 680px;
  --max-mid:     960px;
  --max-wide:   1280px;

  --section-py: var(--s20);
  --section-px: var(--s6);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes bbh-fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bbh-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bbh-pulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.7; }
}

:root {
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --t-base: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BASE RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background-color: var(--soft-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-ui); border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font-family: var(--font-ui); }

/* ============================================================
   TYPOGRAPHY CLASSES
   ============================================================ */

/* H1 */
.bbh-h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--text-inverse);
}
.bbh-h1 em { font-style: italic; color: var(--brand-mint); }   /* bright mint on dark — AAA */
.bbh-h1.on-light { color: var(--text-primary); }
.bbh-h1.on-light em { color: var(--mint-dark); }               /* dark mint on white — AAA */

/* H2 */
.bbh-h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--brand-teal);                                      /* 7.91:1 on white — AAA */
  margin-bottom: var(--s5);
}
.bbh-h2.on-dark { color: var(--text-inverse); }

/* H3 */
.bbh-h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: var(--lh-card);
  color: var(--brand-teal);                                      /* AAA on white */
}
.bbh-h3.on-dark { color: var(--text-inverse); }

/* H4 */
.bbh-h4 {
  font-family: var(--font-display);
  font-size: var(--type-h4);
  font-weight: 600;
  line-height: var(--lh-card);
  color: var(--text-primary);
}

/* Lead */
.bbh-lead {
  font-family: var(--font-ui);
  font-size: var(--type-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);                                  /* AAA */
  font-weight: 300;
}
.bbh-lead.on-dark { color: var(--text-inverse-dim); }

/* Body */
.bbh-body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.bbh-body.on-dark { color: var(--text-inverse-dim); }

/* Caption */
.bbh-caption {
  font-family: var(--font-ui);
  font-size: var(--type-cap);
  line-height: var(--lh-body);
  color: var(--text-muted);                                      /* AA */
}
.bbh-caption.on-dark { color: rgba(245,240,232,0.60); }

/* Eyebrow (section label) */
.bbh-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--type-tag);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--mint-dark);                                       /* 7.17:1 on white — AAA */
  margin-bottom: var(--s3);
}
.bbh-eyebrow.on-dark { color: var(--brand-mint); }              /* bright mint on dark — AAA */

/* Tag chip */
.bbh-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--teal-wash);
  border-radius: var(--r-full);
  font-family: var(--font-ui);
  font-size: var(--type-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--brand-teal);                                      /* AAA on teal-wash */
}
.bbh-tag.on-dark {
  background: var(--border-dark);
  color: var(--brand-mint);                                      /* bright mint on dark — AAA */
}
.bbh-tag.v-orange {
  background: var(--orange-wash);
  color: var(--orange-dark);                                     /* 6.94:1 on orange-wash — AA */
}

/* ============================================================
   ATOMIC COMPONENTS
   ============================================================ */

/* ── btn-primary ─── */
.bbh-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.8125rem 1.625rem;
  background: var(--brand-teal);
  color: var(--soft-white);                                      /* 7.91:1 — AAA */
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-fast);
}
.bbh-btn-primary:hover {
  background: var(--brand-forest);
  box-shadow: 0 4px 20px rgba(1,68,37,0.35);
  transform: translateY(-1px);
}
.bbh-btn-primary:active { transform: scale(0.97) translateY(0); box-shadow: none; }
.bbh-btn-primary svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0;
  transition: transform var(--t-fast);
}
.bbh-btn-primary:hover svg { transform: translateX(2px); }

/* Variant: mint — use on dark sections */
.bbh-btn-primary.v-mint {
  background: var(--brand-mint);
  color: var(--brand-forest);                                    /* 10.83:1 on mint — AAA */
}
.bbh-btn-primary.v-mint:hover { background: #2DA87A; box-shadow: 0 4px 20px rgba(53,189,143,0.30); }

/* Variant: ghost — subtle on dark */
.bbh-btn-primary.v-ghost {
  background: rgba(53,189,143,0.12);
  color: var(--brand-mint);                                      /* AAA on dark */
  border: 1px solid var(--border-dark);
}
.bbh-btn-primary.v-ghost:hover { background: rgba(53,189,143,0.22); border-color: var(--border-dark-strong); box-shadow: none; }

/* ── btn-outline ─── */
.bbh-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--brand-teal);                                      /* 7.91:1 on white — AAA */
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  border: 1.5px solid var(--brand-teal);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
}
.bbh-btn-outline:hover {
  background: var(--brand-teal);
  color: var(--soft-white);
  box-shadow: 0 4px 16px rgba(0,88,89,0.25);
  transform: translateY(-1px);
}
.bbh-btn-outline:active { transform: scale(0.97); }
.bbh-btn-outline.on-dark {
  color: var(--brand-mint);                                      /* AAA on dark */
  border-color: rgba(53,189,143,0.45);
}
.bbh-btn-outline.on-dark:hover {
  background: var(--brand-mint);
  color: var(--brand-forest);
  border-color: var(--brand-mint);
}

/* ── btn-subscribe ─── */
.bbh-btn-subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem 1.5rem;
  background: var(--brand-teal);
  color: var(--soft-white);                                      /* AAA */
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-base), box-shadow var(--t-base);
}
.bbh-btn-subscribe:hover { background: var(--brand-forest); box-shadow: 0 4px 16px rgba(1,68,37,0.3); }

/* ── cta-link ─── */
.bbh-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--type-cap);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-mint);                                      /* on dark — AAA */
  text-decoration: none;
  transition: color var(--t-base), gap var(--t-base);
}
.bbh-cta-link:hover { gap: 10px; color: var(--soft-white); }
.bbh-cta-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; flex-shrink: 0; }
.bbh-cta-link.on-light { color: var(--mint-dark); }             /* 7.17:1 — AAA */
.bbh-cta-link.on-light:hover { color: var(--brand-forest); }

/* ── Section Divider ─── */
.bbh-divider {
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-teal));
  border: none;
  border-radius: var(--r-full);
  margin: 0 auto var(--s8);
}
.bbh-divider.left { margin-left: 0; margin-right: auto; }
.bbh-divider.on-light { background: linear-gradient(90deg, var(--brand-teal), var(--brand-forest)); }

/* ── Frame Block ─── */
.bbh-frame-block {
  position: relative;
  background: var(--soft-white);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand-teal);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s10) var(--s8);
  margin: var(--s10) 0;
  overflow: hidden;
}
.bbh-frame-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--teal-wash) 0%, transparent 55%);
  pointer-events: none;
}
.bbh-frame-block h3 { font-family: var(--font-display); font-size: var(--type-h3); font-weight: 600; color: var(--brand-teal); margin-bottom: var(--s4); line-height: var(--lh-card); }
.bbh-frame-block p { font-family: var(--font-ui); font-size: var(--type-body); color: var(--text-secondary); line-height: var(--lh-body); }
.bbh-frame-block .bbh-sub-note { display: block; margin-top: var(--s4); font-family: var(--font-ui); font-size: var(--type-cap); color: var(--text-muted); font-style: italic; }
.bbh-frame-block.v-mint { border-left-color: var(--mint-dark); background: rgba(25,96,69,0.04); }
.bbh-frame-block.v-mint h3 { color: var(--mint-dark); }
.bbh-frame-block.v-orange { border-left-color: var(--brand-terracotta); background: rgba(180,48,0,0.04); }
.bbh-frame-block.v-orange h3 { color: var(--brand-terracotta); }
.bbh-frame-block.on-dark { background: var(--bg-dark-2); border-color: var(--border-dark-strong); border-left-color: var(--brand-mint); }
.bbh-frame-block.on-dark h3 { color: var(--brand-mint); }
.bbh-frame-block.on-dark p { color: var(--text-inverse-dim); }

/* ── Research Card ─── */
.bbh-research-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--soft-white);
  text-decoration: none;
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.bbh-research-card:hover {
  border-color: var(--brand-teal);
  background: var(--teal-wash-hover);
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(1,68,37,0.04), 0 8px 24px rgba(1,68,37,0.10);
}
.bbh-research-card .bbh-tag { align-self: flex-start; }
.bbh-research-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--brand-teal); line-height: var(--lh-card); }
.bbh-research-card p { font-family: var(--font-ui); font-size: var(--type-sm); color: var(--text-secondary); line-height: var(--lh-body); flex: 1; }
.bbh-research-card .bbh-read-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: var(--type-cap); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--mint-dark);                                       /* 7.17:1 — AAA */
  margin-top: var(--s2);
  transition: color var(--t-base), gap var(--t-base);
}
.bbh-research-card .bbh-read-more svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.bbh-research-card:hover .bbh-read-more { gap: 10px; color: var(--brand-forest); }
.bbh-research-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }

/* ── Tier Card ─── */
.bbh-tier-card {
  position: relative;
  background: var(--dark-card-bg);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  padding: var(--s8) var(--s6);
  overflow: hidden;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.bbh-tier-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--brand-mint), transparent);
  opacity: 0;
  transition: opacity var(--t-base);
}
.bbh-tier-card:hover { border-color: var(--border-dark-strong); background: var(--dark-card-hover); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.bbh-tier-card:hover::before { opacity: 1; }
.bbh-tier-card .bbh-tier-label { display: block; font-family: var(--font-ui); font-size: var(--type-tag); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--brand-mint); margin-bottom: var(--s3); }
.bbh-tier-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--text-inverse); margin-bottom: var(--s3); line-height: var(--lh-card); }
.bbh-tier-card p { font-family: var(--font-ui); font-size: var(--type-sm); color: var(--text-inverse-dim); line-height: var(--lh-body); margin-bottom: var(--s6); }
.bbh-tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }

/* ── Resource Link ─── */
.bbh-resource-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--soft-white);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.bbh-resource-link:hover { border-color: var(--brand-teal); background: var(--teal-wash); transform: translateX(3px); }
.bbh-resource-link strong { display: block; font-family: var(--font-ui); font-size: var(--type-sm); font-weight: 500; color: var(--text-primary); }
.bbh-resource-link span { display: block; font-family: var(--font-ui); font-size: var(--type-cap); color: var(--text-muted); margin-top: var(--s1); }
.bbh-resource-link svg { width: 16px; height: 16px; stroke: var(--brand-teal); fill: none; stroke-width: 2; flex-shrink: 0; transition: transform var(--t-fast); }
.bbh-resource-link:hover svg { transform: translateX(3px); }
.bbh-resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }

/* ── Email Form ─── */
.bbh-email-form { display: flex; gap: var(--s3); max-width: 460px; margin: 0 auto; }
.bbh-email-form input[type="email"] {
  flex: 1;
  padding: 0.8125rem 1.125rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  background: var(--soft-white);
  color: var(--text-primary);
  outline: none;
  -webkit-appearance: none;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.bbh-email-form input[type="email"]:focus { border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(0,88,89,0.12); }
.bbh-email-form input[type="email"]::placeholder { color: var(--text-muted); }

/* ── Video Wrapper ─── */
.bbh-video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 600px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-dark-2);
  border: 1px solid var(--border-dark);
  cursor: pointer;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.bbh-video-wrapper:hover { border-color: var(--border-dark-strong); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.bbh-video-wrapper iframe, .bbh-video-wrapper video { width: 100%; height: 100%; border: none; }
.bbh-video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: var(--r-full);
  background: rgba(0,88,89,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.bbh-video-wrapper:hover .bbh-video-play-btn { background: var(--brand-teal); transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 12px rgba(0,88,89,0.15); }
.bbh-video-play-btn svg { width: 22px; height: 22px; fill: var(--soft-white); margin-left: 3px; }

/* ── Podcast Card ─── */
.bbh-podcast-card { display: grid; grid-template-columns: 100px 1fr; gap: var(--s8); align-items: start; }
.bbh-podcast-art {
  width: 100px; height: 100px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand-teal), var(--brand-forest));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.bbh-podcast-art svg { width: 34px; height: 34px; stroke: var(--brand-mint); fill: none; stroke-width: 1.5; }
.bbh-podcast-art img { width: 100%; height: 100%; object-fit: cover; }
.bbh-podcast-content h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--text-inverse); margin-bottom: var(--s3); line-height: var(--lh-card); }
.bbh-podcast-content p { font-family: var(--font-ui); font-size: var(--type-sm); color: var(--text-inverse-dim); line-height: var(--lh-body); margin-bottom: var(--s4); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.bbh-container { width: 100%; max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--section-px); }
.bbh-container-content { width: 100%; max-width: var(--max-content); margin: 0 auto; padding: 0 var(--section-px); }
.bbh-section { padding: var(--section-py) var(--section-px); }
.bbh-section.dark   { background: var(--bg-dark); }
.bbh-section.dark-2 { background: var(--bg-dark-2); }
.bbh-section.cream  { background: var(--warm-cream); }
.bbh-section.white  { background: var(--soft-white); }

body.bbh-scroll-locked { overflow: hidden; }

.bbh-fade-up { animation: bbh-fadeUp 0.9s var(--ease-out) both; }
.bbh-fade-up.d1 { animation-delay: 0.12s; }
.bbh-fade-up.d2 { animation-delay: 0.24s; }
.bbh-fade-up.d3 { animation-delay: 0.36s; }
.bbh-fade-up.d4 { animation-delay: 0.48s; }

.bbh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .bbh-tier-grid { grid-template-columns: 1fr; }
  :root { --section-py: var(--s16); }
}
@media (max-width: 640px) {
  .bbh-research-grid,
  .bbh-tier-grid,
  .bbh-resource-grid { grid-template-columns: 1fr; }
  .bbh-podcast-card { grid-template-columns: 1fr; text-align: center; }
  .bbh-podcast-art { margin: 0 auto; }
  .bbh-email-form { flex-direction: column; }
  .bbh-email-form input[type="email"],
  .bbh-btn-subscribe { width: 100%; }
  :root { --section-py: var(--s12); --section-px: var(--s4); }
}