@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/source-sans-3-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
}

@font-face {
    font-family: Arvo;
    src: url("../fonts/arvo-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Arvo;
    src: url("../fonts/arvo-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --blue-900: #063d6a;
    --blue-800: #005a9c;
    --blue-700: #0271c2;
    --blue-100: #e8f4fb;
    --gold: #ffdd00;
    --gold-deep: #ef9b0f;
    --ink: #172532;
    --muted: #52616d;
    --paper: #ffffff;
    --soft: #f3f7fa;
    --border: #d7e1e8;
    --shadow: 0 18px 45px rgba(4, 54, 91, 0.13);
    --radius: 0.75rem;
    --shell: 75rem;
    --font-sans: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    --font-display: Arvo, Georgia, "Times New Roman", serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--blue-800);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--blue-900);
}

:focus-visible {
    outline: 0.2rem solid var(--gold-deep);
    outline-offset: 0.2rem;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    color: var(--blue-900);
    font-family: var(--font-display);
    line-height: 1.12;
}

h1 {
    max-width: 11ch;
    margin-bottom: 1.25rem;
    font-size: clamp(2.75rem, 7vw, 5.6rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

h3 {
    font-size: 1.45rem;
}

.shell {
    width: min(calc(100% - 2rem), var(--shell));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--paper);
    background: var(--blue-900);
    transform: translateY(-150%);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link:focus {
    transform: translateY(0);
}

.footer-base__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-header {
    position: relative;
    z-index: 20;
    background: var(--paper);
}

.masthead-visual {
    overflow: hidden;
    background: #edf0f1 url("../images/header-background.jpg") center 42% / cover no-repeat;
}

.masthead {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    min-height: 10rem;
}

.brand img {
    position: relative;
    z-index: 3;
    width: 10.5rem;
    border-radius: 50%;
    box-shadow: 0 0.7rem 2rem rgba(4, 54, 91, 0.15);
}

.masthead__contact {
    position: relative;
    z-index: 3;
    justify-self: end;
    padding: 0.8rem 1rem;
    color: var(--blue-900);
    background: rgba(255, 255, 255, 0.85);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-align: right;
}

.masthead__contact p {
    margin-bottom: 0.08rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.masthead__contact a {
    font-weight: 800;
}

.masthead__children {
    position: absolute;
    right: 20%;
    bottom: -9rem;
    width: 17rem;
    filter: grayscale(1);
    opacity: 0.95;
}

.masthead__donate {
    position: relative;
    z-index: 3;
}

.navigation-band {
    background: var(--gold);
}

.navigation-band__inner {
    min-height: 3.7rem;
}

.primary-nav > ul,
.submenu,
.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.8rem);
}

.primary-nav a,
.primary-nav summary {
    color: var(--ink);
    font-size: 0.91rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.primary-nav summary {
    padding: 0.9rem 0.25rem;
    list-style: none;
}

.primary-nav summary::-webkit-details-marker {
    display: none;
}

.primary-nav summary::after {
    content: " +";
    color: var(--blue-700);
}

.primary-nav details {
    position: relative;
}

.submenu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 50%;
    display: none;
    width: max-content;
    min-width: 15rem;
    padding: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    background: var(--blue-800);
    box-shadow: var(--shadow);
    transform: translateX(-50%);
}

details[open] > .submenu {
    display: block;
}

.submenu a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 0.35rem;
    color: var(--paper);
    font-size: 0.82rem;
    text-transform: none;
}

.submenu a:hover {
    color: var(--paper);
    background: var(--blue-700);
}

.nav-toggle {
    display: none;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    padding: 0.75rem 1.2rem;
    border: 2px solid transparent;
    border-radius: 0.35rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.65rem 1.4rem rgba(4, 54, 91, 0.16);
}

.button--gold {
    color: #172532;
    background: var(--gold);
}

.button--blue {
    color: var(--paper);
    background: var(--blue-800);
}

.button--red {
    color: var(--paper);
    background: #d60000;
    text-transform: uppercase;
}

.button--outline {
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.75);
}

.button--light {
    color: var(--blue-900);
    background: var(--paper);
}

.hero {
    position: relative;
    overflow: hidden;
    color: var(--paper);
    background:
        linear-gradient(90deg, rgba(0, 25, 44, 0.78), rgba(0, 25, 44, 0.4)),
        url("../images/header-background.jpg") center 60% / cover no-repeat;
}

.hero::before {
    position: absolute;
    inset: auto auto -11rem -8rem;
    width: 26rem;
    height: 26rem;
    border: 4rem solid rgba(255, 221, 0, 0.12);
    border-radius: 50%;
    content: "";
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.82fr);
    align-items: end;
    gap: 2rem;
    min-height: 34rem;
}

.hero__content {
    position: relative;
    z-index: 2;
    align-self: center;
    padding-block: 4.5rem;
}

.hero h1,
.story-band h2 {
    color: var(--paper);
}

.hero__lede {
    max-width: 42rem;
    margin-bottom: 2rem;
    font-size: clamp(1.12rem, 2vw, 1.35rem);
}

.hero__art {
    position: relative;
    align-self: center;
    min-height: 28rem;
}

.hero__sun {
    position: absolute;
    z-index: 1;
    right: 3%;
    bottom: 4%;
    width: 84%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.95;
}

.story-names {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    padding: 3rem 1rem;
    transform: rotate(-2deg);
}

.story-names span {
    display: grid;
    min-height: 6rem;
    place-items: end start;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 0.5rem;
    color: var(--paper);
    background: linear-gradient(145deg, rgba(0, 25, 44, 0.72), rgba(0, 90, 156, 0.56));
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    box-shadow: 0 0.8rem 1.8rem rgba(0, 25, 44, 0.25);
}

.home-donation-strip {
    color: var(--ink);
    background: var(--gold);
}

.home-donation-strip__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 35rem);
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 7vw, 6rem);
    padding-block: 2rem;
}

