/* ==========================================================
   HEALTHY HEART CARDIAC CENTRE
   Clinical calm. Warm paper ground, midnight navy bands,
   one crimson accent used only where the eye must go.
   Serif for authority, sans for instruction.
   ========================================================== */
:root{
  color-scheme:light;

  /* ground — plain white, with the faintest blush to separate bands */
  --paper:#FFFFFF;
  --paper-2:#FEF1F1;
  --card:#FFFFFF;

  /* the deep arterial reds that carry the dark bands */
  --blood:#861018;
  --blood-2:#A0141D;

  /* type — near-black, warm red undertone rather than neutral grey */
  --ink:#1F0B0D;
  --ink-2:#4F2E31;
  --ink-3:#866165;

  /* the working accent */
  --crimson:#C8151F;
  --crimson-hi:#E02A38;
  --on-crimson:#FFF5F4;

  /* booking CTA — deliberately not red, so it separates from the brand colour
     on both the white ground and the blood-red bands */
  --gold:#EBB733;
  --gold-hi:#F7CC55;
  --on-gold:#1F0B0D;

  --ecg-tile:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%2244%22%20viewBox%3D%220%200%20150%2044%22%3E%3Cpath%20d%3D%22M0%2C22%20H46%20C49%2C22%2050%2C13%2053%2C13%20C56%2C13%2057%2C22%2060%2C22%20L64%2C27%20L69%2C4%20L74%2C38%20L79%2C22%20H92%20C99%2C22%20101%2C12%20107%2C12%20C113%2C12%20115%2C22%20121%2C22%20H150%22%20fill%3D%22none%22%20stroke%3D%22%23FF9E9B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --rule:#F6DCDC;
  --rule-soft:#F9ECEC;
  --garnet:#A3131D;

  --shadow-sm:0 1px 2px rgba(60,10,14,.06), 0 2px 8px -4px rgba(60,10,14,.12);
  --shadow:0 1px 2px rgba(60,10,14,.06), 0 22px 50px -28px rgba(60,10,14,.34);
  --radius:14px;
  --radius-lg:22px;
  --display:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --gutter:clamp(18px,4.5vw,56px);
  --maxw:1180px;
}

