/* ==========================================================================
   Cedar Hollow Veterinary — "Hollow" theme
   Upshift veterinary template · hand-written CSS, no build step, no externals.

   HOW TO RE-SKIN: every color, radius and shadow lives in the :root token
   block directly below. Swap the values there and the whole site follows.
   ========================================================================== */

:root{
  /* Ground */
  --c-cream: #F8F5EF;        /* warm oat cream — page ground               */
  --c-white: #FFFFFF;        /* cards, raised surfaces                     */
  --c-fern:  #E7EFE2;        /* soft fern tint — alternating sections      */
  --c-oat:   #F0E8DB;        /* deeper oat tint — alternating sections     */

  /* Ink */
  --c-ink:   #2B221B;        /* deep walnut — headings, primary text       */
  --c-muted: rgba(43, 34, 27, 0.72);   /* secondary text                   */
  --c-bark:  #2B221B;        /* dark band background                       */
  --c-barkDeep: #1E1712;     /* footer / gradient partner                  */

  /* Accent */
  --c-marigold:     #D9930D; /* CTAs, fills, the paw-path motif            */
  --c-marigoldDeep: #8A5A00; /* marigold for TEXT — AA on every tint       */
  --c-marigoldWash: rgba(217, 147, 13, 0.13); /* icon chips, soft fills    */
  --c-fernDeep: #44603A;     /* quiet green for small accents — AA on cream*/

  /* On dark */
  --c-light:      #F6F1E8;   /* text on bark                               */
  --c-lightMuted: rgba(246, 241, 232, 0.75);
  --c-glow:       #E9A63B;   /* marigold for text ON DARK — AA on bark     */

  /* Lines + form */
  --c-hairline:       #E4DCCD;
  --c-hairlineOnDark: rgba(246, 241, 232, 0.16);
  --c-error:  #9C3B21;
  --c-success:#3D6B35;

  /* Shape + depth */
  --r-card: 18px;
  --r-tile: 12px;
  --r-btn:  999px;
  --shadow-card: 0 18px 40px -24px rgba(43, 34, 27, 0.24);
  --shadow-btn:  0 10px 22px -12px rgba(217, 147, 13, 0.6);

  /* Type */
  --f-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Karla', 'Seravek', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
/* scroll-behavior:smooth on <html> makes Chrome DROP the scroll on a
   cross-document #fragment navigation — every "Details" link to another page
   landed the visitor at the top instead of the promised section. Verified: with
   smooth, scrollY stayed 0; with auto it lands exactly on scroll-margin-top.
   Keep this auto. A JS shim would fix smooth, but these templates ship with
   zero dependencies and that is the point. */
html{scroll-behavior:auto}
body{background:var(--c-cream);color:var(--c-ink);font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit;transition:opacity 150ms ease,background-color 150ms ease,border-color 150ms ease,transform 150ms ease}
a:hover{opacity:.86}
:focus-visible{outline:2.5px solid var(--c-marigoldDeep);outline-offset:3px;border-radius:4px}
.bg-bark :focus-visible,.site-footer :focus-visible{outline-color:var(--c-light)}
ul{list-style:none}
button{font:inherit;cursor:pointer}
[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  a{transition:none}
}

/* --------------------------------------------------------------------------
   Type scale — t-* classes. Display = Bricolage Grotesque, body = Karla.
   -------------------------------------------------------------------------- */
.t-display{font-family:var(--f-display);font-weight:640;font-size:56px;line-height:1.04;letter-spacing:-0.022em;color:var(--c-ink)}
.t-h2{font-family:var(--f-display);font-weight:620;font-size:38px;line-height:1.1;letter-spacing:-0.015em;color:var(--c-ink)}
.t-h3{font-family:var(--f-display);font-weight:620;font-size:26px;line-height:1.18;letter-spacing:-0.01em;color:var(--c-ink)}
.t-title{font-family:var(--f-display);font-weight:620;font-size:20px;line-height:1.25;letter-spacing:-0.005em;color:var(--c-ink)}
.t-eyebrow{font-family:var(--f-display);font-weight:640;font-size:12.5px;line-height:1.4;letter-spacing:0.15em;text-transform:uppercase;color:var(--c-marigoldDeep)}
.t-lead{font-size:19px;line-height:1.55;color:var(--c-muted)}
.t-body{font-size:16.5px;line-height:1.6;color:var(--c-muted)}
.t-bodyStrong{font-weight:700;font-size:16.5px;line-height:1.5;color:var(--c-ink)}
.t-small{font-size:14px;line-height:1.55;color:var(--c-muted)}
.t-fine{font-size:12.5px;line-height:1.55;color:var(--c-muted)}
.t-price{font-family:var(--f-display);font-weight:640;font-size:30px;line-height:1.1;letter-spacing:-0.01em;color:var(--c-ink)}
.t-num{font-family:var(--f-display);font-weight:640;font-size:14px;letter-spacing:0.08em;color:var(--c-marigoldDeep)}
.t-navLink{font-family:var(--f-display);font-weight:540;font-size:15px;line-height:1.2;color:var(--c-ink)}
.t-quote{font-size:17.5px;line-height:1.6;color:var(--c-ink)}
/* on-dark variants */
.t-h2Light,.t-titleLight{color:var(--c-light)}
.t-h2Light{font-family:var(--f-display);font-weight:620;font-size:38px;line-height:1.1;letter-spacing:-0.015em}
.t-titleLight{font-family:var(--f-display);font-weight:620;font-size:20px;line-height:1.25}
.t-leadLight{font-size:19px;line-height:1.55;color:var(--c-lightMuted)}
.t-bodyLight{font-size:16.5px;line-height:1.6;color:var(--c-lightMuted)}
.t-smallLight{font-size:14px;line-height:1.55;color:var(--c-lightMuted)}
.t-fineLight{font-size:12.5px;line-height:1.55;color:var(--c-lightMuted)}
.t-eyebrowLight{font-family:var(--f-display);font-weight:640;font-size:12.5px;line-height:1.4;letter-spacing:0.15em;text-transform:uppercase;color:var(--c-glow)}
@media (max-width:1099px){
  .t-display{font-size:45px}
  .t-h2,.t-h2Light{font-size:32px}
}
@media (max-width:819px){
  .t-display{font-size:35px}
  .t-h2,.t-h2Light{font-size:27px}
  .t-h3{font-size:22px}
  .t-lead,.t-leadLight{font-size:17px}
}

/* --------------------------------------------------------------------------
   Buttons + chips — marigold fill carries WALNUT text (AA), never white.
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:var(--r-btn);background:var(--c-marigold);
  font-family:var(--f-display);font-weight:640;font-size:15.5px;color:var(--c-ink);
  box-shadow:var(--shadow-btn);border:none;width:fit-content}
.btn:hover{background:#C98708;opacity:1}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13.5px 26px;border-radius:var(--r-btn);border:1.5px solid var(--c-marigold);
  font-family:var(--f-display);font-weight:640;font-size:15.5px;color:var(--c-marigoldDeep);width:fit-content}
.btn-ghost:hover{background:var(--c-marigoldWash);opacity:1}
.btn-light{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:var(--r-btn);background:var(--c-cream);
  font-family:var(--f-display);font-weight:640;font-size:15.5px;color:var(--c-ink);width:fit-content}
.btn-lightGhost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13.5px 26px;border-radius:var(--r-btn);border:1.5px solid var(--c-hairlineOnDark);
  font-family:var(--f-display);font-weight:640;font-size:15.5px;color:var(--c-light);width:fit-content}
.btn-sm{padding:11px 20px;font-size:14.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.textlink{font-family:var(--f-display);font-weight:640;font-size:15px;color:var(--c-marigoldDeep)}
.card-foot .textlink{white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  background:var(--c-white);border:1px solid var(--c-hairline);border-radius:999px;
  font-size:14px;color:var(--c-ink)}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}

/* --------------------------------------------------------------------------
   Paw-path motif — dotted walking trail, used under section heads.
   Restrained: small, low-count, marigold. See .pawtrail in the HTML.
   -------------------------------------------------------------------------- */
.pawtrail{flex-shrink:0}
.section-head .pawtrail{margin-top:2px}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--c-cream);border-bottom:1px solid var(--c-hairline)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1188px;margin:0 auto;padding:14px 24px}
.wordmark{display:flex;flex-direction:column;gap:2px;width:fit-content}
.wordmark-name{font-family:var(--f-display);font-weight:660;font-size:20px;letter-spacing:-0.01em;color:var(--c-ink);line-height:1.1}
.wordmark-sub{font-family:var(--f-display);font-weight:640;font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-marigoldDeep)}
.wordmark .pawtrail{margin:1px 0}
.site-nav{display:flex;gap:26px;align-items:center}
.header-actions{display:flex;gap:18px;align-items:center}
.quicknav{display:none;gap:20px;align-items:center;overflow-x:auto;padding:0 24px 10px;
  -webkit-overflow-scrolling:touch}
