/* Life Medical - brand palette from the Life brand guidelines:
   red #EC3E2C, pink #ED67A6, 180deg gradient, #333333 / #888888 / #F2F2F2 */
:root {
  --red: #EC3E2C;
  --pink: #ED67A6;
  --grad: linear-gradient(180deg, #EC3E2C 0%, #ED67A6 100%);
  --ink: #333333;
  --muted: #6b6b6b;
  --grey: #888888;
  --wash: #F2F2F2;
  --white: #ffffff;
  --radius: 18px;
  --wrap: 1120px;
}

*, *::before, *::after { 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;
  font-size: 21px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red); }

.wrap {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding-left: 22px; padding-right: 22px;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
p { margin: 0 0 1.1em; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #e6e6e6;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-top: 14px; padding-bottom: 14px;
}
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { display: block; width: auto; height: 64px; }

.header-call {
  flex: none; gap: 9px; padding: 14px 24px; font-size: 1.12rem;
}
.header-call .icon { width: 21px; height: 21px; }



/* ---------- buttons ---------- */
/* No transparent borders on filled buttons: the background paints through a
   transparent border and the outer 2px reads as a washed, fuzzy rim. Filled
   buttons carry no border at all, outlined ones carry a real one, and the
   padding is adjusted so both end up exactly the same size. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 20px 32px; border-radius: 999px; font-size: 1.15rem; font-weight: 700;
  text-decoration: none; border: 0; cursor: pointer; line-height: 1.15;
  /* Button labels are short and must never wrap onto a second line. */
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 3px 10px rgba(200,40,28,.26);
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(200,40,28,.30); }
.btn-outline {
  background: #fff; color: var(--red);
  border: 2px solid var(--red); padding: 18px 30px;
}
.btn-outline:hover { background: #fff5f4; }
.btn-white { background: #fff; color: var(--red); box-shadow: 0 3px 10px rgba(0,0,0,.14); }
.btn-big { font-size: 1.6rem; padding: 24px 42px; }
.btn-outline.btn-big { padding: 22px 40px; }

/* ---------- hero ---------- */
.hero { background: var(--wash); padding: 76px 0 68px; }
.hero .eyebrow {
  display: inline-block; background: #fff; color: var(--red); font-weight: 700;
  font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 999px; margin-bottom: 22px;
  box-shadow: inset 0 0 0 1px rgba(236,62,44,.22);
}
.hero h1 { max-width: 15ch; }
.hero .lede { font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--muted); max-width: 34ch; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: 1rem; color: var(--grey); }

.phone-card {
  background: var(--grad); color: #fff; border-radius: var(--radius);
  padding: 38px 32px; text-align: center; box-shadow: 0 6px 20px rgba(200,40,28,.22);
}
.phone-card .label {
  text-transform: uppercase; letter-spacing: .12em; font-size: .9rem;
  font-weight: 700; opacity: .92; margin: 0 0 10px;
}
.phone-card .number {
  display: block; color: #fff; text-decoration: none; font-weight: 800;
  font-size: clamp(2.1rem, 5.2vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.1;
}
.phone-card .sub { margin: 14px 0 0; font-size: 1.02rem; opacity: .95; }

/* ---------- generic sections ---------- */
section { padding: 72px 0; }
section.alt { background: var(--wash); }
.section-head { max-width: 46ch; margin-bottom: 44px; }
.section-head p { font-size: 1.2rem; color: var(--muted); margin: 0; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.step {
  background: #fff; border: 1px solid #e6e6e6; border-radius: var(--radius); padding: 30px 26px;
}
.step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%; background: var(--grad);
  color: #fff; margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(200,40,28,.20);
}
.step-icon .icon { width: 36px; height: 36px; }
.step-label {
  margin: 0 0 .3em; color: var(--red); font-weight: 700; font-size: .9rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.step h3 { margin-bottom: .35em; }
.step p { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card {
  display: block; background: #fff; border: 1px solid #e6e6e6;
  border-radius: var(--radius); padding: 30px 26px; text-decoration: none;
  color: var(--ink); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.08); border-color: var(--red); }
.card .icon { width: 46px; height: 46px; margin-bottom: 18px; color: var(--red); }
.card-more {
  display: inline-block; margin-top: 14px; color: var(--red);
  font-weight: 700; font-size: .98rem;
}
a.card:hover .card-more { text-decoration: underline; }
.card h3 { margin-bottom: .35em; }
.card p { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* ---------- who list ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 44px; margin-bottom: 18px; font-size: 1.12rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 27px; height: 27px; border-radius: 50%; background: var(--grad);
}
.ticks li::after {
  content: ""; position: absolute; left: 9px; top: .48em;
  width: 8px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ---------- coverage ---------- */
.counties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.county {
  display: block; background: var(--wash); border-radius: var(--radius);
  padding: 26px 24px; border-left: 6px solid var(--red); text-decoration: none;
  color: var(--ink); transition: transform .14s ease, box-shadow .14s ease;
}
a.county:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.08); }
.county .icon { width: 30px; height: 30px; color: var(--red); margin-bottom: 10px; }
.county h3 { margin-bottom: .3em; font-size: 1.3rem; color: var(--red); }
.county p { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }
.areas-note { margin-top: 34px; font-size: 1.12rem; }
@media (max-width: 980px) { .counties { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .counties { grid-template-columns: 1fr; } }

/* ---------- insurance ---------- */
.ins-list { columns: 2; column-gap: 40px; list-style: none; padding: 0; margin: 0 0 24px; }
.ins-list li { break-inside: avoid; padding: 10px 0 10px 34px; position: relative; font-size: 1.08rem; }
.ins-list li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 14px; height: 14px; border-radius: 50%; background: var(--red);
}

/* ---------- faq ---------- */
.faq { max-width: 860px; }
.faq details {
  border-bottom: 1px solid #e0e0e0; padding: 22px 0;
}
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.2rem; list-style: none;
  display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--red); font-size: 1.9rem; line-height: 1; flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 16px 0 0; color: var(--muted); font-size: 1.08rem; }

