/* Leovolution site: shared styles. Palette from the Leovolution brand pack. */
:root{
  --navy:#06243C; --navy-2:#0C3150; --navy-3:#123F66;
  --gold:#C89143; --gold-light:#E9BD70; --gold-deep:#996124;
  --cream:#FFF3D1; --cream-2:#FBE8B8; --paper:#FFF9E8; --white:#fff;
  --ink:#06243C; --muted:#3F566A; --muted-dark:#C7D2DC;
  --head:'Bricolage Grotesque',system-ui,sans-serif; --body:'Figtree',system-ui,sans-serif;
  --radius:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 18px/1.7 var(--body);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--head);line-height:1.12;letter-spacing:-.012em;color:var(--navy)}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700}
h3{font-size:1.25rem;font-weight:600;line-height:1.2}
p+p{margin-top:1em}
.lead{font-size:1.15rem;color:var(--muted);max-width:33em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:12px;background:var(--gold);clip-path:polygon(0 100%,45% 0,100% 100%)}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:var(--cream);padding:10px 16px;z-index:100}
.skip:focus{left:8px}

/* hand-drawn underline on key words */
.mark{position:relative;white-space:nowrap;font-style:normal;color:var(--navy)}
.mark::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C40 3 70 12 105 6S170 4 197 8' fill='none' stroke='%23C89143' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;z-index:-1}
.on-dark .mark,.dark .mark{color:var(--cream)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem var(--body);padding:15px 26px;text-decoration:none;border:2px solid var(--navy);background:var(--navy);color:var(--cream);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);padding-right:36px;transition:background .15s,transform .15s}
.btn:hover{background:var(--gold-deep);border-color:var(--gold-deep);transform:translateX(3px)}
.btn.line{background:transparent;color:var(--navy);clip-path:none;padding-right:26px}
.btn.line:hover{background:var(--navy);color:var(--cream)}
.dark .btn,.on-dark .btn{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.dark .btn:hover{background:var(--gold-light);border-color:var(--gold-light)}
.dark .btn.line{background:transparent;color:var(--cream);border-color:var(--cream)}
.dark .btn.line:hover{background:var(--cream);color:var(--navy)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px}
.link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--gold)}
.link:hover{color:var(--gold-deep)}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,243,209,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(6,36,60,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px}
.nav .logo img{height:34px;width:auto}
.nav ul{display:flex;gap:26px;list-style:none;font-weight:600;font-size:.97rem}
.nav ul a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav ul a:hover{border-color:var(--gold)}
.nav ul a[aria-current="page"]{border-color:var(--gold-deep);color:var(--navy)}
.nav .btn{padding:10px 24px 10px 18px;font-size:.93rem}
.menu-btn{display:none;background:none;border:2px solid var(--navy);color:var(--navy);font:700 .9rem var(--body);padding:8px 14px}
@media(max-width:940px){
  .menu-btn{display:block}
  .nav .btn{display:none}
  .nav ul{display:none;position:absolute;top:74px;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;padding:8px 20px 20px;border-bottom:1px solid rgba(6,36,60,.15)}
  .nav ul.open{display:flex}
  .nav ul a{display:block;padding:14px 0;border-bottom:1px solid rgba(6,36,60,.1);font-size:1.1rem}
}

/* hero with faceted backdrop */
.hero{position:relative;padding:84px 0 104px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:url(facets-hero.svg) center/cover no-repeat;opacity:.4;z-index:-1}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{margin:6px 0 24px}
.hero .lead{margin-bottom:32px}
.hero .note{margin-top:20px;font-size:.95rem;color:var(--muted)}
.hero-art{position:relative}
.hero-art img{width:100%;max-width:440px;margin-inline:auto;height:auto;filter:drop-shadow(0 14px 18px rgba(6,36,60,.16))}
.stamp{position:absolute;right:0;top:-10px;width:128px;height:128px;transform:rotate(12deg)}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-art{max-width:460px;margin-inline:auto}.stamp{width:100px;height:100px;right:-4px}}
.page-hero{position:relative;padding:84px 0 100px;overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;inset:0;background:url(facets-hero.svg) right center/cover no-repeat;opacity:.3;z-index:-1}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem);max-width:15em;margin-bottom:22px}

