/*
 * caah-hig-base.css — the Apple-HIG design, applied to every template.
 *
 * Scoped under body.caah-hig, added by inc/caah-hig.php when caah_hig_enabled().
 * Palette, spacing grid, radii and type stack come from caah-hig-tokens.css.
 *
 * This file styles the SHARED skeleton every template on this site is built from:
 *
 *   .caah-breadcrumbs → .page-hero > .page-hero-inner → .section > .section-head
 *
 * plus the chrome (toolbar, navigation, footer, sticky bar), the control set, the
 * card families, and the lead form. Templates with sections nobody else has get
 * their own stylesheet on top; today that is the homepage and the landing pages.
 *
 * Two levers do most of the work and are worth knowing about before editing:
 *
 *   1. Section 1 rebinds the THEME's own variables to HIG tokens. --radius-lg,
 *      --shadow, --ink, --muted, --primary and the pastel accents are read by
 *      several hundred rules in style.css, so rebinding them reaches components
 *      this file never names. Prefer adding a token binding over adding a rule.
 *   2. Almost every card in this theme is one of a dozen class names with the same
 *      job. They are styled as one list rather than one at a time, which is why a
 *      new card class picks up the design by being added to that list.
 *
 * Appearance: every rule keys off html.dark-mode and only that class, matching the
 * rest of the site. A `@media (prefers-color-scheme: dark)` block here would darken
 * these surfaces while the components that key off the class stayed light.
 *
 * Structure
 *   1. Token bindings
 *   2. Page ground and rhythm
 *   3. Toolbar, navigation, mobile menu
 *   4. Type
 *   5. Controls, links, focus
 *   6. Breadcrumbs, page hero, sections
 *   7. Surfaces and grids
 *   8. Status, stats, steps, disclosures
 *   9. Media
 *  10. Lead form
 *  11. Closing band, footer, sticky bar, concierge
 *  12. Prose
 *  13. Motion, forced colors
 */

/* --------------------------------------------------------- 1. token bindings */

body.caah-hig {
  /*
   * The theme's variables, rebound. Everything in style.css that reads these now
   * draws from the HIG palette without this file naming the component.
   */
  --ink: var(--hig-text);
  --muted: var(--hig-text-secondary);
  --primary: var(--hig-accent);
  --secondary: var(--hig-accent-pressed);
  --sea: var(--hig-accent);
  --sea-dark: var(--hig-accent-pressed);
  --cream: var(--hig-bg);
  --mist: var(--hig-fill);
  --bg-light: var(--hig-bg);
  --berry: var(--hig-text);

  /* The four decorative pastels are used as section and panel backgrounds. Bound
     to neutral fills: the design gets its hierarchy from spacing and separators,
     and four competing tints undo that faster than anything else here. */
  --sky: var(--hig-fill);
  --mint: var(--hig-fill);
  --peach: var(--hig-fill);
  --sun: var(--hig-fill);

  --radius-lg: var(--hig-r-large);
  --radius-md: var(--hig-r-surface);
  --radius-sm: var(--hig-r-control);
  --shadow: var(--hig-shadow-1);
  --max-width: var(--hig-measure);

  color-scheme: light;
  font-family: var(--hig-font);
  color: var(--hig-text);
  -webkit-font-smoothing: antialiased;
}

html.dark-mode body.caah-hig {
  color-scheme: dark;
}

/* ---------------------------------------------------- 2. page ground, rhythm */

