/* =====================================================
   ACK ST. BARNABAS MARURUI
   ROYAL / CHURCH BLUE DESIGN
===================================================== */


:root {

    --blue: #123C73;
    --blue-deep: #082A52;
    --blue-mid: #2D5E96;

    --blue-light: #EAF2FB;

    --gold: #D6A72C;
    --gold-light: #F7E8B2;

    --red: #B3202A;

    --charcoal: #202733;
    --muted: #647083;

    --white: #FFFFFF;
    --offwhite: #F8FAFD;

    --border: #DCE4EE;

    --shadow:
        0 18px 55px rgba(8, 42, 82, .10);

        --heading-font:
        "Montserrat",
        "Merriweather",
        Arial,
        sans-serif;

    --body-font:
        "Montserrat",
        Arial,
        sans-serif;
}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px;
}


body {

    background: var(--white);

    color: var(--charcoal);

    font-family: var(--body-font);

    line-height: 1.7;
}


body.modal-open {

    overflow: hidden;
}


img {

    max-width: 100%;

    display: block;
}


a {

    color: inherit;

    text-decoration: none;
}


button,
input,
textarea,
select {

    font: inherit;
}


button {

    cursor: pointer;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        3px solid
        rgba(214, 167, 44, .45);

    outline-offset: 3px;
}


/* =====================================================
   HEADER
===================================================== */

.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        rgba(255, 255, 255, .97);

    border-bottom:
        1px solid
        rgba(18, 60, 115, .10);

    backdrop-filter:
        blur(12px);

    transition: .25s;
}


.header.scrolled {

    box-shadow:
        0 8px 30px
        rgba(8, 42, 82, .10);
}


.nav-container {

    max-width: 1250px;

    margin: auto;

    height: 82px;

    padding: 0 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;
}


.logo-area {

    display: flex;

    align-items: center;

    gap: 11px;

    flex-shrink: 0;
}


.logo {

    width: 58px;

    height: 58px;

    object-fit: contain;
}


.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1.2;
}


.logo-text strong {

    font-size: 14px;

    font-weight: 700;

    color: var(--blue);
}


.logo-text span {

    font-size: 12px;

    color: var(--gold);

    font-weight: 700;
}


.navigation {

    display: flex;

    align-items: center;

    gap: 27px;
}


.navigation a {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

    color: var(--blue);

    transition: .25s;
}


.navigation a:hover {

    color: var(--gold);
}


.nav-cta {

    background: var(--blue);

    color: var(--white);

    padding:
        12px 21px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    transition: .25s;

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


.nav-cta:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: var(--blue);

    transform:
        translateY(-2px);
}


.menu-button {

    display: none;

    border: 0;

    background: transparent;

    font-size: 28px;

    padding:
        6px 10px;

    min-width: 44px;

    min-height: 44px;

    color: var(--blue);
}


/* =====================================================
   GENERAL SECTIONS
===================================================== */

.section {

    padding:
        100px 7%;
}


.section-heading {

    max-width: 820px;

    margin:
        0 auto 55px;

    text-align: center;
}


.section-heading h2,
.welcome-content h2,
.academy-content h2,
.contact-details h3,
.inner-hero h1,
.visit-cta h2,
.prayer-bottom h2 {

    font-family:
        var(--heading-font);

    line-height: 1.3;
}


.section-heading h2 {

    font-size:
        clamp(30px, 4vw, 46px);

    margin:
        10px 0 15px;

    color: var(--blue);
}


.section-heading p {

    max-width: 720px;

    margin: auto;

    color: var(--muted);
}


.section-label,
.eyebrow {

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* =====================================================
   BUTTONS
===================================================== */

.button {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    min-height: 48px;

    padding:
        12px 25px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 700;

    transition: .25s;
}


.button.primary {

    color: var(--blue);

    background: var(--gold);

    border:
        2px solid
        var(--gold);
}


.button.primary:hover {

    background: var(--white);

    border-color: var(--white);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(214, 167, 44, .25);
}


.button.outline {

    color: var(--white);

    border:
        2px solid
        rgba(255, 255, 255, .85);
}


.button.outline:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: var(--blue);
}


.gold-button {

    background: var(--gold);

    color: var(--blue);

    border:
        2px solid
        var(--gold);
}


.gold-button:hover {

    background: var(--white);

    border-color: var(--white);

    transform:
        translateY(-2px);
}


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

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    background:
        url("images/church.jpg")
        center / cover
        no-repeat;

    color: var(--white);
}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 42, 82, .95),
            rgba(18, 60, 115, .76),
            rgba(8, 42, 82, .30)
        );
}


.hero-content {

    position: relative;

    z-index: 1;

    width:
        min(1050px, 92%);

    margin: auto;

    padding:
        120px 0 70px;

    text-align: center;
}


.hero h1 {

    font-family:
        var(--heading-font);

    font-size:
        clamp(43px, 6vw, 78px);

    line-height: 1.1;

    margin:
        18px auto 28px;

    color: var(--white);

    /* was: white-space: nowrap — that made the heading 41px wider than the
       viewport at 1200-1366px and produced a horizontal scrollbar.
       Allowing a wrap changes nothing where the text already fits. */
    white-space: normal;
}


.hero h1 span {

    color: var(--gold);
}


.hero blockquote {

    max-width: 820px;

    margin: auto;

    padding:
        20px 24px;

    border-left:
        3px solid
        var(--gold);

    border-right:
        3px solid
        rgba(214, 167, 44, .35);

    font-size: 17px;

    font-style: italic;
}


.verse-reference {

    margin-top: 12px;

    font-size: 12px;

    letter-spacing: 1px;

    color:
        rgba(255, 255, 255, .75);
}


.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 13px;

    margin-top: 30px;

    flex-wrap: wrap;
}


/* =====================================================
   QUICK ACTIONS
===================================================== */

.quick-actions {

    background:
        var(--offwhite);

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


.quick-grid {

    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}


.quick-card {

    position: relative;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 15px;

    min-height: 145px;

    background:
        var(--white);

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

    border-radius: 18px;

    padding: 23px;

    text-align: left;

    transition: .25s;
}


a.quick-card {

    cursor: pointer;
}


.quick-card-button {

    width: 100%;

    color: inherit;
}


.quick-card:hover {

    transform:
        translateY(-6px);

    border-color:
        var(--gold);

    box-shadow:
        var(--shadow);
}


.quick-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        var(--blue);

    color:
        var(--gold);

    font-weight: 800;

    font-size: 20px;
}


.quick-icon svg {

    width: 22px;

    height: 22px;

    fill: currentColor;

    display: block;
}


.quick-card h3 {

    font-family:
        var(--heading-font);

    font-size: 17px;

    color:
        var(--blue);

    margin-bottom: 5px;
}


.quick-card p {

    font-size: 12px;

    color: var(--muted);

    line-height: 1.55;
}


.quick-arrow {

    font-size: 20px;

    color: var(--gold);

    font-weight: 800;
}


/* =====================================================
   WELCOME
===================================================== */

.welcome {

    background:
        var(--white);
}


.welcome-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 75px;

    align-items: center;
}


.brush-frame {

    position: relative;

    padding: 15px;

    background:
        var(--gold-light);

    border-radius:
        45% 8% 40% 10%;
}