/* ridge dividers */
.ridge{display:block;width:100%;height:clamp(60px,9vw,120px);margin-bottom:-1px;background:none}
.ridge.up{margin-top:-1px;margin-bottom:0}

section{padding:104px 0}
.intro{max-width:44rem;margin-bottom:52px}
.intro p{margin-top:16px;color:var(--muted);font-size:1.12rem}
.dark{background:var(--navy);color:var(--cream);position:relative;isolation:isolate;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;background:url(facets-dark.svg) center/cover no-repeat;opacity:.55;z-index:-1}
.dark h2,.dark h3{color:var(--cream)}
.dark .eyebrow{color:var(--gold-light)}
.dark .eyebrow::before{background:var(--gold-light)}
.dark .intro p,.dark p{color:var(--muted-dark)}
.paper{background:var(--paper)}

/* "ledger" rows: used instead of identical cards */
.ledger{border-top:2px solid var(--navy)}
.row{display:grid;grid-template-columns:70px 1.2fr 1.4fr auto;gap:28px;align-items:start;padding:34px 0;border-bottom:1px solid rgba(6,36,60,.25)}
.row .n{font:600 2.4rem/1 var(--head);color:var(--gold)}
.row h3{font-size:1.45rem}
.row .tag{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.row p{color:var(--muted);font-size:1.02rem}
.row .price{text-align:right;font:800 1.5rem var(--head);color:var(--navy);white-space:nowrap}
.row .price small{display:block;font:500 .88rem var(--body);color:var(--muted);white-space:normal}
.row ul{list-style:none;margin-top:12px;display:grid;gap:6px;font-size:.98rem;color:var(--muted)}
.row li{padding-left:22px;position:relative}
.row li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;background:var(--gold);transform:rotate(45deg)}
.dark .ledger{border-color:var(--cream)}
.dark .row{border-color:rgba(255,243,209,.25)}
.dark .row p,.dark .row li{color:var(--muted-dark)}
.dark .row .price{color:var(--cream)}
.dark .row .price small{color:var(--muted-dark)}
@media(max-width:860px){.row{grid-template-columns:48px 1fr;gap:12px 16px}.row .n{font-size:2.2rem}.row>div:nth-child(3),.row .price{grid-column:2}.row .price{text-align:left}}

/* the trail: method as a winding path */
.trail{position:relative;display:grid;gap:36px;padding:10px 0}
.trail::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:0;border-left:3px dashed var(--gold);transform:translateX(-1.5px)}
.stop{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.stop .gem{position:absolute;left:50%;top:50%;width:50px;height:50px;transform:translate(-50%,-50%) rotate(45deg);background:var(--gold);border:4px solid var(--navy);display:grid;place-items:center}
.stop .gem span{transform:rotate(-45deg);font:800 1.2rem var(--head);color:var(--navy)}
.stop .txt{padding:6px 0}
.stop:nth-child(odd) .txt{grid-column:1;text-align:right}
.stop:nth-child(even) .txt{grid-column:2}
.stop h3{font-size:1.7rem;margin-bottom:6px}
.stop p{font-size:1.02rem}
@media(max-width:760px){
  .trail::before{left:24px}
  .stop{grid-template-columns:1fr;padding-left:70px;gap:0}
  .stop .gem{left:24px;top:30px;transform:translate(-50%,-50%) rotate(45deg);width:42px;height:42px}
  .stop:nth-child(odd) .txt,.stop:nth-child(even) .txt{grid-column:1;text-align:left}
}

/* split layouts, quotes, facts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.split.wide-left{grid-template-columns:1.25fr .75fr}
@media(max-width:860px){.split,.split.wide-left{grid-template-columns:1fr;gap:36px}}
.pull{font:600 1.35rem/1.35 var(--head);color:var(--navy);border-left:6px solid var(--gold);padding-left:22px;margin:28px 0}
.facts{background:var(--navy);color:var(--cream);padding:34px;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.facts h3{color:var(--gold-light);margin-bottom:16px}
.facts ul{list-style:none;display:grid;gap:12px;font-size:1rem}
.facts li{padding-left:24px;position:relative;color:var(--muted-dark)}
.facts li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;background:var(--gold);transform:rotate(45deg)}
.big-quote{font:600 clamp(1.5rem,3vw,2.2rem)/1.25 var(--head);letter-spacing:-.02em;max-width:22em}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--navy)}
.pains blockquote{padding:30px 28px 30px 0;margin-right:28px;border-right:1px solid rgba(6,36,60,.25)}
.pains blockquote:last-child{border-right:0}
.pains q{display:block;font:600 1.2rem/1.35 var(--head);quotes:"“" "”";color:var(--navy)}
.pains p{margin-top:12px;font-size:1rem;color:var(--muted)}
@media(max-width:860px){.pains{grid-template-columns:1fr}.pains blockquote{border-right:0;border-bottom:1px solid rgba(6,36,60,.25);margin-right:0}}

/* case study blocks */
.case{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;background:var(--white);box-shadow:0 18px 40px -22px rgba(6,36,60,.4);margin-bottom:34px}
.case .side{background:var(--navy);color:var(--cream);padding:38px;position:relative;overflow:hidden;isolation:isolate}
.case .side::before{content:"";position:absolute;inset:0;background:url(facets-dark.svg) center/cover;opacity:.6;z-index:-1}
.case .side h3{color:var(--cream);font-size:1.7rem}
.case .side .tag{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin-bottom:12px}
.case .side p{color:var(--muted-dark);margin-top:12px;font-size:1rem}
.case .body{padding:38px}
.case .body h4{font:700 .8rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 8px}
.case .body h4:not(:first-child){margin-top:24px}
.case .body p,.case .body li{color:var(--muted);font-size:1.02rem}
.case .body ul{list-style:none;display:grid;gap:8px}
.case .body li{padding-left:22px;position:relative}
.case .body li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;background:var(--gold);transform:rotate(45deg)}
.case.next{background:transparent;box-shadow:none;border:2px dashed var(--gold-deep);grid-template-columns:1fr;padding:38px;text-align:center}
@media(max-width:860px){.case{grid-template-columns:1fr}}

