/* ============================================================
   SITE-WIDE overrides — www.srinivasbojanapu.in (v2)
   Linked from includes/header.php → every page.
   Goals:
     1. Tight vertical rhythm — remove dead space, keep architecture
     2. Typographic hierarchy that actually highlights key content
     3. Topic-coloured icons on hub cards + section headings
   ============================================================ */


/* ============================================================
   1. TYPE SYSTEM
   Inter              → body + UI (unchanged)
   Plus Jakarta Sans  → headings (more character than Inter)
   DM Serif Display   → highlight moments: hero accent line,
                        big numerals, quote mark, testimonial voice
   ============================================================ */

h1, h2, h3, h4, h5 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.024em;
}
h1 { font-weight: 800; letter-spacing: -0.03em; }
h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }

/* Sizes stay exactly as style.css defines them (clamp-based) — Jakarta is a
   touch wider than Inter, so guard against wrap/overflow instead of resizing. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
h1, h2 { text-wrap: balance; }

/* Hero accent line — editorial serif highlight */
.hero h1 .gradient-text {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.008em;
  color: var(--brand-primary);
}

/* Big figures — serif numerals read as "authority" */
.hero-stat-num,
.stat-number {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.advantage-num { font-family: 'DM Serif Display', Georgia, serif; color: #B7C5D6; }

/* Section step numbers (inline-styled 01 / 02 / 03–05) */
#transplant-journey .card > div[aria-hidden="true"] {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 34px !important;
  color: #C3D0DE !important;
  line-height: 1;
}

/* Testimonials — pull-quote voice */
.testimonial-text {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
}

/* Emphasised keywords inside body copy */
.hero-sub strong,
.section p strong,
.section-header p strong {
  color: var(--brand-primary);
  font-weight: 700;
}

/* Eyebrow badges — tighter, more deliberate */
.badge { letter-spacing: 1.4px; }


/* ============================================================
   2. SECTION RHYTHM — was 64 / 80 / 88px per side
   ============================================================ */
.section { padding: 44px 0; }
@media (min-width: 768px)  { .section { padding: 56px 0; } }
@media (min-width: 1024px) { .section { padding: 64px 0; } }

/* Section header block — was 44/48px */
.section-header { margin-bottom: 26px; }
.section-header .badge { margin-bottom: 10px; }
.section-header h2 { margin-bottom: 10px; }
.section-header p  { margin-top: 2px; }


/* ============================================================
   3. HERO — was 72px top, 44/36/28px block margins, 64px gutter
   ============================================================ */
.hero { padding-top: 44px; }
@media (min-width: 768px)  { .hero { padding-top: 56px; } }
.hero-eyebrow    { margin-bottom: 14px; }
.hero h1         { margin-bottom: 12px; }
.hero-sub        { margin-bottom: 20px; }
.hero-credentials{ margin-bottom: 24px; }
.hero-actions    { margin-bottom: 30px; }
.hero-stat-item  { padding: 14px 10px; }
@media (min-width: 1024px) { .hero-grid { gap: 44px; } }


/* ============================================================
   4. GRIDS & CARDS — was 24px gap, 32px card padding
   ============================================================ */
.grid-2, .grid-3 { gap: 18px; }
.grid-4          { gap: 16px; }

.card { padding: 24px 22px; }
.card h4, .card h3 { margin-bottom: 6px; }

/* Comparison table (Why Fragmented Care) */
.comparison-col         { padding: 28px 24px; }
.comparison-col:nth-child(2) { padding: 32px 26px; }
.comparison-header      { margin-bottom: 18px; }
.comparison-list li     { padding: 7px 0; }

/* Numbered advantage list */
.advantage-item { padding: 16px 0; gap: 18px; }

/* Conditions / expertise cards */
.grid-3 .card p { margin-bottom: 10px; }


/* ============================================================
   5. SECTION-SPECIFIC TIGHTENING
   ============================================================ */
/* Transplant journey: SVG wrap had 20px padding + 40px block margin */
#transplant-journey .infographic-wrap { padding: 4px 0 !important; }
#transplant-journey .grid-3           { margin-top: 24px !important; }

/* Locations — placeholder "map" was 240px of dead space */
.location-map-placeholder {
  height: 116px !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 6px;
}
.location-map-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.location-body   { padding: 20px 22px; }
.location-meta   { margin-bottom: 12px; }
.location-row    { margin-bottom: 8px; }
.location-actions{ margin-top: 16px; gap: 8px; }

/* Blog — thumb was 200px, meta row spacing loose */
.blog-thumb { height: 152px; }
.blog-body  { padding: 20px 22px; }
.blog-body h3 { margin-bottom: 8px; }
.blog-meta  { margin-top: 10px; }
#blog .grid-2 { margin-top: 26px !important; }

/* Testimonials */
#testimonials .grid-3 { gap: 18px; }
#testimonials .btn    { margin-top: 6px; }

/* CTA banner — padding + contrast fix
   (.section h2 / .section p were overriding the white text) */
.cta-banner { padding: 40px 32px; }
.section .cta-banner h2 { color: var(--white); }
.section .cta-banner p  { color: rgba(255,255,255,0.82); margin-bottom: 26px; }

/* Footer */
.site-footer { padding-top: 44px; }
.footer-grid { gap: 32px; padding-bottom: 36px; }

/* ============================================================
   Topic-coded, colourful icons — hub cards + section headings
   ============================================================ */
.accent-teal   { --a: #0D9488; --at: rgba(13,148,136,0.13); }
.accent-blue   { --a: #2563EB; --at: rgba(37,99,235,0.11); }
.accent-cyan   { --a: #0891B2; --at: rgba(8,145,178,0.13); }
.accent-green  { --a: #16A34A; --at: rgba(22,163,74,0.13); }
.accent-lime   { --a: #65A30D; --at: rgba(101,163,13,0.15); }
.accent-amber  { --a: #D97706; --at: rgba(217,119,6,0.13); }
.accent-rose   { --a: #E11D48; --at: rgba(225,29,72,0.10); }
.accent-violet { --a: #7C3AED; --at: rgba(124,58,237,0.10); }
.accent-red    { --a: #DC2626; --at: rgba(220,38,38,0.10); }

.why-choose-card .why-choose-icon,
.expertise-card .expertise-icon,
.condition-card .condition-icon {
  background: var(--at);
  transition: background 0.25s ease, transform 0.25s ease;
}
.condition-card .condition-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}
.why-choose-card .why-choose-icon svg,
.expertise-card .expertise-icon svg,
.condition-card .condition-icon svg {
  stroke: var(--a);
  transition: stroke 0.25s ease;
}

/* hover — tile fills with the topic colour, glyph goes white */
.why-choose-card:hover .why-choose-icon,
.expertise-card:hover .expertise-icon,
.condition-card:hover .condition-icon {
  background: var(--a);
  transform: scale(1.06);
}
.why-choose-card:hover .why-choose-icon svg,
.expertise-card:hover .expertise-icon svg,
.condition-card:hover .condition-icon svg { stroke: var(--white); }

/* icon in the label pill above each section heading */
.section-header .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-ic {
  width: 13px;
  height: 13px;
  flex: none;
  stroke: var(--a);
  transition: transform 0.25s ease;
}
.section-header .badge:hover .badge-ic { transform: scale(1.18); }

/* ============================================================
   Inner pages — colourful, topic-relevant icons
   ============================================================ */

/* Marker tile: sits INSIDE the h2 as the first flex item, so it adds
   no extra vertical space (rhythm stays tight). */
.section-header h2 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-header.centered h2 { justify-content: center; }
.heading-ic {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--at);
}
.heading-ic svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--a);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Font Awesome placeholders (stylesheet never loaded) → real inline svg */
.fa-ic {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--a);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}

/* Icon slots: newly created on inner hub cards + slots that already exist */
.expertise-card .expertise-card-icon,
.why-icon,
.gi-cancer-icon,
.trigger-icon,
.cred-icon {
  background: var(--at);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.expertise-card .expertise-card-icon svg,
.why-icon svg,
.gi-cancer-icon svg,
.trigger-icon svg,
.cred-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--a);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s ease;
}
.expertise-card:hover .expertise-card-icon,
.why-card:hover .why-icon,
.gi-cancer-card:hover .gi-cancer-icon,
.trigger-card:hover .trigger-icon,
.cred-card:hover .cred-icon {
  background: var(--a);
  transform: scale(1.06);
}
.expertise-card:hover .expertise-card-icon svg,
.why-card:hover .why-icon svg,
.gi-cancer-card:hover .gi-cancer-icon svg,
.trigger-card:hover .trigger-icon svg,
.cred-card:hover .cred-icon svg { stroke: var(--white); }


/* ============================================================
   FIXED TYPE SCALE + REFLOW SAFETY
   Font sizes are pinned per breakpoint (no vw/clamp), so zooming
   in or out never changes the type size — layout reflows instead.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
h4 { font-size: 17px; }
.hero-sub { font-size: 17px; }
.hero-stat-num { font-size: 24px; }
.stat-number { font-size: 30px; }
.page-hero h1 { font-size: 27px; }
.section-header h2 { font-size: 24px; }
.section h2, .section-alt h2 { font-size: 24px; }
.section h3, .section-alt h3 { font-size: 18px; }

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }
  h4 { font-size: 19px; }
  .hero-sub { font-size: 19px; }
  .hero-stat-num { font-size: 28px; }
  .stat-number { font-size: 40px; }
  .page-hero h1 { font-size: 40px; }
  .section-header h2 { font-size: 26px; }
  .section h2, .section-alt h2 { font-size: 26px; }
  .section h3, .section-alt h3 { font-size: 20px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 52px; }
  h2 { font-size: 36px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
  .hero-sub { font-size: 20px; }
  .hero-stat-num { font-size: 30px; }
  .stat-number { font-size: 44px; }
  .page-hero h1 { font-size: 3.2rem; }
  .section-header h2 { font-size: 32px; }
  .section h2, .section-alt h2 { font-size: 32px; }
  .section h3, .section-alt h3 { font-size: 21px; }
}

/* Reflow safety: text wraps instead of overflowing at any zoom level */
p, li, td, th, summary, dd, dt, figcaption, blockquote { overflow-wrap: break-word; word-break: normal; }
.grid-2 > *, .grid-3 > *, .related-grid > *, .container, .section-header,
.hero-content, .cta-actions, .hero-actions, .card, .faq-item { min-width: 0; }
.hero-actions .btn, .cta-actions .btn, .faq-question, .faq-answer p { max-width: 100%; }

/* ============================================================
   MOBILE ONLY — max-width: 767px.  Desktop (>=768px) untouched.
   1. mia-ai gold palette      2. 8-screen decision-funnel order
   3. Collapsible long blocks  4. Sticky action bar
   ============================================================ */
.m-more, .m-bar { display: none; }

@media (max-width: 767px) {

  /* ---- 1. Gold palette (tokens lifted from mia-ai.net) ---- */
  :root {
    --bg-primary:   #f8f4ef;
    --bg-secondary: #f1e9df;
    --bg-premium:   #f6ecd6;
    --brand-primary:#7a5a2e;
    --brand-secondary:#a4804c;
    --accent:       #b8914f;
    --text-primary: #1d1a17;
    --text-secondary:#4a4038;
    --text-light:   #62584e;
    --text-muted:   #95897c;
    --divider:      rgba(92,70,42,0.16);
    --surface:      #fffdfa;
    --surface-alt:  #faf6f0;
    --surface-raised:#fffdfa;
    --shadow-sm: 0 1px 2px rgba(60,44,24,.05), 0 2px 8px -2px rgba(60,44,24,.10);
    --shadow-md: 0 1px 2px rgba(60,44,24,.05), 0 10px 24px -14px rgba(60,44,24,.20);
    --shadow-lg: 0 2px 4px rgba(60,44,24,.06), 0 18px 44px -18px rgba(60,44,24,.24);
    --shadow-xl: 0 4px 8px rgba(60,44,24,.07), 0 26px 60px -24px rgba(60,44,24,.28);
    --success:   #2f8a57;
  }
  body { background: var(--bg-primary); color: var(--text-primary); }
  .site-header { background: rgba(255,253,250,.94); border-bottom: 1px solid var(--divider); }
  .site-footer { background: #2b2012; }
  .hero { background: linear-gradient(160deg, #fdfbf7 0%, #f6ecd6 55%, #eeddc0 100%); }
  .cta-banner { background: linear-gradient(160deg, #2b2012 0%, #7a5a2e 100%); }
  .btn-primary {
    background: linear-gradient(100deg, #b38b4f 0%, #d7b77c 30%, #f0dcaa 50%, #d7b77c 70%, #b38b4f 100%);
    color: #2b2012;
    border: none;
  }
  .btn-primary:hover {
    background: linear-gradient(100deg, #a37b41 0%, #c9a86e 30%, #ecd6a0 50%, #c9a86e 70%, #a37b41 100%);
    color: #2b2012;
    box-shadow: 0 8px 20px -8px rgba(122,90,46,.55);
  }

  /* ---- 2. Decision-funnel order (visual only — DOM order untouched) ---- */
  body { display: flex; flex-direction: column; }
  body > .site-header          { order: 0; }
  body > section.hero          { order: 10; }   /* who + speciality + CTA */
  body > #credentials          { order: 20; }   /* trust */
  body > #conditions           { order: 30; }   /* "is this my problem?" */
  body > #why-choose           { order: 40; }
  body > #expertise            { order: 50; }
  body > #testimonials         { order: 60; }   /* proof */
  body > #locations            { order: 70; }   /* where */
  body > #advantage,
  body > #difference,
  body > #transplant-journey,
  body > #blog                 { order: 80; }   /* collapsed */
  body > section:not([id]):not(.hero) { order: 90; }  /* final CTA */
  body > footer                { order: 100; }

  /* ---- 3. Tighter rhythm + denser grids ---- */
  .section { padding: 30px 0; }
  .grid-3  { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .grid-2  { gap: 14px; }
  .section-header { margin-bottom: 18px; }
  .section-header h2 { font-size: 22px; gap: 10px; }
  .section-header .heading-ic { width: 32px; height: 32px; border-radius: 10px; }
  .section-header .heading-ic svg { width: 18px; height: 18px; }
  .section-header > p { display: none !important; }
  .expertise-card { padding: 20px 16px; }
  .expertise-card h3 { font-size: 16px; }

  /* ---- 3b. Collapsible long sections ---- */
  .m-collapse:not(.m-open):not(.m-deep) .container > *:not(.section-header):not(.m-more):not(h2) { display: none !important; }
  .m-deep:not(.m-open) .m-outer > *:not(.section-header):not(.m-more):not(h2) { display: none !important; }
  .m-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 11px 20px;
    border: 1px solid var(--brand-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--brand-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .m-more::after { content: '\2193'; font-size: 13px; }
  .m-collapse.m-open .m-more::after { content: '\2191'; }
  .m-more:active { background: var(--brand-primary); color: var(--white); }

  /* ---- 4. Sticky action bar ---- */
  .m-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(43,32,18,.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(232,211,166,.35);
    box-shadow: 0 -8px 24px rgba(60,44,24,.28);
  }
  .m-bar-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 6px;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    color: #f0dcaa;
    background: rgba(232,211,166,.10);
    border: 1px solid rgba(232,211,166,.30);
  }
  .m-bar-btn svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    flex: none;
  }
  .m-bar-primary {
    background: linear-gradient(100deg, #b38b4f 0%, #d7b77c 45%, #f0dcaa 100%);
    color: #2b2012;
    border-color: transparent;
  }
  body { padding-bottom: 74px; }

  /* ---- 5. Hub cards become a horizontal swipe row (was: vertical stack) ---- */
  body.page-home #why-choose .grid-2,
  body.page-home #expertise .grid-3,
  body.page-home #conditions .grid-3,
  body.page-home #testimonials .grid-3,
  body.page-home #locations .grid-2,
  body.page-home #credentials .credentials-two-col {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-auto-rows: 1fr;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    gap: 12px;
    padding: 2px 2px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.page-home #why-choose .grid-2::-webkit-scrollbar,
  body.page-home #expertise .grid-3::-webkit-scrollbar,
  body.page-home #conditions .grid-3::-webkit-scrollbar,
  body.page-home #testimonials .grid-3::-webkit-scrollbar,
  body.page-home #locations .grid-2::-webkit-scrollbar,
  body.page-home #credentials .credentials-two-col::-webkit-scrollbar { display: none; }
  body.page-home #why-choose .grid-2 > *,
  body.page-home #expertise .grid-3 > *,
  body.page-home #conditions .grid-3 > *,
  body.page-home #testimonials .grid-3 > *,
  body.page-home #locations .grid-2 > *,
  body.page-home #credentials .credentials-two-col > * {
    scroll-snap-align: start;
    min-width: 0;
  }

  /* ---- 6. Sections that don't win patients are hidden on mobile ---- */
  body.page-home > #advantage,
  body.page-home > #difference,
  body.page-home > #transplant-journey,
  body.page-home > #blog { display: none !important; }

  /* ---- 7. Leaner hero, CTA and footer (mobile only) ---- */
  body.page-home .hero { padding-top: 30px; padding-bottom: 26px; }
  body.page-home .hero-image-wrap { max-height: 260px; overflow: hidden; }
  body.page-home .hero-image-wrap img { height: 260px; width: 100%; object-fit: cover; object-position: 50% 10%; }
  body.page-home .hero-trust-badge { display: none; }
  .cta-banner { padding: 30px 22px; }
  section.cta-banner > p { display: none !important; }
  section.cta-banner h2 { font-size: 24px; margin-bottom: 8px; }
  .page-hero p { font-size: 16px; }
  .site-footer { padding: 34px 0 24px; }
  .footer-grid { gap: 22px; }
  .footer-grid > div:nth-child(5) { display: none; }   /* Our Network column */
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .footer-links li { font-size: 13px; }

  /* ---- 8. Full-width stylish brand bar (mobile) ---- */
  .site-header { border-bottom: none; }
  .site-header::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #b38b4f 0%, #f0dcaa 50%, #b38b4f 100%);
    opacity: .7;
  }
  .header-inner { padding: 9px 14px 3px; gap: 8px; }
  .logo { flex: 1 1 auto; min-width: 0; gap: 9px; }
  .logo img { height: 42px; width: 42px; }
  .logo-text { flex: 1 1 auto; min-width: 0; line-height: 1.18; }
  .logo-name {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: .2px;
    color: #2b2012;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .logo-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .65px;
    text-transform: uppercase;
    color: #a4804c;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- 9. Breadcrumb graphics (mobile) ---- */
  .breadcrumb-nav { margin-bottom: 12px; }
  .breadcrumb-list { gap: 0; font-size: 12px; flex-wrap: nowrap; }
  .breadcrumb-list li { gap: 0; }
  .breadcrumb-list li:first-child a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(232,211,166,.45);
    color: #f0dcaa; font-weight: 600;
  }
  .breadcrumb-list li:first-child a::before {
    content: ''; width: 12px; height: 12px; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .breadcrumb-list [aria-hidden="true"] {
    font-size: 0; padding: 0 8px; color: #e8d3a6;
    display: inline-flex; align-items: center;
  }
  .breadcrumb-list [aria-hidden="true"]::after {
    content: ''; width: 6px; height: 6px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    border-radius: 1px;
  }
  .breadcrumb-list [aria-current="page"] {
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    background: linear-gradient(100deg, #b38b4f 0%, #d7b77c 100%);
    color: #2b2012;
    max-width: 56vw;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- 10. Swift open / close / accordion ---- */
  .mobile-nav { transition: transform .2s cubic-bezier(.3,0,.2,1); will-change: transform; }
  .mobile-nav-sub {
    display: block;
    max-height: 0; overflow: hidden; visibility: hidden; opacity: 0;
    margin-bottom: 0;
    transition: max-height .22s ease, opacity .15s ease, visibility 0s linear .22s;
  }
  .mobile-nav-sub.open {
    max-height: 560px; visibility: visible; opacity: 1;
    margin-bottom: 4px;
    transition: max-height .24s ease, opacity .18s ease .04s, visibility 0s;
  }
  .menu-toggle span { transition: transform .16s ease, opacity .1s ease; }
  .accordion-arrow { transition: transform .16s ease; }

  /* ---- 11. All pages: related cards swipe, hidden sections, safe tables ---- */
  .related-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-auto-rows: 1fr;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    gap: 12px;
    padding: 2px 2px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .related-grid::-webkit-scrollbar { display: none; }
  .related-grid > * { scroll-snap-align: start; min-width: 0; }
  .m-hide { display: none !important; }
  .section table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }
  .section .faq-question { font-size: 15.5px; }
  .section .faq-answer { font-size: 15px; line-height: 1.6; }

  /* ---- 12. mia-ai palette pass — remove the remaining blue (mobile only) ---- */

  /* Big banners: navy gradients -> bronze/gold (emergency red variants kept) */
  .page-hero:not(.page-hero-emergency),
  section.cta-banner:not(.cta-banner-urgent),
  .cta-banner:not(.cta-banner-urgent) {
    background: linear-gradient(155deg, #2b2012 0%, #4a3517 58%, #7a5a2e 100%) !important;
  }

  /* Navy-tinted chips / eyebrows / info boxes */
  .badge       { background: rgba(164,128,76,0.14); }
  .badge--white{ background: rgba(255,253,250,0.18); }
  .hero-eyebrow{ background: rgba(164,128,76,0.10); border-color: rgba(164,128,76,0.35); }
  .info-box    { background: #f7f1e6; border: 1px solid #e8d3a6; border-left: 4px solid var(--brand-primary); }

  /* Topic accent tiles: cool hues -> gold family */
  .accent-blue  { --a: #a4804c; --at: rgba(164,128,76,0.14); }
  .accent-cyan  { --a: #96753f; --at: rgba(150,117,63,0.14); }
  .accent-violet{ --a: #7a5a2e; --at: rgba(122,90,46,0.12); }
  .accent-teal  { --a: #8f6d38; --at: rgba(143,109,56,0.13); }

  /* Inline colours baked into page markup (won a normal rule can't win here) */
  [style*="color:#0f4c81" i]      { color: #7a5a2e !important; }
  [style*="background:#0f4c81" i] { background: #7a5a2e !important; }
  [style*="solid #0f4c81" i]      { border-color: #7a5a2e !important; }
  [style*="color:#0891b2" i]      { color: #a4804c !important; }
  [style*="solid #0891b2" i]      { border-color: #a4804c !important; }
  [style*="color:#93c5fd" i]      { color: #f0dcaa !important; }
  [style*="background:#f8fafc" i] { background: #f1e9df !important; }
  [style*="background:#f9fafb" i] { background: #faf6f0 !important; }
  [style*="background:#f0f9ff" i],
  [style*="background:#f0f7ff" i],
  [style*="background:#eff6ff" i] { background: #f7f1e6 !important; }
  /* inline rgba navy tint chips (homepage) */
  [style*="background:rgba(15,76,129" i],
  [style*="background: rgba(15,76,129" i] { background: rgba(164,128,76,0.14) !important; }
  /* inline violet accents (related / step cards) */
  [style*="color:#7c3aed" i]      { color: #7a5a2e !important; }
  [style*="solid #7c3aed" i]      { border-color: #7a5a2e !important; }
  [style*="background:#7c3aed" i] { background: #7a5a2e !important; }
  [style*="#1e3a5f" i],
  [style*="#1a6bb5" i] { background: linear-gradient(135deg, #2b2012 0%, #7a5a2e 100%) !important; }
}