/* ============================================================
   Speciality pages — Orthopaedics, Regenerative Medicine
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.sp-hero {
  position: relative;
  background: linear-gradient(120deg, #021C3F 0%, #062042 45%, #0A3350 100%);
  padding: 72px 0 78px;
  overflow: hidden;
}
.sp-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(520px 380px at 88% 8%, rgba(47, 201, 143, .16), transparent 70%),
    radial-gradient(460px 340px at 4% 96%, rgba(243, 120, 46, .14), transparent 72%);
  pointer-events: none;
}
.sp-hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 54px; align-items: center;
}
.sp-hero__crumb { font-size: 13px; color: #9FB2CC; margin-bottom: 16px; letter-spacing: .2px; }
.sp-hero__crumb a { color: var(--green-lite); }
.sp-hero__crumb a:hover { text-decoration: underline; }
.sp-hero__tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #DDE7F3; font-size: 12px; font-weight: 600;
  letter-spacing: 1.3px; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.sp-hero__tag b {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #E05F14);
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0;
}
.sp-hero__title {
  color: #fff; font-size: 46px; line-height: 1.12;
  letter-spacing: -.6px; margin: 20px 0 0;
}
.sp-hero__title span { color: var(--green-lite); }
.sp-hero__lead {
  color: #C3D2E6; font-size: 16px; line-height: 1.75;
  text-align: justify; max-width: 560px; margin-top: 18px;
}
.sp-hero__acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* hero figure */
.sp-hero__fig { position: relative; padding-bottom: 34px; }
.sp-hero__shot {
  position: relative; border-radius: 22px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0A2545;
}
/* Natural aspect ratio — these are infographic banners with text baked in
   to the very edges, so cropping them hides content. */
.sp-hero__shot img {
  width: 100%; height: auto; max-height: 440px;
  object-fit: contain;   /* caps very tall artwork without ever cropping it */
  display: block;
}
.sp-hero__chip {
  position: absolute; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 13px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 30px rgba(2, 28, 63, .3);
  backdrop-filter: blur(4px);
  max-width: calc(50% - 10px); min-width: 0;
}
.sp-hero__chip--a { left: 8px; }
/* one card rides the top edge, one the bottom — diagonal, each only
   dipping ~20px onto the artwork */
.sp-hero__chip--b { right: 8px; top: -34px; bottom: auto; }
.sp-hero__chip .ico { color: var(--teal); flex: none; }
.sp-hero__chip b { display: block; font-size: 15.5px; color: var(--heading); font-family: var(--font-head); line-height: 1.25; }
.sp-hero__chip span { display: block; font-size: 11px; color: var(--body); letter-spacing: .2px; line-height: 1.35; }
.sp-hero__chip--a { animation: spFloat 5.5s ease-in-out infinite; }
.sp-hero__chip--b { animation: spFloat 6.5s ease-in-out infinite .8s; }
@keyframes spFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── Intro / about split ──────────────────────────────────── */
.sp-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.sp-split--flip .sp-split__fig { order: -1; }
.sp-split p { text-align: justify; }
.sp-split p + p { margin-top: 14px; }
.sp-split__fig { position: relative; }
.sp-split__fig img {
  width: 100%; border-radius: 20px;
  box-shadow: 0 18px 44px rgba(16, 33, 69, .14);
}
.sp-split__fig::before {
  content: ""; position: absolute; inset: auto -14px -14px auto;
  width: 128px; height: 128px; border-radius: 20px;
  border: 2px solid var(--green-lite); opacity: .38; z-index: -1;
}
.sp-title { font-size: 33px; letter-spacing: -.5px; line-height: 1.2; }
.sp-title em { font-style: normal; color: var(--orange-ink); }
.sp-title span { color: var(--teal-ink); }
.sp-kicker {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--teal-ink); margin-bottom: 12px;
}

/* small feature chips under intro */
.sp-marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.sp-mark {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 15px; border-radius: 13px;
  background: #fff; border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.sp-mark:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #CFE1DE; }
.sp-mark .ico { color: var(--teal); flex: none; margin-top: 2px; }
.sp-mark b { display: block; font-size: 13.5px; color: var(--heading); font-family: var(--font-head); }
.sp-mark span { font-size: 12px; line-height: 1.5; }

/* ── Conditions grid (pill cards) ─────────────────────────── */
.sp-cond { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; }
.sp-cond__i {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px; border-radius: 13px;
  background: #fff; border: 1px solid var(--border);
  font-size: 14px; color: var(--heading); font-weight: 500;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.sp-cond__i:hover {
  transform: translateY(-4px); background: var(--navy-900);
  border-color: var(--navy-900); color: #fff;
  box-shadow: 0 14px 30px rgba(2, 28, 63, .28);
}
.sp-cond__i i {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--card-mint); color: var(--teal);
  transition: background .25s, color .25s;
}
.sp-cond__i:hover i { background: rgba(255, 255, 255, .13); color: var(--green-lite); }

/* ── Approach flow ────────────────────────────────────────── */
.sp-flow-wrap { display: grid; grid-template-columns: 1fr 420px; gap: 54px; align-items: center; }
.sp-flow { display: flex; flex-direction: column; gap: 12px; }
.sp-flow__i {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 15px 20px; border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .3s, transform .3s, border-color .3s;
}
.sp-flow__i:hover { background: rgba(255, 255, 255, .1); border-color: rgba(47, 201, 143, .4); transform: translateX(6px); }
/* hexagon "cell" badge — icon instead of a number */
.sp-flow__n {
  position: relative; display: grid; place-items: center; flex: none;
  width: 52px; height: 60px; color: var(--green-lite);
  background: linear-gradient(150deg, rgba(47, 201, 143, .85), rgba(4, 128, 117, .3) 60%, rgba(47, 201, 143, .5));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: filter .3s;
}
.sp-flow__n i {
  position: absolute; inset: 1.6px;
  background: #0B2544; clip-path: inherit;
}
.sp-flow__n .ico { position: relative; z-index: 2; }
.sp-flow__i:hover .sp-flow__n { filter: drop-shadow(0 0 9px rgba(47, 201, 143, .55)); }
/* connecting spine between steps */
.sp-flow__i:not(:last-child)::after {
  content: ""; position: absolute; left: 45px; bottom: -13px;
  width: 2px; height: 14px; border-radius: 2px;
  background: linear-gradient(to bottom, rgba(47, 201, 143, .55), rgba(47, 201, 143, .1));
}
.sp-flow__i h4 { color: #fff; font-size: 16.5px; margin-bottom: 2px; }
.sp-flow__i p { color: #A9BDD6; font-size: 13px; line-height: 1.55; }
.sp-flow__fig img { width: 100%; border-radius: 20px; box-shadow: 0 20px 46px rgba(0, 0, 0, .38); }

/* ── Programme jump-nav ───────────────────────────────────── */
.sp-jump {
  display: flex; flex-wrap: wrap; gap: 9px;
  justify-content: center; margin-bottom: 46px;
}
.sp-jump a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--heading);
  transition: all .25s;
}
.sp-jump .ico { color: var(--teal); transition: color .25s; }
.sp-jump a:hover .ico { color: var(--green-lite); }
.sp-jump a:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; transform: translateY(-2px); }

