/* Recoloured by scripts/tenant.mjs — scheme "Sapphire" (Rich blue + cyan). Do not hand-edit; rebuild. */

/* Pacific Standard Plumbing — brand retune layer.
   Loads AFTER styles.css. Extracted from the homepage inline <style> so every
   page shares one source of truth for the navy + orange brand. */

/* Homepage-only brand retune: match the primary logo (navy #0d2a5c + orange #00b8cc) */
:root {
  --page: #f4f6f9;
  --surface: #fafbfd;
  --surface-raised: #ffffff;
  --ink: #1f3356;
  --ink-strong: #0d2a5c;
  --muted: #5b6881;
  --line: #d9dee8;
  --line-strong: #b9c3d4;
  --accent: #00b8cc;
  --accent-hover: #029aab;
  --accent-soft: #ddf1f6;
  --shadow: 0 24px 80px rgb(13 42 92 / 0.12);
  --header-height: 106px;

  /* Gradient recipes, derived so one variable drives every stop.
     styles.css already uses var(--accent); brand.css used to hardcode these
     literals and, loading later, won a tenant's colour off the page. */
  --grad-accent: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 94%, white) 0%,
    color-mix(in srgb, var(--accent) 90%, black) 100%);
  --grad-accent-hover: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 95%, black) 0%,
    color-mix(in srgb, var(--accent) 85%, black) 100%);
  --grad-ink: linear-gradient(215deg,
    color-mix(in srgb, var(--ink-strong) 88%, white) 0%,
    color-mix(in srgb, var(--ink-strong) 83%, black) 58%,
    color-mix(in srgb, var(--ink-strong) 58%, black) 100%);
  --grad-ink-btn: linear-gradient(180deg,
    color-mix(in srgb, var(--ink-strong) 90%, white) 0%,
    var(--ink-strong) 100%);
  --grad-ink-btn-hover: linear-gradient(180deg,
    color-mix(in srgb, var(--ink-strong) 84%, white) 0%,
    color-mix(in srgb, var(--ink-strong) 96%, white) 100%);
}

.hero {
  background: var(--ink-strong);
}

.hero::before {
  background:
    linear-gradient(90deg, rgb(7 22 48 / 0.813) 0%, rgb(7 22 48 / 0.706) 32%, rgb(7 22 48 / 0.535) 49%, rgb(7 22 48 / 0.3) 60%, rgb(7 22 48 / 0.086) 73%, rgb(7 22 48 / 0.021) 100%),
    linear-gradient(180deg, rgb(7 22 48 / 0.086) 0%, rgb(7 22 48 / 0) 45%, rgb(7 22 48 / 0.15) 100%);
}

.hero-media {
  background: var(--ink-strong);
}

.hero-action {
  background: rgb(8 22 48 / 0.78);
  box-shadow: 0 16px 36px rgb(6 21 47 / 0.22);
}

.hero-action:hover {
  background: rgb(14 34 68 / 0.92);
}

.hero-action-primary {
  background: var(--grad-accent);
}

.hero-action-primary:hover {
  background: var(--grad-accent-hover);
}

.hero-action-primary .hero-action-icon {
  background: #ffffff;
  border: 0;
  color: var(--ink-strong);
  box-shadow: 0 0 0 3px rgb(13 42 92 / 0.10);
}

.container {
  width: min(calc(100% - 48px), var(--header-container));
}

.hero-action-grid {
  grid-template-columns: 1.1fr 0.85fr 1fr;
}

.hero-action {
  min-height: 84px;
  padding: 12px 18px 12px 20px;
  gap: 16px;
}

.hero-action-copy strong {
  font-size: 16.5px;
}

.hero-action-copy small {
  font-size: 12px;
}

.hero-action-call-copy strong {
  font-size: 17.5px;
}

.hero-action-call-copy small {
  font-size: 11.5px;
}

.hero-action-arrow {
  display: grid;
  place-items: center;
}

.hero-action-arrow svg {
  width: 15px;
  height: 15px;
}

.hero-action-primary .hero-action-icon svg {
  width: 24px;
  height: 24px;
}

