:root { --char: #111216; --lime: #a7d52a; --orange: #f36a2d; --line: rgba(255,255,255,0.1); }
* { box-sizing: border-box; }
body { margin: 0; color: #f6f7f8; font-family: "Arial Black", Arial, sans-serif; background: linear-gradient(135deg, rgba(167,213,42,0.08), transparent 30%), linear-gradient(180deg, #111216, #1a1d23 50%, #111216); }
a { color: inherit; }
.page-header, .score-head, .hero-row, .zones-grid, .footer-row { width: min(1240px, calc(100% - 1rem)); margin: 0 auto; }
.page-header { padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.back-link, .switcher select, .intro-card, .logo-card, .hours-card, .copy-card, .detail-card, .contact-card, .map-card, .hero-image { border: 1px solid var(--line); border-radius: 24px; }
.back-link { text-decoration: none; padding: 0.85rem 1rem; background: rgba(255,255,255,0.05); }
.switcher { display: grid; gap: 0.35rem; justify-items: end; font-size: 0.82rem; font-family: "Trebuchet MS", Arial, sans-serif; }
.switcher span, .eyebrow, figcaption { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; color: var(--lime); }
.switcher select { min-width: min(360px,72vw); padding: 0.9rem 1rem; background: rgba(255,255,255,0.06); color: #f6f7f8; }
.gym-page { display: grid; gap: 1rem; padding-bottom: 2rem; }
.score-head { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 1rem; }
.intro-card, .logo-card, .hours-card, .copy-card, .detail-card, .contact-card, .map-card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); padding: 1.2rem; box-shadow: 0 26px 60px rgba(0,0,0,0.28); }
h1, h2 { margin: 0 0 0.7rem; line-height: 0.92; overflow-wrap: anywhere; }
h1 { font-size: clamp(3rem, 8vw, 6rem); max-width: 7ch; }
h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
p, span { line-height: 1.7; overflow-wrap: anywhere; font-family: "Trebuchet MS", Arial, sans-serif; }
.logo-card img, .hero-image, .detail-card img { width: 100%; object-fit: cover; border-radius: 16px; background: linear-gradient(135deg, #4a5568, #242933); }
.logo-card img { aspect-ratio: 1 / 1; margin-top: 0.6rem; }
.hero-row { display: grid; grid-template-columns: 0.74fr 1.26fr; gap: 1rem; }
.hero-image { min-height: 520px; }
.hours-list { display: grid; gap: 0.65rem; margin-top: 1rem; }
.hours-list span { display: inline-flex; width: fit-content; padding: 0.7rem 0.85rem; border-radius: 999px; background: rgba(167,213,42,0.12); }
.zones-grid { display: grid; grid-template-columns: 0.9fr 0.9fr 1fr 0.9fr; gap: 1rem; align-items: start; }
.detail-card img { min-height: 240px; }
.footer-row { display: grid; grid-template-columns: 1fr 0.9fr; gap: 1rem; }
.map-card { position: relative; overflow: hidden; min-height: 280px; background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(167,213,42,0.08)); }
.map-grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 20%, rgba(255,255,255,0.12) 20% 24%, transparent 24% 52%, rgba(255,255,255,0.12) 52% 56%, transparent 56% 78%, rgba(255,255,255,0.12) 78% 82%, transparent 82%), linear-gradient(transparent 0 25%, rgba(243,106,45,0.14) 25% 29%, transparent 29% 61%, rgba(243,106,45,0.14) 61% 65%, transparent 65%); }
.pin { position: absolute; top: 47%; left: 56%; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 10px rgba(243,106,45,0.18); }
.map-card span { position: absolute; left: 1rem; bottom: 1rem; padding: 0.55rem 0.8rem; border-radius: 999px; background: rgba(255,255,255,0.08); font-family: "Trebuchet MS", Arial, sans-serif; }
@media (max-width: 920px) { .page-header, .score-head, .hero-row, .zones-grid, .footer-row { grid-template-columns: 1fr; display: grid; } .switcher { justify-items: start; } }