body.caah-hig {
  /* 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;
  padding-inline: 0;
  padding-top: 0;
}

html.dark-mode body.caah-hig {
  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 .page {
  gap: 0;
  padding-top: 0;
  padding-inline: var(--hig-gutter);
}

body.caah-hig .site-main {
  display: flex;
  flex-direction: column;
  gap: var(--hig-s16);
  padding-block: var(--hig-s12) var(--hig-s16);
}

@media (min-width: 900px) {
  body.caah-hig .site-main {
    gap: 96px;
    padding-block: 72px 96px;
  }
}

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

/* --------------------------------------------- 3. 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.
 *
 * This and the sticky mobile action bar are the ONLY two glass layers in the whole
 * design. Both have opaque fallbacks. No content card is glass.
 */
body.caah-hig .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 .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 .site-header {
    background: var(--hig-material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

/*
 * Brand mark. This is a two-line wordmark, not a glyph, so it needs real height
 * before the second line stops being readable — a 24px toolbar icon would render
 * "ANIMAL HOSPITAL" at about 5px.
 */
body.caah-hig .site-header .brand-logo {
  height: 52px;
  width: auto;
}

@media (min-width: 700px) {
  body.caah-hig .site-header .brand-logo {
    height: 60px;
  }
}

@media (min-width: 1150px) {
  body.caah-hig .site-header .brand-logo {
    height: 68px;
  }
}

body.caah-hig .brand {
  border-radius: var(--hig-r-control);
  flex: 0 0 auto;
}

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

/* Navigation is chrome: it recedes, and gains colour only on hover or focus. */
body.caah-hig .site-nav {
  gap: 2px;
}

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

/* A popover, not a dropdown panel. */
body.caah-hig .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 .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 .nav-dropdown-content a:hover {
  background: var(--hig-fill);
}

body.caah-hig .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 .nav-promo-menu-title {
  color: var(--hig-accent-text);
  font-weight: 600;
}

/* Icon-only controls. Each already carries aria-label and title in header.php. */
body.caah-hig .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 .header-actions .btn-icon:hover {
  background: var(--hig-fill);
  color: var(--hig-text);
  transform: none;
}

body.caah-hig .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 sized by its content, so it sets
 * documentElement.scrollWidth and the page scrolls sideways at narrow widths.
 * 100vw, not 100%: a percentage max-width on a fixed element resolves against an
 * initial containing block that Chrome grows to the scrollable overflow area, so
 * the cap moves with the overflow it is meant to prevent and never binds.
 */
body.caah-hig .mobile-menu-overlay {
  background: var(--hig-bg);
  max-width: 100vw;
  box-sizing: border-box;
}

/* And the cause: flex items default to min-width:auto, so the widest unbreakable
   label set a floor the column could not shrink below. */
body.caah-hig .mobile-site-nav,
body.caah-hig .mobile-site-nav > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

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

body.caah-hig .mobile-menu-divider {
  border-color: var(--hig-separator);
  background: var(--hig-separator);
}

body.caah-hig .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;
}

/* -------------------------------------------------------------------- 4. type */

/*
 * One family for everything. The theme pairs Fraunces (serif) headings with
 * Manrope body text; two families at these sizes weaken hierarchy rather than
 * adding to it, and the system stack costs no requests.
 *
 * Sizes step at breakpoints instead of scaling with the viewport, so browser zoom
 * and larger default text sizes both keep working.
 */
body.caah-hig h1,
body.caah-hig h2,
body.caah-hig h3,
body.caah-hig h4,
body.caah-hig h5,
body.caah-hig h6,
body.caah-hig .section-head h2 {
  font-family: var(--hig-font);
  color: var(--hig-text);
  text-wrap: balance;
}

body.caah-hig h1,
body.caah-hig .page-hero-inner h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.12;
  font-weight: 700;
}

body.caah-hig .section-head h2,
body.caah-hig h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}

body.caah-hig h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
}

body.caah-hig h4 {
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 600;
}

body.caah-hig .eyebrow,
body.caah-hig .eyebrow-tight,
body.caah-hig .blog-meta {
  margin: 0 0 var(--hig-s3);
  font-family: var(--hig-font);
  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 .lead,
body.caah-hig .section-lead {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--hig-text-secondary);
}

body.caah-hig .page-hero-inner .lead {
  max-width: 46rem;
  font-size: 1.1875rem;
  line-height: 1.5;
}

