*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#21040b;font-family:Montserrat,sans-serif;overflow-x:hidden}

/* =========================================================
   PAGE 1 — RESTORED V2 PHOTO COMPOSITION
   Background photo + contained foreground portrait
   ========================================================= */
.hero{height:100svh;min-height:700px;position:relative;overflow:hidden;color:#fff;background-image:linear-gradient(rgba(35,3,12,.35),rgba(35,3,12,.55)),url("assets/background.jpg");background-size:cover;background-position:center}
.photo{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center 44%;transform:scale(.83);z-index:1}
.shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,2,7,.03) 35%,rgba(45,5,17,.45) 66%,rgba(35,3,12,.97) 100%)}
.frame{position:absolute;inset:14px;z-index:2;border:1px solid #d7ad5c;border-radius:180px 180px 5px 5px/110px 110px 5px 5px;box-shadow:inset 0 0 0 6px rgba(201,156,69,.08);pointer-events:none}
.frame i{position:absolute;color:#efd89b;font-size:34px;font-style:normal}.frame i:first-child{top:12px;left:16px;transform:rotate(180deg)}.frame i:last-child{top:12px;right:16px;transform:rotate(-90deg)}
.heroCopy{position:absolute;z-index:3;bottom:5.5vh;left:50%;transform:translateX(-50%);width:min(92%,650px);text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.53)}
.crest{position:relative;margin:auto;display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;width:min(330px,82vw);color:#efd89b}.crest b{width:92px;height:92px;border:1px solid #efd89b;border-radius:50%;display:grid;place-items:center;font:600 66px/1 "Cormorant Garamond",serif;box-shadow:0 0 0 6px rgba(201,156,69,.09)}.crest .bird{font-size:35px}.flip{transform:scaleX(-1)}.crest em{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-style:normal;font-size:22px}
.hero h1{font:600 clamp(42px,8vw,66px)/1 "Cormorant Garamond",serif;margin:29px 0 7px;color:#fff3d8;letter-spacing:.04em}.hero h1 small{color:#efd89b;font-size:.65em}.heroCopy>p{font-size:11px;letter-spacing:.36em;color:#efd89b}
.hero button{margin-top:17px;border:1px solid #c99c45;border-radius:999px;background:rgba(59,7,21,.72);color:#fff1ce;padding:11px 29px 8px;letter-spacing:.18em;font-size:10px;cursor:pointer;transition:background .3s,transform .3s}.hero button:hover{background:rgba(89,14,34,.88);transform:translateY(-2px)}.hero button strong{display:block;font-size:22px;margin-top:6px;animation:arrowBounce 1.8s ease-in-out infinite}@keyframes arrowBounce{50%{transform:translateY(4px)}}

/* =========================================================
   PAGE 2 — COASTAL BACKGROUND, NOT REPEATED LOGO/DAMASK
   ========================================================= */
.stage{min-height:100svh;position:relative;padding:60px 12px 105px;overflow:hidden;background-image:linear-gradient(rgba(35,3,12,.50),rgba(35,3,12,.84)),url("assets/coastal-background.jpg");background-size:cover;background-position:center;background-attachment:fixed;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease,visibility .8s ease}
.stage.show{opacity:1;visibility:visible;pointer-events:auto}.stageShade{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(92,25,43,.12),rgba(33,4,11,.60) 75%);pointer-events:none}

/* Scroll shell */
.scroll{width:min(820px,96vw);margin:auto;position:relative;padding:44px 0 50px;filter:drop-shadow(0 28px 30px rgba(0,0,0,.48));z-index:2}
.paperWindow{height:1010px;margin:0 30px;overflow:hidden;clip-path:inset(0 0 97% 0)}
.stage.show .paperWindow{animation:scrollUnroll 4.2s cubic-bezier(.25,.65,.25,1) forwards}
@keyframes scrollUnroll{0%{clip-path:inset(0 0 97% 0)}12%{clip-path:inset(0 0 92% 0)}30%{clip-path:inset(0 0 76% 0)}50%{clip-path:inset(0 0 54% 0)}72%{clip-path:inset(0 0 29% 0)}90%{clip-path:inset(0 0 8% 0)}100%{clip-path:inset(0)}}
.paper{height:100%;position:relative;overflow:hidden;color:#4f261d;background:radial-gradient(circle at 50% 30%,rgba(255,250,229,.78),transparent 55%),linear-gradient(90deg,#d8b879,#f7e3b7 7%,#faedcf 16%,#f4e0b8 50%,#faedcf 84%,#f7e3b7 93%,#d8b879);box-shadow:inset 0 0 65px rgba(91,54,19,.22)}
.paperBorder{position:absolute;inset:17px;border:1px solid rgba(125,79,27,.55);box-shadow:inset 0 0 0 4px rgba(189,134,47,.20);z-index:2;pointer-events:none}
.floral{position:absolute;top:0;height:100%;width:18%;object-fit:cover;z-index:3;mix-blend-mode:multiply;opacity:.88}.floral.left{left:0;object-position:left center}.floral.right{right:0;object-position:right center}

/* Fixed invitation formatting */
.content{position:relative;z-index:4;height:100%;padding:56px 17% 32px;text-align:center;opacity:0;transform:translateY(-10px)}
.stage.show .content{animation:revealContent 1.15s ease 3.25s forwards}@keyframes revealContent{to{opacity:1;transform:none}}
.journey{margin:0 0 4px;font-size:9px;letter-spacing:.22em;color:#6e3a2b;white-space:nowrap}
.crestArt{display:block;width:min(410px,78%);height:210px;object-fit:cover;object-position:center 38%;margin:-5px auto -2px;mix-blend-mode:multiply}
.names{width:100%;max-width:600px;margin:0 auto}.names h2{margin:0;font:600 clamp(38px,6vw,58px)/1.02 "Cormorant Garamond",serif;color:#65182a;letter-spacing:.045em;white-space:nowrap}.amp{font:500 29px "Cormorant Garamond",serif;color:#9a7133;margin:4px 0}
.orn{color:#9a7133;margin:16px 0 10px}.save{margin:0 0 9px;font:600 27px "Cormorant Garamond",serif;letter-spacing:.24em;color:#65182a}.date{font:600 18px "Cormorant Garamond",serif;letter-spacing:.13em;margin:0 0 5px}.location{font-size:10px;letter-spacing:.24em;margin:0}.venue{margin:7px 0 2px;font:600 18px "Cormorant Garamond",serif;letter-spacing:.08em;color:#5f291f}.address{margin:0;font-size:9.5px;line-height:1.55;letter-spacing:.12em;color:#5f3927}.formal{font:italic 18px "Cormorant Garamond",serif;color:#70502b;margin:14px 0 8px}

/* One integrated lower artwork: elephants and palace stay perfectly aligned */
.royalScene{position:absolute;left:10%;right:10%;bottom:20px;width:80%;height:235px;object-fit:cover;object-position:center bottom;mix-blend-mode:multiply;border-radius:2px}

/* Illustrated rollers */
.roller{position:absolute;left:0;width:100%;height:100px;object-fit:fill;z-index:10;pointer-events:none}.roller.top{top:0}.roller.bottom{top:45px}.stage.show .roller.bottom{animation:bottomRodUnroll 4.2s cubic-bezier(.25,.65,.25,1) forwards}
@keyframes bottomRodUnroll{0%{top:45px}12%{top:125px}30%{top:300px}50%{top:515px}72%{top:745px}90%{top:925px}100%{top:1000px}}

/* Google form area */
.contact{position:relative;z-index:3;text-align:center;margin:20px auto 0;color:#f1d58f;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.contact a{display:inline-block;min-width:min(540px,84vw);padding:17px 28px;border:1px solid #d7ad5c;outline:1px solid rgba(215,173,92,.42);outline-offset:5px;border-radius:14px;background:rgba(65,7,22,.88);color:#f1d58f;text-decoration:none;font-size:10px;letter-spacing:.20em;box-shadow:0 10px 25px rgba(0,0,0,.25)}.contact a span{font-size:20px;margin-left:8px}.contact p{font:italic 18px "Cormorant Garamond",serif;margin:27px 0 10px}

/* Mobile */
@media(max-width:600px){
 .frame{inset:9px;border-radius:120px 120px 5px 5px/75px 75px 5px 5px}.heroCopy{bottom:42px}.crest{grid-template-columns:1fr 78px 1fr}.crest b{width:78px;height:78px;font-size:55px}.crest .bird{font-size:29px}
 .hero{background-position:center}.photo{transform:scale(.92);object-position:center 45%}
 .stage{padding:30px 4px 80px;background-attachment:scroll;background-position:center}
 .scroll{width:98vw;padding-top:34px}.paperWindow{height:850px;margin:0 16px}.roller{height:74px}.roller.top{top:0}.roller.bottom{top:34px}
 @keyframes bottomRodUnroll{0%{top:34px}12%{top:95px}30%{top:225px}50%{top:395px}72%{top:585px}90%{top:755px}100%{top:825px}}
 .content{padding:43px 15% 24px}.journey{font-size:6.5px;letter-spacing:.10em}.crestArt{height:145px;width:88%;margin:-5px auto -2px}.names h2{font-size:31px;letter-spacing:.025em}.amp{font-size:23px}.save{font-size:20px;letter-spacing:.16em}.date{font-size:15px}.location{font-size:8px;letter-spacing:.16em}.venue{font-size:16px;margin-top:6px}.address{font-size:8px;line-height:1.45;letter-spacing:.08em}.formal{font-size:15px;margin-top:10px}
 .floral{width:22%}.royalScene{left:7%;right:7%;width:86%;height:180px;bottom:14px}
 .contact a{min-width:86vw;padding:15px 14px;font-size:8.5px;letter-spacing:.12em}.contact p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-delay:0ms!important;scroll-behavior:auto!important}.paperWindow{clip-path:inset(0)}.content{opacity:1;transform:none}}


/* =========================================================
   V6 FIX — SECOND PAGE WEDDING DETAILS ONLY
   First-page styling above is intentionally untouched.
   ========================================================= */
.wedding-details{
  position:relative;
  z-index:8;
  width:min(520px,100%);
  margin:10px auto 0;
  padding:8px 8px 12px;
  text-align:center;
}
.wedding-details .date{
  margin:0 0 9px;
  font:600 20px/1.2 "Cormorant Garamond",serif;
  letter-spacing:.13em;
  color:#65182a;
}
.wedding-details .venue{
  margin:0 0 5px;
  font:600 19px/1.15 "Cormorant Garamond",serif;
  letter-spacing:.10em;
  color:#5f291f;
}
.wedding-details .address{
  margin:0;
  font:500 10px/1.55 Montserrat,sans-serif;
  letter-spacing:.11em;
  color:#5f3927;
}
@media(max-width:600px){
  .wedding-details{margin-top:7px;padding:5px 4px 8px}
  .wedding-details .date{font-size:16px;letter-spacing:.08em;margin-bottom:7px}
  .wedding-details .venue{font-size:16px;letter-spacing:.07em;margin-bottom:4px}
  .wedding-details .address{font-size:8.5px;letter-spacing:.06em;line-height:1.45}
}


/* =========================================================
   V7 — PAGE 2 ONLY
   Page 1 is intentionally untouched.
   Removes duplicate baked-in invitation text and gives the
   real date/location a clean protected area above the artwork.
   ========================================================= */

#invite .content{
  padding-top:52px;
  padding-bottom:250px;
}

#invite .crestArt{
  height:190px;
  margin:-4px auto -6px;
}

#invite .names h2{
  line-height:.96;
}

#invite .orn{
  margin:13px 0 8px;
}

#invite .save{
  margin-bottom:8px;
}

#invite .wedding-details{
  position:relative;
  z-index:12;
  margin:8px auto 0;
  padding:8px 10px 10px;
  background:rgba(250,237,207,.82);
  border-radius:4px;
}

#invite .formal{
  position:relative;
  z-index:12;
  margin:10px 0 0;
}

