/* ==========================================================================
   Do More Media — Static HTML build
   Breakpoints:  desktop (default)  ·  1024px (fluid step)  ·  767px tablet  ·  599px mobile
   Type floor:   16px — nothing in this stylesheet goes below 16px.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Colour */
  --ink:        #0A0A0A;   /* page background            */
  --surface:    #141414;   /* dark cards                 */
  --surface-2:  #1C1C1C;   /* dark card, raised          */
  --paper:      #F4F4F2;   /* light sections             */
  --white:      #FFFFFF;
  --red:        #E20013;   /* brand accent — matches the PDF exactly     */
  --red-hi:     #FF1A2E;   /* hover                                       */
  /* Accessibility note: #E20013 on --ink is 4.0:1 — just under WCAG AA
     (4.5:1) for the small red labels ("Money", "Latest Episodes"). It is
     fine on white (4.95:1) and fine as a button fill (white text on red).
     To make the red *text* compliant without touching buttons, set:
        --red-label: #FF1A2E;   (5.13:1)
     and it will be picked up by .eyebrow / .ep-card__tag below. */
  --red-label:  var(--red);
  --maroon:     #1E060C;   /* maroon band base           */
  --line:       rgba(255,255,255,.12);
  --line-dark:  rgba(0,0,0,.10);

  --text:       #FFFFFF;
  --text-mute:  rgba(255,255,255,.66);
  --text-dim:   rgba(255,255,255,.48);
  --text-ink:   #0A0A0A;
  --text-ink-mute: rgba(10,10,10,.66);

  /* Type — every value >= 16px */
  --ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fff: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --fs-display: 64px;   /* hero h1              */
  --fs-h1:      56px;   /* inner page hero      */
  --fs-h2:      50px;   /* section heading      */
  --fs-h3:      24px;   /* card heading         */
  --fs-h4:      20px;
  --fs-lead:    19px;   /* hero paragraph       */
  --fs-body:    18px;
  --fs-small:   16px;   /* FLOOR                */
  --fs-eyebrow: 16px;

  --lh-tight: 1.06;
  --lh-head:  1.14;
  --lh-body:  1.62;

  /* Space */
  --container: 1290px;
  --gutter: 40px;
  --sec-y: 120px;        /* section vertical rhythm */
  --gap: 28px;

  /* Shape */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------- 2. Reset/base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--red-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--red); color: #fff; padding: 12px 20px;
  border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ------------------------------------------------------- 3. Type utilities */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--red-label);
  margin-bottom: 18px;
}
.eyebrow--light { color: var(--white); }
.eyebrow--ink   { color: var(--red); }

.h-display {
  font-family: var(--fff); 
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -.025em;
  text-transform: capitalize;
}
.h1 { font-family: var(--fff); font-size: var(--fs-h1); line-height: var(--lh-head); font-weight: 600; letter-spacing: -.024em; text-transform: capitalize;}
.h2 { font-family: var(--fff); font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 600; letter-spacing: -.022em; text-transform: capitalize;}
.h3 { font-family: var(--fff); font-size: var(--fs-h3); line-height: 1.3;  font-weight: 600; letter-spacing: -.012em; text-transform: capitalize;}
.h4 { font-family: var(--fff); font-size: var(--fs-h4); line-height: 1.35; font-weight: 600; text-transform: capitalize;}

.lead  { font-size: var(--fs-lead); color: var(--text-mute); max-width: 58ch; }
.muted { color: var(--text-mute); }
.dim   { color: var(--text-dim); font-size: var(--fs-small); }

/* Light-section text colours */
.is-light .lead,
.is-light .muted { color: var(--text-ink-mute); }
.is-light { color: var(--text-ink); }

/* ---------------------------------------------------------- 4. Backgrounds */
/* Maroon band: red glow + fine grid, used on heroes and feature bands */
.band-maroon {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 140% at 78% 8%,  rgba(226,0,19,.42) 0%, rgba(226,0,19,0) 55%),
    radial-gradient(90%  120% at 8%  92%, rgba(226,0,19,.22) 0%, rgba(226,0,19,0) 60%),
    var(--maroon);
  overflow: hidden;
}
.band-maroon::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 98px 98px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
.band-dark  { background: var(--ink); }
.band-paper { background: var(--paper); color: var(--text-ink); }

.section { padding-block: var(--sec-y); }
.section--tight { padding-block: 88px; }