@media (min-width: 700px) {
  body.caah-hig h1,
  body.caah-hig .page-hero-inner h1 {
    font-size: 2.625rem;
  }

  body.caah-hig .section-head h2,
  body.caah-hig h2 {
    font-size: 1.875rem;
  }

  body.caah-hig .page-hero-inner .lead {
    font-size: 1.3125rem;
  }

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

@media (min-width: 1100px) {
  body.caah-hig h1,
  body.caah-hig .page-hero-inner h1 {
    font-size: 3rem;
  }
}

/* ------------------------------------------------------ 5. controls and links */

body.caah-hig .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;
  text-decoration: none;
  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 .btn.primary,
body.caah-hig 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 .btn.primary:hover,
body.caah-hig 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 .btn.primary:active,
body.caah-hig 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 .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 .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 .btn.ghost:active {
  background: var(--hig-fill-strong);
  transform: scale(0.982) translateY(0);
  box-shadow: var(--hig-shadow-sm);
}

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

/*
 * One focus treatment for the whole site, drawn with outline rather than a shadow:
 * several .btn rules 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 a:focus-visible,
body.caah-hig button:focus-visible,
body.caah-hig input:focus-visible,
body.caah-hig textarea:focus-visible,
body.caah-hig select:focus-visible,
body.caah-hig summary:focus-visible,
body.caah-hig details:focus-visible,
body.caah-hig [tabindex]:focus-visible {
  outline: 2px solid var(--hig-focus);
  outline-offset: 2px;
}

/*
 * LINK AFFORDANCE
 *
 * Something that navigates has to look like it navigates. Three shapes, applied
 * consistently everywhere:
 *
 *   a) a link inside prose is underlined. Colour alone is not an affordance, and
 *      this theme's accent is close enough to its heading ink that a bare coloured
 *      link reads as emphasis.
 *   b) a standalone "go somewhere" link carries a chevron that shifts on hover.
 *   c) a whole surface that is a link gets a pointer, a hover fill, a border that
 *      darkens, and — where the markup provides one — a visible action label
 *      inside it, so the target is named rather than guessed.
 */
body.caah-hig .page-hero-inner p a,
body.caah-hig .section-lead a,
body.caah-hig .page-content a,
body.caah-hig .caah-faq-answer a,
body.caah-hig .care-panel li a,
body.caah-hig .about-card p a,
body.caah-hig .caah-lead-copy p a {
  color: var(--hig-accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

body.caah-hig .page-hero-inner p a:hover,
body.caah-hig .section-lead a:hover,
body.caah-hig .page-content a:hover,
body.caah-hig .caah-faq-answer a:hover,
body.caah-hig .care-panel li a:hover,
body.caah-hig .about-card p a:hover,
body.caah-hig .caah-lead-copy p a:hover {
  text-decoration-thickness: 2px;
}

body.caah-hig .caah-textlink,
body.caah-hig .hig-textlink {
  color: var(--hig-accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Standalone navigation links: chevron, and it moves on hover so the affordance is
   felt as well as seen. */
body.caah-hig .text-link,
body.caah-hig .service-card-more,
body.caah-hig .hig-service-more,
body.caah-hig .review-link,
body.caah-hig .caah-related a,
body.caah-hig .hig-section-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hig-accent-text);
  font-family: var(--hig-font);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

body.caah-hig .text-link::after,
body.caah-hig .service-card-more::after,
body.caah-hig .hig-service-more::after,
body.caah-hig .review-link::after,
body.caah-hig .hig-section-more a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.8px solid currentColor;
  border-top: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease, margin-left 0.15s ease;
}

body.caah-hig .text-link:hover,
body.caah-hig .service-card-more:hover,
body.caah-hig .hig-service-more:hover,
body.caah-hig .review-link:hover,
body.caah-hig .hig-section-more a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.caah-hig .text-link:hover::after,
body.caah-hig .service-card-more:hover::after,
body.caah-hig .hig-service-more:hover::after,
body.caah-hig .review-link:hover::after,
body.caah-hig .hig-section-more a:hover::after {
  margin-left: 2px;
}

/* ------------------------------------ 6. breadcrumbs, page hero, sections */

body.caah-hig .caah-breadcrumbs {
  max-width: var(--hig-measure);
  width: 100%;
  margin: 0 auto;
  font-size: 0.875rem;
  color: var(--hig-text-tertiary);
}

body.caah-hig .caah-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.caah-hig .caah-breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--hig-separator-strong);
}

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

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

body.caah-hig .caah-breadcrumbs [aria-current="page"] {
  color: var(--hig-text);
}

/*
 * The page hero stops being a tinted, shadowed card floating on a tinted page. It
 * is the top of the page: content on the ground, with a hairline under it doing the
 * separating that the card used to do.
 */
body.caah-hig .page-hero {
  max-width: var(--hig-measure);
  margin: 0 auto;
  padding: 0 0 var(--hig-s10);
  border-radius: 0;
  border-bottom: 1px solid var(--hig-separator);
  background: none;
  box-shadow: none;
}

body.caah-hig .page-hero:has(.page-hero-figure),
body.caah-hig .page-hero:has(.caah-hero-figure),
body.caah-hig .page-hero.has-hero-figure {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hig-s8);
  align-items: center;
}

@media (min-width: 960px) {
  body.caah-hig .page-hero:has(.page-hero-figure),
  body.caah-hig .page-hero:has(.caah-hero-figure),
  body.caah-hig .page-hero.has-hero-figure {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: var(--hig-s12);
  }
}

body.caah-hig .page-hero::before,
body.caah-hig .page-hero::after,
body.caah-hig .hero::before,
body.caah-hig .hero::after {
  display: none;
}

body.caah-hig .page-hero-inner {
  max-width: 52rem;
  padding: 0;
}

body.caah-hig .page-hero:has(.page-hero-figure) .page-hero-inner,
body.caah-hig .page-hero:has(.caah-hero-figure) .page-hero-inner,
body.caah-hig .page-hero.has-hero-figure .page-hero-inner {
  max-width: none;
}

body.caah-hig .page-hero-figure,
body.caah-hig .caah-hero-figure {
  margin: 0;
  border-radius: var(--hig-r-large);
  overflow: hidden;
  border: 1px solid var(--hig-card-border);
  background: var(--hig-fill);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-lg);
  aspect-ratio: 4 / 3;
  position: relative;
  isolation: isolate;
  width: 100%;
}

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

/*
 * style.css carries three dark-mode rules that force the hero's heading, lead and
 * eyebrow to DARK colours:
 *
 *   html.dark-mode .page-hero h1      { color: #3a2f3e }
 *   html.dark-mode .page-hero .lead   { color: #1f1c1a }
 *   html.dark-mode .page-hero .eyebrow{ color: #5d5b62 }
 *
 * They are correct for the design they were written for: the hero used to be a
 * light tinted card that stayed light in dark mode, so its text had to stay dark.
 * This design makes the hero transparent, which turns all three into dark text on
 * a dark ground — 1.1:1 on four templates. Overridden by element count rather than
 * by !important, and in both appearances so the two cannot drift.
 *
 * Kept scoped to .page-hero: the same rules on a genuinely light surface elsewhere
 * are still doing their job.
 */
