/*
 * PK Services LLC, Version B: clients/pk-services-llc/site-b/styles.css
 *
 * REBUILT FROM SCRATCH (queue item PW3, part 1, 2026-10-10). Forge's own
 * design for Version B, composed only from component-library/ (RAILS f).
 * Every page loads THIS file. It shipped under a second name beside the
 * retired Version B stylesheet while PW3 to PW3f rebuilt the pages one at
 * a time; PW3g deleted the retired sheet and gave this one its name.
 * Each copy below keeps its library file's rules verbatim with the comments
 * stripped (the header comment in the library file is the provenance), so
 * the shell fits the CI reviewer's payload budget.
 *
 * Layout order:
 *   1. component-library/tokens.css (rules verbatim, comments stripped: the locked base scale)
 *   2. This client's :root block (the ONLY place hex may appear), from
 *      brand-kit.md: #1F5E3B / #63A85B plus the derived neutrals.
 *   3. Page glue (reset, phone floor guard, skip link).
 *   4. Component CSS, verbatim copies, each under its own banner.
 *   5. Client glue that adjusts a copy without editing it in place
 *      (step count, logo row, version switcher).
 *   6. component-library/polish-layer.css, LAST (README rule 13).
 */

/* ==== component-library/tokens.css (rules verbatim, comments stripped: the locked base scale) ==== */
:root {

  --text-display: clamp(3.5rem, 7.5vw, 6rem);
  --text-hero: clamp(2.5rem, 5vw, 3.75rem);
  --text-h2: clamp(2rem, 3.5vw, 2.25rem);
  --text-h3: 1.375rem;
  --text-lead: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  --leading-tight: 1.15;
  --leading-normal: 1.5;

  --font-display-editorial: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, ui-serif, serif;
  --font-body-editorial: Avenir, "Avenir Next", "Century Gothic", Futura, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-glow-shape: 0 8px 40px 0;
  --shadow-float: 0 56px 112px rgba(0, 0, 0, 0.32);

  --radius-xs: 0.125rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 9999px;

  --touch-target-min: 2.75rem;
  --container-max: 72rem;

  --look-card-radius: var(--radius-md);
  --look-control-radius: var(--radius-sm);
  --look-pill-radius: var(--radius-pill);
  --look-card-shadow: var(--shadow-card);
  --look-card-lift: var(--shadow-hover);
  --look-border-width: 1px;
  --look-heading-weight: 700;
  --look-heading-tracking: normal;
  --look-section-padding: var(--space-16);
}

[data-style="crisp"] {
  --look-card-radius: var(--radius-sm);
  --look-control-radius: var(--radius-sm);
  --look-pill-radius: var(--radius-sm);
  --look-card-shadow: none;
  --look-card-lift: var(--shadow-card);
  --look-border-width: 1px;
  --look-heading-weight: 700;
  --look-heading-tracking: -0.02em;
  --look-section-padding: var(--space-16);
}

[data-style="soft"] {
  --look-card-radius: var(--radius-lg);
  --look-control-radius: var(--radius-pill);
  --look-pill-radius: var(--radius-pill);
  --look-card-shadow: var(--shadow-card);
  --look-card-lift: var(--shadow-hover);
  --look-border-width: 0;
  --look-heading-weight: 600;
  --look-heading-tracking: normal;
  --look-section-padding: var(--space-16);
}

[data-style="editorial"] {
  --look-card-radius: var(--radius-xs);
  --look-control-radius: var(--radius-xs);
  --look-pill-radius: var(--radius-xs);
  --look-card-shadow: none;
  --look-card-lift: none;
  --look-border-width: 1px;
  --look-heading-weight: 600;
  --look-heading-tracking: normal;
  --look-section-padding: var(--space-24);
}


/* ==== PK Services palette (brand-kit.md; owner-confirmed 2026-08-16) ==== */
:root {
  --color-accent: #1F5E3B;        /* Deep Forest Green: CTA fills, links, number markers */
  --color-accent-bright: #63A85B; /* Bright Green: decorative fills and hairlines only */
  --color-accent-deep: #1F5E3B;   /* the polish sweep stays on the primary green: white text needs it */
  --color-ring: #1F5E3B;          /* focus ring */
  --color-text: #1F2933;          /* charcoal: headings and body */
  --color-text-muted: #44505A;    /* derived neutral, 7.0:1 on white */
  --color-border: #D7DCE0;        /* derived hairline neutral */
  --color-surface: #F3F7F4;       /* derived alternating-section tint */
  --color-white: #FFFFFF;
  --color-scrim: var(--color-text);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-surface);
}

/* ==== page glue (tokens and client vars only) ==== */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: var(--text-body); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-white); overflow-x: clip; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: -9999px; top: auto; display: inline-flex; align-items: center; min-height: var(--touch-target-min); padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-white); border-radius: var(--radius-sm); text-decoration: none; }
.skip-link:focus-visible { left: var(--space-2); top: var(--space-2); z-index: 100; outline: 2px solid var(--color-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==== component-library/navigation/header-editorial-call-line.css (rules verbatim, comments stripped; every rebuilt page) ==== */
.header-editorial-call-line {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.header-editorial-call-line__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 48rem) {
  .header-editorial-call-line__container {
    padding-inline: var(--space-8);
  }
}

.header-editorial-call-line__masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.header-editorial-call-line__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
  min-height: var(--touch-target-min);
}

.header-editorial-call-line__mark {
  height: var(--space-12);
  width: auto;
  display: block;
}

.header-editorial-call-line__wordmark {
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.header-editorial-call-line__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-6);
}

.header-editorial-call-line__call {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding-block: var(--space-2);
  padding-inline: var(--space-1);
  color: var(--color-text);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  text-decoration: none;
}

.header-editorial-call-line__call-label {
  color: var(--color-text-muted);
}

.header-editorial-call-line__call-number {
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.header-editorial-call-line__call:hover .header-editorial-call-line__call-number {
  color: var(--color-accent);
}

.header-editorial-call-line__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding-inline: var(--space-6);
  padding-block: var(--space-2);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
}

.header-editorial-call-line__cta:hover {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
}

.header-editorial-call-line__nav {
  padding-block: var(--space-3);
}

.header-editorial-call-line__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-editorial-call-line__nav-item {
  display: flex;
}

.header-editorial-call-line__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding-inline: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  text-decoration: none;
}

.header-editorial-call-line__nav-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.header-editorial-call-line__nav-link[aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.header-editorial-call-line__logo:focus-visible,
.header-editorial-call-line__call:focus-visible,
.header-editorial-call-line__cta:focus-visible,
.header-editorial-call-line__nav-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  .header-editorial-call-line__masthead {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .header-editorial-call-line__logo,
  .header-editorial-call-line__actions {
    justify-content: center;
  }

  .header-editorial-call-line__mark {
    height: calc(var(--space-8) + var(--space-2));
  }
}

.header-editorial-call-line__menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  margin-block: var(--space-3);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  color: var(--color-text);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: var(--leading-tight);
  list-style: none;
  cursor: pointer;
}

.header-editorial-call-line__menu-button::-webkit-details-marker {
  display: none;
}

.header-editorial-call-line__menu-button:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

@media (max-width: 47.99rem) {
  .header-editorial-call-line__masthead:has(~ .header-editorial-call-line__menu) {
    flex-direction: row;
    align-items: center;
    text-align: start;
  }

  .header-editorial-call-line__masthead:has(~ .header-editorial-call-line__menu) .header-editorial-call-line__actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .header-editorial-call-line__masthead:has(~ .header-editorial-call-line__menu) .header-editorial-call-line__call {
    display: none;
  }

  .header-editorial-call-line__menu .header-editorial-call-line__nav {
    padding-block: 0 var(--space-3);
  }

  .header-editorial-call-line__menu .header-editorial-call-line__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .header-editorial-call-line__menu .header-editorial-call-line__nav-link {
    width: 100%;
    font-size: var(--text-body);
  }
}

@media (min-width: 48rem) {
  @supports selector(::details-content) {
    .header-editorial-call-line__menu-button {
      display: none;
    }

    .header-editorial-call-line__menu::details-content {
      content-visibility: visible;
    }
  }
}

/* ==== component-library/heroes/photo-value-band-hero.css (rules verbatim, comments stripped; Home hero) ==== */
.photo-value-band-hero,
.photo-value-band-hero *,
.photo-value-band-hero *::before,
.photo-value-band-hero *::after {
  box-sizing: border-box;
}

.photo-value-band-hero {
  position: relative;
  color: var(--color-white);
}

.photo-value-band-hero__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: calc(var(--space-32) * 3);
  background: var(--color-scrim, var(--color-text));
}

.photo-value-band-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-value-band-hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-scrim, var(--color-text));
  opacity: 0.55;
}

