/*
Theme Name: BLAK Fitness (Release 1.4.6)
Author: Keith
Description: Custom single-page landing theme for BLAK Fitness, founded by Maple. Beyond Limits and Kinetics.
Requires at least: 6.7
Requires PHP: 7.4
Version: 1.4.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blak-fitness
*/

  :root {
    --bg: #EDE6DE;
    --surface: #F7F2EC;
    --surface-2: #E3D9CD;
    --text: #241C18;
    --text-muted: #5B4C42;
    --accent: #6E1E33;
    --accent-ink: #FFFFFF;
    --olive: #6E6845;
    --border: rgba(36,28,24,0.14);
    --focus: #6E1E33;

    --ink-bg: #1C1714;
    --ink-surface: #241C18;
    --ink-text: #F2E9E1;
    --ink-muted: #C9B9AC;
    --ink-accent: #DE7B8A;
    --ink-border: rgba(242,233,225,0.16);

    --cta-bg: #6E1E33;
    --cta-bg-hover: #82233C;
    --cta-text: #FFFFFF;
    --gold: #B8934A;
    --wine-band: #4A1524;
    --wine-band-2: #35101A;
    --wine-band-text: #F2E9E1;
    --wine-band-muted: #D8C2C7;

    --bright-bg: #FDF9F4;
    --bright-accent: #E2536B;
    --bright-accent-text: #C1354F;
    --bright-accent-2: #E8935A;
    --hero-photo: url("assets/img/hero-photo.jpg");
    --before-photo: url("assets/img/before-photo.jpg");
    --founder-photo: url("assets/img/founder-photo.jpg");
    --after-photo: url("assets/img/after-photo.jpg");

    --font-display: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", Arial, sans-serif;
    --font-body: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #1C1714;
      --surface: #241C18;
      --surface-2: #2C2320;
      --text: #F2E9E1;
      --text-muted: #B8A99C;
      --accent: #C97C8E;
      --accent-ink: #1C1714;
      --olive: #ABA477;
      --border: rgba(242,233,225,0.14);
      --focus: #C97C8E;
    }
  }
  :root[data-theme="dark"] {
    --bg: #1C1714;
    --surface: #241C18;
    --surface-2: #2C2320;
    --text: #F2E9E1;
    --text-muted: #B8A99C;
    --accent: #C97C8E;
    --accent-ink: #1C1714;
    --olive: #ABA477;
    --border: rgba(242,233,225,0.14);
    --focus: #C97C8E;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  /* Accessibility: skip link, visible only on keyboard focus.
     Hidden with clip-path (no off-screen positioning, no layout/scroll impact). */
  .skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1000;
    max-width: calc(100% - 1rem);
    padding: 0.7rem 1.1rem;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
    clip-path: inset(50%);
  }
  .skip-link:focus {
    clip-path: none;
  }
  #main-content:focus { outline: none; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.65;
    margin: 0;
    /* Defensive: decorative SVGs (.arcs, .burst) are sized to extend past their
       section, which their section already clips. This stops any future edit
       from turning that into page-wide horizontal scroll. `clip` (not `hidden`)
       so it never creates a scroll container or breaks the sticky nav. */
    overflow-x: clip;
  }

  a { color: var(--accent); }
  a:focus-visible, summary:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-stretch: condensed;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-wrap: balance;
    margin: 0;
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.7rem;
  }
  .ink .eyebrow { color: var(--gold); }

  .wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .wrap-narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .btn {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--cta-bg);
    color: var(--cta-text);
    padding: 0.9rem 1.8rem;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .btn:hover { background: var(--cta-bg-hover); border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.3); }

  /* Assessment-first CTA pair: prominent filled primary + quiet outlined secondary.
     Stacked at every width so the hierarchy reads the same on a 320px phone. */
  .cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 26rem;
    margin-top: 0.5rem;
  }
  .cta-group .btn--primary {
    display: block;
    width: 100%;
    text-align: center;
    text-wrap: balance;
    line-height: 1.3;
    font-size: 0.85rem;
    padding: 1rem 1.6rem;
    box-shadow: 0 4px 14px rgba(110, 30, 51, 0.32);
  }
  .cta-group .btn--ghost {
    display: inline-block;
    align-self: flex-start;
    background: transparent;
    box-shadow: none;
    font-size: 0.72rem;
    padding: 0.68rem 1.25rem;
  }
  .btn--ghost { color: var(--text); border-color: rgba(36, 28, 24, 0.35); }
  .btn--ghost:hover {
    background: rgba(36, 28, 24, 0.06);
    border-color: var(--text);
    color: var(--text);
    transform: none;
    box-shadow: none;
  }
  .ink .btn--ghost { color: var(--ink-text); border-color: rgba(242, 233, 225, 0.5); }
  .ink .btn--ghost:hover { background: rgba(242, 233, 225, 0.12); border-color: var(--ink-text); color: var(--ink-text); }
  .cta-note {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin: 0.6rem 0 0;
  }
  .ink .cta-note { color: var(--ink-muted); }

  /* ---------- NAV ---------- */
  nav.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--ink-bg) 92%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--ink-border);
  }
  .nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .brand {
    font-family: var(--font-display);
    font-stretch: condensed;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-text);
    text-decoration: none;
    font-size: 1.15rem;
  }
  .brand img { display: block; height: 34px; width: auto; }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }
  .nav-links a {
    color: var(--ink-muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .nav-links a:hover { color: var(--ink-text); }
  .nav-links .btn { font-size: 0.72rem; padding: 0.6rem 1.1rem; }

  /* Visually hidden but available to assistive tech (the hamburger's "Menu" label). */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* "Coaching" (desktop) / "Programs" (mobile) dropdown-style disclosure.
     Same markup shape in both places: a <button> + a sibling <ul id="...">
     toggled by nav.js, which flips aria-expanded and an .is-open class. */
  .has-dropdown { position: relative; }
  .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .nav-dropdown-toggle:hover { color: var(--ink-text); }
  .nav-chev {
    width: 0.55rem; height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -0.15rem;
  }
  .nav-dropdown-toggle[aria-expanded="true"] .nav-chev { transform: rotate(-135deg); margin-top: 0.1rem; }

  .dropdown-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0.5rem;
  }
  .dropdown-menu.is-open { display: block; }
  .dropdown-menu a {
    display: block;
    white-space: nowrap;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.85rem;
  }
  .dropdown-menu a:hover { background: color-mix(in srgb, var(--ink-text) 10%, transparent); }

  /* Desktop: the dropdown floats below the "Coaching" button. */
  .nav-links-desktop .dropdown-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink-surface);
    border: 1px solid var(--ink-border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    min-width: 13rem;
    z-index: 60;
  }

  /* Mobile hamburger + slide-down panel. Hidden entirely on desktop. */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 2.2rem;
    height: 2.2rem;
    background: none;
    border: 1px solid var(--ink-border);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle__bar {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: var(--ink-text);
  }
  .nav-mobile-panel { display: none; }

  /* The desktop row (brand, six links, assessment button) needs about 1000px,
     so switch to the hamburger panel below that instead of overflowing. */
  @media (max-width: 1024px) {
    .nav-links-desktop { display: none; }
    .nav-toggle { display: flex; }
    .nav-mobile-panel {
      display: block;
      max-height: 0;
      overflow: hidden;
      border-top: 1px solid var(--ink-border);
    }
    .nav-mobile-panel.is-open { max-height: 24rem; overflow-y: auto; }
    .nav-links-mobile {
      list-style: none;
      margin: 0;
      padding: 0.5rem 1.5rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .nav-links-mobile > li > a,
    .nav-links-mobile .nav-dropdown-toggle {
      display: block;
      width: 100%;
      padding: 0.75rem 0.25rem;
      font-size: 0.85rem;
    }
    .nav-links-mobile .nav-dropdown-toggle { justify-content: space-between; }
    .nav-links-mobile .dropdown-menu { padding: 0 0 0.4rem 1rem; }
    .nav-links-mobile .dropdown-menu a { padding: 0.6rem 0.5rem; }
    .nav-links-mobile .btn {
      display: inline-block;
      margin-top: 0.5rem;
      text-align: center;
    }
    /* The mobile list does not carry .nav-links, so its links fell back to the
       wine body link color on the dark panel (1.9:1). Use the desktop nav colors. */
    .nav-links-mobile > li > a:not(.btn),
    .nav-links-mobile .dropdown-menu a { color: var(--ink-muted); }
    .nav-links-mobile > li > a:not(.btn):hover,
    .nav-links-mobile > li > a:not(.btn):active,
    .nav-links-mobile .dropdown-menu a:hover,
    .nav-links-mobile .dropdown-menu a:active { color: var(--ink-text); }
  }
  /* Very small phones: brand + hamburger must fit a 320px viewport without
     pushing the document wider than the screen. */
  @media (max-width: 400px) {
    .nav-inner { padding-left: 1rem; padding-right: 1rem; gap: 0.6rem; }
  }

  .nav-dropdown-toggle:focus-visible,
  .nav-toggle:focus-visible {
    outline: 2px solid var(--ink-accent);
    outline-offset: 2px;
  }
  /* Keyboard focus on the dark mobile panel: the default wine outline is not visible there. */
  .nav-links-mobile a:focus-visible { outline: 2px solid var(--ink-accent); outline-offset: 2px; }
  .nav-links-mobile a:not(.btn):focus-visible { color: var(--ink-text); }

  /* ---------- INK BAND (hero / final cta) ---------- */
  .ink {
    background: var(--ink-bg);
    color: var(--ink-text);
    position: relative;
    overflow: hidden;
  }
  .ink .muted, .ink p { color: var(--ink-muted); }

  .arcs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
  }

  section.hero {
    padding: clamp(4rem, 10vw, 7rem) 0 clamp(3.5rem, 8vw, 6rem);
  }
  section.hero {
    background-image:
      linear-gradient(95deg, rgba(20,14,12,0.82) 0%, rgba(20,14,12,0.55) 40%, rgba(20,14,12,0.22) 75%),
      var(--hero-photo);
    background-size: cover;
    background-position: center 32%;
  }
  .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
  }
  .hero h1 {
    font-size: clamp(2.6rem, 6.4vw, 4.6rem);
    line-height: 0.98;
    margin-bottom: 1.3rem;
  }
  .hero .lede {
    font-size: 1.2rem;
    max-width: 52ch;
    margin: 0 0 2rem;
  }

  /* Small phones only: the hero is tall enough that the primary CTA lands well
     below the first screen at ~320px. Tighten spacing, oversized mobile
     padding, and step the headline / supporting-copy scale down a notch so the
     "Take the 2-Minute Reclaim Assessment" button reaches the first view (or
     nearly so) at 320-375px. The H1 wording, the lede wording, the CTA
     hierarchy, and the "10 quick questions" line are all unchanged. Scoped to
     <=430px so tablet and desktop are untouched. */
  @media (max-width: 430px) {
    section.hero {
      padding-top: 1.5rem;
      padding-bottom: 2.25rem;
    }
    .hero .eyebrow { margin-bottom: 0.4rem; }
    .hero h1 {
      /* Ramps ~30px at 320px up to ~2.6rem at 430px, so it meets the base
         clamp value with no visible jump at the 431px boundary. */
      font-size: clamp(1.9rem, 9.6vw, 2.6rem);
      margin-bottom: 0.55rem;
    }
    .hero .lede {
      font-size: 1.02rem;
      line-height: 1.42;
      margin-bottom: 0.85rem;
    }
    .hero .cta-group { margin-top: 0.25rem; }
    .hero .cta-note { margin-top: 0.5rem; }
  }

  /* stat strip */
  .stat-strip {
    background: var(--ink-surface);
    border-top: 1px solid var(--ink-border);
    border-bottom: 1px solid var(--ink-border);
    padding: 2.4rem 0;
  }
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    text-align: center;
  }
  .stat-num {
    font-family: var(--font-display);
    font-stretch: condensed;
    font-weight: 700;
    font-size: clamp(1.9rem, 4.2vw, 2.6rem);
    color: var(--gold);
    line-height: 1;
    margin: 0 0 0.4rem;
  }
  .stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0;
  }
  @media (max-width: 640px) { .stat-grid { grid-template-columns: 1fr; gap: 1.6rem; } }

  /* ---------- STANDARD SECTIONS ---------- */
  section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
  section.alt { background: var(--surface); }
  .section-head { max-width: 640px; margin-bottom: 2.2rem; }
  .section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }

  .hook-copy p {
    font-size: 1.08rem;
    max-width: 62ch;
    margin: 0 0 1.3rem;
  }
  .hook-copy p:last-child {
    font-family: var(--font-display);
    font-stretch: condensed;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--accent);
    max-width: 40ch;
    margin-top: 2rem;
  }

  /* founder */
  .founder-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: center;
  }
  .portrait-frame {
    aspect-ratio: 3/4;
    border-radius: 6px;
    background-image:
      linear-gradient(190deg, rgba(28,23,20,0) 55%, rgba(28,23,20,0.92) 100%),
      var(--founder-photo);
    background-size: cover;
    background-position: center 12%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  .slot-tag {
    position: absolute;
    top: 0.9rem; left: 0.9rem;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border: 1px solid var(--ink-border);
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
  }
  .portrait-caption {
    position: relative;
    z-index: 1;
    padding: 1rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .founder-copy p { font-size: 1.02rem; max-width: 56ch; margin: 0 0 1.1rem; }
  .founder-copy .btn { margin-top: 0.6rem; }

  @media (max-width: 780px) {
    .founder-grid { grid-template-columns: 1fr; }
    .portrait-frame { max-width: 280px; }
  }

  /* trust strip */
  .strip {
    background: var(--surface-2);
    padding: 3rem 0;
    text-align: center;
  }
  .strip blockquote {
    margin: 0 auto;
    max-width: 46ch;
    font-family: var(--font-display);
    font-stretch: condensed;
    text-transform: uppercase;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.2;
  }
  .strip cite {
    display: block;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.9rem;
  }

  /* offer */
  .offer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(1.8rem, 4vw, 3rem);
  }
  section.alt .offer-card { background: var(--bg); }
  .offer-card h3 {
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    margin-bottom: 0.8rem;
  }
  .offer-card .promise {
    max-width: 58ch;
    color: var(--text-muted);
    margin: 0 0 1.8rem;
  }
  .offer-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    gap: 0.75rem;
  }
  .offer-list li {
    padding-left: 1.6rem;
    position: relative;
    font-size: 0.98rem;
  }
  .offer-list li::before {
    content: "";
    position: absolute; left: 0; top: 0.45em;
    width: 0.6rem; height: 0.6rem;
    border-radius: 50%;
    background: var(--accent);
  }
  .price-note {
    font-size: 0.92rem;
    color: var(--text-muted);
    max-width: 46ch;
    margin: 0 0 1.4rem;
  }
  /* Small secondary link under the Reclaim Method CTA group, pointing to the
     Intermittent Fasting Coaching page. Deliberately quiet -- not a CTA. */
  .offer-aside {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 50ch;
    margin: 1.2rem 0 0;
  }

  /* gallery — proof in motion (wine band) */
  section.wine {
    background: var(--wine-band);
    color: var(--wine-band-text);
  }
  section.wine .eyebrow { color: var(--gold); }
  section.wine p { color: var(--wine-band-muted); }
  .gallery-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  .media-frame {
    border-radius: 6px;
    background: linear-gradient(155deg, #4A1728, #341019);
    border: 1px solid rgba(242,233,225,0.14);
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-width: 0;
  }
  .media-frame .tag {
    position: absolute; top: 0.8rem; left: 0.9rem;
    font-family: var(--font-mono); font-size: 0.65rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--wine-band-text);
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  }
  .media-frame .duration {
    position: absolute; bottom: 0.8rem; right: 0.9rem;
    font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.05em; color: var(--wine-band-text);
    background: rgba(0,0,0,0.4);
    padding: 0.15rem 0.45rem;
    border-radius: 2px;
  }
  .play-dot {
    width: 3.6rem; height: 3.6rem; border-radius: 50%;
    background: var(--gold);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 8px rgba(198,150,60,0.16);
    transition: transform 0.15s ease;
  }
  .media-frame:hover .play-dot { transform: scale(1.06); }
  .play-dot::after {
    content: "";
    border-left: 0.95rem solid var(--ink-bg);
    border-top: 0.6rem solid transparent;
    border-bottom: 0.6rem solid transparent;
    margin-left: 0.28rem;
  }
  /* Before / after: real <img> so the photos have alt text and never distort.
     object-fit: cover with a tuned focal point keeps each face fully in frame. */
  .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .ba-pair .media-frame {
    aspect-ratio: 1 / 1;
    height: auto;
    align-self: start;
  }
  .ba-pair .media-frame .ba-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
  }
  /* Keep the "Before" / "Now" labels legible without darkening the faces. */
  .ba-pair .media-frame::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(20,10,15,0.55), rgba(20,10,15,0));
    pointer-events: none;
    z-index: 1;
  }
  .ba-pair .media-frame .tag { z-index: 2; }
  .ba-pair .media-frame:first-child .ba-photo {
    object-position: 40% 28%;
    filter: saturate(0.85);
  }
  .ba-pair .media-frame:last-child {
    border-color: var(--gold);
  }
  .ba-pair .media-frame:last-child .ba-photo {
    object-position: center 18%;
  }
  /* Small phones: stack the pair so each photo is large enough to read.
     Cap and centre each frame (not .ba-pair itself: auto margins on a grid
     item stop it stretching and it collapses). */
  @media (max-width: 520px) {
    .ba-pair {
      grid-template-columns: 1fr;
      gap: 0.9rem;
    }
    .ba-pair .media-frame {
      width: 100%;
      max-width: 340px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  .gallery-quote {
    margin: 2.2rem auto 0;
    max-width: 56ch;
    text-align: center;
    font-size: 1.08rem;
    font-style: italic;
    color: var(--wine-band-text);
  }
  .gallery-quote cite {
    display: block; font-family: var(--font-mono); font-style: normal;
    font-size: 0.75rem; color: var(--gold); margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em;
  }
  @media (max-width: 780px) { .gallery-grid { grid-template-columns: 1fr; } }
  /* Proof in Motion holds only the before/after pair (the placeholder video frame is gone), so centre it. */
  .gallery-grid > .ba-pair:only-child { grid-column: 1 / -1; width: 100%; max-width: 640px; margin: 0 auto; }

  /* testimonials */
  /* testimonials — the bright lift */
  section.bright {
    background: var(--bright-bg);
    padding: clamp(4.5rem, 11vw, 7.5rem) 0;
    position: relative;
    overflow: hidden;
  }
  .burst {
    position: absolute;
    top: -8%; left: 50%;
    width: 140%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.55;
  }
  section.bright .section-head {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  section.bright .eyebrow { color: var(--bright-accent-text); }
  section.bright h2 { font-size: clamp(2.1rem, 4.6vw, 3rem); }
  .t-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    position: relative;
    z-index: 1;
  }
  .t-card {
    background: transparent;
    padding: 0.5rem 0.5rem 0;
    text-align: center;
  }
  .t-card p { margin: 0 0 1.3rem; font-style: italic; font-size: 1.04rem; line-height: 1.55; }
  .t-name-row { display: flex; align-items: center; justify-content: center; gap: 0.65rem; }
  .t-avatar {
    flex: none;
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    background: var(--bright-accent);
    color: var(--ink-bg);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-stretch: condensed; font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 4px 14px rgba(226,83,107,0.25);
  }
  .t-card:nth-child(2) .t-avatar { background: var(--gold); color: var(--ink-bg); box-shadow: 0 4px 14px rgba(184,147,74,0.25); }
  .t-card:nth-child(3) .t-avatar { background: var(--bright-accent-2); color: var(--ink-bg); box-shadow: 0 4px 14px rgba(232,147,90,0.25); }
  .t-card cite {
    font-style: normal; font-family: var(--font-mono);
    font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted);
  }
  /* Two verified testimonials (Angela, Sarah): two columns, not three with an empty gap. */
  @media (min-width: 861px) { .t-grid:has(> .t-card:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; } }
  @media (max-width: 860px) { .t-grid { grid-template-columns: 1fr; gap: 2.6rem; } }

  /* faq */
  .faq-list { max-width: 700px; }
  details {
    border-bottom: 1px solid var(--border);
    padding: 1.2rem 0;
  }
  summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-stretch: condensed;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.05rem;
  }
  summary::-webkit-details-marker { display: none; }
  .chev {
    flex: none;
    width: 0.7rem; height: 0.7rem;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -0.2rem;
  }
  details[open] .chev { transform: rotate(-135deg); margin-top: 0.2rem; }
  details p { margin: 0.9rem 0 0; max-width: 60ch; color: var(--text-muted); }

  /* final cta */
  section.final {
    padding: clamp(4rem, 9vw, 6.5rem) 0;
    text-align: center;
  }
  section.final {
    background: radial-gradient(120% 140% at 50% 15%, #2C2320 0%, var(--ink-bg) 62%);
  }
  section.final .wrap-narrow { position: relative; z-index: 1; }
  section.final h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
  section.final p { max-width: 48ch; margin: 0 auto 2rem; }

  /* reclaim calendar (Calendly embed) */
  .calendar-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .calendar-head p {
    max-width: 52ch;
    margin: 0.6rem auto 0;
    color: var(--text-muted);
  }
  .calendar-head p + p {
    margin-top: 0.35rem;
  }

  /* Assessment section: keep the embedded card distinct from the section behind it. */
  #assessment .blak-ra {
    --blak-ra-bg: var(--surface-2);
  }

  /*
   * The site is locked to its light palette (data-theme="light" on <html>), but
   * the assessment plugin ships its own prefers-color-scheme handling. Pin it to
   * the light values so it matches the rest of the page on dark-mode devices.
   */
  @media (prefers-color-scheme: dark) {
    #assessment .blak-ra {
      --blak-ra-bg: var(--surface-2);
      --blak-ra-surface: #FFFFFF;
      --blak-ra-surface-2: #EFE7DC;
      --blak-ra-text: #241C18;
      --blak-ra-text-muted: #5B4C42;
      --blak-ra-accent: #6E1E33;
      --blak-ra-accent-hover: #82233C;
      --blak-ra-accent-ink: #FFFFFF;
      --blak-ra-gold: #B8934A;
      --blak-ra-border: rgba(36, 28, 24, 0.16);
      --blak-ra-border-strong: rgba(36, 28, 24, 0.34);
    }
    #assessment .blak-ra__option.is-selected {
      background: #FBEFF1;
    }
    #assessment .blak-ra__error {
      background: #FBEAEA;
      border-color: #E3B7B7;
      color: #8A2E2E;
    }
  }
  /* Privacy reassurance beneath the Reclaim Assessment widget */
  .assessment-privacy-note {
    margin: 1.1rem auto 0;
    max-width: 48ch;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
  }

  /* "What to expect" on the free Reclaim Call, shown directly above the Calendly embed */
  .call-expect {
    max-width: 34rem;
    margin: 0 auto 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .call-expect__title {
    margin: 0 0 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .call-expect__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
  }
  .call-expect__list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text);
  }
  .call-expect__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--accent);
  }
  .calendly-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    overflow: hidden;
  }
  /* Calendly embed (direct event URL + data-resize="true").
     - Desktop/tablet: Calendly's widget.js reports its content height via
       postMessage and sets an inline height on this element, so the widget
       tracks its content at every step (calendar, times, form, confirmation)
       with no blank area and no inner scroll.
     - Mobile: Calendly's inline embed reports a placeholder height there
       (its mobile view is built to scroll internally), so the min-height below
       holds the widget at the size of the calendar view. No !important and no
       permanent 1050px force: the min-height only sets a floor, it never stops
       the widget growing when Calendly reports a taller step. */
  .calendly-inline-widget {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 640px;
  }
  @media (max-width: 767px) {
    .calendly-inline-widget { min-height: 820px; }
  }

  /* Branded post-booking confirmation. Hidden until Calendly reports
     calendly.event_scheduled; wine card + gold accent so it reads as a
     finished step within the Reclaim Call section. No animation. */
  .reclaim-confirmation {
    margin: 1.5rem auto 0;
    max-width: 40rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    background: var(--wine-band);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    border-radius: 8px;
    text-align: center;
  }
  .reclaim-confirmation .eyebrow {
    color: var(--gold);
    margin-bottom: 0.5rem;
  }
  .reclaim-confirmation h3 {
    color: var(--wine-band-text);
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 0.7rem;
  }
  .reclaim-confirmation p {
    color: var(--wine-band-muted);
    max-width: 44ch;
    margin: 0 auto;
    font-size: 0.98rem;
    line-height: 1.55;
  }
  .reclaim-confirmation p + p {
    margin-top: 0.6rem;
  }

  /* footer */
  footer.site-footer {
    background: var(--ink-bg);
    color: var(--ink-muted);
    padding: 2.5rem 0;
  }
  .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  .footer-inner a { color: var(--ink-muted); text-decoration: none; }
  .footer-inner a:hover { color: var(--ink-text); }

  /* ==========================================================================
     Intermittent Fasting Coaching page + Fasting Interest quiz +
     Health and Fitness Disclaimer page. Reuses existing section/component
     classes (.hero, .section-head, .offer-card, .offer-list, .faq-list,
     .cta-group) above; only page-specific pieces are defined here.
     ========================================================================== */

  .if-copy p { font-size: 1.02rem; max-width: 68ch; margin: 0 0 1.2rem; }
  .if-copy h3 { font-size: 1.25rem; margin: 2rem 0 0.8rem; }
  .if-lede { font-size: 1.05rem; color: var(--text-muted); max-width: 64ch; margin: 0 0 1.6rem; }

  .if-list {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: grid;
    gap: 0.85rem;
    max-width: 72ch;
  }
  .if-list li {
    padding-left: 1.6rem;
    position: relative;
    font-size: 0.98rem;
    line-height: 1.5;
  }
  .if-list li::before {
    content: "";
    position: absolute; left: 0; top: 0.5em;
    width: 0.6rem; height: 0.6rem;
    border-radius: 50%;
    background: var(--accent);
  }
  section.wine .if-list li::before { background: var(--gold); }
  section.wine .if-copy p strong { color: var(--wine-band-text); }

  /* schedule cards (12:12 / 14:10 / 16:8) */
  .if-schedule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .if-schedule-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    text-align: center;
  }
  .if-schedule-card__tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
  }
  .if-schedule-card h3 {
    font-size: clamp(1.8rem, 4vw, 2.3rem);
    margin-bottom: 0.5rem;
    color: var(--accent);
  }
  .if-schedule-card p { margin: 0 0 0.5rem; font-size: 0.95rem; }
  .if-schedule-card__example { color: var(--text-muted); font-size: 0.88rem; }
  @media (max-width: 780px) {
    .if-schedule-grid { grid-template-columns: 1fr; }
  }

  /* 4-week beginner progression */
  .if-progression-title { font-size: 1.15rem; margin: 2rem 0 1rem; }
  .if-progression {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .if-progression__week {
    background: var(--surface-2);
    border-radius: 6px;
    padding: 1rem 1.1rem;
  }
  section.alt .if-progression__week { background: var(--bg); }
  .if-progression__label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.4rem;
  }
  .if-progression__week p:last-child { margin: 0; font-size: 0.92rem; line-height: 1.45; }
  @media (max-width: 860px) {
    .if-progression { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .if-progression { grid-template-columns: 1fr; }
  }

  .if-final-ctas { margin-left: auto; margin-right: auto; align-items: center; }
  section.final .if-final-ctas .btn--primary { width: auto; }

  .if-disclaimer-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 1.2rem;
  }
  .if-disclaimer-note--ink {
    color: var(--ink-muted);
    max-width: 48ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- Fasting Interest quiz ---------- */
  .if-quiz-wrap { margin-top: clamp(2.5rem, 6vw, 4rem); }
  .if-quiz {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    max-width: 640px;
    margin: 0 auto;
  }
  section.alt .if-quiz { background: var(--bg); }
  .if-quiz__panel .eyebrow { margin-bottom: 0.4rem; }
  .if-quiz__panel h3 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); margin-bottom: 0.8rem; }
  .if-quiz__panel > p { color: var(--text-muted); max-width: 56ch; margin: 0 0 1.4rem; }
  .if-quiz__progress {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem;
  }
  .if-quiz__fieldset { border: 0; padding: 0; margin: 0; }
  .if-quiz__fieldset legend {
    font-family: var(--font-display);
    font-stretch: condensed;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    padding: 0;
    margin: 0 0 1.2rem;
  }
  .if-quiz__options {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
  }
  .if-quiz__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  section.alt .if-quiz__option { background: var(--surface); }
  .if-quiz__option:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  }
  .if-quiz__option:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .if-quiz__option input { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
  .if-quiz__nav { display: flex; gap: 0.75rem; flex-wrap: wrap; }
  .if-quiz__error {
    color: #8A2E2E;
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
  }
  .if-quiz__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
  }
  .if-quiz__fineprint { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1.2rem; }
  .if-quiz__restart {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-decoration: underline;
    color: var(--text-muted);
    cursor: pointer;
  }
  .if-quiz__panel--safety {
    background: var(--wine-band);
    color: var(--wine-band-text);
    margin: -1px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 7px;
  }
  .if-quiz__panel--safety .eyebrow { color: var(--gold); }
  .if-quiz__panel--safety h3 { color: var(--wine-band-text); }
  .if-quiz__panel--safety > p { color: var(--wine-band-muted); }
  .if-quiz__panel--safety .if-quiz__fineprint { color: var(--wine-band-muted); }
  .if-quiz__panel--safety .if-quiz__fineprint a,
  .if-quiz__panel--safety .if-quiz__restart { color: var(--wine-band-text); }
  .if-quiz__panel--result h3 { color: var(--accent); }

  /* ---------- Health and Fitness Disclaimer (plain policy page) ---------- */
  .legal-page { max-width: 72ch; }
  .legal-page h1 { margin-bottom: 0.5rem; }
  .legal-page__updated {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 2rem;
  }
  .legal-page h2 {
    font-size: 1.35rem;
    margin: 2.2rem 0 0.9rem;
  }
  .legal-page p { margin: 0 0 1.1rem; }
  .legal-page ul {
    margin: 0 0 1.3rem;
    padding-left: 1.3rem;
  }
  .legal-page li { margin-bottom: 0.5rem; }

  /* ==========================================================================
     Reclaim Method page. Reuses .hero, .section-head, .offer-list, .faq-list,
     .cta-group, and the content-typography utilities introduced for the
     Intermittent Fasting page (.if-copy, .if-lede, .if-list,
     .if-disclaimer-note). Only the pillar cards and process steps are new.
     ========================================================================== */

  /* six-pillar grid */
  .pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .pillar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
  }
  section.alt .pillar-card { background: var(--bg); }
  .pillar-card__num {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 0.5rem;
  }
  section.alt .pillar-card__num { color: var(--accent); }
  .pillar-card h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
  .pillar-card p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }
  @media (max-width: 860px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .pillar-grid { grid-template-columns: 1fr; } }

  /* six-step process */
  .method-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .method-step {
    background: var(--surface-2);
    border-radius: 6px;
    padding: 1.25rem 1.4rem;
  }
  .method-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    margin: 0 0 0.6rem;
  }
  .method-step h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
  .method-step p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
  @media (max-width: 860px) { .method-steps { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .method-steps { grid-template-columns: 1fr; } }

  /* Plain-text "coming soon" mentions: intentionally not links, since the
     target pages do not exist yet. */
  .rm-explore-more {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-width: 60ch;
  }
  .rm-explore-more li {
    font-size: 0.92rem;
    color: var(--text-muted);
    padding-left: 1.2rem;
    position: relative;
  }
  .rm-explore-more li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--accent);
  }
  .rm-future-note {
    font-size: 0.8rem;
    font-style: italic;
    margin-left: 0.3rem;
  }
  section.wine .rm-future-note { color: var(--wine-band-muted); }

  /* Dedicated Reclaim Call page (page-reclaim-call.php): Maple's photo beside a short first-person intro. */
  .rc-intro {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 1.5rem;
    align-items: center;
    max-width: 44rem;
    margin: 0 auto 1.75rem;
  }
  .rc-photo {
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
    border: 1px solid var(--border);
  }
  .rc-intro__copy h1 { margin: 0.2rem 0 0.7rem; font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
  .rc-intro__copy p:last-child { margin: 0; color: var(--text-muted); }
  .rc-reassurance {
    max-width: 44rem;
    margin: 1.5rem auto 0;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
  }
  @media (max-width: 560px) {
    .rc-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .rc-photo { width: 7rem; height: 7rem; }
  }