:root {
      --bg: #050810;
      --bg-elevated: #0b1020;
      --accent: #3db9a9;
      --accent-soft: rgba(61, 185, 169, 0.12);
      --accent-strong: #1ea392;
      --text-main: #f5f7fb;
      --text-muted: #a4b0c3;
      --border-subtle: rgba(255, 255, 255, 0.06);
      --danger: #f97373;
      --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.45);
      --radius-lg: 24px;
      --radius-md: 16px;
      --radius-pill: 999px;
      --transition-fast: 180ms ease-out;
      --max-width: 1120px;
    }

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

    body {
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, #151b32 0, #050810 55%);
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

    .page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .container {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* HEADER / NAV */
    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(16px);
      background: linear-gradient(to bottom,
          rgba(5, 8, 16, 0.92),
          rgba(5, 8, 16, 0.82),
          transparent);
      border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.85rem 0;
      gap: 1.5rem;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 40%;
      background: radial-gradient(circle at 30% 20%, #4be6d0, #216c86);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 30px rgba(30, 163, 146, 0.65);
      font-weight: 700;
      font-size: 0.85rem;
    }

    .brand-text-main {
      font-weight: 700;
      letter-spacing: 0.06em;
      font-size: 1rem;
      text-transform: uppercase;
    }

    .brand-text-sub {
      font-size: 0.7rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .nav-links {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    .nav-links a {
      position: relative;
      padding-bottom: 0.15rem;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -0.2rem;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--accent-strong));
      border-radius: 999px;
      transition: width var(--transition-fast);
    }

    .nav-links a:hover {
      color: var(--text-main);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-cta {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      font-size: 0.82rem;
      font-weight: 500;
      padding: 0.55rem 1.2rem;
      border-radius: var(--radius-pill);
      border: 1px solid transparent;
      cursor: pointer;
      background: none;
      color: var(--text-main);
      transition: transform var(--transition-fast),
        box-shadow var(--transition-fast), background var(--transition-fast),
        border-color var(--transition-fast), color var(--transition-fast);
      white-space: nowrap;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-strong));
      box-shadow: 0 12px 28px rgba(18, 180, 151, 0.45);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 40px rgba(18, 180, 151, 0.65);
    }

    .btn-ghost {
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(9, 13, 27, 0.7);
      color: var(--text-muted);
    }

    .btn-ghost:hover {
      border-color: rgba(255, 255, 255, 0.24);
      color: var(--text-main);
      background: rgba(15, 22, 43, 0.95);
    }

    .icon-circle {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(5, 8, 16, 0.18);
      background: rgba(5, 8, 16, 0.2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
    }

    .mobile-toggle {
      display: none;
      border-radius: 99px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      padding: 0.4rem 0.65rem;
      font-size: 0.75rem;
      color: var(--text-muted);
      background: rgba(8, 12, 26, 0.88);
    }

    @media (max-width: 768px) {

      .nav-links,
      .nav-cta {
        display: none;
      }

      .mobile-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
      }
    }

    /* HERO */
    .hero {
      padding: 3.2rem 0 3.5rem;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
      gap: 2.5rem;
      align-items: start;
    }

    @media (max-width: 900px) {
      .hero-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .hero-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 999px;
      border: 1px solid rgba(61, 185, 169, 0.4);
      padding: 0.25rem 0.75rem 0.25rem 0.25rem;
      background: radial-gradient(circle at left,
          rgba(61, 185, 169, 0.3),
          rgba(8, 12, 26, 0.8));
      font-size: 0.75rem;
      margin-bottom: 1.1rem;
    }

    .hero-pill-badge {
      background: #0b1624;
      border-radius: 999px;
      padding: 0.18rem 0.65rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      border: 1px solid rgba(61, 185, 169, 0.35);
    }

    .hero-title {
      font-size: clamp(2rem, 3vw, 2.4rem);
      line-height: 1.15;
      margin-bottom: 0.9rem;
      font-weight: 700;
    }

    .hero-title span.accent {
      background: linear-gradient(120deg, #4be6d0, #4ea7ff);
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      color: var(--text-muted);
      font-size: 0.98rem;
      max-width: 33rem;
      margin-bottom: 1.6rem;
    }

    .hero-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
      align-items: start;
      max-width: 42rem;
      margin: 1.2rem 0 1.4rem;
    }

    .hero-meta-item {
      font-size: 0.78rem;
      color: var(--text-muted);
      display: flex;
      align-items: flex-start;
      gap: 0.45rem;
    }

    .hero-meta-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 6px var(--accent-soft);
      flex: 0 0 auto;
      margin-top: 0.4rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
    }

    .hero-right {
      display: grid;
      gap: 1rem;
    }

    .card {
      border-radius: var(--radius-lg);
      background: radial-gradient(circle at top left,
          rgba(77, 199, 176, 0.16),
          transparent 55%),
        rgba(5, 9, 22, 0.95);
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-soft);
      padding: 1.3rem 1.4rem;
    }

    .card-compact {
      border-radius: var(--radius-md);
      padding: 0.85rem 1rem;
    }

    .hero-conditions {
      max-width: 39rem;
      margin: 1.25rem 0 1.25rem;
    }

    .hero-conditions-title {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.55rem;
    }

    .hero-conditions .pill-row {
      margin-top: 0;
    }

    .doctor-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;
      margin-bottom: 1.1rem;
    }

    .doctor-avatar {
      width: 100%;
      height: 280px;
      border-radius: 20px;
      object-fit: cover;
      object-position: center top;
    }

    .doctor-summary-copy {
      display: grid;
      gap: 0.4rem;
      min-width: 0;
    }

    .doctor-summary-copy p {
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .doctor-name {
      font-weight: 600;
      font-size: 1rem;
    }

    .doctor-role {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .badge-soft {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      background: rgba(179, 230, 222, 0.06);
      font-size: 0.7rem;
      color: var(--accent);
      border: 1px solid rgba(61, 185, 169, 0.5);
      line-height: 1.35;
    }

    .doctor-highlights {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.9rem;
      margin-top: 0.9rem;
    }

    .doctor-stat-label {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-bottom: 0.15rem;
    }

    .doctor-stat-value {
      font-size: 0.92rem;
      font-weight: 500;
    }

    @media (max-width: 560px) {
      .doctor-avatar {
        height: 240px;
        border-radius: 20px;
      }
    }

    .stack {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.4rem;
    }

    .pill {
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      padding: 0.15rem 0.6rem;
      font-size: 0.72rem;
      color: var(--text-muted);
      background: rgba(9, 14, 29, 0.9);
    }

    /* SECTIONS */
    section {
      padding: 2.8rem 0;
    }

    .section-header {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 1.8rem;
    }

    .section-kicker {
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .section-title {
      font-size: 1.4rem;
      font-weight: 600;
    }

    .section-subtitle {
      font-size: 0.9rem;
      color: var(--text-muted);
      max-width: 32rem;
    }

    /* SERVICES */
    .grid {
      display: grid;
      gap: 1.3rem;
    }

    @media (min-width: 768px) {
      .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

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

    .service-card {
      border-radius: var(--radius-md);
      border: 1px solid var(--border-subtle);
      background: linear-gradient(145deg,
          rgba(26, 34, 56, 0.7),
          rgba(10, 14, 28, 0.96));
      padding: 1.1rem 1.1rem 1.15rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      font-size: 0.86rem;
    }

    .service-icon {
      width: 28px;
      height: 28px;
      border-radius: 13px;
      background: var(--accent-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      margin-bottom: 0.2rem;
    }

    .service-title {
      font-weight: 500;
      font-size: 0.95rem;
    }

    .service-desc {
      color: var(--text-muted);
    }

    /* DOCTOR SECTION */
    .doctor-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 2rem;
    }

    @media (max-width: 900px) {
      .doctor-layout {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .doctor-card {
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-subtle);
      background: radial-gradient(circle at top left,
          rgba(61, 185, 169, 0.25),
          transparent 55%),
        rgba(4, 7, 18, 0.97);
      padding: 1.4rem 1.5rem;
      box-shadow: var(--shadow-soft);
    }

    .doctor-tagline {
      font-size: 0.88rem;
      color: var(--text-muted);
      margin-top: 0.4rem;
    }

    .tag-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.78rem;
      border-radius: 999px;
      padding: 0.18rem 0.6rem;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(6, 10, 22, 0.9);
      color: var(--text-muted);
    }

    /* REVIEWS */
    .reviews-card {
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-subtle);
      background: radial-gradient(circle at top left,
          rgba(61, 185, 169, 0.18),
          transparent 55%),
        rgba(6, 10, 22, 0.98);
      padding: 1.25rem 1.4rem;
      display: grid;
      gap: 1rem;
      box-shadow: var(--shadow-soft);
    }

    .reviews-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      color: var(--text-muted);
      font-size: 0.86rem;
    }

    .reviews-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid rgba(61, 185, 169, 0.45);
      background: var(--accent-soft);
      color: var(--accent);
      padding: 0.2rem 0.65rem;
      font-size: 0.76rem;
      font-weight: 600;
    }

    .reviews-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
    }

    /* CONTACT */
    .contact-grid {
      display: grid;
      gap: 1.7rem;
    }

    @media (min-width: 768px) {
      .contact-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
      }
    }

    .contact-card {
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-subtle);
      background: rgba(6, 10, 22, 0.98);
      padding: 1.25rem 1.4rem;
      display: grid;
      gap: 0.9rem;
      font-size: 0.86rem;
    }

    .contact-row {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .contact-label {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .contact-value {
      font-size: 0.9rem;
    }

    .contact-value a {
      color: var(--accent);
    }

    .contact-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 0.25rem;
    }

    form {
      display: grid;
      gap: 0.75rem;
    }

    .field {
      display: grid;
      gap: 0.25rem;
    }

    label {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    input,
    textarea {
      background: rgba(7, 10, 22, 0.95);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0.55rem 0.7rem;
      color: var(--text-main);
      font-size: 0.86rem;
      font-family: inherit;
      outline: none;
      transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast), background var(--transition-fast);
    }

    input::placeholder,
    textarea::placeholder {
      color: rgba(164, 176, 195, 0.7);
    }

    input:focus,
    textarea:focus {
      border-color: rgba(61, 185, 169, 0.9);
      box-shadow: 0 0 0 1px rgba(61, 185, 169, 0.6);
      background: rgba(6, 9, 20, 0.98);
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    .map-placeholder {
      border-radius: var(--radius-lg);
      border: 1px dashed rgba(255, 255, 255, 0.18);
      background: radial-gradient(circle at top left,
          rgba(61, 185, 169, 0.12),
          transparent 55%),
        rgba(3, 6, 15, 0.96);
      padding: 1rem 1.2rem;
      font-size: 0.8rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .map-placeholder small {
      opacity: 0.85;
    }

    /* AFFILIATIONS */
    .affiliation-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      justify-content: center;
      margin-top: 2rem;
    }

    .affiliation-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      text-align: center;
      /* for hover effects */
    }

    .logo-box {
      width: 220px;
      height: 110px;
      background: #ffffff;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .logo-box:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 30px rgba(61, 185, 169, 0.2);
      /* Tint of accent color */
    }

    .logo-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .affiliation-name {
      font-weight: 500;
      color: var(--text-muted);
      font-size: 0.95rem;
      transition: color var(--transition-fast);
    }

    .affiliation-card:hover .affiliation-name {
      color: var(--text-main);
    }

    /* FOOTER */
    footer {
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      margin-top: 2.4rem;
      padding: 1.1rem 0 1.6rem;
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .footer-links a {
      color: var(--text-muted);
    }
  
/* Shared service pages, FAQs and accessible navigation */
html{scroll-behavior:smooth;scroll-padding-top:110px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #67e8f9;outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:16px;z-index:1000;background:#fff;color:#050810;padding:12px}
.skip-link:focus{top:12px}
.guide-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.guide-links a{border:1px solid var(--accent);border-radius:10px;padding:12px 16px;color:var(--text-main)}
.guide-intro{max-width:780px}.guide-intro h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.14;margin:24px 0}
.guide-intro p,.guide-copy p,.faq-answer{line-height:1.8;color:var(--text-muted)}
.guide-section{padding:28px 0}.guide-copy{max-width:850px}
.guide-copy h2{font-size:1.5rem;margin-bottom:16px}.guide-copy h3{margin:20px 0 8px}
.faq-list{max-width:900px}.faq-list details{border:1px solid var(--border-subtle,rgba(255,255,255,.15));border-radius:14px;margin:12px 0;background:rgba(255,255,255,.025)}
.faq-list summary{cursor:pointer;padding:20px;font-weight:600;line-height:1.5}
.faq-answer{padding:0 20px 20px}.faq-answer p{margin:0}.faq-answer a{display:inline-block;margin-top:12px;color:var(--accent)}
.patient-note{border-left:3px solid var(--accent);padding:12px 18px;margin:24px 0;color:var(--text-muted);line-height:1.7}
.breadcrumb{color:var(--text-muted);font-size:.9rem;padding-top:24px}.breadcrumb a{color:var(--accent)}
.reference-links{display:flex;flex-wrap:wrap;gap:16px;font-size:.9rem;margin:18px 0}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
@media(max-width:768px){.nav{flex-wrap:wrap}.nav-links.is-open{display:flex;order:4;flex-basis:100%;flex-direction:column;padding:16px 0}.guide-links a{width:100%}.container{max-width:100%}.brand-text-sub{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* Linked condition and treatment cards. */
.service-card{display:flex;flex-direction:column}
h3.service-title{margin:0 0 10px;font-size:1.05rem}
p.service-desc{margin:0 0 18px}
.service-link{margin-top:auto;padding-top:8px;color:var(--accent);font-weight:600;line-height:1.5}
.service-link:hover{text-decoration:underline}

/* Profile and credentials supplied by Karthie, 12 October 2026. */
.doctor-bio{margin-top:.8rem;font-size:.88rem;color:var(--text-muted);line-height:1.8}
.doctor-bio p+p{margin-top:1rem}
.credentials-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}
.credentials-grid h3{font-size:1.05rem;margin-bottom:1rem}
.credentials-list{padding-left:1.2rem;color:var(--text-muted);line-height:1.8}
.credentials-list li+li{margin-top:.5rem}
.nav-links a{white-space:nowrap}
@media(min-width:1025px){.nav{gap:1rem}.nav-links{gap:1rem;font-size:.85rem}.brand-text-sub{max-width:240px}}
@media(max-width:1024px){.nav{flex-wrap:wrap}.nav-links,.nav-cta{display:none}.mobile-toggle{display:inline-flex}.nav-links.is-open{display:flex;order:4;flex-basis:100%;flex-direction:column;padding:16px 0}}
@media(max-width:768px){.credentials-grid{grid-template-columns:minmax(0,1fr)}}