/* ==========================================================================
   Joypath — Main Stylesheet
   Structure:
     1. Tokens (imported)
     2. Reset
     3. Base / typography
     4. Layout (container)
     5. Buttons
     6. Utilities
     7. Section styles  ← added one-by-one as we build (header, footer, ...)
   ========================================================================== */

@import url("variables.css");

/* ==========================================================================
   2. RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ==========================================================================
   3. BASE / TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-text-heading);
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-h4);
}
h5 {
  font-size: var(--fs-h5);
}
h6 {
  font-size: var(--fs-h6);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

/* Reusable text roles ---------------------------------------------------- */
.text-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand);
}

.text-brand {
  color: var(--color-brand);
}
.text-heading {
  color: var(--color-text-heading);
}
.text-secondary {
  color: var(--color-text-secondary);
}

/* ==========================================================================
   4. LAYOUT — container
   1920 max canvas, 160px side margins (responsive via --container-margin).
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-margin);
}

/* Full-bleed section wrapper that still centers its inner container */
.section {
  width: 100%;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-button);
  transition: color var(--transition-base), background-color var(--transition-base),
    opacity var(--transition-base);
}

/* Text + arrow link style (e.g. "Start your Joypath →") */
.btn-link {
  color: var(--color-brand);
}
/* Arrow CTAs: the arrow glides right + the gold deepens on hover. Calm, clearly
   legible feedback for a 50+ audience — no whole-element dim (keeps text crisp). */
.btn-link:hover {
  color: #8f6a33;
}
.btn__arrow,
.header-cta__arrow {
  transition: transform var(--transition-base);
}
.btn-link:hover .btn__arrow,
.header-cta:hover .header-cta__arrow {
  transform: translateX(6px);
}

/* Solid brand button (placeholder — refine against Figma per section) */
.btn-primary {
  padding: var(--space-16) var(--space-32);
  color: var(--color-white);
  background-color: var(--color-brand);
  border-radius: var(--radius-full);
}
.btn-primary:hover {
  background-color: #8f6a33;
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   7. SECTION STYLES
   Appended below as each section is built & verified against Figma.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER  (Figma: hero header 1:1043 = 183px tall / scrolled 1:1018 = 134px)
   Fixed, transparent over the hero; turns solid on scroll (.is-scrolled).
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: 37px; /* 37 + 109 logo + 37 = 183 */
  background-color: transparent;
  transition: background-color var(--transition-base), padding-block var(--transition-base),
    box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  padding-block: 18px; /* 18 + 97 logo + 18 ≈ 134 */
  background-color: var(--color-surface);
  box-shadow: 0 2px 16px rgba(26, 26, 26, 0.06);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Decorative 4-petal motif, centered behind the CTA label (Figma: Shape 01, 180×156) */
.header-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 179px; /* Figma Shape 01 = 179.45×155 — wider than the ~157px label so the circles peek out */
  height: auto;
  max-width: none; /* escape the global img{max-width:100%}, which clamps to the text-width container */
  pointer-events: none;
  z-index: -1;
  transition: width var(--transition-base);
}
/* Scrolled/sticky header is only ~134px tall — shrink the motif to Figma's
   "Header - Final" size (Group 13 = 103.57×89.53) so it isn't clipped top/bottom. */
.site-header.is-scrolled .header-shape {
  width: 103.5px;
}
@media (max-width: 1024px) {
  .header-shape {
    display: none;
  }
}

/* Logo ------------------------------------------------------------------- */
.header-logo img {
  width: 266px;
  height: auto;
  transition: width var(--transition-base);
}
.site-header.is-scrolled .header-logo img {
  width: 238px;
}

/* Primary nav — pinned to page center (Figma nav centered at x=960) ------ */
.main-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.main-nav__list {
  display: flex;
  align-items: center;
  gap: 48px; /* confirmed Figma gap */
}
.main-nav__list a {
  font-family: var(--font-body);
  font-size: 20px; /* Figma nav: Inter Regular 20px */
  font-weight: var(--fw-regular);
  letter-spacing: 0.4px;
  color: var(--color-text-heading);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}
/* Active state mirrors hover. WordPress adds current-menu-item to the menu's
   <li> on the matching page/term archive, and current-menu-parent /
   current-menu-ancestor on single posts within a term — so the right nav item
   (Body / Mind / Fuel / Life Design) highlights for whatever page is on screen.
   Scoped to .main-nav so the secondary nav and footer are unaffected. */
.main-nav__list a:hover,
.main-nav__list a.is-active,
.main-nav__list .current-menu-item > a,
.main-nav__list .current-menu-parent > a,
.main-nav__list .current-menu-ancestor > a {
  color: var(--color-brand);
  text-decoration-color: var(--color-brand);
}
/* In-menu CTA — only shown when the nav collapses (≤1024) */
.main-nav__cta {
  display: none;
}
/* Start the Nexus CTA active state — set by header.php on the nexus archive /
   single entries (the CTA isn't a menu item, so WP can't flag it). */
.header-cta.is-active {
  color: var(--color-brand);
}
.main-nav__cta.is-active {
  box-shadow: 0 0 0 2px var(--color-brand);
}

/* CTA — dark text + arrow (Figma: #1a1a1a, not brand) -------------------- */
.header-cta {
  white-space: nowrap;
  color: var(--color-text-heading);
}
.header-cta:hover {
  color: var(--color-brand);
}
/* Containing block for the centered Shape 01 motif */
.header-cta__text {
  position: relative;
}
.header-cta__arrow {
  flex-shrink: 0;
}

/* Mobile toggle (hidden on desktop) -------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-text-heading);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* --- Tablet & below: collapse nav into a toggle menu -------------------- */
@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: none;
    background-color: var(--color-surface);
    box-shadow: 0 12px 24px rgba(26, 26, 26, 0.08);
    padding: var(--space-24) var(--container-margin);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
    transition: clip-path var(--transition-base), opacity var(--transition-base);
  }
  .main-nav.is-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    pointer-events: auto;
  }
  .main-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
  }

  /* Show the CTA inside the menu, below the links */
  .main-nav__cta {
    display: inline-flex;
    margin-top: var(--space-24);
  }

  /* Hide the inline header CTA on small screens; it lives in the menu instead */
  .header-cta {
    display: none;
  }

  /* Hamburger → X when open */
  .nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

/* --- Mobile pillar quick-nav (Body / Mind / Fuel / Life Design) ----------
   A shortcut row below the masthead so visitors can jump into a pillar
   without opening the hamburger. Rendered only on marketing/CMS pages
   (joypath_render_pillar_nav) and shown only on the collapsed-nav breakpoint.
   Desktop hides it entirely. */
.pillar-nav {
  display: none;
}
@media (max-width: 1024px) {
  /* Only surface the quick-nav once the header collapses into its sticky
     (scrolled) state — it stays hidden in the top/hero header so the pillars
     appear solely in the compact sticky menu. */
  .site-header.is-scrolled .pillar-nav {
    display: block;
    margin-top: var(--space-16);
    /* Match the masthead's responsive side gutter so the row aligns with the
       logo / menu button and never runs to the screen edge. */
    padding-inline: var(--container-margin);
  }
  /* Sober, borderless text links, centered as a group. The gap scales with
     the viewport (clamp) so spacing stays proportional across phones and
     tablets — tight on narrow screens, roomier on wide ones — while staying
     within the row so "Life Design" never clips. */
  .pillar-nav__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 4.5vw, 44px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pillar-nav__item {
    flex: 0 0 auto;
  }
  .pillar-nav__link {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--color-text-heading);
    transition: color var(--transition-base);
  }
  .pillar-nav__link:hover,
  .pillar-nav__link:focus-visible {
    color: var(--color-brand);
  }

  /* Reclaim the row's height from the masthead padding so the fixed header
     stays ~its normal height and existing page top-offsets remain valid.
     Scoped to pages that actually render the link. */
  .jp-quicknav .site-header {
    padding-block: 16px;
  }
  .jp-quicknav .site-header.is-scrolled {
    padding-block: 12px;
  }
}

/* --------------------------------------------------------------------------
   HERO  (Figma: 289:3419 — full-bleed scene 1920×1021; text block at
   x160/y352, w625, column gap 48; H1 96 / lead 22 / CTA brand)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Scales with viewport width keeping the 1920×1021 image ratio,
     clamped so it never gets too short or taller than the design. */
  min-height: clamp(620px, 53.18vw, 1021px);
  background-color: var(--color-brand-light);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center; /* keep the subject framed on the right */
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-48);
  max-width: 625px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* H1 inherits the global heading scale (96px → responsive tokens). */
.hero__lead {
  color: var(--color-text-secondary);
}

.hero__cta {
  margin-top: 0;
}
.btn__arrow {
  flex-shrink: 0;
}

/* Tablet ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero {
    min-height: clamp(520px, 64vw, 760px);
  }
  .hero__content {
    max-width: 60%;
  }
}

/* Mobile — subject sits behind; add a soft scrim for text legibility ----- */
@media (max-width: 640px) {
  .hero {
    min-height: 600px;
    align-items: flex-end;
    padding-bottom: var(--space-48);
  }
  .hero__bg {
    object-position: 78% top;
  }
  /* Text is bottom-aligned, so weight the scrim toward the bottom: strong
     where the copy sits, fading out near the top to keep the subject clear. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
      to top,
      rgba(247, 245, 240, 0.95) 0%,
      rgba(247, 245, 240, 0.85) 32%,
      rgba(247, 245, 240, 0.4) 62%,
      rgba(247, 245, 240, 0) 100%
    );
  }
  .hero__content {
    max-width: 100%;
    gap: var(--space-32);
  }
  /* Mobile banner: dial the headline + lead down so the copy fits the narrow
     column comfortably, and render all copy in black. */
  .hero__title {
    font-size: 30px;
    color: var(--color-text-heading);
  }
  .hero__lead {
    font-size: 15px;
    color: var(--color-text-heading);
  }
  /* CTA reads black on mobile (arrow follows via currentColor). */
  .hero__cta,
  .hero__cta:hover {
    color: var(--color-text-heading);
  }
}

/* --------------------------------------------------------------------------
   4-PILLAR NEXUS  (Figma: 289:3220 diagram + 293:76711 copy)
   Two columns: left = overlapping-circle diagram (760×788), right = copy (666).
   -------------------------------------------------------------------------- */
.nexus {
  padding-block: var(--space-120);
}
.nexus__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-80);
}

/* --- Diagram (scales fluidly; fonts use container-query units) ----------- */
.nexus-diagram {
  position: relative;
  flex: 0 1 760px;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 760 / 788;
  container-type: inline-size;
  color: var(--color-brand);
}

/* Overlapping outlined petals */
.nexus-diagram__circle {
  position: absolute;
  border: 2px solid var(--color-brand); /* Figma: solid #A67C3D, 2px */
  border-radius: 50%;
  background-color: var(--color-surface); /* opaque fill occludes overlap arcs (Figma #F3F1EB) */
}
/* All four petals are identical 304px circles whose centres sit an equal
   182px from the diagram centre (top/bottom now match left/right exactly).
   Quadrant order is clockwise from the top: Body=top, Mind=right, Fuel=bottom,
   Life Design=left (matches Figma 616:2360 across all three diagrams). */
.nexus-diagram__circle--body { /* -> top slot */
  left: 30%;
  top: 7.61%;
  width: 40%;
  height: 38.58%;
}
.nexus-diagram__circle--mind { /* -> right slot */
  left: 53.95%;
  top: 30.71%;
  width: 40%;
  height: 38.58%;
}
.nexus-diagram__circle--fuel { /* -> bottom slot */
  left: 30%;
  top: 53.81%;
  width: 40%;
  height: 38.58%;
}
.nexus-diagram__circle--life { /* -> left slot */
  left: 6.05%;
  top: 30.71%;
  width: 40%;
  height: 38.58%;
}

/* Shared centre */
.nexus-diagram__center {
  position: absolute;
  left: 36.18%;
  top: 36.68%;
  width: 27.63%;
  height: 26.65%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--color-brand); /* Figma: solid #A67C3D, 3px (thicker than petals) */
  border-radius: 50%;
  background-color: var(--color-surface);
  text-align: center;
  z-index: 2;
}
.nexus-diagram__center-text {
  font-family: var(--font-body);
  font-size: 2.9cqw; /* 22px @760 canvas (Figma 289:3227) */
  font-weight: var(--fw-semibold);
  line-height: 1.59;
  letter-spacing: 0.058cqw; /* 0.44px @760 */
  text-transform: uppercase;
  color: var(--color-brand);
}

