/* ============================================================
   CancerHomeCare — Design System
   Apple-inspired: quiet neutrals, one teal accent, hairline
   dividers instead of boxes-on-boxes, generous but disciplined
   spacing, restrained motion.
   ============================================================ */

:root{
  --ink:#1d1d1f;
  --ink-soft:#48484c;
  --muted:#6e6e73;
  --faint:#86868b;
  --paper:#ffffff;
  --paper-alt:#f7f7f9;
  --line:#e4e4e7;
  --line-soft:#ececee;
  --teal:#0f6b5c;
  --teal-deep:#0b4f44;
  --teal-tint:#e7f2ef;
  --teal-tint-2:#f1f8f6;
  --amber:#c47a2c;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.14);
  --shadow-nav:0 1px 0 rgba(0,0,0,.06), 0 12px 28px -18px rgba(0,0,0,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1120px;
}

@media (prefers-color-scheme: dark){
  /* Reserved for future dark mode; site currently ships light by design (medical trust cue). */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
h1{ font-size:clamp(30px,4.4vw,48px); line-height:1.08; letter-spacing:-.02em; }
h2{ font-size:clamp(24px,3vw,34px); line-height:1.15; letter-spacing:-.015em; }
h3{ font-size:19px; line-height:1.3; }
p{ margin:0; color:var(--ink-soft); }
.lede{ font-size:18px; line-height:1.55; color:var(--ink-soft); max-width:62ch; }
.eyebrow{ font-size:14px; color:var(--teal); font-weight:600; }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--teal-deep); color:#eafbf5;
  font-size:13px;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; padding:8px 24px; gap:12px;}
.topbar a{ color:#eafbf5; display:inline-flex; align-items:center; gap:6px; }
.topbar .tel{ font-weight:600; }
.topbar .avail{ opacity:.85; }

/* ---------- Header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:24px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px; color:var(--ink); white-space:nowrap; }
.brand .mark{ width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 3px 8px -3px rgba(15,107,92,.55); }
.brand .mark svg{ width:17px; height:17px; stroke:#fff; }
.brand small{ display:block; font-weight:400; font-size:11px; color:var(--muted); letter-spacing:.01em; }

nav.primary{ display:flex; align-items:center; gap:2px; }
nav.primary > ul{ display:flex; align-items:center; gap:1px; }
nav.primary > ul > li{ position:relative; }
nav.primary > ul > li > a, .nav-btn{
  position:relative;
  display:flex; align-items:center; gap:5px;
  padding:9px 13px; border-radius:8px; font-size:14.5px; color:var(--ink-soft);
  transition:background .15s var(--ease), color .15s var(--ease);
  cursor:pointer; background:none; border:none;
}
nav.primary > ul > li > a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px; height:2px; border-radius:2px;
  background:var(--teal); transform:scaleX(0); transition:transform .18s var(--ease);
}
nav.primary > ul > li > a.active::after{ transform:scaleX(1); }
nav.primary > ul > li > a.active{ color:var(--ink); font-weight:600; }
nav.primary > ul > li > a:hover, .nav-btn:hover, .nav-btn[aria-expanded="true"]{ background:var(--paper-alt); color:var(--ink); }
.nav-btn svg.chev{ width:11px; height:11px; transition:transform .18s var(--ease); }
.nav-btn[aria-expanded="true"] svg.chev{ transform:rotate(180deg); }

/* Dropdown: padding bridge (::before) keeps hover alive across the gap so it doesn't flicker */
.has-dropdown{ padding-bottom:14px; margin-bottom:-14px; }
.dropdown{
  position:absolute; top:calc(100% + 2px); left:50%; transform:translateX(-50%) translateY(4px);
  width:620px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-nav);
  padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index:90;
}
.has-dropdown.open .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dropdown a{
  display:flex; align-items:flex-start; gap:11px; padding:9px 10px; border-radius:9px;
  transition:background .13s var(--ease);
}
.dropdown a:hover{ background:var(--teal-tint-2); }
.dropdown .ic{ width:32px; height:32px; border-radius:8px; background:var(--teal-tint); display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.dropdown .ic svg{ width:17px; height:17px; stroke:var(--teal); }
.dropdown .label{ font-size:13.5px; color:var(--ink); font-weight:500; line-height:1.3; }
.dropdown .sub{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.dropdown-foot{ grid-column:1/-1; border-top:1px solid var(--line-soft); margin-top:6px; padding-top:10px; display:flex; justify-content:space-between; align-items:center; }
.dropdown-foot a{ font-size:13px; color:var(--teal); font-weight:600; padding:4px 6px; }

.nav-cta{ display:flex; align-items:center; gap:8px; }
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:10px 18px; border-radius:980px; font-size:14.5px; font-weight:600;
  transition:transform .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease);
  border:1px solid transparent; white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--paper-alt); }
