/*
Theme Name: Dr. Om Baghele Orthopaedic
Theme URI: https://drbaghele.com
Author: Custom Development
Author URI: https://drbaghele.com
Description: Professional orthopaedic surgeon website theme for Dr. Om Baghele, Gondia.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orthopaedic
Tags: medical, health, doctor, orthopaedic, surgery
*/

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
/* Self-hosted fonts — identical on local and live */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/poppins-800-latin.woff2') format('woff2');
}

/* ============================================================
   CSS VARIABLES / DESIGN TOKENS
   ============================================================ */
:root {
  /* Colors — matched to Figma design tokens */
  --color-dark-blue:       #0B4F8A;
  --color-primary-blue:    #0B4F8A;
  --color-primary-blue-2:  #1A6BB5;
  --color-green-accent:    #3BAA6D;
  --color-light-green:     #DCFCE7;
  --color-bg-main:         #F8FAFC;
  --color-bg-white:        #FFFFFF;
  --color-bg-dark:         #0B4F8A;
  --color-heading:         #0B4F8A;
  --color-body:            #4B5563;
  --color-muted:           #6B7280;
  --color-light-text:      #6B7280;
  --color-white:           #FFFFFF;
  --color-border:          #E2E8F0;

  /* Typography */
  --font-heading:          'Manrope', sans-serif;
  --font-body:             'Inter', sans-serif;

  /* Spacing */
  --section-pad:           80px;
  --card-pad:              24px;
  --gap-sm:                8px;
  --gap-md:                16px;
  --gap-lg:                24px;
  --gap-xl:                48px;
  --gap-xxl:               64px;

  /* Borders */
  --radius-btn:            8px;
  --radius-card:           12px;
  --radius-lg:             16px;

  /* Extended colour tokens */
  --color-navy:            #1B3A6B;
  --color-navy-deep:       #0F2D5A;
  --color-bg-light-blue:   #EBF4FF;

  /* Reusable gradients */
  --gradient-primary:      linear-gradient(135deg, #0B4F8A 0%, #1A6BB5 100%);

  /* Shadow */
  --shadow-card:           0px 4px 20px rgba(0,0,0,0.05);
  --shadow-hover:          0px 8px 30px rgba(15,76,138,0.12);
  --shadow-primary:        0 8px 28px 0 rgba(11, 79, 138, 0.30);

  /* Layout */
  --container-max:         1200px;
  --container-pad:         120px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: 88px; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
  background-color: var(--color-bg-main);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

ul, ol { list-style: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(26px, 3.5vw, 40px); }
h3 { font-size: clamp(18px, 2.5vw, 24px); }
h4 { font-size: 18px; }
h5 { font-size: 16px; }

p { color: var(--color-body); line-height: 1.7; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  /* padding-left: 40px;
  padding-right: 40px; */
}

.section-pad {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 16px;
}

/* Green pill — homepage sections (green text + green tinted bg) */
.sl-green {
  color: #3BAA6D;
  background: rgba(59,170,109,0.10);
}

/* Neutral pill — combined-tag labels (gray text + light gray bg) */
.sl-neutral {
  color: #4A5568;
  background: #F0F2F5;
  border: 1px solid #E2E8F0;
}

/* Blue pill — content page sections (blue text + light blue bg, no border) */
.sl-blue {
  color: #084F8A;
  background: rgba(8,79,138,0.07);
}

/* Blue outlined pill — FAQ sections (blue text + light blue bg + blue border) */
.sl-blue-outline {
  color: #084F8A;
  background: rgba(8,79,138,0.06);
  border: 1px solid rgba(8,79,138,0.18);
}

/* Blue plain text — philosophy/treatments labels (no bg, no padding) */
.sl-blue-text {
  color: #084F8A;
  background: none;
  padding: 0;
  border-radius: 0;
  letter-spacing: 1.2px;
}

/* White pill — labels on dark/navy background sections */
.sl-white {
  color: rgba(255,255,255,0.80);
  background: rgba(255,255,255,0.10);
}

.section-header {
  text-align: center;
  /* max-width: 680px; */
  margin: 0 auto var(--gap-xxl);
}

.section-header h2 { margin-bottom: 16px; font-weight: 800; }
.section-header p { font-size: 16px; color: var(--color-body); line-height: 1.7; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-green-accent);
  color: var(--color-white);
  border-color: var(--color-green-accent);
}

.btn-primary:hover {
  /* background: var(--color-green-accent);
  border-color: var(--color-green-accent); */
  transform: translateY(-1px);
}

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

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

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

.btn-white:hover {
  background: var(--color-white);
  color: var(--color-primary-blue);
  border-color: var(--color-white);
}

.btn-outline-white {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.5);
}

.btn-outline-white:hover {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
}

.btn svg { width: 16px; height: 16px; }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-white);
  box-shadow: 0 1px 16px rgba(0,0,0,0.07);
  transition: transform 0.35s ease, box-shadow 0.3s ease;
}
#site-header.header-hidden {
  transform: translateY(-100%);
}
.header-spacer {
  height: 72px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  height: 72px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* OB monogram logo image */
.logo-img {
  width: 46px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-heading);
  line-height: 1;
}

.logo-text span {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-body);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.main-nav { display: flex; align-items: center; gap: 32px; }

.main-nav a {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-heading);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.main-nav a:hover,
.main-nav a.active,
.main-nav a.nav-parent.active {
  color: var(--color-primary-blue);
  border-bottom-color: var(--color-primary-blue);
}

/* Dropdown nav */
.nav-item {
  position: relative;
}
.nav-item > a {
  display: inline-flex;
  align-items: center;
}
.nav-chevron {
  transition: transform 0.2s ease;
}
.nav-item:hover .nav-chevron {
  transform: rotate(180deg);
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 14px;
  z-index: 999;
  min-width: 220px;
}
.nav-dropdown-inner {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(15,43,77,0.13);
  padding: 6px 0;
  border: 1px solid rgba(0,0,0,0.06);
  position: relative;
}
.nav-dropdown-inner::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.06);
  border-top: 1px solid rgba(0,0,0,0.06);
}
.nav-item:hover .nav-dropdown {
  display: block;
}
.nav-dropdown-inner a {
  display: block;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-heading);
  white-space: nowrap;
  border-bottom: none;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown-inner a:hover {
  background: var(--color-bg);
  color: var(--color-primary-blue);
  border-bottom: none;
}

.header-actions { display: flex; align-items: center; gap: 12px; }

.phone-link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading);
  border: 1.5px solid #D1D9E6;
  border-radius: 10px;
  padding: 9px 18px;
  background: #fff;
  white-space: nowrap;
  transition: all 0.2s;
}

.phone-link:hover { border-color: var(--color-primary-blue); color: var(--color-primary-blue); }
.phone-link svg { width: 15px; height: 15px; color: var(--color-primary-blue); flex-shrink: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-heading);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
#hero {
  /* background: url('images/HeroSection.png') center top / cover no-repeat, linear-gradient(135deg, #EEF3FF 0%, var(--color-bg-light-blue) 60%, #F8FAFC 100%); */
  padding-top: 60px;
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  min-height: 560px;
}

.hero-content { padding-bottom: 48px; }

.hero-location-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-light-blue);
  color: var(--color-primary-blue);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid #DBEAFE;
}

.hero-content h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  color: var(--color-heading);
  margin-bottom: 16px;
  line-height: 1.1;
}

.hero-h1-sub { display: block; color: var(--color-primary-blue); }

.hero-content p.hero-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-body);
  max-width: 480px;
  margin-bottom: 32px;
}

.hero-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.hero-actions-row1 { display: flex; gap: 10px; flex-wrap: wrap; }

.hero-cta,
.hero-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-primary);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.hero-cta:hover,
.hero-cta-outline:hover { box-shadow: var(--shadow-primary); transform: translateY(-1px); }

.hero-cta-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  background: #fff;
  color: #0B4F8A;
  border: 0.8px solid rgba(11, 79, 138, 0.20);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.hero-cta-light:hover { border-color: rgba(11, 79, 138, 0.20); background: #fff; }

.hero-cta-whatsapp {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, #25D366 0%, #20B659 100%);
  color: #fff;
  border: none;
  box-shadow: 0 8px 28px 0 rgba(37, 211, 102, 0.28);
  text-decoration: none;
  transition: all 0.2s;
  width: max-content;
}
.hero-cta-whatsapp:hover { background: linear-gradient(135deg, #25D366 0%, #20B659 100%);transform: translateY(-1px); }

.hero-trust-text { margin-top: 4px; }
.hero-trust-text p { font-size: 13px; color: var(--color-body); line-height: 1.6; margin-bottom: 4px; }
.hero-hospital { font-weight: 600 !important; color: var(--color-heading) !important; }

/* Hero image / right side */
.hero-image-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 48px;
}

.hero-photo-blob {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: #DDE8FF;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.hero-photo-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-doctor-photo {
  width: 100%;
  max-width: 548px;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

.hero-years-badge {
  position: absolute;
  /* top: 40px; */
  left: 10px;
  background: var(--color-green-accent);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 12px 16px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(59,170,109,0.4);
  z-index: 2;
  max-width: 100px;
}
.hero-years-badge strong { display: block; font-family: var(--font-heading); font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.hero-years-badge span { font-size: 12px; color: rgba(255,255,255,0.9); }

.hero-rating-card {
  position: absolute;
  bottom: 120px;
  right: -10px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(15,43,77,0.15);
  min-width: 160px;
  z-index: 2;
}
.hero-rating-stars { color: #f59e0b; font-size: 12px; letter-spacing: 1px; margin-bottom: 2px; }
.hero-rating-score { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--color-heading); line-height: 1; margin-bottom: 4px; }
.hero-rating-text { font-size: 11px; color: var(--color-body); line-height: 1.4; margin-bottom: 3px; font-style: italic; }
.hero-rating-count { font-size: 10px; color: var(--color-primary-blue); font-weight: 600; }

.hero-photo-caption {
  text-align: center;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}
.hero-photo-caption strong { display: block; font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--color-heading); }
.hero-photo-caption span { font-size: 13px; color: var(--color-body); }

/* Credential Strip */
.hero-cred-strip {
  background: linear-gradient(135deg, #EEF3FF 0%, var(--color-bg-light-blue) 60%, #F8FAFC 100%);
  border-top: none;
  margin-top: 0;
  padding: 32px 0 36px;
}

.hero-cred-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 16px;
}

.hero-cred-card {
  border: none;
  border-radius: var(--radius-card);
  padding: 18px 22px;
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(15,43,77,0.08);
}
.hero-cred-card strong { display: block; font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--color-heading); margin-bottom: 4px; }
.hero-cred-card span { font-size: 12px; color: var(--color-body); }

.hero-tagline {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-body);
  font-style: italic;
}

/* ============================================================
   WHAT ARE YOU STRUGGLING WITH
   ============================================================ */
#struggles {
  background: var(--color-bg-main);
  padding: var(--section-pad) 0;
}


.struggles-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.struggle-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px 20px;
  border: 0.8px solid rgba(11, 79, 138, 0.10);
  box-shadow: 0 2px 16px 0 rgba(11, 79, 138, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.struggle-card:hover {
  border-color: rgba(11, 79, 138, 0.25);
  box-shadow: 0 6px 24px rgba(11, 79, 138, 0.13);
  transform: translateY(-3px);
}

.struggle-icon-wrap {
  width: 84px;
  height: 84px;
  background: rgba(11, 79, 138, 0.07);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.struggle-icon-wrap img {
  width: 52px;
  height: auto;
  object-fit: contain;
  display: block;
}

.struggle-card h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #0F2B4C;
  line-height: 1.3;
}

.struggle-card p {
  font-family: var(--font-body);
  font-size: 13px;
  color: #6B7280;
  line-height: 1.55;
  margin: 0 0 20px;
  flex: 1;
}

.struggle-learn-more {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #0B4F8A;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  margin-top: auto;
}

.struggle-learn-more:hover { color: #1A6BB5; }
.struggle-learn-more:hover svg path { stroke: #1A6BB5; }

/* keep old .learn-more for any other usage */
.learn-more {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #0B4F8A;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.learn-more:hover { color: #1A6BB5; }

/* ============================================================
   SERVICES SECTION
   ============================================================ */
#services {
  background: #E8F2EE;
  padding: var(--section-pad) 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
}

.service-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: all 0.25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(27,95,175,0.2);
}

.service-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .service-card-image img { transform: scale(1.04); }

/* Featured 3-card variant — illustration floats on section background */
.service-card--featured {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  padding: 0 16px 24px;
  overflow: visible;
}
.service-card--featured:hover { transform: translateY(-4px); box-shadow: none; border: none; }

.service-illus-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  margin-bottom: 24px;
}

.service-illus-blob {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--blob-bg, #FFF7E6);
  z-index: 0;
}

.service-illus-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 260px;
  height: 260px;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.service-card--featured:hover .service-illus-img { transform: scale(1.06); }

.service-feat-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary-blue);
  margin-bottom: 10px;
  text-align: center;
}

.service-feat-desc {
  font-size: 14px;
  color: var(--color-body);
  line-height: 1.65;
  text-align: center;
}

/* "View All" button for services */
.btn-services-all {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 234px;
  height: 53px;
  padding: 0 24px;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  background: #3BAA6D;
  color: #fff;
  border: none;
  box-shadow: 0 8px 28px 0 rgba(59, 170, 109, 0.30);
  text-decoration: none;
  transition: all 0.2s;
}
.btn-services-all:hover { background: #2E9460; box-shadow: 0 8px 28px 0 rgba(59, 170, 109, 0.40); color: #fff; transform: translateY(-1px); }

.service-card-body { padding: 20px; }

.service-card-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-heading);
}

.service-card-body p {
  font-size: 13px;
  color: var(--color-body);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* ============================================================
   DOCTOR PROFILE SECTION
   ============================================================ */
#doctor {
  background: var(--color-bg-white);
  padding: var(--section-pad) 0;
}

.doctor-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: start;
}

.doctor-image-wrap {
  position: relative;
  width: 560px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.doctor-photo-blob {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: #DDE8FF;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.doctor-main-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 506px;
  height: auto;
  object-fit: contain;
  display: block;
}

.doctor-procedures-card {
  position: absolute;
  top: 20px;
  left: -10px;
  display: flex;
  width: 164px;
  height: 110px;
  padding: 20px 24px;
  flex-direction: column;
  align-items: flex-start;
  background: #0B4F8A;
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(11, 79, 138, 0.32);
  z-index: 2;
}
.doctor-procedures-card strong { display: block; font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 8px; }
.doctor-procedures-card span { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.9); line-height: 1.5; }

.doctor-qualifications-card {
  position: absolute;
  bottom: 20px;
  right: -10px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  box-shadow: var(--shadow-hover);
  z-index: 2;
  min-width: 200px;
}
.doctor-qualifications-card h4 { font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-primary-blue); margin-bottom: 10px; }
.doctor-qualifications-card ul { display: flex; flex-direction: column; gap: 6px; }
.doctor-qualifications-card ul li { font-size: 13px; color: var(--color-heading); font-weight: 500; }
.doctor-qualifications-card ul li::before { content: '• '; color: var(--color-green-accent); }

.doctor-content { padding-bottom: 16px; }
.doctor-content h2 { margin-bottom: 4px; font-weight: 800; }

.doctor-content p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 16px;
  color: var(--color-body);
}

.doctor-quote {
  display: flex;
  padding: 28px 32px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 18px;
  border-left: 4px solid #3BAA6D;
  background: #E6F2EE;
  margin-bottom: 28px;
  margin-top: 8px;
  font-style: normal;
  font-size: 15px;
  color: var(--color-heading);
  line-height: 1.7;
  font-family: var(--font-body);
}
.doctor-quote cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: var(--color-primary-blue);
  margin-top: 8px;
}

.btn-read-profile {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 234px;
  height: 53px;
  padding: 0 24px;
  border-radius: 14px;
  background: linear-gradient(93deg, #0B4F8A 0%, #1A6BB5 100%);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  transition: all 0.2s;
  box-shadow: 0 6px 20px rgba(11, 79, 138, 0.28);
}
.btn-read-profile:hover { box-shadow: 0 6px 20px rgba(11, 79, 138, 0.28); color: #fff; transform: translateY(-1px); }

.btn-arrow-right{
  text-align: right;
}
.doctor-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.doctor-bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }

.doctor-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.cred-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-heading);
}
.cred-pill svg { width: 14px; height: 14px; color: var(--color-green-accent); }

/* ============================================================
   TRUST STATS / DARK SECTION
   ============================================================ */
#trust {
  background:
    radial-gradient(104.31% 124.66% at 20% 80%, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.00) 50%),
    radial-gradient(104.31% 124.66% at 80% 20%, rgba(59,170,109,0.12) 0%, rgba(0,0,0,0.00) 50%),
    linear-gradient(135deg, #071A2F 0%, #0B2B5A 40%, #071A2F 100%);
  padding: var(--section-pad) 0;
}

#trust .section-label { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); padding: 5px 12px; border-radius: 20px; }
#trust .section-header h2 { color: var(--color-white); }
#testimonials .section-header h2 {
  color: #0B4F8A;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 41.804px;
  font-style: normal;
  font-weight: 800;
  line-height: 62.706px;
}
#trust .section-header p { color: rgba(255,255,255,0.7); }
#trust .section-header { margin-bottom: 32px; }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-lg);
  margin-bottom: var(--gap-xl);
}

.trust-card {
  display: flex;
  width: 100%;
  padding: 36px 28px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 20px;
  border: 0.8px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.07);
  transition: background 0.2s;
}

.trust-card:hover { background: rgba(255,255,255,0.1); }

.trust-card-icon {
  width: 52px;
  height: 52px;
  background: rgba(59,170,109,0.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 1px solid rgba(59,170,109,0.25);
}

.trust-card-icon svg { width: 26px; height: 26px; color: #3BAA6D; stroke: #3BAA6D; }
.trust-card-icon img { width: auto; height: 26px; object-fit: contain; }

.trust-card h3 {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.35;
}

.trust-card p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; }

.trust-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-lg);
  margin-top: var(--gap-xl);
  padding: 40px 48px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 20px;
}

.trust-number {
  text-align: center;
}

.trust-number strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  color: #3BAA6D;
  line-height: 1;
  margin-bottom: 8px;
}

.trust-number strong em {
  font-style: normal;
  color: #3BAA6D;
}

