:root{
    --sanctum:#20080d;
    --wine:#3d1220;
    --wine-light:#5a1c2c;
    --kumkum:#c63c2f;
    --gold:#d6a94a;
    --gold-bright:#f0ce7c;
    --ivory:#f6ecd9;
    --ivory-dim:#e5d6b8;
    --shadow: 0 20px 50px rgba(0,0,0,.45);
  }

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

  html{scroll-behavior:smooth; scroll-padding-top:126px; width:100%; overflow-x:hidden;}

  body{
    width:100%;
    min-width:320px;
    background:var(--sanctum);
    color:var(--ivory);
    font-family:'Poppins',sans-serif;
    font-weight:300;
    overflow-x:hidden;
  }

  ::selection{background:var(--kumkum); color:var(--ivory);}

  h1,h2,h3,.display{
    font-family:'Cinzel',serif;
    letter-spacing:.03em;
    color:var(--gold-bright);
    font-weight:600;
  }

  .deva{ font-family:'Noto Serif Devanagari', serif; }

  .eyebrow{
    font-family:'Poppins',sans-serif;
    text-transform:uppercase;
    letter-spacing:.32em;
    font-size:.68rem;
    color:var(--gold);
    font-weight:500;
  }

  a{color:inherit; text-decoration:none;}

  img{display:block; max-width:100%;}

  .wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 70px);
    width:100%;
  }

  /* ---------- background texture ---------- */
  body{
    background-image:
      radial-gradient(circle at 15% 8%, rgba(214,169,74,.08), transparent 40%),
      radial-gradient(circle at 90% 30%, rgba(198,60,47,.10), transparent 45%),
      radial-gradient(circle at 50% 90%, rgba(214,169,74,.06), transparent 40%);
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:var(--sanctum);
    background:linear-gradient(to bottom, rgba(32,8,13,.98), rgba(32,8,13,.96));
    border-bottom:1px solid rgba(214,169,74,.25);
  }
  /* the blur lives on a pseudo-element rather than header.nav itself.
     filter/backdrop-filter on an ancestor turns it into the containing block
     for any position:fixed descendant — which was crushing the full-screen
     mobile menu into the header's own small height and stacking the links
     on top of each other. Keeping it off header.nav avoids that. */
  header.nav::before{
    content:"";
    position:absolute; inset:0;
    z-index:-1;
    pointer-events:none;
  }
  @supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
    header.nav::before{
      background:linear-gradient(to bottom, rgba(32,8,13,.9), rgba(32,8,13,.75));
      -webkit-backdrop-filter:blur(6px);
      backdrop-filter:blur(6px);
    }
  }
  .nav-inner{
    max-width:1180px; margin:0 auto; padding:16px 6vw;
    display:flex; align-items:center; justify-content:space-between;
    gap:18px; /* guaranteed minimum spacing so links and the CTA never touch,
                 even when there isn't enough leftover room for space-between
                 to create a gap on its own */
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    min-width:0; /* allow the brand text to truncate instead of pushing siblings */
  }
  .brand-mark{width:24px; height:24px; flex:none;}
  .brand-text{
    font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.05em; color:var(--ivory);
    line-height:1.15;
  }
  .brand-text small{
    display:block; font-family:'Poppins',sans-serif; font-size:.52rem; letter-spacing:.16em;
    color:var(--gold); text-transform:uppercase; font-weight:400; margin-top:2px;
  }
  nav.links{display:flex; gap:36px; flex-shrink:1;}
  nav.links a{
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-dim);
    transition:color .25s ease; position:relative;
    white-space:nowrap;
  }
  nav.links a:hover{color:var(--gold-bright);}
  .nav-cta{
    border:1px solid var(--gold); color:var(--gold-bright); padding:9px 20px;
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; border-radius:2px;
    transition:all .25s ease;
    flex-shrink:0; white-space:nowrap; /* never let the button itself get squeezed/clipped */
  }
  .nav-cta:hover{background:var(--gold); color:var(--sanctum);}
  .nav-toggle{display:none; background:none; border:none; color:var(--gold-bright); font-size:1.6rem; cursor:pointer; z-index:110; padding:4px 6px; flex-shrink:0;}
  .nav-toggle .bar{display:block; width:26px; height:2px; background:var(--gold-bright); margin:6px 0; transition:transform .25s ease, opacity .25s ease;}
  header.nav.open .nav-toggle .bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
  header.nav.open .nav-toggle .bar:nth-child(2){opacity:0;}
  header.nav.open .nav-toggle .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  /* ---------- MARQUEE BOOKING BAR ---------- */
  .marquee-bar{
    position:relative;
    background:var(--kumkum);
    overflow:hidden;
    white-space:nowrap;
    border-top:1px solid rgba(214,169,74,.35);
    display:flex;
    align-items:center;
  }
  .marquee-cta{
     display:flex;
    align-items:center;
    justify-content:center;

    align-self:stretch;    /* Fill the full height */

    padding:0 18px;        /* Only horizontal padding */
    background:var(--sanctum);
    color:var(--gold-bright);

    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:.68rem;
    letter-spacing:.14em;

    border-right:1px solid rgba(214,169,74,.4);
    box-shadow:2px 0 10px rgba(0,0,0,.35);

    white-space:nowrap;
    z-index:3;
  }
  .marquee-cta:hover{
    background:var(--gold-bright);
    color:var(--sanctum);
  }
  .marquee-track{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:8px 0 8px 14px;
    width:max-content;
    animation:marqueeScroll 18s linear infinite;
  }
  .marquee-track a{
    font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ivory); font-family:'Poppins',sans-serif; font-weight:700;
    transition:color .2s ease;
  }
  .marquee-track a:hover{color:var(--gold-bright);}
  .marquee-track .mq-dot{color:rgba(246,236,217,.55); font-size:.6rem;}
  @keyframes marqueeScroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-33.333%); }
  }
  .marquee-bar:hover .marquee-track{animation-play-state:paused;}
  @media (prefers-reduced-motion: reduce){
    .marquee-track{animation:none;}
  }

  nav.links.mobile-open,
  #navLinks.mobile-open{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:var(--sanctum);
    padding-top:150px;
    z-index:105;
    overflow-y:auto;
  }
  nav.links.mobile-open a,
  #navLinks.mobile-open a{
    display:block;
    padding:18px 24px;
    font-size:1rem;
    width:100%;
    text-align:center;
    line-height:1.4;
    white-space:normal;
    border-bottom:1px solid rgba(214,169,74,.15);
  }


  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:176px 0 80px;
    overflow:hidden;
    background-image:url('./temple-hero-bg.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(180deg, rgba(20,10,8,.72) 0%, rgba(20,10,8,.82) 55%, rgba(20,10,8,.92) 100%);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:50px;
    align-items:center;
    width:100%;
    position:relative;
    z-index:2;
  }
  .hero-eyebrow{margin-bottom:22px;}
  .hero h1{
    font-size:clamp(2.4rem, 4.6vw, 4.1rem);
    line-height:1.08;
    margin-bottom:20px;
  }
  .hero h1 span.deva-line{
    display:block; font-family:'Noto Serif Devanagari',serif; color:var(--kumkum);
    font-size:.42em; letter-spacing:.03em; margin-bottom:10px; font-weight:600; 
  }
  .hero p.lede{
    font-size:1.05rem; line-height:1.85; color:var(--ivory-dim); max-width:520px; margin-bottom:34px;
    font-weight:300;
  }
  .hero-actions{display:flex; gap:18px; flex-wrap:wrap; position:relative; z-index:3;}
  .btn-primary, .btn-ghost{
    padding:15px 30px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
    border-radius:2px; transition:all .3s ease; display:inline-block;
  }
  .btn-primary{background:var(--kumkum); color:var(--ivory); box-shadow:0 10px 26px rgba(198,60,47,.35);}
  .btn-primary:hover{background:#a92e23; transform:translateY(-2px);}
  .btn-ghost{border:1px solid var(--gold); color:var(--gold-bright);}
  .btn-ghost:hover{background:rgba(214,169,74,.12); transform:translateY(-2px);}

  .hero-portrait{ order:-1; }
  .hero-portrait{
    position:relative;
    display:flex; justify-content:center;
  }
  .arch-frame{
    position:relative;
    width:100%;
    max-width:420px;
    aspect-ratio:3/4.5;
    padding:18px;
  }
  .arch-frame svg.arch-svg{
    position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;
  }
  .arch-frame .portrait-clip{
    position:absolute; inset:18px;
    overflow:hidden;
    border-radius:200px 200px 8px 8px;
    box-shadow:inset 0 0 0 2px rgba(214,169,74,.5);
  }
  .arch-frame img{
    width:100%; height:100%; object-fit:cover; object-position:top center;
    filter:saturate(1.05) contrast(1.03);
  }
  .arch-frame .hero-slide{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:top center;
    filter:saturate(1.05) contrast(1.03);
    opacity:0;
    transition:opacity 1.4s ease;
  }
  .arch-frame .hero-slide.is-active{
    opacity:1;
    z-index:2;
  }
  /* real marigold garland draped across the top of the portrait arch,
     swaying gently instead of falling emoji petals */
  .garland{
    position:absolute; top:-6px; left:0; width:100%; height:auto; z-index:4;
    transform-origin:top center;
    animation:garlandSway 5s ease-in-out infinite;
  }
  @keyframes garlandSway{
    0%,100%{ transform:rotate(-0.6deg); }
    50%{ transform:rotate(0.6deg); }
  }
  .hero-glow{
    position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(214,169,74,.18), transparent 65%);
    top:50%; left:50%; transform:translate(-50%,-50%); z-index:0;
  }

  /* floating diya lights */
  .flicker{position:absolute; border-radius:50%; background:var(--gold-bright); filter:blur(1px); opacity:.7; animation:flicker 3s ease-in-out infinite;}
  @keyframes flicker{ 0%,100%{opacity:.35; transform:scale(.85);} 50%{opacity:.9; transform:scale(1.1);} }

  /* ---------- SECTION DIVIDER (kalash arch) ---------- */
  .divider{
    display:flex; justify-content:center; padding:64px 0 40px;
  }
  .divider svg{width:120px; height:60px;}

  /* ---------- HERITAGE ---------- */
  .heritage{
    background:linear-gradient(180deg, var(--sanctum), var(--wine) 12%, var(--wine) 88%, var(--sanctum));
    padding:20px 0 100px;
    position:relative;
  }
  .heritage-inner{max-width:900px; margin:0 auto; text-align:center;}
  .heritage .eyebrow{display:block; text-align:center; margin-bottom:18px;}
  .quote{
    font-family:'Cinzel',serif;
    font-size:clamp(1.35rem, 2.6vw, 2rem);
    line-height:1.5;
    color:var(--ivory);
    font-weight:500;
    margin-bottom:36px;
  }
  .quote span{color:var(--gold-bright);}
  .heritage-body{
    text-align:left;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:44px;
    margin-top:52px;
  }
  .heritage-body p{
    font-size:.98rem; line-height:1.95; color:var(--ivory-dim); font-weight:300;
  }
  .lineages{
    display:flex; gap:14px; justify-content:center; margin-top:44px; flex-wrap:wrap;
  }
  .lineage-pill{
    border:1px solid rgba(214,169,74,.4); padding:10px 22px; border-radius:30px;
    font-family:'Cinzel',serif; font-size:.82rem; letter-spacing:.05em; color:var(--gold-bright);
  }

  /* ---------- GALLERY (Swiper coverflow, temple theme) ---------- */
  .gallery{
    padding:100px 0 120px;
    background:linear-gradient(180deg, var(--sanctum), var(--wine-light) 40%, var(--wine) 60%, var(--sanctum));
    position:relative;
    overflow:hidden;
  }
  .gallery-head{text-align:center; margin-bottom:20px;}
  .gallery-head h2{font-size:clamp(1.7rem,3vw,2.4rem); margin-top:10px;}

  .gallerySwiper{
    width:100%;
    padding:40px 0 74px;
  }
  .gallerySwiper .swiper-slide{
    width:320px;
    height:280px;
    border-radius:8px;
    overflow:hidden;
    position:relative;
    background:var(--wine);
    box-shadow:var(--shadow);
    border:1px solid rgba(214,169,74,.35);
    transition:filter .5s ease;
  }
  .gallerySwiper .swiper-slide img{
    width:100%; height:100%; object-fit:cover;
    filter:saturate(1.05) contrast(1.02);
  }
  .gallerySwiper .swiper-slide:not(.swiper-slide-active){
    filter:brightness(.55) saturate(.85);
  }
  .gallerySwiper .gcap{
    position:absolute; left:0; right:0; bottom:0; padding:22px 24px;
    background:linear-gradient(to top, rgba(15,4,7,.94), transparent);
  }
  .gallerySwiper .gcap .deva{color:var(--kumkum); font-size:1rem; display:block; margin-bottom:4px;}
  .gallerySwiper .gcap p{font-size:.82rem; color:var(--ivory-dim); letter-spacing:.03em; line-height:1.5;}

  .gallerySwiper .swiper-button-next,
  .gallerySwiper .swiper-button-prev{
    color:var(--sanctum);
    background:var(--gold-bright);
    width:46px; height:46px;
    border-radius:50%;
    box-shadow:0 8px 22px rgba(0,0,0,.35);
  }
  .gallerySwiper .swiper-button-next:after,
  .gallerySwiper .swiper-button-prev:after{
    font-size:18px; font-weight:700;
  }
  .gallerySwiper .swiper-button-next:hover,
  .gallerySwiper .swiper-button-prev:hover{
    background:var(--kumkum); color:var(--ivory);
  }
  .gallerySwiper .swiper-pagination-bullet{
    background:var(--gold);
    opacity:.45;
  }
  .gallerySwiper .swiper-pagination-bullet-active{
    background:var(--gold-bright);
    opacity:1;
  }

  .gallery-note{
    text-align:center; margin-top:6px;
  }
  .gallery-note a{
    color:var(--gold-bright); font-family:'Cinzel',serif; font-size:.9rem;
    border-bottom:1px solid rgba(214,169,74,.4); padding-bottom:2px;
  }
  .gallery-note a:hover{color:var(--kumkum); border-color:var(--kumkum);}

  /* ---------- VIDEO ---------- */
  .video-section{
    padding:20px 0 110px;
    background:var(--sanctum);
    position:relative;
  }
  .video-swiper-shell{
    position:relative;
    max-width:1100px;
    margin:0 auto;
  }
  .videoSwiper{
    width:100%;
    margin:40px auto 0;
    padding:40px 0 74px;
  }
  .videoSwiper .swiper-wrapper{
    align-items:center;
  }
  .videoSwiper .swiper-slide{
    width:250px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    cursor:pointer;
  }
  .video-frame{
    position:relative;
    width:100%;
    max-width:250px;
    aspect-ratio:9/16;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(214,169,74,.35);
    box-shadow:var(--shadow);
    background:var(--wine);
    transform:scale(.86);
    filter:brightness(.5) saturate(.8);
    transition:transform .55s cubic-bezier(.22,.9,.34,1), filter .55s ease, box-shadow .55s ease, border-color .55s ease;
  }
  .video-frame video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:contain;
    background:#000;
    /* small side videos: non-interactive so a click centers them instead of trying to play */
    pointer-events:none;
  }
  .video-fallback{
    display:block;
    text-align:center;
    margin-top:12px;
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gold);
    border-bottom:1px solid rgba(214,169,74,.35);
    padding-bottom:2px;
  }
  .video-fallback:hover{color:var(--gold-bright); border-color:var(--gold-bright);}
  /* the centered / active video "pops up": full size, bright, glowing, and directly playable */
  .videoSwiper .swiper-slide-active .video-frame{
    transform:scale(1.08);
    filter:brightness(1) saturate(1.05);
    border-color:var(--gold-bright);
    box-shadow:0 25px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(214,169,74,.4), 0 0 40px rgba(214,169,74,.25);
  }
  .videoSwiper .swiper-slide-active .video-frame video{
    pointer-events:auto;
  }
  .videoSwiper .swiper-slide-prev .video-frame,
  .videoSwiper .swiper-slide-next .video-frame{
    transform:scale(.9);
    filter:brightness(.62) saturate(.85);
  }
  .videoSwiper .swiper-slide-active{ z-index:5; }

  /* big, obvious prev/next buttons on either side of the video area */
  .video-nav-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px; height:52px;
    border-radius:50%;
    background:var(--gold-bright);
    color:var(--sanctum);
    border:none;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,.45);
    z-index:20;
    transition:background .25s ease, transform .25s ease;
  }
  .video-nav-btn:hover{ background:var(--kumkum); color:var(--ivory); transform:translateY(-50%) scale(1.08); }
  .video-nav-btn.prev{ left:-6px; }
  .video-nav-btn.next{ right:-6px; }
  @media (max-width:900px){
    .video-nav-btn.prev{ left:0; }
    .video-nav-btn.next{ right:0; }
  }
  @media (max-width:560px){
    .video-nav-btn{ width:44px; height:44px; font-size:1.15rem; }
  }

  .videoSwiper .swiper-pagination-bullet{
    background:var(--gold);
    opacity:.45;
  }
  .videoSwiper .swiper-pagination-bullet-active{
    background:var(--gold-bright);
    opacity:1;
  }
  @media (max-width:560px){
    .videoSwiper .swiper-slide{width:64vw;}
    .video-frame{max-width:100%;}
  }

  /* ---------- SEVA / SERVICES ---------- */
  .seva{
    background:var(--wine);
    padding:100px 0 110px;
    position:relative;
  }
  .seva-head{max-width:640px; margin:0 auto 60px; text-align:center;}
  .seva-head h2{font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:16px;}
  .seva-head p{color:var(--ivory-dim); font-size:.95rem; line-height:1.8;}
  .seva-tabs{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .seva-tab{
    background:linear-gradient(165deg, rgba(214,169,74,.08), transparent 60%);
    border:1px solid rgba(214,169,74,.3);
    border-radius:8px;
    padding:36px 28px;
    display:flex; flex-direction:column; gap:12px;
    text-align:left;
    transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .seva-tab-icon{width:42px; height:42px;}
  .seva-tab h3{font-size:1.3rem; color:var(--gold-bright);}
  .seva-tab p{font-size:.88rem; line-height:1.6; color:var(--ivory-dim); flex-grow:1;}
  .seva-tab-cta{
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
    transition:color .25s ease;
  }
  .seva-tab:hover{
    background:var(--wine-light);
    border-color:var(--gold);
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,.4);
  }
  .seva-tab:hover .seva-tab-cta{color:var(--gold-bright);}

  /* ---------- VIDWAN / PRIESTS ---------- */
  .vidwan{padding:110px 0 100px;}
  .vidwan-head{text-align:center; margin-bottom:64px;}
  .vidwan-head h2{font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:14px;}
  .vidwan-head p{color:var(--ivory-dim); font-size:.95rem;}
  .priest-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  }
  .priest-card{
    border:1px solid rgba(214,169,74,.3);
    padding:40px 30px;
    text-align:center;
    position:relative;
    background:linear-gradient(180deg, rgba(214,169,74,.05), transparent);
  }
  .priest-card .om{
    width:44px; height:44px; margin:0 auto 22px;
  }
  .priest-card h3{font-size:1.15rem; margin-bottom:6px; color:var(--ivory);}
  .priest-card .role{
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
    margin-bottom:22px; display:block;
  }
  .priest-card .phones{display:flex; flex-direction:column; gap:8px;}
  .priest-card .phones a{
    font-family:'Cinzel',serif; font-size:.92rem; color:var(--gold-bright);
    border-top:1px solid rgba(214,169,74,.2); padding-top:8px;
    transition:color .25s ease;
  }
  .priest-card .phones a:first-child{border-top:none; padding-top:0;}
  .priest-card .phones a:hover{color:var(--kumkum);}

  /* ---------- CONTACT / CTA ---------- */
  .contact{
    background:var(--sanctum);
    padding:100px 0 60px;
    position:relative;
    border-top:1px solid rgba(214,169,74,.2);
  }
  .contact-inner{
    text-align:center; max-width:720px; margin:0 auto;
  }
  .contact h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:20px;}
  .contact p{color:var(--ivory-dim); line-height:1.9; margin-bottom:36px; font-size:.98rem;}
  .contact-cta{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:70px;}

  footer{
    text-align:center; padding:36px 6vw 40px; border-top:1px solid rgba(214,169,74,.15);
  }
  footer .mantra{font-family:'Noto Serif Devanagari',serif; color:var(--kumkum); font-size:1rem; margin-bottom:14px;}
  footer .fine{font-size:.72rem; letter-spacing:.06em; color:rgba(229,214,184,.55);}

  /* ---------- RESPONSIVE ---------- */
  /* switch to the hamburger menu earlier than the rest of the layout —
     brand + 6 links + the Book a Puja button need more breathing room
     than 920px gives them, which is what was causing the button to
     jam up against the last nav link. */
  @media (max-width:1080px){
    nav.links{display:none;}
    .nav-toggle{display:block; order:-1;}
    .nav-inner{gap:10px; position:relative;}
    .nav-cta.desktop-only{
      display:inline-block;
      padding:8px 14px;
      font-size:.62rem;
      letter-spacing:.08em;
      order:2;
      margin-left:auto;
    }
    .brand{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      justify-content:center;
      pointer-events:none;
    }
  }
  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero p.lede{margin-left:auto; margin-right:auto;}
    .hero-actions{justify-content:center;}
    .heritage-body{grid-template-columns:1fr;}
    .seva-tabs{grid-template-columns:1fr;}
    .priest-grid{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .seva-tabs{grid-template-columns:1fr;}
    .hero{padding-top:156px;}
    .gallerySwiper .swiper-slide{width:82vw; max-width:320px; height:auto; aspect-ratio:4/3;}
    .gallerySwiper{padding:20px 0 60px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    html{scroll-behavior:auto;}
  }

  /* ---------- LIGHTBOX ---------- */
  .gallerySwiper .swiper-slide img{cursor:zoom-in;}
  .lightbox{
    position:fixed; inset:0; z-index:200;
    background:rgba(10,4,4,.92);
    display:flex; align-items:center; justify-content:center;
    padding:30px;
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  .lightbox.is-open{opacity:1; pointer-events:auto;}
  .lightbox img{
    max-width:min(92vw, 900px);
    max-height:88vh;
    object-fit:contain;
    border-radius:6px;
    box-shadow:0 30px 70px rgba(0,0,0,.6);
    border:1px solid rgba(214,169,74,.35);
  }
  .lightbox-close{
    position:absolute; top:22px; right:26px;
    background:none; border:1px solid rgba(214,169,74,.5);
    color:var(--ivory);
    width:42px; height:42px; border-radius:50%;
    font-size:1.6rem; line-height:1;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease, color .2s ease;
  }
  .lightbox-close:hover{border-color:var(--gold-bright); color:var(--gold-bright);}

  /* ---------- SEVA LANDING PAGES (abhishek / pujas / homa) ---------- */
  .seva-landing{
    padding:180px 0 100px;
    min-height:70vh;
    background:linear-gradient(180deg, var(--sanctum), var(--wine) 20%, var(--wine) 80%, var(--sanctum));
  }
  .back-link{
    display:inline-block;
    font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
    margin-bottom:34px;
    border-bottom:1px solid rgba(214,169,74,.35);
    padding-bottom:2px;
    transition:color .2s ease;
  }
  .back-link:hover{color:var(--gold-bright);}
  .landing-head{max-width:760px; margin:0 auto 60px; text-align:center;}
  .landing-icon{width:52px; height:52px; margin:0 auto 18px;}
  .landing-head h1{font-size:clamp(1.9rem,4vw,2.8rem); margin:14px 0 20px;}
  .landing-head p{color:var(--ivory-dim); font-size:1rem; line-height:1.85; margin-bottom:30px;}
  .landing-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    max-width:980px;
    margin:0 auto;
  }
  .landing-card{
    background:linear-gradient(165deg, rgba(214,169,74,.06), transparent 60%);
    border:1px solid rgba(214,169,74,.25);
    border-radius:8px;
    padding:26px 26px 22px;
    display:flex; flex-direction:column; gap:10px;
    transition:background .3s ease, border-color .3s ease, transform .3s ease;
  }
  .landing-card:hover{
    background:var(--wine-light);
    border-color:var(--gold);
    transform:translateY(-4px);
  }
  .landing-card h3{font-family:'Cinzel',serif; font-size:1rem; color:var(--ivory); font-weight:600;}
  .landing-card p{font-size:.86rem; line-height:1.6; color:var(--ivory-dim); flex-grow:1;}
  .landing-cta{
    font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
    transition:color .2s ease;
  }
  .landing-card:hover .landing-cta{color:var(--gold-bright);}
  @media (max-width:700px){
    .landing-grid{grid-template-columns:1fr;}
  }

  /* ---------- SCROLL FADE TRANSITIONS ---------- */
  /* Each major section fades + rises in as it enters the viewport, and fades
     back out if you scroll away from it (in either direction) — so scrolling
     back up re-plays the fade on the section above, just like scrolling down does. */
  .reveal-section{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.22,.9,.34,1), transform .8s cubic-bezier(.22,.9,.34,1);
    will-change:opacity, transform;
  }
  .reveal-section.in-view{
    opacity:1;
    transform:translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal-section{opacity:1; transform:none; transition:none;}
  }