.brush-frame img {

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    border-radius:
        42% 7% 38% 8%;
}


.welcome-content h2 {

    font-size:
        clamp(22px, 2.4vw, 32px);

    margin:
        10px 0 25px;

    color:
        var(--blue);

    white-space: nowrap;
}


.welcome-content p {

    margin-bottom: 17px;

    font-size: 15px;
}


.welcome-ending {

    font-weight: 700;

    color:
        var(--blue);
}


.signature {

    margin-top: 25px;

    font-family:
        var(--heading-font);

    color:
        var(--blue);
}


.signature .signature-name {

    display: block;

    font-family:
        var(--heading-font);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

    color:
        var(--blue);
}


.signature .signature-role {

    display: block;

    margin-top: 3px;

    font-family:
        var(--body-font);

    color:
        var(--muted);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .4px;
}


/* =====================================================
   SERVICES
===================================================== */

.services {

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


.services-grid {

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;
}


.service-column {

    background:
        var(--white);

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

    border-radius: 20px;

    padding: 30px;

    box-shadow:
        0 10px 35px
        rgba(8, 42, 82, .05);
}


/* Centre the services card when it is the only column */

.service-column:only-child {

    grid-column: 1 / -1;

    justify-self: center;

    width: 100%;

    max-width: 560px;
}


.service-column h3 {

    font-family:
        var(--heading-font);

    color:
        var(--blue);

    margin-bottom: 20px;

    font-size: 23px;
}


.service-item {

    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    padding:
        17px 0;

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

    font-size: 13px;
}


.service-item:last-child {

    border-bottom: 0;
}


.service-item strong {

    font-weight: 700;
}


.service-item span {

    text-align: right;

    color:
        var(--muted);
}


/* =====================================================
   ABOUT / ROADMAP
===================================================== */

.about {

    background:
        var(--white);
}


.roadmap {

    max-width: 1100px;

    margin: auto;
}


.roadmap-top {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;
}


.roadmap-box {

    width: 270px;

    min-height: 120px;

    border: 0;

    border-radius: 16px;

    color: var(--blue);

    padding: 20px;

    text-align: left;

    box-shadow:
        var(--shadow);

    transition: .25s;
}


.roadmap-box:hover {

    transform:
        translateY(-4px);
}


.roadmap-box small {

    display: block;

    font-size: 10px;

    letter-spacing: 1.5px;

    margin-bottom: 8px;

    color:
        var(--gold);
}


.roadmap-box strong {

    font-family:
        var(--heading-font);

    font-size: 22px;
}


.vision-box {

    background:
        var(--white);

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


.mission-box {

    background:
        var(--white);

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


.arrow {

    font-size: 40px;

    color:
        var(--gold);
}


.pillars {

    max-width: 720px;

    margin:
        25px auto 0;

    padding-left: 65px;

    display: grid;

    gap: 10px;

    position: relative;
}


.pillars::before {

    content: "";

    position: absolute;

    left: 35px;

    top: 15px;

    bottom: 15px;

    border-left:
        2px solid
        var(--gold);
}


.pillars button {

    position: relative;

    min-height: 58px;

    text-align: left;

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

    background:
        var(--white);

    border-radius: 12px;

    padding:
        15px 20px 15px 55px;

    font-size: 13px;

    font-weight: 700;

    color:
        var(--charcoal);

    transition: .25s;
}


.pillars button::before {

    content: "→";

    position: absolute;

    left: 28px;

    color:
        var(--gold);

    font-size: 18px;
}


.pillars button:hover {

    transform:
        translateX(5px);

    border-color:
        var(--gold);

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


.pillars span {

    color:
        var(--blue);

    margin-right: 10px;
}


/* =====================================================
   PILLAR DRAWER
===================================================== */

.pillar-drawer {

    position: fixed;

    inset: 0;

    background:
        rgba(8, 42, 82, .62);

    z-index: 2000;

    display: flex;

    justify-content: flex-end;

    opacity: 0;

    pointer-events: none;

    transition: .3s;
}


.pillar-drawer.active {

    opacity: 1;

    pointer-events: auto;
}


.drawer-content {

    position: relative;

    width:
        min(520px, 92%);

    height: 100%;

    background:
        var(--white);

    padding:
        90px 45px;

    transform:
        translateX(100%);

    transition: .3s;
}


.pillar-drawer.active
.drawer-content {

    transform:
        translateX(0);
}


.close-drawer,
.modal-close {

    border: 0;

    background: transparent;

    font-size: 35px;

    position: absolute;

    right: 25px;

    top: 20px;

    display: grid;

    place-items: center;

    padding: 4px 10px;

    min-width: 44px;

    min-height: 44px;

    line-height: 1;

    color:
        var(--blue);
}


.drawer-content h2 {

    font-family:
        var(--heading-font);

    font-size: 35px;

    color:
        var(--blue);

    margin:
        10px 0 20px;
}


/* =====================================================
   VALUES
===================================================== */

.values {

    background:
        var(--offwhite);
}


.values-list {

    max-width: 850px;

    margin: auto;

    display: grid;

    gap: 12px;
}


.value-card {

    display: flex;

    align-items: center;

    gap: 20px;

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

    background:
        var(--white);

    border-radius: 15px;

    padding:
        15px 20px;

    transition: .25s;
}


.value-card:hover {

    transform:
        translateX(7px);

    border-color:
        var(--gold);
}


.value-letter {

    width: 55px;

    height: 55px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-family:
        var(--heading-font);

    font-size: 23px;

    font-weight: 700;
}


.value-letter.blue {

    background:
        var(--blue);

    color:
        var(--gold);
}


.value-letter.gold {

    background:
        var(--gold);

    color:
        var(--blue);
}


.value-letter.blue-light {

    background:
        var(--blue-light);

    color:
        var(--blue);
}


.value-letter.red {

    background:
        var(--red);

    color:
        var(--white);
}


.value-card h3 {

    font-family:
        var(--heading-font);

    font-size: 20px;

    color:
        var(--blue);
}


.value-card p {

    font-size: 13px;

    color:
        var(--muted);
}


/* =====================================================
   FELLOWSHIPS / CARDS
===================================================== */

.fellowships {

    background:
        var(--white);
}


.ministries {

    background:
        var(--white);
}


.card-grid {

    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}


.info-card,
.ministry-card {

    position: relative;

    background:
        var(--white);

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

    border-radius: 18px;

    padding: 30px;

    min-height: 260px;

    transition: .25s;
}


.info-card:hover,
.ministry-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--gold);

    box-shadow:
        var(--shadow);
}


.card-number {

    color:
        var(--gold);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;
}


.info-card h3,
.ministry-card h3 {

    font-family:
        var(--heading-font);

    color:
        var(--blue);

    font-size: 21px;

    margin:
        12px 0;
}


.info-card p,
.ministry-card p {

    color:
        var(--muted);

    font-size: 13px;
}


.card-action {

    position: absolute;

    left: 30px;

    bottom: 17px;

    display:
        inline-flex;

    align-items: center;

    padding:
        8px 0;

    min-height: 44px;

    color:
        var(--blue);

    font-size: 13px;

    font-weight: 800;
}


.card-action span {

    color:
        var(--gold);

    font-size: 18px;
}


.card-action:hover {

    color:
        var(--gold);
}


/* =====================================================
   MINISTRY ICON
===================================================== */

.ministry-icon {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        var(--blue);

    color:
        var(--gold);

    font-weight: 800;

    margin-bottom: 15px;
}


/* =====================================================
   ACADEMY
===================================================== */

.academy {

    background:
        var(--blue);

    color:
        var(--white);
}


.academy-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 65px;

    align-items: center;
}


.academy-image img {

    width: 100%;

    height: 520px;

    object-fit: cover;

    border-radius: 25px;
}


.academy-content h2 {

    font-size:
        clamp(30px, 4vw, 48px);

    color:
        var(--white);

    margin:
        10px 0 20px;
}


.academy-lead {

    font-size: 16px;

    margin-bottom: 30px;

    color:
        rgba(255, 255, 255, .84);
}


.academy-features {

    display: grid;

    gap: 20px;

    margin-bottom: 30px;
}


.academy-features > div {

    padding-left: 20px;

    border-left:
        3px solid
        var(--gold);
}


.academy-features strong {

    color:
        var(--gold);

    font-size: 12px;
}


.academy-features h3 {

    font-family:
        var(--heading-font);

    font-size: 18px;
}


.academy-features p {

    font-size: 13px;

    color:
        rgba(255, 255, 255, .75);
}


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

.contact {

    background:
        var(--white);
}


.contact-container {

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 60px;
}


.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;
}


