:root{--blue:#3182CE;--ink:#1A202C;--body:#4A5568;--line:#E2E8F0;--wash:#EDF2F7}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.65 'Open Sans',system-ui,sans-serif;color:var(--body);background:#fff}
h1,h2,h3,.btn,nav a{font-family:Poppins,system-ui,sans-serif;color:var(--ink)}
a{color:var(--blue)}
.wrap{max-width:1080px;margin-inline:auto;padding:0 22px}
header{border-bottom:1px solid var(--line);padding:14px 0;position:sticky;top:0;background:#fff;z-index:30}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:18px}
.brand{display:block;line-height:0}.brand img{height:36px;width:auto;display:block}
nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
nav a{font-size:14.5px;text-decoration:none;color:var(--ink);font-weight:600}
nav a:hover{color:var(--blue)}
.btn{display:inline-block;background:var(--blue);color:#fff!important;text-decoration:none;padding:11px 20px;border-radius:6px;font-weight:600;font-size:14.5px;border:0;cursor:pointer}
.btn:hover{background:#2B6CB0}
.btn.alt{background:#fff;color:var(--blue)!important;border:2px solid var(--blue)}
.hero{padding:64px 0 52px}
h1{font-size:clamp(30px,5.2vw,48px);line-height:1.1;letter-spacing:-.02em;margin:0 0 16px;max-width:19ch}
.sub{font-size:18.5px;max-width:54ch;margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
section{padding:54px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(22px,3.1vw,30px);letter-spacing:-.018em;margin:0 0 12px;line-height:1.2}
h3{font-size:17px;margin:0 0 6px}
.intro{max-width:60ch;font-size:17px;margin:0 0 34px}
.wash{background:var(--wash)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.grid p{margin:0;font-size:14.5px}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.door{display:block;background:#fff;border:1px solid var(--line);border-radius:11px;padding:24px;text-decoration:none;transition:border-color .2s,transform .2s}
.door:hover{border-color:var(--blue);transform:translateY(-2px)}
.door h3{margin:0 0 7px}.door p{margin:0 0 12px;font-size:14.5px;color:var(--body)}
.door span{font-size:14px;font-weight:600;color:var(--blue)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px}
.gi{margin:0;border-radius:8px;overflow:hidden;background:var(--wash);aspect-ratio:4/3}
.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.gi:hover img{transform:scale(1.04)}
.trades{columns:3;column-gap:30px;max-width:820px}
@media(max-width:700px){.trades{columns:2}}
.trades li{break-inside:avoid;margin-bottom:7px;font-size:15px}
.trades ul{margin:0;padding-left:20px}
.case{margin-bottom:0}
.bagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px}
.bagrid .case h3{font-size:15px;margin:0 0 3px}
.bagrid .case p{font-size:13px;margin:0 0 9px;min-height:2.6em}
.bagrid .ba{aspect-ratio:4/3}
.bagrid .handle span{width:30px;height:30px}
.bagrid .lb{font-size:9px;padding:4px 8px;bottom:9px}
.case p{margin:0 0 13px;font-size:14.5px;max-width:70ch}
.ba{position:relative;user-select:none;border-radius:10px;overflow:hidden;background:var(--wash);aspect-ratio:4/3;cursor:ew-resize;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba .clip{position:absolute;inset:0;width:50%;overflow:hidden}
.ba .clip img{width:auto;height:100%}
.handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.18);pointer-events:none}
.handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.lb{position:absolute;bottom:12px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:4px;background:rgba(0,0,0,.66);color:#fff;font-family:Poppins,sans-serif}
.lb.l{left:12px}.lb.r{right:12px}
form{max-width:540px}
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:15px 0 6px}
input,textarea,select{width:100%;padding:11px 13px;border:1.5px solid #CBD5E0;border-radius:6px;font:inherit;font-size:15px}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--blue)}
textarea{min-height:104px;resize:vertical}.hp{position:absolute;left:-9999px}
footer{padding:34px 0 48px;font-size:13.5px;border-top:1px solid var(--line)}
footer p{margin:0 0 6px}
footer nav{gap:16px;margin-bottom:14px}
footer nav a{font-size:13.5px;font-weight:400}