/* ---------- final cta ---------- */
.cta-band { background: var(--grad); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { font-size: 1.2rem; opacity: .96; max-width: 52ch; margin: 0 auto 30px; }
.cta-phone {
  display: block; color: #fff; text-decoration: none; font-weight: 800;
  font-size: clamp(2rem, 8.5vw, 4rem); letter-spacing: -0.02em; margin-bottom: 26px;
}

/* ---------- footer ---------- */
.site-footer { background: #fff; border-top: 1px solid #e6e6e6; padding: 54px 0 40px; font-size: 1.02rem; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; }
.footer-logo { display: block; width: auto; height: 72px; margin-bottom: 18px; }
.site-footer h4 { font-size: 1.05rem; margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; color: var(--muted); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--red); }
.legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid #eee; color: var(--grey); font-size: .95rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 34px; }
  .steps, .cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 19px; }
  .hero { padding: 52px 0 46px; }
  section { padding: 54px 0; }
  .steps, .cards, .footer-grid { grid-template-columns: 1fr; }
  .ins-list { columns: 1; }
  .btn-big { font-size: 1.3rem; padding: 18px 28px; }
  .logo-img { height: 48px; }
}

/* ---------- skip link + a11y ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; background: #fff; color: var(--red);
  padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------- main nav ---------- */
.site-nav { display: flex; gap: 20px; margin-left: auto; margin-right: 6px; }

.site-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem;
  padding: 6px 0; border-bottom: 3px solid transparent; white-space: nowrap;
}
.site-nav a:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---------- breadcrumbs ---------- */
.crumbs { background: var(--wash); border-bottom: 1px solid #e6e6e6; }
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 12px 0; font-size: .98rem; color: var(--grey);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #c4c4c4; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red); text-decoration: underline; }

/* ---------- inner page heads ---------- */
.page-head { background: var(--wash); padding: 56px 0 52px; }
.page-head h1 { max-width: 20ch; }
.page-head .lede { font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--muted); max-width: 52ch; }
.page-head-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.page-head-icon {
  width: 128px; height: 128px; border-radius: 50%; background: var(--grad);
  color: #fff; display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 5px 16px rgba(200,40,28,.22);
}
.page-head-icon .icon { width: 62px; height: 62px; }
.kicker {
  margin: 0 0 10px; color: var(--red); font-weight: 700; font-size: .92rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.byline { color: var(--grey); font-size: 1rem; margin: 0; }

/* ---------- long-form prose ---------- */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 1.9em; font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; font-size: 1.35rem; }
.prose p { font-size: 1.12rem; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.4em; }
.prose li {
  position: relative; padding-left: 32px; margin-bottom: 12px; font-size: 1.1rem;
}
.prose li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 11px; height: 11px; border-radius: 50%; background: var(--grad);
}
.prose strong { color: var(--ink); }

