/* ============================================
   SHARADA LAPAROSCOPY HOSPITAL
   Design System & Complete Styles
   ============================================ */

/* --- Google Fonts --- */
/* Montserrat is the free stand-in for Gotham; if licensed Gotham woff2 files are
   added later, an @font-face for 'Gotham' will take over automatically. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Primary Colors - from logo */
  --blue-900: #0a2540;
  --blue-800: #0d3158;
  --blue-700: #0f3d6e;
  --blue-600: #145da0;
  --blue-500: #1a73c7;
  --blue-400: #4a9fe5;
  --blue-300: #7cb8eb;
  --blue-200: #b3d7f5;
  --blue-100: #dceefb;
  --blue-50: #eef7fd;

  /* Maroon Accent */
  --maroon-800: #5c1a1a;
  --maroon-700: #7a2332;
  --maroon-600: #8b1a2b;
  --maroon-500: #a8243d;
  --maroon-400: #c93d57;
  --maroon-300: #e06b80;
  --maroon-200: #f0a3b1;
  --maroon-100: #fbe0e6;
  --maroon-50: #fdf2f4;

  /* Neutrals */
  --gray-950: #0c0e12;
  --gray-900: #171a21;
  --gray-800: #2a2d37;
  --gray-700: #3d4150;
  --gray-600: #545869;
  --gray-500: #646a7c;   /* was #6e7385: 4.4:1 on the gray-50 wash, just under AA */
  --gray-400: #8f93a3;
  --gray-300: #b3b6c3;
  --gray-200: #d4d6df;
  --gray-100: #ecedf2;
  --gray-50: #f6f7f9;
  --white: #ffffff;

  /* Semantic */
  --success: #10b981;
  --warning: #f59e0b;
  --emergency: #dc2626;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Typography */
  --font-sans: 'Gotham', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Gotham', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --text-xs: 0.8rem;   /* 12.8px floor — this audience skews older */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Shadows */
  /* Every shadow is lit from directly above: a tight contact shadow that
     anchors the element, plus a longer cast that grows with elevation.
     Uniform glow spreading in all directions was the strongest tell that
     this page was generated rather than designed. */
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 1px 2px rgba(10, 37, 64, 0.06), 0 4px 8px -3px rgba(10, 37, 64, 0.10);
  --shadow-lg: 0 1px 2px rgba(10, 37, 64, 0.06), 0 10px 20px -8px rgba(10, 37, 64, 0.16);
  --shadow-xl: 0 2px 4px rgba(10, 37, 64, 0.06), 0 18px 34px -12px rgba(10, 37, 64, 0.22);
  --shadow-2xl: 0 2px 4px rgba(10, 37, 64, 0.06), 0 30px 58px -18px rgba(10, 37, 64, 0.30);
  --shadow-card: 0 1px 2px rgba(10, 37, 64, 0.05), 0 6px 14px -6px rgba(10, 37, 64, 0.12);
  --shadow-card-hover: 0 2px 4px rgba(10, 37, 64, 0.06), 0 16px 30px -10px rgba(10, 37, 64, 0.20);

  /* Border Radius */
  /* Measured off stripe.com: 4px accounts for 70 of its radii and 6px for
     44 — nothing on that page is "bended". Every scale step here resolves
     to the same 4px so the whole interface shares one edge treatment.
     --radius-full survives only for things that are genuinely circular:
     status dots and avatars. */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-2xl: 4px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  /* Was a bounce curve. Real objects decelerate, they do not overshoot. */
  --transition-spring: 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  color: var(--gray-800);
  background-color: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

/* --- Utility Classes --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.section-padding {
  padding: var(--space-3xl) 0;
}

.section-title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--gray-500);
  max-width: 600px;
  line-height: 1.7;
}

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

.text-center .section-subtitle {
  margin: 0 auto;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.8rem 1.8rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue-600);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background: var(--blue-700);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--white);
  color: var(--blue-900);
  border: 1.5px solid var(--gray-200);
}

.btn-secondary:hover {
  border-color: var(--blue-400);
  color: var(--blue-600);
  box-shadow: var(--shadow-md);
}

.btn-emergency {
  background: var(--emergency);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.btn-emergency:hover {
  background: #b91c1c;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
  transform: translateY(-1px);
}

.btn-maroon {
  background: var(--maroon-600);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(139, 26, 43, 0.3);
}

.btn-maroon:hover {
  background: var(--maroon-700);
  box-shadow: 0 4px 16px rgba(139, 26, 43, 0.4);
  transform: translateY(-1px);
}

/* Buttons are flex containers, so an icon with no flex-basis protection is
   free to shrink to nothing when the label is long and the width is fixed —
   which is exactly what happened to the emergency icon once the paired
   buttons were forced to equal widths. */
