/* 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 .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; }
}
/* Our Story: final mockup. Kept separate from shared homepage scope. */
.story-final { --story-ink:#013d5a; color:var(--story-ink); background:#fcf3e3; font-family:Mukta, sans-serif; font-size:1.125rem; line-height:1.4; }
.story-container { width:100%; max-width:80rem; margin-inline:auto; padding-inline:1.5rem; }
.story-section { padding-block:3rem; }
.story-final :where(h1,h2,h3,p,figure) { margin:0; }
.story-final :where(h1,h2,h3) { color:var(--story-ink); font-weight:800; line-height:1.1; }
.story-final h1 { font-size:3rem; max-width:40rem; }
.story-final h2 { font-size:2.375rem; }
.story-final h3 { font-size:1.5rem; }
.story-final p { margin-block-start:1rem; max-width:50rem; }
.story-final .story-eyebrow { margin-block:0 .5rem; font-size:.875rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.story-hero-grid, .story-family-grid, .story-values, .story-faq-grid { display:grid; gap:2rem; }
.story-hero figure { position:relative; max-width:32rem; }
.story-hero img { display:block; width:100%; max-height:25rem; object-fit:cover; object-position:center 30%; border-radius:1rem; }
.story-hero figcaption { position:absolute; inset:auto 1rem 1rem auto; padding:.35rem 1rem; border-radius:2rem; background:#fcf3e3; font-weight:800; }
.story-family { background:#dcefeb; }
.story-family-grid { margin-block:2rem; }
.story-family-grid img { display:block; width:100%; max-height:18rem; object-fit:cover; object-position:center 30%; border-radius:1rem; }
.story-family-grid h3 { margin-block-start:1rem; }
.story-question { background:#fffaf1; border-radius:.75rem; padding:1.5rem; }
.story-values { margin-block-start:2rem; }
.story-values article { padding:1.5rem; border-radius:.75rem; background:#dcefeb; }
.story-values article:nth-child(2) { background:#faefdf; }
.story-faq-grid { gap:.5rem 1rem; margin-block-start:1.5rem; }
.story-faq-grid > p, .story-faq-grid details { margin:0; padding:.75rem; border:1px solid #bdd3ce; border-radius:.35rem; }
.story-faq-grid summary { cursor:pointer; }
.story-closing { padding-block:2rem; background:#013d5a; color:#fff; }
.story-closing .story-container { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.story-closing h2 { color:#fff; }
.story-closing a { color:#013d5a; background:#f4a258; border-radius:3rem; padding:.75rem 1.5rem; font-weight:800; text-decoration:none; }
@media (min-width:56.25rem) { .story-hero-grid, .story-family-grid, .story-values, .story-faq-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .story-hero-grid { align-items:center; } }
.story-family-grid img { max-width:25rem; height:auto; max-height:none; object-fit:contain; object-position:center; margin-inline:auto; }
.story-answer-grid { display:grid; gap:1rem; align-items:center; }
.story-answer-grid img { display:block; width:100%; max-width:22rem; height:auto; justify-self:center; }
@media(min-width:56.25rem) { .story-answer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.story-values img { display:block; width:6rem; height:6rem; object-fit:cover; border-radius:50%; margin-block-end:1rem; }
.story-final, .story-final * { box-sizing:border-box; }
.story-hero-grid > *, .story-family-grid > *, .story-values > *, .story-faq-grid > * { min-width:0; overflow-wrap:anywhere; }
@media(max-width:35rem) { .story-final h1 { font-size:2.25rem; } }
.story-question { display:flex; align-items:center; gap:1.5rem; }
.story-question > img { flex:none; width:5rem; height:5rem; }
.story-question > div { min-width:0; }
@media(max-width:35rem) { .story-question { flex-wrap:wrap; } }
@media(min-width:56.25rem) { .story-hero-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); } }