:root{--cream:#f7f1e8;--paper:#fffaf3;--gold:#c9a34f;--gold-deep:#9b772f;--ink:#4c3824;--muted:#8c7a64;--line:rgba(178,138,57,.38)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Noto Naskh Arabic',serif;overflow-x:hidden}button,input,textarea{font:inherit}.language-switch{position:fixed;z-index:1500;top:max(14px,env(safe-area-inset-top));left:16px;border:1px solid rgba(178,138,57,.38);border-radius:999px;background:rgba(255,250,243,.9);backdrop-filter:blur(10px);padding:9px 14px;color:var(--ink);cursor:pointer;box-shadow:0 6px 18px rgba(76,56,36,.06);font-family:Arial,sans-serif;font-size:14px}.language-switch .sep{opacity:.42;margin:0 5px}.language-switch .active{font-weight:700;color:var(--gold-deep)}.opening{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(circle at 50% 38%,#fffaf4 0,#f7f0e6 62%,#efe4d5 100%);transition:opacity 1.4s ease,visibility 1.4s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}.opening.leaving{opacity:0;visibility:hidden;transform:scale(1.045)}.envelope-button{position:relative;width:min(94vw,980px);padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 30px 42px rgba(76,56,36,.14));transform-origin:center;transition:transform 1.15s cubic-bezier(.2,.75,.2,1),filter 1.15s ease}.envelope-button:hover{transform:translateY(-2px) scale(1.006)}.envelope-button.opening-motion{transform:scale(1.035) translateY(-9px) rotateX(1.5deg);filter:drop-shadow(0 38px 48px rgba(76,56,36,.10))}.envelope-art{display:block;width:100%;height:auto;border-radius:14px}.envelope-glow{position:absolute;inset:28% 36% 25%;border-radius:50%;box-shadow:0 0 0 0 rgba(201,163,79,0);transition:box-shadow .9s ease}.opening.is-opening .envelope-glow{box-shadow:0 0 50px 16px rgba(201,163,79,.23)}.open-label{border:0;background:transparent;color:var(--gold-deep);font-size:clamp(19px,2vw,25px);cursor:pointer;letter-spacing:.01em;transition:opacity .45s ease,transform .45s ease}.opening.is-opening .open-label{opacity:0;transform:translateY(7px)}.site{opacity:0;pointer-events:none;transition:opacity 1.15s ease .35s}.site.visible{opacity:1;pointer-events:auto}.hero{background:#ede4d8;padding:0}.hero-media{position:relative;height:min(86svh,920px);overflow:hidden;background:#ddd1c4}.hero-poster{width:100%;height:100%;object-fit:cover;object-position:center 46%;animation:heroBreath 14s ease-in-out infinite alternate}@keyframes heroBreath{from{transform:scale(1)}to{transform:scale(1.035)}}.hero-note{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(255,250,243,.82);backdrop-filter:blur(8px);padding:7px 12px;border-radius:999px;font-size:12px;color:#7d6b55;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}.brand{text-align:center;background:var(--paper);padding:55px 20px 24px}.brand-logo{width:min(42vw,250px);height:auto}.invite-wrap{background:var(--paper);padding:18px 18px 86px}.invite-card{width:min(100%,1120px);margin:0 auto;text-align:center;padding:28px 26px}.name-row{display:grid;grid-template-columns:minmax(150px,230px) 1fr minmax(150px,230px);align-items:center;gap:32px;margin:16px auto 48px}.side-photo{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:3px;box-shadow:0 14px 34px rgba(76,56,36,.08)}.side-photo img{width:100%;height:100%;object-fit:cover;display:block}.names h1{font-size:clamp(38px,5vw,66px);font-weight:500;line-height:1.08;margin:0}.copy{font-size:clamp(19px,2.05vw,27px);line-height:1.9;max-width:930px;margin:0 auto}.copy p{margin:0 0 17px}.invite-title{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4.6vw,52px);line-height:1.1}.emphasis{font-weight:600}.details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:52px 0 46px;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.detail{min-height:154px;padding:28px 12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px}.detail+.detail{border-inline-start:1px solid var(--line)}.detail.arrival{grid-column:1/-1;min-height:auto;border-inline-start:0;border-top:1px solid var(--line);padding:23px 12px}.detail-label{font-size:19px;color:var(--muted)}.detail strong{font-size:clamp(20px,2.2vw,29px);font-weight:600}.detail small{font-size:17px;line-height:1.45}.closing{max-width:850px}.countdown-block{margin-top:52px;padding-top:35px;border-top:1px solid var(--line)}.countdown-title{font-size:21px;margin:0 0 22px}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:710px;margin:0 auto}.countdown>div{background:#fffdf9;border:1px solid var(--line);padding:15px 8px}.countdown b{display:block;font-family:'Cormorant Garamond',serif;font-size:37px;font-weight:500;line-height:1}.countdown span{display:block;margin-top:5px;font-size:14px;color:var(--muted)}.montage{background:#f1e7da;text-align:center;padding:76px 20px 86px}.section-kicker{font-size:20px;color:var(--gold-deep);margin-bottom:20px}.montage-video{display:block;width:min(92vw,560px);max-height:82svh;object-fit:contain;margin:0 auto;background:#fff;box-shadow:0 24px 60px rgba(76,56,36,.12)}.rsvp-wrap{background:var(--paper);padding:92px 20px 110px}.rsvp-card{width:min(92vw,650px);margin:0 auto;text-align:center}.rsvp-card h2{font-size:clamp(32px,4vw,44px);font-weight:500;margin:0 0 34px}.rsvp-card form{display:grid;gap:22px;text-align:start}.field{display:grid;gap:8px}.field input,.field textarea{width:100%;border:1px solid var(--line);background:#fff;padding:13px 14px;color:var(--ink);outline:none;border-radius:0}.field input:focus,.field textarea:focus{border-color:var(--gold-deep);box-shadow:0 0 0 2px rgba(201,163,79,.1)}fieldset{margin:0;padding:0;border:0}legend{margin-bottom:9px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choices label{cursor:pointer}.choices input{position:absolute;opacity:0}.choices span{display:grid;place-items:center;border:1px solid var(--line);padding:13px;background:#fff}.choices input:checked+span{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}.submit{border:0;background:var(--gold-deep);color:#fff;padding:14px 18px;cursor:pointer}.form-message{min-height:24px;text-align:center;margin:0;color:var(--muted)}.reveal{opacity:0;transform:translateY(16px);transition:opacity .85s ease,transform .85s ease}.reveal.visible{opacity:1;transform:none}html[dir="ltr"] body{font-family:Georgia,'Times New Roman',serif}html[dir="ltr"] .invite-title,html[dir="ltr"] .names h1{font-family:'Cormorant Garamond',serif}@media(max-width:760px){.language-switch{top:max(10px,env(safe-area-inset-top));left:10px}.opening{gap:14px}.envelope-button{width:100vw}.envelope-art{border-radius:0}.open-label{font-size:18px}.hero-media{height:74svh}.hero-note{font-size:10px}.brand{padding:42px 20px 18px}.brand-logo{width:170px}.invite-wrap{padding:6px 12px 62px}.invite-card{padding:18px 2px}.name-row{grid-template-columns:1fr 1.18fr 1fr;gap:8px;margin-bottom:34px}.side-photo{aspect-ratio:3/4}.names h1{font-size:27px}.copy{font-size:18px;line-height:1.78}.details-grid{grid-template-columns:1fr;margin:38px 0 34px;border-bottom:0;gap:0}.detail{min-height:auto;padding:21px 8px;border-bottom:1px solid var(--line)}.detail+.detail{border-inline-start:0}.detail.arrival{grid-column:auto;border-top:0}.countdown{gap:5px}.countdown>div{padding:12px 3px}.countdown b{font-size:29px}.countdown span{font-size:12px}.montage{padding:56px 12px 65px}.rsvp-wrap{padding:70px 16px 88px}.rsvp-card h2{font-size:32px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}

/* v7 refinements */
.brand{padding:42px 20px 18px}
.brand-logo{width:min(52vw,320px);display:block;margin:0 auto}
.details-grid{grid-template-columns:repeat(3,1fr)}
.time-detail strong{font-size:clamp(19px,2vw,27px)}
.arrival-line{margin-top:9px;padding-top:10px;border-top:1px solid rgba(178,138,57,.22);width:100%}

/* Full-bleed, automatic looping photo film. No title, no controls, no card. */
.montage{position:relative;width:100%;height:100svh;min-height:620px;padding:0;background:#111;overflow:hidden}
.montage-video{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;margin:0;background:transparent;box-shadow:none}

.field select{width:100%;border:1px solid var(--line);background:#fff;padding:13px 14px;color:var(--ink);outline:none;border-radius:0;appearance:auto}
.field select:focus{border-color:var(--gold-deep);box-shadow:0 0 0 2px rgba(201,163,79,.1)}
.guest-count-field{transition:opacity .25s ease}
.guest-count-field.disabled{opacity:.42}

@media(max-width:760px){
  .brand-logo{width:210px}
  .details-grid{grid-template-columns:1fr}
  .montage{height:100svh;min-height:0}
}

/* v8 invitation refinements */
.brand-logo.inline-logo{width:min(31vw,225px);margin:0 auto 18px;display:block}
.names{display:flex;flex-direction:column;align-items:center;justify-content:center}
.names h1{font-weight:400}
.details-grid{align-items:stretch}
.detail strong{font-weight:400}
.detail:nth-child(2) strong{font-weight:500}
.detail-label{font-weight:400}
@media(max-width:760px){
 .brand-logo.inline-logo{width:112px;margin-bottom:10px}
 .name-row{align-items:center;margin-top:2px}
 .names h1{font-size:25px}
}

/* v9 image-quality and framing refinements */
/* Keep the original uploaded photos untouched and show more of each image. */
.side-photo{
  aspect-ratio:4/5;
  background:#f8f2e9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.side-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  image-rendering:auto;
}

/* Start media: avoid aggressive crop. The same rule can be used for the real video later. */
.hero{
  background:#f3eadf;
}
.hero-media{
  height:auto;
  min-height:0;
  max-height:none;
  background:#f3eadf;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-poster{
  display:block;
  width:100%;
  height:auto;
  max-height:92svh;
  object-fit:contain;
  object-position:center;
  animation:none;
  image-rendering:auto;
}

/* The looping photo film should not enlarge beyond what is needed on narrow screens. */
.montage-video{
  object-fit:contain;
  background:#f3eadf;
}
.montage{background:#f3eadf}

@media(max-width:760px){
  .hero-poster{max-height:88svh}
  .side-photo{aspect-ratio:4/5}
}

/* v10: automatic full-width photo ribbon directly under the opening video. */
.photo-marquee{width:100%;overflow:hidden;background:var(--paper);padding:0;border:0}
.photo-track{display:flex;width:max-content;will-change:transform;animation:photoMarquee 38s linear infinite}
.photo-set{display:flex;flex:none;gap:0}
.photo-set img{display:block;flex:none;width:clamp(260px,27vw,500px);height:clamp(310px,35vw,610px);object-fit:cover;object-position:center}
@keyframes photoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] .photo-track{animation-direction:reverse}
@media(max-width:760px){.photo-track{animation-duration:30s}.photo-set img{width:72vw;height:58vw;min-height:250px;max-height:390px}}
@media(prefers-reduced-motion:reduce){.photo-track{animation:none;overflow-x:auto}}

/* v11: cinematic top + scroll cue + invitation-first logo and moving gallery */
.hero-triptych{display:grid;grid-template-columns:minmax(180px,24vw) minmax(0,1fr) minmax(180px,24vw);height:92svh;min-height:620px;background:#eee4d8;overflow:hidden}
.hero-triptych figure{margin:0}.hero-side,.hero-center{height:100%;overflow:hidden;background:#eadfd2}.hero-side img,.hero-center img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.hero-center .hero-poster{max-height:none;animation:none}.hero-side-left img{object-position:center}.hero-side-right img{object-position:center 45%}
.scroll-cue{height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--gold-deep);background:var(--paper);font-family:'Cormorant Garamond',serif;letter-spacing:.13em;text-transform:none;font-size:17px}.scroll-cue b{font-size:34px;font-weight:400;line-height:.8;animation:cueBounce 1.8s ease-in-out infinite}@keyframes cueBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.invite-wrap{padding-top:0}.invite-card{width:100%;max-width:none;padding-left:0;padding-right:0}.invitation-heading{padding:28px 20px 36px}.invitation-logo{width:min(44vw,250px);display:block;margin:0 auto 12px}.invitation-heading .invite-title{margin:0;color:var(--gold-deep);font-size:clamp(31px,4.2vw,51px);font-weight:400}.invitation-marquee{margin:0 0 52px;width:100vw;position:relative;left:50%;transform:translateX(-50%)}.invitation-marquee .photo-set img{width:clamp(220px,22vw,390px);height:clamp(260px,27vw,470px)}.invite-card>.copy,.invite-card>.details-grid,.invite-card>.countdown-block{width:min(calc(100% - 36px),1120px);margin-left:auto;margin-right:auto}.invite-card>.details-grid{margin-top:52px;margin-bottom:46px}
@media(max-width:760px){.hero-triptych{grid-template-columns:26vw 48vw 26vw;height:76svh;min-height:500px}.hero-side img,.hero-center img{object-fit:cover}.scroll-cue{height:92px;font-size:14px}.invitation-heading{padding:18px 16px 26px}.invitation-logo{width:145px}.invitation-heading .invite-title{font-size:31px}.invitation-marquee{margin-bottom:38px}.invitation-marquee .photo-set img{width:58vw;height:68vw}.invite-card>.copy,.invite-card>.details-grid,.invite-card>.countdown-block{width:calc(100% - 24px)}}

/* v12: remove scroll prompt and place invitation intro before moving photos */
.invite-wrap{padding-top:0}
.invitation-heading{padding-top:42px}
.intro-copy{margin-top:0!important;margin-bottom:34px!important;text-align:center}
.intro-copy p{margin:0 0 8px}
.intro-copy .emphasis{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3.2vw,42px);font-weight:500;color:var(--ink);line-height:1.1}
.invitation-marquee{margin-top:0}
@media(max-width:760px){.invitation-heading{padding-top:28px}.intro-copy{margin-bottom:26px!important}.intro-copy .emphasis{font-size:30px}}


/* v13: centered practical information + RSVP before final countdown */
.details-grid{
  width:min(calc(100% - 72px),1180px)!important;
  margin:54px auto 42px!important;
  text-align:center;
}
.detail{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:34px 28px 38px;
}
.detail-label{width:100%;text-align:center}
.detail strong,.detail small{display:block;width:100%;text-align:center}
.time-detail .arrival-line{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.pre-rsvp-copy{margin-bottom:34px!important}
.finale-wrap{
  width:min(calc(100% - 36px),1120px);
  margin:0 auto 0;
  padding:56px 0 74px;
  text-align:center;
}
.finale-countdown{margin:0 auto!important;width:100%!important}
.final-message{
  margin:34px auto 0;
  padding-top:28px;
  max-width:760px;
  border-top:1px solid var(--line);
  font-family:'Cormorant Garamond','Noto Naskh Arabic',serif;
  font-size:clamp(25px,3vw,36px);
  font-weight:400;
  line-height:1.35;
  color:var(--ink);
}
@media(max-width:760px){
  .details-grid{width:calc(100% - 24px)!important;margin:38px auto 34px!important}
  .detail{padding:27px 18px 30px}
  .time-detail .arrival-line{margin-top:14px;padding-top:14px}
  .finale-wrap{width:calc(100% - 24px);padding:42px 0 58px}
  .final-message{margin-top:26px;padding-top:22px;font-size:27px}
}

/* v14: floral framing + cleaner centered practical details */
.floral-bridge{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:min(92vw,980px);
  margin:0 auto;
  color:var(--gold-deep);
  pointer-events:none;
}
.floral-bridge-hero{
  margin-top:-28px;
  margin-bottom:-8px;
  padding:0 18px;
}
.floral-bridge-gallery{
  margin-top:4px;
  margin-bottom:18px;
}
.floral-bridge-gallery-bottom{
  margin-top:18px;
  margin-bottom:0;
}
.flower-line{
  height:1px;
  flex:1 1 220px;
  max-width:330px;
  background:linear-gradient(90deg,transparent,var(--line),var(--gold),var(--line),transparent);
}
.flower-bloom{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:50%;
  font-family:Georgia,serif;
  font-size:34px;
  line-height:1;
  color:#fffaf3;
  text-shadow:
    -1px -1px 0 var(--gold-deep),
     1px -1px 0 var(--gold-deep),
    -1px  1px 0 var(--gold-deep),
     1px  1px 0 var(--gold-deep),
     0 4px 10px rgba(155,119,47,.13);
  background:radial-gradient(circle,#fffdf8 0 42%,rgba(255,250,243,.94) 43% 65%,transparent 66%);
}
.flower-bloom.small{
  width:34px;
  height:34px;
  flex-basis:34px;
  font-size:25px;
  opacity:.92;
}

/* Keep the moving gallery framed by flowers but otherwise completely clean. */
.invitation-marquee{margin-bottom:0!important}

/* More balanced, truly centered practical information. */
.details-grid{
  max-width:1240px!important;
  grid-template-columns:1fr 1fr 1fr;
  gap:0!important;
}
.detail{
  min-height:220px;
  justify-content:center!important;
  gap:10px!important;
}
.detail-label{
  font-family:'Cormorant Garamond','Noto Naskh Arabic',serif;
  font-size:clamp(18px,1.8vw,24px)!important;
  letter-spacing:.04em;
}
.detail strong{
  font-family:'Cormorant Garamond','Noto Naskh Arabic',serif;
  font-size:clamp(24px,2.45vw,34px)!important;
  line-height:1.25;
}
.detail small{
  font-size:clamp(16px,1.45vw,20px)!important;
}
.time-detail .arrival-line{
  border-top:0!important;
  margin-top:2px!important;
  padding-top:0!important;
}
html[dir="ltr"] .time-detail strong{
  white-space:nowrap;
}

@media(max-width:760px){
  .floral-bridge{width:94vw;gap:6px}
  .floral-bridge-hero{margin-top:-18px;margin-bottom:0}
  .floral-bridge-gallery{margin-top:0;margin-bottom:12px}
  .floral-bridge-gallery-bottom{margin-top:12px;margin-bottom:0}
  .flower-bloom{width:38px;height:38px;flex-basis:38px;font-size:28px}
  .flower-bloom.small{width:28px;height:28px;flex-basis:28px;font-size:21px}
  .details-grid{grid-template-columns:1fr!important}
  .detail{min-height:auto!important;padding:25px 14px!important}
  html[dir="ltr"] .time-detail strong{white-space:normal}
}

/* v15: working autoplay hero video, reduced cropping, cleaner practical details */
.hero-triptych{
  height:min(86svh,900px);
  min-height:600px;
  background:#f2e9de;
}
.hero-center{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f2e9de;
}
.hero-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#f2e9de;
}
/* Keep the complete couple visible, including their shoes. */
.hero-side-left{
  background:#f2e9de;
}
.hero-side-left img{
  object-fit:contain;
  object-position:center bottom;
  background:#f2e9de;
}
.hero-side-right img{
  object-fit:cover;
  object-position:center 52%;
}
/* Remove the former line/dot/flower glyph dividers entirely. */
.floral-bridge{display:none!important}
.details-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  align-items:stretch;
}
.detail{
  justify-content:center;
  text-align:center;
  padding:32px 18px;
}
.detail strong{font-weight:500}
.detail-label{letter-spacing:.06em}
.time-detail .single-line{white-space:nowrap;font-size:clamp(18px,1.65vw,25px)}
.time-detail .arrival-line{margin-top:8px}
@media(max-width:900px){
  .time-detail .single-line{white-space:normal}
}
@media(max-width:760px){
  .hero-triptych{height:72svh;min-height:520px;grid-template-columns:25vw 50vw 25vw}
  .hero-video{object-fit:contain}
  .hero-side-left img{object-fit:contain;object-position:center bottom}
  .hero-side-right img{object-fit:cover;object-position:center}
}

/* v16: floral framing, cleaner countdown, no circular opening glow, less-cropped autoplay video */
.envelope-glow{display:none!important}
.opening.is-opening .envelope-glow{box-shadow:none!important}

.hero-triptych{height:min(88svh,940px);min-height:640px}
.hero-center{background:#f2e9de}
.hero-video{
  width:100%;
  height:100%;
  object-fit:contain!important;
  object-position:center center!important;
  background:#f2e9de;
}
.hero-side-left img{
  object-fit:contain!important;
  object-position:center bottom!important;
}

.hero-floral-frame,
.gallery-floral{
  position:relative;
  width:100%;
  height:120px;
  overflow:visible;
  pointer-events:none;
  z-index:4;
  background:var(--paper);
}
.hero-floral-frame{margin-top:-88px;height:138px}
.gallery-floral{height:90px}
.gallery-floral-top{margin-top:4px;margin-bottom:-52px}
.gallery-floral-bottom{margin-top:-54px;margin-bottom:10px;transform:scaleY(-1)}
.floral-corner{
  position:absolute;
  bottom:0;
  width:min(34vw,420px);
  height:auto;
  display:block;
  mix-blend-mode:multiply;
}
.floral-left{left:0}
.floral-right{right:0}

/* Practical information: Dato | Tid | Lokale */
.details-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.detail{min-height:210px!important;padding:32px 22px!important;justify-content:center!important;text-align:center!important}
.detail-label{font-weight:400!important}
.detail strong{font-weight:400!important}
.time-detail .single-line{white-space:nowrap!important;font-size:clamp(17px,1.55vw,23px)!important}
.time-detail .arrival-line{margin-top:8px!important;padding-top:0!important;border-top:0!important}

/* Countdown should be clean, with no line above or around the heading. */
.countdown-block,
.finale-countdown{border-top:0!important;padding-top:0!important}
.countdown-title{margin-top:0!important}
.final-message{border-top:0!important;padding-top:0!important}

@media(max-width:760px){
  .hero-triptych{height:74svh;min-height:520px;grid-template-columns:27vw 46vw 27vw}
  .hero-video{object-fit:contain!important}
  .hero-side-left img{object-fit:contain!important;object-position:center bottom!important}
  .hero-floral-frame{height:96px;margin-top:-54px}
  .gallery-floral{height:64px}
  .gallery-floral-top{margin-bottom:-36px}
  .gallery-floral-bottom{margin-top:-38px}
  .floral-corner{width:46vw}
  .details-grid{grid-template-columns:1fr!important}
  .detail{min-height:auto!important}
  .time-detail .single-line{white-space:normal!important}
}


/* v17: clean top — only image | autoplay video | image, no navigation/title overlay */
.hero-triptych{position:relative;margin:0;padding:0;}
.hero-triptych::before,.hero-triptych::after{content:none!important;display:none!important;}
.hero-center{position:relative;}
.hero-center::before,.hero-center::after{content:none!important;display:none!important;}
.hero-video{display:block;width:100%;height:100%;object-fit:contain!important;object-position:center bottom!important;}
/* Keep side images clean and full-height with no text overlays. */
.hero-side{position:relative;}
.hero-side::before,.hero-side::after{content:none!important;display:none!important;}
/* The language toggle remains floating, but there is no website header/navigation bar. */


/* v18: seamless hero, less cropping, clean countdown */
.hero-triptych{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) min(56.25svh,46vw) minmax(0,1fr)!important;
  width:100vw!important;
  height:min(88svh,940px)!important;
  min-height:640px!important;
  gap:0!important;
  column-gap:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#000!important;
}
.hero-triptych figure,.hero-side,.hero-center{
  margin:0!important;
  padding:0!important;
  border:0!important;
  height:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.hero-side,.hero-center{background:#000!important}
.hero-side img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  margin:0!important;
}
.hero-side-left img{object-position:center bottom!important}
.hero-side-right img{object-position:center center!important}
.hero-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
  background:#000!important;
}
/* Never show spacing between the three hero panels. */
.hero-triptych>*{transform:translateZ(0)}

/* Countdown title stays clean: no rules, diamonds or separators. */
.finale-countdown,.countdown-block{border-top:0!important}
.countdown-title::before,.countdown-title::after,.finale-countdown::before,.finale-countdown::after{content:none!important;display:none!important}

@media(max-width:900px){
  .hero-triptych{
    grid-template-columns:minmax(0,1fr) min(56.25svh,48vw) minmax(0,1fr)!important;
    height:78svh!important;
    min-height:560px!important;
  }
}
@media(max-width:760px){
  .hero-triptych{
    grid-template-columns:minmax(0,1fr) min(56.25svh,50vw) minmax(0,1fr)!important;
    height:72svh!important;
    min-height:520px!important;
  }
  .hero-side-left img{object-position:center bottom!important}
  .hero-side-right img{object-position:center center!important}
}

/* v19: hero matches the approved reference — three flush panels, no cream/black gaps */
.hero-triptych{
  display:grid!important;
  grid-template-columns:24% 52% 24%!important;
  width:100%!important;
  height:min(88svh,920px)!important;
  min-height:640px!important;
  gap:0!important;
  column-gap:0!important;
  row-gap:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
}
.hero-triptych > *,
.hero-triptych figure,
.hero-side,
.hero-center{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  background:transparent!important;
}
.hero-side img,
.hero-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
/* Left portrait/building image: panel ratio closely matches the original, keeping the couple and shoes visible. */
.hero-side-left img{
  object-fit:cover!important;
  object-position:center bottom!important;
}
/* Center video fills its panel completely so no empty bands appear. */
.hero-video{
  object-fit:cover!important;
  object-position:center center!important;
  background:transparent!important;
}
/* Ring image fills the right panel cleanly. */
.hero-side-right img{
  object-fit:cover!important;
  object-position:center center!important;
}

@media (max-width:900px){
  .hero-triptych{
    grid-template-columns:26% 48% 26%!important;
    height:78svh!important;
    min-height:560px!important;
  }
}
@media (max-width:760px){
  .hero-triptych{
    grid-template-columns:27% 46% 27%!important;
    height:72svh!important;
    min-height:520px!important;
  }
  .hero-side-left img{object-position:center bottom!important}
  .hero-video{object-position:center center!important}
  .hero-side-right img{object-position:center center!important}
}


/* v22 requested refinements */
.gold-names{color:var(--gold-deep)!important;font-weight:500!important;letter-spacing:.01em}
html[dir="rtl"] .photo-track{animation-direction:normal!important}
.pre-rsvp-copy p:last-child{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.2vw,28px);color:var(--gold-deep);margin-top:10px}
.envelope-art{object-fit:contain;max-height:74vh;width:auto;max-width:94vw;margin:0 auto}
@media(max-width:760px){.envelope-art{max-height:68vh;max-width:96vw}}


/* v23: refined invitation title with simple interlocked wedding bands */
.intro-copy{padding-top:4px}
.wedding-rings{
  position:relative;
  width:78px;
  height:48px;
  margin:16px auto 10px;
}
.wedding-rings span{
  position:absolute;
  top:7px;
  width:42px;
  height:31px;
  border:4px solid #b88933;
  border-radius:50%;
  box-shadow:
    inset 0 0 0 1px rgba(255,236,177,.72),
    0 2px 4px rgba(99,67,22,.14);
}
.wedding-rings span:first-child{
  left:8px;
  transform:rotate(-12deg);
}
.wedding-rings span:last-child{
  right:8px;
  transform:rotate(12deg);
}
.engagement-script{
  margin:2px 0 0!important;
  color:var(--gold-deep)!important;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif!important;
  font-size:clamp(34px,4.3vw,58px)!important;
  font-style:italic;
  font-weight:400!important;
  line-height:1.08!important;
  letter-spacing:.005em;
}
.ar-engagement{
  font-family:'Noto Naskh Arabic',serif!important;
  font-style:normal!important;
  font-size:clamp(31px,3.8vw,50px)!important;
}
.pre-rsvp-copy p:last-child{
  margin-top:12px;
  color:var(--gold-deep);
  letter-spacing:.035em;
}
@media(max-width:760px){
  .wedding-rings{width:66px;height:42px;margin:13px auto 8px}
  .wedding-rings span{width:36px;height:27px;border-width:3px}
  .engagement-script{font-size:34px!important;padding:0 12px}
  .ar-engagement{font-size:31px!important}
}

/* v24 — restore approved envelope, keep original stamp, add plain wedding bands */
.envelope-button{
  width:min(94vw,1160px)!important;
  max-height:88svh;
}
.envelope-frame{
  position:relative;
  width:100%;
  aspect-ratio:1.60/1;
  overflow:hidden;
  border-radius:14px;
  background:#f6efe5;
}
.envelope-frame .envelope-art{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center top!important;
  border-radius:14px!important;
  margin:0!important;
}
/* Two plain gold wedding bands, lower beneath the unchanged stamp. */
.envelope-rings{
  position:absolute;
  left:50%;
  top:69%;
  width:122px;
  height:72px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  filter:drop-shadow(0 6px 7px rgba(90,57,12,.18));
}
.envelope-rings span,
.wedding-rings span{
  background:linear-gradient(145deg,#7f5419 0%,#e8bf67 23%,#fff0ad 43%,#b27c28 62%,#f0cf7a 79%,#7b5017 100%);
  border:none!important;
  box-shadow:
    inset 0 0 0 3px rgba(255,241,181,.62),
    inset 0 0 0 7px rgba(112,73,19,.38),
    0 3px 7px rgba(84,54,15,.18)!important;
}
.envelope-rings span{
  position:absolute;
  top:15px;
  width:68px;
  height:43px;
  border-radius:50%;
}
.envelope-rings span::after,
.wedding-rings span::after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:#f6efe5;
  box-shadow:inset 0 1px 2px rgba(92,60,17,.23);
}
.envelope-rings span:first-child{left:8px;transform:rotate(-10deg)}
.envelope-rings span:last-child{right:8px;transform:rotate(10deg)}

/* Invitation hero: FA logo → rings → names → forlovelsesfest */
.invitation-heading{
  padding:50px 20px 8px!important;
}
.invitation-logo{
  margin-bottom:2px!important;
}
.invitation-rings{
  margin:4px auto 8px!important;
}
.intro-copy{
  padding-top:0!important;
  margin-bottom:34px!important;
}
.intro-line{
  margin-bottom:9px!important;
  font-size:clamp(18px,1.7vw,24px);
}
.engagement-script{
  margin:0!important;
  color:var(--gold-deep)!important;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif!important;
  font-size:clamp(43px,5.2vw,72px)!important;
  font-style:italic!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:.005em!important;
}
.engagement-subtitle{
  margin:7px 0 0!important;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  color:var(--ink);
  font-size:clamp(24px,2.6vw,35px);
  line-height:1.15;
  font-weight:400;
  letter-spacing:.035em;
}
.ar-engagement{
  font-family:'Noto Naskh Arabic',serif!important;
  font-style:normal!important;
  font-size:clamp(38px,4.5vw,61px)!important;
  line-height:1.15!important;
}
html[dir="rtl"] .engagement-subtitle{
  font-family:'Noto Naskh Arabic',serif;
  letter-spacing:0;
  font-size:clamp(25px,2.7vw,36px);
}

/* simple clean rings on the invitation; no initials, no stones */
.wedding-rings{
  width:86px!important;
  height:52px!important;
  margin:8px auto 10px!important;
}
.wedding-rings span{
  top:8px!important;
  width:48px!important;
  height:32px!important;
}
.wedding-rings span::after{
  inset:8px!important;
  background:var(--paper)!important;
}
.wedding-rings span:first-child{left:7px!important;transform:rotate(-10deg)!important}
.wedding-rings span:last-child{right:7px!important;transform:rotate(10deg)!important}

@media(max-width:760px){
  .envelope-button{width:100vw!important;max-height:none}
  .envelope-frame{border-radius:0;aspect-ratio:1.48/1}
  .envelope-frame .envelope-art{border-radius:0!important}
  .envelope-rings{top:70%;width:86px;height:54px}
  .envelope-rings span{width:49px;height:32px;top:11px}
  .envelope-rings span::after{inset:7px}
  .invitation-heading{padding-top:34px!important}
  .engagement-script{font-size:43px!important}
  .ar-engagement{font-size:38px!important}
  .engagement-subtitle{font-size:26px!important}
}

/* v25: elegant handwritten names */
html[dir="ltr"] .engagement-script{
  font-family:"Snell Roundhand","Apple Chancery","Brush Script MT","Segoe Script",cursive!important;
  font-size:clamp(48px,5.7vw,80px)!important;
  font-style:italic!important;
  font-weight:400!important;
  letter-spacing:0!important;
  line-height:1.05!important;
}
html[dir="ltr"] .engagement-subtitle{
  margin-top:10px!important;
  text-transform:none!important;
  letter-spacing:.06em!important;
}

/* v26 — use the exact uploaded photorealistic transparent wedding-ring PNG */
.envelope-rings{display:none!important;}
.envelope-rings-image{
  position:absolute; left:50%; top:74%; transform:translate(-50%,-50%);
  width:clamp(118px,15vw,185px); height:auto; object-fit:contain;
  pointer-events:none; z-index:3; filter:drop-shadow(0 5px 6px rgba(91,58,14,.16));
}
.wedding-rings{display:none!important;}
.wedding-rings-image{
  display:block; width:clamp(92px,10vw,142px); height:auto; object-fit:contain;
  margin:8px auto 10px!important; filter:drop-shadow(0 4px 5px rgba(91,58,14,.12));
}
@media(max-width:760px){
  .envelope-rings-image{top:75%;width:112px;}
  .wedding-rings-image{width:92px;margin:6px auto 9px!important;}
}

/* v28 requested text refinements */
html[dir="ltr"] .engagement-script{color:var(--gold)!important;}


/* v29 — Danish final refinements + rings moved to upper-right of envelope */
.envelope-rings-image{
  left:auto!important;
  right:5.8%!important;
  top:16.5%!important;
  transform:none!important;
  width:clamp(115px,13vw,180px)!important;
  z-index:4!important;
}
html[dir="ltr"] .da-invitation-intro{
  max-width:780px;
  margin:12px auto 22px!important;
  font-family:"Cormorant Garamond",serif!important;
  font-size:clamp(20px,2.1vw,31px)!important;
  line-height:1.35!important;
  letter-spacing:.01em!important;
  color:var(--ink)!important;
}
html[dir="ltr"] .engagement-subtitle{
  font-family:"Cormorant Garamond",serif!important;
  font-size:clamp(24px,2.7vw,38px)!important;
  font-weight:500!important;
  text-transform:none!important;
  letter-spacing:.18em!important;
  color:var(--gold)!important;
  margin-top:8px!important;
}
@media(max-width:760px){
  .envelope-rings-image{
    right:5%!important;
    top:14%!important;
    width:98px!important;
  }
  html[dir="ltr"] .da-invitation-intro{
    font-size:19px!important;
    padding:0 18px!important;
    margin-bottom:18px!important;
  }
  html[dir="ltr"] .engagement-subtitle{
    font-size:25px!important;
    letter-spacing:.14em!important;
  }
}


/* v30 — rings centered low on envelope + final Danish intro/date typography */
.envelope-rings-image{
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:5.5%!important;
  transform:translateX(-50%)!important;
  width:clamp(110px,12vw,170px)!important;
  z-index:4!important;
}
html[dir="ltr"] .da-invitation-intro{
  margin:12px auto 0!important;
}
html[dir="ltr"] .da-invitation-continuation{
  max-width:780px;
  margin:2px auto 22px!important;
  font-family:"Cormorant Garamond",serif!important;
  font-size:clamp(20px,2.1vw,31px)!important;
  line-height:1.35!important;
  letter-spacing:.01em!important;
  color:var(--ink)!important;
}
@media(max-width:760px){
  .envelope-rings-image{bottom:5%!important;width:96px!important;}
  html[dir="ltr"] .da-invitation-continuation{font-size:19px!important;padding:0 18px!important;}
}


/* v31 — keep Arabic physical layout and moving gallery identical to Danish */
.photo-marquee,
.photo-track,
.photo-set{
  direction:ltr!important;
}
html[dir="rtl"] .photo-track{
  animation-direction:normal!important;
}

/* Keep the practical-info columns in the same physical order as Danish:
   Dato left, Tid centre, Lokale right. Arabic text itself remains RTL. */
html[dir="rtl"] .details-grid{
  direction:ltr!important;
}
html[dir="rtl"] .details-grid .detail{
  direction:rtl!important;
}

html[dir="rtl"] .ar-invitation-intro{
  color:var(--ink)!important;
  font-family:'Noto Naskh Arabic','Amiri','Times New Roman',serif!important;
  font-size:clamp(22px,2.25vw,32px)!important;
  font-weight:400!important;
  line-height:1.55!important;
  margin-bottom:8px!important;
}
html[dir="rtl"] .ar-engagement{
  color:var(--gold-deep)!important;
  font-family:'Noto Naskh Arabic','Amiri','Times New Roman',serif!important;
  font-size:clamp(42px,6vw,76px)!important;
  font-weight:500!important;
  line-height:1.25!important;
}


/* v32 — Arabic invitation copy + true edge-to-edge marquee in both languages */
.invitation-marquee{
  width:100vw!important;
  max-width:none!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  overflow:hidden!important;
}
.photo-marquee,.photo-track,.photo-set{direction:ltr!important;}
html[dir="rtl"] .photo-track{animation-direction:normal!important;}
html[dir="rtl"] .ar-invitation-continuation{
  max-width:780px;
  margin:2px auto 22px!important;
  padding:0 18px;
  font-family:'Noto Naskh Arabic','Amiri','Times New Roman',serif!important;
  font-size:clamp(21px,2.15vw,31px)!important;
  line-height:1.55!important;
  font-weight:400!important;
  color:var(--ink)!important;
  text-align:center!important;
}
@media(max-width:760px){
  html[dir="rtl"] .ar-invitation-continuation{font-size:19px!important;}
}

/* v33 — Arabic practical-information block matches Danish exactly */
html[dir="rtl"] .details-grid{
  direction:ltr!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  width:min(calc(100% - 36px),1120px)!important;
  margin:52px auto 46px!important;
  padding:0!important;
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
}
html[dir="rtl"] .details-grid .detail{
  direction:rtl!important;
  min-height:210px!important;
  padding:32px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  text-align:center!important;
  border:0!important;
}
html[dir="rtl"] .details-grid .detail + .detail{
  border-left:1px solid var(--line)!important;
}
html[dir="rtl"] .details-grid .detail-label,
html[dir="rtl"] .details-grid strong,
html[dir="rtl"] .details-grid small{
  width:100%!important;
  text-align:center!important;
}
html[dir="rtl"] .details-grid .time-detail .arrival-line{
  margin-top:14px!important;
  padding-top:0!important;
  border-top:0!important;
}
@media(max-width:760px){
  html[dir="rtl"] .details-grid{
    grid-template-columns:1fr!important;
    width:calc(100% - 24px)!important;
    margin:38px auto 34px!important;
    border-bottom:0!important;
  }
  html[dir="rtl"] .details-grid .detail{
    min-height:auto!important;
    padding:25px 14px!important;
    border-bottom:1px solid var(--line)!important;
  }
  html[dir="rtl"] .details-grid .detail + .detail{
    border-left:0!important;
  }
}


/* v34: uploaded video plays automatically behind the invitation; full portrait frame remains visible */
.site{position:relative;isolation:isolate}
.invitation-video-background{position:fixed;inset:0;z-index:-2;display:grid;place-items:center;background:#efe6da;overflow:hidden;opacity:0;transition:opacity .8s ease;pointer-events:none}
.site.visible .invitation-video-background{opacity:1}
.invitation-video-background video{width:100%;height:100%;object-fit:contain;object-position:center center;display:block}
.invitation-video-wash{position:absolute;inset:0;background:rgba(255,250,243,.46)}
.invite-wrap{position:relative;z-index:1;background:rgba(255,250,243,.64)!important;backdrop-filter:blur(1.2px)}
.invite-card{background:rgba(255,250,243,.38);border-radius:2px}
@media(max-width:760px){.invitation-video-background video{object-fit:contain}.invitation-video-wash{background:rgba(255,250,243,.40)}.invite-wrap{background:rgba(255,250,243,.58)!important}}

/* v35 */
.invitation-video-background{display:none!important}
.site,.invite-wrap,.invite-card{background:#fffaf3!important}
.hero-center{background:#efe6da!important}
.hero-video{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;background:#efe6da!important}

/* v36 final: exact portrait video ratio; all three panels touch */
.hero-triptych{grid-template-columns:1fr auto 1fr!important;gap:0!important;column-gap:0!important;height:min(88svh,900px)!important;min-height:560px!important;width:100%!important}
.hero-center{height:100%!important;aspect-ratio:9/16!important;width:auto!important;line-height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
.hero-video{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
.hero-side{height:100%!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important}
.hero-side img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;margin:0!important;padding:0!important;border:0!important}
@media(max-width:760px){.hero-triptych{grid-template-columns:1fr auto 1fr!important;height:72svh!important;min-height:480px!important}.hero-center{aspect-ratio:9/16!important}}

/* v37: Keep top triptych in the exact same physical order in Arabic as Danish. */
.hero-triptych{direction:ltr!important;}
.hero-triptych .hero-side,.hero-triptych .hero-center{direction:ltr!important;}


/* v44 — seamless top triptych + single animated scroll arrow */
.hero-triptych{
  gap:0!important;
  column-gap:0!important;
  row-gap:0!important;
  font-size:0!important;
  position:relative!important;
  overflow:hidden!important;
}
.hero-triptych > .hero-side,
.hero-triptych > .hero-center{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  vertical-align:top!important;
}
/* one-pixel overlap prevents browser sub-pixel seams between video and side images */
.hero-center{
  margin-left:-1px!important;
  margin-right:-1px!important;
  z-index:1!important;
}
.hero-side-right{
  margin-left:-1px!important;
}
.hero-side-left{
  margin-right:-1px!important;
}
.scroll-arrow{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:24px;
  width:52px;
  height:52px;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  animation:scrollArrowFloat 1.65s ease-in-out infinite;
}
.scroll-arrow span{
  display:block;
  width:24px;
  height:24px;
  border-right:3px solid rgba(255,250,243,.96);
  border-bottom:3px solid rgba(255,250,243,.96);
  transform:rotate(45deg) translate(-4px,-4px);
  filter:drop-shadow(0 2px 6px rgba(36,27,18,.35));
}
@keyframes scrollArrowFloat{
  0%,100%{transform:translateX(-50%) translateY(-4px)}
  50%{transform:translateX(-50%) translateY(8px)}
}
.scroll-arrow:focus-visible{
  outline:2px solid rgba(255,250,243,.95);
  outline-offset:2px;
  border-radius:999px;
}
@media(max-width:760px){
  .scroll-arrow{bottom:16px;width:46px;height:46px}
  .scroll-arrow span{width:21px;height:21px;border-right-width:3px;border-bottom-width:3px}
}
@media(prefers-reduced-motion:reduce){
  .scroll-arrow{animation:none!important}
}

/* v45 — lower scroll cue directly above FA logo + softer envelope dissolve */
.invitation-heading{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
.invitation-heading .scroll-arrow{
  position:relative!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:48px!important;
  height:48px!important;
  margin:0 auto 20px!important;
  z-index:3!important;
  color:var(--gold-deep)!important;
  animation:scrollArrowFloatInline 1.65s ease-in-out infinite!important;
}
.invitation-heading .scroll-arrow span{
  width:22px!important;
  height:22px!important;
  border-right:2.5px solid var(--gold-deep)!important;
  border-bottom:2.5px solid var(--gold-deep)!important;
  filter:none!important;
}
@keyframes scrollArrowFloatInline{
  0%,100%{transform:translateY(-3px)}
  50%{transform:translateY(8px)}
}

/* Softer cross-dissolve when the envelope is opened. */
.opening{
  transition:opacity 1.15s ease, visibility 1.15s ease, transform 1.25s cubic-bezier(.22,.7,.25,1), filter 1.15s ease!important;
}
.envelope-button{
  transition:opacity 1.05s ease, transform 1.15s cubic-bezier(.22,.7,.25,1), filter 1.05s ease!important;
}
.opening.is-opening .envelope-button{
  opacity:0!important;
  transform:translateY(-5px) scale(.992)!important;
  filter:blur(2.5px) drop-shadow(0 20px 34px rgba(76,56,36,.08))!important;
}
.opening.is-opening .envelope-glow{box-shadow:none!important;}
.opening.leaving{
  opacity:0!important;
  visibility:hidden!important;
  transform:scale(1.012)!important;
  filter:blur(3px)!important;
}
.site{
  transition:opacity 1.25s ease!important;
}
@media(max-width:760px){
  .invitation-heading .scroll-arrow{width:44px!important;height:44px!important;margin-bottom:14px!important}
  .invitation-heading .scroll-arrow span{width:20px!important;height:20px!important}
}
@media(prefers-reduced-motion:reduce){
  .invitation-heading .scroll-arrow{animation:none!important}
}

/* v47 — keep the single scroll cue visible within the first screen on desktop and mobile */
.hero-triptych{position:relative!important;}
.hero-triptych .scroll-arrow{
  position:absolute!important;
  left:50%!important;
  bottom:48px!important;
  transform:translateX(-50%)!important;
  width:50px!important;
  height:50px!important;
  margin:0!important;
  z-index:30!important;
  animation:scrollArrowFloat 1.65s ease-in-out infinite!important;
}
.hero-triptych .scroll-arrow span{
  width:23px!important;
  height:23px!important;
  border-right:3px solid rgba(255,250,243,.98)!important;
  border-bottom:3px solid rgba(255,250,243,.98)!important;
  filter:drop-shadow(0 2px 6px rgba(36,27,18,.38))!important;
}
@media(max-width:760px){
  .hero-triptych .scroll-arrow{bottom:34px!important;width:46px!important;height:46px!important;}
  .hero-triptych .scroll-arrow span{width:21px!important;height:21px!important;}
}

/* v48 — gallery contains only the four retained photos, once per cycle. */
.invitation-marquee .photo-track{
  animation:photoMarqueeSingle 24s linear infinite!important;
}
@keyframes photoMarqueeSingle{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}
html[dir="rtl"] .invitation-marquee .photo-track{animation-direction:normal!important;}
@media(max-width:760px){.invitation-marquee .photo-track{animation-duration:20s!important;}}

/* v49 — calm continuous up/down scroll cue */
.hero-triptych .scroll-arrow{
  animation:scrollArrowFloatV49 1.9s ease-in-out infinite!important;
}
@keyframes scrollArrowFloatV49{
  0%,100%{transform:translateX(-50%) translateY(-6px)}
  50%{transform:translateX(-50%) translateY(6px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-triptych .scroll-arrow{animation:none!important;transform:translateX(-50%)!important;}
}


/* v52 — seamless continuous gallery: the second set is only a loop clone, so no blank gap can appear. */
.invitation-marquee{overflow:hidden!important;}
.invitation-marquee .photo-track{
  display:flex!important;
  width:max-content!important;
  animation:photoMarqueeSeamlessV52 30s linear infinite!important;
}
.invitation-marquee .photo-set{display:flex!important;flex:none!important;gap:0!important;}
@keyframes photoMarqueeSeamlessV52{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
html[dir="rtl"] .invitation-marquee .photo-track{animation-direction:normal!important;}
@media(max-width:760px){.invitation-marquee .photo-track{animation-duration:24s!important;}}


/* v53 — add three new photos and slow the seamless marquee. */
.invitation-marquee .photo-track{animation-duration:52s!important;}
@media(max-width:760px){.invitation-marquee .photo-track{animation-duration:44s!important;}}


/* v54 — gallery timing restored to v43; each unique image appears once per cycle.
   The second photo-set is only an invisible continuity clone for the seamless loop. */
.invitation-marquee .photo-track{
  animation-duration:38s!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
}
@media(max-width:760px){
  .invitation-marquee .photo-track{animation-duration:30s!important;}
}


/* v55 — continuous gallery matching the supplied reference recording.
   No duplicate photo set: JavaScript recycles each original image from left to right. */
.invitation-marquee{overflow:hidden!important;}
.invitation-marquee .photo-track{
  display:flex!important;
  width:max-content!important;
  animation:none!important;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.invitation-marquee .photo-set{
  display:flex!important;
  flex:none!important;
  gap:0!important;
  width:max-content!important;
}
html[dir="rtl"] .invitation-marquee .photo-track{animation:none!important;}

/* v57 — scroll cue lower, matching the requested position near the bottom of the hero. */
.hero-triptych .scroll-arrow{
  bottom:8px!important;
  animation:scrollArrowFloatV57 1.9s ease-in-out infinite!important;
}
@keyframes scrollArrowFloatV57{
  0%,100%{transform:translateX(-50%) translateY(-4px)}
  50%{transform:translateX(-50%) translateY(7px)}
}
@media(max-width:760px){
  .hero-triptych .scroll-arrow{bottom:7px!important;}
}
@media(prefers-reduced-motion:reduce){
  .hero-triptych .scroll-arrow{animation:none!important;transform:translateX(-50%)!important;}
}

/* v58 — uniform cream background around the envelope */
.opening{
  background:#f6efe5!important;
}
.envelope-frame{
  background:#f6efe5!important;
}

/* v59 — smaller opening envelope so the open label is visible in ordinary browser windows. */
.envelope-button{width:min(86vw,900px)!important;}
.envelope-frame{width:100%;}
.envelope-frame .envelope-art{width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;}
@media(max-height:850px) and (min-width:761px){
  .envelope-button{width:min(78vw,820px)!important;}
  .opening{gap:14px!important;}
}
@media(max-width:760px){
  .envelope-button{width:92vw!important;}
  .envelope-frame{border-radius:14px!important;overflow:hidden;}
  .envelope-frame .envelope-art{border-radius:14px!important;}
}

/* v60 — unified opening colour + rings slightly lower on the envelope */
.opening{
  background:#f6efe5!important;
}
.envelope-button,
.envelope-frame{
  background:transparent!important;
  box-shadow:none!important;
}
.envelope-frame{
  border-radius:14px!important;
}
.envelope-rings-image{
  bottom:2.2%!important;
}
@media(max-width:760px){
  .opening{background:#f6efe5!important;}
  .envelope-frame{background:transparent!important;}
  .envelope-rings-image{bottom:2%!important;}
}

/* v61 — remove the embedded outer halo around the envelope artwork.
   Crop a few percent into the source image so the envelope itself meets the page background cleanly. */
.opening{background:#f5ede2!important;}
.envelope-frame{background:#f5ede2!important;overflow:hidden!important;}
.envelope-frame .envelope-art{
  width:104.5%!important;
  height:104.5%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center 47%!important;
  transform:translate(-2.25%,-2.0%);
  border-radius:14px!important;
}
.envelope-rings-image{bottom:1.4%!important;}
@media(max-width:760px){
  .opening,.envelope-frame{background:#f5ede2!important;}
  .envelope-frame .envelope-art{
    width:105%!important;
    height:105%!important;
    transform:translate(-2.5%,-2.1%);
  }
  .envelope-rings-image{bottom:1.2%!important;}
}

/* v62 — clean envelope artwork with no intermediate frame/halo on either language. */
.opening,
.envelope-button,
.envelope-frame{
  background:#f5ede2!important;
}
.envelope-button{box-shadow:none!important;filter:none!important;}
.envelope-frame{
  overflow:hidden!important;
  border-radius:14px!important;
}
.envelope-frame .envelope-art{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  border-radius:14px!important;
}
@media(max-width:760px){
  .opening,.envelope-button,.envelope-frame{background:#f5ede2!important;}
  .envelope-frame .envelope-art{width:100%!important;height:auto!important;transform:none!important;}
}

/* v63 — keep opening envelope in exactly the same physical position in Danish and Arabic. */
.opening,
.envelope-button,
.envelope-frame{
  direction:ltr!important;
}
.open-label{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  line-height:1!important;
  direction:ltr!important;
}
html[dir="rtl"] .open-label{
  direction:rtl!important;
}
/* Reserve identical space below the envelope in both languages so the image cannot shift vertically. */
.opening{
  gap:14px!important;
}

/* v77 — mobile-only refinement: slightly wider side photos, full portrait video, no seams. */
@media (max-width:760px){
  .hero-triptych{
    display:grid!important;
    grid-template-columns:29% 42% 29%!important;
    width:100%!important;
    height:74.667vw!important;
    min-height:0!important;
    max-height:72svh!important;
    gap:0!important;
    column-gap:0!important;
    overflow:hidden!important;
    direction:ltr!important;
  }
  .hero-triptych > .hero-side,
  .hero-triptych > .hero-center{
    width:auto!important;
    min-width:0!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    overflow:hidden!important;
  }
  .hero-side-left{position:relative!important;z-index:3!important;margin-right:-2px!important;}
  .hero-center{position:relative!important;z-index:2!important;margin-left:-1px!important;margin-right:-1px!important;background:transparent!important;}
  .hero-side-right{position:relative!important;z-index:3!important;margin-left:-2px!important;}
  .hero-video{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:transparent!important;
  }
  .hero-side img{
    display:block!important;
    width:calc(100% + 3px)!important;
    height:100%!important;
    object-fit:cover!important;
    border:0!important;
  }
  .hero-side-left img{object-position:center bottom!important;margin-right:-3px!important;}
  .hero-side-right img{object-position:center center!important;margin-left:-3px!important;}
}

/* v78 — seam-only fix. Keep v77 proportions; physically overlap panel paint areas to prevent subpixel hairlines. */
@media (max-width:760px){
  .hero-triptych{
    background:#111!important;
  }
  .hero-triptych > .hero-side-left{
    width:calc(100% + 3px)!important;
    margin-right:-3px!important;
  }
  .hero-triptych > .hero-center{
    width:calc(100% + 6px)!important;
    margin-left:-3px!important;
    margin-right:-3px!important;
  }
  .hero-triptych > .hero-side-right{
    width:calc(100% + 3px)!important;
    margin-left:-3px!important;
  }
  .hero-side img,
  .hero-video{
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }
}

/* v90 — final triptych cleanup.
   Desktop: no hairline seams, no empty strip at the viewport edge while resizing.
   Mobile: preserve the approved v77 proportions (29 / 42 / 29) and portrait video framing.
   This override intentionally wins over the accumulated earlier hero rules. */
.hero-triptych{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  column-gap:0!important;
  overflow:hidden!important;
  direction:ltr!important;
  background:#efe6da!important;
  isolation:isolate!important;
}
.hero-triptych > .hero-side,
.hero-triptych > .hero-center{
  position:relative!important;
  min-width:0!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:#efe6da!important;
}
.hero-triptych > .hero-center{
  aspect-ratio:9/16!important;
  width:auto!important;
  z-index:3!important;
}
.hero-triptych > .hero-side-left{z-index:2!important;}
.hero-triptych > .hero-side-right{z-index:2!important;}
.hero-triptych .hero-video,
.hero-triptych .hero-side img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.hero-triptych .hero-video{
  object-fit:cover!important;
  object-position:center center!important;
  background:#efe6da!important;
  transform:scaleX(1.004)!important;
  transform-origin:center!important;
}
.hero-triptych .hero-side img{
  object-fit:cover!important;
  transform:scaleX(1.004)!important;
  transform-origin:center!important;
}
.hero-triptych .hero-side-left img{object-position:center bottom!important;}
.hero-triptych .hero-side-right img{object-position:center center!important;}

/* Paint the neighbouring panels a fraction underneath each other. This avoids
   sub-pixel hairlines without changing the visible proportions. */
.hero-triptych > .hero-side-left{transform:translateX(.75px)!important;}
.hero-triptych > .hero-side-right{transform:translateX(-.75px)!important;}

@media (min-width:761px){
  .hero-triptych{
    height:min(88svh,900px)!important;
    min-height:560px!important;
  }
  .hero-triptych > .hero-center{
    height:100%!important;
  }
}

@media (max-width:760px){
  .hero-triptych{
    grid-template-columns:29% 42% 29%!important;
    height:74.667vw!important;
    min-height:0!important;
    max-height:72svh!important;
  }
  .hero-triptych > .hero-center{
    width:100%!important;
    aspect-ratio:auto!important;
  }
  .hero-triptych > .hero-side-left,
  .hero-triptych > .hero-center,
  .hero-triptych > .hero-side-right{
    margin:0!important;
  }
  .hero-triptych > .hero-side-left{transform:translateX(1px)!important;}
  .hero-triptych > .hero-side-right{transform:translateX(-1px)!important;}
  .hero-triptych .hero-video,
  .hero-triptych .hero-side img{
    transform:scaleX(1.008)!important;
  }
  .hero-triptych .hero-video{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* v92 — keep v90 exactly, remove only the outer-left edge hairline.
   Do not shift the entire left panel away from the viewport edge. */
.hero-triptych > .hero-side-left{
  transform:none!important;
}
@media (max-width:760px){
  .hero-triptych > .hero-side-left{
    transform:none!important;
  }
}

/* v93 — preserve v92 and remove only the outer-right inset.
   The right panel now reaches the viewport edge just like the left panel. */
.hero-triptych > .hero-side-right{
  transform:none!important;
}
@media (max-width:760px){
  .hero-triptych > .hero-side-right{
    transform:none!important;
  }
}

/* v95 — responsive extension built strictly on approved v93.
   Only phone landscape and tablet portrait/landscape are targeted.
   v93 desktop and phone portrait rules remain untouched.
   Keep v93's image/video overscan to prevent hairline seams. */
@media (orientation: landscape) and (max-width:1180px) and (max-height:820px){
  .hero-triptych{
    grid-template-columns:29% 42% 29%!important;
    height:min(78svh,620px)!important;
    min-height:360px!important;
    max-height:78svh!important;
  }
  .hero-triptych > .hero-center{
    width:100%!important;
    aspect-ratio:auto!important;
  }
  .hero-triptych > .hero-side-left,
  .hero-triptych > .hero-side-right{
    transform:none!important;
  }
  .hero-triptych .hero-video,
  .hero-triptych .hero-side img{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    transform:scaleX(1.008)!important;
    transform-origin:center!important;
  }
}

@media (orientation: portrait) and (min-width:761px) and (max-width:1100px){
  .hero-triptych{
    grid-template-columns:29% 42% 29%!important;
    height:min(72svh,760px)!important;
    min-height:520px!important;
  }
  .hero-triptych > .hero-center{
    width:100%!important;
    aspect-ratio:auto!important;
  }
  .hero-triptych > .hero-side-left,
  .hero-triptych > .hero-side-right{
    transform:none!important;
  }
  .hero-triptych .hero-video,
  .hero-triptych .hero-side img{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    transform:scaleX(1.008)!important;
    transform-origin:center!important;
  }
}

/* v96 — iPad/tablet landscape only.
   Preserve approved desktop, phone portrait/landscape and tablet portrait exactly as v95.
   On coarse-pointer tablets in landscape, explicitly pin the three hero panels to
   three columns and make the center video paint the entire center cell. This removes
   the cream/empty strip seen on iPad landscape without affecting other layouts. */
@media (orientation: landscape) and (min-width:761px) and (max-width:1366px) and (pointer:coarse){
  .hero-triptych{
    display:grid!important;
    grid-template-columns:29% 42% 29%!important;
    grid-template-rows:1fr!important;
    width:100%!important;
    height:min(78svh,720px)!important;
    min-height:420px!important;
    max-height:78svh!important;
    gap:0!important;
    column-gap:0!important;
    overflow:hidden!important;
  }
  .hero-triptych > .hero-side-left{
    grid-column:1!important;
    grid-row:1!important;
  }
  .hero-triptych > .hero-center{
    grid-column:2!important;
    grid-row:1!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    position:relative!important;
    overflow:hidden!important;
  }
  .hero-triptych > .hero-side-right{
    grid-column:3!important;
    grid-row:1!important;
  }
  .hero-triptych > .hero-side-left,
  .hero-triptych > .hero-side-right{
    width:100%!important;
    height:100%!important;
    transform:none!important;
    overflow:hidden!important;
  }
  .hero-triptych .hero-video{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:scaleX(1.008)!important;
    transform-origin:center!important;
  }
  .hero-triptych .hero-side img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    transform:scaleX(1.008)!important;
    transform-origin:center!important;
  }
  .hero-triptych .scroll-arrow{
    position:absolute!important;
  }
}