/* ==========================================================================
   Responsive + print adjustments that cut across components.
   Component-specific breakpoints live next to the component.
   Breakpoints: 30em (480) · 40em (640) · 48em (768) · 64em (1024) · 90em (1440)
   ========================================================================== */

/* Very small phones (320px): tighten the hero and the proof strip */
@media (max-width: 22.5em) {
  .hero__title {
    font-size: 2.125rem;
  }

  .proof-strip__list {
    grid-template-columns: 1fr;
  }

  .proof-strip__item {
    border-left: 0;
  }

  .proof-strip__item + .proof-strip__item {
    border-top: 1px solid var(--c-line-dark);
  }

  .facts-table {
    grid-template-columns: 1fr;
  }
}

/* Large screens: allow a little more breathing room */
@media (min-width: 90em) {
  :root {
    --container: 84rem;
  }
}

/* Thumb-friendly sticky enquiry button on phones */
.mobile-cta {
  display: none;
}

@media (max-width: 47.99em) {
  .mobile-cta {
    position: fixed;
    left: var(--s-3);
    right: var(--s-3);
    bottom: var(--s-3);
    z-index: 90;
    display: flex;
    box-shadow: 0 8px 24px rgb(14 15 17 / 0.3);
    transition: transform var(--t-base) var(--ease-out);
  }

  .mobile-cta.is-hidden {
    transform: translateY(calc(100% + 1.5rem));
  }

  .mobile-cta .btn {
    width: 100%;
  }

  body.has-mobile-cta {
    padding-bottom: 5rem;
  }
}

@media print {
  .utility-bar,
  .site-header,
  .mobile-cta,
  .consent,
  .hero__media,
  .page-hero__media {
    display: none !important;
  }

  .hero,
  .page-hero,
  .section--dark {
    background: none !important;
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}