.home-donation-strip p {
    margin-bottom: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.eyebrow {
    margin-bottom: 0.6rem;
    color: var(--blue-700);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero .eyebrow,
.eyebrow--light {
    color: var(--gold);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.section {
    padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.services-intro {
    background: linear-gradient(to bottom, var(--blue-100) 0 30%, var(--paper) 30% 100%);
}

.section-heading {
    max-width: 62rem;
    margin: 0 auto 4rem;
    text-align: center;
}

.section-heading p:last-child {
    color: var(--muted);
    font-size: 1.1rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.service-card {
    padding: 1.2rem;
    border: 0;
    background: var(--paper);
    text-align: center;
}

.service-directory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.service-directory .service-card {
    overflow: hidden;
    padding: 0 0 1.5rem;
    border: 1px solid var(--border);
    box-shadow: 0 0.6rem 1.5rem rgba(4, 54, 91, 0.08);
}

.service-directory .service-card img {
    width: 100%;
    aspect-ratio: 25 / 14;
    object-fit: cover;
}

.service-directory .service-card h3,
.service-directory .service-card p {
    margin-inline: 1.25rem;
}

.service-directory .service-card h3 {
    margin-top: 1.25rem;
    font-weight: 400;
}

.service-directory--list {
    grid-template-columns: 1fr;
}

.service-directory--list .service-card {
    display: grid;
    grid-template-columns: minmax(12rem, 15rem) 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    border-top: 0.25rem solid var(--gold);
    text-align: left;
}

.service-directory--list .service-card img {
    grid-row: 1 / span 3;
    height: 100%;
    min-height: 12rem;
}

.service-directory--list .service-card h3,
.service-directory--list .service-card p {
    margin-inline: 0;
}

.service-directory--list .service-card h3 {
    margin-bottom: 0;
}

.service-directory--list .service-card a {
    justify-self: start;
}

.content-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-block: 2rem;
}

.content-card {
    padding: 1.25rem;
    border-top: 0.25rem solid var(--blue-700);
    background: var(--soft);
    box-shadow: 0 0.5rem 1.25rem rgba(4, 54, 91, 0.1);
}

.content-card h3 {
    margin-top: 0;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.location-card {
    padding: 1.25rem;
    border: 1px solid var(--border);
    background: var(--paper);
}

.location-card h3,
.location-card h4 {
    margin-top: 0;
}

.content-card img {
    width: min(100%, 16rem);
    margin-bottom: 1rem;
}

.quote-panel {
    margin-top: 2.5rem;
    padding: 2rem;
    border: 1px solid #b9d4e7;
    border-left: 0.45rem solid var(--blue-700);
    background: var(--soft);
}

.quote-panel blockquote {
    margin: 0;
    color: var(--blue-800);
    font-style: italic;
}

.accordion-list details {
    margin-block: 1rem;
    padding: 1.25rem 1.5rem;
    border-left: 0.4rem solid var(--blue-700);
    border-radius: 0.5rem;
    background: var(--paper);
    box-shadow: 0 0.5rem 1.25rem rgba(4, 54, 91, 0.12);
}

.accordion-list summary {
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.25rem;
}

.program-card {
    margin-block: 1.75rem;
    padding: 1.25rem;
    border-top: 0.3rem solid var(--blue-700);
    background: var(--paper);
    box-shadow: 0 0.5rem 1.25rem rgba(4, 54, 91, 0.1);
}

.program-card img {
    width: 100%;
    max-height: 30rem;
    object-fit: cover;
}

.service-cta {
    margin-top: 2rem;
    padding: 1.5rem;
    border-left: 0.35rem solid var(--gold);
    background: var(--soft);
}

.service-cta p:last-child {
    margin-bottom: 0;
}

.service-card__icon {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto 1.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--gold);
    background: var(--blue-800);
    font-size: 1.5rem;
}

.service-card p {
    color: var(--muted);
}

.service-card a,
.text-link {
    font-weight: 800;
}

.service-card a {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 0.25rem;
    color: var(--paper);
    background: linear-gradient(var(--blue-700), var(--blue-800));
    font-size: 0.78rem;
    text-decoration: none;
    text-transform: uppercase;
}

.story-band {
    padding-block: clamp(4rem, 7vw, 6.5rem);
    color: var(--paper);
    background: var(--blue-900);
}

.story-band__heading {
    max-width: 50rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.story-band__heading h2 {
    margin-bottom: 0.5rem;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 62rem;
    margin-inline: auto;
}

.testimonial-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.35rem;
    background: #00192c;
}

.testimonial-card img {
    width: 100%;
}

.testimonial-card h3 {
    margin: 0;
    padding: 0.8rem 1rem;
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: 1rem;
}

.story-band__action {
    margin: 2rem 0 0;
    text-align: center;
}

.feature-panels__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 0 3rem 0 3rem;
}

.feature-panels__grid > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-panel {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    min-height: 27rem;
    padding: clamp(2rem, 5vw, 4rem);
}

.feature-panel h2 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 850;
    text-transform: uppercase;
}

.feature-panel--gold {
    background: #f3a20a;
}

.feature-panel--blue {
    color: var(--paper);
    background: var(--blue-800);
}

.feature-panel--blue h2 {
    color: var(--paper);
}

.callout__inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 1rem;
    background: linear-gradient(125deg, #fff8c7, #ffdf16);
}

.callout h2 {
    max-width: 18ch;
    margin-bottom: 0.8rem;
}

.callout p:last-child {
    margin-bottom: 0;
}

.page-title-band {
    color: var(--paper);
    background: var(--blue-800);
}

.page-title-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 6rem;
}

.page-title-band h1 {
    margin: 0;
    color: var(--paper);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
}

.breadcrumb-band {
    color: var(--paper);
    background: var(--blue-700);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.breadcrumb-band .shell {
    display: flex;
    gap: 0.6rem;
    padding-block: 0.9rem;
}

.breadcrumb-band a {
    color: var(--paper);
}

.donate-page {
    padding-top: 3rem;
}

.donate-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
}

.donate-page__intro h2 {
    color: var(--ink);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    text-transform: uppercase;
}

.donation-embed {
    margin-top: 2rem;
    overflow: hidden;
    border-top: 0.25rem solid var(--gold);
    background: var(--paper);
}

.donation-embed iframe {
    display: block;
    width: 100%;
    height: 2350px;
    border: 0;
    overflow: hidden;
    scrollbar-width: none;
}

.donation-embed iframe::-webkit-scrollbar {
    display: none;
}

.embed-fallback {
    padding: 1rem;
    border: 1px solid var(--border);
    background: var(--soft);
    font-size: 0.95rem;
}

.donate-sidebar {
    padding: 1.8rem;
    border-top: 0.3rem solid var(--gold);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.donate-sidebar h2 {
    color: var(--ink);
    font-size: 1.6rem;
}

.donate-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.donate-sidebar li + li {
    margin-top: 0.7rem;
}

.donate-sidebar a {
    color: var(--ink);
    text-decoration: none;
}

.donate-sidebar__note {
    margin: 1.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.9rem;
}

.inner-page {
    padding-block: 3rem 5rem;
}

.inner-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
}

.prose {
    min-width: 0;
}

.prose h2 {
    margin-top: 0;
    color: var(--ink);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 400;
}

.prose h3 {
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 400;
}

.prose h4 {
    margin: 1.5rem 0 0.35rem;
    color: var(--blue-900);
    font-family: var(--font-display);
    font-size: 1.25rem;
}

.prose p,
.prose li {
    color: #37444e;
}

.page-feature-image {
    width: 100%;
    max-height: 30rem;
    margin-bottom: 2rem;
    object-fit: cover;
}

.page-feature-image--contain {
    object-fit: contain;
}

.inner-sidebar {
    display: grid;
    gap: 1.5rem;
}

.sidebar-card {
    overflow: hidden;
    border-top: 0.3rem solid var(--gold);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.sidebar-card > :not(img) {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

.sidebar-card h2 {
    margin-top: 1.4rem;
    color: var(--ink);
    font-size: 1.5rem;
}

.sidebar-card ul {
    margin-bottom: 1.5rem;
    padding: 0;
    list-style: none;
}

.sidebar-card li + li {
    margin-top: 0.55rem;
}

.sidebar-card a {
    color: var(--ink);
    text-decoration: none;
}

.sidebar-card a[aria-current="page"] {
    color: var(--blue-700);
    font-weight: 750;
}

.sidebar-card a[aria-current="page"]::before {
    content: "— ";
}

.sidebar-story img {
    width: 100%;
}

.sidebar-story p {
    margin-top: 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
}

.leadership-group + .leadership-group {
    margin-top: 3rem;
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.leader-card {
    text-align: center;
}

.leader-card img,
.leader-card__placeholder {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top center;
    background: var(--soft);
    box-shadow: 0 0.45rem 1.3rem rgba(4, 54, 91, 0.12);
}

.leader-card__placeholder {
    display: grid;
    place-items: center;
    color: var(--paper);
    background: linear-gradient(145deg, var(--blue-700), var(--blue-900));
    font-family: var(--font-display);
    font-size: 3rem;
}

.leader-card h3 {
    margin: 0.9rem 0 0.2rem;
    font-size: 1.3rem;
}

.leader-card p {
    font-size: 0.78rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.sponsor-list {
    margin-top: 2rem;
    border-top: 0.2rem solid var(--blue-700);
}

.sponsor-list section + section {
    margin-top: 1.5rem;
}

.safety-notice,
.form-placeholder,
.empty-state {
    margin-block: 2rem;
    padding: 1.5rem;
    border-left: 0.3rem solid var(--blue-700);
    background: var(--soft);
}

.form-placeholder {
    min-height: 15rem;
    border-top: 0.3rem solid var(--gold);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.form-placeholder h3,
.empty-state h3 {
    margin-top: 0;
}

.newsletter-placeholder {
    padding-block: 3.5rem;
    background: var(--paper);
}

.newsletter-placeholder__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
}

.newsletter-placeholder h2 {
    margin-bottom: 0;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.newsletter-placeholder__inner > p {
    margin-bottom: 0;
    color: var(--muted);
}

.giving-strip {
    padding-block: 2.4rem;
    color: var(--paper);
    background: var(--blue-800);
}

.giving-strip__inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 2rem;
}

.giving-strip h2 {
    margin-bottom: 0;
    color: var(--paper);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.giving-strip__amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.giving-strip__amounts span {
    padding: 0.45rem 0.65rem;
    border: 2px solid var(--gold);
    border-radius: 0.25rem;
    font-weight: 750;
}

.site-footer {
    color: #dceaf4;
    background: #082f50;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    padding-block: 4rem;
}

.footer-grid h2 {
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: 1.05rem;
}

.footer-grid a {
    color: var(--paper);
}

.footer-grid li + li {
    margin-top: 0.4rem;
}

.footer-logo {
    width: 7rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
}

.footer-base {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-base__inner {
    padding-block: 1.1rem;
}

.footer-base p {
    margin: 0;
}

.footer-base a {
    color: var(--paper);
}

@media (max-width: 68rem) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.7rem;
        border: 1px solid rgba(0, 25, 44, 0.35);
        border-radius: 0.35rem;
        color: var(--blue-900);
        background: var(--gold);
        font: inherit;
        font-weight: 800;
    }

    .nav-toggle span:first-child,
    .nav-toggle span:first-child::before,
    .nav-toggle span:first-child::after {
        display: block;
        width: 1.25rem;
        height: 2px;
        background: currentColor;
        content: "";
    }

    .nav-toggle span:first-child {
        position: relative;
    }

    .nav-toggle span:first-child::before {
        position: absolute;
        top: -0.38rem;
    }

    .nav-toggle span:first-child::after {
        position: absolute;
        top: 0.38rem;
    }

    .primary-nav {
        display: none;
        width: 100%;
        padding-bottom: 1rem;
    }

    .primary-nav.is-open {
        display: block;
    }

    .primary-nav > ul {
        display: block;
    }

    .primary-nav > ul > li {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .primary-nav > ul > li > a,
    .primary-nav summary {
        display: block;
        padding: 0.8rem;
        color: var(--paper);
    }

    .submenu {
        position: static;
        width: 100%;
        padding: 0 0 0.7rem 0.75rem;
        border: 0;
        box-shadow: none;
        transform: none;
    }

    .navigation-band__inner {
        padding-block: 0.5rem;
    }

    .primary-nav {
        margin-top: 0.5rem;
        background: var(--blue-800);
    }

    .hero__grid {
        grid-template-columns: 1fr 0.78fr;
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .donate-page__grid {
        grid-template-columns: minmax(0, 1fr) 14rem;
    }

    .inner-layout {
        grid-template-columns: minmax(0, 1fr) 14rem;
    }

    .leadership-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .service-directory {
        grid-template-columns: 1fr;
    }

    .service-directory--list .service-card,
    .content-card-grid,
    .location-grid {
        grid-template-columns: 1fr;
    }

    .service-directory--list .service-card img {
        grid-row: auto;
        min-height: 0;
    }

    .masthead {
        min-height: 8rem;
    }

    .brand img {
        width: 7.6rem;
    }

    .masthead__contact {
        display: none;
    }

    .masthead__children {
        display: none;
    }

    .masthead__donate {
        justify-self: end;
    }

    .hero__grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero__content {
        padding: 4.5rem 0 1rem;
    }

    .hero__art {
        width: min(28rem, 95%);
        margin-inline: auto;
    }

    .card-grid,
    .testimonial-grid,
    .feature-panels__grid,
    .footer-grid,
    .newsletter-placeholder__inner,
    .giving-strip__inner,
    .donate-page__grid,
    .home-donation-strip__inner,
    .inner-layout {
        grid-template-columns: 1fr;
    }

    .home-donation-strip__inner {
        justify-items: start;
    }

    .callout__inner {
        align-items: start;
        flex-direction: column;
    }

    .footer-base__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .giving-strip__inner {
        justify-items: start;
    }

    .feature-panels__grid > :nth-child(3) {
        order: 4;
    }

    .feature-panels__grid > :nth-child(4) {
        order: 3;
    }

    .feature-panel {
        min-height: auto;
    }

    .page-title-band__inner {
        min-height: 5rem;
    }

    .donate-sidebar {
        grid-row: 1;
    }

    .inner-sidebar {
        grid-row: 1;
    }

    .donation-embed iframe {
        height: 2650px;
    }
}

@media (max-width: 34rem) {
    .leadership-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   HOMEPAGE HERO - PHOTO COLLAGE OVERRIDE
   Modernized version of original Sunrise homepage
   ========================================================= */


/* MAIN HERO */

.hero {
    position: relative;
    overflow: hidden;
    color: var(--paper);
    background:
        linear-gradient(
            90deg,
            rgba(0, 30, 52, 0.90) 0%,
            rgba(0, 38, 67, 0.78) 48%,
            rgba(0, 38, 67, 0.48) 100%
        ),
        url("../images/header-background.jpg") center 60% / cover no-repeat;
}


/* subtle decorative circle in lower left */

.hero::before {
    position: absolute;
    left: -8rem;
    bottom: -13rem;
    width: 25rem;
    height: 25rem;
    border: 3.2rem solid rgba(255, 221, 0, 0.14);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}


/* remove previous large yellow circle */

.hero__sun {
    display: none !important;
}


/* HERO LAYOUT */

.hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(32rem, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    min-height: 36rem;
}


/* LEFT CONTENT */

.hero__content {
    position: relative;
    z-index: 4;
    align-self: center;
    padding-block: 5rem;
}


.hero h1 {
    max-width: 10ch;
    margin-bottom: 1.35rem;
    color: var(--paper);
    font-size: clamp(3.25rem, 5.7vw, 5.35rem);
    line-height: 1.06;
    text-wrap: balance;
}


.hero__lede {
    max-width: 40rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.96);
    font-size: clamp(1.08rem, 1.7vw, 1.3rem);
}


.hero .eyebrow {
    color: var(--gold);
}


/* =========================================================
   PHOTO COLLAGE
   ========================================================= */

.hero__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32rem;
}


/*
   Small decorative Sunrise-yellow pieces behind the photos.
   These provide color without covering the children's faces.
*/

.hero__art::before {
    position: absolute;
    z-index: 0;
    top: 2.5rem;
    right: -2rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: var(--gold);
    content: "";
    opacity: 0.95;
}


.hero__art::after {
    position: absolute;
    z-index: 0;
    bottom: 1.5rem;
    left: -1rem;
    width: 8rem;
    height: 8rem;
    border: 1.2rem solid rgba(255, 221, 0, 0.55);
    border-radius: 50%;
    content: "";
}


/* GRID HOLDING THE 6 CHILDREN */

.hero-kids {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: min(100%, 34rem);
    margin-inline: auto;
    padding: 1rem 0;
}


/* CHILD PHOTO BUTTON */

.hero-kid {
    --offset-y: 0rem;
    --rotation: 0deg;

    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 0.9 / 1;
    overflow: hidden;

    padding: 0;
    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0.2rem solid rgba(255, 255, 255, 0.92);
    border-radius: 0.2rem;

    color: var(--paper);
    background: var(--blue-900);

    box-shadow:
        0 0.75rem 1.8rem rgba(0, 19, 35, 0.28);

    cursor: pointer;

    transform:
        translateY(var(--offset-y))
        rotate(var(--rotation));

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}


/* stagger the photos like the older site */

.hero-kid--mikey {
    --offset-y: -0.8rem;
    --rotation: -1deg;
}


.hero-kid--taya {
    --offset-y: 0.45rem;
    --rotation: 0.7deg;
}


.hero-kid--jessie {
    --offset-y: -0.3rem;
    --rotation: -0.5deg;
}


.hero-kid--lacoria {
    --offset-y: 0.55rem;
    --rotation: 0.7deg;
}


.hero-kid--shaun {
    --offset-y: -0.6rem;
    --rotation: -0.7deg;
}


.hero-kid--nicole {
    --offset-y: 0.8rem;
    --rotation: 0.8deg;
}


/* PHOTO */

.hero-kid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 350ms ease,
        filter 350ms ease;
}


/* gradient behind name */

.hero-kid::after {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 45%;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 32, 56, 0),
            rgba(0, 32, 56, 0.88)
        );

    content: "";
    pointer-events: none;
}


/* CHILD NAME */

.hero-kid__name {
    position: absolute;
    z-index: 3;
    right: 0.65rem;
    bottom: 0.55rem;
    left: 0.65rem;

    display: block;

    margin: 0;
    padding: 0;

    color: var(--paper);
    background: transparent;

    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;

    text-shadow:
        0 0.1rem 0.25rem rgba(0, 0, 0, 0.8);
}


/* =========================================================
   PHOTO INTERACTION
   ========================================================= */

.hero-kid:hover,
.hero-kid:focus-visible {
    z-index: 10;

    border-color: var(--gold);

    box-shadow:
        0 1.25rem 2.75rem rgba(0, 18, 33, 0.45),
        0 0 0 0.22rem rgba(255, 221, 0, 0.2);

    transform:
        translateY(calc(var(--offset-y) - 0.45rem))
        rotate(0deg)
        scale(1.055);
}


.hero-kid:hover img,
.hero-kid:focus-visible img {
    transform: scale(1.055);
    filter:
        saturate(1.12)
        brightness(1.04)
        contrast(1.02);
}


/* yellow accent beneath name on hover */

.hero-kid__name::after {
    display: block;
    width: 0;
    height: 0.18rem;
    margin-top: 0.3rem;

    background: var(--gold);

    content: "";

    transition: width 220ms ease;
}


.hero-kid:hover .hero-kid__name::after,
.hero-kid:focus-visible .hero-kid__name::after {
    width: 2.4rem;
}


/* PROMPT */

.hero__story-prompt {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: -0.25rem;
    left: 0;

    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}


.hero__story-prompt span {
    margin-right: 0.35rem;
    color: var(--gold);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 68rem) {

    .hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(25rem, 0.9fr);

        gap: 1.5rem;
        min-height: 34rem;
    }


    .hero h1 {
        font-size: clamp(3rem, 6vw, 4.6rem);
    }


    .hero-kids {
        width: min(100%, 29rem);
        gap: 0.55rem;
    }


    .hero__art {
        min-height: 29rem;
    }


    .hero__art::before {
        width: 7rem;
        height: 7rem;
    }


    .hero__art::after {
        width: 6rem;
        height: 6rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 48rem) {

    .hero__grid {
        display: grid;
        grid-template-columns: 1fr;

        gap: 0;

        min-height: auto;
    }


    .hero__content {
        padding:
            4rem
            0
            2.5rem;
    }


    .hero h1 {
        max-width: 9ch;

        font-size:
            clamp(
                3rem,
                13vw,
                4.4rem
            );
    }


    .hero__lede {
        max-width: 34rem;
    }


    .hero__art {
        width: min(100%, 35rem);
        min-height: auto;

        margin:
            0
            auto
            3rem;

        padding:
            1rem
            0
            2.5rem;
    }


    .hero-kids {
        width: min(100%, 32rem);

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 0.55rem;

        padding-inline: 0.4rem;
    }


    .hero-kid {
        border-width: 0.15rem;
    }


    .hero__art::before {
        top: 0;
        right: -1.5rem;

        width: 7rem;
        height: 7rem;
    }


    .hero__art::after {
        bottom: 1rem;
        left: -1.5rem;

        width: 6rem;
        height: 6rem;

        border-width: 0.8rem;
    }


    .hero__story-prompt {
        bottom: 0;
    }

}


/* =========================================================
   SMALL PHONES
   Switch to 2 columns so faces don't become tiny
   ========================================================= */

@media (max-width: 34rem) {

    .hero__content {
        padding-top: 3.5rem;
    }


    .hero-kids {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 0.6rem;

        width: min(100%, 25rem);
    }


    .hero-kid {
        aspect-ratio: 1 / 1.02;
    }


    .hero-kid--mikey {
        --offset-y: -0.3rem;
    }


    .hero-kid--taya {
        --offset-y: 0.3rem;
    }


    .hero-kid--jessie {
        --offset-y: -0.2rem;
    }


    .hero-kid--lacoria {
        --offset-y: 0.3rem;
    }


    .hero-kid--shaun {
        --offset-y: -0.2rem;
    }


    .hero-kid--nicole {
        --offset-y: 0.35rem;
    }


    .hero-kid__name {
        font-size: 0.88rem;
    }


    .hero__art::before {
        right: -2rem;

        width: 6rem;
        height: 6rem;
    }


    .hero__art::after {
        left: -2rem;

        width: 5rem;
        height: 5rem;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .hero-kid,
    .hero-kid img,
    .hero-kid__name::after {
        transition: none !important;
    }


    .hero-kid:hover,
    .hero-kid:focus-visible {
        transform:
            translateY(var(--offset-y))
            rotate(var(--rotation));
    }

}
/* =========================================================
   ORIGINAL-STYLE SUNRISE HEADER
   ========================================================= */

.site-header {
    position: relative;
    z-index: 30;
    background: transparent;
}


/* =========================================================
   TOP MASTHEAD
   ========================================================= */

.masthead-visual {
    position: relative;
    overflow: visible;

    background:
        linear-gradient(
            90deg,
            rgba(16, 42, 75, 0.86),
            rgba(32, 59, 94, 0.74)
        ),
        url("../images/header-background.jpg")
        center 35% / cover no-repeat;
}


.masthead {
    position: relative;

    display: flex;
    align-items: flex-start;

    min-height: 10.35rem;

    padding-left: 13.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}


/* =========================================================
   LARGE SQUARE LOGO
   ========================================================= */

.brand {
    position: absolute;
    z-index: 20;

    top: 1.75rem;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 11.5rem;
    height: 11.5rem;

    padding: 1.1rem;

    background: #ffffff;

    box-shadow:
        0 0.3rem 0.8rem rgba(0, 26, 48, 0.12);
}


.brand img {
    position: static;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 0;

    box-shadow: none;
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

.masthead__contact {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: auto auto;

    justify-self: auto;

    gap: 3rem;

    margin: 0;
    padding: 0;

    color: #ffffff;
    background: transparent;

    font-size: 0.68rem;
    line-height: 1.65;
    text-align: left;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55);
}


.masthead__address,
.masthead__communication {
    display: flex;
    flex-direction: column;
}


.masthead__address strong,
.masthead__address span,
.masthead__communication span,
.masthead__communication a {
    margin: 0;
    padding: 0;

    color: #ffffff;

    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.01em;

    text-decoration: none;
    text-transform: uppercase;
}


.masthead__communication a:hover {
    color: var(--gold);
}


/* =========================================================
   BLACK + WHITE CHILDREN ABOVE NAV
   ========================================================= */

.masthead__children {
    position: absolute;
    z-index: 3;

    right: 7rem;
    bottom: -3.4rem;

    display: block;

    width: 21rem;
    max-width: none;

    filter: grayscale(1);

    opacity: 1;

    pointer-events: none;
}


/* =========================================================
   YELLOW NAVIGATION BAR
   ========================================================= */

.navigation-band {
    position: relative;
    z-index: 15;

    min-height: 3.2rem;

    background: var(--gold);

    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.05);
}


.navigation-band__inner {
    display: flex;
    align-items: center;

    min-height: 3.2rem;

    padding-left: 13.5rem;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.primary-nav {
    width: 100%;
}


.primary-nav > ul {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    gap: 0;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


.primary-nav > ul > li {
    position: relative;

    margin: 0;
    padding: 0;
}


.primary-nav > ul > li > a,
.primary-nav > ul > li > details > summary {
    display: flex;
    align-items: center;

    min-height: 3.2rem;

    padding:
        0
        clamp(0.72rem, 1.35vw, 1.15rem);

    color: #172532;

    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;

    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 160ms ease,
        background-color 160ms ease;
}


.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > details > summary:hover {
    color: #ffffff;
    background: var(--blue-800);
}


/* =========================================================
   PLUS SIGN
   ========================================================= */

.primary-nav summary {
    list-style: none;
}


.primary-nav summary::-webkit-details-marker {
    display: none;
}


.primary-nav summary::after {
    margin-left: 0.15rem;

    color: inherit;

    font-size: 0.85rem;
    font-weight: 800;

    content: "+";
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.primary-nav details {
    position: relative;
}


.submenu {
    position: absolute;
    z-index: 100;

    top: 100%;
    left: 0;

    display: none;

    width: 12.5rem;
    min-width: 12.5rem;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: #0868a8;

    box-shadow:
        0 0.6rem 1.4rem rgba(0, 26, 48, 0.25);

    transform: none;
}


details[open] > .submenu {
    display: block;
}


.submenu li {
    margin: 0;
    padding: 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.16);
}


.submenu li:last-child {
    border-bottom: 0;
}


.submenu a {
    display: block;

    padding:
        0.72rem
        0.85rem;

    border-radius: 0;

    color: #ffffff;

    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.25;

    text-decoration: none;
    text-transform: none;

    transition:
        padding-left 160ms ease,
        background-color 160ms ease;
}


.submenu a:hover {
    padding-left: 1rem;

    color: #ffffff;

    background: var(--blue-900);
}


/* =========================================================
   DONATE ITEM
   ========================================================= */

.primary-nav__donate {
    font-weight: 800 !important;
}


/* don't use old floating donate button */

.masthead__donate {
    display: none !important;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 68rem) {

    .masthead {
        min-height: 8.5rem;

        padding-left: 9.5rem;
    }


    .brand {
        width: 8rem;
        height: 8rem;

        top: 1.25rem;
    }


    .masthead__children {
        right: 2rem;
        bottom: -2.6rem;

        width: 16rem;
    }


    .masthead__contact {
        grid-template-columns: 1fr;

        gap: 0.25rem;
    }


    .navigation-band__inner {
        display: block;

        padding-left: 9.5rem;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }


    .nav-toggle {
        display: inline-flex;

        align-items: center;

        gap: 0.5rem;

        min-height: 2.5rem;

        padding: 0.6rem 0.75rem;

        border: 0;

        color: var(--blue-900);

        background: transparent;

        font: inherit;
        font-weight: 800;

        cursor: pointer;
    }


    .primary-nav {
        display: none;

        width: 100%;

        margin-top: 0.4rem;
        padding: 0;

        background: var(--blue-800);
    }


    .primary-nav.is-open {
        display: block;
    }


    .primary-nav > ul {
        display: block;
    }


    .primary-nav > ul > li {
        border-top:
            1px solid rgba(255, 255, 255, 0.16);
    }


    .primary-nav > ul > li > a,
    .primary-nav > ul > li > details > summary {
        display: block;

        min-height: auto;

        padding: 0.8rem 1rem;

        color: #ffffff;
    }


    .submenu {
        position: static;

        width: 100%;
        min-width: 0;

        box-shadow: none;
    }


    .submenu a {
        padding-left: 2rem;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 48rem) {

    .masthead {
        display: flex;

        align-items: center;
        justify-content: flex-end;

        min-height: 7.25rem;

        padding:
            1rem
            0
            1rem
            7.5rem;
    }


    .brand {
        top: 0.65rem;
        left: 0;

        width: 6.4rem;
        height: 6.4rem;

        padding: 0.6rem;
    }


    .masthead__contact {
        display: none;
    }


    .masthead__children {
        display: block;

        right: 0;
        bottom: -2rem;

        width: 11rem;

        opacity: 0.75;
    }


    .navigation-band__inner {
        min-height: 3rem;

        padding-left: 7.5rem;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 34rem) {

    .masthead {
        min-height: 6rem;

        padding-left: 6rem;
    }


    .brand {
        width: 5.2rem;
        height: 5.2rem;
    }


    .masthead__children {
        width: 9rem;
    }


    .navigation-band__inner {
        padding-left: 6rem;
    }

}

/* =========================================================
   BUTTON HOVER COLORS
   Keeps global link hover styles from changing button text
   ========================================================= */
.button--gold:hover,
.button--gold:focus-visible {
    color: var(--ink);
    background: #ffe83b;
}

.button--blue:hover,
.button--blue:focus-visible {
    color: var(--paper);
    background: var(--blue-900);
}

.button--red:hover,
.button--red:focus-visible {
    color: var(--paper);
    background: #b90000;
}

.button--outline:hover,
.button--outline:focus-visible {
    color: var(--blue-900);
    background: var(--paper);
    border-color: var(--paper);
}

.button--light:hover,
.button--light:focus-visible {
    color: var(--paper);
    background: var(--blue-800);
}
/* =========================================================
   FINAL HEADER + HERO CLEANUP
   Cleaner, lighter, less dreary
   ========================================================= */

/* -----------------------------
   TOP BAR: simplify and lighten
------------------------------ */

.site-header {
    position: relative;
    z-index: 30;
    background: transparent;
}

.masthead-visual {
    position: relative;
    overflow: visible;
    background:
        linear-gradient(
            90deg,
            rgba(16, 73, 120, 0.90) 0%,
            rgba(28, 91, 144, 0.78) 55%,
            rgba(53, 111, 163, 0.60) 100%
        ),
        url("../images/header-background.jpg") center 28% / cover no-repeat;
}

.masthead {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 6.15rem;
    padding: 0.9rem 0 0.9rem 11.25rem;
}

/* remove old clutter */
.masthead__contact,
.masthead__children {
    display: none !important;
}

/* logo */
.brand {
    position: absolute;
    z-index: 20;
    top: 0.8rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.2rem;
    height: 9.2rem;
    padding: 0.8rem;
    background: #ffffff;
    box-shadow: 0 0.4rem 1.1rem rgba(0, 31, 54, 0.14);
}

.brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

/* social row */
.masthead__social {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.social-link {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    text-decoration: none;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    backdrop-filter: blur(4px);
}

.social-link svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.social-link:hover,
.social-link:focus-visible {
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: 0 0.45rem 1rem rgba(0, 30, 52, 0.22);
}

.social-link--facebook:hover,
.social-link--facebook:focus-visible {
    background: #1877f2;
    border-color: #1877f2;
}

.social-link--x:hover,
.social-link--x:focus-visible {
    background: #111111;
    border-color: #111111;
}

.social-link--instagram:hover,
.social-link--instagram:focus-visible {
    background: linear-gradient(135deg, #fdc468, #df4996, #8a3ab9);
    border-color: transparent;
}

.social-link--vimeo:hover,
.social-link--vimeo:focus-visible {
    background: #1ab7ea;
    border-color: #1ab7ea;
}

.social-link--youtube:hover,
.social-link--youtube:focus-visible {
    background: #ff0000;
    border-color: #ff0000;
}

/* -----------------------------
   NAVIGATION
------------------------------ */

.navigation-band {
    position: relative;
    z-index: 15;
    min-height: 3.15rem;
    background: var(--gold);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.navigation-band__inner {
    display: flex;
    align-items: center;
    min-height: 3.15rem;
    padding-left: 11.25rem;
}

.primary-nav {
    width: 100%;
}

.primary-nav > ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav > ul > li > a,
.primary-nav > ul > li > details > summary {
    display: flex;
    align-items: center;
    min-height: 3.15rem;
    padding: 0 1rem;
    color: #172532;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        color 160ms ease,
        background-color 160ms ease;
}

.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > details > summary:hover {
    color: #ffffff;
    background: var(--blue-800);
}

.primary-nav summary {
    list-style: none;
}

.primary-nav summary::-webkit-details-marker {
    display: none;
}

.primary-nav summary::after {
    margin-left: 0.15rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: inherit;
    content: "+";
}

.primary-nav__donate {
    font-weight: 800 !important;
}

.primary-nav__give {
    min-height: 2.3rem !important;
    margin-left: 0.45rem;
    padding: 0 0.95rem !important;
    border-radius: 999px;
    color: #ffffff !important;
    background: var(--blue-800);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 45, 79, 0.14);
}

.primary-nav__give:hover,
.primary-nav__give:focus-visible {
    color: #ffffff !important;
    background: var(--blue-900) !important;
}

/* keep dropdown clean */
.submenu {
    background: #0868a8;
}

/* -----------------------------
   HERO: remove yellow circles + lighten
------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    color: var(--paper);
    background:
        linear-gradient(
            90deg,
            rgba(8, 60, 101, 0.88) 0%,
            rgba(13, 72, 118, 0.72) 48%,
            rgba(28, 93, 141, 0.48) 100%
        ),
        url("../images/header-background.jpg") center 60% / cover no-repeat;
}

/* remove all decorative yellow circles */
.hero::before,
.hero__art::before,
.hero__art::after {
    display: none !important;
    content: none !important;
}

.hero__grid {
    min-height: 34rem;
}

.hero__content {
    padding-block: 4.5rem;
}

.hero h1 {
    color: var(--paper);
}

.hero__lede {
    color: rgba(255, 255, 255, 0.95);
}

/* -----------------------------
   BUTTON HOVERS
------------------------------ */

.button--gold:hover,
.button--gold:focus-visible {
    color: var(--ink);
    background: #ffe83b;
}

.button--blue:hover,
.button--blue:focus-visible {
    color: var(--paper);
    background: var(--blue-900);
}

.button--red:hover,
.button--red:focus-visible {
    color: var(--paper);
    background: #b90000;
}

.button--outline:hover,
.button--outline:focus-visible {
    color: var(--blue-900);
    background: var(--paper);
    border-color: var(--paper);
}

.button--light:hover,
.button--light:focus-visible {
    color: var(--paper);
    background: var(--blue-800);
}

/* -----------------------------
   RESPONSIVE
------------------------------ */

@media (max-width: 68rem) {

    .masthead {
        min-height: 5.5rem;
        padding-left: 8.75rem;
    }

    .brand {
        width: 7.2rem;
        height: 7.2rem;
        top: 0.65rem;
    }

    .navigation-band__inner {
        padding-left: 8.75rem;
    }

    .masthead__social {
        gap: 0.45rem;
    }

    .social-link {
        width: 2.1rem;
        height: 2.1rem;
    }

    .primary-nav__give {
        margin-left: 0;
    }
}

@media (max-width: 48rem) {

    .masthead {
        min-height: 5rem;
        padding: 0.8rem 0 0.8rem 6.7rem;
    }

    .brand {
        width: 5.75rem;
        height: 5.75rem;
        top: 0.55rem;
        padding: 0.55rem;
    }

    .masthead__social {
        margin-left: auto;
        gap: 0.35rem;
    }

    .social-link {
        width: 1.95rem;
        height: 1.95rem;
    }

    .social-link svg {
        width: 0.9rem;
        height: 0.9rem;
    }

    .navigation-band__inner {
        padding-left: 6.7rem;
    }

    .primary-nav__give {
        display: inline-flex;
        justify-content: center;
        margin: 0.6rem 1rem 0.8rem;
    }
}
/* =========================================================
   NAVIGATION TYPOGRAPHY - CLEAN / MODERN
   ========================================================= */

/* Main yellow navigation */
.primary-nav > ul > li > a,
.primary-nav > ul > li > details > summary {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    line-height: 1;
    text-transform: uppercase;
}

/* Remove the old + signs completely */
.primary-nav summary::after {
    display: none !important;
    content: none !important;
}

/* Give dropdown items the cleaner old-site feel */
.submenu a {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.84rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

/* Slightly more comfortable menu spacing */
.primary-nav > ul > li > a,
.primary-nav > ul > li > details > summary {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
}

/* Cleaner dropdown sizing */
.submenu {
    min-width: 13.5rem;
    padding: 0;
    border-radius: 0 0 0.35rem 0.35rem;
}

/* More polished dropdown rows */
.submenu a {
    padding: 0.68rem 0.85rem;
}

.submenu a:hover {
    padding-left: 1rem;
}
/* =========================================================
   MODERN MAIN MENU HOVER
   ========================================================= */

.primary-nav > ul > li > a,
.primary-nav > ul > li > details > summary {
    position: relative;
    background: transparent !important;
    transition: color 160ms ease;
}

.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > details > summary:hover {
    color: var(--blue-900);
    background: transparent !important;
}

.primary-nav > ul > li > a::after,
.primary-nav > ul > li > details > summary::before {
    position: absolute;
    right: 1.05rem;
    bottom: 0.55rem;
    left: 1.05rem;

    height: 2px;

    background: var(--blue-800);

    content: "";

    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.primary-nav > ul > li > a:hover::after,
.primary-nav > ul > li > details > summary:hover::before {
    transform: scaleX(1);
}
/* =========================================================
   FINAL NAV POLISH
   No underline + strong Give Now button
   ========================================================= */


/* REMOVE ANIMATED UNDERLINES */

.primary-nav > ul > li > a::after,
.primary-nav > ul > li > details > summary::before {
    display: none !important;
    content: none !important;
}


/* SIMPLE, CLEAN MENU HOVER */

.primary-nav > ul > li > a,
.primary-nav > ul > li > details > summary {
    position: relative;
    color: var(--ink);
    background: transparent !important;

    transition:
        color 160ms ease,
        opacity 160ms ease;
}

.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > details > summary:hover {
    color: var(--blue-800);
    background: transparent !important;
}


/* =========================================================
   GIVE NOW - RESTORE STRONG BLUE CTA
   ========================================================= */

.primary-nav > ul > li > a.primary-nav__give {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 2.5rem !important;

    margin-left: 0.6rem;
    padding: 0 1.25rem !important;

    border: 0 !important;
    border-radius: 999px;

    color: #ffffff !important;
    background: var(--blue-800) !important;

    font-weight: 750 !important;
    letter-spacing: 0.02em;

    box-shadow:
        0 0.35rem 0.9rem rgba(0, 61, 106, 0.22);

    transition:
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease !important;
}

.primary-nav > ul > li > a.primary-nav__give:hover,
.primary-nav > ul > li > a.primary-nav__give:focus-visible {
    color: #ffffff !important;
    background: var(--blue-900) !important;

    transform: translateY(-2px);

    box-shadow:
        0 0.55rem 1.15rem rgba(0, 48, 84, 0.30);
}


/* Keep Donate slightly stronger than ordinary nav */
.primary-nav__donate {
    color: var(--blue-900) !important;
    font-weight: 750 !important;
}

.primary-nav__donate:hover {
    color: var(--blue-700) !important;
}


/* =========================================================
   DROPDOWN HOVER POLISH
   ========================================================= */

.submenu {
    margin-top: 0;
}

/* Slightly smoother dropdown rows */

.submenu a {
    transition:
        background-color 150ms ease,
        padding-left 150ms ease;
}

.submenu a:hover {
    color: #ffffff !important;
    background: var(--blue-900) !important;
    padding-left: 1rem;
}
/* =========================================================
   FINAL MOBILE NAVIGATION
   ========================================================= */

/* Mobile donate CTA stays hidden on desktop */
.mobile-nav-donate {
    display: none;
}


/* =========================================================
   TABLET / MOBILE NAV
   ========================================================= */

@media (max-width: 68rem) {

    /*
     * Yellow bar becomes:
     * [ MENU ]                    [ DONATE ]
     * [ expanded navigation underneath      ]
     */
    .navigation-band__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        min-height: 3.6rem;

        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }


    /* -------------------------
       HAMBURGER
       ------------------------- */

    .nav-toggle {
        display: inline-flex;
        align-items: center;

        gap: 0.6rem;

        min-height: 2.65rem;

        margin: 0;
        padding: 0.55rem 0.75rem;

        border: 0;
        border-radius: 0.3rem;

        color: var(--blue-900);
        background: transparent;

        font-family: "Source Sans 3", Arial, sans-serif;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;

        cursor: pointer;
    }


    .nav-toggle:hover,
    .nav-toggle:focus-visible {
        color: var(--blue-900);
        background: rgba(255, 255, 255, 0.25);
    }


    /* actual hamburger */

    .nav-toggle__icon,
    .nav-toggle__icon::before,
    .nav-toggle__icon::after {
        display: block;

        width: 1.35rem;
        height: 2px;

        border-radius: 2px;

        background: currentColor;

        content: "";

        transition:
            transform 180ms ease,
            top 180ms ease,
            opacity 180ms ease;
    }


    .nav-toggle__icon {
        position: relative;
    }


    .nav-toggle__icon::before {
        position: absolute;
        top: -0.42rem;
        left: 0;
    }


    .nav-toggle__icon::after {
        position: absolute;
        top: 0.42rem;
        left: 0;
    }


    /* Hamburger becomes X when open */

    .nav-toggle[aria-expanded="true"] .nav-toggle__icon {
        background: transparent;
    }


    .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
        top: 0;

        transform: rotate(45deg);
    }


    .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
        top: 0;

        transform: rotate(-45deg);
    }


    /* -------------------------
       MOBILE DONATE BUTTON
       ------------------------- */

    .mobile-nav-donate {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-height: 2.55rem;

        margin-left: auto;
        padding: 0 1.15rem;

        border-radius: 999px;

        color: #ffffff;
        background: var(--blue-800);

        font-family: "Source Sans 3", Arial, sans-serif;
        font-size: 0.78rem;
        font-weight: 750;
        letter-spacing: 0.035em;
        text-decoration: none;
        text-transform: uppercase;

        box-shadow:
            0 0.3rem 0.75rem rgba(0, 50, 88, 0.2);

        transition:
            transform 170ms ease,
            background-color 170ms ease,
            box-shadow 170ms ease;
    }


    .mobile-nav-donate:hover,
    .mobile-nav-donate:focus-visible {
        color: #ffffff;
        background: var(--blue-900);

        transform: translateY(-1px);

        box-shadow:
            0 0.45rem 0.9rem rgba(0, 44, 78, 0.26);
    }


    /* =====================================================
       EXPANDED MENU
       ===================================================== */

    .primary-nav {
        order: 10;

        display: none;

        flex-basis: 100%;
        width: 100%;

        margin: 0.35rem 0 0;
        padding: 0;

        border-radius: 0 0 0.4rem 0.4rem;

        background: var(--blue-800);

        box-shadow:
            0 0.8rem 1.7rem rgba(0, 35, 61, 0.2);
    }


    .primary-nav.is-open {
        display: block;
    }


    .primary-nav > ul {
        display: block;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    .primary-nav > ul > li {
        width: 100%;

        border-top:
            1px solid rgba(255, 255, 255, 0.13);
    }


    .primary-nav > ul > li:first-child {
        border-top: 0;
    }


    /*
     * Kill desktop hover treatment inside mobile drawer.
     */

    .primary-nav > ul > li > a,
    .primary-nav > ul > li > details > summary {
        display: flex !important;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 3.15rem;

        padding: 0.8rem 1rem !important;

        color: #ffffff !important;
        background: transparent !important;

        font-family: "Source Sans 3", Arial, sans-serif;
        font-size: 0.87rem;
        font-weight: 550;
        letter-spacing: 0.01em;
        line-height: 1.25;

        text-decoration: none;
        text-transform: none;

        cursor: pointer;
    }


    .primary-nav > ul > li > a:hover,
    .primary-nav > ul > li > details > summary:hover {
        color: #ffffff !important;

        background:
            rgba(255, 255, 255, 0.08) !important;
    }


    /* No desktop underline remnants */

    .primary-nav > ul > li > a::after,
    .primary-nav > ul > li > details > summary::before {
        display: none !important;

        content: none !important;
    }


    /* =====================================================
       MOBILE DROPDOWN CHEVRON
       ===================================================== */

    .primary-nav > ul > li > details > summary::after {
        display: block !important;

        flex: 0 0 auto;

        width: 0.5rem;
        height: 0.5rem;

        margin-left: 1rem;

        border-right: 2px solid rgba(255, 255, 255, 0.8);
        border-bottom: 2px solid rgba(255, 255, 255, 0.8);

        content: "" !important;

        transform: rotate(45deg);

        transition: transform 180ms ease;
    }


    .primary-nav > ul > li > details[open] > summary::after {
        transform: rotate(225deg);
    }


    /* =====================================================
       MOBILE SUBMENUS
       ===================================================== */

    .primary-nav details {
        width: 100%;
    }


    .primary-nav .submenu {
        position: static;

        display: none;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0.2rem 0 0.45rem;

        border: 0;
        border-radius: 0;

        background: rgba(2, 52, 91, 0.55);

        box-shadow: none;

        transform: none;
    }


    .primary-nav details[open] > .submenu {
        display: block;
    }


    .primary-nav .submenu li {
        border: 0;
    }


    .primary-nav .submenu a {
        display: block;

        padding: 0.68rem 1rem 0.68rem 2rem;

        color: rgba(255, 255, 255, 0.92);

        font-family: "Source Sans 3", Arial, sans-serif;
        font-size: 0.82rem;
        font-weight: 450;
        line-height: 1.3;

        background: transparent;
    }


    .primary-nav .submenu a:hover,
    .primary-nav .submenu a:focus-visible {
        padding-left: 2.15rem;

        color: #ffffff !important;

        background:
            rgba(255, 255, 255, 0.08) !important;
    }


    /* Donate already exists in mobile yellow bar */
    .primary-nav__donate {
        display: none !important;
    }


    /*
     * Keep Give Now as the final strong action
     * inside the expanded menu.
     */

    .primary-nav > ul > li > a.primary-nav__give {
        display: flex !important;
        justify-content: center;

        width: auto;

        min-height: 2.7rem !important;

        margin: 0.75rem 1rem 1rem;
        padding: 0 1rem !important;

        border-radius: 999px;

        color: var(--blue-900) !important;
        background: var(--gold) !important;

        font-weight: 750 !important;
        text-transform: uppercase;

        box-shadow: none;
    }


    .primary-nav > ul > li > a.primary-nav__give:hover {
        color: var(--blue-900) !important;
        background: #ffe83b !important;

        transform: none;
    }

}


/* =========================================================
   PHONE-SPECIFIC SPACING
   ========================================================= */

@media (max-width: 48rem) {

    /*
     * Leave room for overlapping Sunrise logo,
     * but don't push everything halfway across screen.
     */

    .navigation-band__inner {
        padding-left: 6.35rem;
        padding-right: 0.65rem;
    }


    .nav-toggle {
        padding-left: 0.45rem;
        padding-right: 0.6rem;
    }


    .mobile-nav-donate {
        min-height: 2.35rem;

        padding: 0 0.9rem;

        font-size: 0.74rem;
    }


    .primary-nav {
        /*
         * Pull drawer back beneath full yellow bar rather
         * than beginning after logo indentation.
         */
        width: calc(100% + 7rem);

        margin-left: -6.35rem;
        margin-right: -0.65rem;

        border-radius: 0;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 24rem) {

    .navigation-band__inner {
        padding-left: 5.7rem;
    }


    .nav-toggle__label {
        font-size: 0.74rem;
    }


    .mobile-nav-donate {
        padding-inline: 0.75rem;
    }

}
/* =========================================================
   SOLID ROCK CHILDREN'S RANCH STORY
   ========================================================= */

.solid-rock-story .story-date {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.3rem 0.65rem;
    border-radius: 0.2rem;
    color: var(--muted);
    background: var(--soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.solid-rock-story > h2 {
    margin-top: 2.6rem;
    margin-bottom: 0.75rem;
    color: var(--blue-900);
    font-size: clamp(1.6rem, 3vw, 2.15rem);
}

.solid-rock-photo {
    width: min(100%, 42rem);
    margin: 2.5rem 0;
}

.solid-rock-photo img {
    width: 100%;
    height: auto;
    box-shadow: 0 0.7rem 1.8rem rgba(4, 54, 91, 0.12);
}

.solid-rock-giving {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 0.3rem solid var(--gold);
}

.solid-rock-giving > h2 {
    margin-bottom: 1rem;
    color: var(--blue-900);
}

.solid-rock-giving > p {
    max-width: 48rem;
}

.solid-rock-donation {
    width: 100%;
    max-width: 46rem;
    margin: 2.5rem auto 0;
    overflow: hidden;
    background: var(--paper);
}

.solid-rock-donation iframe {
    display: block;
    width: 100%;
    height: 1904px;
    min-height: 1904px;
    border: 0;
}

@media (max-width: 48rem) {

    .solid-rock-photo {
        width: 100%;
    }

    .solid-rock-giving {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }

    .solid-rock-donation {
        max-width: 100%;
    }

}
/* =========================================================
   INTERNAL PAGE TITLE POLISH
   ========================================================= */

.page-title-band__inner {
    min-height: 0;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
}

.page-title-band h1 {
    width: 100%;
    max-width: none;
    margin: 0;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
}
.breadcrumb-band .shell {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
/* =========================================================
   SOLID ROCK QUOTES
   ========================================================= */

.solid-rock-story .quote-panel {
    margin-top: 1.35rem;
    margin-bottom: 1.65rem;

    padding: 1.4rem 1.6rem;

    border: 1px solid #b9d4e7;
    border-left: 0.3rem solid var(--blue-700);

    background: #f5f9fc;
}

.solid-rock-story .quote-panel blockquote {
    margin: 0;

    color: #32749f;

    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.65;
}
.solid-rock-story > h2 {
    margin-top: 2.6rem;
    margin-bottom: 0.75rem;
}

.solid-rock-story > h2:first-of-type {
    margin-top: 1.4rem;
}

.solid-rock-story > p {
    margin-bottom: 1rem;
}
/* =========================================================
   SOLID ROCK CHILDREN'S RANCH PAGE
   ========================================================= */

.solid-rock-page__hero {
    width: 100%;
    max-height: 34rem;
    object-fit: cover;
    object-position: center;
}


/* =========================================================
   INTRO
   ========================================================= */

.solid-rock-page__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.75fr);
    align-items: center;

    gap: clamp(2rem, 5vw, 4rem);

    margin-bottom: 4rem;
}

.solid-rock-page__intro-copy h2 {
    margin-bottom: 1rem;

    color: var(--blue-900);
}

.solid-rock-page__logo {
    width: min(13rem, 55%);
    max-height: 8rem;

    margin-bottom: 1.5rem;

    object-fit: contain;
    object-position: left center;
}

.solid-rock-page__intro-image {
    width: 100%;
    height: 100%;
    min-height: 22rem;

    object-fit: cover;

    box-shadow:
        0 0.8rem 2rem rgba(4, 54, 91, 0.14);
}


/* =========================================================
   CONTENT SECTIONS
   ========================================================= */

.solid-rock-section {
    margin-top: 4rem;
}

.solid-rock-section > h2,
.solid-rock-section > div > h2 {
    margin-bottom: 1rem;

    color: var(--blue-900);

    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.solid-rock-section .eyebrow {
    margin-bottom: 0.55rem;
}

.solid-rock-section p {
    max-width: 50rem;
}


/* =========================================================
   FEATURE SECTION
   ========================================================= */

.solid-rock-section--soft {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.85fr);
    align-items: center;

    gap: clamp(2rem, 5vw, 4rem);

    padding: clamp(2rem, 5vw, 3.5rem);

    border-left: 0.35rem solid var(--gold);

    background: var(--soft);
}

.solid-rock-section--soft img {
    width: 100%;
    height: 100%;
    min-height: 20rem;

    object-fit: cover;
}


/* =========================================================
   SITE PLAN
   ========================================================= */

.solid-rock-plan {
    margin: 3.5rem 0 1rem;
}

.solid-rock-plan img {
    width: 100%;

    border: 1px solid var(--border);

    box-shadow:
        0 0.7rem 1.8rem rgba(4, 54, 91, 0.1);
}


/* =========================================================
   RENDERINGS
   ========================================================= */

.solid-rock-renderings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.25rem;

    margin: 2.5rem 0 4rem;
}

.solid-rock-renderings figure {
    margin: 0;

    overflow: hidden;

    background: var(--soft);

    box-shadow:
        0 0.65rem 1.5rem rgba(4, 54, 91, 0.11);
}

.solid-rock-renderings figure:first-child {
    grid-column: 1 / -1;
}

.solid-rock-renderings img {
    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    transition:
        transform 350ms ease;
}

.solid-rock-renderings figure:hover img {
    transform: scale(1.025);
}


/* =========================================================
   HOPE SECTION
   ========================================================= */

.solid-rock-hope {
    position: relative;

    padding:
        clamp(2.5rem, 5vw, 4rem);

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            var(--blue-800),
            var(--blue-900)
        );
}

.solid-rock-hope h2 {
    color: #ffffff !important;
}

.solid-rock-hope p {
    color: rgba(255, 255, 255, 0.92);
}

.solid-rock-hope .eyebrow {
    color: var(--gold);
}


/* =========================================================
   CTA
   ========================================================= */

.solid-rock-page__cta {
    margin-top: 4rem;

    padding:
        clamp(2.3rem, 5vw, 4rem);

    border-top: 0.35rem solid var(--gold);

    background:
        linear-gradient(
            125deg,
            #f4f9fc,
            #e8f4fb
        );
}

.solid-rock-page__cta h2 {
    max-width: 18ch;

    margin-bottom: 1rem;

    color: var(--blue-900);
}

.solid-rock-page__cta p {
    max-width: 42rem;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 48rem) {

    .solid-rock-page__intro,
    .solid-rock-section--soft {
        grid-template-columns: 1fr;
    }

    .solid-rock-page__intro {
        gap: 1.5rem;

        margin-bottom: 3rem;
    }

    .solid-rock-page__intro-image,
    .solid-rock-section--soft img {
        min-height: 0;
    }

    .solid-rock-page__logo {
        width: min(11rem, 55%);
    }

    .solid-rock-section {
        margin-top: 3rem;
    }

    .solid-rock-renderings {
        grid-template-columns: 1fr;
    }

    .solid-rock-renderings figure:first-child {
        grid-column: auto;
    }

}
/* =========================================================
   SOLID ROCK CHILDREN'S RANCH CAMPAIGN PAGE
   ========================================================= */

.solid-rock-landing {
    background: var(--paper);
}


/* =========================================================
   HERO
   ========================================================= */

.solid-rock-campaign-hero {
    overflow: hidden;
    background: var(--blue-900);
}

.solid-rock-campaign-hero .shell {
    width: min(100%, 90rem);
}

.solid-rock-campaign-hero__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 39rem;
    object-fit: cover;
    object-position: center;
}


/* =========================================================
   YELLOW INTRO
   ========================================================= */

.solid-rock-campaign-intro {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    background: var(--gold);
}

.solid-rock-campaign-intro__inner {
    max-width: 68rem;
}

.solid-rock-campaign-intro h2 {
    max-width: 20ch;
    margin-bottom: 1rem;
    color: var(--blue-900);
    font-size: clamp(2rem, 4vw, 3rem);
}

.solid-rock-campaign-intro p {
    max-width: 56rem;
    color: var(--ink);
}

.solid-rock-campaign-intro .eyebrow {
    color: var(--blue-800);
}


/* =========================================================
   STANDARD SECTIONS
   ========================================================= */

.solid-rock-content-section {
    padding-block: clamp(4rem, 7vw, 6rem);
}

.solid-rock-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.65fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 6rem);
}

.solid-rock-main-copy {
    max-width: 64rem;
}

.solid-rock-content-section h2,
.solid-rock-gift-band h2 {
    margin-bottom: 0.8rem;
    color: var(--blue-900);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.solid-rock-content-section p,
.solid-rock-gift-band p {
    color: #37444e;
}

.solid-rock-kicker {
    margin-bottom: 0.4rem;
    color: var(--blue-700);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.solid-rock-kicker--light {
    color: var(--gold);
}


/* =========================================================
   RANCH LOGO
   ========================================================= */

.solid-rock-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.solid-rock-ranch-logo {
    width: min(100%, 16rem);
    height: auto;
}


/* =========================================================
   BLUE GIFT SECTION
   ========================================================= */

.solid-rock-gift-band {
    padding-block: clamp(4rem, 7vw, 6rem);
    color: #ffffff;
    background:
        linear-gradient(
            115deg,
            var(--blue-800),
            var(--blue-900)
        );
    border-bottom: 0.35rem solid var(--gold);
}

.solid-rock-gift-band h2 {
    color: #ffffff;
}

.solid-rock-gift-band p {
    color: rgba(255, 255, 255, 0.92);
}

.solid-rock-gift-image {
    width: 100%;
    max-height: 27rem;
    object-fit: cover;
    box-shadow: 0 1rem 2rem rgba(0, 25, 44, 0.25);
}


/* =========================================================
   PLAN
   ========================================================= */

.solid-rock-plan-image {
    width: min(100%, 52rem);
    margin: 2.5rem 0 4rem;
}

.solid-rock-plan-image img {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    box-shadow: 0 0.8rem 2rem rgba(4, 54, 91, 0.12);
}


/* =========================================================
   RENDERINGS
   ========================================================= */

.solid-rock-renderings-title {
    margin-top: 3.5rem;
    margin-bottom: 1rem;
    color: var(--ink);
}

.solid-rock-renderings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.solid-rock-renderings figure {
    margin: 0;
    overflow: hidden;
    background: var(--soft);
    box-shadow: 0 0.5rem 1.4rem rgba(4, 54, 91, 0.12);
}

.solid-rock-renderings img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 300ms ease;
}

.solid-rock-renderings figure:hover img {
    transform: scale(1.035);
}


/* =========================================================
   BLUE DIVIDER
   ========================================================= */

.solid-rock-blue-divider {
    height: clamp(4rem, 7vw, 7rem);
    border-bottom: 0.4rem solid var(--gold);
    background:
        linear-gradient(
            90deg,
            var(--blue-700),
            var(--blue-900)
        );
}


/* =========================================================
   DONATION SECTION
   ========================================================= */

#solid-rock-donation {
    scroll-margin-top: 2rem;
}

.solid-rock-donation-section {
    padding-block: clamp(4rem, 7vw, 6rem);
    background: #ffffff;
}

.solid-rock-donation-heading {
    max-width: 48rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.solid-rock-donation-heading h2 {
    margin-bottom: 0.9rem;
    color: var(--blue-900);
    font-size: clamp(2rem, 4vw, 3rem);
}

.solid-rock-donation-heading p:last-child {
    color: var(--muted);
}

.solid-rock-donation-form {
    width: min(100%, 46rem);
    margin-inline: auto;
    overflow: hidden;
    background: #ffffff;
}

.solid-rock-donation-form iframe {
    display: block;
    width: 100%;
    height: 1904px;
    min-height: 1904px;
    border: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 48rem) {

    .solid-rock-two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .solid-rock-campaign-hero .shell {
        width: 100%;
    }

    .solid-rock-ranch-logo {
        width: min(12rem, 55%);
    }

    .solid-rock-renderings {
        grid-template-columns: 1fr;
    }

    .solid-rock-plan-image {
        width: 100%;
    }

    .solid-rock-gift-image {
        max-height: none;
    }

}
/* =========================================================
   SECOND-LEVEL FLYOUT MENU
   Ongoing Parent Training
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1089px) {

    /* Parent row that owns the nested flyout */
    .primary-nav .submenu-parent {
        position: relative;
        overflow: visible;
    }

    .primary-nav .nested-dropdown {
        position: static;
        width: 100%;
    }


    /* Ongoing Parent Training row */
    .primary-nav .submenu .nested-dropdown > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding: 0.68rem 0.85rem;

        color: #ffffff;
        background: transparent;

        font-family: "Source Sans 3", Arial, sans-serif;
        font-size: 0.84rem;
        font-weight: 550;
        line-height: 1.3;

        text-transform: none;

        cursor: pointer;
    }

    .primary-nav .submenu .nested-dropdown > summary:hover {
        color: #ffffff;
        background: var(--blue-900);
    }


    /* Small right-facing arrow */
    .primary-nav .submenu .nested-dropdown > summary::after {
        display: block !important;

        margin-left: 1rem;

        color: rgba(255, 255, 255, 0.9);

        font-family: Arial, sans-serif;
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1;

        content: "›" !important;
    }


    /* Nested flyout opens to the RIGHT */
    .primary-nav .submenu--nested {
        position: absolute !important;

        z-index: 500;

        top: 0 !important;
        left: 100% !important;

        display: none !important;

        width: 18rem;
        min-width: 18rem;

        margin: 0 !important;
        padding: 0 !important;

        border: 0;
        border-radius: 0 0.4rem 0.4rem 0;

        background: var(--blue-900);

        box-shadow:
            0 0.8rem 1.8rem rgba(0, 30, 54, 0.3);

        transform: none !important;
    }


    /* Open on natural mouse rollover */
    .primary-nav .submenu-parent:hover
    > .nested-dropdown
    > .submenu--nested {
        display: block !important;
    }

    /* Also allow open state for keyboard accessibility */
    .primary-nav .submenu-parent
    > .nested-dropdown[open]
    > .submenu--nested {
        display: block !important;
    }


    /* Nested submenu rows */
    .primary-nav .submenu--nested li {
        margin: 0;
        padding: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.12);
    }

    .primary-nav .submenu--nested li:last-child {
        border-bottom: 0;
    }


    /* Nested submenu links */
    .primary-nav .submenu--nested a {
        display: block;

        padding: 0.8rem 1rem;

        color: #ffffff;

        background: transparent;

        font-family: "Source Sans 3", Arial, sans-serif;
        font-size: 0.83rem;
        font-weight: 500;
        line-height: 1.35;

        text-decoration: none;
        text-transform: none;

        transition:
            background-color 160ms ease,
            padding-left 160ms ease;
    }

    .primary-nav .submenu--nested a:hover,
    .primary-nav .submenu--nested a:focus-visible {
        padding-left: 1.15rem;

        color: #ffffff !important;

        background: var(--blue-800) !important;
    }


    /* Important: allow nested flyout outside first submenu */
    .primary-nav .submenu {
        overflow: visible !important;
    }

}


/* =========================================================
   MOBILE / TABLET
   Nested menu expands downward
   ========================================================= */

@media (max-width: 1088px) {

    .primary-nav .submenu-parent {
        width: 100%;
    }

    .primary-nav .nested-dropdown {
        width: 100%;
    }


    /* Ongoing Parent Training row */
    .primary-nav .submenu .nested-dropdown > summary {
        display: flex !important;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding:
            0.7rem
            1rem
            0.7rem
            2rem !important;

        color: rgba(255, 255, 255, 0.95) !important;

        background:
            rgba(0, 30, 55, 0.16) !important;

        font-family: "Source Sans 3", Arial, sans-serif;
        font-size: 0.83rem;
        font-weight: 500;

        text-transform: none;
    }


    /* Mobile chevron */
    .primary-nav .submenu .nested-dropdown > summary::after {
        display: block !important;

        width: 0.45rem;
        height: 0.45rem;

        margin-left: 1rem;

        border-right:
            2px solid rgba(255, 255, 255, 0.85);

        border-bottom:
            2px solid rgba(255, 255, 255, 0.85);

        content: "" !important;

        transform: rotate(45deg);

        transition: transform 180ms ease;
    }


    /* Rotate chevron when expanded */
    .primary-nav
    .nested-dropdown[open]
    > summary::after {
        transform: rotate(225deg);
    }


    /* Nested mobile submenu */
    .primary-nav .submenu--nested {
        position: static !important;

        display: none !important;

        width: 100%;
        min-width: 0;

        margin: 0 !important;
        padding: 0.2rem 0 0.4rem !important;

        border: 0;
        border-radius: 0;

        background:
            rgba(0, 24, 46, 0.32);

        box-shadow: none;

        transform: none !important;
    }


    .primary-nav
    .nested-dropdown[open]
    > .submenu--nested {
        display: block !important;
    }


    .primary-nav .submenu--nested a {
        display: block;

        padding:
            0.7rem
            1rem
            0.7rem
            3rem !important;

        color:
            rgba(255, 255, 255, 0.92) !important;

        font-family: "Source Sans 3", Arial, sans-serif;
        font-size: 0.8rem;
        font-weight: 450;

        background: transparent !important;

        text-transform: none;
    }


    .primary-nav .submenu--nested a:hover,
    .primary-nav .submenu--nested a:focus-visible {
        color: #ffffff !important;

        background:
            rgba(255, 255, 255, 0.08) !important;
    }

}
/* =========================================================
   PARENT TRAINING CALENDAR PAGES
   ========================================================= */

.training-calendar-page > h2 {
    margin-bottom: 1.25rem;

    color: var(--blue-900);
}

.training-calendar-intro {
    margin-bottom: 2rem;

    padding: 1.5rem 1.7rem;

    border-left: 0.35rem solid var(--gold);

    background: var(--blue-100);
}

.training-calendar-intro h3 {
    margin: 0;

    color: var(--blue-900);

    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 650;
    line-height: 1.5;
}

.training-calendar-embed {
    width: 100%;

    margin-top: 2rem;

    overflow: hidden;

    background: #ffffff;
}

.training-calendar-embed iframe {
    display: block;

    width: 100%;

    border: 0;
}

.training-calendar-embed--new iframe {
    height: 1600px;
    min-height: 1600px;
}

@media (max-width: 48rem) {

    .training-calendar-intro {
        padding: 1.2rem 1.3rem;
    }

}
.training-calendar-embed--current iframe {
    height: 600px;
    min-height: 600px;
}
/* =========================================================
   CHILD STORY MODAL
   ========================================================= */

.story-modal {
    width: min(94vw, 48rem);
    max-width: 48rem;
    max-height: 92vh;

    margin: auto;
    padding: 0;

    overflow: visible;

    border: 0;
    border-radius: 0.25rem;

    background: #ffffff;

    box-shadow:
        0 1.5rem 4rem rgba(0, 20, 35, 0.45);
}

.story-modal[open] {
    animation: storyModalIn 240ms ease-out;
}

.story-modal::backdrop {
    background: rgba(5, 22, 35, 0.78);

    backdrop-filter: blur(2px);
}


@keyframes storyModalIn {

    from {
        opacity: 0;
        transform: translateY(1rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   MODAL SCROLL AREA
   ========================================================= */

.story-modal__scroll {
    position: relative;

    max-height: 92vh;

    overflow-x: hidden;
    overflow-y: auto;

    background: #ffffff;
}


/* =========================================================
   STORY PHOTO
   ========================================================= */

.story-modal__photo {
    width: 100%;
    height: clamp(18rem, 45vw, 28rem);

    overflow: hidden;

    background: var(--blue-100);
}

.story-modal__photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   SUN ICON
   ========================================================= */

.story-modal__sun {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 3.7rem;
    height: 3.7rem;

    margin: -1.85rem auto 0;

    border-radius: 50%;

    color: var(--blue-900);
    background: var(--gold);

    font-size: 1.45rem;
    line-height: 1;

    box-shadow:
        0 0.35rem 0.7rem rgba(0, 31, 53, 0.25);
}


/* =========================================================
   STORY CONTENT
   ========================================================= */

.story-modal__content {
    padding:
        2rem
        clamp(1.5rem, 5vw, 4rem)
        2.5rem;

    text-align: center;
}

.story-modal__content h2 {
    max-width: none;

    margin: 0 0 1rem;

    color: var(--ink);

    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
}

.story-modal__copy {
    max-width: 40rem;

    margin-inline: auto;

    color: #414d56;

    font-size: 0.94rem;
    line-height: 1.7;
}

.story-modal__copy p {
    margin: 0 0 0.85rem;
}

.story-modal__copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   DONATE BUTTON
   ========================================================= */

.story-modal__action {
    margin: 1.8rem 0 0;
}

.story-modal__donate {
    width: min(100%, 30rem);

    justify-content: center;

    padding-inline: 1.4rem;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.story-modal__close {
    position: absolute;
    z-index: 20;

    top: -0.75rem;
    right: -0.75rem;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.7rem;
    height: 2.7rem;

    padding: 0;

    border: 0;
    border-radius: 50%;

    color: var(--blue-900);
    background: var(--gold);

    font-family: Arial, sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 0.35rem 0.7rem rgba(0, 25, 44, 0.3);

    transition:
        transform 160ms ease,
        background-color 160ms ease;
}

.story-modal__close:hover,
.story-modal__close:focus-visible {
    background: #ffe83b;

    transform: scale(1.08);
}


/* =========================================================
   AUTOMATIC CHILD CARD HIGHLIGHT
   Gives the same visual treatment to the card selected
   automatically by JavaScript.
   ========================================================= */

.hero-kid {
    transition:
        transform 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease,
        filter 300ms ease;
}

.hero-kid img {
    transition:
        transform 350ms ease,
        filter 350ms ease;
}


/*
 * Hover, keyboard focus AND automatic active card
 */
.hero-kid:hover,
.hero-kid:focus-visible,
.hero-kid.is-auto-active {
    z-index: 5;

    border-color: var(--gold) !important;

    transform:
        translateY(-5px)
        scale(1.025);

    box-shadow:
        0 0 0 3px var(--gold),
        0 1rem 2rem rgba(0, 35, 61, 0.28);
}

.hero-kid:hover img,
.hero-kid:focus-visible img,
.hero-kid.is-auto-active img {
    transform: scale(1.055);

    filter:
        brightness(1.07)
        saturate(1.06);
}

.hero-kid.is-auto-active .hero-kid__name {
    color: #ffffff;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.75);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 48rem) {

    .story-modal {
        width: calc(100vw - 1.5rem);
        max-height: 94vh;
    }

    .story-modal__scroll {
        max-height: 94vh;
    }

    .story-modal__photo {
        height: clamp(15rem, 68vw, 22rem);
    }

    .story-modal__content {
        padding:
            1.8rem
            1.25rem
            2rem;
    }

    .story-modal__copy {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .story-modal__close {
        top: 0.4rem;
        right: 0.4rem;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .story-modal[open] {
        animation: none;
    }

    .hero-kid,
    .hero-kid img {
        transition: none;
    }

}
/* =========================================================
   HOMEPAGE HERO SKY REFRESH
   lighter blue + subtle moving clouds
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #0f4d7b 0%,
            #2d6fa0 45%,
            #4b8fc1 100%
        );
}


/* keep content above animated layers */
.hero .shell,
.hero__grid,
.hero__content,
.hero__art {
    position: relative;
    z-index: 2;
}


/* subtle light wash to brighten the whole hero */
.hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.04) 35%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        radial-gradient(
            circle at 20% 18%,
            rgba(255, 255, 255, 0.12) 0,
            rgba(255, 255, 255, 0.06) 18%,
            transparent 36%
        ),
        radial-gradient(
            circle at 78% 14%,
            rgba(255, 255, 255, 0.10) 0,
            rgba(255, 255, 255, 0.05) 14%,
            transparent 32%
        );
}


/* animated cloud layer 1 */
.hero::after {
    content: "";

    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: 100%;
    z-index: 1;

    opacity: 0.33;

    background:
        radial-gradient(
            ellipse at 12% 18%,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(255, 255, 255, 0.18) 12%,
            rgba(255, 255, 255, 0.00) 24%
        ),
        radial-gradient(
            ellipse at 42% 22%,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.15) 10%,
            rgba(255, 255, 255, 0.00) 22%
        ),
        radial-gradient(
            ellipse at 70% 16%,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.15) 11%,
            rgba(255, 255, 255, 0.00) 23%
        ),
        radial-gradient(
            ellipse at 88% 28%,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.10) 8%,
            rgba(255, 255, 255, 0.00) 18%
        );

    filter: blur(8px);

    animation: sunriseCloudDrift 40s linear infinite;
}


/* second softer cloud layer */
.hero__grid::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    opacity: 0.18;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 18% 58%,
            rgba(255, 255, 255, 0.24) 0%,
            rgba(255, 255, 255, 0.10) 10%,
            rgba(255, 255, 255, 0.00) 22%
        ),
        radial-gradient(
            ellipse at 58% 70%,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.08) 10%,
            rgba(255, 255, 255, 0.00) 20%
        ),
        radial-gradient(
            ellipse at 86% 62%,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.08) 8%,
            rgba(255, 255, 255, 0.00) 18%
        );

    filter: blur(10px);

    animation: sunriseCloudDriftReverse 55s linear infinite;
}


@keyframes sunriseCloudDrift {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(6%);
    }
}

