/* ==========================================================================
   Hartwell & Co. — dark redesign layer (2026-10)
   Loaded after brand.css on pages whose <body> has class "rd". Pages without
   that class are untouched, so a page opts in (or back out) by adding or
   removing the class and this <link>.

   Same confirmed brand tokens (--teal, --cream, --gold, --bronze). The
   darker teal shades below are derived from --teal for the dark look.
   ========================================================================== */

.rd {
  --rd-deep: #071F1C;      /* page background, darkest teal */
  --rd-surface: #0B2C28;   /* raised panels on the dark page */
  --rd-line: rgba(228, 205, 160, 0.16);
  --rd-text: #D7E6E1;      /* body text on dark */
  --rd-muted: #9FB5AE;     /* secondary text on dark */
  --radius-lg: 14px;

  background: var(--rd-deep);
  color: var(--rd-text);
}

.rd h1, .rd h2, .rd h3 { color: var(--cream); }
.rd .eyebrow { color: var(--gold); }
/* Eyebrow carried inside the page's h1 (search engines read it as part of the main heading). */
.h1-kicker { display: block; margin: 0 0 0.75rem; font-family: var(--font-body); line-height: 1.4; text-wrap: balance; }

/* Pill buttons on dark */
.rd .btn { border-radius: 999px; padding: 0.8rem 1.6rem; }
.rd .btn-gold:hover { background: var(--cream); border-color: var(--cream); }
.rd .btn-outline { color: var(--cream); border-color: rgba(228, 205, 160, 0.5); }
.rd .btn-outline:hover { background: var(--cream); color: var(--teal); border-color: var(--cream); }

/* --------------------------------------------------------------------------
   Header: dark bar, logo mark + wordmark set in type (the PNG lockup has a
   white background and can't sit on dark)
   -------------------------------------------------------------------------- */

.rd header.site-header {
  background: rgba(7, 31, 28, 0.92);
  border-bottom: 1px solid var(--rd-line);
}

.rd .site-nav { padding: 0.9rem 1.5rem; } /* brand.css zeroes .wrap's side padding here; the PNG had its own margin */
.rd .site-brand { gap: 0.8rem; color: var(--cream); }
.rd .brand-mark { width: 46px; height: 46px; flex: 0 0 auto; }
.rd .brand-words { display: flex; flex-direction: column; min-width: 0; }
.rd .brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.32em;
  color: var(--cream);
  white-space: nowrap;
}
.rd .brand-tagline {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  border-top: 1px solid var(--gold);
  padding-top: 0.25rem;
  margin-top: 0.25rem;
  white-space: nowrap;
}

.rd nav.site-links a:not(.btn) { color: var(--rd-text); }
.rd nav.site-links a:not(.btn):hover,
.rd nav.site-links a[aria-current="page"] { color: var(--gold); }
.rd nav.site-links a.btn,
.rd .nav-cta-mobile { background: var(--gold); border-color: var(--gold); color: var(--teal); }
.rd nav.site-links a.btn:hover,
.rd .nav-cta-mobile:hover { background: var(--cream); border-color: var(--cream); }
.rd .nav-toggle svg { stroke: var(--cream); }

@media (max-width: 760px) {
  .rd .site-nav { padding: 0.75rem 1rem; }
  .rd .site-brand { gap: 0.5rem; }
  .rd .brand-mark { width: 34px; height: 34px; }
  .rd .brand-name { font-size: 0.72rem; letter-spacing: 0.1em; }
  .rd .nav-cta-mobile { padding: 0.5rem 0.95rem; }
  .rd .brand-tagline { display: none; }
  .rd nav.site-links.is-open { background: var(--rd-surface); border-bottom-color: var(--rd-line); }
}

/* Announcement strip under the header */
.rd-strip {
  text-align: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rd-line);
}
.rd-strip a {
  display: inline-block;
  background: var(--gold);
  color: var(--teal);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
}
.rd-strip a:hover { background: var(--cream); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.rd .hero { background: transparent; padding: 3.5rem 0 3.5rem; }
.rd .hero-grid { grid-template-columns: 1.1fr minmax(300px, 0.9fr); gap: 3.5rem; }
.rd .hero-text { order: -1; }
.rd .hero h1 {
  font-size: clamp(2.2rem, 4.3vw, 3.4rem);
  line-height: 1.07;
  max-width: 20ch;
  text-wrap: balance;
  margin-bottom: 1.25rem;
}
.rd .hero h1 em { font-style: normal; color: var(--gold); }
.rd .hero .lead { color: var(--rd-text); font-size: 1.15rem; margin: 0 0 1.5rem; }

.rd .hero-services { margin: 1.75rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rd .hero-services li {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  border: 1px solid var(--rd-line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}

.rd .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.rd .hero-stage { border-radius: var(--radius-lg); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
/* Phone: show Mary's photo right after the headline, then the pitch and buttons. */
@media (max-width: 760px) {
  .rd .hero { padding: 2.25rem 0 2.75rem; }
  .rd .hero-grid { gap: 0; }
  .rd .hero-text { display: contents; }
  .rd .hero-text > .eyebrow { order: 1; }
  .rd .hero h1 { order: 2; margin-bottom: 1.25rem; }
  .rd .hero-carousel { order: 3; margin-bottom: 1.5rem; }
  .rd .hero .lead { order: 4; }
  .rd .hero-actions { order: 5; }
  .rd .hero-services { order: 6; margin-top: 1.5rem; }
}

@media (max-width: 760px) {
  .rd .hero { padding: 2.5rem 0 3rem; }
  .rd .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* --------------------------------------------------------------------------
   Sections on dark
   -------------------------------------------------------------------------- */

.rd .section { padding: 5rem 0; }
.rd .section + .section { border-top: 1px solid var(--rd-line); }
.rd .section-head { text-align: left; margin: 0 0 2.5rem; max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; }
.rd .section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin: 0; }
.rd .section-head p { color: var(--rd-muted); max-width: 46ch; }

/* Problem tiles: icon cards, one icon per problem */
.rd-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.rd-tile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--rd-line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--cream);
  background: linear-gradient(160deg, rgba(14, 75, 69, 0.55), rgba(7, 31, 28, 0.6));
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.rd-tile:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35); }
.rd-tile-icon {
  width: 3.3rem;
  height: 3.3rem;
  padding: 0.7rem;
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--gold);
  background: rgba(184, 147, 90, 0.12);
  border: 1px solid rgba(184, 147, 90, 0.4);
}
.rd-tile-body { display: flex; flex-direction: column; flex: 1; }
.rd-tile-title { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; }
.rd-tile-link { display: block; margin-top: auto; padding-top: 0.9rem; font-size: 0.82rem; font-weight: 700; color: var(--gold); }
.rd-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 960px) { .rd-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rd-tiles { grid-template-columns: 1fr; } .rd-tile { flex-direction: row; align-items: flex-start; padding: 1.2rem; } .rd-tile-icon { flex: 0 0 auto; } }
@media (prefers-reduced-motion: reduce) { .rd-tile, .rd-tile:hover { transition: none; transform: none; } }

