/* The Momentum Company homepage concept.
   Layout, spacing, type scale and motion ported from the BYQ halden-miller family (see SOURCES.json).
   Colours are The Momentum Company's own: navy #161E2A, cream #F8F5EE, gold #D4AF37. */

:root {
  --dark: #161e2a;
  --dark-card: #1c2533;
  --dark-label: #232d3c;
  --cream: #f8f5ee;
  --cream-64: rgba(248, 245, 238, 0.64);
  --cream-16: rgba(248, 245, 238, 0.16);
  --cream-08: rgba(248, 245, 238, 0.08);
  --cream-04: rgba(248, 245, 238, 0.04);
  --dark-64: rgba(22, 30, 42, 0.64);
  --dark-16: rgba(22, 30, 42, 0.16);
  --dark-08: rgba(22, 30, 42, 0.08);
  --gold: #d4af37;
  --gold-hover: #c29d2a;

  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --sans: "Switzer", "Helvetica Neue", Arial, sans-serif;

  --nav-h: 64px;
  --max: 1800px;
  --pad: 32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 16px; line-height: 24px; color: var(--dark); background: var(--cream); }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* Entrance: opacity and blur, as in the source (IntersectionObserver adds .is-in) */
.reveal { opacity: 0; filter: blur(12px); transition: opacity 700ms ease-out, filter 700ms ease-out; }
.reveal.is-in { opacity: 1; filter: blur(0); }
.reveal.delay { transition-delay: 200ms; }

/* ---------- Navigation (halden-miller-navbar-1; transparent bar over the hero, as in the source) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--nav-h); background: transparent; transition: background-color .4s, box-shadow .4s; }
.nav.is-solid, .nav.is-open { background: var(--dark); box-shadow: 0 1px 0 0 var(--cream-08); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__left { display: flex; align-items: center; gap: 12px; flex: 1; }
.nav__brand img { width: 128px; height: auto; }
.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__links a { display: block; padding: 8px 12px; border: 1px solid transparent; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--cream); transition: color .3s, border-color .3s; }
.nav__links a:hover, .nav__links a:focus-visible { border-color: transparent; color: var(--gold); }
.nav__right { flex: 1; display: flex; justify-content: flex-end; }
.btn-nav { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 2px; border: 1px solid rgba(248, 245, 238, 0.4); color: var(--cream); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: background-color .3s, color .3s, border-color .3s; }
.btn-nav .short { display: none; }
.btn-nav:hover, .btn-nav:focus-visible { background: var(--cream); color: var(--dark); border-color: var(--cream); }
.nav__burger { display: none; width: 32px; height: 28px; border-radius: 2px; border: 1px solid rgba(248, 245, 238, 0.4); background: transparent; align-items: center; justify-content: center; cursor: pointer; }
.nav__burger span { display: block; width: 12px; height: 1px; background: var(--cream); position: relative; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 12px; height: 1px; background: var(--cream); }
.nav__burger span::before { top: -4px; } .nav__burger span::after { top: 4px; }
.nav__mobile { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--dark); border-top: 1px solid var(--cream-08); padding: 8px var(--pad) 24px; }
.nav__mobile a { display: block; padding: 14px 0; font-size: 13px; line-height: 20px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--cream-08); }
.nav.is-open .nav__mobile { display: block; }

/* ---------- Hero (halden-miller-hero-3) ---------- */
.hero { position: relative; z-index: 2; }
.hero__frame { position: relative; display: flex; width: 100%; min-height: 100svh; padding: calc(var(--nav-h) + 32px) 0 32px; overflow: hidden; background: var(--dark); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__shade-top { position: absolute; top: 0; left: 0; right: 0; height: 30%; z-index: 1; background: linear-gradient(180deg, rgba(22, 30, 42, 0.64) 0%, rgba(22, 30, 42, 0) 100%); }
.hero__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(22, 30, 42, 0.62) 0%, rgba(22, 30, 42, 0.30) 48%, rgba(22, 30, 42, 0.30) 70%, rgba(22, 30, 42, 0.50) 100%), linear-gradient(0deg, rgba(22, 30, 42, 0.55) 0%, rgba(22, 30, 42, 0) 40%); }
.hero .container { position: relative; z-index: 2; }
.hero__master { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: calc(100svh - var(--nav-h) - 64px); }
.hero__center { display: flex; flex-direction: column; gap: 24px; margin: auto 0; }
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.hero__left { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 640px; }
.hero h1 { font-family: var(--display); font-weight: 300; font-size: 46px; line-height: 58px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); }
.hero h1 strong { font-weight: 500; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__right { max-width: 332px; color: var(--cream); font-size: 16px; line-height: 24px; }

.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: 2px; font-family: var(--sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: color .3s, background-color .3s, border-color .3s; }
.btn svg { width: 14px; height: 14px; flex: none; transition: transform .3s; }
.btn:hover svg { transform: translateX(3px); }
.btn--gold { background: var(--gold); color: var(--dark); border: 1px solid var(--gold); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--cream); border-color: var(--cream); }
.btn--ghost { color: var(--cream); background: transparent; border: 1px solid rgba(248, 245, 238, 0.4); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--cream); border-color: var(--cream); color: var(--dark); }

