/*====================================================
        CONGREGATION — "A GROWING FAMILY"
        Theme: organic growth + the rhythm of fellowship
====================================================*/

:root{

    --ink:#070d1a;
    --navy:#0c1930;
    --navy2:#101f3a;
    --navy3:#162a48;

    --gold:#c9a24c;
    --gold-bright:#e8cb84;
    --sage:#8bb59a;
    --sage-dim:#5c7d68;

    --cream:#f3ede0;

    --text:#c9d1de;
    --text-dim:#8791a4;
    --heading:#f5efe2;

    --border:rgba(201,162,74,.18);
    --border-sage:rgba(139,181,154,.28);
    --hairline:rgba(255,255,255,.08);

}

/*====================================================
                PAGE BANNER
====================================================*/

.page-banner{

    position:relative;

    padding:190px 0 130px;

    text-align:center;

    background:
    linear-gradient(180deg,rgba(4,7,17,.80),rgba(4,7,17,.95)),
    url("../images/activity/congregation/banner.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    overflow:hidden;

}

.page-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle at 50% 0%,
    rgba(139,181,154,.16),
    transparent 55%);

}

.page-banner .container{

    position:relative;

    z-index:2;

}

.page-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:16px;

    color:var(--sage);

    font-family:"Inter",sans-serif;

    font-size:12px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.page-eyebrow::before,
.page-eyebrow::after{

    content:"";

    width:36px;

    height:1px;

    background:linear-gradient(90deg,transparent,var(--sage));

}

.page-eyebrow::after{

    background:linear-gradient(90deg,var(--sage),transparent);

}

.page-banner h1{

    color:#fdf8ee;

    font-family:"Fraunces",serif;

    font-weight:700;

    font-size:clamp(40px,6vw,68px);

    letter-spacing:.2px;

    margin-bottom:20px;

}

.page-banner p{

    color:var(--text);

    font-family:"Inter",sans-serif;

    font-weight:400;

    font-size:18px;

    max-width:600px;

    margin:0 auto;

}

/*====================================================
                SECTION WRAPPER
====================================================*/

.congregation{

    background:var(--ink);

    padding:110px 0;

    position:relative;

    overflow:hidden;

}

.congregation::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:rgba(139,181,154,.05);

    border-radius:50%;

    top:-160px;

    left:-180px;

}

.congregation::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:rgba(201,162,74,.05);

    border-radius:50%;

    bottom:-140px;

    right:-140px;

}

.congregation .container{

    position:relative;

    z-index:1;

}

.block{

    padding:0 0 110px;

}

.block:last-child{

    padding-bottom:0;

}

/*====================================================
                SECTION HEADING
====================================================*/

.section-heading{

    margin-bottom:34px;

    text-align:center;

}

.section-heading .eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--sage);

    font-family:"Inter",sans-serif;

    font-size:12px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:16px;

}

.section-heading h2{

    font-family:"Fraunces",serif;

    font-weight:700;

    color:var(--heading);

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

    line-height:1.2;

    max-width:640px;

    margin:0 auto;

}

/*====================================================
            OUR STORY
====================================================*/

.story-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:0;

    max-width:820px;

    margin:0 auto;

}

.story-grid p{

    color:var(--text);

    font-size:18px;

    line-height:1.95;

    margin-bottom:20px;

    text-align:center;

}

.story-grid p:first-of-type::first-line{

    font-family:"Fraunces",serif;

    font-weight:600;

    color:var(--heading);

    font-size:20px;

}

/*====================================================
        STORY LAYOUT (text + gathering photo)
====================================================*/

.story-layout{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:64px;

    align-items:center;

    max-width:1080px;

    margin:0 auto;

}

.story-text p{

    color:var(--text);

    font-size:17.5px;

    line-height:1.95;

    margin-bottom:20px;

    text-align:left;

}

.story-text p:first-of-type::first-line{

    font-family:"Fraunces",serif;

    font-weight:600;

    color:var(--heading);

    font-size:19px;

}

.story-visual{

    position:relative;

}

.story-visual .tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--sage);

    font-family:"Inter",sans-serif;

    font-size:11px;

    font-weight:700;

    letter-spacing:2.5px;

    text-transform:uppercase;

    margin-bottom:16px;

}