.photo-value-band-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-16) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.photo-value-band-hero__headline {
  margin: 0;
  max-width: calc(var(--space-32) * 5);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.photo-value-band-hero__lead {
  font-style: italic;
  font-weight: 700;
}

.photo-value-band-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--look-pill-radius, var(--radius-pill));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 150ms ease;
}

.photo-value-band-hero .photo-value-band-hero__cta:hover {
  background: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
  color: var(--color-white);
  transform: none;
}

.photo-value-band-hero__cta:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.photo-value-band-hero__band {
  padding: var(--space-6) var(--space-4);
  background: var(--color-text);
  color: var(--color-white);
}

.photo-value-band-hero__values {
  list-style: none;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-32) + var(--space-16)), 1fr));
  gap: var(--space-4);
}

.photo-value-band-hero__value {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
  width: 100%;
  padding: var(--space-6);
}

.photo-value-band-hero__value-icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
}

.photo-value-band-hero__value-icon svg {
  width: var(--space-6);
  height: var(--space-6);
}

.photo-value-band-hero__value-label {
  font-size: var(--text-body);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.photo-value-band-hero__value-line {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .photo-value-band-hero__stage {
    min-height: calc(var(--space-32) * 4 + var(--space-2));
  }

  .photo-value-band-hero__container {
    padding: var(--space-16) var(--space-8);
  }

  .photo-value-band-hero__headline {
    font-size: var(--text-hero);
  }

  .photo-value-band-hero__band {
    padding-inline: var(--space-8);
  }
}

/* ==== component-library/navigation/audience-nav.css (rules verbatim, comments stripped; Home audience router) ==== */
.audience-nav {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-4);
}

.audience-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.audience-nav__prompt {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.audience-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-32) + var(--space-16) + var(--space-8)), 1fr));
  width: 100%;
  gap: var(--space-2);
}

.audience-nav__item {
  display: flex;
}

.audience-nav__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  box-sizing: border-box;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  background: var(--color-white);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.audience-nav__link:hover {
  border-color: var(--color-accent);
}

.audience-nav__link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.audience-nav__link-label {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.audience-nav__link-desc {
  font-size: var(--text-small);
  line-height: var(--leading-tight);
  color: var(--color-text-muted);
}

.audience-nav__link--current {
  border-color: var(--color-accent);
}

.audience-nav__link--current .audience-nav__link-label {
  color: var(--color-accent);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .audience-nav__link {
    transition: none;
  }
}

/* ==== component-library/cards/service-menu-icon-grid.css (rules verbatim, comments stripped; Home services) ==== */
.service-menu-icon-grid,
.service-menu-icon-grid *,
.service-menu-icon-grid *::before,
.service-menu-icon-grid *::after {
  box-sizing: border-box;
}

.service-menu-icon-grid {
  padding-block: var(--space-16);
  padding-inline: var(--space-4);
  background: var(--color-bg);
  color: var(--color-text);
}

.service-menu-icon-grid--alt {
  background: var(--color-bg-alt);
}

@media (min-width: 48rem) {
  .service-menu-icon-grid {
    padding-block: var(--space-24);
    padding-inline: var(--space-8);
  }
}

.service-menu-icon-grid__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.service-menu-icon-grid__headline {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  font-weight: var(--look-heading-weight, 700);
  color: var(--color-text);
}

.service-menu-icon-grid__intro {
  margin: 0 0 var(--space-4);
  max-width: 48ch;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.service-menu-icon-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4);
  justify-content: center;
}

.service-menu-icon-grid__item {
  display: flex;
  min-width: 0;
}

.service-menu-icon-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-6);
  border-radius: var(--look-card-radius, var(--radius-md));
  border: var(--look-border-width, 1px) solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--look-card-shadow, var(--shadow-card));
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.service-menu-icon-grid__card:hover,
.service-menu-icon-grid__card:focus-visible {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
  transform: translateY(-2px);

  border-color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
}

.service-menu-icon-grid__card:focus-visible {
  outline: 2px solid var(--color-ring, var(--color-accent));
  outline-offset: 2px;
}

.service-menu-icon-grid__icon {
  width: var(--space-6);
  height: var(--space-6);
  flex-shrink: 0;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.service-menu-icon-grid__title {
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  font-weight: 700;
  color: var(--color-text);
}

.service-menu-icon-grid__line {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

@media (max-width: 47.99rem) {
  .service-menu-icon-grid__list {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .service-menu-icon-grid__card {
    padding: var(--space-4);
    max-width: 100%;
  }
}

/* ==== component-library/process/booking-steps-explainer.css (rules verbatim, comments stripped; Home process, the polish layer connects its steps) ==== */
.booking-steps,
.booking-steps *,
.booking-steps *::before,
.booking-steps *::after {
  box-sizing: border-box;
}

.booking-steps {
  --stroke-thin: 0.125rem;
  padding: var(--space-24) var(--space-6);
  color: var(--color-text);
}

.booking-steps__inner {
  width: 100%;
}

.booking-steps__header {
  text-align: center;
  margin: 0 0 var(--space-12);
}

.booking-steps__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.booking-steps__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.booking-steps__lead {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.booking-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.booking-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.booking-steps__marker-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
}

.booking-steps__item:not(:last-child) .booking-steps__marker-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--space-6));
  height: var(--stroke-thin);
  background: var(--color-border);
  transform: translateY(-50%);
}

.booking-steps__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-lead);
  font-weight: 700;
}

.booking-steps__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.booking-steps__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.booking-steps__label-index {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.booking-steps__desc {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.booking-steps__item--current .booking-steps__marker {
  box-shadow: 0 0 0 var(--space-1) var(--color-ring);
}

.booking-steps__item--current .booking-steps__label {
  color: var(--color-accent);
}

.booking-steps__item--done .booking-steps__marker {
  background: var(--color-text-muted);
  color: transparent;
  position: relative;
}

.booking-steps__item--done .booking-steps__marker::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white, #fff);
}

.booking-steps__item--done .booking-steps__label,
.booking-steps__item--done .booking-steps__desc {
  color: var(--color-text-muted);
}

.booking-steps__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

.booking-steps__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-12);
  padding: 0 var(--space-6);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-body);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--look-card-shadow, var(--shadow-card));
  transition: box-shadow 0.15s ease;
}

.booking-steps__cta-link:hover,
.booking-steps__cta-link:focus-visible {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
}

.booking-steps__cta-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .booking-steps__list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .booking-steps__item:not(:last-child) .booking-steps__marker-wrap::after {
    display: none;
  }

  .booking-steps__item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-4);
  }

  .booking-steps__marker-wrap {
    width: auto;
  }

  .booking-steps__label {
    align-items: flex-start;
    text-align: left;
  }
}

.booking-steps .sr-only {

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

/* ==== component-library/pricing-cards/savings-math-band.css (rules verbatim, comments stripped; Home savings math) ==== */
.savings-math {
  background: var(--color-surface);
  padding: var(--space-16) var(--space-4);
}

.savings-math__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.savings-math__header {
  max-width: 42rem;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.savings-math__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.savings-math__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.savings-math__lead {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.savings-math__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-6);
}

.savings-math__fact {
  background: var(--color-white);
  border: var(--look-border-width, 1px) solid var(--color-border);
  border-radius: var(--look-card-radius, var(--radius-md));
  padding: var(--space-6);
  box-shadow: var(--look-card-shadow, var(--shadow-card));
}

@media (min-width: 60rem) {
  .savings-math__fact {
    display: grid;
    grid-row: span 3;
    grid-template-rows: auto auto 1fr;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }
}

.savings-math__figure {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-accent);
}

.savings-math__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.savings-math__detail {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.savings-math__note {
  margin: var(--space-8) auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ==== component-library/trust/local-service-area-band.css (rules verbatim, comments stripped; Home service area) ==== */
.local-service-area-band,
.local-service-area-band *,
.local-service-area-band *::before,
.local-service-area-band *::after {
  box-sizing: border-box;
}

.local-service-area-band {
  padding-block: var(--space-12);
  padding-inline: var(--space-4);
  background: var(--color-bg-alt, var(--color-surface, var(--color-white)));
  color: var(--color-text);
}

.local-service-area-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
}

@media (min-width: 60rem) {
  .local-service-area-band--with-map .local-service-area-band__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.local-service-area-band__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  min-width: 0;
}

.local-service-area-band__heading {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
}

.local-service-area-band__lead {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.local-service-area-band__cities {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}

.local-service-area-band__city {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  border: var(--look-border-width, 1px) solid var(--color-border);
  border: var(--look-border-width, 1px) solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
  background: var(--color-white);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.local-service-area-band__drive-time {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.local-service-area-band__map {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.local-service-area-band__map-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--look-card-radius, var(--radius-md));
  border: var(--look-border-width, 1px) solid var(--color-border);
  box-shadow: var(--look-card-shadow, var(--shadow-card));
}

/* ==== component-library/cta/photo-closing-card.css (rules verbatim, comments stripped; Home close) ==== */
.photo-closing-card,
.photo-closing-card *,
.photo-closing-card *::before,
.photo-closing-card *::after {
  box-sizing: border-box;
}

.photo-closing-card {
  padding-block: var(--space-16);
  padding-inline: var(--space-4);
  color: var(--color-text);
}

.photo-closing-card__card {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.photo-closing-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.photo-closing-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.photo-closing-card__heading {
  margin: 0;
  max-width: calc(var(--space-32) * 3);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.photo-closing-card__actions {
  width: 100%;
  max-width: calc(var(--space-32) * 3);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-32) + var(--space-8))), 1fr));
  gap: var(--space-3);
}

