/* ────────────────────────────────────────────────────────────────────────
   KST Website — Header Elevation Overrides
   v1.0 · 2026-05-20
   Drop this into kst-website-mirror/ and link it from every page after
   the existing WP stylesheet so it overrides cleanly.
   ──────────────────────────────────────────────────────────────────────── */

/* ───── Premium nav typography ─────
   Uppercase, tracked, refined weight. The classic premium-brand nav move.
   Inherits from existing nav rules — only overrides typography. */
.kst-header nav a,
header.site-header nav a,
.elementor-nav-menu .elementor-item,
.menu-primary-menu-container a,
.site-header .menu a {
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  text-decoration: none !important;
  color: #1F2D4B !important;
  transition: color 250ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}

/* Restore selectivity — don't apply to logo or branded surfaces */
.kst-header .logo a,
header.site-header .logo a,
.site-logo a {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ───── The Parent Book — distinct sibling-brand treatment ─────
   Italic Cormorant + persistent subtle gold underline.
   Apply this class via the existing menu link, or target by href. */
.menu-item a[href*="the-parent-book"],
nav a[href*="the-parent-book"],
a[href*="/the-parent-book"]:not(.kst-btn):not(.kst-practice__door):not(.kst-currently-in-print__link):not(.kst-footer__ecosystem-link) {
  font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #1F2D4B !important;
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-position: 0 88% !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1px !important;
  --pb-line: rgba(199, 163, 60, 0.55);
  background-image: linear-gradient(var(--pb-line), var(--pb-line)) !important;
  padding-bottom: 0.15em !important;
  transition: background-size 350ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.menu-item a[href*="the-parent-book"]:hover,
nav a[href*="the-parent-book"]:hover,
a[href*="/the-parent-book"]:not(.kst-btn):not(.kst-practice__door):not(.kst-currently-in-print__link):not(.kst-footer__ecosystem-link):hover {
  --pb-line: rgba(199, 163, 60, 1);
  background-size: 100% 1.5px !important;
}

/* ───── Contact CTA — refined pill, navy outline, fills on hover ─────
   Matches the visual language of the Wellbeing Tips badge (both pills)
   without copying its identity (navy ≠ cream). */
.kst-header a.contact-cta,
header a[href*="contact"].cta,
.elementor-button[href*="contact"],
a.kst-contact-pill,
nav a[href$="contact.html"]:not(.menu-item a),
.kst-nav-cta a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.5rem 1.125rem !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #F8F8F5 !important;
  background: transparent !important;
  border: 1px solid #F8F8F5 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition:
    background 250ms cubic-bezier(0.2, 0.7, 0.2, 1),
    color 250ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.kst-header a.contact-cta:hover,
header a[href*="contact"].cta:hover,
.elementor-button[href*="contact"]:hover,
a.kst-contact-pill:hover,
.kst-nav-cta a:hover {
  background: #F8F8F5 !important;
  color: #1F2D4B !important;
  transform: translateY(-1px) !important;
}

/* ───── Wellbeing Tips badge — proper brand match ─────
   Cream pill, Lora Italic wordmark, three dots side-by-side
   (NOT overlapping), each breathing on a continuous staggered cycle. */

.wt-badge {
  --wt-cream:    #EDE6DA;
  --wt-cream-hi: #F2EBDE;
  --wt-ink:      #3A2F22;
  --wt-clay:     #C9A47E;
  --wt-rose:     #C99B97;
  --wt-sage:     #9FB089;

  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding: 0.4375rem 0.9375rem !important;
  background: var(--wt-cream) !important;
  color: var(--wt-ink) !important;
  border: 1px solid rgba(58, 47, 34, 0.10) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-family: 'Lora', 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.005em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-transform: none !important;
  transition:
    background 250ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.wt-badge:hover,
.wt-badge:focus-visible {
  background: var(--wt-cream-hi) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(58, 47, 34, 0.08) !important;
}

.wt-badge__dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  /* No negative margins — proper spacing */
}
.wt-badge__dot {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  transform-origin: center !important;
  /* Continuous gentle breath — 4s cycle, staggered between dots */
  animation: wt-breath 4s ease-in-out infinite !important;
}
.wt-badge__dot--clay { background: var(--wt-clay) !important; animation-delay: 0s !important; }
.wt-badge__dot--rose { background: var(--wt-rose) !important; animation-delay: 0.4s !important; }
.wt-badge__dot--sage { background: var(--wt-sage) !important; animation-delay: 0.8s !important; }

@keyframes wt-breath {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* On hover, the breath becomes a touch fuller and faster — like noticing
   the visitor noticed. */
.wt-badge:hover .wt-badge__dot {
  animation-duration: 2.4s !important;
}

.wt-badge__label {
  font-family: 'Lora', 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 0.9375rem !important;
  line-height: 1 !important;
  letter-spacing: 0.005em !important;
  color: var(--wt-ink) !important;
  text-transform: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wt-badge__dot { animation: none !important; }
  .wt-badge:hover { transform: none !important; }
}

/* ───── Header — breathing room + refined separator ───── */
.kst-header,
header.site-header,
.site-header {
  padding-top: 1.125rem !important;
  padding-bottom: 1.125rem !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(to bottom,
      rgba(248, 248, 245, 0.98) 0%,
      rgba(248, 248, 245, 0.94) 100%) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  position: relative !important;
}
.kst-header::after,
header.site-header::after,
.site-header::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(31, 45, 75, 0.10) 20%,
    rgba(31, 45, 75, 0.10) 80%,
    transparent 100%
  ) !important;
}

/* When scrolled — subtle shadow lift */
.kst-header.is-scrolled,
header.site-header.is-scrolled,
.site-header.is-scrolled {
  box-shadow: 0 1px 16px rgba(31, 45, 75, 0.06) !important;
}

/* Logo: a touch more breathing space */
.kst-header .site-logo img,
header.site-header .site-logo img,
.site-header .site-logo img,
.kst-header img[src*="KST-lockup"] {
  height: clamp(38px, 4vw, 50px) !important;
  width: auto !important;
  transition: opacity 250ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.kst-header .site-logo a:hover img,
.site-header .site-logo a:hover img {
  opacity: 0.78 !important;
}

/* ───── Nav item rhythm — subtle gold underline animation ───── */
.kst-header nav a:not(.kst-btn):not(.contact-cta):not(.wt-badge):not([href*="the-parent-book"]),
header.site-header nav a:not(.kst-btn):not(.contact-cta):not(.wt-badge):not([href*="the-parent-book"]) {
  position: relative !important;
  padding: 0.5rem 0 !important;
}
.kst-header nav a:not(.kst-btn):not(.contact-cta):not(.wt-badge):not([href*="the-parent-book"])::after,
header.site-header nav a:not(.kst-btn):not(.contact-cta):not(.wt-badge):not([href*="the-parent-book"])::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  bottom: 0.125rem !important;
  width: 80% !important;
  height: 1px !important;
  background: #C7A33C !important;
  transform-origin: center !important;
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.kst-header nav a:not(.kst-btn):not(.contact-cta):not(.wt-badge):not([href*="the-parent-book"]):hover::after,
.kst-header nav a:not(.kst-btn):not(.contact-cta):not(.wt-badge):not([href*="the-parent-book"]).current-menu-item::after,
header.site-header nav a:not(.kst-btn):not(.contact-cta):not(.wt-badge):not([href*="the-parent-book"]):hover::after {
  transform: translateX(-50%) scaleX(1) !important;
}
.kst-header nav a:hover,
header.site-header nav a:hover {
  color: #1F2D4B !important;
}

/* ───── Spacing between nav items + CTAs ─────
   Premium nav rhythm: more space between brand surfaces (Parent Book,
   Contact CTA, WT badge) than between regular nav items. */
.kst-header nav,
header.site-header nav {
  gap: 1.5rem !important;
}
.kst-header nav .kst-cta-group,
header.site-header nav .kst-cta-group {
  margin-left: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
}

/* ───── Bridge selectors for actual site class names ─────
   The mirrored WP site uses `.kst-nav` (and `.kst-nav-s` on the
   Schools page). Mirror Sam's `.kst-header` rules over to them so
   the same elevation applies without needing to rename classes. */

/* Nav typography */
.kst-nav a,
.kst-nav-s a {
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  text-decoration: none !important;
  color: #1F2D4B !important;
  transition: color 250ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.kst-nav .kst-nav__logo,
.kst-nav-s .kst-nav-s__logo,
.kst-nav .kst-nav__logo a,
.kst-nav-s .kst-nav-s__logo a {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Header bar — padding, background, hairline */
.kst-nav,
.kst-nav-s {
  padding-top: 1.125rem !important;
  padding-bottom: 1.125rem !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(to bottom,
      rgba(248, 248, 245, 0.98) 0%,
      rgba(248, 248, 245, 0.94) 100%) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  position: relative !important;
}
.kst-nav::after,
.kst-nav-s::after {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(31, 45, 75, 0.10) 20%,
    rgba(31, 45, 75, 0.10) 80%,
    transparent 100%
  ) !important;
}
.kst-nav.is-scrolled,
.kst-nav-s.is-scrolled {
  box-shadow: 0 1px 16px rgba(31, 45, 75, 0.06) !important;
}

/* Logo sizing on the actual lockups — proper presence on a 110px navy nav.
   Previous clamp(38px, 4vw, 50px) felt recessive. New range gives the mark
   real authority without overwhelming the rest of the nav. */
.kst-nav .kst-nav__logo img,
.kst-nav-s .kst-nav-s__logo img {
  height: clamp(56px, 5.2vw, 76px) !important;
  width: auto !important;
  transition: opacity 250ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.kst-nav .kst-nav__logo:hover img,
.kst-nav-s .kst-nav-s__logo:hover img {
  opacity: 0.78 !important;
}

/* Gold underline animation on regular nav links (not Parent Book, CTA, WT) */
.kst-nav .kst-nav__links a:not([href*="the-parent-book"]),
.kst-nav-s .kst-nav-s__links a:not([href*="the-parent-book"]) {
  position: relative !important;
  padding: 0.5rem 0 !important;
}
.kst-nav .kst-nav__links a:not([href*="the-parent-book"])::after,
.kst-nav-s .kst-nav-s__links a:not([href*="the-parent-book"])::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  bottom: 0.125rem !important;
  width: 80% !important;
  height: 1px !important;
  background: #C7A33C !important;
  transform-origin: center !important;
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.kst-nav .kst-nav__links a:not([href*="the-parent-book"]):hover::after,
.kst-nav-s .kst-nav-s__links a:not([href*="the-parent-book"]):hover::after {
  transform: translateX(-50%) scaleX(1) !important;
}

/* CTA pill — cream outline + cream text on navy header. Inverts on hover. */
.kst-nav .kst-nav__cta,
.kst-nav-s .kst-nav-s__cta {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.5rem 1.125rem !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #F8F8F5 !important;
  background: transparent !important;
  border: 1px solid #F8F8F5 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition:
    background 250ms cubic-bezier(0.2, 0.7, 0.2, 1),
    color 250ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.kst-nav .kst-nav__cta:hover,
.kst-nav-s .kst-nav-s__cta:hover {
  background: #F8F8F5 !important;
  color: #1F2D4B !important;
  transform: translateY(-1px) !important;
}

/* The Parent Book — italic Cormorant in the actual nav */
.kst-nav .kst-nav__link[href*="the-parent-book"],
.kst-nav-s .kst-nav-s__link[href*="the-parent-book"] {
  font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #1F2D4B !important;
  background-image: linear-gradient(rgba(199, 163, 60, 0.55), rgba(199, 163, 60, 0.55)) !important;
  background-position: 0 88% !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1px !important;
  padding-bottom: 0.15em !important;
  transition: background-size 350ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.kst-nav .kst-nav__link[href*="the-parent-book"]:hover,
.kst-nav-s .kst-nav-s__link[href*="the-parent-book"]:hover {
  background-image: linear-gradient(rgba(199, 163, 60, 1), rgba(199, 163, 60, 1)) !important;
  background-size: 100% 1.5px !important;
}

/* Premium nav rhythm — extra space before CTA group */
.kst-cta-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  margin-left: 1rem !important;
}


/* ════════════════════════════════════════════════════════════════════════
   v32 — Sam feedback pass · 2026-05-21
   Issues fixed:
   1) Header bg → NAVY (was cream). Canonical KST.ltd identity.
   2) All header items more visible & navy-friendly colour treatment.
   3) The Parent Book — gold, larger, more prominent.
   4) Wellbeing Tips badge — cream label, dots stay, fits on navy.
   5) Mobile menu — items still rendering on burger expand.
   Loaded LAST in head, so these !important rules win the cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Header: navy background, no backdrop blur ─── */
.kst-nav,
.kst-nav-s,
.kst-header,
header.site-header,
.site-header {
  background: #1F2D4B !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Gradient hairline below header — gold fading at edges */
.kst-nav::after,
.kst-nav-s::after,
.kst-header::after,
header.site-header::after,
.site-header::after {
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(199, 163, 60, 0.45) 20%,
    rgba(199, 163, 60, 0.45) 80%,
    transparent 100%
  ) !important;
}

/* Scroll-shadow stays subtle on navy */
.kst-nav.is-scrolled,
.kst-nav-s.is-scrolled,
.kst-header.is-scrolled,
header.site-header.is-scrolled,
.site-header.is-scrolled {
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.18) !important;
}

/* ─── Nav links: cream text on navy, gold on hover ─── */
.kst-nav .kst-nav__links a,
.kst-nav-s .kst-nav-s__links a,
.kst-nav__mobile a.kst-nav__link,
.kst-header nav a,
header.site-header nav a {
  color: #F8F8F5 !important;
}
.kst-nav .kst-nav__links a:not([href*="the-parent-book"]):hover,
.kst-nav-s .kst-nav-s__links a:not([href*="the-parent-book"]):hover,
.kst-nav__mobile a.kst-nav__link:hover {
  color: #C7A33C !important;
}

/* Gold underline still animates from gold-soft */
.kst-nav .kst-nav__links a:not([href*="the-parent-book"])::after,
.kst-nav-s .kst-nav-s__links a:not([href*="the-parent-book"])::after {
  background: #C7A33C !important;
}

/* ─── The Parent Book — distinct sibling-brand treatment, GOLD on navy ─── */
.kst-nav .kst-nav__link[href*="the-parent-book"],
.kst-nav-s .kst-nav-s__link[href*="the-parent-book"],
.kst-nav__mobile a[href*="the-parent-book"],
a[href*="/the-parent-book"]:not(.kst-btn):not(.kst-practice__door):not(.kst-currently-in-print__link):not(.kst-footer__ecosystem-link),
a[href*="the-parent-book.html"]:not(.kst-btn):not(.kst-practice__door):not(.kst-currently-in-print__link):not(.kst-footer__ecosystem-link) {
  font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;          /* slightly larger than other nav items */
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #C7A33C !important;              /* GOLD on navy = visible */
  background-image: linear-gradient(rgba(199, 163, 60, 0.55), rgba(199, 163, 60, 0.55)) !important;
  background-position: 0 92% !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1px !important;
  padding-bottom: 0.18em !important;
  transition: background-size 350ms cubic-bezier(0.2, 0.7, 0.2, 1), color 250ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.kst-nav .kst-nav__link[href*="the-parent-book"]:hover,
.kst-nav-s .kst-nav-s__link[href*="the-parent-book"]:hover,
.kst-nav__mobile a[href*="the-parent-book"]:hover {
  background-image: linear-gradient(rgba(199, 163, 60, 1), rgba(199, 163, 60, 1)) !important;
  background-size: 100% 1.5px !important;
  color: #E5C674 !important;              /* brighter gold on hover */
}

/* ─── Contact CTA pill: cream outline + cream text, fills cream on hover ─── */
.kst-nav .kst-nav__cta,
.kst-nav-s .kst-nav-s__cta,
.kst-nav__mobile .kst-nav__cta,
a.contact-cta {
  color: #F8F8F5 !important;
  background: transparent !important;
  border: 1px solid #F8F8F5 !important;
}
.kst-nav .kst-nav__cta:hover,
.kst-nav-s .kst-nav-s__cta:hover,
.kst-nav__mobile .kst-nav__cta:hover,
a.contact-cta:hover {
  background: #F8F8F5 !important;
  color: #1F2D4B !important;
  border-color: #F8F8F5 !important;
}

/* ─── v143 — Wellbeing Tips: plain italic wordmark + thin hairline ─── */
/* v135 dropped the cream pill; v143 also drops the box (this rule used
   to add a 1px rgba(248,248,245,0.18) border that was rendering as a
   faint navy-tinted outline around the WT link). Now: no border, no
   background, no padding chrome — just the three brand dots and the
   italic Lora wordmark, with a quiet 1px white hairline directly under
   the wordmark. Parallels the gold-deep hairline beneath The Parent
   Book wordmark on the same nav: publication-house convention,
   both sister brands carry a wordmark with a hairline underneath, each
   in its own colour. Restrained, editorial, signals "this is its own
   thing" without competing with the wordmark itself.                   */
.kst-nav .wt-badge,
.kst-nav-s .wt-badge,
.kst-nav__mobile .wt-badge {
  background: transparent !important;
  border: 0 !important;
  color: #F8F8F5 !important;
  padding: 0.25rem 0 !important;
  gap: 0.625rem !important;
  min-width: auto !important;
}
.kst-nav .wt-badge:hover,
.kst-nav-s .wt-badge:hover,
.kst-nav__mobile .wt-badge:hover {
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}
.kst-nav .wt-badge__label,
.kst-nav-s .wt-badge__label,
.kst-nav__mobile .wt-badge__label {
  color: #F4EFE5 !important;
  font-family: 'Lora', 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  /* v144 — sister-brand parity with TPB wordmark on the same nav.
     Was 0.92rem (14.7px); TPB sits at 1.0625rem (17px). Both
     wordmarks now read as siblings of the same scale.            */
  font-size: 1.0625rem !important;
  letter-spacing: 0.005em !important;
}
/* Dots: clear 5px gap, no overlapping margin, keep colours */
.kst-nav .wt-badge__dots,
.kst-nav-s .wt-badge__dots,
.kst-nav__mobile .wt-badge__dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  flex-shrink: 0 !important;
}
.kst-nav .wt-badge__dot,
.kst-nav-s .wt-badge__dot,
.kst-nav__mobile .wt-badge__dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  margin: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  animation: wt-breath 4s ease-in-out infinite !important;
}

/* ─── Mobile burger: panel matches navy, items remain visible ─── */
.kst-nav__mobile {
  background: #1F2D4B !important;
  border-top: 1px solid rgba(199, 163, 60, 0.3) !important;
}
.kst-nav__hamburger,
.kst-nav__hamburger svg {
  color: #F8F8F5 !important;
  stroke: #F8F8F5 !important;
}

/* Cream/light KST-mark icon visibility on navy (if used as inline svg with currentColor) */
.kst-nav__logo svg,
.kst-nav-s__logo svg {
  color: #F8F8F5 !important;
}


/* ─────────────────────────────────────────────────────────
   v33 — MOBILE OVERHAUL
   Real-iPhone fixes per Sam: bigger logo, larger nav text,
   WT badge moved into burger panel (hidden from header strip),
   Contact pill into burger panel, premium drawer treatment.
   Breakpoint: ≤1100px collapses to burger; tighter at ≤480px.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  /* Header: auto-height with consistent padding */
  .kst-nav,
  .kst-header,
  header.site-header,
  .site-header {
    height: auto !important;
    min-height: 88px !important;
    padding: 14px 22px !important;
  }

  /* Logo: presence on mobile, but compact enough to share the strip
     with the Parent Book wordmark + WT dots + burger. The earlier
     88px was too generous once the wordmark was added. */
  .kst-nav__logo img,
  .kst-header .kst-nav__logo img {
    height: 64px !important;
    max-height: 64px !important;
    width: auto !important;
  }

  /* Hide WT badge + Contact from the desktop header strip ONLY
     (direct children of .kst-nav — does NOT apply inside .kst-nav__mobile) */
  .kst-nav > .wt-badge,
  .kst-nav > .kst-cta-group,
  .kst-nav > .kst-nav__cta,
  .kst-nav > a.contact-cta,
  .kst-nav > .kst-nav__links .wt-badge,
  .kst-nav > .kst-nav__links .kst-cta-group {
    display: none !important;
  }

  /* Hamburger: cream, bigger touch target on navy */
  .kst-nav__hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    color: #F8F8F5 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }
  .kst-nav__hamburger svg {
    width: 26px !important;
    height: 26px !important;
    stroke: #F8F8F5 !important;
  }
  .kst-nav__hamburger:hover svg,
  .kst-nav__hamburger[aria-expanded="true"] svg {
    stroke: #C7A33C !important;
  }

  /* Burger panel: premium navy drawer. top:100% so it always sits below
     the header regardless of header height variation. */
  .kst-nav__mobile {
    background: #1F2D4B !important;
    padding: 28px 28px 36px !important;
    top: 100% !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    border-top: 1px solid rgba(199, 163, 60, 0.28) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32) !important;
    align-items: stretch !important;
    text-align: center !important;
    gap: 0 !important;
    z-index: 9999 !important;
  }

  /* Standard nav items in the panel — larger, readable, calmly spaced */
  .kst-nav__mobile .kst-nav__link {
    font-family: 'Raleway', system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.0625rem !important; /* ~17px */
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #F8F8F5 !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(248, 248, 245, 0.08) !important;
    text-decoration: none !important;
    transition: color 200ms ease !important;
    line-height: 1.2 !important;
  }
  .kst-nav__mobile .kst-nav__link:hover,
  .kst-nav__mobile .kst-nav__link:active {
    color: #C7A33C !important;
  }

  /* Parent Book — gold italic Cormorant, slightly larger, gold-tint border.
     Higher specificity than desktop's .kst-nav .kst-nav__link[href*=…] (0,3,1)
     by stacking 3 classes + attribute selector. */
  .kst-nav .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"],
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"],
  .kst-nav__mobile a[href*="the-parent-book"] {
    font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
    font-style: italic !important;
    font-size: 1.3125rem !important; /* ~21px */
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    color: #C7A33C !important;
    font-weight: 500 !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid rgba(199, 163, 60, 0.28) !important;
    background: none !important;
  }

  /* CTA group at the bottom of the panel: stacked, full-width */
  .kst-nav__mobile .kst-cta-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 24px !important;
    padding-top: 4px !important;
  }

  /* Contact pill — full-width on mobile, cream outline */
  .kst-nav__mobile .kst-nav__cta,
  .kst-nav__mobile a.contact-cta {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 24px !important;
    font-family: 'Raleway', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important; /* ~13px */
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #F8F8F5 !important;
    background: transparent !important;
    border: 1px solid #F8F8F5 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    margin: 0 !important;
  }
  .kst-nav__mobile .kst-nav__cta:active,
  .kst-nav__mobile a.contact-cta:active {
    background: #F8F8F5 !important;
    color: #1F2D4B !important;
  }

  /* WT badge in burger panel — full-width, properly sized, premium */
  .kst-nav__mobile .wt-badge {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 14px !important;
    padding: 14px 20px !important;
    background: transparent !important;
    border: 1px solid rgba(248, 248, 245, 0.22) !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  .kst-nav__mobile .wt-badge__dots {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .kst-nav__mobile .wt-badge__dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    margin: 0 !important;
  }
  .kst-nav__mobile .wt-badge__label {
    font-family: 'Lora', Georgia, serif !important;
    font-style: italic !important;
    font-size: 0.875rem !important; /* ~14px */
    color: #F4EFE5 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 400 !important;
  }
}

/* iPhone-SE-ish (≤480px) — tighter padding, slightly smaller logo */
@media (max-width: 480px) {
  .kst-nav,
  .kst-header,
  header.site-header,
  .site-header {
    padding: 12px 18px !important;
    min-height: 78px !important;
  }
  .kst-nav__logo img,
  .kst-header .kst-nav__logo img {
    height: 56px !important;
    max-height: 56px !important;
  }
  .kst-nav__mobile {
    top: 100% !important;
    padding: 24px 22px 32px !important;
  }
  .kst-nav__mobile .kst-nav__link { font-size: 1rem !important; padding: 16px 0 !important; }
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"],
  .kst-nav__mobile a[href*="the-parent-book"] { font-size: 1.25rem !important; }
}


/* ─────────────────────────────────────────────────────────
   v34 — PARENT BOOK ELEVATION + WT MINI-DOTS BESIDE BURGER
   Make Parent Book read as a serialised editorial work
   (eyebrow + fleuron + size). Add a permanent WT-colour
   signal beside the mobile burger so the parent ecosystem
   is visible even before the menu opens.
   ───────────────────────────────────────────────────────── */

/* Parent Book — stacked editorial treatment.
   Anchor as inline-block centred; ::before is the eyebrow on its own
   line; ::after is the fleuron inline at the end of the title. */
.kst-nav .kst-nav__link[href*="the-parent-book"],
.kst-nav-s .kst-nav-s__link[href*="the-parent-book"],
.kst-nav__mobile a.kst-nav__link[href*="the-parent-book"],
.kst-nav__mobile a[href*="the-parent-book"],
header.site-header a[href*="the-parent-book"]:not(.kst-btn) {
  display: inline-block !important;
  text-align: center !important;
  line-height: 1.15 !important;
  font-size: 1.15rem !important; /* desktop bump */
  color: #C7A33C !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.kst-nav .kst-nav__link[href*="the-parent-book"]::before,
.kst-nav-s .kst-nav-s__link[href*="the-parent-book"]::before,
.kst-nav__mobile a.kst-nav__link[href*="the-parent-book"]::before,
.kst-nav__mobile a[href*="the-parent-book"]::before,
header.site-header a[href*="the-parent-book"]:not(.kst-btn)::before {
  content: var(--pb-volume, "Preview Edition · Summer 2026") !important;
  display: block !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: #C7A33C !important;
  opacity: 0.85 !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  background: none !important;
  position: static !important;
  transform: none !important;
}

.kst-nav .kst-nav__link[href*="the-parent-book"]::after,
.kst-nav-s .kst-nav-s__link[href*="the-parent-book"]::after,
.kst-nav__mobile a.kst-nav__link[href*="the-parent-book"]::after,
.kst-nav__mobile a[href*="the-parent-book"]::after,
header.site-header a[href*="the-parent-book"]:not(.kst-btn)::after {
  content: "  ❦" !important;
  font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
  font-style: italic !important;
  font-size: 0.85em !important;
  color: #C7A33C !important;
  opacity: 0.6 !important;
  margin-left: 4px !important;
  background: none !important;
  position: static !important;
  transform: none !important;
  display: inline !important;
}

/* Burger panel — bump Parent Book a touch + brighter gold */
@media (max-width: 1200px) {
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"],
  .kst-nav__mobile a[href*="the-parent-book"] {
    font-size: 1.4375rem !important; /* ~23px, was 21px */
    padding: 24px 0 !important;
    color: #D4B14C !important; /* brighter gold for stronger contrast on navy */
  }
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"]::before,
  .kst-nav__mobile a[href*="the-parent-book"]::before {
    font-size: 0.5625rem !important; /* ~9px on mobile */
    margin-bottom: 8px !important;
    color: #D4B14C !important;
    opacity: 0.92 !important;
  }
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"]::after,
  .kst-nav__mobile a[href*="the-parent-book"]::after {
    color: #D4B14C !important;
    opacity: 0.7 !important;
  }
}
@media (max-width: 480px) {
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"],
  .kst-nav__mobile a[href*="the-parent-book"] {
    font-size: 1.3125rem !important;
    padding: 22px 0 !important;
  }
}

/* WT mini-dots inside the burger button — three coloured dots sit to the
   LEFT of the hamburger lines, all within the button's touch target.
   Tapping anywhere in the button opens the menu (where the full WT
   badge appears as the actual clickable link to wellbeing.tips). */
@media (max-width: 1200px) {
  .kst-nav__hamburger {
    position: relative !important;
    overflow: visible !important;
    width: auto !important;
    min-width: 92px !important;
    padding: 0 8px !important;
    gap: 14px !important;
    flex-direction: row !important;
  }
  .kst-nav__hamburger::before {
    content: "" !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 8px !important;
    background-image:
      radial-gradient(circle at 4px 4px, #C9A47E 3.5px, transparent 4.2px),
      radial-gradient(circle at 20px 4px, #C99B97 3.5px, transparent 4.2px),
      radial-gradient(circle at 36px 4px, #9FB089 3.5px, transparent 4.2px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none !important;
    opacity: 0.95 !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }
  .kst-nav__hamburger:hover::before,
  .kst-nav__hamburger[aria-expanded="true"]::before {
    opacity: 1 !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v36 — WT BADGE HOVER (match wellbeing.tips)
   wellbeing.tips uses: dots lift translateY(-2px) on .brand:hover,
   staggered 0/80/160ms, transition: transform .6s with site ease.
   We mirror that exactly on the KST WT badge, replacing the older
   breathing animation. Premium, subtle, calm.
   ───────────────────────────────────────────────────────── */
.wt-badge .wt-badge__dot {
  /* Disable the breathing keyframes animation (it was wt-breath …) */
  animation: none !important;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}

/* Staggered lift on hover/focus — same -2px, same 80ms cadence */
.wt-badge:hover .wt-badge__dot--clay,
.wt-badge:focus-visible .wt-badge__dot--clay {
  transform: translateY(-2px) !important;
  transition-delay: 0ms !important;
}
.wt-badge:hover .wt-badge__dot--rose,
.wt-badge:focus-visible .wt-badge__dot--rose {
  transform: translateY(-2px) !important;
  transition-delay: 80ms !important;
}
.wt-badge:hover .wt-badge__dot--sage,
.wt-badge:focus-visible .wt-badge__dot--sage {
  transform: translateY(-2px) !important;
  transition-delay: 160ms !important;
}

/* Whole badge gets a quietly intensified border + a 1px lift on hover.
   Matches the same gentle "responsive on touch" feeling without being loud. */
.wt-badge {
  transition: border-color 0.4s ease, transform 0.4s ease !important;
}
.kst-nav .wt-badge:hover,
.kst-nav-s .wt-badge:hover,
.kst-nav__mobile .wt-badge:hover,
header.site-header .wt-badge:hover {
  border-color: rgba(248, 248, 245, 0.4) !important;
  transform: translateY(-1px) !important;
}


/* ─────────────────────────────────────────────────────────
   v38 — even spacing rhythm across the right-side cluster
   WT badge + Contact pill have been HTML-moved into
   .kst-nav__links so they become siblings of the regular nav
   items, sharing the same flex container and its 24px gap.
   Net result: every adjacent pair (Schools → PB → WT → Contact)
   sits on the same beat. The mobile burger-panel cta-group
   (inside .kst-nav__mobile) is untouched.
   ───────────────────────────────────────────────────────── */
@media (min-width: 1201px) {
  .kst-nav,
  .kst-header {
    justify-content: flex-start !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .kst-nav > .kst-nav__logo {
    margin-right: auto !important;
  }
  .kst-nav > .kst-nav__hamburger {
    display: none !important;
  }
  /* Parent Book: vertical padding only — width follows content. */
  .kst-nav .kst-nav__link[href*="the-parent-book"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Eyebrow tracking restored to original now that bbox isn't the issue. */
  .kst-nav .kst-nav__link[href*="the-parent-book"]::before {
    letter-spacing: 0.22em !important;
    font-size: 0.5rem !important;
  }
  /* The WT badge legacy 16px left-margin (from when it lived in
     .kst-cta-group) was adding to the 24px flex gap. Strip it so
     gap reads as 24 exactly. */
  .kst-nav__links .wt-badge {
    margin: 0 !important;
  }
  .kst-nav__links a.contact-cta {
    margin: 0 !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v40 — CONTACT pill solid gold + WT roomier + PB legible
   Sam: Contact should stand out as the strongest CTA on a
   premium publication site. Switch from cream outline to
   solid gold fill, navy text, hover darkens. Bump padding
   inside both the CTA and WT badge so text breathes. Bump
   the PB eyebrow size + breathing room.
   ───────────────────────────────────────────────────────── */

/* ── Contact: solid gold with navy text, generous padding.
   Selectors bump to specificity ≥ (0,3,1) to beat the existing
   nav-underline rule that zeroes horizontal padding. */
.kst-nav .kst-nav__links a.contact-cta,
.kst-nav__links a.contact-cta,
.kst-header a.contact-cta,
header.site-header a.contact-cta,
header a[href*="contact"].cta,
.elementor-button[href*="contact"],
a.kst-contact-pill,
nav a[href$="contact.html"]:not(.menu-item a),
.kst-nav-cta a,
.kst-nav .kst-nav__links a[href*="contact"].kst-nav__cta {
  color: #1F2D4B !important;
  background: #C7A33C !important;
  border: 1px solid #C7A33C !important;
  padding: 0.625rem 1.625rem !important; /* ~10px 26px */
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}
.kst-nav a.contact-cta:hover,
.kst-nav__links a.contact-cta:hover,
.kst-header a.contact-cta:hover,
header.site-header a.contact-cta:hover,
header a[href*="contact"].cta:hover,
.elementor-button[href*="contact"]:hover,
a.kst-contact-pill:hover,
.kst-nav-cta a:hover {
  background: #B08A2C !important; /* gold-deep on hover */
  border-color: #B08A2C !important;
  color: #1F2D4B !important;
  transform: translateY(-1px) !important;
}

/* Same treatment for the .kst-nav__cta variant used in mobile panel +
   any legacy desktop occurrence. */
.kst-nav .kst-nav__cta,
.kst-nav-s .kst-nav-s__cta,
.kst-nav__mobile .kst-nav__cta {
  color: #1F2D4B !important;
  background: #C7A33C !important;
  border: 1px solid #C7A33C !important;
}
.kst-nav .kst-nav__cta:hover,
.kst-nav-s .kst-nav-s__cta:hover,
.kst-nav__mobile .kst-nav__cta:active {
  background: #B08A2C !important;
  color: #1F2D4B !important;
}

/* ── WT badge: roomier internal padding.
   Higher specificity to beat .kst-nav .kst-nav__links a:not([href*="the-parent-book"]) */
.kst-nav .kst-nav__links a.wt-badge,
.kst-nav .wt-badge,
.kst-nav-s .wt-badge,
.kst-nav__links a.wt-badge,
header.site-header .wt-badge,
.kst-footer .wt-badge {
  padding: 0.5rem 1rem 0.5rem 0.875rem !important; /* 8px 16px 8px 14px */
  gap: 9px !important;
}
.kst-nav .wt-badge .wt-badge__dots,
.kst-nav-s .wt-badge .wt-badge__dots,
.kst-nav__links .wt-badge .wt-badge__dots {
  gap: 7px !important;
  margin-right: 4px !important;
}

/* ── Parent Book eyebrow: more legible ── */
@media (min-width: 1201px) {
  .kst-nav .kst-nav__link[href*="the-parent-book"] {
    font-size: 1.2rem !important;
  }
  .kst-nav .kst-nav__link[href*="the-parent-book"]::before {
    font-size: 0.625rem !important; /* ~10px, was 8px */
    letter-spacing: 0.18em !important;
    margin-bottom: 7px !important; /* was 4px */
    opacity: 1 !important; /* was 0.85 — full opacity for legibility */
  }
}


/* ─────────────────────────────────────────────────────────
   v41 — mobile-only PB fleuron + WT 3-dot link
   New separate tappable items in the mobile header strip:
   • PB fleuron ❦ → /the-parent-book.html
   • WT 3-dot pill → https://wellbeing.tips
   Each is ≥44×44 to satisfy mobile UX touch standards.
   The burger button's ::before dots are turned off — they
   were never a real link, just decoration. The standalone
   WT link replaces them.
   ───────────────────────────────────────────────────────── */

/* Hide both on desktop. */
.kst-mobile-pb,
.kst-mobile-wt {
  display: none !important;
}

@media (max-width: 1200px) {
  /* Turn OFF the burger button's decorative ::before dots
     (replaced by the standalone WT link). */
  .kst-nav__hamburger::before {
    display: none !important;
    content: none !important;
  }
  .kst-nav__hamburger {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* PB wordmark link — "The Parent Book" italic Cormorant gold.
     Uses a smaller font on narrow viewports to keep the strip
     from overflowing alongside the logo + WT dots + burger. */
  .kst-mobile-pb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    color: #C7A33C !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    transition: color 200ms ease, transform 200ms ease !important;
  }
  .kst-mobile-pb em {
    font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: clamp(0.85rem, 3.4vw, 1.05rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: inherit !important;
    background-image: linear-gradient(rgba(199,163,60,0.55), rgba(199,163,60,0.55)) !important;
    background-position: 0 100% !important;
    background-size: 100% 1px !important;
    background-repeat: no-repeat !important;
    padding-bottom: 2px !important;
  }
  .kst-mobile-pb:hover em,
  .kst-mobile-pb:active em,
  .kst-mobile-pb:focus-visible em {
    color: #D4B14C !important;
    background-image: linear-gradient(rgba(199,163,60,1), rgba(199,163,60,1)) !important;
  }

  /* WT 3-dot link — three coloured circles, clickable pill */
  .kst-mobile-wt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 60px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    transition: transform 200ms ease !important;
  }
  .kst-mobile-wt__dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
  }
  .kst-mobile-wt__dot--clay { background: #C9A47E !important; }
  .kst-mobile-wt__dot--rose { background: #C99B97 !important; }
  .kst-mobile-wt__dot--sage { background: #9FB089 !important; }
  /* Match wellbeing.tips hover: staggered lift */
  .kst-mobile-wt:hover .kst-mobile-wt__dot--clay,
  .kst-mobile-wt:active .kst-mobile-wt__dot--clay {
    transform: translateY(-2px) !important;
    transition-delay: 0ms !important;
  }
  .kst-mobile-wt:hover .kst-mobile-wt__dot--rose,
  .kst-mobile-wt:active .kst-mobile-wt__dot--rose {
    transform: translateY(-2px) !important;
    transition-delay: 80ms !important;
  }
  .kst-mobile-wt:hover .kst-mobile-wt__dot--sage,
  .kst-mobile-wt:active .kst-mobile-wt__dot--sage {
    transform: translateY(-2px) !important;
    transition-delay: 160ms !important;
  }

  /* Push the right-side cluster (PB, WT, burger) to the right edge
     by letting the logo's auto-margin work. */
  .kst-nav > .kst-nav__logo {
    margin-right: auto !important;
  }
  .kst-nav {
    gap: 4px !important;
    align-items: center !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v43 — READ eyebrow on Parent Book (mobile + desktop)
   + KST logo visual lift
   ───────────────────────────────────────────────────────── */

/* v44 — Logo now an SVG: no alpha softening, clean strokes at any
   scale. The previous brightness/saturate/drop-shadow CSS filter
   was a workaround for the PNG's thin alpha-blended strokes and
   is no longer needed. */
.kst-nav__logo img.kst-nav__logo-img {
  filter: none !important;
}

/* Desktop: prepend "Read · " to the dynamic Volume eyebrow so the
   verb resolves the noun/verb ambiguity ("Parent Book" alone could
   read as "book a parent consult"). */
@media (min-width: 1201px) {
  .kst-nav .kst-nav__link[href*="the-parent-book"]::before {
    content: "Read · " var(--pb-volume, "Preview Edition · Summer 2026") !important;
  }
}

/* Mobile: add a READ eyebrow above the "Parent Book" wordmark.
   The wordmark is inside an <em> inside the anchor; the ::before
   pseudo on the anchor sits above as a block. The whole anchor
   stays the ≥44px touch target. */
@media (max-width: 1200px) {
  .kst-mobile-pb {
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1 !important;
  }
  .kst-mobile-pb::before {
    content: "READ" !important;
    display: block !important;
    font-family: 'Raleway', system-ui, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 0.5rem !important; /* ~8px */
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #C7A33C !important;
    opacity: 0.95 !important;
    line-height: 1 !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v44 — SVG logo + mobile mark-only swap (≤880px)
   At narrow viewports we show ONLY the gold-square+disc mark
   (Aesop / Liberty / Hermès pattern). This frees space for the
   full "The Parent Book" wordmark + READ eyebrow in the strip.
   ───────────────────────────────────────────────────────── */

/* Desktop: full lockup SVG, taller than the old PNG range.
   The clamp scales from 56px at small desktop to 84px at wide. */
@media (min-width: 1201px) {
  .kst-nav__logo img.kst-nav__logo-img,
  .kst-nav .kst-nav__logo img.kst-nav__logo-img {
    height: clamp(64px, 5.8vw, 84px) !important;
    max-height: 84px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ≤1100px (tablet + phone): the full lockup at slightly smaller scale */
@media (max-width: 1200px) {
  .kst-nav__logo img.kst-nav__logo-img,
  .kst-header .kst-nav__logo img.kst-nav__logo-img {
    height: 72px !important;
    max-height: 72px !important;
    width: auto !important;
  }
}

/* ≤880px (phone): the <picture> element swaps to kst-mark.svg via
   <source media>. We just need to size the rendered img correctly. */
@media (max-width: 880px) {
  .kst-nav__logo img.kst-nav__logo-img,
  .kst-header .kst-nav__logo img.kst-nav__logo-img {
    height: 64px !important;
    max-height: 64px !important;
    width: 64px !important;
    max-width: 64px !important;
  }
  .kst-nav__logo {
    flex-shrink: 0 !important;
  }
}

/* Restored "The Parent Book" — make a touch more space available
   for the PB wordmark + READ eyebrow now that logo is mark-only. */
@media (max-width: 880px) {
  .kst-mobile-pb em {
    font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v45 — simplify Parent Book in nav (option 1)
   Drop eyebrow + fleuron entirely. The PB link is now a simple
   inline italic Cormorant gold item that sits on the same
   baseline as the other nav items. All edition / volume / READ
   context lives ON the parent book landing page. Pattern: NYRB,
   Granta, The Atlantic — "Magazine" as a quiet utility link
   inside parent-brand nav.
   ───────────────────────────────────────────────────────── */

/* Kill eyebrow + fleuron across all surfaces */
.kst-nav .kst-nav__link[href*="the-parent-book"]::before,
.kst-nav .kst-nav__link[href*="the-parent-book"]::after,
.kst-nav-s .kst-nav-s__link[href*="the-parent-book"]::before,
.kst-nav-s .kst-nav-s__link[href*="the-parent-book"]::after,
.kst-nav__mobile a.kst-nav__link[href*="the-parent-book"]::before,
.kst-nav__mobile a.kst-nav__link[href*="the-parent-book"]::after,
.kst-nav__mobile a[href*="the-parent-book"]::before,
.kst-nav__mobile a[href*="the-parent-book"]::after,
header.site-header a[href*="the-parent-book"]:not(.kst-btn)::before,
header.site-header a[href*="the-parent-book"]:not(.kst-btn)::after {
  content: none !important;
  display: none !important;
}

/* Desktop nav — inline italic gold, same scale as other items */
@media (min-width: 1201px) {
  .kst-nav .kst-nav__link[href*="the-parent-book"] {
    display: inline !important;
    width: auto !important;
    text-align: left !important;
    font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    color: #C7A33C !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    padding: 0 !important;
  }
}

/* Mobile burger panel — same inline italic gold, calmer */
@media (max-width: 1200px) {
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"],
  .kst-nav__mobile a[href*="the-parent-book"] {
    display: block !important;
    text-align: center !important;
    width: auto !important;
    font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    color: #C7A33C !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(199, 163, 60, 0.18) !important;
    background: none !important;
  }
}

/* Mobile header strip indicator — drop READ eyebrow too,
   leave just the italic gold "The Parent Book" wordmark.
   (Edition context lives on the landing page.) */
@media (max-width: 1200px) {
  .kst-mobile-pb::before {
    content: none !important;
    display: none !important;
  }
  .kst-mobile-pb {
    flex-direction: row !important;
    align-items: center !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v46 — fix mobile logo warp (regression from v44)
   The SVGs are now declared with explicit width+height, AND
   we force object-fit:contain + aspect-ratio:auto on the img
   so the served SVG (lockup OR mark) always renders at its
   true natural aspect inside whatever bounding box CSS sets.
   ───────────────────────────────────────────────────────── */
.kst-nav__logo img.kst-nav__logo-img,
.kst-header .kst-nav__logo img.kst-nav__logo-img,
.kst-nav .kst-nav__logo img.kst-nav__logo-img {
  object-fit: contain !important;
  object-position: left center !important;
  aspect-ratio: auto !important;
  display: block !important;
}

/* ≤880px mark-only: square 1:1, fixed 64×64 — matches mark.svg natively */
@media (max-width: 880px) {
  .kst-nav__logo img.kst-nav__logo-img,
  .kst-header .kst-nav__logo img.kst-nav__logo-img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Tablet (881–1100px): full lockup at 72px height with auto width */
@media (min-width: 881px) and (max-width: 1200px) {
  .kst-nav__logo img.kst-nav__logo-img,
  .kst-header .kst-nav__logo img.kst-nav__logo-img {
    width: auto !important;
    max-width: none !important;
    height: 72px !important;
    max-height: 72px !important;
    aspect-ratio: 760 / 160 !important;
  }
}

/* Desktop (≥1101px): lockup clamps with auto width */
@media (min-width: 1201px) {
  .kst-nav__logo img.kst-nav__logo-img,
  .kst-nav .kst-nav__logo img.kst-nav__logo-img {
    width: auto !important;
    max-width: none !important;
    height: clamp(64px, 5.8vw, 84px) !important;
    aspect-ratio: 760 / 160 !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v47 — robust logo: separate mark + wordmark-text
   Replaces the brittle <picture>+srcset pattern. The mark is
   ALWAYS an <img src="kst-mark.svg"> with explicit 80x80
   dimensions. The wordmark "Kensington Square Therapy" is
   live HTML text in Cormorant Garamond gold — only shown
   on viewports >880px. On mobile the mark stands alone.
   ───────────────────────────────────────────────────────── */

/* Logo container: inline-flex row, mark + text vertically centred */
.kst-nav__logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

/* The mark itself — always shown, scales by breakpoint.
   Selector bumped to (0,2,1) so it beats base .kst-nav__logo img (0,1,1). */
.kst-nav__logo img.kst-nav__logo-mark,
.kst-nav .kst-nav__logo img.kst-nav__logo-mark {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  aspect-ratio: 1 / 1 !important;
}

/* Wordmark text — Cormorant Garamond gold, calm letter-spacing */
.kst-nav__logo-text {
  font-family: 'Cormorant Garamond', 'Cormorant', 'Times New Roman', serif !important;
  font-weight: 500 !important;
  font-size: 1.625rem !important; /* ~26px */
  color: #C7A33C !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* ≤880px — mark only, slightly smaller for the mobile strip */
@media (max-width: 880px) {
  .kst-nav__logo-text {
    display: none !important;
  }
  .kst-nav__logo img.kst-nav__logo-mark,
  .kst-nav .kst-nav__logo img.kst-nav__logo-mark {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }
}

/* Tablet (881–1100px) — full lockup at compact scale */
@media (min-width: 881px) and (max-width: 1200px) {
  .kst-nav__logo img.kst-nav__logo-mark,
  .kst-nav .kst-nav__logo img.kst-nav__logo-mark {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }
  .kst-nav__logo-text {
    font-size: 1.5rem !important; /* ~24px */
  }
}

/* Desktop — generous mark + wordmark */
@media (min-width: 1201px) {
  .kst-nav__logo img.kst-nav__logo-mark,
  .kst-nav .kst-nav__logo img.kst-nav__logo-mark {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }
  .kst-nav__logo-text {
    font-size: 1.875rem !important; /* ~30px */
  }
}

/* v47 — keep "The Parent Book" on a single line on mobile */
@media (max-width: 1200px) {
  .kst-mobile-pb em {
    white-space: nowrap !important;
  }
}
@media (max-width: 440px) {
  /* Very narrow phones — slightly smaller PB so it fits cleanly */
  .kst-mobile-pb em {
    font-size: 0.95rem !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v48 — KILL the legacy WP `content: url()` image swap that
   was replacing the actual mark.svg with the old stacked PNG
   at ≤991px. Plus bump mark to 68px on mobile (was 52px).
   ───────────────────────────────────────────────────────── */

/* Cancel the legacy content:url() swap on every breakpoint */
.kst-nav__logo img.kst-nav__logo-mark,
.kst-nav .kst-nav__logo img.kst-nav__logo-mark,
.kst-header .kst-nav__logo img.kst-nav__logo-mark {
  content: normal !important;
}

/* Mobile mark size: bump to 68px for proper presence */
@media (max-width: 880px) {
  .kst-nav__logo img.kst-nav__logo-mark,
  .kst-nav .kst-nav__logo img.kst-nav__logo-mark,
  .kst-header .kst-nav__logo img.kst-nav__logo-mark {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v49 — restore KST wordmark on mobile + hide PB from strip
   • The visible mobile header strip is now: [KST lockup] [WT dots] [☰]
   • The Parent Book lives only in the burger panel + at its URL
   • Wordmark sized so the full horizontal lockup fits ~180px
   ───────────────────────────────────────────────────────── */

/* Hide the standalone Parent Book strip indicator on every viewport */
.kst-mobile-pb {
  display: none !important;
}

/* Mobile (≤880px) — show the wordmark again, compact horizontal lockup */
@media (max-width: 880px) {
  .kst-nav__logo-text {
    display: inline-block !important;
    font-family: 'Cormorant Garamond', 'Cormorant', 'Times New Roman', serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important; /* ~14px */
    line-height: 1.05 !important;
    color: #C7A33C !important;
    letter-spacing: 0.2px !important;
    /* Wrap to two lines if needed — wordmark is allowed to stack */
    white-space: normal !important;
    max-width: 130px !important;
  }
  /* Tighten the gap between mark and wordmark on mobile */
  .kst-nav__logo {
    gap: 8px !important;
  }
  /* Mark slightly smaller to leave room for the wordmark */
  .kst-nav__logo img.kst-nav__logo-mark,
  .kst-nav .kst-nav__logo img.kst-nav__logo-mark,
  .kst-header .kst-nav__logo img.kst-nav__logo-mark {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }
}

/* Very narrow phones (≤380px) — drop wordmark font slightly so it still fits */
@media (max-width: 380px) {
  .kst-nav__logo-text {
    font-size: 0.8rem !important; /* ~13px */
    max-width: 110px !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v50 — three-line stacked wordmark on mobile
   "Kensington / Square / Therapy" — each on its own line,
   K · S · T flush-aligned on the left, total height ≈ mark
   height. Desktop keeps the horizontal one-line wordmark.
   Mirrors the canonical KST stacked lockup pattern used on
   the WordPress site at mobile sizes.
   ───────────────────────────────────────────────────────── */

/* By default each line span is inline (so desktop renders
   "Kensington Square Therapy" on one line) */
.kst-nav__logo-text__line {
  display: inline;
}
/* On desktop, restore a space between the words */
@media (min-width: 881px) {
  .kst-nav__logo-text__line + .kst-nav__logo-text__line::before {
    content: " ";
    white-space: pre;
  }
}

/* Mobile (≤880px): each word on its own line, left-aligned */
@media (max-width: 880px) {
  .kst-nav__logo-text {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    line-height: 1.05 !important;
    max-width: none !important;
    font-size: 1.0625rem !important; /* ~17px so 3 lines stack to ~56px */
    letter-spacing: 0.3px !important;
    white-space: normal !important;
  }
  .kst-nav__logo-text__line {
    display: block !important;
    line-height: 1.05 !important;
  }
}

/* iPhone-SE-ish (≤380px) — slightly tighter font so it still hugs the mark */
@media (max-width: 380px) {
  .kst-nav__logo-text {
    font-size: 0.95rem !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v51 — footer fixes
   1. Cookie Preferences button: kill the `font: inherit`
      shorthand which was resetting font-size to body size,
      making it 16px while siblings stayed at 10px.
   2. WT badge in footer: roomier internal padding so the
      label doesn't crowd the dots.
   3. Footer ecosystem block consistency — the CSS handles
      the cases where the markup IS present (HTML restructure
      added separately).
   ───────────────────────────────────────────────────────── */

/* Cookie withdraw — match the policy-link siblings exactly */
.kst-footer .kst-cookie-withdraw,
.kst-footer button.kst-cookie-withdraw,
.kst-footer .kst-footer__policy-link.kst-cookie-withdraw {
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  line-height: 1.5 !important;
  color: var(--kst-text-muted) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.kst-footer .kst-cookie-withdraw:hover {
  color: var(--kst-navy) !important;
}

/* WT badge in footer — generous padding so the dots breathe
   away from the label and the label has room on the right */
.kst-footer .wt-badge,
.kst-footer__ecosystem .wt-badge {
  padding: 0.5rem 1.125rem 0.5rem 1rem !important;
  gap: 10px !important;
  min-height: 36px !important;
  white-space: nowrap !important;
}
.kst-footer .wt-badge__dots,
.kst-footer__ecosystem .wt-badge__dots {
  gap: 7px !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}
.kst-footer .wt-badge__label,
.kst-footer__ecosystem .wt-badge__label {
  white-space: nowrap !important;
}

/* Footer ecosystem block layout — Parent Book + WT spaced evenly */
.kst-footer__ecosystem {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  margin: 0 auto 1.5rem !important;
  padding: 0 1rem !important;
}
.kst-footer__ecosystem-link {
  font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 1.05rem !important;
  color: #C7A33C !important;
  text-decoration: none !important;
  background-image: linear-gradient(rgba(199,163,60,0.55), rgba(199,163,60,0.55)) !important;
  background-position: 0 100% !important;
  background-size: 100% 1px !important;
  background-repeat: no-repeat !important;
  padding-bottom: 2px !important;
  transition: color 200ms ease !important;
}
.kst-footer__ecosystem-link:hover {
  color: #D4B14C !important;
  background-image: linear-gradient(rgba(199,163,60,1), rgba(199,163,60,1)) !important;
}


/* ─────────────────────────────────────────────────────────
   v52 — burger eyebrows + footer restructure + page fade
   ───────────────────────────────────────────────────────── */

/* ── BURGER MENU: section eyebrows ── */
@media (max-width: 1200px) {
  /* READING eyebrow before The Parent Book */
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"]::before,
  .kst-nav__mobile a[href*="the-parent-book"]::before {
    content: "READING" !important;
    display: block !important;
    font-family: 'Raleway', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: #C7A33C !important;
    opacity: 0.7 !important;
    margin-bottom: 10px !important;
    margin-top: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  /* ALSO BY KST eyebrow before WT/Contact group */
  .kst-nav__mobile .kst-cta-group {
    position: relative !important;
    padding-top: 18px !important;
  }
  .kst-nav__mobile .kst-cta-group::before {
    content: "ALSO BY KST" !important;
    display: block !important;
    font-family: 'Raleway', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: #C7A33C !important;
    opacity: 0.7 !important;
    margin-bottom: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Uniform rhythm: all panel items same vertical padding */
  .kst-nav__mobile .kst-nav__link {
    padding: 14px 0 !important;
  }
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"],
  .kst-nav__mobile a[href*="the-parent-book"] {
    border-top: 1px solid rgba(199, 163, 60, 0.18) !important;
    margin-top: 6px !important;
    padding-top: 18px !important;
  }
}

/* ── FOOTER: drop WT pill, use plain link grouping ── */
.kst-footer__ecosystem {
  position: relative !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin: 0 auto 1.5rem !important;
  padding-top: 28px !important;
}
.kst-footer__ecosystem::before {
  content: "ALSO BY KST" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--kst-text-muted) !important;
  opacity: 0.7 !important;
  white-space: nowrap !important;
}

/* Strip the WT pill chrome in footer — render as plain text link */
.kst-footer__ecosystem .wt-badge,
.kst-footer .wt-badge {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  gap: 0 !important;
  font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 1.05rem !important;
  color: #C7A33C !important;
  text-decoration: none !important;
  background-image: linear-gradient(rgba(199,163,60,0.55), rgba(199,163,60,0.55)) !important;
  background-position: 0 100% !important;
  background-size: 100% 1px !important;
  background-repeat: no-repeat !important;
  padding-bottom: 2px !important;
}
.kst-footer__ecosystem .wt-badge:hover,
.kst-footer .wt-badge:hover {
  color: #D4B14C !important;
  background-image: linear-gradient(rgba(199,163,60,1), rgba(199,163,60,1)) !important;
  transform: none !important;
  border: 0 !important;
}
/* Hide the dots inside the footer WT — only the label "wellbeing tips" stays */
.kst-footer__ecosystem .wt-badge .wt-badge__dots,
.kst-footer .wt-badge .wt-badge__dots {
  display: none !important;
}
.kst-footer__ecosystem .wt-badge .wt-badge__label,
.kst-footer .wt-badge .wt-badge__label {
  color: inherit !important;
  font: inherit !important;
  white-space: nowrap !important;
}

/* ── PAGE TRANSITIONS: 200ms fade on load ── */
@media (prefers-reduced-motion: no-preference) {
  .kst-site,
  body > main,
  body {
    animation: kst-page-fade-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes kst-page-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ─────────────────────────────────────────────────────────
   v53 — burger menu restructure
   • Drop "READING" eyebrow
   • New "ALSO BY KST" section groups The Parent Book + wellbeing tips
   • Quiet italic context line under the eyebrow
   • CONTACT pill is standalone at the bottom (no eyebrow above)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {

  /* Kill the old READING + ALSO BY KST eyebrows from the previous structure */
  .kst-nav__mobile a.kst-nav__link[href*="the-parent-book"]::before,
  .kst-nav__mobile a[href*="the-parent-book"]::before,
  .kst-nav__mobile .kst-cta-group::before {
    content: none !important;
    display: none !important;
  }

  /* The new ALSO BY KST container */
  .kst-nav__mobile-also {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-top: 22px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(199, 163, 60, 0.18) !important;
    position: relative !important;
  }
  .kst-nav__mobile-also::before {
    content: "ALSO BY KST" !important;
    display: block !important;
    font-family: 'Raleway', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: #C7A33C !important;
    opacity: 0.75 !important;
    text-align: center !important;
    margin-bottom: 4px !important;
    line-height: 1 !important;
  }
  /* Italic context line — real <p>, sits between eyebrow and items */
  .kst-nav__mobile-also__context {
    display: block !important;
    font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 0.8125rem !important;
    color: rgba(248, 248, 245, 0.55) !important;
    text-align: center !important;
    margin: 6px 0 16px !important;
    line-height: 1.35 !important;
  }
  .kst-nav__mobile-also__link {
    display: block !important;
    text-align: center !important;
    padding: 14px 0 !important;
    font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    color: #C7A33C !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(248, 248, 245, 0.06) !important;
    background: none !important;
  }
  .kst-nav__mobile-also__link:last-child {
    border-bottom: none !important;
  }
  .kst-nav__mobile-also__link:hover,
  .kst-nav__mobile-also__link:active {
    color: #D4B14C !important;
  }
  /* WT-badge variant inside the also-list: strip pill chrome, plain text */
  .kst-nav__mobile-also__link.wt-badge {
    background: none !important;
    border: 0 !important;
    padding: 14px 0 !important;
    gap: 0 !important;
    min-height: 0 !important;
  }
  .kst-nav__mobile-also__link.wt-badge .wt-badge__label {
    font: inherit !important;
    color: inherit !important;
  }

  /* CONTACT pill standalone at the very bottom — gold, full-width, no eyebrow */
  .kst-nav__mobile > a.contact-cta,
  .kst-nav__mobile > a.kst-nav__cta {
    display: block !important;
    width: 100% !important;
    margin-top: 24px !important;
    padding: 14px 24px !important;
    text-align: center !important;
    font-family: 'Raleway', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #1F2D4B !important;
    background: #C7A33C !important;
    border: 1px solid #C7A33C !important;
    border-radius: 999px !important;
    text-decoration: none !important;
  }
  .kst-nav__mobile > a.contact-cta:active {
    background: #B08A2C !important;
  }
}


/* v53b — WT badge inside burger panel: render as FULL pill
   (3 dots + italic Lora label), per Sam's brief. Override the
   plain-link treatment that the .kst-nav__mobile-also__link rules
   applied. */
@media (max-width: 1200px) {
  .kst-nav__mobile-also__link.wt-badge {
    display: inline-flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    background: transparent !important;
    border: 1px solid rgba(248, 248, 245, 0.22) !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
    font-style: normal !important; /* dots wrapper isn't italic */
  }
  .kst-nav__mobile-also__link.wt-badge .wt-badge__dots {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
  }
  .kst-nav__mobile-also__link.wt-badge .wt-badge__dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin: 0 !important;
  }
  .kst-nav__mobile-also__link.wt-badge .wt-badge__dot--clay { background: #C9A47E !important; }
  .kst-nav__mobile-also__link.wt-badge .wt-badge__dot--rose { background: #C99B97 !important; }
  .kst-nav__mobile-also__link.wt-badge .wt-badge__dot--sage { background: #9FB089 !important; }
  .kst-nav__mobile-also__link.wt-badge .wt-badge__label {
    font-family: 'Lora', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 0.9375rem !important; /* ~15px */
    color: #F4EFE5 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v54 — burger refinements + iPad breakpoint
   (a) Tighten gap above ALSO BY KST eyebrow
   (b) Add fleuron between SCHOOLS group and the eyebrow
   (c) More breath between context line and items
   ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {

  /* (a) Tighten the gap above ALSO BY KST — was 22px+22px = 44px,
     now 14px+12px = 26px (≈40% reduction). The fleuron sits in the
     gap as the section break, so the empty space can shrink. */
  .kst-nav__mobile-also {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: none !important; /* fleuron replaces the bare hairline */
  }

  /* (b) Fleuron between SCHOOLS and ALSO BY KST eyebrow.
     Inserted via ::before on the eyebrow's container, sized small
     and centred, italic gold-deep. */
  .kst-nav__mobile-also {
    position: relative !important;
  }
  .kst-nav__mobile-also > .kst-nav__mobile-also__fleuron,
  .kst-nav__mobile-also::before {
    /* Make the eyebrow appear AFTER the fleuron — we re-order content */
  }
  /* Render the fleuron as a separate inserted element via ::before */
  .kst-nav__mobile-also {
    padding-top: 36px !important; /* room for fleuron above eyebrow */
  }
  .kst-nav__mobile-also::before {
    content: "❦ \A ALSO BY KST" !important;
    white-space: pre !important;
    line-height: 1.6 !important;
    font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
    font-style: italic !important;
    /* The fleuron is in Cormorant italic; the "ALSO BY KST" line that
       follows the \A wants Raleway. Use a multi-line approach below. */
  }
  /* Override above approach — use TWO pseudo elements is cleaner.
     Reset ::before, then build properly. */
  .kst-nav__mobile-also::before {
    content: "❦" !important;
    white-space: normal !important;
    display: block !important;
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    color: rgba(199, 163, 60, 0.65) !important; /* gold-deep, slightly muted */
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    opacity: 1 !important;
    margin: 0 !important;
  }
  /* The "ALSO BY KST" eyebrow now needs its own visible block since
     ::before is taken by the fleuron. Apply it via the context paragraph's
     ::before instead. */
  .kst-nav__mobile-also__context::before {
    content: "ALSO BY KST" !important;
    display: block !important;
    font-family: 'Raleway', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: #C7A33C !important;
    opacity: 0.75 !important;
    margin-bottom: 10px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  /* (c) More breathing room between context line and items */
  .kst-nav__mobile-also__context {
    margin: 6px 0 22px !important; /* was 6px 0 16px → 22px bottom for more breath */
  }
}


/* ─────────────────────────────────────────────────────────
   v54d — desktop fit fix
   At narrower desktop widths (1201–1440) the wordmark+nav was
   pushing Contact off-screen. Clamp wordmark + nav gap by vw
   so the row contracts gracefully down to the burger breakpoint.
   ───────────────────────────────────────────────────────── */
@media (min-width: 1201px) {
  .kst-nav__logo-text {
    font-size: clamp(1.25rem, 1.6vw, 1.875rem) !important;
  }
  .kst-nav__logo img.kst-nav__logo-mark,
  .kst-nav .kst-nav__logo img.kst-nav__logo-mark {
    width: clamp(52px, 4.6vw, 68px) !important;
    height: clamp(52px, 4.6vw, 68px) !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }
  .kst-nav,
  .kst-header {
    gap: clamp(14px, 1.6vw, 24px) !important;
    padding-left: clamp(18px, 1.8vw, 32px) !important;
    padding-right: clamp(18px, 1.8vw, 32px) !important;
  }
  .kst-nav__links {
    gap: clamp(14px, 1.6vw, 24px) !important;
  }
}


/* ─────────────────────────────────────────────────────────
   v55 — "Currently in print" homepage strip
   Quiet editorial bridge from the KST hero to the current
   Parent Book volume. Dynamic volume label is set by the
   same kst-pivot.js logic that drives the header eyebrow.
   ───────────────────────────────────────────────────────── */
.kst-currently-in-print {
  /* v67e: bottom margin = 96px desktop / 40px mobile (set via media query
     below) so the box reads as a deliberate finished element with clear
     breathing room from the Explore Our Support button beneath. */
  margin: 28px 0 96px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(199, 163, 60, 0.32) !important;
  border-radius: 2px !important;
  max-width: 540px !important;
  background: rgba(199, 163, 60, 0.04) !important;
  position: relative !important;
}
/* v67e: tighten mobile bottom margin from desktop's 96px down to 40px
   per Sam's spec — keeps box deliberate without over-padding on small
   screens where vertical space is at a premium. */
@media (max-width: 768px) {
  .kst-currently-in-print {
    margin-bottom: 40px !important;
  }
}
.kst-currently-in-print__link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  line-height: 1.4 !important;
}
.kst-currently-in-print__eyebrow {
  display: block !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #C7A33C !important;
  margin-bottom: 6px !important;
}
.kst-currently-in-print__title {
  display: block !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: rgba(248, 248, 245, 0.92) !important;
  margin-bottom: 4px !important;
}
.kst-currently-in-print__title em {
  font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #C7A33C !important;
}
.kst-currently-in-print__volume {
  font-size: 0.875rem !important;
  color: rgba(248, 248, 245, 0.75) !important;
}
.kst-currently-in-print__cta {
  display: inline-block !important;
  margin-top: 4px !important;
  font-size: 0.8125rem !important;
  font-style: italic !important;
  font-family: 'Cormorant Garamond', serif !important;
  color: #C7A33C !important;
  transition: color 200ms ease, transform 200ms ease !important;
}
.kst-currently-in-print__link:hover .kst-currently-in-print__cta {
  color: #D4B14C !important;
  transform: translateX(2px) !important;
}


/* ─────────────────────────────────────────────────────────
   Phase E — hero illustration slot
   Pre-wired for the Midjourney "soft glowing organic forms on
   navy" image. Once /assets/illustrations/homepage-hero-shapes.png
   exists, the slot fills with it — feathered edges, no broken-image
   icon if missing. mix-blend-mode: lighten so the image's navy
   tones blend with the ground.
   ───────────────────────────────────────────────────────── */
.kst-hero {
  position: relative;
}
.kst-hero__illustration {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 55% !important;
  background-image: url('/assets/illustrations/homepage-hero-shapes-optimised.jpg');
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  mix-blend-mode: lighten !important;
  opacity: 0.70 !important;             /* v63: recede painted forms */
  pointer-events: none !important;
  z-index: 1 !important;
  /* Soft feather to dissolve into navy ground on all sides */
  -webkit-mask-image: radial-gradient(ellipse at center right, rgba(0,0,0,1) 40%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse at center right, rgba(0,0,0,1) 40%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
}
/* If the file doesn't exist, the broken-image is invisible because the
   element has no foreground content and the background-image just fails
   silently. No layout shift. */

@media (max-width: 1200px) {
  .kst-hero__illustration {
    width: 100% !important;
    opacity: 0.35 !important; /* very subtle behind heading on mobile */
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 75%);
            mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 75%);
  }
}

/* Make sure hero content (heading, sub, CTAs) sits above the illustration */
.kst-hero__content {
  position: relative !important;
  z-index: 2 !important;
}


/* ─────────────────────────────────────────────────────────
   Phase D — "How we work" 3-step process strip (homepage hero)
   Three numbered editorial blocks, italic Cormorant body,
   gold roman numerals, hairline rules between. Not flashy.
   ───────────────────────────────────────────────────────── */
.kst-how-we-work {
  margin: 36px 0 16px !important;
  max-width: 620px !important;
}
.kst-how-we-work__eyebrow {
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: #C7A33C !important;
  margin: 0 0 14px !important;
}
.kst-how-we-work__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.kst-how-we-work__step {
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  row-gap: 2px !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(199, 163, 60, 0.22) !important;
  align-items: start !important;
}
.kst-how-we-work__step:last-child {
  border-bottom: 1px solid rgba(199, 163, 60, 0.22) !important;
}
.kst-how-we-work__num {
  grid-row: 1 / span 2 !important;
  font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  color: #C7A33C !important;
  line-height: 1 !important;
  text-align: center !important;
  padding-top: 2px !important;
}
.kst-how-we-work__title {
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: rgba(248, 248, 245, 0.95) !important;
  line-height: 1.2 !important;
}
.kst-how-we-work__body {
  font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  color: rgba(248, 248, 245, 0.7) !important;
  line-height: 1.45 !important;
}

@media (max-width: 600px) {
  .kst-how-we-work__num {
    font-size: 1.25rem !important;
  }
  .kst-how-we-work__step {
    grid-template-columns: 28px 1fr !important;
    column-gap: 12px !important;
    padding: 14px 0 !important;
  }
}