/* ============================================================
   Wealth By Design™ — event page
   Layered on movement.css. Uses the same warm-black editorial
   tokens; adds only the structures the event surface needs.
   ============================================================ */

/* The hero carries three elements the other page heroes do not — the
   invitation mark, the strap and the value/CTA lockup — so the vertical
   rhythm is tighter than the shared hero to keep the whole deck clear of the
   fixed header at every viewport. */
.page-wealth-by-design {
  --hero-word: "Design.";
  --hero-image: none;
  --hero-position: center;
  /* The whole hero deck is scaled as one block to fill the poster's display
     column — roughly half the viewport width. The title sets the measure and
     the supporting copy, badge and button are sized up with it so the stack
     keeps its proportions rather than the heading floating over small text. */
  --hero-title-size: clamp(3rem, 12vw, 11rem);
  --hero-lede-size: clamp(1rem, 1.62vw, 1.5rem);
  --hero-lede-measure: min(49vw, 46rem);
  --hero-copy-gap: 1.15rem;
  --hero-deck-min: 0;
}

.page-wealth-by-design main {
  overflow: visible;
}

/* main.css sets `overflow-x: hidden` on both html and body, which turns the
   root into a scroll container and stops `position: sticky` from ever
   engaging. The movement page already opts out this way (see
   html.page-movement-root in movement.css); the sticky hero and the pinned
   video layer below both depend on it. `clip` gives the same overflow
   containment without creating a scrollport. */
html.page-wealth-by-design-root,
body.page-wealth-by-design {
  overflow-x: clip;
  overflow-y: visible;
}

/* Cinematic video layer ------------------------------------- */

/* .wbd-cinematic wraps the hero AND the first editorial section. The media
   inside it is sticky with a negative margin, so it takes no layout space but
   stays pinned behind both — that is what lets the footage spill past the hero
   edge and through the transparent top of .wbd-spill. */
.wbd-cinematic {
  position: relative;
  isolation: isolate;
  background: var(--paper);
}

/* The media keeps its own 100svh layout box — collapsing it with a negative
   margin-bottom leaves sticky with a degenerate range and it never pins. The
   following content is pulled back over it instead, so sticky travel runs to
   the end of .wbd-cinematic: the video unpins exactly as the spill section's
   bottom reaches the viewport bottom. */
.wbd-hero-media {
  height: 100svh;
  position: sticky;
  top: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--paper);
}

.page-wealth-by-design .page-hero-scroll {
  margin-top: -100svh;
}

/* Landscape footage (1600×900), so it runs full-bleed. The subjects sit
   right of centre; holding object-position there keeps them in frame as the
   crop tightens on narrow viewports, where the hero copy needs the left. */
.wbd-hero-video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
  object-position: 64% center;
  /* Slight overscale leaves room for the parallax drift below. */
  transform: translate3d(0, 0, 0) scale(1.08);
}

/* Three passes: a top band so the header nav stays legible over bright
   footage, a left-weighted wash behind the hero copy, and a base fade that
   hands off to the page background. */
.wbd-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 14, 16, .8) 0%, rgba(13, 14, 16, .34) calc(var(--header-h) + 2rem), transparent calc(var(--header-h) + 7rem)),
    linear-gradient(90deg, rgba(13, 14, 16, .96) 0%, rgba(13, 14, 16, .88) 26%, rgba(13, 14, 16, .58) 52%, rgba(13, 14, 16, .34) 78%, rgba(13, 14, 16, .42) 100%),
    linear-gradient(0deg, var(--paper) 1%, rgba(13, 14, 16, .5) 26%, transparent 62%);
  pointer-events: none;
}

@media (max-width: 899px) {
  /* A tall crop of 16:9 footage shows only a narrow slice, so the wash has to
     stay light enough for that slice to read. The copy is large and bold at
     this size and carries its own contrast, so an even mid-weight wash is
     enough — stacking the desktop layers here blacks the footage out. */
  .wbd-hero-scrim {
    background:
      linear-gradient(180deg, rgba(13, 14, 16, .78) 0%, rgba(13, 14, 16, .34) calc(var(--header-h) + 3rem), rgba(13, 14, 16, .22) calc(var(--header-h) + 8rem)),
      linear-gradient(0deg, var(--paper) 1%, rgba(13, 14, 16, .66) 32%, rgba(13, 14, 16, .46) 100%);
  }

  .wbd-hero-video {
    object-position: 58% center;
  }
}

