/* ==========================================================================
   site-v11.css: the v11 "celestial navigation" layer for SUBPAGES.

   The homepage is built as: v10 layout base (aeolus.css + home.css) → v11
   brand layers (/v2/assets/*.css) → /v2/v11.css. Subpages mirror that stack
   exactly, swapping home.css for the subpage layout base and adding this file
   last:

     /v3/assets/css/aeolus.css      v10 primitives (geometry, faq, footer grid)
     /Assets/site.css               v10 subpage layout (crumbs, ins-card, faq)
     /v2/assets/self-hosted.css     Zodiak / General Sans / IBMPlexMono
     /v2/assets/tokens.css          --aeolus-* design tokens
     /v2/assets/backgrounds.css     .bg-night/-nightHero/-nightCool/-cream roots
     /v2/assets/glass.css           .glass-* recipes
     /v2/assets/melt.css            .melt junction markers
     /v2/v11.css                    token override, v10 atmosphere strip, the
                                    junction system, type mandates, CTA chip,
                                    nav + footer. Shared on purpose: every rule
                                    in it that is not id-scoped to the homepage
                                    is structural, so subpages inherit the same
                                    nav, buttons, joins and melts, not a copy.
     /Assets/site-v11.css           THIS FILE: the subpage components only.

   Scripts (defer, in this order): /v2/assets/constellation-v3.js,
   /v2/v11.js (nav theme, mobile menu, booking, reveal, counters),
   /v2/assets/constellation-setup.js (mounts .bg-sky[data-sky]), calendar.js.

   PAGE ANATOMY a subpage adopts (see /crm-diagnostic/ and /about/):

     header.page-hero.aeolus-canvas-dark#top
       > .bg-nightHero (aurora, weave, vignette, noise, .bg-sky[data-sky=stars])
       > .page-hero-inner (crumbs, h1 = line one + <em>line two</em>, .hero-sub)
     section.aeolus-canvas-dark  > .bg-night  (continues the hero: flat)
     .melt[data-from=night][data-to=cream]   (zero-height junction marker)
     section.aeolus-canvas       > .bg-cream  (first cream section: aurora)
     section.aeolus-canvas       > .bg-cream  (continuation: flat cream)
     .melt[data-from=cream][data-to=nightCool]
     section#cta.final-cta       > .bg-nightCool + .final-cta-inner.glass-heroDark
     footer.site-footer          > .bg-nightCool.footer-cont (continues #cta)

   Two structural rules the v11.css junction selectors impose:
   - a melt must sit between two <section> siblings of <main>. The hero is a
     <header>, so it is always followed by a night section, never a melt.
   - cards carry their glass recipe in the markup (glass-lightCard on cream,
     glass-dark / glass-darkSubtle on night), exactly as on the homepage.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SURFACE-AWARE INK
   One set of names that resolves per surface, so page CSS never branches on
   cream vs night. Gold on cream is bronze (BRAND-SPEC 2.2; #problem does the
   same on the homepage): gold-600 on cream is ~2.5:1, bronze is ~5.6:1.
   -------------------------------------------------------------------------- */
main .aeolus-canvas {
  --sv-ink: var(--aeolus-text-on-light);
  --sv-lede: var(--aeolus-text-on-light-body-strong);
  --sv-body: var(--aeolus-text-on-light-body);
  --sv-label: var(--aeolus-text-on-light-label);
  --sv-accent: var(--aeolus-bronze);
  --sv-rule: var(--aeolus-hairline-on-light);
  --gold: var(--aeolus-bronze);
  --gold-dk: var(--aeolus-bronze);
  color: var(--sv-ink);
}
main .aeolus-canvas-dark {
  --sv-ink: var(--aeolus-text-on-dark);
  --sv-lede: var(--aeolus-text-on-dark-lede);
  --sv-body: var(--aeolus-text-on-dark-body);
  --sv-label: var(--aeolus-text-on-dark-label);
  --sv-accent: var(--aeolus-gold-400);
  --sv-rule: var(--aeolus-hairline-on-dark);
  color: var(--sv-ink);
}

/* Body copy at the deck's single body weight. aeolus.css sets body to 350,
   which General Sans (static 300/400/500 files) renders as 300: too thin on
   the textured surfaces. Scoped to <main> so nav and footer stay identical to
   the homepage's. */
main { font-weight: 400; }

