/* Confidante · Investment & Real Estate (investments.html), pillar 2: Global Investments, then Confidante Living
   (#real-estate, .re-*) and the Confidante Approved Collection™ (#approved-collection, .ac-*). Revamped 2026-10-14 on the
   homepage precedent (docs/REVAMP-PLAN.md §2, §3, §5): a C1 hero (full-bleed still, words bottom-left on the veil, no scroll
   parallax), a chapter strip, white and crest-navy sections with clean edges, a scroll film for Global capital (css/scroll-film.css), a navy
   chapter band for Confidante Living, the homepage rail for Find your place, a framed teaser for the Approved Collection.
   Every selector starts with .page-investments, tokens only, sharp corners. The shared inits run the shared components
   (initPageHero pauses the hero's drift off screen; initBgZoom, initRail, initProcess, initMapBand, the quiet reveals); the
   page script (js/pages/investments.js) only draws the investment platform's two circles.
   Scrubbed components (two): the Global capital film (in place of the zoom, Josh 2026-10-15) and the buyer journey.
   Reduced-motion paths at the end. */

/* ───────────── hero · the family's .vhero block (REVAMP-PLAN §2, canonical, page-scoped), then treatment C1 ───────────── */
.page-investments .vhero { position: relative; isolation: isolate; overflow: clip; background-color: var(--deep); color: var(--text-1); }
.page-investments .vhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: var(--deep); }
.page-investments .vhero__img, .page-investments .vhero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 767px) { .page-investments .vhero__img, .page-investments .vhero__film { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.page-investments .vhero__film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.page-investments .vhero__film.is-playing { opacity: 1; }
/* a band under the clear bar and a deep foot under the words; the bottom edge stays clean */
.page-investments .vhero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--veil) / 0.55), rgb(var(--veil) / 0) 24%),
              linear-gradient(to top, rgb(var(--veil) / 0.9), rgb(var(--veil) / 0.55) 34%, rgb(var(--veil) / 0) 64%); }
.page-investments .vhero__inner { display: grid; align-content: end; gap: var(--space-head); min-height: max(38rem, 100svh);
  padding: calc(var(--nav-h) + 4rem) var(--edge) clamp(3rem, 2rem + 4vw, 6rem); }