.quicknav a{font-family:var(--f-display);font-weight:540;font-size:14px;color:var(--c-marigoldDeep);white-space:nowrap}
@media (max-width:819px){
  .site-nav,.header-phone{display:none}
  .quicknav{display:flex}
}

/* --------------------------------------------------------------------------
   Sticky mobile call/book bar
   -------------------------------------------------------------------------- */
.mobilebar{display:none}
@media (max-width:819px){
  .mobilebar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;
    bottom:0;left:0;right:0;z-index:110;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(248,245,239,0.96);border-top:1px solid var(--c-hairline);backdrop-filter:blur(8px)}
  .mobilebar .btn,.mobilebar .btn-ghost{width:100%;padding:13px 10px}
  body{padding-bottom:74px}
}

/* --------------------------------------------------------------------------
   Sections + layout
   -------------------------------------------------------------------------- */
.section{display:flex;flex-direction:column;align-items:center;padding:104px 24px;background:var(--c-cream)}
.section.tight{padding:72px 24px}
.bg-white{background:var(--c-white)}
.bg-fern{background:var(--c-fern)}
.bg-oat{background:var(--c-oat)}
.bg-bark{background:linear-gradient(165deg, var(--c-bark), var(--c-barkDeep))}
.inner{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:48px}
.inner.narrow{max-width:780px}
.section-head{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:680px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.split{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
.split.rev{grid-template-columns:6fr 5fr}
.grid-2>*,.grid-3>*,.grid-4>*,.split>*{min-width:0}
@media (max-width:1099px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .split,.split.rev{gap:40px}
}
@media (max-width:819px){
  .section{padding:72px 24px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .split,.split.rev{grid-template-columns:1fr;gap:36px}
  .split .visual-first{order:-1}
}

/* Trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:1120px}
.trust > div{display:flex;flex-direction:column;gap:5px;padding:22px 28px;border-left:1px solid var(--c-hairline)}
.trust > div:first-child{border-left:none}
@media (max-width:819px){
  .trust{grid-template-columns:1fr}
  .trust > div{border-left:none;border-top:1px solid var(--c-hairline);padding:16px 0}
  .trust > div:first-child{border-top:none}
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--c-white);
  border:1px solid var(--c-hairline);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.card .rule{height:1px;background:var(--c-hairline);width:100%}
.card-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 12px;margin-top:auto}
.price-wrap{display:flex;gap:5px 8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.price-wrap .t-price{white-space:nowrap}
/* A card in a 4-up row is only ~204px wide — a price plus its qualifier plus
   the "Details →" link cannot share that line, and the link would render
   outside the card border. Stack the footer while the grid is 4-up so all four
   cards match; restore the side-by-side row at 2-up, where cards are wider.
   HOW TO EDIT: raise the breakpoint if you lengthen the price or qualifier. */
.grid-4 .card-foot{flex-direction:column;align-items:flex-start;gap:10px}
@media (max-width:1099px){
  .grid-4 .card-foot{flex-direction:row;align-items:flex-end;gap:10px 12px}
}
.icon-chip{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:14px;background:var(--c-marigoldWash);flex-shrink:0}
.feature-list{display:flex;flex-direction:column;gap:9px;padding:2px 0}
.feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--c-ink)}
.feature-list li svg{flex-shrink:0;margin-top:3px}
.feature-list.on-dark li{color:var(--c-lightMuted)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--c-hairline)}
.bg-bark .step{border-top-color:var(--c-hairlineOnDark)}
@media (max-width:819px){
  .steps,.steps.four{grid-template-columns:1fr;gap:26px}
}