.photo-closing-card .photo-closing-card__book,
.photo-closing-card .photo-closing-card__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 150ms ease;
}

.photo-closing-card .photo-closing-card__book {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}

.photo-closing-card .photo-closing-card__call {
  border: 1px solid var(--color-accent);
  background: var(--color-white);
  color: var(--color-accent);
}

.photo-closing-card .photo-closing-card__book:hover {
  background: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
  color: var(--color-white);
  transform: none;
}

.photo-closing-card .photo-closing-card__call:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-white));
  color: var(--color-accent);
  transform: none;
}

.photo-closing-card__book:focus-visible,
.photo-closing-card__call:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.photo-closing-card__icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

@media (min-width: 48rem) {
  .photo-closing-card__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex-direction: row;
    gap: 0;
    min-height: calc(var(--space-32) * 3);
    border-radius: var(--radius-lg);
  }

  .photo-closing-card__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .photo-closing-card__text {
    position: relative;
    z-index: 1;
    isolation: isolate;
    flex: 0 0 100%;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-6);
    text-align: start;
  }

  .photo-closing-card__text::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-scrim, var(--color-text));
    opacity: 0.6;
  }

  .photo-closing-card__heading {
    color: var(--color-white);
  }

  .photo-closing-card__actions {
    max-width: calc(var(--space-32) * 4);
    margin-inline: 0;
  }
}

@media (min-width: 60rem) {
  .photo-closing-card__text {
    flex-basis: 50%;
    padding: var(--space-12);
  }
}

/* ==== component-library/footers/footer-minimal-legal.css (rules verbatim, comments stripped; every rebuilt page) ==== */
.footer-minimal,
.footer-minimal *,
.footer-minimal *::before {
  box-sizing: border-box;
}

.footer-minimal {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-12);
  padding-inline: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
}

@media (min-width: 48rem) {
  .footer-minimal {
    padding-inline: var(--space-8);
  }
}

.footer-minimal__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.footer-minimal__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-8);
  width: 100%;
}

.footer-minimal__col {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-minimal__name {
  margin: 0;
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  font-weight: 700;
  color: var(--color-text);
}

.footer-minimal__tagline {
  margin: 0;
  max-width: 36ch;
  color: var(--color-text-muted);
}

.footer-minimal__col-heading {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.footer-minimal__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-minimal__line {
  display: block;
  margin: 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.footer-minimal__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--touch-target-min);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

.footer-minimal__link:hover {
  color: var(--color-accent);
}

.footer-minimal__link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.footer-minimal__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.footer-minimal__legal-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-minimal__legal-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  border-radius: var(--radius-sm);
}

.footer-minimal__legal-link:hover {
  color: var(--color-accent);
}

.footer-minimal__legal-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.footer-minimal__copyright {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 47.99rem) {
  .footer-minimal__columns {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-minimal__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.footer-minimal--dark {
  background: var(--color-text);
  border-top-color: var(--color-text);
  color: var(--color-white);
}

.footer-minimal--dark .footer-minimal__name,
.footer-minimal--dark .footer-minimal__tagline,
.footer-minimal--dark .footer-minimal__col-heading,
.footer-minimal--dark .footer-minimal__line,
.footer-minimal--dark .footer-minimal__link,
.footer-minimal--dark .footer-minimal__legal-link,
.footer-minimal--dark .footer-minimal__copyright {
  color: var(--color-white);
}

.footer-minimal--dark .footer-minimal__bottom {
  border-top-color: color-mix(in srgb, var(--color-white) 25%, transparent);
}

.footer-minimal--dark .footer-minimal__link:hover,
.footer-minimal--dark .footer-minimal__legal-link:hover {
  color: var(--color-accent);
}

/* ==== component-library/cta/scroll-triggered-cta-bar.css (rules verbatim, comments stripped; every rebuilt page whose ask it repeats) ==== */
.scroll-triggered-cta-bar,
.scroll-triggered-cta-bar *,
.scroll-triggered-cta-bar *::before,
.scroll-triggered-cta-bar *::after {
  box-sizing: border-box;
}

.scroll-triggered-cta-bar__sentinel {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.scroll-triggered-cta-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-white);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);

  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.scroll-triggered-cta-bar--visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.2s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-triggered-cta-bar,
  .scroll-triggered-cta-bar--visible {
    transition: none;
  }
}

.scroll-triggered-cta-bar__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  min-height: calc(var(--touch-target-min) + var(--space-2));
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.scroll-triggered-cta-bar__text {
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  line-height: var(--leading-tight);
}

.scroll-triggered-cta-bar__name {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text);
}

.scroll-triggered-cta-bar__line {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.scroll-triggered-cta-bar__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-decoration: none;
  box-shadow: var(--look-card-shadow, var(--shadow-card));
  transition: box-shadow 0.15s ease;
}

.scroll-triggered-cta-bar__cta:hover {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
  background: color-mix(in srgb, var(--color-accent) 88%, var(--color-text));
}

.scroll-triggered-cta-bar__cta:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

@media (max-width: 47.99rem) {
  .scroll-triggered-cta-bar {
    display: none;
  }
  .scroll-triggered-cta-bar--phones-too {
    display: block;
  }
  .scroll-triggered-cta-bar--phones-too .scroll-triggered-cta-bar__line {
    display: none;
  }
}


/* ==== component-library/heroes/niche-callout-hero.css (rules verbatim, comments stripped; Contractors hero, --ground-photo variant) ==== */
.niche-callout-hero,
.niche-callout-hero *,
.niche-callout-hero *::before,
.niche-callout-hero *::after {
  box-sizing: border-box;
}

.niche-callout-hero {
  padding: var(--space-16) var(--space-4);
  color: var(--color-text);
  text-align: center;
}

@media (min-width: 48rem) {
  .niche-callout-hero {
    padding: var(--space-24) var(--space-8);
  }
}

.niche-callout-hero__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.niche-callout-hero__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.niche-callout-hero__headline {
  margin: 0;
  max-width: 22ch;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  font-weight: 800;
  color: var(--color-text);
}

.niche-callout-hero__niche {
  color: var(--color-accent);
}

.niche-callout-hero__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) 0;
}

.niche-callout-hero__strip-item {
  padding: 0 var(--space-4);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-weight: 600;
  color: var(--color-text);
}

.niche-callout-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: var(--leading-normal);
  text-decoration: none;
  box-shadow: var(--look-card-shadow, var(--shadow-card));
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.niche-callout-hero__cta:hover,
.niche-callout-hero__cta:focus-visible {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
  transform: translateY(-1px);
}

.niche-callout-hero__cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 47.99rem) {
  .niche-callout-hero__cta {
    width: 100%;
  }
}

.niche-callout-hero__reassurance {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.niche-callout-hero__logos {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
}

.niche-callout-hero__logos:empty {
  display: none;
}

.niche-callout-hero__logos img {
  display: block;
  height: var(--space-8);
  width: auto;
  max-width: 100%;
}

.niche-callout-hero__bg-photo {
  display: none;
}

.niche-callout-hero--ground-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-white);
}

.niche-callout-hero--ground-photo .niche-callout-hero__bg-photo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.niche-callout-hero--ground-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-scrim, var(--color-text));
  opacity: 0.5;
}

.niche-callout-hero--ground-photo .niche-callout-hero__container {
  position: relative;
  z-index: 2;
}

@media (min-width: 48rem) {
  .niche-callout-hero--ground-photo {
    min-height: clamp(30rem, 72vh, 46rem);
    display: flex;
    align-items: center;
  }
}

.niche-callout-hero--ground-photo .niche-callout-hero__eyebrow,
.niche-callout-hero--ground-photo .niche-callout-hero__headline,
.niche-callout-hero--ground-photo .niche-callout-hero__strip-item,
.niche-callout-hero--ground-photo .niche-callout-hero__reassurance {
  color: var(--color-white);
}

.niche-callout-hero--ground-photo .niche-callout-hero__niche {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}


/* ==== component-library/faq/b2b-objections-faq.css (rules verbatim, comments stripped; Contractors questions) ==== */