@keyframes sunriseCloudDriftReverse {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-4%);
    }
}


/* slightly brighter text contrast */
.hero__lede {
    color: rgba(255, 255, 255, 0.96);
}

.hero h1 {
    color: #ffffff;
}

.hero .eyebrow {
    color: #ffe100;
}


/* optional: soften the dark ground feel if you still have it */
.hero {
    border-bottom: 0;
}


/* accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero::after,
    .hero__grid::before {
        animation: none;
    }
}
/* =========================================================
   HOMEPAGE HERO — POLISHED SKY VERSION
   lighter, richer, more dimensional, subtle moving clouds
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            118deg,
            #0e4673 0%,
            #1f6396 36%,
            #3e88bd 72%,
            #68a9d4 100%
        );
}


/* keep actual content above all decorative layers */
.hero .shell,
.hero__grid,
.hero__content,
.hero__art {
    position: relative;
    z-index: 3;
}


/* =========================================================
   LIGHT / ATMOSPHERE LAYER
   ========================================================= */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 78% 22%,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.10) 18%,
            rgba(255, 255, 255, 0.00) 42%
        ),
        radial-gradient(
            circle at 18% 12%,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.04) 18%,
            rgba(255, 255, 255, 0.00) 36%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.04) 28%,
            rgba(255, 255, 255, 0.00) 62%
        );
}