/* FAQ — native details/summary, no JS */
.faq{display:flex;flex-direction:column;width:100%}
.faq details{border-top:1px solid var(--c-hairline)}
.faq details:last-child{border-bottom:1px solid var(--c-hairline)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 4px;cursor:pointer;list-style:none;font-family:var(--f-display);
  font-weight:620;font-size:18px;color:var(--c-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-display);font-weight:500;font-size:24px;
  color:var(--c-marigoldDeep);line-height:1;flex-shrink:0;transition:transform 150ms ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 4px 22px;max-width:640px}
@media (prefers-reduced-motion: reduce){.faq summary::after{transition:none}}

/* Reviews */
.review-card{display:flex;flex-direction:column;gap:12px;padding:26px 28px;background:var(--c-white);
  border:1px solid var(--c-hairline);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.stars{color:var(--c-marigoldDeep);font-size:14px;letter-spacing:2px}
.review-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   Hero — "the animal greets you first"
   People choose a vet on feel, so the photograph leads: it holds the left of
   the screen, edge to edge, and the copy answers the three questions an
   anxious owner actually has (can you see us today, what do you treat, what
   will it cost) as a ruled list rather than a row of badges.

   The right column's outer padding tracks the 1120px container, so the copy
   stays flush with the trust strip below at every width.
   -------------------------------------------------------------------------- */
.hero-section{position:relative;display:block;padding:0;
  background:linear-gradient(180deg, var(--c-fern), var(--c-cream) 78%)}
.hero-greeting{display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);align-items:stretch}
.hero-portrait{position:relative;margin:0;overflow:hidden;border-radius:0 26px 26px 0;
  min-height:clamp(420px, 44vw, 600px);
  background:linear-gradient(160deg, #F3EDE1 0%, #E7EFE2 52%, #D3E1CB 100%)}
.hero-portrait .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:58% 24%}
.hero-copy-wrap{display:flex;align-items:center;
  padding:56px max(24px, calc((100vw - 1120px) / 2)) 56px clamp(30px, 4.6vw, 64px)}
.hero-copy{display:flex;flex-direction:column;gap:20px;max-width:660px}
.hero-copy .pawtrail{margin:2px 0 -2px}

/* Ruled "what you need to know today" list */
.today{display:flex;flex-direction:column}
.today > div{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:baseline;
  padding:10px 0;border-top:1px solid var(--c-hairline)}
.today dt{font-family:var(--f-display);font-weight:600;font-size:11.5px;line-height:1.4;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--c-marigoldDeep)}
.today dd{font-size:14.5px;line-height:1.5;color:var(--c-muted)}

