/* --------------------------------------------------------------------------
   about.css
   -------------------------------------------------------------------------- */

   .about {
    position: relative;
    overflow: hidden;
  
    background: var(--color-dark-alt);
    color: var(--color-text);
  }
  
  
  /* Header
     -------------------------------------------------------------------------- */
  
  .about__header {
    margin-bottom: var(--space-6);
  }
  
  .about .eyebrow {
    margin: 0 0 var(--space-3);
  
    color: var(--color-lime);
    font-weight: var(--font-weight-bold);
  }
  
  .about__title {
    margin: 0;
  
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 0.95;
    letter-spacing: -0.045em;
  }
  
  
  /* Layout
     -------------------------------------------------------------------------- */
  
  .about-layout {
    display: grid;
    grid-template-columns: minmax(280px, 5fr) minmax(0, 8fr);
    gap: var(--space-6);
  
    align-items: start;
  }
  
  
  /* Visual
     -------------------------------------------------------------------------- */
  
  .about__visual {
    position: relative;
  }
  
  .about__media {
    width: 100%;
    max-width: none;
  
    aspect-ratio: 4 / 5;
  
    overflow: hidden;
  
    background:
      color-mix(
        in srgb,
        var(--color-blue) 55%,
        var(--color-dark)
      );
  }
  
  /* Ready for a real <img> later */
  .about__media img {
    display: block;
  
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  }
  
  
  /* Identity block */
  
  .about__identity {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  
    padding-top: var(--space-3);
  
    border-top: 1px solid
      color-mix(in srgb, var(--color-text) 18%, transparent);
  }
  
  .about__name,
  .about__role {
    margin: 0;
  }
  
  .about__name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
  }
  
  .about__role {
    max-width: 13rem;
  
    color: var(--color-text-muted);
  
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-wide);
    text-align: right;
    text-transform: uppercase;
  }
  
  
  /* Body
     -------------------------------------------------------------------------- */
  
  .about__body {
    display: grid;
  }
  
  .about__lead {
    max-width: 26ch;
    margin: 0 0 var(--space-5);
  
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
  }
  
  .about__copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  
    padding-top: var(--space-4);
  
    border-top: 1px solid var(--color-border);
  }
  
  .about__copy p {
    max-width: 38ch;
    margin: 0;
  
    color: var(--color-text-muted);
  
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
  
  
  /* Stats
     -------------------------------------------------------------------------- */
  
  .about__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  
    margin-top: var(--space-6);
  
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  
  .about-stat {
    position: relative;
  
    display: grid;
    gap: var(--space-2);
  
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
  }
  
  .about-stat + .about-stat {
    padding-left: var(--space-4);
  
    border-left: 1px solid var(--color-border);
  }
  
  .about-stat__value {
    color: var(--color-lime);
  
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 0.85;
    letter-spacing: -0.06em;
  }
  
  .about-stat--drone .about-stat__value {
    color: var(--color-text);
  }
  
  .about-stat__label {
    max-width: 18rem;
  
    color: var(--color-text-muted);
  
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
  }
  
  
  /* Services note
     -------------------------------------------------------------------------- */
  
  .about__services-note {
    display: grid;
    grid-template-columns: var(--space-2) minmax(0, 1fr);
    gap: var(--space-3);
  
    max-width: 42rem;
  
    margin-top: var(--space-5);
  }
  
  .about__services-mark {
    width: var(--space-2);
    height: var(--space-2);
  
    margin-top: 0.45rem;
  
    background: var(--color-lime);
  }
  
  .about__services-note p {
    margin: 0;
  
    color: var(--color-text-muted);
  
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
  }
  
  
  /* Tablet
     -------------------------------------------------------------------------- */
  
  @media (max-width: 64rem) {
  
    .about-layout {
      grid-template-columns: minmax(240px, 5fr) minmax(0, 8fr);
      gap: var(--space-4);
    }
  
    .about__copy {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }
  
    .about__lead {
      font-size: var(--font-size-md);
    }
  }
  
  
  /* Mobile
     -------------------------------------------------------------------------- */
  
  @media (max-width: 47.9375rem) {
  
    .about__header {
      margin-bottom: var(--space-5);
    }
  
    .about__title {
      font-size: clamp(
        var(--space-5),
        14vw,
        var(--space-6)
      );
    }
  
    .about-layout {
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
  
    .about__media {
      aspect-ratio: 4 / 5;
    }
  
    .about__identity {
      gap: var(--space-2);
    }
  
    .about__name {
      font-size: var(--font-size-base);
    }
  
    .about__role {
      font-size: var(--font-size-xs);
    }
  
    .about__lead {
      max-width: 30ch;
      margin-bottom: var(--space-4);
  
      font-size: var(--font-size-md);
    }
  
    .about__copy {
      padding-top: var(--space-3);
    }
  
    .about__copy p {
      max-width: none;
    }
  
    .about__stats {
      margin-top: var(--space-5);
    }
  
    .about-stat {
      padding:
        var(--space-3)
        var(--space-3)
        var(--space-3)
        0;
    }
  
    .about-stat + .about-stat {
      padding-left: var(--space-3);
    }
  
    .about-stat__value {
      font-size: var(--font-size-xl);
    }
  
    .about__services-note {
      margin-top: var(--space-4);
    }
  }