/*
 * caah-hig-home.css — Apple-HIG-inspired presentation of the homepage.
 *
 * Scoped entirely under body.caah-hig-home, which only the preview template
 * (page-hig-home.php) carries. The live homepage renders front-page.php and never
 * loads this file.
 *
 * Palette, spacing grid, radii and type stack come from caah-hig-tokens.css, shared
 * with the landing-page design. This file holds only what the homepage needs on top
 * of that: the site chrome, and the sections front-page.php has that a landing page
 * does not.
 *
 * Appearance: every rule keys off html.dark-mode, and only off that class — the same
 * discipline as caah-lp-hig.css, for the same reason. The shared components this
 * page inherits (lead form, sticky bar, logo swap, global type colours) all key off
 * that class, so a `@media (prefers-color-scheme: dark)` block here would darken
 * this stylesheet's surfaces while they stayed light. On the main site the class
 * comes from the header's appearance toggle.
 *
 * Structure
 *   1. Page ground
 *   2. Toolbar, navigation, mobile menu
 *   3. Type
 *   4. Controls
 *   5. Hero and fact row
 *   6. Gallery
 *   7. Services
 *   8. Weekly-clinic feature
 *   9. Care path: grouped list and steps
 *  10. Reviews
 *  11. Contact
 *  12. Lead form, closing band, footer, sticky bar
 *  13. Motion, forced colors
 */

/* ------------------------------------------------------------- 1. page ground */

body.caah-hig-home {
  color-scheme: light;
  font-family: var(--hig-font);
  color: var(--hig-text);
  /* Subtle ambient warm lighting at the top of the canvas gives natural focus
     to the hero without loud decorative radial washes. */
  background-color: var(--hig-bg);
  background-image: radial-gradient(120% 50% at 50% 0%, rgba(240, 234, 214, 0.45) 0%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 640px;
  -webkit-font-smoothing: antialiased;
  padding-inline: 0;
  padding-top: 0;
}

html.dark-mode body.caah-hig-home {
  color-scheme: dark;
  background-color: var(--hig-bg);
  background-image: radial-gradient(120% 50% at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
}

/* padding-bottom is left to the theme: body.caah-has-actionbar sets it to clear the
   fixed mobile action bar, and overwriting it would put the footer under the bar. */
body.caah-hig-home .page {
  gap: 0;
  padding-top: 0;
  padding-inline: var(--hig-gutter);
}

body.caah-hig-home .site-main {
  gap: 0;
}

body.caah-hig-home .hig-home {
  max-width: var(--hig-measure);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--hig-s16);
  padding-block: var(--hig-s12) var(--hig-s16);
}

@media (min-width: 900px) {
  body.caah-hig-home .hig-home {
    gap: 112px;
    padding-block: 80px 112px;
  }
}

/*
 * The theme's scroll reveal starts every section at opacity 0 and waits for
 * JavaScript. An entrance animation that hides content until a script runs is the
 * opposite of content-first, so on this page sections are simply present.
 */
body.caah-hig-home .reveal {
  opacity: 1 !important;
  transform: none !important;
}

body.caah-hig-home .hig-section {
  display: block;
}

body.caah-hig-home .hig-section-head {
  max-width: 44rem;
  margin-bottom: var(--hig-s8);
}

/* --------------------------------------------- 2. toolbar, nav, mobile menu */

/*
 * The floating rounded-pill header becomes a toolbar: flush to the top of the
 * window, hairline separated, translucent. It breaks out of the page gutter to span
 * the window, then re-centres its own contents on the content measure.
 * navigation.js still slides it away on scroll-down, which this design wants.
 */
body.caah-hig-home .site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  max-width: none;
  width: auto;
  margin: 0 calc(-1 * var(--hig-gutter));
  padding: 8px max(var(--hig-gutter), calc(50% - (var(--hig-measure) / 2)));
  border-radius: 0;
  border-bottom: 1px solid var(--hig-separator);
  background: var(--hig-material-opaque);
  box-shadow: 0 1px 0 var(--hig-separator), 0 4px 16px rgba(28, 26, 25, 0.02);
  gap: var(--hig-s4);
}

html.dark-mode body.caah-hig-home .site-header {
  box-shadow: 0 1px 0 var(--hig-separator), 0 6px 20px rgba(0, 0, 0, 0.35);
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  body.caah-hig-home .site-header {
    background: var(--hig-material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

/* Brand-mark sizing lives in caah-hig-base.css so every template agrees on it. */

body.caah-hig-home .header-desktop-wrapper {
  gap: var(--hig-s4);
}

/* Navigation is chrome. It recedes: no weight competition with the page title, no
   colour until it is hovered or is the current page. */
body.caah-hig-home .site-nav {
  gap: 2px;
}

body.caah-hig-home .site-nav > a,
body.caah-hig-home .nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--hig-r-control);
  background: transparent;
  color: var(--hig-text-secondary);
  font-family: var(--hig-font);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.caah-hig-home .site-nav > a:hover,
body.caah-hig-home .nav-dropdown-toggle:hover,
body.caah-hig-home .nav-dropdown-toggle[aria-expanded="true"] {
  background: var(--hig-fill);
  color: var(--hig-text);
}

/* A popover, not a dropdown panel: elevated surface, hairline, one radius. */
body.caah-hig-home .nav-dropdown-content {
  padding: 6px;
  border: 1px solid var(--hig-separator);
  border-radius: var(--hig-r-surface);
  background: var(--hig-bg-elevated);
  box-shadow: var(--hig-shadow-2);
}

body.caah-hig-home .nav-dropdown-content a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--hig-r-control);
  color: var(--hig-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

body.caah-hig-home .nav-dropdown-content a:hover {
  background: var(--hig-fill);
}

body.caah-hig-home .nav-promo-menu {
  margin: 4px 0;
  padding: 4px 0;
  border-top: 1px solid var(--hig-separator);
  border-bottom: 1px solid var(--hig-separator);
}

body.caah-hig-home .nav-promo-menu-title {
  color: var(--hig-accent-text);
  font-weight: 600;
}

/* Icon-only controls: 40px box, round, quiet until touched. Each already carries an
   aria-label and a title in header.php. */
body.caah-hig-home .header-actions .btn-icon {
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0 !important;
  border: 1px solid var(--hig-separator);
  border-radius: 999px !important;
  background: transparent;
  color: var(--hig-text-secondary);
  box-shadow: none;
}

body.caah-hig-home .header-actions .btn-icon:hover {
  background: var(--hig-fill);
  color: var(--hig-text);
  transform: none;
}

body.caah-hig-home .mobile-menu-toggle {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--hig-r-control);
  background: transparent;
  color: var(--hig-text);
}

/*
 * The closed off-canvas menu is a fixed element whose width is content-driven, so it
 * sets documentElement.scrollWidth and the page scrolls sideways at narrow widths.
 * That is pre-existing -- the live homepage measures 326px of scroll at a 320px
 * viewport -- but this design's larger controls widened the overlay's min-content to
 * 358px and made it worse. Capping it at the viewport removes the overflow on this
 * page for both.
 */
body.caah-hig-home .mobile-menu-overlay {
  background: var(--hig-bg);
  /*
   * 100vw, not 100%: a percentage max-width on a fixed element resolves against the
   * initial containing block, which Chrome grows to the scrollable overflow area --
   * so the cap moves with the overflow it is meant to prevent and never binds.
   */
  max-width: 100vw;
  box-sizing: border-box;
}

/*
 * And the cause, not just the symptom: flex items default to min-width:auto, so the
 * widest unbreakable label ("Call (973) 894-3410") set a floor the column could not
 * shrink below. Allowed to shrink, the menu fits any viewport.
 */
body.caah-hig-home .mobile-site-nav,
body.caah-hig-home .mobile-site-nav > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body.caah-hig-home .mobile-site-nav a {
  color: var(--hig-text);
}

/* -------------------------------------------------------------------- 3. type */

body.caah-hig-home h1,
body.caah-hig-home h2,
body.caah-hig-home h3,
body.caah-hig-home h4,
body.caah-hig-home .section-head h2 {
  font-family: var(--hig-font);
  color: var(--hig-text);
}

body.caah-hig-home .hig-eyebrow {
  margin: 0 0 var(--hig-s3);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hig-text-tertiary);
}

body.caah-hig-home .hig-display {
  margin: 0;
  font-size: 2.125rem;
  line-height: 1.1;
  font-weight: 700;
  text-wrap: balance;
}

