@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================
   ALTIVA CELLULAR THERAPY — GLOBAL STYLES
   ============================================ */

:root {
  --navy:        #0A2240;
  --navy-deep:   #0a0e27;
  --blue:        #1A78C2;
  --blue-light:  #3B9DD2;
  --blue-pale:   #EAF4FB;
  --gold:        #C8A96E;
  --gold-dark:   #A8893E;
  --white:       #FFFFFF;
  --off-white:   #F7F9FC;
  --gray-100:    #F1F4F8;
  --gray-200:    #E2E8F0;
  --gray-400:    #94A3B8;
  --gray-600:    #64748B;
  --gray-800:    #1E293B;
  --text:        #1A2B3C;
  --text-light:  #4A6078;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --shadow:      0 4px 20px rgba(10,34,64,0.12);
  --shadow-lg:   0 12px 48px rgba(10,34,64,0.18);
  --max-width:   1200px;
  --transition:  all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: white;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(10,34,64,0.1);
  transition: var(--transition);
}
.nav.scrolled {
  box-shadow: 0 2px 20px rgba(10,34,64,0.12);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.nav__logo-img {
  width: 220px;
  height: auto;
  display: block;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__links a {
  color: var(--text-light);
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: var(--transition);
}
.nav__links a:hover {
  color: var(--navy);
  background: var(--gray-100);
}
.nav__dropdown {
  position: relative;
}
.nav__dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text-light);
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: var(--transition);
  background: none;
  border: none;
  font-family: var(--font-body);
}
.nav__dropdown-toggle:hover {
  color: var(--navy);
  background: var(--gray-100);
}
.nav__dropdown-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #0a0e27;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 8px;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition);
  z-index: 200;
}
.nav__dropdown:hover .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__dropdown-menu a {
  display: block;
  padding: 9px 14px;
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: var(--transition);
}
.nav__dropdown-menu a:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}
.nav__cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav__phone {
  color: var(--text-light);
  font-size: 1rem;
  text-decoration: none;
  transition: var(--transition);
}
.nav__phone:hover {
  color: var(--navy);
}
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav__hamburger span {
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: var(--transition);
  display: block;
}
.nav__mobile {
  display: none;
  background: #0a0e27;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nav__mobile.open {
  display: block;
}
.nav__mobile a {
  display: block;
  padding: 12px 0;
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 1rem;
  text-decoration: none;
}
.nav__mobile a:last-of-type {
  border-bottom: none;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold);
  color: var(--navy);
}
.btn-gold:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(200,169,110,0.35);
}
.btn-outline {
  border: 2px solid var(--blue);
  color: var(--blue);
  background: transparent;
}
.btn-outline:hover {
  background: var(--blue);
  color: white;
}
.btn-white {
  border: 2px solid rgba(255,255,255,0.4);
  color: white;
  background: transparent;
}
.btn-white:hover {
  border-color: white;
  background: rgba(255,255,255,0.08);
}
.btn-navy {
  background: var(--navy);
  color: white;
}
.btn-navy:hover {
  background: var(--navy-deep);
  transform: translateY(-1px);
}
.btn-lg {
  padding: 16px 36px;
  font-size: 1.05rem;
}
.btn-sm {
  padding: 10px 22px;
  font-size: 1rem;
}

/* ============================================
   LAYOUT
   ============================================ */

.section {
  padding: 72px 0;
}
.section--sm {
  padding: 48px 0;
}
.section--lg {
  padding: 96px 0;
}
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.section--dark {
  background: var(--navy-deep);
}
.section--navy {
  background: var(--navy);
}
.section--light {
  background: var(--off-white);
}
.section--white {
  background: white;
}
.section--blue-pale {
  background: var(--blue-pale);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.section-label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.section-label--gold {
  color: var(--gold);
}
.section-label--white {
  color: rgba(255,255,255,0.6);
}
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
}
h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--navy);
  margin-bottom: 16px;
}
h2.white {
  color: white;
}
h3 {
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 12px;
}
p {
  color: var(--text-light);
  line-height: 1.75;
  margin-bottom: 16px;
}
p:last-child {
  margin-bottom: 0;
}
a {
  transition: var(--transition);
}
strong {
  color: var(--text);
  font-weight: 600;
}

/* ============================================
   PAGE HERO (INNER PAGES)
   ============================================ */

