body{margin:0;background:#eef1f4;color:#0b1622;font:16px/1.9 Vazirmatn,Tahoma,sans-serif}*{box-sizing:border-box}a{color:inherit}.wrap{max-width:1120px;margin:auto;padding:24px 22px}header{background:white;border-bottom:1px solid #d2d8de}h1{font-size:clamp(26px,5vw,40px);line-height:1.4}p{color:#4b5c70}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}figure{margin:0;background:white;border:1px solid #d2d8de;border-radius:8px;overflow:hidden}figure img{width:100%;height:280px;object-fit:contain;background:#e2e7ec;display:block}figure button{border:0;padding:0;width:100%;cursor:zoom-in;background:none}figcaption{padding:12px 16px}.back{display:inline-block;text-decoration:none;color:#0d4ea6;font-weight:bold}.cta{display:inline-block;background:#ef7d1e;color:white;padding:10px 20px;text-decoration:none;border-radius:4px}dialog{width:calc(100% - 24px);max-width:1100px;padding:16px;border:0;border-radius:8px;background:#101820;color:white}dialog::backdrop{background:#000c}dialog img{display:block;max-width:100%;max-height:78vh;margin:auto}dialog button{font:inherit;padding:6px 16px;cursor:pointer}@media(max-width:800px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.gallery{grid-template-columns:minmax(0,1fr)}figure img{height:auto;max-height:420px}}
.project-description{background:white;border:1px solid #d2d8de;border-radius:8px;padding:20px 24px;margin-bottom:28px}.project-description h2{margin:0;font-size:23px}.photo-caption[hidden]{display:none}

dialog .viewer-image{max-height:calc(85dvh - 150px);object-fit:contain} .viewer-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}.viewer-controls button{background:#24364a;color:#fff;border:1px solid #556779;border-radius:6px;min-height:44px;min-width:90px}.viewer-count{min-width:100px;text-align:center;font-size:15px}.viewer-caption{color:#e7ecf1;text-align:center;margin:10px 0 0}.viewer-close{margin-bottom:12px}@media(max-width:420px){.viewer-controls{gap:8px}.viewer-controls button{min-width:75px;padding:6px 10px}}

/* Fixed viewer frame keeps navigation stable across image dimensions. */
dialog{height:min(90dvh,900px);max-height:90dvh;overflow:hidden;padding:56px 20px 100px;position:fixed}
dialog .viewer-image{width:100%;height:100%;max-height:none;object-fit:contain;margin:0}
.viewer-close{position:absolute;top:12px;right:16px;margin:0;z-index:2}
.viewer-controls{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);margin:0;gap:14px}
.viewer-controls button{display:grid;place-items:center;min-width:44px;width:44px;height:44px;padding:0;border:0;background:transparent;color:#bac5d1;font-family:Arial,sans-serif;font-size:30px;line-height:1;border-radius:50%;transition:background .18s,color .18s,transform .18s}
.viewer-controls button:hover,.viewer-controls button:focus-visible{background:#ffffff18;color:#fff;transform:scale(1.15)}
.viewer-count{min-width:64px;direction:ltr;font-size:15px;font-variant-numeric:tabular-nums;color:#e7ecf1}
.viewer-caption{position:absolute;bottom:7px;left:20px;right:20px;margin:0;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:420px){dialog{padding-inline:12px}.viewer-controls{gap:10px}.viewer-controls button{min-width:44px;padding:0}}

.viewer-controls{direction:ltr}.viewer-count{font-family:"Segoe UI",Arial,sans-serif;font-weight:500;font-size:16px;letter-spacing:1px;font-variant-numeric:tabular-nums;line-height:1}

.viewer-close{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid #ffffff35;background:#ffffff12;color:#e7ecf1;cursor:pointer;transition:background .18s,transform .18s}.viewer-close:hover{background:#ffffff26;transform:scale(1.05)}.viewer-close:focus-visible{outline:2px solid #fff;outline-offset:3px}

html{color-scheme:only light}

.videos-heading{margin-top:32px}.video-card{position:relative;cursor:pointer}.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#101820cc;color:#fff;border:1px solid #ffffff70;font-size:23px}.video-viewer{padding:64px 16px 20px}.video-viewer video{width:100%;height:100%;object-fit:contain}