
:root{--navy:#101c2b;--accent:#d3a461;--muted:#aebbc9;--line:#dce2e8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#253247;background:#fff}a{color:inherit;text-decoration:none}.wrap{max-width:1170px;padding:0 22px;margin:auto}header{background:#101c2b;color:#fff;position:sticky;top:0;z-index:9;box-shadow:0 2px 10px #0002}nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:22px;font-weight:900;letter-spacing:1px}.brand small{display:block;font-size:10px;color:#d3a461;letter-spacing:3px;margin-top:3px}nav .links{display:flex;gap:24px;align-items:center;font-size:14px;font-weight:700}nav .links a:hover{color:#d3a461}.btn{display:inline-block;background:#d3a461;color:#101c2b;padding:14px 20px;border:0;border-radius:3px;font-weight:800;cursor:pointer}.btn:hover{background:#e9ba7a}.hero{color:#fff;background:linear-gradient(90deg,#101c2bf2,#101c2b7f),url('images/project-17.jpg') center/cover;min-height:525px;display:flex;align-items:center}.eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#d3a461;font-weight:800}h1{font-size:clamp(38px,5vw,66px);line-height:1.1;max-width:750px;margin:18px 0 22px}h2{font-size:clamp(28px,3vw,40px);margin:10px 0 16px;color:#101c2b}p{line-height:1.7}.hero p{max-width:630px;font-size:18px;color:#eef1f5}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}.outline{border:1px solid #fff;color:#fff;padding:13px 20px;font-weight:800;border-radius:3px}.section{padding:76px 0}.soft{background:#f4f6f8}.intro{max-width:730px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}.card{background:#fff;border:1px solid var(--line);padding:25px;border-radius:5px}.card b{font-size:18px;color:#101c2b}.card p{font-size:14px;color:#506073;margin-bottom:0}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}.tile{padding:0;border:1px solid #e5e9ed;background:#fff;text-align:left;cursor:pointer;border-radius:5px;overflow:hidden;display:block;width:100%;font:inherit}.tile img{display:block;width:100%;height:240px;object-fit:cover;transition:transform .25s}.tile:hover img{transform:scale(1.035)}.tile .meta{padding:16px}.tile b{display:block;font-size:16px;color:#101c2b}.tile span{display:block;color:#687789;font-size:12px;margin-top:7px;text-transform:uppercase;letter-spacing:1px}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 4px}.filter{background:#f1f3f6;border:1px solid #dce2e8;padding:10px 15px;border-radius:4px;cursor:pointer;color:#203146;font-weight:700}.filter.active{background:#101c2b;color:#fff;border-color:#101c2b}.banner{background:#101c2b;color:#fff;padding:55px 0}.banner h2{color:#fff}.banner p{color:#d8e0e8}footer{background:#0b1421;color:#cbd4df;padding:30px 0;font-size:13px}.footrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}.modal{position:fixed;inset:0;background:#07111deb;z-index:30;display:none;align-items:center;justify-content:center;padding:52px 15px 40px}.modal.open{display:flex}.modal img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:4px}.modal figure{margin:0;text-align:center}.modal figcaption{color:#fff;margin:14px}.close,.arrow{position:absolute;background:#fff;color:#101c2b;border:0;border-radius:30px;cursor:pointer;font-size:25px;width:44px;height:44px}.close{right:18px;top:13px}.arrow.prev{left:12px}.arrow.next{right:12px}.note{font-size:13px;color:#607187}.feature-img{width:100%;max-height:410px;object-fit:cover;border-radius:5px;margin-top:20px}@media(max-width:770px){nav{flex-wrap:wrap;padding-top:16px;padding-bottom:15px;min-height:auto}.brand{font-size:19px}nav .links{width:100%;gap:18px;font-size:13px}.hero{min-height:450px}.cards,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tile img{height:180px}.section{padding:55px 0}}@media(max-width:480px){.gallery-grid,.cards{grid-template-columns:1fr}.tile img{height:235px}.hero p{font-size:16px}.arrow{width:34px;height:34px;font-size:20px}.arrow.prev{left:4px}.arrow.next{right:4px}}