.hero-action-call {
  background: linear-gradient(180deg, #ffffff 0%, #d8dee8 100%);
  color: var(--ink-strong);
}

.hero-action-call:hover {
  background: linear-gradient(180deg, #f4f6f9 0%, #cad2df 100%);
}

.hero-action-call .hero-action-icon {
  background: #ffffff;
  border: 2.5px solid #33a867;
  color: #33a867;
}

.hero-action-call .hero-action-icon svg {
  width: 22px;
  height: 22px;
}

.hero-action-call .hero-action-copy small {
  color: #5b6881;
}

.about-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.about-grid .about-media {
  order: 2;
}

.about-grid .about-copy {
  order: 1;
}

.about-title-link {
  color: #3a5580;
}

.about-title-link:hover {
  color: #4b699a;
}

.about-media::before {
  display: none;
}

.about-badge {
  right: auto;
  left: -18px;
  background: var(--grad-ink);
}

.about-badge strong {
  color: #ffffff;
  font-weight: 400;
}

.about-lede {
  font-size: 16px;
  line-height: 1.55;
}

.about-points li {
  align-items: flex-start;
}

.about-point-icon {
  width: 28px;
  height: 28px;
  margin-top: -2px;
  background: color-mix(in srgb, var(--line) 55%, var(--surface));
  color: var(--ink-strong);
}

.about-point-icon svg {
  width: 14px;
  height: 14px;
}

.about-points {
  margin-bottom: 20px;
}

.about-cta {
  padding-top: 0;
}

.about-cta-btn {
  min-height: 44px;
  padding: 0 20px;
  font-size: 14px;
  gap: 9px;
  border: 0;
  background: var(--grad-accent);
}

.about-cta-btn:hover {
  background: var(--grad-accent-hover);
}

.about-cta-btn svg {
  width: 17px;
  height: 17px;
  transition: transform 200ms var(--ease);
}

.about-cta-btn:hover {
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: scale(1.04);
}

.about-cta-btn:hover svg {
  transform: rotate(-8deg) scale(1.12);
}

.about {
  padding: clamp(155px, 13.75vw, 230px) 0 clamp(145px, 12.75vw, 215px);
}

.founder-grid {
  min-height: 580px;
}

.founder-media {
  position: relative;
}

.founder-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.founder-panel {
  padding-block: clamp(54px, 6vw, 84px) clamp(88px, 9vw, 128px);
  padding-left: calc(clamp(44px, 5.5vw, 88px) + 30px);
  gap: 14px;
}

.founder-sign {
  margin-top: 20px;
}

.founder-sign {
  display: flex;
  align-items: center;
  gap: 30px;
}

.founder-sign-text {
  display: grid;
  gap: 4px;
}

.founder-signature {
  width: 190px;
  height: auto;
  flex: 0 0 auto;
}

.founder-mark {
  position: absolute;
  top: 60px;
  left: calc(clamp(44px, 5.5vw, 88px) + 30px);
  height: auto;
  font-size: 470px;
  line-height: 1;
  color: rgb(255 255 255 / 0.12);
  pointer-events: none;
}

.founder-head {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 4px;
}

.founder-head .founder-since {
  margin: 0;
  font-size: 11.5px;
}

.founder-badge {
  position: static;
  width: 208px;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.founder-badge svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 5px 12px rgb(0 0 0 / 0.14));
}

.svc-card {
  border: 0;
  box-shadow: 0 10px 28px rgb(13 42 92 / 0.08);
}

.svc-card:hover {
  box-shadow: 0 18px 40px rgb(13 42 92 / 0.14);
}

.svc-card-body {
  position: relative;
  margin-top: -24px;
  border-radius: 22px 22px 0 0;
  background: var(--surface-raised);
}

.svc-card-arrow {
  background: color-mix(in srgb, var(--line) 55%, var(--surface));
  color: var(--ink-strong);
}

.prefooter {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 540px;
  padding: 88px 24px;
  /* The photo is per-trade, set as --prefooter-image in an inline style on the
     section itself (src/blocks/prefooter.html), the same way the brand emblem
     rides in: the file differs per pack, which rules out a static rule here, and
     a .trade-<slug> body class would put the seven trades in the stylesheet and
     break "adding a trade is a directory under packs/ and no code".
     The fallback IS the plumbing photo, so a pack that sets nothing renders
     byte-identically to what this rule emitted before. */
  background: var(--prefooter-image, url("/assets/images/prefooter-couple-v3.jpg")) left center / cover no-repeat, var(--ink-strong);
}

/* Left-to-right ramp: the photo's left third stays bright enough to read the
   couple's faces, then it deepens to 0.85 navy under the copy column. Phones
   centre the copy over the whole panel, so pages.css flattens it there. */
.prefooter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(11 32 68 / 0.08) 0%, rgb(11 32 68 / 0.28) 20%, rgb(11 32 68 / 0.62) 36%, rgb(11 32 68 / 0.85) 50%, rgb(11 32 68 / 0.85) 100%);
}

.prefooter-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  justify-items: start;
}