.btn-sm{ padding:8px 14px; font-size:13.5px; }
.btn svg{ width:15px; height:15px; }

/* ---------- Animated "Free Second Opinion" pill — the one deliberately
   eye-catching element on the page; everything else stays quiet ---------- */
.btn-pulse{
  position:relative; background:var(--amber); color:#fff; overflow:visible;
}
.btn-pulse:hover{ background:#a9691f; }
.btn-pulse::before{
  content:""; position:absolute; inset:0; border-radius:980px;
  border:1.5px solid var(--amber); animation:pulse-ring 2.2s var(--ease) infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ transform:scale(1.35); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .btn-pulse::before{ animation:none; } }

/* ---------- Floating WhatsApp button ---------- */
.fab-wa{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(11,79,68,.55);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.92);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.fab-wa.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.fab-wa:hover{ background:var(--teal-deep); }
.fab-wa svg{ width:26px; height:26px; }
.fab-wa::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--teal);
  animation:pulse-ring 2.4s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce){ .fab-wa::after{ animation:none; } }
@media (max-width:760px){ .fab-wa{ width:50px; height:50px; right:16px; bottom:16px; } .fab-wa svg{ width:23px; height:23px; } }

/* ---------- Stats strip ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.stat-cell{ padding:22px 20px; border-right:1px solid var(--line); }
.stat-cell:last-child{ border-right:none; }
.stat-cell .num{ font-size:26px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.stat-cell .lbl{ font-size:13px; color:var(--muted); margin-top:3px; }

.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle svg{ width:22px; height:22px; }

/* ---------- Section rhythm: fine-line dividers, not boxes-in-boxes ---------- */
section{ padding:48px 0; }
section + section{ border-top:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:28px; }
.section-head .eyebrow{ display:block; margin-bottom:7px; }
.section-head h2{ margin-bottom:8px; }

/* ---------- Hero ---------- */
.hero{ padding:36px 0 0; border-top:none; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.hero-copy .eyebrow{ display:inline-flex; align-items:center; gap:6px; background:var(--teal-tint); color:var(--teal-deep); padding:6px 12px; border-radius:980px; font-size:13px; margin-bottom:16px; }
.hero-copy p.lede{ margin-top:14px; }
.hero-actions{ display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap; }
.hero-actions .tel-link{ font-size:14.5px; color:var(--ink-soft); font-weight:600; }
.hero-flags{ display:flex; margin-top:24px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:18px; }
.hero-flags div{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); padding:2px 20px 2px 0; margin-right:20px; border-right:1px solid var(--line); }
.hero-flags div:last-child{ border-right:none; margin-right:0; }
.hero-flags svg{ width:16px; height:16px; stroke:var(--teal); flex:none; }