.page-hero {
  background-color: #0a0e27;
  background-image: linear-gradient(90deg, rgba(10,14,39,0.92) 0%, rgba(10,14,39,0.78) 30%, rgba(10,14,39,0.45) 60%, rgba(10,14,39,0.20) 100%), var(--hero-bg, linear-gradient(135deg, #0a0e27 0%, #0A2240 55%, #0D3566 100%));
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  min-height: 320px;
  display: flex;
  align-items: center;
  padding-top: 72px;
}
.page-hero__inner {
  padding: 56px 24px 60px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.page-hero__label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: white;
  font-weight: 600;
  line-height: 1.08;
}
.page-hero p {
  color: rgba(255,255,255,0.7);
  font-size: 1.125rem;
  max-width: 600px;
  margin-top: 16px;
  line-height: 1.7;
}

/* ============================================
   TRUST BAR
   ============================================ */

.trust-bar {
  background: var(--navy);
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.trust-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  border-right: 1px solid rgba(255,255,255,0.1);
  flex: 1;
}
.trust-bar__item:last-child {
  border-right: none;
}
.trust-bar__icon {
  width: 36px;
  height: 36px;
  background: rgba(59,157,210,0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust-bar__icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--blue-light);
  fill: none;
}
.trust-bar__value {
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  display: block;
}
.trust-bar__label {
  color: rgba(255,255,255,0.5);
  font-size: 0.875rem;
  display: block;
}

/* ============================================
   TREATMENT CARDS
   ============================================ */

.treatment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.treatment-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: var(--transition);
  text-decoration: none;
  display: block;
}
.treatment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-light);
}
.treatment-card__icon {
  width: 56px;
  height: 56px;
  background: rgba(26,120,194,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.treatment-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.5;
}
.treatment-card h3 {
  font-size: 1.125rem;
  color: var(--navy);
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-weight: 700;
}
.treatment-card p {
  font-size: 1.125rem;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 20px;
}
.treatment-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 600;
  font-size: 1rem;
}
.treatment-card__link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  transition: var(--transition);
}
.treatment-card:hover .treatment-card__link svg {
  transform: translateX(3px);
}

/* ============================================
   PATIENT JOURNEY
   ============================================ */

.journey-steps {
  display: flex;
  gap: 0;
  counter-reset: step;
}
.journey-step {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 12px;
}
.journey-step::before {
  counter-increment: step;
  content: counter(step);
  width: 48px;
  height: 48px;
  background: var(--blue);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 auto 16px;
}
.journey-step::after {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(50% + 24px);
  width: calc(100% - 48px);
  height: 2px;
  background: var(--gray-200);
}
.journey-step:last-child::after {
  display: none;
}
.journey-step h4 {
  font-size: 1.125rem;
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 8px;
}
.journey-step p {
  font-size: 1.125rem;
  color: var(--text-light);
  line-height: 1.55;
}

/* ============================================
   DOCTOR SECTION
   ============================================ */

.doctor-section {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.doctor-photo-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-width: 380px;
}
.doctor-photo-wrap img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.doctor-content .section-label {
  margin-bottom: 8px;
}
.doctor-title-tag {
  font-size: 0.875rem;
  color: var(--blue);
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  display: block;
  font-style: italic;
}
.doctor-credentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
.doctor-cred {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.875rem;
  color: var(--text);
  font-weight: 600;
  border-left: 3px solid var(--blue);
}

/* ============================================
   FORMS
   ============================================ */

.form-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: var(--shadow-lg);
}
.form-group {
  margin-bottom: 20px;
}
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
.form-label span {
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 400;
  margin-left: 4px;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--text);
  font-family: var(--font-body);
  background: white;
  transition: border-color 0.2s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,120,194,0.1);
}
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}
textarea.form-control {
  resize: vertical;
  min-height: 80px;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.file-upload-label {
  display: block;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-light);
  font-size: 1rem;
}
.file-upload-label:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.file-upload-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ============================================
   CTA BANNER
   ============================================ */

.cta-banner {
  background: var(--navy-deep);
  padding: 80px 24px;
  text-align: center;
}
.cta-banner h2 {
  color: white;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: 16px;
}
.cta-banner p {
  color: rgba(255,255,255,0.65);
  font-size: 1.125rem;
  max-width: 520px;
  margin: 0 auto 36px;
}
.cta-banner__sub {
  color: rgba(255,255,255,0.4);
  font-size: 0.875rem;
  margin-top: 20px;
}

