@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Lato:wght@300;400;700&display=swap');
 *,
   *::before,
   *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   :root {
       --c1: #e05c1a;
       --c2: #1a7abf;
       --c3: #8b1fa8;
       --c4: #c0392b;
       --c5: #c9920a;
       --c6: #1a9b6c;
       --c7: #2c3e8c;
   }

   html {
       scroll-behavior: smooth;
   }

   body {
       font-family: 'DM Sans', sans-serif;
       background: #0d0d0d;
       overflow-x: hidden;
   }

   /* ═══ NAV ═══ */
   nav {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 200;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0.85rem 3rem;
       background: rgba(8, 8, 8, 0.5);
       -webkit-backdrop-filter: blur(18px);
       backdrop-filter: blur(18px);
       border-bottom: 1px solid rgba(255, 255, 255, 0.07);
       transition: background 0.4s, padding 0.3s;
   }

   nav.scrolled {
       background: rgba(8, 8, 8, 0.95);
       padding: 0.6rem 3rem;
   }

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

   .logo-badge {
       width: 54px;
       height: 54px;
       border-radius: 14px;
       flex-shrink: 0;
       background: linear-gradient(135deg, #e05c1a 0%, #8b1fa8 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 20px rgba(224, 92, 26, 0.4);
   }

   .logo-badge img {
       width: 52px;
       height: 52px;
   }

   .logo-text strong {
       display: block;
       font-size: 1.1rem;
       font-weight: 700;
       color: #fff;
       letter-spacing: 0.02em;
   }

   .logo-text span {
       display: block;
       font-size: 0.65rem;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.38);
   }

   .nav-links {
       display: flex;
       gap: 0.2rem;
       list-style: none;
   }

   .nav-links a {
       display: block;
       padding: 0.45rem 0.9rem;
       border-radius: 20px;
       font-size: 0.83rem;
       color: rgba(255, 255, 255, 0.6);
       text-decoration: none;
       transition: background 0.25s, color 0.25s;
   }

   .nav-links a:hover {
       background: rgba(255, 255, 255, 0.1);
       color: #fff;
   }

   .nav-cta {
       padding: 0.55rem 1.5rem;
       border-radius: 24px;
       background: linear-gradient(135deg, var(--c1), var(--c4));
       font-size: 0.83rem;
       font-weight: 500;
       border: none;
       color: #fff;
       text-decoration: none;
       box-shadow: 0 4px 18px rgba(224, 92, 26, 0.4);
       transition: opacity 0.3s, transform 0.3s;
   }

   .nav-cta:hover {
       opacity: 0.85;
       transform: translateY(-1px);
   }

   .hamburger {
       display: none;
       flex-direction: column;
       gap: 5px;
       cursor: pointer;
   }

   .hamburger span {
       display: block;
       width: 24px;
       height: 2px;
       background: #fff;
       border-radius: 2px;
   }

   .mobile-menu {
       position: fixed;
       inset: 0;
       z-index: 9999;

       background: rgba(8, 8, 8, 0.97);

       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 1.6rem;

       /* smooth animation */
       opacity: 0;
       visibility: hidden;
       transform: translateY(-30px);

       transition:
           opacity 0.4s ease,
           transform 0.4s ease,
           visibility 0.4s;
   }

   .mobile-menu.open {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }

   .mobile-menu a {
       /* font-family: 'Playfair Display', serif; */
       font-size: 2.2rem;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.82);
       text-decoration: none;
       transition: color 0.3s;
   }

   .mobile-menu a:hover {
       color: var(--c1);
   }

   .mob-close {
       position: absolute;
       top: 1.5rem;
       right: 1.8rem;
       font-size: 2rem;
       color: rgba(255, 255, 255, 0.4);
       background: none;
       border: none;
       z-index: 10000;
       cursor: pointer;
   }

   /* ═══ HERO ═══ */
   #hero {
       position: relative;
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }

   .hero-bg {
       position: absolute;
       inset: 0;
       background-image: url('asset/landing.jpeg');
       background-size: cover;
       background-position: center;
       filter: brightness(0.35);
       transform: scale(1.06);
       transition: transform 9s ease-out;
   }

   #hero.loaded .hero-bg {
       transform: scale(1);
   }

   .hero-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(160deg, rgba(8, 8, 8, 0.45) 0%, rgba(8, 8, 8, 0.1) 50%, rgba(8, 8, 8, 0.75) 100%);
   }

   /* coloured orbs */
   .orb {
       position: absolute;
       border-radius: 50%;
       filter: blur(90px);
       opacity: 0.3;
       pointer-events: none;
   }

   .o1 {
       width: 550px;
       height: 550px;
       background: var(--c1);
       top: -130px;
       left: -180px;
       animation: drift 13s ease-in-out infinite alternate;
   }

   .o2 {
       width: 420px;
       height: 420px;
       background: var(--c3);
       bottom: -80px;
       right: -100px;
       animation: drift 15s ease-in-out infinite alternate-reverse;
   }

   .o3 {
       width: 300px;
       height: 300px;
       background: var(--c2);
       top: 45%;
       left: 62%;
       animation: drift 11s ease-in-out infinite alternate;
   }

   @keyframes drift {
       to {
           transform: translate(35px, 28px);
       }
   }

   .hero-content {
       position: relative;
       text-align: center;
       padding: 2rem;
       max-width: 920px;
       opacity: 0;
       transform: translateY(30px);
       animation: fadeUp 1.2s 0.5s forwards;
   }

   .hero-pill {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.4rem 1.3rem;
       border-radius: 50px;
       margin-bottom: 2rem;
       font-size: 0.75rem;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.78);
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.18);
       -webkit-backdrop-filter: blur(8px);
       backdrop-filter: blur(8px);
   }

   .hero-pill::before {
       content: '✦';
       color: var(--c5);
   }

   .hero-title {
       /* font-family: 'Playfair Display', serif; */
       font-size: clamp(3.2rem, 7.5vw, 7rem);
       font-weight: 900;
       line-height: 1.0;
       color: #fff;
       text-shadow: 0 4px 50px rgba(0, 0, 0, 0.7);
   }

   .hero-title .rainbow {
       display: block;
       font-style: italic;
       font-family: 'Playfair Display', serif;
       background: linear-gradient(90deg, #e05c1a, #d4a017, #1a9b6c, #1a7abf, #8b1fa8);
       background-size: 200% auto;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       animation: shimmer 4s linear infinite;
   }

   @keyframes shimmer {
       to {
           background-position: 200% center;
       }
   }

   .hero-bar {
       width: 90px;
       height: 4px;
       margin: 2rem auto;
       border-radius: 2px;
       opacity: 0;
       background: linear-gradient(90deg, var(--c1), var(--c3));
       animation: fadeIn 1s 1.4s forwards;
   }

   .hero-sub {
       font-size: 1.2rem;
       line-height: 1.85;
       font-weight: 300;
       color: rgba(255, 255, 255, 0.78);
       max-width: 520px;
       margin: 0 auto 2.5rem;
   }

   .hero-btn {
       display: inline-block;
       padding: 1rem 2.8rem;
       border-radius: 50px;
       background: linear-gradient(135deg, var(--c1), var(--c4));
       font-size: 0.92rem;
       font-weight: 500;
       letter-spacing: 0.06em;
       color: #fff;
       text-decoration: none;
       box-shadow: 0 8px 32px rgba(224, 92, 26, 0.45);
       transition: transform 0.3s, box-shadow 0.3s;
   }

   .hero-btn:hover {
       transform: translateY(-3px);
       box-shadow: 0 14px 40px rgba(224, 92, 26, 0.6);
   }

   .scroll-cue {
       position: absolute;
       bottom: 2.5rem;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
       color: rgba(255, 255, 255, 0.38);
       font-size: 0.68rem;
       letter-spacing: 0.22em;
       text-transform: uppercase;
       animation: bob 2.5s ease-in-out infinite;
   }

   .scroll-cue svg {
       width: 16px;
   }

   @keyframes bob {

       0%,
       100% {
           transform: translateX(-50%) translateY(0)
       }

       50% {
           transform: translateX(-50%) translateY(9px)
       }
   }

   /* ═══ SECTION GRID ═══ */
   .sec {
       display: grid;
       grid-template-columns: 1fr 1fr;
       min-height: 600px;
       overflow: hidden;
   }

   .sec.flip {
       direction: rtl;
   }

   .sec.flip>* {
       direction: ltr;
   }

   .sec-img {
       position: relative;
       overflow: hidden;
       min-height: 480px;
   }

   .sec-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transform: scale(1.07);
       transition: transform 0.85s cubic-bezier(.25, .46, .45, .94);
   }

   .sec:hover .sec-img img {
       transform: scale(1);
   }

   /* colour tint overlay per section */
   .sec-img::after {
       content: '';
       position: absolute;
       inset: 0;
       mix-blend-mode: multiply;
       opacity: 0.35;
   }

   /* colour top bar */
   .sec-img::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 5px;
       z-index: 2;
   }

   /* section tints */
   .s-hope .sec-img::after {
       background: var(--c1);
   }

   .s-family .sec-img::after {
       background: var(--c2);
   }

   .s-prayer .sec-img::after {
       background: var(--c3);
   }

   .s-grace .sec-img::after {
       background: var(--c4);
   }

   .s-fire .sec-img::after {
       background: var(--c5);
   }

   .s-stories .sec-img::after {
       background: var(--c6);
   }

   .s-hope .sec-img::before {
       background: var(--c1);
   }

   .s-family .sec-img::before {
       background: var(--c2);
   }

   .s-prayer .sec-img::before {
       background: var(--c3);
   }

   .s-grace .sec-img::before {
       background: var(--c4);
   }

   .s-fire .sec-img::before {
       background: var(--c5);
   }

   .s-stories .sec-img::before {
       background: var(--c6);
   }

   /* ── Text panels ── */
   .sec-body {
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding: 5rem 4.5rem;
       position: relative;
       overflow: hidden;
   }

   /* giant watermark number */
   .sec-body::after {
       content: attr(data-n);
       position: absolute;
       bottom: -0.15em;
       right: 0.15em;
       font-family: 'Playfair Display', serif;
       font-size: 11rem;
       font-weight: 900;
       line-height: 1;
       opacity: 0.06;
       pointer-events: none;
       color: inherit;
   }

   /* unique panel backgrounds */
   .s-hope .sec-body {
       background: #fff8f3;
   }

   .s-family .sec-body {
       background: #f0f7ff;
   }

   .s-prayer .sec-body {
       background: #faf4ff;
   }

   .s-grace .sec-body {
       background: #fff3f2;
   }

   .s-fire .sec-body {
       background: #fffbee;
   }

   .s-stories .sec-body {
       background: #f0fff8;
   }

   /* left accent bar */
   .s-hope .sec-body {
       border-left: 7px solid var(--c1);
   }

   .s-family .sec-body {
       border-left: 7px solid var(--c2);
   }

   .s-prayer .sec-body {
       border-left: 7px solid var(--c3);
   }

   .s-grace .sec-body {
       border-left: 7px solid var(--c4);
   }

   .s-fire .sec-body {
       border-left: 7px solid var(--c5);
   }

   .s-stories .sec-body {
       border-left: 7px solid var(--c6);
   }

   /* flip: bar on right */
   .flip .s-hope .sec-body {
       border-left: none;
       border-right: 7px solid var(--c1);
   }

   .flip .s-family .sec-body {
       border-left: none;
       border-right: 7px solid var(--c2);
   }

   .flip .s-prayer .sec-body {
       border-left: none;
       border-right: 7px solid var(--c3);
   }

   .flip .s-grace .sec-body {
       border-left: none;
       border-right: 7px solid var(--c4);
   }

   .flip .s-fire .sec-body {
       border-left: none;
       border-right: 7px solid var(--c5);
   }

   .flip .s-stories .sec-body {
       border-left: none;
       border-right: 7px solid var(--c6);
   }

   .sec-tag {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       padding: 0.3rem 0.9rem;
       border-radius: 50px;
       width: fit-content;
       font-size: 0.7rem;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       font-weight: 600;
       color: #fff;
       margin-bottom: 1.1rem;
   }

   .s-hope .sec-tag {
       background: var(--c1);
   }

   .s-family .sec-tag {
       background: var(--c2);
   }

   .s-prayer .sec-tag {
       background: var(--c3);
   }

   .s-grace .sec-tag {
       background: var(--c4);
   }

   .s-fire .sec-tag {
       background: var(--c5);
       color: #1a1200;
   }

   .s-stories .sec-tag {
       background: var(--c6);
   }

   .sec-heading {
       font-family: 'Playfair Display', serif;
       font-size: clamp(2rem, 3.2vw, 3rem);
       font-weight: 700;
       line-height: 1.1;
       color: #1a1a1a;
       margin-bottom: 1.1rem;
   }

   .sec-heading em {
       display: block;
       font-style: normal;
       font-weight: 900;
       font-size: 1.25em;
   }

   .s-hope .sec-heading em {
       color: var(--c1);
   }

   .s-family .sec-heading em {
       color: var(--c2);
   }

   .s-prayer .sec-heading em {
       color: var(--c3);
   }

   .s-grace .sec-heading em {
       color: var(--c4);
   }

   .s-fire .sec-heading em {
       color: var(--c5);
   }

   .s-stories .sec-heading em {
       color: var(--c6);
   }

   .sec-desc {
       font-size: 1.05rem;
       line-height: 1.95;
       font-weight: 300;
       color: #444;
       max-width: 420px;
       margin-bottom: 1.8rem;
   }

   .sec-verse {
       padding: 1rem 1.2rem;
       border-radius: 8px;
       font-size: 0.92rem;
       line-height: 1.7;
       font-style: italic;
       color: #555;
   }

   .sec-verse cite {
       display: block;
       margin-top: 0.4rem;
       font-style: normal;
       font-weight: 600;
       font-size: 0.82rem;
       opacity: 0.7;
   }

   .s-hope .sec-verse {
       background: rgba(224, 92, 26, 0.07);
       border-left: 3px solid var(--c1);
   }

   .s-family .sec-verse {
       background: rgba(26, 122, 191, 0.07);
       border-left: 3px solid var(--c2);
   }

   .s-prayer .sec-verse {
       background: rgba(139, 31, 168, 0.07);
       border-left: 3px solid var(--c3);
   }

   .s-grace .sec-verse {
       background: rgba(192, 57, 43, 0.07);
       border-left: 3px solid var(--c4);
   }

   .s-fire .sec-verse {
       background: rgba(201, 146, 10, 0.09);
       border-left: 3px solid var(--c5);
   }

   .s-stories .sec-verse {
       background: rgba(26, 155, 108, 0.07);
       border-left: 3px solid var(--c6);
   }

   /* ═══ WORSHIP FINALE ═══ */
   #worship {
       position: relative;
       min-height: 80vh;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
       text-align: center;
   }

   .w-bg {
       position: absolute;
       inset: 0;
       background-image: url('asset/worship.jpeg');
       background-size: cover;
       background-position: center;
       filter: brightness(0.22) saturate(0.6);
   }

   .w-grad {
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg,
               rgba(44, 62, 140, 0.8),
               rgba(139, 31, 168, 0.55),
               rgba(224, 92, 26, 0.55));
   }

   .w-stripe {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 6px;
       background: linear-gradient(90deg, var(--c1), var(--c5), var(--c6), var(--c2), var(--c3), var(--c4), var(--c1));
       background-size: 200% 100%;
       animation: slide 4s linear infinite;
   }

   @keyframes slide {
       to {
           background-position: -200% 0;
       }
   }

   .w-content {
       position: relative;
       max-width: 820px;
       padding: 2rem;
   }

   .w-pill {
       display: inline-block;
       padding: 0.35rem 1.1rem;
       border-radius: 50px;
       font-size: 0.74rem;
       letter-spacing: 0.22em;
       text-transform: uppercase;
       background: rgba(255, 255, 255, 0.1);
       color: rgba(255, 255, 255, 0.78);
       border: 1px solid rgba(255, 255, 255, 0.2);
       margin-bottom: 1.8rem;
   }

   .w-title {
       font-family: 'Playfair Display', serif;
       font-size: clamp(2.8rem, 6vw, 5.5rem);
       font-weight: 900;
       line-height: 1.05;
       color: #fff;
   }

   .w-title em {
       font-style: italic;
       background: linear-gradient(90deg, var(--c5), var(--c1), var(--c3));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .w-desc {
       font-size: 1.15rem;
       line-height: 1.85;
       font-weight: 300;
       color: rgba(255, 255, 255, 0.76);
       max-width: 500px;
       margin: 1.8rem auto;
   }

   .w-btns {
       /* display: flex; */
       gap: 1rem;
       justify-content: center;
       /* flex-wrap: wrap; */
   }

   .w-btn {
       display: inline-block;
       padding: 1rem 2.5rem;
       border-radius: 50px;
       font-size: 0.9rem;
       font-weight: 500;
       letter-spacing: 0.06em;
       text-decoration: none;
       transition: transform 0.3s, box-shadow 0.3s;
   }

   .w-btn.pri {
       background: linear-gradient(135deg, var(--c1), var(--c3));
       color: #fff;
       box-shadow: 0 8px 28px rgba(224, 92, 26, 0.4);
       border: none;

       animation: heartbeat 1.2s infinite;
       transform-origin: center;
       transition: all 0.3s ease;
       will-change: transform;
   }

   @keyframes heartbeat {
       0% {
           transform: scale(1);
       }

       14% {
           transform: scale(1.08);
       }

       28% {
           transform: scale(1);
       }

       42% {
           transform: scale(1.08);
       }

       70% {
           transform: scale(1);
       }
   }

   .w-btn.sec {
       border: 2px solid rgba(255, 255, 255, 0.35);
       color: rgba(255, 255, 255, 0.85);
   }

   .w-btn:hover {
       transform: translateY(-3px);
   }

   @keyframes gradientShift {

       0%,
       100% {
           background-position: 0% 50%;
       }

       50% {
           background-position: 100% 50%;
       }
   }

   .overlay {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.45);
       z-index: 100;
       align-items: center;
       justify-content: center;
   }

   .overlay.open {
       display: flex;
       animation: fadeIn 0.22s ease;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   .popup {
       background: var(--color-background-primary, #fff);
       border-radius: 24px;
       padding: 2rem 2rem 1.6rem;
       width: 340px;
       max-width: 90vw;
       position: relative;
       animation: popUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
       box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
   }

   @keyframes popUp {
       from {
           opacity: 0;
           transform: scale(0.82) translateY(20px);
       }

       to {
           opacity: 1;
           transform: scale(1) translateY(0);
       }
   }

   .popup-header {
       text-align: center;
       margin-bottom: 1.5rem;
   }

   .popup-header h2 {
       font-family: 'Syne', sans-serif;
       font-size: 22px;
       font-weight: 700;
       margin: 0 0 4px;
       color: var(--color-text-primary, #111);
       letter-spacing: -0.01em;
   }

   .popup-header p {
       font-size: 13px;
       color: var(--color-text-secondary, #666);
       margin: 0;
   }

   .close-btn {
       position: absolute;
       top: 14px;
       right: 16px;
       background: var(--color-background-secondary, #f5f5f5);
       border: none;
       border-radius: 50%;
       width: 32px;
       height: 32px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--color-text-secondary, #555);
       font-size: 18px;
       transition: background 0.15s, transform 0.15s;
   }

   .close-btn:hover {
       background: var(--color-background-tertiary, #ebebeb);
       transform: rotate(90deg);
   }

   .socials {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .social-link {
       display: flex;
       align-items: center;
       gap: 14px;
       padding: 13px 16px;
       border-radius: 14px;
       border: 1.5px solid transparent;
       text-decoration: none;
       cursor: pointer;
       transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s, background 0.16s;
       animation: slideIn 0.3s ease both;
   }

   .social-link:hover {
       transform: translateX(4px) scale(1.01);
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   }

   .social-link:nth-child(1) {
       background: #1877F215;
       border-color: #1877F230;
       animation-delay: 0.05s;
   }

   .social-link:nth-child(2) {
       background: #25D36615;
       border-color: #25D36630;
       animation-delay: 0.10s;
   }

   .social-link:nth-child(3) {
       background: #E1306C15;
       border-color: #E1306C30;
       animation-delay: 0.15s;
   }

   .social-link:nth-child(4) {
       background: #00000010;
       border-color: #00000020;
       animation-delay: 0.20s;
   }

   .social-link:nth-child(5) {
       background: #FF000015;
       border-color: #FF000030;
       animation-delay: 0.25s;
   }

   .social-link:nth-child(1):hover {
       background: #1877F225;
   }

   .social-link:nth-child(2):hover {
       background: #25D36625;
   }

   .social-link:nth-child(3):hover {
       background: #E1306C25;
   }

   .social-link:nth-child(4):hover {
       background: #00000018;
   }

   .social-link:nth-child(5):hover {
       background: #FF000025;
   }

   @keyframes slideIn {
       from {
           opacity: 0;
           transform: translateX(-12px);
       }

       to {
           opacity: 1;
           transform: translateX(0);
       }
   }

   .icon-wrap {
       width: 40px;
       height: 40px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }

   .social-link:nth-child(1) .icon-wrap {
       background: #1877F2;
   }

   .social-link:nth-child(2) .icon-wrap {
       background: #25D366;
   }

   .social-link:nth-child(3) .icon-wrap {
       background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
   }

   .social-link:nth-child(4) .icon-wrap {
       background: #111;
   }

   .social-link:nth-child(5) .icon-wrap {
       background: #FF0000;
   }

   .icon-wrap svg {
       width: 22px;
       height: 22px;
       fill: #fff;
   }

   .social-info {
       flex: 1;
   }

   .social-name {
       font-family: 'DM Sans', sans-serif;
       font-weight: 500;
       font-size: 15px;
       color: var(--color-text-primary, #111);
       display: block;
   }

   .social-handle {
       font-size: 12px;
       color: var(--color-text-secondary, #888);
   }

   .arrow {
       font-size: 18px;
       color: var(--color-text-secondary, #aaa);
       opacity: 0.5;
   }

   /* ===SERVICE BANNER===  */
   .section-wrap {
       padding: 2.5rem 1.5rem;
       font-family: 'Lato', sans-serif;
       position: relative;
       overflow: hidden;
   }

   .section-wrap::before {
       content: '';
       position: absolute;
       inset: 0;
       background: repeating-linear-gradient(135deg,
               transparent,
               transparent 40px,
               rgba(255, 255, 255, 0.018) 40px,
               rgba(83, 78, 78, 0.018) 41px);
       pointer-events: none;
   }

   .section-header {
       text-align: center;
       margin-bottom: 2.5rem;
       position: relative;
   }

   .section-header .eyebrow {
       font-size: 11px;
       letter-spacing: 0.22em;
       text-transform: uppercase;
       color: var(--c5);
       font-weight: 700;
       margin-bottom: 0.5rem;
   }

   .section-header h2 {
       font-family: 'Cinzel', serif;
       font-size: 26px;
       font-weight: 900;
       color: #fff;
       letter-spacing: 0.04em;
       line-height: 1.2;
   }

   .divider {
       display: flex;
       align-items: center;
       gap: 10px;
       justify-content: center;
       margin-top: 0.75rem;
   }

   .divider-line {
       width: 50px;
       height: 2px;
       background: var(--c7);
       border-radius: 2px;
   }

   .divider-diamond {
       width: 8px;
       height: 8px;
       background: var(--c1);
       transform: rotate(45deg);
       border-radius: 1px;
   }

   .day-block {
       margin-bottom: 2rem;
   }

   .day-label {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 1rem;
   }

   .day-label .day-badge {
       font-family: 'Cinzel', serif;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       padding: 4px 14px;
       border-radius: 2px;
       color: #fff;
   }

   .day-label .day-line {
       flex: 1;
       height: 1px;
       opacity: 0.25;
   }

   .services-row {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
       gap: 12px;
   }

   .service-card {
       border-radius: 6px;
       padding: 1.1rem 1.25rem;
       position: relative;
       overflow: hidden;
       border-left: 4px solid;
       background: var(--color-background-secondary);
       border-top: 0.5px solid var(--color-border-tertiary);
       border-right: 0.5px solid var(--color-border-tertiary);
       border-bottom: 0.5px solid var(--color-border-tertiary);
       transition: transform 0.18s ease;
   }

   .service-card:hover {
       transform: translateY(-2px);
   }

   .service-card .accent-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       display: inline-block;
       margin-right: 6px;
       vertical-align: 1px;
   }

   .service-card .service-tag {
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       margin-bottom: 0.4rem;
       color: #b9b5b5;
   }

   .service-card .service-name {
       font-family: 'Cinzel', serif;
       font-size: 15px;
       font-weight: 700;
       margin-bottom: 0.5rem;
       color: #fff;
   }

   .service-card .service-time {
       font-size: 22px;
       font-weight: 700;
       letter-spacing: -0.01em;
       line-height: 1;
       margin-bottom: 0.25rem;
   }

   .service-card .service-note {
       font-size: 12px;
       color: #999;
       margin-top: 0.45rem;
       line-height: 1.5;
   }

   .service-banner {
       margin-top: 2rem;
       text-align: center;
       padding: 1rem;
       border-radius: 6px;
       /* background: #b4a0a0; */
       /* opacity: 0.5; */
       border: 1px solid #ffffff18;
   }

   .service-banner p {
       font-size: 13px;
       color: #ffffff;
       letter-spacing: 0.02em;
   }

   .service-banner strong {
       color: var(--c1);
   }

   /* ═══ FOOTER ═══ */
   footer {
       background: #060606;
       padding: 4.5rem 3rem 2.5rem;
       border-top: 1px solid rgba(255, 255, 255, 0.05);
   }

   .ft {
       max-width: 900px;
       margin: 0 auto;
       text-align: center;
   }

   .ft-logo {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.75rem;
       margin-bottom: 0.8rem;
   }

   .ft-badge {
       width: 46px;
       height: 46px;
       border-radius: 12px;
       flex-shrink: 0;
       background: linear-gradient(135deg, var(--c1), var(--c3));
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .ft-badge img {
       width: 52px;
   }

   .ft-name {
       font-size: 1.5rem;
       font-weight: 700;
       color: #fff;
   }

   .ft-sub {
       font-size: 0.72rem;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.28);
       /* margin-bottom: 2rem; */
   }



   .ft-dots {
       display: flex;
       justify-content: center;
       gap: 8px;
       margin-top: 2rem;
       margin-bottom: 1rem;
   }

   .ft-dot {
       width: 9px;
       height: 9px;
       border-radius: 50%;
   }

   .ft-links {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 0.5rem 1.5rem;
       list-style: none;
       margin-bottom: 1rem;
   }

   .ft-links a {
       font-size: 0.8rem;
       color: rgba(255, 255, 255, 0.32);
       text-decoration: none;
       transition: color 0.3s;
   }

   .ft-links a:hover {
       color: rgba(255, 255, 255, 0.78);
   }

   .ft-location {
       font-size: 0.82rem;
       color: rgba(255, 255, 255, 0.38);
       margin-bottom: 0.8rem;
   }

   .ft-location a {
       color: rgba(255, 255, 255, 0.38);
       text-decoration: none;
       transition: color 0.3s
   }

   .ft-copy {
       font-size: 0.75rem;
       color: rgba(255, 255, 255, 0.16);
   }

   /* ═══ ANIMATIONS ═══ */
   @keyframes fadeUp {
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeIn {
       to {
           opacity: 1;
       }
   }

   .reveal {
       opacity: 0;
       transform: translateY(40px);
       transition: opacity .85s ease, transform .85s ease;
   }

   .reveal-left {
       opacity: 0;
       transform: translateX(-55px);
       transition: opacity .85s .1s ease, transform .85s .1s ease;
   }

   .reveal-right {
       opacity: 0;
       transform: translateX(55px);
       transition: opacity .85s .1s ease, transform .85s .1s ease;
   }

   .reveal.vis,
   .reveal-left.vis,
   .reveal-right.vis {
       opacity: 1;
       transform: none;
   }

   /* ═══ RESPONSIVE ═══ */
   @media (max-width:900px) {
       nav {
           padding: 0.8rem 1.4rem;
       }

       .nav-links,
       .nav-cta {
           display: none;
       }

       .hamburger {
           display: flex;
       }

       .sec {
           grid-template-columns: 1fr;
           direction: ltr !important;
       }

       .sec-img {
           min-height: 280px;
       }

       .sec-body {
           padding: 3rem 2rem;
       }

       .sec-desc {
           max-width: 100%;
       }

       .s-hope .sec-body,
       .s-family .sec-body,
       .s-prayer .sec-body,
       .s-grace .sec-body,
       .s-fire .sec-body,
       .s-stories .sec-body {
           border-left: none !important;
           border-right: none !important;
           border-top: 7px solid;
       }

       .s-hope .sec-body {
           border-top-color: var(--c1);
       }

       .s-family .sec-body {
           border-top-color: var(--c2);
       }

       .s-prayer .sec-body {
           border-top-color: var(--c3);
       }

       .s-grace .sec-body {
           border-top-color: var(--c4);
       }

       .s-fire .sec-body {
           border-top-color: var(--c5);
       }

       .s-stories .sec-body {
           border-top-color: var(--c6);
       }
   }

   @media (max-width:480px) {
       .sec-body {
           padding: 2.5rem 1.5rem;
       }

       .hero-sub {
           font-size: 1.05rem;
       }
   }