.hero { min-height: 820px; position: relative; display: grid; align-items: center; overflow: hidden; background: var(--navy); color: white; padding: 132px 0 84px; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.75); }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,27,43,.98) 0%, rgba(7,27,43,.88) 46%, rgba(7,27,43,.38) 78%, rgba(7,27,43,.6) 100%), linear-gradient(0deg, rgba(7,27,43,.7), transparent 55%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .58fr); gap: 74px; align-items: end; }
.hero h1 { font-size: clamp(3.4rem, 6.7vw, 6.2rem); max-width: 830px; margin-bottom: 28px; }
.hero h1 span { color: #8ee8e4; }
.hero-lead { color: rgba(255,255,255,.78); font-size: 1.13rem; max-width: 690px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.hero-meta { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); max-width: 690px; }
.hero-meta > div { display: flex; align-items: center; gap: 10px; }
.meta-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #8ee8e4; }
.hero-meta span:not(.meta-icon) { display: grid; }.hero-meta strong { font-size: .84rem; }.hero-meta small { color: rgba(255,255,255,.62); }
.next-card { align-self: end; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); overflow: hidden; background: rgba(7,27,43,.72); backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0,0,0,.22); }
.next-card-top { display: flex; justify-content: space-between; gap: 15px; padding: 20px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.11); }.next-card .kicker { margin: 0; color: rgba(255,255,255,.55); }
.live-dot { color: #9be9e5; font-size: .7rem; font-weight: 800; display: flex; align-items: center; gap: 7px; }.live-dot i { width: 7px; height: 7px; background: #60e1ae; border-radius: 50%; box-shadow: 0 0 0 5px rgba(96,225,174,.12); }
.next-card-main { display: grid; grid-template-columns: 74px 1fr; gap: 20px; padding: 24px 22px; align-items: center; }.date-tile { display: grid; text-align: center; background: white; color: var(--navy); border-radius: 14px; overflow: hidden; }.date-tile strong { background: var(--water); padding: 5px; font-size: .65rem; letter-spacing: .1em; }.date-tile b { font-size: 1.8rem; line-height: 1; padding-top: 8px; }.date-tile small { font-size: .63rem; padding: 5px 0 8px; font-weight: 800; }.next-card-main h2 { font-size: 1.35rem; margin: 0 0 8px; }.next-card-main p { color: rgba(255,255,255,.65); margin-bottom: 7px; font-size: .84rem; }.next-card-main a { color: #8ee8e4; font-size: .8rem; font-weight: 800; }.next-card-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.1); }.next-card-footer span { display: grid; gap: 2px; background: rgba(7,27,43,.96); padding: 13px 18px; color: rgba(255,255,255,.56); font-size: .69rem; }.next-card-footer b { color: white; font-size: .74rem; }
.water-mark { position: absolute; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.06); border-radius: 48% 52% 66% 34% / 50% 38% 62% 50%; right: -160px; top: -130px; transform: rotate(25deg); }
.welcome-strip { position: relative; z-index: 5; margin-top: -2px; background: white; border-bottom: 1px solid var(--line); }.quick-grid { display: grid; grid-template-columns: repeat(4,1fr); }.quick-grid > a { min-height: 116px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 20px 22px; border-right: 1px solid var(--line); }.quick-grid > a:first-child { border-left: 1px solid var(--line); }.quick-grid a:hover { background: #f8fbfb; }.quick-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--sky); color: var(--water-dark); font-weight: 900; }.quick-grid span:nth-child(2) { display: grid; }.quick-grid strong { font-size: .9rem; }.quick-grid small { font-size: .72rem; color: var(--muted); line-height: 1.35; margin-top: 3px; }.quick-grid b { color: var(--water-dark); }
.split-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 96px; align-items: center; }.image-stack { position: relative; min-height: 590px; }.image-card { position: absolute; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #dfeaed; }.image-card img { width: 100%; height: 100%; object-fit: cover; }.image-card-main { width: 77%; height: 500px; left: 0; top: 0; }.image-card-small { width: 47%; height: 280px; right: 0; bottom: 0; border: 8px solid white; }.floating-note { position: absolute; left: 8%; bottom: 26px; max-width: 270px; display: grid; padding: 18px 20px; color: white; background: var(--navy); border-radius: 16px; box-shadow: var(--shadow); }.floating-note strong { font-size: .95rem; }.floating-note small { color: rgba(255,255,255,.65); margin-top: 4px; line-height: 1.35; }.content-block > p:not(.eyebrow,.section-lead) { font-size: .97rem; }.steps { display: grid; gap: 23px; margin-top: 30px; }.steps article { display: grid; grid-template-columns: 46px 1fr; gap: 17px; }.steps article > span { width: 40px; height: 40px; display: grid; place-items: center; background: var(--sky); color: var(--water-dark); border-radius: 50%; font-size: .72rem; font-weight: 900; }.steps h3 { margin: 2px 0 6px; font-size: 1.03rem; }.steps p { margin: 0; font-size: .88rem; color: var(--muted); }
.about-section { background: var(--cream); }.about-grid { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.2fr); gap: 90px; align-items: center; }.scripture-card { margin-top: 30px; padding: 24px; border-left: 4px solid var(--water); background: white; border-radius: 0 18px 18px 0; }.scripture-card span { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--water-dark); }.scripture-card blockquote { margin: 8px 0 0; font-family: Georgia, serif; font-size: 1.12rem; line-height: 1.55; color: var(--ink); }.values-panel { background: var(--navy); color: white; border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); }.values-panel .kicker { color: rgba(255,255,255,.45); }.value-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; }.value-grid article { background: var(--navy); padding: 28px 25px; }.value-grid span { color: var(--water); font-size: .72rem; font-weight: 900; }.value-grid h3 { margin: 12px 0 8px; }.value-grid p { margin: 0; color: rgba(255,255,255,.58); font-size: .84rem; }
.schedule-section { background: white; }.schedule-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.schedule-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 345px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }.schedule-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }.schedule-card.featured { background: var(--navy); color: white; border-color: var(--navy); }.schedule-card.featured p { color: rgba(255,255,255,.62); }.schedule-day { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 42px; }.schedule-day span { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 900; color: var(--water-dark); }.featured .schedule-day span { color: var(--water); }.schedule-day strong { font-size: 1.2rem; }.schedule-card h3 { font-size: 1.55rem; margin: 13px 0 10px; }.schedule-card p { color: var(--muted); font-size: .9rem; }.schedule-card > a { justify-self: end; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }.featured > a { border-color: rgba(255,255,255,.2); }.verification-note { margin: 22px auto 0; max-width: 760px; text-align: center; font-size: .76rem; color: #7a8d96; }
.ministries-section { background: #f7faf9; }.ministry-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }.ministry-card { background: white; border-radius: var(--radius); overflow: hidden; border: 1px solid #e5eeee; box-shadow: 0 8px 28px rgba(7,27,43,.04); }.ministry-image { position: relative; height: 165px; overflow: hidden; background: #dcebea; }.ministry-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }.ministry-card:hover .ministry-image img { transform: scale(1.04); }.ministry-image > span { position: absolute; left: 16px; bottom: 16px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.94); color: var(--water-dark); font-weight: 900; }.ministry-copy { padding: 22px; }.ministry-copy h3 { margin-bottom: 9px; }.ministry-copy p { font-size: .82rem; color: var(--muted); min-height: 80px; }.ministry-copy a { display: inline-flex; gap: 8px; font-size: .78rem; font-weight: 900; color: var(--water-dark); }
.community-section { background: var(--navy); color: white; overflow: hidden; }.community-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.05fr); gap: 90px; align-items: center; }.community-copy > p:not(.eyebrow) { color: rgba(255,255,255,.66); max-width: 620px; }.community-links { display: grid; margin-top: 35px; border-top: 1px solid rgba(255,255,255,.13); }.community-links a { display: grid; grid-template-columns: 1fr auto; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.13); }.community-links span { font-weight: 800; }.community-links small { grid-column: 1; color: rgba(255,255,255,.45); }.community-links b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--water); }.community-visual { position: relative; min-height: 570px; }.community-visual img { width: 100%; height: 570px; object-fit: cover; border-radius: var(--radius-lg); }.impact-card { position: absolute; left: -45px; bottom: 38px; max-width: 330px; background: var(--gold); color: #2c2313; padding: 22px; border-radius: 18px; box-shadow: var(--shadow); }.impact-card strong { font-size: 1.05rem; }.impact-card p { color: #4f4028; margin: 6px 0 0; font-size: .84rem; }
.pastor-section { background: var(--cream); }.pastor-grid { display: grid; grid-template-columns: minmax(300px,.65fr) minmax(0,1fr); gap: 88px; align-items: center; max-width: 1000px; }.pastor-photo { position: relative; }.pastor-photo::before { content: ''; position: absolute; width: 80%; height: 100%; border: 1px solid #b9d2d0; border-radius: 48% 48% 18px 18px; left: -24px; top: -24px; }.pastor-photo img { position: relative; width: 100%; aspect-ratio: .82; object-fit: cover; border-radius: 48% 48% 18px 18px; background: #d8e7e5; }.pastor-copy .placeholder-copy { padding-left: 18px; border-left: 2px solid var(--gold); color: var(--muted); }.signature-placeholder { display: block; margin-top: 24px; font-family: Georgia, serif; font-style: italic; font-size: 1.35rem; }.pastor-copy small { color: var(--muted); }
.messages-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.72fr); gap: 46px; }.featured-message { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }.video-poster { position: relative; min-height: 360px; background: var(--navy); overflow: hidden; }.video-poster img { width: 100%; height: 100%; position: absolute; object-fit: cover; opacity: .75; }.play-button { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: white; color: var(--navy); box-shadow: 0 12px 38px rgba(0,0,0,.25); padding-left: 4px; }.video-poster > span { position: absolute; left: 22px; bottom: 20px; background: rgba(7,27,43,.78); color: white; padding: 7px 11px; border-radius: 999px; font-size: .7rem; font-weight: 800; }.message-copy { padding: 26px; }.message-copy .kicker { color: var(--water-dark); }.message-copy h3 { font-size: 1.5rem; margin-bottom: 8px; }.message-copy p { margin-bottom: 0; color: var(--muted); }.message-copy code { background: #eef4f4; padding: 2px 5px; border-radius: 4px; }.message-list { border-top: 1px solid var(--line); }.message-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }.message-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--sky); color: var(--water-dark); font-size: .7rem; }.message-row > span:nth-child(2) { display: grid; }.message-row small { color: var(--water-dark); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }.message-row strong { margin: 3px 0; font-size: .92rem; }.message-row em { color: var(--muted); font-size: .72rem; font-style: normal; }.message-row b { color: var(--water-dark); }
.events-section { background: #f7faf9; }.events-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.event-card { display: grid; grid-template-columns: 70px 1fr; gap: 22px; padding: 25px; background: white; border: 1px solid #e5eeee; border-radius: var(--radius); }.event-date { height: 82px; display: grid; text-align: center; align-content: center; background: var(--navy); color: white; border-radius: 13px; }.event-date span { font-size: .6rem; letter-spacing: .12em; font-weight: 900; color: #8ee8e4; }.event-date strong { font-size: 1.75rem; line-height: 1.1; }.event-card h3 { margin: 11px 0 8px; }.event-card p { color: var(--muted); font-size: .82rem; }.event-card a { font-size: .76rem; font-weight: 900; color: var(--water-dark); }
.give-section { padding-top: 70px; background: white; }.give-shell { min-height: 420px; display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,.72fr); gap: 80px; align-items: center; padding: 58px 64px; background: linear-gradient(125deg, #092333, #0b3545 58%, #0f5357); color: white; border-radius: var(--radius-lg); overflow: hidden; position: relative; }.give-shell::after { content: ''; position: absolute; width: 500px; height: 500px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; right: -250px; top: -100px; }.give-shell h2 { margin-bottom: 15px; }.give-shell p { color: rgba(255,255,255,.65); }.give-card { position: relative; z-index: 2; background: white; color: var(--ink); padding: 28px; border-radius: 20px; box-shadow: var(--shadow); }.give-card p { color: var(--muted); }.give-card .button { margin: 7px 0 18px; }.give-card > small { display: block; color: var(--muted); }.secure-chip { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: #fff2db; color: #72501a; font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.visit-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.05fr); gap: 70px; align-items: center; }.visit-details { display: grid; gap: 0; margin: 30px 0; border-top: 1px solid var(--line); }.visit-details > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }.visit-details dt { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--water-dark); }.visit-details dd { margin: 0; color: var(--ink-2); }.visit-details a { text-decoration: underline; text-underline-offset: 3px; }.button-row { display: flex; flex-wrap: wrap; gap: 10px; }.map-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }.map-placeholder { height: 490px; position: relative; overflow: hidden; background: #d7e7e4; }.map-placeholder img { width: 100%; height: 100%; object-fit: cover; }.map-pin { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%); display: grid; background: white; min-width: 175px; padding: 13px 15px 13px 42px; border-radius: 12px; box-shadow: var(--shadow); }.map-pin i { position: absolute; left: 14px; top: 19px; width: 18px; height: 18px; background: var(--water); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }.map-pin strong { font-size: .84rem; }.map-pin small { font-size: .68rem; color: var(--muted); }.map-footer { display: flex; justify-content: space-between; gap: 16px; padding: 17px 20px; font-size: .8rem; }.map-footer a { color: var(--water-dark); font-weight: 900; }
.contact-section { background: var(--navy); color: white; }.contact-grid { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1fr); gap: 90px; align-items: start; }.contact-intro > p:not(.eyebrow) { color: rgba(255,255,255,.62); }.contact-cards { display: grid; gap: 10px; margin-top: 30px; }.contact-cards a { display: grid; padding: 15px 17px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; }.contact-cards span { color: rgba(255,255,255,.45); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }.contact-cards strong { font-size: .9rem; }.contact-form { background: white; color: var(--ink); padding: 34px; border-radius: var(--radius); }.contact-form label:not(.check-field) { display: grid; gap: 7px; font-size: .75rem; font-weight: 800; color: var(--ink-2); }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid #c9d7dc; border-radius: 10px; padding: 11px 12px; color: var(--ink); background: white; outline: none; }.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--water-dark); box-shadow: 0 0 0 3px rgba(32,182,177,.12); }.contact-form > label, .contact-form > .field-row { margin-bottom: 16px; }.check-field { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 20px; font-size: .72rem; color: var(--muted); }.check-field input { width: auto; margin-top: 4px; }.form-note { font-size: .7rem; color: var(--muted); margin: 12px 0 0; }
.newsletter-section { background: var(--water); padding: 48px 0; }.newsletter-shell { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }.newsletter-shell .eyebrow { color: #0b5c5b; margin-bottom: 8px; }.newsletter-shell h2 { font-size: clamp(1.8rem,3vw,2.65rem); margin: 0; }.newsletter-form { display: flex; min-width: min(100%, 460px); background: white; padding: 6px; border-radius: 999px; box-shadow: 0 10px 34px rgba(7,27,43,.13); }.newsletter-form input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 17px; background: transparent; }.newsletter-form .button { min-width: 130px; }
.site-footer { background: #04131f; color: white; padding: 70px 0 20px; }.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, .7fr); gap: 60px; }.brand-light { margin-bottom: 20px; }.footer-brand > p { max-width: 320px; color: rgba(255,255,255,.52); font-size: .84rem; }.social-row { display: flex; gap: 8px; margin-top: 20px; }.social-row a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #9be9e5; font-weight: 900; }.footer-grid h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #91a8b4; margin-bottom: 18px; }.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; }.footer-grid a, .footer-grid > div > p { color: rgba(255,255,255,.65); font-size: .8rem; margin-bottom: 9px; }.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 45px; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; }.footer-bottom p { color: rgba(255,255,255,.4); font-size: .7rem; margin: 0; }.footer-bottom div { display: flex; gap: 20px; }.footer-bottom a { color: rgba(255,255,255,.5); font-size: .7rem; }
@media (max-width: 1060px) { .hero-grid { grid-template-columns: 1fr; gap: 45px; }.hero { min-height: auto; }.next-card { max-width: 600px; }.quick-grid { grid-template-columns: repeat(2,1fr); }.quick-grid > a:nth-child(odd) { border-left: 1px solid var(--line); }.split-grid, .about-grid, .community-grid, .visit-grid { gap: 54px; }.ministry-grid { grid-template-columns: repeat(2,1fr); }.events-grid { grid-template-columns: 1fr 1fr; }.footer-grid { grid-template-columns: 1.4fr repeat(3,1fr); gap: 32px; } }
@media (max-width: 880px) { .split-grid, .about-grid, .community-grid, .pastor-grid, .messages-grid, .visit-grid, .contact-grid { grid-template-columns: 1fr; }.split-grid { gap: 45px; }.image-stack { max-width: 650px; }.about-grid { gap: 50px; }.schedule-grid { grid-template-columns: 1fr; }.schedule-card { min-height: 260px; }.schedule-day { margin-bottom: 25px; }.community-visual { max-width: 650px; }.impact-card { left: 20px; }.pastor-grid { max-width: 650px; }.pastor-photo { max-width: 420px; }.messages-grid { gap: 24px; }.give-shell { grid-template-columns: 1fr; gap: 30px; }.newsletter-shell { grid-template-columns: 1fr; }.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }.footer-grid > div:last-child { grid-column: 2 / 4; } }
@media (max-width: 650px) { .hero { padding-top: 120px; }.hero h1 { font-size: clamp(3rem,14vw,4.4rem); }.hero-actions { display: grid; }.hero-meta { display: grid; gap: 14px; }.next-card-main { grid-template-columns: 66px 1fr; padding: 20px 17px; }.next-card-footer { grid-template-columns: 1fr; }.quick-grid { grid-template-columns: 1fr; }.quick-grid > a, .quick-grid > a:first-child, .quick-grid > a:nth-child(odd) { border-left: 1px solid var(--line); }.image-stack { min-height: 470px; }.image-card-main { width: 86%; height: 390px; }.image-card-small { height: 210px; }.floating-note { left: 4%; bottom: 8px; max-width: 245px; }.values-panel { padding: 24px; }.value-grid { grid-template-columns: 1fr; }.ministry-grid, .events-grid { grid-template-columns: 1fr; }.community-visual, .community-visual img { min-height: 430px; height: 430px; }.impact-card { left: 14px; right: 14px; bottom: 14px; max-width: none; }.give-shell { width: 100%; border-radius: 0; padding: 48px 20px; }.visit-details > div { grid-template-columns: 1fr; gap: 3px; }.map-placeholder { height: 370px; }.field-row { grid-template-columns: 1fr; }.contact-form { padding: 24px 18px; }.newsletter-form { border-radius: 16px; display: grid; padding: 7px; }.newsletter-form input { min-height: 46px; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / 3; }.footer-grid > div:last-child { grid-column: auto; }.footer-bottom { display: grid; }.footer-bottom div { flex-wrap: wrap; } }