/* =========================================================
   CLOUD LAYER 1
   ========================================================= */

.hero::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    width: 135%;
    left: -12%;

    opacity: 0.34;

    background:
        radial-gradient(
            ellipse at 10% 16%,
            rgba(255,255,255,0.34) 0%,
            rgba(255,255,255,0.20) 11%,
            rgba(255,255,255,0.08) 15%,
            rgba(255,255,255,0.00) 24%
        ),
        radial-gradient(
            ellipse at 34% 24%,
            rgba(255,255,255,0.26) 0%,
            rgba(255,255,255,0.16) 9%,
            rgba(255,255,255,0.06) 14%,
            rgba(255,255,255,0.00) 23%
        ),
        radial-gradient(
            ellipse at 57% 15%,
            rgba(255,255,255,0.28) 0%,
            rgba(255,255,255,0.16) 10%,
            rgba(255,255,255,0.05) 14%,
            rgba(255,255,255,0.00) 22%
        ),
        radial-gradient(
            ellipse at 80% 25%,
            rgba(255,255,255,0.24) 0%,
            rgba(255,255,255,0.14) 8%,
            rgba(255,255,255,0.05) 12%,
            rgba(255,255,255,0.00) 20%
        );

    filter: blur(10px);

    animation: sunriseCloudDrift 48s linear infinite;
}


