/* ==========================================================================
Maxwild Hub — website design system ("The Ledger")
Webbon Design · 2026
Display: Cormorant Garamond (roman only — never italic)
Body: Inter
Built mobile-first. Square corners, hairline rules, numbered index rows.
========================================================================== */
/* Fonts are loaded with a in the page , not with @import.
@import here forces the browser to download this whole stylesheet before it
even discovers the font request; the starts both at once. Do not put
it back. The families are unchanged. */
/* ---------------------------------------------------------------- tokens */
:root{
--olive:#737850; --olive-d:#5C6141; --olive-dd:#3F4330; --olive-l:#8E9370;
--olive-x:#333726;
--rose:#A35E7A; --rose-l:#C08FA4; --rose-p:#EDDDE4; --rose-w:#F7EFF3;
--paper:#FAF9F6; --warm:#F3F2EC; --warm-2:#EDEBE1;
--ink:#2B2E24; --body:#5D604F; --mute:#8A8C7C;
--line:rgba(115,120,80,.22);
--line-s:rgba(115,120,80,.13);
--line-w:rgba(255,255,255,.20);
--fd:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--fb:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--pad:22px;
--maxw:1240px;
}
*,*::before,*::after{box-sizing:border-box}
/* overflow-x on body alone does not hold on iOS Safari - the html element scrolls
instead. clip is stronger than hidden here: it cannot be scrolled programmatically
either, and unlike hidden it does not create a scroll container that would break
position:sticky on the header. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
margin:0;background:var(--paper);color:var(--body);
font-family:var(--fb);font-size:17px;line-height:1.68;font-weight:400;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:600;color:var(--ink);
line-height:1.06;letter-spacing:-.018em;
font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap-n{max-width:940px}
/* ---------------------------------------------------------------- type */
.d1{font-size:clamp(40px,8vw,68px)}
/* Cormorant defaults to old-style figures — force lining figures anywhere
the text is DATA (money, reference numbers, phone numbers). */
.lnum,.trust .k,.ph-card .v,.ph-row .a,.price .amt,.crow .v,.hero-badge .n,
.qb .attr,.topbar,.ftr-bot,.idx-tags span{
font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.d2{font-size:clamp(32px,6.6vw,54px)}
.d3{font-size:clamp(26px,4.6vw,38px)}
.d4{font-size:clamp(22px,3.4vw,27px);letter-spacing:-.01em}
.eyebrow{
font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:.28em;
text-transform:uppercase;color:var(--olive);margin:0 0 20px;display:block;
}
.eyebrow.rose{color:var(--rose)}
.eyebrow.on-dark{color:var(--rose-l)}
.lead{font-size:clamp(18px,2.3vw,20px);line-height:1.62;color:var(--body)}
.small{font-size:15px;line-height:1.6}
.tiny{font-size:13.5px;line-height:1.55;color:var(--mute)}
.hl{color:var(--olive-d);font-weight:600}
.rule{width:64px;height:3px;background:var(--rose);margin:26px 0}
.rule.olive{background:var(--olive)}
.hr{height:1px;background:var(--line);border:0;margin:0}
/* ---------------------------------------------------------------- buttons (square) */
.btn{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--fb);font-size:12.5px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;padding:12px 21px;border-radius:2px;
border:1px solid transparent;cursor:pointer;transition:.22s ease;
background:var(--olive-d);color:#fff;
}
.btn:hover{background:var(--olive-x)}
.btn .ar{font-size:14px;line-height:1;transform:translateY(-1px);transition:transform .22s}
.btn:hover .ar{transform:translate(4px,-1px)}
.btn-ghost{background:transparent;color:var(--olive-d);border-color:rgba(115,120,80,.42)}
.btn-ghost:hover{background:var(--olive-d);color:#fff;border-color:var(--olive-d)}
.btn-rose{background:var(--rose);color:#fff}
.btn-rose:hover{background:#8E4E68}
.btn-light{background:#fff;color:var(--olive-x)}
.btn-light:hover{background:var(--rose-p)}
.btn-out-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-out-w:hover{background:#fff;color:var(--olive-x);border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:11px}
.tlink{
display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
letter-spacing:.13em;text-transform:uppercase;color:var(--olive-d);
border-bottom:1px solid var(--rose-l);padding-bottom:4px;transition:.2s;
}
.tlink:hover{color:var(--rose);border-color:var(--rose)}
.tlink.on-dark{color:#fff;border-color:rgba(255,255,255,.42)}
.tlink.on-dark:hover{color:var(--rose-l);border-color:var(--rose-l)}
/* ---------------------------------------------------------------- top bar */
.topbar{background:var(--olive-x);color:rgba(255,255,255,.82);font-size:12.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
gap:4px 16px;min-height:40px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.topbar .wrap>span{min-width:0}
.topbar b{color:#fff;font-weight:600;letter-spacing:.02em}
.topbar .pr{letter-spacing:.16em;text-transform:uppercase;font-size:11px;font-weight:600;
color:var(--rose-l)}
.topbar a:hover{color:#fff}
.topbar .sep{opacity:.34;margin:0 10px}
/* the strapline wrapped to two lines on a phone and cost ~40px of the first screen to
say something the hero says better. It comes back at 620px. */
@media (max-width:619px){
.topbar .pr{display:none}
.topbar .wrap{justify-content:center}
.topbar .sep{margin:0 7px}
}
/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(250,249,246,.96);
backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line-s)}
/* DIRECT child only. The mobile menu is inside .hdr and has its own .wrap - as a
descendant selector this turned the menu into a flex row and laid the links out
side by side. Do not loosen it back. */
.hdr>.wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
min-height:78px}
.brand img{height:46px;width:auto}
.nav{display:none}
.nav a{font-size:14px;font-weight:500;letter-spacing:.03em;color:var(--ink);
padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
background:var(--rose);transition:right .25s}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav a[aria-current]{color:var(--olive-d)}
.hdr-cta{display:none}
.burger{width:44px;height:44px;border:1px solid var(--line);background:transparent;
border-radius:2px;display:grid;place-content:center;gap:5px;cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav{display:none;border-top:1px solid var(--line-s);background:var(--paper);
max-height:calc(100dvh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain}
.mnav.open{display:block}
/* explicit, so it can never inherit the header's flex row again */
.mnav>.wrap{display:block;padding-top:2px;padding-bottom:10px}
.mnav a{display:flex;align-items:center;min-height:56px;padding:14px 2px;
border-bottom:1px solid var(--line-s);font-size:17px;font-weight:500;
color:var(--ink);letter-spacing:.01em}
.mnav a[aria-current]{color:var(--olive-d)}
.mnav a[aria-current]::before{content:"";width:3px;height:19px;background:var(--rose);
margin-right:12px;margin-left:-2px}
.mnav .btn{min-height:52px;margin:22px 0 0;padding:14px 21px;width:100%;
justify-content:center;border-bottom:0}
.mnav .btn+.btn{margin-top:10px;margin-bottom:6px}
/* ---------------------------------------------------------------- sections */
.sec{padding:74px 0}
.sec-s{padding:52px 0}
.sec-l{padding:92px 0}
.bg-warm{background:var(--warm)}
.bg-rose{background:var(--rose-w)}
.bg-dark{background:var(--olive-x);color:rgba(255,255,255,.78)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:#fff}
.bg-olive{background:var(--olive-d);color:rgba(255,255,255,.82)}
.bg-olive h2,.bg-olive h3{color:#fff}
.bg-dark .hr,.bg-olive .hr{background:var(--line-w)}
.sec-head{max-width:720px;margin-bottom:46px}
.sec-head .d2{margin-bottom:20px}
/* framed photo — the white inset border treatment */
.framed{position:relative;background:#fff;padding:13px;box-shadow:0 22px 54px -30px rgba(43,46,36,.5)}
.framed img{width:100%}
.framed.tall img{aspect-ratio:4/5;object-fit:cover}
.split-img .framed img{aspect-ratio:4/5;object-fit:cover;object-position:50% 44%}
.framed.wide img{aspect-ratio:16/10;object-fit:cover}
.framed::after{content:"";position:absolute;left:26px;top:26px;right:26px;bottom:26px;
border:1px solid rgba(255,255,255,.55);pointer-events:none}
.photo{position:relative;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
/* ---------------------------------------------------------------- banners
Every page hero is a full-bleed photograph with an olive grade and the
white inset border treatment carried over from the social campaign. */
.banner{position:relative;overflow:hidden;color:rgba(255,255,255,.86);isolation:isolate}
.banner .bg{position:absolute;inset:0;z-index:0}
.banner .bg img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 46%)}
.banner .grade{position:absolute;inset:0;z-index:1;background:
linear-gradient(180deg,rgba(22,26,16,.62) 0%,rgba(22,26,16,.30) 26%,
rgba(22,26,16,.46) 62%,rgba(18,21,12,.82) 100%)}
.banner .frame{position:absolute;left:16px;top:16px;right:16px;bottom:16px;z-index:3;
border:1.5px solid rgba(255,255,255,.5);pointer-events:none}
.banner .wm{position:absolute;right:18px;bottom:34px;width:min(190px,26%);opacity:.13;z-index:2;
pointer-events:none}
.banner .wrap{position:relative;z-index:4;padding-top:60px;padding-bottom:60px}
.banner h1,.banner h2{color:#fff;font-weight:500;letter-spacing:-.012em;
text-shadow:0 1px 22px rgba(14,17,9,.42)}
.banner h1{font-size:clamp(33px,5.4vw,50px);line-height:1.1}
.banner .d2{font-size:clamp(28px,4.4vw,42px);line-height:1.1}
.banner .lead,.banner p{color:rgba(255,255,255,.82);font-weight:300;
font-size:clamp(15px,1.5vw,16.5px);line-height:1.75;max-width:560px;
text-shadow:0 1px 20px rgba(14,17,9,.45)}
.banner .eyebrow{font-size:11px;letter-spacing:.26em;margin-bottom:16px}
.banner .crumb{font-size:11px;letter-spacing:.16em;margin-bottom:16px}
.banner .eyebrow{color:var(--rose-p)}
.banner .crumb{color:rgba(255,255,255,.66)}
.banner .crumb a:hover{color:#fff}
.banner .rule{background:var(--rose-l)}
.banner .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.banner .btn-ghost:hover{background:#fff;color:var(--olive-x);border-color:#fff}
.banner .btn{background:#fff;color:var(--olive-x)}
.banner .btn:hover{background:var(--rose-p)}
/* home hero — taller, content sits low */
.hero{min-height:clamp(500px,80vh,700px);display:grid;align-items:end}
.hero h1{margin:0 0 20px;font-size:clamp(36px,6.2vw,58px)}
.hero h1 .ln2{display:block;color:var(--rose-p)}
.hero-sub{max-width:530px}
.hero-badge{margin-top:28px;display:inline-block;border:1px solid rgba(255,255,255,.34);
border-left:2px solid var(--rose);padding:12px 17px;max-width:400px;
background:rgba(20,24,14,.38)}
.hero-badge .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.92);font-weight:500;line-height:1.7}
.cs{min-height:100vh;display:grid;align-items:center}
.cs-logo{width:min(260px,64%);margin-bottom:30px}
.cs .ln2{display:block;color:var(--rose-p)}
.cs h1{margin-bottom:18px}
.banner .cs-fine{margin-top:38px;font-size:12px;letter-spacing:.1em;line-height:2;
font-weight:400;color:rgba(255,255,255,.58);text-transform:uppercase}
/* inner page banner */
.phero{min-height:clamp(300px,38vw,410px);display:grid;align-items:center}
.phero h1{margin-bottom:18px}
.phero .lead{max-width:660px}
.crumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
font-weight:600;margin-bottom:20px}
.crumb .sep{opacity:.5;margin:0 8px}
/* ---------------------------------------------------------------- trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--warm)}
.trust ul{display:grid;grid-template-columns:1fr 1fr;gap:0}
.trust li{padding:22px 18px;border-bottom:1px solid var(--line-s);
border-right:1px solid var(--line-s)}
.trust li:nth-child(2n){border-right:0}
.trust li:nth-last-child(-n+2){border-bottom:0}
.trust .k{display:block;font-family:var(--fd);font-size:23px;color:var(--olive-d);
line-height:1.15;margin-bottom:4px}
.trust .v{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--mute);font-weight:600}
/* ---------------------------------------------------------------- index rows */
.idx{border-top:1px solid var(--line)}
.idx-row{display:grid;gap:16px;padding:34px 0;border-bottom:1px solid var(--line);
transition:background .25s;position:relative}
.idx-row:hover{background:rgba(115,120,80,.045)}
.idx-n{font-family:var(--fd);font-size:19px;color:var(--rose);letter-spacing:.1em;
font-weight:500}
.idx-row h3{margin-bottom:12px}
.idx-body p{margin-bottom:16px}
.idx-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.idx-tags span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
color:var(--olive-d);border:1px solid var(--line);padding:6px 11px;font-weight:600}
/* ---------------------------------------------------------------- split blocks */
.split{display:grid;gap:40px;align-items:center}
.split-txt h2{margin-bottom:20px}
.blocklist{margin-top:26px}
.blocklist li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0;
border-bottom:1px solid var(--line-s);align-items:start}
.blocklist li:first-child{border-top:1px solid var(--line-s)}
.blocklist .bx{width:7px;height:7px;background:var(--rose);margin-top:9px}
.blocklist strong{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}
.blocklist .small{color:var(--body)}
.bg-dark .blocklist li,.bg-olive .blocklist li{border-color:var(--line-w)}
.bg-dark .blocklist strong,.bg-olive .blocklist strong{color:#fff}
/* ---------------------------------------------------------------- pillars */
.pillars{display:grid;gap:0;border-top:1px solid var(--line)}
.pillars li{padding:30px 0;border-bottom:1px solid var(--line)}
.pillars .pn{font-family:var(--fd);font-size:46px;line-height:1;color:var(--rose-l);
display:block;margin-bottom:14px}
.pillars h3{font-size:23px;margin-bottom:10px}
.bg-dark .pillars,.bg-dark .pillars li{border-color:var(--line-w)}
/* ---------------------------------------------------------------- steps */
.steps{display:grid;gap:0;counter-reset:s}
.step{padding:28px 0;border-top:1px solid var(--line);display:grid;
grid-template-columns:auto 1fr;gap:20px;align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step .sn{width:52px;height:52px;border:1px solid var(--line);display:grid;
place-content:center;font-family:var(--fd);font-size:22px;color:var(--olive-d)}
.step h3{font-size:22px;margin-bottom:8px}
.bg-dark .step,.bg-olive .step{border-color:var(--line-w)}
.bg-dark .step .sn,.bg-olive .step .sn{border-color:var(--line-w);color:#fff}
/* ---------------------------------------------------------------- feature ledger */
.fl{border-top:1px solid var(--line)}
.fl li{padding:24px 0;border-bottom:1px solid var(--line)}
.fl .fn{font-size:12px;letter-spacing:.18em;color:var(--rose);font-weight:600;
display:block;margin-bottom:9px}
.fl h3{font-size:21px;margin-bottom:8px}
.fl p{font-size:16px;line-height:1.6}
.bg-dark .fl,.bg-dark .fl li{border-color:var(--line-w)}
.bg-dark .fl p{color:rgba(255,255,255,.72)}
/* ---------------------------------------------------------------- audience band */
.aud{position:relative;color:#fff;overflow:hidden}
.aud .photo{position:absolute;inset:0}
.aud .photo img{filter:saturate(.86) brightness(.78)}
.aud .sh{position:absolute;inset:0;background:linear-gradient(180deg,
rgba(22,26,16,.86) 0%,rgba(22,26,16,.74) 40%,rgba(18,21,12,.8) 100%)}
.aud .wrap{position:relative;z-index:3}
.aud .lead{font-weight:300}
.aud h2{color:#fff;margin-bottom:16px;font-weight:500}
.aud-list{display:grid;gap:0;margin-top:32px;max-width:760px}
.aud-list li{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.2);
display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.aud-list li:first-child{border-top:1px solid rgba(255,255,255,.2)}
.aud-list .an{font-family:var(--fd);font-size:17px;color:var(--rose-l)}
.aud-list strong{color:#fff;font-weight:600}
.aud-list span.d{color:rgba(255,255,255,.76);font-size:15px;font-weight:300}
/* ---------------------------------------------------------------- quote band */
.qb{text-align:left}
.qb .q{font-family:var(--fd);font-size:clamp(28px,5.2vw,44px);line-height:1.14;
color:var(--olive-dd);font-weight:600;max-width:900px}
.qb .mk{color:var(--rose-l);font-weight:400}
.qb .attr{margin-top:26px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--mute);font-weight:600}
/* ---------------------------------------------------------------- CTA band */
.ctab{min-height:clamp(290px,32vw,380px);display:grid;align-items:center}
.ctab h2{margin-bottom:16px}
.ctab .wm{right:18px;bottom:26px;width:min(150px,20%);opacity:.12}
.cta-grid{display:grid;gap:30px;align-items:center}
/* ---------------------------------------------------------------- phone mockups */
.phones{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.phones.compact{gap:14px}
.phone{--ps:1;width:calc(236px*var(--ps));flex:0 0 auto;background:#20241a;
border-radius:calc(26px*var(--ps));padding:calc(9px*var(--ps));
box-shadow:0 30px 60px -28px rgba(20,24,14,.75)}
.phone.sm{--ps:.87}
.phone-scr{background:var(--paper);border-radius:calc(19px*var(--ps));overflow:hidden;
aspect-ratio:9/17;display:flex;flex-direction:column}
.ph-top{background:var(--olive-d);color:#fff;flex:0 0 auto;
padding:calc(16px*var(--ps)) calc(14px*var(--ps)) calc(13px*var(--ps))}
.ph-top .t{font-size:calc(10px*var(--ps));letter-spacing:.2em;text-transform:uppercase;
color:var(--rose-p);font-weight:600}
.ph-top .h{font-family:var(--fd);font-size:calc(20px*var(--ps));color:#fff;line-height:1.1;
margin-top:calc(5px*var(--ps))}
.ph-body{padding:calc(12px*var(--ps));display:grid;gap:calc(8px*var(--ps));
align-content:start;flex:1 1 auto}
.ph-card{background:#fff;border:1px solid var(--line-s);
padding:calc(9px*var(--ps)) calc(10px*var(--ps))}
.ph-card .l{font-size:calc(8.5px*var(--ps));letter-spacing:.14em;text-transform:uppercase;
color:var(--mute);font-weight:600}
.ph-card .v{font-family:var(--fd);font-size:calc(19px*var(--ps));color:var(--olive-dd);
line-height:1.1;margin-top:calc(2px*var(--ps))}
.ph-card .v.sm{font-size:calc(15px*var(--ps))}
.ph-card .v.rose{color:var(--rose)}
.ph-row{display:flex;justify-content:space-between;align-items:center;gap:calc(8px*var(--ps));
background:#fff;border:1px solid var(--line-s);
padding:calc(8px*var(--ps)) calc(10px*var(--ps));font-size:calc(10px*var(--ps))}
.ph-row .n{color:var(--ink);font-weight:600}
.ph-row .a{color:var(--olive-d);font-weight:600;font-family:var(--fd);
font-size:calc(14px*var(--ps))}
.ph-row .c{font-size:calc(8px*var(--ps));letter-spacing:.1em;text-transform:uppercase;
color:var(--rose);font-weight:600}
.ph-bar{height:calc(6px*var(--ps));background:var(--warm-2);position:relative;overflow:hidden;
margin-top:calc(8px*var(--ps))}
.ph-bar i{position:absolute;inset:0 auto 0 0;background:var(--olive-l);display:block}
.ph-cta{margin-top:auto;background:var(--rose);color:#fff;text-align:center;
padding:calc(11px*var(--ps));font-size:calc(10px*var(--ps));letter-spacing:.16em;
text-transform:uppercase;font-weight:600}
.ph-note{text-align:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--mute);font-weight:600;margin-top:20px;line-height:1.6}
.bg-dark .ph-note{color:rgba(255,255,255,.45)}
/* ---------------------------------------------------------------- price plate */
.price{background:#fff;border:1px solid var(--line);padding:34px 28px;position:relative}
.price .amt{font-family:var(--fd);font-size:62px;line-height:1;color:var(--olive-dd)}
.price .per{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
font-weight:600;margin-top:8px;display:block}
.price ul{margin-top:24px;border-top:1px solid var(--line-s)}
.price li{padding:11px 0;border-bottom:1px solid var(--line-s);font-size:15.5px;
display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
.price li .tick{color:var(--rose);font-size:13px;margin-top:4px}
/* ---------------------------------------------------------------- profile card */
.pcard{background:#fff;border:1px solid var(--line);overflow:hidden}
.portrait-slot{aspect-ratio:1/1;background:var(--warm-2);display:grid;place-content:center;
text-align:center;padding:22px;position:relative}
.portrait-slot::after{content:"";position:absolute;left:14px;top:14px;right:14px;bottom:14px;
border:1px dashed rgba(115,120,80,.36);pointer-events:none}
.portrait-slot img{width:96px;opacity:.4;margin:0 auto 12px}
.pcard-top{background:var(--olive-d);padding:20px 24px;position:relative}
.pcard-top .nm{font-family:var(--fd);font-size:25px;color:#fff;line-height:1.15;font-weight:500}
.pcard-top .rl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--rose-p);font-weight:600;margin-top:7px}
.pcard-body{padding:6px 24px 22px}
.pcard .creds li{padding:11px 0;border-bottom:1px solid var(--line-s);font-size:14.5px;
display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.pcard .creds li:last-child{border-bottom:0}
.pcard .creds .k{color:var(--mute);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;font-weight:600}
.pcard .creds .v{color:var(--olive-d);font-weight:600;
font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
/* ---------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;
justify-content:space-between;gap:20px;align-items:baseline;
font-family:var(--fd);font-size:clamp(19px,2.6vw,23px);color:var(--ink);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-family:var(--fb);font-size:20px;color:var(--rose);flex:0 0 auto;
transition:transform .25s;line-height:1}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 0 24px;max-width:820px}
/* ---------------------------------------------------------------- forms */
.form{display:grid;gap:18px}
.fgrid{display:grid;gap:18px}
.field label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
font-weight:600;color:var(--olive-d);margin-bottom:9px}
.field input,.field select,.field textarea{
width:100%;font-family:var(--fb);font-size:16px;color:var(--ink);background:#fff;
border:1px solid var(--line);border-radius:2px;padding:14px 15px;transition:.2s;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--olive);box-shadow:0 0 0 3px rgba(163,94,122,.13)}
.checks{display:grid;gap:11px}
.checks .check,.form .check{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
font-size:15.5px;cursor:pointer;font-weight:400;letter-spacing:0;text-transform:none;
color:var(--body);margin-bottom:0;line-height:1.5}
.checks .check span,.form .check span{display:block}
.check a{border-bottom:1px solid var(--rose-l)}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--olive-d)}
.form-note{font-size:13px;color:var(--mute);line-height:1.55}
/* contact rows */
.crow{border-top:1px solid var(--line)}
.crow li{padding:20px 0;border-bottom:1px solid var(--line)}
.crow .k{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
font-weight:600;display:block;margin-bottom:7px}
.crow .v{font-family:var(--fd);font-size:25px;color:var(--olive-dd);line-height:1.2;
word-break:break-word}
.crow a.v:hover{color:var(--rose)}
.crow .s{font-size:15px;color:var(--body)}
/* ---------------------------------------------------------------- footer */
.ftr{background:var(--olive-x);color:rgba(255,255,255,.66);position:relative;overflow:hidden;
font-size:15px}
.ftr .wm{position:absolute;right:20px;top:50%;transform:translateY(-50%);
width:min(240px,22%);opacity:.07;pointer-events:none;display:none}
.ftr .wrap{position:relative;z-index:2}
.ftr-top{padding:56px 0 42px;display:grid;gap:38px}
.ftr img.lg{width:230px;margin-bottom:20px}
.ftr h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-l);
font-family:var(--fb);font-weight:600;margin-bottom:16px}
.ftr li{margin-bottom:11px}
.ftr a:hover{color:#fff}
/* footer service list: 'monthly' vs 'quoted' at a glance */
.ftr .fnote{display:inline-block;margin-left:8px;font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--rose-l);opacity:.85;vertical-align:1px}
.ftr .strap{font-family:var(--fd);font-size:21px;color:rgba(255,255,255,.9);line-height:1.3;
max-width:330px}
.ftr-bot{border-top:1px solid var(--line-w);padding:22px 0 30px;display:grid;gap:12px;
font-size:13px;color:rgba(255,255,255,.5)}
.ftr-bot a{color:rgba(255,255,255,.72)}
.ftr-bot a:hover{color:var(--rose-l)}
.ftr-legal{display:flex;flex-wrap:wrap;gap:8px 18px}
/* ---------------------------------------------------------------- misc */
.note{background:var(--rose-w);border-left:3px solid var(--rose);padding:20px 22px;
font-size:15.5px;line-height:1.6}
.note strong{color:var(--olive-dd)}
.grid-2{display:grid;gap:26px}
.grid-3{display:grid;gap:26px}
.mt-s{margin-top:26px}.mt-m{margin-top:38px}.mt-l{margin-top:52px}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
html{scroll-behavior:auto}
}
/* ================================================================ 620px+ */
@media (min-width:620px){
:root{--pad:30px}
.trust ul{grid-template-columns:repeat(4,1fr)}
.trust li{border-bottom:0}
.trust li:last-child{border-right:0}
.fgrid.two{grid-template-columns:1fr 1fr}
.grid-2{grid-template-columns:1fr 1fr;gap:30px}
.idx-row{grid-template-columns:76px 1fr;gap:24px}
.pillars{grid-template-columns:1fr 1fr;gap:0 40px}
.ftr-top{grid-template-columns:1fr 1fr;gap:38px 34px}
.ftr-bot{grid-template-columns:1fr auto;align-items:center}
.phone{width:250px;flex-basis:250px}
}
/* ================================================================ 900px+ */
@media (min-width:900px){
body{font-size:17.5px}
.banner .wrap{padding-top:82px;padding-bottom:82px}
.banner .frame{left:26px;top:26px;right:26px;bottom:26px}
/* wider screens: weight the grade to the left so the photo reads on the right */
.banner .grade{background:
linear-gradient(96deg,rgba(20,24,14,.9) 0%,rgba(20,24,14,.76) 34%,
rgba(20,24,14,.44) 66%,rgba(20,24,14,.3) 100%),
linear-gradient(180deg,rgba(20,24,14,.5) 0%,rgba(20,24,14,0) 30%,
rgba(18,21,12,.4) 100%)}
.banner .inner{max-width:620px}
.aud .sh{background:
linear-gradient(98deg,rgba(20,24,14,.9) 0%,rgba(20,24,14,.78) 40%,
rgba(20,24,14,.36) 72%,rgba(20,24,14,.2) 100%),
linear-gradient(180deg,rgba(20,24,14,.34) 0%,rgba(20,24,14,0) 34%)}
.ftr .wm{display:block}
.hero .inner{max-width:700px}
.hero-badge{left:-22px;bottom:44px}
.phones.compact{flex-wrap:nowrap}
.phones.compact .phone{--ps:.72}
.phones.compact .phone.sm{--ps:.62}
.sec{padding:96px 0}
.sec-l{padding:120px 0}
.sec-s{padding:64px 0}
.hero{padding:70px 0 0}
.hero-grid{grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
.split{grid-template-columns:1fr 1fr;gap:56px}
.split.top{align-items:start}
.split.wide-l{grid-template-columns:1.18fr .82fr}
.split.wide-r{grid-template-columns:.82fr 1.18fr}
.split.rev .split-img{order:2}
.idx-row{grid-template-columns:92px 1fr 200px;gap:32px;align-items:start;padding:40px 0}
.idx-cta{justify-self:end;padding-top:4px}
.grid-3{grid-template-columns:repeat(3,1fr);gap:34px}
.steps.h3{grid-template-columns:repeat(3,1fr);gap:0 34px}
.steps.h3 .step{border-bottom:1px solid var(--line)}
.steps.h4{grid-template-columns:repeat(4,1fr);gap:0 26px}
.steps.h4 .step{border-bottom:1px solid var(--line);grid-template-columns:1fr;gap:16px}
.cta-grid{grid-template-columns:1.2fr .8fr;gap:52px;align-items:center}
.ctab .btns{justify-content:flex-end}
.ftr-top{grid-template-columns:1.45fr .85fr .85fr 1fr;gap:40px}
.pcard-top{padding:40px 30px}
}
/* ================================================================ 1040px+ */
@media (min-width:1040px){
.nav{display:flex;align-items:center;gap:34px}
.hdr-cta{display:inline-flex}
.burger{display:none}
.mnav{display:none !important}
.hdr>.wrap{min-height:88px}
.brand img{height:52px}
.pillars{grid-template-columns:repeat(4,1fr);gap:0 34px}
.pillars li{border-top:0}
}
/* one-line pointer from one service page to the other */
.xlink{display:flex;align-items:center;justify-content:space-between;gap:44px}
.xlink p{margin:11px 0 0;max-width:680px;font-size:16px;line-height:1.62;color:rgba(255,255,255,.80)}
.xlink p b{color:#fff;font-weight:600}
.xlink .btn{flex:none}
@media(max-width:900px){.xlink{flex-direction:column;align-items:flex-start;gap:24px}}
/* 'quoted' flag on the secondary home-page service row */
.idx-flag{display:inline-block;margin-left:11px;padding:3px 9px;border:1px solid var(--line);
border-radius:2px;font-family:var(--fb);font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;font-weight:700;color:var(--olive);vertical-align:4px}
/* ---------------------------------------------------------------- three service tiers
Karen, 29 Aug: "it needs to be 1000% clear that the R199 is only for the app."
So price is not a footnote here - every tier carries its own price line in the same
slot, at the same size, and the two practitioner tiers say QUOTED SEPARATELY in full.
You cannot read one of these cards without reading what it costs. */
.tiers{display:grid;gap:16px}
.tier{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
padding:26px 24px 24px}
.tier.is-lead{background:var(--olive-dd);border-color:var(--olive-dd)}
.tier .tg{display:inline-block;align-self:flex-start;padding:4px 10px;border-radius:2px;
font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
border:1px solid var(--line);color:var(--olive)}
.tier.is-lead .tg{border-color:rgba(255,255,255,.34);color:var(--rose-p)}
.tier .tq{margin:18px 0 0;font-family:var(--fd);font-size:26px;line-height:1.2;
color:var(--ink);font-weight:600}
.tier.is-lead .tq{color:#fff}
.tier h3{margin:10px 0 0;font-family:var(--fb);font-size:12px;letter-spacing:.16em;
text-transform:uppercase;font-weight:700;color:var(--mute)}
.tier.is-lead h3{color:rgba(255,255,255,.62)}
.tier p{flex:1;margin:13px 0 0;font-size:15.5px;line-height:1.6;color:var(--body)}
.tier.is-lead p{color:rgba(255,255,255,.78)}
.tier .pz{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-s)}
.tier.is-lead .pz{border-top-color:var(--line-w)}
.tier .pz b{display:block;font-family:var(--fd);font-size:38px;line-height:1;
font-weight:600;color:var(--olive-d);font-variant-numeric:lining-nums;
font-feature-settings:'lnum' 1}
.tier.is-lead .pz b{color:#fff}
.tier .pz span{display:block;margin-top:7px;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;font-weight:700;color:var(--rose)}
.tier.is-lead .pz span{color:var(--rose-p)}
.tier .tl{margin-top:20px;font-size:14.5px;font-weight:600;color:var(--olive-d);
border-bottom:1px solid var(--line);padding-bottom:3px;align-self:flex-start}
.tier.is-lead .tl{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.tier .tl span{margin-left:7px}
@media(min-width:880px){.tiers{grid-template-columns:repeat(3,1fr);gap:20px}}
/* the one line that has to survive skim-reading */
.pricenote{margin-top:26px;background:var(--rose-w);border-left:3px solid var(--rose);
padding:18px 22px;font-size:15.5px;line-height:1.62}
.pricenote b{color:var(--olive-dd);font-weight:700}
/* Karen's credentials, moved off the topbar and down into her own section */
.creds-line{margin-top:22px;padding:18px 0 0;border-top:1px solid var(--line);
font-size:15.5px;line-height:1.66}
.creds-line strong{color:var(--olive-dd);font-weight:700}
/* ---------------------------------------------------------------- legal documents
Karen's Terms and Refund Policy are clause lists with nested bullets, not the
heading+paragraph stubs the site started with. */
.legal-date{margin:0 0 18px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
font-weight:700;color:var(--mute)}
.legal-list{margin:12px 0 0;padding:0;list-style:none}
.legal-list li{position:relative;padding:9px 0 9px 22px;font-size:16px;line-height:1.66}
.legal-list li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;
background:var(--rose-l)}
.legal-list li b{color:var(--olive-dd);font-weight:600}
.wrap-n a[href]{border-bottom:1px solid var(--rose-l)}
/* portrait slot once a real photograph lands in it */
.portrait-slot.has-photo{padding:0;background:none}
.portrait-slot.has-photo img{width:100%;height:100%;object-fit:cover;opacity:1;margin:0;
display:block}
/* the dashed inset was the empty-slot placeholder frame; over a real photograph it
reads as an artefact, so it goes */
.portrait-slot.has-photo::after{display:none}
/* home service card badges - price on 01, quote on 02 */
.idx-flag.on{border-color:var(--olive-d);color:#fff;background:var(--olive-d)}
/* trust strip now carries three badges, not four */
@media(min-width:760px){
.trust ul{grid-template-columns:repeat(3,1fr)}
.trust li:nth-child(2n){border-right:1px solid var(--line-s)}
.trust li:nth-child(3n),.trust li:last-child{border-right:0}
.trust li{border-bottom:0}
}
/* "choose the path that fits your workflow" */
.paths{margin-bottom:40px;background:#fff;border:1px solid var(--line);padding:26px 26px 10px}
.paths-h{margin:0 0 6px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
font-weight:700;color:var(--rose)}
.paths ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
.paths li{padding:16px 0;border-bottom:1px solid var(--line-s)}
.paths li:last-child{border-bottom:0}
.paths b{display:block;font-family:var(--fd);font-size:22px;font-weight:600;color:var(--ink);
line-height:1.2}
.paths b i{display:inline-block;margin-left:10px;padding:3px 9px;font-family:var(--fb);
font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;color:var(--olive-d);border:1px solid var(--line);vertical-align:4px;
font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.paths span{display:block;margin-top:5px;font-size:15.5px;line-height:1.6;color:var(--body)}
@media(min-width:880px){
.paths ul{grid-template-columns:repeat(3,1fr);gap:0 30px}
.paths li{border-bottom:0}
}
/* ---------------------------------------------------------------- app-first hero
The home page leads with the product now, so the hero carries a phone beside the
headline instead of being a caption over a photograph. */
.hero-grid{display:grid;gap:34px}
.hero-app{min-height:clamp(560px,88vh,780px);align-items:center;padding:56px 0}
/* the phone stays on mobile - this is an app-led page and most traffic is a phone,
so hiding the product on a phone would be the wrong way round. It just moves under
the copy and loses the desktop scale-up. */
.hero-phone{margin-top:34px}
.hero-phone .phone{margin:0 auto;filter:drop-shadow(0 40px 60px rgba(10,12,6,.55))}
.hero-phone .ph-note{display:none}
@media(min-width:940px){
/* .hero .inner is capped at 700px for a caption-style hero; the app hero is a
two-column layout and needs the full wrap or the buttons wrap and the phone
crowds the copy */
.hero-app .inner{max-width:none}
.hero-grid{grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
.hero-app .hero-sub{max-width:520px}
.hero-phone{margin-top:0}
.hero-phone .phone{transform:scale(1.06)}
}
/* how it works - the four steps, in her order */
.hiw{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:none;
border-top:1px solid var(--line)}
.hiw li{position:relative;padding:28px 0 26px;border-bottom:1px solid var(--line)}
.hiw .hn{display:block;font-family:var(--fd);font-size:40px;line-height:1;color:var(--rose-l);
font-weight:600;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.hiw h3{margin:10px 0 8px;font-size:23px}
.hiw p{font-size:16px;line-height:1.66;color:var(--body)}
.hiw em{font-style:italic;color:var(--olive-d)}
@media(min-width:900px){
.hiw{grid-template-columns:repeat(4,1fr);gap:0 34px}
.hiw li{border-bottom:0}
}
/* the error slot under a quote form - rose, because it needs to be noticed, and it
always offers a phone number so a broken form is never a dead end */
.form-err{border-left:2px solid var(--rose);background:var(--rose-w);color:var(--ink)}
.form-err a{border-bottom:1px solid var(--rose-l)}
.form button[type="submit"][disabled]{opacity:.55;cursor:progress}
/* the site map reuses .idx, whose third column was never given a style */
.idx-side{align-self:center}
.idx-side .tl{white-space:nowrap}
@media(max-width:1039px){.idx-side{display:none}}
/* Google permits hiding the reCAPTCHA badge only when this notice is shown instead */
/* THE horizontal-scroll culprit on mobile. Google ships the badge as
position:fixed; width:256px; right:-186px so it can slide in on hover - 186px of it
hangs off the right edge. visibility:hidden keeps that box, and on iOS a fixed
element overhanging the viewport makes the whole page pannable sideways.
display:none is permitted because the notice Google's terms require is printed under
the submit button instead. */
.grecaptcha-badge{display:none!important}
.recaptcha-note{color:var(--mute)}
.recaptcha-note a{border-bottom:1px solid var(--line)}