/* Parallax: the same scroll-driven approach the movement hero uses. */
@keyframes wbd-video-depth {
  to { transform: translate3d(0, -7%, 0) scale(1.17); }
}

@supports (animation-timeline: scroll()) {
  .wbd-hero-video {
    animation: wbd-video-depth 1ms linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 150svh;
  }
}

.wbd-cinematic.is-video-active .wbd-hero-video {
  will-change: transform;
}

/* The spill section sits over the pinned video: its top is transparent so the
   footage reads through, then it settles onto the page background.
   The video stays pinned for (this section's height − 100svh), so the extra
   top padding is what buys the spill its on-screen life — without it the
   section is shorter than the viewport and the video unpins before any of it
   is visible. The padding is transparent, so that space *is* the spill. */
.wbd-spill {
  position: relative;
  padding-top: calc(var(--section-y) + 46svh);
  background: linear-gradient(
    180deg,
    rgba(13, 14, 16, 0) 0%,
    rgba(13, 14, 16, .35) 14%,
    rgba(13, 14, 16, .88) 30%,
    var(--paper) 42%
  );
}

@media (prefers-reduced-motion: reduce) {
  .wbd-hero-video {
    animation: none;
    transform: none;
  }
}

/* The hero deck is 100svh with the content bottom-aligned, so on short
   viewports (laptops at 720–800px) a display size chosen for width alone
   pushes the top of the stack up behind the fixed header. Below that height
   the title takes its size from the viewport height instead, and the rhythm
   between the stacked elements tightens to match. */
@media (max-height: 880px) {
  .page-wealth-by-design {
    --hero-title-size: clamp(2.6rem, min(12vw, 16.5svh), 11rem);
    --hero-lede-size: clamp(.95rem, min(1.62vw, 2.5svh), 1.5rem);
    --hero-copy-gap: .8rem;
  }

  .wbd-hero-mark {
    margin-bottom: .7rem;
    padding: .5rem 1rem;
  }

  .wbd-hero-strap {
    margin-top: .8rem;
    line-height: 1.75;
  }

  .wbd-hero-actions {
    margin-top: .95rem;
  }

  .wbd-value {
    padding: .55rem 1.3rem;
  }

  .wbd-value dd {
    font-size: clamp(1.7rem, 2.9svh, 3.4rem);
  }
}

/* Hero ------------------------------------------------------ */

.page-wealth-by-design .page-hero {
  background: transparent;
  padding: calc(var(--header-h) + 1rem) 0 clamp(1.75rem, 2.6vw, 2.75rem);
}

/* The shared hero bottom-aligns its deck, so the breathing room under the
   header is only whatever slack happens to be left over — on a phone that
   collapses to almost nothing. Top-aligning makes that gap an explicit
   padding instead, and the leftover slack falls to the bottom where the
   section transition already provides space. Declared after the base rule
   above: same specificity, so source order decides. */
@media (max-width: 899px) {
  .page-wealth-by-design .page-hero {
    align-items: start;
    padding-top: calc(var(--header-h) + 7rem);
  }
}

/* The shared hero pseudo-elements would paint over the video: ::before is the
   photo/gradient layer (unused here — the scrim does that job) and ::after is
   the oversized watermark word, which fights the footage. */
.page-wealth-by-design .page-hero::before,
.page-wealth-by-design .page-hero::after {
  content: none;
}

.page-wealth-by-design .page-hero-scroll {
  position: relative;
  background: transparent;
}

.page-wealth-by-design .page-hero .cta-row {
  margin-top: 1.4rem;
}

.page-wealth-by-design .page-hero .cta-row .btn {
  padding: clamp(.9rem, 1.15vw, 1.35rem) clamp(1.6rem, 2.3vw, 2.7rem);
  font-size: clamp(.95rem, 1.15vw, 1.2rem);
}

