/* ==========================================================================
   VEERANKI HEALTHCARE — DESIGN SYSTEM
   Surgery = deep teal (clinical, precise). Psychiatry = warm terracotta
   (human, calming). Shared ink/cream base + gold CTA keeps both feeling
   like one premium practice.
   ========================================================================== */
:root{
  --ink:            #16232B;
  --ink-soft:       #47575F;
  --paper:          #F7F4EE;
  --paper-raised:   #FFFFFF;
  --line:           #DFD9C8;

  --gold:           #C89B3C;
  --gold-dark:      #A9822E;

  --surgery:        #1B4B43;
  --surgery-tint:   #E7EFEA;
  --surgery-line:   #BFD3CB;

  --psych:          #A24638;
  --psych-tint:     #F5E9E3;
  --psych-line:     #E3C3B6;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3rem);
  --step-4:  clamp(2.6rem, 2rem + 3vw, 4.2rem);

  --radius-sm: 4px;
  --radius-md: 10px;
  --shadow-card: 0 1px 2px rgba(22,35,43,.04), 0 8px 24px rgba(22,35,43,.06);
}
.context-surgery{ --accent: var(--surgery); --accent-tint: var(--surgery-tint); --accent-line: var(--surgery-line); }
.context-psychiatry{ --accent: var(--psych); --accent-tint: var(--psych-tint); --accent-line: var(--psych-line); }
body{ --accent: var(--gold); --accent-tint: #F1E7CE; --accent-line: #E3D2A0; }

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height:1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); line-height:1.1; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size: var(--step-4); }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); }
p{ margin:0 0 1em; color: var(--ink-soft); }
ul{ padding-left: 1.2em; color: var(--ink-soft); }
.container{ max-width:1180px; margin-inline:auto; padding-inline:24px; }
.section{ padding-block: clamp(48px,8vw,96px); }
.section-tight{ padding-block: clamp(32px,5vw,56px); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.eyebrow{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:.75em; }
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--accent); }

.btn{ display:inline-flex; align-items:center; gap:.5em; padding:.85em 1.6em; border-radius:var(--radius-sm); font-weight:600; font-size:var(--step--1); border:1px solid transparent; cursor:pointer; transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease; }
.btn-primary{ background:var(--gold); color:var(--ink); }
.btn-primary:hover{ background:var(--gold-dark); transform:translateY(-1px); }
.btn-outline{ border-color:currentColor; background:transparent; }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ filter:brightness(.92); transform:translateY(-1px); }

.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-card); }

.rx-divider{ display:flex; justify-content:center; margin:2.5rem 0; color:var(--accent); }

.breadcrumbs{ font-size:var(--step--1); color:var(--ink-soft); margin-bottom:1.5rem; }
.breadcrumbs a{ color:var(--accent); }
.breadcrumbs .sep{ margin:0 .4em; opacity:.5; }

.text-center{ text-align:center; }
.visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Header / Nav ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) and (not (contain: paint)) {
  /* Blur is safe on wide viewports where the mobile off-canvas menu (a
     fixed-position descendant) is never used, since backdrop-filter
     creates a new containing block that would otherwise trap it. */
  @media (min-width: 961px){ .site-header{ background:rgba(247,244,238,.92); backdrop-filter:blur(8px); } }
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px; }
.brand{ display:flex; align-items:center; gap:.6em; font-family:var(--font-display); font-size:1.3rem; font-weight:600; color:var(--ink); white-space:nowrap; flex:none; }
.brand img{ height:38px; width:auto; flex:none; }
.mobile-nav-cta{ display:none; }
.nav-main{ display:flex; align-items:center; gap:28px; }
.nav-main > ul{ display:flex; gap:24px; list-style:none; margin:0; padding:0; font-size:var(--step--1); font-weight:600; position:relative; }
.nav-main > ul > li{ position:relative; }
.nav-main a{ padding:6px 0; }
.nav-main > ul > li:hover > a{ color:var(--gold-dark); }
.dropdown{ display:none; position:absolute; top:100%; left:0; min-width:240px; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-card); padding:8px; list-style:none; margin:0; }
.nav-main li:hover .dropdown{ display:block; }
.dropdown li a{ display:block; padding:10px 12px; border-radius:var(--radius-sm); font-weight:500; }
.dropdown li a:hover{ background:var(--paper); color:var(--gold-dark); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; }
@media (max-width: 960px){
  .brand span.brand-text{ display:none; }
  .nav-cta{ display:none; }
  .nav-main{ display:none; }
  .nav-toggle{ display:inline-flex; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 14px; cursor:pointer; font:inherit; font-weight:600; margin-left:auto; }

  .nav-main.open{
    display:block; position:fixed; left:0; right:0; top:var(--header-h, 68px); bottom:0;
    background:var(--paper); z-index:60; padding:8px 24px 32px; overflow-y:auto;
  }
  .nav-main.open > ul{ display:flex; flex-direction:column; gap:0; }
  .nav-main.open > ul > li{ border-bottom:1px solid var(--line); }
  .nav-main.open > ul > li > a{ display:block; padding:16px 0; font-size:1.05rem; }
  .nav-main .dropdown{
    display:none; position:static; box-shadow:none; border:none; background:none;
    padding:0 0 8px 14px; min-width:0;
  }
  .nav-main li.dropdown-open > .dropdown{ display:block; }
  .nav-main .dropdown li a{ padding:10px 0; }
  .nav-main.open .mobile-nav-cta{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
  .nav-main.open .mobile-nav-cta .btn{ justify-content:center; }
}

/* ---------- Hero ---------- */
.hero{ padding-block: clamp(56px,10vw,110px) clamp(40px,6vw,70px); }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.hero h1{ margin-bottom:.35em; }
.hero-stats{ display:flex; gap:28px; margin-top:2rem; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:var(--step-2); color:var(--ink); }
.hero-stat span{ font-size:var(--step--1); color:var(--ink-soft); }
.hero-media{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--line); }
@media (max-width: 860px){ .hero-grid{ grid-template-columns:1fr; } }

