/* ============================================================
   RAPTI HOSPITAL — UNIFIED DESIGN SYSTEM v2
   Consolidated · Deduplicated · Mobile-first · No JS
   ============================================================ */

/* -------------------- 1. RESET -------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}
body { min-height: 100vh; line-height: 1.6; font-synthesis: none; }
img, picture, svg, video { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; background: none; border: 0; font: inherit; color: inherit; }
input, textarea, select { width: 100%; font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
:where(h1,h2,h3,h4,h5,h6) { line-height: 1.25; text-wrap: balance; }
p { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* -------------------- 2. DESIGN TOKENS -------------------- */
:root {
  --color-primary-700: #0B5FCC;
  --color-primary-600: #1A73E8;
  --color-primary-500: #4285F4;
  --color-primary-100: #E8F0FE;
  --color-primary-50:  #F4F8FE;

  --color-white:   #FFFFFF;
  --color-gray-50:  #F8F9FA;
  --color-gray-100: #F1F3F4;
  --color-gray-300: #DADCE0;
  --color-gray-500: #5F6368;
  --color-gray-700: #3C4043;
  --color-gray-900: #202124;

  --color-success:    #1E8E3E;
  --color-success-bg: #E6F4EA;
  --color-error:       #D93025;
  --color-error-bg:    #FCE8E6;
  --color-warning:     #F9AB00;
  --color-warning-bg:  #FEF7E0;
  --color-info:        #1A73E8;
  --color-info-bg:     #E8F0FE;

  --font-base: "Inter", "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-devanagari: "Noto Sans Devanagari", var(--font-base);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --radius-circle: 50%;

  --shadow-1: 0 1px 2px rgba(60,64,67,0.08), 0 1px 3px rgba(60,64,67,0.10);
  --shadow-2: 0 2px 6px rgba(60,64,67,0.12);
  --shadow-3: 0 4px 12px rgba(60,64,67,0.16);
  --shadow-4: 0 1px 4px rgba(60,64,67,0.10);

  --container-max: 1200px;
  --header-height: 72px;
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* Fluid type scale */
  --fs-h1: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
}