.prefooter-kicker {
  margin: 0;
  color: rgb(255 255 255 / 0.85);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.prefooter h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(42px, 5vw, 66px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.prefooter-proof {
  margin-bottom: 8px;
}

.prefooter {
  place-items: center start;
  padding-left: clamp(24px, 49vw, 900px);
  padding-right: 24px;
}

/* The 620px copy column rides on the CHILDREN, not on this wrapper. The
   headline below is deliberately drawn wider than the column, and capping the
   wrapper would make it the h2's containing block and take that width away. */
.prefooter-copy {
  justify-items: start;
  text-align: left;
  width: 100%;
  /* Pin the single column to the wrapper. Left as the implicit `auto` track it
     is sized to the widest item's MAX-CONTENT and is allowed to overflow the
     container rather than shrink — so the h2 below inflated its own grid area
     and its `max-width: 100%` resolved against that, which is a circle: the
     heading measured 914px inside an 894px panel and did not wrap. */
  grid-template-columns: minmax(0, 1fr);
}

.prefooter-copy > * {
  max-width: 620px;
}

/* One line is the design here — this heading is the panel's whole point, and
   pages.css only lets it wrap below 900px. It used to buy that line with
   `white-space: nowrap`, which does not fail gracefully: .prefooter is
   `overflow: hidden`, so a title wider than the panel was not pushed out to a
   scrollbar, it was SILENTLY CUT mid-word. Measured on the built site, the
   one-line budget is ~21 characters and barely moves between 901px and 1280px
   (the 49vw inset and the 5vw font size grow together); only above 1280px,
   where the font stops at 66px, does it widen — to ~29 characters at 1800px.
   So the hvac pack's own "Let's get comfortable!" (22) was cut on all 41 pages
   at laptop widths, and rated-renovations-new's generated "Start your
   remodeling project." (30) was cut at every desktop width there is.
   max-content keeps the single line for every title that fits and lets a
   longer one wrap. pipeline/content-contract.mjs's HOME_CTA_TITLE_MAX caps
   what the model may write here; this rule is what makes exceeding it a
   second line rather than a missing word. */
.prefooter h2 {
  width: max-content;
  max-width: 100%;
  /* Wrapping only helps where there is a space to wrap AT. A single unbroken
     run longer than the panel — a domain, a run-together compound — still
     spilled 1496px of glyphs out of a 629px box and back under the
     `overflow: hidden`. Inside a clipping panel a broken word beats a missing
     one, which is the whole point of this rule and the two above it. */
  overflow-wrap: break-word;
}

.prefooter-actions {
  justify-content: flex-start;
}

.prefooter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.prefooter-btn {
  gap: 10px;
  border: 0;
  background: var(--grad-accent);
}

.prefooter-btn:hover {
  border: 0;
  background: var(--grad-accent-hover);
}

.prefooter-call {
  gap: 10px;
  border: 0;
  background: linear-gradient(180deg, #ffffff 0%, #d8dee8 100%);
  color: var(--ink-strong);
}

.prefooter-call:hover {
  border: 0;
  background: linear-gradient(180deg, #f4f6f9 0%, #cad2df 100%);
  color: var(--ink-strong);
  box-shadow: none;
}

.prefooter-call svg {
  width: 24px;
  height: 24px;
  color: #33a867;
}

.prefooter-btn svg {
  width: 17px;
  height: 17px;
}

.work-stat {
  padding-left: 26px;
  border-left: 1px solid rgb(255 255 255 / 0.16);
}

.work-stats > .work-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.work-stat strong {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: clamp(56px, 6vw, 80px);
  font-weight: 300;
  letter-spacing: -0.02em;
}

.work-stat strong em {
  margin-left: 2px;
  color: #79ccdd;
  font-size: 0.62em;
  font-style: normal;
  vertical-align: 0.28em;
}

.work-stat-label {
  color: rgb(255 255 255 / 0.6);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.urgent-shell {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.6fr);
  padding-right: clamp(160px, 22%, 360px);
  background: #3e909e;
}

.urgent-shell > div:not(.urgent-photo) {
  position: relative;
  z-index: 1;
}

.urgent-shell h2 {
  font-size: clamp(32px, 3.4vw, 50px);
}

.urgent-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  pointer-events: none;
}

.urgent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% center;
}

.urgent-actions {
  align-items: flex-start;
  gap: 14px;
  margin-left: clamp(24px, 5vw, 84px);
}

.urgent-btn-primary {
  gap: 10px;
  border: 0;
  background: var(--grad-ink-btn);
  color: #ffffff;
  font-weight: 500;
}

.urgent-btn-primary:hover {
  border: 0;
  background: var(--grad-ink-btn-hover);
  color: #ffffff;
  box-shadow: none;
}

.urgent-btn-primary svg {
  width: 17px;
  height: 17px;
}

.urgent-btn-call {
  gap: 10px;
  border: 0;
  background: linear-gradient(180deg, #ffffff 0%, #d8dee8 100%);
  color: var(--ink-strong);
  font-weight: 500;
}

.urgent-btn-call:hover {
  border: 0;
  background: linear-gradient(180deg, #f4f6f9 0%, #cad2df 100%);
  color: var(--ink-strong);
  box-shadow: none;
}

.urgent-btn-call svg {
  width: 20px;
  height: 20px;
  color: #33a867;
}

.urgent-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #3e909e 0%, rgb(62 144 158 / 0.4) 34%, rgb(62 144 158 / 0) 68%);
}

.nav-mega-item:hover,
.nav-mega-item:focus-visible {
  background: color-mix(in srgb, var(--line) 55%, var(--surface));
  color: var(--ink-strong);
}

.nav-mega-item strong {
  font-weight: 400;
}

.nav-mega-item[aria-current="page"] strong {
  font-weight: 700;
}

.service-area {
  border-top: 0;
  border-bottom: 0;
  background: var(--page);
}

.faq-list details:last-child {
  border-bottom: 0;
}

.faq-section {
  background: var(--page);
}

.rev-card {
  position: relative;
}

.rev-google {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 26px;
  height: 26px;
}

.rev-google svg {
  display: block;
  width: 100%;
  height: 100%;
}

.social {
  background: linear-gradient(180deg, #f4f6f9 0%, #ffffff 28%, #ffffff 100%);
}

.social-more {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.social-more-btn {
  grid-column: 2;
}

.social-all-btn {
  grid-column: 3;
  justify-self: end;
}

.social-all-btn span {
  display: inline-block;
  font-size: 15px;
  transition: transform 180ms var(--ease);
}

.social-all-btn:hover span {
  transform: translateX(4px);
}

.social-more-btn,
.social-all-btn,
.area-view-btn {
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  background: color-mix(in srgb, var(--line) 26%, #ffffff);
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.social-more-btn:hover,
.social-all-btn:hover,
.area-view-btn:hover {
  background: color-mix(in srgb, var(--line) 45%, #ffffff);
}

.social-all-btn {
  background: transparent;
}

.social-all-btn:hover {
  background: color-mix(in srgb, var(--line) 45%, #ffffff);
}

.area-view-btn {
  align-self: flex-start;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.area-view-btn:hover {
  background: transparent;
  color: var(--accent-readable);
}

.area-view-btn svg {
  width: 13px;
  height: 13px;
  transition: transform 180ms var(--ease);
}

.area-view-btn:hover svg {
  transform: translateX(3px);
}

.social-more-btn svg,
.social-all-btn svg {
  width: 13px;
  height: 13px;
  transition: transform 180ms var(--ease);
}

.social-more-btn:hover svg {
  transform: translateY(2px);
}

.social-all-btn:hover svg {
  transform: translateX(3px);
}

/* ---------- Floating contact buttons ---------- */
.fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fab-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0 6px 18px rgb(6 21 47 / 0.28);
  transition: transform 200ms var(--ease);
}

.fab-btn:hover {
  transform: scale(1.06);
}

.fab-chat {
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ink-strong) 90%, white) 0%, var(--ink-strong) 100%);
}

.fab-chat:hover {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ink-strong) 84%, white) 0%, color-mix(in srgb, var(--ink-strong) 96%, white) 100%);
}

.fab-chat svg {
  width: 24px;
  height: 24px;
}

.fab-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #058d98;
}

.fab-call {
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg, #46c47e 0%, #2b8f57 100%);
  animation: fab-pulse 5s cubic-bezier(0.66, 0, 0, 1) infinite;
}

.fab-call:hover {
  background: linear-gradient(145deg, #52d189 0%, #2f9c5f 100%);
}

.fab-call svg {
  width: 23px;
  height: 23px;
}

@keyframes fab-pulse {
  0% {
    box-shadow: 0 6px 18px rgb(6 21 47 / 0.28), 0 0 0 0 rgb(51 168 103 / 0.55);
  }
  50%,
  100% {
    box-shadow: 0 6px 18px rgb(6 21 47 / 0.28), 0 0 0 26px rgb(51 168 103 / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab-call {
    animation: none;
  }
}

@media (max-width: 900px) {
  .fab {
    bottom: 84px;
  }
}

/* Below 767px the .mobile-conversion bar owns the bottom of the screen and
   carries its own Call us button, so the call FAB is redundant. The chat FAB
   drops down into the bar's right-hand gutter and reads as its third action. */
@media (max-width: 767px) {
  .fab-call {
    display: none;
  }

  .fab {
    right: 12px;
    /* Vertically centred against the bar's 52px pills: bottom padding + 5px. */
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 5px);
    z-index: 23;
  }

  /* Floating again, so it keeps the standard gradient and lift shadow. */

  body.menu-open .fab {
    display: none;
  }
}

/* Short landscape screens hide the bar entirely (styles.css), so the FABs go
   back to floating on their own. */
@media (max-height: 600px) and (orientation: landscape) {
  .fab-call {
    display: grid;
  }

  .fab {
    right: 20px;
    bottom: 20px;
  }
}

/* ---------- Chat panel ---------- */
.chatp {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 160;
  display: flex;
  flex-direction: column;
  width: min(calc(100vw - 40px), 380px);
  height: min(calc(100vh - 130px), 580px);
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgb(6 21 47 / 0.28);
}

.chatp[hidden] {
  display: none;
}

.chatp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 20px 22px 26px;
  background: var(--grad-ink);
}

.chatp-head-copy {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.chatp-head-copy strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.chatp-head-copy small {
  color: rgb(255 255 255 / 0.7);
  font-size: 12.5px;
}

.chatp-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  cursor: pointer;
}

.chatp-close:hover {
  background: rgb(255 255 255 / 0.14);
  color: #ffffff;
}

.chatp-close svg {
  width: 17px;
  height: 17px;
}

.chatp-log {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
}

.chatp-msg {
  max-width: 88%;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f1f4f8;
  color: var(--ink-strong);
}

.chatp-msg p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
}

.chatp-msg p + p {
  margin-top: 12px;
}

.chatp-msg-out {
  margin-left: auto;
  background: var(--ink-strong);
  color: #ffffff;
}

.chatp-meta {
  margin: 7px 0 18px;
  padding-left: 16px;
  color: var(--muted);
  font-size: 12px;
}

.chatp-meta-out {
  padding-left: 0;
  padding-right: 16px;
  text-align: right;
}

.chatp-composer {
  margin: 0 14px 14px;
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 160ms ease;
}

.chatp-composer:focus-within {
  border-color: #cbd7ec;
  box-shadow: 0 4px 18px rgb(31 66 130 / 0.16);
}

.chatp-composer input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 15px;
}

.chatp-composer input:focus {
  outline: 0;
}

.chatp-composer input::placeholder {
  color: #a1afc8;
}

.chatp-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.chatp-tool {
  color: #a1afc8;
}

.chatp-tool svg {
  display: block;
  width: 19px;
  height: 19px;
}

.chatp-send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--page);
  color: #a1afc8;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.chatp-send svg {
  width: 15px;
  height: 15px;
}