/* ---------- town lists ---------- */
.town-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.town-list li a, .town-list li.plain {
  display: block; background: #fff; border: 1px solid #d5d5d5; border-radius: 999px;
  padding: 11px 22px; font-size: 1.05rem; font-weight: 600; text-decoration: none;
  color: var(--ink);
}
.town-list li a:hover {
  border-color: var(--red); color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
.town-list li.plain { color: var(--muted); font-weight: 500; background: transparent; }
section.alt .town-list li a { background: #fff; }

/* ---------- illustrations ---------- */
.hero-side { display: grid; gap: 26px; }
.hero-art { width: 100%; height: auto; display: block; }
.care-art { width: 100%; height: auto; display: block; }
.art-panel { background: var(--wash); border-radius: var(--radius); padding: 24px; }
section.alt .art-panel { background: #fff; }

/* One row on desktop: logo, nav, phone and button. Below 1180px the nav drops
   to its own full width row underneath. */
.header-inner { flex-wrap: wrap; row-gap: 0; }
@media (max-width: 640px) {
  .page-head-grid { grid-template-columns: 1fr; }
  .page-head-icon { width: 92px; height: 92px; }
  .page-head-icon .icon { width: 44px; height: 44px; }
  .site-nav a { font-size: .95rem; padding: 11px 2px; }
}

/* ---------- insurance note ---------- */
.ins-note {
  margin: 22px 0 0; padding: 18px 22px; background: #fff; border-radius: 14px;
  border-left: 6px solid var(--red); font-size: 1.08rem;
}
section.alt .ins-note { background: var(--wash); }

/* ---------- sticky call bar, phones only ----------
   A house call practice lives on the phone ringing. On a small screen the
   header scrolls away, so keep one tap-to-call target pinned at all times. */
.call-bar { display: none; }
@media (max-width: 780px) {
  /* the pinned call bar is the persistent CTA on a phone, so the header does
     not also need to eat the top of every screen */
  .site-header { position: static; }
  .site-footer li { margin-bottom: 4px; }
  .site-footer li a { display: inline-block; padding: 9px 0; min-height: 24px; }
  .call-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--grad); box-shadow: 0 -6px 22px rgba(0,0,0,.18);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .call-bar a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: #fff; text-decoration: none; font-size: 1.25rem; font-weight: 800;
    min-height: 48px; letter-spacing: -0.01em;
  }
  .call-bar .icon { width: 24px; height: 24px; }
  body { padding-bottom: 80px; }
}

/* ---------- small screen safety ---------- */
@media (max-width: 400px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .logo-img { height: 42px; }
  .btn { padding: 16px 22px; font-size: 1.05rem; }
  .btn-big { font-size: 1.18rem; padding: 16px 22px; }
}
html, body { overflow-x: hidden; }

/* ---------- photographs ---------- */
.photo { display: block; }
.photo img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  background: var(--wash);
}
.hero-photo img { box-shadow: 0 6px 22px rgba(0,0,0,.12); }
.band-photo { margin-bottom: 40px; }
.band-photo img { border-radius: var(--radius); }
.page-head .band-photo { margin: 36px 0 0; }
.footer-tagline {
  color: var(--red); font-weight: 700; font-size: 1.15rem; margin: 0 0 6px;
}
.cards-tight { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .cards-tight { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards-tight { grid-template-columns: 1fr; } }

/* ---------- contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start; }
.contact-facts { margin-top: 30px; }
.contact-facts h2 { font-size: 1.3rem; margin-top: 1.4em; }
.contact-facts h2:first-child { margin-top: 0; }
.form-card {
  background: var(--wash); border-radius: var(--radius); padding: 34px 30px;
}
.form-card h2 { margin-top: 0; }
.contact-form label {
  display: block; margin-bottom: 18px; font-weight: 700; font-size: 1.02rem;
}
.contact-form input, .contact-form textarea {
  display: block; width: 100%; margin-top: 8px; padding: 15px 16px;
  font: inherit; font-weight: 400; font-size: 1.05rem; color: var(--ink);
  background: #fff; border: 2px solid #d5d5d5; border-radius: 12px;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--red);
}
.contact-form textarea { resize: vertical; }
.contact-form button { width: 100%; margin-top: 6px; white-space: normal; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-banner {
  padding: 18px 22px; border-radius: 14px; margin-bottom: 22px; font-size: 1.06rem;
  background: #fff; border-left: 6px solid var(--red);
}
.form-banner.ok { border-left-color: #1d8a4e; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.member {
  background: #fff; border: 1px solid #e6e6e6; border-radius: var(--radius);
  padding: 28px 22px; text-align: center;
}
.member .avatar {
  width: 78px; height: 78px; border-radius: 50%; background: var(--grad);
  color: #fff; font-size: 1.7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.member h3 { margin-bottom: .15em; font-size: 1.2rem; }
.member .role { margin: 0; color: var(--red); font-weight: 700; font-size: 1rem; }
@media (max-width: 980px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }
.contact-photo { margin-top: 24px; }

/* ---------- site search ---------- */
.searchbox { display: flex; gap: 12px; margin-top: 26px; max-width: 640px; }
.searchbox input {
  flex: 1; min-width: 0; padding: 16px 18px; font: inherit; font-size: 1.08rem;
  border: 2px solid #d5d5d5; border-radius: 999px; background: #fff; color: var(--ink);
}
.searchbox input:focus { outline: none; border-color: var(--red); }
.results { list-style: none; margin: 22px 0 0; padding: 0; max-width: 760px; }
.results li { border-bottom: 1px solid #ececec; }
.results a { display: block; padding: 16px 0; text-decoration: none; color: var(--ink); }
.results a strong { display: block; color: var(--red); font-size: 1.15rem; margin-bottom: 4px; }
.results a span { color: var(--muted); font-size: 1rem; }
.results a:hover strong { text-decoration: underline; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 560px) { .searchbox { flex-direction: column; } .searchbox .btn { width: 100%; } }
a.member { text-decoration: none; color: var(--ink); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
a.member:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.08); border-color: var(--red); }
a.member .card-more { margin-top: 10px; }
.big-initials { color: #fff; font-size: 2.6rem; font-weight: 800; letter-spacing: .02em; }
/* Reviews are short and there are a lot of them, so they get a denser grid
   than the service and guide cards: four to a row, tighter padding, smaller
   type. Nothing else on the site uses .quotes. */
.quotes { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.quotes .card { padding: 20px 20px 18px; border-radius: 14px; }
.quote { margin: 0; }
.quote p { font-size: .98rem; line-height: 1.55; color: var(--ink); }
.quote p::before { font-size: 1.4em; }
.quote p::before { content: "\201C"; color: var(--red); font-size: 1.6em; line-height: 0; vertical-align: -.25em; margin-right: .1em; }
.quote cite { display: block; margin-top: 12px; font-style: normal; font-weight: 700; color: var(--red); font-size: .92rem; }

/* ---------- folded card grids ----------
   The first row shows; the rest sit inside a <details> so the button needs no
   JavaScript and every link stays in the HTML for search engines. */
.more-cards { margin-top: 26px; }
.more-cards > summary {
  list-style: none; display: inline-flex; cursor: pointer;
}
.more-cards > summary::-webkit-details-marker { display: none; }
.more-cards > summary::after {
  content: ""; width: 0; height: 0; margin-left: .1em;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid currentColor; transition: transform .15s ease;
}
.more-cards[open] > summary::after { transform: rotate(180deg); }
.more-cards > summary .on-open { display: none; }
.more-cards[open] > summary .on-open { display: inline; }
.more-cards[open] > summary .on-closed { display: none; }
.more-cards > div { margin-top: 26px; }

.parent-line { color: var(--muted); font-size: .98rem; }
.parent-line a { color: var(--red); }

/* ---------- social links ---------- */
.social-label {
  margin: 18px 0 8px; color: var(--grey); font-size: .9rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #e0e0e0; color: var(--muted); background: #fff;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.social a:hover { color: #fff; background: var(--red); border-color: var(--red); }
.social svg { width: 22px; height: 22px; display: block; }

/* ---------- menu ----------
   Inline on desktop. On smaller screens it becomes a standard burger button
   that opens a panel below the header. The links are always in the HTML; the
   collapse only applies when the document is marked as scripted, so a browser
   without JavaScript still shows a usable list rather than nothing. */
.burger { display: none; }

@media (max-width: 1000px) {
  .site-header { position: relative; }
  .burger { order: 3; }
  .header-inner { flex-wrap: nowrap; }
  .header-call { order: 2; }

  .burger {
    display: inline-flex; font-family: inherit; align-items: center; gap: 9px; cursor: pointer;
    list-style: none; padding: 0 16px; border: 2px solid #ddd;
    border-radius: 999px; font-weight: 700; font-size: 1rem; color: var(--ink);
    background: #fff; white-space: nowrap;
  }

  .burger:hover { border-color: var(--red); color: var(--red); }

  .bars, .bars::before, .bars::after {
    display: block; width: 20px; height: 2.5px; border-radius: 2px;
    background: currentColor; transition: transform .16s ease, opacity .16s ease;
  }
  .bars { position: relative; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -6.5px; }
  .bars::after { top: 6.5px; }
  .burger.is-open .bars { background: transparent; }
  .burger.is-open .bars::before { transform: translateY(6.5px) rotate(45deg); }
  .burger.is-open .bars::after { transform: translateY(-6.5px) rotate(-45deg); }

  .burger-label.opened { display: none; }
  .burger.is-open .burger-label.closed { display: none; }
  .burger.is-open .burger-label.opened { display: inline; }

  .js .site-nav { display: none; }
  .site-nav.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
    background: #fff; border-top: 1px solid #ececec;
    box-shadow: 0 14px 30px rgba(0,0,0,.12); padding: 4px 0;
  }
  .site-nav.open a {
    padding: 15px 22px; font-size: 1.08rem; text-align: left;
    border-bottom: 1px solid #f3f3f3; border-radius: 0;
  }
  .site-nav.open a:last-child { border-bottom: 0; }
  .site-nav.open a:hover { background: #fff5f4; color: var(--red); border-bottom-color: #f3f3f3; }
}

@media (max-width: 520px) {
  .burger { padding: 0 13px; gap: 0; }
  .burger-label { display: none !important; }
}

@media (max-width: 360px) {
  /* logo, call button and burger all have to share one row on the narrowest
     phones still in common use */
  .logo-img { height: 38px; }
  .header-call { font-size: .86rem; gap: 5px; }
  .header-call .icon { width: 16px; height: 16px; }
}

/* ---------- header controls, one shared height ----------
   The phone pill had grown taller than the logo and the burger beside it, and
   a soft shadow made it bloom larger still. Giving both controls the same
   fixed height lines the row up. */
@media (max-width: 1000px) {
  .header-call, .burger {
    height: 44px; box-sizing: border-box; align-items: center;
  }
  .header-call {
    padding: 0 18px; font-size: .96rem; gap: 7px;
    box-shadow: 0 2px 6px rgba(200, 40, 28, .20);
  }
  .header-call .icon { width: 17px; height: 17px; }
  .header-inner { gap: 12px; }
}
@media (max-width: 420px) {
  .header-call { padding: 0 14px; font-size: .92rem; }
  .header-call .icon { width: 16px; height: 16px; }
}

/* Below this the three controls stop fitting one row without shrinking the
   phone number to the point of uselessness. So the phone gets a row of its
   own, full width, which makes it more prominent rather than less. */
@media (max-width: 380px) {
  .header-inner { flex-wrap: wrap; row-gap: 10px; }
  .header-call {
    order: 3; width: 100%; justify-content: center;
    font-size: 1.02rem; padding: 0 16px;
  }
  .header-call .icon { width: 18px; height: 18px; }
  .burger { order: 2; }
}

/* Without JavaScript there is nothing to open the panel, so the links stay
   visible and simply wrap onto their own row. */
@media (max-width: 1000px) {
  html:not(.js) .site-nav {
    order: 4; width: 100%; flex-wrap: wrap; gap: 0;
    margin: 6px 0 0; border-top: 1px solid #ececec;
  }
  html:not(.js) .site-nav a { padding: 11px 16px 11px 0; }
}

/* ---------- header breathing room ----------
   More space above and below the logo and phone button on smaller screens, so
   the bar does not feel cramped against the page below it. */
@media (max-width: 1000px) {
  .header-inner { padding-top: 18px; padding-bottom: 18px; }
}
/* Logo sizes restated here, in descending order, so the cascade is decided in
   one place rather than by which earlier media query happened to come last. */
@media (min-width: 641px) and (max-width: 1000px) { .logo-img { height: 58px; } }
@media (max-width: 640px) { .logo-img { height: 50px; } }
@media (max-width: 460px) { .logo-img { height: 44px; } }
@media (max-width: 400px) { .logo-img { height: 42px; } }
@media (max-width: 360px) { .logo-img { height: 38px; } }

/* ---------- article byline ---------- */
.byline-card { padding: 0 0 8px; }
.byline-card .wrap { max-width: 46rem; }
.byline-card > .wrap {
  border-top: 1px solid #e6e6e6; padding-top: 26px; margin-top: 8px;
}
.byline-who { font-weight: 700; font-size: 1.08rem; margin: 0 0 6px; }
.byline-review { margin: 0 0 10px; color: var(--muted); font-size: 1.02rem; }
.byline-review a { color: var(--red); font-weight: 600; }
.byline-note { margin: 0; color: var(--grey); font-size: .95rem; }

/* ---------- article sources ---------- */
.sources { padding: 8px 0 0; }
.sources .wrap { max-width: 46rem; }
.sources h2 { font-size: 1.25rem; margin: 0 0 12px; }
.sources ul { list-style: none; margin: 0 0 14px; padding: 0; }
.sources li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 1.02rem; }
.sources li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--grad);
}
.sources a { color: var(--red); }

/* ---------- practice figures ---------- */
.stats-band { padding: 46px 0; background: var(--wash); }
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 28px 20px;
  list-style: none; margin: 0; padding: 0;
}
.stats li { text-align: center; }
.stats b {
  display: block; font-size: clamp(1.75rem, 3.4vw, 2.35rem); line-height: 1.05;
  font-weight: 800; letter-spacing: -0.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stats span { display: block; margin-top: 8px; color: var(--muted); font-size: 1.02rem; }
.stats-note { margin: 26px auto 0; max-width: 74ch; text-align: center; color: var(--grey); font-size: .93rem; line-height: 1.6; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; } }