/* ---------- Specialty split cards (homepage) ---------- */
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.split-card{ padding:40px; border-radius:var(--radius-md); position:relative; overflow:hidden; }
.split-card.surgery{ background:var(--surgery-tint); border:1px solid var(--surgery-line); }
.split-card.psychiatry{ background:var(--psych-tint); border:1px solid var(--psych-line); }
.split-card h3{ margin-bottom:.3em; }
.split-card ul{ margin:1em 0 1.6em; padding-left:1.1em; }
.split-card li{ margin-bottom:.4em; color:var(--ink-soft); }
@media (max-width: 860px){ .split-grid{ grid-template-columns:1fr; } }

/* ---------- Grid of cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width: 860px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }
.condition-card{ padding:24px; }
.condition-card h4{ margin-bottom:.3em; font-size:var(--step-1); }
.condition-card a.stretched{ position:absolute; inset:0; }
.condition-card{ position:relative; transition:transform .15s ease, box-shadow .2s ease; }
.condition-card:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(22,35,43,.1); }

/* ---------- Doctor card / profile ---------- */
.doctor-card{ display:flex; gap:24px; padding:28px; align-items:center; }
.doctor-card img{ width:120px; height:120px; object-fit:cover; border-radius:50%; border:3px solid var(--paper); box-shadow:var(--shadow-card); }
.doctor-hero{ display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center; }
.doctor-hero img{ border-radius:var(--radius-md); box-shadow:var(--shadow-card); border:1px solid var(--line); }
@media (max-width: 860px){ .doctor-hero{ grid-template-columns:1fr; } .doctor-card{ flex-direction:column; text-align:center; } }
.stat-strip{ display:flex; gap:32px; flex-wrap:wrap; margin:1.5rem 0; }
.stat-strip div b{ display:block; font-family:var(--font-display); font-size:var(--step-2); color:var(--accent); }
.stat-strip div span{ font-size:var(--step--1); color:var(--ink-soft); }
.credentials{ display:flex; flex-wrap:wrap; gap:10px; margin:1rem 0; }
.credentials span{ background:var(--accent-tint); border:1px solid var(--accent-line); color:var(--ink); padding:6px 14px; border-radius:999px; font-size:var(--step--1); font-weight:600; }

/* ---------- Accordion (used on condition pages) ---------- */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-item button{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; background:none; border:none; text-align:left; padding:20px 4px; font-family:var(--font-display); font-size:var(--step-1); color:var(--ink); cursor:pointer; }
.accordion-item .plus{ font-size:1.4rem; color:var(--accent); transition:transform .2s ease; flex:none; }
.accordion-item[open] .plus{ transform:rotate(45deg); }
.accordion-item .panel{ padding:0 4px 20px; color:var(--ink-soft); }

/* ---------- Process steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
.step{ padding:24px; position:relative; }
.step .num{ font-family:var(--font-mono); color:var(--accent); font-size:var(--step--1); margin-bottom:.5em; display:block; }
@media (max-width: 860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns:1fr; } }

/* ---------- Testimonial ---------- */
.testimonial{ padding:28px; }
.testimonial .quote{ font-family:var(--font-display); font-size:var(--step-1); color:var(--ink); margin-bottom:1rem; }
.testimonial .who{ font-size:var(--step--1); color:var(--ink-soft); font-weight:600; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink); color:var(--paper); border-radius:var(--radius-md); padding:48px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta-band h3{ color:#fff; margin-bottom:.2em; }
.cta-band p{ color:#C9D2D6; margin:0; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#C9D2D6; padding-block:56px 24px; margin-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-grid h4{ color:#fff; font-size:var(--step--1); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-body); font-weight:700; margin-bottom:1em; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:.6em; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:var(--step--1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Utility sections ---------- */
.bg-tint{ background: var(--accent-tint); }
.faq-wrap{ max-width:800px; margin-inline:auto; }
.related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:860px){ .related-grid{ grid-template-columns:1fr 1fr; } }

.two-col-list{ columns:2; gap:32px; padding-left:1.1em; }
.two-col-list li{ break-inside:avoid; margin-bottom:.4em; }