/* Styles for ResQ for Facilities blocks that have no equivalent in the Webflow
   stylesheet. Colors, radii and type follow the ResQ Services design:
   deep teal #0e262a, red-orange #ff4801, gray borders #d1d5db, Poppins. */

:root {
  --facilities-teal: #0e262a;
  --facilities-orange: #ff4801;
  --facilities-border: #d1d5db;
  --facilities-gray: #5a6470;
  --facilities-light: #f7f8f9;
}

@keyframes marquee-horizontal {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.facilities-section-light {
  background-color: var(--facilities-light);
}

/* Rich text carried over from Webflow inside intro/body copy. */
.facilities-rich > * + * {
  margin-top: 1rem;
}
.facilities-rich p {
  margin-bottom: 0;
}
.facilities-rich a {
  color: var(--facilities-orange);
}

/* Product screenshots under a hero. */
.facilities-hero_media {
  max-width: 64rem;
  margin: 0 auto;
  border: 1px solid var(--facilities-border);
  border-radius: 1.5rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 64px rgba(14, 38, 42, 0.12);
}
.facilities-hero_img {
  display: block;
  width: 100%;
  height: auto;
}

/* Icons from the old site are images; center them inside the dark tile. */
.facilities-icon img {
  max-width: 2.25rem;
  max-height: 2.25rem;
  filter: brightness(0) invert(1);
}

.home-services_wrapper.facilities-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 991px) {
  .home-services_wrapper.facilities-grid-3 {
    grid-template-columns: 1fr;
  }
}

.facilities-stat_link {
  color: var(--facilities-orange);
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.facilities-stat_link:hover {
  text-decoration: underline;
}

/* Image beside copy. */
.facilities-media {
  background-color: #f1f0ee;
  border-radius: 1.5rem;
  overflow: hidden;
}
.facilities-media_img {
  display: block;
  width: 100%;
  height: auto;
  /* Portrait screenshots and phone animations stay a sensible size. */
  max-height: 40rem;
  object-fit: contain;
}

.facilities-link-icon {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

/* Customer quotes. */
.facilities-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media screen and (max-width: 991px) {
  .facilities-quote-grid {
    grid-template-columns: 1fr;
  }
}
.facilities-quote {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
}
.facilities-quote_logo {
  max-height: 2.5rem;
  max-width: 8rem;
  object-fit: contain;
  object-position: left;
}
.facilities-quote_text {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1;
  color: var(--facilities-teal);
  font-weight: 400;
  line-height: 1.4;
}
.facilities-quote_person {
  /* Webflow centers figcaptions. */
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.facilities-quote_photo {
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  object-fit: cover;
}

/* Long-form articles (blog posts, customer stories). */
.facilities-article {
  max-width: 45rem;
  margin: 0 auto;
  color: #111827;
  font-size: 1.125rem;
  line-height: 1.65;
}
.facilities-article h2,
.facilities-article h3,
.facilities-article h4 {
  font-family: Poppins, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--facilities-teal);
  margin: 2.5rem 0 1rem;
}
.facilities-article h2 {
  font-size: 2rem;
}
.facilities-article h3 {
  font-size: 1.5rem;
}
.facilities-article h4 {
  font-size: 1.25rem;
}
.facilities-article p,
.facilities-article ul,
.facilities-article ol {
  margin: 0 0 1.25rem;
}
.facilities-article a {
  color: var(--facilities-orange);
}
.facilities-article figure {
  margin: 2rem 0;
  /* Webflow limits unclassed rich-text figures to 60% width. */
  max-width: 100%;
}
.facilities-article figure > div {
  display: block;
}
.facilities-article img {
  border-radius: 1rem;
  max-width: 100%;
  height: auto;
}
.facilities-article blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--facilities-orange);
  font-family: Poppins, sans-serif;
  font-size: 1.25rem;
  color: var(--facilities-teal);
}
.facilities-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1rem;
}
.facilities-article th,
.facilities-article td {
  border: 1px solid var(--facilities-border);
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}
.facilities-article .w-embed iframe,
.facilities-article .w-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 1rem;
}

/* The Facilities tab is highlighted on every page in its section. */
@media screen and (min-width: 992px) {
  .navigation_item.is-current:before {
    width: 100%;
  }
}

/* Product tours (Arcade), videos and other embedded frames. */
.facilities-hero_media.is-embed iframe,
.facilities-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.facilities-embed {
  max-width: 64rem;
  margin: 0 auto;
  border-radius: 1.5rem;
  overflow: hidden;
}

/* "Read more →" links: keep the arrow beside the label in any layout. */
.button-new.is-text.facilities-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* The generic `table` section. */
.facilities-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--facilities-border);
  border-radius: 1rem;
}
.facilities-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  color: var(--facilities-gray);
}
.facilities-table th,
.facilities-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--facilities-border);
}
.facilities-table thead th {
  font-family: Poppins, sans-serif;
  font-weight: 500;
  color: var(--facilities-teal);
  background: var(--facilities-light);
}
.facilities-table tbody th {
  font-weight: 500;
  color: var(--facilities-teal);
}
.facilities-table tbody tr:last-child th,
.facilities-table tbody tr:last-child td {
  border-bottom: 0;
}