/* -------------------- 3. TYPOGRAPHY -------------------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  color: var(--color-gray-700);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: 700; color: var(--color-gray-900); }
h2, .h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--color-gray-900); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--color-gray-900); }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; color: var(--color-gray-900); }

p { font-size: var(--fs-body); line-height: 1.6; color: var(--color-gray-700); }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: var(--fs-sm); color: var(--color-gray-500); }
.text-xs { font-size: var(--fs-xs); color: var(--color-gray-500); }
.overline {
  display: block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-primary-600); margin-bottom: var(--space-2);
}
strong { font-weight: 600; }
a.link { color: var(--color-primary-600); font-weight: 500; }
a.link:hover, a.link:focus-visible { text-decoration: underline; }
[lang="hi"] { font-family: var(--font-devanagari); }

/* -------------------- 4. LAYOUT -------------------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); }
@media (min-width: 905px) { .container { padding-inline: var(--space-8); } }

main { display: block; }
.section { padding-block: var(--space-12); }
@media (min-width: 905px) { .section { padding-block: var(--space-16); } }
.section-alt { background-color: var(--color-gray-50); }

.grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 905px) { .grid-3, .grid-4 { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
.grid-3 { --cols: 3; }
.grid-4 { --cols: 4; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* -------------------- 5. SPACING & UTILITIES -------------------- */
.m-0 { margin: 0; }
.mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)} .mt-12{margin-top:var(--space-12)}
.mb-2{margin-bottom:var(--space-2)} .mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)} .mb-8{margin-bottom:var(--space-8)}
.p-0{padding:0} .p-4{padding:var(--space-4)} .p-6{padding:var(--space-6)} .p-8{padding:var(--space-8)}
.text-center { text-align: center; }
.text-right  { text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.hide-mobile { display: none; }
@media (min-width: 905px) { .hide-mobile { display: initial; } .hide-desktop { display: none; } }

/* -------------------- 6. ACCESSIBILITY -------------------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--color-primary-600); color: var(--color-white);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
.category-radio:focus-visible + .category-label {
  outline: 2px solid var(--color-primary-600); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* -------------------- 7. ICONS -------------------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap;
  direction: ltr; vertical-align: middle;
}
.icon-sm { font-size: 20px; }
.icon-lg { font-size: 32px; }

/* -------------------- 8. HEADER -------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-white); box-shadow: var(--shadow-4); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: var(--space-4); }

.logo-link { display: flex; align-items: center; gap: var(--space-3); }
.logo-img  { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.logo-text { display: flex; flex-direction: column; }
.logo-title { font-size: 1.125rem; font-weight: 700; color: var(--color-gray-900); }
.logo-subtitle { font-size: var(--fs-xs); color: var(--color-gray-500); }

.nav-toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: var(--space-2); border-radius: var(--radius-sm);
}
.nav-toggle-checkbox:focus-visible + .nav-toggle-label { outline: 2px solid var(--color-primary-600); outline-offset: 2px; }
.nav-toggle-bar { display: block; width: 100%; height: 2px; background: var(--color-gray-900); border-radius: 2px; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.nav-toggle-checkbox:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-checkbox:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle-checkbox:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle-checkbox:checked ~ .primary-nav { display: flex; }

.primary-nav {
  position: absolute; top: var(--header-height); left: 0; right: 0;
  background: var(--color-white); border-top: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-2); display: none; flex-direction: column;
  padding: var(--space-4) var(--space-6); max-height: calc(100vh - var(--header-height)); overflow-y: auto;
}
.nav-list { display: flex; flex-direction: column; gap: var(--space-2); }
.nav-link { display: block; padding: var(--space-3) var(--space-2); font-weight: 500; color: var(--color-gray-700); border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); }
.nav-link:hover, .nav-link:focus-visible { background: var(--color-primary-50); color: var(--color-primary-600); }
.nav-link.is-active { color: var(--color-primary-600); font-weight: 600; }
.nav-cta { margin-top: var(--space-4); text-align: center; }

@media (min-width: 905px) {
  .nav-toggle-label { display: none; }
  .primary-nav { position: static; display: flex; flex-direction: row; align-items: center; border-top: 0; box-shadow: none; padding: 0; gap: var(--space-6); max-height: none; overflow: visible; }
  .nav-list { flex-direction: row; gap: var(--space-1); flex-wrap: wrap; }
  .nav-cta { margin-top: 0; }
}

.emergency-strip { background: var(--color-primary-700); }
.emergency-strip-inner { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding-block: var(--space-2); font-size: 0.8125rem; color: var(--color-white); flex-wrap: wrap; text-align: center; }
.emergency-number { font-weight: 700; color: var(--color-white); }
.emergency-number:hover, .emergency-number:focus-visible { text-decoration: underline; }

/* -------------------- 9. BREADCRUMB -------------------- */
.breadcrumb-wrapper { background: var(--color-gray-50); border-bottom: 1px solid var(--color-gray-100); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-3); font-size: var(--fs-sm); color: var(--color-gray-500); }
.breadcrumb a { color: var(--color-gray-500); }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--color-primary-600); }
.breadcrumb-current { color: var(--color-gray-900); font-weight: 600; }
.breadcrumb-sep { color: var(--color-gray-300); }

/* -------------------- 10. BUTTONS -------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding-inline: var(--space-6);
  font-size: 0.9375rem; font-weight: 600; font-family: var(--font-base);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn-sm { min-height: 36px; padding-inline: var(--space-4); font-size: var(--fs-sm); }
.btn-primary { background: var(--color-primary-600); color: var(--color-white); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-primary-700); }
.btn-secondary { background: var(--color-white); color: var(--color-primary-600); border-color: var(--color-primary-600); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--color-primary-100); }
.btn-text { background: transparent; color: var(--color-primary-600); min-height: auto; padding-inline: var(--space-2); }
.btn-text:hover, .btn-text:focus-visible { background: var(--color-primary-100); }
.btn-destructive { background: var(--color-white); color: var(--color-error); border-color: var(--color-error); }
.btn-destructive:hover, .btn-destructive:focus-visible { background: var(--color-error-bg); }
.btn:disabled, .btn.is-disabled { background: var(--color-gray-100); color: var(--color-gray-500); border-color: transparent; cursor: not-allowed; }
.btn-block { width: 100%; }

/* -------------------- 11. CARDS -------------------- */
.card { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-6); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card-title { font-size: 1.125rem; font-weight: 600; color: var(--color-gray-900); margin-bottom: var(--space-2); }
.card-text  { font-size: var(--fs-sm); color: var(--color-gray-500); }