#invite .royalScene{
  left:9%;
  right:9%;
  bottom:20px;
  width:82%;
  height:215px;
  object-fit:cover;
  object-position:center bottom;
  mix-blend-mode:multiply;
}

@media(max-width:600px){
  #invite .content{
    padding-top:40px;
    padding-bottom:195px;
  }
  #invite .crestArt{
    height:135px;
    margin:-4px auto -5px;
  }
  #invite .names h2{
    font-size:30px;
    line-height:.96;
  }
  #invite .orn{
    margin:9px 0 6px;
  }
  #invite .save{
    margin-bottom:5px;
  }
  #invite .wedding-details{
    margin-top:5px;
    padding:5px 5px 7px;
  }
  #invite .formal{
    margin-top:7px;
  }
  #invite .royalScene{
    left:7%;
    right:7%;
    bottom:13px;
    width:86%;
    height:165px;
  }
}


/* =========================================================
   V8 — PAGE 2 ONLY
   Page 1 remains locked and untouched.
   ========================================================= */

/* No top "Two Families..." line; crest now gets the top breathing room */
#invite .crestArt{
  margin:0 auto -6px;
}

/* Reserve a clean lower zone for elephants + palace */
#invite .content{
  padding-top:44px;
  padding-bottom:205px;
}

/* Keep the final wedding details visually grouped */
#invite .wedding-details{
  background:transparent;
  padding:4px 8px 7px;
  margin-top:5px;
}