.page-investments .vhero__head, .page-investments .vhero__aside { display: grid; gap: var(--space-head); justify-items: start; align-content: end; }
.page-investments .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-investments .vhero__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
.page-investments .vhero__title { max-width: 18ch; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-investments .vhero__title { font-weight: 400; } }
.page-investments .vhero__lede { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-investments .vhero__action { justify-self: start; margin-top: calc(var(--space-action) - var(--space-head)); }
@media (min-width: 992px) {
  .page-investments .vhero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .page-investments .vhero__head { grid-column: 1 / span 7; }
  .page-investments .vhero__aside { grid-column: 9 / -1; }
}
/* the arrival */
.page-investments .vhero__img { animation: vhero-settle 2600ms var(--ease-out) both; }
.page-investments .vhero__crest, .page-investments .vhero__label, .page-investments .vhero__title, .page-investments .vhero__lede, .page-investments .vhero__action { animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-investments .vhero__crest { animation-delay: 60ms; } .page-investments .vhero__label { animation-delay: 160ms; } .page-investments .vhero__title { animation-delay: 280ms; }
.page-investments .vhero__lede { animation-delay: 460ms; } .page-investments .vhero__action { animation-delay: 600ms; }
@keyframes vhero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes vhero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* C1 here (REVAMP-PLAN §5: no scroll parallax): after the settle the picture drifts very slowly, as the old page hero did,
   paused while the hero is off screen (initPageHero toggles is-off on [data-page-hero]). The houses sit left of centre,
   so tall and narrow screens keep them; the sky behind the bar is bright, so its band is deeper than 0.55 (0.7 measured
   4.48:1 on the bar's Investor access at 1024) */
.page-investments .vhero { --focus: 34% 50%; }
.page-investments .vhero__img { animation: vhero-settle 2600ms var(--ease-out) both, vhero-drift 28s var(--ease-in-out) 2600ms infinite alternate; }
.page-investments .vhero.is-off .vhero__img { animation-play-state: paused; }
@keyframes vhero-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
.page-investments .vhero__veil { background:
  linear-gradient(to bottom, rgb(var(--veil) / 0.8), rgb(var(--veil) / 0) 26%),
  linear-gradient(to top, rgb(var(--veil) / 0.9), rgb(var(--veil) / 0.6) 36%, rgb(var(--veil) / 0) 66%); }
/* phones and tablets stack the words, so the deep foot reaches higher */
@media (max-width: 991px) {
  .page-investments .vhero__veil { background:
    linear-gradient(to bottom, rgb(var(--veil) / 0.8), rgb(var(--veil) / 0) 22%),
    linear-gradient(to top, rgb(var(--veil) / 0.92), rgb(var(--veil) / 0.72) 42%, rgb(var(--veil) / 0) 78%); }
}

/* ───────────── the navy rhythm (REVAMP-PLAN §3.2, until the shared rule exists): a navy section and the white one after it
   take the same generous air; two white sections in a row still share one gap ───────────── */
.page-investments { --navy-pad: clamp(5rem, 3rem + 6vw, 9rem); }
.page-investments .section[data-tone="dark"] { padding-block: var(--navy-pad); }
.page-investments :where(.section[data-tone="dark"]) + .section { padding-top: var(--navy-pad); }
/* a crest rule between two white sections: the same air above and below it (the homepage's about rule) */
.page-investments .sep { background-color: var(--page); }
.page-investments .section:has(+ .sep) { padding-bottom: var(--space-open); }
.page-investments .sep + .section { padding-top: var(--space-open); }

/* ───────────── chapter strip (REVAMP-PLAN §3.6): the pillar's companies as anchors in tracked capitals, then the crest rule ───────────── */
.page-investments .chapters { padding-block: clamp(2.25rem, 1.75rem + 1.6vw, 3.5rem) var(--space-open); background-color: var(--page); }
.page-investments .chapters__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem clamp(1.5rem, 1rem + 2.4vw, 3.5rem); }
.page-investments .chapters__rule { margin-top: clamp(1.75rem, 1.25rem + 1.4vw, 2.75rem); }
@media (max-width: 639px) { .page-investments .chapters__list { flex-direction: column; align-items: center; } }

/* ───────────── chapter band (REVAMP-PLAN §3.5, the same rules on the four pillar pages) ───────────── */
.page-investments .chapter__inner { display: grid; justify-items: center; gap: var(--space-head); text-align: center; }
.page-investments .chapter__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
.page-investments .chapter__title { max-width: 20ch; font-family: var(--font-display); font-size: var(--fs-display); font-weight: 300; line-height: 1.06; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-investments .chapter__title { font-weight: 400; } }
.page-investments .chapter__text { max-width: 52ch; color: var(--text-2); }
.page-investments .chapter__text p + p { margin-top: 1rem; }
/* Confidante Living: the CONFIDANTE LIVING lockup (this page only, COMPONENTS.md) above the division's name */
.page-investments .re-brand { --re-logo-w: clamp(11rem, 8.6rem + 6vw, 16rem); display: grid; justify-items: center; gap: 1.25rem; }
.page-investments .re-brand__logo { width: var(--re-logo-w); max-width: 100%; height: calc(var(--re-logo-w) * 414 / 1434); color: var(--text-1); }
.page-investments .re-brand__division { color: var(--text-2); }
.page-investments .re-company .chapter__title { margin-top: calc(var(--space-action) - var(--space-head)); }

/* ───────────── investment platform (on navy): two circles (Josh, 2026-10-15). The stage is a square ring; the svg draws both
   circles, the spokes and the ten points in a 100-unit viewBox (js/pages/investments.js keeps the hairlines at 1px). Each
   name sits outside the ring at its point: the list is a square laid over the stage, each item at the angle its index gives
   (36 degrees apart from the top), and each name is anchored by the corner or edge that faces the ring, so no name crosses
   the ring or its neighbour. Below 768px the names leave the ring for a two-column list under it ───────────── */
.page-investments .inv-platform .section-head { margin-bottom: var(--space-head); }
.page-investments .inv-orbit { --ring: 32rem; --gap: 18px; --label-w: 16rem; display: grid; justify-items: center; align-items: center; margin: 0; padding-block: 4rem; }
.page-investments .inv-orbit__stage { position: relative; grid-area: 1 / 1; width: var(--ring); aspect-ratio: 1; }
.page-investments .inv-orbit__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.page-investments .inv-orbit__ring { fill: none; stroke: var(--accent-line); stroke-width: var(--sw, 0.2); }
.page-investments .inv-orbit__spoke { fill: none; stroke: var(--line-2); stroke-width: var(--sw, 0.2); }
.page-investments .inv-orbit__dot { fill: var(--accent); }
.page-investments .inv-orbit__centre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.75rem; padding: 12%; text-align: center; }
.page-investments .inv-orbit__crest { width: 1.75rem; height: calc(1.75rem * 1210 / 1092); color: var(--gold); }
.page-investments .inv-orbit__label { max-width: 10ch; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.25; color: var(--text-1); text-wrap: balance; }
.page-investments .inv-orbit__list { position: relative; grid-area: 1 / 1; width: var(--ring); aspect-ratio: 1; }
.page-investments .inv-orbit__item { --a: calc(var(--k, 0) * 36deg - 90deg); position: absolute; left: calc(50% + cos(var(--a)) * (50% + var(--gap))); top: calc(50% + sin(var(--a)) * (50% + var(--gap))); width: 0; height: 0; }
.page-investments .inv-orbit__name { position: absolute; left: 0; top: 0; width: max-content; max-width: var(--label-w); font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-1); text-wrap: balance; transform: translate(var(--tx, 0), var(--ty, 0)); }
.page-investments .inv-orbit__item[data-side="t"] .inv-orbit__name { --tx: -50%; --ty: -100%; text-align: center; }
.page-investments .inv-orbit__item[data-side="b"] .inv-orbit__name { --tx: -50%; text-align: center; }
.page-investments .inv-orbit__item[data-side="r"] .inv-orbit__name { --ty: -50%; }
.page-investments .inv-orbit__item[data-side="l"] .inv-orbit__name { --tx: -100%; --ty: -50%; text-align: right; }
.page-investments .inv-orbit__item[data-side="tr"] .inv-orbit__name { --ty: -100%; }
.page-investments .inv-orbit__item[data-side="br"] .inv-orbit__name { text-align: left; }
.page-investments .inv-orbit__item[data-side="bl"] .inv-orbit__name { --tx: -100%; text-align: right; }
.page-investments .inv-orbit__item[data-side="tl"] .inv-orbit__name { --tx: -100%; --ty: -100%; text-align: right; }
@media (max-width: 1199px) {
  .page-investments .inv-orbit { --ring: 28rem; --label-w: 12rem; }
}
@media (max-width: 991px) {
  .page-investments .inv-orbit { --ring: 21rem; --gap: 14px; --label-w: 10rem; padding-block: 3.5rem; }
  .page-investments .inv-orbit__crest { width: 1.375rem; height: calc(1.375rem * 1210 / 1092); }
  .page-investments .inv-orbit__centre { gap: 0.5rem; }
  .page-investments .inv-orbit__label { font-size: 1.0625rem; }
}
/* phones: the ring with its points and the platform's name, then the ten names as two columns of hairline rows (the five
   partners, then the five sectors), each with the gold point */
