.doctor-portrait {
  margin: 0;
  position: relative;
  max-width: 370px;
  padding: 0 0 2.5rem 2.5rem
}

.doctor-portrait:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 2.5rem;
  right: 2.5rem;
  bottom: 0;
  background: var(--soft);
  border-radius: 1rem
}

.doctor-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 390px;
  object-fit: cover;
  object-position: center top;
  border-radius: 1rem;
  display: block;
  filter: saturate(.88)
}

.doctor-portrait figcaption {
  position: absolute;
  z-index: 2;
  left: 3.25rem;
  bottom: 0;
  background: var(--navy);
  color: #fff;
  border-radius: .4rem;
  padding: .7rem .8rem;
  font-size: .67rem;
  line-height: 1.35
}

.doctor-portrait figcaption span {
  color: rgba(255, 255, 255, .58);
  font-size: .56rem
}

@media(max-width:600px) {
  .doctor-portrait {
    max-width: 100%;
    padding-left: 1.5rem
  }

  .doctor-portrait img {
    height: 350px
  }

  .doctor-portrait figcaption {
    left: 2.2rem
  }
}

/* Premium design-system layer */
:root {
  --primary: #102c3d;
  --primary-strong: #081c29;
  --secondary: #75d4c2;
  --accent: #ccebe4;
  --surface: #fbfcf8;
  --surface-soft: #edf5f1;
  --text: #152630;
  --text-muted: #64747b;
  --border: #d7e3df;
  --success: #238a68;
  --white: #fff;
  --black: #000;
  --shadow-soft: 0 18px 55px rgba(16, 44, 61, .10);
  --shadow-lift: 0 24px 70px rgba(16, 44, 61, .17);
  --radius-sm: .5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

html {
  scroll-padding-top: 92px;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--surface);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.brand-copy strong,
.btn {
  font-family: 'Manrope', sans-serif;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 4px;
}

.skip-link {
  z-index: 2000;
  box-shadow: var(--shadow-soft);
}

.site-utility {
  position: absolute;
  inset: 0 0 auto;
  z-index: 31;
  height: 34px;
  color: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: 'DM Mono', monospace;
  font-size: .59rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .35s ease, opacity .35s ease;
}

.utility-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
  gap: 1rem;
}

.utility-inner span,
.utility-inner a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.utility-inner a {
  color: var(--secondary);
}

body.has-scrolled-header .site-utility {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.site-header {
  top: 34px;
  padding: 1.15rem 0;
}

.site-header.scrolled {
  top: 0;
  padding: .72rem 0;
}

.site-header.scrolled .brand-mark {
  width: 31px;
  height: 31px;
}

.header-inner {
  min-height: 46px;
}

.brand {
  gap: .75rem;
}

.brand-mark {
  border-width: 1px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .025);
}

.brand-copy {
  gap: .18rem;
}

.brand-copy strong {
  font-size: 1.02rem;
  letter-spacing: -.04em;
}

.brand-copy small {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: .16em;
}

.desktop-nav {
  gap: 1.12rem;
}

.desktop-nav a {
  font-size: .71rem;
  letter-spacing: .02em;
  position: relative;
}

.desktop-nav a:after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: .2rem;
  height: 1px;
  background: var(--secondary);
  transition: right .25s ease;
}

.desktop-nav a:hover:after,
.desktop-nav a[aria-current='page']:after {
  right: 0;
}

.nav-mega {
  position: static;
}

.nav-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.nav-mega-trigger i {
  font-size: .56rem;
  transition: transform .2s ease;
}

.nav-mega:hover .nav-mega-trigger i,
.nav-mega:focus-within .nav-mega-trigger i {
  transform: rotate(180deg);
}

.mega-panel {
  position: absolute;
  left: 50%;
  top: calc(100% - .2rem);
  width: min(1050px, calc(100vw - 3rem));
  display: grid;
  grid-template-columns: .8fr 1.7fr;
  gap: 2rem;
  padding: 1.8rem;
  color: var(--primary);
  background: rgba(251, 252, 248, .98);
  border: 1px solid rgba(16, 44, 61, .12);
  border-radius: 1rem;
  box-shadow: 0 24px 70px rgba(16, 44, 61, .22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  backdrop-filter: blur(18px);
}

.nav-mega:hover .mega-panel,
.nav-mega:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.mega-intro .eyebrow,
.mega-label {
  color: var(--success);
}

.mega-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.mega-label {
  margin: 0 0 .6rem;
  font: .62rem/1 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mega-columns a {
  display: block;
  padding: .34rem 0;
  color: var(--text-muted);
  font-size: .75rem;
}

.text-link.is-disabled {
  cursor: default;
  pointer-events: none;
}

.mega-columns a:hover {
  color: var(--primary);
  padding-left: .25rem;
}

.header-actions {
  gap: .65rem;
}

/* Improve readability of the primary desktop navigation without enlarging mega-menu links. */
html body .desktop-nav>a,
html body .desktop-nav>.nav-mega>.nav-mega-trigger {
  font-size: 1rem !important;
}

@media (max-width: 1100px) and (min-width: 992px) {

  html body .desktop-nav>a,
  html body .desktop-nav>.nav-mega>.nav-mega-trigger {
    font-size: .9rem !important;
  }

  
}

/* Patient stories page: an editorial, privacy-conscious story layout. */
.patient-stories-hero {
  background:
    linear-gradient(90deg, rgba(4, 21, 31, .94), rgba(5, 27, 38, .7)),
    var(--page-hero-image);
  background-size: cover;
  background-position: center;
}

.patient-stories-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 4rem;
  align-items: end;
  margin-top: 3.5rem;
}

.patient-stories-hero h1 {
  max-width: 820px;
  margin: 0 0 1.3rem;
}

.patient-stories-hero-lead {
  max-width: 640px;
  color: rgba(255, 255, 255, .76);
  font-size: 1rem;
  line-height: 1.75;
}

.patient-stories-hero-aside {
  display: grid;
  gap: .8rem;
  padding: 1.25rem 0 0 1.25rem;
  border-left: 1px solid rgba(117, 212, 194, .55);
  color: rgba(255, 255, 255, .72);
}

.patient-stories-hero-aside span,
.patient-story-card-top span {
  font: .6rem/1.4 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.patient-stories-hero-aside strong {
  color: #fff;
  font: 600 1.35rem/1.08 'Manrope', sans-serif;
  letter-spacing: -.05em;
}

.patient-stories-hero-aside i {
  color: var(--secondary);
  font-size: 1.3rem;
}

.patient-stories-section {
  background: var(--surface);
}

.patient-stories-section-head {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 3.2rem;
}

.patient-stories-section-head>p {
  max-width: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: .85rem;
}

.patient-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.patient-stories-consent-note {
  max-width: auto;
  margin: 2rem 0 0;
  color: var(--text-muted);
  font-size: .76rem;
  line-height: 1.7;
}

.patient-story-card {
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: #fff;
  box-shadow: none;
  transition: border-color .2s ease;
}

.patient-story-card:hover {
  border-color: var(--secondary);
}

.patient-story-card blockquote {
  position: relative;
  max-width: 390px;
  margin: 2rem 0 1rem;
  color: var(--primary);
  font: 600 clamp(1.25rem, 1.6vw, 1.75rem)/1.2 'Manrope', sans-serif;
  letter-spacing: -.045em;
}

.patient-story-card-cite {
  margin: auto 0 0 !important;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
}

@media (max-width: 991px) {

  .patient-stories-hero-content,
  .patient-stories-section-head,
  .patient-stories-guide {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .patient-stories-hero-aside {
    max-width: 300px;
  }

  .patient-stories-section-head>p {
    max-width: 600px;
  }
}

@media (max-width: 700px) {
  .patient-stories-hero-content {
    margin-top: 2.4rem;
  }

  .patient-stories-grid {
    grid-template-columns: 1fr;
  }

  .patient-story-card {
    min-height: 0;
  }

  .patient-story-card h3 {
    margin-top: 2rem;
  }

  
}

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .75rem 1.18rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(16, 44, 61, .16);
}

.btn-primary {
  background: var(--secondary);
  color: var(--primary);
}

.btn-primary:hover {
  background: #9ce4d6;
  color: var(--primary);
}

.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, .4);
  color: var(--white);
}

.btn-outline-light:hover {
  background: var(--white);
  color: var(--primary);
}

.menu-toggle {
  width: 44px;
  height: 44px;
  display: none;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
}

.hero {
  min-height: min(920px, 100svh);
  height: 100svh;
  max-height: none;
}

.hero-slide:before {
  background: linear-gradient(90deg, rgba(4, 21, 31, .91) 0%, rgba(5, 27, 38, .62) 44%, rgba(5, 27, 38, .08) 100%), linear-gradient(0deg, rgba(4, 21, 31, .48), transparent 45%);
}

.hero-slide .container {
  padding-bottom: 10.5rem;
}

.hero h1,
.hero h2 {
  max-width: 820px;
  font-size: clamp(3.3rem, 7vw, 7rem);
  line-height: 1.03;
  letter-spacing: -.085em;
  font-weight: 600;
  margin: 0 0 1.4rem;
}

.hero-copy p {
  max-width: 570px;
}

.hero-meta-inner {
  padding-top: 1.25rem;
}


.slider-controls button {
  transition: background .25s ease, transform .25s ease;
}

.slider-controls button:hover {
  transform: translateY(-2px);
}

.section {
  padding: clamp(5rem, 9vw, 8.5rem) 0;
}

.section-heading h2,
.split-copy h2,
.story-copy h2 {
  font-size: clamp(2.35rem, 4.5vw, 4.4rem);
}

.intro-section {
  position: relative;
}

.intro-section:before,
.pathway-section:before {
  content: '';
  position: absolute;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgba(16, 44, 61, .06);
  border-radius: 50%;
  right: -13rem;
  top: 8rem;
  pointer-events: none;
}

.intro-section {
  overflow: hidden;
}

.doctor-portrait {
  filter: drop-shadow(0 24px 30px rgba(16, 44, 61, .12));
}

.doctor-portrait img {
  box-shadow: var(--shadow-soft);
}

.doctor-portrait figcaption {
  box-shadow: 0 14px 26px rgba(16, 44, 61, .2);
}

.speciality-section {
  position: relative;
  overflow: hidden;
}

.speciality-section:before {
  content: 'ORTHOPAEDICS';
  position: absolute;
  right: -1rem;
  top: 5rem;
  color: rgba(255, 255, 255, .035);
  font: 800 clamp(5rem, 13vw, 14rem)/1 'Manrope', sans-serif;
  letter-spacing: -.1em;
  pointer-events: none;
}

.image-split {
  position: relative;
}

.pathway-section {
  position: relative;
  overflow: hidden;
}

.pathway-tabs {
  position: relative;
  z-index: 1;
}

.pathway-tab {
  min-height: 62px;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.pathway-tab:hover {
  transform: translateX(5px);
}

.pathway-panel {
  position: relative;
  box-shadow: var(--shadow-soft);
}

.pathway-panel:after {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(16, 44, 61, .1);
  border-radius: 50%;
  right: -38px;
  bottom: -45px;
}

.appointment-band {
  position: relative;
  overflow: hidden;
}

.appointment-band:after {
  content: '';
  position: absolute;
  width: 25rem;
  height: 25rem;
  border: 1px solid rgba(16, 44, 61, .15);
  border-radius: 50%;
  right: -8rem;
  top: -13rem;
}

.appointment-band-inner {
  position: relative;
  z-index: 1;
}

.location-section {
  position: relative;
}

.map-placeholder {
  box-shadow: var(--shadow-soft);
}

.map-placeholder-rich {
  display: grid;
  place-items: center;
  min-height: 500px;
  background: radial-gradient(circle at 52% 45%, var(--secondary) 0 9px, transparent 10px), linear-gradient(135deg, #cfe6e1, #edf5f1);
}

.map-label {
  padding: .75rem 1rem;
  border-radius: .6rem;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-soft);
  color: var(--primary);
  font: 700 .82rem/1.4 'Manrope', sans-serif;
  text-align: center;
}

.map-label small {
  color: var(--text-muted);
  font: .65rem/1.2 'DM Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.two-column-story {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.story-copy {
  max-width: 660px;
}

.story-copy>p {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.85;
}

.info-list {
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.info-list>div {
  display: grid;
  grid-template-columns: 1fr;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.info-list span {
  color: var(--success);
  font: .68rem/1 'DM Mono', monospace;
}

.info-list strong {
  font: 600 .88rem/1.35 'Manrope', sans-serif;
}

.info-list p {
  grid-column: 1;
  margin: .3rem 0 0;
  color: var(--text-muted);
  font-size: .8rem;
}

.dark-feature {
  background: var(--primary);
  color: var(--white);
}

.dark-feature-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 5rem;
  align-items: center;
}

.dark-feature .eyebrow {
  color: var(--secondary);
}

.dark-feature h2 {
  max-width: 700px;
  font-size: clamp(2.4rem, 4.8vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.08em;
}

.dark-feature p:not(.eyebrow) {
  max-width: 560px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.8;
}

.credential-panel,
.quote-panel {
  padding: 2rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(117, 212, 194, .22);
  border-radius: var(--radius-md);
}

.credential-panel {
  display: grid;
  gap: .35rem;
}

.credential-panel-mark {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  color: var(--secondary);
  font: italic 1.8rem Georgia, serif;
}

.credential-panel strong {
  font: 700 1.2rem 'Manrope', sans-serif;
}

.credential-panel small {
  color: rgba(255, 255, 255, .62);
  font-size: .74rem;
}

.credential-panel .text-link {
  margin-top: 1rem;
  color: var(--secondary);
}

.quote-panel i {
  color: var(--secondary);
  font-size: 2rem;
}

.quote-panel p {
  margin: .5rem 0 0;
  color: var(--white) !important;
  font: 600 1.15rem/1.5 'Manrope', sans-serif;
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.question-grid>div {
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.question-grid span {
  color: var(--success);
  font: .68rem 'DM Mono', monospace;
}

.question-grid h3 {
  margin: .7rem 0 .5rem;
  font-size: 1rem;
  letter-spacing: -.04em;
}

.question-grid p {
  margin: 0;
  font-size: .78rem;
}

.contact-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  text-align: left;
  font: 600 1rem/1.35 'Manrope', sans-serif;
}

.faq-trigger i {
  flex: 0 0 auto;
  color: var(--success);
  font-size: .8rem;
  transition: transform .2s ease;
}

.faq-trigger[aria-expanded='true'] i {
  transform: rotate(45deg);
}

.faq-item .collapse p {
  max-width: 620px;
  padding: 0 2rem 1.35rem 0;
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.8;
}

.inner-hero {
  min-height: 500px;
  display: flex;
  align-items: end;
  padding: 12rem 0 5.5rem;
  background-image: linear-gradient(90deg, rgba(4, 21, 31, .9), rgba(5, 27, 38, .62) 58%, rgba(5, 27, 38, .25)), var(--page-hero-image);
  background-size: cover;
  background-position: center;
}

.inner-hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 21, 31, .38), transparent 46%);
  pointer-events: none;
}

.inner-hero .container {
  position: relative;
  z-index: 1;
}

.inner-hero h1 {
  max-width: 980px;
  font-size: clamp(3rem, 6.5vw, 6.6rem);
}

.inner-hero p:not(.eyebrow) {
  max-width: 650px;
  line-height: 1.75;
}

.breadcrumb-wrap {
  letter-spacing: .13em;
}

.breadcrumb-wrap a:hover {
  color: var(--white);
}

.content-section {
  position: relative;
}

.form-card {
  border: 1px solid rgba(16, 44, 61, .07);
  box-shadow: var(--shadow-soft);
}

.appointment-form input,
.appointment-form select,
.appointment-form textarea {
  min-height: 48px;
  border-radius: .65rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.appointment-form textarea {
  min-height: auto;
}

.appointment-form input:focus,
.appointment-form select:focus,
.appointment-form textarea:focus {
  background: var(--white);
}

.appointment-form label {
  font-family: 'Manrope', sans-serif;
}

.appointment-form label span {
  color: var(--success);
}

.consent {
  line-height: 1.45;
}

.form-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.form-feedback {
  min-height: 1.5rem;
  margin-top: 1rem;
  color: var(--success);
  font-size: .8rem;
}

.btn.is-loading {
  opacity: .7;
  cursor: wait;
}

.appointment-modal {
  overflow: hidden;
  border: 1px solid rgba(16, 44, 61, .1);
  border-radius: 1.35rem;
  background: var(--white);
  box-shadow: 0 28px 80px rgba(5, 24, 36, .28);
}

.btn-dark {
  background: var(--primary);
  color: var(--white);
}

.btn-dark:hover {
  background: var(--primary-strong);
  color: var(--white);
}

.narrow-measure {
  max-width: 780px;
}

.appointment-modal .modal-header,
.appointment-modal .modal-body {
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

.appointment-modal .modal-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: start;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(117, 212, 194, .22), transparent 36%),
    linear-gradient(135deg, #eff8f5 0%, #e7f1ef 100%);
  border-bottom: 1px solid rgba(16, 44, 61, .1);
}

.appointment-modal .modal-header>div {
  position: relative;
  z-index: 1;
  max-width: 650px;
}

.appointment-modal .modal-header .eyebrow {
  margin: 0 0 .7rem;
  color: #178978;
  font-size: .63rem;
}

.appointment-modal .btn-close {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 2.7rem;
  height: 2.7rem;
  margin: -.2rem -.2rem 0 0;
  border: 1px solid rgba(16, 44, 61, .13);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .56);
  background-size: .8rem;
  opacity: .72;
  transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
}

.appointment-modal .btn-close:hover {
  background-color: var(--white);
  opacity: 1;
  transform: rotate(6deg);
}

.appointment-modal h2 {
  margin: 0;
  color: var(--primary);
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: .98;
  letter-spacing: -.07em;
}

.modal-intro {
  margin: .85rem 0 0;
  max-width: 560px;
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.55;
}

.appointment-modal .modal-body {
  background: linear-gradient(180deg, #fff 0%, #fbfdfc 100%);
}

.appointment-modal .appointment-form .row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.appointment-modal .appointment-form label:not(.consent) {
  display: block;
  margin-bottom: .42rem;
  color: var(--primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.appointment-modal .appointment-form input:not([type='checkbox']),
.appointment-modal .appointment-form select,
.appointment-modal .appointment-form textarea {
  width: 100%;
  border: 1px solid rgba(16, 44, 61, .14);
  border-radius: .75rem;
  background: #f8fbfa;
  color: var(--primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.appointment-modal .appointment-form input:not([type='checkbox']),
.appointment-modal .appointment-form select {
  min-height: 50px;
  padding: .7rem .9rem;
}

.appointment-modal .appointment-form textarea {
  min-height: 104px;
  padding: .8rem .9rem;
  resize: vertical;
}

.appointment-modal .appointment-form input:not([type='checkbox']):focus,
.appointment-modal .appointment-form select:focus,
.appointment-modal .appointment-form textarea:focus {
  border-color: var(--secondary);
  background: var(--white);
  box-shadow: 0 0 0 .22rem rgba(117, 212, 194, .16);
  outline: 0;
}

.appointment-modal .appointment-form textarea::placeholder {
  color: rgba(16, 44, 61, .52);
}

.appointment-modal .consent {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .15rem;
  color: var(--text-muted);
  font-size: .7rem;
}

.appointment-modal .consent input[type='checkbox'] {
  flex: 0 0 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  margin: .08rem 0 0;
  accent-color: #178978;
}

.appointment-modal .consent span {
  color: var(--text-muted);
}

.appointment-modal .form-feedback {
  margin-top: .7rem;
}

.appointment-modal .appointment-form>.btn {
  min-height: 50px;
  margin-top: 1.1rem !important;
  border-radius: .75rem;
  font-size: .78rem;
  box-shadow: 0 10px 22px rgba(16, 44, 61, .14);
}

@media (max-width: 575.98px) {
  .appointment-modal {
    border-radius: 1rem;
  }

  .appointment-modal .modal-header,
  .appointment-modal .modal-body {
    padding: 1.25rem 1.1rem;
  }

  .appointment-modal .modal-header {
    gap: .75rem;
  }

  .appointment-modal h2 {
    max-width: 15rem;
    font-size: 2rem;
  }

  .appointment-modal .modal-intro {
    max-width: 18rem;
    font-size: .72rem;
  }

  .appointment-modal .btn-close {
    width: 2.35rem;
    height: 2.35rem;
    margin: -.1rem -.1rem 0 0;
  }

  .appointment-modal .appointment-form .row {
    --bs-gutter-y: .8rem;
  }
}

.welcome-popup {
  position: fixed;
  z-index: 1055;
  right: 1.4rem;
  bottom: 1.4rem;
  width: min(390px, calc(100vw - 2rem));
  padding: 1.6rem;
  color: var(--white);
  background: var(--primary);
  border: 1px solid rgba(117, 212, 194, .3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  animation: popup-in .55s cubic-bezier(.2, .8, .2, 1) both;
}

.welcome-popup[hidden] {
  display: none;
}

.welcome-popup h2 {
  max-width: 300px;
  margin: 0 0 .7rem;
  font-size: 1.55rem;
  letter-spacing: -.06em;
}

.welcome-popup p:not(.eyebrow) {
  color: rgba(255, 255, 255, .68);
  font-size: .8rem;
}

.welcome-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .7);
}

.welcome-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.2rem;
}

.welcome-actions .text-link {
  color: var(--secondary);
}

.mobile-menu {
  background: var(--primary);
  color: var(--white);
  width: min(430px, calc(100vw - .8rem)) !important;
  border-left: 1px solid rgba(117, 212, 194, .22);
  background:
    radial-gradient(circle at 100% 0%, rgba(117, 212, 194, .12), transparent 32%),
    linear-gradient(180deg, #123b4c 0%, var(--primary) 46%, #0b2638 100%);
}

.mobile-menu .offcanvas-header {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mobile-menu .offcanvas-body {
  padding: 1.15rem 1.15rem 1.5rem;
}

.mobile-menu .btn-close {
  filter: invert(1);
  opacity: .8;
}

.mobile-menu .eyebrow {
  color: var(--secondary);
  margin: 1.2rem .1rem .9rem;
  font-size: .62rem;
}

.mobile-nav {
  display: grid;
  gap: 0;
}

.mobile-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
  padding: .72rem .2rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font: 600 1.05rem/1.2 'Manrope', sans-serif;
  transition: color .2s ease, padding-left .2s ease;
}

.mobile-nav>a:hover,
.mobile-nav-group>summary:hover,
.mobile-nav-group>summary.is-current {
  padding-left: .45rem;
  color: var(--white);
  border-color: rgba(117, 212, 194, .35);
  background: transparent;
}

.mobile-nav-main-copy {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}

.mobile-nav-main-copy>i {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--secondary);
  font-size: .95rem;
}

.mobile-nav-main-copy>span {
  min-width: 0;
}

.mobile-nav>a>i:last-child,
.mobile-nav-group>summary>i:last-child {
  flex: 0 0 auto;
  color: var(--secondary);
  font-size: .85rem;
}

.mobile-nav-group {
  border: 0;
}

.mobile-nav-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: .72rem .2rem;
  cursor: pointer;
  list-style: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font: 600 1.05rem/1.2 'Manrope', sans-serif;
  transition: color .2s ease, padding-left .2s ease, border-color .2s ease;
}

.mobile-nav-group summary.is-current {
  color: var(--secondary);
}

.mobile-nav-group summary::-webkit-details-marker {
  display: none;
}

.mobile-nav-group summary i {
  transition: transform .2s ease;
}

.mobile-nav-group>summary>.mobile-nav-main-copy>i {
  transform: none !important;
}

.mobile-nav-group[open]>summary {
  border-bottom-color: rgba(117, 212, 194, .42);
}

.mobile-nav-group[open]>summary>i:last-child {
  transform: rotate(180deg);
}

.mobile-subnav {
  margin: 0;
  padding: .35rem 0 .65rem 2.65rem;
  border: 0;
  border-left: 1px solid rgba(117, 212, 194, .35);
  border-radius: 0;
  background: transparent;
}

.mobile-subnav a {
  min-height: 42px;
  border: 0;
  color: rgba(255, 255, 255, .62);
  font: 500 .82rem/1.2 'Inter', sans-serif;
}

/* Keep mobile navigation in the same parent > category > child order as the mega menu. */
.mobile-subnav {
  padding-left: 2.65rem;
}

.mobile-subnav .mobile-nav-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  margin-bottom: .3rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  color: var(--white);
  font: 600 .86rem/1.2 'Manrope', sans-serif;
}

.mobile-subnav .mobile-nav-parent i {
  color: var(--secondary);
}

.mobile-subnav-section {
  padding: .45rem 0 .35rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mobile-subnav-section:last-child {
  border-bottom: 0;
}

.mobile-subnav-section p {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .45rem 0 .2rem;
  padding-top: .2rem;
  color: var(--secondary);
  font: 500 .57rem/1.3 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mobile-subnav-section p i {
  width: 1.2rem;
  height: 1.2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--secondary);
  font-size: .68rem;
}

.mobile-subnav-section a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 37px;
  padding: .38rem 0 .38rem .65rem;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, .66);
  font-size: .78rem;
}

.mobile-subnav-section a:hover {
  padding-left: .85rem;
  background: transparent;
  color: var(--white);
}

.mobile-subnav-section a>span {
  min-width: 0;
}

.mobile-subnav-section a>i {
  color: rgba(117, 212, 194, .75);
  font-size: .68rem;
}

/* Desktop groups stay aligned as columns, with the parent label visually separated
   from its child links instead of reading as one flat list. */
.mega-panel .mega-columns {
  align-items: start;
}

.mega-panel .mega-columns>div {
  min-width: 0;
}

.mega-panel .mega-label {
  min-height: 1.4rem;
}

.mega-panel .mega-columns a[aria-current='page'] {
  color: var(--primary);
  font-weight: 700;
}

.mobile-menu-ctas {
  display: grid;
  gap: .7rem;
  margin: 1.5rem .1rem 0;
}

@media (max-width: 380px) {
  .mobile-menu {
    width: calc(100vw - .4rem) !important;
  }

  .mobile-menu .offcanvas-body {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .mobile-nav>a,
  .mobile-nav-group>summary {
    padding-left: .6rem;
    padding-right: .6rem;
  }
}

.mobile-action-bar {
  display: none;
}

.whatsapp-float {
  left: 1.4rem;
  bottom: 1.4rem;
  z-index: 1045;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .78rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(10, 61, 42, .25);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float:hover {
  background: #128c7e;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(10, 61, 42, .3);
}

.whatsapp-float i {
  font-size: 1.05rem;
}

.site-footer {
  position: relative;
}

.footer-bottom {
  align-items: flex-start;
}

.footer-bottom div {
  justify-content: center;
  flex-wrap: wrap;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes popup-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1100px) {
  .desktop-nav {
    gap: .8rem;
  }

  

  .mega-panel {
    width: calc(100vw - 2rem);
  }
}

@media (max-width: 991px) {
  .menu-toggle {
    display: inline-grid;
    place-items: center;
  }

  .desktop-nav {
    display: none;
  }

  .site-header {
    padding: .9rem 0;
  }

  .site-utility {
    display: none;
  }

  .site-header,
  .site-header.scrolled {
    top: 0;
  }

  .inner-hero {
    min-height: 450px;
    padding-top: 9rem;
  }
}

@media (max-width: 700px) {

  .two-column-story,
  .dark-feature-grid,
  .gallery-intro,
  .article-layout,
  .resource-lead {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  

  

  

  

  

  .question-grid {
    grid-template-columns: 1fr;
  }
}

/* Treatment detail redesign: a shared clinical type system with a different visual
   centre for each procedure. The hero stays compact; the body does the explaining. */

/* Tighten and individualise the supporting treatment modules below each opening. */

body[data-page="acl-reconstruction.php"] main>.dark-feature {
  background: #244d5b;
}

body[data-page="sports-injury-treatment.php"] main>.dark-feature {
  background: #193c4d;
}

body[data-page="fracture-trauma-management.php"] main>.dark-feature {
  background: #493336;
}

/* Condition guide redesign: one shared educational type scale, with a different
   opening composition for each concern so these pages do not read like duplicates. */

body[data-page="osteoarthritis.php"] main>.dark-feature {
  background: #4b3c35;
}

body[data-page="acl-ligament-injuries.php"] main>.image-band {
  background: #f4f8f6;
}

/* Pathway pages: three distinct editorial openings for joint replacement, spine/trauma,
   and arthroscopy/sports while retaining one clear clinical type system. */

@media (max-width: 600px) {
  body {
    padding-bottom: 72px;
  }

  .header-actions .btn-appointment {
    min-height: 40px;
    padding: .62rem .8rem;
    font-size: .64rem;
  }

  .brand-copy strong {
    font-size: .9rem;
  }

  .brand-copy small {
    font-size: .47rem;
  }

  .hero {
    min-height: 690px;
  }

  .hero-slide .container {
    padding-bottom: 9.2rem;
  }

  .hero h1,
  .hero h2 {
    font-size: clamp(2.65rem, 13vw, 4rem);
  }

  .hero-copy p {
    font-size: .92rem;
  }

  .section {
    padding: 4.4rem 0;
  }

  

  

  

  .section-heading h2,
  .split-copy h2,
  .story-copy h2 {
    font-size: 2.35rem;
  }

  .inner-hero {
    min-height: 430px;
    padding: 8.5rem 0 3.5rem;
  }

  .inner-hero h1 {
    font-size: 3rem;
  }

  .appointment-band h2 {
    font-size: 2.35rem;
  }

  .welcome-popup {
    right: 1rem;
    bottom: 5.2rem;
  }

  .whatsapp-float {
    left: 1rem;
    bottom: 5.2rem;
    width: 3.1rem;
    height: 3.1rem;
    display: inline-flex;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }

  .whatsapp-float span {
    display: none;
  }

  .mobile-action-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding: .55rem .25rem calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(16, 44, 61, .98);
    box-shadow: 0 -10px 25px rgba(16, 44, 61, .18);
  }

  .mobile-action-bar a {
    display: grid;
    justify-items: center;
    gap: .18rem;
    color: var(--white);
    font-size: .61rem;
  }

  .mobile-action-bar i {
    color: var(--secondary);
    font-size: 1.08rem;
  }

  .footer-bottom {
    gap: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Page-specific editorial modules */
.expertise-map-section,
.treatment-principles,
.injury-signals,
.spine-checklist,
.resource-toolkit,
.faq-topics,
.gallery-captions,
.profile-principles,
.hospital-notes,
.legal-principles {
  background: var(--surface-soft);
}

.map-index,
.principle-grid span,
.spine-check-grid span,
.appointment-step-grid span,
.success-steps span {
  color: var(--success);
  font: .68rem/1 'DM Mono', monospace;
  letter-spacing: .08em;
}

.expertise-map .text-link,
.decision-grid .text-link {
  margin-top: auto;
}

.image-band {
  background: var(--surface);
}

.image-band-card {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  min-height: 500px;
  padding: 0;
  overflow: hidden;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.image-band-copy {
  padding: clamp(2rem, 6vw, 5.5rem);
  align-self: center;
}

.image-band-copy h2 {
  max-width: 520px;
  margin: .8rem 0 1.2rem;
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 4.7rem);
  letter-spacing: -.08em;
  line-height: 1;
}

.image-band-copy p:not(.eyebrow) {
  max-width: 430px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.8;
}

.image-band-visual {
  min-height: 360px;
  background-position: center;
  background-size: cover;
}

.image-band-reverse {
  grid-template-columns: 1.1fr .9fr;
}

.image-band-reverse .image-band-copy {
  order: 2;
}

.section-heading+.principle-grid,
.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  margin-top: 2.4rem;
}

.principle-grid>div {
  min-height: 220px;
  padding: 2rem;
  background: var(--surface-soft);
}

.principle-grid strong {
  display: block;
  margin: 3.5rem 0 .55rem;
  font: 600 1.2rem/1.2 'Manrope', sans-serif;
  letter-spacing: -.04em;
}

.principle-grid p {
  max-width: 260px;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.75;
}

.route-card,
.rhythm-card,
.privacy-card,
.safety-callout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 3rem;
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--secondary);
  border-radius: var(--radius-lg);
}

.route-card h2,
.rhythm-card h2,
.privacy-card h2,
.safety-callout h2 {
  margin: .7rem 0 0;
  max-width: 540px;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  letter-spacing: -.08em;
  line-height: 1.02;
}

.route-links a,
.contact-route-grid a,
.faq-topic-grid a,
.not-found-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(16, 44, 61, .16);
  color: var(--primary);
  font: 600 .92rem/1.3 'Manrope', sans-serif;
}

.route-links a:hover,
.contact-route-grid a:hover,
.faq-topic-grid a:hover,
.not-found-grid a:hover {
  color: var(--primary-strong);
  padding-left: .35rem;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}

.decision-grid article {
  min-height: 280px;
  padding: 2rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.decision-grid article:nth-child(2) {
  transform: translateY(2rem);
  background: var(--primary);
  color: var(--white);
}

.decision-grid article:nth-child(2) p {
  color: rgba(255, 255, 255, .66);
}

.decision-grid span,
.contact-route-grid span,
.faq-topic-grid span,
.not-found-grid span,
.hospital-note-grid span {
  display: block;
  color: var(--success);
  font: .65rem/1 'DM Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.decision-grid h3 {
  margin: 4rem 0 .7rem;
  font-size: 1.55rem;
  letter-spacing: -.05em;
}

.decision-grid p {
  color: var(--text-muted);
  font-size: .83rem;
  line-height: 1.75;
}

.injury-signals {
  border-top: 1px solid var(--border);
}

.signal-grid,
.spine-check-grid,
.hospital-note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.signal-grid>div {
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--primary);
}

.signal-dot {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: 4rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 7px rgba(117, 212, 194, .15);
}

.signal-grid h3,
.spine-check-grid h3,
.hospital-note-grid h3 {
  margin-bottom: .6rem;
  font-size: 1.3rem;
  letter-spacing: -.04em;
}

.signal-grid p,
.spine-check-grid p,
.hospital-note-grid p {
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.75;
}

.recovery-rhythm {
  background: var(--surface-soft);
}

.rhythm-card {
  background: var(--primary);
  color: var(--white);
}

.rhythm-card .eyebrow {
  color: var(--secondary);
}

.rhythm-card h2 {
  color: var(--white);
}

.rhythm-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.rhythm-steps div {
  min-height: 130px;
  padding: 1.1rem;
  border: 1px solid rgba(255, 255, 255, .2);
}

.rhythm-steps strong,
.rhythm-steps span {
  display: block;
}

.rhythm-steps strong {
  margin-bottom: 2rem;
  font: 600 1rem/1 'Manrope', sans-serif;
}

.rhythm-steps span {
  color: rgba(255, 255, 255, .6);
  font-size: .72rem;
}

.spine-check-grid>div,
.hospital-note-grid>div {
  padding: 1.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

.spine-check-grid h3,
.hospital-note-grid h3 {
  margin-top: 3rem;
}

.spine-story {
  background: var(--surface);
}

.spine-story-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: 470px;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.spine-story-visual {
  min-height: 360px;
  background-position: center;
  background-size: cover;
  filter: saturate(.75);
}

.spine-story-card>div:last-child {
  align-self: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.spine-story-card h2 {
  margin: .8rem 0 1rem;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  letter-spacing: -.08em;
  line-height: 1;
}

.spine-story-card p:last-child {
  color: var(--text-muted);
  line-height: 1.8;
}

.contact-route-grid,
.faq-topic-grid,
.not-found-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 2rem;
  background: var(--border);
}

.contact-route-grid a,
.faq-topic-grid a,
.not-found-grid a {
  display: grid;
  align-content: start;
  justify-items: start;
  min-height: 210px;
  padding: 1.6rem;
  background: var(--surface-soft);
  border: 0;
}

.contact-route-grid strong,
.faq-topic-grid strong,
.not-found-grid strong {
  margin-top: 3rem;
  font: 600 1.15rem/1.3 'Manrope', sans-serif;
  letter-spacing: -.04em;
}

.contact-route-grid i,
.faq-topic-grid i,
.not-found-grid i {
  margin-top: auto;
  align-self: end;
}

.appointment-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 2rem;
  background: var(--border);
}

.appointment-step-grid>div {
  min-height: 190px;
  padding: 1.7rem;
  background: var(--surface-soft);
}

.appointment-step-grid h3 {
  margin: 3rem 0 .55rem;
  font-size: 1.3rem;
  letter-spacing: -.04em;
}

.appointment-step-grid p {
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.7;
}

.hospital-notes {
  border-top: 1px solid var(--border);
}

.hospital-note-grid {
  margin-top: 2rem;
}

.hospital-note-grid>div {
  min-height: 210px;
  background: var(--surface-soft);
}

.not-found-path {
  background: var(--surface-soft);
}

.not-found-grid a {
  background: var(--surface);
}

@media (max-width: 800px) {

  .expertise-map,
  .decision-grid,
  .signal-grid,
  .spine-check-grid,
  .hospital-note-grid,
  .principle-grid,
  .toolkit-grid,
  .contact-route-grid,
  .faq-topic-grid,
  .not-found-grid,
  .caption-grid,
  .appointment-step-grid {
    grid-template-columns: 1fr;
  }

  .image-band-card,
  .image-band-reverse,
  .spine-story-card,
  .editorial-grid,
  .route-card,
  .rhythm-card,
  .privacy-card,
  .safety-callout {
    grid-template-columns: 1fr;
  }

  .image-band-reverse .image-band-copy {
    order: 0;
  }

  .decision-grid article:nth-child(2) {
    transform: none;
  }

  

  

  .rhythm-steps {
    grid-template-columns: 1fr;
  }

  
}

@media (max-width: 600px) {
  

  .image-band-visual,
  .spine-story-visual {
    min-height: 260px;
  }

  .image-band-copy {
    padding: 2rem 1.4rem;
  }

  .route-card,
  .rhythm-card,
  .privacy-card,
  .safety-callout {
    padding: 1.5rem;
  }

  .signal-dot {
    margin-bottom: 2rem;
  }
}

/* Trend-forward editorial card system */
.mega-panel {
  width: min(1120px, calc(100vw - 3rem));
  grid-template-columns: minmax(235px, .72fr) minmax(0, 1.7fr);
  padding: 1rem;
  gap: 1rem;
  border-radius: 1.35rem;
  background: rgba(247, 251, 248, .97);
}

.mega-feature {
  position: relative;
  min-height: 245px;
  display: flex;
  align-items: end;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(155deg, rgba(16, 44, 61, .12), rgba(16, 44, 61, .8)), var(--mega-image) center/cover;
}

.mega-feature:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 21, 31, .84), transparent 70%);
}

