/* =========================
   PODCRASH ONE-SHEET
   Pixel-locked to PDF
   ========================= */

/* ===== Layout scaffolding ===== */

/* Outer wrapper (positions the grey card below the 100px nav) */
.os-outer {
  background: #101111;
  padding-top: 232px;        /* starts 232px from the very top */
  padding-bottom: 90px;
  margin: 0;
}

/* Horizontal wrap (full width minus page gutters) */
.os-wrap {
  max-width: 1592px;         /* PDF canvas width you’re using */
  width: 100%;
  margin: 0 auto;
  padding-left: 158px !important;   /* page gutter L */
  padding-right: 158px !important;  /* page gutter R */
}

/* Optional wide wrap (if you need it later) */
.os-wrap-wide {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0 55px;
}

/* ===== Grey feature panel ===== */

.os-panel {
  position: relative;
  overflow: hidden;          /* clips scribble to the card corners */
  background: #1B1E22;
  border-radius: 0px;        /* square per your update */
  padding: 42px 65px 46px;   /* inner content gutter */
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Top decorations inside the grey panel (Row 1) */
.os-scribble {
  position: absolute;
  /* Pin to the TRUE top-left edge of the card (ignore panel padding) */
  top: 0px;                /* negate .os-panel top padding (42) */
  left: 0px;               /* negate .os-panel left padding (55) */
  z-index: 1;
  pointer-events: none;
  user-select: none;
  display: block;
  height: auto;
}

.os-hero {
  position: relative;        /* sits above scribble, stays in flow */
  z-index: 2;
  display: block;
  margin: 0px auto 0;       /* ~60px down from card top */
  height: auto;
  max-width: 100%;
  /* If you need a locked width from the PDF, uncomment:
     width: 860px; */
}

/* Ensure all normal content stacks above the scribble */
.os-panel > *:not(.os-scribble) { position: relative; z-index: 2; }

/* ===== Description box ===== */

.os-hero + .os-desc { margin-top: 28px; }   /* spacing from banner */

.os-desc {
  border: 1.5px solid rgba(255,255,255,.80);
  border-radius: 8px;
  padding: 22px 26px;
  margin-bottom: 42px;       /* space before the next block */
}

/* Match site paragraph defaults inside the panel */
.os-panel p,
.os-panel li {
  font-family: sans-serif;
  font-size: 20px;
  line-height: 30px;
  color: rgba(255,255,255,.86);
  margin-top: 0px;
}

.os-desc .os-accent { color: #D00019; font-weight: 700; }

/* Accent red for inline <span> in body copy (NOT the host line) */
.os-desc p span,
.os-bio span,
.os-focus p span,
.os-card__body p span {
  color: var(--primary-color, #e51c22) !important;
}

/* Utility class if you ever want to force red anywhere */
.os-accent,
.accent {
  color: var(--primary-color, #e51c22) !important;
}

/* Keep the host line’s secondary span tone (don’t turn it red) */
.os-host span {
  color: rgba(255,255,255,.80);
}

/* ===== Host line (boxed eyebrow) just before two-column ===== */

.os-host {
  font-family: "Proxima Nova Rg", sans-serif;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.86);

  border: 1px solid #FFFFFF;
  border-radius: 0px;
  padding: 30px;
  background: transparent;
  display: block;

  /* rhythm around the block */
  margin-top: 26px;          /* after .os-desc or .os-hero */
  margin-bottom: 14px;       /* before the two-column block */
}

.os-host strong { color: #FFFFFF;}
.os-host span   { color: rgba(255,255,255,.80); }

/* If the host line comes immediately after the hero (no desc) */
.os-hero + .os-host { margin-top: 28px; }

/* Make the host box hug just the text width (optional) */
.os-host.is-inline { display: inline-block; }

/* ===== Two-column split ===== */

.os-twoCol {
  display: grid;
  grid-template-columns: 362px 1fr; /* fixed image column, flexible text column */
  gap: 46px;
  margin-bottom: 52px;
  margin-top:30px;
}

.os-imgCard {
  background: rgba(0,0,0,.4);
  border-radius: 0px;
  padding: 0px;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 28px rgba(0,0,0,.35);
}

.os-imgCard img {
  width: 100%;
  height: auto;
  aspect-ratio: 262 / 264;   /* keeps proportion from comp */
  object-fit: cover;
  border-radius: 6px;
}

/* Right column text */
.os-name {
  color: #D00019;
  font-family: Antonio, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 120px;
  line-height: 102px;
  letter-spacing: 1.5px;
  margin: 0 -px 0px 14px;
}

.os-subhead {
  font-family: "Proxima Nova Rg", sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px;
  margin-top: 20px !important;
}

.os-bio {
  max-width: 720px;          /* readable line length */
}

/* ===== PodCRASH lockup ===== */

.os-lockup { margin-bottom: 34px; }
.os-lockup img { height: 86px; width: auto; }

/* ===== Focus grid ===== */

.os-badge {
  position: relative; width: fit-content;
  margin: 46px auto 28px;
}
.os-badge::before {
  content: "";
  position: absolute; inset: 0;
  transform: translate(7px,7px);
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 8px;
}
.os-badge span {
  position: relative;
  display: inline-block;
  background: #1B1E22;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
}

.os-focus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 44px;
}
.os-focus > div { padding: 30px 26px; }
.os-focus > div + div { border-left: 1px solid rgba(255,255,255,.3); }
.os-focus h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: #D00019;
  margin-bottom: 12px;
}
.os-focus p {
  font-size: 14px;
  line-height: 22px;
  color: rgba(255,255,255,.85);
}

/* ===== Where you can listen ===== */

.os-listen {
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  margin-bottom: 38px;
}
.os-listen__head {
  background: #D00019; color: #fff;
  padding: 12px 20px;
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
}
.os-listen__body {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 18px 20px;
}
.os-platform {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  font-size: 13px;
  transition: background .2s;
}
.os-platform img { height: 18px; width: 18px; }
.os-platform:hover { background: rgba(255,255,255,.12); }

/* ===== Two side cards ===== */

.os-twoCards {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  margin-bottom: 42px;
}
.os-card {
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  overflow: hidden;
}
.os-card__head {
  background: rgba(255,255,255,.05);
  font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.os-card__body { padding: 22px 20px; }
.os-card__body p { font-size: 13px; line-height: 26px; }

/* ===== Stats ===== */

.os-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  margin-bottom: 54px;
}
.os-stat {
  background: #D00019;
  border-radius: 6px;
  text-align: center;
  padding: 24px 0;
}
.os-num {
  font-family: Antonio, sans-serif;
  font-size: 42px; line-height: 46px; font-weight: 800;
}
.os-label { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }

/* ===== CTA stripe ===== */

.os-cta { margin: 86px 0 0; }
.os-ctaInner {
  border-radius: 8px;
  padding: 72px 32px;
  text-align: center;
}
.os-ctaTitle {
  font-family: Antonio, sans-serif;
  font-size: 52px; line-height: 56px; font-weight: 800;
  text-transform: uppercase; letter-spacing: -1px;
}
.os-cta .btn {
  display: inline-block; margin-top: 22px;
  padding: 14px 28px; background: #0C0D0E;
  color: #fff; font-size: 14px;
  font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 4px;
}

/* ===== Responsive adjustments ===== */

@media (max-width: 1200px) {
  /* soften the giant page gutters on smaller screens */
  .os-wrap { padding-left: 40px !important; padding-right: 40px !important; }
}

@media (max-width: 991px) {
  .os-twoCol { grid-template-columns: 1fr; }
  .os-name { font-size: 84px; line-height: 92px; }
  .os-twoCards { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .os-outer { padding-top: 150px; padding-bottom: 72px; }
  .os-panel { padding: 24px 18px; }
  .os-name { font-size: 56px; line-height: 64px;text-align:center;}
  .os-focus { grid-template-columns: 1fr; }
  .os-focus > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.3); }
  .os-stats { grid-template-columns: 1fr; }
  .os-ctaTitle { font-size: 36px; line-height: 42px; }
  /* re-pin scribble against smaller padding */
  .os-scribble { top: -24px; left: -18px; }
  .os-hero {margin-top: 80px;   /* was 60px on desktop; bump on mobile */}
  /* keep the scribble pinned to the card edge on mobile */
  .os-scribble {top: -24px;left: -18px;}
  .os-twoCol {gap: 10px;}
  .os-right {padding: 10px;}
  .os-subhead {text-align: center;}
}


/* ======= Focuses block: full white outline + center legend ======= */
.os-focusBlock {
  position: relative;
  border: 2px solid #fff;     /* full white outline */
  border-radius: 0px;
  margin: 56px 0 44px;        /* rhythm around the block */
  background: transparent;
}

/* Centered legend sitting on the border line (fieldset/legend vibe) */
.os-focusLegend {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -50%);  /* straddles the border */
  background: #1B1E22;               /* same as panel bg to "cut" the line */
  border: 2px solid #fff;
  border-radius: 0px;
  padding: 10px 110px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-family: "Proxima Nova Rg", sans-serif;
  font-size: 28px;                   /* BIG letters */
  line-height: 1;
  white-space: nowrap;
  color: var(--text-primary-color-alt);
}

