/* =========================================
   MARIAM & AFEEZ WEDDING — styles.css
   Hero names: Cormorant Garamond (serif)
   Couple names in hero: Great Vibes
========================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C9A84C;--gold-light:#E8D5A3;--gold-dark:#8B6914;
  --purple:#5C1A8E;--purple-light:#9B59B6;--purple-mid:#7B2DBF;
  --emerald:#1A6B3A;--emerald-light:#2ECC71;
  --ivory:#FDFAF4;--ivory2:#F7F0E6;--ivory3:#EFE5D0;
  --text:#2C1A0E;--text2:#6B4C2A;--text3:#9B7A50;
  --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Great Vibes',cursive;
  --sans:'Jost',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--text);font-family:var(--sans);font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* NAV */
nav#topnav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(253,250,244,0.88);border-bottom:1px solid rgba(201,168,76,0.2)}
.nav-logo{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--gold-dark);letter-spacing:.05em}
.nav-links{display:flex;gap:1.5rem}
.nav-links a{font-size:.78rem;font-weight:400;color:var(--text2);text-decoration:none;letter-spacing:.12em;text-transform:uppercase;transition:color .3s}
.nav-links a:hover{color:var(--gold)}
.nav-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:.25rem}
.nav-menu-btn span{display:block;width:22px;height:1.5px;background:var(--text2);margin:5px 0}
.mobile-menu{display:none;position:fixed;inset:0;top:56px;background:rgba(28,10,60,.97);z-index:99;padding:2rem;flex-direction:column;gap:0}
.mobile-menu a{color:#fff;text-decoration:none;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(201,168,76,.15);padding:1rem 0;transition:color .3s}
.mobile-menu a:hover{color:var(--gold)}

/* SECTIONS */
section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:6rem 1.5rem 4rem;position:relative;z-index:1}
.section-inner{width:100%;max-width:900px;margin:0 auto}
.text-center{text-align:center}
.sec-label{font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem;font-weight:500;display:block}
.sec-title{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);font-weight:300;color:var(--text);line-height:1.2;margin-bottom:1rem}
.sec-title em{color:var(--purple-mid);font-style:italic}
.sec-title--light{color:#fff}
.sec-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:1.5rem auto;display:block}
.sec-divider--light{background:linear-gradient(90deg,transparent,var(--gold-light),transparent)}
.sec-intro{font-size:1.1rem;color:var(--text2);line-height:1.8;max-width:560px;margin:0 auto 2.5rem}
.sec-intro--light{color:rgba(255,255,255,.65)}
.gold-text{color:var(--gold-light)}.gold-em{color:var(--gold-light)}

/* ═══════════════════════════════════
   HERO
   Names use Cormorant Garamond (serif),
   not Great Vibes — so they read clearly.
   Great Vibes is reserved for modal header.
════════════════════════════════════ */
#hero{
  min-height:100dvh;padding:0;
  background:linear-gradient(135deg,#2C0A4A 0%,#1A0A2E 30%,#0D2B1A 60%,#1A1A00 100%);
  overflow:hidden;
}
.hero-photo-layer{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  opacity:0;z-index:1;
  transition:opacity .5s ease;
}
.hero-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.petal{position:absolute;border-radius:50% 0 50% 0;opacity:.08;animation:floatPetal linear infinite}
@keyframes floatPetal{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:.1}90%{opacity:.06}100%{transform:translateY(-100px) rotate(720deg);opacity:0}}
.hero-content{position:relative;z-index:3;text-align:center;padding:2rem 1.5rem;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh}
.hero-ornament{font-family:var(--serif);font-size:1rem;color:var(--gold);letter-spacing:.4em;text-transform:uppercase;opacity:.8;margin-bottom:1.5rem;animation:fadeSlideUp .8s ease both}

/* ── Hero couple names — Parisienne cursive (popular wedding font) ── */
.hero-names{
  font-family:'Parisienne','Cormorant Garamond',cursive,Georgia,serif;
  font-size:clamp(4.5rem,13vw,8rem);
  font-weight:400;
  font-style:normal;
  color:#fff;
  line-height:1.15;
  animation:fadeSlideUp .8s .2s ease both;
  margin-bottom:.1rem;
  letter-spacing:.02em;
  text-transform:none;
}
.hero-names em{color:var(--gold);font-style:normal;font-weight:400}
.hero-names--delayed{animation-delay:.35s}

