/* Confidante · Investor Centre (investor-centre.html). Revamped 2026-10-14 on the homepage precedent (docs/REVAMP-PLAN.md
   §2, §3, §5): hero D (the homepage's Flip frame as the opening, words first on the white page), white and crest-navy
   sections with clean edges (the process, the resources and the map on navy; the due diligence and confidence diagrams on
   the white the brief asks for, p126), crest rules between white sections. Page-scoped extensions of the shared
   components: every selector starts with .page-investor-centre, tokens only, sharp corners, no shadows. Its script
   (js/pages/investor-centre.js) draws the due diligence ring and scrubs the investor confidence line. Scrubbed
   components (three; rules/30 allows two, the third is Josh's ask of 2026-10-15): the hero's Flip, the process and the
   investor confidence line. */

/* ───────────── hero D · the homepage .invest (initFlipOnScroll), the family's words (REVAMP-PLAN §2): the crest first, the
   label, Kelly's headline at the hero size, the lede; the small 16:9 frame under them grows to the full width as the page
   scrolls and the action appears at the payoff. The top air is a step under the plan's so the frame sits in the first
   screen at 1440 x 900 ───────────── */
.page-investor-centre .ic-hero .invest__head { min-height: 0; padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 3vw, 5rem)); padding-bottom: clamp(4rem, 2rem + 6vw, 8rem); }
.page-investor-centre .ic-hero .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); margin-bottom: var(--space-head); color: var(--gold); }
.page-investor-centre .ic-hero .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-3); }
.page-investor-centre .ic-hero .invest__title { max-width: 18ch; margin-top: var(--space-head); 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-investor-centre .ic-hero .invest__title { font-weight: 400; } }
.page-investor-centre .ic-hero .invest__lede { max-width: 52ch; }
.page-investor-centre .ic-hero .invest__small { width: clamp(15rem, 10rem + 14vw, 24rem); margin-top: var(--space-action); }
.page-investor-centre .ic-hero .invest__img { object-position: var(--focus, 50% 50%); }
/* the payoff: the action alone, centred under the frame like the words above it */
.page-investor-centre .ic-hero .invest__stage { padding-bottom: 0; }
.page-investor-centre .ic-hero .invest__cta { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: var(--space-action); }
.page-investor-centre .ic-hero .invest__cta .btn { justify-self: center; }
/* the arrival (MotionSites luxury-real-estate entrance, as on every hero of the family): the words rise in turn, the
   frame follows and its picture settles */
.page-investor-centre .ic-hero .vhero__crest, .page-investor-centre .ic-hero .vhero__label, .page-investor-centre .ic-hero .invest__title,
.page-investor-centre .ic-hero .invest__lede, .page-investor-centre .ic-hero .invest__small { animation: ic-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-investor-centre .ic-hero .vhero__crest { animation-delay: 60ms; } .page-investor-centre .ic-hero .vhero__label { animation-delay: 160ms; }
.page-investor-centre .ic-hero .invest__title { animation-delay: 280ms; } .page-investor-centre .ic-hero .invest__lede { animation-delay: 460ms; }
.page-investor-centre .ic-hero .invest__small { animation-delay: 600ms; }
.page-investor-centre .ic-hero .invest__img { animation: ic-settle 2600ms var(--ease-out) 300ms both; }
@keyframes ic-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ic-settle { from { transform: scale(1.08); } to { transform: none; } }

/* ───────────── 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; a crest rule between two white sections has the same air above and below it ───────────── */
.page-investor-centre { --navy-pad: clamp(5rem, 3rem + 6vw, 9rem); }
.page-investor-centre .section[data-tone="dark"] { padding-block: var(--navy-pad); }
.page-investor-centre :where(.section[data-tone="dark"]) + .section { padding-top: var(--navy-pad); }
.page-investor-centre .sep { background-color: var(--page); }
.page-investor-centre .section:has(+ .sep) { padding-bottom: var(--space-open); }
.page-investor-centre .sep + .section { padding-top: var(--space-open); }

/* ── current opportunities: no project is listed, so the section closes on one plate (the brief's "for now" line and
      "Request Information"): the crest, the line, the action. The navy night plate and its hairline are the shared
      notice; from 992px the three sit on one row and the line balances over two ── */
.page-investor-centre .ic-opportunities__plate { max-width: 72rem; margin-inline: auto; display: grid; justify-items: start; gap: var(--space-head); min-height: 0; padding: clamp(1.75rem, 1rem + 2.8vw, 3.75rem); }
.page-investor-centre .ic-opportunities__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-investor-centre .ic-opportunities__line { max-width: 30ch; font-family: var(--font-display); font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-1); text-wrap: balance; }
.page-investor-centre .ic-opportunities__action { margin-top: calc(var(--space-action) - var(--space-head)); }
@media (min-width: 992px) {
  .page-investor-centre .ic-opportunities__plate { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(2rem, 3.4vw, 3.5rem); }
  .page-investor-centre .ic-opportunities__line { max-width: 40ch; font-weight: 300; }
  .page-investor-centre .ic-opportunities__action { margin-top: 0; }
}

