/* ============================================================
   BEAUTIFUL PIVOT — styles.css
   Luxury editorial landing page. Dark, warm, cinematic.
   Mobile-first. Pure CSS animation + grain.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --bg-deepest: #07090F;   /* hero — deepest shade */
  --bg-navy:    #0A0E1A;   /* base background */
  --bg-raise:   #0D1220;   /* slightly raised section shade */
  --bg-raise-2: #10162A;   /* deepest atmospheric lift */

  --ivory:  #F5F0E8;       /* primary text */
  --gold:   #C9A96E;       /* accent */
  --gold-soft: rgba(201, 169, 110, 0.85);
  --gray:   #8A8578;       /* secondary text / metadata */

  --serif-display: "Playfair Display", Georgia, serif;
  --serif-soft:    "Cormorant Garamond", Georgia, serif;
  --sans:          "Inter", system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --max-text: 860px;
}

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

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

body {
  margin: 0;
  background-color: var(--bg-navy);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ============================================================
   FILM GRAIN OVERLAY
   Very faint repeating noise (base64 SVG). Fixed, non-interactive.
   A slow drift keyframe gives a subtle "living" texture.
   ============================================================ */
.grain {
  position: fixed;
  inset: -150%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44IiBudW1PY3RhdmVzPSI0IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbHRlcj0idXJsKCNuKSIvPjwvc3ZnPg==");
  background-repeat: repeat;
  animation: grainDrift 8s steps(6) infinite;
}

@keyframes grainDrift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -4%); }
  60%  { transform: translate(-3%, -2%); }
  80%  { transform: translate(2%, 4%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   SHARED SECTION SCAFFOLD
   Each section is its own full-height "moment".
   ============================================================ */
.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 1.5rem;
  position: relative;
}

.section__inner {
  width: 100%;
  max-width: var(--max-text);
  margin: 0 auto;
  text-align: center;
}

/* Atmospheric depth: gentle gradient shifts between sections */
.philosophy { background: linear-gradient(180deg, var(--bg-deepest) 0%, var(--bg-navy) 100%); }
.about      { background: linear-gradient(180deg, var(--bg-navy) 0%, var(--bg-raise) 100%); }
.resolution { background: linear-gradient(180deg, var(--bg-raise) 0%, var(--bg-raise-2) 100%); }
.watch      { background: linear-gradient(180deg, var(--bg-raise-2) 0%, var(--bg-navy) 100%); }

/* Small uppercase metadata label */
.label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 2.5rem;
}

.accent { color: var(--gold); }

/* ============================================================
   SCROLL-REVEAL
   Content is visible by default (graceful fallback). GSAP sets the
   hidden start state at runtime via .from(), so nothing is ever
   stuck invisible if the motion libraries fail to load.
   ============================================================ */

/* Per-word mask used by GSAP text reveals (hero + philosophy).
   overflow hides the word until it rises; padding/margin trick
   gives descenders (y, g, p) room so they're not clipped. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}
.word__i {
  display: inline-block;
  will-change: transform;
}

/* Custom cursor — glowing low-poly arrow graphic (JS, fine pointers) */
.cursor-graphic {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  width: 64px;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(64, 224, 208, 0.35));
  will-change: transform;
  transition: opacity 0.2s var(--ease-out);
}

/* Constellation star-trail canvas (created by JS, sits below the cursor) */
.cursor-trail {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}

