/*
  ENT website — shared stylesheet (example/demo build)
  Mobile-first: base rules target phones; min-width queries layer on
  tablet (>=700px) and desktop (>=1024px) refinements.
*/

:root{
  --bg:#F5FAF9;
  --bg-card:#FFFFFF;
  --bg-alt:#E7F2EF;
  --ink:#1F3330;
  --ink-soft:#5C716D;
  --ink-faint:#8CA39E;
  --line:#D7E9E4;
  --accent:#2E8C86;
  --accent-dark:#1E625D;
  --accent-soft:#D4EEEB;
  --sage:#F0805C;
  --sage-dark:#B54F30;
  --sage-soft:#FCE1D5;
  --footer-bg:#15302B;
  --footer-ink:#EAF3F1;
  --footer-line:#2C4944;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --header-h:72px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height:1.5;
  text-wrap:pretty;
}

h1,h2,h3{
  font-family:"Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}

p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

a{ color:var(--accent-dark); text-decoration:none; }
a:hover{ color:var(--accent); text-decoration:underline; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--accent-dark);
  outline-offset:2px;
}

.placeholder{ color:var(--ink-faint); font-style:italic; }
.eyebrow{
  text-transform:uppercase; letter-spacing:0.08em; font-size:12px; font-weight:700;
  color:var(--accent-dark);
}

.container{ max-width:1180px; margin:0 auto; padding:0 20px; width:100%; }
.section{ padding:48px 0; }
.section-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:32px; max-width:640px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:999px; font-weight:700; font-size:16px;
  white-space:nowrap; cursor:pointer; border:2px solid transparent;
  min-height:48px;
}
.btn svg{ flex-shrink:0; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); color:#fff; text-decoration:none; }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent-dark); text-decoration:none; }
.btn-block{ width:100%; }

.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--radius-sm); font-size:12px; font-weight:700;
  background:var(--accent-soft); color:var(--accent-dark);
}

.icon-wrap{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:var(--radius-md);
  background:var(--accent-soft); color:var(--accent-dark);
}
.icon-wrap.sage{ background:var(--sage-soft); color:var(--sage-dark); }

.card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:var(--header-h); padding:12px 0;
}
.logo{ display:flex; align-items:center; gap:10px; font-family:"Inter", sans-serif; font-weight:700; font-size:18px; }
.logo-mark{
  width:36px; height:36px; border-radius:11px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.header-actions{ display:flex; align-items:center; gap:10px; }
.phone-pill{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-dark); font-weight:700; font-size:13px; white-space:nowrap;
}
.menu-btn{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--bg-card); color:var(--ink); cursor:pointer; padding:0;
}

.site-nav{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:30;
  background:var(--bg);
  padding:0;
  display:none;
  overflow-y:auto;
}
.site-nav.is-open{ display:block; }
.site-nav-inner{ padding-block:8px 28px; width:100%; }
.site-nav ul{ display:flex; flex-direction:column; gap:2px; }
.site-nav a{
  display:block; padding:14px 4px; font-weight:600; font-size:17px; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.site-nav a[aria-current="page"]{ color:var(--accent-dark); }
.site-nav .nav-phone{ margin-top:20px; }

/* ---------- hero ---------- */
.hero-grid{ display:flex; flex-direction:column; gap:32px; }
.hero-copy{ display:flex; flex-direction:column; gap:18px; }
.hero-copy h1{ font-size:30px; line-height:1.18; }
.hero-copy .lede{ font-size:16px; color:var(--ink-soft); line-height:1.6; }
.hero-cta-row{ display:flex; flex-direction:column; gap:14px; align-items:stretch; }
.referral-note{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft); }
.referral-note .icon-wrap{ width:32px; height:32px; border-radius:var(--radius-sm); }
.hero-visual{ display:flex; align-items:center; justify-content:center; }
.hero-blob{
  position:relative; width:100%; max-width:340px; aspect-ratio:1/1;
  border-radius:38% 62% 60% 40% / 46% 40% 60% 54%;
  background:linear-gradient(150deg, var(--accent-soft), var(--sage-soft));
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
}
.hero-blob-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-faint); text-align:center; padding:20px; }

/* ---------- page hero (secondary pages) ---------- */
.page-hero{ padding:40px 0 32px; border-bottom:1px solid var(--line); background:var(--bg-alt); }
.page-hero .eyebrow{ margin-bottom:10px; display:block; }
.page-hero h1{ font-size:28px; margin-bottom:12px; }
.page-hero p{ color:var(--ink-soft); font-size:16px; max-width:640px; line-height:1.6; }

