/* Desktop reference: figma/o-nama.pdf. One responsive template and media config. */
.about-page .hero h1 { max-width: 600px; }
.about-page .hero h1 span { white-space: normal; }
.about-page .hero-copy > p { max-width: 580px; margin-top: 24px; }
.about-story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.about-image-frame { grid-column: 1 / span 6; padding: 12px; }
.about-story-media { width: 100%; aspect-ratio: 624 / 524; }
.about-story-copy { grid-column: 8 / -1; margin-left: -20px; }
.about-story-copy h2 { max-width: 520px; font-size: 32px; line-height: 1.3; }
.about-story-copy p { margin-top: 24px; color: var(--dark-01); font-size: 16px; line-height: 24px; }
.about-story-copy .button { margin-top: 32px; }
.about-values-grid { margin-top: 64px; }
.about-value { min-height: 264px; padding: 32px; }
.about-value h3 { margin-top: 16px; font-size: 20px; line-height: 30px; }
.about-value p { margin-top: 12px; color: var(--dark-01); font-size: 16px; line-height: 24px; }
.about-process { padding: 64px 44px; background: var(--brand-navy); color: var(--white); }
.about-process .support-card { color: var(--dark); }
.about-process .display-heading { max-width: 640px; }
.about-process .section-description { max-width: 760px; color: var(--light-02); font-size: 20px; line-height: 30px; }
.about-process-list { display: grid; gap: 24px; margin-top: 64px; }
.about-process-card { padding: 32px; border: 1px solid #ffffff0d; border-radius: var(--radius-medium); background: var(--dark-02); }
.about-process-number { display: block; margin-bottom: 64px; color: var(--brand-green); }
.about-process-card h3 { max-width: 704px; font-size: 24px; line-height: 1.3; }
.about-process-card p { max-width: 704px; margin-top: 16px; color: var(--light-02); font-size: 16px; line-height: 24px; }
.about-equipment .about-story-copy { grid-column: 1 / span 5; grid-row: 1; margin-left: 0; margin-right: -20px; }
.about-equipment .about-story-copy h2 { max-width: 420px; }
.about-equipment .about-image-frame { grid-column: 7 / -1; grid-row: 1; }
.about-page .contact-body > h2 { max-width: 500px; }

@media (max-width: 1119px) {
  .about-page .hero-copy > p { font-size: 14px; line-height: 21px; }
  .about-story { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about-story .about-image-frame, .about-story .about-story-copy { grid-column: 1; grid-row: auto; margin: 0; }
  .about-story-copy { padding-inline: 12px; }
  .about-story-copy h2 { font-size: 24px; line-height: 1.3; }
  .about-story-copy p { font-size: 14px; line-height: 21px; }
  .about-story-copy .button { width: 100%; }
  .about-values-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
  .about-value { min-height: 0; padding: 24px; }
  .about-value h3 { font-size: 16px; line-height: 24px; }
  .about-value p { font-size: 14px; line-height: 21px; }
  .about-process { width: 100%; padding: 40px 12px; border-radius: 0; }
  .about-process .process-layout { gap: 0; }
  .about-process .section-sidebar > .dot-label { grid-row: 1; margin-bottom: 16px; }
  .about-process .section-sidebar > .support-card { grid-row: 3; margin-top: 32px; }
  .about-process .section-body { grid-row: 2; }
  .about-process .section-description { margin-top: 24px; font-size: 14px; line-height: 21px; }
  .about-process-list { gap: 16px; margin-top: 32px; }
  .about-process-card { padding: 24px; }
  .about-process-number { margin-bottom: 32px; }
  .about-process-card h3 { font-size: 16px; line-height: 24px; }
  .about-process-card p { font-size: 14px; line-height: 21px; }
  .about-equipment .about-story-copy h2, .about-page .contact-body > h2 { max-width: none; }
}

@media (min-width: 600px) and (max-width: 1119px) {
  .about-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}