.mission-section {
  padding: 96px 48px;
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 80px; align-items: start;
  border-bottom: 0.5px solid var(--border);
}
.mission-left { position: sticky; top: 100px; }
.mission-statement {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 300; line-height: 1.4;
  color: var(--charcoal);
}
.mission-statement em { font-style: italic; color: var(--accent-dark); }
/* Capped to the measure the rest of the site reads at. Left to fill the
   column it ran past 100 characters a line, and on a wide screen it ran out
   above the portrait beside it, leaving a band of empty cream. */
.mission-body { font-size: 13px; line-height: 2.0; color: var(--mid); max-width: 660px; }
.mission-body p + p { margin-top: 1.3em; }
.mission-body a {
  color: var(--accent-dark); text-decoration: none;
  border-bottom: 0.5px solid var(--accent-dark);
}
.mission-body a:hover { color: var(--charcoal); border-color: var(--charcoal); }

.process-section {
  padding: 96px 48px;
  background: var(--panel);
  border-top: 0.5px solid var(--border);
}
.process-timeline {
  margin-top: 64px;
  display: flex; flex-direction: column;
}
.phase {
  display: grid; grid-template-columns: 120px 1fr 1fr;
  gap: 48px;
  padding: 40px 0;
  border-bottom: 0.5px solid var(--border);
  transition: background 0.2s;
}
.phase:last-child { border-bottom: none; }
.phase:hover { background: rgba(46,48,51,0.025); }
.phase-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; font-style: italic;
  color: var(--accent-dark); padding-top: 2px;
}
.phase-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 400;
  color: var(--charcoal); line-height: 1.2;
}
.phase-desc { font-size: 11px; line-height: 1.9; color: var(--mid); }

.values-section {
  padding: 96px 48px;
  border-bottom: 0.5px solid var(--border);
}
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--border); margin-top: 56px;
}
.value-card {
  background: var(--cream); padding: 52px 44px;
  transition: background 0.2s;
}
.value-card:hover { background: var(--cream-dark); }
.value-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 400;
  color: var(--charcoal); margin-bottom: 14px;
}
.value-body { font-size: 12px; line-height: 1.95; color: var(--mid); }

.location-band {
  display: grid; grid-template-columns: 1fr 1fr;
}
.location-left {
  background: var(--panel);
  padding: 80px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.location-right {
  background: var(--cream);
  min-height: 400px;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 32px;
}
.location-right svg { max-width: 100%; height: auto; }
.location-eyebrow {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 20px;
}
.location-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300; color: var(--charcoal);
  line-height: 1.1; margin-bottom: 28px;
}
.location-body {
  font-size: 12px; line-height: 1.9;
  color: var(--mid); margin-bottom: 40px;
}
.location-details { display: flex; flex-direction: column; gap: 20px; }
/* Someone who has read the whole About page is the readiest visitor there is,
   and the page only gave them a phone number. */
.location-cta { margin-top: 36px; align-self: flex-start; }
.location-detail-label {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 4px;
}
.location-detail-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 400;
  color: var(--charcoal);
}
.location-detail-value a {
  color: inherit; text-decoration: none;
  transition: color 0.2s;
}
.location-detail-value a:hover { color: var(--accent-dark); }


@media (max-width: 1080px) {
  .mission-section, .process-section, .values-section { padding: 72px 28px; }
  .mission-section { gap: 48px; }
  .location-left { padding: 64px 28px; }
  .value-card { padding: 40px 28px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .mission-section { grid-template-columns: 1fr; gap: 32px; }
  .mission-left { position: static; }
  .phase { grid-template-columns: 1fr; gap: 10px; padding: 32px 0; }
  .phase-num { padding-top: 0; }
  .values-grid { grid-template-columns: 1fr; }
  .location-band { grid-template-columns: 1fr; }
  .location-right { min-height: 300px; order: 2; }
  .location-right svg { width: 200px; height: auto; }
}

@media (max-width: 560px) {
  .mission-section, .process-section, .values-section { padding: 56px 20px; }
  .location-left { padding: 56px 20px; }
  .value-card { padding: 32px 20px; }
  .process-timeline { margin-top: 40px; }
}

/* The left column of the bio is sticky, so the portrait sits with the name
   while the text scrolls past it. Capped well under the column width: a face
   at full column width would outweigh everything else on the page. */
.studio-portrait {
  display: block;
  width: 100%; max-width: 240px;
  height: auto;
  margin-bottom: 32px;
}
@media (max-width: 860px) {
  .studio-portrait { max-width: 180px; margin-bottom: 24px; }
}