.form-group {

    margin-bottom: 18px;
}


.form-group label {

    display: block;

    margin-bottom: 6px;

    font-size: 12px;

    font-weight: 700;

    color:
        var(--blue);
}


.form-group label span {

    font-weight: 500;

    color:
        var(--muted);
}


.form-group input,
.form-group textarea,
.form-group select {

    width: 100%;

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

    background:
        var(--offwhite);

    border-radius: 10px;

    padding:
        13px 14px;

    outline: none;

    font-size: 14px;

    color:
        var(--charcoal);
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

    border-color:
        var(--gold);

    background:
        var(--white);
}


.contact-details {

    background:
        var(--white);

    padding: 35px;

    border-radius: 20px;

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


.contact-details h3 {

    font-size: 28px;

    margin:
        10px 0 30px;

    color:
        var(--blue);
}


.contact-item {

    display: flex;

    gap: 15px;

    margin-bottom: 25px;
}


.contact-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background:
        var(--gold);

    color:
        var(--blue);

    border-radius: 50%;
}


.contact-icon svg {

    width: 20px;

    height: 20px;

    fill: currentColor;

    display: block;
}


.contact-item small {

    display: block;

    color:
        var(--blue);

    font-weight: 800;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.contact-item a,
.contact-item p {

    display: block;

    font-size: 13px;
}


.contact-item a:hover {

    color:
        var(--gold);
}


/* =====================================================
   LOCATION
===================================================== */

.location {

    background:
        var(--white);

    padding:
        80px 7% 0;
}


.location-heading {

    max-width: 1100px;

    margin:
        auto auto 30px;
}


.location-heading h2 {

    font-family:
        var(--heading-font);

    font-size: 35px;

    color:
        var(--blue);

    margin:
        8px 0;
}


.location-heading p {

    font-size: 14px;

    color:
        var(--muted);
}


.map-container {

    max-width: 1300px;

    height: 420px;

    margin: auto;
}


.map-container iframe {

    width: 100%;

    height: 100%;

    border: 0;
}


/* =====================================================
   FOOTER
===================================================== */

.footer {

    background:
        #061D39;

    color:
        var(--white);

    padding-top: 65px;
}


.footer-container {

    max-width: 1100px;

    margin: auto;

    padding:
        0 7% 50px;

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap: 60px;
}


.footer-brand img {

    width: 70px;

    margin-bottom: 15px;
}


.footer h3,
.footer h4 {

    font-family:
        var(--heading-font);
}


.footer h3 {

    font-size: 20px;
}


.footer h4 {

    margin-bottom: 15px;

    color:
        var(--gold);
}


.footer p {

    color:
        rgba(255, 255, 255, .72);

    font-size: 13px;
}


.footer-links {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.footer-links a {

    font-size: 13px;

    color:
        rgba(255, 255, 255, .72);
}


.footer-links a:hover {

    color:
        var(--gold);
}


.copyright {

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

    text-align: center;

    padding: 20px;

    color:
        rgba(255, 255, 255, .6);

    font-size: 11px;
}


/* =====================================================
   GIVING MODAL
===================================================== */

.modal {

    position: fixed;

    inset: 0;

    z-index: 3000;

    background:
        rgba(8, 42, 82, .68);

    display: grid;

    place-items: center;

    opacity: 0;

    pointer-events: none;

    transition: .25s;

    padding: 20px;
}


.modal.active {

    opacity: 1;

    pointer-events: auto;
}


.modal-box {

    position: relative;

    width:
        min(470px, 100%);

    background:
        var(--white);

    padding: 45px;

    border-radius: 22px;

    box-shadow:
        var(--shadow);
}


.modal-box h2 {

    font-family:
        var(--heading-font);

    font-size: 30px;

    color:
        var(--blue);

    margin:
        10px 0;
}


.payment-details {

    margin:
        25px 0;

    padding: 20px;

    background:
        var(--blue-light);

    border-radius: 14px;

    display: grid;

    gap: 5px;
}


.payment-details span {

    font-size: 10px;

    color:
        var(--blue);

    font-weight: 800;

    letter-spacing: 1px;
}


.payment-details strong {

    font-size: 23px;

    margin-bottom: 10px;

    color:
        var(--blue);
}


.modal-note {

    font-size: 12px;

    color:
        var(--muted);
}


/* =====================================================
   INNER PAGES
===================================================== */

.inner-page main {

    padding-top: 82px;
}


.inner-hero {

    min-height: 510px;

    position: relative;

    display: flex;

    align-items: center;

    background:
        center / cover
        no-repeat;

    color:
        var(--white);
}


.visit-hero {

    background-image:
        url("images/church.jpg");
}


.prayer-hero {

    background-image:
        url("images/church.jpg");
}


.inner-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 42, 82, .95),
            rgba(8, 42, 82, .76),
            rgba(8, 42, 82, .50)
        );
}


.inner-hero-content {

    position: relative;

    z-index: 1;

    max-width: 1050px;

    width: 86%;

    margin: auto;

    padding:
        80px 0;
}


.inner-hero-content h1 {

    font-size:
        clamp(42px, 6vw, 72px);

    color:
        var(--white);

    margin:
        10px 0 20px;
}


.inner-hero-content p {

    max-width: 780px;

    font-size: 16px;

    color:
        rgba(255, 255, 255, .9);

    margin-bottom: 28px;
}


.inner-hero-content.centered {

    text-align: center;
}


.inner-hero-content.centered p {

    margin-left: auto;

    margin-right: auto;
}


/* =====================================================
   PLAN YOUR VISIT
===================================================== */

.visit-section {

    background:
        var(--white);
}


.expect-grid {

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;
}


.expect-card {

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

    border-radius: 14px;

    padding: 24px;

    background:
        var(--white);

    min-height: 205px;
}