#invite .formal{
  margin-top:7px;
}

/* New artwork contains ONLY elephants, palace and floral base */
#invite .royalScene{
  left:8%;
  right:8%;
  bottom:22px;
  width:84%;
  height:165px;
  object-fit:cover;
  object-position:center bottom;
  mix-blend-mode:multiply;
}

@media(max-width:600px){
  #invite .content{
    padding-top:35px;
    padding-bottom:155px;
  }

  #invite .crestArt{
    margin:0 auto -5px;
  }

  #invite .royalScene{
    left:6%;
    right:6%;
    bottom:12px;
    width:88%;
    height:125px;
  }
}


/* =========================================================
   V9 — PAGE 2 BOTTOM ARTWORK SPACING FIX ONLY
   Page 1 and all other Page 2 styling remain untouched.
   ========================================================= */

#invite .content{
  padding-bottom:230px;
}

#invite .royalScene{
  left:8%;
  right:8%;
  bottom:20px;
  width:84%;
  height:190px;

  /* Critical fix: show the ENTIRE elephant/palace crop */
  object-fit:contain;
  object-position:center bottom;

  mix-blend-mode:multiply;
}

@media(max-width:600px){
  #invite .content{
    padding-bottom:175px;
  }

  #invite .royalScene{
    left:6%;
    right:6%;
    bottom:12px;
    width:88%;
    height:145px;
    object-fit:contain;
    object-position:center bottom;
  }
}