body.caah-hig-home .hig-lead {
  margin: var(--hig-s5) 0 0;
  max-width: 34rem;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .hig-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}

body.caah-hig-home .hig-section-lead {
  margin: var(--hig-s4) 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--hig-text-secondary);
}

@media (min-width: 700px) {
  body.caah-hig-home .hig-display {
    font-size: 2.75rem;
  }

  body.caah-hig-home .hig-lead {
    font-size: 1.3125rem;
  }

  body.caah-hig-home .hig-title {
    font-size: 1.875rem;
  }

  body.caah-hig-home .hig-section-lead {
    font-size: 1.125rem;
  }
}

@media (min-width: 1100px) {
  body.caah-hig-home .hig-display {
    font-size: 3rem;
  }
}

/* ---------------------------------------------------------------- 4. controls */

body.caah-hig-home .btn {
  font-family: var(--hig-font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 13px 22px;
  min-height: 44px;
  border-radius: var(--hig-r-control);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s var(--hig-ease-apple),
              border-color 0.18s var(--hig-ease-apple),
              box-shadow 0.18s var(--hig-ease-apple),
              transform 0.12s var(--hig-ease-apple);
}

body.caah-hig-home .btn.primary,
body.caah-hig-home button.btn.primary {
  background-color: var(--hig-accent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 100%);
  color: var(--hig-on-accent);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--hig-shadow-accent);
}

body.caah-hig-home .btn.primary:hover,
body.caah-hig-home button.btn.primary:hover {
  background-color: var(--hig-accent-pressed);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 14px rgba(197, 32, 41, 0.32);
}

body.caah-hig-home .btn.primary:active,
body.caah-hig-home button.btn.primary:active {
  background-color: var(--hig-accent-pressed);
  transform: scale(0.982) translateY(0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(197, 32, 41, 0.2);
}

body.caah-hig-home .btn.ghost {
  background: var(--hig-bg-elevated);
  color: var(--hig-text);
  border-color: var(--hig-card-border);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-sm);
}

body.caah-hig-home .btn.ghost:hover {
  background: var(--hig-bg-elevated);
  border-color: var(--hig-card-border-hover);
  color: var(--hig-accent-text);
  transform: translateY(-1px);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
}

body.caah-hig-home .btn.ghost:active {
  background: var(--hig-fill-strong);
  transform: scale(0.982) translateY(0);
  box-shadow: var(--hig-shadow-sm);
}

/*
 * One focus treatment for the whole page, drawn with outline rather than a shadow:
 * several .btn rules in this file and in the theme declare box-shadow: none, and a
 * shadow-based ring loses that specificity fight. outline also follows border-radius
 * and cannot be cancelled by a shadow rule.
 */
body.caah-hig-home a:focus-visible,
body.caah-hig-home button:focus-visible,
body.caah-hig-home input:focus-visible,
body.caah-hig-home select:focus-visible,
body.caah-hig-home summary:focus-visible,
body.caah-hig-home [tabindex]:focus-visible {
  outline: 2px solid var(--hig-focus);
  outline-offset: 2px;
}

body.caah-hig-home .caah-skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--hig-accent);
  color: var(--hig-on-accent);
  border-radius: 0 0 var(--hig-r-control) 0;
}

body.caah-hig-home .hig-textlink,
body.caah-hig-home .caah-textlink {
  color: var(--hig-accent-text);
  font-weight: 600;
  text-decoration: none;
}

body.caah-hig-home .hig-textlink:hover,
body.caah-hig-home .caah-textlink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.caah-hig-home .hig-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hig-s3);
  margin-top: var(--hig-s6);
}

body.caah-hig-home .hig-symbol {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--hig-text-tertiary);
}

/* ------------------------------------------------------ 5. hero and fact row */

body.caah-hig-home .hig-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hig-s10);
  align-items: center;
}

@media (min-width: 1000px) {
  body.caah-hig-home .hig-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: var(--hig-s16);
  }
}

/*
 * The live availability line, replacing the hero card. It sits below the lead with
 * space around it rather than in a second panel, so the H1 keeps the view to itself.
 */
body.caah-hig-home .hig-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hig-s3);
  margin: var(--hig-s8) 0 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--hig-text-secondary);
}

/* Pill and status colours live in caah-hig-base.css, scoped to status contexts. */

body.caah-hig-home .caah-status-notice,
body.caah-hig-home .hig-fine-print {
  margin: var(--hig-s2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .hig-hero-figure {
  margin: 0;
  border-radius: var(--hig-r-large);
  overflow: hidden;
  background: var(--hig-fill);
  border: 1px solid var(--hig-card-border);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-lg);
  /* Reserved box, so the eager hero image cannot shift the page as it decodes.
     3:2 is the master's own ratio: the storefront sign and the whole team span its
     full width, so every tighter crop cuts one of them. */
  aspect-ratio: 3 / 2;
  position: relative;
  isolation: isolate;
}

/*
 * The two frames are stacked, not swapped in the DOM: the incoming photograph is
 * already loaded and decoded when it is revealed, so the transition never shows an
 * empty box. Only opacity and transform animate, which are the two properties the
 * compositor can handle without laying the page out again.
 */
body.caah-hig-home .hig-hero-frame {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 420ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 520ms cubic-bezier(0.32, 0.72, 0, 1);
}

body.caah-hig-home .hig-hero-frame.is-active {
  opacity: 1;
  transform: scale(1);
}

/*
 * Promoted on intent rather than for the life of the page. will-change is what
 * keeps the cross-fade off the main thread, and at the full-bleed size it is also
 * two compositor layers the width of the window, held from load to unload for a
 * transition most visitors never trigger. caah-hig.js adds `is-hot` when a pointer
 * arrives over the hero or the chip takes focus -- both far enough ahead of the
 * first click for the layer to exist before it is needed -- and takes it back a
 * beat after the transition ends.
 */
body.caah-hig-home .hig-hero-figure.is-hot .hig-hero-frame {
  will-change: opacity, transform;
}

body.caah-hig-home .hig-hero-figure picture,
body.caah-hig-home .hig-hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/*
 * The control covers the whole photograph, because the photograph is what people
 * will try to press. The chip inside it is the affordance: without a visible label
 * this would be an invisible interaction that only the curious ever find.
 */
body.caah-hig-home .hig-hero-swap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--hig-s4);
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