/* 3-up grid inside the outlined box */
.os-focusGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;                /* center text as requested */
}

/* inner padding for each column */
.os-focusItem {
  padding: 30px 26px;
}

/* mid-size vertical divider between columns */
.os-focusItem + .os-focusItem {
  border-left: 2px solid rgba(255,255,255,0.65);  /* mid thickness line */
}

/* Headings + copy sizing (keeps your brand red headings) */
.os-focusItem h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: #D00019;
  margin: 0 0 12px;
}
.os-focusItem p {
  font-family: "Proxima Nova Rg", sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: rgba(255,255,255,.90);
  margin: 0;
}

/* —— Responsive —— */
@media (max-width: 991px) {
  .os-focusLegend { font-size: 20px; }
}

@media (max-width: 575px) {
  .os-focusLegend { font-size: 18px; }

  .os-focusGrid {
    grid-template-columns: 1fr;      /* stack */
  }
  /* swap vertical dividers for horizontal ones */
  .os-focusItem + .os-focusItem {
    border-left: 0;
    border-top: 2px solid rgba(255,255,255,0.65);
  }
  .os-focusItem { padding: 24px 20px; }
}


/* knobs (easy to tweak) */
.os-focusBlock {
  /* overall height of the outlined box */
  --focus-min-h: 320px;              /* ↑ raise/lower to match the PDF */
  --focus-col-py: 40px;              /* vertical padding inside each column */
  --focus-h3-size: 22px;             /* heading size inside each column */
  --focus-h3-line: 25px;
  --focus-p-size: 16px;              /* paragraph size inside each column */
  --focus-p-line: 24px;
}