.mega-feature-overlay {
  position: relative;
  z-index: 1;
  padding: 1.15rem;
  color: var(--white);
}

.mega-feature-overlay .eyebrow {
  margin-bottom: .65rem;
  color: var(--secondary);
  font-size: .56rem;
}

.mega-feature-overlay strong {
  display: block;
  max-width: 205px;
  font: 600 1.12rem/1.18 'Manrope', sans-serif;
  letter-spacing: -.05em;
}

.mega-feature-overlay .text-link {
  margin-top: 1.1rem;
  color: var(--secondary);
  font-size: .67rem;
}

.mega-panel .mega-columns {
  align-content: center;
  padding: .7rem .8rem;
}

.mega-panel .mega-columns>div {
  padding: .5rem .8rem;
  border-left: 1px solid var(--border);
}

.mega-panel .mega-columns>div:first-child {
  border-left: 0;
}

.mega-panel .mega-columns a {
  padding: .5rem 0;
  font-size: .72rem;
}

.mega-panel .mega-columns a {
  white-space: nowrap;
}

.mega-panel .mega-label {
  margin-bottom: .75rem;
  font-size: .56rem;
}

.image-band[style*="--image-band"] .image-band-card {
  position: relative;
  display: block;
  min-height: 430px;
  padding: clamp(2rem, 6vw, 5rem);
  background: linear-gradient(90deg, rgba(4, 21, 31, .88), rgba(4, 21, 31, .2)), var(--image-band) center/cover;
}

.image-band[style*="--image-band"] .image-band-card .eyebrow {
  color: var(--secondary);
}

.image-band[style*="--image-band"] .image-band-card h2 {
  max-width: 650px;
  margin: .8rem 0 1rem;
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 5rem);
  letter-spacing: -.09em;
}

.image-band[style*="--image-band"] .image-band-card p:last-child {
  max-width: 440px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.8;
}

@media (max-width: 991px) {
  

  

  .mega-panel {
    width: calc(100vw - 2rem);
  }
}

@media (max-width: 700px) {
  

  

  

  

  

  

  .mega-panel {
    grid-template-columns: 1fr;
  }

  .mega-feature {
    min-height: 175px;
  }

  .mega-panel .mega-columns {
    grid-template-columns: 1fr;
    padding: .3rem;
  }

  .mega-panel .mega-columns>div {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .mega-panel .mega-columns>div:first-child {
    border-top: 0;
  }

  

  

  

  

  
}

/* Homepage art direction: each module has its own composition, not just a new background. */
.home-hero {
  position: relative;
}

.home-doctor-section {
  background: #f7f8f5;
}

.home-doctor-layout {
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  gap: clamp(4rem, 5vw, 10rem);
  align-items: center;
}

.home-doctor-visual {
  position: relative;
  padding-left: 0;
}

.home-vertical-label,
.home-overline,
.home-section-number,
.home-explorer-index span,
.home-appointment-index small,
.home-location-pin,
.home-map-coordinates {
  color: var(--success);
  font: .62rem/1.4 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-vertical-label {
  position: absolute;
  left: 0;
  top: 2rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.home-doctor-visual .doctor-portrait {
  max-width: 430px;
  /* padding-bottom: 3.4rem; */
}

.home-doctor-visual .doctor-portrait:before {
  top: 3.2rem;
  right: 3rem;
  background: #dceee8;
}

.home-doctor-visual .doctor-portrait img {
  height: 470px;
  border-radius: 1.25rem;
}

.home-doctor-visual .doctor-portrait figcaption {
  left: 3.5rem;
  bottom: .45rem;
}

.home-doctor-copy {
  max-width: 710px;
}

.home-doctor-copy .home-overline {
  margin: 1.4rem 0 .75rem;
}

.home-doctor-copy h2 {
  max-width: 720px;
  margin: 0 0 1.35rem;
  font-size: clamp(2.8rem, 5vw, 5.65rem);
  line-height: .96;
  letter-spacing: -.1em;
}

.home-doctor-copy>p:not(.eyebrow):not(.home-overline) {
  max-width: 610px;
  color: var(--text-muted);
  line-height: 1.8;
}

.home-doctor-copy .home-lead {
  color: var(--text) !important;
  font: 600 clamp(1.05rem, 1.6vw, 1.3rem)/1.55 'Manrope', sans-serif;
  letter-spacing: -.035em;
}

.home-credential-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 620px;
  margin: 2.1rem 0 2rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.home-credential-row span {
  display: grid;
  gap: .3rem;
  padding: 1rem 1rem 1rem 0;
  border-right: 1px solid var(--border);
}

.home-credential-row span:not(:first-child) {
  padding-left: 1rem;
}

.home-credential-row span:last-child {
  border-right: 0;
}

.home-credential-row b {
  font: 600 .9rem/1 'Manrope', sans-serif;
}

.home-credential-row small {
  color: var(--text-muted);
  font-size: .64rem;
}

.home-care-map {
  background: var(--primary);
  color: var(--white);
  overflow: hidden;
}

.home-section-head {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
}

.home-section-head h2 {
  max-width: 690px;
  margin: .8rem 0 0;
  color: var(--white);
  font-size: clamp(2.6rem, 5vw, 5.3rem);
  line-height: .95;
  letter-spacing: -.1em;
}

.home-section-head .eyebrow,
.home-care-feature-copy .eyebrow {
  color: var(--secondary);
}

.home-care-cards-section {
  background: #f5f8f7;
  color: var(--text);
}

.home-care-cards-section .home-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.home-care-cards-section .home-section-head h2 {
  max-width: 760px;
  color: var(--text);
}

.home-care-cards-section .home-section-head .eyebrow {
  color: var(--success);
}

.home-care-cards-head>p {
  margin: 0;
  color: var(--text-muted);
  font-size: .86rem;
  line-height: 1.75;
}

.home-care-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.3rem, 4vw, 4.2rem);
}

.home-care-card {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(16, 44, 61, .08);
  border-radius: .7rem;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 20px 48px rgba(16, 44, 61, .08);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.home-care-card:hover {
  transform: translateY(-6px);
  border-color: rgba(35, 138, 104, .24);
  box-shadow: 0 30px 70px rgba(16, 44, 61, .14);
  color: var(--text);
}

.home-care-card img {
  display: block;
  width: 100%;
  height: 172px;
  object-fit: cover;
  transition: transform .35s ease;
}

.home-care-card:hover img {
  transform: scale(1.04);
}

.home-care-card-copy {
  display: flex;
  min-height: 188px;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
}

.home-care-card-copy strong {
  display: block;
  color: var(--text);
  font: 700 clamp(1.2rem, 1.55vw, 1.58rem)/1.08 'Manrope', sans-serif;
  letter-spacing: -.055em;
}

.home-care-card-copy small {
  display: block;
  margin-top: .75rem;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.65;
}

.home-care-card-copy>span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.2rem;
  color: var(--success);
  font: 800 .74rem/1 'Manrope', sans-serif;
}

.home-care-card-copy i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary);
  font-size: .8rem;
  transition: background .25s ease, transform .25s ease;
}

.home-care-card:hover .home-care-card-copy i {
  background: var(--secondary);
  transform: translate(2px, -2px);
}

.home-clinical-section {
  background: #fff;
}

.home-clinical-layout {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: clamp(4rem, 5vw, 9rem);
  align-items: center;
}

.home-clinical-visual {
  position: relative;
  padding: 0;
}

.home-image-frame {
  position: relative;
  min-height: 555px;
  overflow: hidden;
  border-radius: 1.2rem;
  background: #dceee8;
  box-shadow: var(--shadow-soft);
}

.home-image-frame:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 21, 31, .62), transparent 35%);
  pointer-events: none;
}

.home-image-frame img {
  display: block;
  width: 100%;
  height: 555px;
  object-fit: cover;
}

.home-image-caption {
  position: absolute;
  z-index: 1;
  bottom: 1.2rem;
  left: 1.2rem;
  color: var(--white);
  font: .6rem/1 'DM Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.home-clinical-copy h2 {
  max-width: 660px;
  margin: .85rem 0 1.25rem;
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: .96;
  letter-spacing: -.1em;
}

.home-clinical-copy .home-lead {
  max-width: 560px;
  color: var(--text-muted);
  line-height: 1.8;
}

.home-step-stack {
  margin: 2.2rem 0 1.2rem;
  border-top: 1px solid var(--border);
}

.home-step-stack>div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.home-step-stack>div>span {
  color: var(--success);
  font: .62rem/1 'DM Mono', monospace;
}

.home-step-stack strong {
  display: block;
  margin-bottom: .3rem;
  font: 600 .92rem/1.2 'Manrope', sans-serif;
}

.home-step-stack p {
  margin: 0;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.6;
}

.home-step-stack i {
  color: var(--success);
  font-size: .78rem;
}

.home-explorer-section {
  background: #e7f1ee;
}

.home-explorer-header {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 4rem;
  align-items: end;
}

.home-explorer-header h2 {
  max-width: 760px;
  margin: .8rem 0 0;
  font-size: clamp(2.7rem, 5vw, 5.2rem);
  line-height: .95;
  letter-spacing: -.1em;
}

.home-explorer-note {
  justify-self: end;
  max-width: 280px;
  padding: 1.1rem 0 0 1.2rem;
  border-left: 2px solid var(--secondary);
}

.home-explorer-note span {
  color: var(--success);
  font: .6rem/1 'DM Mono', monospace;
  letter-spacing: .1em;
}

.home-explorer-note p {
  margin: .7rem 0 0;
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.7;
}

.home-explorer-stage {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 4.5rem;
}

.home-explorer-content {
  min-width: 0;
}

.home-explorer-content .pathway-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}

.home-explorer-content .pathway-tab {
  min-height: 72px;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(16, 44, 61, .14);
  border-radius: .7rem;
  background: rgba(255, 255, 255, .5);
  color: var(--text);
  text-align: left;
}

.home-explorer-content .pathway-tab.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.home-explorer-content .pathway-tab small {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  color: var(--success);
  font: .6rem/1 'DM Mono', monospace;
}

.home-explorer-content .pathway-tab.active small {
  color: var(--secondary);
}

.home-pathway-panels {
  min-height: 310px;
  margin-top: .6rem;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 20px 50px rgba(16, 44, 61, .08);
}

.home-pathway-panels .pathway-panel {
  max-width: 650px;
}

.home-pathway-panels h3 {
  margin: .65rem 0 .8rem;
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.08em;
}

.home-pathway-panels p:not(.eyebrow) {
  max-width: 520px;
  color: var(--text-muted);
  line-height: 1.8;
}

.home-pathway-panels .text-link {
  margin-top: 1.4rem;
}

/* Pathway explorer: use the open side of the panel for context-rich imagery. */
.home-pathway-panels {
  min-height: 390px;
  padding: 0;
  overflow: hidden;
}

.home-pathway-panels .pathway-panel {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  max-width: none;
  min-height: 390px;
}

.home-pathway-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem);
}

.home-pathway-panels h3 {
  max-width: 620px;
  margin: .75rem 0 1rem;
  font-size: clamp(2.1rem, 3.7vw, 3.8rem);
  line-height: .98;
}

.home-pathway-panels p:not(.eyebrow) {
  max-width: 570px;
  font-size: .96rem;
  line-height: 1.75;
}

.home-pathway-panels .text-link {
  margin-top: 1.65rem;
  font-size: .84rem;
}

.home-pathway-image {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.home-pathway-image:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(16, 44, 61, .1));
  pointer-events: none;
}

.home-pathway-image span {
  position: absolute;
  z-index: 1;
  left: 1.35rem;
  bottom: 1.25rem;
  color: rgba(255, 255, 255, .86);
  font: .6rem/1 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-journal-section {
  background: #f7f8f5;
}

.home-journal-header {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 3rem;
  align-items: end;
}

.home-journal-header h2 {
  margin: .8rem 0 0;
  font-size: clamp(2.7rem, 5vw, 5.2rem);
  line-height: .94;
  letter-spacing: -.1em;
}

.home-journal-header h2 em {
  color: var(--success);
  font-weight: 500;
}

.home-journal-header>div:last-child {
  padding-bottom: .3rem;
}

.home-journal-header>div:last-child p {
  max-width: 100%;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.75;
}

.home-journal-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  margin-top: 3rem;
}

.home-journal-feature {
  min-height: 520px;
  overflow: hidden;
  border-radius: 1.15rem;
}

.home-journal-image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 520px;
  padding: 1.3rem;
  background-position: center;
  background-size: cover;
  color: var(--white);
  transition: transform .45s ease;
}

.home-journal-feature:hover .home-journal-image {
  transform: scale(1.025);
}

.home-journal-image>span,
.home-journal-image>i {
  position: relative;
  z-index: 1;
}

.home-journal-image>span {
  font: .6rem/1 'DM Mono', monospace;
  letter-spacing: .1em;
}

.home-journal-image>i {
  align-self: end;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
}

.home-journal-image>div {
  position: relative;
  z-index: 1;
  max-width: 510px;
}