.trust-number span {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.2px;
}

/* ============================================================
   PATIENT JOURNEY / PROCESS
   ============================================================ */
#journey {
  background: var(--color-bg-main);
  padding: var(--section-pad) 0;
}

#journey { background: #F0F4FF; }

.journey-steps {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 24px;
  position: relative;
}

.journey-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 2;
}

/* Odd steps = filled */
.step-number.step-filled {
  background: var(--color-heading);
  border: 3px solid var(--color-heading);
  color: #fff;
}

/* Even steps = outlined */
.step-number.step-outline {
  background: var(--color-white);
  border: 3px solid var(--color-primary-blue);
  color: var(--color-primary-blue);
}

/* Connector line across all steps */
.journey-steps::before {
  content: '';
  position: absolute;
  top: 26px;
  left: calc(100% / 16);
  right: calc(100% / 16);
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.journey-step h3 { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--color-primary-blue); }
.journey-step p { font-size: 12px; color: var(--color-body); line-height: 1.5; }

/* ============================================================
   FAQ SECTION
   ============================================================ */
#faq {
  background: #F0F4FA;
  padding: var(--section-pad) 0;
}
#faq .faq-left h2 {
  color: #0B4F8A;
  font-family: 'Poppins', sans-serif;
  font-size: 33.443px;
  font-weight: 800;
  line-height: 40.132px;
}
#faq .btn-primary { background: var(--color-navy); border-color: var(--color-navy); }
#faq .btn-primary:hover { background: #0D2A52; border-color: #0D2A52; transform: translateY(-1px); }

.faq-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 56px;
  align-items: start;
}

.faq-left h2 { margin-bottom: 16px; }
.faq-left p { margin-bottom: 28px; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-white);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.faq-question:hover { background: var(--color-bg-main); }

.faq-question h4 {
  color: var(--color-heading);
  flex: 1;
  padding-right: 12px;
  /* color: #1F2937; */
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22.4px; /* 140% */
}

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s;
  color: var(--color-primary-blue);
}

.faq-item.open .faq-icon {
  background: var(--color-primary-blue);
  color: white;
  border-color: var(--color-primary-blue);
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer { max-height: 600px; }

.faq-answer p {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-body);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
#testimonials {
  background: var(--color-white);
  padding: var(--section-pad) 0;
}

.testimonials-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

.testimonials-left { display: flex; flex-direction: column; gap: 20px; }

.testimonial-featured {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 4px 24px rgba(15,43,77,0.1);
  border: 1px solid var(--color-border);
}

.testimonial-stars { color: #f59e0b; font-size: 20px; margin-bottom: 16px; letter-spacing: 2px; }

.testimonial-quote {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-heading);
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author { display: flex; align-items: center; gap: 12px; }

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.testimonial-author strong { display: block; font-family: var(--font-heading); font-size: 15px; color: var(--color-heading); }
.testimonial-author span { font-size: 13px; color: var(--color-body); }

/* Selector buttons */
.testimonial-selectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.testimonial-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  font-family: var(--font-body);
  min-width: 0;
}

.testimonial-selector:hover { border-color: var(--color-primary-blue); }
.testimonial-selector.active { border-color: var(--color-primary-blue); background: var(--color-bg-light-blue); }

.selector-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.testimonial-selector > div { min-width: 0; overflow: hidden; }
.testimonial-selector strong { display: block; font-size: 13px; color: var(--color-heading); font-family: var(--font-heading); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testimonial-selector span { font-size: 11px; color: var(--color-body); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* At a Glance card */
.testimonials-glance {
  padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 24px;
    background: linear-gradient(160deg, #0B4F8A 8.49%, #061F38 91.51%);
    box-shadow: 0 16px 56px 0 rgba(11, 79, 138, 0.30);
}

.testimonials-glance h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 28px;
}

.glance-item { padding: 16px 0; }
.glance-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--color-green-accent);
  line-height: 1;
  margin-bottom: 4px;
}
.glance-item span { font-size: 13px; color: rgba(255,255,255,0.7); }
.glance-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 0; }

/* ============================================================
   CONTACT / APPOINTMENT SECTION
   ============================================================ */
#contact {
  background: var(--color-bg-white);
  padding: var(--section-pad) 0;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.contact-info h2 { margin-bottom: 16px; }
.contact-info p { margin-bottom: 28px; }

.contact-details { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item-icon svg { width: 18px; height: 18px; color: var(--color-primary-blue); }

.contact-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 2px;
}

.contact-item span { font-size: 14px; color: var(--color-body); }

.contact-info {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.contact-info h3 { margin-bottom: 24px; color: var(--color-primary-blue); }

.map-embed {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  height: 200px;
  background: var(--color-bg-main);
  position: relative;
  margin-top: 24px;
}

.map-embed iframe { width: 100%; height: 100%; border: none; }

.map-overlay-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-white);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 10;
}

.map-directions-btn {
  display: block;
  text-align: center;
  background: var(--color-white);
  color: var(--color-primary-blue);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-top: 1px solid var(--color-border);
  text-decoration: none;
  transition: background 0.2s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.map-directions-btn:hover { background: var(--color-white); }

.appointment-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--color-border);
}

.appointment-form h3 { margin-bottom: 8px; }
.form-subtitle { font-size: 14px; color: var(--color-body); margin-bottom: 24px; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group.full { grid-column: 1 / -1; }

.form-group label {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-heading);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-heading);
  background: var(--color-white);
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 0 3px rgba(27,95,175,0.1);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.form-submit { margin-top: 20px; }
.form-submit .btn { width: 100%; justify-content: center; }

/* New submit row with WhatsApp square button */
.form-submit-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.btn-form-submit {
  flex: 1;
    justify-content: center;
    gap: 12px;
    width: 234px;
    height: 53px;
    padding: 0 24px;
    border-radius: 14px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(93deg, #0B4F8A 0%, #1A6BB5 100%);
    color: #fff;
    border: none;
    box-shadow: 0 8px 28px 0 rgba(11, 79, 138, 0.28);
    text-decoration: none;
    transition: all 0.2s;
}

.btn-whatsapp-sq {
  display: flex;
  padding: 16px 20px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 12px;
  background: #25D366;
  box-shadow: 0 6px 20px 0 rgba(37, 211, 102, 0.25);
  color: #fff;
  border: none;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-whatsapp-sq:hover { background: #25D366; box-shadow: 0 6px 20px 0 rgba(37, 211, 102, 0.25); }

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: #061F38;
  padding-top: 64px;
  padding-bottom: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand { padding-right: 20px; }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* footer logo img inherits .logo-img */

.footer-logo-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
}

.footer-logo-text span {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.footer-brand p {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Footer contact info */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-item:hover { color: var(--color-white); }
.footer-contact-item svg { flex-shrink: 0; color: rgba(255,255,255,0.4); }

.social-links { display: flex; gap: 10px; }

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: all 0.2s;
  font-size: 14px;
  text-decoration: none;
}

.social-link:hover {
  background: var(--color-primary-blue);
  color: white;
  border-color: var(--color-primary-blue);
}

.social-fb:hover  { background: #1877F2; border-color: #1877F2; }
.social-li:hover  { background: #0A66C2; border-color: #0A66C2; }
.social-ig:hover  { background: #E1306C; border-color: #E1306C; }
.social-yt:hover  { background: #FF0000; border-color: #FF0000; }

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 16px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 10px; }

.footer-col ul li a {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}

.footer-col ul li a:hover { color: var(--color-white); }

.footer-bottom {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.footer-bottom-links {
  display: flex;
  gap: 16px;
}

.footer-bottom-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-bottom-links a:hover { color: var(--color-white); }

.footer-bottom a { color: rgba(255,255,255,0.6); }
.footer-bottom a:hover { color: white; }

.footer-credit {
  text-align: center;
  padding: 12px 0 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}
.footer-credit a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-credit a:hover { color: rgba(255,255,255,0.8); }

/* ============================================================
   PAGE TEMPLATES — SHARED
   ============================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--color-bg-light-blue) 0%, #F0F9FF 50%, #F8FAFC 100%);
  padding: 56px 0 64px;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-body);
  margin-bottom: 20px;
}

.page-breadcrumb a { color: var(--color-primary-blue); text-decoration: none; }
.page-breadcrumb .sep { color: var(--color-light-text); }

.page-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary-blue);
  background: rgba(27,95,175,0.08);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.page-cta-section {
  background: var(--color-bg-dark);
  padding: 72px 0;
}

.page-cta-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.page-cta-inner h2 { color: var(--color-white); margin-bottom: 12px; }
.page-cta-inner p  { color: rgba(255,255,255,0.72); margin-bottom: 32px; }

.page-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Hero — split with doctor photo */
.about-hero-section {
  background: linear-gradient(135deg, var(--color-bg-light-blue) 0%, #F0F9FF 50%, #F8FAFC 100%);
  padding: 64px 0 0;
  overflow: hidden;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: flex-end;
}

.about-hero-content { padding-bottom: 64px; }
.about-hero-content h1 { margin: 12px 0 16px; }

.about-hero-content .about-subtitle {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-body);
  margin-bottom: 24px;
  max-width: 540px;
}

.about-creds {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.about-cred-item {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-primary-blue);
  background: rgba(27,95,175,0.1);
  padding: 5px 12px;
  border-radius: 20px;
}

.about-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.about-hero-photo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.about-hero-photo img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  border-radius: 16px 16px 0 0;
}

/* Focus cards — icon enhancement */
.focus-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27,95,175,0.08);
  border-radius: 10px;
  margin-bottom: 14px;
}

/* Practice section — split with hospital photo */
.practice-with-photo {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
  margin-top: 32px;
}

.practice-details-col { min-width: 0; }

.practice-photo-col img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}

.practice-photo-caption {
  font-size: 12px;
  color: var(--color-light-text);
  text-align: center;
  margin-top: 8px;
}

/* Legacy (unused by new template but kept safe) */
.about-hero-content-legacy { max-width: 820px; }
.about-intro {
  background: var(--color-bg-white);
  padding: var(--section-pad) 0;
}

.about-intro p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-body);
  margin-bottom: 16px;
  max-width: 860px;
}

.about-intro p:last-child { margin-bottom: 0; }

/* Qualifications */
.qual-section {
  background: var(--color-bg-main);
  padding: var(--section-pad) 0;
}

.qual-box {
  background: var(--color-bg-light-blue);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  margin-top: 40px;
}

.qual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.qual-col-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(27,95,175,0.2);
}

.qual-item { margin-bottom: 20px; }
.qual-item:last-child { margin-bottom: 0; }

.qual-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 2px;
}

.qual-item span { font-size: 14px; color: var(--color-body); }

.qual-item .mentor-note {
  display: block;
  font-size: 13px;
  color: var(--color-primary-blue);
  font-weight: 500;
  margin-top: 4px;
  font-style: italic;
}

/* Areas of Clinical Focus */
.focus-section {
  background: var(--color-bg-white);
  padding: var(--section-pad) 0;
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
  margin-top: 40px;
}

.focus-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
}

.focus-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 8px;
}

.focus-card p { font-size: 13px; line-height: 1.65; }

/* Experience & Stats */
.experience-section {
  background: var(--color-bg-main);
  padding: var(--section-pad) 0;
}

.stats-panel {
  background: var(--color-bg-light-blue);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  margin-top: 40px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-bottom: 32px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(27,95,175,0.15);
}

.stat-metric strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  color: var(--color-primary-blue);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-metric span { font-size: 13px; color: var(--color-body); }

.stats-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-body);
}

/* Treatment Philosophy */
.philosophy-section {
  background: var(--color-bg-white);
  padding: var(--section-pad) 0;
}

.philosophy-panel {
  background: var(--color-bg-light-blue);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  margin-top: 40px;
}

.philosophy-panel p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-body);
  margin-bottom: 16px;
}

.philosophy-panel p:last-child { margin-bottom: 0; }

/* Current Practice */
.practice-section {
  background: var(--color-bg-main);
  padding: var(--section-pad) 0;
}

.practice-intro {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-body);
  margin-bottom: 28px;
}

.practice-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 8px 32px;
  margin-top: 24px;
}

.practice-detail {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

.practice-detail:last-child { border-bottom: none; }

.practice-detail strong {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading);
  min-width: 130px;
  flex-shrink: 0;
}

.practice-detail span { font-size: 14px; color: var(--color-body); line-height: 1.6; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.services-page-hero {
  background: linear-gradient(135deg, var(--color-bg-light-blue) 0%, #F0F9FF 50%, #F8FAFC 100%);
  padding: 56px 0 64px;
}

.services-page-hero h1 { margin-bottom: 16px; }

.services-page-hero p {
  font-size: 17px;
  max-width: 780px;
  line-height: 1.7;
  color: var(--color-body);
}

.services-overview-section {
  background: var(--color-bg-white);
  padding: var(--section-pad) 0;
}

.services-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.service-overview-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.service-overview-card:hover {
  border-color: rgba(27,95,175,0.3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.service-overview-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 10px;
}

.service-overview-card p {
  font-size: 14px;
  color: var(--color-body);
  line-height: 1.65;
  margin-bottom: 16px;
}

.service-overview-card .learn-link {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.service-overview-card .learn-link::after { content: ' →'; }

/* Symptoms Nav */
.symptoms-nav-section {
  background: var(--color-bg-main);
  padding: var(--section-pad) 0;
}

.symptoms-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.symptom-nav-btn {
  display: block;
  background: var(--color-bg-light-blue);
  border: 1.5px solid #DBEAFE;
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-blue);
  text-decoration: none;
  transition: all 0.2s;
}

.symptom-nav-btn:hover {
  background: #DBEAFE;
  border-color: var(--color-primary-blue);
  color: var(--color-dark-blue);
}

/* ============================================================
   KNEE TREATMENT PAGE
   ============================================================ */

/* Hero */
.knee-hero {
  background: linear-gradient(135deg, var(--color-bg-light-blue) 0%, #F0F9FF 50%, #F8FAFC 100%);
  padding: 56px 0 0;
  overflow: hidden;
}

.knee-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: flex-end;
}

.knee-hero-content { padding-bottom: 56px; }
.knee-hero-content h1 { margin: 12px 0 16px; text-decoration: none !important; }

/* Knee hero buttons match Figma: primary = dark navy, WhatsApp = outlined */
.knee-hero .btn-primary {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
}
.knee-hero .btn-primary:hover {
  background: var(--color-primary-blue-2);
  border-color: var(--color-primary-blue-2);
  transform: translateY(-1px);
}
.knee-hero .hero-cta-whatsapp {
  background: transparent;
  color: var(--color-navy);
  border: 1.5px solid var(--color-navy);
  box-shadow: none;
  width: auto;
}
.knee-hero .hero-cta-whatsapp:hover {
  background: rgba(27, 58, 107, 0.06);
  transform: translateY(-1px);
}

.knee-hero-content .knee-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-body);
  max-width: 520px;
  margin-bottom: 28px;
}

.knee-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.knee-hero-visuals {
  width: 380px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.knee-hero-photo {
  width: 380px;
  height: 340px;
  display: block;
  border-radius: 16px 16px 0 0;
  object-fit: cover;
}

.knee-hero-joint {
  display: none;
}

/* Overview */
.knee-overview {
  background: var(--color-bg-white);
  padding: var(--section-pad) 0;
}


.knee-overview-heading h2 { margin-top: 8px; }

.knee-overview-text p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-body);
  margin-bottom: 16px;
}

.knee-overview-text p:last-child { margin-bottom: 0; }

/* Common Symptoms */
.knee-symptoms {
  background: var(--color-bg-main);
  padding: var(--section-pad) 0;
}

.symptoms-8-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.symptom-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px 14px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.symptom-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
}

.symptom-card span {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.35;
  display: block;
}

/* Common Causes */
.knee-causes {
  background: var(--color-bg-white);
  padding: var(--section-pad) 0;
}

.causes-6-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
  margin-top: 40px;
}

.cause-card {
  background: var(--color-bg-light-blue);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  border-top: 3px solid var(--color-primary-blue);
}

.cause-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 8px;
}

.cause-card p { font-size: 13px; line-height: 1.65; }

/* Diagnosis Timeline */
.knee-diagnosis {
  background: var(--color-white);
  padding: var(--section-pad) 0;
}

.diag-timeline {
  display: flex;
  gap: 0;
  margin: 56px 0 0;
  position: relative;
}

.diag-timeline::before {
  content: '';
  position: absolute;
  top: 56px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: #D1DCF0;
  z-index: 0;
}

.diag-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.diag-num {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #0B4F8A;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.diag-num svg { width: 44px; height: 44px; }

.diag-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #2563EB;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.diag-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0B4F8A;
  margin-bottom: 8px;
}

.diag-body p { font-size: 13px; color: #4B5563; line-height: 1.6; max-width: 160px; margin: 0 auto; }
.diag-cta-wrap { text-align: center; margin-top: 40px; }
.knee-diagnosis .btn-primary { background: var(--color-navy); border-color: var(--color-navy); }
.knee-diagnosis .btn-primary:hover { background: #0D2A52; border-color: #0D2A52; transform: translateY(-1px); }

/* Available Treatments */
.knee-treatments {
  background: var(--color-bg-white);
  padding: var(--section-pad) 0;
}
.knee-faq .section-header{
  text-align: left;
}

.treatments-6-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
  margin-top: 40px;
}

.treatment-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  transition: border-color 0.2s;
}

.treatment-card:hover { border-color: rgba(27,95,175,0.3); }

.treatment-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 14px;
  display: block;
}

.treatment-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 8px;
}

.treatment-card p { font-size: 13px; line-height: 1.65; }

/* Why Dr. Om Baghele */
.why-doctor-section {
  background: var(--color-bg-dark);
  padding: var(--section-pad) 0;
}

.why-doctor-section .section-header h2 { color: var(--color-white); }
.why-doctor-section .section-header p  { color: rgba(255,255,255,0.7); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-lg);
}

.why-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

.why-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 14px;
  display: block;
}

.why-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}

.why-card p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.65); }

/* Knee FAQ */
.knee-faq {
  background: var(--color-bg-main);
  padding: var(--section-pad) 0;
}

.knee-faq .container{
display: flex;
width: 768px;
max-width: 768px;
padding: 0 24px;
flex-direction: column;
align-items: flex-start;
}