/* Three-question check */
.rd .diagnostic { background: var(--teal); }
.rd .diagnostic .section-head { margin: 0 0 2.5rem; max-width: none; }
.rd-questions {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  counter-reset: q;
}
.rd-questions li {
  counter-increment: q;
  background: rgba(7, 31, 28, 0.35);
  border: 1px solid var(--rd-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--cream);
}
.rd-questions li::before {
  content: "0" counter(q);
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.rd .diagnostic-close { color: var(--rd-text); font-size: 1.1rem; margin: 0 0 1.5rem; }
@media (max-width: 760px) { .rd-questions { grid-template-columns: 1fr; } }

/* Experience row: bordered cards, like a recognition strip */
.rd-experience {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}
.rd-experience li {
  list-style: none;
  border: 1px solid var(--rd-line);
  border-radius: var(--radius-lg);
  background: var(--rd-surface);
  padding: 1.5rem 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd ul.rd-experience { margin: 0; padding: 0; }
@media (max-width: 960px) { .rd-experience { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .rd-experience { grid-template-columns: repeat(2, 1fr); } }

/* Media rows: image one side, story the other, alternating */
.rd-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.rd-feature + .rd-feature { margin-top: 4rem; }
.rd-feature:nth-child(even) .rd-feature-media { order: 2; }
.rd-feature-media {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--rd-surface);
}
.rd-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
a.rd-feature-media:hover img { transform: scale(1.03); }
.rd-feature h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.75rem; }
.rd-feature p { color: var(--rd-text); margin: 0 0 1.25rem; }
.rd-more { color: var(--gold); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.rd-more:hover { text-decoration: underline; }
.rd-talks { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.rd-talks li { padding: 0.6rem 0; border-bottom: 1px solid var(--rd-line); color: var(--cream); font-family: var(--font-display); }
@media (max-width: 760px) {
  .rd-feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .rd-feature:nth-child(even) .rd-feature-media { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .rd-feature-media img { transition: none; } }

/* Closing band + footer */
.rd .cta-band {
  background: linear-gradient(135deg, var(--teal), var(--rd-surface));
  border-top: 1px solid var(--rd-line);
  padding: 5rem 0;
}
.rd .cta-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.rd .cta-band p { color: var(--rd-text); }

.rd footer.site-footer { background: var(--rd-deep); margin-top: 0; border-top: 1px solid var(--rd-line); }

/* Consent banner keeps its light card; put its buttons back to the light-background colors */
.rd .consent-banner .btn-outline { color: var(--teal); border-color: var(--teal); }
.rd .consent-banner .btn-outline:hover { background: var(--teal); color: var(--cream); }

/* Tablet / small laptop: the typeset lockup is wider than the old PNG, so the
   full nav no longer fits below ~1080px. Use the phone menu there too, and
   stack the hero sooner so the photo controls have room. */
.rd nav.site-links a.btn { white-space: nowrap; }
@media (max-width: 1080px) {
  .rd nav.site-links { display: none; }
  .rd nav.site-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--rd-surface);
    border-bottom: 1px solid var(--rd-line);
    padding: 1rem 1.5rem 1.5rem;
    gap: 1rem;
    z-index: 30;
  }
  .rd .nav-toggle { display: block; }
  .rd .nav-cta-mobile { display: inline-block; white-space: nowrap; }
}
@media (max-width: 900px) {
  .rd .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .rd .hero-carousel { max-width: 560px; }
}

/* --------------------------------------------------------------------------
   Sitewide dark mode for the inner pages.
   Their page styles are written with the light neutrals (--panel, --bg,
   --border, --ink, --ink-soft), so re-pointing those inside .rd carries
   cards, forms and alt sections across. --bronze text is too dark on the
   dark page, so .rd uses gold there. --teal stays as-is: it is used for
   backgrounds, so the places that use it as TEXT are overridden below.
   -------------------------------------------------------------------------- */

.rd {
  --bg: var(--rd-deep);
  --panel: var(--rd-surface);
  --border: rgba(228, 205, 160, 0.22);
  --ink: var(--rd-text);
  --ink-soft: var(--rd-muted);
  --bronze: var(--gold);
}

/* The consent banner stays a light card, so it keeps the light neutrals */
.rd .consent-banner {
  --panel: #FFFFFF;
  --border: #E3D9C3;
  --ink: #142621;
  --ink-soft: #4B5D57;
}

/* Teal used as text → cream on dark */
.rd .pull-quote,
.rd .motif-quote-card,
.rd .motif-stat .motif-stat-figure,
.rd .experience-strip .experience-list,
.rd .brand-statement,
.rd .about-hero p.opening,
.rd .positioning-line p,
.rd .intent-banner,
.rd .intent-banner strong,
.rd .topic-card .topic-takeaway strong { color: var(--cream); }

.rd .privacy a,
.rd .privacy .footer-link,
.rd .form-note a { color: var(--gold); }
.rd .motif-icon { stroke: var(--gold); }

/* Buttons: teal-on-dark has no contrast, so primary becomes gold */
.rd .btn-primary { background: var(--gold); color: var(--teal); border-color: var(--gold); }
.rd .btn-primary:hover { background: var(--cream); border-color: var(--cream); }
.rd .cta-band .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--teal); }
.rd .cta-band .btn-primary:hover { background: var(--cream); border-color: var(--cream); }
.rd .consent-banner .btn-primary { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.rd .consent-banner .btn-primary:hover { background: #0B3A35; }

/* Cards on dark: rounder corners to match the home page */
.rd .engagement-card,
.rd .framework-card,
.rd .scanner-callout,
.rd .topic-card,
.rd .motif-stat,
.rd .motif-quote-card,
.rd .about-hero .portrait img { border-radius: var(--radius-lg); }
.rd .topic-card .topic-thumb { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.rd .engagement-card:hover,
.rd .topic-card:hover { border-color: var(--gold); }

/* Numbered steps and method dots */
.rd .step-flow .step .step-number { background: var(--gold); color: var(--teal); }
.rd .method-flow .method-stage::before { background: var(--gold); }

/* Inner-page bands that were teal: lift them off the dark page */
.rd .manifesto { background: var(--teal); }
.rd .section-alt { background: var(--rd-surface); }

/* Forms (Let's Talk) */
.rd .talk-form input[type="text"],
.rd .talk-form input[type="email"],
.rd .talk-form textarea { background: var(--rd-deep); }
.rd .talk-form input:focus,
.rd .talk-form textarea:focus { border-color: var(--gold); }
.rd .talk-form ::placeholder { color: var(--rd-muted); opacity: 0.8; }

/* Teal lettering on gold is 3.5:1; the deepest teal reads at AA (4.5:1+) */
.rd .btn-gold,
.rd .btn-primary,
.rd .cta-band .btn-primary,
.rd nav.site-links a.btn,
.rd .nav-cta-mobile,
.rd .rd-strip a,
.rd .step-flow .step .step-number { color: var(--rd-deep); }
.rd .consent-banner .btn-primary { color: var(--cream); }
.rd .manifesto .eyebrow { color: var(--cream); }

/* Insights card graphics come in every shape (wide banners to tall phone
   video stills); give them all the same 4:3 frame so a row of cards lines
   up, and show the whole graphic rather than cropping its text. */
.rd .topic-card .topic-thumb { background: var(--rd-deep); aspect-ratio: 4 / 3; }
.rd .topic-card .topic-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Home "Latest Insight" graphic: infographics come in any shape, so show the
   whole thing instead of cropping it to the frame. */
.rd .rd-feature-graphic { background: var(--rd-deep); }
.rd .rd-feature-graphic img { object-fit: contain; }

/* --------------------------------------------------------------------------
   Personality touches (2026-10): Mary's opinions up front, her own one-liners
   in the small print, and "Hartwell'd".
   -------------------------------------------------------------------------- */

/* Home: three opinions under the hero */
.rd-beliefs { padding: 3.5rem 0 4rem; border-top: 1px solid var(--rd-line); }
.rd-beliefs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin: 1.25rem 0 1.75rem;
}
.rd-beliefs-grid p {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  color: var(--cream);
}
@media (max-width: 860px) { .rd-beliefs-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* About: photo caption */
.rd .about-hero .portrait figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--rd-muted);
}

/* About: Hartwell'd dictionary card */
.rd-define-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.25rem 2.5rem;
  border: 1px solid var(--rd-line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  background: var(--rd-surface);
}
.rd-define-word { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--cream); }
.rd-define-word span { font-family: var(--font-body); font-style: italic; font-size: 1rem; color: var(--gold); margin-left: 0.4rem; }
.rd-define-meaning { margin: 0.75rem 0 1.25rem; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; color: var(--rd-text); }
.rd-define-note { margin: 0; color: var(--rd-muted); }
.rd-define-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 0.9rem; }
.ab-ua-link { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Let's Talk: Mary's aside under the intro */
.rd .talk-aside {
  margin: 1rem auto 0;
  max-width: 52ch;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Advisory page (2026-10): photo opener, problem-first engagement cards,
   photo timeline, "Why bring me in" band.
   -------------------------------------------------------------------------- */

.adv-hero { padding-top: 4rem; }
.adv-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; }
.rd .adv-hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.02; margin-bottom: 1.25rem; }
.adv-lead { font-size: 1.15rem; color: var(--rd-text); max-width: 54ch; margin: 0 0 1.75rem; }
.adv-quote {
  margin: 0 0 2rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  line-height: 1.3;
  color: var(--cream);
}
.adv-hero-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.adv-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .adv-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Engagement cards */
.rd .adv-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 1000px) { .rd .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rd .adv-grid { grid-template-columns: 1fr; } }
.rd .adv-card { display: flex; flex-direction: column; padding: 1.75rem; scroll-margin-top: 110px; transition: border-color 0.2s ease, transform 0.2s ease; }
.rd .adv-card:hover { transform: translateY(-3px); }
.rd .adv-card:target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.adv-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.adv-icon { width: 40px; height: 40px; color: var(--gold); }
.adv-num { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: rgba(228, 205, 160, 0.3); }
.adv-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; }
.rd .adv-card .adv-problem { margin: 0 0 0.35rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.35; color: var(--rd-text); }
.rd .adv-card h3 { margin: 1rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--rd-line); font-size: 1.35rem; }
.adv-gets { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.35rem; }
.adv-gets li { position: relative; padding-left: 1.5rem; font-size: 0.93rem; color: var(--rd-text); }
.adv-gets li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.rd .adv-card .btn { margin-top: auto; align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .rd .adv-card, .rd .adv-card:hover { transition: none; transform: none; } }
/* Jump row: one chip per engagement */
.adv-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.75rem 0 2rem; }
.adv-jump a { font-size: 0.82rem; font-weight: 600; color: var(--cream); text-decoration: none; border: 1px solid var(--rd-line); border-radius: 999px; padding: 0.4rem 0.9rem; transition: border-color 0.2s ease, color 0.2s ease; }
.adv-jump a:hover, .adv-jump a:focus-visible { border-color: var(--gold); color: var(--gold); }
/* Phone: two items per line in "What you get" keeps each card to about half a screen */
@media (max-width: 640px) {
  .rd .adv-card { padding: 1.35rem; }
  .adv-card-top { margin-bottom: 0.9rem; }
  .rd .adv-card h3 { margin: 0.8rem 0 0.8rem; padding-top: 0.8rem; }
  .adv-gets { grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; margin-bottom: 1.25rem; }
  .adv-gets li { font-size: 0.88rem; padding-left: 1.2rem; }
  .adv-jump { flex-wrap: nowrap; overflow-x: auto; margin: -0.5rem -1.5rem 1.5rem; padding: 0 1.5rem 0.4rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .adv-jump::-webkit-scrollbar { display: none; }
  .adv-jump a { flex: 0 0 auto; font-size: 0.78rem; padding: 0.35rem 0.75rem; }
}

/* Assess -> Build -> Advise photo timeline */
.adv-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; }
.adv-timeline::before {
  content: "";
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 11.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(184, 147, 90, 0.35));
}
.adv-timeline li { position: relative; text-align: center; }
.adv-timeline img { width: 100%; height: 11.5rem; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.rd .adv-timeline .step-number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: -24px auto 0.9rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--rd-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  border: 4px solid var(--rd-surface);
}
.adv-timeline h3 { margin-bottom: 0.4rem; }
.adv-timeline p { margin: 0 auto 0.6rem; max-width: 32ch; color: var(--rd-text); font-size: 0.95rem; }
.adv-timeline .adv-walk { font-family: var(--font-display); font-style: italic; color: var(--cream); }
@media (max-width: 760px) {
  .adv-timeline { grid-template-columns: 1fr; gap: 2.5rem; }
  .adv-timeline::before { display: none; }
}