body.caah-hig-home .hig-hero-swap-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hig-s2);
  /* 11 + 11 + 18 clears the 44px target without the chip crowding the photograph. */
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--hig-separator);
  background: var(--hig-material-opaque);
  color: var(--hig-text);
  font-family: var(--hig-font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  box-shadow: var(--hig-shadow-md);
  transition: background-color 0.18s ease, transform 0.12s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Glass, and legibly so: this chip sits on a photograph, which is exactly the case
   HIG says to raise opacity for. Opaque fallback above. */
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  body.caah-hig-home .hig-hero-swap-chip {
    background: var(--hig-material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

body.caah-hig-home .hig-hero-swap-chip svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--hig-accent-text);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

body.caah-hig-home .hig-hero-swap:hover .hig-hero-swap-chip {
  background: var(--hig-bg-elevated);
}

body.caah-hig-home .hig-hero-swap:active .hig-hero-swap-chip {
  transform: scale(0.97);
}

/* The glyph turns over as the frames cross, so the control shows the same state
   change the photograph is showing. */
body.caah-hig-home .hig-hero-figure.is-swapped .hig-hero-swap-chip svg {
  transform: rotate(180deg);
}

body.caah-hig-home .hig-hero-swap:focus-visible {
  outline: 2px solid var(--hig-focus);
  outline-offset: -4px;
}

/*
 * The hero is a hit area for the chip -- see caah-hig.js, which listens on the
 * section rather than covering it with anything. These three rules are what stop
 * that from being an invisible interaction.
 *
 * The cursor changes over the PHOTOGRAPH and not over the words. Words have to
 * stay selectable, a phone number and a street address especially, and a pointer
 * cursor over a paragraph reads as a link that is going to navigate. So the
 * picture advertises the affordance and the copy column quietly honours it: the
 * discoverable surface is the one where discovering it costs nothing.
 */
body.caah-hig-home .hig-hero.is-swap-surface .hig-hero-figure {
  cursor: pointer;
}

/*
 * And hovering anywhere over the hero lifts the chip, which is the part that makes
 * the hit area legible before it is used: the thing that reacts is the thing that
 * names what will happen, so the answer to "what does clicking here do" is already
 * on screen. Fine pointers only -- on a touchscreen :hover sticks after a tap and
 * would leave the chip lit for good.
 */
@media (hover: hover) and (pointer: fine) {
  body.caah-hig-home .hig-hero.is-swap-surface:hover .hig-hero-swap-chip {
    background: var(--hig-bg-elevated);
  }
}

/*
 * The chip catching the eye of someone who has just swapped the picture by pressing
 * the picture. They found a control they were not looking for, and the only way back
 * is a chip in the corner they have not read yet -- so it moves once, and its label
 * already says "Back to the clinic". caah-hig.js stops doing this after the second
 * time, because past that it is a tic rather than an explanation.
 */
@keyframes caah-hig-chip-nudge {
  0%, 100% { transform: none; }
  30% { transform: translateY(-4px); }
  62% { transform: translateY(-1px); }
}

body.caah-hig-home .hig-hero-swap.is-nudged .hig-hero-swap-chip {
  animation: caah-hig-chip-nudge 620ms cubic-bezier(0.32, 0.72, 0, 1);
  background: var(--hig-bg-elevated);
}

/*
 * Reduced motion: the frames still swap, they just stop moving to do it. The base
 * stylesheet already collapses transition duration site-wide; the transform is
 * neutralised here so the incoming frame does not start scaled and stay there.
 */
@media (prefers-reduced-motion: reduce) {
  body.caah-hig-home .hig-hero-frame,
  body.caah-hig-home .hig-hero-frame.is-active {
    transform: none;
  }

  body.caah-hig-home .hig-hero-figure.is-swapped .hig-hero-swap-chip svg {
    transform: none;
  }

  /* The chip still answers for the swap someone made by pressing the photograph;
     it just holds still to do it. A ring for the same moment the hop would have
     lasted, which is the one signal a nudge carries that the label does not: that
     THIS is the thing that changed the picture and the thing that will change it
     back. */
  body.caah-hig-home .hig-hero-swap.is-nudged .hig-hero-swap-chip {
    animation: none;
    box-shadow: var(--hig-shadow-md), 0 0 0 2px var(--hig-focus);
  }
}

/* --------------------------------------- 5b. the wide-screen full-bleed hero */
/*
 * Above 1440px the storefront photograph stops being a card beside the copy and
 * becomes the hero itself, edge to edge, with the words set into the empty left
 * side of the frame.
 *
 * The photograph decides every number here. Measured off the master:
 *
 *   - the sign's letters run from 11% to 26% of the frame's height and the paw
 *     roundel ends at 31%;
 *   - the team stands from 37% of the width rightward in the first frame and from
 *     33% in the second (the raised hand); shoes end at 97% of the height.
 *
 * Two consequences, and they are the whole design:
 *
 *   1. The box is anchored to the bottom of the frame and cut at 2.2:1, which
 *      starts the picture at 32% of its height -- just under the paw roundel. The
 *      alternative, keeping the sign, forces a box 1.72:1 or taller: 880px at a
 *      1512px viewport, which pushes the second call to action past the fold and
 *      under the concierge launcher on every 13"-15" laptop. The sign is already
 *      the first thing in the header, three inches above; the team is not
 *      anywhere else on this screen. So the crop keeps the team.
 *   2. The copy column stops short of 31vw, clear of the leftmost person in
 *      either frame. Nothing is ever set over a face.
 */
@media (min-width: 1280px) {
  /* The hero is wider than the 1160px measure it sits in. `clip`, not `hidden`:
     `hidden` would turn the body into a scroll container and strand the sticky
     header at the top of the document. */
  body.caah-hig-home {
    /*
     * The one inset the whole surface is measured from: the hero's copy column and
     * the header's wordmark both start here, so the masthead sits directly above
     * the headline rather than indented from it on the 1160px measure the rest of
     * the page uses.
     */
    --caah-hero-inset: clamp(30px, 2.6vw, 60px);

    overflow-x: clip;

    /*
     * Scroll anchoring off, and this is load-bearing.
     *
     * The header is in flow, so collapsing it makes the document ~87px shorter.
     * Chrome answers that by moving the scroll position to keep the content still
     * -- and 87px above a 30px scroll position is 0, which is under the 8px the
     * morph turns OFF at. So the bar collapsed, the page snapped back to the top,
     * the bar re-expanded, and it did that for as long as you kept scrolling.
     * Measured: scrollY 30 -> 0 within two frames of the class landing.
     *
     * Anchoring exists to stop content jumping when something ABOVE the viewport
     * changes size unexpectedly. Here the size change is the point, and it is the
     * thing the reader is looking at.
     */
    overflow-anchor: none;
  }

  /* The photograph starts where the header ends. The main column's usual top
     space would read as a gap torn out of the picture. */
  body.caah-hig-home .site-main,
  body.caah-hig-home .hig-home {
    padding-block-start: 0;
  }

  body.caah-hig-home .hig-hero {
    /*
     * 2.2:1 is what the band wants. 900px is the ceiling: past a ~1980px viewport
     * it would otherwise keep growing and push the fact row off every screen.
     * 1280px is the floor of the whole block, set by the copy -- see the type
     * clamps below.
     *
     * The third term is the short-screen rule. The masthead above the band is
     * ~170px of the window before the picture starts, and the concierge launcher
     * sits in the bottom 66px of it, so on a 13"-15" laptop the proportional band
     * would put the second call to action underneath the launcher. Bounding the
     * band by what is actually left of the window keeps every part of the column
     * clear of both. It costs height off the TOP of the frame, because the crop is
     * bottom-anchored -- more wall, never a person.
     *
     * Declared twice: browsers without svh keep the vh line, which is the same
     * number on a desktop pointer.
     */
    --caah-mast-h: calc(clamp(104px, 8.5vw, 148px) + 2 * clamp(16px, 1.4vw, 24px) + 1px);
    --caah-hero-h: min(calc(100vw / 2.2), 900px, calc(100vh - var(--caah-mast-h) - 72px));
    --caah-hero-h: min(calc(100vw / 2.2), 900px, calc(100svh - var(--caah-mast-h) - 72px));

    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /*
     * A floor, not a fixed height. The proportions above are what the band wants
     * and what it gets in every state the truth layer actually produces. But the
     * status line is written by that layer, not by this stylesheet, so if it ever
     * gets long enough to outgrow the band the band gives way instead of the
     * stylesheet clipping a call to action. Growing costs a sliver of the paw
     * roundel at the top left, ~60px in before any of it shows; clipping would
     * cost the button.
     */
    min-height: var(--caah-hero-h);
    align-items: center;
    isolation: isolate;
    overflow: hidden;
  }

  /* The frame fills the section instead of reserving a 3:2 card inside it. */
  body.caah-hig-home .hig-hero-figure {
    position: absolute;
    inset: 0;
    z-index: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /*
   * Anchored to the bottom edge, so whatever the viewport's proportions the crop
   * spends the wall above the window first and never the shoes. On a wider, shorter
   * screen the picture closes in on the team rather than beheading them.
   */
  body.caah-hig-home .hig-hero-figure picture,
  body.caah-hig-home .hig-hero-figure img {
    object-position: 50% 100%;
  }

  /*
   * The shade the words sit on. It has to survive the worst of what is behind it:
   * the sunlit pilaster at the left of the window is nearly white, so the left end
   * is nearly opaque and the falloff is quick -- by the time it reaches the first
   * person it is gone.
   */
  body.caah-hig-home .hig-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(96deg,
        rgba(10, 8, 7, 0.9) 0%,
        rgba(10, 8, 7, 0.86) 20%,
        rgba(10, 8, 7, 0.6) 31%,
        rgba(10, 8, 7, 0.18) 43%,
        rgba(10, 8, 7, 0) 56%),
      linear-gradient(to top, rgba(10, 8, 7, 0.3), rgba(10, 8, 7, 0) 24%);
  }

  body.caah-hig-home .hig-hero-copy {
    position: relative;
    z-index: 2;
    width: min(calc(31vw - var(--caah-hero-inset)), 470px);
    margin-inline-start: var(--caah-hero-inset);
    padding-block: 0;
    color: #fff;
    text-shadow: 0 1px 18px rgba(10, 8, 7, 0.45);
  }

  body.caah-hig-home .hig-hero-copy .hig-eyebrow {
    color: rgba(255, 255, 255, 0.78);
  }

  body.caah-hig-home .hig-hero-copy .hig-display {
    /* A narrower column than the split layout, so the display size comes down with
       it rather than breaking into six ragged lines. */
    font-size: clamp(1.9rem, 2.55vw, 3.1rem);
    color: #fff;
  }

  body.caah-hig-home .hig-hero-copy .hig-lead,
  body.caah-hig-home .hig-hero-copy .hig-status {
    color: rgba(255, 255, 255, 0.88);
  }

  /*
   * The band's height is a fixed share of the viewport's width, so the column has
   * to be too. Every size below is a vw clamp for that one reason: the copy and the
   * picture then shrink together, and the fit stops depending on how much the
   * status line happens to be saying today. (It says a lot more on an open weekday
   * morning -- hours, same-day line and the capacity fine print -- than it does
   * after closing, and that difference is 150px of column at this width.)
   *
   * Each clamp bottoms out at a size that is still comfortable to read, which is
   * what sets the 1280px breakpoint: below it the type would have to get smaller
   * than that to keep clearing the band.
   */
  body.caah-hig-home .hig-hero-copy .hig-eyebrow {
    margin-bottom: clamp(8px, 0.85vw, 12px);
    font-size: clamp(0.75rem, 0.86vw, 0.8125rem);
  }

  body.caah-hig-home .hig-hero-copy .hig-lead {
    margin-top: clamp(14px, 1.45vw, 20px);
    font-size: clamp(1rem, 1.15vw, 1.1875rem);
  }

  body.caah-hig-home .hig-hero-copy .hig-status,
  body.caah-hig-home .hig-hero-copy .hig-actions {
    margin-top: clamp(15px, 1.6vw, 24px);
  }

  body.caah-hig-home .hig-hero-copy .hig-status {
    font-size: clamp(0.9375rem, 1.05vw, 1rem);
  }

  body.caah-hig-home .hig-hero-copy .hig-fine-print,
  body.caah-hig-home .hig-hero-copy .caah-status-notice {
    font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  }

  /*
   * The status pill is drawn for a cream page: deep green on pale green, brown on
   * pale amber, grey on grey. On the photograph all three are close to invisible,
   * and "Closed now" -- the one that changes what a visitor does next -- was the
   * worst of them. These are the palette's own dark-surface colours, applied here
   * whatever the theme, because inside this band the surface IS dark in both.
   */
  body.caah-hig-home .hig-hero-copy .pill:not(.warning):not(.closed) {
    background: rgba(95, 209, 165, 0.18);
    color: #5FD1A5;
  }

  body.caah-hig-home .hig-hero-copy .pill.warning {
    background: rgba(240, 181, 106, 0.2);
    color: #F0B56A;
  }

  body.caah-hig-home .hig-hero-copy .pill.closed {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
  }

  body.caah-hig-home .hig-hero-copy .btn {
    font-size: clamp(0.9375rem, 1.05vw, 1rem);
    padding-block: clamp(10px, 0.85vw, 13px);
    padding-inline: clamp(17px, 1.5vw, 22px);
  }

  body.caah-hig-home .hig-hero-copy .hig-fine-print,
  body.caah-hig-home .hig-hero-copy .caah-status-notice {
    color: rgba(255, 255, 255, 0.72);
  }

  /* Both buttons are solid: they sit on a photograph, and a hairline ghost button
     over a window frame is a button you have to hunt for. */
  body.caah-hig-home .hig-hero-copy .btn {
    text-shadow: none;
  }

  body.caah-hig-home .hig-hero-copy .btn.ghost {
    background: rgba(255, 255, 255, 0.94);
    border-color: transparent;
    color: #1d1d1f;
  }

  body.caah-hig-home .hig-hero-copy .btn.ghost:hover {
    background: #fff;
    color: #1d1d1f;
  }

  body.caah-hig-home .hig-hero-copy a:focus-visible,
  body.caah-hig-home .hig-hero-copy .btn:focus-visible {
    outline-color: #fff;
  }

  /*
   * On a card, the whole photograph could be the swap control, because a card is
   * plainly one object. Full-bleed it is the page, and a page-sized invisible
   * BUTTON is not a control, it is a trap: it would sit over the two calls to
   * action, wrap the H1 in a second interactive ancestor, and need a name a screen
   * reader would read before every heading in the band. So the control shrinks to
   * its own chip in the corner and stays a chip.
   *
   * The band is still a hit area for it, but through a listener on the section
   * rather than an element over it -- nothing added to the page, nothing over the
   * buttons, nothing in the accessibility tree. See caah-hig.js for what that
   * listener refuses: selections, modified clicks, flick-scrolls, and the chip's own
   * click, which would otherwise toggle twice and appear to do nothing at all.
   */
  body.caah-hig-home .hig-hero-swap {
    inset: auto var(--caah-hero-inset) var(--hig-s6) auto;
    z-index: 3;
    width: auto;
    height: auto;
    padding: 0;
  }

  body.caah-hig-home .hig-hero-swap:focus-visible {
    outline-offset: 3px;
  }
}

/* ------------------------------- 5c. the masthead, and its collapse on scroll */
/*
 * The photograph no longer carries the sign, so the header does. At the top of
 * the homepage, on the same wide screens that get the full-bleed band, the bar
 * opens out into a masthead: the wordmark at roughly twice its toolbar size, the
 * navigation set to match, the whole bar about twice as tall. Scroll a little and
 * it collapses back into the toolbar the rest of the site uses.
 *
 * No new script. navigation.js has toggled `html.caah-logo-compact` on every page
 * since the mobile logo morph shipped -- on above 28px of scroll, off below 8, with
 * the hysteresis already tuned so a rest position near the trigger cannot flutter.
 * Every rule here hangs off `html:not(.caah-logo-compact)`, so the masthead is the
 * state the page loads in and the toolbar is the state it scrolls into. With
 * JavaScript off the masthead simply stays, which is a header, not a bug.
 *
 * The bar is in flow, so collapsing it lifts the page under it. That is the point:
 * the masthead is a threshold you cross once, and the picture rising to meet the
 * toolbar is the same motion as the wordmark shrinking into it. The theme's
 * reduced-motion rule collapses these durations site-wide.
 */
@media (min-width: 1280px) {
  body.caah-hig-home .site-header {
    /* The wordmark lines up with the headline under it, not with the 1160px measure. */
    padding-inline: var(--caah-hero-inset);
    padding-block: 8px;
    /*
     * `transform` first, and it has to stay in this list: navigation.js slides the
     * whole bar out of the way on the way down the page, and that slide is the base
     * stylesheet's `transition: transform .4s`. Declaring only `padding` here
     * replaced that shorthand, and the bar stopped sliding away -- it just vanished.
     */
    transition: transform 0.4s ease-in-out, padding 420ms var(--hig-ease-apple);
  }

  /*
   * The wordmark's file carries transparent space: measured by rendering it on its
   * own, the first ink is 22% of the image's height in from the left edge. Setting
   * the box flush left therefore leaves the paw sitting ~29px inside the headline
   * beneath it, which is exactly the indent that reads as "not aligned". The margin
   * cancels the file's own padding, so what lines up is the ink.
   *
   * Stated as a share of the height, so it stays true at both sizes and does not
   * slide sideways while the bar collapses.
   */
  body.caah-hig-home .site-header .brand-logo {
    --caah-logo-h: 68px;

    height: var(--caah-logo-h);
    margin-inline-start: calc(var(--caah-logo-h) * -0.22);
    transition: height 420ms var(--hig-ease-apple),
                margin 420ms var(--hig-ease-apple);
  }

  body.caah-hig-home .site-nav > a,
  body.caah-hig-home .nav-dropdown-toggle,
  body.caah-hig-home .header-actions .btn,
  body.caah-hig-home .header-actions .btn-icon {
    transition: background-color 0.15s ease, color 0.15s ease,
                font-size 420ms var(--hig-ease-apple),
                padding 420ms var(--hig-ease-apple),
                width 420ms var(--hig-ease-apple),
                height 420ms var(--hig-ease-apple);
  }

  /* --------------------------------------------------- the masthead state */

  html:not(.caah-logo-compact) body.caah-hig-home .site-header {
    padding-block: clamp(16px, 1.4vw, 24px);
  }

  /*
   * 8.5vw is the wordmark tracking the window the way a painted sign tracks a
   * storefront. It bottoms out at 104px so the second line ("ANIMAL HOSPITAL")
   * stays readable at 1280, and stops at 148px so it cannot start eating the fold
   * on a 27" display.
   */
  html:not(.caah-logo-compact) body.caah-hig-home .site-header .brand-logo {
    --caah-logo-h: clamp(104px, 8.5vw, 148px);
  }

  html:not(.caah-logo-compact) body.caah-hig-home .site-nav > a,
  html:not(.caah-logo-compact) body.caah-hig-home .nav-dropdown-toggle {
    min-height: 44px;
    padding: 10px 15px;
    font-size: clamp(1rem, 1.12vw, 1.125rem);
  }

  html:not(.caah-logo-compact) body.caah-hig-home .header-actions .btn-icon {
    width: clamp(44px, 3.1vw, 50px);
    height: clamp(44px, 3.1vw, 50px);
  }

  html:not(.caah-logo-compact) body.caah-hig-home .header-actions .btn:not(.btn-icon) {
    padding: 14px 26px;
    font-size: clamp(1rem, 1.12vw, 1.125rem);
  }
}

/* --------------------------- 5d. the same hero, on everything below 1280px */
/*
 * The band above only exists where there is room beside the team for words. On a
 * phone or a portrait tablet there is not, so the photograph keeps the whole width
 * and the copy sits under it -- the picture still runs edge to edge, and it is
 * still the first thing on the page, which is the part that was worth having.
 *
 * Two things change with the size, both for the same reason: at this scale the
 * photograph is small enough that the SIGN is the most legible thing in it, and
 * nothing is set over the picture, so there is no reason to crop the sign away.
 * 5:3 is the shortest box that still holds all of it -- the letters start at 11%
 * of the frame's height and the crop is anchored to the bottom, so 90% visible
 * clears them with a point to spare.
 *
 * 62svh is the ceiling, so the picture cannot take the whole window on a short one,
 * and 620px of window height is the floor of the whole block: below that (a phone
 * on its side) a band across the top is the wrong shape for the room available,
 * and section 5e takes over.
 */
@media (max-width: 1279px) {
  /* The negative-margin bleed can overshoot by the scrollbar's width. `clip`, not
     `hidden`, so the sticky header keeps working. */
  body.caah-hig-home {
    overflow-x: clip;
  }
}

@media (max-width: 999px) and (min-height: 620px) {
  /* The photograph starts where the header ends. */
  body.caah-hig-home .site-main,
  body.caah-hig-home .hig-home {
    padding-block-start: 0;
  }

  body.caah-hig-home .hig-hero {
    gap: var(--hig-s8);
  }

  body.caah-hig-home .hig-hero-figure {
    /* Above the copy, against the DOM order: see the frame rule below, which takes
       the only focusable thing out of the figure at this width, so nothing that can
       be tabbed to is moved out of sequence by this. */
    order: -1;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: min(calc(100vw / 1.667), 62svh);
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  body.caah-hig-home .hig-hero-figure picture,
  body.caah-hig-home .hig-hero-figure img {
    object-position: 50% 100%;
  }

  /*
   * The swap control and its second photograph are for a pointer on a big screen.
   * Dropping them here also means the phone never downloads the second frame: it is
   * lazy, and a lazy image inside a display:none box is never fetched.
   */
  body.caah-hig-home .hig-hero-frame:not(.is-active),
  body.caah-hig-home .hig-hero-swap {
    display: none;
  }

  /* No control at this width, so no cursor promising one. caah-hig.js reads the
     same fact off the chip's own visibility and declines the click. */
  body.caah-hig-home .hig-hero.is-swap-surface .hig-hero-figure {
    cursor: auto;
  }
}

/* The split layout between the two, on a tablet held sideways: same trim of the
   dead space above the fold, nothing else. */
@media (min-width: 1000px) and (max-width: 1279px) {
  body.caah-hig-home .site-main {
    padding-block-start: var(--hig-s8);
  }

  body.caah-hig-home .hig-home {
    padding-block-start: 0;
  }
}

/* ------------------------ 5e. a phone on its side, and any other short window */
/*
 * Landscape is not portrait with different numbers. There are ~330px between the
 * header and the action bar, three floating widgets already living in that space,
 * and a band across the top would take all of it. So the picture goes back beside
 * the words, the vertical rhythm compresses, and the space above the fold is spent
 * on the sentence and the two buttons rather than on padding.
 */
@media (max-width: 1279px) and (max-height: 619px) {
  body.caah-hig-home .site-main {
    padding-block: var(--hig-s5) var(--hig-s8);
    gap: var(--hig-s10);
  }

  body.caah-hig-home .hig-home {
    padding-block: 0 var(--hig-s8);
    gap: var(--hig-s10);
  }

  body.caah-hig-home .hig-hero {
    gap: var(--hig-s6);
  }

  body.caah-hig-home .hig-display {
    font-size: 1.75rem;
    line-height: 1.08;
  }

  /*
   * The swap control is a 44px chip on a picture that is now 160px tall, and it
   * lands across the team. Same treatment as the phone: the control and its second
   * frame come out, which also means neither is downloaded.
   */
  body.caah-hig-home .hig-hero-frame:not(.is-active),
  body.caah-hig-home .hig-hero-swap {
    display: none;
  }

  body.caah-hig-home .hig-hero.is-swap-surface .hig-hero-figure {
    cursor: auto;
  }

  body.caah-hig-home .hig-lead {
    margin-top: var(--hig-s3);
    font-size: 1rem;
  }

  body.caah-hig-home .hig-status,
  body.caah-hig-home .hig-actions {
    margin-top: var(--hig-s4);
  }
}

/* Wide enough to sit the photograph next to the words: a phone on its side is,
   a phone stood up is not. */
@media (min-width: 700px) and (max-width: 1279px) and (max-height: 619px) {
  body.caah-hig-home .hig-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: var(--hig-s8);
  }

  /*
   * 2:1 and anchored to the bottom, which is the wide-screen crop: at this height
   * a 3:2 card would run off the bottom of the window, and the part it would lose
   * is the team. Cropping the sign instead costs the least, and the header is
   * showing the wordmark two inches above it anyway.
   */
  body.caah-hig-home .hig-hero-figure {
    aspect-ratio: 2 / 1;
    /* Pinned to the top of the row rather than centred in it: centred, the bottom
       of the picture -- which is where the team is -- ends up behind the sticky
       action bar. */
    align-self: start;
  }

  body.caah-hig-home .hig-hero-figure picture,
  body.caah-hig-home .hig-hero-figure img {
    object-position: 50% 100%;
  }
}

/*
 * The concierge launcher, where the sticky action bar exists. A 200px pill floating
 * over the page lands on whatever happens to be under it -- on both a phone and a
 * portrait tablet that turned out to be the hero's own "Schedule an appointment".
 * Reduced to its mark, it covers a button's worth of nothing instead. The label
 * stays in the accessibility tree, so the control keeps its name.
 */
@media (max-width: 900px) {
  .caah-concierge:not(.caah-concierge--open) .caah-concierge-launch {
    width: 52px;
    height: 52px;
    padding: 0;
    gap: 0;
    border-radius: 999px;
    justify-content: center;
  }

  .caah-concierge:not(.caah-concierge--open) .caah-concierge-launch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .caah-concierge:not(.caah-concierge--open) .caah-concierge-mark {
    width: 30px;
    height: 30px;
  }
}

/*
 * One fact row instead of a stat strip plus the hero card's call/visit rows. Each
 * entry pairs a symbol with a value and a label, so it reads without colour and
 * scans without being read.
 */
body.caah-hig-home .hig-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--hig-card-border);
  border-radius: var(--hig-r-large);
  background: var(--hig-card-bg);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
  overflow: hidden;
}