.hero__bottom { display: flex; align-items: flex-end; margin-top: auto; }
.case { display: flex; align-items: stretch; gap: 16px; max-width: 361px; padding: 12px; border-radius: 12px; background: var(--dark-card); color: var(--cream); text-decoration: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -1px 0 0 var(--cream-16), 0 1px 0 0 var(--cream-08); }
.case__img { flex: none; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; }
.case__img img { width: 100%; height: 100%; object-fit: cover; }
.case__body { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.case__title { font-size: 14px; line-height: 20px; font-weight: 500; }
.case__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.label { display: inline-flex; padding: 4px 8px; border-radius: 2px; background: var(--dark-label); font-family: var(--sans); font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); }
.case__arrow { width: 12px; height: 12px; color: var(--cream-64); flex: none; }

.hero__toggle { position: absolute; right: 0; bottom: 0; z-index: 3; margin: 0 var(--pad) 32px 0; display: flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 24px; border: 1px solid var(--dark-16); background: rgba(22, 30, 42, 0.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--cream); cursor: pointer; box-shadow: 0 -1px 0 0 var(--cream-16), 0 1px 0 0 var(--cream-08); }
.hero__toggle.is-paused { background: var(--cream); color: var(--dark); }
.hero__toggle svg { width: 12px; height: 12px; }

/* ---------- Breakpoints 991 / 767 / 479 ---------- */
@media (max-width: 991px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .hero__row { flex-direction: column; align-items: flex-start; justify-content: space-between; }
}
@media (max-width: 767px) {
  :root { --pad: 16px; --nav-h: 56px; }
  .nav__brand img { width: 108px; }
  .btn-nav { padding: 8px 10px; font-size: 10px; }
  .hero__frame { padding: calc(var(--nav-h) + 24px) 0 16px; }
  .hero__master { min-height: calc(100svh - var(--nav-h) - 40px); gap: 32px; }
  .hero__shade-top { height: 75%; }
  .hero h1 { font-size: 30px; line-height: 40px; letter-spacing: 0.05em; }
  .hero__left { gap: 24px; }
  .hero__row { gap: 32px; }
  .btn { padding: 14px 16px; font-size: 11px; }
  .case { max-width: 260px; }
  .case__img { display: none; }
  .hero__toggle { margin: 0 var(--pad) 16px 0; }
}
@media (max-width: 479px) {
  .case { max-width: 240px; }
  .btn-nav .long { display: none; }
  .btn-nav .short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; filter: none; transition: none; }
  .btn, .btn-nav, .nav__links a { transition: none; }
}

[hidden] { display: none !important; }

/* ---------- Shared, ported from the family's tokens ---------- */
:root { --lift: #efeae0; --dark-88: rgba(22, 30, 42, 0.88); --cream-88: rgba(248, 245, 238, 0.88); --cream-48: rgba(248, 245, 238, 0.48); }
.h-display { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; font-size: 36px; line-height: 46px; }
.label--light { background: #e6e0d4; color: var(--dark-88); }
.label--onDark { background: var(--dark-card); color: var(--cream-88); }
.label--glass { background: rgba(22, 30, 42, 0.32); color: var(--cream); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--dark { background: var(--dark); color: var(--cream); border: 1px solid var(--dark); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--dark-88); }
.btn--block { width: 100%; justify-content: center; }
.reveal-up { opacity: 0; transform: translateY(32px); transition: opacity 700ms ease-out, transform 700ms ease-out; }
.reveal-up.is-in { opacity: 1; transform: none; }
.reveal-up.delay { transition-delay: 150ms; }

/* ---------- Who we are (halden-miller-image-gallery-1) ---------- */
.who { background: var(--dark); color: var(--cream-88); padding: 120px 0; }
.who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 132px; align-items: center; }
.who__img { height: 751px; border-radius: 12px; overflow: hidden; }
.who__img img { width: 100%; height: 100%; object-fit: cover; }
.who__content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 560px; }
.who__large { font-size: 20px; line-height: 28px; color: var(--cream); }
.who__body { font-size: 16px; line-height: 24px; color: var(--cream-64); }
.who .btn { margin-top: 8px; }