@media (max-width: 767px) {
  .page-investments .inv-platform .section-head { margin-bottom: var(--space-open); }
  .page-investments .inv-orbit { --ring: min(19rem, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-block: 0; }
  .page-investments .inv-orbit__stage { grid-area: auto; grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--space-open); }
  .page-investments .inv-orbit__crest { width: 1.25rem; height: calc(1.25rem * 1210 / 1092); }
  .page-investments .inv-orbit__label { font-size: 1rem; }
  .page-investments .inv-orbit__list { grid-area: auto; grid-row: 2; width: 100%; aspect-ratio: auto; border-bottom: 1px solid var(--line); }
  .page-investments .inv-orbit__list--partners { grid-column: 1; }
  .page-investments .inv-orbit__list--sectors { grid-column: 2; }
  .page-investments .inv-orbit__item { position: relative; left: auto; top: auto; display: flex; align-items: flex-start; gap: 10px; width: auto; height: auto; min-height: 44px; padding: 0.7rem 0; border-top: 1px solid var(--line); }
  .page-investments .inv-orbit__item::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: calc(0.7em - 3px); border-radius: 50%; background-color: var(--accent); }
  .page-investments .inv-orbit__item[data-side] .inv-orbit__name { position: static; width: auto; max-width: none; font-size: var(--fs-small); font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left; transform: none; }
}

