/*
  Layout is taken from the 850pt-square design PDF (261112 Holding Page).
  --u is one design point, scaled so the page matches the PDF at any width
  (capped so it stops growing on very wide screens). Text sizes have px
  floors so they stay readable on phones.
*/
:root {
  --navy: #23235f;
  --u: calc(min(100vw, 1328px) / 850);
  --gutter: calc(36 * var(--u));
  font-family: "Crimson Pro", Georgia, serif;
  color: var(--navy);
  background: #fff;
}

/* Scale against the page width (excludes the scrollbar), not the window. */
@supports (width: 1cqw) {
  :root {
    container-type: inline-size;
    --u: calc(min(100cqw, 1328px) / 850);
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: max(13 * var(--u), 13px);
  line-height: max(18 * var(--u), 18px);
}

h1, p, ul {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a[href]:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.container {
  width: 100%;
  max-width: calc(850 * var(--u));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header, .hero, .contact {
  color: #fff;
  background: var(--navy);
}

/* Header: wordmark + email */
.header-inner, .contact-inner {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.header-inner {
  align-items: flex-start;
  padding-top: calc(37 * var(--u));
}

.wordmark {
  width: calc(279 * var(--u));
}

.header-inner a,
.contact {
  font-size: max(14 * var(--u), 14px);
  line-height: max(20 * var(--u), 20px);
}

.header-inner a {
  margin-top: calc(10.4 * var(--u));
}

/* Hero */
.hero-inner {
  display: grid;
  grid-template-columns: calc(546 * var(--u)) minmax(0, 1fr);
  padding-block: calc(31 * var(--u)) calc(29.1 * var(--u));
}

.hero h1 {
  font-size: max(28 * var(--u), 26px);
  font-weight: 400;
  line-height: calc(34 * var(--u));
  margin-bottom: calc(23.3 * var(--u));
}

.hero p {
  font-size: max(16 * var(--u), 16px);
  line-height: max(24 * var(--u), 24px);
  text-align: justify;
}

.brand-mark {
  align-self: start;
  width: calc(129 * var(--u));
  margin-top: calc(34 * var(--u));
  margin-left: calc(56 * var(--u));
}

/* Services */
.services {
  padding-block: calc(20 * var(--u)) calc(28 * var(--u));
}

.services p {
  text-align: justify;
  /* Crimson Pro runs a hair wider than Minion Pro; this keeps the PDF's 3-line break */
  word-spacing: -0.04em;
}

.services ul {
  margin-top: max(18 * var(--u), 18px);
  padding: 0;
  list-style: none;
}

/* Contact band */
.contact-inner {
  padding-block: calc(8 * var(--u)) calc(15.2 * var(--u));
}

.contact-links {
  display: grid;
  justify-items: end;
  align-content: start;
  min-width: 0;
}

/* Logos + legal */
.footer-inner {
  padding-block: calc(19 * var(--u)) calc(42 * var(--u));
}

.client-logos {
  display: grid;
  grid-template-columns: 109fr 130fr 102fr 35fr 67fr 114fr 44fr 76fr 88fr;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(71 * var(--u));
  padding: 0 calc(5 * var(--u));
  list-style: none;
}

.client-logos img {
  width: auto;
  max-height: calc(56 * var(--u));
  margin-inline: auto;
  object-fit: contain;
}

.logo-pair {
  display: grid;
  gap: calc(4 * var(--u));
}

.logo-pair img {
  max-height: calc(24 * var(--u));
}

.legal {
  margin-top: calc(6 * var(--u));
  font-size: max(9 * var(--u), 10px);
  line-height: 1.4;
}

@media (max-width: 53rem) {
  .client-logos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: auto;
    gap: 1.25rem;
    padding: 0;
  }

  .client-logos img {
    max-height: 3.65rem;
  }

  .logo-pair img {
    max-height: 1.55rem;
  }
}

@media (max-width: 39rem) {
  .header-inner, .contact-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-inner {
    padding-top: 1.75rem;
  }

  .wordmark {
    width: min(100%, 20rem);
  }

  .header-inner a {
    margin-top: 0;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-block: 1.75rem;
  }

  .hero h1 {
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  body {
    font-size: 15px;
    line-height: 22px;
  }

  .hero p {
    font-size: 17px;
    line-height: 26px;
  }

  .hero p, .services p {
    text-align: left;
    word-spacing: normal;
  }

  .brand-mark {
    width: 4rem;
    margin: 0;
  }

  .services {
    padding-block: 1.5rem 2rem;
  }

  .contact-inner {
    padding-block: 0.75rem 1rem;
  }

  .contact-links {
    justify-items: start;
  }

  .client-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 1rem;
  }

  .footer-inner {
    padding-block: 2rem 2.5rem;
  }

  .legal {
    margin-top: 1.5rem;
  }
}