body.caah-hig .page-hero h1,
body.caah-hig .page-hero h2,
body.caah-hig .page-hero h3 {
  color: var(--hig-text);
}

body.caah-hig .page-hero p,
body.caah-hig .page-hero .lead,
body.caah-hig .page-hero li {
  color: var(--hig-text-secondary);
}

body.caah-hig .page-hero .eyebrow {
  color: var(--hig-text-tertiary);
}

body.caah-hig .section {
  max-width: var(--hig-measure);
  margin: 0 auto;
  gap: var(--hig-s8);
}

body.caah-hig .section-head {
  max-width: 46rem;
  display: grid;
  gap: var(--hig-s3);
}

body.caah-hig .section-head h2 {
  margin: 0;
}

body.caah-hig .section-head .section-lead {
  margin: 0;
}

/* --------------------------------------------------------- 7. surfaces, grids */

/*
 * Every card in the theme, styled once. A tactile elevated container with subtle
 * specular top highlight, one radius, and multi-stop ambient shadow.
 */
body.caah-hig .service-card,
body.caah-hig .contact-card,
body.caah-hig .care-panel,
body.caah-hig .about-card,
body.caah-hig .blog-card,
body.caah-hig .hero-card,
body.caah-hig .booking-card,
body.caah-hig .staff-card,
body.caah-hig .idexx-card,
body.caah-hig .care-credit-card,
body.caah-hig .rebate-info-card,
body.caah-hig .rebate-tips-card,
body.caah-hig .rebate-product-card,
body.caah-hig .rebate-snapshot,
body.caah-hig .caah-checklist-cta,
body.caah-hig .overall-rating-card,
body.caah-hig .single-review-card,
body.caah-hig .vaccine-feature,
body.caah-hig .team-row {
  border: 1px solid var(--hig-card-border);
  border-radius: var(--hig-r-large);
  background: var(--hig-card-bg);
  background-image: none;
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
  padding: var(--hig-s6);
  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 .service-card h3,
body.caah-hig .contact-card h3,
body.caah-hig .care-panel h3,
body.caah-hig .about-card h3,
body.caah-hig .idexx-card h3,
body.caah-hig .rebate-info-card h3 {
  margin: 0 0 var(--hig-s2);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

body.caah-hig .service-card p,
body.caah-hig .contact-card p,
body.caah-hig .care-panel p,
body.caah-hig .about-card p,
body.caah-hig .blog-card p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hig-text-secondary);
}

/*
 * No card inside a card.
 *
 * .caah-service-aside and .caah-next-steps look like cards in the markup but are
 * wrappers around cards, so giving them the surface treatment produced a bordered
 * panel inside a bordered panel on the service pages. They are containers here, and
 * their children keep the chrome.
 */
body.caah-hig .caah-service-aside,
body.caah-hig .caah-next-steps {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  gap: var(--hig-s5);
}

/* Where a card genuinely does sit inside one — the checklist call-to-action inside
   an article — it drops to a fill, which separates it without a second frame. */
body.caah-hig .entry-content .caah-checklist-cta {
  border: 0;
  border-radius: var(--hig-r-surface);
  background: var(--hig-fill);
  box-shadow: none;
  padding: var(--hig-s5);
}

/* A card that is itself a link. */
body.caah-hig a.service-card,
body.caah-hig .service-grid a,
body.caah-hig .blog-card a.text-link {
  cursor: pointer;
}

body.caah-hig a.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--hig-s3);
  height: 100%;
  color: inherit;
  text-decoration: none;
}

body.caah-hig a.service-card: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 a.service-card:hover .service-card-icon {
  background: rgba(197, 32, 41, 0.08);
  color: var(--hig-accent-text);
  transform: scale(1.04);
}

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

body.caah-hig a.service-card:hover .service-card-more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

body.caah-hig .service-card-more {
  margin-top: auto;
  padding-top: var(--hig-s2);
}

body.caah-hig .service-card-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 .service-card-icon svg {
  width: 22px;
  height: 22px;
}

body.caah-hig .blog-card {
  padding: 0;
  overflow: hidden;
  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 .blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-hover);
  border-color: var(--hig-card-border-hover);
}

body.caah-hig .blog-card-inner {
  padding: var(--hig-s6);
  gap: var(--hig-s3);
}

body.caah-hig .blog-card h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

body.caah-hig .blog-card h2 a {
  color: var(--hig-text);
  text-decoration: none;
}

body.caah-hig .blog-card h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Grids: one gap scale everywhere. */
body.caah-hig .card-grid,
body.caah-hig .contact-grid,
body.caah-hig .about-columns,
body.caah-hig .blog-grid,
body.caah-hig .care-grid,
body.caah-hig .idexx-grid,
body.caah-hig .caah-two-col,
body.caah-hig .rebate-products,
body.caah-hig .team-list {
  gap: var(--hig-s5);
}