.b2b-faq {
  padding: var(--space-24) var(--space-4);
}

.b2b-faq__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.b2b-faq__heading {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.b2b-faq__lead {
  margin: 0;

  margin-top: calc(-1 * var(--space-6));
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.b2b-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.b2b-faq__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--look-card-radius, var(--radius-md));
}

.b2b-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--touch-target-min);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-normal);
  color: var(--color-text);
  cursor: pointer;

  list-style: none;
}

.b2b-faq__question::-webkit-details-marker {
  display: none;
}

.b2b-faq__question:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.b2b-faq__indicator {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: var(--text-lead);
  line-height: 1;
  transition: transform 0.2s ease;
}

.b2b-faq__indicator::before {
  content: "+";
}

.b2b-faq__item[open] .b2b-faq__indicator {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .b2b-faq__indicator {
    transition: none;
  }
}

.b2b-faq__answer {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.b2b-faq__answer p {
  margin: 0;
}

.b2b-faq__cta-row {
  display: flex;
  justify-content: center;
}

.b2b-faq__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-8);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-body);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--look-control-radius, var(--radius-sm));
}

.b2b-faq__cta:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}


/* ==== component-library/heroes/call-first-quote-hero.css (rules verbatim, comments stripped; Homeowners hero) ==== */
.call-first-quote-hero {
  padding: var(--space-24) var(--space-6);
}

.call-first-quote-hero__container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.call-first-quote-hero__promise {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.call-first-quote-hero__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.call-first-quote-hero__headline {
  margin: 0;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.call-first-quote-hero__subhead {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.call-first-quote-hero__preempt {
  margin: 0;
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--color-accent);
}

.call-first-quote-hero__cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.call-first-quote-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-lead);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--look-card-shadow, var(--shadow-card));
}

.call-first-quote-hero__cta:hover {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
}

.call-first-quote-hero__cta:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.call-first-quote-hero__alt {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.call-first-quote-hero__alt-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
}

.call-first-quote-hero__alt-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.call-first-quote-hero__assurance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.call-first-quote-hero__assurance-item {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.call-first-quote-hero__assurance-item::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  flex-shrink: 0;
}

@media (max-width: 48rem) {
  .call-first-quote-hero {
    padding: var(--space-16) var(--space-4);
  }
}

/* ==== component-library/heroes/card-on-photo-hero.css (rules verbatim, comments stripped; Property Managers hero) ==== */
.card-on-photo-hero,
.card-on-photo-hero *,
.card-on-photo-hero *::before,
.card-on-photo-hero *::after {
  box-sizing: border-box;
}

.card-on-photo-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32) var(--space-4);
  overflow: hidden;
}

.card-on-photo-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--card-on-photo-hero-focal-point, center);
}

.card-on-photo-hero__card {
  position: relative;
  width: 40%;
  min-width: 20rem;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface, var(--color-white));
  color: var(--color-text);
  box-shadow: var(--shadow-modal);
  text-align: center;
}

.card-on-photo-hero__headline {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  font-weight: var(--look-heading-weight, 700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.card-on-photo-hero__body {
  margin: 0;
  max-width: 32ch;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.card-on-photo-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--look-control-radius, var(--radius-sm));
  background: var(--color-text);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: var(--look-card-shadow, var(--shadow-card));
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.card-on-photo-hero__cta:hover,
.card-on-photo-hero__cta:focus-visible {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
  transform: translateY(-1px);
}

.card-on-photo-hero__cta:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

@media (max-width: 47.99rem) {
  .card-on-photo-hero {
    padding: var(--space-16) var(--space-4);
  }

  .card-on-photo-hero__card {
    width: 85%;
    min-width: 0;
    max-width: none;
  }

  .card-on-photo-hero__cta {
    width: 100%;
  }
}


/* ==== component-library/heroes/editorial-statement-hero.css (rules verbatim, comments stripped; FAQ hero, --ground-muted) ==== */
.editorial-statement-hero,
.editorial-statement-hero *,
.editorial-statement-hero *::before,
.editorial-statement-hero *::after {
  box-sizing: border-box;
}

.editorial-statement-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) var(--space-4);
  color: var(--color-text);
  text-align: center;
}

@media (min-width: 48rem) {
  .editorial-statement-hero {
    padding: var(--space-24) var(--space-8);
  }
}

.editorial-statement-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.editorial-statement-hero--ground-muted {
  background: var(--color-surface);
}

.editorial-statement-hero__bg-photo {
  display: none;
}

.editorial-statement-hero--ground-photo .editorial-statement-hero__bg-photo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.editorial-statement-hero--ground-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-scrim, var(--color-text));
  opacity: 0.5;
}

.editorial-statement-hero--ground-photo {
  color: var(--color-white);
}

.editorial-statement-hero--ground-photo .editorial-statement-hero__container {
  position: relative;
  z-index: 2;
}

@media (min-width: 48rem) {
  .editorial-statement-hero--ground-photo {
    min-height: clamp(30rem, 72vh, 46rem);
    display: flex;
    align-items: center;
  }
}

.editorial-statement-hero--ground-photo .editorial-statement-hero__body {
  color: var(--color-white);
}

.editorial-statement-hero__headline {
  margin: 0;
  max-width: 20ch;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  font-weight: 500;
  color: inherit;
}

.editorial-statement-hero__emphasis {
  font-weight: 700;
}

.editorial-statement-hero__body {
  margin: 0;
  max-width: 48ch;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.editorial-statement-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: var(--leading-normal);
  text-decoration: none;
  box-shadow: var(--look-card-shadow, var(--shadow-card));
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.editorial-statement-hero__cta:hover,
.editorial-statement-hero__cta:focus-visible {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
  transform: translateY(-1px);
}

.editorial-statement-hero__cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.editorial-statement-hero__cta--text {
  background: transparent;
  color: var(--color-accent);
  padding: var(--space-2) 0;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  box-shadow: none;
}

.editorial-statement-hero__cta--text:hover,
.editorial-statement-hero__cta--text:focus-visible {
  box-shadow: none;
  transform: none;
  color: var(--color-accent);
}

.editorial-statement-hero--ground-photo .editorial-statement-hero__cta--text {
  color: var(--color-white);
}

.editorial-statement-hero__photo-strip {
  width: 100%;
  margin-top: var(--space-4);
}

.editorial-statement-hero__photo-strip:empty {
  display: none;
}

.editorial-statement-hero__photo-strip img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--look-card-shadow, var(--shadow-card));
}


/* ==== component-library/heroes/two-tone-ribbon-hero.css (rules verbatim, comments stripped; Contact hero) ==== */
.two-tone-ribbon-hero,
.two-tone-ribbon-hero *,
.two-tone-ribbon-hero *::before,
.two-tone-ribbon-hero *::after {
  box-sizing: border-box;
}
.two-tone-ribbon-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--space-24) + var(--space-8)) var(--space-16);
  background: var(--color-surface, var(--color-white));
  color: var(--color-text);
}
.two-tone-ribbon-hero__ribbon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 0;
  width: 100%;
  height: var(--space-24);
  overflow: hidden;
  pointer-events: none;
}
.two-tone-ribbon-hero__ribbon::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-16) * -1) calc(var(--space-16) * -1) calc(var(--space-16) * -1) 0;
  background:
    linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--color-accent) 35%, var(--color-white)) 30%, transparent 55%),
    linear-gradient(80deg, transparent 15%, var(--color-accent) 45%, color-mix(in srgb, var(--color-accent) 60%, var(--color-white)) 70%, transparent 95%),
    linear-gradient(120deg, transparent 35%, color-mix(in srgb, var(--color-accent) 20%, var(--color-white)) 65%, var(--color-accent) 100%);
  transform: rotate(-12deg);
  filter: blur(var(--space-4));
}
.two-tone-ribbon-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.two-tone-ribbon-hero__content {
  max-width: calc(var(--container-max) - var(--space-32));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.two-tone-ribbon-hero__label {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.two-tone-ribbon-hero__label:empty {
  display: none;
}
.two-tone-ribbon-hero__headline {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.two-tone-ribbon-hero__rest {
  color: var(--color-text-muted);
}
.two-tone-ribbon-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
}
.two-tone-ribbon-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-12);
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--look-control-radius, var(--radius-sm));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 150ms ease;
}
.two-tone-ribbon-hero .two-tone-ribbon-hero__cta:hover {
  background: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
  color: var(--color-white);
  transform: none;
}
.two-tone-ribbon-hero__cta:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}
.two-tone-ribbon-hero__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  color: var(--color-text);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.two-tone-ribbon-hero__link:hover {
  text-decoration-thickness: 2px;
}
.two-tone-ribbon-hero__link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}
@media (min-width: 48rem) {
  .two-tone-ribbon-hero {
    padding-block: calc(var(--space-24) + var(--space-8)) var(--space-24);
  }
  .two-tone-ribbon-hero__container {
    padding-inline: var(--space-8);
  }
  .two-tone-ribbon-hero__headline {
    font-size: var(--text-hero);
  }
  .two-tone-ribbon-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    width: auto;
  }
}
@media (min-width: 60rem) {
  .two-tone-ribbon-hero {
    padding-block-start: calc(var(--space-32) + var(--space-8));
  }
  .two-tone-ribbon-hero__ribbon {
    width: 50%;
    height: var(--space-32);
  }
}


