/* ═══════════════════════════════════════════════════════════════
AWAKENED SEX, MONEY & LOVE — sales v1.0 (ported from NME v4)
Every word sits on cream. Two exceptions only: the hero, and the
archer testimonial section, which keeps its overlay untouched.
.duo 50/50 text panel + photo panel, alternating side to side
.solo full-width centred text
.beat the Iana quote, the one dark drop in the page
Photo panels crop to fill their half and match the height of the
text panel beside them.
═══════════════════════════════════════════════════════════════ */
:root{
--ink:#1d1a15; --parch:#f7f2e8; --parch-2:#efe7d6; --panel:#17130d;
--gold:#b0842b; --gold-bright:#fecb3e; --muted:#6b6357;
--line:rgba(29,26,21,.13); --line-g:rgba(254,203,62,.32);
--body:#3a352c; --wrap:1140px;
--pad-y:clamp(58px,6.5vw,96px); --pad-x:clamp(26px,4.4vw,74px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--parch);color:var(--ink);
font-family:Raleway,-apple-system,Segoe UI,Roboto,sans-serif;
font-weight:400;font-size:17px;line-height:1.74;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h2{font-family:Cinzel;font-weight:500;color:var(--gold);letter-spacing:.02em;
font-size:clamp(25px,3.1vw,40px);line-height:1.17;margin:0}
h3{font-family:Cinzel;font-weight:500;letter-spacing:.03em;
font-size:clamp(17px,1.9vw,21px);line-height:1.32;color:var(--gold);margin:0 0 10px}
p{margin:0 0 1.05em;color:var(--body)}
b{color:var(--ink);font-weight:600}
.crule{width:52px;height:2px;background:var(--gold);border:0;margin:22px 0 26px}
.solo .crule,.beat .crule{margin-left:auto;margin-right:auto}
.lead-in{color:var(--muted);font-size:clamp(16.5px,1.75vw,18px);margin:0 0 28px}
.cream-close{font-family:Cinzel;font-weight:400;color:var(--ink);
font-size:clamp(17px,2vw,21px);line-height:1.5;margin:34px 0 0}
.solo .cream-close{max-width:56ch;margin-left:auto;margin-right:auto}
.em{display:block;font-weight:600;color:var(--ink);margin:14px 0 0}
.btn{font-family:Raleway;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
font-size:12px;border-radius:2px;padding:15px 30px;text-decoration:none;
display:inline-block;transition:.2s;border:1.5px solid transparent}
.btn-solid{background:var(--gold);color:#fff}.btn-solid:hover{background:#96701f}
.btn-ghost{border-color:var(--gold);color:var(--ink)}
.btn-ghost:hover{background:var(--gold);color:#fff}
/* ── header ── */
.site{position:sticky;top:0;z-index:40;background:rgba(247,242,232,.94);
backdrop-filter:saturate(1.1) blur(9px);border-bottom:1px solid var(--line)}
.site .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:11px clamp(16px,3.5vw,44px)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{height:54px;width:auto}
.brand .wm{font-family:Cinzel;font-weight:500;font-size:clamp(15px,1.8vw,24px);
line-height:1.05;letter-spacing:.03em;color:var(--ink)}
.site .btn{white-space:nowrap;padding:11px 18px;font-size:11px}
/* ── sticky nav: CTA + hamburger + dropdown panel ── */
.site .bar{position:relative}
.bar-r{display:flex;align-items:center;gap:14px;margin-left:auto}
.site .btn{white-space:nowrap;padding:11px 18px;font-size:11px}
.navtog{background:none;border:0;padding:9px 5px;cursor:pointer;line-height:0;
-webkit-tap-highlight-color:transparent}
.navtog span{display:block;width:26px;height:2px;background:var(--ink);
margin:5px 0;border-radius:1px;transition:transform .25s,opacity .2s}
.navtog[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtog[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtog[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav{display:none;position:absolute;top:calc(100% + 10px);right:clamp(16px,3.5vw,44px);
z-index:60;min-width:164px;background:#fff;border:0.7px solid var(--gold);
border-radius:6px;box-shadow:0 12px 34px rgba(29,26,21,.13);
padding:8px 0;flex-direction:column}
.nav.open{display:flex}
.nav a{display:block;font-family:Raleway,-apple-system,Segoe UI,Roboto,sans-serif;
font-weight:600;letter-spacing:.09em;
text-transform:uppercase;font-size:11.5px;color:var(--ink);text-decoration:none;
padding:11px 15px;white-space:nowrap;transition:background .18s,color .18s}
.nav a:hover{background:rgba(176,132,43,.09);color:var(--gold)}
/* anchor targets clear the sticky header */
#challenge,#invitation,#breakthrough,#meet-iana,#archetypes,
#journey,#changes,#praise,#offering{scroll-margin-top:92px}
@media (max-width:900px){
.bar-r{gap:8px}
.nav{right:16px;left:16px;min-width:0}
.nav a{padding:14px 20px;font-size:12px;letter-spacing:.11em}
#challenge,#invitation,#breakthrough,#meet-iana,#archetypes,
#journey,#changes,#praise,#offering{scroll-margin-top:76px}
}
@media (max-width:600px){
/* the wordmark cannot share one line with a CTA and a hamburger at this
width — it wrapped to three lines and pushed the toggle off-screen.
The logo mark carries the identity on its own here. */
/* The program name is the only thing identifying this property in
the masthead, so it stays. Smaller, allowed to wrap to two lines,
with the medallion giving up width to make room. Inherited from
NME, whose own wordmark is long enough that hiding it was
reasonable; here it is not. */
.brand .wm{display:block;font-size:15px;line-height:1.15;max-width:9.5em}
.brand img{height:46px;width:46px}
.brand{gap:9px}
.brand{gap:0}
.site .bar{padding:9px 14px}
.site .btn{padding:11px 13px;font-size:10px;letter-spacing:.06em}
.bar-r{gap:2px}
.navtog{padding:9px 0 9px 8px}
.navtog span{width:24px}
.nav{right:14px;left:auto;width:auto;min-width:158px;max-width:min(72vw,210px)}
.nav a{padding:12px 15px;font-size:11.5px;letter-spacing:.09em}
}
/* ═══════════ HERO — the only place text sits on a photograph ═══════════ */
.s-hero{position:relative;min-height:92vh;display:grid;align-items:center;
overflow:hidden;background:var(--panel)}
.s-hero__media,.s-hero__media img{position:absolute;inset:0;width:100%;height:100%}
.s-hero__media img{object-fit:cover;object-position:center 28%}
.s-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,
rgba(9,7,4,.44),rgba(9,7,4,.16) 42%,rgba(9,7,4,.76))}
.s-hero__inner{position:relative;text-align:center;color:#fff;max-width:1000px;
margin:0 auto;padding:130px 28px}
.s-hero .kicker{font-family:Cinzel;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;font-size:14px;color:var(--gold-bright);margin:0 0 20px}
.s-hero h1{font-family:Cinzel;font-weight:500;font-size:clamp(34px,5.6vw,70px);
line-height:1.06;letter-spacing:.012em;margin:0 0 26px;color:#fff;
text-shadow:0 2px 36px rgba(0,0,0,.6)}
.s-hero__sub{font-family:Cinzel;font-weight:400;font-size:clamp(17px,2.1vw,23px);
line-height:1.5;margin:0 auto 16px;max-width:34ch;color:#f2ece0;
text-shadow:0 2px 22px rgba(0,0,0,.7)}
.s-hero__tag{font-family:Cinzel;font-weight:400;font-size:clamp(16px,1.9vw,21px);
color:var(--gold-bright);letter-spacing:.03em;margin:0 0 14px;
text-shadow:0 2px 20px rgba(0,0,0,.75)}
.s-hero__with{font-family:Raleway;font-weight:500;letter-spacing:.1em;
text-transform:uppercase;font-size:12px;color:#cec4af;margin:0 0 36px;line-height:1.9}
/* ═══════════ DUO — text panel + photo panel ═══════════ */
.duo{display:grid;grid-template-columns:1fr 1fr;background:var(--parch);
border-top:1px solid var(--line)}
.duo.tint{background:var(--parch-2)}
.duo>.txt{padding:var(--pad-y) var(--pad-x);display:flex;flex-direction:column;
justify-content:center}
.duo>.txt>.inner{max-width:54ch}
.duo>.pic{position:relative;background:var(--panel);min-height:340px}
.duo>.pic img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center}
.duo.rev>.pic{order:1}
.duo.rev>.txt{order:2}
/* ═══════════ SOLO — full-width centred text ═══════════ */
.solo{background:var(--parch);padding:var(--pad-y) 0;border-top:1px solid var(--line)}
.solo.tint{background:var(--parch-2)}
.solo>.inner{max-width:820px;margin:0 auto;padding:0 28px;text-align:center}
.solo.wide>.inner{max-width:1000px}
.solo .lead-in{max-width:60ch;margin-left:auto;margin-right:auto}
/* ── shared content blocks ── */
.plist,.s-list{list-style:none;margin:24px 0 0;padding:0;text-align:left}
.solo .plist,.solo .s-list{max-width:660px;margin-left:auto;margin-right:auto}
.plist li,.s-list li{position:relative;padding:12px 0 12px 27px;
border-bottom:1px solid var(--line);font-size:16.5px;color:var(--body)}
.plist li:last-child,.s-list li:last-child{border-bottom:0}
.plist li:before,.s-list li:before{content:"";position:absolute;left:2px;top:20px;
width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.cream-bullets{list-style:none;margin:24px 0 0;padding:0;columns:2;column-gap:44px;
text-align:left;max-width:820px;margin-left:auto;margin-right:auto}
.cream-bullets li{position:relative;padding:8px 0 8px 26px;font-size:16.5px;
color:var(--body);break-inside:avoid}
.cream-bullets li:before{content:"";position:absolute;left:2px;top:17px;width:7px;
height:7px;background:var(--gold);transform:rotate(45deg)}
@media (max-width:820px){.cream-bullets{columns:1}}
.pemotions{display:flex;flex-direction:column;gap:4px;margin:22px 0}
.solo .pemotions{align-items:center}
.pemotions span{font-family:Raleway;font-size:clamp(15.5px,1.8vw,18px);
color:var(--body)}
.outcomes{margin:24px 0 0;text-align:left}
.solo .outcomes{max-width:720px;margin-left:auto;margin-right:auto}
.outcomes .o{padding:22px 0;border-top:1px solid var(--line)}
.outcomes .o:first-child{border-top:0;padding-top:4px}
.outcomes .o p{font-size:16.5px;line-height:1.72;margin:0 0 11px}
.outcomes .o p:last-child{margin-bottom:0}
.pweeks{list-style:none;margin:24px 0 0;padding:0;text-align:left}
.solo .pweeks{max-width:680px;margin-left:auto;margin-right:auto}
.pweeks li{padding:11px 0;border-bottom:1px solid var(--line);font-size:16.5px;
color:var(--body)}
.pweeks li:last-child{border-bottom:0}
.pweeks .wk{font-family:Cinzel;font-weight:600;font-size:12px;letter-spacing:.06em;
color:var(--gold);display:inline-block;min-width:92px;margin-right:12px}
.from-to{list-style:none;margin:24px 0 0;padding:0;text-align:left}
.solo .from-to{max-width:860px;margin-left:auto;margin-right:auto}
.from-to li{padding:15px 0;border-bottom:1px solid var(--line);font-size:16.5px;
line-height:1.58;color:var(--body)}
.from-to li:last-child{border-bottom:0}
.from-to .f{color:var(--muted)}
.from-to .arw{color:var(--gold);font-weight:600;margin:0 10px}
.from-to .t{color:var(--ink);font-weight:500}
.filter-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);
max-width:920px;margin:26px auto 0;text-align:left}
.filter-cols ul{list-style:none;margin:0;padding:0}
.filter-cols li{position:relative;padding:11px 0 11px 26px;
border-bottom:1px solid var(--line);font-size:16px;color:var(--body)}
.filter-cols li:last-child{border-bottom:0}
.filter-cols li:before{content:"";position:absolute;left:2px;top:19px;width:7px;
height:7px;background:var(--gold);transform:rotate(45deg)}
@media (max-width:820px){.filter-cols{grid-template-columns:1fr;gap:26px}}
.cols{column-count:2;column-gap:46px;text-align:left;max-width:860px;margin:24px auto 0}
.cols p{font-size:16.5px;line-height:1.74;break-inside:avoid}
@media (max-width:820px){.cols{column-count:1}}
.pq{max-width:600px;margin:32px auto 0;padding:22px 0 0;border-top:1px solid var(--line)}
.duo .pq{margin-left:0}
.pq blockquote{margin:0 0 10px;font-style:italic;color:var(--body);
font-size:clamp(16px,1.8vw,18.5px);line-height:1.64}
.pq figcaption{font-family:Cinzel;font-weight:500;font-size:12.5px;
letter-spacing:.07em;color:var(--gold)}
/* ═══════════ THE BEAT ═══════════ */
.beat{background:var(--panel);padding:clamp(64px,10vh,120px) 0;
border-top:1px solid var(--line-g);border-bottom:1px solid var(--line-g)}
.beat blockquote{max-width:960px;margin:0 auto;padding:0 30px;font-family:Cinzel;
font-weight:400;color:var(--gold-bright);font-size:clamp(21px,3vw,36px);
line-height:1.36;text-align:center}
.beat figcaption{text-align:center;font-family:Cinzel;font-weight:500;font-size:13px;
letter-spacing:.22em;text-transform:uppercase;color:#a2947a;margin:30px 0 0}
/* ═══════════ ARCHER — the one overlay section, unchanged ═══════════ */
.psec{position:relative;display:grid;overflow:hidden;background:var(--panel)}
.psec>.media{grid-area:1/1;position:relative;width:100%}
.psec>.media img{width:100%;height:100%;object-fit:cover;object-position:center}
.psec>.scrim{grid-area:1/1;z-index:1;background:linear-gradient(180deg,
rgba(6,5,3,.34),rgba(6,5,3,.22) 40%,rgba(6,5,3,.42))}
.psec>.overlay{grid-area:1/1;position:relative;z-index:2;display:flex;
align-items:center;justify-content:center;padding:9vh 7vw}
.plate-box{max-width:840px;margin:0 auto;text-align:center;
background:rgba(11,9,5,.78);border:1px solid var(--line-g);border-radius:4px;
padding:clamp(30px,3.6vw,52px) clamp(24px,3.4vw,54px);
box-shadow:0 24px 70px rgba(0,0,0,.46);backdrop-filter:blur(3px) saturate(1.05)}
.plate-box h2{color:var(--gold-bright);text-shadow:0 2px 22px rgba(0,0,0,.6)}
.plate-box .crule{background:var(--gold-bright);margin-left:auto;margin-right:auto}
.pquotes{max-width:700px;margin:0 auto;text-align:left}
.pquote{margin:0 0 26px;padding:0 0 24px;border-bottom:1px solid rgba(254,203,62,.2)}
.pquote:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.pquote blockquote{margin:0 0 11px;font-style:italic;color:#f1ebdf;
font-size:clamp(15.5px,1.7vw,18px);line-height:1.64}
.pquote figcaption{font-family:Cinzel;font-weight:500;font-size:12.5px;
letter-spacing:.05em;color:var(--gold-bright)}
.pquote.ph blockquote{color:#a99a7e;font-style:normal}
.plate-lbl{font-family:Cinzel;font-weight:500;font-size:12.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-bright);margin:34px 0 20px;padding-top:22px;
border-top:1px solid rgba(254,203,62,.2);text-align:center}
/* ═══════════ VIDEO ═══════════ */
.cream-video{max-width:920px;margin:8px auto 0;border:2px solid var(--gold);padding:4px;
background:#000}
.cream-video__frame{position:relative;padding-top:56.25%;background:#000;overflow:hidden}
.cream-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-note{font-style:italic;color:var(--muted);margin:26px auto 0;max-width:52ch;
font-size:16.5px}
.cream-cta{margin:30px 0 0}
/* ═══════════ SESSION SCHEDULE ═══════════ */
.tz{max-width:720px;margin:26px auto 0;display:grid;gap:9px}
.tz .r{display:flex;justify-content:space-between;gap:20px;padding:14px 18px;
border:1px solid var(--line);border-radius:3px;background:#fbf7ee;text-align:left}
.tz .g{font-weight:600;font-size:15px;color:var(--ink)}
.tz .t{font-family:Cinzel;font-size:13px;color:var(--gold);text-align:right}
@media (max-width:820px){.tz .r{flex-direction:column;gap:5px}.tz .t{text-align:left}}
.dates{font-family:Cinzel;color:var(--gold);font-size:clamp(15.5px,1.8vw,19px);
line-height:1.7;margin:24px 0 0}
/* ═══════════ VALUE STACK ═══════════ */
.vlist{max-width:800px;margin:26px auto 0}
.vrow{display:flex;justify-content:space-between;align-items:baseline;gap:26px;
padding:16px 0;border-bottom:1px solid var(--line);text-align:left}
.vrow:last-child{border-bottom:0}
.vitem{font-size:16.5px;color:var(--body)}
.vval{font-family:Cinzel;font-weight:500;color:var(--gold);white-space:nowrap;
font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.vtotal{display:flex;justify-content:space-between;align-items:baseline;max-width:800px;
margin:16px auto 0;padding:20px 0 0;border-top:2px solid var(--gold)}
.vt-l{font-family:Cinzel;font-weight:500;font-size:clamp(18px,2.2vw,23px)}
.vt-r{font-family:Cinzel;font-weight:600;color:var(--gold);font-size:clamp(22px,3vw,33px)}
/* ═══════════ PRICING ═══════════ */
.s-invest{background:var(--parch-2);padding:var(--pad-y) 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s-invest .inner{max-width:900px;margin:0 auto;padding:0 28px;text-align:center}
.s-emph{font-family:Cinzel;font-weight:500;color:var(--gold);
font-size:clamp(24px,3.3vw,40px);margin:0 0 12px;letter-spacing:.02em}
.s-line{color:var(--muted);font-size:16.5px;margin:0}
.countdown{font-family:Cinzel;font-weight:500;letter-spacing:.07em;color:var(--gold);
font-size:clamp(14.5px,1.8vw,18px);margin:22px 0 0}
.countdown span{font-variant-numeric:tabular-nums}
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;
max-width:860px;margin:32px auto 0}
.pcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
padding:30px 20px;background:#fbf7ee;border:1px solid var(--line);border-radius:3px;
text-decoration:none;transition:.2s}
.pcard:hover{border-color:var(--gold);box-shadow:0 14px 38px rgba(29,26,21,.1);
transform:translateY(-2px)}
.pcard__plan{font-family:Cinzel;font-size:13px;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted)}
.pcard__amt{font-family:Cinzel;font-weight:600;font-size:clamp(28px,3.3vw,39px);
line-height:1;color:var(--ink)}
.pcard__sub{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
color:var(--muted)}
.pcard__btn{margin-top:12px;width:100%;font-family:Raleway;font-weight:600;font-size:11px;
letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--gold);
border-radius:2px;padding:13px}
.pcard:hover .pcard__btn{background:#96701f}
@media (max-width:820px){.price-cards{grid-template-columns:1fr}}
.price-ref{max-width:520px;margin:30px auto 0;padding:16px 22px;border:1px solid var(--line);
border-radius:3px;background:#fbf7ee;font-size:15.5px;color:var(--muted)}
.price-ref b{font-family:Cinzel;font-weight:600;color:var(--gold);font-size:17px}
.invest-note{font-family:Cinzel;font-size:clamp(16.5px,1.9vw,20px);line-height:1.48;
max-width:54ch;margin:30px auto 0}
.guarantee-box{max-width:700px;margin:26px auto 0;border:1.5px solid var(--gold);
border-radius:3px;padding:clamp(30px,4vw,44px);background:#fbf7ee}
.guarantee-box p{font-size:17px;line-height:1.74;margin:0}
.closed-note{max-width:640px;margin:0 auto;border:1.5px solid var(--gold);border-radius:3px;
padding:clamp(30px,4vw,44px);background:#fbf7ee}
.closed-note h3{margin:0 0 14px;font-size:clamp(20px,2.5vw,26px);color:var(--ink)}
.closed-note p{font-size:16.5px;margin:0 0 24px}
/* ── FAQ ── */
.faq{border-bottom:1px solid var(--line);text-align:left}
.faq:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;font-family:Cinzel;font-weight:500;
font-size:clamp(16px,1.8vw,19px);padding:19px 44px 19px 0;position:relative;
color:var(--ink);line-height:1.36}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:16px;font-family:Raleway;
font-size:24px;color:var(--gold);transition:.2s}
.faq[open] summary:after{content:"\2212"}
.faq__a{padding:0 44px 21px 0}
.faq__a p{font-size:16.5px;margin:0}
/* ── footer ── */
footer{background:var(--parch-2);color:var(--body);padding:58px 0 46px;font-size:13px;
border-top:1px solid var(--line)}
footer .top{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.social{display:flex;gap:17px}
.social a{width:38px;height:38px;border:1px solid rgba(29,26,21,.2);border-radius:50%;
display:grid;place-items:center;transition:.2s}
.social a:hover{border-color:var(--gold);background:rgba(176,132,43,.08)}
.social svg{width:16px;height:16px;fill:var(--muted)}
.social a:hover svg{fill:var(--gold)}
.legal{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.legal a{text-decoration:none;border-bottom:1px solid transparent}
.legal a:hover{border-color:var(--gold)}
.copy-line{color:#8a806b;margin:22px 0 0;text-align:center;font-size:12.5px}
/* ── enrollment page ── */
.enroll-head{padding:clamp(60px,8vw,100px) 0 0;text-align:center}
.enroll-head h1{font-family:Cinzel;font-weight:500;font-size:clamp(30px,4.4vw,50px);
line-height:1.1;color:var(--ink);max-width:18ch;margin:0 auto}
.enroll-head .lede{max-width:56ch;margin:26px auto 0;font-size:17px}
.enroll-mini{list-style:none;max-width:660px;margin:26px auto 0;padding:0}
.enroll-mini li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
padding:12px 0;border-bottom:1px solid var(--line);text-align:left}
.enroll-mini li:last-child{border-bottom:0}
.enroll-mini .mi{font-size:16px;color:var(--body)}
.enroll-mini .mv{font-family:Cinzel;font-weight:500;font-size:13px;color:var(--muted);
white-space:nowrap}
/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:900px){
.duo{grid-template-columns:1fr}
.duo>.pic,.duo.rev>.pic{order:1;min-height:56vw;max-height:520px}
.duo>.txt,.duo.rev>.txt{order:2}
.duo>.txt>.inner{max-width:none}
.s-hero{min-height:78vh}.s-hero__inner{padding:100px 24px}
.psec>.overlay{padding:56px 24px}
.plate-box{padding:28px 22px}
.pweeks .wk{display:block;min-width:0;margin:0 0 3px}
.brand img{height:44px}
}
@media (max-width:520px){.btn{padding:14px 22px}}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}html{scroll-behavior:auto}
}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET — 2026.07.26
═══════════════════════════════════════════════════════════════ */
/* (3) emotions set over the volcano, centred, white */
.duo>.pic{overflow:hidden}
.pic-ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
align-items:center;justify-content:center;padding:34px 22px;
background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.30))}
.pic-ov .pemotions{display:flex;flex-direction:column;align-items:center;gap:2px;
margin:0}
.pic-ov .pemotions span{font-family:Raleway;font-weight:400;color:#fff;
font-size:clamp(14px,1.55vw,19px);line-height:1.42;letter-spacing:.02em;
text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 34px rgba(0,0,0,.6)}
/* (4) gold hairline as a border, not a frame — gap now reads as cream */
.cream-video{background:transparent;padding:5px}
/* (5) optional hairlines between sub-blocks */
.outcomes.noline .o{border-top:0;padding:16px 0}
.outcomes.noline .o:first-child{padding-top:4px}
.s-list.noline li{border-bottom:0;padding:9px 0 9px 27px}
.s-list.noline li:before{top:17px}
/* (6) twelve-week journey — both columns at one size */
.pweeks li{font-size:17px}
.pweeks .wk{font-size:17px;min-width:118px;letter-spacing:.03em}
/* (7) value stack maps to the journey sizing */
.vitem{font-size:17px}
.vval{font-size:17px;text-transform:none;letter-spacing:.02em}
/* (8) session schedule — raised luminosity */
.solo.lum{background:#fdfaf1}
.solo.lum .tz .r{background:#fffdf7}
/* (9) payment boxes get a gold hairline */
.pcard{border:1.5px solid var(--gold)}
.pcard:hover{border-color:#96701f}
/* (9)(10)(11) animated gold gradient on primary CTAs */
@keyframes goldflow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.pcard__btn,.btn-anim{
background-image:linear-gradient(100deg,#a87d26 0%,#fecb3e 25%,#e0ad33 50%,
#fecb3e 75%,#a87d26 100%);
background-size:200% 100%;animation:goldflow 5s linear infinite}
.btn-anim{color:#2a2008;border-color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn-anim:hover{filter:brightness(1.07)}
.pcard__btn{color:#2a2008;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.pcard:hover .pcard__btn{background-image:linear-gradient(100deg,#a87d26 0%,#fecb3e 25%,
#e0ad33 50%,#fecb3e 75%,#a87d26 100%);filter:brightness(1.07)}
/* (11) 'Not Sure' returns to the photograph */
.psec.tall{min-height:74vh}
.psec.tall>.media,.psec.tall>.media img{position:absolute;inset:0;width:100%;height:100%}
.psec.tall>.media img{object-fit:cover;object-position:center 42%}
.psec.tall>.scrim{position:absolute;inset:0;background:linear-gradient(180deg,
rgba(6,7,9,.46),rgba(6,7,9,.24) 42%,rgba(6,7,9,.62))}
.psec.tall>.overlay{position:relative;z-index:2;min-height:74vh;padding:11vh 7vw}
.psec .p-in{max-width:720px;margin:0 auto;text-align:center}
.psec .p-in h2{color:var(--gold-bright);text-shadow:0 2px 26px rgba(0,0,0,.75)}
.psec .p-in .crule{background:var(--gold-bright);margin-left:auto;margin-right:auto}
.psec .p-in p{color:#f4efe6;font-size:clamp(16px,1.85vw,20px);
text-shadow:0 2px 18px rgba(0,0,0,.9)}
/* (12) closing photograph — tighter crop, figure fills more of the frame */
.duo>.pic.zoom img{transform:scale(1.11);transform-origin:center}
@media (max-width:900px){
.psec.tall,.psec.tall>.overlay{min-height:60vh}
.psec.tall>.overlay{padding:64px 26px}
.pic-ov{padding:26px 18px}
.pweeks .wk{min-width:0;display:block;margin:0 0 3px}
}
/* ═══════════════════════════════════════════════════════════════
CTA UNIFICATION — every primary button carries the animated gold
═══════════════════════════════════════════════════════════════ */
.btn-solid,.btn-anim,.pcard__btn{
background-image:linear-gradient(100deg,#a87d26 0%,#fecb3e 25%,#e0ad33 50%,
#fecb3e 75%,#a87d26 100%);
background-size:200% 100%;
background-color:#c4922e;
animation:goldflow 5s linear infinite;
color:#2a2008;
border-color:transparent;
text-shadow:0 1px 0 rgba(255,255,255,.28)}
.btn-solid:hover,.btn-anim:hover,.pcard:hover .pcard__btn{
background-image:linear-gradient(100deg,#a87d26 0%,#fecb3e 25%,#e0ad33 50%,
#fecb3e 75%,#a87d26 100%);
background-color:#c4922e;
filter:brightness(1.08)}
/* on the hero and the surfer the button sits on a photograph — lift it */
.s-hero .btn-solid,.psec .btn-solid,.psec .btn-anim{
box-shadow:0 6px 26px rgba(0,0,0,.42)}
@media (prefers-reduced-motion:reduce){
.btn-solid,.btn-anim,.pcard__btn{animation:none;background-position:25% 50%}
}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 2 — 2026.07.26
═══════════════════════════════════════════════════════════════ */
/* (1) gradient dialled back — narrower value range, much slower sweep.
Reads as a slow sheen across metal rather than a moving stripe. */
.btn-solid,.btn-anim,.pcard__btn{
background-image:linear-gradient(100deg,
#b98c2c 0%, #c9992f 22%, #d8ab39 42%, #c9992f 62%, #b98c2c 100%);
background-size:260% 100%;
background-color:#c4922e;
animation:goldflow 18s linear infinite;
color:#fdf7e6;
text-shadow:0 1px 2px rgba(60,42,8,.45)}
.btn-solid:hover,.btn-anim:hover,.pcard:hover .pcard__btn{
background-image:linear-gradient(100deg,
#b98c2c 0%, #c9992f 22%, #d8ab39 42%, #c9992f 62%, #b98c2c 100%);
filter:brightness(1.05)}
@media (prefers-reduced-motion:reduce){
.btn-solid,.btn-anim,.pcard__btn{animation:none;background-position:42% 50%}
}
/* (2) footer credit */
.hp{font-family:Cinzel;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
font-size:11.5px;color:var(--gold);margin:0 0 4px}
/* (3) emotions — spaced, each in a gold-hairline plate */
.pic-ov{padding:40px 26px}
.pic-ov .pemotions{gap:clamp(7px,1vw,12px)}
.pic-ov .pemotions span{
border:1px solid rgba(254,203,62,.62);border-radius:7px;
padding:clamp(5px,.7vw,8px) clamp(14px,1.7vw,24px);
background:rgba(12,9,4,.40);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
box-shadow:0 2px 14px rgba(0,0,0,.34);
font-size:clamp(12.5px,1.35vw,17px);line-height:1.3;
text-shadow:0 1px 8px rgba(0,0,0,.8)}
/* (4) hero — CTA clears the boots, credit line up 50% */
.s-hero__with{font-size:18px;line-height:1.75}
.s-hero .btn{position:relative;top:var(--hero-cta-drop)}
:root{--hero-cta-drop:54px} /* tune this one number to sit it on the rock */
/* (5) 'Is This You?' — one grid, matched rows, extra head-space */
.solo .filter-cols{display:grid;grid-template-columns:1fr 1fr;
column-gap:clamp(26px,4vw,56px);max-width:960px;margin:8px auto 0;text-align:left}
.filter-cols h3{font-family:Cinzel;font-weight:500;font-size:19px;color:var(--gold);
margin:0 0 12px;align-self:end}
/* (superseded — filter columns are plain lists now) */
/* (5) 30px more air above the headline in this section */
.solo.headroom{padding-top:calc(var(--pad-y) + 30px)}
/* (6) seamless butt between stacked photo sections — no hairline anywhere */
.duo,.solo,.psec{border-top:0}
.duo>.pic{line-height:0;font-size:0}
.duo>.pic img{display:block;backface-visibility:hidden}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 3 — 2026.07.26
═══════════════════════════════════════════════════════════════ */
/* (4) emotions: gold plate removed, plain white over the volcano */
.pic-ov{padding:38px 24px;
background:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.34))}
.pic-ov .pemotions{gap:clamp(6px,.85vw,11px)}
.pic-ov .pemotions span{
border:0;border-radius:0;padding:0;background:none;
-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
color:#fff;font-size:clamp(13px,1.4vw,18px);line-height:1.34;
letter-spacing:.02em;
text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.75)}
/* (11) 'Is NME For You?' — hairlines out, prior spacing back.
The matched-row grid stays, so the columns still finish level. */
/* (17) 'Not Sure' — 20px more top and bottom, text stays centred */
.psec.tall>.overlay{padding-top:calc(11vh + 20px);padding-bottom:calc(11vh + 20px)}
@media (max-width:900px){
.psec.tall>.overlay{padding-top:calc(64px + 20px);padding-bottom:calc(64px + 20px)}
}
/* ═══════════════════════════════════════════════════════════════
LAYOUT CAP — confirmed at the 27" preview
Above 1600px the split sections stop growing and centre. Photo
panels top out at 800px wide, so framing is stable everywhere
at or above 1600 and the page stops thinning out on big monitors.
═══════════════════════════════════════════════════════════════ */
.duo{max-width:1600px;margin-left:auto;margin-right:auto}
/* new hero (1.635 ratio) — inline object-position from CFG["hero_pos"] wins */
.s-hero__media img{object-position:center 50%}
/* ═══════════════════════════════════════════════════════════════
HERO — whole photograph, nothing cropped.
The sky was extended in Photoshop to hold the eyebrow and headline,
so the section takes the image's native height and the copy splits:
eyebrow + H1 into the sky, everything else down onto the rock.
Iana is left clear in the middle of the frame.
═══════════════════════════════════════════════════════════════ */
.s-hero{position:relative;display:grid;min-height:0;overflow:visible;
background:var(--panel)}
.s-hero__media{grid-area:1/1;position:relative;inset:auto;width:100%;height:auto}
.s-hero__media img{position:relative;inset:auto;width:100%;height:auto;
object-fit:fill;display:block}
.s-hero__scrim{grid-area:1/1;position:relative;background:linear-gradient(180deg,
rgba(9,7,4,.46) 0%,rgba(9,7,4,.20) 22%,rgba(9,7,4,.04) 44%,
rgba(9,7,4,.10) 66%,rgba(9,7,4,.62) 100%)}
.s-hero__inner{grid-area:1/1;position:relative;z-index:2;display:flex;
flex-direction:column;justify-content:space-between;align-items:center;
padding:clamp(30px,4.4vw,74px) 28px clamp(26px,3.4vw,58px);
max-width:1200px;margin:0 auto;width:100%;text-align:center}
.hero-sky,.hero-rock{width:100%}
.s-hero h1{margin:0}
.s-hero .kicker{margin:0 0 16px}
.s-hero__sub{margin:0 auto 12px;max-width:36ch}
.s-hero__tag{margin:0 0 10px}
.s-hero__with{margin:0 0 22px;max-width:52ch;margin-left:auto;margin-right:auto}
:root{--hero-cta-drop:0px} /* copy now sits on the rock; nudge if needed */
/* on a phone a 1.6:1 hero is ~240px tall — far too short to hold copy.
Show the whole photograph, then set the words beneath it on panel. */
@media (max-width:900px){
.s-hero{display:block}
.s-hero__scrim{display:none}
.s-hero__inner{display:block;background:var(--panel);
padding:34px 24px 40px;max-width:none}
.hero-sky{margin:0 0 20px}
.s-hero h1,.s-hero__sub,.s-hero__tag,.s-hero__with{text-shadow:none}
}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 4 — 2026.07.27
Two golds now, deliberately:
--copper #b0842b the original — hairlines, rules, quiet marks
--gold-cta #c9992f the CTA gold — buttons and their borders
═══════════════════════════════════════════════════════════════ */
:root{--copper:#b0842b;--gold-cta:#c9992f}
/* (1) header button matches the CTAs, and fills with the CTA gold on hover */
.btn-ghost{border-color:var(--gold-cta);color:var(--ink);background:none}
.btn-ghost:hover{
background-image:linear-gradient(100deg,#b98c2c 0%,#c9992f 22%,#d8ab39 42%,
#c9992f 62%,#b98c2c 100%);
background-size:260% 100%;background-color:var(--gold-cta);
border-color:transparent;color:#fdf7e6;
animation:goldflow 18s linear infinite}
/* (2b)(7c)(10c) pull-quote hairlines in copper, attribution up 40% */
.pq{border-top-color:var(--copper)}
.pq figcaption{font-size:17.5px} /* was 12.5px */
/* (4b)(4c) wall bullets: no rules, and matched air above and below */
.plist li{border-bottom:0;padding:9px 0 9px 27px}
.plist li:before{top:17px}
.plist{margin:24px 0 30px}
/* (6) the questions — one per line, generous separation */
.beat blockquote{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px);
max-width:1020px}
.beat blockquote span{display:block}
/* (7) callouts inside You've Tried — italic, not bold */
.cream-steps .st .cal,.outcomes .o .cal{display:inline;font-style:italic;
font-weight:400;color:inherit}
.cream-steps .st .em{display:inline;font-weight:400;color:inherit}
/* (16b)(16e) outcomes list — room for "communication", even columns */
.cream-bullets{max-width:900px;column-gap:40px}
/* (17b)(17d) From / To in the headline gold */
.from-to .f i,.from-to .t i{font-style:normal;font-weight:600;color:var(--copper);
margin-right:5px}
/* (17e) more air before the closing paragraph */
.from-to{margin-bottom:20px}
/* (18) filter bullets tightened to match the outcomes list */
.filter-cols h3{margin:0 0 4px}
/* (21) schedule up 20%, ratio between geography and time preserved */
.dates{font-size:clamp(18.5px,2.15vw,23px)}
.tz .g{font-size:18px}
.tz .t{font-size:15.5px}
/* (23) 'Not Sure' — 30px more top and bottom, copy still dead centre */
.psec.tall>.overlay{padding-top:calc(11vh + 50px);padding-bottom:calc(11vh + 50px)}
@media (max-width:900px){
.psec.tall>.overlay{padding-top:calc(64px + 50px);padding-bottom:calc(64px + 50px)}
}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 5 — 2026.07.28
═══════════════════════════════════════════════════════════════ */
/* (1) 'Is NME For You?' — two ordinary lists again.
The matched-row grid was setting each row to the height of the
TALLER of the two bullets, so a one-line bullet opposite a
three-line bullet inherited all that empty space. Rhythm now
comes from the same padding as .cream-bullets. */
.filter-cols{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(26px,4vw,56px);max-width:960px;margin:26px auto 0;
text-align:left;align-items:start}
.filter-cols h3{margin:0 0 10px}
.filter-cols .fl{list-style:none;margin:0;padding:0}
.filter-cols .fl li{position:relative;padding:8px 0 8px 26px;
font-size:16.5px;color:var(--body);border:0}
.filter-cols .fl li:before{content:"";position:absolute;left:2px;top:17px;
width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
@media (max-width:820px){.filter-cols{grid-template-columns:1fr;gap:26px}}
/* (2) 'Not Sure' — 35px more photograph above and below the copy,
which keeps the text block dead centre and just opens the frame */
.psec.tall{min-height:calc(74vh + 70px)}
.psec.tall>.overlay{min-height:calc(74vh + 70px);
padding-top:calc(11vh + 85px);padding-bottom:calc(11vh + 85px)}
@media (max-width:900px){
.psec.tall,.psec.tall>.overlay{min-height:calc(60vh + 70px)}
.psec.tall>.overlay{padding-top:calc(64px + 85px);padding-bottom:calc(64px + 85px)}
}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 6 — 2026.07.28 (annotated review)
═══════════════════════════════════════════════════════════════ */
/* (3) 'Is NME For You?' — widen the columns so 'holds' pulls up onto
line 2 and 'Actually commit.' stops stranding a word. text-wrap
pretty is the belt-and-braces against any future widow. */
.filter-cols{max-width:1080px;gap:clamp(26px,3.4vw,48px)}
.filter-cols .fl li{text-wrap:pretty}
/* (5) the beat — 50px more air above the first question and below the last */
.beat{padding-top:calc(clamp(64px,10vh,120px) + 50px);
padding-bottom:calc(clamp(64px,10vh,120px) + 50px)}
/* (7) From / To — tighten the gap after the marker, and let the pairs
use the full text panel so 'market' and 'nothing' stay on line one */
.from-to{max-width:none}
.from-to .f i,.from-to .t i{margin-right:0}
.from-to li{text-wrap:pretty}
/* (9) 'Not Sure' — frame out another 30px top and bottom, headline on
one line and lifted, body dropped clear of the wave, CTA pushed down */
.psec.tall{min-height:calc(74vh + 130px)}
.psec.tall>.overlay{min-height:calc(74vh + 130px);
padding-top:calc(11vh + 115px);padding-bottom:calc(11vh + 115px)}
.psec .p-in{max-width:900px}
.psec.tall .p-in h2{margin-top:-20px;margin-bottom:0}
.psec.tall .p-in p:first-of-type{margin-top:40px}
.psec.tall .p-in .p-cta{margin:60px 0 0}
@media (max-width:900px){
.psec.tall,.psec.tall>.overlay{min-height:calc(60vh + 130px)}
.psec.tall>.overlay{padding-top:calc(64px + 115px);padding-bottom:calc(64px + 115px)}
.psec.tall .p-in h2{margin-top:0}
.psec.tall .p-in p:first-of-type{margin-top:24px}
.psec.tall .p-in .p-cta{margin:36px 0 0}
}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 7 — 2026.07.28
═══════════════════════════════════════════════════════════════ */
/* (1)(2) Headlines in split sections were being squeezed into the 54ch
reading measure meant for body copy, so a two-line headline was
wrapping to three. The measure now governs the copy only; the
headline gets the full text panel. */
.duo>.cp{padding-left:clamp(26px,3.6vw,62px);padding-right:clamp(26px,3.6vw,62px)}
.duo>.cp>.inner{max-width:none}
.duo>.cp>.inner>p,
.duo>.cp>.inner>ul:not(.from-to),
.duo>.cp>.inner>ol,
.duo>.cp>.inner>.outcomes,
.duo>.cp>.inner>.pemotions,
.duo>.cp>.inner>figure{max-width:54ch}
.duo>.cp>.inner>h2{max-width:none;text-wrap:balance}
/* (3) 'Not Sure' — headline up another 25px, copy and CTA down 70px */
.psec.tall .p-in h2{margin-top:-45px}
.psec.tall .p-in p:first-of-type{margin-top:110px}
@media (max-width:900px){
.psec.tall .p-in h2{margin-top:0}
.psec.tall .p-in p:first-of-type{margin-top:24px}
}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 8 — headline sizing tied to the panel, not the viewport
Previous attempts set the headline from vw, so it was correct at
1600px and too large in a smaller window — which is why an explicit
still produced three lines. cqw measures the text panel itself,
so the longest segment fits at every width.
═══════════════════════════════════════════════════════════════ */
.duo>.cp{container-type:inline-size}
.duo>.cp>.inner>h2{font-size:clamp(21px,4.4cqw,38px);line-height:1.15}
/* 'Not Sure' — copy block and CTA down a further 70px (110 -> 180) */
.psec.tall .p-in p:first-of-type{margin-top:180px}
@media (max-width:900px){.psec.tall .p-in p:first-of-type{margin-top:24px}}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 9 — revert the global margin change, scope it properly
═══════════════════════════════════════════════════════════════ */
/* REVERT: padding and headline width go back to what they were.
Change set 7/8 applied these globally and pushed every headline
into the right margin. */
.duo>.cp{padding-left:var(--pad-x);padding-right:var(--pad-x)}
.duo>.cp>.inner{max-width:54ch}
.duo>.cp>.inner>h2{max-width:54ch;font-size:clamp(25px,3.1vw,40px);
text-wrap:wrap;line-height:1.17}
/* ONLY the two sections that need a two-line headline get the extra
width, and only their own headline — nothing else moves. */
.duo>.cp>.inner>h2.w2{max-width:none;font-size:clamp(21px,4.4cqw,38px);
line-height:1.15;text-wrap:balance}
/* 'Not Sure' — the overlay centres its content, so a margin makes the
block taller and the centring gives half of it straight back. These
are relative offsets: layout ignores them, so the movement is exact. */
.psec.tall .p-in h2{margin-top:0;margin-bottom:0;position:relative;top:-45px}
.psec.tall .p-in p:first-of-type{margin-top:0;position:relative;top:160px}
.psec.tall .p-in .p-cta{margin:60px 0 0;position:relative;top:160px}
@media (max-width:900px){
.psec.tall .p-in h2{top:0}
.psec.tall .p-in p:first-of-type{margin-top:24px;top:0}
.psec.tall .p-in .p-cta{margin:36px 0 0;top:0}
}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 10 — two headlines locked to two lines
Each line is its own block and cannot wrap. Size is driven by the
panel (cqw) at a coefficient that fits the longest line — 26
characters of Cinzel — at every panel width from 450px to 800px.
These two headlines therefore run smaller than the rest; at this
panel width 26 characters cannot sit on one line at 37px.
═══════════════════════════════════════════════════════════════ */
.duo>.cp>.inner>h2.w2{max-width:none;font-size:clamp(16px,3.9cqw,34px);
line-height:1.18;text-wrap:wrap}
.duo>.cp>.inner>h2.w2>span{display:block;white-space:nowrap}
/* below 900px the panel goes full width and nowrap would overflow —
let these wrap naturally there */
@media (max-width:900px){
.duo>.cp>.inner>h2.w2{font-size:clamp(25px,6.4vw,34px)}
.duo>.cp>.inner>h2.w2>span{white-space:normal}
}
/* ═══════════════════════════════════════════════════════════════
CHANGE SET 11 — revert. Both headlines back to the standard size
and standard wrapping, with the line break in the copy only.
The .w2 treatment is fully neutralised.
═══════════════════════════════════════════════════════════════ */
.duo>.cp>.inner>h2.w2,
.duo>.cp>.inner>h2{max-width:54ch;font-size:clamp(25px,3.1vw,40px);
line-height:1.17;text-wrap:wrap}
.duo>.cp>.inner>h2>span{display:inline;white-space:normal}
/* ═══════════════════════════════════════════════════════════════
TESTIMONIALS — summary + attribution always visible, body on demand.
First one open so the section never reads as empty. The three legacy
quotes below stay fully open and unchanged.
═══════════════════════════════════════════════════════════════ */
.tst{border-bottom:1px solid rgba(254,203,62,.20)}
.tst:last-of-type{border-bottom:0}
.tst summary{list-style:none;cursor:pointer;position:relative;
padding:17px 42px 17px 0}
.tst summary::-webkit-details-marker{display:none}
.tst summary:after{content:"+";position:absolute;right:4px;top:15px;
font-family:Raleway;font-weight:400;font-size:23px;line-height:1;
color:var(--gold-bright);transition:.18s}
.tst[open] summary:after{content:"\2212"}
.tst summary:hover .ts{color:#ffd964}
.ts{display:block;font-family:Cinzel;font-weight:500;
font-size:clamp(16px,1.9vw,20px);line-height:1.3;color:var(--gold-bright)}
.tn{display:block;font-family:Raleway;font-weight:500;font-size:12.5px;
letter-spacing:.07em;color:#c3b79f;margin:7px 0 0}
.tst blockquote{margin:0;padding:0 42px 22px 0;font-style:italic;color:#f1ebdf;
font-size:clamp(15.5px,1.7vw,17.5px);line-height:1.66}
@media (max-width:900px){
.tst summary{padding:15px 34px 15px 0}
.tst blockquote{padding:0 0 18px}
}
/* (2) quotation marks on every testimonial, new and legacy */
.tst blockquote::before,.pquote blockquote::before{content:"\201C"}
.tst blockquote::after,.pquote blockquote::after{content:"\201D"}
.tst blockquote::before,.tst blockquote::after,
.pquote blockquote::before,.pquote blockquote::after{color:var(--gold-bright);
font-style:normal}
/* legacy-block label up 40% (12.5px -> 17.5px) */
.plate-lbl{font-size:17.5px;letter-spacing:.16em}
/* ═══════════════════════════════════════════════════════════════
THE BEAT — indigo. Scoped to this section only; nothing else moves.
Gold sits 166 degrees from indigo on the wheel and 8 degrees from
the old chocolate. That hue gap, not contrast, is what makes it read
as luminous — the chocolate version actually had HIGHER contrast.
Radial gradient lifts the centre so the panel glows rather than sits.
═══════════════════════════════════════════════════════════════ */
.beat{
background:
radial-gradient(115% 85% at 50% 34%,
#3f4189 0%, #363878 38%, #2b2d63 68%, #23254e 100%);
border-top:1px solid rgba(254,203,62,.30);
border-bottom:1px solid rgba(254,203,62,.30);
position:relative}
/* a faint warm bloom behind the type, so the words lift off the field */
.beat:before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 45% at 50% 42%,
rgba(254,203,62,.09) 0%, rgba(254,203,62,0) 70%)}
.beat blockquote{position:relative;color:#ffd764}
.beat blockquote span{
text-shadow:0 1px 0 rgba(0,0,0,.35), 0 0 34px rgba(255,215,100,.22)}
.beat figcaption{color:#a9a6d0}
/* ═══════════════════════════════════════════════════════════════
THE BEAT — midnight navy, deepened. Core lifted to a phosphorescent
blue around the type, edges taken almost to black. Core-to-edge
lightness range widens from 19 points to 32, which is what reads
as depth rather than a flat field.
═══════════════════════════════════════════════════════════════ */
.beat{
background:
radial-gradient(88% 72% at 50% 42%,
#26339c 0%, #202b83 22%, #1c2770 40%, #0e1440 74%, #03051a 100%)}
.beat:before{
background:radial-gradient(52% 40% at 50% 44%,
rgba(120,150,255,.10) 0%, rgba(120,150,255,0) 72%)}
.beat blockquote span{
text-shadow:0 1px 0 rgba(0,0,0,.45), 0 0 40px rgba(255,215,100,.26)}
/* ═══════════════════════════════════════════════════════════════
COLOUR RECORD — indigo evaluation, 2026.07.28
Kept in the source of truth so it survives every rebuild.
Full reasoning and contrast tables: COLOUR-REFERENCE.md
───────────────────────────────────────────────────────────────
A royal indigo #2f3280 #262a66 #1b1e4e #12143a
B deep ink indigo #252a6b #1d2158 #151840 #0d0f2b
C violet indigo #332b78 #282262 #1c1848 #120f32 rejected: too near gold
D midnight navy #1f2a75 #18225e #111845 #080d2c SELECTED
E first attempt #3f4189 #363878 #2b2d63 #23254e superseded: too light
───────────────────────────────────────────────────────────────
D, deepened — in use:
#26339c #202b83 #1c2770 #0e1440 #03051a
core-to-edge lightness range 32 points (D as shown was 19)
gold #fecb3e clears 6.8:1 at the core, 13.3:1 at the edge
───────────────────────────────────────────────────────────────
Governing finding: gold on chocolate #17130d measures 12.2:1 with an 8
degree hue gap and reads dead. Gold on navy measures 7.4:1 with a 166
degree hue gap and reads luminous. Hue separation, not contrast ratio,
is what produces the sense of light. Apply to all future colour work.
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
HERO — copy and typography pass, 2026.07.28
Offsets use position:relative, not margin. The hero overlay is a
space-between flex column, so a margin would change the block height
and the layout would absorb part of every move. Relative offsets are
invisible to layout, so 60px is exactly 60px.
═══════════════════════════════════════════════════════════════ */
/* (3) eyebrow up 50% (14px -> 21px) */
.s-hero .kicker{font-size:21px;letter-spacing:.18em;margin:0 0 22px}
/* (4) headline and sub-headline down 10% (34/5.6vw/70 -> 31/5.04vw/63) */
.s-hero h1{font-size:clamp(31px,5.04vw,63px)}
/* (3)(4) eyebrow and headline both rise 60px — moved as one block */
.hero-sky{position:relative;top:-60px}
/* (6) tagline up 30% (16/1.9vw/21 -> 21/2.47vw/27), position unchanged */
.s-hero__tag{font-size:clamp(21px,2.47vw,27px)}
/* (5) CTA down 50px */
:root{--hero-cta-drop:50px}
@media (max-width:900px){
/* the hero stacks on a phone; offsets would push copy off the panel */
.hero-sky{top:0}
.s-hero .kicker{font-size:17px;margin:0 0 16px}
.s-hero__tag{font-size:clamp(18px,4.6vw,22px)}
}
/* ═══════════════════════════════════════════════════════════════
HERO — second typography pass, 2026.07.28
Headline and sub-headline now carry different sizes, so they are
separate spans inside the h1 rather than one line broken by
.
The h1 still reads as a single heading to a crawler.
═══════════════════════════════════════════════════════════════ */
/* (2) headline down 20% clamp(31,5.04vw,63) -> clamp(25,4.03vw,50) */
.s-hero h1{font-size:clamp(25px,4.03vw,50px)}
.s-hero h1 .hl{display:block}
/* (3) sub-headline down 30% clamp(31,5.04vw,63) -> clamp(22,3.53vw,44) */
.s-hero h1 .hsub{display:block;font-size:clamp(22px,3.53vw,44px);
margin:.34em 0 0;line-height:1.12}
/* (1)(2)(3) eyebrow, headline and sub-headline all rise a further 25px
(was -60, now -85) — still a relative offset, so layout absorbs none of it */
.hero-sky{top:-85px}
/* (4) CTA down a further 10px (was 50, now 60) */
:root{--hero-cta-drop:60px}
@media (max-width:900px){
.hero-sky{top:0}
.s-hero h1 .hsub{font-size:clamp(19px,4.4vw,26px);margin:.3em 0 0}
}
/* ═══════════════════════════════════════════════════════════════
HERO — third pass, 2026.07.28
═══════════════════════════════════════════════════════════════ */
/* (1) sub-headline sized so the full line holds on one line at every
viewport from 900px up. Re-verified 2026-09-14 against the current
61-character copy — the earlier 2.6vw was tuned to a 47-character
line and overflowed the viewport by up to 26px between 900 and 1200
once the copy grew. nowrap makes it structural rather than a fit,
so THIS COEFFICIENT IS COUPLED TO THE COPY: re-check the fit at
901px if the sub-headline is ever edited. */
.s-hero h1 .hsub{font-size:clamp(18px,2.50vw,32px);white-space:nowrap}
/* (2) CTA down a further 27px (60 -> 87) */
:root{--hero-cta-drop:87px}
@media (max-width:900px){
/* below 900 the hero stacks and the panel is far narrower — let it wrap */
.s-hero h1 .hsub{font-size:clamp(17px,4.2vw,23px);white-space:normal}
}
/* ═══════════════════════════════════════════════════════════════
HERO — fourth pass, 2026.07.28
(1) eyebrow, headline and sub-headline up a further 20px (-85 -> -105)
(2) CTA down to the mark on the rock (87 -> 155)
═══════════════════════════════════════════════════════════════ */
.hero-sky{top:-105px}
:root{--hero-cta-drop:155px}
@media (max-width:900px){.hero-sky{top:0}}
/* HERO — eyebrow, headline and sub-headline up a further 20px (-105 -> -125) */
.hero-sky{top:-125px}
@media (max-width:900px){.hero-sky{top:0}}
/* HERO — eyebrow, headline and sub-headline up a further 25px (-125 -> -150) */
.hero-sky{top:-150px}
@media (max-width:900px){.hero-sky{top:0}}
/* ═══════════════════════════════════════════════════════════════
HERO — fifth pass, 2026.07.28
═══════════════════════════════════════════════════════════════ */
/* (1) eyebrow, headline, sub-headline and now the tagline up 20px more
(-150 -> -170) */
.hero-sky{top:-170px}
/* (2) eyebrow takes the tagline's size and colour */
.s-hero .kicker{font-size:clamp(21px,2.47vw,27px);color:var(--gold-bright)}
/* (3) tagline now sits under the sub-headline as a second sub-head.
Size and colour unchanged; it just needs air above it. */
.hero-sky .s-hero__tag{margin:.55em 0 0}
@media (max-width:900px){
.hero-sky{top:0}
.s-hero .kicker{font-size:clamp(17px,4.4vw,21px)}
.hero-sky .s-hero__tag{margin:.5em 0 0}
}
/* ═══════════════════════════════════════════════════════════════
BUILD 53 — video frame ratio, and five mobile corrections
═══════════════════════════════════════════════════════════════ */
/* D1 + M1 · the video is 17:9, the frame was 16:9 — hence the black bands.
9/17 = 52.94%. The gold hairline is .cream-video wrapping this frame, so
it tightens by the same amount automatically. Desktop and mobile both. */
.cream-video__frame{padding-top:52.94%}
@media (max-width:900px){
/* M2 · hero copy block takes the same navy as the questions section */
.s-hero__inner{
background:radial-gradient(122% 76% at 50% 26%,
#26339c 0%, #202b83 22%, #1c2770 40%, #0e1440 74%, #03051a 100%)}
/* M3 · the CTA offset is a relative shift, invisible to layout — at 155px
it escaped the panel and landed on the next photograph. Off on mobile. */
:root{--hero-cta-drop:0px}
.s-hero .btn{top:0;margin-top:6px}
/* M4 · seventeen emotions in two columns, still over the photograph.
The last one runs long, so it spans both. */
.pemotions{display:grid;grid-template-columns:1fr 1fr;
gap:7px clamp(12px,4vw,22px);align-items:start;justify-items:center;
max-width:440px;margin:0 auto}
.pemotions span{font-size:clamp(12.5px,3.3vw,16px);line-height:1.34;
text-align:center}
.pemotions span:last-child{grid-column:1 / -1}
/* M5 · 'Not Sure' unstacks — photograph, then the copy on navy beneath it,
matching how every other section separates image from text on mobile.
Desktop is untouched. */
.psec.tall{display:block;min-height:0;overflow:visible}
.psec.tall>.media{position:relative;grid-area:auto;width:100%}
.psec.tall>.media img{position:relative;inset:auto;width:100%;height:auto;
aspect-ratio:3/2;object-fit:cover;object-position:center 42%}
.psec.tall>.scrim{display:none}
.psec.tall>.overlay{position:relative;grid-area:auto;display:block;
min-height:0;padding:40px 24px 46px;
background:radial-gradient(128% 84% at 50% 24%,
#26339c 0%, #202b83 22%, #1c2770 40%, #0e1440 74%, #03051a 100%)}
.psec.tall .p-in{max-width:none}
.psec.tall .p-in h2{position:static;top:auto;margin:0 0 4px}
.psec.tall .p-in p:first-of-type{position:static;top:auto;margin:22px 0 0}
.psec.tall .p-in .p-cta{position:static;top:auto;margin:30px 0 0}
}
/* ═══════════════════════════════════════════════════════════════
BUILD 54
═══════════════════════════════════════════════════════════════ */
/* 1 · 'Your Twelve-Week, Thirteen-Session Journey' takes the same navy as
the questions section — desktop and mobile, same five stops. */
.solo.navy{
background:radial-gradient(96% 74% at 50% 34%,
#26339c 0%, #202b83 22%, #1c2770 40%, #0e1440 74%, #03051a 100%);
border-top:1px solid rgba(254,203,62,.24);
border-bottom:1px solid rgba(254,203,62,.24)}
.solo.navy h2{color:var(--gold-bright)}
.solo.navy .crule{background:var(--gold-bright);opacity:.85}
.solo.navy p,.solo.navy li{color:#e6e2f0}
.solo.navy .lead-in,.solo.navy .lead-in b{color:#f0ecf8}
.solo.navy .pweeks li{border-color:rgba(254,203,62,.20)}
.solo.navy .pweeks .wk{color:var(--gold-bright)}
/* 2 · desktop only — the emotions block sits centred in the photo panel.
Drop it so its last line clears the last line of body copy beside it.
Relative offset, so the panel height is untouched. */
@media (min-width:901px){
.pic-ov .pemotions{position:relative;top:86px}
}
/* ═══════════════════════════════════════════════════════════════
BUILD 55 — the mobile volcano, properly this time.
Two faults in the build 53 attempt, both mine:
1. SPECIFICITY. The two-column rule was written as `.pemotions`
(0,1,0). The desktop rule is `.pic-ov .pemotions` (0,2,0) and
wins at every width regardless of source order, so the grid
never applied. Media queries do not raise specificity.
2. CLIPPING. `.pic` is clamped to `max-height:520px` on mobile and
`.pic-ov` is `position:absolute; inset:0` inside it. Seventeen
items in one column exceed that, so the list was centred and cut
off at both ends. Two columns alone would not have fixed it.
Fix: match the desktop specificity, make the overlay define its own
height, and release the clamp on the panel that carries it.
═══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
.duo .pic.has-ov{min-height:0;max-height:none}
.duo .pic.has-ov img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover}
.pic-ov{position:relative;inset:auto;padding:32px 16px}
.pic-ov .pemotions{display:grid;grid-template-columns:1fr 1fr;
gap:10px clamp(10px,4vw,20px);align-items:start;justify-items:center;
max-width:430px;margin:0 auto}
.pic-ov .pemotions span{font-size:clamp(12.5px,3.4vw,16px);line-height:1.32;
text-align:center}
.pic-ov .pemotions span:last-child{grid-column:1 / -1}
}
/* build 57 — the international-groups note under the schedule */
.tz-note{margin:18px auto 0;max-width:56ch;text-align:center;
font-size:15.5px;line-height:1.6;color:var(--muted)}
.tz-note a{color:var(--copper);text-decoration:underline;
text-underline-offset:3px;text-decoration-thickness:1px}
.tz-note a:hover{color:var(--gold-cta)}
/* build 58 — the international note sits on one line.
The solo inner is 820px wide with 28px padding each side = 764px of room.
92 characters of Raleway at 15px measures ~690px, so it fits with margin.
nowrap makes it structural; below 900px it wraps as normal. */
.tz-note{max-width:none;font-size:15px;white-space:nowrap}
@media (max-width:900px){
.tz-note{white-space:normal;max-width:44ch;font-size:15px}
}
/* ═══════════════════════════════════════════════════════════════
BUILD 59 — 'Is NME For You?' stacks on phones
═══════════════════════════════════════════════════════════════ */
/* The stacking rule already existed twice, at lines 157 and 643, written as
@media (max-width:820px){.filter-cols{grid-template-columns:1fr}} (0,1,0).
But the layout is set by .solo .filter-cols (0,2,0) at line 479, and a media
query does not raise specificity — so neither rule ever fired, at any width.
Restating it at matching specificity, after the rule it has to beat.
34px rather than 26px: with no column edge to separate the two groups, the
gap is the only thing that says a new group has begun, and 26px read as
ordinary paragraph spacing. Desktop above 820px is untouched. */
@media (max-width:820px){
.solo .filter-cols{grid-template-columns:1fr;gap:34px;max-width:none}
}
/* ═══════════════════════════════════════════════════════════════
BUILD 60 — /enroll head + value stack
═══════════════════════════════════════════════════════════════ */
/* (1.1) block up 25px with 25px of air beneath it. The top padding gives up
exactly what the bottom gains, so the section height does not move. */
.enroll-head{padding:calc(clamp(60px,8vw,100px) - 25px) 0 25px}
/* (1.2) the eyebrow. Every .kicker rule in this sheet is scoped .s-hero .kicker,
and the enroll eyebrow sits inside .enroll-head — so it has been
inheriting nothing: plain Raleway, mixed case, no tracking. Same
treatment the sales hero gets, sized for parchment rather than photo. */
.enroll-head .kicker{font-family:Cinzel;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;font-size:20px;margin:0 0 20px}
/* (2) the value stack now emits the sales page's own .vlist / .vtotal markup,
so no new rules are needed. .enroll-mini below is retained but unused;
.value-total / .tl / .tr never had rules at all, which is why the total
used to render as "Total value$9,264". */
/* ═══════════════════════════════════════════════════════════════
BUILD 61 — pricing phases fail closed
═══════════════════════════════════════════════════════════════ */
/* PHASE_JS sets display inline and sits ~13,700 bytes after the last phase
block, so until it ran all three pricing blocks were in the layout: a
visitor saw $2,900, then $4,200, then "enrollment closed", stacked.
Hiding all three by default means they never paint; the script shows
exactly one. Note the script now sets 'block' rather than '' — with a
default rule in place, '' would fall back to display:none and hide
everything. The two changes only work together. */
.phase-early,.phase-standard,.phase-closed{display:none}
/* framing overrides */
/* ─────────────────────────────────────────────────────────────
ASML additions — FPO flagging only. No layout changes to the
ported NME system. Delete this block at launch.
───────────────────────────────────────────────────────────── */
.fpo-note{position:relative}
.fpo-note::after{
content:attr(data-fpo);position:absolute;left:0;right:0;bottom:0;z-index:3;
background:repeating-linear-gradient(45deg,#8C3F4D,#8C3F4D 10px,#6E3140 10px,#6E3140 20px);
color:#fff;font-family:Raleway,sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;padding:.55rem .8rem;line-height:1.4}
.plate-lbl{color:#c4922e}
/* ─────────────────────────────────────────────────────────────
ASML hero overrides — v1.1
Kept at the end of the file so the ported NME rules above stay
clean and diffable against the source.
───────────────────────────────────────────────────────────── */
/* Richer gold for the hero tagline. NME's --gold-bright (#fecb3e) is
tuned for a dark rock-face hero; against ASML's bright blue sky it
reads thin and washed. Deeper, warmer, more saturated — with a
faint shadow to lift it off the sky and give the tone some depth. */
.s-hero .s-hero__tag{
color:#E5A62B;
text-shadow:0 1px 3px rgba(18,26,38,.55), 0 0 1px rgba(18,26,38,.35);
}
.s-hero .kicker{color:#E5A62B}
/* Credit line: name alone on its own line, credentials beneath. */
.s-hero__with{max-width:62ch}
.s-hero__with .wl{display:block}
/* CTA sits down on the rock face rather than over the water. */
.s-hero .btn{top:100px}
@media (max-width:900px){ .s-hero .btn{top:56px} }
@media (max-width:700px){ .s-hero .btn{top:24px} }
/* ── Per-photograph framing, sales page ─────────────────────────
object-fit is cover, so object-position moves the visible window
over the source. Lower Y reveals more of the top of the frame;
higher X reveals more of the right.
─────────────────────────────────────────────────────────────── */
/* 05 Where It Actually Breaks Down — 2:3 portrait source in a tall
portrait panel. Where the panel is proportionally narrower than the
source (the usual case at desktop, since this section runs seven
paragraphs) there is NO vertical slack and this Y value is inert —
the full height of the photograph is already on screen. It does act
below 900px, where max-height:520px turns the panel landscape.
Either way his head is cropped in the original photograph, not by
our framing. A different frame is the only real fix. */
.duo>.pic-breakdown img{object-position:50% 0%}
/* 13 Tools For True Transformation — the .duo photo panel has no
max-height at desktop; it stretches to whatever the text column
needs, and this section runs nine bullets, so the panel is tall
and portrait. Panel is narrower in proportion than the 2:3 source,
so cover fits on HEIGHT and crops horizontally — vertical position
has no slack to act on. Centre is correct: the couple sits on the
source's centre line, so they stay centred at every panel height.
(max-height:520px applies only below 900px, where the panel does
turn landscape and the vertical crop is centred, which also holds.) */
.duo>.pic-practice img{object-position:center}
/* 21 What Another Five Years Costs — she was cut by the right edge.
Shift the window right to bring both faces fully inside. */
.duo>.pic-cost img{object-position:100% 50%}
/* 23 Talk With Iana — scrim removed entirely. The Paris frame is
meant to read as clean black and white; any overlay veils it.
Body copy colour is handled separately. */
.psec#talk>.scrim{background:none}
/* ── Annotated revisions, 2026-08-22 ─────────────────────────── */
/* 06 One Person Grows — landscape source in a tall portrait panel,
so the crop is horizontal. Nudging the window right reveals more
of the right side, which moves the couple left into centre. */
.duo>.pic-onegrows img{object-position:56% 50%}
/* 08 Dynamics closing line — the default 56ch set three lines with
"way." alone on the last. Narrowing balances it to three even
lines; the nbsp before "way." guarantees it can never orphan. */
.cream-close.cc-balance{max-width:44ch}
/* 23 Talk With Iana — text block pulled in 45px each side. */
.psec#talk .p-in{max-width:710px}
/* 23 Talk With Iana — paragraph order fix.
NME's rule pushes only p:first-of-type down 160px with relative
positioning (it was written for a section carrying one paragraph
plus the button). With two paragraphs the second stays in normal
flow and the pair visually swap: the investment line renders above
the invitation, inverting the DOM order.
Converting the offset to a margin keeps everything in flow, so
reading order, DOM order and visual order agree — invitation first,
investment last, immediately before the button. */
.psec#talk .p-in p:first-of-type{position:static;top:auto;margin-top:160px}
.psec#talk .p-in .p-cta{position:static;top:auto}
@media (max-width:900px){
.psec#talk .p-in p:first-of-type{margin-top:24px}
}
/* 23 Talk With Iana — full frame, no crop.
The couple spans 88% of the photograph's height, umbrella top to
soles. The section was showing about 69% of it, so their feet were
cut off at the bottom edge and no amount of repositioning could
recover them — bottom-aligning would have shown source rows 397 to
1281, losing the umbrella and his head instead.
The section height is now stated outright: 66.72vw, which is
1281/1920 — the photograph's own ratio. cover then fills it exactly
and nothing is cropped: soles on the pavement, umbrella complete.
Stated as a height rather than aspect-ratio because aspect-ratio
yields to anything that establishes a height first, and this section
inherits min-height and heavy vertical padding from several NME
rules. A height cannot be outvoted the same way. The overlay's
115px+11vh vertical padding is zeroed for the same reason.
Consequence: the section is roughly 1015px tall at a 1520 viewport.
SCOPED TO DESKTOP. Below 900px the section switches to display:block
and stacks the photograph above the copy, so a fixed vw height sized
it to ~267px on a phone while its content ran far past that. With
overflow:visible the overflow simply painted over whatever followed
— which is why the footer appeared to be missing. Zeroing the
overlay padding also removed the 40px of air above the heading on
mobile. Both belong to the desktop plate only. */
@media (min-width:901px){
.psec#talk{height:66.72vw; min-height:0; max-height:none}
.psec#talk>.overlay{min-height:0; padding-top:0; padding-bottom:0}
.psec#talk>.media img{object-fit:cover; object-position:center center}
}
/* ── 23 Talk With Iana — text plate ───────────────────────────────
Heading, paragraph and button sit together in one panel on the
left, over the defocused tower. The couple holds the right half
untouched. Two objects, one plane.
The panel is a thin grey wash — just enough to read as a distinct
block of text rather than type floating on a photograph — with a
1px hairline a shade darker to give it a firm edge. No feather,
no heavy scrim: the photograph stays true black and white and the
tower remains legible through it.
Heading gold and button unchanged. Body copy runs darker than the
rest of the page so it holds against the pale tower behind the
wash.
──────────────────────────────────────────────────────────────── */
@media (min-width:901px){
/* The overlay stops being the positioning context. It is a grid
item of .psec with grid-area 1/1, and z-index works on grid items
without position, so dropping to static costs nothing — and it
means the panel below is positioned against the SECTION, which is
full-bleed and has no padding. One known coordinate space. */
.psec#talk>.overlay{position:static; padding-left:0; padding-right:0}
.psec#talk .p-in{
/* Absolutely positioned against the SECTION, not flowed.
margin-left was being applied on top of centring the cascade was
already doing — `.psec .p-in{margin:0 auto}` and grid alignment
both had a claim on it — so the panel sat near the middle of the
section instead of on the tower axis.
left is the tower axis at 27.08vw, measured on the UNCROPPED
frame across the band the panel occupies (source rows 450-867),
taking the midpoint of the tower's structural extents rather
than a darkness centroid — the centroid is dragged left by the
denser left leg. The figure changed from 28.75 because removing
the vertical crop changes which part of the tower sits behind
the panel, and the tower converges with height.
translateX(-50%) pulls the panel back by half its own width, so
its centre line lands there whatever the width resolves to.
margin:0 removes the auto margins from the equation.
Width in vw, not %: a percentage resolved against the overlay's
grid area rather than the section width and collapsed the panel.
Max raised 400 -> 440px. 400 was the one width where the
paragraph broke with "fit." alone on the last line; 440 leaves
six words there. Widening on the right also carries the centre
the 22px it needed, which is why one change fixes both. */
position:absolute;
left:27.08vw;
top:calc(50% + 15px);
transform:translate(-50%,-50%);
margin:0;
width:clamp(300px, 33vw, 440px); max-width:none; text-align:center;
/* Uniform padding all four sides; the heading is pulled up 6px to
offset Cinzel's leading so the optical gaps match. */
padding:clamp(16px,1.7vw,26px);
background:rgba(232,230,226,.30);
border:1px solid rgba(58,54,48,.55);
}
/* reset the inherited 160px push — inside the panel everything flows */
/* NME pushes this heading 45px up with relative positioning — that
is what lifted it clear of the panel. Reset it into flow.
Type is set explicitly here. The section inherits the full-bleed
scale — h2 at clamp(21px,4.4cqw,38px) and body at
clamp(16px,1.85vw,20px) — which is correct for type laid straight
over a photograph edge to edge, but far too large inside a 380px
panel: the paragraph wrapped to thirteen lines and the box grew
into a tall thin column. Plate scale instead. */
/* Bronze, not gold. Measured against the actual backdrop — the
photograph under the 30% wash, mean luminance 160 — the gold
#FECB3E sits at 1.73:1. Darkening it toward #C4922E makes it
WORSE (1.07:1) because mid-gold matches the backdrop's luminance
almost exactly; contrast only recovers past #8A6420. #7A5514 is
2.55:1. Size up 5%, 28 -> 29px. Shadow dropped: at this value the
letterforms hold on their own and the shadow only muddied them. */
.psec#talk .p-in h2{position:static; top:auto; margin:-6px 0 0;
font-size:29px; line-height:1.16;
color:#7A5514; text-shadow:none}
.psec#talk .p-in p:first-of-type{position:static; top:auto; margin:12px 0 0}
.psec#talk .p-in .p-cta{position:static; top:auto; margin:14px 0 0}
/* text-wrap:pretty lets the browser rebalance the final lines so a
single word can never be left alone, at any width the clamp
produces. Ignored where unsupported; costs nothing there. */
/* #120D09 -> 7.36:1, up from 6.39:1 at #241C16. */
.psec#talk .p-in p{color:#120D09; text-shadow:none; font-size:15px;
line-height:1.55; text-wrap:pretty}
}
/* Below 900px the overlay already stacks beneath the photograph, so
there is no photo to sit on. Full width, no panel, page colours. */
@media (max-width:900px){
.psec#talk .p-in{background:none; border:0; padding:0; width:auto; max-width:none}
/* No colour rule here on purpose. Mobile was correct before any of
this; `color:inherit` was an override that resolved to the wrong
value and changed it. Leave the original cascade alone. */
/* 13 Tools For True Transformation — mobile only. Here the panel
turns landscape (max-height:520px), so the 2:3 source crops
vertically and the couple's heads were bisected by the top edge.
Measured on the 390x585 scaled source: the hair line sits at
row 151 and sharp detail ends at the waterline, row 348 — so the
figures are 197px in a 218px window, leaving 10px to balance
above and below. Window top 141 of 367px slack = 38.3%.
Desktop is untouched — there the panel is portrait and this
axis has no slack to act on. */
.duo>.pic-practice img{object-position:50% 38.3%}
}
/* ── Footer, three stacked lines ──────────────────────────────────
footer .top uses a 16px gap, which is right between the social row
and the block but too loose between the three legal lines. The
stack carries its own tighter gap so the three read as one group.
───────────────────────────────────────────────────────────────── */
.legal-stack{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.legal-stack .legal{margin:0}
/* ── Mobile line breaks ───────────────────────────────────────────
Hard breaks that balance a line at desktop width force an extra
line on a phone. These three are desktop-only; on mobile the text
reflows naturally. */
@media (max-width:900px){
br.dbrk{display:none}
}
/* ── The destiny pull quote, mobile ───────────────────────────────
"Awakened Sex, Money & Love" is the longest phrase in any beat.
At the default 30px side padding it wraps with "Love" alone on its
own line. Tightening the padding on this one quote gives the line
the room it needs. This beat only — the other two are correct. */
@media (max-width:900px){
.beat.beat-destiny blockquote{padding-left:14px;padding-right:14px}
}
/* ── Destiny pull quote, keep the title whole ─────────────────────
At desktop the line breaks after "Awakened", splitting the program
name across two lines. Treating the title as one unbreakable unit
moves the break to before it: line one ends on "and", line two is
the whole title. Measured at 36px Cinzel — the title is 541px in a
960px measure, so it always fits once it is on its own line.
Desktop only: at 21px on a 402px phone it fits too, but the mobile
break is already correct and nowrap there would risk an overflow
on any narrower device. */
@media (min-width:901px){
.beat.beat-destiny blockquote i.keep{white-space:nowrap}
}
/* ══ 15b · What One Month Changes ══════════════════════════════════
A wine band between the navy section above and the photo-led duo
below. Built on the same radial construction as .solo.navy — same
stop positions, same gold hairline borders — so it reads as a third
register in an established system rather than a new invention.
Deep vibrant: #7A2338 at centre falling to #220A12 at the edges.
Higher chroma and a darker fall-off than the navy, which is what
lets the gold and the near-white right column lift off it.
────────────────────────────────────────────────────────────────── */
.solo.wine{
background:radial-gradient(96% 74% at 50% 34%,
#7a2338 0%, #6d1f32 22%, #5a1a2a 40%, #3a1019 74%, #220a12 100%);
border-top:1px solid rgba(254,203,62,.24);
border-bottom:1px solid rgba(254,203,62,.24)}
.solo.wine h2{color:var(--gold-bright)}
.solo.wine .crule{background:var(--gold-bright);opacity:.85}
.solo.wine .lead-in{color:#f2dcd6;max-width:64ch}
/* Two columns sharing one grid. The lists are subgrids of .arc, so
row N in the left column and row N in the right column occupy the
SAME grid row and are exactly as tall as the taller of the pair.
Two independent lists cannot do this — their rows drift apart as
soon as one item wraps to a different number of lines, which is
what stopped the markers reading across. */
.arc{display:grid;grid-template-columns:1fr 1fr;gap:0 92px;
grid-template-rows:auto repeat(6,auto);
max-width:1140px;margin:38px auto 0;text-align:left}
.arc-h{grid-row:1;font-family:Cinzel;font-weight:500;font-size:20px;
letter-spacing:.02em;margin:0 0 12px;padding-bottom:10px}
.h-today{color:#e0b7b2;border-bottom:1px solid rgba(224,183,178,.42)}
.h-after{color:var(--gold-bright);border-bottom:1px solid rgba(254,203,62,.55)}
.arc-list{list-style:none;margin:0;padding:0;grid-row:2 / span 6;
display:grid;grid-template-rows:subgrid;row-gap:26px}
.arc-list li{position:relative;padding-left:26px;font-size:15px;
line-height:1.6;margin:0}
/* Both markers are the same 10px box on the same baseline offset,
rotated 45 degrees about their own centre — so the two centres sit
at an identical y and the eye can track straight across. Hollow to
filled is the only difference. */
.arc-list li:before{content:"";position:absolute;left:1px;top:.5em;
width:10px;height:10px;box-sizing:border-box;transform:rotate(45deg)}
.l-today li:before{border:2px solid rgba(224,183,178,.75)}
.l-after li:before{background:var(--gold-bright)}
/* The right column is brighter than the left. The luminance shift is
itself part of the argument. */
.l-today li{color:#e2cbc7}
.l-after li{color:#fff6ee}
.arc-close{font-family:Cinzel;font-weight:500;font-size:22px;line-height:1.5;
color:var(--gold-bright);text-align:center;max-width:none;margin:8px auto 0}
/* Mobile: one column. The second heading repeats, so the after set
never reads as a continuation of the today set. */
@media (max-width:900px){
/* One column. Subgrid is switched off and the four blocks are
ordered so each heading leads its own list. */
.arc{grid-template-columns:1fr;grid-template-rows:none;gap:0}
.arc-h{grid-row:auto;font-size:18px}
.arc-list{grid-row:auto;grid-template-rows:none;row-gap:22px}
.h-today{order:1}
.l-today{order:2}
.h-after{order:3;margin-top:46px}
.l-after{order:4}
.arc-list li{font-size:15px}
.arc-close{font-size:18px}
/* Sentence one holds a line at the inherited size. Sentence two is
51 characters and cannot, at any size a phone should carry — so
it breaks after the label rather than wherever the measure runs
out. Verified to 375px. */
.arc-sub{line-height:1.62}
.arc-sub br.mbrk{display:block;height:0}
.arc + .arc-close{margin-top:24px}
}
/* ── 15b spacing pass ─────────────────────────────────────────────
Top and bottom padding are NOT overridden. .solo.navy carries no
padding rule of its own, so it inherits .solo{padding:var(--pad-y) 0}
— clamp(58px, 6.5vw, 96px). Leaving .solo.wine to inherit the same
declaration is the only way the two sections are guaranteed to
match at every viewport; any calc() here would drift from the navy
the moment the clamp changed.
The one bespoke value is the gap between the columns and the close,
which needs to read as a separate beat rather than a seventh row. */
/* Adjacent sibling, not :first-of-type. The first inside .inner is
the lead-in, so .arc-close:first-of-type matched no element at all
and every value set on it was inert. .arc + .arc-close targets the
close line that directly follows the columns, which is the thing
being spaced. Default was the 8px from .arc-close{margin:8px auto 0};
28px is that plus the 20 asked for. */
.arc + .arc-close{margin-top:28px}
/* Sub-headline. The max-width needs three classes to land:
.solo .lead-in{max-width:60ch} outranks a single-class rule and
was capping this paragraph at roughly 504px, which is what put
the second sentence on two lines. Uncapped, it sets on one line
at 451px inside a 944px measure.
The label break in sentence two is mobile-only — a bare
breaks at every width, so it is suppressed here. */
.solo.wine .arc-sub{max-width:none}
/* min-width, not a bare rule. This sits after the max-width:900px
block, and media queries add no specificity — as a top-level
declaration it won on source order and suppressed the break at
every width, including the phone it was written for. */
@media (min-width:901px){ .arc-sub br.mbrk{display:none} }
/* The two labels are the column headings quoted in prose, so they
carry the heading colours. */
.arc-sub .lbl-today{color:#e0b7b2}
.arc-sub .lbl-after{color:var(--gold-bright)}
@media (max-width:900px){
.arc + .arc-close{margin-top:24px}
}
/* ── Menu, 13 items ───────────────────────────────────────────────
The panel is absolutely positioned under the masthead and had no
height limit. At 13 items it runs roughly 560px, which clears a
tall phone but overruns a 667px one. Cap it to the viewport and
let it scroll rather than run off the bottom edge. */
.nav{max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain}
/* ══════════════════════════════════════════════════════════════════
BUILD ASML-S1 — A Couple's Sacred Breakthrough (#breakthrough)
Sits on .solo.wide.navy, whose gradient already matches the NME
blue exactly, so no background is declared here. Only the mandala
figure and the eight title/affirmation rows need rules.
══════════════════════════════════════════════════════════════════ */
.solo.navy .kicker{font-family:Cinzel;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;font-size:14px;color:var(--gold-bright);margin:0 0 18px}
.mandala{margin:34px 0 0}
.mandala img{display:block;width:100%;max-width:820px;height:auto;margin:0 auto}
/* rights line: two stacked lines, flush right under the art */
.mandala figcaption{max-width:820px;margin:14px auto 0;text-align:right;
font-family:Raleway;font-weight:400;font-size:10.5px;line-height:1.55;
letter-spacing:.02em;color:#a9a3bb}
.mandala figcaption span{display:block}
.solo.navy .outcomes{margin:40px auto 0;max-width:760px}
.solo.navy .outcomes .o{padding:18px 0;border-top:1px solid rgba(254,203,62,.20)}
.solo.navy .outcomes .o:first-child{border-top:0;padding-top:0}
.solo.navy .outcomes h3{color:var(--gold-bright);margin:0 0 6px}
.solo.navy .outcomes .o p{color:#e6e2f0;font-size:16.5px;line-height:1.7;margin:0;
font-style:italic}
.solo.navy .arc-close{margin:38px auto 0;max-width:62ch;color:#f0ecf8}
@media (max-width:700px){
.mandala{margin-top:26px}
.solo.navy .outcomes{margin-top:30px}
.solo.navy .outcomes .o{padding:15px 0}
}