.chatp.is-typing .chatp-send,
.chatp-send:hover {
  background: var(--ink-strong);
  color: #ffffff;
}

.fab-chat.is-open .fab-dot {
  display: none;
}

.fab-chevron {
  display: none;
  width: 22px;
  height: 22px;
}

.fab-chat.is-open .fab-chevron {
  display: block;
}

.fab-chat.is-open .fab-smiley {
  display: none;
}

/* ---------- Callback modal ---------- */
.cb {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 24px;
}

.cb[hidden] {
  display: none;
}

.cb-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(5 16 37 / 0.5);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.cb-shell {
  position: relative;
  width: min(100%, 620px);
}

.cb-dialog {
  position: relative;
  padding: 71px 73px 67px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 38%, #e7edf6 100%);
  box-shadow: 0 40px 90px rgb(6 21 47 / 0.42);
}

.cb-close {
  position: absolute;
  top: 18px;
  right: 20px;
  border: 0;
  background: transparent;
  color: var(--line-strong);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.cb-close:hover {
  color: var(--ink-strong);
}

.cb-dialog h2 {
  margin: 0 0 14px;
  max-width: 460px;
  color: var(--ink-strong);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.cb-sub {
  margin: 0 0 32px;
  max-width: 480px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
}

.cb-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.cb-field {
  display: grid;
  flex: 1;
  gap: 8px;
}

.cb-field span {
  color: var(--ink-strong);
  font-size: 20px;
  font-weight: 400;
}

.cb-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 160ms ease;
}

.cb-input-wrap:focus-within {
  border-color: #33a867;
}

.cb-prefix {
  color: var(--ink-strong);
  font-size: 19px;
  font-weight: 400;
}

.cb-field input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.cb-field input::placeholder {
  color: #a1afc8;
}

.cb-field input:focus {
  outline: 0;
}

.cb-submit {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #43b877 0%, #379d65 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.cb-submit:hover {
  background: linear-gradient(180deg, #4bc582 0%, #3daa6f 100%);
  box-shadow: 0 4px 10px rgb(43 143 87 / 0.26);
  transform: translateY(-1px);
}

.cb-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgb(43 143 87 / 0.22);
}

.cb-promise {
  margin: 22px 0 0;
  color: #1c8a4e;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
}

.cb-credit {
  display: inline-block;
  float: right;
  margin: 14px 30px 0 0;
  color: rgb(255 255 255 / 0.72);
  text-align: right;
  line-height: 1.35;
}

.cb-credit span {
  display: block;
  font-size: 12.5px;
}

.cb-credit strong {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

@media (max-width: 620px) {
  .cb-dialog {
    padding: 40px 26px 32px;
  }

  .cb-form {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Booking modal ---------- */
.bk {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.bk[hidden] {
  display: none;
}

.bk-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(5 16 37 / 0.62);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.bk-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 860px);
  max-height: min(92vh, 820px);
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 40px 90px rgb(6 21 47 / 0.4);
}

.bk-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 42px;
  border-radius: 22px 22px 0 0;
  background: var(--grad-ink);
  color: #ffffff;
}

.bk-head-main {
  flex: 1;
  min-width: 0;
}

.bk-kicker {
  margin: 0 0 4px;
  color: #79ccdd;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bk-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bk-emergency {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  border: 0;
  color: #ffffff;
}

.bk-emergency:hover {
  background: rgb(255 255 255 / 0.16);
}

.bk-emergency-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: #33a867;
}

.bk-emergency-icon svg {
  width: 17px;
  height: 17px;
}

.bk-emergency-copy {
  display: grid;
  gap: 0;
  line-height: 1.15;
}

.bk-emergency-copy small {
  color: rgb(255 255 255 / 0.7);
  font-size: 11px;
  line-height: 1.1;
}

.bk-emergency-copy strong {
  font-size: 15px;
  font-weight: 700;
}

.bk-close {
  border: 0;
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.bk-close:hover {
  color: #ffffff;
}

.bk-steps {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 20px 42px;
  list-style: none;
  background: var(--page);
}

.bk-steps li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.bk-steps li:last-child {
  flex: 0 0 auto;
}

.bk-steps li:not(:last-child)::after {
  content: "";
  flex: 1;
  margin-left: 6px;
  border-top: 2px dotted var(--line-strong);
}

.bk-steps li span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.bk-steps li.is-active,
.bk-steps li.is-done {
  color: var(--ink-strong);
  font-weight: 600;
}

.bk-steps li.is-active span {
  background: var(--accent);
  color: #ffffff;
}

.bk-steps li.is-done span {
  background: #33a867;
  color: #ffffff;
}

.bk-body {
  flex: 1;
  overflow-y: auto;
  padding: 46px 42px 50px;
}

.bk-panel {
  display: none;
}

.bk-panel.is-active {
  display: block;
}

.bk-q {
  margin: 0 0 18px;
  color: var(--ink-strong);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bk-sub {
  margin: 22px 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.bk-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bk-options-slim {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bk-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: #f5f7fa;
  color: var(--ink-strong);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease);
}

.bk-option:hover {
  background: #eaeff6;
  transform: translateY(-2px);
}

.bk-option.is-selected {
  background: #e1f3f7;
}

.bk-option-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink-strong);
}

.bk-option.is-selected .bk-option-icon {
  background: var(--accent);
  color: #ffffff;
}

.bk-option-icon svg {
  width: 18px;
  height: 18px;
}

.bk-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bk-option-copy strong {
  font-size: 14.5px;
  font-weight: 700;
}

.bk-option-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.bk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bk-field {
  display: grid;
  gap: 7px;
}

.bk-field-wide {
  grid-column: 1 / -1;
  margin-top: 18px;
}

.bk-field-wide[hidden] {
  display: none;
}

.bk-field > span {
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 600;
}

.bk-field em {
  color: var(--muted);
  font-style: normal;
  font-weight: 400;
}

.bk-field input::placeholder,
.bk-field textarea::placeholder {
  color: #a1afc8;
}

.bk-field input,
.bk-field select,
.bk-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color 160ms ease;
}