/* ==== component-library/cta/contact-lines-block.css (rules verbatim, comments stripped; Contact lines) ==== */
.contact-lines {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--look-card-radius, var(--radius-md));
  padding: var(--space-8) var(--space-6);
  margin: var(--space-8) 0;
}
.contact-lines__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-lines__heading {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--color-text);
}
.contact-lines__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-lines__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.contact-lines__label {
  min-width: var(--space-16);
  font-weight: 700;
  color: var(--color-text-muted);
}
.contact-lines__value {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.contact-lines__value:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}
.contact-lines__cta-row {
  margin-top: var(--space-2);
}
.contact-lines__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-8);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-body);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--look-control-radius, var(--radius-sm));
}
.contact-lines__cta:hover {
  text-decoration: underline;
}
.contact-lines__cta:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}


/* ==== client glue: adjusts the copies above without editing them in place ==== */
/* booking-steps-explainer HOW TO REUSE step 4: PK's process is three steps. */
@media (min-width: 48rem) {
  .booking-steps .booking-steps__list { grid-template-columns: repeat(3, 1fr); }
}
/* The steps sit on the surface tint so they read apart from the white card rows around them. */
.booking-steps { background: var(--color-surface); }
/* Grounds alternate down the page: tinted steps, white savings band, tinted service area. */
.savings-math { background: var(--color-white); }
/* Six service cards sit 3 + 3 from 60rem, never a row of 4 over a row of 2 (the auto-fit default at 1280px). */
@media (min-width: 60rem) {
  .service-menu-icon-grid .service-menu-icon-grid__list { grid-template-columns: repeat(3, 1fr); }
}
/* Contractors hero: a dark ground under the photo, so the white text has a dark backdrop while the photo loads and to any contrast check. */
.niche-callout-hero--ground-photo { background: var(--color-text); }
/* Contractors hero reads left-aligned like Home's, so the eye runs straight from the headline down to the ask instead of to the header's pill above it. */
.niche-callout-hero { text-align: left; }
.niche-callout-hero .niche-callout-hero__container { align-items: flex-start; }
.niche-callout-hero .niche-callout-hero__strip { justify-content: flex-start; }
.niche-callout-hero .niche-callout-hero__strip-item { padding: 0 var(--space-6) 0 0; }
/* Contractors: the questions block sits on the tint, between the white savings band and the closing card. */
.b2b-faq { background: var(--color-surface); }
/* Homeowners hero: the plain call-first hero sits on the surface tint, so it reads as its own band under the white header and above the white service cards. */
.call-first-quote-hero { background: var(--color-surface); }
/* Property Managers hero (Jon's layout, no photo): the brand's light surface tint, a white card so it lifts off that tint, and a tighter band than the photo version needed (Brandon, 2026-10-13). */
.card-on-photo-hero { background: var(--color-surface); padding-block: var(--space-16); }
.card-on-photo-hero .card-on-photo-hero__card { background: var(--color-white); }
@media (max-width: 47.99rem) {
  .card-on-photo-hero { padding-block: var(--space-8); }
}
/* The owner logo IS the wordmark (brand-kit.md), so the mark carries the name alone. */
.header-editorial-call-line .header-editorial-call-line__mark { max-width: 100%; }

.version-switcher { padding-block: var(--space-6); background: var(--color-text); color: var(--color-white); border-top: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent); }
.version-switcher__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); }
.version-switcher__label { margin: 0; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-white) 72%, transparent); }
.version-switcher__list { display: grid; grid-template-columns: repeat(2, minmax(7rem, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.version-switcher__link { display: inline-flex; width: 100%; align-items: center; justify-content: center; min-height: var(--touch-target-min); padding: 0 var(--space-4); border: 1px solid color-mix(in srgb, var(--color-white) 45%, transparent); border-radius: var(--radius-pill); color: var(--color-white); font-weight: 700; font-size: var(--text-small); text-decoration: none; }
.version-switcher__link--current { background: var(--color-white); color: var(--color-text); border-color: var(--color-white); }
.version-switcher__link:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.version-switcher--hidden { display: none; }
@media (min-width: 48rem) {
  .version-switcher__pill { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 60; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-text); color: var(--color-white); border-radius: var(--radius-pill); box-shadow: var(--shadow-hover); font-size: var(--text-small); }
  .version-switcher__pill a { color: var(--color-white); font-weight: 700; text-decoration: none; min-height: var(--touch-target-min); display: inline-flex; align-items: center; padding-inline: var(--space-2); border-radius: var(--radius-pill); }
  .version-switcher__pill a[aria-current="true"] { background: var(--color-white); color: var(--color-text); }
}
@media (max-width: 47.99rem) { .version-switcher__pill { display: none; } }

/* PK owner logo in the footer and the scroll bar (Pete, 2026-10-10: "can the top page logo
   be the same at the bottom? In all places that say PK can the new logo be in that same
   place?"). Same file and true 360x67 dimensions as the header mark; height-led sizing. */
.footer-minimal__logo-link {
  display: inline-block;
  min-height: var(--touch-target-min);
}

.footer-minimal__logo {
  display: block;
  height: var(--space-12);
  width: auto;
  max-width: 100%;
}

.scroll-triggered-cta-bar__logo {
  display: block;
  height: var(--space-8);
  width: auto;
}

/* ==== component-library/imagery/proof-of-work-photo-band.css (rules verbatim) ==== */
/* ============================================================================
   COMPONENT: Proof-of-Work Photo Band (.photo-band)
   Source: documented pattern (in-repo derivation, 2026-08-14, queue item X)
   -- no live-site extraction; every value is a chosen tokens.css default,
   flagged as such in the .html header. Full provenance, brain citations,
   the TRUTH LINE and HOW TO REUSE live in proof-of-work-photo-band.html --
   read them there before mounting this for a client.

   Requires tokens.css first, plus the client's own :root color tokens
   (--color-text, --color-text-muted). No color of its own beyond those --
   the photographs carry the color; the band stays quiet around them
   (krug_scannable_design: keep the noise down).
   ============================================================================ */

.photo-band,
.photo-band *,
.photo-band *::before,
.photo-band *::after {
  box-sizing: border-box;
}

.photo-band {
  padding: var(--space-16) var(--space-4);
}

.photo-band__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.photo-band__heading {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.photo-band__lead {
  margin: var(--space-3) 0 0;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ---- THE COLUMN LAW (rewritten 2026-08-14, queue item Z, from an operator
   live review: a 4-photo mount on the old rigid 3-column grid stranded one
   photo beside two empty cells). Flex-wrap with justify-content:center is
   the whole mechanism: full rows fill the width exactly as the old grid
   did, and a SHORT final row (remainder 1 or 2 of a 3-up band, or the odd
   last photo of a 2-up band) centers itself natively -- at every count, at
   every breakpoint, with a wide photo anywhere in the set, with zero
   nth-child arithmetic to drift. The count rule lives in HOW TO REUSE
   step 5: portrait counts of 4 or fewer that are EVEN take the __grid--2up
   modifier (two balanced columns, no short row at all); everything else
   rides the 3-up default and lets the centering handle any remainder. ---- */
.photo-band__grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* the anti-stranding rule: a short final row
                              centers instead of hugging the left edge
                              beside white space */
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
}

.photo-band__item {
  margin: 0;
  /* 3-up default: each item takes a third of the row minus its share of
     the two gaps. flex-grow stays 0 so a short row's items keep the same
     width as a full row's (growing them would make the last row's photos
     LARGER than the rest -- a different lie than stranding them). */
  flex: 0 0 calc((100% - 2 * var(--space-4)) / 3);
}

/* 2-up variant: for an even portrait count of 4 or fewer (HOW TO REUSE
   step 5's table). Two balanced columns, no short row possible. */
.photo-band__grid--2up .photo-band__item {
  flex-basis: calc((100% - var(--space-4)) / 2);
}

/* Exactly ONE landscape photo may span the full band width (HOW TO REUSE
   step 5); portraits fill the rows above or below it. */
.photo-band__item--wide {
  flex-basis: 100%;
}

.photo-band__img {
  display: block;
  width: 100%;
  height: auto; /* full frame, never cropped: the TRUTH LINE forbids hiding
                   what a real photo shows, so no object-fit trimming */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Tablet: two columns; an odd last photo centers itself (same
   justify-content mechanism, no extra rule). The wide item's full row is
   RE-ASSERTED because this media rule sits later in the cascade than the
   base __item--wide rule at equal specificity -- without the re-assertion
   the wide photo would silently drop to a half-row here (caught in queue
   item Z's self-review round 1). */
@media (max-width: 60rem) {
  .photo-band__item,
  .photo-band__grid--2up .photo-band__item {
    flex-basis: calc((100% - var(--space-4)) / 2);
  }

  .photo-band__item--wide {
    flex-basis: 100%;
  }
}

/* Mobile: one column, every photo full width. */
@media (max-width: 40rem) {
  .photo-band__item,
  .photo-band__grid--2up .photo-band__item {
    flex-basis: 100%;
  }
}

/* ==== component-library/cards/founder-about-card.css (rules verbatim) ==== */
/*
 * component-library/cards/founder-about-card.css
 * Pairs with founder-about-card.html. Read that file's header first:
 * the provenance (mkemanagement.com source file, `.kicker` + `.founder`,
 * read 2026-09-07), the extracted-value -> token table and the brain
 * citations live there. Import component-library/tokens.css BEFORE
 * this file.
 *
 * Color reads from the CONSUMING CLIENT's own :root (--color-bg,
 * --color-text, --color-text-muted, --color-accent, --color-white).
 * This file defines zero colors itself. On the dark card the accent is
 * mixed toward white so a dark client accent still contrasts.
 * letter-spacing in em and the rem breakpoint fall under tokens.css's
 * documented exemptions.
 */

.founder-about-card,
.founder-about-card *,
.founder-about-card *::before,
.founder-about-card *::after {
  box-sizing: border-box;
}

/* Light section: its own vertical padding (layout floor). */
.founder-about-card {
  padding-block: var(--space-16);
  padding-inline: var(--space-4);
  background: var(--color-bg);
  color: var(--color-text);
}

.founder-about-card__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);              /* MKE .prooflayout margin-top 38px */
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ---- kicker + H2 above the card ---- */
.founder-about-card__intro {
  max-width: 46em;                  /* MKE .kicker max-width 46em */
}

.founder-about-card__kicker,
.founder-about-card__card-kicker {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: var(--leading-normal);
  color: var(--color-accent);
}

.founder-about-card__heading {
  margin: var(--space-3) 0 0;
  font-size: var(--text-h2);
  font-weight: var(--look-heading-weight, 700);
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--color-text);
}

/* ---- the dark card ---- */
.founder-about-card__card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  width: 100%;
  max-width: 48rem;                 /* MKE max-width 780px; a cap, never a fixed width */
  padding: var(--space-8);
  border-radius: var(--look-card-radius, var(--radius-md));
  background: var(--color-text);
  color: var(--color-white);
}

/* Optional photo slot: small, round, never stretches. Deleting the
   <img> closes the gap; nothing else changes. */
.founder-about-card__photo {
  flex: 0 0 auto;
  width: var(--space-24);
  height: var(--space-24);
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius-pill);
  /* Fallback first for browsers without color-mix(). */
  border: 2px solid var(--color-white);
  border: 2px solid color-mix(in srgb, var(--color-accent) 40%, var(--color-white));
}

.founder-about-card__body {
  flex: 1 1 0;
  min-width: 0;
}

/* Card kicker and dots: accent lightened toward white for contrast on
   the dark ground (MKE used a light second brand color here). */
.founder-about-card__card-kicker {
  letter-spacing: 0.1em;
  color: var(--color-white);
  color: color-mix(in srgb, var(--color-accent) 40%, var(--color-white));
}

.founder-about-card__statement {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--color-white);
}