/* Knee CTA */
.knee-cta {
  background: linear-gradient(135deg, var(--color-bg-light-blue) 0%, #F0F9FF 50%, #F8FAFC 100%);
  padding: 72px 0;
  overflow: hidden;
}

.knee-cta-inner { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: flex-end; }
.knee-cta-content h2 { color: var(--color-primary-blue); margin-bottom: 12px; }
.knee-cta-content p { color: var(--color-body); margin-bottom: 32px; }
.knee-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.knee-cta-visual { align-self: flex-end; overflow: hidden; }
.knee-cta-visual img { width: 100%; max-height: 260px; object-fit: contain; object-position: bottom center; display: block; }
.knee-cta .btn-primary { background: var(--color-primary-blue); border-color: var(--color-primary-blue); }
.knee-cta .btn-primary:hover { background: var(--color-primary-blue-2); border-color: var(--color-primary-blue-2); transform: translateY(-1px); }
.knee-cta .hero-cta-whatsapp { background: transparent; color: var(--color-navy); border: 1.5px solid var(--color-navy); box-shadow: none; width: auto; }
.knee-cta .hero-cta-whatsapp:hover { background: rgba(27, 58, 107, 0.06); transform: translateY(-1px); }

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

/* ── Tablet landscape / small desktop ≤ 1024px ───────────────── */
@media (max-width: 1024px) {
  /* Nav collapses to hamburger — standard lg breakpoint */
  .header-actions { display: none; }
  .main-nav       { display: none !important; }
  .nav-toggle     { display: flex; }
}

/* ── Layout adjustments ≤ 1100px ────────────────────────────── */
@media (max-width: 1100px) {
  :root { --section-pad: 64px; }

  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-inner { gap: 32px; }
  .hero-rating-card,
  .hero-years-badge { display: none; }

  /* Trust: 4-col → 2×2 */
  .trust-grid    { grid-template-columns: repeat(2, 1fr); }
  .trust-numbers { grid-template-columns: repeat(2, 1fr); }

  /* Journey: 8-col → 4-col */
  .journey-steps { grid-template-columns: repeat(4, 1fr); }
  .journey-steps::before { display: none; }

  /* Footer: 4-col → 2-col; brand spans full top row */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; padding-right: 0; }

  /* Cred strip: 3-col → 1-col */
  .hero-cred-grid { grid-template-columns: 1fr; }
}

/* ── Tablet ≤ 900px ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .struggles-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Hero: collapse to single column, hide image side */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
  }
  .hero-image-wrap  { display: none; }
  .hero-content     { padding-bottom: 32px; max-width: 100%; }
  .hero-cred-grid   { grid-template-columns: repeat(3, 1fr); }

  /* Card grids: keep 3-col at 900px */
  .struggles-grid { grid-template-columns: repeat(3, 1fr); }
  .services-grid  { grid-template-columns: repeat(2, 1fr); }
  .services-grid--featured { grid-template-columns: repeat(3, 1fr); }

  /* Doctor: image stacks above content */
  .doctor-inner { grid-template-columns: 1fr; }
  .doctor-image-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding-bottom: 80px;
  }
  .doctor-procedures-card { left: 0; top: 10px; }
  .doctor-qualifications-card { right: 0; }

  /* Journey: 8-col → 2×4 grid */
  .journey-steps { grid-template-columns: repeat(4, 1fr); }
  .journey-steps::before { display: none; }

  /* Single-column collapses */
  .faq-inner          { grid-template-columns: 1fr; }
  .testimonials-inner { grid-template-columns: 1fr; }
  .testimonial-selectors { grid-template-columns: 1fr; }
  .contact-inner      { grid-template-columns: 1fr; }

  /* About page */
  .about-hero-grid     { grid-template-columns: 1fr; }
  .about-hero-photo    { display: none; }
  .about-hero-content  { padding-bottom: 40px; }
  .practice-with-photo { grid-template-columns: 1fr; }
  .practice-photo-col  { display: none; }
  .qual-grid   { grid-template-columns: 1fr; gap: 32px; }
  .focus-grid  { grid-template-columns: repeat(2, 1fr); }
  .stats-row   { grid-template-columns: repeat(2, 1fr); }

  /* Knee treatment page */
  .knee-hero-inner      { grid-template-columns: 1fr; }
  .knee-hero-visuals    { display: none; }
  .knee-hero-content    { padding-bottom: 40px; }
  .knee-overview-inner  { grid-template-columns: 1fr; gap: 24px; }
  .symptoms-8-grid      { grid-template-columns: repeat(2, 1fr); }
  .causes-6-grid        { grid-template-columns: repeat(2, 1fr); }
  .treatments-6-grid          { grid-template-columns: repeat(2, 1fr); }
  .treatments-3-grid          { grid-template-columns: 1fr; }
  .philosophy-grid            { grid-template-columns: 1fr; }
  .knee-overview-inner        { grid-template-columns: 1fr; }
  .knee-when-consult-inner    { grid-template-columns: 1fr; }
  .when-consult-grid          { grid-template-columns: 1fr; }
  .knee-cta-inner             { grid-template-columns: 1fr; }
  .knee-cta-visual            { display: none; }
  .diag-timeline              { flex-wrap: wrap; justify-content: center; gap: 24px; }
  .diag-timeline::before      { display: none; }
  .diag-step                  { width: calc(33% - 16px); min-width: 140px; }
  .diag-num                   { width: 88px; height: 88px; }
  .diag-num svg               { width: 34px; height: 34px; }
}

/* ============================================================
   MOBILE NAV DRAWER (shown ≤ 640px via hamburger toggle)
   ============================================================ */
.main-nav-mobile {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  z-index: 998;
  overflow-y: auto;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
}

.main-nav-mobile.open { display: flex; }

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 997;
}

.mobile-nav-overlay.open { display: block; }

.mobile-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.mobile-nav-links > li > a {
  display: block;
  padding: 16px 20px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}

.mobile-nav-links > li > a:hover { color: var(--color-primary-blue); background: #F8FBFF; }

/* Accordion toggle */
.mobile-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-heading);
  cursor: pointer;
  text-align: left;
}

.mobile-sub-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.mobile-has-sub.open .mobile-sub-chevron { transform: rotate(180deg); }

/* Sub-links — hidden until accordion opens */
.mobile-sub-links {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #F8FBFF;
}

.mobile-has-sub.open .mobile-sub-links { display: block; }

.mobile-sub-links li a {
  display: block;
  padding: 13px 20px 13px 32px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-body);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}

.mobile-sub-links li a:hover { color: var(--color-primary-blue); }

.mobile-sub-view-all a {
  color: var(--color-primary-blue) !important;
  font-weight: 600 !important;
}

/* CTA bar at the bottom */
.mobile-nav-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--color-border);
}

.mobile-cta-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-heading);
  text-decoration: none;
}

.mobile-cta-call svg { width: 16px; height: 16px; color: var(--color-primary-blue); }

.mobile-nav-ctas .btn { width: 100%; justify-content: center; }

/* ── Mobile ≤ 640px ──────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --section-pad: 48px; }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ── Hero ────────────────────────────────────────────────────── */
  #hero { padding-top: 40px; }

  .hero-actions-row1 { flex-direction: column; }
  .hero-cta,
  .hero-cta-outline,
  .hero-cta-light { width: 100%; justify-content: center; }

  .hero-cred-grid { grid-template-columns: 1fr; }

  /* ── Card grids: mobile ─────────────────────────────────────── */
  .struggles-grid           { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .struggle-card            { padding: 24px 16px; }
  .struggle-icon-wrap       { width: 68px; height: 68px; margin-bottom: 14px; }
  .struggle-icon-wrap img   { width: 42px; }
  .services-grid            { grid-template-columns: 1fr; }
  .services-grid--featured  { grid-template-columns: 1fr; }
  .trust-grid               { grid-template-columns: 1fr; }
  .trust-numbers            { grid-template-columns: repeat(2, 1fr); }
  .journey-steps            { grid-template-columns: repeat(2, 1fr); }
  .journey-steps::before    { display: none; }
  .testimonials-selectors   { flex-direction: column; }

  .trust-number strong { font-size: 32px; }

  /* About page — mobile */
  .about-hero-section   { padding: 48px 0 0; }
  .about-creds          { gap: 6px; }
  .qual-box         { padding: 24px 20px; }
  .philosophy-panel { padding: 24px 20px; }
  .stats-panel      { padding: 24px 20px; }
  .stats-row        { grid-template-columns: repeat(2, 1fr); }
  .stat-metric strong { font-size: 32px; }
  .focus-grid       { grid-template-columns: 1fr; }
  .practice-box     { padding: 8px 16px; }
  .practice-detail  { flex-direction: column; gap: 4px; }
  .practice-detail strong { min-width: auto; }

  /* Services page — mobile */
  .services-overview-grid { grid-template-columns: 1fr; }
  .symptoms-nav-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Knee treatment — mobile */
  .symptoms-8-grid    { grid-template-columns: repeat(2, 1fr); }
  .causes-6-grid      { grid-template-columns: 1fr; }
  .treatments-6-grid          { grid-template-columns: 1fr; }
  .treatments-3-grid          { grid-template-columns: 1fr; }
  .philosophy-grid            { grid-template-columns: 1fr; }
  .philosophy-card            { padding: 28px 20px; }
  .knee-overview-inner        { gap: 32px; }
  .knee-when-consult-inner    { gap: 32px; }
  .when-consult-grid          { grid-template-columns: 1fr; }
  .knee-cta-inner             { grid-template-columns: 1fr; }
  .knee-cta-visual            { display: none; }
  .knee-cta-actions           { flex-direction: column; }
  .knee-cta-actions .btn      { width: 100%; justify-content: center; }
  .why-grid           { grid-template-columns: 1fr; }
  .page-cta-actions   { flex-direction: column; align-items: center; }
  .page-cta-actions .btn { width: 100%; justify-content: center; }
  .knee-cta .page-cta-actions .btn { width: 100%; justify-content: center; }

  /* ── Footer ──────────────────────────────────────────────────── */
  .footer-inner  { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand  { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .footer-bottom-links { justify-content: center; }
}

a.treatment-card--linked { text-decoration: none; color: inherit; display: block; transition: box-shadow 0.2s, transform 0.2s; }
a.treatment-card--linked:hover { box-shadow: 0 8px 28px rgba(27,95,175,0.15); transform: translateY(-3px); }
a.treatment-card--linked:hover h3 { color: var(--color-primary-blue); }

/* Overview with Common Causes sidebar */
.knee-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.knee-overview-main h2 { margin: 8px 0 20px; }
.knee-overview-main p { font-size: 15px; line-height: 1.85; color: var(--color-body); margin-bottom: 16px; }
.knee-overview-main p:last-child { margin-bottom: 0; }
.knee-overview-causes-card { background: #fff; border: 1px solid #E5EAF0; border-radius: 16px; padding: 32px; margin-top: 50px; min-height: 342px; max-width: 528px; }
.knee-overview-causes-card h3 { font-size: 16px; font-weight: 700; color: var(--color-primary-blue); margin: 0 0 16px; }
.knee-overview-causes-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.knee-overview-causes-card ul li { font-size: 14px; color: #4B5563; padding-left: 14px; position: relative; padding-top: 14px;}
.knee-overview-causes-card ul li::before { content: '•'; position: absolute; left: 0; color: var(--color-primary-blue); }

/* When to Consult */
.knee-when-consult { background: var(--color-bg-main); padding: var(--section-pad) 0; }
.knee-when-consult-inner { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; }
.knee-when-consult-visual img { width: 100%; height: auto; display: block; }
.knee-when-consult-content h2 { margin: 8px 0 28px; }
.when-consult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.when-consult-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-dark); line-height: 1.55; }
.when-consult-item svg { flex-shrink: 0; margin-top: 1px; }

/* Figma-style 3-card treatment grid */
.treatments-3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.treatment-card-figma { background: #fff; border: 1px solid #E5EAF0; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; transition: box-shadow 0.2s, transform 0.2s; }
.treatment-card-figma:hover { box-shadow: 0 8px 28px rgba(27,95,175,0.12); transform: translateY(-3px); }
.treatment-card-header { display: flex; align-items: center; gap: 16px; }
.treatment-card-img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.treatment-card-figma h3 { font-size: 18px; font-weight: 700; margin: 0; }
.treatment-card-figma h3 a { color: var(--color-dark); text-decoration: none; }
.treatment-card-figma h3 a:hover { color: var(--color-primary-blue); }
.treatment-sub-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.treatment-sub-items li { font-size: 14px; color: #5A6A7E; padding-left: 16px; position: relative; }
.treatment-sub-items li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-blue); opacity: 0.5; }
.treatment-sub-items li a { color: inherit; text-decoration: none; }
.treatment-sub-items li a:hover { color: var(--color-primary-blue); text-decoration: underline; }
.treatment-learn-more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--color-primary-blue); text-decoration: none; }
.treatment-learn-more:hover { text-decoration: underline; }

/* Treatment Philosophy */
.knee-philosophy { padding: 96px 0; background: var(--color-bg-light, #F8FAFC); }
.knee-philosophy .section-header { text-align: left; margin: 0 0 48px; max-width: 672px; }
.knee-philosophy .section-header h2 {
  font-size: 36px;
  font-weight: 800;
  line-height: 50px;
  color: #0B4F8A;
}
.philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.philosophy-card { border-radius: 12px; padding: 32px; }
.philosophy-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.philosophy-card-header h3 { font-size: 18px; font-weight: 700; margin: 0; }
.philosophy-icon-wrap { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.philosophy-card--light { background: #fff; border: 1px solid rgba(27,58,107,0.12); }
.philosophy-card--light .philosophy-icon-wrap { background: #EEF2F8; }
.philosophy-card--light .philosophy-card-header h3 { color: #0D1B2A; }
.philosophy-card--dark { background: var(--color-navy); color: #fff; }
.philosophy-card--dark .philosophy-icon-wrap { background: rgba(255,255,255,0.15); }
.philosophy-card--dark .philosophy-card-header h3 { color: #fff; }
.philosophy-intro { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.85); margin: 0 0 20px; }
.philosophy-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.philosophy-card--light .philosophy-list li { font-size: 14px; color: #0D1B2A; padding-left: 20px; position: relative; }
.philosophy-card--light .philosophy-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #2563EB; font-weight: 700; }
.philosophy-card--dark .philosophy-list li { font-size: 14px; color: rgba(255,255,255,0.9); padding-left: 20px; position: relative; }
.philosophy-card--dark .philosophy-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: rgba(255,255,255,0.7); font-weight: 700; }
.philosophy-note { font-size: 12px; line-height: 1.75; margin: 0; color: #5A6A7E; padding-top: 20px; border-top: 1px solid rgba(27,58,107,0.12); }
.philosophy-card--dark .philosophy-note { color: rgba(255,255,255,0.65); border-top-color: rgba(255,255,255,0.15); }

/* ============================================================
   KNEE REPLACEMENT PAGE (page-knee-replacement.php)
   ============================================================ */

/* Hero */
.krs-hero { background: linear-gradient(135deg, var(--color-bg-light-blue) 0%, #F0F9FF 50%, #F8FAFC 100%); padding: 64px 0 0; overflow: hidden; }
.krs-hero-inner { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: flex-end; }
.krs-hero-content { padding-bottom: 64px; }
.krs-hero-content h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--color-primary-blue); margin-bottom: 20px; }
.krs-hero-desc { font-size: 16px; line-height: 1.75; color: var(--color-body); margin-bottom: 24px; max-width: 520px; }
.krs-hero-checklist { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; }
.krs-hero-checklist li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--color-dark); }
.krs-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.krs-wa-btn { background: #25D366; color: #fff; border-color: #25D366; display: flex; align-items: center; gap: 8px; }
.krs-wa-btn:hover { background: #25D366; border-color: #25D366; color: #fff; }
.krs-hero-photo { align-self: flex-end; }
.krs-hero-photo img { width: 100%; max-width: 460px; height: auto; display: block; border-radius: 16px 16px 0 0; }

/* Overview */
.krs-overview { padding: 80px 0; background: #F8FAFC; }
.krs-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.krs-overview-content h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; color: var(--color-primary-blue); margin-bottom: 20px; line-height: 1.2; }
.krs-overview-content p { font-size: 15px; line-height: 1.75; color: var(--color-body); margin-bottom: 16px; }
.krs-overview-features { display: flex; flex-direction: column; gap: 16px; }
.krs-overview-card { display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid rgba(11,79,138,0.10); border-radius: 12px; padding: 20px 24px; }
.krs-overview-card-icon { width: 36px; height: 36px; border-radius: 50%; background: #F1F5F9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.krs-overview-card strong { display: block; font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 4px; }
.krs-overview-card p { font-size: 13.5px; line-height: 1.55; color: var(--color-body); margin: 0; }
.krs-stat-row { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.krs-stat { display: flex; flex-direction: column; gap: 4px; }
.krs-stat strong { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--color-primary-blue); line-height: 1; }
.krs-stat span { font-size: 12px; color: var(--color-light-text); text-transform: uppercase; letter-spacing: 0.04em; }

/* When needed */
.krs-candidacy { padding: 80px 0; background: #fff; }
.krs-candidacy-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 32px; }
.krs-candidacy-left h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; color: var(--color-primary-blue); margin-bottom: 28px; line-height: 1.2; }
.krs-candidacy-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.krs-candidacy-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #E8EEF4; font-size: 15px; line-height: 1.6; color: var(--color-dark); }
.krs-candidacy-list li:first-child { border-top: 1px solid #E8EEF4; }
.krs-candidacy-list svg { flex-shrink: 0; margin-top: 3px; }
.krs-candidacy-right { background: var(--color-navy-deep); border-radius: 16px; padding: 36px 36px 40px; }
.krs-conservative-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.krs-candidacy-right h3 { font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: 28px; line-height: 1.3; }
.krs-candidacy-right h3 em { font-style: normal; color: #7EB3E8; }
.krs-not-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.krs-not-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); }
.krs-not-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); flex-shrink: 0; margin-top: 3px; display: inline-block; }
.krs-candidacy-note { background: #F1F5F9; border-radius: 10px; padding: 20px 32px; text-align: center; }
.krs-candidacy-note p { font-size: 15px; font-weight: 600; font-style: italic; color: var(--color-navy); margin: 0; }

/* Journey / steps */
.krs-ai-planning { padding: 80px 0; background: var(--color-navy-deep); }
.krs-ai-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.krs-ai-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #7EB3E8; margin-bottom: 16px; }
.krs-ai-content h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; margin-bottom: 18px; line-height: 1.2; }
.krs-ai-desc { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.75); margin-bottom: 28px; }
.krs-ai-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 18px; }
.krs-ai-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); }
.krs-ai-check { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.15); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.krs-ai-note { background: rgba(255,255,255,0.07); border-radius: 10px; padding: 16px 20px; }
.krs-ai-note p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.70); margin: 0; }
.krs-ai-visual img { width: 100%; max-width: 520px; height: auto; display: block; }