/* ---- Background-sound toggle (fixed, bottom-right) ---- */
.sound-toggle {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 9997;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: transparent;
  border: none;
  padding: 0.6rem;
  cursor: pointer;
  color: var(--gray);
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: color 0.4s var(--ease-out);
}
.sound-toggle:hover,
.sound-toggle.is-playing {
  color: var(--gold);
}
.sound-toggle__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}
.sound-toggle__bars span {
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 1px;
}
/* Equalizer animation only while playing */
.sound-toggle.is-playing .sound-toggle__bars span {
  animation: eq 0.9s ease-in-out infinite;
}
.sound-toggle.is-playing .sound-toggle__bars span:nth-child(1) { animation-delay: 0s; }
.sound-toggle.is-playing .sound-toggle__bars span:nth-child(2) { animation-delay: 0.2s; }
.sound-toggle.is-playing .sound-toggle__bars span:nth-child(3) { animation-delay: 0.4s; }
.sound-toggle.is-playing .sound-toggle__bars span:nth-child(4) { animation-delay: 0.15s; }
@keyframes eq {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

/* Lenis smooth-scroll requirements */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem;
  background:
    radial-gradient(120% 90% at 50% 30%, #0B0F1C 0%, var(--bg-deepest) 70%);
  text-align: center;
}

.hero__inner {
  max-width: 1100px;
}

.hero__title {
  font-family: var(--serif-display);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin: 0;
  font-size: clamp(3.2rem, 13vw, 11rem);
}
.hero__title-line {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1.5s var(--ease-out) forwards;
}
.hero__title-line:nth-child(1) { animation-delay: 0.25s; }
.hero__title-line:nth-child(2) { animation-delay: 0.45s; }

.hero__tagline {
  font-family: var(--sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.55em;
  font-size: clamp(0.8rem, 1.8vw, 1.05rem);
  color: var(--gray);
  margin: 2.6rem 0 0;
  padding-left: 0.55em; /* optical centering for letter-spacing */
  opacity: 0;
  animation: fadeUp 1.4s var(--ease-out) 0.95s forwards;
}

/* Gold divider rule that draws itself outward from center */
.hero__rule {
  display: block;
  width: 0;
  height: 1px;
  margin: 2.8rem auto 0;
  background: var(--gold);
  animation: drawLine 1.2s var(--ease-out) 1.5s forwards;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drawLine {
  to { width: 60px; }
}

/* When GSAP takes over, neutralize the CSS keyframe fallback so the
   two don't fight. GSAP then drives the masked-word + rule reveal. */
html.gsap-ready .hero__title-line {
  opacity: 1;
  transform: none;
  animation: none;
}
html.gsap-ready .hero__tagline {
  animation: none;
}
html.gsap-ready .hero__rule {
  animation: none;
  width: 60px;
  transform-origin: center;
}

/* ============================================================
   SECTION 2 — PHILOSOPHY
   ============================================================ */
.philosophy__statement {
  font-family: var(--serif-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}
.philosophy__line {
  display: block;
  /* low min so the longer (nowrap) line scales down to fit small phones */
  font-size: clamp(1.45rem, 6vw, 4.4rem);
}
.philosophy__line--emphasis {
  /* matches "You're not broken." exactly — same weight, upright, same size.
     Only difference: forced to a single line. */
  font-style: normal;
  white-space: nowrap;
  margin-top: 0.1em;
}
.philosophy__support {
  max-width: 620px;
  margin: 3.5rem auto 0;
  color: var(--gray);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.8;
}

/* Scroll word-fill on the statement (Ironhill character reveal):
   each word is a dim base copy with an exact filled copy stacked
   on top; GSAP fades the filled copies in word by word, scrubbed. */
.fillword {
  position: relative;
  display: inline-block;
}
.fillword__base {
  color: rgba(245, 240, 232, 0.16);
}
.fillword__fill {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/* ============================================================
   SECTION 3 — ABOUT
   ============================================================ */
.about__text {
  font-family: var(--serif-soft);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  line-height: 1.65;
  color: var(--ivory);
  max-width: 760px;
  margin: 0 auto;
}
.about__text p { margin: 0 0 1.5rem; }
.about__text p:last-child { margin-bottom: 0; }

/* Founder layout — stacked on mobile (header → portrait → text) */
.about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.about__header { order: 1; width: 100%; }
.about__portrait { order: 2; width: min(360px, 82vw); aspect-ratio: 4 / 5; }
.about__text { order: 3; }

/* "I'm Jason." lead — matches body text size, now the first body line */
.about__lead {
  font-family: var(--serif-soft);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  line-height: 1.65;
  color: var(--ivory);
  margin: 0 0 1.5rem;
}

/* Desktop — CSS grid so the photo top aligns with the FIRST BODY line
   ("For over a decade…"), with the header sitting above the text column.
     row 1:  [ empty ]   [ THE FOUNDER / I'm Jason ]
     row 2:  [ PHOTO  ]  [ For over a decade…       ] */
@media (min-width: 860px) {
  .about__inner {
    display: grid;
    grid-template-columns: clamp(240px, 30vw, 380px) 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    row-gap: 1.5rem;
    align-items: start;
    max-width: 1040px;
    text-align: left;
  }
  .about__header {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  /* Higher specificity (.about__inner …) so this wins over the base
     .about__portrait width rule that appears later in the file. */
  .about__inner .about__portrait {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch; /* match the full height of the body text column */
    width: 100%; /* fill the grid column — never overflow into the text */
    aspect-ratio: auto; /* height comes from the text, not a fixed ratio */
  }
  .about__text {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    max-width: none;
    margin: 0;
  }
  .about__header .label { margin: 0; }
}

/* Founder portrait — editorial frame, navy→gold duotone.
   Size is driven by the layout rules above. The image is absolutely
   placed so the figure's height follows its grid track (the text
   height) instead of the image's own aspect ratio. */
.about__portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 2px; /* clean rectangle */
  border: 1px solid rgba(201, 169, 110, 0.3);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.about__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 22%; /* identical crop so the layers align exactly */
}
/* base scene → duotone is baked into the PNG (no live filter needed) */
/* cutout of Jason → true color on top, slight pop */
.about__portrait-pop {
  filter: saturate(1.06) contrast(1.02);
}
/* Soft vignette to sink the background and draw focus inward */
.about__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 35%,
    transparent 45%,
    rgba(7, 9, 15, 0.55) 100%
  );
}

/* Founder pin fits the phone fold — compact the stacked block so the
   whole .about__inner stays under ~812px while pinned (start:"top top",
   no upward translate). Trims portrait + gaps + paragraph rhythm so the
   last two paragraphs no longer reveal below the fold on mobile. */
@media (max-width: 700px) {
  .about__inner { gap: 1.15rem; }
  .about__portrait { width: min(216px, 58vw); }
  .about__text,
  .about__lead { font-size: 1.1rem; line-height: 1.48; }
  .about__text p,
  .about__lead { margin: 0 0 0.8rem; }
}

/* ============================================================
   SECTION 4 — RESOLUTION TEST
   ============================================================ */
.resolution__title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.15;
  margin: 0 0 2rem;
}
.resolution__body {
  max-width: 600px;
  margin: 0 auto 3.5rem;
  color: var(--gray);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.85;
}

/* Outlined gold button — fills on hover */
.btn-outline {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 1.15em 2.8em;
  border-radius: 1px;
  transition: background-color 0.55s var(--ease-out),
              color 0.55s var(--ease-out),
              letter-spacing 0.55s var(--ease-out);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--gold);
  color: var(--bg-navy);
  letter-spacing: 0.32em;
  outline: none;
}

/* Pulsating gold glow for the live "Take the Test" CTA (gentle heartbeat). */
.btn-glow {
  animation: ctaPulse 2.2s ease-in-out infinite;
  will-change: box-shadow, transform;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 10px 1px rgba(201, 169, 110, 0.30); transform: scale(1); }
  50%      { box-shadow: 0 0 30px 8px rgba(201, 169, 110, 0.60); transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow { animation: none; box-shadow: 0 0 18px 3px rgba(201, 169, 110, 0.40); }
}

/* Coming-soon state — muted, non-interactive, no hover fill */
.btn-outline--soon {
  color: var(--gray);
  border-color: rgba(138, 133, 120, 0.5);
  cursor: default;
}
.btn-outline--soon:hover,
.btn-outline--soon:focus-visible {
  background-color: transparent;
  color: var(--gray);
  letter-spacing: 0.28em;
}

/* Coming-soon line above the notify form */
.resolution__note {
  margin: 0 0 1.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
}

/* ---- Notify-me email capture form ---- */
.notify-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
  max-width: 520px;
  margin: 0 auto;
}
.notify-form__input {
  flex: 1 1 260px;
  min-width: 0;
  background: transparent;
  border: 1px solid rgba(138, 133, 120, 0.5);
  border-radius: 1px;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 1.05em 1.3em;
  transition: border-color 0.4s var(--ease-out);
}
.notify-form__input::placeholder { color: var(--gray); }
.notify-form__input:focus {
  outline: none;
  border-color: var(--gold);
}
.notify-form__btn {
  flex: 0 0 auto;
  cursor: pointer;
  background: transparent;
}

