@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/caveat-latin-500-normal.woff2) format('woff2');}

/* ---------- Our story (about.html): soft sage and cream ---------- */
.about2 { --cream: #F7F5EF; --sage-bg: #ECF0E8; --deep: #1F3B2D; --text: #3B4740; --sage: #4E7360; --soft-line: #DCE3D7;
  background: var(--cream); color: var(--text); }
@media (prefers-color-scheme: dark) {
  .about2 { --cream: #142019; --sage-bg: #1A2A21; --deep: #E8EFE8; --text: #C9D6CC; --sage: #9CC2AA; --soft-line: #2B4134; }
}
.about2 h1, .about2 h2, .about2 h3 { font-family: var(--serif); color: var(--deep); font-weight: 500; }
.about2 h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.2; margin: 0 0 18px; }
.about2 p { margin: 0 0 1em; }
.a2-eyebrow { font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); font-weight: 700;
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px !important; }
.a2-eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.6; }
.a2-eyebrow.center { justify-content: center; }
.a2-eyebrow.center::after { display: none; }
.center { text-align: center; }

.a2-photo { background: linear-gradient(135deg, #E9E4D8, #DDE4D6); border-radius: 14px; position: relative; }
@media (prefers-color-scheme: dark) { .a2-photo { background: linear-gradient(135deg, #22332A, #1C2B23); } }

.a2-hero { padding: 64px 0 72px; }
.a2-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.a2-hero h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1.05; margin: 0 0 22px; letter-spacing: -0.01em; }
.a2-lede { font-size: 1.12rem; max-width: 30em; }
.a2-photo-hero { min-height: 300px; }
.a2-photo-hero, .a2-photo-story { background-size: cover; background-repeat: no-repeat; }
.a2-photo-hero { background-image: url(/img/about-hero.webp); background-position: 30% center; background-color: #EFE9DE; }
.a2-photo-story { background-image: url(/img/about-story.webp); background-position: left center; background-color: #EFE9DE; }
.a2-photo-hero .a2-tagline, .a2-photo-story .a2-note { color: #1F3B2D; }
.a2-tagline { position: absolute; top: 22px; right: 26px; text-align: right; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); opacity: 0.85; }

.a2-story { padding: 64px 0; }
.a2-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.a2-two > div:first-child p:not(.a2-eyebrow) { max-width: 31em; }
.a2-photo-story { min-height: 300px; }
.a2-note { position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(-6deg); font-family: 'Caveat', cursive; font-size: 1.7rem; line-height: 1.25; color: var(--deep); opacity: 0.8; margin: 0 !important; }

.a2-founders { background: var(--sage-bg); padding: 64px 0 72px; }
.a2-founders-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 32px; }
.a2-founders-head h2 { margin: 0; }
.a2-founders-head > p { margin: 0 0 6px; }
.a2-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.a2-card { background: var(--cream); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.a2-card-main { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 24px; padding: 0 22px 0 0; flex: 1; }
.a2-portrait { border-radius: 0 0 14px 0; min-height: 320px; }
.a2-card-main > div:last-child { padding: 22px 0 18px; }
.a2-role { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; margin: 0 0 4px !important; }
.a2-card h3 { font-size: 2.3rem; margin: 0 0 6px; line-height: 1.1; }
.a2-title { color: var(--deep); font-weight: 700; font-size: 0.98rem; }
.a2-card-main p { font-size: 0.97rem; }
.a2-badges { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.a2-badges li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; max-width: 13em; line-height: 1.35; }
.a2-badges svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--sage); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.a2-motto { margin: 0 !important; padding: 14px 18px; border-top: 1px solid var(--soft-line); text-align: center; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.a2-motto span { margin: 0 8px; opacity: 0.5; }

.a2-values { padding: 72px 0; }
.a2-values-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 48px; align-items: center; }
.a2-value-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a2-value-list li { text-align: center; padding: 0 14px; border-left: 1px solid var(--soft-line); }
.a2-value-list li:first-child { border-left: 0; }
.a2-value-list h3 { font-family: var(--sans) !important; font-weight: 700 !important; font-size: 1.02rem; margin: 14px 0 6px; color: var(--deep); }
.a2-value-list p { font-size: 0.92rem; margin: 0; }
.a2-icon { width: 66px; height: 66px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.a2-icon svg { width: 32px; height: 32px; fill: none; stroke: var(--deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.a2-icon.sage { background: #DCE8D6; } .a2-icon.sand { background: #F0E6D2; } .a2-icon.sky { background: #DCE5F0; } .a2-icon.rose { background: #EEDCE6; }
@media (prefers-color-scheme: dark) { .a2-icon svg { stroke: #1F3B2D; } }

.a2-close { position: relative; background: var(--sage-bg); padding: 40px 0 150px; overflow: hidden; }
.a2-close .a2-eyebrow { font-size: 0.75rem; }
.a2-button { display: inline-block; background: #3F6450; color: #F7F5EF; text-decoration: none; font-weight: 700; padding: 11px 22px; border-radius: 999px; }
.a2-button:hover { background: #2E5641; }
.a2-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; }
.a2-hills .h1 { fill: #B9CBB9; } .a2-hills .h2 { fill: #8FAE97; }
@media (prefers-color-scheme: dark) { .a2-hills .h1 { fill: #2B4535; } .a2-hills .h2 { fill: #36573F; } }

@media (max-width: 860px) {
  .a2-hero-grid, .a2-two, .a2-founders-head, .a2-cards, .a2-values-grid { grid-template-columns: 1fr; gap: 28px; }
  .a2-photo-hero, .a2-photo-story { min-height: 220px; }
  .a2-value-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .a2-value-list li:nth-child(3) { border-left: 0; }
}
@media (max-width: 520px) {
  .a2-card-main { grid-template-columns: 1fr; padding: 0 20px; }
  .a2-portrait { min-height: 220px; border-radius: 0 0 14px 14px; margin: 0 -20px; }
}