/* ── investment process: the brief's "Minimal gold icons" (p122) on the timeline, as on consulting.html. Each step's line
      icon takes its number's place (the rail and the ordered list carry the sequence); it is gold, and grey only while
      pages.js marks its step as not yet reached (data-status="after"), so without script and under reduced motion
      (every step reached, the hairline drawn) every icon is gold ── */
.page-investor-centre .ic-process .process__step::before { content: none; }
.page-investor-centre .ic-process .process__icon { display: block; width: 24px; height: 24px; margin-bottom: 0.35rem; color: var(--accent); transition: color var(--dur-3) var(--ease-out); }
.page-investor-centre .ic-process .process__step[data-status="after"] .process__icon { color: var(--text-3); }

/* ── investor confidence: two paragraphs beside the title, so the title holds the top of both rows ── */
@media (min-width: 992px) {
  .page-investor-centre .ic-confidence .section-head--split { align-items: start; }
  .page-investor-centre .ic-confidence .section-head__title { grid-row: 1 / span 2; }
}
/* the line (Osmo "Draw Path on Scroll" and "Step-by-step Timeline", Josh 2026-10-15): the crest and the platform's name
   are its origin; a hairline track runs down from them through the eleven disciplines, each on a small point with its
   name in Zodiak, left and right of a centred line from 768px and all to the right of a line at the left on phones.
   The layout is CSS alone: the track ends at the last point's centre (a name is one line of --ic-size x 1.2, its point
   at 0.6 of that), so nothing moves when the script runs. At rest (no script, reduced motion) the line is drawn and
   every name is lit; js/pages/investor-centre.js adds .is-live, scrubs the gold fill with the scroll and marks each
   discipline .is-on as the fill reaches its point */