/* Hero slider */
.slider{ position:relative; aspect-ratio:5/4.3; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--line); }
.slide{
  position:absolute; inset:0; opacity:0; transform:scale(1.02);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; color:#fff;
}
.slide.active{ opacity:1; transform:scale(1); z-index:2; }
.slide .art{ position:absolute; inset:0; z-index:-1; }
.slide .art svg{ width:100%; height:100%; }
.slide .slide-cap{ position:relative; z-index:1; }
.slide .slide-cap .tag{ font-size:12.5px; opacity:.9; margin-bottom:4px; display:block; font-weight:600; letter-spacing:.01em; }
.slide .slide-cap .line{ font-size:20px; font-weight:600; letter-spacing:-.01em; }
.slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%); z-index:0; }
.slider-dots{ position:absolute; bottom:16px; right:20px; z-index:3; display:flex; gap:6px; }
.slider-dots button{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); border:none; padding:0; cursor:pointer; transition:width .25s var(--ease), background .25s var(--ease); }
.slider-dots button.active{ width:18px; border-radius:4px; background:#fff; }

/* ---------- Fine-line grid cards (services, features) ---------- */
.grid-fine{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; background:var(--paper); }
.grid-fine.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid-fine.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid-fine > *{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.grid-fine > *:nth-child(3n){ border-right:none; }
.grid-fine.cols-2 > *:nth-child(2n){ border-right:none; }
.grid-fine.cols-4 > *:nth-child(4n){ border-right:none; }
.cell{ padding:21px; transition:background .16s var(--ease); }
a.cell:hover{ background:var(--paper-alt); }
.cell .ic{ width:38px; height:38px; border-radius:10px; background:var(--teal-tint); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.cell .ic svg{ width:19px; height:19px; stroke:var(--teal); }
.cell h3{ margin-bottom:7px; }
.cell p{ font-size:14.5px; }
.cell .more{ display:inline-flex; align-items:center; gap:5px; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--teal); }
.cell .more svg{ width:13px; height:13px; }

/* ---------- Card (contained box) — used sparingly, per-brief request ---------- */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:22px 24px; }
.card + .card{ margin-top:14px; }

/* ---------- Steps ---------- */
.steps{ counter-reset:step; border-top:1px solid var(--line); }
.step{ display:grid; grid-template-columns:56px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); align-items:start; }
.step .num{ counter-increment:step; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--teal); }
.step .num::before{ content: counter(step); }
.step h3{ margin-bottom:5px; }
.step p{ font-size:14.5px; }

