@layer components {
  body.about-surface {
    background:
      radial-gradient(circle at 88% 7%, rgb(250 117 84 / 10%), transparent 24rem),
      var(--color-cream);
  }

  .about-copy {
    inline-size: min(100%, 76rem);
    margin: clamp(3.5rem, 8vh, 7rem) auto clamp(5rem, 10vh, 8rem);
  }

  .about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .78fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
  }

  .about-intro,
  .about-map {
    animation: about-rise 620ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .about-map {
    animation-delay: 100ms;
  }

  .about-intro h1 {
    max-inline-size: 43rem;
    margin-block-start: .85rem;
    font-size: clamp(2.8rem, 5.8vw, 5.15rem);
    letter-spacing: -.055em;
    line-height: .96;
    text-wrap: balance;
  }

  .about-lede {
    max-inline-size: 41rem;
    margin-block-start: 1.6rem;
    color: var(--color-navy-soft);
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.65;
    text-wrap: pretty;
  }

  .about-map {
    position: relative;
    aspect-ratio: 1.2;
    overflow: hidden;
    border: .0625rem solid rgb(16 38 83 / 13%);
    border-radius: 50% 46% 52% 44%;
    background: rgb(255 255 255 / 68%);
    box-shadow: 0 1.5rem 4rem rgb(16 38 83 / 9%);
    transform: rotate(1.5deg);
  }

  .about-map svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .about-road,
  .about-parcel {
    vector-effect: non-scaling-stroke;
  }

  .about-road {
    fill: none;
    stroke: rgb(16 38 83 / 10%);
    stroke-width: 22;
  }

  .about-road.is-secondary {
    stroke-width: 12;
  }

  .about-parcel {
    fill: rgb(250 117 84 / 10%);
    stroke: rgb(16 38 83 / 22%);
    stroke-width: 1.2;
  }

  .about-parcel.is-soft {
    fill: rgb(16 38 83 / 4%);
  }

  .about-map-label {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .48rem .68rem;
    border: .0625rem solid rgb(16 38 83 / 13%);
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    color: var(--color-navy);
    font-family: var(--font-meta);
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .02em;
    box-shadow: 0 .45rem 1.2rem rgb(16 38 83 / 10%);
    transform: rotate(-1.5deg);
  }

  .about-map-label.is-home {
    inset: 26% auto auto 19%;
  }

  .about-map-label.is-neighbor {
    inset: 44% 11% auto auto;
  }

  .about-map-label.is-pin {
    inset: auto auto 19% 28%;
  }

  .about-map-dot {
    inline-size: .5rem;
    aspect-ratio: 1;
    border: .11rem solid var(--color-white);
    border-radius: 50%;
    background: var(--color-coral);
    box-shadow: 0 0 0 .12rem rgb(250 117 84 / 20%);
  }

  .about-purpose,
  .about-directory {
    display: grid;
    grid-template-columns: minmax(13rem, .36fr) minmax(0, 1fr);
    gap: clamp(2rem, 7vw, 7rem);
    margin-block-start: clamp(5rem, 11vh, 9rem);
    padding-block-start: 2rem;
    border-block-start: .0625rem solid rgb(16 38 83 / 18%);
  }

  .about-section-heading h2 {
    margin-block-start: .7rem;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    letter-spacing: -.04em;
    line-height: 1.05;
    text-wrap: balance;
  }

  .about-steps,
  .about-link-list {
    list-style: none;
  }

  .about-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-steps li {
    min-inline-size: 0;
    padding-inline: clamp(1rem, 2vw, 1.65rem);
  }

  .about-steps li:first-child {
    padding-inline-start: 0;
  }

  .about-steps li + li {
    border-inline-start: .0625rem solid rgb(16 38 83 / 14%);
  }

  .about-step-number {
    color: var(--color-coral-dark);
    font-family: var(--font-meta);
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .08em;
  }

  .about-steps h3 {
    margin-block: .65rem .55rem;
    font-size: 1rem;
    line-height: 1.25;
  }

  .about-steps p {
    color: var(--color-navy-soft);
    font-size: .88rem;
    line-height: 1.6;
    text-wrap: pretty;
  }

  .about-link-list {
    border-block-start: .0625rem solid rgb(16 38 83 / 18%);
  }

  .about-link-list li {
    border-block-end: .0625rem solid rgb(16 38 83 / 18%);
  }

  .about-link-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.2rem;
    color: var(--color-navy);
    text-decoration: none;
  }

  .about-link-list a:hover strong {
    color: var(--color-coral-dark);
  }

  .about-link-list a:hover .nabry-icon {
    color: var(--color-coral-dark);
    transform: translate(.15rem, -.15rem);
  }

  .about-link-list strong,
  .about-link-list small {
    display: block;
  }

  .about-link-list strong {
    font-size: 1rem;
    line-height: 1.35;
  }

  .about-link-list small {
    margin-block-start: .28rem;
    color: var(--color-navy-soft);
    font-size: .82rem;
    line-height: 1.5;
  }

  .about-link-list .nabry-icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    transition: color 160ms ease, transform 160ms ease;
  }

  @media (max-width: 52rem) {
    .about-hero {
      grid-template-columns: 1fr;
    }

    .about-map {
      inline-size: min(100%, 31rem);
      justify-self: center;
    }

    .about-purpose,
    .about-directory {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  }

  @media (max-width: 38rem) {
    .about-copy {
      margin-block-start: 3rem;
    }

    .about-intro h1 {
      font-size: clamp(2.55rem, 12vw, 3.65rem);
    }

    .about-steps {
      grid-template-columns: 1fr;
    }

    .about-steps li {
      padding: 1.2rem 0;
    }

    .about-steps li:first-child {
      padding-block-start: 0;
    }

    .about-steps li + li {
      border-block-start: .0625rem solid rgb(16 38 83 / 14%);
      border-inline-start: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .about-intro,
    .about-map {
      animation: none;
    }

    .about-link-list .nabry-icon {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .about-map {
      border-color: CanvasText;
      box-shadow: none;
    }

    .about-map-label,
    .about-purpose,
    .about-directory,
    .about-link-list,
    .about-link-list li,
    .about-steps li + li {
      border-color: CanvasText;
    }
  }

  @keyframes about-rise {
    from {
      opacity: 0;
      transform: translateY(.7rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}