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

 :root {
   /* updated */
   --white: #ffffff;
   --off-white: #f7f8fc;
   --light: #eef1f8;
   --blue: #0e0446;
   --blue-mid: #2563b0;
   --blue-light: #3b82d8;
   --blue-pale: #dce9f9;
   --blue-ultra: #e8f0fb;
   --gold: #e0bf00;
   --text: #1a1e2e;
   --text-muted: #5a6278;
   --border: rgba(26, 77, 143, 0.12);
   --shadow: 0 8px 40px rgba(26, 77, 143, 0.10);
   --shadow-lg: 0 20px 60px rgba(26, 77, 143, 0.15);
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'Jost', sans-serif;
   background: var(--white);
   color: var(--text);
   overflow-x: hidden;
 }

 /* ─── PRELOADER ─── */
 #preloader {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: var(--off-white);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity 0.6s ease, visibility 0.6s ease;
 }

 #preloader.hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
 }

 .preloader-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   position: relative;
 }

 .preloader-logo {
   width: 64px;
   height: 64px;
   background: rgba(255, 255, 255, 0.12);
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   animation: preloaderPulse 1.6s ease-in-out infinite;
 }

 .preloader-logo img {
   width: 85px;
   fill: white;
 }

 .preloader-ring {
   width: 100px;
   height: 100px;
   border: 3px solid rgba(255, 255, 255, 0.15);
   border-top-color: var(--gold);
   border-radius: 50%;
   position: absolute;
   top: -20px;
   left: 50%;
   transform: translateX(-50%);
   animation: preloaderSpin 1s linear infinite;
 }

 .preloader-text {
   font-family: 'Cormorant Garamond', serif;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   color: rgba(0, 8, 78, 0.829);
   margin-top: 28px;
 }

 @keyframes preloaderSpin {
   to {
     transform: translateX(-50%) rotate(360deg);
   }
 }

 @keyframes preloaderPulse {

   0%,
   100% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.08);
   }
 }

 /* ─── SCROLLBAR ─── */
 ::-webkit-scrollbar {
   width: 4px;
 }

 ::-webkit-scrollbar-track {
   background: var(--light);
 }

 ::-webkit-scrollbar-thumb {
   background: var(--blue-light);
   border-radius: 4px;
 }

 /* ─── NAV ─── */
 nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 5%;
   height: 72px;
   background: rgba(255, 255, 255, 0.92);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--border);
   transition: box-shadow .3s;
 }

 nav.scrolled {
   box-shadow: 0 4px 24px rgba(26, 77, 143, 0.10);
 }

 .nav-logo {
   display: flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
 }

 .nav-logo-icon {
   width: 40px;
   height: 40px;
   background: var(--blue);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .nav-logo-icon svg {
   fill: white;
   width: 22px;
   height: 22px;
 }

 .nav-logo-text {
   line-height: 1.1;
 }

 .nav-logo-text span:first-child {
   display: block;
   font-family: 'Cormorant Garamond', serif;
   font-size: 16px;
   font-weight: 700;
   color: var(--blue);
   letter-spacing: 0.02em;
 }

 .nav-logo-text span:last-child {
   display: block;
   font-size: 10px;
   font-weight: 500;
   color: var(--text-muted);
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }

 .nav-links {
   display: flex;
   align-items: center;
   gap: 36px;
   list-style: none;
 }

 .nav-links a {
   text-decoration: none;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--text-muted);
   letter-spacing: 0.04em;
   text-transform: uppercase;
   transition: color .2s;
   position: relative;
 }

 .nav-links a::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   right: 0;
   height: 1.5px;
   background: var(--blue);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .25s;
 }

 .nav-links a:hover {
   color: var(--blue);
 }

 .nav-links a:hover::after {
   transform: scaleX(1);
 }

 .nav-cta {
   background: var(--blue);
   color: white !important;
   padding: 9px 22px;
   border-radius: 6px;
   font-size: 13px !important;
   font-weight: 600 !important;
   letter-spacing: 0.06em !important;
   transition: background .2s, transform .15s !important;
 }

 .nav-cta::after {
   display: none !important;
 }

 .nav-cta:hover {
   background: var(--blue-mid) !important;
   transform: translateY(-1px);
 }

 .burger {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   background: none;
   border: none;
   padding: 4px;
 }

 .burger span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--blue);
   border-radius: 2px;
   transition: transform .3s, opacity .3s;
 }

 /* mobile nav */
 .mobile-nav {
   display: none;
   position: fixed;
   top: 72px;
   left: 0;
   right: 0;
   z-index: 99;
   background: white;
   border-bottom: 1px solid var(--border);
   padding: 20px 5% 28px;
   flex-direction: column;
   gap: 8px;
   box-shadow: var(--shadow);
 }

 .mobile-nav.open {
   display: flex;
 }

 .mobile-nav a {
   text-decoration: none;
   font-size: 15px;
   font-weight: 500;
   color: var(--text);
   padding: 10px 0;
   border-bottom: 1px solid var(--light);
   display: block;
 }

 .mobile-nav a:last-child {
   border-bottom: none;
 }

 /* ─── HERO SLIDESHOW ─── */
 .hero {
   position: relative;
   width: 100%;
   height: 100vh;
   min-height: 600px;
   overflow: hidden;
   margin-top: 72px;
 }

 .slides-wrap {
   position: relative;
   width: 100%;
   height: 100%;
 }

 .slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity 1.2s ease;
   display: flex;
   align-items: center;
 }

 .slide.active {
   opacity: 1;
   z-index: 2;
 }

 .slide.prev {
   z-index: 1;
 }

 .slide-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   transform: scale(1.06);
   animation: none;
 }

 .slide.active .slide-bg {
   animation: kenBurns 8s ease forwards;
 }

 @keyframes kenBurns {
   from {
     transform: scale(1.06);
   }

   to {
     transform: scale(1.00);
   }
 }

 /* gradient overlay */
 .slide-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(110deg,
       rgba(10, 30, 80, 0.78) 0%,
       rgba(10, 30, 80, 0.40) 55%,
       rgba(10, 30, 80, 0.18) 100%);
 }

 .slide-content {
   position: relative;
   z-index: 3;
   max-width: 700px;
   padding: 0 8%;
 }

 .slide-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 20px;
 }




 .slide-content h1 {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(42px, 6vw, 78px);
   font-weight: 300;
   line-height: 1.08;
   color: white;
   margin-bottom: 22px;
   letter-spacing: -0.01em;
 }



 .slide-content p {
   font-size: 16px;
   line-height: 1.75;
   color: rgba(255, 255, 255, 0.80);
   max-width: 480px;
   margin-bottom: 36px;
 }

 .hero-btns {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
 }

 .btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--blue);
   color: white;
   padding: 14px 30px;
   border-radius: 6px;
   font-size: 13.5px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-decoration: none;
   transition: background .2s, transform .15s;
 }

 .btn-primary:hover {
   background: var(--blue-mid);
   transform: translateY(-2px);
 }

 .btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1.5px solid rgba(255, 255, 255, 0.55);
   color: white;
   padding: 14px 30px;
   border-radius: 6px;
   font-size: 13.5px;
   font-weight: 500;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-decoration: none;
   transition: border-color .2s, background .2s;
 }

 .btn-outline:hover {
   border-color: white;
   background: rgba(255, 255, 255, 0.10);
 }

 /* slide nav dots */
 .slide-dots {
   position: absolute;
   bottom: 36px;
   left: 8%;
   z-index: 10;
   display: flex;
   gap: 10px;
 }

 .dot {
   width: 28px;
   height: 3px;
   border-radius: 2px;
   background: rgba(255, 255, 255, 0.35);
   cursor: pointer;
   transition: background .3s, width .3s;
   border: none;
 }

 .dot.active {
   background: var(--gold);
   width: 44px;
 }

 /* slide arrows */
 .slide-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
   background: rgba(255, 255, 255, 0.14);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: white;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   transition: background .2s;
 }

 .slide-arrow:hover {
   background: var(--blue);
 }

 .slide-arrow.prev {
   left: 3%;
 }

 .slide-arrow.next {
   right: 3%;
 }


 /* ─── SECTION UTILITIES ─── */
 section {
   width: 100%;
 }

 .container {
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 5%;
 }

 .section-label {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--blue-light);
   margin-bottom: 14px;
 }


 .section-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(34px, 4vw, 56px);
   font-weight: 400;
   line-height: 1.12;
   color: var(--text);
   margin-bottom: 18px;
 }



 .section-sub {
   font-size: 15.5px;
   line-height: 1.8;
   color: var(--text-muted);
   max-width: 560px;
 }

 /* ─── SERVICE TIMES BANNER ─── */
 .banner {
   background: var(--blue);
   padding: 18px 5%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: clamp(20px, 5vw, 60px);
   flex-wrap: wrap;
 }

 .banner-item {
   display: flex;
   align-items: center;
   gap: 12px;
   color: white;
 }

 .banner-item-icon {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .banner-item-icon svg {
   fill: white;
   width: 16px;
 }

 .banner-item-text span:first-child {
   display: block;
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   opacity: .65;
 }

 .banner-item-text span:last-child {
   display: block;
   font-size: 14px;
   font-weight: 600;
 }

 .banner-divider {
   width: 1px;
   height: 38px;
   background: rgba(255, 255, 255, 0.22);
 }

 /* ─── ABOUT ─── */
 .about {
   padding: 96px 0;
   background: var(--white);
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .about-img-wrap {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
 }

 .about-img-wrap::before {
   content: '';
   position: absolute;
   top: -16px;
   left: -16px;
   width: 64px;
   height: 64px;
   border-top: 3px solid var(--blue);
   border-left: 3px solid var(--blue);
   border-radius: 4px;
   z-index: 1;
 }

 .about-img-wrap::after {
   content: '';
   position: absolute;
   bottom: -16px;
   right: -16px;
   width: 64px;
   height: 64px;
   border-bottom: 3px solid var(--gold);
   border-right: 3px solid var(--gold);
   border-radius: 4px;
   z-index: 1;
 }

 .about-img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center top;
   display: block;
 }

 .about-img-wrap {
   aspect-ratio: 4/5;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   background: transparent;
 }

 /* placeholder illustration */
 .about-img-placeholder {
   width: 100%;
   aspect-ratio: 4/5;
   background: linear-gradient(145deg, var(--blue-pale), var(--blue-ultra));
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
 }

 .about-img-placeholder svg {
   width: 96px;
   opacity: .25;
   fill: var(--blue);
 }

 .about-stats {
   display: flex;
   gap: 32px;
   margin-top: 40px;
   flex-wrap: wrap;
 }

 .stat {
   border-left: 3px solid var(--blue);
   padding-left: 16px;
 }

 .stat-num {
   font-family: 'Cormorant Garamond', serif;
   font-size: 40px;
   font-weight: 700;
   color: var(--blue);
   line-height: 1;
 }

 .stat-label {
   font-size: 12px;
   font-weight: 500;
   color: var(--text-muted);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin-top: 4px;
 }

 /* ─── BELIEFS ─── */
 .beliefs {
   padding: 96px 0;
   background: var(--blue);
 }

 .beliefs-head {
   text-align: center;
   margin-bottom: 64px;
 }

 .beliefs-head .section-label {
   color: var(--gold);
 }

 .beliefs-head .section-label::before {
   background: var(--gold);
 }

 .beliefs-head .section-title {
   color: white;
 }

 .beliefs-head .section-title em {
   color: var(--gold);
   font-style: italic;
 }

 .beliefs-head .section-sub {
   margin: 0 auto;
   color: rgba(255, 255, 255, 0.85);
 }

 .beliefs-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
   justify-content: center;
   max-width: 1100px;
   margin: 0 auto;
 }

 .belief-card:nth-child(3) {
   grid-column: span 2;
   max-width: 500px;
   margin: 0 auto;
   width: 100%;
 }

 .belief-card {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   padding: 40px 32px;
   transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .belief-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow);
   background: rgba(255, 255, 255, 0.08);
 }

 .belief-icon {
   width: 52px;
   height: 52px;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 22px;
 }

 .belief-icon svg {
   fill: white;
   width: 26px;
 }

 .belief-card h3 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 10px;
   color: white;
 }

 .belief-card p {
   font-size: 14.5px;
   line-height: 1.75;
   color: rgba(255, 255, 255, 0.7);
 }

 /* ─── WATCH LIVE ─── */
 .watch-live {
   padding: 96px 0;
   background: linear-gradient(135deg, #0d1b3e 0%, #1a1040 50%, #0d1b3e 100%);
   position: relative;
   overflow: hidden;
 }

 .watch-live::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   pointer-events: none;
 }

 .watch-live .container { position: relative; z-index: 1; }

 .watch-live-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 40px;
   gap: 20px;
   flex-wrap: wrap;
 }

 .watch-live .section-label {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   letter-spacing: .08em;
   font-size: 12px;
   text-transform: uppercase;
   margin-bottom: 12px;
 }

 .watch-live .section-title { color: #fff; }
 .watch-live .section-title em { color: #ef4444; font-style: italic; }
 .watch-live .section-sub { color: rgba(255,255,255,0.6); }
 .watch-live .text-link { color: #ef4444 !important; white-space: nowrap; }

 .live-dot {
   display: inline-block;
   width: 10px;
   height: 10px;
   background: #ef4444;
   border-radius: 50%;
   animation: livePulse 1.6s ease-in-out infinite;
   box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
 }

 @keyframes livePulse {
   0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
   70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
   100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
 }

 .watch-live-embed { width: 100%; }

 .yt-frame-wrap {
   position: relative;
   width: 100%;
   padding-top: 56.25%; /* 16:9 */
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 24px 80px rgba(0,0,0,0.6);
   border: 2px solid rgba(239,68,68,0.3);
 }

 .yt-frame-wrap iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: none;
 }

 /* ─── EVENTS ─── */
 .events {
   padding: 96px 0;
 }

 .events-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 52px;
   gap: 20px;
   flex-wrap: wrap;
 }

 .events-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 340px));
   gap: 24px;
   justify-content: center;
 }

 .event-card {
   border: 1px solid var(--border);
   border-radius: 12px;
   overflow: hidden;
   transition: transform .25s, box-shadow .25s;
 }

 .event-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow);
 }

 .event-card-img {
   height: 180px;
   background: linear-gradient(135deg, var(--blue-ultra), var(--blue-pale));
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .event-card-img svg {
   fill: var(--blue-light);
   opacity: .3;
   width: 72px;
 }

 .event-card-badge {
   position: absolute;
   top: 14px;
   left: 14px;
   background: var(--blue);
   color: white;
   border-radius: 6px;
   padding: 6px 12px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }

 .event-card-body {
   padding: 24px;
 }

 .event-date {
   font-size: 11.5px;
   font-weight: 600;
   color: var(--blue-light);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 .event-card-body h3 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 8px;
 }

 .event-card-body p {
   font-size: 14px;
   color: var(--text-muted);
   line-height: 1.7;
 }

 .event-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 16px;
   font-size: 13px;
   font-weight: 600;
   color: var(--blue);
   text-decoration: none;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   transition: gap .2s;
 }

 .event-link:hover {
   gap: 10px;
 }

 /* ─── PHOTO GALLERY SLIDESHOW ─── */
 .gallery {
   padding: 96px 0;
   background: var(--off-white);
 }

 .gallery-head {
   text-align: center;
   margin-bottom: 52px;
 }

 .gallery-track-wrap {
   overflow: hidden;
   position: relative;
 }

 .gallery-track {
   display: flex;
   gap: 20px;
   animation: galleryScroll 28s linear infinite;
 }

 .gallery-track:hover {
   animation-play-state: paused;
 }

 .gallery-track-2 {
   animation-direction: reverse;
   animation-duration: 35s;
   margin-top: 20px;
 }

 @keyframes galleryScroll {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 .gallery-item {
   flex-shrink: 0;
   width: 280px;
   height: 190px;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
 }

 .gallery-item-inner {
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   transition: transform .4s;
 }

 .gallery-item:hover .gallery-item-inner {
   transform: scale(1.06);
 }

 /* Gallery placeholder colors */
 .g1 {
   background: linear-gradient(135deg, #1a4d8f22, #2563b033), url('') center/cover;
   background-color: #c8d8f0;
 }

 .g2 {
   background-color: #dce6f5;
 }

 .g3 {
   background-color: #b8cfe8;
 }

 .g4 {
   background-color: #e8effa;
 }

 .g5 {
   background-color: #cfdaee;
 }

 .g6 {
   background-color: #d5e2f5;
 }

 .g7 {
   background-color: #b0c4e0;
 }

 .g8 {
   background-color: #e2eaf8;
 }

 /* Gallery inner patterns */
 .gallery-item-inner {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .gallery-item-inner svg {
   fill: white;
   opacity: .18;
   width: 56px;
 }

 /* ─── SERMONS ─── */
 .sermons {
   padding: 96px 0;
 }

 .sermons-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 52px;
   gap: 20px;
   flex-wrap: wrap;
 }

 .sermon-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .sermon-card {
   display: flex;
   align-items: center;
   gap: 24px;
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 24px;
   background: white;
   transition: transform .2s, box-shadow .2s;
 }

 .sermon-card:hover {
   transform: translateX(6px);
   box-shadow: var(--shadow);
 }

 .sermon-thumb {
   width: 80px;
   height: 80px;
   flex-shrink: 0;
   border-radius: 10px;
   background: linear-gradient(135deg, var(--blue-pale), var(--blue-ultra));
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .sermon-thumb svg {
   fill: var(--blue);
   width: 32px;
 }

 .sermon-info {
   flex: 1;
   min-width: 0;
 }

 .sermon-meta {
   font-size: 11px;
   font-weight: 600;
   color: var(--blue-light);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 6px;
 }

 .sermon-info h3 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .sermon-info p {
   font-size: 13.5px;
   color: var(--text-muted);
 }

 .sermon-play {
   width: 44px;
   height: 44px;
   flex-shrink: 0;
   border-radius: 50%;
   background: var(--blue);
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform .2s, background .2s;
 }

 .sermon-play:hover {
   transform: scale(1.1);
   background: var(--blue-mid);
 }

 .sermon-play svg {
   fill: white;
   width: 16px;
   margin-left: 2px;
 }

 /* ─── GIVE ─── */
 .give {
   padding: 96px 0;
   background: var(--blue);
   position: relative;
   overflow: hidden;
 }

 .give::before {
   content: '';
   position: absolute;
   top: -120px;
   right: -120px;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.04);
   pointer-events: none;
 }

 .give::after {
   content: '';
   position: absolute;
   bottom: -80px;
   left: -80px;
   width: 280px;
   height: 280px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.04);
   pointer-events: none;
 }

 .give-inner {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 60px;
   flex-wrap: wrap;
 }

 .give-text {
   flex: 1;
   min-width: 260px;
 }

 .give-text .section-label {
   color: var(--gold);
 }

 .give-text .section-label::before {
   background: var(--gold);
 }

 .give-text .section-title {
   color: white;
 }

 .give-text .section-title em {
   color: var(--gold);
   font-style: italic;
 }

 .give-text p {
   color: rgba(255, 255, 255, 0.72);
   font-size: 15.5px;
   line-height: 1.8;
   margin-bottom: 32px;
 }

 .give-card {
   flex-shrink: 0;
   width: 320px;
   background: white;
   border-radius: 16px;
   padding: 36px 28px;
   box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
 }

 .give-card h4 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 24px;
   color: var(--text);
 }

 .give-field {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 16px;
 }

 .give-field label {
   font-size: 11.5px;
   font-weight: 600;
   color: var(--text-muted);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }

 .give-field input,
 .give-field select {
   border: 1.5px solid var(--border);
   border-radius: 8px;
   padding: 11px 14px;
   font-family: 'Jost', sans-serif;
   font-size: 14px;
   color: var(--text);
   outline: none;
   transition: border-color .2s;
   background: var(--off-white);
   width: 100%;
 }

 .give-field input:focus,
 .give-field select:focus {
   border-color: var(--blue-light);
 }

 .give-btn {
   width: 100%;
   padding: 14px;
   background: var(--blue);
   color: white;
   border: none;
   border-radius: 8px;
   font-family: 'Jost', sans-serif;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   cursor: pointer;
   transition: background .2s;
 }

 .give-btn:hover {
   background: var(--blue-mid);
 }

 /* ─── PASTOR ─── */
 .pastor {
   padding: 96px 0;
   background: var(--off-white);
 }

 .pastor-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .pastor-img-wrap {
   position: relative;
 }

 .pastor-img-box {
   width: 100%;
   aspect-ratio: 3/4;
   border-radius: 12px;
   overflow: hidden;
   background: transparent;
   display: flex;
   align-items: flex-start;
   justify-content: center;
 }

 .pastor-img-box img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center top;
   border-radius: 12px;
 }

 .pastor-img-box svg {
   fill: var(--blue);
   opacity: .18;
   width: 100px;
 }

 .pastor-badge {
   position: absolute;
   bottom: -20px;
   right: -20px;
   background: var(--blue);
   color: white;
   border-radius: 10px;
   padding: 20px 24px;
   box-shadow: 0 12px 32px rgba(26, 77, 143, 0.3);
 }

 .pastor-badge p:first-child {
   font-family: 'Cormorant Garamond', serif;
   font-size: 28px;
   font-weight: 700;
   line-height: 1;
 }

 .pastor-badge p:last-child {
   font-size: 11px;
   font-weight: 500;
   opacity: .75;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-top: 4px;
 }

 .pastor-text blockquote {
   font-family: 'Cormorant Garamond', serif;
   font-size: 22px;
   font-style: italic;
   font-weight: 300;
   color: var(--blue);
   line-height: 1.5;
   border-left: 3px solid var(--blue);
   padding-left: 20px;
   margin: 28px 0;
 }

 .pastor-text p {
   font-size: 15px;
   line-height: 1.85;
   color: var(--text-muted);
   margin-bottom: 16px;
 }

 .pastor-text p:last-of-type {
   margin-bottom: 0;
 }

 /* ─── CONTACT ─── */
 .contact {
   padding: 96px 0;
 }

 .contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: start;
 }

 .contact-info-item {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   margin-bottom: 28px;
 }

 .contact-info-icon {
   width: 44px;
   height: 44px;
   flex-shrink: 0;
   border-radius: 10px;
   background: var(--blue-ultra);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .contact-info-icon svg {
   fill: var(--blue);
   width: 20px;
 }

 .contact-info-text span:first-child {
   display: block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 4px;
 }

 .contact-info-text span:last-child {
   display: block;
   font-size: 15px;
   font-weight: 500;
   color: var(--text);
 }

 .map-placeholder {
   height: 220px;
   border-radius: 12px;
   background: linear-gradient(135deg, var(--blue-ultra), var(--blue-pale));
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   color: var(--blue-light);
   font-size: 13px;
   font-weight: 500;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   margin-top: 8px;
   border: 1px solid var(--border);
 }

 .map-placeholder svg {
   fill: var(--blue-light);
   width: 32px;
 }

 .contact-form {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
 }

 .form-field {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }

 .form-field label {
   font-size: 11.5px;
   font-weight: 600;
   color: var(--text-muted);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }

 .form-field input,
 .form-field textarea,
 .form-field select {
   border: 1.5px solid var(--border);
   border-radius: 8px;
   padding: 11px 14px;
   font-family: 'Jost', sans-serif;
   font-size: 14px;
   color: var(--text);
   outline: none;
   transition: border-color .2s;
   background: var(--off-white);
   resize: none;
   width: 100%;
 }

 .form-field input:focus,
 .form-field textarea:focus {
   border-color: var(--blue-light);
 }

 .form-field textarea {
   height: 120px;
 }

 .form-submit {
   padding: 14px 32px;
   background: var(--blue);
   color: white;
   border: none;
   border-radius: 8px;
   font-family: 'Jost', sans-serif;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   cursor: pointer;
   align-self: flex-start;
   transition: background .2s, transform .15s;
 }

 .form-submit:hover {
   background: var(--blue-mid);
   transform: translateY(-1px);
 }

 /* ─── FOOTER ─── */
 footer {
   background: #0d1b3e;
   color: rgba(255, 255, 255, 0.75);
   padding: 72px 5% 28px;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 1.8fr 1fr 1fr 1fr;
   gap: 48px;
   margin-bottom: 56px;
 }

 .footer-brand .nav-logo-text span:first-child {
   color: white;
 }

 .footer-brand p {
   font-size: 13.5px;
   line-height: 1.8;
   margin: 16px 0 24px;
   opacity: .65;
 }

 .socials {
   display: flex;
   gap: 10px;
 }

 .social-btn {
   width: 38px;
   height: 38px;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color: rgba(255, 255, 255, 0.65);
   transition: background .2s, color .2s;
   font-size: 14px;
 }

 .social-btn:hover {
   background: var(--blue);
   color: white;
   border-color: transparent;
 }

 .social-btn svg {
   fill: currentColor;
   width: 16px;
 }

 footer h4 {
   color: white;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-bottom: 20px;
 }

 footer ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 footer ul li a {
   text-decoration: none;
   color: rgba(255, 255, 255, 0.55);
   font-size: 13.5px;
   transition: color .2s;
 }

 footer ul li a:hover {
   color: white;
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.10);
   padding-top: 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   font-size: 12px;
   opacity: .45;
 }

 /* ─── UTILITIES ─── */
 .text-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   font-weight: 600;
   color: var(--blue);
   text-decoration: none;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   transition: gap .2s;
 }

 .text-link:hover {
   gap: 10px;
 }

 .text-link svg {
   fill: var(--blue);
   width: 14px;
 }

 /* ─── FADE-IN ANIMATION ─── */
 .fade-in {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .7s ease, transform .7s ease;
 }

 .fade-in.visible {
   opacity: 1;
   transform: translateY(0);
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 960px) {
   .nav-links {
     display: none;
   }

   .burger {
     display: flex;
   }

   .about-grid,
   .pastor-inner,
   .contact-grid {
     grid-template-columns: 1fr;
   }

   .about-img-wrap {
     max-width: 480px;
     margin: 0 auto;
   }

   .pastor-badge {
     right: 10px;
     bottom: -10px;
   }

   .footer-grid {
     grid-template-columns: 1fr 1fr;
   }

   .give-inner {
     flex-direction: column;
   }

   .give-card {
     width: 100%;
     max-width: 400px;
   }

   .gallery-item {
     width: 220px;
     height: 150px;
   }

   .beliefs-grid {
     grid-template-columns: 1fr;
   }

   .belief-card:nth-child(3) {
     grid-column: auto;
     max-width: 100%;
   }
 }

 @media (max-width: 600px) {
   .hero {
     min-height: 520px;
   }

   .slide-content h1 {
     font-size: 38px;
   }

   .slide-arrow {
     display: none;
   }

   .banner {
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
   }

   .banner-divider {
     width: 100%;
     height: 1px;
     margin: 0;
   }

   .footer-grid {
     grid-template-columns: 1fr;
   }

   .form-row {
     grid-template-columns: 1fr;
   }

   .about-stats {
     gap: 20px;
   }

   .sermon-card {
     flex-wrap: wrap;
   }
 }