/* The blog index, blog posts and The Fix newsletter pages
   (src/facilities/blocks/blog.ts, articles/post.ts, articles/newsletter.ts). */

.facilities-blog-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- cards */

.facilities-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.facilities-blog-grid.is-3col,
.facilities-blog-featured {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.facilities-blog-featured {
  display: grid;
  gap: 1.5rem;
}
@media screen and (max-width: 991px) {
  .facilities-blog-grid.is-3col,
  .facilities-blog-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .facilities-blog-grid,
  .facilities-blog-grid.is-3col,
  .facilities-blog-featured {
    grid-template-columns: 1fr;
  }
}

.facilities-blog-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  color: var(--facilities-teal);
  background-color: #fff;
}
.facilities-blog-card[hidden] {
  display: none;
}
.facilities-blog-card_media {
  aspect-ratio: 4 / 3;
  background-color: var(--facilities-light);
  overflow: hidden;
}
.facilities-blog-card.is-featured .facilities-blog-card_media {
  aspect-ratio: 16 / 10;
}
.facilities-blog-card_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.facilities-blog-card:hover .facilities-blog-card_img {
  transform: scale(1.03);
}
.facilities-blog-card_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
}
.facilities-blog-card_summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.facilities-blog-card_date {
  margin-top: auto;
}
.facilities-blog-card_summary + .facilities-blog-card_date {
  padding-top: 0.5rem;
}
.facilities-blog-card_more {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
}

/* ----------------------------------------------------------- blog index */

/* Filters and signup on the left, posts on the right; on narrow screens the
   filters sit above the posts and the signup below them. */
.facilities-blog-index {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "filters posts" "signup posts";
  column-gap: 3rem;
  row-gap: 2rem;
  align-items: start;
}
.facilities-blog-index_sidebar {
  grid-area: filters;
}
.facilities-blog-index_posts {
  grid-area: posts;
}
.facilities-blog-index_signup {
  grid-area: signup;
  position: sticky;
  top: 8rem;
}
@media screen and (max-width: 991px) {
  .facilities-blog-index {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "filters" "posts" "signup";
  }
  .facilities-blog-index_signup {
    position: static;
  }
}

.facilities-blog-filters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
@media screen and (max-width: 991px) {
  .facilities-blog-filters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}
.facilities-blog-filter {
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 100vw;
  background: none;
  color: var(--facilities-gray);
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}
@media screen and (max-width: 991px) {
  .facilities-blog-filter {
    border-color: var(--facilities-border);
  }
}
.facilities-blog-filter:hover {
  background-color: #ebf0f1;
  color: var(--facilities-teal);
}
.facilities-blog-filter.is-active {
  background-color: var(--facilities-teal);
  border-color: var(--facilities-teal);
  color: #fff;
}

.facilities-blog-search {
  display: block;
}
.facilities-blog-search_input {
  width: 100%;
  height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--facilities-border);
  border-radius: 100vw;
  color: var(--facilities-teal);
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
}
.facilities-blog-search_input:focus {
  outline: none;
  border-color: var(--facilities-orange);
}

.facilities-blog-empty {
  padding: 3rem 0;
  text-align: center;
}
.facilities-blog-more {
  display: flex;
  justify-content: center;
  padding-top: 3rem;
}
.facilities-blog-more [hidden] {
  display: none;
}
.facilities-blog-more button {
  border: 0;
  cursor: pointer;
}

/* ------------------------------------------------- newsletter signup form */

.facilities-blog-signup {
  padding: 1.5rem;
  border: 1px solid var(--facilities-border);
  border-radius: 1rem;
  background-color: #fff;
}
.facilities-blog-signup_text {
  color: var(--facilities-teal);
}

/* -------------------------------------------------------------- the post */