body.caah-hig-home .hig-facts li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  column-gap: var(--hig-s3);
  row-gap: 2px;
  padding: var(--hig-s5) var(--hig-s6);
  border-top: 1px solid var(--hig-separator);
}

body.caah-hig-home .hig-facts li:first-child {
  border-top: 0;
}

body.caah-hig-home .hig-symbol {
  margin-top: 3px;
}

body.caah-hig-home .hig-fact-value {
  grid-column: 2;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

body.caah-hig-home .hig-fact-label {
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--hig-text-secondary);
}

@media (min-width: 620px) {
  body.caah-hig-home .hig-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.caah-hig-home .hig-facts li {
    padding: var(--hig-s5) var(--hig-s6);
  }

  body.caah-hig-home .hig-facts li:nth-child(-n + 2) {
    border-top: 0;
  }

  body.caah-hig-home .hig-facts li:nth-child(odd) {
    padding-left: var(--hig-s6);
  }

  body.caah-hig-home .hig-facts li:nth-child(even) {
    padding-right: var(--hig-s6);
    border-left: 1px solid var(--hig-separator);
  }
}

@media (min-width: 1000px) {
  body.caah-hig-home .hig-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.caah-hig-home .hig-facts li,
  body.caah-hig-home .hig-facts li:nth-child(odd),
  body.caah-hig-home .hig-facts li:nth-child(even) {
    padding: var(--hig-s6);
    border-top: 0;
    border-left: 1px solid var(--hig-separator);
  }

  body.caah-hig-home .hig-facts li:first-child {
    border-left: 0;
  }
}