/* =========================================================
   CLOUD LAYER 2
   ========================================================= */

.hero__grid::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    opacity: 0.18;

    background:
        radial-gradient(
            ellipse at 18% 54%,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0.08) 10%,
            rgba(255,255,255,0.00) 20%
        ),
        radial-gradient(
            ellipse at 48% 67%,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0.08) 9%,
            rgba(255,255,255,0.00) 20%
        ),
        radial-gradient(
            ellipse at 75% 58%,
            rgba(255,255,255,0.15) 0%,
            rgba(255,255,255,0.07) 8%,
            rgba(255,255,255,0.00) 18%
        );

    filter: blur(14px);

    animation: sunriseCloudDriftReverse 65s linear infinite;
}


/* =========================================================
   VERY SUBTLE GLOW BEHIND CARD AREA
   ========================================================= */

.hero__art::before {
    content: "";

    position: absolute;
    z-index: 0;
    pointer-events: none;

    top: 8%;
    right: 2%;
    width: 78%;
    height: 78%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.05) 28%,
            rgba(255, 255, 255, 0.00) 62%
        );

    filter: blur(20px);
}


/* =========================================================
   TEXT POLISH
   ========================================================= */

.hero h1 {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 26, 48, 0.16);
}

.hero__lede {
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 1px 2px rgba(0, 18, 36, 0.18);
}

