/* ============================================================
   LOCATIONS
   Master directory and single location
.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   MASTER: directory
   ───────────────────────────────────────────────────────────── */

/* The hero map: full-bleed, 550px, sitting at the very top with the
   fixed header floating over it. No top padding
   anywhere above it — the map itself is what fills that space. */
.sh-loc-dir__hero {
  width: 100%;
  height: 34.375rem;
  overflow: hidden;
  background: var(--color-bg-section);
}

.sh-loc-dir__hero iframe,
.sh-loc-dir__hero img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.sh-loc-dir__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 3.75rem 0 5rem;
}

/* No map hero above this section (loc_map_on off) — the heading would
   otherwise sit right under the header with none of the breathing
   room a hero band would have given it. */
.sh-loc-dir--no-hero .sh-loc-dir__inner {
  padding-top: 7.5rem;
}

.sh-loc-dir__head {
  max-width: 32.375rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.sh-loc-dir__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}

.sh-loc-dir__intro {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-muted);
}

/* --- Search --- */
.sh-loc-dir__search {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 28.25rem;
  height: 3.5rem;
  margin: 0 auto 3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.sh-loc-dir__search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 141, 194, 0.15);
}

.sh-loc-dir__search-icon {
  position: absolute;
  left: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--color-gray);
  pointer-events: none;
}

.sh-loc-dir__search-input {
  flex: 1;
  min-width: 0;
  padding: 0 1rem 0 3.125rem;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text);
  background: none;
  border: 0;
  border-radius: 8px;
}

.sh-loc-dir__search-input::placeholder { color: var(--color-placeholder); }
.sh-loc-dir__search-input:focus { outline: none; }

.sh-loc-dir__search-toggle {
  flex: 0 0 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  cursor: pointer;
  transition: var(--transition-base);
}

.sh-loc-dir__search-toggle:hover { background: var(--color-primary-hover); }
.sh-loc-dir__search-toggle svg { transition: transform 0.2s ease; }
.sh-loc-dir__search-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* --- Quick-pick --- */
.sh-loc-dir__quickpick {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.75rem;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-nav);
}

.sh-loc-dir__quickpick[hidden] { display: none; }

.sh-loc-dir__quickpick-label {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.sh-loc-dir__quickpick button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-align: left;
  color: var(--color-heading);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.sh-loc-dir__quickpick button:hover,
.sh-loc-dir__quickpick button:focus-visible {
  background: var(--color-bg-audience);
  color: var(--color-primary);
}

.sh-loc-dir__empty {
  margin: 0 0 3rem;
  text-align: center;
  color: var(--color-muted);
}

/* --- Cards --- */
/* Vertical spacing between location cards. */
.sh-loc-dir__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Use proportional columns and stretch them to a shared bottom edge. */
.sh-loc-card {
  display: grid;
  grid-template-columns: 579fr 634fr;
  gap: 1.5rem;
  align-items: stretch;
  /* Lets the card's Outline button (.sh-btn--outline-contrast) read
     correctly — same mechanism a hero sets inline, defined here
     against this card's own white ground. See the matching pair on
.sh-cd-card in sections.css (Contact cards). */
  --hero-side-fg: var(--color-primary);
  --hero-side-bg: #fff;
}

/* [hidden] alone loses to the grid/flex display values above, so the
   search filter needs this to actually hide a card. */
.sh-loc-card[hidden] { display: none; }

/* The photo is its own element above the info panel, not inside it —
   the design gives it no border and a 24px gap beneath. */
.sh-loc-card__left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sh-loc-card__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Both panels grow to fill their column, so a short left panel and a
   tall right one still finish level. */
.sh-loc-card__contact,
.sh-loc-card__right {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

.sh-loc-card__photo {
  flex: 0 0 auto;
  aspect-ratio: 579 / 212;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-section);
}

.sh-loc-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-loc-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.sh-loc-card__name a { color: inherit; }
.sh-loc-card__name a:hover { color: var(--color-primary); }

.sh-loc-card__address {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-muted-alt);
  margin-bottom: 0.875rem;
}