.bk-field textarea {
  resize: vertical;
}

/* Focus is GREEN, and never the brand accent.
 *
 * --accent is the tenant's own colour, and on a red-branded site a focused
 * input was indistinguishable from an invalid one. Red means "you have done
 * something wrong" to everybody — and it was saying that about the field the
 * customer had just clicked into, before they had typed anything.
 *
 * #33a867 is the success green already used across these stylesheets (the
 * call icon, the open-now dot, .cb-input-wrap's own focus ring) rather than a
 * ninth spelling of it, and it is in scheme-engine's PROTECTED set — so a
 * recolour cannot turn a focus ring back into the brand colour, which is the
 * whole bug repeating itself on the next tenant. */
.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
  outline: 0;
  border-color: #33a867;
  box-shadow: 0 0 0 3px color-mix(in srgb, #33a867 20%, transparent);
}

/* The date field — docs/leads.md, "The date field".
 *
 * Replaces <input type="date">, which opens only on its own glyph and renders
 * differently in every browser. The trigger is the whole control; the panel
 * below it is INLINE rather than floating, because .bk-body is
 * overflow-y:auto and would clip an absolutely positioned one exactly when it
 * opens downward. */
.bk-datefield > span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.bk-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--muted);
  font-family: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease;
}

/* Until a date is picked the trigger reads as a placeholder, like the empty
   inputs beside it; once set it reads as a value. */