.doctor-card { text-align: center; }
.doctor-card img { width: 96px; height: 96px; border-radius: var(--radius-circle); object-fit: cover; margin: 0 auto var(--space-4); }
.specialty-tag { display: inline-block; margin-top: var(--space-2); background: var(--color-primary-100); color: var(--color-primary-700); font-size: var(--fs-xs); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
.card-actions { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); flex-wrap: wrap; }

.mv-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 905px) { .mv-grid { grid-template-columns: repeat(2, 1fr); } }
.mv-card { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-8); }
.mv-icon, .icon-badge {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--color-primary-100); color: var(--color-primary-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4);
}

.values-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 905px) { .values-grid { grid-template-columns: repeat(5, 1fr); } }
.value-card { text-align: center; padding: var(--space-6); background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.value-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.value-icon, .perk-icon, .fact-icon, .why-icon, .contact-info-icon, .closed-info-icon, .faq-q-icon, .legal-section-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-100); color: var(--color-primary-700);
}
.value-icon, .perk-icon { width: 48px; height: 48px; border-radius: var(--radius-circle); margin: 0 auto var(--space-3); }

/* -------------------- 12. NOTICES / ALERTS -------------------- */
.notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-sm); border-left: 4px solid transparent; font-size: var(--fs-sm); color: var(--color-gray-900); }
.notice-icon { flex-shrink: 0; font-weight: 700; width: 20px; text-align: center; }
.notice-info    { background: var(--color-info-bg);    border-color: var(--color-info); }
.notice-success { background: var(--color-success-bg); border-color: var(--color-success); }
.notice-warning { background: var(--color-warning-bg); border-color: var(--color-warning); }
.notice-error   { background: var(--color-error-bg);   border-color: var(--color-error); }

.message-box { border-radius: var(--radius-sm); padding: var(--space-4); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; gap: var(--space-2); }
.message-success { background: var(--color-success-bg); color: var(--color-success); }
.message-error   { background: var(--color-error-bg);   color: var(--color-error); }

/* -------------------- 13. TABLES -------------------- */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.table { width: 100%; font-size: var(--fs-sm); }
.table thead th { background: var(--color-gray-50); color: var(--color-gray-900); font-weight: 600; text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-gray-100); }
.table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-700); }
.table tbody tr:hover { background: var(--color-gray-50); }
.table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 599px) {
  .table-responsive thead { display: none; }
  .table-responsive tr { display: block; margin-bottom: var(--space-4); border: 1px solid var(--color-gray-100); border-radius: var(--radius-sm); }
  .table-responsive td { display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-gray-100); }
  .table-responsive td::before { content: attr(data-label); font-weight: 600; color: var(--color-gray-900); }
}

/* -------------------- 14. FORMS -------------------- */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-gray-700); }
.form-label .required { color: var(--color-error); margin-left: 2px; }
.form-input, .form-select, .form-textarea {
  display: block; width: 100%; padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem; color: var(--color-gray-900); background: var(--color-white);
  border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px var(--color-primary-100);
}
.form-help { font-size: 0.8125rem; color: var(--color-gray-500); margin-top: var(--space-1); }
.form-group.has-error .form-input, .form-group.has-error .form-select, .form-group.has-error .form-textarea { border-color: var(--color-error); }
.form-error-text { font-size: 0.8125rem; color: var(--color-error); margin-top: var(--space-1); display: flex; align-items: center; gap: var(--space-1); }

.segmented-control { display: inline-flex; border: 1px solid var(--color-gray-300); border-radius: var(--radius-pill); overflow: hidden; }
.segmented-option { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.segmented-option input { display: none; }
.segmented-option.is-active { background: var(--color-primary-600); color: var(--color-white); }

fieldset { border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); padding: var(--space-4); }
legend { font-weight: 600; padding-inline: var(--space-2); color: var(--color-gray-900); }