/* ----------------------------------------------------------------- 6. gallery */

/*
 * A scroll-snap strip rather than a carousel with controls. The track runs to the
 * right edge of the measure and the frames are sized so the next one is always part
 * visible, which is the affordance that says "there is more" without a control
 * having to say it. Focusable and labelled so it can be reached and scrolled from
 * the keyboard.
 */
body.caah-hig-home .hig-gallery {
  display: flex;
  gap: var(--hig-s4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--hig-s2) 0 var(--hig-s4);
  scrollbar-width: thin;
  mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
}

body.caah-hig-home .hig-gallery:focus-visible {
  outline: 2px solid var(--hig-focus);
  outline-offset: 4px;
  border-radius: var(--hig-r-large);
}

body.caah-hig-home .hig-gallery-item {
  flex: 0 0 78%;
  scroll-snap-align: start;
  border-radius: var(--hig-r-surface);
  overflow: hidden;
  border: 1px solid var(--hig-card-border);
  background: var(--hig-fill);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
  aspect-ratio: 4 / 3;
  transition: transform 0.25s var(--hig-ease-apple),
              box-shadow 0.25s var(--hig-ease-apple);
}

body.caah-hig-home .hig-gallery-item:hover {
  transform: scale(1.02);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-lg);
}

@media (min-width: 700px) {
  body.caah-hig-home .hig-gallery-item {
    flex-basis: 42%;
  }
}