/* ---------- 5 E process (halden-miller-value-features-5) ---------- */
.process { background: var(--cream); padding: 80px 0; }
.process__head { max-width: 680px; margin-bottom: 80px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.process__lede { font-size: 20px; line-height: 28px; color: var(--dark-64); }
.process__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 132px; }
.process__img { border-radius: 12px; overflow: hidden; border: 1px solid var(--dark-16); }
.process__img img { width: 100%; height: 100%; object-fit: cover; }
.process__list { list-style: none; border-top: 1px solid var(--dark-16); }
.step { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--dark-16); }
.step__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.step__title { font-family: var(--sans); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark); }
.step__body { font-size: 16px; line-height: 24px; color: var(--dark-64); }

/* ---------- Results (halden-miller-stats-2) ---------- */
.results { position: relative; color: var(--cream); overflow: hidden; }
.results__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.results__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 30, 42, 0.35) 0%, rgba(22, 30, 42, 0.55) 45%, var(--dark) 100%); }
.results__master { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; padding-top: 32px; padding-bottom: 32px; }
.results__head { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.results__head .h-display { font-size: 44px; line-height: 56px; max-width: 900px; }
.results__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { border-left: 1px solid var(--cream-16); padding: 0 24px; display: flex; flex-direction: column; gap: 16px; }
.stat__num { font-family: var(--display); font-weight: 300; font-size: 48px; line-height: 52px; letter-spacing: 0.02em; }
.stat__text { font-size: 14px; line-height: 20px; color: var(--cream-64); max-width: 260px; }

/* ---------- Client stories (halden-miller-testimonials-2) ---------- */
.stories { background: var(--dark); color: var(--cream-88); padding: 160px 0; }
.stories__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 680px; margin-bottom: 64px; }
.stories__head .h-display { color: var(--cream); }
.stories__row { display: flex; gap: 16px; flex-wrap: wrap; }
.vcard { position: relative; width: 332px; height: 504px; border-radius: 12px; overflow: hidden; background: var(--dark-card); margin: 0; }
.vcard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 35%; background: linear-gradient(0deg, rgba(22, 30, 42, 0.64), rgba(22, 30, 42, 0)); pointer-events: none; }
.vcard.is-playing .vcard__shade { opacity: 0; }
.vcard__label { position: absolute; top: 16px; left: 16px; background: rgba(22, 30, 42, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vcard__toggle { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 24px; border: 1px solid var(--cream-16); background: rgba(22, 30, 42, 0.24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--cream); cursor: pointer; transition: background-color .3s, color .3s; }
.vcard__toggle:hover, .vcard__toggle:focus-visible { background: rgba(248, 245, 238, 0.88); color: var(--dark); }
.vcard__toggle svg { width: 12px; height: 12px; }
.vcard__name { position: absolute; left: 16px; bottom: 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cream); }
.vcard.is-playing .vcard__name, .vcard.is-playing .vcard__label { opacity: 0; transition: opacity .3s; }

/* ---------- Programs (halden-miller-pricing-1) ---------- */
.programs { background: var(--cream); padding: 80px 0; }
.programs__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 760px; margin: 0 auto 80px; }
.programs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 80px; }
.plan { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px; border-radius: 12px; background: var(--lift); border: 1px solid var(--dark-16); }
.plan__aud { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--dark-88); }
.plan__name { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; font-size: 30px; line-height: 36px; color: var(--dark); margin-top: -8px; }
.plan__list { list-style: none; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan__list li { display: flex; gap: 10px; font-size: 14px; line-height: 20px; color: var(--dark-88); }
.check { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gold-hover); }
.plan__foot { font-size: 14px; line-height: 20px; color: var(--dark-64); }
.plan--dark { background: var(--dark-card); border-color: var(--dark-card); }
.plan--dark .plan__aud, .plan--dark .plan__list li { color: var(--cream-88); }
.plan--dark .plan__name { color: var(--cream); }
.plan--dark .plan__foot { color: var(--cream-64); }
.plan--dark .check { color: var(--gold); }
.guidance { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.guidance__left { display: flex; align-items: center; gap: 16px; max-width: 560px; }
.avatars { display: flex; flex: none; }
.avatars img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--cream); object-fit: cover; margin-left: -12px; }
.avatars img:first-child { margin-left: 0; }
.guidance__title { font-size: 14px; line-height: 20px; font-weight: 500; }
.guidance__text { font-size: 14px; line-height: 20px; color: var(--dark-64); }

