/* ParkWelly brand system
   Charcoal and parchment carry the interface. Deep green is the brand
   signature, champagne brass is reserved for primary actions and premium
   detail. Stone, terracotta and moss are functional states only. */

:root {
  --charcoal: #111312;
  --charcoal-soft: #1b1e1c;
  --green: #163F32;
  --green-bright: #1e5643;
  --brass: #D6B77B;
  --brass-deep: #c2a05f;
  --parchment: #EFE8DA;
  --porcelain: #F7F3EB;
  --stone: #7A7D75;
  --terracotta: #B84C3A;
  --moss: #7A9652;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--parchment);
  color: var(--charcoal);
  line-height: 1.6;
  font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; line-height: 1.12; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: 18px;
}

/* Header */
.site-header {
  background: var(--charcoal);
  color: var(--porcelain);
  border-bottom: 1px solid rgba(214, 183, 123, 0.25);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  max-width: 1420px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 26px;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.logo-mark { width: 40px; height: 40px; margin-right: 12px; }
.site-footer .wordmark .logo-mark { width: 34px; height: 34px; }
.wordmark .park { color: var(--porcelain); }
.wordmark .welly { color: var(--brass); }
.main-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.main-nav a {
  color: var(--porcelain);
  text-decoration: none;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  font-weight: 600;
  opacity: 0.9;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--brass); opacity: 1; }
.main-nav a.nav-cta {
  border: 1px solid var(--brass);
  color: var(--brass);
  padding: 8px 16px;
  border-radius: 3px;
}
.main-nav a.nav-cta:hover { background: var(--brass); color: var(--charcoal); }
/* Account menu: brass box with hover dropdown */
.user-menu { position: relative; }
.user-box {
  display: inline-block;
  background: var(--brass);
  color: var(--charcoal) !important;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 14.5px;
}
.user-box:hover { background: var(--brass-deep); color: var(--charcoal); }
.user-drop {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  padding-top: 10px;
  min-width: 220px;
  z-index: 1100;
}
.user-menu:hover .user-drop, .user-menu:focus-within .user-drop { display: block; }
.user-drop > a, .user-drop button {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--charcoal);
  color: var(--porcelain);
  border: 1px solid rgba(214, 183, 123, 0.35);
  border-top: none;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--sans);
  cursor: pointer;
}
.user-drop > a:first-child { border-top: 2px solid var(--brass); border-radius: 3px 3px 0 0; }
.user-drop form { margin: 0; }
.user-drop button { border-radius: 0 0 3px 3px; color: var(--terracotta); }
.user-drop > a:hover, .user-drop button:hover { background: var(--green); color: var(--brass); }

.nav-badge {
  display: inline-block;
  background: var(--terracotta);
  color: var(--porcelain);
  border-radius: 9px;
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--brass);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  border-radius: 3px;
  padding: 14px 26px;
  cursor: pointer;
}
.btn:hover { background: var(--brass-deep); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--brass);
  color: var(--brass);
}
.btn-outline:hover { background: var(--brass); color: var(--charcoal); }
.btn-dark { background: var(--green); color: var(--porcelain); }
.btn-dark:hover { background: var(--green-bright); }
.btn-small { padding: 8px 15px; font-size: 13px; }
.btn-danger { background: transparent; border: 1px solid var(--terracotta); color: var(--terracotta); }
.btn-danger:hover { background: var(--terracotta); color: var(--porcelain); }