/* In-copy links: underlined accent ink, never a bare colour change. */
main :is(.aeolus-canvas, .aeolus-canvas-dark) :is(p, li) a:not([class]) {
  color: var(--sv-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   2. PLUMBING: content above the .bg-* root (v11.css lists the homepage
   wrappers; these are the subpage ones).
   -------------------------------------------------------------------------- */
.page-hero-inner,
.related-inner,
.cta-band-inner { position: relative; z-index: 2; }


/* --------------------------------------------------------------------------
   3. RUNS: the homepage's FIRST-CARRIER RULE, stated structurally.
   Within a run of same-family sections the opener carries the atmosphere and
   every continuation is flat, so a run reads as one surface that keeps going
   (v11.css section 3 has the measurements; the homepage applies it by id to
   #story, #results, #how and #faq). `body` is prepended because the generic
   join rules in v11.css score (0,4,1) and a tie on specificity would be
   decided by source order alone.
   -------------------------------------------------------------------------- */

/* Night continuation: aurora + vignette off, texture matched to the carrier. */
body main > :is(.hero, .aeolus-canvas-dark) + .aeolus-canvas-dark > .bg-night > :is(.bg-aurora, .bg-vignette) {
  display: none;
}
/* A run opened by the hero carries the hero's strong weave and 0.15 noise. */
body main > :has(> .bg-nightHero) + .aeolus-canvas-dark > .bg-night {
  --bg-weave: var(--aeolus-sailcloth-dark-strong);
  --bg-noise-opacity: 0.15;
}
/* Weave and noise are positionless fills, identical on both sides of an
   internal join, so they run straight through it rather than fading out and
   back in (the texture-handoff defect). */
body main > :is(.hero, .aeolus-canvas-dark):has(+ .aeolus-canvas-dark) > :is(.bg-night, .bg-nightHero) > :is(.bg-weave, .bg-noise),
body main > :is(.hero, .aeolus-canvas-dark) + .aeolus-canvas-dark > .bg-night > :is(.bg-weave, .bg-noise) {
  --join-top: 0px;
  --join-bottom: 0px;
}
/* A night carrier that OPENS on a melt and hands on to a continuation needs
   its vignette faded at the bottom as well. v11.css gives melt-adjacent
   texture layers a top-only eased mask, which replaces the generic join mask,
   so the dense vignette stays at full strength on the carrier's last rows and
   dims the weave there; the continuation has no vignette, so the weave
   visibly brightens on the boundary row (measured 0.3-0.8 luma step; the
   homepage's #diagnostic -> #results join shows the same). One mask, eased in
   at the melt end and faded out at the other. The aurora's red lobe sits at
   the bottom of the box and was only hidden by that vignette, so it takes a
   longer fade than the generic --night-join one. Both are smootherstep eased
   at both ends: a linear fade reaching zero on the seam row leaves a slope
   kink the eye reads as a crease (v11.css section 10 has the same note). The
   aurora's stops carry its 10.9375% inset (its box overhangs by 14%). The
   cream carrier of a cream run gets the same aurora mask: its blue lobe is
   pinned to the box bottom and showed the same crease into the flat
   continuation (the homepage's #resources -> #faq shows it too). */

body main > .melt + .aeolus-canvas-dark:has(+ .aeolus-canvas-dark) > .bg-night > .bg-aurora,
body main > .melt + .aeolus-canvas:has(+ .aeolus-canvas) > .bg-cream > .bg-aurora {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) calc(10.9375% + var(--junction-span) * .3 * 0.000), rgba(0,0,0,0.016) calc(10.9375% + var(--junction-span) * .3 * 0.125), rgba(0,0,0,0.104) calc(10.9375% + var(--junction-span) * .3 * 0.250), rgba(0,0,0,0.275) calc(10.9375% + var(--junction-span) * .3 * 0.375), rgba(0,0,0,0.500) calc(10.9375% + var(--junction-span) * .3 * 0.500), rgba(0,0,0,0.725) calc(10.9375% + var(--junction-span) * .3 * 0.625), rgba(0,0,0,0.896) calc(10.9375% + var(--junction-span) * .3 * 0.750), rgba(0,0,0,0.984) calc(10.9375% + var(--junction-span) * .3 * 0.875), rgba(0,0,0,1.000) calc(10.9375% + var(--junction-span) * .3 * 1.000), rgba(0,0,0,1.000) calc(100% - 10.9375% - var(--junction-span) * 1.000), rgba(0,0,0,0.984) calc(100% - 10.9375% - var(--junction-span) * 0.875), rgba(0,0,0,0.896) calc(100% - 10.9375% - var(--junction-span) * 0.750), rgba(0,0,0,0.725) calc(100% - 10.9375% - var(--junction-span) * 0.625), rgba(0,0,0,0.500) calc(100% - 10.9375% - var(--junction-span) * 0.500), rgba(0,0,0,0.275) calc(100% - 10.9375% - var(--junction-span) * 0.375), rgba(0,0,0,0.104) calc(100% - 10.9375% - var(--junction-span) * 0.250), rgba(0,0,0,0.016) calc(100% - 10.9375% - var(--junction-span) * 0.125), rgba(0,0,0,0.000) calc(100% - 10.9375% - var(--junction-span) * 0.000));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) calc(10.9375% + var(--junction-span) * .3 * 0.000), rgba(0,0,0,0.016) calc(10.9375% + var(--junction-span) * .3 * 0.125), rgba(0,0,0,0.104) calc(10.9375% + var(--junction-span) * .3 * 0.250), rgba(0,0,0,0.275) calc(10.9375% + var(--junction-span) * .3 * 0.375), rgba(0,0,0,0.500) calc(10.9375% + var(--junction-span) * .3 * 0.500), rgba(0,0,0,0.725) calc(10.9375% + var(--junction-span) * .3 * 0.625), rgba(0,0,0,0.896) calc(10.9375% + var(--junction-span) * .3 * 0.750), rgba(0,0,0,0.984) calc(10.9375% + var(--junction-span) * .3 * 0.875), rgba(0,0,0,1.000) calc(10.9375% + var(--junction-span) * .3 * 1.000), rgba(0,0,0,1.000) calc(100% - 10.9375% - var(--junction-span) * 1.000), rgba(0,0,0,0.984) calc(100% - 10.9375% - var(--junction-span) * 0.875), rgba(0,0,0,0.896) calc(100% - 10.9375% - var(--junction-span) * 0.750), rgba(0,0,0,0.725) calc(100% - 10.9375% - var(--junction-span) * 0.625), rgba(0,0,0,0.500) calc(100% - 10.9375% - var(--junction-span) * 0.500), rgba(0,0,0,0.275) calc(100% - 10.9375% - var(--junction-span) * 0.375), rgba(0,0,0,0.104) calc(100% - 10.9375% - var(--junction-span) * 0.250), rgba(0,0,0,0.016) calc(100% - 10.9375% - var(--junction-span) * 0.125), rgba(0,0,0,0.000) calc(100% - 10.9375% - var(--junction-span) * 0.000));
}
body main > .melt + .aeolus-canvas-dark:has(+ .aeolus-canvas-dark) > .bg-night > .bg-vignette {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) calc(0% + var(--junction-span) * .3 * 0.000), rgba(0,0,0,0.016) calc(0% + var(--junction-span) * .3 * 0.125), rgba(0,0,0,0.104) calc(0% + var(--junction-span) * .3 * 0.250), rgba(0,0,0,0.275) calc(0% + var(--junction-span) * .3 * 0.375), rgba(0,0,0,0.500) calc(0% + var(--junction-span) * .3 * 0.500), rgba(0,0,0,0.725) calc(0% + var(--junction-span) * .3 * 0.625), rgba(0,0,0,0.896) calc(0% + var(--junction-span) * .3 * 0.750), rgba(0,0,0,0.984) calc(0% + var(--junction-span) * .3 * 0.875), rgba(0,0,0,1.000) calc(0% + var(--junction-span) * .3 * 1.000), rgba(0,0,0,1.000) calc(100% - 0% - var(--junction-span) * .8 * 1.000), rgba(0,0,0,0.984) calc(100% - 0% - var(--junction-span) * .8 * 0.875), rgba(0,0,0,0.896) calc(100% - 0% - var(--junction-span) * .8 * 0.750), rgba(0,0,0,0.725) calc(100% - 0% - var(--junction-span) * .8 * 0.625), rgba(0,0,0,0.500) calc(100% - 0% - var(--junction-span) * .8 * 0.500), rgba(0,0,0,0.275) calc(100% - 0% - var(--junction-span) * .8 * 0.375), rgba(0,0,0,0.104) calc(100% - 0% - var(--junction-span) * .8 * 0.250), rgba(0,0,0,0.016) calc(100% - 0% - var(--junction-span) * .8 * 0.125), rgba(0,0,0,0.000) calc(100% - 0% - var(--junction-span) * .8 * 0.000));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) calc(0% + var(--junction-span) * .3 * 0.000), rgba(0,0,0,0.016) calc(0% + var(--junction-span) * .3 * 0.125), rgba(0,0,0,0.104) calc(0% + var(--junction-span) * .3 * 0.250), rgba(0,0,0,0.275) calc(0% + var(--junction-span) * .3 * 0.375), rgba(0,0,0,0.500) calc(0% + var(--junction-span) * .3 * 0.500), rgba(0,0,0,0.725) calc(0% + var(--junction-span) * .3 * 0.625), rgba(0,0,0,0.896) calc(0% + var(--junction-span) * .3 * 0.750), rgba(0,0,0,0.984) calc(0% + var(--junction-span) * .3 * 0.875), rgba(0,0,0,1.000) calc(0% + var(--junction-span) * .3 * 1.000), rgba(0,0,0,1.000) calc(100% - 0% - var(--junction-span) * .8 * 1.000), rgba(0,0,0,0.984) calc(100% - 0% - var(--junction-span) * .8 * 0.875), rgba(0,0,0,0.896) calc(100% - 0% - var(--junction-span) * .8 * 0.750), rgba(0,0,0,0.725) calc(100% - 0% - var(--junction-span) * .8 * 0.625), rgba(0,0,0,0.500) calc(100% - 0% - var(--junction-span) * .8 * 0.500), rgba(0,0,0,0.275) calc(100% - 0% - var(--junction-span) * .8 * 0.375), rgba(0,0,0,0.104) calc(100% - 0% - var(--junction-span) * .8 * 0.250), rgba(0,0,0,0.016) calc(100% - 0% - var(--junction-span) * .8 * 0.125), rgba(0,0,0,0.000) calc(100% - 0% - var(--junction-span) * .8 * 0.000));
}