.founder-about-card__text {
  margin: var(--space-3) 0 0;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}

.founder-about-card__facts {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.founder-about-card__fact {
  position: relative;
  margin: 0 0 var(--space-2);
  padding-left: var(--space-6);     /* MKE 22px */
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: color-mix(in srgb, var(--color-white) 87%, transparent);
}

.founder-about-card__fact:last-child {
  margin-bottom: 0;
}

.founder-about-card__fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;                      /* MKE top: .55em, optical centering on the first line */
  width: var(--space-2);            /* MKE 8px dot */
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  background: color-mix(in srgb, var(--color-accent) 40%, var(--color-white));
}

/* Phone floor: photo stacks above the text, card padding tightens,
   nothing outruns 360px. */
@media (max-width: 47.99rem) {
  .founder-about-card {
    padding-block: var(--space-12);
  }

  .founder-about-card__card {
    flex-direction: column;
    padding: var(--space-6);
  }
}

/* ==== component-library/heroes/proof-stacked-split-hero.css (rules verbatim) ==== */
/*
 * component-library/heroes/proof-stacked-split-hero.css
 *
 * Styles for proof-stacked-split-hero.html. Read that file's header first:
 * the provenance (operator capture 2026-09-03, morehands.com + others), the
 * token mapping table and the brain citations live there.
 *
 * Color reads from the CONSUMING CLIENT's own :root (--color-accent,
 * --color-text, --color-text-muted, --color-white, --color-surface). This
 * file defines zero colors itself. Every size/space/shadow/radius value
 * reads component-library/tokens.css; the 1px/2px/-1px hairline and focus
 * values, letter-spacing in em and the rem breakpoint fall under
 * tokens.css's documented exemptions.
 *
 * This file assumes trust/honest-proof-strip.css also loads on the page --
 * the rating row below is that component's own markup (class .proof-strip),
 * reused rather than restyled here.
 */

.proof-stacked-split-hero,
.proof-stacked-split-hero *,
.proof-stacked-split-hero *::before,
.proof-stacked-split-hero *::after {
  box-sizing: border-box;
}

.proof-stacked-split-hero {
  padding: var(--space-16) var(--space-4);
  color: var(--color-text);
}

@media (min-width: 48rem) {
  .proof-stacked-split-hero {
    padding: var(--space-24) var(--space-8);
  }
}

.proof-stacked-split-hero__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-8);
}

