:root{
  --bg: #fafbfc;          /* light gray-white */
  --panel: #ffffff;       /* pure white */
  --muted: #6b7280;       /* gray-500 */
  --text: #1f2937;        /* gray-800 */
  --brand: #3b82f6;       /* blue-500 */
  --accent: #6366f1;      /* indigo-500 */
  --ring: rgba(59,130,246,.3);
  --radius: 16px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(1200px 600px at 100% -10%, rgba(59,130,246,.06), transparent),
  linear-gradient(180deg, #f8fafc 0%, var(--bg) 60%);
}
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{ width: min(1120px, 92%); margin-inline: auto; }
header{
  position: sticky; top:0; backdrop-filter: saturate(140%) blur(6px);
  background: rgba(255,255,255,.8); border-bottom: 1px solid rgba(107,114,128,.15);
  z-index: 50;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing: .2px; }
.logo{
  width:40px; height:40px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--accent));
  display:grid; place-items:center; color:#ffffff; font-weight:800;
  box-shadow: 0 8px 30px rgba(59,130,246,.25);
}
.cta{ display:flex; gap:10px; align-items:center; }
.btn{ appearance:none; border:none; padding:10px 14px; border-radius: 999px; font-weight:600; cursor:pointer; }
.btn-primary{ background: linear-gradient(135deg, var(--brand), var(--accent)); color:#ffffff; box-shadow: 0 10px 30px rgba(59,130,246,.25); }
.btn-primary:focus{ outline: 3px solid var(--ring); outline-offset: 2px; }

.hero{ padding: 64px 0 28px; text-align:center; }
.hero h1{ font-size: clamp(28px, 5vw, 44px); margin: 10px 0 12px; }
.hero p{ color: var(--muted); font-size: clamp(14px, 2.2vw, 18px); margin: 0 auto; max-width: 56ch; line-height: 1.5em; }

.cards{ display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); margin: 36px 0 18px; }
.card{ grid-column: span 4; background: var(--panel);
  border:1px solid rgba(107,114,128,.15); border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  margin: 0;
}
@media (max-width: 900px){ .card{ grid-column: span 6; } }
@media (max-width: 640px){ .card{ grid-column: span 12; } }
.card img{ display:block; width:100%; aspect-ratio: 4 / 3; object-fit:cover; background:#f3f4f6; }
.card .cap{ padding: 12px 14px; color: var(--muted); font-size: 14px; border-top: 1px solid rgba(107,114,128,.12); }

.panel{
  display:grid; gap: 22px; grid-template-columns: repeat(12, 1fr); align-items:start; margin: 38px 0 72px;
}
.info{ grid-column: span 7; background: var(--panel);
  border:1px solid rgba(107,114,128,.15); border-radius: var(--radius); padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.map{ grid-column: span 5; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(107,114,128,.15); min-height: 320px; }
@media (max-width: 980px){ .info{ grid-column: span 12; } .map{ grid-column: span 12; } }

.info h2{ margin: 6px 0 12px; font-size: 22px; }
.info .row{ display:flex; gap:18px; align-items:flex-start; padding: 10px 8px; border-radius: 12px; }
.k{ width: 120px; color: var(--muted); }
.v{ flex:1; }
.mono{ font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; }
.map{ grid-column: span 5; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(107,114,128,.15); aspect-ratio: 4/3; }
.hours{ width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 14px; color: var(--muted); }
.hours td{ padding: 6px 0; border-bottom: 1px dashed rgba(107,114,128,.2); }
.hours td:first-child{ width: 40%; }

footer{ padding: 28px 0 48px; color: var(--muted); text-align:center; font-size: 14px; border-top: 1px solid rgba(107,114,128,.15); }