/* center the content in the taller box */
.os-focusGrid {
  min-height: var(--focus-min-h);
  align-content: center;             /* vertically centers the grid content */
  padding-block: 12px;               /* small breathing room above/below */
}

/* thicker vertical dividers already set; keep them */
.os-focusItem { 
  padding: var(--focus-col-py) 26px; 
  text-align: center;
}

.os-focusItem h3 {
  font-size: var(--focus-h3-size);
  line-height: var(--focus-h3-line);
  margin: 0 0 12px;
}

.os-focusItem p {
  font-size: var(--focus-p-size);
  line-height: var(--focus-p-line);
  margin: 0 auto;
  max-width: 36ch;                   /* keeps lines tidy in the wider columns */
}

/* Mobile: reduce height & type slightly so it fits nicely stacked */
@media (max-width: 575px) {
  .os-focusBlock {
    --focus-min-h: 0;                /* let content dictate height when stacked */
    --focus-col-py: 24px;
    --focus-h3-size: 18px;
    --focus-h3-line: 24px;
    --focus-p-size: 14px;
    --focus-p-line: 22px;
  }
  .os-focusGrid { padding-block: 6px; }
  .os-focusLegend {padding:10px 10px;}
}

/* ——— Where You Can Listen ——— */
.os-listen {
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  margin: 38px 0;                /* adjust if you want it tighter/flush */
  overflow: hidden;
  background: transparent;
}

.os-listen__head {
  background: #D00019;
  color: #fff;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.os-listen__body {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
}

.os-platform {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  transition: background .2s ease;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  color: var(--text-primary-color);
}

.os-platform:hover { background: rgba(255,255,255,.12); }