.page-investor-centre .ic-line {
  --ic-size: var(--fs-subtitle);                    /* the names */
  --ic-x: 1.125rem;                                 /* the line, under the crest's centre on phones */
  --ic-dot: 9px;
  --ic-tick: 1rem;                                  /* the gold branch from a point to its name */
  --ic-off: calc(var(--ic-dot) / 2 + 0.375rem + var(--ic-tick) + 0.75rem); /* a point's centre to its name */
  --ic-lead: clamp(2.25rem, 1.5rem + 2.4vw, 4rem);  /* the origin to the first name */
  --ic-gap: 0.75rem;                                /* the air between the origin and the top of the line */
  --ic-row: 1.5rem;
  max-width: 64rem; margin-inline: auto;
}
.page-investor-centre .ic-line__origin { display: grid; grid-template-columns: calc(var(--ic-x) * 2) minmax(0, 1fr); align-items: center; column-gap: calc(var(--ic-off) - var(--ic-x)); }
.page-investor-centre .ic-line__crest { width: calc(var(--ic-x) * 2); height: calc(var(--ic-x) * 2 * 1210 / 1092); color: var(--gold); }
.page-investor-centre .ic-line__label { max-width: 16ch; font-family: var(--font-display); font-size: var(--ic-size); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-1); text-wrap: balance; }
.page-investor-centre .ic-line__track { position: relative; margin-top: var(--ic-lead); }
.page-investor-centre .ic-line__rail { position: absolute; left: calc(var(--ic-x) - 0.5px); top: calc(var(--ic-gap) - var(--ic-lead)); bottom: calc(var(--ic-size) * 0.6); width: 1px; background-color: var(--line-2); pointer-events: none; }
.page-investor-centre .ic-line__fill { position: absolute; inset: 0; background-color: var(--accent); transform-origin: 50% 0; }
.page-investor-centre .ic-line__list { display: grid; row-gap: var(--ic-row); }
.page-investor-centre .ic-line__item { position: relative; padding-left: calc(var(--ic-x) + var(--ic-off)); }
.page-investor-centre .ic-line__dot { position: absolute; z-index: 1; left: calc(var(--ic-x) - var(--ic-dot) / 2); top: calc(var(--ic-size) * 0.6 - var(--ic-dot) / 2); width: var(--ic-dot); height: var(--ic-dot); border: 1px solid var(--accent); border-radius: 50%; background-color: var(--accent); transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.page-investor-centre .ic-line__tick { position: absolute; left: calc(var(--ic-x) + var(--ic-dot) / 2 + 0.375rem); top: calc(var(--ic-size) * 0.6 - 0.5px); width: var(--ic-tick); height: 1px; background-color: var(--accent); transform-origin: 0 50%; transition: transform var(--dur-4) var(--ease-out); }
.page-investor-centre .ic-line__name { display: block; font-family: var(--font-display); font-size: var(--ic-size); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-1); transition: color var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
/* from 768px: the line at the centre, the crest and the name above it, the disciplines left and right in turn */
@media (min-width: 768px) {
  .page-investor-centre .ic-line { --ic-x: 50%; --ic-tick: clamp(1.25rem, 0.25rem + 2.2vw, 2.5rem); --ic-row: clamp(1.25rem, 0.75rem + 1.2vw, 2rem); }
  .page-investor-centre .ic-line__origin { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 1rem; text-align: center; }
  .page-investor-centre .ic-line__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); }
  .page-investor-centre .ic-line__item { width: 50%; padding: 0 var(--ic-off) 0 0; text-align: right; }
  .page-investor-centre .ic-line__item:nth-child(even) { margin-left: 50%; padding: 0 0 0 var(--ic-off); text-align: left; }
  .page-investor-centre .ic-line__item:nth-child(odd) .ic-line__dot { left: auto; right: calc(var(--ic-dot) / -2); }
  .page-investor-centre .ic-line__item:nth-child(even) .ic-line__dot { left: calc(var(--ic-dot) / -2); }
  .page-investor-centre .ic-line__item:nth-child(odd) .ic-line__tick { left: auto; right: calc(var(--ic-dot) / 2 + 0.375rem); transform-origin: 100% 50%; }
  .page-investor-centre .ic-line__item:nth-child(even) .ic-line__tick { left: calc(var(--ic-dot) / 2 + 0.375rem); }
}
@media (min-width: 992px) { .page-investor-centre .ic-line__label, .page-investor-centre .ic-line__name { font-weight: 300; } }
/* scrubbing: a point not yet reached is an open ring, its branch is not drawn and its name waits a little lower in the
   muted ink; reaching it fills the ring, draws the branch and lifts the name into place in full ink */
@media (prefers-reduced-motion: no-preference) {
  .page-investor-centre .ic-line.is-live .ic-line__item:not(.is-on) .ic-line__dot { border-color: var(--line-3); background-color: var(--page); }
  .page-investor-centre .ic-line.is-live .ic-line__item:not(.is-on) .ic-line__tick { transform: scaleX(0); }
  .page-investor-centre .ic-line.is-live .ic-line__item:not(.is-on) .ic-line__name { color: var(--text-3); transform: translateY(0.5rem); }
}

/* ── due diligence: the shared radial diagram as a cycle. Its spokes are left out; js/pages/investor-centre.js adds a
      ring through the eight points that draws itself clockwise from the top (it starts at the first point), and each
      point and label appears as the ring reaches it. The crest holds the centre. Drawn once, like the other diagrams ── */
.page-investor-centre .ic-cycle .diagram__spoke { display: none; }
/* phones read the eight names as the shared list; the crest sits above it on a small plate, a seal rather than a banner */
.page-investor-centre .ic-cycle .diagram__centre { width: fit-content; padding: 1.25rem 1.5rem; }
.page-investor-centre .ic-cycle__crest { width: clamp(2.75rem, 1.4rem + 3.4vw, 5.25rem); height: auto; aspect-ratio: 1092 / 1210; color: var(--gold); }
.page-investor-centre .ic-cycle__ring { opacity: 0.8; }
@media (min-width: 768px) { .page-investor-centre .ic-cycle .diagram__centre { padding: 0; } }
/* phones (mobile parity pass, 2026-10-15): the plate becomes the cycle drawn small, as on desktop: a ring through eight
   points around the crest and the inner ring that holds it (static markup, .ic-cycle__phone, so nothing moves and it
   shows drawn without script), and the
   shared draw-once classes draw it, the ring clockwise from the top, each point and its name in the list lighting as the
   ring reaches it. Sized in CSS from the first paint. If the shared layout ever draws the figure on phones, this steps aside */