/* ---------- About and team (halden-miller-team-grid-1) ---------- */
.team { background: var(--dark); color: var(--cream-88); padding: 120px 0; }
.team__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 780px; margin-bottom: 64px; }
.team__head .h-display { color: var(--cream); }
.team__lede { font-size: 16px; line-height: 24px; color: var(--cream-64); max-width: 560px; }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 16px; }
.member { position: relative; height: 380px; border-radius: 12px 12px 0 0; overflow: hidden; margin: 0; background: var(--dark-card); }
.member img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.member__panel { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-end; padding: 12px 14px 10px 16px; background: var(--dark); border-radius: 12px 0 0 0; text-align: right; }
.member__name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cream); }
.member__role { font-size: 14px; line-height: 20px; color: var(--cream-64); }

/* ---------- Closing call (halden-miller-cta-1) ---------- */
.cta { position: relative; overflow: hidden; color: var(--cream); padding: 200px 0; text-align: center; }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__shade { position: absolute; inset: 0; background: rgba(22, 30, 42, 0.48); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cta__title { font-size: 46px; line-height: 58px; letter-spacing: 0.06em; max-width: 980px; }
.cta__text { font-size: 16px; line-height: 24px; color: var(--cream-88); }
.cta__buttons { justify-content: center; margin-top: 8px; }

/* ---------- Footer (halden-miller-footer-1) ---------- */
.footer { background: var(--dark); color: var(--cream-88); padding: 80px 0 32px; }
.footer__halves { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-bottom: 132px; }
.footer__brand { display: flex; flex-direction: column; gap: 24px; max-width: 440px; }
.footer__brand img { width: 170px; height: auto; }
.footer__tag { font-size: 20px; line-height: 28px; color: var(--cream-88); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.footer__col { display: flex; flex-direction: column; gap: 4px; }
.footer__label { font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-88); margin-bottom: 16px; }
.footer__col a { font-size: 16px; line-height: 24px; color: var(--cream-88); text-decoration: none; transition: color .2s; }
.footer__col a:hover, .footer__col a:focus-visible { color: var(--gold); }
.footer__bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--cream-16); font-size: 10px; line-height: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-48); }

/* ---------- Section breakpoints 991 / 767 / 479 ---------- */
@media (max-width: 991px) {
  .who__grid, .process__grid { gap: 48px; }
  .process__grid { grid-template-columns: 1fr; }
  .process__img { height: 362px; }
  .results__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .programs__grid { grid-template-columns: repeat(2, 1fr); }
  .team__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__halves { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .h-display { font-size: 24px; line-height: 32px; }
  .who { padding: 64px 0; }
  .who__grid { grid-template-columns: 1fr; gap: 32px; }
  .who__img { height: 360px; }
  .who__content { gap: 16px; }
  .who__large { font-size: 16px; line-height: 24px; }
  .process { padding: 48px 0; }
  .process__head { margin-bottom: 56px; }
  .process__lede { font-size: 16px; line-height: 24px; }
  .step { padding: 16px 0; gap: 16px; }
  .results__head .h-display { font-size: 26px; line-height: 34px; }
  .results__master { padding-top: 24px; padding-bottom: 24px; }
  .stat { padding: 0 16px; }
  .stat__num { font-size: 36px; line-height: 40px; }
  .stories { padding: 96px 0; }
  .stories__head { gap: 16px; margin-bottom: 48px; }
  .stories__row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); }
  .vcard { flex: none; width: 264px; height: 440px; scroll-snap-align: start; }
  .programs { padding: 48px 0; }
  .programs__head { margin-bottom: 48px; }
  .programs__grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 48px; }
  .plan { padding: 24px; }
  .plan__name { font-size: 24px; line-height: 30px; }
  .guidance { justify-content: flex-start; }
  .team { padding: 64px 0; }
  .team__head { margin-bottom: 48px; }
  .team__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .member { height: 300px; border-radius: 12px; }
  .cta { padding: 120px 0; }
  .cta__title { font-size: 26px; line-height: 36px; letter-spacing: 0.05em; }
  .cta__inner { gap: 16px; }
  .footer { padding: 48px 0 16px; }
  .footer__halves { gap: 48px; padding-bottom: 40px; }
  .footer__brand img { width: 136px; }
  .footer__tag { font-size: 16px; line-height: 24px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}