@media (max-width:1099px){
  .hero-greeting{grid-template-columns:minmax(0,38%) minmax(0,62%)}
  .hero-portrait{min-height:clamp(380px, 46vw, 520px)}
}
@media (max-width:819px){
  .hero-greeting{grid-template-columns:1fr}
  .hero-portrait{min-height:0;aspect-ratio:1.3;border-radius:0}
  .hero-copy-wrap{padding:34px 24px 56px}
  .today > div{grid-template-columns:1fr;gap:3px}
}

/* Offer card */
.offer-card{display:flex;flex-direction:column;gap:10px;padding:24px 26px;background:var(--c-white);
  border:1.5px solid var(--c-marigold);border-radius:var(--r-card);box-shadow:var(--shadow-card)}

/* Service tiles (services page visuals) */
.svc-tile{position:relative;border-radius:var(--r-tile);overflow:hidden;aspect-ratio:1.6;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%),
    linear-gradient(165deg, #F3EDE1, #E7EFE2)}

/* --------------------------------------------------------------------------
   Tables + price rows
   -------------------------------------------------------------------------- */
.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--c-hairline);border-radius:var(--r-card);background:var(--c-white)}
.cmp{width:100%;border-collapse:collapse;min-width:560px}
.cmp th,.cmp td{padding:16px 20px;text-align:left;font-size:15px;line-height:1.5;
  border-top:1px solid var(--c-hairline);vertical-align:top}