.btn svg,
.floating-btn svg {
  flex: none;
}

.btn-lg {
  padding: 1rem 1.8rem;
  font-size: var(--text-base);
  border-radius: var(--radius-xl);
}

.btn-whatsapp {
  background: #0f7a6e;
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn-whatsapp:hover {
  background: #0c655b;
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
  color: var(--white);
}

/* ============================================
   NAVIGATION
   ============================================ */
.top-bar {
  background: var(--blue-900);
  padding: 0.5rem 0;
  font-size: var(--text-xs);
  color: var(--blue-200);
}

.top-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.top-bar-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-bar-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.emergency-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #fca5a5;
  padding: 3px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-xs);
}

.emergency-badge .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Main Navigation */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow var(--transition-base);
}

.navbar.scrolled {
  box-shadow: var(--shadow-lg);
}

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

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.logo-icon {
  width: 44px;
  height: 44px;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-name {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--blue-900);
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.logo-tagline {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--maroon-600);
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-links a {
  padding: 0.5rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-600);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--blue-600);
  background: var(--blue-50);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blue-900);
}

.nav-phone svg {
  width: 16px;
  height: 16px;
  color: var(--blue-600);
}

/* Mobile Menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--blue-900);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 9999;
  padding: var(--space-xl);
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.mobile-menu.active {
  display: flex;
  opacity: 1;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3xl);
}

.mobile-menu-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--gray-50);
  font-size: var(--text-xl);
  color: var(--gray-600);
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mobile-menu-links a {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--gray-700);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.mobile-menu-links a:hover {
  background: var(--blue-50);
  color: var(--blue-600);
}

.mobile-menu-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--gray-100);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  background: var(--white);
  padding: var(--space-xl) 0 var(--space-2xl);
}

/* Colour as a wash BEHIND the content, never a scrim laid over a photograph.
   The old hero put a blue gradient on top of the building shot, which is
   what you do when you do not trust the photo. We trust the photo. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(880px 520px at 82% -14%, rgba(20, 93, 160, 0.12), transparent 62%),
    radial-gradient(640px 420px at -6% 106%, rgba(139, 26, 43, 0.06), transparent 60%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--space-4xl);
  align-items: center;
  /* Vertical only. `.hero-content` is also a `.container`, and a padding
     shorthand here silently wiped the container's horizontal gutters — which
     went unnoticed on wide desktops, where the 1200px max-width leaves margin
     either side, but ran the headline flush to the screen edge on tablets. */
  padding-top: var(--space-md);
  padding-bottom: var(--space-xl);
}

.hero-text {
  max-width: 640px;
  min-width: 0;
}

/* A small bold data point rather than a tracked uppercase kicker. Stripe
   runs a live GDP figure here; ours is the strongest trust signal the
   hospital owns, moved to the top of the page instead of buried. */
.hero-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-lg);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--maroon-600);
}

.hero-metric-rule {
  width: 26px;
  height: 2px;
  background: var(--maroon-600);
  flex: none;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 3.85vw, 3.25rem);
  font-weight: 700;
  color: var(--blue-900);
  /* Tight leading and negative tracking are what read as confidence. The
     old hero was merely large. */
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: 545px;
  margin-bottom: var(--space-lg);
}

.hero h1 .highlight {
  display: block;
  color: #3d6fa3;
}

.hero-description {
  font-size: 1.3rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin-bottom: var(--space-xl);
  max-width: 534px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.btn-chev {
  font-weight: 400;
  opacity: 0.85;
}

.hero-visual {
  position: relative;
  min-width: 0;
}

.hero-image-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-2xl);
}

.hero-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image-card.large {
  aspect-ratio: 4 / 3;
}

/* Floating cards sit nearer the viewer, so they take a shorter, sharper
   shadow than the photograph behind them. Elevation only — pairing a
   hairline border with a wide blur is a documented generated-UI signature. */
.hero-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 15px 10px 10px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  color: var(--blue-900);
  z-index: 3;
}

.hero-float b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.hero-float-doctor span {
  display: block;
  margin-top: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-500);
}

.hero-float-doctor {
  right: -16px;
  top: 30px;
}

