/* Founder-approved family-album direction and supplied family photographs. */
.about-page { --content-max: 80rem; color: var(--harbor-deep); }
.about-page .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.about-page .brand-lockup { display: block; inline-size: 12rem; max-inline-size: 100%; block-size: auto; }
.about-page .site-header { padding-block: 1.25rem; border-bottom-color: #e6e8e3; }
.about-page .button { border-radius: 2rem; padding-inline: 1.75rem; }
.about-cover { min-block-size: 38rem; background: #f8f8f4 url('/assets/images/about/hero-botanical.webp') center / cover no-repeat; }
.about-cover-inner { display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, .68fr); align-items: center; gap: 2.5rem; min-block-size: inherit; max-inline-size: 80rem; margin-inline: auto; padding: 3rem var(--page-gutter); }
.about-intro { align-self: center; }
.about-intro h1 { margin: 0 0 .75rem; font-size: 4rem; font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--harbor-deep); }
.about-intro-lead { max-inline-size: 16rem; margin: 0; font-size: 1.5rem; line-height: 1.35; color: #53625c; }
.about-intro .accent-rule { margin-block: 1.75rem; }
.about-intro-note { max-inline-size: 16rem; margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.45; color: #53625c; }
.family-album { display: grid; grid-template-columns: .88fr .88fr 1.18fr; align-items: center; gap: 1rem; min-inline-size: 0; }
.family-photo { min-inline-size: 0; margin: 0; padding: .45rem; background: #fff; border-radius: .65rem; box-shadow: 0 .75rem 2rem #17333720; }
.family-photo .photo-space { inline-size: 100%; background: #e9e8e1; border-radius: .3rem; }
.family-photo-grandmother { transform: rotate(-3deg) translateY(1.2rem); }
.family-photo-wife { transform: translateY(-1.2rem); }
.family-photo-couple { transform: rotate(3deg) translateY(1.2rem); }
.family-photo-grandmother .photo-space, .family-photo-wife .photo-space { aspect-ratio: .75; }
.family-photo-couple .photo-space { aspect-ratio: 1.16; }
.family-photo figcaption { font-family: Mukta, 'Noto Sans', sans-serif; padding: .4rem .15rem .2rem; color: var(--harbor); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.35; text-align: center; text-wrap: balance; }
.about-page .section { border-top: 0; }
.about-story { background: #fff; }
.about-layout { max-inline-size: 80rem; margin-inline: auto; }
.about-story h2 { max-inline-size: none; font-size: 2.75rem; font-weight: 800; margin-block-end: 2rem; }
.about-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; max-inline-size: none; }
.about-copy-experiences p:first-child { margin-block-start: 0; }
.about-copy-continuation { border-inline-start: 1px solid #d9ddd6; padding-inline-start: 4rem; }
.about-copy-continuation p:first-child { margin-block-start: 0; }
.about-copy p, .about-copy-continuation p { color: #53625c; font-size: 1.125rem; line-height: 1.55; }
.about-copy p:last-child { margin-block-end: 0; }
.about-statement { min-block-size: 19rem; display: flex; flex-direction: column; justify-content: center; background-color: #f2f3ed; background-position: center; background-size: cover; background-repeat: no-repeat; }
.about-statement-inner { max-inline-size: 80rem; inline-size: 100%; margin-inline: auto; }
.about-statement h2 { color: #386442; letter-spacing: .02em; font-size: 1rem; font-weight: 600; margin-block-end: .75rem; }
.about-page .about-statement p { max-inline-size: 45rem; margin: 0; color: var(--harbor-deep); font-size: 2.75rem; line-height: 1.18; font-weight: 400; }
.about-statement p span { color: #386442; font-style: italic; font-weight: 600; }
.about-mission { background-image: url('/assets/images/about/mission-watercolor.webp'); }
.about-vision { background-image: url('/assets/images/about/vision-watercolor.webp'); }
.about-vision .about-statement-inner { padding-inline-start: 43%; }
.about-vision .actions { max-inline-size: 80rem; inline-size: 100%; margin: 2rem auto 0; padding-inline-start: 43%; }
.about-vision .text-link { color: var(--harbor); }
.about-page .site-footer { border-top: 1px solid #e6e8e3; }
.about-page .footer-wordmark { max-inline-size: 12rem; }
@media (min-width: 80rem) {
  .about-page { --page-gutter: max(3.5rem, calc((100% - var(--content-max)) / 2)); }
  .about-cover-inner { padding-inline: 0; }
  .about-story { padding-block: 4.5rem; }
  .about-statement { padding-block: 4rem; }
}
@media (min-width: 56.25rem) {
  .family-album { padding-inline-end: 1rem; }
}
@media (max-width: 79.999rem) {
  .about-cover-inner { gap: 1.5rem; }
  .about-page .about-statement p { font-size: 2.25rem; }
}
@media (max-width: 56.249rem) {
  .about-cover-inner { grid-template-columns: 1fr; padding-block: 3rem; }
  .about-cover { min-block-size: 0; }
  .about-intro h1 { font-size: 3.25rem; }
  .about-intro-lead, .about-intro-note { max-inline-size: 32rem; }
  .family-album { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 1rem; margin-block: 1.5rem; }
  .family-photo { transform: none; }
  .family-photo .photo-space { aspect-ratio: .85; }
  .about-copy { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-copy-continuation { border: 0; padding: 0; }
  .about-story h2 { font-size: 2.25rem; }
  .about-statement { min-block-size: 0; padding-block: 3.5rem; }
  .about-vision .about-statement-inner, .about-vision .actions { padding-inline-start: 0; }
  .about-page .about-statement p { font-size: 2rem; }
}

/* Preserve face-centred crops within the existing family-album frames. */
.family-photo .photo-space { position: relative; overflow: hidden; }
.family-photo .family-portrait { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; border-radius: inherit; }

.family-photo .caption-note { font-family: inherit; display: block; margin-block-start: .25rem; font-size: .875rem; font-weight: 400; font-style: normal; }

/* Preserve the weighted album row, wrapping frames when enlarged captions need room. */
@media (min-width: 56.25rem) {
  .family-album { display: flex; flex-wrap: wrap; row-gap: 3.5rem; }
  .family-album > .family-photo { flex: .88 1 0; min-inline-size: min(100%, 9rem); }
  .family-album > .family-photo-couple { flex-grow: 1.18; }
}