/* Why bring me in */
.adv-why-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.adv-why-quote { margin: 0.25rem 0 1rem; font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.1; color: var(--cream); }
.adv-why-sub { margin: 0; color: var(--rd-text); max-width: 46ch; }
.adv-logos { list-style: none; margin: 0.5rem 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.adv-logos li {
  padding: 1.1rem 1rem;
  border: 1px solid var(--rd-line);
  border-radius: var(--radius-lg);
  background: var(--rd-surface);
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-align: center;
  color: var(--cream);
}
@media (max-width: 760px) { .adv-why-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* --------------------------------------------------------------------------
   Governance page (2026-10): method staircase, quote + graphic, count-up
   stats, Who's Minding series, Scanner band.
   -------------------------------------------------------------------------- */

.rd .method-intro { margin-bottom: 1.5rem; max-width: 980px; }
.rd .method-intro p { font-size: 1.02rem; margin-bottom: 0; }
.rd .method-intro h1 { margin-bottom: 0.75rem; }
.rd main > section:first-child:has(.gm-stairs) { padding-top: 2.75rem; }

/* Staircase: six steps rising left to right; a plain vertical list on phones */
.gm-stairs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  align-items: stretch;
}
.gm-step {
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1rem 1.2rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--rd-line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  background: var(--rd-surface);
}
/* Tops rise by the same amount at every step; all six share one bottom line,
   so a wordy stage can't sit lower than the one before it. */
.gm-step:nth-child(1) { margin-top: 7.5rem; }
.gm-step:nth-child(2) { margin-top: 6rem; }
.gm-step:nth-child(3) { margin-top: 4.5rem; }
.gm-step:nth-child(4) { margin-top: 3rem; }
.gm-step:nth-child(5) { margin-top: 1.5rem; }
.gm-step:nth-child(6) { margin-top: 0; background: var(--teal); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.gm-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.gm-icon { width: 30px; height: 30px; color: var(--gold); }
.gm-num { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: rgba(228, 205, 160, 0.3); }
.rd .gm-step h3 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.gm-line { margin: 0 0 0.9rem; font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.4; color: var(--rd-text); }
.gm-line.gm-desc { font-family: var(--font-body); font-style: normal; font-size: 0.92rem; line-height: 1.5; }
.gm-ask { margin: auto 0 0; padding-top: 0.75rem; border-top: 1px solid var(--rd-line); font-size: 0.9rem; line-height: 1.4; color: var(--cream); }
.gm-ask span { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.25rem; }
@media (max-width: 1080px) {
  .gm-stairs { grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
  .gm-step:nth-child(n) { margin-top: 0; }
}
@media (max-width: 640px) {
  .gm-stairs { grid-template-columns: 1fr; }
}
/* Self-check */
.gm-check { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; font-size: 0.82rem; font-weight: 600; color: var(--gold); cursor: pointer; }
.gm-check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--gold); cursor: pointer; }
.gm-step.is-yes { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(184, 147, 90, 0.6); }
.gm-step:nth-child(6) .gm-check { color: var(--cream); }
.gm-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.75rem; padding: 1.25rem 1.5rem; border: 1px dashed var(--rd-line); border-radius: var(--radius-lg); }
.gm-result.is-active { border-style: solid; border-color: var(--gold); background: rgba(14, 75, 69, 0.45); }
.gm-result-text { margin: 0; max-width: 62ch; color: var(--rd-text); }
.gm-result-text strong { color: var(--cream); }
.gm-result .btn[hidden] { display: none; }

