/* Scoped customer and founder stories, shared only by the homepage and About page. */
.story-eyebrow {
    color: #476753;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.family-story {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.25rem, 4vw, 3rem);
    margin-top: 2.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: #fbf6eb;
    border: 1px solid #e8dfce;
    border-radius: 1.25rem;
}
.family-story-photo { display: block; border-radius: .7rem; overflow: hidden; }
.family-story-photo img { width: 100%; height: auto; }
.family-story .family-story-copy h2 {
    font: 700 clamp(1.5rem, 2.6vw, 2.15rem)/1.2 var(--font-heading);
    color: #244c41;
    max-width: 25ch;
    margin: .65rem 0 1rem;
}
.family-story-copy > p:not(.story-eyebrow):not(.story-credit) { max-width: 56ch; color: #4c5d55; }
.story-text-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    margin-top: .5rem;
    font-weight: 800;
    color: #08577a;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.story-text-link:hover { color: #064058; }
.family-story .story-credit { color: #58665e; font-size: .75rem; margin-top: .15rem; }
.story-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.founder-intro {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    max-width: 860px;
    margin: 3rem auto;
    padding: 1.5rem;
    border-top: 1px solid #d8e3e5;
    border-bottom: 1px solid #d8e3e5;
}
.founder-intro img { width: 112px; height: 112px; object-fit: cover; border-radius: 50%; }
.founder-intro h2 { font: 700 clamp(1.3rem, 2vw, 1.65rem)/1.25 var(--font-heading); margin: .45rem 0 .65rem; }
.founder-intro p:not(.story-eyebrow) { color: #52616a; font-size: .95rem; }
.family-story a:focus-visible, .founder-intro a:focus-visible, .about-page a:focus-visible {
    outline: 3px solid #b55f17;
    outline-offset: 5px;
    border-radius: .2rem;
}
.about-page { background: #faf8f2; }
.about-shell { max-width: 1040px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.about-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #e0e4dc; }
.about-header img { width: 72px; height: auto; }
.about-header .story-text-link { margin: 0; font-size: .85rem; }
.about-main { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about-copy h1 { font: 700 clamp(2.2rem, 5vw, 3.7rem)/1.08 var(--font-heading); letter-spacing: -.035em; color: #164d5a; margin: .75rem 0 1.5rem; }
.about-copy > p:not(.story-eyebrow) { margin-bottom: 1.25rem; color: #465951; font-size: 1.05rem; }
.about-copy .about-signature { font-family: var(--font-heading); color: #164d5a; font-size: 1.4rem; margin-bottom: 0; }
.about-portrait { margin: .3rem 0 0; }
.about-portrait img { width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 12px 30px rgba(36, 76, 65, .12); }
.about-portrait figcaption { font-size: .8rem; color: #52655c; margin-top: 1rem; }
.about-portrait figcaption strong { display: block; color: #244c41; font-size: 1rem; }
.about-next { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #d8dfd5; }
.about-next p { color: #465951; margin-bottom: .75rem; }
.about-start { display: inline-block; background: #08577a; color: #fff; padding: .8rem 1.2rem; border-radius: .6rem; font-weight: 800; }
.about-start:hover { color: #fff; background: #063e57; }
.about-page footer { margin-top: 0; padding: 1.5rem 1rem; box-shadow: none; background: transparent; border-top: 1px solid #e0e4dc; }
.about-page footer p + p { margin-top: .5rem; }
@media (max-width: 700px) {
    .family-story { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .family-story-photo { width: min(100%, 210px); margin: 0 auto; }
    .family-story .family-story-copy h2 { max-width: none; }
    .founder-intro { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 2rem auto; }
    .founder-intro img { width: 80px; height: 80px; }
    .about-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .about-portrait { grid-row: 1; display: flex; align-items: center; gap: 1rem; }
    .about-portrait img { width: 112px; flex-shrink: 0; }
    .about-portrait figcaption { margin: 0; }
}