.story-visual .tag::before{

    content:"";

    width:22px;

    height:1px;

    background:var(--sage);

}

.story-visual .frame{

    padding:12px;

    background:linear-gradient(160deg,var(--navy2),var(--navy));

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

    border-radius:4px;

    box-shadow:0 35px 80px rgba(0,0,0,.5);

}

.story-visual .frame img{

    width:100%;

    display:block;

    border-radius:2px;

}

/*====================================================
        GROWTH MARKER (founding -> today)
====================================================*/

.growth-marker{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:26px;

    max-width:640px;

    margin:64px auto 0;

    margin:56px auto 0;

}

.growth-point{

    text-align:center;

    flex:0 0 auto;

}

.growth-point .dot{

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--sage);

    margin:0 auto 14px;

    box-shadow:0 0 0 5px rgba(139,181,154,.14);

}

.growth-point.founding .dot{

    background:var(--gold);

    box-shadow:0 0 0 5px rgba(201,162,74,.14);

}

.growth-point .figure{

    font-family:"Fraunces",serif;

    font-weight:700;

    font-size:26px;

    color:var(--heading);

    margin-bottom:4px;

}

.growth-point .label{

    font-family:"Inter",sans-serif;

    font-size:11px;

    letter-spacing:2.5px;

    text-transform:uppercase;

    color:var(--text-dim);

}

.growth-path{

    flex:1 1 auto;

    height:1px;

    min-width:60px;

    background-image:linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 14px);

    background-size:14px 1px;

    background-repeat:repeat-x;

    background-position:center;

    position:relative;

}

.growth-path::before,
.growth-path::after{

    content:"\1F343";

    position:absolute;

    top:50%;

    transform:translateY(-60%);

    font-size:13px;

    opacity:.8;

}

.growth-path::before{ left:30%; }
.growth-path::after{ left:65%; }

/*====================================================
        RHYTHM WHEEL (signature element)
====================================================*/

.rhythm-wrap{

    display:flex;

    justify-content:center;

}

.rhythm-wheel{

    position:relative;

    width:440px;

    height:440px;

    max-width:100%;

    border-radius:50%;

    border:1px dashed var(--border-sage);

}

.rhythm-wheel::before{

    content:"";

    position:absolute;

    inset:44px;

    border-radius:50%;

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

}

.rhythm-center{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:0 90px;

}

.rhythm-center span{

    display:block;

}

.rhythm-center .eyebrow{

    font-family:"Inter",sans-serif;

    font-size:10px;

    letter-spacing:2.5px;

    text-transform:uppercase;

    color:var(--sage);

    margin-bottom:8px;

}

.rhythm-center .title{

    font-family:"Fraunces",serif;

    font-style:italic;

    font-weight:500;

    font-size:19px;

    color:var(--heading);

    line-height:1.35;

}

.rhythm-node{

    position:absolute;

    width:132px;

    text-align:center;

}

.rhythm-node.top{ top:-34px; left:50%; transform:translateX(-50%); }
.rhythm-node.right{ top:50%; right:-46px; transform:translateY(-50%); }
.rhythm-node.bottom{ bottom:-34px; left:50%; transform:translateX(-50%); }
.rhythm-node.left{ top:50%; left:-46px; transform:translateY(-50%); }

.rhythm-node .ring{

    width:68px;

    height:68px;

    margin:0 auto 12px;

    border-radius:50%;

    background:var(--navy2);

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

    color:var(--gold-bright);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.rhythm-node.right .ring,
.rhythm-node.left .ring{

    border-color:var(--sage);

    color:var(--sage);

}

.rhythm-node h5{

    font-family:"Fraunces",serif;

    font-weight:600;

    font-size:16px;

    color:var(--heading);

    margin-bottom:4px;

}

.rhythm-node p{

    font-family:"Inter",sans-serif;

    font-size:12.5px;

    color:var(--text-dim);

    line-height:1.5;

    margin:0;

}

/*====================================================
        STATEMENT BAND
====================================================*/

.statement{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}

.statement p{

    font-family:"Fraunces",serif;

    font-weight:600;

    font-size:clamp(24px,2.8vw,34px);

    line-height:1.5;

    color:var(--heading);

}

.statement .rule{

    width:70px;

    height:2px;

    background:var(--sage);

    margin:30px auto 0;

    border-radius:2px;

}

/*====================================================
        TRIPTYCH (Hope / Faith / Relationship)
====================================================*/

.triptych{

    display:grid;

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

    max-width:900px;

    margin:60px auto 0;

}

.triptych-item{

    padding:0 34px;

    text-align:center;

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

}

.triptych-item:first-child{

    border-left:none;

}

.triptych-item .word{

    display:block;

    font-family:"Fraunces",serif;

    font-weight:700;

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--gold-bright);

    margin-bottom:14px;

}