/* Inward arrows — thin 32px line + small arrowhead (Figma: Arrow 1–4) */
.nexus-diagram__arrow {
  position: absolute;
  width: 1.7cqw;
  height: 4.6cqw;
  z-index: 3;
  color: var(--color-brand);
  transform: translate(-50%, -50%);
}
.nexus-diagram__arrow--top {
  left: 50%;
  top: 34.14%; /* 125px above centre — matches the left/right offset */
}
.nexus-diagram__arrow--bottom {
  left: 50%;
  top: 65.86%; /* mirror of --top about the center circle */
  transform: translate(-50%, -50%) rotate(180deg);
}
.nexus-diagram__arrow--left {
  left: 33.55%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.nexus-diagram__arrow--right {
  left: 66.45%; /* mirror of --left about the center circle */
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Pillar label clusters */
.nexus-pillar {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  text-align: center;
  z-index: 2;
}
.nexus-pillar__icon {
  width: 7.9cqw;
  height: auto;
  margin-bottom: 0.4cqw;
}
.nexus-pillar--body .nexus-pillar__icon {
  width: 9.7cqw;
}
.nexus-pillar__title {
  font-family: var(--font-body);
  font-size: 2.7cqw;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-text-heading);
}
.nexus-pillar__sub {
  font-family: var(--font-body);
  font-size: 1.85cqw;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.nexus-pillar--body { /* -> top slot */
  left: 39.74%;
  top: 11.43%;
  width: 20.53%;
}
.nexus-pillar--mind { /* -> right slot */
  left: 67.37%;
  top: 39.09%;
  width: 15.92%;
}
.nexus-pillar--fuel { /* -> bottom slot */
  left: 38.68%;
  top: 68.91%;
  width: 22.5%;
}
.nexus-pillar--life { /* -> left slot */
  left: 14.87%;
  top: 39.09%;
  width: 18.03%;
}

/* --- Copy block ---------------------------------------------------------- */
.nexus-copy {
  flex: 0 1 666px;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.nexus-copy__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.nexus-copy__eyebrow {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-brand);
}
.nexus-copy__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* Figma: Playfair Regular 48px */
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.nexus-copy__text {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}

/* --- Tablet & below: stack copy above diagram ---------------------------- */
@media (max-width: 1024px) {
  .nexus {
    padding-block: var(--space-80);
  }
  .nexus__inner {
    flex-direction: column-reverse;
    gap: var(--space-64);
  }
  .nexus-diagram {
    flex-basis: auto;
    margin-inline: auto;
  }
  .nexus-copy {
    flex-basis: auto;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   SECONDARY NAV  (Figma: 289:3412 — 1920×78 strip below the hero)
   Top + bottom hairline; 5 centered links; NOT sticky.
   -------------------------------------------------------------------------- */
.subnav {
  border-block: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.subnav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-80);
  padding-block: var(--space-24) var(--space-16);
}

.subnav__link {
  display: inline-block;
  padding: var(--space-8);
  font-family: var(--font-body);
  font-size: 18px; /* Figma: Inter Regular 18px */
  font-weight: var(--fw-regular);
  letter-spacing: 0.36px;
  color: var(--color-text-heading);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}
.subnav__link:hover,
.subnav__link.is-active {
  color: var(--color-brand);
  text-decoration-color: var(--color-brand);
}

/* Tablet — tighten the spacing so all 5 stay on one line longer */
@media (max-width: 1024px) {
  .subnav__list {
    gap: var(--space-48);
  }
}

/* Mobile — wrap to a compact two-row cluster */
@media (max-width: 640px) {
  .subnav__list {
    gap: var(--space-24) var(--space-32);
  }
}

/* --------------------------------------------------------------------------
   FOOTER  (Figma: 1:964 — 1920×586, content within 160px margins)
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: 96px 16px;
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
}

/* Top: 3 columns spread across the content width -------------------------- */
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}

/* Column heading: Playfair Bold 20px, brand gold (Figma) */
.footer-col__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.4px;
  line-height: var(--lh-body);
  color: var(--color-brand);
  margin-bottom: 13px;
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.footer-col__list a {
  font-size: var(--fs-body);
  letter-spacing: 0.18px;
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}
.footer-col__list a:hover {
  color: var(--color-brand);
  text-decoration-color: var(--color-brand);
}

/* Newsletter column ------------------------------------------------------- */
.footer-newsletter {
  flex: 0 1 463px;
  max-width: 463px;
}
.footer-newsletter__text {
  font-family: var(--font-heading); /* Figma: Playfair Display Regular 20px */
  font-size: 20px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.4px;
  line-height: var(--lh-body);
  color: var(--color-text-heading);
  margin-bottom: var(--space-24);
}

/* Underline input (Figma: bottom border only, transparent) --------------- */
.footer-form {
  position: relative;
  max-width: 421px;
  margin-bottom: var(--space-32);
}
.footer-form input {
  width: 100%;
  padding: 10px 40px 10px 8px;
  font-size: var(--fs-body);
  letter-spacing: 0.18px;
  color: var(--color-text-heading);
  background-color: transparent;
  border: 0;
  border-bottom: 0.8px solid rgba(28, 22, 18, 0.4);
  border-radius: 0;
}
.footer-form input::placeholder {
  color: rgba(26, 26, 26, 0.4);
}
.footer-form input:focus {
  outline: none;
  border-bottom-color: var(--color-brand);
}
.footer-form__submit {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: var(--color-brand);
  display: flex;
}
/* Honeypot — visually removed; only bots fill it. */
.footer-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.footer-form.is-loading {
  opacity: 0.7;
}
.footer-form.is-loading .footer-form__submit {
  opacity: 0.5;
  pointer-events: none;
}
/* Newsletter status message (AJAX response + double opt-in confirmation). */
.footer-form__msg {
  margin: 0 0 var(--space-24);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.18px;
}
.footer-form__msg:empty {
  margin: 0;
}
.footer-form__msg.is-success {
  color: #1a7f37;
}
.footer-form__msg.is-error {
  color: #c0392b;
}

/* Disclaimer line above the divider (Figma footer), left-aligned ----------- */
.footer-disclaimer {
  margin: 64px 0 20px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.footer-disclaimer strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}

/* Divider ----------------------------------------------------------------- */
.footer-divider {
  height: 2px;
  border: 0;
  background-color: var(--color-border); /* Figma divider */
  margin: 0;
}

/* Bottom bar -------------------------------------------------------------- */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: 56px;
}
.footer-bottom__logo img {
  width: 169px;
  height: auto;
}
.footer-bottom__copy {
  font-family: var(--font-body);
  font-size: var(--fs-body); /* Figma: Inter Light 18px */
  font-weight: var(--fw-light);
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.footer-bottom__legal {
  display: flex;
  gap: var(--space-48);
}
.footer-bottom__legal a {
  font-size: var(--fs-body);
  font-weight: var(--fw-light); /* Figma: Inter Light 18px */
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}
.footer-bottom__legal a:hover {
  color: var(--color-brand);
  text-decoration-color: var(--color-brand);
}

/* --- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-top {
    flex-wrap: wrap;
    gap: 48px;
  }
  .footer-newsletter {
    flex-basis: 100%;
    max-width: 100%;
    order: -1;
  }
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 640px) {
  .site-footer {
    padding-block: 56px 24px;
  }
  .footer-top {
    flex-direction: column;
    gap: 40px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    margin-top: 40px;
  }
}

/* --------------------------------------------------------------------------
   HOW JOYPATH WORKS  (Figma: 329:2258 — 1920×978)
   Centered head + 4 pillar cards radiating from a central "Nexus" circle,
   closed by a full-width statement banner.
   -------------------------------------------------------------------------- */
.how-it-works {
  padding-top: var(--space-120);
  padding-bottom: var(--space-64);
}

/* --- Head (Figma 329:2259) ---------------------------------------------- */
.hiw-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: 940px;
  margin: 0 auto 80px;
  text-align: center;
}
.hiw-head__eyebrow {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-brand);
}
.hiw-head__title {
  font-size: 48px;
  letter-spacing: 2.4px;
  line-height: var(--lh-heading);
  color: var(--color-text-heading);
}
.hiw-head__lead {
  font-size: 20px;
  line-height: var(--lh-body);
  letter-spacing: 0.08px;
  color: var(--color-text-secondary);
}

/* --- Diagram row: [Body Mind] · Nexus · [Fuel Life] --------------------- */
.hiw-diagram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.hiw-group {
  display: flex;
  gap: var(--space-32);
}

/* --- Pillar card (Figma 329:2264) --------------------------------------- */
.hiw-card {
  position: relative;
  flex: 0 0 294px;
  width: 294px;
  min-height: 540px;
  padding: 74px 24px 32px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-brand);
  border-radius: 12px;
}
.hiw-card__badge {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f3f1eb; /* warm tan, slightly deeper than the surface */
  border: 1px solid var(--color-brand);
  overflow: hidden;
}
.hiw-card__badge img {
  width: 48px;
  height: 48px;
}
.hiw-card__title {
  margin-bottom: 32px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 24px;
  line-height: var(--lh-body);
  letter-spacing: 0.24px;
  color: var(--color-text-heading);
  text-align: center;
}
.hiw-card__label {
  margin-bottom: var(--space-24);
  font-size: 22px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 0.088px;
  color: var(--color-text-secondary);
}

/* Capacity / activity lists (uniform 43px row pitch) */
.hiw-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hiw-list--cap {
  margin-bottom: 32px;
}
.hiw-list li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: 18px;
  line-height: var(--lh-body);
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.hiw-ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* --- Central Nexus (Figma 329:2338) ------------------------------------- */
.hiw-nexus {
  position: relative;
  flex: 0 0 274px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 274px;
  height: 264px;
  border-radius: 50%;
  background-color: var(--color-surface);
  border: 2px solid var(--color-brand);
  text-align: center;
}
.hiw-nexus__motif {
  position: absolute;
  top: -51px;
  left: 50%;
  transform: translateX(-50%);
  width: 99px;
  height: 86px;
}
.hiw-nexus__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 246px;
}
.hiw-nexus__title {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 24px;
  line-height: var(--lh-body);
  letter-spacing: 0.24px;
  color: var(--color-text-heading);
}
.hiw-nexus__body {
  font-size: 18px;
  line-height: var(--lh-body);
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}

/* Radiating arrows — one curve SVG + one straight SVG, oriented via transform.
   left/top are offsets from the circle centre (50% of .hiw-nexus). */
.hiw-arrow {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hiw-arrow img {
  display: block;
  width: 100%;
  height: 100%;
}
.hiw-arrow--straight {
  width: 32px;
  height: 32px;
}
.hiw-arrow--curve {
  width: 56px;
  height: 49px;
}
/* Offsets are percentages of the .hiw-nexus box so the radial halo scales with
   the circle at every breakpoint. At the 274×264 canvas these resolve to the
   original pixel positions (e.g. -7.66% × 274 ≈ 21px outside the left edge). */
.hiw-arrow--right {
  left: 107.66%;
  top: 50%;
}
.hiw-arrow--right img {
  transform: rotate(90deg);
}
.hiw-arrow--left {
  left: -7.66%;
  top: 50%;
}
.hiw-arrow--left img {
  transform: rotate(-90deg);
}
.hiw-arrow--tl {
  left: 1.46%;
  top: -6.06%;
}
.hiw-arrow--tl img {
  transform: scaleY(-1);
}
.hiw-arrow--bl {
  left: 1.46%;
  top: 107.95%;
}
.hiw-arrow--tr {
  left: 97.81%;
  top: -6.06%;
}
.hiw-arrow--tr img {
  transform: scale(-1, -1);
}
.hiw-arrow--br {
  left: 97.81%;
  top: 107.95%;
}
.hiw-arrow--br img {
  transform: scaleX(-1);
}

/* --- Closing banner (Figma 329:2461) ------------------------------------ */
.hiw-banner {
  margin-top: 80px;
  padding: var(--space-16);
  font-size: 24px;
  line-height: var(--lh-body);
  letter-spacing: 0.096px;
  text-align: center;
  color: var(--color-text-heading);
  background-color: var(--color-surface);
  border: 1px solid rgba(74, 74, 74, 0.16);
  border-radius: 12px;
}
.hiw-banner__accent {
  font-weight: var(--fw-medium);
  color: var(--color-brand);
}

/* --- Keep all 4 pillars in ONE row below the full design canvas ---------- */
/* The full Body·Mind | Nexus | Fuel·Life row with radiating arrows only fits
   at the ~1920 design canvas (~1514px of content). Below that — every common
   laptop/desktop width — we keep the 4 pillars side by side by letting the
   cards SHRINK to share the row (instead of stacking into two layers, which
   hides the whole framework). Arrows are dropped; type/padding scale down. */
@media (max-width: 1899px) {
  .hiw-diagram {
    gap: var(--space-24);
  }
  .hiw-group {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--space-24);
  }
  .hiw-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 56px 16px 24px;
  }
  .hiw-card__title {
    margin-bottom: 20px;
    font-size: 20px;
  }
  .hiw-card__label {
    margin-bottom: var(--space-16);
    font-size: 18px;
  }
  .hiw-list {
    gap: 10px;
  }
  .hiw-list--cap {
    margin-bottom: 20px;
  }
  .hiw-list li {
    font-size: 15px;
  }
  .hiw-ico {
    width: 18px;
    height: 18px;
  }
  .hiw-nexus {
    flex: 0 0 210px;
    width: 210px;
    height: 210px;
  }
  .hiw-nexus__text {
    width: 180px;
    gap: 12px;
  }
  .hiw-nexus__title {
    font-size: 20px;
  }
  .hiw-nexus__body {
    font-size: 15px;
  }
  /* Keep the radial halo — offsets scale with the box; just shrink the icons. */
  .hiw-arrow--straight {
    width: 24px;
    height: 24px;
  }
  .hiw-arrow--curve {
    width: 44px;
    height: 38px;
  }
}

/* --- Landscape tablet / small laptop: denser cards, still one row -------- */
@media (max-width: 1024px) {
  .hiw-head__title {
    font-size: 36px;
    letter-spacing: 1.2px;
  }
  .hiw-head__lead {
    font-size: 18px;
  }
  .hiw-group {
    gap: var(--space-16);
  }
  .hiw-card {
    padding: 52px 12px 20px;
  }
  .hiw-card__title {
    margin-bottom: 16px;
    font-size: 18px;
  }
  .hiw-card__label {
    font-size: 16px;
  }
  .hiw-list li {
    font-size: 14px;
  }
  .hiw-nexus {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
  }
  .hiw-nexus__text {
    width: 150px;
  }
  .hiw-nexus__title {
    font-size: 18px;
  }
  .hiw-nexus__body {
    font-size: 14px;
  }
  .hiw-arrow--straight {
    width: 18px;
    height: 18px;
  }
  .hiw-arrow--curve {
    width: 36px;
    height: 31px;
  }
}

/* --- Mobile / small tablet: separate into one card per row --------------- */
/* Below 768px four readable cards no longer fit, so stack the two groups
   above/below the full-size Nexus — Body · Mind · Nexus · Fuel · Life. */
@media (max-width: 768px) {
  .hiw-diagram {
    flex-direction: column;
    align-items: center;
    gap: var(--space-48);
  }
  .hiw-group {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
  }
  /* Restore comfortable sizing — each card now has the full width. */
  .hiw-card {
    flex: 1 1 auto;
    width: 100%;
    max-width: 360px;
    min-height: 0;
    padding: 74px 24px 32px;
  }
  .hiw-card__title {
    margin-bottom: 32px;
    font-size: 24px;
  }
  .hiw-card__label {
    margin-bottom: var(--space-24);
    font-size: 22px;
  }
  .hiw-list {
    gap: 14px;
  }
  .hiw-list--cap {
    margin-bottom: 32px;
  }
  .hiw-list li {
    font-size: 18px;
  }
  .hiw-ico {
    width: 22px;
    height: 22px;
  }
  /* The motif overhangs the circle top by ~51px; add clearance so the space
     above and below the circle reads evenly in the stacked layout. */
  .hiw-nexus {
    flex: 0 0 auto;
    width: 274px;
    height: 264px;
    margin-top: var(--space-32);
  }
  .hiw-nexus__text {
    width: 246px;
    gap: 18px;
  }
  .hiw-nexus__title {
    font-size: 24px;
  }
  .hiw-nexus__body {
    font-size: 18px;
  }
  /* Stacked column — the radial arrows would point into empty space. */
  .hiw-arrow {
    display: none;
  }
}

/* --- Smallest phones: trim the surrounding type ------------------------- */
@media (max-width: 640px) {
  .hiw-head {
    margin-bottom: var(--space-48);
  }
  .hiw-head__title {
    font-size: 28px;
  }
  .hiw-head__eyebrow {
    font-size: 16px;
  }
  .hiw-card {
    max-width: 340px;
  }
  .hiw-banner {
    margin-top: var(--space-48);
    font-size: 18px;
  }
}

/* ==========================================================================
   THE BIGGER PICTURE  (Figma: 2012:433 — 1920×832)
   Two columns: left = copy (666), right = rounded image (760×802).
   -------------------------------------------------------------------------- */
.bigger-picture {
  background-color: var(--color-surface);
  padding-block: var(--space-120);
}
.bp__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-80);
}

/* --- Copy block ---------------------------------------------------------- */
.bp-copy {
  flex: 0 1 666px;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.bp-copy__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.bp-copy__eyebrow {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-brand);
}
.bp-copy__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* Figma: Playfair Regular 48px */
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.bp-copy__text {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.bp-copy__text strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

/* --- Media (rounded image) ----------------------------------------------- */
.bp-media {
  flex: 0 0 760px;
  max-width: 760px;
}
.bp-media__img {
  display: block;
  width: 100%;
  aspect-ratio: 760 / 802;
  object-fit: cover;
  border-radius: 24px;
}

/* --- Tablet & below: stack image above copy ------------------------------ */
@media (max-width: 1024px) {
  .bigger-picture {
    padding-block: var(--space-80);
  }
  .bp__inner {
    flex-direction: column;
    gap: var(--space-64);
  }
  .bp-copy,
  .bp-media {
    flex-basis: auto;
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 640px) {
  .bp-copy__title {
    font-size: 32px;
    letter-spacing: 1px;
  }
  .bp-copy__eyebrow {
    font-size: 16px;
  }
  .bp-copy__text {
    font-size: 16px;
  }
}

/* ==========================================================================
   JOYPATH FRAMEWORK — Capacities & Activities  (Figma 332:3590)
   ========================================================================== */
.framework {
  /* top trimmed so it doesn't double with Bigger Picture's bottom padding
     (keeps the ~184px inter-section rhythm used above) */
  padding-top: var(--space-64);
  padding-bottom: var(--space-120);
}

/* --- Section head -------------------------------------------------------- */
.fw-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: 980px;
  margin: 0 auto 80px;
  text-align: center;
}
.fw-head__eyebrow {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-brand);
}
.fw-head__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* Playfair 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.fw-head__lead {
  font-size: 20px;
  line-height: var(--lh-body);
  letter-spacing: 0.08px;
  color: var(--color-text-secondary);
}