/* ---------- review attribution ---------- */
.quote cite span {
  display: block; margin-top: 2px;
  font-weight: 600; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grey);
}
@media (max-width: 1080px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .quotes { grid-template-columns: 1fr; } }

/* ---------- video embeds inside articles ---------- */
.video-embed {
  position: relative; margin: 30px 0; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #0d0d0f;
  box-shadow: 0 10px 30px rgba(17, 17, 20, .16);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- standalone photographs ---------- */
/* A portrait photograph at the full width of the text column is 1400px tall and
   pushes everything below it off the screen. Standalone photographs are capped
   and centred instead, whatever their shape. */
.photo-figure { max-width: 560px; margin-left: auto; margin-right: auto; }
.photo-caption {
  margin: 14px auto 0; max-width: 62ch; text-align: center;
  color: var(--grey); font-size: .95rem; line-height: 1.6;
}

/* ---------- small print ---------- */
.note { font-size: .95rem; color: var(--grey); line-height: 1.65; }
/* The 911 warning is the one note nobody should skim past, so it is the one
   note that is not smaller and quieter than the text around it. */
.note-warn {
  font-size: 1rem; color: var(--ink); line-height: 1.6;
  border-left: 4px solid var(--red); padding: 4px 0 4px 16px; margin-top: 18px;
}
.note-warn strong { color: var(--red); }