/* =========================================================
   V10 — PAGE 2 LOWER ARTWORK INTEGRATION FIX ONLY
   PAGE 1 IS LOCKED AND UNCHANGED.
   ========================================================= */

/*
  The previous issue was not simply object-fit.
  royal-scene-v8.jpg is a rectangular parchment crop, so its
  top edge was visibly sitting ON TOP of the invitation.

  V10:
  1. gives the artwork more height so nothing is cut off,
  2. extends it nearly edge-to-edge,
  3. softly fades its top parchment into the main parchment,
  4. removes the hard rectangular top edge.
*/

#invite .content{
  padding-bottom:270px;
}

#invite .royalScene{
  position:absolute;
  z-index:5;

  left:3%;
  right:3%;
  bottom:12px;

  width:94%;
  height:245px;

  object-fit:contain;
  object-position:center bottom;

  mix-blend-mode:multiply;

  /* Feather away the rectangular/pasted-on top edge */
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.18) 7%,
    rgba(0,0,0,.72) 19%,
    #000 32%,
    #000 100%
  );
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.18) 7%,
    rgba(0,0,0,.72) 19%,
    #000 32%,
    #000 100%
  );
}

/* Keep the floral side embroidery visually above the blended artwork */
#invite .floral{
  z-index:7;
}

#invite .paperBorder{
  z-index:9;
}

@media(max-width:600px){
  #invite .content{
    padding-bottom:205px;
  }

  #invite .royalScene{
    left:2%;
    right:2%;
    bottom:8px;
    width:96%;
    height:185px;

    -webkit-mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.25) 8%,
      rgba(0,0,0,.8) 20%,
      #000 34%,
      #000 100%
    );
    mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.25) 8%,
      rgba(0,0,0,.8) 20%,
      #000 34%,
      #000 100%
    );
  }
}


/* =========================================================
   V11 — PAGE 2 REBUILT AS ONE UNIFIED ARTWORK
   PAGE 1 IS LOCKED AND UNCHANGED.
   ========================================================= */

.stage-v11{
  min-height:100svh;
  padding:0 0 70px;
  overflow:hidden;
  background:#21040b;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .8s ease,visibility .8s ease;
}

.stage-v11.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/*
  The complete reference design is now ONE image.
  There are no separate elephant, palace, parchment, crest,
  border or roller layers, so nothing can look pasted on.
*/
.finalInviteWrap{
  width:100%;
  margin:0 auto;
  overflow:hidden;
  clip-path:inset(0 0 98% 0);
  background:#21040b;
}

.stage-v11.show .finalInviteWrap{
  animation:v11Unroll 4.6s cubic-bezier(.22,.72,.24,1) forwards;
}

.finalInvite{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}