/* --- Two-column grid w/ centre divider ----------------------------------- */
.fw-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.fw-col {
  flex: 0 1 720px;
  min-width: 0;
}
.fw-divider {
  position: relative;
  flex: 0 0 1px;
  margin-inline: 80px;
  background-color: var(--color-border);
}
.fw-divider__motif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 73.5px; /* exact Figma size: Group 14 = 73.49 × 63.53 (ratio ~1.157, no stretch) */
  height: 63.5px;
  max-width: none; /* escape the global img{max-width:100%} clamping to the 1px divider */
  object-fit: contain;
  /* no background mask: the divider line runs continuously behind the motif (Figma layers
     the stroke-only quatrefoil on top of the full-height line — the line shows through). */
}

/* --- Column head -------------------------------------------------------- */
.fw-col__head {
  margin-bottom: var(--space-32);
}
.fw-col__title {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 0.4px;
  color: var(--color-text-heading);
  margin-bottom: var(--space-8);
}
.fw-col__sub {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-24);
}
.fw-col__intro {
  font-size: 18px;
  line-height: var(--lh-body);
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.fw-col__note {
  margin-top: var(--space-32);
  font-size: 18px;
  line-height: var(--lh-body);
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}

/* --- Icon rows ---------------------------------------------------------- */
.fw-list {
  list-style: none;
  border-top: 1px solid var(--color-border);
}
.fw-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-block: 20px;
  border-bottom: 1px solid var(--color-border);
}
.fw-item__badge {
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #f3f1eb; /* warm tan badge, matches How-It-Works */
  overflow: hidden;
}
.fw-item__badge img {
  width: 32px;
  height: 32px;
}
.fw-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fw-item__title {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 20px;
  line-height: var(--lh-heading);
  letter-spacing: 0.2px;
  color: var(--color-text-heading);
}
.fw-item__desc {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.16px;
  color: var(--color-text-secondary);
}

/* --- Closing banner ----------------------------------------------------- */
.fw-banner {
  margin-top: 80px;
  padding: var(--space-24);
  font-size: 24px;
  line-height: var(--lh-body);
  letter-spacing: 0.096px;
  text-align: center;
  color: var(--color-text-heading);
  background-color: var(--color-surface);
  border: 1px solid rgba(74, 74, 74, 0.16);
  border-radius: 12px;
}

/* --- Tablet & below: stack the two columns ------------------------------- */
@media (max-width: 1024px) {
  .framework {
    padding-top: var(--space-64);
    padding-bottom: var(--space-80);
  }
  .fw-head {
    margin-bottom: var(--space-48);
  }
  .fw-grid {
    flex-direction: column;
  }
  .fw-col {
    flex-basis: auto;
    width: 100%;
    max-width: none;
  }
  .fw-col__title {
    font-size: 32px;
  }
  /* centre divider becomes a horizontal rule between the stacked columns */
  .fw-divider {
    flex: 0 0 1px;
    width: 100%;
    height: 1px;
    margin-inline: 0;
    margin-block: var(--space-48);
  }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
  .fw-head__title {
    font-size: 28px;
    letter-spacing: 1px;
  }
  .fw-head__eyebrow {
    font-size: 16px;
  }
  .fw-head__lead {
    font-size: 16px;
  }
  .fw-col__title {
    font-size: 28px;
  }
  .fw-item {
    gap: var(--space-12);
  }
  .fw-item__badge {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }
  .fw-item__badge img {
    width: 28px;
    height: 28px;
  }
  .fw-banner {
    margin-top: var(--space-48);
    padding: var(--space-16);
    font-size: 18px;
  }
}

/* ==========================================================================
   LONGEVITY INSIGHTS — recent posts (Figma 289:3286)
   ========================================================================== */
.insights {
  /* trim top so it doesn't double with Framework's 120px bottom (~184px rhythm) */
  padding-top: var(--space-64);
  padding-bottom: var(--space-120);
}

/* --- Section head: intro (left) + View All (right) ----------------------- */
.insights-head {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Figma: "View All" CTA is vertically centered against the left intro block */
  gap: var(--space-32);
  margin-bottom: 40px;
}
.insights-head__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 750px;
}
.insights-head__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow); /* 16px */
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand);
}
.insights-head__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* Playfair 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-text-heading);
}
.insights-head__lead {
  font-size: var(--fs-body); /* 18px */
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}
.insights-head__all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--fs-body); /* 18px */
  font-weight: var(--fw-medium);
  color: var(--color-brand);
  transition: gap var(--transition-base), color var(--transition-base);
}
.insights-head__all:hover {
  gap: var(--space-12);
  color: #8f6a33;
}
.insights-head__arrow {
  font-size: 1.1em;
  line-height: 1;
}

/* --- Category filter pills ---------------------------------------------- */
.insights-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  list-style: none;
  margin: 0 0 60px;
  padding: 0;
}
.insights-filter {
  padding: 8px 24px;
  font-family: var(--font-body);
  font-size: var(--fs-body); /* 18px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-text-secondary);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base),
    border-color var(--transition-base);
}
.insights-filter:hover {
  color: var(--color-text-heading);
}
.insights-filter.is-active {
  color: var(--color-text-heading);
  font-weight: var(--fw-medium);
  background-color: var(--color-white);
  border-color: var(--color-border);
}

/* --- Body grid: featured (left) + list (right) -------------------------- */
.insights-grid {
  display: flex;
  align-items: stretch; /* equal-height columns: the feature bottom lines up with the 3-card list */
  gap: var(--space-64);
}
.insights-grid > * {
  flex: 1 1 0;
  min-width: 0;
}
/* Featured image is the dominant one — a wider column keeps it landscape while
   it fills the list's height, so the left/right bottoms stay aligned. */
.insights-grid .post-feature {
  flex: 1.35 1 0;
}

/* Shared post meta (date + read time) */
.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.2px;
}
.post-meta__date {
  color: var(--color-text-secondary);
}
.post-meta__read {
  color: var(--color-text-secondary);
}
.post-meta__cat {
  color: var(--color-brand);
  font-weight: var(--fw-medium);
}
.post-meta__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
}

/* Featured post — image on top, meta + title below (readable, off the image). */
.post-feature {
  display: flex;
}
.post-feature__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; /* fill the column so the bottom aligns with the 3-card list */
}
/* Media wrapper clips the hover zoom; it flexes to fill the height above the
   text so the feature bottom lines up with the 3-card list on the right.
   The aspect-ratio floor makes the box size from its width (not the uploaded
   image's intrinsic height), so any admin upload — portrait, huge, tiny — is
   cropped to 3:2 by object-fit instead of ballooning the whole section. When
   the 3-card list is taller, flex-grow still stretches the media past 3:2 and
   object-fit: cover keeps the crop clean. */
.post-feature__media {
  flex: 1 1 auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.post-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.post-feature__link:hover .post-feature__img {
  transform: scale(1.03);
}
.post-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16); /* meta -> title, matches the compact cards on the right */
  padding-top: var(--space-24); /* breathing room below the image (was var(--space-20): undefined token -> 0) */
}
.post-feature__title {
  font-family: var(--font-body);
  font-size: var(--fs-h5); /* 28px */
  font-weight: var(--fw-medium);
  line-height: 1.3; /* matches .post-card__title so wrapped lines read evenly */
  color: var(--color-text-heading);
  transition: color var(--transition-base);
}
/* Match the Articles listing card hover: title turns brand color. */
.post-feature__link:hover .post-feature__title {
  color: var(--color-brand);
}

/* Compact post list */
.insights-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}
.post-card__img {
  flex: 0 0 40%;
  width: 40%;        /* pair with flex-basis so the img can't exceed its track */
  min-width: 0;      /* clear the img's intrinsic-width floor (min-width:auto) */
  aspect-ratio: 3 / 2; /* landscape, matches the feature + listing cards (was 313 / 260) */
  object-fit: cover;
  border-radius: var(--radius-md);
}
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;      /* allow the body to shrink instead of overflowing */
}
.post-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-h6); /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-text-heading);
  transition: color var(--transition-base);
}
/* Match the Articles listing card hover: title turns brand color (no underline). */
.post-card__link:hover .post-card__title {
  color: var(--color-brand);
}

/* --- Insights: tablet --------------------------------------------------- */
@media (max-width: 1024px) {
  .insights {
    padding-top: var(--space-64);
    padding-bottom: var(--space-80);
  }
  .insights-head {
    margin-bottom: var(--space-32);
  }
  .insights-filters {
    margin-bottom: var(--space-48);
  }
  .insights-grid {
    flex-direction: column;
    gap: var(--space-48);
  }
  .post-feature__link {
    height: auto; /* stacked full-width: media ratio drives height, text sits below */
  }
  .post-feature__media {
    flex: none; /* stacked: fixed ratio instead of filling a column */
    aspect-ratio: 3 / 2;
  }
  .insights-list {
    gap: var(--space-32);
  }
}

/* --- Insights: mobile --------------------------------------------------- */
@media (max-width: 640px) {
  .insights-head {
    flex-direction: column;
    align-items: flex-start; /* keep intro + CTA left-aligned when stacked (base centers for the desktop row) */
    gap: var(--space-16);
  }
  .insights-filters {
    gap: var(--space-12);
    margin-bottom: var(--space-32);
  }
  .insights-filter {
    padding: 6px 18px;
    font-size: var(--fs-body-sm); /* 16px */
  }
  .post-feature__title {
    font-size: 22px;
  }
  .post-card__link {
    flex-direction: column;   /* stack: full-width image on top, title below (no tiny side thumb) */
    align-items: stretch;
    gap: var(--space-16);
  }
  .post-card__img {
    flex: none;
    width: 100%;              /* full-width 3:2, matches the feature + article cards */
  }
  .post-card__title {
    font-size: 18px;
  }
  .post-meta {
    gap: var(--space-12);
    font-size: 13px;
  }
}

/* ==========================================================================
   NEXUS COMPASS — progress paths + what it helps you do  (Figma 332:3951)
   3-column band: bordered card | centre copy | bordered card, all flush
   within the 1600px content width (399 + 666 + 399, ~68px gaps).
   ========================================================================== */
.compass {
  /* trim top so it doesn't double with Insights' 120px bottom (~184px rhythm) */
  padding-top: var(--space-64);
  padding-bottom: var(--space-120);
}

.compass__grid {
  display: flex;
  align-items: stretch;
  /* Fluid gap so the 3 columns aren't squeezed on laptops; 68px at the wide canvas. */
  gap: clamp(32px, 4vw, 68px);
}

/* --- Side cards ---------------------------------------------------------- */
.compass-card {
  /* Fluid: shrinks gracefully on laptops, capped at the 399px Figma width so the
     1920 canvas stays pixel-perfect. (Was a rigid flex:0 0 399px, which crushed
     the centre copy on every viewport between 1025px and ~1600px.) */
  flex: 1 1 320px;
  max-width: 399px;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: var(--space-32);
  background-color: var(--color-surface);
  border: 1px solid var(--color-brand);
  border-radius: 12px;
}
.compass-card--center {
  justify-content: center; /* left card: content vertically centred (Figma) */
}
.compass-card--top {
  justify-content: flex-start; /* right card: content top-aligned (Figma) */
}
.compass-card__eyebrow {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* --- Icon + text rows (shared by both cards) ----------------------------- */
.compass-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.compass-card--top .compass-list {
  gap: var(--space-28);
}
.compass-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}
.compass-item__icon {
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-white);
  overflow: hidden;
}
.compass-item__icon img {
  width: 32px;
  height: 32px;
}
.compass-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}
.compass-item__title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  letter-spacing: 0.24px;
  color: var(--color-text-heading);
}
/* Progress-path tier names are uppercase in Figma; the right card stays title-case */
.compass-card--center .compass-item__title {
  text-transform: uppercase;
}
.compass-item__desc {
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}

/* --- Centre copy block --------------------------------------------------- */
.compass-copy {
  /* Proportionally wider than the cards and the flexible filler of the row;
     caps at 666px (max-width below) to match the Figma canvas. */
  flex: 1.4 1 380px;
  align-self: flex-start;
  padding-top: var(--space-32); /* align copy eyebrow with card eyebrows (cards have 32px inner padding) */
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  max-width: 666px;
}
.compass-copy__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.compass-copy__eyebrow {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-brand);
}
.compass-copy__eyebrow strong {
  font-weight: var(--fw-semibold);
}
.compass-copy__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* Playfair 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.compass-copy__text {
  font-size: 18px;
  line-height: var(--lh-body);
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.compass-copy__cta {
  align-self: flex-start;
  margin-top: var(--space-8);
}

/* --- Laptop & below: stack the three columns ----------------------------- */
/* 1200px (not 1024) because the side cards + centre copy need ~1600px of content
   width; below that the 3-column row crushes the copy, so stack instead. */
@media (max-width: 1200px) {
  .compass {
    padding-top: var(--space-64);
    padding-bottom: var(--space-80);
  }
  .compass__grid {
    flex-direction: column;
    gap: var(--space-48);
  }
  .compass-card {
    flex-basis: auto;
    width: 100%;
    max-width: none;
  }
  /* lead with the message, then the two supporting cards */
  .compass-copy {
    order: -1;
    align-self: stretch;
    flex-basis: auto; /* vertical stack: don't carry the desktop main-axis basis */
    padding-top: 0; /* offset only applies to the 3-col desktop alignment */
    max-width: none;
  }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
  .compass-card {
    padding: var(--space-24);
    gap: var(--space-32);
  }
  .compass-card__eyebrow,
  .compass-copy__eyebrow {
    font-size: 16px;
  }
  .compass-copy__title {
    letter-spacing: 1px;
  }
  .compass-item {
    gap: var(--space-16);
  }
  .compass-item__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }
  .compass-item__icon img {
    width: 28px;
    height: 28px;
  }
  .compass-item__title {
    font-size: 20px;
  }
  .compass-item__desc,
  .compass-copy__text {
    font-size: 16px;
  }
}

/* ==========================================================================
   MOBILE SECTION RHYTHM  (review bugs #4 + #9)
   Nexus, How it works, and Bigger picture never got a ≤640 top-padding
   reduction, so they kept their 80–120px desktop tops on phones — leaving big
   empty bands above their headings (worst: Nexus→How-it-works ≈ 200px combined).
   Normalize every section's mobile top padding to the 64px the other sections
   (Framework / Insights / Compass) already use. Placed last so it wins source
   order over the per-section media blocks above.
   ========================================================================== */