/* ───────────── investment approach: the six principles as type, a size up, with air in each cell (the quiet pause) ───────────── */
.page-investments .inv-approach .index__item { padding: clamp(1.5rem, 1.1rem + 1vw, 2.25rem) 0 clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.page-investments .inv-approach .index__title { font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
@media (min-width: 992px) { .page-investments .inv-approach .index__title { font-weight: 300; } }

/* ───────────── people: one consistent format (p39); the "Read bio" actions share one line; the legal name follows close ───────────── */
.page-investments .inv-people { padding-bottom: var(--space-open); }
.page-investments .inv-people .people__grid { max-width: 64rem; margin-inline: auto; }
.page-investments .inv-people .people__grid > li { display: flex; }
.page-investments .inv-people .person__role { margin-bottom: 0.6rem; text-wrap: balance; }
.page-investments .inv-people .person__more { margin-top: auto; }
@media (max-width: 767px) {
  .page-investments .inv-people .people__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--col-gap) / 2); }
}
/* legal representation: one firm is published, so one centred cell; delete when the held firm is released (p42) */
.page-investments .inv-legal { padding-top: var(--space-open); }
.page-investments .inv-legal .names__list { max-width: 36rem; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }

/* ───────────── professional advisory network (on navy), a split with a photograph on one half (Josh, 2026-10-15). From 992px
   the photograph fills the left half, full bleed to the screen's edge and the section's full height (the section's padding
   moves onto the words); the words take the right half on the page's frame, the six disciplines as hairline rows with a
   small gold index and the name in Zodiak. Below 992px the photograph comes first at 4:3, edge to edge ───────────── */
.page-investments .section.inv-advisory { padding-block: 0; }
.page-investments .inv-advisory__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--card); }
.page-investments .inv-advisory__media picture, .page-investments .inv-advisory__img { display: block; width: 100%; height: 100%; }
.page-investments .inv-advisory__img { object-fit: cover; object-position: 46% 50%; }
.page-investments .inv-advisory__body { padding: var(--space-open) var(--edge) var(--navy-pad); }
.page-investments .inv-advisory__head { margin-bottom: var(--space-action); }
.page-investments .inv-advisory__list { counter-reset: inv-adv; border-bottom: 1px solid var(--line); }
.page-investments .inv-advisory__item { counter-increment: inv-adv; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; padding: 1.05rem 0 1.15rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; color: var(--text-1); }
.page-investments .inv-advisory__item::before { content: counter(inv-adv, decimal-leading-zero); font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--accent); }
/* tablets: the six rows in two columns of three, so the list stays as wide as the words above it */
@media (min-width: 640px) and (max-width: 991px) {
  .page-investments .inv-advisory__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: calc(var(--col-gap) * 2); }
}
@media (min-width: 992px) {
  .page-investments .inv-advisory__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .page-investments .inv-advisory__media { aspect-ratio: auto; min-height: 100%; }
  .page-investments .inv-advisory__media picture { position: absolute; inset: 0; }
  .page-investments .inv-advisory__body { align-self: center; padding: var(--navy-pad) max(var(--margin), (100vw - var(--frame)) / 2) var(--navy-pad) clamp(3rem, 1rem + 4.5vw, 7rem); }
  .page-investments .inv-advisory__body > * { max-width: 34rem; }
}

