:root {
  --green: #30530F;
  --sage: #6B8040;
  --cream: #FFFAF7;
  --line: rgba(48, 83, 15, .27);
  --serif: Baskerville, "Times New Roman", serif;
  --title: "Times New Roman", serif;
  --sans: Gotham, Montserrat, Roboto, sans-serif;
  --ui: ui-sans-serif, system-ui, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #fff;
  color: var(--green);
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
img { display: block; }
h1, h2, h3, p { margin: 0; font-weight: inherit; font-size: inherit; }
button { font: inherit; color: inherit; }

.bi { display: flex; flex-direction: column; align-items: center; }
.bi--start { align-items: flex-start; }
.pt { font-size: .85em; opacity: .7; }

/* ---------- Cover ---------- */
.cover {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(to bottom right, #1a3005, #0f2003, #081500);
  transition: opacity .35s ease;
}
.cover.fade { opacity: 0; }
.leaves span { position: absolute; top: -30px; opacity: 0; animation: fall ease-in-out infinite; }
.leaves svg { display: block; width: 100%; height: 100%; }
@keyframes fall {
  0% { transform: translate(0, -8vh) rotate(0deg); opacity: 0; }
  10% { opacity: .5; }
  50% { transform: translate(var(--sx), 48vh) rotate(180deg); opacity: .6; }
  92% { opacity: .45; }
  100% { transform: translate(0, 105vh) rotate(360deg); opacity: 0; }
}

.cv-card {
  position: relative;
  width: calc(100% - 80px); max-width: 600px; height: 492px;
  border-radius: 8px;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .2), 0 0 40px rgba(107, 128, 64, .15);
}
.cv-bg {
  position: absolute; inset: 0; overflow: hidden; border-radius: 8px;
  background: rgba(255, 250, 247, .95);
  border: 1px solid rgba(107, 128, 64, .15);
}
.cv-f1, .cv-f2 { position: absolute; width: 300px; pointer-events: none; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), opacity 1.2s ease; }
.cv-f1 { top: -40px; left: -50%; opacity: .4; }
.cv-f2 { bottom: -10%; right: -50%; opacity: .3; rotate: 160deg; }
.cv-seal {
  position: absolute; left: 50%; top: 22px; z-index: 2;
  width: 56px; height: 56px; margin-left: -28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, #30530f, #123500);
  box-shadow: 0 4px 20px rgba(48, 83, 15, .5);
  animation: seal-pulse 2s ease-in-out infinite;
}
.cv-seal svg { width: 28px; height: 28px; }
@keyframes seal-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(48, 83, 15, .5); }
  50% { transform: scale(1.06); box-shadow: 0 6px 35px rgba(48, 83, 15, .5); }
}
.cv-body {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 57px 24px 0; text-align: center;
}
.cv-name { display: block; width: 100%; font-family: "Playfair Display", serif; font-weight: 400; font-size: 30px; line-height: 1.25; }
.cv-amp { display: block; width: 100%; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1; }
.cv-orn { display: flex; align-items: center; gap: 12px; margin-top: 8px; height: 20px; color: var(--sage); }
.cv-orn span { font-family: var(--ui); font-size: 14px; line-height: 20px; opacity: .7; }
.cv-orn i { width: 40px; height: 1px; background: linear-gradient(to right, transparent, var(--sage)); }
.cv-orn i:last-child { background: linear-gradient(to left, transparent, var(--sage)); }
.cv-date { margin-top: 8px; font-family: Lora, serif; font-size: 18px; color: rgba(48, 83, 15, .7); }
.cv-guests { margin-top: 21px; font-family: Lora, serif; font-size: 18px; color: rgba(48, 83, 15, .7); }
.cv-open {
  position: relative; overflow: hidden; margin-top: 24px;
  display: flex; align-items: center; padding: 10px 32px;
  border-radius: 9999px; background: var(--green); color: var(--cream);
  font-family: Lora, serif; font-size: 18px; font-weight: 600; line-height: 28px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(48, 83, 15, .35);
}
.shine {
  position: absolute; top: 0; left: -100%; width: 32px; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  animation: shine 3s ease-in-out infinite;
}
@keyframes shine { 0% { left: -100%; } 50%, 100% { left: 100%; } }

