/* ============================================================
   Heart Deeds
   One page, three artboards: 1900, 1024 and 402.

   The boards genuinely disagree with each other — 1900 runs the body
   copy in two columns where 402 stacks it, the crossing headline is the
   board's h2 at 1024 and its h4 at 402 — so nothing here is derived from
   the board above it. Every placed element carries two coordinate sets
   (`--x` for 1900, `--x-t` for 1024) and 402 is the flow that falls out
   when neither tier applies.
   ============================================================ */

/* ---------- reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

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

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

ul {
  list-style: none;
  padding: 0;
}

blockquote,
figure {
  margin: 0;
}

/* ============================================================
   FONTS
   Licensed Denton webfonts supplied by Heart.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/manus-storage/Inter-Variable-Latin_abd54e8a.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Denton Condensed";
  src: url("/manus-storage/DentonCondensed-Light_2d2fd498.woff2") format("woff2"),
       url("/manus-storage/DentonCondensed-Light_5b368561.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Denton Text";
  src: url("/manus-storage/Denton-Light_5d3ef076.woff2") format("woff2"),
       url("/manus-storage/Denton-Light_0e69b851.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS  (names mirror the Figma styles)
   ============================================================ */

:root {
  --color-red: #4c001c; /* Rich Red   */
  --color-grey: #d6d3d3; /* Light grey */
  --color-lime: #bcc700; /* Bright green */
  --color-ink: #111010; /* Neutral 00 */

  --font-display: "Denton Condensed", "Times New Roman", serif;
  --font-text: "Denton Text", "Times New Roman", serif;
  --font-sans: "Inter", system-ui, sans-serif;

  --grid-margin: 1.5rem; /* 24 — matches the mobile artboards */
  --stack-gap: 2rem;
}

@media (min-width: 768px) {
  :root {
    --stack-gap: 2.5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --grid-margin: 2rem; /* 32 */
  }
}

/* ============================================================
   FLUID SCALE
   Desktop keeps the artboard mapping: 1rem === 16px at exactly 1900px
   wide, so every Figma px is px/16 in rem and the page scales
   proportionally. Below that the mapping stops making sense — a 140px
   headline would shrink to noise — so the root resets to a real 16px
   and the type scale steps down deliberately instead.
   ============================================================ */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 1280px) {
  html {
    font-size: clamp(10.5px, 0.8421vw, 20px);
  }
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  background-color: var(--color-red);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 300;
  overflow-x: hidden;
  transition: background-color 0.6s linear;
}

::selection {
  background: var(--color-lime);
  color: var(--color-red);
}

/* ============================================================
   THEME INVERSION
   The nav flips to Rich Red while the light section is on screen.
   ============================================================ */

.theme-fg {
  color: #fff;
  transition: color 0.5s ease;
}

body.is-light .theme-fg {
  color: var(--color-red);
}

/* ============================================================
   PLACEMENT
   Placement values must NOT inherit. A nested `.ab` inside an `.ab`
   band (the quote-cross block) would otherwise pick up its parent's
   --hh and take the whole band's height.
   ============================================================ */