.facilities-blog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}
.facilities-blog-head.is-text-only {
  grid-template-columns: minmax(0, 54rem);
}
@media screen and (max-width: 991px) {
  .facilities-blog-head {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.facilities-blog-head_crumb {
  color: inherit;
  text-decoration: none;
}
.facilities-blog-head_crumb:hover {
  color: var(--facilities-orange);
}
.facilities-blog-head_title {
  color: var(--facilities-teal);
}
@media screen and (min-width: 992px) {
  .facilities-blog-head_title {
    font-size: 3rem;
  }
}
.facilities-blog-head_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.facilities-blog-head_author {
  color: var(--facilities-teal);
  font-weight: 500;
}
.facilities-blog-head_photo {
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  object-fit: cover;
}
.facilities-blog-head_media {
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: #fff;
}
.facilities-blog-head_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facilities-blog-post {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
.facilities-blog-post.no-toc {
  grid-template-columns: 16rem minmax(0, 1fr);
}
.facilities-blog-post_sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 8rem;
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
}
.facilities-blog-post_body .facilities-article {
  margin: 0;
}
@media screen and (max-width: 991px) {
  .facilities-blog-post,
  .facilities-blog-post.no-toc {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .facilities-blog-post_sidebar {
    order: 2;
    position: static;
    max-height: none;
  }
  /* Jumping around a long list is no help on a phone. */
  .facilities-blog-post_sidebar .facilities-blog-toc {
    display: none;
  }
}

.facilities-blog-toc {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
  border-left: 1px solid var(--facilities-border);
}
.facilities-blog-toc_link {
  padding: 0.3rem 0;
  color: var(--facilities-gray);
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
}
.facilities-blog-toc_link.is-sub {
  padding-left: 0.75rem;
  font-size: 0.8125rem;
}
.facilities-blog-toc_link:hover,
.facilities-blog-toc_link.is-active {
  color: var(--facilities-orange);
}

/* Room under the sticky header when jumping to a heading. */
.facilities-blog-post_body h2[id],
.facilities-blog-post_body h3[id] {
  scroll-margin-top: 8rem;
}
/* Vimeo/YouTube players carried over from Webflow rich text. */
.facilities-blog-post_body .facilities-article iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 1rem;
}
/* Webflow's .w-richtext caps unclassed figures at 60% width; the old posts
   showed them full width. */
.facilities-blog-post_body .facilities-article figure {
  max-width: 100%;
}
.facilities-blog-post_body .facilities-article figure > div {
  display: block;
}
.facilities-blog-post_body .facilities-article figure img {
  display: block;
  width: 100%;
}
.facilities-blog-post_body .facilities-article figcaption {
  margin-top: 0.5rem;
  color: var(--facilities-gray);
  font-size: 0.875rem;
}
.facilities-blog-post_body .facilities-article th {
  background-color: var(--facilities-teal);
  color: #fff;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .facilities-blog-post_body .facilities-article table {
    display: block;
    overflow-x: auto;
  }
}

.facilities-blog-share {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 45rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--facilities-border);
  border-radius: 1rem;
}
.facilities-blog-share_link {
  display: flex;
  color: var(--facilities-teal);
  transition: color 0.2s;
}
.facilities-blog-share_link:hover {
  color: var(--facilities-orange);
}

/* ------------------------------------------------- The Fix newsletter */

.facilities-blog-fix-hero {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 30rem);
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .facilities-blog-fix-hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.facilities-blog-signup.is-hero {
  padding: 2rem;
  box-shadow: 0 24px 64px rgba(14, 38, 42, 0.12);
}
.facilities-blog-fix-hero_img {
  display: block;
  width: 100%;
  height: auto;
}

.facilities-blog-logos {
  overflow: hidden;
}
.facilities-blog-logos .marquee_logo {
  filter: grayscale(1);
  opacity: 0.7;
}

.facilities-blog-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media screen and (max-width: 991px) {
  .facilities-blog-videos {
    grid-template-columns: 1fr;
    max-width: 36rem;
    margin: 0 auto;
  }
}
.facilities-blog-video {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.facilities-blog-video .facilities-quote {
  flex: 1;
  background-color: #fff;
}
.facilities-blog-video_thumb,
.facilities-blog-video_frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--facilities-teal);
  cursor: pointer;
}
.facilities-blog-video_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facilities-blog-video_play {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  background-color: var(--facilities-orange);
  color: #fff;
  transition: transform 0.2s;
}
.facilities-blog-video_thumb:hover .facilities-blog-video_play {
  transform: scale(1.08);
}

/* One newsletter issue. */
.facilities-blog-issue_head {
  max-width: 45rem;
  margin: 0 auto;
}
.facilities-blog-issue_cover {
  max-width: 45rem;
  margin: 0 auto;
  border-radius: 1.5rem;
  overflow: hidden;
}
.facilities-blog-issue_img {
  display: block;
  width: 100%;
  height: auto;
}
/* Section labels from the email ("Industry news", "Timely tips"). */
.facilities-blog-label {
  margin-top: 3rem !important;
  color: var(--facilities-orange);
  font-family: Poppins, sans-serif;
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.135rem;
  text-transform: uppercase;
}
.facilities-blog-label + h2 {
  margin-top: 0.5rem;
}
.facilities-blog-issue_signup {
  max-width: 36rem;
  margin: 0 auto;
}

/* Webflow's .button-new.is-text is display: block, which drops the arrow onto
   its own line inside cards. */
.facilities-blog-card .facilities-blog-card_more,
.facilities-blog-video .button-new.is-text {
  display: flex;
}
/* Webflow centers every figcaption; quote attributions read left-aligned. */
.facilities-blog-video .facilities-quote_person {
  text-align: left;
}
/* Some carried-over headings wrap their text in <strong>. */
.facilities-blog-post_body .facilities-article :is(h2, h3, h4) strong,
.facilities-blog-issue .facilities-article :is(h2, h3, h4) strong {
  font-weight: inherit;
}

/* Thank-you, partners, insurance and service agreement pages (blocks/extra.ts). */

/* The thank-you photo: a modest square, not full width. */
.facilities-extra-photo {
  max-width: 28rem;
  margin: 0 auto;
  border: 1px solid var(--facilities-border);
  border-radius: 1.5rem;
  overflow: hidden;
}
.facilities-extra-photo_img {
  display: block;
  width: 100%;
  height: auto;
}

/* Partner logo above the insurance hero title. */
.facilities-extra-hero-logo {
  display: flex;
  justify-content: center;
}
.facilities-extra-hero-logo img {
  width: 15rem;
  height: auto;
}