/* -------------------------------------------------------------- 5. Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--red   { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hi); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.btn--white { background: #fff; color: var(--text-ink); }
.btn--white:hover { background: #e9e9e9; }

.btn--ink   { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #262626; }

.btn--gradient {
  color: #fff;
  background: linear-gradient(92deg, #FEDA75 0%, #FA7E1E 22%, #D62976 55%, #962FBF 78%, #4F5BD5 100%);
}
.btn--gradient:hover { filter: brightness(1.08); }

.btn__icon { width: 20px; height: 20px; flex: none; }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 17px 30px; }

/* Inline "Watch Now / Read More" link with red arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-small); font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 3px;
  transition: gap .2s var(--ease), border-color .2s var(--ease);
}
.link-arrow:hover { gap: 14px; border-color: #fff; }
.link-arrow svg { width: 17px; height: 17px; color: var(--red); flex: none; }
.is-light .link-arrow { border-bottom-color: rgba(10,10,10,.35); }
.is-light .link-arrow:hover { border-bottom-color: var(--text-ink); }
.link-arrow--red { color: var(--red); border-bottom-color: rgba(226,0,19,.5); }

/* Dark cards can sit inside a light section (e.g. topic cards on the paper
   band). Re-assert the dark treatment so the light rules above don't leak. */