*{box-sizing:border-box}
/* keyboard focus — the default ring is invisible on pill buttons and dark bands */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--crimson); outline-offset:3px; border-radius:8px;
}
.hero a:focus-visible,#stories a:focus-visible,#stories summary:focus-visible,
.book-card a:focus-visible,footer a:focus-visible{outline-color:#FFD9D6}
.btn:focus-visible{outline-offset:4px}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:400; letter-spacing:-.014em; line-height:1.12}
p{margin:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--body); font-size:11.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--crimson);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--crimson); opacity:.55; flex:none}
section{padding-block:clamp(58px,8vw,104px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-size:15px; font-weight:600; letter-spacing:.005em;
  padding:14px 26px; border-radius:999px; text-decoration:none; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn svg{width:17px; height:17px; flex:none}
.btn-primary{background:var(--crimson); color:var(--on-crimson); box-shadow:0 10px 24px -12px rgba(179,18,27,.75)}
.btn-primary:hover{background:var(--crimson-hi); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(179,18,27,.80)}
.btn-gold{
  background:var(--gold); color:var(--on-gold);
  box-shadow:0 10px 24px -12px rgba(160,116,20,.85);
  font-weight:700;
}
.btn-gold:hover{background:var(--gold-hi); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(160,116,20,.9)}
.btn-gold:focus-visible{outline-color:var(--gold)}
/* on the dark bands it needs no shadow to read, just the fill */
.hero .btn-gold,.book-card .btn-gold,.callbar .btn-gold{box-shadow:0 8px 22px -10px rgba(0,0,0,.5)}
.btn-ghost{border-color:var(--rule); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--ink-3); transform:translateY(-2px)}
.btn-light{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.30)}
.btn-light:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:60;
  /* Opaque on purpose. A backdrop-filter here forces the browser to re-blur
     what is behind the header on every scroll frame, which is what made
     scrolling choppy on phones. A solid fill costs nothing. */
  background:var(--paper);
  border-bottom:1px solid transparent; transition:border-color .3s ease, box-shadow .3s ease;
}
header.stuck{border-bottom-color:var(--rule); box-shadow:0 8px 26px -22px rgba(60,10,14,.7)}
.nav{display:flex; align-items:center; gap:22px; height:70px}
.brandmark{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; min-width:0; overflow:hidden}
/* the real HHCC mark; the drawn heart-pulse below is only a fallback */
.logo{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:50%; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px var(--rule);
}
.logo img{width:100%; height:100%; object-fit:cover}
.logo .pulse{display:none}
.logo.fallback{box-shadow:none; background:transparent}
.logo.fallback .pulse{display:block; width:34px; height:34px; color:var(--crimson)}
.logo-lg{width:52px; height:52px; box-shadow:0 0 0 1px rgba(255,255,255,.28); margin-bottom:14px}
.logo-lg.fallback{box-shadow:none}
.logo-lg.fallback .pulse{width:44px; height:44px; color:#FF9E9B}
.brandmark .pulse{width:34px; height:34px; flex:none; color:var(--crimson)}
/* min-width:0 lets the flex item actually shrink; overflow:hidden stops the
   nowrap brand name from painting straight through the Call button */
.brandmark .brandtext{display:block; min-width:0; overflow:hidden}
.brandmark b{font-family:var(--display); font-size:19px; font-weight:500; letter-spacing:-.02em; display:block; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brandmark span{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); font-weight:600; white-space:nowrap}
.navlinks{display:flex; gap:26px; align-items:center}
.navlinks a{
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-2);
  position:relative; padding-block:4px; transition:color .18s ease;
}
.navlinks a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--crimson); transition:width .22s ease;
}
.navlinks a:hover{color:var(--ink)} .navlinks a:hover::after{width:100%}
.nav .btn{padding:11px 20px; font-size:14px}
@media (max-width:940px){ .navlinks{display:none} }
@media (max-width:360px){ .brandmark .tagline{display:none} }