.bk-date-trigger.is-set {
  color: var(--ink-strong);
  font-weight: 600;
}

.bk-date-trigger:hover {
  border-color: var(--line-strong);
}

/* Open reads like a focused input, because that is what it is standing in for.
   Same green as .bk-field input:focus above; see the comment there for why it
   is not the brand accent. */
.bk-date-trigger:focus-visible,
.bk-date-trigger[aria-expanded="true"] {
  outline: 0;
  border-color: #33a867;
  box-shadow: 0 0 0 3px color-mix(in srgb, #33a867 20%, transparent);
}

.bk-date-trigger svg {
  flex: none;
  width: 17px;
  height: 17px;
  opacity: 0.55;
}

/* An OVERLAY, not an inline panel.
 *
 * position:fixed is the only thing that escapes both .bk-body's
 * overflow-y:auto and .bk-dialog's overflow:hidden — absolute is clipped by
 * the first of those at exactly the moment the panel opens downward, which is
 * why this started life inline and pushed the form around instead. Fixed works
 * only because nothing on the modal's ancestor chain sets transform, filter or
 * contain; any one of those makes that ancestor the containing block and the
 * clipping comes straight back.
 *
 * top/left are written by placeDatePop() in scripts.html on open, on scroll of
 * the body and on resize. z-index sits above .bk (200).
 *
 * Its own white and its own shadow, not the panel grey it had inline: floating
 * over the form, it has to read as a layer above rather than a region of it. */
.bk-datepop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 210;
  display: grid;
  grid-template-columns: minmax(150px, 190px) auto;
  gap: 24px;
  max-width: calc(100vw - 24px);
  /* Never taller than the screen. Without this, on a short laptop the panel
     was bigger than the space above OR below the trigger, so placeDatePop's
     last-resort clamp pinned it to the viewport and it covered the very field
     it belongs to. Bounded, it fits below the trigger the way a dropdown
     should, and scrolls internally on the rare screen where it still cannot. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 26px 64px rgb(6 21 47 / 0.26);
}

.bk-datepop[hidden] {
  display: none;
}

/* All ten rows visible at once — "No preference" plus today, tomorrow and the
   seven days after. An inner scrollbar here would hide half the point of the
   list behind a gesture nobody knows to make; the modal body scrolls instead,
   and the panel scrolls itself into view when it opens. */
.bk-date-quick {
  display: grid;
  align-content: start;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-date-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.bk-date-opt small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

/* Hover PREVIEWS the selection: the same green, at a fraction of it.
 *
 * It used to be `background: #ffffff`, which read as a highlight while the
 * panel was grey and became invisible the moment the panel turned white for
 * the overlay — a hover state the same colour as its own background is not a
 * hover state, and the whole picker felt inert as a result. Tying it to the
 * selected colour means the two can never drift apart again. */
.bk-date-opt:hover {
  background: color-mix(in srgb, #33a867 14%, transparent);
}

/* Chosen is GREEN, like every other affirmative state in this form. On a
   red-branded site the accent read as an error rather than as "this is the one
   you picked" — the same confusion the focus ring had. */
.bk-date-opt.is-on {
  background: #33a867;
  color: #ffffff;
}

.bk-date-opt.is-on small {
  color: rgb(255 255 255 / 0.8);
}

/* Both months, side by side, and no navigation at all — see monthGrid() in
   scripts.html for why the arrows had to go rather than be fixed. */
.bk-date-cals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.bk-cal-head {
  margin-bottom: 10px;
  text-align: center;
}

.bk-cal-head strong {
  color: var(--ink-strong);
  font-size: 13.5px;
  font-weight: 700;
}

/* A FLOOR on the column, not minmax(0, 1fr).
   Inside an auto-sized grid track two month grids will happily collapse until
   the day numbers are touching — legible in a screenshot, unusable with a
   finger. 30px is the smallest that keeps two digits and a hit target. */
.bk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(30px, 1fr));
  gap: 2px;
}

.bk-cal-dow {
  padding-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.bk-cal-day {
  padding: 7px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.bk-cal-day:hover {
  background: color-mix(in srgb, #33a867 14%, transparent);
}

/* A day already gone is not a day you can be visited on. Rendered as a span,
   not a disabled button, so it is skipped by the keyboard entirely. */
.bk-cal-day.is-past {
  color: var(--muted);
  opacity: 0.4;
  cursor: default;
}

/* A day already gone cannot be picked, so it must not look pickable. It is
   rendered as a span rather than a button, but :hover still matches one. */
.bk-cal-day.is-past:hover {
  background: transparent;
}

/* Already chosen stays chosen. Without this the 14% tint lands on top of the
   solid green and washes the selection out on the way past it — the one cell
   in the grid that should be unmistakable. */
.bk-date-opt.is-on:hover,
.bk-cal-day.is-on:hover {
  background: color-mix(in srgb, #33a867 88%, black);
}

/* Today is a "you are here" marker, not a choice, so it is a quiet ring
   rather than a colour — in the accent it was a red circle sitting next to the
   green one you had actually picked, and the two competed. */
.bk-cal-day.is-today {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.bk-cal-day.is-on {
  background: #33a867;
  color: #ffffff;
}

/* Selected beats today: a day that is both is one you chose. */
.bk-cal-day.is-on.is-today {
  box-shadow: none;
}

/* Lead capture — docs/leads.md.
 *
 * These four selectors are in every build; the markup that uses them exists
 * only on a CMS-managed one (template/build.mjs gates it on
 * site.leadEndpoint). So a demo's stylesheet carries a few rules that match
 * nothing, which is the whole of what this change does to a demo.
 *
 * --error is defined in styles.css and is in scheme-engine's PROTECTED set,
 * so a recolour cannot turn the error state into the brand colour. */
/* Invalid wins over focus, including WHILE focused — a field that is still
 * wrong must not go green the moment it is clicked back into. Declared after
 * the focus rule above, which is what makes it win at equal specificity; move
 * one of them and the other silently stops applying. */
.bk-field input[aria-invalid="true"],
.bk-field select[aria-invalid="true"],
.bk-field textarea[aria-invalid="true"],
.bk-field input[aria-invalid="true"]:focus,
.bk-field select[aria-invalid="true"]:focus,
.bk-field textarea[aria-invalid="true"]:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent);
}

/* The message sits in the LABEL row, beside the field's name.
 *
 * Under the input it added a third row to one cell of a two-column grid, so
 * the instant a message appeared every field beside and below it jumped down.
 * Rearranging the layout around someone's mistake moves the very thing they
 * are trying to correct, and it happened on blur — mouse out of a half-typed
 * number and the form reflowed under the cursor. In the label row the row
 * height never changes. */
.bk-field-check > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.bk-err {
  color: var(--error);
  font-size: 12px;
  font-weight: 650;
  text-align: right;
}

/* Step 1 has no label row to sit in — its message belongs under the grid of
   service cards, which is where the mistake is. */
.bk-err-wide {
  display: block;
  margin-top: 12px;
  text-align: left;
  font-size: 12.5px;
}

/* .bk-err sets display, so the hidden attribute needs saying again — the
   .bk-field-wide[hidden] rule above is here for the same reason. */
.bk-err[hidden] {
  display: none;
}

.bk-send-error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--error) 34%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--error) 8%, #ffffff);
  color: var(--error);
  font-size: 13.5px;
  line-height: 1.5;
}

.bk-send-error[hidden] {
  display: none;
}

/* The honeypot. Off-screen rather than display:none — a bot that skips
   unrendered inputs would step around a hidden one — and out of the tab order
   and the accessibility tree, so no customer ever meets it. */
.bk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bk-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 22px;
  margin: 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--page);
}