/* ── Programme rows (zig-zag) ─────────────────────────────── */
.sp-prog { display: flex; flex-direction: column; gap: 68px; }
.sp-row {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: 52px; align-items: center; scroll-margin-top: 130px;
}
.sp-row:nth-child(even) .sp-row__fig { order: 2; }
.sp-row__fig { position: relative; }
.sp-row__fig img {
  width: 100%; height: 400px; object-fit: cover;
  border-radius: 20px; box-shadow: 0 18px 44px rgba(16, 33, 69, .16);
}
.sp-row__fig--tall img { height: 460px; }
.sp-row__fig--fit { background: var(--card-mint); border-radius: 20px; padding: 10px; }
.sp-row__fig--fit img { height: auto; object-fit: contain; box-shadow: none; }
/* hexagon "cell" badge over the photo — programme icon, no numbering */
.sp-row__no {
  position: absolute; left: -18px; top: -18px; z-index: 2;
  display: grid; place-items: center;
  width: 66px; height: 76.2px; color: var(--green-lite);
  background: linear-gradient(150deg, var(--green-lite), var(--teal) 48%, rgba(47, 201, 143, .7));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: spGlow 3.4s ease-in-out infinite;
  transition: transform .35s;
}
.sp-row__no i {
  position: absolute; inset: 2.2px; clip-path: inherit;
  background: linear-gradient(150deg, #0C2C50, var(--navy-900));
}
.sp-row__no .ico { position: relative; z-index: 2; }
/* Hover only on the photo, never the whole row — and no rotation, so the
   hexagon always sits upright. */
.sp-row__fig:hover .sp-row__no { transform: scale(1.06); }
@keyframes spGlow {
  0%, 100% { filter: drop-shadow(0 12px 24px rgba(2, 28, 63, .42)); }
  50%      { filter: drop-shadow(0 12px 24px rgba(2, 28, 63, .42)) drop-shadow(0 0 11px rgba(47, 201, 143, .6)); }
}
.sp-row h3 { font-size: 27px; line-height: 1.24; letter-spacing: -.3px; }
.sp-row__lede { color: var(--orange-ink); font-size: 14px; font-weight: 600; letter-spacing: .3px; margin-top: 8px; }
.sp-row__body { margin-top: 14px; }
.sp-row__body p { text-align: justify; font-size: 15px; }
.sp-row__body p + p { margin-top: 12px; }

.sp-row__lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--teal-ink); margin: 22px 0 11px; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tags span {
  padding: 7px 14px; border-radius: 999px;
  background: var(--card-mint); border: 1px solid #D8E7E4;
  font-size: 12.5px; color: #14514A; font-weight: 500;
  transition: transform .2s, background .2s;
}
.sp-tags span:hover { transform: translateY(-2px); background: #DCEDEA; }

.sp-goal {
  display: flex; align-items: flex-start; gap: 13px;
  margin-top: 22px; padding: 15px 18px;
  border-radius: 13px; border-left: 3px solid var(--orange);
  background: linear-gradient(100deg, #FFF4EC, #FFFDFB);
}
.sp-goal .ico { color: var(--orange-ink); flex: none; margin-top: 3px; }
.sp-goal b { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 3px; }
.sp-goal p { font-size: 14.5px; color: var(--heading); font-weight: 500; }

.sp-note {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 16px; padding: 13px 16px; border-radius: 11px;
  background: #F5F7FA; border: 1px dashed #CFD8E4;
}
.sp-note .ico { color: #7C8BA5; flex: none; margin-top: 2px; }
.sp-note p { font-size: 12.8px; line-height: 1.6; color: #5B6880; }

/* sub-technique cards (MIPO / MIROS) */
.sp-tech { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.sp-tech__i {
  padding: 16px 18px; border-radius: 14px;
  background: #fff; border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  transition: transform .25s, box-shadow .25s;
}
.sp-tech__i:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sp-tech__i h5 { font-size: 15px; color: var(--heading); margin-bottom: 6px; }
.sp-tech__i p { font-size: 13px; line-height: 1.6; text-align: justify; }

/* ── Therapy cards (regenerative) ─────────────────────────── */
.sp-thr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sp-thr__i {
  position: relative; overflow: hidden;
  border-radius: 18px; background: #fff;
  border: 1px solid var(--border);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.sp-thr__i:hover { transform: translateY(-7px); box-shadow: 0 22px 48px rgba(16, 33, 69, .15); border-color: #CFE1DE; }
.sp-thr__pic { position: relative; height: 190px; overflow: hidden; background: #EDF3F5; }
.sp-thr__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s; }
.sp-thr__i:hover .sp-thr__pic img { transform: scale(1.06); }
.sp-thr__abbr {
  position: absolute; left: 16px; bottom: -17px; z-index: 2;
  display: grid; place-items: center; min-width: 62px; height: 34px;
  padding: 0 14px; border-radius: 10px;
  background: linear-gradient(135deg, var(--navy-900), #0D3A5C);
  color: #fff; font-family: var(--font-head); font-size: 14px; letter-spacing: .6px;
  box-shadow: 0 10px 22px rgba(2, 28, 63, .3);
}
.sp-thr__b { padding: 30px 20px 22px; }
.sp-thr__b h4 { font-size: 17.5px; line-height: 1.3; margin-bottom: 9px; }
.sp-thr__b p { font-size: 13.6px; line-height: 1.65; text-align: justify; }

/* ── Condition photo cards (regenerative) ─────────────────── */
.sp-cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sp-cgrid > :nth-child(5) { grid-column: span 2; }
.sp-cgrid > :nth-child(6) { grid-column: span 1; }
.sp-cgrid > :nth-child(7) { grid-column: span 1; }
.sp-ccard {
  position: relative; overflow: hidden; border-radius: 16px;
  min-height: 190px; display: flex; align-items: flex-end;
  box-shadow: 0 10px 26px rgba(16, 33, 69, .12);
  transition: transform .3s, box-shadow .3s;
}
.sp-ccard:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(16, 33, 69, .2); }
.sp-ccard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sp-ccard:hover img { transform: scale(1.07); }
.sp-ccard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2, 28, 63, .88) 6%, rgba(2, 28, 63, .35) 42%, transparent 72%);
}
.sp-ccard b {
  position: relative; z-index: 2; padding: 16px 17px;
  color: #fff; font-family: var(--font-head); font-size: 15.5px;
  font-weight: 400; line-height: 1.3;
}

/* ── Philosophy trio ──────────────────────────────────────── */
.sp-phil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sp-phil__i {
  padding: 26px 22px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .3s, background .3s, border-color .3s;
}
.sp-phil__i:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .09); border-color: rgba(47, 201, 143, .38); }
.sp-phil__i i {
  display: grid; place-items: center; margin: 0 auto 15px;
  width: 54px; height: 54px; border-radius: 15px;
  background: linear-gradient(140deg, rgba(47, 201, 143, .22), rgba(4, 128, 117, .3));
  border: 1px solid rgba(47, 201, 143, .32); color: var(--green-lite);
}
.sp-phil__i h4 { color: #fff; font-size: 19px; margin-bottom: 8px; }
.sp-phil__i p { color: #A9BDD6; font-size: 13.5px; line-height: 1.65; }

.sp-quote {
  max-width: 760px; margin: 44px auto 0; text-align: center;
  color: #DDE7F3; font-family: var(--font-head); font-size: 21px; line-height: 1.55;
}
.sp-quote::before, .sp-quote::after { content: '"'; color: var(--green-lite); }

/* ── Benefits list ────────────────────────────────────────── */
.sp-ben { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
.sp-ben__i {
  position: relative; padding: 22px 20px 20px;
  border-radius: 16px; background: #fff;
  border: 1px solid var(--border); overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.sp-ben__i::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--teal), var(--green-lite));
  transform: scaleY(0); transform-origin: top; transition: transform .35s;
}
.sp-ben__i:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #CFE1DE; }
.sp-ben__i:hover::before { transform: scaleY(1); }
.sp-ben__i i {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--card-mint); color: var(--teal); margin-bottom: 14px;
}
.sp-ben__i h4 { font-size: 16px; margin-bottom: 7px; line-height: 1.3; }
.sp-ben__i p { font-size: 13.5px; line-height: 1.65; text-align: justify; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sp-hero__grid, .sp-split, .sp-flow-wrap, .sp-row { grid-template-columns: 1fr; gap: 36px; }
  .sp-hero__title { font-size: 38px; }
  .sp-row:nth-child(even) .sp-row__fig { order: 0; }
  .sp-split--flip .sp-split__fig { order: 0; }
  .sp-thr, .sp-phil { grid-template-columns: 1fr 1fr; }
  .sp-marks { grid-template-columns: 1fr 1fr; }
  .sp-cgrid { grid-template-columns: 1fr 1fr; }
  .sp-cgrid > :nth-child(5) { grid-column: span 2; }
  .sp-prog { gap: 54px; }
}
@media (max-width: 760px) {
  .sp-hero { padding: 48px 0 54px; }
  .sp-hero__title { font-size: 30px; }
  .sp-hero__lead { font-size: 15px; }
  .sp-hero__acts .btn { flex: 1 1 100%; justify-content: center; }
  .sp-hero__fig { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 0; }
  .sp-hero__shot { grid-column: 1 / -1; }
  .sp-hero__chip { position: static; max-width: none; padding: 9px 11px; gap: 8px; }
  .sp-hero__chip--a, .sp-hero__chip--b { left: auto; right: auto; }
  .sp-hero__chip b { font-size: 13.5px; }
  .sp-hero__chip span { font-size: 10.5px; line-height: 1.35; }
  .sp-hero__chip .ico { width: 19px; height: 19px; }
  .sp-marks, .sp-thr, .sp-phil, .sp-tech { grid-template-columns: 1fr; }
  .sp-title { font-size: 26px; }
  .sp-row h3 { font-size: 22px; }
  .sp-row__fig img, .sp-row__fig--tall img { height: 260px; }
  .sp-row__no { width: 56px; height: 64.7px; left: -10px; top: -14px; }
  .sp-flow__n { width: 44px; height: 50.8px; }
  .sp-flow__i:not(:last-child)::after { left: 41px; }
  .sp-cgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sp-cgrid > :nth-child(n) { grid-column: auto; }
  .sp-ccard { min-height: 150px; }
  .sp-ccard b { font-size: 13.5px; padding: 12px 13px; }
  .sp-quote { font-size: 17px; }
  .sp-jump { margin-bottom: 32px; }
  .sp-jump a { font-size: 12px; padding: 7px 13px; }
  .sp-prog { gap: 46px; }
}
@media (max-width: 420px) {
  .sp-cond { grid-template-columns: 1fr; }
}

/* ── Condition pills on a dark section ─────────────────────── */
.sp-cond__i--dark {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  color: #DDE7F3;
}
.sp-cond__i--dark i { background: rgba(47, 201, 143, .16); color: var(--green-lite); }
.sp-cond__i--dark:hover {
  background: var(--green-lite); border-color: var(--green-lite);
  color: var(--navy-900); box-shadow: 0 14px 30px rgba(47, 201, 143, .22);
}
.sp-cond__i--dark:hover i { background: rgba(2, 28, 63, .18); color: var(--navy-900); }

/* grid variants so 4- and 6-item groups stay balanced */
.sp-phil--4 { grid-template-columns: repeat(4, 1fr); }
.sp-phil--3 { grid-template-columns: repeat(3, 1fr); }
.sp-ben--3  { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .sp-phil--4, .sp-phil--3, .sp-ben--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .sp-phil--4, .sp-phil--3, .sp-ben--3 { grid-template-columns: 1fr; }
}

/* ── Speciality hub (specialists.php) ─────────────────────── */
.sp-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-mosaic figure {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
}
.sp-mosaic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.sp-mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 12px 9px; font-size: 11.5px; color: #fff;
  letter-spacing: .3px; font-weight: 500;
  background: linear-gradient(to top, rgba(2, 28, 63, .9), transparent);
}

.sp-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hub-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.hub-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(16, 33, 69, .16); border-color: #CFE1DE; }
.hub-card__pic { position: relative; aspect-ratio: 3 / 2; background: var(--card-mint); }
.hub-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s; }
.hub-card:hover .hub-card__pic img { transform: scale(1.05); }
.hub-card__ico {
  position: absolute; left: 16px; bottom: -22px; z-index: 2;
  display: grid; place-items: center;
  width: 48px; height: 55.4px; color: var(--green-lite);
  background: linear-gradient(150deg, var(--green-lite), var(--teal) 48%, rgba(47, 201, 143, .7));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 8px 16px rgba(2, 28, 63, .3));
}
.hub-card__ico i { position: absolute; inset: 2px; clip-path: inherit; background: linear-gradient(150deg, #0C2C50, var(--navy-900)); }
.hub-card__ico .ico { position: relative; z-index: 2; }
.hub-card__b { padding: 34px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.hub-card__b h3 { font-size: 18.5px; line-height: 1.28; margin-bottom: 7px; }
.hub-card__b p { font-size: 13.5px; line-height: 1.6; text-align: justify; }
.hub-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.hub-card__tags span {
  padding: 5px 11px; border-radius: 999px;
  background: var(--card-mint); border: 1px solid #D8E7E4;
  font-size: 11.5px; color: #14514A;
}
.hub-card__go { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--orange-ink); display: inline-flex; align-items: center; gap: 6px; }
.hub-card__go .arr { transition: transform .25s; }
.hub-card:hover .hub-card__go .arr { transform: translateX(4px); }

/* the flagship card runs the full width */
.hub-card--wide { grid-column: 1 / -1; flex-direction: row; }
.hub-card--wide .hub-card__pic { flex: 0 0 46%; aspect-ratio: auto; }
.hub-card--wide .hub-card__ico { left: auto; right: -24px; bottom: 26px; }
.hub-card--wide .hub-card__b { padding: 30px 32px; justify-content: center; }
.hub-card--wide .hub-card__b h3 { font-size: 26px; }
.hub-card--wide .hub-card__b p { font-size: 14.5px; max-width: 60ch; }

@media (max-width: 1024px) {
  .sp-hub { grid-template-columns: 1fr 1fr; }
  .hub-card--wide { flex-direction: column; }
  .hub-card--wide .hub-card__pic { flex: none; aspect-ratio: 3 / 2; }
  .hub-card--wide .hub-card__ico { left: 16px; right: auto; bottom: -22px; }
  .hub-card--wide .hub-card__b { padding: 34px 20px 20px; }
  .hub-card--wide .hub-card__b h3 { font-size: 21px; }
}
@media (max-width: 620px) {
  .sp-hub { grid-template-columns: 1fr; }
  .sp-mosaic { gap: 9px; }
}

/* ══════════ Faculty ══════════ */
/* sits between the white intro and the mint section below, so it takes a
   divider rather than a fill of its own */
.fac { background: #fff; border-top: 1px solid var(--border); padding-top: 72px; }
.fac__panel {
  display: grid; grid-template-columns: 296px 1fr; gap: 22px;
  align-items: start;
}

/* who is in this department */
.fac__rail { display: grid; gap: 10px; align-content: start; }
.fac__tab {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 11px 13px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  font-family: var(--font-body); color: var(--body);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.fac__tab:hover { border-color: #C9D8D6; transform: translateY(-2px); }
.fac__tab.is-on {
  border-color: var(--teal);
  box-shadow: 0 10px 26px rgba(4, 128, 117, .16), 0 0 0 1px var(--teal) inset;
}
.fac__avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: var(--card-mint); display: grid; place-items: center;
}
.fac__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fac__mono {
  font-family: var(--font-head); font-size: 18px; letter-spacing: .5px;
  color: var(--teal-dark);
}
.fac__mono--lg { font-size: 40px; }
.fac__who { min-width: 0; }
.fac__who b {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: 16.5px; color: var(--heading); line-height: 1.35;
}
.fac__who small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12px; line-height: 1.5; color: var(--heading);
  margin-top: 3px;
}

/* the profile card */
.fac__stage { position: relative; }
.fac__card {
  display: none; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
}
.fac__card.is-on { display: block; }
.fac__head {
  display: flex; gap: 20px; align-items: center;
  padding: 24px 26px; border-bottom: 1px solid var(--border);
  background: linear-gradient(120deg, #F7FBFA, #fff 62%);
}
.fac__portrait {
  flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  background: var(--card-mint); display: grid; place-items: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--card-mint);
}
.fac__portrait img { width: 100%; height: 100%; object-fit: cover; }
.fac__id { min-width: 0; }
.fac__id h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 27px;
  color: var(--heading); line-height: 1.25; margin-bottom: 6px; letter-spacing: -.2px;
}
.fac__role { font-size: 13.5px; font-weight: 600; color: var(--teal-ink); line-height: 1.55; }
.fac__quals { font-size: 13px; color: var(--heading); line-height: 1.6; margin-top: 5px; }

/* the part that scrolls */
.fac__scroll {
  max-height: 380px; overflow-y: auto; padding: 22px 26px;
  scrollbar-width: thin; scrollbar-color: #C7D6D4 transparent;
  overscroll-behavior: contain;
}
.fac__scroll::-webkit-scrollbar { width: 8px; }
.fac__scroll::-webkit-scrollbar-track { background: transparent; }
.fac__scroll::-webkit-scrollbar-thumb { background: #D3DFDD; border-radius: 8px; }
.fac__scroll::-webkit-scrollbar-thumb:hover { background: #B9CCC9; }
.fac__scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

.fac__intro { font-size: 14.5px; line-height: 1.85; color: var(--heading); }
.fac__stats {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px;
}
.fac__stats div {
  flex: 1 1 120px; padding: 12px 14px; border-radius: 12px;
  background: var(--card-mint); border: 1px solid #DCEAE8;
}
.fac__stats b {
  display: block; font-family: var(--font-head); font-weight: 400;
  font-size: 22px; color: var(--teal-dark); line-height: 1.1;
}
.fac__stats span { font-size: 12px; color: var(--heading); font-weight: 500; }

/* --acc / --acc-bg come from PHP, a different colour per section */
.fac__block {
  --acc: var(--teal-dark); --acc-bg: var(--card-mint);
  margin-top: 18px; padding: 14px 16px 15px;
  border-radius: 13px; background: var(--acc-bg);
  border: 1px solid rgba(16, 33, 69, .06);
}
.fac__block h4 {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--acc); padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(16, 33, 69, .1);
}
.fac__block h4::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px;
  background: var(--acc);
}
.fac__block ul { list-style: none; display: grid; gap: 8px; }
.fac__block li {
  position: relative; padding-left: 20px; font-size: 13.5px;
  line-height: 1.7; color: var(--heading);
}
.fac__block li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--acc);
}