@property --x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --w {
  syntax: "*";
  inherits: false;
}
@property --hh {
  syntax: "*";
  inherits: false;
}
@property --ar {
  syntax: "*";
  inherits: false;
}
@property --x-t {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --y-t {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --w-t {
  syntax: "*";
  inherits: false;
}
@property --hh-t {
  syntax: "*";
  inherits: false;
}

.deeds {
  position: relative;
  overflow: clip;
  /* One artboard pixel. 1/16rem outside the tablet tier, which makes
     `calc(N * var(--u))` the same value as the desktop rem there. */
  --u: 0.0625rem;
}

.sec {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  padding-block: var(--stack-gap);
  overflow: clip;
  /* Full-bleed artwork belongs behind its content. It is absolutely
     positioned, and once the layout flows the blocks over it are not
     positioned at all — so without a stacking context the artwork paints
     on top of them and the closing button vanishes under it. */
  isolation: isolate;
}

.layer,
.ab {
  position: static;
}

.bg-art {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 66.9375rem; /* 1071 */
  z-index: -1;
}

.bg-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flip-x {
  transform: scaleX(-1);
}

.bg-red {
  background-color: var(--color-red);
}

.light-body {
  color: var(--color-red);
  background: radial-gradient(
    ellipse 244% 170% at 112% 118%,
    #006eec 0%,
    #3b8eec 17%,
    #77aded 33%,
    #b2cdec 50%,
    #edecec 67%,
    #ffffff 100%
  );
}

/* ---------- the 1900 board ---------- */

@media (min-width: 1280px) {
  .sec {
    display: block;
    padding-block: 0;
    height: var(--h);
  }

  .ab {
    position: absolute;
    left: var(--x, 0);
    top: var(--y, 0);
    width: var(--w, auto);
    height: var(--hh, auto);
  }

  /* Doubled class on purpose: anything declared later with a single class
     and its own `position` — .media-clip, .quote-cross-card — would win
     the tie and silently turn absolute placement into relative offsets. */
  .ab.ab {
    position: absolute;
  }
}

/* ---------- the 1024 board ---------- */

@media (min-width: 768px) and (max-width: 1279px) {
  .deeds {
    --u: 0.09765625vw; /* one artboard pixel: 1px at exactly 1024 wide */
  }

  .deeds .sec {
    display: block;
    padding: 0;
    height: var(--h-t);
  }

  .deeds .ab {
    position: absolute;
    left: var(--x-t, 0);
    top: var(--y-t, 0);
    width: var(--w-t, auto) !important;
    max-width: none !important;
    height: var(--hh-t, auto);
  }
  .deeds .ab.ab {
    position: absolute;
  }

  .deeds .media-clip {
    height: var(--hh-t, auto) !important;
    aspect-ratio: auto;
  }

  .deeds .bg-art {
    inset: 0 0 auto 0;
    height: var(--hh-t) !important;
  }
}

/* ---------- the 402 board: flow ---------- */

@media (max-width: 1279px) {
  .sec {
    padding-inline: var(--grid-margin);
  }

  /* Artboard widths are meaningless once the root is a real 16px. */
  .ab {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Image boxes keep their proportions instead of their pixel heights. */
  .media-clip {
    height: auto !important;
    aspect-ratio: var(--ar, 3 / 2);
  }

  .bg-art {
    inset: 0;
    height: 100% !important;
  }
}

/* ============================================================
   TYPE  (exact Figma styles)
   ============================================================ */

.h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 8.75rem; /* 140 */
  line-height: 1;
  letter-spacing: -0.02em;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 5.625rem; /* 90 */
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 4rem; /* 64 */
  line-height: 1.1;
}

.h4 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.5rem; /* 40 */
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.h5 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.125rem; /* 34 */
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.hero-message {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.8vw, 4.45rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.body-xl {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 1.625rem; /* 26 */
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.body-l {
  font-size: 1.25rem; /* 20 */
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.body-s {
  font-size: 1rem; /* 16 */
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.medium {
  font-weight: 500;
}

.center {
  text-align: center;
}

/* Below the artboard breakpoint the root is a real 16px, so the sizes
   above would render at their literal Figma pixels — a 140px headline on
   a 390px phone. Step the display sizes down; body copy barely moves,
   because it was already at a readable size. Anything that needs its own
   answer overrides this through a `dt-*` role below. */

@media (max-width: 1279px) {
  .h1 {
    font-size: 4.5rem; /* 72 */
    letter-spacing: -0.015em;
  }
  .h2 {
    font-size: 3rem; /* 48 */
  }
  .h3 {
    font-size: 2.25rem; /* 36 */
  }
  .h4 {
    font-size: 1.75rem; /* 28 */
  }
  .body-xl {
    font-size: 1.25rem;
  }
  .body-l {
    font-size: 1.0625rem;
  }
}

@media (max-width: 767px) {
  .h1 {
    font-size: 2.75rem; /* 44 */
    letter-spacing: -0.01em;
  }
  .h2 {
    font-size: 2rem; /* 32 */
  }
  .h3 {
    font-size: 1.625rem; /* 26 */
  }
  .h4 {
    font-size: 1.375rem; /* 22 */
  }
  .body-xl {
    font-size: 1.125rem;
  }
  .body-l {
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------
   Type on the two small boards

   Both are drawn by hand rather than derived, and they disagree: the
   crossing headline is the board's h2 at 1024 and its h4 at 402, while
   the closing headline is h2 and then 64. So the size cannot be read off
   a single class — each role carries its own, and each board states it.
   Desktop is untouched; these only exist below 1280, where the elements
   keep their .h1/.h2/... class for the 1900 board.
   ------------------------------------------------------------ */

@media (max-width: 1279px) {
  .deeds .dt-display,
  .deeds .dt-h2,
  .deeds .dt-cross,
  .deeds .dt-gap,
  .deeds .dt-offer,
  .deeds .dt-card,
  .deeds .dt-quote,
  .deeds .dt-webinar-title {
    font-family: var(--font-display);
    font-weight: 300;
  }
  .deeds .dt-lead,
  .deeds .dt-body,
  .deeds .dt-sub {
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
  }

  .deeds .hero-message {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.8rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }

  /* Shared by both boards. */
  .deeds .dt-display {
    font-size: calc(64 * var(--u));
    line-height: 1.1;
    letter-spacing: 0;
  }
  .deeds .dt-gap {
    font-size: calc(34 * var(--u));
    line-height: 1.15;
    letter-spacing: 0.02em;
  }
  .deeds .dt-offer {
    font-size: calc(40 * var(--u));
    line-height: 1.27;
    letter-spacing: 0.025em;
  }
}

/* ---- the 1024 board ---- */
@media (min-width: 768px) and (max-width: 1279px) {
  .deeds .dt-h2,
  .deeds .dt-cross {
    font-size: calc(90 * var(--u));
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .deeds .dt-card,
  .deeds .dt-quote {
    font-size: calc(34 * var(--u));
    line-height: 1.15;
    letter-spacing: 0.02em;
  }
  .deeds .dt-webinar-title {
    font-size: calc(40 * var(--u));
    line-height: 1.27;
    letter-spacing: 0.025em;
  }
  .deeds .dt-lead {
    font-weight: 300;
    font-size: calc(18 * var(--u));
    line-height: 1.4;
  }
  .deeds .dt-sub {
    font-weight: 300;
    font-size: calc(16 * var(--u));
    line-height: 1.3;
  }
  /* Scales with the board rather than sitting at a fixed 20 — otherwise
     the copy stays put while the columns around it shrink to 75%. */
  .deeds .dt-body {
    font-weight: 300;
    font-size: calc(20 * var(--u));
    line-height: 1.4;
  }
}

/* ---- the 402 board ---- */
@media (max-width: 767px) {
  .deeds .dt-h2 {
    font-size: 4rem; /* 64 */
    line-height: 1.1;
    letter-spacing: 0;
  }
  .deeds .dt-cross {
    font-size: 2.5rem; /* 40 */
    line-height: 1.27;
    letter-spacing: 0.025em;
  }
  .deeds .dt-webinar-title {
    font-size: 2.125rem; /* 34 */
    line-height: 1.15;
    letter-spacing: 0.02em;
  }
  /* Inter here, not Denton — both of these are set in the sans on the
     phone board. */
  .deeds .dt-lead,
  .deeds .dt-sub,
  .deeds .dt-card,
  .deeds .dt-quote {
    font-family: var(--font-sans);
    font-size: 1.25rem; /* 20 */
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  .deeds .hero-message {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 10vw, 2.7rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
}

/* ============================================================
   PAGE RHYTHM (the 402 board)
   The phone board breathes wider than the shared 2rem: 40-48 inside a
   movement, 120 between them. 48 is the resting gap; `deeds-break` tops
   it up to 120 wherever a movement starts. Section padding carries half
   of that 120 on each side of a boundary.
   ============================================================ */

@media (max-width: 767px) {
  .deeds .sec {
    gap: calc(48 * var(--u));
    padding-block: calc(60 * var(--u));
  }

  .deeds-break {
    margin-top: calc(72 * var(--u));
  }

  /* Two classes, to answer `.deeds .sec` above rather than lose to it. */
  .deeds .deeds-hero {
    padding-top: 6rem;
  }

  /* The headline, the CTA and the intro line all sit on that video, so
     the group reserves its height. Without this the body copy below
     started wherever the headline happened to wrap — 70px up inside the
     video, with the narrower Denton cut we have. +0.5rem against the
     section's 48 gap lands the next block 56 below the video. */
  .deeds-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Reserve the remaining video height so the next section starts below
       the hero image instead of flowing over it. */
    min-height: calc(55.156rem - 44.658vw + 0.5rem - 6rem);
    position: relative;
    z-index: 2;
  }

  /* Full-bleed artwork is a band on this board, not a background: 605
     down the closing section, with the founders on flat red below it.
     Held in proportion to the 402 board. */
  .deeds .bg-art {
    inset: 0 0 auto 0;
    height: calc(100vw * 605 / 402) !important;
  }

}

/* ============================================================
   HEADER
   The wordmark, nothing else. All three boards draw it identically —
   88x32 at 24/32 — and all three put the CTA in the hero.
   ============================================================ */

.site-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  padding-inline: 1.5rem; /* its own 24, not the 32 grid margin */
  padding-top: 2rem;
}

.wordmark {
  display: block;
  height: 2rem;
  width: 5.5rem;
  background-color: currentColor;
  mask-image: url("../img/logo-wordmark.png");
  -webkit-mask-image: url("../img/logo-wordmark.png");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: left center;
  -webkit-mask-position: left center;
}

/* ============================================================
   HERO
   ============================================================ */

.deeds-hero-media {
  position: absolute;
  inset-inline: 0;
  top: 0;
  overflow: clip;
}

/* Each board states its own height, in its own query — none can override
   another on source order. Below 768 the value runs the line between the
   boards that bracket that range: 703 high at 402 wide, and 540 at 767,
   which is exactly what the 1024 board's 720 measures at the moment the
   tablet tier takes over. So the header has no step in it anywhere. */
@media (max-width: 767px) {
  .deeds-hero-media {
    height: calc(55.156rem - 44.658vw);
  }
}

@media (min-width: 1280px) {
  .deeds-hero-media {
    height: 69.8125rem; /* 1117 */
  }
}

.deeds-hero-media video {
  position: absolute;
  inset-block: -10%;
  height: 120%;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .deeds .deeds-hero-media {
    height: calc(720 * var(--u));
  }
}

/* Only the 1900 board draws a chartreuse band. */
.chartreuse {
  display: none;
}

@media (min-width: 1280px) {
  .chartreuse {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 69.8125rem; /* 1117 */
    height: 79.5625rem; /* 1273 */
    background-image: linear-gradient(31.52deg, #4c001c 83.676%, #bcc700 114.06%);
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.pill,
.big-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  color: var(--color-red);
  transition: transform 0.3s ease;
}

.pill:hover,
.big-button:hover {
  transform: scale(1.02);
}

.pill {
  height: 3.5rem; /* 56 */
  border-radius: 0.875rem;
  padding-inline: 1.5rem;
  font-weight: 500;
}

.big-button {
  height: 6.875rem; /* 110 */
  border-radius: 1.5rem;
  padding-inline: 2rem;
  font-weight: 500;
}

.arrow {
  width: 1.2rem;
  flex-shrink: 0;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.pill:hover .arrow,
.big-button:hover .arrow {
  transform: rotate(180deg) translateX(0.25rem);
}

.pill-disabled {
  background: none;
  border: 1px solid var(--color-red);
  opacity: 0.3;
  justify-content: flex-start;
}

/* Three boards, three CTAs. `--u` needs no desktop twin: outside the
   tablet tier it is 1/16rem, so these are the artboard px there too. */
.hero-pill {
  height: calc(56 * var(--u));
}

.hero-big {
  display: none;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .hero-pill {
    height: calc(72 * var(--u));
  }
}

@media (min-width: 1280px) {
  .hero-pill {
    display: none;
  }
  .hero-big {
    display: flex;
  }
}

/* <BigButton> steps down below 1280 for pages with only a desktop
   artboard. All three Deeds boards draw it at its full 110, so here it
   keeps its size, radius and 20 label at every width. */
@media (max-width: 1279px) {
  .big-button {
    height: calc(110 * var(--u));
    border-radius: calc(24 * var(--u));
    padding-inline: calc(32 * var(--u));
  }
  .big-button > span {
    font-size: calc(20 * var(--u));
  }
}

/* ============================================================
   MEDIA
   ============================================================ */

.media-clip {
  overflow: clip;
  position: relative;
  /* Applies at every size. A clip whose height came only from --ar
     collapsed to zero on desktop — the image is absolutely positioned
     inside, so nothing gave the box a height. Where an explicit height
     is set both dimensions are definite and this is ignored. */
  aspect-ratio: var(--ar);
}

.media-clip img,
.media-clip video {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
}

.round {
  border-radius: 0.5rem;
}

/* ============================================================
   BODY COLUMNS
   One column at 1900 and on the phone, two at 1024 — so the two halves
   are their own blocks inside a parent that spans both.
   ============================================================ */

.body-cols {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  color: var(--color-grey);
}

.body-col > * + * {
  margin-top: 1.4em;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .body-cols {
    flex-direction: row;
    gap: calc(31 * var(--u));
  }
  .body-col-a {
    width: calc(387 * var(--u));
  }
  .body-col-b {
    width: calc(392 * var(--u));
  }
}

/* ============================================================
   OFFERS  (Bootcamps / Events / Courses / Personal learning path)
   Every board places this inside the red section, on the plain red.
   ============================================================ */

.offer-stack .offer-img {
  transition: none;
}

.offer-list li {
  height: calc(67 * var(--u));
}

@media (min-width: 1280px) {
  .offer-list li {
    height: 7.75rem; /* 124 */
  }
}

.offer-list button {
  display: block;
  text-align: left;
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

.offer-list button[aria-current="true"] {
  opacity: 1;
}

/* The list sits 32 under the photo, not the resting 48. */
@media (max-width: 767px) {
  .offer-list {
    margin-top: calc(-16 * var(--u));
  }
}

/* ============================================================
   LEARNING PATH CARD
   ============================================================ */

.learn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  overflow: clip;
  border-radius: 0.875rem;
  padding: 2.5rem;
  color: #fff;
}

.learn-card-art {
  position: absolute;
  inset: 0;
}

.learn-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.learn-card-copy {
  position: relative;
  width: 56.75rem; /* 908 */
  max-width: 100%;
  text-align: center;
}

.learn-card-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 27.5625rem; /* 441 */
  max-width: 100%;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .learn-card {
    gap: calc(24 * var(--u));
    padding: calc(40 * var(--u)) calc(120 * var(--u));
  }
  .learn-card-cta {
    width: calc(440 * var(--u));
  }
}

@media (max-width: 767px) {
  .learn-card {
    gap: 2.5rem;
    padding: 2.5rem 1.5rem;
  }
}

/* ============================================================
   QUOTE CROSS
   The cards travel up across the headline as you scroll, so they read
   as passing in front of it. `.quote-cross-card` keeps them above it.
   No `position` on either — `.ab` already positions them at desktop,
   and declaring it again would re-create the specificity tie.
   ============================================================ */

.quote-cross {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.quote-cross-head {
  z-index: 0;
  color: var(--color-red);
}

.quote-cross-card {
  z-index: 1;
  will-change: transform;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(80 * var(--u));
  border-radius: 0.5rem;
  border: 1px solid var(--color-grey);
  background: #fff;
  color: var(--color-red);
  padding: calc(81 * var(--u)) calc(81 * var(--u)) calc(41 * var(--u));
  text-align: center;
}

.quote-cross-card figcaption {
  width: 10.6875rem; /* 171 */
  max-width: 100%;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .quote-cross-card {
    padding-top: calc(65 * var(--u));
    padding-bottom: calc(25 * var(--u));
  }
}

@media (max-width: 767px) {
  .quote-cross-head {
    margin-bottom: calc(32 * var(--u));
  }
}

/* ============================================================
   WEBINARS
   Heading and rows are one flowing block, not four placed elements:
   every board sets the rows 80 under the heading, but the heading's
   height is not fixed — the artboards run it over two lines where our
   narrower cut fits it on one.
   ============================================================ */

.webinars {
  display: flex;
  flex-direction: column;
  gap: 5rem; /* 80 */
}

.webinar-rows {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40, against a 280 row: the boards' 320 pitch */
}

.webinar-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  border-radius: 0.5rem;
}

/* A definite height wins over aspect-ratio, so each board gets its own
   280: a plain height at 1900 (this clip is not `.ab`, so it has no
   `--hh` to read), `--hh-t` at 1024, and the ratio left to govern only
   on the phone, where the row goes full width. */
.webinar-thumb {
  position: relative;
  height: 17.5rem; /* 280 */
  width: 17.875rem; /* 286 */
  flex-shrink: 0;
  border-radius: 0.5rem;
}

.webinar-tint {
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
}

.webinar-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.webinar-cta {
  width: 17.875rem; /* 286 */
}

.webinar-cta-disabled {
  width: 14.5625rem; /* 233 */
}

@media (min-width: 768px) and (max-width: 1279px) {
  .webinars {
    gap: calc(80 * var(--u));
  }
  .webinar-rows,
  .webinar-row {
    gap: calc(40 * var(--u));
  }
  .webinar-thumb {
    width: calc(286 * var(--u));
  }
  .webinar-cta {
    width: calc(286 * var(--u));
  }
  .webinar-cta-disabled {
    width: calc(233 * var(--u));
  }
  .webinars-head {
    width: calc(799 * var(--u));
  }
}

/* The phone board draws 46 under the heading and 48 between rows. */
@media (max-width: 767px) {
  .webinars {
    gap: 3rem; /* 48 */
  }
  .webinar-rows {
    gap: 3rem; /* 48 */
  }
  .webinar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .webinar-thumb,
  .webinar-cta,
  .webinar-cta-disabled {
    width: 100%;
  }
}

/* ============================================================
   CLOSING
   ============================================================ */

.closing-block {
  display: flex;
  flex-direction: column;
  gap: 5rem; /* 80 */
}

.closing-cta {
  width: 27.5625rem; /* 441 */
  max-width: 100%;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .closing-block {
    gap: calc(48 * var(--u));
  }
  .closing-cta {
    width: calc(464 * var(--u));
  }
}

@media (max-width: 767px) {
  .closing-block {
    gap: 3.5rem; /* 56 */
  }
}

/* The two portraits in the red body, side by side on every board. The
   columns are equal, so the width falls out of the row and the height
   from the proportion — 441x518 at 1900, 272x320 at 1024, 169x196 on the
   phone, which used to show only the first of the two.

   Two classes on the aspect-ratio: `.media-clip` sets its own from --ar
   and would otherwise win on source order in the flow tier. */
.portraits {
  display: flex;
  gap: calc(16 * var(--u));
}

.portraits .portrait {
  flex: 1;
  min-width: 0;
  height: auto;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .portraits {
    gap: calc(15 * var(--u));
  }
  .portraits .portrait {
    aspect-ratio: 272 / 320;
    height: auto !important;
  }
}

@media (min-width: 1280px) {
  .portraits {
    gap: calc(24 * var(--u));
  }
  .portraits .portrait {
    aspect-ratio: 441 / 518;
  }
}

/* Two founders side by side at every width — 365 wide at 1900, 272 at
   1024, 169 on the phone — each with her brand mark overlaid on the
   bottom-left of the portrait and her name below it. The columns are
   equal, so one row serves all three boards and only the gap differs. */
.founders {
  display: flex;
  gap: calc(16 * var(--u));
}

.founder {
  flex: 1;
  min-width: 0;
}

.founder-photo {
  position: relative;
  aspect-ratio: 169 / 199;
  overflow: clip;
  border-radius: 0.5rem;
}

.founder-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-mark {
  position: absolute;
  left: calc(16 * var(--u));
  bottom: calc(16 * var(--u));
}

.founder-name {
  margin-top: calc(16 * var(--u));
}

@media (min-width: 768px) and (max-width: 1279px) {
  .founders {
    gap: calc(15 * var(--u));
  }
  .founder-photo {
    aspect-ratio: 272 / 320;
  }
  .founder-mark {
    left: calc(24 * var(--u));
    bottom: calc(24 * var(--u));
  }
  .founder-name {
    margin-top: calc(22 * var(--u));
  }
}

@media (min-width: 1280px) {
  .founders {
    gap: calc(21 * var(--u));
  }
  .founder-photo {
    aspect-ratio: 365 / 430;
  }
  .founder-mark {
    left: calc(24 * var(--u));
    bottom: calc(24 * var(--u));
  }
  .founder-name {
    margin-top: calc(22 * var(--u));
  }
}

.quiet {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.quiet:hover {
  opacity: 0.6;
}

.tagline {
  text-align: right;
}

@media (max-width: 1279px) {
  .tagline {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .tagline {
    text-align: left;
  }
}

.pull-24 {
  /* The board sets the lead 24 under its heading, not the resting 48. */
}

@media (max-width: 767px) {
  .pull-24 {
    margin-top: calc(-24 * var(--u));
  }
}

/* ============================================================
   PRELOADER
   Red curtain with the Heart mark; lifts once the document is ready.
   ============================================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  /* Keep the preview readable even if script or font loading is delayed. */
  visibility: hidden;
  pointer-events: none;
}

.pl-mark {
  height: 2.5rem;
  width: auto;
  opacity: 0;
}

/* ============================================================
   MOTION PRIMITIVES
   Two attributes cover the whole page:
     data-reveal="lines" | "fade" | "rise"
     data-parallax="<speed>"
   ============================================================ */

/* Pre-hide so nothing flashes before GSAP takes over. Removed by
   .motion-ready once the timeline owns the element. */
[data-reveal]:not(.motion-ready) {
  opacity: 0;
}

/* SplitText line masking.
   The display line-heights are tight (h1 is 1.0), so descenders — g, j,
   p, y, and the full stop — fall outside the line box and get eaten by
   the mask's `overflow: clip`. The mask can't simply be allowed to
   overflow: it is what hides the next line before it slides up. So grow
   the line box instead and pull the mask back by the same amount, which
   leaves the designed line spacing and the total height unchanged. */
.line-mask {
  display: block;
  overflow: clip;
  position: relative;
  margin-bottom: -0.2em;
}

.line-mask > .line {
  display: block;
  position: relative;
  padding-bottom: 0.2em;
  will-change: transform;
}

[data-parallax] {
  will-change: transform;
}

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

  [data-reveal],
  [data-reveal]:not(.motion-ready) {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-parallax] {
    transform: none !important;
    will-change: auto;
  }

.media-clip img,
.media-clip video {
  inset: 0;
  height: 100%;
}
}

/* ============================================================
   HEART EVENTS
   A standalone editorial block placed after the introduction.
   ============================================================ */

.heart-events {
  padding: clamp(4.5rem, 9vw, 10rem) var(--grid-margin);
  color: var(--color-red);
  background:
    radial-gradient(circle at 92% 9%, rgba(188, 199, 0, 0.42), transparent 24rem),
    linear-gradient(135deg, #f7f7f4 0%, #e8f1f7 52%, #d1e2f4 100%);
}

.heart-events__intro,
.heart-events__grid {
  width: min(100%, 116rem);
  margin-inline: auto;
}

.heart-events__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(14rem, 0.7fr);
  column-gap: clamp(2rem, 7vw, 9rem);
  align-items: end;
}

.heart-events__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 1.25rem;
  color: rgba(76, 0, 28, 0.68);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heart-events__title {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.6vw, 7.8rem);
  font-weight: 300;
  line-height: 0.91;
  letter-spacing: -0.03em;
}

.heart-events__lead {
  margin: 0 0 0.45rem;
  font-family: var(--font-text);
  font-size: clamp(1.1rem, 1.55vw, 1.5rem);
  line-height: 1.34;
}

.heart-events__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.1vw, 2rem);
  margin-top: clamp(3rem, 6vw, 6.5rem);
}

.heart-events__card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.25rem;
  color: var(--color-red);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1.25rem 3rem rgba(40, 25, 34, 0.12);
  transition: transform 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.heart-events__card:not(.heart-events__card--pending):hover,
.heart-events__card:not(.heart-events__card--pending):focus-visible {
  transform: translateY(-0.35rem);
  box-shadow: 0 1.75rem 3.4rem rgba(40, 25, 34, 0.18);
}

.heart-events__card:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 4px;
}

.heart-events__media {
  position: relative;
  aspect-ratio: 1.34 / 1;
  overflow: hidden;
  background: var(--color-grey);
}

.heart-events__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.heart-events__card:not(.heart-events__card--pending):hover .heart-events__media img {
  transform: scale(1.045);
}

.heart-events__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.heart-events__glow--lime {
  background: linear-gradient(144deg, transparent 43%, rgba(188, 199, 0, 0.7) 100%);
}

.heart-events__glow--violet {
  background: linear-gradient(144deg, transparent 43%, rgba(108, 45, 183, 0.48) 100%);
}

.heart-events__glow--blue {
  background: linear-gradient(144deg, transparent 43%, rgba(0, 110, 236, 0.5) 100%);
}

.heart-events__content {
  display: flex;
  min-height: 15.5rem;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.3rem, 2.2vw, 2rem);
}

.heart-events__date {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.heart-events__card-title {
  margin: 0.7rem 0 1.35rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.8vw, 3.25rem);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.heart-events__action {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding: 0.82rem 1rem;
  border: 1px solid rgba(76, 0, 28, 0.18);
  border-radius: 99px;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 600;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.heart-events__card:not(.heart-events__card--pending):hover .heart-events__action,
.heart-events__card:not(.heart-events__card--pending):focus-visible .heart-events__action {
  border-color: var(--color-red);
  color: #fff;
  background: var(--color-red);
}

.heart-events__card--pending {
  opacity: 0.72;
}

.heart-events__card--pending .heart-events__action {
  opacity: 0.68;
}

.heart-events__card--waitlist {
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  font: inherit;
}

/* ============================================================
   EARLY BIRD SIGNUP
   Custom Heart presentation with ActiveCampaign form 63 as endpoint.
   ============================================================ */

.heart-early-bird {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 10rem) var(--grid-margin);
  color: #fff;
  background:
    url("/manus-storage/heart-early-bird-background_d27902b0.jpg") center / cover no-repeat,
    var(--color-red);
}

.heart-early-bird::after {
  position: absolute;
  top: -12rem;
  right: -10rem;
  width: clamp(21rem, 40vw, 42rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(1.5rem, 4vw, 4rem) rgba(255, 255, 255, 0.06), 0 0 0 clamp(3.2rem, 8vw, 8rem) rgba(255, 255, 255, 0.03);
  content: "";
  pointer-events: none;
}

.heart-early-bird__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(21rem, 0.75fr);
  column-gap: clamp(3rem, 10vw, 13rem);
  row-gap: clamp(3rem, 5vw, 5rem);
  width: min(100%, 116rem);
  margin-inline: auto;
  align-items: center;
}

.heart-early-bird__eyebrow {
  margin: 0 0 1.2rem;
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heart-early-bird__title {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 8rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 18px rgba(54, 0, 18, 0.5);
}

.heart-early-bird__copy {
  grid-column: 1 / -1;
}

.heart-early-bird__lead {
  max-width: 31rem;
  margin: clamp(1.6rem, 3vw, 2.7rem) 0 0;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-sans);
  font-size: clamp(1.12rem, 1.6vw, 1.55rem);
  font-weight: 400;
  line-height: 1.35;
  text-shadow: 0 1px 18px rgba(54, 0, 18, 0.5);
}

.heart-early-bird__form-card {
  grid-column: 2;
  min-height: 25.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(76, 0, 28, 0.16);
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 1.2rem 1.2rem 0 rgba(76, 0, 28, 0.18);
}

.heart-early-bird__form {
  display: grid;
  gap: 1rem;
}

.heart-early-bird__field {
  display: grid;
  gap: 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
}

.heart-early-bird__field input {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(76, 0, 28, 0.32);
  border-radius: 0.45rem;
  color: var(--color-red);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
}

.heart-early-bird__field input::placeholder {
  color: rgba(76, 0, 28, 0.56);
}

.heart-early-bird__field input:focus-visible,
.heart-early-bird__submit:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 3px;
}

.heart-early-bird__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  margin-top: 0.55rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-red);
  border-radius: 99px;
  color: #fff;
  background: var(--color-red);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.heart-early-bird__submit:hover:not(:disabled) {
  color: var(--color-red);
  background: transparent;
}

.heart-early-bird__submit:active:not(:disabled) {
  transform: scale(0.98);
}

.heart-early-bird__submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.heart-early-bird__note {
  margin: 0.1rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  line-height: 1.4;
  opacity: 0.72;
}

.heart-early-bird__submission-target {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.heart-early-bird__thank-you {
  display: grid;
  min-height: 19rem;
  align-content: center;
}

.heart-early-bird__thank-you h3 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.heart-early-bird__thank-you > p:last-child {
  margin: 1.25rem 0 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
}

/* ============================================================
   BOOTCAMP WAITLIST MODAL
   Native Heart styling on top of the ActiveCampaign form endpoint.
   ============================================================ */

.heart-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(24, 0, 10, 0.7);
  backdrop-filter: blur(0.55rem);
  animation: heart-modal-in 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.heart-modal__panel {
  position: relative;
  width: min(100%, 38rem);
  max-height: min(46rem, calc(100dvh - 3rem));
  overflow: auto;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 1.25rem;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(177, 198, 0, 0.52), transparent 19rem),
    var(--color-red);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.36);
  animation: heart-modal-panel-in 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.heart-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  background: rgba(76, 0, 28, 0.36);
  font-family: var(--font-sans);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  transition: background-color 160ms ease, transform 160ms ease;
}

.heart-modal__close:hover,
.heart-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.heart-modal__close:active {
  transform: scale(0.96);
}

.heart-modal__eyebrow {
  margin: 0 3rem 1.15rem 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.heart-modal__title {
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.7rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.heart-modal__lead {
  max-width: 32rem;
  margin: 1.4rem 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
}

.heart-modal__form {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.heart-modal__field {
  display: grid;
  gap: 0.45rem;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
}

.heart-modal__field input {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 0.45rem;
  color: var(--color-red);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
}

.heart-modal__field input::placeholder {
  color: rgba(76, 0, 28, 0.58);
}

.heart-modal__field input:focus-visible,
.heart-modal__submit:focus-visible,
.heart-modal__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.heart-modal__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: 0.6rem;
  padding: 1rem 1.25rem;
  border: 1px solid #fff;
  border-radius: 99px;
  color: var(--color-red);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.heart-modal__submit:hover:not(:disabled) {
  color: #fff;
  background: transparent;
}

.heart-modal__submit:active:not(:disabled) {
  transform: scale(0.98);
}

.heart-modal__submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.heart-modal__note {
  margin: 0.15rem 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
}

.heart-modal__submission-target {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.heart-modal__thank-you {
  display: grid;
  min-height: 21rem;
  align-content: center;
}

@keyframes heart-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes heart-modal-panel-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .heart-modal,
  .heart-modal__panel {
    animation: none;
  }
}

@media (max-width: 767px) {
  .heart-early-bird {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }

  .heart-early-bird__inner {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .heart-early-bird__title {
    max-width: none;
    font-size: clamp(3.25rem, 15vw, 4.5rem);
  }

  .heart-early-bird__lead {
    max-width: 27rem;
    font-size: 1.13rem;
  }

  .heart-early-bird__form-card {
    grid-column: auto;
    min-height: 0;
    padding: 1.4rem;
    border-radius: 1rem;
    box-shadow: 0.65rem 0.65rem 0 rgba(76, 0, 28, 0.18);
  }

  .heart-events {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }

  .heart-events__intro {
    display: block;
  }

  .heart-events__title {
    max-width: none;
    font-size: clamp(3.25rem, 15vw, 4.5rem);
  }

  .heart-events__lead {
    max-width: 29rem;
    margin-top: 1.5rem;
  }

  .heart-events__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 3rem;
  }

  .heart-events__card {
    display: grid;
    grid-template-columns: minmax(7.25rem, 0.8fr) minmax(0, 1.2fr);
    min-height: 0;
    border-radius: 1rem;
  }

  .heart-events__media {
    aspect-ratio: auto;
    min-height: 11rem;
  }

  .heart-events__content {
    min-height: 0;
    padding: 1.15rem;
  }

  .heart-events__card-title {
    margin: 0.45rem 0 1rem;
    font-size: 2rem;
  }

  .heart-modal {
    align-items: end;
    padding: 0;
  }

  .heart-modal__panel {
    width: 100%;
    max-height: min(47rem, calc(100dvh - 1rem));
    padding: 2rem 1.3rem 1.7rem;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .heart-modal__title {
    font-size: clamp(2.8rem, 12vw, 3.6rem);
  }
}

/* ============================================================
   LEARNING JOURNEY
   ============================================================ */

.heart-learning {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 10rem) var(--grid-margin);
  color: var(--color-red);
  background: #f7f6f3;
}

.heart-learning::after {
  position: absolute;
  right: -15rem;
  bottom: -18rem;
  width: min(55vw, 52rem);
  aspect-ratio: 1;
  border: 1px solid rgba(76, 0, 28, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(76, 0, 28, 0.035), 0 0 0 10rem rgba(76, 0, 28, 0.02);
  content: "";
  pointer-events: none;
}

.heart-learning__shell {
  position: relative;
  z-index: 1;
  width: min(100%, 116rem);
  margin-inline: auto;
}

.heart-learning__header {
  max-width: none;
}

.heart-learning__eyebrow,
.heart-faq__eyebrow {
  margin: 0 0 1.2rem;
  color: rgba(76, 0, 28, 0.67);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heart-learning__title,
.heart-faq__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7.2vw, 8.4rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.heart-learning__title {
  max-width: none;
}

.heart-learning__intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(17rem, 0.78fr);
  gap: clamp(2rem, 7vw, 9rem);
  margin-top: clamp(3.5rem, 7vw, 8rem);
  align-items: end;
}

.heart-learning__image {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 0.4rem;
  background: var(--color-grey);
  box-shadow: 0.9rem 0.9rem 0 var(--color-lime);
}

.heart-learning__image img {
  width: 100%;
  aspect-ratio: 1.28 / 1;
  object-fit: cover;
  object-position: 50% 48%;
}

.heart-learning__story {
  display: grid;
  gap: 1.4rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-sans);
  font-size: clamp(1.12rem, 1.65vw, 1.6rem);
  line-height: 1.36;
}

.heart-learning__story p,
.heart-learning__closing p {
  margin: 0;
}

.heart-learning__steps {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(3.5rem, 7vw, 8rem);
}

.heart-learning__step {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.27fr) minmax(15rem, 0.73fr) minmax(18rem, 1fr);
  column-gap: clamp(1.5rem, 4vw, 5rem);
  padding: clamp(1.5rem, 3vw, 2.8rem) 0;
  border-top: 1px solid rgba(76, 0, 28, 0.28);
  align-items: start;
}

.heart-learning__step:last-child {
  border-bottom: 1px solid rgba(76, 0, 28, 0.28);
}

.heart-learning__number {
  display: block;
  color: rgba(76, 0, 28, 0.57);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.heart-learning__step h3 {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 3.6vw, 4.35rem);
  font-weight: 300;
  line-height: 0.91;
  letter-spacing: -0.025em;
}

.heart-learning__step p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.45;
}

.heart-learning__closing {
  max-width: 53rem;
  margin: clamp(4rem, 8vw, 10rem) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 5.9rem);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.heart-learning__quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 5rem);
  margin-top: clamp(3.5rem, 6vw, 6.5rem);
}

.heart-learning__quote {
  margin: 0;
  padding: clamp(1.75rem, 3vw, 3rem);
  border: 1px solid rgba(76, 0, 28, 0.2);
  background: rgba(255, 255, 255, 0.56);
}

.heart-learning__quote blockquote {
  max-width: 31rem;
  font-family: var(--font-text);
  font-size: clamp(1.45rem, 2.15vw, 2.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.heart-learning__quote figcaption {
  margin-top: 2rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ============================================================
   FAQ
   ============================================================ */

.heart-faq {
  padding: clamp(4.5rem, 9vw, 10rem) var(--grid-margin);
  color: #fff;
  background:
    radial-gradient(circle at 85% 0%, rgba(188, 199, 0, 0.52), transparent 22rem),
    var(--color-red);
}

.heart-faq__shell {
  width: min(100%, 116rem);
  margin-inline: auto;
}

.heart-faq__header {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
}

.heart-faq__eyebrow {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.68);
}

.heart-faq__title {
  max-width: none;
}

.heart-faq__lead {
  max-width: 42rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  line-height: 1.4;
}

.heart-faq__list {
  margin-top: clamp(3.5rem, 7vw, 8rem);
  border-top: 1px solid rgba(255, 255, 255, 0.37);
}

.heart-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.37);
}

.heart-faq__question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.4rem, 2.8vw, 2.6rem) 0;
  color: #fff;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 4rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.heart-faq__question:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -0.2rem;
}

.heart-faq__icon {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 2.3rem;
  font-weight: 300;
  line-height: 1;
}

.heart-faq__answer > div {
  max-width: 74rem;
  padding: 0 0 clamp(1.8rem, 3.5vw, 3rem);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.48;
}

.heart-faq__answer p + p {
  margin-top: 1em;
}

@media (max-width: 767px) {
  .heart-learning,
  .heart-faq {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }

  .heart-learning__title,
  .heart-faq__title {
    font-size: clamp(3.25rem, 15vw, 4.7rem);
  }

  .heart-learning__intro-grid,
  .heart-learning__quotes {
    grid-template-columns: 1fr;
  }

  .heart-learning__intro-grid {
    gap: 2.5rem;
    margin-top: 3.5rem;
  }

  .heart-learning__story {
    font-size: 1.13rem;
  }

  .heart-learning__steps {
    margin-top: 4rem;
  }

  .heart-learning__step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.75rem;
    padding: 1.6rem 0;
  }

  .heart-learning__step h3 {
    font-size: 2.75rem;
  }

  .heart-learning__step p {
    grid-column: 2;
  }

  .heart-learning__closing {
    margin-top: 4.5rem;
    font-size: 3.1rem;
  }

  .heart-learning__quotes {
    gap: 1rem;
    margin-top: 3.5rem;
  }

  .heart-learning__quote {
    padding: 1.5rem;
  }

  .heart-learning__quote blockquote {
    font-size: 1.55rem;
  }

  .heart-faq__header {
    display: block;
  }

  .heart-faq__lead {
    margin-top: 1.5rem;
  }

  .heart-faq__list {
    margin-top: 3.5rem;
  }

  .heart-faq__question {
    padding: 1.45rem 0;
    font-size: 2.2rem;
  }
}