/* ---------- hero ---------- */
.hero{
  position:relative; color:#FFF4F3; overflow:hidden;
  padding-block:clamp(64px,9vw,112px) clamp(72px,10vw,120px);
  /* depth across the band rather than one flat red */
  background:linear-gradient(158deg,#8E1119 0%,#750F15 42%,#5C0A10 100%);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1100px 580px at 78% 4%, rgba(244,64,74,.44), transparent 60%),
    radial-gradient(820px 560px at 2% 100%, rgba(235,183,51,.15), transparent 64%),
    radial-gradient(700px 480px at 45% 55%, rgba(255,96,96,.13), transparent 70%);
  pointer-events:none;
}
.ecg{position:absolute; left:0; right:0; bottom:6%; height:190px; width:100%; opacity:.16; pointer-events:none}
.ecg path{fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

.hero-grid{position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(34px,5vw,64px); align-items:center}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px} }
.hero .eyebrow{color:#FFB8B4}
.hero .eyebrow::before{background:#FFB8B4}
.hero h1{
  font-size:clamp(38px,5.6vw,62px); margin-top:20px; color:#FFFFFF; letter-spacing:-.028em; line-height:1.04;
}
.hero h1 em{font-style:italic; color:#FF9E9B}
.hero-sub{margin-top:20px; font-size:clamp(16px,1.65vw,18.5px); color:#EFD0CF; max-width:53ch; line-height:1.62}
.hero-cred{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:9px;
}
.hero-cred span{
  font-size:12.5px; font-weight:600; letter-spacing:.04em; padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#F4DAD9;
}
.hero-cta{margin-top:32px; display:flex; flex-wrap:wrap; gap:13px}
.hero-note{margin-top:18px; font-size:13.5px; color:#EAC7C7; display:flex; align-items:center; gap:8px}
.hero-note svg{width:15px;height:15px;flex:none;color:#FF9E9B}

/* hero portrait plate */
.portrait{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/4.6; box-shadow:0 40px 80px -40px rgba(45,5,8,.55);
  background:linear-gradient(150deg,#8C1219,#6B0D12 55%,#4A090C);
  border:1px solid rgba(255,255,255,.1);
}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:center 18%}
/* images paint above their placeholder so the label never shows through on a
   loaded photo — this must hold with JS disabled, hence CSS not script */
.portrait img,.about-photo img,.loc-img img{position:relative; z-index:1}
.portrait .ph{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:rgba(255,255,255,.3); text-align:center; padding:24px;
}
.portrait .ph svg{width:52px;height:52px}
.portrait .ph b{font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.portrait figcaption{
  z-index:2;
  position:absolute; left:0; right:0; bottom:0; padding:56px 24px 20px;
  background:linear-gradient(transparent 0%, rgba(45,5,8,.55) 38%, rgba(30,3,5,.96) 78%);
  color:#fff;
}
.portrait figcaption b{font-family:var(--display); font-size:20px; font-weight:500; display:block; letter-spacing:-.015em}
.portrait figcaption span{font-size:12.5px; color:#EBC7C6; letter-spacing:.02em}
@media (max-width:900px){ .portrait{max-width:340px; margin-inline:auto; aspect-ratio:4/4.3} }

/* ---------- trust strip ---------- */
.trust{background:linear-gradient(180deg,#FFF6F4 0%,#FEECEC 100%); border-block:1px solid var(--rule); padding-block:0}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.trust-grid > div{
  padding:26px 20px; text-align:center; border-right:1px solid var(--rule);
}
.trust-grid > div:last-child{border-right:none}
.trust-grid b{display:block; font-family:var(--display); font-size:clamp(26px,3.4vw,36px); font-weight:500; color:var(--crimson); letter-spacing:-.02em; line-height:1}
.trust-grid span{display:block; margin-top:7px; font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
@media (max-width:760px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid > div:nth-child(2n){border-right:none}
  .trust-grid > div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}

/* ---------- section heads ---------- */
.shead{max-width:62ch; margin-bottom:clamp(34px,4.5vw,52px)}
.shead h2{font-size:clamp(28px,3.9vw,44px); margin-top:16px; letter-spacing:-.024em}
.shead p{margin-top:15px; color:var(--ink-2); font-size:16.5px; line-height:1.68}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:start}
@media (max-width:920px){ .about-grid{grid-template-columns:1fr} }
.about-photo{
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/4.4; position:relative;
  background:linear-gradient(150deg,var(--paper-2),var(--rule-soft));
  border:1px solid var(--rule); box-shadow:var(--shadow); position:sticky; top:96px;
}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;color:var(--ink-3);text-align:center;padding:24px}
.about-photo .ph svg{width:48px;height:48px;opacity:.5}
.about-photo .ph b{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:920px){ .about-photo{position:static; max-width:330px; margin-inline:auto} }

.bio p + p{margin-top:16px}
.bio p{color:var(--ink-2); line-height:1.72; font-size:16.5px}
.bio strong{color:var(--ink); font-weight:600}
.creds{margin-top:34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden}
.cred{background:var(--card); padding:20px 22px}
.cred h2,.cred h3{font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson); margin-bottom:12px}
.cred ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.cred li{font-size:14.5px; color:var(--ink-2); line-height:1.5; padding-left:15px; position:relative}
.cred li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--rule); border:1px solid var(--ink-3); opacity:.6}
.cred li b{color:var(--ink); font-weight:600}

/* ---------- services ---------- */
#services{background:var(--paper-2); border-block:1px solid var(--rule)}
.svc-table{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.svc-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  padding:20px clamp(18px,3vw,30px); border-bottom:1px solid var(--rule-soft);
  transition:background .18s ease;
}
.svc-row:last-child{border-bottom:none}
.svc-row:hover{background:var(--paper)}
.svc-ico{
  width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:linear-gradient(145deg, color-mix(in srgb, var(--crimson) 17%, transparent), color-mix(in srgb, var(--gold) 15%, transparent)); color:var(--crimson);
}
.svc-ico svg{width:20px;height:20px}
.svc-name b{display:block; font-size:16.5px; font-weight:600; color:var(--ink); letter-spacing:-.005em}
.svc-name span{display:block; font-size:14px; color:var(--ink-3); margin-top:3px; line-height:1.5}
.svc-price{font-family:var(--display); font-size:22px; font-weight:500; color:var(--ink); letter-spacing:-.02em; white-space:nowrap}
.svc-price small{font-family:var(--body); font-size:11.5px; font-weight:600; color:var(--ink-3); letter-spacing:.06em; display:block; text-transform:uppercase; margin-top:1px}
@media (max-width:620px){
  .svc-row{grid-template-columns:auto 1fr; row-gap:12px}
  .svc-price{grid-column:2; text-align:left}
  .svc-price small{display:inline; margin-left:6px; text-transform:none; letter-spacing:0}
}
.svc-foot{
  margin-top:20px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  font-size:13.5px; color:var(--ink-3);
}
.svc-foot p{max-width:62ch; line-height:1.6}

.procedures{margin-top:clamp(40px,5vw,60px)}
.procedures h2,.procedures h3{font-size:clamp(21px,2.5vw,27px); margin-bottom:8px}
.procedures > p{color:var(--ink-2); font-size:15.5px; margin-bottom:22px; max-width:60ch}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chips span{
  font-size:14px; font-weight:500; color:var(--ink-2); background:var(--card);
  border:1px solid var(--rule); padding:8px 15px; border-radius:999px;
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.chips span:hover{border-color:var(--crimson); color:var(--ink); transform:translateY(-1px)}

/* ---------- locations ---------- */
.loc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,30px)}
@media (max-width:860px){ .loc-grid{grid-template-columns:1fr} }
.loc{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.loc:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.loc-img{aspect-ratio:16/9; position:relative; background:linear-gradient(150deg,var(--blood-2),var(--blood)); overflow:hidden}
.loc-img img{width:100%;height:100%;object-fit:cover}
.loc-img .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.32);text-align:center;padding:20px}
.loc-img .ph svg{width:40px;height:40px}
.loc-img .ph b{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.loc-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:rgba(45,5,8,.80); color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.loc-body{padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; flex:1}
.loc-body h2,.loc-body h3{font-size:clamp(22px,2.6vw,27px); letter-spacing:-.02em}
.loc-meta{margin-top:18px; display:flex; flex-direction:column; gap:14px; flex:1}
.loc-line{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); line-height:1.55}
.loc-line svg{width:17px; height:17px; flex:none; color:var(--crimson); margin-top:3px}
.loc-line b{color:var(--ink); font-weight:600}
.hours{
  background:var(--paper-2); border:1px solid var(--rule-soft); border-radius:11px;
  padding:14px 16px; margin-top:2px;
}
.hours-row{display:flex; justify-content:space-between; gap:14px; font-size:14.5px}
.hours-row + .hours-row{margin-top:7px; padding-top:7px; border-top:1px dashed var(--rule)}
.hours-row span:first-child{color:var(--ink-3); font-weight:500}
.hours-row span:last-child{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.hours-row.closed span:last-child{color:var(--ink-3); font-weight:500}
.loc-cta{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap}
.loc-cta .btn{padding:12px 20px; font-size:14px}

/* ---------- testimonials ---------- */
#stories{background:linear-gradient(168deg,#7E1017 0%,#650C12 100%); color:#FFF1F0; border-block:1px solid rgba(255,255,255,.07)}
#stories .shead h2{color:#FFFFFF}
#stories .shead p{color:#EFD0CF}
#stories .eyebrow{color:#FFB8B4} #stories .eyebrow::before{background:#FFB8B4}
.stories{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px}
.story{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.story:hover{background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.2); transform:translateY(-3px)}
.stars{display:flex; gap:3px; color:#E8B44A; margin-bottom:14px}
.stars svg{width:15px;height:15px}
.story p{font-size:15px; line-height:1.68; color:#F0D5D4; flex:1}
.story-for{
  margin-top:16px; font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:#D9A9A9;
}
.story-by{margin-top:14px; padding-top:15px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:11px}
.avatar{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(255,158,155,.18); color:#FF9E9B; font-weight:700; font-size:14px; border:1px solid rgba(255,158,155,.30);
}
.story-by b{display:block; font-size:14.5px; font-weight:600; color:#FFF4F3; font-family:var(--body)}
.story-by span{display:block; font-size:12px; color:#D9A9A9; display:flex; align-items:center; gap:5px}
.story-by span svg{width:11px;height:11px;color:#FF9E9B}
.stories-foot{
  margin-top:26px; font-size:13.5px; color:#D9A9A9; text-align:center; line-height:1.6;
}

/* ---------- faq ---------- */
.faq{max-width:840px; margin-inline:auto}
.faq details{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  margin-bottom:11px; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease;
}
.faq details[open]{border-color:color-mix(in srgb, var(--crimson) 34%, var(--rule)); box-shadow:var(--shadow-sm)}
.faq summary{
  cursor:pointer; list-style:none; padding:19px 24px; display:flex; align-items:center; gap:16px;
  font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; margin-left:auto; flex:none; width:11px; height:11px;
  border-right:2px solid var(--crimson); border-bottom:2px solid var(--crimson);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq .qmark{
  width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(145deg, color-mix(in srgb, var(--crimson) 18%, transparent), color-mix(in srgb, var(--gold) 16%, transparent)); color:var(--crimson);
  font-family:var(--display); font-size:14px; font-weight:600;
}
.faq .ans{padding:0 24px 22px 66px; color:var(--ink-2); font-size:15.5px; line-height:1.7}
.faq .ans p + p{margin-top:12px}
@media (max-width:560px){ .faq .ans{padding-left:24px} }

/* ---------- book cta ---------- */
#book{background:var(--paper-2); border-block:1px solid var(--rule)}
.book-card{
  background:linear-gradient(152deg,#8E1119 0%,#5C0A10 100%); border-radius:var(--radius-lg); padding:clamp(34px,5vw,64px);
  color:#FFF4F3; position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.book-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(680px 380px at 88% 12%, rgba(214,37,44,.40), transparent 64%),
             radial-gradient(520px 340px at 4% 100%, rgba(255,72,72,.22), transparent 68%);
}
.book-inner{position:relative; display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,52px); align-items:center}
@media (max-width:820px){ .book-inner{grid-template-columns:1fr; text-align:center} .book-inner .eyebrow{justify-content:center} }
.book-inner h2{font-size:clamp(28px,3.7vw,42px); color:#FFFFFF; margin-top:16px; letter-spacing:-.024em}
.book-inner > div > p{margin-top:16px; color:#EFD0CF; font-size:16.5px; line-height:1.65; max-width:48ch}
@media (max-width:820px){ .book-inner > div > p{margin-inline:auto} }
.book-actions{display:flex; flex-direction:column; gap:12px}
@media (max-width:820px){ .book-actions{align-items:center} .book-actions .btn{width:100%; max-width:320px} }
.book-actions .btn{padding:16px 28px; font-size:15.5px}
.book-actions .tel{
  text-align:center; font-family:var(--display); font-size:clamp(24px,3vw,31px); color:#FFFFFF;
  letter-spacing:.01em; text-decoration:none; display:block; margin-bottom:4px; font-weight:500;
}
.book-actions .tel:hover{color:#FF9E9B}

/* ---------- footer ---------- */
footer{background:linear-gradient(180deg,#5C0A10 0%,#450509 100%); color:#D9AFAF; padding-block:clamp(44px,6vw,68px) 30px; border-top:1px solid rgba(255,255,255,.07)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; gap:30px} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }
.foot-grid h3{font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#FF9E9B; margin:0 0 14px}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.foot-grid a{color:#E7C3C2; text-decoration:none; font-size:14.5px; transition:color .18s ease;
  display:inline-block; padding-block:4px; min-height:24px}
.foot-grid a:hover{color:#fff}
.foot-brand b{font-family:var(--display); font-size:21px; color:#FFFFFF; font-weight:500; display:block; letter-spacing:-.018em}
.foot-brand p{margin-top:12px; font-size:14.5px; line-height:1.65; color:#D9AFAF; max-width:34ch}
.foot-brand .pulse{width:30px;height:30px;color:#FF9E9B;margin-bottom:12px}
.foot-bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13px; color:#DDB4B4;
}
.foot-bottom a{color:#DDB4B4; text-decoration:none}
.foot-bottom a:hover{color:#FFE3E1}

/* sticky mobile call bar */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:var(--paper);
  border-top:1px solid var(--rule); gap:10px;
}
.callbar .btn{flex:1; padding:13px 14px; font-size:14.5px}
@media (max-width:700px){ .callbar{display:flex} body{padding-bottom:74px} }

/* ==========================================================
   MULTI-PAGE CHROME
   Added when the one-pager was split into separate pages.
   ========================================================== */

/* skip link — first tab stop, hidden until focused */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--crimson); color:var(--on-crimson);
  padding:12px 20px; border-radius:0 0 10px 0; font-weight:600; font-size:15px;
  text-decoration:none;
}
.skip:focus{left:0}

/* current page marker in the main nav */
.navlinks a[aria-current="page"]{color:var(--ink); font-weight:600}
.navlinks a[aria-current="page"]::after{width:100%}

/* --- mobile nav strip ---------------------------------------------------
   A one-pager could hide its nav on phones because every section was a
   scroll away. Separate pages can't: the nav is the only way between them.
   A scrollable strip keeps every link reachable with no toggle state to
   get stuck, and no JS to fail. */
.navstrip{display:none; border-top:1px solid var(--rule-soft); background:var(--paper)}
.navstrip-inner{
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  padding:0 max(10px, env(safe-area-inset-left)) 0 max(10px, env(safe-area-inset-right));
  -webkit-overflow-scrolling:touch;
}
.navstrip-inner::-webkit-scrollbar{display:none}
.navstrip a{
  flex:none; text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-2);
  padding:11px 13px; white-space:nowrap; border-bottom:2.5px solid transparent;
  min-height:44px; display:flex; align-items:center;
}
.navstrip a[aria-current="page"]{color:var(--crimson); font-weight:600; border-bottom-color:var(--crimson)}
@media (max-width:940px){
  /* exactly one nav is ever in the accessibility tree: .navlinks is
     display:none here, .navstrip is display:none above this width. */
  .navstrip{display:block}
  .navlinks{display:none}
}
.nav-call-short{display:none}
@media (max-width:560px){
  .nav-call-full{display:none}
  .nav-call-short{display:inline}
  .nav .btn{padding:11px 16px}
}
/* below this the wordmark cannot fit beside the button — the logo carries it */
/* The clinic name is the most important thing in the header — it shrinks to
   fit rather than disappearing. b has min-width:0 + ellipsis as a last resort. */
@media (max-width:560px){
  .brandmark{gap:9px}
  .logo{width:34px; height:34px}
  .brandmark b{font-size:16px}
  .brandmark .tagline{font-size:9px; letter-spacing:.11em}
}
@media (max-width:400px){
  .brandmark{gap:8px}
  .logo{width:30px; height:30px}
  .brandmark b{font-size:15px}
  .nav{gap:10px}
}

/* --- page banner (subpages) --------------------------------------------- */
.pagehead{
  background:linear-gradient(155deg,#8E1119 0%,#690D13 100%); color:#FFF4F3; position:relative; overflow:hidden;
  padding-block:clamp(38px,6vw,64px);
}
.pagehead::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(760px 340px at 82% 0%, rgba(214,37,44,.34), transparent 62%);
  pointer-events:none;
}
.pagehead .wrap{position:relative}
.pagehead h1{
  font-size:clamp(30px,4.4vw,50px); color:#fff; letter-spacing:-.026em; margin-top:14px; line-height:1.06;
}
.pagehead p{margin-top:15px; color:#EFD0CF; font-size:clamp(15.5px,1.6vw,17.5px); max-width:60ch; line-height:1.62}
.pagehead .eyebrow{color:#FFB8B4}
.pagehead .eyebrow::before{background:#FFB8B4}

/* breadcrumb */
.crumb{display:flex; gap:8px; align-items:center; font-size:13.5px; color:#D9A9A9; margin-bottom:4px}
.crumb a{color:#EFD0CF; text-decoration:none}
.crumb a:hover{color:#fff; text-decoration:underline}
.crumb span{opacity:.6}

/* --- home page teaser blocks ------------------------------------------- */
.teaser-foot{margin-top:clamp(26px,3.5vw,38px); display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.linkmore{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:15px; font-weight:600; color:var(--crimson); padding:8px 0; min-height:24px;
}
.linkmore svg{width:16px; height:16px; transition:transform .18s ease}
.linkmore:hover svg{transform:translateX(3px)}
.linkmore.on-dark{color:#FFB8B4}

/* two-up highlight cards used on the home page */
.hl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:8px}
.hl{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hl:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--crimson) 30%, var(--rule))}
.hl-ico{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--crimson) 17%, transparent), color-mix(in srgb, var(--gold) 15%, transparent)); color:var(--crimson); flex:none;
}
.hl-ico svg{width:21px; height:21px}
.hl h3{font-size:19px; letter-spacing:-.012em; font-family:var(--body); font-weight:600}
.hl p{margin-top:9px; color:var(--ink-2); font-size:15px; line-height:1.62; flex:1}
.hl .linkmore{margin-top:14px}

/* prev/next page pager at the foot of subpages */
.pager{border-top:1px solid var(--rule); margin-top:clamp(40px,6vw,68px); padding-top:26px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between}
.pager a{
  text-decoration:none; color:var(--ink-2); font-size:14.5px; display:flex; flex-direction:column; gap:3px;
  padding:8px 0; min-height:44px; justify-content:center;
}
.pager a span{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.pager a b{font-family:var(--display); font-size:19px; font-weight:500; color:var(--ink); letter-spacing:-.015em}
.pager a:hover b{color:var(--crimson)}
.pager .next{text-align:right; align-items:flex-end}

/* ==========================================================
   LIFELINE STRIP
   A live ECG across the top of every page. Drawn as a repeating
   150x44 background tile rather than a stretched inline SVG, so
   the trace stays 1:1 at any viewport width, and scrolling by
   exactly one tile makes the loop seamless.
   ========================================================== */
.lifeline{
  height:44px; background-color:var(--blood); position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* The trace is a wide strip moved with transform (GPU-composited) rather than
   an animated background-position (which repaints every frame). */
.lifeline-track{
  position:absolute; inset:0;
  background-image:var(--ecg-tile);
  background-repeat:repeat-x;
  background-position:0 50%;
  width:200%;
  animation:lifeline 3.2s linear infinite;
}
.lifeline::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, var(--blood) 0%, transparent 6%, transparent 94%, var(--blood) 100%);
}
@keyframes lifeline{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-150px,0,0)} }

/* a permanently moving band is fatiguing for some people — hold it still */
@media (prefers-reduced-motion:reduce){ .lifeline-track{animation:none} }
@media (max-width:600px){ .lifeline{height:34px} }

/* ==========================================================
   LARGE SCREENS
   Below this the layout was capping at 1180px and simply
   stopping — on a 1920px monitor that left ~370px of dead
   margin each side and type frozen at its clamp ceiling, so
   going fullscreen made the page look smaller, not bigger.
   These tiers let it keep scaling.
   ========================================================== */
@media (min-width:1400px){
  :root{ --maxw:1300px; --gutter:60px; }
  .hero{padding-block:clamp(72px,7vw,120px) clamp(80px,8vw,132px)}
  /* capped so "Expert heart care in" stays on one line — above ~77px it
     wraps and strands "in" on a line of its own */
  .hero h1{font-size:clamp(62px,4.2vw,74px)}
  .hero-grid{grid-template-columns:1.12fr .88fr}
  .hero-sub{font-size:19.5px; max-width:56ch}
  .hero-cred span{font-size:13px}
  .trust-grid > div{padding-block:34px}
  .trust-grid b{font-size:42px}
  .shead h2{font-size:clamp(38px,3.2vw,50px)}
  .pagehead h1{font-size:clamp(44px,3.6vw,58px)}
  .pagehead p{font-size:18px}
  section{padding-block:clamp(76px,6.5vw,120px)}
}

@media (min-width:1700px){
  :root{ --maxw:1400px; --gutter:72px; }
  .hero h1{font-size:74px}
  .trust-grid b{font-size:46px}
}

/* Very wide/ultrawide: stop growing rather than stretch a 20-word line
   across the whole panel — long measures are harder to read, not grander. */
@media (min-width:2200px){
  :root{ --maxw:1480px; }
}


/* ==========================================================
   HOME ABOUT TEASER
   The full-size portrait belongs on the About page. On the home
   page it is an introduction, so it is deliberately smaller —
   it was taking 85% of the screen width on a phone.
   ========================================================== */
#about-teaser .about-photo{max-width:340px}
@media (min-width:921px){
  #about-teaser .about-grid{grid-template-columns:340px 1fr}
}
@media (max-width:920px){
  #about-teaser .about-photo{max-width:240px}
}

/* Balanced sizing and responsive clinic details. */
.hero{padding-block:clamp(40px,5vw,72px)}
.hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr); gap:clamp(28px,4vw,48px)}
.hero h1{font-size:clamp(36px,4.3vw,60px)}
.hero-sub{font-size:clamp(16px,1.4vw,18px)}
.hero-grid .portrait{width:100%; max-width:260px; justify-self:center; aspect-ratio:4/4.6}
.portrait figcaption{padding:44px 18px 16px}
.portrait figcaption span{font-size:12px}
section{padding-block:clamp(44px,5.5vw,80px)}
.pagehead{padding-block:clamp(32px,4vw,52px)}
.clinic-detail{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start}
.hero-grid > *, .loc-grid > *, .about-grid > *{min-width:0}
.btn{max-width:100%; white-space:normal; text-align:center; min-height:44px}
.hours-row{flex-wrap:wrap; column-gap:12px; row-gap:4px}
.crumb{flex-wrap:wrap}
#main, section[id]{scroll-margin-top:125px}
.error-page{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--paper-2)}
.error-page main{max-width:620px; text-align:center; padding:clamp(28px,6vw,60px); background:white; border:1px solid var(--rule); border-radius:22px}
.error-page img{margin:0 auto 24px; border-radius:50%}
.error-page .eyebrow{justify-content:center}
.error-page h1{font-size:clamp(30px,5vw,44px); margin:20px 0}
.error-actions{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:24px}
@media(max-width:1100px){
  .navlinks{display:none}
  .navstrip{display:block}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-grid .portrait{width:min(58%,200px); max-width:200px}
}
@media(max-width:860px){.clinic-detail{grid-template-columns:1fr}}
@media(max-width:600px){
  .hero-cta{gap:10px; margin-top:24px}
  .hero-note{align-items:flex-start}
  .hero-cred{gap:6px}
  .hero-cred span{font-size:12px; padding:6px 10px}
  .stories,.hl-grid,.creds{grid-template-columns:minmax(0,1fr)}
  .callbar .btn{font-size:14px; padding:12px 10px}
  body{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}