.wbd-hero-mark {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.05rem;
  border: 1px solid var(--champagne);
  padding: .68rem 1.25rem;
  color: var(--champagne-lt);
  font-size: clamp(.68rem, .78vw, .88rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.page-wealth-by-design .page-hero h1 em {
  display: block;
  color: var(--champagne-lt);
  font-style: italic;
  font-weight: 600;
}

.page-wealth-by-design .page-hero h1 sup {
  font-size: .28em;
  letter-spacing: 0;
  vertical-align: super;
}

.wbd-hero-strap {
  margin-top: 1.15rem;
  color: var(--ink-soft);
  font-size: clamp(.78rem, 1.02vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.95;
  text-transform: uppercase;
}

.wbd-hero-strap span {
  color: var(--champagne-lt);
}

/* The value badge and the CTA sit as one lockup. `stretch` matches their
   heights to the taller of the two, so the pair reads as a single unit
   regardless of how the button label wraps. */
.wbd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(.75rem, 1.1vw, 1.15rem);
  margin-top: 1.3rem;
}

.page-wealth-by-design .page-hero .wbd-hero-actions .cta-row {
  margin: 0;
  display: flex;
}

.wbd-hero-actions .btn {
  height: 100%;
  display: inline-flex;
  align-items: center;
}

.wbd-value {
  display: grid;
  align-content: center;
  gap: .1rem;
  margin: 0;
  border: 1px solid var(--line-strong);
  padding: .7rem 1.6rem;
  text-align: center;
}

.wbd-value dt,
.wbd-value dd {
  margin: 0;
}

.wbd-value dt {
  color: var(--ink-mute);
  font-size: clamp(.62rem, .74vw, .82rem);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.wbd-value dd {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.9vw, 3.4rem);
  font-weight: 780;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.wbd-value .wbd-value-unit {
  color: var(--ink-mute);
  font-size: clamp(.62rem, .74vw, .82rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Outcomes -------------------------------------------------- */

.wbd-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--stone);
}

.wbd-outcome {
  border-right: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}

.wbd-outcome span {
  display: block;
  margin-bottom: .8rem;
  color: var(--champagne-lt);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.wbd-outcome p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
}

/* What to expect -------------------------------------------- */

.wbd-expect {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line-strong);
}

.wbd-expect-item {
  border-bottom: 1px solid var(--stone);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem) 0;
}

.wbd-expect-item h3 {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.wbd-expect-item h3 b {
  display: block;
  margin-bottom: .5rem;
  color: var(--champagne-lt);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.wbd-expect-item p {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* Session dates --------------------------------------------- */

.wbd-dates {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line-strong);
  padding: 0;
  list-style: none;
}

.wbd-date {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--stone);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  transition: background-color 200ms ease;
}

.wbd-date:hover {
  background: var(--surface-hover);
}

.wbd-date-index {
  color: var(--champagne-lt);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
}

.wbd-date-day {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 650;
  letter-spacing: -.02em;
}

.wbd-date-time {
  color: var(--ink-soft);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Session details ------------------------------------------- */

.wbd-session {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.wbd-session-item {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.2rem;
}

.wbd-session-item dt {
  margin-bottom: .55rem;
  color: var(--ink-mute);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.wbd-session-item dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.wbd-session-item dd small {
  display: block;
  margin-top: .3rem;
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
}

.wbd-seats {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-left: 2px solid var(--champagne);
  background: rgba(200, 93, 53, .09);
  padding: 1.1rem 1.3rem;
  color: var(--ink);
  font-size: .92rem;
}

/* Pull quote ------------------------------------------------ */

.wbd-quote {
  margin: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: clamp(2rem, 4vw, 3.2rem) 0;
  text-align: center;
}

.wbd-quote p {
  margin: 0 auto;
  max-width: 28ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}

/* Movement pillars ------------------------------------------ */

.wbd-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.wbd-pillar {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.1rem;
}

.wbd-pillar h3 {
  margin: 0 0 .5rem;
  color: var(--champagne-lt);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.wbd-pillar p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}

/* Closing strap --------------------------------------------- */

.wbd-closing-strap {
  border-top: 1px solid var(--line-strong);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  text-align: center;
}

.wbd-closing-strap p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.wbd-closing-strap em {
  color: var(--champagne-lt);
  font-style: normal;
}

/* Responsive ------------------------------------------------ */

@media (max-width: 960px) {
  .wbd-outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wbd-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .wbd-outcomes,
  .wbd-expect,
  .wbd-session,
  .wbd-pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .wbd-date {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    row-gap: .3rem;
  }

  .wbd-date-time {
    grid-column: 2;
  }

  .wbd-expect-item {
    padding-right: 0;
  }

  /* Stacked full-width on mobile: side by side leaves both too narrow to
     read, and a wrapped flex row would strand the button on its own line
     at an arbitrary width. */
  .wbd-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wbd-value,
  .wbd-hero-actions .cta-row,
  .wbd-hero-actions .btn {
    width: 100%;
  }

  .wbd-hero-actions .btn {
    justify-content: center;
  }
}