/* ---------- trust strip ---------- */
.trust-strip{ padding:28px 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.trust-item{ display:flex; align-items:center; gap:14px; }
.trust-item span.label{ font-weight:600; font-size:14px; color:var(--ink); }

/* ---------- surgeon ---------- */
.surgeon-grid{ display:flex; flex-direction:column; gap:28px; align-items:flex-start; }
.surgeon-photo{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.avatar-circle{
  width:160px; height:160px; border-radius:50%; background:var(--bg-alt); border:2px dashed var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint);
}
.surgeon-copy{ display:flex; flex-direction:column; gap:14px; }
.surgeon-copy p{ color:var(--ink-soft); line-height:1.7; font-size:15px; }

/* ---------- team page ---------- */
.team-photo-grid{ display:flex; flex-direction:column; gap:24px; }
.team-group-photo{
  border-radius:var(--radius-lg); border:2px dashed var(--line); background:var(--bg-card);
  display:flex; align-items:center; justify-content:center; min-height:220px;
}
.team-group-photo-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-faint); text-align:center; padding:20px; }
.team-photo-copy{ display:flex; flex-direction:column; gap:14px; }
.team-photo-copy p{ font-size:15px; color:var(--ink-soft); line-height:1.65; }
.team-mini-card{ align-items:flex-start; }
.avatar-circle-sm{ width:64px; height:64px; }

/* ---------- grids (conditions / resources) ---------- */
.grid-cards{ display:grid; grid-template-columns:1fr; gap:16px; }
.grid-cards .card{ display:flex; flex-direction:column; gap:12px; }
.grid-cards .card span.label{ font-weight:600; font-size:15px; color:var(--ink); }

/* ---------- steps ---------- */
.steps-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.step-card{ display:flex; flex-direction:column; gap:12px; }
.step-index{ font-family:"Inter", sans-serif; font-weight:700; font-size:13px; color:var(--accent-dark); }
.step-card h3{ font-size:17px; }
.step-card p{ color:var(--ink-soft); font-size:15px; line-height:1.6; }
.phone-only-note{
  display:flex; align-items:flex-start; gap:12px; margin-top:24px; padding:16px 18px;
  border-radius:var(--radius-md); background:var(--bg-alt); border:1px solid var(--line);
}
.phone-only-note p{ font-size:14px; color:var(--ink-soft); }
.phone-only-note strong{ color:var(--ink); }

/* ---------- parents callout ---------- */
.parents-banner{
  background:var(--sage-soft); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:24px;
}
.parents-copy{ display:flex; flex-direction:column; gap:14px; }
.parents-copy p{ color:var(--ink-soft); line-height:1.6; font-size:15px; }

/* ---------- resources ---------- */
.resource-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.resource-card h3{ font-size:16px; line-height:1.4; }
.resource-download{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--accent-dark); margin-top:auto; }

/* ---------- audience chooser ---------- */
.audience-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.audience-card{
  display:flex; align-items:center; gap:16px; color:var(--ink); text-decoration:none;
  transition:border-color 0.15s ease;
}
.audience-card:hover{ border-color:var(--accent); color:var(--ink); text-decoration:none; }
.audience-card .audience-copy{ display:flex; flex-direction:column; gap:2px; }
.audience-card .audience-copy strong{ font-size:16px; }
.audience-card .audience-copy span{ font-size:13px; color:var(--ink-soft); }
.audience-card .chev{ margin-left:auto; flex-shrink:0; color:var(--accent-dark); }

/* ---------- tag variants ---------- */
.tag-muted{ background:var(--bg-alt); color:var(--ink-faint); }

/* ---------- checklist ---------- */
.checklist{ display:flex; flex-direction:column; gap:14px; }
.checklist li{ display:flex; align-items:flex-start; gap:12px; }
.checklist li p{ font-size:15px; color:var(--ink-soft); line-height:1.6; }
.checklist li strong{ color:var(--ink); display:block; margin-bottom:2px; }

/* ---------- faq ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-card); overflow:hidden; }
.faq-item summary{
  cursor:pointer; list-style:none; padding:16px 18px; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ transition:transform 0.15s ease; flex-shrink:0; color:var(--accent-dark); }
.faq-item[open] summary .chev{ transform:rotate(90deg); }
.faq-item .faq-body{ padding:0 18px 18px; color:var(--ink-soft); font-size:14px; line-height:1.65; }

/* ---------- location cards (contact page) ---------- */
.locations-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.location-card{ display:flex; flex-direction:column; gap:16px; }
.location-card h3{ font-size:19px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.location-map{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--bg-alt); }
.location-map iframe{ width:100%; height:100%; border:0; display:block; }
.location-details{ display:flex; flex-direction:column; gap:10px; }
.location-details .addr{ font-size:14px; color:var(--ink-soft); line-height:1.6; }
.location-actions{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; }
.directions-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; }
.phone-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--ink); }
.phone-link svg{ color:var(--accent-dark); flex-shrink:0; }

