/* ============================================================
   COMMUNITIES LANDING PAGE — Milestone 2 (2026-07-24)
   Shares the Ulomi design system — same tokens as styles.css,
   destination.css, floor-plan-viewer.css. No new colors, fonts, or
   spacing scale introduced.
   ============================================================ */

.communities-landing {
  --cty-gold: var(--gold, #B8922A);
  --cty-ink: var(--ink, #1e1e1e);
  --cty-mid: var(--mid, #5e5e5e);
  --cty-muted: var(--muted, #999);
  --cty-border: var(--border, #e2e2e2);
  --cty-bg2: var(--bg2, #f8f7f5);
  --cty-r: var(--r, 3px);
  --cty-r-lg: var(--r-lg, 16px);
  --cty-shadow-card: var(--shadow-card, 0 10px 28px rgba(20,16,8,0.08), 0 1px 4px rgba(20,16,8,0.04));
  --cty-shadow-lift: var(--shadow-lift, 0 22px 52px rgba(20,16,8,0.16), 0 3px 10px rgba(20,16,8,0.07));
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  color: var(--cty-ink);
  max-width: 1440px;
  margin: 0 auto;
  padding: 5rem 3rem 7rem;
}
.cty-loading { text-align: center; padding: 8rem 1rem; color: var(--cty-muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ── header ── */
.cty-head { text-align: center; max-width: 640px; margin: 0 auto 4.5rem; }
.cty-eyebrow { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cty-gold); margin-bottom: 1rem; font-weight: 600; }
/* M11: raised from 64px to sit with the homepage hero (76px) and each
   community page's own arrival title (72px) — the Communities page is
   the site's own directory and had the least commanding title of the
   three "first thing you see" moments. */
.cty-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; margin: 0; }
.cty-rule { width: 36px; height: 1px; background: var(--cty-gold); margin: 1.35rem auto 0; }
.cty-intro { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 300; font-size: 18px; color: var(--cty-mid); line-height: 1.65; margin: 1.5rem 0 0; }

/* ── desktop split: list left, map right ── */
/* Milestone 9d (visual-composition pass): tightened from 3rem so the
   two columns read as one spread rather than two separate blocks with
   a gap between them. */
.cty-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; align-items: start; }

/* ── list ── */
/* Milestone 9d: same 16px radius and a quiet lifted shadow as
   .cty-map-pane below, and the same faint champagne-gold border tint
   — the list is now the same "material" as the map card instead of a
   flat, square-cornered table sitting beside a decorative widget. The
   shadow stays lighter than the map's so the map still reads as the
   more prominent of the two. */
.cty-list-pane { display: flex; flex-direction: column; gap: 1px; background: var(--cty-border); border: 1px solid rgba(184,146,42,0.16); border-radius: var(--cty-r-lg); box-shadow: var(--cty-shadow-card); overflow: hidden; }
.cty-card { background: #fff; cursor: pointer; display: grid; grid-template-columns: 200px 1fr; transition: background .15s ease, box-shadow .15s ease; box-shadow: inset 3px 0 0 transparent; }
.cty-card:hover { background: var(--cty-bg2); }
.cty-card:focus-visible { outline: 2px solid var(--cty-gold); outline-offset: -2px; }
/* Marker -> card cue (Milestone 9c): a quiet gold edge, not a full
   background swap, so it reads as "this is the one on the map" rather
   than looking like a second :hover state. */
.cty-card--highlight { background: var(--cty-bg2); box-shadow: inset 3px 0 0 var(--cty-gold); }
.cty-card-img { background-size: cover; background-position: center; background-color: var(--cty-bg2); min-height: 180px; }
/* M12: honest placeholder for a community with no photography/rendering
   yet — same language as destination.css's .dest-home-media--empty. */
.cty-card-img--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--cty-muted); }
.cty-card-img--empty i { font-size: 22px; color: var(--cty-gold); opacity: 0.7; }
.cty-card-img--empty span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.cty-card-body { padding: 1.75rem 2rem; display: flex; flex-direction: column; align-items: flex-start; }
.cty-status { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--cty-muted); margin-bottom: 0.6rem; }
.cty-status--selling { color: #0a7050; }
.cty-status--sold { color: var(--cty-muted); }
.cty-status--soon { color: #9a6005; }
.cty-card-name { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 26px; font-weight: 300; line-height: 1.1; margin: 0 0 0.4rem; }
.cty-card-line { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 14px; color: var(--cty-mid); line-height: 1.6; margin: 0 0 0.6rem; max-width: 40ch; }
.cty-card-location { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cty-muted); margin-bottom: 0.85rem; }
.cty-card-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 0.6rem; }
.cty-meta-item { font-size: 11px; color: var(--cty-mid); }
.cty-meta-item:not(:last-child) { padding-right: 14px; border-right: 1px solid var(--cty-border); }
.cty-card-price { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 15px; color: var(--cty-ink); margin-bottom: 1.1rem; }
.cty-card-cta { align-self: flex-start; padding: 10px 24px; font-size: 10px; }

/* M14 bug fix: the map component now carries its own tokens.
   Every --cty-* value used by the map, its markers, and its popups was
   previously declared only on .communities-landing — so on the two
   surfaces that mount this same component *outside* that wrapper (the
   homepage, and each community page's Location module, which scopes
   --dest-* instead), var(--cty-gold) resolved to nothing and the
   marker's background computed to rgba(0,0,0,0) — the champagne-gold
   pin rendered as an empty white ring. Declaring the set here makes
   the shared component self-sufficient wherever it is mounted, which
   is what "the one interactive-map implementation, shared" already
   intended. Inside .communities-landing these simply re-resolve to the
   identical global values, so that page is unchanged. */
.cty-map-pane {
  --cty-gold: var(--gold, #B8922A);
  --cty-ink: var(--ink, #1e1e1e);
  --cty-mid: var(--mid, #5e5e5e);
  --cty-muted: var(--muted, #999);
  --cty-border: var(--border, #e2e2e2);
  --cty-bg2: var(--bg2, #f8f7f5);
  --cty-r-lg: var(--r-lg, 16px);
  --cty-shadow-lift: var(--shadow-lift, 0 22px 52px rgba(20,16,8,0.16), 0 3px 10px rgba(20,16,8,0.07));
}

/* ── map framework — Milestone 9c: premium framing, not a generic
   embedded map. Champagne-gold hairline border, soft lifted shadow,
   16px radius, clean white base so the map imagery itself supplies
   all the color. ── */
/* Milestone 9d: a touch more lift than the list pane's shadow (below)
   so the map keeps its "luxury feature" weight within the pair rather
   than reading as equally-weighted twins. */
.cty-map-pane { position: sticky; top: 90px; border: 1px solid rgba(184,146,42,0.35); border-radius: var(--cty-r-lg); background: #fff; box-shadow: var(--cty-shadow-lift); height: 528px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cty-map-pane::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(30,30,30,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 85%);
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 85%);
}
.cty-map-empty { position: relative; z-index: 1; text-align: center; padding: 3rem 2.5rem; max-width: 320px; }
.cty-map-glyph { color: var(--cty-gold); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.cty-map-empty-eyebrow { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cty-gold); font-weight: 600; margin-bottom: 0.9rem; }
.cty-map-empty-rule { width: 26px; height: 1px; background: var(--cty-gold); margin: 0 auto 1.15rem; }
.cty-map-empty-copy { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 300; font-size: 16px; color: var(--cty-mid); line-height: 1.65; }

/* ── real Leaflet map (Milestone 6, restyled Milestone 9c) ── */
/* width/height:100% (not position:absolute+inset:0) — Leaflet's own
   .leaflet-container rule sets position:relative on this same element,
   which wins the cascade regardless of source order (both are single-
   class selectors), so inset:0 would never actually apply. As a 100%
   sized flex child of .cty-map-pane it fills correctly regardless. */
.cty-map-leaflet { position: relative; width: 100%; height: 100%; z-index: 1; border-radius: 15px; }
/* M16: no colour filter on the tiles, deliberately.
   The old rule (saturate .74 / brightness 1.08) existed to tame raw
   OSM's loud navigation palette. A later attempt swapped it for a heavy
   sepia wash over Positron, which over-baked the map into a flat beige
   field and washed out the greenery — the opposite of the goal. Voyager
   already ships the warm, restrained palette we were trying to fake with
   filters, so it is left untouched. If this ever needs toning, do it
   gently (saturate no lower than ~0.9) and check the woodland still
   reads green — that green is the point. */

/* M16: zoom controls dialled back to a whisper. The previous treatment
   was already branded, but a white chip with a hard border and a lifted
   shadow still announced itself as an interface control sitting on top
   of the artwork. Now it is translucent, borderless until hovered, and
   sized down — present for anyone who wants it, invisible to anyone who
   does not. */
.cty-map-leaflet .leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 10px rgba(20,16,8,0.08) !important;
  border-radius: 8px !important; overflow: hidden; margin: 14px !important;
}
.cty-map-leaflet .leaflet-control-zoom a {
  color: rgba(30,28,25,0.5) !important;
  background: rgba(255,253,249,0.82) !important;
  font-weight: 300 !important;
  width: 26px !important; height: 26px !important; line-height: 26px !important;
  font-size: 15px !important;
  backdrop-filter: blur(3px);
  transition: background .15s ease, color .15s ease;
}
.cty-map-leaflet .leaflet-control-zoom a:hover { background: #fff !important; color: var(--cty-gold) !important; }
.cty-map-leaflet .leaflet-control-zoom-in { border-bottom: 1px solid rgba(184,146,42,0.14) !important; }

/* M16: attribution is legally required (OSM + CARTO) and stays fully
   present and clickable — but it was rendering as bright blue hyperlinks
   plus Leaflet's own flag glyph, which is the most "developer artifact"
   pixel on the page. Muted to a near-invisible whisper that darkens on
   hover, and Leaflet's decorative flag is hidden (it is not part of the
   required credit). */
.cty-map-leaflet .leaflet-control-attribution {
  background: rgba(255,253,249,0.7) !important;
  border-radius: 6px 0 0 0;
  font-size: 9px !important;
  color: rgba(30,28,25,0.34) !important;
  padding: 2px 6px !important;
}
.cty-map-leaflet .leaflet-control-attribution a { color: rgba(30,28,25,0.44) !important; text-decoration: none !important; }
.cty-map-leaflet .leaflet-control-attribution a:hover { color: var(--cty-gold) !important; text-decoration: underline !important; }
.cty-map-leaflet .leaflet-attribution-flag { display: none !important; }

/* ── branded popup ── */
.cty-map-leaflet .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 14px 36px rgba(20,16,8,0.22); padding: 2px; }
.cty-map-leaflet .leaflet-popup-content { margin: 1.2rem 1.4rem; min-width: 156px; }
.cty-map-leaflet .leaflet-popup-tip { box-shadow: 0 6px 14px rgba(20,16,8,0.14); }
.cty-map-popup-eyebrow { font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cty-gold); font-weight: 600; margin-bottom: 0.55rem; }
.cty-map-popup-name { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 21px; font-weight: 400; color: var(--cty-ink); line-height: 1.18; margin-bottom: 7px; }
.cty-map-popup-line { font-size: 11px; letter-spacing: 0.04em; color: var(--cty-mid); }
.cty-map-popup-status { display: inline-block; margin-top: 12px; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--cty-gold); padding: 3px 9px; border: 1px solid var(--cty-gold); border-radius: 999px; }

/* ── premium markers ── */
.cty-map-marker-wrap { background: transparent; border: none; }
.cty-map-marker-dot {
  display: block; width: 18px; height: 18px; margin: 2px; border-radius: 50%;
  background: var(--cty-gold); border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(20,16,8,0.32), 0 0 0 1px rgba(184,146,42,0.22);
  /* Standard "ease" curve, not the earlier spring/overshoot one — a
     restrained, understated grow rather than a bouncy Google-Maps-style
     pop. */
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .15s ease;
  cursor: pointer;
}
.cty-map-marker-dot--approx { background: #fff; border-color: var(--cty-gold); box-shadow: 0 3px 10px rgba(20,16,8,0.2); }
.cty-map-marker-dot:hover { transform: scale(1.18); box-shadow: 0 4px 13px rgba(20,16,8,0.3), 0 0 0 4px rgba(184,146,42,0.14); }
.cty-map-marker-dot.cty-map-marker--active { transform: scale(1.35); box-shadow: 0 4px 14px rgba(184,146,42,0.45), 0 0 0 6px rgba(184,146,42,0.14); }

/* M15 final pass: a soft standing halo, scoped to the homepage Location
   map only (not the shared Communities-page / destination-page maps,
   which already read fine on their own and shouldn't shift because of
   a homepage-specific request). Once landmark markers joined the frame,
   the gold dots needed to read as unmistakably the main event even at
   a glance, not just under hover — a permanent soft glow does that
   without changing the dot itself. */
.loc-map-frame .cty-map-marker-dot { box-shadow: 0 3px 10px rgba(20,16,8,0.32), 0 0 0 1px rgba(184,146,42,0.22), 0 0 0 7px rgba(184,146,42,0.13); }
.loc-map-frame .cty-map-marker-dot:hover { box-shadow: 0 4px 13px rgba(20,16,8,0.3), 0 0 0 4px rgba(184,146,42,0.14), 0 0 0 9px rgba(184,146,42,0.16); }

/* ── M15: lifestyle-landmark markers — quiet, but branded ──
   ~60% the visual size of a community marker (11px vs. an 18px solid
   gold dot). Two earlier passes both failed on-screen inspection: a
   near-white fill was flatly invisible against the OSM basemap's own
   pale tile fills, and a higher-contrast white-with-dark-ring version,
   while technically visible, read as just another one of OSM's own
   default gray amenity glyphs. A muted champagne fill keeps them
   obviously "part of the same design system" as the community markers.
   Final pass: paired with the new standing halo on community markers
   above, that champagne fill needed to recede a step further to keep
   the gap unmistakable — dropped to a soft translucent tint (rather
   than the earlier opaque chip) and a thinner, quieter border. */
.cty-map-marker-wrap--landmark { background: transparent; border: none; z-index: 1 !important; }
.cty-map-landmark-dot {
  display: flex; align-items: center; justify-content: center;
  width: 11px; height: 11px; margin: 5.5px; border-radius: 50%;
  background: rgba(232,213,168,0.82); border: 1px solid rgba(120,90,20,0.32);
  color: #fff;
  box-shadow: 0 2px 5px rgba(20,16,8,0.22);
  font-size: 7px; line-height: 1;
  transition: box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  cursor: pointer;
}

/* M16: one colour per amenity category, so landmarks stop reading as
   identical anonymous dots and start reading as legible kinds of thing.
   Palette is slate blue, oxblood, soft teal, olive and forest green —
   estate/library tones, not a pin-map rainbow. Two corrections worth
   knowing before anyone retunes these: (1) shopping was first a dusty
   rose, which simply read as pink and is flatly wrong for this brand —
   oxblood carries the same dining association without it; (2) the set
   was then too dark, which made these dots higher-contrast against the
   pale basemap than the gold markers themselves are, quietly inverting
   the hierarchy. They are deliberately mid-tone now so they sit in the
   map rather than punch through it. Brand gold (#B8922A) is the
   only warm high-chroma colour on the map, so the community markers
   still win the eye instantly on saturation alone, on top of already
   winning on size (18px vs 11px) and on the standing halo. Picking
   saturated primaries here would have destroyed that hierarchy, which
   is the one thing this map cannot afford to lose. Glyphs go white:
   at a 7px icon inside an 11px disc, a white glyph on a mid-tone fill
   is the only combination that stays legible at a glance.
   Golf (#71987B, hue 135) was chosen to sit hue-distinct from both park
   (#909E77, hue 82, yellow-green) and hospital (#86A09C, hue 171,
   cyan-teal) — a true forest green rather than a shade that could be
   mistaken for either neighbor at 11px. */
.cty-map-landmark-dot--school   { background: #7C8DA1; border-color: rgba(52,66,82,0.42); }
.cty-map-landmark-dot--shopping { background: #9A6A60; border-color: rgba(74,42,36,0.42); }
.cty-map-landmark-dot--hospital { background: #86A09C; border-color: rgba(52,74,71,0.42); }
.cty-map-landmark-dot--park     { background: #909E77; border-color: rgba(60,72,46,0.42); }
.cty-map-landmark-dot--golf     { background: #71987B; border-color: rgba(38,60,46,0.42); }

.cty-map-landmark-dot:hover { transform: scale(1.18); box-shadow: 0 3px 9px rgba(20,16,8,0.34); filter: saturate(1.25) brightness(1.06); }
.cty-map-leaflet .leaflet-marker-icon.cty-map-marker-wrap { z-index: 20 !important; } /* communities always paint above landmarks */

/* Landmark popup — same branded shell, quieter content: a muted grey
   category label instead of the gold "Ulomi Homes" eyebrow, and no
   status pill — this is reference information, not a listing. */
.cty-map-popup--landmark .cty-map-popup-eyebrow { color: var(--cty-mid); }
.cty-map-popup--landmark .cty-map-popup-name { font-size: 17px; margin-bottom: 0; }

/* ── legend, homepage Location map only — final luxury storytelling pass ──
   Two earlier versions mirrored the map's own marker chips 1:1 (four
   filled champagne dots), which read as a literal shrunken copy of the
   map, i.e. a GIS legend. The prior fix (grouped icons + one italic
   caption) solved that but leaned too far the other way once the
   landmark set grew to six destinations across four categories — a
   bare icon row asks the reader to already know that a mortarboard
   means "school." This version keeps the same two-tier structure (one
   bold subject, one quiet supporting group) but gives the supporting
   group real words — not the category nouns from the first version
   ("Hospital," "School"), but the value each category actually
   delivers ("Premier Healthcare," "Top-Rated Schools"). That's the
   difference between a map key and marketing copy: a key names what a
   symbol IS, copy names why it MATTERS. */
.loc-map-legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 15;
  background: rgba(255,253,249,0.96); backdrop-filter: blur(4px);
  border: 1px solid rgba(184,146,42,0.3); border-radius: 12px;
  box-shadow: 0 8px 22px rgba(20,16,8,0.14);
  padding: 13px 17px 14px; display: flex; flex-direction: column; gap: 9px;
  min-width: 176px;
}
.loc-map-legend-primary { display: flex; align-items: center; gap: 9px; }
.loc-map-legend-mark { display: inline-flex; align-items: center; justify-content: center; width: 11px; height: 11px; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px rgba(255,255,255,0.95); }
.loc-map-legend-primary-label { font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink); font-weight: 500; }
.loc-map-legend-divider { height: 1px; background: linear-gradient(90deg, rgba(184,146,42,0.4), rgba(184,146,42,0)); }
.loc-map-legend-secondary { display: flex; flex-direction: column; gap: 6px; }
.loc-map-legend-eyebrow { font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cty-mid, var(--mid)); font-weight: 500; }
.loc-map-legend-row { display: flex; align-items: center; gap: 8px; }
.loc-map-legend-icon { display: inline-flex; flex: none; color: rgba(90,66,18,0.62); }
.loc-map-legend-icon svg { width: 12px; height: 12px; }
/* M16: legend glyphs take each category's own hue so the key matches the
   pins on the map. Full-strength here (not the white-on-fill treatment
   the 11px pins need) because at 12px on a near-white panel a coloured
   stroke is both legible and quieter than a filled chip would be. */
.loc-map-legend-icon--school   { color: #66788D; }
.loc-map-legend-icon--shopping { color: #85564D; }
.loc-map-legend-icon--hospital { color: #6F8A86; }
.loc-map-legend-icon--park     { color: #7A8963; }
.loc-map-legend-icon--golf     { color: #5E8267; }
.loc-map-legend-row-label { font-size: 10px; letter-spacing: 0.015em; color: var(--ink); opacity: 0.82; }

/* M15: on a 300px-tall mobile map, four labeled rows cost too much
   vertical space and would crowd a community marker — collapse to the
   same compact horizontal icon pill used since the first mobile pass
   (dot, divider, icons; the map's own popups already name each
   landmark on tap, so labels aren't load-bearing at this size). */
@media (max-width: 560px) {
  .loc-map-legend { left: 8px; bottom: 8px; padding: 7px 10px; flex-direction: row; align-items: center; gap: 8px; border-radius: 20px; min-width: 0; }
  .loc-map-legend-primary-label, .loc-map-legend-eyebrow, .loc-map-legend-row-label { display: none; }
  .loc-map-legend-divider { width: 1px; height: 14px; background: rgba(184,146,42,0.35); }
  .loc-map-legend-secondary { flex-direction: row; gap: 6px; }
  .loc-map-legend-row { gap: 0; }
  .loc-map-legend-icon svg { width: 11px; height: 11px; }
}

/* ── compact modifier: homepage preview, never dominates the page ── */
.cty-map-pane--compact { position: static; height: 260px; border-radius: 14px; }
.cty-map-pane--compact .cty-map-leaflet { border-radius: 13px; }
.cty-map-pane--compact .cty-map-empty { padding: 2rem 1.5rem; }
.cty-map-pane--compact .cty-map-glyph svg { width: 24px; height: 24px; }
.cty-map-pane--compact .cty-map-empty-copy { font-size: 14px; }

/* ============================================================
   HOMEPAGE MAP — M14
   The homepage's map instance no longer lives beside the community
   cards; it has its own Location section (styles.css .loc-*), which
   owns its framing and sizing. The Milestone-3 split-column rules that
   used to live here (.home-communities-layout / .home-communities-map-col
   / .home-communities-map-cta) and the marker->row hover cue
   (.home-row--map-active) are gone with the markup and the JS that
   drove them — that sync only made sense while the map and the rows
   were side by side.
   ============================================================ */

/* ── tablet: map collapses above the list ── */
@media (max-width: 1024px) {
  .communities-landing { padding: 4rem 1.5rem 5rem; }
  .cty-layout { grid-template-columns: 1fr; }
  .cty-map-pane { position: static; order: -1; height: 260px; }
  .cty-card { grid-template-columns: 1fr; }
  .cty-card-img { min-height: 200px; }
}

/* ── mobile ── */
@media (max-width: 560px) {
  .communities-landing { padding: 3rem 1.25rem 4rem; }
  .cty-head { margin-bottom: 3rem; }
  .cty-card-body { padding: 1.5rem; }
  .cty-map-pane { height: 200px; }
}