/* About page layout — positions from Look Web 6.15A.pdf page 11 */
/*
.about-layout__nav {
  margin: 20px 0;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.about-layout__nav a {
  color: var(--color-text);
  display: block;
}
.about-layout__nav a:hover {
  color: var(--color-orange);
}
*/
.about-layout {
  position: relative;
  width: 100%;
  max-width: 1974px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.about-layout section {
  padding-right: 3%;
}

/* WHAT WE DO COLUMN */
.about-layout__what-we-do {
  margin-top: 8em;
  width: 25%
}

/* BIO COLUMN */
.about-layout__bio {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}

.about-layout__portrait {
  width: 40%;
  padding: 0 1em 0 0;
  margin: 0;
}

.about-layout__portrait img {
  height: auto;
  display: block;
  width: 100%;
  max-width: 250px;
  float: right;
}

.about-layout__bio-content {
  width: 57%;
}

/* WHO WE ARE COLUMN */
.about-layout__team {
  margin-top: 10em;
  width: 25%;
  display: flex;
  flex-wrap: wrap;
  padding-right: 0 !important;
}

.about-layout__team-content {
  width: 50%;
  padding-right: 1em;
}

.about-layout__team-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-layout__contact {
  width: 50%;
}

.about-layout__contact h2 {
  font-size: 18px;
  letter-spacing: 0.05em;
}

.about-layout__contact address {
  font-style: normal;
}

.about-layout__contact a {
  color: var(--color-text);
}

.about-layout__workshop {
  margin: 1em 0 0;
  max-width: 300px;
}

.about-layout__workshop img {
  width: 100%;
  height: auto;
  display: block;
}

.about-layout h2 {
  margin: 0 0 1rem;
  font-size: 16px;
  font-weight: 400;
}

.about-layout p {
  margin: 0 0 1rem;
  font-size: 14px;
  line-height: 1.6;
}

.about-layout ul {
  font-size: 14px;
  line-height: 1.8;
}

.about-layout address {
  font-size: 14px;
  line-height: 1.8;
}

/* Narrow viewports — stack blocks so content height grows and clears the footer */
@media (max-width: 920px) {
  .about-layout {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
  }

  .about-layout section {
    margin-top: 2em;
    padding-right: 0 !important;
    position: static;
    width: 100%;
  }

  .about-layout__portrait img,
  .about-layout__workshop img {
    max-width: 280px;
  }
}


@media (max-width: 480px) {
  
  .about-layout__portrait,
  .about-layout__bio-content {
    width: 100%;
  }
}