/* ============================================
   PRICING
   ============================================ */

.pricing-section {
  max-width: 800px;
  margin: 0 auto;
}
.pricing-category {
  margin-bottom: 48px;
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}
.pricing-category h3 {
  color: var(--navy);
  border-bottom: 2px solid var(--blue-pale);
  padding-bottom: 12px;
  margin-bottom: 20px;
  font-size: 1.2rem;
}
.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-200);
}
.pricing-row:last-child {
  border-bottom: none;
}
.pricing-row__name {
  font-size: 1.125rem;
  color: var(--text);
}
.pricing-row__price {
  font-weight: 700;
  color: var(--navy);
  font-size: 1.125rem;
}
.pricing-note {
  background: var(--blue-pale);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 32px;
  font-size: 0.875rem;
  color: var(--navy);
  border-left: 3px solid var(--blue);
}

/* ============================================
   FAQ
   ============================================ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
}
details.faq-item {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}
details.faq-item[open] {
  border-color: var(--blue-light);
  box-shadow: var(--shadow);
}
details.faq-item summary {
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
}
details.faq-item summary::-webkit-details-marker {
  display: none;
}
details.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--blue);
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 16px;
}
details.faq-item[open] summary::after {
  content: '−';
}
.faq-answer {
  padding: 0 24px 20px;
  color: var(--text-light);
  font-size: 1.125rem;
  line-height: 1.8;
}

/* ============================================
   PROTOCOL TIMELINE
   ============================================ */

.protocol-timeline {
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 32px 0;
  border-left: 4px solid var(--blue);
}
.protocol-timeline h4 {
  color: var(--navy);
  margin-bottom: 20px;
  font-size: 1.125rem;
  font-family: var(--font-body);
  font-weight: 700;
}
.protocol-day {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-200);
  align-items: flex-start;
}
.protocol-day:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.protocol-day__label {
  font-weight: 700;
  color: var(--blue);
  font-size: 0.875rem;
  min-width: 90px;
  flex-shrink: 0;
  padding-top: 2px;
}
.protocol-day__text {
  font-size: 1.125rem;
  color: var(--text-light);
  line-height: 1.6;
}

/* ============================================
   FOOTER
   ============================================ */


/* ============================================
   STICKY MOBILE CTA
   ============================================ */

.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 990;
  background: #0a0e27;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 12px 16px;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .nav__logo-img { width: 180px; }
  .doctor-section { grid-template-columns: 1fr; gap: 48px; }
  .trust-bar__inner { flex-wrap: wrap; }
  .trust-bar__item { width: 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .trust-bar__item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); }
  .journey-steps { flex-wrap: wrap; gap: 32px; }
  .journey-step::after { display: none; }
  .journey-step { min-width: 140px; }
  .doctor-credentials { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  /* The desktop links and the CTA stop fitting on one row here. They already
     did not fit between 901px and 1024px, where the button was clipped off the
     right edge of the page, and a longer CTA label makes that worse. Hand over
     to the mobile menu at 1024 instead of 900, and keep the CTA itself on
     screen: the primary action never hides inside a menu (rule 5). */
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__cta { display: flex; margin-left: auto; }
  .nav__cta .btn { min-height: 48px; display: inline-flex; align-items: center;
    justify-content: center; padding: 0 16px; white-space: nowrap; }
}

@media (max-width: 900px) {
  /* Treatment page inline 2-col grids: stack at tablet */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:24px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:28px"] {
    grid-template-columns: 1fr !important;
  }
  /* Comparison table inside MUSE page: keep 2-col down to 600px */
  /* Mobile menu already took over at 1024px above. The CTA is deliberately not
     hidden here: it used to be, which left 769px to 900px with no visible
     primary action at all. */
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
}