@media (max-width: 479px) {
  .step { grid-template-columns: 1fr; }
  .member { height: 240px; }
  .guidance__left { flex-wrap: wrap; }
  .avatars img { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; transition: none; }
}

/* Quote cards share the story card's size and frame (deviation: the source slider holds video cards only) */
.qcard { position: relative; flex: none; width: 332px; height: 504px; border-radius: 12px; margin: 0; padding: 64px 24px 24px; background: var(--dark-card); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; box-shadow: inset 0 0 0 1px var(--cream-08); }
.qcard__label { background: var(--dark-label); }
.qcard__quote { font-size: 18px; line-height: 27px; color: var(--cream); }
.qcard__cite { display: flex; flex-direction: column; }
.qcard__name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cream); }
.qcard__role { font-size: 14px; line-height: 20px; color: var(--cream-64); }
@media (max-width: 767px) { .qcard { width: 264px; height: 440px; padding: 56px 20px 20px; } .qcard__quote { font-size: 16px; line-height: 24px; } }

/* 404 (halden-miller-utility-1 layout, their tokens) */
.error { background: var(--dark); color: var(--cream); min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 48px) 0 64px; }
.error__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.error__code { font-family: var(--display); font-weight: 300; font-size: 160px; line-height: 1; letter-spacing: 0.06em; color: rgba(212, 175, 55, 0.24); }
.error__text { max-width: 460px; color: var(--cream-64); }
@media (max-width: 767px) { .error__code { font-size: 96px; } }