.hero-float-doctor img {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-md);
  object-fit: cover;
  object-position: top center;
}

.hero-float-wa {
  left: -22px;
  bottom: 22px;
  padding: 11px 18px 11px 11px;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.hero-float-wa:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2xl);
}

.hero-float-wa-icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-md);
  background: #0f7a6e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-float-wa-icon svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  display: block;
}

/* Trust Stats Bar */
.trust-stats {
  position: relative;
  z-index: 3;
  margin-top: 0;
}

.trust-stats-inner {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  padding: var(--space-xl) var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.trust-stat {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
}

.trust-stat-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-stat-icon.blue {
  color: var(--blue-600);
}

.trust-stat-icon.maroon {
  color: var(--maroon-600);
}

.trust-stat-icon.green {
  color: var(--success);
}

.trust-stat-icon.amber {
  color: var(--warning);
}

.trust-stat-icon svg {
  width: 24px;
  height: 24px;
}

.trust-stat-content .trust-stat-value {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--blue-900);
  line-height: 1.2;
}

.trust-stat-content p {
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 2px;
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about {
  background: var(--gray-50);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

.about-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.about-img {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.about-img:first-child {
  grid-column: span 2;
}

.about-img:first-child img {
  height: 300px;
}

.about-text p {
  color: var(--gray-600);
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}

.about-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.about-highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
}

/* The filled rounded-square icon tile above a heading is the universal
   AI feature-card template. The icon stays; its container goes. */
.about-highlight-icon {
  width: 22px;
  height: 22px;
  background: none;
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-highlight-icon svg {
  width: 18px;
  height: 18px;
}

.about-highlight h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blue-900);
  margin-bottom: 2px;
}

.about-highlight p {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-bottom: 0;
  line-height: 1.5;
}

/* ============================================
   SERVICES SECTION
   ============================================ */
.services {
  background: var(--white);
}

/* Five panels, one per row, all the same width and the same treatment.
   Previously three of them spanned two columns and two did not, only one
   carried the tinted gradient, and only one showed its accent bar — which
   is what made the section read as five unrelated blocks. */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.service-group {
  display: grid;
  grid-template-columns: minmax(220px, 310px) 1fr;
  column-gap: var(--space-3xl);
  row-gap: var(--space-lg);
  align-items: start;
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  /* the tinted wash the primary card had, now on every panel */
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--white) 62%);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

/* identity column left, content column right — same on all five */
.service-group-header { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
.service-group-description { grid-column: 2; grid-row: 1; }
.service-list { grid-column: 2; grid-row: 2; }
.primary-service-content { grid-column: 2; grid-row: 1 / span 2; }

.service-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 1;
}

.service-group:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}

.service-group:hover::before {
  opacity: 1;
}

.service-group.primary::before {
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  opacity: 1;
}

.service-group.primary { border-color: var(--blue-100); }

.service-group.surgical {
  background: linear-gradient(135deg, var(--maroon-50) 0%, var(--white) 62%);
  border-color: var(--maroon-100);
}

.service-group.digestive {
  background: linear-gradient(135deg, #ecfdf5 0%, var(--white) 62%);
  border-color: #c9efdd;
}

.service-group.proctology {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--white) 62%);
  border-color: var(--blue-100);
}

.service-group.emergency {
  background: linear-gradient(135deg, #fef2f2 0%, var(--white) 62%);
  border-color: #f6d5d5;
}

.service-group.surgical::before {
  background: linear-gradient(90deg, var(--maroon-600), var(--maroon-400));
}

.service-group.proctology::before {
  background: linear-gradient(90deg, var(--blue-700), var(--blue-400));
}

.service-group.digestive::before {
  background: linear-gradient(90deg, var(--success), #34d399);
}

.service-group.emergency::before {
  background: linear-gradient(90deg, var(--emergency), #f87171);
}

.service-group-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.service-group-icon {
  margin-top: 2px;
  width: 34px;
  height: 34px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-group.primary .service-group-icon {
  color: var(--blue-600);
}

.service-group.surgical .service-group-icon {
  color: var(--maroon-600);
}

.service-group.digestive .service-group-icon {
  color: var(--success);
}

.service-group.proctology .service-group-icon {
  color: var(--blue-700);
}

.service-group.emergency .service-group-icon {
  color: var(--emergency);
}

.service-group-icon svg {
  width: 30px;
  height: 30px;
}

.service-group-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--blue-900);
}

.service-group-subtitle {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-top: 2px;
}

.service-group-description {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: 1.7;
  /* The panel is a grid now; its row-gap owns the spacing below this. A
     margin here stacked on top of the gap and left a hole above the tags. */
  margin-bottom: 0;
}

.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.service-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-700);
  transition: all var(--transition-fast);
}