.bk-summary dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.bk-summary dd {
  margin: 0;
  color: var(--ink-strong);
  font-size: 14.5px;
  font-weight: 600;
}

.bk-fine {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.bk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 42px;
  border-radius: 0 0 22px 22px;
  background: var(--page);
}

.bk-back {
  border: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  gap: 8px;
}

.bk-back svg {
  width: 13px;
  height: 13px;
}

.bk-back[hidden] {
  visibility: hidden;
  display: inline-flex;
}

.bk-progress {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.bk-next {
  gap: 9px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  background: var(--grad-accent);
  font-size: 14.5px;
  font-family: inherit;
  cursor: pointer;
}

.bk-next:hover {
  border: 0;
  background: var(--grad-accent-hover);
}

.bk-next svg {
  width: 14px;
  height: 14px;
}

body.bk-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .bk-options,
  .bk-options-slim,
  .bk-grid,
  .bk-datepop,
  .bk-date-cals {
    grid-template-columns: 1fr;
  }

  /* Stacked, the quick list DOES need a bound — ten rows above the calendar
     would put the calendar a full screen down on a phone. */
  .bk-date-quick {
    max-height: 168px;
    overflow-y: auto;
  }

  .bk-emergency-copy,
  .bk-steps li:not(.is-active) {
    display: none;
  }

  .bk-head h2 {
    font-size: 20px;
  }
}

