/* Vibrant Studio: a reversible preview over the selected Soft Modular site. */
.resource-art,.vibrant-tags,.vibrant-actions{display:none}
html[data-palette=vibrant] .modular{--bg:#fffcf6;--ink:#172d45;--muted:#3e5367;--accent:#244cc7;--surface:#fff;--soft:#dcecff;--soft-alt:#c8e57d;--line:#d1d8df;--secondary-line:#4467b3;--contact-action:#ffd375;--contact-hover:#ffe2a2;--contact-ink:#172d45;--contact-copy:#eef4ff}
html[data-palette=vibrant] .brand{letter-spacing:-.04em}
html[data-palette=vibrant] .site-header .brand::before{content:'';display:inline-block;width:11px;height:11px;background:#244cc7;border-radius:3px;transform:rotate(-12deg);margin-right:9px}
html[data-palette=vibrant] .hero{position:relative;isolation:isolate;background:#a6d6ff;border:1px solid #83bde9;padding:48px;grid-template-columns:minmax(0,1.45fr) minmax(255px,.7fr);gap:48px;overflow:hidden;min-height:480px}
html[data-palette=vibrant] .hero::after{content:'';position:absolute;width:400px;height:400px;background:#ffd375;border-radius:50%;right:-175px;top:-140px;z-index:-1}
html[data-palette=vibrant] .hero h1{font-size:clamp(46px,5.2vw,74px);line-height:1.02;max-width:640px;letter-spacing:-.055em;font-weight:800;margin-bottom:25px}
html[data-palette=vibrant] .hero .eyebrow{color:#172d45;font-size:15px}
html[data-palette=vibrant] .hero .intro-title{color:#172d45;font-size:27px;max-width:570px;line-height:1.28}
html[data-palette=vibrant] .hero .lead{color:#29465f;max-width:580px;font-size:17px}
html[data-palette=vibrant] .hero-copy>.actions:not(.vibrant-actions){display:none}
html[data-palette=vibrant] .vibrant-actions{display:flex;gap:12px}
html[data-palette=vibrant] .hero-portrait{position:relative;max-width:310px;width:100%;padding-top:40px}
html[data-palette=vibrant] .hero-portrait img{border:7px solid #fff;border-radius:24px;box-shadow:10px 10px 0 #244cc7;width:100%;aspect-ratio:1/1.05;object-fit:cover}
html[data-palette=vibrant] .portrait-caption{margin-top:23px;color:#172d45;font-weight:600}
html[data-palette=vibrant] .vibrant-tags{display:flex;flex-wrap:wrap;gap:7px;position:absolute;top:0;left:-10px;right:-10px;transform:rotate(-4deg);z-index:2}
html[data-palette=vibrant] .vibrant-tags span{font-size:10px;letter-spacing:.06em;font-weight:750;padding:5px 9px;border:1px solid #172d45;border-radius:6px;background:#fff;color:#172d45;box-shadow:2px 2px 0 #172d45}
html[data-palette=vibrant] .vibrant-tags span:nth-child(2){background:#c8e57d}html[data-palette=vibrant] .vibrant-tags span:nth-child(3){background:#ffae98}
html[data-palette=vibrant] .section-head h2{font-size:33px;letter-spacing:-.035em}
html[data-palette=vibrant] .button{box-shadow:0 3px 0 #172d4522;border-radius:10px}
html[data-palette=vibrant] .button:hover{background:#173994}
html[data-palette=vibrant] .button.secondary{background:#ffffff9c;border-color:#4467b3;box-shadow:none}
html[data-palette=vibrant] .button.secondary:hover{background:#fff;color:#173994}
html[data-palette=vibrant] .topic-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
html[data-palette=vibrant] .topic-card,html[data-palette=vibrant] .topic-card:first-child{padding:23px;min-height:243px;border:1px solid #172d4525;background:#a6d6ff;transition:transform .18s ease,box-shadow .18s ease}
html[data-palette=vibrant] .topic-card:nth-child(2){background:#c8e57d}html[data-palette=vibrant] .topic-card:nth-child(3){background:#ffd375}html[data-palette=vibrant] .topic-card:nth-child(4){background:#ffae98}
html[data-palette=vibrant] .topic-card:hover{transform:translateY(-4px);box-shadow:0 7px 0 #172d4512;color:#172d45}
html[data-palette=vibrant] .topic-card h3{font-size:23px;line-height:1.17;max-width:195px;margin:14px 0 10px}
html[data-palette=vibrant] .topic-card p{font-size:14px;color:#294052;line-height:1.55}
html[data-palette=vibrant] .topic-icon{display:flex;color:#172d45;width:32px;height:32px;align-items:center}
html[data-palette=vibrant] .topic-icon .icon{width:28px;height:28px}
html[data-palette=vibrant] .topic-card .arrow{top:20px;right:19px;width:33px;height:33px;background:#ffffffa6}
html[data-palette=vibrant] .resource-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
html[data-palette=vibrant] .resource-card{display:grid;grid-template-columns:112px minmax(0,1fr) 20px;gap:19px;padding:19px;background:#fff;border:1px solid #cbd4df;border-radius:18px;align-items:center;transition:transform .18s ease,box-shadow .18s ease}
html[data-palette=vibrant] .resource-card:hover{transform:translateY(-3px);box-shadow:0 7px 0 #dcecff}
html[data-palette=vibrant] .resource-art{display:block;width:112px;height:112px;object-fit:cover;border-radius:12px}
html[data-palette=vibrant] .resource-info{display:block;min-width:0}
html[data-palette=vibrant] .resource-info h3{font-size:20px;line-height:1.25;letter-spacing:-.025em}
html[data-palette=vibrant] .resource-info p{font-size:13px;line-height:1.5;margin-top:8px}
html[data-palette=vibrant] .resource-info>p{color:#244cc7;font-weight:650;font-size:11px;white-space:normal}
html[data-palette=vibrant] .resource-card .arrow{color:#244cc7;font-size:22px}
html[data-palette=vibrant] .project-card{border-color:#cbd4df;box-shadow:0 4px 0 #dcecff}
html[data-palette=vibrant] .structure-art{background:#a6d6ff;color:#172d45}
html[data-palette=vibrant] .product-feature{background:#e2efc5;border:1px solid #b7cd8a}
html[data-palette=vibrant] .paper-stack{box-shadow:10px 10px 0 #244cc7;transform:rotate(-3deg)}
html[data-palette=vibrant] .contact-band{background:#244cc7;border:1px solid #244cc7}
html[data-palette=vibrant] .contact-band h2{color:white}
html[data-palette=vibrant] .contact-band .button{background:#ffd375;color:#172d45}
html[data-palette=vibrant] .marketing-hero{background:#a6d6ff;border:1px solid #83bde9}
html[data-palette=vibrant] .service-card:nth-child(1){background:#a6d6ff}
html[data-palette=vibrant] .service-card:nth-child(2){background:#c8e57d}
html[data-palette=vibrant] .service-card:nth-child(3){background:#ffd375}
html[data-palette=vibrant] .service-card p{color:#294052}
@media(max-width:1100px){html[data-palette=vibrant] .hero{padding:35px;gap:32px}html[data-palette=vibrant] .hero h1{font-size:56px}html[data-palette=vibrant] .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-palette=vibrant] .topic-card{min-height:210px}html[data-palette=vibrant] .resource-card{grid-template-columns:80px minmax(0,1fr) 18px;gap:15px}html[data-palette=vibrant] .resource-art{width:80px;height:95px}}
@media(max-width:760px){html[data-palette=vibrant] .hero{padding:28px 24px;grid-template-columns:1fr;gap:27px;min-height:0}html[data-palette=vibrant] .hero h1{font-size:44px;margin-bottom:20px}html[data-palette=vibrant] .hero .intro-title{font-size:23px}html[data-palette=vibrant] .hero .lead{font-size:16px}html[data-palette=vibrant] .hero::after{width:240px;height:240px;right:-170px;top:-150px}html[data-palette=vibrant] .hero-portrait{max-width:none;padding-top:0;display:flex;align-items:center;gap:25px}html[data-palette=vibrant] .hero-portrait img{width:110px;height:120px;border-width:4px;border-radius:15px;box-shadow:6px 6px 0 #244cc7}html[data-palette=vibrant] .portrait-caption{font-size:11px;line-height:1.7;margin:0;max-width:150px}html[data-palette=vibrant] .vibrant-tags{display:none}html[data-palette=vibrant] .vibrant-actions{display:grid;grid-template-columns:1fr;width:100%}html[data-palette=vibrant] .section-head h2{font-size:28px}html[data-palette=vibrant] .topic-grid{grid-template-columns:1fr}html[data-palette=vibrant] .topic-card,html[data-palette=vibrant] .topic-card:first-child{min-height:0;padding:22px 65px 22px 22px}html[data-palette=vibrant] .topic-icon{display:none}html[data-palette=vibrant] .topic-card h3{margin:0 0 9px;max-width:none;font-size:24px}html[data-palette=vibrant] .resource-grid{grid-template-columns:1fr}html[data-palette=vibrant] .resource-card{grid-template-columns:72px minmax(0,1fr) 16px;padding:17px 15px;gap:13px}html[data-palette=vibrant] .resource-art{width:72px;height:92px}html[data-palette=vibrant] .resource-info h3{font-size:18px}html[data-palette=vibrant] .resource-info p{font-size:12px}html[data-palette=vibrant] .resource-info>p{font-size:10px}html[data-palette=vibrant] .marketing-hero h1{font-size:34px}}
@media(max-width:370px){html[data-palette=vibrant] .hero{padding:25px 19px}html[data-palette=vibrant] .hero h1{font-size:37px}html[data-palette=vibrant] .hero .intro-title{font-size:21px}html[data-palette=vibrant] .resource-card{grid-template-columns:58px minmax(0,1fr) 14px;gap:10px}html[data-palette=vibrant] .resource-art{width:58px;height:85px}html[data-palette=vibrant] .resource-info h3{font-size:17px}}