.service-tag:hover {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
}

.service-tag svg {
  width: 14px;
  height: 14px;
  color: var(--blue-500);
}

.service-group.primary .service-tag {
  background: var(--white);
  border-color: var(--blue-100);
}

/* Primary service featured layout */
.primary-service-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.primary-service-features {
  display: grid;
  gap: var(--space-md);
}

.primary-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.primary-feature-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.primary-feature-check svg {
  width: 14px;
  height: 14px;
}

.primary-feature h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blue-900);
  margin-bottom: 2px;
}

.primary-feature p {
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: 1.5;
}

/* ============================================
   DOCTORS SECTION
   ============================================ */
.doctors {
  background: var(--gray-50);
}

.doctors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  max-width: 980px;
  margin: var(--space-3xl) auto 0;
}

.doctor-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
  border: 1px solid var(--gray-100);
}

.doctor-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.doctor-card {
  display: grid;
  grid-template-columns: 400px 1fr;
  align-items: center;
}

.doctor-photo {
  position: relative;
  overflow: hidden;
  align-self: stretch;
  background: var(--gray-50);
}

.doctor-photo img {
  width: 100%;
  height: 100%;
  /* `contain` letterboxed the portrait photo against the card background.
     `cover` fills the column; the crop is ~10% off the width, and the
     position keeps his head clear of the top edge. */
  object-fit: cover;
  object-position: center 22%;
}

.doctor-info {
  padding: var(--space-2xl);
  /* Was `margin-top: -40px`, a leftover from a stacked card where the text
     block was meant to ride up over the photo below it. In the current
     side-by-side layout it simply hauled the column 40px above the card,
     cancelling the top padding and pushing the surgeon's name out of frame. */
  position: relative;
  z-index: 2;
}

.doctor-name {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--space-xs);
}

.doctor-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--maroon-600);
  margin-bottom: var(--space-lg);
}

.doctor-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.doctor-specialty-tag {
  padding: 4px 12px;
  background: var(--blue-50);
  color: var(--blue-700);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
}

.doctor-philosophy {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: 1.7;
  font-style: italic;
  padding-left: var(--space-md);
}

.doctor-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* ============================================
   WHY PATIENTS CHOOSE US
   ============================================ */
.why-us {
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.why-us::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: var(--blue-50);
  opacity: 0.4;
}

.why-us-grid {
  display: grid;
  /* Two columns, not three: these are sentences, not labels, and a wider
     measure reads better than three cramped columns. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-4xl);
  margin-top: var(--space-2xl);
  position: relative;
  z-index: 2;
}

/* Six identical bordered boxes with an icon on top is the stock feature
   grid — it is what made this section feel inert. These are findings drawn
   from patient reviews, so they are set as a numbered list: a hairline rule
   per row, a large index numeral, and nothing boxed at all. */
.why-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  /* Baseline, not start: the numeral and the heading have different line
     heights, so aligning their boxes left the numeral floating above the
     title. Baseline alignment sits them on the same line. */
  align-items: baseline;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--gray-100);
  background: none;
}

/* The first row in each column has no rule above it. */
.why-us-grid > .why-card:nth-child(1),
.why-us-grid > .why-card:nth-child(2) {
  border-top: none;
  padding-top: 0;
}

.why-card-num {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--maroon-600);
  opacity: 0.32;
  font-variant-numeric: tabular-nums;
  min-width: 2.1ch;
}

.why-card:hover .why-card-num {
  opacity: 0.85;
}

.why-card-num,
.why-card-body h3 {
  transition: opacity var(--transition-base), color var(--transition-base);
}

.why-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--blue-900);
  margin-bottom: var(--space-sm);
}

.why-card p {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: 1.7;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 100%);
  position: relative;
  overflow: hidden;
}

.testimonials::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.03) 1px, transparent 0);
  background-size: 40px 40px;
}

.testimonials .section-title {
  color: var(--white);
}

.testimonials .section-subtitle {
  color: var(--blue-300);
}

.google-rating-banner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-xl) var(--space-2xl);
  margin-bottom: var(--space-3xl);
  position: relative;
  z-index: 2;
}