/* The hero's star field fades out before the join (v11.css does this for
   #hero): the continuation carries no stars, so an unfaded field would stop
   dead on the boundary row. */
main > .page-hero > .bg-nightHero > .bg-sky {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--night-join)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--night-join)), transparent 100%);
}

/* Cream continuation: drop the aurora (the homepage's #faq). The carrier's
   aurora already fades into the join via v11.css. */
body main > .aeolus-canvas + .aeolus-canvas > .bg-cream > .bg-aurora { display: none; }


/* --------------------------------------------------------------------------
   4. HERO: the homepage hero grammar on a shorter, content-first cover.
   Unboxed copy over nightHero, star field only (no sail: the owner keeps
   constellations sparse; the one sail on a subpage is the closing one).
   -------------------------------------------------------------------------- */
.page-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(560px, 84svh, 840px);
  padding: clamp(7.5rem, 16vh, 10rem) var(--pad) clamp(3.5rem, 8vh, 5.5rem);
}
.page-hero-inner { width: 100%; }

/* Mandate 0-1: no kicker above a headline. Hidden here as well as removed
   from migrated markup, so a page adopting this file cannot regress. */
.page-hero .hero-kicker { display: none; }

.crumbs {
  font-family: var(--font-body);
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--aeolus-text-on-dark-faint);
}
.crumbs a { color: var(--aeolus-text-on-dark-lede); }
.crumbs a:hover { color: var(--aeolus-gold-400); }

