/*
 * Global utilities.
 *
 * Only the ones the site genuinely uses, renamed with a `u-` prefix so they are
 * visibly not component classes. The Webflow export shipped Client-First's full
 * utility wall; most of it was never referenced and is not reproduced here.
 *
 * Anything used by a single component belongs in that component's scoped style
 * block instead of here.
 */

/* ---- Layout rhythm ------------------------------------------------------ */

.u-gutter {
  padding-left: 5rem;
  padding-right: 5rem;
}

@media screen and (max-width: 767px) {
  .u-gutter {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/*
 * Wider gutters below 479px than at 767px. That inversion looks like an
 * accident in the original, but it is what the live site does, so it is
 * preserved deliberately rather than silently "fixed".
 */
@media screen and (max-width: 479px) {
  .u-gutter {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.u-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.u-container--narrow {
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.u-section {
  /* The scale is already responsive, so no breakpoints needed here. */
  padding-block: var(--space-section);
}

/* ---- Type --------------------------------------------------------------- */

/*
 * Display sizes, applied to whatever element is semantically correct — these
 * intentionally differ from the h1-h6 element defaults in base.css, which are
 * heavier. Weight 400 throughout, matching the design.
 */
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5,
.u-h6 {
  font-weight: 400;
}

.u-h1 {
  font-size: 4.5rem;
  line-height: 1.1;
  letter-spacing: -1.28px;
}

.u-h2 {
  font-size: 3rem;
  line-height: 1.2em;
  letter-spacing: -1.28px;
}

.u-h3 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -1px;
}

.u-h4 {
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.5px;
}

.u-h5 {
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: -0.32px;
}

.u-h6 {
  font-size: 1rem;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .u-h1 {
    font-size: 2.5rem;
  }

  .u-h2 {
    font-size: 2rem;
  }

  .u-h3 {
    font-size: 1.5rem;
  }

  .u-h4 {
    font-size: 1rem;
  }

  .u-h5 {
    font-size: 0.875rem;
  }

  .u-h6 {
    font-size: 0.75rem;
  }
}

/* h5 and h6 step back up slightly on the narrowest screens. */
@media screen and (max-width: 479px) {
  .u-h5 {
    font-size: 1rem;
  }

  .u-h6 {
    font-size: 0.85rem;
  }

}

.u-text-lg {
  font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
  .u-text-lg {
    font-size: 1.25rem;
  }
}

.u-text-md {
  font-size: 1.25rem;
}

/* Declared after the base rule: a media query adds no specificity, so an
   override placed earlier in the file simply loses. */
@media screen and (max-width: 479px) {
  .u-text-md {
    font-size: 1.125rem;
  }
}

/* Muted body copy. Opacity rather than a colour, so it works on any ground. */
.u-text-muted {
  opacity: 0.6;
}

.u-text-invert {
  color: var(--color-paper);
}

/* ---- Helpers ------------------------------------------------------------ */

.u-measure {
  width: 100%;
  max-width: 48rem;
}

.u-center {
  margin-left: auto;
  margin-right: auto;
}

.u-hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .u-hide\@tablet {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .u-hide\@landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .u-hide\@mobile {
    display: none !important;
  }
}

/* Visually hidden but available to assistive tech. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}