.home-journal-image h3 {
  margin: 0 0 .6rem;
  color: var(--white);
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  line-height: .98;
  letter-spacing: -.08em;
}

.home-journal-image p {
  max-width: 380px;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
  line-height: 1.65;
}

.home-journal-stack {
  display: grid;
  grid-template-rows: 1fr 1fr auto;
  gap: .6rem;
}

.home-journal-stack>a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 145px auto;
  gap: 1rem;
  align-items: center;
  min-height: 150px;
  padding: 1.3rem;
  border-top: 1px solid var(--border);
  color: var(--text);
  transition: padding .25s ease, background .25s ease;
}

.home-journal-stack>a:hover {
  padding-left: 1.7rem;
  background: var(--white);
}

.home-journal-stack>a>span {
  color: var(--success);
  font: .64rem/1 'DM Mono', monospace;
}

.home-journal-stack small {
  color: var(--success);
  font: .58rem/1 'DM Mono', monospace;
  letter-spacing: .08em;
}

.home-journal-stack h3 {
  margin: .8rem 0 0;
  font-size: clamp(1.35rem, 1.7vw, 1.9rem);
  line-height: 1.02;
  letter-spacing: -.06em;
}

.home-journal-stack>a p {
  max-width: 100%;
  margin: .55rem 0 0;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.55;
}

.home-journal-card-media {
  width: 145px;
  height: 100px;
  border-radius: .7rem;
  background-position: center;
  background-size: cover;
  filter: saturate(.82);
  transition: transform .3s ease, filter .3s ease;
}

.home-journal-stack>a:hover .home-journal-card-media {
  filter: saturate(1);
  transform: scale(1.03);
}

.home-journal-stack>a>i {
  color: var(--success);
}

.home-journal-prompt {
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: .75rem;
  background: #dceee8;
}

.home-journal-prompt i {
  color: var(--success);
  font-size: 1.3rem;
}

.home-journal-prompt p {
  margin: 0;
  font: 600 .78rem/1.4 'Manrope', sans-serif;
  letter-spacing: -.02em;
}

.home-appointment-band {
  position: relative;
  overflow: hidden;
  padding: 5.4rem 0;
  background: var(--secondary);
}

.home-appointment-band:after {
  content: '';
  position: absolute;
  width: 34rem;
  height: 34rem;
  right: -13rem;
  top: -17rem;
  border: 1px solid rgba(16, 44, 61, .2);
  border-radius: 50%;
}

.home-appointment-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 3rem;
  align-items: end;
}

.home-appointment-layout h2 {
  margin: .8rem 0 0;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  line-height: .94;
  letter-spacing: -.1em;
}

.home-appointment-layout h2 em {
  font-weight: 500;
}

.home-appointment-action {
  max-width: 300px;
  justify-self: end;
}

.home-appointment-action p {
  color: rgba(16, 44, 61, .72);
  font-size: .78rem;
  line-height: 1.7;
}

.home-location-section {
  background: #fff;
}

.home-location-header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
}

.home-location-header h2 {
  margin: .8rem 0 0;
  font-size: clamp(2.7rem, 5vw, 5.2rem);
  line-height: .94;
  letter-spacing: -.1em;
}

.home-location-header h2 em {
  font-weight: 500;
  color: var(--success);
}

.home-location-pin {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding-bottom: .4rem;
  color: var(--success);
}

.home-location-pin i {
  font-size: 1rem;
}

.home-location-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  margin-top: 3.5rem;
}

.home-map-card {
  position: relative;
  min-height: 405px;
  overflow: hidden;
  border-radius: 1rem;
  background: #dceee8;
}

.home-map-card .map-placeholder {
  height: 100%;
  min-height: 405px;
}

.home-map-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(16, 44, 61, .12);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .92);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
  font: 700 .78rem/1.35 'Manrope', sans-serif;
  text-align: center;
  white-space: nowrap;
}

.home-map-label small {
  color: var(--success);
  font: .55rem/1 'DM Mono', monospace;
  letter-spacing: .1em;
}

.home-map-coordinates {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  color: var(--success);
  font-size: .56rem;
  line-height: 1.5;
  text-align: right;
}

.home-visit-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 405px;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #f7f8f5;
}

.home-visit-card address {
  max-width: 420px;
  margin: 1.4rem 0 2rem;
  font: 600 clamp(1.2rem, 2vw, 1.75rem)/1.25 'Manrope', sans-serif;
  letter-spacing: -.05em;
}

.home-visit-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.home-visit-facts>div {
  display: grid;
  gap: .35rem;
  padding-top: 1rem;
}

.home-visit-facts span {
  color: var(--success);
  font: .6rem/1 'DM Mono', monospace;
}

.home-visit-facts strong {
  font: 600 .8rem/1.3 'Manrope', sans-serif;
}

.home-visit-facts small {
  color: var(--text-muted);
  font-size: .66rem;
  line-height: 1.5;
}

.home-visit-card .btn {
  align-self: flex-start;
  margin-top: 1.8rem;
}

@media (max-width: 900px) {

  .home-doctor-layout,
  .home-clinical-layout,
  .home-journal-grid,
  .home-location-grid {
    grid-template-columns: 1fr;
  }

  .home-care-map-grid,
  .home-care-cards-section .home-section-head {
    grid-template-columns: 1fr;
  }

  .home-care-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  

  .home-explorer-header,
  .home-appointment-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .home-explorer-note,
  .home-appointment-action {
    justify-self: start;
  }

  .home-explorer-stage {
    grid-template-columns: 90px 1fr;
  }

  .home-journal-feature,
  .home-journal-image {
    min-height: 430px;
  }
}

@media (max-width: 700px) {
  

  .home-doctor-layout {
    gap: 3.5rem;
  }

  .home-doctor-visual {
    padding-left: 1.5rem;
  }

  .home-doctor-visual .doctor-portrait img {
    height: 370px;
  }

  

  .home-section-head,
  .home-location-header {
    display: block;
  }

  

  

  .home-care-card-grid {
    grid-template-columns: 1fr;
  }

  .home-care-card {
    min-height: 0;
  }

  .home-care-card img {
    height: 230px;
  }

  .home-care-card-copy {
    min-height: 0;
  }

  

  

  .home-credential-row,
  .home-visit-facts {
    grid-template-columns: 1fr;
  }

  .home-credential-row span,
  .home-credential-row span:not(:first-child) {
    padding: .8rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .home-credential-row span:last-child {
    border-bottom: 0;
  }

  .home-clinical-visual {
    padding-right: 1rem;
  }

  .home-image-frame,
  .home-image-frame img {
    min-height: 360px;
    height: 360px;
  }

  

  .home-explorer-stage {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }

  

  

  .home-explorer-content .pathway-tabs {
    grid-template-columns: 1fr;
  }

  .home-pathway-panels {
    min-height: 285px;
    padding: 1.6rem;
  }

  .home-journal-header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .home-journal-stack h3 {
    font-size: 1.25rem;
  }

  .home-appointment-band {
    padding: 3.8rem 0;
  }

  

  

  .home-location-pin {
    margin-top: 1.3rem;
  }

  .home-map-card,
  .home-map-card .map-placeholder,
  .home-visit-card {
    min-height: 350px;
  }

  .home-visit-card {
    padding: 1.4rem;
  }
}

/* Page-wise rhythm: every family gets its own cadence instead of one global section template. */
.inner-page .section {
  padding: clamp(4.2rem, 6.4vw, 7rem) 0;
}

.inner-page .appointment-band {
  padding: clamp(3.4rem, 5vw, 5.4rem) 0;
}

.inner-page .content-section {
  padding-top: clamp(4.4rem, 6vw, 6.4rem);
  padding-bottom: clamp(4.4rem, 6vw, 6.4rem);
}

/* Home: compact proof, deep story, then a short conversion close. */
.home-page main>.intro-section {
  padding: clamp(4.8rem, 7vw, 7.5rem) 0;
}

.home-page main>.speciality-section {
  padding: clamp(5.8rem, 6vw, 9rem) 0;
}

.home-page main>.image-split {
  padding: clamp(4rem, 6vw, 6rem) 0;
}

.home-page main>.pathway-section {
  padding: clamp(4.6rem, 6vw, 7rem) 0;
}

.home-page main>.journal-section {
  padding: clamp(5.4rem, 6vw, 8rem) 0;
}

.home-page main>.appointment-band {
  padding: clamp(3.3rem, 4.5vw, 5rem) 0;
}

.home-page main>.location-section {
  padding: clamp(4.2rem, 6vw, 6.2rem) 0;
}

/* About / speciality pages: editorial profile first, then compressed decision blocks. */
body[data-page="about-dr-kapil-khare.php"] main>.content-section {
  padding-top: 5.4rem;
  padding-bottom: 5.8rem;
}

body[data-page="about-dr-kapil-khare.php"] main>.appointment-band {
  padding: 4rem 0;
}

body[data-page="about-dr-kapil-khare.php"] main>.dark-feature {
  padding: 6.8rem 0;
}

body[data-page="about-dr-kapil-khare.php"] main>.content-section:nth-of-type(5) {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

body[data-page="specialities.php"] main>.content-section {
  padding-top: 5rem;
  padding-bottom: 6rem;
}

body[data-page="specialities.php"] main>.pathway-section {
  padding: 5rem 0;
}

body[data-page="specialities.php"] main>.dark-feature {
  padding: 6.4rem 0;
}

body[data-page="specialities.php"] main>.image-band {
  padding-top: 4.2rem;
  padding-bottom: 6rem;
}

/* Treatment index: dense bento, short reading break, high-contrast principles. */

body[data-page="treatments.php"] main>.appointment-band {
  padding: 4.2rem 0;
}

/* Treatment detail pages: each procedure has a different visual centre of gravity. */
body[data-page="knee-replacement.php"] main>.content-section {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

body[data-page="hip-replacement.php"] main>.content-section {
  padding-top: 4.6rem;
  padding-bottom: 4.6rem;
}

body[data-page="hip-replacement.php"] main>.content-section:nth-of-type(5) {
  padding: 5rem 0;
  background: #fff9f0;
}

body[data-page="acl-reconstruction.php"] main>.content-section {
  padding-top: 4.7rem;
  padding-bottom: 4.7rem;
}

body[data-page="acl-reconstruction.php"] main>.dark-feature {
  padding: 6.8rem 0;
}

body[data-page="acl-reconstruction.php"] main>.content-section:nth-of-type(5) {
  padding: 4.5rem 0;
}

body[data-page="arthroscopy.php"] main>.content-section {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

body[data-page="arthroscopy.php"] main>.pathway-section {
  padding: 4.6rem 0;
}

body[data-page="arthroscopy.php"] main>.image-band {
  padding: 4.5rem 0 6rem;
}

body[data-page="sports-injury-treatment.php"] main>.content-section {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

body[data-page="sports-injury-treatment.php"] main>.dark-feature {
  padding: 6.2rem 0;
}

body[data-page="minimally-invasive-spine-surgery.php"] main>.content-section {
  padding-top: 4.7rem;
  padding-bottom: 4.7rem;
}

body[data-page="minimally-invasive-spine-surgery.php"] main>.dark-feature {
  padding: 6.4rem 0;
}

body[data-page="fracture-trauma-management.php"] main>.content-section {
  padding-top: 4.6rem;
  padding-bottom: 4.6rem;
}

body[data-page="fracture-trauma-management.php"] main>.dark-feature {
  padding: 6.3rem 0;
}

body[data-page="arthritis-management.php"] main>.content-section {
  padding-top: 4.6rem;
  padding-bottom: 4.6rem;
}

body[data-page="arthritis-management.php"] main>.content-section:nth-of-type(4) {
  padding: 4.3rem 0;
}

body[data-page="arthritis-management.php"] main>.pathway-section {
  padding: 5rem 0;
}

/* Conditions: signal, process, then decision—shorter sections with stronger changes of tone. */
body[data-page="knee-pain.php"] main>.content-section,
body[data-page="osteoarthritis.php"] main>.content-section,
body[data-page="acl-ligament-injuries.php"] main>.content-section,
body[data-page="sports-injuries.php"] main>.content-section,
body[data-page="hip-joint-problems.php"] main>.content-section,
body[data-page="spine-conditions.php"] main>.content-section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

body[data-page="knee-pain.php"] main>.appointment-band,
body[data-page="sports-injuries.php"] main>.appointment-band,
body[data-page="spine-conditions.php"] main>.appointment-band {
  padding: 4rem 0;
}

body[data-page="osteoarthritis.php"] main>.dark-feature {
  padding: 6.3rem 0;
}

body[data-page="acl-ligament-injuries.php"] main>.image-band {
  padding: 4.4rem 0 5.4rem;
}

/* Journal and detail articles: reading surfaces change from fact sheet to related links. */
body[data-page="blog.php"] main>.content-section {
  padding: 5rem 0 5.8rem;
}

body[data-page="blog.php"] main>.journal-section {
  padding: 5.5rem 0 6.4rem;
}

body[data-page="blog.php"] main>.pathway-section {
  padding: 4.2rem 0;
}

body[data-page="blog.php"] main>.dark-feature {
  padding: 6.2rem 0;
}

body[data-page="blog.php"] main>.appointment-band {
  padding: 4rem 0;
}

body[data-page="knee-pain.php"] .article-facts-section,
body[data-page="joint-replacement-guide.php"] .article-facts-section,
body[data-page="acl-injury.php"] .article-facts-section,
body[data-page="hip-replacement-guide.php"] .article-facts-section,
body[data-page="sports-injury-recovery.php"] .article-facts-section {
  padding: 4.6rem 0;
  background: #e7f3ef;
}

body[data-page="knee-pain.php"] .article-questions-section,
body[data-page="joint-replacement-guide.php"] .article-questions-section,
body[data-page="acl-injury.php"] .article-questions-section,
body[data-page="hip-replacement-guide.php"] .article-questions-section,
body[data-page="sports-injury-recovery.php"] .article-questions-section {
  padding: 5.4rem 0;
  background: var(--surface);
}

body[data-page="knee-pain.php"] .article-related-section,
body[data-page="joint-replacement-guide.php"] .article-related-section,
body[data-page="acl-injury.php"] .article-related-section,
body[data-page="hip-replacement-guide.php"] .article-related-section,
body[data-page="sports-injury-recovery.php"] .article-related-section {
  padding: 4.2rem 0;
  background: var(--primary);
  color: var(--white);
}

body[data-page="knee-pain.php"] .article-related-section .eyebrow,
body[data-page="joint-replacement-guide.php"] .article-related-section .eyebrow,
body[data-page="acl-injury.php"] .article-related-section .eyebrow,
body[data-page="hip-replacement-guide.php"] .article-related-section .eyebrow,
body[data-page="sports-injury-recovery.php"] .article-related-section .eyebrow {
  color: var(--secondary);
}

body[data-page="knee-pain.php"] .article-related-section h2,
body[data-page="joint-replacement-guide.php"] .article-related-section h2,
body[data-page="acl-injury.php"] .article-related-section h2,
body[data-page="hip-replacement-guide.php"] .article-related-section h2,
body[data-page="sports-injury-recovery.php"] .article-related-section h2 {
  color: var(--white);
}

body[data-page="knee-pain.php"] .article-faq-section,
body[data-page="joint-replacement-guide.php"] .article-faq-section,
body[data-page="acl-injury.php"] .article-faq-section,
body[data-page="hip-replacement-guide.php"] .article-faq-section,
body[data-page="sports-injury-recovery.php"] .article-faq-section {
  padding: 4.8rem 0;
  background: #fff3e2;
}

body[data-page="knee-pain.php"] .article-faq-section+.appointment-band,
body[data-page="joint-replacement-guide.php"] .article-faq-section+.appointment-band,
body[data-page="acl-injury.php"] .article-faq-section+.appointment-band,
body[data-page="hip-replacement-guide.php"] .article-faq-section+.appointment-band,
body[data-page="sports-injury-recovery.php"] .article-faq-section+.appointment-band {
  padding: 4rem 0;
}

/* Forms, hospital, gallery and utility pages: tighter practical layouts, not editorial whitespace. */
body[data-page="contact.php"] main>.location-section,
body[data-page="fortis-hospital-greater-noida.php"] main>.location-section {
  padding: 5rem 0;
}

body[data-page="contact.php"] main>.content-section {
  padding: 4.8rem 0;
}

body[data-page="contact.php"] main>.dark-feature,
body[data-page="fortis-hospital-greater-noida.php"] main>.dark-feature {
  padding: 6rem 0;
}

body[data-page="faqs.php"] main>.content-section {
  padding: 4.8rem 0 5.6rem;
}

body[data-page="faqs.php"] main>.dark-feature {
  padding: 6rem 0;
}

body[data-page="gallery.php"] main>.content-section {
  padding: 4.2rem 0;
}

body[data-page="gallery.php"] main>.dark-feature {
  padding: 6rem 0;
}

body[data-page="fortis-hospital-greater-noida.php"] main>.content-section {
  padding: 4.8rem 0;
}

body[data-page="fortis-hospital-greater-noida.php"] main>.appointment-band {
  padding: 4rem 0;
}

/* Policy and completion pages deliberately use a compact utility rhythm. */
body[data-page="privacy-policy.php"] main>.content-section,
body[data-page="terms-and-conditions.php"] main>.content-section,
body[data-page="medical-disclaimer.php"] main>.content-section,
body[data-page="cookie-policy.php"] main>.content-section,
body[data-page="accessibility.php"] main>.content-section {
  padding: 4.6rem 0;
}

body[data-page="privacy-policy.php"] main>.legal-principles,
body[data-page="terms-and-conditions.php"] main>.legal-principles,
body[data-page="medical-disclaimer.php"] main>.legal-principles,
body[data-page="cookie-policy.php"] main>.legal-principles,
body[data-page="accessibility.php"] main>.legal-principles {
  padding: 4.4rem 0;
}

body[data-page="privacy-policy.php"] main>.dark-feature,
body[data-page="terms-and-conditions.php"] main>.dark-feature,
body[data-page="medical-disclaimer.php"] main>.dark-feature,
body[data-page="cookie-policy.php"] main>.dark-feature,
body[data-page="accessibility.php"] main>.dark-feature {
  padding: 5rem 0;
}

body[data-page="privacy-policy.php"] main>.appointment-band,
body[data-page="terms-and-conditions.php"] main>.appointment-band,
body[data-page="medical-disclaimer.php"] main>.appointment-band,
body[data-page="cookie-policy.php"] main>.appointment-band,
body[data-page="accessibility.php"] main>.appointment-band {
  padding: 3.5rem 0;
}

body[data-page="appointment-success.php"] main>.success-steps {
  padding: 4.5rem 0;
}

body[data-page="appointment-success.php"] main>.dark-feature {
  padding: 5.8rem 0;
}

body[data-page="appointment-success.php"] main>.appointment-band {
  padding: 3.8rem 0;
}

body[data-page="appointment-success.php"] main>.success-links {
  padding: 4rem 0;
}

body[data-page="appointment-success.php"] main>.success-note {
  padding: 5rem 0;
}

body[data-page="404.php"] main>.not-found-path,
body[data-page="404.php"] main>.content-section,
body[data-page="404.php"] main>.not-found-footer {
  padding: 4.4rem 0;
}

@media (max-width: 700px) {

  .inner-page .section,
  .inner-page .content-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .inner-page .appointment-band {
    padding-top: 3.2rem !important;
    padding-bottom: 3.2rem !important;
  }

  .home-page main>.section {
    padding-top: 4.4rem;
    padding-bottom: 4.4rem;
  }

  .home-page main>.appointment-band {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }
}

/* Final family variants: shared components, different editorial personalities. */
body[data-page="joint-replacement-guide.php"] .article-facts-section {
  background: #fff7eb;
  border-top: 1px solid #f0e0c9;
}

body[data-page="joint-replacement-guide.php"] .article-questions-section {
  background: #f4f7f8;
}

body[data-page="joint-replacement-guide.php"] .article-questions-section .question-grid>div {
  border-top: 2px solid #d9b77d;
}

body[data-page="joint-replacement-guide.php"] .article-related-section {
  background: #29475a;
}

body[data-page="joint-replacement-guide.php"] .article-faq-section {
  background: #eef5f1;
}

body[data-page="acl-injury.php"] .article-facts-section {
  background: #eaf2f8;
}

body[data-page="acl-injury.php"] .article-facts-section h2 {
  max-width: 15ch;
}

body[data-page="acl-injury.php"] .article-questions-section {
  background: #102c3d;
  color: var(--white);
}

body[data-page="acl-injury.php"] .article-questions-section .eyebrow,
body[data-page="acl-injury.php"] .article-questions-section h3,
body[data-page="acl-injury.php"] .article-questions-section p {
  color: var(--white);
}

body[data-page="acl-injury.php"] .article-questions-section .question-grid>div {
  border-color: rgba(255, 255, 255, .2);
}

body[data-page="acl-injury.php"] .article-questions-section .question-grid>div {
  background: #1f3b4c;
}

body[data-page="acl-injury.php"] .article-questions-section .question-grid span {
  color: var(--secondary);
}

body[data-page="acl-injury.php"] .article-related-section {
  background: #dff0eb;
  color: var(--primary);
}

body[data-page="acl-injury.php"] .article-related-section h2 {
  color: var(--primary);
}

body[data-page="acl-injury.php"] .article-related-section .eyebrow {
  color: #32786e;
}

body[data-page="acl-injury.php"] .article-related-section .related-links a {
  border-color: rgba(16, 44, 61, .16);
}

body[data-page="hip-replacement-guide.php"] .article-facts-section {
  background: #f0ecf8;
}

body[data-page="hip-replacement-guide.php"] .article-questions-section {
  background: #fff;
}

body[data-page="hip-replacement-guide.php"] .article-questions-section .question-grid {
  grid-template-columns: 1.4fr 1fr 1fr;
}

body[data-page="hip-replacement-guide.php"] .article-questions-section .question-grid>div:first-child {
  background: #e0f1eb;
  padding: 2rem;
  border-radius: var(--radius-sm);
}

body[data-page="hip-replacement-guide.php"] .article-related-section {
  background: #3a3158;
}

body[data-page="hip-replacement-guide.php"] .article-faq-section {
  background: #f8f4ea;
}

body[data-page="sports-injury-recovery.php"] .article-facts-section {
  background: #102c3d;
  color: var(--white);
}

body[data-page="sports-injury-recovery.php"] .article-facts-section h2,
body[data-page="sports-injury-recovery.php"] .article-facts-section p:not(.eyebrow) {
  color: var(--white);
}

body[data-page="sports-injury-recovery.php"] .article-facts-section .eyebrow {
  color: var(--secondary);
}

body[data-page="sports-injury-recovery.php"] .article-facts-section .text-link {
  color: var(--secondary);
}

body[data-page="sports-injury-recovery.php"] .article-questions-section {
  background: #e1f3ee;
}

body[data-page="sports-injury-recovery.php"] .article-questions-section .question-grid>div {
  border-top: 2px solid #78b9ab;
}

body[data-page="sports-injury-recovery.php"] .article-related-section {
  background: #e7eef4;
  color: var(--primary);
}

body[data-page="sports-injury-recovery.php"] .article-related-section h2 {
  color: var(--primary);
}

body[data-page="sports-injury-recovery.php"] .article-related-section .eyebrow {
  color: #32786e;
}

body[data-page="sports-injury-recovery.php"] .article-related-section .related-links a {
  border-color: rgba(16, 44, 61, .16);
}

body[data-page="privacy-policy.php"] main>.legal-principles {
  background: #dcefe9;
}

body[data-page="privacy-policy.php"] main>.appointment-band {
  background: #78c9b7;
}

body[data-page="terms-and-conditions.php"] main>.legal-principles {
  background: #e8eef5;
}

body[data-page="terms-and-conditions.php"] main>.legal-principles .principle-grid>div {
  background: #f8fbfd;
}

body[data-page="terms-and-conditions.php"] main>.dark-feature {
  background: #29475a;
}

body[data-page="terms-and-conditions.php"] main>.appointment-band {
  background: #c8dce9;
}

body[data-page="medical-disclaimer.php"] main>.legal-principles {
  background: #fff0dc;
}

body[data-page="medical-disclaimer.php"] main>.legal-principles .principle-grid>div {
  background: #fffaf2;
}

body[data-page="medical-disclaimer.php"] main>.dark-feature {
  background: #4b3030;
}

body[data-page="medical-disclaimer.php"] main>.appointment-band {
  background: #f0c58e;
}

body[data-page="cookie-policy.php"] main>.legal-principles {
  background: #edf1f4;
}

body[data-page="cookie-policy.php"] main>.legal-principles .principle-grid>div {
  background: #fff;
}

body[data-page="cookie-policy.php"] main>.dark-feature {
  background: #1c3748;
}

body[data-page="cookie-policy.php"] main>.appointment-band {
  background: #bad8e5;
}

body[data-page="accessibility.php"] main>.legal-principles {
  background: #102c3d;
  color: var(--white);
}

body[data-page="accessibility.php"] main>.legal-principles .principle-grid>div {
  background: #1f3b4c;
  border-color: rgba(255, 255, 255, .15);
}

body[data-page="accessibility.php"] main>.legal-principles strong,
body[data-page="accessibility.php"] main>.legal-principles p {
  color: var(--white);
}

body[data-page="accessibility.php"] main>.legal-principles span {
  color: var(--secondary);
}

body[data-page="accessibility.php"] main>.appointment-band {
  background: #9ddccf;
}

body[data-page="joint-replacement.php"] main>.decision-grid-section {
  padding: 5.8rem 0;
  background: #fff7eb;
}

body[data-page="joint-replacement.php"] main>.image-band {
  padding: 4.4rem 0 6rem;
}

body[data-page="joint-replacement.php"] main>.appointment-band {
  padding: 3.7rem 0;
  background: #d9eee8;
}

body[data-page="arthroscopy-sports-injuries.php"] main>.injury-signals {
  padding: 5.2rem 0;
  background: #e4f3ef;
}

body[data-page="arthroscopy-sports-injuries.php"] main>.recovery-rhythm {
  padding: 4.4rem 0 5.8rem;
  background: #f2f6f8;
}

body[data-page="arthroscopy-sports-injuries.php"] main>.recovery-rhythm .rhythm-card {
  border-color: #9acabe;
}

body[data-page="arthroscopy-sports-injuries.php"] main>.appointment-band {
  padding: 4.5rem 0;
  background: #102c3d;
  color: var(--white);
}

body[data-page="arthroscopy-sports-injuries.php"] main>.appointment-band h2 {
  color: var(--white);
}

body[data-page="spine-trauma.php"] main>.spine-checklist {
  padding: 5.6rem 0;
  background: #edf1f4;
}

body[data-page="spine-trauma.php"] main>.spine-story {
  padding: 4.2rem 0 6rem;
  background: #fff;
}

body[data-page="spine-trauma.php"] main>.dark-feature {
  padding: 6.8rem 0;
  background: #3e3030;
}

body[data-page="spine-trauma.php"] main>.appointment-band {
  padding: 3.8rem 0;
  background: #f0c58e;
}

body[data-page="joint-replacement-guide.php"] .article-facts-section {
  padding: 5.3rem 0;
}

body[data-page="joint-replacement-guide.php"] .article-questions-section {
  padding: 4.7rem 0 6.1rem;
}

body[data-page="acl-injury.php"] .article-facts-section {
  padding: 4.1rem 0 5.8rem;
}

body[data-page="acl-injury.php"] .article-questions-section {
  padding: 6.2rem 0;
}

body[data-page="hip-replacement-guide.php"] .article-facts-section {
  padding: 5.8rem 0 4.8rem;
}

body[data-page="hip-replacement-guide.php"] .article-related-section {
  padding: 5.4rem 0 4rem;
}

body[data-page="sports-injury-recovery.php"] .article-facts-section {
  padding: 6.2rem 0 5rem;
}

body[data-page="sports-injury-recovery.php"] .article-questions-section {
  padding: 4.2rem 0 6.4rem;
}

body[data-page="privacy-policy.php"] main>.content-section {
  padding: 5rem 0 4.2rem;
}

body[data-page="terms-and-conditions.php"] main>.content-section {
  padding: 4.2rem 0 5.4rem;
}

body[data-page="medical-disclaimer.php"] main>.content-section {
  padding: 5.8rem 0 4rem;
}

body[data-page="cookie-policy.php"] main>.content-section {
  padding: 4rem 0 4.8rem;
}

body[data-page="accessibility.php"] main>.content-section {
  padding: 4.8rem 0 5.8rem;
}

/* Homepage hero refinement: keep the header clear and give the lead copy room to breathe. */
.home-hero .hero-slide .container {
  padding-top: clamp(7.5rem, 10vw, 10rem);
  padding-bottom: clamp(7rem, 8vw, 8.5rem);
}

.home-hero .hero-copy {
  max-width: min(760px, 62vw);
}

.home-hero .hero-heading {
  max-width: 720px;
  font-size: clamp(3rem, 5.7vw, 5.7rem);
  line-height: .99;
}

.home-hero .hero-copy>p:not(.eyebrow) {
  max-width: 700px;
}

.home-hero .hero-slide:before {
  background:
    linear-gradient(90deg, rgba(2, 17, 28, .78) 0%, rgba(4, 26, 40, .56) 38%, rgba(4, 26, 40, .24) 68%, rgba(4, 26, 40, .10) 100%),
    linear-gradient(0deg, rgba(2, 17, 28, .54) 0%, rgba(2, 17, 28, .24) 38%, rgba(2, 17, 28, .08) 70%, rgba(2, 17, 28, .42) 100%);
}

/* Compact legal reading system: a short orientation hero, a focused reading rail and
   restrained supporting sections keep policy pages useful without editorial sprawl. */
body[data-page="privacy-policy.php"],
body[data-page="terms-and-conditions.php"],
body[data-page="medical-disclaimer.php"],
body[data-page="cookie-policy.php"],
body[data-page="accessibility.php"] {
  --legal-accent: var(--success);
  --legal-tint: #f3f8f6;
}

body[data-page="terms-and-conditions.php"] {
  --legal-accent: #4e7893;
  --legal-tint: #f3f6fa;
}

body[data-page="medical-disclaimer.php"] {
  --legal-accent: #b57942;
  --legal-tint: #fff9f1;
}

body[data-page="cookie-policy.php"] {
  --legal-accent: #547f91;
  --legal-tint: #f4f7f9;
}

body[data-page="accessibility.php"] {
  --legal-accent: #2f8879;
  --legal-tint: #eff8f5;
}

body[data-page="privacy-policy.php"] main>.legal-hero,
body[data-page="terms-and-conditions.php"] main>.legal-hero,
body[data-page="medical-disclaimer.php"] main>.legal-hero,
body[data-page="cookie-policy.php"] main>.legal-hero,
body[data-page="accessibility.php"] main>.legal-hero {
  min-height: 430px;
  padding: 7.4rem 0 3.35rem;
  background-position: center 42%;
}

/* The base theme's decorative inner-hero circle is intentionally absent on policy pages. */
body[data-page="privacy-policy.php"] main>.legal-hero:after,
body[data-page="terms-and-conditions.php"] main>.legal-hero:after,
body[data-page="medical-disclaimer.php"] main>.legal-hero:after,
body[data-page="cookie-policy.php"] main>.legal-hero:after,
body[data-page="accessibility.php"] main>.legal-hero:after {
  content: none;
}

.legal-hero h1 {
  max-width: 760px;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  line-height: .93;
  letter-spacing: -.095em;
}

.legal-hero p:not(.eyebrow) {
  max-width: 560px;
  margin-top: 1.15rem;
  font-size: .9rem;
  line-height: 1.65;
}

.legal-hero .eyebrow {
  color: var(--secondary);
}

.legal-reading-section {
  padding: 3.7rem 0 4.1rem !important;
  background: var(--legal-tint);
}

.legal-reading-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 860px);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.legal-index {
  position: sticky;
  top: 6.7rem;
  align-self: start;
  padding-top: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--legal-accent) 42%, transparent);
}

.legal-index-label {
  margin: 0;
  color: var(--legal-accent);
  font: 500 .62rem/1.3 'DM Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.legal-index>strong {
  display: block;
  margin: .65rem 0 1.8rem;
  color: var(--primary);
  font: 700 3.9rem/.75 'Manrope', sans-serif;
  letter-spacing: -.13em;
}

.legal-index nav {
  display: grid;
  gap: .1rem;
}

.legal-index nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(16, 44, 61, .12);
  color: var(--text-muted);
  font: 600 .72rem/1.35 'Manrope', sans-serif;
}

.legal-index nav a:hover {
  color: var(--primary);
}

.legal-index nav i {
  color: var(--legal-accent);
  font-size: .72rem;
}

.legal-reading-card {
  min-width: 0;
  padding: clamp(1.5rem, 3.2vw, 3rem);
  border: 1px solid rgba(16, 44, 61, .09);
  border-top: 3px solid var(--legal-accent);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 16px 42px rgba(16, 44, 61, .055);
}

.legal-reading-lead {
  display: grid;
  grid-template-columns: minmax(130px, .35fr) 1fr;
  gap: 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--border);
}

