/* ============================================================
The Money–Body Code — sales-page.css
Page-specific layer for templates/product.the-money-body-code.json.
Loaded from layout/theme.liquid when template == 'product.the-money-body-code'.
Shared tokens / reset / type / @font-face live in base.css + theme.liquid.
Ported verbatim from preview/sales-page.html (design source of truth);
only the duplicated :root tokens, the * reset, and the Google Fonts
link were dropped, and the page ground is scoped to body.template-product.
============================================================ */
/* darker cinematic ground than the site default (--ink) — the whole
sales page rides on this */
body.template-product-the-money-body-code { background: #060405; }
#grain {
position: fixed;
inset: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 200;
opacity: 0.03;
mix-blend-mode: screen;
}
/* ════════════════════════════
SECTION 1
════════════════════════════ */
.s1 {
position: relative;
overflow: hidden;
background: #060405;
}
/* bg constrained to hero viewport — photo as atmosphere */
.s1-bg {
position: absolute;
top: 0; left: 0; right: 0;
height: 100vh;
z-index: 0;
}
.s1-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 50%;
filter: brightness(.54) saturate(.68) contrast(1.06);
}
/* overlay: fades photo to solid black — prose section starts clean */
.s1-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(6,4,5,.38) 0%,
rgba(6,4,5,.42) 70%,
rgba(6,4,5,.60) 85%,
rgba(6,4,5,.90) 96%,
rgba(6,4,5,1) 100%
);
}
.s1-content { position: relative; z-index: 1; }
/* ── Opening: headline + subtitle in the viewport ── */
.s1-hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(60px,7vh,90px) clamp(28px,5vw,72px) clamp(110px,16vh,160px);
gap: clamp(18px, 2.8vh, 26px);
}
.s1-h1 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(42px, 6.5vw, 88px);
line-height: 1.04;
letter-spacing: .002em;
color: var(--cream);
text-wrap: balance;
max-width: 15ch;
}
.s1-sub {
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(16px, 1.8vw, 22px);
line-height: 1.5;
letter-spacing: .01em;
color: rgba(245,242,237,.52);
max-width: 52ch;
}
/* scroll cue — thin gold line at bottom of hero */
.s1-scroll-cue {
position: absolute;
bottom: clamp(32px, 5vh, 52px);
left: 50%;
transform: translateX(-50%);
animation: rise 1s var(--ease) 1.1s both;
}
.s1-scroll-line {
width: 1px;
height: 52px;
background: linear-gradient(180deg, transparent, rgba(201,162,78,.62));
opacity: .55;
animation: breathe 2.4s ease-in-out 2.1s infinite;
}
@keyframes breathe {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
/* ── Prose: flows below the fold on dark ground ── */
.s1-prose {
max-width: 620px;
margin: 0 auto;
padding: clamp(20px,2.5vh,30px) clamp(24px,5vw,48px) clamp(24px,3.5vh,36px);
}
.prose-echo {
font-family: var(--font-d);
font-style: italic;
font-weight: 500;
font-size: clamp(20px, 2.4vw, 28px);
line-height: 1.34;
color: rgba(245,242,237,.88);
}
.prose-body {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.72;
color: rgba(245,242,237,.72);
text-wrap: pretty;
}
.prose-body em { font-style: italic; color: rgba(245,242,237,.94); }
.prose-stanza {
text-align: center;
display: flex;
flex-direction: column;
gap: clamp(8px,1.2vh,14px);
margin-bottom: clamp(36px,5.5vh,58px);
/* break out of narrow prose column so "Making the money." fits on one line */
margin-inline: calc(-1 * clamp(24px,5vw,48px));
padding-inline: 16px;
}
.prose-stanza-line {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(28px,3.8vw,52px);
line-height: 1.08;
color: rgba(245,242,237,.90);
letter-spacing: .002em;
}
/* "Starting again." — same weight as the opener but a shade dimmer: the cycle wears */
.prose-stanza-line:last-child {
color: rgba(245,242,237,.62);
}
.prose-stanza-line--fall {
font-style: italic;
color: rgba(245,242,237,.22);
}
.prose-aside {
font-size: clamp(12.5px,1.1vw,14px);
font-style: italic;
line-height: 1.55;
color: rgba(245,242,237,.38);
letter-spacing: .018em;
}
/* spacing */
.ps { margin-bottom: clamp(10px,1.5vh,16px); }
.pm { margin-bottom: clamp(18px,2.6vh,26px); }
.pl { margin-bottom: clamp(22px,3.2vh,32px); }
/* ── Part B: pivot on dark ── */
.s1-partb {
max-width: 620px;
margin: 0 auto;
padding: 0 clamp(24px,5vw,48px) clamp(52px,7.5vh,88px);
}
.pb-pivot {
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(26px,3.2vw,40px);
line-height: 1.18;
color: rgba(245,242,237,.96);
letter-spacing: .004em;
margin-bottom: clamp(6px,1vh,10px);
}
.pb-q {
font-size: clamp(14px,1.3vw,15.5px);
font-style: italic;
color: rgba(245,242,237,.46);
letter-spacing: .02em;
margin-bottom: clamp(26px,3.8vh,38px);
}
.pb-body {
font-size: clamp(15.5px,1.5vw,18px);
line-height: 1.7;
color: rgba(245,242,237,.80);
text-wrap: pretty;
}
.pb-body em { font-style: italic; color: rgba(245,242,237,.96); }
.pb-body strong { font-weight: 500; color: rgba(245,242,237,.96); }
.pb-you { font-weight: 400; color: var(--gold); }
.pb-m { margin-bottom: clamp(16px,2.4vh,24px); }
.pb-l { margin-bottom: clamp(28px,4.2vh,42px); }
.pb-story {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(22px,2.6vw,32px);
line-height: 1.22;
color: rgba(245,242,237,.96);
text-wrap: balance;
}
.pb-close {
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(19px,2.3vw,27px);
line-height: 1.3;
color: rgba(245,242,237,.82);
}
/* ── animations ── */
@keyframes rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
.s1-h1 { animation: rise 1.1s var(--ease) .2s both; }
.s1-sub { animation: rise 1.1s var(--ease) .55s both; }
/* ── hallways ── */
.hall {
position: relative;
z-index: 1;
width: 100%;
min-height: clamp(280px, 44vh, 500px);
margin: clamp(34px, 4.9vh, 56px) 0;
display: flex;
align-items: center;
background: linear-gradient(180deg,
transparent 0%,
rgba(0,0,0,.5) 28%,
#060405 52%,
#060405 100%);
}
.hall-path {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
transform: translateX(-50%);
z-index: 0;
background: linear-gradient(180deg,
transparent 0%,
rgba(201,162,78,.38) 12%,
rgba(201,162,78,.14) 55%,
rgba(201,162,78,.36) 94%,
transparent 100%);
}
.hall-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: clamp(56px, 10vh, 100px) 26px clamp(48px, 8vh, 80px);
text-align: center;
}
/* ── mobile-pass spacing trims, per hallway (2026-09) ──────────────
Override the shared .hall / .hall-inner rhythm for specific hallways
only. Scoped by aria-label so the markup stays untouched. */
/* H1 — too much air above & below the hairline: pull the room in and
shorten the visible vertical line (min-height drives .hall-path) */
.hall[aria-label="Hallway 1"] {
min-height: clamp(205px, 32vh, 370px);
margin-top: clamp(22px, 3.2vh, 38px);
margin-bottom: clamp(22px, 3.2vh, 38px);
}
.hall[aria-label="Hallway 1"] .hall-inner {
padding-top: clamp(38px, 6.8vh, 68px);
padding-bottom: clamp(32px, 5.4vh, 54px);
}
/* H2 / H4 / H7 — top-align the content (same fix as .hall--gate) so
.hall-inner's padding-top is a real 1:1 lever for space-above instead
of being half-absorbed by `align-items:center` + the tall min-height.
min-height is lowered too so the freed slack doesn't just dump below
the line and leave the hallway bottom-heavy. */
/* H2 — ~30% less above the line (with the .hl-ascend trim on top) */
.hall[aria-label="Hallway 2"] {
align-items: flex-start;
min-height: clamp(220px, 30vh, 340px);
margin-top: clamp(24px, 3.4vh, 40px);
}
.hall[aria-label="Hallway 2"] .hall-inner {
padding-top: clamp(34px, 6vh, 58px);
}
/* top + bottom hairlines matched — same length and same gap to the line,
so it sits centred between two equal ticks */
.hall[aria-label="Hallway 2"] .hl-ascend,
.hall[aria-label="Hallway 2"] .hl-descend {
height: clamp(40px, 5vh, 50px);
}
.hall[aria-label="Hallway 2"] .hl-ascend { margin-bottom: clamp(18px, 2.6vh, 26px); }
.hall[aria-label="Hallway 2"] .hl-descend { margin-top: clamp(18px, 2.6vh, 26px); }
/* H3 — foot pulled in toward S4; .s4-rule opening the section carries
the handoff now, so the long empty runway isn't needed */
.hall[aria-label="Hallway 3"] {
margin-bottom: clamp(18px, 2.8vh, 32px);
}
.hall[aria-label="Hallway 3"] .hall-inner {
padding-bottom: clamp(26px, 4.2vh, 46px);
}
/* H4 — ~20% less above "We are who we rehearse." */
.hall[aria-label="Hallway 4"] {
align-items: flex-start;
min-height: clamp(230px, 33vh, 380px);
}
.hall[aria-label="Hallway 4"] .hall-inner {
padding-top: clamp(46px, 8vh, 78px);
}
/* H7 — ~30% less above "Practice makes possibility." (also trims S7's
own padding-bottom below — the largest single piece of that gap) */
.hall[aria-label="Hallway 7"] {
align-items: flex-start;
min-height: clamp(230px, 33vh, 380px);
margin-top: clamp(24px, 3.4vh, 40px);
}
.hall[aria-label="Hallway 7"] .hall-inner {
padding-top: clamp(38px, 6.6vh, 66px);
}
/* Hallway 10 is a seam, not a room — it sits at the bottom of S10's
graded descent and carries the light back up into S11: drop the
min-height and the tall empty runway, keep just the line + CTA + a
short cue. Ground holds S10's near-black at the top, recovers to
#060405 into S11. */
.hall--seam {
min-height: 0;
/* no top margin — it rendered as a thin band of body #060405 between
S10's #030203 foot and this seam's #030203 top. Butt them together. */
margin: 0;
background: linear-gradient(180deg, #030203 0%, #030203 44%, #060405 100%);
}
.hall--seam .hall-inner {
padding-top: clamp(40px, 6.5vh, 68px);
padding-bottom: clamp(20px, 3vh, 30px);
}
/* ════════════════════════════
CLOSE ZONE — one photographic ground spanning Hallway 12 + Section 13
(same device as .unfold-zone). Hallway 12 breaks the imageless-breath
rule the other hallways keep: its content is a resurrection beat
(breath entering dry bones), so instead of a void it opens a lit
atmospheric field the eye is drawn toward — light gathering behind
the breath-spiral — and that field runs unbroken straight through the
close. One gold edge opens the whole stretch (S11's "new full-bleed
beat" device); no edge between H12 and S13 — they're one movement.
The overlay is luminous at the spiral, then a long ramp into
near-black by the final CTA so the gold button reads and the letter
column stays legible. */
.close-zone {
position: relative;
z-index: 2;
isolation: isolate;
overflow: hidden;
/* the dark run below the FAQ's coda lives here, outside the image
field, so the photo begins exactly at the gold edge */
margin-top: clamp(44px, 7.5vh, 92px);
}
.close-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* Shared close-zone ground — sun through cloud/haze (pexels-alexeydemidov
-10345219), on the Shopify CDN. Light source sits right of centre, just
below the hallway; the image self-darkens toward its foot so .close-
overlay's vertical ramp is eased right back. */
.close-photo {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center 30%;
filter: brightness(.74) saturate(.82) contrast(1.03);
opacity: .85;
}
/* four layers (top-painted first):
1. a luminous window behind the breath-spiral — a hole in the dark
2. a gentle left bias for S13's left-offset letter column
3. vertical: light at the spiral → long ramp to near-black at the CTA
4. a contrast floor eased in below H12 so the top window stays open */
.close-overlay {
position: absolute;
inset: 0;
background:
/* luminous window sits where THIS image's light already is —
right of centre, just below the hallway */
radial-gradient(ellipse 82% 46% at 56% 28%,
transparent 0%, transparent 52%, rgba(6,4,5,.36) 100%),
linear-gradient(90deg,
rgba(6,4,5,.28) 0%, rgba(6,4,5,.10) 42%, rgba(6,4,5,0) 72%, rgba(6,4,5,.05) 100%),
/* vertical ramp eased right back — the image darkens toward its own
foot, so this just nudges legibility, it doesn't force black */
linear-gradient(180deg,
rgba(6,4,5,.38) 0%,
rgba(6,4,5,.14) 10%,
rgba(6,4,5,.07) 22%,
rgba(6,4,5,.10) 32%,
rgba(6,4,5,.20) 44%,
rgba(6,4,5,.32) 58%,
rgba(6,4,5,.44) 72%,
rgba(6,4,5,.56) 86%,
rgba(6,4,5,.68) 100%),
linear-gradient(180deg,
rgba(6,4,5,0) 0%, rgba(6,4,5,0) 26%, rgba(8,5,4,.18) 42%, rgba(8,5,4,.30) 100%);
}
/* warm gather at the light — breath/ruach caught in it. Pulled down to
meet this image's source instead of floating above it */
.close-bloom {
position: absolute;
left: 54%;
top: 24%;
width: min(620px, 82%);
aspect-ratio: 3 / 2;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, rgba(226,191,106,.13) 0%, rgba(201,162,78,.04) 48%, transparent 74%);
mix-blend-mode: screen;
pointer-events: none;
}
/* H12 + S13 ride on the shared ground with no fill of their own */
.close-zone > .hall,
.close-zone > .s13 { position: relative; z-index: 1; }
/* .hall--gate — no background/edges of its own now; the gold edge that
opens the zone is a border-top on the hallway, sitting flush at the
top of the image field */
.hall--gate {
position: relative;
overflow: hidden;
/* content sits at the top so .hall-inner's padding-top is the real
control — the inherited flex `align-items:center` + a tall
min-height were centring the content and absorbing padding tweaks.
Lower min-height so the lit field is content-driven; any slack
lands below the lines, giving the image room before S13. */
align-items: flex-start;
min-height: clamp(230px, 32vh, 360px);
margin: 0;
/* no fill of its own — .hall's base transparent→#060405 gradient
would paint over the shared image and seam into S13 */
background: none;
border-top: 1px solid rgba(226,191,106,.72);
}
.hall--gate .hall-inner {
padding-top: clamp(43px, 6.7vh, 74px);
/* trailing runway slashed — the shared image carries the descent into
S13; the descend tick is gone, so S13's own top padding does the
landing breath */
padding-bottom: clamp(14px, 2.4vh, 26px);
}
/* the lines carry a soft dark halo so they hold over the lit field */
.hall--gate .hl-eyebrow,
.hall--gate .hl-invoke,
.hall--gate .hl-single {
text-shadow: 0 1px 20px rgba(6,4,5,.72), 0 1px 4px rgba(6,4,5,.5);
}
@media (max-width: 700px) {
.hall--gate { min-height: clamp(210px, 30vh, 300px); }
.close-photo { opacity: .74; }
.close-overlay {
background:
radial-gradient(ellipse 96% 40% at 50% 13%,
transparent 0%, transparent 46%, rgba(6,4,5,.52) 100%),
linear-gradient(180deg,
rgba(6,4,5,.46) 0%,
rgba(6,4,5,.2) 12%,
rgba(6,4,5,.18) 24%,
rgba(6,4,5,.34) 38%,
rgba(6,4,5,.54) 54%,
rgba(6,4,5,.7) 74%,
#060405 94%,
#060405 100%);
}
}
.hl-single {
font-family: var(--font-d);
font-style: italic;
font-weight: 500;
font-size: clamp(22px, 3.2vw, 38px);
line-height: 1.38;
color: rgba(245,242,237,.92);
margin: 0;
letter-spacing: .01em;
text-wrap: pretty;
}
/* the pivot line gets more weight than its siblings — this is the hinge into the offer */
.hl-single--impact {
font-size: clamp(26px, 3.8vw, 46px);
color: rgba(245,242,237,.97);
}
/* in-line emphasis inside a hallway line — stays white (the gold sheen
is reserved for specific thematic words), just lifted to full-strength
cream so the phrase lands */
.hl-single em {
font-style: italic;
color: rgba(245,242,237,1);
}
/* the one hallway that isn't a pivot — a breath between the offer and
the explanatory stretch. Bodoni Moda italic like every other hallway
line now: it has its own black room, and the testimonial above is no
longer Bodoni, so the old "third serif on a shared lit ground" problem
is gone. Held a step down from the --impact pivots in size and measure
so it still reads as an exhale rather than a proclamation. */
.hl-single--breath {
font-size: clamp(20px, 2.7vw, 30px);
max-width: 22em;
margin-left: auto;
margin-right: auto;
}
/* marks the thematic word — persists gold, with a slow, low-contrast gleam passing through */
.hl-gold {
background: linear-gradient(110deg,
var(--gold-light) 0%,
var(--gold-light) 42%,
#F4E3B8 50%,
var(--gold-light) 58%,
var(--gold-light) 100%
);
background-size: 300% 100%;
background-position: 200% 0;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: hl-sheen 9s ease-in-out infinite;
}
@keyframes hl-sheen {
0% { background-position: 100% 0; }
100% { background-position: 0% 0; }
}
.hl-descend {
width: 1px;
height: 58px;
margin: clamp(28px, 4vh, 48px) auto 0;
background: linear-gradient(180deg, rgba(201,162,78,.46), transparent);
}
.hl-ascend {
width: 1px;
/* H2's length + gap are set in the per-hallway block (matched to its
.hl-descend); this stays the shared default */
height: clamp(52px,7vh,80px);
margin: 0 auto clamp(20px,3vh,32px);
background: linear-gradient(180deg, transparent, rgba(201,162,78,.46));
}
.hl-bloom-wrap {
margin-top: clamp(10px,1.5vh,18px);
}
.hl-bloom {
width: 100%;
height: 180px;
background: radial-gradient(ellipse 55% 100% at 50% 100%,
rgba(201,162,78,.48) 0%,
rgba(201,162,78,.20) 36%,
rgba(201,162,78,.05) 68%,
transparent 100%);
pointer-events: none;
}
.hl-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 1.1s cubic-bezier(.4,0,.15,1),
transform 1.1s cubic-bezier(.4,0,.15,1);
}
.hl-reveal.in {
opacity: 1;
transform: none;
}
/* ── mid-page CTA (secondary) ──────────────────────────────────────
Sits inside a hallway in place of the descend tick: a pivot line
resolves into a quiet invitation, not just a scroll cue. An
underlined gold text-link, not a button — the two solid gold buttons
(Enrollment, S13) stay the primary asks; this is a "you can step in
right here" nudge in the same label family, for the long run between
them. No price line — that read as sales copy in a contemplative
space. Reused by H7 (after the method) and H10 (after testimonials). */
.hl-cta {
margin-top: clamp(14px, 2.2vh, 26px);
display: flex;
justify-content: center;
}
.hl-cta-btn {
display: inline-flex;
align-items: center;
gap: .5em;
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(12.5px, 1.25vw, 14.5px);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-light);
text-decoration: none;
white-space: nowrap;
transition: color .25s var(--ease);
}
/* the rule lives on the label only, so the arrow sits clear of it */
.hl-cta-label {
padding-bottom: 4px;
border-bottom: 1px solid rgba(226,191,106,.42);
transition: border-color .25s var(--ease);
}
.hl-cta-btn:hover,
.hl-cta-btn:focus-visible { color: #F4E3B8; }
.hl-cta-btn:hover .hl-cta-label,
.hl-cta-btn:focus-visible .hl-cta-label { border-color: rgba(226,191,106,.85); }
.hl-cta-arr { transition: transform .25s; }
.hl-cta-btn:hover .hl-cta-arr,
.hl-cta-btn:focus-visible .hl-cta-arr { transform: translateX(3px); }
/* a shortened scroll cue still follows — there's page below the nudge */
.hl-cta + .hl-descend { margin-top: clamp(24px,3.6vh,40px); }
/* ════════════════════════════
SECTION 2
════════════════════════════ */
.s2 {
position: relative;
overflow: hidden;
}
/* bg layers — photo + iris gradient overlay */
.s2-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.s2-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 50%;
filter: brightness(.64) saturate(.9);
}
/* iris: solid at top (seams from hallway) → opens mid-section → closes */
.s2-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
#060405 0%,
#060405 9%,
rgba(6,4,5,.66) 26%,
rgba(6,4,5,.40) 44%,
rgba(6,4,5,.40) 58%,
rgba(6,4,5,.68) 76%,
#060405 93%,
#060405 100%
);
}
/* soft scrim behind the reading column so copy stays legible over the bright
cloud edges, without flattening the rest of the frame */
.s2-col::before {
content: "";
position: absolute;
inset: -12% -18%;
z-index: -1;
background: linear-gradient(180deg,
transparent 0%,
rgba(6,4,5,.30) 12%,
rgba(6,4,5,.50) 42%,
rgba(6,4,5,.44) 62%,
rgba(6,4,5,.20) 85%,
transparent 100%);
-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%);
pointer-events: none;
}
.s2-col {
position: relative;
z-index: 1;
max-width: 620px;
margin: 0 auto;
padding: clamp(52px,8vh,100px) clamp(24px,5vw,48px) clamp(22px,3.5vh,42px);
}
.s2-h2 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(30px,4vw,56px);
line-height: 1.1;
letter-spacing: .002em;
color: rgba(245,242,237,.97);
text-align: center;
text-wrap: balance;
margin-bottom: clamp(32px,5vh,52px);
}
.s2-body {
font-size: clamp(15px,1.4vw,17px);
line-height: 1.72;
color: rgba(245,242,237,.84);
text-wrap: pretty;
margin-bottom: clamp(18px,2.6vh,26px);
}
.s2-body:last-child { margin-bottom: 0; }
.s2-body em { font-style: italic; color: rgba(245,242,237,.97); }
.s2-pivot {
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(22px,2.8vw,34px);
line-height: 1.28;
color: rgba(245,242,237,.96);
text-align: center;
margin: clamp(28px,4.5vh,52px) 0;
}
/* ════════════════════════════
SECTION 3
════════════════════════════ */
.s3 {
position: relative;
overflow: hidden;
z-index: 2;
margin-top: 0;
border-top: 1px solid rgba(201,162,78,.08); /* thin gold rule marks the boundary from Hallway 2 */
}
.s3-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.s3-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 40%;
/* no CSS filter — the brightness(.58) saturate(.72) grade is baked
into the asset (…-darkened-compressed) */
}
/* soft dark cap at the seam → photo lifts in within the first ~14% → closes */
.s3-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(6,4,5,.90) 0%,
rgba(6,4,5,.74) 4%,
rgba(6,4,5,.58) 9%,
rgba(6,4,5,.44) 15%,
rgba(6,4,5,.34) 22%,
rgba(6,4,5,.26) 31%,
rgba(6,4,5,.22) 40%,
rgba(6,4,5,.20) 50%,
rgba(6,4,5,.26) 60%,
rgba(6,4,5,.38) 70%,
rgba(6,4,5,.56) 80%,
rgba(6,4,5,.80) 90%,
#060405 97%,
#060405 100%
);
}
.s3-col {
position: relative;
z-index: 1;
max-width: 820px;
margin: 0 auto;
padding: clamp(90px,14vh,160px) clamp(24px,5vw,48px) clamp(56px,9vh,110px);
}
.s3-h2 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(30px,4vw,56px);
line-height: 1.1;
letter-spacing: .002em;
color: rgba(245,242,237,.97);
text-align: center;
text-wrap: balance;
margin-bottom: clamp(56px,8vh,88px);
}
/* ── Progression cards ── */
.s3-progression {
display: flex;
align-items: flex-start;
margin-bottom: clamp(28px,4vh,44px);
}
.s3-card {
flex: 1;
min-width: 0;
padding: clamp(16px,2.2vh,24px) clamp(14px,1.8vw,20px);
border-top: 1px solid rgba(201,162,78,.13);
background: transparent;
}
.s3-card-label {
font-family: var(--font-b);
font-size: clamp(10px,.9vw,11.5px);
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(201,162,78,.62);
margin-bottom: clamp(8px,1.2vh,12px);
}
.s3-card-body {
font-family: var(--font-b);
font-size: clamp(14.5px,1.3vw,17px);
line-height: 1.56;
color: rgba(245,242,237,.68);
}
.s3-arrow {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
align-self: flex-start;
padding: clamp(18px,2.5vh,28px) clamp(7px,0.9vw,13px) 0;
color: rgba(201,162,78,.36);
font-size: clamp(12px,1.2vw,17px);
}
/* ── Prose stanza: escalating accumulation ── */
.s3-sep {
width: 1px;
height: clamp(36px,5vh,52px);
background: linear-gradient(180deg, rgba(201,162,78,.36), rgba(201,162,78,.10));
margin: 0 auto clamp(24px,3.5vh,36px);
}
.s3-stanza {
max-width: 580px;
margin: 0 auto;
text-align: center;
}
.s3-rehearse {
font-family: var(--font-b);
line-height: 1.74;
text-wrap: pretty;
}
.s3-r1, .s3-r2 {
font-size: clamp(14.5px,1.35vw,16.5px);
color: rgba(245,242,237,.62);
margin-bottom: clamp(5px,0.8vh,8px);
}
.s3-r3 {
font-size: clamp(14.5px,1.35vw,16.5px);
color: rgba(245,242,237,.62);
margin-bottom: clamp(28px,4vh,40px);
}
.s3-becomes {
font-family: var(--font-d);
font-style: italic;
font-weight: 500;
font-size: clamp(24px,3vw,38px);
line-height: 1.24;
color: rgba(245,242,237,.97);
margin-bottom: clamp(16px,2.4vh,24px);
text-wrap: balance;
}
.s3-mistake {
font-family: var(--font-b);
font-style: normal;
font-size: clamp(13px,1.1vw,14.5px);
line-height: 1.5;
color: rgba(245,242,237,.28);
margin-top: clamp(10px,1.5vh,14px);
letter-spacing: .01em;
}
/* ── Hallway 3 — centered, matching the H1/H2 family ── */
/* gold hairline + breathing bloom, echoing the close-seam device */
.h3-seam {
position: relative;
width: 1px;
height: clamp(80px,11.25vh,130px);
margin: 0 auto clamp(46px,6.5vh,68px);
background: linear-gradient(180deg, transparent 0%, rgba(201,162,78,.14) 30%, rgba(226,191,106,.75) 100%);
}
.h3-seam::after {
content: "";
position: absolute;
left: 50%;
bottom: -23px;
width: 46px;
height: 46px;
margin-left: -23px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(226,191,106,.40) 0%,
rgba(220,180,100,.24) 28%,
rgba(201,162,78,.12) 50%,
rgba(201,162,78,.04) 70%,
transparent 100%);
animation: softglow 5.2s ease-in-out infinite;
}
@keyframes softglow {
0%, 100% { transform: scale(1); opacity: .5; }
50% { transform: scale(1.22); opacity: .95; }
}
/* H3 ends on its line — the handoff into S4 is carried by .s4-rule, a
quiet short gold rule opening S4 (the .s10-rule device, dialled down),
not a hairline that would echo and flatten H3's own top .h3-seam glow. */
.s4-rule {
position: relative;
z-index: 1;
width: 34px;
height: 1px;
background: var(--gold-light);
opacity: .42;
margin: 0 auto clamp(24px, 3.2vh, 34px);
}
/* desktop: force vertical overflow so background-position Y actually works */
@media (min-width: 681px) {
.s1-photo {
background-size: auto 170%;
background-position: center 60%;
}
}
@media (max-width: 680px) {
.hall {
min-height: clamp(200px, 34vh, 320px);
}
.hall--seam { min-height: 0; }
.hall-inner {
padding-top: clamp(40px, 7vh, 72px);
padding-bottom: clamp(32px, 6vh, 60px);
}
.hall--seam .hall-inner {
padding-top: clamp(34px, 6vh, 56px);
padding-bottom: clamp(18px, 3vh, 26px);
}
.s3-progression {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.s3-arrow {
display: none;
}
.s3-card {
padding: clamp(12px,1.6vh,16px) clamp(14px,4vw,24px);
}
.s3-col {
padding-bottom: clamp(28px,4.5vh,55px);
}
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; opacity: 1 !important; transform: none !important; }
/* keep the FAQ plus/× glyph correct even with transforms killed */
.s12-item.is-open .s12-icon::after { transform: translateX(-50%) rotate(90deg) !important; }
}
/* ════════════════════════════
SECTION 4 — A new life requires more than knowing what you want
════════════════════════════ */
.s4 {
position: relative;
z-index: 2;
overflow: hidden;
background: #060405;
/* .s4-rule opens the section just above the h2; this is the run-up
from H3 to that rule */
padding: clamp(72px,10vh,116px) 0 clamp(40px,6vh,76px);
}
/* desktop — more air in the H3→S4 seam than the phone value (split
between H3's foot and S4's head so it stays balanced) */
@media (min-width: 761px) {
.hall[aria-label="Hallway 3"] { margin-bottom: clamp(30px, 4vh, 52px); }
.s4 { padding-top: clamp(92px, 12vh, 132px); }
}
/* bg layer — ambient gold light particles, drifting for depth and movement */
.s4-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.s4-particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* fades particles into the ground before they hit the top edge */
.s4-fade-top {
position: absolute;
top: 0; left: 0; right: 0;
height: clamp(90px,16vh,170px);
background: linear-gradient(180deg, #060405 0%, rgba(6,4,5,.85) 40%, transparent 100%);
}
/* left-anchored headline, then a full-width diptych — the page's first
true side-by-side. The gap between the two columns is the argument. */
.s4-inner {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto;
padding: 0 clamp(24px,5vw,48px) 0 clamp(40px,5.5vw,72px);
}
.s4-h2 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(28px,3.6vw,46px);
line-height: 1.16;
letter-spacing: .002em;
color: rgba(245,242,237,.97);
text-align: center;
text-wrap: balance;
max-width: 820px;
margin: 0 auto clamp(40px,6vh,68px);
}
/* the diptych — knowing what you want | knowing how to live it */
/* two frosted panes — a heavier gold line catches the top edge, a faint
graded fill lifts them off the black. Different heights (one holds more
than the other) keep it a pair of objects rather than a grid. */
.s4-diptych {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 clamp(16px,2.2vw,30px);
align-items: start;
}
.s4-side {
border-top: 1px solid rgba(201,162,78,.34);
background: linear-gradient(180deg,
rgba(245,242,237,.05) 0%,
rgba(245,242,237,.022) 42%,
rgba(245,242,237,.012) 100%);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
padding: clamp(22px,3.4vh,32px) clamp(22px,2.8vw,32px) clamp(26px,4vh,38px);
}
.s4-label {
font-family: var(--font-b);
font-size: clamp(10px,.9vw,11.5px);
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(201,162,78,.60);
margin-bottom: clamp(12px,1.8vh,18px);
}
.s4-side p {
font-family: var(--font-b);
font-size: clamp(14.5px,1.35vw,16.5px);
line-height: 1.66;
text-wrap: pretty;
}
.s4-side p:not(.s4-label) { color: rgba(245,242,237,.72); }
.s4-side p:not(.s4-label) + p { margin-top: clamp(14px,2.2vh,22px); }
/* testing: the two parallel phrases in the LIVED pane lifted by weight +
brightness only — no gold, which would over-mark this quiet pane */
.s4-side p strong {
font-weight: 600;
color: rgba(245,242,237,.92);
}
@media (max-width: 760px) {
.s4-inner { padding: 0 clamp(24px,5vw,40px); }
.s4-diptych {
grid-template-columns: 1fr;
gap: clamp(28px,4vh,40px) 0;
}
.s4-diptych::before { display: none; }
}
/* ════════════════════════════
SECTION 9 — Founder's Note
Reworked twice: from the "Hey, I'm Rose" headshot-beside-copy block into
a signed statement of purpose, then — the copy running long as one
column — into a diptych. Full-bleed photo left, text right on the tuned
image ground. Gold threads on all three inner edges: top, foot, and the
vertical seam between the panes (the S4 diptych divider + S3/S5 hard-
gold-edge devices). Left pane is a LIFESTYLE frame, not a portrait —
the founder's face stays only in the small gold-ring disc in the
sign-off, at email-signature scale.
════════════════════════════ */
.s9 {
position: relative;
z-index: 2;
overflow: hidden;
background: #060405;
display: grid;
grid-template-columns: clamp(360px, 45%, 580px) 1fr;
/* matching warm gold threads top and foot — the panel runs hard to both
edges (S3/S5 hard-gold-edge device), a held inset between two rooms */
border-top: 1px solid rgba(226,191,106,.72);
border-bottom: 1px solid rgba(226,191,106,.72);
}
/* left pane — full-bleed LIFESTYLE image, handled like every other ground
on the page (S5/S10/enroll): absolute-cover crop, no framing. The grid
cell stretches to the text column's height, so a tall vertical slice is
the intended read — an atmospheric/environment frame, not a face. Gold
seam + a soft inward shadow bed it against the text side. */
.s9-photo-col {
position: relative;
z-index: 1;
border-right: 1px solid rgba(226,191,106,.5);
background-size: cover;
background-position: center;
/* coming in a touch hot — knock it back with brightness only, the
colour grade is already right */
filter: brightness(.84);
box-shadow: inset -60px 0 80px -50px rgba(6,4,5,.7);
}
/* full-bleed textural ground — heavily dimmed + desaturated, atmosphere
not scenery (same handling the retired .s10 texture used). Rose will
regrade the source. */
.s9-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.s9-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
/* image is pre-graded by Rose — no CSS filter, full opacity, so nothing
mixes the warm #060405 base back in. Add a filter here only to push
it further. */
}
/* a light flat neutral veil — just enough to seat the text; pure black,
not the warm rgba(6,4,5) used elsewhere, so it doesn't tint the image */
.s9-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.60);
}
/* faint warm glow rising from the foot — lights the signature like a low
candle, same screen-blend trick as .enroll-footlift. Kept low so it
doesn't tint the image; raise the alphas to warm the sign-off more. */
.s9-bloom {
position: absolute;
left: 0; right: 0; bottom: 0;
height: min(240px, 36%);
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
background: linear-gradient(0deg,
rgba(140,102,52,.16) 0%,
rgba(112,82,42,.07) 38%,
rgba(82,60,32,.02) 70%,
transparent 100%);
}
.s9-inner {
position: relative;
z-index: 2;
/* fills ≥80% of the right column at any width, centred in it */
max-width: max(760px, 80%);
margin: 0 auto;
padding: clamp(56px,9vh,100px) clamp(24px,4vw,52px) clamp(64px,10vh,112px);
text-align: left;
}
/* short gold rule — a quiet opener, same device as .s7-rule */
.s9-rule {
width: 40px;
height: 1px;
background: var(--gold-light);
opacity: .9;
margin-bottom: clamp(18px,2.8vh,26px);
}
.s9-eyebrow {
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(10.5px,1vw,11.5px);
letter-spacing: .26em;
text-transform: uppercase;
color: rgba(226,191,106,.95);
margin-bottom: clamp(22px,3.4vh,34px);
}
/* the section's display line — the retired "Life changes when we change
ourselves" hallway line, brought back here as the heading. Bodoni
italic, sized to fill the full measure like the body below it rather
than balance-wrapping narrow. */
.s9-head {
font-family: var(--font-d);
font-style: italic;
font-weight: 500;
font-size: clamp(20px,2.4vw,27px);
line-height: 1.34;
letter-spacing: .004em;
color: rgba(245,242,237,.95);
margin-bottom: clamp(28px,4.2vh,40px);
}
.s9-body {
font-size: clamp(15px,1.4vw,17px);
line-height: 1.64;
color: rgba(245,242,237,.72);
text-wrap: pretty;
margin-bottom: clamp(16px,2.2vh,22px);
}
.s9-body em { font-style: italic; color: rgba(245,242,237,.92); }
/* the crux question the whole note turns on — lifted out of the body run
by brightness + air, kept roman Jost so it doesn't read as a second
wineskin (that beat stays the Bodoni-italic turn). Emphasis on a
different axis from the wineskin, so the two don't compete. */
.s9-ask {
font-size: clamp(16px,1.55vw,19px);
line-height: 1.56;
color: rgba(245,242,237,.94);
text-wrap: pretty;
margin: clamp(24px,3.6vh,32px) 0;
}
.s9-ask em { font-style: italic; }
/* the scriptural anchor — set as a quiet blockquote: a thin gold thread
at the left, italic, cream like the rest of the copy. A subtle lift,
not a gold proclamation. */
.s9-wineskin {
font-family: var(--font-d);
font-style: italic;
font-weight: 500;
font-size: clamp(17px,1.9vw,22px);
line-height: 1.42;
color: rgba(245,242,237,.95);
margin: clamp(24px,3.8vh,34px) 0;
padding-left: clamp(16px,2vw,22px);
border-left: 1px solid rgba(201,162,78,.6);
}
/* closing mission — slightly more present than body */
.s9-close {
font-size: clamp(15px,1.45vw,17.5px);
line-height: 1.62;
color: rgba(245,242,237,.88);
text-wrap: pretty;
}
/* the only first-person beat — a signature lockup. The small gold-ringed
disc (rhymes with the .s7 numeral medallions) sits beside the name in
the same wide gold caps as the testimonial attributions (.enroll-attr
/ .s10-quote-attr). The left pane is a lifestyle frame, not a portrait, so
this disc is the one place the founder's face appears. The warm
.s9-bloom lights this row. */
.s9-sign {
margin-top: clamp(28px,4.4vh,40px);
display: flex;
align-items: center;
gap: clamp(14px,2vw,18px);
}
/* signature disc — wraps the photo so the outer ring can carry a slow
gold gleam (a pseudo-element ring; ![]()
can't hold one itself) */
.s9-sign-disc {
position: relative;
flex: none;
width: clamp(60px,8vw,76px);
height: clamp(60px,8vw,76px);
border-radius: 50%;
}
/* the outer ring — a gold gleam travelling around it once every 14s.
Replaces the old static outline. Masked to a hairline band; freezes
under prefers-reduced-motion via the global rule. */
.s9-sign-disc::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
background: conic-gradient(from 0deg,
rgba(226,191,106,0) 0deg,
rgba(226,191,106,.14) 55deg,
rgba(244,227,184,.95) 120deg,
rgba(226,191,106,.14) 185deg,
rgba(226,191,106,0) 300deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
animation: s9-ring-turn 14s linear infinite;
pointer-events: none;
}
@keyframes s9-ring-turn { to { transform: rotate(1turn); } }
.s9-sign-photo {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
/* opaque disc + gold hairline, matched to the .s7-num medallion treatment */
border: 1px solid rgba(226,191,106,.82);
background: #0c0a0b;
}
.s9-sign-text {
display: flex;
flex-direction: column;
gap: clamp(3px,.7vh,5px);
}
.s9-sign-name {
font-family: var(--font-b);
font-weight: 400;
font-size: clamp(11.5px,1.15vw,13px);
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(226,191,106,.92);
}
/* optional whisper line under the name — a credential or role. Delete the
element to drop it. */
.s9-sign-role {
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(11px,1.05vw,12.5px);
letter-spacing: .04em;
color: rgba(245,242,237,.64);
}
@media (max-width: 760px) {
/* diptych collapses — photo becomes a band on top, text below */
.s9 { grid-template-columns: 1fr; }
.s9-photo-col {
min-height: clamp(280px, 46vh, 420px);
border-right: none;
border-bottom: 1px solid rgba(226,191,106,.5);
background-position: center 18%;
box-shadow: inset 0 -60px 70px -50px rgba(6,4,5,.7);
}
.s9-inner { padding: clamp(44px,7vh,64px) clamp(22px,6vw,34px) clamp(48px,8vh,72px); }
}
/* ════════════════════════════
SECTION 5 — The Money–Body Code is where you rehearse another
One portrait photo spans the whole section. Lead + headline anchor
low-left of the hero viewport; Part B copy continues below on the
same left axis. A left→right scrim beds all the text while her figure
and the linen carry the right side down. No bottom fade — the photo
runs full-strength to a hard edge at the gold rule.
════════════════════════════ */
.s5 {
position: relative;
overflow: hidden;
z-index: 2;
background: #060405;
/* hard gold boundary rule at the foot of the section — same device as
S3's top edge, dialed up from a hairline to a visible line */
border-bottom: 1px solid rgba(201,162,78,.5);
}
/* bg spans the whole section now — the portrait image carries down the
right side through Part B, left column stays scrimmed for the text */
.s5-bg {
position: absolute;
inset: 0;
z-index: 0;
}
/* portrait shot carried full-section — she reads on the right, her lower
body + the linen puddle fill the frame behind Part B */
.s5-photo {
position: absolute;
inset: 0;
background-repeat: no-repeat;
/* zoomed past full-width so there's slack to push her right;
bump the size to zoom more, drop the X% toward 0 to shift her further right */
background-size: 118% auto;
background-position: 26% 20%;
}
/* two passes: a left→right scrim that beds every line of text (hero and
Part B both hang off the left edge), then a soft cap up top for
atmosphere. No bottom fade — the photo runs full-strength to a hard
edge at the gold rule instead of dissolving into the next section */
.s5-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
rgba(6,4,5,.95) 0%,
rgba(6,4,5,.90) 28%,
rgba(6,4,5,.62) 48%,
rgba(6,4,5,.26) 70%,
rgba(6,4,5,.06) 100%
),
linear-gradient(180deg,
rgba(6,4,5,.34) 0%,
rgba(6,4,5,.16) 20%,
rgba(6,4,5,0) 40%,
rgba(6,4,5,0) 100%
);
}
.s5-content { position: relative; z-index: 1; }
/* ── hero: lead + headline anchored low-left, headroom kept above for
her face ── */
.s5-hero {
position: relative;
/* was 100vh — with Hallway 4 already above it, a full-viewport hero
left an entire empty fold of just photo before this copy appeared.
Tall enough to keep the portrait present, short enough that the
pivot line lands inside the first screen. */
min-height: clamp(460px, 66vh, 760px);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
text-align: left;
padding: clamp(52px,7vh,84px) clamp(28px,6vw,80px) clamp(28px,4vh,48px);
gap: clamp(16px,2.4vh,22px);
}
.s5-lead {
font-family: var(--font-b);
font-weight: 400;
font-size: clamp(15px,1.6vw,18px);
letter-spacing: .04em;
color: rgba(226,191,106,.82); /* muted --gold-light: warm, catches the eye, different register from the cream headline */
text-shadow: 0 1px 18px rgba(0,0,0,.6);
}
.s5-h2 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(32px,4.3vw,52px);
line-height: 1.14;
letter-spacing: .002em;
color: var(--cream);
text-wrap: balance;
/* narrow column, flush left: the hero sits higher now, so a wide
headline ran across her face. Keep it stacked over the left scrim. */
max-width: min(46vw, 520px);
text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.s5-lead { max-width: min(64vw, 620px); }
/* ── Part B: rest of the copy — left-aligned on the hero's axis,
flows below over the extended photo ── */
.s5-partb {
max-width: min(92vw, 660px);
margin: 0;
padding: clamp(12px,1.8vh,20px) clamp(28px,6vw,80px) clamp(60px,9vh,110px);
text-align: left;
}
.s5-partb p { text-shadow: 0 1px 20px rgba(6,4,5,.7); }
/* stepped opening — three imperatives on their own lines, a slowing
descent inward before the paragraph resolves */
.s5-steps {
margin-bottom: clamp(18px,2.6vh,26px);
}
.s5-steps p {
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(15px,1.4vw,17px);
line-height: 1.5;
letter-spacing: .03em;
color: rgba(245,242,237,.72);
}
.s5-steps p + p {
margin-top: clamp(7px,1.1vh,11px);
}
.s5-body {
font-size: clamp(15px,1.4vw,17px);
line-height: 1.76;
color: rgba(245,242,237,.82);
text-wrap: pretty;
margin-bottom: clamp(22px,3.2vh,32px);
}
.s5-triad {
margin: 0 0 clamp(22px,3.2vh,32px);
}
.s5-triad p {
font-family: var(--font-d);
font-style: italic;
font-weight: 500;
font-size: clamp(17px,1.7vw,21px);
line-height: 1.6;
color: rgba(245,242,237,.90);
}
.s5-enough {
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(22px,2.6vw,32px);
line-height: 1.3;
color: var(--gold-light);
margin: clamp(26px,4vh,42px) 0;
}
.s5-close {
font-size: clamp(15px,1.4vw,17px);
line-height: 1.76;
color: rgba(245,242,237,.84);
text-wrap: pretty;
}
.s5-close strong { font-weight: 500; color: rgba(245,242,237,.98); }
/* one testimonial closes Part B — the concrete payoff placed right
under the imaginal claim ("your body remembers"), so the poetry
earns its keep. Jost body on a left gold thread, — NAME in wide gold
caps (S10 quote register, not Bodoni — the serif italic was a slog).
set apart from the closing line by space alone — S5 has no rules or
dividers anywhere, emphasis is carried by vertical rhythm (see
.s5-enough). The gap is noticeably wider than the paragraph rhythm
above it, so the eye reads a new movement, not the next line. */
.s5-quote {
margin: clamp(30px,4.6vh,52px) 0 0;
padding-left: clamp(16px,2vw,22px);
border-left: 1.5px solid rgba(201,162,78,.4);
}
.s5-quote blockquote {
margin: 0;
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(15px,1.5vw,17.5px);
line-height: 1.62;
color: rgba(245,242,237,.9);
text-wrap: pretty;
text-shadow: 0 1px 20px rgba(6,4,5,.7);
}
.s5-quote figcaption {
margin-top: clamp(12px,1.8vh,16px);
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(10.5px,1vw,11.5px);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold-light);
text-shadow: 0 1px 12px rgba(6,4,5,.6);
}
@media (max-width: 680px) {
/* mobile is a different structure: photo is a fixed band at the top,
all the text sits on solid black underneath — no overlay to manage */
.s5 { margin-top: clamp(-44px, -6vh, -28px); }
.s5-bg {
position: relative;
inset: auto;
height: 54vh;
min-height: 360px;
}
.s5-photo {
background-size: cover;
background-position: 50% 30%;
}
.s5-overlay { display: none; }
.s5-hero {
min-height: 0;
justify-content: flex-start;
padding: clamp(30px,5vh,46px) clamp(20px,5vw,32px) 0;
}
.s5-h2 { max-width: 100%; font-size: clamp(30px,7.4vw,40px); }
.s5-lead { max-width: 100%; }
.s5-partb { padding: clamp(16px,2.6vh,24px) clamp(20px,5vw,32px) clamp(48px,7vh,72px); }
.s5-partb p { text-shadow: none; }
.s5-quote blockquote, .s5-quote figcaption { text-shadow: none; }
}
/* ════════════════════════════
UNFOLD ZONE — one photographic ground behind Section 7 only (Hallway
6b is its own black room above the zone now, restoring a light→dark→
light beat at the one seam that was two lit grounds back to back).
The second half of the page turns lighter: the first half is
deliberately dark and moody, and from the offer onward the page
brings in more light and colour. The image runs behind the five
movements, bedded by a gentler scrim than the first-half sections use
(left-heavy, so the left-aligned movement text stays legible while
the right of the frame opens up).
════════════════════════════ */
.unfold-zone {
position: relative;
isolation: isolate;
overflow: hidden;
/* hard gold edge into the zone — the page's device for a clean cut
where there's no natural tonal seam (S5 foot, S9, S11, .hall--gate).
The photo has no dark top to dissolve from, so it opens on this line
at full strength rather than out of a faked black scrim. */
border-top: 1px solid rgba(226,191,106,.72);
}
.unfold-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.unfold-photo {
position: absolute;
inset: 0;
/* Rose's color-treated grade — no CSS filter on top; the overlay
below handles text legibility only */
background-size: cover;
background-position: center;
}
/* three layers (top-painted first):
1. a light left bed for the movement text
2. bottom seam only — the photo starts clear at the hard gold edge up
top (no faked dark reveal) and ramps into H7's black at the foot,
transparent through the middle
3. one full-bleed contrast floor across the whole frame, so cream
text separates even over the warm bokeh (the grade's yellows sit
close to the page's own cream/gold, so the middle needs a wash,
not just a left scrim) — it also carries the h2 up top now that
there's no dark reveal there. Warm-tinted (8,5,4) so it doesn't
mute the treated image's warmth. */
.unfold-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
rgba(8,5,4,.22) 0%,
rgba(8,5,4,.10) 60%,
rgba(8,5,4,.04) 100%),
/* vertical: no dark top — the photo opens at full strength under the
hard gold edge (this image has no compositional shadow there to
fade from). Clean through the header + first movement; then the
long unbroken ramp into shadow as the leaves come in, straight
into H7's black */
linear-gradient(180deg,
rgba(6,4,5,0) 0%,
rgba(6,4,5,0) 30%,
rgba(6,4,5,.14) 38%,
rgba(6,4,5,.34) 48%,
rgba(6,4,5,.54) 62%,
rgba(6,4,5,.66) 78%,
rgba(6,4,5,.72) 92%,
#060405 100%),
/* contrast floor — a flat wash carrying cream text over the bokeh,
including the h2 up top */
linear-gradient(180deg,
rgba(8,5,4,.32) 0%,
rgba(8,5,4,.52) 14%,
rgba(8,5,4,.52) 100%);
}
/* phones have no left/right split to lean on — the same flat floor,
a touch firmer, plus the same lower ramp into shadow */
@media (max-width: 620px) {
.unfold-overlay {
background:
linear-gradient(180deg,
rgba(6,4,5,0) 0%,
rgba(6,4,5,0) 30%,
rgba(6,4,5,.16) 38%,
rgba(6,4,5,.36) 48%,
rgba(6,4,5,.56) 62%,
rgba(6,4,5,.68) 78%,
rgba(6,4,5,.74) 92%,
#060405 100%),
linear-gradient(180deg,
rgba(8,5,4,.38) 0%,
rgba(8,5,4,.58) 14%,
rgba(8,5,4,.58) 100%);
}
}
/* S7 rides on top of the shared photo ground with no opaque fill of its
own. Its own padding (72–124px top) is the section run-up now that
Hallway 6b is a full black room above the zone, not a short in-zone
breath — so no override here beyond the stacking context. */
.unfold-zone .s7 { position: relative; z-index: 1; }
/* ════════════════════════════
SECTION 7 — The work unfolds in five movements
The page's turning point: after the offer and the demo, this is the
choreography of the practice. A+B rework — one continuous gold rail
down the left with the movement numerals set on it, replacing five
stacked full-width dividers. Each movement's body leans a little
further from the spine as the practice descends — "unfolds" made
literal. Space is the separator; a short gold rule (S8b vocabulary)
sits under each title. Ground: the shared .unfold-zone photo.
════════════════════════════ */
.s7 {
position: relative;
overflow: hidden;
background: transparent;
/* a fuller run-up below the hard gold edge before the header lands;
foot trimmed ~30% — it was the biggest slice of the gap above
Hallway 7's "Practice makes possibility." line */
padding: clamp(96px,12vh,152px) 0 clamp(60px,8.5vh,100px);
}
.s7-inner {
position: relative;
z-index: 1;
max-width: 1060px;
margin: 0 auto;
padding: 0 clamp(24px,5vw,48px);
}
/* held to roughly the hallway breath line's measure above it (~660px),
so the header steps down cleanly from that width rather than stretching
the full inner column — wraps to two balanced centred lines on desktop */
.s7-h2 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(30px,4vw,56px);
line-height: 1.14;
letter-spacing: .002em;
color: rgba(245,242,237,.97);
text-align: center;
text-wrap: balance;
max-width: 660px;
margin: 0 auto clamp(60px,9vh,96px);
}
/* the movements keep a tight reading measure, centred under the title */
.s7-movements {
position: relative;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
/* the five movements hang off one continuous gold rail — a single
vertical hairline (echoing .hall-path) instead of five stacked
dividers. It is the only connective line in the section.
rail sits this far in from the movements' left edge; each .s7-movement
carries the matching left padding so its (positioned) box shares that
same left edge — the numeral then pins to the rail with one value */
.s7-movements::before {
content: "";
position: absolute;
top: clamp(4px,1vh,10px);
bottom: clamp(4px,1vh,10px);
left: clamp(14px,2.4vw,26px);
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
rgba(226,191,106,.55) 7%,
rgba(226,191,106,.28) 52%,
rgba(226,191,106,.55) 93%,
transparent 100%);
/* soft dark halo so the hairline still separates from the lighter
photo ground behind the zone */
box-shadow: 0 0 5px rgba(6,4,5,.55);
}
.s7-movement {
position: relative;
padding: clamp(24px,3.6vh,38px) 0 clamp(24px,3.6vh,38px) clamp(44px,7vw,76px);
}
.s7-movement:first-child { padding-top: 0; }
.s7-movement:last-child { padding-bottom: 0; }
/* each successive movement's body leans a little further from the spine
as the practice descends — a whisper, not a staircase; the numerals
stay pinned to the rail */
.s7-movement:nth-child(2) .s7-movement-body { margin-left: clamp(0px,.7vw,8px); }
.s7-movement:nth-child(3) .s7-movement-body { margin-left: clamp(0px,1.4vw,17px); }
.s7-movement:nth-child(4) .s7-movement-body { margin-left: clamp(0px,2.1vw,26px); }
.s7-movement:nth-child(5) .s7-movement-body { margin-left: clamp(0px,2.8vw,35px); }
/* numeral medallions — an opaque disc with a gold ring, sitting on
(and breaking) the rail like a bead on a thread. Cleaner than the
feathered orb, and holds its edge over both the light upper frame
and the darkened lower one. */
.s7-num {
position: absolute;
top: clamp(26px,3.9vh,42px);
left: clamp(14px,2.4vw,26px);
transform: translateX(-50%);
width: clamp(34px,3.6vw,42px);
height: clamp(34px,3.6vw,42px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #080605;
border: 1px solid rgba(201,162,78,.62);
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(12.5px,1.3vw,15px);
line-height: 1;
color: rgba(226,191,106,.92);
}
.s7-movement:first-child .s7-num { top: 2px; }
.s7-title-row {
margin-bottom: clamp(10px,1.5vh,14px);
}
.s7-title {
display: block;
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(21px,2.4vw,28px);
color: rgba(245,242,237,.97);
margin-bottom: clamp(6px,1vh,10px);
}
/* tracked eyebrow label, not a second sentence — same functional
language as .s3-card-label / .enroll-price-note */
.s7-tagline {
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(10.5px,.95vw,11.5px);
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(226,191,106,.68);
}
/* short gold rule under the title — S8b vocabulary, not a full-width
divider */
.s7-rule {
width: 34px;
height: 1px;
background: var(--gold);
margin: clamp(10px,1.5vh,14px) 0 clamp(16px,2.2vh,20px);
}
.s7-text {
font-size: clamp(14.5px,1.35vw,16.5px);
line-height: 1.72;
color: rgba(245,242,237,.68);
text-wrap: pretty;
}
.s7-text + .s7-text { margin-top: clamp(12px,1.8vh,16px); }
@media (max-width: 620px) {
.s7-movement { padding-left: clamp(38px,10vw,48px); }
.s7-movements::before { left: clamp(8px,3vw,14px); }
.s7-num {
left: clamp(8px,3vw,14px);
width: 34px;
height: 34px;
font-size: 12.5px;
}
.s7-movement .s7-movement-body { margin-left: 0; }
}
/* ════════════════════════════
SECTION 8a — Preview the Practice
Billboard composition: one large visual (the phone, sampling
"Divinity") + minimal text, split left/right. Deliberately no
photo or particle backdrop — just dark ground and a single soft
gold glow behind the phone, so the mockup carries the section
rather than competing with a busier background like S6/S7's.
════════════════════════════ */
.s8p {
position: relative;
z-index: 2;
/* overflow-y visible so the phone's gold glow blooms past the trimmed
bottom edge into the threshold below. overflow-x clips the glow's
sideways reach (-14% on phones, -380px on desktop) at the screen
edges: body{overflow-x:hidden} alone doesn't stop phones from
panning sideways into it. clip, unlike hidden, keeps overflow-y
visible. */
overflow-x: clip;
overflow-y: visible;
background: #060405;
/* generous headroom up top so the phone + headline pair reads as its
own centred grouping with air above it, not crammed under S5. Bottom
is trimmed: the .s8-threshold gap below carries the beat into S8b. */
padding: clamp(72px,11vh,128px) 0 clamp(60px,8.5vh,104px);
}
/* ── Threshold: Preview → What's Included ──
Not a full hallway — the two sections are close kin, one practice seen
two ways. Mostly just breathing room on the shared black ground: a
small gold dot marks the beat on phones (where the sections stack
tight); on desktop the padding alone carries it. */
.s8-threshold {
position: relative;
z-index: 2;
/* no background fill — the body is the same #060405, and an opaque
fill here would paint over the glow blooming down out of S8p.
The vertical padding is the breathing room; the dot just gives the
eye a resting point inside it. */
display: flex;
justify-content: center;
align-items: center;
padding: clamp(46px,7vh,88px) clamp(24px,5vw,56px);
}
/* one small gold point — a rest for the eye between two close-kin beats
(Preview → What's Included). It earns its place on a phone, where the
sections stack tight; on desktop the vertical padding alone carries
the break, so the dot is dropped. */
.s8-threshold::before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(201,162,78,.5);
}
@media (min-width: 641px) {
.s8-threshold::before { display: none; }
}
.s8p-inner {
position: relative;
z-index: 1;
/* shrink-wrap the grid to the phone + headline, then auto-margin that
block: its true optical centre lands dead centre of the section,
with matching air left and right */
width: max-content;
max-width: min(860px, 100% - 56px);
margin: 0 auto;
/* the phone is a denser object than the airy headline, so geometric
centre reads left-heavy — optical nudge right to compensate */
transform: translateX(clamp(0px, 4vw, 60px));
display: grid;
grid-template-columns: auto auto;
gap: 0 clamp(34px,4.5vw,58px);
align-items: center;
}
.s8p-phone-col {
position: relative;
display: flex;
justify-content: center;
}
.s8p-glow {
position: absolute;
inset: -18% -14%;
z-index: 0;
background: radial-gradient(ellipse 58% 54% at 50% 48%,
rgba(201,162,78,.24) 0%,
rgba(201,162,78,.09) 42%,
transparent 74%);
pointer-events: none;
}
@media (min-width: 861px) {
/* the phone column is only ~264px on desktop, so the glow has to spread
well past it to read like the broad ambient wash it becomes on
smaller screens where that column runs full-width */
.s8p-glow { inset: -52% -380px; }
}
.s8p-phone-outer {
position: relative;
z-index: 1;
width: clamp(200px,22vw,264px);
}
.s8p-copy-col {
position: relative;
z-index: 1;
}
.s8p-eyebrow {
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(11px,1vw,12px);
letter-spacing: .26em;
text-transform: uppercase;
color: rgba(226,191,106,.72);
margin-bottom: clamp(18px,2.6vh,26px);
}
.s8p-line {
position: relative;
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(30px,4.2vw,56px);
line-height: 1.12;
color: rgba(245,242,237,.97);
}
.s8p-line-seg {
display: block;
position: relative;
z-index: 1;
white-space: nowrap;
}
/* only the second line steps in — the ampersand nests into that indent,
with line one still hanging off the left edge */
.s8p-amp ~ .s8p-line-seg {
padding-left: clamp(52px,6.5vw,100px);
}
/* the "and" set as one faint glyph tucked into the second line's indent,
where the word would otherwise fall — same Bodoni italic as the headline.
Sits mostly in the gutter so the words cross only its outer curve, not
its thick diagonal spine. */
.s8p-amp {
position: absolute;
left: clamp(-18px,-1.4vw,-4px);
top: 55%;
z-index: 0;
transform: translateY(-50%);
font-size: clamp(112px,13.5vw,172px);
font-weight: 400;
line-height: 1;
color: rgba(201,162,78,.32);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
@media (max-width: 860px) {
.s8p-inner {
width: auto;
transform: none;
grid-template-columns: 1fr;
gap: clamp(48px,7vh,72px) 0;
text-align: center;
}
.s8p-phone-col { justify-content: center; }
.s8p-copy-col { display: flex; flex-direction: column; align-items: center; }
.s8p-line { max-width: 420px; }
.s8p-line-seg { white-space: normal; }
.s8p-amp ~ .s8p-line-seg { padding-left: 0; }
/* the ghost-in-the-notch doesn't survive a narrow column — it clips or
reads out of sequence. On mobile the ampersand drops to a small
centred divider on its own line between the two clauses. */
.s8p-amp {
position: relative;
left: 0; /* clear the desktop ghost's negative offset so it centres */
top: 0.03em; /* slight optical drop — the glyph's ink sits high in its box */
display: block;
transform: none;
font-size: clamp(30px,9vw,40px);
line-height: 1;
/* a touch more room above than below, to sit even around the glyph */
margin: clamp(5px,1.7vw,10px) auto clamp(3px,1.1vw,6px);
color: rgba(226,191,106,.5);
}
}
/* ════════════════════════════
SECTION 8b — What's Included
Ported from the legacy sales page's "mbcSpWI" section (Rose's
favorite piece of the old design) — same three-card grid, gold
palette, and testimonial close, retooled onto this file's shared
fonts/vars/particle system. Card copy updated to the "rehearse"
language established elsewhere (H4, S5, S8a) instead of the
legacy page's older phrasing.
════════════════════════════ */
.s8b {
position: relative;
overflow: hidden;
z-index: 2;
background: #060405;
/* top trimmed — the .s8-threshold gap above already opened the space;
this section should feel like arrival, not a fresh long run-up */
padding: clamp(28px,4.5vh,48px) 0 clamp(70px,10vh,110px);
}
/* phone: tail trimmed ~10%. (The extra space that reads under the Suite /
Workbooks tabs is inside the pane — reserved height for the tallest
panel so tab-switches don't jump or reset the particles.) */
@media (max-width: 640px) {
.s8b { padding-bottom: clamp(63px,9vh,100px); }
}
.s8b-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.s8b-particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.s8b-inner {
position: relative;
z-index: 1;
max-width: 1220px; /* deliberate outward swell — wider than the ~1080 page rhythm */
margin: 0 auto;
padding: 0 clamp(24px,5vw,56px);
display: grid;
grid-template-columns: minmax(260px,360px) 1fr;
gap: 0 clamp(48px,6vw,104px);
/* top-aligned, not centred: the panel's height changes as you switch
tabs, and a centred left column would slide to re-centre against it */
align-items: start;
}
/* left column — value copy (mirrors S8a's split, inverted: copy L / UI R) */
.s8b-intro {
position: relative;
z-index: 1;
/* nudged down off the pane's top edge toward the tab row */
padding-top: clamp(44px,7vh,76px);
}
.s8b-eyebrow {
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(11px,1vw,12px);
letter-spacing: .26em;
text-transform: uppercase;
color: rgba(226,191,106,.72);
margin-bottom: clamp(16px,2.4vh,24px);
}
.s8b-h2 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(26px,3vw,36px);
line-height: 1.22;
color: var(--cream);
text-wrap: balance;
margin-bottom: clamp(14px,2vh,20px);
}
@media (max-width: 960px) {
/* stacked: normal block flow (not grid) so margin:0 auto centres each
child cleanly; header and panel share one width so they read as a
single centred column, not a narrow header over a wider panel */
.s8b-inner {
display: block;
text-align: center;
}
.s8b-intro { max-width: 620px; margin: 0 auto clamp(36px,5.5vh,56px); padding-top: 0; }
/* the centre-align above is for the stacked heading only — the panel
keeps its own left-aligned reading */
.lib { max-width: 620px; margin: 0 auto; text-align: left; }
}
/* ════════════════════════════
SECTION 6b — Enrollment
The decision "moment": one brand-fit card (same material as the
.lib panel / S8a phone) with price, a 3-line inclusions recap, a
flat gold CTA (deliberately quieter than S13's animated close),
guarantee line, then a testimonial below. SaaS structure, not
skin — no checkmark lists / tiers / scarcity. Centered, so the
page contracts to a single focal object after the wide
"What's Included" swell. Copy + pricing + refund terms are final.
════════════════════════════ */
.enroll {
position: relative;
z-index: 2;
overflow: hidden;
/* isolate so the screen-blend blooms below don't force wide repaints of
everything behind them while scrolling */
isolation: isolate;
background: #060405;
border-top: 1px solid rgba(201,162,78,.14);
/* quiet hairline both ends now — Hallway 6b's black room sits below,
not a warm ground that wanted a gold thread to meet it */
border-bottom: 1px solid rgba(201,162,78,.14);
padding: clamp(74px,11vh,124px) 0 clamp(64px,9vh,100px);
}
/* full-bleed textural ground — a lit "new dawn" room, not a scenic beat */
.enroll-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.enroll-photo {
position: absolute;
inset: 0;
/* grade baked into the asset (was filter: brightness(.70) saturate(.74)
contrast(1.02)). No CSS filter now — that filtered layer was what got
re-rasterised mid-scroll and read as the image flashing/reloading, so
the layer-pinning hacks (translateZ / will-change) go with it. */
background-size: cover;
background-position: center;
}
/* darkness weighted low + to the edges, so the top-centre stays open
for the bloom to land */
.enroll-overlay {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 104% 92% at 50% 66%,
rgba(6,4,5,.28) 0%,
rgba(6,4,5,.62) 54%,
rgba(6,4,5,.88) 100%);
}
/* the dawn: a gold bloom pouring down from the top edge onto the card.
`screen` so the gold reads as light on the photo, not paint. */
.enroll-bloom {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: min(1120px, 96vw);
height: min(380px, 54%);
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
background:
radial-gradient(ellipse 44% 86% at 50% 0%,
rgba(244,227,184,.32) 0%,
rgba(226,191,106,.11) 32%,
transparent 60%),
radial-gradient(ellipse 78% 82% at 50% 0%,
rgba(201,162,78,.18) 0%,
rgba(201,162,78,.05) 38%,
transparent 66%);
}
/* a soft warm screen glow at the foot — a quiet echo of the dawn bloom,
kept low so Enrollment's base still settles into near-black before
Hallway 6b's dark room. Not a seam-matching device any more. */
.enroll-footlift {
position: absolute;
left: 0; right: 0; bottom: 0;
height: min(200px, 28%);
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
background: linear-gradient(0deg,
rgba(140,102,52,.20) 0%,
rgba(112,82,42,.09) 34%,
rgba(82,60,32,.03) 68%,
transparent 100%);
}
.enroll-inner {
position: relative;
z-index: 2;
max-width: 620px;
margin: 0 auto;
padding: 0 clamp(20px,5vw,32px);
text-align: center;
}
.enroll-head {
margin: 0 auto clamp(32px,5vh,56px);
max-width: 620px;
}
/* frosted pane — a gold hairline catches the top edge, a faint graded
fill + blur lift it; no opaque fill, no radius, no drop shadow, so the
dawn and the bloom read through instead of being blocked by a black card */
.enroll-card {
max-width: 460px;
margin: 0 auto;
padding: clamp(30px,5vw,44px) clamp(24px,5vw,40px);
border-top: 1px solid rgba(201,162,78,.45);
background: linear-gradient(180deg,
rgba(245,242,237,.078) 0%,
rgba(245,242,237,.038) 46%,
rgba(245,242,237,.024) 100%);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
/* contrast comes from a soft dark halo on the text, not from tinting
the pane — keeps the pane as luminous as it was */
text-shadow: 0 1px 3px rgba(6,4,5,.5), 0 2px 16px rgba(6,4,5,.4);
}
.enroll-cta { text-shadow: none; }
.enroll-eyebrow {
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(10.5px,1vw,11.5px);
letter-spacing: .26em;
text-transform: uppercase;
color: rgba(226,191,106,.72);
margin-bottom: clamp(16px,2.4vh,22px);
}
.enroll-price {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(44px,6vw,60px);
line-height: 1;
letter-spacing: .01em;
color: var(--cream);
}
.enroll-price-note {
margin-top: clamp(7px,1vh,10px);
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(11px,1vw,12px);
letter-spacing: .1em;
color: rgba(245,242,237,.5);
}
.enroll-recap {
margin: clamp(20px,3vh,28px) 0;
padding: clamp(14px,2.2vh,20px) 0;
border-top: 1px solid rgba(201,162,78,.18);
border-bottom: 1px solid rgba(201,162,78,.18);
display: flex;
flex-direction: column;
gap: clamp(9px,1.4vh,12px);
}
.enroll-recap-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 2px 12px;
text-align: left;
}
.enroll-recap-name {
font-family: var(--font-b);
font-size: clamp(12.5px,1.2vw,13.5px);
color: var(--cream);
}
.enroll-recap-detail {
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(11px,1vw,12px);
letter-spacing: .03em;
color: rgba(226,191,106,.62);
}
.enroll-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55em;
width: 100%;
margin-top: clamp(22px,3.2vh,30px);
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(13px,1.2vw,14.5px);
letter-spacing: .12em;
text-transform: uppercase;
color: #1a1410;
background: linear-gradient(150deg, #E7C777, #C49A46);
border: 0;
border-radius: 2px;
padding: clamp(15px,2vh,18px) clamp(26px,4vw,38px);
text-decoration: none;
white-space: nowrap;
transition: filter .25s, transform .15s;
}
.enroll-cta:hover { filter: brightness(1.06); }
.enroll-arr { transition: transform .25s; }
.enroll-cta:hover .enroll-arr { transform: translateX(4px); }
.enroll-guarantee {
margin-top: clamp(15px,2.2vh,19px);
font-family: var(--font-b);
font-weight: 400;
font-size: clamp(11.5px,1.05vw,12.5px);
color: rgba(245,242,237,.62);
}
.enroll-secure {
margin-top: clamp(6px,1vh,9px);
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(10px,.95vw,10.5px);
letter-spacing: .08em;
color: rgba(245,242,237,.36);
}
/* closing beat — a short gold rule as the divider from the pane, the
quote in the page's standard testimonial register (see .enroll-quote),
— NAME in wide gold-light caps. Kept centred here as a coda under the
card rather than left-aligned on a rule like S5 / S10. */
.enroll-testimonial {
max-width: 560px;
margin: clamp(52px,8vh,86px) auto 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px,2.4vh,22px);
}
/* phone: trim the run-up to the testimonial by ~10% */
@media (max-width: 640px) {
.enroll-testimonial { margin-top: clamp(47px,7.2vh,77px); }
}
.enroll-testimonial-rule {
width: 44px;
height: 1px;
background: var(--gold);
opacity: .42;
}
/* the page's standard testimonial register (Jost 300, as S5 / S10 / S12).
Kept quieter than the CTA on purpose — it sits on the bare dark ground
at higher contrast than the pane, so it stays a coda. */
.enroll-quote {
margin: 0;
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(15px,1.5vw,17px);
line-height: 1.62;
color: rgba(245,242,237,.88);
text-wrap: balance;
}
.enroll-attr {
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(10.5px,1vw,11.5px);
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(226,191,106,.66);
}
/* ════════════════════════════
SECTION 10 — What's available on the other side
"Three doorways" rework. The old flat stack of nine identically-set
quotes with a weak left-label column is replaced by three chaptered
domains (Within / With Money / With Life — the brand's three fields),
each a short Bodoni-italic gold heading + gold rule (S8b vocabulary),
then two quotes set identically on one continuous left gold thread
(S9 .s9-wineskin device) — short one first, longer one after, length
the only differentiator. Quote bodies are Jost — Bodoni italic only
survives at heading length. Names promoted from a near-invisible .42
to readable gold. Opener is a short gold rule, then the head — no
eyebrow. Plain dark ground — the muddy .65 texture is gone.
════════════════════════════ */
.s10 {
position: relative;
overflow: hidden;
z-index: 2;
/* ground deepens toward the foot — the run into Hallway 10 / S11 is a
descent (the light going out before "I know you've been burned"),
not flat #060405 dead space */
background: linear-gradient(180deg, #060405 0%, #060405 56%, #030203 100%);
padding: clamp(80px,11vh,130px) 0 clamp(46px,7vh,80px);
}
.s10-inner {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
padding: 0 clamp(24px,5vw,48px);
}
/* opener — a short centred gold rule, then straight into the head.
No eyebrow: "In their words" / "Testimonials" is the most generic
label on the page, and the h2 already frames the section. */
.s10-rule {
width: 40px;
height: 1px;
background: var(--gold-light);
opacity: .9;
margin: 0 auto clamp(20px,3vh,30px);
}
.s10-h2 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(24px,3vw,38px);
line-height: 1.16;
letter-spacing: .002em;
color: rgba(245,242,237,.97);
text-align: center;
margin-bottom: clamp(56px,8vh,90px);
}
/* each domain is a chapter — space is the separator between them */
.s10-category { max-width: 660px; }
.s10-category + .s10-category { margin-top: clamp(52px,7vh,72px); }
.s10-domain {
font-family: var(--font-d);
font-style: italic;
font-weight: 500;
font-size: clamp(19px,2.1vw,24px);
line-height: 1.2;
color: var(--gold);
margin-bottom: clamp(12px,1.7vh,16px);
}
.s10-domain-rule {
width: 34px;
height: 1px;
background: var(--gold);
margin-bottom: clamp(24px,3.4vh,32px);
}
/* every quote in the section is set identically — one Jost register, one
attribution style, no hero/echo hierarchy (that just read as "why is
this one smaller?"). Length is the only differentiator: the short
quote leads each domain, the longer one follows for whoever keeps
reading. Both share one continuous left gold thread (the S9
.s9-wineskin device); the heading + rule divide one domain from the
next. Bodoni italic is kept for the short heading only. */
.s10-voices {
border-left: 1px solid rgba(201,162,78,.5);
padding-left: clamp(18px,2.4vw,26px);
}
.s10-testimonial { margin: 0; }
.s10-testimonial + .s10-testimonial { margin-top: clamp(26px,3.6vh,34px); }
.s10-quote {
margin: 0;
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(15px,1.5vw,17px);
line-height: 1.66;
color: rgba(245,242,237,.82);
text-wrap: pretty;
}
.s10-quote-attr {
display: block;
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(10.5px,1vw,11.5px);
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(226,191,106,.66);
margin-top: clamp(12px,1.7vh,15px);
}
@media (max-width: 640px) {
.s10-voices { padding-left: clamp(14px,4vw,18px); }
}
/* ════════════════════════════
SECTION 11 — I know you've been burned before
A tight objection beat, not a full movement: it handles the one fear
S9 doesn't — "I've been burned, so I got guarded." Bookended top and
foot by a full-width hard gold edge (S9's device, both threads) over
a photographic ground, with a dark run of room above the section and
between the foot edge and the FAQ. Interior: h2 → the burned/careful/
afraid-to-want prose → a plain gold pivot line → the .h3-seam gold
hairline + bloom as a lead-in → the "hold your heart" invite (a dark
frosted pane). The loop stanza + its lead-in were cut here (S9 already
owns "you keep repeating the cycle"); the mini-hallway chrome, the
Ann B. testimonial, the old closing line, and the gold-rose cutout
that used to sit behind the card all went earlier.
════════════════════════════ */
.s11 {
position: relative;
z-index: 2;
overflow: hidden;
background: #060405;
/* matching full-width hard gold edges top and foot — same device +
weight as S9's threads (S3/S5 hard-gold-edge). Bookends the turn. */
border-top: 1px solid rgba(226,191,106,.72);
border-bottom: 1px solid rgba(226,191,106,.72);
/* dark run above the top edge so the last beat out of Hallway 10's
seam has space to breathe before it */
margin-top: clamp(56px,9vh,104px);
padding: clamp(60px,8.5vh,104px) 0 clamp(68px,8.5vh,96px);
}
/* Full-bleed photographic ground — the emotional turn gets its own
field the way S1/S7/S13 do. Composition reads bottom-weighted, so the
photo is pinned to the section foot and the overlay is front-loaded
(heavy over the copy up top, ramping off so the lower image shows).
NOTE: still an Unsplash hotlink placeholder — needs grading +
compressing + moving to the Shopify CDN before deploy. */
.s11-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.s11-photo {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: cover;
/* bottom of the photo pinned to the bottom of the section */
background-position: center bottom;
/* colour treatment reset to neutral for a fresh read on this image */
filter: brightness(.9);
opacity: .9;
}
/* full-width top-weighted wash — carries text legibility over the copy
(with the per-line text-shadow halos), then tapers so the lower
composition and the invite-card zone stay clear. The localised
.s11-copy::before scrim is off in favour of this. No solid seals —
the image still meets the gold bookend edges. */
.s11-overlay {
position: absolute;
inset: 0;
background:
/* heavy over the copy up top, ramping off through the mid so the
lower composition reads and the card zone stays clear */
linear-gradient(180deg,
rgba(6,4,5,.79) 0%,
rgba(6,4,5,.75) 12%,
rgba(6,4,5,.66) 26%,
rgba(6,4,5,.51) 40%,
rgba(6,4,5,.33) 54%,
rgba(6,4,5,.18) 70%,
rgba(6,4,5,.07) 86%,
rgba(6,4,5,.03) 100%),
radial-gradient(ellipse 120% 80% at 50% 60%,
transparent 0%,
transparent 58%,
rgba(6,4,5,.18) 100%);
}
@media (max-width: 700px) {
.s11-photo { opacity: .82; }
}
.s11-inner {
position: relative;
z-index: 1;
max-width: 620px;
margin: 0 auto;
padding: 0 clamp(24px,5vw,48px);
text-align: center;
}
/* the prose column CAN carry its own reading scrim (S2's .s2-col::before
device) — a soft dark field behind ONLY the text, masked to fade at
the sides. Off right now: the mid-intensity full-width .s11-overlay is
doing the reading work instead. Flip `background` back on to layer or
swap the localised version in. */
.s11-copy {
position: relative;
z-index: 1;
}
.s11-copy::before {
content: "";
position: absolute;
inset: -9% -18%;
z-index: -1;
background: none;
/* background: linear-gradient(180deg,
transparent 0%,
rgba(6,4,5,.30) 11%,
rgba(6,4,5,.55) 34%,
rgba(6,4,5,.55) 66%,
rgba(6,4,5,.26) 88%,
transparent 100%); */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
pointer-events: none;
}
.s11-h2 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(30px,4.2vw,52px);
line-height: 1.16;
letter-spacing: .002em;
color: rgba(245,242,237,.97);
text-wrap: balance;
margin-bottom: clamp(28px,4vh,40px);
text-shadow: 0 1px 16px rgba(6,4,5,.6), 0 1px 4px rgba(6,4,5,.5);
}
.s11-body {
font-size: clamp(15px,1.4vw,17px);
line-height: 1.7;
color: rgba(245,242,237,.78);
text-wrap: pretty;
margin-bottom: clamp(16px,2.4vh,22px);
text-shadow: 0 1px 12px rgba(6,4,5,.62), 0 1px 3px rgba(6,4,5,.5);
}
.s11-body em { font-style: italic; color: rgba(245,242,237,.96); }
.s11-aside {
font-size: clamp(13px,1.2vw,14.5px);
font-style: italic;
/* lifted from .44 — too dim to read against the lighter photo ground;
still a step under .s11-body's .78 so it stays a quiet aside */
color: rgba(245,242,237,.62);
margin-bottom: clamp(18px,2.6vh,24px);
text-shadow: 0 1px 12px rgba(6,4,5,.62), 0 1px 3px rgba(6,4,5,.5);
}
/* the turn line — plain, in S11's own centred voice: gold italic,
lifted a touch. On wide screens it breaks out past .s11-inner's
padding (below) to hold one line; at narrower widths it keeps that
padding so it never runs edge-to-edge of the screen. The .s11-seam
below bridges it to the invite now, so its own bottom margin is short. */
.s11-pivot {
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(21px,2.5vw,30px);
line-height: 1.34;
color: var(--gold-light);
/* greedy wrap (not balance) — same as .s13-pivot: line length is
purely width-driven, so it fills the column like the body above
instead of balance collapsing it into a narrow block mid-widths */
text-wrap: wrap;
margin: clamp(30px,4.4vh,44px) 0 clamp(24px,3.6vh,36px);
text-shadow: 0 1px 14px rgba(6,4,5,.6), 0 1px 4px rgba(6,4,5,.5);
}
/* wide screens have page gutter to spare — restore the breakout there */
@media (min-width: 880px) {
.s11-pivot { margin-inline: calc(-1 * clamp(24px,5vw,48px)); }
}
/* lead-in to the invite — the H3 seam device (a gold hairline brightening
downward with a slow breathing bloom at its foot) reused here to unveil
the card below the pivot. Visual + animation come from .h3-seam; this
just retunes length + spacing for S11's tighter, gold-bracketed interior. */
.s11-seam {
height: clamp(60px,8.5vh,100px);
margin: clamp(6px,1.4vh,14px) auto clamp(44px,6vh,60px);
}
/* the "hold your heart" passage — a dark frosted pane. Was wrapped
around a gold-rose cutout that bled behind the card (removed: too
literal beside the "rosebud" copy, and it boxed in the bg options).
Now just a max-width + pacing wrapper. */
.s11-invite-wrap {
max-width: 440px;
/* room off the pivot/seam above, clear of the gold foot edge below */
margin: clamp(24px,4.5vh,44px) auto clamp(40px,6vh,60px);
}
/* the card is a still, held object now — the irregular edge-shimmer
loop was too much motion for the quietest moment on the page. A
steady warm glow is the resting state; hover/focus lifts it a touch. */
.s11-invite-card {
position: relative;
z-index: 1;
overflow: hidden;
padding: clamp(30px,4.4vh,42px) clamp(26px,4vw,34px);
/* frosted pane, dark-tinted — the page's .enroll-card / .s4-side / .lib
card language: a single gold hairline on the top edge, a translucent
graded fill + blur so the lit photo reads through as soft atmosphere
instead of the card punching an opaque black hole in it */
border: 0;
border-top: 1px solid rgba(226,191,106,.42);
background: linear-gradient(180deg,
rgba(6,4,5,.52) 0%,
rgba(6,4,5,.42) 55%,
rgba(6,4,5,.34) 100%);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
/* a whisper of warmth, not a ring */
box-shadow: 0 0 46px 10px rgba(201,162,78,.055);
transition: transform .4s ease, box-shadow .4s ease;
}
.s11-invite-card:hover,
.s11-invite-card:focus-within {
transform: translateY(-2px);
box-shadow: 0 0 54px 12px rgba(201,162,78,.09);
}
.s11-invite-card > * { position: relative; z-index: 1; }
/* the card's opening instruction — its heading tier. Brighter and larger
than the card's other prose, but roman Jost, not gold: gold + the
Bodoni italic stays reserved for the question, so the card has one
heading, one peak, one quiet coda rather than four competing beats. */
.s11-invite {
font-family: var(--font-b);
font-weight: 400;
/* ceiling trimmed 19 → 18 so "…rosebud in your hands." holds on one
line at full desktop; it already fits at smaller sizes */
font-size: clamp(16.5px,1.7vw,18px);
line-height: 1.5;
color: rgba(245,242,237,.92);
margin-bottom: clamp(4px,.8vh,6px);
text-wrap: pretty;
}
.s11-question {
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(18px,2vw,23px);
line-height: 1.34;
color: var(--gold-light);
margin-top: clamp(14px,2vh,18px);
text-wrap: balance;
}
/* the anaphora — one flowing line, not a stacked list, and set at the
card's quietest level so it lands as a soft coda trailing off after
the question, not a fourth beat pulling focus. */
.s11-to-list {
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(15px,1.4vw,17px);
line-height: 1.6;
color: rgba(245,242,237,.66);
margin-top: clamp(16px,2.4vh,22px);
text-wrap: balance;
}
/* ════════════════════════════
SECTION 12 — If you're still curious…
Accordion, one item open at a time — nine questions, some with
3-4 paragraph answers, so everything-expanded would make this the
longest section on the page. Item 01 defaults open so the pattern
reads on load. Numbered labels reuse the tracked-gold-number
language already established (S3/S7/S8b). Plain dark ground, no
photo/particles — deliberate: this is a reference/analytical
section, not a visual beat, so the only motion is the accordion
itself plus quiet hover/open micro-states. Follows S11 directly now
(Hallway 11 removed): it opens with a generous run of dark room
below S11's closing gold edge, then the header — the breather that
hallway used to give.
════════════════════════════ */
.s12 {
position: relative;
z-index: 2;
background: #060405;
padding: clamp(76px,10.5vh,124px) 0 clamp(40px,5.5vh,72px);
}
/* a touch less top room on the smaller breakpoints */
@media (max-width: 599px) {
.s12 { padding-top: clamp(52px,7.5vh,80px); }
}
@media (min-width: 600px) and (max-width: 1024px) {
.s12 { padding-top: clamp(58px,8vh,92px); }
}
.s12-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 clamp(24px,5vw,48px);
}
.s12-header { text-align: center; margin-bottom: clamp(48px,7vh,72px); }
.s12-h2 {
font-family: var(--font-d);
font-weight: 500;
font-size: clamp(28px,4vw,46px);
line-height: 1.16;
letter-spacing: .002em;
color: rgba(245,242,237,.97);
text-wrap: balance;
margin-bottom: clamp(12px,1.8vh,16px);
}
.s12-lead {
font-size: clamp(14.5px,1.35vw,16px);
color: rgba(245,242,237,.56);
}
/* one voice closes the reference section — centred Jost quote, — NAME
in wide gold caps. The lead-in is a short VERTICAL gold hairline
(the page's .hl-descend grammar), not a horizontal rule: a
horizontal rule caps the section and reads as a full stop; the
vertical thread keeps the eye moving down through the quote toward
the gold edge and the lit hallway below. */
.s12-quote-rule {
width: 1px;
height: clamp(46px,6.5vh,62px);
background: linear-gradient(180deg, rgba(201,162,78,.46), transparent);
margin: clamp(54px,7.6vh,86px) auto clamp(28px,4vh,38px);
}
.s12-quote {
margin: 0 auto;
max-width: 34em;
text-align: center;
}
.s12-quote blockquote {
margin: 0;
font-family: var(--font-b);
font-weight: 300;
font-size: clamp(15px,1.5vw,17.5px);
line-height: 1.66;
color: rgba(245,242,237,.82);
text-wrap: pretty;
}
.s12-quote figcaption {
margin-top: clamp(13px,1.9vh,17px);
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(10.5px,1vw,11.5px);
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(226,191,106,.62);
}
.s12-item { border-top: 1px solid rgba(201,162,78,.20); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.s12-item:last-child { border-bottom: 1px solid rgba(201,162,78,.20); }
.s12-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(16px,2.4vw,28px);
background: none;
border: none;
margin: 0;
cursor: pointer;
text-align: left;
/* horizontal inset so the numeral and the +/- icon sit clear of the
hard edge the hover / open highlight draws */
padding: clamp(20px,2.8vh,26px) clamp(12px,1.6vw,18px);
font: inherit;
color: inherit;
transition: background-color .35s var(--ease);
-webkit-tap-highlight-color: transparent;
}
/* quiet hover/keyboard feedback — the bar now acknowledges the cursor
before the click: faint warm wash + numeral and label lifting */
.s12-q:hover { background-color: rgba(201,162,78,.055); }
.s12-q:focus-visible {
outline: 1px solid rgba(201,162,78,.5);
outline-offset: 4px;
}
.s12-q:hover .s12-num,
.s12-q:focus-visible .s12-num { color: rgba(201,162,78,.9); }
.s12-q:hover .s12-q-label,
.s12-q:focus-visible .s12-q-label { color: #F5F2ED; }
/* open item carries a "you are here" anchor: brighter top rule, a faint
full-width warm wash so the whole row reads as one lit panel (not just
a slightly brighter hairline), gold numeral, full-white label */
.s12-item.is-open {
border-top-color: rgba(201,162,78,.68);
background-color: rgba(201,162,78,.05);
}
.s12-item.is-open .s12-num { color: var(--gold-light); }
.s12-item.is-open .s12-q-label { color: #F5F2ED; }
.s12-q-text {
display: flex;
align-items: baseline;
gap: clamp(12px,1.6vw,18px);
}
.s12-num {
flex: none;
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(12.5px,1.1vw,14px);
letter-spacing: .04em;
color: rgba(201,162,78,.6);
transition: color .3s var(--ease);
}
.s12-q-label {
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(15.5px,1.5vw,17.5px);
line-height: 1.4;
color: rgba(245,242,237,.94);
transition: color .3s var(--ease);
}
.s12-icon {
position: relative;
flex: none;
width: clamp(12px,1.15vw,13.5px);
height: clamp(12px,1.15vw,13.5px);
}
.s12-icon::before,
.s12-icon::after {
content: "";
position: absolute;
background: var(--gold-light);
transition: transform .35s var(--ease);
}
.s12-icon::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.s12-icon::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.s12-item.is-open .s12-icon::after { transform: translateX(-50%) rotate(90deg); }
.s12-a-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .45s var(--ease);
}
.s12-item.is-open .s12-a-wrap { grid-template-rows: 1fr; }
.s12-a-inner { overflow: hidden; }
.s12-a {
/* left inset = .s12-q's new horizontal padding + the old indent, so the
answer still lines up under the question label; matching right inset */
padding: 0 clamp(12px,1.6vw,18px) clamp(22px,3.2vh,30px) clamp(36px,4.6vw,52px);
max-width: 620px;
font-size: clamp(14.5px,1.35vw,16px);
line-height: 1.72;
color: rgba(245,242,237,.68);
text-wrap: pretty;
/* the answer settles in just behind the row expansion instead of
hard-clipping into view */
opacity: 0;
transform: translateY(6px);
transition: opacity .4s var(--ease) .06s, transform .4s var(--ease) .06s;
}
.s12-item.is-open .s12-a { opacity: 1; transform: none; }
.s12-a p + p { margin-top: clamp(12px,1.8vh,16px); }
.s12-a strong { font-weight: 500; color: rgba(245,242,237,.9); }
/* Hallway 12's hushed middle line — a direct address/plea, quieter
and smaller than the lines bracketing it */
/* Hallway 12's three lines by narrative role, not just alternating
size: scene-setter (quieter than the usual hallway line) → direct
address to the reader (Jost, not Bodoni italic, but with real
presence — no longer a whisper) → spiritual impact (biggest, the
payoff). Ascending hierarchy matches the actual shape of the beat:
setup → turn → climax. */
.hl-scene {
font-size: clamp(17px,2.2vw,26px);
color: rgba(245,242,237,.78);
}
/* eyebrow variant — trying the scene-setter as a tracked label
instead of a smaller version of the hallway's usual line */
.hl-eyebrow {
font-family: var(--font-b);
font-style: normal;
font-weight: 500;
font-size: clamp(11px,1vw,12px);
line-height: 1.5;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(245,242,237,.5);
}
.hl-invoke {
font-family: var(--font-b);
font-style: normal;
font-weight: 400;
letter-spacing: .02em;
font-size: clamp(18px,2.4vw,26px);
color: rgba(245,242,237,.88);
}
/* ════════════════════════════
SECTION 13 — the close, and the bottom half of the .close-zone.
Hallway 12's "So these dry bones may come alive" is the close-zone's
headline; S13 has NO heading of its own — it picks up in a quiet,
one-to-one letter voice as the shared field darkens toward the CTA.
Blocks: opening line → gold pivot → agency line → the "walk with me
to the temple" invitation (sets up the CTA) → the CTA. The choral
register lives in H12; S13 is the intimate descent. The button gets
the strong treatment (solid gold gradient + a one-time sweep) as the
final ask.
════════════════════════════ */
.s13 {
position: relative;
overflow: hidden;
/* no fill or image of its own — it rides the shared .close-zone
ground that carries down from Hallway 12 */
background: transparent;
padding: clamp(18px,2.6vh,34px) 0 clamp(100px,13vh,150px);
}
/* Direction: asymmetric "letter" column. The whole section breaks
the page's centered rhythm — left-aligned, offset toward the left
of a wide frame, set like a letter written to one person. Two
voices only now (the headline was dropped — H12 carries it): body,
and the single gold peak line, which breaks out of the left margin
with a hairline rule. "The work begins now" is demoted to a small
tracked kicker on the button so the CTA is the one loudest object. */
.s13-inner {
position: relative;
z-index: 1;
max-width: 1040px;
margin: 0 auto;
padding: 0 clamp(24px,6vw,64px);
}
.s13-col {
max-width: 552px;
text-align: left;
}
.s13-body {
font-size: clamp(15px,1.4vw,17px);
line-height: 1.78;
color: rgba(245,242,237,.70);
text-wrap: pretty;
margin-bottom: clamp(22px,3vh,28px);
}
.s13-body em { font-style: italic; color: rgba(245,242,237,.94); }
/* The single highlighted beat — the turn. Breaks out of the left
margin with a hairline gold rule; gets the most air in the column. */
.s13-pivot {
font-family: var(--font-d);
font-weight: 500;
font-style: italic;
font-size: clamp(23px,2.9vw,33px);
line-height: 1.32;
color: var(--gold-light);
/* greedy wrap (not balance/pretty) so line length is purely
width-driven — lets width + word count control the break without a
hard
. Inset on both sides relative to the body so the turn
reads as a block pulled in, not flush with the paragraph text. */
text-wrap: wrap;
margin: clamp(38px,5.2vh,52px) clamp(26px,6vw,66px) clamp(40px,5.4vh,52px) clamp(12px,2.8vw,38px);
padding-left: clamp(15px,2vw,20px);
border-left: 1px solid rgba(226,191,106,.38);
}
.s13-cta-wrap {
position: relative;
margin-top: clamp(20px,2.8vh,32px);
}
.s13-kicker {
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(11px,1vw,12.5px);
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(226,191,106,.72);
margin-bottom: clamp(16px,2.2vh,20px);
}
.s13-cta-holder {
position: relative;
display: inline-block;
}
.s13-cta-glow {
position: absolute;
inset: -70% -45%;
z-index: 0;
background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(226,191,106,.19) 0%, rgba(201,162,78,.07) 42%, transparent 74%);
animation: mbc-breathe2 6s ease-in-out infinite;
pointer-events: none;
}
/* Same family as the homepage `.cta` — canonical gradient, 2px
radius, .14em tracking, sliding arrow. It earns "final ask" status
through scale, a resting shadow that lifts it off the near-black
ground, and the breathing glow behind — not a looping shimmer. */
.s13-cta-button {
position: relative;
z-index: 1;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-b);
font-weight: 500;
font-size: clamp(14px,1.3vw,15.5px);
letter-spacing: .14em;
text-transform: uppercase;
color: #16120e;
background: linear-gradient(100deg,#B98F3C 0%,#D0A954 48%,#EBCB7C 100%);
border: none;
border-radius: 2px;
padding: clamp(18px,2.2vh,22px) clamp(40px,4.6vw,54px);
text-decoration: none;
white-space: nowrap;
box-shadow: 0 18px 44px -14px rgba(201,162,78,.55);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.s13-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 22px 50px -12px rgba(201,162,78,.68);
}
.s13-arr {
display: inline-block;
transition: transform .2s var(--ease);
}
.s13-cta-button:hover .s13-arr { transform: translateX(4px); }
/* One-time specular sweep when the button scrolls into view — a
single "arrival" pass, not a loop. Armed by .swept, added by the
scroll-reveal observer. */
.s13-cta-button::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
transform: skewX(-20deg);
opacity: 0;
}
.s13-cta-button.swept::before {
animation: s13-shimmer-sweep 1.1s ease-in-out .25s 1 both;
}
@keyframes s13-shimmer-sweep {
0% { left: -60%; opacity: 1; }
100% { left: 130%; opacity: 1; }
}
@media (max-width: 560px) {
.s13-col { max-width: none; }
.s13-pivot { margin-left: 0; margin-right: clamp(16px,5vw,40px); }
/* CTA sits left, shrink-wrapped, so the whole section reads as one
left-aligned letter rather than a centred button under left copy */
.s13-cta-holder { display: inline-block; }
.s13-cta-button { width: auto; justify-content: flex-start; }
}
/* ════════════════════════════
Player-mockup animation — relocated from the retired S6 laptop
composite; S8a's phone is all that still uses it.
════════════════════════════ */
@keyframes mbc-glow2{0%,100%{box-shadow:0 0 0 0 rgba(201,162,78,0)}50%{box-shadow:0 0 26px 2px rgba(201,162,78,.5)}}
@keyframes mbc-pip2{0%,100%{opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.25)}}
@keyframes mbc-ripple2{0%{transform:scale(.55);opacity:.65}100%{transform:scale(1.7);opacity:0}}
@keyframes mbc-breathe2{0%,100%{transform:scale(.94);opacity:.55}50%{transform:scale(1.06);opacity:.9}}
.lp-scope .lp-play{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:linear-gradient(150deg,#E2BF6A,#B98F3E);flex:none;animation:mbc-glow2 3.4s ease-in-out infinite}
.lp-scope .lp-bar-fill::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 8px rgba(226,191,106,.9);animation:mbc-pip2 2.4s ease-in-out infinite}
/* ════════════════════════════
"The Contents" — What's Included (S8b interactive panel)
Reworked from a faux course-app window into a table of contents
for the practice. S4's frosted-pane treatment carries it: one
gold hairline at the top edge, a faint graded fill, a little blur
— no card, no drop shadow, no radius. Bodoni on every title;
dot-leader rows like a book's contents page.
════════════════════════════ */
.lib{
width:100%; margin:0;
border-top:1px solid rgba(201,162,78,.4);
background:linear-gradient(180deg,
rgba(245,242,237,.05) 0%,
rgba(245,242,237,.022) 45%,
rgba(245,242,237,.012) 100%);
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
padding:clamp(26px,3.8vh,38px) clamp(22px,3vw,36px) clamp(30px,4.2vh,40px);
}
/* stacked ( <=960 ): centre the panel under the header. This lives here,
after the base .lib rule above, because the .s8b stacking rules are in
the first block above and would otherwise lose the source-order tie
to `margin:0` above. */
@media (max-width:960px){
.lib{ max-width:620px; margin-left:auto; margin-right:auto; }
}
/* three top-level entries — I / II / III of one volume. Equal thirds
so the strip spans the panel width without an awkward void between
tabs; each label sits at the start of its third */
.lib-tabs{
display:flex; flex-wrap:wrap;
gap:clamp(10px,1.6vw,20px);
margin-bottom:clamp(26px,3.8vh,36px);
}
.lib-tab{
flex:1 1 0; cursor:pointer; font:inherit; text-align:left;
background:none; border:0; padding:0 0 9px;
display:flex; flex-direction:column; gap:5px;
color:rgba(245,242,237,.4);
transition:color .3s var(--ease);
position:relative;
}
.lib-tab-idx{
font-family:var(--font-d); font-style:italic;
font-size:clamp(12px,1.15vw,13.5px); letter-spacing:.04em;
color:rgba(226,191,106,.42);
transition:color .3s var(--ease);
}
.lib-tab-name{
font-family:var(--font-d);
font-size:clamp(15px,1.75vw,19px); line-height:1.12;
}
.lib-tab-meta{
font-family:var(--font-b); font-weight:300;
font-size:10.5px; letter-spacing:.09em; white-space:nowrap;
color:inherit; opacity:.7;
}
.lib-tab:hover{ color:rgba(245,242,237,.64); }
.lib-tab.is-active{ color:var(--cream); }
.lib-tab.is-active .lib-tab-idx{ color:var(--gold-light); }
.lib-tab.is-active::after{
content:""; position:absolute; left:0; right:0; bottom:0;
height:1px; background:var(--gold);
}
/* all three panels share one grid cell, so the panel area stays the
height of the tallest tab whichever is open — the section stops
resizing on switch, which also stops the particle canvas rescaling */
.lib-body{ display:grid; }
.lib-panel{ grid-area:1 / 1; opacity:1; transition:opacity .35s var(--ease); }
.lib-panel[hidden]{ display:block; visibility:hidden; opacity:0; pointer-events:none; }
.lib-panel-head{ margin-bottom:clamp(18px,2.6vh,26px); }
.lib-panel-title{
font-family:var(--font-d); font-style:italic; font-weight:500;
font-size:clamp(19px,2.3vw,24px); color:var(--gold-light);
line-height:1.28; margin-bottom:clamp(7px,1vh,10px);
}
.lib-panel-sub{
font-family:var(--font-b); font-weight:300;
font-size:clamp(13px,1.3vw,14.5px); line-height:1.66;
color:#F0DCC2; opacity:.82; max-width:52ch;
}
/* the contents — dot-leader rows, no rules */
.lib-list{ list-style:none; margin:0; padding:0; }
.lib-row{
display:flex; flex-wrap:wrap; align-items:baseline;
padding:clamp(11px,1.7vh,15px) 0;
}
.lib-row-title{
flex:0 1 auto; min-width:0;
font-family:var(--font-d);
font-size:clamp(15px,1.5vw,17.5px); line-height:1.35;
color:var(--cream);
}
.lib-row-lead{
flex:1 1 40px; align-self:center;
margin:0 .8em; height:0;
border-bottom:1px dotted rgba(201,162,78,.32);
}
.lib-row-dur{
flex:none; font-family:var(--font-b); font-weight:300;
font-size:11.5px; letter-spacing:.06em;
color:rgba(245,242,237,.5); font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
.lib{ padding:22px 18px 28px; }
/* three across won't fit — stack them as a short contents list, one
part per line, tap to open below */
.lib-tabs{
flex-direction:column; flex-wrap:nowrap; gap:8px;
margin-bottom:clamp(20px,4vh,28px);
}
.lib-tab{
flex:none;
flex-direction:row; align-items:baseline; gap:0;
width:100%; padding:13px 0;
}
.lib-tab-idx{ flex:none; width:2.1em; }
.lib-tab-name{ flex:1 1 auto; font-size:15.5px; }
.lib-tab-meta{ flex:none; }
.lib-body{ min-height:0; }
/* ToC rows on a phone, panel by panel:
- Suite keeps the dotted leader (every title is one line)
- Method drops it — lecture 4's title wraps to two lines, and a
leader off a wrapped title reads crooked — and puts the runtime
on its own line, left-aligned under the title
- Workbooks does the same: "Fillable PDF · N pages" is a caption,
not a short runtime */
.lib-row{
display:flex; flex-wrap:wrap; align-items:baseline;
gap:0 .9em;
padding:clamp(12px,2vh,16px) 0;
}
.lib-row-lead{ margin:0; }
.lib-row-dur{ margin-left:auto; }
#lib-panel-method .lib-row-lead,
#lib-panel-books .lib-row-lead{ display:none; }
#lib-panel-method .lib-row-dur,
#lib-panel-books .lib-row-dur{ flex-basis:100%; margin-left:0; margin-top:3px; }
}