/* Picture-topped link cards: four across, two on tablets, one on phones. */
.facilities-extra-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.borded-card.facilities-extra-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: #fff;
}
.facilities-extra-card_media {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--facilities-border);
  overflow: hidden;
}
.facilities-extra-card_media.is-contain {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
  padding: 1.5rem;
}
.facilities-extra-card_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.is-contain .facilities-extra-card_img {
  object-fit: contain;
}
.facilities-extra-card_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
}
.facilities-extra-card_body .facilities-text-link {
  margin-top: auto;
}
.facilities-extra-card_title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media screen and (max-width: 991px) {
  .facilities-extra-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 479px) {
  .facilities-extra-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Typeform's inline widget sets its own height; undo the 16:9 video sizing
   .facilities-embed gives every iframe. */
.facilities-embed .facilities-extra-typeform iframe {
  aspect-ratio: auto;
  height: 100%;
}
.facilities-embed .facilities-extra-typeform [data-tf-widget],
.facilities-embed .facilities-extra-typeform .tf-v1-widget {
  min-height: 37.5rem;
}

/* The /facilities hub, role pages, use cases and restaurant landing page
   (src/facilities/blocks/hub.ts). */

/* Hero illustration: shown as-is, without the screenshot frame. */
.facilities-hub-hero_art {
  max-width: 34rem;
  margin: 0 auto;
}
.facilities-hub-hero_art img {
  display: block;
  width: 100%;
  height: auto;
}

/* Role pages: the customer quote under the hero. */
.facilities-hub-persona {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  max-width: 54rem;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  text-align: left;
}
.facilities-hub-persona_photo {
  flex: 0 0 38%;
  background-color: #f1f0ee;
}
.facilities-hub-persona_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facilities-hub-persona_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 2rem 2rem 0;
}
.facilities-hub-persona_logo {
  max-width: 8rem;
  max-height: 3rem;
  object-fit: contain;
  object-position: left;
}
.facilities-hub-persona_quote {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--facilities-teal);
  font-weight: 400;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .facilities-hub-persona {
    flex-direction: column;
    gap: 0;
  }
  .facilities-hub-persona_photo {
    flex-basis: auto;
    aspect-ratio: 4 / 3;
  }
  .facilities-hub-persona_body {
    padding: 1.5rem;
  }
}

/* A person's photo, name and role under a quote. */
.facilities-hub-person {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 0.75rem;
}
.facilities-hub-person_photo {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 100%;
  object-fit: cover;
}

/* Product overview: capability list beside the chosen screenshot. */
.facilities-hub-cap {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.facilities-hub-cap_menu {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.facilities-hub-cap_group .eyebrow {
  margin: 0 0 0.75rem;
}
.facilities-hub-cap_items {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.facilities-hub-cap_item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--facilities-border);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--facilities-teal);
  font-family: Poppins, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.facilities-hub-cap_item:hover {
  background-color: #ebf0f1;
}
.facilities-hub-cap_item.is-active {
  border-color: var(--facilities-teal);
  background-color: var(--facilities-teal);
  color: #fff;
}
.facilities-hub-cap_icon {
  display: flex;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--facilities-orange);
}
.facilities-hub-cap_item.is-active .facilities-hub-cap_icon {
  color: #fff;
}
.facilities-hub-cap_icon svg {
  width: 100%;
  height: 100%;
}
.facilities-hub-cap_panel {
  scroll-margin-top: 7rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: #fff;
}
.facilities-hub-cap_panel[hidden] {
  display: none;
}
.facilities-hub-cap_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.facilities-hub-cap_top .text {
  margin-top: 0.25rem;
}
.facilities-hub-cap_top .button-new {
  flex: none;
}
.facilities-hub-cap_media {
  border-radius: 1rem;
  overflow: hidden;
  background-color: #f1f0ee;
  aspect-ratio: 1808 / 1571;
}
.facilities-hub-cap_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 991px) {
  .facilities-hub-cap {
    grid-template-columns: 1fr;
  }
  .facilities-hub-cap_items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 479px) {
  .facilities-hub-cap_item {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    gap: 0.5rem;
  }
  .facilities-hub-cap_top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Segmented tabs ("Facilities / Operations / Finance"). */
.facilities-hub-tabs {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.25rem;
  border: 1px solid var(--facilities-border);
  border-radius: 100vw;
  background: #fff;
}
.facilities-hub-tabs_tab {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 100vw;
  background: transparent;
  color: var(--facilities-teal);
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.facilities-hub-tabs_tab:hover {
  background-color: #ebf0f1;
}
.facilities-hub-tabs_tab.is-active {
  background-color: var(--facilities-orange);
  color: #fff;
}
@media screen and (max-width: 479px) {
  .facilities-hub-tabs_tab {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
}

/* Video testimonial cards: poster, hover preview, play button. */
.facilities-hub-video-wrap {
  position: relative;
}
.facilities-hub-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  padding: 0;
  border: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  background-color: var(--facilities-teal);
  cursor: pointer;
}
.facilities-hub-video-wrap.is-square .facilities-hub-video {
  aspect-ratio: 1 / 1;
}
.facilities-hub-video_poster,
.facilities-hub-video_clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facilities-hub-video_clip {
  opacity: 0;
  transition: opacity 0.3s;
}
.facilities-hub-video:hover .facilities-hub-video_clip {
  opacity: 1;
}
.facilities-hub-video_meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 3rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(14, 38, 42, 0.75), rgba(14, 38, 42, 0));
  color: #fff;
  font-family: Poppins, sans-serif;
  text-align: left;
}
.facilities-hub-video_play {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 100%;
  background-color: var(--facilities-orange);
  color: #fff;
  transition: transform 0.2s;
}
.facilities-hub-video:hover .facilities-hub-video_play {
  transform: scale(1.08);
}
.facilities-hub-video_name {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
}
.facilities-hub-video_role {
  display: block;
  font-size: 0.875rem;
  opacity: 0.85;
}
.facilities-hub-video_logo {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.375rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(14, 38, 42, 0.15);
}
.facilities-hub-video_logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
}