.hospital-parking{ margin-top:4px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.hospital-parking strong{ font-size:14px; color:var(--ink); }
.hospital-parking ul{ display:flex; flex-direction:column; gap:8px; }
.hospital-parking li{ font-size:13px; color:var(--ink-soft); line-height:1.6; padding-left:16px; position:relative; }
.hospital-parking li::before{ content:"\2013"; position:absolute; left:0; color:var(--accent-dark); font-weight:700; }

/* ---------- contact ---------- */
.contact-grid{ display:flex; flex-direction:column; gap:28px; }
.contact-info{ display:flex; flex-direction:column; gap:20px; }
.contact-row{ display:flex; gap:14px; align-items:flex-start; }
.contact-row div{ display:flex; flex-direction:column; gap:4px; }
.contact-row strong{ font-size:14px; color:var(--ink); }
.contact-row span, .contact-row p{ font-size:14px; color:var(--ink-soft); line-height:1.6; }
.map-placeholder{
  border-radius:var(--radius-lg); border:1px dashed var(--line); background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center; min-height:220px;
}
.map-placeholder-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-faint); }

/* ---------- footer ---------- */
.site-footer{ background:var(--footer-bg); color:var(--footer-ink); }
.footer-top{ display:flex; flex-direction:column; gap:32px; padding:56px 0 32px; }
.footer-brand{ display:flex; flex-direction:column; gap:14px; }
.footer-brand .logo{ color:var(--footer-ink); }
.footer-brand p{ color:#9FC0BA; font-size:14px; line-height:1.6; }
.footer-cols{ display:flex; flex-direction:column; gap:28px; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col strong{ font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:#9FC0BA; }
.footer-col a{ color:var(--footer-ink); font-size:14px; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid var(--footer-line); padding:24px 0 40px; display:flex; flex-direction:column; gap:12px; }
.footer-bottom span{ font-size:13px; color:#6E8C86; }
.mockup-note{ font-size:12px; color:#6E8C86; line-height:1.6; }

/* ==================== tablet (>=700px) ==================== */
@media (min-width:700px){
  .container{ padding:0 32px; }
  .section{ padding:64px 0; }
  .hero-copy h1{ font-size:36px; }
  .hero-copy .lede{ font-size:17px; max-width:520px; }
  .hero-cta-row{ align-items:flex-start; }
  .hero-cta-row .btn{ width:auto; }
  .trust-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .audience-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .steps-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .surgeon-grid{ flex-direction:row; gap:44px; align-items:center; }
  .surgeon-photo{ flex:0 0 220px; width:auto; }
  .avatar-circle{ width:200px; height:200px; }
  .avatar-circle-sm{ width:64px; height:64px; }
  .team-photo-grid{ flex-direction:row; align-items:center; }
  .team-group-photo{ flex:0 0 320px; aspect-ratio:4/3; min-height:0; }
  .team-photo-copy{ flex:1 1 0; }
  .locations-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
  .parents-banner{ flex-direction:row; align-items:center; justify-content:space-between; padding:36px; }
  .contact-grid{ flex-direction:row; gap:44px; align-items:stretch; }
  .contact-info{ flex:1 1 0; }
  .map-placeholder{ flex:1 1 0; }
  .footer-top{ flex-direction:row; justify-content:space-between; gap:40px; flex-wrap:wrap; }
  .footer-brand{ max-width:280px; }
  .footer-cols{ flex-direction:row; gap:48px; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
  .mockup-note{ max-width:520px; }
}

/* ==================== desktop (>=1024px) ==================== */
@media (min-width:1024px){
  .container{ padding:0 40px; }
  .header-row{ gap:24px; }
  .site-nav{ position:static; inset:auto; display:flex !important; width:100%; padding:0; background:var(--bg-alt); overflow:visible; }
  .site-nav-inner{ padding-block:14px; display:flex; align-items:center; justify-content:space-between; }
  .site-nav ul{ flex-direction:row; align-items:center; gap:32px; }
  .site-nav a{ padding:0; border-bottom:none; font-size:15px; font-weight:600; color:var(--ink); }
  .site-nav a:hover{ color:var(--accent-dark); text-decoration:none; }
  .site-nav a[aria-current="page"]{ color:var(--accent-dark); }
  .site-nav .nav-phone{ display:none; }
  .menu-btn{ display:none; }

  .hero-grid{ flex-direction:row; align-items:center; gap:64px; }
  .hero-copy{ flex:1 1 0; min-width:0; }
  .hero-copy h1{ font-size:44px; }
  .hero-visual{ flex:1 1 0; min-width:0; }
  .hero-blob{ max-width:420px; }

  .trust-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .grid-cards.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .grid-cards.cols-6{ grid-template-columns:repeat(3, minmax(0,1fr)); }

  .section-head{ margin-bottom:40px; }
}