.category-group { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.category-option { position: relative; flex: 1; min-width: 140px; }
.category-radio { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.category-label { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); font-size: 0.9375rem; font-weight: 600; color: var(--color-gray-700); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.category-radio:checked + .category-label { background: var(--color-primary-600); color: var(--color-white); border-color: var(--color-primary-600); }

.form-card { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-8); }
.form-fieldset-title { font-size: 1rem; font-weight: 600; color: var(--color-gray-900); margin-bottom: var(--space-4); padding-top: var(--space-2); }
.col-span-2 { grid-column: 1 / -1; }

/* -------------------- 15. SECTION TITLES -------------------- */
.section-title { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-8); }
.section-title h2 { margin-bottom: var(--space-2); }
.section-title p { color: var(--color-gray-500); }
.section-title.align-left { text-align: left; margin-inline: 0; }

/* -------------------- 16. FOOTER -------------------- */
.site-footer { background: var(--color-gray-900); color: var(--color-gray-300); }
.footer-inner { display: grid; gap: var(--space-8); grid-template-columns: 1fr; padding-block: var(--space-12); }
@media (min-width: 600px) { .footer-inner { grid-template-columns: repeat(3, 1fr); } }
.footer-heading { color: var(--color-white); font-size: 1rem; margin-bottom: var(--space-4); }
.footer-text { font-size: var(--fs-sm); margin-bottom: var(--space-2); color: var(--color-gray-300); }
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a { font-size: var(--fs-sm); color: var(--color-gray-300); }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--color-primary-500); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-4); font-size: 0.8125rem; color: var(--color-gray-500); }

/* -------------------- 17. HERO -------------------- */
.hero { background: linear-gradient(180deg, rgba(11,95,204,0.92) 0%, rgba(26,115,232,0.85) 100%), var(--color-primary-700); color: var(--color-white); padding-block: var(--space-16) var(--space-12); }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 905px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero-eyebrow { display: inline-block; background: rgba(255,255,255,0.15); color: var(--color-white); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); margin-bottom: var(--space-4); }
.hero h1 { color: var(--color-white); margin-bottom: var(--space-4); }
.hero-lead { color: rgba(255,255,255,0.9); font-size: 1.125rem; margin-bottom: var(--space-6); max-width: 560px; }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero .btn-secondary { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.6); }
.hero .btn-secondary:hover, .hero .btn-secondary:focus-visible { background: rgba(255,255,255,0.12); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.2); }
.hero-stat-number { font-size: 1.75rem; font-weight: 700; color: var(--color-white); }
.hero-stat-label { font-size: 0.8125rem; color: rgba(255,255,255,0.85); }
.hero-media { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; }
.hero-media img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }

/* -------------------- 18. FACTS / SERVICES / WHY-US -------------------- */
.quick-facts { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 600px) { .quick-facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 905px) { .quick-facts { grid-template-columns: repeat(4, 1fr); } }
.fact-item { text-align: center; padding: var(--space-4); }
.fact-icon { width: 48px; height: 48px; border-radius: var(--radius-circle); font-size: 1.25rem; font-weight: 700; margin: 0 auto var(--space-3); }
.fact-title { font-size: 0.9375rem; font-weight: 600; color: var(--color-gray-900); }
.fact-text { font-size: 0.8125rem; color: var(--color-gray-500); }

.service-card { text-align: left; }
.service-icon { width: 44px; height: 44px; border-radius: var(--radius-md); font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-4); background: var(--color-primary-100); color: var(--color-primary-700); display: flex; align-items: center; justify-content: center; }

.why-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.why-icon { width: 40px; height: 40px; border-radius: var(--radius-circle); background: var(--color-success-bg); color: var(--color-success); font-weight: 700; }
.why-title { font-size: 1rem; font-weight: 600; color: var(--color-gray-900); margin-bottom: var(--space-1); }
.why-text { font-size: var(--fs-sm); color: var(--color-gray-500); }