.sh-loc-card__lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.sh-loc-card__lines li,
.sh-loc-detail__contacts li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
  color: var(--color-muted-alt);
}

.sh-loc-card__lines svg,
.sh-loc-detail__contacts svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.sh-loc-card__lines a,
.sh-loc-detail__contacts a { color: inherit; }
.sh-loc-card__lines a:hover,
.sh-loc-detail__contacts a:hover { color: var(--color-primary); }

.sh-loc-card__directions,
.sh-loc-card__cta,
.sh-loc-detail__directions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* margin-top:auto on both CTAs is the other half of the equal-height
   behaviour: the columns stretch, and the buttons sit on the bottom
   edge of each rather than floating directly under short content. */
.sh-loc-card__directions {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-primary);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.sh-loc-card__directions:hover { color: var(--color-primary-hover); }
.sh-loc-card__directions svg { width: 1rem; height: 1rem; }

/* The services block is its own container so the gap below it is one
   deliberate separation from the insurance line, rather than a margin
   hanging off whichever chip happened to wrap onto the last row. */
.sh-loc-card__services {
  margin-bottom: 2rem;
}

.sh-loc-card__services-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.875rem;
}

.sh-loc-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* Chip: pale panel with a short teal rule down its left edge
. */
.sh-loc-card__chips li {
  position: relative;
  padding: 0.625rem 1.125rem 0.625rem 1.5rem;
  font-size: var(--text-md);
  color: var(--color-heading);
  background: var(--color-bg-audience);
  border-radius: var(--radius-sm);
}

.sh-loc-card__chips li::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.25rem;
  border-radius: 2px;
  background: var(--color-divider-strong);
}

.sh-loc-card__chips a {
  color: inherit;
  text-decoration: none;
}

.sh-loc-card__chips a:hover,
.sh-loc-card__chips a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.sh-loc-card__insurance {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.sh-loc-card__facts {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-heading);
}

.sh-loc-card__facts strong {
  font-weight: 700;
}

/* margin-top:auto pins the pair to the bottom of the panel, which is
   what keeps the two cards in a row finishing level however much
   copy sits above. */
.sh-loc-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.sh-loc-card__cta {
  padding: 0.75rem 1.5rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: var(--transition-base);
}

.sh-loc-card__cta:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

/* Secondary: outlined, so the pair reads as one primary action and
   one alternative rather than two competing buttons. */
.sh-loc-card__cta--secondary {
  color: var(--color-primary);
  background: none;
  border: 1px solid var(--color-border-chip);
}

.sh-loc-card__cta--secondary:hover {
  color: var(--color-primary-hover);
  background: var(--color-bg-audience);
  border-color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────
   SINGLE: details
   ───────────────────────────────────────────────────────────── */

/*.sh-header is position:fixed, so every page clears it itself. Other
   templates open with a hero carrying its own generous top padding;
   this one opens with a breadcrumb, which sat behind the header
   without an explicit offset of its own. */
/* Two equal columns with a 40px gutter. Stretch the map to the section height. */
.sh-loc-detail__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 9rem 0 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
}

.sh-loc-detail__crumbs {
  display: flex;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-bottom: 2.5rem;
}

.sh-loc-detail__crumbs a { color: var(--color-muted); }
.sh-loc-detail__crumbs a:hover { color: var(--color-primary); }
.sh-loc-detail__crumbs [aria-current] { color: var(--color-heading); font-weight: 500; }

.sh-loc-detail__main { text-align: center; }

