@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600&family=Great+Vibes&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --ink:#242424;
  --muted:#6f6f6f;
  --line:#e7e7e7;
  --accent:#74132f;
  --accent-2:#9e234a;
  --white:#fff;
  --surface:#fafafa;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:'Jost',sans-serif;
  color:var(--ink);
  background:#fff;
}
button, a { font:inherit; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

.page-shell { min-height:100vh; }
.site-shell { background:#fff; }

.section {
  padding:96px 24px;
  border-bottom:1px solid var(--line);
}
.section-inner {
  width:min(1120px,100%);
  margin:0 auto;
}
.section-heading {
  max-width:760px;
  margin:0 auto 40px;
  text-align:center;
}
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.content-block { max-width:560px; }
.center-copy { text-align:center; }
.eyebrow {
  font-size:12px;
  letter-spacing:.22em;
  font-weight:600;
  color:var(--accent);
  margin-bottom:12px;
}
h1,h2,h3 {
  font-family:'Bodoni Moda',serif;
  margin-top:0;
}
h1 {
  font-size:clamp(52px,7vw,92px);
  line-height:.95;
  margin-bottom:20px;
}
h1 span { font-family:'Great Vibes',cursive; font-weight:400; }
h2 {
  font-size:clamp(36px,5vw,60px);
  line-height:1.05;
  margin-bottom:18px;
}
h3 { margin-bottom:8px; }
.lead {
  font-size:18px;
  color:#444;
  line-height:1.7;
}
p { line-height:1.7; }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
}
.btn:hover {
  transform:translateY(-2px);
}
.btn:active { transform:translateY(0); }
.btn-primary {
  color:#fff;
  background:var(--accent);
  box-shadow:0 8px 20px rgba(116,19,47,.16);
}
.btn-primary:hover { background:var(--accent-2); }
.btn-secondary {
  border-color:#d6d6d6;
  background:#fff;
}
.btn-secondary:hover {
  border-color:#a9a9a9;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.media-placeholder {
  min-height:420px;
  border:2px dashed #d6d6d6;
  background:
    linear-gradient(135deg,#fff,#f8f8f8);
  display:grid;
  place-items:center;
  color:#999;
  border-radius:24px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.media-placeholder:hover {
  border-color:#aaa;
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(0,0,0,.06);
}
.hero-placeholder { min-height:560px; }

.countdown-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:520px;
  margin:28px 0;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.countdown-grid > div {
  padding:18px 10px;
  text-align:center;
  border-right:1px solid var(--line);
}
.countdown-grid > div:last-child { border-right:0; }
.countdown-grid strong {
  display:block;
  font:600 28px 'Bodoni Moda',serif;
}
.countdown-grid span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
}

.family-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:44px;
}
.family-block {
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.family-block:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.06);
}
.family-block small { color:var(--accent); font-weight:600; }
.amp {
  font:42px 'Great Vibes',cursive;
  color:var(--accent);
  margin:2px 0;
}

.timeline {
  max-width:760px;
  margin:0 auto;
}
.timeline-item {
  display:grid;
  grid-template-columns:100px 24px 1fr;
  align-items:center;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.timeline-item time {
  font-weight:600;
  color:var(--accent);
}
.timeline-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  justify-self:center;
  transition:transform .2s ease;
}
.timeline-item:hover .timeline-dot { transform:scale(1.5); }

.button-row {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0;
}

.carousel-shell {
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding:0 64px;
}
.carousel-track {
  position:relative;
  height:430px;
  perspective:1000px;
}
.carousel-slide {
  position:absolute;
  top:50%;
  left:50%;
  width:min(340px,46%);
  aspect-ratio:3/4;
  padding:0;
  border:0;
  background:none;
  transition:transform .35s ease, opacity .35s ease, filter .35s ease;
}
.carousel-slide img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.carousel-slide.is-current {
  transform:translate(-50%,-50%) scale(1);
  z-index:5;
  opacity:1;
}
.carousel-slide.is-prev {
  transform:translate(-125%,-50%) scale(.82) rotate(-4deg);
  z-index:3;
  opacity:.55;
}
.carousel-slide.is-next {
  transform:translate(25%,-50%) scale(.82) rotate(4deg);
  z-index:3;
  opacity:.55;
}
.carousel-slide.is-hidden { opacity:0; pointer-events:none; }
.carousel-slide:hover img {
  box-shadow:0 28px 60px rgba(0,0,0,.18);
}
.carousel-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  font-size:28px;
  z-index:6;
  transition:transform .2s ease, box-shadow .2s ease;
}
.carousel-nav:hover {
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.carousel-nav.prev { left:0; }
.carousel-nav.next { right:0; }
.carousel-dots {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.carousel-dots button {
  width:9px;
  height:9px;
  border-radius:50%;
  border:0;
  background:#d4d4d4;
  padding:0;
}
.carousel-dots button.active {
  width:26px;
  border-radius:999px;
  background:var(--accent);
}

.gift-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,220px));
  gap:28px;
  justify-content:center;
}
.gift-card {
  border:0;
  background:none;
  display:grid;
  gap:14px;
  justify-items:center;
}
.gift-box {
  width:150px;
  height:130px;
  border-radius:16px;
  background:
    linear-gradient(90deg,transparent 44%,var(--accent) 44% 56%,transparent 56%),
    linear-gradient(#d7a84d,#f0cd7d);
  position:relative;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gift-box::before {
  content:'';
  position:absolute;
  left:-10px;
  right:-10px;
  top:-18px;
  height:30px;
  border-radius:10px;
  background:linear-gradient(#efcf84,#d5a33f);
}
.gift-card:hover .gift-box {
  transform:translateY(-6px) rotate(-1deg);
  box-shadow:0 20px 44px rgba(0,0,0,.16);
}

.contact-grid {
  max-width:860px;
  margin:0 auto;
  display:grid;
  gap:16px;
}
.contact-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.contact-row:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.contact-row h3 { margin-bottom:2px; }
.contact-row p { margin:0; color:var(--muted); }
.contact-actions { display:flex; gap:10px; }
.icon-btn {
  min-width:92px;
  height:42px;
  border-radius:999px;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  transition:transform .2s ease, filter .2s ease;
}
.icon-btn:hover { transform:translateY(-2px); filter:brightness(1.05); }
.call { background:#a71e3f; }
.whatsapp { background:#20c864; }

.final-rsvp {
  text-align:center;
  background:#fafafa;
}

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.68);
  display:grid;
  place-items:center;
  padding:24px;
}
.modal-card {
  position:relative;
  width:min(92vw,520px);
  background:#fff;
  border-radius:22px;
  padding:28px;
  text-align:center;
}
.modal-close {
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:0;
  background:#f1f1f1;
}
.qr { width:min(320px,78vw); margin:20px auto; }
.modal-gallery {
  position:relative;
  width:min(94vw,1100px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
}
.modal-gallery img {
  max-height:82vh;
  object-fit:contain;
  border-radius:20px;
}
.modal-arrow {
  width:48px;
  height:48px;
  border-radius:50%;
  border:0;
  background:#fff;
  font-size:28px;
}

.door-stage {
  position:fixed;
  inset:0;
  z-index:2000;
  display:grid;
  place-items:center;
  background:#fff;
  perspective:1500px;
  transition:opacity .25s .85s, visibility .25s .85s;
}
.door-stage.is-opening {
  opacity:0;
  visibility:hidden;
}
.door-frame {
  width:min(720px,86vw);
  height:min(760px,82vh);
  position:relative;
  border:10px solid #ddd;
  background:#fafafa;
  overflow:hidden;
  transform-style:preserve-3d;
}
.door-panel {
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  background:#f2f2f2;
  border:1px solid #d6d6d6;
  transition:transform .85s cubic-bezier(.65,.03,.25,1);
}
.door-left { left:0; transform-origin:left center; }
.door-right { right:0; transform-origin:right center; }
.door-stage.is-opening .door-left { transform:rotateY(-108deg); }
.door-stage.is-opening .door-right { transform:rotateY(108deg); }
.door-copy {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:24px;
  z-index:5;
}
.door-monogram {
  font:500 clamp(48px,8vw,84px) 'Bodoni Moda',serif;
}
.door-monogram span {
  font-family:'Great Vibes',cursive;
  color:var(--accent);
}

@media (max-width:900px) {
  .two-col { grid-template-columns:1fr; gap:36px; }
  .reverse-mobile .content-block { order:2; }
  .reverse-mobile .media-placeholder { order:1; }
}

@media (max-width:640px) {
  .section { padding:68px 16px; }
  .section-heading { margin-bottom:30px; }
  .media-placeholder { min-height:300px; border-radius:18px; }
  .hero-placeholder { min-height:420px; }
  .countdown-grid { grid-template-columns:repeat(4,1fr); }
  .countdown-grid strong { font-size:20px; }
  .countdown-grid span { font-size:8px; }
  .family-grid { grid-template-columns:1fr; }
  .family-block { padding:22px 16px; }
  .timeline-item { grid-template-columns:70px 18px 1fr; gap:10px; }
  .timeline-item time { font-size:11px; }
  .carousel-shell { padding:0 30px; }
  .carousel-track { height:330px; }
  .carousel-slide { width:76%; }
  .carousel-slide.is-prev { transform:translate(-108%,-50%) scale(.78) rotate(-4deg); }
  .carousel-slide.is-next { transform:translate(8%,-50%) scale(.78) rotate(4deg); }
  .carousel-nav { width:34px; height:34px; font-size:22px; }
  .gift-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .gift-box { width:125px; height:112px; }
  .contact-row { padding:16px; }
  .contact-actions { gap:6px; }
  .icon-btn { min-width:72px; height:38px; font-size:11px; }
  .modal-gallery { grid-template-columns:1fr; }
  .modal-arrow {
    position:absolute;
    z-index:4;
    top:50%;
    transform:translateY(-50%);
  }
  .modal-arrow:first-child { left:8px; }
  .modal-arrow:nth-child(3) { right:8px; }
}

/* =========================================================
   V2 FUNCTIONALITY + INTERACTION PASS
   ========================================================= */

body {
  padding-bottom: 104px;
}

.section {
  scroll-margin-top: 24px;
}

.script-line,
.script-section-title,
.script-label,
.couple-script {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
}

.script-line {
  color: #a96545;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  margin: -6px 0 18px;
}

.script-section-title {
  color: #a96545;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1;
}

.script-label {
  color: #a96545;
  font-size: 31px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.couple-script {
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.1;
  color: #222;
}

.invitation-copy {
  max-width: 820px;
  margin: 0 auto;
  padding-top: 12px;
}

.hero-section h1 {
  margin-bottom: 10px;
}

/* Schedule */
.timeline {
  max-width: 760px;
  margin: 0 auto;
}

.timeline-item {
  display: grid;
  grid-template-columns: 112px 24px 1fr;
  gap: 18px;
  align-items: stretch;
  min-height: 88px;
  padding: 0;
  border-bottom: 0;
}

.schedule-time {
  padding-top: 5px;
  text-align: right;
  color: var(--accent);
  line-height: 1.12;
}

.schedule-time strong,
.schedule-time span {
  display: block;
}

.schedule-time strong {
  font-size: 17px;
  font-weight: 500;
}

.schedule-time span {
  margin-top: 6px;
  color: #b77782;
  font-size: 15px;
}

.timeline-marker {
  position: relative;
  display: flex;
  justify-content: center;
}

.timeline-dot {
  position: relative;
  z-index: 2;
  width: 15px;
  height: 15px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-line {
  position: absolute;
  top: 20px;
  bottom: 0;
  width: 1px;
  background: #d7a8b2;
}

.timeline-item:last-child .timeline-line {
  display: none;
}

.schedule-label {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding-top: 3px;
  font-size: 18px;
}

.schedule-icon {
  width: 26px;
  text-align: center;
  font-size: 21px;
  line-height: 1;
}

/* Luxury gift cards */
.gift-card {
  border: 0;
  background: transparent;
  padding: 14px;
  cursor: pointer;
}

.luxury-gift {
  position: relative;
  width: 220px;
  height: 132px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid #d8b06a;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.92), transparent 42%),
    linear-gradient(145deg, #fffdf8, #f8eddc);
  box-shadow: 0 14px 30px rgba(86, 51, 20, .12);
  transition: transform .28s cubic-bezier(.2,.8,.2,1),
              box-shadow .28s ease,
              border-color .28s ease;
}

.gift-card:hover .luxury-gift,
.gift-card:focus-visible .luxury-gift {
  transform: translateY(-7px) scale(1.025);
  border-color: #c38a32;
  box-shadow: 0 22px 45px rgba(86, 51, 20, .18);
}

.gift-ribbon-vertical,
.gift-ribbon-horizontal {
  position: absolute;
  z-index: 1;
  background: linear-gradient(90deg, #b97924, #e3bc6b 47%, #a96c1e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}

.gift-ribbon-vertical {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 20px;
  transform: translateX(-50%);
}

.gift-ribbon-horizontal {
  left: 0;
  right: 0;
  top: 30px;
  height: 17px;
}

.gift-bow {
  position: absolute;
  top: -20px;
  width: 50px;
  height: 32px;
  z-index: 3;
  border: 1px solid #a86e25;
  background: linear-gradient(145deg, #edca83, #ba7b26);
  box-shadow: 0 6px 12px rgba(86,51,20,.18);
}

.bow-left {
  left: calc(50% - 47px);
  border-radius: 70% 35% 65% 35%;
  transform: rotate(18deg);
}

.bow-right {
  right: calc(50% - 47px);
  border-radius: 35% 70% 35% 65%;
  transform: rotate(-18deg);
}

.gift-knot {
  position: absolute;
  z-index: 4;
  top: -12px;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #a86e25;
  border-radius: 7px;
  background: linear-gradient(145deg, #e9c574, #b87924);
}

.gift-card-copy {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 3px;
  padding: 34px 28px 8px;
  text-align: center;
}

.gift-card-copy small {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7d674b;
}

.gift-card-copy strong {
  font-family: 'Bodoni Moda', serif;
  font-size: 23px;
  font-weight: 500;
  color: #38291c;
}

/* Bottom navigation */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 900;
  width: min(860px, calc(100vw - 32px));
  min-height: 78px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  background: rgba(103, 103, 88, .91);
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.bottom-nav-item {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: rgba(255,255,255,.76);
  transition: color .22s ease,
              background .22s ease,
              transform .22s cubic-bezier(.2,.8,.2,1);
}

.bottom-nav-item::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #e7c47e;
  transition: width .22s ease;
}

.bottom-nav-item svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .22s ease, filter .22s ease;
}

.bottom-nav-item span {
  font-size: 10px;
  letter-spacing: .05em;
  opacity: 0;
  max-height: 0;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease, max-height .22s ease;
}

.bottom-nav-item:hover,
.bottom-nav-item:focus-visible,
.bottom-nav-item.is-active {
  color: #fff7e9;
  background: rgba(255,255,255,.07);
}

.bottom-nav-item:hover svg,
.bottom-nav-item:focus-visible svg {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.18));
}

.bottom-nav-item:hover span,
.bottom-nav-item:focus-visible span,
.bottom-nav-item.is-active span {
  opacity: 1;
  max-height: 16px;
  transform: translateY(0);
}

.bottom-nav-item.is-active::after {
  width: 28px;
}

/* Separate floating music control */
.music-toggle {
  position: fixed;
  right: 24px;
  bottom: 112px;
  z-index: 905;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(116,19,47,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--accent);
  box-shadow: 0 12px 28px rgba(0,0,0,.13);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.music-toggle:hover,
.music-toggle:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 34px rgba(0,0,0,.17);
}

.music-note {
  font-family: Georgia, serif;
  font-size: 24px;
}

.music-bars {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.music-bars i {
  width: 3px;
  border-radius: 999px;
  background: currentColor;
  animation: musicPulse .75s ease-in-out infinite alternate;
}

.music-bars i:nth-child(1) { height: 9px; }
.music-bars i:nth-child(2) { height: 19px; animation-delay: .18s; }
.music-bars i:nth-child(3) { height: 13px; animation-delay: .34s; }

@keyframes musicPulse {
  from { transform: scaleY(.55); opacity: .55; }
  to { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 640px) {
  body {
    padding-bottom: 88px;
  }

  .bottom-nav {
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    min-height: 66px;
    border-radius: 18px;
  }

  .bottom-nav-item {
    gap: 2px;
  }

  .bottom-nav-item svg {
    width: 23px;
    height: 23px;
  }

  .bottom-nav-item span {
    display: none;
  }

  .bottom-nav-item::after {
    bottom: 6px;
  }

  .music-toggle {
    right: 14px;
    bottom: 87px;
    width: 42px;
    height: 42px;
  }

  .timeline-item {
    grid-template-columns: 82px 20px 1fr;
    gap: 10px;
    min-height: 84px;
  }

  .schedule-time strong {
    font-size: 13px;
  }

  .schedule-time span {
    font-size: 12px;
  }

  .schedule-label {
    gap: 9px;
    font-size: 15px;
  }

  .schedule-icon {
    width: 22px;
    font-size: 19px;
  }

  .gift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .gift-card {
    min-width: 0;
    padding: 10px 2px;
  }

  .luxury-gift {
    width: min(42vw, 176px);
    height: 116px;
  }

  .gift-card-copy strong {
    font-size: 19px;
  }

  .script-label {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* =========================================================
   V2.1 BOTTOM NAV SAFE-AREA + OPENING AUTO-SCROLL
   ========================================================= */

/*
   The navigation remains fixed, but the document now reserves enough
   space for it so the final content can always scroll completely above it.
*/
html {
  scroll-padding-bottom: 132px;
}

body {
  padding-bottom: 138px;
}

.site-shell {
  padding-bottom: 28px;
}

.section:last-of-type,
.final-rsvp {
  padding-bottom: 150px;
}

/* Slightly slimmer so it feels like navigation, not a content panel. */
.bottom-nav {
  min-height: 68px;
}

.bottom-nav-item svg {
  width: 24px;
  height: 24px;
}

/* Keep floating music above the nav rather than overlapping it. */
.music-toggle {
  bottom: 100px;
}

@media (max-width: 640px) {
  html {
    scroll-padding-bottom: 106px;
  }

  body {
    padding-bottom: 112px;
  }

  .site-shell {
    padding-bottom: 18px;
  }

  .section:last-of-type,
  .final-rsvp {
    padding-bottom: 126px;
  }

  .bottom-nav {
    min-height: 60px;
  }

  .bottom-nav-item svg {
    width: 21px;
    height: 21px;
  }

  .music-toggle {
    bottom: 78px;
  }
}


/* =========================================================
   V2.2 NAV CENTERING + GALLERY AUTO-CAROUSEL POLISH
   ========================================================= */

/* Use inset-inline instead of left + transform so the bar stays
   geometrically centered even with viewport/safe-area quirks. */
.bottom-nav {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  transform: none;
  width: min(860px, calc(100vw - 32px));
}

/* Keep all 6 items perfectly distributed */
.bottom-nav-item {
  min-width: 0;
}

/* Gallery auto-carousel transitions */
.carousel-slide {
  will-change: transform, opacity;
}

.carousel-slide.is-current img {
  transform: scale(1);
  transition: transform .35s ease, box-shadow .35s ease;
}

.carousel-slide.is-current:hover img {
  transform: scale(1.02);
}

@media (max-width: 640px) {
  .bottom-nav {
    left: 0;
    right: 0;
    width: calc(100vw - 16px);
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }
}


/* =========================================================
   V2.3 INTERACTIVE ANIMATED GIFT BOXES
   ========================================================= */

.gift-grid-animated {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  justify-content: center;
  gap: 34px;
  margin-top: 26px;
}

.gift-interactive {
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  perspective: 1200px;
}

.gift-scene {
  position: relative;
  width: 250px;
  height: 210px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform .35s ease;
}

.gift-interactive:hover .gift-scene,
.gift-interactive:focus-visible .gift-scene {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
}

.gift-body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 12px;
  height: 126px;
  overflow: hidden;
  border: 1px solid #d4aa64;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 78%, rgba(212,170,100,.10), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(212,170,100,.10), transparent 28%),
    linear-gradient(145deg, #fffdf8, #f6ead7);
  box-shadow:
    0 18px 35px rgba(95,64,25,.14),
    inset 0 0 0 1px rgba(255,255,255,.7);
  transition: transform .45s ease, box-shadow .45s ease;
}

.gift-ribbon-v {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 24px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #b77b2d, #e2bc72 48%, #ad6f20);
}

.gift-floral {
  position: absolute;
  bottom: 7px;
  font-size: 34px;
  color: #c99c54;
  opacity: .45;
}

.floral-left { left: 13px; transform: rotate(-12deg); }
.floral-right { right: 13px; transform: rotate(12deg); }

.gift-lid {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 42px;
  height: 58px;
  z-index: 5;
  border: 1px solid #d4aa64;
  border-radius: 17px;
  background: linear-gradient(145deg, #fffefa, #f5e7cf);
  box-shadow: 0 8px 18px rgba(95,64,25,.12);
  transform-origin: 50% 100%;
  transition:
    transform .7s cubic-bezier(.16,.84,.34,1),
    opacity .45s ease;
}

.gift-lid::after {
  content:'';
  position:absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(90deg, #b77b2d, #e2bc72 48%, #ad6f20);
}

.gift-bow-3d {
  position: absolute;
  left: 50%;
  top: -38px;
  width: 150px;
  height: 72px;
  transform: translateX(-50%);
  z-index: 8;
}

.loop,
.tail,
.knot {
  position: absolute;
  background: linear-gradient(145deg, #f0cf8b, #b87524);
  border: 1px solid #a96a19;
  box-shadow: 0 7px 14px rgba(80,49,13,.18);
}

.loop {
  top: 4px;
  width: 62px;
  height: 38px;
}

.loop-left {
  left: 8px;
  border-radius: 75% 35% 72% 34%;
  transform: rotate(15deg);
}

.loop-right {
  right: 8px;
  border-radius: 35% 75% 34% 72%;
  transform: rotate(-15deg);
}

.knot {
  left: 50%;
  top: 16px;
  width: 31px;
  height: 31px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 8px;
  z-index: 3;
}

.tail {
  top: 34px;
  width: 24px;
  height: 42px;
}

.tail-left {
  left: 53px;
  transform: rotate(18deg);
}

.tail-right {
  right: 53px;
  transform: rotate(-18deg);
}

.gift-tag {
  position: absolute;
  z-index: 9;
  right: 16px;
  top: 82px;
  min-width: 88px;
  padding: 8px 14px;
  transform: rotate(7deg);
  border: 1px solid #e1c69b;
  border-radius: 10px;
  background: #fff9ee;
  color: #8d5d27;
  font-family: 'Great Vibes', cursive;
  font-size: 25px;
  box-shadow: 0 7px 16px rgba(83,55,23,.1);
  transition: transform .4s ease, opacity .35s ease;
}

.gift-qr-panel {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 38px;
  width: 132px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  transform: translate(-50%, 75px) scale(.75);
  opacity: 0;
  transition:
    transform .62s cubic-bezier(.2,.9,.2,1),
    opacity .35s ease;
}

.gift-qr-panel img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.gift-sparkles {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.gift-sparkles i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2cf79;
  opacity: 0;
  box-shadow: 0 0 15px rgba(242,207,121,.9);
}

.gift-sparkles i:nth-child(1) { left: 14%; top: 42%; }
.gift-sparkles i:nth-child(2) { left: 28%; top: 22%; }
.gift-sparkles i:nth-child(3) { left: 50%; top: 14%; }
.gift-sparkles i:nth-child(4) { right: 28%; top: 23%; }
.gift-sparkles i:nth-child(5) { right: 14%; top: 43%; }
.gift-sparkles i:nth-child(6) { left: 50%; top: 50%; }

/* Hover: subtle life before tap */
.gift-interactive:hover .gift-bow-3d {
  animation: giftBowFloat 1.4s ease-in-out infinite alternate;
}

.gift-interactive:hover .gift-tag {
  transform: rotate(3deg) translateY(-2px);
}

/* Tap/open sequence */
.gift-interactive.is-open .gift-scene {
  animation: giftSpinPop .62s cubic-bezier(.17,.88,.28,1);
}

.gift-interactive.is-open .gift-lid {
  transform: translateY(-45px) rotateX(-48deg) rotateZ(-3deg);
}

.gift-interactive.is-open .gift-tag {
  transform: translate(20px,-34px) rotate(18deg);
  opacity: 0;
}

.gift-interactive.is-open .gift-body {
  box-shadow:
    0 24px 45px rgba(95,64,25,.22),
    0 0 46px rgba(232,190,103,.25);
}

.gift-interactive.is-open .gift-qr-panel {
  transform: translate(-50%, -26px) scale(1);
  opacity: 1;
}

.gift-interactive.is-open .gift-sparkles i {
  animation: giftSparkleBurst .8s ease-out forwards;
}

.gift-interactive.is-open .gift-sparkles i:nth-child(2) { animation-delay:.05s; }
.gift-interactive.is-open .gift-sparkles i:nth-child(3) { animation-delay:.1s; }
.gift-interactive.is-open .gift-sparkles i:nth-child(4) { animation-delay:.14s; }
.gift-interactive.is-open .gift-sparkles i:nth-child(5) { animation-delay:.08s; }
.gift-interactive.is-open .gift-sparkles i:nth-child(6) { animation-delay:.18s; }

@keyframes giftBowFloat {
  from { transform: translateX(-50%) translateY(0) rotate(-1deg); }
  to   { transform: translateX(-50%) translateY(-4px) rotate(1deg); }
}

@keyframes giftSpinPop {
  0%   { transform: translateY(-6px) rotateY(0) scale(1); }
  35%  { transform: translateY(-10px) rotateY(10deg) scale(1.03); }
  70%  { transform: translateY(-4px) rotateY(-8deg) scale(1.04); }
  100% { transform: translateY(0) rotateY(0) scale(1); }
}

@keyframes giftSparkleBurst {
  0%   { transform: scale(.3) translate(0,0); opacity:0; }
  25%  { opacity:1; }
  100% { transform: scale(1.2) translateY(-34px); opacity:0; }
}

/* Large QR after the animation */
.gift-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(24,16,10,.66);
  backdrop-filter: blur(10px);
}

.gift-lightbox-card {
  position: relative;
  width: min(92vw, 430px);
  padding: 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.96), transparent 50%),
    #fffaf2;
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
  animation: giftLightboxIn .28s ease-out;
}

.gift-lightbox-card img {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.gift-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #692239;
  font-size: 24px;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  cursor: pointer;
}

@keyframes giftLightboxIn {
  from { transform: translateY(12px) scale(.96); opacity:0; }
  to   { transform: translateY(0) scale(1); opacity:1; }
}

@media (max-width: 640px) {
  .gift-grid-animated {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .gift-interactive {
    padding: 4px;
  }

  .gift-scene {
    width: min(46vw, 178px);
    height: 164px;
  }

  .gift-body {
    left: 10px;
    right: 10px;
    height: 100px;
    border-radius: 14px;
  }

  .gift-lid {
    left: 6px;
    right: 6px;
    top: 38px;
    height: 48px;
    border-radius: 14px;
  }

  .gift-bow-3d {
    width: 118px;
    top: -31px;
    transform: translateX(-50%) scale(.8);
  }

  .gift-tag {
    top: 72px;
    right: 7px;
    min-width: 66px;
    padding: 6px 10px;
    font-size: 20px;
  }

  .gift-qr-panel {
    width: 96px;
    bottom: 28px;
  }

  .gift-interactive.is-open .gift-qr-panel {
    transform: translate(-50%, -17px) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-interactive:hover .gift-bow-3d,
  .gift-interactive.is-open .gift-scene,
  .gift-interactive.is-open .gift-sparkles i {
    animation: none !important;
  }
}


/* =========================================================
   V2.4 SECTION BREATHING ROOM + SMART BOTTOM DOCK
   ========================================================= */

/* More separation between major webparts. */
.section {
  padding-top: 128px;
  padding-bottom: 128px;
}

/* Give each section a visual "landing zone" when navigated to. */
.section[id] {
  scroll-margin-top: 46px;
  scroll-margin-bottom: 130px;
}

/* Extra breathing room around the taller / interaction-heavy areas. */
#wedding,
#gallery,
#gifts,
#contact {
  padding-top: 142px;
  padding-bottom: 142px;
}

/* The dock hides smoothly while scrolling down / during auto-scroll.
   Scrolling upward or pausing brings it back. */
.bottom-nav {
  transition:
    transform .34s cubic-bezier(.22,.8,.24,1),
    opacity .26s ease,
    box-shadow .26s ease,
    background .26s ease;
  transform: translateY(0);
  opacity: 1;
}

.bottom-nav.is-hidden {
  transform: translateY(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
}

/* Keep a generous page-end buffer so the final RSVP section never sits
   underneath the dock when it is visible. */
.final-rsvp {
  padding-bottom: 176px;
}

@media (max-width: 900px) {
  .section {
    padding-top: 108px;
    padding-bottom: 108px;
  }

  #wedding,
  #gallery,
  #gifts,
  #contact {
    padding-top: 118px;
    padding-bottom: 118px;
  }
}

@media (max-width: 640px) {
  .section {
    padding-top: 82px;
    padding-bottom: 82px;
  }

  #wedding,
  #gallery,
  #gifts,
  #contact {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .section[id] {
    scroll-margin-top: 24px;
    scroll-margin-bottom: 105px;
  }

  .final-rsvp {
    padding-bottom: 136px;
  }

  .bottom-nav.is-hidden {
    transform: translateY(calc(100% + 20px));
  }
}


/* =========================================================
   V2.5 SOUTH INDIAN WEDDING NAV THEME
   ========================================================= */

.bottom-nav {
  border: 1px solid rgba(224, 185, 104, .58);
  background:
    linear-gradient(180deg,
      rgba(122, 16, 41, .96) 0%,
      rgba(105, 13, 34, .97) 100%);
  box-shadow:
    0 18px 42px rgba(76, 7, 25, .24),
    0 0 0 1px rgba(255, 235, 190, .08) inset;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.bottom-nav-item {
  color: rgba(242, 211, 145, .82);
}

.bottom-nav-item::before {
  content: '';
  position: absolute;
  inset: 8px 10px;
  border-radius: 14px;
  background: radial-gradient(
    circle at 50% 100%,
    rgba(224, 185, 104, .16),
    transparent 70%
  );
  opacity: 0;
  transform: scale(.88);
  transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;
}

.bottom-nav-item::after {
  background: linear-gradient(
    90deg,
    #b9822f,
    #f1d58f 50%,
    #b9822f
  );
  box-shadow: 0 0 10px rgba(229, 190, 103, .48);
}

.bottom-nav-item:hover,
.bottom-nav-item:focus-visible,
.bottom-nav-item.is-active {
  color: #ffe8ad;
  background: rgba(236, 199, 117, .08);
}

.bottom-nav-item:hover::before,
.bottom-nav-item:focus-visible::before,
.bottom-nav-item.is-active::before {
  opacity: 1;
  transform: scale(1);
}

.bottom-nav-item:hover svg,
.bottom-nav-item:focus-visible svg,
.bottom-nav-item.is-active svg {
  filter:
    drop-shadow(0 0 5px rgba(244, 210, 133, .34))
    drop-shadow(0 4px 7px rgba(60, 4, 18, .24));
}

.bottom-nav-item.is-active {
  color: #f7d783;
}

.bottom-nav-item.is-active::after {
  width: 31px;
}

/* Delicate antique-gold separators between navigation items */
.bottom-nav-item + .bottom-nav-item {
  border-left: 1px solid rgba(226, 188, 105, .13);
}

/* Match the separate music control to the wedding palette. */
.music-toggle {
  border: 1px solid rgba(213, 174, 99, .68);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.16), transparent 38%),
    linear-gradient(145deg, #7a1029, #5f0b20);
  color: #efd184;
  box-shadow:
    0 12px 28px rgba(83, 7, 28, .22),
    inset 0 0 0 1px rgba(255, 233, 180, .07);
}

.music-toggle:hover,
.music-toggle:focus-visible {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(145deg, #8a1632, #681027);
  color: #ffe7a6;
  box-shadow:
    0 16px 34px rgba(83, 7, 28, .28),
    0 0 20px rgba(213, 174, 99, .12);
}

@media (max-width: 640px) {
  .bottom-nav-item::before {
    inset: 6px 4px;
    border-radius: 11px;
  }

  .bottom-nav-item + .bottom-nav-item {
    border-left-color: rgba(226, 188, 105, .10);
  }
}


/* =========================================================
   V2.6 AUTO-SCROLL RELIABILITY FIX
   ========================================================= */

/* No visual changes required; auto-scroll now uses an accumulated
   absolute scroll position so sub-pixel movement isn't rounded away. */


/* =========================================================
   V2.7 MOBILE NAV FIX
   ========================================================= */

/* Mobile dock should sit fully inside the viewport and never overflow */
@media (max-width: 640px) {
  body {
    padding-bottom: 118px;
  }

  .bottom-nav {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    max-width: 520px;
    min-height: 58px;
    margin: 0;
    transform: translateX(-50%);
    border-radius: 16px;
    overflow: hidden;
  }

  .bottom-nav.is-hidden {
    transform: translate(-50%, calc(100% + 24px));
  }

  .bottom-nav-item {
    min-width: 0;
    padding: 8px 2px;
  }

  .bottom-nav-item svg {
    width: 21px;
    height: 21px;
  }

  .bottom-nav-item span {
    display: none;
  }

  .music-toggle {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
  }

  .final-rsvp {
    padding-bottom: 150px;
  }

  .section {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Extra-small phones */
@media (max-width: 390px) {
  .bottom-nav {
    width: calc(100vw - 16px);
    min-height: 56px;
  }

  .bottom-nav-item svg {
    width: 20px;
    height: 20px;
  }

  .music-toggle {
    right: 10px;
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}


/* =========================================================
   V2.8 INVITATION WORDING / HIERARCHY CLEANUP
   ========================================================= */

.parents-heading {
  margin-bottom: 42px;
}

.invitation-divider {
  width: min(620px, 82%);
  margin: 56px auto 46px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  color: #b17753;
}

.invitation-divider > span:not(.divider-mark) {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(177,119,83,.52),
    transparent
  );
}

.divider-mark {
  font-size: 20px;
}

.invitation-intro {
  max-width: 680px;
  margin: 0 auto 24px;
  color: #454545;
}

.invitation-meta {
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a1029;
}

@media (max-width: 640px) {
  .invitation-divider {
    margin: 42px auto 36px;
  }

  .invitation-intro {
    max-width: 92%;
  }

  .invitation-meta {
    font-size: 11px;
    line-height: 1.6;
  }
}


/* =========================================================
   V2.9 INVITATION ORDER EXACTLY AS APPROVED
   ========================================================= */

.invitation-main-heading {
  margin-bottom: 42px;
}

.invitation-main-heading h2 {
  margin-bottom: 14px;
}

.invitation-copy {
  margin-top: 44px;
}

.invitation-intro {
  max-width: 700px;
  margin: 0 auto 28px;
}

@media (max-width: 640px) {
  .invitation-main-heading {
    margin-bottom: 30px;
  }

  .invitation-copy {
    margin-top: 34px;
  }
}


/* =========================================================
   V3.0 MOBILE-FIRST LAYOUT CORRECTION
   Desktop stays unchanged; this block rebuilds the phone layout.
   ========================================================= */

@media (max-width: 640px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 16px;
  }

  .section {
    width: 100%;
    padding: 72px 18px;
  }

  .section-inner {
    width: 100%;
    max-width: none;
  }

  .section-heading {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 30px;
    padding: 0 4px;
  }

  .eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
  }

  h1 {
    font-size: clamp(44px, 13vw, 58px);
    line-height: .98;
  }

  h2 {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.05;
  }

  h3 {
    font-size: 20px;
  }

  p,
  .lead {
    font-size: 15px;
    line-height: 1.65;
  }

  .script-line {
    font-size: 28px;
    line-height: 1.08;
    margin-bottom: 18px;
  }

  /* HERO */
  .hero-section .two-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .hero-section .media-placeholder {
    width: 100%;
    min-height: 390px;
    order: 1;
  }

  .hero-section .content-block {
    width: 100%;
    max-width: none;
    order: 2;
    text-align: center;
  }

  .hero-section .countdown-grid {
    width: 100%;
    max-width: none;
    margin: 24px auto;
  }

  .countdown-grid > div {
    padding: 15px 5px;
  }

  .countdown-grid strong {
    font-size: 22px;
  }

  .countdown-grid span {
    font-size: 9px;
  }

  /* INVITATION / PARENTS */
  #invitation {
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .invitation-main-heading {
    margin-bottom: 28px;
  }

  .family-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 30px;
  }

  .family-block {
    width: 100%;
    padding: 24px 18px;
    border-radius: 18px;
  }

  .family-block p {
    margin-bottom: 0;
  }

  .script-label {
    font-size: 31px;
  }

  .invitation-copy {
    width: 100%;
    margin-top: 36px;
    padding: 0;
  }

  .invitation-copy h2 {
    font-size: 40px;
  }

  .invitation-intro {
    width: 100%;
    max-width: 100%;
    padding: 0 8px;
    font-size: 15px;
  }

  .couple-script {
    font-size: clamp(36px, 11vw, 48px);
    line-height: 1.12;
    padding: 0 4px;
    overflow-wrap: anywhere;
  }

  .amp {
    margin: 8px 0;
    font-size: 38px;
  }

  .invitation-meta {
    padding: 0 12px;
    font-size: 10px;
    line-height: 1.6;
  }

  /* STORY */
  #story .two-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  #story .media-placeholder {
    width: 100%;
    min-height: 330px;
    order: 1;
  }

  #story .content-block {
    width: 100%;
    max-width: none;
    order: 2;
    text-align: center;
  }

  /* SCHEDULE */
  #wedding {
    padding: 84px 16px;
  }

  .timeline {
    width: 100%;
    max-width: none;
  }

  .timeline-item {
    grid-template-columns: 74px 18px minmax(0,1fr);
    gap: 9px;
    min-height: 82px;
  }

  .schedule-time {
    text-align: right;
  }

  .schedule-time strong {
    font-size: 13px;
    white-space: nowrap;
  }

  .schedule-time span {
    font-size: 11px;
    white-space: nowrap;
  }

  .schedule-label {
    min-width: 0;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
  }

  .schedule-label > span:last-child {
    overflow-wrap: anywhere;
  }

  .schedule-icon {
    flex: 0 0 20px;
    width: 20px;
    font-size: 18px;
  }

  /* VENUE */
  #venue .two-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  #venue .content-block {
    width: 100%;
    max-width: none;
    text-align: center;
  }

  #venue .button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  #venue .button-row .btn {
    width: 100%;
    padding: 0 12px;
    font-size: 13px;
  }

  #venue .button-row .btn:last-child {
    grid-column: 1 / -1;
  }

  #venue .media-placeholder {
    width: 100%;
    min-height: 300px;
  }

  #venue > .section-inner > .two-col,
  #venue .two-col {
    grid-template-columns: 1fr;
  }

  /* GALLERY */
  #gallery {
    padding-left: 12px;
    padding-right: 12px;
  }

  .carousel-shell {
    width: 100%;
    max-width: 100%;
    padding: 0 26px;
  }

  .carousel-track {
    height: 350px;
  }

  .carousel-slide {
    width: 72%;
    max-width: 280px;
  }

  .carousel-nav {
    width: 36px;
    height: 36px;
  }

  /* GIFTS */
  #gifts {
    padding-left: 12px;
    padding-right: 12px;
  }

  .gift-grid-animated {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }

  .gift-interactive {
    width: 100%;
    min-width: 0;
  }

  .gift-scene {
    width: 100%;
    max-width: 178px;
  }

  /* CONTACT */
  #contact {
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-grid {
    width: 100%;
  }

  .contact-row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
  }

  .contact-row > div:first-child {
    text-align: center;
  }

  .contact-actions {
    width: 100%;
    justify-content: center;
  }

  .icon-btn {
    flex: 1 1 0;
    max-width: 150px;
    min-width: 0;
  }

  /* RSVP */
  .final-rsvp {
    padding: 74px 18px 148px;
  }

  .final-rsvp h2 {
    font-size: 36px;
    line-height: 1.06;
  }

  .final-rsvp .script-line {
    font-size: 27px;
  }

  /* MOBILE DOCK */
  .bottom-nav {
    left: 50%;
    right: auto;
    width: calc(100vw - 20px);
    max-width: 430px;
    min-height: 58px;
    transform: translateX(-50%);
  }

  .bottom-nav.is-hidden {
    transform: translate(-50%, calc(100% + 24px));
  }

  .bottom-nav-item {
    min-width: 0;
    padding: 8px 1px;
  }

  .bottom-nav-item::before {
    inset: 5px 2px;
  }

  .bottom-nav-item svg {
    width: 20px;
    height: 20px;
  }

  .music-toggle {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .timeline-item {
    grid-template-columns: 68px 16px minmax(0,1fr);
    gap: 7px;
  }

  .schedule-time strong {
    font-size: 12px;
  }

  .schedule-label {
    font-size: 13px;
  }

  .gift-scene {
    max-width: 164px;
  }

  .bottom-nav {
    width: calc(100vw - 12px);
  }
}


/* =========================================================
   V3.1 FIRST-SCREEN / HERO VIEWPORT FIT
   Goal: on mobile, the complete opening section + bottom nav
   fits within the initial visible frame.
   ========================================================= */

@media (max-width: 640px) {
  .hero-section {
    min-height: calc(100svh - 76px);
    height: calc(100svh - 76px);
    padding: 18px 16px 12px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }

  .hero-section .section-inner {
    height: 100%;
  }

  .hero-section .two-col {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 42%) minmax(0, 58%);
    gap: 12px;
    align-items: stretch;
  }

  .hero-section .media-placeholder,
  .hero-section .hero-placeholder {
    min-height: 0;
    height: 100%;
    width: 100%;
    border-radius: 18px;
  }

  .hero-section .content-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
    text-align: center;
  }

  .hero-section .eyebrow {
    margin-bottom: 5px;
    font-size: 9px;
    letter-spacing: .2em;
  }

  .hero-section h1 {
    margin: 0 0 4px;
    font-size: clamp(36px, 10.8vw, 48px);
    line-height: .94;
  }

  .hero-section .script-line {
    margin: 0 0 7px;
    font-size: clamp(21px, 6vw, 27px);
    line-height: 1;
  }

  .hero-section p {
    margin: 2px 0;
    font-size: 12px;
    line-height: 1.35;
  }

  .hero-section .lead {
    font-size: 13px;
  }

  .hero-section .countdown-grid {
    width: min(100%, 360px);
    margin: 10px auto;
    border-radius: 12px;
  }

  .hero-section .countdown-grid > div {
    padding: 7px 3px;
  }

  .hero-section .countdown-grid strong {
    font-size: 17px;
  }

  .hero-section .countdown-grid span {
    margin-top: 1px;
    font-size: 7px;
  }

  .hero-section .btn {
    min-height: 36px;
    padding: 0 17px;
    font-size: 11px;
  }

  /* Ensure the dock itself remains part of the visible opening composition. */
  .bottom-nav {
    bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .music-toggle {
    width: 38px;
    height: 38px;
    right: 11px;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

/* Shorter phones: compress the hero artwork a little more. */
@media (max-width: 640px) and (max-height: 760px) {
  .hero-section .two-col {
    grid-template-rows: minmax(0, 38%) minmax(0, 62%);
    gap: 8px;
  }

  .hero-section h1 {
    font-size: clamp(34px, 10vw, 44px);
  }

  .hero-section .script-line {
    font-size: 21px;
  }

  .hero-section .countdown-grid {
    margin: 7px auto;
  }

  .hero-section .countdown-grid > div {
    padding: 5px 2px;
  }
}

/* Very small phones */
@media (max-width: 390px) and (max-height: 700px) {
  .hero-section {
    padding-top: 12px;
  }

  .hero-section .two-col {
    grid-template-rows: minmax(0, 35%) minmax(0, 65%);
  }

  .hero-section h1 {
    font-size: 33px;
  }

  .hero-section .script-line {
    font-size: 19px;
  }

  .hero-section p {
    font-size: 11px;
  }
}

/* =========================================================
   V4 GRAND SOUTH INDIAN DESIGN + FINAL MOBILE HERO FIT
   ========================================================= */

:root {
  --maroon:#741127;
  --maroon-deep:#4c0718;
  --maroon-soft:#8f1f3b;
  --gold:#c99744;
  --gold-bright:#e3bd72;
  --cream:#fff8e9;
  --ivory:#fffdf7;
  --ink-warm:#33251f;
  --line-gold:rgba(201,151,68,.34);
}

body {
  background:
    radial-gradient(circle at 12% 4%, rgba(201,151,68,.08), transparent 25%),
    #fffaf0;
  color:var(--ink-warm);
}

.site-shell {
  position:relative;
  overflow:hidden;
  background:#fffaf0;
}

.wedding-section {
  position:relative;
  isolation:isolate;
  border-bottom:1px solid rgba(201,151,68,.22);
}

.wedding-section::before,
.wedding-section::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:180px;
  height:180px;
  pointer-events:none;
  opacity:.17;
  background:url('/assets/corner-botanical.svg') center/contain no-repeat;
}

.wedding-section::before { left:-34px; top:-28px; }
.wedding-section::after { right:-34px; bottom:-28px; transform:rotate(180deg); }

.wedding-frame {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(201,151,68,.65);
  border-radius:28px;
  background:#f6ead6;
  box-shadow:
    0 24px 55px rgba(79,32,16,.16),
    inset 0 0 0 6px rgba(255,248,233,.78),
    inset 0 0 0 7px rgba(201,151,68,.26);
}

.wedding-frame::after {
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,236,191,.65);
  border-radius:20px;
  pointer-events:none;
}