@media (min-width: 900px) {
  body.caah-hig .card-grid,
  body.caah-hig .contact-grid,
  body.caah-hig .about-columns,
  body.caah-hig .blog-grid,
  body.caah-hig .care-grid,
  body.caah-hig .idexx-grid,
  body.caah-hig .caah-two-col,
  body.caah-hig .rebate-products,
  body.caah-hig .team-list {
    gap: var(--hig-s6);
  }
}

/*
 * Hero media container and media figures.
 * Large squircle radius, hairline border, specular highlight, and multi-stop ambient shadow.
 */
body.caah-hig .caah-hero-media,
body.caah-hig .caah-media-figure {
  margin: 0;
  border-radius: var(--hig-r-large);
  overflow: hidden;
  border: 1px solid var(--hig-card-border);
  background: var(--hig-fill);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-lg);
  aspect-ratio: 16 / 9;
  position: relative;
  isolation: isolate;
}

@media (max-width: 760px) {
  body.caah-hig .caah-hero-media,
  body.caah-hig .caah-media-figure {
    aspect-ratio: 3 / 2;
  }
}

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

body.caah-hig .caah-media-figure figcaption {
  padding: var(--hig-s3) var(--hig-s4);
  font-size: 0.875rem;
  color: var(--hig-text-secondary);
  background: var(--hig-card-bg);
  border-top: 1px solid var(--hig-separator);
}

/* --------------------------------------- 8. status, stats, steps, disclosures */

body.caah-hig .pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hig-fill-strong);
  color: var(--hig-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*
 * Status colour, and ONLY where the pill reports opening status.
 *
 * `.pill` is also used for informational badges — "Official rebate portal",
 * "Receipt upload required" — and painting those the same green as "Open today"
 * makes one colour mean two things in the same visual language, which is the
 * failure mode HIG's colour rules exist to prevent. Badges keep the neutral fill
 * above; only the pills inside a status context are coloured, and each of those
 * spells its state out in words as well.
 */
body.caah-hig .caah-status .pill:not(.warning):not(.closed),
body.caah-hig .caah-nap-status .pill:not(.warning):not(.closed),
body.caah-hig .hero-card > .pill:not(.warning):not(.closed),
body.caah-hig .hig-status .pill:not(.warning):not(.closed),
body.caah-hig .hig-panel-title .pill:not(.warning):not(.closed) {
  background: rgba(27, 110, 82, 0.14);
  color: #1B6E52;
}

body.caah-hig .caah-status .pill.warning,
body.caah-hig .caah-nap-status .pill.warning,
body.caah-hig .hero-card > .pill.warning,
body.caah-hig .hig-status .pill.warning,
body.caah-hig .hig-panel-title .pill.warning {
  background: rgba(240, 181, 106, 0.24);
  color: #8A5300;
}

body.caah-hig .pill.closed {
  background: var(--hig-fill-strong);
  color: var(--hig-text-secondary);
}

html.dark-mode body.caah-hig .caah-status .pill:not(.warning):not(.closed),
html.dark-mode body.caah-hig .caah-nap-status .pill:not(.warning):not(.closed),
html.dark-mode body.caah-hig .hero-card > .pill:not(.warning):not(.closed),
html.dark-mode body.caah-hig .hig-status .pill:not(.warning):not(.closed),
html.dark-mode body.caah-hig .hig-panel-title .pill:not(.warning):not(.closed) {
  background: rgba(95, 209, 165, 0.16);
  color: #5FD1A5;
}

html.dark-mode body.caah-hig .caah-status .pill.warning,
html.dark-mode body.caah-hig .caah-nap-status .pill.warning,
html.dark-mode body.caah-hig .hero-card > .pill.warning,
html.dark-mode body.caah-hig .hig-status .pill.warning,
html.dark-mode body.caah-hig .hig-panel-title .pill.warning {
  background: rgba(240, 181, 106, 0.18);
  color: #F0B56A;
}

body.caah-hig .caah-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hig-s3);
  margin: var(--hig-s6) 0 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--hig-text-secondary);
}

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

body.caah-hig .stat-strip {
  gap: var(--hig-s6);
  padding-top: var(--hig-s5);
  border-top: 1px solid var(--hig-separator);
}

body.caah-hig .stat-number {
  font-family: var(--hig-font);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--hig-text);
}

body.caah-hig .stat-label {
  font-size: 0.9375rem;
  color: var(--hig-text-secondary);
}