.hero-heart{font-size:clamp(1.5rem,4vw,2.5rem);color:var(--gold);display:block;margin:.35rem 0;animation:heartPulse 2s ease infinite}
@keyframes heartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.hero-date{font-family:var(--serif);font-size:clamp(1.1rem,3vw,1.6rem);color:var(--gold-light);letter-spacing:.15em;font-style:italic;animation:fadeSlideUp .8s .5s ease both;margin-bottom:.5rem}
.hero-tagline{font-size:.85rem;color:rgba(255,255,255,.55);letter-spacing:.2em;text-transform:uppercase;animation:fadeSlideUp .8s .7s ease both;margin-bottom:2.5rem}
.countdown{display:flex;gap:1rem;justify-content:center;animation:fadeSlideUp .8s .9s ease both;margin-bottom:2.5rem;flex-wrap:wrap}
.count-item{text-align:center;min-width:65px}
.count-num{display:block;font-family:var(--serif);font-size:2.5rem;font-weight:300;color:#fff;line-height:1;background:rgba(255,255,255,.07);border:1px solid rgba(201,168,76,.25);border-radius:8px;padding:.3rem .8rem;backdrop-filter:blur(8px)}
.count-label{font-size:.65rem;color:var(--gold);letter-spacing:.2em;text-transform:uppercase;margin-top:.4rem;display:block}
.count-sep{font-family:var(--serif);font-size:2rem;color:rgba(201,168,76,.4);align-self:center;margin-top:-.5rem}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeSlideUp .8s 1.1s ease both}
.btn-gold{padding:.75rem 2rem;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;border-radius:2px;font-family:var(--sans);font-weight:500;transition:all .3s;display:inline-block}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,168,76,.35)}
.btn-outline{padding:.75rem 2rem;background:transparent;color:#fff;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(255,255,255,.3);cursor:pointer;border-radius:2px;font-family:var(--sans);font-weight:400;transition:all .3s;display:inline-block}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════
   SCHEDULE SECTION
════════════════════════════════════ */
#schedule{background:var(--ivory2);padding:6rem 1.5rem 5rem}

.schedule-cards{
  display:flex;flex-direction:column;gap:1.5rem;
  margin-top:2.5rem;max-width:680px;margin-left:auto;margin-right:auto;
}

.sched-card{
  display:flex;align-items:flex-start;gap:1.25rem;
  background:#fff;border-radius:14px;padding:1.6rem 1.75rem;
  border:1px solid rgba(201,168,76,.2);
  border-left:4px solid rgba(201,168,76,.35);
  transition:transform .3s,box-shadow .3s;
  text-align:left;
}
.sched-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(201,168,76,.12)}
.sched-card--featured{
  border-left-color:var(--gold);
  background:linear-gradient(135deg,#fffef9,#fdf7e8);
}

.sched-icon{
  font-size:2rem;flex-shrink:0;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,168,76,.1);border-radius:50%;
}
.sched-body{flex:1}
.sched-name{
  font-family:var(--serif);font-size:1.35rem;font-weight:500;
  color:var(--text);margin-bottom:.3rem;
}
.sched-sub{
  font-size:1.05rem;color:var(--text2);line-height:1.65;margin-bottom:.75rem;
}
.sched-meta{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.sched-time{
  font-size:.96rem;font-weight:500;color:var(--gold-dark);
  letter-spacing:.06em;
  background:rgba(201,168,76,.12);
  padding:.28rem .75rem;border-radius:20px;
}
.sched-map-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.92rem;color:var(--purple-mid);text-decoration:none;
  font-weight:400;letter-spacing:.04em;
  transition:color .25s;
}
.sched-map-link:hover{color:var(--purple)}
.sched-map-link svg{flex-shrink:0}

/* ── Guest colour codes ── */
.colour-codes-wrap{margin-top:1rem;text-align:center}
.colour-codes-title{font-family:var(--serif);font-size:1.6rem;font-weight:300;color:var(--text);margin-bottom:2rem;font-style:italic}
.colour-grid{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}
.colour-card{background:#fff;border:1px solid rgba(201,168,76,.2);border-radius:16px;padding:2rem 2.5rem;text-align:center;min-width:200px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.colour-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08)}
.colour-card--bride::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#7B2D8B,#C9A84C)}
.colour-card--groom::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2D6A4F,#95D5B2)}
.colour-swatches{display:flex;gap:.75rem;justify-content:center;margin-bottom:1.25rem}
.colour-swatch{display:block;width:44px;height:44px;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);border:3px solid rgba(255,255,255,.8)}
.colour-family{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text3);margin-bottom:.4rem;font-weight:500}
.colour-names{font-family:var(--serif);font-size:1.2rem;color:var(--text);font-weight:500}

