:root{
 --rhino:#1B475D;--barley:#FFF5D0;--naples:#FAD564;--neptune:#8EBD9D;--olive:#B4BD62;
 --cream:#FFFCF4;--text:#183F55;--muted:#45677A;--rule:rgba(27,71,93,.17);
 --serif:"EB Garamond","Baskerville",Georgia,"Times New Roman",serif;
 --sans:"Helvetica Neue",Arial,sans-serif;--max:1250px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--serif);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:400;letter-spacing:-.045em}p{line-height:1.5}button{font:inherit}
:focus-visible{outline:3px solid var(--naples);outline-offset:4px}
.wrap{max-width:var(--max);width:calc(100% - 112px);margin-inline:auto}
.skip-link{position:absolute;z-index:100;top:-60px;left:20px;padding:8px 15px;background:var(--naples);color:var(--rhino)}.skip-link:focus{top:15px}
/* Precisely follow approved hero→three-column→navy CTA hierarchy. */
.site-header{height:88px;background:#fffefa;position:relative;z-index:20;border-bottom:1px solid rgba(27,71,93,.09)}
.header-inner{max-width:1370px;width:calc(100% - 94px);height:100%;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:35px}
.logo{display:block;flex:none}.logo img{width:216px;display:block}.main-nav{display:flex;align-items:center;gap:32px;font-family:var(--sans);font-weight:650;font-size:10px;letter-spacing:.08em}.main-nav>a:not(.header-cta){white-space:nowrap;text-transform:uppercase;padding:18px 0;letter-spacing:.07em}.main-nav>a[aria-current=page]{border-bottom:2px solid var(--naples)}
.header-cta{padding:17px 21px;background:var(--naples);color:var(--rhino);white-space:nowrap;font-size:10px;font-weight:700}.menu-toggle{display:none}
.hero{min-height:635px;background:#123c53;position:relative;color:#fff;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;background:#123b52 url('/assets/how-it-works/hero-approved-painterly.jpg') right center/cover no-repeat;z-index:-1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,47,67,.64),rgba(12,47,67,.21) 73%,transparent 100%)}
.hero-inner{min-height:635px;display:flex;align-items:center;padding-top:67px;padding-bottom:78px}
.hero-text{position:relative;max-width:970px}.eyebrow{font:700 11px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.22em;margin-bottom:25px}.eyebrow-light{color:#fffefa}.hero .eyebrow{display:flex;gap:22px;align-items:center;letter-spacing:.24em;font-weight:500}.gold-rule{height:2px;width:66px;background:var(--naples);display:inline-block}
.hero h1{font-size:clamp(55px,5.6vw,82px);line-height:.96;max-width:945px;margin:0 0 24px;color:#fffefa;font-weight:400}.hero h1 em{font-weight:400;font-style:normal;color:var(--naples)}
.hero-description{font-size:clamp(17px,1.5vw,21px);line-height:1.35;max-width:785px;color:#fff7ee;margin-bottom:27px;text-wrap:pretty}.hero-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:16px 19px;min-height:49px;font:700 10px/1.25 var(--sans);letter-spacing:.065em;text-transform:uppercase;text-align:center;white-space:nowrap}.button-gold{background:var(--naples);color:var(--rhino);border:1px solid var(--naples)}.button-gold:hover,.header-cta:hover{background:#ffe386}.inline-link{border-bottom:1px solid #fff;font:500 11px var(--sans);padding-bottom:5px;letter-spacing:.05em;color:#fff}.inline-link span{color:var(--naples)}
/* approved system block */
.system{background:var(--cream);position:relative;isolation:isolate;padding-top:56px}
.system:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 47% 0%,rgba(255,245,208,.24),transparent 47%)}
.system-intro{text-align:center;padding-bottom:36px}.system-intro .eyebrow{color:#335c6f;font-size:12px;letter-spacing:.25em;font-weight:500;margin-bottom:17px}.short-rule{height:3px;width:67px;background:var(--naples);margin:0 auto 14px}.system-intro h2{font-size:clamp(53px,6.7vw,89px);line-height:.98;margin-bottom:11px;color:#123c53}.amp{color:var(--naples)}.system-intro>p:last-child{font-size:clamp(18px,1.7vw,24px);line-height:1.28;max-width:1070px;margin:0 auto;color:#294a5d}
.system-columns{max-width:1340px;width:calc(100% - 84px);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid rgba(27,71,93,.08);border-right:1px solid rgba(27,71,93,.08)}
.system-card{position:relative;min-height:490px;padding:3px 38px 100px;overflow:hidden;isolation:isolate}.system-card+.system-card{border-left:1px solid rgba(27,71,93,.17)}
.system-card:before{content:"";position:absolute;inset:0;z-index:-2;background:#fffdf6}
.system-card:after{content:"";position:absolute;inset:auto 0 0;height:150px;z-index:-1;background-position:bottom center;background-size:100% 100%;background-repeat:no-repeat;mask-image:linear-gradient(to bottom,transparent 0%,black 68%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 68%)}
.system-card-pivots:before{background:linear-gradient(#fffcf5,#fffae7)}.system-card-pulls:before{background:linear-gradient(#fffdf7,#f6faf3)}.system-card-boardroom:before{background:linear-gradient(#fffdf6,#f5f9fa)}
.system-card-pivots:after{background-image:url('/assets/how-it-works/paint-pivot.png')}.system-card-pulls:after{background-image:url('/assets/how-it-works/paint-pull.png')}.system-card-boardroom:after{background-image:url('/assets/how-it-works/paint-boardroom.png')}
.card-numeral{font:400 clamp(102px,11vw,150px)/.86 var(--serif);letter-spacing:-.11em;display:block;margin-left:-5px}.system-card-pivots .card-numeral{color:#EAD99D}.system-card-pulls .card-numeral{color:#A9CAB8}.system-card-boardroom .card-numeral{color:#A6C2CB}
.system-card h3{font-size:clamp(39px,4.4vw,63px);line-height:1.02;white-space:nowrap;margin:2px 0 8px}.card-subtitle{font:600 9px/1.45 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#4d6b78;min-height:28px;margin:0 0 13px}
.system-card>p:not(.card-keywords):not(.card-subtitle){font:400 clamp(17px,1.55vw,21px)/1.25 var(--serif);max-width:350px;position:relative;z-index:2;margin-bottom:25px}.card-keywords{font:700 10px/1.6 var(--sans);letter-spacing:.23em;position:absolute;left:38px;bottom:25px;margin:0;color:#22506a}.card-keywords:before{content:"";display:block;height:2px;width:40px;background:var(--naples);margin-bottom:12px}
/* Approved screenshot navy CTA directly below cards */
.mid-band{background:#10374d;color:#fff;position:relative;isolation:isolate;overflow:hidden}.mid-band-bg{position:absolute;right:0;top:0;bottom:0;width:35%;background:url('/assets/how-it-works/footer-stroke.jpg') center/cover no-repeat;opacity:.18;z-index:-1}.mid-band-inner{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:45px;align-items:center;padding:39px 0 41px}.mid-eyebrow{font:500 10px/1.6 var(--sans);letter-spacing:.2em;margin:0}.tiny-gold-rule{display:block;height:2px;width:58px;background:var(--naples);margin-top:17px}.mid-band h2{font-size:clamp(35px,3.4vw,50px);line-height:1.05;color:#fff;margin:0 0 7px}.mid-band p:not(.mid-eyebrow){font-size:17px;margin:0;line-height:1.28}
/* Following sections: same editorial visual language, no generic prop illustrations or stock icons. */
.deep-section{padding:110px 0}.split-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(55px,8vw,150px)}
.deep-section h2{font-size:clamp(49px,5vw,76px);line-height:1.04;margin-bottom:26px}.deep-section h2 em{color:#6B9B85;font-weight:400}.deep-section .eyebrow{font-size:10px;color:#416477;margin-bottom:22px}
.body-copy{font-size:18px;line-height:1.5}.body-copy p{margin-bottom:19px}.body-copy strong{font-weight:650}.body-copy blockquote{border-left:3px solid var(--naples);margin:34px 0 0;padding:3px 0 3px 23px;font-size:27px;line-height:1.24}
.audience{background:#FFFEFA}.audience h2{max-width:610px}.example{background:#FFF5D0}.example h2{max-width:1000px}.scenario{font-size:clamp(30px,3.3vw,47px);line-height:1.08;max-width:900px;margin:10px 0 20px}.scenario-intro{max-width:800px;font-size:18px;line-height:1.45;margin-bottom:46px}.example-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.example-step{padding:26px 30px 16px 0}.example-step+.example-step{border-left:1px solid var(--rule);padding-left:30px}.example-step span{font:700 10px var(--sans);letter-spacing:.17em;color:#386176}.example-step p{font-size:22px;line-height:1.24;margin:17px 0}.takeaway{font-size:25px;line-height:1.25;max-width:920px;margin:37px 0 0}
.boardroom-deep{background:#f8faf6}.boardroom-deep-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px,8vw,150px)}.boardroom-deep h2{max-width:600px}.membership-note{font:700 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.17em;color:#486f62;border-top:2px solid var(--naples);padding-top:22px;width:max-content}.short-gold-line{color:#D4A82C}.gain{border-top:1px solid var(--rule);padding-top:22px}
.outcomes{background:#fffefa}.outcome-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(70px,8vw,145px)}.outcomes ul{list-style:none;padding:0;margin:20px 0 26px}.outcomes li{padding:12px 0;border-top:1px solid var(--rule);font-size:23px;line-height:1.25}.outcomes li:last-child{border-bottom:1px solid var(--rule)}.statement{font-size:27px;line-height:1.28;font-style:italic}
.final-cta{position:relative;overflow:hidden;background:#153e54;color:#fff;text-align:center;padding:100px 0}.final-cta:before{content:"";inset:0;position:absolute;opacity:.26;background:url('/assets/how-it-works/hero-approved-painterly.jpg') right center/cover}.final-cta-inner{position:relative}.final-cta h2{font-size:clamp(52px,5.7vw,80px);line-height:1.03;max-width:1040px;margin:0 auto 26px}.final-cta-inner>p:not(.eyebrow):not(.brand-tagline){font-size:21px;max-width:820px;margin:0 auto 35px;line-height:1.32}.final-cta .brand-tagline{font-size:25px;margin:38px 0 0;color:var(--naples);font-style:italic}
.site-footer{padding:28px 0;background:var(--barley);font:500 12px/1.3 var(--sans)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-inner img{width:144px;display:block}.footer-inner p{margin:0}
@media(max-width:1150px){.wrap{width:calc(100% - 76px)}.header-inner{width:calc(100% - 65px)}.main-nav{gap:16px}.logo img{width:183px}.hero h1{font-size:69px}.system-columns{width:calc(100% - 36px)}.system-card{padding-inline:23px}.card-keywords{left:23px}.system-card h3{font-size:45px}.mid-band-inner{grid-template-columns:130px 1fr;gap:20px}.mid-band .button{grid-column:2;width:max-content}}
@media(max-width:760px){
 .wrap{width:calc(100% - 42px)}.site-header{height:70px}.header-inner{width:calc(100% - 42px)}.logo img{width:174px}
 .menu-toggle{display:flex;width:42px;height:42px;flex-direction:column;gap:5px;justify-content:center;align-items:center;border:0;background:transparent;cursor:pointer;padding:0}.menu-toggle span{width:24px;height:2px;background:var(--rhino)}
 .main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#FFFCF4;box-shadow:0 16px 30px rgba(0,0,0,.12);flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 25px}.main-nav.open{display:flex}.main-nav>a:not(.header-cta){padding:14px 6px;border-bottom:1px solid var(--rule)}.main-nav .header-cta{margin-top:15px;text-align:center}
 .hero,.hero-inner{min-height:auto}.hero-bg{background-position:58% center}.hero-inner{padding-top:77px;padding-bottom:84px}.hero-text{max-width:100%}.hero h1{font-size:clamp(46px,10vw,68px);line-height:1.04;margin-bottom:24px}.hero-description{font-size:19px;line-height:1.4}.hero-actions{flex-direction:column;align-items:stretch;gap:20px}.hero .button{width:100%;white-space:normal}.inline-link{align-self:center}
 .system{padding-top:60px}.system-intro{padding-bottom:30px}.system-intro h2{font-size:clamp(52px,10vw,72px)}.system-intro>p:last-child{font-size:20px}.desktop-only{display:none}.system-columns{display:block;width:calc(100% - 32px);border:0}.system-card{min-height:355px;padding:19px 25px 92px;border-top:1px solid rgba(27,71,93,.15)}.system-card+.system-card{border-left:0}.card-numeral{font-size:114px}.system-card h3{font-size:53px}.system-card>p:not(.card-keywords):not(.card-subtitle){font-size:20px;max-width:600px}.card-keywords{left:25px;bottom:26px}
 .mid-band-inner{display:block;padding:45px 0 50px}.mid-eyebrow{margin-bottom:24px}.mid-band h2{font-size:43px}.mid-band .button{margin-top:23px;max-width:100%;white-space:normal}
 .deep-section{padding:75px 0}.split-layout,.boardroom-deep-grid,.outcome-inner{display:block}.deep-section h2{font-size:clamp(47px,9.5vw,66px)}.body-copy{font-size:18px}.body-copy blockquote{font-size:26px}.example-steps{display:block}.example-step,.example-step+.example-step{padding:26px 0 10px;border-left:0}.example-step+.example-step{border-top:1px solid var(--rule)}.example-step p{font-size:23px}.scenario{font-size:38px}.takeaway{font-size:25px}.membership-note{margin-bottom:35px}.outcome-inner>div:first-child{margin-bottom:25px}.final-cta{padding:80px 0}.final-cta h2{font-size:clamp(45px,10vw,65px)}.footer-inner{flex-wrap:wrap;justify-content:center;text-align:center}.footer-inner p{width:100%;order:3}
}
@media(max-width:430px){.hero h1{font-size:48px}.hero .eyebrow{font-size:10px}.hero-description{font-size:17.6px}.hero-inner{padding-top:66px;padding-bottom:71px}.system-intro h2{font-size:48px}.system-intro>p:last-child{font-size:18px}.system-card{min-height:390px}.system-card h3{font-size:46px}.card-numeral{font-size:109px}.card-subtitle{max-width:290px}.system-card>p:not(.card-keywords):not(.card-subtitle){font-size:19px}.mid-band h2{font-size:38px}.mid-band .button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Browser-safe painterly layer ordering; print-preview fallback values for CSS clamp. */
.wrap{margin-left:auto;margin-right:auto}
.hero-bg{z-index:0}.hero:after{z-index:1}.hero-inner{position:relative;z-index:2}
.system-card:before{z-index:0}.system-card:after{z-index:1}.system-card h3,.system-card .card-numeral,.system-card p{position:relative;z-index:2}.system-card .card-keywords{position:absolute;z-index:3}
.hero h1{font-size:79px;font-size:clamp(55px,5.6vw,82px)}
.system-intro h2{font-size:86px;font-size:clamp(53px,6.7vw,89px)}
.card-numeral{font-size:142px;font-size:clamp(102px,11vw,150px)}
.system-card h3{font-size:57px;font-size:clamp(39px,4.4vw,63px)}
.system-card>p:not(.card-keywords):not(.card-subtitle){font-size:21px;font-size:clamp(17px,1.55vw,21px)}
.mid-band h2{font-size:48px;font-size:clamp(35px,3.4vw,50px)}
.deep-section h2{font-size:70px;font-size:clamp(49px,5vw,76px)}
.scenario{font-size:44px;font-size:clamp(30px,3.3vw,47px)}
.final-cta h2{font-size:76px;font-size:clamp(52px,5.7vw,80px)}
@media(max-width:1150px){.hero h1{font-size:69px}.system-card h3{font-size:45px}}
@media(max-width:760px){.hero h1{font-size:61px;font-size:clamp(46px,10vw,68px)}.system-intro h2{font-size:61px;font-size:clamp(52px,10vw,72px)}.system-card h3{font-size:53px}.card-numeral{font-size:114px}.system-card>p:not(.card-keywords):not(.card-subtitle){font-size:20px}.mid-band h2{font-size:43px}.deep-section h2{font-size:58px;font-size:clamp(47px,9.5vw,66px)}.scenario{font-size:38px}.final-cta h2{font-size:59px;font-size:clamp(45px,10vw,65px)}}
@media(max-width:430px){.hero h1{font-size:48px}.system-intro h2{font-size:48px}.system-card h3{font-size:46px}.card-numeral{font-size:109px}.system-card>p:not(.card-keywords):not(.card-subtitle){font-size:19px}.mid-band h2{font-size:38px}}

/* Image-backed approved painterly fragments ensure fidelity in CSS-light renderers. */
.hero-art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.card-paint{position:absolute;z-index:1;bottom:0;left:0;width:100%;height:160px;object-fit:fill;opacity:.83;pointer-events:none}
.band-art{position:absolute;z-index:0;right:0;top:0;width:28%;height:100%;object-fit:cover;opacity:.14;pointer-events:none}
.mid-band-inner{position:relative;z-index:2}
.card-paint{height:115px;opacity:.94}
.system-card:after{display:none}
.mid-band-bg{display:none}
@media(max-width:760px){.hero-art{object-position:right center;opacity:.24}}
