:root{--red:#a91536;--red2:#d6284d;--gold:#d8a12f;--ink:#34252a;--muted:#76676d;--cream:#fffaf8;--pink:#fff0f4;--line:#efd8de;--shadow:0 18px 55px rgba(92,20,40,.09)}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Karla,Arial,sans-serif}
.site-header{height:88px!important;background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--line)!important;box-shadow:0 5px 25px rgba(80,15,35,.05)!important;position:relative!important;z-index:50!important}
.site-header>.container{height:88px!important;display:grid!important;grid-template-columns:220px 1fr auto!important;align-items:center!important;gap:24px!important;max-width:1280px!important}
.brand{display:flex!important;align-items:center!important;text-decoration:none!important}
.brand-logo{display:block!important;width:185px!important;height:62px!important;object-fit:contain!important;object-position:left center!important}
.main-nav{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;height:100%!important}
.main-nav a{font-weight:700!important;color:#402f35!important;text-decoration:none!important;padding:12px 18px!important;border-radius:999px!important;transition:.25s ease!important}
.main-nav a:hover,.main-nav a.active{color:var(--red)!important;background:var(--pink)!important}
.header-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;min-width:230px!important;white-space:nowrap!important}
#headerAuthSlot{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;white-space:nowrap!important}
#headerAuthSlot .user-chip{display:inline-flex!important;align-items:center!important;gap:8px!important;height:44px!important;padding:5px 14px 5px 6px!important;border-radius:999px!important;background:#fff5f7!important;border:1px solid var(--line)!important;color:var(--red)!important;font-weight:800!important;text-decoration:none!important;white-space:nowrap!important}
#headerAuthSlot .avatar-sm{width:32px!important;height:32px!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
#headerAuthSlot .btn{height:42px!important;min-width:auto!important;padding:0 18px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;font-weight:700!important;font-size:14.5px!important;text-decoration:none!important;letter-spacing:0.01em!important;transition:all .2s ease!important}
#headerAuthSlot .btn-outline,#headerAuthSlot .header-login-btn{background:#fff!important;border:1.5px solid #d35b74!important;color:var(--red,#a91536)!important;box-shadow:0 2px 6px rgba(169,21,54,.06)!important}
#headerAuthSlot .btn-outline:hover,#headerAuthSlot .header-login-btn:hover{background:var(--pink,#fff0f4)!important;border-color:var(--red,#a91536)!important;color:#8e102c!important;transform:translateY(-1px)!important;box-shadow:0 4px 12px rgba(169,21,54,.12)!important}
#headerAuthSlot .btn-primary,#headerAuthSlot .header-register-btn{background:linear-gradient(135deg,#c7193f,#a80f2d)!important;border:1.5px solid transparent!important;color:#fff!important;box-shadow:0 4px 14px rgba(169,21,54,.22)!important}
#headerAuthSlot .btn-primary:hover,#headerAuthSlot .header-register-btn:hover{background:linear-gradient(135deg,#b01435,#8d0d27)!important;transform:translateY(-1px)!important;box-shadow:0 6px 18px rgba(169,21,54,.3)!important}
#headerAuthSlot .btn:active{transform:translateY(0)!important}
#headerAuthSlot #headerNotifBtn{font-size:14px!important;min-width:48px!important;padding:0 13px!important}
#headerAuthSlot #headerLogoutBtn{font-size:14px!important}
.nav-toggle{display:none!important}
.nav-mobile-only{display:none!important}