.os-platform img {
  height: 20px;          /* tidy size for your PNGs */
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

.os-platform span { font-weight: 700; }

/* If you want it to visually “touch” the Focuses block above, reduce margin: */
.os-listen.tight { margin-top: 18px; }      /* or set to 0 for no gap */

/* Mobile */
@media (max-width: 575px) {
  .os-listen__body { gap: 10px; padding: 16px; }
  .os-platform { width: 100%; justify-content: center; }
}


/* ——— Make the Focuses block butt against the next box ——— */
.os-focusBlock { margin-bottom: 0;border-bottom:none; }

/* ——— Where You Can Listen: centered row + larger icons ——— */
/* ——— Where You Can Listen: left-aligned row + bigger icons + tighter spacing ——— */
.os-listenInline {
  border: 2px solid #fff;
  border-radius: 0px;
  margin-top: 0;                 /* touches the Focuses outline */
  padding: 12px 18px;
  display: flex;
  align-items: center;           /* vertical centering */
  justify-content: flex-start;   /* ← left align like the comp */
  gap: 0;                        /* control spacing manually */
  background: transparent;
}

.os-listenLabel {
  color: #D00019;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-family: "Proxima Nova Black", sans-serif;
  font-size: 24px;               /* bold label (bigger than before) */
  white-space: nowrap;
  margin-left: 14px;             /* inset from white border like the comp */
  margin-right: 40px;            /* space between label and first icon */
}

.os-listenIcons {
  display: inline-flex;
  align-items: center;
  gap: 32px;                     /* spacing between icons/badges */
}

.os-listenIcons img {
  height: 42px;                  /* larger like the screenshot */
  width: auto;
  display: block;
  width: 133px;
}

/* If your “icons” are actually small square logos (not full badges),
   you can add a badge look quickly: uncomment below */
/*
.os-listenIcons img {
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 12px;
  background: #0F1010;
  height: auto;      // let padding set the height
}
*/

@media (max-width: 575px) {
  .os-listenInline {
    flex-wrap: wrap;             /* label can go above */
    padding: 12px 14px;
  }
  .os-listenLabel {
    font-size: 18px;
    margin-left: 6px;
    margin-right: 18px;          /* tighter on small screens */
  }
  .os-listenIcons { gap: 20px; }
  .os-listenIcons img { height: 32px; }
}

/* ——— Focuses block: half-height vertical dividers + narrower copy ——— */
.os-focusItem { position: relative; }

.os-focusItem + .os-focusItem {
  border-left: none;             /* remove full-height rule */
}

/* draw a mid-height divider centered vertically */
.os-focusItem + .os-focusItem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;                      /* start a bit below top */
  height: 60%;                   /* half-ish height */
  width: 2px;
  background: rgba(255,255,255,0.65);
  transform: translateX(-1px);   /* center the 2px line on the column edge */
}

/* narrow the paragraph measure inside each focus column */
.os-focusItem p {
  max-width: 34ch;               /* less wide lines */
  margin-left: auto;
  margin-right: auto;
}


/* ===== Reusable outlined block (legend on border) ===== */
.os-block {
  position: relative;
  border: 2px solid #fff;
  border-radius: 8px;
  margin: 26px 0 44px;
  background: transparent;
}
.os-block--tight { margin-top: 0; } /* make it butt against the previous box */

/* Center legend sitting across the border line */
.os-legend {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -50%);
  background: #1B1E22;                /* same as .os-panel */
  border: 2px solid #fff;
  border-radius: 8px;
  padding: 10px 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-family: "Proxima Nova Rg", sans-serif;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
}

/* 3-up grid with centered copy and half-height dividers */
.os-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.os-col {
  position: relative;
  padding: 30px 26px;
}
.os-col + .os-col::before {
  content: "";
  position: absolute;
  left: 0; top: 20%;
  height: 60%;                        /* half-height divider */
  width: 2px;
  background: rgba(255,255,255,0.65);
  transform: translateX(-1px);
}

/* Typography inside blocks (matches Focuses section) */
.os-block h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: #D00019;
  margin: 0 0 12px;
}
.os-block p {
  font-size: 14px;
  line-height: 22px;
  color: rgba(255,255,255,.90);
  margin: 0 auto;
  max-width: 34ch;                    /* keep measure tidy */
}

/* ——— Notable Guests specifics ——— */
.os-guestLogo {
  height: 50px;                       /* adjust to your logo assets */
  width: auto;
  display: block;
  margin: 0 auto 12px;
  object-fit: contain;
}
.os-guest h4 {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
  font-size: 22px;
  line-height: 22px;
	color: #D00019;
}

