/* =========================================================
   CONTACT (shares the About page's look: about.css is loaded too)
   ========================================================= */
/* current page: Contact stays lit in the site blue */
.nav__links a.nav__cta[aria-current="page"] { color: var(--sky); }
@media (min-width: 1100px) { .nav__links a.nav__cta[aria-current="page"] { background: var(--pill-hover); } }
.ct-hero { padding-bottom: calc(220 * var(--s)); }
.ct-title { margin: 0; max-width: 14.8em; font-size: var(--fs-title); line-height: 1.12; letter-spacing: -0.04em; font-weight: 400; }
.ct-reach { padding: 0 var(--gutter); }
.ct-reach__title { font-size: calc(var(--fs-title) * .62); }
.ct-people { list-style: none; margin: calc(70 * var(--s)) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr 1.05fr; column-gap: calc(60 * var(--s)); }
.ct-person { display: flex; flex-direction: column; }
.ct-q { margin: 0 0 auto; min-height: 2.6em; max-width: 19em; font-size: var(--fs-small); line-height: 1.25; letter-spacing: -0.02em; }
.ct-name { margin: calc(26 * var(--s)) 0 calc(8 * var(--s)); font-size: var(--fs-small); letter-spacing: -0.02em; }
.ct-mail { font-size: var(--fs-small); letter-spacing: -0.01em; align-self: flex-start; }
.ct .ab-cta { padding-top: calc(170 * var(--s)); }
@media (max-width: 1099px) {
  .ct-people { grid-template-columns: 1fr 1fr; row-gap: calc(50 * var(--s)); }
}
@media (max-width: 599px) {
  .ct-title { font-size: clamp(24px, 6.6vw, 32px); }
  .ct-people { grid-template-columns: 1fr; row-gap: calc(34 * var(--s)); margin-top: calc(30 * var(--s)); }
  .ct-q { min-height: 0; margin-bottom: 0; }
  .ct-q:empty { display: none; }
  .ct-name { margin-top: calc(10 * var(--s)); }
}
/* this page is short: the homepage's fade stops at the footer instead of adding empty space below it */
.ct .stage::before { height: min(var(--fade-len), calc(100% - var(--fade-start))); }
.ct-title { max-width: 16.2em; }
.ct-reach__title { font-size: max(18px, calc(var(--fs-title) * .62)); }
/* thin vertical rules before the two named contacts */
.ct-person + .ct-person { border-left: 1px solid rgba(255, 255, 255, .55); padding-left: calc(18 * var(--s) + 8px); }
@media (max-width: 1099px) {
  /* General Inquiries on its own line, the two named contacts side by side below */
  .ct-people { grid-template-columns: 1fr 1fr; }
  .ct-person:first-child { grid-column: 1 / -1; }
  .ct-person:first-child .ct-q { display: none; }
  .ct-person:first-child .ct-name { margin-top: 0; }
}
@media (max-width: 599px) { .ct-people { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .ct-people { row-gap: 52px; } }
.ct-person { border-left: 1px solid rgba(255, 255, 255, .55); padding-left: calc(18 * var(--s) + 8px); }
@media (min-width: 600px) and (max-width: 1099px) { .ct-people { row-gap: calc(110 * var(--s)); } }

/* the fade reaches full navy by the contact details */
.ct .stage { --fade-len: 24vw; }
.ct-hero { padding-bottom: calc(150 * var(--s)); }
/* the fade starts below the title, so it never dims it */
.ct .stage { --fade-start: 0px; --fade-len: 9vw; }