/* NEW HOME */
.hero{position:relative!important;min-height:550px!important;padding:54px 0 68px!important;overflow:hidden!important;background:linear-gradient(135deg,#fff9f8 0%,#fff0f3 54%,#fdf7ec 100%)!important}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(169,21,54,.08) 1.5px,transparent 1.5px);background-size:26px 26px;opacity:.65;pointer-events:none}
.hero:after{content:"";position:absolute;width:620px;height:620px;right:-180px;top:-150px;border-radius:50%;background:radial-gradient(circle,rgba(216,161,47,.16),rgba(255,255,255,0) 67%);pointer-events:none}
.hero>.container{position:relative;z-index:2;max-width:1280px!important}
.hero-inner{max-width:none!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(370px,.95fr)!important;gap:65px!important;align-items:center!important}
.hero-copy{max-width:720px}
.hero-eyebrow{font-size:14px!important;font-weight:800!important;letter-spacing:.09em!important;text-transform:uppercase!important;color:var(--red)!important;margin-bottom:16px!important}
.hero h1{font-family:Fraunces,Georgia,serif!important;font-size:clamp(50px,5.8vw,80px)!important;line-height:.99!important;letter-spacing:-.04em!important;color:#7f122d!important;margin:0 0 20px!important;max-width:760px!important}
.hero h1 em{color:#d6284d!important;font-style:italic!important}
.hero .lead{font-size:19px!important;line-height:1.6!important;color:#66565c!important;max-width:650px!important;margin:0 0 24px!important}
.hero-cta{display:flex!important;gap:12px!important;flex-wrap:wrap!important}
.hero .btn{height:52px!important;padding:0 26px!important;border-radius:999px!important;font-weight:800!important;display:inline-flex!important;align-items:center!important}
.hero .btn-gold{background:linear-gradient(135deg,#e3b344,#c98f20)!important;color:#3c2707!important;box-shadow:0 12px 28px rgba(193,139,27,.2)!important}
.hero .btn-outline-light{background:#fff!important;border:1px solid #dca2ad!important;color:var(--red)!important}
.hero-stats{display:flex!important;gap:42px!important;margin-top:36px!important}
.hero-stats div{display:flex!important;flex-direction:column!important;gap:4px!important}
.hero-stats strong{font-family:Fraunces,Georgia,serif!important;font-size:30px!important;color:var(--red)!important}
.hero-stats span{font-size:13px!important;color:var(--muted)!important}
.hero-visual{min-height:480px!important;position:relative!important;border-radius:36px!important;background:url('/assets/hero-wedding.jpg') center/cover no-repeat!important;box-shadow:0 26px 70px rgba(92,20,40,.12)!important;border:8px solid rgba(255,255,255,.85)!important;overflow:hidden!important}
.hero-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(128,10,40,.18))!important}
.hero-visual-card{position:absolute;left:24px;right:24px;bottom:24px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);box-shadow:0 15px 35px rgba(60,15,30,.12)}
.hero-visual-card strong{display:block;color:var(--red);font-size:17px;margin-bottom:3px}.hero-visual-card span{color:var(--muted);font-size:13.5px}
.search-panel{position:relative!important;margin-top:-44px!important;z-index:5!important;background:rgba(255,255,255,.97)!important;border:1px solid var(--line)!important;border-radius:26px!important;box-shadow:0 20px 60px rgba(83,20,38,.11)!important;padding:26px 28px!important}
.search-panel h3{font-family:Fraunces,Georgia,serif!important;font-size:26px!important;color:#7f122d!important;margin:0 0 6px!important}.search-panel .hint{color:var(--muted)!important;font-size:14px!important}
.search-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
.field label{color:#6d4d57!important;font-weight:800!important}.field input,.field select{border:1px solid #e7ccd4!important;background:#fff!important;border-radius:13px!important;height:48px!important;padding:0 14px!important}
.section{padding:54px 0!important}#profiles{padding-top:46px!important;padding-bottom:44px!important}#profiles #showMoreProfiles{margin-top:18px!important}.section-head{margin-bottom:24px!important}.section-alt{background:#fff1f4!important}.section-head h2{font-family:Fraunces,Georgia,serif!important;color:#7f122d!important;font-size:38px!important;margin:0 0 10px!important;line-height:1.15!important}.section-head p{color:var(--muted)!important;margin:0!important;font-size:16px!important}.profile-card{border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:var(--shadow)!important;background:#fff!important;transition:.3s ease!important}.profile-card:hover{transform:translateY(-7px)!important}.step,.feature-card,.testimonial{border:1px solid var(--line)!important;border-radius:22px!important;background:#fff!important;box-shadow:0 12px 35px rgba(83,20,38,.06)!important}.cta-band{border-radius:26px!important;padding:42px 48px!important;background:linear-gradient(135deg,#8f1532,#c5294c)!important;color:#fff!important;box-shadow:0 20px 55px rgba(130,15,45,.2)!important}.cta-band h2,.cta-band p{color:#fff!important}
.site-footer{background:#3d1724!important;color:#f9e8ed!important}.site-footer a{color:#fff!important}

@media(max-width:992px){
  .site-header{height:64px!important;position:sticky!important;top:0!important;z-index:1000!important}
  .site-header>.container{display:flex!important;flex-wrap:nowrap!important;justify-content:space-between!important;align-items:center!important;height:64px!important;padding:0 16px!important;position:relative!important}
  .brand-logo{width:125px!important;height:38px!important;object-fit:contain!important}
  .main-nav{position:absolute!important;top:64px!important;left:0!important;right:0!important;background:#fff!important;box-shadow:0 14px 35px rgba(60,20,30,.16)!important;border-bottom:2px solid var(--sj-red,#a01937)!important;display:none!important;flex-direction:column!important;padding:16px 20px!important;gap:6px!important;z-index:999!important}
  .main-nav.open{display:flex!important;animation:sjNavDrop .22s ease-out!important}
  @keyframes sjNavDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
  .main-nav a{display:flex!important;align-items:center!important;padding:12px 16px!important;border-radius:10px!important;font-size:15px!important;font-weight:600!important;color:#2b2320!important;min-height:44px!important}
  .main-nav a:hover,.main-nav a.active{background:#fdf2f4!important;color:#a01937!important}
  .main-nav .nav-mobile-only{display:flex!important}
  .main-nav a#navMobileLogout{color:#b91c1c!important;border-top:1px solid #ebe3d5!important;margin-top:8px!important;padding-top:14px!important}
  .main-nav .nav-mobile-login{color:var(--red,#a91536)!important;background:#fff5f7!important;border:1px solid #efd8de!important;border-radius:10px!important;margin-top:8px!important;font-weight:700!important}
  .main-nav .nav-mobile-login:hover{background:#fde8ed!important}
  .main-nav .nav-mobile-register{color:#fff!important;background:linear-gradient(135deg,#c7193f,#a80f2d)!important;border:1px solid transparent!important;border-radius:10px!important;margin-top:6px!important;font-weight:700!important;box-shadow:0 4px 12px rgba(169,21,54,.18)!important}
  .main-nav .nav-mobile-register:hover{background:linear-gradient(135deg,#b01435,#8d0d27)!important}
  .header-actions{display:flex!important;align-items:center!important;gap:8px!important;margin-left:auto!important;min-width:0!important}
  .header-actions select.ud-lang-selector{font-size:13px!important;margin-right:2px!important;padding:4px 6px!important;font-weight:600!important;background:#fdfafb!important;border:1px solid #e5d8dc!important;border-radius:8px!important}
  .header-actions #headerAuthSlot{display:flex!important;align-items:center!important;gap:6px!important}
  .header-actions #headerAuthSlot .btn{height:36px!important;padding:0 14px!important;font-size:13px!important}
  .header-actions #headerAuthSlot .user-chip{padding:3px 10px 3px 3px!important;font-size:13px!important;max-width:115px!important;gap:6px!important}
  .header-actions #headerAuthSlot .user-chip span{max-width:70px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .header-actions #headerAuthSlot #headerNotifBtn{display:none!important}
  .header-actions #headerAuthSlot #headerLogoutBtn{display:inline-flex!important;width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;align-items:center!important;justify-content:center!important}
  .nav-toggle{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;border-radius:10px!important;background:#fdf2f4!important;color:#a01937!important;border:1px solid #ebe3d5!important;font-size:18px!important;cursor:pointer!important;padding:0!important;touch-action:manipulation}
  .hero{padding:36px 0 48px!important}
  .hero-inner{grid-template-columns:1fr!important;gap:24px!important}
  .hero h1{font-size:clamp(30px,7.5vw,46px)!important;line-height:1.15!important;letter-spacing:-.025em!important;margin-bottom:16px!important}
  .hero .lead{font-size:16px!important;line-height:1.5!important;margin-bottom:20px!important}
  .hero-stats{gap:18px!important;flex-wrap:wrap!important;margin-top:28px!important}
  .hero-visual{min-height:280px!important;border-radius:24px!important}
  .search-grid{grid-template-columns:1fr!important}
  .search-panel{margin-top:-26px!important;padding:18px 16px!important;border-radius:18px!important}
  .section{padding:40px 0!important}#profiles{padding-top:32px!important;padding-bottom:32px!important}.section-head{margin-bottom:20px!important}.section-head h2{font-size:30px!important;margin-bottom:8px!important}.cta-band{padding:32px 24px!important}
  .site-footer{padding:36px 0 20px!important}
  .footer-grid{grid-template-columns:1fr!important;gap:26px!important;text-align:center!important}
  .footer-brand{text-align:center!important}
  .footer-brand .brand-logo{margin:0 auto!important}
  .footer-brand p{margin:12px auto 0!important;max-width:360px!important}
  .footer-social{justify-content:center!important;margin-top:14px!important}
  .footer-grid ul{align-items:center!important}
  .footer-bottom{flex-direction:column!important;text-align:center!important;gap:8px!important;margin-top:28px!important}
}

@media(max-width:640px){
  .header-actions #headerAuthSlot .header-login-btn{display:inline-flex!important;height:34px!important;padding:0 10px!important;font-size:12px!important}
  .header-actions #headerAuthSlot .header-register-btn{height:34px!important;padding:0 12px!important;font-size:12.5px!important}
  .hero{padding:26px 0 36px!important}
  .section{padding:28px 0!important}
  #profiles{padding-top:24px!important;padding-bottom:24px!important}
  .section-head{margin-bottom:16px!important}
  .section-head h2{font-size:25px!important;margin-bottom:6px!important}
  .cta-band{padding:26px 18px!important;border-radius:20px!important}
}

@media(max-width:480px){
  .site-header>.container{padding:0 8px!important;gap:4px!important}
  .brand-logo{width:96px!important;height:30px!important}
  .header-actions{gap:4px!important}
  .header-actions select.ud-lang-selector{font-size:11.5px!important;padding:2px 4px!important;margin-right:0!important}
  .header-actions #headerAuthSlot .user-chip{max-width:85px!important;padding:3px 6px 3px 3px!important}
  .header-actions #headerAuthSlot .user-chip span{max-width:45px!important;font-size:12px!important}
  .header-actions #headerAuthSlot .btn{padding:0 8px!important;height:32px!important;font-size:11.5px!important}
  .header-actions #headerAuthSlot .header-login-btn{display:inline-flex!important}
  .hero h1{font-size:clamp(26px,8.2vw,36px)!important;line-height:1.2!important}
  .hero-stats strong{font-size:26px!important}
  .hero-stats span{font-size:12px!important}
  .hero-visual{min-height:240px!important}
}

@media(max-width:340px){
  .brand-logo{width:86px!important;height:28px!important}
  .header-actions #headerAuthSlot .btn{padding:0 6px!important;height:30px!important;font-size:11px!important}
}

/* ==========================================================================
   SANJOG PREMIUM "HOW IT WORKS" REDESIGN & TIMELINE
   ========================================================================== */

.how-it-works-section {
  position: relative !important;
  z-index: 2 !important;
  padding: 52px 0 !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 12%, rgba(255, 235, 241, 0.9) 0%, rgba(255, 247, 249, 0.95) 55%, #fff1f4 100%) !important;
  border-top: 1px solid rgba(225, 185, 198, 0.4) !important;
  border-bottom: 1px solid rgba(225, 185, 198, 0.4) !important;
  box-shadow: 0 10px 30px rgba(80, 15, 35, 0.05) !important;
}

.how-it-works-ambient-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 960px;
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.12) 0%, rgba(160, 25, 55, 0.05) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a01937;
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 4px 14px rgba(160, 25, 55, 0.06);
  padding: 5px 16px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.eyebrow-accent {
  color: #c59b27;
  font-size: 11px;
}

.steps-timeline-wrap {
  position: relative;
  z-index: 1;
}

.steps-flow-line {
  position: absolute;
  top: 56px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(212, 175, 55, 0.12) 0%, 
    rgba(212, 175, 55, 0.55) 20%, 
    rgba(160, 25, 55, 0.45) 50%, 
    rgba(212, 175, 55, 0.55) 80%, 
    rgba(212, 175, 55, 0.12) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.steps-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  position: relative !important;
  z-index: 1 !important;
}

.step-card {
  position: relative !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffdfd 60%, #fff9fb 100%) !important;
  border: 1px solid rgba(225, 185, 198, 0.55) !important;
  border-radius: 20px !important;
  padding: 24px 18px 20px !important;
  box-shadow: 0 8px 26px rgba(110, 20, 45, 0.04), 0 2px 6px rgba(110, 20, 45, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease !important;
}

.step-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(180, 28, 62, 0.45) !important;
  box-shadow: 0 22px 48px rgba(130, 20, 50, 0.10), 0 4px 14px rgba(212, 175, 55, 0.16) !important;
}

.step-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  position: relative !important;
}

.step-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: linear-gradient(135deg, #fffbf2 0%, #fff1f4 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(160, 25, 55, 0.04) !important;
}

.step-badge-lbl {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #9e7618 !important;
  text-transform: uppercase !important;
}

.step-badge-num {
  font-family: Fraunces, Georgia, serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #80142d !important;
  line-height: 1 !important;
}

.step-icon-badge {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff 0%, #fff2f5 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 6px 18px rgba(160, 25, 55, 0.08), inset 0 0 12px rgba(255, 255, 255, 0.9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease !important;
}

.step-card:hover .step-icon-badge {
  transform: scale(1.06) rotate(1.5deg) !important;
  border-color: rgba(212, 175, 55, 0.7) !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.25), 0 2px 8px rgba(160, 25, 55, 0.1) !important;
}

.step-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.step-title {
  font-family: Fraunces, Georgia, serif !important;
  font-size: 19px !important;
  line-height: 1.28 !important;
  color: #6b1228 !important;
  margin: 0 0 10px !important;
  font-weight: 700 !important;
}

.step-desc {
  font-size: 14px !important;
  line-height: 1.62 !important;
  color: #5c4b53 !important;
  margin: 0 0 16px !important;
  flex: 1 !important;
}

.step-card-footer {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px dashed rgba(225, 185, 198, 0.5) !important;
}

.step-pill-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #8c1e38 !important;
}

.step-pill-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #d4af37 !important;
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.8) !important;
}

/* Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.steps-grid .step-card:nth-child(1) { transition-delay: 0.06s; }
.steps-grid .step-card:nth-child(2) { transition-delay: 0.18s; }
.steps-grid .step-card:nth-child(3) { transition-delay: 0.30s; }
.steps-grid .step-card:nth-child(4) { transition-delay: 0.42s; }

/* Responsive: Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .how-it-works-section {
    padding: 38px 0 !important;
  }
  .steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
  .steps-flow-line {
    display: none !important;
  }
}

/* Responsive: Mobile (≤ 640px) */
@media (max-width: 640px) {
  .how-it-works-section {
    padding: 28px 0 !important;
  }
  .steps-timeline-wrap {
    padding-left: 18px;
    position: relative;
  }
  .steps-flow-line {
    display: block !important;
    top: 24px;
    bottom: 24px;
    left: 2px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, 
      rgba(212, 175, 55, 0.3) 0%, 
      rgba(160, 25, 55, 0.45) 50%, 
      rgba(212, 175, 55, 0.3) 100%
    ) !important;
  }
  .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .step-card {
    padding: 20px 16px 16px !important;
    border-radius: 18px !important;
  }
  .step-icon-badge {
    width: 48px !important;
    height: 48px !important;
  }
  .step-title {
    font-size: 17px !important;
  }
  .step-desc {
    font-size: 13.5px !important;
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .step-card, .feature-card, .wedding-banner-card {
    transition: none !important;
  }
  .step-card:hover, .feature-card:hover, .wedding-banner-card:hover {
    transform: none !important;
  }
  .step-icon-badge, .feature-icon-badge {
    transition: none !important;
  }
  .step-card:hover .step-icon-badge, .feature-card:hover .feature-icon-badge {
    transform: none !important;
  }
}

/* ==========================================================================
   SANJOG FULL-WIDTH FIXED WEDDING BACKGROUND SECTION (PARALLAX EFFECT)
   ========================================================================== */
.wedding-fixed-banner {
  position: relative !important;
  width: 100% !important;
  height: 380px !important;
  background-image: url('../assets/istockphoto-635831548-612x612.jpg') !important;
  background-attachment: fixed !important;
  background-position: center 42% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  overflow: hidden !important;
  z-index: 1 !important;
  border-top: 1px solid rgba(212, 175, 55, 0.45) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: inset 0 16px 36px rgba(0, 0, 0, 0.12), inset 0 -16px 36px rgba(0, 0, 0, 0.12) !important;
}

.wedding-fixed-banner-tint {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg, 
    rgba(80, 15, 35, 0.18) 0%, 
    rgba(0, 0, 0, 0.02) 35%, 
    rgba(0, 0, 0, 0.02) 65%, 
    rgba(80, 15, 35, 0.22) 100%
  ) !important;
  pointer-events: none !important;
}

/* Subtle champagne-gold & wine border trim */
.wedding-fixed-banner:before,
.wedding-fixed-banner:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.wedding-fixed-banner:before {
  top: 0 !important;
  background: linear-gradient(90deg, 
    rgba(212, 175, 55, 0) 0%, 
    rgba(212, 175, 55, 0.7) 25%, 
    rgba(165, 24, 58, 0.75) 50%, 
    rgba(212, 175, 55, 0.7) 75%, 
    rgba(212, 175, 55, 0) 100%
  ) !important;
}

.wedding-fixed-banner:after {
  bottom: 0 !important;
  background: linear-gradient(90deg, 
    rgba(212, 175, 55, 0) 0%, 
    rgba(212, 175, 55, 0.7) 25%, 
    rgba(165, 24, 58, 0.75) 50%, 
    rgba(212, 175, 55, 0.7) 75%, 
    rgba(212, 175, 55, 0) 100%
  ) !important;
}

/* ==========================================================================
   SANJOG "WHY FAMILIES CHOOSE US" SECTION (SCROLLS OVER FIXED WEDDING BANNER)
   ========================================================================== */
.why-choose-section {
  position: relative !important;
  z-index: 2 !important;
  padding: 54px 0 !important;
  background: #ffffff !important;
  box-shadow: 0 -14px 40px rgba(80, 15, 35, 0.08) !important;
  border-top: 1px solid rgba(225, 185, 198, 0.55) !important;
}

.why-choose-section .section-head {
  margin-bottom: 24px !important;
}

.why-choose-section .section-head h2 {
  font-family: Fraunces, Georgia, serif !important;
  font-size: 38px !important;
  color: #7f122d !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.15 !important;
}

.why-choose-section .section-head p {
  font-size: 16px !important;
  color: var(--muted, #76676d) !important;
  margin: 0 !important;
}

.why-choose-section .feature-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

.why-choose-section .feature-card {
  position: relative !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffdfd 60%, #fffbfc 100%) !important;
  border: 1px solid rgba(225, 185, 198, 0.55) !important;
  border-radius: 18px !important;
  padding: 24px 20px 22px !important;
  box-shadow: 0 8px 24px rgba(110, 20, 45, 0.04), 0 2px 6px rgba(110, 20, 45, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  height: 100% !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.why-choose-section .feature-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(180, 28, 62, 0.45) !important;
  box-shadow: 0 18px 40px rgba(130, 20, 50, 0.09), 0 4px 12px rgba(212, 175, 55, 0.14) !important;
}

.why-choose-section .feature-icon-badge {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #ffffff 0%, #fff4f6 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 4px 14px rgba(160, 25, 55, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.why-choose-section .feature-card:hover .feature-icon-badge {
  transform: scale(1.08) !important;
  border-color: rgba(212, 175, 55, 0.75) !important;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.22) !important;
}

.why-choose-section .feature-card h3 {
  font-family: Fraunces, Georgia, serif !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  color: #6b1228 !important;
  margin: 0 0 8px 0 !important;
  font-weight: 700 !important;
}

.why-choose-section .feature-card p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #5c4b53 !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* Stagger reveals */
.feature-grid .feature-card:nth-child(1) { transition-delay: 0.06s; }
.feature-grid .feature-card:nth-child(2) { transition-delay: 0.16s; }
.feature-grid .feature-card:nth-child(3) { transition-delay: 0.26s; }
.feature-grid .feature-card:nth-child(4) { transition-delay: 0.36s; }

/* Responsive: Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .wedding-fixed-banner {
    height: 320px !important;
    background-position: center 40% !important;
  }
  .why-choose-section {
    padding: 40px 0 !important;
  }
  .why-choose-section .feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .why-choose-section .section-head h2 {
    font-size: 30px !important;
  }
}

/* Responsive: Mobile & Touch devices (≤ 768px) */
@media (max-width: 768px) {
  .wedding-fixed-banner {
    height: 250px !important;
    background-attachment: scroll !important;
    background-position: center 36% !important;
  }
  .why-choose-section {
    padding: 34px 0 !important;
  }
}

/* Responsive: Small Mobile (≤ 640px) */
@media (max-width: 640px) {
  .why-choose-section {
    padding: 28px 0 !important;
  }
  .why-choose-section .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .why-choose-section .feature-card {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
  .why-choose-section .feature-icon-badge {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 12px !important;
  }
  .why-choose-section .feature-card h3 {
    font-size: 17px !important;
  }
  .why-choose-section .section-head h2 {
    font-size: 25px !important;
  }
}

@media (max-width: 480px) {
  .wedding-fixed-banner {
    height: 210px !important;
    background-position: center 36% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wedding-fixed-banner {
    background-attachment: scroll !important;
  }
}