:root{--blue:#2780E5;--navy:#19274A;--teal:#1CA49F;--ink:#101827;--muted:#637083;--line:#E4E9F0;--soft:#F5F7FA;--soft2:#EEF4FC;--white:#fff;--green:#23966F;--radius:24px;--shadow:0 24px 70px rgba(25,39,74,.11);--shadow-sm:0 12px 35px rgba(25,39,74,.08);--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}img,svg{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.shell{width:min(calc(100% - 40px),var(--max));margin:auto}.skip-link{position:fixed;left:12px;top:-60px;z-index:1000;background:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-sm)}.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(228,233,240,.72)}.nav-shell{height:82px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;flex:0 0 auto}.brand img{width:188px;height:auto}.desktop-nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:14px;font-weight:650;color:#202A38}.desktop-nav>a,.nav-drop-toggle{padding:28px 0;border:0;background:none;color:inherit;cursor:pointer}.nav-drop{position:relative}.nav-drop-toggle span{font-size:15px;margin-left:4px}.nav-menu{position:absolute;top:64px;left:50%;transform:translateX(-50%) translateY(8px);width:310px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.2s}.nav-drop:hover .nav-menu,.nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.nav-menu a{display:flex;flex-direction:column;padding:12px 14px;border-radius:12px}.nav-menu a:hover{background:var(--soft)}.nav-menu b{font-size:14px}.nav-menu small{margin-top:2px;color:var(--muted);font-weight:500}.nav-actions{display:flex;align-items:center;gap:16px;margin-left:14px}.text-link{font-size:14px;font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:10px;padding:13px 20px;min-height:48px;font-weight:750;font-size:14px;transition:transform .18s,box-shadow .18s,background .18s}.btn:hover{transform:translateY(-1px)}.btn-dark{background:#111;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12)}.btn-dark:hover{background:var(--navy);box-shadow:0 10px 26px rgba(25,39,74,.23)}.btn-small{padding:10px 15px;min-height:40px}.btn-ghost{border-color:var(--line);background:#fff}.btn-ghost:hover,.btn-outline:hover{border-color:#c7d1df;box-shadow:var(--shadow-sm)}.btn-outline{border-color:#D7DEE8;background:transparent}.btn-white{background:#fff;color:var(--navy)}.btn-outline-light{border-color:rgba(255,255,255,.35);color:#fff}.btn-block{width:100%}.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;position:relative}.menu-toggle span{display:block;width:17px;height:1.5px;background:var(--ink);position:absolute;left:12px;transition:.2s}.menu-toggle span:first-child{top:16px}.menu-toggle span:last-child{top:23px}.menu-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg);top:20px}.menu-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg);top:20px}.mobile-panel{display:none;background:#fff;border-top:1px solid var(--line)}.mobile-panel nav{width:min(calc(100% - 40px),var(--max));margin:auto;display:grid;padding:14px 0 24px}.mobile-panel a{padding:11px 0;border-bottom:1px solid #eef1f5;font-weight:650}.mobile-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px;padding-bottom:5px}
.hero{overflow:hidden}.home-hero{padding:72px 0 36px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.75fr);gap:80px;align-items:center}.hero-copy{max-width:700px}.pill,.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:780;letter-spacing:.05em;text-transform:uppercase}.pill{border:1px solid var(--line);border-radius:999px;padding:7px 11px;background:#fff;color:#3c485a}.pill i{width:7px;height:7px;background:var(--blue);border-radius:50%;box-shadow:0 0 0 4px rgba(39,128,229,.12)}.pill.green i{background:var(--green)}.eyebrow{color:#627187}.eyebrow.light{color:#B7E3E0}h1,h2,h3{font-weight:690;letter-spacing:-.035em;line-height:1.04;margin:0}h1{font-size:clamp(48px,6vw,80px);max-width:900px}h2{font-size:clamp(36px,4vw,54px)}h3{font-size:22px}.hero-copy>p,.inner-hero p,.center-head>p,.section-head>p{font-size:18px;color:var(--muted);max-width:710px}.hero-copy>p{margin:24px 0 28px;max-width:630px}.button-row{display:flex;gap:12px;flex-wrap:wrap}.button-row.center{justify-content:center}.hero-proof{display:flex;gap:24px;flex-wrap:wrap;margin-top:34px}.hero-proof span{display:flex;align-items:center;gap:8px;font-size:12px;color:#4C596B}.hero-proof svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:1.7}.hero-art{position:relative;min-height:320px}.line-art{width:100%;height:auto;max-height:330px;fill:none;stroke:#111;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.line-art .accent{stroke:var(--blue)}.quote-bubble{position:absolute;right:0;bottom:25px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;font-size:13px;box-shadow:var(--shadow-sm)}
.product-stage{position:relative;width:min(calc(100% - 40px),1120px);margin:55px auto 0;padding:38px 68px 0}.dots-field{position:absolute;inset:50px 0 0;background-image:radial-gradient(rgba(39,128,229,.18) 1.1px,transparent 1.1px);background-size:11px 11px;border-radius:30px;mask-image:linear-gradient(to bottom,#000 10%,transparent 90%)}.app-window{position:relative;background:#fff;border:1px solid #DCE4EE;border-radius:18px 18px 0 0;overflow:hidden;box-shadow:0 28px 70px rgba(36,64,99,.17);z-index:2}.app-bar{height:48px;border-bottom:1px solid #EDF0F4;display:flex;align-items:center;padding:0 16px;gap:16px}.traffic{display:flex;gap:5px}.traffic i{width:7px;height:7px;border:1px solid #B9C2CF;border-radius:50%}.app-title{font-size:11px;color:#8792A2;margin:auto}.live-pill{font-size:10px;display:flex;align-items:center;gap:5px;border:1px solid #E5E8ED;border-radius:999px;padding:4px 8px}.live-pill i{width:6px;height:6px;border-radius:50%;background:#21A078}.app-body{display:grid;grid-template-columns:72px 1fr;min-height:345px}.app-side{background:#FAFBFC;border-right:1px solid #EDF0F4;display:flex;align-items:center;flex-direction:column;gap:22px;padding:18px 12px}.app-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--navy);color:#fff;font-weight:800}.side-line{width:28px;height:6px;border-radius:10px;background:#DDE3EC}.side-line.on{background:var(--blue)}.app-main{padding:22px}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric-row>div{border:1px solid #E8ECF1;border-radius:12px;padding:13px}.metric-row small{display:block;font-size:8px;color:#8792A2;font-weight:800;letter-spacing:.05em}.metric-row b{display:inline-block;font-size:22px;margin-top:5px}.metric-row em{float:right;font-size:9px;color:#1D966F;font-style:normal;margin-top:11px}.dashboard-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:10px;margin-top:10px}.chart-panel,.activity-panel{border:1px solid #E8ECF1;border-radius:12px;padding:14px;min-height:205px}.panel-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700}.panel-head small{color:#97A1AE;font-weight:500}.chart-panel svg{width:100%;height:150px}.activity{display:flex;align-items:center;gap:8px;padding:13px 0;border-bottom:1px solid #EEF1F5}.activity:last-child{border-bottom:0}.activity i{width:8px;height:8px;background:var(--blue);border-radius:50%}.activity i.green{background:#21A078}.activity i.teal{background:var(--teal)}.activity p{margin:0;display:flex;flex-direction:column;line-height:1.3}.activity b{font-size:10px}.activity small{font-size:8px;color:#8A95A5}.activity strong{margin-left:auto;font-size:8px;color:#929CAA}.float-note{position:absolute;z-index:3;background:#fff;border:1px solid #E0E6EE;border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-sm);font-size:10px}.float-note div{display:flex;flex-direction:column}.float-note small{color:#8994A2}.note-one{left:0;top:130px}.note-two{right:0;bottom:52px}.note-icon{display:grid;place-items:center;width:28px;height:28px;background:var(--blue);color:#fff;border-radius:8px;font-weight:800}.teal-bg{background:var(--teal)!important}
.feature-band{padding:22px 0 90px}.four-up{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.mini-feature{display:flex;align-items:flex-start;gap:12px}.mini-feature svg{width:24px;height:24px;stroke:#111;stroke-width:1.6;fill:none;flex:none}.mini-feature div{display:flex;flex-direction:column}.mini-feature b{font-size:13px}.mini-feature span{font-size:11px;color:var(--muted)}.section{padding:108px 0}.soft{background:var(--soft)}.center-head{text-align:center;max-width:790px;margin:0 auto 52px}.center-head.narrow{max-width:700px}.center-head h2{margin-top:11px}.center-head>p{margin:17px auto 0}.section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.72fr);gap:70px;align-items:end;margin-bottom:52px}.section-head h2{margin-top:10px}.section-head>p{font-size:16px;margin:0}.feature-switcher{display:grid;grid-template-columns:.8fr 1.25fr;gap:70px;align-items:center}.switch-list{display:grid}.switch-btn{border:0;border-bottom:1px solid var(--line);background:transparent;padding:21px 0;display:grid;grid-template-columns:42px 1fr;gap:12px;text-align:left;color:#727D8E;cursor:pointer}.switch-btn>span{font-size:11px;padding-top:3px}.switch-btn div{display:flex;flex-direction:column}.switch-btn b{font-size:15px;color:inherit}.switch-btn small{font-size:12px;margin-top:4px;line-height:1.45;color:inherit}.switch-btn.active{color:var(--ink)}.switch-btn.active>span{color:var(--blue)}.switch-visual{background:#F7F8FA;border-radius:24px;min-height:460px;padding:44px;display:grid;place-items:center}.tab-pane{display:none;width:100%}.tab-pane.active{display:block;animation:fadeUp .28s ease}.pane-card{max-width:530px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm)}.pane-card h3{font-size:27px;margin:10px 0 26px}.spark-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.spark-grid>div{border:1px solid #E8ECF1;border-radius:12px;padding:14px;display:flex;flex-direction:column}.spark-grid b{font-size:25px}.spark-grid span{font-size:10px;color:var(--muted)}.mini-chart{height:130px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid #DDE3EA;margin-top:20px;padding:0 10px}.mini-chart i{flex:1;background:linear-gradient(var(--blue),#7BB1EF);border-radius:5px 5px 0 0}.workflow-list{display:grid;gap:9px}.workflow-list span{border:1px solid #E8ECF1;border-radius:10px;padding:12px;font-size:13px}.person-card{display:flex;align-items:center;gap:10px;border:1px solid #E8ECF1;border-radius:12px;padding:11px;margin-top:10px}.person-card>span{display:grid;place-items:center;width:36px;height:36px;background:#EAF2FC;color:var(--blue);border-radius:50%;font-weight:800;font-size:11px}.person-card div{display:flex;flex-direction:column}.person-card b{font-size:12px}.person-card small{font-size:9px;color:var(--muted)}.person-card em{margin-left:auto;color:#188363;font-size:9px;font-style:normal;background:#EAF8F4;padding:4px 7px;border-radius:999px}.step-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.step-card{background:#fff;border:1px solid #E8ECF1;border-radius:18px;padding:16px;min-height:330px}.step-num{font-size:11px;color:#7B8796;padding:4px}.step-visual{height:155px;background:#F4F5F7;border-radius:13px;margin:8px 0 22px;position:relative;overflow:hidden}.step-card h3{font-size:17px;margin:0 4px 7px}.step-card p{font-size:12px;color:var(--muted);margin:0 4px}.target-visual span{position:absolute;width:76px;height:76px;border:1px solid #B9C6D6;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.target-visual span:before,.target-visual span:after{content:"";position:absolute;border:1px solid #B9C6D6;border-radius:50%;inset:13px}.target-visual span:after{inset:27px;background:var(--blue);border:0}.target-visual b{position:absolute;right:18px;top:18px;background:#fff;border:1px solid #D9E0E9;border-radius:999px;padding:5px 9px;font-size:9px}.list-visual{display:grid;align-content:center;gap:10px;padding:30px}.list-visual i{height:22px;background:#fff;border:1px solid #E0E5EC;border-radius:7px;position:relative}.list-visual i:before{content:"";position:absolute;left:8px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--teal)}.list-visual i:after{content:"";position:absolute;left:24px;right:16px;top:8px;height:5px;border-radius:10px;background:#D7DDE6}.mail-visual{display:grid;place-items:center}.mail-visual svg{width:58px;stroke:var(--blue);fill:none;stroke-width:1.4}.mail-visual span{position:absolute;bottom:13px;background:#fff;padding:4px 8px;border-radius:999px;font-size:9px}.graph-visual{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:28px}.graph-visual i{width:22px;background:var(--blue);border-radius:5px 5px 0 0}.graph-visual i:nth-child(1){height:35%}.graph-visual i:nth-child(2){height:54%}.graph-visual i:nth-child(3){height:70%}.graph-visual i:nth-child(4){height:88%;background:var(--teal)}.orbit{height:330px;position:relative;max-width:700px;margin:20px auto 0}.orbit:before,.orbit:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed #D8DFE8;border-radius:50%;width:500px;height:230px}.orbit:after{width:330px;height:150px}.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:26px;background:#fff;border:1px solid #DDE4EC;display:grid;place-items:center;box-shadow:var(--shadow-sm);z-index:2}.orbit-center img{width:50px}.orbit-chip{position:absolute;background:#fff;border:1px solid #DDE4EC;border-radius:12px;padding:10px 14px;font-weight:700;font-size:12px;box-shadow:var(--shadow-sm);z-index:2}.c1{left:9%;top:44%}.c2{left:26%;top:16%}.c3{right:22%;top:13%}.c4{right:8%;top:48%}.c5{left:27%;bottom:7%}.c6{right:25%;bottom:8%}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}.price-card{background:#fff;border:1px solid #DEE4EC;border-radius:17px;padding:26px;position:relative;display:flex;flex-direction:column}.price-card.featured{background:#EAF3FF;border-color:#A8C9F1;box-shadow:0 12px 35px rgba(39,128,229,.09)}.plan{font-size:12px;font-weight:800}.price-card>p{font-size:12px;color:var(--muted);min-height:58px}.price{font-size:32px;font-weight:700;letter-spacing:-.04em;margin:12px 0 22px}.price small{font-size:11px;color:var(--muted);font-weight:600}.price-card ul{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid #E4E9F0;padding-top:14px}.price-card li{font-size:11px;padding:7px 0 7px 19px;position:relative}.price-card li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:900}.popular{position:absolute;right:15px;top:14px;background:var(--blue);color:#fff;border-radius:999px;font-size:8px;text-transform:uppercase;letter-spacing:.07em;padding:5px 8px}.pricing-more{text-align:center;margin-top:26px}.pricing-more a,.text-arrow{font-size:13px;font-weight:800;color:var(--navy)}.testimonial{display:grid;grid-template-columns:340px 1fr;gap:55px;max-width:930px;margin:auto;align-items:center}.portrait-art{height:330px;background:#E8EEF7;border-radius:16px;overflow:hidden;display:grid;place-items:center}.portrait-art .line-art{width:95%;transform:translateY(20px)}.stars{letter-spacing:.22em;color:var(--blue);font-size:15px}.testimonial blockquote{font-size:29px;line-height:1.3;letter-spacing:-.025em;margin:18px 0}.testimonial p{font-size:12px;color:var(--muted)}.faq-layout{display:grid;grid-template-columns:.7fr 1.2fr;gap:75px;align-items:start}.faq-intro h2{margin:10px 0 18px}.faq-intro p{color:var(--muted);max-width:390px;margin-bottom:25px}.accordion{background:#fff;border:1px solid #E2E7EE;border-radius:18px;padding:0 18px}.faq-item{border-bottom:1px solid #E7EBF1}.faq-item:last-child{border-bottom:0}.faq-item button{width:100%;border:0;background:none;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:730;padding:18px 0;cursor:pointer;font-size:14px}.faq-item button span{font-size:20px;font-weight:400}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s}.faq-answer>p{overflow:hidden;margin:0;color:var(--muted);font-size:13px}.faq-item.open .faq-answer{grid-template-rows:1fr}.faq-item.open .faq-answer>p{padding:0 0 18px}.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.resource-card{display:block}.resource-art{height:185px;border-radius:15px;margin-bottom:16px;display:grid;place-items:center}.resource-art svg{width:62px;height:62px;fill:none;stroke:#111;stroke-width:1.3}.r1{background:#E9F2FE}.r2{background:#EAF7F6}.r3{background:#F2EFFA}.resource-card>span{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800;letter-spacing:.08em}.resource-card h3{font-size:18px;margin:7px 0}.resource-card p{font-size:12px;color:var(--muted);margin:0 0 12px}.resource-card b{font-size:11px}.contact-home{padding-top:80px}.contact-shell{display:grid;grid-template-columns:.7fr 1.2fr;max-width:940px;margin:auto;border:1px solid #E1E7EF;border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}.contact-shell aside{background:#F7F8FA;padding:32px;position:relative;overflow:hidden}.contact-shell aside .line-art{position:absolute;width:180px;bottom:-10px;right:-20px;opacity:.75}.contact-stat{display:grid;grid-template-columns:34px 1fr;gap:4px 12px;padding:14px 0;border-bottom:1px solid #DFE5EC}.contact-stat>span{grid-row:1/3;font-size:10px;color:var(--blue);padding-top:3px}.contact-stat b{font-size:12px}.contact-stat small{font-size:10px;color:var(--muted)}.contact-form{padding:30px;display:grid;gap:14px}.contact-form label{display:grid;gap:6px;font-size:11px;font-weight:700;color:#3C4858}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #DDE3EA;border-radius:9px;padding:11px 12px;background:#fff;color:var(--ink);outline:0;transition:.18s}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(39,128,229,.1)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hp{position:absolute!important;left:-10000px!important}.form-status{font-size:11px;color:var(--muted);margin:0}.form-status.success{color:#13775A}.form-status.error{color:#B54343}.dashboard-cta{padding-bottom:0}.dashboard-cta .product-stage{margin-top:36px}.final-cta{padding:80px 0}.cta-card{background:var(--navy);color:#fff;border-radius:24px;padding:55px;display:grid;grid-template-columns:1.2fr .55fr;gap:60px;align-items:center;overflow:hidden;position:relative}.cta-card:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;border:60px solid rgba(39,128,229,.24);right:-140px;top:-140px}.cta-card h2{font-size:clamp(34px,4vw,52px);margin:10px 0 14px;max-width:760px}.cta-card p{color:#CED6E5;max-width:640px}.cta-actions{display:grid;gap:10px;position:relative;z-index:2}
.inner-hero{padding:90px 0 80px;overflow:hidden}.inner-hero-grid{display:grid;grid-template-columns:1fr .72fr;gap:70px;align-items:center}.inner-hero h1{font-size:clamp(47px,5.6vw,73px);margin-top:15px}.inner-hero p{margin:22px 0 28px}.inner-visual{min-height:390px;background:#F5F7FA;border-radius:24px;position:relative;display:grid;place-items:center;padding:34px;overflow:hidden}.inner-visual .line-art{position:absolute;width:58%;right:-40px;bottom:-18px;opacity:.55}.metric-hero{position:relative;z-index:2;background:#fff;border:1px solid #E0E6ED;border-radius:18px;padding:26px;width:min(100%,330px);box-shadow:var(--shadow-sm);margin-right:auto}.metric-hero small{display:block;color:var(--muted);text-transform:uppercase;font-weight:800;font-size:9px;letter-spacing:.09em}.metric-hero b{display:block;font-size:52px;letter-spacing:-.05em;color:var(--blue);margin:10px 0}.metric-hero p{font-size:12px;margin:0;color:var(--muted)}.three-info{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-card{background:#fff;border:1px solid #E4E9F0;border-radius:18px;padding:26px;min-height:255px}.icon-circle{width:44px;height:44px;border-radius:12px;background:#EDF4FD;display:grid;place-items:center;margin-bottom:42px}.icon-circle svg{width:22px;fill:none;stroke:var(--blue);stroke-width:1.7}.info-card h3{font-size:20px;margin-bottom:10px}.info-card p{color:var(--muted);font-size:13px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E3E8EF;border:1px solid #E3E8EF;border-radius:18px;overflow:hidden}.process-card{background:#fff;padding:29px;min-height:230px}.process-card>span{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#EDF4FD;color:var(--blue);font-size:9px;font-weight:800;margin-bottom:50px}.process-card h3{font-size:17px;margin-bottom:10px}.process-card p{font-size:12px;color:var(--muted)}.split-feature{display:grid;grid-template-columns:.8fr 1.35fr;gap:70px;align-items:center}.split-feature>div:first-child h2{margin:10px 0 18px}.split-feature>div:first-child>p{color:var(--muted)}.split-feature .product-stage{width:100%;padding:20px 25px 0;margin:0}.split-feature .app-body{min-height:280px}.split-feature .float-note{display:none}.check-list{list-style:none;padding:0;margin:24px 0}.check-list li{padding:7px 0 7px 26px;position:relative;font-size:13px}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:900}.chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:28px}.chip-row span{font-size:10px;border:1px solid #DDE4EC;border-radius:999px;padding:7px 10px;color:#556274;background:#fff}.vertical-board{position:relative;z-index:2;width:100%;max-width:390px;background:#fff;border:1px solid #E0E6ED;border-radius:18px;padding:16px;box-shadow:var(--shadow-sm)}.board-top{display:flex;justify-content:space-between;font-size:10px;font-weight:800;padding:6px 2px 15px;border-bottom:1px solid #E9EDF2}.board-top em{font-style:normal;color:#188363;background:#EAF8F4;border-radius:999px;padding:3px 7px}.persona-line{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid #EDF0F4}.persona-line:last-child{border-bottom:0}.persona-line>i{display:grid;place-items:center;width:28px;height:28px;background:#EDF4FD;color:var(--blue);border-radius:8px;font-size:10px;font-style:normal;font-weight:800}.persona-line div{display:flex;flex-direction:column}.persona-line b{font-size:11px}.persona-line small{font-size:8px;color:var(--muted)}.persona-line strong{margin-left:auto;font-size:8px;color:#197F61}.centered{text-align:center}.centered>.shell>p,.inner-hero.centered p{margin-left:auto;margin-right:auto;max-width:760px}.compact{padding-bottom:55px}.pricing-page{padding-top:50px}.about-logo-card{position:relative;z-index:2;background:#fff;border:1px solid #E0E6ED;border-radius:20px;padding:28px;width:min(100%,410px);box-shadow:var(--shadow-sm);text-align:center}.about-logo-card img{max-width:300px;margin:auto}.about-logo-card span{display:block;font-size:10px;color:var(--muted);margin-top:8px}.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.team-card{border:1px solid #E1E7EE;border-radius:18px;background:#fff;padding:28px;display:grid;grid-template-columns:58px 1fr;gap:18px}.initials{width:58px;height:58px;border-radius:16px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800}.team-card span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}.team-card h3{margin:6px 0 10px}.team-card p{font-size:13px;color:var(--muted)}.green-card{background:#EEF8F2;border:1px solid #D5EBDD;border-radius:22px;padding:36px;display:grid;grid-template-columns:1fr 150px;gap:20px;align-items:center}.green-card span{font-size:76px;line-height:1;font-weight:750;letter-spacing:-.06em;color:#278568}.green-card p{grid-column:1/2;color:#4E665C}.green-card img{grid-column:2;grid-row:1/3;max-width:140px}.address-card{margin-top:25px;padding:18px;border:1px solid #DFE5EC;border-radius:14px;background:#fff;display:flex;flex-direction:column;gap:4px}.address-card b{font-size:12px}.address-card span{font-size:11px;color:#4E5968}.address-card small{font-size:9px;color:var(--muted);margin-top:5px}.green-hero{background:linear-gradient(180deg,#fff 0,#F3FAF6 100%)}.green-impact{background:#fff;border:1px solid #DCEBE2;border-radius:24px;padding:40px;box-shadow:var(--shadow-sm)}.green-impact .leaf{width:45px;height:45px;border-radius:14px;background:#E6F5ED;color:#288866;display:grid;place-items:center;font-size:22px}.green-impact b{font-size:84px;line-height:1;color:#288866;display:block;margin:25px 0 10px;letter-spacing:-.06em}.green-impact p{font-size:13px;margin:0;color:#557064}.legal-card{max-width:900px;margin:auto;background:#fff;border:1px solid #E1E7EF;border-radius:18px;padding:50px}.legal-card h2{font-size:30px;margin:0 0 20px}.legal-card h3{font-size:18px;margin:30px 0 9px}.legal-card p{font-size:13px;color:#4F5A68}.error-page{min-height:70vh;display:grid;place-items:center;padding:90px 0;text-align:center}.error-page img{width:140px;margin:0 auto 28px}.error-page>div>span{font-size:11px;letter-spacing:.12em;color:var(--blue);font-weight:800}.error-page h1{font-size:50px;margin:10px 0}.error-page p{color:var(--muted);margin-bottom:24px}
.footer{background:#0D1525;color:#fff;padding:70px 0 22px}.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:55px}.footer-brand img{width:230px}.footer-brand p{font-size:12px;color:#A8B3C5;max-width:330px}.footer h4{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#AAB4C4;margin:0 0 13px}.footer a{display:block;font-size:12px;color:#E8EDF6;padding:5px 0}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#8E9AAF;font-size:10px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:1020px){.desktop-nav{display:none}.login-link{display:none}.menu-toggle{display:block}.mobile-panel.open{display:block}.nav-shell{height:72px}.brand img{width:165px}.hero-grid,.inner-hero-grid{grid-template-columns:1fr;gap:34px}.hero-art{max-width:480px;margin:auto}.home-hero{padding-top:55px}.product-stage{padding-left:24px;padding-right:24px}.note-one{left:3px}.note-two{right:3px}.four-up{grid-template-columns:1fr 1fr}.feature-switcher,.faq-layout,.split-feature{grid-template-columns:1fr;gap:38px}.switch-list{grid-template-columns:repeat(3,1fr);gap:8px}.switch-btn{border:1px solid var(--line);border-radius:12px;padding:14px;grid-template-columns:28px 1fr}.switch-btn small{display:none}.switch-visual{min-height:390px}.step-cards,.process-grid{grid-template-columns:1fr 1fr}.pricing-grid,.three-info{grid-template-columns:1fr}.price-card>p{min-height:0}.testimonial{grid-template-columns:280px 1fr}.resource-grid{grid-template-columns:1fr 1fr}.cta-card{grid-template-columns:1fr}.inner-visual{min-height:340px}.team-grid{grid-template-columns:1fr}.contact-shell{grid-template-columns:1fr}.contact-shell aside .line-art{opacity:.18}.green-card{grid-template-columns:1fr}.green-card img{grid-column:auto;grid-row:auto}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}.section-head{grid-template-columns:1fr;gap:16px}}
@media(max-width:720px){.shell{width:min(calc(100% - 28px),var(--max))}.brand img{width:148px}.nav-actions{gap:8px}.nav-actions .btn-small{display:none}.section{padding:78px 0}.home-hero{padding-top:42px}h1{font-size:46px}.inner-hero h1{font-size:44px}h2{font-size:37px}.hero-copy>p,.inner-hero p,.center-head>p{font-size:16px}.hero-grid{gap:18px}.hero-art{min-height:250px}.quote-bubble{font-size:11px}.hero-proof{gap:12px;margin-top:25px}.hero-proof span{width:calc(50% - 6px)}.product-stage{width:100%;padding:25px 0 0;margin-top:35px}.dots-field{inset:35px -14px 0}.app-window{border-radius:14px 14px 0 0}.app-body{grid-template-columns:46px 1fr;min-height:280px}.app-side{padding:12px 6px}.app-mark{width:25px;height:25px}.side-line{width:20px}.app-main{padding:12px}.metric-row{gap:5px}.metric-row>div{padding:9px}.metric-row b{font-size:16px}.metric-row em{display:none}.dashboard-grid{grid-template-columns:1fr}.activity-panel{display:none}.chart-panel{min-height:150px}.chart-panel svg{height:110px}.float-note{display:none}.feature-band{padding-bottom:60px}.four-up{grid-template-columns:1fr 1fr;gap:18px}.mini-feature b{font-size:12px}.section-head{margin-bottom:36px}.switch-list{grid-template-columns:1fr}.switch-btn small{display:block}.switch-visual{padding:18px;min-height:360px}.pane-card{padding:19px}.step-cards,.process-grid{grid-template-columns:1fr}.step-card{min-height:0}.step-visual{height:140px}.orbit{transform:scale(.72);margin-left:-18%;margin-right:-18%;height:260px}.testimonial{grid-template-columns:1fr;gap:25px}.portrait-art{height:240px}.testimonial blockquote{font-size:24px}.resource-grid{grid-template-columns:1fr}.contact-shell{border-radius:16px}.contact-shell aside,.contact-form{padding:22px}.field-grid{grid-template-columns:1fr}.cta-card{padding:34px 24px;gap:25px}.cta-actions{display:flex;flex-wrap:wrap}.inner-hero{padding:55px 0}.inner-visual{min-height:300px;padding:22px}.metric-hero{width:90%}.three-info{gap:10px}.info-card{min-height:0}.icon-circle{margin-bottom:25px}.process-card{min-height:0}.process-card>span{margin-bottom:30px}.split-feature .product-stage{padding:0}.pricing-grid{gap:10px}.team-card{grid-template-columns:1fr}.green-impact{padding:28px}.green-impact b{font-size:68px}.legal-card{padding:26px 20px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/3}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{flex-direction:column}.error-page h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition-duration:.01ms!important}}


/* ========================================================================== 
   Scenic photography integration - Vista 2026
   Uses image-backed boxes while preserving the uploaded Zova-inspired layout.
   ========================================================================== */
.photo-box{position:relative;overflow:hidden;background-color:#e8eef7;background-size:cover;background-position:center;background-repeat:no-repeat}
.photo-box:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,20,43,.06),rgba(9,20,43,.48));pointer-events:none;z-index:0}
.photo-box>*{position:relative;z-index:1}
.photo-lake{background-image:url('/assets/img/scenic/lake.webp')}
.photo-clouds{background-image:url('/assets/img/scenic/cloud-mountains.webp')}
.photo-night{background-image:url('/assets/img/scenic/night-mountains.webp')}
.photo-river{background-image:url('/assets/img/scenic/river-valley.webp')}
.photo-summit{background-image:url('/assets/img/scenic/summit.webp')}
.photo-cliff{background-image:url('/assets/img/scenic/cliff.webp')}

/* Home hero: photo remains a contained card/box, not a full-page background. */
.hero-art.photo-box{min-height:335px;border-radius:24px;box-shadow:0 26px 65px rgba(25,39,74,.16);border:1px solid rgba(25,39,74,.08);isolation:isolate}
.hero-art.photo-box:before{background:linear-gradient(135deg,rgba(25,39,74,.04),rgba(25,39,74,.56))}
.hero-art.photo-box .line-art{position:absolute;inset:auto auto -25px -6px;width:70%;opacity:.72;filter:brightness(0) invert(1)}
.hero-art.photo-box .quote-bubble{right:18px;bottom:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:245px}

/* Interactive feature switcher: photo box behind the existing functional panel. */
.switch-visual.photo-box{background-position:center;isolation:isolate;border-color:rgba(25,39,74,.10)}
.switch-visual.photo-box:before{background:linear-gradient(145deg,rgba(25,39,74,.18),rgba(25,39,74,.57))}
.switch-visual.photo-box .pane-card{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 22px 55px rgba(9,20,43,.18)}

/* Step cards: preserve the original 4-step layout and place photos inside its visual boxes. */
.step-visual.photo-step{background-size:cover;background-position:center;border:1px solid rgba(25,39,74,.08)}
.step-visual.photo-step:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,20,43,.06),rgba(9,20,43,.36));pointer-events:none}
.step-visual.photo-step>*{position:relative;z-index:2}
.step-visual.photo-step .photo-label{position:absolute;left:12px;bottom:10px;color:#fff;background:rgba(9,20,43,.55);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 9px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.step-visual.photo-step.target-visual > span:not(.photo-label),.step-visual.photo-step.target-visual > i,.step-visual.photo-step.target-visual > b,
.step-visual.photo-step.list-visual > i,.step-visual.photo-step.mail-visual > svg,.step-visual.photo-step.mail-visual > span:not(.photo-label),
.step-visual.photo-step.graph-visual > i{display:none}

/* Testimonial image box. */
.portrait-art.photo-box{background-position:center;border:1px solid rgba(25,39,74,.08);box-shadow:0 18px 45px rgba(25,39,74,.12)}
.portrait-art.photo-box:before{background:linear-gradient(180deg,rgba(9,20,43,.04),rgba(9,20,43,.30))}
.portrait-art.photo-box .line-art{display:none}

/* Resource cards. */
.resource-art.photo-box{background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(25,39,74,.08)}
.resource-art.photo-box:before{background:linear-gradient(180deg,rgba(9,20,43,.02),rgba(9,20,43,.38))}
.resource-art.photo-box svg{display:none}

/* Contact aside. */
.contact-shell aside.photo-box{background-size:cover;background-position:center;color:#fff}
.contact-shell aside.photo-box:before{background:linear-gradient(145deg,rgba(9,20,43,.66),rgba(9,20,43,.36))}
.contact-shell aside.photo-box .contact-stat{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.36);border-radius:14px;padding:14px;box-shadow:0 12px 28px rgba(9,20,43,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.contact-shell aside.photo-box .contact-stat b{color:var(--navy)}
.contact-shell aside.photo-box .contact-stat small{color:#647083}
.contact-shell aside.photo-box .line-art{display:none}

/* Final dashboard: keep the dashboard functional, use a framed landscape backdrop. */
.dashboard-cta .product-stage.photo-box{padding:34px 44px 0;border-radius:28px 28px 0 0;background-size:cover;background-position:center;isolation:isolate}
.dashboard-cta .product-stage.photo-box:before{background:linear-gradient(145deg,rgba(25,39,74,.20),rgba(25,39,74,.54))}
.dashboard-cta .product-stage.photo-box .dots-field{display:none}
.dashboard-cta .product-stage.photo-box .app-window{box-shadow:0 28px 70px rgba(9,20,43,.30)}

/* Subpages: photo-backed right-side visual boxes with readable glass content. */
.inner-visual.photo-box{background-size:cover;background-position:center;border:1px solid rgba(25,39,74,.08);box-shadow:0 22px 55px rgba(25,39,74,.12);isolation:isolate}
.inner-visual.photo-box:before{background:linear-gradient(145deg,rgba(9,20,43,.10),rgba(9,20,43,.48))}
.inner-visual.photo-box .metric-hero,.inner-visual.photo-box .vertical-board,.inner-visual.photo-box .about-logo-card{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.inner-visual.photo-box .line-art{filter:brightness(0) invert(1);opacity:.55}
.green-impact.photo-box{background-size:cover;background-position:center;border-color:rgba(25,39,74,.08);box-shadow:0 22px 55px rgba(25,39,74,.12);isolation:isolate}
.green-impact.photo-box:before{background:linear-gradient(145deg,rgba(10,49,40,.55),rgba(9,20,43,.18))}
.green-impact.photo-box .leaf,.green-impact.photo-box b,.green-impact.photo-box p{position:relative;z-index:1}
.green-impact.photo-box b,.green-impact.photo-box p{color:#fff}
.green-impact.photo-box .leaf{background:rgba(255,255,255,.90);color:#288866}

/* A compact scenic strip for centered subpage heroes (pricing/contact) without changing URL/content architecture. */
.scenic-strip{width:min(calc(100% - 40px),var(--max));height:220px;margin:0 auto 18px;border-radius:22px;background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(25,39,74,.10)}
.scenic-strip:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,39,74,.08),rgba(25,39,74,.34))}

@media(max-width:1020px){
  .hero-art.photo-box{width:min(100%,560px)}
  .dashboard-cta .product-stage.photo-box{padding-left:24px;padding-right:24px}
}
@media(max-width:720px){
  .hero-art.photo-box{min-height:265px;border-radius:18px}
  .hero-art.photo-box .quote-bubble{right:12px;bottom:12px;max-width:210px}
  .switch-visual.photo-box{min-height:360px}
  .dashboard-cta .product-stage.photo-box{padding:20px 0 0;border-radius:18px 18px 0 0}
  .inner-visual.photo-box{min-height:300px}
  .scenic-strip{width:min(calc(100% - 28px),var(--max));height:160px;border-radius:16px;margin-bottom:0}
}


/* === Unique abstract graphics system === */
.line-art{display:none!important}
.graphic-box{position:relative;overflow:hidden;background-color:#F7FAFD;background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid rgba(25,39,74,.08);isolation:isolate}
.graphic-box:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(25,39,74,.02));pointer-events:none;z-index:0}
.graphic-box>*{position:relative;z-index:1}
.graphic-home-hero{background-image:url('/assets/img/graphics/home-pipeline.svg')}
.graphic-home-intelligence{background-image:url('/assets/img/graphics/home-intelligence.svg')}
.graphic-step-target{background-image:url('/assets/img/graphics/step-target.svg')}
.graphic-step-verify{background-image:url('/assets/img/graphics/step-verify.svg')}
.graphic-step-launch{background-image:url('/assets/img/graphics/step-launch.svg')}
.graphic-step-optimize{background-image:url('/assets/img/graphics/step-optimize.svg')}
.graphic-testimonial{background-image:url('/assets/img/graphics/testimonial-quote.svg')}
.graphic-resource-managed{background-image:url('/assets/img/graphics/resource-managed.svg')}
.graphic-resource-abm{background-image:url('/assets/img/graphics/resource-abm.svg')}
.graphic-resource-event{background-image:url('/assets/img/graphics/resource-event.svg')}
.graphic-home-contact{background-image:url('/assets/img/graphics/home-contact.svg')}
.graphic-managed{background-image:url('/assets/img/graphics/managed-service.svg')}
.graphic-event{background-image:url('/assets/img/graphics/event-acquisition.svg')}
.graphic-abm{background-image:url('/assets/img/graphics/account-based.svg')}
.graphic-platform{background-image:url('/assets/img/graphics/platform.svg')}
.graphic-agency{background-image:url('/assets/img/graphics/marketing-agencies.svg')}
.graphic-saas{background-image:url('/assets/img/graphics/saas-technology.svg')}
.graphic-consulting{background-image:url('/assets/img/graphics/consulting.svg')}
.graphic-startup{background-image:url('/assets/img/graphics/startups.svg')}
.graphic-about{background-image:url('/assets/img/graphics/about.svg')}
.graphic-pricing{background-image:url('/assets/img/graphics/pricing.svg')}
.graphic-contact{background-image:url('/assets/img/graphics/contact.svg')}
.graphic-green{background-image:url('/assets/img/graphics/green.svg')}
.hero-art.graphic-box{min-height:335px;border-radius:24px;box-shadow:0 26px 65px rgba(25,39,74,.13)}
.hero-art.graphic-box .quote-bubble{right:18px;bottom:18px;background:rgba(255,255,255,.95);max-width:245px}
.switch-visual.graphic-box{background-position:center;min-height:460px}
.switch-visual.graphic-box .pane-card{background:rgba(255,255,255,.94);box-shadow:0 22px 55px rgba(25,39,74,.12)}
.step-visual.graphic-box{background-size:cover;background-position:center}
.step-visual.graphic-box>span:not(.photo-label),.step-visual.graphic-box>i,.step-visual.graphic-box>b,.step-visual.graphic-box>svg{display:none}
.step-visual.graphic-box .photo-label{display:block!important;position:absolute;left:12px;bottom:10px;background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.portrait-art.graphic-box{background-size:cover;background-position:center;box-shadow:0 18px 45px rgba(25,39,74,.10)}
.resource-art.graphic-box{background-size:cover;background-position:center}
.resource-art.graphic-box svg{width:34px;height:34px;stroke:var(--navy);fill:none;background:rgba(255,255,255,.92);padding:8px;border-radius:12px;box-sizing:content-box;margin:16px}
.contact-shell aside.graphic-box{color:inherit;background-position:center}
.contact-shell aside.graphic-box .contact-stat{background:rgba(255,255,255,.94);border:1px solid rgba(25,39,74,.09);border-radius:14px;padding:14px;box-shadow:0 12px 28px rgba(25,39,74,.08)}
.contact-shell aside.graphic-box .contact-stat b{color:var(--navy)}
.contact-shell aside.graphic-box .contact-stat small{color:#647083}
.inner-visual.graphic-box{background-size:cover;background-position:center;box-shadow:0 22px 55px rgba(25,39,74,.10)}
.inner-visual.graphic-box .metric-hero,.inner-visual.graphic-box .vertical-board,.inner-visual.graphic-box .about-logo-card{background:rgba(255,255,255,.95)}
.green-impact.graphic-box{background-size:cover;background-position:center;border-color:#D8EEE2;box-shadow:0 22px 55px rgba(25,39,74,.08)}
.green-impact.graphic-box b,.green-impact.graphic-box p{color:var(--navy)}
.scenic-strip.graphic-box{width:min(calc(100% - 40px),var(--max));height:220px;margin:0 auto 18px;border-radius:22px;box-shadow:0 20px 50px rgba(25,39,74,.09)}
@media(max-width:720px){.hero-art.graphic-box{min-height:265px;border-radius:18px}.switch-visual.graphic-box{min-height:360px}.inner-visual.graphic-box{min-height:300px}.scenic-strip.graphic-box{width:min(calc(100% - 28px),var(--max));height:160px;border-radius:16px;margin-bottom:0}}


/* === Scenic Vista imagery + non-cropping graphic composition === */
.graphic-box{
  --graphic:none;
  --photo:none;
  background-image:linear-gradient(135deg,rgba(9,20,43,.10),rgba(9,20,43,.28)),var(--photo)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  position:relative;
  overflow:hidden;
}
.graphic-box:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(25,39,74,.10))!important;
  z-index:0;
  pointer-events:none;
}
.graphic-box:after{
  content:"";
  position:absolute;
  inset:clamp(10px,2.2vw,26px);
  background-image:var(--graphic);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
  pointer-events:none;
}
.graphic-box>*{position:relative;z-index:2}

/* Individual page/section art. Graphics use contain so no artwork is clipped. */
.graphic-home-hero{--graphic:url('/assets/img/graphics/home-pipeline.svg');--photo:url('/assets/img/backgrounds/vista-lake.webp')}
.graphic-home-intelligence{--graphic:url('/assets/img/graphics/home-intelligence.svg');--photo:url('/assets/img/backgrounds/vista-clouds.webp')}
.graphic-step-target{--graphic:url('/assets/img/graphics/step-target.svg');--photo:url('/assets/img/backgrounds/vista-river.webp')}
.graphic-step-verify{--graphic:url('/assets/img/graphics/step-verify.svg');--photo:url('/assets/img/backgrounds/vista-lake.webp')}
.graphic-step-launch{--graphic:url('/assets/img/graphics/step-launch.svg');--photo:url('/assets/img/backgrounds/vista-night.webp')}
.graphic-step-optimize{--graphic:url('/assets/img/graphics/step-optimize.svg');--photo:url('/assets/img/backgrounds/vista-summit.webp')}
.graphic-testimonial{--graphic:url('/assets/img/graphics/testimonial-quote.svg');--photo:url('/assets/img/backgrounds/vista-summit.webp')}
.graphic-resource-managed{--graphic:url('/assets/img/graphics/resource-managed.svg');--photo:url('/assets/img/backgrounds/vista-river.webp')}
.graphic-resource-abm{--graphic:url('/assets/img/graphics/resource-abm.svg');--photo:url('/assets/img/backgrounds/vista-lake.webp')}
.graphic-resource-event{--graphic:url('/assets/img/graphics/resource-event.svg');--photo:url('/assets/img/backgrounds/vista-clouds.webp')}
.graphic-home-contact{--graphic:url('/assets/img/graphics/home-contact.svg');--photo:url('/assets/img/backgrounds/vista-cliff.webp')}
.graphic-managed{--graphic:url('/assets/img/graphics/managed-service.svg');--photo:url('/assets/img/backgrounds/vista-lake.webp')}
.graphic-event{--graphic:url('/assets/img/graphics/event-acquisition.svg');--photo:url('/assets/img/backgrounds/vista-river.webp')}
.graphic-abm{--graphic:url('/assets/img/graphics/account-based.svg');--photo:url('/assets/img/backgrounds/vista-clouds.webp')}
.graphic-platform{--graphic:url('/assets/img/graphics/platform.svg');--photo:url('/assets/img/backgrounds/vista-night.webp')}
.graphic-agency{--graphic:url('/assets/img/graphics/marketing-agencies.svg');--photo:url('/assets/img/backgrounds/vista-cliff.webp')}
.graphic-saas{--graphic:url('/assets/img/graphics/saas-technology.svg');--photo:url('/assets/img/backgrounds/vista-night.webp')}
.graphic-consulting{--graphic:url('/assets/img/graphics/consulting.svg');--photo:url('/assets/img/backgrounds/vista-lake.webp')}
.graphic-startup{--graphic:url('/assets/img/graphics/startups.svg');--photo:url('/assets/img/backgrounds/vista-summit.webp')}
.graphic-about{--graphic:url('/assets/img/graphics/about.svg');--photo:url('/assets/img/backgrounds/vista-summit.webp')}
.graphic-pricing{--graphic:url('/assets/img/graphics/pricing.svg');--photo:url('/assets/img/backgrounds/vista-river.webp')}
.graphic-contact{--graphic:url('/assets/img/graphics/contact.svg');--photo:url('/assets/img/backgrounds/vista-lake.webp')}
.graphic-green{--graphic:url('/assets/img/graphics/green.svg');--photo:url('/assets/img/backgrounds/vista-lake.webp')}

/* Keep detailed foreground UI crisp and readable. */
.hero-art.graphic-box:after{inset:18px 22px 24px;opacity:.98}
.switch-visual.graphic-box:after{inset:22px;opacity:.86}
.inner-visual.graphic-box:after{inset:22px;opacity:.90}
.portrait-art.graphic-box:after{inset:14px;opacity:.92}
.resource-art.graphic-box:after{inset:10px;opacity:.94}
.contact-shell aside.graphic-box:after{inset:22px;opacity:.78}
.green-impact.graphic-box:after{inset:18px;opacity:.76}
.scenic-strip.graphic-box:after{inset:12px 30px;background-size:contain;opacity:.86}

/* Step graphics were previously cropped by background-size:cover. */
.step-visual.graphic-box{
  background-image:linear-gradient(135deg,rgba(9,20,43,.10),rgba(9,20,43,.26)),var(--photo)!important;
  background-size:cover!important;
  background-position:center!important;
}
.step-visual.graphic-box:after{inset:8px;background-size:contain!important;opacity:.95}

/* Give page graphics enough room at every breakpoint. */
.hero-art.graphic-box{aspect-ratio:1.12/1;min-height:360px}
.inner-visual.graphic-box{aspect-ratio:1.12/1;min-height:390px}
.switch-visual.graphic-box{min-height:500px}
.portrait-art.graphic-box{aspect-ratio:4/5;min-height:340px}
.resource-art.graphic-box{min-height:190px}
.scenic-strip.graphic-box{height:260px}

/* Glass cards keep text legible over image-backed graphics. */
.hero-art.graphic-box .quote-bubble,
.switch-visual.graphic-box .pane-card,
.inner-visual.graphic-box .metric-hero,
.inner-visual.graphic-box .vertical-board,
.inner-visual.graphic-box .about-logo-card,
.contact-shell aside.graphic-box .contact-stat{
  background:rgba(255,255,255,.95)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.green-impact.graphic-box b,.green-impact.graphic-box p{color:#fff!important;text-shadow:0 1px 10px rgba(9,20,43,.35)}
.green-impact.graphic-box .leaf{background:rgba(255,255,255,.92)!important}

@media(max-width:1020px){
  .hero-art.graphic-box{aspect-ratio:1.25/1;min-height:340px}
  .inner-visual.graphic-box{aspect-ratio:1.25/1;min-height:360px}
  .graphic-box:after{inset:12px 16px}
}
@media(max-width:720px){
  .hero-art.graphic-box{aspect-ratio:1/1;min-height:300px}
  .inner-visual.graphic-box{aspect-ratio:1/1;min-height:320px}
  .switch-visual.graphic-box{min-height:390px}
  .portrait-art.graphic-box{min-height:300px}
  .resource-art.graphic-box{min-height:165px}
  .scenic-strip.graphic-box{height:190px}
  .graphic-box:after{inset:8px 10px}
  .hero-art.graphic-box:after,.inner-visual.graphic-box:after{inset:10px}
}

/* === Final graphic-fit pass: 2026-09-04 ===
   Keeps all SVG artwork fully inside its frame and reveals more of the Vista scenic backgrounds. */

/* Softer image tint so the scenic Vista backgrounds read more clearly. */
.graphic-box{
  background-image:linear-gradient(135deg,rgba(9,20,43,.04),rgba(9,20,43,.14)),var(--photo)!important;
  background-size:cover!important;
  background-position:center!important;
}
.graphic-box:before{
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(25,39,74,.045))!important;
}

/* Give every foreground graphic a true safe area.  The 10% inset plus contain prevents
   any SVG edge, label, icon, or card from being cropped regardless of box ratio. */
.graphic-box:after{
  inset:10%!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  opacity:.76!important;
}

/* Primary hero and service graphics can be slightly stronger but stay inside the safe area. */
.hero-art.graphic-box:after{inset:9%!important;opacity:.78!important}
.inner-visual.graphic-box:after{inset:10%!important;opacity:.72!important}
.portrait-art.graphic-box:after{inset:10%!important;opacity:.70!important}
.resource-art.graphic-box:after{inset:12%!important;opacity:.72!important}
.contact-shell aside.graphic-box:after{inset:11%!important;opacity:.60!important}
.green-impact.graphic-box:after{inset:10%!important;opacity:.58!important}
.scenic-strip.graphic-box:after{inset:14% 8%!important;opacity:.66!important;background-size:contain!important}
.step-visual.graphic-box:after{inset:9%!important;opacity:.72!important;background-size:contain!important}

/* The middle homepage campaign-intelligence graphic is intentionally more translucent
   so the Vista mountain background remains visible through the composition. */
.switch-visual.graphic-box:after,
.graphic-home-intelligence:after{inset:9%!important;opacity:.46!important}
.switch-visual.graphic-box .pane-card{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

/* Also soften the center card in the three-card service row. */
.graphic-resource-abm:after{opacity:.54!important}

/* More room for the artwork before responsive wrapping begins. */
.hero-art.graphic-box{min-height:400px;aspect-ratio:1.18/1}
.inner-visual.graphic-box{min-height:430px;aspect-ratio:1.18/1}
.switch-visual.graphic-box{min-height:530px}
.portrait-art.graphic-box{min-height:370px}
.resource-art.graphic-box{min-height:205px}
.scenic-strip.graphic-box{height:275px}
.step-visual.graphic-box{min-height:168px}

/* On tablets, retain generous padding around every SVG instead of allowing it to touch edges. */
@media(max-width:1020px){
  .graphic-box:after{inset:9%!important}
  .hero-art.graphic-box{min-height:365px;aspect-ratio:1.2/1}
  .inner-visual.graphic-box{min-height:390px;aspect-ratio:1.2/1}
  .switch-visual.graphic-box{min-height:470px}
  .resource-art.graphic-box{min-height:190px}
  .step-visual.graphic-box{min-height:160px}
  .switch-visual.graphic-box:after,.graphic-home-intelligence:after{opacity:.44!important}
}

/* Mobile: preserve the entire graphic with extra breathing room and no horizontal clipping. */
@media(max-width:720px){
  .graphic-box{background-position:center!important}
  .graphic-box:after{inset:8%!important;background-size:contain!important}
  .hero-art.graphic-box{min-height:315px;aspect-ratio:1/1}
  .inner-visual.graphic-box{min-height:345px;aspect-ratio:1/1}
  .switch-visual.graphic-box{min-height:420px}
  .portrait-art.graphic-box{min-height:320px}
  .resource-art.graphic-box{min-height:180px}
  .scenic-strip.graphic-box{height:205px}
  .step-visual.graphic-box{min-height:170px}
  .switch-visual.graphic-box:after,.graphic-home-intelligence:after{inset:8%!important;opacity:.42!important}
  .switch-visual.graphic-box .pane-card{background:rgba(255,255,255,.86)!important}
}

/* Very small phones: artwork is always scaled down rather than clipped. */
@media(max-width:420px){
  .graphic-box:after{inset:9%!important}
  .hero-art.graphic-box{min-height:300px}
  .inner-visual.graphic-box{min-height:330px}
  .resource-art.graphic-box{min-height:170px}
  .step-visual.graphic-box{min-height:165px}
}


/* === Hard fix for clipped graphics: 2026-09-05 ===
   Adds extra SVG safe area plus stronger CSS constraints so graphics never touch frame edges. */
.graphic-box{
  overflow: visible !important;
  isolation: isolate;
}
.graphic-box:after{
  inset: 14% !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.hero-art.graphic-box:after{inset:14% !important; opacity:.74 !important}
.inner-visual.graphic-box:after{inset:14% !important; opacity:.70 !important}
.switch-visual.graphic-box:after,
.graphic-home-intelligence:after{inset:14% !important; opacity:.40 !important}
.portrait-art.graphic-box:after{inset:14% !important; opacity:.68 !important}
.resource-art.graphic-box:after{inset:15% !important; opacity:.70 !important}
.contact-shell aside.graphic-box:after{inset:14% !important; opacity:.58 !important}
.green-impact.graphic-box:after{inset:14% !important; opacity:.56 !important}
.scenic-strip.graphic-box:after{inset:16% 11% !important; opacity:.64 !important}
.step-visual.graphic-box:after{inset:13% !important; opacity:.70 !important}

.hero-art.graphic-box{min-height:430px !important; aspect-ratio:1.22/1 !important}
.inner-visual.graphic-box{min-height:450px !important; aspect-ratio:1.22/1 !important}
.switch-visual.graphic-box{min-height:560px !important}
.portrait-art.graphic-box{min-height:390px !important}
.resource-art.graphic-box{min-height:220px !important}
.step-visual.graphic-box{min-height:176px !important}
.scenic-strip.graphic-box{height:290px !important}

/* Keep overlay cards fully inside the frame. */
.hero-art.graphic-box .quote-bubble{
  left: 18px !important;
  right: 18px !important;
  width: auto !important;
  max-width: calc(100% - 36px) !important;
  bottom: 18px !important;
}
.switch-visual.graphic-box .pane-card{
  background: rgba(255,255,255,.80) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.graphic-resource-abm:after{opacity:.50 !important}

@media (max-width: 1020px){
  .graphic-box:after{inset:12% !important}
  .hero-art.graphic-box{min-height:385px !important; aspect-ratio:1.18/1 !important}
  .inner-visual.graphic-box{min-height:405px !important; aspect-ratio:1.18/1 !important}
  .switch-visual.graphic-box{min-height:500px !important}
  .resource-art.graphic-box{min-height:200px !important}
  .step-visual.graphic-box{min-height:168px !important}
  .switch-visual.graphic-box:after,
  .graphic-home-intelligence:after{inset:13% !important; opacity:.38 !important}
}

@media (max-width: 720px){
  .graphic-box:after{inset:11% !important}
  .hero-art.graphic-box{min-height:330px !important; aspect-ratio:1/1 !important}
  .inner-visual.graphic-box{min-height:355px !important; aspect-ratio:1/1 !important}
  .switch-visual.graphic-box{min-height:435px !important}
  .portrait-art.graphic-box{min-height:325px !important}
  .resource-art.graphic-box{min-height:184px !important}
  .step-visual.graphic-box{min-height:172px !important}
  .scenic-strip.graphic-box{height:210px !important}
  .hero-art.graphic-box .quote-bubble{
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100% - 24px) !important;
    bottom: 12px !important;
  }
  .switch-visual.graphic-box:after,
  .graphic-home-intelligence:after{inset:12% !important; opacity:.36 !important}
}

@media (max-width: 420px){
  .graphic-box:after{inset:10% !important}
  .hero-art.graphic-box{min-height:315px !important}
  .inner-visual.graphic-box{min-height:338px !important}
  .resource-art.graphic-box{min-height:174px !important}
}


/* ==========================================================================
   Responsive hardening + accessibility pass — 2026-09-04
   ========================================================================== */
html{width:100%;max-width:100%;overflow-x:hidden}
body{width:100%;max-width:100%;overflow-x:hidden}
*,*::before,*::after{min-width:0}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
button,a,input,select,textarea{max-width:100%}
h1,h2,h3,h4,p,a,button,label,small,span{overflow-wrap:anywhere}
.shell,.nav-shell,.hero-grid,.inner-hero-grid,.feature-switcher,.section-head,.split-feature,.faq-layout,.contact-shell,.testimonial,.footer-grid,.team-grid,.pricing-grid,.resource-grid,.step-cards,.process-grid,.three-info{min-width:0}
.hero-grid>* ,.inner-hero-grid>* ,.feature-switcher>* ,.section-head>* ,.split-feature>* ,.faq-layout>* ,.contact-shell>* ,.testimonial>* ,.footer-grid>*{min-width:0}
.btn{white-space:normal;text-align:center;line-height:1.25}
.site-header{width:100%}
.mobile-panel{max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
.mobile-panel nav{padding-bottom:max(24px,env(safe-area-inset-bottom))}
.contact-form textarea{resize:vertical;min-height:120px}
.graphic-box{overflow:hidden!important}
.graphic-box:after{background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important}
.hero-art.graphic-box .quote-bubble{top:auto!important;left:18px!important;right:18px!important;bottom:18px!important;width:auto!important;max-width:calc(100% - 36px)!important}

/* Large laptops / smaller desktop screens */
@media(max-width:1180px){
  :root{--max:1080px}
  .desktop-nav{gap:20px}
  .nav-actions{gap:12px;margin-left:8px}
  .hero-grid{gap:52px}
  .section{padding:96px 0}
  .section-head{gap:42px}
  .feature-switcher,.split-feature{gap:48px}
  .faq-layout{gap:52px}
  .footer-grid{gap:36px}
  .product-stage{padding-left:44px;padding-right:44px}
}

/* Tablet / mobile navigation */
@media(max-width:1024px){
  .desktop-nav,.login-link{display:none!important}
  .menu-toggle{display:block!important;flex:0 0 42px}
  .mobile-panel.open{display:block!important}
  .nav-shell{height:72px;gap:14px}
  .brand img{width:clamp(150px,24vw,178px)}
  .nav-actions{margin-left:auto}
  .hero-grid,.inner-hero-grid{grid-template-columns:1fr!important;gap:34px!important}
  .hero-copy{max-width:760px}
  .hero-art.graphic-box,.inner-visual.graphic-box{width:min(100%,680px);margin-inline:auto}
  .section-head{grid-template-columns:1fr!important;gap:16px!important}
  .feature-switcher,.faq-layout,.split-feature{grid-template-columns:1fr!important;gap:38px!important}
  .switch-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .switch-btn{grid-template-columns:28px minmax(0,1fr);padding:14px}
  .step-cards,.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .testimonial{grid-template-columns:minmax(220px,280px) minmax(0,1fr)!important;gap:34px}
  .contact-shell{grid-template-columns:1fr!important;max-width:760px}
  .pricing-grid,.three-info{grid-template-columns:1fr!important;max-width:760px;margin-inline:auto}
  .team-grid{grid-template-columns:1fr!important}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr!important;gap:30px}
  .footer-grid>div:last-child{grid-column:2/4}
  .cta-card{grid-template-columns:1fr!important;gap:28px;padding:46px}
  .product-stage{width:min(calc(100% - 28px),1000px);padding-left:24px;padding-right:24px}
  .graphic-box:after{inset:12%!important}
  .switch-visual.graphic-box:after,.graphic-home-intelligence:after{inset:13%!important;opacity:.38!important}
}

/* Small tablet */
@media(max-width:820px){
  .section{padding:84px 0}
  .feature-band{padding-bottom:70px}
  .four-up{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .testimonial{grid-template-columns:1fr!important;max-width:680px}
  .portrait-art.graphic-box{width:min(100%,520px);margin-inline:auto;aspect-ratio:16/10!important;min-height:300px!important}
  .footer-grid{grid-template-columns:1fr 1fr!important}
  .footer-brand{grid-column:1/-1!important}
  .footer-grid>div:last-child{grid-column:auto!important}
  .green-card{grid-template-columns:1fr!important}
  .green-card img{grid-column:auto!important;grid-row:auto!important;justify-self:start}
}

/* Phones */
@media(max-width:720px){
  .shell{width:min(calc(100% - 28px),var(--max))}
  .section{padding:72px 0}
  .home-hero{padding:38px 0 24px}
  .inner-hero{padding:48px 0}
  h1{font-size:clamp(36px,10.5vw,46px);line-height:1.02}
  .inner-hero h1{font-size:clamp(34px,10vw,44px)}
  h2{font-size:clamp(30px,8.5vw,38px)}
  h3{font-size:clamp(20px,5.5vw,24px)}
  .hero-copy>p,.inner-hero p,.center-head>p,.section-head>p{font-size:16px}
  .hero-grid,.inner-hero-grid{gap:24px!important}
  .hero-proof{gap:10px;margin-top:24px}
  .hero-proof span{width:calc(50% - 5px)}
  .button-row{gap:10px}
  .btn{min-height:46px;padding:12px 16px}
  .switch-list{grid-template-columns:1fr!important}
  .switch-btn small{display:block!important}
  .switch-visual{padding:16px}
  .pane-card{padding:18px;max-width:100%}
  .pane-card h3{font-size:23px;margin-bottom:20px}
  .person-card{align-items:flex-start;flex-wrap:wrap}
  .person-card em{margin-left:46px}
  .step-cards,.process-grid,.resource-grid{grid-template-columns:1fr!important}
  .step-card,.process-card{min-height:0}
  .contact-shell{border-radius:16px}
  .contact-shell aside,.contact-form{padding:22px}
  .field-grid{grid-template-columns:1fr!important}
  .contact-form input,.contact-form select,.contact-form textarea{font-size:16px}
  .cta-card{padding:32px 22px!important;border-radius:20px}
  .cta-actions{display:grid!important;grid-template-columns:1fr;gap:10px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .legal-card{padding:28px 20px}
  .product-stage{width:100%;padding:22px 0 0;margin-top:30px}
  .app-window{border-radius:14px 14px 0 0}
  .app-body{grid-template-columns:46px minmax(0,1fr)}
  .app-main{padding:12px}
  .metric-row{gap:6px}
  .metric-row>div{padding:9px}
  .metric-row b{font-size:16px}
  .metric-row em{display:none}
  .dashboard-grid{grid-template-columns:1fr!important}
  .activity-panel{display:none}
  .chart-panel{min-height:150px;padding:10px}
  .chart-panel svg{height:110px}
  .float-note{display:none}
  .graphic-box:after{inset:11%!important}
  .hero-art.graphic-box,.inner-visual.graphic-box{width:100%;max-width:620px}
  .hero-art.graphic-box .quote-bubble{left:12px!important;right:12px!important;bottom:12px!important;max-width:calc(100% - 24px)!important}
  .orbit{transform:none!important;margin:16px auto 0!important;max-width:520px;width:100%;height:auto!important;padding:106px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .orbit:before,.orbit:after{display:none}
  .orbit-center{top:48px;left:50%;width:76px;height:76px;border-radius:22px}
  .orbit-center img{width:44px}
  .orbit-chip{position:static!important;text-align:center;padding:10px 8px}
}

/* Narrow phones */
@media(max-width:540px){
  .nav-shell{height:68px}
  .brand img{width:142px}
  .menu-toggle{width:40px;height:40px}
  .mobile-panel{max-height:calc(100dvh - 68px)}
  .nav-actions .btn-small{display:none!important}
  .four-up{grid-template-columns:1fr!important}
  .hero-proof{display:grid;grid-template-columns:1fr}
  .hero-proof span{width:100%}
  .button-row .btn{width:100%}
  .spark-grid{grid-template-columns:1fr 1fr}
  .metric-row{grid-template-columns:1fr 1fr}
  .metric-row>div:last-child{grid-column:1/-1}
  .app-bar{padding:0 10px;gap:8px}
  .app-title{display:none}
  .live-pill{margin-left:auto}
  .app-body{grid-template-columns:1fr}
  .app-side{display:none}
  .footer-grid{grid-template-columns:1fr!important}
  .footer-brand{grid-column:auto!important}
  .footer-grid>div:last-child{grid-column:auto!important}
  .footer-brand img{width:min(220px,100%)}
  .green-impact b{font-size:58px}
  .graphic-box:after{inset:10%!important}
  .resource-art.graphic-box{min-height:180px!important}
  .scenic-strip.graphic-box{height:190px!important}
  .orbit{grid-template-columns:1fr}
}

@media(max-width:380px){
  .shell{width:min(calc(100% - 22px),var(--max))}
  h1{font-size:34px}.inner-hero h1{font-size:33px}h2{font-size:29px}
  .contact-shell aside,.contact-form{padding:18px}
  .pane-card{padding:15px}
  .graphic-box:after{inset:9%!important}
}

@media(hover:none){
  .btn:hover{transform:none}
  .nav-drop:hover .nav-menu{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px)}
  .nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
}

/* ========================================================================
   Final hero/graphic composition fix — 2026-09-05
   Direct media elements replace pseudo-background foreground artwork.
   This prevents clipping at every breakpoint.
   ======================================================================== */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* New generated hero/composite artwork is always displayed in full. */
.composite-hero-media{
  width:min(100%,760px);
  margin-inline:auto;
  border-radius:28px;
  overflow:hidden;
  background:#f7f9fc;
  box-shadow:0 24px 65px rgba(25,39,74,.13);
}
.composite-hero-media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
.hero-grid .composite-hero-media{align-self:center}
.inner-hero-grid .composite-hero-media{align-self:center}

/* The generated Step 01 card includes its own complete framing and copy. */
.composite-step-card{
  background:#fff;
  border:1px solid #E8ECF1;
  border-radius:18px;
  padding:0!important;
  overflow:hidden;
  min-height:0!important;
}
.composite-step-card>img{display:block;width:100%;height:auto;object-fit:contain}

/* Remaining graphic boxes: scenic background stays on the box; SVG becomes a real
   contained child image with generous padding so no part of the art can be clipped. */
.graphic-box{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
}
.graphic-box:after{display:none!important;content:none!important}
.safe-graphic{
  position:absolute!important;
  z-index:1!important;
  inset:12%!important;
  width:76%!important;
  height:76%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  pointer-events:none!important;
  opacity:.68!important;
  overflow:visible!important;
}
.graphic-box>*:not(.safe-graphic){position:relative;z-index:2}

/* Middle intelligence panel stays intentionally lighter to reveal the Vista background. */
.graphic-home-intelligence .safe-graphic,
.switch-visual.graphic-box .safe-graphic{opacity:.34!important;inset:14%!important;width:72%!important;height:72%!important}
.switch-visual.graphic-box .pane-card{background:rgba(255,255,255,.79)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}

/* Resource + small-card artwork needs slightly more safe area. */
.resource-art.graphic-box .safe-graphic{inset:16%!important;width:68%!important;height:68%!important;opacity:.62!important}
.portrait-art.graphic-box .safe-graphic{inset:14%!important;width:72%!important;height:72%!important;opacity:.60!important}
.contact-shell aside.graphic-box .safe-graphic{inset:16%!important;width:68%!important;height:68%!important;opacity:.42!important}
.green-impact.graphic-box .safe-graphic{inset:15%!important;width:70%!important;height:70%!important;opacity:.40!important}

/* The remaining process graphics no longer show the old CSS decorations that caused
   the left-edge clipping in the user's screenshot. */
.step-visual.graphic-box>i,
.step-visual.graphic-box>b,
.step-visual.graphic-box>svg,
.step-visual.graphic-box>span:not(.photo-label){display:none!important}
.step-visual.graphic-box .safe-graphic{inset:15%!important;width:70%!important;height:70%!important;opacity:.74!important}
.step-visual.graphic-box .photo-label{
  display:block!important;
  position:absolute!important;
  left:12px!important;
  bottom:10px!important;
  right:auto!important;
  top:auto!important;
  z-index:3!important;
  background:rgba(255,255,255,.95)!important;
  color:var(--navy)!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  padding:6px 9px!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* Subpage cards stay fully inside the scenic frame. */
.inner-visual.graphic-box .metric-hero,
.inner-visual.graphic-box .vertical-board,
.inner-visual.graphic-box .about-logo-card{
  width:min(84%,520px)!important;
  max-width:calc(100% - 36px)!important;
  margin:auto!important;
}

/* Ensure scenic backgrounds themselves are never stretched strangely. */
.graphic-box{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}

@media(max-width:1024px){
  .composite-hero-media{width:min(100%,720px)}
  .safe-graphic{inset:13%!important;width:74%!important;height:74%!important}
  .graphic-home-intelligence .safe-graphic,.switch-visual.graphic-box .safe-graphic{inset:15%!important;width:70%!important;height:70%!important}
}

@media(max-width:720px){
  .composite-hero-media{width:100%;border-radius:20px}
  .safe-graphic{inset:14%!important;width:72%!important;height:72%!important}
  .resource-art.graphic-box .safe-graphic{inset:18%!important;width:64%!important;height:64%!important}
  .step-visual.graphic-box .safe-graphic{inset:17%!important;width:66%!important;height:66%!important}
  .inner-visual.graphic-box .metric-hero,
  .inner-visual.graphic-box .vertical-board,
  .inner-visual.graphic-box .about-logo-card{width:min(88%,520px)!important;max-width:calc(100% - 24px)!important}
}

@media(max-width:420px){
  .composite-hero-media{border-radius:16px}
  .safe-graphic{inset:15%!important;width:70%!important;height:70%!important}
}


/* ============================================================================
   FINAL VISUAL AUDIT SYSTEM — 2026-09-05
   Isolated from the legacy graphic-box rules. Every graphic uses a real <img>
   with object-fit:contain; scenic images are backgrounds only.
   ============================================================================ */
.visual-frame{
  --scene:none;
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  width:100%!important;
  max-width:100%!important;
  background-color:#edf4fb!important;
  background-image:linear-gradient(135deg,rgba(25,39,74,.10),rgba(25,39,74,.28)),var(--scene)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border:1px solid rgba(25,39,74,.08)!important;
  box-shadow:0 18px 48px rgba(25,39,74,.10)!important;
}
.visual-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(25,39,74,.08));
  pointer-events:none;
}
.visual-frame .visual-fg{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:66%!important;
  height:66%!important;
  max-width:66%!important;
  max-height:66%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  z-index:1!important;
  opacity:.64!important;
  pointer-events:none!important;
}
.visual-frame>*:not(.visual-fg){position:relative;z-index:2}

/* Scenic background mapping */
.visual-frame.graphic-home-intelligence{--scene:url('/assets/img/backgrounds/vista-clouds.webp')}
.visual-frame.graphic-step-verify{--scene:url('/assets/img/backgrounds/vista-lake.webp')}
.visual-frame.graphic-step-launch{--scene:url('/assets/img/backgrounds/vista-night.webp')}
.visual-frame.graphic-step-optimize{--scene:url('/assets/img/backgrounds/vista-summit.webp')}
.visual-frame.graphic-testimonial{--scene:url('/assets/img/backgrounds/vista-summit.webp')}
.visual-frame.graphic-resource-managed{--scene:url('/assets/img/backgrounds/vista-river.webp')}
.visual-frame.graphic-resource-abm{--scene:url('/assets/img/backgrounds/vista-lake.webp')}
.visual-frame.graphic-resource-event{--scene:url('/assets/img/backgrounds/vista-clouds.webp')}
.visual-frame.graphic-home-contact{--scene:url('/assets/img/backgrounds/vista-cliff.webp')}
.visual-frame.graphic-about{--scene:url('/assets/img/backgrounds/vista-summit.webp')}
.visual-frame.graphic-abm{--scene:url('/assets/img/backgrounds/vista-clouds.webp')}
.visual-frame.graphic-consulting{--scene:url('/assets/img/backgrounds/vista-lake.webp')}
.visual-frame.graphic-event{--scene:url('/assets/img/backgrounds/vista-river.webp')}
.visual-frame.graphic-agency{--scene:url('/assets/img/backgrounds/vista-cliff.webp')}
.visual-frame.graphic-saas{--scene:url('/assets/img/backgrounds/vista-night.webp')}
.visual-frame.graphic-startup{--scene:url('/assets/img/backgrounds/vista-summit.webp')}
.visual-frame.graphic-platform{--scene:url('/assets/img/backgrounds/vista-night.webp')}
.visual-frame.graphic-contact{--scene:url('/assets/img/backgrounds/vista-cliff.webp')}
.visual-frame.graphic-pricing{--scene:url('/assets/img/backgrounds/vista-river.webp')}
.visual-frame.graphic-green{--scene:url('/assets/img/backgrounds/vista-lake.webp')}

/* Main generated hero images: never crop or use object-fit:cover. */
.composite-hero-media{
  width:min(100%,760px)!important;
  max-width:100%!important;
  margin-inline:auto!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#f7f9fc!important;
  box-shadow:0 22px 60px rgba(25,39,74,.12)!important;
  border:1px solid rgba(25,39,74,.08)!important;
}
.composite-hero-media img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Homepage process cards */
.step-cards{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
}
.step-card{
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
}
.step-photo-visual{
  position:relative;
  width:100%;
  height:auto!important;
  aspect-ratio:940/615;
  border-radius:13px;
  overflow:hidden;
  margin:8px 0 22px;
  background:#eef3f8;
}
.step-photo-visual img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}
.step-visual.visual-frame{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  margin:8px 0 22px!important;
  padding:0!important;
  border-radius:13px!important;
}
.step-visual.visual-frame .visual-fg{
  width:60%!important;height:60%!important;max-width:60%!important;max-height:60%!important;opacity:.88!important;
}
.step-visual.visual-frame .photo-label{
  position:absolute!important;
  left:12px!important;
  right:auto!important;
  bottom:10px!important;
  top:auto!important;
  z-index:3!important;
  display:inline-flex!important;
  width:auto!important;
  max-width:calc(100% - 24px)!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--navy)!important;
  border:1px solid rgba(25,39,74,.10)!important;
  border-radius:999px!important;
  padding:6px 9px!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* Feature intelligence: foreground graphic is deliberately lighter. */
.switch-visual.visual-frame{
  min-height:480px!important;
  padding:clamp(18px,3vw,42px)!important;
  display:grid!important;
  place-items:center!important;
  border-radius:24px!important;
}
.switch-visual.visual-frame .visual-fg{
  width:72%!important;height:72%!important;max-width:72%!important;max-height:72%!important;opacity:.22!important;
}
.switch-visual.visual-frame .pane-card{
  width:min(100%,530px)!important;
  background:rgba(255,255,255,.84)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* Subpage hero visuals: background + translucent graphic + centered content card. */
.inner-visual.visual-frame{
  min-height:420px!important;
  aspect-ratio:6/5!important;
  padding:clamp(18px,3vw,30px)!important;
  display:grid!important;
  place-items:center!important;
  border-radius:24px!important;
}
.inner-visual.visual-frame .visual-fg{
  width:68%!important;height:68%!important;max-width:68%!important;max-height:68%!important;opacity:.30!important;
}
.inner-visual.visual-frame .metric-hero,
.inner-visual.visual-frame .vertical-board,
.inner-visual.visual-frame .about-logo-card{
  width:min(88%,480px)!important;
  max-width:calc(100% - 24px)!important;
  margin:0!important;
  background:rgba(255,255,255,.91)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  box-shadow:0 18px 45px rgba(25,39,74,.12)!important;
}

/* Small graphic media blocks */
.resource-art.visual-frame{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  border-radius:15px!important;
  margin-bottom:16px!important;
}
.resource-art.visual-frame .visual-fg{
  width:58%!important;height:58%!important;max-width:58%!important;max-height:58%!important;opacity:.76!important;
}
.portrait-art.visual-frame{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:4/3!important;
  border-radius:16px!important;
}
.portrait-art.visual-frame .visual-fg{
  width:58%!important;height:58%!important;max-width:58%!important;max-height:58%!important;opacity:.62!important;
}

/* Contact visual: keep all three text cards readable on mobile. */
.contact-shell aside.visual-frame{
  min-height:360px!important;
  padding:clamp(22px,4vw,34px)!important;
  color:inherit!important;
}
.contact-shell aside.visual-frame .visual-fg{
  width:58%!important;height:58%!important;max-width:58%!important;max-height:58%!important;opacity:.24!important;
}
.contact-shell aside.visual-frame .contact-stat{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(255,255,255,.45)!important;
  border-radius:14px!important;
  padding:14px!important;
  margin-bottom:9px!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

/* Pricing/contact strips */
.scenic-strip.visual-frame{
  width:min(calc(100% - 40px),var(--max))!important;
  height:auto!important;
  aspect-ratio:4/1!important;
  margin:0 auto 18px!important;
  border-radius:22px!important;
}
.scenic-strip.visual-frame .visual-fg{
  width:46%!important;height:68%!important;max-width:46%!important;max-height:68%!important;opacity:.58!important;
}

/* Green initiative */
.green-impact.visual-frame{
  min-height:390px!important;
  border-radius:24px!important;
}
.green-impact.visual-frame .visual-fg{
  width:58%!important;height:58%!important;max-width:58%!important;max-height:58%!important;opacity:.20!important;
}
.green-impact.visual-frame .leaf{background:rgba(255,255,255,.93)!important}
.green-impact.visual-frame b,.green-impact.visual-frame p{color:#fff!important;text-shadow:0 1px 10px rgba(9,20,43,.38)!important}

/* White logo in dark footer. */
.footer-brand img{
  width:min(230px,100%)!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Kill horizontal drift everywhere. */
html,body{max-width:100%!important;overflow-x:hidden!important}
.step-cards,.resource-grid,.hero-grid,.inner-hero-grid,.feature-switcher,.contact-shell,.testimonial{width:100%!important;max-width:100%!important;min-width:0!important}
.step-cards>*,.resource-grid>*,.hero-grid>*,.inner-hero-grid>*,.feature-switcher>*,.contact-shell>*,.testimonial>*{min-width:0!important;max-width:100%!important}

@media(max-width:1024px){
  .composite-hero-media{width:min(100%,720px)!important}
  .inner-visual.visual-frame{width:min(100%,680px)!important;margin-inline:auto!important;min-height:380px!important;aspect-ratio:16/11!important}
  .step-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:820px){
  .step-cards,.resource-grid{grid-template-columns:1fr!important}
  .step-card,.resource-card{width:100%!important;max-width:680px!important;margin-inline:auto!important}
  .step-photo-visual,.step-visual.visual-frame{aspect-ratio:16/9!important}
  .resource-art.visual-frame{aspect-ratio:16/9!important}
  .portrait-art.visual-frame{aspect-ratio:16/10!important;width:min(100%,600px)!important;margin-inline:auto!important}
  .scenic-strip.visual-frame{aspect-ratio:16/5!important}
}

@media(max-width:720px){
  .composite-hero-media{width:100%!important;border-radius:18px!important}
  .hero-grid,.inner-hero-grid{grid-template-columns:1fr!important;gap:24px!important}
  .switch-visual.visual-frame{min-height:420px!important;padding:16px!important}
  .switch-visual.visual-frame .visual-fg{width:66%!important;height:66%!important;max-width:66%!important;max-height:66%!important;opacity:.18!important}
  .inner-visual.visual-frame{width:100%!important;min-height:350px!important;aspect-ratio:1/1!important;padding:16px!important;border-radius:18px!important}
  .inner-visual.visual-frame .visual-fg{width:62%!important;height:62%!important;max-width:62%!important;max-height:62%!important;opacity:.24!important}
  .inner-visual.visual-frame .metric-hero,
  .inner-visual.visual-frame .vertical-board,
  .inner-visual.visual-frame .about-logo-card{width:90%!important;max-width:90%!important}
  .step-cards,.resource-grid{grid-template-columns:1fr!important;gap:16px!important}
  .step-card,.resource-card{width:100%!important;max-width:100%!important;margin:0!important}
  .step-photo-visual,.step-visual.visual-frame,.resource-art.visual-frame{aspect-ratio:16/10!important}
  .step-visual.visual-frame .visual-fg{width:56%!important;height:56%!important;max-width:56%!important;max-height:56%!important}
  .resource-art.visual-frame .visual-fg{width:54%!important;height:54%!important;max-width:54%!important;max-height:54%!important}
  .contact-shell aside.visual-frame{min-height:330px!important}
  .scenic-strip.visual-frame{width:min(calc(100% - 28px),var(--max))!important;aspect-ratio:16/6!important;border-radius:16px!important}
  .scenic-strip.visual-frame .visual-fg{width:52%!important;max-width:52%!important;opacity:.52!important}
  .green-impact.visual-frame{min-height:340px!important}
}

@media(max-width:540px){
  .step-photo-visual,.step-visual.visual-frame,.resource-art.visual-frame{aspect-ratio:4/3!important}
  .switch-visual.visual-frame{min-height:390px!important}
  .inner-visual.visual-frame{min-height:330px!important}
  .inner-visual.visual-frame .metric-hero,
  .inner-visual.visual-frame .vertical-board,
  .inner-visual.visual-frame .about-logo-card{width:94%!important;max-width:94%!important;padding:18px!important}
  .vertical-board .persona-line{grid-template-columns:30px minmax(0,1fr)!important}
  .vertical-board .persona-line strong{grid-column:2!important;justify-self:start!important;margin-top:4px!important}
  .contact-shell aside.visual-frame{min-height:350px!important}
  .scenic-strip.visual-frame{aspect-ratio:16/7!important}
  .footer-brand img{width:min(210px,100%)!important}
}

@media(max-width:380px){
  .inner-visual.visual-frame{min-height:315px!important}
  .switch-visual.visual-frame{min-height:375px!important}
  .step-photo-visual,.step-visual.visual-frame,.resource-art.visual-frame{aspect-ratio:1/1!important}
}

/* ============================================================================
   FINAL PAGE-GUTTER / MARGIN NORMALIZATION — 2026-09-05
   Every page now uses one centered content rail. This overrides older responsive
   width rules that created inconsistent left/right margins between sections.
   ============================================================================ */
:root{
  --site-max-width:1180px;
  --site-gutter-total:64px; /* 32px each side on desktop before max-width applies */
}

/* One consistent horizontal rail for all page content. */
.shell,
.mobile-panel nav,
.product-stage,
.scenic-strip,
.scenic-strip.visual-frame{
  width:min(calc(100% - var(--site-gutter-total)),var(--site-max-width))!important;
  max-width:var(--site-max-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Prevent nested layouts from adding accidental outside margins. */
.hero-grid,
.inner-hero-grid,
.feature-switcher,
.section-head,
.split-feature,
.faq-layout,
.contact-shell,
.testimonial,
.footer-grid,
.team-grid,
.pricing-grid,
.resource-grid,
.step-cards,
.process-grid,
.three-info{
  margin-left:0!important;
  margin-right:0!important;
}

/* Homepage dashboard used to go edge-to-edge on phones. Keep it on the same rail. */
.product-stage{
  box-sizing:border-box!important;
}

/* Center all standalone visual/media blocks inside their owning rail. */
.composite-hero-media,
.inner-visual.visual-frame,
.portrait-art.visual-frame,
.step-card,
.resource-card,
.legal-card{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Full-bleed section backgrounds remain full width; their content stays on the rail. */
.section,
.hero,
.inner-hero,
.feature-band,
.final-cta,
.footer{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:1180px){
  :root{--site-gutter-total:48px;} /* 24px each side */
}

@media(max-width:820px){
  :root{--site-gutter-total:36px;} /* 18px each side */
  .step-card,.resource-card{max-width:100%!important}
}

@media(max-width:540px){
  :root{--site-gutter-total:28px;} /* 14px each side */
}

@media(max-width:380px){
  :root{--site-gutter-total:24px;} /* 12px each side */
}


/* ============================================================================
   CONSISTENT PAGE RAIL + CONSISTENT GRAPHIC FORMAT — 2026-09-05
   This is the authoritative last layer. It replaces calc-width margin drift and
   puts every scenic/graphic composition on the same responsive system.
   ============================================================================ */
:root{
  --content-max:1180px;
  --page-gutter:32px;
  --visual-radius:22px;
}

html,body{width:100%;max-width:100%;overflow-x:clip!important}

/* Content shells use padding, not subtractive widths. This guarantees the same
   left edge for header, hero, sections and footer at every viewport width. */
.shell,
.mobile-panel nav{
  width:100%!important;
  max-width:calc(var(--content-max) + (var(--page-gutter) * 2))!important;
  padding-left:var(--page-gutter)!important;
  padding-right:var(--page-gutter)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Standalone media rails align exactly with .shell content edges. */
.product-stage,
.scenic-strip,
.scenic-strip.visual-frame{
  width:calc(100% - (var(--page-gutter) * 2))!important;
  max-width:var(--content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Remove any remaining nested horizontal offsets. */
.hero-grid,.inner-hero-grid,.feature-switcher,.section-head,.split-feature,
.faq-layout,.contact-shell,.testimonial,.footer-grid,.team-grid,.pricing-grid,
.resource-grid,.step-cards,.process-grid,.three-info{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  min-width:0!important;
}
.hero-grid>*,.inner-hero-grid>*,.feature-switcher>*,.section-head>*,.split-feature>*,
.faq-layout>*,.contact-shell>*,.testimonial>*,.footer-grid>*,.team-grid>*,
.pricing-grid>*,.resource-grid>*,.step-cards>*,.process-grid>*,.three-info>*{
  min-width:0!important;
  max-width:100%!important;
}

/* All image/graphic compositions use one format: scenic photo background +
   contained transparent foreground artwork. */
.visual-frame{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:100%!important;
  border-radius:var(--visual-radius)!important;
  background-color:#edf4fb!important;
  background-image:linear-gradient(135deg,rgba(25,39,74,.06),rgba(25,39,74,.18)),var(--scene)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border:1px solid rgba(25,39,74,.08)!important;
  box-shadow:0 18px 48px rgba(25,39,74,.10)!important;
}
.visual-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(25,39,74,.05))!important;
  pointer-events:none;
}
.visual-frame .visual-fg{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:62%!important;
  height:62%!important;
  max-width:62%!important;
  max-height:62%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  z-index:1!important;
  opacity:.62!important;
  pointer-events:none!important;
}
.visual-frame>*:not(.visual-fg){position:relative;z-index:2}

/* Scenic mapping now includes the three formerly mismatched composite images. */
.visual-frame.graphic-home-hero{--scene:url('/assets/img/backgrounds/vista-lake.webp')}
.visual-frame.graphic-managed{--scene:url('/assets/img/backgrounds/vista-lake.webp')}
.visual-frame.graphic-step-target{--scene:url('/assets/img/backgrounds/vista-river.webp')}

/* Home hero now matches the rest of the site rather than using a baked image. */
.hero-art.visual-frame{
  min-height:390px!important;
  aspect-ratio:6/5!important;
  border-radius:var(--visual-radius)!important;
}
.hero-art.visual-frame .visual-fg{
  width:70%!important;height:70%!important;max-width:70%!important;max-height:70%!important;opacity:.58!important;
}
.hero-art.visual-frame .quote-bubble{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  top:auto!important;
  bottom:18px!important;
  width:auto!important;
  max-width:calc(100% - 36px)!important;
  padding:14px 16px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.90)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* Subpage hero media uses the exact same scene + contained-art format. */
.inner-visual.visual-frame{
  min-height:420px!important;
  aspect-ratio:6/5!important;
  padding:clamp(18px,3vw,30px)!important;
  display:grid!important;
  place-items:center!important;
}
.inner-visual.visual-frame .visual-fg{
  width:64%!important;height:64%!important;max-width:64%!important;max-height:64%!important;opacity:.30!important;
}
.inner-visual.visual-frame .metric-hero,
.inner-visual.visual-frame .vertical-board,
.inner-visual.visual-frame .about-logo-card{
  width:min(88%,480px)!important;
  max-width:calc(100% - 24px)!important;
  margin:0!important;
  background:rgba(255,255,255,.90)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* All four process art panels are identical in dimensions and behavior. */
.step-visual.visual-frame{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  margin:8px 0 22px!important;
  padding:0!important;
  border-radius:13px!important;
}
.step-visual.visual-frame .visual-fg{
  width:58%!important;height:58%!important;max-width:58%!important;max-height:58%!important;opacity:.78!important;
}
.step-visual.visual-frame .photo-label{
  display:inline-flex!important;
  position:absolute!important;
  left:12px!important;right:auto!important;top:auto!important;bottom:10px!important;
  width:auto!important;max-width:calc(100% - 24px)!important;
  background:rgba(255,255,255,.93)!important;
  color:var(--navy)!important;
  border:1px solid rgba(25,39,74,.10)!important;
  border-radius:999px!important;
  padding:6px 9px!important;
  font-size:9px!important;font-weight:800!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;white-space:nowrap!important;
  z-index:3!important;
}

/* Resource, testimonial, strips and contact keep the same radius/border treatment. */
.resource-art.visual-frame{aspect-ratio:16/10!important;border-radius:13px!important}
.portrait-art.visual-frame{aspect-ratio:4/3!important;border-radius:16px!important}
.scenic-strip.visual-frame{aspect-ratio:4/1!important;height:auto!important;border-radius:var(--visual-radius)!important}

/* Ensure grid cards never leak past the common rail. */
.step-card,.resource-card,.price-card,.info-card,.process-card,.team-card,.legal-card{
  box-sizing:border-box!important;
  min-width:0!important;
}

/* Consistent responsive gutters. */
@media(max-width:1180px){:root{--page-gutter:24px}}
@media(max-width:900px){
  :root{--page-gutter:20px}
  .hero-grid,.inner-hero-grid{grid-template-columns:1fr!important;gap:30px!important}
  .hero-art.visual-frame,.inner-visual.visual-frame{width:min(100%,700px)!important;margin-inline:auto!important}
  .step-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:720px){
  :root{--page-gutter:16px}
  .hero-art.visual-frame{min-height:320px!important;aspect-ratio:1/1!important}
  .inner-visual.visual-frame{min-height:340px!important;aspect-ratio:1/1!important;padding:16px!important}
  .step-cards,.resource-grid{grid-template-columns:1fr!important;gap:16px!important}
  .step-card,.resource-card{width:100%!important;max-width:100%!important;margin:0!important}
  .step-visual.visual-frame,.resource-art.visual-frame{aspect-ratio:16/10!important}
  .scenic-strip.visual-frame{aspect-ratio:16/6!important}
  .hero-art.visual-frame .quote-bubble{left:12px!important;right:12px!important;bottom:12px!important;max-width:calc(100% - 24px)!important}
}
@media(max-width:480px){
  :root{--page-gutter:14px}
  .hero-art.visual-frame{min-height:300px!important}
  .inner-visual.visual-frame{min-height:320px!important}
  .step-visual.visual-frame,.resource-art.visual-frame{aspect-ratio:4/3!important}
  .visual-frame .visual-fg{width:56%!important;height:56%!important;max-width:56%!important;max-height:56%!important}
}


/* ============================================================================
   UNIFORM GRAPHIC COMPOSITION — FINAL QA 2026-09-05
   Every illustration is a precomposed responsive image. No absolute SVG layers,
   pseudo-element art, or clipped child graphics remain in the active system.
   ============================================================================ */
.visual-frame{
  --visual-radius:22px;
  display:flex!important;
  flex-direction:column!important;
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  padding:0!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border:1px solid rgba(25,39,74,.08)!important;
  border-radius:var(--visual-radius)!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:0 18px 48px rgba(25,39,74,.10)!important;
}
.visual-frame::before,.visual-frame::after{display:none!important;content:none!important}
.visual-frame .visual-fg,.visual-frame .safe-graphic{display:none!important}
.visual-frame .visual-composite{
  position:static!important;
  inset:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:1!important;
  z-index:auto!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  flex:0 0 auto!important;
}
.visual-frame>*:not(.visual-composite){position:relative!important;z-index:1!important}

/* Hero image: one composed image plus an optional caption below it. */
.hero-art.visual-frame{width:100%!important;max-width:720px!important;margin-inline:auto!important}
.hero-art.visual-frame .visual-caption{
  position:static!important;
  width:100%!important;max-width:none!important;
  margin:0!important;padding:14px 18px!important;
  border:0!important;border-top:1px solid var(--line)!important;
  border-radius:0!important;background:#fff!important;box-shadow:none!important;
  font-size:13px!important;line-height:1.45!important;
}

/* Feature switcher: art first, functional tab content below it, never layered. */
.switch-visual.visual-frame{padding:0!important;display:flex!important;min-height:0!important}
.switch-visual.visual-frame .visual-composite{width:100%!important}
.switch-visual.visual-frame .tab-pane{width:100%!important;margin:0!important;padding:0!important;background:#fff!important}
.switch-visual.visual-frame .pane-card{
  width:100%!important;max-width:none!important;margin:0!important;
  border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;
  box-shadow:none!important;background:#fff!important;padding:24px!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* Subpage hero graphics: image above, metric/board below. */
.inner-visual.visual-frame{width:100%!important;max-width:720px!important;margin-inline:auto!important;display:flex!important;place-items:initial!important}
.inner-visual.visual-frame .metric-hero,
.inner-visual.visual-frame .vertical-board,
.inner-visual.visual-frame .about-logo-card{
  position:static!important;
  width:100%!important;max-width:none!important;
  margin:0!important;padding:20px 22px!important;
  border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;
  box-shadow:none!important;background:#fff!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* Homepage process images are pure media; no labels or decorative overflow. */
.step-visual.visual-frame{
  display:block!important;width:100%!important;height:auto!important;min-height:0!important;
  aspect-ratio:auto!important;margin:8px 0 22px!important;border-radius:13px!important;
}
.step-visual.visual-frame .visual-composite{width:100%!important;height:auto!important}
.step-visual.visual-frame .photo-label,
.step-visual.visual-frame>i,
.step-visual.visual-frame>b,
.step-visual.visual-frame>svg,
.step-visual.visual-frame>span:not(.visual-caption){display:none!important}

/* Resources and testimonial use exactly the same media behavior. */
.resource-art.visual-frame,.portrait-art.visual-frame,.scenic-strip.visual-frame{
  display:block!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;
}
.resource-art.visual-frame .visual-composite,
.portrait-art.visual-frame .visual-composite,
.scenic-strip.visual-frame .visual-composite{width:100%!important;height:auto!important}

/* Contact graphic: image first; detail cards follow in normal flow. */
.contact-shell aside.visual-frame{display:flex!important;min-height:0!important;padding:0!important;color:inherit!important}
.contact-shell aside.visual-frame .contact-stat{
  margin:0!important;padding:14px 18px!important;border:0!important;
  border-top:1px solid var(--line)!important;border-radius:0!important;
  background:#fff!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* Green initiative: image first, then the existing impact text panel. */
.green-impact.visual-frame{display:flex!important;min-height:0!important;padding:0!important}
.green-impact.visual-frame .leaf{display:none!important}
.green-impact.visual-frame>b{font-size:52px!important;line-height:1!important;color:var(--navy)!important;text-shadow:none!important;padding:20px 22px 0!important}
.green-impact.visual-frame>p{color:var(--muted)!important;text-shadow:none!important;padding:0 22px 22px!important;margin:8px 0 0!important}

/* Keep all visual cards within the common page rail. */
.hero-art.visual-frame,.inner-visual.visual-frame,.step-card,.resource-card,.portrait-art.visual-frame,
.scenic-strip.visual-frame,.contact-shell aside.visual-frame,.green-impact.visual-frame{
  box-sizing:border-box!important;min-width:0!important;
}

@media(max-width:900px){
  .hero-art.visual-frame,.inner-visual.visual-frame{max-width:700px!important;margin-inline:auto!important}
  .switch-visual.visual-frame{max-width:700px!important;margin-inline:auto!important}
}
@media(max-width:720px){
  .visual-frame{--visual-radius:18px}
  .hero-art.visual-frame,.inner-visual.visual-frame,.switch-visual.visual-frame{width:100%!important;max-width:100%!important}
  .switch-visual.visual-frame .pane-card{padding:20px!important}
  .inner-visual.visual-frame .metric-hero,.inner-visual.visual-frame .vertical-board,.inner-visual.visual-frame .about-logo-card{padding:18px!important}
  .contact-shell aside.visual-frame .contact-stat{padding:13px 16px!important}
  .green-impact.visual-frame>b{font-size:44px!important;padding:18px 18px 0!important}
  .green-impact.visual-frame>p{padding:0 18px 18px!important}
}
@media(max-width:480px){
  .visual-frame{--visual-radius:16px}
  .hero-art.visual-frame .visual-caption{padding:12px 14px!important;font-size:12px!important}
  .switch-visual.visual-frame .pane-card{padding:16px!important}
  .inner-visual.visual-frame .metric-hero,.inner-visual.visual-frame .vertical-board,.inner-visual.visual-frame .about-logo-card{padding:16px!important}
}


/* === Leadership photo cards === */
.team-grid-photos{align-items:stretch}
.team-card-photo{display:flex!important;flex-direction:column;gap:0!important;padding:0!important;overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 16px 42px rgba(25,39,74,.07)}
.team-photo-frame{width:100%;aspect-ratio:4/5;overflow:hidden;background:#dceff1;border-bottom:1px solid #e4e9f0}
.team-photo-frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 16%}
.team-card-photo:nth-child(2) .team-photo-frame img{object-position:center top}
.team-card-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1}
.team-card-body span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.team-card-body h3{margin:7px 0 11px;font-size:25px}
.team-card-body p{font-size:13px;color:var(--muted);margin:0}
@media(max-width:1020px){.team-grid-photos{grid-template-columns:1fr 1fr!important}.team-card-body{padding:24px}}
@media(max-width:720px){.team-grid-photos{grid-template-columns:1fr!important}.team-card-photo{max-width:520px;margin-inline:auto;width:100%}.team-photo-frame{aspect-ratio:4/5}.team-card-body{padding:22px}.team-card-body h3{font-size:23px}}