/* =========================================================
   Badr Al Safaa Medical Centre — About Us
   Built from Figma file "Badr-Al-Safaa", frame "About us" (526:2837)
   Loads after style.css and reuses its tokens, top bar, nav and footer.
   ========================================================= */

/* ---------- Top bar: About frame is 64px tall and adds Patient Portal ---------- */
.topbar--about { height: 43px; }   /* same height as the home page top bar */
.topbar__tools { display: flex; align-items: center; gap: 24px; }
.site-nav__link[aria-current="page"] { color: var(--ink); }

/* ---------- Shared bits ---------- */
.eyebrow { font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.eyebrow--gold { color: #b88e1c; }
.eyebrow--brown { color: #7f5600; }
.eyebrow--rust { color: #6d462c; }

.display-title {
  font-family: var(--f-sans); font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -1.2px; color: var(--ink);
}
.display-title em { font-family: var(--f-serif); font-style: italic; font-weight: 700; color: #b88724; }
.display-title--light { color: #fff; }
.display-title--light em { color: #d49a24; }

.ab-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 5px 11px; border-radius: 9999px;
  background: rgba(212,163,56,0.1); border: 1px solid rgba(212,163,56,0.25);
}
.ab-badge i { width: 6px; height: 6px; border-radius: 9999px; background: #d4a338; flex-shrink: 0; }
.ab-badge span { font-weight: 600; font-size: 11px; line-height: 15px; letter-spacing: 1px; text-transform: uppercase; color: #e8b958; white-space: nowrap; }

/* ---------- Hero / Legacy (526:2948) ---------- */
.ab-hero { background: var(--ink); padding: 106px 0; }
.ab-hero__inner { width: min(1280px, 100%); margin-inline: auto; padding-inline: 48px; display: flex; flex-direction: column; gap: 16px; min-height: 815px; }
.ab-hero__head { width: min(768px, 100%); display: flex; flex-direction: column; gap: 20px; }
.ab-hero__title { font-weight: 700; font-size: 60px; line-height: 60px; color: #fff; }
.ab-hero__title em { font-style: italic; font-weight: 600; color: #d49a24; }
.ab-hero__lead { font-size: 16px; line-height: 22px; color: rgba(255,255,255,0.5); }
.ab-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }

.campus-visual {
  grid-column: 1 / span 7; position: relative; overflow: hidden; padding: 1px;
  background: #25211e; border: 1px solid #292524; border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.campus-visual__media { position: relative; height: 384px; overflow: hidden; background: #f5efe6; border-radius: 15px 15px 0 0; }
.campus-visual__img { position: absolute; inset: -35px -72.67px -32px -35px; overflow: hidden; }
.campus-visual__img img { position: absolute; left: -11.59%; top: -144.93%; width: 220%; height: 281.48%; max-width: none; }
.campus-visual__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180.38deg, rgba(0,0,0,0) 64.226%, #000 85.552%), rgba(0,0,0,0.2);
}
.campus-visual__badge {
  position: absolute; left: 20px; top: 20px; display: flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 9999px;
  background: rgba(255,255,255,0.95); border: 1px solid #e8e1d5; box-shadow: 0 1px 2px rgba(0,0,0,0.05); backdrop-filter: blur(6px);
  font-weight: 600; font-size: 12px; line-height: 16px; color: #1d1b18; white-space: nowrap;
}
.campus-visual__badge i { width: 8px; height: 8px; border-radius: 9999px; background: #10b981; }
.campus-visual__since {
  position: absolute; right: 24px; bottom: 24px; padding: 8px 16px; border-radius: 12px; background: #d49a24;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; color: #fff; white-space: nowrap;
}
.campus-visual__caption { position: absolute; left: 24px; bottom: 24px; max-width: 384px; display: flex; flex-direction: column; gap: 4px; }
.campus-visual__kicker { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.6px; color: #d49a24; white-space: nowrap; }
.campus-visual__name { font-family: var(--f-serif); font-weight: 500; font-size: 20px; line-height: 28px; color: #fff; white-space: nowrap; }
.metrics { display: flex; padding: 20px 12px; background: #1f1c1a; }
.metric { flex: 1 0 0; min-width: 0; padding: 0 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.metric + .metric { border-left: 1px solid #292524; padding-left: 9px; }
.metric__num { font-weight: 700; font-size: 30px; line-height: 36px; color: #fff; white-space: nowrap; }
.metric__num span { color: #d4af37; }
.metric__label { font-size: 11px; line-height: 16.5px; letter-spacing: 0.55px; color: #a8a29e; white-space: nowrap; }

.statement {
  grid-column: 8 / span 5; position: relative; overflow: hidden; height: 482px; padding: 41px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid rgba(236,192,43,0.3); border-radius: 16px;
  background: linear-gradient(134.56deg, #27221e 0%, #1e1b19 100%);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.statement__body { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }
.statement__kicker { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.6px; color: #d4af37; }
.statement__kicker img { width: 16px; height: 16px; }
.statement__quote { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 24px; line-height: 32px; color: rgba(255,255,255,0.95); }
.statement__quote em { color: #d49a24; }
.statement__note { padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.18); font-weight: 300; font-size: 14px; line-height: 20px; color: #a8a29e; }
.statement__sign { position: relative; z-index: 1; margin-top: 24px; padding-top: 14px; border-top: 1px solid #292524; display: flex; align-items: center; gap: 16px; }
.statement__avatar {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212,175,55,0.4); background: linear-gradient(135deg, rgba(217,119,6,0.3) 0%, rgba(212,175,55,0.2) 100%);
  font-weight: 700; font-size: 14px; line-height: 20px; color: #d4af37;
}
.statement__role { font-family: var(--f-serif); font-weight: 600; font-size: 16px; line-height: 24px; color: #f5f5f4; white-space: nowrap; }
.statement__org { font-size: 11px; line-height: 16.5px; letter-spacing: 0.55px; color: #e8c868; white-space: nowrap; }
.statement__glow {
  position: absolute; right: -30.33px; bottom: -29.67px; width: 180px; height: 180px; border-radius: 90px;
  border: 24px solid rgba(231,187,35,0.28); filter: blur(100px); pointer-events: none;
}

/* ---------- Our story + mission (526:3221) ---------- */
.story { background: #fff; padding: 80px 0; }
.story__grid { display: flex; justify-content: space-between; align-items: stretch; gap: 32px; }
.story-card {
  width: 693px; flex-shrink: 1; align-self: flex-start; padding: 49px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(231,229,228,0.8); box-shadow: 0 4px 20px -2px rgba(24,22,21,0.05);
}
.story-card .eyebrow { margin-bottom: 12.5px; }
.story-card__title { padding-bottom: 24px; font-family: var(--f-serif); font-weight: 600; font-size: 30px; line-height: 36px; color: var(--ink); }
.story-card__text { display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 24px; color: #57534e; }
.mission-card {
  width: 453px; flex-shrink: 0; padding: 48px; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(133.43deg, #84631d 0%, #664c13 50%, #45340c 100%);
  box-shadow: 0 12px 32px -4px rgba(24,22,21,0.08);
}
.mission-card__top { display: flex; flex-direction: column; gap: 23px; }
.mission-card__kicker { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; color: #fde68a; }
.mission-card__kicker img { width: 20px; height: 20px; }
.mission-card__title { font-family: var(--f-serif); font-weight: 600; font-size: 30px; line-height: 36px; color: #fff; }
.mission-card__text { font-weight: 300; font-size: 16px; line-height: 22px; color: rgba(254,243,199,0.9); }
.mission-card__values {
  margin-top: 69px; padding-top: 25px; border-top: 1px solid rgba(251,191,36,0.3);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; line-height: 16px; color: #fde68a; white-space: nowrap;
}

/* ---------- Leadership mosaic (526:3261) ---------- */
.leaders { background: var(--cream); padding-top: 80px; }
.leaders__head { display: flex; flex-direction: column; gap: 7.3px; margin-bottom: 40px; }
.leaders__head .display-title { padding: 1.2px 0 1.5px; white-space: nowrap; }
.leaders__lead { font-size: 14px; line-height: 20px; color: #514534; }
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 360px; }
.mosaic__photo { position: relative; overflow: hidden; background: #eae8e5; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.mosaic__photo img { position: absolute; top: 0; left: -11.43%; width: 122.87%; height: 100%; object-fit: cover; }
.mosaic__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(48,49,47,0.9), rgba(48,49,47,0.3) 50%, rgba(48,49,47,0)); }
.mosaic__card { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.mosaic__card--dark { background: #30312f; }
.mosaic__card--sand { background: #e6ded9; }
.mosaic__name { padding-top: 20px; font-family: var(--f-noto); font-weight: 600; font-size: 20px; line-height: 27.5px; color: #fbf9f6; }
.mosaic__role { margin-top: 2px; padding-bottom: 20px; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.3px; color: #ffdeae; }
.mosaic__text { font-size: 14px; line-height: 22.75px; color: rgba(228,226,223,0.9); }
.mosaic__card--sand .mosaic__name { color: #000; }
.mosaic__card--sand .mosaic__text { color: rgba(30,27,24,0.85); }
.mosaic__role--brown { color: #6d462c; }
.mosaic__role--black { color: #000; }

/* ---------- Purpose & principles (526:3318) ---------- */
.principles { background: #fff; padding: 80px 0 81px; }
.principles__head { width: min(672px, calc(100% - 32px)); margin: 0 auto 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.principles__title { font-weight: 700; font-size: 30px; line-height: 36px; color: var(--ink); }
.principles__lead { padding-top: 4px; font-size: 14px; line-height: 20px; color: #78716c; }
.principles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.principle {
  min-height: 296px; padding: 32px; border-radius: 16px; background: #f4f4f4; border: 1px solid #e7e5e4;
  display: flex; flex-direction: column; align-items: flex-start;
}
.principle__icon {
  width: 48px; height: 48px; margin-bottom: 24px; border-radius: 12px; background: #fff; border: 1px solid #f1ede7;
  display: flex; align-items: center; justify-content: center;
}
.principle__icon img { width: 23px; height: 23px; }
.principle__title { margin-bottom: 12px; font-family: var(--f-serif); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--ink-2); }
.principle__text { font-weight: 300; font-size: 14px; line-height: 23px; color: #78716c; }
.principle__text b { font-weight: 600; color: var(--ink-2); }

/* ---------- Modern facilities (526:3331) ---------- */
.facilities { background: var(--cream); padding: 80px 0 98px; border-top: 1px solid #ece4d4; }
.facilities__head { padding-top: 7px; padding-bottom: 33px; margin-bottom: 40px; border-bottom: 1px solid #ece4d4; display: flex; flex-direction: column; gap: 8px; }
.facilities__head .display-title { white-space: nowrap; }
.facilities__lead { width: min(756px, 100%); padding-top: 3px; font-size: 14px; line-height: 21.33px; color: #514534; }
.facility-grid { display: grid; grid-template-columns: repeat(3, 380px); justify-content: space-between; gap: 24px; }
.facility {
  min-height: 203px; padding: 29px; border-radius: 16px; background: #fbf9f6; border: 1px solid #f1ede5;
  display: flex; flex-direction: column; align-items: flex-start;
}
.facility__icon { margin: -3px 0 7px -3px; }
.facility__title { padding-top: 6px; margin-bottom: 12px; font-family: var(--f-noto); font-weight: 600; font-size: 20px; line-height: 28px; color: var(--ink-2); }
.facility__text { font-size: 12px; line-height: 21.33px; color: #44403c; }

/* ---------- Explore facilities gallery (526:3387) ---------- */
.explore { background: var(--ink); padding: 80px 0 81px; }
.explore__head { display: flex; flex-direction: column; gap: 7px; max-width: 753px; }
.explore__head .display-title { white-space: nowrap; }
.explore__lead { font-size: 14px; line-height: 20px; color: rgba(255,255,255,0.72); }
.explore__tabs { margin: 40px 0 40px 1px; display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  height: 30px; padding: 0 12px; border-radius: 9999px; border: 1px solid rgba(212,163,56,0.35); background: rgba(212,163,56,0.14);
  font-family: var(--f-inter); font-weight: 600; font-size: 12px; line-height: 16px; color: #e8b958; white-space: nowrap; transition: background-color .2s;
}
.chip:hover { background: rgba(212,163,56,0.22); }
.chip.is-active { background: #000; border-color: rgba(212,163,56,0.5); }
.gallery {
  border: 1px solid rgba(212,163,56,0.18); border-radius: 16px; overflow: hidden; background: #181512;
  box-shadow: 0 25px 60px -20px rgba(212,163,56,0.25);
}
.gallery__stage { position: relative; height: 540px; overflow: hidden; background: #0f0d0b; }
.gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.gallery__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 35%); pointer-events: none; }
.gallery__tour {
  position: absolute; z-index: 1; top: 24px; right: 26px; display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 9999px;
  background: rgba(20,17,14,0.75); font-family: 'Liberation Mono', 'Courier New', monospace; font-size: 12px; line-height: 15px; color: #e7e5e4; white-space: nowrap;
}
.gallery__tour img { width: 19px; height: 19px; }
.gallery__caption { position: absolute; z-index: 1; left: 25px; bottom: 16px; }
.gallery__floor { font-family: 'Liberation Mono', 'Courier New', monospace; font-size: 11px; line-height: 16px; letter-spacing: 1.6px; color: #d4a338; }
.gallery__title { font-weight: 700; font-size: 48px; line-height: 56px; color: #fff; text-transform: uppercase; }
.gallery__bar { border-top: 1px solid #2b231c; padding: 25px 24px 24px; }
.gallery__pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 32px; margin-bottom: 16px; }
.gallery__btn { width: 32px; height: 32px; border-radius: 6px; background: #2a2521; color: #fff; font-size: 14px; line-height: 20px; transition: background-color .2s; }
.gallery__btn:hover { background: #3a332d; }
.gallery__count { padding: 0 8px; font-size: 12px; line-height: 16px; color: #b88724; white-space: nowrap; }
.gallery__thumbs { display: flex; gap: 15px; margin-left: -16px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.thumb {
  flex: 0 0 182px; height: 116px; padding: 1px; border-radius: 8px; border: 1px solid #2c2721; background: #1c1917; overflow: hidden;
  text-align: left; display: flex; flex-direction: column; transition: border-color .2s;
}
.thumb img { width: 100%; height: 80px; object-fit: cover; border-radius: 6px 6px 0 0; }
.thumb span { padding: 8px; font-size: 12px; line-height: 16px; color: #d6d3d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb:hover { border-color: #5a4a36; }
.thumb.is-active { padding: 0; border: 2px solid #d4a338; }
.thumb.is-active span { color: #fff; font-weight: 700; }

/* ---------- Visit block (526:3490) ---------- */
.ab-visit { background: #fff; padding: 80px 0; }
.ab-visit__frame {
  min-height: 588px; padding: 65px 65px 65px 65px; border-radius: 16px; background: #f8eed8; border: 1px solid #ecd9b2;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.ab-visit__copy { width: 512px; display: flex; flex-direction: column; gap: 24px; }
.ab-visit__title { font-family: var(--f-serif); font-weight: 400; font-size: 48px; line-height: 48px; color: #1c1917; }
.ab-visit__title em { font-style: italic; color: #b88e1c; }
.ab-visit__lead { font-size: 16px; line-height: 20px; color: rgba(28,25,23,0.7); }
.ab-visit__actions { padding-top: 16px; display: flex; flex-wrap: wrap; gap: 16px; }
.btn-caps {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 24px; border-radius: 6px;
  font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; color: #1c1917; white-space: nowrap; transition: background-color .2s;
}
.btn-caps img { width: 16px; height: 16px; }
.btn-caps--soft { width: 269px; background: rgba(255,255,255,0.18); }
.btn-caps--soft:hover { background: rgba(255,255,255,0.5); }
.btn-caps--outline { width: 208px; border: 1px solid #1c1917; }
.btn-caps--outline:hover { background: rgba(255,255,255,0.4); }
.loc-card {
  width: 506px; flex-shrink: 0; padding: 32px; border-radius: 16px; background: #fcf8ee; border: 1px solid #ecd9b2;
  display: flex; flex-direction: column; gap: 24px;
}
.loc-card__head { display: flex; align-items: flex-start; gap: 14px; }
.loc-card__pin { width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0; background: #1c1917; display: flex; align-items: center; justify-content: center; }
.loc-card__pin img { width: 20px; height: 20px; }
.loc-card__title { font-weight: 700; font-size: 18px; line-height: 28px; color: #1c1917; }
.loc-card__addr { margin-top: 2px; font-size: 12px; line-height: 16px; color: #57534e; }
.loc-map { position: relative; display: block; height: 176px; border-radius: 12px; overflow: hidden; border: 1px solid #e7dcc4; }
.loc-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loc-map__gps {
  position: absolute; top: 13px; right: 12px; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12); font-weight: 600; font-size: 10px; line-height: 15px; color: #1c1917; white-space: nowrap;
}
.loc-contacts { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.loc-contacts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loc-contacts > div + div { padding-top: 12px; border-top: 1px solid rgba(28,25,23,0.08); }
.loc-contacts dt { font-size: 12px; line-height: 16px; color: #57534e; }
.loc-contacts dd { margin: 0; }
.loc-contacts a { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; line-height: 16px; color: #1c1917; white-space: nowrap; }
.loc-contacts a img { width: 14px; height: 14px; }
.loc-contacts a.is-green { color: #047857; }
.loc-contacts a:hover { color: #b88724; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1240px) {
  .facility-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .ab-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .campus-visual, .statement { grid-column: 1; }
  .statement { height: auto; gap: 32px; }
  .story__grid { flex-direction: column; }
  .story-card, .mission-card { width: 100%; }
  .mission-card__values { margin-top: 40px; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-visit__frame { flex-direction: column; align-items: stretch; padding: 40px; }
  .ab-visit__copy, .loc-card { width: 100%; }
}

@media (max-width: 960px) {
  .topbar__tools a + a { display: none; }
  .ab-hero { padding: 64px 0; }
  .ab-hero__inner { padding-inline: 16px; min-height: 0; }
  .ab-hero__title { font-size: 48px; line-height: 52px; }
  .principles__grid, .facility-grid { grid-template-columns: minmax(0, 1fr); }
  .principle { min-height: 0; }
  .display-title, .leaders__head .display-title, .facilities__head .display-title, .explore__head .display-title { white-space: normal; }
  .leaders__lead br, .explore__lead br, .principles__lead br, .facility__text br { display: none; }
  .gallery__stage { height: 420px; }
}

@media (max-width: 640px) {
  .topbar__tools { display: none; }   /* keeps the top bar on one line, same as the home page */
  .ab-badge { max-width: 100%; }
  .ab-badge span { white-space: normal; }
  .ab-hero__title { font-size: 38px; line-height: 44px; }
  .campus-visual__media { height: 320px; }
  .campus-visual__name { white-space: normal; font-size: 18px; line-height: 24px; }
  .campus-visual__since { top: 64px; bottom: auto; left: 20px; right: auto; }
  .campus-visual__caption { right: 24px; }
  .metrics { flex-direction: column; gap: 16px; }
  .metric + .metric { border-left: 0; border-top: 1px solid #292524; padding: 16px 8px 0; }
  .statement { padding: 28px; }
  .statement__quote { font-size: 20px; line-height: 28px; }
  .story { padding: 56px 0; }
  .story-card, .mission-card { padding: 28px; }
  .story-card__title br { display: none; }
  .mission-card__values { flex-wrap: wrap; gap: 6px 10px; justify-content: flex-start; white-space: normal; }
  .leaders { padding-top: 56px; }
  .display-title { font-size: 34px; line-height: 38px; letter-spacing: -0.8px; }
  .mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .mosaic__photo { height: 320px; }
  .mosaic__card { min-height: 240px; }
  .mosaic__text br { display: none; }
  .principles, .facilities, .explore, .ab-visit { padding: 56px 0; }
  .principles__title { font-size: 26px; line-height: 32px; }
  .gallery__stage { height: 300px; }
  .gallery__title { font-size: 30px; line-height: 36px; }
  .gallery__tour { font-size: 10px; }
  .gallery__thumbs { margin-left: 0; }
  .gallery__bar { padding: 16px; }
  .ab-visit__frame { padding: 24px; }
  .ab-visit__title { font-size: 36px; line-height: 40px; }
  .ab-visit__actions { flex-direction: column; }
  .btn-caps--soft, .btn-caps--outline { width: 100%; justify-content: center; }
  .loc-card { padding: 20px; }
  .loc-contacts > div { flex-direction: column; align-items: flex-start; gap: 4px; }
}