.wedding-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.ornate-copy-card,
.ornate-panel {
  position:relative;
  border:1px solid var(--line-gold);
  background:rgba(255,253,247,.9);
  box-shadow:0 22px 55px rgba(87,49,20,.10);
  backdrop-filter:blur(5px);
}

.ornate-copy-card {
  padding:42px;
  border-radius:24px;
}

.eyebrow {
  color:var(--maroon);
}

h1,h2,h3 { color:#2f211c; }

.script-line,
.script-section-title,
.script-label {
  color:#a86640;
}

.btn-primary {
  background:linear-gradient(135deg,var(--maroon-deep),var(--maroon));
  border-color:rgba(227,189,114,.45);
  box-shadow:0 12px 28px rgba(116,17,39,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}

.btn-primary:hover {
  background:linear-gradient(135deg,var(--maroon),#981f43);
}

.btn-secondary {
  border-color:rgba(201,151,68,.48);
  background:rgba(255,253,247,.88);
  color:#5f3c23;
}

/* Hero */
.hero-section {
  min-height:100vh;
  padding-top:clamp(34px,6vh,72px);
  padding-bottom:clamp(120px,14vh,150px);
  background:
    radial-gradient(circle at 78% 14%, rgba(201,151,68,.15), transparent 28%),
    linear-gradient(145deg,#fffaf0,#fffdf9 58%,#f9ecd5);
}

.hero-layout { gap:clamp(36px,6vw,78px); }
.hero-art { height:min(68vh,720px); min-height:520px; }
.hero-art img { object-position:center 53%; }
.hero-art-glow {
  position:absolute;
  inset:auto 8% -16% 8%;
  height:35%;
  background:radial-gradient(ellipse,rgba(227,189,114,.3),transparent 66%);
  filter:blur(16px);
  pointer-events:none;
}
.hero-copy { position:relative; }
.hero-meta p { margin:4px 0; }
.hero-rsvp { min-width:150px; }

.hero-section .countdown-grid {
  border-color:rgba(201,151,68,.4);
  background:rgba(255,253,247,.84);
  box-shadow:0 12px 32px rgba(98,58,30,.08);
}
.hero-section .countdown-grid > div { border-color:rgba(201,151,68,.28); }

/* Invitation */
.invitation-section {
  background:
    linear-gradient(rgba(255,248,233,.78),rgba(255,248,233,.86)),
    url('/assets/parents-1920.webp') center/cover no-repeat;
}
.invitation-panel {
  padding:clamp(38px,6vw,72px);
  border-radius:30px;
}
.invitation-panel::before {
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  color:var(--gold);
  font-size:24px;
}
.invitation-section .family-block {
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,249,235,.78));
  border-color:rgba(201,151,68,.38);
  box-shadow:0 12px 30px rgba(93,56,25,.08);
}
.invitation-meta {
  margin-top:18px;
  color:#74593f;
  letter-spacing:.05em;
}

/* Story / venue image compositions */
.story-section { background:linear-gradient(135deg,#fffaf0,#f9edd9); }
.story-art,.venue-art { min-height:500px; height:620px; }
.story-art img { object-position:center center; }
.venue-section { background:linear-gradient(135deg,#fffdf8,#f7ead3); }
.venue-art img { object-position:center; }

/* Schedule */
.schedule-section {
  background:
    linear-gradient(rgba(255,251,242,.91),rgba(255,251,242,.94)),
    url('/assets/lamp-1920.webp') center/cover no-repeat;
}
.schedule-section .section-inner {
  max-width:920px;
  padding:52px clamp(22px,5vw,64px);
  border:1px solid rgba(201,151,68,.34);
  border-radius:30px;
  background:rgba(255,253,247,.84);
  box-shadow:0 24px 54px rgba(90,53,24,.10);
}
.timeline-dot {
  background:linear-gradient(var(--gold-bright),var(--gold));
  box-shadow:0 0 0 4px rgba(201,151,68,.15);
}
.timeline-line { background:rgba(201,151,68,.46); }
.schedule-time { color:var(--maroon); }

/* Gallery */
.gallery-section {
  background:
    radial-gradient(circle at 15% 50%,rgba(201,151,68,.12),transparent 28%),
    radial-gradient(circle at 85% 30%,rgba(116,17,39,.06),transparent 28%),
    #fffaf0;
}
.carousel-slide img {
  border:1px solid rgba(201,151,68,.58);
  box-shadow:0 22px 50px rgba(71,35,17,.18);
}
.carousel-nav {
  border-color:rgba(201,151,68,.48);
  color:var(--maroon);
  background:#fff9ed;
}

/* Gifts */
.gifts-section {
  background:
    linear-gradient(rgba(255,249,237,.91),rgba(255,249,237,.95)),
    url('/assets/elephant-1920.webp') center/cover no-repeat;
}
.gifts-section .section-inner {
  padding:50px clamp(18px,5vw,58px);
  border-radius:30px;
  background:rgba(255,252,244,.78);
  border:1px solid rgba(201,151,68,.34);
  box-shadow:0 24px 55px rgba(87,49,20,.10);
}

/* Contact */
.contact-section { background:linear-gradient(145deg,#fffaf0,#f8ead4); }
.contact-row {
  border-color:rgba(201,151,68,.36);
  background:rgba(255,253,247,.82);
  box-shadow:0 10px 24px rgba(91,53,22,.07);
}

/* RSVP */
.rsvp-section,
.final-rsvp.rsvp-section {
  min-height:580px;
  display:grid;
  align-items:center;
  color:#fff8eb;
  background:
    linear-gradient(90deg,rgba(63,5,20,.90),rgba(91,9,31,.78)),
    url('/assets/rsvp-elephant-1920.webp') center/cover no-repeat;
}
.rsvp-section h2,
.rsvp-section .eyebrow { color:#fff8eb; }
.rsvp-section .script-line { color:#f0c881; }
.rsvp-section .btn-primary {
  background:#fff7e7;
  color:var(--maroon);
  border-color:#e8c47a;
}

/* Grand maroon + antique gold dock */
.bottom-nav {
  border-color:rgba(227,189,114,.54);
  background:linear-gradient(180deg,rgba(132,18,48,.96),rgba(105,10,35,.97));
  box-shadow:0 18px 40px rgba(66,7,25,.30), inset 0 1px 0 rgba(255,255,255,.10);
}
.bottom-nav-item { color:rgba(244,207,133,.88); }
.bottom-nav-item:hover,
.bottom-nav-item:focus-visible,
.bottom-nav-item.is-active {
  color:#ffe8a8;
  background:rgba(255,255,255,.06);
}
.bottom-nav-item::after { background:#e6b85f; }
.music-toggle {
  border-color:rgba(227,189,114,.66);
  color:#e3bd72;
  background:linear-gradient(145deg,var(--maroon),#861b3a);
  box-shadow:0 14px 32px rgba(74,8,27,.28);
}

/* =========================
   FINAL MOBILE FIRST SCREEN
   Includes bottom nav within visible viewport
   ========================= */
@media (max-width: 640px) {
  .wedding-section::before,
  .wedding-section::after { width:110px; height:110px; opacity:.12; }

  .hero-section {
    height:100svh;
    min-height:100svh;
    padding:10px 14px calc(88px + env(safe-area-inset-bottom));
    overflow:hidden;
    display:flex;
    align-items:stretch;
  }

  .hero-section .section-inner,
  .hero-layout { height:100%; min-height:0; }

  .hero-section .two-col,
  .hero-layout {
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,39%) minmax(0,61%);
    gap:7px;
    align-items:stretch;
  }

  .hero-art,
  .hero-section .hero-art {
    min-height:0;
    height:100%;
    border-radius:20px;
  }
  .hero-art::after { inset:7px; border-radius:14px; }
  .hero-art img {
    object-position:center 56%;
  }

  .hero-copy,
  .hero-section .content-block {
    min-height:0;
    width:100%;
    padding:0 2px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .hero-section .eyebrow {
    margin:0 0 3px;
    font-size:8.5px;
    letter-spacing:.23em;
  }
  .hero-section h1 {
    margin:0 0 2px;
    font-size:clamp(34px,10.5vw,46px);
    line-height:.91;
  }
  .hero-section .script-line {
    margin:1px 0 5px;
    font-size:clamp(19px,5.7vw,25px);
    line-height:.98;
  }
  .hero-meta { margin:0; }
  .hero-section p {
    margin:1px 0;
    font-size:11px;
    line-height:1.25;
  }
  .hero-section .lead { font-size:12px; }

  .hero-section .countdown-grid {
    width:min(100%,350px);
    margin:7px auto 6px;
    border-radius:12px;
  }
  .hero-section .countdown-grid > div { padding:5px 2px; }
  .hero-section .countdown-grid strong { font-size:16px; line-height:1; }
  .hero-section .countdown-grid span { margin-top:2px; font-size:7px; }
  .hero-section .btn,
  .hero-rsvp {
    min-height:34px;
    padding:0 18px;
    margin-top:1px;
    font-size:10.5px;
  }

  .bottom-nav {
    left:50%;
    right:auto;
    width:calc(100vw - 20px);
    max-width:430px;
    min-height:58px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    transform:translateX(-50%);
  }
  .bottom-nav.is-hidden { transform:translate(-50%,calc(100% + 24px)); }
  .music-toggle {
    width:40px;
    height:40px;
    right:12px;
    bottom:calc(74px + env(safe-area-inset-bottom));
  }

  .invitation-panel { padding:40px 16px 34px; border-radius:22px; }
  .ornate-copy-card { padding:28px 20px; border-radius:20px; }
  .story-art,.venue-art { height:360px; min-height:0; }
  .schedule-section .section-inner,
  .gifts-section .section-inner { padding:34px 14px; border-radius:22px; }
  .rsvp-section,.final-rsvp.rsvp-section { min-height:500px; }
}

@media (max-width:640px) and (max-height:760px) {
  .hero-section .two-col,
  .hero-layout { grid-template-rows:minmax(0,35%) minmax(0,65%); gap:5px; }
  .hero-section h1 { font-size:32px; }
  .hero-section .script-line { font-size:18px; }
  .hero-section .countdown-grid { margin:5px auto 4px; }
  .hero-section .countdown-grid > div { padding:4px 2px; }
  .hero-section .btn,.hero-rsvp { min-height:31px; }
}

@media (max-width:390px) and (max-height:700px) {
  .hero-section { padding-top:7px; }
  .hero-section .two-col,
  .hero-layout { grid-template-rows:minmax(0,32%) minmax(0,68%); }
  .hero-section h1 { font-size:30px; }
  .hero-section .script-line { font-size:17px; }
  .hero-section p { font-size:10px; }
  .hero-section .countdown-grid strong { font-size:14px; }
}

/* Contact person labels */
.contact-person {
  margin: 4px 0 2px !important;
  color: var(--maroon) !important;
  font-weight: 650;
}
.contact-person span {
  color: var(--muted);
  font-weight: 500;
  font-size: .88em;
}
.contact-number {
  margin: 0 !important;
  color: var(--muted) !important;
}

/* =========================================================
   ========================================================= */
.site-shell{position:relative;overflow:hidden;background:#fff8e9}
.wedding-atmosphere{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.atmosphere-petals i{
  --size:calc(5px + (var(--i) % 5) * 2px);
  position:absolute;top:-10vh;left:calc((var(--i) * 41) % 100 * 1%);
  width:var(--size);height:calc(var(--size) * .65);
  border-radius:90% 10% 75% 25%;
  background:linear-gradient(135deg,#c51e42,#791027);
  opacity:.48;
  filter:drop-shadow(0 2px 2px rgba(59,0,16,.12));
  animation:v5PetalFall calc(9s + (var(--i) % 8) * 1.1s) linear infinite;
  animation-delay:calc(var(--i) * -0.73s);
}
@keyframes v5PetalFall{
  0%{transform:translate3d(0,-10vh,0) rotate(0)}
  50%{transform:translate3d(calc((var(--i) % 9 - 4) * 13px),52vh,0) rotate(370deg)}
  100%{transform:translate3d(calc((var(--i) % 7 - 3) * 18px),112vh,0) rotate(740deg)}
}
.atmosphere-sparkles b{
  position:absolute;left:calc((var(--i) * 29) % 97 * 1%);top:calc((var(--i) * 43) % 89 * 1%);
  width:3px;height:3px;border-radius:50%;background:#f4cf82;
  box-shadow:0 0 11px rgba(244,207,130,.9);opacity:0;
  animation:v5Sparkle calc(2.6s + (var(--i) % 6) * .55s) ease-in-out infinite;
  animation-delay:calc(var(--i) * -.31s);
}
@keyframes v5Sparkle{0%,100%{opacity:0;transform:scale(.45)}45%{opacity:.75;transform:scale(1.15)}70%{opacity:.16;transform:translateY(-12px)}}

.hero-cinematic{
  position:relative;height:100svh;min-height:680px;padding:24px;overflow:hidden;
  display:grid;place-items:center;background:#2b080f;color:#fff9ed;isolation:isolate;
}
.hero-scene-bg{
  position:absolute;inset:-6%;z-index:-5;
  background:url('/assets/mandapam-v5.png') center 48%/cover no-repeat;
  transform:scale(1.06);animation:v5KenBurns 18s ease-in-out infinite alternate;
}
@keyframes v5KenBurns{from{transform:scale(1.06) translate3d(-.4%,.2%,0)}to{transform:scale(1.15) translate3d(.8%,-.7%,0)}}
.hero-scene-glow{position:absolute;inset:-18%;z-index:-4;pointer-events:none;background:radial-gradient(circle at 50% 44%,rgba(255,225,158,.26),transparent 32%),linear-gradient(120deg,transparent 26%,rgba(255,244,207,.09) 46%,transparent 65%);mix-blend-mode:screen;animation:v5GlowDrift 10s ease-in-out infinite alternate}
@keyframes v5GlowDrift{to{transform:translate3d(2.8%,-1%,0) scale(1.04)}}
.hero-cinematic::after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(42,3,14,.15),transparent 26%,transparent 65%,rgba(36,2,11,.34)),radial-gradient(circle at center,transparent 42%,rgba(28,2,9,.20) 100%)}
.hero-cinematic-inner{width:100%;height:100%;display:grid;place-items:center;position:relative;z-index:2}
.hero-glass-panel{width:min(760px,88vw);margin:0 auto;padding:clamp(26px,4vw,52px);text-align:center;align-items:center;border:1px solid rgba(238,202,132,.58);border-radius:28px;background:linear-gradient(180deg,rgba(83,8,27,.54),rgba(62,5,20,.32));box-shadow:0 24px 80px rgba(0,0,0,.28),inset 0 0 46px rgba(255,222,154,.05);backdrop-filter:blur(3px);animation:v5HeroPanelIn 1.65s ease both .35s}
@keyframes v5HeroPanelIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
.hero-cinematic .eyebrow,.hero-cinematic h1,.hero-cinematic p{color:#fff8eb}
.hero-cinematic h1{font-size:clamp(58px,8vw,112px);line-height:.88;text-shadow:0 4px 28px rgba(0,0,0,.34)}
.hero-cinematic h1 span{color:#edc77f}
.hero-cinematic .script-line{color:#f2cf8e}
.hero-cinematic .countdown-grid{background:rgba(255,249,235,.09);border-color:rgba(232,193,117,.42);backdrop-filter:blur(5px)}
.hero-cinematic .countdown-grid strong,.hero-cinematic .countdown-grid span{color:#fff8eb}
.hero-flame{position:absolute;z-index:1;width:18px;height:34px;background:radial-gradient(ellipse at center bottom,#fff6ab 0 22%,#ffb31d 38%,#f66a00 64%,rgba(255,100,0,0) 72%);filter:drop-shadow(0 0 8px rgba(255,153,31,.85));transform-origin:center bottom;animation:v5Flicker .18s ease-in-out infinite alternate;pointer-events:none}
@keyframes v5Flicker{from{transform:scale(.9,1.05) rotate(-1.4deg);opacity:.82}to{transform:scale(1.08,.94) rotate(1.6deg);opacity:1}}
.hero-flame-1{left:24%;top:55%}.hero-flame-2{left:38%;top:56.4%}.hero-flame-3{left:60%;top:56.4%}.hero-flame-4{left:75%;top:55%}

/* Retire the old soft generated section backgrounds in V5. */
.invitation-section{background:radial-gradient(circle at 50% 15%,#fffdf6 0,#fff8e9 46%,#f5e7ca 100%)!important}
.schedule-section{background:linear-gradient(180deg,#fffaf0,#f3e2c1)!important}
.gifts-section{background:linear-gradient(145deg,#fff9ee,#f4e2bf)!important}
.rsvp-section,.final-rsvp.rsvp-section{background:radial-gradient(circle at 50% 25%,#8a1833 0,#671024 44%,#420814 100%)!important;position:relative;overflow:hidden}
.rsvp-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 20%,rgba(237,199,127,.15),transparent 42%),repeating-radial-gradient(circle at 50% 120%,transparent 0 47px,rgba(220,177,94,.10) 48px 49px);animation:v5RsvpGlow 6s ease-in-out infinite alternate}
@keyframes v5RsvpGlow{to{transform:scale(1.035);opacity:.72}}

@media(max-width:640px){
  .hero-cinematic{height:100svh;min-height:100svh;padding:10px 14px calc(88px + env(safe-area-inset-bottom))}
  .hero-scene-bg{inset:-10%;background-position:center 50%;animation-duration:15s}
  .hero-glass-panel{width:100%;max-width:390px;padding:18px 12px;border-radius:20px;background:linear-gradient(180deg,rgba(83,8,27,.46),rgba(62,5,20,.27));backdrop-filter:blur(2px)}
  .hero-cinematic h1{font-size:clamp(44px,13vw,61px);line-height:.88}
  .hero-cinematic .eyebrow{font-size:8.5px;margin-bottom:5px}
  .hero-cinematic .script-line{font-size:18px;margin:3px 0 6px}
  .hero-cinematic p{font-size:10.5px;line-height:1.22;margin:1px 0}
  .hero-cinematic .lead{font-size:12px}
  .hero-cinematic .countdown-grid{width:min(100%,350px);margin:7px auto 6px}
  .hero-cinematic .countdown-grid>div{padding:5px 2px}
  .hero-cinematic .countdown-grid strong{font-size:16px;line-height:1}
  .hero-cinematic .countdown-grid span{font-size:7px;margin-top:2px}
  .hero-cinematic .btn{min-height:34px;padding:0 18px;font-size:10.5px;margin-top:2px}
  .hero-flame{width:12px;height:24px}
  .hero-flame-1{left:20%;top:57%}.hero-flame-2{left:37%;top:58%}.hero-flame-3{left:61%;top:58%}.hero-flame-4{left:79%;top:57%}
  .wedding-atmosphere{z-index:8}
}
@media(max-width:640px) and (max-height:760px){.hero-glass-panel{padding:13px 10px}.hero-cinematic h1{font-size:40px}.hero-cinematic .script-line{font-size:16px}.hero-cinematic .countdown-grid{margin:5px auto 4px}.hero-cinematic .btn{min-height:31px}}
@media(prefers-reduced-motion:reduce){.wedding-atmosphere{display:none}.hero-scene-bg,.hero-scene-glow,.hero-flame,.rsvp-section::before{animation:none!important}}

/* =========================================================
   ========================================================= */
.wedding-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.wedding-section > .section-inner {
  position:relative;
  z-index:4;
}

/* Only hide sections once JS has successfully initialized the reveal system. */
body.motion-ready .wedding-section:not(.hero-section) > .section-inner {
  opacity:0;
  transform:translateY(34px) scale(.992);
  transition:opacity .95s ease, transform 1.05s cubic-bezier(.2,.8,.2,1);
}
body.motion-ready .wedding-section.motion-visible > .section-inner {
  opacity:1;
  transform:none;
}

.section-motion {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.section-motion-glow {
  position:absolute;
  width:68vw;
  height:68vw;
  min-width:520px;
  min-height:520px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(225,184,105,.17),rgba(225,184,105,.04) 36%,transparent 67%);
  filter:blur(4px);
  animation:sectionGlowBreath 6s ease-in-out infinite alternate;
}
@keyframes sectionGlowBreath {
  to { transform:translate(-50%,-50%) scale(1.10); opacity:.62; }
}

.section-motion-petals i {
  --size:calc(8px + (var(--i) % 5) * 2px);
  position:absolute;
  top:-12%;
  left:calc((var(--i) * 47) % 97 * 1%);
  width:var(--size);
  height:calc(var(--size) * .62);
  border-radius:92% 8% 76% 24%;
  background:linear-gradient(135deg,#d4264c,#7b0e29 74%);
  opacity:.72;
  filter:drop-shadow(0 3px 2px rgba(73,8,26,.16));
  animation:sectionPetalFall calc(8s + (var(--i) % 7) * 1.25s) linear infinite;
  animation-delay:calc(var(--i) * -.83s);
}
@keyframes sectionPetalFall {
  0%   { transform:translate3d(0,-8vh,0) rotate(0deg) scale(.7); }
  45%  { transform:translate3d(calc((var(--i) % 9 - 4) * 15px),48vh,0) rotate(320deg) scale(1); }
  100% { transform:translate3d(calc((var(--i) % 7 - 3) * 24px),112vh,0) rotate(760deg) scale(.82); }
}

.section-motion-sparkles b {
  position:absolute;
  left:calc((var(--i) * 31) % 96 * 1%);
  top:calc((var(--i) * 43) % 92 * 1%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#f4cb77;
  box-shadow:0 0 12px rgba(244,203,119,.94);
  opacity:0;
  animation:sectionSparkle calc(2.7s + (var(--i) % 5) * .7s) ease-in-out infinite;
  animation-delay:calc(var(--i) * -.37s);
}
@keyframes sectionSparkle {
  0%,100% { opacity:0; transform:translateY(9px) scale(.35); }
  48% { opacity:.85; transform:translateY(0) scale(1.25); }
  72% { opacity:.18; transform:translateY(-18px) scale(.8); }
}

.section-motion-leaf {
  position:absolute;
  width:180px;
  height:260px;
  border-radius:100% 0 100% 0;
  background:linear-gradient(135deg,rgba(43,89,45,.55),rgba(110,145,77,.34));
  opacity:.28;
  filter:drop-shadow(0 8px 18px rgba(31,58,31,.08));
  transform-origin:bottom center;
  animation:sectionLeafSway 4.6s ease-in-out infinite alternate;
}
.section-motion-leaf-left { left:-86px; bottom:5%; transform:rotate(-18deg); }
.section-motion-leaf-right { right:-90px; top:8%; transform:scaleX(-1) rotate(-15deg); animation-delay:-2.2s; }
@keyframes sectionLeafSway {
  from { margin-left:-4px; rotate:-4deg; }
  to   { margin-left:5px; rotate:4deg; }
}

.section-motion-ornament {
  position:absolute;
  color:rgba(201,151,68,.18);
  font-size:clamp(90px,13vw,190px);
  line-height:1;
  animation:ornamentTurn 18s linear infinite;
}
.ornament-left { left:-24px; top:7%; }
.ornament-right { right:-24px; bottom:4%; animation-direction:reverse; }
@keyframes ornamentTurn { to { transform:rotate(360deg); } }

/* Each section gets its own motion personality. */
.section-motion-story .section-motion-glow { left:72%; background:radial-gradient(circle,rgba(230,177,83,.22),transparent 66%); }
.section-motion-story .section-motion-leaf-left { bottom:12%; }
.section-motion-schedule .section-motion-petals i:nth-child(3n) { opacity:.35; }
.section-motion-schedule .section-motion-ornament { color:rgba(145,94,35,.13); }
.section-motion-venue .section-motion-glow { left:76%; top:42%; }
.section-motion-gallery .section-motion-sparkles b { width:5px; height:5px; }
.section-motion-gifts .section-motion-glow { background:radial-gradient(circle,rgba(237,195,112,.27),transparent 64%); }
.section-motion-contact .section-motion-petals i { opacity:.52; }
.section-motion-rsvp .section-motion-leaf { opacity:.12; }
.section-motion-rsvp .section-motion-ornament { color:rgba(239,202,128,.16); }
.section-motion-rsvp .section-motion-petals i { background:linear-gradient(135deg,#ed6a7f,#a0193e); opacity:.78; }

/* Make the sections feel alive rather than only having particles over them. */
.story-art {
  overflow:hidden;
  animation:storyCardFloat 7s ease-in-out infinite alternate;
}
.story-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  animation:storyImageDrift 15s ease-in-out infinite alternate;
}
@keyframes storyCardFloat { to { transform:translateY(-7px); box-shadow:0 30px 68px rgba(91,50,24,.18); } }
@keyframes storyImageDrift { from { transform:scale(1.03) translateX(-1%); } to { transform:scale(1.11) translateX(2%); } }

.schedule-section .timeline-item {
  transition:transform .32s ease, background .32s ease, box-shadow .32s ease;
  border-radius:14px;
}
.schedule-section .timeline-item:hover {
  transform:translateX(7px);
  background:rgba(255,253,247,.62);
  box-shadow:0 10px 24px rgba(91,50,24,.07);
}
.schedule-section.motion-visible .timeline-item {
  animation:scheduleReveal .65s ease both;
}
.schedule-section.motion-visible .timeline-item:nth-child(2){animation-delay:.08s}
.schedule-section.motion-visible .timeline-item:nth-child(3){animation-delay:.16s}
.schedule-section.motion-visible .timeline-item:nth-child(4){animation-delay:.24s}
.schedule-section.motion-visible .timeline-item:nth-child(5){animation-delay:.32s}
.schedule-section.motion-visible .timeline-item:nth-child(6){animation-delay:.40s}
@keyframes scheduleReveal { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:none; } }

.venue-art { overflow:hidden; animation:venueFloat 8s ease-in-out infinite alternate; }
.venue-art img { width:100%; height:100%; object-fit:cover; animation:venuePan 16s ease-in-out infinite alternate; }
@keyframes venueFloat { to { transform:translateY(-6px); } }
@keyframes venuePan { from { transform:scale(1.02) translateX(-1%); } to { transform:scale(1.08) translateX(1.5%); } }

.gallery-section .carousel-slide.is-current { animation:galleryCurrentFloat 4.4s ease-in-out infinite; }
@keyframes galleryCurrentFloat {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  50% { transform:translate(-50%,calc(-50% - 7px)) scale(1.012); }
}

.gifts-section .gift-interactive { animation:giftAmbientFloat 4.2s ease-in-out infinite; }
.gifts-section .gift-interactive:nth-child(2){animation-delay:-2.1s}
@keyframes giftAmbientFloat { 50% { transform:translateY(-8px); } }

.contact-section .contact-row { transition:transform .3s ease, box-shadow .3s ease; }
.contact-section .contact-row:hover { transform:translateY(-6px); box-shadow:0 19px 40px rgba(89,50,22,.12); }

.rsvp-section .section-inner { animation:rsvpBreath 5s ease-in-out infinite alternate; }
@keyframes rsvpBreath { to { transform:scale(1.015); } }
.rsvp-section .btn-primary { animation:rsvpButtonPulse 2.6s ease-in-out infinite; }
@keyframes rsvpButtonPulse { 50% { transform:translateY(-2px) scale(1.035); box-shadow:0 16px 36px rgba(24,0,8,.24); } }

@media(max-width:640px){
  .section-motion-petals i { opacity:.65; }
  .section-motion-leaf { width:115px; height:175px; opacity:.22; }
  .section-motion-leaf-left { left:-62px; }
  .section-motion-leaf-right { right:-64px; }
  .section-motion-ornament { font-size:92px; }
  .section-motion-sparkles b { opacity:0; }
  .schedule-section .timeline-item:hover,
  .contact-section .contact-row:hover { transform:none; }
}

@media(prefers-reduced-motion:reduce){
  .section-motion-petals i,
  .section-motion-sparkles b,
  .section-motion-glow,
  .section-motion-leaf,
  .section-motion-ornament,
  .story-art,
  .story-art img,
  .venue-art,
  .venue-art img,
  .gallery-section .carousel-slide.is-current,
  .gifts-section .gift-interactive,
  .rsvp-section .section-inner,
  .rsvp-section .btn-primary { animation:none!important; }
  body.motion-ready .wedding-section:not(.hero-section) > .section-inner { opacity:1; transform:none; }
}


/* ===== V5.2 BACKGROUND LAYERS + QR FIX START ===== */

/*
   Petals/decorations belong INSIDE each section, behind the actual webparts.
   This prevents petals from crossing over cards, buttons, QR codes and controls.
*/
.wedding-atmosphere {
  display:none !important;
}

.wedding-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.wedding-section > .section-motion {
  position:absolute;
  inset:0;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden;
}

.wedding-section > .section-inner,
.wedding-section > .hero-scene-bg,
.wedding-section > .hero-scene-glow,
.wedding-section > .hero-flame {
  position:relative;
}

.wedding-section > .section-inner {
  z-index:3 !important;
}

/* Hero background stays behind hero petals, while the content stays above them. */
.hero-cinematic > .hero-scene-bg { position:absolute; z-index:-5 !important; }
.hero-cinematic > .hero-scene-glow { position:absolute; z-index:-4 !important; }
.hero-cinematic > .hero-flame { position:absolute; z-index:1 !important; }
.hero-cinematic > .section-motion { z-index:0 !important; }
.hero-cinematic > .section-inner { z-index:3 !important; }

/* Make section petals visible, but subtle enough to remain decorative. */
.section-motion-petals i {
  opacity:.58;
}
.section-motion-sparkles b {
  opacity:0;
}

/* No hover boxes/lifts on content webparts. */
.schedule-section .timeline-item,
.schedule-section .timeline-item:hover,
.contact-section .contact-row,
.contact-section .contact-row:hover,
.invitation-section .family-block,
.invitation-section .family-block:hover {
  transform:none !important;
  filter:none !important;
}

.schedule-section .timeline-item:hover {
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
}

.contact-section .contact-row:hover {
  box-shadow:inherit !important;
}

/* Remove ambient floating of the gift webparts; only animate when the gift opens. */
.gifts-section .gift-interactive {
  animation:none !important;
}

/* QR lightbox: centre both Prem and Dharsh images consistently. */
.gift-lightbox {
  z-index:10000 !important;
}

.gift-lightbox-card {
  width:min(92vw,430px);
  padding:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:center;
}

.gift-lightbox-image-wrap {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0 auto;
}

.gift-lightbox-image-wrap img,
.gift-lightbox-card > img {
  display:block;
  width:auto !important;
  max-width:100% !important;
  max-height:min(68vh,620px);
  height:auto !important;
  margin:0 auto !important;
  object-fit:contain;
  object-position:center center;
  border-radius:16px;
}

.gift-download-btn {
  width:min(100%,320px);
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 20px;
  border-radius:999px;
  background:linear-gradient(135deg,#7a1029,#9b1738);
  color:#fff8eb !important;
  text-decoration:none !important;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(91,12,35,.20);
}

.gift-download-btn span {
  font-size:20px;
  line-height:1;
}

.gift-download-btn:hover,
.gift-download-btn:focus-visible {
  transform:none !important;
  filter:none !important;
}

/* Keep modal controls above all decorative motion. */
.gift-lightbox-card,
.gift-lightbox-close,
.gift-download-btn,
.bottom-nav,
.music-toggle {
  position:relative;
  z-index:10001;
}

@media(max-width:640px) {
  .section-motion-petals i { opacity:.46; }
  .gift-lightbox { padding:18px 12px; }
  .gift-lightbox-card {
    width:min(94vw,390px);
    padding:20px 16px 18px;
    gap:14px;
  }
  .gift-lightbox-image-wrap img,
  .gift-lightbox-card > img {
    max-height:66vh;
  }
  .gift-download-btn {
    width:min(100%,300px);
    min-height:44px;
    font-size:13px;
  }
}

/* ===== V5.2 BACKGROUND LAYERS + QR FIX END ===== */


/* =========================================================
   ========================================================= */

/* Hero uses a purpose-built wide image on desktop and a portrait composition on phones. */
.hero-cinematic > .hero-scene-bg {
  position:absolute;
  inset:-3%;
  z-index:-5 !important;
  background-image:url('/assets/hero-mandapam-landscape.png') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  animation:v53HeroDrift 20s ease-in-out infinite alternate !important;
}
@keyframes v53HeroDrift {
  from { transform:scale(1.025) translate3d(-.2%,0,0); }
  to   { transform:scale(1.075) translate3d(.5%,-.35%,0); }
}

/* Fire overlays are retired. Lamps remain naturally in the artwork. */
.hero-flame,
.hero-flame-1,
.hero-flame-2,
.hero-flame-3,
.hero-flame-4 {
  display:none !important;
  animation:none !important;
}

/* Decorative motion always remains BEHIND real content/webparts. */
.wedding-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.wedding-section > .section-motion {
  position:absolute;
  inset:0;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden;
}
.wedding-section > .section-inner {
  position:relative;
  z-index:3 !important;
}
.hero-cinematic > .hero-scene-bg { z-index:-5 !important; }
.hero-cinematic > .hero-scene-glow { position:absolute; z-index:-4 !important; }
.hero-cinematic > .section-motion { z-index:0 !important; }
.hero-cinematic > .section-inner { z-index:3 !important; }

/* Petals: values are precomputed in SectionMotion.razor so every browser can animate them. */
.section-motion-petals {
  position:absolute;
  inset:0;
  overflow:hidden;
}
.section-motion-petals i {
  position:absolute !important;
  display:block !important;
  top:-12vh !important;
  left:var(--petal-left) !important;
  width:var(--petal-size) !important;
  height:calc(var(--petal-size) * .64) !important;
  border-radius:92% 8% 76% 24% !important;
  background:linear-gradient(135deg,#dd3156 0%,#b7193d 48%,#751027 100%) !important;
  opacity:var(--petal-opacity) !important;
  filter:drop-shadow(0 2px 2px rgba(74,7,25,.14));
  will-change:transform;
  animation:v53PetalFall var(--petal-duration) linear infinite var(--petal-delay) !important;
}
.section-motion-petals i:nth-child(3n) {
  border-radius:18% 82% 22% 78% !important;
  height:calc(var(--petal-size) * .9) !important;
}
.section-motion-petals i:nth-child(5n) {
  opacity:.42 !important;
  filter:blur(.25px) drop-shadow(0 2px 2px rgba(74,7,25,.10));
}
@keyframes v53PetalFall {
  0%   { transform:translate3d(0,-12vh,0) rotate(0deg) scale(.72); }
  28%  { transform:translate3d(calc(var(--petal-drift) * .38),25vh,0) rotate(190deg) scale(.92); }
  57%  { transform:translate3d(var(--petal-drift),58vh,0) rotate(410deg) scale(1); }
  80%  { transform:translate3d(calc(var(--petal-drift) * -.28),84vh,0) rotate(590deg) scale(.88); }
  100% { transform:translate3d(calc(var(--petal-drift) * .48),115vh,0) rotate(760deg) scale(.76); }
}

.section-motion-sparkles b {
  left:var(--spark-left) !important;
  top:var(--spark-top) !important;
  animation-duration:var(--spark-duration) !important;
  animation-delay:var(--spark-delay) !important;
}

/* Keep all content cards and webparts visually stable. */
.schedule-section .timeline-item,
.schedule-section .timeline-item:hover,
.contact-section .contact-row,
.contact-section .contact-row:hover,
.invitation-section .family-block,
.invitation-section .family-block:hover {
  transform:none !important;
  filter:none !important;
}
.schedule-section .timeline-item:hover {
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
}
.contact-section .contact-row:hover { box-shadow:inherit !important; }
.gifts-section .gift-interactive { animation:none !important; }

/* Clean QR modal: preserve the original QR artwork, simply centre it and add one download button. */
.gift-lightbox { z-index:10000 !important; }
.gift-lightbox-card {
  width:min(92vw,430px) !important;
  padding:20px 18px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  text-align:center !important;
}
.gift-lightbox-image-wrap {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  padding:0;
}
.gift-lightbox-image-wrap img {
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:min(70vh,640px) !important;
  margin:0 auto !important;
  object-fit:contain !important;
  object-position:center !important;
}
.gift-download-btn {
  width:min(100%,320px) !important;
  min-height:46px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-radius:999px;
  background:#8b1231 !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700;
  box-shadow:none !important;
  transform:none !important;
}

/* Opening screen: carved South-Indian inspired double temple doors. */
.door-stage {
  background:
    radial-gradient(circle at 50% 26%,rgba(238,201,126,.22),transparent 32%),
    linear-gradient(180deg,#2f0712,#160307) !important;
  perspective:1700px;
}
.temple-door-frame {
  width:min(760px,92vw);
  height:min(820px,88svh);
  position:relative;
  overflow:hidden;
  border:clamp(8px,1.3vw,16px) solid #ba873d;
  border-radius:26px 26px 14px 14px;
  background:#3d190d;
  box-shadow:
    0 30px 80px rgba(0,0,0,.50),
    inset 0 0 0 4px #efd08a,
    inset 0 0 0 9px #75410f;
  transform-style:preserve-3d;
}
.temple-door-frame::before,
.temple-door-frame::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:34px;
  z-index:7;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,#7c4716 0 5px,#e1b768 5px 8px,#5a2b09 8px 12px);
  box-shadow:inset 0 0 12px rgba(255,224,154,.32);
}
.temple-door-frame::before { left:0; }
.temple-door-frame::after { right:0; }
.temple-top {
  position:absolute;
  left:28px;
  right:28px;
  top:0;
  height:70px;
  z-index:9;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:5px;
  background:linear-gradient(180deg,#8b511a,#c99543 55%,#6e370d);
  clip-path:polygon(0 0,100% 0,100% 62%,90% 73%,80% 62%,70% 78%,60% 63%,50% 82%,40% 63%,30% 78%,20% 62%,10% 73%,0 62%);
  box-shadow:0 7px 18px rgba(0,0,0,.25);
}
.temple-top span {
  width:44px;
  height:46px;
  margin-top:5px;
  border-radius:50% 50% 42% 42%;
  background:radial-gradient(circle at 50% 38%,#f0cf86 0 15%,#ae7027 17% 49%,#63300d 51% 100%);
  border:2px solid #e3b963;
}
.temple-door-frame .door-panel {
  top:0;
  bottom:0;
  width:50%;
  background:
    radial-gradient(circle at 50% 25%,rgba(230,187,95,.18),transparent 30%),
    repeating-linear-gradient(90deg,rgba(255,229,160,.06) 0 2px,transparent 2px 20px),
    linear-gradient(180deg,#713713,#4f220c 48%,#3b1708 100%) !important;
  border:2px solid #c99744 !important;
  box-shadow:inset 0 0 34px rgba(0,0,0,.34),inset 0 0 0 9px rgba(225,183,100,.11);
}
.temple-door-frame .door-left { left:0; transform-origin:left center; }
.temple-door-frame .door-right { right:0; transform-origin:right center; }
.door-stage.is-opening .temple-door-frame .door-left { transform:rotateY(-108deg); }
.door-stage.is-opening .temple-door-frame .door-right { transform:rotateY(108deg); }
.door-carving {
  position:absolute;
  inset:15% 12% 18%;
  border:3px solid rgba(225,183,100,.72);
  border-radius:130px 130px 18px 18px;
  box-shadow:inset 0 0 0 7px rgba(102,49,13,.64),inset 0 0 0 9px rgba(225,183,100,.20);
}
.door-carving::before {
  position:absolute;
  left:50%;
  top:21%;
  transform:translate(-50%,-50%);
  width:126px;
  height:126px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:3px double #e0b465;
  color:#e8c678;
  font-size:56px;
  background:radial-gradient(circle,#7b4217,#4e210c 68%);
  box-shadow:0 0 0 8px rgba(222,179,94,.10);
}
.door-carving::after {
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:13%;height:32%;
  background:
    linear-gradient(135deg,transparent 45%,rgba(226,182,94,.42) 46% 51%,transparent 52%) 0 0/28px 28px,
    linear-gradient(45deg,transparent 45%,rgba(226,182,94,.42) 46% 51%,transparent 52%) 0 0/28px 28px;
  opacity:.75;
}
.door-studs {
  position:absolute;
  inset:11% 8%;
  background-image:radial-gradient(circle,#e2b665 0 3px,#7d4318 4px 5px,transparent 6px);
  background-size:54px 54px;
  opacity:.65;
}
.door-handle {
  position:absolute;
  top:51%;
  width:42px;
  height:78px;
  border:5px solid #eccb80;
  border-radius:24px;
  box-shadow:0 4px 12px rgba(0,0,0,.38),inset 0 0 8px rgba(255,239,193,.25);
  z-index:4;
}
.door-handle-left { right:16px; }
.door-handle-right { left:16px; }
.temple-door-frame .door-copy {
  inset:0;
  z-index:12;
  pointer-events:none;
  gap:10px;
  color:#fff5dc;
  text-shadow:0 3px 14px rgba(0,0,0,.55);
}
.door-kolam { color:#e7c273;font-size:38px;line-height:1; }
.temple-door-frame .door-monogram {
  font-size:clamp(54px,9vw,92px);
  color:#fff7e4;
}
.temple-door-frame .door-monogram span { color:#e9bf6d; }
.door-subtitle {
  font-family:'Jost',sans-serif;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#efd79c;
}
.door-open-btn {
  pointer-events:auto;
  margin-top:12px;
  border:1px solid rgba(244,213,149,.48) !important;
  background:linear-gradient(135deg,#7e102c,#a11b3d) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.28) !important;
}

@media(max-width:640px) {
  .hero-cinematic > .hero-scene-bg {
    inset:-2% !important;
    background-image:url('/assets/hero-mandapam-portrait.png') !important;
    background-position:center center !important;
    background-size:cover !important;
    animation:v53HeroDriftMobile 17s ease-in-out infinite alternate !important;
  }
  @keyframes v53HeroDriftMobile {
    from { transform:scale(1.01) translate3d(0,0,0); }
    to { transform:scale(1.045) translate3d(0,-.25%,0); }
  }
  .hero-glass-panel {
    background:linear-gradient(180deg,rgba(83,8,27,.40),rgba(62,5,20,.23)) !important;
  }
  .section-motion-petals i { opacity:calc(var(--petal-opacity) * .82) !important; }
  .temple-door-frame {
    width:min(94vw,430px);
    height:min(82svh,720px);
    border-width:8px;
    border-radius:20px 20px 10px 10px;
  }
  .temple-top { left:20px;right:20px;height:58px; }
  .temple-top span { width:32px;height:36px; }
  .door-carving { inset:16% 10% 17%; }
  .door-carving::before { width:94px;height:94px;font-size:42px; }
  .door-handle { width:32px;height:62px;border-width:4px; }
  .door-handle-left { right:10px; }
  .door-handle-right { left:10px; }
}

@media(prefers-reduced-motion:reduce) {
  .hero-cinematic > .hero-scene-bg,
  .section-motion-petals i { animation:none !important; }
}

/* =========================================================
   V5.4 DOOR POLISH + FIXED BOTTOM NAV
   ========================================================= */

/* Richer temple-door frame */
.temple-door-frame {
  border-color:#d6a24b !important;
  background:
    radial-gradient(circle at 50% 18%,rgba(242,202,122,.12),transparent 30%),
    linear-gradient(180deg,#4a1f0d,#2c0f08) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.54),
    inset 0 0 0 3px #f1d18a,
    inset 0 0 0 8px #8a531c,
    inset 0 0 42px rgba(255,215,130,.10) !important;
}

.temple-door-frame::before,
.temple-door-frame::after {
  width:38px !important;
  background:
    repeating-linear-gradient(90deg,#6f3c12 0 4px,#dca44a 4px 7px,#f0ca7c 7px 9px,#5a2b09 9px 13px) !important;
}

.door-floral-crown {
  position:absolute;
  left:38px;
  right:38px;
  top:0;
  height:56px;
  z-index:14;
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
  pointer-events:none;
}

.door-floral-crown span {
  width:34px;
  height:54px;
  border-radius:50% 50% 45% 45%;
  background:
    radial-gradient(circle at 50% 17%,#f3e3bb 0 9%,transparent 10%),
    radial-gradient(circle at 50% 34%,#9f1836 0 10%,#e7d8aa 11% 17%,transparent 18%),
    repeating-linear-gradient(180deg,#f0e1ba 0 5px,#9e1835 5px 8px);
  box-shadow:0 4px 8px rgba(0,0,0,.25);
  opacity:.96;
}

.door-bells {
  position:absolute;
  left:50%;
  top:46px;
  transform:translateX(-50%);
  z-index:15;
  display:flex;
  gap:22px;
  pointer-events:none;
}

.door-bells i {
  position:relative;
  display:block;
  width:18px;
  height:21px;
  border-radius:10px 10px 5px 5px;
  background:linear-gradient(90deg,#8d5318,#e7bd63 45%,#8a4f15);
  box-shadow:0 3px 8px rgba(0,0,0,.28);
}

.door-bells i::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:7px;
  height:7px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#d9a74f;
}

.temple-door-frame .door-panel {
  background:
    radial-gradient(circle at 50% 26%,rgba(236,196,110,.20),transparent 27%),
    linear-gradient(90deg,transparent 0 8%,rgba(237,197,110,.09) 8% 9%,transparent 9% 91%,rgba(237,197,110,.09) 91% 92%,transparent 92%),
    repeating-linear-gradient(90deg,rgba(255,229,160,.045) 0 2px,transparent 2px 18px),
    linear-gradient(180deg,#7a3c15,#56250d 48%,#361308 100%) !important;
}

.door-carving {
  inset:14% 11% 16% !important;
  border:3px solid rgba(231,191,105,.78) !important;
  border-radius:150px 150px 22px 22px !important;
  box-shadow:
    inset 0 0 0 6px rgba(87,38,9,.58),
    inset 0 0 0 9px rgba(233,194,109,.18),
    0 0 0 1px rgba(246,221,162,.18) !important;
}

.door-carving::before {
  width:132px !important;
  height:132px !important;
  border:4px double #e9c16e !important;
  color:#f0cb79 !important;
  font-size:56px !important;
  background:
    radial-gradient(circle at 40% 35%,rgba(248,217,150,.15),transparent 28%),
    radial-gradient(circle,#81491b,#4b1e0a 70%) !important;
  box-shadow:
    0 0 0 9px rgba(221,176,88,.10),
    0 10px 28px rgba(0,0,0,.24) !important;
}

.door-carving::after {
  left:14% !important;
  right:14% !important;
  bottom:10% !important;
  height:34% !important;
  background:
    linear-gradient(135deg,transparent 44%,rgba(231,188,98,.52) 45% 49%,transparent 50%) 0 0/26px 26px,
    linear-gradient(45deg,transparent 44%,rgba(231,188,98,.52) 45% 49%,transparent 50%) 0 0/26px 26px !important;
}

.door-handle {
  border-color:#efca78 !important;
  background:radial-gradient(circle at 35% 25%,rgba(255,239,185,.14),transparent 42%);
  box-shadow:
    0 6px 16px rgba(0,0,0,.42),
    inset 0 0 10px rgba(255,239,193,.32) !important;
}

.temple-door-frame .door-copy {
  gap:8px !important;
}

.door-kolam {
  font-size:30px !important;
  color:#edc977 !important;
  margin-bottom:2px;
}

.temple-door-frame .door-monogram {
  font-size:clamp(56px,9vw,96px) !important;
  letter-spacing:.02em;
}

.door-subtitle {
  color:#f1d898 !important;
  letter-spacing:.30em !important;
}

.door-open-btn {
  min-width:170px;
  min-height:44px;
  border:1px solid #dfb866 !important;
  background:linear-gradient(180deg,#a5193f,#7a102d) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Bottom navigation must remain fixed, centered and visible after opening. */
.bottom-nav {
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:calc(14px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  width:min(860px,calc(100vw - 32px)) !important;
  z-index:9500 !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Disable old smart-hide behavior: the dock stays available at all times. */
.bottom-nav.is-hidden {
  transform:translateX(-50%) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

@media (max-width:640px) {
  body { padding-bottom:88px !important; }

  .bottom-nav {
    left:50% !important;
    right:auto !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    width:calc(100vw - 20px) !important;
    max-width:430px !important;
    min-height:58px !important;
    border-radius:18px !important;
    transform:translateX(-50%) !important;
  }

  .bottom-nav.is-hidden {
    transform:translateX(-50%) !important;
  }

  .bottom-nav-item {
    padding:7px 2px !important;
  }

  .bottom-nav-item svg {
    width:20px !important;
    height:20px !important;
  }

  .music-toggle {
    bottom:calc(78px + env(safe-area-inset-bottom)) !important;
  }

  .temple-door-frame {
    width:min(94vw,430px) !important;
    height:min(84svh,735px) !important;
  }

  .door-floral-crown {
    left:24px;
    right:24px;
    height:44px;
  }

  .door-floral-crown span {
    width:24px;
    height:42px;
  }

  .door-bells {
    top:37px;
    gap:14px;
  }

  .door-carving::before {
    width:96px !important;
    height:96px !important;
    font-size:42px !important;
  }
}

/* ===== V5.6 IMAGE DOOR + SMART NAV + STORY PHOTO ===== */

/* Image-based ornate temple doors */
.image-door-stage {
  position:fixed; inset:0; z-index:20000; display:grid; place-items:center;
  padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
  overflow:hidden; background:radial-gradient(circle at 50% 35%,#5d1328 0%,#300610 54%,#170207 100%);
  perspective:1800px; opacity:1; visibility:visible;
  transition:opacity .42s ease .9s,visibility 0s linear 1.32s;
}
.image-door-stage.is-opening { opacity:0; visibility:hidden; }
.image-door-shell {
  position:relative; width:min(94vw,520px); height:min(94svh,880px); overflow:hidden;
  border-radius:26px; border:1px solid rgba(244,205,126,.72);
  box-shadow:0 30px 90px rgba(0,0,0,.46),0 0 0 6px rgba(202,147,65,.12);
  transform-style:preserve-3d; background:#351007;
}
.image-door-panel {
  position:absolute; top:0; bottom:0; width:50.15%; z-index:2;
  background-image:url('/assets/wedding-door-mobile.webp');
  background-repeat:no-repeat; background-size:200% 100%; backface-visibility:hidden;
  will-change:transform; transition:transform 1.12s cubic-bezier(.6,.05,.18,.96);
}
.image-door-left { left:0; background-position:left center; transform-origin:left center; }
.image-door-right { right:0; background-position:right center; transform-origin:right center; }
.image-door-stage.is-opening .image-door-left { transform:rotateY(-108deg); }
.image-door-stage.is-opening .image-door-right { transform:rotateY(108deg); }
.image-door-shade {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,rgba(31,4,9,.03),rgba(31,4,9,.02) 40%,rgba(31,4,9,.18));
  transition:opacity .3s ease;
}
.image-door-stage.is-opening .image-door-shade { opacity:0; }
.image-door-copy {
  position:absolute; left:50%; bottom:clamp(48px,8vh,86px); z-index:5;
  width:min(86%,420px); transform:translateX(-50%); text-align:center; color:#fff7e9;
  pointer-events:none; transition:opacity .28s ease,transform .28s ease;
}
.image-door-stage.is-opening .image-door-copy { opacity:0; transform:translate(-50%,15px); }
.image-door-monogram {
  font-family:'Bodoni Moda',Georgia,serif; font-size:clamp(54px,15vw,92px); font-weight:500;
  line-height:.88; letter-spacing:-.055em; text-shadow:0 4px 25px rgba(0,0,0,.38);
}
.image-door-monogram span { color:#e8bc69; font-style:italic; margin:0 .04em; }
.image-door-subtitle {
  margin-top:15px; font-family:'Jost',Arial,sans-serif; font-size:clamp(9px,2.8vw,13px);
  letter-spacing:.27em; text-transform:uppercase; color:#f4d68d; text-shadow:0 2px 12px rgba(0,0,0,.38);
}
.image-door-open-btn {
  pointer-events:auto; min-width:184px; min-height:48px; margin-top:20px; padding:0 25px;
  border:1px solid rgba(246,205,126,.76); border-radius:999px;
  background:linear-gradient(180deg,#a60f36,#7b0d29); color:#fff;
  box-shadow:0 12px 34px rgba(58,4,19,.34); transform:none!important;
}
.image-door-open-btn:hover,.image-door-open-btn:focus-visible {
  transform:none!important; background:linear-gradient(180deg,#b6153f,#850d2d);
}

/* Restore original smart-hide behavior while keeping correct placement */
.bottom-nav {
  position:fixed!important; left:50%!important; right:auto!important;
  bottom:calc(12px + env(safe-area-inset-bottom))!important;
  width:min(860px,calc(100vw - 32px))!important; margin:0!important;
  transform:translateX(-50%)!important; opacity:1!important; visibility:visible!important;
  pointer-events:auto!important; z-index:9500!important;
  transition:transform .34s cubic-bezier(.22,.8,.24,1),opacity .26s ease!important;
  will-change:transform,opacity;
}
.bottom-nav.is-hidden,.bottom-nav.nav-hidden,.bottom-nav.hidden {
  transform:translate(-50%,calc(100% + 28px))!important;
  opacity:0!important; pointer-events:none!important;
}

/* Music stays immediately above the nav, aligned to the right */
.music-toggle {
  position:fixed!important; left:auto!important;
  right:max(14px,calc((100vw - min(860px,calc(100vw - 32px)))/2))!important;
  bottom:calc(88px + env(safe-area-inset-bottom))!important;
  width:46px!important; height:46px!important; margin:0!important; transform:none!important;
  z-index:9600!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important;
}
.music-toggle:hover,.music-toggle:focus-visible,.music-toggle:active { transform:none!important; }

/* Holding-hands story image framing */
.story-section .story-art img {
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
}

@media (max-width:640px) {
  .image-door-stage { padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }
  .image-door-shell { width:min(94vw,430px); height:min(94svh,820px); border-radius:22px; }
  .image-door-copy { bottom:clamp(46px,7vh,66px); }
  .bottom-nav {
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    width:calc(100vw - 20px)!important; max-width:430px!important; min-height:58px!important;
    border-radius:18px!important; transform:translateX(-50%)!important;
  }
  .bottom-nav.is-hidden,.bottom-nav.nav-hidden,.bottom-nav.hidden {
    transform:translate(-50%,calc(100% + 24px))!important; opacity:0!important; pointer-events:none!important;
  }
  .bottom-nav-item { min-width:0!important; padding:8px 4px!important; }
  .bottom-nav-item svg { width:18px!important; height:18px!important; }
  .bottom-nav-item span { display:none!important; }
  .music-toggle {
    right:12px!important; bottom:calc(78px + env(safe-area-inset-bottom))!important;
    width:42px!important; height:42px!important;
  }
  body { padding-bottom:calc(86px + env(safe-area-inset-bottom))!important; }
  .story-section .story-art img { object-position:center 62%; }
}

@media (prefers-reduced-motion:reduce) {
  .bottom-nav { transition:none!important; }
}
/* ===== END V5.6 ===== */


/* ===== V5.9 TARGETED VISUAL UPDATE ===== */
/* Door subtitle removed in Razor. Existing door/nav/music behavior preserved. */

@media (max-width: 640px) {
  .hero-cinematic .hero-glass-panel {
    width:min(92vw,400px)!important;
    min-height:455px!important;
    padding:26px 18px 22px!important;
    display:flex!important; flex-direction:column!important;
    align-items:center!important; justify-content:center!important;
    border-radius:26px!important;
  }
  .hero-cinematic h1.hero-couple-names {
    display:flex!important; flex-direction:column!important;
    align-items:center!important; gap:0!important;
    margin:6px 0 10px!important; line-height:.84!important;
    font-family:"Bodoni Moda",Georgia,serif!important;
  }
  .hero-cinematic h1.hero-couple-names .hero-name {
    display:block!important; margin:0!important;
    color:#fff7e8!important; font-family:"Bodoni Moda",Georgia,serif!important;
    font-size:clamp(56px,16vw,76px)!important; font-weight:500!important;
    font-style:normal!important; line-height:.88!important; letter-spacing:-.045em!important;
  }
  .hero-cinematic h1.hero-couple-names .hero-amp {
    display:block!important; margin:3px 0 6px!important;
    color:#e9bd67!important; font-family:"Bodoni Moda",Georgia,serif!important;
    font-size:clamp(34px,10vw,46px)!important; font-style:italic!important; line-height:.8!important;
  }
  .hero-cinematic .script-line { margin:5px 0 10px!important; }
  .hero-cinematic .countdown-grid { margin:11px auto 9px!important; }
}
@media (max-width:640px) and (max-height:760px) {
  .hero-cinematic .hero-glass-panel { min-height:405px!important; padding:18px 14px 16px!important; }
  .hero-cinematic h1.hero-couple-names .hero-name { font-size:clamp(47px,13.5vw,60px)!important; }
  .hero-cinematic h1.hero-couple-names .hero-amp { font-size:31px!important; margin:1px 0 4px!important; }
}
@media (min-width:641px) {
  .hero-cinematic h1.hero-couple-names { display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:center!important; gap:.18em!important; }
}

.invitation-main-heading::before,
.invitation-main-heading::after { content:none!important; display:none!important; }
.invitation-ganesha {
  display:block; width:clamp(105px,18vw,190px); height:auto;
  margin:0 auto 14px; object-fit:contain; mix-blend-mode:multiply;
}
@media (max-width:640px) {
  .invitation-ganesha { width:135px; margin-bottom:10px; }
}
/* ===== END V5.9 ===== */

/* ===== V6.0 THREE-ISSUE FIX ===== */

/* 1) Clean image-based door: no Wedding Invitation text. */
.v60-door-stage {
  position:fixed; inset:0; z-index:20000; display:grid; place-items:center;
  padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));
  overflow:hidden; background:radial-gradient(circle at 50% 35%,#5d1328 0%,#300610 54%,#170207 100%);
  perspective:1800px; opacity:1; visibility:visible;
  transition:opacity .42s ease .86s,visibility 0s linear 1.28s;
}
.v60-door-stage.is-opening { opacity:0; visibility:hidden; }
.v60-door-shell {
  position:relative; display:flex; width:min(94vw,520px); height:min(94svh,880px);
  overflow:hidden; border-radius:26px; background:#2a0809;
  border:1px solid rgba(236,192,108,.75);
  box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 0 5px rgba(205,151,65,.12);
  transform-style:preserve-3d;
}
.v60-door-half {
  position:relative; width:50%; height:100%; overflow:hidden; backface-visibility:hidden;
  transform-style:preserve-3d; will-change:transform;
  transition:transform 1.08s cubic-bezier(.62,.04,.18,.96);
}
.v60-door-half img { width:100%; height:100%; display:block; object-fit:cover; user-select:none; pointer-events:none; }
.v60-door-left { transform-origin:left center; }
.v60-door-right { transform-origin:right center; }
.v60-door-stage.is-opening .v60-door-left { transform:rotateY(-108deg); }
.v60-door-stage.is-opening .v60-door-right { transform:rotateY(108deg); }
.v60-door-overlay {
  position:absolute; left:50%; bottom:clamp(42px,6vh,68px); z-index:5; width:min(88%,410px);
  transform:translateX(-50%); text-align:center; color:#fff8e8; text-shadow:0 3px 20px rgba(0,0,0,.46);
  transition:opacity .25s ease,transform .25s ease;
}
.v60-door-stage.is-opening .v60-door-overlay { opacity:0; transform:translate(-50%,12px); }
.v60-door-monogram {
  font-family:"Bodoni Moda",Georgia,serif; font-size:clamp(54px,15vw,86px); font-weight:500;
  line-height:.92; letter-spacing:-.04em;
}
.v60-door-monogram span { color:#efc778; font-style:italic; }
.v60-door-open-btn {
  min-width:190px; min-height:48px; margin-top:18px; padding:0 24px; border-radius:999px;
  border:1px solid rgba(241,205,135,.78); background:linear-gradient(180deg,#ad123b,#7d0c2a);
  color:#fff; box-shadow:0 12px 30px rgba(63,4,20,.36); transform:none!important;
}
.v60-door-open-btn:hover,.v60-door-open-btn:focus-visible,.v60-door-open-btn:active { transform:none!important; }

/* 2) First section: taller panel + vertical names on mobile. */
.hero-couple-names { display:flex; align-items:center; justify-content:center; gap:.18em; margin:8px 0 10px; line-height:.9; }
.hero-couple-names .hero-name { display:block; }
.hero-couple-names .hero-amp { display:block; color:#e9bd67!important; font-style:italic; }

@media (max-width:640px) {
  .hero-cinematic .hero-glass-panel {
    width:min(92vw,400px)!important; min-height:455px!important; padding:28px 18px 24px!important;
    display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important;
    border-radius:26px!important;
  }
  .hero-cinematic h1.hero-couple-names {
    display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important;
    gap:0!important; margin:6px 0 12px!important; font-family:"Bodoni Moda",Georgia,serif!important;
    font-style:normal!important; line-height:.86!important;
  }
  .hero-cinematic h1.hero-couple-names .hero-name {
    margin:0!important; color:#fff7e8!important; font-family:"Bodoni Moda",Georgia,serif!important;
    font-size:clamp(56px,16vw,76px)!important; font-weight:500!important; font-style:normal!important;
    line-height:.88!important; letter-spacing:-.045em!important; text-shadow:0 3px 18px rgba(55,8,20,.28)!important;
  }
  .hero-cinematic h1.hero-couple-names .hero-amp {
    margin:3px 0 6px!important; color:#e9bd67!important; font-family:"Bodoni Moda",Georgia,serif!important;
    font-size:clamp(34px,10vw,46px)!important; font-weight:500!important; font-style:italic!important;
    line-height:.8!important; letter-spacing:0!important;
  }
  .hero-cinematic .script-line { margin:5px 0 10px!important; font-size:clamp(17px,4.8vw,21px)!important; line-height:1.05!important; }
  .hero-cinematic .countdown-grid { width:min(100%,350px)!important; margin:11px auto 9px!important; }
  .hero-cinematic .hero-rsvp { min-width:152px!important; margin-top:3px!important; }
}
@media (max-width:640px) and (max-height:760px) {
  .hero-cinematic .hero-glass-panel { min-height:405px!important; padding:18px 14px 16px!important; }
  .hero-cinematic h1.hero-couple-names .hero-name { font-size:clamp(47px,13.5vw,60px)!important; }
  .hero-cinematic h1.hero-couple-names .hero-amp { font-size:31px!important; margin:1px 0 4px!important; }
}
@media (min-width:641px) {
  .hero-cinematic h1.hero-couple-names { flex-direction:row!important; }
}

/* 3) Second section: remove special character and use clean transparent Ganesha. */
.invitation-panel::before,
.invitation-panel::after,
.invitation-main-heading::before,
.invitation-main-heading::after,
.invitation-section .section-heading::before,
.invitation-section .section-heading::after {
  content:none!important; display:none!important;
}
.invitation-ganesha {
  display:block!important; width:clamp(120px,18vw,190px)!important; height:auto!important;
  margin:0 auto 14px!important; object-fit:contain!important; mix-blend-mode:normal!important;
  background:transparent!important;
}
@media (max-width:640px) {
  .invitation-ganesha { width:145px!important; margin-bottom:10px!important; }
}

/* ===== END V6.0 ===== */


/* ===== HERO TEXT OVERFLOW FIX V6.1 START ===== */

/*
   Prevent wedding hero wording from ever crossing
   outside the translucent hero panel.
*/

.hero-cinematic .hero-glass-panel {
    overflow: hidden !important;
}

.hero-cinematic .hero-glass-panel > * {
    max-width: 100% !important;
}


/* ------------------------------------------------------------
   Couple names
   ------------------------------------------------------------ */

.hero-cinematic h1.hero-couple-names {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 8px !important;
    padding-right: 8px !important;

    box-sizing: border-box !important;

    text-align: center !important;
}


/*
   Desktop:
   keep Prem & Dharsh on one row, but make the font
   viewport-aware so it shrinks before reaching the border.
*/

@media (min-width: 641px) {

    .hero-cinematic h1.hero-couple-names {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;

        gap: clamp(8px, 1.2vw, 20px) !important;

        white-space: nowrap !important;
    }

    .hero-cinematic h1.hero-couple-names .hero-name {
        min-width: 0 !important;

        font-size:
            clamp(
                44px,
                5.4vw,
                78px
            ) !important;

        line-height: .92 !important;

        letter-spacing: -.035em !important;
    }

    .hero-cinematic h1.hero-couple-names .hero-amp {
        flex: 0 0 auto !important;

        font-size:
            clamp(
                34px,
                4.2vw,
                62px
            ) !important;

        line-height: .9 !important;
    }
}


/* ------------------------------------------------------------
   Medium/tablet widths
   ------------------------------------------------------------ */

@media (min-width: 641px) and (max-width: 980px) {

    .hero-cinematic h1.hero-couple-names .hero-name {
        font-size:
            clamp(
                40px,
                6vw,
                60px
            ) !important;
    }

    .hero-cinematic h1.hero-couple-names .hero-amp {
        font-size:
            clamp(
                30px,
                4.6vw,
                48px
            ) !important;
    }
}


/* ------------------------------------------------------------
   Mobile:
   names remain vertical and safely inside the panel.
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    .hero-cinematic h1.hero-couple-names {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;

        white-space: normal !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero-cinematic h1.hero-couple-names .hero-name {
        display: block !important;

        max-width: 100% !important;

        font-size:
            clamp(
                48px,
                14.5vw,
                70px
            ) !important;

        line-height: .88 !important;

        letter-spacing: -.04em !important;

        white-space: nowrap !important;
    }

    .hero-cinematic h1.hero-couple-names .hero-amp {
        font-size:
            clamp(
                30px,
                9vw,
                42px
            ) !important;

        line-height: .84 !important;
    }


    .hero-cinematic .script-line {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 6px !important;
        padding-right: 6px !important;

        font-size:
            clamp(
                15px,
                4.6vw,
                20px
            ) !important;

        line-height: 1.08 !important;

        white-space: normal !important;
    }


    .hero-cinematic .hero-meta,
    .hero-cinematic .lead,
    .hero-cinematic p {
        max-width: 100% !important;

        overflow-wrap: anywhere !important;
    }
}


/* ------------------------------------------------------------
   Very narrow phones
   ------------------------------------------------------------ */

@media (max-width: 390px) {

    .hero-cinematic h1.hero-couple-names .hero-name {
        font-size:
            clamp(
                44px,
                13vw,
                56px
            ) !important;
    }

    .hero-cinematic h1.hero-couple-names .hero-amp {
        font-size: 29px !important;
    }

    .hero-cinematic .script-line {
        font-size:
            clamp(
                14px,
                4.2vw,
                17px
            ) !important;
    }
}


/* ------------------------------------------------------------
   Extra safety for browser zoom / unusual aspect ratios
   ------------------------------------------------------------ */

@media (min-width: 641px) and (max-height: 760px) {

    .hero-cinematic h1.hero-couple-names .hero-name {
        font-size:
            clamp(
                40px,
                4.8vw,
                64px
            ) !important;
    }

    .hero-cinematic h1.hero-couple-names .hero-amp {
        font-size:
            clamp(
                30px,
                3.8vw,
                50px
            ) !important;
    }
}


/* ===== HERO TEXT OVERFLOW FIX V6.1 END ===== */





























/* ===== INVITATION POLISH V6.4 START ===== */

/*
   TYPOGRAPHY + COMPOSITION PASS
   No interaction, navigation, music, gallery, QR, petal,
   countdown, calendar or auto-scroll logic is changed.
*/

:root {
    --invite-display: "Bodoni Moda", "Times New Roman", serif;
    --invite-script: "Great Vibes", "Brush Script MT", cursive;
    --invite-body: "Jost", Arial, sans-serif;

    --section-pad-desktop: clamp(44px, 5.2vw, 76px);
    --section-pad-mobile: 34px;
    --content-width: 1080px;
}

/* ----------------------------------------------------------
   GLOBAL VERTICAL RHYTHM
   ---------------------------------------------------------- */

.wedding-section:not(.hero-section) {
    min-height: 0 !important;
    height: auto !important;
    padding-top: var(--section-pad-desktop) !important;
    padding-bottom: var(--section-pad-desktop) !important;
}

.wedding-section:not(.hero-section) > .section-inner {
    width: min(var(--content-width), calc(100% - 44px)) !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.section-inner {
    gap: clamp(20px, 2.5vw, 34px);
}

/* Remove artificial whitespace caused by tall wrappers. */
.invitation-section,
.story-section,
.celebration-section,
.schedule-section,
.venue-section,
.gallery-section,
.gifts-section,
.contact-section,
.contacts-section,
.rsvp-section {
    min-height: 0 !important;
}

/* ----------------------------------------------------------
   TYPOGRAPHY SYSTEM
   ---------------------------------------------------------- */

.wedding-section h1,
.wedding-section h2,
.wedding-section h3,
.section-heading h2 {
    font-family: var(--invite-display) !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance;
}

.wedding-section h2,
.section-heading h2 {
    font-size: clamp(2.15rem, 4vw, 4.25rem) !important;
    line-height: 0.98 !important;
    margin-bottom: 8px !important;
}

.wedding-section h3 {
    line-height: 1.08 !important;
}

.eyebrow,
.section-kicker,
.section-label {
    font-family: var(--invite-body) !important;
    font-size: clamp(0.62rem, 0.7vw, 0.74rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.19em !important;
    line-height: 1.35 !important;
}

.script-line,
.script-subtitle,
.section-subtitle,
.romantic-line,
.invitation-intro,
.gallery-section .subtitle,
.gifts-section .subtitle,
.contact-section .subtitle,
.contacts-section .subtitle {
    font-family: var(--invite-script) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

.script-line,
.script-subtitle,
.section-subtitle,
.romantic-line {
    font-size: clamp(1.45rem, 2.2vw, 2.2rem) !important;
    line-height: 1.08 !important;
}

.wedding-section p {
    line-height: 1.55;
}

/* ----------------------------------------------------------
   SOFTER INVITATION CARDS
   ---------------------------------------------------------- */

.ornate-panel,
.content-block,
.story-card,
.celebration-panel,
.schedule-panel,
.venue-card,
.gallery-card,
.gift-panel,
.contact-card,
.contacts-card {
    box-shadow:
        0 14px 38px rgba(83, 42, 24, 0.08),
        0 2px 8px rgba(83, 42, 24, 0.035) !important;
}

/* ----------------------------------------------------------
   WEDDING INVITATION
   ---------------------------------------------------------- */

.invitation-section {
    padding-top: clamp(40px, 4.5vw, 64px) !important;
    padding-bottom: clamp(42px, 4.8vw, 68px) !important;
}

.invitation-panel {
    width: min(940px, 100%) !important;
    padding: clamp(34px, 4.2vw, 62px) clamp(28px, 4.8vw, 68px) !important;
}

.invitation-main-heading {
    margin-bottom: clamp(22px, 2.8vw, 34px) !important;
}

.invitation-ganesha {
    width: clamp(68px, 7vw, 98px) !important;
    height: auto !important;
    margin-bottom: 12px !important;
}

.family-grid {
    gap: clamp(14px, 2vw, 24px) !important;
    margin-bottom: clamp(24px, 3vw, 38px) !important;
}

.family-card {
    padding: clamp(18px, 2.1vw, 28px) !important;
    box-shadow: 0 9px 24px rgba(83, 42, 24, 0.055) !important;
}

.invitation-copy {
    gap: 7px !important;
}

.invitation-intro {
    font-size: clamp(1.4rem, 2vw, 1.9rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
}

.couple-script {
    font-family: var(--invite-script) !important;
    font-size: clamp(2.1rem, 3.6vw, 3.6rem) !important;
    line-height: 0.98 !important;
}

.invitation-copy .amp {
    font-family: var(--invite-display) !important;
    font-size: clamp(1.15rem, 1.5vw, 1.55rem) !important;
    margin: 2px 0 !important;
}

.invitation-meta {
    margin-top: 14px !important;
    letter-spacing: 0.08em !important;
}

/* ----------------------------------------------------------
   OUR STORY
   ---------------------------------------------------------- */

.story-section {
    padding-top: clamp(38px, 4vw, 58px) !important;
    padding-bottom: clamp(38px, 4vw, 58px) !important;
}

.story-section .section-inner {
    max-width: 980px !important;
    gap: clamp(24px, 4vw, 54px) !important;
    align-items: center !important;
}

.story-section .content-block,
.story-section .story-card {
    padding: clamp(24px, 3.2vw, 42px) !important;
}

.story-section h2 {
    font-size: clamp(2.35rem, 4.3vw, 4.5rem) !important;
}

.story-section .script-line,
.story-section .section-subtitle {
    font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
}

.story-section img {
    max-height: min(560px, 66vh);
    object-fit: cover;
}

/* ----------------------------------------------------------
   OUR CELEBRATION / EVENT SCHEDULE
   Keep v6.3.5 transparency intact.
   ---------------------------------------------------------- */

.celebration-section,
.schedule-section {
    padding-top: clamp(38px, 4vw, 58px) !important;
    padding-bottom: clamp(38px, 4vw, 58px) !important;
}

.celebration-section .section-inner,
.schedule-section .section-inner {
    max-width: 940px !important;
}

.celebration-section .content-block,
.celebration-section .ornate-panel,
.celebration-section .celebration-panel,
.celebration-section .schedule-panel,
.schedule-section .content-block,
.schedule-section .ornate-panel,
.schedule-section .celebration-panel,
.schedule-section .schedule-panel {
    padding: clamp(28px, 3.6vw, 48px) !important;
}

.celebration-section h2,
.schedule-section h2 {
    font-size: clamp(2.5rem, 4.5vw, 4.7rem) !important;
}

.schedule-list,
.timeline,
.celebration-list {
    margin-top: clamp(20px, 2.5vw, 30px) !important;
    gap: clamp(8px, 1vw, 13px) !important;
}

.schedule-item,
.timeline-item,
.event-item,
.event-card {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* ----------------------------------------------------------
   VENUE
   ---------------------------------------------------------- */

.venue-section {
    padding-top: clamp(38px, 4vw, 58px) !important;
    padding-bottom: clamp(38px, 4vw, 58px) !important;
}

.venue-section .section-inner {
    max-width: 1000px !important;
    gap: clamp(24px, 4vw, 50px) !important;
    align-items: center !important;
}

.venue-section .content-block,
.venue-section .venue-card {
    padding: clamp(24px, 3vw, 40px) !important;
}

.venue-section h2 {
    font-size: clamp(2.45rem, 4.3vw, 4.45rem) !important;
}

.venue-section img {
    max-height: min(570px, 67vh);
    object-fit: cover;
}

/* ----------------------------------------------------------
   GALLERY
   ---------------------------------------------------------- */

.gallery-section {
    padding-top: clamp(38px, 4vw, 58px) !important;
    padding-bottom: clamp(38px, 4vw, 58px) !important;
}

.gallery-section .section-inner {
    max-width: 1040px !important;
}

.gallery-section .section-heading {
    margin-bottom: clamp(18px, 2vw, 26px) !important;
}

.gallery-section h2 {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(2.35rem, 4.3vw, 4.5rem) !important;
}

.gallery-section .script-line,
.gallery-section .section-subtitle,
.gallery-section .subtitle {
    font-size: clamp(1.45rem, 2vw, 2rem) !important;
}

/* ----------------------------------------------------------
   GIFTS
   ---------------------------------------------------------- */

.gifts-section {
    padding-top: clamp(38px, 4vw, 58px) !important;
    padding-bottom: clamp(38px, 4vw, 58px) !important;
}

.gifts-section .section-inner,
.gifts-section .gift-panel,
.gifts-section .ornate-panel {
    max-width: 940px !important;
}

.gifts-section .gift-panel,
.gifts-section .ornate-panel {
    padding: clamp(28px, 3.5vw, 48px) !important;
}

.gifts-section h2 {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(2.35rem, 4.1vw, 4.25rem) !important;
}

.gifts-section .script-line,
.gifts-section .section-subtitle,
.gifts-section .subtitle {
    font-size: clamp(1.45rem, 2vw, 2rem) !important;
}

.gift-grid {
    margin-top: clamp(20px, 2.6vw, 32px) !important;
    gap: clamp(18px, 3vw, 34px) !important;
}

/* ----------------------------------------------------------
   CONTACTS
   ---------------------------------------------------------- */

.contact-section,
.contacts-section {
    padding-top: clamp(36px, 3.8vw, 54px) !important;
    padding-bottom: clamp(36px, 3.8vw, 54px) !important;
}

.contact-section .section-inner,
.contacts-section .section-inner {
    max-width: 940px !important;
}

.contact-section h2,
.contacts-section h2 {
    font-size: clamp(2.35rem, 4vw, 4.1rem) !important;
}

.contact-section .script-line,
.contact-section .section-subtitle,
.contacts-section .script-line,
.contacts-section .section-subtitle {
    font-size: clamp(1.4rem, 1.9vw, 1.9rem) !important;
}

.contact-grid,
.contacts-grid {
    margin-top: clamp(18px, 2vw, 26px) !important;
    gap: 12px !important;
}

.contact-card,
.contacts-card {
    padding: clamp(15px, 1.7vw, 21px) !important;
}

/* ----------------------------------------------------------
   FINAL RSVP
   ---------------------------------------------------------- */

.rsvp-section {
    padding-top: clamp(48px, 5vw, 72px) !important;
    padding-bottom: clamp(48px, 5vw, 72px) !important;
}

.rsvp-section h2 {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(2.3rem, 4vw, 4rem) !important;
}

.rsvp-section .script-line,
.rsvp-section .section-subtitle {
    font-size: clamp(1.45rem, 2vw, 2rem) !important;
}

/* ----------------------------------------------------------
   DESKTOP: make content fill the composition better
   ---------------------------------------------------------- */

@media (min-width: 900px) {

    .story-section .section-inner,
    .venue-section .section-inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(330px, 1.1fr);
    }

    .gallery-section .gallery-stage,
    .gallery-section .gallery-carousel {
        transform-origin: center;
    }
}

/* ----------------------------------------------------------
   MOBILE: continuous invitation-scroll feeling
   ---------------------------------------------------------- */

@media (max-width: 640px) {

    .wedding-section:not(.hero-section) {
        padding-top: var(--section-pad-mobile) !important;
        padding-bottom: var(--section-pad-mobile) !important;
    }

    .wedding-section:not(.hero-section) > .section-inner {
        width: calc(100% - 22px) !important;
    }

    .section-heading {
        margin-bottom: 16px !important;
    }

    .wedding-section h2,
    .section-heading h2 {
        font-size: clamp(2rem, 10vw, 2.75rem) !important;
        line-height: 1 !important;
    }

    .script-line,
    .script-subtitle,
    .section-subtitle,
    .romantic-line {
        font-size: clamp(1.35rem, 6.4vw, 1.8rem) !important;
    }

    .eyebrow,
    .section-kicker,
    .section-label {
        font-size: 0.59rem !important;
        letter-spacing: 0.15em !important;
    }

    /* Invitation */
    .invitation-section {
        padding-top: 28px !important;
        padding-bottom: 32px !important;
    }

    .invitation-panel {
        width: 100% !important;
        padding: 28px 16px 30px !important;
    }

    .invitation-ganesha {
        width: 68px !important;
        margin-bottom: 8px !important;
    }

    .invitation-main-heading {
        margin-bottom: 18px !important;
    }

    .family-grid {
        gap: 9px !important;
        margin-bottom: 22px !important;
    }

    .family-card {
        padding: 15px 10px !important;
    }

    .invitation-intro {
        font-size: 1.3rem !important;
        margin-bottom: 11px !important;
    }

    .couple-script {
        font-size: clamp(2rem, 10vw, 2.7rem) !important;
        line-height: 0.98 !important;
    }

    .invitation-meta {
        margin-top: 11px !important;
        font-size: 0.68rem !important;
    }

    /* Story / Venue: remove oversized gaps between copy and image */
    .story-section,
    .venue-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .story-section .section-inner,
    .venue-section .section-inner {
        gap: 14px !important;
    }

    .story-section .content-block,
    .story-section .story-card,
    .venue-section .content-block,
    .venue-section .venue-card {
        padding: 20px 17px !important;
    }

    .story-section img,
    .venue-section img {
        width: 100% !important;
        max-height: none !important;
    }

    /* Celebration */
    .celebration-section,
    .schedule-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .celebration-section .content-block,
    .celebration-section .ornate-panel,
    .celebration-section .celebration-panel,
    .celebration-section .schedule-panel,
    .schedule-section .content-block,
    .schedule-section .ornate-panel,
    .schedule-section .celebration-panel,
    .schedule-section .schedule-panel {
        padding: 23px 15px !important;
    }

    .schedule-list,
    .timeline,
    .celebration-list {
        margin-top: 16px !important;
        gap: 6px !important;
    }

    .schedule-item,
    .timeline-item,
    .event-item,
    .event-card {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    /* Gallery */
    .gallery-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .gallery-section h2 {
        max-width: 96% !important;
    }

    /* Gifts */
    .gifts-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .gifts-section .gift-panel,
    .gifts-section .ornate-panel {
        padding: 24px 13px !important;
    }

    .gift-grid {
        margin-top: 17px !important;
        gap: 10px !important;
    }

    /* Contacts */
    .contact-section,
    .contacts-section {
        padding-top: 29px !important;
        padding-bottom: 30px !important;
    }

    .contact-grid,
    .contacts-grid {
        margin-top: 15px !important;
        gap: 8px !important;
    }

    .contact-card,
    .contacts-card {
        padding: 13px 11px !important;
    }

    /* Final RSVP */
    .rsvp-section {
        padding-top: 42px !important;
        padding-bottom: 44px !important;
    }
}

/* ===== INVITATION POLISH V6.4 END ===== */














/* ===== GUEST WISHES V6.7 START ===== */

.guest-wishes[hidden] {
    display: none !important;
}

.guest-wishes {
    width: 100%;
    min-height: 92px;
    margin: 2px auto 12px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.guest-wishes-inner {
    width: 100%;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.38s ease,
        transform 0.38s ease;
}

.guest-wishes-inner.is-hidden {
    opacity: 0;
    transform: translateY(5px);
}

.guest-wishes-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.guest-wish-message {
    max-width: 660px;
    margin: 0 auto;
    color: #f7d77f;
    font-family: "Great Vibes", "Brush Script MT", cursive;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    line-height: 1.12;
    text-wrap: balance;
    text-shadow: 0 2px 7px rgba(72, 7, 24, 0.42);
}

.guest-wish-name {
    margin-top: 7px;
    color: rgba(255, 249, 236, 0.96);
    font-family: "Bodoni Moda", "Times New Roman", serif;
    font-size: 0.84rem;
    font-style: italic;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 5px rgba(67, 7, 23, 0.36);
}

@media (max-width: 640px) {
    .hero-section .guest-wishes {
        min-height: 96px;
        margin-top: 0;
        margin-bottom: 10px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .hero-section .guest-wish-message {
        max-width: 100%;
        font-size: clamp(1.48rem, 6.7vw, 1.95rem);
        line-height: 1.06;
    }

    .hero-section .guest-wish-name {
        margin-top: 5px;
        font-size: 0.80rem;
    }

    .hero-section .hero-rsvp {
        margin-top: 4px !important;
    }
}

/* ===== GUEST WISHES V6.7 END ===== */





/* ===== HERO READABILITY V6.8 START ===== */

/*
   Deep burgundy carries the important text.
   Gold is now an accent instead of the primary reading color.
*/

.hero-section .eyebrow {
    color: #741127 !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.82),
        0 2px 8px rgba(255,248,233,.58) !important;
}

.hero-section .hero-name {
    color: #741127 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.92),
        0 3px 12px rgba(255,248,233,.74),
        0 2px 4px rgba(88,18,35,.16) !important;
}

.hero-section .hero-amp {
    color: #B9852E !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.92),
        0 3px 10px rgba(255,248,233,.72) !important;
}

.hero-section .script-line {
    color: #7A451B !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.92),
        0 2px 7px rgba(255,248,233,.72) !important;
}

.hero-section .hero-meta,
.hero-section .hero-meta p,
.hero-section .hero-meta .lead {
    color: #741127 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.92),
        0 2px 6px rgba(255,248,233,.62) !important;
}

.hero-section .hero-meta .lead {
    font-weight: 800 !important;
}

/* Countdown - one elegant ivory panel instead of four muddy blocks */

.hero-section .countdown,
.hero-section .countdown-wrap,
.hero-section .countdown-wrapper,
.hero-section .countdown-grid,
.hero-section .countdown-container {
    background: rgba(255,248,233,.82) !important;
    border: 1.5px solid rgba(185,133,46,.86) !important;
    border-radius: 22px !important;
    box-shadow:
        0 10px 28px rgba(83,22,37,.14),
        inset 0 1px 0 rgba(255,255,255,.76) !important;
    backdrop-filter: blur(8px) saturate(1.06);
    -webkit-backdrop-filter: blur(8px) saturate(1.06);
    overflow: hidden !important;
}

.hero-section .countdown-item,
.hero-section .countdown-cell,
.hero-section .countdown-unit {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
}

.hero-section .countdown-item + .countdown-item,
.hero-section .countdown-cell + .countdown-cell,
.hero-section .countdown-unit + .countdown-unit {
    border-left: 1px solid rgba(185,133,46,.48) !important;
}

.hero-section .countdown-value,
.hero-section .countdown-number,
.hero-section .countdown-item strong,
.hero-section .countdown-cell strong,
.hero-section .countdown-unit strong {
    color: #741127 !important;
    font-family: "Bodoni Moda", "Times New Roman", serif !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.hero-section .countdown-label,
.hero-section .countdown-item small,
.hero-section .countdown-cell small,
.hero-section .countdown-unit small {
    color: #7A1029 !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    opacity: .92 !important;
    text-shadow: none !important;
}

/* RSVP - retain burgundy, add a refined gold edge */

.hero-section .hero-rsvp {
    color: #FFF8E9 !important;
    background:
        linear-gradient(180deg, #A30F35 0%, #870A2A 100%) !important;
    border: 1.5px solid rgba(212,169,75,.95) !important;
    box-shadow:
        0 10px 26px rgba(81,7,28,.22),
        inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Guest wishes - compact ivory card BELOW RSVP */

.hero-section .guest-wishes {
    width: min(100%, 680px) !important;
    min-height: 0 !important;
    margin: 14px auto 0 !important;
    padding: 16px 18px 18px !important;
    background: rgba(255,248,233,.82) !important;
    border: 1.5px solid rgba(185,133,46,.78) !important;
    border-radius: 22px !important;
    box-shadow:
        0 10px 26px rgba(83,22,37,.13),
        inset 0 1px 0 rgba(255,255,255,.76) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-section .guest-wishes-heading {
    margin: 0 0 9px !important;
    text-align: center !important;
}

.hero-section .guest-wishes-title {
    color: #741127 !important;
    font-family: "Bodoni Moda", "Times New Roman", serif !important;
    font-size: .88rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

.hero-section .guest-wishes-subtitle {
    margin-top: 3px !important;
    color: #8A5B2A !important;
    font-family: "Jost", Arial, sans-serif !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

.hero-section .guest-wishes-inner {
    position: relative;
    padding: 4px 14px 0 !important;
}

.hero-section .guest-wishes-inner::before,
.hero-section .guest-wishes-inner::after {
    position: absolute;
    color: rgba(185,133,46,.82);
    font-family: Georgia, serif;
    font-size: 2rem;
    line-height: 1;
    pointer-events: none;
}

.hero-section .guest-wishes-inner::before {
    content: "\201C";
    left: 0;
    top: -3px;
}

.hero-section .guest-wishes-inner::after {
    content: "\201D";
    right: 0;
    bottom: -8px;
}

.hero-section .guest-wish-message {
    max-width: 600px !important;
    margin: 0 auto !important;
    color: #741127 !important;
    font-family: "Bodoni Moda", "Times New Roman", serif !important;
    font-size: clamp(1rem, 2vw, 1.15rem) !important;
    line-height: 1.42 !important;
    font-style: italic !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    text-wrap: balance;
}

.hero-section .guest-wish-name {
    margin-top: 8px !important;
    color: #8A5B2A !important;
    font-family: "Jost", Arial, sans-serif !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    text-shadow: none !important;
}

@media (max-width: 640px) {

    .hero-section .hero-name {
        color: #741127 !important;
    }

    .hero-section .script-line {
        color: #754016 !important;
    }

    .hero-section .countdown,
    .hero-section .countdown-wrap,
    .hero-section .countdown-wrapper,
    .hero-section .countdown-grid,
    .hero-section .countdown-container {
        border-radius: 20px !important;
        background: rgba(255,248,233,.84) !important;
    }

    .hero-section .countdown-value,
    .hero-section .countdown-number,
    .hero-section .countdown-item strong,
    .hero-section .countdown-cell strong,
    .hero-section .countdown-unit strong {
        font-size: clamp(1.1rem, 5vw, 1.42rem) !important;
    }

    .hero-section .countdown-label,
    .hero-section .countdown-item small,
    .hero-section .countdown-cell small,
    .hero-section .countdown-unit small {
        font-size: .56rem !important;
    }

    .hero-section .guest-wishes {
        width: 100% !important;
        margin-top: 10px !important;
        padding: 13px 12px 14px !important;
        border-radius: 18px !important;
        background: rgba(255,248,233,.86) !important;
    }

    .hero-section .guest-wishes-title {
        font-size: .78rem !important;
    }

    .hero-section .guest-wishes-subtitle {
        font-size: .62rem !important;
    }

    .hero-section .guest-wishes-inner {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .hero-section .guest-wish-message {
        max-width: 94% !important;
        font-size: .94rem !important;
        line-height: 1.34 !important;
    }

    .hero-section .guest-wish-name {
        margin-top: 6px !important;
        font-size: .70rem !important;
    }
}

/* ===== HERO READABILITY V6.8 END ===== */











/* ===== DEFINITIVE COUNTDOWN V6.9 START ===== */

/*
  Intentional color hierarchy:
  - Names / date: rich burgundy
  - Ampersand / accents: antique gold
  - Romantic script: warm bronze
  - Venue: warm brown
  - Countdown numbers: burgundy
  - Countdown labels: lighter antique gold
  - Wish heading: antique gold
*/

/* Give the top ornament a little more breathing room */
.hero-section .hero-cinematic-inner {
    padding-top: 30px !important;
}

.hero-section .hero-glass-panel {
    margin-top: 16px !important;
}

/* HERO COLOR HIERARCHY */

.hero-section .eyebrow {
    color: #7A1029 !important;
}

.hero-section .hero-name {
    color: #7A1029 !important;
}

.hero-section .hero-amp {
    color: #C59438 !important;
}

.hero-section .script-line {
    color: #8A5A24 !important;
}

.hero-section .hero-meta .lead {
    color: #7A1029 !important;
}

.hero-section .hero-meta p:not(.lead) {
    color: #6D4530 !important;
}

/* EXACT COUNTDOWN MARKUP */

.hero-section .wedding-countdown {
    width: 100% !important;
    min-height: 86px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    background: rgba(255,248,233,.22) !important;
    border: 1px solid rgba(197,148,56,.72) !important;
    border-radius: 20px !important;
    overflow: hidden !important;

    box-shadow:
        0 6px 18px rgba(82,24,38,.08),
        inset 0 1px 0 rgba(255,255,255,.25) !important;

    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
}

.hero-section .wedding-countdown-cell {
    min-width: 0 !important;
    padding: 10px 3px 9px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    text-align: center !important;
}

.hero-section .wedding-countdown-cell + .wedding-countdown-cell {
    border-left: 1px solid rgba(122,16,41,.18) !important;
}

.hero-section .wedding-countdown-number {
    color: #7A1029 !important;
    font-family: "Bodoni Moda", "Times New Roman", serif !important;
    font-size: clamp(1.78rem, 5.5vw, 2.35rem) !important;
    line-height: .95 !important;
    font-weight: 700 !important;

    text-shadow:
        0 1px 0 rgba(255,248,233,.84),
        0 2px 5px rgba(255,248,233,.42) !important;
}

/*
  These are deliberately MUCH larger than before.
  They are also a LIGHTER gold tone, not the same burgundy as the numbers.
*/
.hero-section .wedding-countdown-label {
    display: block !important;
    margin-top: 6px !important;

    color: #B77B2B !important;
    font-family: "Jost", Arial, sans-serif !important;
    font-size: clamp(.72rem, 2.6vw, .88rem) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .015em !important;

    opacity: 1 !important;
    visibility: visible !important;
    text-transform: none !important;

    text-shadow:
        0 1px 0 rgba(255,248,233,.92),
        0 1px 3px rgba(255,248,233,.56) !important;
}

/* RSVP keeps its own strong burgundy identity */
.hero-section .hero-rsvp {
    color: #FFF7E6 !important;
}

/* WISHES - separate color hierarchy */
.hero-section .guest-wishes-title {
    color: #A66F27 !important;
    font-weight: 800 !important;
}

.hero-section .guest-wish-message {
    color: #72142B !important;
}

.hero-section .guest-wish-name {
    color: #8A5A24 !important;
}

/* Maintain transparent glass */
.hero-section #guest-wishes-slot.guest-wishes {
    background: rgba(255,248,233,.20) !important;
    border-color: rgba(197,148,56,.66) !important;
    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
}

/* MOBILE */
@media (max-width: 640px) {

    .hero-section .hero-cinematic-inner {
        padding-top: 34px !important;
    }

    .hero-section .hero-glass-panel {
        margin-top: 18px !important;
    }

    .hero-section .wedding-countdown {
        min-height: 88px !important;
        border-radius: 18px !important;
    }

    .hero-section .wedding-countdown-cell {
        padding: 11px 2px 10px !important;
    }

    .hero-section .wedding-countdown-number {
        font-size: 1.92rem !important;
    }

    .hero-section .wedding-countdown-label {
        margin-top: 6px !important;
        font-size: .76rem !important;
        line-height: 1 !important;
        color: #B77B2B !important;
    }
}

/* ===== DEFINITIVE COUNTDOWN V6.9 END ===== */

/* ===== INVITATION COUPLE NAME LAYOUT V6.2.3 START ===== */

/*
   Proper responsive name layout.
   No pseudo-elements and no hidden real text.
*/

.invitation-copy .couple-script {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-family: "Great Vibes", cursive !important;
    font-weight: 400 !important;
}

.invitation-copy .couple-script span {
    display: inline !important;
}

/* Desktop / tablet: both names horizontal */
@media (min-width: 721px) {

    .invitation-copy .couple-script {
        white-space: nowrap !important;
        font-size: clamp(34px, 4vw, 58px) !important;
        line-height: 1.08 !important;
        padding-inline: 12px !important;
    }

    .invitation-copy .couple-script span + span::before {
        content: " ";
    }
}

/* Mobile: both names vertical in the exact same way */
@media (max-width: 720px) {

    .invitation-copy .couple-script {
        white-space: normal !important;
        font-size: clamp(36px, 10.5vw, 50px) !important;
        line-height: 1.02 !important;
        padding-inline: 8px !important;
    }

    .invitation-copy .couple-script span {
        display: block !important;
        width: 100% !important;
        white-space: nowrap !important;
    }

    .invitation-copy .couple-script span + span::before {
        content: none !important;
    }

    .invitation-copy .amp {
        margin-block: 8px !important;
    }
}

@media (max-width: 390px) {

    .invitation-copy .couple-script {
        font-size: clamp(33px, 10vw, 42px) !important;
    }
}

/* ===== INVITATION COUPLE NAME LAYOUT V6.2.3 END ===== */

/* ===== PANEL TRANSPARENCY BALANCE V6.2.4 START ===== */

/*
   Make the major ivory content panels use a similar level of
   transparency so the animated rose petals remain visible behind them.
   Text and borders stay fully opaque for readability.
*/

:root {
    --wedding-panel-ivory: rgba(255, 248, 233, 0.58);
    --wedding-panel-ivory-mobile: rgba(255, 248, 233, 0.66);
    --wedding-panel-soft: rgba(255, 250, 241, 0.52);
}


/* ------------------------------------------------------------
   Parents / Wedding Invitation
   ------------------------------------------------------------ */

.invitation-section .invitation-panel,
.invitation-section .ornate-panel {
    background: var(--wedding-panel-ivory) !important;
    backdrop-filter: blur(4px) saturate(108%);
    -webkit-backdrop-filter: blur(4px) saturate(108%);
}

/* Individual parent-detail cards were more opaque than the main panel. */
.invitation-section .family-block {
    background: var(--wedding-panel-soft) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* ------------------------------------------------------------
   Our Story
   ------------------------------------------------------------ */

/*
   Covers the current story layouts while avoiding the real photo itself.
*/
#story .story-panel,
#story .story-card,
#story .story-copy,
#story .content-card,
#story .ornate-panel,
.story-section .story-panel,
.story-section .story-card,
.story-section .story-copy,
.story-section .content-card,
.story-section .ornate-panel {
    background: var(--wedding-panel-ivory) !important;
    backdrop-filter: blur(4px) saturate(108%);
    -webkit-backdrop-filter: blur(4px) saturate(108%);
}


/* ------------------------------------------------------------
   Our Celebration
   ------------------------------------------------------------ */

/*
   Apply the same visual treatment to the celebration/schedule content.
*/
#celebration .celebration-panel,
#celebration .celebration-card,
#celebration .content-card,
#celebration .ornate-panel,
.celebration-section .celebration-panel,
.celebration-section .celebration-card,
.celebration-section .content-card,
.celebration-section .ornate-panel,
.schedule-section .schedule-panel,
.schedule-section .schedule-card,
.schedule-section .content-card,
.schedule-section .ornate-panel {
    background: var(--wedding-panel-ivory) !important;
    backdrop-filter: blur(4px) saturate(108%);
    -webkit-backdrop-filter: blur(4px) saturate(108%);
}


/* If these sections use a generic content block as their panel,
   make only that section's block translucent. */
#story .content-block,
.story-section .content-block,
#celebration .content-block,
.celebration-section .content-block,
.schedule-section .content-block {
    background-color: var(--wedding-panel-ivory) !important;
}


/* ------------------------------------------------------------
   Keep decorative borders/text crisp
   ------------------------------------------------------------ */

.invitation-section .invitation-panel,
.invitation-section .family-block,
#story .story-panel,
#story .story-card,
#story .story-copy,
#story .content-card,
.story-section .story-panel,
.story-section .story-card,
.story-section .story-copy,
.story-section .content-card,
#celebration .celebration-panel,
#celebration .celebration-card,
#celebration .content-card,
.celebration-section .celebration-panel,
.celebration-section .celebration-card,
.celebration-section .content-card,
.schedule-section .schedule-panel,
.schedule-section .schedule-card,
.schedule-section .content-card {
    border-color: rgba(201, 151, 68, 0.64) !important;
}


/* ------------------------------------------------------------
   Mobile readability
   Slightly less transparent because the panels are narrower.
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    .invitation-section .invitation-panel,
    .invitation-section .ornate-panel,
    #story .story-panel,
    #story .story-card,
    #story .story-copy,
    #story .content-card,
    #story .ornate-panel,
    .story-section .story-panel,
    .story-section .story-card,
    .story-section .story-copy,
    .story-section .content-card,
    .story-section .ornate-panel,
    #celebration .celebration-panel,
    #celebration .celebration-card,
    #celebration .content-card,
    #celebration .ornate-panel,
    .celebration-section .celebration-panel,
    .celebration-section .celebration-card,
    .celebration-section .content-card,
    .celebration-section .ornate-panel,
    .schedule-section .schedule-panel,
    .schedule-section .schedule-card,
    .schedule-section .content-card,
    .schedule-section .ornate-panel,
    #story .content-block,
    .story-section .content-block,
    #celebration .content-block,
    .celebration-section .content-block,
    .schedule-section .content-block {
        background: var(--wedding-panel-ivory-mobile) !important;
    }

    .invitation-section .family-block {
        background: rgba(255, 250, 241, 0.60) !important;
    }
}


/* ===== PANEL TRANSPARENCY BALANCE V6.2.4 END ===== */

/* ===== CELEBRATION TRANSPARENCY AND FAST REVEAL V6.2.5 START ===== */

/*
   Celebration is intentionally more transparent than the other ivory
   panels so the animated rose petals remain clearly visible.
*/
:root {
    --celebration-glass: rgba(255, 248, 233, 0.38);
    --celebration-card-glass: rgba(255, 250, 241, 0.34);
    --celebration-glass-mobile: rgba(255, 248, 233, 0.48);
}


/* ------------------------------------------------------------
   OUR CELEBRATION / SCHEDULE - OUTER PANEL
   ------------------------------------------------------------ */

#celebration .content-block,
#celebration .ornate-panel,
#celebration .celebration-panel,
#celebration .schedule-panel,
.celebration-section .content-block,
.celebration-section .ornate-panel,
.celebration-section .celebration-panel,
.celebration-section .schedule-panel,
.schedule-section .content-block,
.schedule-section .ornate-panel,
.schedule-section .celebration-panel,
.schedule-section .schedule-panel {
    background: var(--celebration-glass) !important;
    background-color: var(--celebration-glass) !important;

    backdrop-filter: blur(2.5px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(2.5px) saturate(105%) !important;
}


/* ------------------------------------------------------------
   INNER CELEBRATION CARDS / TIMELINE ITEMS
   These were the pieces that could still look opaque even when the
   section's main panel was transparent.
   ------------------------------------------------------------ */

#celebration .celebration-card,
#celebration .schedule-card,
#celebration .schedule-item,
#celebration .timeline-item,
#celebration .event-card,
#celebration .event-item,
.celebration-section .celebration-card,
.celebration-section .schedule-card,
.celebration-section .schedule-item,
.celebration-section .timeline-item,
.celebration-section .event-card,
.celebration-section .event-item,
.schedule-section .celebration-card,
.schedule-section .schedule-card,
.schedule-section .schedule-item,
.schedule-section .timeline-item,
.schedule-section .event-card,
.schedule-section .event-item {
    background: var(--celebration-card-glass) !important;
    background-color: var(--celebration-card-glass) !important;

    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;

    border-color: rgba(201, 151, 68, 0.56) !important;
}


/*
   Some versions use pseudo-elements as a solid ivory fill.
   Make those translucent as well without touching decorative lines.
*/
#celebration .schedule-card::before,
#celebration .celebration-card::before,
.celebration-section .schedule-card::before,
.celebration-section .celebration-card::before,
.schedule-section .schedule-card::before,
.schedule-section .celebration-card::before {
    background-color: rgba(255, 250, 241, 0.20) !important;
}


/* Mobile remains translucent, but slightly denser for readability. */
@media (max-width: 640px) {

    #celebration .content-block,
    #celebration .ornate-panel,
    #celebration .celebration-panel,
    #celebration .schedule-panel,
    .celebration-section .content-block,
    .celebration-section .ornate-panel,
    .celebration-section .celebration-panel,
    .celebration-section .schedule-panel,
    .schedule-section .content-block,
    .schedule-section .ornate-panel,
    .schedule-section .celebration-panel,
    .schedule-section .schedule-panel {
        background: var(--celebration-glass-mobile) !important;
        background-color: var(--celebration-glass-mobile) !important;
    }

    #celebration .celebration-card,
    #celebration .schedule-card,
    #celebration .schedule-item,
    #celebration .timeline-item,
    #celebration .event-card,
    #celebration .event-item,
    .celebration-section .celebration-card,
    .celebration-section .schedule-card,
    .celebration-section .schedule-item,
    .celebration-section .timeline-item,
    .celebration-section .event-card,
    .celebration-section .event-item,
    .schedule-section .celebration-card,
    .schedule-section .schedule-card,
    .schedule-section .schedule-item,
    .schedule-section .timeline-item,
    .schedule-section .event-card,
    .schedule-section .event-item {
        background: rgba(255, 250, 241, 0.42) !important;
        background-color: rgba(255, 250, 241, 0.42) !important;
    }
}


/* ------------------------------------------------------------
   FASTER SECTION / WEBPART REVEALS
   Keep the animations, but remove long stagger delays.
   ------------------------------------------------------------ */

.reveal,
.reveal-up,
.reveal-in,
.motion-reveal,
.section-reveal,
.animate-in,
.fade-in,
.fade-up,
[data-reveal],
[data-animate],
.section-inner,
.content-block,
.ornate-panel {
    transition-delay: 0s !important;
}


/*
   If the current class uses transitions, shorten only opacity/transform
   timing. This preserves the polished entrance instead of making it snap.
*/
.reveal,
.reveal-up,
.reveal-in,
.motion-reveal,
.section-reveal,
.animate-in,
.fade-in,
.fade-up,
[data-reveal],
[data-animate] {
    transition-duration: 0.38s !important;
}


/*
   Reduce large pre-reveal travel distances where supported.
   The item now has less distance to cover once triggered.
*/
.reveal:not(.is-visible),
.reveal-up:not(.is-visible),
.motion-reveal:not(.is-visible),
.section-reveal:not(.is-visible),
.fade-up:not(.is-visible),
[data-reveal]:not(.is-visible) {
    translate: 0 14px;
}


/* Respect reduced-motion accessibility. */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-up,
    .reveal-in,
    .motion-reveal,
    .section-reveal,
    .animate-in,
    .fade-in,
    .fade-up,
    [data-reveal],
    [data-animate] {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        translate: none !important;
    }
}

/* ===== CELEBRATION TRANSPARENCY AND FAST REVEAL V6.2.5 END ===== */

/* ===== SIMPLE GIFT EXPERIENCE V6.2.6 START ===== */

/*
   Keep the gift section elegant and immediate:
   - no lid flying
   - no QR rising animation
   - no exaggerated hover transforms
   - no decorative fake currency characters
   - modal opens immediately
*/

/* ------------------------------------------------------------
   Gift boxes
   ------------------------------------------------------------ */

.gift-box,
.gift-card,
.gift-wrap,
.gift-item {
    transform: none !important;
    animation: none !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

/* Remove complex child animations. */
.gift-box *,
.gift-card *,
.gift-wrap *,
.gift-item * {
    animation: none !important;
}

/* Stop lid/body/QR animation states from doing anything dramatic. */
.gift-box.is-open,
.gift-box.is-animating,
.gift-box.is-selected,
.gift-card.is-open,
.gift-card.is-animating,
.gift-card.is-selected {
    transform: none !important;
}

.gift-box .gift-lid,
.gift-box .gift-body,
.gift-box .gift-ribbon,
.gift-box .gift-bow,
.gift-box .gift-tag,
.gift-card .gift-lid,
.gift-card .gift-body,
.gift-card .gift-ribbon,
.gift-card .gift-bow,
.gift-card .gift-tag {
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* Very subtle hover only. */
@media (hover:hover) {
    .gift-box:hover,
    .gift-card:hover,
    .gift-wrap:hover,
    .gift-item:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 26px rgba(87, 46, 26, .10) !important;
    }
}

/* Remove malformed / decorative pseudo text such as mojibake currency glyphs. */
.gift-box::before,
.gift-box::after,
.gift-card::before,
.gift-card::after,
.gift-wrap::before,
.gift-wrap::after,
.gift-item::before,
.gift-item::after,
.gift-body::before,
.gift-body::after {
    content: none !important;
    display: none !important;
}

/* Keep Prem / Dharsh labels readable and elegant. */
.gift-tag,
.gift-name,
.gift-label {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}


/* ------------------------------------------------------------
   QR modal
   ------------------------------------------------------------ */

/* Remove dramatic modal animation. */
.qr-lightbox,
.gift-lightbox,
.modal-backdrop,
.lightbox {
    animation: none !important;
}

/* Simple darkened backdrop. */
.qr-lightbox,
.gift-lightbox {
    background: rgba(32, 27, 24, .58) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* Clean modal card. */
.qr-modal,
.gift-modal,
.qr-lightbox .modal-card,
.gift-lightbox .modal-card {
    width: min(92vw, 430px) !important;
    max-height: 90vh !important;

    padding: 18px !important;

    background: rgba(255, 250, 241, .98) !important;

    border: 1px solid rgba(201, 151, 68, .34) !important;
    border-radius: 22px !important;

    box-shadow: 0 18px 55px rgba(0, 0, 0, .22) !important;

    transform: none !important;
    animation: none !important;
}

/* QR image should be the visual focus. */
.qr-modal img,
.gift-modal img,
.qr-lightbox img,
.gift-lightbox img {
    display: block !important;

    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;

    margin: 0 auto 14px !important;

    object-fit: contain !important;

    border-radius: 12px !important;

    transform: none !important;
    animation: none !important;
}

/* Clean close button in the top-right. */
.qr-modal .close,
.qr-modal .modal-close,
.gift-modal .close,
.gift-modal .modal-close,
.qr-lightbox .close,
.qr-lightbox .modal-close,
.gift-lightbox .close,
.gift-lightbox .modal-close {
    position: absolute !important;

    top: 10px !important;
    right: 12px !important;
    left: auto !important;

    width: 36px !important;
    height: 36px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: rgba(255,255,255,.86) !important;

    font-size: 22px !important;
    line-height: 1 !important;

    box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;

    transform: none !important;
    animation: none !important;
}

/* Simple download button. */
.qr-download,
.download-qr,
.qr-modal .btn,
.gift-modal .btn {
    min-height: 46px !important;

    border-radius: 999px !important;

    transform: none !important;
    animation: none !important;

    transition:
        background-color .18s ease,
        box-shadow .18s ease !important;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    .qr-modal,
    .gift-modal,
    .qr-lightbox .modal-card,
    .gift-lightbox .modal-card {
        width: calc(100vw - 28px) !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .qr-modal img,
    .gift-modal img,
    .qr-lightbox img,
    .gift-lightbox img {
        max-width: 320px !important;
        border-radius: 10px !important;
    }

    /* Keep both gift boxes side-by-side as requested. */
    .gift-grid,
    .gifts-grid,
    .gift-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

/* ===== SIMPLE GIFT EXPERIENCE V6.2.6 END ===== */

/* ===== ORIGINAL GIFT DESIGN SEAMLESS V6.2.8 START ===== */

/*
   IMPORTANT:
   Keep the original gift-box artwork/layout.
   Only simplify motion and modal behaviour.
*/

/* No unwrap / bounce / spin / lift animation. */
.gift-box,
.gift-box *,
.gift-card,
.gift-card *,
.gift-wrap,
.gift-wrap * {
    animation: none !important;
}

/* Preserve the original design but prevent dramatic movement. */
.gift-box,
.gift-card,
.gift-wrap {
    transition: box-shadow .18s ease, filter .18s ease !important;
}

.gift-box:hover,
.gift-card:hover,
.gift-wrap:hover {
    transform: none !important;
}

/* Do not animate lid, bow, ribbon, tag or QR upward. */
.gift-lid,
.gift-bow,
.gift-ribbon,
.gift-tag,
.gift-qr,
.qr-rise {
    transition: none !important;
    animation: none !important;
}

/* Hide the accidental/mojibake decorative symbols inside the box only. */
.gift-body::before,
.gift-body::after {
    content: none !important;
    display: none !important;
}

/* QR lightbox should appear immediately and cleanly. */
.qr-lightbox,
.gift-lightbox,
.qr-modal,
.gift-modal {
    animation: none !important;
    transition: none !important;
}

/* Keep QR centered without changing the existing card design. */
.qr-lightbox img,
.gift-lightbox img,
.qr-modal img,
.gift-modal img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    animation: none !important;
}

/* Keep the existing download button styling; only stop animation. */
.qr-download,
.download-qr,
.qr-modal .btn,
.gift-modal .btn {
    transform: none !important;
    animation: none !important;
}

/* Keep two gift boxes side-by-side on mobile. */
@media (max-width: 640px) {
    .gift-grid,
    .gifts-grid,
    .gift-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ===== ORIGINAL GIFT DESIGN SEAMLESS V6.2.8 END ===== */

/* ===== GIFT SPECIAL CHARACTER CLEANUP V6.2.9 START ===== */

/*
   Preserve the original gift artwork and layout.
   Remove only accidental/decorative text glyphs that appear inside
   the gift box body.
*/

/* Most likely sources */
.gift-body::before,
.gift-body::after,
.gift-box-body::before,
.gift-box-body::after,
.gift-inner::before,
.gift-inner::after,
.gift-front::before,
.gift-front::after,
.gift-face::before,
.gift-face::after,
.gift-box .currency,
.gift-box .currency-symbol,
.gift-box .gift-symbol,
.gift-box .decorative-symbol,
.gift-card .currency,
.gift-card .currency-symbol,
.gift-card .gift-symbol,
.gift-card .decorative-symbol {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/*
   Some earlier versions placed the symbols using spans inside the
   lower gift body. Hide only those symbol-style elements; do not touch
   Prem/Dharsh labels or the bow/ribbon artwork.
*/
.gift-box .gift-body span[aria-hidden="true"],
.gift-card .gift-body span[aria-hidden="true"],
.gift-box-body span[aria-hidden="true"],
.gift-inner span[aria-hidden="true"] {
    display: none !important;
}

/* Keep the intended name tags visible. */
.gift-tag,
.gift-name,
.gift-label {
    display: initial !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== GIFT SPECIAL CHARACTER CLEANUP V6.2.9 END ===== */

/* ===== GIFT SYMBOL SAFETY V6.3.0 START ===== */

/*
   Hide only legacy decorative symbol elements inside the gift body.
   The gift artwork, ribbons, bows, tags and names are untouched.
*/
.gift-body .currency,
.gift-body .currency-symbol,
.gift-body .money-symbol,
.gift-body .gift-symbol,
.gift-body .decorative-symbol,
.gift-box-body .currency,
.gift-box-body .currency-symbol,
.gift-box-body .money-symbol,
.gift-box-body .gift-symbol,
.gift-box-body .decorative-symbol,
.gift-inner .currency,
.gift-inner .currency-symbol,
.gift-inner .money-symbol,
.gift-inner .gift-symbol,
.gift-inner .decorative-symbol {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ===== GIFT SYMBOL SAFETY V6.3.0 END ===== */

/* ===== GIFT MOJIBAKE HARD CLEAN V6.3.1 START ===== */

/*
   Final safety net for the two lower-side symbol positions visible in
   the original gift artwork. These selectors only suppress text-like
   decorative layers; bow, ribbon, tag and box artwork stay intact.
*/
.gift-body .symbols,
.gift-body .symbol,
.gift-body .money,
.gift-body .currency,
.gift-body .currency-symbol,
.gift-body .gift-symbol,
.gift-box-body .symbols,
.gift-box-body .symbol,
.gift-box-body .money,
.gift-box-body .currency,
.gift-box-body .currency-symbol,
.gift-box-body .gift-symbol,
.gift-front .symbols,
.gift-front .symbol,
.gift-front .money,
.gift-front .currency,
.gift-front .currency-symbol,
.gift-front .gift-symbol {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    font-size: 0 !important;
}

/* Ensure any legacy generated text on the lower gift body is empty. */
.gift-body::before,
.gift-body::after,
.gift-box-body::before,
.gift-box-body::after,
.gift-front::before,
.gift-front::after {
    content: "" !important;
}

/* ===== GIFT MOJIBAKE HARD CLEAN V6.3.1 END ===== */

/* ===== OUR CELEBRATION TRANSPARENCY V6.3.5 START ===== */

/*
   Make "Our Celebration" clearly more transparent so the
   rose petals remain visible through both the main panel and
   the inner schedule/event cards.
*/

:root {
    --celebration-panel-bg: rgba(255, 248, 233, 0.28);
    --celebration-card-bg: rgba(255, 250, 241, 0.24);
    --celebration-panel-bg-mobile: rgba(255, 248, 233, 0.38);
    --celebration-card-bg-mobile: rgba(255, 250, 241, 0.32);
}

/* Main celebration container */
#celebration .content-block,
#celebration .ornate-panel,
#celebration .celebration-panel,
#celebration .schedule-panel,
.celebration-section .content-block,
.celebration-section .ornate-panel,
.celebration-section .celebration-panel,
.celebration-section .schedule-panel,
.schedule-section .content-block,
.schedule-section .ornate-panel,
.schedule-section .celebration-panel,
.schedule-section .schedule-panel {
    background: var(--celebration-panel-bg) !important;
    background-color: var(--celebration-panel-bg) !important;

    backdrop-filter: blur(1.5px) saturate(103%) !important;
    -webkit-backdrop-filter: blur(1.5px) saturate(103%) !important;

    border-color: rgba(201, 151, 68, 0.46) !important;
}

/* Inner event / timeline cards */
#celebration .celebration-card,
#celebration .schedule-card,
#celebration .schedule-item,
#celebration .timeline-item,
#celebration .event-card,
#celebration .event-item,
.celebration-section .celebration-card,
.celebration-section .schedule-card,
.celebration-section .schedule-item,
.celebration-section .timeline-item,
.celebration-section .event-card,
.celebration-section .event-item,
.schedule-section .celebration-card,
.schedule-section .schedule-card,
.schedule-section .schedule-item,
.schedule-section .timeline-item,
.schedule-section .event-card,
.schedule-section .event-item {
    background: var(--celebration-card-bg) !important;
    background-color: var(--celebration-card-bg) !important;

    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;

    border-color: rgba(201, 151, 68, 0.42) !important;
}

/* Neutralize legacy pseudo-element fills that may still make
   the cards look opaque. */
#celebration .celebration-card::before,
#celebration .schedule-card::before,
#celebration .schedule-item::before,
#celebration .timeline-item::before,
#celebration .event-card::before,
#celebration .event-item::before,
.celebration-section .celebration-card::before,
.celebration-section .schedule-card::before,
.celebration-section .schedule-item::before,
.celebration-section .timeline-item::before,
.celebration-section .event-card::before,
.celebration-section .event-item::before,
.schedule-section .celebration-card::before,
.schedule-section .schedule-card::before,
.schedule-section .schedule-item::before,
.schedule-section .timeline-item::before,
.schedule-section .event-card::before,
.schedule-section .event-item::before {
    background: rgba(255, 250, 241, 0.10) !important;
    background-color: rgba(255, 250, 241, 0.10) !important;
}

/* Keep all wording fully opaque/readable */
#celebration h1,
#celebration h2,
#celebration h3,
#celebration p,
#celebration span,
.celebration-section h1,
.celebration-section h2,
.celebration-section h3,
.celebration-section p,
.celebration-section span,
.schedule-section h1,
.schedule-section h2,
.schedule-section h3,
.schedule-section p,
.schedule-section span {
    opacity: 1 !important;
}

/* Mobile: slightly denser for readability, but still visibly transparent */
@media (max-width: 640px) {

    #celebration .content-block,
    #celebration .ornate-panel,
    #celebration .celebration-panel,
    #celebration .schedule-panel,
    .celebration-section .content-block,
    .celebration-section .ornate-panel,
    .celebration-section .celebration-panel,
    .celebration-section .schedule-panel,
    .schedule-section .content-block,
    .schedule-section .ornate-panel,
    .schedule-section .celebration-panel,
    .schedule-section .schedule-panel {
        background: var(--celebration-panel-bg-mobile) !important;
        background-color: var(--celebration-panel-bg-mobile) !important;
    }

    #celebration .celebration-card,
    #celebration .schedule-card,
    #celebration .schedule-item,
    #celebration .timeline-item,
    #celebration .event-card,
    #celebration .event-item,
    .celebration-section .celebration-card,
    .celebration-section .schedule-card,
    .celebration-section .schedule-item,
    .celebration-section .timeline-item,
    .celebration-section .event-card,
    .celebration-section .event-item,
    .schedule-section .celebration-card,
    .schedule-section .schedule-card,
    .schedule-section .schedule-item,
    .schedule-section .timeline-item,
    .schedule-section .event-card,
    .schedule-section .event-item {
        background: var(--celebration-card-bg-mobile) !important;
        background-color: var(--celebration-card-bg-mobile) !important;
    }
}

/* ===== OUR CELEBRATION TRANSPARENCY V6.3.5 END ===== */

/* ===== MOBILE HERO POLISH V6.4.1 START ===== */

/*
   Mobile-only hero refinement:
   - Larger information panel
   - More visible cursive supporting line
   - Stronger and larger RSVP button
   - Better spacing while preserving nav/music/countdown logic
*/

@media (max-width: 640px) {

    /* Give the hero copy more of the available screen width. */
    .hero-section .hero-cinematic-inner,
    .hero-section .section-inner {
        width: 100% !important;
        max-width: none !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /*
       Make the main information panel fill the mobile composition
       instead of appearing like a small card floating in the scene.
    */
    .hero-section .hero-glass-panel,
    .hero-section .hero-copy {
        width: calc(100vw - 28px) !important;
        max-width: 520px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;

        padding:
            clamp(28px, 5.5vh, 44px)
            18px
            clamp(24px, 4.5vh, 36px) !important;

        border-radius: 30px !important;

        background: rgba(105, 39, 45, 0.48) !important;
        border: 1.5px solid rgba(244, 202, 116, 0.62) !important;

        box-shadow:
            0 18px 42px rgba(45, 14, 19, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;

        backdrop-filter: blur(7px) saturate(108%) !important;
        -webkit-backdrop-filter: blur(7px) saturate(108%) !important;
    }

    /* Slightly stronger label without becoming too web-like. */
    .hero-section .eyebrow {
        font-family: "Jost", Arial, sans-serif !important;
        font-size: 0.67rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.18em !important;
        margin-bottom: 8px !important;
    }

    /* Keep the names elegant and large. */
    .hero-section .hero-couple-names {
        margin-top: 2px !important;
        margin-bottom: 7px !important;
        gap: 0 !important;
    }

    .hero-section .hero-name {
        font-family: "Bodoni Moda", "Times New Roman", serif !important;
        font-size: clamp(3.65rem, 17vw, 5rem) !important;
        line-height: 0.90 !important;
        letter-spacing: -0.045em !important;
        font-weight: 500 !important;
    }

    .hero-section .hero-amp {
        font-family: "Great Vibes", "Brush Script MT", cursive !important;
        font-size: clamp(2.25rem, 10vw, 3rem) !important;
        line-height: 0.80 !important;
        margin: 3px 0 5px !important;
        font-weight: 400 !important;
    }

    /*
       Force the romantic line to use the cursive face.
       This overrides the generic v6.4 mobile typography rule.
    */
    .hero-section .script-line {
        font-family: "Great Vibes", "Brush Script MT", cursive !important;
        font-size: clamp(1.55rem, 7.2vw, 2.05rem) !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
        font-weight: 400 !important;
        margin: 8px 0 13px !important;
        text-transform: none !important;
    }

    .hero-section .hero-meta {
        margin-top: 2px !important;
        margin-bottom: 13px !important;
    }

    .hero-section .hero-meta .lead {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
    }

    .hero-section .hero-meta p:not(.lead) {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }

    /* Make the countdown feel integrated with the larger panel. */
    .hero-section .countdown,
    .hero-section .countdown-grid {
        width: 100% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-section .countdown {
        margin-top: 13px !important;
        margin-bottom: 16px !important;
    }

    /*
       Bigger, clearer RSVP CTA.
       Still fits comfortably above the fixed navigation.
    */
    .hero-section .hero-rsvp {
        width: min(82%, 310px) !important;
        min-height: 54px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin-top: 5px !important;
        padding: 14px 28px !important;

        border-radius: 999px !important;

        font-family: "Jost", Arial, sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.035em !important;

        box-shadow:
            0 10px 24px rgba(70, 0, 18, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
    }

    /* Keep the hero composition clear of the fixed bottom nav. */
    .hero-section .hero-cinematic-inner {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 390px) {

    .hero-section .hero-glass-panel,
    .hero-section .hero-copy {
        width: calc(100vw - 20px) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero-section .hero-name {
        font-size: clamp(3.25rem, 16vw, 4.25rem) !important;
    }

    .hero-section .hero-rsvp {
        width: 88% !important;
        min-height: 52px !important;
    }
}

/* ===== MOBILE HERO POLISH V6.4.1 END ===== */

/* ===== MOBILE HERO FRAME FIT V6.4.2 START ===== */

/*
   Goal:
   - Center the hero information panel perfectly.
   - Make it fill almost the full inner wedding frame.
   - Keep the whole mandapam background visible through it.
   - Use a light transparent wash rather than a solid maroon board.
   - Preserve countdown, RSVP, music and bottom-nav behavior.
*/

@media (max-width: 640px) {

    .hero-section {
        overflow: hidden !important;
    }

    /*
       Remove the side offset introduced by earlier mobile width rules.
       The content wrapper now uses the full hero width.
    */
    .hero-section .hero-cinematic-inner,
    .hero-section .section-inner {
        width: 100% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /*
       Fit the information board to the inner visual frame.
       A 10px gutter keeps it just inside the decorative edge.
    */
    .hero-section .hero-glass-panel,
    .hero-section .hero-copy {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;

        width: calc(100% - 20px) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;

        padding:
            clamp(24px, 4.2vh, 34px)
            clamp(16px, 4vw, 22px)
            clamp(22px, 3.8vh, 30px) !important;

        border-radius: 24px !important;

        /*
           Much more transparent than v6.4.1.
           The background should remain clearly visible THROUGH the panel.
        */
        background: rgba(92, 24, 39, 0.17) !important;
        background-color: rgba(92, 24, 39, 0.17) !important;

        border: 1.25px solid rgba(232, 185, 94, 0.72) !important;

        backdrop-filter: blur(1.5px) saturate(104%) !important;
        -webkit-backdrop-filter: blur(1.5px) saturate(104%) !important;

        box-shadow:
            0 10px 28px rgba(47, 10, 19, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    }

    /*
       Keep text readable while the panel itself is transparent.
    */
    .hero-section .hero-copy,
    .hero-section .hero-copy * {
        text-shadow: 0 1px 4px rgba(52, 10, 20, 0.20);
    }

    .hero-section .hero-couple-names {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-section .hero-name {
        font-size: clamp(3.35rem, 16vw, 4.75rem) !important;
        line-height: 0.91 !important;
    }

    .hero-section .hero-amp {
        font-family: "Great Vibes", "Brush Script MT", cursive !important;
        font-size: clamp(2.2rem, 9.5vw, 2.9rem) !important;
        line-height: 0.84 !important;
    }

    .hero-section .script-line {
        font-family: "Great Vibes", "Brush Script MT", cursive !important;
        font-size: clamp(1.55rem, 7vw, 2rem) !important;
        line-height: 1.02 !important;
        margin-top: 9px !important;
        margin-bottom: 12px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    /*
       Use the panel width for the countdown instead of leaving side gaps.
    */
    .hero-section .countdown,
    .hero-section .countdown-grid {
        width: 100% !important;
        max-width: none !important;
    }

    /*
       Stronger CTA without returning to a solid oversized board.
    */
    .hero-section .hero-rsvp {
        width: min(88%, 340px) !important;
        min-height: 56px !important;
        margin-top: 8px !important;

        font-size: 1rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.025em !important;

        border: 1px solid rgba(244, 202, 116, 0.34) !important;

        box-shadow:
            0 12px 26px rgba(74, 0, 20, 0.27),
            inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    }
}

@media (max-width: 390px) {

    .hero-section .hero-glass-panel,
    .hero-section .hero-copy {
        width: calc(100% - 14px) !important;
        border-radius: 21px !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .hero-section .hero-rsvp {
        width: 92% !important;
    }
}

/* ===== MOBILE HERO FRAME FIT V6.4.2 END ===== */

/* ===== MOBILE HERO VERTICAL STRETCH V6.4.3 START ===== */

@media (max-width: 640px) {

    /*
       Stretch the transparent information panel vertically so it feels
       integrated with the whole frame. The title sits nearer the top,
       while RSVP lands just above the music control.
    */
    .hero-section .hero-glass-panel,
    .hero-section .hero-copy {
        min-height: calc(100vh - 182px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;

        padding-top: clamp(24px, 4vh, 34px) !important;
        padding-bottom: clamp(88px, 12vh, 108px) !important;

        background: rgba(92, 24, 39, 0.16) !important;
        background-color: rgba(92, 24, 39, 0.16) !important;
    }

    /*
       Push the content vertically across the board instead of keeping
       everything bunched into the middle.
    */
    .hero-section .eyebrow {
        margin-top: 0 !important;
        margin-bottom: 8px !important;

        color: rgba(255, 249, 238, 0.96) !important;
        text-shadow: 0 2px 6px rgba(77, 15, 29, 0.35) !important;
    }

    .hero-section .hero-couple-names {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    .hero-section .hero-name {
        color: #fff8ec !important;
        text-shadow:
            0 3px 10px rgba(73, 9, 26, 0.38),
            0 1px 2px rgba(73, 9, 26, 0.22) !important;
    }

    .hero-section .hero-amp {
        font-family: "Great Vibes", "Brush Script MT", cursive !important;
        color: #f1c86b !important;
        text-shadow: 0 2px 6px rgba(70, 8, 24, 0.25) !important;
    }

    .hero-section .script-line {
        font-family: "Great Vibes", "Brush Script MT", cursive !important;
        font-size: clamp(1.7rem, 7.6vw, 2.2rem) !important;
        line-height: 1.02 !important;
        color: #f3c86c !important;

        margin-top: 8px !important;
        margin-bottom: 18px !important;

        text-shadow:
            0 2px 6px rgba(73, 9, 26, 0.32),
            0 1px 1px rgba(255, 255, 255, 0.10) !important;
    }

    .hero-section .hero-meta {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    .hero-section .hero-meta .lead {
        color: #fffaf0 !important;
        font-size: 1.08rem !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 5px rgba(70, 8, 24, 0.32) !important;
    }

    .hero-section .hero-meta p:not(.lead) {
        color: rgba(255, 250, 240, 0.96) !important;
        font-size: 0.82rem !important;
        font-weight: 500 !important;
        text-shadow: 0 2px 5px rgba(70, 8, 24, 0.28) !important;
    }

    /*
       Increase countdown slightly and make the numerals easier to read.
    */
    .hero-section .countdown {
        margin-top: 8px !important;
        margin-bottom: 18px !important;
    }

    .hero-section .countdown-grid {
        min-height: 60px !important;
    }

    .hero-section .countdown-value,
    .hero-section .countdown-number,
    .hero-section .countdown strong {
        font-size: clamp(1.3rem, 5.4vw, 1.65rem) !important;
        line-height: 1 !important;
        color: #fff8ec !important;
        text-shadow: 0 2px 5px rgba(72, 9, 25, 0.30) !important;
    }

    .hero-section .countdown-label,
    .hero-section .countdown span {
        color: rgba(255, 248, 236, 0.92) !important;
    }

    /*
       Use auto top margin so RSVP naturally settles toward the bottom
       of the stretched panel, just above the music button.
    */
    .hero-section .hero-rsvp {
        margin-top: auto !important;
        margin-bottom: 0 !important;

        width: min(90%, 350px) !important;
        min-height: 58px !important;

        background: linear-gradient(
            180deg,
            rgba(142, 14, 45, 0.98),
            rgba(111, 4, 31, 0.98)
        ) !important;

        color: #fffaf1 !important;

        border: 1px solid rgba(244, 202, 116, 0.42) !important;

        font-size: 1rem !important;
        font-weight: 700 !important;

        box-shadow:
            0 12px 28px rgba(74, 0, 20, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }
}

@media (max-width: 390px) {

    .hero-section .hero-glass-panel,
    .hero-section .hero-copy {
        min-height: calc(100vh - 172px) !important;
        padding-bottom: 84px !important;
    }

    .hero-section .script-line {
        font-size: clamp(1.55rem, 7vw, 1.95rem) !important;
    }

    .hero-section .countdown-value,
    .hero-section .countdown-number,
    .hero-section .countdown strong {
        font-size: 1.28rem !important;
    }
}

/* ===== MOBILE HERO VERTICAL STRETCH V6.4.3 END ===== */

/* ===== HERO REFERENCE MATCH V6.4.4 START ===== */

@media (max-width: 640px) {

    /* Preserve the full wedding artwork and existing transparent frame. */
    .hero-section .hero-glass-panel,
    .hero-section .hero-copy {
        min-height: calc(100vh - 150px) !important;
        width: calc(100% - 18px) !important;
        padding: 28px 18px 82px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        background: rgba(92, 24, 39, 0.15) !important;
        border: 1.3px solid rgba(238, 194, 104, 0.78) !important;
        border-radius: 26px !important;

        backdrop-filter: blur(1.2px) saturate(104%) !important;
        -webkit-backdrop-filter: blur(1.2px) saturate(104%) !important;
    }

    /* Top invitation label */
    .hero-section .eyebrow {
        margin: 0 0 11px !important;
        color: #fff9ec !important;
        font-family: "Jost", Arial, sans-serif !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.22em !important;
        text-shadow: 0 2px 7px rgba(63, 8, 23, 0.42) !important;
    }

    /* Couple names */
    .hero-section .hero-couple-names {
        margin: 0 0 9px !important;
        width: 100% !important;
    }

    .hero-section .hero-name {
        color: #fff8e9 !important;
        font-family: "Bodoni Moda", "Times New Roman", serif !important;
        font-size: clamp(3.65rem, 17vw, 5rem) !important;
        line-height: 0.88 !important;
        font-weight: 500 !important;
        letter-spacing: -0.045em !important;
        text-shadow: 0 3px 12px rgba(70, 8, 25, 0.42) !important;
    }

    .hero-section .hero-amp {
        color: #f3cc70 !important;
        font-family: "Great Vibes", "Brush Script MT", cursive !important;
        font-size: clamp(2.45rem, 10vw, 3.15rem) !important;
        line-height: 0.78 !important;
        font-weight: 400 !important;
        margin: 5px 0 7px !important;
        text-shadow: 0 2px 7px rgba(74, 9, 26, 0.32) !important;
    }

    /* Romantic line: stronger cursive treatment */
    .hero-section .script-line {
        color: #f7d77f !important;
        font-family: "Great Vibes", "Brush Script MT", cursive !important;
        font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
        line-height: 1.04 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        margin: 8px 0 20px !important;
        text-shadow:
            0 2px 7px rgba(72, 7, 24, 0.42),
            0 0 12px rgba(255, 222, 142, 0.10) !important;
    }

    /* Date and venue */
    .hero-section .hero-meta {
        margin: 0 0 17px !important;
    }

    .hero-section .hero-meta .lead {
        color: #fff9ed !important;
        font-size: 1.08rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        margin-bottom: 5px !important;
        text-shadow: 0 2px 7px rgba(67, 7, 23, 0.42) !important;
    }

    .hero-section .hero-meta p:not(.lead) {
        color: rgba(255, 249, 236, 0.97) !important;
        font-size: 0.82rem !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-shadow: 0 2px 6px rgba(67, 7, 23, 0.40) !important;
    }

    /* Larger glass countdown */
    .hero-section .countdown {
        width: 100% !important;
        margin: 8px 0 20px !important;
    }

    .hero-section .countdown-grid {
        width: 100% !important;
        min-height: 68px !important;
        background: rgba(104, 37, 46, 0.12) !important;
        border: 1px solid rgba(240, 199, 111, 0.55) !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        backdrop-filter: blur(0.8px) !important;
        -webkit-backdrop-filter: blur(0.8px) !important;
    }

    .hero-section .countdown-value,
    .hero-section .countdown-number,
    .hero-section .countdown strong {
        color: #fff9eb !important;
        font-family: "Bodoni Moda", "Times New Roman", serif !important;
        font-size: clamp(1.5rem, 6.2vw, 1.85rem) !important;
        font-weight: 600 !important;
        line-height: 0.95 !important;
        text-shadow: 0 2px 6px rgba(66, 6, 22, 0.38) !important;
    }

    .hero-section .countdown-label {
        color: rgba(255, 247, 230, 0.96) !important;
        font-family: "Jost", Arial, sans-serif !important;
        font-size: 0.63rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em !important;
    }

    /*
       Position CTA in the lower part of the glass frame.
       The spacer is flexible, but capped so the button does not float
       too high or collide with the fixed music/navigation controls.
    */
    .hero-section .hero-rsvp {
        margin-top: auto !important;
        margin-bottom: 0 !important;

        width: min(88%, 350px) !important;
        min-height: 60px !important;
        padding: 15px 30px !important;

        color: #fffaf0 !important;
        background: linear-gradient(
            180deg,
            rgba(150, 13, 49, 0.98),
            rgba(111, 3, 31, 0.98)
        ) !important;

        border: 1.25px solid rgba(244, 203, 116, 0.58) !important;
        border-radius: 999px !important;

        font-family: "Bodoni Moda", "Times New Roman", serif !important;
        font-size: 1.12rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em !important;

        box-shadow:
            0 13px 28px rgba(71, 0, 19, 0.30),
            inset 0 1px 0 rgba(255,255,255,0.14) !important;
    }
}

@media (max-width: 390px) {
    .hero-section .hero-glass-panel,
    .hero-section .hero-copy {
        width: calc(100% - 12px) !important;
        min-height: calc(100vh - 142px) !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
        padding-bottom: 78px !important;
    }

    .hero-section .hero-name {
        font-size: clamp(3.35rem, 16vw, 4.45rem) !important;
    }

    .hero-section .script-line {
        font-size: clamp(1.65rem, 7.5vw, 2.05rem) !important;
    }

    .hero-section .countdown-grid {
        min-height: 64px !important;
    }

    .hero-section .hero-rsvp {
        width: 91% !important;
        min-height: 58px !important;
    }
}

/* ===== HERO REFERENCE MATCH V6.4.4 END ===== */

/* ===== GUEST WISHES BELOW RSVP V6.7.2 START ===== */

.hero-section .hero-rsvp + .guest-wishes {
    margin-top: 14px;
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .hero-section .hero-rsvp + .guest-wishes {
        margin-top: 10px;
        margin-bottom: 0;
        min-height: 78px;
    }

    .hero-section .guest-wish-message {
        max-width: 92%;
    }
}

/* ===== GUEST WISHES BELOW RSVP V6.7.2 END ===== */

/* ===== CLEAN HERO V6.8.1 START ===== */

/* ---------- HERO TYPOGRAPHY ---------- */

.hero-section .hero-glass-panel .eyebrow {
    color: #6E1025 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(255,248,233,.72) !important;
}

.hero-section .hero-glass-panel .hero-couple-names .hero-name {
    color: #7A1029 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.88),
        0 3px 10px rgba(255,248,233,.58) !important;
}

.hero-section .hero-glass-panel .hero-couple-names .hero-amp {
    color: #BD882D !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.84),
        0 2px 7px rgba(255,248,233,.52) !important;
}

.hero-section .hero-glass-panel .script-line {
    color: #754018 !important;
    font-weight: 500 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.92),
        0 2px 5px rgba(255,248,233,.58) !important;
}

.hero-section .hero-glass-panel .hero-meta,
.hero-section .hero-glass-panel .hero-meta p,
.hero-section .hero-glass-panel .hero-meta .lead {
    color: #731127 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.94),
        0 2px 5px rgba(255,248,233,.55) !important;
}

.hero-section .hero-glass-panel .hero-meta .lead {
    font-weight: 800 !important;
}

/* ---------- COUNTDOWN ---------- */

/* Force the actual countdown surface to be one clean panel */
.hero-section .hero-glass-panel [class*="countdown"] {
    box-shadow: none;
}

.hero-section .hero-glass-panel .countdown,
.hero-section .hero-glass-panel .countdown-wrap,
.hero-section .hero-glass-panel .countdown-wrapper,
.hero-section .hero-glass-panel .countdown-grid,
.hero-section .hero-glass-panel .countdown-container {
    width: 100% !important;
    background: rgba(255,248,233,.88) !important;
    border: 1px solid rgba(190,140,48,.82) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
        0 8px 22px rgba(75,18,31,.12),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* Kill old muddy cell backgrounds */
.hero-section .hero-glass-panel .countdown-item,
.hero-section .hero-glass-panel .countdown-cell,
.hero-section .hero-glass-panel .countdown-unit {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Dividers */
.hero-section .hero-glass-panel .countdown-item + .countdown-item,
.hero-section .hero-glass-panel .countdown-cell + .countdown-cell,
.hero-section .hero-glass-panel .countdown-unit + .countdown-unit {
    border-left: 1px solid rgba(190,140,48,.36) !important;
}

/* Catch numbers regardless of Countdown.razor class naming */
.hero-section .hero-glass-panel .countdown strong,
.hero-section .hero-glass-panel .countdown-wrap strong,
.hero-section .hero-glass-panel .countdown-wrapper strong,
.hero-section .hero-glass-panel .countdown-grid strong,
.hero-section .hero-glass-panel .countdown-container strong,
.hero-section .hero-glass-panel .countdown-value,
.hero-section .hero-glass-panel .countdown-number {
    color: #741127 !important;
    opacity: 1 !important;
    font-family: "Bodoni Moda", "Times New Roman", serif !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* Catch labels regardless of class naming */
.hero-section .hero-glass-panel .countdown small,
.hero-section .hero-glass-panel .countdown-wrap small,
.hero-section .hero-glass-panel .countdown-wrapper small,
.hero-section .hero-glass-panel .countdown-grid small,
.hero-section .hero-glass-panel .countdown-container small,
.hero-section .hero-glass-panel .countdown-label {
    color: #7A1029 !important;
    opacity: .92 !important;
    font-family: "Jost", Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .035em !important;
    text-shadow: none !important;
}

/* ---------- RSVP ---------- */

.hero-section .hero-rsvp {
    background: linear-gradient(180deg,#A51137 0%,#870A2A 100%) !important;
    color: #FFF8E9 !important;
    border: 1px solid rgba(211,163,66,.82) !important;
    box-shadow: 0 8px 20px rgba(76,8,27,.18) !important;
}

/* ---------- WISHES ---------- */

/*
   Important:
   The old .guest-wishes rule was display:flex in a row.
   That is why "Kind Words" appeared on the left and the message on the right.
*/
.hero-section #guest-wishes-slot.guest-wishes {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 12px auto 0 !important;
    padding: 14px 16px 15px !important;
    box-sizing: border-box !important;
    background: rgba(255,248,233,.89) !important;
    border: 1px solid rgba(190,140,48,.76) !important;
    border-radius: 18px !important;
    box-shadow:
        0 7px 20px rgba(77,18,32,.11),
        inset 0 1px 0 rgba(255,255,255,.88) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    text-align: center !important;
}

.hero-section #guest-wishes-slot.guest-wishes[hidden] {
    display: none !important;
}

.hero-section .guest-wishes-heading {
    width: 100% !important;
    margin: 0 0 7px !important;
    text-align: center !important;
}

.hero-section .guest-wishes-title {
    color: #741127 !important;
    font-family: "Jost", Arial, sans-serif !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

.hero-section .guest-wishes-inner {
    width: 100% !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.hero-section .guest-wishes-inner::before,
.hero-section .guest-wishes-inner::after {
    color: rgba(185,133,46,.72) !important;
    font-size: 1.45rem !important;
}

.hero-section .guest-wish-message {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    color: #6F1026 !important;
    font-family: "Bodoni Moda", "Times New Roman", serif !important;
    font-size: 1rem !important;
    line-height: 1.32 !important;
    font-style: italic !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-shadow: none !important;
}

.hero-section .guest-wish-name {
    width: 100% !important;
    margin-top: 6px !important;
    color: #84511F !important;
    font-family: "Jost", Arial, sans-serif !important;
    font-size: .68rem !important;
    line-height: 1.2 !important;
    font-style: normal !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-shadow: none !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 640px) {

    .hero-section .hero-glass-panel .hero-couple-names .hero-name {
        color: #781128 !important;
    }

    .hero-section .hero-glass-panel .script-line {
        color: #704018 !important;
    }

    .hero-section .hero-glass-panel .countdown,
    .hero-section .hero-glass-panel .countdown-wrap,
    .hero-section .hero-glass-panel .countdown-wrapper,
    .hero-section .hero-glass-panel .countdown-grid,
    .hero-section .hero-glass-panel .countdown-container {
        min-height: 64px !important;
        border-radius: 18px !important;
        background: rgba(255,248,233,.90) !important;
    }

    .hero-section .hero-glass-panel .countdown strong,
    .hero-section .hero-glass-panel .countdown-wrap strong,
    .hero-section .hero-glass-panel .countdown-wrapper strong,
    .hero-section .hero-glass-panel .countdown-grid strong,
    .hero-section .hero-glass-panel .countdown-container strong,
    .hero-section .hero-glass-panel .countdown-value,
    .hero-section .hero-glass-panel .countdown-number {
        font-size: 1.12rem !important;
    }

    .hero-section .hero-glass-panel .countdown small,
    .hero-section .hero-glass-panel .countdown-wrap small,
    .hero-section .hero-glass-panel .countdown-wrapper small,
    .hero-section .hero-glass-panel .countdown-grid small,
    .hero-section .hero-glass-panel .countdown-container small,
    .hero-section .hero-glass-panel .countdown-label {
        font-size: .51rem !important;
    }

    .hero-section #guest-wishes-slot.guest-wishes {
        margin-top: 10px !important;
        padding: 12px 12px 13px !important;
        border-radius: 16px !important;
    }

    .hero-section .guest-wishes-title {
        font-size: .66rem !important;
    }

    .hero-section .guest-wishes-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero-section .guest-wish-message {
        font-size: .91rem !important;
        line-height: 1.28 !important;
    }

    .hero-section .guest-wish-name {
        font-size: .64rem !important;
    }
}

/* ===== CLEAN HERO V6.8.1 END ===== */

/* ===== TRANSPARENT COUNTDOWN WISHES V6.8.2 START ===== */

/*
  Transparent glass surfaces:
  background remains clearly visible while text stays readable.
*/

/* COUNTDOWN */
.hero-section .hero-glass-panel .countdown,
.hero-section .hero-glass-panel .countdown-wrap,
.hero-section .hero-glass-panel .countdown-wrapper,
.hero-section .hero-glass-panel .countdown-grid,
.hero-section .hero-glass-panel .countdown-container {
    background: rgba(255,248,233,.28) !important;
    border: 1px solid rgba(185,133,46,.70) !important;
    box-shadow:
        0 5px 16px rgba(77,18,32,.08),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* Each countdown cell stays transparent */
.hero-section .hero-glass-panel .countdown-item,
.hero-section .hero-glass-panel .countdown-cell,
.hero-section .hero-glass-panel .countdown-unit {
    background: transparent !important;
}

/* Strong but subtle dividers */
.hero-section .hero-glass-panel .countdown-item + .countdown-item,
.hero-section .hero-glass-panel .countdown-cell + .countdown-cell,
.hero-section .hero-glass-panel .countdown-unit + .countdown-unit {
    border-left: 1px solid rgba(122,16,41,.24) !important;
}

/* Numbers */
.hero-section .hero-glass-panel .countdown strong,
.hero-section .hero-glass-panel .countdown-wrap strong,
.hero-section .hero-glass-panel .countdown-wrapper strong,
.hero-section .hero-glass-panel .countdown-grid strong,
.hero-section .hero-glass-panel .countdown-container strong,
.hero-section .hero-glass-panel .countdown-value,
.hero-section .hero-glass-panel .countdown-number {
    color: #681024 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.78),
        0 1px 4px rgba(255,248,233,.45) !important;
}

/*
  Labels need explicit visibility. Previous rules inherited tiny/light
  styles from the original countdown.
*/
.hero-section .hero-glass-panel .countdown small,
.hero-section .hero-glass-panel .countdown-wrap small,
.hero-section .hero-glass-panel .countdown-wrapper small,
.hero-section .hero-glass-panel .countdown-grid small,
.hero-section .hero-glass-panel .countdown-container small,
.hero-section .hero-glass-panel .countdown-label,
.hero-section .hero-glass-panel .countdown-item span:last-child,
.hero-section .hero-glass-panel .countdown-cell span:last-child,
.hero-section .hero-glass-panel .countdown-unit span:last-child {
    display: block !important;
    visibility: visible !important;
    color: #681024 !important;
    opacity: 1 !important;
    font-family: "Jost", Arial, sans-serif !important;
    font-size: .62rem !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.78),
        0 1px 3px rgba(255,248,233,.40) !important;
}

/* WISHES: fixed height sized for the maximum displayed message */
.hero-section #guest-wishes-slot.guest-wishes {
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
    overflow: hidden !important;
    flex: 0 0 154px !important;

    background: rgba(255,248,233,.24) !important;
    border: 1px solid rgba(185,133,46,.68) !important;
    box-shadow:
        0 5px 16px rgba(77,18,32,.07),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 14px 16px !important;
}

.hero-section #guest-wishes-slot.guest-wishes[hidden] {
    display: none !important;
}

/* Fixed heading area */
.hero-section .guest-wishes-heading {
    flex: 0 0 18px !important;
    height: 18px !important;
    margin: 0 0 8px !important;
}

/* Fixed message/name area so every wish card remains identical in size */
.hero-section .guest-wishes-inner {
    width: 100% !important;
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
    flex: 0 0 102px !important;
    padding: 0 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.hero-section .guest-wishes-title {
    color: #681024 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(255,248,233,.52) !important;
}

.hero-section .guest-wish-message {
    width: 100% !important;
    max-width: 540px !important;
    max-height: 72px !important;
    overflow: hidden !important;
    color: #681024 !important;
    opacity: 1 !important;
    font-size: .94rem !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.78),
        0 1px 3px rgba(255,248,233,.36) !important;
}

.hero-section .guest-wish-name {
    flex: 0 0 auto !important;
    margin-top: 6px !important;
    color: #681024 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(255,248,233,.48) !important;
}

/* Quotes stay decorative, but do not reduce readability */
.hero-section .guest-wishes-inner::before,
.hero-section .guest-wishes-inner::after {
    color: rgba(145,91,20,.76) !important;
}

/* RSVP is also slightly translucent so the scene remains visible */
.hero-section .hero-rsvp {
    background: linear-gradient(
        180deg,
        rgba(157,11,49,.91) 0%,
        rgba(126,7,38,.91) 100%
    ) !important;
    border-color: rgba(205,157,58,.80) !important;
}

/* MOBILE */
@media (max-width: 640px) {

    .hero-section .hero-glass-panel .countdown,
    .hero-section .hero-glass-panel .countdown-wrap,
    .hero-section .hero-glass-panel .countdown-wrapper,
    .hero-section .hero-glass-panel .countdown-grid,
    .hero-section .hero-glass-panel .countdown-container {
        background: rgba(255,248,233,.30) !important;
        min-height: 66px !important;
    }

    .hero-section .hero-glass-panel .countdown small,
    .hero-section .hero-glass-panel .countdown-wrap small,
    .hero-section .hero-glass-panel .countdown-wrapper small,
    .hero-section .hero-glass-panel .countdown-grid small,
    .hero-section .hero-glass-panel .countdown-container small,
    .hero-section .hero-glass-panel .countdown-label,
    .hero-section .hero-glass-panel .countdown-item span:last-child,
    .hero-section .hero-glass-panel .countdown-cell span:last-child,
    .hero-section .hero-glass-panel .countdown-unit span:last-child {
        font-size: .58rem !important;
        line-height: 1.05 !important;
        letter-spacing: .035em !important;
    }

    .hero-section #guest-wishes-slot.guest-wishes {
        height: 148px !important;
        min-height: 148px !important;
        max-height: 148px !important;
        flex-basis: 148px !important;
        padding: 12px 12px !important;
        background: rgba(255,248,233,.26) !important;
    }

    .hero-section .guest-wishes-heading {
        flex-basis: 17px !important;
        height: 17px !important;
        margin-bottom: 6px !important;
    }

    .hero-section .guest-wishes-inner {
        height: 101px !important;
        min-height: 101px !important;
        max-height: 101px !important;
        flex-basis: 101px !important;
        padding-left: 17px !important;
        padding-right: 17px !important;
    }

    .hero-section .guest-wish-message {
        max-height: 70px !important;
        font-size: .88rem !important;
        line-height: 1.22 !important;
    }

    .hero-section .guest-wish-name {
        margin-top: 5px !important;
        font-size: .64rem !important;
    }
}

/* ===== TRANSPARENT COUNTDOWN WISHES V6.8.2 END ===== */

/* ===== HERO SPACING COUNTDOWN V6.8.3 START ===== */

/* Move the whole hero content down so the hanging flowers do not crowd the heading */
.hero-section .hero-cinematic-inner {
    padding-top: 20px !important;
}

.hero-section .hero-glass-panel {
    margin-top: 12px !important;
}

/* Keep heading breathing room */
.hero-section .eyebrow {
    margin-top: 10px !important;
}

/* COUNTDOWN NUMBERS */
.hero-section .hero-glass-panel .countdown strong,
.hero-section .hero-glass-panel .countdown-wrap strong,
.hero-section .hero-glass-panel .countdown-wrapper strong,
.hero-section .hero-glass-panel .countdown-grid strong,
.hero-section .hero-glass-panel .countdown-container strong,
.hero-section .hero-glass-panel .countdown-value,
.hero-section .hero-glass-panel .countdown-number {
    color: #8F2440 !important;
    font-size: clamp(1.65rem, 4.8vw, 2.15rem) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.88),
        0 1px 4px rgba(255,248,233,.48) !important;
}

/* COUNTDOWN LABELS - much larger and lighter */
.hero-section .hero-glass-panel .countdown small,
.hero-section .hero-glass-panel .countdown-wrap small,
.hero-section .hero-glass-panel .countdown-wrapper small,
.hero-section .hero-glass-panel .countdown-grid small,
.hero-section .hero-glass-panel .countdown-container small,
.hero-section .hero-glass-panel .countdown-label,
.hero-section .hero-glass-panel .countdown-item span:last-child,
.hero-section .hero-glass-panel .countdown-cell span:last-child,
.hero-section .hero-glass-panel .countdown-unit span:last-child {
    color: #A96472 !important;
    font-size: .78rem !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: .055em !important;
    opacity: 1 !important;
    text-transform: uppercase !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.90),
        0 1px 3px rgba(255,248,233,.48) !important;
}

/* Give countdown cells more vertical room for the larger labels */
.hero-section .hero-glass-panel .countdown,
.hero-section .hero-glass-panel .countdown-wrap,
.hero-section .hero-glass-panel .countdown-wrapper,
.hero-section .hero-glass-panel .countdown-grid,
.hero-section .hero-glass-panel .countdown-container {
    min-height: 82px !important;
}

.hero-section .hero-glass-panel .countdown-item,
.hero-section .hero-glass-panel .countdown-cell,
.hero-section .hero-glass-panel .countdown-unit {
    padding-top: 10px !important;
    padding-bottom: 9px !important;
}

/* Wishes title: readable but still elegant */
.hero-section .guest-wishes-title {
    color: #8A2741 !important;
    font-size: .72rem !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: normal !important;
}

/* MOBILE */
@media (max-width: 640px) {

    .hero-section .hero-cinematic-inner {
        padding-top: 24px !important;
    }

    .hero-section .hero-glass-panel {
        margin-top: 14px !important;
    }

    .hero-section .eyebrow {
        margin-top: 12px !important;
    }

    .hero-section .hero-glass-panel .countdown,
    .hero-section .hero-glass-panel .countdown-wrap,
    .hero-section .hero-glass-panel .countdown-wrapper,
    .hero-section .hero-glass-panel .countdown-grid,
    .hero-section .hero-glass-panel .countdown-container {
        min-height: 80px !important;
    }

    .hero-section .hero-glass-panel .countdown strong,
    .hero-section .hero-glass-panel .countdown-wrap strong,
    .hero-section .hero-glass-panel .countdown-wrapper strong,
    .hero-section .hero-glass-panel .countdown-grid strong,
    .hero-section .hero-glass-panel .countdown-container strong,
    .hero-section .hero-glass-panel .countdown-value,
    .hero-section .hero-glass-panel .countdown-number {
        font-size: 1.72rem !important;
        color: #8F2440 !important;
    }

    .hero-section .hero-glass-panel .countdown small,
    .hero-section .hero-glass-panel .countdown-wrap small,
    .hero-section .hero-glass-panel .countdown-wrapper small,
    .hero-section .hero-glass-panel .countdown-grid small,
    .hero-section .hero-glass-panel .countdown-container small,
    .hero-section .hero-glass-panel .countdown-label,
    .hero-section .hero-glass-panel .countdown-item span:last-child,
    .hero-section .hero-glass-panel .countdown-cell span:last-child,
    .hero-section .hero-glass-panel .countdown-unit span:last-child {
        font-size: .72rem !important;
        color: #A96472 !important;
        letter-spacing: .04em !important;
    }

    .hero-section .guest-wishes-title {
        font-size: .66rem !important;
        letter-spacing: .08em !important;
        line-height: 1.15 !important;
    }
}

/* ===== HERO SPACING COUNTDOWN V6.8.3 END ===== */

/* ===== TEXT CONTRAST V6.9.1 START ===== */

/*
   Contrast-only patch.
   No sizing, positioning, transparency, countdown structure,
   wishes sizing, animation, or functionality is changed.
*/

/* Romantic line: deep warm brown */
.hero-section .script-line {
    color: #5B2A1D !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.90),
        0 1px 4px rgba(255,248,233,.58) !important;
}

/* Venue: deep burgundy */
.hero-section .hero-meta p:not(.lead) {
    color: #70152B !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.92),
        0 1px 4px rgba(255,248,233,.56) !important;
}

/* Countdown labels: readable burgundy, distinct from gold accents */
.hero-section .wedding-countdown-label {
    color: #741127 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.94),
        0 1px 4px rgba(255,248,233,.62) !important;
}

/* Wishes heading */
.hero-section .guest-wishes-title {
    color: #741127 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.94),
        0 1px 4px rgba(255,248,233,.62) !important;
}

/* Wish message */
.hero-section .guest-wish-message {
    color: #681024 !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.96),
        0 1px 4px rgba(255,248,233,.72) !important;
}

/* Guest name */
.hero-section .guest-wish-name {
    color: #63351F !important;
    text-shadow:
        0 1px 0 rgba(255,248,233,.96),
        0 1px 4px rgba(255,248,233,.68) !important;
}

/* Decorative quotes stay antique gold */
.hero-section .guest-wishes-inner::before,
.hero-section .guest-wishes-inner::after {
    color: #A66F27 !important;
    text-shadow: 0 1px 2px rgba(255,248,233,.58) !important;
}

/* ===== TEXT CONTRAST V6.9.1 END ===== */

/* ===== CLEAR GLASS V6.9.2 START ===== */

/*
   Surface-only change:
   remove the milky ivory tint while preserving current text,
   dimensions, spacing, borders and functionality.
*/

/* Countdown: almost colorless glass */
.hero-section .wedding-countdown {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(197,148,56,.58) !important;
    box-shadow:
        0 5px 16px rgba(67,18,31,.07),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter: blur(.7px) !important;
    -webkit-backdrop-filter: blur(.7px) !important;
}

/* Keep individual cells completely clear */
.hero-section .wedding-countdown-cell {
    background: transparent !important;
}

/* Softer internal dividers */
.hero-section .wedding-countdown-cell + .wedding-countdown-cell {
    border-left-color: rgba(197,148,56,.28) !important;
}

/* Wishes: same clear-glass language */
.hero-section #guest-wishes-slot.guest-wishes {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(197,148,56,.58) !important;
    box-shadow:
        0 5px 16px rgba(67,18,31,.07),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter: blur(.7px) !important;
    -webkit-backdrop-filter: blur(.7px) !important;
}

/* ===== CLEAR GLASS V6.9.2 END ===== */

/* ===== WHITE PANELS V6.9.3 START ===== */

/* White transparent glass - surface only */
.hero-section .wedding-countdown {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,.56) !important;
    box-shadow:
        0 5px 16px rgba(67,18,31,.08),
        inset 0 1px 0 rgba(255,255,255,.34) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}

.hero-section .wedding-countdown-cell {
    background: transparent !important;
}

.hero-section .wedding-countdown-cell + .wedding-countdown-cell {
    border-left-color: rgba(255,255,255,.34) !important;
}

.hero-section #guest-wishes-slot.guest-wishes {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,.56) !important;
    box-shadow:
        0 5px 16px rgba(67,18,31,.08),
        inset 0 1px 0 rgba(255,255,255,.34) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}

/* ===== WHITE PANELS V6.9.3 END ===== */

/* ===== HERO BRIGHTNESS V6.9.4 START ===== */

/*
   Brightness-only visual polish.
   Keeps the current layout, transparent glass, spacing and behavior.
   Only makes hero text slightly lighter/brighter.
*/

.hero-section .hero-couple-names,
.hero-section .hero-name,
.hero-section .hero-name-prem,
.hero-section .hero-name-dharsh {
    color: #8F2D49 !important;
}

.hero-section .hero-amp {
    color: #C89A4B !important;
}

.hero-section .script-line {
    color: #8F5A48 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.18) !important;
}

.hero-section .hero-meta .lead {
    color: #8F2D49 !important;
}

.hero-section .hero-meta p:not(.lead) {
    color: #9A4A5B !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.16) !important;
}

.hero-section .wedding-countdown-number {
    color: #8F2D49 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.16) !important;
}

.hero-section .wedding-countdown-label {
    color: #A95C67 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.14) !important;
}

.hero-section .guest-wishes-title {
    color: #A95C67 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.14) !important;
}

.hero-section .guest-wish-message {
    color: #9A4A5B !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.16) !important;
}

.hero-section .guest-wish-name {
    color: #8F5A48 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.14) !important;
}

/* Keep quote marks warm and a little brighter */
.hero-section .guest-wishes::before,
.hero-section .guest-wishes::after {
    color: #C89A4B !important;
}

/* ===== HERO BRIGHTNESS V6.9.4 END ===== */

/* ===== FULL TRANSPARENT HERO V6.9.5 START ===== */

/*
   Make the hero content panel, countdown and guest wishes
   fully transparent while preserving existing layout,
   dimensions, text colors, borders and functionality.
*/

/* Main hero webpart / large content box */
.hero-section .hero-glass-panel {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Countdown panel */
.hero-section .wedding-countdown {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Make sure each countdown cell has no fill */
.hero-section .wedding-countdown-cell {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Guest wishes panel */
.hero-section #guest-wishes-slot,
.hero-section #guest-wishes-slot.guest-wishes,
.hero-section .guest-wishes {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Inner wishes container must also remain clear */
.hero-section #guest-wishes-inner {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ===== FULL TRANSPARENT HERO V6.9.5 END ===== */

/* ===== BORDERLESS READABLE HERO V6.9.6 START ===== */

/* Keep all hero surfaces fully transparent */
.hero-section .hero-glass-panel,
.hero-section .wedding-countdown,
.hero-section .wedding-countdown-cell,
.hero-section #guest-wishes-slot,
.hero-section #guest-wishes-slot.guest-wishes,
.hero-section .guest-wishes,
.hero-section #guest-wishes-inner {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Remove all visible box borders and countdown divider lines */
.hero-section .hero-glass-panel,
.hero-section .wedding-countdown,
.hero-section .wedding-countdown-cell,
.hero-section #guest-wishes-slot,
.hero-section #guest-wishes-slot.guest-wishes,
.hero-section .guest-wishes,
.hero-section #guest-wishes-inner {
    border-color: transparent !important;
}

.hero-section .wedding-countdown-cell + .wedding-countdown-cell {
    border-left-color: transparent !important;
}

/* Dark readable countdown numbers */
.hero-section .wedding-countdown-number {
    color: #651126 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.32),
        0 1px 2px rgba(255,255,255,.18) !important;
}

/* Days / Hours / Minutes / Seconds */
.hero-section .wedding-countdown-label {
    color: #4F1722 !important;
    font-weight: 700 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.38),
        0 1px 2px rgba(255,255,255,.20) !important;
}

/* Guest wishes heading */
.hero-section .guest-wishes-title {
    color: #4F1722 !important;
    font-weight: 700 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.40),
        0 1px 2px rgba(255,255,255,.22) !important;
}

/* Actual guest message */
.hero-section .guest-wish-message {
    color: #571626 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.42),
        0 1px 2px rgba(255,255,255,.22) !important;
}

/* Guest name */
.hero-section .guest-wish-name {
    color: #42151C !important;
    font-weight: 600 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.42),
        0 1px 2px rgba(255,255,255,.22) !important;
}

/* Darker quote marks so they remain visible without a panel */
.hero-section .guest-wishes::before,
.hero-section .guest-wishes::after {
    color: #7A3B25 !important;
}

/* ===== BORDERLESS READABLE HERO V6.9.6 END ===== */

/* ===== CSS REPAIR FINAL STATE V6.9.7 START ===== */
.hero-section .hero-glass-panel,
.hero-section .wedding-countdown,
.hero-section .wedding-countdown-cell,
.hero-section #guest-wishes-slot,
.hero-section #guest-wishes-slot.guest-wishes,
.hero-section .guest-wishes,
.hero-section #guest-wishes-inner {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
}

.hero-section .wedding-countdown-cell + .wedding-countdown-cell {
    border-left-color: transparent !important;
}

.hero-section .wedding-countdown-number {
    color: #651126 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.32), 0 1px 2px rgba(255,255,255,.18) !important;
}

.hero-section .wedding-countdown-label {
    color: #4F1722 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.38), 0 1px 2px rgba(255,255,255,.20) !important;
}

.hero-section .guest-wishes-title {
    color: #4F1722 !important;
    font-weight: 700 !important;
}

.hero-section .guest-wish-message {
    color: #571626 !important;
}

.hero-section .guest-wish-name {
    color: #42151C !important;
    font-weight: 600 !important;
}
/* ===== CSS REPAIR FINAL STATE V6.9.7 END ===== */


/* ===== CSS REPAIR FINAL STATE V6.9.7 START ===== */
.hero-section .hero-glass-panel,
.hero-section .wedding-countdown,
.hero-section .wedding-countdown-cell,
.hero-section #guest-wishes-slot,
.hero-section #guest-wishes-slot.guest-wishes,
.hero-section .guest-wishes,
.hero-section #guest-wishes-inner {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
}

.hero-section .wedding-countdown-cell + .wedding-countdown-cell {
    border-left-color: transparent !important;
}

.hero-section .wedding-countdown-number {
    color: #651126 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.32), 0 1px 2px rgba(255,255,255,.18) !important;
}

.hero-section .wedding-countdown-label {
    color: #4F1722 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.38), 0 1px 2px rgba(255,255,255,.20) !important;
}

.hero-section .guest-wishes-title {
    color: #4F1722 !important;
    font-weight: 700 !important;
}

.hero-section .guest-wish-message {
    color: #571626 !important;
}

.hero-section .guest-wish-name {
    color: #42151C !important;
    font-weight: 600 !important;
}
/* ===== CSS REPAIR FINAL STATE V6.9.7 END ===== */

/* ===== CLEAN HERO STATE V6.9.9 START ===== */
.hero-section .hero-glass-panel,
.hero-section .wedding-countdown,
.hero-section .wedding-countdown-cell,
.hero-section #guest-wishes-slot,
.hero-section #guest-wishes-slot.guest-wishes,
.hero-section .guest-wishes,
.hero-section #guest-wishes-inner {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
}
.hero-section .wedding-countdown-cell + .wedding-countdown-cell {
    border-left-color: transparent !important;
}
.hero-section .wedding-countdown-number { color:#651126 !important; }
.hero-section .wedding-countdown-label {
    color:#4F1722 !important;
    font-weight:700 !important;
}
.hero-section .guest-wishes-title {
    color:#4F1722 !important;
    font-weight:700 !important;
}
.hero-section .guest-wish-message { color:#571626 !important; }
.hero-section .guest-wish-name {
    color:#42151C !important;
    font-weight:600 !important;
}
/* ===== CLEAN HERO STATE V6.9.9 END ===== */

/* CELEBRATION TRANSPARENCY V6.13.0 START */
/* Make Our Celebration blend into the invitation background more strongly. */
#celebration .content-block,
#celebration .venue-card,
#celebration .celebration-card,
#celebration .venue-panel,
.celebration-section .content-block,
.celebration-section .venue-card,
.celebration-section .celebration-card,
.celebration-section .venue-panel {
    background: rgba(255, 248, 233, 0.13) !important;
    -webkit-backdrop-filter: blur(0.35px) !important;
    backdrop-filter: blur(0.35px) !important;
}

/* Inner surfaces should be even lighter. */
#celebration .card,
#celebration .panel,
#celebration .venue-inner,
#celebration .map-actions,
.celebration-section .card,
.celebration-section .panel,
.celebration-section .venue-inner,
.celebration-section .map-actions {
    background-color: rgba(255, 248, 233, 0.09) !important;
}

@media (max-width: 640px) {
    #celebration .content-block,
    #celebration .venue-card,
    #celebration .celebration-card,
    #celebration .venue-panel,
    .celebration-section .content-block,
    .celebration-section .venue-card,
    .celebration-section .celebration-card,
    .celebration-section .venue-panel {
        background: rgba(255, 248, 233, 0.15) !important;
    }

    #celebration .card,
    #celebration .panel,
    #celebration .venue-inner,
    #celebration .map-actions,
    .celebration-section .card,
    .celebration-section .panel,
    .celebration-section .venue-inner,
    .celebration-section .map-actions {
        background-color: rgba(255, 248, 233, 0.10) !important;
    }
}
/* CELEBRATION TRANSPARENCY V6.13.0 END */

/* STATIC WISHES IOS V6.14.0 START */
html {
    -webkit-text-size-adjust: 100%;
}

.guest-wishes-static {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.guest-wishes-static .guest-wishes-heading {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.guest-wishes-static .guest-wishes-title {
    display: block !important;
    color: #4F1722 !important;
    font-weight: 700 !important;
}
/* STATIC WISHES IOS V6.14.0 END */

/* ===== MOBILE BASELINE V6.14.9 START ===== */

/*
   One clean mobile baseline:
   - normal document scrolling
   - hero flows naturally into invitation
   - no viewport-height trap
   - no hidden reveal content
*/

html,
body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

body {
    position: static !important;
}

#app,
.page-shell,
.site-shell,
.wedding-site,
main {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/*
   Never let the reveal system hide real content.
*/
body.motion-ready .wedding-section:not(.hero-section) > .section-inner,
body.motion-ready .wedding-section.motion-visible > .section-inner,
.wedding-section:not(.hero-section) > .section-inner {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/*
   Opening overlay must stop taking touch input as soon as opening starts.
*/
.v60-door-stage.is-opening,
.door-stage.is-opening,
.image-door-stage.is-opening {
    pointer-events: none !important;
}

@media (max-width: 640px) {

    html,
    body,
    #app,
    .page-shell,
    .site-shell,
    .wedding-site,
    main {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /*
       The hero is allowed to be at least one visible screen, but never
       hard-capped to one screen. If content needs more room it expands,
       and the invitation follows immediately after it.
    */
    .hero-section,
    .hero-section.hero-cinematic {
        position: relative !important;
        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        touch-action: pan-y !important;
    }

    .hero-section .hero-cinematic-inner,
    .hero-section .section-inner {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;
        overflow: visible !important;
        touch-action: pan-y !important;
    }

    .hero-section .hero-copy,
    .hero-section .hero-glass-panel {
        position: relative !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        touch-action: pan-y !important;
    }

    /*
       Keep hero stacking simple and positive on iOS.
    */
    .hero-section > .hero-scene-bg {
        position: absolute !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .hero-section > .hero-scene-glow {
        position: absolute !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .hero-section > .section-motion {
        z-index: 2 !important;
        pointer-events: none !important;
    }

    .hero-section > .section-inner,
    .hero-section .hero-cinematic-inner {
        z-index: 4 !important;
    }

    /*
       Invitation starts directly after hero, without a visible seam.
    */
    .invitation-section {
        margin-top: 0 !important;
        border-top: 0 !important;
    }
}

/* ===== MOBILE BASELINE V6.14.9 END ===== */

/* ===== INITIAL DOM IPHONE FIX V6.15.0 START ===== */

/*
   The site is now mounted before the door opens.
   Keep the page in normal document flow behind the fixed entrance.
*/
.site-shell {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.v60-door-stage {
    will-change: opacity, visibility;
}

.v60-door-stage.is-opening {
    pointer-events: none !important;
}

@media (max-width: 640px) {
    /*
       Avoid forcing WebKit to re-compose the whole invitation through
       translucent backdrop-filter surfaces after the 3D door animation.
    */
    .invitation-section .invitation-panel,
    .invitation-section .ornate-panel,
    .invitation-section .family-block {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /*
       Real content always owns a positive stacking layer.
    */
    .wedding-section {
        position: relative !important;
    }

    .wedding-section > .section-inner {
        position: relative !important;
        z-index: 5 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ===== INITIAL DOM IPHONE FIX V6.15.0 END ===== */

/* ===== MOBILE HERO SCROLL ZOOM V6.15.1 START ===== */

/*
   Root scrolling:
   - keep normal finger scrolling
   - allow pinch zoom
   - gently settle near section boundaries
   - reserve space for the fixed bottom dock
*/
html {
    scroll-behavior: smooth !important;
    scroll-snap-type: y proximity;
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

html,
body,
#app,
.site-shell,
.page-shell,
.wedding-site,
main {
    touch-action: auto !important;
}

/*
   Each major wedding section becomes a natural snap target.
   "proximity" is intentional so tall sections remain freely scrollable.
*/
.wedding-section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

/*
   Keep the fixed dock from covering the very end of the invitation.
*/
.site-shell {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

.rsvp-section:last-of-type,
.final-rsvp.rsvp-section {
    margin-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
}

/*
   The static guest-wishes heading sits above the fixed dock on phones.
*/
@media (max-width: 640px) {
    .hero-section .guest-wishes-static {
        margin-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
}

/*
   Mobile hero background:
   - clip it to the hero frame
   - fill the complete hero
   - stop the animated transform from exposing the fallback background
*/
@media (max-width: 640px) {
    .hero-section,
    .hero-section.hero-cinematic {
        overflow: hidden !important;
        background: #fff8e9 !important;
    }

    .hero-section > .hero-scene-bg,
    .hero-cinematic > .hero-scene-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        background-image: url('/assets/hero-mandapam-portrait.png') !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
        transform: none !important;
        -webkit-transform: none !important;
        animation: none !important;
        pointer-events: none !important;
    }

    /*
       Keep the hero content above the background without extending
       the image outside the frame.
    */
    .hero-section > .section-inner,
    .hero-section .hero-cinematic-inner {
        position: relative !important;
        z-index: 4 !important;
    }

    /*
       Allow iOS pinch zoom. Earlier pan-y-only rules disabled it.
    */
    .hero-section,
    .hero-section *,
    .wedding-section,
    .wedding-section * {
        touch-action: auto !important;
    }
}

/* ===== MOBILE HERO SCROLL ZOOM V6.15.1 END ===== */

/* ===== IOS REAL VIEWPORT V6.15.3 START ===== */

/*
   iPhone Safari has a smaller REAL visible area than desktop mobile emulation
   because the browser bars consume vertical space. Use dynamic viewport units
   and reserve a protected dock zone for the fixed nav/music controls.
*/
@media (max-width: 640px) {

    .hero-section,
    .hero-section.hero-cinematic,
    .hero-section .section-inner,
    .hero-section .hero-cinematic-inner {
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
    }

    /*
       Keep hero content out of the Safari/nav dock area.
    */
    .hero-section .hero-copy,
    .hero-section .hero-glass-panel {
        box-sizing: border-box !important;
        padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
    }

    /*
       Guest wishes must finish ABOVE the fixed nav.
    */
    .hero-section .guest-wishes-static,
    .hero-section .guest-wishes {
        position: relative !important;
        z-index: 20 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .hero-section .guest-wishes-inner {
        max-height: 5.6em !important;
        overflow: hidden !important;
    }

    /*
       Fixed controls stay in the protected zone.
    */
    .bottom-nav {
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    .music-toggle {
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }
}

/*
   Real iPhones with Safari chrome visible often have a visual viewport
   around 650-760 CSS px high. Compact only the first section in that case.
   Desktop emulation with a taller viewport keeps the larger layout.
*/
@media (max-width: 640px) and (max-height: 760px) {

    .hero-section.hero-cinematic {
        padding-top: 6px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .hero-section .hero-copy,
    .hero-section .hero-glass-panel {
        padding-top: 4px !important;
        padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    }

    .hero-section .eyebrow {
        margin-bottom: 4px !important;
        font-size: clamp(11px, 3vw, 13px) !important;
    }

    .hero-section .hero-couple-names {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
        line-height: .88 !important;
    }

    .hero-section .hero-name {
        font-size: clamp(52px, 16vw, 72px) !important;
    }

    .hero-section .hero-amp {
        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: .9 !important;
    }

    .hero-section .script-line {
        margin-top: 4px !important;
        margin-bottom: 8px !important;
        font-size: clamp(23px, 7vw, 33px) !important;
        line-height: 1.05 !important;
    }

    .hero-section .hero-meta {
        margin-top: 4px !important;
        margin-bottom: 8px !important;
    }

    .hero-section .hero-meta .lead {
        margin-bottom: 2px !important;
        font-size: 18px !important;
    }

    .hero-section .hero-meta p:not(.lead) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        font-size: 13px !important;
    }

    .hero-section .countdown {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .hero-section .countdown-value,
    .hero-section .countdown-number {
        font-size: clamp(32px, 9vw, 43px) !important;
        line-height: .95 !important;
    }

    .hero-section .countdown-label {
        font-size: 11px !important;
    }

    .hero-section .hero-rsvp {
        min-height: 48px !important;
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .hero-section .guest-wishes-heading {
        margin-bottom: 4px !important;
    }

    .hero-section .guest-wishes-title {
        font-size: 10px !important;
        line-height: 1.2 !important;
        letter-spacing: .09em !important;
    }

    .hero-section .guest-wishes-inner {
        max-height: 4.5em !important;
        line-height: 1.15 !important;
    }

    .hero-section .guest-wish-message {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    .hero-section .guest-wish-name {
        margin-top: 2px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }
}

/* ===== IOS REAL VIEWPORT V6.15.3 END ===== */

/* ===== GUEST WISHES FULL TEXT V6.15.4 START ===== */

/*
   Do not visually clip wishes. The JavaScript character limit controls
   the actual maximum message length; CSS must allow all of it to render.
*/
.hero-section .guest-wishes-inner,
.hero-section .guest-wish-message,
.hero-section .guest-wish-name {
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
}

.hero-section .guest-wish-message {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

@media (max-width: 640px) {
    .hero-section .guest-wishes-inner {
        max-height: none !important;
        overflow: visible !important;
    }

    .hero-section .guest-wish-message {
        font-size: 13px !important;
        line-height: 1.16 !important;
    }

    .hero-section .guest-wish-name {
        margin-top: 3px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    /*
       Give the full wish enough room above the fixed bottom controls.
    */
    .hero-section .hero-copy,
    .hero-section .hero-glass-panel {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }
}

/* ===== GUEST WISHES FULL TEXT V6.15.4 END ===== */