.google-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.google-rating-info h3 {
  color: var(--white);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.google-stars {
  display: flex;
  gap: 3px;
  margin: 4px 0;
}

.google-stars svg {
  width: 20px;
  height: 20px;
  fill: #fbbf24;
}

.google-rating-info p {
  font-size: var(--text-sm);
  color: var(--blue-300);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  position: relative;
  z-index: 2;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl);
  transition: all var(--transition-base);
}

.testimonial-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
}

.testimonial-stars svg {
  width: 16px;
  height: 16px;
  fill: #fbbf24;
}

.testimonial-text {
  font-size: var(--text-sm);
  color: var(--blue-100);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--blue-200);
}

.testimonial-author-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
}

.testimonial-author-via {
  font-size: var(--text-xs);
  color: var(--blue-400);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================
   FACILITIES SECTION
   ============================================ */
.facilities {
  background: var(--gray-50);
}

.facilities-grid {
  display: grid;
  /* Two up rather than three: with four cards a three-column grid strands
     one on a row by itself, and these photographs earn the extra width. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-3xl);
}

.facility-card {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.facility-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.facility-image {
  height: 220px;
  overflow: hidden;
}

.facility-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.facility-card:hover .facility-image img {
  transform: scale(1.03);
}

.facility-info {
  padding: var(--space-xl);
}

.facility-info h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--blue-900);
  margin-bottom: var(--space-sm);
}

.facility-info p {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: 1.6;
}

/* ============================================
   APPOINTMENT / CTA SECTION
   ============================================ */
.appointment-cta {
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.cta-card {
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-4xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
}

.cta-text {
  position: relative;
  z-index: 2;
}

.cta-text h2 {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}

.cta-text p {
  font-size: var(--text-lg);
  color: var(--blue-200);
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
}

.cta-actions {
  /* Two actions of different label lengths were rendering at two different
     widths, which reads as careless. A fixed two-track grid makes them
     identical regardless of wording. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  max-width: 460px;
}

.cta-actions .btn {
  width: 100%;
}

.cta-form {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  position: relative;
  z-index: 2;
}

.cta-form h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--space-xs);
}

.cta-form .form-subtitle {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-xl);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--gray-800);
  transition: all var(--transition-fast);
  background: var(--gray-50);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue-400);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(20, 93, 160, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-submit {
  width: 100%;
  margin-top: var(--space-md);
}

/* ============================================
   CONTACT & LOCATION
   ============================================ */
.contact {
  background: var(--gray-50);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  margin-top: var(--space-3xl);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  transition: all var(--transition-base);
}

.contact-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--blue-100);
}

.contact-card-icon {
  width: 24px;
  height: 24px;
  background: none;
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card-icon svg {
  width: 22px;
  height: 22px;
}

.contact-card h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--blue-900);
  margin-bottom: 4px;
}

.contact-card p {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: 1.6;
}

.contact-card a {
  color: var(--blue-600);
  font-weight: 500;
}

.contact-card a:hover {
  color: var(--blue-700);
}

.contact-map {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-md);
  height: 100%;
  min-height: 400px;
}

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

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--blue-900);
  color: var(--blue-200);
  padding: var(--space-4xl) 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand .logo-name {
  color: var(--white);
  font-size: var(--text-xl);
}

.footer-brand .logo-tagline {
  color: var(--blue-300);
}

.footer-brand p {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--blue-300);
  max-width: 320px;
}

.footer-col h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  margin-bottom: var(--space-lg);
}

.footer-col a {
  display: block;
  font-size: var(--text-sm);
  color: var(--blue-300);
  padding: 5px 0;
  transition: color var(--transition-fast);
}

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

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl) 0;
  font-size: var(--text-xs);
  color: var(--blue-400);
}

/* ============================================
   FLOATING ELEMENTS
   ============================================ */
.floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* stretch, so "Emergency" and "WhatsApp" share one width */
  align-items: stretch;
}

.floating-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-2xl);
  transition: all var(--transition-base);
}

.floating-btn:hover {
  transform: translateY(-2px);
}

.floating-btn.call {
  background: var(--blue-600);
  color: var(--white);
}

.floating-btn.whatsapp {
  background: #0f7a6e;
  color: var(--white);
}

.floating-btn.whatsapp:hover {
  background: #0c655b;
}

/* WhatsApp booking card */
.whatsapp-card {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
}

.whatsapp-card .whatsapp-icon {
  width: 56px;
  height: 56px;
  color: #25d366;
  margin: 0 auto var(--space-lg);
  display: block;
}