@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .nav__logo-img { width: 150px; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 68px; }
  .treatment-grid { grid-template-columns: 1fr; }
  .journey-steps { flex-direction: column; align-items: center; }
  .form-card { padding: 28px 20px; }
  /* Mobile: allow long button labels to wrap instead of forcing container width */
  .btn { white-space: normal; text-align: center; }
  .page-hero h1 { font-size: 2rem; }
  h2 { font-size: 1.8rem; }

  /* ---------------------------------------------------------------------
     HERO IMAGE MUST FILL THE HERO ON A PHONE.
     treatments/joint-orthopedic.html sets background-size: cover, 140% auto
     inline. "auto" takes its height from the width, so on a 375px screen the
     layer is 525px wide and, on a 2064x512 image, only 130px tall inside a
     320px hero. The other 190px, 59% of the hero, painted as the page-hero
     background-color and read as a solid black band, and background-position
     100% pinned the picture to the bottom so the band sat at the top with the
     title stranded on its edge.
     cover makes the layer fill the box at any width. background-position is
     deliberately left alone. !important is needed only because the value it
     has to beat is an inline style. Every other page already computes to
     cover, so this is a no-op for them.
     --------------------------------------------------------------------- */
  .page-hero { background-size: cover, cover !important; }
  /* Quick info 3-col rows: stack on mobile */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Why Mexico inline grids: stack on mobile */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:64px"] {
    display: block !important;
  }
  [style*="grid-template-columns:1fr 1fr"][style*="gap:64px"] > div + div {
    margin-top: 32px;
  }
  /* 4-pillar strip: 2-col on mobile */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Pricing cards: stack on mobile */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:28px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:24px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   DISCLAIMER BLOCK (shared)
   ============================================ */

.disclaimer-block {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 18px 24px;
  border-left: 3px solid var(--gray-400);
}
.disclaimer-block p {
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin: 0;
}

/* ==========================================================
   MOBILE LAYOUT SPEC — mobile only, desktop untouched
   sticky top CTA · 48px touch targets · 5-item nav
   ========================================================== */