.legal-reading-lead .eyebrow {
  margin: .2rem 0 0;
  color: var(--legal-accent);
}

.legal-reading-lead>p:last-child {
  max-width: 520px;
  margin: 0;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.65;
}

.legal-reading-copy {
  max-width: 710px;
}

.legal-reading-copy h2 {
  margin: 2.25rem 0 .55rem;
  color: var(--primary);
  font-size: clamp(1.28rem, 2vw, 1.7rem);
  line-height: 1.08;
  letter-spacing: -.06em;
}

.legal-reading-copy h2:first-child {
  margin-top: 2rem;
}

.legal-reading-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.75;
}

.legal-reading-copy .btn {
  margin-top: 1.7rem;
}

.legal-principles {
  padding: 3.25rem 0 !important;
}

.legal-principles-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, .65fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 1.6rem;
}

.legal-principles-head h2 {
  max-width: 650px;
  margin: .55rem 0 0;
  font-size: clamp(1.9rem, 3.3vw, 3.2rem);
  line-height: .96;
  letter-spacing: -.08em;
}

.legal-principles-head>p {
  max-width: 310px;
  margin: 0 0 .15rem;
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.7;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  background: none;
}

.principle-grid>div {
  min-height: 160px;
  padding: 1.2rem 1.25rem;
  border: 1px solid rgba(16, 44, 61, .1);
  border-radius: .8rem;
  background: rgba(255, 255, 255, .68);
}

.principle-grid span {
  display: block;
  color: var(--legal-accent);
  font: 500 .62rem/1 'DM Mono', monospace;
  letter-spacing: .1em;
}

.principle-grid strong {
  display: block;
  margin-top: 2.6rem;
  color: var(--primary);
  font: 700 .95rem/1.1 'Manrope', sans-serif;
  letter-spacing: -.04em;
}

.principle-grid p {
  max-width: 220px;
  margin: .42rem 0 0;
  color: var(--text-muted);
  font-size: .73rem;
  line-height: 1.55;
}

.legal-reading-section+.legal-principles {
  border-top: 1px solid rgba(16, 44, 61, .06);
}

body[data-page="accessibility.php"] .legal-principles-head>p,
body[data-page="accessibility.php"] .legal-principles-head h2 {
  color: var(--white);
}

body[data-page="accessibility.php"] .legal-principles-head>p {
  color: rgba(255, 255, 255, .68);
}

body[data-page="privacy-policy.php"] main>.dark-feature,
body[data-page="terms-and-conditions.php"] main>.dark-feature,
body[data-page="medical-disclaimer.php"] main>.dark-feature,
body[data-page="cookie-policy.php"] main>.dark-feature,
body[data-page="accessibility.php"] main>.dark-feature {
  padding: 3.65rem 0 !important;
}

body[data-page="privacy-policy.php"] main>.appointment-band,
body[data-page="terms-and-conditions.php"] main>.appointment-band,
body[data-page="medical-disclaimer.php"] main>.appointment-band,
body[data-page="cookie-policy.php"] main>.appointment-band,
body[data-page="accessibility.php"] main>.appointment-band {
  padding: 2.45rem 0 !important;
}

@media (max-width: 700px) {

  body[data-page="privacy-policy.php"] main>.legal-hero,
  body[data-page="terms-and-conditions.php"] main>.legal-hero,
  body[data-page="medical-disclaimer.php"] main>.legal-hero,
  body[data-page="cookie-policy.php"] main>.legal-hero,
  body[data-page="accessibility.php"] main>.legal-hero {
    min-height: 350px;
    padding: 5.8rem 0 2.5rem;
  }

  .legal-hero h1 {
    max-width: 100%;
    font-size: clamp(1.85rem, 8.5vw, 2.6rem);
  }

  .legal-reading-section {
    padding: 2.5rem 0 2.8rem !important;
  }

  .legal-reading-layout {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }

  .legal-index {
    position: static;
    padding-top: .6rem;
  }

  .legal-index>strong {
    display: inline-block;
    margin: .5rem 0 1rem;
    font-size: 3rem;
  }

  .legal-index nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .legal-reading-card {
    padding: 1.25rem;
    border-radius: .8rem;
  }

  .legal-reading-lead {
    display: block;
    padding-bottom: 1.15rem;
  }

  .legal-reading-lead>p:last-child {
    margin-top: .65rem;
    font-size: .82rem;
  }

  .legal-reading-copy h2 {
    margin-top: 1.7rem;
    font-size: 1.25rem;
  }

  .legal-reading-copy h2:first-child {
    margin-top: 1.5rem;
  }

  .legal-reading-copy p {
    font-size: .82rem;
    line-height: 1.7;
  }

  .legal-principles {
    padding: 2.55rem 0 !important;
  }

  .legal-principles-head {
    grid-template-columns: 1fr;
    gap: .8rem;
    margin-bottom: 1.3rem;
  }

  .legal-principles-head h2 {
    font-size: 2rem;
  }

  .legal-principles-head>p {
    max-width: 400px;
  }

  .principle-grid {
    grid-template-columns: 1fr;
    gap: .6rem;
  }

  .principle-grid>div {
    min-height: 0;
    padding: 1rem;
  }

  .principle-grid strong {
    margin-top: 1.7rem;
  }

  body[data-page="privacy-policy.php"] main>.dark-feature,
  body[data-page="terms-and-conditions.php"] main>.dark-feature,
  body[data-page="medical-disclaimer.php"] main>.dark-feature,
  body[data-page="cookie-policy.php"] main>.dark-feature,
  body[data-page="accessibility.php"] main>.dark-feature {
    padding: 2.7rem 0 !important;
  }

  body[data-page="privacy-policy.php"] main>.appointment-band,
  body[data-page="terms-and-conditions.php"] main>.appointment-band,
  body[data-page="medical-disclaimer.php"] main>.appointment-band,
  body[data-page="cookie-policy.php"] main>.appointment-band,
  body[data-page="accessibility.php"] main>.appointment-band {
    padding: 2rem 0 !important;
  }

  
}

@media (max-width: 700px) {
  body[data-page="hip-replacement-guide.php"] .article-questions-section .question-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="joint-replacement.php"] main>.decision-grid-section,
  body[data-page="joint-replacement.php"] main>.image-band,
  body[data-page="arthroscopy-sports-injuries.php"] main>.injury-signals,
  body[data-page="arthroscopy-sports-injuries.php"] main>.recovery-rhythm,
  body[data-page="spine-trauma.php"] main>.spine-checklist,
  body[data-page="spine-trauma.php"] main>.spine-story,
  body[data-page="joint-replacement.php"] main>.appointment-band,
  body[data-page="arthroscopy-sports-injuries.php"] main>.appointment-band,
  body[data-page="spine-trauma.php"] main>.appointment-band,
  body[data-page="joint-replacement-guide.php"] .article-facts-section,
  body[data-page="joint-replacement-guide.php"] .article-questions-section,
  body[data-page="acl-injury.php"] .article-facts-section,
  body[data-page="acl-injury.php"] .article-questions-section,
  body[data-page="hip-replacement-guide.php"] .article-facts-section,
  body[data-page="hip-replacement-guide.php"] .article-related-section,
  body[data-page="sports-injury-recovery.php"] .article-facts-section,
  body[data-page="sports-injury-recovery.php"] .article-questions-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (max-width: 700px) {
  .home-hero .hero-slide .container {
    padding-top: 4.6rem;
    padding-bottom: 4.2rem;
  }

  .home-hero .hero-copy {
    max-width: calc(100vw - 2rem);
  }

  .home-hero .hero-heading {
    max-width: 100%;
    font-size: clamp(2.35rem, 11vw, 3.7rem);
  }

  .home-hero .hero-copy>p:not(.eyebrow) {
    max-width: 340px;
  }
}

@media (min-width: 701px) {
  .home-hero .hero-slide {
    align-items: flex-end;
  }

  .home-hero .hero-slide .container {
    padding-top: 0;
    padding-bottom: clamp(7rem, 8vh, 8rem);
  }
}

/* Homepage hero finishing pass: quieter eyebrow, lower copy anchor and a cleaner display face. */
.home-hero .hero-copy>.eyebrow {
  margin-bottom: 1.05rem;
  color: var(--secondary);
  font-size: clamp(.58rem, .7vw, .68rem);
  letter-spacing: .14em;
}

.home-hero .hero-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.075em;
}

@media (max-width: 700px) {
  .home-hero .hero-copy>.eyebrow {
    font-size: .55rem;
    letter-spacing: .12em;
  }

  .home-hero .hero-heading {
    line-height: 1;
  }
}

/* Doctor introduction refinement: use the supplied portrait and a calmer reading scale. */
.home-doctor-visual .doctor-portrait img {
  object-fit: contain;
  background: #fff;
}

.home-doctor-copy h2 {
  font-size: clamp(2.55rem, 4.5vw, 5.15rem);
  line-height: .98;
}

.home-doctor-copy h2 strong,
.home-doctor-copy .home-lead strong {
  color: var(--primary);
  font-weight: 800;
}

.home-doctor-copy h2 strong {
  display: inline-block;
}

.home-doctor-copy .home-lead {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
}

.home-doctor-copy>p:not(.eyebrow):not(.home-overline) {
  font-size: .95rem;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .home-pathway-panels {
    min-height: 0;
    padding: 0;
  }

  .home-pathway-panels .pathway-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-pathway-copy {
    padding: 1.6rem;
  }

  .home-pathway-image {
    min-height: 220px;
  }
}

@media (max-width: 700px) {
  .home-journal-stack>a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 0;
    align-items: start;
  }

  .home-journal-stack>a>div:not(.home-journal-card-media) {
    grid-column: 1;
    grid-row: 1;
  }

  .home-journal-stack>a>i {
    grid-column: 2;
    grid-row: 1;
  }

  .home-journal-card-media {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 130px;
    margin-top: 1rem;
  }
}

/* About page art direction: each section has its own composition and reading rhythm. */
body[data-page="about-dr-kapil-khare.php"] .about-hero {
  min-height: 610px;
  padding: 7.5rem 0 4rem;
  background-position: center;
}

.about-hero .breadcrumb-wrap {
  margin-bottom: 2rem;
}

.about-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 4rem;
  align-items: end;
}

.about-hero h1 {
  max-width: 850px;
  margin: .8rem 0 1.1rem;
  font-size: clamp(2.8rem, 5.6vw, 5.6rem);
  line-height: .95;
  letter-spacing: -.1em;
}

.about-hero-lead {
  max-width: 650px;
  color: rgba(255, 255, 255, .78);
  font-size: 1.03rem;
  line-height: 1.75;
}

.about-profile-section {
  background: #f7f8f5;
  overflow: hidden;
}

.about-section-marker {
  display: flex;
  align-items: end;
  gap: 1.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--success);
}

.about-section-marker strong {
  color: var(--text);
  font: 600 4.8rem/.75 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.about-section-marker span {
  padding-bottom: .15rem;
  font: .62rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.about-profile-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(3.5rem, 5vw, 9rem);
  align-items: center;
  /* padding-top: 4.5rem; */
}

.about-profile-visual {
  position: relative;
  min-height: auto;
  padding: 0;
}

.about-portrait {
  position: relative;
  z-index: 1;
  /* max-width: 460px; */
  /* height: 530px; */
  margin: 0;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: var(--shadow-lift);
}

/* .about-portrait:before {
  content: '';
  position: absolute;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  z-index: -1;
  border-radius: 1.5rem;
  background: var(--secondary);
  opacity: .35;
} */

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.about-portrait figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  padding: .8rem 1.25rem;
  border-radius: 0 0 1.5rem 1.5rem;
  background: var(--primary);
  color: #fff;
  font: 600 .72rem/1.35 'Manrope', sans-serif;
  box-shadow: var(--shadow-soft);
}

.about-portrait figcaption span {
  color: rgba(255, 255, 255, .62);
  font: .58rem/1 'DM Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-profile-copy {
  /* max-width: 720px; */
}

.about-profile-copy h2 {
  /* max-width: 650px; */
  margin: .8rem 0 1.3rem;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.1em;
}

.about-profile-copy p:not(.eyebrow) {
  /* max-width: 650px; */
  color: var(--text-muted);
  font-size: .98rem;
  line-height: 1.8;
}

.about-profile-copy .about-lead {
  color: var(--text);
  font: 600 clamp(1.05rem, 1.5vw, 1.3rem)/1.55 'Manrope', sans-serif;
  letter-spacing: -.035em;
}

.about-anchor-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.3rem;
  border-top: 1px solid var(--border);
}

.about-anchor-nav a {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: 1rem .8rem 1rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font: 600 .72rem/1.3 'Manrope', sans-serif;
}

.about-anchor-nav a+a {
  padding-left: .8rem;
  border-left: 1px solid var(--border);
}

.about-anchor-nav i {
  color: var(--success);
}

.about-education-section {
  background: var(--primary);
  color: #fff;
  overflow: hidden;
}

.about-section-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 5rem;
  align-items: end;
}

.about-section-heading h2 {
  max-width: 750px;
  margin: .8rem 0 0;
  color: #fff;
  font-size: clamp(2.8rem, 5.2vw, 5.6rem);
  line-height: .93;
  letter-spacing: -.1em;
}

.about-section-heading>p {
  max-width: 100%;
  margin: 0 0 .3rem;
  color: rgba(255, 255, 255, .64);
  font-size: .82rem;
  line-height: 1.8;
}

.about-education-layout {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 3.5rem;
}

.about-credential-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.about-credential-rail>div {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 190px;
  padding: 1.4rem 1.2rem 1.4rem 0;
  border-right: 1px solid rgba(255, 255, 255, .15);
}

.about-credential-rail>div:not(:first-child) {
  padding-left: 1.2rem;
}

.about-credential-rail>div:nth-child(3) {
  border-right: 0;
}

.about-credential-rail span {
  color: var(--secondary);
  font: .62rem/1 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.about-credential-rail strong {
  margin-top: auto;
  color: #fff;
  font: 600 clamp(1rem, 1.8vw, 1.5rem)/1.1 'Manrope', sans-serif;
  letter-spacing: -.05em;
}

.about-credential-rail small {
  color: rgba(255, 255, 255, .56);
  font-size: .68rem;
}

.about-expertise-section {
  background: #eef4f1;
}

.about-expertise-heading {
  display: grid;
  grid-template-columns: 1fr .7fr;
  column-gap: 4rem;
  align-items: end;
}

.about-expertise-heading .eyebrow,
.about-expertise-heading h2 {
  grid-column: 1;
}

.about-expertise-heading h2 {
  max-width: 760px;
  margin: .8rem 0 0;
  font-size: clamp(2.8rem, 5vw, 5.3rem);
  line-height: .94;
  letter-spacing: -.1em;
}

.about-expertise-heading>p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 100%;
  margin: 0 0 .3rem;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.about-expertise-bento {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  grid-template-rows: 255px 255px;
  gap: 1rem;
  margin-top: 4rem;
}

.about-expertise-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 1.4rem;
  overflow: hidden;
  border-radius: 1rem;
  transition: transform .3s ease, box-shadow .3s ease;
}

.about-expertise-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.about-expertise-card>span {
  position: relative;
  z-index: 1;
  font: .6rem/1 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.about-expertise-card h3 {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  font-size: clamp(1.6rem, 2.6vw, 2.8rem);
  line-height: .96;
  letter-spacing: -.08em;
}

.about-expertise-card p {
  position: relative;
  z-index: 1;
  max-width: 260px;
  margin: .8rem 0 0;
  font-size: .78rem;
  line-height: 1.65;
}

.about-expertise-card i {
  position: absolute;
  right: 1.3rem;
  top: 1.3rem;
  z-index: 1;
  font-size: 1rem;
}

.about-expertise-image {
  grid-row: span 2;
  background: linear-gradient(0deg, rgba(4, 21, 31, .86), rgba(4, 21, 31, .12) 75%), var(--card-image) center/cover;
  color: #fff;
}

.about-expertise-image-wide {
  grid-column: 2 / 4;
  grid-row: 2;
  min-height: 0;
}

.about-expertise-light {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}

.about-expertise-light i {
  color: var(--success);
}

.about-expertise-dark {
  background: var(--primary);
  color: #fff;
}

.about-expertise-dark p {
  color: rgba(255, 255, 255, .65);
}

.about-expertise-dark i {
  color: var(--secondary);
}

.about-conversation-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  background: var(--secondary);
  color: var(--primary);
  overflow: hidden;
}

.about-conversation-layout {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 3rem;
  align-items: end;
}

.about-conversation-layout h2 {
  margin: .8rem 0 0;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: .93;
  letter-spacing: -.1em;
}

.about-conversation-layout h2 em {
  font-weight: 500;
}

.about-conversation-action {
  max-width: 310px;
  justify-self: end;
}

.about-conversation-action p {
  margin: 0 0 1.5rem;
  color: rgba(16, 44, 61, .7);
  font-size: .82rem;
  line-height: 1.75;
}

.about-source-section {
  background: var(--primary);
  color: #fff;
}

.about-source-layout {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: clamp(3rem, 10vw, 10rem);
  align-items: center;
}

.about-source-copy {
  max-width: 680px;
}

.about-source-copy h2 {
  margin: .8rem 0 1.2rem;
  color: #fff;
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  line-height: .94;
  letter-spacing: -.1em;
}

.about-source-copy p:not(.eyebrow) {
  max-width: 580px;
  color: rgba(255, 255, 255, .65);
  font-size: .86rem;
  line-height: 1.8;
}

.about-source-copy .text-link {
  margin-top: 1.2rem;
  color: var(--secondary);
}

.about-source-card {
  display: grid;
  gap: .65rem;
  min-height: 290px;
  padding: 2rem;
  border: 1px solid rgba(117, 212, 194, .35);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .07);
}

.about-source-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: auto;
  border: 1px solid rgba(117, 212, 194, .5);
  border-radius: 50%;
  color: var(--secondary);
  font-size: 1.25rem;
}

.about-source-card small,
.about-source-line {
  color: var(--secondary);
  font: .6rem/1.3 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.about-source-card strong {
  font: 600 1.45rem/1.1 'Manrope', sans-serif;
  letter-spacing: -.05em;
}

.about-source-card p {
  margin: 0;
  color: rgba(255, 255, 255, .65);
  font-size: .75rem;
  line-height: 1.6;
}

.about-source-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.about-roadmap-section {
  background: #fff;
}

.about-roadmap-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(3rem, 9vw, 9rem);
  align-items: start;
}

.about-roadmap-layout h2 {
  max-width: 500px;
  margin: .8rem 0 0;
  font-size: clamp(2.7rem, 4.5vw, 5rem);
  line-height: .95;
  letter-spacing: -.1em;
}

