@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root { --aqua:#52bbaf; --ink:#2b2b2b; --soft:#f7f7f7; }
* { box-sizing:border-box; }
html { background:#fff; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; left:-999px; top:0; z-index:1000; background:#fff; padding:1rem; }
.skip-link:focus { left:0; }

/* Header: transparent over the hero, then the same white sticky bar seen on scroll. */
.site-header { position:absolute; z-index:50; top:24px; left:24px; right:24px; height:118px; display:grid; grid-template-columns:230px 1fr 140px; align-items:center; gap:18px; padding:0 26px; color:#fff; transition:.25s ease; }
.site-header.is-scrolled { position:fixed; top:0; left:0; right:0; height:88px; padding:0 20px; color:var(--aqua); background:rgba(255,255,255,.97); border-bottom:1px solid #e7e7e7; box-shadow:0 5px 24px rgb(0 0 0 / .04); }
.brand img { width:190px; height:auto; background:transparent; }
.brand-dark { display:none; }
.site-header.is-scrolled .brand-white { display:none; }
.site-header.is-scrolled .brand-dark { display:block; }
.main-nav { justify-self:center; display:flex; align-items:center; gap:6px; min-height:56px; padding:3px 6px; border:1px solid #fff; border-radius:999px; background:#fff; color:#4a9f96; }
.site-header.is-scrolled .main-nav { border-color:#e1e1e1; }
.nav-item { display:grid; min-width:92px; min-height:46px; place-items:center; border-radius:999px; font-size:15px; font-weight:500; transition:background .2s,color .2s,transform .2s; }
.nav-item.active,.nav-item:hover { background:var(--aqua); color:#fff; }
.nav-item:hover { transform:translateY(-1px); }
.nav-emphasis,.visit-nav { font-weight:600; }
.visit-nav { display:grid; min-height:52px; place-items:center; border:1px solid #fff; border-radius:999px; background:#fff; color:#4a9f96; font-size:15px; font-weight:500; }
.site-header.is-scrolled .visit-nav { border-color:#e1e1e1; }
.menu-toggle { display:none; border:0; background:transparent; }
.mobile-nav-head,.mobile-visit { display:none; }

/* Homepage */
.home-hero { position:relative; min-height:calc(100vh - 48px); margin:24px; overflow:hidden; border-radius:36px; color:#fff; }
.home-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgb(19 33 34 / .18),transparent 70%),linear-gradient(0deg,rgb(0 0 0 / .38),transparent 48%); }
.hero-copy { position:absolute; z-index:2; left:36px; bottom:76px; }
.hero-copy h1 { margin:0; max-width:600px; color:#fff; font-size:clamp(56px,5.1vw,74px); font-weight:700; line-height:.9; letter-spacing:-.055em; }
.hero-copy p { margin:30px 0 28px; font-size:19px; }
.pill { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:0 32px; border-radius:999px; font-size:15px; font-weight:500; transition:.2s; }
.pill-fill { border:1px solid var(--aqua); color:#fff; background:var(--aqua); }
.pill-outline { border:1px solid var(--aqua); color:#4a9f96; background:transparent; }
.pill:hover { transform:translateY(-2px); box-shadow:0 7px 20px rgb(0 0 0 / .09); }
.intro-section { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:auto auto; gap:28px 6vw; max-width:1150px; margin:0 auto; padding:150px 30px; }
.intro-section h2 { margin:0; font-size:clamp(46px,4vw,58px); font-weight:700; line-height:1.12; letter-spacing:-.05em; }
.intro-section p { margin:0 0 28px; font-size:20px; line-height:1.55; }
.intro-section>div:first-child { grid-column:1; grid-row:1; align-self:end; }
.intro-section>div:nth-child(2) { grid-column:1; grid-row:2; }
.intro-video { grid-column:2; grid-row:1/3; position:relative; align-self:center; aspect-ratio:16/9; overflow:hidden; border-radius:24px; background:#e8eeee; box-shadow:0 16px 50px rgb(0 0 0 / .1); }
.intro-video iframe { width:100%; height:100%; border:0; }
.new-section { position:relative; min-height:620px; margin:0 24px; overflow:hidden; border-radius:30px; color:#fff; }
.new-section>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.new-shade { position:absolute; inset:0; background:rgb(8 25 34 / .48); }
.new-content { position:relative; z-index:2; padding:70px 50px 65px; text-align:center; }
.new-content h2 { margin:0 0 38px; font-size:clamp(40px,4vw,54px); font-weight:700; letter-spacing:-.04em; }
.new-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:70px; margin-top:45px; text-align:left; }
.new-steps span { display:block; margin-bottom:24px; color:#fff; font-size:58px; line-height:1; }
.new-steps p { margin:0; font-size:19px; line-height:1.45; }
.explore-section { padding:125px 5vw 80px; text-align:center; }
.explore-section>h2 { margin:0; font-size:50px; font-weight:700; letter-spacing:-.05em; }
.explore-intro { max-width:620px; margin:20px auto 78px; line-height:1.7; }
.ministry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:70px 7vw; text-align:left; }
.ministry-item { height:100%; }
.ministry-item>a { display:flex; height:100%; flex-direction:column; align-items:flex-start; }
.ministry-item img { width:190px; height:190px; margin:0 auto 32px; border-radius:50%; object-fit:cover; transition:.3s; }
.ministry-item a:hover img { transform:scale(1.025); }
.ministry-item h3 { margin:0 0 15px; font-size:28px; font-weight:700; letter-spacing:-.04em; }
.ministry-item p { margin:0 0 24px; font-size:16px; line-height:1.5; text-align:justify; }
.ministry-item .pill { margin-top:auto; min-height:44px; padding:0 24px; align-self:flex-start; }
.visit-cta { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); min-height:520px; margin:80px 24px 24px; overflow:hidden; border-radius:30px; color:#fff; }
.visit-cta-image { min-height:520px; }
.visit-cta-image img { width:100%; height:100%; object-fit:cover; object-position:center; }
.visit-cta-copy { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:65px 45px; background:var(--aqua); text-align:center; }
.location-mark { font-size:34px; }
.visit-cta h2 { margin:18px auto 12px; font-size:clamp(32px,3.2vw,48px); font-weight:700; line-height:1.13; letter-spacing:-.04em; }
.visit-cta p { margin:0 0 28px; }
.visit-cta .pill { border-color:#fff; background:#fff; color:var(--aqua); }
.give-cta { margin:24px; padding:90px 25px; border-radius:30px; background:var(--soft); text-align:center; }
.give-cta>p { color:var(--aqua); font-size:13px; font-weight:600; letter-spacing:.12em; }
.give-cta h2 { margin:10px 0 25px; color:var(--aqua); font-size:50px; font-weight:600; letter-spacing:-.05em; }
.give-cta div { max-width:600px; margin:0 auto 38px; line-height:1.5; }

/* Inner pages retain the original rounded, image-led visual language. */
.inner-hero { position:relative; min-height:600px; margin:24px; overflow:hidden; border-radius:36px; color:#fff; }
.inner-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.inner-hero-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgb(0 0 0 / .52),rgb(0 0 0 / .05)); }
.inner-hero-copy { position:absolute; z-index:2; left:40px; right:40px; bottom:55px; }
.inner-hero-copy h1 { margin:0; font-size:clamp(55px,6vw,82px); font-weight:700; line-height:.95; letter-spacing:-.055em; }
.inner-hero-copy p { max-width:710px; margin:22px 0 0; font-size:20px; line-height:1.5; }
.section { width:min(100% - 48px,1150px); margin-inline:auto; padding-block:105px; }
.heading-xl,.heading-lg { font-family:inherit; font-weight:700; line-height:1.03; letter-spacing:-.05em; }
.heading-xl { font-size:clamp(48px,6vw,78px); }
.heading-lg { font-size:clamp(42px,5vw,62px); }
.body-copy { color:var(--ink); font-size:18px; line-height:1.75; }
.eyebrow { color:var(--aqua)!important; font-size:13px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:0 30px; border-radius:999px; font-size:15px; font-weight:500; }
.button-dark,.button-light { border:1px solid var(--aqua); background:var(--aqua); color:#fff; }
.text-link { display:inline-block; color:var(--aqua); font-weight:600; }
.image-frame img { border-radius:30px; }
.field { display:grid; gap:8px; font-size:13px; font-weight:600; }
.field input,.field textarea { width:100%; border:1px solid #ddd; border-radius:15px; background:#fff; padding:14px; font:inherit; }
.team-photo { border-radius:16px; }

/* YouTube sermon gallery */
.latest-sermon { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:70px; align-items:center; }
.latest-copy .heading-lg { margin:12px 0 28px; }
.latest-copy .body-copy { margin:0 0 18px; }
.latest-player-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:24px; background:#e9eeee; box-shadow:0 15px 45px rgb(0 0 0 / .1); }
.latest-player-wrap iframe { width:100%; height:100%; border:0; }
.sermon-loading { position:absolute; inset:0; display:grid; place-items:center; padding:25px; color:#4a9f96; text-align:center; }
.sermon-library { margin:0 24px 24px; padding:95px max(30px,5vw); border-radius:30px; background:var(--soft); text-align:center; }
.sermon-library-head h2 { margin:10px 0 50px; font-size:clamp(42px,5vw,62px); font-weight:700; letter-spacing:-.05em; }
.sermon-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; text-align:left; }
.sermon-card { overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 5px 18px rgb(0 0 0 / .08); transition:transform .22s,box-shadow .22s; }
.sermon-card:hover { transform:translateY(-5px); box-shadow:0 12px 28px rgb(0 0 0 / .14); }
.sermon-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#dfe7e6; }
.sermon-thumb img { width:100%; height:100%; object-fit:cover; }
.sermon-play { position:absolute; inset:50% auto auto 50%; display:grid; width:48px; height:48px; place-items:center; border-radius:50%; transform:translate(-50%,-50%); background:rgb(82 187 175 / .95); color:#fff; font-size:15px; padding-left:2px; }
.sermon-card-copy { padding:18px; }
.sermon-card-copy h3 { margin:0 0 12px; font-size:16px; font-weight:700; line-height:1.35; }
.sermon-card-copy time { color:#6d7473; font-size:12px; }
.sermon-status { margin:0 auto 30px; color:#57706d; }
.sermon-status.is-error { max-width:620px; padding:20px; border-radius:14px; background:#fff; }
.sermon-more { margin-top:42px; }

.site-footer { padding:105px max(30px,calc((100vw - 880px)/2)) 35px; background:#fff; }
.footer-grid { display:grid; grid-template-columns:1fr 1.2fr .7fr; gap:70px; font-size:18px; line-height:1.5; }
.footer-visit { text-align:center; }
.footer-visit>p,.footer-links>p { margin-top:0; }
.footer-visit h2 { margin:22px 0 30px; color:#73c8bf; font-size:35px; font-weight:600; letter-spacing:-.04em; }
.footer-links { display:flex; flex-direction:column; text-align:center; gap:10px; }
.socials { display:flex; gap:16px; margin-top:25px; color:#60b7ad; }
.socials a { display:grid; width:44px; height:44px; place-items:center; border:1px solid rgb(82 187 175 / .3); border-radius:50%; transition:.2s; }
.socials svg { width:20px; height:20px; fill:currentColor; }
.socials a:hover { border-color:var(--aqua); background:var(--aqua); color:#fff; transform:translateY(-2px); }
.copyright { margin-top:80px; padding-top:24px; border-top:1px solid #333; font-size:12px; text-align:center; }

@media (max-width:1023px) {
  .site-header { grid-template-columns:1fr auto; height:82px; padding:0 14px 0 18px; }
  .brand img { width:170px; }
  .menu-toggle { display:grid; width:48px; height:48px; place-content:center; padding:0; border:1px solid rgb(255 255 255 / .7); border-radius:50%; color:inherit; backdrop-filter:blur(8px); cursor:pointer; }
  .site-header.is-scrolled .menu-toggle { border-color:#dce8e7; background:#eff8f7; }
  .menu-toggle span { display:block; width:20px; height:2px; margin:3px 0; border-radius:3px; background:currentColor; transition:.25s; }
  .main-nav { display:none; position:fixed; z-index:80; inset:12px; justify-self:stretch; flex-direction:column; align-items:stretch; gap:0; min-height:calc(100dvh - 24px); padding:22px; border:1px solid #e7eceb; border-radius:28px; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 24px 80px rgb(0 0 0 / .22); backdrop-filter:blur(18px); }
  .main-nav.is-open { display:flex; animation:menu-in .22s ease-out; }
  .mobile-nav-head { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; margin-bottom:18px; padding:0 2px 18px; border-bottom:1px solid #e8edec; }
  .mobile-nav-head img { justify-self:center; width:155px; height:auto; background:transparent; }
  .mobile-nav-spacer { width:42px; height:42px; }
  .mobile-nav-head button { display:grid; width:42px; height:42px; place-items:center; border:0; border-radius:50%; background:#eef8f7; color:#378f86; font:300 32px/1 sans-serif; cursor:pointer; }
  .nav-item { display:flex; width:100%; min-height:auto; align-items:center; justify-content:space-between; padding:15px 10px; border-bottom:1px solid #edf0ef; border-radius:0; color:var(--ink); font-size:clamp(22px,6vw,30px); font-weight:600; letter-spacing:-.035em; }
  .nav-item.active,.nav-item:hover { background:transparent; color:var(--aqua); transform:none; }
  .nav-item::after { content:'›'; margin-left:24px; color:#86aaa6; font:300 30px/1 sans-serif; }
  .mobile-visit { display:flex; min-height:58px; align-items:center; justify-content:space-between; margin-top:20px; padding:0 22px; border-radius:999px; background:var(--aqua); color:#fff; font-weight:600; }
  .mobile-visit span { font:300 30px/1 sans-serif; }
  .visit-nav { display:none; }
  .ministry-grid { grid-template-columns:repeat(2,1fr); }
  .sermon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.menu-open { overflow:hidden; }
  @keyframes menu-in { from { opacity:0; transform:translateY(-8px) scale(.985); } to { opacity:1; transform:none; } }
}
@media (max-width:700px) {
  .site-header { top:12px; left:12px; right:12px; padding:0 15px; }
  .site-header.is-scrolled { left:0; right:0; }
  .brand img { width:145px; }
  .home-hero,.inner-hero { min-height:760px; margin:12px; border-radius:25px; }
  .hero-copy { left:23px; right:23px; bottom:55px; }
  .hero-copy h1 { font-size:49px; }
  .hero-copy p { font-size:16px; }
  .intro-section { grid-template-columns:1fr; grid-template-rows:auto; gap:30px; padding:95px 26px; }
  .intro-section>div:first-child,.intro-section>div:nth-child(2),.intro-video { grid-column:1; grid-row:auto; }
  .intro-section p { font-size:20px; }
  .new-section { margin:0 12px; min-height:850px; }
  .new-content { padding:55px 25px; }
  .new-steps { grid-template-columns:1fr; gap:28px; }
  .new-steps span { margin-bottom:8px; font-size:40px; }
  .new-steps p { font-size:17px; }
  .explore-section { padding:90px 28px 40px; }
  .ministry-grid { grid-template-columns:1fr; gap:60px; }
  .ministry-item { text-align:center; }
  .ministry-item p { text-align:left; }
  .visit-cta,.give-cta { margin:12px; }
  .visit-cta { grid-template-columns:1fr; }
  .visit-cta-image { min-height:320px; max-height:420px; }
  .visit-cta-copy { padding:58px 24px; }
  .inner-hero-copy { left:24px; right:24px; bottom:45px; }
  .inner-hero-copy h1 { font-size:50px; }
  .footer-grid { grid-template-columns:1fr; text-align:center; }
  .socials { justify-content:center; }
  .site-footer { padding:80px 28px 30px; }
  .latest-sermon { grid-template-columns:1fr; gap:42px; }
  .sermon-library { margin:0 12px 12px; padding:75px 18px; }
  .sermon-grid { grid-template-columns:1fr; }
}