body.caah-hig .care-step > span,
body.caah-hig .caah-steps li::before {
  background: var(--hig-fill-strong);
  color: var(--hig-text);
  border-radius: 999px;
  font-family: var(--hig-font);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.caah-hig .caah-hours-list li,
body.caah-hig .contact-card li {
  border-color: var(--hig-separator);
}

body.caah-hig .label {
  color: var(--hig-text-tertiary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Disclosures. A disclosure that does not show its state is a heading that happens
   to be clickable, so every one of them gets a chevron. */
body.caah-hig .caah-faq-item,
body.caah-hig .vaccine-details,
body.caah-hig .caah-lead-optional {
  border: 1px solid var(--hig-separator);
  border-radius: var(--hig-r-surface);
  background: var(--hig-bg-elevated);
  box-shadow: none;
  padding: 0;
}

body.caah-hig .caah-faq-item > summary,
body.caah-hig .vaccine-details > summary {
  display: flex;
  align-items: center;
  gap: var(--hig-s3);
  min-height: 52px;
  padding: var(--hig-s3) var(--hig-s5);
  border-radius: var(--hig-r-surface);
  font-size: 1.0625rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

body.caah-hig .caah-faq-item > summary::-webkit-details-marker,
body.caah-hig .vaccine-details > summary::-webkit-details-marker {
  display: none;
}

body.caah-hig .caah-faq-item > summary::after,
body.caah-hig .vaccine-details > 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 .caah-faq-item[open] > summary::after,
body.caah-hig .vaccine-details[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

body.caah-hig .caah-faq-item > summary:hover,
body.caah-hig .vaccine-details > summary:hover {
  background: var(--hig-fill);
}

body.caah-hig .caah-faq-item[open] > summary,
body.caah-hig .vaccine-details[open] > summary {
  border-bottom: 1px solid var(--hig-separator);
  border-radius: var(--hig-r-surface) var(--hig-r-surface) 0 0;
}

body.caah-hig .caah-faq-answer,
body.caah-hig .vaccine-details-body {
  margin: 0;
  padding: var(--hig-s5);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hig-text-secondary);
}

/* -------------------------------------------------------------------- 9. media */

body.caah-hig .caah-media-figure,
body.caah-hig .hero-bg-image,
body.caah-hig .caah-404-figure,
body.caah-hig .rebate-hero-media {
  border-radius: var(--hig-r-large);
  overflow: hidden;
  border: 1px solid var(--hig-separator);
  background: var(--hig-fill);
  box-shadow: none;
}

body.caah-hig .carousel-item {
  border-radius: var(--hig-r-surface);
  overflow: hidden;
  border: 1px solid var(--hig-separator);
  box-shadow: none;
}

body.caah-hig figure {
  margin-inline: 0;
}

/* The figure's own fill showed as a strip under images whose height did not land
   exactly on the container. */
body.caah-hig .caah-media-figure img,
body.caah-hig .caah-media-figure picture,
body.caah-hig .caah-404-figure img,
body.caah-hig .caah-404-figure picture,
body.caah-hig .carousel-item img,
body.caah-hig .carousel-item picture {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------- 10. lead form */

/*
 * The lead form splits into two columns when — and only when — it has the room.
 *
 * The shared shell keys its split off a 900px VIEWPORT width, so any placement in a
 * narrow column got two columns anyway: in a landing-page hero at 1440px that left
 * the inputs about 85px wide, wrapped "Mobile number" onto two lines, and wrapped
 * the submit label. A container query asks the question that actually matters —
 * how wide is this form? — and is why the same component now works in a hero
 * sidebar, a full-width section, and a phone without a placement-specific override.
 *
 * Single column is the default, so a browser without container queries gets the
 * layout that always fits rather than the one that sometimes does.
 */
body.caah-hig .caah-lead-section {
  container-type: inline-size;
  container-name: caah-lead;
}

body.caah-hig .caah-lead-shell {
  grid-template-columns: 1fr;
  gap: var(--hig-s8);
  padding: var(--hig-s8);
  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-lg);
}

@container caah-lead (min-width: 760px) {
  body.caah-hig .caah-lead-shell {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--hig-s12);
  }
}

/* Below the width where two fields fit side by side, the field grid stacks too. */
@container caah-lead (max-width: 420px) {
  body.caah-hig .caah-field-grid {
    grid-template-columns: 1fr;
  }
}

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

body.caah-hig .caah-lead-copy .lead {
  margin: 0;
  font-size: 1.0625rem;
}

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

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

body.caah-hig .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 .caah-lead-trust {
  margin: 0;
  gap: var(--hig-s2);
}

body.caah-hig .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 .caah-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hig-s4);
}

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

body.caah-hig .caah-field {
  display: grid;
  gap: 6px;
  margin: 0;
  /* Without this the field with no hint stretches its own rows to match the one
     that has one, and the two inputs in a row stop sharing a baseline. */
  grid-auto-rows: min-content;
  align-content: start;
}

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

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

body.caah-hig .caah-field input,
body.caah-hig .caah-field select,
body.caah-hig .caah-field textarea {
  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 .caah-field input,
html.dark-mode body.caah-hig .caah-field select,
html.dark-mode body.caah-hig .caah-field textarea {
  /* Pure black fields on a near-black card read as holes rather than as inputs. */
  background: var(--hig-fill);
  border-color: var(--hig-separator-strong);
  color: var(--hig-text);
}

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

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

body.caah-hig .caah-field.has-error input,
body.caah-hig .caah-field.has-error select {
  border-color: var(--hig-accent);
  /* Never colour alone: .caah-field-error carries the text and the shared renderer
     marks the input aria-invalid. */
  box-shadow: inset 3px 0 0 var(--hig-accent);
}

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

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

body.caah-hig .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 .caah-lead-errors-head {
  margin: 0 0 var(--hig-s2);
  font-weight: 600;
}

body.caah-hig .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 .caah-lead-optional > summary:hover {
  background: var(--hig-fill);
}

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

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

body.caah-hig .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 .caah-lead-optional .caah-field-grid {
  padding: var(--hig-s4);
}

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

body.caah-hig .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 .caah-consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 0;
  accent-color: var(--hig-accent);
}

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

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

/* -------------------------- 11. closing band, footer, sticky bar, concierge */

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

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

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

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

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

body.caah-hig .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 .footer a {
  color: var(--hig-text-secondary);
  text-decoration: none;
}

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

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

/* The agency credit's own colour, rgba(0,0,0,0.45) at 12px, measures 3.3:1 here. */
body.caah-hig .bitesites-credit .bitesites-credit-copy {
  color: var(--hig-text-secondary);
}

/* The second, and last, glass layer. */
body.caah-hig .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: 0 -1px 0 var(--hig-separator), 0 -4px 16px rgba(28, 26, 25, 0.04);
}

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