/* ---------- Why-us mini grid ---------- */
.why-item{ padding:22px; }
.why-item .ic{ width:34px; height:34px; border-radius:9px; background:var(--teal-tint); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.why-item .ic svg{ width:17px; height:17px; stroke:var(--teal); }
.why-item h3{ font-size:16.5px; margin-bottom:6px; }
.why-item p{ font-size:14px; }

/* ---------- Conditions chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border:1px solid var(--line); border-radius:980px; font-size:13.5px; color:var(--ink-soft); background:var(--paper); }
.chip svg{ width:13px; height:13px; stroke:var(--teal); }

/* ---------- Testimonials ---------- */
.testi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.testi{ padding:22px; border-right:1px solid var(--line); }
.testi:last-child{ border-right:none; }
.testi .stars{ color:var(--amber); font-size:13px; letter-spacing:2px; margin-bottom:12px; }
.testi p{ font-size:14.5px; color:var(--ink-soft); }
.testi footer{ margin-top:14px; font-size:13px; color:var(--muted); font-weight:500; }

/* ---------- Areas ---------- */
.area-list{ display:flex; flex-wrap:wrap; gap:8px; }
.area-list a{ padding:8px 14px; border:1px solid var(--line); border-radius:980px; font-size:13.5px; color:var(--ink-soft); transition:border-color .15s, color .15s; }
.area-list a:hover{ border-color:var(--teal); color:var(--teal-deep); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--teal-deep); color:#fff; border-radius:var(--radius-l); padding:32px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-band h2{ color:#fff; font-size:26px; }
.cta-band p{ color:#cfeae3; margin-top:6px; }
.cta-band .btn-primary{ background:#fff; color:var(--teal-deep); }
.cta-band .btn-primary:hover{ background:#eafbf5; }

/* ---------- Footer ---------- */
footer.site{ border-top:1px solid var(--line); background:var(--paper-alt); padding:40px 0 22px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding-bottom:28px; }
.foot-brand p{ font-size:13.5px; margin-top:12px; max-width:34ch; }
.foot-col h4{ font-size:13px; color:var(--muted); margin-bottom:14px; font-weight:600; }
.foot-col ul{ display:flex; flex-direction:column; gap:10px; }
.foot-col a{ font-size:13.5px; color:var(--ink-soft); }
.foot-col a:hover{ color:var(--teal); }
.foot-addr{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:9px; margin-top:10px; }
.foot-addr svg{ width:15px; height:15px; stroke:var(--muted); flex:none; margin-top:2px; }
.foot-bottom{ border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--faint); }
.foot-disclaimer{ font-size:12px; color:var(--faint); max-width:900px; margin-top:14px; line-height:1.6; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding:32px 0 32px; }
.page-hero .crumb{ font-size:13px; color:var(--muted); margin-bottom:14px; display:flex; gap:6px; align-items:center; }
.page-hero .crumb a:hover{ color:var(--teal); }
.page-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.page-hero .ic-badge{ width:52px; height:52px; border-radius:14px; background:var(--teal-tint); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.page-hero .ic-badge svg{ width:26px; height:26px; stroke:var(--teal); }
.page-hero-art{ border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3.2; box-shadow:var(--shadow-card); }
.page-hero-art svg{ width:100%; height:100%; }

/* ---------- FAQ accordion ---------- */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 2px; background:none; border:none; cursor:pointer; }
.faq-q span{ font-size:15.5px; font-weight:500; color:var(--ink); }
.faq-q svg{ width:16px; height:16px; flex:none; transition:transform .2s var(--ease); color:var(--muted); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); color:var(--teal); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s var(--ease); }
.faq-a p{ padding:0 2px 20px; font-size:14.5px; max-width:70ch; }

/* ---------- About page ---------- */
.heading-box{ border:1px solid var(--line); border-radius:var(--radius-l); padding:28px 32px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; background:linear-gradient(180deg,var(--teal-tint-2),var(--paper)); }
.heading-box-icons{ display:flex; gap:10px; }
.heading-box-icons .mini{ width:52px; height:52px; border-radius:12px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.heading-box-icons .mini svg{ width:24px; height:24px; stroke:var(--teal); }
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }

/* ---------- Areas table — compact one-after-another list ---------- */
.area-table{ border-top:1px solid var(--line); }
.area-row{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:15px 4px; border-bottom:1px solid var(--line);
  transition:background .13s var(--ease);
}
.area-row:hover{ background:var(--paper-alt); }
.area-row .name{ font-size:15px; font-weight:600; color:var(--ink); width:190px; flex:none; display:flex; align-items:center; gap:10px; }
.area-row .name svg{ width:15px; height:15px; stroke:var(--teal); flex:none; }
.area-row .desc{ font-size:14px; color:var(--muted); flex:1; }
.area-row .go{ width:15px; height:15px; stroke:var(--faint); flex:none; }
.mt-56{ margin-top:56px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.stack{ display:flex; flex-direction:column; gap:14px; }
.rowline{ display:flex; align-items:flex-start; gap:10px; padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.rowline svg{ width:16px; height:16px; stroke:var(--teal); flex:none; margin-top:3px; }
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Blog: listing cards ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.blog-card{ display:flex; flex-direction:column; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .15s var(--ease); }
.blog-grid > .blog-card:nth-child(3n){ border-right:none; }
.blog-card:hover{ background:var(--paper-alt); }
.blog-card-art{ aspect-ratio:16/9; position:relative; overflow:hidden; }
.blog-card-art svg{ width:100%; height:100%; }
.blog-card-body{ padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; }
.blog-tag{ display:inline-flex; align-self:flex-start; font-size:12px; font-weight:600; color:var(--teal-deep); background:var(--teal-tint); padding:4px 10px; border-radius:980px; margin-bottom:12px; }
.blog-card h3{ font-size:16.5px; line-height:1.35; margin-bottom:8px; }
.blog-card p{ font-size:13.5px; color:var(--muted); flex:1; }
.blog-meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--faint); margin-top:14px; }
.blog-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--faint); }