.footer-grid {
  grid-template-columns: 1fr auto auto auto 1fr;
  gap: clamp(30px, 4.5vw, 78px);
  justify-items: start;
}

.site-footer {
  padding-bottom: 30px;
}

.footer-contact {
  justify-self: end;
  text-align: right;
}

.footer-grid > nav {
  transform: translateX(54px);
}

.site-footer .brand-logo-image {
  /* Same height-first rule as the header — see styles.css. */
  height: var(--logo-max-h-footer);
  width: auto;
  max-width: 196px;
  object-fit: contain;
  object-position: left center;
}

.footer-description {
  font-size: 13px;
}

.footer-grid h2 {
  color: var(--ink-strong);
}

.footer-contact a strong {
  font-weight: 700;
}

.footer-contact .footer-hours {
  color: #1c8a4e;
  font-weight: 600;
}

.footer-bottom {
  align-items: center;
  flex-wrap: wrap;
}

.footer-legal {
  display: flex;
  gap: 26px;
}

.footer-legal a {
  color: var(--muted);
  font-size: 13.5px;
  transition: color 160ms ease;
}

.footer-legal a:hover {
  color: var(--accent-readable);
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13.5px;
}

.footer-credit img {
  width: 120px;
  height: auto;
  transform: translateY(-4px);
}

.footer-credit:hover {
  color: var(--ink-strong);
}

.area-map {
  position: relative;
  overflow: hidden;
}

.area-map iframe {
  height: calc(100% + 36px);
}

.area-map::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(140px, 20vw, 320px);
  background: linear-gradient(to left, #f4f6f9 0%, rgb(244 246 249 / 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.city-groups h3 {
  font-weight: 800;
  color: var(--ink-strong);
}

.city-groups a {
  font-weight: 400;
}

.work {
  background: var(--grad-ink);
}

.coupons {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='80' font-family='Arial, sans-serif' font-size='100' font-weight='700' text-anchor='middle' fill='%23ffffff' fill-opacity='0.02'%3E%25%3C/text%3E%3C/svg%3E") center 30% / 115% auto no-repeat,
    var(--grad-ink);
}

.work-btn,
.cpn-btn {
  gap: 9px;
  border-color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #d8dee8 100%);
  color: var(--ink-strong);
}

.work-btn:hover,
.cpn-btn:hover {
  border-color: transparent;
  background: linear-gradient(180deg, #f4f6f9 0%, #cad2df 100%);
  box-shadow: none;
  color: var(--ink-strong);
}

.work-btn svg,
.cpn-btn svg {
  width: 15px;
  height: 15px;
  transition: transform 180ms var(--ease);
}

.work-btn:hover svg,
.cpn-btn:hover svg {
  transform: translateX(3px);
}

.cpn-card h3 {
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 400;
}

.cpn-head {
  margin-bottom: clamp(34px, 4vw, 50px);
}

.cpn-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding: 8px 16px;
  border: 1.5px dashed rgb(255 255 255 / 0.45);
  border-radius: 999px;
  color: #79ccdd;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cpn-chip svg {
  width: 15px;
  height: 15px;
}

.cpn-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.cpn-card:hover {
  border-color: rgb(255 255 255 / 0.55);
  transform: translateY(-10px);
  box-shadow: 0 22px 44px rgb(5 16 37 / 0.35);
}

.work-tile {
  background: var(--ink-strong);
}

.work-avatars img {
  width: 30px;
  height: 30px;
  border: 0;
}

.work-avatars img + img {
  margin-left: -10px;
}

.work-avatars img:nth-child(1) {
  z-index: 1;
  opacity: 0.4;
}

.work-avatars img:nth-child(2) {
  position: relative;
  z-index: 2;
  opacity: 0.7;
}

.work-avatars img:nth-child(3) {
  position: relative;
  z-index: 3;
  opacity: 1;
}

.work-tile::after,
.social-tile::after {
  background: linear-gradient(to top, rgb(6 21 47 / 0.45), transparent 50%);
}

.brand-logo-image {
  /* auto, so a portrait logo shrinks its box instead of leaving dead space
     before the nav. The height cap in styles.css does the sizing. */
  width: auto;
  margin-left: -5px;
}

.hero h1 {
  margin-left: -4px;
}

.desktop-nav > a,
.nav-dropdown > summary {
  font-family: "Google Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
}

.utility-bar {
  background: linear-gradient(90deg, #d8dee8 0%, #bdc8d8 34%, #2e4b7b 60%, #0d2a5c 76%, #0d2a5c 100%);
}

.utility-note {
  margin-right: auto;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #34476d;
}

@media (max-width: 900px) {
  .utility-bar {
    background: var(--ink-strong);
  }

  .utility-note {
    display: none;
  }
}

.utility-links a,
.open-status,
.open-status strong {
  font-weight: 400;
}

.utility-note,
.utility-links a,
.open-status {
  font-size: 12px;
}

.open-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgb(74 222 128 / 0.18);
  vertical-align: 1px;
}