.sh-loc-detail__address {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font-size: var(--text-base);
  color: var(--color-muted-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  margin-bottom: 1.25rem;
}

.sh-loc-detail__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

.sh-loc-detail__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* --- Who we serve / care options ---
   Two 207x149 cards with an 18px gap, held at their design width
   rather than stretched to the column: the pair is 432px inside a
   620px column in the design, centred with the rest of this block. */
.sh-loc-detail__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 12.9375rem));
  justify-content: center;
  gap: 1.125rem;
  margin-bottom: 2.5rem;
  text-align: left;
}

/* Location page jump navigation. It stays below the compact fixed
   header once scrolling begins and becomes the shared custom select on mobile. */
.sh-location-nav {
  position: sticky;
  top: var(--location-header-bottom, 6rem);
  z-index: calc(var(--z-nav) - 1);
  padding: 0.75rem var(--gutter);
  background: #e3f3f2;
  border-block: 1px solid #c4e2df;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.sh-location-nav__inner {
  width: min(100%, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.sh-location-nav__eyebrow {
  flex: 0 0 auto;
  color: var(--color-muted-alt);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sh-location-nav__links {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.sh-location-nav__links a {
  position: relative;
  display: block;
  padding: 0.55rem 0.15rem;
  color: var(--color-heading);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.sh-location-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.sh-location-nav__links a:hover,
.sh-location-nav__links a.is-active {
  color: var(--color-primary);
}

.sh-location-nav__links a.is-active::after {
  transform: scaleX(1);
}

.sh-location-nav__select-wrap { display: none; }

#page-content .page-location [id] {
  scroll-margin-top: calc(var(--location-scroll-offset, 11rem) - 24px);
}

.sh-location-anchor {
  display: block;
  height: 0;
}

@media (max-width: 900px) {
  .sh-location-nav {
    padding-block: 0.625rem;
  }

  .sh-location-nav__inner { gap: 0.75rem; }
  .sh-location-nav__eyebrow { font-size: 0.6875rem; }
  .sh-location-nav__links { display: none; }

  .sh-location-nav__select-wrap {
    display: block;
    min-width: 0;
    flex: 1;
  }

  .sh-location-nav__select-wrap .sh-select {
    width: 100%;
  }

  .sh-location-nav__select-wrap .sh-select__button,
  .sh-location-nav__select {
    width: 100%;
    padding: 0.65rem 2.25rem 0.65rem 0.85rem;
    color: var(--color-heading);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-weight: 600;
  }

  .sh-location-nav__select-wrap .sh-select__list {
    width: 100%;
    max-width: none;
  }

  .sh-location-nav__select.sh-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
  }
}

/* Content is top-aligned with a fixed gap under the rule, not
   space-between: the design leaves 30px of slack at the bottom of
   the card (content frame is 95px tall in a 149px card), and
   space-between would instead stretch that gap open and move the
   value line whenever the copy ran to one line or three. */
.sh-loc-fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 9.3125rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  color: #fff;
}

/* Sampled from the design frame rather than mapped onto the nearest
   theme token — the closest tokens (--color-blue-deep #1a5b7e and
   --color-divider-strong #67c8c7) are both visibly off these, one
   too teal and the other too pale. */
.sh-loc-fact--who  { background: #3b6088; }
.sh-loc-fact--care { background: #2abdbd; }

/* The rule under the label is a fixed 32px bar, not an underline the width of the text — hence a pseudo-element rather than a border-bottom. */
.sh-loc-fact__label {
  position: relative;
  /* 8px of air between the label and its rule. */
  padding-bottom: 9px;
  margin-bottom: 1.4375rem;
  font-size: 0.875rem;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.85);
}

.sh-loc-fact__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2rem;
  height: 1px;
  background: currentColor;
}

.sh-loc-fact--who  .sh-loc-fact__label::after { background: #81cdff; }
.sh-loc-fact--care .sh-loc-fact__label::after { background: #4ee2e8; }

.sh-loc-fact__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.15;
}

/* --- Hours --- */
.sh-loc-hours { text-align: left; }

.sh-loc-hours__heading {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

/* The single-line form: label and value on one row. The value keeps
   the table's own day-text colour and weight rather than the
   heading's, so "Hours of Operation:" still reads as the label of the
   thing beside it. */
.sh-loc-hours__text {
  font-size: var(--text-base);
  color: var(--color-heading);
}

.sh-loc-hours--inline .sh-loc-hours__heading {
  margin-bottom: 0;
  text-align: center;
}

.sh-loc-hours--inline .sh-loc-hours__text {
  font-weight: 400;
}

.sh-loc-hours__table {
  width: 100%;
  border-collapse: collapse;
}

.sh-loc-hours__table tr {
  border-bottom: 1px solid var(--color-border);
  background: #fcfcfc;
}

.sh-loc-hours__table tr:last-child { border-bottom: 0; }

.sh-loc-hours__table th,
.sh-loc-hours__table td {
  padding: 0.875rem 1.5rem;
  font-size: var(--text-md);
}

.sh-loc-hours__table th {
  text-align: left;
  font-weight: 400;
  color: var(--color-muted-alt);
}

.sh-loc-hours__table td {
  text-align: right;
  font-weight: 500;
  color: var(--color-heading);
  white-space: nowrap;
}

/* Digits sit larger than the am/pm and share a baseline with it,
   as in the design — see starfish_format_time(). */
.sh-loc-hours__num {
  font-size: 1.25rem;
  font-weight: 500;
}

.sh-loc-hours__unit {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-muted-alt);
}

.sh-loc-hours__dash { margin: 0 0.5rem; color: var(--color-muted); }
.sh-loc-hours__table tr.is-closed td { color: var(--color-muted); }

/* --- Map --- */
.sh-loc-detail__map {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-bg-section);
  min-height: 31.25rem;
}

.sh-loc-detail__map-frame {
  height: 100%;
}

.sh-loc-detail__map-frame iframe,
.sh-loc-detail__map-frame img,
.sh-loc-detail__map-photo {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Primary CTA: white pill with blue circular icon. */
/* Floating over the map/photo, positioning only — the button's own
   chrome (background, colour, padding, radius) now comes from
   starfish_cta()'s 'secondary' style, the same white pill every
   other Secondary button on the site uses, not a bespoke copy of it. */
.sh-loc-detail__directions {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  box-shadow: var(--shadow-nav);
}

/* ─────────────────────────────────────────────────────────────
   SINGLE: services grid
   ───────────────────────────────────────────────────────────── */

.sh-loc-services { background: var(--color-bg); }

.sh-loc-services__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 4.5rem 0;
}

.sh-loc-services__head {
  margin: 0 0 2.5rem;
  text-align: left;
}

.sh-loc-services__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}

.sh-loc-services__intro {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-muted);
}