/* Hero */
.hero {
  background: var(--charcoal);
  color: var(--porcelain);
  position: relative;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: saturate(0.65);
  z-index: 0;
  pointer-events: none;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(17, 19, 18, 0.55) 0%,
    rgba(17, 19, 18, 0.25) 45%,
    rgba(17, 19, 18, 0.75) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero-inner {
  max-width: 680px;
  padding: 110px 0 84px;
}
.hero h1 {
  font-size: clamp(44px, 6.5vw, 76px);
  color: var(--porcelain);
  margin-bottom: 12px;
}
.hero p.lede {
  color: rgba(247, 243, 235, 0.75);
  font-size: 18px;
  max-width: 34em;
  margin-bottom: 36px;
}
/* Search panel */
.search-panel {
  background: var(--porcelain);
  border: 1px solid var(--brass);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  margin-bottom: 20px;
}
.search-panel .field {
  padding: 18px 22px;
  border-right: 1px solid rgba(17, 19, 18, 0.12);
}
.search-panel label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--stone);
  font-weight: 700;
  margin-bottom: 4px;
}
.search-panel input, .search-panel select {
  font-family: var(--serif);
  font-size: 20px;
  border: none;
  background: transparent;
  color: var(--charcoal);
  width: 100%;
  outline: none;
}
.search-panel .search-btn {
  margin: 10px;
  align-self: stretch;
  display: flex;
}
.search-panel .search-btn button { flex: 1; }
.hero .search-panel { margin-bottom: 72px; }
.hero-boot {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--brass);
  margin: 4px 0 26px;
}

/* Sections */
.section { padding: 80px 0; }
.section-dark { background: var(--charcoal); color: var(--porcelain); }
.section-green { background: var(--green); color: var(--porcelain); }

/* Brass ring motif from the share card, echoed on dark surfaces */
.section-dark, .section-green, .page-head { position: relative; overflow: hidden; }
.section-dark::before, .section-green::before, .page-head::before {
  content: "";
  position: absolute;
  right: -190px;
  top: -340px;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
    transparent 0 104px,
    rgba(214, 183, 123, 0.16) 104px 105.5px);
  pointer-events: none;
}
.section-dark > .wrap, .section-green > .wrap, .page-head > .wrap { position: relative; }
.section-porcelain { background: var(--porcelain); }
.section h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 20px; }
.section .sub { color: var(--stone); max-width: 44em; margin-bottom: 44px; font-size: 17px; }
.section-dark .sub, .section-green .sub { color: rgba(247, 243, 235, 0.7); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-detail { grid-template-columns: 1.4fr 1fr; align-items: start; }

.card {
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.1);
  border-radius: 4px;
  padding: 32px 28px;
}
.section-dark .card, .section-green .card {
  background: rgba(247, 243, 235, 0.05);
  border-color: rgba(214, 183, 123, 0.3);
  color: var(--porcelain);
}
.card h3 { font-size: 22px; margin-bottom: 12px; }
.card p { font-size: 15px; color: var(--stone); }
.section-dark .card p, .section-green .card p { color: rgba(247, 243, 235, 0.7); }
.card .step-no {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--brass);
  display: block;
  margin-bottom: 14px;
}