/* Status message under the form (success / error) */
.notify-form__msg {
  min-height: 1.2em;
  margin: 1.4rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.notify-form__msg.is-shown { opacity: 1; }
.notify-form__msg.is-error { color: #C97E6E; }

/* Visually-hidden label (accessible, off-screen) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   SECTION 5 — WATCH
   ============================================================ */
.watch__frame {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(201, 169, 110, 0.22);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  background: #000;
  overflow: hidden;
}
.watch__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.watch__link {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ivory);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  transition: color 0.4s var(--ease-out);
}
.watch__link:hover { color: var(--gold); }
.watch__arrow {
  color: var(--gold);
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.watch__link:hover .watch__arrow { transform: translateX(6px); }

/* ============================================================
   SECTION 6 — FOOTER
   ============================================================ */
.footer {
  background: var(--bg-deepest);
  padding: 7rem 1.5rem;
  text-align: center;
}
.footer__inner {
  max-width: 600px;
  margin: 0 auto;
}
.footer__rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 3rem;
}
.footer__brand {
  font-family: var(--serif-soft);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 1.05rem;
  color: var(--ivory);
  margin: 0 0 1.6rem;
  padding-left: 0.4em;
}
.footer__contact,
.footer__social {
  margin: 0.6rem 0;
  font-size: 0.92rem;
  color: var(--gray);
}
.footer__contact a,
.footer__social a {
  color: var(--ivory);
  text-decoration: none;
  transition: color 0.4s var(--ease-out);
}
.footer__contact a:hover,
.footer__social a:hover { color: var(--gold); }
.footer__copy {
  margin: 2.5rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gray);
}

