
.onsite-page{--onsite-accent:#67b8ed;--onsite-ink:#0b2845;background:#eaf0f5;color:var(--onsite-ink)}
.onsite-page.painting{--onsite-accent:#9ab6d8;background:#f3f2f0}
.onsite-intro{padding:clamp(50px,8vw,110px) 6% 35px;background:radial-gradient(ellipse at 85% 0,rgba(96,178,230,.22),transparent 60%);border-bottom:1px solid #c8d6e3}
.onsite-intro h1{font-size:clamp(48px,7vw,96px);line-height:1;margin:14px 0 24px;color:#0b2845}
.onsite-intro p{max-width:640px;line-height:1.8}
.onsite-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.onsite-shell{padding:35px 6% 70px;max-width:1800px;margin:auto}
.onsite-tools{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.onsite-filters{display:flex;flex-wrap:wrap;gap:8px}
.onsite-filters button{font:inherit;font-size:13px;border:1px solid #b9cbdc;color:#153957;background:transparent;border-radius:30px;padding:10px 18px;cursor:pointer}
.onsite-filters button[aria-pressed=true]{background:#102e4d;color:white}
.onsite-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.onsite-card{border:1px solid #c6d4df;background:white;border-radius:16px;overflow:hidden;padding:0;text-align:left;color:#12324f;cursor:pointer;box-shadow:0 8px 30px #0b28450d;transition:transform .25s,box-shadow .25s}
.onsite-card img{display:block;width:100%;height:270px;object-fit:cover;transition:transform .4s}
.onsite-card:hover,.onsite-card:focus-visible{transform:translateY(-5px);box-shadow:0 16px 36px #0b284526;outline:2px solid var(--onsite-accent);outline-offset:3px}
.onsite-card:hover img{transform:scale(1.045)}
.onsite-card span{display:block;padding:16px;font-size:14px;font-weight:600}
.onsite-empty{border:1px solid #c1d3e2;border-radius:22px;padding:clamp(30px,6vw,75px);background:linear-gradient(120deg,#ffffffd9,#e2ecf5cc);position:relative;overflow:hidden}
.onsite-empty:before{content:"";display:block;width:55px;height:3px;background:#508fba;margin-bottom:25px}
.onsite-empty h2{font-size:clamp(25px,3vw,42px);color:#0b2845}
.onsite-empty p{max-width:560px;line-height:1.8}
.onsite-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.onsite-links a{color:#153957;border:1px solid #aac2d6;border-radius:30px;padding:10px 18px;text-decoration:none;font-size:13px}
.onsite-viewer{width:95vw;max-width:1500px;max-height:94vh;padding:16px;border:1px solid #627e98;border-radius:18px;background:#071727;color:white}
.onsite-viewer::backdrop{background:#030c18e8;backdrop-filter:blur(10px)}
.onsite-viewer img{display:block;max-height:72vh;max-width:100%;width:auto;margin:auto;object-fit:contain}
.onsite-viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 12px}
.onsite-viewer button{background:#19334d;border:1px solid #69839b;color:white;padding:10px 18px;border-radius:30px;cursor:pointer;font:inherit}
.onsite-viewer figcaption{padding:18px 4px 2px;line-height:1.6}
.onsite-viewer figure{margin:0}
.onsite-page [hidden]{display:none!important}
@media(min-width:1101px){.nav-links{gap:clamp(10px,1.3vw,24px)}.nav-links>a{font-size:13px}}
@media(max-width:1100px){.onsite-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.onsite-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.onsite-card img{height:220px}.onsite-shell{padding:25px 5% 45px}.onsite-intro{padding:45px 5% 25px}}
@media(max-width:450px){.onsite-card img{height:170px}.onsite-card span{padding:12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.onsite-card,.onsite-card img{transition:none}}

.onsite-page{padding-top:0!important}
.onsite-page>header{position:relative!important;top:0!important;background:#edf3f8!important;box-shadow:0 1px 0 #c4d2df!important;backdrop-filter:none!important}
.onsite-page>header .nav-links>a:not(.button),.onsite-page>header .license-assurance,.onsite-page>header .mobile-toggle{color:#102f50!important;text-shadow:none!important}
.onsite-page .onsite-intro p,.onsite-page .onsite-empty p{color:#36516a!important}
.onsite-page .onsite-intro{position:relative!important;padding-top:65px!important}
.onsite-page>header .brand{max-width:230px!important}