/* Three fixed columns in a centred block, as in the design — auto-fit
   gave a fourth column at 1440 and left the service names cramped. */
/* No max-width or auto margins: the centred layout needed them to
   hold the grid under a centred heading, but left-aligned the grid
   shares the section's own container, so capping it here would leave
   the cards short of the right gutter the heading starts from. */
.sh-loc-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.625rem 2.5rem;
}

@media (max-width: 900px) {
  .sh-loc-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .sh-loc-services__grid { grid-template-columns: 1fr; }
}

.sh-loc-services__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9375rem 1.125rem;
  font-size: var(--text-md);
  color: var(--color-heading);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: var(--transition-base);
}

.sh-loc-services__item svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.sh-loc-services__item:hover {
  color: var(--color-primary);
  transform: translateY(-2px);
}

.sh-loc-services__item--all {
  color: #fff;
  background: var(--color-primary);
}

.sh-loc-services__item--all svg { color: #fff; }
.sh-loc-services__item--all:hover { color: #fff; background: var(--color-primary-hover); }

/* Card view (location_services_display = 'cards') reuses card-grid.php and its own.sh-card-grid styling wholesale — the "View all services" card is one more tile in that same grid, not a separate element, so the grid itself needs no extra rule here. */
.sh-loc-services--cards .sh-card-grid__item--custom,
.sh-loc-services--cards .sh-card-grid__item--custom:hover {
  justify-content: center;
  padding: 2.5rem 2rem;
  border-color: transparent;
  background: #f3f3f3;
  box-shadow: none;
}

.sh-loc-services--cards .sh-card-grid__item--custom .sh-card-grid__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 0;
}

/* 20px between the question and the button, per the design — the
   default.sh-card-grid__cta top margin is half that. */
.sh-loc-services--cards .sh-card-grid__item--custom .sh-card-grid__cta {
  align-self: flex-start;
  margin-top: 1.25rem;
}

/* ─────────────────────────────────────────────────────────────
   SINGLE: about
   ───────────────────────────────────────────────────────────── */

/* Left-aligned: About and Services both align to the page gutter and
   share the container the rest of the page uses, with no measure cap
   on the heading or copy — they run the container's full width, so
   both sections line up with the service grid below. */
.sh-loc-about__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 4rem 0;
  text-align: left;
}