/* Core quote beside the graphic */
.gm-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.rd .gm-quote-grid .pull-quote { text-align: left; margin: 0 0 1rem; max-width: 20ch; color: var(--cream); }
.gm-quote-sub { margin: 0; color: var(--rd-text); max-width: 42ch; }
.gm-quote-graphic { display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rd-line); }
.gm-quote-graphic img { width: 100%; height: auto; transition: transform 0.4s ease; }
.gm-quote-graphic:hover img { transform: scale(1.02); }
@media (max-width: 860px) { .gm-quote-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Stats: bigger figures + takeaway */
.rd .stat-grid .motif-stat { padding: 2rem; }
.rd .stat-grid .motif-stat-figure { font-size: clamp(3.5rem, 8vw, 5.5rem); color: var(--gold); font-variant-numeric: tabular-nums; }
.gm-takeaway { margin: 0.6rem 0 0.4rem; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35; color: var(--cream); }

/* Who's Minding the...? series */
.gm-series { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.gm-series-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--rd-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--rd-surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.gm-series-tile:hover { border-color: var(--gold); transform: translateY(-3px); }
.gm-series-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--rd-deep); }
.gm-series-title { padding: 1.1rem 1.25rem 0.3rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--cream); }
.gm-series-sub { padding: 0 1.25rem 1.3rem; font-size: 0.9rem; color: var(--rd-muted); }
@media (max-width: 860px) { .gm-series { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gm-series-tile, .gm-series-tile:hover, .gm-quote-graphic img { transition: none; transform: none; } }

/* Scanner band */
.rd .gm-scanner { padding: 2.5rem; border-color: var(--gold); background: linear-gradient(135deg, var(--teal), var(--rd-surface)); align-items: center; }
.rd .gm-scanner h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.rd .gm-scanner .scanner-copy p { color: var(--rd-text); margin-bottom: 1.25rem; }
.gm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gm-chips li { font-size: 0.8rem; font-weight: 600; color: var(--cream); border: 1px solid rgba(228, 205, 160, 0.4); border-radius: 999px; padding: 0.35rem 0.85rem; }
.gm-scanner-cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; min-width: 220px; }
.gm-scanner-big { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--gold); }
.gm-scanner-big-label { font-size: 0.85rem; color: var(--rd-text); margin-bottom: 1rem; }
@media (max-width: 760px) { .gm-scanner-cta { width: 100%; } }
.gm-step:nth-child(6) .gm-ask span { color: var(--cream); }

/* --------------------------------------------------------------------------
   Insights page (2026-10): headline + Follow, featured latest post, topic
   filters, series badge, longer excerpts, pull quote.
   -------------------------------------------------------------------------- */

.ins-head { padding-bottom: 1.5rem; }
.rd .ins-head h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; max-width: 18ch; margin: 0.25rem 0 1.25rem; }
.ins-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.ins-head-row p { margin: 0; color: var(--rd-text); font-size: 1.1rem; }
.rd .section.ins-list { border-top: 0; padding-top: 1rem; }

/* Featured latest post */
.rd .ins-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; padding: 0; overflow: hidden; margin-bottom: 3rem; border-color: var(--gold); }
.rd .ins-featured .topic-thumb { margin: 0; border-radius: 0; border-bottom: 0; aspect-ratio: auto; height: 100%; min-height: 320px; }
.ins-featured-body { padding: 2.25rem; display: flex; flex-direction: column; }
.rd .ins-featured h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; }
.rd .ins-featured .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 860px) {
  .rd .ins-featured { grid-template-columns: 1fr; }
  .rd .ins-featured .topic-thumb { min-height: 0; aspect-ratio: 16 / 9; }
  .ins-featured-body { padding: 1.5rem; }
}

