/* 2026-08-19: hash bumped deliberately. The previous hashed URL was published in the
   HTML for a window in which the file itself had not been committed, so browsers cached
   a 404 for it under /assets/* — and these assets ship `immutable`, so a cached response
   is never revalidated and a hard refresh does not dislodge it. Changing the content
   changes the hash, which changes the URL, which is the only reliable way out. See
   "Caching" in CLAUDE.md. */
/* =============================================================================
 * Responsive + polish overrides
 *
 * Loaded LAST, after every original stylesheet. Desktop rendering is deliberately
 * left untouched — almost everything here sits inside a max-width media query so
 * the 1600px layout stays byte-for-byte what the live site produces.
 *
 * These fix defects that exist on the live site itself; they are improvements on
 * the original, not reproductions of it.
 *
 * -----------------------------------------------------------------------------
 * FINDING YOUR WAY AROUND
 *
 *   STYLES.md              every stylesheet on the site, its size, and how much of
 *                          it is reachable — plus a line-numbered index of THIS file
 *   node css-report.mjs    regenerates STYLES.md
 *   node build.mjs --css   push a change to dist/ in ~20ms
 *   node build.mjs --watch same, automatically on save
 *
 * This is the ONLY stylesheet we author. The other 45 came with WordPress, Elementor,
 * Astra or a plugin and are served as captured — do not edit them, override here.
 *
 * Each block below states the defect, the measurement that found it, and why the fix
 * is shaped the way it is. Read the comment before changing the rule: several of them
 * look redundant and are not (see the !important notes, and CLAUDE.md on cascade).
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. The arrow button in the service cards drifts off the top-right corner
 *
 * Elementor gives the heading widget `width: var(--container-widget-width)`,
 * which resolves to 100%. The heading therefore claims the whole flex row and
 * pushes the 40px arrow onto a second line, while `align-items: center` then
 * centres it against a title that may be one, two or three lines tall.
 *
 * Measured offset of the arrow's top from the title's top, before:
 *     390px   +80, +110        768px   +8, +23
 *    1024px   -7, +8, +23     1440px   -7, +8   (and a 10/18px right gap)
 * which is why some cards showed it in the corner, some lower, some lower still.
 *
 * Letting the heading shrink instead of claiming 100% keeps both on one line;
 * flex-start then pins the arrow to the top whatever the title height. Every
 * card measures offset 0 / right gap 10 at all four widths afterwards.
 *
 * The !importants are needed because Elementor sets these per element with an
 * id-strength selector. Scoped by :has() to rows that actually hold a circle
 * icon, so no other heading on the site is affected.
 * -------------------------------------------------------------------------- */
.e-con.e-flex:has(> .elementor-widget-icon.elementor-shape-circle) {
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  /* The title row carries its own 10px inset on top of the card's 25px, so the
   * heading started at 35px while the paragraph below it started at 25px. Dropping
   * the inset puts the title on the same left edge as the copy beneath it. */
  padding-inline-start: 0 !important;
}
.e-con.e-flex:has(> .elementor-widget-icon.elementor-shape-circle) > .elementor-widget-heading {
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
}
.e-con.e-flex:has(> .elementor-widget-icon.elementor-shape-circle) > .elementor-widget-icon {
  width: auto !important;
  flex: 0 0 auto;
}

/* -----------------------------------------------------------------------------
 * 1b. The service-card hover ripple showed as a red dot next to the title
 *
 * The ripple is .hover-card::before — a 30px red circle that scales to 80x on
 * hover to flood the card. Two authoring bugs in the original:
 *
 *   .hover-card { position: relative; z-index: 1 }   <- makes a stacking context,
 * so the ripple's z-index:-2 cannot sit behind the card's own background. It is
 * painted over that background instead, and shows at rest.
 *
 *   .hover-card::before { top: 50px; left: 295px }   <- a hardcoded offset tuned
 * for one card width, which is why the dot landed beside the end of the title
 * rather than under the arrow, and drifted as the card resized.
 *
 * Anchoring to the right edge puts the ripple's centre exactly on the arrow's
 * centre (both measure top 58 / right 58 in every card), and scaling it to 0 at
 * rest means it is invisible until hovered, whatever the stacking context does.
 * The animation is unchanged: it now genuinely grows out from behind the arrow.
 *
 * The !importants matter here: the original rules live in an inline <style> block,
 * and Elementor emits those after this file on some pages, so plain specificity is
 * not enough to win reliably. Anchoring by `right` also keeps the origin on the
 * arrow at any card width, where the original's `left: 295px` only lined up at one.
 * -------------------------------------------------------------------------- */
.hover-card::before {
  top: 43px !important;
  left: auto !important;
  right: 43px !important;
  transform: scale(0) !important;
}
.hover-card:hover::before {
  transform: scale(80) !important;
}

/* -----------------------------------------------------------------------------
 * 2. Never allow sideways scroll
 *
 * The live site overflows horizontally on phones, which makes the browser zoom
 * out and mis-scale everything above the offending element.
 * -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  /* `clip`, not `hidden`: overflow:hidden on body makes it a scroll container, and a
     position:sticky descendant then sticks to a scrollport that never scrolls — which
     silently breaks the sticky mobile header. */
  overflow-x: clip;
}

/* `svg` deliberately excluded: Elementor already sizes every icon SVG, and a global
   max-width resolves against shrunk flex parents and squashes them (this is what
   rendered a 16px checklist tick at 7px). */
img,
video,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* =============================================================================
 * Content must never depend on JavaScript to become visible
 *
 * Elementor hides ~97% of every page behind .elementor-invisible and reveals it with
 * an IntersectionObserver. If the JS is slow, blocked or fails, the page renders
 * almost empty — and because visibility:hidden also removes content from the
 * accessibility tree, screen readers miss anything not yet scrolled to.
 * Measured on the homepage with JS off: 485 characters visible, 16,039 hidden.
 * ========================================================================== */
.elementor-invisible { visibility: visible !important; }

/* Long words and URLs should wrap rather than push the layout wide. */
h1, h2, h3, h4, h5, h6, p, li, a, span {
  overflow-wrap: break-word;
}

/* =============================================================================
 * Tablet — 1024px and below
 * ========================================================================== */
@media (max-width: 1024px) {
  /*
   * "Advanced Cardiac Diagnostics & Care" is a three-column desktop arrangement: a
   * decorative image bleeding off each edge with the copy centred between them. The
   * images carry a desktop height that their box does not, so once the columns stack
   * they render far taller than their container and overlap the heading below.
   *
   * They are decoration, not content, so they are dropped below the desktop layout
   * rather than resized. Targeted by filename so genuine content images (service
   * cards, clinic photos) are untouched.
   *
   * The testimonial portrait USED to be listed here for the same reason. It is not
   * any more: the T1 slider gives it a fixed-height band between the heading and the
   * quote below 1200px, so it no longer overlaps anything, and dropping the only
   * human face in the section was never the better outcome.
   *
   * Note what this rule's specificity does if you leave it: `.site-content
   * img[src*="…"]` is (0,2,1) and beat `.hm-testi__photo` at (0,1,0), so the band
   * silently did not appear and the image was never even fetched. That is the same
   * attribute-selector trap as Astra's `input[type="email"]`. The fix is to retire
   * the entry, not to escalate specificity on the other side.
   */
  /*
   * Match on "what-we-image" alone: the mirror keeps the original filename, which
   * contains a literal arrow character and is percent-encoded in the markup, so a
   * selector built from the cleaned name silently matches nothing.
   */
  .site-content img[src*="what-we-image"],
  .site-content img[src*="Background.png"] {
    display: none !important;
  }
  .site-content .elementor-widget-image:not(:has(img)) {
    display: none !important;
  }

  /* Elementor's fixed percentage columns get too narrow to read; let them stack. */
  .e-con-inner,
  .e-con > .e-con {
    --container-widget-width: 100%;
  }

  /* Card and panel padding tightens so content keeps its measure. */
  .e-con.e-parent > .e-con {
    padding-left: 20px;
    padding-right: 20px;
  }

  /*
   * The original keeps desktop type between 768px and 1024px, so the 60px hero
   * heading overflows on tablets. Cap headings across this whole tier.
   */
  /* Only the large display headings. A blanket clamp here inflated ~101 small
     headings (15-25px) up to 44px, because clamp()'s floor raises small type. */
  h1.elementor-heading-title,
  h2.elementor-heading-title {
    font-size: clamp(1.75rem, 5.2vw, 2.75rem) !important;
    line-height: 1.2 !important;
  }

  /* Nothing may exceed its container in this tier either. */
  .e-con,
  .e-con-inner {
    max-width: 100% !important;
  }

  .elementor-widget-image img {
    width: 100%;
    height: auto;
  }

  /* Hero: let height follow content rather than a fixed viewport fraction. */
  .elementor-element.elementor-element-33c6a8af {
    --min-height: auto !important;
    --padding-top: 70px !important;
    --padding-bottom: 70px !important;
    --padding-left: 28px !important;
    --padding-right: 28px !important;
  }
}

/* =============================================================================
 * Desktop nav dropdown, without smartmenus
 *
 * The "Contact Us" item has one child, "Our Clinic". Opening it used to be the only
 * job left on the site for jQuery + jQuery UI + smartmenus, and the whole Elementor
 * script chain that loaded them — 802 KB to reveal a link that already appears five
 * other times on the same page. The scripts are gone; this replaces the behaviour.
 *
 * Everything except visibility was already in the shipped CSS and is deliberately not
 * repeated here: `.elementor-nav-menu li` is already `position: relative`,
 * `.elementor-nav-menu ul` is already `position: absolute; width: 12em`, and
 * `.elementor-nav-menu--dropdown` already carries its background and hover colours.
 * The only thing smartmenus was contributing at rest was `display`, so that is the
 * only thing set here. `.elementor-nav-menu ul { display: none }` is (0,1,1) in
 * custom-pro-widget-nav-menu.min.css; the selectors below are (0,4,2) and this sheet
 * loads after it, so they win on both counts.
 *
 * Scoped to min-width:1025px because that is the ONLY range where this nav exists —
 * below it `.elementor-location-header` is `display:none` and the hand-built
 * `.mhdr` bar takes over, where "Our Clinic" is already a flat top-level item. That
 * scope is also what makes :focus-within safe here: on a touch screen a tap on the
 * parent both focuses it and follows its href, and the note in CLAUDE.md about
 * `(hover: hover)` not guarding `:focus-within` applies to widths this never reaches.
 * :focus-within is what gives keyboard users the dropdown at all — Tab into the child
 * link opens it, which is why it is not a :hover-only rule.
 * ========================================================================== */
@media (min-width: 1025px) {
  .elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
  .elementor-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
    display: block;
  }

  /* The caret. smartmenus injected `span.sub-arrow` holding an SVG; without it the item
     looked like every other top-level link and nothing announced that it opened. Drawn
     here rather than restored in markup because it is pure decoration — a triangle that
     says nothing to a screen reader, which is right: the submenu is a nested <ul> and
     already reads as one.

     The two !importants are not laziness, they are the only way through. Elementor
     already owns this pseudo-element for its hover "pointer" effect, and both of its
     rules apply here even though this menu is set to `e--pointer-none`:

       .elementor-item:after                      { position: absolute }
       .elementor-item:not(:hover):not(:focus)
         :not(.elementor-item-active):not(.highlighted):after { opacity: 0 }

     The second is (0,5,1) — four :not()s each count as a class. Any selector written
     against the nav's own shape lands around (0,3,3), which LOSES on class count no
     matter how deep it is nested, so the caret rendered with opacity 0 and the absolute
     positioning also stopped it taking up space. It computed correctly in
     getComputedStyle and was invisible on screen: a rule existing is not a rule
     applying. Overriding the two declarations directly is narrower than inventing a
     six-class selector to outrank them.

     The link resolves to `display: flex`, so with position restored to static this is a
     flex item: `flex: 0 0 auto` stops it stretching, `align-self: center` centres it in
     the 46px line box. No hover rotation — `.elementor-item:hover:after` sets
     `transform: scale(1)`, and a second !important to win a fight over decoration is
     not worth it. The baseline caret did not rotate either. */
  .elementor-nav-menu > li.menu-item-has-children > a::after {
    content: "";
    position: static !important;
    opacity: 1 !important;
    /* Every box property is set explicitly, for the same reason the footer's newsletter
       button has to state its padding: this pseudo-element already carries Elementor's
       values, and inheriting any of them is what produced a red rectangle where the
       caret should be. `background` was the visible one — the pointer effect colours
       this box — and `width`/`height` resolved to 8px/5px rather than 0, which turns a
       border triangle into a trapezoid. A triangle needs a zero-size content box. */
    width: 0;
    height: 0;
    background: none !important;
    border-radius: 0;
    flex: 0 0 auto;
    align-self: center;
    margin-left: 7px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    border-bottom: 0;
  }
}

/* =============================================================================
 * Mobile header
 *
 * Elementor's header is three nested bands deep and keeps hidden desktop widgets
 * that still reserve space, so overrides could not reliably put the logo and the
 * menu button on one row. Below 1024px that header is hidden and this purpose-built
 * bar is used instead. Disclosure is a checkbox, so no JavaScript is added.
 * ========================================================================== */
.mhdr { display: none; }
.mhdr__cb { position: absolute; opacity: 0; width: 0; height: 0; }
.mhdr__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

@media (max-width: 1024px) {
  /* Stand down the original header. */
  .elementor-location-header { display: none !important; }

  .mhdr {
    display: block;
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0 1px 0 rgba(27, 63, 85, .08);
  }

  .mhdr__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
  }

  .mhdr__logo { display: inline-flex; align-items: center; flex: 0 1 auto; }
  .mhdr__logo img { width: 170px; height: auto; display: block; }

  /* Red square button, matching the original's toggle. */
  .mhdr__btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #E22E2D;
    cursor: pointer;
  }
  .mhdr__bars,
  .mhdr__bars::before,
  .mhdr__bars::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }
  .mhdr__bars { position: relative; }
  .mhdr__bars::before { position: absolute; top: -6px; }
  .mhdr__bars::after { position: absolute; top: 6px; }
  .mhdr__cb:focus-visible + .mhdr__bar .mhdr__btn { outline: 3px solid #0b6bcb; outline-offset: 2px; }

  /* Collapsed by default; the checkbox reveals it. */
  .mhdr__nav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .2s ease;
    background: #fff;
  }
  .mhdr__cb:checked ~ .mhdr__nav { grid-template-rows: 1fr; }
  /* visibility:hidden also removes the links from the tab order and the a11y tree;
     overflow:hidden alone only clipped them visually, leaving 8 invisible tab stops. */
  .mhdr__nav ul { overflow: hidden; list-style: none; margin: 0; padding: 0; visibility: hidden; }
  .mhdr__cb:checked ~ .mhdr__nav ul { visibility: visible; }
  .mhdr__nav a {
    display: block;
    padding: 14px 16px;
    border-top: 1px solid #e7e0dc;
    color: #1B3F55;
    text-decoration: none;
    font-family: "Sora", sans-serif;
    font-size: 15px;
  }
  .mhdr__nav a:hover { color: #E22E2D; }
}

@media (max-width: 480px) {
  .mhdr__logo img { width: 140px; }
  .mhdr__bar { padding: 8px 12px; }
}

/* =============================================================================
 * Phone — 767px and below
 * ========================================================================== */