/* ---------- Blog: pagination ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:32px; }
.pagination a, .pagination span{ min-width:36px; height:36px; padding:0 6px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13.5px; color:var(--ink-soft); border:1px solid transparent; }
.pagination a:hover{ background:var(--paper-alt); }
.pagination a.current, .pagination span.current{ border-color:var(--teal); color:var(--teal-deep); font-weight:600; }
.pagination a.nav-arrow{ color:var(--teal-deep); font-weight:600; }

/* ---------- Blog: article layout ---------- */
.article-layout{ display:grid; grid-template-columns:1fr 300px; gap:52px; align-items:start; }
.article-meta-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-bottom:16px; }
.article-meta-row .dot{ width:3px; height:3px; border-radius:50%; background:var(--faint); }
.article-hero-art{ border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/8; margin:28px 0 8px; }
.article-hero-art svg{ width:100%; height:100%; }
.article-body{ max-width:70ch; }
.article-body h2{ font-size:22px; margin:36px 0 14px; letter-spacing:-.01em; }
.article-body p{ font-size:16px; line-height:1.75; color:var(--ink-soft); margin-bottom:18px; }
.article-body ul{ margin:0 0 18px; padding-left:20px; list-style:disc; }
.article-body li{ font-size:16px; line-height:1.7; color:var(--ink-soft); margin-bottom:6px; }

/* ---------- Blog: share row ---------- */
.share-row{ display:flex; align-items:center; gap:8px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:28px 0; flex-wrap:wrap; }
.share-row .lbl{ font-size:13px; color:var(--muted); font-weight:600; margin-right:4px; }
.share-btn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s; flex:none; }
.share-btn:hover{ background:var(--paper-alt); border-color:var(--teal); }
.share-btn svg{ width:15px; height:15px; stroke:var(--ink-soft); }
.share-btn.copy-btn{ position:relative; }
.share-btn.copy-btn .copied-tip{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:11.5px; padding:4px 9px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s var(--ease); }
.share-btn.copy-btn.copied .copied-tip{ opacity:1; }

/* ---------- Blog: sidebar ---------- */
.sidebar-box{ border:1px solid var(--line); border-radius:var(--radius-m); padding:22px; }
.sidebar-box + .sidebar-box{ margin-top:20px; }
.sidebar-box h4{ font-size:13px; text-transform:none; color:var(--muted); font-weight:600; margin-bottom:14px; }
.sidebar-post{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.sidebar-post:last-child{ border-bottom:none; padding-bottom:0; }
.sidebar-post:first-child{ padding-top:0; }
.sidebar-post .thumb{ width:56px; height:56px; border-radius:9px; flex:none; overflow:hidden; }
.sidebar-post .thumb svg{ width:100%; height:100%; }
.sidebar-post .meta{ font-size:12.5px; }
.sidebar-post .meta a{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; display:block; margin-bottom:4px; }
.sidebar-post .meta .cat{ font-size:11.5px; color:var(--teal-deep); }
.sidebar-cta p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; }