/* The dialog the YouTube videos play in. */
.facilities-hub-dialog {
  width: min(64rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  overflow: visible;
  background: #000;
}
.facilities-hub-dialog::backdrop {
  background: rgba(14, 38, 42, 0.8);
}
.facilities-hub-dialog_frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 1rem;
}
.facilities-hub-dialog_close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 100%;
  background: #fff;
  color: var(--facilities-teal);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* "Hear what customers say" slides. */
.facilities-hub-slide {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.facilities-hub-slide[hidden] {
  display: none;
}
.facilities-hub-slide .facilities-hub-video {
  height: 100%;
  min-height: 20rem;
  aspect-ratio: auto;
}
.facilities-hub-slide_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 2rem;
}
.facilities-hub-slide_logo {
  max-width: 8rem;
  max-height: 3rem;
  object-fit: contain;
  object-position: left;
}
.facilities-hub-slide_quote {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--facilities-teal);
  font-weight: 400;
  line-height: 1.4;
}
.facilities-hub-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.facilities-hub-dots_dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background-color: var(--facilities-border);
  cursor: pointer;
}
.facilities-hub-dots_dot.is-active {
  background-color: var(--facilities-orange);
}
.facilities-hub-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--facilities-border);
  border-radius: 100%;
  background: #fff;
  color: var(--facilities-teal);
  cursor: pointer;
  transition: background-color 0.2s;
}
.facilities-hub-arrow:hover {
  background-color: #ebf0f1;
}
@media screen and (max-width: 991px) {
  .facilities-hub-slide {
    grid-template-columns: 1fr;
  }
  .facilities-hub-slide .facilities-hub-video {
    min-height: 0;
    aspect-ratio: 16 / 11;
  }
  .facilities-hub-slide_card {
    padding: 1.5rem;
  }
}

/* "Built to keep your facilities running": numbered steps. */
.facilities-hub-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.facilities-hub-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fff;
}
.facilities-hub-step_num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  background-color: var(--facilities-orange);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 500;
}
.facilities-hub-step_media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background-color: var(--facilities-light);
}
.facilities-hub-step_media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 991px) {
  .facilities-hub-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 479px) {
  .facilities-hub-steps {
    grid-template-columns: 1fr;
  }
}

/* Use cases: "Before ResQ" problems beside an "After ResQ" quote. */
.facilities-hub-ba {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto;
}
.facilities-hub-ba_card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
  background: #fff;
}
.facilities-hub-ba_card.is-after {
  border-color: var(--facilities-orange);
}
.facilities-hub-ba_card > .spacer-16 {
  display: none;
}
.facilities-hub-ba_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.facilities-hub-ba_list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.facilities-hub-ba_list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.facilities-hub-ba_list svg {
  display: block;
}
.facilities-hub-ba_logo {
  max-width: 8rem;
  max-height: 3rem;
  object-fit: contain;
  object-position: left;
}
.facilities-hub-ba_quote {
  margin: 0;
  padding: 0;
  border: 0;
}
@media screen and (max-width: 767px) {
  .facilities-hub-ba {
    grid-template-columns: 1fr;
  }
  .facilities-hub-ba_card {
    padding: 1.5rem;
  }
}

/* Restaurant page "How We Do It": the customer result under each image. */
.facilities-hub-usecase_quote {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0 0;
  background: #fff;
}
.facilities-hub-usecase_quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
}
.facilities-hub-usecase_by {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.facilities-hub-usecase_logo {
  max-width: 6rem;
  max-height: 2.5rem;
  object-fit: contain;
}

/* Restaurant page "Platform Overview" cards. */
.facilities-hub-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.facilities-hub-product {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: #fff;
}
.facilities-hub-product_media {
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #f1f0ee;
  aspect-ratio: 4 / 3;
}
.facilities-hub-product_media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facilities-hub-product_body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media screen and (max-width: 991px) {
  .facilities-hub-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 479px) {
  .facilities-hub-products {
    grid-template-columns: 1fr;
  }
}

/* Operations leaders: the work order animation is a tall phone recording;
   keep it from stretching to the full column width. */
.facilities-media_img[src*="work-order-optimized"] {
  max-height: 36rem;
  object-fit: contain;
  padding: 2rem 0;
}

/* Industry pages and the Large Projects, Work Orders and Super Vendors product
   pages (src/facilities/blocks/industry.ts). */

/* The keyword line is the page's <h1>, styled as the eyebrow; the headline
   under it is an <h2> styled like the hero <h1>. */
h1.facilities-industry-keyword {
  margin: 0;
}
.hero_title h2.facilities-industry-title {
  margin: 0;
  letter-spacing: -0.1225rem;
  font-family: Poppins, sans-serif;
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1.1;
}
@media screen and (max-width: 767px) {
  .hero_title h2.facilities-industry-title {
    letter-spacing: -0.07875rem;
    font-size: 2.2rem;
  }
}

/* Hero photos come in all shapes; crop them to the same wide frame. */
.facilities-industry-photo .facilities-hero_img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* An illustration drawn for a dark background. */
.facilities-hero_media.facilities-industry-dark {
  background-color: var(--facilities-teal);
}

/* Short points with an icon. */
.facilities-industry-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .facilities-industry-points {
    grid-template-columns: 1fr;
  }
}
.facilities-industry-point {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.facilities-industry-point_icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}
.facilities-industry-point_icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.facilities-industry-point .text-size-18-new {
  color: var(--facilities-teal);
}