.fac__foot {
  padding: 16px 26px; border-top: 1px solid var(--border); background: #FCFDFD;
}

@media (max-width: 900px) {
  .fac__panel { grid-template-columns: 1fr; }
  .fac__rail {
    grid-auto-flow: column; grid-auto-columns: minmax(228px, 1fr);
    overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory;
  }
  .fac__tab { scroll-snap-align: start; }
  .fac__scroll { max-height: 340px; }
}
@media (max-width: 620px) {
  .fac__head { flex-direction: column; text-align: center; gap: 14px; padding: 22px 18px; }
  .fac__scroll { padding: 18px; max-height: 300px; }
  .fac__foot { padding: 14px 18px; }
  .fac__id h3 { font-size: 23px; }
}

/* ══════════ Specialists — photo row that folds ══════════ */
.facx {
  background: linear-gradient(125deg, var(--navy-900) 0%, #062042 46%, #0A3350 100%);
  padding-top: 76px;
}

/* --fn is the number of doctors, set on the element by PHP.
   Three states: at rest every doctor is an equal card; once one is
   opened it takes the width and the others fold to strips. Only
   flex-basis animates — transitioning flex-grow as well leaves the
   panels stuck part-way when you click quickly. */
.facx__row {
  --fw: 104px;                     /* a folded strip */
  --fg: 14px;                      /* the gap between cards */
  --fcw: 380px;                    /* one card, the same size on every page */
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fg); align-items: stretch;
}
.facx__p {
  position: relative; display: flex; flex: 0 0 auto;
  flex-basis: min(var(--fcw), 100%);
  border-radius: 20px; overflow: hidden;
  background: #fff; border: 1px solid var(--border);
  transition: flex-basis .5s cubic-bezier(.4, 0, .2, 1), box-shadow .35s, border-color .35s;
}
/* opening pulls them back onto one line so the strips sit alongside */
.facx__row.is-open { flex-wrap: nowrap; }
.facx__row.is-open .facx__p { flex-basis: var(--fw); }
.facx__row.is-open .facx__p.is-on {
  flex-basis: calc(100% - (var(--fn) - 1) * (var(--fw) + var(--fg)));
  border-color: #D5E4E2; box-shadow: 0 18px 44px rgba(16, 33, 69, .12);
}