/* Excerpts and series badge on every card */
.rd .topic-card .ins-excerpt { margin: 0 0 1.25rem; font-size: 0.93rem; line-height: 1.55; color: var(--rd-text); flex-grow: 1; }
.rd .topic-card .topic-subtitle { color: var(--cream); font-size: 1rem; }
.ins-series {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--rd-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Topic filters */
.ins-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; }
.ins-filters[hidden] { display: none; }
.ins-filters button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(228, 205, 160, 0.4);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.ins-filters button:hover { border-color: var(--gold); color: var(--gold); }
.ins-filters button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--rd-deep); }
.ins-filters button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rd .topic-card[hidden], .ins-quote[hidden], .ins-empty[hidden] { display: none; }
.rd .ins-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .rd .ins-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rd .ins-grid { grid-template-columns: 1fr; } }
.ins-empty { color: var(--rd-muted); text-align: center; padding: 2rem 0; }

/* Pull quote between rows */
.ins-quote { margin: 3.5rem auto; max-width: 30ch; text-align: center; }
.ins-quote p { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.25; color: var(--cream); }
.ins-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

/* --------------------------------------------------------------------------
   Speaking page (2026-10): stage-photo opener, signature keynotes with
   graphics, more-talks list, photo strip, organizer band.
   -------------------------------------------------------------------------- */

.sp-hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; }
.sp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; }
.sp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 31, 28, 0.94) 0%, rgba(7, 31, 28, 0.78) 45%, rgba(7, 31, 28, 0.15) 100%),
              linear-gradient(0deg, rgba(7, 31, 28, 0.9) 0%, rgba(7, 31, 28, 0) 45%);
}
.sp-hero-text { position: relative; z-index: 1; padding-top: 6rem; padding-bottom: 4rem; }
.rd .sp-hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.08; max-width: 18ch; margin: 0.25rem 0 1.75rem; }
@media (max-width: 760px) {
  .sp-hero { min-height: 520px; }
  .sp-hero::after { background: linear-gradient(0deg, rgba(7, 31, 28, 0.96) 25%, rgba(7, 31, 28, 0.55) 70%, rgba(7, 31, 28, 0.25) 100%); }
}

/* Signature keynotes */
.sp-keynotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.sp-keynote { display: flex; flex-direction: column; border: 1px solid var(--rd-line); border-radius: var(--radius-lg); background: var(--rd-surface); overflow: hidden; transition: border-color 0.2s ease; }
.sp-keynote:hover { border-color: var(--gold); }
.sp-keynote-media { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rd-deep); }
.sp-keynote-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sp-keynote-body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem; }
.rd .sp-keynote h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0 0 0.5rem; }
.sp-sub { margin: 0 0 1.5rem; font-family: var(--font-display); font-style: italic; color: var(--rd-text); }
.sp-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
@media (max-width: 860px) { .sp-keynotes { grid-template-columns: 1fr; } }

/* More talks */
.rd .sp-more-head { margin-top: 4rem; }
.sp-more { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rd-line); }
.sp-more li { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rd-line); }
.rd .sp-more h3 { margin: 0 0 0.25rem; font-size: 1.3rem; }
.sp-more p { margin: 0; color: var(--rd-muted); font-style: italic; }
.sp-more-link { flex: none; white-space: nowrap; }
@media (max-width: 640px) { .sp-more li { flex-direction: column; align-items: flex-start; gap: 0.6rem; } }

/* On stage photo strip */
.sp-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sp-strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 760px) { .sp-strip { grid-template-columns: 1fr; } }

/* Organizer band */
.sp-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.rd .sp-plan h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: 0.25rem; }
.sp-plan-list { font-size: 1.05rem; }
@media (max-width: 760px) { .sp-plan { grid-template-columns: 1fr; gap: 1.5rem; } }
.rd .sp-close { background: linear-gradient(180deg, var(--rd-surface), var(--teal)); }
.sp-close-sub { margin: 0.5rem 0 0; color: var(--rd-text); max-width: 42ch; }
.sp-kit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; margin-top: 3rem; padding: 1.75rem; border: 1px solid var(--rd-line); border-radius: var(--radius-lg); background: rgba(7, 31, 28, 0.45); }
.rd .sp-kit h3 { font-size: 1.4rem; margin: 0 0 0.75rem; }
.sp-kit-intro { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--cream); }
.sp-kit-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sp-shot { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; font-size: 0.85rem; font-weight: 700; color: var(--gold); }
.sp-shot img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--rd-line); transition: border-color 0.2s ease; }
.sp-shot:hover img, .sp-shot:focus-visible img { border-color: var(--gold); }
@media (max-width: 760px) { .sp-kit { grid-template-columns: 1fr; padding: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .sp-keynote { transition: none; } }

/* Speaking: featured podcast (click-to-play) */
.sp-feature-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
.sp-video, .sp-video-frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.sp-video img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sp-video:hover img { transform: scale(1.03); }
.sp-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.sp-play::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 26px;
  border-left: 24px solid var(--rd-deep);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
.sp-video:hover .sp-play, .sp-video:focus-visible .sp-play { transform: scale(1.08); background: var(--cream); }
.sp-video:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.rd .sp-feature h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 0.25rem 0 0.75rem; }
.sp-feature-meta { color: var(--gold); font-size: 0.85rem; font-weight: 600; margin: 0 0 1rem; }
.sp-feature p:not(.sp-feature-meta) { color: var(--rd-text); }
@media (max-width: 860px) { .sp-feature-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (prefers-reduced-motion: reduce) { .sp-video img, .sp-play { transition: none; } }
.sp-video.sp-video--plain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(7, 31, 28, 0.75) 0%, rgba(7, 31, 28, 0) 45%);
}
.sp-video-label {
  position: absolute;
  left: 1.25rem;
  bottom: 1.1rem;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}
.sp-play { z-index: 2; }
/* the thumbnail carries its own title; the play button sits under it, off Mary */
.sp-video { container-type: inline-size; }
.sp-video .sp-play { left: 14%; top: 87%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; }
.sp-video .sp-play::after { left: 3.6cqw; top: 2.6cqw; border-left-width: 2.6cqw; border-top-width: 1.9cqw; border-bottom-width: 1.9cqw; }

/* --------------------------------------------------------------------------
   Home (2026-10, round 2): proof strip, method teaser, podcast row,
   signature talks row.
   -------------------------------------------------------------------------- */

/* Proof strip under the hero */
.hm-proof { padding: 2.25rem 0 2.5rem; border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-line); background: rgba(14, 75, 69, 0.35); text-align: center; }
.hm-proof-lead { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.hm-proof-names { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2.75rem; }
.hm-proof-names li { font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.9rem); color: var(--cream); }
.hm-proof-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.hm-proof-tags li { font-size: 0.78rem; font-weight: 600; color: var(--rd-text); border: 1px solid var(--rd-line); border-radius: 999px; padding: 0.3rem 0.8rem; }
.rd .hm-proof + .rd-beliefs { border-top: 0; }