body.caah-hig .caah-actionbar-item {
  /* Flex items default to min-width:auto, so the widest label set a floor the bar
     could not shrink below — 358px inside a 320px viewport. */
  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 .caah-actionbar-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

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

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

/*
 * The concierge is a separate product surface, brought only as far as this design's
 * radius and shadow language. Its launcher was white on a gradient whose light end
 * is the brand #DF3942 — 4.37:1, the same shortfall the accent token exists to fix.
 */
body.caah-hig .caah-concierge--live .caah-concierge-launch {
  background: var(--hig-accent);
  border-radius: 999px;
  box-shadow: var(--hig-shadow-2);
}

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

body.caah-hig .caah-concierge-panel {
  border-radius: var(--hig-r-large);
  border: 1px solid var(--hig-card-border);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-lg);
}

/*
 * The post and service body.
 *
 * style.css gives .entry-content a hardcoded `background: #fff` with no dark
 * variant. Under a token-driven design that is the worst kind of survivor: the
 * tokens turn the text light, the card stays white, and the page renders white on
 * white in dark mode on exactly the templates least likely to be screenshotted.
 * It is also the "pure white surface glowing inside a dark interface" HIG names
 * directly. Bound to the elevated surface token, so it follows the appearance.
 */
body.caah-hig .entry-content {
  background: var(--hig-card-bg);
  color: var(--hig-text-secondary);
  border: 1px solid var(--hig-card-border);
  border-radius: var(--hig-r-large);
  box-shadow: var(--hig-card-highlight), var(--hig-shadow-md);
  padding: var(--hig-s8);
  gap: var(--hig-s5);
  font-size: 1.0625rem;
  line-height: 1.65;
}

body.caah-hig .entry-content h2,
body.caah-hig .entry-content h3,
body.caah-hig .entry-content h4,
body.caah-hig .entry-content strong {
  font-family: var(--hig-font);
  color: var(--hig-text);
}

body.caah-hig .entry-content h2 {
  margin-top: var(--hig-s6);
  font-size: 1.5rem;
}

body.caah-hig .entry-content h3 {
  margin-top: var(--hig-s4);
  font-size: 1.1875rem;
}

body.caah-hig .entry-content img {
  border-radius: var(--hig-r-surface);
  border: 1px solid var(--hig-separator);
}

/*
 * The map frame, for the same reason: a white panel around light map tiles is
 * correct in light mode and a glowing rectangle in dark. Only the tiles stay light,
 * which is what a map is. The banner overlay keeps its own white — it sits ON the
 * tiles, not on the page ground.
 */
body.caah-hig .google-maps-iframe,
body.caah-hig .map-panel {
  background: var(--hig-bg-elevated);
  border: 1px solid var(--hig-separator);
  border-radius: var(--hig-r-large);
  box-shadow: none;
  overflow: hidden;
}

/* ------------------------------------------------------------------ 12. prose */

body.caah-hig .page-content,
body.caah-hig .caah-faq-answer {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--hig-text-secondary);
}

body.caah-hig .page-content > * + * {
  margin-top: var(--hig-s5);
}

body.caah-hig .page-content h2 {
  margin-top: var(--hig-s12);
  font-size: 1.5rem;
}

body.caah-hig .page-content h3 {
  margin-top: var(--hig-s8);
}