/* ---------- Blog: similar-topics carousel ---------- */
.carousel-track{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.carousel-track::-webkit-scrollbar{ height:6px; }
.carousel-track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.carousel-card{ flex:none; width:270px; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; scroll-snap-align:start; transition:border-color .15s; }
.carousel-card:hover{ border-color:var(--teal); }
.carousel-card .art{ aspect-ratio:16/9; }
.carousel-card .art svg{ width:100%; height:100%; }
.carousel-card .body{ padding:16px 18px 18px; }
.carousel-card h3{ font-size:14.5px; line-height:1.35; margin-bottom:6px; }
.carousel-card .meta{ font-size:12px; color:var(--muted); }

/* ---------- Dropdown: pure-CSS hover fallback ----------
   Works even if JS hasn't run yet / fails to load — belt & braces
   alongside the JS-driven .open class used for click/touch/focus. */
@media (hover:hover) and (pointer:fine){
  .has-dropdown:hover .dropdown{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
}

.nav-quick{ display:none; }
/* ---------- Responsive ---------- */
@media (max-width: 1180px){
  .nav-row{ gap:14px; }
  nav.primary > ul > li > a, .nav-btn{ padding:9px 10px; font-size:14px; }
  .nav-cta{ gap:6px; }
  .btn-sm{ padding:8px 12px; font-size:13px; }
}
@media (max-width: 980px){
  .hero-grid, .page-hero-grid{ grid-template-columns:1fr; }
  .grid-fine{ grid-template-columns:repeat(2,1fr) !important; }
  .grid-fine > *:nth-child(3n){ border-right:1px solid var(--line); }
  .grid-fine > *:nth-child(2n){ border-right:none; }
  .testi-row{ grid-template-columns:1fr; }
  .testi{ border-right:none; border-bottom:1px solid var(--line); }
  .testi:last-child{ border-bottom:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .stat-cell:nth-child(2){ border-right:none; }
  .article-layout{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .blog-grid > .blog-card:nth-child(3n){ border-right:1px solid var(--line); }
  .blog-grid > .blog-card:nth-child(2n){ border-right:none; }
}

/* Below this, the inline nav genuinely can't fit five links + three
   buttons on one row without squeezing/overlapping — collapse to the
   off-canvas menu instead. This is the ONE breakpoint that switches
   the header from inline to off-canvas; everything nav-related lives
   here so desktop and "in-between" laptop widths behave identically. */
@media (max-width: 1030px){
  /* backdrop-filter creates a containing block for fixed descendants,
     which breaks viewport-relative positioning of the off-canvas panel. */
  header.site{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.98); }

  nav.primary{ position:fixed; top:64px; left:0; right:0; height:calc(100vh - 64px); height:calc(100dvh - 64px); z-index:70; background:var(--paper); flex-direction:column; align-items:stretch; padding:16px; overflow-y:auto; transform:translateX(100%); transition:transform .25s var(--ease); border-top:1px solid var(--line); }
  nav.primary.open{ transform:translateX(0); }
  nav.primary > ul{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  nav.primary > ul > li{ border-bottom:1px solid var(--line-soft); }
  nav.primary > ul > li > a{ padding:14px 4px; font-size:15.5px; }
  nav.primary > ul > li > a::after{ display:none; }

  .dropdown{ position:static; width:auto; transform:none; opacity:1; visibility:visible; pointer-events:auto; box-shadow:none; border:none; display:none; grid-template-columns:1fr; padding:0 0 10px; }
  .has-dropdown.open .dropdown{ display:grid; transform:none; }
  .has-dropdown{ padding-bottom:0; margin-bottom:0; }
  .nav-btn{ width:100%; justify-content:space-between; padding:14px 4px; font-size:15.5px; }

  .nav-toggle{ display:block; }
  .nav-cta .btn-pulse span.txt{ display:none; }
  .nav-cta .btn-pulse{ padding:9px; }
  .nav-cta .btn-pulse::before{ border-radius:50%; }

  /* Quick actions pinned inside the off-canvas menu, since the header
     hides Call / Free Second Opinion at this width. */
  .nav-quick{ display:flex; flex-direction:column; gap:10px; padding:16px 4px 6px; }
  .nav-quick .btn{ width:100%; }
}

@media (max-width: 760px){
  .grid-fine{ grid-template-columns:1fr !important; }
  .grid-fine > *{ border-right:none !important; }
  .heading-box{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:24px 16px;}
  .value-grid{ grid-template-columns:1fr 1fr; }
  .area-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .area-row .go{ display:none; }
  .blog-grid{ grid-template-columns:1fr !important; }
  .blog-grid > .blog-card{ border-right:none !important; }
  .carousel-card{ width:240px; }
  section{ padding:32px 0; }
}