@import url('listings.css');







/* ===== PRICES PAGE — corporate gradient, larger type, prominent CTA ===== */







.page-header--prices {



  background: linear-gradient(180deg, var(--white) 0%, var(--teal-light) 55%, var(--teal-bg) 100%);



  border-bottom: 1px solid rgba(169, 202, 214, 0.25);



  padding: 40px 0 48px;



  position: relative;



  overflow: hidden;



}







.page-header--prices::before {



  content: '';



  position: absolute;



  inset: 0;



  background: radial-gradient(ellipse at 50% 0%, rgba(169, 202, 214, 0.2) 0%, transparent 70%);



  pointer-events: none;



}







.page-header--prices .page-header-bg,



.page-header--prices picture {



  display: none;



}







.prices-crumbs {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  align-items: center;



  font-size: 1rem;



  color: var(--text-secondary);



  margin-bottom: 20px;



}







.prices-crumbs a {



  color: var(--teal);



  font-weight: 700;



  text-decoration: none;



}



.prices-crumbs a:hover { text-decoration: underline; }







.prices-eyebrow {



  margin: 0 0 8px;



  font-size: 1rem;



  font-weight: 700;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  color: var(--teal);



}







.page-header--prices h1 {



  margin: 0 0 12px;



  font-size: clamp(36px, 5vw, 52px);



  font-weight: 900;



  letter-spacing: -0.02em;



  line-height: 1.15;



  color: var(--dark);



}







.prices-lead {



  margin: 0;



  max-width: 700px;



  font-size: clamp(19px, 2.2vw, 22px);



  line-height: 1.6;



  color: var(--dark);



  opacity: 0.85;



}







/* CTA button in hero */



.prices-hero-cta {



  display: inline-flex;



  margin-top: 24px;



}



.prices-hero-cta {



  background: linear-gradient(135deg, var(--teal-bg) 0%, #8bb8d0 100%);



  color: #fff !important;



  box-shadow: 0 8px 28px rgba(169, 202, 214, 0.45);



  font-weight: 800;



  border: none;



}



.prices-hero-cta:hover {



  background: linear-gradient(135deg, #93bccf 0%, #7ab0c8 100%);



  transform: translateY(-3px);



  box-shadow: 0 14px 40px rgba(169, 202, 214, 0.6);



}







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



.prices-layout {



  display: grid;



  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);



  gap: 48px;



  max-width: 1200px;



  margin: 0 auto;



  padding: 32px 20px 72px;



  align-items: start;



}







.accordion-section,



.categories-section {



  margin-bottom: 48px;



}







.accordion-section h2,



.categories-section h2 {



  font-size: clamp(24px, 2.8vw, 30px);



  font-weight: 800;



  letter-spacing: -0.02em;



  color: var(--dark);



  margin: 0 0 20px;



}







/* ===== ACCORDION ===== */



.accordion {



  display: flex;



  flex-direction: column;



  gap: 16px;



}







.accordion-item {



  background: #fff;



  border: 1px solid rgba(169, 202, 214, 0.2);



  border-radius: var(--radius);



  box-shadow: var(--shadow-card);



  overflow: hidden;



  transition: var(--transition-hover);



  scroll-margin-top: 120px;



}



.accordion-item:hover {



  transform: translateY(-2px);



  box-shadow: var(--shadow-card-hover);



  border-color: var(--teal-bg);



}







.accordion-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 20px;



  padding: 22px 28px;



  background: #fff;



  border: none;



  border-radius: 0;



  cursor: pointer;



  transition: var(--transition);



  font-family: 'Manrope', system-ui, sans-serif;



  font-weight: 700;



  font-size: 1.1rem;



  color: var(--dark);



  width: 100%;



  text-align: left;



}



.accordion-header:hover,



.accordion-header[aria-expanded="true"] {



  background: var(--teal-light);



  border-color: var(--teal-bg);



  box-shadow: var(--shadow-teal);



}