.is-light .topic-card .link-arrow,
.is-light .social-card .link-arrow {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.45);
}
.is-light .topic-card .link-arrow:hover,
.is-light .social-card .link-arrow:hover { border-bottom-color: #fff; }

/* ------------------------------------------------------------ 6. Structure */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 52px;
}
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .lead { text-align: center; }
.section-head__cta { flex: none; padding-bottom: 6px; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* -------------------------------------------------------------- 7. Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(15, 4, 8, .82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 78px;
}
.logo { display: inline-flex; align-items: center; flex: none; }
.logo svg { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: var(--fs-small); font-weight: 500;
  color: rgba(255,255,255,.86);
  border-radius: var(--r-pill);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: #fff; background: rgba(255,255,255,.09); }
.nav__link svg { width: 14px; height: 14px; opacity: .8; transition: transform .2s var(--ease); }
.nav__cta { margin-left: 10px; }

/* Dropdown */
.nav__item { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 232px; padding: 10px;
  background: #17070C;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }
.nav__panel a {
  display: block; padding: 11px 14px; border-radius: var(--r-sm);
  font-size: var(--fs-small); color: rgba(255,255,255,.82);
}
.nav__panel a:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px; flex: none;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
}
.burger span {
  display: block; position: relative;
  width: 19px; height: 2px; background: #fff; border-radius: 2px;
  transition: background .15s var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 19px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .22s var(--ease), top .22s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top:  6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  display: none;
  position: fixed; inset: 78px 0 0 0; z-index: 99;
  background: #100409;
  padding: 24px var(--gutter) 48px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav a {
  display: block; padding: 17px 0;
  font-size: 20px; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-nav__sub a { font-size: var(--fs-body); font-weight: 400; padding-left: 18px; color: var(--text-mute); }
.mobile-nav .btn { margin-top: 28px; }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------- 8. Heroes */
.hero { padding-block: 60px 0px; }
.hero--center { text-align: center; padding-block: 104px; }
.hero--center .lead { margin-inline: auto; text-align: center; }
.hero--center .eyebrow { color: #fff; }

.hero__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.hero__copy .lead { margin-top: 15px; }
.hero__copy .btn  { margin-top: 20px; }
.hero__actions { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

/* Media card in hero (the "Take Charge of Your Life" panel) */
.media-card {
  background: #fff; border-radius: var(--r-lg);
  padding: 18px; color: var(--text-ink);
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
}
.media-card__bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.media-card__bar svg { height: 20px; width: auto; }
.media-card__dots { color: #999; letter-spacing: 2px; font-size: var(--fs-body); }
.media-card__img {
  border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #ddd;
}
.media-card__img img { width: 100%; height: 100%; object-fit: cover; }
.media-card__foot {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 16px 4px 4px;
}
.media-card__title { font-size: var(--fs-h4); font-weight: 600; }
.media-card__sub { font-size: var(--fs-small); color: #777; }
.media-card__heart { color: #444; flex: none; }
.media-card__heart svg { width: 22px; height: 22px; }

/* Floating "Our Story" player badge */
.hero__stack { position: relative; }
.player-badge {
  position: absolute; right: -34px; bottom: 30px;
  display: flex; align-items: center; gap: 14px;
  background: #fff; color: var(--text-ink);
  border-radius: var(--r); padding: 14px 20px 14px 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.player-badge__play {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--red); border-radius: 50%; color: #fff;
}
.player-badge__play svg { width: 15px; height: 15px; }
.player-badge__lines { font-size: var(--fs-small); line-height: 1.35; }
.player-badge__lines b { display: block; color: var(--red); }
.player-badge__lines span { color: #8a8a8a; }
.player-badge__lines span b { display: inline; color: var(--text-ink); }
.player-badge__wave { display: flex; align-items: flex-end; gap: 2px; height: 20px; margin-top: 8px; }
.player-badge__wave i {
  width: 2px; background: var(--red); border-radius: 2px; opacity: .85;
}

/* Filter pills (Podcast page) */
.filters { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.filter {
  padding: 12px 26px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.45);
  background: transparent; color: #fff;
  font-size: var(--fs-small); font-weight: 500; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.filter:hover { background: rgba(255,255,255,.12); }
.filter.is-active { background: var(--red); border-color: var(--red); font-weight: 600; }

/* ------------------------------------------------------- 9. Episode cards */
.ep-card { display: flex; flex-direction: column; }
.ep-card__thumb {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(135deg, #2A0710, #4A0C18);
  border: 1px solid rgba(255,255,255,.08);
}
.ep-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-card__play {
  position: absolute; top: 12px; left: 12px;
  width: 34px; height: 24px; border-radius: 6px;
  background: var(--red); display: grid; place-items: center; color: #fff;
}
.ep-card__play svg { width: 11px; height: 11px; }
.ep-card__tag {
  margin: 20px 0 10px;
  font-size: var(--fs-small); font-weight: 700; color: var(--red-label);
}
.ep-card__title {
  font-family: var(--fff); font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; text-transform: capitalize;
  letter-spacing: -.01em;
}
/* When a card has no topic tag, the title (an <a> inside an <h3>) sits straight
   under the thumbnail. The <h3> is the thumb's sibling, so target that — it only
   matches when no .ep-card__tag sits between them. */
.ep-card__thumb + h3 { margin-top: 20px; }
a.ep-card__title:hover { color: var(--red); }
.ep-card__no { margin-top: 10px; font-size: var(--fs-small); color: var(--text-dim); }
/* Pin the Watch Now row to the bottom so buttons line up across a row of cards
   regardless of how long each title runs. */
.ep-card__foot { margin-top: auto; padding-top: 18px; display: flex; justify-content: flex-end; }

/* ---------------------------------------------------------- 10. Blog cards */
.post-card__thumb {
  aspect-ratio: 16 / 10; border-radius: var(--r-sm);
  background: #D8D8D8; overflow: hidden;
}
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__title { margin: 20px 0 10px; font-size: var(--fs-h4); font-weight: 600; }
a.post-card__title:hover { color: var(--red); }
.post-card__excerpt { font-size: var(--fs-small); color: var(--text-mute); line-height: 1.6; }
.post-card__meta { margin-top: 14px; font-size: var(--fs-small); color: var(--text-dim); }
.post-card__foot { margin-top: auto; padding-top: 18px; display: flex; justify-content: flex-end; }

/* ---------------------------------------------------------- 11. Reel cards */
.reel {
  position: relative; aspect-ratio: 9 / 16;
  border-radius: var(--r); overflow: hidden; background: #222;
  display: block;
}
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.reel:hover img { transform: scale(1.05); }

/* --------------------------------------------------------- 12. Topic cards */
.topic-card {
  background: var(--surface); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r); overflow: hidden; color: #fff;
  display: flex; flex-direction: column;
}
.topic-card__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: var(--fs-small); color: var(--text-mute);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topic-card__bar b { color: #fff; font-weight: 500; }
.topic-card__media { position: relative; aspect-ratio: 4 / 3; margin: 14px; border-radius: 12px; overflow: hidden; }
.topic-card__media img { width: 100%; height: 100%; object-fit: cover; }
.topic-card__mic {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--red); display: grid; place-items: center;
}
.topic-card__mic svg { width: 15px; height: 15px; }
.topic-card__body { padding: 4px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.topic-card__title { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 8px; }
.topic-card__desc { font-size: var(--fs-small); color: var(--text-mute); }
.topic-card__foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: var(--fs-small); color: var(--text-dim);
}
.topic-card__stats { display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------- 13. Social cards */
.social-card {
  background: var(--surface); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r); overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.social-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.social-card__head {
  height: 118px; display: grid; place-items: center;
}
.social-card__head svg { height: 36px; width: auto; }
.social-card__head img.u-brandmark { height: 40px; width: 40px; object-fit: contain; }
.social-card__badge img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
.social-card__initial { font-family: var(--fff); font-size: 40px; font-weight: 700; color: #fff; line-height: 1; }
.social-card__badge-initial { font-family: var(--fff); font-size: 22px; font-weight: 700; line-height: 1; }
.social-card__badge {
  position: absolute; top: 96px; left: 18px;
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.social-card__badge svg { width: 26px; height: 26px; }
.social-card__body { padding: 34px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.social-card__name { font-size: var(--fs-h4); font-weight: 600; }
.social-card__handle { font-size: var(--fs-small); color: var(--text-dim); margin-top: 4px; }
.social-card__stats { font-size: 12px; color: var(--text-mute); margin-top: 16px; }
.social-card__foot { margin-top: 20px; display: flex; justify-content: flex-end; }

/* Brand fills */
.bg-youtube   { background: linear-gradient(160deg, #FF3D3D, #E8000D); }
.bg-instagram { background: linear-gradient(135deg, #FEDA75, #FA7E1E 25%, #D62976 55%, #962FBF 80%, #4F5BD5); }
.bg-spotify   { background: linear-gradient(160deg, #26E06A, #10B94D); }
.bg-apple     { background: linear-gradient(140deg, #9E5BE8, #6A5AE0 60%, #4F5BD5); }
.bg-tiktok    { background: #0A0A0A; border-bottom: 1px solid rgba(255,255,255,.1); }
.bg-linkedin  { background: linear-gradient(160deg, #2D82CB, #0A66C2); }
.bg-podbean   { background: linear-gradient(160deg, #F2F2F2, #DCDCDC); }

/* --------------------------------------------------- 14. Light / info cards */
.card-light {
  background: #fff; border-radius: var(--r);
  padding: 30px; color: var(--text-ink);
  display: flex; flex-direction: column;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
}
.card-light__num { font-size: var(--fs-small); font-weight: 700; color: var(--red-label); margin-bottom: 22px; }
.card-light__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; margin-bottom: 14px; font-family: var(--fff);}
.card-light__text { font-size: var(--fs-small); color: var(--text-ink-mute); line-height: 1.6; }
.card-light__icon { width: 30px; height: 30px; color: var(--red); margin-bottom: 22px; }

/* Host cards */
.host-card {
  background: #fff; border-radius: var(--r); overflow: hidden; color: var(--text-ink);
}
.host-card__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font-size: var(--fs-small); color: #8a8a8a;
  border-bottom: 1px solid var(--line-dark);
}
.host-card__media { aspect-ratio: 16 / 10; margin: 16px; border-radius: 12px; overflow: hidden; background: #eee; }
.host-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.host-card__body { padding: 4px 22px 22px; }
.host-card__name { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.host-card__role { font-size: var(--fs-small); font-weight: 600; margin-top: 4px; }
.host-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.tag {
  font-size: var(--fs-small); color: var(--red); text-transform: capitalize;
  border: 1px solid rgba(226,0,19,.35); background: rgba(226,0,19,.06);
  border-radius: var(--r-pill); padding: 5px 13px; line-height: 1.3;
}
.host-card__bio { font-size: var(--fs-small); color: var(--text-ink-mute); line-height: 1.6; }
.host-card__foot {
  display: flex; align-items: center; gap: 16px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-dark);
  font-size: var(--fs-small); color: #8a8a8a;
}
.host-card__heart { margin-left: auto; color: #bbb; }

/* --------------------------------------------------------- 15. Guest cards */
.guest-rail {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
  gap: var(--gap); overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.guest-rail::-webkit-scrollbar { height: 6px; }
.guest-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 99px; }
.guest-card {
  scroll-snap-align: start;
  background: var(--surface); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r); overflow: hidden;
}
.guest-card__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-size: var(--fs-small); color: var(--text-dim);
}
.guest-card__media { aspect-ratio: 1 / 1; margin: 0 14px; border-radius: 12px; overflow: hidden; background: #2a2a2a; }
.guest-card__media img { width: 100%; height: 100%; object-fit: cover; }
.guest-card__body { padding: 16px 16px 6px; }
.guest-card__name { font-size: var(--fs-h4); font-weight: 600; }
.guest-card__role { font-size: var(--fs-small); color: var(--text-dim); margin-top: 4px; }
.guest-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; color: var(--text-dim);
}
.guest-card__foot svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- 16. Stats band */
.stats-card {
  border-radius: var(--r-lg); padding: 68px 40px;
  text-align: center;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 44px; }
.stat__num {
  font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.stat__num sup { font-size: var(--fs-body); font-weight: 500; color: var(--text-mute); }
.stat__label { margin-top: 14px; font-size: var(--fs-small); color: var(--text-mute); line-height: 1.5; }

/* --------------------------------------------------- 17. Split feature band */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center;
}
.split--rev .split__media { order: 2; }
.split__media > img { border-radius: var(--r); width: 100%; }

/* ---- Auto-scrolling guest slider (Work With Us) ---------------------------
   Images are full player-cards; the track holds two copies of the set and
   slides left by exactly one set (including the trailing gap), so the loop is
   seamless and endless. 5 cards at ~1 second each = a 5s cycle. */
.guest-slider { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.guest-slider__track { display: flex; width: max-content; --dm-gap: 22px; --dm-card: 300px; gap: var(--dm-gap); animation: dm-guest-marquee 5s linear infinite; will-change: transform; }
.guest-slider__item { flex: 0 0 auto; width: var(--dm-card); }
.guest-slider__item img { width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
/* One set = 5 cards + 5 gaps; shifting by that makes copy #2 land exactly where
   copy #1 began — no visible jump. */
@keyframes dm-guest-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-5 * (var(--dm-card) + var(--dm-gap)))); } }
/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) { .guest-slider__track { animation: none; } }
.split__copy .lead { margin-top: 22px; font-size: var(--fs-body); }
.split__copy .btn { margin-top: 30px; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 32px 0 4px; }
.feature { display: flex; gap: 14px; }
.feature__icon { width: 30px; height: 30px; flex: none; color: #fff; }
.feature__t { font-size: var(--fs-body); font-weight: 600; }
.feature__d { font-size: var(--fs-small); color: var(--text-mute); line-height: 1.5; margin-top: 2px; }

/* Host mini avatars */
.hosts-row { display: flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.host-mini { display: flex; align-items: center; gap: 12px; }
.host-mini img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.host-mini__n { font-size: var(--fs-small); font-weight: 600; }
.host-mini__r { font-size: var(--fs-small); color: var(--text-dim); }

/* Chip list (Work With Us hero) */
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; max-width: 500px; }
.chip {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-radius: var(--r-sm);
  background: #fff; color: var(--text-ink);
  font-size: var(--fs-small); font-weight: 500;
}
.chip svg { width: 19px; height: 19px; color: var(--red); flex: none; }

/* ---------------------------------------------------------- 18. Forms */
.field {
  width: 100%; padding: 16px 18px;
  background: #fff; color: var(--text-ink);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-small);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field::placeholder { color: #9A9A9A; }
.field:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(226,0,19,.16); }
textarea.field { min-height: 132px; resize: vertical; }
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
  padding-right: 46px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .col-2 { grid-column: 1 / -1; }

.form-card {
  background: var(--paper); border-radius: var(--r-lg); padding: 30px;
}
.form-card .field { background: #fff; border-color: #E4E4E1; }

/* Search bar (Blog listing) */
.blog-tools { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-bottom: 40px; }
.search {
  position: relative; width: 100%; max-width: 330px;
}
.search .field { padding-right: 46px; }
.search__icon {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: #777; pointer-events: none;
}
.icon-btn {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm); color: #fff; cursor: pointer;
  transition: background .18s var(--ease);
}
.icon-btn:hover { background: rgba(255,255,255,.1); }
.icon-btn svg { width: 19px; height: 19px; }

/* ---------------------------------------------------- 19. Contact info card */
.info-card { background: #fff; border-radius: var(--r); padding: 10px 26px; color: var(--text-ink); }
.info-row { padding: 22px 0; border-bottom: 1px solid var(--line-dark); }
.info-row:last-child { border-bottom: 0; }
.info-row__t { font-size: var(--fs-body); font-weight: 600; }
.info-row__v { font-size: var(--fs-small); color: #8a8a8a; margin-top: 6px; display: inline-block; }
.info-row__v:hover { color: var(--red); }

/* ---------------------------------------------------------- 20. Article */
.article { max-width: 780px; margin-inline: auto; }
.article__h2 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 26px; }
.article__figure {
  aspect-ratio: 16 / 9; background: #D8D8D8;
  border-radius: var(--r); overflow: hidden; margin-bottom: 44px;
}
.article__figure img { width: 100%; height: 100%; object-fit: cover; }
.article__body h3 { font-size: var(--fs-h4); font-weight: 700; margin: 34px 0 14px; }
.article__body h3:first-child { margin-top: 0; }
.article__body p { font-size: var(--fs-small); color: var(--text-mute); line-height: 1.75; }
.article__body .btn { margin-top: 40px; }
.article-meta { margin-top: 26px; font-size: var(--fs-small); color: var(--text-mute); }
.article-meta span { margin-inline: 8px; opacity: .5; }

/* ------------------------------------------------------- 21. Newsletter CTA */
.newsletter {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg);
  padding: 58px 52px;
  min-height: 300px;
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;
}
.newsletter__inner { position: relative; z-index: 2; max-width: 430px; }
.newsletter__title { font-size: 38px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 14px; font-family: var(--fff);}
.newsletter__text { font-size: var(--fs-small); color: rgba(255,255,255,.8); margin-bottom: 26px; }
.newsletter__form { display: flex; gap: 12px; max-width: 380px; }
.newsletter__form .field { flex: 1; }
.newsletter__mark {
  position: absolute; z-index: 1;
  right: 4%; top: 50%; transform: translateY(-50%);
  height: 74%; width: auto; pointer-events: none;
}
.newsletter__mark svg { height: 100%; width: auto; }

/* --------------------------------------------------------------- 22. Footer */
.site-footer { background: var(--ink); padding-top: 76px; padding-bottom: 34px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px; padding-bottom: 56px;
}
.footer__brand svg { height: 30px; width: auto; margin-bottom: 22px; }
.footer__blurb { font-size: var(--fs-small); color: var(--text-mute); max-width: 30ch; line-height: 1.6; }
.footer__h {
  font-size: var(--fs-small); font-weight: 700; color: var(--red);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px;
}
.footer__list li { margin-bottom: 13px; }
.footer__list a { font-size: var(--fs-small); color: rgba(255,255,255,.82); }
.footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__list--icons a { display: inline-flex; align-items: center; gap: 10px; }
.footer__list--icons svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--fs-small); color: var(--text-dim);
}
.footer-bottom a:hover { color: #fff; }

/* ==========================================================================
   23. RESPONSIVE
   ========================================================================== */

/* ---- Fluid step: small desktop / large tablet (not a requested breakpoint,
        included so nothing breaks between 768px and 1290px) ---------------- */
@media (max-width: 1180px) {
  :root {
    --fs-display: 54px;
    --fs-h1: 46px;
    --fs-h2: 40px;
    --fs-h3: 22px;
    --sec-y: 96px;
    --gutter: 32px;
    --gap: 22px;
  }
  .hero__grid { gap: 40px; }
  .split { gap: 44px; }
  .newsletter { padding: 48px 40px; }
  .newsletter__title { font-size: 32px; }
  .stat__num { font-size: 42px; }
  .stats-card { padding: 54px 32px; }
}

@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .mobile-nav { display: block; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .newsletter__mark { opacity: .5; right: -6%; }
}

/* ---------------------------------------------------- TABLET — max 767px -- */
@media (max-width: 767px) {
  :root {
    --fs-display: 44px;
    --fs-h1: 38px;
    --fs-h2: 34px;
    --fs-h3: 21px;
    --fs-h4: 19px;
    --fs-lead: 17px;
    --fs-body: 17px;
    --fs-small: 16px;   /* floor holds */
    --sec-y: 76px;
    --gutter: 28px;
    --gap: 20px;
    --r-lg: 20px;
  }

  .site-header__inner { height: 70px; }
  .mobile-nav { inset: 70px 0 0 0; }

  /* Heroes stack */
  .hero { padding-block: 64px 0px; }
  .hero--center { padding-block: 72px; }
  .hero__grid { grid-template-columns: 1fr; gap: 52px; }
  .hero__stack { max-width: 520px; margin-inline: auto; width: 100%; }
  .player-badge { left: auto; right: 8px; bottom: -22px; }

  /* Splits stack — media always first */
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--rev .split__media { order: 0; }
  .split__media > img { max-height: 420px; object-fit: cover; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 38px; }
  .section-head--center { align-items: center; }
  .section-head__cta { padding-bottom: 0; }

  /* 3-up and 4-up become 2-up */
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .chips { grid-template-columns: 1fr 1fr; max-width: none; }

  .stats-card { padding: 44px 24px; }
  .stats-grid { gap: 34px 20px; }
  .stat__num { font-size: 38px; }

  .newsletter { padding: 40px 30px; min-height: 0; flex-direction: column-reverse;}
  .newsletter__title { font-size: 30px; }
  .newsletter__inner { max-width: 100%; }
  .newsletter__mark { opacity: .28; height: 58%; right: -10%; }

  .card-light { padding: 24px; }
  .article__h2 { font-size: 26px; }
  .article__figure { margin-bottom: 32px; }

  .blog-tools { justify-content: space-between; }
  .search { max-width: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; padding-bottom: 42px; }
  .footer__brand { grid-column: 1 / -1; }
  .site-footer { padding-top: 56px; }
}

/* ---------------------------------------------------- MOBILE — max 599px -- */
@media (max-width: 599px) {
  :root {
    --fs-display: 34px;
    --fs-h1: 30px;
    --fs-h2: 27px;
    --fs-h3: 19px;
    --fs-h4: 18px;
    --fs-lead: 16px;
    --fs-body: 16px;
    --fs-small: 16px;   /* floor */
    --sec-y: 60px;
    --gutter: 20px;
    --gap: 18px;
    --r: 14px;
    --r-lg: 16px;
  }

  .hero { padding-block: 48px 0px; }
  .hero--center { padding-block: 56px; }
  .hero__grid { gap: 44px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  /* Everything goes single column */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; gap: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .chips { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 30px; }
  .stat__num { font-size: 36px; }

  /* Reels + guests scroll horizontally instead of stacking 4 tall cards */
  .reel-rail {
    display: grid;
    grid-template-columns: none;   /* cancel .grid--4's 1fr — it collapses item 1 to 0px */
    grid-auto-flow: column; grid-auto-columns: 62%;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter); padding-bottom: 8px;
    scrollbar-width: none;
  }
  .reel-rail::-webkit-scrollbar { display: none; }
  .reel-rail > * { scroll-snap-align: start; }
  .guest-rail { grid-auto-columns: 74%; }

  /* Long labels ("Watch more on our YouTube Channel") must wrap, not overflow */
  .btn { padding: 14px 22px; white-space: normal; text-align: center; line-height: 1.35; }
  .btn--lg { padding: 15px 24px; }
  .section-head { margin-bottom: 30px; }

  .media-card { padding: 12px; border-radius: var(--r); }
  /*.player-badge { position: static; margin-top: 16px; width: 100%; }*/
  .hero__stack { max-width: none; }

  .newsletter { padding: 32px 22px; }
  .newsletter__title { font-size: 26px; }
  .newsletter__form { flex-direction: column; max-width: none; }
  .newsletter__form .btn { justify-content: center; }
  .newsletter__mark { opacity: .18; height: 46%; right: -14%; }

  .stats-card { padding: 36px 20px; }
  .form-card { padding: 20px; }
  .info-card { padding: 4px 20px; }
  .card-light { padding: 22px; }
  .host-card__body { padding: 4px 18px 18px; }
  .host-card__name { font-size: 22px; }

  .blog-tools { flex-direction: row; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .article__body p { line-height: 1.7; }
}

/* ------------------------------------------------------------- 24. Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .social-card:hover { transform: none; }
}

/* --------------------------------------------------------- 25. Logo lockup */
/* Text-based stand-in for the "DM." wordmark — swap for the real SVG in WP. */
.logo {
  display: inline-flex; align-items: flex-end; gap: 1px; line-height: 1;
}
.logo__word {
  font-size: 27px; font-weight: 800; letter-spacing: -.07em;
  color: #fff; line-height: 1;
}
.logo__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); margin-bottom: 3px; flex: none;
}
.newsletter__mark {
  display: flex; align-items: flex-end; gap: 4px;
  font-size: 190px; font-weight: 800; letter-spacing: -.08em;
  color: rgba(255,255,255,.97); line-height: .78;
  height: auto;
}
.newsletter__mark i {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--red); margin-bottom: 12px; flex: none; display: block;
}
@media (max-width: 1180px) { .newsletter__mark { font-size: 150px; } .newsletter__mark i { width: 40px; height: 40px; } }
@media (max-width: 767px)  { .newsletter__mark { font-size: 118px; } .newsletter__mark i { width: 32px; height: 32px; margin-bottom: 8px; } }
@media (max-width: 599px)  { .newsletter__mark { font-size: 92px; }  .newsletter__mark i { width: 24px; height: 24px; margin-bottom: 6px; } }



/*Nomilogic css*/
.topic-card__stats svg{
  width: 20px;
}

.blog-img{
  border-radius: 20px;
  padding-bottom: 10px;
}

.newsletter__inner > .eyebrow{
  color: #FFFFFF;
  margin-bottom: 0px;
}

.host-card__foot > span{
  display: flex;
  flex-direction: row;
}

.host-card__foot > span > svg{
  width: 20px;
}

.section-no-padding-bottom{
  padding-bottom: 0px;
}

@media (max-width: 767px)  {
  .newsletter .logo{
    padding: 20px;
  }

  .section-no-padding-bottom{
    padding-bottom: var(--sec-y);
  }
}

/* =========================================================================
   WORDPRESS + CONTACT FORM 7
   Appended by the theme build. Nothing above this line was changed.
   ========================================================================= */

/* ---------------------------------------------------- CF7 layout ---------
   With wpcf7_autop_or_not disabled there are no stray <p>/<br>, so the
   two-column rows below behave exactly like the static build. */
.dm-form .dm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.dm-form .dm-row--1 { grid-template-columns: 1fr; }

/* CF7 wraps every control in a span — make it fill its grid cell. */
.dm-form .wpcf7-form-control-wrap { display: block; width: 100%; }

/* Inherit the approved .field styling for every CF7 control. */
.dm-form input[type="text"],
.dm-form input[type="email"],
.dm-form input[type="tel"],
.dm-form input[type="url"],
.dm-form input[type="date"],
.dm-form input[type="number"],
.dm-form select,
.dm-form textarea {
  width: 100%;
  padding: 16px 18px;
  background: #fff;
  color: var(--text-ink);
  border: 1px solid #E4E4E1;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-family: var(--ff);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dm-form input::placeholder,
.dm-form textarea::placeholder { color: #9A9A9A; }

.dm-form input:focus,
.dm-form select:focus,
.dm-form textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(226,0,19,.16);
}

.dm-form textarea { min-height: 132px; resize: vertical; }
.dm-form .dm-textarea-lg textarea { min-height: 190px; }

.dm-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 46px;
}

/* Submit button — reuses the approved .btn look. */
.dm-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  font-family: var(--ff);
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.dm-form input[type="submit"]:hover { background: #262626; transform: translateY(-2px); }
.dm-form .dm-submit--red input[type="submit"] { background: var(--red); }
.dm-form .dm-submit--red input[type="submit"]:hover { background: var(--red-hi); }

/* CF7 spinner sits inline without shifting the button. */
.dm-form .wpcf7-spinner { margin: 0 0 0 10px; vertical-align: middle; }

/* ------------------------------------------------ CF7 validation states --- */
.dm-form .wpcf7-not-valid { border-color: var(--red) !important; }

.dm-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--red);
}

.dm-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.28);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: #fff;
  background: rgba(255,255,255,.06);
}
.dm-form form.sent .wpcf7-response-output {
  border-color: rgba(30,215,95,.55);
  background: rgba(30,215,95,.12);
}
.dm-form form.invalid .wpcf7-response-output,
.dm-form form.failed .wpcf7-response-output,
.dm-form form.aborted .wpcf7-response-output {
  border-color: rgba(226,0,19,.6);
  background: rgba(226,0,19,.12);
}
/* On the light form card the response text needs dark type. */
.form-card.dm-form .wpcf7-response-output { color: var(--text-ink); background: rgba(10,10,10,.04); border-color: rgba(10,10,10,.18); }

/* ------------------------------------------------------- Contact layout --- */
.dm-contact-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }

.dm-map {
  margin-top: 44px;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 21 / 8;
  background: var(--surface);
}
.dm-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Admin-only reminder when a form shortcode hasn't been set. */
.dm-admin-note {
  padding: 14px 18px;
  margin: 0 0 8px;
  border: 1px dashed rgba(226,0,19,.75);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: #fff;
  background: rgba(226,0,19,.12);
}
.dm-admin-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
/* Same note on light sections and inside the white form card. */
.is-light .dm-admin-note,
.form-card .dm-admin-note { color: var(--text-ink); background: rgba(226,0,19,.07); }
.is-light .dm-admin-note a,
.form-card .dm-admin-note a { color: var(--red); }

/* --------------------------------------------------------- WP pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.pagination .page-numbers:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.pagination .page-numbers.current { background: var(--red); border-color: var(--red); font-weight: 600; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------- WP editor content ------ */
.article__body > * + * { margin-top: 20px; }
.article__body h2 { font-family: var(--fff); font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-top: 40px; }
.article__body h3 { font-size: var(--fs-h4); font-weight: 700; margin-top: 34px; }
.article__body ul,
.article__body ol { padding-left: 22px; color: var(--text-mute); font-size: var(--fs-small); line-height: 1.75; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li + li { margin-top: 8px; }
.article__body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.article__body img { border-radius: var(--r); }
.article__body blockquote {
  border-left: 3px solid var(--red);
  padding-left: 22px;
  font-size: var(--fs-body);
  color: var(--text);
}
.article__body figure { margin: 0; }
.article__body figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--text-dim); }

/* Empty state for the topic filter. */
.dm-empty {
  margin-top: 40px;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--text-mute);
}

/* Alignments from the block/classic editor. */
.aligncenter { margin-inline: auto; }
.alignright  { float: right; margin: 0 0 20px 24px; }
.alignleft   { float: left;  margin: 0 24px 20px 0; }
.wp-caption  { max-width: 100%; }

/* --------------------------------------------------------- Responsive ----- */
@media (max-width: 767px) {
  .dm-contact-grid { grid-template-columns: 1fr; }
  .dm-map { aspect-ratio: 4 / 3; margin-top: 32px; }
}

@media (max-width: 599px) {
  .dm-form .dm-row { grid-template-columns: 1fr; }
  .alignright, .alignleft { float: none; margin: 0; }
}

/* Responsive video embed on single episode. */
.dm-video { aspect-ratio: 16 / 9; background: #000; }
.dm-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------- Blog search + filters --- */
.search__submit {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}
.search__submit:hover { color: var(--red); }

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin: -22px 0 34px;
}
.blog-filters[hidden] { display: none; }
.blog-filters .filter { text-decoration: none; }
.blog-filters .filter.is-active { background: var(--red); border-color: var(--red); font-weight: 600; }

.blog-results {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  font-size: var(--fs-small);
  color: var(--text-mute);
}
.blog-results strong { color: #fff; font-weight: 600; }
.blog-results__clear {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-results__clear:hover { color: var(--red-hi); }

@media (max-width: 599px) {
  .blog-filters { justify-content: flex-start; margin-top: -10px; }
}

/* -------------------------------------------------- hidden attribute ------
   Author rules like `.ep-card { display: flex }` outrank the browser's
   `[hidden] { display: none }`, so anything toggled with the hidden attribute
   stays on screen. This puts that back. */
[hidden] { display: none !important; }

/* Topic pills are links (server-side filtering), so strip link styling and
   give the active one a clear state. */
.filters a.filter { text-decoration: none; }
.filters a.filter.is-active { background: var(--red); border-color: var(--red); font-weight: 600; }
.filters a.filter.is-active:hover { background: var(--red-hi); }