.about-roadmap-list {
  border-top: 1px solid var(--border);
}

.about-roadmap-list>div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--border);
}

.about-roadmap-list>div>span {
  color: var(--success);
  font: .64rem/1 'DM Mono', monospace;
}

.about-roadmap-list strong {
  font: 600 1rem/1.2 'Manrope', sans-serif;
}

.about-roadmap-list p {
  max-width: 520px;
  margin: .4rem 0 0;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.65;
}

.about-roadmap-list i {
  color: var(--success);
}

.about-principles-section {
  background: #e7f1ee;
}

.about-principles-heading {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  align-items: end;
}

.about-principles-heading h2 {
  margin: .8rem 0 0;
  font-size: clamp(2.8rem, 5vw, 5.3rem);
  line-height: .94;
  letter-spacing: -.1em;
}

.about-principles-heading>p:last-child {
  max-width: 100%;
  margin: 0 0 .4rem;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.75;
}

.about-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 4.5rem;
  border: 1px solid rgba(16, 44, 61, .12);
  background: rgba(16, 44, 61, .12);
}

.about-principles-grid>div {
  position: relative;
  min-height: 260px;
  padding: 1.5rem;
  background: #e7f1ee;
}

.about-principles-grid span {
  color: var(--success);
  font: .62rem/1 'DM Mono', monospace;
}

.about-principles-grid strong {
  display: block;
  margin-top: 5rem;
  font: 600 1.35rem/1.1 'Manrope', sans-serif;
  letter-spacing: -.05em;
}

.about-principles-grid p {
  max-width: 250px;
  margin: .65rem 0 0;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.65;
}

.about-principles-grid i {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  color: var(--success);
  font-size: 1.2rem;
}

@media (max-width: 991px) {

  .about-hero-content,
  .about-profile-grid,
  .about-source-layout {
    grid-template-columns: 1fr;
  }

  

  .about-profile-visual {
    max-width: 560px;
  }

  .about-section-heading,
  .about-expertise-heading,
  .about-roadmap-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-expertise-heading>p:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .about-conversation-layout {
    grid-template-columns: 1fr;
  }

  .about-conversation-action {
    grid-column: 1;
    justify-self: start;
  }
}

@media (max-width: 700px) {
  body[data-page="about-dr-kapil-khare.php"] .about-hero {
    min-height: 520px;
    padding: 5rem 0 2.2rem;
  }

  

  .about-hero .breadcrumb-wrap {
    margin-bottom: 1.2rem;
  }

  .about-hero h1 {
    margin: .55rem 0 .9rem;
    font-size: clamp(2.4rem, 11vw, 3.45rem);
  }

  .about-hero-lead {
    font-size: .88rem;
    line-height: 1.55;
  }

  

  

  

  .about-section-marker strong {
    font-size: 3.6rem;
  }

  .about-profile-grid {
    gap: 3.5rem;
    padding-top: 3rem;
  }

  .about-profile-visual {
    min-height: 430px;
    padding-right: 1.5rem;
  }

  .about-anchor-nav {
    grid-template-columns: 1fr;
  }

  .about-anchor-nav a+a {
    padding-left: 0;
    border-left: 0;
  }

  .about-section-heading h2,
  .about-expertise-heading h2,
  .about-source-copy h2,
  .about-roadmap-layout h2 {
    font-size: 2.8rem;
  }

  .about-education-layout {
    margin-top: 3rem;
  }

  .about-credential-rail {
    grid-template-columns: 1fr;
  }

  .about-credential-rail>div,
  .about-credential-rail>div:not(:first-child) {
    min-height: 125px;
    padding: 1rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }

  

  .about-expertise-bento {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 240px);
    margin-top: 2.5rem;
  }

  .about-expertise-image,
  .about-expertise-image-wide {
    grid-column: auto;
    grid-row: auto;
  }

  .about-conversation-layout {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }

  .about-conversation-action {
    grid-column: auto;
  }

  .about-source-card {
    min-height: 260px;
  }

  .about-principles-heading {
    display: block;
  }

  .about-principles-heading>p:last-child {
    margin-top: 1.2rem;
  }

  .about-principles-grid {
    grid-template-columns: 1fr;
  }

  .about-principles-grid>div {
    min-height: 210px;
  }

  .about-principles-grid strong {
    margin-top: 3.5rem;
  }
}

/* Global inner-page hero scale: keep secondary pages compact and content-led. */
body:not(.home-page) .inner-hero {
  min-height: 470px;
  padding: 8.5rem 0 3.6rem;
}

body:not(.home-page) .inner-hero h1 {
  max-width: 900px;
  font-size: clamp(2.65rem, 4.4vw, 4.4rem);
  line-height: .96;
}

body:not(.home-page) .inner-hero p:not(.eyebrow) {
  max-width: 610px;
  font-size: .98rem;
  line-height: 1.65;
}

body[data-page="about-dr-kapil-khare.php"] .about-hero {
  min-height: 560px;
  padding: 7rem 0 3.6rem;
}

body[data-page="about-dr-kapil-khare.php"] .about-hero h1 {
  font-size: clamp(2.65rem, 5.4vw, 5.4rem);
}

@media (max-width: 700px) {
  body:not(.home-page) .inner-hero {
    min-height: 390px;
    padding: 6.2rem 0 2.8rem;
  }

  body:not(.home-page) .inner-hero h1,
  body[data-page="about-dr-kapil-khare.php"] .about-hero h1 {
    font-size: clamp(2.3rem, 11vw, 3.5rem);
  }
}

@media (max-width: 700px) {
  body[data-page="about-dr-kapil-khare.php"] .about-hero {
    min-height: 520px;
    padding: 5rem 0 2.2rem;
  }
}

/* Specialities page: a dedicated editorial system with a different rhythm from the other inner pages. */

.specialities-conversation-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  background: var(--secondary);
  color: var(--primary);
  overflow: hidden;
}

.specialities-conversation-layout {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 3rem;
  align-items: end;
}

.specialities-conversation-layout h2 {
  margin: .75rem 0 0;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.1em;
}

.specialities-conversation-action {
  max-width: 100%;
  justify-self: end;
}

.specialities-conversation-action p {
  margin: 0 0 1.4rem;
  color: rgba(16, 44, 61, .7);
  font-size: .82rem;
  line-height: 1.75;
}

@media (max-width: 700px) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .specialities-conversation-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  

  .specialities-conversation-action {
    justify-self: start;
  }
}

/* Global inner-page hero typography and mobile hierarchy. */
body:not(.home-page) .inner-hero h1 {
  font-size: clamp(2.45rem, 3.8vw, 4.85rem);
  line-height: .98;
}

.eyebrow {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: .14em;
}

/* Keep every page-section eyebrow on one exact type scale. */
main .eyebrow,
main .inner-hero .eyebrow,
main .home-hero .hero-copy>.eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .14em;
}

@media (max-width: 700px) {
  body:not(.home-page) .inner-hero p:not(.eyebrow) {
    display: none;
  }
}

/* Keep every inner-page breadcrumb pinned to the hero's lower-left edge. */
body:not(.home-page) .inner-hero {
  position: relative;
}

body:not(.home-page) .inner-hero>.container {
  position: static;
}

body:not(.home-page) .inner-hero>.container>.breadcrumb-wrap {
  position: absolute;
  left: max(1rem, calc((100vw - 1320px) / 2));
  bottom: 1.45rem;
  z-index: 3;
  margin: 0;
}

@media (max-width: 700px) {
  body:not(.home-page) .inner-hero>.container>.breadcrumb-wrap {
    left: 1rem;
    bottom: 1rem;
  }
}

/* Treatments page: a distinct treatment atlas with a consistent editorial section head. */

 

.treatments-next-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  background: var(--secondary);
  color: var(--primary);
  overflow: hidden;
}

.treatments-next-layout {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 3rem;
  align-items: end;
}

.treatments-next-layout h2 {
  max-width: 660px;
  margin: .7rem 0 0;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  line-height: .92;
  letter-spacing: -.1em;
}

.treatments-next-action {
  max-width: 315px;
  justify-self: end;
}

.treatments-next-action p {
  margin: 0 0 1.4rem;
  color: rgba(16, 44, 61, .7);
  font-size: .8rem;
  line-height: 1.75;
}

@media (max-width: 991px) {

  

  

  

  

  

  

  .treatments-next-layout {
    grid-template-columns: 80px 1fr;
  }

  .treatments-next-action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 700px) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .treatments-next-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  

  .treatments-next-action {
    grid-column: auto;
    justify-self: start;
  }
}

/* Blog: an editorial reading room with a distinct composition for every section. */
body[data-page="blog.php"] main>.blog-hero {
  min-height: 620px;
  padding: 7.4rem 0 3.8rem;
  color: var(--white);
  background: linear-gradient(100deg, rgba(4, 21, 31, .94) 0%, rgba(4, 21, 31, .7) 45%, rgba(4, 21, 31, .28) 100%), var(--page-hero-image) center/cover;
  overflow: hidden;
}

body[data-page="blog.php"] main>.blog-hero>.container {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.blog-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 3rem;
  align-items: end;
  margin-top: 5rem;
}

.blog-hero h1 {
  max-width: 790px;
  margin: .8rem 0 1.1rem;
  color: var(--white);
  font: 600 clamp(3rem, 6.3vw, 6.4rem)/.88 'Manrope', sans-serif;
  letter-spacing: -.105em;
}

.blog-hero h1 em {
  color: var(--secondary);
  font-style: normal;
  font-weight: 500;
}

.blog-hero .eyebrow {
  color: var(--secondary);
}

.blog-hero-lead {
  max-width: 590px;
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: .92rem;
  line-height: 1.75;
}

.blog-hero-aside {
  position: relative;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  border: 1px solid rgba(117, 212, 194, .38);
  border-radius: 50%;
  color: var(--secondary);
  transform: rotate(7deg);
}

.blog-hero-aside:before,
.blog-hero-aside:after {
  content: '';
  position: absolute;
  inset: .6rem;
  border: 1px solid rgba(117, 212, 194, .2);
  border-radius: 50%;
}

.blog-hero-aside:after {
  inset: -1rem;
  opacity: .55;
}

.blog-hero-aside span,
.blog-hero-aside i {
  position: relative;
  z-index: 1;
  font: .58rem/1 'DM Mono', monospace;
  letter-spacing: .14em;
}

.blog-hero-aside strong {
  position: relative;
  z-index: 1;
  align-self: center;
  margin: auto 0;
  color: var(--white);
  font: 600 1.65rem/.88 'Manrope', sans-serif;
  letter-spacing: -.08em;
  text-transform: uppercase;
}

.blog-hero-aside strong em {
  color: var(--secondary);
  font-style: normal;
}

.blog-feature-section,
.blog-reading-section,
.blog-topics-section,
.blog-standard-section,
.blog-prep-section {
  padding: clamp(4.7rem, 8vw, 8rem) 0;
}

.blog-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
}

.blog-section-head .eyebrow {
  margin-bottom: 1rem;
  color: var(--success);
}

.blog-section-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--primary);
  font: 600 clamp(2.25rem, 4.5vw, 4.8rem)/.93 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.blog-section-head>p {
  max-width: 350px;
  justify-self: end;
  margin: 0;
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.8;
}

.blog-feature-image>span,
.blog-article-meta,
.blog-card-meta,
.blog-prep-image>span {
  color: var(--secondary);
  font: .6rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.blog-reading-section {
  background: var(--surface);
}

.blog-reading-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 1rem;
  color: var(--text-muted);
  font: .62rem/1 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.blog-view-switch {
  display: inline-flex;
  gap: .3rem;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
}

.blog-view-switch button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .75rem;
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  font: .65rem/1 'DM Mono', monospace;
  cursor: pointer;
}

.blog-view-switch button.is-active {
  color: var(--white);
  background: var(--primary);
}

.blog-reading-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(230px, auto);
  gap: .8rem;
}

.blog-reading-card {
  position: relative;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-column: span 4;
  padding: 1.35rem;
  overflow: hidden;
  border-radius: .9rem;
  color: var(--white);
  background: linear-gradient(180deg, rgba(16, 44, 61, .12), rgba(4, 21, 31, .9)), var(--blog-image) center/cover;
  transition: transform .25s ease, box-shadow .25s ease;
}

.blog-reading-card:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(117, 212, 194, .22), transparent 45%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.blog-reading-card:hover {
  color: var(--white);
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(16, 44, 61, .17);
}

.blog-reading-card:hover:after {
  opacity: 1;
}

.blog-reading-card>* {
  position: relative;
  z-index: 1;
}

.blog-reading-card-large {
  grid-column: span 6;
  grid-row: span 2;
  min-height: 555px;
}

.blog-reading-card-wide {
  grid-column: span 6;
}

.blog-reading-card-dark {
  background: linear-gradient(135deg, #102c3d, #07515e);
}

.blog-reading-card h3 {
  max-width: 470px;
  margin: .7rem 0 .55rem;
  color: var(--white);
  font: 600 clamp(1.35rem, 2.3vw, 2.35rem)/.96 'Manrope', sans-serif;
  letter-spacing: -.075em;
}

.blog-reading-card-large h3 {
  font-size: clamp(2rem, 4vw, 4rem);
}

.blog-reading-card p {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: .75rem;
  line-height: 1.65;
}

.blog-reading-card .text-link {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--secondary);
  font-size: .73rem;
}

.blog-reading-card .text-link i {
  margin-left: .35rem;
}

.blog-reading-grid.is-list-view {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.blog-reading-grid.is-list-view .blog-reading-card {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 1rem;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--primary);
  background: var(--surface);
  transform: none;
  box-shadow: none;
}

.blog-reading-grid.is-list-view .blog-reading-card:after {
  display: none;
}

.blog-reading-grid.is-list-view .blog-reading-card>div {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, .7fr);
  gap: 1rem;
  align-items: center;
}

.blog-reading-grid.is-list-view .blog-reading-card h3 {
  margin: 0;
  color: var(--primary);
  font-size: 1.35rem;
}

.blog-reading-grid.is-list-view .blog-reading-card p {
  margin: 0;
  color: var(--text-muted);
}

.blog-reading-grid.is-list-view .blog-reading-card .text-link {
  margin: 0;
  color: var(--success);
}

.blog-reading-grid.is-list-view .blog-card-meta {
  color: var(--success);
}

.blog-reading-grid.is-list-view .blog-reading-card>i {
  display: block;
  justify-self: end;
  color: var(--success);
}

.blog-topics-section {
  background: #e8f3ef;
}

.blog-topic-list {
  border-top: 1px solid rgba(16, 44, 61, .2);
}

.blog-topic-list>a,
.blog-topic-list>.is-disabled {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem .25rem;
  border-bottom: 1px solid rgba(16, 44, 61, .2);
  color: var(--primary);
  transition: padding .25s ease, color .25s ease;
}

.blog-topic-list>a:hover {
  padding-left: 1rem;
  color: var(--success);
}

.blog-topic-list>a>span,
.blog-topic-list>.is-disabled>span {
  color: var(--success);
  font: .65rem/1 'DM Mono', monospace;
}

.blog-topic-list strong {
  display: block;
  font: 600 clamp(1.2rem, 2.2vw, 2rem)/1 'Manrope', sans-serif;
  letter-spacing: -.07em;
}

.blog-topic-list small {
  display: block;
  margin-top: .35rem;
  color: var(--text-muted);
  font-size: .75rem;
}

.blog-topic-list i {
  justify-self: end;
}

.blog-next-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  color: var(--primary);
  background: var(--secondary);
  overflow: hidden;
}

.blog-next-layout {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 3rem;
  align-items: end;
}

.blog-next-layout h2 {
  max-width: 670px;
  margin: .7rem 0 0;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: .92;
  letter-spacing: -.1em;
}

.blog-next-action {
  max-width: 100%;
  justify-self: end;
}

.blog-next-action p {
  margin: 0 0 1.4rem;
  color: rgba(16, 44, 61, .7);
  font-size: .8rem;
  line-height: 1.75;
}

@media (max-width: 991px) {
  body[data-page="blog.php"] main>.blog-hero {
    min-height: 620px;
  }

  .blog-hero-content,
  .blog-section-head,
  .blog-feature-card,
  .blog-prep-layout {
    grid-template-columns: 1fr;
  }

  .blog-hero-content {
    gap: 2rem;
  }

  .blog-hero-aside {
    display: none;
  }

  .blog-section-head {
    gap: 1.3rem;
  }

  .blog-section-head>p {
    justify-self: start;
    max-width: 520px;
  }

  

  

  

  .blog-reading-card-large {
    grid-column: span 8;
  }

  .blog-reading-card {
    grid-column: span 4;
  }

  .blog-reading-card-wide {
    grid-column: span 6;
  }

  .blog-next-layout {
    grid-template-columns: 80px 1fr;
  }

  .blog-next-action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 700px) {
  body[data-page="blog.php"] main>.blog-hero {
    min-height: 520px;
    padding: 5.4rem 0 2.8rem;
  }

  body[data-page="blog.php"] main>.blog-hero>.container {
    min-height: 0;
  }

  .blog-hero-content {
    margin-top: 3.5rem;
  }

  .blog-hero h1 {
    font-size: clamp(2.65rem, 11vw, 3.8rem);
  }

  .blog-hero-lead {
    display: none;
  }

  

  .blog-section-head h2 {
    font-size: 2.7rem;
  }

  

  

  

  

  .blog-reading-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: .8rem;
  }

  .blog-reading-grid {
    display: flex;
    flex-direction: column;
    gap: .7rem;
  }

  .blog-reading-card,
  .blog-reading-card-large,
  .blog-reading-card-wide {
    min-height: 295px;
  }

  .blog-reading-card-large {
    min-height: 360px;
  }

  .blog-reading-grid.is-list-view .blog-reading-card {
    display: grid;
    grid-template-columns: 30px 1fr 18px;
    gap: .65rem;
    align-items: start;
    padding: 1rem 0;
  }

  .blog-reading-grid.is-list-view .blog-reading-card>div {
    display: block;
  }

  .blog-reading-grid.is-list-view .blog-reading-card h3 {
    font-size: 1.1rem;
  }

  .blog-reading-grid.is-list-view .blog-reading-card p {
    display: none;
  }

  .blog-reading-grid.is-list-view .blog-reading-card .text-link {
    display: block;
    margin-top: .5rem;
    font-size: .67rem;
  }

  .blog-reading-grid.is-list-view .blog-card-meta {
    font-size: .52rem;
    line-height: 1.35;
  }

  .blog-topic-list a {
    grid-template-columns: 1fr 18px;
  }

  .blog-topic-list small {
    font-size: .68rem;
    line-height: 1.45;
  }

  

  

  

  

  

  

  .blog-next-layout {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  

  .blog-next-action {
    grid-column: auto;
    justify-self: start;
  }
}

/* Blog list view: compact editorial archive with a real thumbnail and a clearer reading order. */
.blog-reading-grid.is-list-view .blog-reading-card {
  grid-template-columns: 86px 38px minmax(190px, 270px) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: .85rem 1rem .85rem .35rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background .2s ease, padding-left .2s ease;
}

.blog-reading-grid.is-list-view .blog-reading-card:before {
  content: '';
  display: block;
  width: 86px;
  height: 66px;
  grid-column: 1;
  grid-row: 1;
  border-radius: .55rem;
  background: linear-gradient(145deg, rgba(16, 44, 61, .12), rgba(16, 44, 61, .56)), var(--blog-image) center/cover;
}

.blog-reading-grid.is-list-view .blog-reading-card:hover {
  padding-left: .75rem;
  background: #edf5f1;
}

.blog-reading-grid.is-list-view .blog-reading-card>.blog-card-meta {
  grid-column: 3;
  grid-row: 1;
  color: var(--success);
  line-height: 1.45;
}

.blog-reading-grid.is-list-view .blog-reading-card>div {
  grid-column: 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(170px, .72fr) auto;
  gap: 1.25rem;
  align-items: center;
}

.blog-reading-grid.is-list-view .blog-reading-card h3 {
  margin: 0;
  color: var(--primary);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.02;
}

.blog-reading-grid.is-list-view .blog-reading-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.55;
}

.blog-reading-grid.is-list-view .blog-reading-card .text-link {
  margin: 0;
  white-space: nowrap;
  color: var(--success);
  font-size: .68rem;
}

@media (max-width: 991px) and (min-width: 701px) {
  .blog-reading-grid.is-list-view .blog-reading-card {
    grid-template-columns: 76px 32px 180px minmax(0, 1fr);
  }

  .blog-reading-grid.is-list-view .blog-reading-card:before {
    width: 76px;
  }

  .blog-reading-grid.is-list-view .blog-reading-card>div {
    grid-template-columns: 1fr auto;
  }

  .blog-reading-grid.is-list-view .blog-reading-card p {
    display: none;
  }
}

@media (max-width: 700px) {

  .blog-reading-grid.is-list-view .blog-reading-card,
  .blog-reading-grid.is-list-view .blog-reading-card:hover {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: .2rem .8rem;
    align-items: start;
    padding: 1rem 0;
    background: var(--surface);
  }

  .blog-reading-grid.is-list-view .blog-reading-card:before {
    width: 62px;
    height: 82px;
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  

  .blog-reading-grid.is-list-view .blog-reading-card>.blog-card-meta {
    grid-column: 2;
    grid-row: 2;
    font-size: .52rem;
  }

  .blog-reading-grid.is-list-view .blog-reading-card>div {
    grid-column: 2;
    grid-row: 3;
    display: block;
  }

  .blog-reading-grid.is-list-view .blog-reading-card h3 {
    margin-top: .45rem;
    font-size: 1.08rem;
    line-height: 1.05;
  }

  .blog-reading-grid.is-list-view .blog-reading-card p {
    display: -webkit-box;
    margin-top: .35rem;
    overflow: hidden;
    font-size: .68rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .blog-reading-grid.is-list-view .blog-reading-card .text-link {
    display: inline-block;
    margin-top: .55rem;
    font-size: .64rem;
  }
}

/* Final list treatment: one quiet row — image, reading content, arrow. */
.blog-reading-grid.is-list-view .blog-reading-card,
.blog-reading-grid.is-list-view .blog-reading-card:hover {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: .35rem 1.35rem;
  align-items: start;
  padding: 1.1rem .4rem;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.blog-reading-grid.is-list-view .blog-reading-card:before {
  width: 96px;
  height: 78px;
  grid-column: 1;
  grid-row: 1 / span 2;
  border-radius: .55rem;
}

.blog-reading-grid.is-list-view .blog-reading-card>.blog-card-meta {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: var(--success);
  font-size: .58rem;
  line-height: 1.3;
}

.blog-reading-grid.is-list-view .blog-reading-card>div {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-width: 0;
  padding-right: 3.5rem;
}

.blog-reading-grid.is-list-view .blog-reading-card h3 {
  margin: .15rem 0 .35rem;
  color: var(--primary);
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  line-height: 1.05;
}

.blog-reading-grid.is-list-view .blog-reading-card p {
  max-width: 700px;
  margin: 0;
  color: var(--text-muted);
  font-size: .73rem;
  line-height: 1.55;
}

.blog-reading-grid.is-list-view .blog-reading-card .text-link {
  position: absolute;
  right: 0;
  bottom: .05rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(38, 143, 119, .4);
  border-radius: 50%;
  color: var(--success);
  font-size: 0;
}

.blog-reading-grid.is-list-view .blog-reading-card .text-link i {
  margin: 0;
  font-size: .85rem;
}

@media (max-width: 700px) {

  .blog-reading-grid.is-list-view .blog-reading-card,
  .blog-reading-grid.is-list-view .blog-reading-card:hover {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: .25rem .8rem;
    padding: 1rem 0;
  }

  .blog-reading-grid.is-list-view .blog-reading-card:before {
    width: 62px;
    height: 82px;
  }

  .blog-reading-grid.is-list-view .blog-reading-card>.blog-card-meta {
    font-size: .5rem;
  }

  .blog-reading-grid.is-list-view .blog-reading-card>div {
    padding-right: 2.4rem;
  }

  .blog-reading-grid.is-list-view .blog-reading-card h3 {
    font-size: 1.05rem;
  }

  .blog-reading-grid.is-list-view .blog-reading-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: .67rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .blog-reading-grid.is-list-view .blog-reading-card .text-link {
    width: 1.5rem;
    height: 1.5rem;
  }

  .blog-reading-grid.is-list-view .blog-reading-card .text-link i {
    font-size: .7rem;
  }
}

/* ACL article: a focused clinical editorial system with distinct reading sections. */

.acl-signal-section,
.acl-assessment-section,
.acl-recovery-section,
.acl-takeaways-section {
  padding: clamp(4.7rem, 8vw, 7.5rem) 0;
}

.acl-signal-section {
  background: var(--surface);
}

.acl-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 3.3rem;
}

.acl-section-head .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.acl-section-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--primary);
  font: 600 clamp(2.25rem, 4.5vw, 4.7rem)/.93 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.acl-section-head>p {
  max-width: 350px;
  justify-self: end;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.acl-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}

.acl-signal-grid article {
  min-height: 270px;
  padding: 1.3rem 1.5rem 1.5rem 0;
  border-right: 1px solid var(--border);
}

.acl-signal-grid article:not(:first-child) {
  padding-left: 1.5rem;
}

.acl-signal-grid article:last-child {
  border-right: 0;
}

.acl-signal-grid span,
.acl-assessment-steps>div>span,
.acl-recovery-steps span,
.acl-takeaways-list span {
  color: var(--success);
  font: .63rem/1 'DM Mono', monospace;
}

.acl-signal-grid i {
  display: block;
  margin-top: 3.8rem;
  color: var(--success);
  font-size: 1.25rem;
}

.acl-signal-grid h3 {
  margin: .7rem 0 .45rem;
  color: var(--primary);
  font-size: 1.3rem;
  letter-spacing: -.06em;
}

.acl-signal-grid p {
  max-width: 220px;
  margin: 0;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.7;
}

.acl-assessment-section {
  color: var(--white);
  background: var(--primary);
}

.acl-assessment-section .acl-section-head h2 {
  color: var(--white);
}

.acl-assessment-section .acl-section-head>p {
  color: rgba(255, 255, 255, .65);
}

.acl-assessment-section .acl-section-head .eyebrow {
  color: var(--secondary);
}

.acl-assessment-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1rem;
}