@media (min-width: 1000px) {
  body.caah-hig-home .hig-gallery-item {
    flex-basis: 30%;
  }
}

body.caah-hig-home .hig-gallery-item picture,
body.caah-hig-home .hig-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- 7. services */

body.caah-hig-home .hig-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hig-s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 620px) {
  body.caah-hig-home .hig-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  body.caah-hig-home .hig-services {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tactile navigational cards with smooth hover lift and squircle icon plates. */
body.caah-hig-home .hig-service {
  display: flex;
  flex-direction: column;
  gap: var(--hig-s3);
  height: 100%;
  padding: var(--hig-s5);
  border: 1px solid var(--hig-card-border);
  border-radius: var(--hig-r-surface);
  background: var(--hig-card-bg);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s var(--hig-ease-apple),
              box-shadow 0.22s var(--hig-ease-apple),
              border-color 0.22s var(--hig-ease-apple);
}

body.caah-hig-home .hig-service:hover {
  background: var(--hig-card-bg);
  border-color: var(--hig-card-border-hover);
  transform: translateY(-3px);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-hover);
}

body.caah-hig-home .hig-service:hover .hig-service-icon {
  background: rgba(197, 32, 41, 0.08);
  color: var(--hig-accent-text);
  transform: scale(1.04);
}

body.caah-hig-home .hig-service:active {
  transform: scale(0.985) translateY(-1px);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-sm);
}

body.caah-hig-home .hig-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--hig-r-control);
  background: var(--hig-fill);
  color: var(--hig-text);
  transition: background-color 0.2s var(--hig-ease-apple),
              color 0.2s var(--hig-ease-apple),
              transform 0.2s var(--hig-ease-apple);
}

body.caah-hig-home .hig-service-icon svg {
  width: 22px;
  height: 22px;
}

body.caah-hig-home .hig-service-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.caah-hig-home .hig-service-name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

body.caah-hig-home .hig-service-short {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .hig-service:hover .hig-service-more::after {
  margin-left: 4px;
}

body.caah-hig-home .hig-section-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--hig-s3);
  margin: var(--hig-s6) 0 0;
  font-size: 1rem;
}

body.caah-hig-home .hig-section-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

body.caah-hig-home .hig-section-more span {
  color: var(--hig-text-tertiary);
}

/* --------------------------------------------------- 8. weekly-clinic feature */

body.caah-hig-home .hig-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hig-s6);
  padding: var(--hig-s8);
  border: 1px solid var(--hig-card-border);
  border-radius: var(--hig-r-large);
  background: var(--hig-card-bg);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-lg);
}

@media (min-width: 900px) {
  body.caah-hig-home .hig-feature {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--hig-s8) var(--hig-s12);
    padding: var(--hig-s12);
    align-items: center;
  }

  /* The disclosure is reference material for everything above it, so it runs the
     full width underneath rather than sitting in a column of its own. */
  body.caah-hig-home .hig-disclosure {
    grid-column: 1 / -1;
  }
}

body.caah-hig-home .hig-feature-figure {
  margin: 0;
  border-radius: var(--hig-r-surface);
  overflow: hidden;
  border: 1px solid var(--hig-card-border);
  background: var(--hig-fill);
  box-shadow: var(--hig-card-highlight-subtle), var(--hig-shadow-sm);
  aspect-ratio: 4 / 3;
}

body.caah-hig-home .hig-feature-figure picture,
body.caah-hig-home .hig-feature-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.caah-hig-home .hig-feature-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}

body.caah-hig-home .hig-feature-title a {
  color: inherit;
  text-decoration: none;
}

body.caah-hig-home .hig-feature-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.caah-hig-home .hig-feature-when {
  display: flex;
  align-items: center;
  gap: var(--hig-s2);
  margin: var(--hig-s3) 0 0;
  font-size: 1rem;
  font-weight: 600;
}

body.caah-hig-home .hig-feature-lead {
  margin: var(--hig-s4) 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .hig-feature-facts {
  display: grid;
  gap: var(--hig-s2);
  margin: var(--hig-s5) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .hig-feature-facts li {
  padding-left: var(--hig-s5);
  position: relative;
}

body.caah-hig-home .hig-feature-facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--hig-text-tertiary);
}

/* Progressive disclosure for the long-form detail. Closed by default: it is
   reference material, not part of deciding to come in. */
body.caah-hig-home .hig-disclosure {
  border: 1px solid var(--hig-separator);
  border-radius: var(--hig-r-surface);
  background: var(--hig-bg);
}

body.caah-hig-home .hig-disclosure > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--hig-s3) var(--hig-s5);
  border-radius: var(--hig-r-surface);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

body.caah-hig-home .hig-disclosure > summary {
  list-style: none;
}

body.caah-hig-home .hig-disclosure > summary::-webkit-details-marker {
  display: none;
}

/* A chevron, because a disclosure that does not show its state is just a heading
   that happens to be clickable. */
body.caah-hig-home .hig-disclosure > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--hig-text-tertiary);
  border-bottom: 2px solid var(--hig-text-tertiary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

body.caah-hig-home .hig-disclosure[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

body.caah-hig-home .hig-disclosure > summary:hover {
  background: var(--hig-fill);
}

body.caah-hig-home .hig-disclosure[open] > summary {
  border-bottom: 1px solid var(--hig-separator);
  border-radius: var(--hig-r-surface) var(--hig-r-surface) 0 0;
}

body.caah-hig-home .hig-disclosure-body {
  display: grid;
  gap: var(--hig-s4);
  margin: 0;
  padding: var(--hig-s5);
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .hig-disclosure-body strong {
  color: var(--hig-text);
}

/* -------------------------------------- 9. care path: grouped list and steps */

body.caah-hig-home .hig-group {
  display: grid;
  border-radius: var(--hig-r-large);
  border: 1px solid var(--hig-card-border);
  background: var(--hig-card-bg);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
  overflow: hidden;
}

body.caah-hig-home .hig-group-item {
  padding: var(--hig-s6);
  border-top: 1px solid var(--hig-separator);
  transition: background-color 0.18s var(--hig-ease-apple);
}

body.caah-hig-home .hig-group-item:hover {
  background-color: var(--hig-fill);
}

body.caah-hig-home .hig-group-item:first-child {
  border-top: 0;
}

body.caah-hig-home .hig-group-item h3 {
  margin: 0 0 var(--hig-s2);
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 600;
}

body.caah-hig-home .hig-group-item p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--hig-text-secondary);
}

@media (min-width: 900px) {
  body.caah-hig-home .hig-group-item {
    display: grid;
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: var(--hig-s8);
    align-items: baseline;
    padding: var(--hig-s6) var(--hig-s8);
  }

  body.caah-hig-home .hig-group-item h3 {
    margin: 0;
  }
}

body.caah-hig-home .hig-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hig-s6);
  margin: var(--hig-s8) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 780px) {
  body.caah-hig-home .hig-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hig-s8);
  }
}