/* Opening sequence (~1.4 s): seal breaks, ring expands, flowers fly forward, particles burst, card flies away. */
.cover.opening .cv-bg { overflow: visible; }
.cover.opening .cv-seal { animation: seal-break .5s cubic-bezier(.4, 0, .2, 1) forwards; }
.cover.opening .cv-f1, .cover.opening .cv-f2 { transition: none; animation: fly-forward 1.2s ease-in forwards; }
.cover.opening .cv-card { animation: card-away .8s ease-in .55s forwards; }
.seal-ring {
  position: absolute; left: 50%; top: 50px; width: 56px; height: 56px; margin: -28px 0 0 -28px; z-index: 3;
  border: 3px solid #30530F; border-radius: 50%; opacity: .8; pointer-events: none;
  animation: seal-ring .6s ease-out forwards;
}
.particle {
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  color: var(--c); pointer-events: none; z-index: 60; opacity: 0;
  animation: particle-burst 1.4s cubic-bezier(.25, .46, .45, .94) var(--delay) forwards;
}
.particle svg { display: block; width: 100%; height: 100%; }
@keyframes seal-break {
  0% { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1); }
  30% { transform: scale(1.15) rotate(5deg); opacity: .9; filter: brightness(1.3); }
  60% { transform: scale(1.05) rotate(-3deg); opacity: .5; filter: brightness(1.5); }
  100% { transform: scale(0) rotate(15deg); opacity: 0; filter: brightness(2); }
}
@keyframes seal-ring { from { transform: scale(.8); opacity: .8; } to { transform: scale(2.5); opacity: 0; } }
@keyframes fly-forward {
  0% { transform: scale(1); filter: blur(0); opacity: .7; }
  40% { transform: scale(1.6); filter: blur(2px); opacity: .5; }
  100% { transform: scale(3); filter: blur(10px); opacity: 0; }
}
@keyframes card-away {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  15% { transform: translateY(10px) rotate(.5deg); opacity: 1; }
  100% { transform: translateY(-120vh) rotate(-2deg); opacity: 0; }
}
@keyframes particle-burst {
  0% { transform: translate(0, 0) scale(0) rotate(0); opacity: 0; }
  15% { transform: translate(0, 0) scale(1.3) rotate(var(--r0)); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.6) rotate(var(--r)); opacity: 0; }
}

@media (min-width: 640px) {
  .cv-card { height: 442px; }
  .cv-body { padding-top: 65px; }
  .cv-name { font-size: 36px; }
  .cv-amp { font-size: 20px; }
  .cv-open { font-weight: 500; }
}
@media (min-width: 768px) {
  .cv-f1 { top: -50px; left: -20%; }
  .cv-f2 { bottom: -60px; right: -20%; }
}

/* ---------- Page column ---------- */
.page {
  position: relative; width: 100%; max-width: 480px;
  overflow: hidden; isolation: isolate;
  background: var(--cream);
}
.deco { position: absolute; z-index: -10; pointer-events: none; will-change: transform; }
.deco img { width: 100%; height: auto; }

.fixed-flower { top: 503px; left: -181.5px; width: 415.05px; rotate: -60.58deg; will-change: auto; }
.d1 { top: -327px; left: 111.5px; width: 622.77px; rotate: -.76deg; }
.d2 { top: 5px; left: -83px; width: 450px; opacity: .2; scale: -1 1; }
.d3 { top: 302px; right: -220px; width: 610px; opacity: .15; }
.d4 { top: 1054px; left: -110px; width: 750px; opacity: .15; }
.d5 { top: 2350px; left: -388.5px; width: 558.77px; }
.d6 { top: 1848px; right: -340px; width: 750px; opacity: .15; }
.d7 { top: 1180px; right: -142px; width: 290px; scale: -1 1; }
.d8 { top: 2545px; left: -290px; width: 1062px; opacity: .15; }
.d9 { top: 4060px; left: -35%; width: 297px; }
.d10 { top: 2960px; right: -142px; width: 290px; scale: -1 1; }
.d11 { bottom: 100px; right: -400px; width: 600px; opacity: .2; }