.krs-journey { padding: 80px 0 80px; background: #fff; }
.krs-journey .krs-journey-grid { margin-top: 48px; }
.krs-journey-header { text-align: center; margin-bottom: 56px; }
.krs-journey-header h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--color-primary-blue); margin-top: 14px; }
.krs-journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.krs-journey-card { position: relative; background: #F1F5FB; border-radius: 16px; padding: 80px 24px 28px; }
.krs-journey-card-icon { position: absolute; top: -36px; left: 24px; width: 80px; height: 80px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.08); overflow: hidden; }
.krs-journey-card-icon img { width: 60px; height: 60px; object-fit: contain; }
.krs-journey-card h3 { font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 14px; }
.krs-journey-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.krs-journey-card ul li { font-size: 13.5px; line-height: 1.55; color: var(--color-body); padding-left: 14px; position: relative; }
.krs-journey-card ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-navy); }

/* Types of Surgery */
.krs-types { padding: 80px 0; background: #F1F5FB; }
.krs-types-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--color-primary-blue); margin: 8px 0 40px; }
.krs-types-table { background: #fff; border: 1px solid rgba(11,79,138,0.12); border-radius: 16px; overflow: hidden; }
.krs-types-row { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid rgba(11,79,138,0.10); }
.krs-types-row:last-child { border-bottom: none; }
.krs-types-label { padding: 28px 32px; border-right: 1px solid rgba(11,79,138,0.10); }
.krs-types-label strong { font-size: 15px; font-weight: 700; color: var(--color-primary-blue); line-height: 1.4; }
.krs-types-desc { padding: 28px 32px; }
.krs-types-desc p { font-size: 15px; line-height: 1.7; color: var(--color-body); margin: 0; }

/* Outcomes — Benefits and Risks */
.krs-outcomes { padding: 80px 0; background: #F1F5FB; }
.krs-outcomes-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--color-primary-blue); margin: 8px 0 40px; }
.krs-outcomes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.krs-outcomes-card { background: #fff; border: 1px solid rgba(11,79,138,0.10); border-radius: 16px; padding: 32px; }
.krs-outcomes-card-heading { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--color-primary-blue); margin-bottom: 24px; }
.krs-outcomes-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.krs-outcomes-dot--blue { background: var(--color-primary-blue); }
.krs-outcomes-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.krs-outcomes-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--color-body); }
.krs-outcomes-checks svg { flex-shrink: 0; margin-top: 3px; }
.krs-outcomes-bullets { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 14px; }
.krs-outcomes-bullets li { font-size: 14.5px; line-height: 1.6; color: var(--color-body); padding-left: 16px; position: relative; }
.krs-outcomes-bullets li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #94A3B8; }
.krs-outcomes-note { font-size: 13px; line-height: 1.6; color: #94A3B8; margin: 0; border-top: 1px solid #E8EEF4; padding-top: 20px; }

/* Why section (dark) */
.krs-why-section { padding: 96px 0; background: #0F2144; }
.krs-why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.krs-why-left h2 { color: #fff; margin-bottom: 16px; }
.krs-why-left p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.75); }
.krs-why-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.krs-why-item:first-child { border-top: 1px solid rgba(255,255,255,0.12); }
.krs-why-item svg { flex-shrink: 0; margin-top: 2px; }
.krs-why-item span { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.88); }

/* Recovery */
.krs-recovery { padding: 96px 0; background: var(--color-bg); }
.krs-recovery-inner { display: grid; grid-template-columns: 1fr 420px; gap: 72px; align-items: start; }
.krs-recovery-content h2 { color: var(--color-primary-blue); margin-bottom: 32px; }
.krs-milestone { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-border); align-items: center; }
.krs-milestone:first-of-type { border-top: 1px solid var(--color-border); }
.krs-milestone-time { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--color-primary-blue); }
.krs-milestone-desc { font-size: 15px; color: var(--color-dark); line-height: 1.5; }
.krs-recovery-img img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }
.krs-recovery-caption { font-size: 12px; color: var(--color-light-text); text-align: center; margin-top: 10px; }

/* FAQ */
.krs-faq { padding: 96px 0; background: var(--color-white); }

/* ── Responsive: tablet ≤ 900px ───────────────────────────── */
@media (max-width: 900px) {
  .krs-hero-inner          { grid-template-columns: 1fr; }
  .krs-hero-photo          { display: none; }
  .krs-hero-content        { padding-bottom: 40px; }
  .krs-overview-inner      { grid-template-columns: 1fr; }
  .krs-overview-img        { display: none; }
  .krs-candidacy-inner     { grid-template-columns: 1fr; }
  .krs-steps-grid          { grid-template-columns: repeat(2, 1fr); }
  .krs-why-inner           { grid-template-columns: 1fr; }
  .krs-recovery-inner      { grid-template-columns: 1fr; }
  .krs-recovery-img        { display: none; }
}