/* ============================================================
   RESPONSIVE — tablet & up
   ============================================================ */
@media (min-width: 768px) {
  .section { padding: 9rem 2rem; }
}

/* ============================================================
   WAYPOINTS MENU — fixed toggle + fullscreen shortcut overlay
   ============================================================ */
.wp-toggle {
  position: fixed;
  top: 48px; /* ironhill.au: nav { right: 48px; top: 48px } */
  right: 48px;
  z-index: 920;
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(245, 240, 232, 0.6);
  border-radius: 10px;
  background: rgba(7, 9, 15, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.wp-toggle:hover {
  background: rgba(7, 9, 15, 0.62);
  border-color: rgba(245, 240, 232, 0.9);
}
@media (max-width: 700px) {
  .wp-toggle {
    top: 1.1rem;
    right: 1.1rem;
  }
}
.wp-toggle__bar {
  width: 16px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transition: transform 0.35s ease;
}
.wp-toggle.is-open .wp-toggle__bar:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.wp-toggle.is-open .wp-toggle__bar:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.wp-overlay {
  position: fixed;
  inset: 0;
  z-index: 910;
  display: grid;
  place-items: center;
  background: rgba(7, 9, 15, 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.wp-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.wp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.wp-link {
  display: inline-block;
  padding: 0.32em 0;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  color: var(--ivory);
  text-decoration: none;
}
.wp-name {
  transition: color 0.3s ease;
}
.wp-link:hover .wp-name,
.wp-link:focus-visible .wp-name {
  color: var(--gold);
}

/* ============================================================
   ACCESSIBILITY — honor reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__title-line,
  .hero__tagline { opacity: 1; transform: none; }
  .hero__rule { width: 60px; }
  .grain { animation: none; }
}

/* ============================================================
   SIX PIXELS → HIGH DEFINITION — inline animation section
   Scoped under .bp-* so it can't collide with the rest of the site.
   ============================================================ */
.pixels-section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* chains the page's gradient spine: top = hero dissolve end (navy),
     bottom = philosophy's top (deepest) — same family as sections 3/4 */
  background: linear-gradient(180deg, var(--bg-navy) 0%, var(--bg-deepest) 100%);
}
.bp-field {
  position: relative;
  width: min(92vw, 980px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 0.5em 1.1em;
  text-align: center;
  transform: translateY(5vh);
}
.bp-word {
  display: inline-block;
  transform-origin: center;
  white-space: nowrap;
  will-change: transform, opacity, filter;
  line-height: 1.1;
  opacity: 0;
}
.bp-word.bp-blunt {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1rem, 2.5vw, 1.55rem);
  color: var(--gray);
}
.bp-word.bp-child {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  font-size: clamp(0.95rem, 2.1vw, 1.35rem);
  color: var(--gold);
  animation: bpGoldPulse 1s ease-in-out infinite; /* ~60 bpm glow */
}
@keyframes bpGoldPulse {
  0%, 100% { text-shadow: 0 0 5px rgba(201, 169, 110, 0.25); }
  50%      { text-shadow: 0 0 13px rgba(201, 169, 110, 0.72), 0 0 5px rgba(201, 169, 110, 0.5); }
}
/* during measurement, force natural flow */
.bp-field.bp-measuring .bp-word {
  position: static !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.bp-closing {
  position: absolute;
  left: 0; right: 0;
  top: 9%;
  margin: 0 auto;
  max-width: min(90vw, 720px);
  padding: 0 1.5rem;
  text-align: center;
  font-family: var(--serif-display);   /* Playfair — matches the site headings */
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1.3;
  color: var(--ivory);
  opacity: 0;
}
.bp-closing .bp-dim { color: var(--gray); opacity: 0.42; }   /* "six pixels" — like the primaries */
.bp-closing .bp-g { color: var(--gold); animation: bpGoldPulse 1s ease-in-out infinite; } /* "high definition" */
/* expedition HUD counter — echoes the hero's coordinate readout;
   counts words as the field fractures (opacity driven by pixels.js) */
.bp-hud {
  position: absolute;
  left: max(4vw, 1.5rem);
  bottom: 6%;
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--gold-soft);
  opacity: 0;
}
.bp-wordmark {
  position: absolute;
  left: 0; right: 0;
  bottom: 7%;
  text-align: center;
  font-family: var(--serif-soft);      /* Cormorant — Quiet-Luxury wordmark */
  text-transform: uppercase;
  font-size: clamp(0.82rem, 2.2vw, 1.05rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--gold);
  opacity: 0;
}
.bp-hint {
  position: absolute;
  left: 50%; bottom: 2.5%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.4);
  opacity: 0;
  transition: opacity 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .bp-word.bp-child, .bp-closing .bp-g { animation: none; }
}