/* ---------- Hero ---------- */
.hero {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center;
  padding: 210px 24px 16px; min-height: 840px;
}
.couple { position: relative; z-index: 10; margin: 0 auto; width: 320px; height: 440px; }
.band { position: absolute; left: 50%; top: 170px; width: 100vw; transform: translate(-50%, -50%); z-index: -10; }
.band img { width: 100%; height: auto; }
.person { position: absolute; z-index: 20; display: flex; align-items: center; gap: 12px; left: 20px; top: -40px; }
.person--groom { z-index: 30; flex-direction: row-reverse; left: 55px; top: 165px; }
.frame { width: 155px; flex-shrink: 0; rotate: -17deg; }
.person--groom .frame { rotate: 13deg; }
.frame-in { position: relative; overflow: hidden; aspect-ratio: 2 / 3; border: 5px solid #B28E72; }
.frame-in img { width: 100%; height: 100%; object-fit: cover; }
.person-txt { display: flex; flex-direction: column; align-items: flex-start; }
.person--groom .person-txt { align-items: flex-end; }
.role { font-size: 12px; letter-spacing: .1em; color: #464646; }
.pname { font-family: "Playfair Display", serif; font-size: 25px; white-space: nowrap; }

/* ---------- Section titles ---------- */
.sec-title {
  font-family: var(--title); font-weight: 700; font-size: 24px; line-height: 1.5;
  letter-spacing: 1px; text-transform: uppercase; text-align: center;
}
.t-ceremony { margin: 40px 0 24px; padding: 0 16px; }
.t-reception { margin: 40px 0 24px; padding: 0 16px; }

/* ---------- Ceremony ---------- */
.intro { display: flex; flex-direction: column; gap: 4px; margin: 0 auto 24px; text-align: center; font-size: 15px; }
.names { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; text-align: center; }
.names h3 { width: 100%; font-family: "EB Garamond", serif; font-weight: 400; font-size: 40px; line-height: 55px; white-space: nowrap; }
.n-role { font-size: 10px; line-height: 1.3333; letter-spacing: .1em; text-transform: uppercase; }
.n-amp { font-family: "Ms Madi", cursive; font-size: 35px; }

/* ---------- Gallery ---------- */
.gallery-sec { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 40px 24px; }
.carousel { position: relative; z-index: 10; width: 100%; max-width: 390px; margin-top: 24px; }
.stage { position: relative; height: 340px; touch-action: pan-y; user-select: none; }
.track { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 1000px; }
.card {
  position: absolute; height: 92%; aspect-ratio: 1706 / 2560;
  border-radius: 16px; overflow: hidden; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  transition: all 1.1s cubic-bezier(.4, 0, .2, 1);
}
.card.active { box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); }
.card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.nav {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 200;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  align-items: center; justify-content: center; cursor: pointer;
  background: rgba(211, 210, 210, .6); color: var(--green);
  transition: background .2s;
}
.nav:hover { background: rgb(211, 210, 210); }
.nav--prev { left: 0; }
.nav--next { right: 0; }
.count { display: flex; justify-content: center; margin-top: 12px; }
.count span { font-family: var(--ui); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; opacity: .6; }

/* ---------- Reception ---------- */
.reception { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.where { font-family: var(--sans); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.time-big { font-size: 20px; }
.date-row { display: flex; align-items: center; gap: 24px; }
.dr-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; }
.sep { width: 2px; height: 24px; background: var(--green); }
.day { font-size: 30px; font-weight: 600; }
.year { font-size: 18px; }
.hours { display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: 16px; }
.h-col { display: flex; flex-direction: column; align-items: center; }
.h-lbl { font-size: 12px; line-height: 1.3333; letter-spacing: .05em; text-transform: uppercase; }
.h-time { margin-top: 4px; font-size: 18px; line-height: 28px; font-weight: 600; }
.countdown { display: flex; flex-direction: column; align-items: center; margin-top: 16px; }
.cd-title { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 24px; }
.cd { margin-top: 8px; font-size: 14px; line-height: 1.4286; text-align: center; }
.cal-wrap { margin: 8px auto 0; width: 296px; max-width: 100%; }
.cal { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cal-head { padding: 10px 0; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .025em; border-bottom: 1px solid var(--line); }
.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 2px solid var(--green); }
.cal-wd div { padding: 6px 0; text-align: center; font-size: 10px; font-weight: 500; opacity: .6; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; padding: 8px 4px; }
.cal-days div { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; font-size: 12px; }
.cal-days .heart svg { width: 26px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15)); }
.cal-days .heart span { position: absolute; color: #fff; font-weight: 700; font-size: 11px; }
.cal-add {
  margin-top: 16px; display: inline-flex; align-items: center; justify-content: center;
  color: inherit; font-size: 14px; line-height: 20px; letter-spacing: .05em;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.cal-add:hover { opacity: .7; }

.rsvp { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin: 32px 0; }
.rsvp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 24px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--green); color: var(--cream);
  font-family: var(--serif); font-size: 16px; line-height: 24px; font-weight: 600;
  transition: transform .2s;
}
.rsvp-btn:hover { transform: scale(1.03); }