/* ——— Upcoming specifics ——— */
.os-date {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ——— Responsive ——— */
@media (max-width: 991px) {
  .os-legend { font-size: 20px; }
}
@media (max-width: 575px) {
  .os-legend { font-size: 18px; }
  .os-grid { grid-template-columns: 1fr; }
  .os-col + .os-col::before {
    width: 100%; height: 2px; left: 0; top: 0; transform: none;
    background: rgba(255,255,255,0.65);
  }
  .os-col + .os-col { border-left: none; } /* safety */
  .os-col { padding: 24px 20px; }
}

/* ——— Notable Guests (own box, spaced from above, red names, no dividers) ——— */
.os-block--guests { 
  margin-top: 26px;              /* not touching the previous white box */
}
.os-block--guests .os-legend {   /* uses the same centered legend style you have */
  /* no changes needed; inherits .os-legend */
}

/* Grid of names only (no logos, no lines) */
.os-guestList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 26px;
  padding: 34px 26px 30px;       /* inner padding for the taller feel */
  list-style: none;
  margin: 0;
  text-align: center;
}
.os-guestList li {
  color: #D00019;                /* red names */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 18px;
  line-height: 24px;
}

/* ——— Upcoming (3 centered columns, big side padding, no dividers) ——— */
.os-block--upcoming {
  margin-top: 26px;              /* own box; not touching Notable Guests */
}

/* Centered content with heavy left/right padding */
.os-upcomingGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;         /* centers each column block */
  text-align: center;
  gap: 24px;
  padding: 38px 96px;            /* ← “mass padding” on left/right */
}

/* Card text sizes mirror your focus-section body */
.os-upItem h4 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: #D00019;
}
.os-upItem p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: rgba(255,255,255,.90);
  max-width: 36ch;               /* keep copy narrow like the comp */
}

/* ——— Responsive ——— */
@media (max-width: 991px) {
  .os-guestList { grid-template-columns: repeat(2, 1fr); }
  .os-upcomingGrid { grid-template-columns: 1fr 1fr; padding: 34px 40px; }
}

@media (max-width: 575px) {
  .os-guestList { grid-template-columns: 1fr; padding: 24px 20px; }
  .os-upcomingGrid { grid-template-columns: 1fr; padding: 24px 20px; }
  .os-guestList li { font-size: 16px; line-height: 22px; }
}


/* ===== Notable Guests + Upcoming (exact to comp) ===== */

/* Outer white box */
.os-guests {
  position: relative;
  border: 2px solid #fff;
  border-radius: 0px;
  background: transparent;
  margin-top: 50px;                 /* not touching the box above */
}

/* Uses your existing legend look */
.os-legend {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -50%);
  background: #1B1E22;             /* same as panel */
  border: 2px solid #fff;
  border-radius: 0px;
  padding: 10px 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-family: "Proxima Nova Rg", sans-serif;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
}

/* Top row (4 columns, centered, no vertical lines) */
.os-guestsTop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  padding: 36px 20px 10px !important;          /* roomy top padding like the comp */
}

.os-guestName {
  margin: 0 0 10px;
  font-family: Antonio, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #D00019;
  font-size: 44px;                  /* big red names */
  line-height: 0.95;
  letter-spacing: 0.5px;
}

.os-guestRole {
  font-family: "Proxima Nova Rg", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 28px;
}

/* Horizontal divider between the two rows (full width inside box) */
.os-guestsDivider {
  height: 2px;
  background: #fff;
  margin: 0;                        /* touches edges inside the border */
}

/* Bottom row: 3 columns (label + two upcoming items) with heavy side padding */
.os-guestsBottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  justify-items: center;
  text-align: center;
  gap: 24px 40px;
  padding: 38px 96px;               /* “mass padding” left/right */
}

.os-upLabel {
  align-self: center;
  justify-self: start;              /* keep label hugging the left side */
  font-family: Antonio, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #D00019;
  letter-spacing: 1px;
  font-size: 42px;                  /* big red UPCOMING */
  line-height: 1;
}

.os-upItem { max-width: 40ch; }

.os-upName {
  margin: 0 0 8px;
  font-family: "Proxima Nova Rg", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #FFFFFF;
  font-size: 22px;
  line-height: 28px;
}

.os-upSub {
  font-family: sans-serif;
  text-transform: uppercase;
  color: rgba(255,255,255,.90);
  font-size: 16px;
  line-height: 22px;
}

/* —— Responsive —— */
@media (max-width: 1200px) {
  .os-guestName { font-size: 40px; }
  .os-guestsBottom { padding: 34px 64px; }
}

@media (max-width: 991px) {
  .os-guestsTop { grid-template-columns: repeat(2, 1fr); }
  .os-guestsBottom {
    grid-template-columns: 1fr 1fr;
    padding: 30px 40px;
  }
  .os-upLabel { grid-column: 1 / -1; justify-self: center; margin-bottom: 8px; }
}

