/* Footer Style 21 — Outline Wordmark */
.epf-21 {
    --epf-bg: #000000;
    --epf-fg: #ffffff;
    --epf-muted: #a3a3a3;
    --epf-line: #333333;
    --epf-input: #141414;
    --epf-accent: var(--accent);
    --epf-tab: #222222;
    --epf-stripe: #d1d5db;
    --epf-serif: Georgia, 'Times New Roman', Times, serif;
    padding: 60px 0 0;
    font-family: 'Inter', var(--font-body, sans-serif);
}
[data-theme="dark"] .epf-21 {
    --epf-bg: #050505;
    --epf-line: #2e2e2e;
    --epf-tab: #1f1f1f;
    --epf-stripe: #c7cad1;
}

.epf-21__grid { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
.epf-21__lead { padding-right: 40px; }

/* Outlined wordmark */
.epf-21__wordmark {
    display: inline-block; max-width: 100%; margin-bottom: 25px;
    font-family: 'Montserrat', 'Arial Black', Impact, sans-serif; font-size: 42px; font-weight: 800;
    line-height: 1; letter-spacing: 4px; text-transform: uppercase; overflow-wrap: anywhere;
    /* Stroke painted under the fill (in the background colour) hides the
       overlapping contours of variable fonts and leaves a clean ~1.5px outline. */
    color: var(--epf-bg) !important; -webkit-text-stroke: 3px var(--epf-fg); paint-order: stroke fill;
    transition: -webkit-text-stroke-color .2s;
}
.epf-21__wordmark:hover { -webkit-text-stroke-color: var(--epf-accent); }
@supports not (-webkit-text-stroke: 1px #000) {
    .epf-21__wordmark { color: var(--epf-fg) !important; }
}
.epf-21__logo { margin-bottom: 25px; }

.epf-21__desc { max-width: 550px; margin-bottom: 35px; font-family: var(--epf-serif); font-size: 15px; line-height: 1.6; color: #d1d5db; }
.epf-21__socials { gap: 20px; }
.epf-21__socials .epf-social { font-size: 20px; }
.epf-21 .epf-21__socials a:hover { color: var(--epf-accent); }

/* Angled tab titles */
.epf-21__tab { display: flex; margin-bottom: 25px; border-bottom: 1px solid var(--epf-line); }
.epf-21__title {
    margin-bottom: -1px !important; padding: 8px 35px 8px 15px;
    font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--epf-fg);
    background: var(--epf-tab);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 0 100%);
}
.epf-21__col:hover .epf-21__tab { border-bottom-color: color-mix(in srgb, var(--epf-accent) 70%, var(--epf-line)); }

.epf-21__links li + li { margin-top: 12px; }
.epf-21__links a { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--epf-muted); }
.epf-21 .epf-21__links a:hover { color: var(--epf-fg); }

/* Hazard stripes */
.epf-21__stripes {
    height: 8px; margin: 50px 0 20px;
    background: repeating-linear-gradient(-45deg, var(--epf-stripe) 0 6px, var(--epf-bg) 6px 12px);
}

/* Bottom */
.epf-21__bottom { position: relative; padding: 15px 50px 30px; text-align: center; }
.epf-21__bottom .epf-copy { font-family: var(--epf-serif); font-size: 13.5px; color: #e5e7eb; }



@media (max-width: 992px) {
    .epf-21__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px 40px; }
    .epf-21__lead { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 600px) {
    .epf-21__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .epf-21__wordmark { font-size: 30px; letter-spacing: 2px; }
    .epf-21__stripes { margin-top: 44px; }
    .epf-21__bottom { padding: 10px 0 26px; }
    
}