.triptych-item p{

    color:var(--text-dim);

    font-size:15.5px;

    line-height:1.8;

    margin:0;

}

/*====================================================
        CLOSING CTA BANNER
====================================================*/

.cta-band{

    position:relative;

    text-align:center;

    padding:80px 40px;

    background:linear-gradient(160deg,var(--navy2),var(--ink) 70%);

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

    border-radius:6px;

}

.cta-band h3{

    font-family:"Fraunces",serif;

    font-weight:700;

    font-style:italic;

    font-size:clamp(26px,3vw,38px);

    color:var(--heading);

    margin-bottom:16px;

}

.cta-band p{

    color:var(--text);

    font-size:16.5px;

    max-width:480px;

    margin:0 auto 32px;

    line-height:1.8;

}

.cta-band .btn-cta{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 34px;

    background:var(--gold);

    color:var(--ink);

    font-family:"Inter",sans-serif;

    font-weight:700;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

    text-decoration:none;

    border-radius:2px;

    transition:.3s;

}

.cta-band .btn-cta:hover{

    background:var(--gold-bright);

    transform:translateY(-3px);

}

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

@media(max-width:992px){

    .page-banner{

        padding:150px 0 90px;

        background-attachment:scroll;

    }

    .congregation{

        padding:80px 0;

    }

    .block{

        padding-bottom:80px;

    }

    .rhythm-wheel{

        width:380px;

        height:380px;

    }

    .rhythm-center{

        padding:0 74px;

    }

    .story-layout{

        grid-template-columns:1fr;

        gap:44px;

    }

    .story-visual .frame{

        max-width:440px;

        margin:0 auto;

    }

}

@media(max-width:768px){

    .page-banner h1{

        font-size:38px;

    }

    .page-banner p{

        font-size:16px;

    }

    .section-heading h2{

        font-size:28px;

    }

    .story-grid p{

        font-size:16.5px;

    }

    .growth-marker{

        gap:14px;

    }

    .growth-path{

        min-width:34px;

    }

    /* collapse the wheel into a stacked list */

    .rhythm-wheel{

        width:100%;

        height:auto;

        border:none;

        display:flex;

        flex-direction:column;

        gap:26px;

    }

    .rhythm-wheel::before{

        display:none;

    }

    .rhythm-center{

        position:static;

        padding:0 0 6px;

    }

    .rhythm-node{

        position:static;

        width:100%;

        transform:none !important;

        display:flex;

        align-items:center;

        gap:18px;

        text-align:left;

        padding-bottom:22px;

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

    }

    .rhythm-node:last-child{

        border-bottom:none;

        padding-bottom:0;

    }

    .rhythm-node .ring{

        margin:0;

        flex:0 0 auto;

    }

    .triptych{

        grid-template-columns:1fr;

        gap:30px;

    }

    .triptych-item{

        border-left:none;

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

        padding:26px 10px 0;

    }

    .triptych-item:first-child{

        border-top:none;

        padding-top:0;

    }

    .cta-band{

        padding:60px 26px;

    }

}

@media(max-width:576px){

    .page-banner{

        padding:140px 0 80px;

    }

    .page-banner h1{

        font-size:32px;

    }

    .growth-marker{

        flex-direction:column;

    }

    .growth-path{

        width:1px;

        height:50px;

        min-width:0;

        background-image:linear-gradient(180deg,var(--gold) 0 6px,transparent 6px 14px);

        background-size:1px 14px;

    }

    .growth-path::before,
    .growth-path::after{

        left:50%;

        transform:translateX(-50%);

    }

    .growth-path::before{ top:30%; }
    .growth-path::after{ top:65%; }

}