.acl-assessment-steps {
  border-top: 1px solid rgba(117, 212, 194, .4);
}

.acl-assessment-steps>div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 1rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.acl-assessment-steps strong {
  display: block;
  color: var(--white);
  font-size: 1.15rem;
  letter-spacing: -.04em;
}

.acl-assessment-steps p {
  max-width: 450px;
  margin: .3rem 0 0;
  color: rgba(255, 255, 255, .63);
  font-size: .75rem;
  line-height: 1.65;
}

.acl-assessment-note {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  padding: 1.6rem;
  border: 1px solid rgba(117, 212, 194, .38);
  border-radius: 1rem;
  background: rgba(117, 212, 194, .08);
}

.acl-assessment-note i {
  color: var(--secondary);
  font-size: 1.4rem;
}

.acl-assessment-note p {
  max-width: 280px;
  margin: auto 0;
  color: var(--white);
  font: 600 clamp(1.4rem, 2.2vw, 2rem)/1.05 'Manrope', sans-serif;
  letter-spacing: -.07em;
}

.acl-assessment-note span {
  color: var(--secondary);
  font: .6rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
}

.acl-recovery-section {
  background: #f4f8f6;
}

.acl-recovery-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 1rem;
}

.acl-recovery-image {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.4rem;
  border-radius: 1rem;
  color: var(--white);
  background: linear-gradient(180deg, rgba(4, 21, 31, .1), rgba(4, 21, 31, .88)), var(--acl-image) center/cover;
}

.acl-recovery-image>span {
  color: var(--secondary);
  font: .6rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
}

.acl-recovery-image strong {
  font: 600 clamp(2.5rem, 4.5vw, 4.5rem)/.9 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.acl-recovery-image strong em {
  color: var(--secondary);
  font-style: normal;
}

.acl-recovery-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--white);
}

.acl-recovery-steps>div {
  padding: 1.3rem;
  border-right: 1px solid var(--border);
}

.acl-recovery-steps>div:last-child {
  border-right: 0;
}

.acl-recovery-steps strong {
  display: block;
  margin-top: 5rem;
  color: var(--primary);
  font-size: 1.1rem;
  letter-spacing: -.05em;
}

.acl-recovery-steps p {
  margin: .45rem 0 0;
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.6;
}

.acl-takeaways-section {
  background: #e8f3ef;
}

.acl-takeaways-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1rem;
}

.acl-takeaways-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.acl-takeaways-list li {
  min-height: 145px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: .8rem;
  padding: 1.25rem;
  border-radius: .8rem;
  background: var(--white);
}

.acl-takeaways-list p {
  margin: 0;
  color: var(--primary);
  font-size: .82rem;
  line-height: 1.55;
}

.acl-safety-note {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  padding: 1.5rem;
  border-radius: .9rem;
  color: var(--white);
  background: var(--primary);
}

.acl-safety-note i {
  color: var(--secondary);
  font-size: 1.4rem;
}

.acl-safety-note strong {
  margin-top: auto;
  font: 600 1.4rem/1 'Manrope', sans-serif;
  letter-spacing: -.06em;
}

.acl-safety-note p {
  max-width: 280px;
  margin: .5rem 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: .75rem;
  line-height: 1.65;
}

.acl-next-section {
  padding: clamp(4.4rem, 7vw, 6.5rem) 0;
  color: var(--primary);
  background: var(--secondary);
}

.acl-next-layout {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 3rem;
  align-items: end;
}

.acl-next-layout h2 {
  max-width: 620px;
  margin: .7rem 0 0;
  font-size: clamp(2.7rem, 5vw, 5rem);
  line-height: .92;
  letter-spacing: -.1em;
}

.acl-next-action {
  max-width: 100%;
  justify-self: end;
}

.acl-next-action p {
  margin: 0 0 1.4rem;
  color: rgba(16, 44, 61, .7);
  font-size: .8rem;
  line-height: 1.75;
}

.acl-disclaimer {
  display: block;
  margin-top: 1.2rem;
  color: rgba(16, 44, 61, .58);
  font-size: .62rem;
  line-height: 1.5;
}

.acl-disclaimer strong {
  display: block;
  color: var(--primary);
}

@media (max-width: 991px) {

  .acl-hero-content,
  .acl-section-head,
  .acl-intro-layout,
  .acl-assessment-layout,
  .acl-recovery-layout,
  .acl-takeaways-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  

  .acl-section-head>p {
    justify-self: start;
    max-width: 520px;
  }

  

  

  

  

  .acl-assessment-note {
    min-height: 250px;
  }

  .acl-recovery-steps {
    min-height: 260px;
  }

  .acl-next-layout {
    grid-template-columns: 80px 1fr;
  }

  .acl-next-action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 700px) {
  

  

  

  

  

  .acl-section-head h2 {
    font-size: 2.7rem;
  }

  

  

  

  .acl-signal-grid {
    grid-template-columns: 1fr;
  }

  .acl-signal-grid article,
  .acl-signal-grid article:not(:first-child) {
    min-height: 0;
    padding: 1.2rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .acl-signal-grid article:last-child {
    border-bottom: 0;
  }

  .acl-signal-grid i {
    margin-top: 1.7rem;
  }

  .acl-assessment-steps>div {
    grid-template-columns: 32px 1fr;
  }

  .acl-assessment-note {
    min-height: 230px;
  }

  .acl-recovery-image {
    min-height: 320px;
  }

  .acl-recovery-steps {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .acl-recovery-steps>div,
  .acl-recovery-steps>div:last-child {
    min-height: 145px;
    padding: 1.2rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .acl-recovery-steps>div:last-child {
    border-bottom: 0;
  }

  .acl-recovery-steps strong {
    margin-top: 2.4rem;
  }

  .acl-takeaways-list {
    grid-template-columns: 1fr;
  }

  .acl-takeaways-list li {
    min-height: 0;
  }

  .acl-safety-note {
    min-height: 220px;
  }

  .acl-next-layout {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  

  .acl-next-action {
    grid-column: auto;
    justify-self: start;
  }
}

/* ACL detail page: one continuous reading surface instead of multiple promotional bands. */

/* ACL article finish: a strong recommendation followed by a calm comment space. */

/* Remove decorative orbit/side badges from every hero; keep the hero message as the focus. */
.home-hero-aside,
.blog-hero-aside,
.specialities-hero-orbit,
.treatments-hero-aside,
.acl-hero-orbit {
  display: none !important;
}

.blog-hero-content,
.specialities-hero-content,
.treatments-hero-content,
.acl-hero-content {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Grid view: fill the reading stage and keep the overlay copy proportionate to each card. */
@media (min-width: 992px) {
  .blog-reading-grid:not(.is-list-view) .blog-reading-card-large {
    grid-column: span 7;
    min-height: 470px;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card {
    grid-column: span 5;
    min-height: 226px;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card-wide {
    grid-column: span 7;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card-dark {
    grid-column: span 5;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card-large h3 {
    max-width: 590px;
    font-size: clamp(2rem, 3.15vw, 3.35rem);
    line-height: .94;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card h3 {
    max-width: 390px;
    font-size: clamp(1.25rem, 1.8vw, 1.85rem);
    line-height: .98;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card p {
    max-width: 390px;
    font-size: .72rem;
  }
}

@media (max-width: 991px) and (min-width: 701px) {
  .blog-reading-grid:not(.is-list-view) .blog-reading-card-large {
    grid-column: span 8;
    min-height: 470px;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card {
    grid-column: span 4;
    min-height: 226px;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card-wide {
    grid-column: span 6;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card-dark {
    grid-column: span 6;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card-large h3 {
    font-size: 2.6rem;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card h3 {
    font-size: 1.35rem;
  }
}

@media (min-width: 992px) {

  /* The generic card rule also matches the featured card; keep its wider first column. */
  .blog-reading-grid:not(.is-list-view) .blog-reading-card.blog-reading-card-large {
    grid-column: span 7;
  }
}

/* Keep each grid card's eyebrow and heading in one compact text stack. */
.blog-reading-grid:not(.is-list-view) .blog-reading-card>div {
  margin-top: auto;
  padding-top: 1rem;
}

.blog-reading-grid:not(.is-list-view) .blog-reading-card>div>.blog-card-meta {
  display: block;
  margin-bottom: .55rem;
}

.blog-reading-grid:not(.is-list-view) .blog-reading-card>div h3 {
  margin-top: 0;
}

/* Match the same compact content stack when the collection is in list mode. */
.blog-reading-grid.is-list-view .blog-reading-card>div>.blog-card-meta {
  display: block;
  margin-bottom: .35rem;
  color: var(--success);
  font-size: .58rem;
  line-height: 1.3;
}

.blog-reading-grid.is-list-view .blog-reading-card>div h3 {
  margin-top: 0;
}

@media (max-width: 700px) {
  .blog-reading-grid:not(.is-list-view) .blog-reading-card>div {
    padding-top: .7rem;
  }

  .blog-reading-grid:not(.is-list-view) .blog-reading-card>div>.blog-card-meta {
    margin-bottom: .4rem;
    font-size: .52rem;
  }

  .blog-reading-grid.is-list-view .blog-reading-card>div>.blog-card-meta {
    margin-bottom: .25rem;
    font-size: .5rem;
  }
}

/* Contact page: a clear route map, structured visit information and a focused message path. */
body[data-page="contact.php"] main>.contact-hero {
  min-height: 620px;
  padding: 7.4rem 0 3.6rem;
  background-position: center 48%;
}

body[data-page="contact.php"] main>.contact-hero:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 21, 31, .95), rgba(5, 27, 38, .72) 55%, rgba(5, 27, 38, .32)), linear-gradient(0deg, rgba(4, 21, 31, .42), transparent 52%);
  pointer-events: none;
}

.contact-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 4rem;
  align-items: end;
  padding-bottom: 2.2rem;
}

.contact-hero-content h1 {
  max-width: 800px;
  margin: .75rem 0 1rem;
  font-size: clamp(2rem, 3.2vw, 3.4rem) !important;
  line-height: .93 !important;
  letter-spacing: -.105em;
}

.contact-hero-content h1 em {
  color: var(--secondary);
  font-weight: 500;
}

.contact-hero-lead {
  max-width: 610px !important;
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: .94rem !important;
  line-height: 1.75 !important;
}

.contact-visit-section {
  background: var(--surface);
}

.contact-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
}

.contact-section-head .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.contact-section-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--primary);
  font: 600 clamp(2.25rem, 4.5vw, 4.7rem)/.93 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.contact-section-head>p {
  max-width: 350px;
  justify-self: end;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.contact-visit-layout {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 510px;
  gap: 1rem;
}

.contact-map-card {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border-radius: 1rem;
  background: #d9ebe6;
  isolation: isolate;
}

.contact-map-card:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(218, 237, 232, .96), rgba(232, 245, 240, .7));
}

.contact-map-grid {
  position: absolute;
  inset: -15% -5%;
  opacity: .55;
  background: repeating-linear-gradient(28deg, transparent 0 52px, rgba(16, 44, 61, .09) 53px 55px), repeating-linear-gradient(118deg, transparent 0 74px, rgba(16, 44, 61, .07) 75px 77px);
  transform: rotate(-7deg);
}

.contact-map-road {
  position: absolute;
  border: 7px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 0 1px rgba(16, 44, 61, .1);
}

.contact-map-road-one {
  width: 130%;
  height: 45%;
  left: -20%;
  top: 31%;
}

.contact-map-road-two {
  width: 105%;
  height: 28%;
  left: 8%;
  top: -4%;
  border-width: 5px;
  transform: rotate(31deg);
}

.contact-map-pin {
  position: absolute;
  left: 51%;
  top: 48%;
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border: 8px solid rgba(117, 212, 194, .36);
  border-radius: 50%;
  color: var(--white);
  background: var(--primary);
  box-shadow: 0 12px 25px rgba(16, 44, 61, .2);
  transform: translate(-50%, -50%);
}

.contact-map-pin i {
  font-size: 1.15rem;
}

.contact-map-label {
  position: absolute;
  left: 1.4rem;
  bottom: 1.35rem;
  display: grid;
  gap: .25rem;
  padding: .9rem 1rem;
  border-left: 2px solid var(--success);
  color: var(--primary);
  background: rgba(255, 255, 255, .76);
  backdrop-filter: blur(4px);
}

.contact-map-label strong {
  font: 600 1.05rem/1 'Manrope', sans-serif;
  letter-spacing: -.05em;
}

.contact-map-label small,
.contact-map-coord {
  color: var(--text-muted);
  font: .58rem/1.3 'DM Mono', monospace;
  letter-spacing: .1em;
}

.contact-map-coord {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  color: rgba(16, 44, 61, .64);
}

.contact-visit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.7rem, 4vw, 3.25rem);
  border-radius: 1rem;
  color: var(--white);
  background: var(--primary);
}

.contact-visit-card-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: var(--secondary);
  font: .59rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
}

.contact-visit-card-top i {
  font-size: 1.1rem;
}

.contact-visit-card h3 {
  margin: 5.2rem 0 1rem;
  color: var(--white);
  font: 600 clamp(2.1rem, 3.6vw, 3.7rem)/.92 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.contact-visit-card h3 em {
  color: var(--secondary);
  font-style: normal;
  font-weight: 500;
}

.contact-visit-card address {
  max-width: 310px;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: .79rem;
  line-height: 1.7;
}

.contact-visit-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  margin: auto 0 1.3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.contact-visit-facts>div+div {
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.contact-visit-facts span {
  display: block;
  color: rgba(255, 255, 255, .55);
  font: .55rem/1.2 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contact-visit-facts strong {
  display: block;
  margin-top: .55rem;
  color: var(--white);
  font-size: .8rem;
}

.contact-visit-card>p {
  max-width: 100%;
  margin: 0 0 1.4rem;
  color: rgba(255, 255, 255, .63);
  font-size: .74rem;
  line-height: 1.65;
}

.contact-visit-card .contact-button-row {
  align-items: flex-start;
  flex-direction: column;
  gap: 1rem;
}

.contact-visit-card .text-link {
  color: var(--secondary);
}

.contact-message-section {
  color: var(--white);
  background: #102c3d;
}

.contact-section-head-dark .eyebrow {
  color: var(--secondary);
}

.contact-section-head-dark h2 {
  color: var(--white);
}

.contact-section-head-dark>p {
  color: rgba(255, 255, 255, .64);
}

.contact-message-layout {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: clamp(1rem, 4vw, 4rem);
  align-items: stretch;
}

.contact-message-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 485px;
  padding: 1.6rem;
  border: 1px solid rgba(117, 212, 194, .35);
  border-radius: .95rem;
  background: linear-gradient(160deg, rgba(117, 212, 194, .14), rgba(117, 212, 194, .03));
}

.contact-message-note>i {
  margin-top: auto;
  color: var(--secondary);
  font-size: 1.35rem;
}

.contact-message-note h3 {
  max-width: 250px;
  margin: .85rem 0 .65rem;
  color: var(--white);
  font: 600 clamp(1.7rem, 2.7vw, 2.6rem)/.98 'Manrope', sans-serif;
  letter-spacing: -.08em;
}

.contact-message-note p {
  max-width: 270px;
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: .74rem;
  line-height: 1.7;
}

.contact-message-note .text-link {
  margin-top: 1.4rem;
  color: var(--secondary);
}

.contact-form-card {
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 0;
  border-radius: .95rem;
  background: var(--white);
  box-shadow: none;
}

.contact-form-card .appointment-form label {
  color: var(--primary);
  align-items: center;
}

.contact-form-card .appointment-form input,
.contact-form-card .appointment-form textarea {
  background: #f7faf8;
}

.contact-form-card .appointment-form input:focus,
.contact-form-card .appointment-form textarea:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(38, 143, 119, .12);
}

.contact-routes-section {
  background: var(--surface-soft);
}

.contact-routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
}

.contact-route-card {
  position: relative;
  display: flex;
  min-height: 355px;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(16, 44, 61, .12);
  border-radius: .85rem;
  color: var(--primary);
  background: var(--white);
  transition: transform .25s ease, box-shadow .25s ease;
}

.contact-route-card:hover {
  color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(16, 44, 61, .1);
}

.contact-route-card:after {
  content: '';
  position: absolute;
  right: -35px;
  bottom: -55px;
  width: 145px;
  height: 145px;
  border: 1px solid rgba(16, 44, 61, .12);
  border-radius: 50%;
}

.contact-route-card-primary {
  color: var(--white);
  border-color: var(--primary);
  background: var(--primary);
}

.contact-route-card-primary:hover {
  color: var(--white);
}

.contact-route-card>span {
  color: var(--success);
  font: .58rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
}

.contact-route-card-primary>span,
.contact-route-card-primary>i,
.contact-route-card-primary b {
  color: var(--secondary);
}

.contact-route-card>i {
  margin-top: 3.7rem;
  color: var(--success);
  font-size: 1.3rem;
}

.contact-route-card strong {
  max-width: 260px;
  margin-top: .75rem;
  font: 600 clamp(1.45rem, 2.3vw, 2.25rem)/.96 'Manrope', sans-serif;
  letter-spacing: -.08em;
}

.contact-route-card p {
  max-width: 285px;
  margin: .7rem 0 0;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.7;
}

.contact-route-card-primary p {
  color: rgba(255, 255, 255, .62);
}

.contact-route-card b {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: auto;
  color: var(--success);
  font-size: .72rem;
}

.contact-guidance-section {
  background: #e6f2ee;
}

.contact-guidance-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 3rem 7rem;
  align-items: start;
}

.contact-guidance-lead .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.contact-guidance-lead h2 {
  max-width: 520px;
  margin: 0 0 1.1rem;
  color: var(--primary);
  font: 600 clamp(2.4rem, 4.8vw, 4.8rem)/.92 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.contact-guidance-lead>p:last-child {
  max-width: 360px;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.contact-guidance-rail {
  border-top: 1px solid rgba(16, 44, 61, .22);
}

.contact-guidance-rail>div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(16, 44, 61, .15);
}

.contact-guidance-rail span {
  color: var(--success);
  font: .62rem/1 'DM Mono', monospace;
}

.contact-guidance-rail strong {
  color: var(--primary);
  font: 600 .95rem/1.2 'Manrope', sans-serif;
  letter-spacing: -.04em;
}

.contact-guidance-rail p {
  grid-column: 1;
  max-width: 430px;
  margin: -.35rem 0 0;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.65;
}

.contact-guidance-layout>.text-link {
  grid-column: 2;
  color: var(--success);
}

.contact-next-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  color: var(--primary);
  background: var(--secondary);
}

.contact-next-layout {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 3rem;
  align-items: end;
}

.contact-next-layout h2 {
  max-width: 620px;
  margin: .75rem 0 0;
  color: var(--primary);
  font: 600 clamp(2.8rem, 5vw, 5.3rem)/.9 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.contact-next-action {
  max-width: 100%;
  justify-self: end;
}

.contact-next-action p {
  margin: 0 0 1.4rem;
  color: rgba(16, 44, 61, .7);
  font-size: .8rem;
  line-height: 1.75;
}

@media (max-width: 991px) {

  .contact-hero-content,
  .contact-section-head,
  .contact-visit-layout,
  .contact-message-layout,
  .contact-guidance-layout,
  .contact-next-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .contact-section-head>p {
    justify-self: start;
    max-width: 520px;
  }

  

  .contact-visit-layout {
    min-height: 0;
  }

  .contact-map-card {
    min-height: 390px;
  }

  .contact-visit-card {
    min-height: 500px;
  }

  .contact-message-note {
    min-height: 260px;
  }

  .contact-message-note>i {
    margin-top: 4rem;
  }

  .contact-routes-grid {
    grid-template-columns: 1fr;
  }

  .contact-route-card {
    min-height: 260px;
  }

  .contact-route-card>i {
    margin-top: 2.5rem;
  }

  .contact-guidance-layout>.text-link {
    grid-column: auto;
  }

  .contact-next-action {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  body[data-page="contact.php"] main>.contact-hero {
    min-height: 520px;
    padding: 5.4rem 0 2.8rem;
  }

  .contact-hero-content {
    padding-bottom: 1.4rem;
  }

  .contact-hero-content h1 {
    font-size: clamp(1.85rem, 8.5vw, 2.6rem) !important;
  }

  .contact-hero-lead {
    display: none;
  }

  

  .contact-section-head h2 {
    font-size: 2.7rem;
  }

  .contact-section-head {
    margin-bottom: 2rem;
  }

  .contact-map-card {
    min-height: 300px;
  }

  .contact-map-coord {
    top: 1rem;
    right: 1rem;
    font-size: .5rem;
  }

  .contact-map-pin {
    width: 3.3rem;
    height: 3.3rem;
  }

  .contact-visit-card {
    min-height: 0;
    padding: 1.35rem;
  }

  .contact-visit-card h3 {
    margin-top: 3.2rem;
    font-size: 2.4rem;
  }

  .contact-visit-facts {
    margin-top: 2.5rem;
  }

  .contact-message-note {
    min-height: 235px;
    padding: 1.3rem;
  }

  .contact-message-note>i {
    margin-top: 2.2rem;
  }

  .contact-form-card {
    padding: 1.2rem;
  }

  .contact-route-card {
    min-height: 235px;
    padding: 1.2rem;
  }

  .contact-route-card>i {
    margin-top: 1.7rem;
  }

  .contact-route-card strong {
    font-size: 1.65rem;
  }

  .contact-guidance-layout {
    gap: 2.3rem;
  }

  .contact-guidance-lead h2 {
    font-size: 3rem;
  }

  .contact-next-layout {
    gap: 1.2rem;
  }

  

  .contact-next-layout h2 {
    font-size: 3.3rem;
  }
}

/* Appointment page: turn the form into the centre of a calm, step-by-step experience. */
body[data-page="appointment.php"] main>.appointment-hero {
  min-height: 620px;
  padding: 7.4rem 0 3.6rem;
  background-position: center 45%;
}

.appointment-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 4rem;
  align-items: end;
  padding-bottom: 2.2rem;
}

.appointment-hero-content h1 {
  max-width: 800px;
  margin: .75rem 0 1rem;
  font-size: clamp(2rem, 3.2vw, 3.4rem) !important;
  line-height: .93 !important;
  letter-spacing: -.105em;
}

.appointment-hero-content h1 em {
  color: var(--secondary);
  font-weight: 500;
}

.appointment-hero-lead {
  max-width: 600px !important;
  margin: 0 0 1.7rem;
  color: rgba(255, 255, 255, .74);
  font-size: .94rem !important;
  line-height: 1.75 !important;
}

.appointment-request-section {
  background: var(--surface);
}

.appointment-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
}

.appointment-section-head .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.appointment-section-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--primary);
  font: 600 clamp(2.25rem, 4.5vw, 4.7rem)/.93 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.appointment-section-head>p {
  max-width: 350px;
  justify-self: end;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.appointment-request-layout {
  display: grid;
  grid-template-columns: .68fr 1.32fr;
  gap: clamp(1rem, 4vw, 4rem);
  align-items: stretch;
}

.appointment-request-aside {
  display: flex;
  min-height: 570px;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.45rem;
  border-radius: .95rem;
  color: var(--white);
  background: var(--primary);
}

.appointment-request-aside>i {
  margin-top: auto;
  color: var(--secondary);
  font-size: 1.25rem;
}

.appointment-request-aside h3 {
  max-width: 270px;
  margin: .9rem 0 .7rem;
  color: var(--white);
  font: 600 clamp(1.9rem, 3vw, 3rem)/.95 'Manrope', sans-serif;
  letter-spacing: -.09em;
}

.appointment-request-aside p {
  max-width: 285px;
  margin: 0;
  color: rgba(255, 255, 255, .63);
  font-size: .76rem;
  line-height: 1.7;
}

.appointment-request-aside p strong {
  color: var(--secondary);
}

.appointment-request-aside .text-link {
  margin-top: 1.4rem;
  color: var(--secondary);
}

.appointment-form-card {
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border: 1px solid rgba(16, 44, 61, .08);
  border-radius: .95rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.appointment-form-card .appointment-form label {
  color: var(--primary);
  align-items: center;
}

.appointment-form-card .appointment-form input,
.appointment-form-card .appointment-form select,
.appointment-form-card .appointment-form textarea {
  background: #f7faf8;
}

.appointment-form-card .appointment-form input:focus,
.appointment-form-card .appointment-form select:focus,
.appointment-form-card .appointment-form textarea:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(38, 143, 119, .12);
}

.appointment-form-card .appointment-form textarea {
  min-height: 140px;
}

.appointment-prepare-section {
  color: var(--white);
  background: #102c3d;
}

.appointment-section-head-light .eyebrow {
  color: var(--secondary);
}

.appointment-section-head-light h2 {
  color: var(--white);
}

.appointment-section-head-light>p {
  color: rgba(255, 255, 255, .64);
}

.appointment-prep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(117, 212, 194, .45);
}

.appointment-prep-grid article {
  min-height: 300px;
  padding: 1.35rem 1.35rem 1.35rem 0;
  border-right: 1px solid rgba(255, 255, 255, .16);
}

.appointment-prep-grid article+article {
  padding-left: 1.35rem;
}

.appointment-prep-grid article:last-child {
  border-right: 0;
}

.appointment-prep-grid span {
  color: var(--secondary);
  font: .59rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
}

.appointment-prep-grid i {
  display: block;
  margin-top: 2.2rem;
  color: var(--secondary);
  font-size: 1.25rem;
}

.appointment-prep-grid h3 {
  margin: .8rem 0 .55rem;
  color: var(--white);
  font: 600 1.45rem/.98 'Manrope', sans-serif;
  letter-spacing: -.07em;
}

.appointment-prep-grid p {
  max-width: 260px;
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: .75rem;
  line-height: 1.7;
}

.appointment-privacy-section {
  background: #e6f2ee;
}

.appointment-privacy-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 8vw, 8rem);
  align-items: center;
}

.appointment-privacy-lead .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.appointment-privacy-lead h2 {
  max-width: 650px;
  margin: 0 0 1.1rem;
  color: var(--primary);
  font: 600 clamp(2.5rem, 5vw, 5rem)/.92 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.appointment-privacy-lead>p:last-child {
  max-width: 430px;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.appointment-privacy-card {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem;
  border: 1px solid rgba(16, 44, 61, .16);
  border-radius: .95rem;
  color: var(--white);
  background: var(--primary);
}

.appointment-privacy-card>i {
  color: var(--secondary);
  font-size: 1.25rem;
}

.appointment-privacy-card strong {
  max-width: 280px;
  margin-top: auto;
  color: var(--white);
  font: 600 1.55rem/.98 'Manrope', sans-serif;
  letter-spacing: -.07em;
}

.appointment-privacy-card p {
  max-width: 300px;
  margin: .65rem 0 1.25rem;
  color: rgba(255, 255, 255, .62);
  font-size: .74rem;
  line-height: 1.7;
}

.appointment-privacy-card .text-link {
  color: var(--secondary);
}

.appointment-steps-section {
  background: var(--surface);
}

.appointment-steps-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--primary);
}

.appointment-steps-line:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 16.6%;
  right: 16.6%;
  border-top: 1px dashed rgba(38, 143, 119, .45);
}

.appointment-steps-line>div {
  /* min-height: 275px; */
  padding: 1.3rem 1.35rem 1.3rem 0;
  border-right: 1px solid var(--border);
}

.appointment-steps-line>div+div {
  padding-left: 1.35rem;
}

.appointment-steps-line>div:last-child {
  border-right: 0;
}

.appointment-steps-line span {
  color: var(--success);
  font: .62rem/1 'DM Mono', monospace;
  letter-spacing: .1em;
}

.appointment-steps-line i {
  display: block;
  margin-top: 1.5rem;
  color: var(--success);
  font-size: 1.2rem;
}

.appointment-steps-line h3 {
  margin: .75rem 0 .5rem;
  color: var(--primary);
  font: 600 1.4rem/1 'Manrope', sans-serif;
  letter-spacing: -.06em;
}

.appointment-steps-line p {
  max-width: 240px;
  margin: 0;
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.7;
}

.appointment-next-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  color: var(--primary);
  background: #f0c58e;
}

