/* about.css */
.about-hero {
  padding: calc(var(--nav-h) + 5rem) 5vw 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  max-width: var(--max-w); margin: 0 auto 0;
  padding-bottom: 0;
}
.about-hero h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); }
.about-hero h1 em { font-style: italic; color: var(--sienna); }
.about-hero-img { overflow: hidden; }
.about-hero-img img { width: 100%; height: 520px; object-fit: cover; object-position: center; }

.about-story { padding: 7rem 0; }
.about-story-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; }
.about-story-text h2 { margin-bottom: 1.5rem; }
.about-story-text p { color: var(--warm-grey); margin-bottom: 1.2rem; }

.about-values { display: flex; flex-direction: column; gap: 0; }
.value-item {
  display: flex; gap: 1.2rem; padding: 1.8rem 0;
  border-bottom: 1px solid var(--border);
}
.value-item:first-child { border-top: 1px solid var(--border); }
.value-num {
  font-family: var(--serif-display); font-size: 1.5rem;
  font-weight: 700; color: var(--sienna); opacity: 0.4;
  line-height: 1; flex-shrink: 0; width: 2.5rem;
}
.value-item h4 { font-size: 1rem; margin-bottom: 0.4rem; }
.value-item p { font-size: 0.88rem; color: var(--warm-grey); line-height: 1.65; margin: 0; }

.about-divider-img {
  position: relative; height: 380px; overflow: hidden;
}
.about-divider-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.about-divider-caption {
  position: absolute; bottom: 1.5rem; right: 2rem;
  font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.08em; color: rgba(244,239,230,0.5);
  font-style: italic;
}

.about-contact { padding: 7rem 0; background: var(--parchment2); }
.about-contact-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6rem; align-items: start; }
.about-contact-inner > div p { color: var(--warm-grey); margin-top: 1rem; }

.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label {
  font-family: var(--sans); font-size: 0.75rem;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm-grey);
}
.form-field input, .form-field textarea {
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  background: var(--white); color: var(--ink);
  font-family: var(--serif-body); font-size: 0.95rem;
  outline: none; transition: border-color 0.2s;
  resize: vertical;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--sienna); }

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 3rem); }
  .about-hero-img img { height: 340px; }
  .about-story-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-contact-inner { grid-template-columns: 1fr; gap: 3rem; }
}