/* -------------------- 19. TIMELINE -------------------- */
.timeline { display: grid; gap: var(--space-6); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 905px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline-step { position: relative; text-align: center; padding: var(--space-6) var(--space-4); }
.timeline-step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-circle); background: var(--color-primary-600); color: var(--color-white); font-weight: 700; margin: 0 auto var(--space-4); }
.timeline-step-title { font-size: 0.9375rem; font-weight: 600; color: var(--color-gray-900); margin-bottom: var(--space-1); }
.timeline-step-text { font-size: 0.8125rem; color: var(--color-gray-500); }
@media (min-width: 905px) {
  .timeline-step:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: calc(50% + 40px); width: calc(100% - 40px); height: 2px; background: var(--color-gray-100); }
}

/* -------------------- 20. TESTIMONIALS -------------------- */
.testimonial-quote-mark { font-size: 2.5rem; line-height: 1; color: var(--color-primary-100); font-weight: 700; margin-bottom: var(--space-2); }
.testimonial-text { color: var(--color-gray-700); font-style: italic; margin-bottom: var(--space-4); }
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-avatar { width: 40px; height: 40px; border-radius: var(--radius-circle); background: var(--color-primary-100); color: var(--color-primary-700); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.testimonial-name { font-size: var(--fs-sm); font-weight: 600; color: var(--color-gray-900); }
.testimonial-role { font-size: var(--fs-xs); color: var(--color-gray-500); }

/* -------------------- 21. LOCATION -------------------- */
.location-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 905px) { .location-grid { grid-template-columns: 1fr; } }
.location-map { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); }
.location-map iframe { width: 100%; height: 320px; border: 0; display: block; }

/* -------------------- 22. CTA BAND -------------------- */
.cta-band { background: var(--color-primary-50); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; }

/* -------------------- 23. BOOKING PROGRESS -------------------- */
.booking-progress { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; padding-block: var(--space-6); }
.progress-step { display: flex; align-items: center; gap: var(--space-2); }
.progress-step-num { width: 28px; height: 28px; border-radius: var(--radius-circle); background: var(--color-gray-100); color: var(--color-gray-500); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; }
.progress-step-label { font-size: 0.8125rem; color: var(--color-gray-500); font-weight: 500; }
.progress-step.is-active .progress-step-num { background: var(--color-primary-600); color: var(--color-white); }
.progress-step.is-active .progress-step-label { color: var(--color-primary-600); font-weight: 600; }
.progress-step.is-complete .progress-step-num { background: var(--color-success); color: var(--color-white); }
.progress-line { width: 32px; height: 2px; background: var(--color-gray-300); }

/* -------------------- 24. RULES / AGREEMENT -------------------- */
.rules-list { display: flex; flex-direction: column; gap: var(--space-4); counter-reset: rule; margin: var(--space-6) 0; }
.rules-item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); }
.rules-item::before { counter-increment: rule; content: counter(rule); flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-circle); background: var(--color-primary-100); color: var(--color-primary-700); font-weight: 700; font-size: 0.8125rem; display: flex; align-items: center; justify-content: center; }
.rules-item p { margin: 0; color: var(--color-gray-700); font-size: 0.9375rem; }

.agreement-box { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin-block: var(--space-6); }
.agreement-box input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary-600); flex-shrink: 0; }
.agreement-box label { font-size: var(--fs-sm); color: var(--color-gray-700); font-weight: 500; }

/* -------------------- 25. REVIEW / FEE SUMMARY -------------------- */
.review-card { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-8); }
.review-section-title { font-size: 0.9375rem; font-weight: 700; color: var(--color-gray-900); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-gray-100); }
.review-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-gray-100); font-size: var(--fs-sm); }
.review-row:last-child { border-bottom: none; }
.review-label { color: var(--color-gray-500); }
.review-value { color: var(--color-gray-900); font-weight: 600; text-align: right; }
.fee-summary { margin-top: var(--space-8); }
.fee-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: var(--fs-sm); color: var(--color-gray-700); }
.fee-row.total { border-top: 2px solid var(--color-gray-900); margin-top: var(--space-2); padding-top: var(--space-4); font-size: 1.125rem; font-weight: 700; color: var(--color-gray-900); }
.order-id-badge { display: inline-block; background: var(--color-primary-100); color: var(--color-primary-700); font-weight: 700; font-size: var(--fs-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); letter-spacing: 0.03em; }