body.caah-hig .page-content h2,
body.caah-hig .page-content h3,
body.caah-hig .page-content h4,
body.caah-hig .page-content strong {
  color: var(--hig-text);
}

body.caah-hig .page-content img {
  border-radius: var(--hig-r-surface);
  border: 1px solid var(--hig-separator);
}

body.caah-hig .page-content blockquote {
  margin: 0;
  padding: var(--hig-s4) var(--hig-s6);
  border-left: 3px solid var(--hig-separator-strong);
  color: var(--hig-text);
  font-style: normal;
}

body.caah-hig .page-content ul,
body.caah-hig .page-content ol {
  padding-left: var(--hig-s6);
}

body.caah-hig .page-content li + li {
  margin-top: var(--hig-s2);
}

body.caah-hig .pagination a,
body.caah-hig .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hig-separator);
  border-radius: var(--hig-r-control);
  background: var(--hig-bg-elevated);
  color: var(--hig-text);
  text-decoration: none;
}

body.caah-hig .pagination .page-numbers.current {
  background: var(--hig-accent);
  border-color: transparent;
  color: var(--hig-on-accent);
}

/*
 * ---------------- dark-mode rules written for surfaces this design changed ----
 *
 * caah-conversion.css carries a block headed "dark mode: light hero card". Its
 * stated premise is that ".page-hero deliberately keeps its light gradient in dark
 * mode", so it scopes the status line, the pills and the meta row back to
 * light-theme colours inside the hero. style.css does the same for .blog-card,
 * which it keeps white in dark mode.
 *
 * Both premises were true and are not any more: this design makes the hero
 * transparent and the blog card an elevated dark surface. The rules that protected
 * those light surfaces now put dark text on a dark ground, and several of them use
 * !important, so matching them takes !important back. Neutralised as a group, with
 * the premise recorded, because the next person to read #C52029 in a dark-mode rule
 * deserves to know why it was right once.
 */
html.dark-mode body.caah-hig .page-hero .caah-status,
html.dark-mode body.caah-hig .page-hero .caah-status-text {
  color: var(--hig-text-secondary);
}

html.dark-mode body.caah-hig .page-hero .caah-status-notice,
html.dark-mode body.caah-hig .page-hero .caah-fine-print,
html.dark-mode body.caah-hig .page-hero .caah-lp-proof {
  color: var(--hig-text-secondary);
}

html.dark-mode body.caah-hig .page-hero .caah-lp-proof li {
  background: var(--hig-fill);
}

html.dark-mode body.caah-hig .page-hero .pill:not(.warning):not(.closed) {
  color: #5FD1A5 !important;
  background: rgba(95, 209, 165, 0.16);
}

html.dark-mode body.caah-hig .page-hero .pill.warning {
  color: #F0B56A !important;
  background: rgba(240, 181, 106, 0.18);
}

html.dark-mode body.caah-hig .page-hero .pill.closed {
  color: var(--hig-text-secondary) !important;
  background: var(--hig-fill-strong);
}

/* `html.dark-mode .pill { color:#fff !important }` was written for pills that keep
   a light fill in dark mode. These do not. */
html.dark-mode body.caah-hig .pill {
  color: var(--hig-text);
}

html.dark-mode body.caah-hig .caah-status .pill:not(.warning):not(.closed),
html.dark-mode body.caah-hig .hig-status .pill:not(.warning):not(.closed),
html.dark-mode body.caah-hig .hig-panel-title .pill:not(.warning):not(.closed),
html.dark-mode body.caah-hig .caah-nap-status .pill:not(.warning):not(.closed) {
  color: #5FD1A5 !important;
}

html.dark-mode body.caah-hig .caah-status .pill.warning,
html.dark-mode body.caah-hig .hig-status .pill.warning,
html.dark-mode body.caah-hig .hig-panel-title .pill.warning,
html.dark-mode body.caah-hig .caah-nap-status .pill.warning {
  color: #F0B56A !important;
}

html.dark-mode body.caah-hig .pill.closed {
  color: var(--hig-text-secondary) !important;
}

/* --primary is a FILL colour; as link text on a dark card it measures 3.4:1. The
   accent text token is the one tuned for that job. */
html.dark-mode body.caah-hig .text-link,
html.dark-mode body.caah-hig .blog-card .text-link,
html.dark-mode body.caah-hig .service-card-more,
html.dark-mode body.caah-hig .review-link {
  color: var(--hig-accent-text) !important;
}

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

@media (prefers-reduced-motion: reduce) {
  body.caah-hig *,
  body.caah-hig *::before,
  body.caah-hig *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

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

@media (forced-colors: active) {
  body.caah-hig .service-card,
  body.caah-hig .contact-card,
  body.caah-hig .care-panel,
  body.caah-hig .about-card,
  body.caah-hig .blog-card,
  body.caah-hig .caah-lead-shell,
  body.caah-hig .caah-faq-item,
  body.caah-hig .banner,
  body.caah-hig .caah-cta-band {
    border: 1px solid CanvasText;
  }

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

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