.page-investor-centre .ic-cycle__phone { display: none; }
@media (max-width: 767px) {
  .page-investor-centre .ic-cycle:not(:has(.diagram__svg > *)) .diagram__centre { position: relative; width: min(16rem, 74%); aspect-ratio: 1; padding: 0; border: 0; background: none; }
  .page-investor-centre .ic-cycle:not(:has(.diagram__svg > *)) .ic-cycle__phone { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
  .page-investor-centre .ic-cycle:not(:has(.diagram__svg > *)) .ic-cycle__crest { width: 3.5rem; }
  /* a 100-unit drawing scaled to the ring: a non-scaling stroke would measure the one-unit dash in screen pixels and
     draw only part of the ring, so the stroke scales with it (0.4 units is a hairline at 16rem) */
  .page-investor-centre .ic-cycle__phone .diagram__ring { vector-effect: none; stroke-width: 0.4; }
}
.pages-js .page-investor-centre .ic-cycle.is-ready .ic-cycle__ring { transition-duration: 1800ms; transition-timing-function: var(--ease-in-out); transition-delay: 150ms; }
.pages-js .page-investor-centre .ic-cycle.is-ready .diagram__dot,
.pages-js .page-investor-centre .ic-cycle.is-ready .diagram__node { transition-delay: calc(var(--i, 0) * 200ms + 260ms); }
.pages-js .page-investor-centre .ic-cycle.is-ready .ic-cycle__crest { opacity: 0; transition: opacity var(--dur-4) var(--ease-out) 120ms; }
.pages-js .page-investor-centre .ic-cycle.is-drawn .ic-cycle__crest { opacity: 1; }

/* ── investor resources: the eight documents sit in the split's text column, under the lede; one column beside the
      photograph from 992px (two on tablets, where the split stacks). A title alone per row, so the rows are a little
      denser than the shared index and the icon centres on its title ── */
.page-investor-centre .ic-resources .index__list { margin-top: var(--space-head); }
.page-investor-centre .ic-resources .index__item { align-items: center; padding: 1rem 0 1.15rem; }
.page-investor-centre .ic-resources .index__icon { grid-row: auto; }
@media (min-width: 992px) { .page-investor-centre .ic-resources .index__list { grid-template-columns: minmax(0, 1fr); } }
/* tablets stack the split at full width, where a 4:5 photograph runs taller than the screen: a 3:2 crop there */
@media (min-width: 640px) and (max-width: 991px) { .page-investor-centre .ic-resources .split__media { aspect-ratio: 3 / 2; } }

/* ── philosophy: the section's name on one line above the statement ── */
.page-investor-centre .ic-philosophy .intro__label { max-width: none; }

/* ── FAQ: the last answer ("How do I request access?") ends on the investor action ── */
.page-investor-centre .ic-faq .faq__a .action { margin-top: 0.75rem; }


/* ── reduced motion: the hero's words in place and the frame already large (initFlipOnScroll moves the picture to the big
      frame and shows the action), so the small frame's room goes; the ring, the points and the crest at rest; the process
      icons change colour without a fade; the confidence line drawn and every discipline lit, with no scrub ── */
@media (prefers-reduced-motion: reduce) {
  .page-investor-centre .ic-hero .vhero__crest, .page-investor-centre .ic-hero .vhero__label, .page-investor-centre .ic-hero .invest__title,
  .page-investor-centre .ic-hero .invest__lede, .page-investor-centre .ic-hero .invest__small, .page-investor-centre .ic-hero .invest__img { animation: none; }
  .page-investor-centre .ic-hero .invest__small { display: none; }
  .page-investor-centre .ic-hero .invest__head { padding-bottom: var(--space-open); }
  .pages-js .page-investor-centre .ic-cycle.is-ready .ic-cycle__crest { opacity: 1; transition: none; }
  .pages-js .page-investor-centre .ic-cycle.is-ready .ic-cycle__ring { stroke-dashoffset: 0; transition: none; }
  .page-investor-centre .ic-process .process__icon { transition: none; }
  .page-investor-centre .ic-line__dot, .page-investor-centre .ic-line__tick, .page-investor-centre .ic-line__name { transition: none; }
}