.appointment-next-layout {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 3rem;
  align-items: end;
}

.appointment-next-layout h2 {
  max-width: 650px;
  margin: .75rem 0 0;
  color: var(--primary);
  font: 600 clamp(2.7rem, 4.8vw, 5rem)/.92 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.appointment-next-action {
  max-width: 100%;
  justify-self: end;
}

.appointment-next-action p {
  margin: 0 0 1.35rem;
  color: rgba(16, 44, 61, .72);
  font-size: .8rem;
  line-height: 1.75;
}

@media (max-width: 991px) {

  .appointment-hero-content,
  .appointment-section-head,
  .appointment-request-layout,
  .appointment-privacy-layout,
  .appointment-next-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .appointment-section-head>p {
    justify-self: start;
    max-width: 520px;
  }

  

  .appointment-request-aside {
    min-height: 260px;
  }

  .appointment-request-aside>i {
    margin-top: 3rem;
  }

  .appointment-prep-grid {
    grid-template-columns: 1fr;
  }

  .appointment-prep-grid article,
  .appointment-prep-grid article+article {
    min-height: 200px;
    padding: 1.25rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }

  .appointment-prep-grid article:last-child {
    border-bottom: 0;
  }

  .appointment-prep-grid i {
    margin-top: 2.4rem;
  }

  .appointment-next-action {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  body[data-page="appointment.php"] main>.appointment-hero {
    min-height: 520px;
    padding: 5.4rem 0 2.8rem;
  }

  .appointment-hero-content h1 {
    font-size: clamp(1.85rem, 8.5vw, 2.6rem) !important;
  }

  .appointment-hero-lead {
    display: none;
  }

  .appointment-hero-content .btn {
    margin-top: .55rem;
  }

  .appointment-section-head h2 {
    font-size: 2.7rem;
  }

  .appointment-section-head {
    margin-bottom: 2rem;
  }

  .appointment-request-aside {
    min-height: 220px;
    padding: 1.25rem;
  }

  .appointment-request-aside>i {
    margin-top: 2rem;
  }

  .appointment-request-aside h3 {
    font-size: 2.15rem;
  }

  .appointment-form-card {
    padding: 1.2rem;
  }

  .appointment-form-card .appointment-form textarea {
    min-height: 120px;
  }

  .appointment-prep-grid article,
  .appointment-prep-grid article+article {
    min-height: 185px;
  }

  .appointment-privacy-layout {
    gap: 2.2rem;
  }

  .appointment-privacy-lead h2 {
    font-size: 3rem;
  }

  .appointment-privacy-card {
    min-height: 270px;
    padding: 1.3rem;
  }

  .appointment-steps-line {
    grid-template-columns: 1fr;
  }

  .appointment-steps-line:before {
    top: 16.6%;
    bottom: 16.6%;
    left: -1px;
    right: auto;
    border-top: 0;
    border-left: 1px dashed rgba(38, 143, 119, .45);
  }

  .appointment-steps-line>div,
  .appointment-steps-line>div+div {
    min-height: 175px;
    padding: 1.2rem 0 1.2rem 2rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .appointment-steps-line>div:last-child {
    border-bottom: 0;
  }

  .appointment-steps-line i {
    margin-top: 2rem;
  }

  .appointment-next-layout {
    gap: 1.2rem;
  }

  

  .appointment-next-layout h2 {
    font-size: 3.15rem;
  }
}

/* FAQ page: an editorial question index with topic routes and a clear safety boundary. */
body[data-page="faqs.php"] main>.faqs-hero {
  min-height: 620px;
  padding: 7.4rem 0 3.6rem;
  background-position: center 42%;
}

.faqs-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 4rem;
  align-items: end;
  padding-bottom: 2.2rem;
}

.faqs-hero-content h1 {
  max-width: 800px;
  margin: .75rem 0 1rem;
  font-size: clamp(2rem, 3.2vw, 3.4rem) !important;
  line-height: .93 !important;
  letter-spacing: -.105em;
}

.faqs-hero-content h1 em {
  color: var(--secondary);
  font-weight: 500;
}

.faqs-hero-lead {
  max-width: 600px !important;
  margin: 0 0 1.7rem;
  color: rgba(255, 255, 255, .74);
  font-size: .94rem !important;
  line-height: 1.75 !important;
}

.faqs-hero-card {
  display: flex;
  min-height: 225px;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  border: 1px solid rgba(117, 212, 194, .52);
  border-radius: .85rem;
  color: var(--white);
  background: rgba(4, 21, 31, .2);
  backdrop-filter: blur(4px);
}

.faqs-hero-card>span,
.faqs-hero-card small {
  color: var(--secondary);
  font: .59rem/1.35 'DM Mono', monospace;
  letter-spacing: .13em;
}

.faqs-hero-card>i {
  margin-top: auto;
  color: var(--secondary);
  font-size: 1.3rem;
}

.faqs-hero-card strong {
  max-width: 205px;
  margin-top: .8rem;
  color: var(--white);
  font: 600 1.5rem/.96 'Manrope', sans-serif;
  letter-spacing: -.08em;
}

.faqs-hero-card small {
  margin-top: 2.1rem;
  color: rgba(255, 255, 255, .6);
  font-size: .52rem;
}

.faq-questions-section {
  background: var(--surface);
}

.faq-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
}

.faq-section-head .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.faq-section-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--primary);
  font: 600 clamp(2.25rem, 4.5vw, 4.7rem)/.93 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.faq-section-head>p {
  max-width: 350px;
  justify-self: end;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.faq-question-layout {
  display: grid;
  grid-template-columns: .58fr 1.42fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.faq-question-rail {
  position: sticky;
  top: 110px;
  display: flex;
  min-height: 470px;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.4rem;
  border-radius: .95rem;
  color: var(--white);
  background: var(--primary);
}

.faq-question-rail>span {
  color: var(--secondary);
  font: .62rem/1 'DM Mono', monospace;
  letter-spacing: .14em;
}

.faq-question-rail strong {
  margin-top: 4rem;
  color: var(--secondary);
  font: 600 clamp(5rem, 10vw, 8.5rem)/.78 'Manrope', sans-serif;
  letter-spacing: -.14em;
}

.faq-question-rail small {
  margin-top: 0;
  color: rgba(255, 255, 255, .6);
  font: .58rem/1.5 'DM Mono', monospace;
  letter-spacing: .11em;
}

.faq-question-rail .text-link {
  margin-top: auto;
  color: var(--secondary);
}

.faq-questions-section .faq-list {
  border-top-color: var(--primary);
}

.faq-questions-section .faq-item {
  border-bottom-color: var(--border);
}

.faq-questions-section .faq-trigger {
  min-height: 78px;
  padding: 1.15rem 0;
  font-size: 1.02rem;
}

.faq-questions-section .faq-trigger>span {
  flex: 0 0 30px;
  color: var(--success);
  font: .62rem/1 'DM Mono', monospace;
  letter-spacing: .08em;
}

.faq-questions-section .faq-trigger i {
  margin-left: auto;
}

.faq-questions-section .faq-item .collapse p {
  max-width: 690px;
  padding: 0 2.4rem 1.35rem 0;
  font-size: .82rem;
  line-height: 1.8;
}

.faq-conversation-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  color: var(--primary);
  background: var(--secondary);
}

.faq-conversation-layout {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 3rem;
  align-items: end;
}

.faq-conversation-layout h2 {
  max-width: 650px;
  margin: .75rem 0 0;
  color: var(--primary);
  font: 600 clamp(2.8rem, 5vw, 5.3rem)/.9 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.faq-conversation-note {
  display: flex;
  max-width: 100%;
  min-height: 190px;
  flex-direction: column;
  justify-content: space-between;
  justify-self: end;
  padding: 1.25rem;
  border: 1px solid rgba(16, 44, 61, .22);
  border-radius: .85rem;
}

.faq-conversation-note i {
  color: var(--primary);
  font-size: 1.25rem;
}

.faq-conversation-note p {
  margin: auto 0 .8rem;
  color: rgba(16, 44, 61, .78);
  font: 600 1.1rem/1.2 'Manrope', sans-serif;
  letter-spacing: -.05em;
}

.faq-conversation-note span {
  color: rgba(16, 44, 61, .6);
  font: .58rem/1.4 'DM Mono', monospace;
  letter-spacing: .1em;
}

.faq-topics-section {
  background: var(--surface-soft);
}

.faq-topic-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
}

.faq-topic-cards a {
  position: relative;
  display: flex;
  min-height: 340px;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(16, 44, 61, .12);
  border-radius: .85rem;
  color: var(--primary);
  background: var(--white);
  transition: transform .25s ease, box-shadow .25s ease;
}

.faq-topic-cards a:hover {
  color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(16, 44, 61, .1);
}

.faq-topic-cards a:first-child {
  color: var(--white);
  border-color: var(--primary);
  background: var(--primary);
}

.faq-topic-cards a:after {
  content: '';
  position: absolute;
  right: -38px;
  bottom: -56px;
  width: 145px;
  height: 145px;
  border: 1px solid rgba(16, 44, 61, .12);
  border-radius: 50%;
}

.faq-topic-cards a:first-child:after {
  border-color: rgba(117, 212, 194, .22);
}

.faq-topic-cards span {
  color: var(--success);
  font: .58rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
}

.faq-topic-cards a:first-child span,
.faq-topic-cards a:first-child i,
.faq-topic-cards a:first-child b {
  color: var(--secondary);
}

.faq-topic-cards>a>i {
  margin-top: 3.7rem;
  color: var(--success);
  font-size: 1.25rem;
}

.faq-topic-cards strong {
  max-width: 260px;
  margin-top: .8rem;
  font: 600 clamp(1.45rem, 2.3vw, 2.2rem)/.96 'Manrope', sans-serif;
  letter-spacing: -.08em;
}

.faq-topic-cards p {
  max-width: 280px;
  margin: .7rem 0 0;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.7;
}

.faq-topic-cards a:first-child p {
  color: rgba(255, 255, 255, .62);
}

.faq-topic-cards b {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  color: var(--success);
  font-size: .72rem;
}

.faq-safety-section {
  background: #fff3e2;
}

.faq-safety-layout {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: clamp(2rem, 8vw, 8rem);
  align-items: center;
}

.faq-safety-copy .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.faq-safety-copy h2 {
  max-width: 620px;
  margin: 0 0 1rem;
  color: var(--primary);
  font: 600 clamp(2.5rem, 5vw, 5rem)/.92 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.faq-safety-copy>p:last-child {
  max-width: 450px;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.faq-safety-card {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid rgba(16, 44, 61, .15);
  border-radius: .95rem;
  color: var(--white);
  background: var(--primary);
}

.faq-safety-card>i {
  color: #f0c58e;
  font-size: 1.35rem;
}

.faq-safety-card strong {
  max-width: 300px;
  margin-top: auto;
  color: var(--white);
  font: 600 1.55rem/.98 'Manrope', sans-serif;
  letter-spacing: -.07em;
}

.faq-safety-card span {
  margin-top: .7rem;
  color: rgba(255, 255, 255, .6);
  font: .58rem/1.4 'DM Mono', monospace;
  letter-spacing: .08em;
}

.faq-safety-card .text-link {
  margin-top: 1.3rem;
  color: #f0c58e;
}

.faq-next-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  color: var(--primary);
  background: var(--secondary);
}

.faq-next-layout {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 3rem;
  align-items: end;
}

.faq-next-layout h2 {
  max-width: 650px;
  margin: .75rem 0 0;
  color: var(--primary);
  font: 600 clamp(2.7rem, 4.8vw, 5rem)/.92 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.faq-next-action {
  max-width: 100%;
  justify-self: end;
}

.faq-next-action p {
  margin: 0 0 1.35rem;
  color: rgba(16, 44, 61, .72);
  font-size: .8rem;
  line-height: 1.75;
}

@media (max-width: 991px) {

  .faqs-hero-content,
  .faq-section-head,
  .faq-question-layout,
  .faq-conversation-layout,
  .faq-safety-layout,
  .faq-next-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .faq-section-head>p {
    justify-self: start;
    max-width: 520px;
  }

  .faqs-hero-card {
    display: none;
  }

  .faq-question-rail {
    position: static;
    min-height: 220px;
  }

  .faq-question-rail strong {
    margin-top: 2.8rem;
    font-size: 5.5rem;
  }

  .faq-question-rail .text-link {
    margin-top: 1.5rem;
  }

  .faq-conversation-note {
    justify-self: start;
  }

  .faq-topic-cards {
    grid-template-columns: 1fr;
  }

  .faq-topic-cards a {
    min-height: 260px;
  }

  .faq-topic-cards>a>i {
    margin-top: 2.5rem;
  }

  .faq-next-action {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  body[data-page="faqs.php"] main>.faqs-hero {
    min-height: 520px;
    padding: 5.4rem 0 2.8rem;
  }

  .faqs-hero-content h1 {
    font-size: clamp(1.85rem, 8.5vw, 2.6rem) !important;
  }

  .faqs-hero-lead {
    display: none;
  }

  .faq-section-head h2 {
    font-size: 2.7rem;
  }

  .faq-section-head {
    margin-bottom: 2rem;
  }

  .faq-question-rail {
    min-height: 190px;
    padding: 1.25rem;
  }

  .faq-question-rail strong {
    margin-top: 2.3rem;
    font-size: 4.7rem;
  }

  .faq-questions-section .faq-trigger {
    min-height: 70px;
    font-size: .9rem;
  }

  .faq-questions-section .faq-item .collapse p {
    padding-left: 1.8rem;
    font-size: .76rem;
  }

  .faq-conversation-layout {
    gap: 1.2rem;
  }

  

  .faq-conversation-layout h2 {
    font-size: 3.2rem;
  }

  .faq-conversation-note {
    min-height: 175px;
  }

  .faq-topic-cards a {
    min-height: 230px;
    padding: 1.2rem;
  }

  .faq-topic-cards>a>i {
    margin-top: 1.7rem;
  }

  .faq-topic-cards strong {
    font-size: 1.65rem;
  }

  .faq-safety-layout {
    gap: 2.2rem;
  }

  .faq-safety-copy h2 {
    font-size: 3rem;
  }

  .faq-safety-card {
    min-height: 260px;
    padding: 1.3rem;
  }

  .faq-next-layout {
    gap: 1.2rem;
  }

  .faq-next-layout h2 {
    font-size: 3.15rem;
  }
}

/* Gallery page: a real image library with distinct visual stories and clear source labels. */
body[data-page="gallery.php"] main>.gallery-hero {
  min-height: 620px;
  padding: 7.4rem 0 3.6rem;
  background-position: center 42%;
}

body[data-page="gallery.php"] main>.gallery-hero:after {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  right: auto;
  bottom: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(4, 21, 31, .96), rgba(5, 27, 38, .76) 55%, rgba(5, 27, 38, .32)), linear-gradient(0deg, rgba(4, 21, 31, .4), transparent 52%);
  pointer-events: none;
}

.gallery-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: end;
  padding-bottom: 2.2rem;
}

.gallery-hero-content h1 {
  max-width: 800px;
  margin: .75rem 0 1rem;
  font-size: clamp(2rem, 3.2vw, 3.4rem) !important;
  line-height: .93 !important;
  letter-spacing: -.105em;
}

.gallery-hero-content h1 em {
  color: var(--secondary);
  font-weight: 500;
}

.gallery-hero-lead {
  max-width: 600px !important;
  margin: 0 0 1.7rem;
  color: rgba(255, 255, 255, .74);
  font-size: .94rem !important;
  line-height: 1.75 !important;
}

.gallery-hero-card {
  display: none !important;
}

.gallery-hero-card>span,
.gallery-hero-card small {
  color: var(--secondary);
  font: .59rem/1.35 'DM Mono', monospace;
  letter-spacing: .13em;
}

.gallery-hero-card>i {
  margin-top: auto;
  color: var(--secondary);
  font-size: 1.3rem;
}

.gallery-hero-card strong {
  max-width: 205px;
  margin-top: .8rem;
  color: var(--white);
  font: 600 1.5rem/.96 'Manrope', sans-serif;
  letter-spacing: -.08em;
}

.gallery-hero-card small {
  margin-top: 2.1rem;
  color: rgba(255, 255, 255, .6);
  font-size: .52rem;
}

.gallery-library-section {
  background: var(--surface);
}

.gallery-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.2rem;
}

.gallery-section-head .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.gallery-section-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--primary);
  font: 600 clamp(2.25rem, 4.5vw, 4.7rem)/.93 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.gallery-section-head>p {
  max-width: 350px;
  justify-self: end;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.gallery-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.15rem;
}

.gallery-filter-row button {
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  font: .58rem/1 'DM Mono', monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.gallery-filter-row button:hover,
.gallery-filter-row button:focus-visible {
  border-color: var(--success);
  color: var(--primary);
  outline: none;
}

.gallery-filter-row button.is-active {
  border-color: var(--primary);
  color: var(--white);
  background: var(--primary);
}

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 260px);
  gap: .8rem;
}

.gallery-tile {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: .9rem;
  background: var(--primary);
}

.gallery-tile-profile {
  grid-column: 1 / 6;
  grid-row: 1 / 3;
}

.gallery-tile-movement {
  grid-column: 6 / 13;
  grid-row: 1;
}

.gallery-tile-hospital {
  grid-column: 6 / 9;
  grid-row: 2;
}

.gallery-tile-sports {
  grid-column: 9 / 13;
  grid-row: 2;
}

.gallery-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
  transition: transform .5s ease, opacity .3s ease;
}

.gallery-tile:hover img {
  opacity: .98;
  transform: scale(1.05);
}

.gallery-tile:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 21, 31, .02) 22%, rgba(4, 21, 31, .88) 100%);
  pointer-events: none;
}

.gallery-tile figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 1.2rem 1.1rem;
  display: grid;
  gap: .35rem;
  color: var(--white);
}

.gallery-tile figcaption span {
  color: var(--secondary);
  font: .58rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
}

.gallery-tile figcaption strong {
  max-width: 370px;
  color: var(--white);
  font: 600 clamp(1.35rem, 2.6vw, 2.6rem)/.95 'Manrope', sans-serif;
  letter-spacing: -.08em;
}

.gallery-tile figcaption small {
  color: rgba(255, 255, 255, .63);
  font-size: .65rem;
}

.gallery-tile-profile figcaption strong {
  font-size: clamp(1.8rem, 3vw, 3.4rem);
}

.gallery-mosaic.is-filtered .gallery-tile {
  grid-column: auto;
  grid-row: auto;
  min-height: 390px;
}

.gallery-mosaic.is-filtered {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
}

.gallery-mosaic.is-filtered .gallery-tile[data-gallery-category="profile"],
.gallery-mosaic.is-filtered .gallery-tile[data-gallery-category="setting"] {
  grid-column: span 2;
}

.gallery-mosaic .gallery-tile.is-filtered-out {
  display: none;
}

.gallery-feature-section {
  background: var(--surface-soft);
}

.gallery-feature-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 8vw, 8rem);
  align-items: center;
}

.gallery-feature-copy .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.gallery-feature-copy h2 {
  max-width: 540px;
  margin: 0 0 1rem;
  color: var(--primary);
  font: 600 clamp(2.5rem, 5vw, 5rem)/.92 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.gallery-feature-copy>p:not(.eyebrow) {
  max-width: 410px;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.gallery-feature-copy .text-link {
  display: inline-flex;
  margin-top: 1.5rem;
  color: var(--success);
}

.gallery-portrait-card {
  position: relative;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--primary);
  box-shadow: var(--shadow-soft);
}

.gallery-portrait-card:before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 1.2rem 1.2rem auto auto;
  width: 5.2rem;
  height: 5.2rem;
  border: 1px solid rgba(117, 212, 194, .55);
  border-radius: 50%;
}

.gallery-portrait-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center top;
}

.gallery-portrait-card:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 21, 31, .86), transparent 62%);
}

.gallery-portrait-card figcaption {
  position: absolute;
  z-index: 2;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.2rem;
  display: grid;
  gap: .25rem;
  color: var(--white);
}

.gallery-portrait-card figcaption strong {
  font: 600 1.6rem/.96 'Manrope', sans-serif;
  letter-spacing: -.07em;
}

.gallery-portrait-card figcaption span {
  color: rgba(255, 255, 255, .62);
  font: .6rem/1.4 'DM Mono', monospace;
  letter-spacing: .08em;
}

.gallery-integrity-section {
  background: var(--surface);
}

.gallery-integrity-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 8vw, 8rem);
  align-items: start;
}

.gallery-integrity-layout>div:first-child .eyebrow {
  margin-bottom: .9rem;
  color: var(--success);
}

.gallery-integrity-layout h2 {
  max-width: 530px;
  margin: 0 0 1rem;
  color: var(--primary);
  font: 600 clamp(2.4rem, 4.7vw, 4.8rem)/.92 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.gallery-integrity-layout>div:first-child>p:last-child {
  max-width: 390px;
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.8;
}

.gallery-integrity-list {
  border-top: 1px solid var(--border);
}

.gallery-integrity-list>div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--border);
}

.gallery-integrity-list span {
  color: var(--success);
  font: .62rem/1 'DM Mono', monospace;
}

.gallery-integrity-list strong {
  color: var(--primary);
  font: 600 1rem/1.2 'Manrope', sans-serif;
  letter-spacing: -.04em;
}

.gallery-integrity-list p {
  grid-column: 1;
  max-width: 430px;
  margin: -.3rem 0 0;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.65;
}

.gallery-next-section {
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  color: var(--primary);
  background: var(--secondary);
}

.gallery-next-layout {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 3rem;
  align-items: end;
}

.gallery-next-layout h2 {
  max-width: 640px;
  margin: .75rem 0 0;
  color: var(--primary);
  font: 600 clamp(2.7rem, 4.8vw, 5rem)/.92 'Manrope', sans-serif;
  letter-spacing: -.1em;
}

.gallery-next-action {
  max-width: 100%;
  justify-self: end;
}

.gallery-next-action p {
  margin: 0 0 1.35rem;
  color: rgba(16, 44, 61, .72);
  font-size: .8rem;
  line-height: 1.75;
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem;
  align-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 21, 31, .94);
  backdrop-filter: blur(10px);
}

.gallery-lightbox-figure {
  position: relative;
  display: flex;
  max-width: 1040px;
  max-height: calc(100vh - 5rem);
  flex-direction: column;
  justify-self: center;
  margin: 0;
}

.gallery-lightbox-figure img {
  display: block;
  width: auto;
  max-width: min(78vw, 980px);
  height: min(76vh, 760px);
  object-fit: contain;
  border-radius: .65rem;
  background: rgba(255, 255, 255, .04);
}

.gallery-lightbox-figure figcaption {
  display: grid;
  gap: .28rem;
  padding: .9rem .2rem 0;
  color: var(--white);
}

.gallery-lightbox-figure figcaption span {
  color: var(--secondary);
  font: .6rem/1 'DM Mono', monospace;
  letter-spacing: .13em;
}

.gallery-lightbox-figure figcaption strong {
  color: var(--white);
  font: 600 1.1rem/1 'Manrope', sans-serif;
  letter-spacing: -.05em;
}