/* The signature two-line headline, same numbers as v11.css `.hero h1`: one
   size for both lines, 500 over 700, one colour. */
.page-hero h1 {
  max-width: none;
  font-size: clamp(2.15rem, 4.6vw, 64px);
  font-weight: 500;
  line-height: var(--aeolus-lh-hero);
  letter-spacing: var(--aeolus-ls-display);
  color: var(--aeolus-text-on-dark);
  text-wrap: balance;
}
.page-hero h1 em {
  display: block;
  font-weight: 700 !important;
  text-shadow: none;
}
/* Fitted, not picked: the longest subpage hero line ("not just advised on
   it." at 700) measures ~11.9 x font-size, and the column is W - 2 x 24px
   below 820px, so (W - 48) / 11.9 = 8.4vw - 4px is the ceiling. */
@media (max-width: 820px) {
  .page-hero h1 { font-size: clamp(25px, calc(8.2vw - 4px), 40px); }
}
.page-hero .hero-sub {
  max-width: 60ch;
  margin-top: clamp(18px, 2.2vw, 26px);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 400;
  line-height: var(--aeolus-lh-lede);
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.page-hero .cta-trust { justify-content: flex-start; }


/* --------------------------------------------------------------------------
   5. SECTION HEADLINES: two lines, one colour, second line one step up.
   Night 400 → 500, cream 300 → 500 (BRAND-SPEC 3.1). The <em> is the second
   line, so it is always its own block.
   -------------------------------------------------------------------------- */
main .aeolus-canvas h2 { font-weight: 300; color: var(--sv-ink); }
main .aeolus-canvas-dark h2 { font-weight: 400; color: var(--sv-ink); }
main :is(.aeolus-canvas, .aeolus-canvas-dark) h2 em {
  display: block;
  font-weight: 500 !important;
}
main :is(.aeolus-canvas, .aeolus-canvas-dark) h2 { text-wrap: balance; }

/* Section ledes. */
main :is(.aeolus-canvas, .aeolus-canvas-dark) .t-lede { color: var(--sv-lede); }

/* Mono is an in-card data caption (mandate 0-1). Inside cards it takes the
   surface's label ink. */
main :is(.aeolus-canvas, .aeolus-canvas-dark) .label { color: var(--sv-label); }
main .label .label-dot { display: none; }

/* In-card list terms read as item titles, not in-paragraph bold (0-3). */
main li > b { font-weight: 500; color: var(--sv-ink); }


/* --------------------------------------------------------------------------
   6. CARDS: glass recipes come from the markup; these add the interior
   grammar the recipes do not carry, and retire the v10 hover ring.
   -------------------------------------------------------------------------- */
main :is(.glass-lightCard, .glass-lightSubtle, .glass-dark, .glass-darkSubtle) h3 {
  color: var(--sv-ink);
}

/* v10 gold ring on hover → the recipe steps up its own shadow family, as on
   the homepage (#resources .ins-card, v11.css section 7). */
main .aeolus-canvas .glass-lightCard.interactive:hover {
  transform: translateY(-2px);
  border-color: var(--aeolus-glass-light-card-border);
  box-shadow: var(--aeolus-glass-light-shadow);
}
main .aeolus-canvas-dark :is(.glass-dark, .glass-darkSubtle).interactive:hover {
  transform: translateY(-2px);
  border-color: var(--aeolus-glass-dark-border);
  box-shadow: var(--aeolus-glass-dark-shadow);
}

/* Insight cards on cream: category is an in-card mono caption; the read
   link takes the cream accent. */
.ins-card .label { font-size: 11px; }
.ins-card .read { color: var(--sv-accent); }

/* The gold CTA chip loses its edge on cream (1.28:1); v11.css rings it on
   #resources: the same fix for any cream section. */
main .aeolus-canvas .btn-gold {
  box-shadow: inset 0 0 0 1px var(--aeolus-gold-600), var(--aeolus-glass-gold-shadow);
}

/* "Acquired" chip on cream: the homepage's CTA-radius chip, in bronze ink. */
main .aeolus-canvas .acq {
  border-radius: var(--v11-cta-radius);
  background: var(--aeolus-gold-wash);
  border: 1px solid rgba(140, 90, 22, 0.35);
  color: var(--aeolus-bronze);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: var(--aeolus-ls-micro);
  text-transform: uppercase;
  padding: 6px 9px;
}

/* Section title for the related-reading row: display face, not a mono
   kicker (it heads cards, it is not a caption inside one). */
main .related-inner > .label {
  display: block;
  max-width: 1040px;
  margin: 0 auto 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, var(--aeolus-web-fs-h2-sm));
  font-weight: 300;
  letter-spacing: var(--aeolus-ls-display);
  text-transform: none;
  color: var(--sv-ink);
}