body.caah-hig-home .hig-steps li {
  display: grid;
  gap: var(--hig-s2);
}

/* Refined step badge with squircle container and crisp numeral */
body.caah-hig-home .hig-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--hig-s1);
  border-radius: var(--hig-r-control);
  background: var(--hig-fill-strong);
  color: var(--hig-text);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--hig-card-highlight-subtle);
}

body.caah-hig-home .hig-steps h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

body.caah-hig-home .hig-steps p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--hig-text-secondary);
}

/* ----------------------------------------------------------------- 10. reviews */

body.caah-hig-home .clinic-reviews-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hig-s6);
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

@media (min-width: 900px) {
  body.caah-hig-home .clinic-reviews-wrapper {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--hig-s8);
    align-items: start;
  }
}

body.caah-hig-home .clinic-reviews-sidebar {
  position: static;
}

body.caah-hig-home .overall-rating-card {
  display: grid;
  justify-items: start;
  gap: var(--hig-s2);
  padding: var(--hig-s6);
  border: 1px solid var(--hig-card-border);
  border-radius: var(--hig-r-large);
  background: var(--hig-card-bg);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
}

body.caah-hig-home .overall-rating-number {
  font-family: var(--hig-font);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hig-text);
  font-variant-numeric: tabular-nums;
}

body.caah-hig-home .overall-rating-stars,
body.caah-hig-home .review-rating {
  font-size: 0.8125rem;
  letter-spacing: 1px;
  line-height: 1;
}

body.caah-hig-home .overall-rating-total {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .write-review-btn {
  margin-top: var(--hig-s3);
}

body.caah-hig-home .clinic-reviews-main {
  min-width: 0;
}

/* Same snap-scroll treatment as the gallery: consistent behaviour for the two
   horizontal collections on the page. */
body.caah-hig-home .google-reviews-scroll {
  display: flex;
  flex-direction: row;
  max-height: none;
  overflow-y: visible;
  padding: var(--hig-s2) 0 var(--hig-s4);
  gap: var(--hig-s4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
}

body.caah-hig-home .single-review-card {
  flex: 0 0 84%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--hig-s3);
  padding: var(--hig-s5);
  border: 1px solid var(--hig-card-border);
  border-radius: var(--hig-r-surface);
  background: var(--hig-card-bg);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-sm);
  transition: transform 0.22s var(--hig-ease-apple),
              box-shadow 0.22s var(--hig-ease-apple);
}

body.caah-hig-home .single-review-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
}

@media (min-width: 700px) {
  body.caah-hig-home .single-review-card {
    flex-basis: 62%;
  }
}

@media (min-width: 1100px) {
  body.caah-hig-home .single-review-card {
    flex-basis: 46%;
  }
}

body.caah-hig-home .review-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hig-s3);
  flex-wrap: wrap;
}

body.caah-hig-home .review-author-info {
  display: grid;
  gap: 2px;
}

body.caah-hig-home .review-author,
body.caah-hig-home .review-author strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hig-text);
}

body.caah-hig-home .review-date {
  font-size: 0.8125rem;
  color: var(--hig-text-tertiary);
}

/*
 * Reviews vary from two lines to twenty, and in a row of equal-height cards the
 * longest one set the height for all of them -- 746px at 1440. Clamped to seven
 * lines, with "Read on Google" beneath every card as the way to the full text,
 * which is where the full text actually lives. Line-based rather than px-based, so
 * it still shows seven lines at larger text sizes instead of clipping mid-line.
 */
body.caah-hig-home .review-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hig-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.caah-hig-home .review-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hig-accent-text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

body.caah-hig-home .review-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- 11. contact */

body.caah-hig-home .hig-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hig-s5);
  align-items: start;
}

@media (min-width: 780px) {
  body.caah-hig-home .hig-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  body.caah-hig-home .hig-contact {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: var(--hig-s6);
  }
}

body.caah-hig-home .hig-panel {
  padding: var(--hig-s6);
  border-radius: var(--hig-r-large);
  border: 1px solid var(--hig-card-border);
  background: var(--hig-card-bg);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
}

body.caah-hig-home .hig-panel-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hig-s3);
  margin: 0 0 var(--hig-s4);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
}

body.caah-hig-home .hig-panel p {
  margin: 0 0 var(--hig-s3);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .hig-panel a,
body.caah-hig-home .hig-panel p {
  overflow-wrap: anywhere;
}

body.caah-hig-home .hig-panel-strong {
  color: var(--hig-text) !important;
  font-weight: 600;
}

body.caah-hig-home .hig-panel-actions {
  margin: var(--hig-s5) 0 0;
}

body.caah-hig-home .hig-hours {
  margin: 0;
  display: grid;
}

body.caah-hig-home .hig-hours > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hig-s4);
  padding: var(--hig-s3) 0;
  border-top: 1px solid var(--hig-separator);
}

body.caah-hig-home .hig-hours > div:first-child {
  border-top: 0;
  padding-top: 0;
}

body.caah-hig-home .hig-hours dt {
  font-size: 0.9375rem;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .hig-hours dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--hig-text);
}

/* The map is content, so it gets the surface to itself with no padding around it. */
body.caah-hig-home .hig-map {
  padding: 0;
  overflow: hidden;
  min-height: 320px;
  display: flex;
}

body.caah-hig-home .hig-map .google-maps-iframe {
  flex: 1;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  min-height: 320px;
}

body.caah-hig-home .hig-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

/* ---------------------------- 12. lead form, closing band, footer, sticky bar */

body.caah-hig-home .caah-lead-section {
  display: block;
  gap: 0;
  scroll-margin-top: 88px;
}

body.caah-hig-home .caah-lead-shell {
  gap: var(--hig-s8);
  padding: var(--hig-s8);
  border-radius: var(--hig-r-large);
  border: 1px solid var(--hig-separator);
  background: var(--hig-bg-elevated);
  box-shadow: var(--hig-shadow-1);
}

/* The two-column split is a container query in caah-hig-base.css: the form asks how
   wide IT is, not how wide the window is. */

body.caah-hig-home .caah-lead-copy .eyebrow {
  margin: 0 0 var(--hig-s3);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hig-text-tertiary);
}

body.caah-hig-home .caah-lead-copy h2 {
  margin: 0 0 var(--hig-s3);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}

body.caah-hig-home .caah-lead-copy .lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .caah-lead-copy,
body.caah-hig-home .caah-lead-form {
  display: grid;
  gap: var(--hig-s4);
  align-content: start;
}

body.caah-hig-home .caah-lead-privacy,
body.caah-hig-home .caah-lead-alt,
body.caah-hig-home .caah-lead-legend {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .caah-lead-urgent {
  margin: 0;
  padding: var(--hig-s3) var(--hig-s4);
  border-radius: var(--hig-r-control);
  background: var(--hig-fill);
  border-left: 3px solid var(--hig-accent);
  color: var(--hig-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

body.caah-hig-home .caah-lead-trust {
  margin: 0;
  gap: var(--hig-s2);
}

body.caah-hig-home .caah-lead-trust li {
  gap: var(--hig-s3);
  padding: var(--hig-s3) var(--hig-s4);
  border-radius: var(--hig-r-control);
  background: var(--hig-fill);
}

body.caah-hig-home .caah-lead-trust strong {
  font-size: 0.9375rem;
  color: var(--hig-text);
}

body.caah-hig-home .caah-lead-trust span {
  font-size: 0.875rem;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .caah-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hig-s4);
}

@media (max-width: 460px) {
  body.caah-hig-home .caah-field-grid {
    grid-template-columns: 1fr;
  }
}

body.caah-hig-home .caah-field {
  display: grid;
  gap: 6px;
  margin: 0;
  grid-auto-rows: min-content;
  align-content: start;
}

body.caah-hig-home .caah-field > label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hig-text);
}

body.caah-hig-home .caah-required {
  color: var(--hig-accent-text);
}

