/* ==========================================================================
MicroChilli site stylesheet
Source: Sharon's homepage draft, 26 Aug 2026. This is the canonical
system - Montserrat only, .script = Montserrat italic 300 for accents.
Do not reintroduce a serif face.
========================================================================== */
:root{
--burgundy:#691636;
--burgundy-deep:#4E0F28;
--gold:#C9A96E;
--gold-light:#E3CB98;
--gold-ink:#7A5A24;
--offwhite:#FBFAF9;
--linen:#DFD3C5;
--champagne:#F7E7CE;
--ink:#2A171F;
--ink-soft:#59464E;
--rule:#D8CBCE;
--display:Montserrat,"Helvetica Neue",Arial,sans-serif;
--body:Montserrat,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--offwhite);
font-family:var(--body);
color:var(--ink);
font-size:16px;
line-height:1.7;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:250;letter-spacing:-.02em;margin:0;line-height:1.06}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
a{color:inherit}
.wrap{width:min(1180px,88vw);margin:0 auto}
.skip{position:absolute;left:-9999px;background:var(--burgundy);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--gold-light)}
/* ---------- shared bits ---------- */
.ey{
font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;
font-weight:600;color:var(--gold-ink);margin-bottom:20px;
}
.dark .ey{color:var(--gold-light)}
.script{font-family:var(--display);font-style:italic;font-weight:300;letter-spacing:-.015em;color:var(--gold-ink)}
.dark .script{color:var(--gold-light)}
.btn{
display:inline-block;background:var(--burgundy);color:#fff;
padding:17px 30px;text-decoration:none;font-size:12px;
letter-spacing:.16em;font-weight:600;text-transform:uppercase;
border:1px solid var(--burgundy);transition:background .25s,color .25s;
}
.btn:hover{background:var(--burgundy-deep);border-color:var(--burgundy-deep)}
.btn-ghost{background:transparent;color:var(--burgundy)}
.btn-ghost:hover{background:var(--burgundy);color:#fff}
.dark .btn{background:var(--gold);color:var(--burgundy-deep);border-color:var(--gold)}
.dark .btn:hover{background:var(--gold-light);border-color:var(--gold-light)}
.textlink{
font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
color:var(--burgundy);text-decoration:none;border-bottom:1px solid var(--gold);
padding-bottom:3px;
}
.textlink:hover{border-bottom-color:var(--burgundy)}
/* ---------- header ---------- */
.header{
position:sticky;top:0;z-index:50;background:rgba(251,250,249,.94);
backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
.headerinner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.logo{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:.02em;color:var(--burgundy);text-decoration:none;letter-spacing:.01em}
.logo span{color:inherit}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
font-size:13px;letter-spacing:.04em;text-decoration:none;color:var(--ink);
padding:4px 0;border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--gold)}
/* .nav a sets colour at higher specificity than .btn, so the header CTA
alone rendered near-black on burgundy. Restore it here. */
.nav a.btn{padding:12px 20px;color:#fff;border-bottom:1px solid var(--burgundy)}
.nav a.btn:hover{color:#fff;border-bottom-color:var(--burgundy-deep)}
.navtoggle{display:none;background:none;border:1px solid var(--rule);padding:9px 13px;font:inherit;font-size:13px;color:var(--burgundy);cursor:pointer}
/* ---------- hero ---------- */
.hero{padding:46px 0 50px}
.herogrid{display:grid;grid-template-columns:46% 54%;gap:48px;align-items:center}
.hero img{width:100%;height:auto;max-width:430px;aspect-ratio:3/4;object-fit:cover;object-position:center 8%}
.hero h1{font-size:clamp(38px,5.2vw,60px);color:var(--burgundy);margin:0 0 12px}
.hero .script{font-size:clamp(30px,4vw,46px);display:block;margin-bottom:22px}
.herolede{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:40ch;margin-bottom:30px}
.heroctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
/* ---------- ticker ---------- */
.ticker{overflow:hidden;background:var(--gold);padding:13px 0}
.track{display:flex;width:max-content;animation:scroll 28s linear infinite}
.group{display:flex;flex-shrink:0;gap:58px;padding-right:58px}
.ticker span{white-space:nowrap;color:var(--burgundy-deep);font-size:14px;font-weight:600;letter-spacing:.14em}
@keyframes scroll{to{transform:translateX(-50%)}}
/* ---------- statement ---------- */
.statement{background:var(--burgundy);color:#fff;padding:clamp(96px,12vw,164px) 0;text-align:center}
.statement h2{font-size:clamp(46px,8.2vw,104px);margin:0;letter-spacing:-.035em;line-height:1.02}
.statement .script{font-size:clamp(48px,8.8vw,112px);display:block;margin-top:2px;letter-spacing:-.03em;line-height:1.05}
/* ---------- generic section ---------- */
.section{padding:clamp(58px,6.4vw,84px) 0}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.section h2{color:var(--burgundy);font-size:clamp(36px,5.2vw,64px);margin:0 0 16px}
.section .lede{font-size:18px;line-height:1.75;color:var(--ink-soft)}
.section .lede b{color:var(--burgundy);font-weight:600}
/* ---------- the work ---------- */
.work{padding:92px 0;background:var(--champagne)}
.work h2{font-size:clamp(36px,5.4vw,66px);color:var(--burgundy);margin:0 0 44px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,56px)}
.card{padding:0}
.card:before{content:"";display:block;width:38px;height:1px;background:var(--gold);margin-bottom:20px}
.card h3{font-size:32px;font-weight:300;color:var(--burgundy);margin:0 0 14px}
.card p{color:var(--ink-soft);font-size:16.5px}
/* ---------- proof ---------- */
.proof{padding:92px 0;background:var(--offwhite)}
.hero-quote{
max-width:62ch;margin:0 auto 52px;text-align:center;
border-top:2px solid var(--gold);border-bottom:1px solid var(--rule);
padding:30px 0 34px;
}
.result-big{
font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
color:var(--gold-ink);margin:0 0 20px;
}
.hero-quote blockquote{
margin:0 0 22px;font-weight:300;font-size:23px;line-height:1.5;color:var(--burgundy);
}
.hero-quote figcaption{font-size:13px;letter-spacing:.06em;color:var(--ink-soft)}
.proofgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;margin-bottom:56px}
.quote{border-top:2px solid var(--gold);padding-top:26px}
.quote blockquote{margin:0 0 20px;font-family:var(--display);font-weight:300;font-size:20px;line-height:1.5;color:var(--burgundy)}
.quote figcaption{font-size:13px;letter-spacing:.06em;color:var(--ink-soft)}
.quote .result{display:block;font-weight:600;color:var(--gold-ink);margin-bottom:4px;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.creds{
display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;
border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:24px 0;
}
.creds li{
list-style:none;font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--burgundy);font-weight:600;
}
/* the last item is the location, which is context rather than a credential */
.creds li:last-child{color:var(--gold-ink);font-weight:500}
.credlbl{display:block;text-align:center;margin-bottom:16px}
.creds{margin:0;padding-left:0}
/* ---------- offers ---------- */
.offers{padding:96px 0;background:var(--burgundy);color:#fff}
.offers h2{font-size:clamp(36px,5.2vw,64px);margin:0 0 16px}
.offers .lede{font-size:18px;color:#F0E4E9;max-width:60ch;margin-bottom:52px}
.offer{
display:grid;grid-template-columns:110px 1fr auto;gap:36px;align-items:center;
padding:34px 0;border-top:1px solid rgba(227,203,152,.34);
}
.offers .offer:last-of-type{border-bottom:1px solid rgba(227,203,152,.34)}
.num{
font-family:var(--display);font-size:50px;font-weight:600;line-height:1;
color:var(--gold);-webkit-text-stroke:0;
transition:color .3s ease;
}
.offer:hover .num,.offer:focus-within .num{color:var(--gold-light)}
.offer h3{font-size:25px;font-weight:400;letter-spacing:-.01em;margin:0 0 6px}
.offer p{color:#EDDFE4;font-size:16.5px;margin:0 0 8px;max-width:56ch}
.meta{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-light);font-weight:600}
.offer a{
display:inline-block;color:var(--gold-light);font-size:12.5px;letter-spacing:.16em;
text-decoration:none;font-weight:600;text-transform:uppercase;white-space:nowrap;
border:1px solid rgba(227,203,152,.5);padding:14px 24px;
transition:background .25s,color .25s,border-color .25s;
}
.offer a:hover{background:var(--gold);color:var(--burgundy-deep);border-color:var(--gold)}
/* ...but that rule is for the CTA at the end of a row. A link inside the copy
is a link, not a button. */
.offer p a,.offer h3 a{
display:inline;font-size:inherit;letter-spacing:inherit;text-transform:none;
font-weight:600;padding:0;border:0;color:var(--gold-light);
border-bottom:1px solid rgba(227,203,152,.55);
}
.offer p a:hover,.offer h3 a:hover{background:none;color:#fff;border-bottom-color:var(--gold)}
/* ---------- entry point ---------- */
.entry{padding:84px 0;background:var(--linen)}
.entrygrid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.entry h2{font-size:clamp(28px,3.6vw,40px);color:var(--burgundy);margin:0 0 14px}
.entry p{color:var(--ink-soft);font-size:17.5px}
/* ---------- about ---------- */
.about{background:var(--burgundy-deep);color:#fff;padding:96px 0}
/* The copy column is far taller than a fixed size photo, which left the image
floating in the middle aligned to nothing. The photo is now a column in its
own right: it stretches to the height of the text beside it. */
.aboutgrid{
display:grid;grid-template-columns:.78fr 1.22fr;
gap:clamp(36px,4.6vw,68px);align-items:stretch;
}
.about img{
width:100%;height:100%;max-width:none;min-height:440px;
object-fit:cover;object-position:center 24%;filter:grayscale(100%);display:block;
}
.about h2{font-size:clamp(32px,4.6vw,52px);margin:0 0 22px}
.about p{font-size:18px;line-height:1.75;color:#F2E9E6}
.about .script{font-size:clamp(28px,3.6vw,40px);display:block;margin-top:26px}
/* ---------- final ---------- */
.final{padding:100px 0;text-align:center;background:var(--champagne)}
.final h2{font-size:clamp(34px,5vw,58px);color:var(--burgundy);margin:0 0 18px}
.final p{font-size:19px;color:var(--ink-soft);margin-bottom:32px}
/* ---------- footer ---------- */
.footer{background:var(--burgundy);color:#F0E4E9;padding:64px 0 30px;font-size:15px}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.footer h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin:0 0 16px;font-weight:600}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:10px}
.footer a{color:#F0E4E9;text-decoration:none;border-bottom:1px solid transparent}
.footer a:hover{border-bottom-color:var(--gold)}
.footer .logo{color:#fff;font-size:26px;display:inline-block;margin-bottom:12px}
.footer .logo span{color:inherit}
.tagline{font-style:italic;font-weight:300;color:var(--gold-light);font-size:18px}
.footbottom{
margin-top:52px;padding-top:22px;border-top:1px solid rgba(227,203,152,.28);
display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
font-size:13px;color:#DCC7CF;
}
/* ---------- responsive ---------- */
@media(max-width:980px){
.footgrid{grid-template-columns:1fr 1fr;gap:36px}
.twocol,.entrygrid{gap:48px}
}
@media(max-width:860px){
.navtoggle{display:block}
.nav{
display:none;position:absolute;top:100%;left:0;right:0;
flex-direction:column;align-items:flex-start;gap:0;
background:var(--offwhite);border-bottom:1px solid var(--rule);padding:10px 6vw 22px;
}
.nav.open{display:flex}
.nav a{padding:13px 0;width:100%;border-bottom:1px solid var(--rule)}
.nav .btn{margin-top:16px;width:100%;text-align:center;border-bottom:none}
.headerinner{position:relative}
.herogrid,.twocol,.aboutgrid,.cards,.entrygrid,.proofgrid{grid-template-columns:1fr}
.herogrid{gap:32px}
.hero img{width:100%;max-width:340px;margin-left:auto;margin-right:auto}
.hero{padding:34px 0 40px}
.card{padding:0}
.section,.work,.proof,.offers,.entry,.about,.final{padding:64px 0}
.offer{grid-template-columns:64px 1fr;gap:20px;row-gap:14px}
.num{font-size:40px}
.offer a{grid-column:2}
.about img{max-width:320px;margin-left:auto;margin-right:auto}
.proofgrid{gap:38px;margin-bottom:44px}
.hero-quote{margin-bottom:44px}
.hero-quote blockquote{font-size:19px}
}
@media(max-width:560px){
.footgrid{grid-template-columns:1fr}
.creds{justify-content:flex-start;gap:12px 26px}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
}
/* ---------- newsletter popup ---------- */
.nlwrap{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:22px;
background:rgba(42,23,31,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.nlwrap.show{display:flex}
.nlwrap.in{opacity:1}
.nl{position:relative;width:min(520px,100%);background:var(--burgundy);color:#fff;
padding:clamp(34px,5vw,54px);border:1px solid rgba(227,203,152,.34);
transform:translateY(14px);transition:transform .35s}
.nlwrap.in .nl{transform:translateY(0)}
.nl .ey{color:var(--gold-light)}
.nl h2{font-size:clamp(27px,3.6vw,38px);color:#fff;margin:0 0 14px;font-weight:250;letter-spacing:-.02em;line-height:1.08}
.nl .script{color:var(--gold-light);display:block;font-size:clamp(24px,3vw,32px);margin-bottom:16px}
.nl p{color:#F0E4E9;font-size:16px;margin:0 0 24px}
.nlform{display:flex;flex-wrap:wrap;gap:12px}
.nlform input{flex:1 1 210px;min-width:0;padding:15px 16px;border:1px solid rgba(227,203,152,.42);
background:rgba(251,250,249,.06);color:#fff;font:inherit;font-size:15px}
.nlform input::placeholder{color:rgba(240,228,233,.6)}
.nlform input:focus{outline:2px solid var(--gold-light);outline-offset:1px}
.nlform .btn{flex:0 0 auto;background:var(--gold);color:var(--burgundy-deep);border-color:var(--gold);cursor:pointer}
.nlform .btn:hover{background:var(--gold-light);border-color:var(--gold-light)}
.nlsmall{font-size:12.5px;color:rgba(240,228,233,.72);margin:16px 0 0}
.nlclose{position:absolute;top:12px;right:12px;width:40px;height:40px;background:none;border:0;
color:var(--gold-light);font-size:26px;line-height:1;cursor:pointer;padding:0}
.nlclose:hover{color:#fff}
.nlthanks{display:none}
.nl.done .nlthanks{display:block}
.nl.done .nlform,.nl.done p:not(.nlthanks),.nl.done .script{display:none}
@media(prefers-reduced-motion:reduce){.nlwrap,.nl{transition:none}}
/* ---------- calculator ---------- */
.calc{padding:76px 0 96px;background:var(--offwhite)}
.calcgrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:start}
.field{margin-bottom:30px}
.field label{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);margin-bottom:8px}
.field .hint{font-size:14px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5}
.inputwrap{position:relative;display:flex;align-items:center;border:1px solid var(--rule);background:#fff}
.inputwrap:focus-within{border-color:var(--gold-ink);outline:2px solid var(--gold-ink);outline-offset:-2px}
.inputwrap .pre,.inputwrap .post{padding:0 14px;color:var(--ink-soft);font-size:17px;font-weight:300;flex:none}
.inputwrap input{flex:1;min-width:0;border:0;padding:15px 0;font:inherit;font-size:19px;font-weight:300;
color:var(--ink);background:none;font-variant-numeric:tabular-nums}
.inputwrap input:focus{outline:none}
.inputwrap input::-webkit-outer-spin-button,.inputwrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inputwrap input[type=number]{-moz-appearance:textfield}
.result{background:var(--burgundy);color:#fff;padding:clamp(32px,4vw,50px);position:sticky;top:96px}
.result .ey{color:var(--gold-light)}
.bignum{font-size:clamp(44px,6.6vw,76px);font-weight:200;letter-spacing:-.04em;line-height:1;
color:var(--gold-light);margin:14px 0 6px;font-variant-numeric:tabular-nums}
.bigsub{font-size:15px;color:#F0E4E9;margin:0 0 30px}
.rows{border-top:1px solid rgba(227,203,152,.3);margin-bottom:28px}
.row{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid rgba(227,203,152,.18);font-size:15px}
.row span:first-child{color:#EDDFE4}
.row span:last-child{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.row.tot{border-bottom:0;padding-top:17px;font-size:17px}
.row.tot span{color:var(--gold-light);font-weight:600}
.headline{border-top:1px solid rgba(227,203,152,.3);padding-top:24px;font-size:16.5px;line-height:1.65;color:#F0E4E9}
.headline b{color:var(--gold-light);font-weight:600}
.assume{font-size:13px;line-height:1.6;color:var(--ink-soft);border-left:2px solid var(--gold);padding-left:16px;margin-top:34px}
@media(max-width:860px){
.calcgrid{grid-template-columns:1fr;gap:40px}
.result{position:static}
.calc{padding:52px 0 64px}
}
/* ---------- calculator gate ---------- */
.gate{background:var(--burgundy);color:#fff;padding:clamp(32px,4vw,50px);position:sticky;top:96px}
.gate .ey{color:var(--gold-light)}
.gate h3{font-size:clamp(26px,3.2vw,34px);font-weight:250;letter-spacing:-.02em;line-height:1.1;color:#fff;margin:14px 0 14px}
.gate p{color:#F0E4E9;font-size:15.5px;margin:0 0 24px}
.gate .teaser{border-top:1px solid rgba(227,203,152,.3);border-bottom:1px solid rgba(227,203,152,.3);
padding:22px 0;margin-bottom:26px}
.gate .teaser .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold-light);margin:0 0 8px}
.gate .blur{font-size:clamp(40px,6vw,66px);font-weight:200;letter-spacing:-.04em;line-height:1;
color:var(--gold-light);filter:blur(13px);user-select:none;margin:0}
.gateform{display:flex;flex-wrap:wrap;gap:12px}
.gateform input{flex:1 1 200px;min-width:0;padding:15px 16px;border:1px solid rgba(227,203,152,.42);
background:rgba(251,250,249,.06);color:#fff;font:inherit;font-size:15px}
.gateform input::placeholder{color:rgba(240,228,233,.6)}
.gateform input:focus{outline:2px solid var(--gold-light);outline-offset:1px}
.gateform .btn{flex:0 0 auto;background:var(--gold);color:var(--burgundy-deep);border-color:var(--gold);cursor:pointer}
.gateform .btn:hover{background:var(--gold-light);border-color:var(--gold-light)}
.gatesmall{font-size:12.5px;color:rgba(240,228,233,.72);margin:16px 0 0}
.gateerr{color:var(--gold-light);font-size:13.5px;margin:12px 0 0;display:none}
.gateerr.on{display:block}
@media(max-width:860px){.gate{position:static}}
/* newsletter popup: optional image banner */
.nl.hasimg{padding:0;overflow:hidden}
.nl.hasimg .nlbody{padding:clamp(28px,4vw,42px)}
.nlimg{display:block;width:100%;height:210px;object-fit:cover;object-position:center 38%;
border-bottom:1px solid rgba(227,203,152,.34)}
.nl.hasimg .nlclose{background:rgba(58,11,29,.55);border-radius:50%}
@media(max-width:560px){.nlimg{height:150px}}
/* ---------- resources ---------- */
.reslist{border-top:1px solid var(--rule)}
.res{display:grid;grid-template-columns:64px 1fr auto;gap:34px;align-items:start;
padding:38px 0;border-bottom:1px solid var(--rule)}
.res .rnum{font-size:44px;font-weight:600;line-height:1;color:transparent;
-webkit-text-stroke:1px var(--gold);transition:color .3s}
.res:hover .rnum,.res:focus-within .rnum{color:var(--gold)}
.res h3{font-size:clamp(23px,2.6vw,30px);font-weight:300;letter-spacing:-.02em;color:var(--burgundy);margin:0 0 10px}
.res p{color:var(--ink-soft);font-size:16.5px;margin:0 0 10px;max-width:56ch}
.res .rmeta{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);margin:0}
.res .rcta{white-space:nowrap;align-self:center}
.res.soon{opacity:.62}
.res.soon .rmeta{color:var(--ink-soft)}
@media(max-width:860px){
.res{grid-template-columns:48px 1fr;gap:20px;row-gap:16px;padding:30px 0}
.res .rnum{font-size:34px}
.res .rcta{grid-column:2;align-self:start}
}
/* ---------- quiz ---------- */
.quizwrap{min-height:100vh;background:var(--burgundy);color:#fff;display:flex;flex-direction:column}
.quizhead{padding:22px 0;border-bottom:1px solid rgba(227,203,152,.28)}
.quizhead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.quizhead .logo{color:#fff;font-size:19px}
.quizhead .logo span{color:var(--gold-light)}
.qcount{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold-light)}
.qbar{height:2px;background:rgba(227,203,152,.22)}
.qbar i{display:block;height:100%;background:var(--gold);width:0;transition:width .4s ease}
.quizmain{flex:1;display:flex;align-items:center;padding:clamp(40px,7vw,86px) 0}
.qstep{display:none;width:100%}
.qstep.on{display:block;animation:qin .4s ease}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.qstep.on{animation:none}}
.qeyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--gold-light);margin:0 0 18px}
.qtitle{font-size:clamp(28px,4.4vw,52px);font-weight:250;letter-spacing:-.03em;line-height:1.1;color:#fff;margin:0 0 12px;max-width:19ch}
.qsub{font-size:clamp(16px,1.5vw,19px);font-weight:300;color:var(--champagne);max-width:52ch;margin:0 0 34px;line-height:1.6}
.qq{font-size:clamp(23px,3vw,36px);font-weight:250;letter-spacing:-.025em;line-height:1.18;color:#fff;margin:0 0 32px;max-width:22ch}
.qopts{display:flex;flex-direction:column;gap:12px;max-width:760px}
.qopt{display:block;width:100%;text-align:left;background:rgba(251,250,249,.055);color:var(--champagne);
border:1px solid rgba(227,203,152,.3);padding:20px 24px;font:inherit;font-size:16.5px;line-height:1.55;
cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.qopt:hover{background:rgba(201,169,110,.16);border-color:var(--gold);color:#fff;transform:translateX(4px)}
.qopt:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.qselect{max-width:520px;width:100%;padding:17px 18px;font:inherit;font-size:16.5px;border-radius:0;
border:1px solid rgba(227,203,152,.4);background:rgba(251,250,249,.06);color:#fff}
.qselect option{background:var(--burgundy-deep);color:#fff}
.qback{background:none;border:0;color:rgba(240,228,233,.6);font:inherit;font-size:12px;letter-spacing:.14em;
text-transform:uppercase;font-weight:600;cursor:pointer;padding:10px 0;margin-top:28px}
.qback:hover{color:var(--gold-light)}
/* result */
.qresult .qeyebrow{color:var(--gold-light)}
.rtitle{font-size:clamp(34px,6vw,72px);font-weight:200;letter-spacing:-.04em;line-height:1;
color:var(--gold-light);margin:10px 0 22px}
.rbody{font-size:clamp(16.5px,1.5vw,19px);font-weight:300;line-height:1.68;color:var(--champagne);max-width:58ch;margin:0 0 20px}
.rbody strong{color:#fff;font-weight:600}
.rnext{border-top:1px solid rgba(227,203,152,.3);margin-top:34px;padding-top:30px;max-width:640px}
.rnext h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold-light);margin:0 0 14px}
.rctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.qcapture{border-top:1px solid rgba(227,203,152,.3);margin-top:34px;padding-top:30px;max-width:640px}
.qcapture p{font-size:15.5px;color:#F0E4E9;margin:0 0 18px;max-width:52ch}
.qform{display:flex;flex-wrap:wrap;gap:12px}
.qform input{flex:1 1 190px;min-width:0;padding:15px 16px;border:1px solid rgba(227,203,152,.42);
background:rgba(251,250,249,.06);color:#fff;font:inherit;font-size:15px}
.qform input::placeholder{color:rgba(240,228,233,.6)}
.qform input:focus{outline:2px solid var(--gold-light);outline-offset:1px}
.qdone{display:none;color:var(--gold-light);font-size:16px;margin:18px 0 0}
.qcapture.sent .qform,.qcapture.sent p{display:none}
.qcapture.sent .qdone{display:block}
@media(max-width:700px){.qopt{padding:17px 18px;font-size:15.5px}}
/* ---------- emphasis components ---------- */
/* Highlighter. Gold block behind a key phrase. box-decoration-break keeps the
padding correct when it wraps across two lines. */
.mark{
background:var(--gold);color:var(--burgundy-deep);
padding:.06em .3em;font-weight:500;
box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.mark-soft{background:var(--champagne);color:var(--burgundy);}
.dark .mark,.offers .mark,.statement .mark,.about .mark{background:var(--gold);color:var(--burgundy-deep);}
/* Tick list. Short, scannable, gold marker. */
.ticks{list-style:none;margin:0 0 22px;padding:0}
.ticks li{position:relative;padding-left:30px;margin-bottom:13px;font-size:16.5px;line-height:1.55;color:var(--ink-soft)}
.ticks li:before{
content:"";position:absolute;left:0;top:.5em;
width:11px;height:11px;background:var(--gold);
}
.ticks li b,.ticks li strong{color:var(--burgundy);font-weight:600}
.dark .ticks li,.offers .ticks li{color:var(--linen)}
.dark .ticks li b,.offers .ticks li b{color:var(--gold-light)}
/* P.S. / aside box */
.ps{
background:var(--champagne);border-left:3px solid var(--gold);
padding:22px 26px;margin:30px 0 0;font-size:16px;line-height:1.65;color:var(--ink-soft);
max-width:58ch;
}
.ps b,.ps strong{color:var(--burgundy);font-weight:600}
.ps .lbl{font-weight:700;color:var(--burgundy);letter-spacing:.02em}
.dark .ps,.offers .ps{background:rgba(251,250,249,.07);border-left-color:var(--gold);color:var(--linen)}
.dark .ps b,.offers .ps b{color:var(--gold-light)}
/* Pull quote / big statement inside a body section */
.pull{
font-size:clamp(21px,2.6vw,30px);font-weight:250;letter-spacing:-.02em;line-height:1.3;
color:var(--burgundy);max-width:24ch;margin:34px 0;
padding-left:22px;border-left:2px solid var(--gold);
}
/* ---------- cue ----------
Small italic nudge that sits directly above a CTA. Same job as a handwritten
note with a highlighter through it, done in Montserrat italic and gold so it
stays on brand instead of looking like a different website. */
p.cue,span.cue,.cue{
display:inline-block;
font-family:"Caveat","Bradley Hand",cursive;
font-weight:600;font-size:30px;letter-spacing:.01em;
color:var(--burgundy-deep);background:var(--gold);
padding:.04em .55em .12em;margin:0 0 12px;
line-height:1.25;transform:rotate(-1.5deg);
}
/* no block variant, for when the gold would sit on gold */
p.cue.plain,.cue.plain{background:none;color:var(--gold-ink);padding:0}
.dark p.cue,.offers p.cue,.statement p.cue,.about p.cue,.dark .cue{background:var(--gold);color:var(--burgundy-deep)}
/* stack a cue above a button cleanly */
.cue-stack{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.cue-stack.ct{align-items:center}
/* larger CTA, for the primary action on a section */
.btn-lg{font-size:14px;letter-spacing:.18em;padding:22px 40px}
@media(max-width:560px){.btn-lg{padding:19px 26px;font-size:13px}}
/* ---------- the plan (StoryBrand step 4) ---------- */
.plan{padding:96px 0;background:var(--offwhite)}
.plan h2{color:var(--burgundy);font-size:clamp(32px,4.4vw,50px);margin:0 0 14px}
.plan .lede{margin-bottom:48px}
.plansteps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.planstep{padding:38px 34px 40px;border-right:1px solid var(--gold)}
.planstep:last-child{border-right:0}
.planstep .n{
font-family:"Caveat","Bradley Hand",cursive;font-size:34px;font-weight:600;
color:var(--gold-ink);line-height:1;display:block;margin-bottom:10px;
}
.planstep h3{font-size:26px;font-weight:300;color:var(--burgundy);margin:0 0 12px;letter-spacing:-.01em}
.planstep p{color:var(--ink-soft);font-size:16.5px;margin:0}
.stakes{
margin-top:52px;max-width:60ch;
border-left:2px solid var(--burgundy);padding-left:24px;
}
.stakes p{font-size:clamp(18px,2vw,23px);font-weight:300;line-height:1.5;color:var(--burgundy);margin:0 0 12px}
.stakes p:last-child{margin-bottom:0;color:var(--ink-soft);font-size:17px}
@media(max-width:860px){
.plan{padding:64px 0}
.plansteps{grid-template-columns:1fr}
.planstep{border-right:0;border-bottom:1px solid var(--gold);padding:30px 0}
.planstep:last-child{border-bottom:0}
}
/* ---------- dark-section overrides ----------
Anything burgundy by default becomes gold once it sits on a burgundy ground,
or it disappears. */
.dark .textlink,.about .textlink,.offers .textlink,.statement .textlink,.footer .textlink{
color:var(--gold-light);border-bottom-color:var(--gold);
}
.dark .textlink:hover,.about .textlink:hover{border-bottom-color:var(--gold-light)}
.dark .ps .lbl,.about .ps .lbl,.offers .ps .lbl{color:var(--gold-light)}
.dark .ticks li,.about .ticks li,.offers .ticks li{color:var(--linen)}
.dark .ticks li b,.about .ticks li b,.offers .ticks li b{color:var(--gold-light)}
.dark .pull,.about .pull{color:var(--gold-light);border-left-color:var(--gold)}
.dark .stakes p,.about .stakes p{color:var(--linen)}
/* ---------- case studies ---------- */
.cases{padding:96px 0;background:var(--offwhite)}
.casegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,52px);margin-top:48px}
.case{display:flex;flex-direction:column}
.case:before{content:"";display:block;width:38px;height:1px;background:var(--gold);margin-bottom:20px}
.case .case-result{
font-size:clamp(26px,2.8vw,34px);font-weight:250;letter-spacing:-.02em;line-height:1.15;
color:var(--burgundy);margin:0 0 14px;
}
.case .case-result b{font-weight:600}
.case p{color:var(--ink-soft);font-size:16.5px;margin:0 0 16px}
.case blockquote{
margin:0 0 16px;font-size:17px;line-height:1.55;font-weight:300;color:var(--burgundy);
font-style:italic;
}
.case .who{
font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
color:var(--gold-ink);margin:auto 0 0;
}
.case .who span{display:block;letter-spacing:.02em;text-transform:none;font-weight:400;color:var(--ink-soft);font-size:14px;margin-top:4px}
/* ---------- screenshot proof ---------- */
.shots{padding:88px 0;background:var(--linen)}
.shotgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:44px}
.shot-img{
background:var(--offwhite);border:1px solid var(--rule-linen);
padding:14px;box-shadow:0 12px 30px -20px rgba(42,23,31,.5);
}
.shot-img img{width:100%;height:auto;display:block}
.shot-img figcaption{
font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
color:var(--gold-ink);margin-top:12px;
}
.shot-placeholder{
background:var(--offwhite);border:1px dashed var(--rule-linen);
min-height:300px;display:flex;align-items:center;justify-content:center;
text-align:center;padding:26px;color:var(--ink-soft);font-size:14px;line-height:1.6;
}
@media(max-width:860px){
.cases,.shots{padding:64px 0}
.casegrid{grid-template-columns:1fr;gap:40px}
}
/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.rv{opacity:1!important;transform:none!important;transition:none!important}
}
/* ---------- benefit ticks ----------
Short proof points with a mark beside them. Burgundy ring, gold tick. */
.bens{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,58px);margin-top:clamp(34px,4vw,52px);padding:0;list-style:none}
.ben{display:flex;align-items:center;gap:13px;font-size:16.5px;color:var(--ink-soft);font-weight:400}
.ben svg{flex:none;width:30px;height:30px}
.ben b{color:var(--burgundy);font-weight:600}
.dark .ben,.offers .ben,.about .ben{color:var(--linen)}
.dark .ben b,.about .ben b{color:var(--gold-light)}
@media(max-width:700px){.bens{gap:18px;flex-direction:column}}
/* full-width strip of benefit ticks, sits under the hero */
.benstrip{padding:0 0 clamp(34px,4vw,52px)}
.benstrip .bens{margin-top:0;justify-content:space-between;max-width:900px}
.benstrip .ben{font-size:17px}
@media(max-width:700px){.benstrip .bens{justify-content:flex-start}}
/* highlight sitting inside a heading, not just body copy */
h1 .mark,h2 .mark,.h2 .mark{
padding:.02em .22em .08em;
box-decoration-break:clone;-webkit-box-decoration-break:clone;
font-weight:inherit;
}
/* ---------- story card ----------
Pill tab, card, quote bars, result panel. */
.storywrap{position:relative;margin-top:56px}
.cardpill{
position:absolute;top:-26px;left:50%;transform:translateX(-50%);
background:var(--gold);color:var(--burgundy-deep);
font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:26px;
padding:9px 30px 12px;border-radius:100px;white-space:nowrap;z-index:2;
box-shadow:0 8px 22px -14px rgba(42,23,31,.55);
}
.storycard{
background:var(--offwhite);border:1px solid var(--rule-light);
border-top:3px solid var(--gold);
padding:clamp(42px,5vw,64px) clamp(26px,4vw,58px) clamp(34px,4vw,48px);
box-shadow:0 24px 60px -46px rgba(42,23,31,.55);
}
.storycard > p{font-size:17.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 18px;max-width:none}
.storycard > p:first-of-type{font-weight:600;color:var(--ink);font-size:19px}
.storycard b{color:var(--burgundy);font-weight:600}
.pullquote{
margin:26px 0;padding:2px 0 2px 22px;border-left:3px solid var(--gold);
font-size:clamp(19px,2.1vw,24px);font-weight:300;font-style:italic;
line-height:1.45;color:var(--burgundy);
}
.resultbox{
background:var(--champagne);border-left:3px solid var(--burgundy);
padding:22px 26px;margin-top:30px;font-size:16.5px;line-height:1.6;color:var(--ink-soft);
}
.resultbox .lbl{font-weight:700;color:var(--burgundy)}
.resultbox b{color:var(--burgundy);font-weight:700}
@media(max-width:700px){
.cardpill{font-size:22px;padding:8px 22px 10px}
.pullquote{padding-left:16px}
}
/* handwritten eyebrow, sits above a heading like a note in the margin */
p.cuebrow,span.cuebrow,.cuebrow{
display:inline-block;font-family:"Caveat","Bradley Hand",cursive;
font-weight:600;font-size:28px;line-height:1.2;letter-spacing:.01em;
color:var(--gold-ink);margin:0 0 6px;transform:rotate(-1.2deg);
}
.dark p.cuebrow,.offers p.cuebrow,.statement p.cuebrow,.about p.cuebrow,.dark .cuebrow{color:var(--gold-light)}
.cuebrow.hl{background:var(--gold);color:var(--burgundy-deep);padding:.02em .5em .1em}
/* ---------- stat row ---------- */
.stats{background:var(--burgundy);padding:clamp(30px,4vw,44px) 0}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.stat{background:rgba(251,250,249,.07);border:1px solid rgba(227,203,152,.3);padding:26px 20px;text-align:center}
.stat .fig{
display:block;font-size:clamp(34px,4.6vw,54px);font-weight:200;letter-spacing:-.03em;
color:var(--gold-light);line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums;
}
.stat .lab{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--linen)}
@media(max-width:700px){.statgrid{grid-template-columns:1fr}.stat{padding:20px}}
/* ---------- two-card comparison ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.5vw,32px);margin-top:44px}
.cmp{padding:clamp(30px,3.4vw,44px)}
.cmp.bad{background:var(--linen);color:var(--ink-soft)}
.cmp.good{background:var(--burgundy);color:var(--linen)}
.cmp h3{font-size:clamp(22px,2.4vw,29px);font-weight:300;letter-spacing:-.02em;margin:0 0 22px}
.cmp.bad h3{color:var(--burgundy)}
.cmp.good h3{color:var(--gold-light)}
.cmp ul{list-style:none;margin:0;padding:0}
.cmp li{position:relative;padding-left:28px;margin-bottom:14px;font-size:16.5px;line-height:1.5}
.cmp li:before{position:absolute;left:0;top:0;font-size:17px;font-weight:700}
.cmp.bad li:before{content:"\00d7";color:var(--burgundy)}
.cmp.good li:before{content:"\2713";color:var(--gold)}
.cmp b{font-weight:600}
.cmp.bad b{color:var(--burgundy)}
.cmp.good b{color:var(--gold-light)}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
/* ---------- two-column alignment ----------
The eyebrow pushes the left heading down. Without a matching offset the
right column starts higher and nothing lines up. Derived from the eyebrow's
own metrics so it stays correct if those change. */
:root{ --ey-block: calc(11px * 1.7 + 18px); }
.twocol > div:first-child:has(> .ey) ~ div{ padding-top: var(--ey-block); }
.twocol > div:first-child:has(> .ey) ~ div > .ey{ margin-top: calc(var(--ey-block) * -1); }
@media(max-width:860px){
.twocol > div:first-child:has(> .ey) ~ div{ padding-top:0 }
.twocol > div:first-child:has(> .ey) ~ div > .ey{ margin-top:0 }
}
/* the statement band runs at 104px, so an 11px eyebrow disappears under it */
.statement .ey{font-size:clamp(14px,1.3vw,17px);letter-spacing:.3em;margin-bottom:clamp(22px,2.4vw,34px)}
.statement p.ey{font-size:clamp(14px,1.3vw,17px)}
/* ---------- hand-drawn emphasis ----------
Warms the page up without emoji. Gold ink, slightly imperfect,
so it reads as annotation rather than decoration. */
/* wobbly underline beneath a phrase */
.scribble{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:0 100%;background-size:100% .4em;
padding-bottom:.16em;
}
/* hand-drawn ring around a word or figure */
.circled{position:relative;display:inline-block;padding:.1em .42em}
.circled:before{
content:"";position:absolute;inset:-.28em -.3em;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;
}
/* margin note, like something jotted beside the page */
.note{
position:relative;background:var(--champagne);
padding:22px 26px;margin:30px 0;max-width:46ch;
transform:rotate(-.6deg);
box-shadow:0 10px 26px -20px rgba(42,23,31,.6);
}
.note p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-soft)}
.note .nlbl{
display:block;font-family:"Caveat","Bradley Hand",cursive;font-size:24px;
color:var(--gold-ink);margin-bottom:6px;line-height:1;
}
.dark .note,.offers .note,.about .note{background:rgba(251,250,249,.08);color:var(--linen)}
.dark .note p,.about .note p{color:var(--linen)}
.dark .note .nlbl,.about .note .nlbl{color:var(--gold-light)}
/* hand-drawn arrow, for pointing at things */
.arrow{display:inline-block;width:58px;height:26px;vertical-align:middle;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-size:contain;background-position:center;
}
/* ---------- price rows (compact fee teaser inside a prose block) ---------- */
.pricebits{list-style:none;margin:22px 0 0;padding:0;max-width:24rem}
.pricebits li{
display:flex;justify-content:space-between;align-items:baseline;gap:20px;
padding:11px 0;border-bottom:1px solid var(--rule);font-size:16.5px;
}
.pricebits li:first-child{border-top:1px solid var(--gold)}
.pricebits .pb-l{color:var(--ink)}
.pricebits .pb-n{color:var(--burgundy);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---------- line icons above a numbered step ---------- */
.stepicons .planstep .ico{display:block;width:42px;height:42px;margin-bottom:16px}
.stepicons .planstep .ico svg{width:100%;height:100%;display:block}
/* ---------- two-column yes/no, headings and lists on shared rows ----------
subgrid keeps both lists starting at the same y even when one heading wraps
to two lines and the other doesn't. */
.fitcols{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);
grid-template-rows:auto auto;margin-top:22px;
}
.fitcols > div{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}
/* subgrid stretches each row item to the height of the tallest column, so the
shorter list was carrying dead space inside it. Pin them to the top. */
.fitcols > div > *{align-self:start}
.fitcols h2{margin:0}
.fitcols .ticks{margin-bottom:0}
@supports not (grid-template-rows:subgrid){
.fitcols > div{display:block}
}
@media(max-width:820px){
.fitcols{grid-template-columns:1fr;grid-template-rows:none}
.fitcols > div{display:block}
}
/* ---------- the rooms: programme cards with imagery ---------- */
.roomlead{
font-size:17.5px;color:#F0E4E9;max-width:56ch;margin:0 0 34px;
}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,38px)}
.room{
display:flex;flex-direction:column;text-decoration:none;color:inherit;
border:1px solid rgba(227,203,152,.34);padding:0 0 30px;
transition:border-color .3s ease,transform .3s ease;
}
.room:hover,.room:focus-visible{border-color:var(--gold);transform:translateY(-4px)}
.roomimg{display:block;overflow:hidden;aspect-ratio:4/3}
.roomimg img{
width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.82) contrast(1.02);
transition:transform .6s cubic-bezier(.2,.7,.3,1),filter .4s ease;
}
.room:hover .roomimg img{transform:scale(1.055);filter:saturate(1) contrast(1.02)}
.roomname{
font-size:24px;font-weight:400;letter-spacing:-.01em;color:#fff;
margin:0 28px 8px;line-height:1.2;
}
.roomsay{font-size:16px;color:#EDDFE4;margin:0 28px 18px;line-height:1.55;flex:1 0 auto}
.room .meta{margin:0 28px}
.roomcta{
margin:22px 28px 0;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
font-weight:600;color:var(--gold-light);
border-bottom:1px solid rgba(227,203,152,.5);align-self:flex-start;padding-bottom:4px;
transition:color .25s,border-color .25s;
}
.room:hover .roomcta{color:var(--gold);border-bottom-color:var(--gold)}
@media(max-width:900px){ .rooms{grid-template-columns:1fr} .roomimg{aspect-ratio:16/9} }
/* ---------- six money numbers: tick what you know ---------- */
.selfcheck{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.selfcheck li{border-bottom:1px solid var(--rule)}
.selfcheck label{
display:flex;align-items:flex-start;gap:16px;cursor:pointer;
padding:16px 4px;font-size:16.5px;line-height:1.55;color:var(--ink-soft);
transition:color .2s ease;
}
.selfcheck label:hover{color:var(--ink)}
.selfcheck b{color:var(--burgundy);font-weight:600}
.selfcheck input{
appearance:none;-webkit-appearance:none;flex:none;
width:22px;height:22px;margin:1px 0 0;border:1px solid var(--gold);
background:transparent;cursor:pointer;position:relative;
transition:background .2s ease,border-color .2s ease;
}
.selfcheck input:after{
content:"";position:absolute;left:6px;top:2px;width:6px;height:12px;
border:solid var(--burgundy-deep);border-width:0 2px 2px 0;
transform:rotate(42deg) scale(0);transform-origin:center;
transition:transform .18s cubic-bezier(.3,1.5,.6,1);
}
.selfcheck input:checked{background:var(--gold);border-color:var(--gold)}
.selfcheck input:checked:after{transform:rotate(42deg) scale(1)}
.selfcheck input:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.selfcheck li:has(input:checked) label{color:var(--ink)}
.scscore{
margin-top:22px;font-size:17px;line-height:1.6;color:var(--ink-soft);
border-left:3px solid var(--gold);padding-left:18px;min-height:3.2em;
}
.scscore b{color:var(--burgundy);font-weight:600}
/* ---------- runway: months you could fund your life ---------- */
.runway{
margin-top:30px;padding:26px 28px;background:var(--burgundy-deep);color:#fff;
}
.runway .rwl{
font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
color:var(--gold-light);margin:0 0 10px;
}
.runway .rwn{
font-family:var(--display);font-size:clamp(38px,5vw,54px);font-weight:250;
line-height:1;margin:0 0 12px;letter-spacing:-.02em;color:#fff;
}
.runway .rwd{margin:0;font-size:16px;line-height:1.6;color:#F2E9E6}
.runway .rwd b{color:var(--gold-light);font-weight:600}
/* ---------- split photographic band ----------
A vertical portrait cannot fill a wide band without cropping to plants and
ceiling, so the photo gets its own half at full height and the type gets a
burgundy field beside it. Works with every portrait in the set. */
.bleed{
display:grid;grid-template-columns:1.05fr .95fr;
background:var(--burgundy-deep);color:#fff;overflow:hidden;
min-height:clamp(440px,60vh,620px);
}
.bleedin{
align-self:center;padding:clamp(48px,6vw,88px) clamp(30px,5vw,80px);
max-width:36rem;justify-self:end;width:100%;
}
.bleed .ey{color:var(--gold-light)}
.bleed h2{
font-size:clamp(31px,3.7vw,54px);font-weight:250;letter-spacing:-.03em;
line-height:1.06;margin:16px 0 6px;text-wrap:balance;
}
.bleed .script{
font-size:clamp(27px,2.9vw,42px);color:var(--gold-light);display:block;
line-height:1.15;text-wrap:balance;
}
.bleedimg{position:relative;overflow:hidden;min-height:340px}
.bleedimg img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 22%;
filter:grayscale(100%) contrast(1.05);
}
/* gold hairline where the two halves meet */
.bleedimg:before{
content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
background:var(--gold);opacity:.55;z-index:2;
}
@media(max-width:820px){
.bleed{grid-template-columns:1fr}
.bleedin{justify-self:stretch;max-width:none;order:2}
.bleedimg{order:1;min-height:clamp(320px,52vh,440px)}
.bleedimg:before{left:0;right:0;top:auto;bottom:0;width:auto;height:1px}
}
/* mirrored variant: photo on the left, type on the right */
.bleed-alt .bleedin{order:2;justify-self:start}
.bleed-alt .bleedimg{order:1}
.bleed-alt .bleedimg:before{left:auto;right:0}
.bleed-alt .bleedimg img{filter:none} /* brand object shots keep their gold */
@media(max-width:820px){
.bleed-alt .bleedin{order:2}
.bleed-alt .bleedimg{order:1}
.bleed-alt .bleedimg:before{left:0;right:0;top:auto;bottom:0;width:auto;height:1px}
}
/* ---------- the pain section ----------
Second person, stacked, before any solution. Deliberately the plainest
block on the page: no cards, no icons, nothing to look at except the
sentence you recognise. */
.pains{padding:clamp(64px,7vw,96px) 0;background:var(--offwhite)}
.pains h2{
font-size:clamp(34px,5vw,64px);color:var(--burgundy);font-weight:250;
letter-spacing:-.032em;line-height:1.06;margin:14px 0 0;max-width:20ch;
}
.painlist{margin-top:clamp(38px,4.5vw,58px);border-top:1px solid var(--rule)}
.pain{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(20px,4vw,60px);align-items:center;
padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--rule);
transition:background .3s ease;
}
.pain h3{
margin:0;font-size:clamp(21px,2.5vw,31px);font-weight:300;color:var(--burgundy);
letter-spacing:-.018em;line-height:1.2;text-wrap:balance;
}
.pain p{margin:0;font-size:16.5px;line-height:1.62;color:var(--ink-soft)}
.painclose{
margin-top:clamp(32px,4vw,46px);font-size:clamp(19px,2.1vw,26px);
line-height:1.45;color:var(--ink);max-width:34ch;font-weight:300;
}
@media(max-width:760px){
.pain{grid-template-columns:1fr;gap:10px}
}
/* ---------- profit / power / freedom ----------
Sharon's long-form copy, so it gets room rather than a card. Number and
label hang in the left column. Each pillar turns halfway: the promise on the
light ground, then the cost on a dark panel so the shift is felt, not just
read. Lives on the light .work band. */
.pillars{margin-top:clamp(44px,5vw,70px);border-top:1px solid var(--rule)}
.pillar{
display:grid;grid-template-columns:minmax(150px,.4fr) minmax(0,1fr);
gap:clamp(24px,4vw,66px);
padding:clamp(40px,4.6vw,66px) 0;border-bottom:1px solid var(--rule);
}
.phead{display:flex;flex-direction:column;gap:12px}
.pnum{
font-family:var(--display);font-size:clamp(40px,4.4vw,58px);font-weight:600;
line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold);
}
.plbl{
margin:0;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
font-weight:600;color:var(--gold-ink);
}
.pbody{max-width:38rem}
.pillar h3{
margin:0 0 20px;font-size:clamp(28px,3.8vw,50px);font-weight:250;
letter-spacing:-.03em;line-height:1.06;color:var(--burgundy);text-wrap:balance;
}
.pbody > p{margin:0 0 15px;font-size:17px;line-height:1.68;color:var(--ink-soft)}
.ppunch{
margin-top:30px!important;margin-bottom:0!important;
font-size:clamp(22px,2.5vw,31px)!important;line-height:1.34!important;
color:var(--burgundy)!important;font-weight:250;letter-spacing:-.018em;
border-left:2px solid var(--gold);padding-left:24px;position:relative;
}
/* small drawn flourish sitting above the line */
.ppunch:before{
content:"";position:absolute;left:24px;top:-20px;width:46px;height:12px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-size:100% 100%;
}
/* ---------- word by word fade ----------
The hidden state is only applied once JS has added .wsplit, so a page with
no JS, or a failed script, always renders the sentence normally. */
.wsplit .w{
display:inline-block;opacity:0;transform:translateY(9px);
transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.wsplit.win .w{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.wsplit .w{opacity:1!important;transform:none!important;transition:none!important}
}
/* the cost half */
.pdont{
margin-top:clamp(28px,3vw,40px);
background:var(--burgundy-deep);color:#EDDFE4;
padding:clamp(26px,3vw,38px) clamp(24px,3vw,38px);
}
.dlbl{
margin:0 0 16px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
font-weight:600;color:var(--gold);
}
.pdont p:not(.dlbl):not(.dpunch){margin:0 0 14px;font-size:16.5px;line-height:1.65;color:#E4D2D8}
.dpunch{
margin:22px 0 0;font-size:clamp(18px,1.9vw,23px);line-height:1.45;
color:#fff;font-weight:300;border-left:2px solid var(--gold);padding-left:18px;
}
@media(max-width:820px){
.pillar{grid-template-columns:1fr;gap:16px}
.phead{flex-direction:row;align-items:baseline;gap:16px}
}
/* super shown as capped inside the freedom number breakdown */
.capnote{
font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
color:var(--gold-light);margin-left:9px;
}
/* the seated frame is full length, so it needs a lower focal point than the
head-and-shoulders portraits the .about rule was written for */
.about img[src*="sharon-seated"]{object-position:center 30%}
@media(max-width:820px){
.aboutgrid{grid-template-columns:1fr}
.about img{min-height:clamp(320px,52vh,440px)}
}
/* ---------- prices on the offer cards and rows ---------- */
.roomprice{
display:block;margin:26px 28px 4px;font-family:var(--display);
font-size:clamp(30px,3vw,40px);font-weight:250;letter-spacing:-.02em;
line-height:1;color:var(--gold-light);
}
/* ---------- blog: image cards ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,44px)}
.post{display:flex;flex-direction:column}
.pimg{
display:block;overflow:hidden;aspect-ratio:3/2;background:var(--linen);
margin-bottom:16px;
}
.pimg img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.post:hover .pimg img{transform:scale(1.05)}
.ptags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.ptags span{
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
color:var(--gold-ink);background:var(--champagne);padding:5px 10px;
border:1px solid var(--gold-light);
}
.post h3{
margin:0 0 10px;font-size:clamp(20px,1.9vw,25px);font-weight:300;
letter-spacing:-.018em;line-height:1.22;text-wrap:balance;
}
.post h3 a{color:var(--burgundy);text-decoration:none;border-bottom:1px solid transparent}
.post h3 a:hover{border-bottom-color:var(--gold)}
.pex{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.pdate{
margin:auto 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
font-weight:600;color:var(--gold-ink);
}
/* shown while there are no posts yet */
.emptypost{
background:var(--champagne);padding:clamp(34px,4.4vw,58px);max-width:44rem;
border-left:3px solid var(--gold);
}
.emptypost h3{
margin:12px 0 14px;font-size:clamp(24px,2.8vw,34px);font-weight:300;
color:var(--burgundy);letter-spacing:-.02em;
}
.emptypost p{margin:0;font-size:17px;line-height:1.66;color:var(--ink-soft);max-width:52ch}
/* the body of a single post */
.entrybody{max-width:40rem}
.entrybody p{font-size:17.5px;line-height:1.75;color:var(--ink-soft);margin:0 0 20px}
.entrybody h2{
font-size:clamp(24px,2.8vw,34px);font-weight:300;color:var(--burgundy);
letter-spacing:-.02em;line-height:1.18;margin:44px 0 16px;text-wrap:balance;
}
.entrybody h2:first-child{margin-top:0}
.entrybody b,.entrybody strong{color:var(--burgundy);font-weight:600}
.entrybody a{color:var(--burgundy)}
@media(max-width:1000px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .posts{grid-template-columns:1fr} }
/* ---------- three case studies side by side ---------- */
.stories{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(22px,2.6vw,36px);align-items:stretch;margin-top:56px;
}
/* the wrap has to stretch too, or height:100% on the card measures against
its own content and the three cards end at different heights */
.stories .storywrap{margin-top:0;display:flex}
.stories .storycard{height:100%;display:flex;flex-direction:column}
.stories .storycard .who{margin-top:auto;padding-top:20px}
.stories .case-result{font-size:17px!important}
.stories .pullquote{font-size:clamp(17px,1.5vw,19px);margin:20px 0}
@media(max-width:1000px){
.stories{grid-template-columns:1fr;gap:clamp(40px,5vw,56px)}
}
/* .who was only styled under .case, so the name and the descriptor ran
together as "FibiFounder" inside a story card. */
.storycard .who{
margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
font-weight:600;color:var(--burgundy);
}
.storycard .who span{
display:block;margin-top:5px;font-size:14px;letter-spacing:.02em;
text-transform:none;font-weight:400;color:var(--ink-soft);
}
/* ---------- handwritten cue sitting over a room card ----------
The rooms are the choosing moment, so each cue is the selection criterion
rather than a slogan. Sits over the top of the image, tilted. */
.room{position:relative}
.roomcue{
position:absolute;top:16px;left:16px;z-index:3;
font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:23px;
line-height:1.15;color:var(--burgundy-deep);background:var(--gold);
padding:5px 15px 8px;transform:rotate(-1.6deg);
box-shadow:0 8px 20px -14px rgba(42,23,31,.7);
max-width:calc(100% - 32px);
}
@media(max-width:900px){ .roomcue{font-size:21px} }
/* ---------- profit / power / freedom, homepage summary ----------
The full argument lives on /profit-power-freedom/. This is the headline
and the payoff line only, as three cards that link into it. */
.ppf{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(20px,2.4vw,34px);margin-top:clamp(36px,4vw,54px);
}
.ppfcard{
display:flex;flex-direction:column;text-decoration:none;
border-top:2px solid var(--gold);padding:26px 0 0;
transition:border-color .3s ease,transform .3s ease;
}
.ppfcard:hover,.ppfcard:focus-visible{border-top-color:var(--burgundy);transform:translateY(-3px)}
.ppfcard .pnum{margin-bottom:8px}
.ppfcard .plbl{margin-bottom:16px}
.ppfh{
font-size:clamp(23px,2.4vw,31px);font-weight:250;color:var(--burgundy);
letter-spacing:-.025em;line-height:1.1;margin-bottom:16px;text-wrap:balance;
}
.ppfp{
font-size:16.5px;line-height:1.55;color:var(--ink-soft);
border-left:2px solid var(--gold);padding-left:16px;margin-bottom:22px;
}
.ppfmore{
margin-top:auto;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
font-weight:600;color:var(--burgundy);border-bottom:1px solid var(--gold);
align-self:flex-start;padding-bottom:4px;transition:border-color .25s;
}
.ppfcard:hover .ppfmore{border-bottom-color:var(--burgundy)}
@media(max-width:860px){ .ppf{grid-template-columns:1fr;gap:clamp(28px,4vw,38px)} }
/* ---------- payment options ----------
Three ways to pay, shown side by side with the real total under each, so
the premium on an instalment plan is visible rather than discovered later. */
.payplan{
list-style:none;margin:30px 0 0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
background:var(--rule);border:1px solid var(--rule);
}
.payplan li{
background:var(--offwhite);padding:22px 20px;display:flex;flex-direction:column;gap:6px;
}
.payplan li:first-child{background:var(--champagne)}
.pp-l{
font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
color:var(--gold-ink);
}
.pp-n{
font-family:var(--display);font-size:clamp(24px,2.4vw,31px);font-weight:250;
letter-spacing:-.02em;line-height:1.05;color:var(--burgundy);
font-variant-numeric:tabular-nums;
}
.pp-s{font-size:14px;color:var(--ink-soft)}
.payplan li:first-child .pp-s{color:var(--gold-ink);font-weight:600}
.paynote{margin-top:16px!important;font-size:14.5px;color:var(--ink-soft);font-style:italic}
@media(max-width:700px){ .payplan{grid-template-columns:1fr} }
/* ---------- stop adjacent same-ground sections doubling their padding ------
Two light sections in a row were stacking 92px and 84px, so 176px of empty
space read as one huge void rather than a break between two ideas. Where the
colour does not change there is no need to pay for the gap twice. */
.pains + .section,
.proof + .section,
.section + .section,
.section + .pains{ padding-top:0 }
/* ...but only where the ground stays the same. A section that sets its own
background is a new band, and it needs its own breathing room back. */
.pains + .section[style*="background"],
.proof + .section[style*="background"],
.section + .section[style*="background"],
.section + .pains[style*="background"],
/* ...and equally where the section ABOVE carries the background, because the
ground still changes at that line and the next block needs its own room. */
.section[style*="background"] + .section,
.section[style*="background"] + .pains,
.pains[style*="background"] + .section{ padding-top:clamp(58px,6.4vw,84px) }
/* four across on wide screens, two by two below, one on a phone */
.cards.four{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
@media(max-width:620px){ .cards.four{grid-template-columns:1fr} }
/* Four narrow columns means some headings wrap and some do not, which left the
body copy starting at different heights. Reserve two lines for the heading so
every card's paragraph begins on the same line. Single column drops it. */
.card h3{line-height:1.14}
@media(min-width:621px){ .cards.four h3{min-height:2.28em} }
/* ---------- awards ----------
Level and category are set apart from the body line so a finalist can never
read as a win, and a media mention can never read as an award. */
.awards{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:clamp(20px,2.4vw,34px);
}
.award{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
padding:24px 16px;border:1px solid var(--rule);background:var(--offwhite);
}
.award img{width:auto;height:76px;object-fit:contain;margin-bottom:6px}
.alvl{
font-family:var(--display);font-size:30px;font-weight:250;line-height:1;
letter-spacing:-.02em;color:var(--gold-ink);margin-bottom:6px;
}
.award.gold .alvl{color:#A8801F}
.award.silver .alvl{color:#7C7E86}
.acat{font-size:16.5px;font-weight:600;color:var(--burgundy);line-height:1.3}
.abody{font-size:13px;color:var(--ink-soft);line-height:1.45}
/* media logos, deliberately quieter than the awards above them */
.medialogos{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
align-items:center;justify-content:center;gap:clamp(26px,4vw,58px);
}
.medialogos img{height:34px;width:auto;object-fit:contain;opacity:.62;
filter:grayscale(100%);transition:opacity .25s,filter .25s}
.medialogos li:hover img{opacity:1;filter:grayscale(0)}
@media(max-width:560px){
.awards{grid-template-columns:1fr 1fr}
.medialogos img{height:26px}
}
/* ---------- moving logo banner ----------
Same mechanism as the hero ticker: one group duplicated, the track slid by
half its width, so the loop is seamless. Media mentions only. The awards and
the qualifications stay still, because those are claims rather than texture. */
.logobar{overflow:hidden;padding:4px 0 0}
.logotrack{display:flex;width:max-content;animation:scroll 42s linear infinite}
.logogroup{
display:flex;flex-shrink:0;align-items:center;list-style:none;margin:0;padding:0;
gap:clamp(40px,5vw,78px);padding-right:clamp(40px,5vw,78px);
}
.logogroup img{
height:60px;width:auto;object-fit:contain;display:block;
filter:grayscale(45%) contrast(1.08);opacity:.92;
transition:filter .25s,opacity .25s;
}
/* Inside Small Business is a wide wordmark rather than a round seal, so equal
height makes it dwarf the others. Rein it in to match their optical weight. */
.logogroup img[src*="inside-small-business"]{height:34px}
.logogroup img[src*="balance-the-grind"]{height:44px}
.logobar:hover .logotrack{animation-play-state:paused}
.logogroup li:hover img{filter:grayscale(0);opacity:1}
@media(prefers-reduced-motion:reduce){ .logotrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center} }
@media(max-width:560px){ .logogroup img{height:42px} .logogroup img[src*="inside-small-business"]{height:24px} }
/* ---------- images inside a two column band ----------
Several brand shots are tall portraits. At half column width they rendered
up to 900px high next to three lines of heading, which left a column of
white space beside them. Cap the height and let the crop do the work. */
.twocol img{
width:100%;height:auto;max-height:clamp(320px,38vw,460px);
object-fit:cover;object-position:center 30%;display:block;
}
@media(max-width:860px){ .twocol img{max-height:clamp(240px,44vw,340px)} }
/* the logo banner is the last thing in the proof section, so it does not need
the section's full bottom padding underneath it as well */
.proof:has(.logobar){padding-bottom:clamp(26px,3vw,40px)}
/* handwritten tag above a card heading */
/* a handwritten sticker, not a caption. Gold block so it reads at a glance
and sits in the same family as the .cue and .cardpill components. */
.cardtag{
display:inline-block;font-family:"Caveat","Bradley Hand",cursive;
font-weight:600;font-size:27px;line-height:1;
color:var(--burgundy-deep);background:var(--gold);
padding:5px 16px 9px;margin:0 0 14px;
transform:rotate(-1.8deg);transform-origin:left center;
box-shadow:0 8px 20px -14px rgba(42,23,31,.75);
transition:transform .25s ease;
}
.card:hover .cardtag{transform:rotate(-1.8deg) translateY(-2px)}
.cards.stepicons .card:before{display:none}
.cards.stepicons .ico{display:block;width:40px;height:40px;margin-bottom:14px}
.cards.stepicons .ico svg{width:100%;height:100%;display:block}
/* ---------- application form ---------- */
.applyform{max-width:44rem}
.fset{border:0;padding:0;margin:0 0 clamp(34px,4vw,52px)}
.fset legend{
padding:0;margin:0 0 20px;font-size:11px;letter-spacing:.24em;
text-transform:uppercase;font-weight:600;color:var(--gold-ink);
border-bottom:1px solid var(--gold);width:100%;padding-bottom:12px;
}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(16px,2vw,26px)}
.fld{display:block;margin-bottom:20px}
.fld > span{
display:block;margin-bottom:8px;font-size:15.5px;line-height:1.45;
color:var(--ink);font-weight:500;
}
.fld > span b{color:var(--burgundy)}
.fld input,.fld select,.fld textarea{
width:100%;font:inherit;font-size:16.5px;color:var(--ink);
background:var(--offwhite);border:1px solid var(--rule);
padding:13px 15px;border-radius:0;
transition:border-color .2s,box-shadow .2s;
}
.fld textarea{resize:vertical;line-height:1.6;min-height:96px}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
padding-right:40px;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
outline:0;border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(105,22,54,.10);
}
.ferr{
display:none;margin:14px 0 0;font-size:15px;color:var(--burgundy);font-weight:600;
}
.ferr.on{display:block}
.fnote{margin-top:16px;font-size:14px;color:var(--ink-soft)}
.fnote a{color:var(--burgundy)}
.applyform button[disabled]{opacity:.6;cursor:default}
.applydone{
max-width:44rem;background:var(--champagne);border-left:3px solid var(--gold);
padding:clamp(32px,4vw,52px);
}
.applydone p{font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0}
@media(max-width:620px){ .frow{grid-template-columns:1fr} }
/* ---------- Profit Stacking ----------
The signature model as three stages rather than a wheel. A circle cannot be
read on a phone and cannot be read by a search engine at all. Stacked bands
keep the order, which is the part of the model that carries the meaning. */
.stack{list-style:none;margin:clamp(38px,4.5vw,58px) 0 0;padding:0;counter-reset:st}
.stage{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(22px,3.4vw,54px);align-items:start;
padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--rule);
}
.stage:last-child{border-bottom:1px solid var(--rule)}
.sthead{display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:baseline}
.snum{
font-family:var(--display);font-size:clamp(30px,3.2vw,42px);font-weight:250;
line-height:1;color:var(--gold);grid-row:span 2;
}
.stage h3{
margin:0 0 8px;font-size:clamp(23px,2.5vw,31px);font-weight:300;
letter-spacing:-.02em;line-height:1.12;color:var(--burgundy);
}
.sthead p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.sitems{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sitems li{
font-size:15.5px;line-height:1.4;color:var(--ink);
background:var(--champagne);border-left:2px solid var(--gold);
padding:11px 16px;
}
@media(max-width:800px){
.stage{grid-template-columns:1fr;gap:18px}
.snum{grid-row:auto}
.sthead{grid-template-columns:auto 1fr}
}
/* helper text under a form label, for the questions worth thinking about */
.fhint{
display:block;margin:-2px 0 10px;font-size:14.5px;line-height:1.6;
color:var(--ink-soft);font-style:normal;
border-left:2px solid var(--gold);padding-left:14px;max-width:52ch;
}
/* ---------- the Profit Stacking wheel ----------
Shown from 820px up. Below that the stacked list takes over, because nine
labels arranged in a circle cannot be read on a phone. The list stays in the
markup at every width so the model is machine readable either way. */
.wheel{display:none}
.wheel svg{display:block;width:100%;height:auto;max-width:800px;margin:clamp(30px,4vw,46px) auto 0}
@media(min-width:820px){
.wheel{display:block}
.stackalt{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
}
/* keep the three stat labels on the same baseline even if one of them wraps */
.stat{display:flex;flex-direction:column;justify-content:flex-start}
.stat .lab{margin-top:auto}
/* ---------- the permission slip ----------
Three acceptable reasons, then the turn. The quotes are set back and quiet
on purpose so the last line lands against them. */
.allowed{list-style:none;margin:clamp(30px,3.5vw,44px) 0 0;padding:0;max-width:34rem}
.allowed li{
display:flex;align-items:baseline;gap:13px;
font-size:clamp(19px,2.1vw,25px);line-height:1.42;
font-style:italic;font-weight:300;color:var(--ink-soft);
padding:16px 0;border-bottom:1px solid var(--rule);
}
.allowed li:first-child{border-top:1px solid var(--rule)}
/* Both marks are flex items on the same baseline, so they sit at exactly the
same height whatever the line is. The closer hugs the end of the text
rather than the right edge of the row. */
.allowed li:before,.allowed li:after{
content:"\201C";font-size:52px;line-height:0;color:var(--gold);
font-style:normal;flex:0 0 auto;position:relative;top:13px;
}
.allowed li:after{content:"\201D"}
.allowedall{
margin:clamp(26px,3vw,34px) 0 0;font-size:clamp(20px,2.2vw,26px);
font-weight:300;color:var(--gold-ink);
}
.allowedpunch{
margin:10px 0 0;font-size:clamp(28px,4.4vw,54px);font-weight:250;
letter-spacing:-.03em;line-height:1.12;color:var(--burgundy);max-width:20ch;
}
/* ---------- three case studies, lined up row for row ----------
Each card is result / quote / quote / attribution. Stacked with flex, the
second quote started wherever the first one happened to end, which is a
different height in every card. Subgrid puts all four on shared rows.
Padding on the cards is identical, so only the outer edges absorb it and
the inner grid lines still meet. */
@supports (grid-template-rows:subgrid){
@media(min-width:1001px){
.stories{grid-template-rows:auto auto auto auto;row-gap:0}
.stories .storywrap{display:grid;grid-template-rows:subgrid;grid-row:span 4}
.stories .storycard{
display:grid;grid-template-rows:subgrid;grid-row:span 4;height:auto;
}
.stories .storycard > *{margin:0;align-self:start}
.stories .case-result{padding-bottom:24px}
.stories .pullquote{margin:0 0 24px}
.stories .storycard .who{margin-top:0;padding-top:22px}
}
}
/* .final is champagne too, so a champagne section sitting directly above it
makes one continuous block of colour holding both paddings: 84px + 100px of
empty ground. Collapse it to a single gap the same size as everywhere else. */
.section[style*="champagne"]:has(+ .final){padding-bottom:0}
.section[style*="champagne"] + .final{padding-top:clamp(58px,6.4vw,84px)}
/* The type in a bleed band has to start on the same left edge as every other
section, which is .wrap's gutter: max(6vw, (page - 1180px)/2). A first grid
track sized the same way lands it there exactly, because a percentage in a
track size resolves against the grid container, and this grid is the full
page width. Centring a max-width block in the left column only ever put it
in roughly the right place. */
.bleed:not(.bleed-alt){
grid-template-columns:max(6vw,calc((100% - 1180px)/2)) 1.05fr .95fr;
}
.bleed:not(.bleed-alt) .bleedin{
grid-column:2;justify-self:stretch;max-width:none;
padding-left:0;padding-right:clamp(30px,4vw,64px);
}
.bleed:not(.bleed-alt) .bleedimg{grid-column:3}
@media(max-width:820px){
.bleed:not(.bleed-alt){grid-template-columns:1fr}
.bleed:not(.bleed-alt) .bleedin{grid-column:1;padding-left:6vw;padding-right:6vw}
.bleed:not(.bleed-alt) .bleedimg{grid-column:1}
}
/* ---------- workshop page ----------
A crosses list for the "not for you" column. The tick marker is a gold
square, so the exclusion needs its own mark rather than the same one in a
different colour, which reads as a second kind of yes. */
.crosses{list-style:none;margin:0 0 22px;padding:0}
.crosses li{
position:relative;padding-left:30px;margin-bottom:13px;
font-size:16.5px;line-height:1.55;color:var(--ink-soft);
}
.crosses li:before{
content:"";position:absolute;left:0;top:.42em;width:13px;height:13px;
background:
linear-gradient(to bottom right,transparent 44%,var(--ink-soft) 44%,var(--ink-soft) 56%,transparent 56%),
linear-gradient(to bottom left, transparent 44%,var(--ink-soft) 44%,var(--ink-soft) 56%,transparent 56%);
opacity:.55;
}
.dark .crosses li,.offers .crosses li{color:var(--linen)}
.dark .crosses li:before,.offers .crosses li:before{
background:
linear-gradient(to bottom right,transparent 44%,var(--linen) 44%,var(--linen) 56%,transparent 56%),
linear-gradient(to bottom left, transparent 44%,var(--linen) 44%,var(--linen) 56%,transparent 56%);
}
/* Numbered statement rows. Same outlined gold numeral as .res, but the row is
one statement rather than a title and a body, because that is how Sharon
wrote them. */
.numlist{margin-top:clamp(38px,4.5vw,58px);border-top:1px solid var(--rule)}
.numrow{
display:grid;grid-template-columns:64px 1fr;gap:clamp(20px,3vw,34px);
align-items:center;padding:clamp(20px,2.4vw,30px) 0;
border-bottom:1px solid var(--rule);
}
.numrow .n{
font-size:44px;font-weight:600;line-height:1;color:transparent;
-webkit-text-stroke:1px var(--gold);
}
.numrow p{margin:0;font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--ink-soft)}
.numrow p b{color:var(--burgundy);font-weight:600}
@media(max-width:760px){
.numrow{grid-template-columns:44px 1fr;gap:16px}
.numrow .n{font-size:30px}
}
/* the event facts under the workshop hero */
.factbar{
display:flex;flex-wrap:wrap;gap:0;margin:30px 0 34px;
border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
}
.factbar div{padding:18px clamp(22px,3vw,40px) 18px 0;margin-right:clamp(22px,3vw,40px);
border-right:1px solid var(--rule)}
.factbar div:last-child{border-right:0;margin-right:0;padding-right:0}
.factbar .fl{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
font-weight:600;color:var(--gold-ink);margin-bottom:7px}
.factbar .fv{display:block;font-size:clamp(18px,2vw,23px);font-weight:300;color:var(--burgundy)}
@media(max-width:620px){
.factbar div{border-right:0;margin-right:0;padding:14px 0;border-bottom:1px solid var(--rule);width:100%}
.factbar div:last-child{border-bottom:0}
}
/* On a 375px screen the two 52px quote marks and their gaps take about 90px
of the line, which is a quarter of the width before a word is set. */
@media(max-width:560px){
.allowed li{gap:9px;font-size:18px}
.allowed li:before,.allowed li:after{font-size:34px;top:9px}
}