/* ==========================================================================
   Würfel Mansion — Appointment landing page
   Built on Bootstrap 5.3 · mobile-first (base = phones, enhanced upward)
   ========================================================================== */

/* ---- Font: Montserrat (bundled) ---------------------------------------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:200;font-display:swap;src:url("../fonts/montserrat-latin-200-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/montserrat-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/montserrat-latin-500-normal.woff2") format("woff2")}

/* ---- Tokens ------------------------------------------------------------- */
:root{
  --wm-gold:#e5af00;
  --wm-field:#141414;
  --wm-field-hover:#1b1b1b;
  --wm-ink:#fff;
  --wm-ink-dim:#cfcfcf;
  --wm-placeholder:#4a4849;
  /* select arrows: ▼ when closed, ▲ while the list is open (.is-open set in main.js) */
  --wm-arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23fff' d='M0.5 0.5H11.5L6 9.5z'/%3E%3C/svg%3E");
  --wm-arrow-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23fff' d='M6 0.5 11.5 9.5H0.5z'/%3E%3C/svg%3E");
  --wm-gutter:1.5rem;                 /* 24px side gutter on phones */
  --bs-font-sans-serif:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --bs-body-font-family:var(--bs-font-sans-serif);
  --bs-body-bg:#000;
  --bs-body-color:var(--wm-ink);
}

html{scroll-behavior:smooth}
body{
  background:#000;color:var(--wm-ink);
  font-family:var(--bs-font-sans-serif);font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--wm-gold)}
:focus-visible{outline:1px solid var(--wm-gold);outline-offset:3px}

/* Content column: design places copy 137px from the left on a 1440 canvas */
.container{--bs-gutter-x:calc(var(--wm-gutter) * 2);}
@media (min-width:1200px){ .container{max-width:calc(1166px + var(--wm-gutter) * 2)} }

/* ---- Sections / backgrounds -------------------------------------------- */
.wm-section{
  position:relative;isolation:isolate;
  background:#000 center / cover no-repeat;
  min-height:100vh;min-height:100svh;
}
.wm-hero   {background-image:url("../img/bg-1.jpg");background-position:68% center}
.wm-stage--about  {background-image:url("../img/bg-2.jpg");background-position:84% 30%}
.wm-stage--reserve{background-image:url("../img/bg-3.jpg");background-position:82% center}
.wm-prefs  {background-image:url("../img/bg-4.jpg");background-position:50% center}
.wm-thanks {background-image:url("../img/thankyou-bg.jpg");background-position:78% center}

/* readability scrim for narrow screens (copy sits over the image) */
.wm-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35) 45%,rgba(0,0,0,.65));
}
.wm-hero::before{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 40%,rgba(0,0,0,.35))}
.wm-stage--reserve::before{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.55))}
/* phones: dedicated portrait artwork per screen (assets/img/mob-bg-*.jpg, 1191×2576).
   Every block below is its own full screen on phones (see the "phone pages" block at the end of this file). */
@media (max-width:767.98px){
  :root{--wm-art-h:216.3vw}                                   /* rendered height of a full-width portrait image */
  .wm-hero   {background-image:url("../img/mob-bg-1.jpg");background-position:78% center}
  .wm-prefs  {background-image:url("../img/mob-bg-4.jpg");background-position:center center}
  .wm-thanks {background-image:url("../img/mob-thankyou-bg.jpg");background-position:86% center}
  .wm-section::before,.wm-hero::before,.wm-stage--reserve::before{background:none}
}
@media (min-width:768px){ .wm-section::before{background:none} }

/* ---- 1 · Hero ----------------------------------------------------------- */
.wm-hero__inner{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-top:max(3rem,env(safe-area-inset-top));padding-bottom:4rem;
}
.wm-logo{display:inline-block;width:120px}
.wm-logo img{display:block;width:100%;height:auto}
.wm-title{
  margin:0 0 1.35rem;
  font-size:1.09rem;font-weight:300;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;
}
.wm-lead{
  margin:0 0 1.8rem;max-width:22rem;
  font-size:0.75rem;font-weight:300;letter-spacing:.05em;line-height:1.55;text-transform:uppercase;
}
.wm-rule{display:block;width:40px;height:1.5px;background:var(--wm-gold)}

