.about-page {
    --about-ink: #132d30;
    --about-muted: #465e61;
    --about-line: #d5e6e6;
    --about-accent: #229093;
    --about-accent-text: #176e70;
    color: var(--about-ink);
    background: #fff;
    font-size: 1rem;
    line-height: 1.75;
}

.about-page h1, .about-page h2, .about-page h3 { margin: 0; line-height: 1.2; color: inherit; }
.about-page h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 750; }
.about-page h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; }
.about-page h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
.about-page p { margin: 0.875rem 0 0; color: var(--about-muted); }
.about-page a:focus-visible { outline: 0.125rem solid currentColor; outline-offset: 0.3125rem; }

.about-hero {
    color: #fff;
    background: linear-gradient(90deg, #102729ef, #12383aa8), url("../picture/simitch-top-banner.webp") center / cover;
}
.about-hero-inner { padding: 1.625rem 0 clamp(4.0625rem, 10vw, 9.375rem); }
.about-crumb { display: flex; gap: 0.75rem; align-items: center; margin-bottom: clamp(3.75rem, 10vw, 9.6875rem); font-size: 0.875rem; color: #e0f2f2; }
.about-crumb a { color: inherit; }
.about-page .about-label { margin: 0 0 0.9375rem; color: var(--about-accent-text); font-size: 0.8125rem; font-weight: 700; letter-spacing: .14em; }
.about-page .about-hero-copy { max-width: 38.75rem; color: #e0f2f2; font-size: clamp(1.0625rem, 2vw, 1.4375rem); }
.about-page .about-hero .about-label, .about-page .about-dark .about-label { color: #8cdddd; }
.about-page .about-button {
    display: inline-flex;
    align-items: center;
    gap: 1.375rem;
    margin-top: 1.75rem;
    padding: 0.75rem 1.25rem;
    background: #fff;
    color: #132d30;
    font-weight: 700;
}
.about-page .about-button:hover { background: #d5eeee; }

.about-section { padding: clamp(2rem, 4vw, 4rem) 0; }
.about-overview { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5625rem, 6vw, 5.625rem); }
.about-page figure { margin: 0; }
.about-photo img, .about-gallery img { display: block; width: 100%; object-fit: cover; }
.about-photo img { aspect-ratio: 16 / 10; }
.about-page figcaption { padding: 0.5rem 0; color: var(--about-muted); font-size: 0.875rem; }

.about-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: clamp(1.75rem, 5vw, 4rem) 0 0; }
.about-metrics div { border-top: 0.125rem solid var(--about-accent); padding-top: 0.875rem; }
.about-metrics dt { color: var(--about-accent-text); font-size: clamp(1.875rem, 5vw, 4rem); font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; }
.about-metrics dd { margin: 0.3125rem 0 0; color: var(--about-muted); }

.about-dark { background: #122d30; color: #fff; }
.about-page .about-dark p { color: #d0e5e5; }
.about-tint { background: #f1f8f8; }
.about-projects dl { margin: 1rem 0 0; }
.about-projects dt { color: var(--about-accent-text); font-weight: 700; }
.about-projects dd { margin: 0.25rem 0 0; color: var(--about-muted); }
.about-projects dd + dt { margin-top: 1rem; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; }
.about-grid article { padding: clamp(1.25rem, 3vw, 2.25rem); border: 0.0625rem solid var(--about-line); background: #fff; }
.about-tech article { background: #1a3a3d; border-color: #345b5e; }
.about-tech span { display: block; margin-bottom: 1.125rem; color: #8cdddd; font-weight: 700; letter-spacing: .12em; }

.about-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.875rem; margin: 1.75rem 0 0; padding: 0; list-style: none; counter-reset: stage; }
.about-process li { padding: 0.75rem 0; border-top: 0.125rem solid var(--about-line); counter-increment: stage; }
.about-process li::before { display: block; content: counter(stage, decimal-leading-zero); color: var(--about-accent-text); font-weight: 700; }
.about-gallery-heading {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 0.25rem solid var(--about-accent);
}
.about-page .about-gallery-heading .about-label { margin-bottom: 0.375rem; }
.about-page .about-gallery-heading h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.about-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.125rem; }
.about-gallery img { aspect-ratio: 4 / 3; background: #e6efef; }

.about-page .about-link { display: inline-block; margin-top: 1.25rem; color: var(--about-accent-text); font-weight: 700; }
.about-contact { padding: 0.5rem 0 1.125rem; border-top: 0.0625rem solid #45696b; font-style: normal; }
.about-contact a { color: #fff; text-decoration: underline; text-underline-offset: 0.1875rem; }

@media (max-width: 50rem) {
    .about-overview { grid-template-columns: 1fr; }
    .about-grid, .about-gallery, .about-metrics { grid-template-columns: repeat(2, 1fr); }
    .about-process { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 32.5rem) {
    .about-grid { grid-template-columns: 1fr; }
    .about-process { grid-template-columns: repeat(2, 1fr); }
}