@keyframes v11Unroll{
  0%   {clip-path:inset(0 0 98% 0)}
  10%  {clip-path:inset(0 0 94% 0)}
  24%  {clip-path:inset(0 0 82% 0)}
  42%  {clip-path:inset(0 0 63% 0)}
  61%  {clip-path:inset(0 0 42% 0)}
  78%  {clip-path:inset(0 0 22% 0)}
  92%  {clip-path:inset(0 0 7% 0)}
  100% {clip-path:inset(0)}
}

.contact-v11{
  position:relative;
  z-index:3;
  margin:42px auto 0;
  padding:0 16px;
  text-align:center;
  color:#f1d58f;
}

.contact-v11 a{
  display:inline-block;
  min-width:min(540px,84vw);
  padding:17px 28px;
  border:1px solid #d7ad5c;
  outline:1px solid rgba(215,173,92,.42);
  outline-offset:5px;
  border-radius:14px;
  background:rgba(65,7,22,.92);
  color:#f1d58f;
  text-decoration:none;
  font-size:10px;
  letter-spacing:.20em;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.contact-v11 a span{
  font-size:20px;
  margin-left:8px;
}

.contact-v11 p{
  font:italic 18px "Cormorant Garamond",serif;
  margin:27px 0 10px;
}

@media(max-width:600px){
  .stage-v11{
    padding-bottom:55px;
  }

  .finalInvite{
    width:100%;
    height:auto;
  }

  .contact-v11{
    margin-top:32px;
  }

  .contact-v11 a{
    min-width:86vw;
    padding:15px 14px;
    font-size:8.5px;
    letter-spacing:.12em;
  }

  .contact-v11 p{
    font-size:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  .stage-v11.show .finalInviteWrap{
    animation:none!important;
    clip-path:inset(0)!important;
  }
}


/* =========================================================
   V21 STATIC — NO ANIMATIONS OR OPENING INTERACTIONS
   ========================================================= */
html{scroll-behavior:auto!important}
*,*::before,*::after{
  animation:none!important;
  transition:none!important;
}
.heroCopy > p,
#open{display:none!important}

.stage-v11.static-invite{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
}
.stage-v11.static-invite .finalInviteWrap{
  clip-path:none!important;
  -webkit-clip-path:none!important;
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  height:auto!important;
}
.stage-v11.static-invite .finalInvite{
  opacity:1!important;
  transform:none!important;
}
.stage-v11.static-invite .contact-v11{
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
}


/* =========================================================
   V22 — ROYAL PRIVATE INVITATION GATE
   ========================================================= */
body.gateLocked{overflow:hidden!important}

.royalGate{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:24px;
  color:#f5e3ad;
}
.royalGate.gateGone{display:none!important}

.gateBackdrop{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(31,2,10,.72),rgba(31,2,10,.88)),
    url("assets/background.jpg") center/cover no-repeat;
}
.gateBackdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,transparent 0 30%,rgba(20,0,6,.62) 100%);
}

.gateCard{
  position:relative;
  z-index:2;
  width:min(520px,92vw);
  padding:38px 42px 32px;
  text-align:center;
  background:
    linear-gradient(145deg,rgba(91,13,34,.97),rgba(48,4,17,.98));
  border:1px solid #c99d4b;
  box-shadow:
    0 26px 70px rgba(0,0,0,.55),
    inset 0 0 0 5px rgba(72,8,25,.95),
    inset 0 0 0 6px rgba(218,176,83,.42);
}
.gateCard::before{
  content:"";
  position:absolute;
  inset:12px;
  pointer-events:none;
  border:1px solid rgba(223,185,98,.5);
}

.gateOrnament{
  color:#d9b45e;
  font-size:25px;
  line-height:1;
  margin-bottom:14px;
}
.gateOrnament.bottom{margin:22px 0 0}

.gateCrest{
  width:74px;
  height:74px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  border:1px solid #e1bd68;
  border-radius:50%;
  color:#f0d27e;
  font:italic 46px "Cormorant Garamond",serif;
  box-shadow:
    0 0 0 5px rgba(225,189,104,.10),
    inset 0 0 18px rgba(229,193,103,.08);
}