@media (max-width: 768px) {
  /* Sticky booking CTA at the TOP (.nav is position:fixed) */
  .nav__inner { height: 64px; padding: 0 14px; gap: 10px; }
  .nav__logo-img { width: 124px; }
  .nav__cta { display: flex !important; margin-left: auto; }
  .nav__cta .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 0.875rem; white-space: nowrap; }
  .nav__phone { display: none; }

  /* 48px minimum touch targets */
  .nav__hamburger { min-width: 48px; min-height: 48px; align-items: center; justify-content: center; padding: 12px; }
  .nav__mobile a { min-height: 48px; display: flex; align-items: center; font-size: 1rem; }
  .btn, .btn-sm, .btn-lg { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .nav__dropdown-toggle, .faq-item__q, .faq-item button { min-height: 48px; }
  input, select, textarea { min-height: 48px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */

  /* CTA now lives at the top: retire the bottom bar */
  .sticky-cta { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ==========================================================
   CLINIC CAROUSEL (About page) — one photo at a time
   Fixed-height viewport keeps page length predictable.
   Palette only: navy #0A2240, gold #C8A96E, white, off-white.
   ========================================================== */
.carousel { position: relative; max-width: 980px; margin: 48px auto 0; outline: none; }
.carousel:focus-visible { box-shadow: 0 0 0 3px rgba(26,120,194,.45); border-radius: 16px; }

.carousel__viewport {
  position: relative; overflow: hidden; border-radius: 16px;
  /* The frame matches the photos' own 4:3 shape instead of a fixed pixel
     height. A fixed height forced the images to be letterboxed or, on any
     photo taller than the box, visibly cut off. With the frame at the same
     aspect ratio as the source files (1600x1200), the whole photo fills it
     edge to edge with nothing cropped and no grey bars. */
  aspect-ratio: 4 / 3;
  height: auto;
  background: var(--gray-100);
  box-shadow: 0 14px 40px -18px rgba(10,34,64,.45);
}
.carousel__track {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.carousel__slide { flex: 0 0 100%; height: 100%; margin: 0; cursor: zoom-in; }
/* contain, not cover: show the whole photo so nothing is ever cropped. With a
   4:3 frame and 4:3 sources this fills exactly; it also protects any future
   photo of a different shape, which would letterbox rather than get cut off. */
.carousel__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* arrows — 48x48 minimum tap target, white glyph on navy scrim */
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; min-width: 48px; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(10,34,64,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s ease;
}
.carousel__arrow:hover, .carousel__arrow:focus-visible { background: rgba(10,34,64,.85); }
.carousel__arrow svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carousel__arrow--prev { left: 12px; }
.carousel__arrow--next { right: 12px; }

/* dots */
.carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.carousel__dot {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--gold-dark); background: transparent; transition: background .2s ease;
}
.carousel__dot.is-active { background: var(--gold-dark); }

@media (max-width: 768px) {
  /* aspect-ratio carries over from the base rule; only the corner softens */
  .carousel__viewport { border-radius: 14px; }
  .carousel__arrow--prev { left: 8px; }
  .carousel__arrow--next { right: 8px; }
}

/* Lightbox */
.gal-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gal-modal[hidden] { display: none; }
.gal-modal__backdrop { position: absolute; inset: 0; background: rgba(6,10,24,.92); }
.gal-modal img { position: relative; z-index: 1; max-width: 100%; max-height: 82vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.gal-modal__close {
  position: absolute; top: 18px; right: 20px; z-index: 3;
  width: 48px; height: 48px; min-width: 48px; min-height: 48px;
  border: 0; border-radius: 50%; background: #fff; color: var(--navy);
  font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.gal-modal__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; min-width: 48px; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.14);
  transition: background .2s ease;
}
.gal-modal__arrow:hover, .gal-modal__arrow:focus-visible { background: rgba(200,169,110,.3); }
.gal-modal__arrow svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gal-modal__arrow--prev { left: 18px; }
.gal-modal__arrow--next { right: 18px; }

@media (prefers-reduced-motion: reduce) { .carousel__track { transition: none; } }

/* Accessibility: form controls never below 1rem (prevents mobile auto-zoom on focus) */
input, textarea, select, .form-control {
  font-size: 1rem;
}


/* COFEPRIS trust line — point-of-hesitation placement (RULE 13) */
.trust-line { display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  font-size: 0.875rem; line-height: 1.5; color: var(--text-light); margin-top: 14px; }
.trust-line svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--gold-dark); fill: none; stroke-width: 2; }
.trust-line--center { justify-content: center; }
.trust-line--dark { color: rgba(255,255,255,0.75); }
.trust-line--dark svg { stroke: var(--gold); }

/* ==========================================================
   FOOTER: one centre axis, tight and evenly spaced
   ========================================================== */
.footer { background: #0a0f2e; color: rgba(255,255,255,0.62); padding: 36px 0 30px; text-align: center; }
.footer__in { max-width: 780px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin: 0; }
.footer__nav a { color: rgba(255,255,255,0.68); font-size: 1rem; text-decoration: none;
  min-height: 48px; display: inline-flex; align-items: center; padding: 0 14px; }
.footer__nav a:hover { color: #fff; }
.footer__rule { width: 100%; max-width: 520px; height: 1px; border: 0;
  background: rgba(255,255,255,0.14); margin: 0; }
.footer__copy { margin: 0; font-size: 0.875rem; color: rgba(255,255,255,0.55); }
.footer__legal { margin: 0; font-size: 0.875rem; }
.footer__legal a { color: rgba(255,255,255,0.62); text-decoration: none; }
.footer__legal a:hover { color: #fff; }
.footer__note { margin: 0; font-size: 0.875rem; line-height: 1.6;
  color: rgba(255,255,255,0.55); max-width: 640px; }
@media (max-width: 768px) {
  .footer { padding: 30px 0 26px; }
  .footer__in { gap: 14px; }
}

/* Mobile Treatments: expands inline, matching the desktop dropdown */
.nav__mobile-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 48px; padding: 12px 0; margin: 0;
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8); font-family: inherit; font-size: 1rem;
  text-align: left; cursor: pointer;
}
.nav__mobile-toggle svg { width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s ease; }
.nav__mobile-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__mobile-sub { display: none; max-height: min(46vh, 340px); overflow-y: auto;
  -webkit-overflow-scrolling: touch; margin: 2px 0 2px 2px; padding-left: 14px;
  border-left: 2px solid rgba(200,169,110,0.45); }
.nav__mobile-sub.open { display: block; }
.nav__mobile-sub a { min-height: 48px; display: flex; align-items: center;
  padding: 10px 0; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav__mobile-sub a:last-child { border-bottom: none; }

/* Registered trademark mark. Smaller than the copy it sits in and raised.
   line-height:0 keeps the raised glyph from growing the line box.
   0.875rem is the type floor (design standard rule 6), so it cannot go
   smaller without breaching the standard. */
.tm { font-size: 0.875rem; vertical-align: super; line-height: 0; }