/* Method teaser */
.hm-method-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2.5rem;
  align-items: end;
  padding: 2.5rem;
  border: 1px solid var(--rd-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--teal), var(--rd-surface));
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.hm-method-card:hover { border-color: var(--gold); }
.hm-method-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.rd .hm-method-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0.25rem 0 1rem; }
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; align-items: end; }
.hm-steps li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem 0.6rem;
  border-top: 3px solid var(--gold);
  border-radius: 8px;
  background: rgba(7, 31, 28, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cream);
}
.hm-steps li span { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); margin-bottom: 0.3rem; }
.hm-steps li:nth-child(1) { min-height: 5rem; }
.hm-steps li:nth-child(2) { min-height: 6.5rem; }
.hm-steps li:nth-child(3) { min-height: 8rem; }
.hm-steps li:nth-child(4) { min-height: 9.5rem; }
.hm-steps li:nth-child(5) { min-height: 11rem; }
.hm-steps li:nth-child(6) { min-height: 12.5rem; background: var(--gold); color: var(--rd-deep); }
.hm-steps li:nth-child(6) span { color: var(--rd-deep); }
@media (max-width: 900px) {
  .hm-method-card { grid-template-columns: 1fr; padding: 1.75rem; }
  .hm-steps { grid-template-columns: repeat(3, 1fr); }
  .hm-steps li:nth-child(n) { min-height: 0; }
}

/* Podcast row inside "Latest thinking" */
.rd .rd-feature .sp-video { box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4); }

/* Signature talks row */
.hm-talks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.hm-talk { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--rd-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--rd-surface); transition: border-color 0.2s ease, transform 0.2s ease; }
.hm-talk:hover { border-color: var(--gold); transform: translateY(-3px); }
.hm-talk-media { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--rd-deep); }
.hm-talk-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hm-talk-title { padding: 1rem 1.1rem 1.2rem; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; color: var(--cream); }
.hm-talks-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
@media (max-width: 1000px) { .hm-talks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hm-talks { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hm-talk, .hm-talk:hover { transition: none; transform: none; } }

/* --------------------------------------------------------------------------
   About (2026-10, round 2): name-led opener, career path, What I bring,
   numbered/revealing manifesto, Find me elsewhere, candid photos.
   -------------------------------------------------------------------------- */

.rd .about-hero.with-photo { max-width: 1060px; grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 720px) { .rd .about-hero.with-photo { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; } }
.rd .ab-name { font-size: clamp(2.8rem, 6.5vw, 4.6rem); line-height: 1; margin: 0.35rem 0 0.6rem; }
.ab-title { margin: 0 0 1.5rem; color: var(--gold); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; }
.rd .about-hero p.opening { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 1.25rem; }
.ab-positioning { position: relative; margin: 0; padding-top: 1.1rem; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--gold); }
.ab-positioning::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--gold); }
@media (max-width: 720px) { .ab-positioning::before { left: 50%; margin-left: -28px; } }

/* Career path */
.ab-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.ab-path::before { content: ""; position: absolute; left: 10%; right: 10%; top: 11px; height: 2px; background: linear-gradient(90deg, rgba(184, 147, 90, 0.35), var(--gold)); }
.ab-path li { position: relative; text-align: center; padding-top: 2.25rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--cream); }
.ab-dot { position: absolute; left: 50%; top: 0; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--rd-deep); border: 3px solid var(--gold); }
.ab-path-now { color: var(--gold) !important; }
.ab-path-now .ab-dot { background: var(--gold); box-shadow: 0 0 0 6px rgba(184, 147, 90, 0.25); }
@media (max-width: 760px) {
  .ab-path { grid-template-columns: 1fr; gap: 1.25rem; }
  .ab-path::before { left: 11px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(184, 147, 90, 0.35), var(--gold)); }
  .ab-path li { text-align: left; padding: 0 0 0 2.5rem; }
  .ab-dot { left: 0; margin-left: 0; }
}

/* What I bring */
.ab-bring { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ab-bring li { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem; border: 1px solid var(--rd-line); border-radius: var(--radius-lg); background: var(--rd-deep); font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3; color: var(--cream); }
.ab-bring li:last-child { grid-column: span 2; flex-direction: row; align-items: center; background: var(--teal); border-color: var(--gold); font-size: 1.3rem; }
.ab-icon { flex: 0 0 auto; width: 34px; height: 34px; color: var(--gold); }
@media (max-width: 1000px) { .ab-bring { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .ab-bring { gap: 0.75rem; }
  .ab-bring li { padding: 1rem; gap: 0.7rem; font-size: 1rem; }
  .ab-bring li:last-child { font-size: 1.1rem; }
  .ab-icon { width: 28px; height: 28px; }
}

/* Manifesto: numbers, gold key phrase, reveal */
.rd .manifesto { padding: 4.5rem 0; }
.ab-beliefs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3rem; max-width: 1040px; margin: 0 auto; }
.rd .manifesto .ab-beliefs .manifesto-statement { position: relative; max-width: none; margin: 0; padding: 1.5rem 0; text-align: left; font-size: clamp(1.5rem, 2.3vw, 1.75rem); border-top: 1px solid rgba(228, 205, 160, 0.25); }
@media (max-width: 760px) { .ab-beliefs { grid-template-columns: 1fr; } }
.rd .manifesto .manifesto-statement em { font-style: italic; color: var(--gold); }
.ab-num { display: block; margin-bottom: 0.5rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; color: var(--cream); opacity: 0.85; }
.rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rv.rv-in { opacity: 1; transform: none; }

/* Find me elsewhere */
.ab-elsewhere { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ab-card { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--rd-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--rd-surface); transition: border-color 0.2s ease, transform 0.2s ease; }
.ab-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.ab-card img { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 1.1rem; }
.ab-card .adv-label { padding: 0 1.25rem; }
.ab-card-title { padding: 0 1.25rem 0.5rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--cream); }
.ab-card .rd-more { padding: 0 1.25rem 1.4rem; margin-top: auto; }
@media (max-width: 860px) { .ab-elsewhere { grid-template-columns: 1fr; } }

/* Off the slide deck */
.ab-candid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ab-candid figure { margin: 0; }
.ab-candid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.ab-candid figcaption { margin-top: 0.75rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--cream); }
@media (max-width: 760px) { .ab-candid { grid-template-columns: 1fr; } .ab-candid img { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .ab-card, .ab-card:hover { transition: none; transform: none; } }

/* --------------------------------------------------------------------------
   Let's Talk (2026-10): two columns, topic buttons, roomier form,
   reassurance, other ways, thank-you panel.
   -------------------------------------------------------------------------- */

.lt-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start; max-width: 1100px; }
.lt-side { position: sticky; top: 110px; }
.lt-photo { width: 100%; max-width: 360px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.rd .lt-side-head { font-size: 1.4rem; margin: 2rem 0 1rem; }
.lt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.lt-steps li { display: flex; gap: 0.9rem; align-items: flex-start; color: var(--rd-text); line-height: 1.45; }
.lt-steps li span { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--rd-deep); font-weight: 700; font-size: 0.9rem; }
.rd .lt-main .talk-intro { text-align: left; }
.rd .lt-main .talk-intro h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.rd .lt-main .talk-aside { margin-left: 0; }
@media (max-width: 860px) {
  .lt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .lt-side { position: static; order: 2; }
  .lt-photo { max-width: 260px; }
}