/* ============================================================
   HEART FOUNDERS
   Uses the site's exact aubergine brand token: --color-red (#4c001c).
   ============================================================ */

.heart-founders {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 10rem) var(--grid-margin);
  color: #fff;
  background: var(--color-red);
}

.heart-founders::before {
  position: absolute;
  top: -22rem;
  right: -14rem;
  width: min(48vw, 48rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(255, 255, 255, 0.025), 0 0 0 8rem rgba(255, 255, 255, 0.02);
  content: "";
  pointer-events: none;
}

.heart-founders__shell {
  position: relative;
  width: min(100%, 116rem);
  margin-inline: auto;
}

.heart-founders__header {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.7fr);
  column-gap: clamp(2rem, 8vw, 11rem);
  align-items: end;
}

.heart-founders__eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heart-founders__title {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7.3vw, 8.5rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.heart-founders__lead {
  max-width: 28rem;
  margin: 0 0 0.5rem;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  font-weight: 400;
  line-height: 1.35;
}

.heart-founders__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 5rem);
  margin-top: clamp(3.5rem, 7vw, 7.5rem);
}

.heart-founder {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.25rem, 2vw, 2.25rem);
  align-items: end;
}

.heart-founder__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e6e6e9;
}

.heart-founder__portrait::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(27, 0, 9, 0.18));
  content: "";
  pointer-events: none;
}