.hero .eyebrow {
    color: #ffe100;
    letter-spacing: 0.12em;
}


/* =========================================================
   BUTTON POLISH
   ========================================================= */

.hero .button--gold {
    box-shadow:
        0 0.5rem 1.3rem rgba(0, 0, 0, 0.16);
}

.hero .button--outline {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(3px);
}


/* =========================================================
   KID CARDS LOOK BETTER ON LIGHTER SKY
   ========================================================= */

.hero-kid {
    backdrop-filter: blur(2px);
    box-shadow:
        0 0.55rem 1.4rem rgba(0, 35, 61, 0.18);
}

.hero-kid__name {
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6);
}


/* =========================================================
   CLOUD ANIMATION
   ========================================================= */

@keyframes sunriseCloudDrift {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(5.5%);
    }
}

@keyframes sunriseCloudDriftReverse {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-4%);
    }
}


/* =========================================================
   MOBILE TWEAKS
   ========================================================= */

@media (max-width: 68rem) {

    .hero {
        background:
            linear-gradient(
                135deg,
                #13517f 0%,
                #2f74a6 52%,
                #5ca3d1 100%
            );
    }

    .hero__art::before {
        top: 10%;
        right: 8%;
        width: 70%;
        height: 60%;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .hero::after,
    .hero__grid::before {
        animation: none;
    }

}
/* =========================================================
   HOMEPAGE SERVICES INTRO REFINEMENT
   better alignment + equal card heights + subtle hover
   ========================================================= */

/* overall section */
.services-intro {
    background: #f7f7f7;
}


/* top intro text area */
.services-intro .section-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 12rem;

    margin: 0 auto 3rem;
    padding: 2.5rem 1.5rem;

    text-align: center;

    background: #dfeef8;
}