/* ── Responsive: mobile ≤ 640px ─────────────────────────────── */
@media (max-width: 640px) {
  .krs-steps-grid          { grid-template-columns: 1fr; }
  .krs-stat-row            { gap: 20px; }
  .krs-hero-actions        { flex-direction: column; align-items: flex-start; }
  .krs-milestone           { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-center { text-align: center; }
.text-white { color: var(--color-white) !important; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mt-8 { margin-top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   COMING SOON BADGE (shared component)
   ============================================================ */
.coming-soon-badge { display: inline-block; font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: #fff; background: var(--color-primary-blue); padding: 4px 12px; border-radius: 20px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }

/* ============================================================
   HIP REPLACEMENT PAGE (hrs-*)
   ============================================================ */
.hrs-hero { background: linear-gradient(135deg, var(--color-bg-light-blue) 0%, #F0F9FF 50%, #F8FAFC 100%); padding: 64px 0 0; overflow: hidden;}
.hrs-hero, #hero {background-image: url( ./images/photos/about-hero-bg.png);
background-size: cover;}
.hrs-hero-inner { display: grid; grid-template-columns: 1fr 520px; gap: 40px; align-items: center; }
.hrs-hero-content { padding-bottom: 32px; }
.hrs-hero-content .section-label { margin-bottom: 20px; }
.hrs-hero-content h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 800; color: var(--color-primary-blue); margin-bottom: 20px; line-height: 1.15; }
.hrs-hero-desc { font-size: 15px; line-height: 1.75; color: var(--color-body); margin-bottom: 32px; max-width: 480px; }
.hrs-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hrs-btn-primary { background: var(--color-navy); color: #fff; border: none; border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.hrs-btn-primary:hover { background: #0D2A52; transform: translateY(-1px); }
.hrs-btn-outline { background: transparent; color: var(--color-navy); border: 1.5px solid var(--color-navy); border-radius: 10px; padding: 13px 24px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.hrs-btn-outline:hover { background: rgba(27,58,107,0.06); transform: translateY(-1px); }
.hrs-hero-photo { position: relative; align-self: flex-end; display: flex; align-items: flex-end; justify-content: center; }
.hrs-hero-photo-blob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 480px; height: 480px; background: radial-gradient(circle, #D4E8F8 0%, #C8DFF4 40%, transparent 70%); border-radius: 50%; z-index: 0; }
.hrs-hero-photo img { position: relative; z-index: 1; width: 100%; max-width: 520px; height: auto; display: block; }
.krs-hero-photo--no-blob { align-self: flex-end; }
.krs-hero-photo--no-blob img { border-radius: 16px 16px 0 0; max-width: 460px; }
.hrs-hero-stats { display: flex; gap: 16px; border-top: 1px solid rgba(11,79,138,0.12); padding: 24px 0 40px; }
.hrs-stat-card { flex: 1; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid rgba(11,79,138,0.10); border-radius: 12px; padding: 18px 20px; }
.hrs-stat-card--wide { flex: 1.5; }
.hrs-stat-card strong { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--color-primary-blue); line-height: 1.2; }
.hrs-stat-card span { font-size: 13px; line-height: 1.5; color: var(--color-body); }
.hrs-img-placeholder { width: 100%; height: 320px; background: linear-gradient(160deg,var(--color-bg-light-blue),#DBEAFE); border-radius: var(--radius-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.hrs-img-placeholder p { font-size: 13px; color: #94A3B8; font-family: var(--font-body); text-align: center; }
.hrs-overview { padding: 80px 0; background: var(--color-bg); }
.hrs-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hrs-overview-content h2 { color: var(--color-primary-blue); margin-bottom: 20px; }
.hrs-overview-content p { font-size: 15px; line-height: 1.75; color: var(--color-body); margin-bottom: 16px; }
.hrs-overview-features { display: flex; flex-direction: column; gap: 16px; }
.hrs-feature-card { display: flex; align-items: flex-start; gap: 16px; background: var(--color-white); border: 1px solid rgba(11,79,138,0.10); border-radius: 12px; padding: 20px 24px; }
.hrs-feature-icon { flex-shrink: 0; width: 32px; height: 32px; background: rgba(26,107,181,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.hrs-feature-card strong { display: block; font-size: 15px; font-weight: 600; color: var(--color-dark); margin-bottom: 4px; }
.hrs-feature-card p { font-size: 14px; color: var(--color-body); margin: 0; line-height: 1.5; }
.hrs-stat-row { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.hrs-stat { display: flex; flex-direction: column; gap: 4px; }
.hrs-stat strong { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--color-primary-blue); line-height: 1; }
.hrs-stat span { font-size: 12px; color: var(--color-light-text); text-transform: uppercase; letter-spacing: 0.04em; }
.hrs-when-needed { padding: 80px 0; background: var(--color-white); background-image: url('images/photos/about-hero-bg.png'); background-size: cover; background-position: center; }
.hrs-when-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hrs-when-illustration { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 60%, #D6E8F8 0%, var(--color-bg-light-blue) 55%, transparent 75%); border-radius: 50%; padding: 24px; }
.hrs-when-illustration img { width: 100%; max-width: 420px; height: auto; display: block; }
.hrs-when-content h2 { color: var(--color-primary-blue); margin-bottom: 16px; }
.hrs-when-intro { font-size: 15px; line-height: 1.75; color: var(--color-body); margin-bottom: 24px; }
.hrs-indications-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 18px; }
.hrs-indications-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--color-dark); line-height: 1.5; }
.hrs-indications-list li svg { flex-shrink: 0; }
.hrs-when-note { font-size: 14px; line-height: 1.7; color: var(--color-body); }
.hrs-types { padding: 80px 0; background: var(--color-white); }
.hrs-types h2 { color: var(--color-primary-blue); margin: 0 0 40px; }
.hrs-types-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hrs-type-card { display: flex; align-items: center; gap: 24px; background: #E8F1FB; border-radius: 16px; padding: 32px 32px; }
.hrs-type-icon { flex-shrink: 0; width: 96px; height: 96px; background: var(--color-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hrs-type-icon img { width: 58px; height: 58px; object-fit: contain; }
.hrs-type-body h3 { color: var(--color-dark); font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.hrs-type-body p { font-size: 14px; line-height: 1.7; color: var(--color-body); margin: 0; }
.hrs-recovery { padding: 80px 0; background: #E8F5EF; }
.hrs-recovery-header { text-align: center; margin-bottom: 56px; }
.hrs-recovery-header h2 { color: var(--color-primary-blue); margin: 12px 0 16px; }
.hrs-recovery-header p { font-size: 15px; line-height: 1.75; color: var(--color-body); max-width: 760px; margin: 0 auto; }
.hrs-recovery-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.hrs-recovery-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hrs-step-circle { width: 100px; height: 100px; border-radius: 50%; background: #3BAA6D; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }
.hrs-step-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #3BAA6D; margin-bottom: 8px; }
.hrs-recovery-step h3 { font-size: 18px; font-weight: 700; color: var(--color-primary-blue); margin: 0 0 8px; }
.hrs-recovery-step p { font-size: 13px; line-height: 1.6; color: var(--color-body); margin: 0; }
.hrs-faq { padding: 80px 0;
    /* background: var(--color-white); */
    max-width: 600px;
    margin: 0 auto;
} }
.hrs-faq-heading { color: var(--color-primary-blue); margin: 0 0 8px; }
.hrs-faq .faq-list { max-width: 100%; margin: 32px 0 0; }
.hrs-faq .faq-item { border: none; border-bottom: 1px solid #E2E8F0; border-radius: 0; background: transparent; overflow: hidden; }
/* .hrs-faq .faq-item:first-child { border-top: 1px solid #E2E8F0; } */
.hrs-faq .faq-question { padding: 22px 0; }
.hrs-faq .faq-question:hover { background: transparent; }
.hrs-faq .faq-question h4 { color: var(--color-primary-blue); font-size: 16px; font-weight: 500; font-family: var(--font-body); line-height: 1.5; }
.hrs-faq .faq-chevron { flex-shrink: 0; transition: transform 0.25s; }
.hrs-faq .faq-item.open .faq-chevron { transform: rotate(180deg); }
.hrs-faq .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; padding: 0; }
.hrs-faq .faq-item.open .faq-answer { max-height: 600px; }
.hrs-faq .faq-answer p { padding: 0 0 24px; font-size: 15px; line-height: 1.75; color: var(--color-body); margin: 0; }
.learn-link { display: inline-block; font-size: 14px; font-weight: 600; color: var(--color-primary-blue); text-decoration: none; margin-top: 4px; }
.learn-link:hover { text-decoration: underline; }

/* ── Responsive hrs ────────────────────────────── */
@media (max-width: 900px) {
  .hrs-hero-inner        { grid-template-columns: 1fr; }
  .hrs-hero-photo        { display: none; }
  .hrs-hero-content      { padding-bottom: 16px; }
  .hrs-hero-stats        { flex-wrap: wrap; gap: 12px; }
  .hrs-stat-card         { flex: 1 1 calc(50% - 12px); }
  .hrs-stat-card--wide   { flex: 1 1 100%; }
  .hrs-overview-inner  { grid-template-columns: 1fr; gap: 40px; }
  .hrs-when-inner      { grid-template-columns: 1fr; }
  .hrs-when-illustration { display: none; }
  .hrs-types-grid      { grid-template-columns: 1fr; }
  .hrs-recovery-steps  { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .hrs-recovery-step:last-child { grid-column: 1 / -1; }
}

/* ============================================================
   REVISION SURGERY PAGE (rev-*)
   ============================================================ */
/* Revision Surgery Page */
.rev-overview { padding: 80px 0; background: #F8FAFC; }
.rev-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.rev-overview-left .section-label { margin-bottom: 14px; }
.rev-overview-left h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; color: var(--color-primary-blue); margin: 0 0 20px; line-height: 1.2; }
.rev-overview-left p { font-size: 15px; line-height: 1.75; color: var(--color-body); margin-bottom: 16px; }
.rev-situations-card { background: #fff; border: 1px solid rgba(11,79,138,0.10); border-radius: 16px; padding: 32px 28px; box-shadow: 0 2px 16px rgba(0,0,0,0.05); }
.rev-situations-title { display: block; font-size: 16px; font-weight: 700; color: var(--color-dark); margin-bottom: 20px; }
.rev-situations-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rev-situations-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--color-body); }
.rev-situations-list li svg { flex-shrink: 0; margin-top: 2px; }
.rev-types { padding: 80px 0; background: #E8EFF0; }
.rev-type-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 72px; }
.rev-type-block:last-child { margin-bottom: 0; }
.rev-type-content .section-label { margin-bottom: 12px; }
.rev-type-block h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; color: var(--color-primary-blue); margin: 0 0 16px; line-height: 1.2; }
.rev-type-block p { font-size: 15px; line-height: 1.75; color: var(--color-body); }
.rev-type-visual img { width: 100%; max-width: 460px; height: auto; display: block; border-radius: 12px; }
.rev-xray-pair { display: flex; align-items: center; gap: 16px; }
.rev-xray-pair img { flex: 1; max-width: none; border-radius: 10px; }
.rev-xray-arrow { flex-shrink: 0; }
.rev-why { padding: 72px 0; background: var(--color-navy-deep); }
.rev-why-header { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.rev-why-header h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; margin: 10px 0 16px; }
.rev-why-header p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.70); }
.rev-why-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rev-why-item { display: flex; align-items: center; gap: 12px; }
.rev-why-item svg { flex-shrink: 0; }
.rev-why-item span { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.90); line-height: 1.5; }

@media (max-width: 768px) {
  .rev-overview-inner { grid-template-columns: 1fr; gap: 32px; }
  .rev-type-block { grid-template-columns: 1fr; gap: 32px; }
  .rev-xray-pair { flex-direction: column; }
  .rev-why-items { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   AI PLANNING PAGE (ai-*)
   ============================================================ */
/* AI Surgical Planning Page */
.ai-overview { padding: 80px 0; background: #fff; }
.ai-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ai-overview-left h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; color: var(--color-primary-blue); margin: 8px 0 20px; }
.ai-overview-left p { font-size: 15px; line-height: 1.75; color: var(--color-body); margin-bottom: 16px; }
.ai-overview-right h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; color: var(--color-primary-blue); margin: 8px 0 14px; }
.ai-overview-right > p { font-size: 14.5px; line-height: 1.7; color: var(--color-body); margin-bottom: 20px; }
.ai-judgment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ai-judgment-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--color-body); }
.ai-judgment-list svg { flex-shrink: 0; margin-top: 2px; }
.ai-whats-next { padding: 60px 0; background: #E8EFF0; }
.ai-whats-next-box { max-width: 760px; margin: 0 auto; padding: 40px 48px; background: #fff; border-radius: 20px; box-shadow: 0 2px 20px rgba(0,0,0,0.06); }
.ai-coming-soon { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; background: #22C55E; border-radius: 26843500px; padding: 5px 14px; margin-bottom: 18px; }
.ai-whats-next-box h3 { font-size: 1.35rem; font-weight: 700; color: var(--color-primary-blue); margin-bottom: 12px; }
.ai-whats-next-box p { font-size: 15px; line-height: 1.7; color: var(--color-body); margin-bottom: 20px; }
.ai-learn-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--color-primary-blue); text-decoration: none; }
.ai-learn-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .ai-overview-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   ROBOTIC JOINT REPLACEMENT PAGE (rjr-*)
   ============================================================ */

/* Hero */
.rjr-coming-soon-badge { display: inline-block; background: #22C55E; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 26843500px; padding: 5px 14px; margin-bottom: 16px; }
.rjr-hero-sub { font-size: 17px; font-weight: 600; color: #22C55E; margin: 0 0 12px; }
.rjr-btn-ask { display: inline-flex; align-items: center; gap: 8px; background: #22C55E; color: #fff; border: none; font-weight: 600; padding: 12px 22px; border-radius: 8px; font-size: 14px; cursor: pointer; text-decoration: none; }
.rjr-btn-ask:hover { background: #16A34A; color: #fff; }

/* What This Will Mean */
.rjr-what-it-means { padding: 80px 0; background: #fff; }
.rjr-means-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.rjr-means-visual img { width: 100%; max-width: 500px; height: auto; display: block; border-radius: 12px; }
.rjr-means-content .section-label { margin-bottom: 14px; }
.rjr-means-content h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; color: var(--color-primary-blue); margin: 0 0 20px; line-height: 1.2; }
.rjr-means-content p { font-size: 15px; line-height: 1.75; color: var(--color-body); margin-bottom: 24px; }
.rjr-learn-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-primary-blue); text-decoration: none; }
.rjr-learn-link:hover { text-decoration: underline; }

/* Approach */
.rjr-approach { padding: 80px 0; background: #F1F5FB; }
.rjr-approach-header { text-align: center; margin-bottom: 48px; }
.rjr-approach-header .section-label { margin-bottom: 14px; }
.rjr-approach-header h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; color: var(--color-primary-blue); margin: 0; }
.rjr-approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.rjr-approach-card { background: #fff; border-radius: 14px; padding: 28px 24px; border: 1px solid rgba(11,79,138,0.10); }
.rjr-approach-card strong { display: block; font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 10px; }
.rjr-approach-card p { font-size: 13.5px; line-height: 1.65; color: var(--color-body); margin: 0; }
.rjr-availability-note { background: rgba(11,79,138,0.06); border-radius: 10px; padding: 20px 28px; }
.rjr-availability-note p { font-size: 14px; line-height: 1.7; color: var(--color-body); margin: 0; text-align: center; }

/* CTA */
.rjr-cta { padding: 72px 0; background: var(--color-navy-deep); }
.rjr-cta-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.rjr-cta-inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; margin: 0 0 16px; }
.rjr-cta-inner p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.75); margin-bottom: 32px; }
.rjr-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rjr-cta-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--color-navy-deep); font-weight: 700; padding: 13px 24px; border-radius: 8px; font-size: 14px; text-decoration: none; }
.rjr-cta-btn-primary:hover { background: #F1F5FB; color: var(--color-navy-deep); }
.rjr-cta-btn-outline,
.tp-cta-btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: rgba(255,255,255,0.90); border: 1.5px solid rgba(255,255,255,0.40); font-weight: 600; padding: 12px 22px; border-radius: 8px; font-size: 14px; text-decoration: none; }
.rjr-cta-btn-outline:hover,
.tp-cta-btn-outline:hover { border-color: rgba(255,255,255,0.75); color: #fff; }

@media (max-width: 768px) {
  .rjr-means-inner { grid-template-columns: 1fr; gap: 32px; }
  .rjr-approach-grid { grid-template-columns: 1fr; }
  .rjr-cta-actions { flex-direction: column; align-items: center; }
}

/* ============================================================
   SECOND OPINION PAGE (sop-*)
   ============================================================ */

/* Hero photo — sits naturally without blob */
.sop-hero-photo { align-self: flex-end; }
.sop-hero-photo img { border-radius: 16px 16px 0 0; max-width: 460px; width: 100%; height: auto; display: block; }

/* Overview */
.sop-overview { padding: 80px 0; background: #F8FAFC; }
.sop-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.sop-overview-left .section-label { margin-bottom: 14px; }
.sop-overview-intro { font-size: 14px; line-height: 1.7; color: var(--color-body); margin-bottom: 16px; }
.sop-overview-left h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; color: var(--color-primary-blue); margin: 0 0 16px; line-height: 1.2; }
.sop-overview-left p { font-size: 15px; line-height: 1.75; color: var(--color-body); }
.sop-reasons-card { background: #fff; border: 1px solid rgba(11,79,138,0.10); border-radius: 16px; padding: 28px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.sop-reasons-title { display: block; font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 16px; }
.sop-reasons-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sop-reasons-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--color-body); }
.sop-bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-blue); flex-shrink: 0; }

/* What to bring / expect cards */
.sop-cards { padding: 72px 0; background: #fff; }
.sop-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sop-card { display: flex; align-items: flex-start; gap: 20px; background: #F8FAFC; border: 1px solid rgba(11,79,138,0.08); border-radius: 14px; padding: 28px 24px; }
.sop-card-icon { width: 52px; height: 52px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.sop-card strong { display: block; font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 8px; }
.sop-card p { font-size: 13.5px; line-height: 1.65; color: var(--color-body); margin: 0; }

/* Revision concerns */
.sop-revision { padding: 32px 0 64px; background: #fff; }
.sop-revision-box { background: #F1F5FB; border-radius: 14px; padding: 32px 36px; }
.sop-revision-box strong { display: block; font-size: 16px; font-weight: 700; color: var(--color-dark); margin-bottom: 10px; }
.sop-revision-box p { font-size: 14.5px; line-height: 1.7; color: var(--color-body); margin-bottom: 16px; }
.sop-learn-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-primary-blue); text-decoration: none; }
.sop-learn-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .sop-overview-inner { grid-template-columns: 1fr; gap: 32px; }
  .sop-cards-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TREATMENTS PAGE (tp-*)
   ============================================================ */

/* Hero */
.tp-hero { padding: 80px 0 0; background: linear-gradient(160deg, var(--color-bg-light-blue) 0%, #F4F9FF 40%, #F8FAFC 100%); overflow: hidden; position: relative; }
.tp-hero::before { content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: rgba(11,79,138,0.07); top: -80px; right: 80px; z-index: 0; }
.tp-hero::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(11,79,138,0.05); bottom: 20px; right: 0; z-index: 0; }
.tp-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: flex-end; position: relative; z-index: 1; }
.tp-hero-content { padding-bottom: 80px; }
.tp-hero-content h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--color-primary-blue); margin: 0 0 20px; line-height: 1.15; }
.tp-hero-content p { font-size: 15.5px; line-height: 1.75; color: var(--color-body); max-width: 520px; margin-bottom: 32px; }
.tp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tp-hero-visual { align-self: flex-end; position: relative; }
.tp-hero-visual::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: #DDE8FF; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 0; }
.tp-hero-visual img { width: 100%; max-width: 500px; display: block; border-radius: 16px 16px 0 0; position: relative; z-index: 1; }

/* Symptoms — condition cards */
/* Symptoms / Patient Navigation section */
.tp-symptoms { padding: 80px 0; background: #EEF5FD; }
.tp-symptoms-header { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.tp-symptoms-header .section-label { margin-bottom: 16px; }
.tp-symptoms-header h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: var(--color-primary-blue); margin: 0 0 14px; }
.tp-symptoms-header p { font-size: 15px; line-height: 1.75; color: var(--color-body); }

/* Patient Navigation badge with green dot */
.tp-nav-label { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #3BAA6D; border: 1px solid rgba(59,170,109,0.25); font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; padding: 6px 14px; border-radius: 26843500px; }

/* Condition card rows */
.tp-conditions-row { display: grid; gap: 16px; margin-bottom: 16px; }
.tp-conditions-row--2 { grid-template-columns: 1fr 1fr; }
.tp-conditions-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.tp-condition-card { position: relative; border-radius: 16px; overflow: hidden; text-decoration: none; display: block; transition: transform 0.2s ease, box-shadow 0.2s ease; min-height: 300px; }
.tp-conditions-row--3 .tp-condition-card { min-height: 280px; }
.tp-condition-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(11,79,138,0.20); }
.tp-condition-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-condition-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, #0D1B2A 0%, #084F8A 100%); opacity: 0.75; }
.tp-condition-body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: inherit; padding: 24px; }
.tp-condition-check { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; margin-bottom: auto; }
.tp-condition-body h3 { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 8px; margin-top: 16px; }
.tp-condition-body p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.80); margin: 0 0 14px; }
.tp-learn-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #fff; }

/* Patient Journey — 5-step horizontal timeline */
.tp-journey { padding: 56px 0; background: #E8F3EE; }
.tp-journey-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.tp-journey-steps::before { content: ''; position: absolute; top: 36px; left: calc(10% + 36px); right: calc(10% + 36px); height: 1px; background: rgba(11,79,138,0.18); z-index: 0; }
.tp-journey-step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; padding: 0 12px; }
.tp-journey-circle { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(11,79,138,0.20); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.tp-journey-circle span { font-size: 18px; font-weight: 700; color: var(--color-primary-blue); }
.tp-journey-step strong { font-size: 15px; font-weight: 700; color: var(--color-primary-blue); margin-bottom: 6px; display: block; }
.tp-journey-step p { font-size: 13px; line-height: 1.5; color: var(--color-body); margin: 0; }

/* Surgery / Procedures section */
.tp-surgery { padding: 80px 0; background: #F8FAFC; }
.tp-surgery-header { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.tp-surgery-header .section-label { margin-bottom: 16px; }
.tp-surgery-header h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: var(--color-primary-blue); margin: 0 0 14px; }
.tp-surgery-header p { font-size: 15px; line-height: 1.75; color: var(--color-body); }

/* Wide procedure cards (Arthroscopy, Revision) */
.tp-proc-wide { display: grid; gap: 0; background: #fff; border: 1px solid rgba(11,79,138,0.08); border-radius: 16px; overflow: hidden; text-decoration: none; margin-bottom: 16px; transition: box-shadow 0.2s ease; }
.tp-proc-wide:hover { box-shadow: 0 8px 28px rgba(11,79,138,0.10); }
.tp-proc-wide--photo-right { grid-template-columns: 1fr 320px; }
.tp-proc-wide--photo-left { grid-template-columns: 320px 1fr; }
.tp-proc-wide-text { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.tp-proc-wide-text h3 { font-size: 22px; font-weight: 800; color: var(--color-primary-blue); margin: 0 0 12px; }
.tp-proc-wide-text p { font-size: 14.5px; line-height: 1.75; color: var(--color-body); margin: 0 0 20px; }
.tp-proc-wide-photo { overflow: hidden; }
.tp-proc-wide-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stat cards (Knee + Hip) */
.tp-proc-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.tp-proc-stat { border-radius: 16px; padding: 32px 36px; text-decoration: none; display: block; transition: box-shadow 0.2s ease; }
.tp-proc-stat:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
.tp-proc-stat--navy { background: var(--color-navy); }
.tp-proc-stat--green { background: rgba(59,170,109,0.08); border: 1px solid rgba(59,170,109,0.20); }
.tp-proc-stat-num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tp-proc-stat--navy .tp-proc-stat-num strong { font-size: 36px; font-weight: 800; color: #fff; }
.tp-proc-stat--navy .tp-proc-stat-num span { font-size: 13px; color: rgba(255,255,255,0.65); }
.tp-proc-stat--green .tp-proc-stat-num strong { font-size: 36px; font-weight: 800; color: #3BAA6D; }
.tp-proc-stat--green .tp-proc-stat-num span { font-size: 13px; color: var(--color-body); }
.tp-proc-stat--navy h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.tp-proc-stat--green h3 { font-size: 18px; font-weight: 700; color: var(--color-primary-blue); margin: 0 0 10px; }
.tp-proc-stat--navy p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.75); margin: 0 0 20px; }
.tp-proc-stat--green p { font-size: 14px; line-height: 1.65; color: var(--color-body); margin: 0 0 20px; }

/* Mini procedure cards */
.tp-proc-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.tp-proc-mini { background: #fff; border: 1px solid rgba(11,79,138,0.10); border-radius: 16px; padding: 28px 28px 24px; text-decoration: none; display: flex; flex-direction: column; transition: box-shadow 0.2s ease; }
.tp-proc-mini:hover { box-shadow: 0 8px 24px rgba(11,79,138,0.10); }
.tp-proc-mini-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-bg-light-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tp-proc-mini h3 { font-size: 15px; font-weight: 700; color: var(--color-primary-blue); margin: 0 0 10px; }
.tp-proc-mini p { font-size: 13px; line-height: 1.65; color: var(--color-body); margin: 0 0 20px; flex: 1; }

/* Shared learn-more link */
.tp-learn-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-primary-blue); margin-top: auto; }
.tp-learn-link--white { color: rgba(255,255,255,0.85); }

/* Future section */
.tp-future { padding: 80px 0; background: var(--color-navy-deep); }
.tp-future-header { text-align: center; margin-bottom: 48px; }
.tp-future-header .section-label { margin-bottom: 14px; }
.tp-future-header h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: #fff; margin: 0; }
.tp-future-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tp-future-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 36px 32px; text-decoration: none; transition: background 0.2s ease; display: block; }
.tp-future-card:hover { background: rgba(255,255,255,0.12); }
.tp-future-label { display: inline-block; background: rgba(59,170,109,0.20); color: #4ADE80; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 26843500px; padding: 4px 12px; margin-bottom: 16px; }
.tp-future-label--soon { background: rgba(34,197,94,0.15); color: #22C55E; }
.tp-future-card h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.tp-future-card p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.70); margin: 0 0 20px; }
.tp-future-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.60); }

/* CTA */
.tp-cta { padding: 72px 0; background: var(--color-navy); }
.tp-cta-inner { text-align: center; max-width: 600px; margin: 0 auto; }
.tp-cta-inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; margin: 0 0 14px; }
.tp-cta-inner p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.75); margin-bottom: 32px; }
.tp-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tp-cta-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--color-navy); font-weight: 700; padding: 13px 24px; border-radius: 8px; font-size: 14px; text-decoration: none; }
.tp-cta-btn-primary:hover { background: #F1F5FB; color: var(--color-navy); }

@media (max-width: 900px) {
  .tp-hero-inner { grid-template-columns: 1fr; }
  .tp-hero-visual { display: none; }
  .tp-journey-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .tp-journey-steps::before { display: none; }
  .tp-conditions-row--2 { grid-template-columns: 1fr; }
  .tp-conditions-row--3 { grid-template-columns: 1fr 1fr; }
  .tp-proc-wide--photo-right,
  .tp-proc-wide--photo-left { grid-template-columns: 1fr; }
  .tp-proc-wide-photo { height: 220px; }
  .tp-proc-stat-row { grid-template-columns: 1fr; }
  .tp-proc-mini-grid { grid-template-columns: 1fr; }
  .tp-future-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tp-conditions-row--3 { grid-template-columns: 1fr; }
}

/* =============================================================
   ACL & LIGAMENT RECONSTRUCTION PAGE (acl-*)
   ============================================================= */

/* Overview */
.acl-overview { padding: 80px 0; background: #fff; }
.acl-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.acl-overview-left .section-label { margin-bottom: 16px; }
.acl-overview-left h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; color: var(--color-dark); margin: 0 0 16px; }
.acl-overview-left p { font-size: 15px; line-height: 1.75; color: var(--color-body); text-align: justify; }
.acl-symptoms-card { background: #fff; border: 1px solid rgba(11,79,138,0.12); border-radius: 16px; padding: 32px 28px; }
.acl-symptoms-title { font-size: 16px; font-weight: 700; color: var(--color-dark); margin: 0 0 20px; }
.acl-symptoms-list { list-style: disc; margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.acl-symptoms-list li { font-size: 14.5px; line-height: 1.6; color: var(--color-body); }

/* Surgery vs Non-Surgical */
.acl-candidacy { padding: 80px 0; background: #fff; }
.acl-candidacy-inner { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: start; }
.acl-candidacy-text h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; color: var(--color-dark); margin: 0 0 16px; text-align: left; }
.acl-candidacy-text p { font-size: 14.5px; line-height: 1.75; color: var(--color-body); text-align: justify; }
.acl-candidacy-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acl-candidacy-card { background: #fff; border: 1px solid rgba(11,79,138,0.10); border-radius: 12px; overflow: hidden; }
.acl-candidacy-card-head { padding: 14px 20px; font-size: 14px; font-weight: 700; color: var(--color-dark); text-align: center; }
.acl-candidacy-card--surgery .acl-candidacy-card-head { background: rgba(59,170,109,0.12); color: #2D7A52; }
.acl-candidacy-card--nonsurgical .acl-candidacy-card-head { background: #F1F5FB; }
.acl-candidacy-list { list-style: none; margin: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.acl-candidacy-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--color-body); }

/* Role of Arthroscopy */
.acl-arthroscopy { padding: 72px 0; background: #F8FAFC; }
.acl-arthroscopy-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.acl-arthroscopy-inner h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; color: var(--color-dark); margin: 0 0 16px; }
.acl-arthroscopy-inner p { font-size: 15px; line-height: 1.75; color: var(--color-body); text-align: justify; }

@media (max-width: 900px) {
  .acl-overview-inner { grid-template-columns: 1fr; gap: 36px; }
  .acl-candidacy-inner { grid-template-columns: 1fr; }
  .acl-candidacy-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .acl-candidacy-cards { grid-template-columns: 1fr; }
}

/* =============================================================
   MENISCUS TEAR TREATMENT PAGE (men-*)
   ============================================================= */

/* Overview */
.men-overview { padding: 80px 0; background: #F1F5FB; }
.men-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.men-overview-left .section-label { margin-bottom: 16px; }
.men-overview-left h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; color: var(--color-dark); margin: 0 0 16px; }
.men-overview-left p { font-size: 15px; line-height: 1.75; color: var(--color-body); text-align: justify; }
.men-symptoms-card { background: #fff; border: 1px solid rgba(11,79,138,0.12); border-radius: 16px; padding: 32px 28px; }
.men-symptoms-title { font-size: 16px; font-weight: 700; color: var(--color-dark); margin: 0 0 20px; }
.men-symptoms-list { list-style: disc; margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 14px; }
.men-symptoms-list li { font-size: 14.5px; line-height: 1.6; color: var(--color-body); }

/* Treatment Options */
.men-treatment { padding: 80px 0; background: #E8F5EF; }
.men-treatment-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.men-treatment-visual img { width: 100%; height: auto; display: block; border-radius: 12px; }
.men-treatment-text h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; color: var(--color-dark); margin: 0 0 20px; }
.men-treatment-text p { font-size: 15px; line-height: 1.75; color: var(--color-body); text-align: justify; }

/* Tear Zones */
.men-zones { padding: 80px 0; background: #F1F5FB; }
.men-zones-inner { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 48px; align-items: center; }
.men-zones-text h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 800; color: var(--color-dark); margin: 0 0 14px; }
.men-zones-text p { font-size: 14.5px; line-height: 1.7; color: var(--color-body); text-align: justify; }
.men-zones-anatomy img { width: 100%; height: auto; display: block; border-radius: 12px; }
.men-zones-cards { display: flex; flex-direction: column; gap: 16px; }
.men-zone-card { border-radius: 12px; padding: 20px 22px; }
.men-zone-card--red { background: rgba(59,170,109,0.10); border: 1px solid rgba(59,170,109,0.25); }
.men-zone-card--white { background: #fff; border: 1px solid rgba(11,79,138,0.12); }
.men-zone-card-title { font-size: 15px; font-weight: 700; color: var(--color-dark); margin: 0 0 14px; }
.men-zone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.men-zone-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.55; color: var(--color-body); }

@media (max-width: 900px) {
  .men-overview-inner,
  .men-treatment-inner { grid-template-columns: 1fr; gap: 36px; }
  .men-zones-inner { grid-template-columns: 1fr; }
  .men-zones-text, .men-zones-cards { max-width: 600px; margin: 0 auto; }
}

/* =============================================================
   ARTHROSCOPY PAGE (arth-*)
   ============================================================= */

/* Overview */
.arth-overview { padding: 80px 0; background: #F1F5FB; }
.arth-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.arth-overview-left .section-label { margin-bottom: 16px; }
.arth-overview-left h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; color: var(--color-dark); margin: 0 0 16px; }
.arth-overview-left p { font-size: 15px; line-height: 1.75; color: var(--color-body); margin-bottom: 12px; text-align: justify; }
.arth-conditions-card { background: #fff; border: 1px solid rgba(11,79,138,0.12); border-radius: 16px; padding: 32px 28px; }
.arth-conditions-title { font-size: 16px; font-weight: 700; color: var(--color-dark); margin: 0 0 20px; }
.arth-conditions-list { list-style: disc; margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.arth-conditions-list li { font-size: 14.5px; line-height: 1.6; color: var(--color-body); }

/* How It Works */
.arth-how { padding: 80px 0; background: #E8F5EF; }
.arth-how-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
.arth-how-visual img { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.arth-how-text .section-label { margin-bottom: 16px; }
.arth-how-text h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; color: var(--color-dark); margin: 0 0 28px; }
.arth-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.arth-step { display: flex; align-items: flex-start; gap: 16px; }
.arth-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-blue); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.arth-step strong { display: block; font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 4px; }
.arth-step p { font-size: 14px; line-height: 1.65; color: var(--color-body); margin: 0; }

@media (max-width: 900px) {
  .arth-overview-inner,
  .arth-how-inner { grid-template-columns: 1fr; gap: 36px; }
  .arth-how-visual { display: none; }
}

/* ============================================================
   BLOG / KNOWLEDGE CENTRE  —  page-blog.php
   ============================================================ */

/* --- Hero --- */
.blog-hero { position: relative; padding: 72px 0 64px; overflow: hidden; background: var(--color-bg-light-blue); }
.blog-hero-bg-img { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blog-hero-bg-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.85; }
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero-inner { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; }

.blog-hero-left .section-label { margin-bottom: 18px; }
.blog-hero-title { font-size: clamp(1.9rem, 3.5vw, 2.75rem); font-weight: 800; color: var(--color-dark); line-height: 1.15; margin: 0 0 14px; }
.blog-hero-sub { font-size: 15px; color: var(--color-body); line-height: 1.65; margin: 0 0 24px; }
.blog-hero-count { display: inline-block; margin-left: 8px; background: rgba(11,79,138,0.08); color: var(--color-primary-blue); font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 20px; }

/* Search */
.blog-search-form { display: flex; align-items: center; gap: 0; background: #fff; border: 1.5px solid #E2E8F0; border-radius: 10px; padding: 4px 4px 4px 14px; margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.blog-search-icon { flex-shrink: 0; }
.blog-search-input { flex: 1; border: none; outline: none; font-size: 14px; color: var(--color-dark); background: transparent; padding: 8px 12px; min-width: 0; }
.blog-search-btn { background: var(--color-primary-blue); color: #fff; border: none; border-radius: 7px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.blog-search-btn:hover { background: var(--color-primary-blue-2); }

/* Category tabs */
.blog-cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-cat-tab { font-size: 13px; font-weight: 600; color: var(--color-primary-blue); background: #fff; border: 1.5px solid rgba(11,79,138,0.18); border-radius: 20px; padding: 6px 14px; text-decoration: none; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.blog-cat-tab:hover { background: rgba(11,79,138,0.06); }
.blog-cat-tab--active { background: var(--color-primary-blue); color: #fff; border-color: var(--color-primary-blue); }

/* Featured card (right) */
.blog-featured-card { background: #0F2B4D; border-radius: 18px; padding: 32px 28px; color: #fff; display: flex; flex-direction: column; gap: 14px; }
.blog-featured-top { display: flex; flex-direction: column; gap: 10px; }
.blog-featured-badges { display: flex; align-items: center; gap: 10px; }
.blog-featured-badge { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,0.15); border-radius: 4px; padding: 3px 9px; color: #fff; }
.blog-featured-readtime { font-size: 12px; color: rgba(255,255,255,0.65); }
.blog-featured-cat { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); border-radius: 4px; padding: 3px 9px; display: inline-block; width: fit-content; }
.blog-featured-title { font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1.3; margin: 0; }
.blog-featured-excerpt { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.75); margin: 0; }
.blog-featured-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-primary-blue); background: #fff; border-radius: 8px; padding: 9px 18px; text-decoration: none; width: fit-content; transition: background .2s; }
.blog-featured-link:hover { background: var(--color-bg-light-blue); }
.blog-featured-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 14px; margin-top: 4px; }
.blog-featured-author-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(255,255,255,0.7); }
.blog-featured-source { font-size: 11px; color: rgba(255,255,255,0.55); margin: 0; }
.blog-featured-byline { font-size: 13px; font-weight: 700; color: #fff; margin: 0; }

/* --- Category cluster sections --- */
.blog-cluster { padding: 72px 0; background: #fff; }
.blog-cluster--alt { background: #F8FAFC; }

.blog-cluster-header { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.blog-cluster-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blog-cluster-icon--blue   { background: rgba(11,79,138,0.10); color: var(--color-primary-blue); }
.blog-cluster-icon--amber  { background: rgba(180,83,9,0.10);  color: #B45309; }
.blog-cluster-icon--green  { background: rgba(59,170,109,0.12); color: var(--color-green-accent); }
.blog-cluster-icon--purple { background: rgba(109,40,217,0.10); color: #6D28D9; }
.blog-cluster-icon--sm { width: 28px; height: 28px; border-radius: 7px; }
.blog-cluster-label { display: flex; align-items: center; gap: 10px; }
.blog-cluster-name { font-size: 15px; font-weight: 700; }
.blog-cluster-name--blue   { color: var(--color-primary-blue); }
.blog-cluster-name--amber  { color: #B45309; }
.blog-cluster-name--green  { color: var(--color-green-accent); }
.blog-cluster-name--purple { color: #6D28D9; }
.blog-cluster-count { font-size: 13px; color: #6B7280; background: #F3F4F6; border-radius: 12px; padding: 2px 10px; }
.blog-cluster-spacer { flex: 1; border-bottom: 1px solid #E9ECF0; margin: 0 4px; align-self: center; }
.blog-cluster-viewall { font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.blog-cluster-viewall--blue   { color: var(--color-primary-blue); }
.blog-cluster-viewall--amber  { color: #B45309; }
.blog-cluster-viewall--green  { color: var(--color-green-accent); }
.blog-cluster-viewall--purple { color: #6D28D9; }
.blog-cluster-viewall:hover { text-decoration: underline; }

/* --- Article cards (standard vertical) --- */
.blog-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.blog-card { background: #fff; border: 1px solid #E9ECF0; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.blog-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.09); transform: translateY(-2px); }
.blog-card-thumb { height: 175px; overflow: hidden; flex-shrink: 0; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.blog-card:hover .blog-card-thumb img { transform: scale(1.04); }
.blog-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blog-card-cat { font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 4px; padding: 2px 8px; }
.blog-card-cat--blue   { color: var(--color-primary-blue); background: rgba(11,79,138,0.08); }
.blog-card-cat--amber  { color: #B45309; background: rgba(180,83,9,0.08); }
.blog-card-cat--purple { color: #6D28D9; background: rgba(109,40,217,0.08); }
.blog-card-time { font-size: 12px; color: #94A3B8; }
.blog-card-title { font-size: 15px; font-weight: 700; color: var(--color-dark); line-height: 1.4; margin: 0; flex: 1; }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid #F0F2F5; }
.blog-card-date { font-size: 11.5px; color: #94A3B8; }
.blog-card-read { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--color-primary-blue); text-decoration: none; white-space: nowrap; }
.blog-card-read:hover { text-decoration: underline; }

/* --- Wide / landscape cards --- */
.blog-card-wide { display: grid; grid-template-columns: 220px 1fr; background: #fff; border: 1px solid #E9ECF0; border-radius: 14px; overflow: hidden; transition: box-shadow .2s; }
.blog-card-wide:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.08); }
.blog-card-wide-thumb { overflow: hidden; }
.blog-card-wide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 160px; }
.blog-card-wide-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.blog-card-wide-title { font-size: 16px; font-weight: 700; color: var(--color-dark); line-height: 1.4; margin: 0; }
.blog-card-wide-footer { display: flex; align-items: center; gap: 20px; }
.blog-cards-wide-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* --- Before & After — split layout --- */
.blog-cluster-split { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.blog-cluster-split-left .blog-cluster-header { margin-bottom: 8px; }

.blog-list { display: flex; flex-direction: column; margin-top: 8px; }
.blog-list-item { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #F0F2F5; text-decoration: none; transition: background .15s; }
.blog-list-item:last-child { border-bottom: none; }
.blog-list-item:hover .blog-list-title { color: var(--color-primary-blue); }
.blog-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.blog-list-title { font-size: 14.5px; font-weight: 600; color: var(--color-dark); line-height: 1.4; }
.blog-list-time { font-size: 12px; color: #94A3B8; }
.blog-list-thumb { width: 80px; height: 64px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.blog-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Most Read sidebar --- */
.blog-most-read { background: #F8FAFC; border: 1px solid #E9ECF0; border-radius: 14px; padding: 28px 24px; }
.blog-most-read-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; margin: 0 0 6px; }
.blog-most-read-heading { font-size: 1.25rem; font-weight: 800; color: var(--color-dark); margin: 0 0 20px; }
.blog-most-read-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.blog-most-read-item { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px solid #EAECF0; text-decoration: none; }
.blog-most-read-list li:last-child .blog-most-read-item { border-bottom: none; }
.blog-most-read-num { font-size: 18px; font-weight: 800; color: var(--color-primary-blue); opacity: 0.35; flex-shrink: 0; line-height: 1.2; min-width: 28px; }
.blog-most-read-text { font-size: 13.5px; font-weight: 600; color: var(--color-dark); line-height: 1.45; }
.blog-most-read-item:hover .blog-most-read-text { color: var(--color-primary-blue); }

/* --- Blog CTA --- */
.blog-cta { background: linear-gradient(135deg, var(--color-navy) 0%, #0E2347 50%, #091A38 100%); padding: 80px 0; }
.blog-cta-inner { max-width: 560px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.blog-cta-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: center; }
.blog-cta-title { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 800; color: #fff; margin: 0; }
.blog-cta-text { font-size: 15px; line-height: 1.72; color: rgba(255,255,255,0.68); margin: 0; }
.blog-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.blog-cta-actions .hero-cta-whatsapp { width: auto; }

/* --- Blog responsive --- */
@media (max-width: 1100px) {
  .blog-hero-inner { grid-template-columns: 1fr 360px; gap: 40px; }
  .blog-cluster-split { grid-template-columns: 1fr 260px; gap: 40px; }
}
@media (max-width: 900px) {
  .blog-hero-inner { grid-template-columns: 1fr; }
  .blog-hero-right { display: none; }
  .blog-cards-grid { grid-template-columns: 1fr 1fr; }
  .blog-cards-wide-row { grid-template-columns: 1fr; }
  .blog-cluster-split { grid-template-columns: 1fr; }
  .blog-cluster-split-right { display: none; }
  .blog-card-wide { grid-template-columns: 160px 1fr; }
}
@media (max-width: 600px) {
  .blog-cards-grid { grid-template-columns: 1fr; }
  .blog-card-wide { grid-template-columns: 1fr; }
  .blog-card-wide-thumb { height: 180px; }
  .blog-cat-tabs { gap: 6px; }
  .blog-cat-tab { font-size: 12px; padding: 5px 11px; }
}

/* ============================================================
   PARTIAL KNEE REPLACEMENT PAGE (pkr-*)
   ============================================================ */
.pkr-hero { padding: 80px 0 0; background: linear-gradient(135deg, var(--color-bg-light-blue) 0%, #F0F9FF 50%, #F8FAFC 100%); overflow: hidden; }
.pkr-hero-inner { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: flex-end; }
.pkr-hero-content { padding-bottom: 56px; }
.pkr-hero-content .page-tag { display: inline-block; background: rgba(11,79,138,0.08); color: var(--color-primary-blue); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; margin-bottom: 16px; }
.pkr-hero-content h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--color-primary-blue); margin: 0 0 20px; line-height: 1.15; max-width: 680px; }
.pkr-hero-desc { font-size: 16px; line-height: 1.75; color: var(--color-body); max-width: 560px; margin-bottom: 32px; }
.pkr-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pkr-hero .btn-primary { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.pkr-hero .btn-primary:hover { background: #0D2A52; border-color: #0D2A52; transform: translateY(-1px); }
.pkr-hero-visual { position: relative; display: flex; align-items: flex-end; }
.pkr-hero-visual img { width: 420px; height: 360px; display: block; border-radius: 16px 16px 0 0; object-fit: cover; }

.pkr-overview { padding: 80px 0; background: #fff; }
.pkr-overview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.pkr-overview-left .section-label { display: block; margin-bottom: 12px; max-width: max-content;}
.pkr-overview-left h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--color-primary-blue); margin: 0 0 20px; line-height: 1.2; }
.pkr-overview-left p { font-size: 15px; line-height: 1.8; color: var(--color-body); margin-bottom: 14px; }
.pkr-overview-left p:last-child { margin-bottom: 0; }
.pkr-overview-right h3 { font-size: 16px; font-weight: 700; color: var(--color-primary-blue); margin: 0 0 20px; }
.pkr-candidate-cards { display: flex; flex-direction: column; gap: 14px; }
.pkr-candidate-card { background: #fff; border: 1px solid #E5EAF0; border-radius: 12px; padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; box-shadow: 0 2px 8px rgba(11,79,138,0.06); }
.pkr-candidate-card-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(11,79,138,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pkr-candidate-card-body h4 { font-size: 14px; font-weight: 700; color: var(--color-primary-blue); margin: 0 0 4px; }
.pkr-candidate-card-body p { font-size: 13px; color: var(--color-body); line-height: 1.5; margin: 0; }

.pkr-candidacy-note-section { padding: 0 0 64px; background: #fff; }
.pkr-candidacy-note { background: #EEF4FF; border-radius: var(--radius-card); padding: 24px 32px; border-left: 4px solid var(--color-primary-blue); max-width: 760px; margin: 0 auto; }
.pkr-candidacy-note p { font-size: 14.5px; line-height: 1.75; color: var(--color-body); margin: 0; }

.pkr-comparison { padding: 80px 0; background: #F8FAFC; }
.pkr-comparison-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 40px; }
.pkr-comparison-intro p { font-size: 15px; line-height: 1.8; color: var(--color-body); margin-bottom: 14px; }
.pkr-comparison-cards { display: flex; flex-direction: column; gap: 16px; }
.pkr-comparison-card { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 24px; }
.pkr-comparison-card--partial { border-top: 3px solid var(--color-green-accent); }
.pkr-comparison-card--total { border-top: 3px solid var(--color-primary-blue); }
.pkr-comparison-card-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }
.pkr-comparison-card h3 { font-size: 15px; font-weight: 700; color: var(--color-primary-blue); margin: 0 0 8px; }
.pkr-comparison-card p { font-size: 14px; line-height: 1.65; color: var(--color-body); margin: 0 0 10px; }
.pkr-learn-link { font-size: 13px; font-weight: 600; color: var(--color-primary-blue); text-decoration: none; }
.pkr-learn-link:hover { text-decoration: underline; }

.pkr-recovery { padding: 80px 0; background: #fff; }
.pkr-recovery-timeline { display: flex; gap: 0; position: relative; margin-top: 48px; }
.pkr-recovery-timeline::before { content: ''; position: absolute; top: 36px; left: 10%; right: 10%; height: 1px; background: #D1DCF0; z-index: 0; }
.pkr-recovery-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; padding: 0 8px; }
.pkr-recovery-icon { width: 72px; height: 72px; border-radius: 50%; background: #0B4F8A; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; }
.pkr-recovery-icon img { width: 32px; height: 50px; object-fit: contain; }
.pkr-recovery-step-num { font-size: 11px; font-weight: 700; color: #3BAA6D; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; }
.pkr-recovery-step h3 { font-size: 13px; font-weight: 700; color: #0B4F8A; margin-bottom: 6px; }
.pkr-recovery-step p { font-size: 12px; color: #4B5563; line-height: 1.5; max-width: 130px; margin: 0 auto; }

.pkr-cta { padding: 80px 0; background: #F0F4FF; }
.pkr-cta-inner { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: flex-end; }
.pkr-cta-content h2 { color: var(--color-primary-blue); margin-bottom: 12px; }
.pkr-cta-content p { color: var(--color-body); margin-bottom: 32px; }
.pkr-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pkr-cta .btn-primary { background: var(--color-primary-blue); border-color: var(--color-primary-blue); }
.pkr-cta .btn-primary:hover { background: var(--color-primary-blue-2); border-color: var(--color-primary-blue-2); transform: translateY(-1px); }
.pkr-cta .hero-cta-whatsapp { background: transparent; color: var(--color-navy); border: 1.5px solid var(--color-navy); box-shadow: none; width: auto; }
.pkr-cta-visual img { width: 100%; max-height: 260px; object-fit: contain; object-position: bottom center; display: block; }

.pkr-faq { padding: 80px 0; background: #F8FAFC; }

@media (max-width: 900px) {
  .pkr-hero-inner { grid-template-columns: 1fr; }
  .pkr-hero-visual { display: none; }
  .pkr-hero-content { padding-bottom: 40px; }
  .pkr-overview-inner,
  .pkr-comparison-inner { grid-template-columns: 1fr; gap: 32px; }
  .pkr-cta-inner { grid-template-columns: 1fr; }
  .pkr-cta-visual { display: none; }
  .pkr-recovery-timeline { flex-wrap: wrap; justify-content: center; gap: 24px; }
  .pkr-recovery-timeline::before { display: none; }
  .pkr-recovery-step { width: calc(33% - 16px); min-width: 120px; }
  .pkr-hero-content h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
}

/* ============================================================
   BLOG CARD GRADIENT FALLBACK (no thumbnail)
   ============================================================ */
.blog-card-thumb--gradient { display: flex; align-items: center; justify-content: center; }
.blog-card-thumb--blue   { background: linear-gradient(135deg, #EBF4FF 0%, #BFDBFE 100%); }
.blog-card-thumb--amber  { background: linear-gradient(135deg, #FFFBEB 0%, #FDE68A 100%); }
.blog-card-thumb--green  { background: linear-gradient(135deg, #F0FDF4 0%, #BBF7D0 100%); }
.blog-card-thumb--purple { background: linear-gradient(135deg, #F5F3FF 0%, #DDD6FE 100%); }

/* ============================================================
   SINGLE ARTICLE — READING PROGRESS BAR
   ============================================================ */
.article-progress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 0%;
  background: var(--color-primary-blue, #1B3A6B);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ============================================================
   SINGLE ARTICLE — LAYOUT
   ============================================================ */
.article-wrap { padding: 36px 0 80px; }
.article-wrap .container { max-width: 760px; }

/* ── Breadcrumbs ─────────────────────────────────────────── */
.article-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--color-muted, #64748B);
  margin-bottom: 28px;
}
.article-breadcrumbs a { color: var(--color-muted, #64748B); text-decoration: none; }
.article-breadcrumbs a:hover { color: var(--color-primary-blue, #1B3A6B); }
.article-breadcrumbs-current { color: var(--color-body, #1E293B); font-weight: 500; }

/* ── Article header ──────────────────────────────────────── */
.article-header { margin-bottom: 32px; }
.article-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }

.article-cat-chip {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 20px; text-decoration: none;
}
.article-cat-chip--blue   { background: #EBF4FF; color: #1B3A6B; }
.article-cat-chip--amber  { background: #FFFBEB; color: #92400E; }
.article-cat-chip--green  { background: #F0FDF4; color: #166534; }
.article-cat-chip--purple { background: #F5F3FF; color: #5B21B6; }

.article-read-time, .article-date {
  font-size: 13px; color: var(--color-muted, #64748B);
  display: flex; align-items: center; gap: 4px;
}

.article-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800; color: var(--color-navy, #1B3A6B);
  line-height: 1.2; margin: 0 0 20px;
}

.article-byline {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0;
  margin-bottom: 20px;
}
.article-byline-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.article-byline-name { font-size: 14px; font-weight: 700; color: var(--color-navy, #1B3A6B); display: block; }
.article-byline-cred { font-size: 12.5px; color: var(--color-muted, #64748B); display: block; }

/* ── Social share ────────────────────────────────────────── */
.article-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; }
.article-share-label { font-size: 13px; color: var(--color-muted, #64748B); font-weight: 500; }
.article-share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 20px; text-decoration: none;
  transition: opacity .15s; cursor: pointer;
  border: none; background: none;
}
.article-share-btn:hover { opacity: .8; }
.article-share-btn--wa   { background: #25D366; color: #fff; }
.article-share-btn--fb   { background: #1877F2; color: #fff; }
.article-share-btn--copy { background: #F1F5F9; color: var(--color-body, #1E293B); border: 1px solid #E2E8F0; }
.article-share--bottom { margin-top: 32px; margin-bottom: 0; padding-top: 24px; border-top: 1px solid #E2E8F0; }

/* ── Hero image ──────────────────────────────────────────── */
.article-hero-img {
  width: 100%; border-radius: 12px; overflow: hidden;
  margin-bottom: 36px; max-height: 420px;
}
.article-hero-img img { width: 100%; height: 420px; object-fit: cover; display: block; }
.article-hero-img--gradient { height: 260px; }
.article-hero-img--blue   { background: linear-gradient(135deg, #EBF4FF 0%, #BFDBFE 100%); }
.article-hero-img--amber  { background: linear-gradient(135deg, #FFFBEB 0%, #FDE68A 100%); }
.article-hero-img--green  { background: linear-gradient(135deg, #F0FDF4 0%, #BBF7D0 100%); }
.article-hero-img--purple { background: linear-gradient(135deg, #F5F3FF 0%, #DDD6FE 100%); }

/* ── Table of Contents ───────────────────────────────────── */
.article-toc {
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px;
  padding: 20px 24px; margin-bottom: 36px;
}
.article-toc-label {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-muted, #64748B);
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 12px;
}
.article-toc-list { margin: 0; padding-left: 18px; }
.article-toc-list li { margin-bottom: 6px; }
.article-toc-list a {
  font-size: 14px; color: var(--color-primary-blue, #1B3A6B); text-decoration: none; font-weight: 500;
}
.article-toc-list a:hover { text-decoration: underline; }

/* ── Article body content ─────────────────────────────────── */
.article-content { font-size: 16px; line-height: 1.8; color: var(--color-body, #1E293B); margin-bottom: 36px; }
.article-content h2 { font-size: 1.35rem; font-weight: 800; color: var(--color-navy, #1B3A6B); margin: 40px 0 14px; line-height: 1.25; }
.article-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--color-navy, #1B3A6B); margin: 28px 0 10px; }
.article-content p { margin: 0 0 20px; }
.article-content ul, .article-content ol { margin: 0 0 20px; padding-left: 24px; }
.article-content li { margin-bottom: 8px; }
.article-content strong { font-weight: 700; color: var(--color-navy, #1B3A6B); }
.article-content a { color: var(--color-primary-blue, #1B3A6B); text-decoration: underline; }
.article-content blockquote {
  border-left: 3px solid var(--color-primary-blue, #1B3A6B);
  margin: 28px 0; padding: 14px 20px;
  background: #F8FAFC; border-radius: 0 8px 8px 0;
  font-style: italic; color: var(--color-muted, #64748B);
}
.article-content img { max-width: 100%; border-radius: 8px; margin: 16px 0; }
.article-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.article-content th { background: var(--color-navy, #1B3A6B); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; }
.article-content td { padding: 9px 14px; border-bottom: 1px solid #E2E8F0; }
.article-content tr:nth-child(even) td { background: #F8FAFC; }

/* ── Mid-article CTA (injected by filter) ────────────────── */
.article-mid-cta {
  background: linear-gradient(135deg, #1B3A6B 0%, #0F2D5A 100%);
  border-radius: 12px; padding: 28px 32px; margin: 40px 0;
  color: #fff;
}
.article-mid-cta-text { font-size: 15.5px; font-weight: 600; margin: 0 0 16px; opacity: .95; }
.article-mid-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Tags ────────────────────────────────────────────────── */
.article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 0; }
.article-tags-label { font-size: 13px; font-weight: 600; color: var(--color-muted, #64748B); }
.article-tag {
  font-size: 12px; padding: 4px 12px; border-radius: 20px;
  background: #F1F5F9; color: var(--color-body, #1E293B);
  text-decoration: none; transition: background .15s;
}
.article-tag:hover { background: #E2E8F0; }

/* ── Author block ────────────────────────────────────────── */
.article-author {
  display: flex; gap: 24px; align-items: flex-start;
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px;
  padding: 28px; margin: 40px 0;
}
.article-author-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.article-author-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted, #64748B); font-weight: 600; margin: 0 0 4px; }
.article-author-name { font-size: 17px; font-weight: 800; color: var(--color-navy, #1B3A6B); margin: 0 0 2px; }
.article-author-cred { font-size: 13px; color: var(--color-muted, #64748B); margin: 0 0 10px; }
.article-author-bio { font-size: 14px; line-height: 1.7; color: var(--color-body, #1E293B); margin: 0; }

/* ── Bottom CTA ──────────────────────────────────────────── */
.article-bottom-cta {
  background: var(--color-bg-light-blue, #EBF4FF);
  border-radius: 12px; padding: 32px; margin: 0 0 48px;
}
.article-bottom-cta-title { font-size: 1.15rem; font-weight: 800; color: var(--color-navy, #1B3A6B); margin: 0 0 8px; }
.article-bottom-cta-text { font-size: 14.5px; line-height: 1.7; color: var(--color-body, #1E293B); margin: 0 0 20px; }
.article-bottom-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Related articles ────────────────────────────────────── */
.article-related { margin-bottom: 48px; }
.article-related-heading { font-size: 1.1rem; font-weight: 800; color: var(--color-navy, #1B3A6B); margin: 0 0 20px; }
.article-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.article-related-card { text-decoration: none; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid #E2E8F0; transition: box-shadow .2s; }
.article-related-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.article-related-thumb { height: 130px; overflow: hidden; }
.article-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-related-body { padding: 14px; flex: 1; }
.article-related-title { font-size: 13.5px; font-weight: 700; color: var(--color-navy, #1B3A6B); line-height: 1.4; margin: 6px 0 8px; }
.article-related-time { font-size: 12px; color: var(--color-muted, #64748B); }

/* ── Back link ───────────────────────────────────────────── */
.article-back { margin-bottom: 24px; }
.article-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--color-primary-blue, #1B3A6B);
  text-decoration: none;
}
.article-back-link:hover { text-decoration: underline; }

/* ============================================================
   RESPONSIVE — SINGLE ARTICLE
   ============================================================ */
@media (max-width: 900px) {
  .article-wrap { padding: 24px 0 60px; }
  .article-related-grid { grid-template-columns: 1fr 1fr; }
  .article-author { flex-direction: column; gap: 16px; }
}
@media (max-width: 600px) {
  .article-title { font-size: 1.5rem; }
  .article-related-grid { grid-template-columns: 1fr; }
  .article-mid-cta { padding: 20px; }
  .article-bottom-cta { padding: 20px; }
  .article-hero-img img { height: 240px; }
  .article-share { gap: 6px; }
}

/* ============================================================
   BLOG V2 — FLAT FEED
   ============================================================ */

/* ── Filter tabs ───────────────────────────────────────────── */
.blv2-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.blv2-tab {
  font-size: 13.5px; font-weight: 600;
  padding: 7px 18px; border-radius: 100px;
  border: 1.5px solid #CBD5E1;
  background: #fff; color: var(--color-body, #1E293B);
  cursor: pointer; transition: all .18s ease;
  white-space: nowrap;
}
.blv2-tab:hover { border-color: var(--color-primary-blue, #1B3A6B); color: var(--color-primary-blue, #1B3A6B); }
.blv2-tab--active { background: var(--color-navy, #1B3A6B); color: #fff; border-color: var(--color-navy, #1B3A6B); }

/* ── Feed section ──────────────────────────────────────────── */
.blv2-feed-section { padding: 64px 0 80px; background: #fff; }

/* ── Category chip (shared) ────────────────────────────────── */
.blv2-chip {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 20px;
}
.blv2-chip--blue   { background: #EBF4FF; color: #1B3A6B; }
.blv2-chip--amber  { background: #FFFBEB; color: #92400E; }
.blv2-chip--green  { background: #F0FDF4; color: #166534; }
.blv2-chip--purple { background: #F5F3FF; color: #5B21B6; }

/* ── Gradient fallback (no thumbnail) ──────────────────────── */
.blv2-gradient--blue   { background: linear-gradient(135deg,#EBF4FF 0%,#BFDBFE 100%); }
.blv2-gradient--amber  { background: linear-gradient(135deg,#FFFBEB 0%,#FDE68A 100%); }
.blv2-gradient--green  { background: linear-gradient(135deg,#F0FDF4 0%,#BBF7D0 100%); }
.blv2-gradient--purple { background: linear-gradient(135deg,#F5F3FF 0%,#DDD6FE 100%); }

/* ── Lead card ─────────────────────────────────────────────── */
.blv2-lead {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid #E2E8F0;
  margin-bottom: 40px;
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
  transition: box-shadow .22s ease, transform .22s ease;
}
.blv2-lead:hover { box-shadow: 0 8px 40px rgba(0,0,0,.1); transform: translateY(-2px); }

.blv2-lead-img {
  position: relative; overflow: hidden; min-height: 360px;
}
.blv2-lead-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.blv2-lead:hover .blv2-lead-img img { transform: scale(1.04); }
.blv2-lead-img--gradient { min-height: 360px; }

.blv2-lead-body {
  padding: 44px 40px; display: flex; flex-direction: column;
  justify-content: center; gap: 0; background: #fff;
}
.blv2-lead-body .blv2-chip { margin-bottom: 16px; align-self: flex-start; }

.blv2-lead-title {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 800; color: var(--color-navy, #1B3A6B);
  line-height: 1.25; margin: 0 0 14px;
}
.blv2-lead-excerpt {
  font-size: 15px; line-height: 1.7; color: var(--color-body, #1E293B);
  margin: 0 0 20px; opacity: .8;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.blv2-lead-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--color-muted, #64748B); margin-bottom: 22px;
}
.blv2-meta-time { display: flex; align-items: center; gap: 4px; }
.blv2-meta-date::before { content: '·'; margin-right: 14px; }

.blv2-lead-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700;
  color: var(--color-primary-blue, #1B3A6B); text-decoration: none;
  align-self: flex-start; padding: 10px 22px;
  border: 2px solid var(--color-primary-blue, #1B3A6B);
  border-radius: 8px; transition: all .18s ease;
}
.blv2-lead-link:hover { background: var(--color-primary-blue, #1B3A6B); color: #fff; }

/* ── Bento card grid ───────────────────────────────────────── */
.blv2-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

/* ── Base bento card (vertical by default, JS reassigns) ──── */
.blv2-bento-card {
  border-radius: 14px; overflow: hidden;
  border: 1px solid #E2E8F0; background: #fff;
  display: flex; flex-direction: column;
  transition: box-shadow .22s ease, transform .22s ease;
  grid-column: span 2; /* fallback before JS runs */
}
.blv2-bento-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.09); transform: translateY(-3px); }

/* Image */
.blv2-bc-img {
  position: relative; overflow: hidden; flex-shrink: 0;
  height: 200px;
}
.blv2-bc-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.blv2-bento-card:hover .blv2-bc-img img { transform: scale(1.05); }

/* Chip overlaid on image — shown in vertical layout */
.blv2-bc-img-chip {
  position: absolute; bottom: 12px; left: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}

/* Body */
.blv2-bc-body {
  padding: 18px 20px 20px; flex: 1;
  display: flex; flex-direction: column;
}

/* Icon box — shown in horizontal / wide layout */
.blv2-bc-iconbox {
  display: none;
  width: 34px; height: 34px; border-radius: 8px;
  align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 12px;
}
.blv2-bc-iconbox--blue   { background: #EBF4FF; color: #1B3A6B; }
.blv2-bc-iconbox--amber  { background: #FFFBEB; color: #92400E; }
.blv2-bc-iconbox--green  { background: #F0FDF4; color: #166534; }
.blv2-bc-iconbox--purple { background: #F5F3FF; color: #5B21B6; }

/* Title */
.blv2-bc-title {
  font-size: 15px; font-weight: 700; line-height: 1.4;
  margin: 0 0 8px; flex: 1;
}
.blv2-bc-title a { color: var(--color-navy, #1B3A6B); text-decoration: none; }
.blv2-bc-title a:hover { color: var(--color-primary-blue, #1B3A6B); }

/* Excerpt — styling only; visibility controlled by card variant classes below */
.blv2-bc-excerpt {
  font-size: 13.5px; line-height: 1.65; color: var(--color-muted, #64748B);
  margin: 0 0 14px;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* Hidden in vertical + horizontal; shown only in wide */
.blv2-bento-card:not(.blv2-card--w) .blv2-bc-excerpt { display: none; }

/* Footer */
.blv2-bc-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--color-muted, #64748B);
  border-top: 1px solid #F1F5F9; padding-top: 12px; margin-top: auto;
}
.blv2-bc-meta-v {
  display: inline-flex; align-items: center; gap: 4px;
}
.blv2-bc-meta-h { display: none; }
.blv2-bc-read {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; color: var(--color-primary-blue, #1B3A6B);
  text-decoration: none; font-size: 12.5px;
}
.blv2-bc-read:hover { text-decoration: underline; }

/* ── Horizontal card (span 3 — half width) ─────────────────── */
.blv2-card--h {
  flex-direction: row;
}
.blv2-card--h .blv2-bc-img {
  width: 42%; height: auto; min-height: 190px; flex-shrink: 0; border-radius: 0;
}
.blv2-card--h .blv2-bc-img-chip { display: none; }
.blv2-card--h .blv2-bc-iconbox  { display: flex; }
/* excerpt already hidden by :not(.blv2-card--w) rule above */
.blv2-card--h .blv2-bc-meta-v   { display: none; }
.blv2-card--h .blv2-bc-meta-h   { display: block; }
.blv2-card--h .blv2-bc-body     { padding: 24px 22px 22px; justify-content: center; }
.blv2-card--h .blv2-bc-title    { font-size: 16px; }

/* ── Wide card (span 6 — full width) ──────────────────────── */
.blv2-card--w {
  flex-direction: row;
}
.blv2-card--w .blv2-bc-img {
  width: 44%; height: auto; min-height: 260px; flex-shrink: 0; border-radius: 0;
}
.blv2-card--w .blv2-bc-img-chip { display: none; }
.blv2-card--w .blv2-bc-iconbox  { display: flex; }
.blv2-card--w .blv2-bc-excerpt  { display: -webkit-box !important; -webkit-line-clamp: 3; }
.blv2-card--w .blv2-bc-meta-v   { display: none; }
.blv2-card--w .blv2-bc-meta-h   { display: block; }
.blv2-card--w .blv2-bc-body     { padding: 32px 30px 28px; justify-content: center; }
.blv2-card--w .blv2-bc-title    { font-size: 20px; line-height: 1.35; margin-bottom: 12px; }
.blv2-card--w .blv2-bc-iconbox  { width: 40px; height: 40px; border-radius: 10px; }

/* ── Empty state ───────────────────────────────────────────── */
.blv2-empty {
  text-align: center; padding: 60px 20px;
  color: var(--color-muted, #64748B); font-size: 15px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Collapse bento to 4-col: thirds→span2(half), halves→span4(full), full→span4 */
  .blv2-bento { grid-template-columns: repeat(4, 1fr); }
  .blv2-card--v { grid-column: span 2 !important; }
  .blv2-card--h { grid-column: span 4 !important; flex-direction: row; }
  .blv2-card--w { grid-column: span 4 !important; flex-direction: row; }
}
@media (max-width: 768px) {
  .blv2-lead { grid-template-columns: 1fr; }
  .blv2-lead-img { min-height: 220px; }
  .blv2-lead-img--gradient { min-height: 220px; }
  .blv2-lead-body { padding: 28px 24px; }
  .blv2-tabs { gap: 6px; }
  .blv2-tab { font-size: 12.5px; padding: 6px 14px; }
  /* On tablet: all bento cards full-width, vertical */
  .blv2-bento { grid-template-columns: repeat(2, 1fr); }
  .blv2-bento-card,
  .blv2-card--v, .blv2-card--h, .blv2-card--w {
    grid-column: span 2 !important;
    flex-direction: column !important;
  }
  .blv2-bc-img { height: 200px !important; width: 100% !important; min-height: 0 !important; }
  .blv2-bc-img-chip { display: block !important; }
  .blv2-bc-iconbox  { display: none !important; }
  .blv2-bc-meta-v   { display: inline-flex !important; }
  .blv2-bc-meta-h   { display: none !important; }
  .blv2-bc-excerpt  { display: none !important; }
}
@media (max-width: 600px) {
  .blv2-bento { grid-template-columns: 1fr; }
  .blv2-bento-card,
  .blv2-card--v, .blv2-card--h, .blv2-card--w { grid-column: span 1 !important; }
  .blv2-feed-section { padding: 40px 0 60px; }
}

/* ============================================================
   PATIENT GUIDE — single.php (Knowledge Centre articles)
   ============================================================ */

/* Outer wrap */
.pguide-wrap { padding: 40px 0 80px; }

/* ── Header ────────────────────────────────────────────────── */
.pguide-header { max-width: 760px; margin: 0 auto 32px; }

.pguide-top-meta {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.pguide-date { font-size: 13px; color: var(--color-muted, #64748B); }

.pguide-title {
  font-size: clamp(24px, 4vw, 36px); font-weight: 800; line-height: 1.25;
  color: var(--color-navy, #1B3A6B); margin: 0 0 20px;
}

.pguide-byline {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: #F8FAFC;
  border: 1px solid #E2E8F0; border-radius: 10px;
}
.pguide-byline-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.pguide-byline-text { flex: 1; }
.pguide-byline-name  { display: block; font-weight: 700; font-size: 13.5px; color: #1B3A6B; }
.pguide-byline-cred  { display: block; font-size: 12px; color: var(--color-muted, #64748B); }
.pguide-read-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--color-muted, #64748B);
  white-space: nowrap; flex-shrink: 0;
}

/* ── Hero ───────────────────────────────────────────────────── */
.pguide-hero {
  max-width: 900px; margin: 0 auto 40px;
  border-radius: 16px; overflow: hidden; height: 340px;
}
.pguide-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pguide-hero--gradient { background: linear-gradient(135deg, #1B5FAF 0%, #0F4C8A 100%); }
.pguide-hero--amber  { background: linear-gradient(135deg, #D97706 0%, #92400E 100%); }
.pguide-hero--green  { background: linear-gradient(135deg, #16A34A 0%, #14532D 100%); }
.pguide-hero--purple { background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%); }

/* ── Two-column layout: sidebar TOC + content ────────────── */
.pguide-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas: "toc content";
  gap: 48px;
  max-width: 1040px; margin: 0 auto;
  align-items: start;
}

/* ── Sidebar TOC ────────────────────────────────────────────── */
.pguide-toc {
  grid-area: toc;
  position: sticky; top: 90px;
  background: #F8FAFC; border: 1px solid #E2E8F0;
  border-radius: 12px; padding: 18px 16px;
}
.pguide-toc-label {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-navy, #1B3A6B);
  margin: 0 0 12px;
}
.pguide-toc-list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: toc;
}
.pguide-toc-list li { margin: 0; }
.pguide-toc-h3 a,
.pguide-toc-h4 a {
  display: block; padding: 6px 0 6px 10px;
  font-size: 12.5px; line-height: 1.4; color: #475569;
  text-decoration: none; border-left: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.pguide-toc-h4 a { padding-left: 20px; font-size: 12px; }
.pguide-toc-h3 a:hover,
.pguide-toc-h4 a:hover { color: var(--color-navy, #1B3A6B); }
.pguide-toc-h3 a.pguide-toc-active,
.pguide-toc-h4 a.pguide-toc-active {
  color: var(--color-primary-blue, #1B5FAF);
  border-left-color: var(--color-primary-blue, #1B5FAF);
  font-weight: 600;
}

/* ── Article content ────────────────────────────────────────── */
.pguide-content { grid-area: content; min-width: 0; }

/* H3 and H4 headings in guide content */
.pguide-content h3 {
  font-size: 20px; font-weight: 800; color: var(--color-navy, #1B3A6B);
  margin: 36px 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid #E2E8F0;
}
.pguide-content h4 {
  font-size: 16px; font-weight: 700; color: var(--color-navy, #1B3A6B);
  margin: 28px 0 10px; padding-left: 12px;
  border-left: 3px solid var(--color-primary-blue, #1B5FAF);
}
.pguide-content p  { font-size: 16px; line-height: 1.75; color: #334155; margin: 0 0 16px; }
.pguide-content ul,
.pguide-content ol { font-size: 16px; line-height: 1.75; color: #334155; margin: 0 0 16px; padding-left: 22px; }
.pguide-content li { margin-bottom: 6px; }
.pguide-content strong { color: #1E293B; font-weight: 700; }

/* ── Special boxes: Key Takeaways + Questions to Ask ─────── */
.pguide-box {
  border-radius: 12px; padding: 20px 22px; margin: 32px 0;
}
.pguide-box h4 {
  border: none !important; padding-left: 0 !important;
  margin: 0 0 12px !important; font-size: 15px !important;
  display: flex; align-items: center; gap: 8px;
}
.pguide-box ul,
.pguide-box ol { margin-bottom: 0; }

/* Key takeaways — blue tinted */
.pguide-box--takeaways {
  background: #EBF4FF; border: 1px solid #BFDBFE;
}
.pguide-box--takeaways h4 { color: #1B3A6B; }
.pguide-box--takeaways h4::before {
  content: "";
  display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231B3A6B' stroke-width='2'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E") no-repeat center;
}
.pguide-box--takeaways li { color: #1E3A5F; }

/* Questions to ask — green tinted */
.pguide-box--questions {
  background: #F0FDF4; border: 1px solid #BBF7D0;
}
.pguide-box--questions h4 { color: #15622D; }
.pguide-box--questions h4::before {
  content: "";
  display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2315622D' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") no-repeat center;
}
.pguide-box--questions li { color: #15622D; }
.pguide-box--questions li::marker { color: #16A34A; }

/* ── WhatsApp CTA ────────────────────────────────────────────── */
.pguide-wa-cta {
  max-width: 1040px; margin: 48px auto;
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px;
  padding: 28px 32px;
}
.pguide-wa-cta-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.pguide-wa-cta-title {
  font-size: 18px; font-weight: 700; color: var(--color-navy, #1B3A6B); margin: 0 0 4px;
}
.pguide-wa-cta-sub  { font-size: 14px; color: var(--color-muted, #64748B); margin: 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pguide-body {
    grid-template-columns: 1fr;
    grid-template-areas: "content";
  }
  .pguide-toc { display: none !important; }
  .pguide-hero { height: 240px; }
}
@media (max-width: 600px) {
  .pguide-title { font-size: 22px; }
  .pguide-hero  { height: 180px; border-radius: 10px; }
  .pguide-byline { flex-wrap: wrap; }
  .pguide-read-time { width: 100%; }
  .pguide-wa-cta-inner { flex-direction: column; align-items: flex-start; }
  .pguide-wa-cta { padding: 22px 18px; }
}

/* ============================================================
   PATIENT FAQ PAGE  (page-faq.php)
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.faq-hero {
  background: linear-gradient(160deg, #F0F6FF 0%, #F8FAFC 60%);
  padding: 64px 0 48px;
  border-bottom: 1px solid #E2E8F0;
}
.faq-hero-inner { max-width: 680px; }
.faq-hero-title {
  font-size: clamp(30px, 5vw, 48px); font-weight: 800;
  color: var(--color-navy, #1B3A6B); margin: 8px 0 12px; line-height: 1.15;
}
.faq-hero-sub {
  font-size: 17px; color: var(--color-muted, #64748B); line-height: 1.65;
  margin: 0 0 28px;
}
.faq-count {
  display: inline-block; margin-left: 8px;
  background: #E0EDFF; color: #1B3A6B;
  font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 20px;
}

/* Search bar */
.faq-search-wrap {
  position: relative; max-width: 520px;
}
.faq-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none;
}
.faq-search-input {
  width: 100%; padding: 14px 48px 14px 46px;
  border: 1.5px solid #CBD5E1; border-radius: 12px;
  font-size: 15px; font-family: var(--font-body); color: #1E293B;
  background: #fff; outline: none; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.faq-search-input:focus {
  border-color: var(--color-primary-blue, #1B5FAF);
  box-shadow: 0 0 0 3px rgba(27, 95, 175, .12);
}
.faq-search-clear {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #94A3B8; padding: 4px;
}
.faq-search-clear:hover { color: #1E293B; }

/* ── Body layout ────────────────────────────────────────────── */
.faq-body { padding: 56px 0 80px; }
.faq-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.faq-sidebar {
  position: sticky; top: 88px;
}
.faq-sidebar-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #94A3B8; margin: 0 0 10px;
}
.faq-cat-nav { list-style: none; margin: 0; padding: 0; }
.faq-cat-nav li { margin: 0; }

.faq-cat-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; font-family: var(--font-body); color: #475569;
  text-align: left; transition: background .15s, color .15s;
}
.faq-cat-btn svg { flex-shrink: 0; opacity: .7; }
.faq-cat-btn:hover { background: #F1F5F9; color: #1E293B; }
.faq-cat-btn--active, .faq-cat-btn--scrollactive {
  background: #EBF4FF; color: var(--color-primary-blue, #1B5FAF); font-weight: 700;
}
.faq-cat-btn--active svg, .faq-cat-btn--scrollactive svg { opacity: 1; }
.faq-cat-count {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: #F1F5F9; color: #64748B;
  padding: 1px 7px; border-radius: 10px; flex-shrink: 0;
}
.faq-cat-btn--active .faq-cat-count { background: #DBEAFE; color: #1B5FAF; }

/* Sidebar CTA */
.faq-sidebar-cta {
  margin-top: 28px; padding: 16px; background: #F8FAFC;
  border: 1px solid #E2E8F0; border-radius: 10px;
}
.faq-sidebar-cta p {
  font-size: 12.5px; color: var(--color-muted, #64748B); margin: 0 0 10px;
}
.faq-wa-btn { font-size: 13px; padding: 9px 14px; width: 100%; justify-content: center; }

/* ── Main content ────────────────────────────────────────────── */
.faq-main { min-width: 0; }

.faq-no-results {
  text-align: center; padding: 60px 20px;
  color: var(--color-muted, #64748B); font-size: 15px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.faq-no-results a { color: var(--color-primary-blue, #1B5FAF); }

/* ── Category section ────────────────────────────────────────── */
.faq-section { margin-bottom: 52px; }
.faq-section:last-child { margin-bottom: 0; }

.faq-section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 2px solid #E2E8F0;
}
.faq-section-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.faq-section-icon--blue   { background: #EBF4FF; color: #1B3A6B; }
.faq-section-icon--amber  { background: #FFFBEB; color: #92400E; }
.faq-section-icon--green  { background: #F0FDF4; color: #166534; }
.faq-section-icon--purple { background: #F5F3FF; color: #5B21B6; }

.faq-section-title {
  font-size: 19px; font-weight: 800; color: var(--color-navy, #1B3A6B); margin: 0; flex: 1;
}
.faq-section-count {
  font-size: 12px; color: #94A3B8; white-space: nowrap;
}

/* ── Accordion ────────────────────────────────────────────────── */
.faq-accordion { border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; }

.faq-item { border-bottom: 1px solid #E2E8F0; }
.faq-item:last-child { border-bottom: none; }

.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 18px 20px; text-align: left;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--color-navy, #1B3A6B); line-height: 1.4;
  transition: background .15s;
}
.faq-question:hover { background: #F8FAFC; }
.faq-item--open > .faq-question { background: #EBF4FF; color: var(--color-primary-blue, #1B5FAF); }

.faq-question-text { flex: 1; }

.faq-chevron {
  flex-shrink: 0; color: #94A3B8;
  transition: transform .2s ease;
}
.faq-item--open .faq-chevron { transform: rotate(180deg); color: var(--color-primary-blue, #1B5FAF); }

/* Answer panel */
.faq-answer {
  border-top: 1px solid #DBEAFE;
  background: #F8FBFF;
}
.faq-answer[hidden] { display: none; }
.faq-answer-inner { padding: 18px 22px 20px 22px; }

.faq-answer-text {
  font-size: 15px; line-height: 1.7; color: #334155; margin: 0 0 16px;
}
.faq-read-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 700;
  color: var(--color-primary-blue, #1B5FAF); text-decoration: none;
}
.faq-read-more:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
  }
  .faq-sidebar {
    position: static;
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  }
  .faq-sidebar-label { display: none; }
  .faq-cat-nav {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .faq-cat-nav li { display: inline-block; }
  .faq-cat-btn {
    padding: 7px 14px; white-space: nowrap;
    border: 1.5px solid #E2E8F0; border-radius: 20px;
  }
  .faq-cat-btn--active { border-color: var(--color-primary-blue, #1B5FAF); }
  .faq-sidebar-cta { display: none; }
}
@media (max-width: 600px) {
  .faq-hero { padding: 40px 0 32px; }
  .faq-question { font-size: 14px; padding: 15px 16px; }
  .faq-answer-inner { padding: 14px 16px 16px; }
  .faq-body { padding: 32px 0 60px; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero {
  background: linear-gradient(135deg, #0D1B2A 0%, #0B4F8A 100%);
  color: #fff;
  padding: 64px 0 56px;
}
.contact-hero .breadcrumb a { color: rgba(255,255,255,0.7); }
.contact-hero .breadcrumb-sep { color: rgba(255,255,255,0.4); }
.contact-hero .breadcrumb [aria-current] { color: rgba(255,255,255,0.9); }
.contact-hero .section-label { margin-bottom: 16px; display: inline-block; }
.contact-hero h1 { color: #fff; margin: 0 0 16px; font-size: clamp(28px, 4vw, 42px); max-width: 640px; }
.contact-hero__sub { color: rgba(255,255,255,0.82); font-size: 17px; max-width: 520px; margin: 0; }

.contact-section { background: var(--color-off-white, #F8F9FB); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact-col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-blue, #0B4F8A);
  margin: 0 0 20px;
}

.contact-info-cards { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }

.contact-info-card {
  background: #fff;
  border: 1px solid #E5EAF0;
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-info-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #EEF4FF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-blue, #0B4F8A);
}
.contact-info-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7280;
  margin: 0 0 4px;
}
.contact-info-card__phone {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy, #1B3A6B);
  text-decoration: none;
  margin-bottom: 4px;
}
.contact-info-card__phone:hover { color: var(--color-primary-blue, #0B4F8A); }
.contact-info-card__address { font-size: 14px; color: #374151; margin: 0 0 8px; line-height: 1.5; }
.contact-info-card__email {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-blue, #0B4F8A);
  text-decoration: none;
}
.contact-info-card__email:hover { text-decoration: underline; }
.contact-info-card__note { font-size: 13px; color: #6B7280; margin: 0; }
.contact-info-card__map-link { font-size: 13px; font-weight: 600; color: var(--color-primary-blue, #0B4F8A); text-decoration: none; }
.contact-info-card__map-link:hover { text-decoration: underline; }

.contact-quick-btns { display: flex; flex-direction: column; gap: 12px; }
.contact-quick-btn { justify-content: center; }

.appt-form-wrap {
  background: #fff;
  border: 1px solid #E5EAF0;
  border-radius: 16px;
  padding: 36px 32px;
}
.appt-form-wrap .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.appt-form-wrap .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.appt-form-wrap .form-group:last-child { margin-bottom: 0; }
.appt-form-wrap label { font-size: 13px; font-weight: 600; color: #374151; }
.appt-form-wrap label span { color: #dc2626; }
.appt-form-wrap input,
.appt-form-wrap select,
.appt-form-wrap textarea {
  width: 100%;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  transition: border-color 0.2s;
  box-sizing: border-box;
  font-family: inherit;
}
.appt-form-wrap input:focus,
.appt-form-wrap select:focus,
.appt-form-wrap textarea:focus {
  outline: none;
  border-color: var(--color-primary-blue, #0B4F8A);
  box-shadow: 0 0 0 3px rgba(11,79,138,0.08);
}
.appt-form-wrap textarea { resize: vertical; }

.contact-submit-btn { width: 100%; justify-content: center; margin-top: 8px; }
.contact-submit-note { font-size: 12px; color: #9CA3AF; margin: 10px 0 0; text-align: center; }

.form-message {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .contact-hero { padding: 40px 0 36px; }
  .appt-form-wrap { padding: 24px 18px; }
  .appt-form-wrap .form-row { grid-template-columns: 1fr; }
  .contact-quick-btns { flex-direction: column; }
}