.expect-card > span {

    display: grid;

    place-items: center;

    width: 25px;

    height: 25px;

    border-radius: 50%;

    background:
        var(--blue);

    color:
        var(--gold);

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 14px;
}


.expect-card h3 {

    font-family:
        var(--heading-font);

    font-size: 17px;

    color:
        var(--blue);

    margin-bottom: 9px;
}


.expect-card p {

    font-size: 11px;

    color:
        var(--muted);

    line-height: 1.6;
}


.service-information {

    background:
        var(--offwhite);
}


.visit-info-grid {

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 0;

    border-radius: 18px;

    overflow: hidden;

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

    box-shadow:
        var(--shadow);
}


.visit-photo {

    position: relative;

    min-height: 330px;
}


.visit-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.photo-caption {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 25px;

    color:
        var(--white);

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, .82)
        );

    display: flex;

    flex-direction: column;
}


.photo-caption strong {

    font-family:
        var(--heading-font);

    font-size: 18px;
}


.photo-caption span {

    font-size: 11px;
}


.visit-map {

    min-height: 330px;
}


.visit-map iframe {

    width: 100%;

    height: 100%;

    border: 0;
}


.centered-button {

    display: flex;

    width: max-content;

    margin:
        18px auto 0;
}


/* =====================================================
   CHILDREN
===================================================== */

.children-strip {

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    gap: 50px;

    align-items: center;
}


.children-copy h2 {

    font-family:
        var(--heading-font);

    color:
        var(--blue);

    font-size:
        clamp(28px, 4vw, 42px);

    margin:
        8px 0 18px;
}


.children-copy p {

    font-size: 13px;

    color:
        var(--muted);

    margin-bottom: 12px;
}


.children-image img {

    width: 100%;

    height: 300px;

    object-fit: cover;

    border-radius: 20px;
}


/* =====================================================
   FAQ
===================================================== */

.faq-section {

    background:
        var(--white);
}