.services-intro .section-heading p {
    max-width: 58rem;
    margin: 0 auto;

    color: #4a6072;
    font-size: 1.18rem;
    line-height: 1.7;
}


/* service card grid */
.services-intro .card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
}


/* service cards */
.services-intro .service-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 100%;
    padding: 1.25rem 1rem 1rem;

    text-align: center;

    background: transparent;
    border-radius: 0.75rem;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        background-color 220ms ease;
}


/* subtle hover */
.services-intro .service-card:hover {
    transform: translateY(-6px);

    background: rgba(255, 255, 255, 0.82);

    box-shadow:
        0 0.9rem 2rem rgba(10, 45, 74, 0.10);
}


/* icon */
.services-intro .service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    margin-bottom: 1.25rem;

    border-radius: 50%;

    color: #ffe100;
    background: #005ea8;

    font-size: 1.1rem;
    line-height: 1;
}


/* title */
.services-intro .service-card h3 {
    margin: 0 0 1rem;

    color: #0a3d68;
    font-size: clamp(1.35rem, 1.7vw, 1.7rem);
    line-height: 1.08;
}


/* body copy */
.services-intro .service-card p {
    margin: 0 0 1.4rem;

    color: #516273;
    font-size: 1.02rem;
    line-height: 1.75;
}


/* this is the key: button alignment */
.services-intro .service-card a {
    margin-top: auto;
}


/* keep button widths visually consistent */
.services-intro .service-card .button,
.services-intro .service-card a.button,
.services-intro .service-card a[href] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.25rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 78rem) {
    .services-intro .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 56rem) {
    .services-intro .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-intro .section-heading {
        min-height: auto;
        padding: 2rem 1.25rem;
    }

    .services-intro .section-heading p {
        font-size: 1.05rem;
    }
}

@media (max-width: 36rem) {
    .services-intro .card-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   SERVICES INTRO FINAL SPACING / TEXT POLISH
   ========================================================= */

.services-intro {
    padding-top: 1.5rem;
}

.services-intro .section-heading {
    min-height: 10rem;
    margin-top: 0;
    margin-bottom: 2.5rem;
    padding: 2rem 2rem;
}

.services-intro .section-heading p {
    max-width: 64rem;
    margin: 0 auto;

    text-wrap: pretty;
}
/* SERVICES INTRO — FINAL TEXT WRAP FIX */

.services-intro .section-heading p {
    width: 100%;
    max-width: 68rem;

    font-size: 1.08rem;
    line-height: 1.65;

    text-wrap: balance;
}
/* =========================================================
   SUNRISE FOUND ME VIDEO SLIDER
   ========================================================= */

.story-band {
    overflow: hidden;
}

.story-band__heading {
    max-width: 52rem;
    margin: 0 auto 2.25rem;

    text-align: center;
}


/* =========================================================
   SLIDER
   ========================================================= */

.testimonial-slider {
    position: relative;
    max-width: 64rem;
    margin-inline: auto;
}

.testimonial-slider__viewport {
    overflow: hidden;
}

.testimonial-slider__track {
    display: flex;
    gap: 1.5rem;

    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}


/* two videos visible on desktop */
.testimonial-video {
    flex: 0 0 calc(50% - 0.75rem);

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0.4rem;

    background: #032d4b;

    box-shadow:
        0 0.8rem 2rem rgba(0, 24, 43, 0.2);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}


/* very subtle lift */
.testimonial-video:hover {
    transform: translateY(-4px);

    border-color: rgba(255, 221, 0, 0.55);

    box-shadow:
        0 1.1rem 2.4rem rgba(0, 24, 43, 0.28);
}


/* =========================================================
   VIMEO FRAME
   ========================================================= */

.testimonial-video__frame {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #001e33;
}

.testimonial-video__frame iframe {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.testimonial-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    margin-top: 1.6rem;
}


/* arrows */

.testimonial-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.75rem;
    height: 2.75rem;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);

    font-family: Arial, sans-serif;
    font-size: 1.8rem;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}

.testimonial-slider__arrow:hover,
.testimonial-slider__arrow:focus-visible {
    color: var(--blue-900);
    background: var(--gold);
    border-color: var(--gold);

    transform: scale(1.06);
}


/* dots */

.testimonial-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;
}

.testimonial-slider__dot {
    width: 0.55rem;
    height: 0.55rem;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    cursor: pointer;

    transition:
        width 180ms ease,
        background-color 180ms ease;
}

.testimonial-slider__dot.is-active {
    width: 1.5rem;

    border-radius: 999px;

    background: var(--gold);
}


/* =========================================================
   VIEW ALL BUTTON
   ========================================================= */

.story-band__action {
    margin-top: 2rem;
    text-align: center;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 48rem) {

    .testimonial-slider__track {
        gap: 1rem;
    }

    .testimonial-video {
        flex-basis: 100%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .testimonial-slider__track,
    .testimonial-video {
        transition: none;
    }

}
/* =========================================================
   HOMEPAGE HERO — FINAL MOBILE SIZE FIX
   ========================================================= */

@media (max-width: 48rem) {

    .hero__grid {
        display: block !important;
        min-height: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    .hero__content {
        padding-top: 2.5rem !important;
        padding-bottom: 1.5rem !important;
    }


    .hero .eyebrow {
        margin-bottom: 0.75rem !important;

        font-size: 0.72rem !important;
        line-height: 1.2 !important;
    }


    .hero h1 {
        width: 100% !important;
        max-width: 10ch !important;

        margin-bottom: 1.15rem !important;

        font-size: 2.85rem !important;
        line-height: 1.02 !important;
        letter-spacing: -0.025em !important;

        text-wrap: normal !important;
    }


    .hero__lede {
        max-width: 100% !important;

        margin-bottom: 1.4rem !important;

        font-size: 1rem !important;
        line-height: 1.5 !important;
    }


    .hero .button-row {
        gap: 0.65rem !important;

        margin: 0 !important;
    }


    .hero .button-row .button {
        min-height: 3rem !important;

        padding: 0.7rem 1.1rem !important;

        font-size: 0.9rem !important;
    }


    .hero__art {
        margin-top: 1.25rem !important;
        margin-bottom: 1.5rem !important;

        padding-top: 0 !important;
        padding-bottom: 1rem !important;
    }

}


/* Even tighter on phones like the screenshot */
@media (max-width: 34rem) {

    .hero__content {
        padding-top: 2.1rem !important;
    }


    .hero h1 {
        max-width: 11ch !important;

        font-size: 2.55rem !important;
        line-height: 1.01 !important;
    }


    .hero__lede {
        font-size: 0.96rem !important;
        line-height: 1.48 !important;
    }


    .hero__art {
        margin-top: 0.9rem !important;
    }

}
/* =========================================================
   SUNRISE FOOTER — REFINED VERSION
   ========================================================= */

.site-footer {
    color: rgba(255, 255, 255, 0.82);
    background: #03283f;
}


/* =========================================================
   MAIN FOOTER GRID
   ========================================================= */

.site-footer .footer-grid {
    display: grid;

    grid-template-columns:
        0.8fr
        1fr
        1.45fr
        1.15fr;

    align-items: start;

    gap: clamp(2.5rem, 5vw, 5rem);

    padding-top: 3.25rem;
    padding-bottom: 3rem;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.site-footer .footer-column h2 {
    max-width: none;

    margin: 0 0 1.15rem;

    color: #ffffff;

    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.3;
}


/* =========================================================
   LINKS
   ========================================================= */

.site-footer .footer-links {
    margin: 0;
    padding: 0;

    list-style: none;
}

.site-footer .footer-links li + li {
    margin-top: 0.62rem;
}

.site-footer .footer-links a {
    color: rgba(255, 255, 255, 0.82);

    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 450;
    line-height: 1.45;

    text-decoration: none;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
    color: var(--gold);
}


/* =========================================================
   CONTACT
   ========================================================= */

.site-footer .footer-contact {
    display: flex;
    flex-direction: column;

    gap: 0.55rem;

    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.82rem;
    font-style: normal;
    line-height: 1.45;
}

.site-footer .footer-contact strong {
    color: #ffffff;
    font-weight: 650;
}


/* =========================================================
   SOCIAL / TRUST COLUMN
   ========================================================= */

.footer-column--trust {
    width: 100%;
    max-width: 16rem;
}


/* social icons */

.footer-social {
    display: flex;
    align-items: center;

    gap: 0.55rem;

    margin: 0 0 1.65rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.15rem;
    height: 2.15rem;

    flex: 0 0 2.15rem;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);

    text-decoration: none;

    transition:
        transform 170ms ease,
        background-color 170ms ease,
        border-color 170ms ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    color: var(--blue-900);

    background: var(--gold);
    border-color: var(--gold);

    transform: translateY(-2px);
}

.footer-social svg {
    width: 0.95rem;
    height: 0.95rem;

    fill: currentColor;
}


/* =========================================================
   ACCREDITATION / TRUST SEALS
   ========================================================= */

.footer-seals {
    display: grid;

    grid-template-columns:
        7.75rem
        5.6rem;

    align-items: center;

    gap: 1rem 1.15rem;

    width: fit-content;
}


/* reset */
.site-footer .footer-seal {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;

    margin: 0;

    border: 0;
    border-radius: 0;

    object-fit: contain;

    box-shadow: none;
}


/* BBB */
.site-footer .footer-seal--bbb {
    width: 7.75rem;

    justify-self: start;
}


/* Candid */
.site-footer .footer-seal--candid {
    width: 5.6rem;

    justify-self: start;
}


/* Gold seal */
.site-footer .footer-seal--gold {
    grid-column: 1 / -1;

    width: 6.8rem;

    margin-top: 0.15rem;

    justify-self: center;
}


/* =========================================================
   FOOTER BASE
   ========================================================= */

.site-footer .footer-base {
    border-top:
        1px solid rgba(255, 255, 255, 0.11);

    background: rgba(0, 0, 0, 0.07);
}

.site-footer .footer-base__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    min-height: 3.6rem;

    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.site-footer .footer-base p {
    margin: 0;

    color: rgba(255, 255, 255, 0.58);

    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.72rem;
    line-height: 1.4;
}

.site-footer .footer-base p:last-child {
    text-align: right;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 68rem) {

    .site-footer .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 3rem 4rem;

        padding-top: 3rem;
        padding-bottom: 3rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 48rem) {

    .site-footer .footer-grid {
        grid-template-columns: 1fr;

        gap: 2.25rem;

        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }


    .footer-column--trust {
        max-width: none;
    }


    .footer-seals {
        grid-template-columns:
            7.75rem
            5.6rem;
    }


    .site-footer .footer-seal--gold {
        justify-self: start;
    }


    .site-footer .footer-base__inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 0.35rem;

        min-height: 0;

        padding-top: 1rem;
        padding-bottom: 1rem;
    }


    .site-footer .footer-base p:last-child {
        text-align: left;
    }

}
/* =========================================================
   FOOTER FINAL POLISH
   ========================================================= */

.site-footer .footer-grid {
    padding-bottom: 2.25rem;
}

.site-footer .footer-seal--gold {
    margin-top: -0.25rem;
    width: 6.4rem;
}

.footer-seals {
    row-gap: 0.75rem;
}
/* =========================================================
   2025 ANNUAL REPORT HOMEPAGE SECTION
   ========================================================= */

.annual-report-section {
    position: relative;

    overflow: hidden;

    padding-block: clamp(4rem, 7vw, 6.5rem);

    background:
        linear-gradient(
            120deg,
            #ffffff 0%,
            #ffffff 58%,
            #f1f8fc 100%
        );
}


/* subtle decorative glow */
.annual-report-section::before {
    content: "";

    position: absolute;

    top: -10rem;
    right: -7rem;

    width: 28rem;
    height: 28rem;

    border-radius: 50%;

    background:
        rgba(228, 242, 250, 0.8);

    filter: blur(2px);
}


.annual-report-section::after {
    content: "";

    position: absolute;

    right: -6rem;
    bottom: -13rem;

    width: 30rem;
    height: 30rem;

    border-radius: 50%;

    background:
        rgba(255, 221, 0, 0.08);
}


/* =========================================================
   GRID
   ========================================================= */

.annual-report-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(17rem, 0.75fr);

    align-items: center;

    gap: clamp(3rem, 7vw, 7rem);
}


