:root { --ink:#101820; --muted:#58636d; --line:#d8dee3; --paper:#f5f7f8; --white:#fff; --red:#d7192d; --blue:#123a5a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1240px; margin:auto; padding:18px 24px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { display:grid; width:46px; height:46px; place-items:center; border-radius:6px; background:var(--ink); color:white; border-bottom:6px solid var(--red); font-weight:900; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:1.2rem; }
.brand small { margin-top:2px; color:var(--muted); font-size:.78rem; }
nav { display:flex; gap:20px; }
nav a,footer a { font-weight:750; text-decoration:none; }
main { max-width:1240px; margin:auto; padding:0 24px 40px; }
.hero { position:relative; aspect-ratio:2170 / 725; overflow:hidden; border-radius:8px; background:var(--ink); }
.hero img { position:absolute; width:100%; height:100%; object-fit:contain; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,15,21,.9),rgba(8,15,21,.18) 72%); }
.hero-copy { position:absolute; z-index:1; left:clamp(24px,5vw,64px); bottom:clamp(28px,5vw,60px); max-width:650px; color:#fff; }
.eyebrow { margin:0 0 8px; color:var(--red); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.hero h1 { max-width:600px; margin:0; font-size:clamp(2.4rem,5vw,4.7rem); line-height:1; letter-spacing:0; }
.hero-copy > p:last-child { max-width:550px; margin:18px 0 0; font-size:1.08rem; line-height:1.55; }
.finder { margin-top:28px; }
.finder-head { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.finder-head h2,.note h2 { margin:0; font-size:2rem; }
.finder-head > p { color:var(--muted); }
.controls { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; margin:18px 0 12px; padding:14px; border:1px solid var(--line); background:white; }
label { display:grid; gap:6px; color:var(--muted); font-size:.76rem; font-weight:800; text-transform:uppercase; }
input,select { width:100%; min-height:46px; padding:0 12px; border:1px solid #b9c3ca; border-radius:4px; background:#fff; color:var(--ink); font:inherit; font-size:1rem; text-transform:none; }
.check { display:flex; align-items:center; align-self:end; min-height:46px; padding:0 10px; border:1px solid #b9c3ca; border-radius:4px; color:var(--ink); font-size:.9rem; text-transform:none; }
.check input { width:20px; min-height:auto; height:20px; accent-color:var(--red); }
.quick-links { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.quick-links a { padding:9px 12px; border:1px solid var(--blue); border-radius:4px; color:var(--blue); font-weight:800; text-decoration:none; }
.directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.gym-card { display:flex; min-height:290px; flex-direction:column; padding:20px; border:1px solid var(--line); border-top:4px solid var(--blue); border-radius:6px; background:white; }
.card-top { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.gym-card h3 { margin:0; font-size:1.25rem; line-height:1.2; }
.badge { flex:none; padding:5px 7px; border-radius:4px; background:#e8f0f5; color:var(--blue); font-size:.72rem; font-weight:900; }
.gym-card p { color:#48545f; line-height:1.55; }
.meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.meta span { padding:5px 7px; border:1px solid var(--line); border-radius:4px; color:var(--muted); font-size:.78rem; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.actions a { min-height:44px; display:grid; place-items:center; border:1px solid var(--blue); border-radius:4px; color:var(--blue); font-weight:850; text-decoration:none; }
.actions a:first-child { background:var(--blue); color:white; }
.empty,.note { margin-top:20px; padding:24px; border:1px solid var(--line); background:white; }
.equipment-gallery { margin-top:34px; }
.gallery-heading { margin-bottom:16px; }
.gallery-heading h2 { margin:0; font-size:2rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.gallery-grid figure { position:relative; min-width:0; height:360px; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#e9edf0; }
.gallery-grid img { display:block; width:100%; height:100%; object-fit:contain; }
.gallery-grid figcaption { position:absolute; right:10px; bottom:10px; left:10px; padding:8px 10px; background:rgba(8,15,21,.78); color:white; font-size:.82rem; font-weight:800; }
.note { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.note p { max-width:720px; color:var(--muted); line-height:1.55; }
footer { display:flex; justify-content:space-between; gap:20px; padding:25px max(24px,calc((100vw - 1192px)/2)); background:var(--ink); color:white; }
@media (max-width:900px) { .controls { grid-template-columns:1fr 1fr; } .search-field { grid-column:1/-1; } .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .gallery-grid figure { height:420px; } }
@media (max-width:620px) { .site-header { align-items:flex-start; } nav a:first-child { display:none; } main { padding:0 14px 28px; } .hero { aspect-ratio:auto; min-height:430px; border-radius:6px; } .hero img { height:auto; object-fit:contain; } .hero::after { background:linear-gradient(0deg,rgba(8,15,21,.97) 0 58%,rgba(8,15,21,.08) 88%); } .hero-copy { bottom:24px; } .hero h1 { font-size:2.25rem; } .controls,.directory-grid { grid-template-columns:1fr; } .search-field { grid-column:auto; } .check { align-self:auto; } .finder-head,.note,footer { align-items:flex-start; flex-direction:column; } .gym-card { min-height:0; } .gallery-grid { grid-template-columns:1fr; } .gallery-grid figure { height:auto; min-height:280px; } .gallery-grid img { height:auto; max-height:560px; } }