/* Space cards */
.space-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.space-card {
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.12);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}
.space-card:hover { border-color: var(--brass); }
.space-card .photo {
  aspect-ratio: 4 / 2.6;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.space-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.space-card .photo svg { width: 64px; opacity: 0.65; }
.space-card .body { padding: 20px 22px 22px; }
.space-card h3 { font-size: 19px; margin-bottom: 6px; }
.space-card .meta { font-size: 13.5px; color: var(--stone); margin-bottom: 12px; }
.space-card .price { font-family: var(--serif); font-size: 22px; }
.space-card .price span { font-family: var(--sans); font-size: 13px; color: var(--stone); }

.pill {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 700;
  border-radius: 3px;
  padding: 3px 9px;
  vertical-align: middle;
}
.pill-green { background: var(--green); color: var(--porcelain); }
.pill-brass { background: var(--brass); color: var(--charcoal); }
.pill-stone { background: rgba(122, 125, 117, 0.18); color: var(--stone); }
.pill-terracotta { background: var(--terracotta); color: var(--porcelain); }
.pill-moss { background: var(--moss); color: var(--porcelain); }

/* Forms */
.form-card {
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.12);
  border-radius: 4px;
  padding: 40px;
  max-width: 560px;
}
.form-wide { max-width: 760px; }
.form-row { margin-bottom: 22px; }
.form-row label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--stone);
  margin-bottom: 7px;
}
.form-row input[type=text], .form-row input[type=email],
.form-row input[type=password], .form-row input[type=number],
.form-row input[type=date], .form-row input[type=tel],
.form-row select, .form-row textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 19, 18, 0.25);
  border-radius: 3px;
  background: #fff;
  color: var(--charcoal);
}
.form-row textarea { min-height: 110px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--brass);
  border-color: var(--brass);
}
.form-row .hint { font-size: 13px; color: var(--stone); margin-top: 5px; }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.checkbox-row { display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.checkbox-row label { display: flex; align-items: center; gap: 8px; }

/* Flash messages */
.flash-stack { margin: 24px auto 0; }
.flash {
  background: var(--green);
  color: var(--porcelain);
  border-left: 4px solid var(--brass);
  border-radius: 3px;
  padding: 14px 18px;
  margin-bottom: 10px;
  font-size: 15px;
}

/* Tables */
.data-table { width: 100%; border-collapse: collapse; background: var(--porcelain); font-size: 14.5px; }
.data-table th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--stone);
  border-bottom: 2px solid var(--charcoal);
  padding: 10px 12px;
}
.data-table td { padding: 12px; border-bottom: 1px solid rgba(17, 19, 18, 0.1); vertical-align: top; }
.table-scroll { overflow-x: auto; border: 1px solid rgba(17, 19, 18, 0.12); border-radius: 4px; }

/* Page headers for inner pages */
.page-head { background: var(--charcoal); color: var(--porcelain); padding: 64px 0 56px; }
.page-head h1 { font-size: clamp(34px, 5vw, 56px); }
.page-head p { color: rgba(247, 243, 235, 0.7); margin-top: 14px; max-width: 40em; font-size: 17px; }

/* Prose (faq, terms) */
.prose { max-width: 720px; }
.prose h2 { font-size: 26px; margin: 36px 0 12px; }
.prose h3 { font-size: 20px; margin: 26px 0 10px; }
.prose p, .prose li { color: #3a3d3b; margin-bottom: 12px; font-size: 16px; }
.prose ul { padding-left: 22px; }

/* Suggestions dropdown */
.suggest-box {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--porcelain);
  border: 1px solid var(--brass);
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 1200;
  box-shadow: 0 8px 20px rgba(17, 19, 18, 0.18);
  max-height: 320px;
  overflow-y: auto;
}
.suggest-item {
  padding: 11px 16px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--charcoal);
  cursor: pointer;
}
.suggest-item:hover, .suggest-item.active { background: var(--parchment); color: var(--green); }

/* Search layout, ParkLet style: search and listings in a sidebar, the
   map takes everything else. No footer on this page. */
.search-shell { padding: 0; }
.search-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  height: calc(100vh - 73px);
  min-height: 560px;
}
.search-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--parchment);
  border-right: 1px solid rgba(17, 19, 18, 0.15);
}
.side-search {
  padding: 14px 14px 12px;
  background: var(--charcoal);
}
.side-search-dest { position: relative; }
.side-search-dest input {
  width: 100%;
  font-family: var(--serif);
  font-size: 17px;
  padding: 11px 14px;
  border: 1px solid var(--brass);
  border-radius: 3px;
  background: var(--porcelain);
  color: var(--charcoal);
  outline: none;
  box-sizing: border-box;
}
.side-search-row { display: flex; gap: 8px; margin-top: 10px; }
.side-search-row select {
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  padding: 9px 8px;
  border: 1px solid rgba(214, 183, 123, 0.5);
  border-radius: 3px;
  background: rgba(247, 243, 235, 0.08);
  color: var(--porcelain);
  outline: none;
}
.side-search-row select option { color: var(--charcoal); }
.search-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 14px;
  min-height: 0;
}
.search-list > * { flex-shrink: 0; }
.search-count { font-size: 13px; color: var(--stone); margin: 0 0 2px; }