.accordion-icon {



  display: flex;



  align-items: center;



  justify-content: center;



  width: 44px;



  height: 44px;



  min-width: 44px;



  border-radius: 10px;



  background: var(--teal-light);



  flex-shrink: 0;



}



.accordion-icon svg {



  width: 26px;



  height: 26px;



  color: var(--teal);



  stroke-width: 2.5;



}



.accordion-header > svg:last-child {



  color: var(--teal);



  flex-shrink: 0;



  width: 20px;



  height: 20px;



  transition: transform 0.3s;



}



.accordion-header[aria-expanded="true"] svg {



  transform: rotate(180deg);



}







.accordion-content {



  padding: 0 28px;



  max-height: 0;



  overflow: hidden;



  transition: max-height 0.4s ease, padding 0.3s ease;



}



.accordion-content.open {



  padding: 0 28px 24px;



  max-height: 2000px;



}







.price-row {



  display: flex;



  justify-content: space-between;



  align-items: center;



  gap: 24px;



  padding: 16px 0;



  border-bottom: 1px solid rgba(169, 202, 214, 0.15);



  font-size: 1rem;



}



.price-row:last-child { border-bottom: none; }



.price-name { color: var(--dark); font-weight: 500; }



.price-value {



  font-family: 'Manrope', system-ui, sans-serif;



  font-weight: 800;



  font-size: 1.1rem;



  color: var(--teal);



  white-space: nowrap;



}







/* ===== CATEGORIES SIDEBAR ===== */



.categories-nav {



  display: flex;



  flex-direction: column;



  gap: 12px;



  background: #fff;



  border: 1px solid rgba(169, 202, 214, 0.2);



  border-radius: var(--radius);



  padding: 24px;



  box-shadow: var(--shadow-card);



}



.categories-nav a {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 12px;



  padding: 12px 16px;



  font-size: 1rem;



  font-weight: 600;



  color: var(--dark);



  border-radius: var(--radius-sm);



  transition: var(--transition);



}



.categories-nav a:hover {



  background: var(--teal-light);



  color: var(--teal);



}



.categories-nav a.active {



  background: var(--teal-bg);



  color: var(--dark);



}







.sidebar-info {



  margin-top: 24px;



  padding: 24px;



  background: linear-gradient(135deg, var(--teal-light) 0%, var(--teal-bg) 100%);



  border-radius: var(--radius);



}



.sidebar-info h3 {



  font-size: 1.1rem;



  font-weight: 800;



  color: var(--dark);



  margin: 0 0 16px;



}



.sidebar-info .info-row {



  display: flex;



  justify-content: space-between;



  gap: 12px;



  padding: 8px 0;



  font-size: 1rem;



  color: var(--dark);



  border-bottom: 1px solid rgba(169, 202, 214, 0.3);



}



.sidebar-info .info-row:last-child { border-bottom: none; }



.sidebar-info .info-label { font-weight: 600; }



.sidebar-info .info-value { font-weight: 500; }















/* Sidebar facts — fix stuck labels */



.sidebar-nav {



  display: flex;



  flex-direction: column;



  gap: 6px;



}