.gallery-lightbox-figure figcaption small {
  color: rgba(255, 255, 255, .62);
  font-size: .68rem;
}

.gallery-lightbox-close,
.gallery-lightbox-control {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: var(--white);
  background: rgba(4, 21, 31, .35);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-control:hover,
.gallery-lightbox-control:focus-visible {
  border-color: var(--secondary);
  color: var(--primary);
  background: var(--secondary);
  outline: none;
}

.gallery-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

.gallery-lightbox-control {
  align-self: center;
  justify-self: center;
}

.gallery-lightbox-prev {
  grid-column: 1;
  grid-row: 1;
}

.gallery-lightbox-figure {
  grid-column: 2;
  grid-row: 1;
}

.gallery-lightbox-next {
  grid-column: 3;
  grid-row: 1;
}

body.gallery-lightbox-open {
  overflow: hidden;
}

.gallery-tile:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}

@media (max-width: 991px) {

  .gallery-hero-content,
  .gallery-section-head,
  .gallery-feature-layout,
  .gallery-integrity-layout,
  .gallery-next-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .gallery-section-head>p {
    justify-self: start;
    max-width: 520px;
  }

  .gallery-hero-card {
    display: none;
  }

  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 240px);
  }

  .gallery-tile-profile {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .gallery-tile-movement {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .gallery-tile-hospital {
    grid-column: 1;
    grid-row: 4;
  }

  .gallery-tile-sports {
    grid-column: 2;
    grid-row: 4;
  }

  .gallery-portrait-card,
  .gallery-portrait-card img {
    min-height: 440px;
  }

  

  

  

  

  .gallery-next-action {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  body[data-page="gallery.php"] main>.gallery-hero {
    min-height: 520px;
    padding: 5.4rem 0 2.8rem;
  }

  .gallery-hero-content h1 {
    font-size: clamp(1.85rem, 8.5vw, 2.6rem) !important;
  }

  .gallery-hero-lead {
    display: none;
  }

  .gallery-section-head h2 {
    font-size: 2.7rem;
  }

  .gallery-section-head {
    margin-bottom: 2rem;
  }

  .gallery-filter-row {
    gap: .3rem;
  }

  .gallery-filter-row button {
    padding: .48rem .6rem;
    font-size: .5rem;
  }

  .gallery-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 240px);
    gap: .65rem;
  }

  .gallery-mosaic.is-filtered {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .gallery-mosaic.is-filtered .gallery-tile[data-gallery-category="profile"],
  .gallery-mosaic.is-filtered .gallery-tile[data-gallery-category="setting"] {
    grid-column: auto;
  }

  .gallery-tile-profile,
  .gallery-tile-movement,
  .gallery-tile-hospital,
  .gallery-tile-sports {
    grid-column: auto;
    grid-row: auto;
  }

  .gallery-tile-profile figcaption strong {
    font-size: 2rem;
  }

  .gallery-tile figcaption strong {
    font-size: 1.65rem;
  }

  .gallery-feature-layout,
  .gallery-integrity-layout {
    gap: 2.2rem;
  }

  .gallery-feature-copy h2,
  .gallery-integrity-layout h2 {
    font-size: 3rem;
  }

  .gallery-portrait-card,
  .gallery-portrait-card img {
    min-height: 390px;
  }

  .gallery-integrity-list>div {
    grid-template-columns: 1fr;
  }

  .gallery-integrity-list p {
    grid-column: 1;
  }

  .gallery-next-layout {
    gap: 1.2rem;
  }

  

  .gallery-next-layout h2 {
    font-size: 3.15rem;
  }

  .gallery-lightbox {
    grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem;
    padding: .8rem;
  }

  .gallery-lightbox-figure img {
    max-width: 82vw;
    height: 68vh;
  }

  .gallery-lightbox-close {
    top: .65rem;
    right: .65rem;
    width: 2.7rem;
    height: 2.7rem;
  }

  .gallery-lightbox-control {
    width: 2.5rem;
    height: 2.5rem;
  }

  .gallery-lightbox-figure figcaption strong {
    font-size: .95rem;
  }

  .gallery-lightbox-figure figcaption small {
    font-size: .6rem;
  }
}

/* Project-wide typography override: use Inter consistently across every page. */
:root {
  --serif: 'Inter', sans-serif;
}

html body,
html body * {
  font-family: 'Inter', sans-serif !important;
}

/* Preserve icon rendering and the intentional logo-mark typeface. */
html body .bi,
html body .bi::before {
  font-family: bootstrap-icons !important;
}

html body .brand-mark {
  font-family: Georgia, serif !important;
}

/* Keep all project text upright; emphasis remains available through weight and colour. */
html body,
html body * {
  font-style: normal !important;
}

/* The combined care menu keeps four clear paths without changing the mega-menu layout. */
.care-mega-columns {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .care-mega-columns {
    grid-template-columns: 1fr;
  }
}

/* Keep the primary page headings prominent without letting them dominate the layout. */
html body .hero h1,
html body .hero h2 {
  font-size: clamp(2.8rem, 6vw, 6rem) !important;
}

html body .inner-hero h1 {
  font-size: clamp(1.56rem, 3.24vw, 3.36rem) !important;
}

@media (max-width: 700px) {

  html body .hero h1,
  html body .hero h2 {
    font-size: clamp(2.4rem, 11vw, 3.6rem) !important;
  }

  html body .inner-hero h1 {
    font-size: clamp(1.55rem, 6vw, 2rem) !important;
  }
}

/* Shared spacing and line-height rhythm for readable content throughout the site. */
html body :where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.12 !important;
  text-wrap: balance;
}

html body :where(p, li, dd, dt) {
  line-height: 1.7 !important;
}

html body main :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

html body .hero h1,
html body .hero h2,
html body .inner-hero h1 {
  line-height: 1.06 !important;
  letter-spacing: -.06em !important;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}

html body .hero-copy>p:not(.eyebrow),
html body .inner-hero .container>p:not(.eyebrow) {
  line-height: 1.7 !important;
  margin-top: 0 !important;
}

/* Reduce oversized section headings consistently across all content families. */
html body main :is([class*="section-head"] h2,
  [class*="section-heading"] h2,
  [class*="overview"] h2,
  [class*="-copy"]:not(.hero-copy) h2,
  [class*="-layout"] h2,
  [class*="-lead"] h2,
  [class*="-heading"]:not(.form-card-heading) h2,
  [class*="-intro"] h2,
  [class*="feature-copy"] h2,
  [class*="feature-content"] h2,
  [class*="-callout"] h2,
  [class*="-signal"] h2,
  [class*="principle"] h2,
  [class*="journal-header"] h2,
  [class*="location-header"] h2,
  [class*="explorer-header"] h2) {
  font-size: clamp(1.75rem, 3.2vw, 3.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.055em !important;
  margin-bottom: 0 !important;
}

@media (max-width: 700px) {

  html body main :is([class*="section-head"] h2,
    [class*="section-heading"] h2,
    [class*="overview"] h2,
    [class*="-copy"]:not(.hero-copy) h2,
    [class*="-layout"] h2,
    [class*="-lead"] h2,
    [class*="-heading"]:not(.form-card-heading) h2,
    [class*="-intro"] h2,
    [class*="feature-copy"] h2,
    [class*="feature-content"] h2,
    [class*="-callout"] h2,
    [class*="-signal"] h2,
    [class*="principle"] h2,
    [class*="journal-header"] h2,
    [class*="location-header"] h2,
    [class*="explorer-header"] h2) {
    font-size: clamp(1.65rem, 8vw, 2.4rem) !important;
    line-height: 1.12 !important;
  }
}

/* Final readability pass: prevent tight text from visually colliding. */
html body :where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.16 !important;
}

html body .hero h1,
html body .hero h2,
html body .inner-hero h1 {
  line-height: 1.1 !important;
}

html body :where(p, li, dd, dt) {
  line-height: 1.75 !important;
}

@media (max-width: 600px) {

  /* Keep the fixed mobile action bar from being covered by another floating control. */
  html body .whatsapp-float {
    display: none !important;
  }
}

/* Keep every homepage slider heading identical to the primary “Move forward” heading. */
html body .home-hero .hero-heading {
  font-size: clamp(2.5rem, 5.3vw, 5.3rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.06em !important;
  font-weight: 600 !important;
  margin: 0 0 1.5rem !important;
}

@media (max-width: 700px) {
  html body .home-hero .hero-heading {
    font-size: clamp(2.1rem, 9.7vw, 3.2rem) !important;
    line-height: 1.06 !important;
  }
}

/* First homepage slide: introduce the specialist before the general care pathway slides. */
.home-hero .hero-doctor-slide .container {
  display: block;
}

.home-hero .hero-doctor-slide {
  background-position: 74% center;
}

.home-hero .hero-doctor-slide:before {
  background:
    linear-gradient(90deg, rgba(2, 17, 28, .92) 0%, rgba(4, 26, 40, .78) 40%, rgba(4, 26, 40, .34) 72%, rgba(4, 26, 40, .16) 100%),
    linear-gradient(0deg, rgba(2, 17, 28, .68) 0%, rgba(2, 17, 28, .22) 42%, rgba(2, 17, 28, .14) 70%, rgba(2, 17, 28, .42) 100%);
}

.home-hero .hero-specialities {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  max-width: 680px;
  margin-top: 1.45rem;
}

.home-hero .hero-specialities span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .62rem .88rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .86);
  font-size: .82rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
  .home-hero .hero-doctor-slide {
    background-position: 68% center;
  }
}

@media (max-width: 700px) {
  .home-hero .hero-doctor-slide {
    background-position: 63% center;
  }

  .home-hero .hero-specialities {
    gap: .5rem;
    margin-top: 1rem;
  }

  .home-hero .hero-specialities span {
    min-height: 34px;
    padding: .5rem .7rem;
    font-size: .72rem;
  }
}

/* Global inner-page hero system: match the Treatments page height and spacing. */
html body:not(.home-page) main>.inner-hero {
  min-height: 500px !important;
  height: 500px;
  padding: 7.4rem 0 3.8rem !important;
  display: flex;
  align-items: flex-end;
}

@media (max-width: 700px) {
  html body:not(.home-page) main>.inner-hero {
    min-height: 390px !important;
    height: auto;
    padding: 6.2rem 0 2.8rem !important;
  }
}

/* Patient testimonials: soft teal, quote-led cards with minimal metadata. */
html body .patient-story-card {
  min-height: auto !important;
  padding: 1.75rem;
  border: 1px solid rgba(16, 44, 61, .12);
  border-radius: 1.25rem;
  background: var(--accent);
  color: var(--primary);
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

html body .patient-story-card:hover {
  border-color: rgba(16, 44, 61, .2);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(16, 44, 61, .1);
}

html body .patient-story-card-quote-mark {
  display: block;
  height: 3rem;
  margin-top: 1.2rem;
  color: var(--secondary);
  font: 600 4.5rem/.72 Inter, sans-serif;
}

html body .patient-story-card blockquote {
  max-width: none;
  margin: .25rem 0 1.5rem;
  color: var(--primary);
  font: 600 clamp(1.2rem, 1.45vw, 1.55rem)/1.28 Inter, sans-serif;
  letter-spacing: -.035em;
}

html body .patient-story-card-cite {
  display: grid;
  gap: .2rem;
  margin: auto 0 0 !important;
  padding-top: 1rem;
  border-top: 1px solid rgba(16, 44, 61, .16);
  color: var(--primary) !important;
}

html body .patient-story-card-cite strong {
  font-size: .86rem;
  font-weight: 600;
}

html body .patient-story-card-cite span {
  color: var(--success);
  font: .6rem/1.4 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  html body .patient-story-card {
    min-height: 0;
    padding: 1.5rem;
  }
}

/* Joint replacement article: a focused editorial reading experience. */

/* Global Contact-style header: one calm, image-led hero system for every inner page. */
html body:not(.home-page) main>.inner-hero {
  position: relative;
  isolation: isolate;
  min-height: 500px !important;
  height: 500px !important;
  padding: 7.4rem 0 3.8rem !important;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background-image: linear-gradient(90deg, rgba(4, 21, 31, .95), rgba(5, 27, 38, .72) 55%, rgba(5, 27, 38, .32)), var(--page-hero-image) !important;
  background-size: cover !important;
  background-position: center 48% !important;
}

html body:not(.home-page) main>.inner-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(4, 21, 31, .42), transparent 52%);
  pointer-events: none;
}

html body:not(.home-page) main>.inner-hero>.container {
  position: static !important;
  width: 100%;
}

html body:not(.home-page) main>.inner-hero :is(.about-hero-content,
  .specialities-hero-content,
  .treatments-hero-content,
  .blog-hero-content,
  .contact-hero-content,
  .appointment-hero-content,
  .faqs-hero-content,
  .patient-stories-hero-content) {
  position: relative;
  z-index: 2;
  display: block !important;
  width: 100%;
  margin-top: 0 !important;
  padding-bottom: 2.2rem !important;
}

/* Contact-style heroes keep the copy left-aligned and remove decorative side cards. */
html body:not(.home-page) main>.inner-hero :is(.about-hero-fact,
  .specialities-hero-orbit,
  .treatments-hero-aside,
  .blog-hero-aside,
  .appointment-hero-card,
  .faqs-hero-card,
  .patient-stories-hero-aside,
  .contact-hero-panel) {
  display: none !important;
}

html body:not(.home-page) main>.inner-hero :is(.about-hero-content h1,
  .specialities-hero h1,
  .treatments-hero h1,
  .blog-hero h1,
  .contact-hero-content h1,
  .appointment-hero-content h1,
  .faqs-hero-content h1,
  .patient-stories-hero h1) {
  max-width: 800px !important;
  margin: .75rem 0 1rem !important;
  font-size: clamp(2rem, 3.2vw, 3.4rem) !important;
  line-height: .98 !important;
  letter-spacing: -.09em !important;
}

html body:not(.home-page) main>.inner-hero :is(.about-hero-content h1 em,
  .specialities-hero h1 em,
  .treatments-hero h1 em,
  .blog-hero h1 em,
  .contact-hero-content h1 em,
  .appointment-hero-content h1 em,
  .faqs-hero-content h1 em,
  .patient-stories-hero h1 em) {
  color: var(--secondary);
  font-weight: 500;
}

html body:not(.home-page) main>.inner-hero :is(.about-hero-lead,
  .specialities-hero-lead,
  .treatments-hero-lead,
  .blog-hero-lead,
  .contact-hero-lead,
  .appointment-hero-lead,
  .faqs-hero-lead,
  .patient-stories-hero-lead) {
  display: block !important;
  max-width: 610px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .74) !important;
  font-size: .94rem !important;
  line-height: 1.75 !important;
}

/* The selected header has no hero action buttons. */
html body:not(.home-page) main>.inner-hero :is(.btn, [class*="hero-actions"]) {
  display: none !important;
}

@media (max-width: 700px) {
  html body:not(.home-page) main>.inner-hero {
    min-height: 390px !important;
    height: auto !important;
    padding: 6.2rem 0 2.8rem !important;
  }

  html body:not(.home-page) main>.inner-hero :is(.about-hero-content,
    .specialities-hero-content,
    .treatments-hero-content,
    .blog-hero-content,
    .contact-hero-content,
    .appointment-hero-content,
    .faqs-hero-content,
    .patient-stories-hero-content) {
    padding-bottom: 1.4rem !important;
  }

  html body:not(.home-page) main>.inner-hero :is(.about-hero-content h1,
    .specialities-hero h1,
    .treatments-hero h1,
    .blog-hero h1,
    .contact-hero-content h1,
    .appointment-hero-content h1,
    .faqs-hero-content h1,
    .patient-stories-hero h1) {
    font-size: clamp(1.85rem, 8.5vw, 2.6rem) !important;
  }
}

/* ==========================================================================
   MOBILE OFF-CANVAS MENU — fixes
   1. The brand lock was invisible: `.brand` carries `color: var(--navy)`
      (style.css line 75), which is dark navy on this dark panel. Forced to
      white here rather than changing the global rule, which the light-header
      pages rely on.
   2. The two action buttons now sit at the BOTTOM of the panel instead of
      floating directly under the last menu item.
   ========================================================================== */

/* --- 1. brand lock legibility --- */
.mobile-menu .offcanvas-header .brand,
.mobile-menu .offcanvas-header .brand:hover{
  color: var(--white);
}
.mobile-menu .offcanvas-header .brand-copy strong{
  color: var(--white);
}
.mobile-menu .offcanvas-header .brand-copy small{
  color: rgba(255, 255, 255, .58);
  opacity: 1;
}
.mobile-menu .offcanvas-header .brand-mark{
  color: var(--secondary);
  border-color: rgba(117, 212, 194, .45);
  background: rgba(117, 212, 194, .10);
}

/* --- 2. pin the CTAs to the bottom of the panel --- */
.mobile-menu .offcanvas-body{
  display: flex;
  flex-direction: column;
  /* the panel scrolls as a whole; the CTA block stays after the nav */
  min-height: 0;
}
.mobile-menu .offcanvas-body > .mobile-nav{
  flex: 0 0 auto;
}
.mobile-menu-ctas{
  /* sits at the bottom when the nav is short, and flows after it when the
     submenu is expanded — never overlapping the links */
  margin-top: auto;
  padding-top: 1.75rem;
  padding-bottom: .35rem;
}

/* ==========================================================================
   HERO LEAD PARAGRAPH — hidden on mobile and tablet
   --------------------------------------------------------------------------
   Eyebrow labels stay visible everywhere. On screens 1024px and below the
   hero's lead paragraph is hidden so the heading and the buttons come up
   without a long scroll.

   `!important` is required: doctor.css (~line 18118) sets these lead elements
   to `display: block !important`, which is why the original rule at ~line
   10974 showed as struck through in DevTools and never took effect.

   Only the HERO paragraph is hidden — body copy further down every page is
   untouched.
   ========================================================================== */

@media (max-width: 1024px) {

  /* --- older pages: about, blog, contact, appointment, faqs, patient stories --- */
  html body:not(.home-page) main > .inner-hero p:not(.eyebrow),
  html body:not(.home-page) .inner-hero p:not(.eyebrow),
  html body:not(.home-page) main > .inner-hero :is(.about-hero-lead,
    .specialities-hero-lead,
    .treatments-hero-lead,
    .blog-hero-lead,
    .contact-hero-lead,
    .appointment-hero-lead,
    .faqs-hero-lead,
    .patient-stories-hero-lead) {
    display: none !important;
  }

  /* --- new pages: 8 treatment guides, 3 speciality hubs, 2 index pages --- */
  html body .tpage .t-hero .hero-lede {
    display: none !important;
  }

  /* close the gap the paragraph left behind */
  html body .tpage .t-hero h1 {
    margin-bottom: 0 !important;
  }
  html body .tpage .t-hero .hero-cta {
    margin-top: 1.5rem !important;
  }
}

/* --------------------------------------------------------------------------
   Header: frosted at the top, solid once the page is scrolled.
   The un-scrolled bar used to be fully transparent; it now carries a light
   blur so the logo and nav stay legible over bright hero imagery.
   The .scrolled state (solid navy) is defined in style.css and still wins.
   -------------------------------------------------------------------------- */
.site-header,
.site-utility {
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  background: linear-gradient(180deg, rgba(4, 21, 31, .34), rgba(4, 21, 31, .16));
  transition: background .3s ease, backdrop-filter .3s ease, padding .3s ease, top .3s ease;
}

.site-utility {
  background: rgba(4, 21, 31, .38);
}

/* Slightly larger logo mark to sit with the bigger wordmark. */
.brand-mark {
  width: 38px;
  height: 38px;
}

.site-header.scrolled .brand-mark {
  width: 34px;
  height: 34px;
}

@media (max-width: 991px) {
  .brand-mark {
    width: 34px;
    height: 34px;
  }
}

/* --------------------------------------------------------------------------
   About page: qualifications beside the name on the portrait caption.
   Reset the generic `figcaption span` styling, then render each credential
   as a small mint pill in the same language as the hero speciality chips.
   -------------------------------------------------------------------------- */
.about-portrait figcaption .about-portrait-quals {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .55rem;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.about-portrait figcaption .about-portrait-quals b {
  padding: .24rem .55rem;
  border: 1px solid rgba(117, 212, 194, .45);
  border-radius: 999px;
  background: rgba(117, 212, 194, .12);
  color: var(--secondary);
  font: 500 .56rem/1.3 'DM Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .about-portrait figcaption .about-portrait-quals b {
    padding: .2rem .45rem;
    font-size: .5rem;
  }
}

/* ==========================================================================
   MOBILE POLISH PASS
   Findings from a 390px audit of all 34 pages.
   ========================================================================== */

/* 1. Images must never exceed their column. Three blog articles were
      rendering 1400-1600px wide images inside a ~366px column, so readers
      saw only the left edge. Class-based image rules keep their own sizing
      because this bare selector has the lowest possible specificity. */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {

  /* 2. Hero padding. The header is about 60px tall on phones, but inner
        heroes reserved 99px above the title, leaving a large empty band. */
  html body:not(.home-page) main>.inner-hero {
    padding: 4.6rem 0 2.2rem !important;
  }

  /* 3. Minimum readable type. The logo sub-label was 7.5px; small labels
        and the header button sat between 9 and 10.2px. */
  .brand-copy small {
    font-size: .62rem;
  }

  .site-header .btn,
  .header-actions .btn {
    font-size: .72rem;
    padding: .58rem .7rem;
    white-space: nowrap;
  }

  /* Drop the trailing arrow on phones: with the larger label it pushed the
     menu toggle past the right edge of the screen. */
  .site-header .header-actions .btn>i {
    display: none;
  }

  /* The larger sub-label must not wrap under the wordmark. */
  .brand-copy small {
    white-space: nowrap;
  }

  .site-utility {
    font-size: .66rem;
  }

  .breadcrumb-wrap a,
  .tpage .t-hero .breadcrumb-wrap {
    font-size: .75rem;
  }

  .tpage .cta-panel-label,
  .tpage .rel-cat,
  .legal-index-label,
  .mobile-menu .eyebrow,
  .mobile-subnav-section p span {
    font-size: .7rem;
  }
}

@media (max-width: 991px) {

  /* 4. Touch targets. Footer, breadcrumb and panel links were 19-21px tall,
        well under the ~44px a fingertip needs. Padding raises the hit area
        without moving the text. */
  .site-footer .footer-top a,
  .site-footer .footer-bottom a,
  .breadcrumb-wrap a,
  .tpage .cta-panel-link {
    display: inline-block;
    padding-top: .78rem;
    padding-bottom: .78rem;
  }

  /* Short legal links ("Terms", "FAQs") were only ~33px wide. */
  .site-footer .footer-bottom a {
    padding-left: .45rem;
    padding-right: .45rem;
    margin-left: -.45rem;
  }

  /* The About portrait credential pills sat at 8px. */
  .about-portrait figcaption .about-portrait-quals b {
    font-size: .58rem;
  }
}

/* Narrow phones (iPhone SE, small Androids): the header row of logo +
   CTA + menu toggle did not fit at 320-380px, pushing the toggle off
   screen. Scale the logo and CTA down just for these widths. */
@media (max-width: 384px) {

  .brand-mark {
    width: 31px;
    height: 31px;
  }

  .brand {
    gap: .5rem;
  }

  .brand-copy strong {
    font-size: .82rem;
  }

  .brand-copy small {
    font-size: .52rem;
    letter-spacing: .1em;
  }

  .site-header .btn,
  .header-actions .btn {
    font-size: .66rem;
    padding: .52rem .62rem;
  }

  .header-actions {
    gap: .4rem;
  }
}

@media (max-width: 344px) {

  /* At the very narrowest, the sub-label is the widest part of the logo. */
  .brand-copy small {
    display: none;
  }
}

/* ==========================================================================
   WhatsApp floating button: icon only, with a pulsing glow.
   The visible label is dropped; the link keeps its aria-label, so the
   accessible name is unchanged for screen readers.
   ========================================================================== */
.whatsapp-float {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  animation: whatsapp-glow 2.6s ease-in-out infinite;
}

.whatsapp-float span {
  display: none;
}

.whatsapp-float i {
  font-size: 1.65rem;
  line-height: 1;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #1ebe5a;
  color: #fff;
  transform: translateY(-2px) scale(1.04);
}

@keyframes whatsapp-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .55),
      0 0 18px 2px rgba(37, 211, 102, .35),
      0 10px 24px rgba(10, 61, 42, .28);
  }

  50% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0),
      0 0 26px 6px rgba(37, 211, 102, .55),
      0 10px 24px rgba(10, 61, 42, .28);
  }
}

/* Respect a reduced-motion preference: keep a steady halo, drop the pulse. */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    animation: none;
    box-shadow: 0 0 18px 3px rgba(37, 211, 102, .45),
      0 10px 24px rgba(10, 61, 42, .28);
  }
}

@media (max-width: 600px) {
  .whatsapp-float {
    width: 3.1rem;
    height: 3.1rem;
  }

  .whatsapp-float i {
    font-size: 1.45rem;
  }
}

/* Home slide 1 qualifications: same chip shape as the speciality pills,
   tinted mint so they read as credentials and match the About portrait. */
.home-hero .hero-quals span {
  border-color: rgba(117, 212, 194, .45);
  background: rgba(117, 212, 194, .12);
  color: var(--secondary);
}

/* Slide 3 (Fortis Hospital exterior): anchor the crop to the bottom so the
   building and forecourt stay in frame while the extended sky absorbs the
   vertical crop at wider and taller viewports. */
.home-hero .hero-hospital-slide {
  background-position: center bottom;
}

/* Visit information card: "Contact & directions" plus a click-to-call button. */
.home-visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

/* Same solid dark treatment as "Contact & directions"; only the icon
   needs sizing, so .btn-dark supplies the colours. */
.btn-call i {
  font-size: .82rem;
}