@media (max-width: 767px) {
  /*
   * Type scale. The original leaves several headings at desktop sizes on phones,
   * which is what pushes text past its container. These are capped, not shrunk
   * to unreadable — body copy stays at 15px.
   */
  /* The original already ships a deliberate phone scale (22/18/25/30px). Only the
     display headings need capping; everything else keeps the original's sizes. */
  h1.elementor-heading-title,
  h2.elementor-heading-title {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    line-height: 1.25 !important;
  }
  .elementor-heading-title { overflow-wrap: break-word; }

  h1.elementor-heading-title,
  .elementor-widget-heading h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
  }

  /* Eyebrow labels: keep the tracking but stop them running off the edge. */
  .elementor-icon-list-item > .elementor-icon-list-text,
  .elementor-icon-list-item > a {
    font-size: 12px !important;
    letter-spacing: 1.6px !important;
    line-height: 1.5 !important;
  }

  /* Body copy stays legible rather than dropping to 13px. */
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  .elementor-icon-box-description {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /*
   * Content containers stack instead of overflowing.
   *
   * Forcing width:100% on every container was wrong: Elementor lays several of them
   * out as flex rows, so two full-width children pushed each other outside the slide
   * (the services carousel showed a title and button with the image and copy escaping
   * the card). Allowing the row to wrap fixes it without dictating widths.
   */
  .site-content .e-con,
  .site-content .e-con-inner,
  .site-content .elementor-widget-wrap {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }



  /*
   * Widgets that Elementor pins to a fraction of the row go full width instead —
   * except icons. An icon is a fixed 40px badge sitting beside its heading; forcing
   * it to 100% made it fill the row and wrap onto its own line, which is why some
   * service cards lost the arrow from their top-right corner.
   */
  .site-content .e-con > .elementor-widget:not(.elementor-widget-icon):not(.elementor-widget-ha-super-button) {
    --container-widget-width: 100% !important;
  }
  .site-content .elementor-widget-icon {
    --container-widget-width: auto !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;
  }

  /* Side padding: enough to breathe, not enough to squeeze the measure. */
  .e-con.e-parent > .e-con {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Images fill their column and keep their aspect ratio. */
  .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* The hero: readable height, text inset from the rounded edge. */
  .elementor-element.elementor-element-33c6a8af {
    --min-height: auto !important;
    --padding-left: 20px !important;
    --padding-right: 20px !important;
    --padding-top: 60px !important;
    --padding-bottom: 60px !important;
    background-position: center center !important;
  }

  /* Buttons go full width so they are easy to hit and never overflow. */
  .ha-super-btn-stl-1 .ha-super-btn-text,
  .elementor-button {
    white-space: normal !important;
  }

  /* The service card icon stays in the corner without crowding the title. */
  .elementor-widget-icon .elementor-icon {
    width: 40px;
    height: 40px;
    padding: 12px !important;
  }

  /* Page banner: the 60px title is far too large on a phone. */
  .elementor-element .elementor-heading-title {
    word-break: normal;
  }
}

/* =============================================================================
 * Small phone — 430px and below
 * ========================================================================== */
@media (max-width: 430px) {
  .elementor-heading-title {
    font-size: clamp(1.35rem, 7.5vw, 1.75rem) !important;
  }

  .e-con.e-parent > .e-con {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Keep the rounded band inset small so content gets the width it needs. */
  .e-con.e-parent {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =============================================================================
 * Social icon centring
 *
 * The icon sits in a 40x40 circle rendered with display:inline-block and
 * line-height:20px, so the glyph is baseline-aligned rather than centred: measured
 * at 13px from the top where 10px would centre it. Centre it properly without
 * changing the circle's size. Applies at every width — it is off on desktop too,
 * just less noticeable.
 * ========================================================================== */
.elementor-social-icon,
.elementor-icon,
.elementor-icon-wrapper > a.elementor-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.elementor-social-icon svg,
.elementor-social-icon i,
.elementor-icon > svg,
.elementor-icon > i {
  display: block;
  line-height: 1;
}

/* =============================================================================
 * Footer rhythm on narrow screens
 * ========================================================================== */
@media (max-width: 1024px) {
  /* Contact rows sat far apart; tighten to a consistent step. */
  .elementor-location-footer .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
    padding-bottom: 10px !important;
  }
  .elementor-location-footer .elementor-icon-list-item {
    margin-bottom: 0 !important;
  }

  /* Long values (address, email) wrap instead of pushing the column wide. */
  .elementor-location-footer .elementor-icon-list-text,
  .elementor-location-footer a {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Give each footer column breathing room once they stack. */
  .elementor-location-footer .e-con > .e-con {
    margin-bottom: 18px;
  }
}

/* =============================================================================
 * Reported fixes
 * ========================================================================== */

/* Checklist ticks: the first rendered 7x16 while its siblings were 16x16 — the
   global svg{max-width:100%} squashed it. Pin the icon so it cannot be squeezed. */
.elementor-icon-list-icon svg.e-fas-check-square,
.elementor-icon-list-icon svg[class*="check"] {
  width: 16px !important;
  height: 16px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.elementor-icon-list-icon { flex: 0 0 auto !important; }

/* Service card header: keep the title and its arrow on one line with the arrow
   pinned top-right, so it cannot wrap to the next row on narrower cards. */
.elementor-widget-icon .elementor-icon { flex: 0 0 auto !important; }

@media (max-width: 1024px) {

  /* Centre calls to action whose surrounding content is centred. */
  /* Kept as its own rule: pairing it with a :has() selector in one comma list meant
     the entire rule was dropped in browsers without :has() support. */
  .elementor-widget-ha-super-button { text-align: center; }
  .ha-super-button .ha-super-btn-wrap { justify-content: center; }

  /*
   * Carousels size themselves to their tallest slide, leaving a large dead gap
   * under shorter ones. Let the track follow the slide that is actually showing.
   */
  .swiper, .swiper-container { height: auto !important; }
  .swiper-wrapper { align-items: flex-start !important; }
  .swiper-slide { height: auto !important; }

  /* Specialists: show every clinician as a list rather than one slide at a time. */
  body.page-id-317 .swiper,
  body.page-id-317 .swiper-container { height: auto !important; }
  body.page-id-317 .swiper-wrapper {
    display: block !important;
    transform: none !important;
    height: auto !important;
  }
  body.page-id-317 .swiper-slide {
    width: 100% !important;
    margin: 0 0 16px !important;
    opacity: 1 !important;
  }
  body.page-id-317 .swiper-pagination { display: none !important; }
}

/* =============================================================================
 * Hero contrast — at every width, not just mobile
 *
 * Glyph-level measurement against the actual photo: 3.67:1 at 1440px with no scrim
 * (passes AA-large by 0.67, but 17% of the type sits under 4.5:1, and Marcellus 400
 * is a thin serif). With the scrim: worst 6.50:1, nothing below 4.5:1.
 * ========================================================================== */
.elementor-element.elementor-element-33c6a8af::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 44, 62, .45);
  pointer-events: none;
  z-index: 0;
}
.elementor-element.elementor-element-33c6a8af > * { position: relative; z-index: 1; }

/* =============================================================================
 * Focus visibility
 *
 * Measured: all six contact-form controls had outline:0 and no border/shadow change
 * on focus. Gravity Forms defines a ring but never applies it; Astra zeroes the
 * submit button explicitly.
 * ========================================================================== */
.gform_wrapper input:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper input[type="submit"]:focus-visible,
.elementor-form .elementor-field:focus-visible,
.elementor-form button:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0b6bcb !important;
  outline-offset: 2px !important;
}

/* =============================================================================
 * Colour contrast
 *
 * Brand red on the cream panel measures 4.15:1 — below the 4.5:1 body-text bar, and
 * it is used for the clinic address on /specialists/. #C0201F gives 5.6:1 and reads
 * as the same colour. The stray #FF0000 link on /scheduling/ measures 3.68:1.
 * ========================================================================== */
/* !important because Elementor sets this colour per element at id strength — without
 * it the rule was simply losing, and the "our services" / "how it works" /
 * "testimonials" eyebrow labels stayed at 4.15:1. The footer rules below are more
 * specific AND later, so they still win and keep that text white. */
.elementor-icon-list-text,
.ha-accordion__item-title-text { color: #c0201f !important; }

/* ...but never in the footer, which is dark navy. That rule is unscoped, so it also
 * catches the footer's contact list, where #c0201f on rgb(27,63,85) measures 1.6:1 —
 * the phone number and email effectively disappear into the background. A footer
 * rule currently out-specifies it, which is luck rather than design; this makes the
 * white explicit so the clinic's contact details cannot vanish. */
footer .elementor-icon-list-text,
.elementor-location-footer .elementor-icon-list-text { color: #ffffff !important; }

/* The two phone numbers are bare <a> elements with their text directly inside — no
 * .elementor-icon-list-text span like the email and address have — so the rule above
 * never reached them and they rendered rgb(51,65,85) on rgb(27,63,85): 1.2:1, an
 * invisible phone number on a clinic's website. `inherit` cannot fix it either,
 * because the <li> they sit in is that same slate. The colour has to be stated on
 * the item and its links directly. */
footer .elementor-icon-list-item,
footer .elementor-icon-list-item a,
.elementor-location-footer .elementor-icon-list-item,
.elementor-location-footer .elementor-icon-list-item a { color: #ffffff !important; }

/* The "Contact us" eyebrow sits in the navy CTA band above the footer — the only
 * other dark panel on the site. Making the red !important above dragged it to
 * 1.84:1 there, so it is pinned white too. Targeted by Elementor's element id,
 * which is baked into this static build and stable across rebuilds. */
.elementor-element-463024e6 .elementor-icon-list-text { color: #ffffff !important; }

/* The generic theme rule `a { color: var(--ast-global-color-0) }` paints footer links
 * blue on that navy. The list text sits in its own white span so it survives, but any
 * link text not wrapped in one would not. */
footer a[href^="tel:"],
footer a[href^="mailto:"],
.elementor-location-footer a[href^="tel:"],
.elementor-location-footer a[href^="mailto:"] { color: inherit; }

/* A lone Google Plus icon sits in the footer under the logo and tagline — framed
 * circle, 34x34, no link, no label, on all ten pages. Google Plus shut down in 2019.
 * It is the last survivor of the fake social row whose other 108 links were removed;
 * it stayed because it is an icon widget rather than a social-icons widget. */
.elementor-element-b00052b { display: none !important; }

/* =============================================================================
 * Headings must actually use Marcellus — Safari was falling back to sans-serif
 *
 * Elementor sets the heading face through a custom property
 * (--e-global-typography-*-font-family). Chrome matches that against the @font-face
 * family fine; WebKit does not, so every heading rendered in the sans fallback while
 * still reporting "Marcellus, sans-serif" as its computed style — which is why this
 * looked correct in devtools and wrong on screen.
 *
 * Measured in Safari 26.5 before this rule, per heading: rendered width was identical
 * to the sans-serif fallback to the pixel (403/231/507/480) while the same text set in
 * Marcellus measured 365/213/467/428. A literal family name sidesteps the variable.
 *
 * The fallbacks are serif on purpose. If the webfont ever fails to load the headings
 * should degrade to something with the same character, not to the sans face that made
 * this obvious in the first place.
 * ========================================================================== */
.elementor-heading-title {
  font-family: "Marcellus", "Iowan Old Style", "Palatino Linotype", Palatino,
               Georgia, "Times New Roman", serif !important;
}

/* =============================================================================
 * Specialists: the cardiologist carousel duplicated the list below it
 *
 * At desktop the page shows a 5-slide carousel of cardiologists and then a static
 * grid of all 12 physicians — the same five people twice. The carousel goes.
 *
 * Desktop only, and that restriction matters: below 1025px the static grid does not
 * exist at all. Measured at 390px and 880px, every physician name on the page is
 * inside a carousel (0 outside it), so hiding it everywhere would delete the entire
 * roster on phones and tablets.
 *
 * With the carousel gone the heading was left indented to its edge — "Cardiologists"
 * and its description sat at 100px while the physician cards start at 75px. The
 * 49.5px margin that produced that was there to clear the carousel, so it is reset
 * to the 25px the grid uses.
 * ========================================================================== */
@media (min-width: 1025px) {
  .elementor-element-8f68a85 { display: none !important; }
  .elementor-element-a3f9969 > div { margin-left: 25px !important; }
}

/* The Contact / Message / E-Mail / Address columns each carry a 10px inset that the
 * Quick Links column above them does not, so "Contact:" started at 520 while "Quick
 * Links" and its list started at 510. Dropping it lines the whole footer up on one
 * left edge; applied to all four columns so the row stays even with itself. */
footer .elementor-element-7fc2943 > .e-con,
.elementor-location-footer .elementor-element-7fc2943 > .e-con {
  padding-left: 0 !important;
}

/* =============================================================================
 * Footer contact rows: number beside its icon, not flung to the right
 *
 * Each row is a <li> holding TWO anchors — one carrying the icon with an empty text
 * span, one carrying the number — and Elementor's "full width link" option puts
 * width:100% on both. They therefore split the row in half and the number landed
 * ~146px from its icon. Sizing the anchors to their content closes that to 6px, and
 * centring puts the text on the icon's axis instead of 5-7px below it.
 * ========================================================================== */
footer .elementor-icon-list-item,
.elementor-location-footer .elementor-icon-list-item {
  align-items: center !important;
  gap: 6px;
}
footer .elementor-icon-list-item > a,
.elementor-location-footer .elementor-icon-list-item > a {
  width: auto !important;
  flex: 0 0 auto !important;
  align-items: center !important;
}
/* the icon-only anchor carries an empty label span; it would add a stray gap */
footer .elementor-icon-list-item > a > .elementor-icon-list-text:empty,
.elementor-location-footer .elementor-icon-list-item > a > .elementor-icon-list-text:empty {
  display: none;
}

/* =============================================================================
 * Hero eyebrow
 *
 * "WELCOME TO HORIZONS..." sits on a dark photograph. The contrast rule above turned
 * it #c0201f, which on that image is close to unreadable — worse than the brand red
 * it replaced. White is the only thing that reads reliably over a photo.
 * ========================================================================== */
.elementor-element-33c6a8af .elementor-icon-list-text { color: #ffffff !important; }

/* =============================================================================
 * Service-card hover: let the text catch up with the flood
 *
 * The red ripple fills the card in 0.7s but the text colour was on a 0.8s `all`
 * transition, so the words stayed dark against red and were unreadable for most of
 * the sweep. 0.2s puts the white text there almost as soon as the red arrives.
 * ========================================================================== */
.hover-card h1, .hover-card h2, .hover-card h3,
.hover-card h4, .hover-card h5, .hover-card h6,
.hover-card p, .hover-card span, .hover-card li {
  transition: color .2s ease !important;
}

/* =============================================================================
 * Line length, rather than hard line breaks
 *
 * These four blocks each stranded a word or two on their own line, but a <br> is the
 * wrong tool: it breaks in the same place at every width, and it cannot be put in the
 * copy safely because the same sentences are reused in <meta name="description"> and
 * og:description, where the quotes in the tag terminated the attribute.
 *
 * Capping the measure instead lets each block break wherever it runs out of room. The
 * caps sit just above the intended first line and below the next word, measured at
 * 60px/40px in Marcellus:
 *
 *   hero h1      "…One-Stop" 1117 · +"Cardiovascular" 1531  -> cap 1150
 *   hero sub     "…patient care," 749                        -> cap 800
 *   CTA h2       "…or Book" 633 · +"an" 717                   -> cap 700
 *   what-we-do   "Advanced Cardiac" 330 · +"Diagnostics" 544  -> cap 470
 *
 * Desktop only. Below 1025px every one of these containers is already narrower than
 * its cap, so the rule is inert and the text wraps naturally. text-wrap: balance
 * evens out the resulting lines where the browser supports it.
 * ========================================================================== */
@media (min-width: 1025px) {
  .elementor-element-7420e928 .elementor-heading-title { max-width: 1150px; }
  /* !important: Elementor sets max-width:100% on the widget at higher specificity. */
  .elementor-element-615ea072 { max-width: 800px !important; }
  .elementor-element-3837d6a6 .elementor-heading-title { max-width: 470px; }

  /* "Ready to Refer or Book an Appointment?" could not be fixed by capping alone: its
   * column is 595px and the first line needs 633, so the heading was breaking three
   * ways. The column is widened to 690 and then capped, which puts "an Appointment?"
   * on the second line. The paragraph and button beside it keep 499px, still a
   * comfortable measure. */
  .elementor-element-1c5b4c51 { flex: 0 0 690px !important; max-width: 690px !important; }
  .elementor-element-52230228 .elementor-heading-title { max-width: 700px; }
}

.elementor-heading-title { text-wrap: balance; }

/* ...except the hero. Balancing evens the two lines by breaking inside the hyphen of
 * "One-Stop", giving "Saskatchewan’s Comprehensive One-" / "Stop Cardiovascular…".
 * Left to fill its measure it ends line one on "One-Stop" exactly, which is the
 * intended split. */
.elementor-element-7420e928 .elementor-heading-title { text-wrap: wrap; }

/* Between tablet and desktop the "What we do" and "Contact us" blocks stayed
 * side-by-side while their columns shrank to 280px and 380px — with the heading still
 * at 40px, "Advanced Cardiac Diagnostics & Care" shattered into four lines and the
 * CTA into three. Stacking them in that band gives each heading the full 760px and
 * both settle onto a single line. */
/* =============================================================================
 * About section: the experience photo painted 30px past the bottom of its own box
 * and sat on top of the two check-mark items below it.
 *
 * The image is 295x176 and is stretched to the column width. Its widget is the only
 * child of a `flex-direction: column` container, so the widget's height is its
 * max-content height — and for an image whose width is a percentage, max-content
 * resolves against the *intrinsic* 295x176, giving 176px. The image then paints at
 * the definite used width (346px at a 390 viewport, 695px by 767) and the height that
 * ratio implies, which is 206px and rising. The gap grows with the viewport, which is
 * why it merely touched the check marks on a phone and covered them by tablet.
 *
 * Nothing on the widget fixes this — height:auto, min-height:fit-content, aspect-ratio
 * and flex-shrink:0 were each tried and each left it at 176. The constraint is the
 * flex formatting context itself, and the container holds exactly one child, so block
 * layout is both sufficient and equivalent.
 *
 * NB the source really is 295x176, so it is upscaled 2.4x by 767px. That is the
 * vendor's asset, not a bug here — it wants replacing with real artwork.
 * ========================================================================== */
.elementor-element-37367101 { display: block; }
.elementor-element-23e83194 img { display: block; width: 100%; height: auto; }

/* =============================================================================
 * "Call Us" card — the number and the More About button
 *
 * The number must never wrap: 306-518-9081 was breaking mid-digits when the button
 * squeezed it. That part is a plain `white-space: nowrap` and applies everywhere.
 *
 * Whether the two sit side by side is a question about the CARD's width, not the
 * viewport's, and those do not track each other: the About section is two columns
 * down to 768px and one column below it, so the card is 375px wide at 834 and 648px
 * wide at 700. A viewport media query gets this wrong in both directions — the
 * earlier `max-width: 1024px { flex-wrap: wrap }` stacked the button at 1024 and at
 * 600 with room to spare, which is the hole in the card that was reported.
 *
 * So the card is made a query container and asks about itself. The thresholds are
 * measured, not derived: flexbox breaks the line on each item's *hypothetical* size,
 * and the button container's is ~193px, not the 167px the button paints — so above
 * 768 the row needs 199 + 20 + 193 = 412, and below it (smaller type, no gap, 15px
 * padding) 168 + 0 + 193 = 362. Two regimes, two thresholds. Above the threshold the
 * icon box takes its natural width and the button container takes the rest and
 * right-aligns; below it they stack.
 *
 * The icon box must not shrink instead of wrapping (`flex: 0 0 auto`, not `0 1 auto`):
 * the number is nowrapped, so it does not shrink with its box — it hangs out over the
 * card edge, which at 390px put the arrow through the card's right border.
 *
 * Browsers without container queries keep the stacked layout — no worse than before.
 *
 * Testimonials: the section is two columns, and the left one holds the portrait that
 * is hidden below 1025px (see the tablet rules above). The image went, its 410px
 * column did not, so every quote was crammed into the remaining 410px — a couple of
 * words per line. Dropping the empty column gives the content the full 820px.
 * ========================================================================== */
/* `wrap` is what the container query overrides: with Elementor's width:100% on each
   child it stacks them, and a non-shrinking pair inside the query shares the row. */
.elementor-element-30d0dca { container-type: inline-size; flex-wrap: wrap; }
.elementor-element-30d0dca a[href^="tel:"],
.elementor-element-30d0dca .elementor-icon-box-description { white-space: nowrap; }

@media (min-width: 768px) {
  @container (min-width: 412px) {
    .elementor-element-30d0dca > .elementor-element-381b4afc { flex: 0 0 auto !important; width: auto !important; }
    .elementor-element-30d0dca > .elementor-element-7acceda3 {
      flex: 1 1 auto !important; width: auto !important; align-items: flex-end !important;
    }
    .elementor-element-30d0dca > .elementor-element-7acceda3 > * { margin-inline: auto 0 !important; }
  }
  /* stacked: put the button under the number at the left edge, so it reads as a
     decision rather than as something that fell off the row */
  @container (max-width: 411.9px) {
    .elementor-element-30d0dca > .elementor-element-7acceda3 { align-items: flex-start !important; }
  }
}

@media (max-width: 767px) {
  @container (min-width: 362px) {
    .elementor-element-30d0dca > .elementor-element-381b4afc { flex: 0 0 auto !important; width: auto !important; }
    .elementor-element-30d0dca > .elementor-element-7acceda3 {
      flex: 1 1 auto !important; width: auto !important; align-items: flex-end !important;
    }
    .elementor-element-30d0dca > .elementor-element-7acceda3 > * { margin-inline: auto 0 !important; }
    /* Elementor stacks the icon above the label below 768; there is room on this row,
       so keep the inline lockup the design shows */
    .elementor-element-30d0dca .elementor-icon-box-wrapper {
      flex-direction: row !important; align-items: center !important; text-align: start !important;
    }
    .elementor-element-30d0dca .elementor-icon-box-icon,
    .elementor-element-30d0dca .elementor-icon-box-content { width: auto !important; text-align: start !important; }
  }
}

@media (max-width: 1024px) {
  .elementor-element-180a6728 { display: none !important; }
  .elementor-element-4424e308 { flex: 1 1 100% !important; max-width: 100% !important; }
}

@media (max-width: 1024px) {
  .elementor-element-4905869d,
  .elementor-element-463024e6 { flex-direction: column !important; }

  .elementor-element-4905869d > .e-con,
  .elementor-element-463024e6 > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* =============================================================================
 * Footer columns collapse between tablet and desktop
 *
 * The contact row is a nowrap flex holding Contact / E-mail / Address. At 880px it
 * is 467px wide, so the three columns are squeezed to 104 / 123 / 185px and
 * ums.hcpd@gmail.com wraps underneath its own envelope icon, three lines tall and
 * 114px high. Elementor sets flex-wrap per element at id strength, hence the
 * !important. Letting the row wrap gives each column a usable width instead.
 * ========================================================================== */
@media (max-width: 1024px) {
  footer .e-con.e-flex,
  .elementor-location-footer .e-con.e-flex { flex-wrap: wrap !important; }

  footer .e-con.e-flex > .e-con,
  .elementor-location-footer .e-con.e-flex > .e-con { flex: 1 1 240px; min-width: 0; }

  /* Wrapping alone still left the footer running down one side. Its outer row put the
   * logo and tagline in a 385px column and then stacked Quick Links, Contact,
   * Message, E-Mail and Address in the other — the whole footer 2342px tall with half
   * the width unused. Giving the outer columns the full width and letting the contact
   * blocks sit side by side inside them puts all three on one row at 900px and brings
   * the footer down to 2038px.
   *
   * These are more specific than the two rules above on purpose: the general 240px
   * basis is right for the contact blocks and wrong for the outer columns, which need
   * to span. */
  footer .elementor-element-d492fd7,
  .elementor-location-footer .elementor-element-d492fd7 { flex-wrap: wrap !important; }

  footer .elementor-element-d492fd7 > .e-con,
  .elementor-location-footer .elementor-element-d492fd7 > .e-con {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  footer .elementor-element-7fc2943 > .e-con,
  .elementor-location-footer .elementor-element-7fc2943 > .e-con {
    flex: 1 1 200px !important;
  }
}

/* Widening the column was not enough on its own. Inside each contact link the icon
 * span is itself display:flex and stretches to the full row width, so the label had
 * nowhere to go but the next line — the envelope sat alone with the address dangling
 * underneath it. Laying the link out as a row and letting the icon size to its
 * content puts the two back on one line at every width. */
footer .elementor-icon-list-item > a,
.elementor-location-footer .elementor-icon-list-item > a {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
}
footer .elementor-icon-list-icon,
.elementor-location-footer .elementor-icon-list-icon {
  flex: 0 0 auto !important;
  width: auto !important;
}
footer .elementor-icon-list-text,
.elementor-location-footer .elementor-icon-list-text {
  min-width: 0;
  overflow-wrap: break-word;
}

/* At desktop the three contact columns were sized 176 / 211 / 317, leaving the email
 * 166px for a string that needs 172 — so ums.hcpd@gmail.com broke as "…gmail.co / m"
 * while the address column sat on spare room. Sizing the columns to their content
 * instead of fixed proportions gives the email the 6px it was short.
 *
 * Desktop only. Below 1025px the columns need the opposite treatment — a 240px floor
 * and permission to wrap — and this rule sits later in the file, so left unscoped it
 * overrode that and squeezed the tablet footer until even "Contact:" broke across
 * two lines. */
@media (min-width: 1025px) {
  footer .e-con.e-flex > .e-con,
  .elementor-location-footer .e-con.e-flex > .e-con { flex: 0 1 auto; min-width: 0; }
}

.site-content a[style*="#FF0000"],
.site-content span[style*="#FF0000"],
.site-content [style*="color: #FF0000"] { color: #c0201f !important; }

/* =============================================================================
 * Touch targets — measured below the 24x24 AA floor on a 390px phone
 * ========================================================================== */
@media (max-width: 1024px) {
  .elementor-location-footer .elementor-icon-list-item a {
    display: block;
    padding-block: 13px;
  }
  .elementor-form .elementor-button,
  .elementor-form .elementor-field-textual { min-height: 48px; }
  .swiper-pagination-bullet {
    width: 14px !important;
    height: 14px !important;
    position: relative;
  }
  .swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    inset: -15px;
  }
}

/* The phone number inside an icon-box description is an inline link with no padding:
 * 93x19 on a 390px phone, the smallest target on the site and the one most likely to
 * be tapped. Vertical padding on an inline box grows the hit area without changing
 * the line height, so nothing reflows. */
.elementor-icon-box-description a[href^="tel:"] { padding-block: 6px; }

/* The five "Learn More" buttons on Common Cardiac Conditions render 85x15 at every
 * width — the only Elementor buttons on the site with no padding of their own. The
 * zero comes from a per-element rule in post-384.css whose id selector outranks
 * anything reasonable here, hence the !important. Takes them to 85x31. */
.elementor-widget-button .elementor-button-link.elementor-size-sm {
  padding-block: 8px !important;
  display: inline-block;
}

/* =============================================================================
 * Nested-carousel dots ran off the left edge on /contact-us/
 *
 * Elementor centres these dots with translateX(-50%) plus inset-inline-start:50%,
 * but Swiper's own sheet sets width:100% and left:0 on the same element and wins,
 * because Elementor injects e-swiper.min.css at runtime — after this file. The -50%
 * then shifted a full-width strip to left:-171 and the dots sat off-canvas.
 *
 * Restoring both halves of Elementor's intent needs one step more specificity than
 * the rules it is competing with, hence the doubled class. Scoped to n-carousel: the
 * other carousels never had the problem and are untouched.
 * ========================================================================== */
.elementor-widget-n-carousel .swiper-pagination-bullets.swiper-pagination-horizontal {
  width: max-content;
  left: 50%;
}

/* =============================================================================
 * Skip link
 *
 * It does reveal on focus (Astra's clip:auto!important gets through), but every
 * other part of Astra's focus style is overridden: it lands transparent, unpadded
 * and flush against the top edge, so it reads as loose blue text over whatever is
 * behind it. Restated here, where it loads last.
 * ========================================================================== */
.skip-link.screen-reader-text:focus {
  top: 8px;
  left: 8px;
  padding: 12px 20px;
  background: #ffffff;
  color: #0b3a5b;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  outline: 3px solid #0b6bcb;
  outline-offset: 2px;
  text-decoration: none;
}

/* Respect reduced-motion preferences for the hover growth. */
@media (prefers-reduced-motion: reduce) {
  .elementor-animation-grow:hover {
    transform: none !important;
  }
}

/* =============================================================================
 * Referral forms block  (/referrals/)
 *
 * Implements design_handoff_referral_forms. The original page stacked six Happy
 * Addons PDF-viewer widgets, each embedding a whole document; this replaces them with
 * one card per form carrying a real render of its first page.
 *
 * The handoff's four brand values are the ones already in use here — red #e22e2d,
 * navy #1b3f55, cream #fcf4f1, white — and its type is Marcellus + Sora, both already
 * self-hosted, so nothing new is loaded for this block.
 *
 * One documented deviation: the handoff specifies IBM Plex Mono for the 11px meta
 * line. Adding a fourth webfont for one small label is not worth the request, so the
 * system monospace stack is used instead. It keeps the monospaced character and costs
 * nothing.
 *
 * Breakpoints follow the handoff: 3 columns >=1024, 2 columns 640-1023, and the
 * stacked mobile card below 640.
 * ========================================================================== */
.rf-block {
  --rf-red: #e22e2d;
  --rf-navy: #1b3f55;
  --rf-cream: #fcf4f1;
  --rf-border: rgba(27, 63, 85, .14);
  --rf-hair: rgba(27, 63, 85, .10);
  --rf-body: rgba(27, 63, 85, .72);
  --rf-muted: rgba(27, 63, 85, .75);
  --rf-meta: rgba(27, 63, 85, .75);
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.rf-block .rf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rf-block .rf-head__title {
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--rf-navy);
  margin: 0;
}
.rf-block .rf-head__sub {
  font-family: "Sora", sans-serif;
  font-size: 13px;
  color: var(--rf-muted);
  margin: 0;
}

.rf-block .rf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.rf-block .rf-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rf-block .rf-card:hover {
  border-color: rgba(27, 63, 85, .28);
  box-shadow: 0 8px 24px rgba(27, 63, 85, .08);
}

.rf-block .rf-card__tray {
  background: var(--rf-cream);
  padding: 22px 0;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--rf-hair);
}
.rf-block .rf-card__page {
  width: 160px;
  aspect-ratio: 8.5 / 11;
  height: auto;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--rf-border);
  box-shadow: 0 3px 10px rgba(27, 63, 85, .10);
}
.rf-block .rf-card__page--empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  box-shadow: none;
}
.rf-block .rf-card__page--empty span {
  font-family: "Sora", sans-serif;
  font-size: 12px;
  color: var(--rf-meta);
}

.rf-block .rf-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  flex: 1;
}
.rf-block .rf-card__tag {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rf-red);
  margin: 0;
}
.rf-block .rf-card__title {
  font-family: "Sora", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  color: var(--rf-navy);
  margin: 0;
}
.rf-block .rf-card__desc {
  font-family: "Sora", sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rf-body);
  margin: 0;
  flex: 1;   /* bottom-aligns the footer row across cards in a row */
}
.rf-block .rf-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
}
.rf-block .rf-card__meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--rf-meta);
}
.rf-block .rf-card__btn {
  font-family: "Sora", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background: var(--rf-red);
  padding: 12px 18px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.rf-block .rf-card__btn:hover,
.rf-block .rf-card__btn:focus-visible { background: var(--rf-navy); color: #fff; }
.rf-block .rf-card__btn--ghost {
  background: transparent;
  color: var(--rf-navy);
  border: 1px solid var(--rf-border);
}
.rf-block .rf-card__btn--ghost:hover,
.rf-block .rf-card__btn--ghost:focus-visible { background: var(--rf-navy); color: #fff; }

/* "Coming soon" — the Holter service has not launched, so there is nothing to download
 * and nothing to ask the clinic for. It is a <span>, not a link, and deliberately not
 * in the action colour: flat, muted, no border, no hover, default cursor. A red pill
 * that does nothing when tapped is worse than no pill at all. */
.rf-block .rf-card__btn--soon {
  background: transparent;
  color: var(--rf-muted, #6b7280);
  border: 0;
  padding-inline: 0;
  font-weight: 400;
  font-style: italic;
  cursor: default;
  transition: none;
}
.rf-block .rf-card__btn--soon:hover { background: transparent; color: var(--rf-muted, #6b7280); }

.rf-block .rf-help {
  background: var(--rf-navy);
  border-radius: 10px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.rf-block .rf-help__title {
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  color: #fff;
  margin: 0 0 8px;
}
.rf-block .rf-help__body {
  font-family: "Sora", sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  max-width: 640px;
  margin: 0;
}
.rf-block .rf-help__btn {
  font-family: "Sora", sans-serif;
  font-size: 15px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.rf-block .rf-help__btn:hover,
.rf-block .rf-help__btn:focus-visible { background: #fff; color: var(--rf-navy); }

.rf-block a:focus-visible { outline: 2px solid var(--rf-red); outline-offset: 2px; }

@media (max-width: 1023px) {
  .rf-block .rf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Below 640 the handoff switches to a horizontal card: thumbnail beside the text,
 * with a full-width download beneath. */
@media (max-width: 639px) {
  .rf-block { gap: 18px; }
  .rf-block .rf-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rf-block .rf-head__title { font-size: 26px; }
  .rf-block .rf-head__sub { font-size: 12.5px; }

  .rf-block .rf-grid { grid-template-columns: 1fr; gap: 14px; }

  .rf-block .rf-card {
    padding: 16px;
    gap: 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "tray body" "btn btn";
    overflow: visible;
  }
  .rf-block .rf-card__tray {
    grid-area: tray;
    background: var(--rf-cream);
    padding: 8px;
    border: 0;
    border-radius: 4px;
    align-self: start;
  }
  .rf-block .rf-card__page { width: 62px; }
  .rf-block .rf-card__body { grid-area: body; padding: 0; gap: 6px; }
  .rf-block .rf-card__title { font-size: 16px; line-height: 1.3; }
  .rf-block .rf-card__desc { font-size: 13px; line-height: 1.55; flex: 0 1 auto; }
  .rf-block .rf-card__tag { font-size: 9.5px; }
  .rf-block .rf-card__foot { display: contents; }
  .rf-block .rf-card__meta { font-size: 10.5px; }
  .rf-block .rf-card__btn {
    grid-area: btn;
    text-align: center;
    font-size: 15px;
    padding: 15px 18px;
    border-radius: 8px;
  }

  .rf-block .rf-help { grid-template-columns: 1fr; padding: 22px; gap: 18px; }
  .rf-block .rf-help__title { font-size: 22px; }
  .rf-block .rf-help__body { font-size: 13.5px; }
  .rf-block .rf-help__btn { text-align: center; padding: 14px; }
}

/* =============================================================================
 * Site footer — F2 split layout  (design_handoff_footer)
 *
 * Replaces the Elementor footer on every page. That footer put the logo and tagline
 * in one 385px column and stacked Quick Links, Contact, Message, E-Mail and Address
 * down the other, running to 2300px on a tablet with half the width unused.
 *
 * Uses only the site's existing values: navy #1b3f55, red #e22e2d, Marcellus and Sora,
 * both already self-hosted. The white knockout logo and the clinic exterior photo are
 * the ones already on the site — the photo is the full-resolution original (1448x1086)
 * that the old 324px footer crop was made from.
 *
 * The panel is inset and rounded rather than full-bleed, per the handoff, with
 * overflow:hidden so the photo clips to the radius.
 * ========================================================================== */
.ft {
  --ft-navy: #1b3f55;
  --ft-red: #e22e2d;
  --ft-body: rgba(255, 255, 255, .78);
  --ft-muted: rgba(255, 255, 255, .55);
  --ft-rule: rgba(255, 255, 255, .18);
  background: #fff;
  padding: 0 16px 16px;
}
.ft .ft__panel {
  background: var(--ft-navy);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 360px;
}
.ft .ft__content { padding: 56px 48px 0; min-width: 0; }
.ft .ft__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.ft .ft__sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- newsletter ---- */
.ft .ft__news { padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.ft .ft__news-title {
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400; font-size: 38px; line-height: 1.2;
  color: #fff; margin: 0;
}
.ft .ft__news-title .ft__nb { display: block; }   /* forced second line; mobile re-inlines it */
.ft .ft__form { display: flex; align-items: center; gap: 12px; max-width: 520px; }
/* The pre-footer no longer collects an email for a list that does not exist; it points
   at the condition guides instead. Padding is set explicitly — Astra styles bare
   controls and this site has already been bitten by inheriting it. */
.ft .ft__news-body { color: var(--ft-muted); font-size: 15px; max-width: 520px; margin: 0; }
.ft .ft__news-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 12px 22px; border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px; color: #fff; text-decoration: none; font-size: 15px;
  transition: background .15s ease, color .15s ease;
}
.ft .ft__news-link:hover, .ft .ft__news-link:focus-visible { background: #fff; color: var(--ft-navy); }
.ft .ft__input {
  flex: 1; min-width: 0;
  font-family: "Sora", sans-serif; font-size: 15px; color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px; padding: 16px 22px;
}
.ft .ft__input::placeholder { color: var(--ft-muted); }
/* `padding: 0` is doing real work. Astra styles bare `button` with `padding: 15px 30px`,
   and nothing here overrode it, so with `box-sizing: border-box` the used width could not
   drop below the 60px of horizontal padding: the button rendered 60x50 — an ellipse, not
   a circle — and its content box was squeezed to zero width starting 30px in. A grid item
   wider than its area is clamped to the start edge rather than centred, which put the
   18px arrow's centre at x=39 in a 60px button: 9px right of centre, which is exactly
   what it looked like. */
.ft .ft__submit {
  flex: none; width: 50px; height: 50px; padding: 0;
  border-radius: 999px; border: 0;
  background: var(--ft-red); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease, color .15s ease;
}
.ft .ft__submit:hover, .ft__submit:focus-visible { background: #fff; color: var(--ft-navy); }

/* ---- brand / links / address ---- */
.ft .ft__info {
  border-top: 1px solid var(--ft-rule);
  padding: 40px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.ft .ft__logo { width: 233px; height: auto; display: block; }
.ft .ft__tagline {
  font-family: "Sora", sans-serif; font-size: 15px; line-height: 1.7;
  color: var(--ft-body); max-width: 250px; margin: 14px 0 0;
}
.ft .ft__contact { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.ft .ft__contact a {
  font-family: "Sora", sans-serif; font-size: 14.5px;
  color: var(--ft-body); text-decoration: none; transition: color .15s ease;
}
.ft .ft__contact li:first-child a { color: #fff; }
.ft .ft__contact a:hover, .ft__contact a:focus-visible { color: #fff; }
.ft .ft__label { display: none; }
/* ...except "Message", which the design keeps inline above 767px so the second number
 * is not mistaken for a duplicate of the first. Below that every field is labelled
 * (see the mobile block), so this must not leak down — an unscoped nth-child(2) rule
 * outspecifies `.ft .ft__label{display:block}` there and left one field styled
 * differently from its three neighbours. */
@media (min-width: 768px) {
  .ft .ft__contact li:nth-child(2) .ft__label {
    display: inline; font-family: "Sora", sans-serif; font-size: 14.5px;
    letter-spacing: normal; text-transform: none; color: var(--ft-body);
  }
  .ft .ft__contact li:nth-child(2) .ft__label::after { content: " "; }
  .ft .ft__contact li:nth-child(2) { display: block; }
}
.ft .ft__addr-m { display: none; }                /* address lives in the right column */

.ft .ft__cols { display: grid; gap: 26px; align-content: start; }
.ft .ft__h {
  font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 19px;
  color: #fff; margin: 0 0 14px;
}
.ft .ft__links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
}
.ft .ft__links a, .ft__addr-d a {
  font-family: "Sora", sans-serif; font-size: 14.5px; line-height: 1.7;
  color: var(--ft-body); text-decoration: none; transition: color .15s ease;
}
.ft .ft__links a:hover, .ft__links a:focus-visible,
.ft .ft__addr-d a:hover, .ft__addr-d a:focus-visible { color: #fff; }
.ft .ft__addr-d p { margin: 0; }

.ft .ft__copy { border-top: 1px solid var(--ft-rule); padding: 20px 0; }
.ft .ft__copy p {
  font-family: "Sora", sans-serif; font-size: 13.5px; color: var(--ft-muted); margin: 0;
}

.ft a:focus-visible, .ft button:focus-visible, .ft input:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}

/* ---- tablet: photo leaves the rail and becomes a band ---- */
@media (max-width: 1199px) {
  .ft { padding: 0 14px 14px; }
  .ft .ft__panel { grid-template-columns: 1fr; border-radius: 18px; }
  .ft .ft__content { padding: 0; display: contents; }
  .ft .ft__news { padding: 44px 40px 36px; }
  .ft .ft__news-title { font-size: 32px; }
  .ft .ft__info { padding: 34px 40px; gap: 40px; }
  .ft .ft__copy { padding: 18px 40px; order: 3; }
  .ft .ft__photo { height: 200px; order: 2; }
}

/* ---- mobile: single column, labelled contact fields ---- */
@media (max-width: 767px) {
  .ft { padding: 0 10px 10px; }
  .ft .ft__panel { border-radius: 16px; }
  .ft .ft__news { padding: 36px 20px 28px; gap: 18px; }
  .ft .ft__news-title { font-size: 26px; line-height: 1.25; }
  .ft .ft__news-title .ft__nb { display: inline; }
  .ft .ft__input { padding: 15px 20px; font-size: 14.5px; }
  .ft .ft__submit { width: 46px; height: 46px; }

  .ft .ft__info { grid-template-columns: 1fr; gap: 0; padding: 0; border-top: 0; }
  .ft .ft__brand { padding: 26px 20px; border-top: 1px solid var(--ft-rule); }
  .ft .ft__tagline { font-size: 14.5px; max-width: none; }

  /* contact becomes label + value pairs, and the address joins it */
  .ft .ft__contact {
    margin: 24px 0 0; gap: 18px;
    border-top: 1px solid var(--ft-rule); padding-top: 24px;
  }
  .ft .ft__contact li { display: grid; gap: 6px; }
  .ft .ft__label {
    display: block;
    font-family: "Sora", sans-serif; font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ft-muted);
  }
  .ft .ft__contact a { font-size: 16px; line-height: 1.6; color: #fff; }
  .ft .ft__addr-m { display: grid; }
  .ft .ft__addr-d { display: none; }

  .ft .ft__cols { padding: 24px 20px; border-top: 1px solid var(--ft-rule); }
  .ft .ft__copy { padding: 18px 20px; }
  .ft .ft__copy p { font-size: 13px; }
  .ft .ft__photo { height: 170px; }
}

/* =============================================================================
 * 404 page (dist/404.html)
 *
 * Standalone — no Elementor markup — so it cannot break when the mirror changes.
 * It borrows only the two webfonts, this sheet and the real footer, which is why it
 * still reads as part of the site. The old WordPress slugs (/contact, /about, /home)
 * are still in Google, so this page will get real traffic.
 * ========================================================================== */
.nf-body { margin: 0; background: #fff; }
.nf {
  max-width: 660px; margin: 0 auto; padding: 72px 24px 88px;
  text-align: center;
}
.nf__logo { display: inline-block; margin-bottom: 40px; }
.nf__logo img { width: 200px; height: auto; display: block; }
.nf__code {
  font-family: "Sora", sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #c0201f; margin: 0 0 10px;
}
.nf__title {
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  font-size: 42px; line-height: 1.15; color: #1b3f55; margin: 0 0 18px;
}
.nf__body {
  font-family: "Sora", sans-serif; font-size: 16px; line-height: 1.7;
  color: #69615d; margin: 0 auto 34px; max-width: 46ch;
}
.nf__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
  margin-bottom: 34px;
}
.nf__links a {
  font-family: "Sora", sans-serif; font-size: 14.5px; color: #1b3f55;
  text-decoration: none; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(27, 63, 85, .18); transition: background .15s ease, color .15s ease;
}
.nf__links a:hover, .nf__links a:focus-visible { background: #1b3f55; color: #fff; }
.nf__call a {
  font-family: "Sora", sans-serif; font-size: 15px; font-weight: 500; color: #fff;
  background: #e22e2d; text-decoration: none;
  display: inline-block; padding: 14px 30px; border-radius: 999px;
}
.nf__call a:hover, .nf__call a:focus-visible { background: #1b3f55; }
.nf a:focus-visible { outline: 2px solid #1b3f55; outline-offset: 3px; }

@media (max-width: 640px) {
  .nf { padding: 48px 18px 64px; }
  .nf__title { font-size: 30px; }
  .nf__logo img { width: 168px; }
}

/* =============================================================================
 * /specialists/ — the S1B handoff (design_handoff_specialists)
 *
 * The whole page body is generated by specialistsBlock() in build.mjs, so unlike the
 * rest of this file these rules are not fighting Elementor — nothing of Elementor's
 * markup survives inside .sp. The !importants that appear are only where a global
 * theme rule (.elementor h2, .elementor img) reaches in from outside.
 *
 * Photo-free by design: a 5px red bar stands in for the portrait on a cardiologist
 * card, a 28x2px red tick for the avatar on an internal medicine card. Both slots are
 * documented in the handoff; adding headshots later does not restructure anything.
 *
 * Breakpoints are the handoff's: >=1200 desktop, 768-1199 tablet, <768 mobile rows.
 * ========================================================================== */
.sp {
  --sp-navy: #1b3f55;
  --sp-red: #e22e2d;
  --sp-cream: #fcf4f1;
  --sp-body: rgba(27, 63, 85, .72);
  --sp-muted: rgba(27, 63, 85, .75);
  --sp-border: rgba(27, 63, 85, .14);
  --sp-hair: rgba(27, 63, 85, .10);
  --sp-dash: rgba(27, 63, 85, .25);
  font-family: "Sora", sans-serif;
  color: var(--sp-body);
  background: #fff;
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp p { margin: 0; }
.sp h1, .sp h2, .sp h3 {
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400;
  color: var(--sp-navy);
  margin: 0;
}
.sp a:focus-visible, .sp button:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.sp-hero a:focus-visible { outline-color: #fff; }

/* ---- hero ---- */
.sp-hero {
  background: var(--sp-navy);
  padding: 80px 56px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
  /* The band is the same height on every page whatever the intro's length, so the
     heading lands in the same place as you move between them. These are the S1B hero
     heights at each design width; a longer intro still grows the band.
     Content stays top-aligned deliberately — centring it in a min-height band would
     push the heading down whenever the intro is a line shorter, which is exactly what
     this is meant to prevent. */
  min-height: 334px;
}
.sp-hero__eyebrow {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.sp-hero__title { font-size: 60px !important; color: #fff !important; line-height: 1.1; }
.sp-hero__intro {
  font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .78);
  max-width: 720px;
  /* `balance` evens the lines instead of leaving a short last one. On /scheduling/ the
     last line was 177px of a 600px measure at tablet, which stranded "(see Referrals)"
     almost alone; balanced it carries 439px. Desktop is untouched — two even lines
     already. Measured, not assumed. */
  text-wrap: balance;
}

/* ---- sections ---- */
.sp-sec { padding: 64px 56px; }
.sp-sec--white { background: #fff; }
.sp-sec--cream { background: var(--sp-cream); }

.sp-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding-bottom: 18px; margin-bottom: 28px;
  border-bottom: 1px solid var(--sp-border);
}
.sp-head__title { font-size: 38px !important; line-height: 1.2; }
.sp-head__note {
  font-size: 14.5px; line-height: 1.7; color: var(--sp-body);
  max-width: 620px; margin-top: 10px !important;
}
.sp-head__count { font-size: 13px; color: var(--sp-muted); white-space: nowrap; }
.sp-sec__intro {
  font-size: 15px; line-height: 1.75; color: var(--sp-body);
  max-width: 820px; margin-top: 12px !important;
}

/* ---- the clinic line under Internal Medicine ---- */
.sp-clinic { display: flex; gap: 10px; align-items: baseline; margin-top: 16px !important; }
.sp-clinic__label {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sp-red); flex: none;
}
.sp-clinic__addr { font-size: 14px; line-height: 1.6; color: var(--sp-body); }

/* ---- grids ---- */
.sp-grid { display: grid; margin-top: 28px; }
.sp-grid--cardio { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sp-grid--im { grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---- cardiologist card ---- */
.sp-doc {
  border: 1px solid var(--sp-border); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
}
.sp-doc__accent { height: 5px; background: var(--sp-red); }   /* stands in for the portrait */
.sp-doc__body { padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sp-doc__name { font-size: 25px !important; line-height: 1.2; }
.sp-doc__creds { font-size: 13.5px; line-height: 1.6; color: var(--sp-body); }
.sp-doc__clinic { margin-top: auto; border-top: 1px solid var(--sp-hair); padding-top: 12px; }
.sp-doc__label {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(226, 46, 45, .75); margin-bottom: 4px !important;
}
.sp-doc__addr { font-size: 13.5px; line-height: 1.6; color: var(--sp-body); }

/* ---- referral card, last cell of the cardiologist grid ---- */
.sp-ref {
  border: 1px dashed var(--sp-dash); border-radius: 12px; padding: 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.sp-ref__title { font-size: 24px !important; line-height: 1.25; }
.sp-ref__body { font-size: 14px; line-height: 1.7; color: var(--sp-body); }
.sp-ref__btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 14px; line-height: 1;
  background: var(--sp-red); color: #fff; text-decoration: none;
  padding: 13px 22px; border-radius: 8px; transition: background .15s ease;
}
.sp-ref__btn:hover, .sp-ref__btn:focus-visible { background: var(--sp-navy); color: #fff; }

/* ---- internal medicine card ---- */
.sp-im {
  background: #fff; border-radius: 10px; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.sp-im__tick { width: 28px; height: 2px; background: var(--sp-red); display: block; }
.sp-im__name { font-size: 21px !important; line-height: 1.2; }
.sp-im__spec { font-size: 13.5px; color: var(--sp-body); }

/* ---- obesity and diabetes ---- */
.sp-diab { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.sp-diab__copy { display: flex; flex-direction: column; gap: 18px; }
.sp-diab__copy p { font-size: 15px; line-height: 1.8; color: var(--sp-body); }
.sp-panel {
  background: var(--sp-cream); border-radius: 12px; padding: 36px;
  display: flex; flex-direction: column; gap: 18px;
}
.sp-panel__title { font-size: 24px !important; line-height: 1.25; }
.sp-panel__line { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); }
.sp-panel__line + .sp-panel__line { margin-top: -6px !important; }

/* =============== tablet — 768 to 1199 =============== */
@media (max-width: 1199px) {
  .sp-hero { padding: 56px 40px; min-height: 296px; }
  .sp-hero__title { font-size: 46px !important; }
  .sp-hero__intro { font-size: 15.5px; max-width: 600px; }
  .sp-sec { padding: 48px 40px; }
  .sp-head { display: block; }
  .sp-head__count { display: none; }        /* the count is desktop chrome only */
  .sp-head__title { font-size: 32px !important; }
  .sp-grid--cardio { grid-template-columns: 1fr 1fr; gap: 22px; }
  .sp-doc__body { padding: 24px; }
  .sp-doc__name { font-size: 24px !important; }
  .sp-ref { padding: 26px; }
  .sp-ref__title { font-size: 22px !important; }
  .sp-grid--im { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .sp-im__name { font-size: 20px !important; }
  .sp-diab { grid-template-columns: 1fr; gap: 24px; }
  .sp-diab__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .sp-panel { padding: 28px; }
  .sp-panel__title { font-size: 22px !important; }
}

/* =============== mobile — under 768: cards become rule-separated rows =============== */
@media (max-width: 767px) {
  .sp-hero { padding: 40px 20px; align-items: flex-start; text-align: left; min-height: 271px; }
  .sp-hero__eyebrow { font-size: 11px; }
  .sp-hero__title { font-size: 36px !important; }
  .sp-hero__intro { font-size: 14.5px; }
  .sp-sec { padding: 30px 20px; }
  .sp-sec--cream { padding-block: 26px; }
  .sp-head__title { font-size: 27px !important; line-height: 1.25; }
  .sp-head { padding-bottom: 12px; margin-bottom: 4px; }

  /* cardiologists: rows, not boxes — a phone-length stack of cards reads as noise */
  .sp-grid--cardio { display: block; margin-top: 0; }
  .sp-doc {
    border: 0; border-radius: 0; border-top: 1px solid var(--sp-hair);
    padding: 18px 0; gap: 8px;
  }
  .sp-doc__accent { display: none; }
  .sp-doc__body { padding: 0; gap: 8px; }
  .sp-doc__name { font-size: 21px !important; }
  .sp-doc__creds { font-size: 13px; }
  .sp-doc__clinic { margin-top: 0; border-top: 0; padding-top: 0; }
  .sp-doc__label { display: none; }          /* the third line reads as the clinic in context */
  .sp-doc__addr { font-size: 13px; color: var(--sp-muted); }

  .sp-ref {
    border: 0; border-radius: 10px; background: var(--sp-cream);
    margin-top: 20px; padding: 20px; gap: 10px;
  }
  .sp-ref__title { font-size: 20px !important; }
  /* The handoff specifies about 47px and never below 44 — a tap target. Line-height 1
     at 14px padding lands at 42, so the line box is opened up to reach it. */
  .sp-ref__btn { width: 100%; text-align: center; padding: 14px; line-height: 1.35; }

  .sp-grid--im { display: block; margin-top: 8px; }
  .sp-im {
    background: transparent; border-radius: 0; padding: 15px 0; gap: 14px;
    flex-direction: row; align-items: baseline; justify-content: space-between;
    border-top: 1px solid var(--sp-border);
  }
  .sp-im__tick { display: none; }
  .sp-im__name { font-size: 19px !important; }
  .sp-im__spec { font-size: 12.5px; text-align: right; }

  .sp-diab { display: block; background: var(--sp-cream); }
  .sp-diab__copy { gap: 14px; }
  .sp-diab__copy p { font-size: 14.5px; line-height: 1.8; }
  .sp-panel { display: none; }               /* the panel is desktop/tablet balance only */
}

/* The Elementor container that held the old rounded band on /referrals/ pads 10px all
 * round, and that padding is what inset the band and made it read as a floating panel.
 * It now holds nothing but the hero, so the padding goes and the band runs edge to edge
 * exactly like the one on /specialists/. Targeted by id because it is one container on
 * one page, not a pattern. */
.elementor-element-16fb1e6 { padding: 0 !important; }

/* The emergency notice on /referrals/. Elementor centres the icon against the whole
 * text block, so wherever the sentence wraps the heart sat between the two lines
 * instead of beside the first. Giving the icon a box exactly one line tall and
 * centring within it pins it to line one at every width — one line or three. */
.sp-note .elementor-icon-box-wrapper { align-items: flex-start !important; }
.sp-note .elementor-icon-box-icon {
  display: flex; align-items: center;
  height: 1.3em;                 /* one line of the 15px/19.5px description */
  font-size: 15px;
  margin: 0 !important;
}

/* =============================================================================
 * /patient-info/ — the P1 handoff (design_handoff_patient_info)
 *
 * Shares the vocabulary of the specialists and referrals pages exactly, so it reuses
 * their tokens and section shells (.sp, .sp-hero, .sp-sec, .sp-head) and only adds
 * what is new here: the prep lead, the four test cards, the condition cards, the
 * numbered booking steps and the navy urgent band.
 *
 * The five inline PDF viewers this replaces were 854px tall each — roughly 4,300px of
 * a 9,358px page was Chrome's PDF reader chrome, and every visitor downloaded all five
 * PDFs on load. They are download cards now.
 * ========================================================================== */

/* ---- prep lead: copy left, photo right ---- */
.pi-lead {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  margin-bottom: 40px;
}
.pi-lead__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pi-lead__copy p { font-size: 15.5px; line-height: 1.8; color: var(--sp-body); }
.pi-lead__photo {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 12px; background: var(--sp-cream); display: block;
}
.pi-btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 14px; line-height: 1;
  background: var(--sp-red); color: #fff; text-decoration: none;
  padding: 14px 24px; border-radius: 8px; transition: background .15s ease;
}
.pi-btn:hover, .pi-btn:focus-visible { background: var(--sp-navy); color: #fff; }
.pi-btn__short { display: none; }

/* ---- test cards ---- */
/* align-items: start, not stretch — the Holter text is about five times the ECG text,
   and stretching would leave the short cards mostly dead space. */
.pi-tests { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.pi-test {
  border: 1px solid var(--sp-border); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pi-test:hover { border-color: rgba(27, 63, 85, .28); box-shadow: 0 8px 24px rgba(27, 63, 85, .08); }
.pi-test__photo {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-bottom: 1px solid var(--sp-hair); background: var(--sp-cream);
}
.pi-test__photo--empty { background: var(--sp-cream); }   /* ECG: no matching photo yet */
.pi-test__body { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.pi-test__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pi-test__name { font-size: 24px !important; line-height: 1.25; }
.pi-test__tag {
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sp-red);
}
.pi-test__text { font-size: 14px; line-height: 1.75; color: var(--sp-body); }

/* ---- condition cards ---- */
/* These DO stretch: the four Download buttons should sit on one baseline, which is
   what `flex: 1` on the description buys. */
.pi-conds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }

/* The way out of the download-only cul-de-sac: every card here offers a PDF, so a
   reader who does not want one had nowhere to go. */
.sp p.pi-more { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--sp-body); }
.pi-more a { color: var(--sp-navy); text-underline-offset: 3px; }

/* The "More about ..." link under each test card. `.sp p.pi-test__more` and not
   `.pi-test__more`, because `.sp p { margin: 0 }` is (0,1,1) and would eat the margin —
   the same trap that left .pi-more with no space above it for its whole life.
   min-height on an inline-flex anchor is what carries it over WCAG 2.5.8's 24px target:
   at 18px tall it was the only non-exempt undersized target on the site, since a link
   alone in its own paragraph does not qualify for the inline-text exception. */
.sp p.pi-test__more { margin: 10px 0 0; font-size: 14.5px; }
.pi-test__more a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--sp-navy); text-underline-offset: 3px;
}
.pi-cond {
  background: #fff; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
.pi-cond__accent { height: 5px; background: var(--sp-red); }
.pi-cond__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pi-cond__name { font-size: 23px !important; line-height: 1.25; }
.pi-cond__desc { font-size: 13.5px; line-height: 1.65; color: var(--sp-body); flex: 1; }
.pi-cond__btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 13px; line-height: 1;
  background: var(--sp-red); color: #fff; text-decoration: none;
  padding: 11px 18px; border-radius: 6px; align-self: flex-start; margin-top: 4px;
  transition: background .15s ease;
}
.pi-cond__btn:hover, .pi-cond__btn:focus-visible { background: var(--sp-navy); color: #fff; }

/* ---- booking steps ---- */
.pi-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 24px; }
.pi-step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--sp-border);
}
.pi-step__n {
  font-family: "Sora", sans-serif; font-size: 12px; color: var(--sp-red);
  flex: none; padding-top: 3px;
}
.pi-step__t { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); }

/* ---- urgent band ---- */
.pi-urgent {
  margin-top: 8px; background: var(--sp-navy); border-radius: 12px; padding: 32px 36px;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.pi-urgent__title { font-size: 26px !important; color: #fff !important; line-height: 1.25; }
.pi-urgent__body {
  font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .78); margin-top: 8px !important;
}
.pi-urgent__btn {
  font-family: "Sora", sans-serif; font-size: 15px; line-height: 1; color: #fff;
  background: transparent; border: 1px solid rgba(255, 255, 255, .45);
  padding: 14px 26px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.pi-urgent__btn:hover, .pi-urgent__btn:focus-visible { background: #fff; color: var(--sp-navy); }
.pi-urgent a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =============== tablet — 768 to 1199 =============== */
@media (max-width: 1199px) {
  .pi-lead { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pi-btn__long { display: none; }
  .pi-btn__short { display: inline; }
  .pi-test__body { padding: 24px; }
  .pi-test__name { font-size: 22px !important; }
  .pi-test__text { font-size: 13.5px; }
  .pi-conds { grid-template-columns: 1fr 1fr; gap: 18px; }
  .pi-cond__name { font-size: 22px !important; }
  .pi-steps { grid-template-columns: 1fr; gap: 0; }
  .pi-urgent { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
  .pi-urgent__title { font-size: 24px !important; }
  .pi-urgent__btn { justify-self: start; }
}

/* =============== mobile — under 768 =============== */
@media (max-width: 767px) {
  .pi-lead { display: block; margin-bottom: 26px; }
  .pi-lead__copy { gap: 14px; }
  .pi-lead__photo { display: none; }     /* the four test photos carry the section here */
  .pi-btn {
    display: block; width: 100%; text-align: center;
    font-size: 15px; padding: 15px; line-height: 1.3;   /* >=44px tap target */
  }
  .pi-tests { grid-template-columns: 1fr; gap: 18px; }
  .pi-test__body { padding: 22px; }
  .pi-test__name { font-size: 21px !important; }
  .pi-conds { grid-template-columns: 1fr; gap: 16px; }
  .pi-cond__name { font-size: 21px !important; }
  .pi-cond__btn {
    align-self: stretch; text-align: center;
    font-size: 15px; padding: 15px; border-radius: 8px; line-height: 1.3;
  }
  .pi-step { padding: 15px 0; }
  .pi-urgent { padding: 22px; gap: 16px; }
  .pi-urgent__title { font-size: 22px !important; }
  .pi-urgent__btn {
    display: block; width: 100%; text-align: center; padding: 14px; line-height: 1.3;
  }
}

/* =============================================================================
 * /scheduling/ — the SC1 handoff (design_handoff_scheduling)
 *
 * Reuses the .sp tokens and hero. No JavaScript: selection is :has(input:checked),
 * validation is native `required`, and the confirmation state is the :target pattern
 * the contact form already uses.
 * ========================================================================== */
.sc { background: #fff; }

/* "(see Referrals)" must not be stranded on its own line — it did exactly that at
 * tablet width, where the paragraph broke just before it. */
.sc-nowrap { white-space: nowrap; }
.sp-hero__link { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); }
.sp-hero__link:hover { text-decoration-color: #fff; }

/* No widows anywhere on this page: `pretty` pulls a word down rather than leaving a
 * single one on the last line. Headings get `balance`, which evens the lines instead. */
/* `:not(.sp-hero__intro)` matters: without it this rule is (0,1,1) and quietly beats
   the (0,1,0) `text-wrap: balance` on the shared hero intro, which is why the hero
   still had a 177px last line at tablet after balance was added. */
.sc p:not(.sp-hero__intro), .sc .sc-opt__label, .sc .sc-field__label { text-wrap: pretty; }
.sc h1, .sc h2, .sc legend { text-wrap: balance; }

.sc-body { display: grid; grid-template-columns: 1fr 340px; }
.sc-main { padding: 52px 48px 56px; display: flex; flex-direction: column; gap: 36px; }
.sc-rail {
  width: 340px; padding: 52px 32px; display: flex; flex-direction: column; gap: 20px;
  border-left: 1px solid var(--sp-border); position: sticky; top: 24px; align-self: start;
}
.sc-main > .sc-card--urgent { display: none; }   /* the rail carries it on desktop */

.sc-h2 {
  font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 32px;
  line-height: 1.2; color: var(--sp-navy); display: block;
}
.sc-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.sc-group__legend { padding: 0; display: block; }
.sc-group__sub {
  display: block; font-size: 14.5px; line-height: 1.7; color: var(--sp-body); margin-top: 8px;
}
/* "Your details" is a <div> with an <h2>, not a fieldset/legend. A legend is positioned
   outside its fieldset's padding box, so with a border-top it rendered ON the rule with
   a 100px hole beneath it. The radio group keeps its fieldset — grouping four radios is
   what a fieldset is for, and it has no border to fight. */
.sc-group--details { padding-top: 32px; border-top: 1px solid var(--sp-border); }

/* ---- request type ---- */
.sc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.sc-opt {
  display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 10px;
  background: #fff; border: 1px solid rgba(27, 63, 85, .20); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sc-opt:hover { border-color: rgba(27, 63, 85, .35); }
.sc-opt__in { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-opt__box {
  width: 20px; height: 20px; border-radius: 5px; flex: none;
  border: 1.5px solid rgba(27, 63, 85, .30); background: #fff;
  display: grid; place-items: center; transition: background .15s ease, border-color .15s ease;
}
.sc-opt__box::after {
  content: ""; width: 12px; height: 12px; opacity: 0;
  background: #fff; clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}
.sc-opt:has(.sc-opt__in:checked) { background: var(--sp-cream); border-color: var(--sp-red); }
.sc-opt:has(.sc-opt__in:checked) .sc-opt__box { background: var(--sp-red); border-color: var(--sp-red); }
.sc-opt:has(.sc-opt__in:checked) .sc-opt__box::after { opacity: 1; }
.sc-opt:has(.sc-opt__in:focus-visible) { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.sc-opt__label { font-size: 14.5px; line-height: 1.45; color: var(--sp-navy); }

/* ---- fields ---- */
.sc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.sc-field { display: flex; flex-direction: column; gap: 8px; }
.sc-field--wide { margin-top: 20px; }
.sc-field__label { font-size: 13.5px; color: var(--sp-navy); }
.sc-field__req { color: var(--sp-red); }
/* `.sc` prefix on purpose: Astra styles inputs with `input[type="email"], …`, which is
   (0,1,1) and beats a bare class. This is (0,2,0) and wins. Height is pinned too — the
   fields rendered 40px, under the 44px minimum, before this. */
.sc .sc-field__in {
  font-family: "Sora", sans-serif; font-size: 14.5px; color: var(--sp-navy);
  height: auto; min-height: 50px;
  border: 1px solid rgba(27, 63, 85, .25); border-radius: 8px; padding: 15px 16px;
  background: #fff; width: 100%; transition: border-color .15s ease, box-shadow .15s ease;
  /* Astra squashes input line-height, which rendered these 40px tall — under the 44px
     minimum this project holds to. 1.25 puts them at the handoff's ~50px. */
  line-height: 1.25;
}
.sc .sc-field__in::placeholder { color: rgba(27, 63, 85, .75); }
.sc .sc-field__in:focus {
  outline: none; border-color: var(--sp-red); box-shadow: 0 0 0 3px rgba(226, 46, 45, .15);
}
.sc .sc-field__ta { height: 130px; min-height: 130px; resize: vertical; line-height: 1.6; }
/* Only flag a field the visitor has actually left in a bad state — :user-invalid, not
   :invalid, which would paint every required field red before they have typed. */
.sc .sc-field__in:user-invalid { border-color: var(--sp-red); }

.sc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sc-submit { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.sc-submit__note { font-size: 13px; color: var(--sp-muted); flex: 1; min-width: 220px; }
.sc-btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 15px; line-height: 1.3;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red); cursor: pointer;
  padding: 16px 34px; border-radius: 8px; white-space: nowrap; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.sc-btn:hover, .sc-btn:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.sc-btn--ghost {
  background: transparent; color: var(--sp-navy); border-color: rgba(27, 63, 85, .25);
}
.sc-btn--ghost:hover, .sc-btn--ghost:focus-visible { background: var(--sp-navy); color: #fff; }

/* ---- rail cards ---- */
.sc-card { border-radius: 12px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.sc-card__title { font-size: 23px !important; line-height: 1.25; }
/* "How long to allow" on /scheduling/. Rows are a real <ul>, so the durations are a
   machine-readable list rather than styled divs — same reasoning as the guides' panels. */
.sc-howlong { list-style: none; margin: 14px 0 16px; padding: 0; }
/* Stacked, not side by side. The rail is 275px at desktop, so "Exercise stress test"
   beside "30 minutes" wraps BOTH halves and reads as four ragged lines. Label over value
   is also what .sc-reach two cards down already does, so the rail keeps one idiom. */
.sc-howlong__row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 0; border-bottom: 1px solid var(--sp-border); font-size: 14.5px;
}
.sc-howlong__row:last-child { border-bottom: 0; }
.sc-howlong__t { color: var(--sp-body); }
/* No nowrap: the rail is ~250px and "45 minutes to 1 hour" is wider than the row it
   shares with its label, so nowrap pushed it past the card edge. It wraps, right-aligned. */
.sc-howlong__v { color: var(--sp-navy); font-weight: 500; }

.sc-card__body { font-size: 13.5px; line-height: 1.7; }
.sc-card--urgent { background: var(--sp-navy); }
.sc-card--urgent .sc-card__title { color: #fff !important; }
.sc-card--urgent .sc-card__body { color: rgba(255, 255, 255, .78); }
.sc-card--medeo { background: var(--sp-cream); }
.sc-card--medeo .sc-card__body { color: var(--sp-body); }
.sc-card__eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sp-red);
}
.sc-card--reach { border: 1px solid var(--sp-border); gap: 16px; }
.sc-reach { display: flex; flex-direction: column; gap: 5px; }
.sc-reach__label {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-muted);
}
.sc-reach__value, .sc-reach__value a { font-size: 16px; color: var(--sp-navy); text-decoration: none; }
.sc-reach__value a:hover { text-decoration: underline; }

/* ---- confirmation / error, revealed by :target ---- */
.sc-confirm, .sc-error { display: none; }
.sc-confirm:target, .sc-error:target { display: block; }
/* When either is shown the form is not — the handoff replaces the body, not adds to it */
.sc-confirm:target ~ .sc-body, .sc-error:target ~ .sc-body { display: none; }
.sc-confirm__inner {
  max-width: 720px; margin: 0 auto; padding: 56px 48px 64px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
}
.sc-confirm__tick {
  width: 64px; height: 64px; border-radius: 999px; background: var(--sp-navy); color: #fff;
  display: grid; place-items: center;
}
.sc-confirm__title { font-size: 38px !important; line-height: 1.2; }
.sc-confirm__body { font-size: 15.5px; line-height: 1.8; color: var(--sp-body); }
.sc-confirm__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sc-confirm__inner .sc-card { text-align: left; width: 100%; margin-top: 12px; }

.sc a:focus-visible, .sc button:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.sp-hero a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =============== tablet — 768 to 1199 =============== */
@media (max-width: 1199px) {
  .sc-body { display: block; }
  .sc-main { padding: 44px 40px 48px; gap: 32px; }
  .sc-main > .sc-card--urgent { display: flex; padding: 26px 28px; }
  .sc-main > .sc-card--urgent .sc-card__title { font-size: 24px !important; }
  .sc-main > .sc-card--urgent .sc-card__body { font-size: 14.5px; }
  .sc-rail {
    width: auto; border-left: 0; position: static; padding: 40px;
    background: var(--sp-cream);
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px;
  }
  .sc-rail > .sc-card--urgent { display: none; }   /* it moved to the top of the form */
  .sc-rail .sc-card { background: #fff; padding: 28px; }
  .sc-h2 { font-size: 30px; }
  .sc-confirm__title { font-size: 32px !important; }
  .sc-confirm__inner { max-width: 640px; padding: 48px 40px 56px; }
}

/* =============== mobile — under 768 =============== */
@media (max-width: 767px) {
  .sc-main { padding: 26px 20px 30px; gap: 26px; }
  .sc-main > .sc-card--urgent { padding: 22px; }
  .sc-main > .sc-card--urgent .sc-card__title { font-size: 22px !important; }
  .sc-main > .sc-card--urgent .sc-card__body { font-size: 14px; }
  .sc-h2 { font-size: 26px; }
  .sc-opts { grid-template-columns: 1fr; gap: 10px; }
  .sc-fields { grid-template-columns: 1fr; }
  .sc-submit { flex-direction: column; align-items: stretch; gap: 12px; }
  .sc-btn { width: 100%; text-align: center; padding: 16px; }   /* ~53px tap target */
  .sc-submit__note { font-size: 12.5px; min-width: 0; }
  .sc-rail { grid-template-columns: 1fr; padding: 26px 20px 30px; gap: 16px; }
  .sc-rail .sc-card { padding: 22px; }
  .sc-confirm__inner {
    padding: 30px 20px 36px; align-items: flex-start; text-align: left; gap: 16px;
  }
  .sc-confirm__tick { width: 56px; height: 56px; }
  .sc-confirm__tick svg { width: 24px; height: 24px; }
  .sc-confirm__title { font-size: 27px !important; }
  .sc-confirm__body { font-size: 15px; }
  .sc-confirm__btns { flex-direction: column; align-self: stretch; }
}

/* =============================================================================
 * /careers/ and /careers/zh/ — the C1 handoff (design_handoff_careers)
 *
 * CJK fallbacks, deliberate. The handoff asks for Noto Serif SC / Noto Sans SC. A full
 * Chinese webfont is megabytes and this build fails on any third-party subresource, so
 * Google Fonts is out too. These system stacks keep the same serif-heading /
 * sans-body contrast on every major platform, and Marcellus and Sora still win for
 * Latin glyphs so the English page is unchanged.
 * ========================================================================== */
.cr h1, .cr h2, .cr h3, .cr .cr-post__title, .cr .cr-keep__title, .cr .cr-apply__title {
  font-family: "Marcellus", "Songti SC", "SimSun", "Noto Serif CJK SC", Georgia, serif;
}
.cr, .cr p, .cr li, .cr label, .cr input, .cr textarea, .cr button, .cr .cr-pill {
  font-family: "Sora", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

/* Both languages are in the page; :target swaps them. No JavaScript, /careers/#zh is
 * linkable, and a refresh keeps the language.
 *
 * The match is `#zh` OR any id ending `-zh`, not `#zh` alone. Every in-page anchor
 * inside the Chinese pane — Apply for this role, the confirmation, the error — moves
 * :target off `#zh`, and with only `#zh:target` the page silently flipped back to
 * English the moment you used one. Every id in a pane carries its language suffix, so
 * this holds the language through any of them. */
.cr-pane--zh { display: none; }
body:has(:is(#zh, [id$="-zh"]):target) .cr-pane--zh { display: block; }
body:has(:is(#zh, [id$="-zh"]):target) .cr-pane--en { display: none; }

/* The language toggle is taken OUT OF THE FLOW and pinned to the top-right corner of
 * the band. In the flow it was a 44px row plus a 24px gap above the eyebrow, and even
 * with the top padding cut to compensate it pushed the heading 29px lower than every
 * other page at desktop and 57px lower at mobile. There is one hero on this site and
 * the title lands in the same place on all of them; a control specific to this page
 * does not get to move it. Everything else about .cr-hero is now .sp-hero. */
.cr-hero { position: relative; }
.cr-langrow { position: absolute; top: 32px; right: 56px; display: flex; }
.cr-herobody { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cr-lang {
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  padding: 14px 20px; min-height: 44px; display: inline-flex; align-items: center;
  color: #fff; font-size: 14px; text-decoration: none; transition: background .15s ease, color .15s ease;
}
.cr-lang:hover, .cr-lang:focus-visible { background: #fff; color: var(--sp-navy); }

.cr-body { display: grid; grid-template-columns: 1fr 380px; }
.cr-main { padding: 52px 48px 56px; display: flex; flex-direction: column; gap: 36px; }
.cr-rail {
  width: 380px; padding: 52px 32px; display: flex; flex-direction: column; gap: 18px;
  border-left: 1px solid var(--sp-border); position: sticky; top: 24px; align-self: start;
}

.cr-post { padding-bottom: 28px; border-bottom: 1px solid var(--sp-border);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cr-post__eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sp-red);
}
.cr-post__title { font-size: 40px !important; line-height: 1.15; }
.cr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-pill { background: var(--sp-cream); border-radius: 999px; padding: 9px 16px;
  font-size: 13px; color: var(--sp-navy); }
.cr-btn--apply { display: none; }        /* desktop has the rail; tablet and mobile add it */

.cr-sec { display: flex; flex-direction: column; gap: 12px; }
.cr-h3 { font-size: 26px !important; line-height: 1.25; }
.cr-p { font-size: 15px; line-height: 1.8; color: var(--sp-body); }
.cr-rows { display: flex; flex-direction: column; }
.cr-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0;
  border-top: 1px solid var(--sp-hair); }
.cr-row__dash { width: 20px; height: 2px; background: var(--sp-red); flex: none; margin-top: 11px; }
.cr-row__t { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); }
.cr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.cr-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 1.1em; }
.cr-list li { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); }
.cr-keep { background: var(--sp-cream); border-radius: 12px; padding: 28px 32px;
  display: flex; flex-direction: column; gap: 8px; }
.cr-keep__title { font-size: 22px !important; }

.cr-apply__title { font-size: 26px !important; }
.cr-apply__sub { font-size: 13.5px; color: var(--sp-body); }
.cr-form { display: flex; flex-direction: column; gap: 16px; }
.cr-fields { display: flex; flex-direction: column; gap: 16px; }
.cr-field { display: flex; flex-direction: column; gap: 8px; }
.cr-field__label { font-size: 13.5px; color: var(--sp-navy); }
.cr-field__req { color: var(--sp-red); }
/* `.cr` prefix: Astra styles inputs as input[type="email"] — (0,1,1) — which beats a
   bare class and renders these 40px, under the 44px minimum. */
.cr .cr-field__in {
  font-size: 14.5px; color: var(--sp-navy); background: #fff; width: 100%;
  border: 1px solid rgba(27, 63, 85, .25); border-radius: 8px; padding: 15px 16px;
  height: auto; min-height: 50px; line-height: 1.25;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cr .cr-field__in::placeholder { color: rgba(27, 63, 85, .75); }
.cr .cr-field__in:focus { outline: none; border-color: var(--sp-red);
  box-shadow: 0 0 0 3px rgba(226, 46, 45, .15); }
.cr .cr-field__ta { height: 100px; min-height: 100px; resize: vertical; line-height: 1.6; }
.cr .cr-field__in:user-invalid { border-color: var(--sp-red); }

/* the file control: the visible dashed panel is the <label>, the real input is hidden
   but focusable, so keyboard and screen-reader behaviour stay native */
.cr-file {
  border: 1px dashed rgba(27, 63, 85, .30); border-radius: 8px; padding: 22px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; text-align: center; transition: border-color .15s ease;
}
.cr-file:hover { border-color: var(--sp-red); }
.cr-file__cta { font-size: 14px; color: var(--sp-red); }
.cr-file__note { font-size: 12px; color: var(--sp-muted); }
.cr-file__in { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cr-file__in:focus-visible + * , .cr-field:has(.cr-file__in:focus-visible) .cr-file {
  outline: 2px solid var(--sp-red); outline-offset: 2px;
}
/* The honeypot must be off-screen, not display:none — a bot that reads computed styles
   skips hidden fields, and a hidden field is also skipped by autofill. This was
   rendering as a visible "Company" input above the real fields until it was added. */
.cr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cr-orEmail { font-size: 12.5px; color: var(--sp-muted); }

.cr-btn {
  font-weight: 500; font-size: 15px; line-height: 1.3; cursor: pointer; text-decoration: none;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red);
  padding: 16px 24px; border-radius: 8px; text-align: center;
  transition: background .15s ease, color .15s ease;
}
.cr-btn:hover, .cr-btn:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.cr-btn--ghost { background: transparent; color: var(--sp-navy); border-color: rgba(27, 63, 85, .25); }
.cr-btn--ghost:hover, .cr-btn--ghost:focus-visible { background: var(--sp-navy); color: #fff; }
.cr-btn--full { width: 100%; padding: 16px; }

/* ---- confirmation / error ---- */
.cr-confirm, .cr-error { display: none; }
.cr-confirm:target, .cr-error:target { display: block; }
.cr-confirm:target ~ .cr-body, .cr-error:target ~ .cr-body { display: none; }
.cr-confirm__inner {
  max-width: 760px; margin: 0 auto; padding: 56px 48px 64px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
}
.cr-confirm__tick { width: 64px; height: 64px; border-radius: 999px;
  background: var(--sp-navy); color: #fff; display: grid; place-items: center; }
.cr-confirm__title { font-size: 38px !important; line-height: 1.2; }
.cr-confirm__body { font-size: 15.5px; line-height: 1.8; color: var(--sp-body); }
.cr-next { width: 100%; text-align: left; }
.cr-next__title { font-size: 24px !important; margin-bottom: 4px; }
.cr-confirm__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.cr a:focus-visible, .cr button:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.cr-hero a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =============== tablet — 768 to 1199 =============== */
@media (max-width: 1199px) {
  .cr-langrow { top: 26px; right: 40px; }
  .cr-body { display: block; }
  .cr-main { padding: 44px 40px 48px; gap: 32px; }
  .cr-post__title { font-size: 34px !important; }
  .cr-btn--apply { display: inline-block; padding: 15px 28px; }
  .cr-rail {
    width: auto; border-left: 0; position: static;
    background: var(--sp-cream); padding: 44px 40px;
  }
  .cr-apply__title { font-size: 32px !important; }
  .cr-form { background: #fff; border-radius: 12px; padding: 32px; margin-top: 18px; }
  .cr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .cr .cr-field__ta { height: 120px; }
  .cr-confirm__title { font-size: 32px !important; }
  .cr-confirm__inner { max-width: 660px; padding: 48px 40px 56px; }
}

/* =============== mobile — under 768 (Mobile A) =============== */
@media (max-width: 767px) {
  .cr-langrow { top: 20px; right: 20px; }
  .cr-herobody { align-items: flex-start; text-align: left; }
  .cr-main { padding: 28px 20px 30px; gap: 28px; }
  .cr-post__title { font-size: 29px !important; }
  .cr-h3 { font-size: 24px !important; }
  .cr-p, .cr-row__t, .cr-list li { font-size: 14px; }
  .cr-btn--apply { display: block; width: 100%; padding: 16px; }
  .cr-two { grid-template-columns: 1fr; gap: 24px; }
  /* the offers list becomes a navy card, to break up a long read */
  .cr-two .cr-sec:last-child {
    background: var(--sp-navy); border-radius: 12px; padding: 22px;
  }
  .cr-two .cr-sec:last-child .cr-h3 { color: #fff !important; }
  .cr-two .cr-sec:last-child .cr-list li { color: rgba(255, 255, 255, .78); }
  .cr-keep { padding: 22px; }
  .cr-rail { padding: 28px 20px 30px; }
  .cr-apply__title { font-size: 26px !important; }
  .cr-form { padding: 22px; }
  .cr-fields { grid-template-columns: 1fr; }
  .cr-file { padding: 24px 16px; }
  .cr .cr-field__ta { height: 110px; }
  .cr-confirm__inner { padding: 30px 20px 36px; align-items: flex-start; text-align: left; }
  .cr-confirm__tick { width: 56px; height: 56px; }
  .cr-confirm__tick svg { width: 24px; height: 24px; }
  .cr-confirm__title { font-size: 26px !important; }
  .cr-next__title { font-size: 22px !important; }
  .cr-confirm__btns { flex-direction: column; align-self: stretch; }
}

/* =============================================================================
 * /contact-us/ — the K1 handoff (design_handoff_contact)
 *
 * ONE DOM, FOUR ORDERS. Desktop reads hero / detail cards / form beside map / urgent;
 * tablet drops the map above the form and gives the form its own cream section; mobile
 * puts the map and the phone number first, because someone opening this page on a phone
 * is usually standing outside the building; and the submitted state replaces the form
 * in place while the map, address and urgent notice stay exactly where they were.
 *
 * All four come from `grid-template-areas` on .ct, so the markup is written once. The
 * alternative — duplicated blocks toggled per breakpoint — is how a page ends up with a
 * phone number that is right in one layout and stale in another.
 *
 * Detail entries are cream cards at 768px and up and borderless rows below: six cards
 * stacked is about a screen and a half of scrolling for six short values.
 *
 * Tokens, hero and type all come from .sp above. Nothing here redefines a colour.
 * ========================================================================== */
.ct {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  grid-template-areas:
    "hero    hero"
    "details details"
    "form    map"
    "urgent  urgent";
}
.ct > .sp-hero  { grid-area: hero; }
.ct-details     { grid-area: details; padding: 56px; }
.ct-form        { grid-area: form; padding: 0 0 56px 56px; }
.ct-map         { grid-area: map;  padding: 0 56px 56px 0; }
.ct-urgentwrap  { grid-area: urgent; padding: 0 56px 56px; }
/* Same cell as the form. Only one of the three is ever displayed. */
.ct-confirm, .ct-error { grid-area: form; padding: 0 0 56px 56px; }

.ct-nowrap { white-space: nowrap; }
/* No widows: `pretty` pulls a word down rather than stranding one. `:not(.sp-hero__intro)`
   for the same reason it is needed on /scheduling/ — without it this is (0,1,1) and
   quietly beats the (0,1,0) `text-wrap: balance` on the shared hero intro. */
.ct p:not(.sp-hero__intro), .ct li, .ct .ct-field__label { text-wrap: pretty; }
.ct h1, .ct h2 { text-wrap: balance; }

/* ---- mobile action buttons, inside the navy hero ---- */
/* Hidden at the widths where the detail cards already carry the number, rather than
   duplicated into a second block that could drift out of step with this one. */
.ct-hero__actions { display: none; }
.ct-hero__btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.3;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red);
  padding: 16px; border-radius: 8px; text-align: center; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ct-hero__btn:hover, .ct-hero__btn:focus-visible { background: #fff; border-color: #fff; color: var(--sp-navy); }
.ct-hero__btn--ghost {
  background: transparent; border-color: rgba(255, 255, 255, .45); font-size: 15px; padding: 15px;
}

/* ---- the six detail cards ---- */
/* align-items: start — Address and Hours run to three lines and Phone to one, so
   stretching would leave the short ones mostly dead space. */
.ct-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.ct-card {
  background: var(--sp-cream); border-radius: 12px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.ct-card__accent { width: 28px; height: 2px; background: var(--sp-red); display: block; }
.ct-card__label { font-size: 23px !important; line-height: 1.2; }
.ct-card__value { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); }
.ct-card__value a { color: inherit; text-decoration: none; }
.ct-card__value a:hover { color: var(--sp-navy); text-decoration: underline; }

/* ---- form column ---- */
.ct-form { display: flex; flex-direction: column; gap: 8px; }
.ct-form__title { font-size: 34px !important; line-height: 1.2; }
.ct-form__note { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); }
/* flex: 1 down through the message field is what lands Submit level with the bottom of
   the map card on desktop. The row's height comes from the map column, so this
   container has a definite height to distribute. */
.ct-form__form { flex: 1; display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.ct-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ct-field { display: flex; flex-direction: column; gap: 8px; }
.ct-field--msg { flex: 1; min-height: 120px; }
.ct-field__label { font-size: 13.5px; color: var(--sp-navy); }
.ct-field__req { color: var(--sp-red); }
/* `.ct` prefix on purpose: Astra styles inputs as `input[type="email"], …`, which is
   (0,1,1) and beats a bare class — the same trap that rendered the scheduling fields
   40px, under the 44px minimum. This is (0,2,0) and wins. */
.ct .ct-field__in {
  font-family: "Sora", sans-serif; font-size: 14.5px; color: var(--sp-navy);
  background: #fff; width: 100%;
  border: 1px solid rgba(27, 63, 85, .25); border-radius: 8px; padding: 15px 16px;
  height: auto; min-height: 50px; line-height: 1.25;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ct .ct-field__in::placeholder { color: rgba(27, 63, 85, .75); }
.ct .ct-field__in:focus {
  outline: none; border-color: var(--sp-red); box-shadow: 0 0 0 3px rgba(226, 46, 45, .15);
}
.ct .ct-field__ta { flex: 1; min-height: 120px; height: auto; resize: vertical; line-height: 1.6; }
/* :user-invalid, not :invalid — only flag a field the visitor has actually left in a
   bad state, rather than painting every required field red before they have typed. */
.ct .ct-field__in:user-invalid { border-color: var(--sp-red); }
/* Off-screen, not display:none: a bot that reads computed styles skips hidden fields,
   and so does autofill. */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ct-btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 15px; line-height: 1.3;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red); cursor: pointer;
  padding: 16px 24px; border-radius: 8px; text-align: center; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ct-btn:hover, .ct-btn:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.ct-btn--ghost { background: transparent; color: var(--sp-navy); border-color: rgba(27, 63, 85, .25); }
.ct-btn--ghost:hover, .ct-btn--ghost:focus-visible { background: var(--sp-navy); color: #fff; }
.ct-btn--submit { width: 100%; padding: 17px; }   /* ~51px tap target */

/* ---- map column ---- */
.ct-map { display: flex; flex-direction: column; gap: 16px; }
.ct-map__frame {
  flex: 1; min-height: 420px; width: 100%; display: block;
  border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-cream);
}
.ct-addr {
  background: var(--sp-navy); border-radius: 12px; padding: 26px 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.ct-addr__name { font-size: 22px !important; color: #fff !important; line-height: 1.25; }
.ct-addr__line { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .78); margin-top: 6px !important; }
.ct-addr__btn {
  font-family: "Sora", sans-serif; font-size: 14px; line-height: 1.3; color: #fff;
  background: transparent; border: 1px solid rgba(255, 255, 255, .45);
  padding: 14px 20px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.ct-addr__btn:hover, .ct-addr__btn:focus-visible { background: #fff; color: var(--sp-navy); }

/* ---- urgent notice ---- */
.ct-urgent {
  background: var(--sp-navy); border-radius: 12px; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.ct-urgent__title { font-size: 23px !important; color: #fff !important; line-height: 1.25; }
.ct-urgent__body { font-size: 14.5px; line-height: 1.75; color: rgba(255, 255, 255, .78); }

/* ---- submitted and failed states, revealed by :target ---- */
/*
 * DEVIATION, deliberate, and the same one /scheduling/ makes. The handoff's confirmation
 * echoes the submitted name, email and phone under a "What you sent" heading. This page
 * is static and is reached by a 303 redirect, so those values could only arrive in the
 * URL — where they would land in server logs, `Referer` headers and browser history. A
 * clinic does not put a patient's name and phone number in a query string. The card keeps
 * its position, its cream fill, its red eyebrow and its hairline rows, and says what
 * happens next instead.
 */
.ct-confirm, .ct-error {
  display: none; flex-direction: column; align-items: flex-start; gap: 18px;
}
.ct-confirm:target, .ct-error:target { display: flex; }
/* Both carry tabindex="-1" so the fragment jump moves screen-reader focus onto the
   message. That also draws Chrome's focus ring around the whole panel, which reads as a
   selected box rather than a confirmation. These are containers, not controls, so
   nothing is lost by suppressing it. */
.ct-confirm:focus, .ct-error:focus { outline: none; }
/* Sibling combinators only look forward and the form comes first in the DOM, so the
   swap is done from the container. */
.ct:has(.ct-confirm:target) .ct-form,
.ct:has(.ct-error:target)   .ct-form    { display: none; }
/* The detail cards go on success only — the confirmation carries the phone number and
   the map still answers "where are you". On failure they stay: that is the moment a
   visitor most needs the number in front of them. */
.ct:has(.ct-confirm:target) .ct-details { display: none; }
/* The confirmation is shorter than the form was, so the map must not be stretched to
   match it. Full-width rows are unaffected — a lone item at content height either way. */
.ct:has(.ct-confirm:target), .ct:has(.ct-error:target) { align-items: start; }

.ct-confirm__tick {
  width: 60px; height: 60px; border-radius: 999px;
  background: var(--sp-navy); color: #fff; display: grid; place-items: center;
}
.ct-confirm__title { font-size: 34px !important; line-height: 1.2; }
.ct-confirm__body { font-size: 15px; line-height: 1.8; color: var(--sp-body); }
.ct-confirm__body a { color: var(--sp-navy); }
.ct-next {
  width: 100%; background: var(--sp-cream); border-radius: 12px; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.ct-next__eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sp-red);
}
.ct-next__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ct-next__list li {
  font-size: 14.5px; line-height: 1.7; color: var(--sp-body);
  padding: 12px 0; border-top: 1px solid rgba(226, 46, 45, .18);
}
.ct-next__list li:first-child { border-top: 0; padding-top: 0; }
.ct-next__list li:last-child { padding-bottom: 0; }
.ct-next__list a { color: var(--sp-navy); }
.ct-confirm__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }

.ct a:focus-visible, .ct button:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.ct .sp-hero a:focus-visible, .ct-addr a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =============== tablet — 768 to 1199 =============== */
/* The side-by-side form and map stop working below roughly 1000px, so the map moves
   above the form and the form takes its own cream section. */
@media (max-width: 1199px) {
  .ct {
    grid-template-columns: 1fr; column-gap: 0;
    grid-template-areas: "hero" "details" "map" "form" "urgent";
  }
  .ct-details { grid-template-columns: 1fr 1fr; padding: 44px 40px; }
  .ct-card { padding: 26px; }
  .ct-card__label { font-size: 22px !important; }

  .ct-map { padding: 0 40px 44px; }
  .ct-map__frame { flex: none; height: 320px; min-height: 320px; }

  .ct-form, .ct-confirm, .ct-error { padding: 44px 40px 20px; }
  .ct-form { background: var(--sp-cream); }
  .ct-form__title { font-size: 32px !important; }
  /* the fields move onto a white card so they read against the cream */
  .ct-form__form { flex: none; background: #fff; border-radius: 12px; padding: 32px; }
  .ct-field--msg { flex: none; }
  .ct .ct-field__ta { flex: none; height: 140px; min-height: 140px; }

  .ct-urgentwrap { background: var(--sp-cream); padding: 0 40px 44px; }
  /* On success and failure there is no cream form above it, so the notice sits on white
     rather than closing a section that is no longer there. */
  .ct:has(.ct-confirm:target) .ct-urgentwrap,
  .ct:has(.ct-error:target)   .ct-urgentwrap { background: #fff; }
  .ct-urgent { padding: 22px 24px; }
  .ct-urgent__title { font-size: 21px !important; }
  .ct-urgent__body { font-size: 14px; }

  .ct-confirm__title { font-size: 32px !important; }
  .ct-confirm__tick { width: 56px; height: 56px; }
  .ct-confirm__tick svg { width: 24px; height: 24px; }
  .ct-next { padding: 24px; }
}

/* =============== mobile — under 768 =============== */
@media (max-width: 767px) {
  .ct { grid-template-areas: "hero" "map" "details" "form" "urgent"; }

  .ct-hero__actions {
    display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px;
  }

  /* full-bleed strip rather than a card: at this width a rounded, inset map reads as a
     picture of a map, and the address card below it duplicates the Directions button
     already in the hero */
  .ct-map { padding: 0; gap: 0; }
  .ct-map__frame {
    height: 200px; min-height: 200px; border-radius: 0;
    border-width: 1px 0; background: var(--sp-cream);
  }
  .ct-addr { display: none; }

  /* cards become rows */
  .ct-details { grid-template-columns: 1fr; gap: 0; padding: 26px 20px 28px; }
  .ct-card {
    background: transparent; border-radius: 0; padding: 16px 0; gap: 5px;
    border-top: 1px solid var(--sp-border);
  }
  .ct-card__accent { display: none; }
  /* (0,2,0) beats `.sp h2` (0,1,1), which would otherwise hold this in Marcellus navy */
  .ct .ct-card__label {
    font-family: "Sora", sans-serif; font-size: 10.5px !important; line-height: 1.4;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sp-muted);
  }
  .ct-card__value { font-size: 15.5px; line-height: 1.6; color: var(--sp-navy); }
  /* Stretched link: each row holds at most one, so the whole row becomes the tap
     target. As inline text these measured 20px tall — fine to read, small to hit with a
     thumb, and this is the layout someone uses one-handed outside the building. Nothing
     moves; the ::after is an overlay, not a box in the flow. */
  .ct-card { position: relative; }
  .ct-card__value a { display: block; }
  .ct-card__value a::after { content: ""; position: absolute; inset: 0; }

  .ct-form, .ct-confirm, .ct-error { padding: 28px 20px 20px; }
  .ct-form__title { font-size: 26px !important; }
  .ct-form__form { padding: 22px; gap: 16px; }
  .ct-fields { grid-template-columns: 1fr; gap: 16px; }
  .ct .ct-field__ta { height: 120px; min-height: 120px; }

  .ct-urgentwrap { padding: 0 20px 28px; }
  .ct-urgent { padding: 22px 24px; }
  .ct-urgent__title { font-size: 22px !important; }

  .ct-confirm__title { font-size: 26px !important; }
  .ct-confirm__body { font-size: 14.5px; }
  .ct-next { padding: 24px; }
  .ct-confirm__btns { grid-template-columns: 1fr; }
}

/* =============================================================================
 * /services/ — the V1 handoff (design_handoff_services)
 *
 * THE HOVER SWEEP IS THE PAGE'S ORIGINAL ANIMATION, IN NAVY. The clinic asked to keep
 * the gesture the site already has and change only the colour it floods with, so the
 * ripple below is the captured page's inline rule, unchanged except for the fill:
 *
 *     .hover-card::before { width:30px; height:30px; border-radius:50%;
 *                           background:#E22E2D; transform:scale(1);
 *                           transition: transform .7s ease }
 *     .hover-card:hover::before { transform: scale(80) }
 *     .hover-card h1..li { transition: .8s ease }
 *     .hover-card:hover h1..li { color:#fff }
 *
 * Same 30px circle, same 0.7s ease, same 0.8s text fade, same origin behind the arrow.
 * Only `background` changed, to the brand navy. Two long-standing bugs in the original
 * are not reproduced: it started at scale(1) so a red dot showed at rest, and its origin
 * was a hardcoded `left: 295px` tuned to one card width. The origin here is derived from
 * the arrow's position — a 40px circle inset 26px puts its centre at 46px, and the 30px
 * ripple is offset 15px from that, so `top/right: 31px` centres it on the arrow at any
 * card size.
 *
 * ACCORDIONS ARE RADIO + :checked, not <details>. The service cards are always-open
 * cards above 768px and a one-at-a-time accordion below it. With <details> the panel is
 * hidden by the UA, so forcing it open at desktop would depend on ::details-content
 * support and fail to a title-only card in any browser without it. With radios the
 * hiding rule is ours and simply does not exist above 768px, which cannot fail.
 * ========================================================================== */
.sv { background: #fff; }
.sv p { text-wrap: pretty; }
.sv h2, .sv h3 { text-wrap: balance; }

.sv-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Every radio here is a styling mechanism, never something to read or tab to: the label
   is the control and the panel is the state. */
/* Checkboxes, not radios, and that is the whole point.
   These were radios, which cannot be unchecked by clicking them — a radio only
   ever switches to a different radio in its group. So the panel that opened by
   default could never be closed, on every accordion on the site: the service
   cards on mobile and the FAQ at every width. A checkbox toggles, which is what
   a disclosure widget is, and it also announces as checked/unchecked rather
   than as one option among several.

   The cost is that panels no longer close each other. For an FAQ that is normal
   and usually preferred; nobody opening a second question wants the first to
   vanish mid-read.

   The testimonial slider stays a radio deliberately — a slider has exactly one
   active slide, which is what a radio group means. */
.sv-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.sv-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sp-red);
}
.sv-h2 { font-size: 38px !important; line-height: 1.2; }
.sv-btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 15px; line-height: 1.3;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red);
  padding: 15px 28px; border-radius: 8px; text-decoration: none; align-self: flex-start;
  transition: background .15s ease, border-color .15s ease;
}
.sv-btn:hover, .sv-btn:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.sv a:focus-visible, .sv label:focus-within { outline: 2px solid var(--sp-red); outline-offset: 2px; }

/* the hero's mobile-only Contact Us button, inside the navy band */
.sv-hero__btn { display: none; }

/* ---- the six services ---- */
.sv-services { padding: 56px 56px 56px; }
.sv-head { display: flex; flex-direction: column; gap: 12px; }
.sv-head__title { font-size: 38px !important; line-height: 1.2; }
.sv-head__note { font-size: 14.5px; color: var(--sp-muted); }
.sv-head__tap { display: none; }
.sv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch; margin-top: 28px;
}

.sv-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--sp-border); border-radius: 12px;
  overflow: hidden; transition: border-color .7s ease;
}
/* the ripple — see the note at the top of this section */
.sv-card::before {
  content: ""; position: absolute; top: 31px; right: 31px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sp-navy);
  transform: scale(0); transition: transform .7s ease;
  z-index: 0;
}
.sv-card > * { position: relative; z-index: 1; }

.sv-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 26px 26px 18px;
}
.sv-card__names { display: flex; flex-direction: column; gap: 4px; padding-right: 40px; }
.sv-card__name {
  font-family: "Marcellus", Georgia, serif; font-size: 24px; line-height: 1.25;
  color: var(--sp-navy); transition: color .8s ease;
}
.sv-card__soon {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sp-red); transition: color .8s ease;
}
/* The whole card is the link. The label sits under it and is inert at these widths —
   below 768px the two swap roles. */
.sv-card__link { position: absolute; inset: 0; z-index: 2; display: block; }
.sv-card__arrow {
  position: absolute; top: 26px; right: 26px;
  width: 40px; height: 40px; border-radius: 999px; background: var(--sp-red);
  display: grid; place-items: center;
  transition: box-shadow .7s ease;
}
/* a ring rather than the original's `border: 2px + padding: 10px`, which grew the circle
   by 24px mid-sweep and made it jump */

.sv-card__panel { display: flex; flex-direction: column; flex: 1; }
.sv-card__desc {
  padding: 0 26px 20px; font-size: 14px; line-height: 1.75; color: var(--sp-body);
  transition: color .8s ease;
}
/* `margin-top: auto` pins the photo to the bottom, so photos line up across a row
   whatever the description length */
.sv-card__photo {
  margin: auto 26px 26px; height: 190px; flex: none; width: calc(100% - 52px);
  object-fit: cover; border-radius: 8px; display: block; background: var(--sp-cream);
}
/* The +/- indicator belongs to whichever accordion is active at this width. It is off
   by default and switched on per context below — an unscoped `.sv-ind { display: block }`
   for the FAQ silently turned it on for the service cards too, where it rendered as two
   red nubs poking out from behind the red arrow circle. Rule order inside this file is
   not a substitute for scoping. */
.sv-ind { display: none; flex: none; color: var(--sp-red); }
.sv-ind svg { display: block; fill: currentColor; }
.sv-ind__plus, .sv-ind__minus { display: none; }

/*
 * THE WHOLE FLIPPED STATE IS SCOPED TO >=768px, and that is not tidiness.
 *
 * `(hover: hover)` keeps a touch device from sticking in a hover state, but it does
 * nothing for `:focus-within` — and below 768px the card header is a <label>, so tapping
 * it focuses the radio and the card matches `:focus-within` immediately. The sweep is
 * disabled at that width, so the text turned white on a still-white card and the open
 * service was blank. Caught on a real tap, not by reading the rule.
 *
 * `:focus-within` is here for the keyboard, which the handoff asks for: at these widths
 * the card radio is display:none, so the only thing inside that can take focus is the
 * card's own link.
 */
@media (min-width: 768px) and (hover: hover) {
  .sv-card:hover::before { transform: scale(80); }
  .sv-card:hover { border-color: var(--sp-navy); }
  .sv-card:hover .sv-card__name,
  .sv-card:hover .sv-card__soon { color: #fff; }
  .sv-card:hover .sv-card__desc { color: rgba(255, 255, 255, .78); }
  .sv-card:hover .sv-card__arrow { box-shadow: 0 0 0 2px #fff; }
}
@media (min-width: 768px) {
  .sv-card:focus-within::before { transform: scale(80); }
  .sv-card:focus-within { border-color: var(--sp-navy); }
  .sv-card:focus-within .sv-card__name,
  .sv-card:focus-within .sv-card__soon { color: #fff; }
  .sv-card:focus-within .sv-card__desc { color: rgba(255, 255, 255, .78); }
  .sv-card:focus-within .sv-card__arrow { box-shadow: 0 0 0 2px #fff; }
}

/* The colour change stays; only the motion goes. */
@media (prefers-reduced-motion: reduce) {
  .sv-card::before, .sv-card, .sv-card__name, .sv-card__soon,
  .sv-card__desc, .sv-card__arrow { transition: none; }
}

/* ---- how it works ---- */
.sv-how {
  background: var(--sp-cream); padding: 56px;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start;
}
.sv-how__lead { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.sv-how__body { font-size: 15px; line-height: 1.8; color: var(--sp-body); }
.sv-steps { display: flex; flex-direction: column; }
.sv-step {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 22px 0; border-top: 1px solid var(--sp-border);
}
.sv-step__icon { display: block; width: 60px; height: 60px; flex: none; }
.sv-step__icon svg { display: block; width: 60px; height: 60px; }
.sv-step__title { font-size: 23px !important; line-height: 1.25; }
.sv-step__body { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); margin-top: 6px !important; }

/* ---- faq ---- */
.sv-faq {
  background: #fff; padding: 56px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start;
}
.sv-faq__photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; display: block;
  background: var(--sp-cream);
}
.sv-faq__body { display: flex; flex-direction: column; gap: 16px; }
.sv-qs { display: flex; flex-direction: column; margin-top: 8px; }
.sv-q { border-top: 1px solid var(--sp-border); }
.sv-q__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer;
}
.sv-q__text { font-size: 16px; line-height: 1.5; color: var(--sp-navy); }
.sv-q__a {
  font-size: 14.5px; line-height: 1.75; color: var(--sp-body); max-width: 620px;
  padding-bottom: 20px; display: none;
}
.sv-toggle:checked ~ .sv-q__a { display: block; }
.sv-q .sv-ind { display: block; width: 20px; height: 20px; }
.sv-q .sv-ind svg { width: 20px; height: 20px; }
.sv-q .sv-ind__plus { display: block; }
.sv-q .sv-toggle:checked ~ .sv-q__head .sv-ind__plus { display: none; }
.sv-q .sv-toggle:checked ~ .sv-q__head .sv-ind__minus { display: block; }
.sv-q__head:hover .sv-q__text { color: var(--sp-red); }

/* Above 768px the panel is always visible, so the card radios do nothing but sit in the
   tab order as six invisible stops. The FAQ radios stay — they are its control at every
   width. */
@media (min-width: 768px) {
  .sv-card > .sv-toggle { display: none; }
}

/* =============== tablet — 768 to 1199 =============== */
@media (max-width: 1199px) {
  .sv-services { padding: 44px 40px; }
  .sv-head__title { font-size: 32px !important; }
  .sv-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .sv-card__head { padding: 24px 24px 16px; }
  .sv-card__name { font-size: 22px; }
  .sv-card__desc { padding: 0 24px 18px; font-size: 13.5px; }
  .sv-card__photo { margin: auto 24px 24px; height: 170px; width: calc(100% - 48px); }
  .sv-card__arrow { top: 24px; right: 24px; }
  .sv-card::before { top: 29px; right: 29px; }

  .sv-how { grid-template-columns: 1fr; gap: 28px; padding: 44px 40px; }
  .sv-h2 { font-size: 32px !important; }
  .sv-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .sv-step__title { font-size: 21px !important; }
  .sv-step__body { font-size: 14px; }

  /* the 4:5 photo would squeeze both columns at this width */
  .sv-faq { grid-template-columns: 1fr; padding: 44px 40px; }
  .sv-faq__photo { display: none; }
  .sv-q__text { font-size: 15.5px; }
}

/* =============== mobile — under 768 =============== */
/* Hover does not exist on touch, so the card treatment becomes tap-to-open. Six always-
   open photo cards would run about 2,300px; the accordion is roughly a third of that. */
@media (max-width: 767px) {
  .sv-hero__btn {
    display: block; width: 100%; margin-top: 6px; text-align: center;
    font-family: "Sora", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.3;
    background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red);
    padding: 16px; border-radius: 8px; text-decoration: none;   /* ~53px tap target */
  }
  .sv-hero__btn:hover, .sv-hero__btn:focus-visible { background: #fff; border-color: #fff; color: var(--sp-navy); }

  .sv-services { padding: 28px 20px; }
  .sv-head__title { font-size: 26px !important; }
  .sv-head__note { display: none; }
  .sv-head__tap { display: block; font-size: 13.5px; color: var(--sp-muted); }
  .sv-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }

  .sv-card { border-radius: 10px; transition: border-color .15s ease; }
  .sv-card::before { display: none; }            /* no sweep without a pointer */
  .sv-card__link { display: none; }              /* the label is the control here */
  .sv-card__head { padding: 18px 20px; gap: 12px; align-items: center; cursor: pointer;
    min-height: 55px; }
  .sv-card__names { padding-right: 0; gap: 2px; }
  .sv-card__name { font-size: 20px; }
  .sv-card__soon { font-size: 9.5px; }
  .sv-card__panel { display: none; }
  .sv-toggle:checked ~ .sv-card__panel { display: flex; }
  .sv-card:has(.sv-toggle:checked) { border-color: var(--sp-red); }
  .sv-card__desc { padding: 0 20px 12px; font-size: 14px; }
  .sv-card__photo { margin: 0 20px 20px; height: 170px; width: calc(100% - 40px); }
  .sv-card .sv-ind { display: block; width: 19px; height: 19px; }
  .sv-card .sv-ind svg { width: 19px; height: 19px; }
  .sv-card .sv-ind__plus { display: block; }
  .sv-card .sv-toggle:checked ~ .sv-card__head .sv-ind__plus { display: none; }
  .sv-card .sv-toggle:checked ~ .sv-card__head .sv-ind__minus { display: block; }

  /* How it works moves onto navy, to break up a long white read */
  .sv-how { background: var(--sp-navy); padding: 30px 20px; gap: 20px; }
  .sv-how .sv-h2 { color: #fff !important; font-size: 26px !important; }
  .sv-how__body { color: rgba(255, 255, 255, .78); font-size: 14px; }
  .sv-how .sv-eyebrow { color: #fff; }
  .sv-steps { grid-template-columns: 1fr; gap: 10px; }
  .sv-step {
    background: rgba(255, 255, 255, .08); border-radius: 10px; border-top: 0;
    padding: 20px; gap: 16px; align-items: center;
  }
  .sv-step__icon, .sv-step__icon svg { width: 44px; height: 44px; }
  .sv-step__title { font-size: 20px !important; color: #fff !important; }
  .sv-step__body { color: rgba(255, 255, 255, .78); font-size: 14px; }
  .sv-btn { width: 100%; text-align: center; padding: 16px; }

  .sv-faq { padding: 30px 20px; gap: 0; }
  .sv-faq .sv-h2 { font-size: 26px !important; }
  .sv-qs { gap: 10px; margin-top: 14px; }
  .sv-q {
    background: var(--sp-cream); border-top: 0; border-radius: 10px; padding: 0 20px;
  }
  .sv-q__head { padding: 18px 0; min-height: 55px; align-items: center; }
  .sv-q__text { font-size: 15px; }
  .sv-q__a { padding-bottom: 18px; font-size: 14px; }
}

/* =============================================================================
 * /about-us/ — the A1 handoff (design_handoff_about)
 *
 * The navy band is the SHARED hero with the three anchor facts hung off the bottom
 * through pageHero()'s `after` slot. The handoff specifies its own band — 76px padding,
 * 62px h1, a different eyebrow size — but this site has one navy band and the heading
 * lands in the same place on all eight rebuilt pages. Only `padding-bottom` is dropped,
 * so the anchor row sits flush; the padding-TOP that positions the heading is untouched.
 *
 * The About section is one grid with named areas rather than nested columns, because the
 * Call Us panel has to escape the right-hand column at tablet and the heading has to
 * jump above the photo at mobile. Same approach as /contact-us/: one DOM, three orders.
 *
 * Widows are handled by `text-wrap`, not by gluing the last two words with a
 * non-breaking space. The handoff does the latter and then has to shrink the About h2 to
 * 27px/25px because the glued pair becomes an unbreakable 358px token — a rigid token
 * forcing a smaller heading is the worse trade, and `balance`/`pretty` is what the other
 * seven pages already use.
 *
 * Buttons are 8px, not the handoff's 999px pills. The handoff follows the live site,
 * where most pages are still the vendor's; the six pages rebuilt before this one are all
 * 8px, and this page sits among them. Flagged for the clinic — it is one value here if
 * they would rather go the other way.
 * ========================================================================== */
.ab { background: #fff; }
.ab p { text-wrap: pretty; }
.ab h1, .ab h2, .ab h3 { text-wrap: balance; }

/* ---- the anchor row inside the navy band ---- */
.ab .sp-hero { padding-bottom: 0; }        /* the row is flush to the bottom edge */
.ab-anchors {
  width: 100%; margin-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: grid; grid-template-columns: repeat(3, 1fr);
  text-align: left;
}
.ab-anchor { padding: 26px 28px 30px; }
.ab-anchor:first-child { padding-left: 0; }
.ab-anchor + .ab-anchor { border-left: 1px solid rgba(255, 255, 255, .16); }
.ab-anchor__label { display: none; }       /* mobile only — see the 2x2 grid below */
.ab-anchor__fig {
  font-family: "Marcellus", Georgia, serif; font-size: 26px; line-height: 1.2; color: #fff;
}
.ab-anchor__cap {
  font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); margin-top: 6px !important;
}

/* ---- shared bits ---- */
/* Same values as .sv-eyebrow on /services/, so the two pages' section labels match. */
.ab-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sp-red);
}
.ab-eyebrow--on-navy { color: rgba(255, 255, 255, .75); }
.ab-h2 { font-size: 38px !important; line-height: 1.2; margin-top: 10px !important; }
.ab-p { font-size: 15.5px; line-height: 1.85; color: var(--sp-body); }
.ab-btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 15px; line-height: 1.3;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red);
  padding: 15px 28px; border-radius: 8px; text-decoration: none; text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ab-btn:hover, .ab-btn:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.ab-btn--start { align-self: flex-start; }
.ab-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.ab-btn--ghost:hover, .ab-btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--sp-navy); }
.ab a:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.ab .sp-hero a:focus-visible, .ab-cta a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- About Horizons ---- */
/* Named areas, not nested columns: the Call Us panel leaves the right column at tablet
   and the heading moves above the photos at mobile. */
.ab-about {
  display: grid; grid-template-columns: 1fr 1.05fr; column-gap: 56px; row-gap: 0;
  align-items: center;
  grid-template-areas:
    "photos head"
    "photos body"
    "photos callus";
}
.ab-head   { grid-area: head; align-self: end; }
.ab-photos { grid-area: photos; align-self: center; }
.ab-body   { grid-area: body; margin-top: 18px; }
.ab-callus { grid-area: callus; margin-top: 26px; align-self: start; }

.ab-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 240px; gap: 16px; }
.ab-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block;
  background: var(--sp-cream); }
.ab-photo--1 { grid-column: 1 / -1; }

.ab-checks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ab-check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.ab-check__mark { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--sp-red); }
.ab-check__mark svg { display: block; width: 18px; height: 18px; fill: currentColor; }
.ab-check__text { font-size: 14.5px; line-height: 1.65; color: var(--sp-body); }

.ab-callus {
  background: var(--sp-cream); border-radius: 14px; padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.ab-callus__label {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted);
}
.ab-callus__num, .ab-callus__num a {
  font-family: "Marcellus", Georgia, serif; font-size: 26px; line-height: 1.2;
  color: var(--sp-navy); text-decoration: none;
}
/* The number is a tel: link and measured 33px — above the 24px WCAG minimum but under
   the 44px this project holds to. The padding is cancelled by an equal negative margin,
   so the tap area grows to 47px and nothing moves. */
.ab-callus__num a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.ab-callus__num a:hover { text-decoration: underline; }

/* ---- What We Do ---- */
.ab-what { display: flex; flex-direction: column; gap: 36px; }
.ab-what__head { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: end; }
.ab-claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.ab-claim {
  background: #fff; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
}
.ab-claim__bar { height: 5px; background: var(--sp-red); display: block; }
.ab-claim__body { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.ab-claim__n { font-family: "Marcellus", Georgia, serif; font-size: 20px; color: var(--sp-red); }
.ab-claim__t { font-size: 15px; line-height: 1.7; color: rgba(27, 63, 85, .78); }

/* ---- How It Works ---- */
.ab-how { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.ab-how__lead { display: flex; flex-direction: column; align-items: flex-start; }
.ab-how__lead .ab-p { margin-top: 16px !important; }
.ab-how__btn { margin-top: 24px; }
.ab-steps { display: flex; flex-direction: column; }
.ab-step {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 22px 0; border-top: 1px solid var(--sp-border);
}
.ab-step__icon, .ab-step__icon svg { display: block; width: 60px; height: 60px; flex: none; }
.ab-step__title { font-size: 23px !important; line-height: 1.25; }
.ab-step__body { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); margin-top: 6px !important; }

/* ---- contact CTA ---- */
.ab-ctawrap { background: #fff; padding: 0 56px 56px; }
.ab-cta {
  background: var(--sp-navy); border-radius: 20px; padding: 52px 56px;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.ab-cta__title { font-size: 38px !important; line-height: 1.12; color: #fff !important; margin-top: 10px !important; }
.ab-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* =============== tablet — 768 to 1199 =============== */
@media (max-width: 1199px) {
  .ab-anchor { padding: 22px 20px 26px; }
  .ab-anchor__fig { font-size: 22px; }

  /* the Call Us panel leaves the right column so it does not squeeze */
  .ab-about {
    grid-template-columns: 1fr 1.1fr; column-gap: 36px;
    grid-template-areas:
      "photos head"
      "photos body"
      "callus callus";
  }
  .ab-photos { grid-template-columns: 1fr; grid-template-rows: 150px 190px; gap: 14px; }
  .ab-photo--1 { grid-column: auto; }
  .ab-photo--3 { display: none; }        /* two stacked at this width */
  .ab-h2 { font-size: 32px !important; }
  /* The About heading is special-cased, as the handoff specifies. "About Horizons
     Cardiopulmonary Diagnostics" wraps to THREE lines at 32px in a 394px column; at 27px
     `text-wrap: balance` gives the designed two — "About Horizons" over "Cardiopulmonary
     Diagnostics" — without gluing the last two words into an unbreakable token. */
  .ab-about .ab-h2 { font-size: 27px !important; }
  .ab-p { font-size: 15px; }
  .ab-callus { margin-top: 36px; }

  .ab-what { gap: 28px; }
  .ab-what__head { grid-template-columns: 1fr; gap: 16px; }
  .ab-claim__body { padding: 22px; gap: 12px; }
  .ab-claim__n { font-size: 19px; }
  .ab-claim__t { font-size: 14px; }

  .ab-how { grid-template-columns: 1fr; gap: 28px; }
  .ab-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .ab-step__title { font-size: 21px !important; }

  .ab-ctawrap { padding: 0 40px 52px; }
  .ab-cta { grid-template-columns: 1fr; gap: 28px; padding: 40px 36px; }
  .ab-cta__title { font-size: 32px !important; }
}

/* =============== mobile — under 768 =============== */
@media (max-width: 767px) {
  /* 2x2 anchor grid, the treatment the client picked on the home page. The small labels
     exist so the three figures share a left edge and read as a set. */
  .ab-anchors { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .ab-anchor { padding: 18px 16px 20px; }
  .ab-anchor:first-child { padding-left: 0; }
  .ab-anchor:nth-child(3) {
    grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16);
    padding-left: 0;
  }
  .ab-anchor__label {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 6px !important;
  }
  .ab-anchor__fig { font-size: 24px; }
  .ab-anchor__cap { font-size: 12.5px; }

  /* heading, then one 4:3 photo, then the prose */
  .ab-about {
    grid-template-columns: 1fr; column-gap: 0;
    grid-template-areas: "head" "photos" "body" "callus";
  }
  .ab-photos { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; margin-top: 20px; }
  .ab-photo { border-radius: 12px; }
  .ab-photo--1 { aspect-ratio: 4 / 3; height: auto; }
  .ab-photo--2 { display: none; }
  .ab-h2 { font-size: 26px !important; }
  .ab-about .ab-h2 { font-size: 25px !important; }   /* same heading, same reason */
  .ab-p { font-size: 14.5px; }
  .ab-body { margin-top: 20px; }
  .ab-callus {
    margin-top: 22px; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 22px;
  }
  .ab-btn { padding: 16px 24px; }        /* ~51px tap target */
  .ab-callus .ab-btn { width: 100%; }

  .ab-what { gap: 22px; }
  .ab-claims { grid-template-columns: 1fr; gap: 14px; }
  .ab-claim__body { padding: 20px 22px; }
  .ab-claim__t { font-size: 14.5px; }
  .ab-what .ab-btn { align-self: stretch; }

  .ab-how { gap: 24px; }
  .ab-how__btn { display: none; }        /* the CTA card follows immediately */
  .ab-steps { grid-template-columns: 1fr; }
  .ab-step { gap: 16px; padding: 18px 0; }
  .ab-step__icon, .ab-step__icon svg { width: 44px; height: 44px; }
  .ab-step__title { font-size: 20px !important; }

  .ab-ctawrap { padding: 0 20px 32px; }
  .ab-cta { border-radius: 18px; padding: 28px 22px; gap: 22px; }
  .ab-cta__title { font-size: 26px !important; }
  .ab-cta__btns { flex-direction: column; }
  .ab-cta__btns .ab-btn { width: 100%; }
}

/* =============================================================================
 * /our-clinic/ — the C1 handoff (design_handoff_our_clinic)
 *
 * The band is the shared hero with the two actions and the three-fact row hung off it
 * through pageHero()'s `after` slot — the same shape /about-us/ uses. Only
 * `padding-bottom` is dropped so the fact row sits flush.
 *
 * Finding Us is one grid with named areas, not nested columns: at desktop the map is a
 * right-hand column beside the copy, and below 1200px it slots BETWEEN the paragraph and
 * the address rows. Same one-DOM-three-orders approach as /contact-us/ and /about-us/.
 *
 * Gallery heights are fixed on purpose. The handoff is explicit that the tiles must not
 * be sized by their intrinsic dimensions — that is what makes the current page's images
 * land at seven different sizes — so every slot has a height or an aspect-ratio and the
 * photos fill it with object-fit: cover.
 * ========================================================================== */
.oc { background: #fff; }
.oc p { text-wrap: pretty; }
.oc h1, .oc h2 { text-wrap: balance; }

.oc-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sp-red);
}
.oc-h2 { font-size: 38px !important; line-height: 1.15; margin-top: 10px !important; }
.oc-p { font-size: 15.5px; line-height: 1.85; color: var(--sp-body); margin-top: 16px !important; }
.oc-btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 15px; line-height: 1.3;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red);
  padding: 16px 30px; border-radius: 8px; text-decoration: none; text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.oc-btn:hover, .oc-btn:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.oc-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.oc-btn--ghost:hover, .oc-btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--sp-navy); }
.oc a:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.oc .sp-hero a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the band's actions and fact row ---- */
.oc .sp-hero { padding-bottom: 0; }          /* the fact row is flush to the bottom edge */
.oc-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.oc-facts {
  width: 100%; margin-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: grid; grid-template-columns: 1.2fr 1fr 1fr;   /* the address gets the wider cell */
  text-align: left;
}
.oc-fact { padding: 26px 28px 30px; }
.oc-fact:first-child { padding-left: 0; }
.oc-fact + .oc-fact { border-left: 1px solid rgba(255, 255, 255, .16); }
.oc-fact__label {
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.oc-fact__value {
  font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .85); margin-top: 8px !important;
}

/* ---- gallery ---- */
.oc-gallery { padding: 56px; display: flex; flex-direction: column; gap: 14px; }
.oc-lead {
  width: 100%; height: 520px; object-fit: cover; border-radius: 16px; display: block;
  background: var(--sp-cream);
}
.oc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.oc-tile {
  width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 14px; display: block;
  background: var(--sp-cream);
}

/* ---- parking / accessibility ---- */
/* stretch, not start: the two cards carry one and two lines of body copy, and the
   handoff shows them level. */
.oc-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.oc-card {
  background: #fff; border-radius: 16px; padding: 30px 32px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.oc-card__icon {
  width: 44px; height: 44px; border-radius: 999px; background: var(--sp-navy);
  display: grid; place-items: center; color: #fff; flex: none;
}
.oc-card__icon svg { display: block; width: 19px; height: 19px; fill: currentColor; }
.oc-card__title { font-size: 24px !important; line-height: 1.25; }
.oc-card__body { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); }

/* ---- finding us ---- */
.oc-find {
  display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 48px; row-gap: 0;
  align-items: center;
  grid-template-areas:
    "head map"
    "rows map"
    "btn  map";
}
.oc-find__head { grid-area: head; align-self: end; }
.oc-map        { grid-area: map; align-self: center; }
.oc-rows       { grid-area: rows; margin-top: 26px; }
.oc-find__btn  { grid-area: btn; justify-self: start; margin-top: 26px; }

.oc-map {
  width: 100%; height: 400px; display: block;
  border: 1px solid var(--sp-border); border-radius: 16px; background: var(--sp-cream);
}
.oc-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--sp-border);
}
.oc-row__label {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted);
}
.oc-row__value, .oc-row__value a { font-size: 15px; line-height: 1.6; color: var(--sp-navy); text-decoration: none; }
.oc-row__value a { display: inline-block; padding: 11px 0; margin: -11px 0; }   /* 24px line box -> 46px target */
.oc-row__value a:hover { text-decoration: underline; }

/* =============== tablet — 768 to 1199 =============== */
@media (max-width: 1199px) {
  .oc-fact { padding: 22px 18px 26px; }
  .oc-fact__value { font-size: 13.5px; }

  .oc-gallery { padding: 44px 40px; gap: 12px; }
  .oc-lead { height: 380px; }
  .oc-tiles { gap: 12px; }

  .oc-amen { gap: 20px; }
  .oc-card { padding: 26px 28px; }
  .oc-card__title { font-size: 22px !important; }

  /* the map moves between the paragraph and the address rows */
  .oc-find {
    grid-template-columns: 1fr; column-gap: 0;
    grid-template-areas: "head" "map" "rows" "btn";
  }
  .oc-h2 { font-size: 30px !important; }
  .oc-p { font-size: 15px; }
  .oc-map { height: 300px; margin-top: 26px; }
  .oc-row { grid-template-columns: 96px 1fr; }
}

/* =============== mobile — under 768 =============== */
@media (max-width: 767px) {
  .oc-hero__btns { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .oc-hero__btns .oc-btn { width: 100%; padding: 17px; }    /* ~53px tap target */

  /* 2x2 fact grid — Parking and Accessibility above, Address across the bottom, because
     the address is the longest value and wrapping it in a half column reads badly. */
  .oc-facts { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .oc-fact { padding: 18px 16px 20px; }
  .oc-fact:first-child {
    order: 2; grid-column: 1 / -1; border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .16); padding-left: 0;
  }
  .oc-fact:nth-child(2) { padding-left: 0; }
  .oc-fact:nth-child(3) { border-left: 1px solid rgba(255, 255, 255, .16); }
  .oc-fact__value { font-size: 14px; }

  /* lead, then two square tiles side by side, then one wide */
  .oc-gallery { padding: 28px 20px; gap: 10px; }
  .oc-lead { height: 240px; border-radius: 14px; }
  .oc-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .oc-tile { aspect-ratio: 1 / 1; border-radius: 12px; }
  .oc-tile--3 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

  .oc-amen { grid-template-columns: 1fr; gap: 14px; }
  .oc-card { padding: 24px; }
  .oc-card__title { font-size: 21px !important; }

  .oc-h2 { font-size: 26px !important; }
  .oc-p { font-size: 14.5px; }
  .oc-map { height: 220px; border-radius: 14px; margin-top: 22px; }
  .oc-rows { margin-top: 22px; }
  .oc-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .oc-find__btn { justify-self: stretch; text-align: center; padding: 17px; }
}

/* =============================================================================
 * / — the H1 handoff (design_handoff_home)
 *
 * The last page on the vendor's markup, and the only one whose band was never a title
 * band: a rounded 100vh image hero inset 10px, with no <h1> in it at all. This is a
 * full-bleed 620px hero with a real heading and a bottom-weighted scrim.
 *
 * THE SERVICE CARDS REUSE .sv-* EXACTLY. Nothing about the card is redefined here — same
 * markup from serviceCards(), same ripple, same arrow, same accordion. Only the four
 * generic rules that /services/ scopes to `.sv` (text-wrap, focus outline) are repeated
 * for `.hm`. The handoff asks for a 22px card name against Services' 24px and a 180px
 * tray against 190px; those 2px differences are dropped on purpose. Two cards that must
 * read as the same component are worth more than the spec's rounding.
 *
 * About uses named grid areas for the same reason /about-us/ does: the Call Us panel
 * leaves the right column at tablet and the heading jumps above the photo at mobile.
 * ========================================================================== */
.hm { background: #fff; }
.hm p, .hm blockquote { text-wrap: pretty; }
.hm h1, .hm h2, .hm h3 { text-wrap: balance; }
.hm a:focus-visible, .hm button:focus-visible, .hm label:focus-within {
  outline: 2px solid var(--sp-red); outline-offset: 2px;
}
.hm-hero a:focus-visible, .hm-testi a:focus-visible { outline-color: #fff; }

.hm-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sp-red);
}
.hm-eyebrow--on-navy { color: rgba(255, 255, 255, .75); }
.hm-h2 { font-size: 40px !important; line-height: 1.15; margin-top: 10px !important; }
/* The About heading is 38px, matching /about-us/ exactly — it is the same heading on the
   same site. At 40px "About Horizons Cardiopulmonary Diagnostics" breaks to three lines
   with a lone word in a 529px column at 1200px wide. */
.hm-about .hm-h2 { font-size: 38px !important; }
.hm-p { font-size: 15.5px; line-height: 1.85; color: var(--sp-body); }
/* Pills, not the 8px the interior pages use: the handoff follows the live home page and
   the hero's two buttons have always been pills here. */
.hm-btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.3;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red);
  padding: 17px 32px; border-radius: 999px; text-decoration: none; text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hm-btn:hover, .hm-btn:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.hm-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.hm-btn--ghost:hover, .hm-btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--sp-navy); }

/* ---- hero ---- */
.hm-hero {
  position: relative; height: 620px; background: var(--sp-navy);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 56px 72px; overflow: hidden;
}
.hm-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bottom-weighted, because the copy sits at the bottom. Without it the white type rides
   on whatever the photograph happens to be doing there. */
.hm-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(27, 63, 85, .94) 0%, rgba(27, 63, 85, .78) 40%,
    rgba(27, 63, 85, .45) 75%, rgba(27, 63, 85, .3) 100%);
}
.hm-hero__copy { position: relative; max-width: 820px; display: flex; flex-direction: column; gap: 20px; }
.hm-hero__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  display: flex; align-items: center; gap: 9px;
}
/* Decorative — the eyebrow says the same thing, so the img carries alt="". */
.hm-hero__mark { width: 24px; height: 24px; object-fit: contain; flex: none; display: block; }
.hm-hero__title { font-size: 62px !important; line-height: 1.1; color: #fff !important; }
.hm-hero__intro {
  font-size: 16.5px; line-height: 1.75; color: rgba(255, 255, 255, .82); max-width: 620px;
}
.hm-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* ---- proof strip ---- */
.hm-proof {
  background: var(--sp-navy); padding: 28px 56px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.hm-proof__label { display: none; }        /* mobile only — see the 2x2 grid below */
.hm-proof__fig {
  font-family: "Marcellus", Georgia, serif; font-size: 26px; line-height: 1.2; color: #fff;
}
.hm-proof__cap {
  font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); margin-top: 4px !important;
}

/* ---- about ---- */
/*
 * The two 1fr spacer rows are the whole point. The photo is 4:5 and spans the right
 * column's three rows, so at desktop it is ~300px taller than head + body + callus. With
 * three auto rows that surplus is distributed INTO them, and `align-items: center` then
 * centres each item inside its inflated row — which put 60px of dead space between the
 * heading and the paragraph, and 69px between the checkmarks and the Call Us panel.
 *
 * Sending the surplus to two flexible rows above and below instead keeps the three
 * content rows at their natural height and centres the group as a unit, which is what
 * the design shows: a tall photo overhanging a normally-spaced column.
 */
.hm-about {
  display: grid; grid-template-columns: 1fr 1.05fr; column-gap: 56px; row-gap: 0;
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas:
    "photo ."
    "photo head"
    "photo body"
    "photo callus"
    "photo .";
}
.hm-about__head  { grid-area: head; align-self: end; }
.hm-about__photo { grid-area: photo; align-self: center;
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; display: block;
  background: var(--sp-cream); }
.hm-about__body  { grid-area: body; margin-top: 18px; }
.hm-callus       { grid-area: callus; margin-top: 26px; align-self: start; }

.hm-checks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hm-check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.hm-check__mark { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--sp-red); }
.hm-check__mark svg { display: block; width: 18px; height: 18px; fill: currentColor; }
.hm-check__text { font-size: 14.5px; line-height: 1.65; color: var(--sp-body); }

.hm-callus {
  background: var(--sp-cream); border-radius: 14px; padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.hm-callus__label {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted);
}
.hm-callus__num, .hm-callus__num a {
  font-family: "Marcellus", Georgia, serif; font-size: 26px; line-height: 1.2;
  color: var(--sp-navy); text-decoration: none;
}
.hm-callus__num a { display: inline-block; padding: 8px 0; margin: -8px 0; }   /* >=44px */
.hm-callus__num a:hover { text-decoration: underline; }

/* ---- services (the shared .sv-card component) ---- */
.hm-services { display: flex; flex-direction: column; gap: 32px; }
.hm-services__head { text-align: center; }
.hm-services__tap { display: none; }

/* ---- how it works ---- */
.hm-how { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.hm-how__lead { display: flex; flex-direction: column; align-items: flex-start; }
.hm-how__lead .hm-p { margin-top: 16px !important; font-size: 15px; }
.hm-how__btn { margin-top: 24px; }
.hm-steps { display: flex; flex-direction: column; }
.hm-step {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 22px 0; border-top: 1px solid var(--sp-border);
}
.hm-step__icon, .hm-step__icon svg { display: block; width: 60px; height: 60px; flex: none; }
.hm-step__title { font-size: 23px !important; line-height: 1.25; }
.hm-step__body { font-size: 14.5px; line-height: 1.7; color: var(--sp-body); margin-top: 6px !important; }

/* ---- testimonial ---- */
.hm-testi {
  background: var(--sp-navy); padding: 72px 56px;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 56px; align-items: center;
  /* The photo spans both rows on the left; the heading sits above the quote on the
     right. Named areas rather than source order, because below 1200px the handoff
     wants the photo BETWEEN the heading and the quote — which no amount of `order`
     can do while the heading and quote live in the same flex child. */
  grid-template-areas: "photo head" "photo body";
}
.hm-testi__head { grid-area: head; align-self: end; }
.hm-testi__body { grid-area: body; display: flex; flex-direction: column; gap: 18px; align-self: start; padding-top: 18px; }
.hm-testi__photo {
  grid-area: photo; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 14px; display: block;
}
.hm-testi__title { font-size: 38px !important; line-height: 1.15; color: #fff !important; margin-top: 10px !important; }
/* `font-style: normal` is load-bearing: Astra italicises every <blockquote>, and the
   design sets the quote upright. <blockquote> is still the right element for a
   testimonial, so the element stays and the italic goes. */
.hm-testi__quote {
  margin: 20px 0 0; font-size: 15.5px; line-height: 1.9; color: rgba(255, 255, 255, .82);
  font-style: normal;
}
.hm-testi__name {
  font-family: "Marcellus", Georgia, serif; font-size: 20px; color: #fff;
  margin-top: 20px !important; display: flex; align-items: center; gap: 12px;
}
.hm-testi__dash { width: 32px; height: 2px; background: var(--sp-red); display: block; flex: none; }

/* ---- contact CTA ---- */
.hm-ctawrap { background: #fff; padding: 56px; }
.hm-cta {
  background: var(--sp-cream); border-radius: 20px; padding: 52px 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.hm-cta__title { font-size: 42px !important; line-height: 1.12; margin-top: 10px !important; }
.hm-cta__right { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.hm-cta__btns { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hm-cta__phone, .hm-cta__phone a {
  font-family: "Marcellus", Georgia, serif; font-size: 22px; color: var(--sp-navy); text-decoration: none;
}
.hm-cta__phone a { display: inline-block; padding: 11px 0; margin: -11px 0; }   /* >=44px */
.hm-cta__phone a:hover { text-decoration: underline; }

/* =============== tablet — 768 to 1199 =============== */
@media (max-width: 1199px) {
  .hm-hero { height: 480px; padding: 0 40px 52px; }
  .hm-hero__title { font-size: 46px !important; }
  .hm-hero__intro { font-size: 15.5px; max-width: 560px; }

  .hm-proof { padding: 24px 40px; gap: 28px; }
  .hm-proof__fig { font-size: 22px; }

  /* the Call Us panel leaves the right column so it does not squeeze */
  .hm-about {
    grid-template-columns: 1fr 1.1fr; column-gap: 36px;
    grid-template-rows: 1fr auto auto 1fr auto;
    grid-template-areas:
      "photo ."
      "photo head"
      "photo body"
      "photo ."
      "callus callus";
  }
  .hm-about__photo { aspect-ratio: 3 / 4; }
  .hm-h2 { font-size: 32px !important; }
  /* the About heading is special-cased, as on /about-us/: at 32px it wraps to three
     lines in this column, at 27px `balance` gives the designed two */
  .hm-about .hm-h2 { font-size: 27px !important; }
  .hm-p { font-size: 15px; }
  .hm-callus { margin-top: 36px; }

  .hm-services { gap: 24px; }
  .hm-how { grid-template-columns: 1fr; gap: 28px; }
  .hm-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .hm-step__title { font-size: 21px !important; }

  .hm-testi {
    grid-template-columns: 1fr; gap: 22px 0; padding: 52px 40px;
    grid-template-areas: "head" "photo" "body";
  }
  /* The photo used to be hidden below 1200px because it squeezed the two columns.
     It is not a second column here any more — it is a band between the heading and
     the quote, which is what the T1 handoff asks for and is better than dropping the
     only human face in the section. */
  .hm-testi__photo { display: block; aspect-ratio: auto; height: 240px; }
  .hm-testi__head, .hm-testi__body { align-self: auto; padding-top: 0; }
  .hm-testi__title { font-size: 30px !important; }

  .hm-ctawrap { padding: 52px 40px; }
  .hm-cta { grid-template-columns: 1fr; gap: 28px; padding: 40px 36px; }
  .hm-cta__title { font-size: 34px !important; }
}

/* =============== mobile — under 768 =============== */
@media (max-width: 767px) {
  .hm-hero { height: auto; min-height: 520px; padding: 36px 20px 32px; }
  /*
   * The scrim is re-weighted, not just darkened.
   *
   * At desktop the copy sits at the bottom of the band, so a bottom-weighted gradient
   * is right. Below 768px the hero is `height: auto` and the copy fills it — measured,
   * the eyebrow starts 8% down and the intro ends at 94% — so the gradient's premise
   * is false here and its light top landed the eyebrow on a brightly lit ceiling.
   *
   * Measured before: the worst background behind the eyebrow was rgb(172,183,189),
   * giving 2.05:1 against text that needs 4.5:1. Solving the composite for the navy
   * over a bright ceiling, 0.85 clears AA with margin even against rgb(225,228,230) —
   * 0.80 only just makes it, so this uses 0.85 and keeps a shallow ramp so the band
   * still reads as a photograph rather than a flat panel.
   */
  .hm-hero__scrim {
    background: linear-gradient(to top,
      rgba(27, 63, 85, .88) 0%, rgba(27, 63, 85, .80) 55%, rgba(27, 63, 85, .75) 100%);
  }
  /* 90% rather than the 75% used on flat navy elsewhere.
     The eyebrow is the binding constraint on the whole scrim: against the
     brightest pixel in its band it needs 0.82 of scrim at 75% opacity and only
     0.73 at 90%, so those fifteen points of text buy twelve points of
     photograph. It still reads as secondary — that comes from 10.5px uppercase
     with .16em tracking, not from being translucent.

     Deliberately NOT a gradient shaped to the text bands. The h1 only needs
     0.52 and a dip there would show much more of the desk, but the bands move
     the moment the headline wraps to a different number of lines, and this
     photograph is itself a placeholder. A shape fitted to today's reflow is a
     bug waiting for a narrower phone. */
  .hm-hero__eyebrow { color: rgba(255, 255, 255, .9); }
  /*
   * The eyebrow wraps to two lines at this width. The mark was aligned to the first
   * line, which is correct for one line and leaves it stranded at the top of a
   * two-line block — centring it against the whole label is what reads as aligned.
   */
  .hm-hero__eyebrow { font-size: 10.5px; gap: 8px; align-items: center; }
  .hm-hero__mark { width: 21px; height: 21px; margin-top: -2px; }
  .hm-hero__title { font-size: 35px !important; }
  .hm-hero__intro { font-size: 14.5px; }
  .hm-hero__btns { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .hm-hero__btns .hm-btn { width: 100%; padding: 16px; }     /* ~53px tap target */

  /* 2x2 proof grid — the version the client picked. The small labels exist so the three
     figures share a left edge and read as one set. */
  .hm-proof { grid-template-columns: 1fr 1fr; gap: 0; padding: 0 20px; }
  .hm-proof__cell { padding: 18px 16px 20px; }
  .hm-proof__cell:first-child { padding-left: 0; }
  .hm-proof__cell:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, .16); }
  .hm-proof__cell:nth-child(3) {
    grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .16); padding-left: 0;
  }
  .hm-proof__label {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 6px !important;
  }
  .hm-proof__cap { font-size: 12.5px; }

  /* heading, then a 4:3 photo, then the prose */
  .hm-about {
    grid-template-columns: 1fr; column-gap: 0;
    grid-template-rows: auto auto auto auto;   /* nothing spans here, so no surplus */
    grid-template-areas: "head" "photo" "body" "callus";
  }
  .hm-about__photo { aspect-ratio: 4 / 3; margin-top: 20px; border-radius: 12px; }
  .hm-h2 { font-size: 28px !important; }
  .hm-about .hm-h2 { font-size: 25px !important; }
  .hm-p { font-size: 14.5px; }
  .hm-about__body { margin-top: 20px; }
  .hm-callus {
    margin-top: 22px; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 22px;
  }
  .hm-callus .hm-btn { width: 100%; }
  .hm-btn { font-size: 15px; padding: 16px 24px; }

  .hm-services { gap: 18px; }
  .hm-services__head { text-align: left; }
  .hm-services__tap { display: block; font-size: 13.5px; color: var(--sp-muted); margin-top: 8px !important; }

  .hm-how { gap: 22px; }
  .hm-how__btn { width: 100%; margin-top: 20px; }
  .hm-steps { grid-template-columns: 1fr; }
  .hm-step { gap: 16px; padding: 18px 0; }
  .hm-step__icon, .hm-step__icon svg { width: 44px; height: 44px; }
  .hm-step__title { font-size: 20px !important; }

  .hm-testi { padding: 32px 20px; gap: 18px 0; }
  .hm-testi__photo { height: 190px; border-radius: 12px; }
  .hm-testi__title { font-size: 26px !important; line-height: 1.18; }
  .hm-testi__quote { font-size: 14.5px; line-height: 1.85; }

  .hm-ctawrap { padding: 32px 20px; }
  .hm-cta { border-radius: 18px; padding: 28px 22px; gap: 22px; }
  .hm-cta__title { font-size: 28px !important; }
  .hm-cta__right { gap: 18px; }
  .hm-cta__btns { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .hm-cta__btns .hm-btn { width: 100%; }
  /* two stacked pills here, per the handoff — at desktop the number is plain Marcellus
     beside the button, at mobile it is the second button */
  .hm-cta__phone a {
    display: block; width: 100%; text-align: center;
    font-size: 20px; padding: 15px; margin: 0; border-radius: 999px;
    border: 1px solid rgba(27, 63, 85, .25); background: #fff;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .hm-cta__phone a:hover, .hm-cta__phone a:focus-visible {
    background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; text-decoration: none;
  }
}

/* ============================================================================
   /patient-information-for-common-cardiac-conditions/ — the D1 handoff
   ============================================================================
   Editorial rows replacing a three-up card grid that left an empty cell in its
   second row (five conditions do not divide by three) and mixed photographs
   with diagram screenshots at different intrinsic sizes, so no two cards agreed
   on height. Rows alternate the image side; every image is the same 4:3 box in
   the same column width whichever side it lands on.

   Breakpoints follow the handoff and the rest of this sheet: >=1200 desktop,
   768-1199 tablet, <768 mobile. */

/* The scope line under the title, inside the navy band. Derived from the data
   in conditionsBlock(), never written out, so it cannot go stale. */
.cd-count { font-size: 13.5px; color: rgba(255, 255, 255, .6); margin: 0 !important; }

/* ---- urgent strip ---- */
/* Directly under the hero and above the conditions, deliberately: a worried
   patient can land on this page from a search, and "call 911" must not sit
   below five screens of reading. */
.cd-urgent {
  background: var(--sp-cream);
  padding: 26px 56px;
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
}
.cd-urgent__mark {
  flex: none;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--sp-red); color: #fff;
  display: grid; place-items: center;
  font-family: "Sora", sans-serif; font-size: 19px; line-height: 1;
}
.cd-urgent__body {
  /* Full navy, not the 72% body tint — this is the one line on the page that
     has to read at full contrast. */
  font-size: 14.5px; line-height: 1.7; color: var(--sp-navy); margin: 0 !important;
}

/* ---- condition rows ---- */
.cd-rows { padding: 20px 56px 56px; display: flex; flex-direction: column; }

.cd-row {
  display: grid; gap: 48px; align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--sp-border);
  /* image | text — the image cell is the 1fr, the text cell the 1.15fr */
  grid-template-columns: 1fr 1.15fr;
}
/* Flipped rows put the TEXT first, so the template inverts with the order. Both
   ways round the image cell is 513px and the text cell 589px at the 1280px
   design width. Reordering the children without inverting the template makes
   the image widths alternate 513/589 down the page and drags the prose measure
   with them — the bug the handoff calls out by name. */
.cd-row--flip { grid-template-columns: 1.15fr 1fr; }

.cd-row__photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 16px; display: block;
  background: var(--sp-cream);
}
/* The three medical illustrations. Their labels run to the edge of a 3:2 frame, so
   `cover` into a 4:3 box cut them: "Atrial Fibrillation" rendered as "trial
   Fibrillation". Contained on cream instead — same box, same rhythm down the page,
   every word intact. Replace with true 4:3 artwork at >=1030px and this modifier
   comes off. */
.cd-row__photo--fit { object-fit: contain; padding: 14px; }
.cd-row__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cd-row__head { display: flex; align-items: baseline; gap: 14px; }
.cd-row__n {
  font-family: "Marcellus", serif; font-size: 20px; color: var(--sp-red);
  line-height: 1; flex: none;
}
.cd-row__name {
  font-family: "Marcellus", serif; font-size: 32px !important; font-weight: 400;
  line-height: 1.2; color: var(--sp-navy); margin: 0 !important;
  text-wrap: pretty;
}
.cd-row__body {
  font-size: 15.5px; line-height: 1.85; color: var(--sp-body); margin: 0 !important;
  text-wrap: pretty;
}
.cd-row__btn {
  align-self: flex-start;
  background: var(--sp-red); color: #fff;
  font-size: 13.5px; font-weight: 500; line-height: 1;
  padding: 13px 22px; border-radius: 999px;
  transition: background .15s ease;
}
.cd-row__btn:hover, .cd-row__btn:focus-visible {
  background: var(--sp-navy); color: #fff; text-decoration: none;
}
.cd-row__soon { font-size: 13px; color: rgba(27, 63, 85, .75); margin: 0 !important; }

/* ---- closing CTA ---- */
.cd-ctawrap { padding: 0 56px 56px; }
.cd-cta {
  background: var(--sp-navy); border-radius: 20px;
  padding: 52px 56px;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.cd-cta__copy { display: flex; flex-direction: column; gap: 12px; }
.cd-cta__eyebrow {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75); margin: 0 !important;
}
.cd-cta__title {
  font-family: "Marcellus", serif; font-size: 36px !important; font-weight: 400;
  line-height: 1.2; color: #fff !important; margin: 0 !important;
}
.cd-cta__note {
  font-size: 14.5px; line-height: 1.75; color: rgba(255, 255, 255, .78);
  max-width: 600px; margin: 0 !important;
}
.cd-cta__acts { display: flex; align-items: center; gap: 14px; }
.cd-cta__btn {
  background: var(--sp-red); color: #fff;
  font-size: 14.5px; font-weight: 500; line-height: 1;
  padding: 16px 26px; border-radius: 999px; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cd-cta__btn:hover, .cd-cta__btn:focus-visible { background: #fff; color: var(--sp-navy); text-decoration: none; }
.cd-cta__btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .5); }
.cd-cta__btn--ghost:hover, .cd-cta__btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--sp-navy); }
/* Inside the navy card the red focus ring has almost no contrast; white does. */
.cd-cta a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 1199px) {
  .cd-urgent { padding: 22px 40px; }
  .cd-urgent__mark { width: 32px; height: 32px; font-size: 18px; }
  .cd-urgent__body { font-size: 14px; }

  .cd-rows { padding: 16px 40px 48px; }
  .cd-row { gap: 32px; padding: 36px 0; grid-template-columns: 1fr 1.2fr; }
  .cd-row--flip { grid-template-columns: 1.2fr 1fr; }
  .cd-row__photo { border-radius: 14px; }
  .cd-row__n { font-size: 18px; }
  .cd-row__name { font-size: 26px !important; }
  .cd-row__body { font-size: 14.5px; }

  .cd-ctawrap { padding: 0 40px 48px; }
  .cd-cta { grid-template-columns: 1fr; gap: 28px; padding: 40px 36px; }
  .cd-cta__title { font-size: 30px !important; }
}

@media (max-width: 767px) {
  .cd-count { font-size: 12.5px; }

  /* The sentence wraps to three lines here, so the mark sits at the top of it
     rather than centred against the whole block. */
  .cd-urgent { padding: 22px 20px; align-items: start; gap: 12px; }

  .cd-rows { padding: 8px 20px 32px; }
  /* One column, so the alternation has nothing to alternate — both templates
     collapse to the same single-column flow and the flip class stops mattering. */
  .cd-row, .cd-row--flip {
    display: flex; flex-direction: column; gap: 14px;
    padding: 26px 0;
  }
  .cd-row__photo { border-radius: 12px; }
  .cd-row__n { font-size: 17px; }
  .cd-row__name { font-size: 23px !important; }
  .cd-row__btn {
    align-self: stretch; text-align: center;
    font-size: 15px; padding: 15px; /* ~49px tall, the handoff's tap-target floor */
  }

  .cd-ctawrap { padding: 0 20px 32px; }
  .cd-cta { border-radius: 18px; padding: 28px 22px; gap: 22px; }
  .cd-cta__title { font-size: 26px !important; }
  .cd-cta__acts { flex-direction: column; align-items: stretch; gap: 12px; }
  .cd-cta__btn { text-align: center; padding: 15px; font-size: 15px; }
}

/* ============================================================================
   /referrals/ — rebuilt around the provincial referral form
   ============================================================================
   The money page for the audience that actually decides where a patient goes.
   The hero carries the fax number rather than burying it in a contact block,
   because "what is their fax" is the single most common thing a referring
   office comes here to find. */

/* Contact row inside the navy band. Fax first and not a link — nobody taps a
   fax number, they copy it, and a tel: on it would dial a fax machine. */
.rp-contacts {
  list-style: none; padding: 0; margin: 4px 0 0 !important;
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
}
.rp-contact { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.rp-contact__label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.rp-contact__value { font-size: 20px; color: #fff; line-height: 1.3; }
a.rp-contact__value:hover, a.rp-contact__value:focus-visible { text-decoration: underline; }
.rp-contact__note { font-size: 12.5px; color: rgba(255, 255, 255, .55); }

/* ---- what happens after you refer ---- */
/* Single column since the on-site services panel came out (the clinic asked for it
   removed: three bullets read as an exhaustive list, and the real answer is "it
   depends on the referral"). Measured rather than left to fill the row — this is prose
   and it wants a reading measure, not 1200px of it. */
.rp-lead { display: block; }
.rp-lead__copy { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
/* The province's own sentence, set as the pull quote it deserves to be. */
.rp-lead__quote {
  font-family: "Marcellus", serif; font-size: 25px; line-height: 1.45;
  color: var(--sp-navy); margin: 6px 0 0 !important;
  padding-left: 20px; border-left: 3px solid var(--sp-red);
  text-wrap: pretty;
}
.rp-lead__attr {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sp-muted); margin: 0 0 0 23px !important;
}
.rp-lead__body { font-size: 15.5px; line-height: 1.85; color: var(--sp-body); margin: 6px 0 0 !important; }

/* ---- the two routes ---- */
.rp-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.rp-route {
  border: 1px solid var(--sp-border); border-radius: 12px; padding: 30px 30px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.rp-route__n {
  font-family: "Marcellus", serif; font-size: 20px; color: var(--sp-red);
  margin: 0 !important; line-height: 1;
}
.rp-route__title {
  font-family: "Marcellus", serif; font-size: 24px !important; font-weight: 400;
  line-height: 1.25; color: var(--sp-navy); margin: 0 !important;
}
.rp-route__body { font-size: 15px; line-height: 1.8; color: var(--sp-body); margin: 0 !important; }
.rp-route__body strong { font-weight: 400; color: var(--sp-navy); }
.rp-route__links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 6px 0 0 !important; }
.rp-route__links a { font-size: 14.5px; color: var(--sp-navy); text-underline-offset: 3px; }
.rp-nowrap { white-space: nowrap; }

/* The "what this test involves" link on a referral form card. Scoped `.sp p.rf-card__more`
   because `.sp p { margin: 0 }` is (0,1,1) and would eat the margin, and inline-flex with
   a min-height so the target clears WCAG 2.5.8's 24px — the same two traps the
   .pi-test__more link hit. */
.sp p.rf-card__more { margin: 8px 0 0; font-size: 14px; }
.rf-card__more a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--sp-navy); text-underline-offset: 3px;
}

/* ---- reporting back ----
   Same shape as .rp-urgent above it: an eyebrow, a Marcellus heading and a measure-capped
   body, so the two sections read as siblings rather than as two designs. The rows are a
   real <ul>/<li> for the same reason the guides' panels are — a referring office scanning
   for one number should find a list, not styled divs. Two columns at desktop because four
   short rows in one column leaves the section looking half-empty. */
.rp-turn { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.rp-turn__head { display: flex; flex-direction: column; gap: 10px; }
.rp-turn__body { font-size: 16px; line-height: 1.8; color: var(--sp-body); max-width: 720px; }
.rp-turn__list {
  list-style: none; margin: 8px 0 0 !important; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;
}
.rp-turn__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--sp-border); margin: 0;
}
.rp-turn__t { font-size: 15.5px; color: var(--sp-navy); }
/* Underlined, unlike the page's other links, and on purpose: three of these four rows
   are links and one ("Consultation") is not, so without an underline the linked rows are
   indistinguishable from the plain one. inline-flex + min-height carries the target over
   WCAG 2.5.8's 24px; at the inherited line height it measured 19. */
.rp-turn__t a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--sp-navy); text-decoration: underline; text-underline-offset: 3px;
}
.rp-turn__v { font-size: 15.5px; color: var(--sp-body); white-space: nowrap; }
.sp .rp-turn__note { font-size: 14.5px; line-height: 1.7; color: var(--sp-muted); margin: 10px 0 0; }

/* ---- urgent pathway ---- */
.rp-urgent { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.rp-urgent__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rp-urgent__tag {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sp-red); margin: 0 !important;
}
.rp-urgent__body { font-size: 15.5px; line-height: 1.85; color: var(--sp-body); margin: 0 !important; }

.rp-911 {
  margin-top: 28px; background: var(--sp-cream); border-radius: 12px;
  padding: 22px 26px; display: grid; grid-template-columns: auto 1fr; gap: 16px;
  align-items: center;
}
.rp-911__mark {
  flex: none; width: 34px; height: 34px; border-radius: 999px;
  background: var(--sp-red); color: #fff; display: grid; place-items: center;
  font-family: "Sora", sans-serif; font-size: 19px; line-height: 1;
}
.rp-911__body { font-size: 14.5px; line-height: 1.7; color: var(--sp-navy); margin: 0 !important; }

@media (max-width: 1199px) {
  .rp-contacts { gap: 28px; }
  .rp-contact__value { font-size: 18px; }
  .rp-lead { grid-template-columns: 1fr; gap: 28px; }
  .rp-lead__quote { font-size: 22px; }
  .rp-routes { grid-template-columns: 1fr; gap: 20px; }
  .rp-route { padding: 26px 24px 28px; }
  /* One column, for the same reason .rp-routes drops to one here: two 430px columns of
     "Exercise stress test / 1 to 7 days" do not survive the narrower measure. Below 768
     they overflowed the section by up to 7 children. */
  .rp-turn__list { grid-template-columns: 1fr; gap: 0; }
  .rp-route__title { font-size: 22px !important; }
}

@media (max-width: 767px) {
  /* The band is left-aligned below 768px, so the contact row follows it. */
  .rp-contacts { flex-direction: column; gap: 16px; align-items: stretch; }
  .rp-contact { text-align: left; }
  .rp-contact__value { font-size: 19px; }
  .rp-lead__quote { font-size: 19px; padding-left: 16px; }
  .rp-lead__attr { margin-left: 19px !important; }
  .rp-lead__body, .rp-urgent__body { font-size: 14.5px; }
    .rp-911 { align-items: start; padding: 20px; gap: 12px; }
}

/* ============================================================================
   Home page testimonials — the T1 slider
   ============================================================================
   Four real testimonials instead of one. The three that were not being shown
   were sitting in the captured carousel all along.

   The slider is radio inputs plus labels, so choosing a testimonial works with
   no JavaScript at all — and a radio group already answers arrow keys, so
   keyboard support comes free rather than being scripted. The prev/next
   buttons are the only part that needs a script, because they have to know the
   current index, so they stay hidden until that script runs: a reader without
   JavaScript never sees a control that does nothing. */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hm-testi__radio { position: absolute; opacity: 0; pointer-events: none; }

/* The stage is a single grid cell every slide sits in, so the section does not
   change height as you move between a 90-word quote and a 30-word one. Without
   it the page jumps under the reader's cursor mid-read. */
.hm-testi__stage { display: grid; min-height: 200px; align-items: start; }
.hm-testi__slide {
  grid-area: 1 / 1; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.hm-testi__quote {
  font-size: 15.5px; line-height: 1.9; color: rgba(255, 255, 255, .82);
  margin: 0 !important; font-style: normal;   /* Astra italicises every blockquote */
  border: 0; padding: 0; quotes: none;
}
.hm-testi__quote::before, .hm-testi__quote::after { content: none; }
.hm-testi__name {
  display: flex; align-items: center; gap: 14px;
  font-family: "Marcellus", serif; font-size: 20px; color: #fff; margin: 0 !important;
}
.hm-testi__dash { flex: none; width: 32px; height: 2px; background: var(--sp-red); display: block; }

/* Reveal the checked slide. Sibling selector, so the radios must precede the stage. */
.hm-testi__radio:nth-of-type(1):checked ~ .hm-testi__stage .hm-testi__slide:nth-child(1),
.hm-testi__radio:nth-of-type(2):checked ~ .hm-testi__stage .hm-testi__slide:nth-child(2),
.hm-testi__radio:nth-of-type(3):checked ~ .hm-testi__stage .hm-testi__slide:nth-child(3),
.hm-testi__radio:nth-of-type(4):checked ~ .hm-testi__stage .hm-testi__slide:nth-child(4),
.hm-testi__radio:nth-of-type(5):checked ~ .hm-testi__stage .hm-testi__slide:nth-child(5),
.hm-testi__radio:nth-of-type(6):checked ~ .hm-testi__stage .hm-testi__slide:nth-child(6) {
  opacity: 1; visibility: visible;
}

/* ---- controls ---- */
.hm-testi__controls {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16);
}
/* Gap is 15px, not the handoff's 10px, and the extra 5px is load-bearing.
   Each dot needs a hit area far larger than its 9px of paint, and those areas
   must not overlap or the wrong dot takes the tap. At a 10px gap the pitch is
   19px, so any target wide enough to be usable collided with its neighbours —
   caught by a click test that kept landing on dot 3 while aiming at dot 2.
   15px makes the pitch 24px, which is exactly WCAG 2.5.8's minimum target size
   and leaves the row visually unchanged to anyone not measuring it. */
.hm-testi__dots { display: flex; align-items: center; gap: 15px; height: 44px; }
.hm-testi__dot {
  position: relative; display: block; cursor: pointer;
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  transition: background .2s ease, width .2s ease;
}
/* 24px wide (the pitch, so neighbours never overlap) by the full 44px row
   height, which costs nothing because the row is already that tall. */
.hm-testi__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 24px; height: 44px; transform: translate(-50%, -50%);
}
.hm-testi__radio:nth-of-type(1):checked ~ .hm-testi__controls .hm-testi__dot:nth-child(1),
.hm-testi__radio:nth-of-type(2):checked ~ .hm-testi__controls .hm-testi__dot:nth-child(2),
.hm-testi__radio:nth-of-type(3):checked ~ .hm-testi__controls .hm-testi__dot:nth-child(3),
.hm-testi__radio:nth-of-type(4):checked ~ .hm-testi__controls .hm-testi__dot:nth-child(4),
.hm-testi__radio:nth-of-type(5):checked ~ .hm-testi__controls .hm-testi__dot:nth-child(5),
.hm-testi__radio:nth-of-type(6):checked ~ .hm-testi__controls .hm-testi__dot:nth-child(6) {
  width: 26px; background: var(--sp-red);
}
/* The radio is visually hidden, so its focus ring has to be drawn on the label. */
.hm-testi__radio:focus-visible ~ .hm-testi__controls .hm-testi__dot { outline: 2px solid #fff; outline-offset: 4px; }

.hm-testi__nav { display: flex; align-items: center; gap: 10px; }
.hm-testi__count {
  font-size: 13px; color: rgba(255, 255, 255, .55); margin: 0 !important;
  font-variant-numeric: tabular-nums;
}
.hm-testi__arrow {
  display: none;                     /* revealed by .hm-testi--js */
  width: 44px; height: 44px; padding: 0; border-radius: 999px;
  align-items: center; justify-content: center;
  background: var(--sp-red); border: 0; color: #fff; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.hm-testi--js .hm-testi__arrow { display: inline-flex; }
.hm-testi__arrow--prev { background: transparent; border: 1px solid rgba(255, 255, 255, .4); }
.hm-testi__arrow--prev svg { transform: rotate(180deg); }
.hm-testi__arrow:hover { background: #fff; color: var(--sp-navy); border-color: #fff; }
.hm-testi__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hm-testi__slide, .hm-testi__dot { transition: none; }
}

@media (max-width: 1199px) {
  .hm-testi__stage { min-height: 190px; }
}

@media (max-width: 767px) {
  .hm-testi__stage { min-height: 280px; }
  .hm-testi__quote { font-size: 14.5px; line-height: 1.85; }
  .hm-testi__name { font-size: 19px; gap: 12px; flex-wrap: wrap; }
  .hm-testi__dash { width: 24px; }
  /* The counter goes so the dots and arrows fit one row without crowding. */
  .hm-testi__count { display: none; }
  .hm-testi__nav { gap: 8px; }
}

/* =============================================================================
 * Condition guides (/pots/) — the P1 handoff (design_handoff_pots)
 *
 * A long patient-education article with a sticky contents rail. The page serves a
 * waiting-room QR scan and an organic search for the condition at the same time, which
 * is why the rail exists: one visitor reads end to end, the other wants one answer.
 *
 * Written as a TEMPLATE, not as one page. Every rule below is on `.cg`, the class
 * conditionGuide() emits; a second condition needs an entry in CONDITION_PAGES and no
 * CSS at all.
 *
 * ONE LIST, THREE SHAPES. The rail, the tablet chip row and the mobile jump list are
 * the same seven anchors restyled, the way /contact-us/ and /about-us/ reorder one DOM
 * rather than shipping three. Three copies would be three chances for a label to drift
 * out of step with the heading it points at, and the rail IS the navigation here.
 *
 * DEVIATIONS from the handoff, each deliberate:
 *
 *   The hero is `.sp-hero`, the band six other pages share, not the handoff's
 *   left-aligned 54px one. Assertion 17 exists because a page that draws its own band
 *   moves the heading; only the h1's internal split and the fact row are new.
 *
 *   The muted line and the fine print are `--sp-muted` (.75), not the handoff's
 *   rgba(27,63,85,.55). That is the exact tint this site already raised to .75 for AA
 *   on 2026-08-17 — .55 measures about 3:1 on white. See "Known and accepted" in
 *   CLAUDE.md; the brand red is the decision that stands, this one is not.
 *
 *   Buttons are 999px pills. The site is mixed (8px on /about-us/, /scheduling/,
 *   /contact-us/; pills on the conditions page) and this page's inbound link is the
 *   conditions page, so it matches what the visitor just clicked.
 *
 * The rail's current-section mark is the page's only JavaScript. Everything here works
 * without it: `.is-current` is simply never added, and the anchors are anchors.
 * ========================================================================== */
.cg { background: #fff; }
.cg p { text-wrap: pretty; }
.cg h1, .cg h2, .cg h3 { text-wrap: balance; }

/* ---- hero: the h1 split, the byline slot, the fact row ---- */

/*
 * LEFT-ALIGNED, unlike the other six pages that share this band. The clinic asked for it
 * on the guides specifically, and it is the handoff's own drawing.
 *
 * What assertion 17 protects is the VERTICAL position of the heading — nothing in the
 * flow above the eyebrow, so the title lands in the same place as you move between
 * pages. That is untouched here: same band, same min-height, same padding, same source
 * order. Only the horizontal alignment differs, and it earns its keep on these pages —
 * they are long-form articles whose body copy is left-aligned to a 720px measure, and a
 * centred hero above a left-aligned article reads as two designs meeting.
 *
 * The fact row is flush to the bottom edge, the same treatment /about-us/ and
 * /our-clinic/ use for theirs.
 */
.cg .sp-hero {
  padding-bottom: 0;
  align-items: flex-start;
  text-align: left;
  position: relative;              /* the crumb trail is pinned against this */
}

/* The visible breadcrumb.
 *
 * PINNED, NOT IN THE FLOW — the same treatment .cr-langrow gets, and for the same
 * reason: assertion 17 holds the h1 in one place across the seven pages that share this
 * band, and a 20px row above the eyebrow moves it on nine of them. It sits in the 80px
 * of top padding the band already has, on the left, where the guide's own copy starts.
 *
 * `nowrap` + ellipsis is load-bearing. An absolutely positioned row that wraps grows
 * DOWNWARD into the eyebrow, and the longest leaf on the site ("Coronary artery
 * disease") is within a few pixels of the mobile content width. Truncating the leaf —
 * the page the reader is already on — is the right thing to lose. */
.cg-crumbs {
  position: absolute; top: 32px; left: 56px; right: 56px;
  font-size: 12.5px; line-height: 1.2;
}
.cg-crumbs__nav {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* inline-block + a 24px line box, NOT padding: the row is `overflow: hidden` for the
   ellipsis, and padding would put the hit area outside the clip. This grows the link's
   own box to WCAG 2.5.8's 24px while the glyphs stay 12.5px. */
.cg-crumbs__link {
  display: inline-block; line-height: 24px;
  color: rgba(255, 255, 255, .82); text-decoration: none;
}
.cg-crumbs__link:hover, .cg-crumbs__link:focus-visible {
  color: #fff; text-decoration: underline;
}
.cg-crumbs__sep { color: rgba(255, 255, 255, .45); margin: 0 7px; }
.cg-crumbs__here { color: rgba(255, 255, 255, .55); }

/* The band's top padding is 80 / 56 / 40, and the eyebrow sits exactly that far down —
   measured, not read off the file. So the crumb's own 24px box has to be pinned tighter
   as the padding shrinks, or it lands ON the eyebrow: at 390px the first version of this
   overlapped it by 16px.
   THESE MUST STAY BELOW THE BASE RULE. Written above it they were dead — same
   specificity, earlier in the file, so `top: 32px` won at every width and the media
   queries looked correct while doing nothing. That is the exact failure this file
   already records for the tablet footer. */
@media (max-width: 1024px) {
  .cg-crumbs { top: 18px; left: 40px; right: 40px; }   /* eyebrow at 56px */
}
@media (max-width: 767px) {
  .cg-crumbs { top: 6px; left: 20px; right: 20px; font-size: 11px; }   /* eyebrow at 40px */
}
/* The heading and the byline get a measure; the fact row still spans the full band. At
   60px an unconstrained h1 runs the width of a 1440px viewport and the eye loses the
   line start. */
.cg .sp-hero__title { max-width: 20ch; }

/* The h1 is two lines at EVERY width: the plain-language name, then the clinical one.
   Both stay inside the <h1> — visually two lines, semantically one heading.

   This was an inline string that split below 768px, which is what the POTS handoff
   draws. It does not survive the other four: their subtitles are different words, not a
   re-layout ("Heart failure" gains "When the heart isn't keeping up with the body's
   demands", which is nowhere in the desktop heading). Drawing that only on mobile makes
   it hidden text at every other width, and hidden text in an h1 is the least defensible
   place for it. So both lines always show, and all five guides read alike. */
.cg-h1__main { display: block; }
.cg-h1__sub {
  display: block; margin-top: 12px;
  font-size: 24px; line-height: 1.35; color: rgba(255, 255, 255, .82);
}

/* Sits under the h1, above the fact row. Deliberately quiet — it is provenance, not
   copy — but present, because an author and a review date are among the strongest
   trust signals a health page carries. */
.sp p.cg-byline {
  font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .6);
  max-width: 720px; margin-top: 4px;
}

.cg-facts {
  width: 100%; margin-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: grid; grid-template-columns: repeat(3, 1fr);
  text-align: left;
}
.cg-fact { padding: 24px 28px 28px; }
.cg-fact:first-child { padding-left: 0; }
.cg-fact + .cg-fact { border-left: 1px solid rgba(255, 255, 255, .16); }
.cg-fact__label {
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.cg-fact__value {
  font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .85);
  margin-top: 6px !important;
}

/* ---- body: rail + article ---- */

/* Starts at the section padding, NOT centred. The rail's left edge has to land on the
   hero's left edge: once the band went left-aligned, a centred body put the h1 at 56px
   and the contents rail at 128px, and two left edges 72px apart on the same page read as
   two designs meeting. The 720px article measure is the handoff's and is the point of the
   whole layout — roughly 75 characters, which is where long-form health copy stops being
   readable, so the surplus goes to the right margin rather than into the line length. */
.cg-body {
  padding: 56px;
  display: grid; grid-template-columns: 250px minmax(0, 720px);
  justify-content: start; gap: 56px; align-items: start;
}

.cg-toc {
  position: sticky; top: 24px; align-self: start;
  display: flex; flex-direction: column; gap: 14px;
}
.cg-toc__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sp-red);
}
.cg-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cg-toc__list li { margin: 0; }
/* 12 + 12 + a ~20px line box = 44px, which is the minimum this rail has to clear: it is
   the main navigation on a 1,400-word page and it is made of text. */
.cg-toc__link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--sp-border);
  font-size: 14px; line-height: 1.4; color: var(--sp-body); text-decoration: none;
  transition: color .15s ease;
}
.cg-toc__link:hover { color: var(--sp-navy); }
.cg-toc__link.is-current { color: var(--sp-red); }
.cg-toc__arrow { display: none; }              /* mobile jump list only */

/* The rail's own call to action. Below 1200px the rail has no column to sit in, and the
   last section takes over as a cream card instead — so this hides rather than being
   duplicated. */
.cg-railcard {
  margin-top: 12px; background: var(--sp-cream); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
/* A card label, not a section heading. Making it an h2 or h3 would put an eighth
   heading in an outline that the rail, the jump list and the search snippet all read. */
.cg-railcard__title {
  font-family: "Marcellus", Georgia, serif; font-size: 20px; line-height: 1.25;
  color: var(--sp-navy);
}
.cg-railcard__body { font-size: 13.5px; line-height: 1.7; color: var(--sp-body); }

.cg-article { display: flex; flex-direction: column; gap: 48px; }

.cg-sec {
  display: flex; flex-direction: column; gap: 18px;
  /* The site header is not sticky above 1024px, so this only has to clear the rail's
     own 24px inset. The mobile block below raises it for `.mhdr`. */
  scroll-margin-top: 24px;
}
.cg-sec + .cg-sec { padding-top: 40px; border-top: 1px solid var(--sp-border); }

.cg-h2 { font-size: 34px !important; line-height: 1.15; }
.cg-h3 { font-size: 22px !important; line-height: 1.25; }

/* The lead is the answer to the search query. One step up from body copy, and the only
   body text on the page at full navy rather than the 72% tint. */
.cg-lead { font-size: 17px; line-height: 1.85; color: var(--sp-navy); }
.cg-p { font-size: 15.5px; line-height: 1.85; color: var(--sp-body); }
.cg-muted { font-size: 14.5px; line-height: 1.7; color: var(--sp-muted); }
.cg-fine { margin-top: 6px !important; font-size: 14px; line-height: 1.7; color: var(--sp-muted); }

.cg-link {
  color: var(--sp-navy); text-decoration: underline;
  text-decoration-color: rgba(27, 63, 85, .35); text-underline-offset: 2px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.cg-link:hover { color: var(--sp-red); text-decoration-color: var(--sp-red); }

/* ---- dash rows: symptoms (cream) and "bring with you" (navy) ---- */
/* Real <ul>/<li>, not styled divs, so the list is machine-readable for a featured
   snippet. That is the whole reason the symptom list is a list. */
.cg-panel { background: var(--sp-cream); border-radius: 16px; padding: 30px 32px; }
.cg-dashes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px;
}
.cg-dash { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.cg-dash__mark { width: 18px; height: 2px; margin-top: 11px; background: var(--sp-red); }
.cg-dash__t { font-size: 14.5px; line-height: 1.75; color: var(--sp-body); text-wrap: pretty; }

.cg-navy {
  background: var(--sp-navy); border-radius: 16px; padding: 30px 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.cg-navy__eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
/* One column at three items or fewer, two above that — the handoff's rule, and the
   reason it is `:has()` rather than a fixed count: /aortic-stenosis/ brings three and
   the other four bring four, and a 2x2 with an orphan row reads worse than a list.
   The eyebrow is a sibling of the <ul>, not a grid item, so it spans the full width by
   construction; the handoff records that as a bug it had to fix in the prototype. */
.cg-dashes--navy { grid-template-columns: 1fr; gap: 16px; }
.cg-dashes--navy:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; column-gap: 32px; }
.cg-dashes--navy .cg-dash__t { color: rgba(255, 255, 255, .82); }

/* ---- trigger cards ---- */
.cg-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cg-card {
  margin: 0; border: 1px solid var(--sp-border); border-radius: 14px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 7px;
}
.cg-card__title { font-size: 19px !important; line-height: 1.25; }
.cg-card__body { font-size: 13.5px; line-height: 1.7; color: var(--sp-body); }

/* ---- numbered and labelled blocks ---- */
/*
 * One shape, two elements. `numbered` is an <ol> because the order is the content —
 * diagnosis happens in a sequence; `labelled` is a <ul> because it is not — heart
 * failure's seven treatment measures run in parallel. The drawn "01" is decoration and
 * carries aria-hidden, so the count is not read out twice.
 *
 * The number sits on the h3's baseline and the prose runs full width beneath both.
 * Explicit grid placement rather than a wrapper div, so a labelled item is the same
 * markup with one child missing.
 */
.cg-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.cg-item {
  margin: 0;
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 14px; row-gap: 12px; align-items: baseline;
}
/* A fixed width, not `font-variant-numeric: tabular-nums` — Marcellus is a display
   serif and carries no `tnum` feature, so the request is silently ignored and the
   numerals stay proportional. Measured in the browser: "01" sets 19.8px and "04" sets
   24.8px, which walked the h3s across 5px of jitter. 1.4em clears the widest. */
.cg-item__n {
  grid-column: 1; grid-row: 1;
  font-family: "Marcellus", Georgia, serif; font-size: 18px; color: var(--sp-red);
  width: 1.4em;
}
.cg-item__title { grid-column: 2; font-size: 22px !important; line-height: 1.25; }
/* A labelled item has no number, so its title starts in column 1 and the rule that
   indents a numbered title must not reach it. */
.cg-items:not(.cg-items--numbered) .cg-item__title { grid-column: 1 / -1; font-size: 21px !important; }
.cg-item > .cg-p, .cg-item > .cg-pull, .cg-item > .cg-cards { grid-column: 1 / -1; }
.cg-item > .cg-p { font-size: 15px; }
.cg-item + .cg-item { padding-top: 20px; border-top: 1px solid var(--sp-hair); }

/* A clarifying note pulled out of the paragraph it qualifies, or standing alone as the
   one sentence in a section that must not be skimmed past. */
.cg-pull {
  padding-left: 18px; border-left: 2px solid var(--sp-red);
  font-size: 14.5px; line-height: 1.75; color: var(--sp-navy);
}

/* ---- the referral call to action ---- */
.cg-acts { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
/* Astra styles bare `button` with padding: 15px 30px and inputs by attribute, so every
   dimension here is set explicitly rather than inherited — see CLAUDE.md. 15px x 1.3
   plus 30px of padding plus the border is ~51px, above the 49px the handoff asks for. */
.cg-btn {
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 15px; line-height: 1.3;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red);
  padding: 15px 28px; border-radius: 999px; text-decoration: none; text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cg-btn:hover, .cg-btn:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.cg-btn--ghost { background: transparent; border-color: rgba(27, 63, 85, .25); color: var(--sp-navy); }
.cg-btn--ghost:hover, .cg-btn--ghost:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.cg-btn--full { width: 100%; font-size: 14.5px; padding: 14px; }

/* ---- the closing referral card ---- */
/*
 * A `.cg-sec` like every other section — its own anchor, its own row in the rail, its
 * own h2 — drawn as a cream card at EVERY width. The first build gave it the card only
 * below 1200px and kept "Getting a referral" as the heading; the four-page handoff draws
 * the card on desktop too and titles it with the instruction. That is the better shape
 * for the reason it is checked: one string at every width, so nothing is hidden at any
 * of them, and the rail label ("Getting a referral") is free to say what the section IS
 * while the heading says what to DO.
 */
.cg-sec--cta {
  background: var(--sp-cream); border-radius: 18px; padding: 34px 36px;
  border-top: 0; gap: 14px;
}
.cg-sec + .cg-sec--cta { padding-top: 34px; }
.cg-cta__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sp-red);
}
.cg-h2--cta { font-size: 27px !important; line-height: 1.18; }

/* ---- related guides ---- */
/*
 * Sits AFTER the referral card on purpose. The page exists to produce a referral; a menu
 * of other conditions placed above that competes with it. Where the copy already names a
 * condition the link is inline in the sentence instead, which is worth more — this block
 * only carries the pairs the prose never happens to mention.
 */
.cg-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--sp-border); }
.cg-related__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sp-red); margin-bottom: 14px !important;
}
.cg-related__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cg-related__list li { margin: 0; }
/* 13 + 13 + a ~19px line box = 45px, the same chip the tablet rail uses. */
.cg-related__link {
  display: inline-block; padding: 13px 18px;
  border: 1px solid rgba(27, 63, 85, .20); border-radius: 999px;
  font-size: 13.5px; line-height: 1.4; color: var(--sp-body); text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.cg-related__link:hover, .cg-related__link:focus-visible { color: var(--sp-red); border-color: var(--sp-red); }

/* Smooth anchor scrolling, dropped for anyone who has asked for less motion. Scoped by
   :has() because scroll-behavior only does anything on the scrolling element. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.cg) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-toc__link, .cg-btn, .cg-link { transition: none; }
}

/* =============== tablet — 768 to 1199 =============== */
/*
 * The rail cannot hold a column at this width, so the contents become a wrapping row of
 * outline chips under the urgent strip, and the rail's card is replaced by the last
 * section taking the cream-card treatment.
 */
@media (max-width: 1199px) {
  .cg .sp-hero__title { font-size: 42px !important; }
  .cg-byline { font-size: 13.5px; }
  .cg-fact { padding: 20px; }
  .cg-fact__value { font-size: 14.5px; }

  .cg-body { padding: 40px; grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .cg-toc { position: static; gap: 12px; }
  .cg-toc__list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  /* 13 + 13 + a ~19px line box = 45px. The chip shape is what makes that height read as
     deliberate rather than as a loose row of links. */
  .cg-toc__link {
    justify-content: flex-start;
    padding: 13px 18px; border: 1px solid rgba(27, 63, 85, .20); border-radius: 999px;
    font-size: 13.5px;
  }
  .cg-toc__link.is-current { border-color: var(--sp-red); }
  .cg-railcard { display: none; }

  .cg-article { gap: 40px; }
  .cg-sec + .cg-sec { padding-top: 36px; }
  .cg-h2 { font-size: 30px !important; }
  .cg-lead { font-size: 16.5px; }
  .cg-p, .cg-item > .cg-p { font-size: 15px; }
  .cg-dash__mark { width: 16px; margin-top: 11px; }
  .cg-dash__t { font-size: 14px; }
  .cg-item__title { font-size: 21px !important; }
  .cg-items:not(.cg-items--numbered) .cg-item__title { font-size: 20px !important; }
  .cg-h1__sub { font-size: 20px; margin-top: 10px; }
  .cg-h2--cta { font-size: 27px !important; }

  .cg-sec--cta { border-radius: 18px; padding: 30px 32px; }
}

/* =============== mobile — under 768 =============== */
@media (max-width: 767px) {
  .cg .sp-hero__title { font-size: 32px !important; }
  .cg-byline { font-size: 12.5px; }

  /* 2x2: the two wait times side by side, Patients across the bottom. Same treatment as
     the fact rows on Home, About and Our Clinic. */
  .cg-facts { grid-template-columns: 1fr 1fr; }
  .cg-fact { padding: 18px 16px 20px; }
  .cg-fact:first-child, .cg-fact:nth-child(3) { padding-left: 0; }
  .cg-fact:nth-child(3) {
    grid-column: 1 / -1; border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .cg-fact__label { font-size: 9.5px; }
  .cg-fact__value { font-size: 14px; }

  .cg-body { padding: 28px 20px; gap: 24px; }

  /* Back to rows, with a red arrow on the right: at this width the chips wrapped to
     four lines and stopped reading as a list of sections. */
  .cg-toc__list { flex-direction: column; gap: 0; }
  .cg-toc__link {
    justify-content: space-between;
    padding: 13px 0; border: 0; border-top: 1px solid var(--sp-border); border-radius: 0;
    font-size: 14px;
  }
  .cg-toc__arrow { display: inline; color: var(--sp-red); flex: none; }

  /* Clears the sticky `.mhdr` bar (44px button + 20px padding) plus a little air, so an
     anchored heading is not hidden under it. */
  .cg-sec { scroll-margin-top: 76px; }

  .cg-article { gap: 32px; }
  .cg-sec + .cg-sec { padding-top: 28px; }
  .cg-h2 { font-size: 26px !important; }
  .cg-lead { font-size: 15.5px; }
  .cg-p, .cg-item > .cg-p { font-size: 14.5px; }

  .cg-panel { border-radius: 14px; padding: 22px; }
  .cg-dashes, .cg-dashes--navy, .cg-dashes--navy:has(> :nth-child(4)), .cg-cards {
    grid-template-columns: 1fr;
  }
  .cg-dashes { gap: 14px; }
  .cg-navy { border-radius: 14px; padding: 24px 22px; }
  .cg-card { border-radius: 12px; padding: 18px 20px; }
  .cg-card__title { font-size: 18px !important; }

  .cg-item__title { font-size: 20px !important; }
  .cg-items:not(.cg-items--numbered) .cg-item__title { font-size: 19px !important; }
  .cg-pull { padding-left: 14px; font-size: 13.5px; }

  .cg-h1__sub { font-size: 18px; margin-top: 8px; }
  .cg-sec--cta { border-radius: 16px; padding: 24px; }
  .cg-h2--cta { font-size: 23px !important; }
  .cg-related { margin-top: 32px; padding-top: 24px; }
  .cg-related__list { flex-direction: column; align-items: stretch; }
  .cg-related__link { text-align: center; }
  .cg-acts { flex-direction: column; align-items: stretch; gap: 10px; }
  .cg-acts .cg-btn { width: 100%; }
  .cg-fine { font-size: 13px; }
}

/* The row's two exits. The handout is a PDF to take home; the guide is the page to read
   now, and three of the five conditions have one. Wraps rather than shrinking, because
   at 513px the two together are wider than the text cell. */
.cd-row__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cd-row__guide {
  font-size: 13.5px; font-weight: 500; line-height: 1;
  color: var(--sp-navy); text-decoration: none;
  padding: 13px 20px; border: 1px solid rgba(27, 63, 85, .25); border-radius: 999px;
  transition: color .15s ease, border-color .15s ease;
}
.cd-row__guide:hover, .cd-row__guide:focus-visible { color: var(--sp-red); border-color: var(--sp-red); }

/* ---- the "in depth" block on the conditions page, which links these guides ---- */
/*
 * /pots/ is one click from the page a patient without a referral actually lands on, and
 * two from every page through the footer's Heart Conditions link. Assertion 32 fails the
 * build if nothing links it at all — the same orphaning that assertion 19 exists for.
 */
.cd-guides { display: flex; flex-direction: column; gap: 24px; }
.cd-guides__head { max-width: 720px; }
/* The section is WHITE and the cards are cream, not the other way round. An 11px red
   eyebrow measures 4.15:1 on cream and 4.50:1 on white — the exact margin CLAUDE.md
   records as raised with the client and left as drawn. Seven labels already sit on the
   failing side of it; there is no reason for an eighth when the fix is which surface
   the block sits on. */
.cd-guides__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sp-red);
}
.cd-guides__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cd-guides__list li { margin: 0; }
.cd-guide {
  height: 100%; display: flex; flex-direction: column; gap: 6px;
  background: var(--sp-cream); border: 1px solid transparent; border-radius: 14px;
  padding: 22px 24px; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.cd-guide:hover { border-color: var(--sp-red); }
.cd-guide__name { font-family: "Marcellus", Georgia, serif; font-size: 22px; line-height: 1.2; color: var(--sp-navy); }
.cd-guide__full { font-size: 13.5px; line-height: 1.6; color: var(--sp-body); }

@media (max-width: 1199px) {
  .cd-guides__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .cd-guides { gap: 18px; }
  .cd-guides__list { grid-template-columns: 1fr; }
  .cd-guide { padding: 18px 20px; }
  .cd-guide__name { font-size: 20px; }
}

/* ================================================================= feedback form
 *
 * /feedback/ and /feedback/sent/. Reached by a QR code in the waiting room.
 *
 * The stars are the part worth reading before changing anything. Each is a fixed BOX
 * (48px overall, 44px sub-ratings, never below 44 at any width) with the glyph sized
 * separately inside it. A star sized by its own glyph gives a 22px target, which fails
 * WCAG 2.5.8 and is genuinely hard to hit on a phone held one-handed — the handoff
 * records it as a real defect in an earlier revision. If you restyle these, keep the box
 * and the mark independent.
 *
 * The fill is pure CSS over real radios: the row is `row-reverse` and the inputs are
 * emitted 5 down to 1, so `input:checked ~ label` paints the checked star and every star
 * visually to its left. No JavaScript is involved in rating.
 */
.fb-hero { padding-bottom: 56px; }

.fb-form { display: block; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The overall rating sits in its own cream band directly under the hero, so the single
   most useful answer is given before any scrolling on a phone. */
.fb-band { background: var(--sp-cream); padding: 40px 56px; }
.fb-overall { border: 0; padding: 0; margin: 0; min-width: 0; text-align: center; }
.fb-overall__q {
  font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 26px;
  line-height: 1.25; color: var(--sp-navy); padding: 0; margin: 0 auto 18px; max-width: 22ch;
}

.fb-body { padding: 48px 56px 64px; max-width: 660px; margin: 0 auto; }
.fb-sec { padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--sp-border); }
.fb-sec:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.fb-sec__h {
  font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 24px !important;
  line-height: 1.25; color: var(--sp-navy); margin: 0 0 18px !important;
}

/* ---- stars ---- */
.fb-stars { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fb-stars__row { display: flex; flex-direction: row-reverse; justify-content: center; }
.fb-star__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-star {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; cursor: pointer; color: var(--sp-dash);
  transition: color 150ms ease;
}
.fb-star__mark { width: 34px; height: 34px; fill: currentColor; }
.fb-stars--sm .fb-star { width: 44px; height: 44px; }
.fb-stars--sm .fb-star__mark { width: 22px; height: 22px; }
/* The checked star and every star below it. `~` reaches later siblings, and later in the
   DOM is further LEFT here because the row is reversed. */
.fb-star__in:checked ~ .fb-star { color: var(--sp-red); }
.fb-stars__row:hover .fb-star:hover,
.fb-stars__row:hover .fb-star:hover ~ .fb-star { color: var(--sp-red); }
.fb-star__in:focus-visible + .fb-star { outline: 2px solid var(--sp-red); outline-offset: 2px; }

/* The word for the current value. One span per value, all hidden until its radio is on. */
.fb-word { min-height: 20px; margin: 0 !important; font-size: 13.5px; color: var(--sp-muted); }
.fb-word__v { display: none; }
/* `:has()`, not `~`: the radios live inside .fb-stars__row and .fb-word is a sibling of
   that row, not of the inputs, so a general-sibling selector never matched and the word
   rendered empty. Matching on [value] rather than an id keeps this five rules for all
   four rating groups instead of twenty. */
.fb-stars:has(.fb-star__in[value="1"]:checked) .fb-word__v[data-v="1"],
.fb-stars:has(.fb-star__in[value="2"]:checked) .fb-word__v[data-v="2"],
.fb-stars:has(.fb-star__in[value="3"]:checked) .fb-word__v[data-v="3"],
.fb-stars:has(.fb-star__in[value="4"]:checked) .fb-word__v[data-v="4"],
.fb-stars:has(.fb-star__in[value="5"]:checked) .fb-word__v[data-v="5"] { display: inline; }
/* The sub-ratings show stars only, as drawn. Each star still carries its own
   "3 out of 5 stars, Good" label, so nothing is lost to a screen reader. */
.fb-stars--sm .fb-word { display: none; }
/* Clear is only offered once there is something to clear. */
.fb-clear {
  display: none; font-size: 13px; color: var(--sp-navy); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; min-height: 24px;
  align-items: center; padding: 0 8px;
}
.fb-stars:has(.fb-star__in:not(.fb-star__in--none):checked) .fb-clear { display: inline-flex; }

/* ---- sub-ratings panel ---- */
.fb-panel { background: var(--sp-cream); border-radius: 14px; padding: 8px 28px; }
.fb-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--sp-hair);
}
.fb-sub:last-child { border-bottom: 0; }
.fb-sub__head { display: flex; flex-direction: column; gap: 2px; }
.sp p.fb-sub__label { font-size: 15px; color: var(--sp-navy); margin: 0; }
.sp p.fb-sub__hint { font-size: 13.5px; color: var(--sp-muted); margin: 0; }
.fb-sub .fb-stars { align-items: flex-end; }

/* ---- fields ---- */
.fb-field { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fb-label { font-size: 13.5px; color: var(--sp-navy); }
.fb-opt { color: var(--sp-muted); }
/* Astra styles inputs by attribute at (0,1,1), so the page scope is what wins here.
   Without it these render at Astra's height and fall under the 44px minimum. */
.fb .fb-in {
  font-family: "Sora", sans-serif; font-size: 14.5px; color: var(--sp-navy);
  background: #fff; border: 1px solid var(--sp-dash); border-radius: 8px;
  padding: 15px 16px; width: 100%; min-height: 50px; box-shadow: none;
}
/* Placeholders stay at .45 deliberately. Raised to the muted token they read as
   a value that has already been typed, which is a worse failure than low contrast on
   text the field label already states. */
.fb .fb-in::placeholder { color: rgba(27, 63, 85, .45); }
.fb .fb-in:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; border-color: var(--sp-muted); }
.fb .fb-ta { min-height: 110px; resize: vertical; line-height: 1.7; }
.fb .fb-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e22e2d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
  padding-right: 40px;
}

.sp p.fb-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 26px 0 0;
  font-size: 13.5px; line-height: 1.7; color: var(--sp-muted);
}
.fb-note__i {
  flex: none; width: 18px; height: 18px; border-radius: 999px; background: var(--sp-navy);
  color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-top: 2px;
}

/* ---- checkboxes. The whole row is the target, not the 22px box. ---- */
.fb-check {
  display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  margin-top: 18px; padding: 4px 0; min-height: 24px;
}
.fb-check__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-check__box {
  flex: none; width: 22px; height: 22px; border-radius: 5px; margin-top: 1px;
  border: 1px solid var(--sp-dash); background: #fff;
  background-repeat: no-repeat; background-position: center; background-size: 13px 10px;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.fb-check__in:checked + .fb-check__box {
  background-color: var(--sp-red); border-color: var(--sp-red);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M15 1L5.5 10.5 1 6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fb-check__in:focus-visible + .fb-check__box { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.fb-check__t { font-size: 14px; line-height: 1.65; color: var(--sp-body); }

/* ---- the mobile disclosure. Open and inert above 768. ---- */
.fb-more__cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-more__row { display: none; }
.fb-sec__h--more { display: block; }

/* ---- submit ---- */
.fb-submit { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.fb-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: "Sora", sans-serif; font-size: 15.5px; font-weight: 500;
  background: var(--sp-red); color: #fff; border: 1px solid var(--sp-red);
  border-radius: 999px; padding: 17px 30px; width: 100%; min-height: 54px; cursor: pointer;
  transition: background 150ms ease;
}
/* Red hovers to navy here, as .pi-btn, .pi-cond__btn and .sp-ref__btn all do. */
.fb-btn:hover, .fb-btn:focus-visible { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.fb-btn[disabled] { opacity: .6; cursor: default; }
.sp p.fb-submit__note { font-size: 13px; line-height: 1.7; color: var(--sp-muted); text-align: center; margin: 0; }
/* The send-failure message. Hidden until :target (a plain POST that failed and was
   redirected back to /feedback/#fb-error) or .is-on (the fetch path). Two mechanisms
   because neither should depend on the other: without scripting the form still posts,
   and a patient whose feedback did not send must be told either way. */
.sp p.fb-err {
  display: none; font-size: 14.5px; line-height: 1.6; color: var(--sp-red);
  text-align: center; margin: 0 0 4px; max-width: 460px;
}
.sp p.fb-err:target, .sp p.fb-err.is-on { display: block; }
.sp p.fb-empty {
  font-size: 14.5px; line-height: 1.6; color: var(--sp-red); text-align: center; margin: 0 0 4px;
}

/* ================================ the confirmation ================================ */
.fb-body--sent { text-align: center; display: flex; flex-direction: column; align-items: center; }
.fb-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 999px; background: var(--sp-navy); color: #fff;
}
.fb-sent__h {
  font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 38px !important;
  line-height: 1.2; color: var(--sp-navy); margin: 22px 0 14px !important;
}
/* No ring. Focus moves here on arrival so a screen reader announces the outcome, but the
   heading is tabindex="-1" and not keyboard reachable, so a red box around it is not a
   focus indicator anyone needs — it just reads as an error state on a success page. */
.fb-sent__h:focus, .fb-sent__h:focus-visible { outline: none; }
.sp p.fb-sent__body { font-size: 16px; line-height: 1.8; color: var(--sp-body); max-width: 560px; margin: 0; }

.fb-summary {
  width: 100%; background: var(--sp-cream); border-radius: 16px; padding: 26px 30px;
  margin-top: 32px; text-align: left;
}
.sp p.fb-summary__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sp-red); margin: 0 0 6px;
}
.fb-summary__list { list-style: none; margin: 0; padding: 0; }
.fb-summary__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid rgba(226, 46, 45, .18); margin: 0;
}
.fb-summary__row:last-child { border-bottom: 0; }
.fb-summary__t {
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted);
}
.fb-summary__v { font-size: 15px; color: var(--sp-navy); text-align: right; }
.sp p.fb-summary__note { font-size: 13px; line-height: 1.7; color: var(--sp-muted); margin: 14px 0 0; }

.fb-callback {
  width: 100%; background: var(--sp-navy); border-radius: 16px; padding: 28px 30px;
  margin-top: 28px; text-align: left;
}
/* `.sp h2` — the page-scope heading rule — is (0,1,1) and beat the bare class, so this
   rendered NAVY ON NAVY and was invisible. Exactly the trap `.sp p { margin: 0 }` set for
   .pi-more. On a coloured panel the failure is total rather than subtle: check the
   COMPUTED colour on anything sitting on navy or cream, not the rule you wrote. */
.sp .fb-callback__h {
  font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 24px !important;
  color: #fff !important; margin: 0 0 10px !important;
}
.sp p.fb-callback__body { font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .82); margin: 0; }

.fb-actions { display: flex; gap: 16px; width: 100%; margin-top: 24px; }
.fb-btn--call, .fb-btn--ghost { flex: 1; }
.fb-btn--ghost { background: #fff; color: var(--sp-navy); border-color: var(--sp-dash); }
.fb-btn--ghost:hover, .fb-btn--ghost:focus-visible { background: var(--sp-cream); color: var(--sp-navy); border-color: var(--sp-muted); }
.sp p.fb-sent__foot { font-size: 13.5px; line-height: 1.7; color: var(--sp-muted); margin: 24px 0 0; max-width: 620px; }

/* ---------------------------------------------------------------- tablet ---- */
@media (max-width: 1199px) {
  .fb-band { padding: 34px 40px; }
  .fb-body { padding: 44px 40px 48px; max-width: 620px; }
  .fb-sec__h { font-size: 22px !important; }
  .fb-overall__q { font-size: 24px; }
  .fb-sent__h { font-size: 32px !important; }
}

/* ---------------------------------------------------------------- mobile ----
   Rating first: the hero is left-aligned, the overall rating keeps its cream band
   directly beneath it, and everything optional collapses behind one row. */
@media (max-width: 767px) {
  .fb-band { padding: 26px 20px; }
  .fb-body { padding: 32px 20px 44px; }
  .fb-sec { padding-top: 26px; margin-top: 26px; }
  .fb-sec__h { font-size: 21px !important; }
  .fb-overall__q { font-size: 22px; }
  .fb .fb-ta { min-height: 96px; }
  .fb-panel { padding: 4px 20px; }

  /* Label above stars: three columns of stars beside text does not fit 350px legibly. */
  .fb-sub { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fb-sub .fb-stars { align-items: flex-start; }
  .fb-stars__row { justify-content: flex-start; }
  .fb-stars--sm .fb-star { width: 44px; height: 44px; }
  .fb-overall .fb-star { width: 48px; height: 48px; }

  /* The disclosure. Closed, it is one row; open, the whole optional block. */
  .fb-more__row {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: 16px; cursor: pointer;
    border: 1px solid var(--sp-dash); border-radius: 12px; padding: 18px 20px;
  }
  .fb-more__t { font-size: 15.5px; color: var(--sp-navy); }
  .fb-more__sub { grid-column: 1; font-size: 13.5px; line-height: 1.6; color: var(--sp-muted); }
  .fb-more__ind {
    grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; position: relative;
  }
  .fb-more__ind::before, .fb-more__ind::after {
    content: ""; position: absolute; background: var(--sp-red); border-radius: 1px;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .fb-more__ind::before { width: 20px; height: 2px; }
  .fb-more__ind::after { width: 2px; height: 20px; }
  .fb-more__cb:checked ~ .fb-sec--more .fb-more__ind::after { display: none; }
  .fb-more__body { display: none; }
  .fb-more__cb:checked ~ .fb-sec--more .fb-more__body { display: block; }
  .fb-more__cb:focus-visible ~ .fb-sec--more .fb-more__row { outline: 2px solid var(--sp-red); outline-offset: 2px; }
  .fb-sec__h--more { display: none; }
  .fb-sec--more { padding-top: 26px; }

  .fb-grid { grid-template-columns: 1fr; gap: 0; }
  .fb-sent__h { font-size: 26px !important; }
  .fb-summary, .fb-callback { padding: 24px; }
  .fb-actions { flex-direction: column; }
}