/* ============================================================
   SURAJ CLINIC — styles
   Modelled on the patterns shared by well-regarded primary-care
   sites (One Medical, Parsley Health, Tia): a split hero with a
   full-bleed photograph, a large light serif for headlines, a
   clean sans for reading, deep forest green on warm off-whites,
   pill buttons, a trust row, and alternating tinted sections.
   ============================================================ */

:root{
  --canvas:#FAF7F2;
  --surface:#FFFFFF;
  --sand:#EFE6DA;
  --mint:#E7F0EC;
  --ink:#1C2B29;
  --ink-2:#4A5A57;
  --ink-3:#6E7C79;
  --line:#E3DDD3;
  --primary:#1F4744;
  --primary-hover:#163633;
  --on-primary:#FFFFFF;
  --accent-soft:#D7EAE2;
  --open:#2E7D5B;
  --closed:#B4532F;

  /* the dark green band (locations, footer) */
  --band:#1F4744;
  --band-ink:#F4F0E8;
  --band-ink-2:#BDD2CB;
  --band-accent:#9ED3C0;

  --serif:"Newsreader", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
  --sans:"Figtree", "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1200px;
  --gutter:clamp(20px, 4vw, 40px);
  --r-card:20px;
}

:root[data-theme="dark"]{
  --canvas:#0F1715;
  --surface:#16211E;
  --sand:#1A2421;
  --mint:#121E1B;
  --ink:#ECE7DE;
  --ink-2:#B5BFBB;
  --ink-3:#8D9995;
  --line:#26332F;
  --primary:#8FCBB6;
  --primary-hover:#A8D9C7;
  --on-primary:#0D1B18;
  --accent-soft:#1E332D;
  --open:#8FCBB6;
  --closed:#F0937A;
  --band:#13302C;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#0F1715;
    --surface:#16211E;
    --sand:#1A2421;
    --mint:#121E1B;
    --ink:#ECE7DE;
    --ink-2:#B5BFBB;
    --ink-3:#8D9995;
    --line:#26332F;
    --primary:#8FCBB6;
    --primary-hover:#A8D9C7;
    --on-primary:#0D1B18;
    --accent-soft:#1E332D;
    --open:#8FCBB6;
    --closed:#F0937A;
    --band:#13302C;
  }
}

/* hide content until a saved Marathi preference has been applied (see <head>) */
html.lang-pending body{ visibility:hidden }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }
address{ font-style:normal }

h1,h2,h3,h4{ margin:0; font-weight:400 }
h1,h2,h3{ font-family:var(--serif); letter-spacing:-.015em; color:var(--ink) }
h1{ font-size:clamp(2.6rem, 5.4vw, 4.5rem); line-height:1.04; font-weight:350 }
h1 em{ font-style:italic; color:var(--primary) }
h2{ font-size:clamp(2rem, 3.8vw, 3.1rem); line-height:1.1 }
h3{ font-size:1.5rem; line-height:1.2; font-weight:500 }

:where(a,button,summary):focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:6px }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter) }

.skip{
  position:absolute; left:-9999px; top:8px; z-index:100;
  background:var(--primary); color:var(--on-primary); padding:10px 16px; border-radius:999px; text-decoration:none;
}
.skip:focus{ left:12px }

/* small caps-style label above headings and names */
.label{
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--primary);
}

/* ---------- buttons ---------- */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px; border-radius:999px; border:1.5px solid transparent;
  font:600 1rem/1.2 var(--sans); text-decoration:none; cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s;
}
.pill-primary{ background:var(--primary); color:var(--on-primary) }
.pill-primary:hover{ background:var(--primary-hover) }
.pill-outline{ border-color:var(--primary); color:var(--primary) }
.pill-outline:hover{ background:var(--primary); color:var(--on-primary) }
.pill-sm{ padding:10px 20px; font-size:.93rem }