.sh-loc-about__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 1.25rem;
}

.sh-loc-about__copy {
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-body-dark);
}

.sh-loc-about__copy > * + * { margin-top: 1.125rem; }

.sh-loc-about__copy ul,
.sh-loc-about__copy ol { padding-left: 1.25rem; list-style: revert; }

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .sh-loc-detail__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .sh-loc-detail__map { min-height: 22rem; }
}

@media (max-width: 900px) {
  .sh-loc-card { grid-template-columns: 1fr; }
  .sh-loc-card__photo { aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
  .sh-loc-detail__inner { padding-top: 7rem; }
  .sh-loc-dir__hero { height: 18rem; }
  .sh-loc-dir__inner { padding: 3rem 0 3.5rem; }
  .sh-loc-dir--no-hero .sh-loc-dir__inner { padding-top: 5rem; }
  .sh-loc-services__inner,
  .sh-loc-about__inner { padding: 3rem 0; }
  .sh-loc-detail__facts { grid-template-columns: 1fr; gap: 1rem; }
  .sh-loc-detail__contacts { gap: 1rem; }
}

/* ─────────────────────────────────────────────────────────────
   Branded map (Leaflet)
   Replaces the Google embed, which is cross-origin and therefore
   unstylable — see assets/js/map.js.
   ───────────────────────────────────────────────────────────── */

.sh-map-canvas {
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: var(--color-bg-section);
  z-index: 0;   /* keep Leaflet's panes under the floating CTA */
}

/* Leaflet's own chrome, toned to the theme. */
.sh-map-canvas .leaflet-control-zoom a {
  color: var(--color-secondary);
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
}
.sh-map-canvas .leaflet-control-zoom a:hover { background: var(--color-bg-audience); }
.sh-map-canvas .leaflet-bar {
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Attribution is required by OSM/CARTO, so it stays — just quieter. */
.sh-map-canvas .leaflet-control-attribution {
  font-size: 0.625rem;
  color: var(--color-gray);
  background: rgba(255, 255, 255, 0.82);
}
.sh-map-canvas .leaflet-control-attribution a { color: var(--color-primary); }

/* Brand pin: a disc with a soft halo, drawn in CSS so it stays sharp
   at any density and follows the brand colour. */
.sh-map-pin { position: relative; }

.sh-map-pin__dot,
.sh-map-pin__pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
}

.sh-map-pin__dot {
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 68, 95, 0.45);
}

.sh-map-pin__pulse {
  background: var(--color-primary);
  opacity: 0.28;
  transform: scale(2.1);
}

@media (prefers-reduced-motion: no-preference) {
  .sh-map-pin__pulse { animation: sh-map-pulse 2.8s ease-out infinite; }
}

@keyframes sh-map-pulse {
  0%   { transform: scale(1);   opacity: 0.45; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}