/* Topic buttons */
.lt-topics { border: 0; margin: 0; padding: 0; }
.lt-topics legend { padding: 0; margin-bottom: 0.6rem; font-weight: 600; font-size: 0.9rem; color: var(--rd-text); }
.lt-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lt-chips button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(228, 205, 160, 0.4);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.lt-chips button:hover { border-color: var(--gold); color: var(--gold); }
.lt-chips button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--rd-deep); }
.lt-chips button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Phones: topic buttons in two tidy columns so the first field comes up sooner */
@media (max-width: 560px) {
  .lt-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .lt-chips button { padding: 0.45rem 0.5rem; font-size: 0.76rem; line-height: 1.25; border-radius: var(--radius); }
}
/* Field messages and the message counter */
.lt-field-err { margin: 0.35rem 0 0; font-size: 0.85rem; font-weight: 600; color: #F2B8A8; }
.rd .talk-form [aria-invalid="true"] { border-color: #E07A5F; }
.lt-count { margin: 0.35rem 0 0; text-align: right; font-size: 0.8rem; color: var(--rd-muted); }
.lt-count.is-full { color: #F2B8A8; font-weight: 600; }

/* Roomier form */
.rd .talk-form input[type="text"],
.rd .talk-form input[type="email"],
.rd .talk-form textarea { padding: 0.95rem 1.1rem; font-size: 1.02rem; border-radius: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.rd .talk-form input:focus,
.rd .talk-form textarea:focus { box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.3); }
.rd .talk-form textarea { min-height: 170px; }
.rd .lt-send { width: 100%; padding: 1rem; font-size: 1.05rem; }
.lt-assure { margin: 0; text-align: center; font-size: 0.85rem; color: var(--rd-muted); }
.lt-assure a, .lt-other a { color: var(--gold); }
.lt-other { margin: 1.5rem 0 0; text-align: center; color: var(--rd-text); }
.talk-form[hidden], .lt-other[hidden], .lt-thanks[hidden] { display: none; }

/* Thank-you panel */
.lt-thanks { border: 1px solid var(--gold); border-radius: var(--radius-lg); background: var(--rd-surface); overflow: hidden; }
.lt-thanks:focus { outline: none; }
.lt-thanks img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.rd .lt-thanks h2 { margin: 1.5rem 1.75rem 0.5rem; font-size: 2rem; }
.lt-thanks p { margin: 0 1.75rem 1.5rem; color: var(--rd-text); }
.lt-thanks .adv-label { margin: 0 1.75rem; }
.lt-thanks ul { list-style: none; margin: 0.5rem 1.75rem 1.75rem; padding: 0; display: grid; gap: 0.5rem; }

/* Home: Influential Women recognition card, right after the proof strip */
/* Recognition: a compact strip under the proof names, not a full section. */
.hm-award { padding: 2.25rem 0 0.5rem; }
.hm-award-card { display: grid; grid-template-columns: 150px 1fr; gap: 1.75rem; align-items: center; max-width: 960px; margin: 0 auto; padding: 1.25rem 1.5rem; border: 1px solid var(--rd-line); border-radius: var(--radius-lg); background: rgba(14, 75, 69, 0.25); }
.hm-award-media { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease; }
.hm-award-media:hover { transform: scale(1.03); }
.hm-award-media img { width: 100%; height: auto; }
.rd .hm-award-text h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 0.2rem 0 0.6rem; }
.hm-award-text blockquote { margin: 0 0 0.75rem; padding-left: 1rem; border-left: 3px solid var(--gold); }
.hm-award-text blockquote p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--rd-text); }
.rd .hm-award + .rd-beliefs { border-top: 0; }
@media (max-width: 640px) {
  .hm-award-card { grid-template-columns: 92px 1fr; gap: 1rem; padding: 1rem; }
  .hm-award-text blockquote { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hm-award-media, .hm-award-media:hover { transition: none; transform: none; } }

/* --------------------------------------------------------------------------
   Header: "Work With Me" dropdown (Advisory, Governance, Speaking)
   -------------------------------------------------------------------------- */

.rd .nav-group { position: relative; }
.rd .nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rd-text);
  cursor: pointer;
}
.rd .nav-group-btn:hover,
.rd .nav-group-btn[data-current="true"],
.rd .nav-group.is-open .nav-group-btn { color: var(--gold); }
.rd .nav-group-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.rd .nav-caret { width: 12px; height: 12px; transition: transform 0.2s ease; }
.rd .nav-group.is-open .nav-caret { transform: rotate(180deg); }

.rd .nav-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  min-width: 190px;
  padding: 0.5rem;
  border: 1px solid var(--rd-line);
  border-top: 2px solid var(--gold);
  border-radius: 12px;
  background: var(--rd-surface);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  transform: translateX(-50%);
  z-index: 40;
}
@keyframes nav-menu-in { from { opacity: 0; margin-top: -6px; } to { opacity: 1; margin-top: 0; } }
/* invisible bridge so the menu doesn't close while the pointer moves down */
.rd .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.rd .nav-group.is-open .nav-menu,
.rd .nav-group:hover .nav-menu { display: flex; animation: nav-menu-in 0.15s ease; }
.rd nav.site-links .nav-menu a:not(.btn) { padding: 0.6rem 0.85rem; border-radius: 8px; white-space: nowrap; }
.rd nav.site-links .nav-menu a:not(.btn):hover,
.rd nav.site-links .nav-menu a:not(.btn):focus-visible { background: rgba(228, 205, 160, 0.08); color: var(--gold); }

/* Phone/tablet menu: the group shows open, as an indented list */
@media (max-width: 1080px) {
  .rd .nav-group { width: 100%; }
  .rd .nav-group-btn { pointer-events: none; color: var(--rd-muted); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .rd .nav-group-btn[data-current="true"] { color: var(--gold); }
  .rd .nav-caret { display: none; }
  .rd .nav-menu,
  .rd .nav-group:hover .nav-menu {
    display: flex;
    animation: none;
    position: static;
    transform: none;
    min-width: 0;
    margin-top: 0.5rem;
    padding: 0 0 0 0.9rem;
    border: 0;
    border-left: 2px solid var(--gold);
    border-radius: 0;
    background: none;
    box-shadow: none;
    gap: 0.6rem;
  }
  .rd .nav-menu::before { display: none; }
  .rd nav.site-links .nav-menu a:not(.btn) { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .rd .nav-menu, .rd .nav-group:hover .nav-menu, .rd .nav-group.is-open .nav-menu { animation: none; } .rd .nav-caret { transition: none; } }

/* --------------------------------------------------------------------------
   Listen & Read page: Listen section (full episode + clips) and the big
   Listen / Read dividers.
   -------------------------------------------------------------------------- */

.ls-jump { display: inline-block; margin-left: 0.5rem; padding: 0.2rem 0.75rem; border: 1px solid rgba(228, 205, 160, 0.4); border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--cream); text-decoration: none; }
.ls-jump:hover { border-color: var(--gold); color: var(--gold); }

.ls-divider { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; scroll-margin-top: 110px; }
.ls-divider-icon { width: 44px; height: 44px; flex: 0 0 auto; color: var(--gold); }
.rd .ls-divider h2 { margin: 0; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; letter-spacing: 0.01em; }
.ls-divider-line { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), rgba(184, 147, 90, 0)); }
.ls-divider-read { padding-top: 4.5rem; margin-top: 0; border-top: 1px solid var(--rd-line); }
.rd .section.ls-listen { padding-top: 2rem; scroll-margin-top: 90px; }
.rd .ls-listen + .ls-divider-read + .ins-list { padding-top: 0; }