/* Numbered steps with a screenshot. */
.facilities-industry-step {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.facilities-industry-step_media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 13rem;
  padding: 1.5rem;
  background-color: var(--facilities-light);
  border-bottom: 1px solid var(--facilities-border);
}
.facilities-industry-step_img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.facilities-industry-step_body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}
.facilities-industry-step_number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.5rem;
  border-radius: 100%;
  background-color: var(--facilities-orange);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 600;
}

/* "Your business platform + ResQ = a complete solution". */
.facilities-industry-stack,
.facilities-industry-stack_result {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
.facilities-industry-stack {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}
.facilities-industry-stack_box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background-color: #fff;
  text-align: center;
}
.facilities-industry-stack_box.is-resq {
  border-color: var(--facilities-orange);
}
.facilities-industry-stack_logo {
  height: 1.75rem;
  width: auto;
}
.facilities-industry-stack_list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.facilities-industry-pill {
  padding: 0.625rem 1rem;
  border: 1px solid var(--facilities-border);
  border-radius: 999px;
  color: var(--facilities-teal);
  font-family: Poppins, sans-serif;
  font-weight: 500;
}
.facilities-industry-stack_plus {
  align-self: center;
  color: var(--facilities-orange);
  font-family: Poppins, sans-serif;
  font-size: 2.5rem;
  font-weight: 500;
}
.facilities-industry-stack_result {
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background-color: var(--facilities-teal);
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .facilities-industry-stack {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* Customer videos: a thumbnail that turns into the YouTube player. */
.facilities-industry-video-quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.facilities-industry-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--facilities-teal);
}
.facilities-industry-video_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facilities-industry-video_play {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  background-color: #fff;
  color: var(--facilities-teal);
  transition:
    background-color 0.2s,
    color 0.2s;
}
.facilities-industry-video:hover .facilities-industry-video_play {
  background-color: var(--facilities-orange);
  color: #fff;
}
.facilities-industry-video-quote .facilities-quote {
  flex: 1;
}

/* Large Projects request form: HubSpot draws it in its own iframe. Leave room
   for the sticky header when the hero button jumps to it. */
.facilities-industry-form {
  scroll-margin-top: 8rem;
}

/* Photo tiles with a label. */
.facilities-industry-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .facilities-industry-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .facilities-industry-tile_label {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.875rem;
  }
}
.facilities-industry-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  overflow: hidden;
}
.facilities-industry-tile_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facilities-industry-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 38, 42, 0) 45%, rgba(14, 38, 42, 0.85) 100%);
}
.facilities-industry-tile_label {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  color: #fff;
}