/* ---------- Hero client logos (their trusted-by strip, as a marquee) ---------- */
.hero__bottom { justify-content: flex-start; padding-right: 72px; }
.logos { display: flex; align-items: center; gap: 24px; width: min(760px, 100%); }
.logos__label { flex: none; font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-64); }
.logos__mask { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.logos__track { display: flex; align-items: center; width: max-content; animation: logos-marquee 48s linear infinite; }
.logos__track img { width: auto; max-width: none; opacity: 0.82; margin-right: 56px; }
.logos__a { height: 36px; }
.logos__b { height: 26px; }
@keyframes logos-marquee { to { transform: translateX(-50%); } }


/* ---------- Results lede ---------- */
.results__lede { max-width: 620px; font-size: 16px; line-height: 24px; color: var(--cream-88); }

/* ---------- Client stories: pinned horizontal scroll (BYQ gem Horizontal Pin Scroll), halden-miller label and type ---------- */
.stories { background: var(--dark); color: var(--cream); padding: 0; }
.hps-track { position: relative; height: 440vh; }
.hps-stage { position: relative; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.hps-head { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: calc(var(--nav-h) + 32px); padding-bottom: 8px; }
.hps-rail { flex: 1; min-height: 0; display: flex; gap: 4vw; padding-inline: 8vw; will-change: transform; }
.hps-panel { position: relative; flex: 0 0 84vw; height: 100%; display: grid; grid-template-columns: 1fr; align-items: center; }
.hps-media { grid-area: 1 / 1; justify-self: end; width: 54%; height: min(64vh, 86%); overflow: hidden; border-radius: 12px; background: var(--dark-card); }
.hps-media--portrait { width: min(28vw, 400px); margin-right: 8%; }
.hps-img { display: block; width: 112%; max-width: none; height: 100%; object-fit: cover; will-change: transform; }
.hps-copy { grid-area: 1 / 1; justify-self: start; z-index: 2; max-width: 44%; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; will-change: transform, opacity; }
.hps-panel--video .hps-copy { max-width: 52%; }
.hps-quote { font-family: var(--sans); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.45; color: var(--cream); }
.hps-cite { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; }
.hps-name { font-weight: 500; color: var(--cream); }
.hps-role { color: var(--cream-64); }
.hps-word { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(44px, 6.4vw, 104px); line-height: 1; color: var(--cream); }
.hps-index { position: absolute; left: var(--pad); bottom: 28px; z-index: 3; font-size: 12px; line-height: 1; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; color: var(--cream); }
.hps-current { display: inline-block; width: 2ch; }
.hps-total { color: var(--cream-48); }
.hps-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: var(--cream-16); }
.hps-fill { display: block; height: 100%; transform: scaleX(0); transform-origin: left center; background: var(--gold); }

/* ---------- Closing: How it works (halden-miller-value-features-11) ---------- */
.closing { background: var(--dark); padding: 0 0 120px; }
.label--deep { background: #e1d9ca; color: var(--dark-88); }
.closing__card { display: grid; grid-template-columns: 1fr 1fr; gap: 132px; align-items: center; padding: 48px; border-radius: 16px; background: var(--lift); color: var(--dark); box-shadow: 0 4px 16px 0 rgba(22, 30, 42, 0.08), 0 8px 24px 0 rgba(22, 30, 42, 0.08); }
.closing__left { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.closing__left .h-display { font-size: 40px; line-height: 50px; }
.closing__text { font-size: 16px; line-height: 24px; color: var(--dark-88); max-width: 460px; }
.closing__media { position: relative; height: 628px; border-radius: 16px; overflow: hidden; }
.closing__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.widget { position: absolute; left: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100% - 48px)); }
.widget__top, .widget__list { border-radius: 12px; background: rgba(239, 234, 224, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 16px 0 rgba(22, 30, 42, 0.12); }
.widget__top { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--dark); }
.widget__top svg { width: 20px; height: 20px; color: var(--dark-64); }
.widget__list { list-style: none; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.widget__list li { display: flex; gap: 12px; padding: 10px; border-radius: 8px; font-size: 13px; line-height: 18px; color: var(--dark-64); }
.widget__list li b { display: block; font-weight: 500; color: var(--dark); }
.widget__list li.is-active { background: var(--lift); }
.widget__n { flex: none; font-size: 11px; line-height: 18px; letter-spacing: 0.1em; color: var(--gold-hover); font-weight: 500; }

@media (max-width: 991px) {
  .closing__card { grid-template-columns: 1fr; gap: 40px; }
  .hps-media { width: 50%; }
  .hps-media--portrait { width: min(36vw, 360px); margin-right: 0; }
}
@media (max-width: 767px) {
  .hero__bottom { padding-right: 56px; }
  .logos { gap: 16px; }
  .logos__a { height: 26px; } .logos__b { height: 19px; }
  .logos__track img { margin-right: 36px; }
  .hps-head { padding-top: calc(var(--nav-h) + 20px); }
  .hps-rail { gap: 6vw; padding-inline: 6vw; }
  .hps-panel { flex-basis: 88vw; grid-template-rows: auto 1fr; align-items: start; padding: 20px 0 64px; gap: 20px; }
  .hps-copy, .hps-panel--video .hps-copy { grid-area: 1 / 1; max-width: 100%; gap: 14px; }
  .hps-media, .hps-media--portrait { grid-area: 2 / 1; justify-self: stretch; width: 100%; height: 100%; margin: 0; }
  .hps-media--portrait { justify-self: center; width: auto; aspect-ratio: 9 / 14; }
  .hps-quote { font-size: 16px; line-height: 24px; }
  .hps-word { font-size: 40px; }
  .closing { padding-bottom: 64px; }
  .closing__card { padding: 24px; gap: 32px; }
  .closing__left .h-display { font-size: 24px; line-height: 32px; }
  .closing__media { height: 420px; }
  .widget { left: 12px; bottom: 12px; width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
  .hps-track { height: auto !important; }
  .hps-stage { height: auto !important; overflow: visible !important; padding-bottom: 96px; }
  .hps-rail { flex-direction: column; gap: 64px; padding-inline: var(--pad); }
  .hps-panel { flex-basis: auto; height: auto; }
  .hps-media { height: 60vh; }
  .hps-index, .hps-bar { display: none; }
}
@media (max-width: 767px) {
  .closing__media { height: auto; overflow: visible; border-radius: 0; }
  .closing__media > img { height: 360px; border-radius: 16px; }
  .widget { position: static; width: 100%; margin-top: 12px; }
}

.h-display, .hero h1, .hps-quote { text-wrap: balance; }

/* Size every slot to its asset (Greg's rule, 1 Sep 2026): frames take the file's shape, no cover-crop */
.who__img { height: auto; aspect-ratio: 1200 / 1396; }
.process__img { aspect-ratio: 4 / 5; align-self: start; height: auto; }
.member { height: auto; aspect-ratio: 4 / 5; }
.closing__media { height: auto; aspect-ratio: 1159 / 1260; }
.hps-media { width: 56%; height: auto; aspect-ratio: 1400 / 788; align-self: center; }
.hps-media--portrait { width: auto; height: min(64vh, 86%); aspect-ratio: 9 / 16; }
.hps-img { width: 100%; }
.hps-copy { max-width: 40%; }
@media (max-width: 991px) {
  .process__img { height: auto; max-width: 520px; }
}
@media (max-width: 767px) {
  .who__img { height: auto; }
  .member { height: auto; }
  .closing__media { aspect-ratio: auto; }
  .closing__media > img { height: auto; aspect-ratio: 1159 / 1260; }
  .hps-media { grid-area: 2 / 1; width: 100%; height: auto; aspect-ratio: 1400 / 788; align-self: start; }
  .hps-media--portrait { width: auto; height: min(50vh, 100%); aspect-ratio: 9 / 16; justify-self: center; }
  .hps-copy { max-width: 100%; }
}
@media (max-width: 479px) { .member { height: auto; } }

/* ---------- Polish pass, 11 Nov (spacing audit against the halden-miller specs) ---------- */
p { text-wrap: pretty; }
.process__head, .programs__head { gap: 24px; }
.stat { gap: 24px; }
.plan .label { padding: 0; background: none; }
.plan:not(.plan--dark) .check { color: var(--dark); }
.closing { padding-bottom: 64px; }
.closing__card { align-items: stretch; }
.closing__left { gap: 32px; }
.closing__text { margin-top: auto; }
.footer__brand { gap: 48px; }
.who__grid { align-items: start; }
@media (max-width: 991px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .plan--dark { grid-column: 1 / -1; }
  .plan__name { font-size: 26px; line-height: 32px; }
  .closing__text { margin-top: 0; }
}
@media (max-width: 767px) {
  .process__head, .programs__head { gap: 16px; }
  .results__grid { gap: 24px; }
  .stat { padding: 0 0 0 16px; gap: 12px; }
  .stat__text { font-size: 12px; line-height: 16px; }
  .footer__brand { gap: 32px; }
}
@media (max-width: 479px) {
  .hero__buttons { flex-direction: column; align-items: stretch; }
  .hero__buttons .btn { justify-content: center; }
}

/* Stories fall back to a stacked list until the pinned scroll is running (no script, failed GSAP load, reduced motion) */
.stories:not(.hps-on) .hps-track { height: auto; }
.stories:not(.hps-on) .hps-stage { height: auto; overflow: visible; padding-bottom: 96px; }
.stories:not(.hps-on) .hps-rail { flex-direction: column; gap: 64px; padding-inline: var(--pad); }
.stories:not(.hps-on) .hps-panel { flex-basis: auto; height: auto; }
.stories:not(.hps-on) .hps-media--portrait { height: 64vh; }
.stories:not(.hps-on) .hps-index, .stories:not(.hps-on) .hps-bar { display: none; }

/* Long enough that a single fling stays inside the pinned run and stops on the next story */
.stories.hps-on .hps-track { height: 600vh; }

@media (max-width: 767px) {
}

/* ---------- Results disclaimer ---------- */
.results__foot { display: flex; flex-direction: column; gap: 32px; }
.results__note { padding-top: 16px; border-top: 1px solid var(--cream-16); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; color: var(--cream-48); }
@media (max-width: 767px) { .results__foot { gap: 24px; } .results__note { font-size: 10px; line-height: 15px; } }


/* Stories: clip, so a focused control never scrolls the stage sideways (QA 11 Nov) */
.hps-stage { overflow: hidden; overflow: clip; }

/* ---------- Round three ticks, 11 Nov ---------- */
/* iPad landscape: the closing photo stays inside its card; the nav button uses its short label below 1100px */
.closing__media { align-self: start; width: 100%; }
@media (max-width: 1099px) { .btn-nav .long { display: none; } .btn-nav .short { display: inline; } }
/* Logo strip: one even gap between every logo */
.logos__track img { margin-right: 22px; }
@media (max-width: 767px) { .logos__track img { margin-right: 16px; } }
/* Programs cards rise one after another, like the other grids */
.programs__grid .plan:nth-child(2) { transition-delay: 100ms; }
.programs__grid .plan:nth-child(3) { transition-delay: 200ms; }
/* 404 (halden-miller-utility-1): label pill, large heading, button with arrow */
.error__title { font-size: 46px; line-height: 58px; letter-spacing: 0.06em; }
@media (max-width: 767px) { .error__title { font-size: 30px; line-height: 40px; } }

/* ---------- Booking pop-up: one question at a time (halden-miller-contact-5 form card; flow from Samoya's quiz booking widget) ---------- */
html.book-open { overflow: hidden; }
.book { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.book__backdrop { position: absolute; inset: 0; background: rgba(22, 30, 42, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.book__panel { position: relative; width: min(560px, 100%); max-height: calc(100svh - 48px); overflow: auto; padding: 32px; border-radius: 12px; background: var(--dark-card); color: var(--cream); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--cream-08); }
.book__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.book__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 2px; border: 1px solid var(--cream-16); background: transparent; color: var(--cream); cursor: pointer; transition: background-color .3s, color .3s; }
.book__close:hover, .book__close:focus-visible { background: var(--cream); color: var(--dark); }
.book__close svg { width: 14px; height: 14px; }
.book__bar { height: 2px; background: var(--cream-16); margin-bottom: 32px; }
.book__bar i { display: block; height: 100%; width: 20%; background: var(--gold); transition: width .4s ease; }
.book__q { display: block; margin-bottom: 24px; font-family: var(--display); font-weight: 300; font-size: 26px; line-height: 34px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream); }
.book__options { display: flex; flex-direction: column; gap: 8px; }
.book__opt { text-align: left; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--cream-08); background: rgba(248, 245, 238, 0.06); color: var(--cream); font: 500 16px/24px var(--sans); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.book__opt:hover, .book__opt:focus-visible { border-color: var(--gold); outline: none; }
.book__opt[aria-checked="true"] { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.book__label { display: block; margin: 16px 0 8px; font-size: 11px; line-height: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-64); }
.book__q + .book__label { margin-top: 0; }
.book__input { width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--cream-08); background: rgba(248, 245, 238, 0.08); color: var(--cream); font: 16px/24px var(--sans); }
.book__input::placeholder { color: var(--cream-48); }
.book__input:focus { outline: none; border-color: var(--gold); }
.book__text { margin: -8px 0 24px; color: var(--cream-88); }
.book__error { min-height: 20px; margin-top: 12px; font-size: 13px; line-height: 20px; color: #f2c2b3; }
.book__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.book__back { padding: 8px 0; background: none; border: 0; color: var(--cream-64); font: 500 12px/16px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.book__back:hover, .book__back:focus-visible { color: var(--cream); }
@media (max-width: 767px) {
  .book { padding: 12px; align-items: flex-end; }
  .book__panel { padding: 24px; max-height: calc(100svh - 24px); }
  .book__q { font-size: 21px; line-height: 29px; }
}

/* 992 to 1199px (iPad landscape): the closing card keeps its heading to three or four balanced lines */
@media (min-width: 992px) and (max-width: 1199px) { .closing__card { gap: 48px; } .closing__left .h-display { font-size: 28px; line-height: 38px; } }

/* ---------- Round four, 11 Nov (Greg: "a ton of white or blank space... that picture next to it feels a little too big. Same with the other picture") ----------
   The who-we-are words sit beside the middle of the photo again, as in round two; both photos are smaller and keep their own shape. */
@media (min-width: 992px) {
  .who__grid { grid-template-columns: minmax(0, 480px) minmax(0, 560px); column-gap: 132px; align-items: center; justify-content: center; }
  .process__grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: 132px; }
}