body.caah-hig-home .caah-field input,
body.caah-hig-home .caah-field select {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  font-family: var(--hig-font);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--hig-text);
  background: var(--hig-bg-elevated);
  border: 1px solid var(--hig-separator-strong);
  border-radius: var(--hig-r-control);
  box-shadow: none;
  transition: border-color 0.15s ease;
}

html.dark-mode body.caah-hig-home .caah-field input,
html.dark-mode body.caah-hig-home .caah-field select {
  background: var(--hig-fill);
  border-color: var(--hig-separator-strong);
  color: var(--hig-text);
}

body.caah-hig-home .caah-field input:hover,
body.caah-hig-home .caah-field select:hover {
  border-color: var(--hig-text-tertiary);
}

body.caah-hig-home .caah-field input:focus-visible,
body.caah-hig-home .caah-field select:focus-visible {
  outline: 2px solid var(--hig-focus);
  outline-offset: 2px;
  border-color: var(--hig-focus);
}

body.caah-hig-home .caah-field.has-error input,
body.caah-hig-home .caah-field.has-error select {
  border-color: var(--hig-accent);
  box-shadow: inset 3px 0 0 var(--hig-accent);
}

body.caah-hig-home .caah-field-hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--hig-text-tertiary);
}

body.caah-hig-home .caah-field-error {
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--hig-accent-text);
}

body.caah-hig-home .caah-lead-errors {
  padding: var(--hig-s4);
  border-radius: var(--hig-r-control);
  border: 1px solid var(--hig-accent);
  background: var(--hig-fill);
  color: var(--hig-text);
  font-size: 0.9375rem;
}

body.caah-hig-home .caah-lead-errors-head {
  margin: 0 0 var(--hig-s2);
  font-weight: 600;
}

body.caah-hig-home .caah-lead-optional {
  border: 1px solid var(--hig-separator);
  border-radius: var(--hig-r-control);
  background: transparent;
  padding: 0;
}

body.caah-hig-home .caah-lead-optional > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hig-s2);
  min-height: 44px;
  padding: var(--hig-s3) var(--hig-s4);
  font-size: 0.9375rem;
  cursor: pointer;
  border-radius: var(--hig-r-control);
}

body.caah-hig-home .caah-lead-optional > summary:hover {
  background: var(--hig-fill);
}

body.caah-hig-home .caah-lead-optional-label {
  font-weight: 600;
  color: var(--hig-text);
}

body.caah-hig-home .caah-lead-optional-note {
  color: var(--hig-text-tertiary);
  font-size: 0.8125rem;
}

body.caah-hig-home .caah-lead-optional[open] > summary {
  border-bottom: 1px solid var(--hig-separator);
  border-radius: var(--hig-r-control) var(--hig-r-control) 0 0;
}

body.caah-hig-home .caah-lead-optional .caah-field-grid {
  padding: var(--hig-s4);
}

body.caah-hig-home .caah-consent {
  margin: 0;
  padding: var(--hig-s4);
  border-radius: var(--hig-r-control);
  background: var(--hig-fill);
}

body.caah-hig-home .caah-consent > label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--hig-s3);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .caah-consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 0;
  accent-color: var(--hig-accent);
}

body.caah-hig-home .caah-submit {
  margin: 0;
}

body.caah-hig-home .caah-submit .btn {
  width: 100%;
  font-size: 1.0625rem;
}

/* The shared band ships a green-to-orange gradient that means nothing here and
   competes with the primary action sitting on top of it. */
body.caah-hig-home .caah-cta-band {
  display: grid;
  justify-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--hig-s5);
  max-width: none;
  padding: var(--hig-s16) var(--hig-s6);
  border-radius: var(--hig-r-large);
  border: 1px solid var(--hig-separator);
  background: var(--hig-bg-elevated);
  background-image: none;
  color: var(--hig-text);
  box-shadow: var(--hig-shadow-1);
}

body.caah-hig-home .caah-cta-band > div:first-child {
  display: grid;
  gap: var(--hig-s2);
  max-width: 34rem;
}

body.caah-hig-home .caah-cta-band strong {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
}

body.caah-hig-home .caah-cta-band > div:first-child > div {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .caah-cta-band-actions {
  gap: var(--hig-s3);
  justify-content: center;
}

body.caah-hig-home .footer {
  margin-top: 0;
  padding: var(--hig-s10) 0 0;
  border-top: 1px solid var(--hig-separator);
  background: transparent;
  color: var(--hig-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

body.caah-hig-home .footer a {
  color: var(--hig-text-secondary);
  text-decoration: none;
}

body.caah-hig-home .footer a:hover {
  color: var(--hig-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.caah-hig-home .footer-nap {
  color: var(--hig-text-tertiary);
  font-size: 0.875rem;
}

/* The one other glass layer on the page, and the only other one. */
body.caah-hig-home .caah-actionbar {
  max-width: 100vw;
  box-sizing: border-box;
  gap: var(--hig-s1);
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: var(--hig-material-opaque);
  border-top: 1px solid var(--hig-separator);
  box-shadow: none;
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  body.caah-hig-home .caah-actionbar {
    background: var(--hig-material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

body.caah-hig-home .caah-actionbar-item {
  min-width: 0;
  min-height: 48px;
  border-radius: var(--hig-r-control);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hig-text-secondary);
}

body.caah-hig-home .caah-actionbar-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

body.caah-hig-home .caah-actionbar-item--primary {
  background: var(--hig-accent);
  color: var(--hig-on-accent);
}

body.caah-hig-home .caah-actionbar-item:focus-visible {
  outline: 2px solid var(--hig-focus);
  outline-offset: -2px;
}

/* The concierge launcher is a separate product surface; it is only brought as far as
   this page's radius and shadow language so it does not read as a foreign object. */
body.caah-hig-home .caah-concierge-launch {
  border-radius: 999px;
  box-shadow: var(--hig-shadow-2);
}

body.caah-hig-home .caah-concierge-panel {
  border-radius: var(--hig-r-large);
  border: 1px solid var(--hig-separator);
  box-shadow: var(--hig-shadow-2);
}

/*
 * Two shared components that arrive with their own colours and land under AA on this
 * page's ground. Both are corrected here rather than in their own stylesheets,
 * because both are used site-wide and this preview is not the place to change how
 * they look everywhere else.
 */

/* Agency credit: rgba(0,0,0,0.45) at 12px measures 3.3:1 on this ground. */
body.caah-hig-home .bitesites-credit .bitesites-credit-copy {
  color: var(--hig-text-secondary);
}

/*
 * Concierge launcher: white on a gradient whose light end is the brand #DF3942,
 * which is 4.37:1 under white — the same shortfall the accent token exists to fix.
 * Flattened to the AA-safe accent, which is also the deep end of that gradient.
 */
body.caah-hig-home .caah-concierge--live .caah-concierge-launch {
  background: var(--hig-accent);
  box-shadow: var(--hig-shadow-2);
}

body.caah-hig-home .caah-concierge--live .caah-concierge-launch:hover {
  background: var(--hig-accent-pressed);
  transform: none;
}

/* --------------------------------------------------- 13. motion, forced colors */

/*
 * Motion here is limited to press feedback, hover fills, and the toolbar slide that
 * navigation.js already drives. Nothing animates on entry.
 */
@media (prefers-reduced-motion: reduce) {
  body.caah-hig-home *,
  body.caah-hig-home *::before,
  body.caah-hig-home *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body.caah-hig-home .btn:active {
    transform: none;
  }

  /* Snap points make a reduced-motion scroll jump; let the strips scroll freely. */
  body.caah-hig-home .hig-gallery,
  body.caah-hig-home .google-reviews-scroll {
    scroll-snap-type: none;
  }
}

@media (forced-colors: active) {
  body.caah-hig-home .hig-group,
  body.caah-hig-home .hig-panel,
  body.caah-hig-home .hig-service,
  body.caah-hig-home .hig-feature,
  body.caah-hig-home .hig-hero-figure,
  body.caah-hig-home .hig-gallery-item,
  body.caah-hig-home .overall-rating-card,
  body.caah-hig-home .single-review-card,
  body.caah-hig-home .caah-cta-band,
  body.caah-hig-home .caah-lead-shell {
    border: 1px solid CanvasText;
  }

  body.caah-hig-home .site-header,
  body.caah-hig-home .caah-actionbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: Canvas;
  }

  body.caah-hig-home a:focus-visible,
  body.caah-hig-home button:focus-visible,
  body.caah-hig-home input:focus-visible,
  body.caah-hig-home select:focus-visible,
  body.caah-hig-home summary:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}