.about-page { background: #f7f5f2; color: var(--ink); }
.about-hero { background: linear-gradient(90deg,#130f12 0%,#24171c 52%,#5f1420 100%); color: #fff; }
.about-hero-inner { max-width: 1180px; margin: 0 auto; padding: 64px 28px 70px; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,420px); gap: 48px; align-items: center; }
.about-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 22px; color: #e5d6d9; font-size: 13px; }
.about-breadcrumb a { color: #fff; text-decoration: none; }
.about-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.about-hero h1 { max-width: 760px; margin: 0 0 20px; font: 400 50px/1.06 var(--serif); color: #fff; }
.about-hero-copy>p:not(.eyebrow):not(.about-breadcrumb) { max-width: 710px; margin: 0 0 20px; color: #f2e9e8; font-size: 18px; line-height: 1.65; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.about-portrait { margin: 0; }
.about-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 933/1400; object-fit: cover; border: 1px solid #eadde2; box-shadow: 0 28px 70px #0005; }
.about-shell { max-width: 1180px; margin: 0 auto; padding: 58px 28px 72px; }
.about-intro { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 42px; align-items: start; }
.about-content h2,
.about-panel h2,
.about-flow h2,
.about-faq h2 { margin: 42px 0 14px; font: 400 34px/1.14 var(--serif); color: #402d37; }
.about-content h2:first-child { margin-top: 0; }
.about-content p,
.about-content li,
.about-panel p,
.about-flow p,
.about-faq p { color: #5f575b; line-height: 1.72; }
.about-content p { margin: 0 0 16px; }
.about-content ul { margin: 0 0 18px; padding-left: 22px; }
.about-panel { position: sticky; top: 24px; padding: 24px; border: 1px solid #e2cbd0; border-radius: 8px; background: #fffefd; box-shadow: 0 18px 40px #3418180c; }
.about-panel h2 { margin-top: 0; font-size: 28px; }
.about-panel .button-primary,
.about-panel .button-secondary { width: 100%; margin-top: 10px; }
.about-focus-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 26px 0 8px; }
.about-focus-grid article,
.about-flow,
.about-faq { border: 1px solid #e7d4d9; border-radius: 8px; background: #fffefd; box-shadow: 0 12px 34px #2a14140a; }
.about-focus-grid article { padding: 22px; }
.about-focus-grid h3 { margin: 0 0 10px; font: 700 17px/1.35 var(--sans); color: #3d3037; }
.about-focus-grid p { margin: 0; color: #5f575b; line-height: 1.65; }
.about-flow { margin-top: 42px; padding: 30px; }
.about-flow h2 { margin-top: 0; }
.about-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding: 0; margin: 24px 0 0; list-style: none; }
.about-steps li { display: grid; gap: 10px; align-content: start; }
.about-steps span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wine); color: #fff; font-weight: 700; }
.about-steps h3 { margin: 0; font: 400 21px/1.22 var(--serif); color: #3f2d37; }
.about-steps p { margin: 0; font-size: 15px; }
.about-faq { margin-top: 24px; padding: 30px; }
.about-faq h2 { margin-top: 0; }
.about-faq h3 { margin: 24px 0 8px; font: 700 17px/1.35 var(--sans); color: #3d3037; }
.about-faq h3:first-of-type { margin-top: 0; }
.about-faq p { margin: 0; }
.about-links { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 30px; }
.about-links a { color: var(--wine); font-weight: 700; text-decoration: none; }
.about-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) {
 .about-hero-inner,
 .about-intro { grid-template-columns: 1fr; }
 .about-portrait { max-width: 460px; }
 .about-panel { position: static; }
 .about-focus-grid,
 .about-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .about-hero h1 { font-size: 42px; }
}
@media (max-width: 640px) {
 .about-hero-inner { padding: 44px 22px 52px; gap: 32px; }
 .about-shell { padding: 42px 22px 58px; }
 .about-hero h1 { font-size: 34px; }
 .about-hero-copy>p:not(.eyebrow):not(.about-breadcrumb) { font-size: 16px; }
 .about-hero-actions { flex-direction: column; align-items: stretch; }
 .about-hero-actions .button-primary,
 .about-hero-actions .button-secondary { width: 100%; }
 .about-focus-grid,
 .about-steps { grid-template-columns: 1fr; }
 .about-flow,
 .about-faq,
 .about-panel,
 .about-focus-grid article { padding: 22px; }
 .about-content h2,
 .about-flow h2,
 .about-faq h2 { font-size: 29px; }
}