@media (max-width: 575px) {
  .os-legend { font-size: 18px; }
  .os-guestsTop { grid-template-columns: 1fr; padding: 28px 20px; }
  .os-guestName { font-size: 34px; }
  .os-guestRole  { font-size: 18px; line-height: 24px; }

  .os-guestsBottom {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }
  .os-upLabel { font-size: 32px; justify-self: center; }
}

/* PATCH: Notable Guests — make name same size as role */
.os-guestName {
  font-family: Antonio, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  font-size: 16px;          /* ← match role */
  line-height: 28px;        /* ← match role */
  letter-spacing: 1px;
  margin: 0 0 6px;
}

.os-guestRole {
  font-family: "Proxima Nova Rg", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #FFFFFF;
  font-size: 16px;          /* unchanged, same as name */
  line-height: 28px;        /* unchanged, same as name */
}


/* Notable Guests: make name match the 'Creating Explosive Growth' heading */
.os-guestRole {
  font-family: Antonio, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #D00019 !important;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 1px;
}
.os-guestName {
  font-family: "Proxima Nova Rg", sans-serif;  /* same family as the red focus headings */
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  font-size: 16px;                    /* 20/26 like the focus h3 */
  line-height: 26px;
  letter-spacing: 1px;
  margin: 0 0 6px;
}




/* make the bottom row inside the Notable Guests box thinner */
.os-guestsBottom {
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  gap: 16px 0px;         /* generous horizontal spacing */
  padding: 0px 96px;     /* ← thinner vertical padding than before */
  margin-top: 10px;
}

/* UPCOMING label — mirror .os-listenLabel exactly */
.os-upLabel {
  color: #D00019;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-family: "Proxima Nova Black", sans-serif;
  font-size: 24px;        /* same visual weight as the Listen label */
  line-height: 1;
  white-space: nowrap;
  /* center it within its third like the comp */
  justify-self: center;
}

/* Name + subline (centered) */
.os-upItem { text-align: center; max-width: 40ch; }

.os-upName {
  margin: 0 0 6px;
  font-family: "Proxima Nova Rg", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #FFFFFF;
  font-size: 20px;        /* same height as Notable Guest names/roles */
  line-height: 20px;
  margin-top:10px;
}

.os-upSub {
  margin: 0;
  font-family: sans-serif;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 15px;
  margin-bottom:15px;
}

/* Responsive tweaks */
@media (max-width: 991px) {
  .os-guestsBottom { gap: 14px 40px; padding: 12px 48px; }
  .os-upLabel { font-size: 20px; }
}
@media (max-width: 575px) {
  .os-guestsBottom { grid-template-columns: 1fr; padding: 12px 20px; gap: 10px 0; }
  .os-upLabel { font-size: 22px;text-align: center}
}

/* ===== Suggested Interview Topics (like UPCOMING, text-heavy) ===== */
.os-suggest {
  display: grid;
  grid-template-columns: 32% 67%;
  align-items: center;
  gap: 24px;
  border: 2px solid #fff;
  border-radius: 0px !important;
  padding: 14px 24px;
  margin-top: 26px; /* own box; not touching above */
  background: transparent;
}

.os-suggestLabel {
  font-family: Antonio, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #D00019;
  letter-spacing: 0.5px;
  font-size: 42px;                      /* big, two-line red label */
  line-height: 0.96;
}

.os-suggestText {
  margin: 0;
  text-align: left;                     /* matches the comp */
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.5px;
  font-size: 16px !important;
  line-height: 22px !important;
  font-family: "Proxima Nova Rg", sans-serif;
}

/* Responsive */
@media (max-width: 1100px) {
  .os-suggest { grid-template-columns: 45% 55%; }
  .os-suggestLabel { font-size: 36px; }
}

@media (max-width: 800px) {
  .os-suggest { grid-template-columns: 1fr; gap: 10px; padding: 12px 18px; }
  .os-suggestLabel { font-size: 30px; line-height: 1; }
  .os-suggestText { font-size: 18px; line-height: 26px; text-align: center; }
}


/* ===== Bottom metered strip ===== */
.os-bottom {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr; /* wide social area + 3 equal meters */
  align-items: stretch;
  border-top: 0px solid #fff;
  border-bottom: 0px solid #fff;
  background: transparent;
}