.gateEyebrow{
  margin:0 0 7px;
  font:600 10px Arial,sans-serif;
  letter-spacing:.28em;
  color:#d8b765;
}
.gateCard h1{
  margin:0;
  color:#f4dfaa;
  font:500 45px/1.05 "Cormorant Garamond",serif;
}
.gateDivider{
  margin:15px auto 13px;
  color:#cfa653;
  font-size:9px;
  display:flex;
  align-items:center;
  gap:12px;
  width:72%;
}
.gateDivider::before,.gateDivider::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,#cfa653);
}
.gateDivider::after{background:linear-gradient(90deg,#cfa653,transparent)}

.gateWelcome{
  margin:0 0 25px;
  font:italic 18px "Cormorant Garamond",serif;
  color:#ead59b;
}

#gateForm label{
  display:block;
  margin-bottom:9px;
  color:#d8b765;
  font:600 9px Arial,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.gateInputWrap{
  display:flex;
  height:48px;
  border:1px solid rgba(219,180,91,.72);
  background:rgba(30,2,10,.48);
}
#gatePassword{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  padding:0 14px;
  background:transparent;
  color:#fff0c4;
  text-align:center;
  font:500 16px Arial,sans-serif;
  letter-spacing:.12em;
}
#gateToggle{
  width:64px;
  border:0;
  border-left:1px solid rgba(219,180,91,.35);
  background:transparent;
  color:#d7b45e;
  cursor:pointer;
  font:600 9px Arial,sans-serif;
  letter-spacing:.12em;
}
.gateError{
  height:20px;
  margin:7px 0 3px;
  color:#f1c2b6;
  font:12px Arial,sans-serif;
}
.gateEnter{
  width:100%;
  padding:14px 18px;
  border:1px solid #e0bd69;
  background:#d2a653;
  color:#3d0817;
  cursor:pointer;
  font:700 10px Arial,sans-serif;
  letter-spacing:.2em;
}
.gateEnter:hover{background:#e0bc68}
.gatePrivate{
  margin:19px 0 0;
  color:rgba(237,214,157,.68);
  font:11px Arial,sans-serif;
  letter-spacing:.05em;
}

@media(max-width:600px){
  .gateCard{padding:31px 25px 25px}
  .gateCard h1{font-size:38px}
  .gateCrest{width:64px;height:64px;font-size:40px}
}


/* =========================================================
   V23 — PROMINENT GUEST INFORMATION CTA
   ========================================================= */
.contact-v11.contact-primary{
  width:min(760px,90vw)!important;
  margin:24px auto 44px!important;
  padding:30px 24px 28px!important;
  text-align:center!important;
  border:1px solid rgba(211,170,75,.72)!important;
  background:linear-gradient(145deg,rgba(91,13,34,.98),rgba(48,4,17,.99))!important;
  box-shadow:0 16px 36px rgba(0,0,0,.28),inset 0 0 0 5px rgba(211,170,75,.08)!important;
}
.contact-primary .contact-heading{
  margin:0 0 8px!important;
  color:#efd27d!important;
  font:600 15px Arial,sans-serif!important;
  letter-spacing:.17em!important;
}
.contact-primary .contact-message{
  margin:0 0 20px!important;
  color:#f3dfaa!important;
  font:italic 19px "Cormorant Garamond",serif!important;
}
.contact-primary .contact-main-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  min-width:min(390px,85%)!important;
  padding:17px 25px!important;
  border:2px solid #e4c16c!important;
  background:#d2a653!important;
  color:#3b0716!important;
  text-decoration:none!important;
  font:700 11px Arial,sans-serif!important;
  letter-spacing:.17em!important;
  box-shadow:0 8px 18px rgba(0,0,0,.25)!important;
}
.contact-primary .contact-main-button:hover{
  background:#e2be68!important;
}
.contact-primary .contact-flourish{
  margin-top:19px!important;
  color:#cda655!important;
}

/* Mobile-only persistent reminder once guests are browsing the invitation. */
.mobile-info-cta{display:none}

@media(max-width:700px){
  body{padding-bottom:72px}
  .contact-v11.contact-primary{
    width:92vw!important;
    margin:18px auto 26px!important;
    padding:25px 17px 24px!important;
  }
  .contact-primary .contact-heading{
    font-size:12px!important;
    line-height:1.5!important;
  }
  .contact-primary .contact-message{
    font-size:17px!important;
  }
  .contact-primary .contact-main-button{
    width:100%!important;
    min-width:0!important;
    padding:16px 12px!important;
    font-size:10px!important;
  }
  .mobile-info-cta{
    position:fixed;
    z-index:9000;
    left:12px;
    right:12px;
    bottom:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:50px;
    border:1px solid #f0d27d;
    background:rgba(73,8,27,.97);
    color:#f4d982;
    text-decoration:none;
    font:700 10px Arial,sans-serif;
    letter-spacing:.14em;
    box-shadow:0 8px 24px rgba(0,0,0,.38);
  }
  /* Do not show sticky CTA over the password gate. */
  body.gateLocked .mobile-info-cta{display:none!important}
}