/* ---------- live status ---------- */
.status{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 13px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-size:.88rem; font-weight:600; color:var(--ink);
}
.status .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none }
.status.is-open .dot{ background:var(--open); box-shadow:0 0 0 4px color-mix(in srgb, var(--open) 22%, transparent) }
.status.is-closed .dot{ background:var(--closed) }

/* ---------- announcement bar ---------- */
.announce{ background:var(--mint); color:var(--ink); font-size:.92rem }
.announce .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 14px; padding-top:10px; padding-bottom:10px; text-align:center }
.announce strong{ font-weight:600 }
.announce-sep{ width:4px; height:4px; border-radius:50%; background:var(--ink-3) }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{ display:flex; align-items:center; gap:28px; height:78px }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--primary); flex:none }
.brand-mark{ width:36px; height:36px }
.brand-text{ display:flex; flex-direction:column; line-height:1.15 }
.brand-name{ font-family:var(--serif); font-size:1.45rem; font-weight:500; color:var(--ink); letter-spacing:-.01em }
.brand-sub{ font-size:.78rem; color:var(--ink-3) }

.site-nav{ display:flex; gap:30px; margin-left:auto }
.site-nav a{ text-decoration:none; font-weight:500; font-size:.97rem; color:var(--ink-2); transition:color .2s }
.site-nav a:hover{ color:var(--ink) }

.header-tools{ display:flex; align-items:center; gap:10px }
.tool-btn{
  height:42px; min-width:42px; padding:0 16px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font:600 .92rem var(--sans); cursor:pointer; transition:border-color .2s;
}
.tool-btn:hover{ border-color:var(--ink-3) }
.tool-btn.icon{ padding:0 }
.tool-btn svg{ width:19px; height:19px }
.menu-btn{ display:none }

#themeBtn .moon{ display:none }
:root[data-theme="dark"] #themeBtn .moon{ display:block }
:root[data-theme="dark"] #themeBtn .sun{ display:none }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #themeBtn .moon{ display:block }
  :root:not([data-theme="light"]) #themeBtn .sun{ display:none }
}

/* ---------- hero ---------- */
.hero{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(560px, 76vh, 740px) }
.hero-copy{ background:var(--sand); display:flex; align-items:center }
.hero-inner{
  max-width:calc(var(--wrap) / 2 + 40px);
  margin-left:auto;
  padding:72px clamp(28px, 5vw, 72px) 72px var(--gutter);
}
.hero h1{ margin:26px 0 24px }
.hero-lede{ font-size:1.16rem; color:var(--ink-2); max-width:33em }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px }
.hero-photo{ position:relative; min-height:320px; background:var(--mint) }
.hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:40% center }

/* ---------- trust row ---------- */
.trust{ border-bottom:1px solid var(--line); background:var(--canvas) }
.trust-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 32px; padding-top:30px; padding-bottom:30px }
.trust-row li{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:.97rem }
.trust-row svg{ width:30px; height:30px; flex:none; fill:none; stroke:var(--primary); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* ---------- sections ---------- */
.section{ padding:clamp(72px, 9vw, 116px) 0 }
.tint-mint{ background:var(--mint) }
.tint-sand{ background:var(--sand) }
.section-head{ max-width:720px; margin-bottom:52px }
.section-head h2{ margin:14px 0 18px }
.section-lede{ font-size:1.1rem; color:var(--ink-2) }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:34px 32px }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px }
.chips li{ padding:6px 13px; border-radius:999px; background:var(--mint); color:var(--ink-2); font-size:.85rem; font-weight:500 }
.tint-mint .chips li{ background:var(--canvas) }

