/* Lightweight, system-font, responsive base */
:root{
  --bg:#ffffff; --fg:#111; --muted:#555; --brand:#0a7; --brand-ink:#064;
  --max: 64rem; --gap: 1rem;
}
*{box-sizing:border-box}
html{font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.5}
body{margin:0; color:var(--fg); background:var(--bg)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gap)}
a{color:var(--brand)} a:hover{color:var(--brand-ink)}
header{border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:10}
nav{display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:0.75rem 0}
nav .links{display:flex; gap:0.75rem; flex-wrap:wrap}
.logo{font-weight:700; letter-spacing:.2px}
main{padding:2rem 0}
.hero{display:grid; gap:1rem}
.hero h1{font-size:clamp(1.75rem,3.5vw,2.5rem); margin:.25rem 0}
.hero .sub{color:var(--muted)}
.cta{display:flex; gap:.75rem; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.65rem .9rem; border-radius:.5rem; text-decoration:none; font-weight:600; border:1px solid var(--brand); background:var(--brand); color:#fff}
.btn.outline{background:transparent; color:var(--brand-ink)}
.grid{display:grid; gap:1rem}
@media(min-width: 800px){.grid.cols-2{grid-template-columns:1fr 1fr}}
section{padding:1rem 0; border-top:1px solid #f2f2f2}
h2{font-size:1.4rem; margin:0 0 .25rem 0}
ul{padding-left:1.25rem}
.card{padding:1rem; border:1px solid #eee; border-radius:.5rem; background:#fff}
footer{border-top:1px solid #eee; padding:1.25rem 0; color:var(--muted)}
.small{font-size:.925rem}
.visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* Team / Professionals */
.pro-list{display:grid; gap:1rem}
.pro-item{display:flex; gap:1rem; padding:1rem; border:1px solid #eee; border-radius:.75rem; background:#fff; align-items:flex-start}
.pro-item img{width:80px; height:80px; border-radius:50%; flex:0 0 auto}
.pro-content{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.pro-header{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.pro-header h3{margin:.1rem 0; font-size:1.15rem}
.xp{font-size:.9rem; color:var(--muted)}
.pro-desc{color:#222}
.badges{display:flex; gap:.4rem; flex-wrap:wrap}
.badge{font-size:.8rem; padding:.15rem .45rem; border-radius:.4rem; border:1px solid #e6e6e6; color:#333}
.muted{color:var(--muted)}
@media(max-width:520px){.pro-item{flex-direction:row}.pro-item img{width:64px;height:64px}}

/* Gallery */
.gallery-grid{display:grid; gap:1rem}
@media(min-width:700px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
.gallery-grid figure{margin:0; border:1px solid #eee; border-radius:.5rem; background:#fff; overflow:hidden}
.gallery-grid img{display:block; width:100%; height:auto}
.gallery-grid figcaption{padding:.6rem .75rem; font-size:.92rem; color:#333}
.video-thumb{position:relative; display:block; border-radius:.5rem; overflow:hidden; border:1px solid #eee}
.video-thumb .play{position:absolute; inset:auto 0 0 0; background:linear-gradient(transparent,rgba(0,0,0,.55)); color:#fff; padding:.5rem .75rem; font-weight:600}

/* Gallery categories */
.cat-nav{display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 1rem}
.cat-nav a{display:inline-block; padding:.25rem .6rem; border:1px solid #e6e6e6; border-radius:999px; text-decoration:none; color:#222}
details.category{border:1px solid #eee; border-radius:.5rem; background:#fff; padding:.5rem .75rem}
details.category+details.category{margin-top:1rem}
details.category summary{cursor:pointer; font-weight:600}

/* Image modal (dialog-based) */
.img-dialog{border:0; padding:0; margin:0; background:transparent; width:100vw; height:100vh; max-width:100vw; max-height:100vh; overflow:hidden}
.img-dialog::backdrop{background:rgba(0,0,0,.75)}
.img-dialog .panel{position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; overflow:hidden}
.img-dialog .inner{position:relative; width:60vw; height:60vh; max-width:1200px; max-height:60vh; overflow:hidden; background:#111; border-radius:.6rem; padding:.5rem; box-sizing:border-box}
.img-dialog img{display:block; max-width:100%; max-height:100%; border-radius:.5rem; box-shadow:0 10px 30px rgba(0,0,0,.5); transform-origin:center center; cursor:grab}
.img-dialog img.dragging{cursor:grabbing}
.img-dialog .controls{position:absolute; top:.5rem; right:.5rem; display:flex; gap:.4rem; left:auto}
.img-dialog .controls button{background:rgba(0,0,0,.6); color:#fff; border:0; border-radius:.375rem; padding:.35rem .5rem; cursor:pointer}