@media (min-width: 48rem) {
  .proof-stacked-split-hero__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.proof-stacked-split-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* ---- phone-view credential strip: license + one badge, renders nothing
   until real facts exist, and never shows on desktop ---- */
.proof-stacked-split-hero__credential-strip {
  display: none;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

@media (max-width: 47.99rem) {
  .proof-stacked-split-hero__credential-strip:not(:empty) {
    display: flex;
  }
}

.proof-stacked-split-hero__credential-strip img {
  display: block;
  height: var(--space-8);
  width: auto;
}

/* ---- eyebrow, promise, body ---- */
.proof-stacked-split-hero__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.proof-stacked-split-hero__headline {
  margin: 0;
  max-width: 18ch;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  font-weight: 800;
  color: var(--color-text);
}

.proof-stacked-split-hero__body {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ---- the one CTA + the optional call-in line ---- */
.proof-stacked-split-hero__cta {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: var(--leading-normal);
  text-decoration: none;
  box-shadow: var(--look-card-shadow, var(--shadow-card));
  transition: box-shadow 150ms ease, transform 150ms ease;
}

@media (min-width: 48rem) {
  .proof-stacked-split-hero__cta {
    align-self: flex-start;
  }
}

.proof-stacked-split-hero__cta:hover,
.proof-stacked-split-hero__cta:focus-visible {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
  transform: translateY(-1px);
}

.proof-stacked-split-hero__cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.proof-stacked-split-hero__contact {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.proof-stacked-split-hero__contact-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
}

/* ---- default stack: proof line + rating (honest-proof-strip) + badges ---- */
.proof-stacked-split-hero__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
  width: 100%;
}

.proof-stacked-split-hero__proof-line {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.proof-stacked-split-hero__proof-line-item {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
}

.proof-stacked-split-hero__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.proof-stacked-split-hero__badges:empty {
  display: none;
}

.proof-stacked-split-hero__badges img {
  display: block;
  height: var(--space-8);
  width: auto;
  max-width: 100%;
}

/* ---- H2b option: proof-stacked-split-hero--card collapses the stack into
   a 2x2 chip card beside the headline; hidden unless the modifier is set ---- */
.proof-stacked-split-hero__chips {
  display: none;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-4);
  gap: var(--space-2) var(--space-4);
  border-radius: var(--look-card-radius, var(--radius-md));
  background: var(--color-surface);
  box-shadow: var(--look-card-shadow, var(--shadow-card));
}

.proof-stacked-split-hero__chip {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

/* the cap, mechanically enforced: four chips maximum regardless of how many
   <li> a later edit adds -- trim the markup instead of relying on this. */
.proof-stacked-split-hero__chip:nth-child(n+5) {
  display: none;
}

.proof-stacked-split-hero--card .proof-stacked-split-hero__stack {
  display: none;
}

.proof-stacked-split-hero--card .proof-stacked-split-hero__chips {
  display: grid;
}

/* ---- photo column ---- */
.proof-stacked-split-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--look-card-shadow, var(--shadow-card));
}

/* ==== component-library/trust/honest-proof-strip.css (rules verbatim) ==== */
/*
  ============================================================================
  COMPONENT: Honest Proof-Placeholder Strip
  KEY: honest-proof-strip | CATEGORY: trust
  Full source/citation/reuse documentation lives in the header comment of
  honest-proof-strip.html -- read that first, especially WHY the children
  are styled through data-proof attributes instead of BEM classes (a
  deliberate decision tied to the component-rail checker's containment
  rule and this component's legitimate empty state; do not "fix" it).

  TOKEN MAPPING (see .html header for the full table + brain citations)
  row rhythm    -> flex row, --space-3 gap
  score         -> --text-lead at weight 700, --color-text
  stars         -> --color-accent, line-height: 1 (deliberate idiom,
                   documented exemption in tokens.css)
  count/source  -> --text-small, --color-text-muted
  empty state   -> :empty -> display: none (absence IS the design)
  Color is NEVER hardcoded here -- every color is var(--color-*), themed by
  the consuming client's own :root (see clients/<slug>/site/styles.css).
  ============================================================================
*/

.proof-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* THE COMPONENT'S WHOLE POINT: with no verified proof, the shell renders
   NOTHING -- no box, no gap, no trace. HTML comments inside the element do
   not defeat :empty; whitespace between the tags does (see HOW TO REUSE
   step 2 in the .html header). */
.proof-strip:empty {
  display: none;
}

.proof-strip [data-proof="score"] {
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

.proof-strip [data-proof="stars"] {
  display: inline-flex;
  gap: 0.125em;
  font-size: var(--text-lead);
  line-height: 1;
  color: var(--color-accent);
}

/* SITE FLOOR (README rule 8, queue item SF1i): the stars are inline SVG
   line icons, not emoji-range glyphs; each is sized to the text. A filled
   star is solid, an empty one is an outline in the same accent color. */
.proof-strip [data-proof="stars"] svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Scoped screen-reader-only utility -- same fixed, industry-standard
   technique the library already uses (see tokens.css exemption #2),
   selected by attribute for the containment reason in the .html header. */
.proof-strip [data-proof="sr-only"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.proof-strip [data-proof="count"] {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* The one wide gallery photo (the trailer) at full band width: a 16:9 crop keeps it a band,
   not a full screen, ahead of the portrait rows. */
.photo-band__item--wide .photo-band__img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Pete and Keema's photo is a portrait selfie: keep both faces inside the round crop. */
.founder-about-card__photo {
  object-position: 50% 62%;
}

/* Client modifier: the owner photo shown large (Brandon, 2026-10-10), a 3:4 portrait instead of the 96px circle. */
.founder-about-card--large-photo .founder-about-card__card {
  max-width: 60rem;
  align-items: center;
}

.founder-about-card--large-photo .founder-about-card__photo {
  width: min(20rem, 42%);
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--look-card-radius, var(--radius-md));
}

@media (max-width: 47.99rem) {
  .founder-about-card--large-photo .founder-about-card__photo {
    width: 100%;
    max-width: 22rem;
    align-self: center;
  }
}

/* Client rule: the hero's phone number as a real link (Brandon, 2026-10-10: iOS auto-linked the plain number in default blue, unreadable on the photo). White and bold, with the accent underline the niche phrase uses. */
.niche-callout-hero__phone {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.niche-callout-hero__phone:hover,
.niche-callout-hero__phone:focus-visible {
  text-decoration-color: currentColor;
}

/* ==== component-library/heroes/brand-graphic-hero.css (rules verbatim) ==== */
/*
 * component-library/heroes/brand-graphic-hero.css
 *
 * Styles for brand-graphic-hero.html. Read that file's header first: the
 * provenance (operator capture 2026-09-03, brooklynfi.com), the token
 * mapping table and the brain citations live there.
 *
 * Color reads from the CONSUMING CLIENT's own :root (--color-text,
 * --color-white, --color-accent, --color-text-muted). This file defines
 * zero colors itself. Every size/space/shadow/radius value reads
 * component-library/tokens.css; the 2px CTA border, letter-spacing in em
 * and the rem breakpoint fall under tokens.css's documented exemptions.
 */

.brand-graphic-hero,
.brand-graphic-hero *,
.brand-graphic-hero *::before,
.brand-graphic-hero *::after {
  box-sizing: border-box;
}

.brand-graphic-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-text);
  color: var(--color-white);
  padding: var(--space-16) var(--space-4);
}

@media (min-width: 48rem) {
  .brand-graphic-hero {
    padding: var(--space-24) var(--space-8);
  }
}

/* ---- shapes layer: the brand's own geometry, never information ---- */
.brand-graphic-hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.brand-graphic-hero__shape {
  position: absolute;
  display: block;
}

.brand-graphic-hero__shape--circle {
  top: var(--space-8);
  right: var(--space-8);
  width: var(--space-32);
  height: var(--space-32);
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.85;
}

.brand-graphic-hero__shape--quarter {
  bottom: calc(var(--space-32) * -1);
  left: calc(var(--space-24) * -1);
  width: var(--space-32);
  height: var(--space-32);
  border-radius: 0 100% 0 0;
  background: var(--color-white);
  opacity: 0.12;
}

.brand-graphic-hero__shape--bar {
  top: var(--space-24);
  left: var(--space-4);
  width: var(--space-16);
  height: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  opacity: 0.5;
}

@media (max-width: 47.99rem) {
  .brand-graphic-hero__shape--circle {
    top: var(--space-4);
    right: var(--space-4);
    width: var(--space-16);
    height: var(--space-16);
  }

  .brand-graphic-hero__shape--quarter {
    bottom: calc(var(--space-16) * -1);
    left: calc(var(--space-16) * -1);
    width: var(--space-16);
    height: var(--space-16);
  }

  .brand-graphic-hero__shape--bar {
    top: var(--space-12);
    left: var(--space-2);
    width: var(--space-8);
  }
}

/* ---- content: headline, optional photo, body, one CTA ---- */
.brand-graphic-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.brand-graphic-hero__headline {
  margin: 0;
  max-width: 16ch; /* readable measure for a very large display headline */
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--color-white);
}

.brand-graphic-hero__accent {
  color: var(--color-accent);
}

.brand-graphic-hero__photo {
  display: block;
  width: var(--space-32);
  height: var(--space-32);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--look-card-shadow, var(--shadow-card));
}

.brand-graphic-hero__body {
  margin: 0;
  max-width: 40ch;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-white);
}

.brand-graphic-hero__phrase {
  color: var(--color-accent);
  font-weight: 700;
}

/* ---- the one CTA, outline or filled via modifier (never both) ---- */
.brand-graphic-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--look-pill-radius, var(--radius-pill));
  font-size: var(--text-body);
  font-weight: 700;
  line-height: var(--leading-normal);
  text-decoration: none;
  transition: box-shadow 150ms ease, transform 150ms ease, background 150ms ease;
}

.brand-graphic-hero__cta--outline {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}

.brand-graphic-hero__cta--filled {
  background: var(--color-accent);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  box-shadow: var(--look-card-shadow, var(--shadow-card));
}

.brand-graphic-hero__cta:hover,
.brand-graphic-hero__cta:focus-visible {
  transform: translateY(-1px);
}

.brand-graphic-hero__cta--filled:hover,
.brand-graphic-hero__cta--filled:focus-visible {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
}

.brand-graphic-hero__cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 47.99rem) {
  .brand-graphic-hero__cta {
    width: 100%;
  }
}

/* Client rule: PK's accent green is too dark to read on the hero's dark ground, so the accent words take the lightened green the founder card already uses on dark (Brandon, 2026-10-10, same fix as the contractors hero phone link). */
.brand-graphic-hero__accent,
.brand-graphic-hero__phrase {
  color: var(--color-white);
  color: color-mix(in srgb, var(--color-accent) 40%, var(--color-white));
}