.whatsapp-card h3 {
  margin-bottom: var(--space-sm);
}

.whatsapp-card .form-subtitle {
  margin-bottom: var(--space-xl);
}

.whatsapp-card .btn-whatsapp {
  width: 100%;
}

.whatsapp-number {
  margin-top: var(--space-lg);
  font-weight: 700;
  color: var(--blue-900);
  font-size: var(--text-sm);
}

.whatsapp-alt {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.whatsapp-alt a {
  color: var(--blue-600);
  font-weight: 600;
}

.floating-btn.whatsapp {
  background: #0f7a6e;
  color: var(--white);
}

.floating-btn.emergency {
  background: var(--emergency);
  color: var(--white);
}

.floating-btn svg {
  width: 20px;
  height: 20px;
}

.floating-btn .btn-label {
  display: block;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1199px) {
  .nav-links,
  .nav-actions .btn {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .service-group {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }

  .service-group-header,
  .service-group-description,
  .service-list,
  .primary-service-content {
    grid-column: 1;
    grid-row: auto;
  }

  .primary-service-content {
    grid-template-columns: 1fr;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* This used to be `display: none`, which hid the hospital photograph from
     every phone and tablet — i.e. from almost all of this site's traffic.
     The building shot is the strongest trust signal on the page: it is the
     thing that tells a patient this is a real place they can walk into.
     It now stacks under the text instead.

     The floating cards do come off on small screens — at 375px they would
     cover most of the photo, and both jobs are already done elsewhere on
     mobile: the surgeon has his own section, and WhatsApp booking sits in
     the floating action button. */
  .hero-visual {
    display: block;
    margin-top: var(--space-md);
  }

  .hero-float {
    display: none;
  }

  .hero {
    min-height: 75vh;
  }

  .trust-stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

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

  .service-group.primary {
    grid-column: span 1;
  }

  .primary-service-content {
    grid-template-columns: 1fr;
  }

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

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

  .doctor-photo {
    max-height: 480px;
  }

  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  :root {
    --text-4xl: 1.875rem;
    --text-5xl: 2.25rem;
    --text-6xl: 2.5rem;
  }

  .section-padding {
    padding: var(--space-3xl) 0;
  }

  .container {
    padding: 0 var(--space-lg);
  }

  .top-bar {
    display: none;
  }

  .nav-links,
  .nav-actions .btn {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .trust-stats {
    margin-top: -32px;
  }

  .trust-stats-inner {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-lg);
    gap: var(--space-md);
  }

  .trust-stat {
    padding: var(--space-sm);
  }

  .trust-stat-icon {
    width: 40px;
    height: 40px;
  }

  .trust-stat-content .trust-stat-value {
    font-size: var(--text-base);
  }

  .about-images {
    grid-template-columns: 1fr;
  }

  .about-img:first-child {
    grid-column: span 1;
  }

  .about-highlights {
    grid-template-columns: 1fr;
  }

  .why-us-grid {
    grid-template-columns: 1fr;
  }

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

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

  .cta-card {
    padding: var(--space-2xl);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .google-rating-banner {
    flex-direction: column;
    text-align: center;
  }

  .google-stars {
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .floating-btn .btn-label {
    display: none;
  }

  .floating-btn {
    padding: 14px;
    border-radius: 50%;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .trust-stats-inner {
    grid-template-columns: 1fr;
  }

  .service-list {
    flex-direction: column;
  }
  
  .hero {
    min-height: 85vh;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .logo-name {
    font-size: 0.82rem;
  }

  .logo-tagline {
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
  }
}

/* Instagram link in the footer. Underlined-on-hover only; it is a link in
   a list of links, not another button competing for attention. */
.footer-col a.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-md);
  font-weight: 600;
  color: var(--white);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* The doctor's own account of why the hospital exists — plain body copy,
   set apart from the pull-quote that follows it. */
.doctor-bio {
  color: var(--gray-600);
  margin-bottom: var(--space-md);
}

/* --- Scroll animations --- */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   VISUAL REFINEMENT LAYER
   Restrained polish — depth, rhythm and motion.
   Kept deliberately quiet: this is a hospital,
   not a product launch page.
   ============================================ */

/* --- 1. Motion curve -----------------------------------------
   A single easing used everywhere so interactions feel related.
   Slight overshoot on the way in reads as "considered". */
:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Warmer, deeper elevation than a flat drop shadow */
  --shadow-lift:
    0 1px 2px rgba(10, 37, 64, 0.04),
    0 8px 16px -6px rgba(10, 37, 64, 0.08),
    0 20px 40px -12px rgba(10, 37, 64, 0.10);
  --shadow-lift-hover:
    0 2px 4px rgba(10, 37, 64, 0.05),
    0 14px 24px -8px rgba(10, 37, 64, 0.11),
    0 32px 56px -16px rgba(10, 37, 64, 0.16);
}

/* --- 2. Section surfaces -------------------------------------
   Replaces flat grey slabs with a barely-perceptible vertical
   wash, so consecutive sections read as distinct surfaces
   rather than alternating blocks of colour. */
.about,
.doctors,
.facilities,
.contact {
  background: linear-gradient(180deg, #fcfdfe 0%, var(--gray-50) 50%, #fcfdfe 100%);
  position: relative;
}

/* Hairline seam at the top of each section — fades at the edges
   so it never reads as a hard rule across the page. */
.about::before,
.doctors::before,
.facilities::before,
.contact::before,
.services::before,
.appointment-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--gray-200) 18%,
    var(--gray-200) 82%,
    transparent);
  pointer-events: none;
}

.services,
.appointment-cta {
  position: relative;
}

/* --- 3. Section headings -------------------------------------
   Tighter tracking on large type, and a gradient accent rule
   on the eyebrow label instead of a flat dash. */
.section-title {
  letter-spacing: -0.022em;
}

.testimonials /* --- 4. Reveal on scroll -------------------------------------
   Driven by a keyframe animation, not a transition. Most cards
   are also reveal targets, and a shared `transition` would have
   the reveal and the hover fighting over transform — the hover
   would inherit the reveal's 0.7s timing and its stagger delay,
   making cards feel laggy to the touch. An animation keeps the
   two completely separate. */
.fade-in-up {
  transition: none;
}

.fade-in-up.visible {
  animation: revealUp 0.7s var(--ease-out) both;
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger: children of a grid arrive in sequence. 80ms apart is
   enough to read as deliberate, short enough that nobody waits. */
.services-grid > .fade-in-up.visible:nth-child(2),
.why-us-grid > .fade-in-up.visible:nth-child(2),
.testimonials-grid > .fade-in-up.visible:nth-child(2),
.facilities-grid > .fade-in-up.visible:nth-child(2),
.doctors-grid > .fade-in-up.visible:nth-child(2) { animation-delay: 0.08s; }

.services-grid > .fade-in-up.visible:nth-child(3),
.why-us-grid > .fade-in-up.visible:nth-child(3),
.testimonials-grid > .fade-in-up.visible:nth-child(3),
.facilities-grid > .fade-in-up.visible:nth-child(3) { animation-delay: 0.16s; }

.why-us-grid > .fade-in-up.visible:nth-child(4),
.facilities-grid > .fade-in-up.visible:nth-child(4) { animation-delay: 0.24s; }
.why-us-grid > .fade-in-up.visible:nth-child(5) { animation-delay: 0.32s; }
.why-us-grid > .fade-in-up.visible:nth-child(6) { animation-delay: 0.40s; }

/* --- 5. Card interaction -------------------------------------
   One consistent lift across every card type. Border warms
   toward the brand blue rather than simply disappearing.
   Declared after the reveal rules so hover timing always wins. */
.service-group,
.why-card,
.facility-card,
.doctor-card,
.contact-card {
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

.service-group:hover,
.why-card:hover,
.facility-card:hover,
.doctor-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift-hover);
  border-color: var(--blue-200);
}

/* --- 5. Photography ------------------------------------------
   A slow, subtle scale on hover. Images sit behind a hairline
   inner ring so they feel inset rather than pasted on. */
.facility-image,
.about-img {
  overflow: hidden;
  position: relative;
}

.facility-image img,
.about-img img {
  transition: transform 0.7s var(--ease-soft);
  display: block;
  width: 100%;
}

/* Removed: scaling an image on hover is a recurring generated-UI
   signature. The cards still lift; the photographs stay still. */

.about-img,
.facility-image {
  box-shadow: inset 0 0 0 1px rgba(10, 37, 64, 0.06);
}

/* --- 6b. Mobile overflow fix ---------------------------------
   A grid track sized `1fr` still refuses to shrink below its
   content's min-content width. The doctor photo was therefore
   forcing the card ~100px past the viewport on phones, giving
   the whole page a horizontal scrollbar. `min-width: 0` lets the
   track shrink; `max-width: 100%` keeps the image inside it. */
.doctors-grid > *,
.doctor-card > *,
.about-grid > *,
.contact-grid > *,
.cta-card > *,
.services-grid > *,
.why-us-grid > *,
.facilities-grid > *,
.testimonials-grid > *,
.hero-content > *,
.trust-stats-inner > *,
.footer-grid > * {
  min-width: 0;
}

/* The `white-space: nowrap` that keeps the navbar lockup on one
   line must not follow the wordmark into the footer or the mobile
   menu — at 375px "Sharada Laparoscopy Hospital" is wider than the
   screen and pushed the whole page sideways. */
.footer-brand .logo-name,
.footer-brand .logo-tagline,
.mobile-menu .logo-name,
.mobile-menu .logo-tagline {
  white-space: normal;
}

@media (max-width: 520px) {
  .logo-name,
  .logo-tagline {
    white-space: normal;
  }
}

.doctor-photo img,
.facility-image img,
.about-img img {
  max-width: 100%;
}

/* --- 7. Trust bar --------------------------------------------
   Hairline dividers between the four stats, and a gentle lift
   on the icon so the bar feels alive without being busy.
   Dividers only apply to the 4-across layout — once the bar
   wraps to two columns the first item of row two would get a
   stray border on its left. */
@media (min-width: 1025px) {
  .trust-stat + .trust-stat {
    border-left: 1px solid var(--gray-100);
  }
}

.trust-stat-icon {
  transition: transform 0.35s var(--ease-out);
}

.trust-stat:hover .trust-stat-icon {
  transform: translateY(-2px) scale(1.06);
}

.trust-stats-inner {
  box-shadow: var(--shadow-lift);
}

/* --- 8. Buttons ----------------------------------------------
   Slightly deeper rest state, a lift on hover, and a real
   pressed state so taps feel physical on mobile. */
.btn {
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    background-color 0.25s var(--ease-out);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn:active {
  transform: translateY(0) scale(0.985);
}

/* --- 9. Keyboard focus ---------------------------------------
   Visible focus for keyboard users only — required for
   accessibility and absent until now. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- 10. Service tags ----------------------------------------
   Tags shift toward brand blue on hover of the parent card,
   tying the card together as one object. */
.service-tag {
  transition:
    background-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}

.service-group:hover .service-tag {
  transform: translateX(2px);
}

/* --- 10a. Handover to GSAP -----------------------------------
   Two systems must never both own the reveal. Once GSAP has
   initialised it adds `.gsap-ready` to <html> and takes over
   completely, driving opacity through inline styles.

   The CSS keyframe animation has to stand down here, because a
   running CSS animation outranks inline styles: if it ever failed
   to progress it would pin every element at opacity 0 and no
   amount of inline `opacity: 1` — including the JS safety net —
   could bring the content back.

   The default state under `.gsap-ready` is therefore *visible*.
   GSAP hides elements itself, so clearing its inline styles always
   reveals the page rather than hiding it. Failure falls open. */
.gsap-ready .fade-in-up,
.gsap-ready .fade-in-up.visible {
  animation: none !important;
  opacity: 1;
  transform: none;
}

/* --- 10b. Hero background field ------------------------------
   The Three.js canvas sits above the hero photograph but below all
   text and buttons, and never intercepts a tap. */
/* Geometry only. Opacity and the fade-in are owned entirely by
   hero-field.js — a CSS keyframe that fails to run would leave the canvas
   pinned at opacity 0 and the effect invisible with no way to recover,
   which is exactly what happened. One owner, and it is the script that
   creates the element. */
.hero-field {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 20%, rgba(0,0,0,0.45) 45%, #000 70%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 20%, rgba(0,0,0,0.45) 45%, #000 70%);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* `.hero-pattern` must keep the `position: absolute` from its base rule.
   `.hero` is a flex container, so the moment this overlay becomes
   statically positioned it turns into a flex item, claims its 50% width
   in the row, and shoves the entire hero content sideways. Raise its
   stacking order only — never touch its position. */
.hero-pattern {
  z-index: 1;
}

/* --- 11. Respect motion preferences --------------------------
   Anyone who has asked their device to reduce motion gets a
   static page. Non-negotiable for a medical site. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
  }

  .facility-card:hover .facility-image img,
  .about-img:hover img,
  .service-group:hover,
  .why-card:hover,
  .facility-card:hover,
  .doctor-card:hover {
    transform: none !important;
  }
}