/* ═══════════════════════════════════
   RSVP
════════════════════════════════════ */
.rsvp-section{background:linear-gradient(160deg,#2C0A4A 0%,#1A0A2E 50%,#0D2018 100%);color:#fff}
.confetti-wrap{position:absolute;inset:0;pointer-events:none;z-index:10;overflow:hidden}
.rsvp-card{background:rgba(255,255,255,.05);border:1px solid rgba(201,168,76,.2);border-radius:16px;padding:2.5rem 2rem;backdrop-filter:blur(16px);max-width:560px;margin:0 auto;width:100%}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;font-weight:500}
.form-group input,.form-group select,.form-group textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(201,168,76,.25);border-radius:6px;padding:.75rem 1rem;color:#fff;font-family:var(--sans);font-size:.95rem;font-weight:300;outline:none;transition:border-color .3s}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.3)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold)}
.form-group select option{background:#1A0A2E;color:#fff}
.form-group textarea{resize:vertical;min-height:80px}
.attendance-opts{display:flex;gap:.75rem;flex-wrap:wrap}
.att-opt{flex:1;min-width:90px}
.att-opt input[type="radio"]{display:none}
.att-opt label{display:block;text-align:center;padding:.6rem .5rem;border:1px solid rgba(201,168,76,.25);border-radius:6px;font-size:.78rem;cursor:pointer;color:rgba(255,255,255,.6);transition:all .3s}
.att-opt input:checked + label{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:500}
.form-error{color:#E87777;font-size:.8rem;margin-bottom:.75rem;display:none}
.btn-rsvp{width:100%;padding:1rem;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;border:none;cursor:pointer;border-radius:6px;font-family:var(--sans);font-weight:500;margin-top:.5rem;transition:all .3s}
.btn-rsvp:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,168,76,.35)}
.btn-rsvp:disabled{opacity:.5;cursor:not-allowed}
.rsvp-success{text-align:center;padding:2rem}
.rsvp-success-icon{font-size:4rem;display:block;margin-bottom:1rem;animation:bounceIn .6s ease}
@keyframes bounceIn{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.rsvp-success h3{font-family:var(--serif);font-size:2rem;color:var(--gold-light);margin-bottom:.5rem}
.rsvp-success p{color:rgba(255,255,255,.6);font-size:.95rem;line-height:1.7}
.rsvp-hashtag{margin-top:1rem !important;font-size:1.4rem !important;color:rgba(255,255,255,.7) !important}
.conf{position:absolute;border-radius:2px;animation:confettiFall linear both}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(700px) rotate(720deg);opacity:0}}