@media (max-width: 640px) {
  .nexus,
  .how-it-works,
  .bigger-picture {
    padding-top: var(--space-64);
  }
}

/* ==========================================================================
   ARTICLES LISTING PAGE  (articles.html — Figma frame 403:1878)
   Reuses the shared header/footer + .insights-filters. New: intro band,
   3-col article-card grid, and pagination.
   ========================================================================== */

/* Intro band — clears the fixed 183px header (183 + 60 = 243, Figma y=243). */
.articles-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding-top: 243px;
  text-align: center;
}
.articles-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand);
}
.articles-hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-text-heading);
}
.articles-hero__lead {
  max-width: 800px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

/* Scoped CPT search box — sits in the hero of the Articles / Start-the-Nexus
   listings and on the search-results page. A rounded white pill with a gold
   submit button, matching the site's .btn-primary accent. The hero's flex gap
   handles spacing above it, so no margin is needed here. */
.jp-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 520px;
  padding: 4px 4px 4px 18px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-align: left;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.jp-search:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(166, 124, 61, 0.12);
}
.jp-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 7px 10px 7px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-heading);
}
.jp-search__input:focus {
  outline: none;
}
.jp-search__input::placeholder {
  color: rgba(26, 26, 26, 0.55);
}
.jp-search__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-brand);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.jp-search__btn:hover {
  background-color: #8f6a33;
}
.jp-search__btn svg {
  width: 18px;
  height: 18px;
}

/* Toolbar — category filters (left) + search (right) share one row so the two
   controls no longer stack and eat vertical space. Wraps to two rows on narrower
   screens; fully stacks + centres on mobile (see responsive overrides below). */
.articles-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-24) var(--space-40);
  margin-top: 56px;
  margin-bottom: 60px;
}
/* Filters take the left, left-aligned. Cancels the standalone margins from
   .insights-filters/.articles-filters — the toolbar owns spacing now. */
.articles-toolbar .articles-filters {
  flex: 0 1 auto;
  justify-content: flex-start;
  margin: 0;
}
/* Search sits on the right as the secondary control — capped narrow so it reads
   as less dominant than the filters, and hugs its content height. */
.articles-toolbar .jp-search {
  flex: 0 1 360px;
  max-width: 360px;
}

/* Bottom breathing room before the footer. */
.articles-body {
  padding-bottom: var(--space-120);
}

/* --- 3-column grid ------------------------------------------------------- */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-64);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Filter-less listings (Start the Nexus) have no .articles-filters band above
   the grid, so restore the hero→grid breathing room those filters provide
   (~56+60px on Articles). Scoped to the modifier so Articles stays untouched. */
.articles-grid--standalone {
  margin-top: var(--space-120);
}

/* --- Article card -------------------------------------------------------- */
.article-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  height: 100%;
}
.article-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
}
.article-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.article-card__link:hover .article-card__img {
  transform: scale(1.03);
}
.article-card__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.article-card__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.article-card__cat {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.056px;
  line-height: 1.6;
  color: var(--color-brand);
}
.article-card__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.article-card__title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: 0.12px;
  color: var(--color-text-heading);
  transition: color var(--transition-base);
  /* Always reserve two lines so 1-line titles don't shift the copy below up;
     clamp longer titles to two lines to keep every card aligned. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2em * var(--lh-heading));
}
.article-card__link:hover .article-card__title {
  color: var(--color-brand);
}
.article-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.09px;
  color: var(--color-text-secondary);
}

/* Key Takeaways sub-box */
.article-card__takeaways {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-12);
  background-color: #f3f1eb;
  border-radius: var(--radius-md);
}
.takeaways__title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-text-heading);
}
.takeaways__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}
.takeaways__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.takeaways__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}
.takeaways__bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}
.takeaways__bullet svg {
  display: block;
}

/* Meta row */
.article-card__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}
.article-card__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
}

/* --- Pagination ---------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  margin-top: var(--space-64);
}
.pagination__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-text-heading);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base),
    border-color var(--transition-base);
}
.pagination__btn:hover:not(:disabled) {
  color: var(--color-white);
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}
.pagination__btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.pagination__status {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}
.pagination__current {
  color: var(--color-text-heading);
  font-weight: var(--fw-medium);
}

/* ── Articles listing — responsive ──────────────────────────────────────── */
/* Below this width the search + filters no longer sit comfortably side by side,
   so instead of letting the row wrap into an awkward left-aligned stack we stack
   them deliberately and centre both. */
@media (max-width: 1200px) {
  .articles-toolbar {
    flex-direction: column;
    align-items: center;
  }
  .articles-toolbar .jp-search {
    /* Toolbar is now a column: reset the row-oriented flex so 320px is no
       longer read as a vertical basis (which ballooned the bar into a tall
       oval). Let it hug its content height and fill the width instead. */
    flex: 0 0 auto;
    width: 100%;
  }
  .articles-toolbar .articles-filters {
    justify-content: center;
  }
}

/* Header stays ~183px tall (non-scrolled) at every width — no logo shrink — */
/* so the hero top-padding keeps clearing the fixed header on tablet/mobile.  */
@media (max-width: 1024px) {
  .articles-hero {
    padding-top: 215px;
    gap: var(--space-12);
  }
  .articles-hero__title {
    font-size: 40px;
  }
  .articles-toolbar {
    margin-top: 40px;
    margin-bottom: 48px;
  }
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-40);
  }
  .articles-grid--standalone {
    margin-top: var(--space-80);
  }
}

@media (max-width: 640px) {
  .articles-hero {
    padding-top: 200px;
  }
  .articles-hero__title {
    font-size: 32px;
  }
  .articles-hero__lead {
    font-size: 16px;
  }
  /* Stack search over filters and centre both once the row gets too tight. */
  .articles-toolbar {
    flex-direction: column;
    align-items: stretch;
    margin-top: 32px;
    margin-bottom: 40px;
  }
  .articles-toolbar .jp-search {
    max-width: none;
  }
  .articles-toolbar .articles-filters {
    justify-content: center;
  }
  .articles-grid {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .articles-grid--standalone {
    margin-top: var(--space-64);
  }
  .article-card__title {
    font-size: 22px;
  }
  .article-card__desc,
  .takeaways__title,
  .takeaways__item,
  .article-card__meta {
    font-size: 16px;
  }
  .pagination {
    margin-top: var(--space-40);
    gap: var(--space-16);
  }
  .pagination__btn {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   CONTACT PAGE — contact.html (Figma 527:2611 in fileKey 0RAM25wimW3STzyeHdCDT0)
   ========================================================================== */

.contact {
  background-color: var(--color-surface);
}

/* --- Hero band (Figma 527:2611) — full-bleed silk band ------------------- */
.contact-hero {
  padding-top: 223px; /* 183 fixed header + 40 gap */
}
.contact-hero__band {
  max-width: var(--container-max); /* 1920 */
  margin: 0 auto;
  min-height: 400px;
  display: flex;
  align-items: center;
  border-radius: var(--space-12);
  overflow: hidden;
  background-color: #efe9de;
  /* --hero-image lets the page swap the silk artwork via an inline style
     (ACF "Background Image"); the var() fallback keeps the bundled silk when
     no image is set, while the gradient overlay always sits on top. */
  background-image:
    radial-gradient(120% 150% at 72% 28%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(236, 223, 214, 0.18) 58%,
      rgba(236, 223, 214, 0) 100%),
    var(--hero-image,
      url("../images/contact-hero-silk-2.png"),
      url("../images/contact-hero-silk.png"));
  background-size: cover, cover, cover;
  /* Image anchored bottom-center so the main subject (lower in the frame)
     stays visible; gradient overlay stays centered. */
  background-position: center, center bottom, center bottom;
  background-repeat: no-repeat;
}
.contact-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.contact-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3); /* 48px */
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.contact-hero__sub {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: var(--lh-body);
  letter-spacing: 0.08px;
  color: var(--color-text-secondary);
}

/* --- Contact section: info (left) + form (right) ------------------------- */
.contact-main {
  padding-top: var(--space-120); /* ~100px gap below hero, rounds to rhythm */
  padding-bottom: var(--space-120);
}
.contact-main__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-120); /* 594 + 120 + 886 = 1600 */
}

/* Contact info (Figma 534:5394, w594) */
.contact-info {
  flex: 0 1 594px; /* shrinkable so 594+886+120 grid never overflows below 1920 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
  padding-top: 142px; /* aligns "We're Here to Help" with the form's first field row */
}
.contact-info__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.contact-info__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4); /* 36px */
  line-height: var(--lh-heading);
  letter-spacing: 1.8px;
  color: var(--color-text-heading);
}
.contact-info__text {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}
.contact-info__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}
.contact-info__row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.contact-info__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--space-4);
  background-color: var(--color-brand-light);
  color: var(--color-brand);
}
.contact-info__value {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}
.contact-info__value:hover {
  color: var(--color-brand);
}

/* Form card (Figma 533:5290, w886) */
.contact-form-card {
  flex: 0 1 886px; /* shrinkable; min-width:0 lets inner fields compress */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  background-color: #f3f1eb;
  border: 1px solid var(--color-brand);
  border-radius: var(--space-12);
  padding: var(--space-40) var(--space-80); /* 40 / 80 → inner 726 */
}
.contact-form-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3); /* 48px */
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.contact-form__row {
  display: flex;
  gap: var(--space-32);
}
.contact-field {
  flex: 1;
  min-width: 0;
}
.contact-field__input {
  width: 100%;
  border: none;
  border-bottom: 0.8px solid rgba(28, 22, 18, 0.4);
  background-color: transparent;
  padding: 12px 17px 12px 8px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--color-text-heading);
  transition: border-color var(--transition-base);
}
.contact-field__input::placeholder {
  color: rgba(26, 26, 26, 0.75);
}
.contact-field__input:focus {
  outline: none;
  border-bottom-color: var(--color-brand);
}
.contact-field__textarea {
  min-height: 167px;
  resize: vertical;
}

.contact-form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.contact-form__submit-text {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-button); /* 21px */
  letter-spacing: var(--ls-button);
}
.contact-form__submit:hover {
  color: #7d5d2d;
}
/* Loading state (JS adds .is-loading on submit, clears on CF7 response):
   dim + block the button and swap the arrow for a spinner so the user sees
   that the message is being sent. */
.contact-form__submit.is-loading {
  cursor: wait;
  opacity: 0.6;
  pointer-events: none;
}
.contact-form__submit.is-loading svg {
  display: none;
}
.contact-form__submit.is-loading::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: contact-submit-spin 0.6s linear infinite;
}
@keyframes contact-submit-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form__submit.is-loading::after {
    animation-duration: 1.5s;
  }
}

/* --- Phone group: country dial-code dropdown + number -------------------- */
/* The flex children are CF7's .wpcf7-form-control-wrap spans (one per field);
   the visually-hidden labels are absolutely positioned, so they stay out of
   the row. Country code hugs its content; the number fills the rest. */
.contact-field--phone {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.contact-field--phone > .wpcf7-form-control-wrap[data-name="country"] {
  flex: 0 0 auto;
}
.contact-field--phone > .wpcf7-form-control-wrap[data-name="phone"] {
  flex: 1 1 auto;
  min-width: 0;
}
.contact-field--phone .contact-field__input {
  width: 100%;
}

/* Native <select> — only shown as a no-JS fallback (the JS widget below
   replaces it). Styled to match the underline fields. */
.contact-field__select {
  width: auto;
  max-width: 168px;
  border: none;
  border-bottom: 0.8px solid rgba(28, 22, 18, 0.4);
  background-color: transparent;
  padding: 12px 17px 12px 8px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--color-text-heading);
  transition: border-color var(--transition-base);
}
.contact-field__select:focus {
  outline: none;
  border-bottom-color: var(--color-brand);
}

/* --- Custom country-code dropdown (main.js initCountryCode) -------------- */
/* Collapsed trigger shows only the dial code (e.g. "+91"); the open panel
   lists full country names. The native <select> is hidden but kept in the DOM
   so it still submits and validates. */
.jp-ccd {
  position: relative;
}
.jp-ccd__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.jp-ccd__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-bottom: 0.8px solid rgba(28, 22, 18, 0.4);
  padding: 12px 4px 12px 8px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--color-text-heading);
  cursor: pointer;
  transition: border-color var(--transition-base);
}
.jp-ccd__toggle:focus-visible {
  outline: none;
  border-bottom-color: var(--color-brand);
}
.jp-ccd.is-open .jp-ccd__toggle {
  border-bottom-color: var(--color-brand);
}
.jp-ccd__value.is-placeholder {
  color: rgba(26, 26, 26, 0.55);
}
.jp-ccd__caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-brand);
  transition: transform var(--transition-base);
}
.jp-ccd.is-open .jp-ccd__caret {
  transform: rotate(180deg);
}
.jp-ccd__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  width: 264px;
  max-width: 78vw;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-brand);
  border-radius: var(--space-8);
  box-shadow: 0 12px 28px rgba(28, 22, 18, 0.16);
}
.jp-ccd__option {
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-text-heading);
  cursor: pointer;
}
.jp-ccd__option:hover,
.jp-ccd__option[aria-selected="true"] {
  background: var(--color-brand);
  color: #fff;
}

/* --- Privacy consent checkbox -------------------------------------------- */
.contact-consent .wpcf7-list-item {
  margin: 0;
}
.contact-consent .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  cursor: pointer;
}
.contact-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--color-brand);
}
.contact-consent .wpcf7-list-item-label {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-heading);
}
.contact-consent a {
  color: var(--color-brand);
  text-decoration: underline;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .contact-hero {
    padding-top: 200px;
  }
  .contact-hero__band {
    min-height: 320px;
  }
  .contact-main__grid {
    flex-direction: column;
    gap: var(--space-64);
  }
  .contact-info,
  .contact-form-card {
    flex: 1 1 auto;
    width: 100%;
  }
  .contact-info {
    padding-top: 0;
    order: 2; /* form first, info below — matches stacked reading order */
  }
  .contact-form-card {
    order: 1;
    padding: var(--space-40) var(--space-48);
  }
}

@media (max-width: 640px) {
  .contact-hero {
    padding-top: 160px;
  }
  .contact-hero__band {
    min-height: 240px;
    border-radius: var(--space-8);
  }
  .contact-hero__sub {
    font-size: var(--fs-body); /* 16px */
  }
  .contact-main {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
  }
  .contact-form-card {
    padding: var(--space-32) var(--space-24);
    gap: var(--space-32);
  }
  .contact-form__row {
    flex-direction: column;
    gap: var(--space-32);
  }
  .contact-field__select {
    max-width: 130px;
    font-size: 16px;
  }
  .contact-info__text,
  .contact-info__value {
    font-size: 16px;
  }
}

/* ==========================================================================
   TERMS PAGE — terms.html (Figma 400:1634 in fileKey 0RAM25wimW3STzyeHdCDT0)
   ========================================================================== */

.terms {
  background-color: var(--color-surface);
}

