body {
  color: #091121;
}
section {
  padding: 4rem max((100% - 56rem) / 2 + 2rem, 2rem);
}
#intro {
  display: grid;
  grid: auto auto auto auto 1fr / 1fr 18rem;
  gap: 2rem clamp(2rem, 100vw - 48rem, 8rem);
  background: linear-gradient(to bottom, white 20%, #F0F4F8 35%), #F0F4F8;
  h1 {
    grid-column: 1 / -1;
    place-self: center;
    max-width: 40rem;
    margin-block: 5rem 1em;
    text-align: center;
    font-size: clamp(2rem, 5vw + .6rem, 3rem);
  }
  p {
    margin: 0;
    font-size: 1.0625rem;
    &:first-of-type { margin-block-start: 1rem; }
  }
  figure {
    grid-area: 2 / 2 / 6 / 3;
    display: flex;
    flex-flow: column;
    gap: 3rem;
    margin: 0;
  }
  img {
    width: min(18rem, 100%);
    height: auto;
    border-radius: 1rem;
  }
  @media(width < 50rem){
    grid: auto / 1fr;
    figure {
      grid-area: auto;
      flex-flow: row wrap;
      justify-content: center;
      margin: 2rem 0;
      img { flex: 1 0 12rem; }
    }
  }
}

#trust {
  padding: 2rem max((100% - 60rem) / 2 + 1rem, 1rem);
  background: #F0F4F8;
  figure {
    padding-block: 3rem;
    margin: 0;
    background: white;
    border-radius: 1rem;
  }
  figcaption {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    color: #666F88;
  }
  @media (width >= 850px){
    img:nth-of-type(n + 6){ display: none; }
  }
}

#why {
  background: #F0F4F8;
  columns: 16rem;
  gap: clamp(2rem, 25vw - 8rem, 6rem);
  padding-block-end: 8rem;
  & > * { break-inside: avoid; }
  h2 {
    column-span: all;
    margin-block: 0 3rem;
    font-size: clamp(1.75rem, 5vw + .25rem, 2.25rem);
    text-wrap: balance;
  }
  p { margin-block: 0 1.5rem; }
  #signature {
    display: grid;
    grid: 1fr 1fr / 6rem 1fr;
    gap: 0 1.5rem;
    margin-block: 3rem 0;
    img {
      grid-area: 1 / 1 / span 2;
      width: 100%;
      height: auto;
      border-radius: 50%;
    }
    .name {
      place-self: end start;
      font-weight: 600;
      font-size: 1.25rem;
    }
  }
}

#who {
  background:
    bottom / 100% 70vw no-repeat
      linear-gradient(to bottom, #2A2831 15%, #2A2831E6 40%, transparent 80%),
    center bottom / 100% auto no-repeat url(./who.webp?v=6xCEmIRPKg),
    #2A2831;
  padding: 6rem max((100% - 40rem) / 2 + 2rem, 2rem) 40%;
  text-align: center;
  color: white;
  h2 {
    color: #CBE7FE;
    font-size: clamp(2rem, 5vw + .6rem, 3rem);
  }
  p {
    margin-block: 1.5rem;
  }
}

#values {
  padding: 7rem max((100% - 56rem) / 2, 0rem) 4rem;
  h2 {
    font-size: clamp(2rem, 5vw + .6rem, 3rem);
    text-align: center;
  }
  section {
    display: flow-root;
    padding: 3.5rem;
    margin-block: clamp(3rem, 20vw - 6rem, 5rem);
    color: #091121;
    clear: both;
    border-radius: clamp(0rem, 50vw - 28rem, 1rem);
    &:nth-of-type(1){
      background: linear-gradient(110deg, #E0F4F8 85%, #8BE8FF);
      h3 { color: #055785; }
    }
    &:nth-of-type(2){
      background: linear-gradient(110deg, #E0F5F0 85%, #93F8C4);
      h3 { color: #00844F; }
    }
    &:nth-of-type(3){
      background: linear-gradient(110deg, #EFEEFF 85%, #B6B2FF);
      h3 { color: #4822A0; }
    }

  }
  header {
    float: left;
    display: grid;
    grid: auto 1fr / auto;
    place-items: center start;
    gap: 1.5rem;
    width: 30%;
    min-height: 16rem;
    margin-inline-end: 4rem;
  }
  h3 {
    font-size: clamp(2rem, 4vw + .4rem, 2.5rem);
    margin: 0;
  }
  img {
    width: 7rem;
    height: auto;
  }
  p {
    margin-inline-start: calc(30% + 4rem);
  }
  @media(width < 40rem){
    header {
      float: none;
      display: flex;
      align-items: center;
      gap: 2rem;
      width: auto;
      min-height: 0;
      margin: 0 0 2rem;
    }
    img {
      order: -1;
      width: 5rem;
    }
    p {
      margin-inline: 0;
    }
  }
  @media(width < 25rem){
    img { display: none; }
  }
}

#careers {
  padding-block: 6rem;
  color: white;
  background: linear-gradient(160deg, #726730, #0C0B05 25%);
  h2 {
    margin-block: 0 1em;
    color: #FFF8D3;
    font-size: 2.5rem;
  }
  p {
    max-width: 45rem;
    margin: 1.5rem 0;
  }
  a {
    font-weight: 700;
    color: #D5B363;
    text-decoration: none;
    &:hover { text-decoration: underline; }
  }
}