.action-bar { display: flex; justify-content: center; align-items: center; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
@media (max-width: 599px) { .action-bar { flex-direction: column-reverse; } .action-bar .btn { width: 100%; } }

/* -------------------- 26. RESULT / CONFIRMATION PANELS -------------------- */
.confirmation-panel, .result-panel { max-width: 640px; margin-inline: auto; text-align: center; }
.confirmation-icon, .result-icon {
  border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center;
  font-weight: 700; margin: 0 auto var(--space-6);
}
.confirmation-icon { width: 56px; height: 56px; background: var(--color-success-bg); color: var(--color-success); font-size: 1.75rem; }
.result-icon { width: 88px; height: 88px; font-size: 2.75rem; }
.result-icon.success { background: var(--color-success-bg); color: var(--color-success); }
.result-icon.error   { background: var(--color-error-bg);   color: var(--color-error); }
.result-icon.warning  { background: var(--color-warning-bg); color: var(--color-warning); }
.result-heading { margin-bottom: var(--space-2); }
.result-subtext { color: var(--color-gray-500); margin-bottom: var(--space-8); }

.appointment-slip { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-1); border: 1px solid var(--color-gray-100); padding: var(--space-8); text-align: left; margin-bottom: var(--space-8); }
.slip-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 2px dashed var(--color-gray-100); }
.slip-brand { display: flex; align-items: center; gap: var(--space-3); }
.slip-brand-name { font-size: 1rem; font-weight: 700; color: var(--color-gray-900); }
.slip-brand-tag  { font-size: var(--fs-xs); color: var(--color-gray-500); }
.slip-appt-number { text-align: right; }
.slip-appt-number-label { font-size: var(--fs-xs); color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.04em; }
.slip-appt-number-value { font-size: 1.25rem; font-weight: 700; color: var(--color-primary-700); text-align: center; }
.slip-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 600px) { .slip-grid { grid-template-columns: repeat(2, 1fr); } }
.slip-field-label { font-size: var(--fs-xs); color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.slip-field-value { font-size: 0.9375rem; font-weight: 600; color: var(--color-gray-900); }
.slip-divider { border-top: 1px dashed var(--color-gray-100); margin-block: var(--space-6); }
.slip-instructions { background: var(--color-primary-50); border-radius: var(--radius-sm); padding: var(--space-4); }
.slip-instructions h3 { font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.slip-instructions ul { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.8125rem; color: var(--color-gray-700); padding-left: var(--space-4); list-style: disc; }

.result-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
@media (max-width: 480px) { .result-actions { flex-direction: column; } .result-actions .btn { width: 100%; } }
.print-letterhead { display: none; }

/* -------------------- 27. DOCTOR SPOTLIGHT -------------------- */
.doctor-spotlight { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--space-8); display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 905px) { .doctor-spotlight { grid-template-columns: 280px 1fr; } }
.doctor-spotlight-photo { text-align: center; }
.doctor-spotlight-photo img { width: 200px; height: 200px; border-radius: var(--radius-circle); object-fit: cover; margin: 0 auto var(--space-4); box-shadow: var(--shadow-1); }
.doctor-spotlight-meta { display: flex; flex-direction: column; gap: var(--space-1); }
.doctor-spotlight-name { font-size: 1.5rem; font-weight: 700; color: var(--color-gray-900); }
.doctor-spotlight-designation { font-size: 0.9375rem; color: var(--color-gray-500); }
.doctor-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0; }
.doctor-badge { background: var(--color-primary-100); color: var(--color-primary-700); font-size: var(--fs-sm); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
.doctor-spotlight-bio { color: var(--color-gray-700); margin-bottom: var(--space-6); }

/* -------------------- 28. UPDATES / NOTICE LIST -------------------- */
.notice-list { display: flex; flex-direction: column; gap: var(--space-3); }
.notice-date { font-size: var(--fs-xs); font-weight: 700; color: var(--color-gray-500); white-space: nowrap; margin-left: auto; padding-left: var(--space-4); }

.updates-list { display: flex; flex-direction: column; gap: var(--space-4); }
.update-card { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-6); transition: box-shadow var(--transition-base); }
.update-card:hover { box-shadow: var(--shadow-2); }
.update-date-block { flex-shrink: 0; width: 72px; text-align: center; background: var(--color-primary-50); border-radius: var(--radius-sm); padding: var(--space-2); }
.update-date-day { font-size: 1.375rem; font-weight: 700; color: var(--color-primary-700); line-height: 1; }
.update-date-month { font-size: var(--fs-xs); color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.03em; }
.update-category { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 10px; border-radius: var(--radius-pill); margin-bottom: var(--space-2); }
.update-category.leave { background: var(--color-warning-bg); color: var(--color-warning); }
.update-category.news  { background: var(--color-info-bg); color: var(--color-info); }
.update-category.camp  { background: var(--color-success-bg); color: var(--color-success); }
.update-title { font-size: 1rem; font-weight: 600; color: var(--color-gray-900); margin-bottom: var(--space-1); }
.update-text { font-size: var(--fs-sm); color: var(--color-gray-500); }