/* --- Hero band (Figma 400:1637) — same full-bleed silk band as contact ---- */
.terms-hero {
  padding-top: 223px; /* 183 fixed header + 40 gap */
}
.terms-hero__band {
  max-width: var(--container-max); /* 1920 */
  margin: 0 auto;
  min-height: 400px;
  display: flex;
  align-items: center;
  border-radius: var(--space-12);
  overflow: hidden;
  background-color: #efe9de;
  /* --hero-image lets the page swap the silk artwork via an inline style
     (ACF "Background Image"); the var() fallback keeps the bundled silk when
     no image is set, while the gradient overlay always sits on top. */
  background-image:
    radial-gradient(120% 150% at 72% 28%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(236, 223, 214, 0.18) 58%,
      rgba(236, 223, 214, 0) 100%),
    var(--hero-image,
      url("../images/contact-hero-silk-2.png"),
      url("../images/contact-hero-silk.png"));
  background-size: cover, cover, cover;
  /* Image anchored bottom-center so the main subject (lower in the frame)
     stays visible; gradient overlay stays centered. */
  background-position: center, center bottom, center bottom;
  background-repeat: no-repeat;
}
.terms-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.terms-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3); /* 48px */
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.terms-hero__sub {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: var(--lh-body);
  letter-spacing: 0.08px;
  color: var(--color-text-secondary);
}

/* --- Legal copy: single 900px column (Figma 400:1838) -------------------- */
.terms-content {
  padding-top: 60px; /* Figma gap band-bottom → content */
  padding-bottom: var(--space-120);
}
.terms-doc {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: var(--space-40); /* 40px between blocks */
}
.terms-doc__lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body); /* 18px */
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}
.terms-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.terms-section__title {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h6); /* 24px */
  line-height: var(--lh-heading);
  letter-spacing: 0.096px;
  color: var(--color-text-heading);
}
.terms-section__text {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body); /* 18px */
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}
.terms-link {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-base);
}
.terms-link:hover {
  color: #7d5d2d;
}

/* --- Rich legal copy: paragraphs, lists, links & emphasis ---------------- */
/* The lead and each section body are <div>s that may hold multiple paragraphs
   and bullet/numbered lists, so the block spacing lives on the children. */
.terms-doc__lead > *:first-child,
.terms-section__text > *:first-child {
  margin-top: 0;
}
.terms-doc__lead > *:last-child,
.terms-section__text > *:last-child {
  margin-bottom: 0;
}
.terms-doc__lead p,
.terms-section__text p {
  margin: 0 0 var(--space-12, 12px);
}
.terms-section__text ul,
.terms-section__text ol {
  margin: var(--space-12, 12px) 0;
  padding-left: 1.5em;
}
.terms-section__text ul {
  list-style: disc;
}
.terms-section__text ol {
  list-style: decimal;
}
.terms-section__text li {
  margin-bottom: var(--space-8, 8px);
}
.terms-section__text li:last-child {
  margin-bottom: 0;
}
.terms-doc__lead strong,
.terms-section__text strong {
  color: var(--color-text-heading);
  font-weight: 600;
}
.terms-doc__lead a,
.terms-section__text a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-base);
  overflow-wrap: anywhere; /* long emails / URLs never overflow the column */
}
.terms-doc__lead a:hover,
.terms-section__text a:hover {
  color: #7d5d2d;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .terms-hero {
    padding-top: 200px;
  }
  .terms-hero__band {
    min-height: 320px;
  }
}

@media (max-width: 640px) {
  .terms-hero {
    padding-top: 160px;
  }
  .terms-hero__band {
    min-height: 240px;
    border-radius: var(--space-8);
  }
  .terms-hero__sub {
    font-size: var(--fs-body); /* 16px */
  }
  .terms-content {
    padding-top: var(--space-40);
    padding-bottom: var(--space-64);
  }
  .terms-doc {
    gap: var(--space-32);
  }
}

/* ==========================================================================
   ARTICLE DETAIL PAGE  (Figma 507:716 — "Strength That Carries You Forward")
   ========================================================================== */
.article {
  background: var(--color-white);
}
.article-body {
  padding-top: 243px;   /* clears fixed header (Figma y=243) */
  padding-bottom: 120px;
}

/* --- Article header ------------------------------------------------------ */
.article-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  justify-content: center;
}
.article-meta__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-full);
  background: rgba(166, 124, 61, 0.1);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);          /* 18px */
  color: var(--color-text-secondary);
  letter-spacing: 0.072px;
}
.article-meta__item {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  letter-spacing: 0.18px;
}
.article-meta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(74, 74, 74, 0.3);
  flex-shrink: 0;
}
.article-head__title {
  /* Wider than the 900px reading measure so short titles stay on one line and
     a single trailing word doesn't drop to a second row. Still well inside the
     content column so long titles keep a balanced wrap. */
  max-width: 1200px;
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);            /* 48px */
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.article-head__sub {
  max-width: 900px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: var(--lh-body);
  letter-spacing: 0.08px;
  color: var(--color-text-secondary);
}

/* --- Share row (single article / nexus) ---------------------------------- */
.article-share {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.article-share__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-right: 2px;
}
.article-share__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.article-share__btn:hover,
.article-share__btn:focus-visible {
  color: var(--color-brand);
  border-color: var(--color-brand);
  background: rgba(166, 124, 61, 0.1);
}
.article-share__btn svg { display: block; }
/* "Copied!" confirmation bubble for the Instagram copy-link button. */
.article-share__copied {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.article-share__btn--copy.is-copied .article-share__copied { opacity: 1; }

.article-divider {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-40) 0;
}

/* --- Hero image ---------------------------------------------------------- */
.article-hero {
  margin: 0;
}
.article-hero img {
  display: block;
  max-width: 100%;                    /* scale large images down to fit    */
  height: auto;                       /* keep the uploaded aspect ratio     */
  margin-inline: auto;                /* centre images narrower than column */
  border-radius: var(--radius-sm);    /* 12px ~ rounded */
  border-radius: 12px;
}
.article-hero__caption {
  margin-top: var(--space-12);
  /* Match the Latest article-card title typography (.latest-card__title). */
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);          /* 18px */
  line-height: 1.7;
  letter-spacing: 0.072px;
  font-style: normal;
  text-align: center;
  color: var(--color-text-secondary);
}

/* --- Two-column layout --------------------------------------------------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 900px) 1px minmax(0, 570px);
  column-gap: 60px;
  align-items: start;
  margin-top: var(--space-64);
}
.article-vrule {
  align-self: stretch;
  width: 1px;
  background: var(--color-border);
}

/* --- Text column --------------------------------------------------------- */
.article-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}
.article-content p {
  font-family: var(--font-body);
  font-size: var(--fs-body);          /* 18px */
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}
.article-lead strong {
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}
.article-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.article-section__title {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h6);            /* 24px */
  line-height: var(--lh-body);
  letter-spacing: 0.096px;
  color: var(--color-text-heading);
}
.article-list {
  list-style: disc;
  padding-left: 27px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.article-list li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}

/* --- Editor prose fallback ---------------------------------------------- */
/* the_content() is wrapped in .article-prose. Markup pasted into the WP
   editor usually carries NO class, so it would otherwise hit the global
   `ul,ol{list-style:none}` reset and render bullet-less / unstyled. These
   rules give bare content elements the article design. They use :where()
   so their specificity stays 0 — the theme's own classed elements
   (.article-list, .callout__list, .article-nexus__list, …) always win, and
   any class the editor DID add can override freely. */
.article-prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}
:where(.article-prose) p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}
:where(.article-prose) h2,
:where(.article-prose) h3,
:where(.article-prose) h4,
:where(.article-prose) h5,
:where(.article-prose) h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  letter-spacing: 0.096px;
  color: var(--color-text-heading);
}
:where(.article-prose) h2 { font-size: var(--fs-h6); }  /* 24px — matches .article-section__title */
:where(.article-prose) h3 { font-size: var(--fs-h6); }
:where(.article-prose) h4,
:where(.article-prose) h5,
:where(.article-prose) h6 { font-size: var(--fs-body); }
/* Only UNclassed lists get the fallback treatment, so the default-body
   `.article-list` (and any editor list that DID get a class) is left alone. */
:where(.article-prose) ul:not([class]),
:where(.article-prose) ol:not([class]) {
  padding-left: 27px;
  color: var(--color-text-secondary);
}
:where(.article-prose) ul:not([class]) { list-style: disc; }
:where(.article-prose) ol:not([class]) { list-style: decimal; }
:where(.article-prose) ul:not([class]) ul { list-style: circle; }
:where(.article-prose) ul:not([class]) li,
:where(.article-prose) ol:not([class]) li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}
:where(.article-prose) ul:not([class]) li:last-child,
:where(.article-prose) ol:not([class]) li:last-child { margin-bottom: 0; }
:where(.article-prose) ul:not([class]) li > ul,
:where(.article-prose) ul:not([class]) li > ol,
:where(.article-prose) ol:not([class]) li > ul,
:where(.article-prose) ol:not([class]) li > ol { margin-top: var(--space-8); }
:where(.article-prose) ul:not([class]) li::marker,
:where(.article-prose) ol:not([class]) li::marker { color: var(--color-brand); }
:where(.article-prose) a {
  color: var(--color-brand);
  text-decoration: underline;
}
:where(.article-prose) strong,
:where(.article-prose) b {
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}
:where(.article-prose) em,
:where(.article-prose) i { font-style: italic; }
:where(.article-prose) blockquote {
  margin: 0;
  padding: var(--space-8) 0 var(--space-8) var(--space-16);
  border-left: 3px solid var(--color-brand);
  color: var(--color-text-body);
}

/* --- Nexus Effect block -------------------------------------------------- */
.article-nexus {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.article-nexus__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.article-nexus__list p strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

/* --- Closing quote ------------------------------------------------------- */
/* Closing line — plain body paragraph (matches Figma 507:716) */
.article-quote {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-style: normal;
  font-size: var(--fs-body);          /* 18px */
  line-height: var(--lh-body);
  color: var(--color-text-body);
}

/* --- Callout boxes (Best Practice / Key Take aways) ---------------------- */
.callout {
  position: relative;
  border-radius: var(--radius-md);    /* 16px */
  overflow: hidden;
}
.callout__motif {
  position: absolute;
  top: 25px;
  right: 24px;
  width: 118px;
  opacity: 0.8;        /* SVG paths carry opacity 0.5 → ~0.4 effective, matches Figma */
  pointer-events: none;
}
.callout__motif img { display: block; width: 100%; height: auto; }
.callout__motif--br {
  top: auto;
  bottom: 20px;
  right: 24px;
  width: 65px;
}

/* Best Practice — bordered card on white (matches Figma 507:760) */
.callout--practice {
  background: var(--color-white);
  border: 1px solid rgba(74, 74, 74, 0.2);
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;          /* Figma: 20px between title / rule / list */
}
.callout__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h5);            /* 28px */
  line-height: var(--lh-heading);
  letter-spacing: 0.56px;
  color: var(--color-text-heading);
}
.callout__rule {
  display: flex;
  align-items: center;
  gap: 4px;
}
.callout__rule-line {
  flex: 1 0 0;
  height: 1px;
  background: rgba(74, 74, 74, 0.18);
}

.callout__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.callout--practice .callout__row + .callout__row { position: relative; }
.callout--practice .callout__list { gap: 0; }
.callout--practice .callout__row {
  padding: 20px 0;    /* Figma: 20px above/below each dashed divider */
}
.callout--practice .callout__row:first-child { padding-top: 0; }
.callout--practice .callout__row:not(:last-child) {
  border-bottom: 1px dashed rgba(74, 74, 74, 0.25);
}
.callout__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.callout__bullet {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.callout__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);          /* 18px */
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}
/* JoyPath Essence points are rich text — editors can bold/italicise words. */
.callout__text strong,
.callout__text b { font-weight: 700; color: var(--color-text-primary); }
.callout__text em,
.callout__text i { font-style: italic; }
.callout__text a { color: var(--color-brand); text-decoration: underline; }
/* If a point comes through as a wrapped paragraph, keep it flush. */
.callout__text p { margin: 0; }

/* Key Take aways — warm beige card with brown header bar */
.callout--takeaways {
  background: rgba(166, 124, 61, 0.10);
  border: 1px solid rgba(166, 124, 61, 0.25);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.callout__bar {
  background: var(--color-brand);
  padding: var(--space-12) var(--space-24);
}
.callout__bar-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h5);            /* 28px */
  line-height: var(--lh-heading);
  letter-spacing: 0.56px;
  color: var(--color-white);
}
.callout__list--body {
  gap: var(--space-20, 20px);
  padding: 0 var(--space-24) var(--space-24);
}
.callout--takeaways .callout__row { align-items: center; }

/* --- End-of-content disclaimer (single article / nexus) ------------------ */
.article-disclaimer {
  margin-top: var(--space-8);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-border);
}
.article-disclaimer__text {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.06px;
  color: var(--color-text-secondary);
  opacity: 0.8;
  font-style: italic;
}
.article-disclaimer__text strong {
  font-weight: var(--fw-semibold);
  font-style: normal;
  color: var(--color-text-secondary);
}

/* --- Sidebar — Latest Articles ------------------------------------------- */
.article-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-bottom: 100px;
}
.article-aside__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);            /* 48px */
  line-height: var(--lh-heading);
  letter-spacing: 0.96px;
  color: var(--color-text-heading);
}
.latest-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.latest-card__link {
  display: flex;
  align-items: center;
  gap: 31px;
  text-decoration: none;
}
.latest-card__media {
  flex-shrink: 0;
  width: 240px;
  height: 135px;
  border-radius: 12px;
  overflow: hidden;
}
.latest-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.latest-card__link:hover .latest-card__media img { transform: scale(1.05); }
.latest-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}
.latest-card__cat {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.056px;
  line-height: 1.6;
  color: var(--color-brand);
}
.latest-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.latest-card__date,
.latest-card__read {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);       /* 16px */
  line-height: var(--lh-body);
  letter-spacing: 0.16px;
  color: var(--color-text-secondary);
}
.latest-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(74, 74, 74, 0.3);
  flex-shrink: 0;
}
.latest-card__title {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);          /* 18px */
  line-height: 1.7;
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}
.latest-card__link:hover .latest-card__title { color: var(--color-brand); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .article-body { padding-top: 200px; }
  .article-layout {
    grid-template-columns: 1fr;
    row-gap: var(--space-64);
  }
  .article-vrule { display: none; }
  .article-aside { padding-bottom: 0; }
  .article-aside__title { font-size: var(--fs-h4); }
}

@media (max-width: 640px) {
  .article-body {
    padding-top: 150px;
    padding-bottom: var(--space-64);
  }
  .article-head__title { font-size: var(--fs-h3); }  /* 28px via token */
  .article-head__sub { font-size: var(--fs-body); }
  .article-divider { margin: var(--space-32) 0; }
  .article-content { gap: var(--space-24); }
  .article-prose { gap: var(--space-24); }
  .callout--practice { padding: 16px 18px; }
  .callout__motif { width: 90px; right: 16px; }
  .latest-card__link { gap: var(--space-16); }
  .latest-card__media { width: 130px; height: 90px; }
}

/* ==========================================================================
   ARTICLES LISTING — dynamic states (empty result + AJAX loading)
   ========================================================================== */
.articles-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-64) 0;
  color: var(--color-text-secondary, #4a4a4a);
  font-size: var(--fs-body, 18px);
}
.articles-body.is-loading [data-articles-grid] {
  opacity: 0.45;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* ==========================================================================
   START THE JOYPATH PAGE  (Figma 571:2700)
   Long-form framework page. Page bg = --color-surface. The fixed transparent
   header (183px) reads fine on the light page; the hero clears it via
   padding-top, matching the articles/contact/terms hero precedent.
   ========================================================================== */
.start-page {
  padding-bottom: var(--space-120);
}

/* --- Hero / Intro (Figma 630:4431) — centered column, gap 48 ------------- */
.start-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  padding-top: 243px; /* 183 fixed header + 60 gap */
}
.start-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  max-width: 900px;
  text-align: center;
}
.start-hero__title {
  max-width: 900px;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  text-align: center;
  color: var(--color-text-heading);
}
.start-hero__media {
  width: 100%;
  aspect-ratio: 1600 / 900;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.start-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  max-width: 900px;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}