/* ---------- Location ---------- */
.loc-wrap { padding-top: 40px; }
.loc { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 0 24px 48px; }
.loc-head { position: relative; text-align: center; }
.loc-title { font-family: var(--title); font-weight: 700; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; }
.addr { display: flex; flex-direction: column; align-items: center; margin: 12px auto 0; max-width: 384px; padding-bottom: 12px; font-size: 14px; line-height: 1.4286; letter-spacing: .025em; text-align: center; }
.map { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.map iframe { display: block; width: 100%; max-width: 338px; height: 267px; border: 0; border-radius: 15px; }
.route {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 9999px;
  color: var(--green); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none;
  transition: transform .2s;
}
.route:hover { transform: scale(1.03); }

/* ---------- Dress code ---------- */
.dress { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 24px; }
.dress-in { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dress p { font-size: 14px; line-height: 1.4286; text-align: center; opacity: .7; }

/* ---------- Programme ---------- */
.prog { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 24px; margin: 40px 0; padding: 0 8px; }
.prog .sec-title { padding: 0 8px; }
.prog ol {
  display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center;
  column-gap: 24px; row-gap: 32px;
  width: 100%; max-width: 460px; margin: 0 auto; padding: 0; list-style: none;
}
.prog li { display: contents; }
.p-time { padding-top: 2px; text-align: right; font-size: 16px; line-height: 1.375; letter-spacing: .025em; font-variant-numeric: tabular-nums; }
.p-mid { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; }
.p-line { position: absolute; left: 50%; transform: translateX(-50%); width: 1px; top: -32px; bottom: -32px; background: rgba(48, 83, 15, .4); }
.p-line.first { top: 50%; }
.p-line.last { bottom: 50%; }
.p-dot { position: relative; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px rgba(48, 83, 15, .13); }
.p-ev { padding-top: 2px; text-align: start; font-size: 17px; line-height: 1.375; font-weight: 500; }
.p-ev .bi { align-items: flex-start; }

.foot { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 0 24px 48px; text-align: center; }
.foot > .bi { font-size: 16px; }

/* ---------- Music ---------- */
.music { position: fixed; bottom: 61.6px; right: 16px; z-index: 40; }
.music button {
  position: relative; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
.m-disc, .m-gloss { position: absolute; inset: 0; border-radius: 50%; }
.m-disc { background: linear-gradient(to bottom right, rgba(107, 128, 64, .8), #6B8040, rgba(107, 128, 64, .867)); animation: spin 3s linear infinite; }
.m-gloss { background: linear-gradient(to top right, rgba(255, 255, 255, .3) 0, transparent 60%); }
.m-ring { position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); }
.m-bars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.m-bars i { display: block; width: 4px; border-radius: 9999px; background: #fff; animation: eq .4s ease-in-out infinite; }
.m-bars i:nth-child(2) { animation-delay: .1s; }
.m-bars i:nth-child(3) { animation-delay: .2s; }
.m-bars i:nth-child(4) { animation-delay: .3s; }
.m-note { position: relative; display: none; width: 20px; height: 20px; color: #fff; }
.music.paused .m-disc { animation: none; }
.music.paused .m-bars { display: none; }
.music.paused .m-note { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }

/* ---------- RSVP modal ---------- */
.rsvp-modal {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--ui);
}
.rsvp-modal[hidden], .lightbox[hidden] { display: none; }
.rm-box {
  position: relative; width: 100%; max-width: 448px; max-height: 100%; overflow-y: auto;
  padding: 40px 24px 24px; border-radius: 16px; background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.rm-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #f3f4f6; color: #6b7280;
}
.rm-close:hover { background: #e5e7eb; }
.rm-title { font-family: var(--sans); font-size: 20px; line-height: 1.4; font-weight: 600; color: #111827; text-align: center; }
.rm-desc { margin-top: 4px; font-size: 14px; line-height: 20px; color: #6b7280; }
.rm-desc .pt { line-height: 17px; }
.rm-label { display: block; margin-top: 24px; font-size: 14px; line-height: 20px; font-weight: 500; color: #374151; }
.rm-label--q { margin-top: 18px; }
.rm-input {
  display: block; width: 100%; height: 50px; margin-top: 6px; padding: 0 16px;
  border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
  font: 400 16px/24px var(--ui); color: #111827; outline: none;
}
@media (min-width: 640px) { .rm-input { height: 45px; font-size: 14px; line-height: 20px; } }
.rm-input:focus { border-color: transparent; box-shadow: 0 0 0 2px #111827; }
.rm-opt {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; min-height: 55px;
  border: 2px solid #f3f4f6; border-radius: 12px; background: rgba(249, 250, 251, .5); cursor: pointer;
  font-size: 14px; line-height: 20px; font-weight: 500; color: #374151;
}
.rm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rm-ico { width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #e5e7eb; color: #6b7280; }
.rm-opt:has(input[value="yes"]:checked) { border-color: oklch(.696 .17 162.48); background: oklch(.979 .021 166.113 / .5); }
.rm-opt:has(input[value="yes"]:checked) .rm-ico { background: oklch(.696 .17 162.48); color: #fff; }
.rm-opt:has(input[value="no"]:checked) { border-color: oklch(.704 .191 22.216); background: oklch(.971 .013 17.38 / .5); }
.rm-opt:has(input[value="no"]:checked) .rm-ico { background: oklch(.704 .191 22.216); color: #fff; }
.rm-opt:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.rm-submit {
  display: block; width: 100%; height: 48px; margin-top: 16px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--green); color: var(--cream); font: 600 14px/20px var(--ui);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .2);
}
.rm-submit:disabled { opacity: .4; cursor: not-allowed; }
.rm-thanks { margin-top: 12px; text-align: center; font-size: 14px; color: var(--green); font-weight: 600; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 99999; font-family: var(--ui); }
.lb-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .85); }
.lb-in { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100dvh; padding: 40px 8px 16px; pointer-events: none; }
.lb-in > * { pointer-events: auto; }
.lb-close, .lb-nav {
  border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .2s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .2); }
.lb-close { position: absolute; top: 8px; right: 8px; z-index: 10; width: 32px; height: 32px; font-size: 20px; font-weight: 600; }
.lightbox:not([hidden]) .lb-in { animation: lb-in .3s ease-out; }
@keyframes lb-in { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lb-count { position: absolute; top: 8px; left: 8px; z-index: 10; padding: 4px 8px; border-radius: 9999px; background: rgba(0, 0, 0, .4); color: #fff; font-size: 14px; line-height: 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); }
.lb-main { position: relative; flex: 1; min-height: 0; width: 100%; max-width: 1024px; display: flex; align-items: center; justify-content: center; padding: 0 32px; pointer-events: none; }
.lb-main > * { pointer-events: auto; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); user-select: none; }
.lb-nav { position: absolute; z-index: 10; width: 32px; height: 32px; font-size: 24px; font-weight: 600; }
.lb-prev { left: 0; }
.lb-next { right: 0; }
.lb-thumbs {
  flex-shrink: 0; display: flex; gap: 8px; overflow-x: auto; max-width: 90vw;
  margin-top: 12px; padding: 8px; border-radius: 8px;
  background: rgba(0, 0, 0, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lb-thumbs button { flex-shrink: 0; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: .6; transition: opacity .2s, transform .2s; }
.lb-thumbs button:hover { opacity: 1; }
.lb-thumbs button.on { opacity: 1; transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 640px) {
  .lb-in { padding: 48px 16px 24px; }
  .lb-close { top: 16px; right: 16px; font-size: 24px; }
  .lb-count { top: 16px; left: 16px; padding: 4px 12px; font-size: 18px; line-height: 28px; }
  .lb-main { padding: 0 48px; }
  .lb-img { border-radius: 16px; }
  .lb-nav { width: 40px; height: 40px; font-size: 36px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-thumbs { gap: 12px; max-width: 80vw; margin-top: 16px; padding: 12px 16px; }
  .lb-thumbs button { width: 64px; height: 64px; border-radius: 8px; }
}

/* ---------- Tablet / desktop ---------- */
@media (min-width: 768px) {
  .page { max-width: 900px; margin: 0 auto; border: 1px solid #30530F22; }
  .fixed-flower { top: 608px; left: -228px; width: 530px; }
  .d1 { top: -390px; left: 130px; width: 760px; }
  .d2 { top: 18px; left: -66px; width: 507px; }
  .d3 { top: 360px; right: -300px; width: 800px; }
  .d4 { top: 1190px; left: -140px; width: 990px; }
  .d5 { top: 2550px; left: -420px; width: 720px; }
  .d6 { top: 2020px; right: -520px; width: 1005px; }
  .d7 { top: 1320px; right: -190px; width: 390px; }
  .d8 { top: 2720px; left: -390px; width: 1425px; }
  .d9 { top: 3880px; width: 400px; }
  .d10 { top: 3150px; right: -190px; width: 390px; }
  .d11 { width: 780px; }

  .hero { padding: 330px 32px 32px; min-height: 900px; }
  .couple { width: 500px; height: 640px; }
  .band { top: 280px; }
  .band img { height: 150px; object-fit: cover; }
  .person { gap: 16px; left: 25px; top: -60px; }
  .person--groom { left: 115px; top: 260px; }
  .frame { width: 235px; }
  .role { font-size: 14px; }
  .pname { font-size: 32px; }

  .t-ceremony { margin: 148px 0 32px; }
  .t-reception { margin: 48px 0 32px; }
  .intro { font-size: 18px; max-width: 560px; margin-bottom: 32px; }
  .names { gap: 16px; margin-bottom: 32px; }
  .names h3 { font-size: 64px; line-height: 80px; }
  .n-amp { font-size: 42px; }

  .gallery-sec { padding: 56px 40px 48px; }
  .carousel { max-width: 560px; }
  .stage { height: 520px; }
  .nav { display: flex; }

  .reception { gap: 20px; }
  .where { font-size: 26px; }
  .time-big { font-size: 30px; }
  .dr-lbl { font-size: 16px; }
  .sep { height: 32px; }
  .day { font-size: 40px; }
  .year { font-size: 24px; }
  .h-time { font-size: 20px; }
  .cd { font-size: 18px; line-height: 1.5556; }
  .cal-wrap { width: 352px; }
  .cal-head { font-size: 14px; }
  .cal-wd div { font-size: 11px; }
  .cal-days div { height: 34px; font-size: 13px; }
  .cal-days .heart svg { width: 30px; height: 28px; }
  .cal-days .heart span { font-size: 12px; }

  .rsvp { margin: 40px 0; }
  .loc-wrap { padding-top: 48px; }
  .loc { gap: 32px; padding: 0 40px 64px; }
  .loc-title { font-size: 26px; }
  .addr { max-width: 500px; font-size: 16px; line-height: 1.5; }
  .map { gap: 20px; }
  .map iframe { max-width: 560px; height: 380px; }
  .route { font-size: 16px; line-height: 24px; }

  .dress { padding: 48px 40px; }
  .dress p { font-size: 16px; line-height: 1.5; }

  .prog { gap: 32px; margin: 48px 0; padding: 0 16px; }
  .prog .sec-title { padding: 0 16px; }
  .prog ol { column-gap: 32px; row-gap: 40px; }
  .p-line { top: -40px; bottom: -40px; }
  .p-time { font-size: 17px; }
  .p-ev { font-size: 19px; }

  .foot { padding: 0 40px 56px; }
  .foot > .bi { font-size: 18px; line-height: 1.5556; max-width: 560px; }
}
@media (min-width: 1024px) {
  .fixed-flower { top: 700px; left: -278px; width: 650px; }
  .d1 { top: -470px; left: 170px; width: 900px; }
  .d2 { top: 24px; left: -44px; width: 608px; }
  .d3 { top: 410px; right: -360px; width: 960px; }
  .d4 { top: 1300px; left: -170px; width: 1185px; }
  .d5 { top: 2750px; left: -500px; width: 860px; }
  .d6 { top: 2180px; right: -550px; width: 1215px; }
  .d7 { top: 1460px; right: -230px; width: 460px; }
  .d8 { top: 2900px; left: -470px; width: 1725px; }
  .d9 { top: 4080px; width: 480px; }
  .d10 { top: 3340px; right: -230px; width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}