/* public/Styles/about.css — our story + legal pages */

/* ── Hero ── */
.about-hero { display: grid; gap: var(--space-6); align-items: center; padding: var(--space-8) 0; }
@media (min-width: 900px) { .about-hero { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); padding: var(--space-10) 0 var(--space-8); } }
.about-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -.045em; line-height: 1.02; margin-bottom: var(--space-4); }
.about-hero h1 .serif-accent { font-size: 1.08em; }
.about-lede { font-size: var(--fs-lg); color: var(--muted); max-width: 52ch; }
.about-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 480px) { .about-actions .btn { flex: 1 1 100%; } }

.about-hero__photo { position: relative; }
.about-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl) 80px var(--radius-xl) var(--radius-xl); }
.about-hero__photo figcaption {
    position: absolute; left: var(--space-4); bottom: var(--space-4);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    background: var(--card); box-shadow: var(--shadow-2);
    font-size: var(--fs-xs); font-weight: 600;
}

/* ── Lime band, as on the landing page ── */
.about-band {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-6);
    padding: var(--space-5) var(--space-4); background: var(--lime); color: var(--green);
    font: 700 var(--fs-xs)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.about-band i { font-style: normal; font-size: 1.2rem; }
@media (max-width: 600px) { .about-band i { display: none; } .about-band { gap: var(--space-2) var(--space-4); } }

/* ── Promises ── */
.about-promises { padding: var(--space-10) 0 var(--space-8); }
.about-promises h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -.035em; max-width: 20ch; margin-bottom: var(--space-6); }
.promise-grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .promise-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .promise-grid { grid-template-columns: repeat(4, 1fr); } }
.promise-grid li { padding: var(--space-5); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.promise-num { display: block; margin-bottom: var(--space-4); font: 400 var(--fs-2xl)/1 var(--font-serif); color: var(--orange-text); }
.promise-grid h3 { margin-bottom: var(--space-2); }
.promise-grid p { font-size: var(--fs-sm); color: var(--muted); }

/* ── Contact / vendors ── */
.about-split { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .about-split { grid-template-columns: 1fr 1fr; } }
.about-panel { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--paper-deep); }
.about-panel h2 { margin-bottom: var(--space-2); }
.about-panel p { color: var(--muted); max-width: 46ch; }
.about-panel--dark { background: var(--green); }
.about-panel--dark h2 { color: var(--paper); }
.about-panel--dark p { color: rgba(248, 245, 238, .8); }
.about-panel--dark .eyebrow { color: var(--lime) !important; }
.about-panel--dark .eyebrow::before { background: var(--lime); }

/* ── Legal pages ── */
.legal-page { max-width: 760px; }
.legal-prose { padding-bottom: var(--space-8); color: var(--ink); font-size: 1.0625rem; line-height: 1.7; }
.legal-prose h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--fs-xl); scroll-margin-top: calc(var(--header-h) + 16px); }
.legal-prose p { margin-bottom: var(--space-4); }
.legal-prose a { color: var(--orange-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-prose strong { font-weight: 700; }
.check-list { margin-bottom: var(--space-4); }
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: var(--space-2); }
.check-list li::before {
    content: ''; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px;
    border-radius: 50%; background: var(--orange);
}