.start-hero__intro p {
  width: 100%;
  margin: 0;
}
.start-hero__intro p:first-child {
  font-size: 20px;
  letter-spacing: 0.08px;
  text-align: center;
}
.start-hero__intro p:nth-child(2) {
  font-size: 18px;
  letter-spacing: 0.072px;
}
.start-hero__intro p:last-child {
  font-size: 18px;
  letter-spacing: 0.072px;
  text-align: center;
}

/* --- Start page — responsive --------------------------------------------- */
@media (max-width: 1024px) {
  .start-hero {
    padding-top: 215px;
    gap: var(--space-40);
  }
  .start-hero__title {
    font-size: 40px;
  }
}
@media (max-width: 640px) {
  .start-hero {
    padding-top: 200px;
    gap: var(--space-32);
  }
  .start-hero__title {
    font-size: 28px;
  }
  .start-hero__intro p:first-child {
    font-size: 18px;
  }
  .start-hero__intro p:nth-child(2),
  .start-hero__intro p:last-child {
    font-size: 16px;
  }
}

/* --- Shared start-page section eyebrow ----------------------------------- */
.start-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* --- S1 — 5 Key Takeaways (Figma 571:2720) ------------------------------- */
/* Two columns inside the 1600 container: 920 image + 80 gap + 600 copy. */
.start-takeaways {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-top: var(--space-120);
}
.start-takeaways__media {
  flex: 0 1 920px;
  min-width: 0;
}
.start-takeaways__media img {
  width: 100%;
  aspect-ratio: 920 / 674;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.start-takeaways__body {
  flex: 0 1 600px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.start-takeaways__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.start-takeaways__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.start-takeaways__lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.08px;
  color: var(--color-text-secondary);
}

/* --- S3 — What Makes Joypath Different (571:2763) ------------------------- */
/* Same layout family as S1: image left / numbered list right. */
.start-different {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-top: var(--space-120);
}
.start-different__media {
  flex: 0 1 920px;
  min-width: 0;
}
.start-different__media img {
  width: 100%;
  aspect-ratio: 920 / 674;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.start-different__body {
  flex: 0 1 600px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.start-different__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.start-different__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.start-different__lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.088px;
  color: var(--color-text-secondary);
}

/* --- Numbered list (shared: S1/S3/S6/S8) --------------------------------- */
.start-numlist {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.start-numlist__item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--color-brand);
}
.start-numlist__item:last-child {
  border-bottom: 0;
}
.start-numlist__num {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-2, #f3f1eb);
  border: 0.48px solid var(--color-brand);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: var(--fw-regular);
  line-height: 1; /* tight box so the Playfair numeral sits centred in the circle (was 1.2 → digit dropped low) */
  color: var(--color-text-heading);
}
.start-numlist__text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.start-numlist__text strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

/* --- S2 — What Is Joypath (Figma 571:2753) ------------------------------ */
/* Mirror of S1: 600 copy + 80 gap + 920 image (text left, image right). */
.start-what {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-top: var(--space-120);
}
.start-what__body {
  flex: 0 1 600px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.start-what__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.start-what__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.start-what__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.start-what__intro p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.start-what__intro p strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}
.start-what__media {
  flex: 0 1 920px;
  min-width: 0;
}
.start-what__media img {
  width: 100%;
  aspect-ratio: 920 / 674;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* --- S4 — The 4 Pillars (Figma 571:2796) -------------------------------- */
/* Centered head + two-column row: reused nexus diagram (left, "Nexus Effect"
   center variant) and the table-metaphor copy (right). */
.start-pillars {
  padding-top: var(--space-120);
}
.start-pillars__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.start-pillars__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.start-pillars__sub {
  display: flex;
  flex-direction: column;
  gap: var(--space-8, 8px);
}
.start-pillars__sub p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}

.start-pillars__row {
  display: flex;
  align-items: center;
  gap: var(--space-80);
  margin-top: var(--space-80);
}
.start-pillars__diagram {
  flex: 0 1 760px;
}

/* "Nexus Effect" center variant — stacked gold title + gray subtitle */
.nexus-diagram--effect .nexus-diagram__center {
  flex-direction: column;
  gap: 0.8cqw;
  padding: 0 1cqw;
}
.nexus-diagram__center-title {
  font-family: var(--font-body);
  font-size: 2.6cqw; /* ~20px @760 */
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.04cqw;
  color: var(--color-brand);
}
.nexus-diagram__center-sub {
  font-family: var(--font-body);
  font-size: 1.75cqw; /* ~13px @760 */
  font-weight: var(--fw-regular);
  line-height: 1.35;
  color: var(--color-text-secondary);
}

.start-pillars__copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.start-pillars__copy p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.start-pillars__lead {
  font-family: var(--font-body);
  font-size: 24px !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1.4 !important;
  color: var(--color-text-heading) !important;
}
.start-pillars__legs {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--space-8, 8px);
  list-style: disc;
}
.start-pillars__legs li {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.start-pillars__legs li strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}

/* ==================================================================
   S5 — HOW YOU ACTUALLY BUILD EACH PILLAR  (Figma: 571:2891)
   Centered head + a banner image with four pillar "cards" (each a
   Capacities / Example-Activities table) overlapping its lower edge
   in a 2-column staggered grid. Closing line beneath.
   ================================================================== */
.start-build {
  padding-top: var(--space-120);
}
.start-build__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}
.start-build__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.start-build__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--color-text-secondary);
}

/* Banner + overlapping card grid */
.start-build__stage {
  margin-top: var(--space-48);
}
.start-build__bg {
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 725;
  object-fit: cover;
  object-position: 50% 100%; /* anchor to the bottom so the food (bowls/fruit/chia + her hands at work) is the subject, not her face — wide letterbox crops the head out */
  border-radius: 12px;
}
.start-build__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-80);
  row-gap: 56px;
  align-items: start;
  /* pull the grid up so the cards overlap the lower band of the banner.
     reduced from -12.875% → -8% so the bottom food row (apple bowl, berry bowl,
     water glass, chia jar) clears the cards and reads as the focal subject */
  margin-top: -8%;
}
/* right column sits 32px lower than the left (Figma staggered layout) */
.start-build__grid > .pillar-card:nth-child(even) {
  margin-top: var(--space-32);
}

.pillar-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding: var(--space-24) 40px;
  background: #f7f5f0;
  border: 1px solid var(--color-brand);
  border-radius: 12px;
}
.pillar-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pillar-card__icon {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 0.8px solid var(--color-brand);
  overflow: hidden;
}
.pillar-card__icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.pillar-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: 0.56px;
  color: var(--color-text-heading);
}

/* Capacities / Example Activities table */
.pillar-card__table {
  width: 100%;
  border: 1px solid rgba(74, 74, 74, 0.16);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.pillar-card__table th,
.pillar-card__table td {
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.18px;
  text-align: left;
  vertical-align: top;
}
.pillar-card__table tr > :first-child {
  width: 160px;
  border-right: 1px solid rgba(74, 74, 74, 0.16);
}
.pillar-card__table thead th {
  font-weight: var(--fw-semibold);
  color: #000;
}
.pillar-card__table tbody th,
.pillar-card__table tbody td {
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  border-top: 1px solid rgba(74, 74, 74, 0.16);
}

.start-build__close {
  max-width: 960px;
  margin: var(--space-64) auto 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ==========================================================================
   S6 — HOW PROGRESS HAPPENS  (Figma: 609:1972)
   Full-bleed warm band; centered head + a 4-step vertical timeline (icon
   circle + number/label + definition + "Example:" pill) joined by a dotted
   connector, then a bordered "Nexus" closing bar at content width.
   ========================================================================== */
.start-progress {
  background: var(--color-surface);
  padding-block: var(--space-120);
}
.start-progress__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16); /* eyebrow → title */
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}
.start-progress__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.start-progress__lead {
  margin: var(--space-16) 0 0; /* title → lead = 32px total */
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--color-text-secondary);
}

/* Timeline */
.start-progress__list {
  position: relative;
  max-width: 638px;
  margin: var(--space-80) auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}
.progress-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}
/* continuous connector line running through the icon column (icon center = 45px) */
.progress-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 45px;
  width: 1px;
  height: calc(100% + var(--space-64)); /* this icon centre → next icon centre */
  background: var(--color-brand);
  transform: translateX(-0.5px);
  z-index: 0;
}
/* a dot centred on the connector line (midway between the two icon centres) */
.progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 45px;
  top: calc(45px + (100% + var(--space-64)) / 2);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--color-brand);
  z-index: 1;
}
.progress-step__icon {
  position: relative;
  z-index: 1; /* sits above the connector line */
  flex: 0 0 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #f3f1eb;
  border: 0.9px solid var(--color-brand);
  overflow: hidden;
}
.progress-step__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.progress-step__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.progress-step__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.progress-step__num {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: 0.56px;
  color: var(--color-brand);
}
.progress-step__label {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: 0.56px;
  color: var(--color-text-heading);
}
.progress-step__desc {
  margin: 20px 0 0; /* heading → desc */
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.progress-step__example {
  margin: 14px 0 0; /* desc → example pill */
  padding: var(--space-4) var(--space-12);
  border: 1px solid rgba(74, 74, 74, 0.16);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.progress-step__example-label {
  font-weight: var(--fw-medium);
}

/* Closing "Nexus" bar (content width) */
.start-progress__nexus {
  margin-top: var(--space-80);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid rgba(74, 74, 74, 0.16);
  border-radius: 12px;
  text-align: center;
}
.start-progress__nexus p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.096px;
  color: var(--color-text-heading);
}

/* ============================ S7 — The Nexus Effect ============================ */
.start-nexuseffect {
  padding-block: var(--space-120);
}
.start-nexuseffect__head {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.start-nexuseffect__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.start-nexuseffect__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--color-text-secondary);
}
.start-nexuseffect__lead strong {
  display: block; /* Figma 571:3058: bold tail is a separate paragraph on its own line */
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}

/* Flow diagram: example activity -> 4 pillar outcomes */
.nexuseffect-flow {
  margin-top: var(--space-80);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-48);
  position: relative;
}

/* Example activity (left) */
.nexuseffect-flow__start {
  position: relative;
  flex: 0 0 auto;
  align-self: center; /* Figma 571:3060: circle is vertically centered against the 402-tall cards */
  width: 232px;
  min-height: 265px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
  padding: 40px 24px;
  background: #f3f1eb; /* Figma 571:3061: cream ellipse fill */
  border: 1.5px solid var(--color-brand); /* Figma 571:3061: solid gold ellipse stroke (not the pale capsule border) */
  border-radius: 200px;
}
/* Figma 571:3149 (Vector 5): angled elbow connector rising from the circle's right edge
   into the Body icon — replaces the straight horizontal arrow on the first node (desktop only) */
.nexuseffect-flow__start::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 183px;
  height: 110px;
  transform: translateY(-100%);
  /* Figma 571:3149: elbow rises from circle right-edge (box-x1,y108 == circle
     center) to Body icon vertical center, horizontal run STOPS at the icon's
     left edge (box-x138) with an arrowhead landing on the circle — must not
     overshoot through the icon. */
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20183%20110'%20fill='none'%3E%3Cpath%20d='M1%20108%20L56%204%20H138'%20stroke='%23A67C3D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M130%200%20L138%204%20L130%208'%20stroke='%23A67C3D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 3;
}
/* First node (Body) uses the elbow above instead of the straight arrow */
.nexus-node:first-child::before,
.nexus-node:first-child::after {
  content: none;
}
.nexuseffect-flow__start-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.22px;
  white-space: nowrap; /* Figma 571:3067: single line */
  color: var(--color-text-heading);
}
.nexuseffect-flow__start-sub {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Shared icon circle */
.nexuseffect-flow__start-icon,
.nexus-node__icon {
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #f3f1eb;
  border: 1px solid var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The "Example Activity" start icon sits directly on the cream ellipse — no
   inner ring, and a larger 74px glyph (Figma 571:3063). Only the pillar nodes
   keep the bordered circle. */
.nexuseffect-flow__start-icon {
  background: transparent;
  border: none;
}
.nexuseffect-flow__start-icon img {
  width: 74px;
  height: 74px;
}
.nexuseffect-flow__start-icon img,
.nexus-node__icon img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

/* Pillar nodes (right) */
.nexuseffect-flow__nodes {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nexus-node {
  position: relative;
  flex: 0 0 270px;
  width: 270px;
  min-height: 402px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
  padding: 40px 30px;
  border: 6px solid rgba(166, 124, 61, 0.12);
  border-radius: 200px;
}
/* Connector arrow from the element to the left */
.nexus-node::before {
  content: "";
  position: absolute;
  top: 90px;
  /* Figma 571:3146-3148: arrow spans the previous icon's right edge to this icon's
     left edge (~228px), solid brand gold, not a short stub in the gap. */
  left: -138px;
  width: 218px;
  height: 1.5px;
  background: var(--color-brand);
}
.nexus-node::after {
  content: "";
  position: absolute;
  top: 85px;
  left: 72px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--color-brand);
}
.nexus-node__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.22px;
  color: var(--color-text-heading);
}
.nexus-node__desc {
  margin: 0;
  max-width: 210px;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.15px;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Straight-arrow variant (review copy) — desktop only.
   Goal (client): the small Example Activity circle stays vertically centred
   among the four tall pillar ovals, and the straight arrow runs along that
   shared vertical MIDDLE line. The pillar icons/text are left EXACTLY as the
   original (top of each oval — no extra top space). The connector therefore
   sits at the middle and lives in the gaps; it does NOT pass through the icons,
   which the client accepted ("chalega agar icon pe nahi aa raha hai").
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* Drop the angled elbow connector. The circle keeps the default centred
     position, so its vertical middle (~Y201) matches each oval's middle. */
  .start-nexuseffect--straight .nexuseffect-flow__start::after {
    content: none;
  }
  /* Straight connector segment in each gap, along the shared middle line —
     including the first gap (circle -> Body). */
  .start-nexuseffect--straight .nexus-node::before,
  .start-nexuseffect--straight .nexus-node:first-child::before {
    content: "";
    top: 200px;
    left: -48px;
    width: 60px;
  }
  /* Arrowhead at the right end of each segment, centred on the same line. */
  .start-nexuseffect--straight .nexus-node::after,
  .start-nexuseffect--straight .nexus-node:first-child::after {
    content: "";
    top: 195px;
    left: 3px;
  }
}

/* Closing statement */
.start-nexuseffect__close {
  max-width: 720px;
  margin: var(--space-80) auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.start-nexuseffect__close-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0.56px;
  color: var(--color-text-heading);
}
.start-nexuseffect__close-text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.start-nexuseffect__close-text strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}

/* --- S8 — NexusCompass / Progress Path (Figma 616:xxxx) ------------------ */
/* 3-col grid inside 1600 container: 399 tiers + 666 copy + 399 helps,
   2x68px gaps. Mirrors the homepage compass rhythm. */
