/* ===================================================
   ONCURE Home Healthcare — shared stylesheet
   Tokens: navy #0B3B54, teal #12838C, teal-deep #0E4A57,
   paper #F5F8F7, line #DCE7E5, ink #14262C
=================================================== */

:root{
  --navy: #0B3B54;
  --teal: #12838C;
  --teal-deep: #0E4A57;
  --teal-soft: #E4F1F1;
  --paper: #F5F8F7;
  --line: #DCE7E5;
  --ink: #14262C;
  --ink-soft: #4B5D62;
  --white: #FFFFFF;

  --font-display: "Times New Roman", Times, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-script: "Playfair Display", "Georgia", serif;

  --radius: 14px;
  --radius-lg: 26px;
  --shadow: 0 12px 30px -14px rgba(11,59,84,0.28);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -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);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 .4em;
  line-height: 1.14;
  letter-spacing: -0.005em;
}
p{ margin: 0 0 1em; color: var(--ink-soft); }
ul{ margin:0; padding:0; list-style:none; }

.container{
  width: min(1160px, 92%);
  margin-inline: auto;
}

/* ---------- Focus & motion ---------- */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Top utility bar ---------- */
.topbar{
  background: var(--navy);
  color: #DCEEEF;
  font-size: 0.82rem;
  letter-spacing: .02em;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 0;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar a{ color:#DCEEEF; }
.topbar .phone{ font-weight:600; }
.topbar .tags span:not(:last-child)::after{
  content:"•"; margin: 0 .6em; color:#5C8B94;
}

/* ---------- Header / Nav ---------- */
header.site{
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 50;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ width:56px; height:56px; }
.brand .word{
  font-family: "Times New Roman", Times, serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.005em;
  line-height:1;
}
.brand .sub{
  display:block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--teal);
  margin-top: 5px;
}
nav.links{ display:flex; gap: 28px; align-items:center; }
nav.links a{
  font-size: 0.94rem; color: var(--ink); font-weight:500;
  position:relative; padding: 4px 0;
}
nav.links a.active, nav.links a:hover{ color: var(--teal); }
nav.links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--teal); border-radius:2px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--teal); color:#fff; font-weight:600;
  padding: 11px 22px; border-radius: 999px; border:none; cursor:pointer;
  font-size: 0.92rem;
  box-shadow: var(--shadow);
  transition: transform .18s ease, background .18s ease;
}
.btn:hover{ background: var(--teal-deep); transform: translateY(-1px); }
.btn.ghost{
  background: transparent; color: var(--navy); box-shadow:none;
  border: 1.5px solid var(--line);
}
.btn.ghost:hover{ border-color: var(--teal); color: var(--teal); }

.menu-toggle{ display:none; background:none; border:none; cursor:pointer; }

/* ---------- Vitals line (signature divider) ---------- */
.vitals{
  width:100%; height: 46px; overflow: hidden; margin: 0;
  background: linear-gradient(180deg, transparent, var(--teal-soft) 60%, transparent);
}
.vitals svg{ width: 100%; height: 100%; display:block; }
.vitals .trace{
  fill:none; stroke: var(--teal); stroke-width: 2;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: draw 2.6s ease-out forwards;
}
.vitals .drip{
  fill: var(--navy);
  animation: travel 4.5s linear infinite;
  animation-delay: 1s;
  opacity:0;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes travel{
  0%{ offset-distance: 0%; opacity:0; }
  4%{ opacity:1; }
  92%{ opacity:1; }
  100%{ offset-distance: 100%; opacity:0; }
}

/* ---------- Hero ---------- */
.hero{
  padding: 64px 0 40px;
  background:
    radial-gradient(60% 90% at 85% 10%, var(--teal-soft), transparent 60%),
    var(--paper);
}
.hero .grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 0.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--teal-deep); background: var(--teal-soft);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1{ font-size: clamp(2.5rem, 4.6vw, 3.8rem); }
.hero h1 .accent{ color: var(--teal); }
.hero p.lead{ font-size: 1.08rem; max-width: 46ch; }
.hero .cta-row{ display:flex; gap:14px; margin-top: 26px; flex-wrap:wrap; }

