.mercy-page {
    --night: #103b4a;
    --night-soft: #18586a;
    --ink: #173740;
    --paper: #eef4f2;
    --white: #fffdfa;
    --sand: #d7e8e1;
    --sky: #7fc9c4;
    --coral: #db8a61;
    --gold: #edbd67;
    --sage: #287b79;
    --muted: #526e72;
    background: var(--paper);
}

.mercy-page .outreach-header,
.mercy-page .outreach-footer { background: var(--night); }
.mercy-page .outreach-brand { color: var(--white); letter-spacing: .01em; }
.mercy-page .outreach-brand img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 1px solid rgba(237, 189, 103, .72);
    border-radius: 12px;
    background: var(--white);
    object-fit: cover;
}
.mercy-page .outreach-brand small { color: #c8dedc; font-size: .75rem; letter-spacing: .02em; }
.mercy-page .outreach-menu-toggle { border-color: rgba(237, 189, 103, .54); color: var(--white); }
.mercy-page .outreach-menu-toggle:hover,
.mercy-page .outreach-menu-toggle:focus-visible { background: rgba(127, 201, 196, .12); }
.mercy-page .outreach-nav a:hover,
.mercy-page .outreach-nav a:focus-visible { color: var(--gold); }
.mercy-page a:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }

.mercy-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    max-width: 1440px;
    min-height: 620px;
    margin-inline: auto;
    padding: clamp(2rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 5rem);
    background: radial-gradient(circle at 80% 15%, rgba(127, 201, 196, .22), transparent 35%), linear-gradient(135deg, #103b4a, #18586a 68%, #287b79);
    color: var(--white);
}
.mercy-hero-copy { max-width: 43rem; }
.mercy-eyebrow {
    color: #a9ddcf;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}
.mercy-hero h1 {
    margin-bottom: .75rem;
    color: var(--white);
    font-size: clamp(3.1rem, 6vw, 5.5rem);
    letter-spacing: -.045em;
    line-height: .98;
}
.mercy-hero-subtitle {
    color: var(--gold);
    font: clamp(1.35rem, 2.4vw, 1.8rem)/1.35 Georgia, serif;
    margin-bottom: 1.25rem;
}
.mercy-hero-copy > p:not(.mercy-eyebrow):not(.mercy-hero-subtitle) {
    max-width: 35rem;
    color: #e4efeb;
    font-size: clamp(1.08rem, 1.6vw, 1.23rem);
}
.mercy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.3rem; margin-top: 2rem; }
.mercy-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.15rem;
    border-radius: 999px;
    background: var(--gold);
    color: #113b49 !important;
    font-size: .95rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}
.mercy-button:hover { background: #f6d795; transform: translateY(-1px); }
.mercy-text-link { color: var(--white) !important; font-size: .94rem; font-weight: 700; text-underline-offset: .28rem; }
.mercy-logo-frame {
    width: min(100%, 475px);
    justify-self: center;
    margin: 0;
    padding: clamp(.5rem, 1.4vw, 1rem);
    border: 1px solid rgba(237, 189, 103, .68);
    border-radius: 1.6rem;
    background: #f5f1e9;
    box-shadow: 0 1.7rem 4rem rgba(0, 0, 0, .28);
    transform: rotate(1.2deg);
}
.mercy-logo-frame img { display: block; width: 100%; border-radius: 1rem; }

.mercy-story {
    padding: clamp(3rem, 7vw, 6rem) 1.25rem;
    background: linear-gradient(180deg, #e7f0ed, #f8faf7);
}
.mercy-story-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 6rem);
    max-width: 1120px;
    margin-inline: auto;
}
.mercy-story-copy h2 {
    max-width: 17ch;
    color: var(--night);
    font-size: clamp(2.25rem, 4.3vw, 3.8rem);
    letter-spacing: -.035em;
}
.mercy-story-copy p:not(.mercy-eyebrow) { max-width: 44rem; color: var(--ink); }
.mercy-devotion {
    padding: clamp(1.35rem, 3vw, 2.15rem);
    border: 1px solid rgba(16, 59, 74, .12);
    border-left: 4px solid var(--gold);
    border-radius: 0 1.25rem 1.25rem 0;
    background: var(--white);
    box-shadow: 0 1.2rem 3rem rgba(16, 59, 74, .09);
}
.mercy-devotion .mercy-eyebrow { color: var(--sage); }
.mercy-devotion h2 { color: var(--night); font-size: clamp(1.8rem, 3vw, 2.45rem); }
.mercy-devotion blockquote {
    margin: 1.25rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--coral);
    color: var(--night);
    font: clamp(1.25rem, 2.1vw, 1.65rem)/1.45 Georgia, serif;
}
.mercy-devotion p:not(.mercy-eyebrow) { color: var(--ink); }
.mercy-details { padding: clamp(3rem, 7vw, 6rem) 1.25rem; background: #eef4f2; }
.mercy-details-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .8fr);
    align-items: center;
    gap: clamp(2rem, 8vw, 7rem);
    max-width: 1120px;
    margin-inline: auto;
}
.mercy-details h2 { max-width: 16ch; color: var(--night); font-size: clamp(2.25rem, 4vw, 3.7rem); letter-spacing: -.03em; }
.mercy-details p:not(.mercy-eyebrow) { max-width: 45rem; color: var(--ink); }
.mercy-details .mercy-eyebrow { color: var(--sage); }
.mercy-inline-link { color: #145d68 !important; font-weight: 800; text-underline-offset: .28rem; }
.mercy-facts {
    margin: 0;
    padding: 1.2rem 1.4rem;
    border-left: 3px solid var(--coral);
    border-radius: 0 1rem 1rem 0;
    background: var(--white);
    box-shadow: 0 1rem 2.5rem rgba(16, 59, 74, .08);
}
.mercy-facts > div { padding: .9rem 0; border-bottom: 1px solid #dce8e4; }
.mercy-facts > div:last-child { border-bottom: 0; }
.mercy-facts dt { margin-bottom: .18rem; color: var(--sage); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mercy-facts dd { margin: 0; color: var(--ink); font-size: 1.03rem; font-weight: 700; line-height: 1.45; }
.mercy-page .outreach-footer small { color: #c8dedc; }

@media (max-width: 760px) {
    .mercy-hero { grid-template-columns: 1fr; gap: 2rem; min-height: 0; padding: 3.5rem 1.25rem 2.75rem; text-align: center; }
    .mercy-hero-copy { margin-inline: auto; }
    .mercy-hero h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
    .mercy-actions { justify-content: center; }
    .mercy-logo-frame { width: min(100%, 390px); transform: none; }
    .mercy-story-inner { grid-template-columns: 1fr; gap: 1.6rem; }
    .mercy-story-copy h2 { max-width: 19ch; }
    .mercy-details-inner { grid-template-columns: 1fr; gap: 1.7rem; }
    .mercy-details h2 { max-width: 18ch; }
}

@media (max-width: 380px) {
    .mercy-hero { padding-inline: 1rem; }
    .mercy-actions { flex-direction: column; align-items: stretch; }
    .mercy-text-link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .mercy-button { transition: none; }
    .mercy-button:hover { transform: none; }
}