/* ---- Shared type -------------------------------------------------------- */
.wm-heading{
  display: flex;
  gap: 16px;
  position:relative;margin:0;
  font-weight:200;color:var(--wm-gold);text-transform:uppercase;
  letter-spacing:.012em;line-height:1.3;
}
.wm-heading--lg{font-size:1.125rem}
.wm-heading--md{font-size:1.125rem}
.wm-heading__rule{
  display:block;width:40px;height:1.5px;background:var(--wm-gold);margin-top:.8rem;
}
.wm-sub{
  margin:.35rem 0 0;font-size:0.75rem;font-weight:300;letter-spacing:.015em;text-transform:uppercase;
}
.wm-group{
  margin:2rem 0 1.5rem;
  font-size:0.825rem;font-weight:300;letter-spacing:.015em;text-transform:uppercase;
}
.wm-group--sm{margin:1.75rem 0 1.1rem}

/* ---- 2 · Destination ---------------------------------------------------- */
.wm-about{padding:4rem 0 4.5rem}
.wm-about .wm-heading,.wm-awards-sec .wm-heading{margin-bottom:1.4rem}
.wm-copy{max-width:47.5rem}
.wm-copy p{
  margin:0 0 1.1rem;
  font-size:.825rem;font-weight:300;line-height:1.95;letter-spacing:.005em;
}
.wm-awards-title{margin-top:2.6rem}
.wm-awards{display:flex;flex-wrap:no-wrap;gap:2rem 3.4rem;margin:1.9rem 0 0;padding:0}
.wm-awards li{display:flex;flex-direction:column;align-items:flex-start;min-width:9rem}
.wm-awards img{height:auto;display:block;margin-bottom:1.6rem}
.wm-award__small,.wm-award__name{display:block;text-transform:uppercase;font-weight:300;letter-spacing:.02em}
.wm-award__small{font-size:.8rem;line-height:1.4}
.wm-award__name{font-size:.82rem;line-height:1.5}

/* ---- 3 · Reserve form --------------------------------------------------- */
.wm-reserve{padding:4rem 0 4.5rem}
.wm-fields{--bs-gutter-x:1.5rem;--bs-gutter-y:.45rem;max-width:39rem}
.wm-label{
  display:block;margin:0 0 .4rem;
  font-size:.8rem;font-weight:300;letter-spacing:.015em;text-transform:uppercase;line-height:1.3;
}
.wm-fields > [class*="col"]{margin-top:.9rem}