.heart-founder__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.heart-founder:first-child .heart-founder__portrait img {
  object-position: 50% 18%;
}

.heart-founder__copy {
  padding-bottom: 0.45rem;
}

.heart-founder__role {
  margin: 0 0 0.7rem;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.heart-founder__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 4.75rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.025em;
}

.heart-founder__biography {
  margin: 1.25rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 400;
  line-height: 1.43;
}

.heart-founder__biography p + p {
  margin-top: 0.9em;
}

.heart-founder__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.87rem;
  font-weight: 600;
  transition: opacity 160ms ease;
}

.heart-founder__linkedin:hover {
  opacity: 0.68;
}

.heart-founders__reach {
  max-width: 45rem;
  margin: clamp(3.5rem, 7vw, 7.5rem) 0 0 auto;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-text);
  font-size: clamp(1.5rem, 2.55vw, 2.8rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.heart-founders__footer {
  display: grid;
  grid-template-columns: 0.75fr 0.75fr 1.5fr;
  gap: clamp(2rem, 4vw, 5rem);
  margin-top: clamp(4.5rem, 8vw, 9rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.heart-founders__contact,
.heart-founders__socials {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.52rem;
  font-family: var(--font-sans);
  font-size: 0.94rem;
}

.heart-founders__contact > p,
.heart-founders__socials > p {
  margin: 0 0 0.55rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heart-founders__contact a,
.heart-founders__socials a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  transition: border-color 160ms ease;
}

.heart-founders__contact a:hover,
.heart-founders__socials a:hover {
  border-color: #fff;
}

.heart-founders__quote {
  max-width: 33rem;
  margin: 0 0 0 auto;
  font-family: var(--font-text);
  font-size: clamp(1.55rem, 2.3vw, 2.65rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

@media (max-width: 1023px) {
  .heart-founders__header {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.75fr);
  }

  .heart-founder {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .heart-founder__portrait {
    aspect-ratio: 4 / 4.45;
  }
}

@media (max-width: 767px) {
  .heart-founders {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }

  .heart-founders::before {
    top: -10rem;
    right: -12rem;
    width: 26rem;
  }

  .heart-founders__header {
    display: block;
  }

  .heart-founders__title {
    font-size: clamp(3.4rem, 15vw, 4.7rem);
  }

  .heart-founders__lead {
    margin-top: 1.5rem;
  }

  .heart-founders__grid {
    grid-template-columns: 1fr;
    gap: 3.25rem;
    margin-top: 3.5rem;
  }

  .heart-founder {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 1.15rem;
  }

  .heart-founder__portrait {
    aspect-ratio: 3 / 4;
  }

  .heart-founder__role {
    margin-bottom: 0.45rem;
  }

  .heart-founder__name {
    font-size: clamp(2.4rem, 10.5vw, 3.25rem);
  }

  .heart-founder__biography {
    margin-top: 0.9rem;
    font-size: 0.98rem;
  }

  .heart-founders__footer {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    margin-top: 4rem;
  }

  .heart-founders__reach {
    margin-top: 4rem;
    font-size: 2rem;
  }

  .heart-founders__quote {
    margin: 0;
    font-size: 2rem;
  }
}

/* ============================================================
   HEART PILLARS
   A calm, editorial bridge from the founders to the deeper Heart story.
   ============================================================ */

.heart-pillars {
  padding: clamp(4.5rem, 9vw, 10rem) var(--grid-margin);
  color: var(--color-red);
  background: #f7f6f3;
}

.heart-pillars__shell {
  width: min(100%, 116rem);
  margin-inline: auto;
}

.heart-pillars__header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr);
  column-gap: clamp(2rem, 8vw, 10rem);
  align-items: end;
}

.heart-pillars__eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 1.25rem;
  color: rgba(76, 0, 28, 0.62);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heart-pillars__title {
  max-width: 10ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7.1vw, 8.25rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.heart-pillars__lead {
  max-width: 29rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-text);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.35;
}

.heart-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(3.5rem, 7vw, 7.5rem);
}

.heart-pillar {
  position: relative;
  min-height: 23rem;
  overflow: hidden;
  padding: 1.4rem;
  color: #fff;
  background: var(--color-red);
}

.heart-pillar::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 0, 9, 0.02) 18%, rgba(46, 0, 16, 0.84) 100%);
  content: "";
  pointer-events: none;
}

.heart-pillar__image,
.heart-pillar__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.heart-pillar__image img {
  object-fit: cover;
  transition: transform 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.heart-pillar:hover .heart-pillar__image img {
  transform: scale(1.05);
}

.heart-pillar__number,
.heart-pillar__name {
  position: relative;
  z-index: 1;
}

.heart-pillar__number {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.heart-pillar__name {
  position: absolute;
  right: 1.4rem;
  bottom: 1.15rem;
  left: 1.4rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 3.4vw, 4.1rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.025em;
}

@media (max-width: 1023px) {
  .heart-pillars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .heart-pillars {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }

  .heart-pillars__header {
    display: block;
  }

  .heart-pillars__title {
    font-size: clamp(3.4rem, 15vw, 4.7rem);
  }

  .heart-pillars__lead {
    margin-top: 1.5rem;
  }

  .heart-pillars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 3rem;
  }

  .heart-pillar {
    min-height: 14rem;
    padding: 1rem;
  }

  .heart-pillar__name {
    right: 1rem;
    bottom: 0.9rem;
    left: 1rem;
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
}