/* closed: the photo, dimmed, with the name reading up the side */
.facx__spine {
  position: absolute; inset: 0; width: 100%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 0 24px; border: 0; background: var(--navy-800);
  transition: opacity .3s;
}
.facx__spine img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  filter: grayscale(.3); transition: filter .4s, transform .5s;
}
.facx__spine::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 28, 63, .12) 30%, rgba(2, 28, 63, .82));
}
.facx__spine:hover img { filter: grayscale(0); transform: scale(1.05); }
.facx__vname {
  position: relative; z-index: 1; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-body); font-weight: 700; font-size: 17.5px; letter-spacing: .3px;
  color: #fff; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.facx__mono {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  z-index: 1; font-family: var(--font-head); font-size: 21px; color: #9FD5CE;
}
.facx__spine--mono { background: linear-gradient(170deg, #0B3A55, var(--navy-900)); }
.facx__spine--mono::after { background: none; }
.facx__spine { opacity: 0; pointer-events: none; }
.facx__row.is-open .facx__p:not(.is-on) .facx__spine { opacity: 1; pointer-events: auto; }

/* open: header, then the profile scrolling inside the same row height */
.facx__body {
  position: absolute; inset: 0; min-width: 560px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .35s .18s, visibility 0s .53s;
}
.facx__row.is-open .facx__p.is-on .facx__body { opacity: 1; visibility: visible; transition: opacity .4s .2s; }

/* the opened header sits on navy so the doctor reads as the subject
   of the panel, not as another block of body copy */
.facx__head {
  display: flex; gap: 22px; align-items: center; flex: none;
  padding: 24px 26px; border-bottom: 0;
  background: linear-gradient(125deg, var(--navy-900), #0A3350);
}
.facx__portrait {
  flex: none; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, .08); display: grid; place-items: center;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .16), 0 10px 24px rgba(0, 0, 0, .3);
}
.facx__portrait img { width: 100%; height: 100%; object-fit: cover; }
.facx__portrait .fac__mono--lg { font-size: 40px; color: #9FD5CE; }
.facx__head .fac__id h3 { color: #fff; }
.facx__head .fac__role { color: var(--green-lite); }
.facx__head .fac__quals { color: #C3D2E6; }

.facx__scroll {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px 26px 24px;
  scrollbar-width: thin; scrollbar-color: #C7D6D4 transparent;
  overscroll-behavior: contain;
}
.facx__scroll::-webkit-scrollbar { width: 8px; }
.facx__scroll::-webkit-scrollbar-track { background: transparent; }
.facx__scroll::-webkit-scrollbar-thumb { background: #D3DFDD; border-radius: 8px; }
.facx__scroll::-webkit-scrollbar-thumb:hover { background: #B9CCC9; }
.facx__scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

.facx__hint {
  text-align: center; font-size: 12.5px; color: #A9BCD4;
  margin-top: 18px;
}

@media (max-width: 1080px) {
  .facx__body { min-width: 460px; }
  .facx__row { --fw: 92px; }
}

/* stacked: each doctor is a bar, the open one grows and scrolls */
@media (max-width: 820px) {
  .facx__row { flex-direction: column; height: auto; gap: 10px; }
  .facx__p, .facx__row.is-open .facx__p, .facx__row.is-open .facx__p.is-on {
    flex-basis: auto; border-radius: 16px;
    transition: height .45s cubic-bezier(.4, 0, .2, 1), box-shadow .35s;
  }
  .facx__spine { flex-direction: row; align-items: center; justify-content: flex-start;
                 gap: 15px; padding: 0 18px; }
  .facx__spine img { object-position: 50% 20%; }
  .facx__vname { writing-mode: horizontal-tb; transform: none; font-size: 16.5px;
                 white-space: normal; text-align: left; }
  .facx__spine .facx__mono { position: relative; top: auto; left: auto; transform: none;
                width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12);
                display: grid; place-items: center; font-size: 15px; }
  .facx__body { min-width: 0; }
  .facx__head { padding: 18px; gap: 14px; flex-wrap: wrap; }
  .facx__portrait { width: 86px; height: 86px; }
  .facx__scroll { padding: 18px; }
}
@media (max-width: 520px) {
  .facx__p.is-on { height: 600px; }
  .fac__id h3 { font-size: 22px; }
}

/* pages.css strips synthetic bold from every heading, because Marcellus
   ships a single weight. The doctor's name is set in Work Sans, which has
   a real 700, so it opts back in rather than being flattened to 400. */
.fac__id h3 { font-weight: 700 !important; letter-spacing: -.2px; }
.fac__block h4 { font-weight: 700 !important; letter-spacing: .6px; }

/* ── resting card: colour photo, name, role, degrees, counts ── */
.facx__peek {
  position: relative; width: 100%; flex: 1; cursor: pointer;
  display: flex; flex-direction: column; text-align: left;
  border: 0; background: none; padding: 0; font: inherit;
  transition: opacity .3s;
}
.facx__row.is-open .facx__peek { opacity: 0; pointer-events: none; }
.facx__row.is-open { height: 560px; }
.facx__row.is-open .facx__p { overflow: hidden; }

.facx__shot {
  /* wider than tall, and the picture is fitted rather than cropped, so the
     whole frame — head down to the folded arms — still shows, just smaller */
  position: relative; flex: 0 0 auto; aspect-ratio: 5 / 4; overflow: hidden;
  /* the studio backdrop in all four photographs measures about this tone, so
     the space either side of a fitted picture is indistinguishable from it */
  background: #F4F5F7; display: block;
}
/* The fade sits on the frame, not the picture. On the picture it scaled with
   the hover zoom and the soft edge slid out of sight, leaving a hard line. */
.facx__shot:not(.facx__shot--mono) {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%,
                        rgba(0, 0, 0, .6) 95%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 88%,
                        rgba(0, 0, 0, .6) 95%, transparent 100%);
}
/* the photo dissolves into the card rather than stopping on a hard edge,
   so there is no line between the picture and the name below it */
.facx__shot img {
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  transition: transform .5s;
  /* zoom grows downwards, so the top of the head is never pushed out of frame */
  transform-origin: 50% 0;
}
.facx__peek:hover .facx__shot img { transform: scale(1.05); }
.facx__shot--mono {
  display: grid; place-items: center;
  background: linear-gradient(165deg, #0B3A55, var(--navy-900));
}
.facx__shot--mono .facx__mono {
  position: static; transform: none; font-size: 46px; color: #9FD5CE;
}

.facx__meta {
  display: flex; flex-direction: column; align-items: center; flex: 1; min-height: 0;
  padding: 16px 18px 18px; gap: 7px; text-align: center;
}
/* without this the role and degrees get squeezed to nothing when the card
   is shorter than its content, instead of the text simply clamping */
.facx__meta > * { flex: none; }
/* the banner runs off the left edge of the card and lifts onto the photo */
.facx__namewrap {
  display: flex; align-items: flex-end; justify-content: flex-start;
  width: calc(100% + 36px);
  margin: -46px -18px 6px -18px;
  min-height: 54px;
  position: relative; z-index: 2;
}
.facx__name {
  display: inline-block; max-width: calc(100% - 26px);
  padding: 11px 34px 11px 20px;
  border-left: 4px solid var(--green-lite);
  /* navy at the spine, easing through teal and thinning out at the tail so
     the banner finishes into the photograph instead of stopping dead */
  background-image: linear-gradient(100deg,
      var(--navy-900) 0%, #093A56 38%, rgba(4, 128, 117, .95) 74%,
      rgba(47, 201, 143, .82) 92%, rgba(47, 201, 143, .55) 100%);
  background-size: 165% 100%;
  background-position: 0 0;
  box-shadow: 0 12px 26px rgba(2, 28, 63, .34);
  font-family: var(--font-body); font-weight: 700; font-size: 21px;
  color: #fff; line-height: 1.28; letter-spacing: -.3px; text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  /* the tail is cut on the slant, so it reads as a flag rather than a box */
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition: transform .4s, background-position .55s ease, box-shadow .4s, border-color .4s;
}
/* hover sweeps the gradient along and pushes the flag out */
.facx__peek:hover .facx__name {
  transform: translateX(7px);
  background-position: 100% 0;
  border-color: #7BFFCB;
  box-shadow: 0 14px 30px rgba(2, 28, 63, .4), -3px 0 14px rgba(47, 201, 143, .55);
}
.facx__job {
  font-size: 14px; font-weight: 600; color: var(--teal-ink); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.facx__deg { font-size: 12.5px; color: var(--heading); line-height: 1.6; }

/* At rest: one gradient in the logo's teal and green, with a colourful
   halo that cycles on its own. The full multicolour run is saved for
   hover, so three buttons are not all doing the same thing at once. */
.facx__more {
  position: relative; overflow: hidden;
  margin-top: auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 20px; border-radius: 999px;
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .2px;
  background-image: linear-gradient(100deg, var(--teal), var(--green-lite) 55%, var(--teal));
  background-size: 100% 100%;
  animation: facxGlow 6s ease-in-out infinite;
  transition: transform .25s, background-size .4s;
}

/* the halo — box-shadow, so it is not clipped the way a blurred child would be */
@keyframes facxGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(4, 128, 117, .5),  0 0 30px rgba(4, 128, 117, .26), 0 6px 16px rgba(16, 33, 69, .16); }
  33%      { box-shadow: 0 0 15px rgba(47, 201, 143, .55), 0 0 30px rgba(47, 201, 143, .3),  0 6px 16px rgba(16, 33, 69, .16); }
  66%      { box-shadow: 0 0 15px rgba(243, 120, 46, .5),  0 0 30px rgba(243, 120, 46, .26), 0 6px 16px rgba(16, 33, 69, .16); }
}

/* the cards are offset so the three haloes never pulse in step */
.facx__p:nth-child(2) .facx__more { animation-delay: -2s; }
.facx__p:nth-child(3) .facx__more { animation-delay: -4s; }

/* hover: the full colour run, plus a highlight sweeping across */
.facx__peek:hover .facx__more,
.facx__peek:focus-visible .facx__more {
  /* The strip is scrolled by exactly its own width, so it tiles. For the
     join to be invisible it has to start and end on the same colour, and
     run flat at 90deg — an angled gradient meets its own edge on a slant
     and shows a seam however the stops are arranged. */
  background-image: linear-gradient(90deg,
      #4285F4, #9B72CB, #D96570, #F2A60C, #2FC98F, #048075, #4285F4);
  background-size: 320% 100%;
  animation: facxFlow 5s linear infinite, facxGlow 6s ease-in-out infinite;
  transform: translateY(-2px);
}
@keyframes facxFlow { to { background-position: -320% 0; } }

.facx__more::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: translateX(-160%);
  opacity: 0;
}
.facx__peek:hover .facx__more::after {
  opacity: 1;
  animation: facxSheen 3.2s ease-in-out infinite;
}
@keyframes facxSheen {
  0%   { transform: translateX(-160%); }
  60%  { transform: translateX(320%); }
  100% { transform: translateX(320%); }
}

.facx__more > * { position: relative; z-index: 1; }
.facx__more .arr { transition: transform .3s; }
.facx__peek:hover .facx__more .arr { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  /* the halo still shifts colour, just slowly, and nothing sweeps or slides */
  .facx__more { animation-duration: 20s; }
  .facx__peek:hover .facx__more { animation-duration: 24s, 20s; transform: none; }
  .facx__more::after { display: none; }
}
.facx__peek:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }
.facx__p:hover { border-color: #CFE1DE; box-shadow: var(--shadow); }

/* close, back to the row of cards */
.facx__close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 20px; line-height: 1;
  display: grid; place-items: center; transition: background .2s, border-color .2s;
}
.facx__close:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); }
.facx__close:focus-visible { outline: 2px solid var(--green-lite); outline-offset: 2px; }
.facx__head { position: relative; padding-right: 52px; }

@media (max-width: 1080px) {

  .facx__name { font-size: 18px; padding: 9px 28px 9px 16px; }
  .facx__deg { -webkit-line-clamp: 2; }
}
@media (max-width: 820px) {
  /* at rest each doctor is a full-width card; opening one grows it */
  .facx__row.is-open .facx__p { height: 78px; }
  .facx__row.is-open .facx__p.is-on { height: 560px; }
  .facx__row.is-open .facx__peek { position: absolute; inset: 0; }

  .facx__peek { flex-direction: column; }
  .facx__close { top: 10px; right: 10px; }
}
@media (max-width: 520px) {
  .facx__row.is-open .facx__p.is-on { height: 600px; }
}

/* ── corner watermark, built from the speciality's own icons ── */
.facx { position: relative; overflow: hidden; }
.facx > .container { position: relative; z-index: 1; }
.facx .sp-title { color: #fff; }
.facx .sp-title span { color: var(--green-lite); }
.facx .sp-title em { color: #FFB27A; }
.facx .eyebrow { color: var(--green-lite); }
.facx .section__head p { color: #C3D2E6; }

/* texture: two soft glows, then a fine dot grid over the whole band */
.facx::before,
.facx::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.facx::before {
  background:
    radial-gradient(640px 440px at 88% 4%, rgba(47, 201, 143, .15), transparent 70%),
    radial-gradient(540px 400px at 3% 96%, rgba(243, 120, 46, .12), transparent 72%);
}
.facx::after {
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .35) 60%, transparent);
          mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .35) 60%, transparent);
}