/* ═══════════════════════════════════
   VENUE
════════════════════════════════════ */
#venue{background:var(--ivory)}
.map-frame{width:100%;height:300px;border-radius:12px;overflow:hidden;border:1px solid rgba(201,168,76,.2);margin-bottom:1.5rem}
.directions-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;text-align:left}
.dir-card{background:#fff;border-radius:10px;padding:1.25rem;border:1px solid rgba(201,168,76,.15)}
.dir-card-title{font-family:var(--serif);font-size:1rem;color:var(--text);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.dir-card-title svg{flex-shrink:0;stroke:var(--gold-dark,#8B6914)}
.dir-card-body{font-size:.95rem;color:var(--text2);line-height:1.7}
.btn-maps{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--purple);color:#fff;border-radius:6px;text-decoration:none;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;font-family:var(--sans);transition:all .3s;margin-top:1rem}
.btn-maps:hover{background:var(--purple-mid);transform:translateY(-2px)}

/* ═══════════════════════════════════
   PROGRAMME BUTTON + MODAL
════════════════════════════════════ */
#timeline{background:#fdfaf5}
.btn-programme{display:inline-flex;align-items:center;gap:.75rem;padding:.9rem 2.5rem;background:transparent;border:1px solid rgba(201,168,76,.5);border-radius:2px;color:var(--gold-dark);font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:all .3s;margin-top:.5rem}
.btn-programme::before{content:'📋';font-size:1rem}
.btn-programme:hover{background:var(--gold-dark);color:#fff;border-color:var(--gold-dark);transform:translateY(-2px)}
.programme-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:5000;display:flex;align-items:center;justify-content:center;padding:1.5rem;backdrop-filter:blur(6px);animation:fadeIn .25s ease}
.programme-modal{background:#fff;border-radius:4px;padding:3rem 2.5rem 2.5rem;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;position:relative;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.3)}
@media(min-width:768px){.programme-modal{max-width:620px;padding:3.25rem 3.5rem 3rem}}
.programme-modal-close{position:absolute;top:1rem;right:1.25rem;background:none;border:none;font-size:1.3rem;color:#999;cursor:pointer;line-height:1;padding:.25rem;transition:color .2s}
.programme-modal-close:hover{color:#333}
.programme-couple-names{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:#2C1A0E;margin-bottom:.2rem}
.programme-date{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#888;margin-bottom:1.5rem}
.programme-heading{font-family:'Great Vibes',cursive;font-size:2.2rem;color:#2C1A0E;margin-bottom:.75rem}
.programme-divider{width:80px;height:1px;background:linear-gradient(90deg,transparent,#C9A84C,transparent);margin:0 auto 1.5rem}
.programme-events{text-align:left;display:flex;flex-direction:column;gap:0}
.programme-event-row{display:flex;align-items:baseline;gap:1.25rem;padding:.65rem 0;border-bottom:1px solid rgba(0,0,0,.06)}
.programme-event-row:last-child{border-bottom:none}
.programme-event-time{font-family:var(--sans);font-size:.9rem;font-weight:500;color:#888;letter-spacing:.05em;min-width:72px;flex-shrink:0;text-align:right}
.programme-event-name{font-family:var(--sans);font-size:.95rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#2C1A0E}

/* Two-group split: Traditional Wedding / Reception */
.programme-group{margin-bottom:1.75rem;text-align:left}
.programme-group:last-child{margin-bottom:0}
.programme-group-title{font-family:'Great Vibes',cursive;font-size:1.5rem;color:#7B2D8B;text-align:center;margin-bottom:.6rem}
.programme-empty-group{font-family:var(--sans);font-size:.78rem;color:#999;font-style:italic;text-align:center;padding:.5rem 0}
.programme-loading{color:#aaa;font-style:italic;text-align:center;padding:1.5rem 0}
.programme-locked{text-align:center;padding:2rem 0;color:#aaa;font-style:italic;font-family:var(--serif);font-size:1.1rem;line-height:1.7}

/* ═══════════════════════════════════
   GALLERY
════════════════════════════════════ */
.gallery-section{background:#fff;padding:6rem 1rem 4rem}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:2rem}
.gallery-item{aspect-ratio:1;overflow:hidden;border-radius:4px;cursor:pointer;position:relative;background:var(--ivory3);transition:transform .3s}
.gallery-item:nth-child(3n+1){grid-row:span 2;aspect-ratio:unset}
.gallery-item:hover{transform:scale(1.02)}
.gallery-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;color:var(--text3);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;min-height:120px}
.gal-1{background:linear-gradient(135deg,#EDE0F0,#D4B8E8)}.gal-2{background:linear-gradient(135deg,#F0E8D0,#E8D4A0)}.gal-3{background:linear-gradient(135deg,#D0E8D4,#A8D4B0)}.gal-4{background:linear-gradient(135deg,#E8D0D0,#D4A8A8)}.gal-5{background:linear-gradient(135deg,#D0D8F0,#A8B8E0)}.gal-6{background:linear-gradient(135deg,#F0EDD0,#E0D8A0)}
.gal-icon{font-size:2rem;opacity:.5}
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:999;align-items:center;justify-content:center;animation:fadeIn .3s}
.lightbox.open{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox-inner{background:var(--ivory3);border-radius:8px;padding:3rem 2rem;text-align:center;max-width:90%;width:400px;position:relative}
.lightbox-close{position:absolute;top:1rem;right:1rem;background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--text2)}
.lightbox-icon{font-size:4rem;margin-bottom:1rem}
.lightbox-title{font-family:var(--serif);font-size:1.4rem;color:var(--text);margin-bottom:.5rem}
.lightbox-tag{font-size:.8rem;color:var(--text3);letter-spacing:.1em}

/* ═══════════════════════════════════
   HOTELS CAROUSEL
════════════════════════════════════ */
.hotels-section{background:var(--ivory2)}
.hotels-carousel-wrap{position:relative;width:100%}
.hotels-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;margin-top:1.5rem;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;scroll-snap-type:x mandatory}
.hotels-scroll::-webkit-scrollbar{display:none}
.hotel-card{min-width:220px;max-width:220px;background:#fff;border-radius:12px;padding:1.25rem;border:1px solid rgba(201,168,76,.15);flex-shrink:0;transition:transform .3s,box-shadow .3s;scroll-snap-align:start}
.hotel-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.hotel-stars{color:var(--gold);font-size:.8rem;margin-bottom:.5rem}
.hotel-name{font-family:var(--serif);font-size:1.1rem;color:var(--text);margin-bottom:.25rem;font-weight:500}
.hotel-dist{font-size:.9rem;color:var(--text3);margin-bottom:.75rem}
.btn-hotel{display:block;text-align:center;padding:.5rem;border:1px solid rgba(92,26,142,.3);border-radius:6px;color:var(--purple-mid);font-size:.75rem;text-decoration:none;letter-spacing:.05em;transition:all .3s;font-family:var(--sans)}
.btn-hotel:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.hotel-card--cta{background:linear-gradient(135deg,#2C0A4A,#1A0A2E);border-color:rgba(201,168,76,.3);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:120px}
.hotel-cta-label{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.hotel-cta-link{color:#fff;font-family:var(--serif);font-size:1rem;text-decoration:none;line-height:1.6;text-align:center}
.hotel-cta-link:hover{color:var(--gold-light)}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid rgba(201,168,76,.3);color:var(--gold-dark);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:all .3s;z-index:5}
.carousel-btn:hover{background:var(--gold-dark);color:#fff;border-color:var(--gold-dark)}
.carousel-btn:disabled{opacity:.25;cursor:not-allowed;pointer-events:none}
.carousel-btn--prev{left:-20px}
.carousel-btn--next{right:-20px}

/* ═══════════════════════════════════
   MENU
════════════════════════════════════ */
.menu-section{background:#f7f0e7}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem;text-align:left}
.menu-cat{background:#fff;border-radius:12px;padding:1.5rem;border:1px solid rgba(201,168,76,.15)}
.menu-cat-title{font-family:var(--serif);font-size:1.2rem;color:var(--purple-mid);margin-bottom:1rem}
.menu-item{font-size:.85rem;color:var(--text2);padding:.4rem 0;border-bottom:1px solid rgba(0,0,0,.04);line-height:1.5}
.menu-item:last-child{border-bottom:none}
.menu-locked,.timeline-locked{text-align:center;padding:3rem 1.5rem;border:1px dashed rgba(201,168,76,.3);border-radius:12px;background:rgba(201,168,76,.04);margin-top:1rem}
.locked-icon{font-size:3rem;display:block;margin-bottom:1rem;opacity:.5}
.locked-msg{font-family:var(--serif);font-size:1.4rem;color:var(--text2);margin-bottom:.5rem;font-style:italic}
.locked-sub{font-size:.82rem;color:var(--text3);letter-spacing:.1em}

/* ═══════════════════════════════════
   FAQ
════════════════════════════════════ */
#faq{background:#fff}
.faq-list{margin-top:2rem;text-align:left;max-width:680px;margin-left:auto;margin-right:auto}
.faq-item{border-bottom:1px solid rgba(0,0,0,.07)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:1.25rem 0;font-family:var(--sans);font-size:1rem;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:color .3s;line-height:1.5}
.faq-q:hover{color:var(--gold-dark)}
.faq-icon{font-size:1.5rem;color:var(--gold);transition:transform .3s;flex-shrink:0;line-height:1;font-weight:300}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{padding-bottom:1.25rem;font-size:1rem;color:var(--text2);line-height:1.8}

/* ═══════════════════════════════════
   CONTACT
════════════════════════════════════ */
.contact-section{background:linear-gradient(160deg,rgba(44,10,74,0.97) 0%,rgba(26,10,46,0.97) 50%,rgba(13,32,24,0.97) 100%);color:#fff;text-align:center}
.contact-grid{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin:2rem 0}
.contact-item{background:rgba(255,255,255,.07);border:1px solid rgba(201,168,76,.2);border-radius:12px;padding:1.5rem 2rem;text-align:center;min-width:180px;transition:transform .3s}
.contact-item:hover{transform:translateY(-3px)}
.contact-icon{font-size:1.8rem;display:block;margin-bottom:.75rem}
.contact-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.contact-value{color:rgba(255,255,255,.8);font-size:1.05rem;font-family:var(--serif)}
.contact-value + .contact-value{margin-top:.35rem}
.hashtag{font-family:var(--serif);font-size:2rem;color:var(--gold-light);margin-top:1.5rem;font-style:italic}

/* ═══════════════════════════════════
   FOOTER + NAV
════════════════════════════════════ */
footer{background:#0D0A1E;color:rgba(255,255,255,.3);text-align:center;padding:2rem 1.5rem;font-size:.75rem;letter-spacing:.1em;position:relative;z-index:2}
.footer-names{color:var(--gold);opacity:.8}

nav#topnav{z-index:100}
section{position:relative;z-index:1}
footer{z-index:2}
.lightbox{z-index:999 !important}
.programme-modal-backdrop{z-index:5000 !important}

/* ═══════════════════════════════════
   ADMIN SAVE TOAST
════════════════════════════════════ */
.save-toast{position:fixed;bottom:2rem;right:2rem;background:#1A1230;border:1px solid rgba(46,204,113,.4);color:#2ECC71;padding:.85rem 1.5rem;border-radius:8px;font-family:var(--sans);font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:.6rem;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:9999;transform:translateY(80px);opacity:0;transition:transform .4s cubic-bezier(0.34,1.56,0.64,1),opacity .4s ease;pointer-events:none}
.save-toast.visible{transform:translateY(0);opacity:1}

/* ═══════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media(max-width:768px){
  .nav-links{display:none}.nav-menu-btn{display:block}
  .form-row{grid-template-columns:1fr}
  .directions-grid{grid-template-columns:1fr}
  section{padding:5rem 1rem 3rem}
  .rsvp-card{padding:1.75rem 1.25rem}
  .colour-grid{gap:1rem}.colour-card{min-width:160px;padding:1.5rem}
  .sched-card{padding:1.25rem}
  .carousel-btn--prev{left:0}.carousel-btn--next{right:0}
  .save-toast{bottom:1rem;right:1rem;left:1rem;justify-content:center}
}
@media(max-width:480px){
  .hero-names{font-size:clamp(3rem,16vw,4.5rem)}
  .count-num{font-size:2rem;padding:.2rem .6rem}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item:nth-child(3n+1){grid-row:span 1}
  .countdown{gap:.6rem}
  .colour-grid{flex-direction:column;align-items:center}
  .schedule-cards{gap:1rem}
  .sched-card{flex-direction:column;gap:.75rem}
  .sched-icon{width:40px;height:40px;font-size:1.5rem}
}

/* ══════════════════════════════════════
   SCHEDULE — date banner at top
══════════════════════════════════════ */
.schedule-date-banner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  background: #fff;
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 12px;
  padding: 1.25rem 2.5rem;
  margin: 1rem auto 2.5rem;
  box-shadow: 0 4px 20px rgba(201,168,76,.08);
}
.schedule-date-banner .sdb-label {
  font-family: 'Jost', sans-serif;
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 500;
}
.schedule-date-banner .sdb-date {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  color: var(--text);
  font-style: italic;
  letter-spacing: .04em;
}
.schedule-date-banner .sdb-venue {
  font-size: .78rem;
  color: var(--gold-dark);
  letter-spacing: .1em;
  font-weight: 500;
}

/* ══════════════════════════════════════
   HERO — reference redesign
   Top meta bar, large italic serif names,
   invite headline, photo fills bottom.
══════════════════════════════════════ */

/* Meta bar — date left, divider, place right */
.hero-meta-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2.5rem 3rem 0;
  gap: 1rem;
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.hero-meta-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: rgba(255,255,255,.92);
  letter-spacing: .04em;
  line-height: 1.1;
}
.hero-meta-label {
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: lowercase;
  color: rgba(255,255,255,.45);
  font-weight: 300;
}
.hero-meta-divider {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.2);
  align-self: center;
  margin-top: -.5rem;
}

/* Couple names — large italic script-style serif */
.hero-couple-script {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,.95);
  line-height: 1.15;
  letter-spacing: .02em;
  margin-bottom: .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: fadeSlideUp .8s .2s ease both;
}
.hero-script-amp {
  color: var(--gold);
  font-size: .65em;
  margin: -.1em 0;
  display: block;
}

/* Invite headline — large, bold, dark text on light area */
.hero-invite-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 600;
  color: rgba(255,255,255,.9);
  line-height: 1.25;
  text-align: center;
  margin-bottom: .75rem;
  animation: fadeSlideUp .8s .4s ease both;
}

/* (duplicate .hero-names override removed — single source of truth above) */

/* ══════════════════════════════════════
   MUSIC PAUSE BUTTON — bottom right
   Matches reference: dark circle, ⏸/▶ icon
══════════════════════════════════════ */
#music-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(20, 10, 40, 0.82);
  border: 1.5px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  transition: background .25s, transform .2s, opacity .3s;
  opacity: 0;          /* hidden until music loads */
  pointer-events: none;
}
#music-btn.ready {
  opacity: 1;
  pointer-events: auto;
}
#music-btn:hover {
  background: rgba(30, 15, 60, 0.92);
  transform: scale(1.08);
}
#music-btn:active { transform: scale(0.95); }

@media(max-width:480px) {
  #music-btn { width:48px; height:48px; bottom:1.2rem; right:1.2rem; }
}

/* ── Hero celebration message (shown on/after wedding date) ── */
.hero-celebration-msg {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: .08em;
  margin-bottom: 1.5rem;
  animation: fadeSlideUp .8s ease both;
}

/* ══════════════════════════════════════
   COLOUR CARDS — equal fixed width
══════════════════════════════════════ */
.colour-card {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  flex-shrink: 0;
}
.colour-swatch {
  width: 56px !important;
  height: 56px !important;
}

/* ══════════════════════════════════════
   DATE CARD — styled as schedule card
══════════════════════════════════════ */
.sched-card--date {
  background: #fff;
  border-left-color: rgba(201,168,76,.55);
}
.sdb-label-inline {
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 500;
  margin-bottom: .25rem;
  display: block;
}

/* ══════════════════════════════════════
   SCHEDULE — line icon, clock, cal link
══════════════════════════════════════ */
.sched-icon svg { stroke: var(--gold-dark); }
.sched-time {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.sched-time svg { stroke: var(--gold-dark); flex-shrink: 0; }
.sched-cal-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .88rem;
  color: var(--purple-mid);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .03em;
  transition: color .25s;
  padding: .28rem .75rem;
  border: 1px solid rgba(92,26,142,.25);
  border-radius: 20px;
  background: rgba(92,26,142,.04);
}
.sched-cal-link:hover { color: var(--purple); border-color: rgba(92,26,142,.4); }
.sched-cal-link svg { stroke: currentColor; flex-shrink: 0; }

/* ══════════════════════════════════════
   LIGHTBOX — no bg, bigger, nav buttons
══════════════════════════════════════ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 999;
  align-items: center;
  justify-content: center;
  animation: fadeIn .25s ease;
}
.lightbox.open { display: flex; }

.lightbox-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(85vw, 920px);
  width: 100%;
}
.lightbox-inner img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  margin-bottom: .75rem;
}
.lightbox-tag {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .15em;
}
.lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10;
  transition: background .2s;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background .2s;
}
.lightbox-nav:hover { background: rgba(255,255,255,.22); }
.lightbox-nav--prev { left: 1.25rem; }
.lightbox-nav--next { right: 1.25rem; }
@media(max-width:600px) {
  .lightbox-nav--prev { left: .5rem; }
  .lightbox-nav--next { right: .5rem; }
  .lightbox-inner { max-width: 92vw; }
}

/* ══════════════════════════════════════
   MENU MODAL inner overrides
══════════════════════════════════════ */
.menu-modal-inner { max-width: 500px; }
.menu-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
  text-align: left;
}
.menu-modal-cat-title {
  font-family: 'Jost', sans-serif;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-dark, #8B6914);
  font-weight: 600;
  margin-bottom: .6rem;
  border-bottom: 1px solid rgba(201,168,76,.2);
  padding-bottom: .4rem;
}
.menu-modal-item {
  font-size: .95rem;
  color: #3A2C1A;
  padding: .2rem 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.menu-locked-modal {
  text-align: center;
  padding: 1.5rem 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: #6B4C2A;
}
@media(max-width:480px) { .menu-modal-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════
   WEDDING DETAILS — 4 info cards
══════════════════════════════════════ */
.details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
}
.detail-card {
  background: #fff;
  border-radius: 14px;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  transition: transform .3s, box-shadow .3s;
}
.detail-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--purple, #6A0DAD));
}
.detail-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.detail-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  color: var(--gold-dark);
}
.detail-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: .6rem;
}
.detail-main {
  font-size: 1.02rem;
  color: var(--gold-dark);
  font-weight: 500;
  margin-bottom: .35rem;
  line-height: 1.5;
}
.detail-sub {
  font-size: .9rem;
  color: var(--text2, #777);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .details-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .details-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ══════════════════════════════════════
   GALLERY — See More link
══════════════════════════════════════ */
.gallery-see-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 2rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--purple-mid);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, color .25s;
}
.gallery-see-more:hover {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

/* Venue detail card — clickable link to Google Maps */
.detail-card--clickable {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.detail-card--clickable::after {
  content: '↗';
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-size: .85rem;
  color: var(--purple-mid);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  transform: translate(-2px, 2px);
}
.detail-card--clickable:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}
.detail-card--clickable:hover {
  border-color: rgba(92,26,142,.25);
}

/* ══════════════════════════════════════
   RSVP — QR Code block
══════════════════════════════════════ */
.rsvp-qr-block {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  margin: 1.5rem auto;
  max-width: 280px;
  text-align: center;
}
.rsvp-qr-label {
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  font-weight: 500;
}
.rsvp-qr-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.rsvp-qr-canvas img {
  border-radius: 8px;
  max-width: 220px;
  height: auto;
  display: block;
}
.rsvp-qr-instruction {
  font-size: .82rem;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
  margin-top: 1rem;
}
.rsvp-qr-icon {
  font-size: 1.2rem;
  display: block;
  margin-bottom: .35rem;
}
.rsvp-qr-instruction strong {
  color: #fff;
  display: block;
  margin-bottom: .25rem;
}

/* ══════════════════════════════════════
   GIFTS SECTION
══════════════════════════════════════ */
.gifts-section { background: var(--ivory2); }

.gifts-card {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.07);
  position: relative;
  overflow: hidden;
}
.gifts-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), #6A0DAD, var(--gold));
}

.gifts-message {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.85;
  color: var(--text2, #555);
  text-align: center;
  margin-bottom: 2.5rem;
}

/* QR code block */
.gifts-qr-wrap {
  text-align: center;
  margin-bottom: 2.5rem;
}
.gifts-qr-label {
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 500;
  margin-bottom: 1rem;
}
.gifts-qr-inner {
  display: inline-block;
  padding: 12px;
  background: #FDFAF4;
  border-radius: 12px;
  border: 2px solid rgba(201,168,76,.2);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.gifts-qr-inner img {
  display: block;
  border-radius: 4px;
}
.gifts-qr-hint {
  font-size: .75rem;
  color: var(--text3, #aaa);
  margin-top: .75rem;
  letter-spacing: .05em;
}

/* Account details */
.gifts-accounts {
  border-top: 1px solid rgba(201,168,76,.18);
  padding-top: 1.75rem;
}
.gifts-account-label {
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 500;
  text-align: center;
  margin-bottom: 1.25rem;
}
.gifts-account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.1rem;
  background: var(--ivory, #FDFAF4);
  border-radius: 8px;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
.gifts-account-bank {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-dark);
  letter-spacing: .05em;
  min-width: 90px;
}
.gifts-account-num {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .08em;
}
.gifts-account-name {
  font-size: .8rem;
  color: var(--text2, #777);
  font-style: italic;
}

@media (max-width: 560px) {
  .gifts-card { padding: 2rem 1.25rem; }
  .gifts-account-item { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

/* ══════════════════════════════════════
   THANK YOU SECTION
══════════════════════════════════════ */
.thankyou-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #050810;
  padding: 5rem 1.5rem;
}

/* Couple photo background */
.ty-bg {
  position: absolute;
  inset: 0;
  background-image: url('/src/mariam.png');
  background-size: cover;
  background-position: center top;
  filter: brightness(.45) saturate(.7);
  transition: opacity 1s ease;
}
/* Gradient overlay — dark at bottom so text reads cleanly */
.ty-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5,8,16,.25) 0%,
    rgba(5,8,16,.55) 40%,
    rgba(5,8,16,.80) 70%,
    rgba(5,8,16,.96) 100%
  );
}

/* Content */
.ty-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: tyFadeUp 1s ease both;
}
@keyframes tyFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Monogram */
.ty-monogram {
  font-family: 'Parisienne','Great Vibes', cursive;
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: rgba(201,168,76,.85);
  line-height: 1;
  margin-bottom: 1.75rem;
  letter-spacing: .06em;
}
.ty-heart {
  font-family: sans-serif;
  font-size: .75em;
  color: var(--gold);
  vertical-align: middle;
}

/* Thank You heading — large script-style */
.ty-heading {
  font-family: 'Parisienne','Great Vibes', cursive;
  font-size: clamp(3.5rem, 14vw, 7rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 .4rem;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
  letter-spacing: .03em;
}

/* Rule */
.ty-content .sec-divider,
.ty-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.7), transparent);
  margin: 1.5rem auto;
  display: block;
}

/* Message */
.ty-message {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,.82);
  line-height: 1.95;
  max-width: 520px;
  margin: 0 0 2rem;
}

/* Signature */
.ty-signature {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(.95rem, 2vw, 1.1rem);
  font-style: italic;
  color: rgba(255,255,255,.6);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.ty-names {
  font-family: 'Parisienne','Great Vibes', cursive;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: rgba(201,168,76,.9);
  font-style: normal;
  display: block;
  margin-top: .25rem;
}

/* Floral SVG ornament */
.ty-floral {
  width: min(300px, 85vw);
  opacity: .75;
  margin-top: .5rem;
}
.ty-floral svg { width: 100%; height: auto; }

/* ── Mobile ── */
@media (max-width: 600px) {
  .thankyou-section { min-height: 80vh; padding: 4rem 1.25rem; }
  .ty-heading { font-size: clamp(3rem, 17vw, 5rem); }
}

/* ══════════════════════════════════════
   MENU / EVENTS — warm placeholder
══════════════════════════════════════ */
.menu-locked-modal {
  text-align: center;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.menu-locked-icon {
  font-size: 2.5rem;
  margin-bottom: .25rem;
}
.menu-locked-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--gold-dark);
  margin: 0;
}
.menu-locked-msg {
  font-size: .9rem;
  color: var(--text2, #777);
  line-height: 1.75;
  max-width: 320px;
  margin: 0;
}

/* ── Gifts section extras ── */
.gifts-pay-link {
  display: inline-block;
  margin-top: .75rem;
  font-size: .78rem;
  color: var(--purple-mid, #7B2DBF);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.gifts-pay-link:hover { border-color: var(--purple-mid, #7B2DBF); }
.gifts-registry-cta {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(201,168,76,.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}
.gifts-registry-text {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--text2, #666);
}
.gifts-registry-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 2rem;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ── Locked programme/menu button ── */
.btn-programme--locked {
  opacity: .6;
  cursor: not-allowed !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(201,168,76,.2) !important;
  color: var(--text3, #999) !important;
  letter-spacing: .1em;
}
.btn-programme--locked:hover {
  transform: none !important;
  box-shadow: none !important;
}