/* -------------------- 29. LEGAL LAYOUT -------------------- */
.legal-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 905px) { .legal-layout { grid-template-columns: 260px 1fr; } }
.legal-toc { align-self: start; position: sticky; top: calc(var(--header-height) + 24px); background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); padding: var(--space-4); }
.legal-toc-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gray-500); margin-bottom: var(--space-3); }
.legal-toc-list { display: flex; flex-direction: column; gap: var(--space-2); }
.legal-toc-list a { font-size: var(--fs-sm); color: var(--color-gray-700); display: block; padding: var(--space-1) 0; }
.legal-toc-list a:hover, .legal-toc-list a:focus-visible { color: var(--color-primary-600); }
.legal-updated { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; color: var(--color-gray-500); margin-bottom: var(--space-6); background: var(--color-gray-50); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.legal-section { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-6); scroll-margin-top: 100px; }
.legal-section-heading { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.legal-section-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.legal-section p, .legal-section li { color: var(--color-gray-700); font-size: 0.9375rem; margin-bottom: var(--space-2); }
.legal-section ul { padding-left: var(--space-6); list-style: disc; }
.legal-section h3 { font-size: 0.9375rem; margin-top: var(--space-4); margin-bottom: var(--space-2); }

/* -------------------- 30. CONTACT -------------------- */
.contact-info-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 600px) { .contact-info-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-info-card { text-align: center; }
.contact-info-icon { width: 52px; height: 52px; border-radius: var(--radius-circle); margin: 0 auto var(--space-4); }

/* -------------------- 31. SEARCH APPOINTMENT -------------------- */
.search-card, .search-form-card { max-width: 560px; margin-inline: auto; text-align: center; }
.search-icon-badge { width: 64px; height: 64px; border-radius: var(--radius-circle); background: var(--color-primary-100); color: var(--color-primary-700); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }

/* -------------------- 32. FAQ ACCORDION -------------------- */
.faq-category-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-8); }
.faq-category-chip { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary-700); background: var(--color-primary-100); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.faq-list { display: flex; flex-direction: column; gap: var(--space-4); max-width: 800px; margin-inline: auto; }
.faq-item { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; transition: box-shadow var(--transition-base); }
.faq-item:hover { box-shadow: var(--shadow-2); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5, 20px) var(--space-6); font-size: 1rem; font-weight: 600; color: var(--color-gray-900); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon-wrap { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
.faq-q-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.faq-toggle-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-circle); background: var(--color-gray-100); color: var(--color-gray-700); display: flex; align-items: center; justify-content: center; transition: transform var(--transition-base), background var(--transition-base); }
.faq-item[open] .faq-toggle-icon { background: var(--color-primary-600); color: var(--color-white); transform: rotate(45deg); }
.faq-answer { padding: 0 var(--space-6) var(--space-6) calc(var(--space-6) + 36px + var(--space-3)); color: var(--color-gray-700); font-size: 0.9375rem; }