.ls-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
.rd .ls-feature h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; margin: 0.25rem 0 0.6rem; }
.ls-feature p:not(.sp-feature-meta) { color: var(--rd-text); }
@media (max-width: 860px) { .ls-feature { grid-template-columns: 1fr; gap: 2rem; } }

.rd .ls-clips-head { margin: 3.5rem 0 1.25rem; font-size: 1.4rem; }
.ls-clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ls-clip { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--rd-line); border-radius: var(--radius-lg); background: var(--rd-surface); overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; }
.ls-clip:hover { border-color: var(--gold); transform: translateY(-3px); }
.ls-clip-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #000; container-type: inline-size; }
.ls-clip-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ls-clip .sp-play { left: 14%; top: 11%; width: 16cqw; height: 16cqw; margin: -8cqw 0 0 -8cqw; z-index: 1; }
.ls-clip .sp-play::after { left: 6.2cqw; top: 4.4cqw; border-left-width: 5cqw; border-top-width: 3.6cqw; border-bottom-width: 3.6cqw; }
.ls-clip-date { padding: 1rem 1.25rem 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ls-clip-title { padding: 0 1.25rem 0.4rem; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; color: var(--cream); }
.ls-clip-sub { padding: 0 1.25rem 0.9rem; font-size: 0.9rem; color: var(--rd-text); flex-grow: 1; }
.ls-clip .rd-more { padding: 0 1.25rem 1.25rem; }
@media (max-width: 900px) { .ls-clips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ls-clips { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ls-clip, .ls-clip:hover { transition: none; transform: none; } }
/* 12 clips: four across, tighter text */
.ls-clips { grid-template-columns: repeat(4, 1fr); }
.rd .ls-clips-head span { margin-left: 0.6rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--rd-muted); }
.ls-clip-title { font-size: 1.05rem; }
.ls-clip-sub { font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) { .ls-clips { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .ls-clips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ls-clips { grid-template-columns: 1fr; } }
.ls-clip-sub { padding: 0; margin: 0 1.25rem 0.9rem; }
/* Clips: newest few, then "Show all" (laptop/tablet); a swipe row on phones */
@media (min-width: 1101px) { .ls-clips.is-collapsed .ls-clip:nth-child(n+5) { display: none; } }
@media (min-width: 821px) and (max-width: 1100px) { .ls-clips.is-collapsed .ls-clip:nth-child(n+7) { display: none; } }
@media (min-width: 481px) and (max-width: 820px) { .ls-clips.is-collapsed .ls-clip:nth-child(n+5) { display: none; } }
.ls-more { display: block; margin: 1.5rem auto 0; }
.ls-more[hidden] { display: none; }
@media (max-width: 480px) {
  .ls-clips { display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1.5rem; margin: 0 -1.5rem; padding: 0 1.5rem 0.5rem; scrollbar-width: none; }
  .ls-clips::-webkit-scrollbar { display: none; }
  .ls-clip { flex: 0 0 74%; scroll-snap-align: start; }
  .ls-clip:hover { transform: none; }
  .ls-more, .ls-more[hidden] { display: none; }
  .rd .ls-clips-head span { display: block; margin: 0.3rem 0 0; }
  .rd .ls-clips-head span::after { content: " \00b7  swipe for more \2192"; }
}
/* Phones: post cards keep graphic, title and subtitle; the long excerpt is left for LinkedIn */
@media (max-width: 560px) {
  .rd .topic-card .ins-excerpt { display: none; }
  .rd .topic-card .topic-thumb { aspect-ratio: 16 / 9; }
  .rd .topic-card .topic-subtitle { margin-bottom: 1rem; }
}
.ins-jumps { margin-top: 0.6rem !important; font-size: 0.9rem !important; color: var(--rd-muted) !important; }

/* "Unicorn Army" menu item, after the Let's Talk button: same look as the
   "Join the Unicorn Army" button on its page (Fredoka, shimmering gold /
   cream / steel pill, deep-teal lettering). */
@keyframes nav-unicorn-shimmer { to { background-position: 220% center; } }
.rd nav.site-links a.nav-unicorn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-family: 'Fredoka', var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rd-deep);
  background: linear-gradient(90deg, #B8935A, #E4CDA0, #9DB8C4, #B8935A);
  background-size: 220% auto;
  animation: nav-unicorn-shimmer 8s linear infinite;
  box-shadow: 0 6px 18px rgba(184, 147, 90, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rd nav.site-links a.nav-unicorn:hover,
.rd nav.site-links a.nav-unicorn[aria-current="page"] { color: var(--rd-deep); }
.rd nav.site-links a.nav-unicorn:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 24px rgba(184, 147, 90, 0.45); }
.rd nav.site-links a.nav-unicorn[aria-current="page"] { box-shadow: 0 0 0 2px var(--cream), 0 6px 18px rgba(184, 147, 90, 0.3); }
.rd nav.site-links a.nav-unicorn:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.nav-unicorn-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; color: var(--gold); }
.rd nav.site-links a.nav-unicorn .nav-unicorn-icon { color: var(--rd-deep); }
@media (max-width: 1080px) { .rd nav.site-links.is-open a.nav-unicorn { align-self: flex-start; } }
/* Desktop: set the pill apart from the main menu with extra space and a thin gold divider. */
@media (min-width: 1081px) {
  .rd nav.site-links a.nav-unicorn { position: relative; margin-left: 1.5rem; }
  .rd nav.site-links a.nav-unicorn::before { content: ""; position: absolute; left: -1.65rem; top: 50%; width: 1px; height: 1.6rem; margin-top: -0.8rem; background: rgba(184, 147, 90, 0.45); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rd nav.site-links a.nav-unicorn { animation: none; transition: none; }
  .rd nav.site-links a.nav-unicorn:hover { transform: none; }
}
footer.site-footer nav a.footer-unicorn { display: inline-flex; align-items: center; gap: 0.3rem; }