/* Sidebar cards: photo on the left like ParkLet */
.space-row { flex-direction: row; align-items: stretch; min-height: 104px; }
.space-row .photo {
  width: 118px;
  flex: 0 0 118px;
  aspect-ratio: auto;
}
.space-row .body { padding: 12px 14px; }
.space-row h3 { font-size: 15.5px; margin-bottom: 4px; }
.space-row .meta { font-size: 12px; margin-bottom: 6px; }
.space-row .price { font-size: 17px; }
.space-row .pill { font-size: 9.5px; padding: 2px 7px; }
.search-map { position: relative; }
#map { height: 100%; width: 100%; border: none; }
.space-card .photo img.logo-ph {
  width: 46px;
  height: 46px;
  object-fit: contain;
  opacity: 0.9;
}

/* Map style switcher, like the Prime Parking zones map */
.map-style-ctl {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.25);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(17, 19, 18, 0.2);
}
.map-style-ctl button {
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--charcoal);
  padding: 7px 12px;
  cursor: pointer;
  border-right: 1px solid rgba(17, 19, 18, 0.12);
}
.map-style-ctl button:last-child { border-right: none; }
.map-style-ctl button.active { background: var(--charcoal); color: var(--brass); }

/* Price pill markers: compact, with a pointer tail on the exact spot */
.map-pill {
  position: relative;
  background: var(--charcoal);
  color: var(--brass);
  border: 1px solid var(--brass);
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(17, 19, 18, 0.35);
}
.map-pill::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7.5px;
  transform: translateX(-50%);
  border-left: 7.5px solid transparent;
  border-right: 7.5px solid transparent;
  border-top: 7.5px solid var(--brass);
}
.map-pill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5.5px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--charcoal);
}
.map-pill:hover { background: var(--green); }
.map-pill:hover::after { border-top-color: var(--green); }
.map-pill-taken { background: var(--stone); color: var(--porcelain); border-color: var(--stone); }
.map-pill-taken::before { border-top-color: var(--stone); }
.map-pill-taken::after { border-top-color: var(--stone); }
.map-origin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--terracotta);
  border: 3px solid var(--porcelain);
  box-shadow: 0 1px 4px rgba(17, 19, 18, 0.4);
}
.mapboxgl-popup-content { font-family: var(--sans); font-size: 14px; padding: 12px 16px; }
.mapboxgl-popup-content a { color: var(--green); font-weight: 700; }

/* Stat tiles */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  background: var(--porcelain);
  border: 1px solid rgba(17, 19, 18, 0.12);
  border-radius: 4px;
  padding: 22px;
}
.stat .n { font-family: var(--serif); font-size: 34px; display: block; }

/* Calculator */
.calc {
  background: var(--charcoal);
  color: var(--porcelain);
  border-radius: 4px;
  padding: 40px;
}
.calc .result { font-family: var(--serif); font-size: 44px; color: var(--brass); }
.calc select {
  font-family: var(--serif);
  font-size: 20px;
  background: transparent;
  color: var(--porcelain);
  border: none;
  border-bottom: 1px solid var(--brass);
  padding: 6px 2px;
  outline: none;
}
.calc select option { color: var(--charcoal); }

/* Hub sub-navigation on account pages */
.hub-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.hub-nav a {
  color: rgba(247, 243, 235, 0.75);
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 3px 3px 0 0;
}
.hub-nav a:hover { color: var(--brass); }
.hub-nav a.active { background: var(--parchment); color: var(--charcoal); }

/* Tabs */
.tab-row { display: flex; gap: 6px; border-bottom: 2px solid var(--charcoal); margin-bottom: 20px; flex-wrap: wrap; }
.tab-row a {
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--stone);
  padding: 9px 16px;
  border-radius: 3px 3px 0 0;
}
.tab-row a.active { background: var(--charcoal); color: var(--brass); }

