/* About (Figma 62:56) and Contact (Figma 62:266) pages. Loaded after styles.css. */

/* ---------- About ---------- */
.hero--about .hero__copy { display: grid; gap: 1.5em; }
@media (min-width: 900px) {
  .hero--about { padding-top: 116px; }
  .hero--about .hero__top { grid-template-areas: "title copy"; align-items: start; }
  .hero--about .hero__copy { align-self: start; padding-top: 0; }
}
.about__banner {
  width: 100%; height: auto;
  aspect-ratio: 1424 / 476;
  object-fit: cover;
  border-radius: 15px;
  background: #e5f8f2;
  box-shadow: 0 20px 0 #00b67a;
  margin-bottom: 20px;
}
@media (min-width: 900px) {
  .hero--about .hero__media { margin-top: 136px; }
  .about__banner { box-shadow: 0 40px 0 #00b67a; margin-bottom: 40px; }
}

.staff__inner { display: grid; gap: 28px; justify-items: center; text-align: center; }
.staff__photo {
  width: min(240px, 70vw); aspect-ratio: 1; height: auto;
  border-radius: 50%; object-fit: cover; background: #e5f8f2;
}
.staff__quote {
  font-size: clamp(24px, 3.7vw, 56px);
  line-height: 1.25;
  font-style: italic; font-weight: 500;
  color: var(--gray-900);
}
@media (min-width: 900px) {
  .staff { padding-block: 109px; }
  .staff__inner { grid-template-columns: minmax(0, 381px) minmax(0, 886px); justify-content: space-between; align-items: center; text-align: left; gap: 65px; }
  .staff__photo { width: 100%; }
}

.values { padding-bottom: 40px; }
.values__title {
  text-align: center;
  font-size: clamp(24px, 3.7vw, 56px); line-height: 1.5; font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 24px;
}
.values__item + .values__item { border-top: 1px solid var(--line-2); }
.values__item .container { padding-block: 24px; }
.values__item dt { font-size: 20px; line-height: 1.3; font-weight: 600; margin-bottom: 10px; }
.values__item dd { font-size: 16px; line-height: 1.4; font-weight: 600; color: #808080; }
@media (min-width: 900px) {
  .values__title { margin-bottom: 44px; }
  .values__item .container { padding-block: 32px 46px; }
  .values__item:first-child .container { padding-top: 0; }
  .values__item dt { font-size: 32px; line-height: 1.1; margin-bottom: 26px; }
  .values__item dd { font-size: 24px; line-height: 1.2; }
}

/* ---------- Contact ---------- */
.contact-page { background: var(--soft); padding-block: 40px 56px; }
.contact-page__inner { display: grid; gap: 40px; }
.contact-page__info h1 {
  font-size: clamp(44px, 5.3vw, 80px); line-height: 1.05; font-weight: 600;
  color: var(--ink);
}
.contact-page__lead { margin-top: 16px; max-width: 495px; font-size: 14px; line-height: 1.65; font-weight: 500; color: var(--ink); }

.contact-details { margin-top: 32px; max-width: 545px; }
.contact-details li { display: flex; gap: 15px; padding-block: 18px; }
.contact-details li + li { border-top: 1px solid #e7e7e7; }
.contact-details li:first-child { padding-top: 0; }
.contact-details svg { width: 16px; height: 16px; flex-shrink: 0; fill: var(--ink); margin-top: 2px; }
.contact-details span { display: block; font-size: 14px; line-height: 21px; font-weight: 500; color: #808080; }
.contact-details strong { display: block; margin-top: 5px; font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.contact-details a:hover strong { color: var(--orange); }

.contact-page__form { margin: 0; display: block; padding: 0; max-width: none; }
.contact-page__form h2 { font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field textarea {
  display: block; width: 100%; height: 120px; min-height: 96px; resize: vertical;
  padding: 12px; border-radius: 10px; border: 1px solid #ddd; background: var(--soft);
  font: 500 12px/24px var(--font); color: var(--black);
}
.field textarea:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(245, 134, 52, .35); }
.field textarea[aria-invalid="true"] { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .3); }
.field--area .field__ph { top: 12px; transform: none; line-height: 24px; }
.field textarea:not(:placeholder-shown) + .field__ph { display: none; }
.contact-page .contact__status { text-align: left; }
.contact-page .contact__status.is-error { color: #c62828; }
.contact-page .contact__status.is-success { color: #2e7d32; }
.contact-page .btn--submit { justify-self: start; }

@media (min-width: 900px) {
  .contact-page { padding-block: 139px 200px; }
  .contact-page__inner { grid-template-columns: minmax(0, 545px) minmax(0, 552px); padding-left: 66px; column-gap: clamp(40px, 6.8vw, 103px); }
  .contact-page__lead { margin-top: 30px; font-size: 18px; line-height: 30px; }
  .contact-details { margin-top: 63px; }
  .contact-details li { padding-block: 20px; }
  .contact-details strong { font-size: 20px; line-height: 34px; }
  .contact-page__form { padding-top: 42px; }
  .contact-page__form h2 { font-size: 28px; line-height: 34px; margin: 0 0 5px 9px; }
  .field textarea { padding: 12px 24px; font-size: 16px; }
  .field--area .field__ph { left: 25px; }
}