/* ---------- approach ---------- */
.systems{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px }
.system-icon{
  width:60px; height:60px; border-radius:50%; background:var(--accent-soft);
  display:grid; place-items:center; margin-bottom:26px;
}
.system-icon svg{ width:30px; height:30px; fill:none; stroke:var(--primary); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.system h3{ margin-bottom:12px }
.system p{ color:var(--ink-2) }

/* ---------- doctors ---------- */
.doctors{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 56px) }
.doctor-photo{ border-radius:24px; overflow:hidden; aspect-ratio:5 / 4; background:var(--mint) }
.doctor-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 22% }
.doctor-body{ padding-top:28px }
.doctor-body h3{ font-size:clamp(1.8rem, 2.6vw, 2.2rem); margin:8px 0 4px }
.doctor-role{ color:var(--ink-3); margin-bottom:16px }
.doctor-body > p:not(.label):not(.doctor-role){ color:var(--ink-2) }

/* ---------- services ---------- */
.services{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px }
.service{ display:flex; flex-direction:column; border-color:transparent }
/* five cards: the first spans two columns so both rows fill */
.service-wide{ grid-column:span 2 }
.service-icon{ width:36px; height:36px; fill:none; stroke:var(--primary); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.service h3{ margin:22px 0 10px; font-size:1.38rem }
.service p{ color:var(--ink-2) }
.service .service-note{
  margin-top:auto; padding-top:22px;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary);
}

/* ---------- locations (dark band) ---------- */
.band-dark{ background:var(--band); color:var(--band-ink) }
.band-dark h2{ color:var(--band-ink) }
.band-dark .label{ color:var(--band-accent) }
.band-dark .section-lede{ color:var(--band-ink-2) }

.locations{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(36px, 5vw, 64px); align-items:start }
.locations-intro h2{ margin:14px 0 18px }

.hours-panel{ margin-top:36px; padding:26px 28px; border-radius:var(--r-card); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1) }
.hours-panel .status{ background:rgba(255,255,255,.08); border-color:transparent; color:var(--band-ink) }
.hours-panel .status.is-open .dot{ background:var(--band-accent); box-shadow:0 0 0 4px rgba(158,211,192,.2) }
.hours{ width:100%; border-collapse:collapse; margin:18px 0 6px }
.hours th, .hours td{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12) }
.hours th{ text-align:left; font-weight:500; color:var(--band-ink-2) }
.hours td{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums }
.hours tr.now th, .hours tr.now td{ color:var(--band-accent) }
.hours-foot{ font-size:.92rem; color:var(--band-ink-2); margin-top:12px }

.clinics{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.clinic{ background:var(--surface); color:var(--ink); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column }
.clinic-map{ position:relative; height:150px; background:var(--mint); color:var(--primary) }
.clinic-map > svg{ position:absolute; inset:0; width:100%; height:100%; stroke:currentColor; opacity:.16; fill:none }
.clinic-pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:48px; height:48px; border-radius:50%; background:var(--primary);
  display:grid; place-items:center; box-shadow:0 0 0 8px color-mix(in srgb, var(--primary) 16%, transparent);
}
.clinic-pin svg{ width:22px; height:22px; fill:none; stroke:var(--on-primary); stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.clinic-body{ padding:26px 26px 28px; display:flex; flex-direction:column; align-items:flex-start; flex:1 }
.band-dark .clinic .label{ color:var(--primary) }
.clinic-body h3{ margin:8px 0 10px }
.clinic-body address{ color:var(--ink-2); font-size:.96rem; margin-bottom:24px; flex:1 }

/* ---------- faq ---------- */
.faq-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px, 6vw, 80px); align-items:start }
.faq-layout .section-head{ margin-bottom:0; position:sticky; top:120px }
.faq details{ border-bottom:1px solid var(--line) }
.faq details:first-child{ border-top:1px solid var(--line) }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 0; cursor:pointer; list-style:none;
  font-size:1.08rem; font-weight:600;
}
.faq summary::-webkit-details-marker{ display:none }
.faq-icon{ position:relative; width:32px; height:32px; flex:none; border-radius:50%; border:1px solid var(--line); transition:background-color .2s, border-color .2s }
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px;
  background:var(--primary); transform:translate(-50%, -50%); transition:transform .25s;
}
.faq-icon::after{ transform:translate(-50%, -50%) rotate(90deg) }
.faq details[open] .faq-icon{ background:var(--primary); border-color:var(--primary) }
.faq details[open] .faq-icon::before, .faq details[open] .faq-icon::after{ background:var(--on-primary) }
.faq details[open] .faq-icon::after{ transform:translate(-50%, -50%) rotate(0deg) }
.faq details p{ padding:0 56px 24px 0; color:var(--ink-2) }