/* — Left: socials — */
.os-socialBar {
  padding: 26px 30px;              /* thin row feel */
}

.os-socialList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 46px;
  row-gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.os-socialItem {
  display: flex;
  align-items: center;
  gap: 5px; /* 16px */
  white-space: nowrap;
}

.os-socialItem img {
  height: 32px;                    /* big white icons */
  width: auto;
  display: block;
  /* remove this filter if your SVGs are already white */
}

.os-socialLink {
  color: #D00019;                  /* brand red */
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
  font-family: Antonio, sans-serif;
  font-size: 15px;
  line-height: 1.1;
  text-decoration: none;
}

/* — Right: meters — */
.os-meters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 2px solid #fff;     /* vertical rule between socials and meters */
}

.os-meter {
  background: #D00019;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 12px;
  text-align: center;
}

.os-meter + .os-meter {
  border-left: 2px solid #fff;     /* white rules between red tiles */
}

.os-meterNumber {
  font-family: Antonio, sans-serif;
  font-weight: 800;
  font-size: 80px;                /* big numbers */
  line-height: .9;
  color: #fff;
  letter-spacing: .5px;
}

.os-meterLabel {
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-family: Antonio, sans-serif;
  font-size: 28px;
  line-height: 1.05;
  color: #fff;
}

/* — Responsive — */
@media (max-width: 1200px) {
  .os-bottom { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .os-meterNumber { font-size: 96px; }
  .os-meterLabel { font-size: 24px; }
}

@media (max-width: 900px) {
  .os-bottom {
    grid-template-columns: 1fr;       /* stack socials above meters */
  }
  .os-meters { border-left: 0; }
  .os-socialList {
    grid-template-columns: 1fr 1fr;   /* two columns on tablet */
    column-gap: 30px;
  }
}

@media (max-width: 575px) {
  .os-socialList { grid-template-columns: 1fr; }
  .os-socialItem img { height: 28px; }
  .os-socialLink { font-size: 16px; }

  .os-meters {
    grid-template-columns: 1fr;       /* meters stack */
  }
  .os-meter + .os-meter { border-left: 0; border-top: 2px solid #fff; }
  .os-meterNumber { font-size: 72px; }
  .os-meterLabel { font-size: 20px; }
}


/* Strip container: use flex so the meter group can dock right */
.os-bottom {
  display: flex;                 /* was grid */
  align-items: stretch;
  border-top: 0px solid #fff;
  border-bottom: 0px solid #fff;
}

/* Social area grows, meter group rides to the right */
.os-socialBar {
  flex: 1 1 auto;
  padding: 26px 30px;
}

/* Meter group sits flush to the right edge */
.os-meters {
  margin-left: auto;             /* ← pushes meters to the far right */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 2px solid #fff;   /* vertical rule between socials & meters */
}

/* Red tiles + white separators */
.os-meter {
  background: #D00019;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 12px;
  text-align: center;
  border-bottom:2px solid #fff;
}
.os-meter + .os-meter { border-left: 2px solid #fff; }

/* add a white rule on the very right edge of the strip */
.os-meter:last-child { border-right: 2px solid #fff; }

/* keep your existing .os-meterNumber and .os-meterLabel rules */

/* Mobile: stack the red meter tiles */
@media (max-width: 575px) {
  /* put socials above, meters below */
  .os-bottom { 
    display: flex; 
    flex-direction: column; 
  }

  /* meters take full width and stack vertically */
  .os-meters {
    margin-left: 0;              /* no right column on mobile */
    width: 100%;
    display: flex;
    flex-direction: column;
    border-left: 0;              /* remove desktop vertical rule */
    border-right: 0;
  }

  /* white separators between stacked tiles */
  .os-meter + .os-meter {
    border-top: 2px solid #fff;
    border-left: 0;              /* ensure no leftover vertical rules */
  }
	.os-meter:last-child {
		border-right: none;
		border-bottom: none;
	}
}


/* Mobile: stack the listen icons 2-up per row */
@media (max-width: 575px) {
  /* keep the label on its own line, icons below */
  .os-listenInline { flex-wrap: wrap; }
  .os-listenLabel { width: 100%; margin-bottom: 8px; }

  /* turn the icon row into a 2-col grid */
  .os-listenIcons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;           /* center each icon cell */
    gap: 14px 18px;                  /* row/column spacing */
  }

  .os-listenIcons img { height: 28px; } /* adjust if you want larger */
}