/* -------------------- 33. CAREERS -------------------- */
.job-card { display: flex; flex-direction: column; gap: var(--space-4); }
.job-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.job-title { font-size: 1.125rem; font-weight: 700; color: var(--color-gray-900); }
.job-type-badge { background: var(--color-success-bg); color: var(--color-success); font-size: var(--fs-xs); font-weight: 700; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); white-space: nowrap; }
.job-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 0.8125rem; color: var(--color-gray-500); }
.job-meta-item { display: flex; align-items: center; gap: var(--space-1); }
.job-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.job-tag { background: var(--color-gray-100); color: var(--color-gray-700); font-size: var(--fs-xs); font-weight: 600; padding: 2px var(--space-3); border-radius: var(--radius-pill); }
.job-card-footer { display: flex; justify-content: flex-end; padding-top: var(--space-2); border-top: 1px solid var(--color-gray-100); }

.perk-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .perk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 905px) { .perk-grid { grid-template-columns: repeat(4, 1fr); } }
.perk-card { text-align: center; padding: var(--space-6); }

/* -------------------- 34. CLOSED / EMPTY STATES -------------------- */
.closed-info-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-8); text-align: left; margin-bottom: var(--space-8); }
.closed-info-row { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-gray-100); }
.closed-info-row:last-child { border-bottom: none; }
.closed-info-icon { width: 40px; height: 40px; border-radius: var(--radius-circle); }
.closed-info-label { font-size: 0.8125rem; color: var(--color-gray-500); margin-bottom: 2px; }
.closed-info-value { font-size: 0.9375rem; font-weight: 600; color: var(--color-gray-900); }

.empty-state { text-align: center; padding: var(--space-12) var(--space-6); background: var(--color-gray-50); border-radius: var(--radius-md); }
.empty-state-icon { width: 64px; height: 64px; border-radius: var(--radius-circle); background: var(--color-white); color: var(--color-gray-500); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); box-shadow: var(--shadow-1); }

/* -------------------- 35. PAGE HEADER BANNER -------------------- */
.page-header { background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-white) 100%); border-bottom: 1px solid var(--color-gray-100); padding-block: var(--space-12) var(--space-8); text-align: center; }
.page-header-inner { max-width: 720px; margin-inline: auto; }
.page-header p { color: var(--color-gray-500); margin-top: var(--space-2); }

/* -------------------- 36. TABLET REFINEMENTS (600–904px) -------------------- */
@media (min-width: 600px) and (max-width: 904px) {
  .container { padding-inline: var(--space-6); }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .doctor-spotlight { padding: var(--space-6); }
}

/* -------------------- 37. PRINT -------------------- */
@media print {
  .site-header, .emergency-strip, .breadcrumb-wrapper, .booking-progress,
  .result-actions, .site-footer, .skip-link, .no-print { display: none !important; }

  html, body { background: #FFFFFF; color: #000000; font-size: 12pt; }
  .section { padding: 0 !important; }
  .container { max-width: 100% !important; padding: 0 !important; }
  .result-panel { max-width: 100% !important; }
  .result-icon, .result-heading, .result-subtext { display: none !important; }

  .appointment-slip { box-shadow: none !important; border: 1px solid #000000 !important; margin: 0 !important; padding: 16pt !important; }
  .slip-appt-number-value, .slip-field-value { color: #000000 !important; }
  .slip-instructions { background: #FFFFFF !important; border: 1px solid #000000 !important; }

  .print-letterhead { display: block !important; text-align: center; margin-bottom: 16pt; }
  .print-letterhead .print-title { font-size: 16pt; font-weight: 700; }
  .print-letterhead .print-sub { font-size: 10pt; color: #333333; }

  a { color: #000000 !important; text-decoration: none !important; }
  a[href]::after { content: ""; }
  img { max-width: 100% !important; }
  @page { margin: 20mm 15mm; }
}
/* ============================================================
   FOOTER — ICON CONTACT ROWS
   ============================================================ */
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-gray-300);
  margin-bottom: var(--space-2);
}
.footer-contact-item .material-symbols-outlined {
  color: var(--color-primary-500);
  flex-shrink: 0;
  font-size: 18px;
}
.footer-contact-item a { color: var(--color-gray-300); }
.footer-contact-item a:hover, .footer-contact-item a:focus-visible { color: var(--color-primary-500); }