/* Theme F — "Clean" (after the Bo the OT site Karl likes)
   Idea: calm and easy to read. Solid navy header + hero with a wave edge, Karl in a soft blob over the Mount,
   centred headings, soft white cards with no borders, numbered lists, a navy quote band and a gold call-to-action. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{--f:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;--paper:#ffffff;--cream:#f4f5f8;--ink:#14132b;--body:#55546e;
 --line:#e6e8ee;--deep:#0b0a24;--tint:#d9d6f5;--soft:0 10px 30px rgba(17,15,49,.07);--r:22px}
body{background:var(--paper);font:400 17px/1.7 var(--f);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--f);letter-spacing:-.02em}
.h2{font-size:clamp(32px,3.8vw,48px);font-weight:700;line-height:1.08}
.lead{font-size:18px;color:var(--body)}
.eyebrow{font:700 12.5px/1 var(--f);letter-spacing:.16em;color:#9a7400}
section{padding-block:clamp(80px,9vw,112px)}
.alt{background:linear-gradient(var(--paper),var(--cream) 18%,var(--cream) 82%,var(--paper))}

/* centred section heads, like the reference */
.wrap>.eyebrow,.wrap>.h2,.wrap>.lead{text-align:center;margin-inline:auto}
.wrap>.h2{max-width:22ch}
.wrap>.lead{max-width:60ch}
.cmp-head,.bay-head{grid-template-columns:1fr;gap:0;text-align:center;justify-items:center}
.cmp-head .h2,.bay-head .h2{max-width:22ch;margin-inline:auto}
.cmp-head .lead,.bay-head .lead{margin:16px auto 0!important;max-width:60ch}