/* V24 MOBILE ONLY — desktop remains unchanged */
@media(max-width:700px){
  .mobile-info-cta{display:none!important}
  body{padding-bottom:0!important}

  .hero{height:100svh!important;min-height:0!important;max-height:100svh!important}
  .hero .photo,.photo{
    width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:center 48%!important;
    transform:none!important
  }
  .heroCopy{
    transform:scale(.82)!important;
    transform-origin:center bottom!important;
    bottom:3.5svh!important
  }

  .stage-v11{overflow:hidden!important}
  .finalInviteWrap{
    width:100vw!important;max-width:none!important;
    margin:0!important;overflow:hidden!important
  }
  .finalInvite{
    display:block!important;width:138vw!important;max-width:none!important;
    height:auto!important;margin-left:-19vw!important
  }

  .contact-v11.contact-primary{
    position:relative!important;z-index:5!important;
    width:92vw!important;margin:20px auto 28px!important
  }
}
@media(max-width:390px){
  .finalInvite{width:146vw!important;margin-left:-23vw!important}
  .heroCopy{transform:scale(.76)!important}
}


/* =========================================================
   V25 — MOBILE REFINEMENT ONLY
   Desktop remains untouched.
   ========================================================= */
@media(max-width:700px){

  /* Page 1: the prior scaled desktop text block pushed the names off-screen.
     Recompose the overlay specifically for phones. */
  .heroCopy{
    left:0!important;
    right:0!important;
    bottom:4.5svh!important;
    width:100%!important;
    transform:none!important;
    text-align:center!important;
    padding:0 20px!important;
    box-sizing:border-box!important;
  }

  /* Keep the S crest centered and comfortably above the names. */
  .heroCopy .crest,
  .heroCopy .monogram,
  .heroCopy [class*="crest"]{
    margin-left:auto!important;
    margin-right:auto!important;
    transform:scale(.78)!important;
    transform-origin:center!important;
  }

  /* Force the couple names to fit the phone width instead of overflowing. */
  .heroCopy h1,
  .heroCopy h2{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    white-space:normal!important;
    text-align:center!important;
    font-size:clamp(34px,10vw,46px)!important;
    line-height:1.05!important;
    letter-spacing:.01em!important;
  }

  /* Page 2: zoom much farther into the unified artwork.
     This intentionally crops scenic background and emphasizes the parchment. */
  .finalInvite{
    width:176vw!important;
    max-width:none!important;
    height:auto!important;
    margin-left:-38vw!important;
  }
}

@media(max-width:390px){
  .heroCopy{bottom:4svh!important;padding:0 16px!important}
  .heroCopy h1,.heroCopy h2{font-size:clamp(32px,9.5vw,40px)!important}
  .finalInvite{
    width:184vw!important;
    margin-left:-42vw!important;
  }
}


/* =========================================================
   V26 — SAVE THE DATE TITLE
   Added to Page 1 for desktop + mobile without changing
   the existing V25 layouts.
   ========================================================= */
.heroSaveDate{
  position:absolute;
  z-index:8;
  top:clamp(34px,6vh,72px);
  left:50%;
  transform:translateX(-50%);
  width:min(560px,72vw);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  pointer-events:none;
  text-shadow:0 2px 14px rgba(35,3,12,.55);
}
.heroSaveText{
  flex:0 0 auto;
  color:#f0d47e;
  font:600 13px/1 Arial,sans-serif;
  letter-spacing:.34em;
  text-indent:.34em;
  white-space:nowrap;
}
.heroSaveLine{
  height:1px;
  flex:1;
  max-width:120px;
  background:linear-gradient(90deg,transparent,rgba(239,208,121,.92));
}
.heroSaveLine:last-child{
  background:linear-gradient(90deg,rgba(239,208,121,.92),transparent);
}
.heroSaveDate::before,
.heroSaveDate::after{
  content:"◆";
  position:absolute;
  color:#e1bd68;
  font-size:6px;
  top:50%;
  transform:translateY(-50%);
}
.heroSaveDate::before{left:calc(50% - 88px)}
.heroSaveDate::after{right:calc(50% - 88px)}

