/* ============================================================
     DESIGN TOKENS — single source of truth
     ============================================================ */
  :root {
    /* Color */
    --bg:           #fbf8f3;
    --bg-alt:       #f3ede2;
    --bg-warm:      #ebe2cf;
    --ink:          #1b2a26;
    --ink-soft:     #44574f;
    --muted:        #7a857f;
    --line:         #e2dccf;
    --brand:        #1f5046;
    --brand-deep:   #16352f;
    --brand-soft:   #d9e6df;
    --accent:       #c2693a;
    --accent-deep:  #a85529;
    --accent-soft:  #f2dccb;
    --gold:         #b88b3e;
    --white:        #ffffff;

    /* Shadow */
    --shadow-xs: 0 1px 2px rgba(22, 53, 47, 0.05);
    --shadow-sm: 0 2px 6px rgba(22, 53, 47, 0.06), 0 1px 2px rgba(22, 53, 47, 0.04);
    --shadow-md: 0 10px 30px rgba(22, 53, 47, 0.08), 0 2px 8px rgba(22, 53, 47, 0.04);
    --shadow-lg: 0 28px 70px rgba(22, 53, 47, 0.14), 0 8px 22px rgba(22, 53, 47, 0.06);

    /* Radius */
    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Layout */
    --maxw: 1240px;
    --gutter: clamp(20px, 4vw, 56px);

    /* Type */
    --font-sans:  'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-serif: 'Playfair Display', Georgia, "Times New Roman", serif;

    /* Vertical rhythm (single scale used everywhere) */
    --section-y:   clamp(56px, 6.5vw, 88px);  /* between major sections */
    --block-y:    clamp(40px, 5vw, 64px);     /* between blocks inside a section */
    --stack-md:    24px;                       /* between paragraphs/items */

    /* Sticky-header offset for #anchors */
    --header-h:    138px;
  }

  /* ============================================================
     RESET / BASE
     ============================================================ */
  *, *::before, *::after { box-sizing: border-box; }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  img, video, svg, iframe { display: block; max-width: 100%; }
  a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
  a:hover { color: var(--brand-deep); }
  button { font: inherit; cursor: pointer; }
  ul { list-style: none; padding: 0; margin: 0; }

  h1, h2, h3, h4, h5 {
    font-family: var(--font-serif);
    color: var(--ink);
    margin: 0 0 0.55em;
    letter-spacing: -0.012em;
    font-weight: 600;
  }
  h1 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.06; }
  h2 { font-size: clamp(1.85rem, 3vw, 2.55rem); line-height: 1.14; }
  h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.3; }
  h4 { font-size: 1.05rem; line-height: 1.35; }
  p  { margin: 0 0 1em; color: var(--ink-soft); }
  p:last-child { margin-bottom: 0; }

  /* ============================================================
     LAYOUT PRIMITIVES
     ============================================================ */
  .wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

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

  .section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--block-y);
  }
  .section-head .eyebrow { margin-bottom: 16px; }
  .section-head p {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    margin: 0 auto;
    max-width: 60ch;
  }

  /* ============================================================
     ICONS — default size, can be overridden by parent
     ============================================================ */
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    fill: currentColor;
  }
  /* ============================================================
     SHARED COMPONENTS
     ============================================================ */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--brand-soft);
    color: var(--brand-deep);
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.005em;
    transition: transform .18s ease, box-shadow .22s ease, background .2s ease, color .2s ease, border-color .2s ease;
    border: 1px solid transparent;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
  }
  .btn .icon { width: 16px; height: 16px; transition: transform .18s ease; }
  .btn:hover .icon-arrow { transform: translateX(4px); }
  .btn-primary {
    background: var(--brand);
    color: var(--white);
    box-shadow: var(--shadow-md);
  }
  .btn-primary:hover { background: var(--brand-deep); color: var(--white); transform: translateY(-1px); }
  .btn-accent { background: var(--accent); color: var(--white); box-shadow: var(--shadow-md); }
  .btn-accent:hover { background: var(--accent-deep); color: var(--white); transform: translateY(-1px); }
  .btn-ghost {
    background: transparent;
    color: var(--brand-deep);
    border-color: rgba(31,80,70,0.28);
  }
  .btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(217,230,223,0.45);
  }
  .btn-light {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
  }
  .btn-light:hover { background: rgba(255,255,255,0.2); color: #fff; }

  /* Button row — reliable spacing that survives mobile wrap */
  .btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
  }
  @media (max-width: 640px) {
    .btn-row {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .btn-row .btn { width: 100%; }
  }

  /* ============================================================
     TOP UTILITY BAR (slimmed)
     ============================================================ */
  .topbar {
    background: var(--brand-deep);
    color: #e9efe8;
    font-size: 0.82rem;
    padding-block: 8px;
  }
  .topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: center;
  }
  .topbar a {
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .topbar a:hover { color: var(--accent-soft); }
  .topbar a u { text-decoration: underline; text-underline-offset: 3px; }
  .topbar .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    flex-shrink: 0;
  }
  .topbar .icon { width: 13px; height: 13px; }

  /* ============================================================
     HEADER / NAV
     NOTE: padding-block (not padding shorthand) so it doesn't
     override .wrap's padding-inline.
     ============================================================ */
  header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251,248,243,0.96);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-block: 14px;          /* vertical only */
  }
  .logo { display: inline-flex; align-items: center; flex-shrink: 0; }
  .logo img { height: 42px; width: auto; }

  .nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
  }
  .nav-links a {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.95rem;
    padding-block: 8px;
    position: relative;
  }
  .nav-links a:hover { color: var(--brand); }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  .nav-links a:hover::after { transform: scaleX(1); }

  .nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .hamburger {
    display: none;
    background: transparent;
    border: 0;
    padding: 10px;
    border-radius: 8px;
    color: var(--ink);
  }
  .hamburger:hover { background: var(--brand-soft); }
  .hamburger .icon { width: 22px; height: 22px; }

  @media (max-width: 1024px) {
    .nav-links { display: none; }
    .nav-cta .btn-ghost { display: none; }
    .hamburger { display: inline-flex; }
    .nav-links.open {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      background: var(--bg);
      padding: 12px var(--gutter) 20px;
      border-bottom: 1px solid var(--line);
      box-shadow: var(--shadow-md);
    }
    .nav-links.open li { border-bottom: 1px solid var(--line); }
    .nav-links.open li:last-child { border-bottom: 0; }
    .nav-links.open a { display: block; padding: 16px 4px; font-size: 1rem; }
    .nav-links.open a::after { display: none; }
  }

  /* ============================================================
     HERO
     ============================================================ */
  .hero {
    padding-block: clamp(56px, 8vw, 96px) clamp(64px, 9vw, 104px);
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
      radial-gradient(60% 50% at 90% 10%, rgba(194,105,58,0.10), transparent 70%),
      radial-gradient(50% 60% at 10% 90%, rgba(31,80,70,0.08), transparent 70%);
    z-index: 0;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
    position: relative; z-index: 1;
  }
  .hero h1 .accent { font-style: italic; color: var(--accent); }
  .hero p.lede {
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    color: var(--ink-soft);
    margin: 22px 0 32px;
    max-width: 56ch;
  }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: clamp(32px, 4vw, 48px);
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid var(--line);
  }
  .hero-meta .stat .num {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.2vw, 2.05rem);
    color: var(--brand-deep);
    font-weight: 600;
    line-height: 1;
    display: block;
  }
  .hero-meta .stat .lbl {
    font-size: 0.76rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 8px;
    display: block;
  }
  .hero-visual {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 5;
    background: var(--bg-alt);
    transition: box-shadow .3s ease;
  }
  /* Floating mini-player: small, pinned to bottom-right of the viewport.
     Custom control bar fades in on hover; close is always visible. */
  .hero-visual.is-floating {
    position: fixed;
    right: 18px;
    bottom: 18px;
    left: auto;
    width: 160px;
    height: auto;
    aspect-ratio: 9 / 16;
    z-index: 90;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    border-radius: 12px;
    animation: heroFloatIn .35s ease-out;
  }
  @keyframes heroFloatIn {
    from { transform: translateY(20px) scale(0.92); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
  }
  /* Hide the browser's native video controls in the floating mini-player —
     we provide our own compact set. */
  .hero-visual.is-floating video::-webkit-media-controls,
  .hero-visual.is-floating video::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none !important;
  }
  /* When floating, hide the hero-badge (Tap for sound) — the mute button
     in the control bar replaces it. */
  .hero-visual.is-floating .hero-badge { display: none; }

  /* Always-visible close (X) button in the top-right of the mini-player */
  .hero-mini-close {
    position: absolute;
    top: 5px; right: 5px;
    z-index: 4;
    width: 22px; height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background .18s ease, transform .18s ease;
  }
  .hero-mini-close:hover { background: rgba(0, 0, 0, 0.9); transform: scale(1.08); }
  .hero-visual.is-floating .hero-mini-close { display: inline-flex; }

  /* Expand-to-modal icon — sits below the close button in the top-right */
  .hero-mini-expand-top {
    position: absolute;
    top: 32px; right: 5px;
    z-index: 4;
    width: 22px; height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background .18s ease, transform .18s ease;
  }
  .hero-mini-expand-top:hover { background: rgba(0, 0, 0, 0.9); transform: scale(1.08); }
  .hero-visual.is-floating .hero-mini-expand-top { display: inline-flex; }

  /* CTA pill anchored to the bottom of the mini-player. Always visible. */
  .hero-mini-cta {
    position: absolute;
    left: 6px; right: 6px; bottom: 6px;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--brand-deep, #1f5046);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: background .18s ease, transform .18s ease;
  }
  .hero-mini-cta:hover,
  .hero-mini-cta:focus { background: #12362f; color: #fff; transform: translateY(-1px); }
  .hero-mini-cta svg { flex-shrink: 0; }
  .hero-visual.is-floating .hero-mini-cta { display: inline-flex; }
  /* Always-visible mute pill in the top-left of the mini-player.
     Single subtle style — icon changes to indicate state, no colored bg
     variants (previous red/green looked shouty on mobile). */
  .hero-mini-mute-top {
    position: absolute;
    top: 5px; left: 5px;
    z-index: 4;
    width: 22px; height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background .18s ease, transform .18s ease;
  }
  .hero-mini-mute-top:hover { background: rgba(0, 0, 0, 0.9); transform: scale(1.08); }
  .hero-visual.is-floating .hero-mini-mute-top { display: inline-flex; }
  .hero-mini-mute-top svg { display: none; }
  .hero-mini-mute-top.is-muted   .i-muted   { display: block; }
  .hero-mini-mute-top.is-unmuted .i-unmuted { display: block; }
  /* On phones the floating player is only ~140px wide, so shrink the
     buttons and tighten their positions so mute + close don't feel crowded. */
  @media (max-width: 640px) {
    .hero-mini-mute-top,
    .hero-mini-close,
    .hero-mini-expand-top { width: 20px; height: 20px; }
    .hero-mini-mute-top,
    .hero-mini-close { top: 4px; }
    .hero-mini-mute-top { left: 4px; }
    .hero-mini-close { right: 4px; }
    .hero-mini-expand-top { top: 28px; right: 4px; }
  }
  /* Reopen pill — shown when the user has dismissed the floating video */
  .hero-mini-reopen {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-deep, #1f5046);
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    animation: heroFloatIn .3s ease-out;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .hero-mini-reopen:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32); }
  .hero-mini-reopen[hidden] { display: none; }

  /* Big-view video modal — opens when expand is clicked. Not fullscreen;
     a centered lightbox with backdrop so the viewer can scrub the video
     with native controls while still seeing the page around it. */
  .video-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    animation: videoModalIn .22s ease-out;
  }
  @keyframes videoModalIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .video-modal[hidden] { display: none; }
  .video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 18, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
  }
  .video-modal-box {
    position: relative;
    z-index: 2;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: videoModalPop .28s cubic-bezier(.2,.65,.2,1);
  }
  @keyframes videoModalPop {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
  }
  .video-modal-box video {
    display: block;
    max-height: 88vh;
    max-width: 100%;
    width: auto;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  }
  .video-modal-close {
    position: absolute;
    top: -14px; right: -14px;
    z-index: 3;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--ink);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    transition: transform .18s ease;
  }
  .video-modal-close:hover { transform: scale(1.08); }
  @media (max-width: 640px) {
    .video-modal { padding: 20px 12px; }
    .video-modal-close { top: -8px; right: -8px; width: 34px; height: 34px; }
  }
  @media (max-width: 640px) {
    .hero-visual.is-floating { width: 140px; right: 12px; bottom: 12px; }
    .hero-mini-reopen { right: 12px; bottom: 12px; padding: 8px 14px; font-size: 0.8rem; }
  }
  .hero-visual video, .hero-visual img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .hero-badge {
    position: absolute;
    left: 18px; top: 18px;
    background: rgba(255,255,255,0.95);
    padding: 9px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: var(--shadow-sm);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    max-width: calc(100% - 36px);
    pointer-events: none;
  }
  .hero-visual video { background: #000; }
  .hero-visual video::-webkit-media-controls-panel { background-color: rgba(0,0,0,0.4); }
  .pulse {
    width: 10px; height: 10px; border-radius: 50%; background: #2ea36c;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(46,163,108,0.6);
    animation: pulse 1.8s infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(46,163,108,0.5); }
    70% { box-shadow: 0 0 0 12px rgba(46,163,108,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,163,108,0); }
  }
  /* When the hero video is floating (pinned to viewport), it no longer
     occupies grid space — so the hero grid collapses to a single column
     so the text side can use the full width. */
  /* When the hero video is floating (out of flow), keep the text column
     from stretching edge-to-edge and wrapping awkwardly. Center the whole
     column and cap the reading measure so wide desktops don't leave a
     giant empty right side. */
  .hero-grid.hero-video-detached {
    grid-template-columns: 1fr;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .hero-grid.hero-video-detached h1 {
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-grid.hero-video-detached p.lede {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-grid.hero-video-detached .hero-ctas { justify-content: center; }
  .hero-grid.hero-video-detached .eyebrow { display: inline-flex; }
  /* Keep the stats row aligned to the centered content, not text-aligned */
  .hero-grid.hero-video-detached .hero-meta { text-align: left; }
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { aspect-ratio: 4 / 3; max-height: 540px; }
    .hero-meta { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 560px) {
    .hero-meta { grid-template-columns: 1fr 1fr; gap: 20px; }
    .hero-meta .stat:last-child { grid-column: 1 / -1; }
  }

  /* ============================================================
     AS SEEN ON  (dark-green press strip)
     ============================================================ */
  .as-seen {
    background: var(--brand-deep);
    color: #e6dccb;
    padding: 56px 0;
    border: none;
  }
  .as-seen .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  /* Centered "As featured on" with hairlines on each side */
  .as-seen-label {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(230, 220, 203, 0.7);
    font-weight: 700;
  }
  .as-seen-label .line {
    width: 44px;
    height: 1px;
    background: rgba(230, 220, 203, 0.28);
  }
  /* Logo row */
  .as-seen-logos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 56px;
    width: 100%;
    color: #f3ecdc;            /* warm cream for the logos */
  }
  .as-seen-logos li {
    display: flex;
    align-items: center;
    position: relative;
    opacity: 0.92;
    transition: opacity .2s ease, transform .2s ease;
  }
  .as-seen-logos li:hover { opacity: 1; transform: translateY(-1px); }
  .as-seen-logos svg,
  .as-seen-logos img {
    height: 38px;
    width: auto;
    max-width: 100%;
    display: block;
  }
  /* Raster press logos: render as clean white so they read on the dark green.
     If you want the original color logos instead, remove the filter line. */
  .as-seen-logos img {
    filter: brightness(0) invert(1);
    opacity: 0.92;
  }
  /* Per-logo tweaks so heavier / lighter marks look visually balanced */
  .as-seen-logos li:nth-child(1) img { height: 42px; }  /* 23andMe */
  .as-seen-logos li:nth-child(2) img { height: 40px; }  /* What Doctors */
  .as-seen-logos li:nth-child(3) img { height: 32px; }  /* HuffPost */
  .as-seen-logos li:nth-child(4) img { height: 34px; }  /* BGL */
  /* Thin vertical dividers between logos on desktop */
  @media (min-width: 760px) {
    .as-seen-logos li + li::before {
      content: "";
      position: absolute;
      left: -28px;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 30px;
      background: rgba(230, 220, 203, 0.18);
    }
  }
  @media (max-width: 760px) {
    .as-seen { padding: 42px 0; }
    .as-seen-logos { gap: 26px 40px; }
    .as-seen-logos svg { height: 28px; }
    .as-seen-logos li:nth-child(1) img { height: 32px; }
    .as-seen-logos li:nth-child(2) img { height: 30px; }
    .as-seen-logos li:nth-child(3) img { height: 24px; }
    .as-seen-logos li:nth-child(4) img { height: 26px; }
  }

  /* ============================================================
     MISSION (single-column, centered)
     ============================================================ */
  .mission {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
    text-align: center;
  }
  .mission-inner {
    max-width: 760px;
    margin: 0 auto;
  }
  .mission-inner h2 { margin-bottom: 20px; }
  .mission-inner p {
    font-size: clamp(1.02rem, 1.3vw, 1.12rem);
    max-width: 62ch;
    margin-inline: auto;
  }
  .mission-inner .check-list {
    max-width: 580px;
    margin: 32px auto;
    text-align: left;
  }
  .mission-divider {
    width: 60px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin: 0 auto 28px;
  }

  /* Generic two-col (still used in SHIELD section) */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
  }
  .img-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 5;
    background: var(--bg-alt);
  }
  .img-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .check-list {
    margin: var(--stack-md) 0 var(--block-y);
    display: grid;
    gap: 14px;
  }
  .check-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: var(--ink);
    font-weight: 500;
  }
  .check-icon {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
  }
  .check-icon .icon { width: 14px; height: 14px; }
  @media (max-width: 900px) {
    .two-col { grid-template-columns: 1fr; }
    .img-frame { aspect-ratio: 4 / 3; max-height: 520px; }
  }

  /* ============================================================
     SHIELD PROGRAM
     ============================================================ */
  .shield {
    background: var(--brand-deep);
    color: #e9efe8;
    position: relative;
    overflow: hidden;
  }
  .shield::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(50% 60% at 85% 15%, rgba(194,105,58,0.18), transparent 70%),
      radial-gradient(40% 50% at 10% 90%, rgba(184,139,62,0.10), transparent 70%);
    pointer-events: none;
  }
  .shield .wrap { position: relative; z-index: 1; }
  .shield h2, .shield h3, .shield h4 { color: #fff; }
  .shield p { color: #cdd6d2; }
  .shield .eyebrow { background: rgba(255,255,255,0.10); color: #f2dccb; }
  .shield .eyebrow .dot { background: var(--accent); }
  .shield-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0 0 var(--block-y);
  }
  @media (max-width: 1024px) { .shield-features { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px)  { .shield-features { grid-template-columns: 1fr; } }
  .shield-cta { text-align: center; }
  .shield .section-head h2,
  .shield .section-head p { color: inherit; }
  .shield .section-head h2 { color: #fff; }
  .shield .section-head p { color: #cdd6d2; }
  .feature {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius);
    padding: 22px;
    transition: background .2s ease, border-color .2s ease;
  }
  .feature:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
  }
  .feature .ic-wrap {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  }
  .feature .ic-wrap .icon { width: 20px; height: 20px; }
  .feature h4 {
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 6px;
  }
  .feature p { color: #b9c4be; font-size: 0.88rem; margin: 0; line-height: 1.55; }
  .shield .img-frame {
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  }
  @media (max-width: 900px) {
    .shield-features { grid-template-columns: 1fr; }
  }

  /* ============================================================
     DANE'S STORY — image is roughly 1:1 (before/after composite)
     ============================================================ */
  .story-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
  }
  .story-media { display: flex; flex-direction: column; gap: 16px; }
  .story-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 1 / 1;
    background: var(--bg-alt);
  }
  .story-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .story-credit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 10px;
    row-gap: 4px;
    font-size: 0.9rem;
    color: var(--ink);
    text-align: center;
    line-height: 1.5;
  }
  .story-credit .name {
    color: var(--accent-deep);
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .story-credit .role {
    color: var(--ink-soft);
    font-weight: 500;
  }
  .story-credit .sep { color: var(--muted); }

  blockquote.pull {
    margin: 0 0 var(--stack-md);
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    line-height: 1.45;
    color: var(--ink);
    font-weight: 500;
    border-left: 3px solid var(--accent);
    padding-left: 22px;
  }
  .principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: var(--block-y);
  }
  .principle {
    padding: 16px 20px;
    background: var(--bg-alt);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    color: var(--ink);
    font-size: 0.96rem;
  }
  .principle .n {
    font-family: var(--font-serif);
    color: var(--accent);
    font-size: 1.3rem;
    font-weight: 700;
  }
  @media (max-width: 900px) {
    .story-grid { grid-template-columns: 1fr; }
    .story-img { aspect-ratio: 1 / 1; max-width: 560px; margin: 0 auto; }
    .principles { grid-template-columns: 1fr; }
  }

  /* ============================================================
     BOOK / GUIDE
     ============================================================ */
  .book {
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .book-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
  }
  .book-cover {
    padding: clamp(16px, 3vw, 36px);
    display: flex;
    justify-content: center;
  }
  .book-cover img {
    max-width: 320px;
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 30px 60px rgba(22,53,47,0.25), -2px 0 0 0 rgba(0,0,0,0.05);
    transform: rotate(-3deg);
    transition: transform .35s ease;
  }
  .book-cover img:hover { transform: rotate(0) scale(1.03); }
  /* Container for the LeadConnector 6 Tips iframe. The embed iframe uses
     height:100% (per Asim's spec), so this wrapper needs a defined height
     for the form to render at a usable size. */
  .guide-embed {
    margin-top: 22px;
    width: 100%;
    min-height: 520px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
  }
  .book .tag {
    display: inline-block;
    padding: 5px 12px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
  }
  .book h2 .accent { color: var(--accent); font-style: italic; }
  @media (max-width: 900px) {
    .book-grid { grid-template-columns: 1fr; }
    .book-cover { padding: 0; }
  }

  /* ============================================================
     CLIENT STORIES (video-led)
     ============================================================ */
  .stories { background: var(--bg); }

  /* "Top 3" featured story row */
  .top-three-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-deep);
    font-weight: 700;
  }
  .top-three-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  .top-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: var(--block-y);
  }
  @media (max-width: 1024px) { .top-three { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px)  { .top-three { grid-template-columns: 1fr; } }

  /* Tabs */
  .stories-tabs {
    display: inline-flex;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 5px;
    margin-bottom: 36px;
    box-shadow: var(--shadow-xs);
  }
  .tab {
    border: 0;
    background: transparent;
    padding: 10px 22px;
    font: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink-soft);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .tab .count {
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-alt);
    color: var(--muted);
  }
  .tab.active {
    background: var(--brand);
    color: #fff;
  }
  .tab.active .count {
    background: rgba(255,255,255,0.18);
    color: #fff;
  }
  .tab:not(.active):hover { color: var(--brand); }
  .tabs-row {
    text-align: center;
  }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; animation: fadeIn .25s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  .video-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    isolation: isolate;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  }
  .video-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-soft);
  }
  .video-card .thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0d1f1b;
  }
  .video-card .thumb-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,31,27,0) 60%, rgba(13,31,27,0.35) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .video-card:hover .thumb-wrap::after { opacity: 1; }
  .video-card .thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
  }
  .video-card:hover .thumb { transform: scale(1.04); }
  .video-card .play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px; height: 68px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    z-index: 2;
    transition: transform .2s ease, background .2s ease;
  }
  .video-card .play-btn .icon { width: 24px; height: 24px; margin-left: 3px; }
  .video-card:hover .play-btn { transform: scale(1.08); background: #fff; }
  .video-card .meta {
    padding: 16px 18px 18px;
    background: var(--white);
    color: var(--ink);
  }
  .video-card .meta .name {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 4px;
    color: var(--ink);
  }
  .video-card .meta .who {
    font-size: 0.86rem;
    color: var(--muted);
    font-weight: 500;
  }
  .video-card iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    z-index: 3;
  }

  .video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
  }
  .video-grid .video-card.is-hidden { display: none; }
  .video-grid.show-all .video-card.is-hidden { display: flex; animation: fadeIn .25s ease; }

  .show-more-row {
    text-align: center;
    margin-bottom: var(--block-y);
  }
  .show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--white);
    color: var(--brand-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .15s ease;
  }
  .show-more-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-1px);
    background: var(--brand-soft);
  }
  .show-more-btn .icon {
    width: 14px;
    height: 14px;
    transition: transform .25s ease;
  }
  .show-more-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .video-grid .video-card { box-shadow: var(--shadow-md); }
  .video-grid .video-card .play-btn { width: 56px; height: 56px; }
  .video-grid .video-card .play-btn .icon { width: 22px; height: 22px; }
  .video-grid .video-card .meta { left: 16px; right: 16px; bottom: 14px; }
  .video-grid .video-card .meta .name { font-size: 1rem; }
  .video-grid .video-card .meta .who { font-size: 0.78rem; }
  @media (max-width: 1024px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px)  { .video-grid { grid-template-columns: 1fr; } }

  /* Written testimonials below videos */
  .quotes-divider {
    text-align: center;
    margin-bottom: var(--block-y);
  }
  .quotes-divider h3 {
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    color: var(--ink);
    margin: 0;
  }
  .quotes-divider p {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 8px auto 0;
    max-width: 50ch;
  }
  .test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .test {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: var(--shadow-xs);
  }
  .test:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-soft);
  }
  .test .stars {
    display: flex;
    gap: 3px;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .test .stars .icon { width: 16px; height: 16px; }
  .test blockquote {
    margin: 0 0 22px;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
  }
  .test .who {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .test .avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%;
    flex-shrink: 0;
    background: var(--bg-alt);
    border: 2px solid var(--brand-soft);
  }
  .test .who .name {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.25;
  }
  .test .who .meta {
    font-size: 0.83rem;
    color: var(--muted);
    margin-top: 3px;
  }
  @media (max-width: 1024px) { .test-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px)  { .test-grid { grid-template-columns: 1fr; } }

  .stories-cta { text-align: center; margin-top: var(--block-y); }

  /* ============================================================
     TEAM
     ============================================================ */
  .team { background: var(--bg-alt); }
  .team-intro {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
    margin-bottom: var(--block-y);
  }
  .team-photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 16 / 11;
  }
  .team-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .team-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: var(--stack-md) 0 var(--block-y);
  }
  .team-stat {
    padding: 18px 0;
    border-top: 2px solid var(--brand);
  }
  .team-stat .n {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--brand-deep);
    font-weight: 600;
    line-height: 1.1;
  }
  .team-stat .l {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-top: 6px;
    line-height: 1.4;
  }
  @media (max-width: 900px) {
    .team-intro { grid-template-columns: 1fr; }
    .team-photo { aspect-ratio: 4 / 3; }
  }
  @media (max-width: 480px) {
    .team-stat-row { grid-template-columns: 1fr; gap: 12px; }
  }

  /* Team carousel — horizontal scroll-snap strip with a progress bar
     and prev/next buttons in a separate row below (no photo overlap).
     Native swipe works on touch; buttons are keyboard/desktop friendly. */
  .team-carousel {
    position: relative;
  }
  .featured-team {
    display: flex;
    gap: clamp(20px, 2.5vw, 32px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* IE / Edge */
    padding: 8px 2px 16px;
    scroll-padding-inline: 2px;
    /* Soft edge fade on desktop only — on mobile it reads as a distracting
     blur on the sides of each team card as the user scrolls. */
  }
  @media (min-width: 900px) {
    .featured-team {
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
  }
  .featured-team::-webkit-scrollbar { display: none; }
  .featured-team > .member {
    flex: 0 0 calc((100% - (3 * clamp(20px, 2.5vw, 32px))) / 4);
    scroll-snap-align: start;
    min-width: 0;
  }
  .member { text-align: center; }
  .member .portrait {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 18px;
    background: var(--bg-warm);
    box-shadow: var(--shadow-md);
    border: 4px solid var(--white);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  a.member:hover .portrait { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.12)); }
  .member .portrait img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  .member h4 { font-size: 1.05rem; margin: 0 0 6px; color: var(--ink); }
  .member .role {
    font-size: 0.72rem;
    color: var(--accent-deep);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
  }
  .member p { font-size: 0.86rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }
  /* Non-clickable staff/support roles — no hover lift, no cursor change */
  .member.member-static { cursor: default; }
  .member.member-static:hover .portrait { transform: none; box-shadow: var(--shadow-md); }

  /* Controls row: slim progress track on the left, pill buttons on the right. */
  .carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding-inline: 4px;
  }
  .carousel-controls[hidden] { display: none; }
  .carousel-progress {
    flex: 1 1 auto;
    max-width: 260px;
    height: 3px;
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    overflow: hidden;
  }
  .carousel-progress .bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent-deep, var(--brand-deep));
    border-radius: 999px;
    transition: width .28s ease;
  }
  .carousel-buttons {
    display: inline-flex;
    gap: 10px;
    flex: 0 0 auto;
  }
  .carousel-arrow {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--ink);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .carousel-arrow:hover:not(:disabled) {
    background: var(--brand-deep);
    color: var(--white);
    border-color: var(--brand-deep);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  }
  .carousel-arrow:active:not(:disabled) { transform: scale(0.96); }
  .carousel-arrow:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
  .carousel-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  @media (max-width: 1024px) {
    .featured-team > .member {
      flex: 0 0 calc((100% - (2 * clamp(20px, 2.5vw, 32px))) / 3);
    }
  }
  @media (max-width: 640px) {
    .featured-team {
      gap: 20px;
    }
    /* Show the current card nearly full-width with just a small sliver
     of the next card peeking on the right — enough to signal "you can
     swipe for more" without cropping the current member's face. */
    .featured-team > .member { flex: 0 0 88%; }
    /* Progress bar stays useful on mobile too; hide buttons since swipe is native. */
    .carousel-buttons { display: none; }
    .carousel-progress { max-width: none; }
    .carousel-controls { justify-content: center; }
  }

  /* ============================================================
     PODCASTS
     ============================================================ */
  .podcasts { background: var(--bg); }

  /* Featured "Dane's own podcast" card */
  .featured-podcast {
    background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 44px);
    margin-bottom: var(--block-y);
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(28px, 4vw, 44px);
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .featured-podcast::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(60% 60% at 100% 0%, rgba(194,105,58,0.22), transparent 70%);
    pointer-events: none;
  }
  .featured-podcast .art {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--brand-deep);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
  }
  .featured-podcast .art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .featured-podcast .body { position: relative; z-index: 1; }
  .featured-podcast .label {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(255,255,255,0.14);
    color: var(--accent-soft);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
  }
  .featured-podcast h3 {
    color: #fff;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    margin: 0 0 12px;
    line-height: 1.15;
  }
  .featured-podcast p {
    color: #cdd6d2;
    margin: 0 0 22px;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 56ch;
  }
  .podcast-listen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .listen-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.18);
    transition: background .18s ease, transform .15s ease;
  }
  .listen-btn:hover {
    background: rgba(255,255,255,0.22);
    color: #fff;
    transform: translateY(-1px);
  }
  .listen-btn .icon { width: 18px; height: 18px; }
  @media (max-width: 720px) {
    .featured-podcast { grid-template-columns: 1fr; text-align: center; }
    .featured-podcast .art { max-width: 200px; margin: 0 auto; }
    .featured-podcast p { margin-inline: auto; }
    .podcast-listen { justify-content: center; }
  }

  .pod-grid-label {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-deep);
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .pod-grid-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  .pod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .pod {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ink);
  }
  .pod:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
  }
  .pod .play {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pod .play .icon { width: 14px; height: 14px; margin-left: 1px; }
  .pod:hover .play { background: var(--brand); color: #fff; }
  .pod .nm { font-weight: 600; line-height: 1.3; }
  .pod .nm span {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
    margin-top: 4px;
  }
  @media (max-width: 1024px) { .pod-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px)  { .pod-grid { grid-template-columns: 1fr; } }

  /* ============================================================
     FOOTER
     ============================================================ */
  footer.site {
    background: #0d1f1b;
    color: #b9c4be;
    padding: 70px 0 28px;
  }
  footer.site a { color: #e9efe8; transition: color .15s ease; }
  footer.site a:hover { color: var(--accent); }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: clamp(28px, 4vw, 48px);
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .foot-grid h5 {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 18px;
    font-weight: 700;
  }
  .foot-grid ul {
    display: grid;
    gap: 12px;
    font-size: 0.92rem;
  }
  .foot-brand .logo-wrap {
    display: inline-block;
    margin-bottom: 18px;
  }
  .foot-brand .logo-wrap img {
    height: 42px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  .foot-brand p {
    color: #b9c4be;
    font-size: 0.92rem;
    max-width: 340px;
    margin: 0;
  }
  .socials {
    display: flex;
    gap: 10px;
    margin-top: 22px;
  }
  .socials a {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s ease, transform .15s ease;
  }
  .socials a:hover { background: var(--accent); transform: translateY(-2px); }
  .socials .icon { width: 18px; height: 18px; }
  .disclaimer {
    margin-top: 32px;
    font-size: 0.78rem;
    color: #7d8a84;
    line-height: 1.65;
    max-width: 920px;
  }
  .disclaimer strong { color: #cdd6d2; }
  .copyright {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: #7d8a84;
  }
  .copyright a + a { margin-left: 12px; }

  /* Omne Studios attribution — sits inline with Privacy / Terms */
  .copyright-meta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .site-by {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: inherit;
    color: inherit;
    text-transform: none;       /* don't uppercase — would clip the SVG */
    letter-spacing: normal;
    font-weight: inherit;
    white-space: nowrap;
  }
  .site-by a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: opacity .18s ease;
    line-height: 1;
  }
  .site-by a:hover { opacity: 0.78; color: inherit; }
  /* margin reset from the .copyright a+a rule (logo isn't a regular link) */
  .copyright-meta .site-by + a { margin-left: 0; }
  .omne-logo {
    height: 23px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    text-transform: none;
  }
  .omne-logo text { text-transform: none; }
  .omne-logo .omne-word    { fill: #e6dccb; }
  .omne-logo .omne-italic  { fill: #b0a085; }
  @media (max-width: 600px) {
    .copyright-meta { gap: 12px; }
    .omne-logo { height: 20px; }
  }

  @media (max-width: 900px) {
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px) {
    .foot-grid { grid-template-columns: 1fr; }
  }

  /* ============================================================
     HOLISTIC / HEALTH VIBE LAYER
     - Soft scroll-reveal animations
     - Floating organic gradient orbs
     - Botanical leaf flourishes
     - Refined micro-interactions
     ============================================================ */

  /* Scroll-reveal motion — premium heavy easing */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(56px);
      transition:
        opacity 1.4s cubic-bezier(.16,.84,.3,1),
        transform 1.5s cubic-bezier(.16,.84,.3,1);
      will-change: opacity, transform;
    }
    .reveal.in-view {
      opacity: 1;
      transform: none;
    }
    /* Variant: scale + lift (cards) */
    .reveal-scale {
      opacity: 0;
      transform: translateY(60px) scale(0.94);
      transition:
        opacity 1.4s cubic-bezier(.16,.84,.3,1),
        transform 1.6s cubic-bezier(.16,.84,.3,1);
    }
    .reveal-scale.in-view { opacity: 1; transform: none; }
    /* Variant: blur + lift (images and headlines) */
    .reveal-blur {
      opacity: 0;
      transform: translateY(40px);
      filter: blur(14px);
      transition:
        opacity 1.5s cubic-bezier(.16,.84,.3,1),
        transform 1.5s cubic-bezier(.16,.84,.3,1),
        filter 1.6s cubic-bezier(.16,.84,.3,1);
    }
    .reveal-blur.in-view { opacity: 1; transform: none; filter: blur(0); }
    /* Variant: subtle rotation untwist (decorative cards) */
    .reveal-tilt {
      opacity: 0;
      transform: translateY(50px) rotate(-2deg);
      transition:
        opacity 1.4s cubic-bezier(.16,.84,.3,1),
        transform 1.6s cubic-bezier(.16,.84,.3,1);
    }
    .reveal-tilt.in-view { opacity: 1; transform: none; }
  }

  /* Floating organic background orbs — used on key sections */
  @keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(-30px, 40px, 0) scale(1.08); }
    66%      { transform: translate3d(35px, -25px, 0) scale(0.94); }
  }
  @keyframes drift-slow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50%      { transform: translate3d(20px, -30px, 0) scale(1.05) rotate(8deg); }
  }
  .orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
    opacity: 0.85;
    animation: drift 22s ease-in-out infinite;
    will-change: transform;
  }
  .orb-sage   { background: radial-gradient(circle, #b8d0b8 0%, transparent 70%); }
  .orb-clay   { background: radial-gradient(circle, #e8b894 0%, transparent 70%); }
  .orb-gold   { background: radial-gradient(circle, #d9b072 0%, transparent 70%); opacity: 0.6; }
  .orb-warm   { background: radial-gradient(circle, #d4886a 0%, transparent 70%); opacity: 0.5; }

  /* Hero — bigger, more visible */
  .hero { isolation: isolate; }
  .hero .orb-1 { width: 620px; height: 620px; top: -160px; right: -120px; }
  .hero .orb-2 { width: 520px; height: 520px; bottom: -160px; left: -120px; animation-duration: 28s; animation-delay: -8s; }

  /* Mission — bigger, more visible */
  .mission { position: relative; overflow: hidden; }
  .mission .orb-1 { width: 480px; height: 480px; top: 5%; left: -140px; opacity: 0.7; }
  .mission .orb-2 { width: 420px; height: 420px; bottom: -50px; right: -120px; animation-duration: 26s; animation-delay: -6s; opacity: 0.65; }

  /* Stories section — orbs */
  .stories { position: relative; overflow: hidden; isolation: isolate; }
  .stories .orb-1 { width: 540px; height: 540px; top: -120px; right: -180px; opacity: 0.55; animation-duration: 30s; }
  .stories .orb-2 { width: 420px; height: 420px; bottom: 10%; left: -160px; opacity: 0.45; animation-duration: 32s; animation-delay: -10s; }

  /* Team section — orbs */
  .team { position: relative; overflow: hidden; isolation: isolate; }
  .team .orb-1 { width: 500px; height: 500px; top: 20%; right: -180px; opacity: 0.55; animation-duration: 28s; }
  .team .orb-2 { width: 460px; height: 460px; bottom: -100px; left: -160px; opacity: 0.5; animation-duration: 34s; animation-delay: -12s; }

  /* Podcasts section — orbs */
  .podcasts { position: relative; overflow: hidden; isolation: isolate; }
  .podcasts .orb-1 { width: 580px; height: 580px; top: -100px; left: -200px; opacity: 0.5; animation-duration: 30s; }

  /* Book/guide section — orbs */
  .book { position: relative; overflow: hidden; isolation: isolate; }
  .book .orb-1 { width: 420px; height: 420px; top: -80px; right: -120px; opacity: 0.45; }

  /* Story (about) section — orbs */
  #story { position: relative; overflow: hidden; isolation: isolate; }
  #story .orb-1 { width: 480px; height: 480px; bottom: -120px; right: -140px; opacity: 0.5; animation-duration: 28s; }

  /* Ensure wrap content sits above orbs */
  .hero .wrap, .mission .wrap, .stories .wrap, .team .wrap,
  .podcasts .wrap, .book .wrap, #story .wrap {
    position: relative;
    z-index: 2;
  }

  /* Botanical leaf flourish — sits decoratively near key headings */
  .leaf-flourish {
    display: inline-block;
    color: var(--brand);
    opacity: 0.7;
    margin-bottom: 14px;
  }
  .leaf-flourish svg {
    width: 32px;
    height: 32px;
    animation: leaf-sway 6s ease-in-out infinite;
    transform-origin: bottom center;
  }
  @keyframes leaf-sway {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
  }

  /* Gentle pulse on primary CTAs (very subtle) */
  @keyframes soft-glow {
    0%, 100% { box-shadow: 0 10px 30px rgba(22,53,47,0.08), 0 2px 8px rgba(22,53,47,0.04); }
    50%      { box-shadow: 0 14px 38px rgba(31,80,70,0.18), 0 4px 14px rgba(22,53,47,0.08); }
  }
  .btn-primary { animation: soft-glow 4s ease-in-out infinite; }
  .btn-primary:hover { animation: none; }

  /* Refined card hovers — softer, more organic */
  .test, .video-card, .pod, .feature {
    transition:
      transform .4s cubic-bezier(.2,.65,.2,1),
      box-shadow .4s cubic-bezier(.2,.65,.2,1),
      border-color .3s ease,
      background .3s ease;
  }
  .video-card:hover {
    transform: translateY(-5px);
  }
  .test:hover {
    transform: translateY(-4px);
  }
  .pod:hover {
    transform: translateY(-3px);
  }

  /* Subtle scale on portrait hover */
  .member .portrait {
    transition: transform .5s cubic-bezier(.2,.65,.2,1), box-shadow .4s ease;
  }
  .member:hover .portrait {
    transform: scale(1.04) translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .member .portrait img {
    transition: transform .8s cubic-bezier(.2,.65,.2,1);
  }
  .member:hover .portrait img {
    transform: scale(1.06);
  }

  /* Smoother arrow icon glide */
  .btn:hover .icon-arrow { transform: translateX(5px); }

  /* Story credit decorative line */
  .story-credit::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: var(--accent);
    margin: 0 auto 14px;
    opacity: 0.6;
  }

  /* Slightly more natural section-head rhythm */
  .section-head .leaf-flourish { margin-bottom: 12px; }

  /* Soft pulse on hero badge pulse dot */
  .pulse {
    animation: pulse 1.8s infinite, soft-glow 4s infinite;
  }

  /* Featured podcast subtle motion */
  .featured-podcast {
    transition: transform .4s cubic-bezier(.2,.65,.2,1), box-shadow .4s ease;
  }
  .featured-podcast:hover {
    transform: translateY(-2px);
  }

  /* Refined eyebrow with subtle hover lift on parent */
  .eyebrow {
    transition: background .25s ease, color .25s ease;
  }

  /* Smoother top-three featured cards */
  .top-three .video-card .play-btn {
    transition: transform .3s cubic-bezier(.2,.65,.2,1), background .25s ease;
  }
  .top-three .video-card:hover .play-btn {
    transform: scale(1.1);
  }

  /* Decorative botanical accent on mission divider */
  .mission-divider {
    position: relative;
  }
  .mission-divider::before,
  .mission-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 1px;
    background: var(--accent);
    opacity: 0.5;
    transform: translateY(-50%);
  }
  .mission-divider::before { left: -32px; }
  .mission-divider::after  { right: -32px; }

  /* ============================================================
     PREMIUM MOTION LAYER (Tier 2)
     - Hero entry choreography
     - Editorial marquee band
     - Botanical line-drawing SVG
     - Image clip-path reveals
     - Count-up stat numbers
     - Magnetic CTA buttons
     ============================================================ */

  /* Hero entry choreography (runs on load) */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hero-rise {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes hero-rise-soft {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes mask-reveal {
      from { clip-path: inset(0 100% 0 0); }
      to   { clip-path: inset(0 0 0 0); }
    }
    .hero .eyebrow      { animation: hero-rise 0.9s cubic-bezier(.2,.65,.2,1) 0.05s both; }
    .hero h1            { animation: hero-rise 1s cubic-bezier(.2,.65,.2,1) 0.2s both; }
    .hero .lede         { animation: hero-rise-soft 0.9s cubic-bezier(.2,.65,.2,1) 0.45s both; }
    .hero .hero-ctas    { animation: hero-rise-soft 0.9s cubic-bezier(.2,.65,.2,1) 0.6s both; }
    .hero .hero-meta    { animation: hero-rise-soft 0.9s cubic-bezier(.2,.65,.2,1) 0.75s both; }
    .hero .hero-visual  { animation: hero-rise 1.1s cubic-bezier(.2,.65,.2,1) 0.35s both; }
    .hero .hero-badge   { animation: hero-rise-soft 0.7s cubic-bezier(.2,.65,.2,1) 1.1s both; }
  }

  /* Image clip-path reveal — Story image + Book cover */
  @media (prefers-reduced-motion: no-preference) {
    .clip-reveal {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.8s cubic-bezier(.7,0,.2,1);
      will-change: clip-path;
    }
    .clip-reveal.in-view { clip-path: inset(0 0 0 0); }
  }
  /* Reduced-motion: never hide the image */
  @media (prefers-reduced-motion: reduce) {
    .clip-reveal { clip-path: none !important; }
  }

  /* ============================================================
     MARQUEE / EDITORIAL TICKER
     ============================================================ */
  .marquee-band {
    background: var(--brand-deep);
    color: #fff;
    padding: 26px 0;
    overflow: hidden;
    position: relative;
    border-block: 1px solid rgba(255,255,255,0.06);
  }
  .marquee-band::before,
  .marquee-band::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
  }
  .marquee-band::before {
    left: 0;
    background: linear-gradient(to right, var(--brand-deep), transparent);
  }
  .marquee-band::after {
    right: 0;
    background: linear-gradient(to left, var(--brand-deep), transparent);
  }
  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 45s linear infinite;
    will-change: transform;
  }
  .marquee-band:hover .marquee-track {
    animation-play-state: paused;
  }
  .marquee-group {
    display: flex;
    align-items: center;
    gap: 56px;
    padding-right: 56px;
    flex-shrink: 0;
  }
  .marquee-group span {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .marquee-group em {
    font-style: italic;
    color: var(--accent-soft);
    font-weight: 500;
  }
  .marquee-group .mark {
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
  }
  .marquee-group .mark svg {
    width: 14px;
    height: 14px;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; transform: none; }
  }

  /* ============================================================
     BOTANICAL BRANCH (SVG line-drawing on scroll)
     ============================================================ */
  .branch-deco {
    position: absolute;
    pointer-events: none;
    color: var(--brand);
    opacity: 0.55;
    z-index: 1;
  }
  .branch-deco svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .branch-deco .branch-stem,
  .branch-deco .branch-leaf {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .branch-deco .branch-stem {
    stroke-width: 1.4;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
  }
  .branch-deco .branch-leaf {
    stroke-width: 1.3;
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    opacity: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .branch-deco.in-view .branch-stem {
      transition: stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1);
      stroke-dashoffset: 0;
    }
    .branch-deco.in-view .branch-leaf {
      transition: stroke-dashoffset 0.9s cubic-bezier(.4,0,.2,1), opacity 0.5s ease;
      stroke-dashoffset: 0;
      opacity: 1;
    }
    .branch-deco.in-view .branch-leaf:nth-of-type(1) { transition-delay: 0.6s, 0.6s; }
    .branch-deco.in-view .branch-leaf:nth-of-type(2) { transition-delay: 0.85s, 0.85s; }
    .branch-deco.in-view .branch-leaf:nth-of-type(3) { transition-delay: 1.1s, 1.1s; }
    .branch-deco.in-view .branch-leaf:nth-of-type(4) { transition-delay: 1.35s, 1.35s; }
    .branch-deco.in-view .branch-leaf:nth-of-type(5) { transition-delay: 1.6s, 1.6s; }
    .branch-deco.in-view .branch-leaf:nth-of-type(6) { transition-delay: 1.85s, 1.85s; }
  }
  /* Branch placements */
  .mission .branch-deco {
    width: 220px; height: 80px;
    top: 8%;
    right: 4%;
    transform: rotate(8deg);
  }
  .story-grid .branch-deco {
    width: 180px; height: 70px;
    top: -28px;
    left: -10px;
    transform: rotate(-12deg);
    opacity: 0.45;
  }
  @media (max-width: 900px) {
    .mission .branch-deco { display: none; }
    .story-grid .branch-deco { display: none; }
  }

  /* ============================================================
     COUNT-UP STAT NUMBERS
     ============================================================ */
  .hero-meta .num {
    font-variant-numeric: tabular-nums;
    min-width: 3ch;
  }

  /* ============================================================
     MAGNETIC PRIMARY CTAs
     ============================================================ */
  .btn-primary,
  .btn-accent {
    transition:
      transform .4s cubic-bezier(.2,.7,.2,1),
      box-shadow .35s ease,
      background .25s ease,
      color .25s ease;
  }
  .btn-primary[data-magnetic],
  .btn-accent[data-magnetic] {
    transition:
      transform .25s cubic-bezier(.2,.7,.2,1),
      box-shadow .35s ease,
      background .25s ease,
      color .25s ease;
  }

  /* ============================================================
     PARALLAX (subtle hero orbs follow scroll)
     ============================================================ */
  @media (prefers-reduced-motion: no-preference) {
    .hero .orb {
      transition: transform .15s linear;
      will-change: transform;
    }
  }

  /* Tighten hero-meta number animation for cleanness */
  .hero-meta .stat .num {
    display: block;
    line-height: 1;
  }

  /* Soft staggered fade-in for video cards already handled by .reveal */

  /* Editorial accent: drop-shadow glow on hero video on load */
  @media (prefers-reduced-motion: no-preference) {
    .hero-visual {
      transition: box-shadow 1.5s ease;
    }
  }

  /* Better text shadow for marquee on very light backgrounds (none — kept dark) */

  /* Hover glow on testimonial cards */
  .test:hover { border-color: var(--accent-soft); }

  /* ============================================================
     INNER-PAGE STYLES (Team / Testimonials / Program / etc.)
     ============================================================ */

  /* Page hero (used on all inner pages) */
  .page-hero {
    padding: clamp(70px, 9vw, 120px) 0 clamp(50px, 6vw, 80px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  }
  .page-hero .wrap { position: relative; z-index: 2; text-align: center; max-width: 880px; }
  .page-hero .orb-1 { width: 540px; height: 540px; top: -180px; left: -120px; opacity: 0.6; }
  .page-hero .orb-2 { width: 460px; height: 460px; bottom: -160px; right: -120px; opacity: 0.55; animation-delay: -10s; }
  .page-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    margin: 16px 0 18px;
  }
  .page-hero h1 .accent { color: var(--accent); font-style: italic; }
  .page-hero p.lede {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--ink-soft);
    max-width: 62ch;
    margin: 0 auto;
  }
  .page-hero .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .page-hero .breadcrumb a { color: var(--muted); }
  .page-hero .breadcrumb a:hover { color: var(--brand); }
  .page-hero .breadcrumb .sep { opacity: 0.4; }

  /* Filter pills row */
  .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 auto var(--block-y);
    max-width: 900px;
  }
  .filter-pill {
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .filter-pill .count {
    font-size: 0.78rem;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-alt);
    color: var(--muted);
  }
  .filter-pill:hover { color: var(--brand); border-color: var(--brand-soft); transform: translateY(-1px); }
  .filter-pill.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
  }
  .filter-pill.active .count {
    background: rgba(255,255,255,0.18);
    color: #fff;
  }

  /* Team page — full grid of all members */
  .team-page-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 3vw, 36px);
  }
  @media (max-width: 1024px) { .team-page-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 760px)  { .team-page-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px)  { .team-page-grid { grid-template-columns: 1fr; } }
  .team-page-grid .member { text-align: center; }
  .team-page-grid .member.is-hidden { display: none; }

  /* Testimonials page layout */
  .video-archive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  @media (max-width: 1024px) { .video-archive { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { .video-archive { grid-template-columns: 1fr; } }
  .video-archive .video-card.is-hidden { display: none; }
  .quote-archive {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: var(--block-y);
  }
  @media (max-width: 760px) { .quote-archive { grid-template-columns: 1fr; } }
  .quote-archive .test.is-hidden { display: none; }

  /* Program page — pillar cards */
  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: var(--block-y);
  }
  @media (max-width: 900px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .pillars-grid { grid-template-columns: 1fr; } }
  .pillar-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: transform .4s cubic-bezier(.2,.65,.2,1), box-shadow .4s ease, border-color .3s ease;
  }
  .pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-soft);
  }
  .pillar-card .pillar-num {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    color: var(--accent);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 14px;
    display: block;
  }
  .pillar-card h3 {
    font-size: 1.3rem;
    margin: 0 0 10px;
    color: var(--ink);
  }
  .pillar-card .pillar-sub {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-deep);
    font-weight: 700;
    margin-bottom: 14px;
    display: block;
  }
  .pillar-card p {
    font-size: 0.94rem;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
  }

  /* Program "What's included" list */
  .included-list {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 44px);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 32px;
  }
  @media (max-width: 760px) { .included-list { grid-template-columns: 1fr; } }
  .included-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.5;
  }
  .included-list .check-icon {
    flex-shrink: 0;
    margin-top: 1px;
  }
  .included-list strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 2px;
  }
  .included-list span {
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 400;
  }

  /* FAQ accordion */
  .faq-list {
    max-width: 820px;
    margin: 0 auto;
  }
  .faq-item {
    border-bottom: 1px solid var(--line);
  }
  .faq-item:first-child { border-top: 1px solid var(--line); }
  .faq-summary {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 24px 0;
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    transition: color .2s ease;
  }
  .faq-summary:hover { color: var(--brand); }
  .faq-summary .toggle {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s ease;
    font-size: 1.4rem;
    line-height: 1;
  }
  .faq-summary .toggle::before {
    content: "";
    width: 12px;
    height: 2px;
    background: currentColor;
    position: absolute;
  }
  .faq-summary .toggle::after {
    content: "";
    width: 2px;
    height: 12px;
    background: currentColor;
    position: absolute;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .faq-item[open] .faq-summary .toggle {
    background: var(--brand);
    color: #fff;
  }
  .faq-item[open] .faq-summary .toggle::after {
    transform: rotate(90deg);
  }
  .faq-body {
    padding: 0 0 28px;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 65ch;
  }
  .faq-body p { margin: 0 0 12px; }
  .faq-body p:last-child { margin-bottom: 0; }

  /* Section variants for inner pages */
  .section-light { background: var(--bg); }
  .section-cream { background: var(--bg-alt); }

  /* Program who-it's-for grid */
  .for-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  @media (max-width: 760px) { .for-grid { grid-template-columns: 1fr; } }
  .for-card {
    padding: 24px 26px;
    background: var(--white);
    border-radius: var(--radius);
    border-left: 3px solid var(--brand);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .for-card:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
  .for-card h4 { margin: 0 0 6px; font-size: 1.05rem; color: var(--ink); }
  .for-card p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }

  /* Scroll progress bar */
  .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--brand));
    z-index: 100;
    transition: width .12s linear;
    pointer-events: none;
  }

  /* ============================================================
     OVERRIDES — fix bouncy hovers + deeper background gradients
     (Appended last so they take precedence)
     ============================================================ */

  /* Darker, richer warm palette */
  :root {
    --bg:       #f1e6d0;
    --bg-alt:   #e6d6b6;
    --bg-warm:  #d4ba8b;
    --line:     #d8cdb5;
  }

  /* Body wears a soft top-to-bottom warm gradient */
  body {
    background:
      linear-gradient(180deg, #f4eada 0%, #ede0c2 60%, #e8d8b5 100%);
    background-attachment: fixed;
  }

  /* Section bg refresh — gradients instead of flat fills */
  .section-light,
  .stories,
  .podcasts {
    background: linear-gradient(180deg, #f0e5cf 0%, #e9dbbc 100%);
  }
  .section-cream {
    background: linear-gradient(180deg, #ebdebe 0%, #e2d0a8 100%);
  }
  .mission {
    background: linear-gradient(180deg, #f3e8d2 0%, #e8d8b5 100%);
  }
  .team {
    background: linear-gradient(180deg, #ecdcb9 0%, #e3d0a6 100%);
  }
  .book {
    background: linear-gradient(180deg, #ebdebe 0%, #d9c89e 100%);
  }
  .as-seen {
    background: var(--brand-deep);
    border: none;
  }
  .hero {
    background: linear-gradient(180deg, #f4eada 0%, #ede0c2 100%);
  }
  .page-hero {
    background: linear-gradient(180deg, #f4eada 0%, #e8d8b5 100%);
  }

  /* Richer orb colors so they stand out on the darker bg */
  .orb-sage   { background: radial-gradient(circle, #9ec19c 0%, transparent 70%); }
  .orb-clay   { background: radial-gradient(circle, #d99770 0%, transparent 70%); }
  .orb-gold   { background: radial-gradient(circle, #c8993b 0%, transparent 70%); opacity: 0.55; }
  .orb-warm   { background: radial-gradient(circle, #b96845 0%, transparent 70%); opacity: 0.48; }
  .orb {
    opacity: 0.7;
    filter: blur(85px);
  }

  /* Subtle decorative gradient at the top of every major section */
  .stories::before,
  .podcasts::before,
  .team::before,
  .book::before,
  .section-light::before,
  .section-cream::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(217,151,112,0.35) 30%, rgba(158,193,156,0.35) 70%, transparent 100%);
    pointer-events: none;
    z-index: 3;
  }

  /* ============================================================
     CLEAN HOVERS — single transform, no jitter
     ============================================================ */

  /* Cards: simple lift, no inner scaling */
  .video-card,
  .test,
  .pod,
  .feature,
  .pillar-card,
  .for-card,
  .member,
  .featured-podcast {
    transition:
      transform .35s ease-out,
      box-shadow .35s ease-out,
      border-color .25s ease,
      background .25s ease;
  }

  /* Video cards — single small lift, no inner transforms */
  .video-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-soft);
  }
  .video-card:hover .thumb { transform: none; }
  .video-card:hover .play-btn {
    transform: none;
    background: #fff;
  }
  .video-card .thumb,
  .video-card .play-btn {
    transition: background .25s ease;
  }
  .top-three .video-card:hover .play-btn { transform: none; }

  /* Testimonial cards — single small lift */
  .test:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--brand-soft);
  }

  /* Member portraits — no zoom on hover */
  .member:hover .portrait { transform: none; box-shadow: var(--shadow-md); }
  .member:hover .portrait img { transform: none; }
  .member .portrait,
  .member .portrait img {
    transition: none;
  }

  /* Podcast cards */
  .pod:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--brand); }

  /* Pillar cards (program page) */
  .pillar-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-soft); }

  /* For cards (program page) */
  .for-card:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }

  /* Featured podcast — no transform on hover, just lift shadow */
  .featured-podcast:hover { transform: none; box-shadow: 0 32px 80px rgba(22,53,47,0.2); }

  /* Remove pulsing animation from primary CTAs (was adding to "bouncy" feel) */
  .btn-primary { animation: none; }

  /* Buttons: subtler lift on hover */
  .btn-primary:hover,
  .btn-accent:hover {
    transform: translateY(-1px);
  }

  /* Disable the play-btn pulse animation override that was adding extra motion */
  .pulse {
    animation: pulse 1.8s infinite;
  }

  /* Smoother arrow on btn hover */
  .btn:hover .icon-arrow { transform: translateX(3px); }

  /* ============================================================
     ACTIVE NAV STATE (current-page indicator)
     ============================================================ */
  .nav-links a.active {
    color: var(--brand);
    font-weight: 600;
  }
  .nav-links a.active::after {
    transform: scaleX(1);
    background: var(--brand);
  }
  @media (max-width: 1024px) {
    .nav-links.open a.active {
      color: var(--brand);
      background: rgba(217, 230, 223, 0.4);
      border-radius: 8px;
      padding-left: 12px;
      padding-right: 12px;
    }
  }

  /* ============================================================
     PREVIEW CARD — used for homepage stories + podcasts teasers
     (elegant replacement when full content lives on an inner page)
     ============================================================ */
  .preview-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(36px, 4vw, 56px);
    box-shadow: var(--shadow-sm);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  .preview-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--brand));
  }

  .preview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 640px) { .preview-stats { grid-template-columns: 1fr; gap: 20px; } }
  .preview-stats .prev-n {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    color: var(--brand-deep);
    font-weight: 600;
    line-height: 1;
  }
  .preview-stats .prev-l {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-top: 10px;
  }

  .preview-quote {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.45;
    color: var(--ink);
    text-align: center;
    margin: 32px auto 0;
    max-width: 56ch;
    position: relative;
    padding: 0 24px;
    font-weight: 500;
  }
  .preview-quote::before,
  .preview-quote::after {
    font-size: 2rem;
    color: var(--accent);
    line-height: 0;
    position: relative;
  }
  .preview-quote::before { content: "\201C"; vertical-align: -0.3em; margin-right: 4px; }
  .preview-quote::after  { content: "\201D"; vertical-align: -0.3em; margin-left: 4px; }
  .preview-quote cite {
    display: block;
    margin-top: 18px;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-style: normal;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.03em;
  }

  .preview-cta {
    text-align: center;
    margin-top: 36px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* Podcast preview variant — smaller stats, art on left */
  .podcast-preview-card {
    background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(36px, 4vw, 56px);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
  }
  .podcast-preview-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(60% 60% at 100% 0%, rgba(194,105,58,0.25), transparent 70%);
    pointer-events: none;
  }
  .podcast-preview-card .art {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    position: relative;
    z-index: 1;
  }
  .podcast-preview-card .art img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .podcast-preview-card .body {
    position: relative;
    z-index: 1;
  }
  .podcast-preview-card h3 {
    color: #fff;
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    margin: 8px 0 14px;
    line-height: 1.15;
  }
  .podcast-preview-card p {
    color: #cdd6d2;
    margin: 0 0 24px;
    font-size: 0.98rem;
    line-height: 1.6;
  }
  .podcast-preview-card .label {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(255,255,255,0.14);
    color: var(--accent-soft);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0;
  }
  @media (max-width: 720px) {
    .podcast-preview-card { grid-template-columns: 1fr; text-align: center; }
    .podcast-preview-card .art { max-width: 200px; margin: 0 auto; }
  }

  /* ============================================================
     SMOOTH SCROLL REVEAL — final override
     Replaces all earlier reveal motion with a slick, minimal fade.
     No springy easing, smaller translation, faster cascade.
     ============================================================ */
  @media (prefers-reduced-motion: no-preference) {
    .reveal,
    .reveal-scale,
    .reveal-blur,
    .reveal-tilt {
      opacity: 0;
      transform: translateY(20px);
      filter: none;
      transition:
        opacity 0.7s cubic-bezier(.25,.46,.45,.94),
        transform 0.7s cubic-bezier(.25,.46,.45,.94);
      will-change: opacity, transform;
    }
    .reveal.in-view,
    .reveal-scale.in-view,
    .reveal-blur.in-view,
    .reveal-tilt.in-view {
      opacity: 1;
      transform: none;
      filter: none;
    }
  }

  /* ============================================================
     FINAL POLISH — small touches that make the site feel premium
     ============================================================ */

  /* Subtle page-fade-in on load (zero-flash for slow connections) */
  @media (prefers-reduced-motion: no-preference) {
    body { animation: page-fade 0.5s cubic-bezier(.25,.46,.45,.94) both; }
    @keyframes page-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
  }

  /* Accessibility focus rings (visible only for keyboard users) */
  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
  }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
  }

  /* Smoother text rendering everywhere */
  body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* Selection color uses brand */
  ::selection {
    background: rgba(31, 80, 70, 0.18);
    color: var(--ink);
  }

  /* Back-to-top button */
  .back-to-top {
    position: fixed;
    /* Default: sit near the bottom (used on pages WITHOUT the floating video).
       Height matches .floating-cta so the two align on the same baseline. */
    bottom: 28px; right: 28px;
    width: 42px; height: 42px;
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(22,53,47,0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition:
      opacity .4s ease,
      transform .4s cubic-bezier(.25,.46,.45,.94),
      background .2s ease;
    z-index: 60;
  }
  .back-to-top svg { width: 16px; height: 16px; }
  /* Homepage only: elevate to sit above the floating mini-player. */
  body.has-floating-video .back-to-top { bottom: 314px; }
  body.has-floating-video.mini-dismissed .back-to-top { bottom: 72px; }

  /* Persistent floating "Book a call" pill — auto-injected on pages that don't
     have the Dane mini-video, so the CTA is always reachable from any page. */
  .floating-cta {
    position: fixed;
    /* Same bottom + same height as .back-to-top so the two buttons sit on
       a shared baseline. Height is fixed and flex-centered instead of
       padding-driven, so font-size or line-height changes can't shift it. */
    bottom: 28px; right: 82px;                /* sits left of the back-to-top */
    height: 42px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    background: var(--brand-deep, #1f5046);
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(22, 53, 47, 0.32);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition:
      opacity .4s ease,
      transform .4s cubic-bezier(.25,.46,.45,.94),
      background .2s ease,
      box-shadow .2s ease;
  }
  .floating-cta.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .floating-cta:hover,
  .floating-cta:focus {
    background: #12362f;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(22, 53, 47, 0.38);
  }
  .floating-cta svg { flex-shrink: 0; }
  /* Only shown on pages WITHOUT the floating video; on the homepage the video's
     own CTA button serves the same purpose. */
  body.has-floating-video .floating-cta { display: none; }

  @media (max-width: 640px) {
    .back-to-top { right: 16px; width: 38px; height: 38px; }
    .back-to-top svg { width: 14px; height: 14px; }
    body.has-floating-video .back-to-top { bottom: 258px; }
    body.has-floating-video.mini-dismissed .back-to-top { bottom: 64px; }
    .floating-cta { right: 62px; height: 38px; padding: 0 16px; font-size: 0.78rem; }
  }
  .back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .back-to-top:hover { background: var(--brand-deep); transform: translateY(-2px); }
  .back-to-top svg {
    width: 18px; height: 18px;
    transform: rotate(-90deg);
  }
  @media (max-width: 640px) {
    .back-to-top { bottom: 18px; right: 18px; width: 44px; height: 44px; }
  }

  /* Smoother default link transition */
  a { transition: color .2s ease; }

  /* Better image rendering */
  img { image-rendering: auto; }

  /* Slightly larger tap targets on mobile */
  @media (max-width: 640px) {
    .btn { padding: 16px 26px; min-height: 48px; }
    .filter-pill { padding: 12px 18px; min-height: 44px; }
  }

  /* ============================================================
     STAT BLOCKS — icon + count-up number + animated progress bar
     ============================================================ */
  .preview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 640px) { .preview-stats { grid-template-columns: 1fr; gap: 28px; } }

  .stat-block {
    position: relative;
    padding: 8px 12px;
  }

  .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg-warm) 100%);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 14px rgba(22, 53, 47, 0.08);
    position: relative;
  }
  .stat-icon::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px dashed rgba(31, 80, 70, 0.18);
    animation: stat-icon-rotate 30s linear infinite;
  }
  .stat-icon svg {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 1;
  }
  @keyframes stat-icon-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .stat-icon::before { animation: none; }
  }

  .stat-block .prev-n {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 1;
    color: var(--brand-deep);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
    display: block;
    letter-spacing: -0.02em;
  }

  .stat-block .prev-l {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 16px;
  }

  /* Animated horizontal progress bar under each stat */
  .stat-bar {
    height: 4px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    max-width: 140px;
    margin: 0 auto;
    position: relative;
  }
  .stat-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 100%);
    border-radius: 999px;
    transition: width 1.6s cubic-bezier(.25,.46,.45,.94) 0.3s;
  }
  .stat-block.in-view .stat-bar span,
  .reveal.in-view .stat-bar span,
  .preview-card.in-view .stat-bar span {
    width: var(--w, 50%);
  }

  /* When a stat-block enters viewport via its own observer (or parent), bar fills */
  .stat-block .stat-icon {
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(.25,.46,.45,.94), opacity 0.8s cubic-bezier(.25,.46,.45,.94);
  }
  .stat-block.in-view .stat-icon,
  .preview-card.in-view .stat-icon {
    transform: scale(1);
    opacity: 1;
  }

  /* Stagger the three blocks slightly */
  .preview-card.in-view .stat-block:nth-child(1) .stat-icon { transition-delay: 0.05s; }
  .preview-card.in-view .stat-block:nth-child(2) .stat-icon { transition-delay: 0.15s; }
  .preview-card.in-view .stat-block:nth-child(3) .stat-icon { transition-delay: 0.25s; }
  .preview-card.in-view .stat-block:nth-child(1) .stat-bar span { transition-delay: 0.3s; }
  .preview-card.in-view .stat-block:nth-child(2) .stat-bar span { transition-delay: 0.5s; }
  .preview-card.in-view .stat-block:nth-child(3) .stat-bar span { transition-delay: 0.7s; }

  /* ============================================================
     SECTION BACKGROUND DIFFERENTIATION
     Alternating tones so adjacent sections read as distinct blocks
     ============================================================ */
  .stories {
    background: linear-gradient(180deg, #f4ead7 0%, #ecdcb4 100%);
  }
  .team {
    background: linear-gradient(180deg, #dae3c9 0%, #c5d1ad 100%);
    border-top: 1px solid rgba(31, 80, 70, 0.08);
    border-bottom: 1px solid rgba(31, 80, 70, 0.08);
  }
  .podcasts {
    background: linear-gradient(180deg, #efe3c4 0%, #e3d4a7 100%);
  }
  .book {
    background: linear-gradient(180deg, #ecd7ae 0%, #d4b97e 100%);
    border-top: 1px solid rgba(184, 139, 62, 0.18);
    border-bottom: 1px solid rgba(184, 139, 62, 0.18);
  }

  /* Adjust team-section orbs for the sage backdrop */
  .team .orb-1 { background: radial-gradient(circle, #b7c8a5 0%, transparent 70%); }
  .team .orb-2 { background: radial-gradient(circle, #d99770 0%, transparent 70%); opacity: 0.4; }

  /* Soft fade between sections for elegance */
  .stories + .team,
  .team + .podcasts {
    position: relative;
  }
  .stories + .team::before,
  .team + .podcasts::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(31, 80, 70, 0.25) 50%, transparent 100%);
    border-radius: 999px;
    z-index: 4;
  }

  /* ============================================================
     PAGE-HERO VARIANTS — each inner page has its own personality
     ============================================================ */

  /* ---------- TEAM (sage / forest — people of the earth) ---------- */
  .page-hero--team {
    background: linear-gradient(180deg, #e7ecd5 0%, #cdd9b5 100%);
  }
  .page-hero--team .orb-1 { background: radial-gradient(circle, #a6c298 0%, transparent 70%); opacity: 0.75; }
  .page-hero--team .orb-2 { background: radial-gradient(circle, #3d6a5c 0%, transparent 70%); opacity: 0.45; }
  .page-hero--team .breadcrumb,
  .page-hero--team .breadcrumb a { color: var(--brand-deep); }
  .team-deco-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
  }
  .team-deco-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0;
    animation: dots-rise 1.4s cubic-bezier(.25,.46,.45,.94) forwards;
  }
  .team-deco-dots span:nth-child(1) { animation-delay: 0.6s; background: #6a8e6a; }
  .team-deco-dots span:nth-child(2) { animation-delay: 0.7s; background: #4f7563; }
  .team-deco-dots span:nth-child(3) { animation-delay: 0.8s; background: var(--brand); transform-origin: center; }
  .team-deco-dots span:nth-child(3) { width: 14px; height: 14px; }
  .team-deco-dots span:nth-child(4) { animation-delay: 0.9s; background: #4f7563; }
  .team-deco-dots span:nth-child(5) { animation-delay: 1.0s; background: #6a8e6a; }
  @keyframes dots-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- STORIES (warm clay — voices and quotes) ---------- */
  .page-hero--stories {
    background: linear-gradient(180deg, #f3e0c8 0%, #e8c4a0 100%);
  }
  .page-hero--stories .orb-1 { background: radial-gradient(circle, #d9805a 0%, transparent 70%); opacity: 0.65; }
  .page-hero--stories .orb-2 { background: radial-gradient(circle, #c89b54 0%, transparent 70%); opacity: 0.6; }
  .page-hero--stories::before {
    content: "\201C";
    position: absolute;
    top: 8%;
    left: 6%;
    font-family: var(--font-serif);
    font-size: clamp(140px, 16vw, 220px);
    line-height: 1;
    color: var(--accent);
    opacity: 0.08;
    font-weight: 700;
    pointer-events: none;
    z-index: 1;
  }
  .page-hero--stories::after {
    content: "\201D";
    position: absolute;
    bottom: 8%;
    right: 6%;
    font-family: var(--font-serif);
    font-size: clamp(140px, 16vw, 220px);
    line-height: 1;
    color: var(--accent);
    opacity: 0.08;
    font-weight: 700;
    pointer-events: none;
    z-index: 1;
  }
  .stories-deco-names {
    margin-top: 28px;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(168, 85, 41, 0.18);
    border-bottom: 1px solid rgba(168, 85, 41, 0.18);
  }
  .stories-deco-names .track {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: names-marquee 40s linear infinite;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent-deep);
    font-size: 0.95rem;
    font-weight: 500;
  }
  .stories-deco-names .track span { white-space: nowrap; }
  .stories-deco-names .track .mark { color: var(--accent); opacity: 0.6; }
  @keyframes names-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .stories-deco-names .track { animation: none; }
  }

  /* ---------- PROGRAM (deep forest — clinical authority) ---------- */
  .page-hero--program {
    background: linear-gradient(180deg, #1f4a40 0%, #16352f 100%);
    color: #f3e8d2;
  }
  .page-hero--program .orb-1 { background: radial-gradient(circle, #d9b072 0%, transparent 70%); opacity: 0.5; }
  .page-hero--program .orb-2 { background: radial-gradient(circle, #c2693a 0%, transparent 70%); opacity: 0.4; }
  .page-hero--program h1 { color: #fff; }
  .page-hero--program h1 .accent { color: var(--accent-soft); }
  .page-hero--program p.lede { color: #d6dfdb; }
  .page-hero--program .breadcrumb,
  .page-hero--program .breadcrumb a { color: #b9c4be; }
  .page-hero--program .breadcrumb a:hover { color: var(--accent-soft); }
  .page-hero--program .eyebrow {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-soft);
  }
  .page-hero--program .eyebrow .dot { background: var(--accent); }
  /* SHIELD hero CTA — clay-orange fill against the dark green hero, no
     glow. Reads as the primary action without the halo effect. */
  .page-hero--program .hero-cta-row .btn-primary {
    background: #c2693a;
    color: #fff;
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: none;
    border: 2px solid transparent;
    transition: transform .18s ease, background .18s ease;
  }
  .page-hero--program .hero-cta-row .btn-primary:hover,
  .page-hero--program .hero-cta-row .btn-primary:focus {
    background: #a3552c;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: none;
  }
  .page-hero--program .hero-cta-row .btn-primary .icon-arrow { color: #fff; }
  .program-deco-pillars {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 36px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
  }
  .program-deco-pillars span {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: var(--accent-soft);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0;
    animation: pillar-fade 0.8s cubic-bezier(.25,.46,.45,.94) forwards;
  }
  .program-deco-pillars span:nth-child(1) { animation-delay: 0.5s; }
  .program-deco-pillars span:nth-child(2) { animation-delay: 0.65s; }
  .program-deco-pillars span:nth-child(3) { animation-delay: 0.8s; }
  .program-deco-pillars span:nth-child(4) { animation-delay: 0.95s; }
  .program-deco-pillars span:nth-child(5) { animation-delay: 1.1s; }
  .program-deco-pillars span:nth-child(6) { animation-delay: 1.25s; }
  .program-deco-pillars .num {
    color: var(--accent);
    margin-right: 8px;
    font-style: italic;
  }
  @keyframes pillar-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 0.9; transform: none; }
  }

  /* ---------- PODCASTS (warm gold — sonic warmth) ---------- */
  .page-hero--podcasts {
    background: linear-gradient(180deg, #f0dcb0 0%, #d9b87a 100%);
  }
  .page-hero--podcasts .orb-1 { background: radial-gradient(circle, #c89b54 0%, transparent 70%); opacity: 0.7; }
  .page-hero--podcasts .orb-2 { background: radial-gradient(circle, #b96845 0%, transparent 70%); opacity: 0.5; }
  .podcast-deco-wave {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 6px;
    height: 60px;
    margin-top: 32px;
    position: relative;
    z-index: 2;
  }
  .podcast-deco-wave span {
    width: 5px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--brand-deep) 100%);
    border-radius: 999px;
    animation: wave-bounce 1.4s ease-in-out infinite;
    transform-origin: bottom;
  }
  .podcast-deco-wave span:nth-child(1)  { height: 30%; animation-delay: 0.0s; }
  .podcast-deco-wave span:nth-child(2)  { height: 55%; animation-delay: 0.08s; }
  .podcast-deco-wave span:nth-child(3)  { height: 80%; animation-delay: 0.16s; }
  .podcast-deco-wave span:nth-child(4)  { height: 95%; animation-delay: 0.24s; }
  .podcast-deco-wave span:nth-child(5)  { height: 65%; animation-delay: 0.32s; }
  .podcast-deco-wave span:nth-child(6)  { height: 45%; animation-delay: 0.40s; }
  .podcast-deco-wave span:nth-child(7)  { height: 75%; animation-delay: 0.48s; }
  .podcast-deco-wave span:nth-child(8)  { height: 90%; animation-delay: 0.56s; }
  .podcast-deco-wave span:nth-child(9)  { height: 60%; animation-delay: 0.64s; }
  .podcast-deco-wave span:nth-child(10) { height: 40%; animation-delay: 0.72s; }
  .podcast-deco-wave span:nth-child(11) { height: 70%; animation-delay: 0.80s; }
  .podcast-deco-wave span:nth-child(12) { height: 50%; animation-delay: 0.88s; }
  .podcast-deco-wave span:nth-child(13) { height: 35%; animation-delay: 0.96s; }
  @keyframes wave-bounce {
    0%, 100% { transform: scaleY(0.5); }
    50%      { transform: scaleY(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .podcast-deco-wave span { animation: none; transform: scaleY(0.7); }
  }

  /* ============================================================
     ELEGANT BUTTON HOVERS — gradient transitions, no motion
     Buttons stay still; color/gradient slides smoothly inside
     ============================================================ */

  /* Primary button: forest base, on hover a brighter forest gradient sweeps left-to-right */
  .btn-primary {
    background: linear-gradient(120deg, var(--brand) 0%, var(--brand-deep) 50%, var(--brand) 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    transition:
      background-position 0.65s cubic-bezier(.25,.46,.45,.94),
      box-shadow 0.4s ease,
      color 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  .btn-primary:hover {
    background-position: 0% 0;
    box-shadow: 0 12px 30px rgba(22, 53, 47, 0.22);
    transform: none !important;
    color: #fff;
  }

  /* Accent button: terracotta base with deeper sweep */
  .btn-accent {
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 50%, var(--accent) 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    transition:
      background-position 0.65s cubic-bezier(.25,.46,.45,.94),
      box-shadow 0.4s ease,
      color 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  .btn-accent:hover {
    background-position: 0% 0;
    box-shadow: 0 12px 30px rgba(194, 105, 58, 0.28);
    transform: none !important;
    color: #fff;
  }

  /* Ghost button: subtle fill gradient on hover */
  .btn-ghost {
    transition:
      background 0.4s cubic-bezier(.25,.46,.45,.94),
      color 0.3s ease,
      border-color 0.3s ease;
  }
  .btn-ghost:hover {
    background: linear-gradient(120deg, rgba(217, 230, 223, 0.55) 0%, rgba(217, 230, 223, 0.85) 100%);
    border-color: var(--brand);
    color: var(--brand-deep);
    transform: none !important;
  }

  /* Light button (on dark backgrounds) */
  .btn-light:hover {
    background: linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.28) 100%);
    color: #fff;
    transform: none !important;
  }

  /* Arrow icon: gentle glide on hover (subtle, contained) */
  .btn .icon-arrow {
    transition: transform 0.35s cubic-bezier(.25,.46,.45,.94);
  }
  .btn:hover .icon-arrow { transform: translateX(4px); }

  /* Listen buttons (podcast featured card) — gradient sheen on hover */
  .listen-btn {
    background: rgba(255, 255, 255, 0.12);
    background-image: linear-gradient(120deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.12) 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    transition:
      background-position 0.6s cubic-bezier(.25,.46,.45,.94),
      border-color 0.3s ease;
  }
  .listen-btn:hover {
    background-position: 0% 0;
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    transform: none !important;
  }

  /* ============================================================
     EXTERNAL LINK PILL — clearly marks "you'll leave this site"
     ============================================================ */
  .external-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.88rem;
    border: 1px dashed rgba(31, 80, 70, 0.35);
    transition:
      background 0.3s cubic-bezier(.25,.46,.45,.94),
      color 0.25s ease,
      border-color 0.25s ease;
    line-height: 1.2;
    white-space: nowrap;
  }
  .external-link:hover {
    background: linear-gradient(120deg, rgba(217, 230, 223, 0.45) 0%, rgba(217, 230, 223, 0.7) 100%);
    color: var(--brand-deep);
    border-color: var(--brand);
    border-style: solid;
  }
  .external-link .external-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .external-link:hover .external-icon {
    transform: translate(2px, -2px);
  }
  /* Hide external link on smallest screens to save room */
  @media (max-width: 720px) {
    .nav-cta .external-link { display: none; }
  }

  /* Inline SVG external arrow as utility (used in <a> with class external-link) */
  .external-icon path { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

  /* ============================================================
     UNIQUE TYPOGRAPHIC TREATMENTS PER INNER PAGE
     Same family, distinct character.
     ============================================================ */

  /* ---------- TEAM — hand-drawn curve underline + italic accent ---------- */
  .page-hero--team h1 {
    position: relative;
  }
  .page-hero--team h1 .accent {
    position: relative;
    display: inline-block;
    font-style: italic;
    color: var(--brand-deep);
  }
  .page-hero--team h1 .accent::after {
    content: "";
    position: absolute;
    left: -4px; right: -4px;
    bottom: -8px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' fill='none' preserveAspectRatio='none'><path d='M3 9 Q 60 2, 120 6 T 237 4' stroke='%23c2693a' stroke-width='2.5' stroke-linecap='round' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: curve-draw 1.4s cubic-bezier(.25,.46,.45,.94) 0.6s forwards;
  }
  @keyframes curve-draw {
    from { opacity: 0; transform: scaleX(0); transform-origin: left center; }
    to   { opacity: 0.8; transform: scaleX(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-hero--team h1 .accent::after { opacity: 0.8; transform: none; animation: none; }
  }

  /* ---------- STORIES — huge gradient feature number ---------- */
  .page-hero--stories h1 {
    line-height: 1;
  }
  .page-hero--stories .hero-number {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(5rem, 11vw, 9rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 60%, #8c4123 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 4px;
  }
  .page-hero--stories .hero-rest {
    display: block;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.2;
  }
  .page-hero--stories .hero-rest .accent {
    color: var(--accent-deep);
    font-style: italic;
    font-weight: 600;
  }

  /* ---------- PROGRAM — editorial accent rule + italicized first word ---------- */
  .page-hero--program h1 {
    position: relative;
    padding-top: 24px;
  }
  .page-hero--program h1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
  }
  .page-hero--program h1 .lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    color: var(--accent-soft);
  }
  .page-hero--program h1 .accent {
    font-style: italic;
    background: linear-gradient(120deg, var(--accent-soft) 0%, #f6c89d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* ---------- PODCASTS — animated gradient shimmer on accent word ---------- */
  .page-hero--podcasts h1 .accent {
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 40%, #d97e4a 60%, var(--accent) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    animation: shimmer-flow 5s linear infinite;
  }
  .page-hero--podcasts h1 .opener {
    font-style: italic;
    color: var(--brand-deep);
    font-weight: 700;
  }
  @keyframes shimmer-flow {
    from { background-position: 0% center; }
    to   { background-position: -200% center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-hero--podcasts h1 .accent { animation: none; }
  }

  /* ---------- SECTION HEAD distinctions per page ---------- */
  /* Team — sage diamond bullet above section heads */
  .team .section-head .eyebrow,
  .page-hero--team ~ * .section-head .eyebrow {
    border: 1px solid rgba(31, 80, 70, 0.22);
    background: transparent;
  }

  /* Stories — italicize last word of section h2 */
  .page-hero--stories ~ * .section-head h2 em {
    font-style: italic;
    color: var(--accent-deep);
  }

  /* Program — numbered section eyebrow */
  .page-hero--program ~ * .section-head .eyebrow {
    background: rgba(31, 80, 70, 0.1);
    border: 1px solid rgba(31, 80, 70, 0.2);
  }

  /* Podcasts — gold-tinted section eyebrow */
  .page-hero--podcasts ~ * .section-head .eyebrow {
    background: rgba(200, 153, 59, 0.15);
    color: #8a6a26;
  }
  .page-hero--podcasts ~ * .section-head .eyebrow .dot {
    background: var(--gold);
  }

  /* ============================================================
     PREVENT HORIZONTAL OVERFLOW (orb containment + page lock)
     ============================================================ */

  /* Hard lock at the document level — no page can scroll horizontally */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Every section variant must contain its orbs */
  .section-light,
  .section-cream,
  .hero,
  section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  /* Footer too (safety net) */
  footer.site {
    overflow: hidden;
    position: relative;
  }

  /* Marquee already clips its own track but reinforce */
  .marquee-band {
    overflow: hidden;
    max-width: 100%;
  }

  /* Topbar safety */
  .topbar {
    overflow: hidden;
  }

  /* ============================================================
     STORY ("When Nothing Else Worked") — distinct from Mission
     Deeper, warmer clay tone — grounded, intimate, Dane's story
     ============================================================ */
  #story {
    background: linear-gradient(180deg, #e6cfa6 0%, #d4b482 100%);
    border-top: 1px solid rgba(168, 85, 41, 0.15);
    border-bottom: 1px solid rgba(168, 85, 41, 0.15);
  }
  /* Subtle clay/terracotta orbs on Dane's story section */
  #story .orb-1 {
    background: radial-gradient(circle, #b96845 0%, transparent 70%);
    opacity: 0.55;
  }

  /* Mission stays lighter — increase contrast vs story below it */
  .mission {
    background: linear-gradient(180deg, #f4ebd5 0%, #ecdcb4 100%);
  }

  /* Soft seam between Mission → Story so the eye reads them as separate blocks */
  .mission + #story::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(168, 85, 41, 0.4) 50%, transparent 100%);
    border-radius: 999px;
    z-index: 4;
  }

  /* ============================================================
     FULL TESTIMONIAL ARCHIVE — compact directory of all members
     ============================================================ */
  .archive {
    background: linear-gradient(180deg, #f0e3c4 0%, #e3d4a7 100%);
    position: relative;
    overflow: hidden;
  }
  .archive-intro {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--block-y);
  }
  /* Trustpilot review link — small green pill under the archive intro copy */
  .trustpilot-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 16px;
    background: rgba(0, 182, 122, 0.08);
    color: var(--ink);
    border: 1px solid rgba(0, 182, 122, 0.28);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .trustpilot-link:hover {
    background: rgba(0, 182, 122, 0.14);
    border-color: rgba(0, 182, 122, 0.5);
    transform: translateY(-1px);
  }
  .trustpilot-link .ext-arrow { opacity: 0.55; }
  .archive-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  @media (max-width: 1024px) { .archive-list { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { .archive-list { grid-template-columns: 1fr; } }

  .archive-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    line-height: 1.3;
  }
  .archive-list li:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--brand-soft);
  }
  .archive-list li.is-hidden { display: none; }

  .archive-list .archive-name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
  }
  .archive-list .archive-cond {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
  }

  /* Items with video link get accent treatment */
  .archive-list li.has-video {
    border-left: 3px solid var(--accent);
  }
  .archive-list li.has-video a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: inherit;
    text-decoration: none;
    gap: 12px;
  }
  .archive-list li.has-video .archive-name::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 7px solid var(--accent);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-right: 8px;
    vertical-align: 1px;
  }
  .archive-list li.has-video:hover .archive-name { color: var(--brand-deep); }

  /* Country label (if shown) */
  .archive-list .archive-region {
    font-size: 0.7rem;
    color: var(--accent-deep);
    font-weight: 600;
    margin-left: 6px;
  }

  /* ============================================================
     ARCHIVE PAGINATION
     ============================================================ */
  .archive-list li.is-paginated-hidden { display: none; }

  .archive-pager {
    margin-top: 28px;
    text-align: center;
  }
  .archive-pager .pager-status {
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  .archive-pager .pager-status strong {
    color: var(--brand-deep);
    font-weight: 700;
  }

  /* Mark entries that have a full written quote available above */
  .archive-list li.has-quote {
    border-left: 3px solid var(--brand);
  }
  .archive-list li.has-quote::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    margin-left: auto;
    margin-right: 8px;
    opacity: 0.6;
  }
  .archive-list li.has-quote .quote-jump {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--brand);
    font-weight: 700;
    margin-left: 8px;
  }

  /* ============================================================
     ARCHIVE CARD WITH BLURB — two-line layout
     ============================================================ */
  .archive-list li.has-video a {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 4px 0;
  }
  .archive-list .archive-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .archive-list .archive-blurb {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-weight: 400;
    font-style: italic;
    margin-top: 2px;
    display: block;
  }
  .archive-list li.has-video {
    padding: 16px 18px 18px;
  }
  .archive-list li.has-video:hover .archive-blurb {
    color: var(--ink);
  }
  .archive-list li.has-video:hover {
    border-left-width: 4px;
  }

  /* Video cards with an injected thumbnail (via testimonials.html script).
     Full-width 16:9 thumbnail on top, then name/condition + blurb below.
     Keeps the archive editorial and consistent — every video card has a
     visual preview (real video image if we have one, subtle branded
     placeholder if the link only goes to a YouTube search). */
  .archive-list li.has-video.has-thumb {
    padding: 0; /* thumbnail owns the top edge */
  }
  .archive-list li.has-video.has-thumb > a {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .archive-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }
  .archive-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .45s ease;
  }
  .archive-list li.has-video.has-thumb:hover .archive-thumb img { transform: scale(1.04); }
  /* Subtle gradient scrim so the play button has contrast on any still frame */
  .archive-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .archive-list li.has-video.has-thumb:hover .archive-thumb::after { opacity: 0.6; }
  .archive-thumb-play {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.96);
    color: var(--brand-deep, #1f5046);
    border-radius: 50%;
    padding-left: 3px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.30);
    transition: transform .2s ease, background .2s ease;
  }
  .archive-list li.has-video.has-thumb:hover .archive-thumb-play {
    transform: translate(-50%, -50%) scale(1.06);
    background: #fff;
  }
  /* Branded placeholder for cards that link to YouTube search (no video ID).
     Soft brand-tinted gradient panel so it still reads as "video content"
     without pretending to have a real preview image. */
  .archive-thumb.is-placeholder {
    background: linear-gradient(135deg, var(--brand-deep, #1f5046) 0%, #3a6b60 60%, #7d9a72 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
  }
  .archive-thumb.is-placeholder::after { display: none; }
  .archive-thumb-label {
    position: relative; z-index: 2;
    color: rgba(255,255,255,0.85);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  /* Real-image fallback tile — CCL team photo darkened so the play button
     and label stay legible on top. Used when a video match can't be found. */
  .archive-thumb.archive-thumb-fallback::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 100%);
    opacity: 1;
  }
  .archive-thumb.archive-thumb-fallback .archive-thumb-label {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255,255,255,0.95);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
  /* Text region below the thumbnail — keep the same rhythm as text-only cards */
  .archive-list li.has-video.has-thumb > a > .archive-head,
  .archive-list li.has-video.has-thumb > a > .archive-blurb {
    padding-inline: 18px;
  }
  .archive-list li.has-video.has-thumb > a > .archive-head { padding-top: 16px; }
  .archive-list li.has-video.has-thumb > a > .archive-blurb { padding-bottom: 18px; }
  @media (max-width: 480px) {
    .archive-thumb-play { width: 44px; height: 44px; }
  }

  /* ============================================================
     ANCHOR SCROLL OFFSET — keeps target sections clear of the sticky header
     ============================================================ */
  html {
    scroll-padding-top: clamp(100px, 13vh, 150px);
  }

  /* Extra-defensive offset on the free-guide section (index.html #guide) */
  #guide,
  .book {
    scroll-margin-top: clamp(100px, 13vh, 150px);
  }

  /* Same for the other key anchor targets users land on */
  #story,
  #program,
  #stories,
  #team,
  #podcasts {
    scroll-margin-top: clamp(90px, 12vh, 140px);
  }

  /* ============================================================
     MOBILE NAV FIX — hide primary CTA below 640px so hamburger
     stays in view; menu opens with the CTA inside
     ============================================================ */
  @media (max-width: 640px) {
    .nav-cta .btn-primary { display: none; }
    /* Give the hamburger more room */
    .nav { gap: 16px; }
    .logo img { height: 38px; }
  }

  /* Mobile CTA inside the open hamburger menu */
  .nav-mobile-cta { display: none; }
  @media (max-width: 1024px) {
    .nav-links.open .nav-mobile-cta {
      display: block;
      border-top: 1px solid var(--line);
      padding: 18px 4px 8px;
      margin-top: 8px;
    }
    .nav-links.open .nav-mobile-cta a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--brand);
      color: #fff !important;
      padding: 16px 22px;
      border-radius: var(--radius-pill);
      font-weight: 600;
      box-shadow: var(--shadow-md);
    }
    .nav-links.open .nav-mobile-cta a::after { display: none; }
  }

  /* ============================================================
     HERO BADGE — clickable sound toggle
     ============================================================ */
  .hero-badge {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    border: 0;
    font-family: inherit;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  }
  .hero-badge:hover {
    background: #fff;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  .hero-badge:active {
    transform: translateY(0);
  }
  .hero-badge.is-unmuted {
    background: var(--brand);
    color: #fff;
  }
  .hero-badge.is-unmuted .pulse {
    background: #ffd47a;
    box-shadow: 0 0 0 0 rgba(255, 212, 122, 0.6);
  }
  .hero-badge.is-unmuted:hover {
    background: var(--brand-deep);
  }

  /* ============================================================
     BLOG — index card grid + filter pills + body article styles
     ============================================================ */
  .blog-filters {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0 0 36px;
  }
  .blog-filter {
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  }
  .blog-filter span {
    background: var(--bg-warm);
    color: var(--muted);
    padding: 1px 9px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 700;
  }
  .blog-filter:hover {
    background: var(--bg-alt);
    border-color: var(--brand-soft);
    color: var(--brand);
  }
  .blog-filter.active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white);
  }
  .blog-filter.active span {
    background: rgba(255,255,255,0.22);
    color: var(--white);
  }

  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 8px;
  }
  @media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { .blog-grid { grid-template-columns: 1fr; } }

  .blog-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: transform .35s ease, box-shadow .35s ease, border-color .25s ease;
  }
  .blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-soft);
  }
  .blog-card-hero {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-alt);
  }
  .blog-card-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
  }
  .blog-card:hover .blog-card-hero img { transform: scale(1.04); }

  .blog-card-body {
    padding: 22px 24px 24px;
    display: flex; flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .blog-card-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 2px;
  }
  .blog-card-tag {
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
  }
  .blog-card-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0;
    color: var(--ink);
    /* Clamp at 3 lines so cards stay even-height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card-excerpt {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card-meta {
    margin-top: auto;
    padding-top: 8px;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.82rem;
    color: var(--muted);
  }
  .blog-card-meta strong { color: var(--brand); font-weight: 700; }

  /* ============================================================
     TEAM MEMBER CARDS as clickable links (was <article>, now <a>)
     ============================================================ */
  a.member {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: transform .22s ease, box-shadow .22s ease;
  }
  a.member h4 { color: var(--ink); text-decoration: none; }
  a.member p { color: var(--ink-soft); }
  a.member:hover { text-decoration: none; }
  a.member:hover h4 { color: var(--brand-deep); }
  .member .region-sep { color: var(--muted); margin: 0 4px; }
  .member-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: 0.02em;
    transition: gap .18s ease, color .18s ease;
    align-self: center;
  }
  a.member:hover .member-cta { gap: 8px; color: var(--brand-deep); }

  /* ============================================================
     MOBILE POLISH — cross-page tap-target, spacing, and overflow fixes.
     Kept at the end of the file so nothing below can override.
     ============================================================ */

  /* Kill accidental horizontal scroll from wide decorative elements
     (gradient orbs, long words in headings, etc.) */
  html, body { overflow-x: hidden; }

  /* Long words / URLs shouldn't force horizontal scroll in body copy.
     Scoped to prose containers so it doesn't touch nav lists, filter pills,
     footer links, buttons, etc. */
  h1, h2, h3, h4, h5, h6, p, blockquote, .lede,
  .post-body li, article li, .prose li {
    overflow-wrap: anywhere;
  }

  /* Belt-and-suspenders: nav / UI lists always keep words whole */
  .nav-links, .nav-links li, .nav-links a,
  .foot-grid a, .copyright a, .filter-pill, .blog-filter, .lib-sort select {
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
  }

  /* Prevent iOS from zooming when focusing form inputs (font-size < 16px triggers it) */
  input, textarea, select {
    font-size: 16px;
  }

  /* Belt-and-suspenders: if any leftover `<a class="btn">` pair uses inline
     margin-left on desktop, still stack cleanly on narrow screens. */
  @media (max-width: 640px) {
    .btn[style*="margin-left"] {
      margin-left: 0 !important;
      margin-top: 10px;
      display: flex;
      width: 100%;
      max-width: 320px;
    }
    /* Keep two consecutive buttons stacking with breathing room */
    .btn + .btn:not(.btn-row .btn) {
      margin-top: 10px;
    }
  }

  /* On very narrow screens, allow buttons to wrap their label instead of
     getting clipped by white-space:nowrap. */
  @media (max-width: 400px) {
    .btn { white-space: normal; padding-left: 20px; padding-right: 20px; }
  }

  /* Tighter side gutters on very small screens so content doesn't slam
     against the edge. Match the .wrap padding used elsewhere. */
  @media (max-width: 480px) {
    .wrap { padding-left: 18px; padding-right: 18px; }
  }

  /* Ensure images and iframes never overflow their container on mobile */
  @media (max-width: 900px) {
    img, video, iframe, svg { max-width: 100%; height: auto; }
    /* SVG icons in fixed-size contexts shouldn't be forced to 100% */
    .icon, .admin-brand-mark svg, symbol { max-width: none; height: auto; }
  }

  /* Extra bottom padding on mission-style sections that end in buttons —
     so the primary CTA has clean space above the next section on mobile. */
  @media (max-width: 640px) {
    .mission, .section-light {
      padding-bottom: clamp(56px, 10vw, 96px);
    }
  }

  /* Section-hero pages should keep a comfortable minimum top spacing so
     headings don't crash into the sticky topbar / nav on iOS notches. */
  @media (max-width: 640px) {
    .page-hero { padding-top: clamp(60px, 12vw, 90px); }
  }