/* =========================================================
   CONTENT
   ========================================================= */

.annual-report-content .eyebrow {
    margin-bottom: 0.65rem;

    color: var(--gold-deep);
}


.annual-report-content h2 {
    max-width: none;

    margin: 0;

    color: var(--blue-900);

    font-size: clamp(2rem, 4vw, 3rem);
}


.annual-report-rule {
    display: block;

    width: 3rem;
    height: 0.2rem;

    margin: 1.2rem 0 1.6rem;

    background: var(--gold);
}


.annual-report-lede {
    max-width: 42rem;

    margin-bottom: 2.25rem;

    color: var(--ink);

    font-size: 1.08rem;
    line-height: 1.6;
}


/* =========================================================
   STATS
   ========================================================= */

.annual-report-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1rem;
}


.annual-report-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-height: 12rem;

    padding: 1.45rem 1rem 1.25rem;

    border: 1px solid #c5ddea;
    border-top: 0.2rem solid var(--gold);
    border-radius: 0.6rem;

    text-align: center;

    background: #ffffff;

    box-shadow:
        0 0.7rem 1.7rem rgba(4, 54, 91, 0.10);

    transition:
        transform 200ms ease,
        box-shadow 200ms ease;
}


.annual-report-stat:hover {
    transform: translateY(-5px);

    box-shadow:
        0 1rem 2rem rgba(4, 54, 91, 0.15);
}


.annual-report-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    margin-bottom: 1rem;

    border-radius: 50%;

    color: var(--gold);

    background: var(--blue-800);

    font-size: 1.3rem;

    box-shadow:
        0 0.35rem 0.85rem rgba(0, 73, 124, 0.22);
}


.annual-report-stat strong {
    margin-bottom: 0.45rem;

    color: var(--blue-900);

    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1;
}


.annual-report-stat > span:last-child {
    color: var(--ink);

    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}


/* =========================================================
   BUTTON
   ========================================================= */

.annual-report-actions {
    margin-top: 2rem;
}


.annual-report-actions .button {
    min-width: 18rem;

    justify-content: center;
}


/* =========================================================
   REPORT COVER
   ========================================================= */

.annual-report-cover {
    display: flex;
    align-items: center;
    justify-content: center;
}


.annual-report-cover a {
    display: block;

    width: min(100%, 19rem);

    text-decoration: none;
}


.annual-report-cover img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 0.7rem;

    box-shadow:
        0 1.2rem 2.7rem rgba(4, 54, 91, 0.22);

    transition:
        transform 250ms ease,
        box-shadow 250ms ease;
}


.annual-report-cover a:hover img,
.annual-report-cover a:focus-visible img {
    transform:
        translateY(-6px)
        rotate(0.5deg);

    box-shadow:
        0 1.6rem 3rem rgba(4, 54, 91, 0.28);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 68rem) {

    .annual-report-grid {
        grid-template-columns: 1fr;
    }


    .annual-report-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .annual-report-cover {
        order: -1;
    }


    .annual-report-cover a {
        width: min(100%, 15rem);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 38rem) {

    .annual-report-section {
        padding-block: 3.5rem;
    }


    .annual-report-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.75rem;
    }


    .annual-report-stat {
        min-height: 10.5rem;

        padding: 1.15rem 0.7rem 1rem;
    }


    .annual-report-stat__icon {
        width: 2.6rem;
        height: 2.6rem;

        margin-bottom: 0.75rem;
    }


    .annual-report-stat strong {
        font-size: 1.6rem;
    }


    .annual-report-stat > span:last-child {
        font-size: 0.68rem;
    }


    .annual-report-actions .button {
        width: 100%;
        min-width: 0;
    }

}
/* =========================================================
   STORIES OF HOPE — HOMEPAGE
   ========================================================= */

.stories-of-hope-section {
    padding-block: clamp(4rem, 7vw, 6rem);

    background: #ffffff;
}


/* =========================================================
   HEADING
   ========================================================= */

.stories-of-hope-heading {
    display: grid;

    grid-template-columns:
        minmax(2rem, 1fr)
        auto
        minmax(2rem, 1fr);

    align-items: center;

    gap: 1.25rem;

    margin-bottom: 3rem;
}


.stories-of-hope-heading span {
    display: block;

    height: 1px;

    background: var(--border);
}


.stories-of-hope-heading h2 {
    max-width: none;

    margin: 0;

    color: var(--blue-900);

    font-size: clamp(1.6rem, 3vw, 2.2rem);

    text-align: center;
}


/* =========================================================
   GRID
   ========================================================= */

.stories-of-hope-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: clamp(1.5rem, 4vw, 3rem);
}


/* =========================================================
   STORY CARD
   ========================================================= */

.hope-story-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 0.65rem;

    background: #ffffff;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}


.hope-story-card:hover {
    transform: translateY(-6px);

    border-color: #d8e5ed;

    box-shadow:
        0 1rem 2.2rem rgba(4, 54, 91, 0.12);
}


/* =========================================================
   IMAGE
   ========================================================= */

.hope-story-card__image {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--soft);
}


.hope-story-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 350ms ease;
}


.hope-story-card:hover
.hope-story-card__image img {
    transform: scale(1.035);
}


/* =========================================================
   CONTENT
   ========================================================= */

.hope-story-card__content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 1.4rem 1.35rem 1.5rem;

    text-align: center;
}


.hope-story-card h3 {
    max-width: none;

    margin: 0 0 0.7rem;

    color: var(--blue-900);

    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.2;
}


.hope-story-card h3 a {
    color: inherit;

    text-decoration: none;
}


.hope-story-card h3 a:hover {
    color: var(--blue-700);
}


/* =========================================================
   DATE
   ========================================================= */

.hope-story-card time {
    display: block;

    margin-bottom: 0.9rem;

    color: var(--blue-700);

    font-family:
        "Source Sans 3",
        Arial,
        sans-serif;

    font-size: 0.65rem;
    font-weight: 750;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


/* =========================================================
   EXCERPT
   ========================================================= */

.hope-story-card p {
    margin: 0 0 1.3rem;

    color: var(--muted);

    font-size: 0.88rem;
    line-height: 1.6;
}


/* =========================================================
   READ MORE
   ========================================================= */

.hope-story-card__read {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    align-self: center;

    margin-top: auto;

    min-height: 2.55rem;

    padding: 0 1.25rem;

    border-radius: 0.3rem;

    color: #ffffff;

    background: var(--blue-800);

    font-family:
        "Source Sans 3",
        Arial,
        sans-serif;

    font-size: 0.74rem;
    font-weight: 750;

    letter-spacing: 0.025em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background-color 180ms ease,
        transform 180ms ease;
}


.hope-story-card__read:hover,
.hope-story-card__read:focus-visible {
    color: #ffffff;

    background: var(--blue-900);

    transform: translateY(-2px);
}


/* =========================================================
   VIEW BLOG BUTTON
   ========================================================= */

.stories-of-hope-action {
    margin: 2.75rem 0 0;

    text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 68rem) {

    .stories-of-hope-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .hope-story-card:last-child {
        grid-column: 1 / -1;

        width: min(100%, 32rem);

        justify-self: center;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 42rem) {

    .stories-of-hope-section {
        padding-block: 3.5rem;
    }


    .stories-of-hope-heading {
        gap: 0.8rem;

        margin-bottom: 2rem;
    }


    .stories-of-hope-grid {
        grid-template-columns: 1fr;
    }


    .hope-story-card:last-child {
        grid-column: auto;

        width: 100%;
    }

}
/* =========================================================
   STORIES OF HOPE — INDIVIDUAL POSTS
   ========================================================= */

.story-post-page {
    padding-block: clamp(3rem, 6vw, 5rem);

    background: #ffffff;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.story-post-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(15rem, 19rem);

    align-items: start;

    gap: clamp(3rem, 6vw, 5rem);
}


.story-post {
    width: 100%;
    max-width: 51rem;
}


/* =========================================================
   META
   ========================================================= */

.story-post__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.55rem;

    margin-bottom: 1.35rem;

    color: var(--muted);

    font-family:
        "Source Sans 3",
        Arial,
        sans-serif;

    font-size: 0.78rem;
    font-weight: 650;
}


.story-post__meta a {
    color: var(--blue-700);

    text-decoration: none;
}


.story-post__meta a:hover {
    color: var(--blue-900);
}


/* =========================================================
   BODY COPY
   ========================================================= */

.story-post > p {
    margin: 0 0 1.25rem;

    color: #344653;

    font-size: 1rem;
    line-height: 1.75;
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.story-post__hero {
    margin: 0 0 2rem;
}


.story-post__hero img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 0.4rem;

    box-shadow:
        0 0.8rem 2rem rgba(4, 54, 91, 0.12);
}


/* =========================================================
   SECOND IMAGE
   ========================================================= */

.story-post__secondary-image {
    width: min(100%, 32rem);

    margin: 2rem 0;
}


.story-post__secondary-image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 0.35rem;

    box-shadow:
        0 0.7rem 1.8rem rgba(4, 54, 91, 0.10);
}


/* =========================================================
   GRADUATE QUOTES
   ========================================================= */

.story-post__quotes {
    display: grid;

    gap: 1rem;

    margin: 1.75rem 0 2rem;
}


.story-post__quotes blockquote {
    position: relative;

    margin: 0;

    padding:
        1.25rem
        1.5rem
        1.25rem
        1.75rem;

    border-left:
        0.3rem solid var(--gold);

    background:
        #f3f8fb;
}


.story-post__quotes blockquote::before {
    content: "“";

    position: absolute;

    top: 0.35rem;
    left: 0.45rem;

    color: rgba(0, 90, 156, 0.18);

    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: 1;
}


.story-post__quotes p {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #416070;

    font-size: 0.94rem;
    font-style: italic;
    line-height: 1.7;
}


/* =========================================================
   AUTHOR
   ========================================================= */

.story-post > p.story-post__author {
    margin-top: 2rem;

    color: var(--muted);

    font-size: 0.84rem;
    font-style: italic;
}


/* =========================================================
   ARTICLE ACTIONS
   ========================================================= */

.story-post__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 2.25rem;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.story-sidebar {
    position: sticky;

    top: 2rem;
}


.story-sidebar__panel {
    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 0.45rem;

    background: #ffffff;

    box-shadow:
        0 0.65rem 1.5rem rgba(4, 54, 91, 0.08);
}


.story-sidebar__panel > h2 {
    max-width: none;

    margin: 0;

    padding: 1rem 1.1rem;

    color: #ffffff;

    background: var(--blue-800);

    font-family:
        "Source Sans 3",
        Arial,
        sans-serif;

    font-size: 1rem;
    font-weight: 700;
}


/* =========================================================
   LATEST STORIES
   ========================================================= */

.story-sidebar__list {
    margin: 0;
    padding: 0;

    list-style: none;
}


.story-sidebar__list li {
    margin: 0;

    border-bottom:
        1px solid var(--border);
}


.story-sidebar__list li:last-child {
    border-bottom: 0;
}


.story-sidebar__list a {
    display: flex;
    flex-direction: column;

    gap: 0.25rem;

    padding: 0.85rem 1rem;

    color: var(--ink);

    text-decoration: none;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        padding-left 160ms ease;
}


.story-sidebar__list a:hover {
    padding-left: 1.15rem;

    color: var(--blue-800);

    background: var(--blue-100);
}


.story-sidebar__list span {
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.3;
}


.story-sidebar__list time {
    color: var(--muted);

    font-size: 0.68rem;
    font-weight: 500;
}


.story-sidebar__all {
    display: block;

    padding: 0.85rem 1rem;

    color: var(--blue-800);

    font-size: 0.76rem;
    font-weight: 750;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;
}


.story-sidebar__all:hover {
    color: var(--blue-900);

    background: var(--soft);
}


/* =========================================================
   SIDEBAR IMPACT CTA
   ========================================================= */

.story-sidebar__impact {
    margin-top: 1.5rem;

    padding: 1.5rem;

    border-top:
        0.3rem solid var(--gold);

    background:
        var(--blue-900);

    color: #ffffff;
}


.story-sidebar__impact .eyebrow {
    color: var(--gold);
}


.story-sidebar__impact h2 {
    max-width: none;

    margin-bottom: 0.75rem;

    color: #ffffff;

    font-size: 1.35rem;
}


.story-sidebar__impact p:not(.eyebrow) {
    margin-bottom: 1.25rem;

    color:
        rgba(255, 255, 255, 0.85);

    font-size: 0.83rem;
    line-height: 1.55;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 56rem) {

    .story-post-layout {
        grid-template-columns: 1fr;
    }


    .story-post {
        max-width: none;
    }


    .story-sidebar {
        position: static;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 1.25rem;
    }


    .story-sidebar__impact {
        margin-top: 0;
    }

}


@media (max-width: 38rem) {

    .story-post-page {
        padding-block: 2.5rem;
    }


    .story-post__secondary-image {
        width: 100%;
    }


    .story-post__actions {
        flex-direction: column;
    }


    .story-post__actions .button {
        width: 100%;

        justify-content: center;
    }


    .story-sidebar {
        grid-template-columns: 1fr;
    }

}