/* =========================================================
   SUBPAGE / MISSION – CLEAN FLATTENED SOT
   Desktop 1920×1080: 500 | flex center | 500 · 998h · scale
   Visual chrome pulled from homepage
   Mobile: stack · hide left TOC · show mobile panel
   ========================================================= */

/* ---------- 0. LEGAL / NOISE ---------- */
html body .page-shell.subpage-shell p.mobile-grid-legal,
html body .page-shell.subpage-shell main > p {
  display: none !important;
}
/* Subpage page background – solid, no photo */
html body .page-shell.subpage-shell {
  background: #0a1e32 !important;          /* deep navy, matches panel family */
  background-image: none !important;
}

html body .page-shell.subpage-shell .content-rail,
html body .page-shell.subpage-shell .grid-hero-row,
html body .page-shell.subpage-shell .grid-media-stack,
html body .page-shell.subpage-shell .subpage-stage-panel {
  background: transparent !important;
  background-image: none !important;
}
/* ---------- 1. TOKENS ---------- */
html body .page-shell.subpage-shell {
  --scale: min(100vw / 1920px, 100vh / 1080px);

  --lhs-width: calc(500px * var(--scale));
  --rhs-width: calc(500px * var(--scale));
  --panel-height: calc(998px * var(--scale));
  --actionbar-height: calc(140px * var(--scale));
  --hero-gap: calc(40px * var(--scale));
  --rail-padding: calc(40px * var(--scale));

  --card-size: calc(100px * var(--scale));
  --label-size: calc(14px * var(--scale));
  --label-line-height: 1.16;
  --label-block-height: calc(var(--label-size) * var(--label-line-height) * 2);

  --flag-w: calc(70px * var(--scale));
  --flag-h: calc(52px * var(--scale));
  --radius: calc(13px * var(--scale));

  /* Visual tokens (homepage parity) */
  --panel-bg: rgba(10, 69, 121, 0.6);
  --panel-border: rgba(196, 220, 241, 0.28);
  --panel-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  --header-gradient: linear-gradient(180deg, rgba(40, 120, 178, 0.87), rgb(14, 17, 55));

  --grid-card-border: color-mix(in srgb, rgb(64 114 170) 68%, white 32%);
  --grid-card-surface-top: color-mix(in srgb, rgb(0 92 145 / 31%) 70%, white 30%);
  --grid-card-surface-mid: color-mix(in srgb, rgb(35 92 152 / 79%) 80%, rgb(38 52 81) 20%);
  --grid-card-surface-bottom: color-mix(in srgb, rgb(41 98 158) 64%, rgb(10 18 31) 36%);
  --grid-card-shadow-stack:
    inset 0 0 0 color-mix(in srgb, white 23.6%, rgb(63 113 168) 77.4%),
    inset 0 -8px 48px rgb(64 114 170),
    0 10px 15px rgb(16 35 58 / 21%);

  --title-font: 'Julius Sans One', sans-serif;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* ---------- 2. PAGE SHELL / RAIL ---------- */
html body .page-shell.subpage-shell .content-rail {
  width: 100%;
  max-width: 100%;
  padding: 0 var(--rail-padding);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---------- 3. THREE-COLUMN HERO ---------- */
html body .page-shell.subpage-shell .grid-hero-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: var(--hero-gap);
  align-items: stretch;
  height: var(--panel-height);
  box-sizing: border-box;
}

/* Left */
html body .page-shell.subpage-shell .grid-shell-frame,
html body .page-shell.subpage-shell .grid-shell-frame > .information-center-panel {
  flex: 0 0 var(--lhs-width);
  width: var(--lhs-width);
  min-width: 0;
  max-width: var(--lhs-width);
  height: var(--panel-height);
  overflow: hidden;
  border-radius: var(--radius);
  box-sizing: border-box;
}

/* Center – remainder */
html body .page-shell.subpage-shell .grid-media-stack,
html body .page-shell.subpage-shell .subpage-stage-panel {
  flex: 1 1 0;
  min-width: 0;
  height: var(--panel-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  box-sizing: border-box;
}

/* Right */
html body .page-shell.subpage-shell .rhs-grid-rail {
  flex: 0 0 var(--rhs-width);
  width: var(--rhs-width);
  min-width: 0;
  max-width: var(--rhs-width);
  height: var(--panel-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  box-sizing: border-box;
}
html body .page-shell.subpage-shell .grid-shell {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  column-gap: calc(0px * var(--scale)) !important;
  row-gap: calc(64px * var(--scale)) !important; /* was ~28–50 raw → too tall */
  justify-items: center !important;
  padding: calc(0px * var(--scale)) calc(0px * var(--scale)) !important;
  box-sizing: border-box !important;
}

html body .page-shell.subpage-shell .grid-shell .grid-item-control,
html body .page-shell.subpage-shell .grid-shell .static-card {
  display: grid !important;
  grid-template-rows: var(--card-size, calc(100px * var(--scale))) auto !important;
  row-gap: calc(10px * var(--scale)) !important;
  justify-items: center !important;
  max-width: calc(140px * var(--scale)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body .page-shell.subpage-shell .grid-shell .grid-card {
  width: var(--card-size, calc(100px * var(--scale))) !important;
  height: var(--card-size, calc(100px * var(--scale))) !important;
  border-radius: calc(20px * var(--scale)) !important;
}

html body .page-shell.subpage-shell .grid-shell .grid-card-label {
  font-size: var(--label-size, calc(14px * var(--scale))) !important;
  line-height: 1.16 !important;
  min-height: calc(32px * var(--scale)) !important;
}
/* ---------- 4. PANEL CHROME ---------- */
html body .page-shell.subpage-shell .information-center-panel,
html body .page-shell.subpage-shell .rhs-grid-rail {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: var(--panel-shadow);
}

/* Center stage stays clean (banner + iframe); header carries the chrome */
html body .page-shell.subpage-shell .subpage-stage-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- 5. HEADERS (140 scaled) ---------- */
html body .page-shell.subpage-shell .information-center-panel-header,
html body .page-shell.subpage-shell .podcast-language-panel-header,
html body .page-shell.subpage-shell .subpage-stage-header {
  flex: 0 0 var(--actionbar-height);
  height: var(--actionbar-height);
  min-height: var(--actionbar-height);
  max-height: var(--actionbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--header-gradient);
  overflow: hidden;
}

/* Kill nested gradient plates */
html body .page-shell.subpage-shell .information-center-panel-header > *,
html body .page-shell.subpage-shell .podcast-language-panel-header > *,
html body .page-shell.subpage-shell .subpage-stage-header > *,
html body .page-shell.subpage-shell .subpage-stage-header-shell,
html body .page-shell.subpage-shell .subpage-stage-title-row,
html body .page-shell.subpage-shell .subpage-stage-title-panel,
html body .page-shell.subpage-shell .brand-top-panel-content {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .page-shell.subpage-shell .brand-top-title {
  font-family: var(--title-font);
  font-size: calc(22px * var(--scale));
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1.1;
  text-align: center;
}

/* Logo – centred, homepage size */
html body .page-shell.subpage-shell .subpage-stage-brand--header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

html body .page-shell.subpage-shell .subpage-stage-brand--header img {
  display: block;
  margin: 0 auto;
  max-width: calc(225px * var(--scale));
  max-height: calc(72px * var(--scale));
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
}

html body .page-shell.subpage-shell .subpage-stage-brand-name,
html body .page-shell.subpage-shell .subpage-stage-brand-tagline {
  display: none !important;
}

/* ---------- 6. LEFT TOC GRID ---------- */
html body .page-shell.subpage-shell .information-center-panel {
  display: flex;
  flex-direction: column;
}

html body .page-shell.subpage-shell .information-center-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  height: calc(100% - var(--actionbar-height));
  padding: calc(55px * var(--scale)) calc(0px * var(--scale)) 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html body .page-shell.subpage-shell .information-center-panel .grid-shell {
  justify-items: center;
  width: 100%;
  margin: 0 auto;
}

html body .page-shell.subpage-shell .information-center-panel .grid-item-control,
html body .page-shell.subpage-shell .information-center-panel .grid-item-control--subpage {
  display: grid;
  grid-template-rows: var(--card-size) var(--label-block-height);
  row-gap: calc(10px * var(--scale));
  justify-items: center;
  width: 100%;
  max-width: calc(120px * var(--scale));
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ---------- 7. CARDS (homepage SOT) ---------- */
html body .page-shell.subpage-shell .grid-card,
html body .page-shell.subpage-shell .grid-action-surface {
  width: var(--card-size);
  height: var(--card-size);
  border-radius: calc(20px * var(--scale));
  border: 2px solid var(--grid-card-border);
  background: linear-gradient(
    180deg,
    var(--grid-card-surface-top) 0%,
    var(--grid-card-surface-mid) 48%,
    var(--grid-card-surface-bottom) 100%
  );
  box-shadow: var(--grid-card-shadow-stack);
  box-sizing: border-box;
}

/* CareApp CTA – exact homepage green */
html body .page-shell.subpage-shell .grid-card--careapp-cta {
  border-color: rgba(176, 235, 150, 0.86);
  background: linear-gradient(180deg, rgba(107, 187, 112, 0.98), rgba(76, 156, 82, 0.98));
  box-shadow:
    inset 0 0 0 rgba(255, 255, 255, 0.24),
    inset 0 -8px 36px rgba(58, 129, 63, 0.58),
    0 10px 18px rgba(14, 44, 18, 0.28);
}

html body .page-shell.subpage-shell .grid-card-label,
html body .page-shell.subpage-shell .utility-label {
  margin: 0;
  color: #fff;
  font-size: var(--label-size);
  line-height: var(--label-line-height);
  font-weight: 500;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: var(--label-block-height);
  transform: none;
}

html body .page-shell.subpage-shell .grid-card-label--two-line {
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

/* ---------- 8. CENTER: banner + iframe ---------- */
html body .page-shell.subpage-shell .subpage-stage-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html body .page-shell.subpage-shell .iframe-panel-inline {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html body .page-shell.subpage-shell .iframe-hero {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 2500 / 737;
  overflow: hidden;
}

html body .page-shell.subpage-shell .iframe-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

html body .page-shell.subpage-shell .iframe-content-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
}

/* ---------- 9. PODCAST ---------- */
html body .page-shell.subpage-shell .podcast-language-panel {
  flex: 0 0 auto;
}

html body .page-shell.subpage-shell .podcast-language-panel-body {
  padding: calc(52px * var(--scale)) 0 calc(20px * var(--scale));
  box-sizing: border-box;
}

html body .page-shell.subpage-shell .podcast-language-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  row-gap: calc(27px * var(--scale));
  column-gap: calc(104px * var(--scale));
  padding: 0 calc(40px * var(--scale));
  width: 100%;
  box-sizing: border-box;
}

html body .page-shell.subpage-shell .podcast-language-button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

html body .page-shell .podcast-language-flag {
  width: var(--flag-w);
  height: var(--flag-h);
  border-radius: calc(13px * var(--scale));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  object-fit: cover;
  display: block;
  box-sizing: border-box; /* 70×52 includes border */
}

/* ---------- 10. UTILITY STRIP ---------- */

html body .page-shell:not(.subpage-shell) .portrait-utility-strip-panel {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: calc(94px * var(--scale)) !important;
    row-gap: calc(64px * var(--scale)) !important;
    width: 100% !important;
    padding-top: 21px !important;
    justify-items: center !important;
    transform: translateY(20px);
}

html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-item,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-link,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-item-control {
  display: grid;
  grid-template-rows: var(--card-size) auto;
  row-gap: calc(10px * var(--scale));
  justify-items: center;
  width: 100%;
  max-width: calc(120px * var(--scale));
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: visible;
}
/* RHS rail labels: match homepage (32px block, white) */
.page-shell.subpage-shell .rhs-grid-rail .grid-card-label,
.page-shell.subpage-shell .rhs-grid-rail .utility-label {
  width: auto;
  max-width: 100px;          /* face width; HP label sat ~79px wide */
  min-height: 32px;
  height: auto;
  font-size: 14px;           /* HP --grid-label-size at scale 1 */
  line-height: 1.16;
  font-weight: 500;
  color: #ffffff;
  transform: none;
}
html body .page-shell.subpage-shell .information-center-panel .grid-card-label,
html body .page-shell.subpage-shell .grid-shell .grid-card-label {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: calc(14px * var(--scale)) !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #ffffff !important;
  text-align: center !important;
  transform: none !important;
}
}
html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-card {
  width: var(--card-size);
  height: var(--card-size);
  border-radius: calc(20px * var(--scale));
  box-sizing: border-box;
}

/* Rupert */
html body .page-shell.subpage-shell .portrait-utility-strip-panel .rupert-avatar,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-avatar {
  width: calc(105px * var(--scale));
  height: calc(105px * var(--scale));
  border-radius: calc(18px * var(--scale));
  border: 2px solid rgba(196, 220, 241, 0.5);
  object-fit: cover;
  object-position: center;
  display: block;
  box-sizing: border-box;
}

/* Home – transparent card + icon (homepage treatment) */
html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-link[aria-label="Home"] .grid-card,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-link:has(.home-icon) .grid-card {
  background: transparent;
  border: none;
  box-shadow: none;
  display: grid;
  place-items: center;
}

html body .page-shell.subpage-shell .portrait-utility-strip-panel .home-icon {
  width: calc(105px * var(--scale));
  height: calc(105px * var(--scale));
  object-fit: contain;
  display: block;
}

/* Hide the “Utilities” title on desktop */
html body .page-shell.subpage-shell .mobile-utility-strip-title {
  display: none;
}

/* ---------- 11. DESKTOP – hide mobile chrome ---------- */
@media (min-width: 768px) {
  html body .page-shell.subpage-shell .mobile-subpage-info-panel,
  html body .page-shell.subpage-shell .mobile-info-featured-panel,
  html body .page-shell.subpage-shell .iframe-panel-inline > section.mobile-subpage-info-panel,
  html body .page-shell.subpage-shell .mobile-topic-drawer {
    display: none !important;
  }

  html body .page-shell.subpage-shell .iframe-hero-img--desktop {
    display: block !important;
  }

  html body .page-shell.subpage-shell .iframe-hero-img--mobile {
    display: none !important;
  }
}
html body .page-shell.subpage-shell .portrait-utility-strip-panel {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  justify-items: center !important;   /* face + label centered in cell */
  align-items: start !important;
  column-gap: calc(24px * var(--scale)) !important;
  row-gap: calc(65px * var(--scale)) !important;
  padding-top: 21px;
  box-sizing: border-box !important;
}

html body .page-shell.subpage-shell .portrait-utility-strip-panel {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  justify-items: center !important;
  align-items: start !important;
}

html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-item,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-link,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-item-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* card + label on center axis */
  justify-content: flex-start !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-card,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .rupert-avatar,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-card--careapp-cta {
  width: var(--card-size, calc(100px * var(--scale))) !important;
  height: var(--card-size, calc(100px * var(--scale))) !important;
  margin: 0 auto !important;
  transform: none !important;
}
html body .page-shell.subpage-shell .iframe-hero {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1600 / 472 !important;
  overflow: hidden !important;
}

html body .page-shell.subpage-shell .iframe-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

html body .page-shell.subpage-shell .iframe-panel-inline {
  grid-template-rows: auto minmax(0, 1fr) !important;
}
/* ========== SHIP OVERRIDES (subpages) ========== */
html body .page-shell.subpage-shell {
  --scale: min(100vw / 1920px, 100vh / 1080px);
  --card-size: calc(100px * var(--scale));
  --label-size: calc(14px * var(--scale));
  --label-line-height: 1.16;
  --label-block-height: calc(var(--label-size) * var(--label-line-height) * 2);
  --panel-radius: calc(18px * var(--scale));
}

/* Labels — TOC + utility */
html body .page-shell.subpage-shell .grid-card-label,
html body .page-shell.subpage-shell .utility-label,
html body .page-shell.subpage-shell .grid-card-label--two-line {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: var(--label-size) !important;
  font-weight: 500 !important;
  line-height: var(--label-line-height) !important;
  color: #fff !important;
  text-align: center !important;
  transform: none !important;
  position: static !important;
  min-height: var(--label-block-height) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Utility cells — center cards */
html body .page-shell.subpage-shell .portrait-utility-strip-panel {
  justify-items: center !important;
}
html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-item,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-link,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-item-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto !important;
  transform: none !important;
}
html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-card,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .rupert-avatar,
html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-card--careapp-cta {
  width: var(--card-size) !important;
  height: var(--card-size) !important;
  margin: 0 auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Hero AR */
html body .page-shell.subpage-shell .iframe-hero {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1600 / 472 !important;
  overflow: hidden !important;
}
html body .page-shell.subpage-shell .iframe-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html body .page-shell.subpage-shell .iframe-panel-inline {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

/* Panel radius */
html body .page-shell.subpage-shell .information-center-panel,
html body .page-shell.subpage-shell .rhs-grid-rail,
html body .page-shell.subpage-shell .subpage-stage-panel,
html body .page-shell.subpage-shell .podcast-language-panel {
  border-radius: var(--panel-radius) !important;
}
/* =========================================================
   12. MOBILE ≤767px – stack (kept for later)
   ========================================================= */
@media (max-width: 767px) {

  html body .page-shell.subpage-shell {
    --panel-height: auto;
    justify-content: flex-start;
    align-items: stretch;
  }

  html body .page-shell.subpage-shell .grid-hero-row {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }

  html body .page-shell.subpage-shell .grid-media-stack,
  html body .page-shell.subpage-shell .subpage-stage-panel {
    order: 1;
    width: 100%;
    max-width: 100%;
    height: auto;
    flex: none;
  }

  html body .page-shell.subpage-shell .grid-shell-frame {
    display: none !important;
  }

  html body .page-shell.subpage-shell .rhs-grid-rail {
    order: 3;
    width: 100%;
    max-width: 100%;
    height: auto;
    flex: none;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  html body .page-shell.subpage-shell .subpage-stage-header {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
  }

  html body .page-shell.subpage-shell .subpage-stage-brand--header img {
    max-height: 40px;
    max-width: 140px;
  }

  html body .page-shell.subpage-shell .iframe-hero {
    aspect-ratio: 1600 / 464;
    border: 1px solid var(--panel-border);
    border-radius: 0 0 18px 18px;
  }

  html body .page-shell.subpage-shell .iframe-hero-img--mobile {
    display: block !important;
  }

  html body .page-shell.subpage-shell .iframe-hero-img--desktop {
    display: none !important;
  }

  html body .page-shell.subpage-shell .mobile-subpage-info-panel {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 12px 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
  }

  html body .page-shell.subpage-shell .mobile-subpage-info-panel .information-center-panel-header {
    height: 72px;
    min-height: 72px;
  }

  html body .page-shell.subpage-shell .mobile-topics-heading {
    margin: 12px;
    text-align: center;
    font-family: var(--title-font);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f5ede4;
  }

  html body .page-shell.subpage-shell .mobile-featured-topics-subpage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 12px 12px;
  }

  html body .page-shell.subpage-shell .mobile-featured-topics-subpage .grid-card {
    width: 85px;
    height: 85px;
    border-radius: 16px;
  }

  html body .page-shell.subpage-shell .mobile-topic-drawer {
    margin: 0 12px 12px;
  }

  html body .page-shell.subpage-shell .mobile-topic-drawer-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(196, 220, 241, 0.22);
    background: rgba(9, 18, 29, 0.4);
    font-family: var(--title-font);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f5ede4;
    cursor: pointer;
    list-style: none;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 0 0;
  }

  html body .page-shell.subpage-shell .iframe-content-frame {
    min-height: 550px;
    height: 550px;
    flex: none;
  }

  html body .page-shell.subpage-shell .podcast-language-panel {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--panel-bg);
  }

  html body .page-shell.subpage-shell .podcast-language-panel-header {
    height: 72px;
    min-height: 72px;
  }

  html body .page-shell.subpage-shell .portrait-utility-strip-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 0 0 16px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
  }

  html body .page-shell.subpage-shell .mobile-utility-strip-title {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    height: 72px;
    margin: 0;
    background: var(--header-gradient);
    font-family: var(--title-font);
    font-size: 1rem;
    color: #fff;
    text-transform: uppercase;
  }

  html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-card,
  html body .page-shell.subpage-shell .portrait-utility-strip-panel .rupert-avatar {
    width: 56px;
    height: 56px;
  }

  html body .page-shell.subpage-shell .portrait-utility-strip-panel .home-icon {
    width: 56px;
    height: 56px;
  }/* =========================================================
   MOBILE SUBPAGE – COMBINED BRAND HEADER + BROWSE
   Logo + page title + browse bar in one unit
   Drawer → 4-col × 2-row grid
   ========================================================= */

/* Hide the old featured row completely */
html body .page-shell.subpage-shell .mobile-topics-heading,
html body .page-shell.subpage-shell .mobile-featured-topics-subpage {
  display: none !important;
}

 /* ---------- continuous panel from header through content ---------- */
  html body .page-shell.subpage-shell .subpage-stage-panel {
    background: #0e2a45 !important;        /* slightly lighter than page bg */
    border: 1px solid rgba(196, 220, 241, 0.22) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
  }

  /* Branded header – logo + title */
  html body .page-shell.subpage-shell .subpage-stage-header {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 18px 14px 12px !important;
    background: linear-gradient(180deg, rgba(40, 120, 178, 0.95), rgb(14, 17, 55)) !important;
    border-bottom: 1px solid rgba(196, 220, 241, 0.22) !important;
    border-radius: 0 !important;           /* parent already has radius */
    box-sizing: border-box !important;
  }

  html body .page-shell.subpage-shell .subpage-stage-brand--header img {
    max-height: 52px !important;
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto 10px !important;
  }

  html body .page-shell.subpage-shell .subpage-stage-header .brand-top-title {
    font-family: var(--title-font) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Kill old separate info-panel chrome – it now only holds the drawer */
  html body .page-shell.subpage-shell .mobile-subpage-info-panel {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  html body .page-shell.subpage-shell .mobile-subpage-info-panel .information-center-panel-header,
  html body .page-shell.subpage-shell .mobile-topics-heading,
  html body .page-shell.subpage-shell .mobile-featured-topics-subpage {
    display: none !important;
  }

  html body .page-shell.subpage-shell .mobile-subpage-info-panel .information-center-panel-body {
    padding: 12px 14px 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* Browse – compact, card rhythm, centered */
  html body .page-shell.subpage-shell .mobile-topic-drawer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body .page-shell.subpage-shell .mobile-topic-drawer-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: 220px !important;
    padding: 10px 20px !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    border: 2px solid color-mix(in srgb, rgb(64 114 170) 68%, white 32%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, rgb(0 92 145 / 31%) 70%, white 30%) 0%,
      color-mix(in srgb, rgb(35 92 152 / 79%) 80%, rgb(38 52 81) 20%) 48%,
      color-mix(in srgb, rgb(41 98 158) 64%, rgb(10 18 31) 36%) 100%
    ) !important;
    box-shadow:
      inset 0 0 0 color-mix(in srgb, white 23.6%, rgb(63 113 168) 77.4%),
      inset 0 -6px 24px rgb(64 114 170),
      0 6px 12px rgb(16 35 58 / 25%) !important;
    font-family: var(--title-font) !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-align: center !important;
    cursor: pointer !important;
    list-style: none !important;
  }

  html body .page-shell.subpage-shell .mobile-topic-drawer-summary::-webkit-details-marker {
    display: none !important;
  }

  /* Open drawer – 4 × 2 grid on solid surface */
  html body .page-shell.subpage-shell .mobile-topic-drawer-panel,
  html body .page-shell.subpage-shell #subpage-stage-sections-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
    width: 100% !important;
    padding: 16px 0 8px !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-item-control,
  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-item-control--subpage {
    display: grid !important;
    grid-template-rows: 56px auto !important;
    row-gap: 4px !important;
    justify-items: center !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-card {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-card-label {
    font-size: 10px !important;
    line-height: 1.15 !important;
    max-width: 72px !important;
    color: #fff !important;
    text-align: center !important;
  }

  /* Iframe – same surface, bottom radius only */
  html body .page-shell.subpage-shell .iframe-panel-inline {
    background: transparent !important;
  }

  html body .page-shell.subpage-shell .iframe-content-frame {
    width: 100% !important;
    min-height: 520px !important;
    height: 520px !important;
    border: 0 !important;
    border-radius: 0 !important;          /* parent panel already rounded */
    background: #123a5c !important;       /* close to panel family, readable for content */
  }

  /* Hide still hero */
  html body .page-shell.subpage-shell .iframe-hero:not(.iframe-hero--video) {
    display: none !important;
  } /* 1. Remove 1px border from stage header */
  html body .page-shell.subpage-shell .subpage-stage-header {
    border: 0 !important;
    border-bottom: 0 !important;
  }

  /* 2. Drawer grid – stop bunching / overlap */
  html body .page-shell.subpage-shell .mobile-topic-drawer-panel,
  html body .page-shell.subpage-shell #subpage-stage-sections-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 16px !important;          /* more vertical room for labels */
    width: 100% !important;
    padding: 16px 4px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-items: start !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-item-control,
  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-item-control--subpage {
    display: grid !important;
    grid-template-rows: 56px minmax(28px, auto) !important;
    row-gap: 6px !important;
    justify-items: center !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;           /* critical – stops overflow/overlap */
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-card {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    flex-shrink: 0 !important;
    border-radius: 14px !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-card-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    min-height: 28px !important;
    padding: 0 2px !important;
    overflow: visible !important;
    text-align: center !important;
    color: #fff !important;
    word-break: break-word !important;
  }/* Match iframe body color on the mobile info section */
  html body .page-shell.subpage-shell .subpage-stage-content > section.iframe-panel-inline > section.mobile-subpage-info-panel,
  html body .page-shell.subpage-shell .mobile-subpage-info-panel {
    background: #123a5c !important;   /* same as iframe-content-frame */
  }

  /* If the parent section also needs to share the surface */
  html body .page-shell.subpage-shell .iframe-panel-inline {
    background: #123a5c !important;
  }

  /* Header – 1px border on top / left / right only (no bottom) */
  html body .page-shell.subpage-shell .subpage-stage-header {
    border: 1px solid rgba(196, 220, 241, 0.28) !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure the continuous panel doesn’t double-draw a bottom edge under the header */
  html body .page-shell.subpage-shell .subpage-stage-panel {
    border: 1px solid rgba(196, 220, 241, 0.28) !important;
    overflow: hidden !important;   /* keeps RHS border visible even with scrollbar */
  }  /* A couple px more inset so the scroll gutter doesn’t clip the RHS border */


  /* Keep the panel itself from being chewed by the scrollbar */
  html body .page-shell.subpage-shell .subpage-stage-panel {
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Inner content also gains a touch of right breathing room */
  html body .page-shell.subpage-shell .mobile-subpage-info-panel .information-center-panel-body,
  html body .page-shell.subpage-shell .subpage-stage-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }/* ---------- Drawer / info surface → iframe body blue ---------- */
  html body .page-shell.subpage-shell .mobile-subpage-info-panel,
  html body .page-shell.subpage-shell .mobile-subpage-info-panel .information-center-panel-body,
  html body .page-shell.subpage-shell .iframe-panel-inline,
  html body .page-shell.subpage-shell .mobile-topic-drawer-panel,
  html body .page-shell.subpage-shell #subpage-stage-sections-list {
    background: rgb(34, 77, 125) !important;
  }

  html body .page-shell.subpage-shell .iframe-content-frame {
    background: rgb(34, 77, 125) !important;
  }

  /* ---------- Grid: force 2-row × 4-col, empty cells OK ---------- */
  html body .page-shell.subpage-shell .mobile-topic-drawer-panel,
  html body .page-shell.subpage-shell #subpage-stage-sections-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    column-gap: 10px !important;
    row-gap: 16px !important;
    width: 100% !important;
    padding: 9px 0 0 !important;          /* as requested */
    margin: 0 !important;
    box-sizing: border-box !important;
    align-items: start !important;
    min-height: 0 !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-item-control,
  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-item-control--subpage {
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* ---------- Scroll / border clip – architecture fix ---------- */
  /*
     Border lives on the outer non-scrolling shell.
     Scroll moves to an inner layer so the gutter can’t chew the RHS edge.
  */
  html body .page-shell.subpage-shell .subpage-stage-panel {
    border: 1px solid rgba(196, 220, 241, 0.28) !important;
    border-radius: 18px !important;
    overflow: hidden !important;          /* clips children, preserves border */
    background: rgb(34, 77, 125) !important;
    scrollbar-gutter: stable !important;   /* where supported */
  }

  html body .page-shell.subpage-shell .subpage-stage-header {
    border: 0 !important;                 /* parent owns the border */
    border-bottom: 0 !important;
  }

  html body .page-shell.subpage-shell .subpage-stage-content,
  html body .page-shell.subpage-shell .iframe-panel-inline {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* If you later mark video heroes */
  html body .page-shell.subpage-shell .iframe-hero--video {
    display: block !important;
    aspect-ratio: 16 / 9;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-top: 0;
  }@media (max-width: 767px) {

  html body .page-shell.subpage-shell #subpage-stage-sections-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    column-gap: 10px !important;
    row-gap: 14px !important;
    width: 100% !important;
    padding: 9px 0 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-items: start !important;
    justify-items: center !important;
  }

  /* Every cell – real or blank – same footprint */
  html body .page-shell.subpage-shell #subpage-stage-sections-list > * {
    display: grid !important;
    grid-template-rows: 56px minmax(28px, auto) !important;
    row-gap: 6px !important;
    justify-items: center !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-card {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-card-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
    max-width: 72px !important;
    min-height: 28px !important;
    text-align: center !important;
    color: #fff !important;
    margin: 0 !important;
  }

@media (max-width: 767px) {

  /* Drawer panel – full width, no flex quirks */
  html body .page-shell.subpage-shell .mobile-topic-drawer-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

html body .page-shell.subpage-shell #subpage-stage-sections-list.grid-shell,
  html body .page-shell.subpage-shell #subpage-stage-sections-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    column-gap: 6px !important;
    row-gap: 18px !important;
    width: 100% !important;
    padding: 16px 6px 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    justify-items: center !important;
    align-items: start !important;
  }

  /* Cell: fixed content width, centered in the track */
  html body .page-shell.subpage-shell #subpage-stage-sections-list > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;      /* card + label on one vertical axis */
    justify-content: flex-start !important;
    width: 72px !important;              /* shared span for every cell */
    max-width: 72px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-card {
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 0 8px !important;          /* centered via parent align-items */
    flex-shrink: 0 !important;
    border-radius: 14px !important;
  }

  /* --- drawer grid labels + blanks --- */
  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-card-label {
    display: block !important;
    width: 72px !important;
    max-width: 72px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: #fff !important;
    text-align: center !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-item-control--blank {
    pointer-events: none !important;
    cursor: default !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-item-control--blank .grid-card {
    opacity: 0.35 !important;
  }

  html body .page-shell.subpage-shell #subpage-stage-sections-list .grid-item-control--blank .grid-card-label {
    visibility: hidden !important;
    min-height: 32px !important;
  }

  /* --- drawer animation (JS toggles .is-open) --- */
  html body .page-shell.subpage-shell .mobile-topic-drawer-panel {
    display: block !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transition:
      max-height 0.8s ease-in-out,
      opacity 0.8s ease-in-out !important;
  }

  html body .page-shell.subpage-shell .mobile-topic-drawer.is-open .mobile-topic-drawer-panel {
    max-height: 240px !important;
    opacity: 1 !important;
  }
}
  /* --- iframe: keep visible and sized on mobile --- */
  html body .page-shell.subpage-shell .iframe-panel-inline {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body .page-shell.subpage-shell .iframe-content-frame {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 520px !important;
    height: 520px !important;
    border: 0 !important;
    opacity: 1 !important;
    background: rgb(34, 77, 125) !important;
  }

@media (max-width: 767px) {

  /* ---------- Podcast panel shell ---------- */
  html body .page-shell.subpage-shell .podcast-language-panel {
    width: 100% !important;
    margin: 0 0 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: rgba(10, 69, 121, 0.6) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
  }

  /* ---------- Header typography (homepage match) ---------- */
  html body .page-shell.subpage-shell .podcast-language-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    background: linear-gradient(180deg, rgba(40, 120, 178, 0.95), rgb(14, 17, 55)) !important;
    box-sizing: border-box !important;
  }

  html body .page-shell.subpage-shell .podcast-language-panel-header .brand-top-title {
    font-family: 'Julius Sans One', var(--title-font, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  html body .page-shell.subpage-shell .podcast-language-panel-header > *,
  html body .page-shell.subpage-shell .podcast-language-panel-header .brand-top-panel-content {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ---------- Body + flag grid (larger, homepage density) ---------- */
  html body .page-shell.subpage-shell .podcast-language-panel-body {
    padding: 16px 12px 18px !important;
    box-sizing: border-box !important;
  }

  html body .page-shell.subpage-shell .podcast-language-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 12px !important;
    width: 100% !important;
    justify-items: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body .page-shell.subpage-shell .podcast-language-button {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  html body .page-shell.subpage-shell .podcast-language-flag {
    width: 48px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    object-fit: cover !important;
    display: block !important;
  }
@media (max-width: 767px) {

  /* Hide desktop strip on mobile */
  html body .page-shell:not(.subpage-shell) .portrait-utility-strip-panel {
    display: none !important;
  }
/* Shared — 12px all sides (SP + HP) */
html body .page-shell.subpage-shell .content-rail,
html body .page-shell:not(.subpage-shell) .content-rail {
  padding: 12px !important;
  box-sizing: border-box !important;
}
  /* ---------- Panel shell ---------- */
 html body .page-shell.subpage-shell .portrait-utility-strip-panel {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 0 16px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(196, 220, 241, 0.28) !important;
    background: rgba(10, 69, 121, 0.6) !important;
    box-sizing: border-box !important;
  }

  /* Header spans full row */
  html body .page-shell.subpage-shell .portrait-utility-strip-panel .mobile-utility-strip-title {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    background: linear-gradient(180deg, rgba(40, 120, 178, 0.95), rgb(14, 17, 55)) !important;
    font-family: "Julius Sans One", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Each article / link */
  html body .page-shell.subpage-shell .portrait-utility-strip-panel > .grid-item,
  html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-link,
  html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-item-control {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 72px !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-card {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    margin: 0 0 8px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  html body .page-shell.subpage-shell .portrait-utility-strip-panel .rupert-avatar,
  html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    border: 2px solid rgba(196, 220, 241, 0.5) !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 0 8px !important;
    box-sizing: border-box !important;
  }

  html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-card--careapp-cta {
    border-color: rgba(176, 235, 150, 0.86) !important;
    background: linear-gradient(180deg, rgba(107, 187, 112, 0.98), rgba(76, 156, 82, 0.98)) !important;
  }

  html body .page-shell.subpage-shell .portrait-utility-strip-panel .grid-card-label {
    display: block !important;
    width: 100% !important;
    max-width: 72px !important;
    min-height: 28px !important;
    margin: -3px !important;
    padding: 0 2px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: #fff !important;
    text-align: center !important;
  }  /* Home – no card chrome */
html body .page-shell:not(.subpage-shell) .mobile-utility-strip-grid .icon-link[aria-label="Home"] .grid-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

  html body .page-shell:not(.subpage-shell) .mobile-utility-strip-grid .home-icon {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* CareApp CTA keeps green */
  html body .page-shell:not(.subpage-shell) .mobile-utility-strip-grid .grid-card--careapp-cta {
    border-color: rgba(176, 235, 150, 0.86) !important;
    background: linear-gradient(180deg, rgba(107, 187, 112, 0.98), rgba(76, 156, 82, 0.98)) !important;
  }

  /* Labels */
  html body .page-shell:not(.subpage-shell) .mobile-utility-strip-grid .grid-card-label,
  html body .page-shell:not(.subpage-shell) .mobile-utility-strip-grid .utility-label {
    display: block !important;
    width: 100% !important;
    max-width: 72px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: #fff !important;
    text-align: center !important;
  }@media (max-width: 767px) {

  /* ---------- 1. Home label offset (match other utility labels) ---------- */
  html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-link[aria-label="Home"] .grid-card-label,
  html body .page-shell.subpage-shell .portrait-utility-strip-panel .home-icon ~ .grid-card-label {
    margin-top: 6px !important;
    padding-top: 0 !important;
    min-height: 28px !important;
    line-height: 1.2 !important;
    transform: none !important;
  }
  /* Ask Rupert label – 6px top */
  html body .page-shell.subpage-shell .portrait-utility-strip-panel a[href="/ask-rupert"] .grid-card-label,
  html body .page-shell.subpage-shell .portrait-utility-strip-panel .rupert-avatar ~ .grid-card-label {
    margin-top: 6px !important;
  }
  /* Keep home icon 56×56, centered in the same cell rhythm */
  html body .page-shell.subpage-shell .portrait-utility-strip-panel .home-icon {
    width: 56px !important;
    height: 56px !important;
    margin: 0 0 8px !important;   /* same gap as other cards → label */
  }

  html body .page-shell.subpage-shell .portrait-utility-strip-panel .icon-link[aria-label="Home"] .grid-card {
    width: 56px !important;
    height: 56px !important;
    margin: 0 0 8px !important;
  }

  /* ---------- 2. Logo / stage header – 1px on top/left/right only ---------- */
  html body .page-shell.subpage-shell .subpage-stage-header {
    border: 1px solid rgba(196, 220, 241, 0.28) !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- 3. Match utilities width/box so RHS border isn’t clipped ---------- */
  html body .page-shell.subpage-shell .subpage-stage-panel,
  html body .page-shell.subpage-shell .podcast-language-panel,
  html body .page-shell.subpage-shell .portrait-utility-strip-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid rgba(196, 220, 241, 0.28) !important;
    border-radius: 18px !important;
  }

  /* Podcast – same shell as utilities */
  html body .page-shell.subpage-shell .podcast-language-panel {
    margin: 0 0 12px !important;
    background: rgba(10, 69, 121, 0.6) !important;
  }

  /* Stage panel – continuous unit; header already has top/side border */
  html body .page-shell.subpage-shell .subpage-stage-panel {
    background: rgb(34, 77, 125) !important;
  }

  /* Avoid double border where header meets body */
  html body .page-shell.subpage-shell .subpage-stage-panel .subpage-stage-header {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
  }

  /* Normalize vertical rhythm: header → browse → iframe */
  html body .page-shell.subpage-shell .subpage-stage-header {
    margin-bottom: 0 !important;
  }

  html body .page-shell.subpage-shell .mobile-subpage-info-panel .information-center-panel-body {
    padding: 12px 14px 0 !important;   /* space above browse ≈ space under header */
  }

  html body .page-shell.subpage-shell .mobile-topic-drawer {
    margin: 0 0 12px !important;       /* same 12px under browse as above it */
  }

  html body .page-shell.subpage-shell .mobile-topic-drawer.is-open {
    margin-bottom: 12px !important;    /* keep gap when drawer is open */
  }

  /* Iframe sits 12px under browse (or under open drawer) */
  html body .page-shell.subpage-shell .iframe-content-frame {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html body .page-shell.subpage-shell .iframe-panel-inline {
    padding-top: 0 !important;
  }}}}}}