/* ---------- closing ---------- */
.closing-wrap{ padding-top:0 }
.closing{
  background:var(--sand); border-radius:28px; text-align:center;
  padding:clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px);
}
.closing p{ max-width:36em; margin:18px auto 0; color:var(--ink-2); font-size:1.1rem }
.closing-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px }

/* ---------- footer ---------- */
.site-footer{ background:var(--band); color:var(--band-ink-2); font-size:.95rem }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-top:72px; padding-bottom:48px }
.footer-about .brand-name{ color:var(--band-ink); display:block; margin-bottom:12px }
.footer-about p{ max-width:26em }
.site-footer h4{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--band-accent); margin-bottom:16px }
.site-footer li{ margin-bottom:9px }
.site-footer a{ text-decoration:none; transition:color .2s }
.site-footer a:hover{ color:var(--band-ink) }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px; padding-bottom:32px; font-size:.86rem;
}

/* ---------- Marathi ----------
   Devanagari has no italics or capitals, and letter-spacing breaks
   the headline stroke (shirorekha), so those treatments are dropped;
   headings get extra line height so matras don't collide. */
html[lang="mr"] h1, html[lang="mr"] h2, html[lang="mr"] h3{ letter-spacing:0; line-height:1.3 }
html[lang="mr"] h1{ font-weight:500; font-size:clamp(2.3rem, 4.6vw, 3.8rem) }
html[lang="mr"] h2, html[lang="mr"] h3{ font-weight:500 }
html[lang="mr"] h1 em{ font-style:normal }
html[lang="mr"] .label, html[lang="mr"] .site-footer h4, html[lang="mr"] .service-note{ letter-spacing:0; font-size:.88rem }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .site-nav{ gap:22px }
  .header-row{ gap:20px }
}
@media (max-width:980px){
  .menu-btn{ display:inline-flex }
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; margin:0; padding:8px var(--gutter) 18px;
    background:var(--canvas); border-bottom:1px solid var(--line);
  }
  .site-header.nav-open .site-nav{ display:flex }
  .site-nav a{ padding:13px 0; font-size:1.05rem; border-bottom:1px solid var(--line) }
  .site-nav a:last-child{ border-bottom:0 }
  .header-tools{ margin-left:auto }

  .hero{ grid-template-columns:1fr; min-height:0 }
  .hero-inner{ max-width:none; margin:0; padding:52px var(--gutter) 56px }
  .hero-photo{ aspect-ratio:16 / 10; min-height:0 }

  .systems{ grid-template-columns:1fr }
  .services{ grid-template-columns:1fr 1fr }
  .locations, .faq-layout{ grid-template-columns:1fr }
  .faq-layout .section-head{ position:static }
  .footer-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:720px){
  .header-cta, .brand-sub{ display:none }
  .header-row{ height:68px }
  .trust-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
  .doctors, .services, .clinics{ grid-template-columns:1fr }
  .service-wide{ grid-column:auto }
  .card{ padding:28px 24px }
  .faq details p{ padding-right:0 }
}
@media (max-width:420px){
  .header-row{ gap:12px }
  .header-tools{ gap:6px }
  .tool-btn{ height:38px; min-width:38px }
  .lang-btn{ padding:0 12px }
  .brand{ gap:9px }
  .brand-mark{ width:32px; height:32px }
  .brand-name{ font-size:1.3rem }
  .trust-row{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr }
  .hero-actions .pill{ width:100% }
}

@media print{
  .announce, .site-header, .hero-photo, .closing-actions{ display:none }
  .band-dark, .site-footer{ background:none; color:var(--ink) }
}