/* contact form */
.form{background:var(--white);padding:36px;box-shadow:0 18px 40px -22px rgba(6,36,60,.4);border-top:6px solid var(--gold)}
.form label{display:block;font-weight:700;font-size:.95rem;margin:18px 0 6px}
.form label:first-of-type{margin-top:0}
.form input,.form select,.form textarea{width:100%;font:400 1rem var(--body);padding:13px 14px;border:2px solid rgba(6,36,60,.35);background:var(--paper);color:var(--navy);border-radius:0}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--navy);outline:3px solid var(--gold-light);outline-offset:0}
.form textarea{min-height:130px;resize:vertical}
.form .btn{margin-top:24px;cursor:pointer}
.form .hint{font-size:.88rem;color:var(--muted);margin-top:14px}
.steps-mini{list-style:none;counter-reset:m;display:grid;gap:18px;margin-top:26px}
.steps-mini li{counter-increment:m;padding-left:54px;position:relative}
.steps-mini li::before{content:counter(m);position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;background:var(--gold);color:var(--navy);font:800 1.05rem var(--head);transform:rotate(45deg) scale(.82)}
.steps-mini li b{display:block;font-family:var(--head);font-size:1.15rem;color:var(--navy)}
.steps-mini li span{color:var(--muted);font-size:1rem}

/* faq */
details{border-bottom:1px solid rgba(6,36,60,.25);padding:20px 0}
details:first-of-type{border-top:2px solid var(--navy)}
summary{cursor:pointer;font:700 1.2rem var(--head);list-style:none;display:flex;justify-content:space-between;gap:20px;color:var(--navy)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;line-height:1;color:var(--gold-deep)}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--muted);font-size:1.02rem;max-width:42em}

/* band CTA */
.band{padding:84px 0;text-align:left}
.band h2{max-width:14em;margin-bottom:18px}
.band p{max-width:34em;margin-bottom:28px;font-size:1.12rem}

footer{background:var(--navy);color:var(--muted-dark);padding:56px 0 38px;font-size:.98rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;align-items:start}
.foot img{height:34px;width:auto;margin-bottom:16px}
.foot h4{font:700 .8rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin-bottom:12px}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a{text-decoration:none}.foot a:hover{color:var(--gold-light)}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,243,209,.15);font-size:.88rem}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn:hover{transform:none}}

/* payment box */
#pay-box .btn{display:inline-flex}
#pay-box .hint{color:var(--muted)}
.nav ul a[href$="#pay"]{color:var(--gold-deep);font-weight:700}
html{scroll-padding-top:90px}