.start-compass {
  padding-top: var(--space-120);
}
.start-compass__grid {
  display: flex;
  align-items: flex-start;
  gap: 68px;
}
.start-compass__card {
  flex: 0 0 399px;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-brand);
  border-radius: 12px;
  padding: 31px;
  /* Figma 616:2155: both side cards share the same top, aligned to the center
     column's intro paragraph (below the eyebrow+title), not to the eyebrow.
     Head block (eyebrow+title) is ~146px tall; push the cards down to the lead. */
  margin-top: 160px;
}
.start-compass__copy {
  flex: 1 1 666px;
  min-width: 0;
}

/* Card item lists (tiers + helps) */
.start-compass__items {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.start-compass-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.start-compass-item__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius-full);
}
.start-compass-item__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain; /* preserve aspect ratio — the connections glyph is portrait (22×30), not square */
  display: block;
}
.start-compass-item__body {
  min-width: 0;
}
.start-compass-item__title {
  margin: 4px 0 6px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--color-text-heading);
}
.start-compass-item__desc {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* Center copy column */
.start-compass__head {
  margin-bottom: 20px;
}
.start-compass__title {
  margin: 12px 0 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 48px;
  line-height: 1.15;
  color: var(--color-text-heading);
}
.start-compass__lead {
  margin: 0 0 36px;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.start-compass__lead strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}

/* Numbered feature list */
.start-compass__features {
  list-style: none;
  margin: 0;
  padding: 0;
}
.compass-feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-brand);
}
.compass-feature:first-child {
  padding-top: 0;
}
.compass-feature:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.compass-feature__num {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f1eb;
  border: 0.48px solid var(--color-brand);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: var(--fw-regular); /* match .start-numlist__num (was semibold) */
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-heading); /* match .start-numlist__num (was brand/brown) */
}
.compass-feature__body {
  min-width: 0;
  padding-top: 4px;
}
.compass-feature__title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-text-heading);
}
.compass-feature__desc {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.compass-feature__desc strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}

/* Full-width banner */
.start-compass__banner {
  margin-top: 48px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 40px 48px;
  text-align: center;
}
.start-compass__banner-text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ==================================================================
   S9 — THE DESTINATION / NexusSpan  (Figma: 616:2360)  [FINAL]
   Centered head + reused 4-pillar nexus diagram (span center variant)
   + right-hand copy column with bullet list.
   ================================================================== */
.start-destination {
  padding-block: var(--space-120);
}
.start-destination__head {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.start-destination__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.start-destination__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--color-text-secondary);
}
.start-destination__lead strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}

/* Diagram + copy row */
.start-destination__row {
  display: flex;
  align-items: center;
  gap: var(--space-80);
  margin-top: var(--space-80);
}
.start-destination__diagram {
  flex: 0 1 760px;
}
.start-destination__copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.start-destination__copy-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-text-heading);
}
.start-destination__list {
  margin: 0;
  padding-left: 1.25em;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.start-destination__list li {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* "NexusSpan" center variant — black title + gray sub + celebration icon */
.nexus-diagram--span .nexus-diagram__center {
  flex-direction: column;
  gap: 0.6cqw;
  padding: 0 1cqw;
}
.nexus-diagram--span .nexus-diagram__center-title {
  color: var(--color-text-heading);
}
.nexus-diagram--span .nexus-diagram__center-icon {
  width: 5.5cqw;
  height: auto;
  margin-top: 0.3cqw;
}

/* Quadrant order (Body=top, Mind=right, Fuel=bottom, Life Design=left) is now the
   shared component default — see .nexus-diagram__circle--* / .nexus-pillar--*
   above — so all three diagrams (home, --effect, --span) match Figma 616:2360.
   No per-variant position remap needed here anymore. */

@media (max-width: 1024px) {
  .start-takeaways {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
    padding-top: var(--space-80);
  }
  .start-takeaways__media,
  .start-takeaways__body {
    flex: 1 1 auto;
  }
  .start-takeaways__title {
    font-size: 40px;
  }

  /* S2 — stack to single column (text above image) */
  .start-what {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
    padding-top: var(--space-80);
  }
  .start-what__body,
  .start-what__media {
    flex: 1 1 auto;
  }
  .start-what__title {
    font-size: 40px;
  }

  /* S3 — stack to single column (image above list) */
  .start-different {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
    padding-top: var(--space-80);
  }
  .start-different__media,
  .start-different__body {
    flex: 1 1 auto;
  }
  .start-different__title {
    font-size: 40px;
  }

  /* S4 — stack head/row to single column; center the diagram */
  .start-pillars {
    padding-top: var(--space-80);
  }
  .start-pillars__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
    margin-top: var(--space-48);
  }
  .start-pillars__diagram {
    flex: 1 1 auto;
    margin-inline: auto;
  }
  .start-pillars__copy {
    flex: 1 1 auto;
  }
  .start-pillars__title {
    font-size: 40px;
  }

  /* S5 — stack banner above single-column cards (undo desktop overlap) */
  .start-build {
    padding-top: var(--space-80);
  }
  .start-build__title {
    font-size: 40px;
  }
  .start-build__bg {
    /* shorter band + low focus so the food cluster (bowls/hands) is the subject,
       not her face — near-native 16/10 showed the whole figure here */
    aspect-ratio: 2 / 1;
    object-position: 42% 92%;
  }
  .start-build__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--space-32);
    margin-top: var(--space-32);
  }
  .start-build__grid > .pillar-card:nth-child(even) {
    margin-top: 0;
  }

  /* S6 — reduce band padding + scale title */
  .start-progress {
    padding-block: var(--space-80);
  }
  .start-progress__title {
    font-size: 40px;
  }
  .start-progress__list {
    margin-top: var(--space-48);
  }

  /* S7 — stack the flow into a single vertical column; re-orient connectors downward */
  .start-nexuseffect {
    padding-block: var(--space-80);
  }
  .start-nexuseffect__title {
    font-size: 40px;
  }
  .nexuseffect-flow {
    flex-direction: column;
    align-items: center;
    gap: var(--space-48);
    margin-top: var(--space-64);
  }
  .nexuseffect-flow__nodes {
    flex-direction: column;
    align-items: center;
    gap: var(--space-48);
  }
  .nexuseffect-flow__start,
  .nexus-node {
    flex: 0 0 auto;
    width: 300px;
    min-height: 0;
    padding: 32px 24px;
    border-radius: 32px;
  }
  .nexus-node__desc {
    max-width: none;
  }
  .nexus-node::before {
    top: calc(-1 * var(--space-48));
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: var(--space-48);
  }
  .nexus-node::after {
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 9px solid var(--color-brand);
    border-bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
  }
  /* Stacked layout: drop the desktop elbow and restore the vertical arrow above Body */
  .nexuseffect-flow__start::after {
    display: none;
  }
  .nexus-node:first-child::before,
  .nexus-node:first-child::after {
    content: "";
  }
  .start-nexuseffect__close {
    margin-top: var(--space-64);
  }
  /* S8 — stack the 3-col compass grid */
  .start-compass__grid {
    flex-direction: column;
    gap: var(--space-32);
  }
  .start-compass__card,
  .start-compass__copy {
    flex: 1 1 auto;
    width: 100%;
  }
  .start-compass__card {
    margin-top: 0; /* stacked layout: no head-offset */
  }
  .start-compass__copy {
    order: -1;
  }
  .start-compass__title {
    font-size: 36px;
  }
  .start-compass__banner {
    margin-top: var(--space-32);
    padding: 32px;
  }

  /* S9 — stack head/row to single column; center the diagram */
  .start-destination {
    padding-block: var(--space-80);
  }
  .start-destination__title {
    font-size: 40px;
  }
  .start-destination__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
    margin-top: var(--space-48);
  }
  .start-destination__diagram {
    flex: 1 1 auto;
    margin-inline: auto;
  }
  .start-destination__copy {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .start-eyebrow {
    font-size: 16px;
  }
  .start-takeaways {
    gap: var(--space-32);
    padding-top: var(--space-64);
  }
  .start-takeaways__title {
    font-size: 28px;
  }

  /* S2 mobile */
  .start-what {
    gap: var(--space-32);
    padding-top: var(--space-64);
  }
  .start-what__title {
    font-size: 28px;
  }
  .start-what__intro p {
    font-size: 16px;
  }

  /* S3 mobile */
  .start-different {
    gap: var(--space-32);
    padding-top: var(--space-64);
  }
  .start-different__title {
    font-size: 28px;
  }
  .start-different__lead {
    font-size: 18px;
  }
  .start-takeaways__lead {
    font-size: 18px;
  }
  .start-numlist__num {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .start-numlist__text {
    font-size: 16px;
  }

  /* S4 mobile */
  .start-pillars {
    padding-top: var(--space-64);
  }
  .start-pillars__title {
    font-size: 28px;
  }
  .start-pillars__sub p {
    font-size: 16px;
  }
  .start-pillars__copy p,
  .start-pillars__legs li {
    font-size: 16px;
  }
  .start-pillars__lead {
    font-size: 20px !important;
  }

  /* S5 mobile */
  .start-build {
    padding-top: var(--space-64);
  }
  .start-build__title {
    font-size: 28px;
  }
  .start-build__sub {
    font-size: 16px;
  }
  .start-build__bg {
    /* native 3:2 ratio = no cropping, so every food element stays visible */
    aspect-ratio: 3 / 2;
    object-position: center center;
  }
  .pillar-card {
    padding: var(--space-24);
    gap: var(--space-24);
  }
  .pillar-card__icon {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }
  .pillar-card__icon img {
    width: 36px;
    height: 36px;
  }
  .pillar-card__title {
    font-size: 22px;
  }
  .pillar-card__table th,
  .pillar-card__table td {
    font-size: 14px;
    padding: 8px 10px;
  }
  .pillar-card__table tr > :first-child {
    width: 104px;
  }
  .start-build__close {
    font-size: 16px;
  }

  /* S6 mobile */
  .start-progress {
    padding-block: var(--space-64);
  }
  .start-progress__title {
    font-size: 28px;
  }
  .start-progress__lead {
    font-size: 16px;
  }
  .progress-step {
    gap: var(--space-16);
  }
  .progress-step__icon {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }
  .progress-step__icon img {
    width: 34px;
    height: 34px;
  }
  .progress-step:not(:last-child)::before {
    left: 32px;
    top: 32px;
  }
  .progress-step:not(:last-child)::after {
    left: 32px;
    top: calc(32px + (100% + var(--space-64)) / 2);
  }
  .progress-step__num,
  .progress-step__label {
    font-size: 22px;
  }
  .progress-step__desc,
  .progress-step__example {
    font-size: 16px;
  }
  .start-progress__nexus p {
    font-size: 18px;
  }

  /* S7 mobile — narrower capsules, smaller icons + type */
  .start-nexuseffect {
    padding-block: var(--space-64);
  }
  .start-nexuseffect__title {
    font-size: 28px;
  }
  .start-nexuseffect__lead {
    font-size: 16px;
  }
  .nexuseffect-flow {
    margin-top: var(--space-48);
  }
  .nexuseffect-flow__start,
  .nexus-node {
    width: 100%;
    max-width: 320px;
  }
  .nexuseffect-flow__start-icon,
  .nexus-node__icon {
    width: 72px;
    height: 72px;
  }
  .nexuseffect-flow__start-icon img,
  .nexus-node__icon img {
    width: 38px;
    height: 38px;
  }
  .nexuseffect-flow__start-icon img {
    width: 58px;
    height: 58px;
  }
  .nexus-node__label {
    font-size: 20px;
  }
  .nexus-node__desc {
    font-size: 16px;
  }
  .start-nexuseffect__close-title {
    font-size: 24px;
  }
  .start-nexuseffect__close-text {
    font-size: 16px;
  }
  /* S8 — compass tightened for phones */
  .start-compass__card {
    padding: var(--space-24);
  }
  .start-compass-item__icon {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }
  .start-compass__title {
    font-size: 28px;
  }
  .start-compass__lead {
    font-size: 16px;
  }
  .compass-feature {
    gap: var(--space-16);
  }
  .compass-feature__num {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .compass-feature__title {
    font-size: 18px;
  }
  .start-compass__banner {
    padding: 28px 24px;
  }
  .start-compass__banner-text {
    font-size: 17px;
  }

  /* S9 — phone type scale */
  .start-destination__title {
    font-size: 28px;
  }
  .start-destination__lead {
    font-size: 16px;
  }
  .start-destination__copy-title {
    font-size: 20px;
  }
  .start-destination__list li {
    font-size: 16px;
  }
}

/* ==========================================================================
   ABOUT PAGE  (Figma 600:636)
   Built section by section, reusing the shared header/footer. Page bg =
   --color-surface; the fixed transparent header (183px) reads on the light
   page and the hero clears it via padding-top, matching the start page.
   ========================================================================== */
.about-page {
  padding-bottom: var(--space-120);
}

/* --- 1. Hero (Figma 600:758 + 616:2091) — centered head, then full media --- */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  padding-top: 243px; /* 183 fixed header + 60 gap */
}
.about-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  max-width: 900px;
}
.about-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  text-align: center;
  color: var(--color-text-heading);
}
.about-hero__intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.08px;
  text-align: center;
  color: var(--color-text-secondary);
}
.about-hero__intro strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}
.about-hero__media {
  width: 100%;
  aspect-ratio: 1600 / 900;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* --- 1. Hero — responsive (title scales via global --fs-h3) -------------- */
@media (max-width: 1024px) {
  .about-hero {
    padding-top: 215px;
    gap: var(--space-40);
  }
}
@media (max-width: 640px) {
  .about-hero {
    padding-top: 200px;
    gap: var(--space-32);
  }
  .about-hero__intro {
    font-size: 18px;
  }
}

/* --- 2. Mission & Vision (Figma 600:764) — two stacked text blocks ------- */
.about-mv {
  margin-top: var(--space-120);
  display: flex;
  flex-direction: column;
  align-items: center; /* center the 900px column on the page (Figma: block x=510 on 1920) */
  gap: 60px;
}
.about-mv__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: 900px; /* matches Figma column width; text stays left-aligned inside */
}
.about-mv__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px, steps down globally */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 0.96px;
  color: var(--color-text-heading);
}
.about-mv__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}
.about-mv__text strong {
  font-weight: var(--fw-semibold); /* same color, heavier weight (matches Figma) */
}

/* --- 2. Mission & Vision — responsive (titles scale via global --fs-h3) -- */
@media (max-width: 1024px) {
  .about-mv {
    margin-top: var(--space-80);
    gap: var(--space-48);
  }
}
@media (max-width: 640px) {
  .about-mv {
    margin-top: var(--space-64);
    gap: var(--space-40);
  }
}

/* --- 3. Our Story (Figma 600:705) — image left + text right ------------- */
.about-story {
  margin-top: var(--space-120);
  display: flex;
  align-items: center;
  gap: var(--space-80);
}
.about-story__media {
  flex: 0 0 606px;
  width: 606px;
  height: 724px;
  border-radius: 12px;
  overflow: hidden;
}
.about-story__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-story__body {
  flex: 0 1 600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.about-story__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px, steps down globally */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 0.96px;
  color: var(--color-text-heading);
}
.about-story__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}