/* buttons: pills */
.btn{border-radius:999px;min-height:52px;padding:0 28px;font:600 16px/1 var(--f);transition:transform .15s,box-shadow .15s,background .15s}
.btn.gold:hover{box-shadow:0 10px 24px -10px rgba(255,199,0,.8)}
.btn.outline{border:2px solid rgba(255,255,255,.85)}
.btn.outline:hover{background:rgba(255,255,255,.08)}
.btn.outline-d{border:2px solid var(--navy);background:transparent}
.btn.outline-d:hover{background:var(--navy);color:#fff}
.btn.navy:hover{box-shadow:0 10px 24px -10px rgba(17,15,49,.6)}

/* header: navy, sticky */
.top{background:var(--deep);position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(255,255,255,.06)}
body{overflow-x:clip}
.logo .name b{color:#fff}.logo .name i{color:#b9b7da}
.menu ul{font-weight:500;font-size:15px}
.menu ul a{color:#e4e2f7}.menu ul a:hover,.menu ul a[aria-current="page"]{color:var(--gold)}
.phone{color:#b9b7da}
.menu .btn.navy{background:var(--gold);color:var(--navy);min-height:44px;padding:0 22px;font-size:15px}
.burger{background:transparent;border-color:rgba(255,255,255,.25)}
.burger i,.burger i::before,.burger i::after{background:#fff}
@media(max-width:1000px){
 .top.open .menu ul{background:var(--deep);border-top:1px solid rgba(255,255,255,.08)}
 .top.open .menu ul a{border-bottom-color:rgba(255,255,255,.08);color:#fff}
 .top.open .burger i{background:transparent}
}

/* home hero: navy gradient, Karl in a soft blob over the Mount, wave edge */
.hero{clip-path:none;background:var(--deep);overflow:hidden}
.hero .bg{display:none}
.hero::before{content:none}
.hero::after,section.phero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:64px;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40c240-40 480-40 720-8s480 32 720-8v40H0z' fill='%23fffdf8'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.hero .wrap{grid-template-columns:1.1fr .9fr;align-items:center;padding-block:72px 120px;gap:56px;isolation:isolate}
.hero .copy{padding-bottom:0;gap:26px}
/* Karl stands in front of a framed photo of the Mount, his head breaking out of the frame; a gold sun sits behind (from the logo) */
.hero .pic{order:2;position:relative;justify-self:end;width:100%;max-width:400px;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:url(../img/places/mount.webp) 30% 40%/cover}
.hero .pic::before{content:none}
.hero .pic::after{content:none}
.hero .pic img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:90%;width:auto;max-width:none;max-height:none;margin:0;filter:none;z-index:1}
.hero .place{color:#cfcdee;font-size:12.5px;letter-spacing:.16em}
.hero .place svg{display:none}
.hero h1{font-size:clamp(34px,4vw,52px);font-weight:700;line-height:1.12;letter-spacing:-.022em;max-width:17ch}
.hero h1 span,.phero h1 span{color:#cfcdf3}
.hero p{color:#dddbf3;font-size:clamp(17px,1.4vw,19px);line-height:1.7}
.trust{display:none}
.trust li{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 15px}
.trust svg{display:none}
.credit{bottom:70px;z-index:2}
@media(max-width:900px){
 .hero .wrap{grid-template-columns:1fr;padding-block:56px 110px;gap:36px}
 .hero .copy{order:0}
 .hero .pic{order:1;justify-self:center;max-width:320px}
}

/* inner page hero */
section.phero{clip-path:none;background:radial-gradient(800px 500px at 85% 0%,#25216a 0%,transparent 60%),linear-gradient(160deg,#16134a,var(--deep) 70%);padding:clamp(80px,9vw,116px) 0 clamp(110px,11vw,140px)}
.phero .bg{opacity:.22}
.phero .bg::after{background:linear-gradient(90deg,var(--deep) 10%,rgba(11,10,36,.4))}
.phero h1{font-size:clamp(32px,3.8vw,48px);font-weight:700;line-height:1.12;letter-spacing:-.022em}
.phero p.lede{color:#dddbf3}
.crumbs{color:#b9b7da;font-weight:500}
@media(max-width:900px){.phero .bg::after{background:rgba(11,10,36,.6)}}

/* soft cards, no borders */
.svc,.role,.card,.post,.plan,.steps li,.promises li,.faq details,.form,.ct-box,.cb-demo{border:0;border-radius:var(--r);background:#fff;box-shadow:var(--soft)}
.svc-row,.roles,.cards,.posts,.plans{gap:24px}
.svc .img,.post .img{border-radius:var(--r) var(--r) 0 0}
.svc h3,.role h3,.card h3,.post h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.svc .more,.card .more,.post .more{color:#9a7400;font-weight:600}
.role,.card{padding:26px}
.role .ic,.card .ic{background:var(--cream);border-radius:50%}
.role .gain,.card .gain{border-top:1px solid var(--line)}
.post .meta{color:#9a7400}
a.svc:hover,a.card:hover,a.post:hover,.role:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,15,49,.1)}

/* photos: soft and rounded */
.split figure,.jobs-head figure{border-radius:26px}
.jobs-head figure{border-radius:26px}
.place-card{border-radius:26px}
.prose figure{border-radius:20px}
.ticks li::before{background-color:var(--cream)}

/* before / after (clip-path, --pos and --h untouched) */
.cmp{border:0;border-radius:26px;box-shadow:0 24px 60px -30px rgba(17,15,49,.3)}
.w{border:0;border-radius:16px;box-shadow:0 2px 8px rgba(17,15,49,.05)}
.w .num{font-weight:700;letter-spacing:-.03em}
.tagl{border-radius:999px}
.handle span{background:var(--gold);color:var(--navy)}

/* numbered steps: a simple vertical list */
.steps{grid-template-columns:1fr;max-width:680px;margin-inline:auto;gap:14px}
.steps li{grid-template-columns:52px 1fr;column-gap:20px;row-gap:2px;padding:22px 26px;align-items:start}
.steps li::before{content:counter(s);grid-row:span 2;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
 font:700 20px/1 var(--f);letter-spacing:0;text-transform:none}
.steps b{font-size:19px;align-self:end}
#how .wrap>p:last-child{text-align:center}

/* safety promises */
.safe{gap:64px}
.shield{border-radius:50%}
.promises li{padding:22px 24px}
.promises .n{background:var(--navy);color:#fff}

/* quote: a full navy band */
section:has(>.wrap.quote){background:radial-gradient(700px 400px at 15% 0%,#25216a,transparent 60%),var(--deep);color:#fff}
.quote .eyebrow{color:var(--gold)}
.quote blockquote{color:#fff;font-size:clamp(22px,2.8vw,34px);font-weight:600;line-height:1.35;letter-spacing:-.015em}
.quote p{color:#c9c7e6}.quote p strong{color:#fff}
.quote .btn.outline-d{border-color:#fff;color:#fff}
.quote .btn.outline-d:hover{background:#fff;color:var(--navy)}

/* FAQ */
.faq{margin-inline:auto}
.faq details{padding:0 26px}
.faq summary{font-size:17.5px;font-weight:600}
.faq summary::after{color:var(--navy)}

/* plans */
.plan{padding:32px}
.plan.pick{box-shadow:0 0 0 2px var(--navy),0 24px 50px -24px rgba(17,15,49,.35)}
.plan .badge{border-radius:999px}
.plan .price{font-weight:700;letter-spacing:-.03em}

/* blog */
.prose{font-size:18px}
.prose h2{font-weight:700;letter-spacing:-.02em}
.prose blockquote{border-left-color:var(--gold);font-weight:600}
.prose .box{background:var(--cream);border-radius:18px}
.byline{color:#dddbf3}

/* form */
.form input,.form select,.form textarea{border:1.5px solid var(--line);border-radius:12px;background:var(--paper)}
.facts div{border-top:0;background:#fff;border-radius:18px;padding:20px;box-shadow:var(--soft)}
.facts b{font-weight:700}
.todo-note{border-radius:14px}

/* call to action: a warm gold band with a rounded top, then a navy footer */
.cta{background:var(--gold);color:var(--navy);border-radius:48px 48px 0 0;padding-block:clamp(72px,8vw,96px) 0;margin-top:40px}
.cta h2{color:var(--navy);font-size:clamp(32px,4vw,48px);font-weight:700;letter-spacing:-.02em}
.cta p{color:#3b3720}
.cta .btn.gold{background:var(--navy);color:#fff}
.cta .btn.gold:hover{box-shadow:0 10px 24px -10px rgba(17,15,49,.6)}
.cta .btn.outline{border-color:var(--navy);color:var(--navy)}
.cta .btn.outline:hover{background:rgba(17,15,49,.06)}
.cta .wave{color:var(--deep);margin-top:64px}
.cta[aria-hidden]{display:none}
footer{background:var(--deep);color:#b9b7da;padding-top:20px}
.foot h4{color:#fff;font-weight:600;letter-spacing:.02em}
.foot a:hover{color:var(--gold)}
.foot .call,.foot .call a{color:#fff}
.small{color:#8e8cb3}
.small a{color:#b9b7da}

/* gentle reveal */
@media(prefers-reduced-motion:no-preference){
 .rv-on .rv{opacity:0;translate:0 20px;transition:opacity .7s ease var(--d,0s),translate .7s ease var(--d,0s),transform .2s,box-shadow .2s}
 .rv-on .rv.in{opacity:1;translate:none}
}
@media(max-width:600px){.cta{border-radius:32px 32px 0 0}.steps li{grid-template-columns:44px 1fr;padding:18px}.steps li::before{width:44px;height:44px;font-size:18px}}

/* ---------- brand shapes: little line drawings scattered at the edges, some sitting on photo corners ---------- */
:root{--s-sun:url(../img/shapes/sun.svg);--s-mount:url(../img/shapes/mount.svg);--s-waves:url(../img/shapes/waves.svg);
 --s-spark:url(../img/shapes/spark.svg);--s-chat:url(../img/shapes/chat.svg);--s-arrow:url(../img/shapes/arrow.svg)}
main>section:not(.hero):not(.phero):not(.cta){position:relative}
main>section:not(.hero):not(.phero):not(.cta)>.wrap{position:relative;z-index:1}
main>section:not(.hero):not(.phero):not(.cta)::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:var(--s-sun) 6% 34px/28px no-repeat,var(--s-waves) 14% calc(100% - 30px)/26px no-repeat,var(--s-spark) 93% 46px/26px no-repeat,var(--s-chat) 84% calc(100% - 38px)/26px no-repeat}
/* shapes only ever sit in the empty top and bottom padding of a section, so they never cover text */
main>section:nth-of-type(3n+1)::before{background:var(--s-mount) 92% 30px/28px no-repeat,var(--s-spark) 5% calc(100% - 34px)/24px no-repeat,var(--s-waves) 78% calc(100% - 28px)/26px no-repeat,var(--s-sun) 12% 48px/22px no-repeat}
main>section:nth-of-type(3n+2)::before{background:var(--s-arrow) 9% 40px/24px no-repeat,var(--s-sun) 95% calc(100% - 32px)/28px no-repeat,var(--s-mount) 22% calc(100% - 40px)/26px no-repeat,var(--s-chat) 86% 30px/24px no-repeat}
/* the navy quote band gets them too, a touch softer */
section:has(>.wrap.quote)::before{opacity:.8}

/* shapes on photo corners */
.split figure,.jobs-head figure{overflow:visible}
.split figure img,.jobs-head figure img{border-radius:inherit}
.split figure.ph{overflow:hidden}
.split figure:not(.ph)::after,.jobs-head figure::after,.hero .pic::after{content:"";position:absolute;width:34px;height:34px;top:-15px;right:-15px;background:var(--s-spark) center/contain no-repeat;pointer-events:none}
.split figure:not(.ph)::before,.jobs-head figure::before,.hero .pic::before{content:"";position:absolute;width:38px;height:38px;bottom:-16px;left:-16px;background:var(--s-waves) center/contain no-repeat;pointer-events:none;z-index:2}
.jobs-head figure::after{background-image:var(--s-sun);right:auto;left:-15px}
.jobs-head figure::before{background-image:var(--s-mount);left:auto;right:-16px}
.split.flip figure:not(.ph)::after{background-image:var(--s-chat)}
.hero .pic{overflow:visible}
.hero .pic::after{top:-18px;right:auto;left:-18px;width:36px;height:36px;z-index:2}
.hero .pic::before{left:auto;right:-18px;bottom:-18px;filter:brightness(1.3)}
.hero .pic img{border-radius:0 0 24px 24px}

@media(prefers-reduced-motion:no-preference){
 main>section::before,.split figure::after,.jobs-head figure::after,.hero .pic::after{animation:bop-float 9s ease-in-out infinite}
 main>section:nth-of-type(even)::before,.split figure::before,.jobs-head figure::before,.hero .pic::before{animation:bop-float 11s ease-in-out infinite reverse}
}
@keyframes bop-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* phones: keep shapes to the very edges, fewer and smaller, never over text */
@media(max-width:760px){
 main>section:not(.hero):not(.phero):not(.cta)::before,main>section:nth-of-type(n)::before{background:var(--s-spark) calc(100% - 14px) 22px/20px no-repeat,var(--s-sun) 14px calc(100% - 22px)/20px no-repeat}
 .split figure:not(.ph)::after,.jobs-head figure::after,.hero .pic::after{width:26px;height:26px;top:-11px}
 .split figure:not(.ph)::before,.jobs-head figure::before,.hero .pic::before{width:28px;height:28px;bottom:-12px}
 .hero .pic::after{left:-8px}.hero .pic::before{right:-8px}
}

/* hero v3: no portrait up front (reads less like a one-man band) — the Mount fills the background, faded into navy */
.hero .bg{display:block;background:url(../img/places/mount.webp) 60% 40%/cover no-repeat;opacity:.55}
.hero .bg::after{background:linear-gradient(90deg,var(--deep) 0%,rgba(11,10,36,.92) 35%,rgba(11,10,36,.55) 70%,rgba(11,10,36,.35) 100%),linear-gradient(0deg,var(--deep) 0%,rgba(11,10,36,0) 40%)}
.hero .pic{display:none}
.hero .wrap{grid-template-columns:1fr;min-height:min(640px,78vh);align-content:center;padding-block:90px 140px}
.hero .copy{max-width:640px}
@media(max-width:900px){.hero .bg{background-position:65% 40%;opacity:.45}.hero .bg::after{background:linear-gradient(180deg,rgba(11,10,36,.85),rgba(11,10,36,.75) 60%,var(--deep))}.hero .wrap{min-height:0;padding-block:64px 120px}}

/* fewer shapes (Karl: "way too many"): none in most sections — only the quote band and "how it works", plus one per photo */
main>section:not(.hero):not(.phero):not(.cta)::before,main>section:nth-of-type(n)::before{background:none}
/* Karl: still too much — no shapes on the quote band or "how it works" either */
section:has(>.wrap.quote)::before{background:none!important}
#how::before{background:none!important}
.split figure:not(.ph)::before,.jobs-head figure::before,.hero .pic::before{content:none}
/* shapes stay still (Karl: "very floaty") */
main>section::before,main>section:nth-of-type(n)::before,.split figure::after,.jobs-head figure::after,.split figure::before,.jobs-head figure::before{animation:none!important;translate:none}
/* CTA tucks onto the section above: no white strip, rounded corners sit on the colour behind */
.cta{margin-top:-48px;position:relative;z-index:1}
section:has(>.wrap.quote){padding-bottom:calc(clamp(80px,9vw,112px) + 48px)}
.cta h2{line-height:1.1}
.cta[aria-hidden]{margin-top:0}
/* CTA: no rounded corners — a soft gold wave rises out of the section above (matches the hero curve) */
.cta{border-radius:0;margin-top:0}
.cta::before,main>section.cta::before{content:"";position:absolute;left:0;right:0;top:-63px;height:64px;pointer-events:none;z-index:2;animation:none!important;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 24c240 40 480 40 720 8s480-32 720 8v32H0z' fill='%23ffc700'/%3E%3C/svg%3E") bottom/100% 100% no-repeat!important}
section:has(>.wrap.quote){padding-bottom:clamp(80px,9vw,112px)}