.hero-card{
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow:hidden; border: 1px solid var(--line);
}
.hero-card .photo{ height: 260px; background-size:cover; background-position:center; }
.hero-card .price{
  padding: 22px 26px; display:flex; align-items:baseline; justify-content:space-between;
  background: var(--teal-deep); color:#fff;
}
.hero-card .price .amt{ font-family: var(--font-display); font-size: 2.4rem; }
.hero-card .price .cur{ font-size:1rem; opacity:.85; margin-left:4px; }
.hero-card .price .label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }

/* ---------- Trio cards (influenza-style 3up) ---------- */
.trio{
  display:grid; grid-template-columns: repeat(3,1fr); gap:0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; background:#fff; margin-top: 46px;
}
.trio .item{
  padding: 30px 26px; text-align:center; border-left: 1px solid var(--line);
}
.trio .item:first-child{ border-left:none; }
.trio .icon{
  width:56px; height:56px; border-radius:50%; background: var(--teal);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 16px;
  color:#fff;
}
.trio h3{ font-size:1.05rem; }
.trio p{ font-size:.92rem; margin:0; }

/* ---------- Trust strip ---------- */
.trust{
  background: var(--teal-deep); color:#fff; padding: 30px 0;
}
.trust .row{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 24px;
}
.trust .cell{ display:flex; gap:14px; align-items:flex-start; }
.trust .cell svg{ flex:none; width:30px; height:30px; }
.trust h4{ color:#fff; font-size: .95rem; margin:0 0 4px; font-family:var(--font-body); font-weight:700; }
.trust p{ color:#CFE7E8; font-size:.85rem; margin:0; }

/* ---------- Section basics ---------- */
section{ padding: 72px 0; }
.section-head{ max-width: 640px; margin: 0 auto 44px; text-align:center; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head h2{ font-size: clamp(1.9rem,3.2vw,2.5rem); }

/* ---------- Card grids ---------- */
.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.card .icon{
  width:48px; height:48px; border-radius:12px; background: var(--teal-soft); color:var(--teal);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.card h3{ font-size:1.08rem; }
.card p{ font-size:.93rem; }
.card .benefits{ margin-top:14px; }
.card .benefits li{
  font-size: .88rem; color: var(--ink-soft); padding-left: 20px; position:relative; margin-bottom:6px;
}
.card .benefits li::before{
  content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background: var(--teal);
}
.card .tag{
  display:inline-block; background: var(--navy); color:#fff; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:12px;
}

/* ---------- Pricing / packages ---------- */
.price-banner{
  background: var(--navy); color:#fff; border-radius: var(--radius-lg);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding: 22px 30px; margin-bottom: 46px;
}
.price-banner .call{ display:flex; align-items:center; gap:14px; }
.price-banner .call .num{ font-family:var(--font-display); font-size:1.3rem; }
.price-banner .from{ text-align:right; }
.price-banner .from .amt{ font-family:var(--font-display); font-size:1.9rem; color:#8FE1E2; }

.menu-cols{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 34px; }
.menu-group{ margin-bottom: 30px; }
.menu-group h3{
  font-size: .8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--teal-deep);
  border-bottom: 1px solid var(--line); padding-bottom:10px; margin-bottom:16px;
}
.menu-row{
  display:flex; gap:16px; padding: 14px 0; border-bottom: 1px dashed var(--line);
}
.menu-row:last-child{ border-bottom:none; }
.menu-row .ico{
  flex:none; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--teal);
  color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
}
.menu-row h4{ font-family: var(--font-body); font-size:.98rem; color:var(--navy); margin:0 0 2px; font-weight:700; }
.menu-row p{ font-size: .87rem; margin:0; }

.checklist{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 26px 30px;
  align-self: start; position: sticky; top: 96px;
}
.checklist h3{ font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; color:var(--navy); margin-bottom:14px; }
.checklist li{
  font-size:.9rem; color:var(--ink-soft); padding: 7px 0 7px 22px; position:relative;
  border-bottom: 1px solid var(--line);
}
.checklist li:last-child{ border-bottom:none; }
.checklist li::before{ content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:700; }

.disclaimer{
  font-size: .78rem; color: var(--ink-soft); text-align:center; margin-top: 30px;
  border-top: 1px solid var(--line); padding-top: 18px;
}

/* ---------- About page ---------- */
.about-hero{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.script-tag{
  font-family: "Playfair Display", var(--font-script);
  font-style: italic;
  font-weight: 800;
  font-size: 2.7rem;
  color: var(--teal-deep);
  display:block;
  margin-bottom: 10px;
  letter-spacing: 0.005em;
  line-height: 1.1;
}
.values{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:20px; }
.value{ text-align:center; padding: 20px; }
.value .word{
  font-family: var(--font-display); font-size:1.2rem; color: var(--teal-deep);
}
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:44px; text-align:center; }
.stat-row .num{ font-family:var(--font-display); font-size:2.1rem; color:var(--navy); }
.stat-row .lbl{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.03em; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info .row{ display:flex; gap:16px; margin-bottom:22px; }
.contact-info .row .ico{
  flex:none; width:44px; height:44px; border-radius:50%; background: var(--teal-soft); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.contact-info h4{ font-size:1rem; margin:0 0 3px; color:var(--navy); font-family:var(--font-body); font-weight:700; }
.contact-info p{ font-size:.92rem; margin:0; }

form.contact-form{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
form.contact-form label{ display:block; font-size:.82rem; font-weight:600; color:var(--navy); margin-bottom:6px; }
form.contact-form .field{ margin-bottom:18px; }
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%; padding: 11px 14px; border-radius:10px; border:1px solid var(--line);
  font-family: var(--font-body); font-size:.94rem; background: var(--paper);
}
form.contact-form textarea{ min-height: 100px; resize: vertical; }
form.contact-form .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:.8rem; color:var(--ink-soft); margin-top:10px; }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--teal-deep); color:#fff; border-radius: var(--radius-lg);
  padding: 48px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px;
}
.cta-band h2{ color:#fff; font-size:1.7rem; margin:0; }
.cta-band p{ color:#CFE7E8; margin:6px 0 0; }

/* ---------- Footer ---------- */
footer.site{ background: var(--navy); color:#B9D8DA; padding: 54px 0 24px; margin-top: 60px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:36px; }
.footer-grid h4{ color:#fff; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; font-family: var(--font-body); }
.footer-grid a{ display:block; color:#B9D8DA; font-size:.9rem; margin-bottom:9px; }
.footer-grid a:hover{ color:#fff; }
.footer-brand{ display:flex; gap:10px; align-items:center; margin-bottom:14px; }
.footer-brand img{ width:36px; }
.footer-brand .word{ font-family:var(--font-display); font-size:1.25rem; color:#fff; }
.footer-bottom{
  border-top: 1px solid #1F5568; margin-top: 40px; padding-top: 20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:#7FAEB2;
}

/* ---------- Mobile ---------- */
@media (max-width: 920px){
  .hero .grid, .about-hero, .contact-grid, .menu-cols{ grid-template-columns: 1fr; }
  .trio{ grid-template-columns: 1fr; }
  .trio .item{ border-left:none; border-top:1px solid var(--line); }
  .trio .item:first-child{ border-top:none; }
  .trust .row{ grid-template-columns: 1fr 1fr; }
  .cards{ grid-template-columns: 1fr 1fr; }
  .values{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .checklist{ position:static; }
}
@media (max-width: 680px){
  .brand img{ width:40px; height:40px; }
  .brand .word{ font-size: 1.5rem; }
  .brand .sub{ font-size: 0.58rem; }
  nav.links{
    position:fixed; inset: 64px 0 0 0; background:#fff; flex-direction:column;
    padding: 28px; gap: 20px; transform: translateX(100%); transition: transform .25s ease;
  }
  nav.links.open{ transform: translateX(0); }
  .menu-toggle{ display:block; }
  .cards{ grid-template-columns: 1fr; }
  .price-banner{ flex-direction:column; align-items:flex-start; }
  .price-banner .from{ text-align:left; }
  .footer-grid{ grid-template-columns: 1fr; }
  form.contact-form .two{ grid-template-columns: 1fr; }
}