:root{--ivory:#F7F5F0;--sand:#EFECE6;--pink:#D4C5B9;--rose:#D4C5B9;--sage:#D4C5B9;--green:#8C827A;--ink:#625A54;--white:#F7F5F0}
html{background:#F7F5F0}body,main{background:var(--ivory);color:var(--ink)}main{box-shadow:0 0 48px #665d5526}
.music{border-color:#f7f5f0aa;background:#8C827Adb;color:#fff;box-shadow:0 5px 18px #5a514931}
.opening{padding:34px 20px;background:var(--ivory);color:var(--ink)}
.opening:after{content:"";position:absolute;inset:18px;border:1px solid #8C827A45;border-radius:190px 190px 18px 18px;pointer-events:none}
.opening-bloom{z-index:1;width:175px;right:-64px;top:-34px;opacity:.34;animation:drift 9s ease-in-out infinite}
.dua{position:relative;z-index:4;margin:12px 0 8px;max-width:320px;color:var(--ink);font-size:1.35rem;text-shadow:0 1px #fff}
.envelope{z-index:3;width:calc(100% + 14px);margin-top:-8px}.envelope>img{height:585px;object-fit:cover;object-position:center;filter:drop-shadow(0 18px 26px #5c534b22)}
.green-seal{top:56.8%;width:72px!important;height:72px!important;padding:15px!important}.green-seal img{filter:none;opacity:.85;transform:translateY(-2px) scale(.58)}
.envelope>span:last-child{position:absolute;z-index:5;bottom:15px;left:50%;transform:translateX(-50%);margin:0;border-color:#8C827A7a;background:#F7F5F0dc;color:var(--ink);box-shadow:0 8px 24px #6f655b17}
.reveal{background:#8C827A}.photo-slideshow:after{background:linear-gradient(#655b5445,transparent 35%,transparent 66%,#655b5473)}.flower-one,.flower-two{width:190px;opacity:.5}.slide-dots i.active{background:#D4C5B9}
.countdown-section{min-height:58svh;padding:70px 24px;background:linear-gradient(155deg,#F7F5F0,#EFECE6);color:var(--ink)}
.countdown-section:before{inset:22px 14px;border:1px solid #8C827A55;border-radius:150px 150px 18px 18px;background:transparent}
.countdown-section .eyebrow{margin-bottom:32px;color:var(--ink);font-size:1.35rem}.countdown{gap:9px}
.countdown div{min-height:86px;justify-content:center;border:1px solid #8C827A22;border-radius:19px;background:#D4C5B9;color:#fff;box-shadow:0 12px 25px #756b6314}
.countdown strong{font-family:Amoshref,"Noto Naskh Arabic",serif;font-size:2rem;color:#fff}.countdown span{color:#fff;font-size:.78rem}.hairline{background:#8C827A66}
.section-rose{width:195px;opacity:.2}.rose-left{left:-112px;bottom:-65px}.rose-right{right:-120px;top:20px}
.rsvp-section,.details,.stay{background:var(--ivory);color:var(--ink)}
.rsvp-section form,.response-card{background:#EFECE6cc;border:1px solid #8C827A45;box-shadow:0 16px 36px #62595112}.choice button{border-color:#8C827A55;color:var(--ink)}.choice button.active,.primary{background:#8C827A;border-color:#8C827A;color:#fff}input{border-bottom-color:#8C827A66}.privacy,.verify{color:#756d67}
.details:before,.stay:before{border-color:#8C827A4a;background:transparent}.details .detail-list article,.details .detail-list article:last-child{background:#EFECE6;border-color:#8C827A30}.detail-icon{filter:grayscale(1) sepia(.18) opacity(.78)}.details .closing-line,.details .eyebrow,.stay .eyebrow,.text-link{color:var(--ink)}
.details-flower{left:-72px;bottom:-78px;width:205px;opacity:.24;mix-blend-mode:multiply}.braira-photo{background:#EFECE6;border-color:#D4C5B9}
footer{background:#8C827A;color:#F7F5F0;border-top:2px solid #D4C5B9}.footer-mark,.footer-names{filter:invert(1)}
@keyframes pulse{50%{box-shadow:0 0 0 7px #D4C5B944}}
@media(max-width:370px){.envelope>img{height:540px}.countdown{gap:6px}.countdown div{min-height:78px}.countdown strong{font-size:1.75rem}}

/* Full-screen pearl envelope opening */
.opening{
  min-height:100svh;
  padding:0;
  justify-content:flex-start;
  background:#F7F5F0;
}
.opening:after{display:none}
.opening-bg,.opening-bloom{display:none}
.dua{
  position:absolute;
  z-index:5;
  top:15.5%;
  left:50%;
  width:88%;
  max-width:380px;
  margin:0;
  transform:translateX(-50%);
  color:#625A54;
  font-size:clamp(1.55rem,6.4vw,2rem);
  line-height:1.9;
  text-shadow:0 1px 8px #F7F5F0;
}
.envelope{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
}
.envelope>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:none;
}
.envelope>span:last-child{
  position:absolute;
  z-index:6;
  bottom:max(7.5%,calc(env(safe-area-inset-bottom) + 24px));
  left:50%;
  width:max-content;
  margin:0;
  padding:11px 27px;
  transform:translateX(-50%);
  border:1px solid #8C827A8a;
  border-radius:999px;
  background:#F7F5F0d9;
  color:#625A54;
  box-shadow:0 8px 24px #625A5417;
  backdrop-filter:blur(7px);
  font-size:1.2rem;
}
.opening .green-seal{
  display:grid!important;
  position:absolute!important;
  z-index:7;
  top:calc(55.1% - .3cm);
  left:50%;
  width:70px!important;
  height:70px!important;
  padding:13px!important;
  margin:0!important;
  transform:translate(-50%,-50%);
  place-items:center;
  border-radius:50%!important;
  background:transparent!important;
}
.opening .green-seal img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.96;
  transform:scale(.43);
  filter:brightness(0) saturate(100%) invert(96%) sepia(9%) saturate(290%) hue-rotate(348deg) brightness(104%) contrast(94%);
}

/* Larger, more readable type throughout the invitation */
body{font-size:1.1rem}
.personal{font-size:1.2rem}.date{font-size:1.45rem}
.eyebrow{font-size:1.55rem}.countdown-section .eyebrow{font-size:1.85rem}
.countdown span{font-size:1rem}
.choice button,label,input,.primary,.text-link{font-size:1.12rem}
.details-intro{font-size:1.32rem}
.details .detail-list h2{font-size:1.48rem}
.details .closing-line{font-size:1.55rem}
.stay h2{font-size:2rem}.stay>p:not(.eyebrow):not(.verify){font-size:1.24rem}
footer p{font-size:1.2rem}

/* Stronger lilies over the photo slideshow */
.reveal .flower-float{z-index:8;opacity:.82;filter:drop-shadow(0 6px 12px #625A5430)}
.reveal .flower-one{width:235px;left:-117.5px;bottom:-28px}
.reveal .flower-two{width:220px;right:-110px;top:7%}

/* Hotel section uses the same champagne tone as the countdown tiles */
.stay{background:#D4C5B9}
.stay:before{border-color:#F7F5F099}
.stay .braira-photo{border-color:#F7F5F0;background:#EFECE6}
.stay .primary{background:#F7F5F0;color:#625A54;border:1px solid #8C827A55}
.stay .text-link{color:#625A54}

/* Off-white closing footer */
footer{background:#F7F5F0;color:#625A54;border-top:2px solid #D4C5B9}
footer .footer-mark,footer .footer-names{filter:none;mix-blend-mode:multiply}
footer p{color:#D4C5B9}

/* Standalone envelope gate */
body.invite-locked{height:100svh;overflow:hidden;overscroll-behavior:none}
body.invite-locked main>section:not(.opening),body.invite-locked footer{display:none}
.save-date{position:absolute;z-index:8;left:50%;bottom:14%;margin:0;transform:translateX(-50%);color:#8C827A;font-family:Georgia,serif;font-size:1.1rem;letter-spacing:.16em;direction:ltr;white-space:nowrap;pointer-events:none}

/* Details and RSVP share one full page */
.details-rsvp-page{min-height:100svh;padding-top:38px;padding-bottom:38px;justify-content:center}
.details-rsvp{position:relative;z-index:4;width:100%;margin-top:16px}
.details-rsvp form,.details-rsvp .response-card{width:100%;padding:17px 16px;text-align:right;background:#EFECE6cc;border:1px solid #8C827A45;box-shadow:0 12px 28px #62595110}
.details-rsvp .choice{margin-bottom:12px}
.details-rsvp input{margin-bottom:12px}

/* Requested half-page countdown and full-page hotel */
.countdown-section{min-height:50svh}
.stay{min-height:100svh}

/* Quarter-page floral closing */
footer{position:relative;min-height:25svh;padding:26px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.footer-names,.footer-date{position:relative;z-index:3}
.footer-date{margin:0;color:#8C827A;font-size:1.15rem}
.footer-lily{position:absolute;z-index:1;width:145px;height:auto;opacity:.48;pointer-events:none}
.footer-lily-one{left:-70px;bottom:-55px}
.footer-lily-two{right:-72px;top:-55px;transform:scaleX(-1)}
.footer-lily-three{left:18%;top:-95px;transform:rotate(25deg)}
.footer-lily-four{right:17%;bottom:-100px;transform:scaleX(-1) rotate(25deg)}

@media(max-width:370px){
  .envelope>img{height:100%}
  .dua{top:14%;font-size:1.42rem}
  .envelope>span:last-child{font-size:1.05rem}
}

/* iPhone-first proportions */
@media(max-width:600px){
  main{width:100%;max-width:none;box-shadow:none}
  .screen{min-height:auto;padding:52px 22px}

  .opening{min-height:100svh;padding:0;background:#F7F5F0 url("assets/envelope-pearl.png") center/cover no-repeat}
  .dua{top:16%;width:86%;font-size:clamp(1.15rem,5.2vw,1.45rem);line-height:1.75}
  .envelope>img{position:absolute;top:31%;left:50%;width:94%;height:auto;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 14px 20px #625A5430)}
  .opening .green-seal{display:none!important}
  .envelope>span:last-child{bottom:max(7%,calc(env(safe-area-inset-bottom) + 20px));padding:9px 23px;font-size:1.02rem}
  .open-label>span{display:block;transform:translateY(-7px)}
  .save-date{bottom:13%;font-size:1rem}

  .countdown-section{min-height:50svh;padding:42px 20px 38px}
  .countdown-section:before{inset:22px 14px;border-radius:105px 105px 18px 18px}
  .countdown-section .eyebrow{margin-bottom:26px;font-size:1.45rem;line-height:1.45}
  .countdown{width:90%;gap:6px}
  .countdown div{min-width:0;min-height:60px;padding:5px 2px 4px;border-radius:13px;justify-content:center}
  .countdown strong{font-size:2rem;line-height:1.05}
  .countdown span{display:block;margin-top:6px;font-size:1rem;line-height:1.25;color:#fff}
  .countdown strong,.countdown span{position:relative;top:-11px}
  .hairline{margin-top:25px}

  .details{min-height:100svh;padding:32px 25px 34px}
  .details:before{inset:14px;border-radius:105px 105px 18px 18px}
  .details .eyebrow{font-size:1.4rem}
  .details-intro{margin-bottom:14px;font-size:1.02rem;line-height:1.6}
  .details .detail-list{width:90%;gap:7px}
  .details .detail-list article,.details .detail-list article:last-child{grid-template-columns:42px 1fr;min-height:56px;padding:5px 12px;border-radius:14px}
  .detail-icon,.tower-icon,.chandelier-icon{width:38px;height:38px}
  .details .detail-list h2{font-size:1.35rem;line-height:1.35}
  .details .detail-list h2{position:relative;top:-11px}
  .details .closing-line{margin-top:12px;font-size:1.2rem}

  .details-rsvp{width:90%;margin-top:10px}
  .details-rsvp form{padding:12px 12px}
  .details-rsvp .choice{margin-bottom:8px}
  .details-rsvp label{margin-bottom:2px}
  .details-rsvp input{margin-bottom:8px;padding:5px 3px}

  .rsvp-section{min-height:auto;padding:48px 22px}
  .rsvp-section form{width:90%;padding:16px 14px}
  .choice{gap:7px;margin-bottom:18px}
  .choice button{padding:6px 4px;font-size:1.12rem}
  .choice button{display:grid;place-items:center;line-height:1.2}
  .choice button,.primary,.stay .link{padding-top:4px;padding-bottom:10px}
  .choice button>span,.rsvp-section .primary>span{display:block;transform:translateY(-7px)}
  .response-card .primary{display:grid;place-items:center;line-height:1.2}
  .response-card .primary>span{display:block;transform:translateY(-8px)}
  label,input,.primary,.text-link{font-size:1.12rem}
  .primary{padding:8px 14px}

  .stay{min-height:100svh;padding:58px 24px 66px}
  .stay:before{inset:14px;border-radius:105px 105px 18px 18px}
  .stay .eyebrow{margin-bottom:20px;font-size:1.4rem}
  .braira-photo{margin-bottom:22px;padding:6px}
  .stay>p:not(.eyebrow):not(.verify){margin-bottom:20px;font-size:1.05rem;line-height:1.75}
  .stay .link{width:88%}

  footer{min-height:25svh;padding:22px}
  .footer-names{width:68%;height:68px;margin:0 auto 2px}
  footer .footer-names{opacity:.9;filter:none;mix-blend-mode:multiply}
  .footer-date{font-size:1.08rem}
  .footer-lily{width:135px;opacity:.55}
}

/* Pink lily, cream and sage redesign from supplied references */
:root{--cream:#f8f3e8;--black:#171512;--sage-new:#9cab98;--sage-deep:#74866f;--blush:#ead9dc}
body,main{background:var(--cream);color:var(--black)}

.opening{background:var(--cream)}
.opening .dua,.opening-bloom{display:none}
.opening .envelope>img{position:absolute;inset:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center;filter:none}
.opening .envelope>span:last-child{bottom:12.5%;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;color:#000;font-size:1.15rem;font-weight:600}
.opening .open-label>span{transform:none}
.opening-lily-motion{position:absolute;z-index:5;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;clip-path:inset(0 0 56% 46%);pointer-events:none;animation:cornerLilyFloat 5s ease-in-out infinite}

.reveal .flower-float{display:none}
.photo-lily-frame,.countdown-lily-frame,.footer-lily-frame{position:absolute;z-index:8;inset:-1.5%;width:103%;height:103%;object-fit:cover;pointer-events:none;animation:lilyFrameFloat 7s ease-in-out infinite}
.photo-lily-frame{filter:drop-shadow(0 8px 16px #352b2440)}

.details,.details-rsvp-page{background:var(--cream);color:#000}
.details:before{border-color:#cdbfae}
.details .eyebrow,.details .closing-line{color:#000}
.details .detail-list article,.details .detail-list article:last-child{background:#fffaf1;border-color:#d8cbb9}
.details-rsvp form,.details-rsvp .response-card{background:#fffaf1;border-color:#cdbfae;color:#000}
.details-rsvp .choice button{border-color:#171512;color:#000}
.details-rsvp .choice button.active,.details-rsvp .primary{background:#171512;border-color:#171512;color:#fff}
.details-rsvp input{border-bottom-color:#171512;color:#000}

.countdown-section{background:var(--sage-new);color:#fff}
.countdown-section:before{background:transparent;border-color:#ffffff80}
.countdown-section .eyebrow{color:#fff}
.countdown div{background:var(--sage-deep);border-color:#ffffff1f;box-shadow:none}
.countdown-lily-frame{z-index:2;opacity:.72;inset:-12%;width:124%;height:124%;animation-duration:8s}
.countdown-section .eyebrow,.countdown-section .countdown,.countdown-section .hairline{z-index:5}
.hairline{background:#fff9}

.stay{background:var(--cream);color:#000}
.stay:before{border-color:#cdbfae}
.stay .eyebrow,.stay .text-link{color:#000}
.stay .braira-photo{background:#fffaf1;border-color:#cdbfae}
.stay .primary{background:#000;color:#fff;border-color:#000}

footer{background:var(--sage-new) url("assets/footer-sage-linework.jpeg") center/cover no-repeat;color:#fff;border:0}
footer .footer-names{filter:invert(1);mix-blend-mode:screen;opacity:1}
footer .footer-date{color:#fff}
.footer-lily-frame{z-index:1;opacity:.24;inset:-65% -4%;width:108%;height:230%;animation-duration:9s}

@keyframes cornerLilyFloat{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-6px,10px,0) rotate(1.5deg)}}
@keyframes lilyFrameFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-10px,0) scale(1.015)}}

/* Final page */
footer.final-page{
  position:relative;
  min-height:66svh;
  padding:44px 24px 34px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:0;
  color:#4b4b48;
  background:#eee8dc url("assets/footer-floral-background.png") center/cover no-repeat;
}
.footer-content{
  position:relative;
  z-index:3;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translateY(-3%);
}
footer.final-page .footer-love{
  margin:0 0 22px;
  color:#555653;
  font-size:1.65rem;
  line-height:1.25;
}
footer.final-page .footer-names{
  width:72%;
  height:112px;
  margin:0 auto 8px;
  object-fit:contain;
  opacity:.96;
  filter:none;
  mix-blend-mode:multiply;
}
footer.final-page .footer-date{
  margin:0;
  color:#555653;
  font-size:1.28rem;
  line-height:1.4;
}
.footer-flower{
  position:absolute;
  z-index:2;
  bottom:-3%;
  width:40%;
  max-width:190px;
  height:auto;
  opacity:.92;
  pointer-events:none;
  transform-origin:50% 100%;
  will-change:transform;
}
.footer-flower-left{
  left:-7%;
  animation:footerFlowerSwayLeft 7s ease-in-out infinite;
}
.footer-flower-right{
  right:-7%;
  animation:footerFlowerSwayRight 7.8s ease-in-out infinite;
}
@keyframes footerFlowerSwayLeft{
  0%,100%{transform:rotate(-2deg) translate3d(0,0,0)}
  50%{transform:rotate(2.5deg) translate3d(4px,-7px,0)}
}
@keyframes footerFlowerSwayRight{
  0%,100%{transform:scaleX(-1) rotate(-2deg) translate3d(0,0,0)}
  50%{transform:scaleX(-1) rotate(2.5deg) translate3d(-4px,-7px,0)}
}

@media(max-width:600px){
  .opening{background:var(--cream)}
  .opening .envelope>img{top:0;left:0;width:100%;height:100%;transform:none;object-fit:cover}
  .opening .envelope>span:last-child{bottom:12.5%;font-size:1.08rem}
  .details,.details-rsvp-page{background:var(--cream)}
  .countdown-section{background:var(--sage-new)}
  .stay{background:var(--cream)}
}

/* Final floral and button refinements */
.photo-lily-frame{opacity:.78;filter:saturate(.72) brightness(.94)}
.details-lily-corner{position:absolute;z-index:2;right:-5%;top:-3%;width:58%;height:48%;object-fit:cover;object-position:top right;clip-path:inset(0 0 45% 42%);pointer-events:none;animation:cornerLilyFloat 7s ease-in-out infinite}
.details-rsvp .primary{background:#f3dfe4;border-color:#e8cbd3;color:#171512}
.countdown-lily-frame{opacity:.95;inset:-5%;width:110%;height:110%;filter:saturate(.9) brightness(.98)}
.stay .primary{background:#f3dfe4;border-color:#e8cbd3;color:#171512}

/* Frame-free details and exact blush refinements */
.details:before,
.countdown-section:before,
.stay:before{display:none}

.details-flower{display:none}

.details-lily-corner{
  right:-8%;
  top:-4%;
  width:78%;
  height:56%;
  opacity:.82;
  filter:saturate(.72) brightness(.95);
  clip-path:inset(0 0 43% 38%);
}

.details-rsvp .primary,
.stay .primary{
  background:#E19DA7;
  border-color:#E19DA7;
  color:#171512;
  display:grid;
  place-items:center;
  line-height:1.2;
}

.details-rsvp .primary>span,
.stay .primary>span{
  display:block;
  transform:translateY(-4px);
}

.hotel-lily-corner{
  position:absolute;
  z-index:2;
  right:-9%;
  top:-4%;
  width:72%;
  height:53%;
  object-fit:cover;
  object-position:top right;
  opacity:.82;
  filter:saturate(.72) brightness(.95);
  clip-path:inset(0 0 43% 39%);
  pointer-events:none;
  animation:cornerLilyFloat 7s ease-in-out infinite;
}

/* Embossed envelope cover */
.opening .save-date{
  bottom:20.5%;
  width:72%;
  margin:0;
  line-height:0;
  transform:translateX(-50%) rotate(-2deg);
  filter:drop-shadow(0 1px 2px #594b3c1f);
}

.opening .save-date img{
  display:block;
  width:100%;
  height:auto;
  filter:none;
  opacity:.56;
}

/* Keep the opening prompt close to the Save the Date lettering. */
.opening .envelope>span:last-child{
  bottom:max(19.2%,calc(env(safe-area-inset-bottom) + 38px));
}

.opening-identity{
  position:absolute;
  z-index:9;
  top:20%;
  left:50%;
  width:100%;
  transform:translateX(-50%);
  color:#655a50;
  font-family:"Cormorant Garamond",serif;
  text-align:center;
  letter-spacing:.12em;
}

.opening-identity p{
  margin:0 0 3px;
  font-size:clamp(1.05rem,4.5vw,1.4rem);
}

.opening-identity p span{
  padding:0 .18em;
}

.opening-identity time{
  font-size:clamp(.95rem,4vw,1.2rem);
  letter-spacing:.16em;
}

.opening .envelope>span:last-child{
  bottom:16.5%;
  font-family:Tajawal,sans-serif;
  font-size:clamp(1rem,4.5vw,1.25rem);
  font-weight:300;
  letter-spacing:0;
}

/* Blend the textured cover into Safari's solid safe-area color. */
.opening:before{
  content:"";
  position:absolute;
  z-index:4;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    #F7F5F0 0,
    #F7F5F0 0.8%,
    transparent 5%,
    transparent 95%,
    #F7F5F0 99.2%,
    #F7F5F0 100%
  );
}

/* Slideshow: clean filigree frame without floral overlays. */
.photo-lily-frame,
.reveal .flower-float{display:none!important}

.photo-ornamental-frame{
  position:absolute;
  z-index:7;
  inset:0;
  pointer-events:none;
}

.photo-ornamental-frame .ornament{
  position:absolute;
  display:block;
  width:52px;
  height:auto;
  object-fit:contain;
}

.ornament-left{
  left:7px;
  top:50%;
  transform:translateY(-50%);
}

.ornament-right{
  right:7px;
  top:50%;
  transform:translateY(-50%) scaleX(-1);
}

.ornament-top{
  left:50%;
  top:-135px;
  width:34px!important;
  transform:translateX(-50%) rotate(90deg);
}

.ornament-bottom{
  left:50%;
  bottom:-135px;
  width:34px!important;
  transform:translateX(-50%) rotate(-90deg);
}

.reveal .names{
  width:100%;
  height:150px;
}

/* Compact reference-led Details + RSVP composition. */
.details-rsvp-page{
  min-height:100svh;
  padding:22px 18px;
  justify-content:center;
  background:#ede6da url("assets/details-floral-background.jpeg") center/cover no-repeat;
}

.details-rsvp-page .details-lily-corner,
.details-rsvp-page .details-flower,
.details-rsvp-page>.eyebrow{display:none!important}

.details-panel{
  position:relative;
  z-index:4;
  width:100%;
  padding:25px 16px 18px;
  background:rgba(248,243,232,.82);
  color:#24211e;
  backdrop-filter:blur(1px);
}

.details-panel .details-intro{
  margin:0 0 19px;
  font-size:clamp(1.18rem,5vw,1.42rem);
  font-weight:400;
  line-height:1.9;
}

.details-panel .detail-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  width:100%;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.details-panel .detail-list article,
.details-panel .detail-list article:last-child{
  display:flex;
  min-width:0;
  min-height:0;
  padding:0;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  background:transparent;
  border:0;
  border-radius:0;
}

.details-panel .detail-icon,
.details-panel .tower-icon,
.details-panel .chandelier-icon{
  width:52px;
  height:52px;
  object-fit:contain;
  filter:grayscale(1) sepia(.15) opacity(.82);
}

.details-panel .detail-list h2{
  position:static;
  margin:0;
  color:#24211e;
  font-size:1.08rem;
  font-weight:400;
  line-height:1.45;
}

.details-panel .closing-line{
  margin:18px 0 13px;
  color:#24211e;
  font-size:1.22rem;
  line-height:1.65;
}

.details-panel .details-rsvp{
  width:100%;
  margin:0;
}

.details-panel .details-rsvp form,
.details-panel .details-rsvp .response-card{
  width:100%;
  padding:13px 13px 12px;
  background:rgba(255,255,255,.46);
  border:0;
  box-shadow:none;
}

.details-panel .choice{
  gap:7px;
  margin:0 0 9px;
}

.details-panel .choice button{
  min-height:38px;
  padding:7px 5px;
}

.details-panel label{margin:0 3px 1px}
.details-panel input{margin:0 0 8px;padding:6px 4px}
.details-panel .primary{min-height:40px;padding:7px 14px}

/* Details + RSVP spacing corrections from the mobile review. */
.details-rsvp-page{
  padding:12px 9px;
}

.details-panel{
  padding:20px 14px 17px;
  transform:translateY(-18px);
  border-radius:3px;
}

.details-panel .details-intro{
  width:100%;
  margin:0 auto 15px;
  text-align:center;
  direction:rtl;
}

.details-panel .detail-list article,
.details-panel .detail-list article:last-child{
  gap:0;
}

.details-panel .detail-icon,
.details-panel .tower-icon,
.details-panel .chandelier-icon{
  margin-bottom:-3px;
}

.details-panel .detail-list h2{
  text-align:center;
  line-height:1.3;
}

.details-panel .closing-line{
  margin:18px 0 27px;
  text-align:center;
}

.details-panel .details-rsvp form,
.details-panel .details-rsvp .response-card{
  padding:0;
  background:transparent;
}

.details-panel .choice{
  gap:8px;
  margin-bottom:14px;
}

.details-panel .choice button{
  min-height:34px;
  padding:3px 6px;
  border:1px solid #685f58;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:1rem;
  line-height:1.25;
}

.details-panel .choice button>span,
.details-panel .primary>span{
  display:block;
  transform:translateY(-8px)!important;
}

.details-panel label{
  margin:0 4px 2px;
  text-align:right;
  font-size:1rem;
}

.details-panel input{
  margin:0 0 12px;
  padding:5px 4px 7px;
  font-size:1rem;
}

.details-panel .primary{
  min-height:35px;
  padding:4px 14px;
  border-radius:999px;
  font-size:1rem;
  line-height:1.2;
}

/* Balanced top and bottom breathing room for the combined page. */
.details-rsvp-page{
  padding:10px 9px;
}

.details-panel{
  transform:none;
  padding:17px 14px;
}

.details-panel .details-intro{margin-bottom:12px}
.details-panel .closing-line{margin-top:14px;margin-bottom:22px}

.details-panel .details-intro{
  transform:translateY(-11px);
}

/* Final requested type scale for Details + RSVP. */
.details-panel .details-intro{font-size:21px}
.details-panel .detail-list h2{font-size:18.3px}
.details-panel .closing-line{font-size:21px}
.details-panel label,
.details-panel .choice button,
.details-panel .primary{font-size:18.3px}

/* Equal medium floral border on every side of the section. */
.details-rsvp-page{
  min-height:100svh;
  padding:20px;
  justify-content:flex-start;
}

.details-panel{
  min-height:calc(100svh - 40px);
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.details-panel .closing-line{
  margin-bottom:38px;
}

.details-panel .details-intro{font-size:23px}
.details-panel .detail-list h2{font-size:20px}
.details-panel .closing-line{font-size:23px}
.details-panel label,
.details-panel .choice button,
.details-panel .primary{font-size:19.5px}

/* Thicker floral border and supplied divider. */
.details-rsvp-page{
  padding:54px 40px;
}

.details-panel{
  min-height:calc(100svh - 108px);
  padding:43px 16px 34px;
  justify-content:flex-start;
}

.details-panel .details-intro{
  transform:none;
}

.details-panel .closing-line{
  margin-bottom:10px;
}

.details-rsvp-divider{
  display:block;
  width:78%;
  height:auto;
  margin:0 auto 24px;
  object-fit:contain;
}

/* Align the details block with the marked reference line. */
.details-panel .details-intro,
.details-panel .detail-list,
.details-panel .closing-line,
.details-panel .details-rsvp-divider{
  transform:translateY(-38px);
}

.details-panel .details-rsvp-divider{
  transform:translateY(-8px);
}

.details-panel .detail-icon,
.details-panel .tower-icon,
.details-panel .chandelier-icon{
  transform:translateY(10px);
}

/* Visually center Arabic RSVP copy inside every control. */
.details-panel .details-rsvp form{
  direction:rtl;
  text-align:right;
}

.details-panel .choice button,
.details-panel .primary{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
}

.details-panel .choice button>span,
.details-panel .primary>span{
  width:100%;
  transform:translateY(-9px)!important;
  text-align:center;
  line-height:1;
}

.details-panel label,
.details-panel input{
  width:100%;
  direction:rtl;
  text-align:right;
}

/* Slim watercolor countdown with true RTL ordering and centered copy. */
.countdown-section{
  min-height:38svh;
  padding:34px 20px 30px;
  background:#dfeee1 url("assets/countdown-watercolor.jpeg") center/cover no-repeat!important;
  color:#24211e;
}

.countdown-section .eyebrow{
  margin:0 0 16px;
  color:#24211e;
  text-align:center;
  line-height:1.35;
}

.countdown-section .countdown{
  width:92%;
  direction:rtl;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}

.countdown-section .countdown div{
  min-width:0;
  min-height:62px;
  padding:6px 2px;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:14px;
}

.countdown-section .countdown strong,
.countdown-section .countdown span{
  position:static;
  top:auto;
  width:100%;
  margin:0;
  text-align:center;
  line-height:1.05;
}

.countdown-section .countdown span{
  margin-top:4px;
  transform:translateY(-2px);
}

.countdown-section .hairline{
  margin-top:18px;
}

.countdown-lily-frame{
  opacity:.46;
}

/* Refined beige countdown from the latest reference. */
.countdown-section{
  min-height:36svh;
  padding:28px 20px 26px;
  background:#efe2d2 url("assets/countdown-beige-paper.jpeg") center/cover no-repeat!important;
  color:#24211e;
}

.countdown-section .eyebrow{
  margin-bottom:10px;
  transform:translateY(-10px);
  color:#24211e;
}

.countdown-section .countdown{
  width:92%;
  gap:7px;
  transform:translateY(-4px);
}

.countdown-section .countdown div{
  min-height:60px;
  padding:4px 2px;
  background:#c8ad8f;
  border:1px solid rgba(111,87,64,.14);
  color:#fffaf2;
}

.countdown-section .countdown strong,
.countdown-section .countdown span{
  color:#fffaf2;
  line-height:1;
}

.countdown-section .countdown span{
  margin-top:2px;
  transform:translateY(-4px);
}

.countdown-section .hairline{
  margin-top:10px;
  background:#8c7560;
}

.countdown-lily-frame{
  display:none!important;
}

/* Final countdown surface and fixed visual centering for the Arabic typeface. */
.countdown-section{
  background:#f7f5f0 url("assets/countdown-watercolor-paper.jpeg") center/cover no-repeat!important;
}

.countdown-section .countdown div{
  position:relative;
  display:block;
  height:64px;
  min-height:64px;
  padding:0;
  overflow:hidden;
  background:rgba(248,243,232,.82);
  border:1px solid rgba(140,130,122,.28);
  color:#24211e;
}

.countdown-section .countdown strong{
  position:absolute;
  top:6px;
  right:0;
  left:0;
  display:flex;
  height:31px;
  align-items:center;
  justify-content:center;
  margin:0;
  transform:translateY(-3px);
  color:#24211e;
  line-height:1;
}

.countdown-section .countdown span{
  position:absolute;
  right:0;
  bottom:6px;
  left:0;
  display:flex;
  height:20px;
  align-items:center;
  justify-content:center;
  margin:0;
  transform:translateY(-3px);
  color:#24211e;
  line-height:1;
}

/* Positioning matched to the marked countdown reference. */
.countdown-section{
  background:#f4f1e9 url("assets/countdown-microcement.jpeg") center/cover no-repeat!important;
}

.countdown-section .eyebrow{
  transform:translateY(-51px);
}

.countdown-section .hairline{
  display:none!important;
}

.countdown-section .countdown strong{
  transform:translateY(-18px);
}

.countdown-section .countdown span{
  transform:translateY(-12px);
}

/* Compact countdown band matching the supplied reference. */
.countdown-section{
  min-height:24svh;
  padding:14px 20px 12px;
}

.countdown-section .eyebrow{
  margin-bottom:2px;
  transform:translateY(-10px);
}

.countdown-section .countdown{
  transform:translateY(-5px);
}

/* Floating countdown treatment with slim separators. */
.countdown-section{
  background:#f8f3e8!important;
}

.countdown-section .countdown{
  width:88%;
  gap:0;
}

.countdown-section .countdown div{
  position:relative;
  display:flex;
  height:58px;
  min-height:58px;
  padding:0 5px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
}

.countdown-section .countdown div:not(:last-child){
  border-left:1px solid rgba(140,130,122,.48);
}

.countdown-section .countdown strong,
.countdown-section .countdown span{
  position:static;
  inset:auto;
  display:block;
  width:100%;
  height:auto;
  margin:0;
  transform:none;
  color:#24211e;
  text-align:center;
}

.countdown-section .countdown strong{
  line-height:.9;
}

.countdown-section .countdown span{
  margin-top:6px;
  line-height:1;
}

/* Move only the countdown heading to the marked guide line. */
.countdown-section .eyebrow{
  transform:translateY(-50px);
}

/* Guest-stay section: supplied microcement texture and hotel illustration. */
.stay{
  background-color:#f3f0e9;
  background-image:url("assets/hotel-microcement.jpeg");
  background-repeat:repeat-y;
  background-position:center;
  background-size:cover;
}

.stay .section-rose,
.stay .hotel-lily-corner{
  display:none!important;
}

.stay .braira-photo{
  background:transparent;
  border:0;
  box-shadow:none;
}

.stay .braira-photo img{
  object-fit:contain;
}

/* Keep the guest-stay section compact instead of full-screen. */
.stay{
  min-height:auto;
  padding:18px 24px 40px;
  justify-content:flex-start;
}

.stay .eyebrow{
  margin-bottom:14px;
  font-size:1.85rem;
  line-height:1.25;
}

.stay .braira-photo{
  margin-bottom:18px;
}

.stay>p:not(.eyebrow):not(.verify){
  margin-bottom:16px;
  line-height:1.65;
}

.stay-copy{
  display:grid;
  gap:9px;
}

.stay-copy>span{
  display:block;
}

.stay .primary.link{
  width:100%;
  height:60px;
  min-height:60px;
  padding:8px 14px;
  border-radius:30px;
  line-height:1;
}

.stay .primary.link>span{
  transform:none;
}

.stay .hotel-location{
  margin-top:10px;
}

/* One exact component for every solid pink action button. */
.primary.unified-pink-button{
  display:flex!important;
  width:100%!important;
  height:auto!important;
  min-height:35px!important;
  padding:4px 14px!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #E19DA7!important;
  border-radius:999px!important;
  background:#E19DA7!important;
  color:#171512!important;
  font-family:inherit!important;
  font-size:19.5px!important;
  line-height:1!important;
  text-align:center!important;
  text-decoration:none!important;
  box-shadow:none!important;
}

.primary.unified-pink-button>span{
  display:block!important;
  width:100%!important;
  transform:translateY(-9px)!important;
  text-align:center!important;
  line-height:1!important;
}

/* Exact blush color for the slideshow names and date. */
.reveal .names{
  display:block;
  background:#ffe1e5;
  -webkit-mask:url("assets/names.png") center/contain no-repeat;
  mask:url("assets/names.png") center/contain no-repeat;
  filter:none;
  mix-blend-mode:normal;
}

.reveal .date{
  color:white;
}

.reveal .personal{
  color:white;
}

/* Match the final page to the compact countdown band. */
footer.final-page{
  min-height:24svh;
  padding:14px 20px 12px;
  background:#e8e0d3 url("assets/footer-floral-crop.png") center/cover no-repeat;
}

footer.final-page .footer-content{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:12px 0 10px;
  display:grid;
  grid-template-rows:28px 74px 18px;
  align-content:center;
  row-gap:2px;
  align-items:center;
  justify-items:center;
  transform:none;
}

footer.final-page .footer-love{
  position:static;
  width:100%;
  margin:0;
  color:#F7F5F0;
  font-size:18px;
  line-height:1.2;
}

footer.final-page .footer-names{
  position:static;
  display:block;
  width:200px;
  max-width:calc(100% - 40px);
  height:74px;
  min-height:74px;
  margin:0;
  flex:none;
  transform:translateY(-2px);
  background:#FCCFDB;
  -webkit-mask-image:url("assets/hajar-footer-name.png");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  -webkit-mask-position:center;
  mask-image:url("assets/hajar-footer-name.png");
  mask-repeat:no-repeat;
  mask-size:contain;
  mask-position:center;
  filter:none;
  mix-blend-mode:normal;
}

footer.final-page .footer-date{
  position:static;
  width:100%;
  margin:0;
  color:#F7F5F0;
  font-size:13px;
  line-height:1.2;
}

footer.final-page .footer-divider{
  display:block;
  width:130px;
  height:18px;
  margin-top:6px;
  object-fit:contain;
}

footer.final-page .footer-flower{
  bottom:-18%;
  width:31%;
}

.countdown-section .countdown-flower{
  z-index:4;
  bottom:-18%;
  width:31%;
}

/* Bring the hotel copy closer to the palace and match the details type size. */
.stay>p.stay-copy:not(.eyebrow):not(.verify){
  margin-top:-28px;
  font-size:23px;
}

.stay .unified-pink-button:first-of-type{
  margin-top:12px;
}

.stay .primary.unified-pink-button>span{
  transform:translateY(-14px)!important;
}