/* Product areas as tabs. */
.facilities-industry-tab-group + .facilities-industry-tab-group {
  margin-top: 1.5rem;
}
.facilities-industry-tab {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  color: var(--facilities-gray);
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.facilities-industry-tab:hover {
  color: var(--facilities-teal);
}
.facilities-industry-tab.is-active {
  border-color: var(--facilities-border);
  background-color: #fff;
  color: var(--facilities-teal);
  font-weight: 500;
}
.facilities-industry-pane_top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 991px) {
  .facilities-industry-tabs > [role="tablist"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .facilities-industry-tab-group + .facilities-industry-tab-group {
    margin-top: 0;
  }
}
@media screen and (max-width: 479px) {
  .facilities-industry-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* One large illustration under a heading. */
.facilities-industry-figure {
  max-width: 56rem;
  margin: 0 auto;
}
.facilities-industry-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* The shared quote card centers its caption (Webflow styles <figcaption>) and
   its text link wraps the arrow onto a new line; straighten both here. */
.facilities-industry-video-quote .facilities-quote_person,
.facilities-industry-story .facilities-quote_person {
  text-align: left;
}
.facilities-industry-video-quote .button-new.is-text,
.facilities-industry-story .button-new.is-text,
.facilities-industry-pane .button-new.is-text {
  display: inline-flex;
  align-self: flex-start;
}

/* A hero illustration that has its own card and shadow. */
.facilities-industry-hero-figure {
  max-width: 40rem;
  margin: 0 auto;
}

/* Comparisons, Referrals, Get a Demo, Request Service, the equipment
   calculator and the 404 page (src/facilities/blocks/misc.ts). */

/* "Here's why ResQ wins" check list inside the image row. */
.facilities-misc-checks {
  margin-top: 0.5rem;
}
.facilities-misc-checks .check-list_list-item {
  align-items: flex-start;
}
.facilities-misc-checks .svg-icon {
  flex: none;
  margin-top: 0.3rem;
}
.facilities-misc-checks strong {
  color: var(--facilities-teal);
  font-weight: 600;
}

/* Tables, styled like the Services "Compare plans" table: the ResQ column is
   outlined in orange. */
.facilities-misc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.facilities-misc-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: separate;
  border-spacing: 0;
  font-family: Poppins, sans-serif;
  color: var(--facilities-teal);
  text-align: left;
}
.facilities-misc-table.is-narrow {
  min-width: 0;
  max-width: 40rem;
  margin: 0 auto;
}
.facilities-misc-table th,
.facilities-misc-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  vertical-align: top;
  line-height: 1.5;
}
.facilities-misc-table thead th {
  border-bottom-color: var(--facilities-border);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.facilities-misc-table tbody th {
  width: 22%;
  font-weight: 500;
}
.facilities-misc-table.is-narrow tbody th {
  width: 50%;
}
.facilities-misc-table td {
  color: #374151;
}
.facilities-misc-table .is-highlighted {
  border-left-color: var(--facilities-orange);
  border-right-color: var(--facilities-orange);
  color: var(--facilities-teal);
}
.facilities-misc-table thead .is-highlighted {
  border-top: 1px solid var(--facilities-orange);
  border-radius: 1rem 1rem 0 0;
  color: var(--facilities-orange);
}
.facilities-misc-table tbody tr:last-child .is-highlighted {
  border-bottom-color: var(--facilities-orange);
  border-radius: 0 0 1rem 1rem;
}
.facilities-misc-table_check {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: -0.15rem;
}
.facilities-misc-note {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--facilities-gray);
}
@media screen and (max-width: 767px) {
  .facilities-misc-table th,
  .facilities-misc-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  .facilities-misc-table thead th {
    font-size: 1rem;
  }
}

/* Small cards with an emoji under the support row. */
.facilities-misc-small-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.facilities-misc-small-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.facilities-misc-emoji {
  font-size: 2rem;
  line-height: 1;
}
@media screen and (max-width: 991px) {
  .facilities-misc-small-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 479px) {
  .facilities-misc-small-grid {
    grid-template-columns: 1fr;
  }
}

/* Numbered steps. */
.facilities-misc-step {
  border: 1px solid var(--facilities-border);
  padding-top: 1.5rem;
  gap: 0.75rem;
}
.facilities-misc-step_number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  background-color: var(--facilities-teal);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 600;
}

/* Testimonials beside a photo or video. */
@media screen and (min-width: 992px) {
  .facilities-misc-story.is-reversed {
    flex-direction: row-reverse;
  }
}
.facilities-misc-story_media {
  border-radius: 1.5rem;
  overflow: hidden;
  background-color: #f1f0ee;
}
.facilities-misc-story_img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.facilities-misc-story_media.is-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Keep "Read customer story" and its arrow on one line. */
.facilities-misc-stories .button-new.is-text {
  display: inline-flex;
  align-self: flex-start;
}

/* Testimonials over a photo (Referrals). */
.facilities-misc-photo-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--facilities-border);
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
}
.facilities-misc-photo-quote_media {
  position: relative;
}
.facilities-misc-photo-quote_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 38, 42, 0) 40%, rgba(14, 38, 42, 0.8));
}
.facilities-misc-photo-quote_img {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 670;
  object-fit: cover;
}
.facilities-misc-photo-quote_logo {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  z-index: 1;
  max-width: 8rem;
  max-height: 2.5rem;
  object-fit: contain;
  object-position: left bottom;
}
.facilities-misc-photo-quote_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
}
.facilities-misc-photo-quote_text {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--facilities-teal);
}

/* The referral email template. */
.facilities-misc-email {
  max-width: 48rem;
  margin: 0 auto;
  background-color: #fff;
}
.facilities-misc-email_headers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: -1.5rem -1.5rem 1.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--facilities-border);
  background-color: var(--facilities-light);
  color: var(--facilities-gray);
}

/* Forms under a hero (HubSpot demo form, service request form). */
.facilities-misc-form {
  position: relative;
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid var(--facilities-border);
  border-radius: 1.5rem;
  background-color: #fff;
  box-shadow: 0 24px 64px rgba(14, 38, 42, 0.12);
  text-align: left;
}
.facilities-misc-form_note {
  margin-top: 1.5rem;
  color: var(--facilities-gray);
}
@media screen and (max-width: 479px) {
  .facilities-misc-form {
    padding: 1.25rem;
  }
}

/* The equipment age calculator, carried over from a Webflow embed. Its own
   class names are kept so its script keeps working. */