.sidebar-nav-btn {



  appearance: none;



  display: flex;



  align-items: center;



  justify-content: space-between;



  width: 100%;



  text-align: left;



  padding: 12px 16px;



  border: 1px solid rgba(169, 202, 214, 0.6);



  border-radius: var(--radius-sm, 10px);



  background: var(--teal-bg, #A9CAD6);



  color: var(--dark, #343A40);



  font: inherit;



  font-size: 14px;



  font-weight: 700;



  cursor: pointer;



  box-shadow: 0 2px 6px rgba(52, 58, 64, 0.1);



  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;



}







.sidebar-nav-btn::after {



  content: '→';



  font-size: 15px;



  opacity: 0.55;



  transition: transform 0.2s, opacity 0.2s;



}







.sidebar-nav-btn:hover {



  background: var(--teal, #676458);



  color: var(--teal-light, #F5F1EA);



  transform: translateX(2px);



  box-shadow: 0 4px 12px rgba(52, 58, 64, 0.2);



}



.sidebar-nav-btn:hover::after {



  opacity: 1;



  transform: translateX(2px);



}







.sidebar-nav-btn.is-active {



  background: var(--teal, #676458);



  border-color: var(--teal, #676458);



  color: var(--teal-light, #F5F1EA);



  box-shadow: 0 3px 12px rgba(52, 58, 64, 0.22);



}



.sidebar-nav-btn.is-active::after {



  opacity: 1;



}







.sidebar-nav-btn:focus-visible {



  outline: 2px solid var(--teal-bg, #A9CAD6);



  outline-offset: 2px;



}







.sidebar-facts {



  list-style: none;



  margin: 16px 0 0;



  padding: 18px 20px;



  background: #fff;



  border: 1px solid rgba(169, 202, 214, 0.4);



  border-radius: var(--radius);



  box-shadow: 0 2px 12px rgba(52, 58, 64, 0.05);



  display: flex;



  flex-direction: column;



  gap: 0;



}



.sidebar-facts li {



  display: flex;



  justify-content: space-between;



  align-items: baseline;



  gap: 12px;



  padding: 11px 0;



  border-bottom: 1px solid rgba(169, 202, 214, 0.25);



  font-size: 0.95rem;



  color: var(--dark);



}



.sidebar-facts li:first-child {



  padding-top: 0;



}



.sidebar-facts li:last-child {



  border-bottom: none;



  padding-bottom: 0;



}



.sidebar-facts span {



  color: var(--text-secondary, #6C6660);



  font-size: 0.9rem;



}



.sidebar-facts strong {



  color: var(--teal, #676458);



  font-weight: 700;



}



.sidebar-facts span {



  font-weight: 600;



}



.sidebar-facts strong {



  font-weight: 800;



  color: var(--teal);



}







.sidebar-cta {



  margin-top: 24px;



}



.sidebar-cta .btn {



  width: 100%;



  background: linear-gradient(135deg, var(--teal-bg) 0%, #8bb8d0 100%);



  color: #fff !important;



  box-shadow: 0 8px 28px rgba(169, 202, 214, 0.45);



  font-weight: 800;



}



.sidebar-cta .btn:hover {



  background: linear-gradient(135deg, #93bccf 0%, #7ab0c8 100%);



  transform: translateY(-3px);



  box-shadow: 0 14px 40px rgba(169, 202, 214, 0.6);



}







/* ===== SERVICE CATEGORIES LIST ===== */



.service-categories {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));



  gap: 16px;



  margin-top: 32px;



}



.service-category-card {



  display: flex;



  align-items: center;



  gap: 16px;



  padding: 20px 24px;



  background: #fff;



  border: 1px solid rgba(169, 202, 214, 0.2);



  border-radius: var(--radius);



  box-shadow: var(--shadow-card);



  transition: var(--transition-hover);



  text-decoration: none;



}



.service-category-card:hover {



  transform: translateY(-3px);



  box-shadow: var(--shadow-card-hover);



  border-color: var(--teal-bg);



}



.service-category-card svg {



  color: var(--teal);



  flex-shrink: 0;



  width: 24px;



  height: 24px;



}



.service-category-info { flex: 1; }



.service-category-title {



  font-size: 1rem;



  font-weight: 700;



  color: var(--dark);



  margin: 0 0 4px;



}



.service-category-count {



  font-size: 0.9rem;



  color: var(--text-secondary);



  margin: 0;



}







/* ===== DOCTORS ===== */



.doctors-inner {



  max-width: 1200px;



  margin: 0 auto;



  padding: 0 20px;



}



.doctors-section {



  margin-top: 64px;



}



.doctors-section h2 {



  font-size: clamp(28px, 3.5vw, 36px);



  font-weight: 900;



  letter-spacing: -0.02em;



  color: var(--dark);



  margin: 0 0 8px;



}



.doctors-section .subtitle,



.doctors-subtitle {



  font-size: 1.1rem;



  color: var(--text-secondary);



  margin: 0 0 32px;



}







.doctors-grid {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));



  gap: 24px;



}







.doctor-card {



  background: #fff;



  border-radius: var(--radius);



  padding: 28px;



  text-align: center;



  border: 1px solid rgba(169, 202, 214, 0.2);



  box-shadow: var(--shadow-card);



  transition: var(--transition-hover);



}



.doctor-card:hover {



  transform: translateY(-4px);



  box-shadow: var(--shadow-card-hover);



  border-color: var(--teal-bg);



}



.doctor-avatar {



  width: 120px;



  height: 120px;



  border-radius: 50%;



  margin: 0 auto 20px;



  object-fit: cover;



  border: 4px solid var(--teal-light);



  box-shadow: var(--shadow-teal);



}



.doctor-avatar-placeholder {



  width: 120px;



  height: 120px;



  border-radius: 50%;



  margin: 0 auto 20px;



  background: linear-gradient(135deg, var(--teal-bg) 0%, var(--teal) 100%);



  color: #fff;



  display: flex;



  align-items: center;



  justify-content: center;



  font-family: 'Manrope', system-ui, sans-serif;



  font-weight: 800;



  font-size: 2rem;



  box-shadow: var(--shadow-teal);



}



.doctor-name {



  font-size: 1.2rem;



  font-weight: 800;



  color: var(--dark);



  margin: 0 0 6px;



}



.doctor-specialty {



  font-size: 1rem;



  color: var(--teal);



  font-weight: 600;



  margin: 0 0 4px;



}



.doctor-exp {



  font-size: 0.95rem;



  color: var(--text-secondary);



  margin: 0 0 16px;



}



.doctor-link {



  font-size: 1rem;



  font-weight: 700;



  color: var(--teal);



  display: inline-flex;



  align-items: center;



  gap: 6px;



}



.doctor-link::after { content: '→'; transition: transform 0.2s; }



.doctor-card:hover .doctor-link::after { transform: translateX(4px); }







/* ===== CTA FORM ===== */



.cta-form-section {
  background: var(--dark);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.cta-form-section::before {
  display: none !important;
}



.cta-form {



  max-width: 640px;



  margin: 0 auto;



  position: relative;



  z-index: 2;



}



.cta-form h2 {



  font-size: clamp(30px, 4vw, 42px);



  font-weight: 900;



  color: #fff;



  text-align: center;



  margin: 0 0 12px;



  line-height: 1.15;



}



.cta-form .subtitle {



  font-size: clamp(19px, 2.2vw, 22px);



  color: rgba(255,255,255,0.85);



  text-align: center;



  margin: 0 0 32px;



  line-height: 1.6;



}



.cta-form .form-group { margin-bottom: 20px; }



.cta-form label {



  display: block;



  font-size: 0.95rem;



  font-weight: 600;



  color: rgba(255,255,255,0.9);



  margin: 0 0 8px;



}



.cta-form input,



.cta-form select,



.cta-form textarea {



  width: 100%;



  padding: 16px 20px;



  border-radius: var(--radius-sm);



  border: 2px solid rgba(255,255,255,0.2);



  background: rgba(255,255,255,0.08);



  color: #fff;



  font-family: inherit;



  font-size: 1rem;



  transition: var(--transition);



}



.cta-form input::placeholder,



.cta-form textarea::placeholder {



  color: rgba(255,255,255,0.5);



}



.cta-form input:focus,



.cta-form select:focus,



.cta-form textarea:focus {



  outline: none;



  border-color: var(--teal-bg);



  box-shadow: 0 0 0 4px rgba(169, 202, 214, 0.25);



  background: rgba(255,255,255,0.12);



}



.cta-form select {



  cursor: pointer;



  appearance: none;



  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A9CAD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");



  background-repeat: no-repeat;



  background-position: right 16px center;



  padding-right: 48px;



}



.cta-form .checkbox-group {



  display: flex;



  align-items: flex-start;



  gap: 12px;



  margin-top: 8px;



}



.cta-form input[type="checkbox"] {



  width: 22px;



  height: 22px;



  accent-color: var(--teal-bg);



  flex-shrink: 0;



  margin-top: 4px;



}



.cta-form .checkbox-label {



  font-size: 0.9rem;



  color: rgba(255,255,255,0.8);



  line-height: 1.5;



}



.cta-form .checkbox-label a { color: var(--teal-bg); text-decoration: underline; }



.cta-form .btn {



  width: 100%;



  padding: 20px 40px;



  font-size: 1.1rem;



  font-weight: 800;



  background: linear-gradient(135deg, var(--teal-bg) 0%, #8bb8d0 100%);



  color: #fff;



  box-shadow: 0 8px 28px rgba(169, 202, 214, 0.45);



  margin-top: 8px;



}



.cta-form .btn:hover {



  background: linear-gradient(135deg, #93bccf 0%, #7ab0c8 100%);



  transform: translateY(-3px);



  box-shadow: 0 14px 40px rgba(169, 202, 214, 0.6);



}







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



footer {



  background: linear-gradient(180deg, #1a1d21 0%, var(--dark) 100%);



  color: rgba(255,255,255,0.85);



  padding: 80px 0 40px;



}



.footer-logo {



  font-size: 1.5rem;



  font-weight: 900;



  color: #fff;



  margin-bottom: 16px;



}



.footer-desc {



  font-size: 1rem;



  line-height: 1.7;



  color: rgba(255,255,255,0.6);



  max-width: 300px;



}



.footer-title {



  font-size: 1.1rem;



  font-weight: 800;



  color: #fff;



  margin: 0 0 20px;



}



.footer-links { list-style: none; padding: 0; }



.footer-links li { margin-bottom: 12px; }



.footer-links a {



  font-size: 1rem;



  color: rgba(255,255,255,0.7);



  transition: var(--transition);



}



.footer-links a:hover { color: var(--teal-bg); }



.footer-contact {



  font-size: 1rem;



  line-height: 1.7;



  color: rgba(255,255,255,0.7);



}



.footer-contact a { color: rgba(255,255,255,0.9); font-weight: 600; }



.footer-contact a:hover { color: var(--teal-bg); }



.footer-bottom {



  border-top: 1px solid rgba(255,255,255,0.1);



  margin-top: 48px;



  padding-top: 24px;



  text-align: center;



  font-size: 0.9rem;



  color: rgba(255,255,255,0.4);



}







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



@media (max-width: 1024px) {



  .prices-layout { grid-template-columns: 1fr; gap: 32px; padding: 24px 20px 60px; }



  .header-inner { padding: 16px 24px; }



  .hero-inner { padding: 80px 20px 60px; }



  .service-hero { padding: 60px 0 72px; }



  section { padding: 80px 0; }



}







@media (max-width: 768px) {



  :root { --font-base: 18px; --radius: 12px; --radius-sm: 8px; }



  .header-inner { flex-wrap: wrap; gap: 12px; padding: 14px 20px; }



  .header-phone { font-size: 1.05rem; padding: 6px 12px; }



  .header-phone svg { width: 20px; height: 20px; }



  .header-actions .btn-sm { padding: 10px 18px; font-size: 0.9rem; }



  .hero-inner { padding: 70px 16px 50px; }



  .hero-cta { flex-direction: column; }



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



  .service-hero { padding: 50px 0 60px; }



  .prices-layout { grid-template-columns: 1fr; }



}







@media (max-width: 480px) {



  :root { --font-base: 17px; }



  .container, .container-fluid, .container-1440 { padding: 0 16px; }



  .hero-brand { font-size: 28px; }



  .hero--bleed h1 { font-size: 28px; }



  .service-hero h1 { font-size: 30px; }



  .page-header--prices h1 { font-size: 30px; }



  .cta-form h2 { font-size: 26px; }



  .btn-large { padding: 18px 28px; font-size: 1rem; }



}