/* --------------------------------------------------------------------------
   7. FAQ on cream: the homepage list: glass-lightSubtle in markup.
   -------------------------------------------------------------------------- */
main .aeolus-canvas .faq-a-inner { color: var(--sv-body); }


/* --------------------------------------------------------------------------
   8. CLOSING CTA: markup mirrors the homepage #cta (nightCool, bold sail
   fitted behind .final-cta-inner.glass-heroDark). The subpage band keeps its
   own class names; these bring their copy onto the homepage values.
   -------------------------------------------------------------------------- */
.cta-band .label { display: none; } /* mandate 0-1: no eyebrow over the h2 */
.cta-band .cta-sub {
  max-width: 54ch;
  margin: 0 auto 2.2rem;
  font-size: clamp(1rem, 1.25vw, var(--aeolus-web-fs-lede));
  font-weight: 400;
  line-height: var(--aeolus-lh-lede);
  color: var(--aeolus-text-on-dark-lede);
}
.cta-band h2 { margin: 1rem 0 1.3rem; }


/* --------------------------------------------------------------------------
   9. FOOTER: homepage parity: the research column folds away on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .footer-grid > div:nth-child(3) { display: none; }
  .cta-trust { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; row-gap: .7rem; }
  .page-hero .cta-trust { justify-items: start; }
}