/* site-footer — includes the "Schedule a Live Remote Demonstration" strip.
 * In the XD that strip is grouped inside Footer and is identical on both
 * pages, so it is footer furniture rather than its own section. */

.site-footer {
  background: var(--color-charcoal);
  color: var(--color-text-inv);
}

/* -- Schedule strip ----------------------------------------------------- */
.sfooter__schedule { border-bottom: 1px solid rgb(255 255 255 / 0.15); }
.sfooter__schedule-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-2xs);
}
.sfooter__schedule-text {
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  margin: 0;
}
.sfooter__schedule-cta { flex: none; }

/* -- Columns ------------------------------------------------------------ */
.sfooter__mid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  padding-block: var(--space-md);
  font-size: var(--step--1);
}
.sfooter__col > * + * { margin-top: var(--space-xs); }
.sfooter__col .t-col-head { margin-bottom: var(--space-xs); }

/* 24x24 floor at every width; the 44px touch rule below takes over on
 * narrow viewports. */
.sfooter__links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.sfooter__links a,
.sfooter__col a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.sfooter__links a:hover,
.sfooter__col a:hover { text-decoration-color: currentColor; }

.sfooter__follow { margin-top: var(--space-md); }
.sfooter__mid .social { margin-top: var(--space-xs); }

/* -- Brand mark ---------------------------------------------------------
 * Sits inside the About Us column, under its copy — not as its own
 * full-width row. Artboard has it at x=140 inside the left column. */
.sfooter__brand { margin-top: var(--space-sm); }
.sfooter__brand img { width: clamp(4rem, 3.375rem + 2.083vw, 5.25rem); height: clamp(4rem, 3.375rem + 2.083vw, 5.25rem); }

/* -- Bottom bar --------------------------------------------------------- */
.sfooter__bottom { border-top: 1px solid rgb(255 255 255 / 0.15); }
.sfooter__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-3xs);
}
.sfooter__bottom-inner p { margin: 0; }

@media (max-width: 992px) {
  .sfooter__mid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}
@media (max-width: 992px) {
  /* Tap targets. The design is desktop-only, so this is a decision, not a
   * departure from the mockup. */
  .sfooter__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .sfooter__col a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  .sfooter__schedule-inner,
  .sfooter__bottom-inner { flex-direction: column; align-items: flex-start; }
  .sfooter__mid { grid-template-columns: 1fr; }
}

/* -- Enclosure ---------------------------------------------------------- */
/* Rob 2026-08-21: a gap above the footer so the page ground shows through
 * behind its rounded top corners. Without it the footer butted straight onto
 * the card grid and the radius had nothing to read against.
 *
 * Safe against the 4rem ceiling and does not double up: .cgrid carries
 * `padding-block: var(--section-pad-y) 0` from .section, so its bottom
 * padding is zero and this margin is the only space between them. */
.site-footer {
  margin-block: var(--section-pad-y) 0;
  border-radius: var(--radius-shell) var(--radius-shell) 0 0;
}
.sfooter__mid { padding-block: var(--section-pad-y); }