/* ───────────── what we represent: the six property types beside the photograph ───────────── */
.page-investments .re-represent__list { margin-top: var(--space-action); }
.page-investments .re-represent__list .index__item { padding: 1.1rem 0 1.6rem; }
@media (min-width: 640px) and (max-width: 991px) {
  .page-investments .re-represent .split__media { aspect-ratio: 3 / 2; }
  .page-investments .re-represent .split__media img { object-position: 50% 8%; }
}
@media (min-width: 992px) {
  .page-investments .re-represent .split__grid { align-items: start; }
  /* the list is taller than the 4:5 photograph, so the photograph holds still beside it (CSS sticky, no script) */
  .page-investments .re-represent .split__media { position: sticky; top: calc(var(--nav-h) + 2rem); }
  .page-investments .re-represent__list { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────── where we work (on navy): the market list centred, the brief's closing line under the map ───────────── */
.page-investments .re-where .mapband__markets { justify-content: center; }
.page-investments .re-where .mapband__note { max-width: 44ch; margin: var(--space-head) auto 0; font-size: var(--fs-small); line-height: 1.6; color: var(--text-3); text-align: center; }
@media (min-width: 768px) { .page-investments .re-where .mapband__note { margin-top: calc(min(76rem, 100%) * 0.08 + var(--space-head)); } }

/* ───────────── find your place: the homepage rail (the white page between two navy sections) ───────────── */
.page-investments .re-places { padding-block: var(--navy-pad); }
.page-investments .re-places .rail__name { margin-top: 8px; }

/* ───────────── buyer journey (on navy): a gold line icon on each step, dim until the hairline reaches it ───────────── */
.page-investments .re-journey .process__icon { order: -1; width: 28px; height: 28px; margin-bottom: 0.65rem; color: var(--accent); transition: color var(--dur-3) var(--ease-out); }
.page-investments .re-journey .process__step[data-status="after"] .process__icon { color: var(--text-3); }

/* ───────────── Approved Collection: one framed teaser. A white card with a hairline edge: the navy panel holds the crest (the
   Seal of Approval) inside a gold hairline mount; the words beside it. Stacked below 992px ───────────── */
.page-investments .ac-frame { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 72rem; margin-inline: auto; border: 1px solid var(--line); background-color: var(--card); }
.page-investments .ac-frame__seal { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: clamp(1rem, 2vw, 1.5rem); background-color: var(--page); }
.page-investments .ac-frame__mount { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid var(--gold-line); }
.page-investments .ac-frame__crest { width: clamp(4.5rem, 3rem + 5vw, 8rem); height: auto; aspect-ratio: 1092 / 1210; color: var(--gold); }
.page-investments .ac-frame__body { display: grid; justify-items: start; gap: var(--space-head); padding: clamp(1.75rem, 1rem + 3vw, 4rem); }
.page-investments .ac-frame__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
.page-investments .ac-frame__title { max-width: 20ch; font-family: var(--font-display); font-size: var(--fs-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-investments .ac-frame__title { font-weight: 400; } }
.page-investments .ac-frame__text { display: grid; gap: 1rem; max-width: 52ch; }
.page-investments .ac-frame__text p { color: var(--text-3); }
@media (min-width: 992px) {
  .page-investments .ac-frame { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .page-investments .ac-frame__seal { aspect-ratio: auto; min-height: 100%; }
}
/* "COMING SOON" as the brief writes it: a status on a short hairline, the listings site's name, then the action */
.page-investments .ac-soon { display: grid; justify-items: start; gap: 0.75rem; width: 100%; margin-top: calc(var(--space-action) - var(--space-head)); padding-top: var(--space-head); border-top: 1px solid var(--line); }
.page-investments .ac-soon__status { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.page-investments .ac-soon__status::before { content: ""; flex: none; width: 24px; height: 1px; background-color: currentColor; }
.page-investments .ac-soon__title { max-width: 26ch; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; color: var(--text-1); text-wrap: balance; }
.page-investments .ac-soon__action { margin-top: 0.5rem; }

/* ───────────── global capital · a scroll film chapter (css/scroll-film.css, Josh's pick 2026-10-15) in place of the zoom.
   The window opens on the white page, as the zoom's did, so the white beat between the advisory network's navy and the
   Confidante Living band stays; the daylight table and the white floor run bright under the words, so the foot of the veil
   holds darker for longer than the shared one ───────────── */
.page-investments .inv-film { background-color: var(--paper); }
/* after the swap the head has already faded out on its container (js/scroll-film.js); its children follow so the head's
   words report their real opacity and are not judged as visible text over the lede (no visual change; still in the
   accessibility tree). Component request filed: fade the children in the script */
.page-investments .inv-film.is-swapped .sfilm__head > * { opacity: 0 !important; }
.page-investments .inv-film .sfilm__veil { background: linear-gradient(to top, rgb(var(--veil) / 0.95) 0%, rgb(var(--veil) / 0.86) 30%, rgb(var(--veil) / 0.52) 56%, rgb(var(--veil) / 0) 80%); }

/* ───────────── reduced motion: the hero in place with no settle or drift; the platform's circles drawn; the journey's icons
   change colour without a transition (the film, the process and the rail have their shared static paths) ───────────── */
@media (prefers-reduced-motion: reduce) {
  .page-investments .vhero__img, .page-investments .vhero__crest, .page-investments .vhero__label, .page-investments .vhero__title, .page-investments .vhero__lede, .page-investments .vhero__action { animation: none; }
  .page-investments .vhero__film { display: none; }
  /* the platform's circles: js/pages/investments.js draws them only under no-preference, so here they show complete at once */
  .page-investments .inv-orbit__ring, .page-investments .inv-orbit__spoke { stroke-dasharray: none; stroke-dashoffset: 0; }
  .page-investments .re-journey .process__icon { transition: none; }
}