.wm-input,
.wm-select,
.wm-slot{
  background-color:var(--wm-field);color:var(--wm-ink);
  border:1px solid transparent;border-radius:0;box-shadow:none;
  font-family:inherit;font-weight:300;font-size:.75rem;letter-spacing:.02em;
}
.wm-input{height:44px;padding:0 1.3rem}
.wm-input::placeholder{color:var(--wm-placeholder);opacity:1}
.wm-input:focus,.wm-select:focus{
  background-color:var(--wm-field-hover);color:var(--wm-ink);
  border-color:var(--wm-gold);box-shadow:none;
}
/* validation: stay on-brand instead of Bootstrap green/red */
.was-validated .wm-input:valid{border-color:transparent;background-image:none;padding-right:1.3rem}
.was-validated .wm-input:invalid{border-color:#b54b3c;background-image:none;padding-right:1.3rem}
.was-validated .wm-input:focus{border-color:var(--wm-gold)}
/* selects: Bootstrap swaps in its own tick/cross icon + padding here; keep our arrow instead
   (selectors mirror Bootstrap's so they win by source order) */
.was-validated .wm-select:valid:not([multiple]):not([size]),
.was-validated .wm-select:invalid:not([multiple]):not([size]){
  --bs-form-select-bg-icon:none;
  background-image:var(--wm-arrow-down);
  background-position:right var(--wm-arrow-x) center;
  background-size:12px 10px;
  padding-right:2.5rem;
}
.was-validated .wm-select:valid:not([multiple]):not([size]){border-color:transparent}
.was-validated .wm-select:invalid:not([multiple]):not([size]){border-color:#b54b3c}
.was-validated .wm-select.is-open:valid:not([multiple]):not([size]),
.was-validated .wm-select.is-open:invalid:not([multiple]):not([size]){background-image:var(--wm-arrow-up)}
.was-validated .wm-select:focus:not([multiple]):not([size]),
.was-validated .wm-select.is-open:not([multiple]):not([size]){border-color:var(--wm-gold)}

.wm-select{
  --wm-arrow-x:1.15rem;
  height:44px;padding:0 2.5rem 0 1.3rem;text-transform:uppercase;cursor:pointer;color-scheme:dark;
  --bs-form-select-bg-img:none;
  background-image:var(--wm-arrow-down);
  background-repeat:no-repeat;background-position:right var(--wm-arrow-x) center;background-size:12px 10px;
}
.wm-select:focus-visible{outline:0}   /* the gold border is the focus indicator */
.wm-select.is-open{background-image:var(--wm-arrow-up);border-color:var(--wm-gold);background-color:var(--wm-field-hover)}
/* custom option list shown in place of the native popup on mouse/trackpad devices (see main.js) */
.wm-dd{position:relative}
.wm-dd__list{
  position:absolute;left:0;right:0;top:100%;z-index:30;
  margin:-1px 0 0;padding:0;list-style:none;max-height:15rem;overflow-y:auto;
  background:var(--wm-field);border:1px solid var(--wm-gold);box-shadow:0 14px 28px rgba(0,0,0,.55);
}
.wm-dd__list.is-up{top:auto;bottom:100%;margin:0 0 -1px}
.wm-dd__opt{
  padding:.6rem 1.3rem;color:var(--wm-ink);cursor:pointer;
  font-size:.82rem;font-weight:300;letter-spacing:.02em;line-height:1.3;
}
.wm-dd__opt.is-selected{color:var(--wm-gold)}
.wm-dd__opt.is-active{background:var(--wm-field-hover);color:var(--wm-gold)}
.wm-select option{background:#141414;color:#fff;text-transform:none}
/* follow-up input revealed under a "Yes" select (allergy details, children's age) */
.wm-cond{margin-top:.55rem}
.wm-cond[hidden]{display:none}
.wm-select:invalid,.wm-select:has(option[disabled]:checked){color:var(--wm-ink)}

/* Schedule */
.wm-appointment-title{margin-top:3.2rem}
.wm-schedule{--bs-gutter-x:0}
.wm-schedule__date{margin-right:0}
.wm-cal{width:100%;max-width:21rem}
@media (min-width:768px) and (max-width:991.98px){ .wm-cal{width:19rem} .wm-schedule__date{flex:0 0 auto} }
.wm-cal__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 1.1rem}
.wm-cal__month{margin:0;font-size:.75rem;font-weight:300;letter-spacing:.02em;text-transform:uppercase}
.wm-cal__nav{display:flex;gap:.1rem}
.wm-cal__arrow{
  display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;
  background:transparent;border:0;color:var(--wm-ink);font-size:.7rem;cursor:pointer;
}
.wm-cal__arrow:hover:not(:disabled){color:var(--wm-gold)}
.wm-cal__arrow:disabled{opacity:.25;cursor:not-allowed}
.wm-cal__pad{display:block}
.wm-cal__selected{min-height:1.2rem;margin:.9rem 0 0;font-size:.78rem;font-weight:300;letter-spacing:.03em;color:var(--wm-gold)}
.wm-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:.25rem;text-align:center}
.wm-cal__dow{font-size:.8rem;font-weight:400;padding:.4rem 0 .9rem}
.wm-cal__day{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:2.4rem;padding:0;border:0;background:transparent;color:var(--wm-ink);
  font:inherit;font-size:.8rem;font-weight:300;cursor:pointer;
}
.wm-cal__day:hover{color:var(--wm-gold)}
.wm-cal__day[aria-pressed="true"]{color:#000;background:var(--wm-gold);font-weight:500}
.wm-cal__day.is-today::after{content:"";position:absolute;left:50%;bottom:3px;width:14px;height:1px;transform:translateX(-50%);background:var(--wm-gold)}
.wm-cal__day[aria-pressed="true"].is-today::after{background:#000}
.wm-cal__day:focus-visible{outline:1px solid var(--wm-gold);outline-offset:-2px}
.wm-cal__day:disabled{opacity:.28;cursor:not-allowed}
.wm-cal__day:disabled:hover{color:var(--wm-ink)}

.wm-slot-label{display:block;margin-bottom:.55rem;font-size:.76rem;font-weight:300;text-transform:uppercase;letter-spacing:.02em}
.wm-slot__input{position:absolute;opacity:0;pointer-events:none}
.wm-slot{
  display:flex;align-items:center;height:44px;width:100%;padding:0 .8rem;margin:0;cursor:pointer;
  font-size:.78rem;
}
.wm-slot:hover{background-color:var(--wm-field-hover)}
.wm-slot__input:checked + .wm-slot{border-color:var(--wm-gold);color:var(--wm-gold)}
.wm-slot__input:focus-visible + .wm-slot{outline:1px solid var(--wm-gold);outline-offset:3px}

.invalid-feedback{font-size:.78rem;color:#e07a68;margin-top:.5rem}
.was-validated #preferredDate:invalid ~ .invalid-feedback,
.was-validated .wm-slot__input:invalid ~ .invalid-feedback{display:block}
.wm-schedule__time .invalid-feedback{display:none}
.was-validated .wm-schedule__time.is-invalid .invalid-feedback{display:block}

/* ---- 4 · Preferences, confirm, footer ----------------------------------- */
.wm-prefs{padding:3rem 0 0}
.wm-prefs__inner{
  min-height:calc(100vh - 3rem);min-height:calc(100svh - 3rem);
  display:flex;flex-direction:column;justify-content:space-between;
}
.wm-prefs__form{max-width:39rem}
.g-wm{--bs-gutter-x:1.05rem;--bs-gutter-y:1.2rem}
.wm-btn{
  display:block;width:100%;height:46px;padding:0;
  background:var(--wm-field);color:var(--wm-ink);border:1px solid transparent;border-radius:0;
  font-size:1.05rem;font-weight:300;letter-spacing:.03em;text-transform:uppercase;
  transition:background-color .2s,border-color .2s,color .2s;
}
.wm-btn:hover,.wm-btn:focus-visible{background:var(--wm-field-hover);color:var(--wm-gold);border-color:var(--wm-gold)}
.wm-btn:active{background:#222;color:var(--wm-gold)}

.wm-footer{
  padding:4rem 0 calc(2.5rem + env(safe-area-inset-bottom));
  font-size:.72rem;font-weight:300;letter-spacing:.015em;line-height:1.7;color:#d9d9d9;
}
.wm-footer p{margin:0}
.wm-footer a{text-decoration:none}
.wm-footer__legal a + a{margin-left:.45rem}
.wm-social{display:flex;gap:.2rem}
.wm-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-14px 0 -14px -14px;       /* 44px touch target, 16px glyph disc */
}
.wm-social a i{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:#fff;color:#000;font-size:.825rem;line-height:1;
}
.wm-social li:first-child a i{background:transparent;color:#fff;font-size:22px}   /* bi-facebook is already a disc */
.wm-social a:hover i{background:var(--wm-gold)}
.wm-social li{margin:0}

/* ---- 5 · Thank you (index #thanks + thank-you.html) ---------------------- */
.wm-thanks{padding:4rem 0 0}
.wm-thanks__inner{
  min-height:calc(100vh - 4rem);min-height:calc(100svh - 4rem);
  display:flex;flex-direction:column;justify-content:space-between;
}
.wm-thanks__copy{max-width:38rem}
.wm-thanks__copy .wm-heading{margin-bottom:1.6rem}
.wm-thanks__copy p{margin:0 0 1.1rem;font-size:1rem;font-weight:300;line-height:1.5;letter-spacing:.01em}
.wm-thanks__copy .wm-thanks__lead{font-size:1.1rem}
.wm-thanks:focus{outline:0}

/* ======================================================================
   ≥ 576px
   ====================================================================== */
@media (min-width:576px){
  :root{--wm-gutter:2rem}
  .wm-heading--lg,.wm-heading--md{font-size:1.125rem}
}

/* ======================================================================
   ≥ 768px  (tablet: two-column form, design proportions begin)
   ====================================================================== */
@media (min-width:768px){
  :root{--wm-gutter:3rem}
  .wm-hero__inner{padding-top:5rem;padding-bottom:5.5rem}
  .wm-logo{width:135px}
  .wm-title{font-size:1.6rem}
  .wm-lead{font-size:1rem;max-width:none}
  .wm-schedule__date{margin-right:3rem}
  .wm-fields > [class*="col"]{margin-top:.9rem}
  .wm-slot{width:172px}
  .wm-footer__legal{padding-left:0}
}

/* ======================================================================
   ≥ 992px  (desktop: pixel-matched to the 1440 × 900 artboards)
   ====================================================================== */
@media (min-width:992px){
  :root{--wm-gutter:3rem}
  .wm-section{min-height:max(100vh,640px)}

  /* 1 · hero */
  .wm-hero__inner{min-height:max(100vh,640px);padding-top:105px;padding-bottom:100px}
  .wm-logo{width:148px;margin-left:-6px}
  .wm-title{font-size:1.254rem;margin-bottom:1.55rem;letter-spacing:.035em}
  .wm-lead{font-size:1rem;line-height:27px;margin-bottom:3.15rem;letter-spacing:.05em}

  /* shared */
  .wm-heading--lg,.wm-heading--md{font-size:1.225rem}
  .wm-heading{display:flex;align-items:center;gap:16px;line-height:36px}
  .wm-heading__rule{margin:0;flex:0 0 40px}
  .wm-sub{font-size:1rem;line-height:28px;margin-top:6px}
  .wm-group{font-size:1rem;line-height:28px}

  /* 2 · destination */
  .wm-about{padding:84px 0 4rem}
  .wm-about .wm-heading,.wm-awards-sec .wm-heading{margin-bottom:0}
  .wm-copy{margin-top:22px;max-width:none}
  .wm-copy p{font-size:1rem;line-height:28px;margin-bottom:14px;letter-spacing:0}
  .wm-awards-title{margin-top:29px}
  .wm-awards{gap:0;margin-top:30px}
  .wm-awards li{min-width:0}
  .wm-awards li:first-child{width:238px}
  .wm-awards img{height:auto;margin-top:auto;margin-bottom:24px}
  .wm-award__small{font-size:.86rem;line-height:22px}
  .wm-award__name{font-size:.86rem;line-height:22px}

  /* 3 · reserve */
  .wm-reserve{padding:100px 0 3.3rem}
  .wm-group{margin:26px 0 26px}
  .wm-fields{--bs-gutter-x:24px;--bs-gutter-y:0;max-width:646px}
  .wm-fields > [class*="col"]{margin-top:5px}
  .wm-fields > .wm-fields__select{margin-top:15px}
  .wm-label{font-size:.85rem;line-height:20px;margin-bottom:7px}
  .wm-input,.wm-select{height:36px;font-size:.74rem}
  .wm-input{padding:0 21px}
  .wm-select{padding:0 2.5rem 0 21px;font-size:.85rem;--wm-arrow-x:17px}
  .wm-appointment-title{margin-top:42px}
  .wm-appointment-title + .wm-sub{margin-top:3px}
  .wm-group--sm{margin:22px 0 22px}
  .wm-schedule__date{flex:0 0 257px;width:257px;margin-right:0}
  .wm-schedule__time{flex:1 1 0%;width:auto}
  .wm-cal{width:206px;max-width:none;margin-left:-6px}
  .wm-cal__head{margin:0 0 9px 6px;height:26px}
  .wm-cal__month{font-size:.8rem;line-height:18px}
  .wm-cal__arrow{width:26px;height:26px;font-size:.65rem}
  .wm-cal__selected{margin:10px 0 0 0;min-height:18px}
  .wm-cal__grid{grid-template-columns:repeat(7,29.5px);row-gap:0}
  .wm-cal__dow{height:27px;padding:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:300}
  .wm-cal__day{height:27px;width:100%;margin:0;font-size:.8rem}
  .wm-slot-label{font-size:.73rem;line-height:18px;margin-bottom:19px}
  .wm-slot{height:28px;width:172px;font-size:.73rem;padding:0 11px}
  .wm-schedule .row{--bs-gutter-x:31px}

  /* 5 · thank you */
  .wm-thanks{padding:84px 0 0}
  .wm-thanks__inner{min-height:calc(max(100vh,640px) - 84px)}
  .wm-thanks__copy{max-width:612px}
  .wm-thanks__copy .wm-heading{margin-bottom:28px}
  .wm-thanks__copy p{font-size:.96rem;line-height:23px;margin-bottom:17px}
  .wm-thanks__copy .wm-thanks__lead{font-size:1.075rem}

  /* 4 · preferences + footer */
  .wm-prefs{padding:95px 0 0}
  .wm-prefs__inner{min-height:calc(max(100vh,640px) - 95px)}
  .wm-prefs__form{max-width:611px}
  .g-wm{--bs-gutter-x:17px;--bs-gutter-y:23px}
  .wm-prefs .wm-select{height:33px;font-size:.78rem;padding-left:16px}
  .wm-prefs .wm-cond{height:33px;font-size:.78rem;padding:0 16px;margin-top:10px}
  .wm-dd__opt{padding:.45rem 21px;font-size:.85rem}
  .wm-prefs .wm-dd__opt{padding-left:16px;font-size:.78rem}
  .wm-btn{height:33px;font-size:1rem;line-height:33px}
  .wm-footer{padding:0 0 83px;font-size:.725rem;letter-spacing:0;line-height:17px;color:#ffffff}
  .wm-footer__addr{flex:0 0 255px;max-width:255px}
  .wm-footer__legal{flex:0 0 179px;max-width:179px}
  .wm-footer p.mb-2{margin-bottom:8px!important}
  .wm-social{gap:.45rem}
  .wm-social a{width:24px;height:24px;margin:0;position:relative}
  .wm-social a::after{content:"";position:absolute;inset:-6px -0px}
  .wm-social a i{width:24px;height:24px;font-size:.825rem}
  .wm-social li:first-child a i{font-size:22px}
  .wm-social li:first-child a:hover i{color:var(--wm-gold)}
}

/* ======================================================================
   ≥ 1400px — keep the artboard feel on big monitors
   ====================================================================== */
@media (min-width:1400px){
  .wm-copy{max-width:48rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ======================================================================
   Pages inside a stage
   ≥768px: the stage carries the background, so the split pages look like
           one continuous section (padding is shared, not doubled).
   ====================================================================== */
.wm-page{position:relative}
@media (min-width:768px){
  .wm-about{padding-bottom:0}
  .wm-awards-sec{padding:0 0 4.5rem}
  .wm-reserve{padding-bottom:0}
  .wm-schedule-page{padding:0 0 4.5rem}
}
@media (min-width:992px){
  .wm-awards-sec{padding:0 0 4rem}
  .wm-schedule-page{padding:0 0 3.3rem}
}

/* ======================================================================
   Phone pages (<768px): each block is its own screen
   1 invite · 2 destination · 3 awards · 4 arrival details · 5 appointment · 6 preferences
   ====================================================================== */
@media (max-width:767.98px){
  .wm-stage{background-image:none;min-height:0}
  .wm-page{
    isolation:isolate;
    min-height:100vh;min-height:100svh;
    padding:4rem 0 3rem;
    background:#000 center top / cover no-repeat;
  }
  .wm-page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}

  /* 2 · destination copy — top of the art, fading to black before the trophies so text stays readable */
  .wm-about{background-image:url("../img/mob-bg-2.jpg");background-size:100% auto}
  .wm-about::before{background:linear-gradient(180deg,rgba(0,0,0,.25),#000 calc(var(--wm-art-h) * .5))}

  /* 3 · awards — full art, trophies sit under the logos */
  .wm-awards-sec{background-image:url("../img/mob-bg-2.jpg")}
  .wm-awards-sec .wm-heading{margin-bottom:0}
  .wm-awards-title{margin-top:0}
  .wm-awards{margin-top:3.5rem}            /* clear gap between the heading and the logos */

  /* 4 · arrival details */
  .wm-reserve{background-image:url("../img/mob-bg-3.jpg")}
  .wm-reserve::before{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.25))}

  /* 5 · appointment */
  .wm-schedule-page{background-image:url("../img/mob-bg-3.jpg");background-size:100% auto}
  .wm-schedule-page::before{background:linear-gradient(180deg,rgba(0,0,0,.45),#000 calc(var(--wm-art-h) * .55))}
  .wm-page .wm-appointment-title{margin-top:0}
}

/* ======================================================================
   Phones (<768px): every screen snaps to the top of the viewport as you scroll.
   "proximity" = it settles on the nearest screen top when you stop near it, but never
   traps you inside a screen taller than the display (calendar, preferences + footer)
   and doesn't fight the keyboard while filling in fields.
   Want a harder lock? change "proximity" to "mandatory".
   ====================================================================== */
@media (max-width:767.98px){
  html{scroll-snap-type:y proximity;scroll-padding-top:0}
  #invite,.wm-about,.wm-awards-sec,#reserve,#schedule,#preferences,#thanks{scroll-snap-align:start}
}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
}

/* Tablet / desktop (≥768px): each full-screen section snaps to the top of the viewport —
   invitation · destination + awards · arrival details + appointment · preferences · thank-you.
   (The two split stages stay one continuous section, so they snap as a whole.) */
@media (min-width:768px){
  html{scroll-snap-type:y proximity}
  .wm-section{scroll-snap-align:start}
}
@media (min-width:768px) and (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
}