/* defaults */

:root {
  font-family: "Inter", sans-serif;
  letter-spacing: 0.5%;
  line-height: 1.5;
}
h2 {
  font-weight: 700;
  letter-spacing: -1%;
  line-height: 1.1;
}
dt, strong { font-weight: 700; }
address { font-style: normal; }

/* global */

header p {
  color: #FFF;
  text-align: center;
}
header a {
  color: #000;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

[aria-labelledby="history"] p { font-size: 20.5px; }
[aria-labelledby="history"] figcaption { line-height: 1.3; }
[aria-labelledby="history"] figcaption {
  color: var(--gray);
  font-size: 14px;
}

.phrase {
  color: #FFF;
  font-weight: 300;
  letter-spacing: 4%;
}
.phrase strong { font-weight: 600; }

[aria-labelledby="expertise"] p {
  color: var(--dark-gray);
  font-size: 18px;
}

.card h3 {
  color: var(--blue);
  letter-spacing: 10%;
  line-height: 1.2;
  text-transform: uppercase;
}
.card :is(dt, h4) { color: var(--gray); }

[aria-labelledby="certificates"] p { color: var(--dark-gray); }
[aria-labelledby="certificates"] p:last-child { font-size: 14px; }
[aria-labelledby="certificates"] dl { font-size: 20px; }
[aria-labelledby="certificates"] dt { color: var(--dark-green); }

[aria-labelledby="contact"] p { color: var(--dark-gray); }
[aria-labelledby="contact"] a {
  color: var(--dark-green);
  font-weight: 500;
}

footer {
  color: var(--silver);
  letter-spacing: 5%;
  text-align: center;
}

/* desktop only */
@media screen and (min-width: 900px) {
  h2 { font-size: 40px; }

  header p { font-size: 18px; }

  .phrase {
    font-size: 36px;
    line-height: 1;
    text-align: center;
    white-space-collapse: preserve-spaces;
  }
  .phrase br { display: none; }

  .card { font-size: 20px; }

  [aria-labelledby="certificates"] p { font-size: 18px; }

  [aria-labelledby="contact"] p { font-size: 18px; }
  [aria-labelledby="contact"] address { font-size: 20px; }

  footer { font-size: 12px; }
}

/* mobile only */
@media screen and (max-width: 899px) {
  h2 { font-size: 36px; }

  header p { font-size: 15.5px; }

  .phrase {
    font-size: 28px;
    line-height: 1.4;
  }

  .card { font-size: 18px; }
  .card h3 { font-size: 20px; }
  .card dt { line-height: 1.2; }

  [aria-labelledby="certificates"] p { font-size: 16px; }

  [aria-labelledby="contact"] p { font-size: 16px; }
  [aria-labelledby="contact"] address { font-size: 18px; }

  footer { font-size: 11px; }
}