/* ==== component-library/trust/figure-stats-strip.css (rules verbatim, comments stripped) ==== */
.figure-stats-strip,
.figure-stats-strip *,
.figure-stats-strip *::before,
.figure-stats-strip *::after {
  box-sizing: border-box;
}
.figure-stats-strip {
  padding-block: var(--space-6);                    
  padding-inline: var(--space-4);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);        
  border-bottom: 1px solid var(--color-border);     
}
.figure-stats-strip:has(.figure-stats-strip__list:empty) {
  display: none;
}
.figure-stats-strip__list {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));   
  gap: var(--space-4) var(--space-8);               
  justify-items: center;
  text-align: center;
}
.figure-stats-strip__item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.figure-stats-strip__figure {
  font-size: var(--text-h2);                        
  font-weight: 700;
  line-height: 1;                                   
  color: var(--color-accent);
  overflow-wrap: anywhere;
}
.figure-stats-strip__label {
  font-size: var(--text-small);                     
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
@media (min-width: 48rem) {
  .figure-stats-strip__list {
    text-align: left;
    justify-items: start;
  }
}

/* ==== component-library/cards/partner-logo-cards.css (rules verbatim, comments stripped) ==== */
.partner-logo-cards,
.partner-logo-cards *,
.partner-logo-cards *::before,
.partner-logo-cards *::after {
  box-sizing: border-box;
}

/* The piece carries its own space (README rule 5). */
.partner-logo-cards {
  padding: var(--space-12) var(--space-4);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .partner-logo-cards {
    padding-inline: var(--space-8);
  }
}

.partner-logo-cards__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.partner-logo-cards__heading {
  margin: 0 0 var(--space-8);
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  text-align: center;
  color: var(--color-text);
}

/* A second list's heading keeps the block's section rhythm above it. */
.partner-logo-cards__heading--follow {
  margin-top: var(--space-16);
}

/* Sibling cards share one width (README rule 5). */
.partner-logo-cards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .partner-logo-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .partner-logo-cards__grid--two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* One partner: one centred card, never a row with empty columns. */
  .partner-logo-cards__grid--single {
    grid-template-columns: minmax(0, 22rem);
    justify-content: center;
  }
}

.partner-logo-cards__item {
  display: flex;
  min-width: 0;
}

/* The whole card is one link: a tertiary route off the site, never a btn. */
.partner-logo-cards__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: var(--touch-target-min);
  overflow: hidden;
  border: var(--look-border-width, 1px) solid var(--color-border);
  border-radius: var(--look-card-radius, var(--radius-md));
  background: var(--color-white);
  box-shadow: var(--look-card-shadow, var(--shadow-card));
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.partner-logo-cards__card:hover,
.partner-logo-cards__card:focus-visible {
  box-shadow: var(--look-card-lift, var(--shadow-hover));
}

.partner-logo-cards__card:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* The logo plate: the same height on every card, so every name starts on
   one line across a row whatever each logo's shape. */
.partner-logo-cards__plate {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: var(--space-32);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
}

/* White- or gold-ink logos made for a dark ground. */
.partner-logo-cards__plate--dark {
  border-bottom-color: transparent;
  background: var(--color-text);
}

/* Contained, never stretched or cropped (rfu_working_with_images). */
.partner-logo-cards__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partner-logo-cards__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--space-6);
}

@media (min-width: 64rem) {
  .partner-logo-cards__body {
    padding: var(--space-8);
  }
}

.partner-logo-cards__name {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.partner-logo-cards__line {
  margin-top: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

/* Pinned to the card's foot so every "more" line sits on one row. */
.partner-logo-cards__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-4);
  font-weight: 700;
  color: var(--color-accent);
}

.partner-logo-cards__chevron {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Client rule: PK's type scale, one step up from the library base (Brandon, 2026-10-19: "the overall font-size needs to be bumped up"). conversion-ux-brain hig_typography_scale: body default on iOS is 17pt; design-bar.md floors body at 16px on phones. The library tokens above stay verbatim; these override them for this site only. */
:root {
  --text-h2: clamp(2.25rem, 4vw, 2.75rem);
  --text-h3: 1.5rem;
  --text-lead: 1.375rem;
  --text-body: 1.125rem;
  --text-small: 1rem;
  --text-xs: 0.8125rem;
}

/* Client rule: the stats strip (639 tons) centres at every width. The library left-aligns it from 48rem in two full-width halves, so the second figure started mid-page; centred and capped, the two figures read as one pair (Brandon, 2026-10-19). */
@media (min-width: 48rem) {
  .figure-stats-strip__list {
    max-width: 48rem;
    text-align: center;
    justify-items: center;
  }
}

/* PK client rule (2026-10-20): an odd last partner card in a two-up row sits
   centred at one column's width, never alone against the left edge. */
@media (min-width: 48rem) {
  .partner-logo-cards__grid--two-up > .partner-logo-cards__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-8)) / 2);
  }
}

/* ==== component-library/polish-layer.css (rules verbatim, comments stripped; README rule 13, LAST on purpose) ==== */
:root {
  --polish-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --polish-ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1);
  --polish-fill-from: var(--color-accent);
  --polish-fill-to: var(--color-accent-deep, var(--color-accent));
  --polish-stamp: var(--polish-fill-to);
  --polish-stamp-edge: color-mix(in srgb, var(--polish-stamp) 70%, var(--color-text));
}

.polish-reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 1s var(--polish-ease-out), transform 1s var(--polish-ease-out);
}

.polish-reveal.is-in {
  opacity: 1;
  transform: none;
}

.polish-reveal .booking-steps__marker {
  transform: scale(0.6);
  transition: transform 0.9s var(--polish-ease-snap) 0.2s;
}

.polish-reveal.is-in .booking-steps__marker {
  transform: none;
}

@media (min-width: 768px) {
  .polish-reveal.booking-steps__item:not(:last-child) .booking-steps__marker-wrap::after {
    transform: translateY(-50%) scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.2s var(--polish-ease-out) 0.7s;
  }

  .polish-reveal.booking-steps__item:nth-child(2):not(:last-child) .booking-steps__marker-wrap::after {
    transition-delay: 1s;
  }

  .polish-reveal.booking-steps__item:nth-child(3):not(:last-child) .booking-steps__marker-wrap::after {
    transition-delay: 1.3s;
  }

  .polish-reveal.booking-steps__item:nth-child(4):not(:last-child) .booking-steps__marker-wrap::after {
    transition-delay: 1.6s;
  }

  .polish-reveal.is-in.booking-steps__item:not(:last-child) .booking-steps__marker-wrap::after {
    transform: translateY(-50%) scaleX(1);
  }
}

.polish-reveal:not(.is-in),
.polish-reveal:not(.is-in) .booking-steps__marker,
.polish-reveal:not(.is-in).booking-steps__item:not(:last-child) .booking-steps__marker-wrap::after {
  transition: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn.btn--sweep {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background-color: var(--polish-fill-from);
  background-image: linear-gradient(90deg, var(--polish-fill-from), var(--polish-fill-to));
  color: var(--color-white);
  transition: transform 0.2s var(--polish-ease-out), box-shadow 0.2s var(--polish-ease-out);
}

.btn.btn--sweep::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(90deg, var(--polish-fill-to), var(--polish-fill-from));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--polish-ease-out);
}

.btn.btn--sweep:hover,
.btn.btn--sweep:focus-visible {
  color: var(--color-white);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.btn.btn--sweep:hover::before,
.btn.btn--sweep:focus-visible::before {
  transform: scaleX(1);
}

.btn.btn--sweep:active {
  box-shadow: var(--shadow-card);
  transform: translateY(1px);
}

.btn--stamped {
  border: 0;
  background: var(--polish-stamp);
  color: var(--color-white);
  box-shadow: 0 0.25rem 0 var(--polish-stamp-edge);
  transition: transform 0.18s var(--polish-ease-out), box-shadow 0.18s var(--polish-ease-out);
}

.btn--stamped:hover,
.btn--stamped:focus-visible {
  background: var(--polish-stamp);
  color: var(--color-white);
  box-shadow: 0 0.375rem 0 var(--polish-stamp-edge);
  transform: translateY(-2px);
}

.btn--stamped:active {
  box-shadow: 0 0.0625rem 0 var(--polish-stamp-edge);
  transform: translateY(0.1875rem);
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .accordion-faq-native {
    interpolate-size: allow-keywords;
  }

  .accordion-faq-native__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.25s var(--polish-ease-out), content-visibility 0.25s allow-discrete;
  }

  .accordion-faq-native__item[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .polish-reveal,
  .polish-reveal .booking-steps__marker {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .polish-reveal.booking-steps__item:not(:last-child) .booking-steps__marker-wrap::after {
    transform: translateY(-50%);
    transition: none;
  }

  .btn:active,
  .btn.btn--sweep,
  .btn.btn--sweep:hover,
  .btn.btn--sweep:focus-visible,
  .btn.btn--sweep:active,
  .btn--stamped,
  .btn--stamped:hover,
  .btn--stamped:focus-visible,
  .btn--stamped:active {
    transform: none;
    transition: none;
  }

  .btn.btn--sweep::before {
    transition: none;
  }
}

@media print {
  .polish-reveal,
  .polish-reveal .booking-steps__marker {
    opacity: 1;
    transform: none;
  }

  .polish-reveal.booking-steps__item:not(:last-child) .booking-steps__marker-wrap::after {
    transform: translateY(-50%);
    transition: none;
  }
}