/* ==========================================================================
   SMWF – About (Shared Components + Sections)
   Depends on global tokens (00-tokens.css):
   --smwf-surface, --smwf-bg, --smwf-ink, --smwf-accent, --smwf-ring,
   --smwf-shadow, --smwf-radius, --smwf-container
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .smwf-about-hero *,
    .smwf-about-story *,
    .smwf-about-approach *,
    .smwf-about-global *,
    .smwf-about-cta *,
    .smwf-pill,
    .smwf-card {
        transition: none !important;
        animation: none !important;
    }
}

/* ====== Shared Layout Primitives ====== */

.smwf-container {
    max-width: var(--smwf-container, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
}

.smwf-center {
    text-align: center;
}

.smwf-grid {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
}

.smwf-2cols {
    grid-template-columns: 1fr;
}

.smwf-3cols {
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .smwf-2cols {
        grid-template-columns: 1.1fr .9fr;
    }

    .smwf-3cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ====== Shared Type Styles ====== */

.smwf-head {
    margin: 0 0 .6rem;
    font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--smwf-ink, #2B1B17);
}

.smwf-subhead {
    margin: 0 0 1.25rem;
    font-size: clamp(1rem, .6vw + .95rem, 1.2rem);
    line-height: 1.6;
    color: color-mix(in oklab, var(--smwf-ink, #2B1B17) 80%, transparent);
}

/* ====== Shared UI: Cards & Pills ====== */

.smwf-card {
    background: var(--smwf-surface, #fff);
    border: 1px solid color-mix(in oklab, var(--smwf-ink, #2B1B17) 10%, transparent);
    border-radius: var(--smwf-radius, 16px);
    padding: clamp(1rem, 2.5vw, 1.25rem);
    box-shadow: 0 1px 2px color-mix(in oklab, var(--smwf-ink, #2B1B17) 8%, transparent);
    transition: box-shadow .2s ease, transform .2s ease;
}

.smwf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in oklab, var(--smwf-ink, #2B1B17) 12%, transparent);
}

.smwf-card h3 {
    margin: 0 0 .35rem;
    font-weight: 800;
    color: var(--smwf-ink, #2B1B17);
}

.smwf-card p {
    margin: 0;
    line-height: 1.6;
}

/* Pill buttons (with alt) */
.smwf-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem;
    border-radius: 999px;
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;

    background: color-mix(in oklab, var(--smwf-accent, #7C8A4D) 10%, var(--smwf-surface, #fff));
    color: var(--smwf-accent, #7C8A4D);
    border: 1px solid color-mix(in oklab, var(--smwf-accent, #7C8A4D) 30%, transparent);
    box-shadow: 0 1px 4px color-mix(in oklab, var(--smwf-ink, #2B1B17) 10%, transparent);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.smwf-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in oklab, var(--smwf-ink, #2B1B17) 12%, transparent);
}

.smwf-pill:focus-visible {
    outline: 2px solid var(--smwf-ring, #7C8A4D);
    outline-offset: 3px;
}

.smwf-pill--alt {
    background: var(--smwf-accent, #7C8A4D);
    color: #fff;
    border-color: color-mix(in oklab, var(--smwf-accent, #7C8A4D) 85%, transparent);
}

.smwf-pill--alt:hover {
    filter: brightness(1.02);
}

/* Contact list */
.smwf-contactlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.smwf-contactlist li {
    padding: .75rem 1rem;
    background: color-mix(in oklab, var(--smwf-ink, #2B1B17) 3%, var(--smwf-surface, #fff));
    border: 1px solid color-mix(in oklab, var(--smwf-ink, #2B1B17) 8%, transparent);
    border-radius: var(--smwf-radius, 16px);
}

/* CTA buttons row */
.smwf-cta-buttons {
    display: inline-flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ====== Section Skins (About) ====== */

.smwf-about-hero {
    background: linear-gradient(to bottom,
            color-mix(in oklab, var(--smwf-accent, #7C8A4D) 10%, transparent),
            transparent 55%),
        var(--smwf-bg, #f6f8f9);
    padding: clamp(2rem, 5vw, 3rem) 0;
}

.smwf-about-hero .smwf-subhead {
    max-width: 70ch;
}

.smwf-about-story {
    background: var(--smwf-surface, #fff);
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.smwf-about-story h2 {
    margin: 0 0 .5rem;
    font-weight: 800;
}

.smwf-about-approach {
    background: color-mix(in oklab, var(--smwf-ink, #2B1B17) 4%, var(--smwf-bg, #f6f8f9));
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.smwf-about-approach h2 {
    margin: 0 0 1rem;
    font-weight: 800;
}

.smwf-about-global {
    background: var(--smwf-surface, #fff);
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.smwf-about-global h2 {
    margin: 0 0 .5rem;
    font-weight: 800;
}

.smwf-about-cta {
    background: linear-gradient(to bottom,
            color-mix(in oklab, var(--smwf-accent, #7C8A4D) 12%, transparent),
            color-mix(in oklab, var(--smwf-ink, #2B1B17) 2%, var(--smwf-bg, #f6f8f9)));
    padding: clamp(1.75rem, 5vw, 3rem) 0;
}

.smwf-about-cta h2 {
    margin: 0 0 .35rem;
    font-weight: 900;
}

.smwf-about-cta p {
    margin: 0 0 1rem;
    color: color-mix(in oklab, var(--smwf-ink, #2B1B17) 80%, transparent);
}

/* ====== A11y & Small Enhancements ====== */

a:focus-visible {
    outline: 2px solid var(--smwf-ring, #7C8A4D);
    outline-offset: 3px;
    border-radius: 8px;
}

@media (min-width: 1000px) {
    .smwf-about-hero .smwf-head {
        max-width: 22ch;
    }

    .smwf-about-hero .smwf-subhead {
        max-width: 65ch;
    }
}