/* white cards need a deeper shadow to lift off the navy */
.facx__p { box-shadow: 0 14px 32px rgba(0, 0, 0, .26); }
.facx__p:hover { border-color: #fff; box-shadow: 0 20px 44px rgba(0, 0, 0, .34); }
.facx__deco {
  position: absolute; width: 380px; height: 380px;
  overflow: hidden;          /* keep the artwork inside the area the fade covers */
  pointer-events: none; color: var(--teal); opacity: .26;
  /* soft from the middle outwards, so whichever way the block is turned and
     wherever the section clips it, the edge has already faded to nothing */
  -webkit-mask-image: radial-gradient(circle, #000 20%, rgba(0,0,0,.5) 50%, transparent 74%);
          mask-image: radial-gradient(circle, #000 20%, rgba(0,0,0,.5) 50%, transparent 74%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
}
.facx__deco i { position: absolute; display: block; line-height: 0; }
.facx__deco i:nth-child(2n) { color: var(--green-lite); }
.facx__deco i:nth-child(3n) { color: var(--orange); opacity: .8; }
/* sat fully inside the band — bleeding it over the edge meant the section
   clipped it while it was still half opaque, which is the square cut-off */
.facx__deco--tl { top: 0; left: 0; }
.facx__deco--br { bottom: 0; right: 0; transform: rotate(180deg); }
/* the icons themselves are not upside-down in the bottom corner */
.facx__deco--br i { transform: rotate(180deg); }

@media (max-width: 820px) {
  .facx__deco { width: 250px; height: 250px; opacity: .18; }
}

/* real bone artwork, sized and angled per corner */
.facx__deco--art { color: #8FE3D6; opacity: .3; }
.facx__deco--art i { transform: rotate(var(--rot, 0deg)); transform-origin: 50% 50%; }
.facx__deco--art svg { width: 100%; height: auto; display: block; }
.facx__deco--br.facx__deco--art i { transform: rotate(calc(var(--rot, 0deg) + 180deg)); }
@media (max-width: 820px) {
  .facx__deco--art { opacity: .24; }
}

/* ── role tags ── */
.fac__tag {
  display: inline-block;
  padding: 5px 11px; border-radius: 999px;
  background: var(--card-mint); border: 1px solid #CFE5E1;
  color: var(--teal-ink); font-size: 11.5px; font-weight: 600;
  line-height: 1.4; letter-spacing: .1px;
}
.fac__tag--more { background: #FDEFE4; border-color: #F7D9BF; color: #94400A; }

/* on the card: centred, capped at two so the row stays even */
.facx__job {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  overflow: visible; -webkit-line-clamp: none;
}
/* in the opened header: sits on navy, so the chips go translucent */
.facx__head .fac__role { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.facx__head .fac__tag {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22);
  color: var(--green-lite);
}
.facx__head .fac__tag--more { background: rgba(243, 120, 46, .22); border-color: rgba(243, 120, 46, .4); color: #FFC79A; }
/* the tabs layout keeps them light */
.fac__head .fac__role { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 620px) {
  .fac__tag { font-size: 11px; padding: 4px 9px; }
}

/* with five or six on the page the folded strips have to be slimmer to leave
   the opened profile a usable width — the cards themselves do not change */
.facx__row--tight { --fw: 86px; }
.facx__row--tight .facx__vname { font-size: 15.5px; }