.cmp thead th{border-top:none;font-family:var(--f-display);font-weight:620;font-size:15px;color:var(--c-ink)}
.cmp thead th.us{color:var(--c-marigoldDeep)}
.cmp td:first-child{font-weight:700;color:var(--c-ink);width:26%}
.cmp td{color:var(--c-muted)}
.cmp td.us{background:rgba(217,147,13,0.06);color:var(--c-ink)}

.price-rows{display:flex;flex-direction:column;width:100%}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 4px;border-top:1px solid var(--c-hairline)}
.price-row:last-child{border-bottom:1px solid var(--c-hairline)}

/* --------------------------------------------------------------------------
   Forms (book page)
   -------------------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.form-grid .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--f-display);font-weight:620;font-size:14px;color:var(--c-ink)}
.field input,.field select,.field textarea{padding:13px 14px;border:1px solid var(--c-hairline);
  border-radius:10px;background:var(--c-white);font:inherit;font-size:15.5px;color:var(--c-ink);width:100%}
.field input::placeholder,.field textarea::placeholder{color:rgba(43,34,27,0.65)} /* 4.95:1 on white — AA */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2.5px solid var(--c-marigoldDeep);outline-offset:1px;border-color:var(--c-marigoldDeep)}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--c-muted)}
.checkline input{width:17px;height:17px;margin-top:2px;accent-color:var(--c-marigold);flex-shrink:0}
@media (max-width:819px){.form-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{display:flex;flex-direction:column;align-items:center;
  padding:64px 24px 28px;background:var(--c-barkDeep)}
.footer-inner{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:40px}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;align-items:start}
.footer-col{display:flex;flex-direction:column;gap:10px}
.site-footer .wordmark-name{color:var(--c-light)}
.site-footer .wordmark-sub{color:var(--c-glow)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:18px;border-top:1px solid var(--c-hairlineOnDark)}
@media (max-width:819px){
  .footer-cols{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* --------------------------------------------------------------------------
   Page-hero (interior pages) + prose (legal / read-me)
   -------------------------------------------------------------------------- */
.page-hero{display:flex;flex-direction:column;align-items:center;
  padding:72px 24px 64px;background:linear-gradient(180deg, var(--c-oat), var(--c-cream))}
.page-hero.fern{background:linear-gradient(180deg, var(--c-fern), var(--c-cream))}
.prose{display:flex;flex-direction:column;gap:18px;max-width:760px}
.prose h2{font-family:var(--f-display);font-weight:620;font-size:24px;letter-spacing:-0.01em;color:var(--c-ink);padding-top:12px}
.prose p,.prose li{font-size:16.5px;line-height:1.65;color:var(--c-muted)}
.prose ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose strong{color:var(--c-ink)}
.notice{display:flex;flex-direction:column;gap:8px;padding:22px 24px;background:var(--c-fern);border-radius:14px}
.notice.warm{background:var(--c-oat)}
.readme-step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--c-hairline)}
.readme-step .t-num{margin-top:2px;white-space:nowrap}
.readme-step code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  background:var(--c-oat);border-radius:6px;padding:2px 7px;color:var(--c-ink);overflow-wrap:anywhere}

/* Emergency callout (urgent-care page) */
.er-callout{display:flex;flex-direction:column;gap:10px;padding:24px 26px;
  background:var(--c-white);border-left:5px solid var(--c-error);border-radius:12px;box-shadow:var(--shadow-card)}