/* --- 3. Our Story — responsive (stack image above text) ---------------- */
@media (max-width: 1024px) {
  .about-story {
    margin-top: var(--space-80);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
  }
  .about-story__media {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 606 / 724;
  }
  .about-story__body {
    flex: 0 0 auto;
  }
}
@media (max-width: 640px) {
  .about-story {
    margin-top: var(--space-64);
    gap: var(--space-40);
  }
}

/* --- 4. Meet Nexus Compass (Figma 603:1093) — bordered card ------------ */
.about-nexus {
  margin-top: var(--space-120);
}
.about-nexus__card {
  display: flex;
  align-items: center;
  gap: var(--space-80);
  padding: var(--space-40);
  background: #f3f1eb;
  border: 2px solid var(--color-brand);
  border-radius: 24px;
}
.about-nexus__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.about-nexus__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.about-nexus__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-brand);
}
.about-nexus__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3); /* 48px, steps down globally */
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.about-nexus__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-nexus__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.072px;
  color: var(--color-text-secondary);
}
.about-nexus__text strong {
  font-weight: var(--fw-semibold);
  color: inherit;
}
.about-nexus__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.about-nexus__features-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: var(--color-text-heading);
}
.about-nexus__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-12);
  row-gap: var(--space-24);
}
.about-nexus__feature {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.about-nexus__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
}
.about-nexus__icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.about-nexus__feature-label {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  letter-spacing: 0.2px;
  color: var(--color-text-heading);
}
.about-nexus__media {
  flex: 0 0 628px;
  width: 628px;
  height: 531px;
  border-radius: 12px;
  overflow: hidden;
}
.about-nexus__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 4. Meet Nexus Compass — responsive --------------------------------- */
@media (max-width: 1024px) {
  .about-nexus {
    margin-top: var(--space-80);
  }
  .about-nexus__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
    padding: var(--space-32);
  }
  .about-nexus__body {
    flex: 0 0 auto;
  }
  .about-nexus__media {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 628 / 531;
  }
}
@media (max-width: 640px) {
  .about-nexus {
    margin-top: var(--space-64);
  }
  .about-nexus__card {
    gap: var(--space-40);
    padding: var(--space-24);
  }
  .about-nexus__body {
    gap: var(--space-32);
  }
  .about-nexus__features-title {
    font-size: 28px;
  }
  .about-nexus__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-16);
  }
  .about-nexus__feature {
    gap: var(--space-16);
  }
  .about-nexus__feature-label {
    font-size: 18px;
  }
}

/* --- 5. Your Journey Continues (Figma 616:2053) — image left + text right --- */
.about-journey {
  display: flex;
  align-items: center;
  gap: var(--space-80);
  margin-top: var(--space-120);
}
.about-journey__media {
  flex: 0 1 920px;
  min-width: 0;
  margin: 0;
  aspect-ratio: 920 / 674;
  border-radius: 12px;
  overflow: hidden;
}
.about-journey__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-journey__body {
  flex: 1 1 600px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}
.about-journey__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.about-journey__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-brand);
}
.about-journey__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 2.4px;
  color: var(--color-text-heading);
}
.about-journey__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.18px;
  color: var(--color-text-secondary);
}
.about-journey__text strong {
  font-weight: var(--fw-semibold);
  color: inherit;
}

/* --- 5. Your Journey Continues — responsive --- */
@media (max-width: 1024px) {
  .about-journey {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
    margin-top: var(--space-80);
  }
  .about-journey__media {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 920 / 674;
  }
  .about-journey__body {
    flex: 0 0 auto;
  }
}
@media (max-width: 640px) {
  .about-journey {
    gap: var(--space-40);
    margin-top: var(--space-64);
  }
  .about-journey__body {
    gap: var(--space-32);
  }
}

/* ==========================================================================
   HOME — Longevity Insights: AJAX category filter + skeleton loader
   The grid is swapped via AJAX (assets/js/main.js initHomeInsights). While a
   category loads, the grid is hidden and a skeleton shimmer mirrors the
   1-feature + 3-card layout; new content fades in on arrival.
   ========================================================================== */
.insights-filter {
  cursor: pointer;
}
.insights-empty {
  flex: 1 1 100%;
  padding: var(--space-64) 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

/* Skeleton: hidden by default, shown (in the grid's place) while loading. */
.insights-skeleton {
  display: none;
}
[data-insights-root].is-loading .insights-grid {
  display: none;
}
[data-insights-root].is-loading .insights-filters {
  pointer-events: none; /* block re-clicks mid-load */
}
[data-insights-root].is-loading .insights-skeleton {
  display: flex;
  align-items: stretch;
  gap: var(--space-64);
}
.ins-skel__feature {
  flex: 1 1 0;
  min-width: 0;
  min-height: 420px;
  border-radius: var(--radius-md);
}
.ins-skel__list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ins-skel__card {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}
.ins-skel__thumb {
  flex: 0 0 40%;
  width: 40%;
  min-width: 0;
  aspect-ratio: 313 / 260;
  border-radius: var(--radius-md);
}
.ins-skel__lines {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.ins-skel__line {
  height: 16px;
  border-radius: 6px;
}
.ins-skel__line--meta {
  width: 38%;
  height: 12px;
}
.ins-skel__line--short {
  width: 68%;
}

/* Warm brand-tinted shimmer sweep. */
.ins-skel__feature,
.ins-skel__thumb,
.ins-skel__line {
  background-color: #ece6da;
  background-image: linear-gradient(100deg, rgba(247, 243, 236, 0) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(247, 243, 236, 0) 70%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: insSkelShimmer 1.4s ease-in-out infinite;
}
@keyframes insSkelShimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -120% 0; }
}

/* Content fade-in once the swapped grid is revealed. */
[data-insights-root].is-revealing .insights-grid > * {
  animation: insReveal 0.45s ease both;
}
[data-insights-root].is-revealing .insights-list > * {
  animation: insReveal 0.45s ease both;
}
@keyframes insReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Tablet: skeleton stacks to match the grid. */
@media (max-width: 1024px) {
  [data-insights-root].is-loading .insights-skeleton {
    flex-direction: column;
    gap: var(--space-48);
  }
  .ins-skel__feature {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .ins-skel__list {
    gap: var(--space-32);
  }
}
@media (max-width: 640px) {
  .ins-skel__feature {
    aspect-ratio: 4 / 3;
  }
  .ins-skel__card {
    gap: var(--space-16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ins-skel__feature,
  .ins-skel__thumb,
  .ins-skel__line {
    animation: none;
  }
  [data-insights-root].is-revealing .insights-grid > *,
  [data-insights-root].is-revealing .insights-list > * {
    animation: none;
  }
}

/* ==========================================================================
   FLOATING CTA  —  small "Start your Joypath" pill
   Site-wide, printed via wp_footer (inc/template-functions.php). Compact and
   corner-anchored so it never covers content: it fades in only after the hero
   scrolls away, and JS tucks it out of sight once the footer is in view.
   ========================================================================== */
.floating-cta {
  position: fixed;
  right: clamp(16px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 32px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 4vw, 32px));
  z-index: 80; /* above content, below the header / open mobile menu */
  /* Hidden resting state — JS adds .is-visible to reveal. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--transition-base), transform var(--transition-base),
    visibility var(--transition-base);
  pointer-events: none;
}
.floating-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta.is-dismissed {
  display: none;
}
/* Hide while the mobile menu is open so it never overlaps the nav. */
body.nav-open .floating-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The pill — mirrors .btn-primary (gold fill, white text, full radius) with the
   shared arrow motif, slightly smaller, with a soft brand-tinted shadow. */
.floating-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  line-height: 1;
  color: var(--color-white);
  background-color: var(--color-brand);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.18), 0 2px 6px rgba(166, 124, 61, 0.25);
  transition: background-color var(--transition-base), transform var(--transition-base),
    box-shadow var(--transition-base);
}
.floating-cta__btn:hover {
  background-color: #8f6a33;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(26, 26, 26, 0.22), 0 3px 8px rgba(166, 124, 61, 0.3);
}
.floating-cta__btn svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}
.floating-cta__btn:hover svg {
  transform: translateX(5px);
}

/* Small dismiss badge, overlapping the pill's top-right corner. */
.floating-cta__close {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-heading);
  background-color: var(--color-white);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(26, 26, 26, 0.18);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base);
}
.floating-cta__close:hover {
  color: var(--color-white);
  background-color: var(--color-brand);
}

@media (max-width: 640px) {
  .floating-cta__btn {
    padding: 12px 18px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta {
    transform: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .floating-cta__btn,
  .floating-cta__btn svg {
    transition: background-color var(--transition-base);
  }
  .floating-cta__btn:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   404 — PAGE NOT FOUND
   A calm, on-brand "lost path" screen: oversized Playfair number with the
   clover motif behind it, reassuring copy, a primary route home and a small
   grid of helpful onward links. Reuses .btn / .btn-primary / .btn-link.
   -------------------------------------------------------------------------- */
.error-404 {
  background-color: var(--color-surface);
}
.error-404__band {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 223px;    /* clear the 183px fixed header + breathing room */
  padding-bottom: var(--space-120);
  background-image:
    radial-gradient(70% 60% at 50% 28%,
      rgba(166, 124, 61, 0.10) 0%,
      rgba(166, 124, 61, 0) 70%);
}

/* Faint decorative clover, anchored top-right behind the content */
.error-404__motif {
  position: absolute;
  top: 140px;
  right: -60px;
  width: 420px;
  height: auto;
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
}

.error-404__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-24);
}

.error-404__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0;
}

/* Oversized display number */
.error-404__numwrap {
  position: relative;
  line-height: 1;
}
.error-404__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: clamp(120px, 22vw, 260px);
  line-height: 0.9;
  letter-spacing: -2px;
  color: var(--color-text-heading);
  /* Warm gold gradient fill — subtle, on-brand */
  background: linear-gradient(160deg, #c79a55 0%, #a67c3d 55%, #7d5d2d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.error-404__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);   /* 48px desktop, scales via tokens */
  line-height: var(--lh-heading);
  letter-spacing: 0.4px;
  color: var(--color-text-heading);
  margin: 0;
}

.error-404__text {
  max-width: 560px;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  letter-spacing: 0.08px;
  color: var(--color-text-secondary);
  margin: 0;
}

.error-404__actions {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-8);
}

/* --- Quick onward links ------------------------------------------------- */
.error-404__links {
  list-style: none;
  margin: var(--space-32) 0 0;
  padding: 0;
  width: 100%;
  max-width: 860px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
}
.error-404__link-item {
  display: flex;
}
.error-404__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-24);
  text-align: left;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
    transform var(--transition-base);
}
.error-404__link:hover {
  border-color: var(--color-brand);
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.06);
  transform: translateY(-2px);
}
.error-404__link-label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}
.error-404__link-desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .error-404__band {
    padding-top: 200px;
  }
  .error-404__motif {
    width: 320px;
    right: -50px;
  }
  .error-404__links {
    grid-template-columns: repeat(2, 1fr);
    max-width: 520px;
  }
}

@media (max-width: 640px) {
  .error-404__band {
    padding-top: 150px;
    padding-bottom: var(--space-64);
    min-height: 80vh;
  }
  .error-404__motif {
    width: 220px;
    top: 110px;
    right: -40px;
    opacity: 0.08;
  }
  .error-404__inner {
    gap: var(--space-16);
  }
  .error-404__text {
    font-size: var(--fs-body);
  }
  .error-404__actions {
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
  }
  .error-404__home {
    width: 100%;
  }
  .error-404__links {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
  .error-404__link {
    padding: var(--space-16);
  }
}

/* ==========================================================================
   COOKIE CONSENT  (dynamic — Theme Settings → Cookie Consent)
   Compact banner pinned bottom-left. Deliberately small so it informs without
   blocking the page. Hidden by default (the [hidden] attr); main.js reveals it
   on load when the visitor hasn't yet chosen, and removes it once they do.
   ========================================================================== */
/* Visible by default (works even if JS never runs); JS adds .is-hidden once the
   visitor has accepted/declined. [hidden] kept as a hard fallback. */
.cookie-consent[hidden],
.cookie-consent.is-hidden {
  display: none;
}
.cookie-consent {
  /* Slim, full-width bar pinned to the very bottom of the viewport. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(26, 26, 26, 0.08);
  /* Gentle entrance; harmless if JS is absent. */
  animation: cookie-consent-in var(--transition-base) ease both;
}
@keyframes cookie-consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  /* Slim vertical padding; align horizontally with the rest of the page. */
  padding: var(--space-8) var(--container-margin);
}
/* Heading + message sit inline on a single row. */
.cookie-consent__text {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: var(--space-8);
  min-width: 0;
}
.cookie-consent__heading {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
  white-space: nowrap;
}
.cookie-consent__message {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.cookie-consent__link {
  color: var(--color-brand);
  text-decoration: underline;
  white-space: nowrap;
}
.cookie-consent__link:hover {
  color: #8f6a33;
}
.cookie-consent__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-8);
}
.cookie-consent__btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  transition: color var(--transition-base), background-color var(--transition-base);
}
.cookie-consent__btn--accept {
  color: var(--color-white);
  background-color: var(--color-brand);
}
.cookie-consent__btn--accept:hover {
  background-color: #8f6a33;
}
.cookie-consent__btn--decline {
  color: var(--color-text-heading);
  background-color: transparent;
  border: 1px solid var(--color-border);
}
.cookie-consent__btn--decline:hover {
  background-color: var(--color-surface);
}

@media (max-width: 600px) {
  .cookie-consent__inner {
    padding: var(--space-12) var(--container-margin);
  }
  .cookie-consent__actions {
    flex-shrink: 0;
  }
}

/* Respect users who prefer no motion — show instantly, no slide. */
@media (prefers-reduced-motion: reduce) {
  .cookie-consent {
    animation: none;
  }
}

/* ==========================================================================
   Trademark glyph (™)
   The ™ is added server-side as a bare glyph, then wrapped in <sup class="jp-tm">
   by main.js (initTrademark) so it can be shrunk to a proper superscript.
   Without this it inherits the full font size and looks oversized in large
   headings. The em keeps it proportional in big titles (0.58em ≈ the size the
   client signed off on), while the px floor stops it collapsing to an illegible
   speck in body copy, eyebrows and buttons where 0.58em would be ~10px.
   ========================================================================== */
.jp-tm {
  font-size: max(0.58em, 16px);
  vertical-align: super;
  line-height: 0;
  font-weight: inherit;
  letter-spacing: 0;
}

/* Hero "Start your Joypath™ →" CTA: the button is an inline-flex row with a
   gap between items, and initTrademark() turns the ™ into its own <sup> flex
   item — so the button's 12px gap opened up on BOTH sides of the ™ ("Joypath
   ™  →"). Cancel the left gap with a negative margin so the ™ glues back onto
   the word, and give the mark a slightly larger, confident size for this CTA
   only (the rest of the site keeps the global rule above). */
.hero__cta .jp-tm {
  font-size: max(0.9em, 16px);
  margin-left: calc(-1 * var(--space-12));
}

/* Mobile-menu "Start the Nexus™" CTA (.main-nav__cta, the solid gold pill):
   same inline-flex/gap situation as the hero button — the ™ is a bare child of
   the flex .btn, so the 12px gap opened before it. Glue it back onto the word.
   (The desktop .header-cta doesn't need this: there the label lives inside a
   .header-cta__text span, so the ™ flows inline, not as a flex item.) */
.main-nav__cta .jp-tm {
  margin-left: calc(-1 * var(--space-12));
}