/* Booking calendar */
.cal-table { width: 100%; border-collapse: collapse; background: var(--porcelain); }
.cal-table td { border: 1px solid rgba(17, 19, 18, 0.1); vertical-align: top; height: 74px; width: 14.28%; padding: 6px; font-size: 13px; }
.cal-table td.other-month { background: var(--parchment); color: var(--stone); }
.cal-table td.booked { background: var(--green); color: var(--porcelain); }
.cal-table td.booked .who { font-size: 11px; color: var(--brass); display: block; margin-top: 4px; }
.cal-table td.today-cell { outline: 2px solid var(--brass); outline-offset: -2px; }

/* Message threads */
.msg-bubble { max-width: 75%; border-radius: 6px; padding: 12px 16px; margin-bottom: 10px; font-size: 15px; }
.msg-mine { background: var(--green); color: var(--porcelain); margin-left: auto; }
.msg-theirs { background: var(--porcelain); border: 1px solid rgba(17, 19, 18, 0.12); }
.msg-meta { font-size: 11.5px; color: var(--stone); margin-bottom: 4px; }
.msg-mine .msg-meta { color: rgba(247, 243, 235, 0.65); }

@media print {
  .site-header, .site-footer, .hub-nav, .no-print { display: none !important; }
  .page-head { background: none; color: var(--charcoal); padding: 0 0 12px; }
  .page-head h1 { color: var(--charcoal); }
  body { background: #fff; }
}

/* Space detail: feature tiles and fact grid */
.feature-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.feature-tile {
  background: var(--green);
  color: var(--porcelain);
  border-radius: 3px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  font-size: 15px;
}
.fact-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--stone);
  font-weight: 700;
  margin-bottom: 2px;
}
#minimap {
  height: 300px;
  border: 1px solid rgba(17, 19, 18, 0.2);
  border-radius: 4px;
}

/* Footer */
.site-footer {
  background: var(--charcoal);
  color: var(--porcelain);
  padding: 56px 0 40px;
  margin-top: 0;
}
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.site-footer a { color: rgba(247, 243, 235, 0.75); text-decoration: none; display: block; font-size: 14.5px; margin-bottom: 8px; }
.site-footer a:hover { color: var(--brass); }
.site-footer .tag { color: rgba(247, 243, 235, 0.45); font-size: 13px; border-top: 1px solid rgba(214, 183, 123, 0.2); padding-top: 24px; }

/* Utility */
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.muted { color: var(--stone); }
.center { text-align: center; }
.inline-form { display: inline; }

@media (max-width: 880px) {
  .wrap { padding: 0 18px; }

  /* Compact two-row header */
  .site-header .wrap {
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 12px;
    min-height: 0;
  }
  .wordmark { font-size: 21px; }
  .logo-mark { width: 30px; height: 30px; margin-right: 8px; }
  .main-nav { justify-content: center; gap: 8px 16px; }
  .main-nav a { font-size: 13.5px; }
  .main-nav a.nav-cta { padding: 5px 12px; }
  .user-box { padding: 6px 14px; font-size: 13.5px; }
  .user-drop { right: -60px; }

  .hero-inner { padding: 52px 0 40px; }
  .hero h1 { font-size: 40px; }
  .search-panel { grid-template-columns: 1fr; }
  .search-panel .field { border-right: none; border-bottom: 1px solid rgba(17, 19, 18, 0.12); }
  .grid-3, .grid-2, .grid-detail, .space-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 16px; }
  .stat .n { font-size: 26px; }

  /* Search page flows as one scroll: search, map, then the list */
  .search-layout { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .search-sidebar { display: contents; }
  .side-search { order: 1; }
  .search-map { order: 2; height: 340px; }
  #map { border-left: none; }
  .search-list { order: 3; max-height: none; overflow: visible; background: var(--parchment); }

  .section { padding: 52px 0; }
  .page-head { padding: 40px 0 36px; }
  .form-card { padding: 24px 20px; }
  .hub-nav { gap: 2px; }
  .hub-nav a { padding: 7px 10px; font-size: 12px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .form-split { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr; }
}