.facilities-misc-calculator .resq-predictor {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid var(--facilities-border);
  border-radius: 1.5rem;
  background: #fff;
  font-family: Poppins, sans-serif;
  color: var(--facilities-teal);
}
.facilities-misc-calculator .resq-predictor h2 {
  margin: 0 0 1.5rem;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.facilities-misc-calculator .resq-predictor h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 500;
}
.facilities-misc-calculator .form-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.facilities-misc-calculator .form-group {
  margin: 0;
}
.facilities-misc-calculator .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.facilities-misc-calculator .form-group select,
.facilities-misc-calculator .form-group input {
  width: 100%;
  height: 3rem;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid var(--facilities-border);
  border-radius: 0.75rem;
  background-color: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: var(--facilities-teal);
}
.facilities-misc-calculator .form-group select:focus,
.facilities-misc-calculator .form-group input:focus {
  outline: none;
  border-color: var(--facilities-orange);
  box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.15);
}
.facilities-misc-calculator .resq-button {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.875rem 1.5rem;
  border: 0;
  border-radius: 6.25rem;
  background-color: var(--facilities-orange);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.facilities-misc-calculator .resq-button:hover {
  background-color: #d83b00;
}
.facilities-misc-calculator .alert {
  display: none;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #fee2e2;
  color: #991b1b;
}
.facilities-misc-calculator .results-panel {
  display: none;
  margin-top: 2rem;
}
.facilities-misc-calculator .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.facilities-misc-calculator .stat-card {
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  background-color: var(--facilities-teal);
  color: #fff;
  text-align: center;
}
.facilities-misc-calculator .stat-label {
  font-size: 0.875rem;
  opacity: 0.8;
}
.facilities-misc-calculator .stat-value {
  margin-top: 0.5rem;
  color: var(--facilities-orange);
  font-size: 1.75rem;
  font-weight: 600;
}
.facilities-misc-calculator .health-meter {
  height: 1rem;
  margin: 0.5rem 0 1.5rem;
  border-radius: 1rem;
  background: #e5e7eb;
  overflow: hidden;
}
.facilities-misc-calculator .health-meter-fill {
  height: 100%;
  transition: width 0.5s ease-in-out;
}
.facilities-misc-calculator .health-good {
  background: #22c55e;
}
.facilities-misc-calculator .health-fair {
  background: #eab308;
}
.facilities-misc-calculator .health-poor {
  background: #ef4444;
}
.facilities-misc-calculator .recommendation-card {
  padding: 1.5rem;
  border: 1px solid var(--facilities-border);
  border-radius: 1rem;
}
.facilities-misc-calculator .recommendation-card h4 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
}
.facilities-misc-calculator .recommendation-card ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.facilities-misc-calculator .maintenance-tip {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--facilities-light);
}
.facilities-misc-calculator .priority-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.facilities-misc-calculator .priority-high {
  background: #fee2e2;
  color: #991b1b;
}
.facilities-misc-calculator .priority-medium {
  background: #fef3c7;
  color: #92400e;
}
.facilities-misc-calculator .priority-low {
  background: #dcfce7;
  color: #166534;
}
@media screen and (max-width: 767px) {
  .facilities-misc-calculator .resq-predictor {
    padding: 1.25rem;
  }
  .facilities-misc-calculator .form-section,
  .facilities-misc-calculator .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Customer stories: the /customer-stories index cards and topic filter, and the
   story layout (src/facilities/articles/story.ts). */

/* Story header: logo, title and summary beside the cover photo. */
.facilities-stories-head_logo {
  display: inline-flex;
  align-items: center;
  height: 4rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--facilities-border);
  border-radius: 0.75rem;
  background: #fff;
}
.facilities-stories-head_logo img {
  max-height: 2.5rem;
  max-width: 10rem;
  object-fit: contain;
}
.facilities-stories-head_media {
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--facilities-light);
}
.facilities-stories-head_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facilities-stories-video {
  max-width: 54rem;
  /* Dark frame while the YouTube player loads. */
  background-color: var(--facilities-teal);
}

/* A testimonial under a part of the story, as wide as the text. */
.facilities-stories-quote {
  max-width: 45rem;
  margin: 0 auto;
}
.facilities-stories-quote .facilities-quote {
  background-color: #fff;
}
.facilities-stories-quote .facilities-quote_text {
  font-size: 1.25rem;
}

/* Inline quotes inside the story text. */
.facilities-article blockquote em {
  display: block;
  margin-top: 1rem;
  font-size: 1rem;
  font-style: normal;
}

/* Topic filter above the index cards. */
.facilities-stories-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.facilities-stories-filter .eyebrow {
  margin-right: 0.5rem;
}
.facilities-stories-filter_button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--facilities-border);
  border-radius: 2rem;
  background: #fff;
  color: var(--facilities-teal);
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.facilities-stories-filter_button:hover {
  border-color: var(--facilities-teal);
}
.facilities-stories-filter_button.is-active {
  border-color: var(--facilities-teal);
  background-color: var(--facilities-teal);
  color: #fff;
}

/* Story cards (index and "Read other success stories"). */
.facilities-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media screen and (max-width: 991px) {
  .facilities-stories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .facilities-stories-grid {
    grid-template-columns: 1fr;
  }
}
.borded-card.facilities-stories-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: #fff;
  color: var(--facilities-teal);
}
.borded-card.facilities-stories-card[hidden] {
  display: none;
}
.facilities-stories-card_media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--facilities-light);
}
.facilities-stories-card_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.facilities-stories-card:hover .facilities-stories-card_img {
  transform: scale(1.03);
}
.facilities-stories-card_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
}
.facilities-stories-card_logo {
  height: 2.5rem;
  max-width: 9rem;
  object-fit: contain;
  object-position: left;
}
.button-new.facilities-stories-card_more {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: auto;
}