.faq-list {

    max-width: 760px;

    margin: auto;

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


.faq-list details {

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

    background:
        var(--white);
}


.faq-list summary {

    list-style: none;

    cursor: pointer;

    padding:
        18px 20px;

    font-size: 13px;

    font-weight: 700;

    color:
        var(--blue);

    display: flex;

    justify-content: space-between;

    gap: 20px;
}


.faq-list summary::-webkit-details-marker {

    display: none;
}


.faq-list summary::after {

    content: "+";

    color:
        var(--gold);

    font-size: 20px;
}


.faq-list details[open]
summary::after {

    content: "−";
}


.faq-list details p {

    padding:
        0 20px 20px;

    font-size: 13px;

    color:
        var(--muted);
}


.faq-list a {

    color:
        var(--blue);

    font-weight: 700;
}


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

.visit-cta,
.prayer-bottom {

    background:
        var(--blue);

    color:
        var(--white);

    padding:
        70px 7%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}


.visit-cta > div,
.prayer-bottom > div {

    max-width: 780px;
}


.visit-cta h2,
.prayer-bottom h2 {

    font-size:
        clamp(27px, 4vw, 40px);

    color:
        var(--white);

    margin:
        8px 0 12px;
}


.visit-cta p,
.prayer-bottom p {

    font-size: 13px;

    color:
        rgba(255, 255, 255, .78);
}


/* =====================================================
   PRAYER VERSE
===================================================== */

.prayer-verse {

    background:
        #050505;

    color:
        var(--white);

    padding:
        100px 8%;
}


.prayer-verse > div {

    max-width: 1150px;

    margin: auto;
}


.prayer-verse p {

    font-family:
        var(--heading-font);

    font-size:
        clamp(32px, 5vw, 58px);

    line-height: 1.25;

    margin-bottom: 28px;
}


.prayer-verse strong {

    color:
        var(--gold);

    font-size: 14px;

    letter-spacing: 2px;
}


/* =====================================================
   PRAYER FORM
===================================================== */

.prayer-section {

    background:
        var(--white);
}


.prayer-form {

    max-width: 1100px;

    margin: auto;

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

    border-radius: 18px;

    padding: 35px;

    background:
        var(--offwhite);

    box-shadow:
        var(--shadow);
}


.prayer-form .form-row {

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


.prayer-form em {

    color:
        var(--red);

    font-style: normal;
}


.form-note {

    margin-top: 15px;

    color:
        var(--muted);

    font-size: 11px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .navigation {

        gap: 16px;
    }


    .quick-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .card-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .ministries-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .expect-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 950px) {

    .navigation {

        position: absolute;

        top: 82px;

        left: 0;
        right: 0;

        display: none;

        flex-direction: column;

        align-items: stretch;

        background:
            var(--white);

        padding: 25px;

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

        box-shadow:
            0 15px 30px
            rgba(8, 42, 82, .08);
    }


    .navigation.active {

        display: flex;
    }


    .navigation a {

        padding: 8px 0;
    }


    .menu-button {

        display: block;
    }


    .nav-cta {

        display: none;
    }


    .welcome-container,
    .academy-container,
    .contact-container,
    .children-strip {

        grid-template-columns:
            1fr;
    }


    .welcome-image {

        max-width: 600px;

        margin: auto;
    }


    .academy-image img {

        height: 400px;
    }


    .services-grid,
    .visit-info-grid {

        grid-template-columns:
            1fr;
    }


    .footer-container {

        grid-template-columns:
            1fr 1fr;
    }


    .hero h1 {

        white-space: normal;
    }

}


@media (max-width: 650px) {

    .nav-container {

        padding:
            0 18px;
    }


    .logo-text {

        display: none;
    }


    .section {

        padding:
            70px 5%;
    }


    .hero-content {

        width: 90%;

        padding-top:
            105px;
    }


    .hero h1 {

        font-size: 42px;
    }


    .hero blockquote {

        font-size: 14px;
    }


    .hero-buttons {

        flex-direction: column;

        align-items: stretch;
    }


    .hero-buttons .button {

        width: 100%;
    }


    .quick-grid,
    .card-grid,
    .ministries-grid,
    .form-row,
    .footer-container,
    .expect-grid {

        grid-template-columns:
            1fr;
    }


    .quick-card {

        min-height: 120px;
    }


    .roadmap-top {

        flex-direction: column;
    }


    .arrow {

        transform:
            rotate(90deg);
    }


    .roadmap-box {

        width: 100%;
    }


    .pillars {

        padding-left: 20px;
    }


    .pillars::before {

        display: none;
    }


    .pillars button {

        padding-left: 20px;
    }


    .pillars button::before {

        display: none;
    }


    .service-item {

        flex-direction: column;

        gap: 2px;
    }


    .service-item span {

        text-align: left;
    }


    .contact-details {

        padding: 25px;
    }


    .academy-image img {

        height: 300px;
    }


    .map-container {

        height: 350px;
    }


    .drawer-content {

        padding:
            80px 25px;
    }


    .modal-box {

        padding:
            35px 25px;
    }


    .inner-hero {

        min-height: 570px;
    }


    .inner-hero-content {

        width: 90%;
    }


    .inner-hero-content h1 {

        font-size: 43px;
    }


    .visit-cta,
    .prayer-bottom {

        flex-direction: column;

        align-items: flex-start;
    }


    .prayer-verse {

        padding:
            75px 6%;
    }


    .prayer-form {

        padding: 22px;
    }


    .prayer-form .form-row {

        grid-template-columns:
            1fr;
    }

}
/* Public form submission notices (sent via contact-agent.php) */
.form-notice {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
  border-left: 4px solid currentColor;
  transition: opacity .4s ease;
}
.form-notice.success { background: #eaf7ee; color: #1a7f43; border-left-color: #2aa761; }
.form-notice.error   { background: #fdeceb; color: #b33826; border-left-color: #d04736; }
.form-wrap{ position:relative; }

/* ======================================================================
   FRONT-END UPDATES (photos, slideshow, logos, socials, ministry cards)
====================================================================== */

/* HOME HERO SLIDESHOW */
.hero {
    background: url("Photos/Home%20Background%201.png") center / cover no-repeat;
}
.hero.has-slideshow {
    background-color: var(--blue-deep);
}
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.6s ease;
}
.hero-slide.active {
    opacity: 1;
}
.hero.has-slideshow .hero-overlay {
    z-index: 1;
}
.hero.has-slideshow .hero-content {
    z-index: 2;
}

/* INNER HERO BACKGROUNDS (real church photos) */
.visit-hero {
    background-image: url("Photos/Home%20Background%202.JPG");
}
.prayer-hero {
    background-image: url("Photos/Home%20Background%206.JPG");
}

/* MINISTRY CARDS WITH PHOTOS */
.ministries-grid .ministry-card {
    padding: 0;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ministries-grid .ministry-photo {
    height: 195px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--blue-light);
}
.ministries-grid .ministry-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ministries-grid .ministry-body {
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.ministries-grid .ministry-body h3 {
    margin: 0 0 8px;
}
.ministries-grid .ministry-body p {
    margin-bottom: 16px;
}
.ministries-grid .ministry-card .card-action {
    position: static;
    margin-top: auto;
    align-self: flex-start;
}

/* FOOTER SOCIAL + FOLLOW-US CONTACT SOCIALS */
.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--gold);
    border: 1px solid rgba(255,255,255,.15);
    transition: .25s;
}
.footer-social a:hover {
    background: var(--gold);
    color: var(--blue);
    transform: translateY(-2px);
}
.footer-social .social-svg {
    font-family: var(--body-font);
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
}

.contact-follow {
    margin-top: 6px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.contact-follow small {
    display: block;
    color: var(--blue);
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.contact-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.contact-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 24px;
    background: var(--blue);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
}
.contact-social:hover {
    background: var(--gold);
    color: var(--blue);
}
.contact-social span {

    display: inline-grid;

    place-items: center;

    width: 16px;

    height: 16px;
}


.contact-social span svg {

    width: 15px;

    height: 15px;

    fill: currentColor;

    display: block;
}


/* PRAYER VERSE — brighter, elegant (still highly readable) */
.prayer-verse {
    background: linear-gradient(135deg, #2D5E96, #123C73 60%, #082A52);
}

/* Ensure map never overflows horizontally */
.map-container,
.visit-map {
    overflow: hidden;
    position: relative;
    border-radius: 4px;
}

/* ======================================================================
   SERVE TEAM PAGE
====================================================================== */
.team-hero,
.sacco-hero {
    background-image: url("Photos/Home%20Background%204.jpg");
    background-position: center center;
}
.serve-section {
    background: var(--offwhite);
    padding-top: 72px;
}
.team-grid,
.sacco-container {
    max-width: 1080px;
    margin: auto;
    display: grid;
    gap: 26px;
}
.team-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    justify-content: center;
}
.sacco-container {
    grid-template-columns: repeat(3, 1fr);
}
.team-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(8,42,82,.06);
    transition: .25s;
    text-align: center;
}
.team-card:hover {
    transform: translateY(-7px);
    border-color: var(--gold);
    box-shadow: var(--shadow);
}
.team-photo {
    height: 320px;
    overflow: hidden;
    background: var(--blue-light);
}
.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.team-photo-placeholder {
    display: grid;
    place-items: center;
    background:
        linear-gradient(160deg, var(--blue-light), #ffffff),
        var(--blue-light);
}
.team-photo-placeholder span {
    width: 78px; height: 78px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 40px; font-weight: 300; line-height: 1;
    color: var(--blue); background: #fff;
    border: 2px dashed rgba(18,60,115,.35);
}
.team-card-placeholder { border-style: dashed; }
.team-card-placeholder .team-note {
    margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.6;
}
.placeholder-mark {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: 10px;
}
.team-info {
    padding: 24px 22px 30px;
}
.team-info h3 {
    font-family: var(--heading-font);
    color: var(--blue);
    font-size: 21px;
    margin-bottom: 4px;
}
.team-role {
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.team-info p {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

/* ======================================================================
   RENEWAL PACK
====================================================================== */
/* header packing when extra nav items are present */
.navigation a { white-space: nowrap; }
@media (min-width: 951px) and (max-width: 1199px) {
    .logo-text { display: none; }
    .nav-container { gap: 14px; }
}

/* home hero crop: faces kept visible on 4/5/8/9; BG1 reads as subtle texture */
.hero-slide { background-position: center 60%; }
.hero.has-slideshow .hero-slide:nth-child(1){
    filter: saturate(.72) brightness(.8) contrast(1.02); background-position: center 30%;
}
.hero.has-slideshow .hero-slide:nth-child(4){ background-position: center 22%; }
.hero.has-slideshow .hero-slide:nth-child(5){ background-position: center 25%; }
.hero.has-slideshow .hero-slide:nth-child(8){ background-position: center 30%; }
.hero.has-slideshow .hero-slide:nth-child(9){ background-position: center 20%; }
@media (max-width: 820px){
    .hero.has-slideshow .hero-slide:nth-child(4){ background-position: center 0; }
    .hero.has-slideshow .hero-slide:nth-child(5){ background-position: center 12%; }
    .hero.has-slideshow .hero-slide:nth-child(8){ background-position: center 15%; }
    .hero.has-slideshow .hero-slide:nth-child(9){ background-position: center 8%; }
}

/* vicar welcome headroom */
.welcome { padding-top: 92px; }

/* welcome heading: keep "A Welcome Message from the Vicar" on one line on desktop */
.welcome-content h2 { white-space: nowrap; }
@media (max-width: 900px) {
    .welcome-content h2 { white-space: normal; }
}

/* mission & vision visible statement lines */
.roadmap-box .roadmap-statement {
    font-family: var(--body-font); font-size: 11.5px; line-height: 1.5;
    color: var(--muted); font-weight: 400; margin-top: 4px;
}

/* contact action chips */
.contact-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.contact-action {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 15px;
    border-radius: 26px; font-size: 12px; font-weight: 700; color: var(--blue);
    background: #fff; border: 2px solid var(--border); transition: .25s;
}
.contact-action:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.contact-actions-light .contact-action {
    color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35);
}
.contact-actions-light .contact-action:hover { background: var(--gold); color: var(--blue); border-color: var(--gold); }
.ca-ico { width: 18px; height: 18px; flex: 0 0 18px; }
.ca-ico svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* guest slideshow (You're Our Guest - plan your visit hero) */
.guest-hero { background: var(--blue-deep); }

/* plan-visit hero: eyebrow + title on one line on desktop */
.guest-hero .inner-hero-content { max-width: 1200px; width: 92%; }
.guest-hero .inner-hero-content h1 { white-space: nowrap; }
.guest-hero .inner-hero-content .eyebrow { white-space: nowrap; }
@media (max-width: 760px) {
    .guest-hero .inner-hero-content h1,
    .guest-hero .inner-hero-content .eyebrow { white-space: normal; }
}
.guest-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.guest-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center 30%;
    background-repeat: no-repeat; opacity: 0; transition: opacity 1.4s ease;
}
.guest-slide.active { opacity: 1; }
.guest-hero .inner-hero-overlay { z-index: 1; }
.guest-hero .inner-hero-content { z-index: 2; }

/* SACCO hero slideshow (order 1, 2, 3) */
.sacco-hero { background: var(--blue-deep); }
.sacco-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sacco-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    background-repeat: no-repeat; opacity: 0; transition: opacity 1.4s ease;
}
.sacco-slide.active { opacity: 1; }
.sacco-hero .inner-hero-overlay { z-index: 1; }
.sacco-hero .inner-hero-content { z-index: 2; }

/* SACCO chairlady two-column + portrait */
.chairlady-wrap {
    max-width: 1000px; margin: auto; display: grid; grid-template-columns: 330px 1fr;
    gap: 42px; align-items: center; text-align: left; background: var(--blue);
    color: #fff; border-radius: 22px; padding: 38px 42px;
}
.chairlady-portrait {
    background: linear-gradient(160deg,#1f4e8f,#082a52); border-radius: 16px; overflow: hidden;
    min-height: 400px; display: grid; align-items: end;
    border: 1px solid rgba(255,255,255,.18); position: relative;
}
.chairlady-frame { position: absolute; inset: 0; display: grid; place-items: center; }
.chairlady-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.chairlady-person {
    position: relative; width: 100%; z-index: 2;
    background: linear-gradient(to top, rgba(6,29,57,.92), rgba(6,29,57,.55));
    padding: 22px 16px 18px; text-align: center;
    border-top: 1px solid rgba(255,255,255,.16);
}
.chairlady-person strong { display: block; font-family: var(--heading-font); color: #fff; font-size: 22px; line-height: 1.2; letter-spacing: .2px; }
.chairlady-person span { display: block; margin-top: 5px; color: var(--gold); font-size: 12px; letter-spacing: 1.4px; font-weight: 700; text-transform: uppercase; }
.chairlady-body { width: 100%; }
.chairlady-body .section-label { color: var(--gold); display: block; margin-bottom: 14px; }
.chairlady-body h3 { font-family: var(--heading-font); color: #fff; font-size: clamp(24px,3vw,34px); margin: 10px 0 18px; }
.chairlady-body p { color: rgba(255,255,255,.9); font-size: 14.5px; line-height: 1.75; margin-bottom: 14px; }
.chairlady-body p:last-child { margin-bottom: 0; }
.chairlady-note { color: var(--gold-light); font-family: var(--heading-font); font-size: 13px; line-height: 1.6; }
@media(max-width:900px){
    .chairlady-wrap { grid-template-columns: 1fr; gap: 26px; padding: 26px 20px; }
    .chairlady-portrait { min-height: 340px; }
    .chairlady-person strong { font-size: 20px; }
    .chairlady-body p { font-size: 14px; }
}
.sacco-faq { background: var(--offwhite); }

/* footer: logo beside ACK name + richer icon row */
.footer-brand .footer-namemark { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.footer-brand .footer-namemark img { width: 64px; height: 64px; object-fit: contain; margin: 0; }
.footer-brand .footer-namemark h3 { font-size: 20px; line-height: 1.2; margin: 0; }
.footer-socset { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
.soc-set-label { width: 100%; color: var(--gold); font-size: 11px; letter-spacing: 1.6px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; }
.soc-link, .soc-soon {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; color: #fff; background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22); transition: .25s; text-decoration: none;
}
.soc-link svg, .soc-soon svg { width: 19px; height: 19px; fill: currentColor; }
.soc-link:hover { background: var(--gold); color: var(--blue); border-color: var(--gold); transform: translateY(-2px); }
.soc-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Platforms the church has not opened yet: shown, styled and consistent,
   clearly labelled, and intentionally not a (broken) link. */
.soc-soon { opacity: .72; cursor: default; position: relative; }
.soc-soon:hover { opacity: 1; background: rgba(255,255,255,.16); }

/* news & events page */
.news-hero { background-image: url("Photos/Home%20Background%206.JPG"); }

/* moments in church gallery */
.moments-hero { background-image: url("Photos/Home%20Background%209.JPG"); }
.moments-grid {
    max-width: 1200px; margin: auto; display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 22px;
}
.moment-card {
    position: relative; border-radius: 16px; overflow: hidden;
    box-shadow: 0 14px 34px rgba(8,42,82,.08); transition: .3s;
    background: var(--blue-light); cursor: zoom-in;
}
/* Photos beyond the first four stay hidden until "View More Moments" */
.moment-card.moment-extra { display: none; }
.moment-card img {
    width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover;
    transition: transform .5s ease; display: block;
}
.moment-card:hover img { transform: scale(1.06); }
.moment-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 15px 13px; color: #fff;
    background: linear-gradient(transparent,rgba(6,29,57,.85)); font-size: 13px; font-weight: 700;
}
.moments-more { margin: 44px auto 0; display: flex; }

/* plan-visit moments teaser */
.moments-teaser { background: var(--offwhite); }

/* lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 4000; background: rgba(6,18,40,.93);
    display: grid; place-items: center; opacity: 0; pointer-events: none; transition: .3s; padding: 28px;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox figure { margin: 0; max-width: min(1000px,94vw); }
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; }
.lightbox figcaption { color: #fffdf6; text-align: center; margin-top: 14px; font-size: 15px; }
.lightbox-close {
    position: absolute; top: 20px; right: 28px; background: rgba(255,255,255,.12); border: 0;
    color: #fff; font-size: 30px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
}
.lightbox-close:hover { background: var(--gold); color: var(--blue); }

/* client-side form validation states */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select { border-color: var(--red); background: #fff6f6; }
.form-group input[type=text].violation,
.form-group input[type=tel].violation,
.form-group input[type=email].violation { border-color: var(--gold); }
.field-error { color: var(--red); font-size: 11px; margin-top: 4px; }
.field-required { color: var(--red); }
.sacco-section {
    background: var(--offwhite);
}
.sacco-hero-block {
    max-width: 1000px;
    margin: 0 auto 45px;
    text-align: center;
}
.sacco-brand-block {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 16px 45px rgba(8,42,82,.08);
}
.sacco-logo {
    width: 168px;
    height: 168px;
    object-fit: contain;
    margin: 0 auto 18px;
}
.sacco-brand-block h2 {
    font-family: var(--heading-font);
    font-size: clamp(26px, 4vw, 40px);
    color: var(--blue);
    margin-bottom: 8px;
}
.sacco-brand-block p {
    color: var(--muted);
    font-size: 14px;
    max-width: 640px;
    margin: auto;
}
.sacco-chairlady {
    max-width: 860px;
    margin: auto;
    text-align: center;
    background: var(--blue);
    color: var(--white);
    border-radius: 20px;
    padding: 45px;
}
.sacco-chairlady .section-label {
    color: var(--gold);
}
.sacco-chairlady h3 {
    font-family: var(--heading-font);
    font-size: 30px;
    margin: 10px 0 18px;
}
.sacco-chairlady p {
    color: rgba(255,255,255,.85);
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto 26px;
}
.sacco-actions {
    margin-top: 6px;
}

/* Nav packing fallback when extra items are added */
@media (min-width: 951px) and (max-width: 1200px) {
    .navigation { gap: 14px; }
    .navigation a { font-size: 11px; letter-spacing: .3px; }
}

/* Team + sacco responsive stacking */
@media (max-width: 900px) {
    .team-grid { grid-template-columns: 1fr; }
    .team-photo { height: 360px; }
}


/* =====================================================
   SACCO - Welfare for Social Empowerment (master update)
===================================================== */
.sacco-welfare {
    max-width: 720px;
    margin: 40px auto 50px;
    padding: 30px 34px;
    border: 1px solid #dee7f1;
    border-radius: 20px;
    background: linear-gradient(135deg,#f7fafd,#ecf3fb);
    box-shadow: 0 10px 26px rgba(8,42,82,.06);
    text-align: center;
}
.sacco-welfare .section-label { color: var(--blue); }
.sacco-welfare h3 { font-family: var(--heading-font); color: var(--blue); font-size: 22px; margin: 4px 0 10px; }
.sacco-welfare p { color: #3f5670; font-size: 15px; line-height: 1.72; max-width: 620px; margin: 0 auto; }
@media (max-width: 520px){ .sacco-welfare { padding: 24px 20px; } }


/* =====================================================
   News & Events - EVENTS / COMING UP / HEADS UP (master)
===================================================== */
.news-cards {
    max-width: 1060px; margin: 0 auto; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px;
}
.news-cat-card {
    background: #fff; border: 1px solid var(--border); border-radius: 18px;
    padding: 30px 28px 26px; text-align: center; position: relative; overflow: hidden;
    box-shadow: 0 14px 36px rgba(8,42,82,.06); display: flex; flex-direction: column;
    align-items: center; justify-content: center; min-height: 210px;
}
.news-cat-num {
    font-size: 11px; letter-spacing: 2px; font-weight: 800; color: var(--gold);
    background: rgba(201,165,67,.12); padding: 3px 10px; border-radius: 14px; margin-bottom: 12px;
}
.news-cat-card h3 { font-family: var(--heading-font); color: var(--blue); font-size: 24px; margin: 0 0 8px; }
.news-cat-card p { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.news-learn {
    appearance: none; border: 1px solid var(--blue); background: transparent; color: var(--blue);
    font-weight: 700; font-size: 13px; padding: 11px 24px; border-radius: 30px; cursor: default;
    font-family: inherit; letter-spacing: .3px; transition: .2s;
}
.news-learn span { display: inline-block; margin-left: 5px; }
@media (max-width: 640px){ .news-cards { grid-template-columns: 1fr; } }


/* ======================================================================
   SUNDAY SERVICES — PASTORAL SUPPORT & CONTACTS (change request)
====================================================================== */
.pastoral-support {
    max-width: 1100px;
    margin: 34px auto 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 36px 40px;
    box-shadow: 0 10px 35px rgba(8, 42, 82, .05);
}
.pastoral-lead { text-align: center; max-width: 760px; margin: 0 auto 26px; }
.pastoral-lead h3 {
    font-family: var(--heading-font);
    color: var(--blue);
    font-size: clamp(24px, 3vw, 32px);
    margin: 8px 0 10px;
}
.pastoral-lead p { color: var(--muted); font-size: 15px; }
.pastoral-contact-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 780px;
    margin: 0 auto;
}
.pastoral-contact {
    flex: 1 1 190px;
    max-width: 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--blue-light);
    border: 1px solid var(--border);
    transition: .25s;
}
.pastoral-contact:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: var(--shadow);
}
.pastoral-contact small {
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.pastoral-contact strong {
    font-family: var(--heading-font);
    color: var(--blue);
    font-size: 20px;
    letter-spacing: .3px;
}
@media (max-width: 600px){
    .pastoral-support { padding: 26px 20px; }
    .pastoral-contact { flex: 1 1 100%; max-width: none; }
    .pastoral-contact strong { font-size: 18px; }
}


/* ======================================================================
   ACADEMY PAGE (dedicated) — slideshow, admissions, values, facilities
====================================================================== */
.academy-hero { background: var(--blue-deep); }
.academy-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.academy-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.6s ease;
}
.academy-slide.active { opacity: 1; }
.academy-hero .inner-hero-overlay {
    z-index: 1;
    background: linear-gradient(180deg, rgba(8,42,82,.78), rgba(8,42,82,.72));
}
.academy-hero .inner-hero-content { z-index: 2; }
.academy-hero .inner-hero-content h1 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }

/* Admissions announcement */
.academy-admissions {
    background: var(--gold);
    padding: 34px 7%;
    display: flex;
    justify-content: center;
}
.academy-admissions-box {
    max-width: 960px;
    text-align: center;
    color: var(--blue);
}
.admissions-tag {
    display: inline-block;
    background: var(--blue);
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    padding: 6px 16px;
    border-radius: 24px;
    margin-bottom: 14px;
}
.academy-admissions-box h2 {
    font-family: var(--heading-font);
    font-size: clamp(22px, 3.4vw, 34px);
    margin-bottom: 6px;
}
.academy-admissions-box p { font-weight: 700; font-size: 15px; }

/* About + vision/mission */
.academy-about { background: var(--white); }
.academy-motto {
    color: var(--gold) !important;
    font-weight: 800;
    letter-spacing: 1px;
}
.academy-about-body { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.academy-about-body p { color: var(--muted); font-size: 15px; }
.academy-vm-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.academy-vm-card {
    border-radius: 18px;
    padding: 30px 32px;
    color: var(--white);
    background: var(--blue);
    box-shadow: 0 14px 40px rgba(8,42,82,.08);
}
.academy-vm-card .section-label { color: var(--gold); display: block; margin-bottom: 10px; }
.academy-vm-card p { color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.7; }
.academy-vm-note {
    text-align: center;
    margin-top: 30px;
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--blue);
    font-size: 14px;
}

/* Core values */
.academy-values { background: var(--offwhite); }
.academy-values-grid {
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.academy-value-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    transition: .25s;
}
.academy-value-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow); }
.av-ico {
    display: inline-grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--blue);
    margin-bottom: 14px;
}
.av-ico svg { width: 26px; height: 26px; fill: var(--gold); display: block; }
.academy-value-card h3 { font-family: var(--heading-font); color: var(--blue); font-size: 18px; }

/* Facilities & programmes */
.academy-facilities { background: var(--white); }
.academy-facilities-grid {
    max-width: 1050px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.facility-card {
    background: var(--blue-light);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 26px;
    transition: .25s;
}
.facility-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow); }
.facility-num { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; }
.facility-card h3 { font-family: var(--heading-font); color: var(--blue); font-size: 17px; margin-top: 8px; }

/* Academy contact */
.academy-contact { background: var(--offwhite); }
.academy-contact-grid {
    max-width: 720px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.academy-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--blue);
    color: var(--white);
    border-radius: 16px;
    padding: 22px;
    transition: .25s;
}
.academy-phone:hover { background: var(--gold); color: var(--blue); transform: translateY(-4px); }
.academy-phone .ca-ico { color: var(--gold); }
.academy-phone:hover .ca-ico { color: var(--blue); }
.academy-phone strong { font-family: var(--heading-font); font-size: 22px; letter-spacing: .5px; }

@media (max-width: 900px) {
    .academy-vm-grid { grid-template-columns: 1fr; }
    .academy-facilities-grid { grid-template-columns: repeat(2, 1fr); }
    .academy-values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .academy-facilities-grid,
    .academy-values-grid,
    .academy-contact-grid { grid-template-columns: 1fr; }
    .academy-phone strong { font-size: 19px; }
}


/* ======================================================================
   WATEULE MARURUI SACCO — expansion (flier content)
====================================================================== */
.sacco-identity {
    max-width: 1000px;
    margin: 0 auto 40px;
    text-align: center;
}
.sacco-tagline {
    color: var(--blue);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.55;
    max-width: 640px;
    margin: 12px auto 2px;
}
.sacco-motto-line {
    color: var(--gold);
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: .6px;
    font-size: 16px;
    margin-top: 6px;
}
.sacco-facts {
    max-width: 1000px;
    margin: 0 auto 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.sacco-fact {
    background: var(--blue-light);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 24px;
    text-align: center;
}
.sacco-fact small {
    display: block;
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.sacco-fact strong { font-family: var(--heading-font); color: var(--blue); font-size: 17px; }

.sacco-block {
    max-width: 1000px;
    margin: 0 auto 34px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 34px 38px;
    box-shadow: 0 10px 30px rgba(8,42,82,.05);
}
.sacco-block > .section-label { display: block; margin-bottom: 6px; }
.sacco-block h3 {
    font-family: var(--heading-font);
    color: var(--blue);
    font-size: clamp(22px, 3vw, 30px);
    margin-bottom: 14px;
}

/* Centre the "Who We Are" heading block */

#who-we-are > .section-label,
#who-we-are > h3 {
    text-align: center;
}

#who-we-are > .section-label { margin-bottom: 8px; }
.sacco-block p { color: var(--muted); font-size: 14.5px; line-height: 1.75; margin-bottom: 12px; }
.sacco-block p:last-child { margin-bottom: 0; }
.sacco-vm-grid {
    max-width: 1000px;
    margin: 0 auto 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.sacco-vm-card {
    border-radius: 18px;
    padding: 28px 30px;
    background: var(--blue);
    color: #fff;
}
.sacco-vm-card .section-label { color: var(--gold); display: block; margin-bottom: 10px; }
.sacco-vm-card p { color: rgba(255,255,255,.92); font-size: 15px; line-height: 1.7; margin: 0; }

/* Lists / requirement cards */
.sacco-list {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-top: 8px;
}
.sacco-list li {
    position: relative;
    padding: 14px 18px 14px 46px;
    background: var(--blue-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--charcoal);
}
.sacco-list li::before {
    content: "✓";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-weight: 800;
    font-size: 16px;
}

/* Objectives grid */
.sacco-objectives {
    max-width: 1000px;
    margin: 0 auto 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.sacco-objective {
    background: var(--offwhite);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: 14px;
    padding: 22px 26px;
}
.sacco-objective h4 {
    font-family: var(--heading-font);
    color: var(--blue);
    font-size: 17px;
    margin-bottom: 6px;
}
.sacco-objective p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 0; }

/* Core values chips */
.sacco-values {
    max-width: 1000px;
    margin: 0 auto 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.sacco-value {
    background: var(--blue);
    color: #fff;
    border-radius: 30px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
}

/* Payment details */
.sacco-payments {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.sacco-pay-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 5px solid var(--gold);
    border-radius: 18px;
    padding: 28px 30px;
    box-shadow: 0 12px 34px rgba(8,42,82,.06);
}
.sacco-pay-card h4 {
    font-family: var(--heading-font);
    color: var(--blue);
    font-size: 18px;
    margin-bottom: 16px;
    letter-spacing: .4px;
}
.sacco-pay-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
}
.sacco-pay-row:last-child { border-bottom: 0; }
.sacco-pay-row small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.sacco-pay-row strong {
    font-family: var(--heading-font);
    color: var(--blue);
    font-size: 18px;
    letter-spacing: .5px;
    user-select: all;
}
.sacco-pay-note {
    max-width: 1000px;
    margin: 22px auto 0;
    background: var(--blue-light);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 26px;
    color: var(--blue);
    font-size: 14px;
    line-height: 1.7;
}
.sacco-pay-note strong { color: var(--blue); }

/* Contact block */
.sacco-contact {
    max-width: 1000px;
    margin: 26px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.sacco-contact-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
}
.sacco-contact-item small {
    display: block;
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.sacco-contact-item a, .sacco-contact-item strong {
    color: var(--blue);
    font-size: 15px;
    font-weight: 700;
    word-break: break-word;
}
.sacco-contact-item a:hover { color: var(--gold); }

@media (max-width: 900px) {
    .sacco-vm-grid,
    .sacco-objectives,
    .sacco-payments { grid-template-columns: 1fr; }
    .sacco-facts { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .sacco-block { padding: 26px 20px; }
    .sacco-pay-row { flex-direction: column; gap: 2px; }
    .sacco-pay-row strong { font-size: 17px; }
}

/* ======================================================================
   NARROW-PHONE OVERFLOW FIX (contact grid)
   The long, unbreakable email address inside .contact-details forced the
   single-column contact grid wider than small phone viewports. Let the grid
   items shrink and allow the long strings to wrap.
====================================================================== */
.contact-container > * { min-width: 0; }
.contact-item { min-width: 0; }
.contact-item a,
.contact-item small { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 400px) {
    .contact-details { padding: 20px; }
    .contact-item { gap: 12px; }
}

/* clickable footer contact links (tel: / mailto: / map) */
.footer-contact a {
    transition: .25s;
}
.footer-contact a:hover {
    color: var(--gold);
}

/* ======================================================================
   DEDICATED PAGES — Ministries & Fellowships heroes
====================================================================== */
.ministries-hero {
    background-image: url("Photos/Men%20Fellowship.JPG");
    background-position: center 35%;
}
.fellowships-hero {
    background-image: url("Photos/Ladies%20Fellowship.jpg");
    background-position: center 35%;
}
/* narrow phones: long single hero words must not overflow the viewport */
@media (max-width: 430px) {
    .ministries-hero .inner-hero-content h1,
    .fellowships-hero .inner-hero-content h1 {
        font-size: clamp(28px, 9vw, 42px);
    }
}

/* footer credit (Hadelpixels) */
.copyright .credit {
    display: inline-block;
    margin-left: 6px;
}
.copyright .credit a {
    color: var(--gold);
    font-weight: 700;
}
.copyright .credit a:hover {
    color: var(--white);
}