@media(max-width:700px){
  .heroSaveDate{
    top:3.2svh;
    width:82vw;
    gap:12px;
  }
  .heroSaveText{
    font-size:11px;
    letter-spacing:.28em;
    text-indent:.28em;
  }
  .heroSaveLine{max-width:72px}
  .heroSaveDate::before{left:calc(50% - 75px)}
  .heroSaveDate::after{right:calc(50% - 75px)}
}


/* =========================================================
   V27 — MORE ELEGANT SAVE THE DATE
   Same Cormorant Garamond family used by the romantic
   Sachin & Sruti typography; larger and more editorial.
   ========================================================= */
.heroSaveDate{
  top:clamp(38px,7vh,82px)!important;
  width:min(700px,82vw)!important;
  gap:22px!important;
}
.heroSaveText{
  color:#f3d98d!important;
  font-family:"Cormorant Garamond",serif!important;
  font-size:clamp(28px,3.1vw,44px)!important;
  font-weight:500!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  text-indent:.16em!important;
  text-transform:uppercase!important;
  text-shadow:0 2px 15px rgba(35,3,12,.62)!important;
}
.heroSaveLine{
  max-width:125px!important;
  background:linear-gradient(90deg,transparent,rgba(240,207,119,.85))!important;
}
.heroSaveLine:last-child{
  background:linear-gradient(90deg,rgba(240,207,119,.85),transparent)!important;
}
.heroSaveDate::before,
.heroSaveDate::after{
  font-size:7px!important;
  color:#e5c56e!important;
}
.heroSaveDate::before{left:calc(50% - 142px)!important}
.heroSaveDate::after{right:calc(50% - 142px)!important}

@media(max-width:700px){
  .heroSaveDate{
    top:4.2svh!important;
    width:90vw!important;
    gap:12px!important;
  }
  .heroSaveText{
    font-size:clamp(25px,7.3vw,34px)!important;
    letter-spacing:.11em!important;
    text-indent:.11em!important;
  }
  .heroSaveLine{max-width:52px!important}
  .heroSaveDate::before{left:calc(50% - 112px)!important}
  .heroSaveDate::after{right:calc(50% - 112px)!important}
}

/* V28: SAVE THE DATE fully inside the portrait/photo area */
.heroSaveDate{
  /* Align title with the top of the centered portrait rather than the scenic background */
  top:clamp(74px,11.5vh,128px)!important;
  width:min(500px,48vw)!important;
  gap:0!important;
}
.heroSaveText{
  font-family:"Cormorant Garamond",serif!important;
  font-size:clamp(30px,2.5vw,43px)!important;
  font-weight:500!important;
  letter-spacing:.10em!important;
  text-indent:.10em!important;
  color:#f3d98d!important;
  padding:8px 18px 10px!important;
  background:linear-gradient(90deg,transparent,rgba(47,7,17,.30) 18%,rgba(47,7,17,.30) 82%,transparent)!important;
  text-shadow:0 2px 12px rgba(28,2,8,.8)!important;
}
/* Remove all line/dot/diamond decoration around the title */
.heroSaveLine,
.heroSaveDate::before,
.heroSaveDate::after{display:none!important}

@media(max-width:700px){
  .heroSaveDate{
    top:5.2svh!important;
    width:88vw!important;
  }
  .heroSaveText{
    font-size:clamp(27px,8vw,36px)!important;
    letter-spacing:.08em!important;
    text-indent:.08em!important;
    padding:7px 12px 9px!important;
  }
}

/* V29 — seamless SAVE THE DATE: preserve V28 positioning, remove backing block */
.heroSaveText{
  background:none!important;
  box-shadow:none!important;
  padding:0!important;
  text-shadow:
    0 2px 8px rgba(24,2,7,.72),
    0 0 18px rgba(24,2,7,.28)!important;
}


/* =========================================================
   V30 — MOBILE-ONLY HANGING ELEPHANT CLEANUP
   Desktop remains exactly V29.
   No layout, sizing, typography, centering, CTA or spacing changes.
   ========================================================= */
@media(max-width:700px){
  .finalInvite{
    content:url("assets/page2-mobile.jpg")!important;
  }
}


/* =========================================================
   V32 — SINGLE MOBILE FIX
   Based on V30. No artwork edits.
   Crop a few percent farther inward so the tiny hanging
   elephant/trunk slivers sit outside the mobile viewport.
   Everything else is unchanged.
   ========================================================= */
@media(max-width:700px){
  .finalInvite{
    width:184vw!important;
    margin-left:-42vw!important;
  }
}